refactor: re-write website-switcher, add subheads

carbon-design-system · May 21, 2019 · 3394c4d · 3394c4d
1 parent 36bd5fe
commit 3394c4d
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 49 deletions.
diff --git a/packages/example/src/gatsby-theme-carbon/components/Switcher.js b/packages/example/src/gatsby-theme-carbon/components/Switcher.js
diff --git a/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js b/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js
@@ -1,10 +1,11 @@
 import React, { useContext } from 'react';
-import { WebsiteSwitcher } from '@carbon/addons-website';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
+import cx from 'classnames';
 import NavContext from '../../util/context/NavContext';
 import { useScrollDirection } from '../../util/hooks';
+import { nav, open, divider, link, linkDisabled } from './switcher.module.scss';
 
-const Switcher = ({ links }) => {
+const Switcher = ({ children }) => {
   const { switcherIsOpen, toggleNavState } = useContext(NavContext);
   const direction = useScrollDirection();
 
@@ -13,21 +14,60 @@ const Switcher = ({ links }) => {
   }
 
   return (
-    <WebsiteSwitcher
-      isSwitcherFinal={switcherIsOpen}
-      isSwitcherOpen={switcherIsOpen}
-      links={links}
-    />
+    <nav
+      className={cx(nav, { [open]: switcherIsOpen })}
+      aria-label="website switcher"
+    >
+      <ul>{children}</ul>
+    </nav>
   );
 };
 
-Switcher.propTypes = {
-  links: PropTypes.arrayOf(
-    PropTypes.shape({
-      href: PropTypes.string,
-      linkText: PropTypes.string,
-    })
-  ),
+export const SwitcherDivider = props => (
+  <li className={divider}>
+    <span {...props} />
+  </li>
+);
+
+export const SwitcherLink = ({ disabled, children, ...rest }) => (
+  <li>
+    {disabled ? (
+      <span className={linkDisabled}>{children}</span>
+    ) : (
+      <a className={link} {...rest}>
+        {children}
+      </a>
+    )}
+  </li>
+);
+
+Switcher.defaultProps = {
+  children: [
+    <SwitcherLink href="https://ibm.com/design">IBM Design</SwitcherLink>,
+    <SwitcherLink href="https://ibm.com/design/language">
+      IBM Design Language
+    </SwitcherLink>,
+    <SwitcherLink disabled>IBM Brand Center</SwitcherLink>,
+    <SwitcherDivider>Design disciplines</SwitcherDivider>,
+    <SwitcherLink href="https://www.carbondesignsystem.com/">
+      Product
+    </SwitcherLink>,
+    <SwitcherLink href="https://www.ibm.com/standards/web/">
+      Digital
+    </SwitcherLink>,
+    <SwitcherLink disabled>Events</SwitcherLink>,
+    <SwitcherDivider>Design practices</SwitcherDivider>,
+    <SwitcherLink href="https://www.ibm.com/design/thinking/">
+      IBM Enterprise Design Thinking
+    </SwitcherLink>,
+    <SwitcherLink href="https://www.ibm.com/design/language/disciplines/digital/">
+      IBM Design Research
+    </SwitcherLink>,
+    <SwitcherLink href="https://www.ibm.com/services/ibmix/">
+      IBM iX
+    </SwitcherLink>,
+    <SwitcherLink disabled>IBM AI</SwitcherLink>,
+  ],
 };
 
 export default Switcher;
diff --git a/packages/gatsby-theme-carbon/src/components/Switcher/switcher.module.scss b/packages/gatsby-theme-carbon/src/components/Switcher/switcher.module.scss
@@ -0,0 +1,63 @@
+@import '~carbon-components/scss/globals/scss/vars';
+@import '~@carbon/elements/scss/type/type';
+
+.nav {
+  color: white;
+  z-index: 10000;
+  position: fixed;
+  right: 0;
+  top: 48px;
+  height: 100%;
+  padding: 1rem 0;
+  width: 16rem;
+  background-color: $carbon--gray-100;
+  border-left: 1px solid $carbon--gray-80;
+  transform: translateX(16rem);
+  transition: transform $duration--moderate-01 $carbon--standard-easing;
+}
+
+.open {
+  transform: translateX(0);
+  box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.2);
+}
+
+.divider {
+  margin-top: 32px;
+  margin-left: 1rem;
+  color: $carbon--gray-70;
+  padding-bottom: 4px;
+  width: 100%;
+  border-bottom: 1px solid $carbon--gray-70;
+  padding-bottom: 4px;
+  margin-bottom: 8px;
+}
+
+.divider span {
+  @include carbon--type-style('caption-01');
+  color: $carbon--gray-30;
+}
+
+.link {
+  padding: 6px 1rem;
+  @include carbon--type-style('heading-01');
+  display: block;
+  text-decoration: none;
+  color: $carbon--gray-30;
+
+  &:hover {
+    background: #353535;
+    color: $carbon--gray-10;
+  }
+
+  &:focus {
+    outline: 2px solid $brand-01;
+    outline-offset: -2px;
+  }
+}
+
+.link--disabled {
+  padding: 6px 1rem;
+  @include carbon--type-style('heading-01');
+  display: block;
+  color: $carbon--gray-60;
+}