From 04ed4801937edfeb3f4f912435677086a030bea9 Mon Sep 17 00:00:00 2001
From: Abbey Hart <abbeyhrt@gmail.com>
Date: Mon, 16 Dec 2019 16:38:29 -0600
Subject: [PATCH] fix(UIshell): adds story for SkipToContent and removes the
 tabIndex prop requirement (#4875)

---
 .../src/components/UIShell/SkipToContent.js   |  4 +-
 .../src/components/UIShell/UIShell-story.js   | 42 ++++++++++++++++---
 2 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/components/UIShell/SkipToContent.js b/packages/react/src/components/UIShell/SkipToContent.js
index 3696ea336b57..7b2fb3e49e83 100644
--- 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
index edbd4c1c941a..7739ffd0c18d 100644
--- 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, () => (