docs(text): add component examples to storybook, update switch text p…

…rop (#9817) * docs(text): add component examples to storybook, update switch text prop * feat(switch): provide optional text and children props * chore: reconfigure stories and switch usage/children prop * fix(switch): render text or children, not both * chore: update snaps Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Oct 22, 2021 · 877e478 · 877e478
1 parent 7a1e883
commit 877e478
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 3 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -5692,6 +5692,9 @@ Map {
     },
     "displayName": "Switch",
     "propTypes": Object {
+      "children": Object {
+        "type": "node",
+      },
       "className": Object {
         "type": "string",
       },
@@ -5724,7 +5727,6 @@ Map {
         "type": "bool",
       },
       "text": Object {
-        "isRequired": true,
         "type": "string",
       },
     },

diff --git a/packages/react/src/components/Switch/Switch.js b/packages/react/src/components/Switch/Switch.js
@@ -14,6 +14,7 @@ const { prefix } = settings;
 
 const Switch = React.forwardRef(function Switch(props, tabRef) {
   const {
+    children,
     className,
     disabled,
     index,
@@ -57,7 +58,7 @@ const Switch = React.forwardRef(function Switch(props, tabRef) {
       {...other}
       {...commonProps}>
       <span className={`${prefix}--content-switcher__label`} title={text}>
-        {text}
+        {text !== undefined ? text : children}
       </span>
     </button>
   );
@@ -66,6 +67,11 @@ const Switch = React.forwardRef(function Switch(props, tabRef) {
 Switch.displayName = 'Switch';
 
 Switch.propTypes = {
+  /**
+   * Provide child elements to be rendered inside of the Switch
+   */
+  children: PropTypes.node,
+
   /**
    * Specify an optional className to be added to your Switch
    */
@@ -107,7 +113,7 @@ Switch.propTypes = {
   /**
    * Provide the contents of your Switch
    */
-  text: PropTypes.string.isRequired,
+  text: PropTypes.string,
 };
 
 Switch.defaultProps = {

diff --git a/packages/react/src/components/Text/Text-story.js b/packages/react/src/components/Text/Text-story.js
@@ -10,6 +10,11 @@ import { LayoutDirection } from '../Layout';
 import { TextDirection, Text } from '../Text';
 import RadioButtonGroup from '../RadioButtonGroup';
 import RadioButton from '../RadioButton';
+import Button from '../Button';
+import Dropdown from '../Dropdown';
+import ContentSwitcher from '../ContentSwitcher';
+import Switch from '../Switch';
+import { Heading } from '../Heading';
 
 export default {
   title: 'Experimental/unstable_Text',
@@ -88,3 +93,44 @@ export const SetTextDirection = () => {
     </TextDirection>
   );
 };
+
+export const ComponentExamples = () => {
+  const rtlText = 'שלום!!';
+  const dropdownItems = [
+    {
+      id: 'option-0',
+      text: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.',
+    },
+    {
+      id: 'option-1',
+      text: rtlText,
+    },
+  ];
+  return (
+    <>
+      <Heading>{rtlText}</Heading>
+      <Button kind="ghost">
+        <Text>{rtlText}</Text>
+      </Button>
+      <div style={{ width: 400 }}>
+        <Dropdown
+          id="default"
+          titleText="Using <Text> with `itemToElement`"
+          helperText="This is some helper text"
+          label="Dropdown menu options"
+          items={dropdownItems}
+          itemToElement={(item) => <Text>{item.text}</Text>}
+        />
+      </div>
+      <ContentSwitcher
+        helperText="Using <Text> within <Switch>"
+        onChange={() => {}}>
+        <Switch name="one">
+          <Text>{rtlText}</Text>
+        </Switch>
+        <Switch name="two" text="Second section" />
+        <Switch name="three" text="Third section" />
+      </ContentSwitcher>
+    </>
+  );
+};