feat(skip-nav): create skip nav components and story

Author: TylerAPfledderer

packages/chakra-ui-core/src/CSkipNav/CSkipNav.js

@@ -0,0 +1,121 @@
+/**
+ * Hey! Welcome to @chakra-ui/vue Box
+ *
+ * Box is the most abstract component on top of which all
+ * other @chakra-ui/vue components are built. By default, it renders a `div` element
+ *
+ * @see Docs     https://vue.chakra-ui.com/box
+ * @see Source   https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CSkipNav/CSkipNav.js
+ */
+
+import { SNA } from '../config/props.types'
+import { createStyledAttrsMixin, mode } from '../utils'
+import CBox from '../CBox'
+
+const FALLBACK_ID = 'chakra-skip-nav'
+
+const createSkipNavLinkStyles = (props) => {
+  const baseStyles = {
+    userSelect: 'none',
+    border: '0',
+    borderRadius: 'md',
+    fontWeight: 'semibold',
+    height: '1px',
+    width: '1px',
+    margin: '-1px',
+    padding: '0',
+    outline: '0',
+    overflow: 'hidden',
+    position: 'absolute',
+    clip: 'rect(0 0 0 0)',
+    _focus: {
+      clip: 'auto',
+      width: 'auto',
+      height: 'auto',
+      boxShadow: 'outline',
+      padding: '1rem',
+      position: 'fixed',
+      top: '1.5rem',
+      insetStart: '1.5rem',
+      bg: mode('white', 'gray.700')
+    }
+  }
+
+  return { ...baseStyles }
+}
+
+/**
+ * CSkipNavLink component
+ *
+ * Renders a link that remains hidden until focused to skip to the main content.
+ *
+ * @see Docs https://vue.chakra-ui.com/skip-nav
+ */
+export const CSkipNavLink = {
+  name: 'CSkipNavLink',
+  mixins: [createStyledAttrsMixin('CSkipNavLink')],
+  props: {
+    id: {
+      type: String,
+      default: FALLBACK_ID
+    }
+  },
+  computed: {
+    colorMode () {
+      return this.$chakraColorMode()
+    },
+    theme () {
+      return this.$chakraTheme()
+    },
+    componentStyles () {
+      return createSkipNavLinkStyles()
+    }
+  },
+  render (h) {
+    return h(
+      'a',
+      {
+        class: this.className,
+        attrs: {
+          href: `#${this.id}`
+        }
+      },
+      this.$slots.default
+    )
+  }
+}
+
+/**
+ * CSkipNavLink component
+ *
+ * Renders a div as the target for the link.
+ *
+ * @see Docs https://vue.chakra-ui.com/skip-nav
+ */
+export const CSkipNavContent = {
+  name: 'CSkipNavContent',
+  mixins: [createStyledAttrsMixin('CSkipNavContent')],
+  props: {
+    id: {
+      type: String,
+      default: FALLBACK_ID
+    },
+    to: SNA
+  },
+  render (h) {
+    return h(
+      CBox,
+      {
+        class: this.className,
+        attrs: {
+          id: this.id,
+          tabIndex: '-1',
+          style: {
+            outline: 0
+          }
+        }
+      },
+      this.$slots.default
+    )
+  }
+}

packages/chakra-ui-core/src/CSkipNav/CSkipNav.stories.js

@@ -0,0 +1,49 @@
+import { storiesOf } from '@storybook/vue'
+import CInput from '../CInput'
+import CText from '../CText'
+import CList, { CListItem, CListIcon } from '../CList'
+import { CSkipNavLink, CSkipNavContent } from './CSkipNav'
+
+storiesOf('UI | SkipNav', module).add('Default', () => ({
+  components: {
+    CSkipNavLink,
+    CSkipNavContent,
+    CInput,
+    CText,
+    CList,
+    CListItem,
+    CListIcon
+  },
+  template: `
+  <div>
+    <CSkipNavLink>Skip to Content</CSkipNavLink>
+    <CSkipNavContent>
+      <main>
+        <CText>
+        To test the SkipNav Components:
+          <CList mb="4">
+            <CListItem>
+              <CListIcon icon="chevron-right" />
+              Place focus on the input
+            </CListItem>
+            <CListItem>
+              <CListIcon icon="chevron-right" />
+              Press "Shift + Tab" to make the SkipNavLink appear
+            </CListItem>
+            <CListItem>
+              <CListIcon icon="chevron-right" />
+              Hit "Enter". You might leave the page to load up the iFrame isolated
+            </CListItem>
+            <CListItem>
+              <CListIcon icon="chevron-right" />
+              You should now see a blue outline over all the content.
+            </CListItem>
+          </CList>
+        </CText>
+        <label>Example Form Search</label>
+        <CInput placeholder="Search" />
+      </main>
+    </CSkipNavContent>
+  </div>
+  `
+}))