fix(UIshell): adds story for SkipToContent and removes the tabIndex p…

…rop requirement (#4875)
carbon-design-system · Jan 6, 2020 · 04ed480 · 04ed480
1 parent ed2da5c
commit 04ed480
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 7 deletions.
diff --git a/packages/react/src/components/UIShell/SkipToContent.js b/packages/react/src/components/UIShell/SkipToContent.js
@@ -29,7 +29,7 @@ const SkipToContent = ({
 
 SkipToContent.propTypes = {
   /**
-   * Provide an optional class to be applied to the containing node
+   * Provide text to display in the SkipToContent `a` tag
    */
   children: PropTypes.string.isRequired,
 
@@ -42,7 +42,7 @@ SkipToContent.propTypes = {
   /**
    * Optionally override the default tabindex of 0
    */
-  tabIndex: PropTypes.string.isRequired,
+  tabIndex: PropTypes.string,
 };
 
 SkipToContent.defaultProps = {

diff --git a/packages/react/src/components/UIShell/UIShell-story.js b/packages/react/src/components/UIShell/UIShell-story.js
@@ -66,11 +66,12 @@ const StoryContent = () => {
           </h2>
           <p style={{ lineHeight: '20px' }}>
             The shell is perhaps the most crucial piece of any UI built with
-            Carbon. It contains the shared navigation framework for the entire
-            design system and ties the products in IBM’s portfolio together in a
-            cohesive and elegant way. The shell is the home of the topmost
-            navigation, where users can quickly and dependably gain their
-            bearings and move between pages.
+            <a href="www.carbondesignsystem.com"> Carbon</a>. It contains the
+            shared navigation framework for the entire design system and ties
+            the products in IBM’s portfolio together in a cohesive and elegant
+            way. The shell is the home of the topmost navigation, where users
+            can quickly and dependably gain their bearings and move between
+            pages.
             <br />
             <br />
             The shell was designed with maximum flexibility built in, to serve
@@ -218,6 +219,37 @@ storiesOf('UI Shell', module)
       </Header>
     ))
   )
+  .add(
+    'Header Base w/ SkipToContent',
+    withReadme(readme, () => (
+      <>
+        <Header aria-label="IBM Platform Name">
+          <SkipToContent />
+          <HeaderName href="#" prefix="IBM">
+            [Platform]
+          </HeaderName>
+          <HeaderGlobalBar>
+            <HeaderGlobalAction
+              aria-label="Search"
+              onClick={action('search click')}>
+              <Search20 />
+            </HeaderGlobalAction>
+            <HeaderGlobalAction
+              aria-label="Notifications"
+              onClick={action('notification click')}>
+              <Notification20 />
+            </HeaderGlobalAction>
+            <HeaderGlobalAction
+              aria-label="App Switcher"
+              onClick={action('app-switcher click')}>
+              <AppSwitcher20 />
+            </HeaderGlobalAction>
+          </HeaderGlobalBar>
+        </Header>
+        <StoryContent />
+      </>
+    ))
+  )
   .add(
     'Header Base w/ Navigation and Actions',
     withReadme(readme, () => (