feat: update switcher content (#1023)

* feat: update switcher content

* fix: consolidate divider margin styles

* fix: design link

* fix: community order and ibm.com label

* fix: add back iX

* fix: ibm.com link

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js

@@ -7,6 +7,7 @@ import React, {
 } from 'react';
 import cx from 'classnames';
 import useMedia from 'use-media';
+import { Locked16 } from '@carbon/icons-react';
 import NavContext from '../../util/context/NavContext';
 import { nav, open, divider, link, linkDisabled } from './Switcher.module.scss';
 
@@ -61,6 +62,7 @@ export const SwitcherDivider = (props) => (
 export const SwitcherLink = ({
   disabled,
   children,
+  isInternal,
   href: hrefProp,
   ...rest
 }) => {
@@ -79,6 +81,7 @@ export const SwitcherLink = ({
         href={href}
         {...rest}>
         {children}
+        {isInternal && <Locked16 />}
       </a>
     </li>
   );
@@ -88,36 +91,43 @@ export const SwitcherLink = ({
 // Note: if you change this, update the max-height in the switcher stylesheet
 const DefaultChildren = () => (
   <>
-    <SwitcherLink href="https://ibm.com/design">IBM Design</SwitcherLink>
+    <SwitcherDivider>Foundations</SwitcherDivider>
+    <SwitcherLink href="https://ibm.com/brand" isInternal>
+      IBM Brand Center
+    </SwitcherLink>
     <SwitcherLink href="https://ibm.com/design/language">
       IBM Design Language
     </SwitcherLink>
-    <SwitcherLink href="https://ibm.com/brand">IBM Brand Center</SwitcherLink>
-    <SwitcherLink href="https://www.ibm.com/able/">
-      IBM Accessibility
-    </SwitcherLink>
-    <SwitcherDivider>Design disciplines</SwitcherDivider>
+    <SwitcherDivider>Implementation</SwitcherDivider>
     <SwitcherLink href="https://www.carbondesignsystem.com/">
-      Product
+      Carbon Design System
     </SwitcherLink>
-    <SwitcherLink href="https://www.ibm.com/standards/web/ibm-dotcom-library/">
-      Digital
+    <SwitcherLink href="https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/">
+      Carbon for IBM.com 
     </SwitcherLink>
-    <SwitcherLink href="https://www.ibm.com/design/event/">Event</SwitcherLink>
-    <SwitcherLink disabled>Workplace</SwitcherLink>
-    <SwitcherDivider>Design practices</SwitcherDivider>
+    <SwitcherLink href="https://www.ibm.com/design/event/">
+      IBM Event Design
+    </SwitcherLink>
+    <SwitcherDivider>Practices</SwitcherDivider>
     <SwitcherLink href="https://www.ibm.com/design/thinking/">
       Enterprise Design Thinking
     </SwitcherLink>
-    <SwitcherLink href="https://www.ibm.com/design/research/">
-      IBM Design Research
+    <SwitcherLink href="https://www.ibm.com/able/">
+      IBM Accessibility
     </SwitcherLink>
     <SwitcherLink href="https://www.ibm.com/design/ai">
       IBM Design for AI
     </SwitcherLink>
+    <SwitcherLink href="https://www.ibm.com/design/research/">
+      IBM Design Research
+    </SwitcherLink>
     <SwitcherLink href="https://www.ibm.com/services/ibmix/">
       IBM iX
     </SwitcherLink>
+    <SwitcherDivider>Community</SwitcherDivider>
+    <SwitcherLink href="https://w3.ibm.com/design/" isInternal>
+      IBM Design
+    </SwitcherLink>
   </>
 );
 

packages/gatsby-theme-carbon/src/components/Switcher/Switcher.module.scss

@@ -37,11 +37,10 @@
 }
 
 .divider {
-  margin: 32px 1rem 0 1rem;
+  margin: 32px 1rem 8px 1rem;
   color: $carbon--gray-70;
   padding-bottom: 4px;
   border-bottom: 1px solid $carbon--gray-70;
-  margin-bottom: 8px;
 }
 
 .divider span {
@@ -52,7 +51,8 @@
 .link {
   padding: 6px 1rem;
   @include carbon--type-style('heading-01');
-  display: block;
+  display: flex;
+  justify-content: space-between;
   text-decoration: none;
   color: $carbon--gray-30;