refactor(react): update ContentSwitcher and Switch to hooks (#3302)

* chore: check-in work * chore: check-in work * chore: check-in work * refactor(react): update ContentSwitcher and Switch to hooks * fix(react): update deprecate to correctly warn * chore: check-in work * fix(react): update ContentSwitcher focus * chore(react): update test for activeElement
carbon-design-system · Jul 16, 2019 · 954ac48 · 954ac48
1 parent c8911ec
commit 954ac48
Show file tree

Hide file tree

Showing 12 changed files with 632 additions and 487 deletions.
diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js b/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js
@@ -8,7 +8,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { withKnobs, boolean } from '@storybook/addon-knobs';
+import { withKnobs, boolean, number } from '@storybook/addon-knobs';
 import ContentSwitcher from '../ContentSwitcher';
 import Switch from '../Switch';
 
@@ -29,10 +29,12 @@ storiesOf('ContentSwitcher', module)
     () => {
       const switchProps = props.switch();
       return (
-        <ContentSwitcher {...props.contentSwitcher()}>
-          <Switch name="one" text="First section" {...switchProps} />
-          <Switch name="two" text="Second section" {...switchProps} />
-          <Switch name="three" text="Third section" {...switchProps} />
+        <ContentSwitcher
+          {...props.contentSwitcher()}
+          selectedIndex={number('Selected Index (selectedIndex)', 0)}>
+          <Switch text="First section" {...switchProps} />
+          <Switch text="Second section" {...switchProps} />
+          <Switch text="Third section" {...switchProps} />
         </ContentSwitcher>
       );
     },
@@ -51,9 +53,9 @@ storiesOf('ContentSwitcher', module)
       const switchProps = props.switch();
       return (
         <ContentSwitcher {...props.contentSwitcher()} selectedIndex={1}>
-          <Switch name="one" text="First section" {...switchProps} />
-          <Switch name="two" text="Second section" {...switchProps} />
-          <Switch name="three" text="Third section" {...switchProps} />
+          <Switch text="First section" {...switchProps} />
+          <Switch text="Second section" {...switchProps} />
+          <Switch text="Third section" {...switchProps} />
         </ContentSwitcher>
       );
     },

diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher-test.js b/packages/react/src/components/ContentSwitcher/ContentSwitcher-test.js