docs(checkbox, radio-group): add suffix section (#4075)

* docs(checkbox, radio-group): add suffix section * chore: upgrade to premium
twilio-labs · Sep 17, 2024 · d69fd2d · d69fd2d
1 parent ae52236
commit d69fd2d
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 0 deletions.
diff --git a/packages/paste-website/src/component-examples/RadioGroupExamples.ts b/packages/paste-website/src/component-examples/RadioGroupExamples.ts
@@ -148,6 +148,55 @@ render(
 )
 `.trim();
 
+export const suffixExample = `
+const DateRadioGroup = () => {
+  const [value, setValue] = React.useState('lowest');
+  return (
+    <RadioGroup
+      name="date"
+      value={value}
+      legend="Select date"
+      onChange={newValue => {
+        setValue(newValue);
+      }}
+    >
+      <Radio
+        id="today"
+        value="today"
+        name="date"
+      >
+        Today
+      </Radio>
+      <Radio
+        id="last-15-days"
+        value="last-15-days"
+        name="date"
+      >
+        Last 15 days
+      </Radio>
+      <Radio
+        id="last-month"
+        value="last-month"
+        name="date"
+      >
+        Last month
+      </Radio>
+      <Radio
+        id="custom"
+        value="custom"
+        name="date"
+      >
+        <Box display="flex" columnGap="space30">Custom <Badge variant="success" size="small">Premium</Badge></Box>
+      </Radio>
+    </RadioGroup>
+  );
+};
+
+render(
+  <DateRadioGroup />
+)
+`.trim();
+
 export const requiredExample = `
 const SslRadioGroup = () => {
   const [value, setValue] = React.useState('on');

diff --git a/packages/paste-website/src/pages/components/checkbox/index.mdx b/packages/paste-website/src/pages/components/checkbox/index.mdx
@@ -8,6 +8,7 @@ export const meta = {
 
 import {Checkbox, CheckboxGroup, CheckboxDisclaimer} from '@twilio-paste/checkbox';
 import {Box} from '@twilio-paste/box';
+import {Badge} from '@twilio-paste/badge';
 import {Text} from '@twilio-paste/text';
 import {Paragraph} from '@twilio-paste/paragraph';
 import {Anchor} from '@twilio-paste/anchor';
@@ -177,6 +178,31 @@ You can provide additional information about the group with the use of help text
 </CheckboxGroup>`}
 </LivePreview>
 
+### Checkbox with suffix
+
+You can provide additional information about an individual item by adding a non-string element as a suffix. The suffix can be any non-string element that is not interactive.
+
+<LivePreview scope={{Checkbox, CheckboxGroup, Badge, Box}} language="jsx">
+  {`<CheckboxGroup
+  name="call logs status"
+  legend="Call logs status"
+  helpText="Select at least 1 status to view results"
+>
+  <Checkbox id="busy" value="busy">
+    <Box display="flex" columnGap="space30">Busy <Badge variant="new" size="small">New</Badge></Box>
+  </Checkbox>
+  <Checkbox id="canceled" value="canceled">
+    Canceled
+  </Checkbox>
+  <Checkbox id="completed" value="completed">
+    Completed
+  </Checkbox>
+  <Checkbox id="queued" value="queued">
+    Queued
+  </Checkbox>
+</CheckboxGroup>`}
+</LivePreview>
+
 ### Checkbox Disclaimer
 
 <LivePreview scope={{CheckboxDisclaimer, Text}} language="jsx">

diff --git a/packages/paste-website/src/pages/components/radio-group/index.mdx b/packages/paste-website/src/pages/components/radio-group/index.mdx
@@ -8,6 +8,7 @@ export const meta = {
 
 import {Radio, RadioGroup} from '@twilio-paste/radio-group';
 import {Box} from '@twilio-paste/box';
+import {Badge} from '@twilio-paste/badge';
 import {useUID} from '@twilio-paste/uid-library';
 import {Paragraph} from '@twilio-paste/paragraph';
 import {SiteLink} from '../../../components/SiteLink';
@@ -24,6 +25,7 @@ import {
   uncontrolledRadioGroup,
   controlledRadioGroup,
   i18nExample,
+  suffixExample,
 } from '../../../component-examples/RadioGroupExamples';
 import packageJson from '@twilio-paste/radio-group/package.json';
 import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
@@ -137,6 +139,14 @@ Help text appears after the group label but before the first radio option.
   {defaultExample}
 </LivePreview>
 
+### With suffix
+
+You can provide additional information about an individual item by adding a non-string element as a suffix. The suffix can be any non-string element that is not interactive.
+
+<LivePreview scope={{Radio, RadioGroup, Box, Badge}} noInline>
+  {suffixExample}
+</LivePreview>
+
 ### Required usage
 
 Use the required dot to denote a required field. The required dot appears before the fieldset legend.