diff --git a/package.json b/package.json
index c4d298d65cb..18600c91536 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "build:analyze": "yarn install --force && yarn clean && ANALYZE=true yarn build",
     "serve": "gatsby serve",
     "lint:js": "eslint . --fix",
-    "format": "prettier --write 'src/**/*.{js,json,css,scss,md,mdx,yaml}'",
+    "format": "prettier --write 'src/**/*.{css,scss,json,html,yaml,md,mdx}'",
     "update-browserslist": "npx browserslist-ga"
   },
   "engines": {
@@ -100,7 +100,7 @@
     "*.js": [
       "eslint --fix"
     ],
-    "*.{json,css,scss,md,mdx,yaml}": [
+    "*.{css,scss,json,html,yaml,md,mdx}": [
       "prettier --write"
     ]
   }
diff --git a/src/components/ColorBlock/color-block.scss b/src/components/ColorBlock/color-block.scss
index d7a81823c4c..47495dc51be 100644
--- a/src/components/ColorBlock/color-block.scss
+++ b/src/components/ColorBlock/color-block.scss
@@ -1,6 +1,6 @@
 .color-block {
   position: relative;
-  @include carbon--type-style('body-short-01');
+  @include carbon--type-style("body-short-01");
 }
 
 .color-block__color {
@@ -14,7 +14,7 @@
   // needed to fix anti-aliasing issue in firefox
   &:before {
     position: absolute;
-    content: '';
+    content: "";
     height: rem(14px);
     width: rem(14px);
     border-radius: rem(14px);
@@ -44,19 +44,19 @@
 .color-blocks .bx--col-lg-2:nth-child(2) {
   margin-right: 40%;
 
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     margin-right: 0;
   }
 }
 
 .color-blocks .bx--col-lg-2:nth-child(3) {
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     margin-left: $spacing-07;
   }
 }
 
 .color-square {
-  @include carbon--type-style('body-short-01');
+  @include carbon--type-style("body-short-01");
   padding: $spacing-05;
 }
 
diff --git a/src/components/ColorGrid/_color-grid.scss b/src/components/ColorGrid/_color-grid.scss
index f4c116a967a..2218eff9ee2 100644
--- a/src/components/ColorGrid/_color-grid.scss
+++ b/src/components/ColorGrid/_color-grid.scss
@@ -2,13 +2,13 @@
   display: grid;
   grid-template-columns: repeat(6, 1fr);
 
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     grid-template-columns: repeat(12, 1fr);
   }
 }
 
 .color-grid__swatch::before {
-  content: '';
+  content: "";
   display: block;
   height: 0;
   padding-bottom: 100%;
diff --git a/src/components/ColorTokenTable/color-token-table.scss b/src/components/ColorTokenTable/color-token-table.scss
index 6b049a4fee3..c15f29d8061 100644
--- a/src/components/ColorTokenTable/color-token-table.scss
+++ b/src/components/ColorTokenTable/color-token-table.scss
@@ -12,7 +12,7 @@
 }
 
 .color-token-table__theme-switcher::before {
-  content: '';
+  content: "";
   display: block;
   position: absolute;
   top: -16px;
@@ -66,11 +66,11 @@ h3.page-h3--sticky {
   border-radius: 0;
   height: 3rem;
 
-  @include carbon--breakpoint('sm') {
+  @include carbon--breakpoint("sm") {
     padding-right: $spacing-05;
   }
 
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     padding-right: 4rem;
   }
 }
diff --git a/src/components/ComponentDemo/Code/Code.module.scss b/src/components/ComponentDemo/Code/Code.module.scss
index 623851b3d42..4bc0905c4ef 100644
--- a/src/components/ComponentDemo/Code/Code.module.scss
+++ b/src/components/ComponentDemo/Code/Code.module.scss
@@ -8,8 +8,8 @@
 }
 
 .container {
-  font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono',
-    'Bitstream Vera Sans Mono', Courier, monospace;
+  font-family: "IBM Plex Mono", "Menlo", "DejaVu Sans Mono",
+    "Bitstream Vera Sans Mono", Courier, monospace;
   position: relative;
   max-height: 320px;
   overflow-y: auto;
@@ -28,7 +28,7 @@
   }
   &::before,
   &::after {
-    z-index: z('floating');
+    z-index: z("floating");
   }
 }
 
@@ -47,7 +47,7 @@
 .link-list {
   display: flex;
   overflow-x: scroll;
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     overflow-x: visible;
   }
 }
@@ -55,7 +55,7 @@
 .link-list a {
   display: flex;
   align-items: center;
-  @include carbon--type-style('body-short-01');
+  @include carbon--type-style("body-short-01");
   color: $inverse-01;
   text-decoration: none;
   margin-right: $spacing-06;
diff --git a/src/components/ComponentDemo/ComponentDemo.module.scss b/src/components/ComponentDemo/ComponentDemo.module.scss
index 1ba8701511b..abee2025a59 100644
--- a/src/components/ComponentDemo/ComponentDemo.module.scss
+++ b/src/components/ComponentDemo/ComponentDemo.module.scss
@@ -6,14 +6,14 @@
   grid-template-columns: 1fr;
   grid-template-rows: 35rem minmax(1fr, 320px);
   grid-template-areas:
-    'preview'
-    'editor';
+    "preview"
+    "editor";
   margin-top: 0;
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     grid-template-columns: 1fr 240px;
     grid-template-areas:
-      'preview knobs'
-      'editor editor';
+      "preview knobs"
+      "editor editor";
   }
 }
 
@@ -26,8 +26,8 @@
 
 .knobless-container {
   grid-template-areas:
-    'preview preview'
-    'editor editor';
+    "preview preview"
+    "editor editor";
 }
 
 .icon-button-row {
@@ -74,8 +74,8 @@
   box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.2);
   height: 100%;
   max-height: 35rem;
-  transition: transform $duration--moderate-01 carbon--motion('entrance');
-  @include carbon--breakpoint('md') {
+  transition: transform $duration--moderate-01 carbon--motion("entrance");
+  @include carbon--breakpoint("md") {
     position: static;
     box-shadow: none;
   }
@@ -109,8 +109,8 @@
   width: 100%;
   display: flex;
   align-items: center;
-  font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono',
-    'Bitstream Vera Sans Mono', Courier, monospace;
+  font-family: "IBM Plex Mono", "Menlo", "DejaVu Sans Mono",
+    "Bitstream Vera Sans Mono", Courier, monospace;
   font-size: 12px;
 }
 
@@ -141,7 +141,7 @@ fieldset.form-group {
     $emit-custom-properties: true
   );
 
-  @include carbon--breakpoint('lg') {
+  @include carbon--breakpoint("lg") {
     max-width: 70%;
   }
 }
@@ -187,7 +187,7 @@ fieldset.form-group {
 .editor-container pre,
 .editor-container textarea {
   // important to override react-live inline styles
-  font-family: 'IBM Plex Mono', monospace !important;
+  font-family: "IBM Plex Mono", monospace !important;
   white-space: pre !important;
 }
 
diff --git a/src/components/ComponentOverview/component-overview.scss b/src/components/ComponentOverview/component-overview.scss
index c051947a87f..5a7e805b15e 100644
--- a/src/components/ComponentOverview/component-overview.scss
+++ b/src/components/ComponentOverview/component-overview.scss
@@ -26,7 +26,7 @@ $hover-ui: #e5e5e5;
   }
 
   // Display two colums
-  @include carbon--breakpoint('sm') {
+  @include carbon--breakpoint("sm") {
     width: 50%;
     border-bottom: 1px solid $carbon--gray-20;
     border-right: 1px solid $carbon--gray-20;
@@ -47,7 +47,7 @@ $hover-ui: #e5e5e5;
   }
 
   // Display three columnns
-  @include carbon--breakpoint('lg') {
+  @include carbon--breakpoint("lg") {
     width: 33.33%;
 
     &:nth-child(2n + 2) {
@@ -71,7 +71,7 @@ $hover-ui: #e5e5e5;
   }
 
   // Display four columnns
-  @include carbon--breakpoint('xlg') {
+  @include carbon--breakpoint("xlg") {
     width: 25%;
 
     &:nth-child(3n + 3) {
@@ -104,14 +104,14 @@ $hover-ui: #e5e5e5;
   width: 100%;
 }
 
-.container .component-item__img[src*='svg'] {
+.container .component-item__img[src*="svg"] {
   margin-bottom: 0;
   background: transparent;
   display: block;
 }
 
 .component-name {
-  @include carbon--type-style('caption-01');
+  @include carbon--type-style("caption-01");
   color: $text-01;
   text-decoration: none;
   text-align: left;
diff --git a/src/components/GlossaryComponent/GlossaryList/glossary-list.scss b/src/components/GlossaryComponent/GlossaryList/glossary-list.scss
index dda00ec0bd9..477356fe6c9 100644
--- a/src/components/GlossaryComponent/GlossaryList/glossary-list.scss
+++ b/src/components/GlossaryComponent/GlossaryList/glossary-list.scss
@@ -16,7 +16,7 @@
 }
 
 .glossary-entry__subtext {
-  @include carbon--type-style('body-short-02');
+  @include carbon--type-style("body-short-02");
   color: $text-02;
   font-style: italic;
   padding: 0px;
diff --git a/src/components/GlossaryComponent/GlossaryNav/glossary-nav.scss b/src/components/GlossaryComponent/GlossaryNav/glossary-nav.scss
index 98589a57873..b427be25a9e 100644
--- a/src/components/GlossaryComponent/GlossaryNav/glossary-nav.scss
+++ b/src/components/GlossaryComponent/GlossaryNav/glossary-nav.scss
@@ -9,7 +9,7 @@
   line-height: 1.5;
   padding-top: rem(160px);
 
-  @include carbon--breakpoint('lg') {
+  @include carbon--breakpoint("lg") {
     display: flex;
   }
 
@@ -28,7 +28,7 @@
 }
 
 .glossary .bx--list__item a {
-  @include carbon--type-style('body-short-02');
+  @include carbon--type-style("body-short-02");
   width: rem(24px);
   height: rem(24px);
   padding: rem(1px) 0 0 0;
diff --git a/src/components/HomepageVideo/homepage-video.scss b/src/components/HomepageVideo/homepage-video.scss
index 37b0377660b..c634a406367 100644
--- a/src/components/HomepageVideo/homepage-video.scss
+++ b/src/components/HomepageVideo/homepage-video.scss
@@ -5,7 +5,7 @@
   top: 0;
   right: 0;
 
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     width: 100%;
   }
 }
@@ -53,7 +53,7 @@
   padding: 0;
   z-index: 10; //need this to be above dots overlay
 
-  @include carbon--breakpoint('lg') {
+  @include carbon--breakpoint("lg") {
     left: 271px;
   }
 }
@@ -63,5 +63,5 @@
 }
 
 .homepage-video--controls:focus {
-  @include focus-outline('outline');
+  @include focus-outline("outline");
 }
diff --git a/src/components/OverviewCard/overview-card-group.scss b/src/components/OverviewCard/overview-card-group.scss
index d7bc599f5d4..c875e4fbd83 100644
--- a/src/components/OverviewCard/overview-card-group.scss
+++ b/src/components/OverviewCard/overview-card-group.scss
@@ -1,11 +1,11 @@
 .overview-card-group {
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     margin: $spacing-05 rem(-16px) $spacing-07 rem(-16px);
   }
 }
 
 .overview-card-group .overview-card {
-  @include carbon--breakpoint('lg') {
+  @include carbon--breakpoint("lg") {
     border-left: 1px solid $carbon--gray-20;
   }
 }
@@ -15,7 +15,7 @@
   border-left: 1px solid transparent;
 }
 
-@include carbon--breakpoint-down('lg') {
+@include carbon--breakpoint-down("lg") {
   .overview-card-group .#{$prefix}--col-lg-4:nth-child(even) .overview-card {
     border-left: 1px solid $carbon--gray-20;
   }
@@ -26,7 +26,7 @@
   }
 }
 
-@include carbon--breakpoint-between('lg', 'xlg') {
+@include carbon--breakpoint-between("lg", "xlg") {
   //selects every item after the first 3
   .overview-card-group .#{$prefix}--col-lg-4:nth-child(n + 4) .overview-card {
     border-top: 1px solid $carbon--gray-20;
@@ -38,7 +38,7 @@
   }
 }
 
-@include carbon--breakpoint('xlg') {
+@include carbon--breakpoint("xlg") {
   .overview-card-group .bx--col-max-3 {
     flex: 0 0 25%;
     width: 25%;
diff --git a/src/components/OverviewCard/overview-card.scss b/src/components/OverviewCard/overview-card.scss
index 3effc52e669..daf6399b464 100644
--- a/src/components/OverviewCard/overview-card.scss
+++ b/src/components/OverviewCard/overview-card.scss
@@ -22,7 +22,7 @@
 }
 
 .overview-card__title {
-  @include carbon--type-style('caption-01');
+  @include carbon--type-style("caption-01");
   text-decoration: none;
   color: $text-01;
   position: relative;
@@ -45,8 +45,8 @@
 }
 
 .overview-card__img .gatsby-resp-image-wrapper,
-.overview-card__img img[src*='svg'],
-.overview-card__img img[src*='gif'] {
+.overview-card__img img[src*="svg"],
+.overview-card__img img[src*="gif"] {
   position: relative;
   width: 100%;
   height: 100%;
diff --git a/src/components/TypeScaleTable/type-scale-table.scss b/src/components/TypeScaleTable/type-scale-table.scss
index a5edf19f036..ebea9cc6a34 100644
--- a/src/components/TypeScaleTable/type-scale-table.scss
+++ b/src/components/TypeScaleTable/type-scale-table.scss
@@ -10,7 +10,7 @@ $type-scale: 0.75rem, 0.875rem, 1rem, 1.125rem, 1.25rem, 1.5rem, 1.75rem, 2rem,
   }
 
   table thead th {
-    @include carbon--type-style('caption-01');
+    @include carbon--type-style("caption-01");
     border: none;
     color: $text-03;
     padding: $spacing-05 0;
@@ -29,15 +29,15 @@ $type-scale: 0.75rem, 0.875rem, 1rem, 1.125rem, 1.25rem, 1.5rem, 1.75rem, 2rem,
     font-size: 0.75rem;
     padding: 0 $spacing-09 0 0;
 
-    @include carbon--breakpoint('md') {
+    @include carbon--breakpoint("md") {
       padding-right: rem(112px);
     }
 
-    @include carbon--breakpoint('lg') {
+    @include carbon--breakpoint("lg") {
       padding-right: $spacing-07;
     }
 
-    @include carbon--breakpoint('xlg') {
+    @include carbon--breakpoint("xlg") {
       padding-right: $spacing-09;
     }
   }
diff --git a/src/components/TypesetStyle/typeset-example.scss b/src/components/TypesetStyle/typeset-example.scss
index df4368c2078..3a721f71591 100644
--- a/src/components/TypesetStyle/typeset-example.scss
+++ b/src/components/TypesetStyle/typeset-example.scss
@@ -7,7 +7,7 @@
   margin-left: -$spacing-03;
   margin-right: -$spacing-03;
 
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     margin-left: 0;
     margin-right: 0;
   }
@@ -27,12 +27,12 @@
   padding: $spacing-05;
   overflow: hidden;
 
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     width: 62.5%;
     padding-right: 15%;
   }
 
-  @include carbon--breakpoint('lg') {
+  @include carbon--breakpoint("lg") {
     width: 66.7%;
   }
 }
@@ -40,7 +40,7 @@
 .bx--typeset-example-specs {
   padding: $spacing-05 $spacing-06;
 
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     width: 33.3%;
     border-left: 1px solid $carbon--gray-20;
   }
diff --git a/src/components/TypesetStyle/typeset-style.scss b/src/components/TypesetStyle/typeset-style.scss
index e633e29c3a9..e88a9c87a5f 100644
--- a/src/components/TypesetStyle/typeset-style.scss
+++ b/src/components/TypesetStyle/typeset-style.scss
@@ -1,4 +1,4 @@
-$prefix: 'bx';
+$prefix: "bx";
 
 // Typeset Style
 .#{$prefix}--typeset-style-container {
@@ -6,13 +6,13 @@ $prefix: 'bx';
   padding: 0 $spacing-03;
   margin-bottom: $spacing-09;
 
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     padding: 0;
     left: 0;
     margin-right: 0;
   }
 
-  @include carbon--breakpoint('lg') {
+  @include carbon--breakpoint("lg") {
     margin-top: 0;
     left: 0.5rem;
     margin-right: $spacing-03;
@@ -69,7 +69,7 @@ $prefix: 'bx';
   top: 0;
   width: 100vw;
 
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     margin-left: 0;
     width: 100%;
   }
@@ -88,13 +88,13 @@ $prefix: 'bx';
 
   &:before,
   &:after {
-    content: '';
+    content: "";
     position: absolute;
     background: $carbon--gray-10;
     height: 6rem;
     width: 1rem;
 
-    @include carbon--breakpoint('md') {
+    @include carbon--breakpoint("md") {
       height: 4rem;
     }
   }
@@ -123,11 +123,11 @@ $prefix: 'bx';
   padding-right: 0;
   width: 100%;
 
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     width: 62.5%;
   }
 
-  @include carbon--breakpoint('lg') {
+  @include carbon--breakpoint("lg") {
     width: 50%;
   }
 }
@@ -148,14 +148,14 @@ $prefix: 'bx';
   grid-template-columns: auto 1fr auto;
   width: 100%;
 
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     border-top: none;
     border-bottom: none;
     border-left: 1px solid $carbon--gray-20;
     width: 37.5%;
   }
 
-  @include carbon--breakpoint('lg') {
+  @include carbon--breakpoint("lg") {
     width: 50%;
   }
 }
@@ -218,7 +218,7 @@ $prefix: 'bx';
   position: relative;
   margin-top: $spacing-05;
 
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     margin-top: 0;
   }
 }
@@ -330,7 +330,7 @@ $prefix: 'bx';
 
   &:after {
     background: $carbon--black-100;
-    content: '';
+    content: "";
     position: absolute;
     height: rem(1px);
     width: var(--track-width);
@@ -374,13 +374,13 @@ $prefix: 'bx';
   margin-left: -$spacing-03;
   margin-right: -$spacing-03;
 
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     margin-left: 0;
     margin-right: 0;
   }
 }
 
-div[class*='PageHeader-module--page-header--shifted']
+div[class*="PageHeader-module--page-header--shifted"]
   + div
   > div
   > .#{$prefix}--sticky-container-visible {
diff --git a/src/gatsby-theme-carbon/templates/Homepage.module.scss b/src/gatsby-theme-carbon/templates/Homepage.module.scss
index 2c9e1374a33..2576e0800f6 100644
--- a/src/gatsby-theme-carbon/templates/Homepage.module.scss
+++ b/src/gatsby-theme-carbon/templates/Homepage.module.scss
@@ -1,11 +1,11 @@
 .callout-link {
-  @include carbon--type-style('body-long-02');
+  @include carbon--type-style("body-long-02");
   margin-top: $spacing-06;
   display: block;
 }
 
 :global {
-  .container--homepage [class*='Main'] {
+  .container--homepage [class*="Main"] {
     padding-top: 3rem;
   }
 }
diff --git a/src/pages/community/patterns/chatbot/content.mdx b/src/pages/community/patterns/chatbot/content.mdx
index 2f962a41891..900d7a692d1 100644
--- a/src/pages/community/patterns/chatbot/content.mdx
+++ b/src/pages/community/patterns/chatbot/content.mdx
@@ -1,7 +1,7 @@
 ---
 title: Chatbots
 description: Use a chatbot when a user would benefit from requesting information on-demand with natural language. They should receive a useful and trustworthy response related to their question or task.
-tabs: ['Overview', 'Usage', 'Flows', 'Content']
+tabs: ["Overview", "Usage", "Flows", "Content"]
 ---
 
 <PageDescription>
@@ -59,7 +59,8 @@ Ensure the success of your bot by following these principles:
   <Column colLg={4} colMd={4} noGutterSm>
     <ResourceCard
       subTitle="IBM Design for AI: Conversation"
-      href="http://ai-design.eu-de.mybluemix.net/design/ai/conversation/planning">
+      href="http://ai-design.eu-de.mybluemix.net/design/ai/conversation/planning"
+    >
       <MdxIcon name="bee" />
     </ResourceCard>
   </Column>
diff --git a/src/pages/community/patterns/chatbot/flows.mdx b/src/pages/community/patterns/chatbot/flows.mdx
index dcc704dd5e6..2c93937bdf8 100644
--- a/src/pages/community/patterns/chatbot/flows.mdx
+++ b/src/pages/community/patterns/chatbot/flows.mdx
@@ -1,7 +1,7 @@
 ---
 title: Chatbots
 description: Use a chatbot when a user would benefit from requesting information on-demand with natural language. They should receive a useful and trustworthy response related to their question or task.
-tabs: ['Overview', 'Usage', 'Flows', 'Content']
+tabs: ["Overview", "Usage", "Flows", "Content"]
 ---
 
 <PageDescription>
diff --git a/src/pages/community/patterns/chatbot/overview.mdx b/src/pages/community/patterns/chatbot/overview.mdx
index 083e3fc6042..676f232a03b 100644
--- a/src/pages/community/patterns/chatbot/overview.mdx
+++ b/src/pages/community/patterns/chatbot/overview.mdx
@@ -1,10 +1,10 @@
 ---
 title: Chatbots
 description: Use a chatbot when a user would benefit from requesting information on-demand with natural language. They should receive a useful and trustworthy response related to their question or task.
-tabs: ['Overview', 'Usage', 'Flows', 'Content']
+tabs: ["Overview", "Usage", "Flows", "Content"]
 ---
 
-import { Tag, Link } from 'carbon-components-react';
+import { Tag, Link } from "carbon-components-react";
 
 #### Maintainer:
 
@@ -107,7 +107,8 @@ For **common chatbot sub-patterns, features or experimental components**, click
     title="Chatbot Design Kit"
     aspectRatio="2:1"
     actionIcon="download"
-    href="https://sketch.cloud/s/k8j5g">
+    href="https://sketch.cloud/s/k8j5g"
+  >
     <MdxIcon name="sketch" />
   </ResourceCard>
 </Column>
diff --git a/src/pages/community/patterns/chatbot/usage.mdx b/src/pages/community/patterns/chatbot/usage.mdx
index 485ab636cbc..0507540c078 100644
--- a/src/pages/community/patterns/chatbot/usage.mdx
+++ b/src/pages/community/patterns/chatbot/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Chatbots
 description: Use a chatbot when a user would benefit from requesting information on-demand with natural language. They should receive a useful and trustworthy response related to their question or task.
-tabs: ['Overview', 'Usage', 'Flows', 'Content']
+tabs: ["Overview", "Usage", "Flows", "Content"]
 ---
 
 import {
@@ -12,7 +12,7 @@ import {
   StructuredListBody,
   UnorderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <AnchorLinks>
 
diff --git a/src/pages/community/patterns/remove-pattern/index.mdx b/src/pages/community/patterns/remove-pattern/index.mdx
index 4606bedb67d..b05083f181a 100644
--- a/src/pages/community/patterns/remove-pattern/index.mdx
+++ b/src/pages/community/patterns/remove-pattern/index.mdx
@@ -55,14 +55,14 @@ Optionally a [Done modal](#done-modal), [Requested modal](#requested-modal) or [
 ![The user enters the resource name in order to confirm deletion.](images/2.png)
 
 <Caption>
-  {' '}
+  {" "}
   The user needs to enter the resource name in order to confirm deletion.
 </Caption>
 
 ![When the resource name is entered the Delete button is enabled.](images/3.png)
 
 <Caption>
-  {' '}
+  {" "}
   When the resource name is entered the Delete button is enabled.
 </Caption>
 
@@ -114,7 +114,7 @@ Text should tell the user the consequences of the removal and that the action ca
 ![Example of a medium impact remove modal](images/first-view.png)
 
 <Caption>
-  {' '}
+  {" "}
   Removal modals should include consequences of removal, and "This action cannot
   be undone" statement.
 </Caption>
@@ -149,7 +149,7 @@ Some deletion or removal actions don't happen immediately, in these situations i
 ![Example of a delete successful modal](images/Requested.png)
 
 <Caption>
-  {' '}
+  {" "}
   Use a success modal to show that a delete request has been made / is in
   progress.
 </Caption>
@@ -171,7 +171,7 @@ An optional notification can be used to confirm a delete or remove action has co
 ![Example of a successful delete notification](images/7_updated.png)
 
 <Caption>
-  {' '}
+  {" "}
   An optional notification can be used to confirm the delete or remove action
   with medium or high impact actions.
 </Caption>
diff --git a/src/pages/components/UI-shell-header/accessibility.mdx b/src/pages/components/UI-shell-header/accessibility.mdx
index e6bf724e917..6dee9f41e79 100644
--- a/src/pages/components/UI-shell-header/accessibility.mdx
+++ b/src/pages/components/UI-shell-header/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: UI shell header
 description: This header is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <PageDescription>
 
diff --git a/src/pages/components/UI-shell-header/code.mdx b/src/pages/components/UI-shell-header/code.mdx
index 6cce923ba7b..445d8758208 100644
--- a/src/pages/components/UI-shell-header/code.mdx
+++ b/src/pages/components/UI-shell-header/code.mdx
@@ -1,7 +1,7 @@
 ---
 title: UI shell header
 description: This header is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Header base
diff --git a/src/pages/components/UI-shell-header/style.mdx b/src/pages/components/UI-shell-header/style.mdx
index 3de4590562e..caf82c314df 100644
--- a/src/pages/components/UI-shell-header/style.mdx
+++ b/src/pages/components/UI-shell-header/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: UI shell header
 description: This header is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/UI-shell-header/usage.mdx b/src/pages/components/UI-shell-header/usage.mdx
index 74164946da9..90795e02acf 100644
--- a/src/pages/components/UI-shell-header/usage.mdx
+++ b/src/pages/components/UI-shell-header/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: UI shell header
 description: This header is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 <PageDescription>
@@ -29,7 +29,8 @@ This header is part of the Carbon UI shell. A shell is a collection of component
   <Column colLg={4} colMd={4} noGutterSm>
     <ResourceCard
       subTitle="UI Shell template"
-      href="https://sketch.cloud/s/EjVmA">
+      href="https://sketch.cloud/s/EjVmA"
+    >
       <MdxIcon name="sketch" />
     </ResourceCard>
   </Column>
diff --git a/src/pages/components/UI-shell-left-panel/code.mdx b/src/pages/components/UI-shell-left-panel/code.mdx
index bd23e292c64..11dfc0e5961 100644
--- a/src/pages/components/UI-shell-left-panel/code.mdx
+++ b/src/pages/components/UI-shell-left-panel/code.mdx
@@ -1,7 +1,7 @@
 ---
 title: UI shell left panel
 description: This left panel is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.
-tabs: ['Code', 'Usage', 'Style']
+tabs: ["Code", "Usage", "Style"]
 ---
 
 ## Fixed side-nav
diff --git a/src/pages/components/UI-shell-left-panel/style.mdx b/src/pages/components/UI-shell-left-panel/style.mdx
index b31a8c9a9f5..dd2da6f1b8e 100644
--- a/src/pages/components/UI-shell-left-panel/style.mdx
+++ b/src/pages/components/UI-shell-left-panel/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: UI shell left panel
 description: This left panel is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.
-tabs: ['Code', 'Usage', 'Style']
+tabs: ["Code", "Usage", "Style"]
 ---
 
 ## Color
diff --git a/src/pages/components/UI-shell-left-panel/usage.mdx b/src/pages/components/UI-shell-left-panel/usage.mdx
index 57dbe0d9b0b..62cadf6714b 100644
--- a/src/pages/components/UI-shell-left-panel/usage.mdx
+++ b/src/pages/components/UI-shell-left-panel/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: UI shell left panel
 description: This left panel is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.
-tabs: ['Code', 'Usage', 'Style']
+tabs: ["Code", "Usage", "Style"]
 ---
 
 <PageDescription>
@@ -24,7 +24,8 @@ This left panel is part of the Carbon UI shell. A shell is a collection of compo
   <Column colLg={4} colMd={4} noGutterSm>
     <ResourceCard
       subTitle="UI Shell template"
-      href="https://sketch.cloud/s/EjVmA">
+      href="https://sketch.cloud/s/EjVmA"
+    >
       <MdxIcon name="sketch" />
     </ResourceCard>
   </Column>
diff --git a/src/pages/components/UI-shell-right-panel/code.mdx b/src/pages/components/UI-shell-right-panel/code.mdx
index 2f7295702e7..2675eb687e7 100644
--- a/src/pages/components/UI-shell-right-panel/code.mdx
+++ b/src/pages/components/UI-shell-right-panel/code.mdx
@@ -1,7 +1,7 @@
 ---
 title: UI shell right panel
 description: This right panel is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.
-tabs: ['Code', 'Usage', 'Style']
+tabs: ["Code", "Usage", "Style"]
 ---
 
 ## Right panel
diff --git a/src/pages/components/UI-shell-right-panel/style.mdx b/src/pages/components/UI-shell-right-panel/style.mdx
index 84c662b67ba..92c688ce447 100644
--- a/src/pages/components/UI-shell-right-panel/style.mdx
+++ b/src/pages/components/UI-shell-right-panel/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: UI shell right panel
 description: This right panel is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.
-tabs: ['Code', 'Usage', 'Style']
+tabs: ["Code", "Usage", "Style"]
 ---
 
 ## Color
diff --git a/src/pages/components/UI-shell-right-panel/usage.mdx b/src/pages/components/UI-shell-right-panel/usage.mdx
index fb9f28def9a..1ed3f868d6d 100644
--- a/src/pages/components/UI-shell-right-panel/usage.mdx
+++ b/src/pages/components/UI-shell-right-panel/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: UI shell right panel
 description: This right panel is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.
-tabs: ['Code', 'Usage', 'Style']
+tabs: ["Code", "Usage", "Style"]
 ---
 
 <PageDescription>
@@ -24,7 +24,8 @@ The right panel is part of the Carbon UI shell. A shell is a collection of compo
   <Column colLg={4} colMd={4} noGutterSm>
     <ResourceCard
       subTitle="UI Shell template"
-      href="https://sketch.cloud/s/EjVmA">
+      href="https://sketch.cloud/s/EjVmA"
+    >
       <MdxIcon name="sketch" />
     </ResourceCard>
   </Column>
diff --git a/src/pages/components/accordion/accessibility.mdx b/src/pages/components/accordion/accessibility.mdx
index 035a5886a85..1d3578d60a6 100755
--- a/src/pages/components/accordion/accessibility.mdx
+++ b/src/pages/components/accordion/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Accordion
 description: The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <AnchorLinks>
   <AnchorLink>How it works</AnchorLink>
diff --git a/src/pages/components/accordion/code.mdx b/src/pages/components/accordion/code.mdx
index fefec6bff1e..ef3cb94bdde 100755
--- a/src/pages/components/accordion/code.mdx
+++ b/src/pages/components/accordion/code.mdx
@@ -1,20 +1,21 @@
 ---
 title: Accordion
 description: The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 <ComponentDemo
   links={{
     React:
-      'http://react.carbondesignsystem.com/?path=/story/accordion--default',
+      "http://react.carbondesignsystem.com/?path=/story/accordion--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-accordion--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-accordion--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvaccordion--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=accordion',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvaccordion--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=accordion",
   }}
-  knobs={{ AccordionItem: ['open'] }}>{`
+  knobs={{ AccordionItem: ["open"] }}
+>{`
 <Accordion>
   <AccordionItem title="title 1">content 1</AccordionItem>
 </Accordion>
diff --git a/src/pages/components/accordion/style.mdx b/src/pages/components/accordion/style.mdx
index 537cd5bd0e4..b7c4ede8188 100755
--- a/src/pages/components/accordion/style.mdx
+++ b/src/pages/components/accordion/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: Accordion
 description: The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/accordion/usage.mdx b/src/pages/components/accordion/usage.mdx
index ae1678750fd..6b507a7ca4d 100755
--- a/src/pages/components/accordion/usage.mdx
+++ b/src/pages/components/accordion/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Accordion
 description: The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## General guidance
diff --git a/src/pages/components/breadcrumb/accessibility.mdx b/src/pages/components/breadcrumb/accessibility.mdx
index d13f8464e44..8aa39378293 100644
--- a/src/pages/components/breadcrumb/accessibility.mdx
+++ b/src/pages/components/breadcrumb/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Breadcrumb
 description: The breadcrumb component is a secondary navigation pattern that shows hierarchy among content or traces a user’s path.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <AnchorLinks>
   <AnchorLink>How it works</AnchorLink>
diff --git a/src/pages/components/breadcrumb/code.mdx b/src/pages/components/breadcrumb/code.mdx
index d6d3a3823c7..f82f2683d6a 100755
--- a/src/pages/components/breadcrumb/code.mdx
+++ b/src/pages/components/breadcrumb/code.mdx
@@ -1,23 +1,24 @@
 ---
 title: Breadcrumb
 description: The breadcrumb component is a secondary navigation pattern that shows hierarchy among content or traces a user’s path.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 <ComponentDemo
   links={{
     React:
-      'http://react.carbondesignsystem.com/?path=/story/breadcrumb--default',
+      "http://react.carbondesignsystem.com/?path=/story/breadcrumb--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-breadcrumb--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-breadcrumb--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvbreadcrumb--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=breadcrumb',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvbreadcrumb--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=breadcrumb",
   }}
   knobs={{
-    Breadcrumb: ['noTrailingSlash'],
-    BreadcrumbItem: ['isCurrentPage'],
-  }}>{`
+    Breadcrumb: ["noTrailingSlash"],
+    BreadcrumbItem: ["isCurrentPage"],
+  }}
+>{`
 <Breadcrumb>
   <BreadcrumbItem href="/">Breadcrumb 1</BreadcrumbItem>
   <BreadcrumbItem href="/">Breadcrumb 2</BreadcrumbItem>
diff --git a/src/pages/components/breadcrumb/style.mdx b/src/pages/components/breadcrumb/style.mdx
index 90ab7b87bd6..43387447aab 100755
--- a/src/pages/components/breadcrumb/style.mdx
+++ b/src/pages/components/breadcrumb/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: Breadcrumb
 description: The breadcrumb component is a secondary navigation pattern that shows hierarchy among content or traces a user’s path.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/breadcrumb/usage.mdx b/src/pages/components/breadcrumb/usage.mdx
index 247ac239cd5..9d56810bd75 100755
--- a/src/pages/components/breadcrumb/usage.mdx
+++ b/src/pages/components/breadcrumb/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Breadcrumb
 description: The breadcrumb component is a secondary navigation pattern that shows hierarchy among content or traces a user’s path.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## General guidance
diff --git a/src/pages/components/button/accessibility.mdx b/src/pages/components/button/accessibility.mdx
index 7ff8f8f6f27..8c563bea146 100644
--- a/src/pages/components/button/accessibility.mdx
+++ b/src/pages/components/button/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Button
 description: Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.```
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <AnchorLinks>
   <AnchorLink>How it works</AnchorLink>
diff --git a/src/pages/components/button/code.mdx b/src/pages/components/button/code.mdx
index 4ebbaf6af88..459bae40a17 100755
--- a/src/pages/components/button/code.mdx
+++ b/src/pages/components/button/code.mdx
@@ -1,18 +1,19 @@
 ---
 title: Button
 description: Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.```
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 <ComponentDemo
   links={{
-    React: 'http://react.carbondesignsystem.com/?path=/story/buttons--default',
+    React: "http://react.carbondesignsystem.com/?path=/story/buttons--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-button--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-button--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvbutton--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=button',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvbutton--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=button",
   }}
   knobs={{
-    Button: ['kind', 'disabled', 'size'],
-  }}>{`<Button>Hello World!</Button>`}</ComponentDemo>
+    Button: ["kind", "disabled", "size"],
+  }}
+>{`<Button>Hello World!</Button>`}</ComponentDemo>
diff --git a/src/pages/components/button/style.mdx b/src/pages/components/button/style.mdx
index 623cb2ef493..c330c70eb69 100755
--- a/src/pages/components/button/style.mdx
+++ b/src/pages/components/button/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: Button
 description: Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/button/usage.mdx b/src/pages/components/button/usage.mdx
index 7f784749156..e185a3759a7 100755
--- a/src/pages/components/button/usage.mdx
+++ b/src/pages/components/button/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Button
 description: Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 <AnchorLinks>
diff --git a/src/pages/components/checkbox/accessibility.mdx b/src/pages/components/checkbox/accessibility.mdx
index 84bcab76368..a80c39a87a8 100644
--- a/src/pages/components/checkbox/accessibility.mdx
+++ b/src/pages/components/checkbox/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Checkbox
 description: Checkboxes are used for a list of options where the user may select multiple options, including all or none.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <AnchorLinks>
   <AnchorLink>How it works</AnchorLink>
diff --git a/src/pages/components/checkbox/code.mdx b/src/pages/components/checkbox/code.mdx
index f4a7136cd54..0a77794878a 100755
--- a/src/pages/components/checkbox/code.mdx
+++ b/src/pages/components/checkbox/code.mdx
@@ -1,19 +1,20 @@
 ---
 title: Checkbox
 description: Checkboxes are used for a list of options where the user may select multiple options, including all or none.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 <ComponentDemo
   links={{
-    React: 'http://react.carbondesignsystem.com/?path=/story/checkbox--checked',
+    React: "http://react.carbondesignsystem.com/?path=/story/checkbox--checked",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-checkbox--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-checkbox--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvcheckbox--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=checkbox',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvcheckbox--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=checkbox",
   }}
-  knobs={{ Checkbox: ['indeterminate', 'disabled', 'hideLabel'] }}>
+  knobs={{ Checkbox: ["indeterminate", "disabled", "hideLabel"] }}
+>
   {`
 <fieldset className="bx--fieldset">
   <legend className="bx--label">Checkbox heading</legend>
diff --git a/src/pages/components/checkbox/style.mdx b/src/pages/components/checkbox/style.mdx
index 11327201135..3c6148f47fc 100755
--- a/src/pages/components/checkbox/style.mdx
+++ b/src/pages/components/checkbox/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: Checkbox
 description: Checkboxes are used for a list of options where the user may select multiple options, including all or none.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/checkbox/usage.mdx b/src/pages/components/checkbox/usage.mdx
index 4b5a68a3abf..0ba936542dc 100755
--- a/src/pages/components/checkbox/usage.mdx
+++ b/src/pages/components/checkbox/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Checkbox
 description: Checkboxes are used for a list of options where the user may select multiple options, including all or none.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 <AnchorLinks>
diff --git a/src/pages/components/code-snippet/accessibility.mdx b/src/pages/components/code-snippet/accessibility.mdx
index cd4e651a2a3..f78c8edabcc 100644
--- a/src/pages/components/code-snippet/accessibility.mdx
+++ b/src/pages/components/code-snippet/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Code snippet
 description: Code snippets are small blocks of reusable code that can be inserted in a code file.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <PageDescription>
 
diff --git a/src/pages/components/code-snippet/code.mdx b/src/pages/components/code-snippet/code.mdx
index a5e4fd9e953..824da14f450 100755
--- a/src/pages/components/code-snippet/code.mdx
+++ b/src/pages/components/code-snippet/code.mdx
@@ -1,20 +1,21 @@
 ---
 title: Code snippet
 description: Code snippets are small blocks of reusable code that can be inserted in a code file.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 <ComponentDemo
   links={{
     React:
-      'http://react.carbondesignsystem.com/?path=/story/codesnippet--inline',
+      "http://react.carbondesignsystem.com/?path=/story/codesnippet--inline",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-code-snippet--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-code-snippet--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvcodesnippet--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=code-snippet',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvcodesnippet--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=code-snippet",
   }}
-  knobs={{ CodeSnippet: ['type'] }}>
+  knobs={{ CodeSnippet: ["type"] }}
+>
   {`
 <CodeSnippet>
 {\`@mixin grid-container {
diff --git a/src/pages/components/code-snippet/style.mdx b/src/pages/components/code-snippet/style.mdx
index 38129ae4ad3..7fdb0ca3a81 100755
--- a/src/pages/components/code-snippet/style.mdx
+++ b/src/pages/components/code-snippet/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: Code snippet
 description: Code snippets are small blocks of reusable code that can be inserted in a code file.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/code-snippet/usage.mdx b/src/pages/components/code-snippet/usage.mdx
index b956f042feb..867226d4fa8 100644
--- a/src/pages/components/code-snippet/usage.mdx
+++ b/src/pages/components/code-snippet/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Code snippet
 description: Code snippets are small blocks of reusable code that can be inserted in a code file.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## General guidance
diff --git a/src/pages/components/content-switcher/accessibility.mdx b/src/pages/components/content-switcher/accessibility.mdx
index a3089bc2667..e918af507e8 100644
--- a/src/pages/components/content-switcher/accessibility.mdx
+++ b/src/pages/components/content-switcher/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Content switcher
 description: Content switchers manipulate the content shown following an exclusive or “either/or” pattern. It is used to toggle between two or more content sections within the same space on screen.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <PageDescription>
 
diff --git a/src/pages/components/content-switcher/code.mdx b/src/pages/components/content-switcher/code.mdx
index 89b4d98bdab..6ae5bcbd2af 100755
--- a/src/pages/components/content-switcher/code.mdx
+++ b/src/pages/components/content-switcher/code.mdx
@@ -1,19 +1,20 @@
 ---
 title: Content switcher
 description: Content switchers manipulate the content shown following an exclusive or “either/or” pattern. It is used to toggle between two or more content sections within the same space on screen.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 <ComponentDemo
   links={{
     React:
-      'http://react.carbondesignsystem.com/?path=/story/contentswitcher--default',
+      "http://react.carbondesignsystem.com/?path=/story/contentswitcher--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-content-switcher--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-content-switcher--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvcontentswitcher--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=content-switcher',
-  }}>{`
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvcontentswitcher--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=content-switcher",
+  }}
+>{`
 <ContentSwitcher onChange={console.log}>
   <Switch name={'first'} text='First section' />
   <Switch name={'second'} text='Second section' />
diff --git a/src/pages/components/content-switcher/style.mdx b/src/pages/components/content-switcher/style.mdx
index 85872125127..50ba6bc7af9 100755
--- a/src/pages/components/content-switcher/style.mdx
+++ b/src/pages/components/content-switcher/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: Content switcher
 description: Content switchers manipulate the content shown following an exclusive or “either/or” pattern. It is used to toggle between two or more content sections within the same space on screen.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/content-switcher/usage.mdx b/src/pages/components/content-switcher/usage.mdx
index 5fc731eac0e..6064222d00d 100755
--- a/src/pages/components/content-switcher/usage.mdx
+++ b/src/pages/components/content-switcher/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Content switcher
 description: Content switchers manipulate the content shown following an exclusive or “either/or” pattern. It is used to toggle between two or more content sections within the same space on screen.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## General guidance
diff --git a/src/pages/components/data-table/accessibility.mdx b/src/pages/components/data-table/accessibility.mdx
index bd011c80425..8b4a3e22f17 100644
--- a/src/pages/components/data-table/accessibility.mdx
+++ b/src/pages/components/data-table/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Data table
 description: The data table component allows for the flexible display and sorting of information.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <PageDescription>
 
diff --git a/src/pages/components/data-table/code.mdx b/src/pages/components/data-table/code.mdx
index a2b083a119b..fee1d2c83f3 100644
--- a/src/pages/components/data-table/code.mdx
+++ b/src/pages/components/data-table/code.mdx
@@ -1,25 +1,26 @@
 ---
 title: Data table
 description: The data table component allows for the flexible display and sorting of information.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
-import { rowData, headerData } from '../../../data/components/data-table.js';
+import { rowData, headerData } from "../../../data/components/data-table.js";
 
 ## Default
 
 <ComponentDemo
   scope={{ rowData, headerData, React }}
-  knobs={{ DataTable: ['isSortable'], Table: ['size', 'useZebraStyles'] }}
+  knobs={{ DataTable: ["isSortable"], Table: ["size", "useZebraStyles"] }}
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/datatable--default',
+      "https://react.carbondesignsystem.com/?path=/story/datatable--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-table--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-table--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=data-table',
-  }}>{`<DataTable 
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=data-table",
+  }}
+>{`<DataTable 
   rows={rowData} 
   headers={headerData} 
   render={({ rows, headers, getHeaderProps }) => (
@@ -51,16 +52,17 @@ import { rowData, headerData } from '../../../data/components/data-table.js';
 
 <ComponentDemo
   scope={{ rowData, headerData }}
-  knobs={{ DataTable: ['isSortable'], Table: ['size', 'useZebraStyles'] }}
+  knobs={{ DataTable: ["isSortable"], Table: ["size", "useZebraStyles"] }}
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/datatable--default',
+      "https://react.carbondesignsystem.com/?path=/story/datatable--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-table--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-table--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=data-table',
-  }}>{`<DataTable 
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=data-table",
+  }}
+>{`<DataTable 
   rows={rowData} 
   headers={headerData} 
   render={({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (
@@ -100,16 +102,17 @@ import { rowData, headerData } from '../../../data/components/data-table.js';
 
 <ComponentDemo
   scope={{ rowData, headerData }}
-  knobs={{ DataTable: ['isSortable'], Table: ['size', 'useZebraStyles'] }}
+  knobs={{ DataTable: ["isSortable"], Table: ["size", "useZebraStyles"] }}
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/datatable--default',
+      "https://react.carbondesignsystem.com/?path=/story/datatable--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-table--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-table--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=data-table',
-  }}>{`<DataTable 
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=data-table",
+  }}
+>{`<DataTable 
   rows={rowData} 
   headers={headerData} 
   render={({ rows, headers, getHeaderProps, getSelectionProps, getRowProps }) => (
@@ -144,85 +147,85 @@ import { rowData, headerData } from '../../../data/components/data-table.js';
 ```javascript
 const headerData = [
   {
-    header: 'Name',
-    key: 'name',
+    header: "Name",
+    key: "name",
   },
   {
-    header: 'Protocol',
-    key: 'protocol',
+    header: "Protocol",
+    key: "protocol",
   },
   {
-    header: 'Port',
-    key: 'port',
+    header: "Port",
+    key: "port",
   },
   {
-    header: 'Rule',
-    key: 'rule',
+    header: "Rule",
+    key: "rule",
   },
   {
-    header: 'Attached Groups',
-    key: 'attached_groups',
+    header: "Attached Groups",
+    key: "attached_groups",
   },
   {
-    header: 'Status',
-    key: 'status',
+    header: "Status",
+    key: "status",
   },
 ];
 
 const rowData = [
   {
-    attached_groups: 'Kevins VM Groups',
-    id: 'a',
-    name: 'Load Balancer 3',
+    attached_groups: "Kevins VM Groups",
+    id: "a",
+    name: "Load Balancer 3",
     port: 3000,
-    protocol: 'HTTP',
-    rule: 'Round robin',
-    status: 'Disabled',
+    protocol: "HTTP",
+    rule: "Round robin",
+    status: "Disabled",
   },
   {
-    attached_groups: 'Maureens VM Groups',
-    id: 'b',
-    name: 'Load Balancer 1',
+    attached_groups: "Maureens VM Groups",
+    id: "b",
+    name: "Load Balancer 1",
     port: 443,
-    protocol: 'HTTP',
-    rule: 'Round robin',
-    status: 'Starting',
+    protocol: "HTTP",
+    rule: "Round robin",
+    status: "Starting",
   },
   {
-    attached_groups: 'Andrews VM Groups',
-    id: 'c',
-    name: 'Load Balancer 2',
+    attached_groups: "Andrews VM Groups",
+    id: "c",
+    name: "Load Balancer 2",
     port: 80,
-    protocol: 'HTTP',
-    rule: 'DNS delegation',
-    status: 'Active',
+    protocol: "HTTP",
+    rule: "DNS delegation",
+    status: "Active",
   },
   {
-    attached_groups: 'Marcs VM Groups',
-    id: 'd',
-    name: 'Load Balancer 6',
+    attached_groups: "Marcs VM Groups",
+    id: "d",
+    name: "Load Balancer 6",
     port: 3000,
-    protocol: 'HTTP',
-    rule: 'Round robin',
-    status: 'Disabled',
+    protocol: "HTTP",
+    rule: "Round robin",
+    status: "Disabled",
   },
   {
-    attached_groups: 'Mels VM Groups',
-    id: 'e',
-    name: 'Load Balancer 4',
+    attached_groups: "Mels VM Groups",
+    id: "e",
+    name: "Load Balancer 4",
     port: 443,
-    protocol: 'HTTP',
-    rule: 'Round robin',
-    status: 'Starting',
+    protocol: "HTTP",
+    rule: "Round robin",
+    status: "Starting",
   },
   {
-    attached_groups: 'Ronjas VM Groups',
-    id: 'f',
-    name: 'Load Balancer 5',
+    attached_groups: "Ronjas VM Groups",
+    id: "f",
+    name: "Load Balancer 5",
     port: 80,
-    protocol: 'HTTP',
-    rule: 'DNS delegation',
-    status: 'Active',
+    protocol: "HTTP",
+    rule: "DNS delegation",
+    status: "Active",
   },
 ];
 ```
diff --git a/src/pages/components/data-table/style.mdx b/src/pages/components/data-table/style.mdx
index e59b3c3adb3..38109a61ff7 100755
--- a/src/pages/components/data-table/style.mdx
+++ b/src/pages/components/data-table/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: Data table
 description: The data table component allows for the flexible display and sorting of information.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/data-table/usage.mdx b/src/pages/components/data-table/usage.mdx
index 046686c3a2b..1f7ff68d3de 100755
--- a/src/pages/components/data-table/usage.mdx
+++ b/src/pages/components/data-table/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Data table
 description: The data table component allows for the flexible display and sorting of information.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Basic data table
diff --git a/src/pages/components/date-picker/accessibility.mdx b/src/pages/components/date-picker/accessibility.mdx
index fddc4f0a3a1..11d5a00e528 100644
--- a/src/pages/components/date-picker/accessibility.mdx
+++ b/src/pages/components/date-picker/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Date picker
 description: Date and time pickers allow users to select a single or a range of dates and times.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <PageDescription>
 
diff --git a/src/pages/components/date-picker/code.mdx b/src/pages/components/date-picker/code.mdx
index 93a5e7cf771..3388d011834 100755
--- a/src/pages/components/date-picker/code.mdx
+++ b/src/pages/components/date-picker/code.mdx
@@ -1,24 +1,25 @@
 ---
 title: Date picker
 description: Date and time pickers allow users to select a single or a range of dates and times.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Default
 
 <ComponentDemo
   knobs={{
-    DatePicker: ['light'],
+    DatePicker: ["light"],
   }}
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/datepicker--simple',
+      "https://react.carbondesignsystem.com/?path=/story/datepicker--simple",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-date-picker--simple',
+      "https://angular.carbondesignsystem.com/?path=/story/components-date-picker--simple",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvdatepicker--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=date-picker',
-  }}>{`<DatePicker dateFormat="m/d/Y" datePickerType="simple">
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvdatepicker--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=date-picker",
+  }}
+>{`<DatePicker dateFormat="m/d/Y" datePickerType="simple">
   <DatePickerInput
     id="date-picker-default-id"
     placeholder="mm/dd/yyyy"
@@ -31,17 +32,18 @@ tabs: ['Code', 'Usage', 'Style', 'Accessibility']
 
 <ComponentDemo
   knobs={{
-    DatePicker: ['light'],
+    DatePicker: ["light"],
   }}
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/datepicker--single-with-calendar',
+      "https://react.carbondesignsystem.com/?path=/story/datepicker--single-with-calendar",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-date-picker--single',
+      "https://angular.carbondesignsystem.com/?path=/story/components-date-picker--single",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvdatepicker--single',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=date-picker',
-  }}>{`<DatePicker dateFormat="m/d/Y" datePickerType="single">
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvdatepicker--single",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=date-picker",
+  }}
+>{`<DatePicker dateFormat="m/d/Y" datePickerType="single">
   <DatePickerInput
     id="date-picker-calendar-id"
     placeholder="mm/dd/yyyy"
@@ -54,17 +56,18 @@ tabs: ['Code', 'Usage', 'Style', 'Accessibility']
 
 <ComponentDemo
   knobs={{
-    DatePicker: ['light'],
+    DatePicker: ["light"],
   }}
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/datepicker--range-with-calendar',
+      "https://react.carbondesignsystem.com/?path=/story/datepicker--range-with-calendar",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-date-picker--range',
+      "https://angular.carbondesignsystem.com/?path=/story/components-date-picker--range",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvdatepicker--range',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=date-picker',
-  }}>{`<DatePicker dateFormat="m/d/Y" datePickerType="range">
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvdatepicker--range",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=date-picker",
+  }}
+>{`<DatePicker dateFormat="m/d/Y" datePickerType="range">
   <DatePickerInput
     id="date-picker-range-start"
     placeholder="mm/dd/yyyy"
diff --git a/src/pages/components/date-picker/style.mdx b/src/pages/components/date-picker/style.mdx
index d0483fdf9dc..edbbf59b3de 100644
--- a/src/pages/components/date-picker/style.mdx
+++ b/src/pages/components/date-picker/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: Date picker
 description: Date and time pickers allow users to select a single or a range of dates and times.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/date-picker/usage.mdx b/src/pages/components/date-picker/usage.mdx
index af9dd92a745..90cb811ef40 100755
--- a/src/pages/components/date-picker/usage.mdx
+++ b/src/pages/components/date-picker/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Date picker
 description: Date and time pickers allow users to select a single or a range of dates and times.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 <PageDescription>
diff --git a/src/pages/components/dropdown/accessibility.mdx b/src/pages/components/dropdown/accessibility.mdx
index 2ee0360e397..fab00659573 100644
--- a/src/pages/components/dropdown/accessibility.mdx
+++ b/src/pages/components/dropdown/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Dropdown
 description: Dropdowns present a list of options that can be used to filter or sort existing content. They can also be used as menus.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <PageDescription>
 
diff --git a/src/pages/components/dropdown/code.mdx b/src/pages/components/dropdown/code.mdx
index 0cce09bb8a2..397f34bf8a0 100755
--- a/src/pages/components/dropdown/code.mdx
+++ b/src/pages/components/dropdown/code.mdx
@@ -1,25 +1,26 @@
 ---
 title: Dropdown
 description: Dropdowns present a list of options that can be used to filter or sort existing content. They can also be used as menus.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
-import items from '../../../data/components/dropdown.js';
+import items from "../../../data/components/dropdown.js";
 
 ## Default
 
 <ComponentDemo
   scope={{ items }}
-  knobs={{ Dropdown: ['light', 'disabled'] }}
+  knobs={{ Dropdown: ["light", "disabled"] }}
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/dropdown--default',
+      "https://react.carbondesignsystem.com/?path=/story/dropdown--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-dropdown--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-dropdown--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvdropdown--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=dropdown',
-  }}>{`
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvdropdown--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=dropdown",
+  }}
+>{`
 <Dropdown
   ariaLabel="Dropdown"
   id="carbon-dropdown-example"
@@ -33,15 +34,16 @@ import items from '../../../data/components/dropdown.js';
 
 <ComponentDemo
   scope={{ items }}
-  knobs={{ ComboBox: ['light', 'disabled'] }}
+  knobs={{ ComboBox: ["light", "disabled"] }}
   links={{
-    React: 'http://react.carbondesignsystem.com/?path=/story/combobox--default',
+    React: "http://react.carbondesignsystem.com/?path=/story/combobox--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-combobox--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-combobox--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvcombobox--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=combo-box',
-  }}>{`
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvcombobox--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=combo-box",
+  }}
+>{`
 <ComboBox
   ariaLabel="ComboBox"
   id="carbon-combobox-example"
@@ -55,16 +57,17 @@ import items from '../../../data/components/dropdown.js';
 
 <ComponentDemo
   scope={{ items }}
-  knobs={{ MultiSelect: ['light', 'disabled'] }}
+  knobs={{ MultiSelect: ["light", "disabled"] }}
   links={{
     React:
-      'http://react.carbondesignsystem.com/?path=/story/multiselect--default',
+      "http://react.carbondesignsystem.com/?path=/story/multiselect--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-combobox--multi-select',
+      "https://angular.carbondesignsystem.com/?path=/story/components-combobox--multi-select",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvmultiselect--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=multi-select',
-  }}>{`
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvmultiselect--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=multi-select",
+  }}
+>{`
 <MultiSelect
   ariaLabel="MultiSelect"
   id="carbon-multiselect-example"
@@ -78,16 +81,17 @@ import items from '../../../data/components/dropdown.js';
 
 <ComponentDemo
   scope={{ items }}
-  knobs={{ MultiSelect: ['light', 'disabled'] }}
+  knobs={{ MultiSelect: ["light", "disabled"] }}
   links={{
     React:
-      'http://react.carbondesignsystem.com/?path=/story/multiselect--default',
+      "http://react.carbondesignsystem.com/?path=/story/multiselect--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-combobox--multi-select',
+      "https://angular.carbondesignsystem.com/?path=/story/components-combobox--multi-select",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvmultiselect--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=multi-select',
-  }}>{`
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvmultiselect--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=multi-select",
+  }}
+>{`
 <MultiSelect.Filterable
   ariaLabel="Filterable MultiSelect"
   id="carbon--filterable-multiselect-example"
@@ -102,20 +106,20 @@ import items from '../../../data/components/dropdown.js';
 ```javascript
 const items = [
   {
-    id: 'option-1',
-    text: 'Option 1',
+    id: "option-1",
+    text: "Option 1",
   },
   {
-    id: 'option-2',
-    text: 'Option 2',
+    id: "option-2",
+    text: "Option 2",
   },
   {
-    id: 'option-3',
-    text: 'Option 3',
+    id: "option-3",
+    text: "Option 3",
   },
   {
-    id: 'option-4',
-    text: 'Option 4',
+    id: "option-4",
+    text: "Option 4",
   },
 ];
 ```
diff --git a/src/pages/components/file-uploader/accessibility.mdx b/src/pages/components/file-uploader/accessibility.mdx
index 28b3e1dcde6..a15d746401d 100644
--- a/src/pages/components/file-uploader/accessibility.mdx
+++ b/src/pages/components/file-uploader/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: File uploader
 description: File uploaders allow the user to transfer a file or submit content of their own.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <PageDescription>
 
diff --git a/src/pages/components/file-uploader/code.mdx b/src/pages/components/file-uploader/code.mdx
index 190456a0447..7a253dbbf38 100755
--- a/src/pages/components/file-uploader/code.mdx
+++ b/src/pages/components/file-uploader/code.mdx
@@ -1,7 +1,7 @@
 ---
 title: File uploader
 description: File uploaders allow the user to transfer a file or submit content of their own.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## File uploader
@@ -9,14 +9,15 @@ tabs: ['Code', 'Usage', 'Style', 'Accessibility']
 <ComponentDemo
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/fileuploader--fileuploader',
+      "https://react.carbondesignsystem.com/?path=/story/fileuploader--fileuploader",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-file-uploader--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-file-uploader--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvfileuploader--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=file-uploader',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvfileuploader--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=file-uploader",
   }}
-  knobs={{ FileUploader: ['multiple'] }}>
+  knobs={{ FileUploader: ["multiple"] }}
+>
   {`
 <div className="bx--file__container">
   <FileUploader
@@ -40,14 +41,15 @@ tabs: ['Code', 'Usage', 'Style', 'Accessibility']
 <ComponentDemo
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/fileuploader--drag-and-drop-upload-container-example-application',
+      "https://react.carbondesignsystem.com/?path=/story/fileuploader--drag-and-drop-upload-container-example-application",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-file-uploader--drag-and-drop',
+      "https://angular.carbondesignsystem.com/?path=/story/components-file-uploader--drag-and-drop",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvfileuploader--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=file-uploader',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvfileuploader--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=file-uploader",
   }}
-  knobs={{ FileUploaderDropContainer: ['multiple', 'disabled'] }}>
+  knobs={{ FileUploaderDropContainer: ["multiple", "disabled"] }}
+>
   {`
   <div className="bx--file__container">
     <strong className='bx--file--label'>Account photo</strong>
@@ -71,14 +73,15 @@ tabs: ['Code', 'Usage', 'Style', 'Accessibility']
 <ComponentDemo
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/fileuploader--fileuploaderitem',
+      "https://react.carbondesignsystem.com/?path=/story/fileuploader--fileuploaderitem",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-file-uploader--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-file-uploader--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvfileuploader--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=file-uploader',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvfileuploader--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=file-uploader",
   }}
-  knobs={{ FileUploaderItem: ['status', 'invalid'] }}>
+  knobs={{ FileUploaderItem: ["status", "invalid"] }}
+>
   {`
   <div className="bx--file__container">
     <FileUploaderItem name='color.jpg' errorSubject='File size exceeds limits' errorBody='500 kb max file size. Select a new file and try again.'/>
diff --git a/src/pages/components/file-uploader/style.mdx b/src/pages/components/file-uploader/style.mdx
index b5e79b08c32..d741fbde95b 100644
--- a/src/pages/components/file-uploader/style.mdx
+++ b/src/pages/components/file-uploader/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: File uploader
 description: File uploaders allow the user to transfer a file or submit content of their own.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/file-uploader/usage.mdx b/src/pages/components/file-uploader/usage.mdx
index 6384f5f3b13..24c51b91158 100755
--- a/src/pages/components/file-uploader/usage.mdx
+++ b/src/pages/components/file-uploader/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: File uploader
 description: File uploaders allow the user to transfer a file or submit content of their own.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 <AnchorLinks>
diff --git a/src/pages/components/form/accessibility.mdx b/src/pages/components/form/accessibility.mdx
index a4ed6abfc28..e705ebfb2a1 100644
--- a/src/pages/components/form/accessibility.mdx
+++ b/src/pages/components/form/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Form
 description: Forms are used for submitting data. Consider each field and what value the data will provide.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <AnchorLinks>
   <AnchorLink>How it works</AnchorLink>
diff --git a/src/pages/components/form/code.mdx b/src/pages/components/form/code.mdx
index 2d78fbc2f0b..c0d3a649bf8 100755
--- a/src/pages/components/form/code.mdx
+++ b/src/pages/components/form/code.mdx
@@ -1,26 +1,27 @@
 ---
 title: Form
 description: Forms are used for submitting data. Consider each field and what value the data will provide.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Form
 
 <ComponentDemo
   links={{
-    React: 'https://react.carbondesignsystem.com/?path=/story/form--default',
+    React: "https://react.carbondesignsystem.com/?path=/story/form--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-input--label',
+      "https://angular.carbondesignsystem.com/?path=/story/components-input--label",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvform--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=form',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvform--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=form",
   }}
   knobs={{
-    TextInput: ['disabled', 'invalid', 'light', 'type'],
-    TextArea: ['disabled', 'invalid', 'light'],
-    Select: ['disabled', 'invalid', 'light', 'inline'],
-    SelectItem: ['disabled', 'hidden'],
-  }}>
+    TextInput: ["disabled", "invalid", "light", "type"],
+    TextArea: ["disabled", "invalid", "light"],
+    Select: ["disabled", "invalid", "light", "inline"],
+    SelectItem: ["disabled", "hidden"],
+  }}
+>
   {`
   <Form>
   <FormGroup>
diff --git a/src/pages/components/form/style.mdx b/src/pages/components/form/style.mdx
index 9dae6983b39..150e5a57b3f 100644
--- a/src/pages/components/form/style.mdx
+++ b/src/pages/components/form/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: Form
 description: Forms are used for submitting data. Consider each field and what value the data will provide.
-tabs: ['Code', 'Usage', 'Style', ' Accessibility']
+tabs: ["Code", "Usage", "Style", " Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/form/usage.mdx b/src/pages/components/form/usage.mdx
index fa5afe37c3c..3b7fe64c540 100755
--- a/src/pages/components/form/usage.mdx
+++ b/src/pages/components/form/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Form
 description: Forms are used for submitting data. Consider each field and what value the data will provide.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 <AnchorLinks>
diff --git a/src/pages/components/inline-loading/accessibility.mdx b/src/pages/components/inline-loading/accessibility.mdx
index c34b8eca765..8d822e9a6c6 100644
--- a/src/pages/components/inline-loading/accessibility.mdx
+++ b/src/pages/components/inline-loading/accessibility.mdx
@@ -1,6 +1,6 @@
 ---
 title: Inline Loading
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -12,7 +12,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <AnchorLinks>
   <AnchorLink>How it works</AnchorLink>
diff --git a/src/pages/components/inline-loading/code.mdx b/src/pages/components/inline-loading/code.mdx
index af1f693fd33..c1dbda638cf 100755
--- a/src/pages/components/inline-loading/code.mdx
+++ b/src/pages/components/inline-loading/code.mdx
@@ -1,19 +1,20 @@
 ---
 title: Inline loading
 description: Inline loading spinners notify a user that their action is being processed.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 <ComponentDemo
   links={{
     React:
-      'http://react.carbondesignsystem.com/?path=/story/inlineloading--inline-loading',
+      "http://react.carbondesignsystem.com/?path=/story/inlineloading--inline-loading",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-inline-loading--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-inline-loading--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvinlineloading--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=inline-loading',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvinlineloading--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=inline-loading",
   }}
   knobs={{
-    InlineLoading: ['status'],
-  }}>{`<InlineLoading description="Loading..." />`}</ComponentDemo>
+    InlineLoading: ["status"],
+  }}
+>{`<InlineLoading description="Loading..." />`}</ComponentDemo>
diff --git a/src/pages/components/inline-loading/style.mdx b/src/pages/components/inline-loading/style.mdx
index c4c15ef9be7..ac0430b6a32 100644
--- a/src/pages/components/inline-loading/style.mdx
+++ b/src/pages/components/inline-loading/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: Inline loading
 description: Inline loading spinners notify a user that their action is being processed.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/inline-loading/usage.mdx b/src/pages/components/inline-loading/usage.mdx
index a71604b5c7b..3ea3aa20f3c 100755
--- a/src/pages/components/inline-loading/usage.mdx
+++ b/src/pages/components/inline-loading/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Inline loading
 description: Inline loading spinners notify a user that their action is being processed.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 <AnchorLinks>
diff --git a/src/pages/components/link/accessibility.mdx b/src/pages/components/link/accessibility.mdx
index a02b888f8f4..e529d1bc6c3 100644
--- a/src/pages/components/link/accessibility.mdx
+++ b/src/pages/components/link/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Link
 description: Checkboxes are used for a list of options where the user may select multiple options, including all or none.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <AnchorLinks>
   <AnchorLink>How it works</AnchorLink>
diff --git a/src/pages/components/link/code.mdx b/src/pages/components/link/code.mdx
index a14824fef17..a2a5797f638 100755
--- a/src/pages/components/link/code.mdx
+++ b/src/pages/components/link/code.mdx
@@ -1,18 +1,19 @@
 ---
 title: Link
 description: Links are used primarily as a navigational element. Links may also change what or how data is displayed.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 <ComponentDemo
   links={{
-    React: 'https://react.carbondesignsystem.com/?path=/story/link--default',
+    React: "https://react.carbondesignsystem.com/?path=/story/link--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-link--basic',
-    Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvlink--a',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=link',
+      "https://angular.carbondesignsystem.com/?path=/story/components-link--basic",
+    Vue: "http://vue.carbondesignsystem.com/?path=/story/components-cvlink--a",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=link",
   }}
-  knobs={{ Link: ['disabled', 'inline'] }}>
+  knobs={{ Link: ["disabled", "inline"] }}
+>
   {`
   <Link href="#">Link</Link>
   `}
diff --git a/src/pages/components/link/style.mdx b/src/pages/components/link/style.mdx
index f47212fe9be..16b4eb13ccf 100755
--- a/src/pages/components/link/style.mdx
+++ b/src/pages/components/link/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: Link
 description: Links are used primarily as a navigational element. Links may also change what or how data is displayed.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/link/usage.mdx b/src/pages/components/link/usage.mdx
index 0f74ad4407e..10bef7fd752 100755
--- a/src/pages/components/link/usage.mdx
+++ b/src/pages/components/link/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Link
 description: Links are used primarily as a navigational element. Links may also change what or how data is displayed.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## General guidance
diff --git a/src/pages/components/list/accessibility.mdx b/src/pages/components/list/accessibility.mdx
index e80488d7b4a..5669933bcfb 100644
--- a/src/pages/components/list/accessibility.mdx
+++ b/src/pages/components/list/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: List
 description: Lists consist of related content grouped together and organized vertically.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <AnchorLinks>
   <AnchorLink>How it works</AnchorLink>
diff --git a/src/pages/components/list/code.mdx b/src/pages/components/list/code.mdx
index 95015012fe1..0fe9fc9e092 100755
--- a/src/pages/components/list/code.mdx
+++ b/src/pages/components/list/code.mdx
@@ -1,7 +1,7 @@
 ---
 title: List
 description: Lists consist of related content grouped together and organized vertically.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Ordered
@@ -9,13 +9,14 @@ tabs: ['Code', 'Usage', 'Style', 'Accessibility']
 <ComponentDemo
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/orderedlist--default',
+      "https://react.carbondesignsystem.com/?path=/story/orderedlist--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-list--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-list--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvlist--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=list',
-  }}>
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvlist--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=list",
+  }}
+>
   {`
   <OrderedList>
     <ListItem>
@@ -47,13 +48,14 @@ tabs: ['Code', 'Usage', 'Style', 'Accessibility']
 <ComponentDemo
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/unorderedlist--default',
+      "https://react.carbondesignsystem.com/?path=/story/unorderedlist--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-list--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-list--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvlist--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=list',
-  }}>
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvlist--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=list",
+  }}
+>
   {`
     <UnorderedList>
       <ListItem>
diff --git a/src/pages/components/list/style.mdx b/src/pages/components/list/style.mdx
index 117d98814c5..c7954c8b61a 100755
--- a/src/pages/components/list/style.mdx
+++ b/src/pages/components/list/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: List
 description: Lists consist of related content grouped together and organized vertically.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/list/usage.mdx b/src/pages/components/list/usage.mdx
index 8d876466f4b..20488fe49b2 100755
--- a/src/pages/components/list/usage.mdx
+++ b/src/pages/components/list/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: List
 description: Lists consist of related content grouped together and organized vertically.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## General guidance
diff --git a/src/pages/components/loading/accessibility.mdx b/src/pages/components/loading/accessibility.mdx
index 42f134b1f9e..d54ff64296f 100644
--- a/src/pages/components/loading/accessibility.mdx
+++ b/src/pages/components/loading/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Loading
 description: Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <AnchorLinks>
   <AnchorLink>How it works</AnchorLink>
diff --git a/src/pages/components/loading/code.mdx b/src/pages/components/loading/code.mdx
index 33645f39d10..2e03659ef81 100755
--- a/src/pages/components/loading/code.mdx
+++ b/src/pages/components/loading/code.mdx
@@ -1,21 +1,22 @@
 ---
 title: Loading
 description: Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Loading
 
 <ComponentDemo
   links={{
-    React: 'https://react.carbondesignsystem.com/?path=/story/loading--default',
+    React: "https://react.carbondesignsystem.com/?path=/story/loading--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-loading--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-loading--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvloading--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=loading',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvloading--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=loading",
   }}
-  knobs={{ Loading: ['small'] }}>
+  knobs={{ Loading: ["small"] }}
+>
   {`
   <Loading
     description="Active loading indicator" withOverlay={false}
diff --git a/src/pages/components/loading/style.mdx b/src/pages/components/loading/style.mdx
index 330ead45942..7b0ed3e40ae 100755
--- a/src/pages/components/loading/style.mdx
+++ b/src/pages/components/loading/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: Loading
 description: Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/loading/usage.mdx b/src/pages/components/loading/usage.mdx
index e42f694b380..efcb911cde8 100755
--- a/src/pages/components/loading/usage.mdx
+++ b/src/pages/components/loading/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Loading
 description: Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## General guidance
diff --git a/src/pages/components/modal/accessibility.mdx b/src/pages/components/modal/accessibility.mdx
index 19d3fd7edb7..fda60caf88b 100644
--- a/src/pages/components/modal/accessibility.mdx
+++ b/src/pages/components/modal/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Modal
 description: Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <AnchorLinks>
   <AnchorLink>How it works</AnchorLink>
diff --git a/src/pages/components/modal/code.mdx b/src/pages/components/modal/code.mdx
index a410064d326..9fa73cc4b70 100755
--- a/src/pages/components/modal/code.mdx
+++ b/src/pages/components/modal/code.mdx
@@ -1,27 +1,28 @@
 ---
 title: Modal
 description: Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 <ComponentDemo
   links={{
-    React: 'https://react.carbondesignsystem.com/?path=/story/modal--default',
+    React: "https://react.carbondesignsystem.com/?path=/story/modal--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-modal--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-modal--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvmodal--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=modal',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvmodal--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=modal",
   }}
   knobs={{
     ModalWrapper: [
-      'passiveModal',
-      'danger',
-      'disabled',
-      'hasScrollingContent',
-      'size',
+      "passiveModal",
+      "danger",
+      "disabled",
+      "hasScrollingContent",
+      "size",
     ],
-  }}>
+  }}
+>
   {`
 <ModalWrapper
   buttonTriggerText="Launch modal"
diff --git a/src/pages/components/modal/style.mdx b/src/pages/components/modal/style.mdx
index 6da3f4f767b..a2db5d2a7a9 100755
--- a/src/pages/components/modal/style.mdx
+++ b/src/pages/components/modal/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: Modal
 description: Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/modal/usage.mdx b/src/pages/components/modal/usage.mdx
index 90ca2a83f1a..b4385599e64 100755
--- a/src/pages/components/modal/usage.mdx
+++ b/src/pages/components/modal/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Modal
 description: Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 <PageDescription>
diff --git a/src/pages/components/notification/accessibility.mdx b/src/pages/components/notification/accessibility.mdx
index fbf620ea542..5926c581bec 100644
--- a/src/pages/components/notification/accessibility.mdx
+++ b/src/pages/components/notification/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Notification
 description: Notifications are messages that communicate information to the user. The two main types of notificaitons are toast notifications and inline notifications.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <AnchorLinks>
   <AnchorLink>How it works</AnchorLink>
diff --git a/src/pages/components/notification/code.mdx b/src/pages/components/notification/code.mdx
index 9a360e84e35..240b068c07e 100755
--- a/src/pages/components/notification/code.mdx
+++ b/src/pages/components/notification/code.mdx
@@ -1,7 +1,7 @@
 ---
 title: Notification
 description: Notifications are messages that communicate information to the user. The two main types of notificaitons are toast notifications and inline notifications.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Toast notification
@@ -9,14 +9,15 @@ tabs: ['Code', 'Usage', 'Style', 'Accessibility']
 <ComponentDemo
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/notifications--toast',
+      "https://react.carbondesignsystem.com/?path=/story/notifications--toast",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-notification--toast',
+      "https://angular.carbondesignsystem.com/?path=/story/components-notification--toast",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvtoastnotification--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=notification',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvtoastnotification--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=notification",
   }}
-  knobs={{ ToastNotification: ['hideCloseButton', 'kind', 'lowContrast'] }}>
+  knobs={{ ToastNotification: ["hideCloseButton", "kind", "lowContrast"] }}
+>
   {`
   <div>
     <ToastNotification
@@ -35,14 +36,15 @@ tabs: ['Code', 'Usage', 'Style', 'Accessibility']
 <ComponentDemo
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/notifications--inline',
+      "https://react.carbondesignsystem.com/?path=/story/notifications--inline",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-notification--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-notification--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvinlinenotification--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=notification',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvinlinenotification--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=notification",
   }}
-  knobs={{ InlineNotification: ['hideCloseButton', 'lowContrast'] }}>
+  knobs={{ InlineNotification: ["hideCloseButton", "lowContrast"] }}
+>
   {`
   <div>
     <InlineNotification
diff --git a/src/pages/components/notification/style.mdx b/src/pages/components/notification/style.mdx
index 39bc1b21fc0..d272beafeb9 100755
--- a/src/pages/components/notification/style.mdx
+++ b/src/pages/components/notification/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: Notification
 description: Notifications are messages that communicate information to the user. The two main types of notificaitons are toast notifications and inline notifications.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/notification/usage.mdx b/src/pages/components/notification/usage.mdx
index e7e8a3a3773..2e44b817f26 100755
--- a/src/pages/components/notification/usage.mdx
+++ b/src/pages/components/notification/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Notification
 description: Notifications are messages that communicate information to the user. The two main types of notificaitons are toast notifications and inline notifications.
-tabs: ['Code', 'Usage', 'Style', ' Accessibility']
+tabs: ["Code", "Usage", "Style", " Accessibility"]
 ---
 
 ## General guidance
diff --git a/src/pages/components/number-input/accessibility.mdx b/src/pages/components/number-input/accessibility.mdx
index 050892f1df2..3cbc8212e2f 100644
--- a/src/pages/components/number-input/accessibility.mdx
+++ b/src/pages/components/number-input/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Number input
 description: Number inputs are similar to text inputs, but contain controls used to increase or decrease an incremental value.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <PageDescription>
 
diff --git a/src/pages/components/number-input/code.mdx b/src/pages/components/number-input/code.mdx
index f2f983cc69f..b6771dc741b 100755
--- a/src/pages/components/number-input/code.mdx
+++ b/src/pages/components/number-input/code.mdx
@@ -1,7 +1,7 @@
 ---
 title: Number input
 description: Number inputs are similar to text inputs, but contain controls used to increase or decrease an incremental value.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Number input
@@ -9,13 +9,14 @@ tabs: ['Code', 'Usage', 'Style', 'Accessibility']
 <ComponentDemo
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/numberinput--default',
+      "https://react.carbondesignsystem.com/?path=/story/numberinput--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-number--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-number--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvnumberinput--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=number-input',
-  }}>
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvnumberinput--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=number-input",
+  }}
+>
   {`
     <NumberInput
       helperText="Optional helper text."
@@ -35,13 +36,14 @@ tabs: ['Code', 'Usage', 'Style', 'Accessibility']
 <ComponentDemo
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/numberinput--default',
+      "https://react.carbondesignsystem.com/?path=/story/numberinput--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-number--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-number--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvnumberinput--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=number-input',
-  }}>
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvnumberinput--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=number-input",
+  }}
+>
   {`
     <NumberInput
       isMobile
diff --git a/src/pages/components/number-input/style.mdx b/src/pages/components/number-input/style.mdx
index d7d954e6f8f..8fc1d9d352f 100755
--- a/src/pages/components/number-input/style.mdx
+++ b/src/pages/components/number-input/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: Number input
 description: Number inputs are similar to text inputs, but contain controls used to increase or decrease an incremental value.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/number-input/usage.mdx b/src/pages/components/number-input/usage.mdx
index f19094cd4d5..a5b6a5f93d3 100755
--- a/src/pages/components/number-input/usage.mdx
+++ b/src/pages/components/number-input/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Number input
 description: Number inputs are similar to text inputs, but contain controls used to increase or decrease an incremental value.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## General guidance
diff --git a/src/pages/components/overflow-menu/accessibility.mdx b/src/pages/components/overflow-menu/accessibility.mdx
index fc1a16571ec..c7ad2683f65 100644
--- a/src/pages/components/overflow-menu/accessibility.mdx
+++ b/src/pages/components/overflow-menu/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Overflow menu
 description: Overflow menus are used when additional options are available to the user and there is a space constraint.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <AnchorLinks>
   <AnchorLink>How it works</AnchorLink>
diff --git a/src/pages/components/overflow-menu/code.mdx b/src/pages/components/overflow-menu/code.mdx
index 991bca6e5ea..ef5b6620691 100755
--- a/src/pages/components/overflow-menu/code.mdx
+++ b/src/pages/components/overflow-menu/code.mdx
@@ -1,23 +1,24 @@
 ---
 title: Overflow menu
 description: Overflow menus are used when additional options are available to the user and there is a space constraint.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 <ComponentDemo
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/overflowmenu--basic',
+      "https://react.carbondesignsystem.com/?path=/story/overflowmenu--basic",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-overflow-menu--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-overflow-menu--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvoverflowmenu--default',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvoverflowmenu--default",
     Vanilla:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvoverflowmenu--default',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvoverflowmenu--default",
   }}
   knobs={{
-    OverflowMenuItem: ['disabled', 'hasDivider', 'isDelete'],
-  }}>
+    OverflowMenuItem: ["disabled", "hasDivider", "isDelete"],
+  }}
+>
   {`
 <OverflowMenu>
   <OverflowMenuItem
diff --git a/src/pages/components/overflow-menu/style.mdx b/src/pages/components/overflow-menu/style.mdx
index 9e5e9a03d3f..e15e76e51af 100755
--- a/src/pages/components/overflow-menu/style.mdx
+++ b/src/pages/components/overflow-menu/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: Overflow menu
 description: Overflow menus are used when additional options are available to the user and there is a space constraint.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/overflow-menu/usage.mdx b/src/pages/components/overflow-menu/usage.mdx
index 2c165daff40..eb16c15aae6 100755
--- a/src/pages/components/overflow-menu/usage.mdx
+++ b/src/pages/components/overflow-menu/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Overflow menu
 description: Overflow menus are used when additional options are available to the user and there is a space constraint.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## General guidance
diff --git a/src/pages/components/overview/index.mdx b/src/pages/components/overview/index.mdx
index 85fb3051089..017518ea799 100755
--- a/src/pages/components/overview/index.mdx
+++ b/src/pages/components/overview/index.mdx
@@ -3,7 +3,7 @@ title: Overview
 description: Components are one of the key building blocks of the design system. Each component has been designed and coded to solve a specific UI problem.
 ---
 
-import ComponentOverview from 'components/ComponentOverview';
+import ComponentOverview from "components/ComponentOverview";
 
 ## Building blocks
 
diff --git a/src/pages/components/pagination/accessibility.mdx b/src/pages/components/pagination/accessibility.mdx
index 6a3bc557161..b01f33a4899 100644
--- a/src/pages/components/pagination/accessibility.mdx
+++ b/src/pages/components/pagination/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Pagination
 description: Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <PageDescription>
 
diff --git a/src/pages/components/pagination/code.mdx b/src/pages/components/pagination/code.mdx
index f0f1e7ce2a8..14fd97a5794 100755
--- a/src/pages/components/pagination/code.mdx
+++ b/src/pages/components/pagination/code.mdx
@@ -1,22 +1,23 @@
 ---
 title: Pagination
 description: Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 <ComponentDemo
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/pagination--pagination',
+      "https://react.carbondesignsystem.com/?path=/story/pagination--pagination",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-pagination--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-pagination--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvpagination--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=pagination',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvpagination--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=pagination",
   }}
   knobs={{
-    Pagination: ['disabled', 'isLastPage', 'pageInputDisabled', 'pagesUnknown'],
-  }}>
+    Pagination: ["disabled", "isLastPage", "pageInputDisabled", "pagesUnknown"],
+  }}
+>
   {`
   <div style={{width: '800px'}}>
     <Pagination
diff --git a/src/pages/components/pagination/style.mdx b/src/pages/components/pagination/style.mdx
index 9b18e09a1c5..e00430906f0 100755
--- a/src/pages/components/pagination/style.mdx
+++ b/src/pages/components/pagination/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: Pagination
 description: Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/pagination/usage.mdx b/src/pages/components/pagination/usage.mdx
index 9df91631fed..cb33fe817ef 100755
--- a/src/pages/components/pagination/usage.mdx
+++ b/src/pages/components/pagination/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Pagination
 description: Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## General guidance
diff --git a/src/pages/components/progress-indicator/accessibility.mdx b/src/pages/components/progress-indicator/accessibility.mdx
index d3c2e9ff959..ac8593c565d 100644
--- a/src/pages/components/progress-indicator/accessibility.mdx
+++ b/src/pages/components/progress-indicator/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Progress indicator
 description: A progress indicator is a visual representation of a user's progress through a set of steps. It guides the user through a number of steps in order to complete a specified process.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <PageDescription>
 
diff --git a/src/pages/components/progress-indicator/code.mdx b/src/pages/components/progress-indicator/code.mdx
index 09ee580c582..eb21dc6b5a2 100755
--- a/src/pages/components/progress-indicator/code.mdx
+++ b/src/pages/components/progress-indicator/code.mdx
@@ -1,7 +1,7 @@
 ---
 title: Progress indicator
 description: A progress indicator is a visual representation of a user's progress through a set of steps. It guides the user through a number of steps in order to complete a specified process.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Progress indicator
diff --git a/src/pages/components/progress-indicator/style.mdx b/src/pages/components/progress-indicator/style.mdx
index 908502b39c9..9576764100e 100755
--- a/src/pages/components/progress-indicator/style.mdx
+++ b/src/pages/components/progress-indicator/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: Progress indicator
 description: A progress indicator is a visual representation of a user's progress through a set of steps. It guides the user through a number of steps in order to complete a specified process.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/progress-indicator/usage.mdx b/src/pages/components/progress-indicator/usage.mdx
index f2a09e425b9..d5be48c8802 100755
--- a/src/pages/components/progress-indicator/usage.mdx
+++ b/src/pages/components/progress-indicator/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Progress indicator
 description: A progress indicator is a visual representation of a user's progress through a set of steps. It guides the user through a number of steps in order to complete a specified process.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## General guidance
diff --git a/src/pages/components/radio-button/accessibility.mdx b/src/pages/components/radio-button/accessibility.mdx
index 9e619db87eb..425ffde6fe9 100644
--- a/src/pages/components/radio-button/accessibility.mdx
+++ b/src/pages/components/radio-button/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Radio button
 description: Radio buttons are used when two or more options are mutually exclusive, meaning the user must select only one option.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <AnchorLinks>
   <AnchorLink>How it works</AnchorLink>
diff --git a/src/pages/components/radio-button/code.mdx b/src/pages/components/radio-button/code.mdx
index f84412cbcaf..411802393d4 100755
--- a/src/pages/components/radio-button/code.mdx
+++ b/src/pages/components/radio-button/code.mdx
@@ -1,7 +1,7 @@
 ---
 title: Radio button
 description: Radio buttons are used when two or more options are mutually exclusive, meaning the user must select only one option.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Radio button
@@ -9,16 +9,17 @@ tabs: ['Code', 'Usage', 'Style', 'Accessibility']
 <ComponentDemo
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/radiobuttongroup--default',
+      "https://react.carbondesignsystem.com/?path=/story/radiobuttongroup--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-radio--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-radio--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvradiobutton--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=radio-button',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvradiobutton--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=radio-button",
   }}
   knobs={{
-    RadioButtonGroup: ['orientation', 'labelPosition'],
-  }}>
+    RadioButtonGroup: ["orientation", "labelPosition"],
+  }}
+>
   {`
   <FormGroup
   legendText="Radio Button heading"
diff --git a/src/pages/components/radio-button/style.mdx b/src/pages/components/radio-button/style.mdx
index 04437372ee9..09b26a670ac 100755
--- a/src/pages/components/radio-button/style.mdx
+++ b/src/pages/components/radio-button/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: Radio button
 description: Radio buttons are used when two or more options are mutually exclusive, meaning the user must select only one option.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/radio-button/usage.mdx b/src/pages/components/radio-button/usage.mdx
index 3aca79a76fd..da24048576c 100755
--- a/src/pages/components/radio-button/usage.mdx
+++ b/src/pages/components/radio-button/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Radio button
 description: Radio buttons are used when two or more options are mutually exclusive, meaning the user must select only one option.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## General guidance
diff --git a/src/pages/components/search/accessibility.mdx b/src/pages/components/search/accessibility.mdx
index dbadb98fcf1..fd224b9b731 100644
--- a/src/pages/components/search/accessibility.mdx
+++ b/src/pages/components/search/accessibility.mdx
@@ -1,6 +1,6 @@
 ---
 title: Search
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -12,7 +12,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <AnchorLinks>
   <AnchorLink>How it works</AnchorLink>
diff --git a/src/pages/components/search/code.mdx b/src/pages/components/search/code.mdx
index ae00abdc432..2d3dfed0d32 100755
--- a/src/pages/components/search/code.mdx
+++ b/src/pages/components/search/code.mdx
@@ -1,19 +1,20 @@
 ---
 title: Search
 description: Search enables users to specify a word or a phrase to find relevant pieces of content without the use of navigation.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 <ComponentDemo
   links={{
-    React: 'https://react.carbondesignsystem.com/?path=/story/search--default',
+    React: "https://react.carbondesignsystem.com/?path=/story/search--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-search--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-search--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvsearch--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=search',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvsearch--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=search",
   }}
-  knobs={{ Search: ['size', 'light'] }}>
+  knobs={{ Search: ["size", "light"] }}
+>
   {`
 <Search
   id="search-1"
diff --git a/src/pages/components/search/style.mdx b/src/pages/components/search/style.mdx
index 68af3b53393..15e7c26b033 100755
--- a/src/pages/components/search/style.mdx
+++ b/src/pages/components/search/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: Search
 description: Search enables users to specify a word or a phrase to find relevant pieces of content without the use of navigation.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/search/usage.mdx b/src/pages/components/search/usage.mdx
index 84742228e3c..ca91ce4b837 100755
--- a/src/pages/components/search/usage.mdx
+++ b/src/pages/components/search/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Search
 description: Search enables users to specify a word or a phrase to find relevant pieces of content without the use of navigation.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## General guidance
diff --git a/src/pages/components/select/accessibility.mdx b/src/pages/components/select/accessibility.mdx
index 1ba8e0a762b..43e8f4d7c86 100644
--- a/src/pages/components/select/accessibility.mdx
+++ b/src/pages/components/select/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Select
 description: Select is a type of input that is used in forms, where a user is submitting data and chooses one option from a list.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <AnchorLinks>
   <AnchorLink>How it works</AnchorLink>
diff --git a/src/pages/components/select/code.mdx b/src/pages/components/select/code.mdx
index 953aab5c97c..09ed9ac113d 100755
--- a/src/pages/components/select/code.mdx
+++ b/src/pages/components/select/code.mdx
@@ -1,23 +1,24 @@
 ---
 title: Select
 description: Select is a type of input that is used in forms, where a user is submitting data and chooses one option from a list.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 <ComponentDemo
   links={{
-    React: 'https://react.carbondesignsystem.com/?path=/story/select--default',
+    React: "https://react.carbondesignsystem.com/?path=/story/select--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-select--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-select--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvselect--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=select',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvselect--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=select",
   }}
   knobs={{
-    Select: ['disabled', 'inline', 'invalid', 'light'],
-    SelectItem: ['disabled', 'hidden'],
-    SelectItemGroup: ['disabled'],
-  }}>
+    Select: ["disabled", "inline", "invalid", "light"],
+    SelectItem: ["disabled", "hidden"],
+    SelectItemGroup: ["disabled"],
+  }}
+>
   {`
 <Select
   defaultValue="placeholder-item"
diff --git a/src/pages/components/select/style.mdx b/src/pages/components/select/style.mdx
index 479fb6cb41a..13865640087 100755
--- a/src/pages/components/select/style.mdx
+++ b/src/pages/components/select/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: Select
 description: Select is a type of input that is used in forms, where a user is submitting data and chooses one option from a list.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/select/usage.mdx b/src/pages/components/select/usage.mdx
index d91ef41dd87..45bb0117ab3 100755
--- a/src/pages/components/select/usage.mdx
+++ b/src/pages/components/select/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Select
 description: Select is a type of input that is used in forms, where a user is submitting data and chooses one option from a list.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## General guidance
diff --git a/src/pages/components/slider/accessibility.mdx b/src/pages/components/slider/accessibility.mdx
index 8e044b0f076..701e0461ae9 100644
--- a/src/pages/components/slider/accessibility.mdx
+++ b/src/pages/components/slider/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Slider
 description: Sliders provide a visual indication of adjustable content, where the user can move the handle along a horizontal track to increase or decrease the value.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <PageDescription>
 
diff --git a/src/pages/components/slider/code.mdx b/src/pages/components/slider/code.mdx
index 2490e07a40f..ddafe81398e 100755
--- a/src/pages/components/slider/code.mdx
+++ b/src/pages/components/slider/code.mdx
@@ -1,19 +1,20 @@
 ---
 title: Slider
 description: Sliders provide a visual indication of adjustable content, where the user can move the handle along a horizontal track to increase or decrease the value.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 <ComponentDemo
   links={{
-    React: 'https://react.carbondesignsystem.com/?path=/story/slider--default',
+    React: "https://react.carbondesignsystem.com/?path=/story/slider--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-slider--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-slider--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvslider--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=slider',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvslider--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=slider",
   }}
-  knobs={{ Slider: ['disabled', 'hideTextInput', 'light'] }}>
+  knobs={{ Slider: ["disabled", "hideTextInput", "light"] }}
+>
   {`
   <div className="some-container">
 <Slider
diff --git a/src/pages/components/slider/style.mdx b/src/pages/components/slider/style.mdx
index ba0b0c7cae6..8ca65c6f3ea 100755
--- a/src/pages/components/slider/style.mdx
+++ b/src/pages/components/slider/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: Slider
 description: Sliders provide a visual indication of adjustable content, where the user can move the handle along a horizontal track to increase or decrease the value.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/slider/usage.mdx b/src/pages/components/slider/usage.mdx
index 0105f78d944..6b5a134c44f 100755
--- a/src/pages/components/slider/usage.mdx
+++ b/src/pages/components/slider/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Slider
 description: Sliders provide a visual indication of adjustable content, where the user can move the handle along a horizontal track to increase or decrease the value.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## General guidance
diff --git a/src/pages/components/structured-list/accessibility.mdx b/src/pages/components/structured-list/accessibility.mdx
index a56db7e8ece..5bd35fefe44 100644
--- a/src/pages/components/structured-list/accessibility.mdx
+++ b/src/pages/components/structured-list/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Structured list
 description: Structured lists group content that is similar or related, such as terms and definitions.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <PageDescription>
 
diff --git a/src/pages/components/structured-list/code.mdx b/src/pages/components/structured-list/code.mdx
index 15a9df171f7..d153f25c432 100755
--- a/src/pages/components/structured-list/code.mdx
+++ b/src/pages/components/structured-list/code.mdx
@@ -1,23 +1,24 @@
 ---
 title: Structured list
 description: Structured lists group content that is similar or related, such as terms and definitions.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
-import { CheckmarkFilled16 } from '@carbon/icons-react';
+import { CheckmarkFilled16 } from "@carbon/icons-react";
 
 ## Structured list
 
 <ComponentDemo
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/structuredlist--simple',
+      "https://react.carbondesignsystem.com/?path=/story/structuredlist--simple",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-structured-list--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-structured-list--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvstructuredlist--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=structured-list',
-  }}>
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvstructuredlist--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=structured-list",
+  }}
+>
   {`
 <StructuredListWrapper ariaLabel="Structured list">
   <StructuredListHead>
@@ -70,18 +71,19 @@ import { CheckmarkFilled16 } from '@carbon/icons-react';
   scope={{ CheckmarkFilled16 }}
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/structuredlist--selection',
+      "https://react.carbondesignsystem.com/?path=/story/structuredlist--selection",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-structured-list--with-selection',
+      "https://angular.carbondesignsystem.com/?path=/story/components-structured-list--with-selection",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvstructuredlist--selectable-with-vmodel',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=structured-list',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvstructuredlist--selectable-with-vmodel",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=structured-list",
   }}
   knobs={{
-    StructuredListWrapper: ['border'],
-    StructuredListRow: ['label'],
-    StructuredListCell: ['noWrap'],
-  }}>
+    StructuredListWrapper: ["border"],
+    StructuredListRow: ["label"],
+    StructuredListCell: ["noWrap"],
+  }}
+>
   {`
 <StructuredListWrapper selection ariaLabel="Structured list">
   <StructuredListHead>
diff --git a/src/pages/components/structured-list/style.mdx b/src/pages/components/structured-list/style.mdx
index 683fe0e3659..6661e605ee0 100644
--- a/src/pages/components/structured-list/style.mdx
+++ b/src/pages/components/structured-list/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: Structured list
 description: Structured lists group content that is similar or related, such as terms and definitions.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/structured-list/usage.mdx b/src/pages/components/structured-list/usage.mdx
index e31c0dbd2cd..e6c9f78d5b3 100755
--- a/src/pages/components/structured-list/usage.mdx
+++ b/src/pages/components/structured-list/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Structured list
 description: Structured lists group content that is similar or related, such as terms and definitions.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## General guidance
diff --git a/src/pages/components/tabs/accessibility.mdx b/src/pages/components/tabs/accessibility.mdx
index 3916c16efb0..9145231fcb9 100644
--- a/src/pages/components/tabs/accessibility.mdx
+++ b/src/pages/components/tabs/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Tabs
 description: Tabs are used to quickly navigate between views within the same context.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <PageDescription>
 
diff --git a/src/pages/components/tabs/code.mdx b/src/pages/components/tabs/code.mdx
index 92ab7101416..3199781a7ab 100755
--- a/src/pages/components/tabs/code.mdx
+++ b/src/pages/components/tabs/code.mdx
@@ -1,21 +1,22 @@
 ---
 title: Tabs
 description: Tabs are used to quickly navigate between views within the same context.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Tabs
 
 <ComponentDemo
   links={{
-    React: 'https://react.carbondesignsystem.com/?path=/story/tabs--default',
+    React: "https://react.carbondesignsystem.com/?path=/story/tabs--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-tabs--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-tabs--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvtabs--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=tabs',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvtabs--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=tabs",
   }}
-  knobs={{ Tab: ['disabled', 'selected'] }}>
+  knobs={{ Tab: ["disabled", "selected"] }}
+>
   {`
 <div style={{ width: '50%'}}>
   <Tabs>
diff --git a/src/pages/components/tabs/usage.mdx b/src/pages/components/tabs/usage.mdx
index 70686ab4f62..388d48bff4d 100755
--- a/src/pages/components/tabs/usage.mdx
+++ b/src/pages/components/tabs/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Tabs
 description: Tabs are used to quickly navigate between views within the same context.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## General guidance
diff --git a/src/pages/components/tag/accessibility.mdx b/src/pages/components/tag/accessibility.mdx
index a034973f81a..faf55fb2445 100644
--- a/src/pages/components/tag/accessibility.mdx
+++ b/src/pages/components/tag/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Tag
 description: Tags are used for items that need to be labeled, categorized, or organized using keywords that describe them.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <AnchorLinks>
   <AnchorLink>How it works</AnchorLink>
diff --git a/src/pages/components/tag/code.mdx b/src/pages/components/tag/code.mdx
index 59b39207322..33bc559fd8e 100755
--- a/src/pages/components/tag/code.mdx
+++ b/src/pages/components/tag/code.mdx
@@ -1,21 +1,22 @@
 ---
 title: Tag
 description: Tags are used for items that need to be labeled, categorized, or organized using keywords that describe them.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Tag
 
 <ComponentDemo
   links={{
-    React: 'https://react.carbondesignsystem.com/?path=/story/tag--default',
+    React: "https://react.carbondesignsystem.com/?path=/story/tag--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-tag--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-tag--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvtag--filter',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=tag',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvtag--filter",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=tag",
   }}
-  knobs={{ Tag: ['filter', 'disabled'] }}>
+  knobs={{ Tag: ["filter", "disabled"] }}
+>
   {`
   <>
 <Tag type="red" title="Clear Filter"> Red </Tag>
diff --git a/src/pages/components/tag/style.mdx b/src/pages/components/tag/style.mdx
index 4c50cd2a3ab..eff3b2058ff 100755
--- a/src/pages/components/tag/style.mdx
+++ b/src/pages/components/tag/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: Tag
 description: Tags are used for items that need to be labeled, categorized, or organized using keywords that describe them.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/tag/usage.mdx b/src/pages/components/tag/usage.mdx
index 4f867808c1e..96b085144b9 100755
--- a/src/pages/components/tag/usage.mdx
+++ b/src/pages/components/tag/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Tag
 description: Tags are used for items that need to be labeled, categorized, or organized using keywords that describe them.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## General guidelines
diff --git a/src/pages/components/text-input/accessibility.mdx b/src/pages/components/text-input/accessibility.mdx
index 94d1b2fc17d..054b6bd8b49 100644
--- a/src/pages/components/text-input/accessibility.mdx
+++ b/src/pages/components/text-input/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Text input
 description: Text inputs enable the user to interact with and input content and data. This component can be used for long and short form entries.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <AnchorLinks>
   <AnchorLink>How it works</AnchorLink>
diff --git a/src/pages/components/text-input/code.mdx b/src/pages/components/text-input/code.mdx
index 46f8a220abb..29278c71bd6 100755
--- a/src/pages/components/text-input/code.mdx
+++ b/src/pages/components/text-input/code.mdx
@@ -1,7 +1,7 @@
 ---
 title: Text input
 description: Text inputs enable the user to interact with and input content and data. This component can be used for long and short form entries.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Text input
@@ -9,14 +9,15 @@ tabs: ['Code', 'Usage', 'Style', 'Accessibility']
 <ComponentDemo
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/textinput--default',
+      "https://react.carbondesignsystem.com/?path=/story/textinput--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-input--label',
+      "https://angular.carbondesignsystem.com/?path=/story/components-input--label",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvtextinput--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=text-input',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvtextinput--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=text-input",
   }}
-  knobs={{ TextInput: ['disabled', 'invalid', 'light'] }}>
+  knobs={{ TextInput: ["disabled", "invalid", "light"] }}
+>
   {`
 <FormGroup>
   <TextInput
@@ -35,13 +36,14 @@ tabs: ['Code', 'Usage', 'Style', 'Accessibility']
 <ComponentDemo
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/textinput--toggle-password-visibility',
+      "https://react.carbondesignsystem.com/?path=/story/textinput--toggle-password-visibility",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-input--label',
+      "https://angular.carbondesignsystem.com/?path=/story/components-input--label",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvtextinput--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=text-input',
-  }}>
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvtextinput--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=text-input",
+  }}
+>
   {`
 <FormGroup>
 <TextInput.PasswordInput
@@ -62,16 +64,17 @@ tabs: ['Code', 'Usage', 'Style', 'Accessibility']
 <ComponentDemo
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/textarea--default',
+      "https://react.carbondesignsystem.com/?path=/story/textarea--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-input--textarea',
+      "https://angular.carbondesignsystem.com/?path=/story/components-input--textarea",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvtextarea--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=text-area',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvtextarea--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=text-area",
   }}
   knobs={{
-    TextArea: ['disabled', 'invalid', 'light'],
-  }}>
+    TextArea: ["disabled", "invalid", "light"],
+  }}
+>
   {`
 <FormGroup>
 <TextArea
diff --git a/src/pages/components/text-input/style.mdx b/src/pages/components/text-input/style.mdx
index e6d8a7a91ba..6200729ab40 100755
--- a/src/pages/components/text-input/style.mdx
+++ b/src/pages/components/text-input/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: Text input
 description: Text inputs enable the user to interact with and input content and data. This component can be used for long and short form entries.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/text-input/usage.mdx b/src/pages/components/text-input/usage.mdx
index 6134e30cf1c..beec2560ed5 100755
--- a/src/pages/components/text-input/usage.mdx
+++ b/src/pages/components/text-input/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Text input
 description: Text inputs enable the user to interact with and input content and data. This component can be used for long and short form entries.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 <PageDescription>
diff --git a/src/pages/components/tile/accessibility.mdx b/src/pages/components/tile/accessibility.mdx
index f67c2c9bf77..227e52861c0 100644
--- a/src/pages/components/tile/accessibility.mdx
+++ b/src/pages/components/tile/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Tile
 description: Tiles are a flexible component for displaying a wide variety of content, including informational, getting started, how-to, next steps, and more.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <PageDescription>
 
diff --git a/src/pages/components/tile/code.mdx b/src/pages/components/tile/code.mdx
index bce3e63b7e3..3851918d18c 100755
--- a/src/pages/components/tile/code.mdx
+++ b/src/pages/components/tile/code.mdx
@@ -1,21 +1,22 @@
 ---
 title: Tile
 description: Tiles are a flexible component for displaying a wide variety of content, including informational, getting started, how-to, next steps, and more.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Tile
 
 <ComponentDemo
   links={{
-    React: 'https://react.carbondesignsystem.com/?path=/story/tile--default',
+    React: "https://react.carbondesignsystem.com/?path=/story/tile--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-tiles--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-tiles--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=tile',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvtile--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=tile",
   }}
-  knobs={{ Tile: ['light'] }}>
+  knobs={{ Tile: ["light"] }}
+>
   {`
 <Tile>
   Default tile
@@ -27,14 +28,15 @@ tabs: ['Code', 'Usage', 'Style', 'Accessibility']
 
 <ComponentDemo
   links={{
-    React: 'https://react.carbondesignsystem.com/?path=/story/tile--clickable',
+    React: "https://react.carbondesignsystem.com/?path=/story/tile--clickable",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-tiles--clickable',
+      "https://angular.carbondesignsystem.com/?path=/story/components-tiles--clickable",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--clickable',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=tile',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvtile--clickable",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=tile",
   }}
-  knobs={{ ClickableTile: ['light', 'clicked'] }}>
+  knobs={{ ClickableTile: ["light", "clicked"] }}
+>
   {`
 <ClickableTile
   href="#"
@@ -48,14 +50,15 @@ tabs: ['Code', 'Usage', 'Style', 'Accessibility']
 
 <ComponentDemo
   links={{
-    React: 'https://react.carbondesignsystem.com/?path=/story/tile--radio',
+    React: "https://react.carbondesignsystem.com/?path=/story/tile--radio",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-tiles--selectable',
+      "https://angular.carbondesignsystem.com/?path=/story/components-tiles--selectable",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--selectable',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=tile',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvtile--selectable",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=tile",
   }}
-  knobs={{ RadioTile: ['light'] }}>
+  knobs={{ RadioTile: ["light"] }}
+>
   {`
 <TileGroup
   defaultSelected="default-selected"
@@ -95,14 +98,15 @@ tabs: ['Code', 'Usage', 'Style', 'Accessibility']
 <ComponentDemo
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/tile--multi-select',
+      "https://react.carbondesignsystem.com/?path=/story/tile--multi-select",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-tiles--multi-select',
+      "https://angular.carbondesignsystem.com/?path=/story/components-tiles--multi-select",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--selectable',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=tile',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvtile--selectable",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=tile",
   }}
-  knobs={{ SelectableTile: ['light', 'selected'] }}>
+  knobs={{ SelectableTile: ["light", "selected"] }}
+>
   {`
 <div
   aria-label="selectable tiles"
@@ -143,14 +147,15 @@ tabs: ['Code', 'Usage', 'Style', 'Accessibility']
 
 <ComponentDemo
   links={{
-    React: 'https://react.carbondesignsystem.com/?path=/story/tile--expandable',
+    React: "https://react.carbondesignsystem.com/?path=/story/tile--expandable",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-tiles--expandable',
+      "https://angular.carbondesignsystem.com/?path=/story/components-tiles--expandable",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--expandable',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=tile',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvtile--expandable",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=tile",
   }}
-  knobs={{ ExpandableTile: ['light', 'expanded'] }}>
+  knobs={{ ExpandableTile: ["light", "expanded"] }}
+>
   {`
 <ExpandableTile
   tabIndex={0}
diff --git a/src/pages/components/tile/style.mdx b/src/pages/components/tile/style.mdx
index 7768ec8a8d9..c4744b6b917 100644
--- a/src/pages/components/tile/style.mdx
+++ b/src/pages/components/tile/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: Tile
 description: Tiles are a flexible component for displaying a wide variety of content, including informational, getting started, how-to, next steps, and more.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/tile/usage.mdx b/src/pages/components/tile/usage.mdx
index e577296ab65..e7a886ce836 100755
--- a/src/pages/components/tile/usage.mdx
+++ b/src/pages/components/tile/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Tile
 description: Tiles are a flexible component for displaying a wide variety of content, including informational, getting started, how-to, next steps, and more.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## General guidance
diff --git a/src/pages/components/toggle/accessibility.mdx b/src/pages/components/toggle/accessibility.mdx
index d1c8ec73f86..8364de23fa1 100644
--- a/src/pages/components/toggle/accessibility.mdx
+++ b/src/pages/components/toggle/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Toggle
 description: A toggle is a control that is used to quickly switch between two possible states. They are commonly used for “on/off” switches.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <AnchorLinks>
   <AnchorLink>How it works</AnchorLink>
diff --git a/src/pages/components/toggle/code.mdx b/src/pages/components/toggle/code.mdx
index 602c8e50502..3bed0dc6491 100755
--- a/src/pages/components/toggle/code.mdx
+++ b/src/pages/components/toggle/code.mdx
@@ -1,20 +1,21 @@
 ---
 title: Toggle
 description: A toggle is a control that is used to quickly switch between two possible states. They are commonly used for “on/off” switches.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Toggle
 
 <ComponentDemo
   links={{
-    React: 'https://react.carbondesignsystem.com/?path=/story/toggle--toggled',
+    React: "https://react.carbondesignsystem.com/?path=/story/toggle--toggled",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-toggle--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-toggle--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvtoggle--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=toggle',
-  }}>
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvtoggle--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=toggle",
+  }}
+>
   {`
 <Toggle
   aria-label="toggle button"
@@ -30,13 +31,14 @@ tabs: ['Code', 'Usage', 'Style', 'Accessibility']
 <ComponentDemo
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/togglesmall--toggled',
+      "https://react.carbondesignsystem.com/?path=/story/togglesmall--toggled",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-toggle--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-toggle--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvtoggle--default',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=toggle',
-  }}>
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvtoggle--default",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=toggle",
+  }}
+>
   {`
 <ToggleSmall
   aria-label="toggle button"
diff --git a/src/pages/components/toggle/style.mdx b/src/pages/components/toggle/style.mdx
index 9eda51d29a0..ee5debc2b33 100755
--- a/src/pages/components/toggle/style.mdx
+++ b/src/pages/components/toggle/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: Toggle
 description: A toggle is a control that is used to quickly switch between two possible states. They are commonly used for “on/off” switches.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/toggle/usage.mdx b/src/pages/components/toggle/usage.mdx
index 24d207dbfc9..c296b7a79f4 100755
--- a/src/pages/components/toggle/usage.mdx
+++ b/src/pages/components/toggle/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Toggle
 description: A toggle is a control that is used to quickly switch between two possible states. They are commonly used for “on/off” switches.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## General guidance
diff --git a/src/pages/components/tooltip/accessibility.mdx b/src/pages/components/tooltip/accessibility.mdx
index 0905de1b6f0..7c079fc0ba9 100644
--- a/src/pages/components/tooltip/accessibility.mdx
+++ b/src/pages/components/tooltip/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Tooltip
 description: Tooltips provide additional information upon hover or focus. The information should be contextual, useful, and nonessential information.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 import {
@@ -13,7 +13,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <PageDescription>
 
diff --git a/src/pages/components/tooltip/code.mdx b/src/pages/components/tooltip/code.mdx
index 0640139c98b..ec9af8a2a77 100755
--- a/src/pages/components/tooltip/code.mdx
+++ b/src/pages/components/tooltip/code.mdx
@@ -1,23 +1,24 @@
 ---
 title: Tooltip
 description: Tooltips provide additional information upon hover or focus. The information should be contextual, useful, and nonessential information.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
-import { Filter16 } from '@carbon/icons-react';
+import { Filter16 } from "@carbon/icons-react";
 
 ## Tooltip
 
 <ComponentDemo
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/tooltip--default-bottom',
+      "https://react.carbondesignsystem.com/?path=/story/tooltip--default-bottom",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-tooltip--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-tooltip--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvtooltip--default-interactive-tootlip',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=tooltip',
-  }}>
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvtooltip--default-interactive-tootlip",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=tooltip",
+  }}
+>
   {`
   <Tooltip
     direction="bottom"
@@ -43,14 +44,15 @@ import { Filter16 } from '@carbon/icons-react';
   scope={{ Filter16 }}
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/tooltipicon--default',
+      "https://react.carbondesignsystem.com/?path=/story/tooltipicon--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-tooltip-icon--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-tooltip-icon--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvtooltip--default-interactive-tootlip',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=tooltip',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvtooltip--default-interactive-tootlip",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=tooltip",
   }}
-  knobs={{ TooltipIcon: ['direction', 'align'] }}>
+  knobs={{ TooltipIcon: ["direction", "align"] }}
+>
   {`
   <TooltipIcon
     tooltipText="Filter"
@@ -65,14 +67,15 @@ import { Filter16 } from '@carbon/icons-react';
 <ComponentDemo
   links={{
     React:
-      'https://react.carbondesignsystem.com/?path=/story/tooltipdefinition--default',
+      "https://react.carbondesignsystem.com/?path=/story/tooltipdefinition--default",
     Angular:
-      'https://angular.carbondesignsystem.com/?path=/story/components-tooltip-definition--basic',
+      "https://angular.carbondesignsystem.com/?path=/story/components-tooltip-definition--basic",
     Vue:
-      'http://vue.carbondesignsystem.com/?path=/story/components-cvtooltip--minimal-definition-tootlip',
-    Vanilla: 'https://the-carbon-components.netlify.com/?nav=tooltip',
+      "http://vue.carbondesignsystem.com/?path=/story/components-cvtooltip--minimal-definition-tootlip",
+    Vanilla: "https://the-carbon-components.netlify.com/?nav=tooltip",
   }}
-  knobs={{ TooltipDefinition: ['direction', 'align'] }}>
+  knobs={{ TooltipDefinition: ["direction", "align"] }}
+>
   {`
   <TooltipDefinition
     tooltipText="Brief description of the dotted, underlined word above."
diff --git a/src/pages/components/tooltip/style.mdx b/src/pages/components/tooltip/style.mdx
index 0dfdc0a0e39..81a75f63324 100755
--- a/src/pages/components/tooltip/style.mdx
+++ b/src/pages/components/tooltip/style.mdx
@@ -1,7 +1,7 @@
 ---
 title: Tooltip
 description: Tooltips provide additional information upon hover or focus. The information should be contextual, useful, and nonessential information.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## Color
diff --git a/src/pages/components/tooltip/usage.mdx b/src/pages/components/tooltip/usage.mdx
index 1daf27aff54..7c8ccf75a16 100755
--- a/src/pages/components/tooltip/usage.mdx
+++ b/src/pages/components/tooltip/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Tooltip
 description: Tooltips provide additional information upon hover or focus. The information should be contextual, useful, and nonessential information.
-tabs: ['Code', 'Usage', 'Style', 'Accessibility']
+tabs: ["Code", "Usage", "Style", "Accessibility"]
 ---
 
 ## General guidance
diff --git a/src/pages/data-visualization/basic-charts/index.mdx b/src/pages/data-visualization/basic-charts/index.mdx
index f7840a26477..1911b145c0e 100755
--- a/src/pages/data-visualization/basic-charts/index.mdx
+++ b/src/pages/data-visualization/basic-charts/index.mdx
@@ -9,7 +9,7 @@ Basic charts offer a way to visualize data sets in an intuitive, easy to underst
 
 </PageDescription>
 
-import '@carbon/charts/styles.css';
+import "@carbon/charts/styles.css";
 
 import {
   SimpleBarChart,
@@ -19,7 +19,7 @@ import {
   DonutChart,
   LineChart,
   ScatterChart,
-} from '@carbon/charts-react';
+} from "@carbon/charts-react";
 
 import {
   addHeightToOptions,
@@ -64,7 +64,7 @@ import {
   scatterTimeSeriesData,
   scatterOptions,
   scatterData,
-} from '../../../data/charts/index';
+} from "../../../data/charts/index";
 
 <AnchorLinks>
 
diff --git a/src/pages/data-visualization/chart-types/index.mdx b/src/pages/data-visualization/chart-types/index.mdx
index ac18ef89ad6..54ffc1d7ce5 100644
--- a/src/pages/data-visualization/chart-types/index.mdx
+++ b/src/pages/data-visualization/chart-types/index.mdx
@@ -3,7 +3,7 @@ title: Chart types
 description: Overview of all chart types available.
 ---
 
-import OverviewCard from 'components/OverviewCard';
+import OverviewCard from "components/OverviewCard";
 
 <PageDescription>
 
diff --git a/src/pages/data-visualization/color-palettes/index.mdx b/src/pages/data-visualization/color-palettes/index.mdx
index 19c82914c56..99c0b3444c7 100644
--- a/src/pages/data-visualization/color-palettes/index.mdx
+++ b/src/pages/data-visualization/color-palettes/index.mdx
@@ -31,7 +31,8 @@ The color palette for data visualizations is a select subset of the IBM Design L
     <ResourceCard
       subTitle="Data visualization color palettes (IBM internal link)"
       href="https://ibm.box.com/s/1rvfetsgovxoj4660suz5sa2tgqizlvy"
-      actionIcon="download">
+      actionIcon="download"
+    >
       <MdxIcon name="sketch" />
     </ResourceCard>
   </Column>
diff --git a/src/pages/data-visualization/data-visualization.scss b/src/pages/data-visualization/data-visualization.scss
index 01bb241208b..9d7b5415384 100644
--- a/src/pages/data-visualization/data-visualization.scss
+++ b/src/pages/data-visualization/data-visualization.scss
@@ -2,11 +2,11 @@ div.chart-holder {
   background: $carbon--white-0;
   padding: rem(30px);
 
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     width: 75% !important;
   }
 
-  @include carbon--breakpoint('lg') {
+  @include carbon--breakpoint("lg") {
     width: 66.667% !important;
   }
 }
diff --git a/src/pages/data-visualization/getting-started/angular.mdx b/src/pages/data-visualization/getting-started/angular.mdx
index ad9dc5d73b9..bc5cdab9ee6 100644
--- a/src/pages/data-visualization/getting-started/angular.mdx
+++ b/src/pages/data-visualization/getting-started/angular.mdx
@@ -1,10 +1,10 @@
 ---
 title: Get started
 description: Get started with Carbon Charts in Angular
-tabs: ['Vanilla', 'React', 'Angular', 'Vue', 'Other frameworks']
+tabs: ["Vanilla", "React", "Angular", "Vue", "Other frameworks"]
 ---
 
-import DataOptionsSection from './shared-data-options-section';
+import DataOptionsSection from "./shared-data-options-section";
 
 <InlineNotification>
 
@@ -28,7 +28,8 @@ import DataOptionsSection from './shared-data-options-section';
   <Column colMd={4} colLg={4} noGutterSm>
     <ResourceCard
       subTitle="Carbon Charts Angular"
-      href="https://github.com/carbon-design-system/carbon-charts/tree/master/packages/angular">
+      href="https://github.com/carbon-design-system/carbon-charts/tree/master/packages/angular"
+    >
       <MdxIcon name="github" />
     </ResourceCard>
   </Column>
@@ -57,12 +58,12 @@ $ npm install --save @carbon/charts @carbon/charts-angular d3
 To start using the `BarChart` component, try the example below:
 
 ```ts path=app.module.ts
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
 
-import { ChartsModule } from '@carbon/charts-angular';
+import { ChartsModule } from "@carbon/charts-angular";
 
-import { AppComponent } from './app.component';
+import { AppComponent } from "./app.component";
 
 @NgModule({
   imports: [BrowserModule, ChartsModule],
@@ -82,12 +83,12 @@ export class AppModule {}
 ```
 
 ```ts path=app.component.ts
-import { Component } from '@angular/core';
+import { Component } from "@angular/core";
 
 @Component({
-  selector: 'my-app',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  selector: "my-app",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.css"],
 })
 export class AppComponent {
   stackedBarData = {
diff --git a/src/pages/data-visualization/getting-started/other-frameworks.mdx b/src/pages/data-visualization/getting-started/other-frameworks.mdx
index f06c5a8cd08..ee386653e71 100755
--- a/src/pages/data-visualization/getting-started/other-frameworks.mdx
+++ b/src/pages/data-visualization/getting-started/other-frameworks.mdx
@@ -1,7 +1,7 @@
 ---
 title: Get started
 description: The Carbon Design System supports vanilla JS, React and Angular as core parts of the product. But you can still build components even if you're using a different framework.
-tabs: ['Vanilla', 'React', 'Angular', 'Vue', 'Other frameworks']
+tabs: ["Vanilla", "React", "Angular", "Vue", "Other frameworks"]
 ---
 
 <InlineNotification>
@@ -24,7 +24,8 @@ tabs: ['Vanilla', 'React', 'Angular', 'Vue', 'Other frameworks']
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
     subTitle="Download WIP charting design specifications (IBM internal link)"
-    disabled>
+    disabled
+  >
     <MdxIcon name="sketch" />
   </ResourceCard>
 </Column>
@@ -33,7 +34,8 @@ tabs: ['Vanilla', 'React', 'Angular', 'Vue', 'Other frameworks']
   <ResourceCard
     subTitle="Data visualization color palettes (IBM internal link)"
     href="https://ibm.box.com/s/3mt8fshtgy70r7rhxjhfo3gbdt0n3x5y"
-    actionIcon="download">
+    actionIcon="download"
+  >
     <MdxIcon name="sketch" />
   </ResourceCard>
 </Column>
diff --git a/src/pages/data-visualization/getting-started/react.mdx b/src/pages/data-visualization/getting-started/react.mdx
index cdf543f619c..93913c72977 100755
--- a/src/pages/data-visualization/getting-started/react.mdx
+++ b/src/pages/data-visualization/getting-started/react.mdx
@@ -1,10 +1,10 @@
 ---
 title: Get started
 description: Get started with Carbon Charts in React
-tabs: ['Vanilla', 'React', 'Angular', 'Vue', 'Other frameworks']
+tabs: ["Vanilla", "React", "Angular", "Vue", "Other frameworks"]
 ---
 
-import DataOptionsSection from './shared-data-options-section';
+import DataOptionsSection from "./shared-data-options-section";
 
 <InlineNotification>
 
@@ -29,7 +29,8 @@ import DataOptionsSection from './shared-data-options-section';
 <Column colMd={4} colLg={4} noGutterSm>
   <ResourceCard
     subTitle="Try Carbon Charts React components with CodeSandbox."
-    href="https://codesandbox.io/s/carbon-charts-react-isck2">
+    href="https://codesandbox.io/s/carbon-charts-react-isck2"
+  >
     <MdxIcon name="codesandbox" />
   </ResourceCard>
 </Column>
@@ -67,10 +68,10 @@ $ npm install --save @carbon/charts @carbon/charts-react d3
 To start using the `StackedBarChart` component, try the example below:
 
 ```jsx
-import React from 'react';
+import React from "react";
 
-import { StackedBarChart } from '@carbon/charts-react';
-import '@carbon/charts/styles.css';
+import { StackedBarChart } from "@carbon/charts-react";
+import "@carbon/charts/styles.css";
 // Or
 // import '@carbon/charts/styles/styles.scss';
 
diff --git a/src/pages/data-visualization/getting-started/shared-data-options-section.mdx b/src/pages/data-visualization/getting-started/shared-data-options-section.mdx
index 6bfa145b146..9ac7d070b5d 100644
--- a/src/pages/data-visualization/getting-started/shared-data-options-section.mdx
+++ b/src/pages/data-visualization/getting-started/shared-data-options-section.mdx
@@ -10,36 +10,36 @@ Below are sample data and options that can be used in a stacked bar chart:
 
 ```js
 const stackedBarData = {
-  labels: ['Quantity', 'Leads', 'Sold', 'Restocking', 'Misc'],
+  labels: ["Quantity", "Leads", "Sold", "Restocking", "Misc"],
   datasets: [
     {
-      label: 'Dataset 1',
+      label: "Dataset 1",
       data: [65000, 29123, 35213, 51213, 16932],
     },
     {
-      label: 'Dataset 2',
+      label: "Dataset 2",
       data: [32432, 21312, 56456, 21312, 34234],
     },
     {
-      label: 'Dataset 3',
+      label: "Dataset 3",
       data: [12312, 23232, 34232, 12312, 34234],
     },
   ],
 };
 
 const stackedBarOptions = {
-  title: 'Stacked bar (discrete)',
+  title: "Stacked bar (discrete)",
   axes: {
     left: {
       primary: true,
       stacked: true,
     },
     bottom: {
-      scaleType: 'labels',
+      scaleType: "labels",
       secondary: true,
     },
   },
-  height: '400px',
+  height: "400px",
 };
 ```
 
diff --git a/src/pages/data-visualization/getting-started/vanilla.mdx b/src/pages/data-visualization/getting-started/vanilla.mdx
index 46fc132edd9..dea48798a31 100755
--- a/src/pages/data-visualization/getting-started/vanilla.mdx
+++ b/src/pages/data-visualization/getting-started/vanilla.mdx
@@ -1,10 +1,10 @@
 ---
 title: Get started
 description: Get started with Carbon Charts in Vanilla
-tabs: ['Vanilla', 'React', 'Angular', 'Vue', 'Other frameworks']
+tabs: ["Vanilla", "React", "Angular", "Vue", "Other frameworks"]
 ---
 
-import DataOptionsSection from './shared-data-options-section';
+import DataOptionsSection from "./shared-data-options-section";
 
 <PageDescription>
 
@@ -42,7 +42,8 @@ Carbon charts help you tell accurate and convincing stories around data with bea
 <Column colMd={4} colLg={4} noGutterSm>
   <ResourceCard
     subTitle="Try Carbon Charts Vanilla components with CodeSandbox."
-    href="https://codesandbox.io/s/carbon-charts-vanilla-m9r77">
+    href="https://codesandbox.io/s/carbon-charts-vanilla-m9r77"
+  >
     <MdxIcon name="codesandbox" />
   </ResourceCard>
 </Column>
@@ -50,7 +51,8 @@ Carbon charts help you tell accurate and convincing stories around data with bea
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
     subTitle="Download WIP charting design specifications (Coming soon)"
-    disabled>
+    disabled
+  >
     <MdxIcon name="sketch" />
   </ResourceCard>
 </Column>
@@ -94,11 +96,11 @@ $ npm install --save @carbon/charts d3
 ```
 
 ```js path=index.js
-import '@carbon/charts/styles.css';
-import { StackedBarChart } from '@carbon/charts';
+import "@carbon/charts/styles.css";
+import { StackedBarChart } from "@carbon/charts";
 
 // grab chart holder DOM element
-const chartHolder = document.getElementById('my-bar-chart');
+const chartHolder = document.getElementById("my-bar-chart");
 
 // initialize the chart
 new StackedBarChart(chartHolder, {
@@ -121,7 +123,7 @@ new StackedBarChart(chartHolder, {
     <script src="https://unpkg.com/@carbon/charts/bundle.js"></script>
     <script>
       // grab chart holder DOM element
-      const chartHolder = document.getElementById('my-bar-chart');
+      const chartHolder = document.getElementById("my-bar-chart");
 
       const stackedBarData = {
         // ...see next section
diff --git a/src/pages/data-visualization/getting-started/vue.mdx b/src/pages/data-visualization/getting-started/vue.mdx
index 36d7a0026dc..85820d9995e 100644
--- a/src/pages/data-visualization/getting-started/vue.mdx
+++ b/src/pages/data-visualization/getting-started/vue.mdx
@@ -1,10 +1,10 @@
 ---
 title: Get started
 description: Get started with Carbon Charts in Vue
-tabs: ['Vanilla', 'React', 'Angular', 'Vue', 'Other frameworks']
+tabs: ["Vanilla", "React", "Angular", "Vue", "Other frameworks"]
 ---
 
-import DataOptionsSection from './shared-data-options-section';
+import DataOptionsSection from "./shared-data-options-section";
 
 <InlineNotification>
 
@@ -29,7 +29,8 @@ import DataOptionsSection from './shared-data-options-section';
 <Column colMd={4} colLg={4} noGutterSm>
   <ResourceCard
     subTitle="Try Carbon Charts Vue components with CodeSandbox."
-    href="https://codesandbox.io/s/carbon-charts-vue-gg15t">
+    href="https://codesandbox.io/s/carbon-charts-vue-gg15t"
+  >
     <MdxIcon name="codesandbox" />
   </ResourceCard>
 </Column>
@@ -68,14 +69,14 @@ To start using the `StackedBarChart` component, try the example below:
 
 ```html path=hello-world.vue
 <script>
-  import Vue from 'vue';
-  import '@carbon/charts/styles.css';
-  import chartsVue from '@carbon/charts-vue';
+  import Vue from "vue";
+  import "@carbon/charts/styles.css";
+  import chartsVue from "@carbon/charts-vue";
 
   Vue.use(chartsVue);
 
   export default {
-    name: 'HelloWorld',
+    name: "HelloWorld",
     components: {},
     data() {
       return {
diff --git a/src/pages/get-started/design/sketch.mdx b/src/pages/get-started/design/sketch.mdx
index 7d472a4afbd..7ef4eef2e3d 100755
--- a/src/pages/get-started/design/sketch.mdx
+++ b/src/pages/get-started/design/sketch.mdx
@@ -1,7 +1,7 @@
 ---
 title: Design
 description: Rapidly build beautiful and accessible experiences. The Carbon kit contains all resources you need to get started.
-tabs: ['Sketch', 'Axure', 'Adobe XD']
+tabs: ["Sketch", "Axure", "Adobe XD"]
 ---
 
 <PageDescription>
@@ -32,33 +32,37 @@ There are [four Carbon themes](/guidelines/color/overview#themes), two light (Wh
 <Row className="resource-card-group">
   <Column colMd={4} colLg={4} noGutterSm>
     <ResourceCard
-      onClick={() => fathom('trackGoal', 'P0OEN9TS', 0)}
+      onClick={() => fathom("trackGoal", "P0OEN9TS", 0)}
       subTitle="Get the White theme"
-      href="sketch://add-library/cloud/JaVzz">
+      href="sketch://add-library/cloud/JaVzz"
+    >
       <MdxIcon name="sketch" />
     </ResourceCard>
   </Column>
   <Column colMd={4} colLg={4} noGutterSm>
     <ResourceCard
-      onClick={() => fathom('trackGoal', 'T7D1HJ3L', 0)}
+      onClick={() => fathom("trackGoal", "T7D1HJ3L", 0)}
       subTitle="Get the Gray 10 theme"
-      href="sketch://add-library/cloud/Onwv2">
+      href="sketch://add-library/cloud/Onwv2"
+    >
       <MdxIcon name="sketch" />
     </ResourceCard>
   </Column>
   <Column colMd={4} colLg={4} noGutterSm>
     <ResourceCard
-      onClick={() => fathom('trackGoal', 'LYFJTPDE', 0)}
+      onClick={() => fathom("trackGoal", "LYFJTPDE", 0)}
       subTitle="Get the Gray 90 theme"
-      href="sketch://add-library/cloud/eo37p">
+      href="sketch://add-library/cloud/eo37p"
+    >
       <MdxIcon name="sketch" />
     </ResourceCard>
   </Column>
   <Column colMd={4} colLg={4} noGutterSm>
     <ResourceCard
-      onClick={() => fathom('trackGoal', '3XH0SIBJ', 0)}
+      onClick={() => fathom("trackGoal", "3XH0SIBJ", 0)}
       subTitle="Get the Gray 100 theme"
-      href="sketch://add-library/cloud/d13Ll">
+      href="sketch://add-library/cloud/d13Ll"
+    >
       <MdxIcon name="sketch" />
     </ResourceCard>
   </Column>
@@ -75,21 +79,24 @@ Additional color collections live in the IBM Design Language library. Icons live
   <Column colMd={4} colLg={4} noGutterSm>
     <ResourceCard
       subTitle="Get the IBM Design Language"
-      href="sketch://add-library/cloud/nwqmk">
+      href="sketch://add-library/cloud/nwqmk"
+    >
       <MdxIcon name="sketch" />
     </ResourceCard>
   </Column>
   <Column colMd={4} colLg={4} noGutterSm>
     <ResourceCard
       subTitle="Get the IBM Icons (16px, 20px)"
-      href="sketch://add-library/cloud/KW2yr">
+      href="sketch://add-library/cloud/KW2yr"
+    >
       <MdxIcon name="sketch" />
     </ResourceCard>
   </Column>
   <Column colMd={4} colLg={4} noGutterSm>
     <ResourceCard
       subTitle="Get the IBM Icons (24px, 32px)"
-      href="sketch://add-library/cloud/2bwkM">
+      href="sketch://add-library/cloud/2bwkM"
+    >
       <MdxIcon name="sketch" />
     </ResourceCard>
   </Column>
@@ -106,14 +113,16 @@ Visit the [Sketch library](https://sketch.cloud/s/ngV7z) page and choose `Downlo
   <Column colLg={4} colMd={4} noGutterSm>
     <ResourceCard
       subTitle="Download the IBM Grid template"
-      href="https://sketch.cloud/s/ngV7z">
+      href="https://sketch.cloud/s/ngV7z"
+    >
       <MdxIcon name="sketch" />
     </ResourceCard>
   </Column>
   <Column colLg={4} colMd={4} noGutterSm>
     <ResourceCard
       subTitle="Download the UI Shell template"
-      href="https://sketch.cloud/s/EjVmA">
+      href="https://sketch.cloud/s/EjVmA"
+    >
       <MdxIcon name="sketch" />
     </ResourceCard>
   </Column>
diff --git a/src/pages/get-started/develop/angular.mdx b/src/pages/get-started/develop/angular.mdx
index 8948d49a157..3f4021ce4ef 100644
--- a/src/pages/get-started/develop/angular.mdx
+++ b/src/pages/get-started/develop/angular.mdx
@@ -12,7 +12,7 @@ The library provides front-end developers & engineers a collection of reusable A
 
 <InlineNotification>
 
-The Angular library is maintained by members of the Carbon community. For support, contact the [Carbon Angular team](https://github.com/IBM/carbon-components-angular/issues/new). 
+The Angular library is maintained by members of the Carbon community. For support, contact the [Carbon Angular team](https://github.com/IBM/carbon-components-angular/issues/new).
 
 </InlineNotification>
 
diff --git a/src/pages/guidelines/2x-grid/basics.mdx b/src/pages/guidelines/2x-grid/basics.mdx
index cb53636267f..b351b434b6f 100644
--- a/src/pages/guidelines/2x-grid/basics.mdx
+++ b/src/pages/guidelines/2x-grid/basics.mdx
@@ -1,7 +1,7 @@
 ---
 title: 2x Grid
 description: The grid is the framework for all the visual elements and typography at IBM. It’s fundamental to everything we design.
-tabs: ['Basics', 'Implementation']
+tabs: ["Basics", "Implementation"]
 ---
 
 <PageDescription>
diff --git a/src/pages/guidelines/2x-grid/implementation.mdx b/src/pages/guidelines/2x-grid/implementation.mdx
index fe333ca3682..65fae1c710a 100644
--- a/src/pages/guidelines/2x-grid/implementation.mdx
+++ b/src/pages/guidelines/2x-grid/implementation.mdx
@@ -1,7 +1,7 @@
 ---
 title: 2x Grid
 description: The grid is the framework for all the visual elements and typography at IBM. It’s fundamental to everything we design.
-tabs: ['Basics', 'Implementation']
+tabs: ["Basics", "Implementation"]
 ---
 
 <AnchorLinks>
@@ -48,10 +48,10 @@ You can include the grid in one of two ways:
 
 ```scss
 // If you're including all the styles for Carbon
-@import 'carbon-components/scss/globals/scss/styles.scss';
+@import "carbon-components/scss/globals/scss/styles.scss";
 
 // If you're wanting to import the grid
-@import 'carbon-components/scss/globals/grid/grid';
+@import "carbon-components/scss/globals/grid/grid";
 ```
 
 <br />
@@ -64,10 +64,10 @@ $feature-flags: (
 );
 
 // If you're including all the styles for Carbon
-@import 'carbon-components/scss/globals/scss/styles.scss';
+@import "carbon-components/scss/globals/scss/styles.scss";
 
 // If you want to import the grid
-@import 'carbon-components/scss/globals/grid/grid';
+@import "carbon-components/scss/globals/grid/grid";
 ```
 
 <InlineNotification>
@@ -97,7 +97,7 @@ yarn add @carbon/grid
 You can then include the 16 column grid by doing the following in your Sass files:
 
 ```scss
-@import '@carbon/grid/scss/grid';
+@import "@carbon/grid/scss/grid";
 ```
 
 ## How it works
@@ -691,7 +691,7 @@ Unless you're using the Wide grid mode exclusively, mixing and matching is going
 ![Mixed use](images/Mixed_use_revised.png)
 
 <Caption>
-  1. Condensed grid mode <br /> 2. Wide grid mode{' '}
+  1. Condensed grid mode <br /> 2. Wide grid mode{" "}
 </Caption>
 
 <br />
@@ -713,7 +713,7 @@ Unless you're using the Wide grid mode exclusively, mixing and matching is going
 ![Mixed use 2](images/Mixed_use_2.png)
 
 <Caption>
-  1. Condensed grid mode <br /> 2. Wide grid mode{' '}
+  1. Condensed grid mode <br /> 2. Wide grid mode{" "}
 </Caption>
 
 <br />
diff --git a/src/pages/guidelines/accessibility/color.mdx b/src/pages/guidelines/accessibility/color.mdx
index 547298ec77f..13c432c8d91 100755
--- a/src/pages/guidelines/accessibility/color.mdx
+++ b/src/pages/guidelines/accessibility/color.mdx
@@ -2,7 +2,7 @@
 label: IBM firmly believes that web and software experiences should be accessible for everyone, regardless of abilities or impairments.
 title: Accessibility
 description: IBM firmly believes that web and software experiences should be accessible for everyone. Carbon is committed to following best practices when it comes to accessibility.
-tabs: ['Overview', 'Color', 'Keyboard', 'Developers']
+tabs: ["Overview", "Color", "Keyboard", "Developers"]
 ---
 
 <AnchorLinks>
diff --git a/src/pages/guidelines/accessibility/developers.mdx b/src/pages/guidelines/accessibility/developers.mdx
index 393ee55a238..772a5a51777 100755
--- a/src/pages/guidelines/accessibility/developers.mdx
+++ b/src/pages/guidelines/accessibility/developers.mdx
@@ -2,7 +2,7 @@
 label: IBM firmly believes that web and software experiences should be accessible for everyone, regardless of abilities or impairments.
 title: Accessibility
 description: IBM firmly believes that web and software experiences should be accessible for everyone. Carbon is committed to following best practices when it comes to accessibility.
-tabs: ['Overview', 'Color', 'Keyboard', 'Developers']
+tabs: ["Overview", "Color", "Keyboard", "Developers"]
 ---
 
 <AnchorLinks>
@@ -176,7 +176,7 @@ Don't rely too much on JavaScript to generate HTML and CSS. Follow the "Unobtrus
 Double up mouse-specific events with other events for keyboard-only users.
 
 ```javascript
-const foo = document.querySelector('.foo-class');
+const foo = document.querySelector(".foo-class");
 
 foo.onmouseover = someFunction();
 
diff --git a/src/pages/guidelines/accessibility/keyboard.mdx b/src/pages/guidelines/accessibility/keyboard.mdx
index 0328cdbaa18..c0250a2e211 100755
--- a/src/pages/guidelines/accessibility/keyboard.mdx
+++ b/src/pages/guidelines/accessibility/keyboard.mdx
@@ -2,7 +2,7 @@
 label: IBM firmly believes that web and software experiences should be accessible for everyone, regardless of abilities or impairments.
 title: Accessibility
 description: IBM firmly believes that web and software experiences should be accessible for everyone. Carbon is committed to following best practices when it comes to accessibility.
-tabs: ['Overview', 'Color', 'Keyboard', 'Developers']
+tabs: ["Overview", "Color", "Keyboard", "Developers"]
 ---
 
 ## Keyboard accessibility
diff --git a/src/pages/guidelines/accessibility/overview.mdx b/src/pages/guidelines/accessibility/overview.mdx
index efa39e286c6..2146054234b 100755
--- a/src/pages/guidelines/accessibility/overview.mdx
+++ b/src/pages/guidelines/accessibility/overview.mdx
@@ -2,7 +2,7 @@
 label: IBM firmly believes that web and software experiences should be accessible for everyone, regardless of abilities or impairments.
 title: Accessibility
 description: IBM firmly believes that web and software experiences should be accessible for everyone. Carbon is committed to following best practices when it comes to accessibility.
-tabs: ['Overview', 'Color', 'Keyboard', 'Developers']
+tabs: ["Overview", "Color", "Keyboard", "Developers"]
 ---
 
 <PageDescription>
diff --git a/src/pages/guidelines/color/overview.mdx b/src/pages/guidelines/color/overview.mdx
index 7c289d62787..d2f87bd2fe9 100755
--- a/src/pages/guidelines/color/overview.mdx
+++ b/src/pages/guidelines/color/overview.mdx
@@ -1,11 +1,11 @@
 ---
 title: Color
 description: Maintaining consistent and engaging digital interfaces throughout IBM, whether applications or experiences, demands extended guidance around color usage.
-tabs: ['Overview', 'Usage']
+tabs: ["Overview", "Usage"]
 ---
 
-import ColorBlock from 'components/ColorBlock';
-import ColorGrid from 'components/ColorGrid';
+import ColorBlock from "components/ColorBlock";
+import ColorGrid from "components/ColorGrid";
 
 <PageDescription>
 
diff --git a/src/pages/guidelines/color/usage.mdx b/src/pages/guidelines/color/usage.mdx
index 3a23ebd4dbb..8fc38bf7fdf 100755
--- a/src/pages/guidelines/color/usage.mdx
+++ b/src/pages/guidelines/color/usage.mdx
@@ -1,10 +1,10 @@
 ---
 title: Color
 description: Maintaining consistent and engaging digital interfaces throughout IBM, whether applications or experiences, demands extended guidance around color usage.
-tabs: ['Overview', 'Usage']
+tabs: ["Overview", "Usage"]
 ---
 
-import ColorTokenTable from 'components/ColorTokenTable';
+import ColorTokenTable from "components/ColorTokenTable";
 
 ## Tokens by theme
 
diff --git a/src/pages/guidelines/content/action-labels.mdx b/src/pages/guidelines/content/action-labels.mdx
index 15064190854..9f3905d7609 100755
--- a/src/pages/guidelines/content/action-labels.mdx
+++ b/src/pages/guidelines/content/action-labels.mdx
@@ -3,10 +3,10 @@ label: Content design can make or break an online experience. Always strive for
   writing that is clear, concise, and on-brand.
 title: Content
 description: Content design can make or break an online experience. Always strive for writing that is clear, concise, and on-brand.
-tabs: ['General', 'Guidance', 'Action labels']
+tabs: ["General", "Guidance", "Action labels"]
 ---
 
-import GlossaryComponent from 'components/GlossaryComponent';
+import GlossaryComponent from "components/GlossaryComponent";
 
 <PageDescription>
 
diff --git a/src/pages/guidelines/content/general.mdx b/src/pages/guidelines/content/general.mdx
index 380c5d6a487..e7227f6b26b 100755
--- a/src/pages/guidelines/content/general.mdx
+++ b/src/pages/guidelines/content/general.mdx
@@ -2,7 +2,7 @@
 label: Content design can make or break an online experience. Always strive for writing that is clear, concise, and on-brand.
 title: Content
 description: Content design can make or break an online experience. Always strive for writing that is clear, concise, and on-brand.
-tabs: ['General', 'Guidance', 'Action labels']
+tabs: ["General", "Guidance", "Action labels"]
 ---
 
 <PageDescription>
diff --git a/src/pages/guidelines/content/guidance.mdx b/src/pages/guidelines/content/guidance.mdx
index 03a252f1da5..3730979764f 100755
--- a/src/pages/guidelines/content/guidance.mdx
+++ b/src/pages/guidelines/content/guidance.mdx
@@ -1,7 +1,7 @@
 ---
 title: Content
 description: Inconsistencies in grammar and style interrupt concentration. Help users focus on your product by following these guidelines and applying them consistently.
-tabs: ['General', 'Guidance', 'Action labels']
+tabs: ["General", "Guidance", "Action labels"]
 ---
 
 <PageDescription>
diff --git a/src/pages/guidelines/icons/contribute.mdx b/src/pages/guidelines/icons/contribute.mdx
index c9b02bc5680..e49b0be2382 100644
--- a/src/pages/guidelines/icons/contribute.mdx
+++ b/src/pages/guidelines/icons/contribute.mdx
@@ -2,7 +2,7 @@
 label: Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.
 title: Icons
 description: Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.
-tabs: ['Library', 'Usage', 'Contribute']
+tabs: ["Library", "Usage", "Contribute"]
 ---
 
 <AnchorLinks>
diff --git a/src/pages/guidelines/icons/usage.mdx b/src/pages/guidelines/icons/usage.mdx
index b888a4b2f5d..94c3f635d32 100644
--- a/src/pages/guidelines/icons/usage.mdx
+++ b/src/pages/guidelines/icons/usage.mdx
@@ -2,7 +2,7 @@
 label: Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.
 title: Icons
 description: Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.
-tabs: ['Library', 'Usage', 'Contribute']
+tabs: ["Library", "Usage", "Contribute"]
 ---
 
 <PageDescription>
diff --git a/src/pages/guidelines/motion/basics.mdx b/src/pages/guidelines/motion/basics.mdx
index f664d8792d6..7614c7cd2ed 100644
--- a/src/pages/guidelines/motion/basics.mdx
+++ b/src/pages/guidelines/motion/basics.mdx
@@ -1,10 +1,10 @@
 ---
 title: Motion
 description: Motion can bring the screen to life, guide users through complex experiences, and help move them forward—from here to there, now to next, start to finish—and make progress.
-tabs: ['Basics', 'Choreography', 'Resources']
+tabs: ["Basics", "Choreography", "Resources"]
 ---
 
-import { Tab } from 'carbon-components-react';
+import { Tab } from "carbon-components-react";
 
 <PageDescription>
 
diff --git a/src/pages/guidelines/motion/choreography.mdx b/src/pages/guidelines/motion/choreography.mdx
index 48dc8f1cf4a..ae01d361a9c 100644
--- a/src/pages/guidelines/motion/choreography.mdx
+++ b/src/pages/guidelines/motion/choreography.mdx
@@ -1,7 +1,7 @@
 ---
 title: Motion
 description: Motion can bring the screen to life, guide users through complex experiences, and help move them forward—from here to there, now to next, start to finish—and make progress.
-tabs: ['Basics', 'Choreography', 'Resources']
+tabs: ["Basics", "Choreography", "Resources"]
 ---
 
 <AnchorLinks>
diff --git a/src/pages/guidelines/motion/resources.mdx b/src/pages/guidelines/motion/resources.mdx
index 6f5f6f11800..7db9a13d107 100644
--- a/src/pages/guidelines/motion/resources.mdx
+++ b/src/pages/guidelines/motion/resources.mdx
@@ -1,7 +1,7 @@
 ---
 title: Motion
 description: Motion can bring the screen to life, guide users through complex experiences, and help move them forward—from here to there, now to next, start to finish—and make progress.
-tabs: ['Basics', 'Choreography', 'Resources']
+tabs: ["Basics", "Choreography", "Resources"]
 ---
 
 <AnchorLinks>
diff --git a/src/pages/guidelines/pictograms/contribute.mdx b/src/pages/guidelines/pictograms/contribute.mdx
index 7f29a40a6d2..c64aaa6c38b 100644
--- a/src/pages/guidelines/pictograms/contribute.mdx
+++ b/src/pages/guidelines/pictograms/contribute.mdx
@@ -1,7 +1,7 @@
 ---
 title: Pictograms
 description: Pictograms are visual symbols used to represent ideas, objects, or narratives at a glance. They work well in presentations and marketing communications.
-tabs: ['Library', 'Usage', 'Contribute']
+tabs: ["Library", "Usage", "Contribute"]
 ---
 
 <PageDescription>
diff --git a/src/pages/guidelines/pictograms/usage.mdx b/src/pages/guidelines/pictograms/usage.mdx
index 91e3853fd06..e18d2be49bf 100644
--- a/src/pages/guidelines/pictograms/usage.mdx
+++ b/src/pages/guidelines/pictograms/usage.mdx
@@ -1,10 +1,10 @@
 ---
 title: Pictograms
 description: Pictograms are visual symbols used to represent ideas, objects, or narratives at a glance. They work well in presentations and marketing communications.
-tabs: ['Library', 'Usage', 'Contribute']
+tabs: ["Library", "Usage", "Contribute"]
 ---
 
-import { Bee32 } from '@carbon/icons-react';
+import { Bee32 } from "@carbon/icons-react";
 
 <PageDescription>
 
@@ -114,7 +114,8 @@ accessibility, see the section on mini units on the 2X Grid page.
     <ResourceCard
       subTitle="2X Grid: The mini unit"
       aspectRatio="2:1"
-      href="https://www.ibm.com/design/language/elements/2x-grid#the-mini-unit">
+      href="https://www.ibm.com/design/language/elements/2x-grid#the-mini-unit"
+    >
       <Bee32 />
     </ResourceCard>
   </Column>
diff --git a/src/pages/guidelines/themes/index.mdx b/src/pages/guidelines/themes/index.mdx
index d9209a54ba3..08e6c721969 100755
--- a/src/pages/guidelines/themes/index.mdx
+++ b/src/pages/guidelines/themes/index.mdx
@@ -67,7 +67,7 @@ Carbon provides four themes as shown in the [color usage](/guidelines/color/usag
 To use the gray 10, gray 90, or gray 100 theme as your default instead of white, set the `$carbon--theme` variable to one of the available theme maps (`$carbon--theme--g10`, `$carbon--theme--g90`, `$carbon--theme--g100`) and then include your normal components in your Sass build. These need to be imported before the main Carbon styles.
 
 ```scss
-@import '@carbon/themes/scss/themes';
+@import "@carbon/themes/scss/themes";
 
 // Use the gray 10 theme
 $carbon--theme: $carbon--theme--g10;
@@ -82,7 +82,7 @@ $carbon--theme: $carbon--theme--g100;
 @include carbon--theme();
 
 // import Carbon styles here
-@import 'carbon-components/scss/globals/scss/styles.scss';
+@import "carbon-components/scss/globals/scss/styles.scss";
 ```
 
 ## Customizing a theme
@@ -278,23 +278,23 @@ Typography has four categories of type styles (universal, productive, editorial,
 ```scss
 // Universal
 $caption-01: (
-  font-family: carbon--font-family('sans'),
+  font-family: carbon--font-family("sans"),
   font-size: carbon--type-scale(1),
-  font-weight: carbon--font-weight('regular'),
+  font-weight: carbon--font-weight("regular"),
   line-height: carbon--rem(16px),
   letter-spacing: 0.32px,
 ) !default;
 
 $label-01: (
-  font-family: carbon--font-family('sans'),
+  font-family: carbon--font-family("sans"),
   font-size: carbon--type-scale(1),
-  font-weight: carbon--font-weight('regular'),
+  font-weight: carbon--font-weight("regular"),
   line-height: carbon--rem(16px),
   letter-spacing: 0.32px,
 ) !default;
 
 $helper-text-01: (
-  font-family: carbon--font-family('sans'),
+  font-family: carbon--font-family("sans"),
   font-size: carbon--type-scale(1),
   font-style: italic,
   line-height: carbon--rem(16px),
@@ -302,65 +302,65 @@ $helper-text-01: (
 ) !default;
 
 $body-short-01: (
-  font-family: carbon--font-family('sans'),
+  font-family: carbon--font-family("sans"),
   font-size: carbon--type-scale(2),
-  font-weight: carbon--font-weight('regular'),
+  font-weight: carbon--font-weight("regular"),
   line-height: carbon--rem(18px),
   letter-spacing: 0.16px,
 ) !default;
 
 $body-long-01: (
-  font-family: carbon--font-family('sans'),
+  font-family: carbon--font-family("sans"),
   font-size: carbon--type-scale(2),
-  font-weight: carbon--font-weight('regular'),
+  font-weight: carbon--font-weight("regular"),
   line-height: carbon--rem(20px),
   letter-spacing: 0.16px,
 ) !default;
 
 $body-short-02: (
-  font-family: carbon--font-family('sans'),
+  font-family: carbon--font-family("sans"),
   font-size: carbon--type-scale(3),
-  font-weight: carbon--font-weight('regular'),
+  font-weight: carbon--font-weight("regular"),
   line-height: carbon--rem(22px),
   letter-spacing: 0,
 ) !default;
 
 $body-long-02: (
-  font-family: carbon--font-family('sans'),
+  font-family: carbon--font-family("sans"),
   font-size: carbon--type-scale(3),
-  font-weight: carbon--font-weight('regular'),
+  font-weight: carbon--font-weight("regular"),
   line-height: carbon--rem(24px),
   letter-spacing: 0,
 ) !default;
 
 $code-01: (
-  font-family: carbon--font-family('mono'),
+  font-family: carbon--font-family("mono"),
   font-size: carbon--type-scale(1),
-  font-weight: carbon--font-weight('regular'),
+  font-weight: carbon--font-weight("regular"),
   line-height: carbon--rem(16px),
   letter-spacing: 0.32px,
 ) !default;
 
 $code-02: (
-  font-family: carbon--font-family('mono'),
+  font-family: carbon--font-family("mono"),
   font-size: carbon--type-scale(2),
-  font-weight: carbon--font-weight('regular'),
+  font-weight: carbon--font-weight("regular"),
   line-height: carbon--rem(20px),
   letter-spacing: 0.32px,
 ) !default;
 
 $heading-01: (
-  font-family: carbon--font-family('sans'),
+  font-family: carbon--font-family("sans"),
   font-size: carbon--type-scale(2),
-  font-weight: carbon--font-weight('semibold'),
+  font-weight: carbon--font-weight("semibold"),
   line-height: carbon--rem(18px),
   letter-spacing: 0.16px,
 ) !default;
 
 $heading-02: (
-  font-family: carbon--font-family('sans'),
+  font-family: carbon--font-family("sans"),
   font-size: carbon--type-scale(3),
-  font-weight: carbon--font-weight('semibold'),
+  font-weight: carbon--font-weight("semibold"),
   line-height: carbon--rem(22px),
   letter-spacing: 0,
 ) !default;
@@ -369,25 +369,25 @@ $heading-02: (
 ```scss
 // Productive
 $productive-heading-03: (
-  font-family: carbon--font-family('sans'),
+  font-family: carbon--font-family("sans"),
   font-size: carbon--type-scale(5),
-  font-weight: carbon--font-weight('regular'),
+  font-weight: carbon--font-weight("regular"),
   line-height: carbon--rem(26px),
   letter-spacing: 0,
 ) !default;
 
 $productive-heading-04: (
-  font-family: carbon--font-family('sans'),
+  font-family: carbon--font-family("sans"),
   font-size: carbon--type-scale(7),
-  font-weight: carbon--font-weight('regular'),
+  font-weight: carbon--font-weight("regular"),
   line-height: carbon--rem(36px),
   letter-spacing: 0,
 ) !default;
 
 $productive-heading-05: (
-  font-family: carbon--font-family('sans'),
+  font-family: carbon--font-family("sans"),
   font-size: carbon--type-scale(8),
-  font-weight: carbon--font-weight('regular'),
+  font-weight: carbon--font-weight("regular"),
   line-height: carbon--rem(40px),
   letter-spacing: 0,
 ) !default;
@@ -396,9 +396,9 @@ $productive-heading-05: (
 ```scss
 // Expressive
 $expressive-heading-03: (
-  font-family: carbon--font-family('sans'),
+  font-family: carbon--font-family("sans"),
   font-size: carbon--type-scale(5),
-  font-weight: carbon--font-weight('regular'),
+  font-weight: carbon--font-weight("regular"),
   line-height: 130%,
   letter-spacing: 0,
   breakpoints: (
@@ -413,9 +413,9 @@ $expressive-heading-03: (
 ) !default;
 
 $expressive-heading-04: (
-  font-family: carbon--font-family('sans'),
+  font-family: carbon--font-family("sans"),
   font-size: carbon--type-scale(7),
-  font-weight: carbon--font-weight('regular'),
+  font-weight: carbon--font-weight("regular"),
   line-height: 129%,
   letter-spacing: 0,
   breakpoints: (
@@ -430,9 +430,9 @@ $expressive-heading-04: (
 ) !default;
 
 $expressive-heading-05: (
-  font-family: carbon--font-family('sans'),
+  font-family: carbon--font-family("sans"),
   font-size: carbon--type-scale(8),
-  font-weight: carbon--font-weight('regular'),
+  font-weight: carbon--font-weight("regular"),
   line-height: 125%,
   letter-spacing: 0,
   breakpoints: (
@@ -455,9 +455,9 @@ $expressive-heading-05: (
 ) !default;
 
 $expressive-heading-06: (
-  font-family: carbon--font-family('sans'),
+  font-family: carbon--font-family("sans"),
   font-size: carbon--type-scale(8),
-  font-weight: carbon--font-weight('semibold'),
+  font-weight: carbon--font-weight("semibold"),
   line-height: 125%,
   letter-spacing: 0,
   breakpoints: (
@@ -480,9 +480,9 @@ $expressive-heading-06: (
 ) !default;
 
 $expressive-paragraph-01: (
-  font-family: carbon--font-family('sans'),
+  font-family: carbon--font-family("sans"),
   font-size: carbon--type-scale(6),
-  font-weight: carbon--font-weight('light'),
+  font-weight: carbon--font-weight("light"),
   line-height: 125%,
   letter-spacing: 0,
   breakpoints: (
@@ -501,9 +501,9 @@ $expressive-paragraph-01: (
 ```scss
 // Additional styles
 $quotation-01: (
-  font-family: carbon--font-family('serif'),
+  font-family: carbon--font-family("serif"),
   font-size: carbon--type-scale(5),
-  font-weight: carbon--font-weight('regular'),
+  font-weight: carbon--font-weight("regular"),
   line-height: 130%,
   letter-spacing: 0,
   breakpoints: (
@@ -526,9 +526,9 @@ $quotation-01: (
 ) !default;
 
 $quotation-02: (
-  font-family: carbon--font-family('serif'),
+  font-family: carbon--font-family("serif"),
   font-size: carbon--type-scale(8),
-  font-weight: carbon--font-weight('light'),
+  font-weight: carbon--font-weight("light"),
   line-height: 125%,
   letter-spacing: 0,
   breakpoints: (
@@ -551,9 +551,9 @@ $quotation-02: (
 ) !default;
 
 $display-01: (
-  font-family: carbon--font-family('sans'),
+  font-family: carbon--font-family("sans"),
   font-size: carbon--type-scale(10),
-  font-weight: carbon--font-weight('light'),
+  font-weight: carbon--font-weight("light"),
   line-height: 119%,
   letter-spacing: 0,
   breakpoints: (
@@ -575,9 +575,9 @@ $display-01: (
 ) !default;
 
 $display-02: (
-  font-family: carbon--font-family('sans'),
+  font-family: carbon--font-family("sans"),
   font-size: carbon--type-scale(10),
-  font-weight: carbon--font-weight('semibold'),
+  font-weight: carbon--font-weight("semibold"),
   line-height: 119%,
   letter-spacing: 0,
   breakpoints: (
@@ -599,9 +599,9 @@ $display-02: (
 ) !default;
 
 $display-03: (
-  font-family: carbon--font-family('sans'),
+  font-family: carbon--font-family("sans"),
   font-size: carbon--type-scale(10),
-  font-weight: carbon--font-weight('light'),
+  font-weight: carbon--font-weight("light"),
   line-height: 119%,
   letter-spacing: 0,
   breakpoints: (
@@ -628,9 +628,9 @@ $display-03: (
 ) !default;
 
 $display-04: (
-  font-family: carbon--font-family('sans'),
+  font-family: carbon--font-family("sans"),
   font-size: carbon--type-scale(10),
-  font-weight: carbon--font-weight('semibold'),
+  font-weight: carbon--font-weight("semibold"),
   line-height: 119%,
   letter-spacing: 0,
   breakpoints: (
diff --git a/src/pages/guidelines/typography/expressive.mdx b/src/pages/guidelines/typography/expressive.mdx
index 7f7fbb96b62..f5aaa1ebf5a 100644
--- a/src/pages/guidelines/typography/expressive.mdx
+++ b/src/pages/guidelines/typography/expressive.mdx
@@ -2,10 +2,10 @@
 label: When used properly, typography can help create clear hierarchies, organize information, and guide users through the product or experience.
 title: Typography
 description: Typography can help create clear hierarchies, organize information, and guide users through a product or experience.
-tabs: ['Overview', 'Productive', 'Expressive']
+tabs: ["Overview", "Productive", "Expressive"]
 ---
 
-import TypesetStyle from 'components/TypesetStyle';
+import TypesetStyle from "components/TypesetStyle";
 
 ## Expressive type sets
 
diff --git a/src/pages/guidelines/typography/overview.mdx b/src/pages/guidelines/typography/overview.mdx
index fab37d26ab1..e21411da1b8 100644
--- a/src/pages/guidelines/typography/overview.mdx
+++ b/src/pages/guidelines/typography/overview.mdx
@@ -2,11 +2,11 @@
 label: Typography can help create clear hierarchies, organize information, and guide users through a product or experience.
 title: Typography
 description: Typography can help create clear hierarchies, organize information, and guide users through a product or experience.
-tabs: ['Overview', 'Productive', 'Expressive']
+tabs: ["Overview", "Productive", "Expressive"]
 ---
 
-import TypeScaleTable from '../../../../src/components/TypeScaleTable';
-import TypeWeight from '../../../../src/components/TypeWeight';
+import TypeScaleTable from "../../../../src/components/TypeScaleTable";
+import TypeWeight from "../../../../src/components/TypeWeight";
 
 <PageDescription>
 
@@ -91,20 +91,20 @@ Carbon uses the open-source typeface **IBM Plex**. It has been carefully designe
 ### Sans-serif font stack
 
 ```scss
-font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
 ```
 
 ### Serif font stack
 
 ```scss
-font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
+font-family: "IBM Plex Serif", "Georgia", Times, serif;
 ```
 
 ### Mono font stack
 
 ```scss
-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono',
-  'Bitstream Vera Sans Mono', Courier, monospace;
+font-family: "IBM Plex Mono", "Menlo", "DejaVu Sans Mono",
+  "Bitstream Vera Sans Mono", Courier, monospace;
 ```
 
 ## Scale
diff --git a/src/pages/guidelines/typography/productive.mdx b/src/pages/guidelines/typography/productive.mdx
index 3b7345689dc..eb987737fa0 100644
--- a/src/pages/guidelines/typography/productive.mdx
+++ b/src/pages/guidelines/typography/productive.mdx
@@ -2,10 +2,10 @@
 label: When used properly, typography can help create clear hierarchies, organize information, and guide users through the product or experience.
 title: Typography
 description: Typography can help create clear hierarchies, organize information, and guide users through a product or experience.
-tabs: ['Overview', 'Productive', 'Expressive']
+tabs: ["Overview", "Productive", "Expressive"]
 ---
 
-import TypesetStyle from 'components/TypesetStyle';
+import TypesetStyle from "components/TypesetStyle";
 
 ## IBM Productive type set
 
diff --git a/src/pages/how-to-contribute/add-ons.mdx b/src/pages/how-to-contribute/add-ons.mdx
index e1ac0713ec1..29577923d70 100644
--- a/src/pages/how-to-contribute/add-ons.mdx
+++ b/src/pages/how-to-contribute/add-ons.mdx
@@ -3,7 +3,7 @@ title: Add-ons
 description: Carbon add-ons contain components, tools, and guidance that extend Carbon for a specific product or experience.
 ---
 
-import { CheckmarkFilled16 } from '@carbon/icons-react';
+import { CheckmarkFilled16 } from "@carbon/icons-react";
 
 <AnchorLinks>
 
diff --git a/src/pages/index.mdx b/src/pages/index.mdx
index 0e5299fd2c0..5a522a02650 100755
--- a/src/pages/index.mdx
+++ b/src/pages/index.mdx
@@ -1,4 +1,4 @@
-import HomepageTemplate from 'gatsby-theme-carbon/src/templates/Homepage';
+import HomepageTemplate from "gatsby-theme-carbon/src/templates/Homepage";
 
 export default HomepageTemplate;
 
diff --git a/src/pages/patterns/dialog-pattern/index.mdx b/src/pages/patterns/dialog-pattern/index.mdx
index 6117b334fef..f04be2bd18e 100644
--- a/src/pages/patterns/dialog-pattern/index.mdx
+++ b/src/pages/patterns/dialog-pattern/index.mdx
@@ -13,7 +13,7 @@ A dialog is a “conversation” between the system and the user. It is prompted
 
 <AnchorLink>Overview</AnchorLink>
 <AnchorLink>Modal dialogs</AnchorLink>
-<AnchorLink>Non-modal  dialogs</AnchorLink>
+<AnchorLink>Non-modal dialogs</AnchorLink>
 <AnchorLink>Designing with dialogs</AnchorLink>
 <AnchorLink>Related components and patterns</AnchorLink>
 <AnchorLink>Accessibility</AnchorLink>
@@ -66,9 +66,9 @@ A _modal_ dialog triggers a state (or mode) that focuses the user’s attention
 
 When a _non-modal_ dialog is active the user can continue viewing and interacting with the main page while the dialog is open. Non-modal dialogs are commonly used to present non-critical information or optional user tasks.
 
-| Type     | Usage                                                                                        | Context                                                                                                                                                |
-| -------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| Modal    | Use to present critical information or request required input needed to complete a workflow. | Focuses the users attention exclusively on one task or piece of information. On-page content is obscured from the user while the modal dialog is open. |
+| Type      | Usage                                                                                        | Context                                                                                                                                                |
+| --------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Modal     | Use to present critical information or request required input needed to complete a workflow. | Focuses the users attention exclusively on one task or piece of information. On-page content is obscured from the user while the modal dialog is open. |
 | Non-modal | Use to present non-critical information or optional user tasks.                              | On-page content can be accessed and interacted with while the dialog is still open.                                                                    |
 
 <Row>
@@ -287,7 +287,7 @@ Decrease the chances of invalid data by using selection controls and bound entry
 </Row>
 
 <Caption>
-  Real-time validation. The user has left the first required field empty.{' '}
+  Real-time validation. The user has left the first required field empty.{" "}
 </Caption>
 
 #### Task completion and loading
diff --git a/src/pages/patterns/empty-states-pattern/index.mdx b/src/pages/patterns/empty-states-pattern/index.mdx
index ff74514b297..6616b7e59ab 100644
--- a/src/pages/patterns/empty-states-pattern/index.mdx
+++ b/src/pages/patterns/empty-states-pattern/index.mdx
@@ -12,7 +12,7 @@ import {
   StructuredListCell,
   UnorderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <PageDescription>
 
diff --git a/src/pages/patterns/overflow-content/index.mdx b/src/pages/patterns/overflow-content/index.mdx
index cee23d03044..4cbc3622020 100644
--- a/src/pages/patterns/overflow-content/index.mdx
+++ b/src/pages/patterns/overflow-content/index.mdx
@@ -140,9 +140,10 @@ Mid-line truncation does not have its own class as it requires JavaScript. This
       frameborder="no"
       allowtransparency="true"
       allowfullscreen="true"
-      style="width: 100%;">
-      See the Pen{' '}
-      <a href="https://codepen.io/team/carbon/pen/KRoBQe/">Middle Truncation</a>{' '}
+      style="width: 100%;"
+    >
+      See the Pen{" "}
+      <a href="https://codepen.io/team/carbon/pen/KRoBQe/">Middle Truncation</a>{" "}
       by Carbon Design System (<a href="https://codepen.io/carbon">@carbon</a>)
       on <a href="https://codepen.io">CodePen</a>.
     </iframe>
diff --git a/src/pages/patterns/search-pattern/index.mdx b/src/pages/patterns/search-pattern/index.mdx
index d30819bba3c..245513794b1 100644
--- a/src/pages/patterns/search-pattern/index.mdx
+++ b/src/pages/patterns/search-pattern/index.mdx
@@ -12,7 +12,7 @@ import {
   StructuredListCell,
   OrderedList,
   ListItem,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 
 <PageDescription>
 
diff --git a/src/pages/resources/index.mdx b/src/pages/resources/index.mdx
index b006bd19868..c5f1484e1f5 100755
--- a/src/pages/resources/index.mdx
+++ b/src/pages/resources/index.mdx
@@ -116,7 +116,8 @@ Everything you need to work with, learn about, and contribute to Carbon.
     <ResourceCard
       subTitle="White theme"
       href="sketch://add-library/cloud/JaVzz"
-      actionIcon="download">
+      actionIcon="download"
+    >
       <MdxIcon name="sketch" />
     </ResourceCard>
   </Column>
@@ -124,7 +125,8 @@ Everything you need to work with, learn about, and contribute to Carbon.
     <ResourceCard
       subTitle="Gray 10 theme"
       href="sketch://add-library/cloud/Onwv2"
-      actionIcon="download">
+      actionIcon="download"
+    >
       <MdxIcon name="sketch" />
     </ResourceCard>
   </Column>
@@ -132,7 +134,8 @@ Everything you need to work with, learn about, and contribute to Carbon.
     <ResourceCard
       subTitle="Gray 90 theme"
       href="sketch://add-library/cloud/eo37p"
-      actionIcon="download">
+      actionIcon="download"
+    >
       <MdxIcon name="sketch" />
     </ResourceCard>
   </Column>
@@ -140,7 +143,8 @@ Everything you need to work with, learn about, and contribute to Carbon.
     <ResourceCard
       subTitle="Gray 100 theme"
       href="sketch://add-library/cloud/d13Ll"
-      actionIcon="download">
+      actionIcon="download"
+    >
       <MdxIcon name="sketch" />
     </ResourceCard>
   </Column>
diff --git a/src/pages/tutorial/angular/step-1.mdx b/src/pages/tutorial/angular/step-1.mdx
index ea76f6a6424..791d6c41d1e 100644
--- a/src/pages/tutorial/angular/step-1.mdx
+++ b/src/pages/tutorial/angular/step-1.mdx
@@ -221,10 +221,9 @@ Now you can skip most of [Start from scratch](#start-from-scratch) and jump stra
 
 ## Install Angular CLI
 
-Since we are starting from scratch, we need to first install Angular CLI. 
+Since we are starting from scratch, we need to first install Angular CLI.
 Currently you need to install Angular CLI Version 8.x to work through this tutorial.
 
-
 ```bash
 npm install -g @angular/cli
 ```
diff --git a/src/pages/tutorial/angular/wrapping-up.mdx b/src/pages/tutorial/angular/wrapping-up.mdx
index 6e147408c0a..2b2257474f6 100644
--- a/src/pages/tutorial/angular/wrapping-up.mdx
+++ b/src/pages/tutorial/angular/wrapping-up.mdx
@@ -1,7 +1,7 @@
 ---
 title: Wrapping up
 tabs:
-  ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']
+  ["Overview", "Step 1", "Step 2", "Step 3", "Step 4", "Step 5", "Wrapping up"]
 ---
 
 ### Thanks for completing our tutorial and helping us improve it along the way. As a way to say thanks, you can apply for an IBM Digital Badge and a free shirt!
diff --git a/src/pages/tutorial/react/overview.mdx b/src/pages/tutorial/react/overview.mdx
index f018c104e46..d3242f7deeb 100644
--- a/src/pages/tutorial/react/overview.mdx
+++ b/src/pages/tutorial/react/overview.mdx
@@ -2,10 +2,10 @@
 title: Tutorial overview
 description: Welcome to Carbon! This tutorial will guide you in creating a React app with the Carbon Design System.
 tabs:
-  ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']
+  ["Overview", "Step 1", "Step 2", "Step 3", "Step 4", "Step 5", "Wrapping up"]
 ---
 
-import Preview from 'components/Preview';
+import Preview from "components/Preview";
 
 <PageDescription>
 
diff --git a/src/pages/tutorial/react/step-1.mdx b/src/pages/tutorial/react/step-1.mdx
index f7c9c5538f8..fecb4d6cf57 100644
--- a/src/pages/tutorial/react/step-1.mdx
+++ b/src/pages/tutorial/react/step-1.mdx
@@ -2,10 +2,10 @@
 title: 1. Installing Carbon
 description: Welcome to Carbon! This tutorial will guide you in creating a React app with the Carbon Design System.
 tabs:
-  ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']
+  ["Overview", "Step 1", "Step 2", "Step 3", "Step 4", "Step 5", "Wrapping up"]
 ---
 
-import Preview from 'components/Preview';
+import Preview from "components/Preview";
 
 <PageDescription>
 
@@ -161,7 +161,7 @@ In the `src` directory, rename `index.css` as `index.scss`. Then in `index.js` u
 In `index.scss`, import the Carbon styles by adding the following at the top of the file:
 
 ```scss path=src/index.scss
-@import 'carbon-components/scss/globals/scss/styles.scss';
+@import "carbon-components/scss/globals/scss/styles.scss";
 ```
 
 Making this change to `index.scss` will cause all of the Carbon Sass to re-compile. Once finished re-compiling the Carbon base styling is applied (IBM Plex Sans font family, font size, weight, colors, etc.)
@@ -169,7 +169,7 @@ Making this change to `index.scss` will cause all of the Carbon Sass to re-compi
 Re-compiling all of the Carbon Sass takes a while, even on fast systems. Let's speed this up by moving our custom app Sass into a separate file, `app.scss` in the 'src' directory, and import that from `App.js`.
 
 ```javascript path=src/App.js
-import './app.scss';
+import "./app.scss";
 ```
 
 By modifying `index.scss` as little as possible and storing all app-specific styling in `app.scss` we will make compile times much quicker. Storing the app-specific styling in a separate file also makes good organizational sense.
@@ -177,7 +177,7 @@ By modifying `index.scss` as little as possible and storing all app-specific sty
 Next we'll import a `Button` from Carbon to test that our dependencies are working properly. At the top of `App.js`, import the `Button` by adding the following:
 
 ```javascript path=src/App.js
-import { Button } from 'carbon-components-react';
+import { Button } from "carbon-components-react";
 ```
 
 In the `App` component return, you can now replace:
@@ -232,7 +232,7 @@ This is because our UI Shell is in experimental mode and the styles need to be m
 Next, in `app.scss`, we'll import our `TutorialHeader` styles. Your file should now look like this:
 
 ```scss path=src/app.scss
-@import './components/TutorialHeader/tutorial-header.scss';
+@import "./components/TutorialHeader/tutorial-header.scss";
 ```
 
 ### Import and export the header
@@ -240,14 +240,14 @@ Next, in `app.scss`, we'll import our `TutorialHeader` styles. Your file should
 In `src/components/TutorialHeader/index.js`, import and export our `TutorialHeader` component like so:
 
 ```javascript path=src/components/TutorialHeader/index.js
-import TutorialHeader from './TutorialHeader';
+import TutorialHeader from "./TutorialHeader";
 export default TutorialHeader;
 ```
 
 Next we'll import our Carbon UI Shell components into `TutorialHeader.js`. Set up the file like so:
 
 ```javascript path=src/components/TutorialHeader/TutorialHeader.js
-import React from 'react';
+import React from "react";
 import {
   Header,
   HeaderName,
@@ -256,7 +256,7 @@ import {
   HeaderGlobalBar,
   HeaderGlobalAction,
   SkipToContent,
-} from 'carbon-components-react/es/components/UIShell';
+} from "carbon-components-react/es/components/UIShell";
 
 const TutorialHeader = () => (
   <Header aria-label="Carbon Tutorial">
@@ -297,9 +297,9 @@ export default TutorialHeader;
 Now let's import the icons from our `@carbon/icons-react` elements package. In the `TutorialHeader.js` file, we need to import each individual icon we will use.
 
 ```javascript path=src/components/TutorialHeader/TutorialHeader.js
-import Notification20 from '@carbon/icons-react/lib/notification/20';
-import UserAvatar20 from '@carbon/icons-react/lib/user--avatar/20';
-import AppSwitcher20 from '@carbon/icons-react/lib/app-switcher/20';
+import Notification20 from "@carbon/icons-react/lib/notification/20";
+import UserAvatar20 from "@carbon/icons-react/lib/user--avatar/20";
+import AppSwitcher20 from "@carbon/icons-react/lib/app-switcher/20";
 ```
 
 Then we need to add the `HeaderGlobalAction` component inside of the `HeaderGlobalBar` where we will add our icons. These represent actions in the header a user can make. Replace:
@@ -329,11 +329,11 @@ With:
 Next we'll render our UI Shell by importing our `TutorialHeader` component and `Content` into `App.js`. Your imports should look like this:
 
 ```javascript path=src/App.js
-import React, { Component } from 'react';
-import './app.scss';
-import { Button } from 'carbon-components-react';
-import { Content } from 'carbon-components-react/es/components/UIShell';
-import TutorialHeader from './components/TutorialHeader';
+import React, { Component } from "react";
+import "./app.scss";
+import { Button } from "carbon-components-react";
+import { Content } from "carbon-components-react/es/components/UIShell";
+import TutorialHeader from "./components/TutorialHeader";
 ```
 
 Our `return` currently just contains a `Button`. Let's update that to include our imported components. This should look like the following:
@@ -392,9 +392,9 @@ src/content/RepoPage
 Next, we'll import our content Sass files in `app.scss`, like so:
 
 ```scss path=src/app.scss
-@import './components/TutorialHeader/tutorial-header.scss';
-@import './content/LandingPage/landing-page.scss';
-@import './content/RepoPage/repo-page.scss';
+@import "./components/TutorialHeader/tutorial-header.scss";
+@import "./content/LandingPage/landing-page.scss";
+@import "./content/RepoPage/repo-page.scss";
 ```
 
 ### Import and export content pages
@@ -402,14 +402,14 @@ Next, we'll import our content Sass files in `app.scss`, like so:
 Now that our stylesheets are set up, we need to create our pages' components. Starting with `LandingPage`, just like with our header, we need to export the component in `src/content/LandingPage/index.js` by adding:
 
 ```javascript path=src/content/LandingPage/index.js
-import LandingPage from './LandingPage';
+import LandingPage from "./LandingPage";
 export default LandingPage;
 ```
 
 Next in `LandingPage.js` we'll create our component.
 
 ```javascript path=src/content/LandingPage/LandingPage.js
-import React from 'react';
+import React from "react";
 
 const LandingPage = () => {
   return <div>LANDING PAGE</div>;
@@ -423,14 +423,14 @@ We'll repeat this process with `RepoPage`.
 In `src/content/RepoPage/index.js`, import and export the `RepoPage` component like so:
 
 ```javascript path=src/content/RepoPage/index.js
-import RepoPage from './RepoPage';
+import RepoPage from "./RepoPage";
 export default RepoPage;
 ```
 
 Then in `RepoPage.js` create the component.
 
 ```javascript path=src/content/RepoPage/RepoPage.js
-import React from 'react';
+import React from "react";
 
 const RepoPage = () => {
   return <div>REPO PAGE</div>;
@@ -453,7 +453,7 @@ $ yarn start
 First, we need to wrap our app in the `Router` component. In the root `index.js`, add the import:
 
 ```javascript path=src/index.js
-import { HashRouter as Router } from 'react-router-dom';
+import { HashRouter as Router } from "react-router-dom";
 ```
 
 <InlineNotification>
@@ -469,16 +469,16 @@ ReactDOM.render(
   <Router>
     <App />
   </Router>,
-  document.getElementById('root')
+  document.getElementById("root")
 );
 ```
 
 In order to render our content pages, we need to add the following imports in `App.js` below our existing imports.
 
 ```javascript path=src/App.js
-import { Route, Switch } from 'react-router-dom';
-import LandingPage from './content/LandingPage';
-import RepoPage from './content/RepoPage';
+import { Route, Switch } from "react-router-dom";
+import LandingPage from "./content/LandingPage";
+import RepoPage from "./content/RepoPage";
 ```
 
 This allows us to use our page content components and routing components from `react-router-dom`.
@@ -501,7 +501,7 @@ After that we need to do a couple quick fixes to the UI Shell to have it work wi
 Add the `Link` import in `TutorialHeader.js`:
 
 ```javascript path=src/components/TutorialHeader/TutorialHeader.js
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 ```
 
 We need to use the `Link` component instead of the default anchor elements to prevent full page reload when navigating to different pages with React Router. To use `Link`, update the `HeaderName` component to use the `element` prop and replace the `href` with `to`:
diff --git a/src/pages/tutorial/react/step-2.mdx b/src/pages/tutorial/react/step-2.mdx
index 4ac33ec59f0..7895a7b2096 100644
--- a/src/pages/tutorial/react/step-2.mdx
+++ b/src/pages/tutorial/react/step-2.mdx
@@ -2,10 +2,10 @@
 title: 2. Building pages
 description: Welcome to Carbon! This tutorial will guide you in creating a React app with the Carbon Design System.
 tabs:
-  ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']
+  ["Overview", "Step 1", "Step 2", "Step 3", "Step 4", "Step 5", "Wrapping up"]
 ---
 
-import Preview from 'components/Preview';
+import Preview from "components/Preview";
 
 <PageDescription>
 
@@ -83,11 +83,11 @@ You should see something similar to where the [previous step](/tutorial/react/st
 Before we get started with this step, we'll be adding some components that require IE11 polyfills. As shown in the [Carbon React documentation](https://github.com/carbon-design-system/carbon/blob/master/packages/react/.storybook/polyfills.js), go ahead and add these imports to the top of the root `index.js`. They aren't all needed, but we'll add them all to play it safe for the duration of the tutorial.
 
 ```javascript path=src/index.js
-import 'core-js/modules/es7.array.includes';
-import 'core-js/modules/es6.array.fill';
-import 'core-js/modules/es6.string.includes';
-import 'core-js/modules/es6.string.trim';
-import 'core-js/modules/es7.object.values';
+import "core-js/modules/es7.array.includes";
+import "core-js/modules/es6.array.fill";
+import "core-js/modules/es6.string.includes";
+import "core-js/modules/es6.string.trim";
+import "core-js/modules/es7.object.values";
 ```
 
 <InlineNotification>
@@ -178,7 +178,7 @@ We'll start adding HTML elements and components by row.
 In our first row we'll need a `BreadCrumb` component. First, let's import the components we need. Because we'll be importing several components for this page, we'll import them directly from the `carbon-components-react` package instead of the direct path for each one.
 
 ```javascript path=src/content/LandingPage/LandingPage.js
-import { Breadcrumb, BreadcrumbItem } from 'carbon-components-react';
+import { Breadcrumb, BreadcrumbItem } from "carbon-components-react";
 ```
 
 We can now add our component to the first row, along with a header, like so:
@@ -211,7 +211,7 @@ import {
   Button,
   Tabs,
   Tab,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 ```
 
 Before we can render the tabs, we need to add some props for the component after the import. These example props came from the [React Tabs Story](http://react.carbondesignsystem.com/?selectedKind=Tabs) in Storybook.
@@ -220,12 +220,12 @@ Before we can render the tabs, we need to add some props for the component after
 const props = {
   tabs: {
     selected: 0,
-    triggerHref: '#',
-    role: 'navigation',
+    triggerHref: "#",
+    role: "navigation",
   },
   tab: {
-    href: '#',
-    role: 'presentation',
+    href: "#",
+    role: "presentation",
     tabIndex: 0,
   },
 };
@@ -305,7 +305,7 @@ Next, we'll need to add a styling override to move the tabs to the right on larg
 Then in `_landing-page.scss` add this import at the top of the file.
 
 ```scss path=src/content/LandingPage/_landing-page.scss
-@import './overrides.scss';
+@import "./overrides.scss";
 ```
 
 <InlineNotification>
@@ -377,10 +377,10 @@ The third row will be created in a later tutorial, so we'll just add the headers
 We've added basic layout styles in `_landing-page.scss`, so now let's add type, color and spacing styles to match the design. We'll be using our [spacing tokens](https://www.carbondesignsystem.com/guidelines/spacing). In `app.scss`, add these imports at the **top** of the file so we can use Carbon breakpoints, tokens, and typography Sass mixins and functions:
 
 ```scss path=src/app.scss
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/type/scss/font-family.scss';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/layout/scss/breakpoint.scss';
-@import 'carbon-components/scss/globals/scss/typography.scss';
-@import 'carbon-components/scss/globals/scss/vars.scss';
+@import "carbon-components/scss/globals/scss/vendor/@carbon/type/scss/font-family.scss";
+@import "carbon-components/scss/globals/scss/vendor/@carbon/layout/scss/breakpoint.scss";
+@import "carbon-components/scss/globals/scss/typography.scss";
+@import "carbon-components/scss/globals/scss/vars.scss";
 ```
 
 ### Banner
@@ -422,7 +422,7 @@ Add the following in `_mixins.scss`. Per the design we need to use Gray 10 for o
   position: relative;
 
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     left: -$spacing-05;
     top: 0;
@@ -437,8 +437,8 @@ Add the following in `_mixins.scss`. Per the design we need to use Gray 10 for o
 After you have created `_mixins.scss`, import it at the **top** of `_landing-page.scss`. By now you should have two imports:
 
 ```scss path=src/content/LandingPage/_landing-page.scss
-@import './mixins.scss';
-@import './overrides.scss';
+@import "./mixins.scss";
+@import "./overrides.scss";
 ```
 
 Now to use the new mixin, update the `.landing-page__banner` declaration block to:
@@ -467,7 +467,7 @@ The Sketch symbol naming is consistent with the development Sass tokens to help
 
 ```scss path=src/content/LandingPage/_landing-page.scss
 .landing-page__heading {
-  @include carbon--type-style('productive-heading-05');
+  @include carbon--type-style("productive-heading-05");
 }
 ```
 
@@ -506,12 +506,12 @@ We also need to adjust our vertical spacing and type treatment. Like before, it'
 }
 
 .landing-page__subheading {
-  @include carbon--type-style('productive-heading-03');
-  @include carbon--font-weight('semibold');
+  @include carbon--type-style("productive-heading-03");
+  @include carbon--font-weight("semibold");
 }
 
 .landing-page__p {
-  @include carbon--type-style('productive-heading-03');
+  @include carbon--type-style("productive-heading-03");
   margin-top: $spacing-06;
   margin-bottom: $spacing-08;
 
@@ -543,7 +543,7 @@ Let's also add some styles for the last row, even though that will get used late
 }
 
 .landing-page__label {
-  @include carbon--type-style('heading-01');
+  @include carbon--type-style("heading-01");
 }
 ```
 
@@ -572,7 +572,7 @@ We currently have `RepoPage.js` that just contains a grid and placeholder conten
 First, we'll add our data table by importing a few components in `RepoTable.js`:
 
 ```javascript path=src/content/RepoPage/RepoTable.js
-import React from 'react';
+import React from "react";
 import {
   DataTable,
   TableContainer,
@@ -585,7 +585,7 @@ import {
   TableExpandRow,
   TableCell,
   TableExpandedRow,
-} from 'carbon-components-react';
+} from "carbon-components-react";
 ```
 
 Then, let's create the `RepoTable` component and export it at the very bottom of `RepoTable.js`.
@@ -658,7 +658,7 @@ At this point, return to `RepoPage.js` because now we need to render a static `R
 Import `RepoTable` in `RepoPage.js`.
 
 ```javascript path=src/content/RepoPage/RepoPage.js
-import RepoTable from './RepoTable';
+import RepoTable from "./RepoTable";
 ```
 
 Then below the imports, include the following arrays to pass into the `RepoTable` component. We'll be setting the `rows` array from an API in the next tutorial step, but for now, static example rows will suffice.
@@ -666,58 +666,58 @@ Then below the imports, include the following arrays to pass into the `RepoTable
 ```javascript path=src/content/RepoPage/RepoPage.js
 const headers = [
   {
-    key: 'name',
-    header: 'Name',
+    key: "name",
+    header: "Name",
   },
   {
-    key: 'createdAt',
-    header: 'Created',
+    key: "createdAt",
+    header: "Created",
   },
   {
-    key: 'updatedAt',
-    header: 'Updated',
+    key: "updatedAt",
+    header: "Updated",
   },
   {
-    key: 'issueCount',
-    header: 'Open Issues',
+    key: "issueCount",
+    header: "Open Issues",
   },
   {
-    key: 'stars',
-    header: 'Stars',
+    key: "stars",
+    header: "Stars",
   },
   {
-    key: 'links',
-    header: 'Links',
+    key: "links",
+    header: "Links",
   },
 ];
 
 const rows = [
   {
-    id: '1',
-    name: 'Repo 1',
-    createdAt: 'Date',
-    updatedAt: 'Date',
-    issueCount: '123',
-    stars: '456',
-    links: 'Links',
+    id: "1",
+    name: "Repo 1",
+    createdAt: "Date",
+    updatedAt: "Date",
+    issueCount: "123",
+    stars: "456",
+    links: "Links",
   },
   {
-    id: '2',
-    name: 'Repo 2',
-    createdAt: 'Date',
-    updatedAt: 'Date',
-    issueCount: '123',
-    stars: '456',
-    links: 'Links',
+    id: "2",
+    name: "Repo 2",
+    createdAt: "Date",
+    updatedAt: "Date",
+    issueCount: "123",
+    stars: "456",
+    links: "Links",
   },
   {
-    id: '3',
-    name: 'Repo 3',
-    createdAt: 'Date',
-    updatedAt: 'Date',
-    issueCount: '123',
-    stars: '456',
-    links: 'Links',
+    id: "3",
+    name: "Repo 3",
+    createdAt: "Date",
+    updatedAt: "Date",
+    issueCount: "123",
+    stars: "456",
+    links: "Links",
   },
 ];
 ```
diff --git a/src/pages/tutorial/react/step-3.mdx b/src/pages/tutorial/react/step-3.mdx
index 3b779fb37d9..6835c1df833 100644
--- a/src/pages/tutorial/react/step-3.mdx
+++ b/src/pages/tutorial/react/step-3.mdx
@@ -2,10 +2,10 @@
 title: 3. Using APIs
 description: Welcome to Carbon! This tutorial will guide you in creating a React app with the Carbon Design System.
 tabs:
-  ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']
+  ["Overview", "Step 1", "Step 2", "Step 3", "Step 4", "Step 5", "Wrapping up"]
 ---
 
-import Preview from 'components/Preview';
+import Preview from "components/Preview";
 
 <PageDescription>
 
@@ -114,15 +114,15 @@ The `react-apollo` library gives us a component that we need to put at the base
 Add these two imports to `src/index.js`:
 
 ```javascript path=src/index.js
-import ApolloClient from 'apollo-boost';
-import { ApolloProvider } from 'react-apollo';
+import ApolloClient from "apollo-boost";
+import { ApolloProvider } from "react-apollo";
 ```
 
 Next, make your client by providing a URI for the GitHub GraphQL API as well as an authorization header using the environmental variable you just added to `.env.local`.
 
 ```javascript path=src/index.js
 const client = new ApolloClient({
-  uri: 'https://api.github.com/graphql',
+  uri: "https://api.github.com/graphql",
   headers: {
     authorization: `Bearer ${process.env.REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN}`,
   },
@@ -156,8 +156,8 @@ With:
 Add the following imports at the top of `RepoPage.js`:
 
 ```javascript path=src/content/RepoPage/RepoPage.js
-import { gql } from 'apollo-boost';
-import { Query } from 'react-apollo';
+import { gql } from "apollo-boost";
+import { Query } from "react-apollo";
 ```
 
 ### Query
@@ -215,14 +215,14 @@ Our last column in the data table will be a comma-separated list of repository a
 Import `Link` at the top of `RepoPage.js`.
 
 ```javascript path=src/content/RepoPage/RepoPage.js
-import { Link } from 'carbon-components-react';
+import { Link } from "carbon-components-react";
 ```
 
 Then use `Link` in this component that has two props (`url` and `homepageUrl`) and returns an unordered list. If the repository does not have a home page URL, only render the repository link.
 
 ```javascript path=src/content/RepoPage/RepoPage.js
 const LinkList = ({ url, homepageUrl }) => (
-  <ul style={{ display: 'flex' }}>
+  <ul style={{ display: "flex" }}>
     <li>
       <Link href={url}>GitHub</Link>
     </li>
@@ -239,8 +239,8 @@ const LinkList = ({ url, homepageUrl }) => (
 As a final helper, let's create a function that transforms row data to our expected header keys. Notice how we're using our new `LinkList` component to generate the value of the `links` key in each row.
 
 ```javascript path=src/content/RepoPage/RepoPage.js
-const getRowItems = rows =>
-  rows.map(row => ({
+const getRowItems = (rows) =>
+  rows.map((row) => ({
     ...row,
     key: row.id,
     stars: row.stargazers.totalCount,
@@ -271,7 +271,7 @@ Notice how we're passing the `REPO_QUERY` that we previously defined into the `q
 <Query query={REPO_QUERY}>
   {({ loading, error, data }) => {
     // Wait for the request to complete
-    if (loading) return 'Loading...';
+    if (loading) return "Loading...";
 
     // Something went wrong with the data fetching
     if (error) return `Error! ${error.message}`;
@@ -318,9 +318,9 @@ We need to modify one aspect of the data table because if you expand a row, it s
 To do so, in `RepoTable.js`, add this look-up function as the first lines inside the `RepoTable`. This should go immediately before the component's `return()`.
 
 ```javascript path=src/content/RepoPage/RepoTable.js
-const getRowDescription = rowId => {
+const getRowDescription = (rowId) => {
   const row = rows.find(({ id }) => id === rowId);
-  return row ? row.description : '';
+  return row ? row.description : "";
 };
 ```
 
@@ -337,7 +337,7 @@ At this point, the first time that you visit the repositories page, we're queryi
 To do so, back to `RepoPage.js`, add the `DataTableSkeleton` import by modifying the existing `carbon-components-react` import.
 
 ```javascript path=src/content/RepoPage/RepoPage.js
-import { Link, DataTableSkeleton } from 'carbon-components-react';
+import { Link, DataTableSkeleton } from "carbon-components-react";
 ```
 
 Then replace the `if (loading) return 'Loading...';` with:
@@ -364,7 +364,7 @@ We'll be using [React Hooks](https://reactjs.org/docs/hooks-intro.html) to manag
 Import React's [useState](https://reactjs.org/docs/hooks-state.html) by modifying the `React` import.
 
 ```javascript path=src/content/RepoPage/RepoPage.js
-import React, { useState } from 'react';
+import React, { useState } from "react";
 ```
 
 Then initialize the new state variables that we'll use for pagination as the first lines inside the `RepoPage` component, above the outer `return()`.
@@ -416,7 +416,7 @@ Finally, let's add the `Pagination` to update our state variables and cause the
 Import `Pagination` by updating the `carbon-components-react` import.
 
 ```javascript path=src/content/RepoPage/RepoPage.js
-import { Link, DataTableSkeleton, Pagination } from 'carbon-components-react';
+import { Link, DataTableSkeleton, Pagination } from "carbon-components-react";
 ```
 
 Immediately after the `RepoTable` closing tag (`/>`), add the `Pagination` component using the state variables that we previously initialized.
diff --git a/src/pages/tutorial/react/step-4.mdx b/src/pages/tutorial/react/step-4.mdx
index a2e5a2521c3..c8d29f0b4d6 100644
--- a/src/pages/tutorial/react/step-4.mdx
+++ b/src/pages/tutorial/react/step-4.mdx
@@ -2,10 +2,10 @@
 title: 4. Creating components
 description: Welcome to Carbon! This tutorial will guide you in creating a React app with the Carbon Design System.
 tabs:
-  ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']
+  ["Overview", "Step 1", "Step 2", "Step 3", "Step 4", "Step 5", "Wrapping up"]
 ---
 
-import Preview from 'components/Preview';
+import Preview from "components/Preview";
 
 <PageDescription>
 
@@ -103,13 +103,13 @@ src/components/Info
 Import `_info.scss` in `app.scss` after all of the `carbon-component` imports.
 
 ```scss path=src/app.scss
-@import './components/Info/info.scss';
+@import "./components/Info/info.scss";
 ```
 
 Like our other components, `index.js` will serve as an entrypoint. Since `Info.js` will export mutliple components, we'll use the `*` wildcard in the entrypoint export.
 
 ```javascript path=src/components/Info/index.js
-export * from './Info';
+export * from "./Info";
 ```
 
 ### InfoSection component
@@ -140,9 +140,9 @@ We'll also:
 Using `props` we can render any heading and any number of children components (`InfoCard` that we'll build soon.)
 
 ```javascript path=src/components/Info/Info.js
-import React from 'react';
+import React from "react";
 
-const InfoSection = props => (
+const InfoSection = (props) => (
   <section className={`bx--row ${props.className} info-section`}>
     <div className="bx--col-md-8 bx--col-lg-4 bx--col-xlg-3">
       <h3 className="info-section__heading">{props.heading}</h3>
@@ -156,7 +156,7 @@ At this point let's add styling for the new class names that we just added.
 
 ```scss path=src/components/Info/_info.scss
 .info-section__heading {
-  @include carbon--type-style('heading-01');
+  @include carbon--type-style("heading-01");
 }
 ```
 
@@ -165,7 +165,7 @@ At this point let's add styling for the new class names that we just added.
 Next up we're going to build a component for columns 2 - 4, which currently looks like `<div className="bx--col-md-4 bx--col-lg-4">Carbon is Open</div>`. At the bottom of `Info.js`, add:
 
 ```javascript path=src/components/Info/Info.js
-const InfoCard = props => {
+const InfoCard = (props) => {
   return (
     <article className="info-card bx--col-md-4 bx--col-lg-4 bx--col-xlg-3 bx--offset-xlg-1">
       <h4 className="info-card__heading">{props.heading}</h4>
@@ -202,15 +202,15 @@ In doing so, we:
 Nothing is styled yet, but with our components built let's put them to use. In `LandingPage.js`, import the components towards the top of the file.
 
 ```javascript path=src/content/LandingPage/LandingPage.js
-import { InfoSection, InfoCard } from '../../components/Info';
+import { InfoSection, InfoCard } from "../../components/Info";
 ```
 
 While we're at the top of `LandingPage.js`, import the icons that we'll need as well.
 
 ```javascript path=src/content/LandingPage/LandingPage.js
-import Globe32 from '@carbon/icons-react/lib/globe/32';
-import PersonFavorite32 from '@carbon/icons-react/lib/person--favorite/32';
-import Application32 from '@carbon/icons-react/lib/application/32';
+import Globe32 from "@carbon/icons-react/lib/globe/32";
+import PersonFavorite32 from "@carbon/icons-react/lib/person--favorite/32";
+import Application32 from "@carbon/icons-react/lib/application/32";
 ```
 
 <InlineNotification>
@@ -317,7 +317,7 @@ Our `InfoCard` headings look to be too small. We need to increase their font siz
 
 ```scss path=src/components/Info/_info.scss
 .info-card__heading {
-  @include carbon--type-style('productive-heading-03');
+  @include carbon--type-style("productive-heading-03");
 }
 ```
 
@@ -326,16 +326,16 @@ Also, the design has the last word in each subheading as bold. To accomplish tha
 ```javascript path=src/components/Info/Info.js
 // Take in a phrase and separate the third word in an array
 function createArrayFromPhrase(phrase) {
-  const splitPhrase = phrase.split(' ');
+  const splitPhrase = phrase.split(" ");
   const thirdWord = splitPhrase.pop();
-  return [splitPhrase.join(' '), thirdWord];
+  return [splitPhrase.join(" "), thirdWord];
 }
 ```
 
 Then, update `InfoCard` to use `createArrayFromPhrase`.
 
 ```javascript path=src/components/Info/Info.js
-const InfoCard = props => {
+const InfoCard = (props) => {
   const splitHeading = createArrayFromPhrase(props.heading);
 
   return (
@@ -357,7 +357,7 @@ Finally, add the declaration block in `_info.scss` to set `InfoCard` body copy s
 .info-card__body {
   margin-top: $spacing-06;
   flex-grow: 1; // fill space so icons are bottom aligned
-  @include type-style('body-long-01');
+  @include type-style("body-long-01");
 
   // prevent large line lengths between small and medium viewports
   @include carbon--breakpoint-between(321px, md) {
diff --git a/src/pages/tutorial/react/step-5.mdx b/src/pages/tutorial/react/step-5.mdx
index f8e20c334ff..d2ce9ed9add 100644
--- a/src/pages/tutorial/react/step-5.mdx
+++ b/src/pages/tutorial/react/step-5.mdx
@@ -2,10 +2,10 @@
 title: 5. Deploying to IBM Cloud
 description: Welcome to Carbon! This tutorial will guide you in creating a React app with the Carbon Design System.
 tabs:
-  ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']
+  ["Overview", "Step 1", "Step 2", "Step 3", "Step 4", "Step 5", "Wrapping up"]
 ---
 
-import Preview from 'components/Preview';
+import Preview from "components/Preview";
 
 <PageDescription>
 
@@ -89,7 +89,7 @@ $feature-flags: (
   grid-columns-16: true,
 );
 
-@import 'carbon-components/scss/globals/scss/styles.scss';
+@import "carbon-components/scss/globals/scss/styles.scss";
 ```
 
 To give you an idea of what's all included, open up `node_modules/carbon-components/scss/globals/scss/styles.scss`. You'll see imports for components like accordion, slider, tooltip, etc. Since we aren't using those components, let's exclude them from our built stylesheets. Keeping the `$feature-flags` Sass map, replace the `styles.scss` import with:
@@ -100,17 +100,17 @@ $css--font-face: true;
 $css--plex: true;
 
 // Global styles
-@import 'carbon-components/scss/globals/scss/css--font-face';
-@import 'carbon-components/scss/globals/grid/grid';
+@import "carbon-components/scss/globals/scss/css--font-face";
+@import "carbon-components/scss/globals/grid/grid";
 
 // Carbon components
-@import 'carbon-components/scss/components/breadcrumb/breadcrumb';
-@import 'carbon-components/scss/components/button/button';
-@import 'carbon-components/scss/components/data-table/data-table';
-@import 'carbon-components/scss/components/link/link';
-@import 'carbon-components/scss/components/pagination/pagination';
-@import 'carbon-components/scss/components/tabs/tabs';
-@import 'carbon-components/scss/components/ui-shell/ui-shell';
+@import "carbon-components/scss/components/breadcrumb/breadcrumb";
+@import "carbon-components/scss/components/button/button";
+@import "carbon-components/scss/components/data-table/data-table";
+@import "carbon-components/scss/components/link/link";
+@import "carbon-components/scss/components/pagination/pagination";
+@import "carbon-components/scss/components/tabs/tabs";
+@import "carbon-components/scss/components/ui-shell/ui-shell";
 ```
 
 In comparing to the included `carbon-components/scss/globals/scss/styles.scss`, you may be asking what happened to importing `_vars.scss`, `_colors.scss`, `_theme.scss`, etc.?
diff --git a/src/pages/tutorial/react/wrapping-up.mdx b/src/pages/tutorial/react/wrapping-up.mdx
index 03836b8dbbc..710b896ffb7 100644
--- a/src/pages/tutorial/react/wrapping-up.mdx
+++ b/src/pages/tutorial/react/wrapping-up.mdx
@@ -2,7 +2,7 @@
 title: Wrapping up
 description: Welcome to Carbon! This tutorial will guide you in creating a React app with the Carbon Design System.
 tabs:
-  ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']
+  ["Overview", "Step 1", "Step 2", "Step 3", "Step 4", "Step 5", "Wrapping up"]
 ---
 
 <PageDescription>
diff --git a/src/pages/tutorial/vue/wrapping-up.mdx b/src/pages/tutorial/vue/wrapping-up.mdx
index b65dbecd921..f08b4416f7a 100644
--- a/src/pages/tutorial/vue/wrapping-up.mdx
+++ b/src/pages/tutorial/vue/wrapping-up.mdx
@@ -2,7 +2,7 @@
 title: Wrapping up
 description: Welcome to Carbon! This tutorial will guide you in creating a Vue app with the Carbon Design System.
 tabs:
-  ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']
+  ["Overview", "Step 1", "Step 2", "Step 3", "Step 4", "Step 5", "Wrapping up"]
 ---
 
 <PageDescription>
diff --git a/src/pages/updates/migration-guide/design.mdx b/src/pages/updates/migration-guide/design.mdx
index 31b0f5e2352..09b547df760 100644
--- a/src/pages/updates/migration-guide/design.mdx
+++ b/src/pages/updates/migration-guide/design.mdx
@@ -1,7 +1,7 @@
 ---
 title: Migration guide
 description: This guide includes everything you need to migrate your offering from an earlier version of Carbon to v10.
-tabs: ['Overview', 'Design', 'Develop']
+tabs: ["Overview", "Design", "Develop"]
 ---
 
 <PageDescription>
diff --git a/src/pages/updates/migration-guide/develop.mdx b/src/pages/updates/migration-guide/develop.mdx
index 58cf86b5814..b04fda7a112 100644
--- a/src/pages/updates/migration-guide/develop.mdx
+++ b/src/pages/updates/migration-guide/develop.mdx
@@ -1,7 +1,7 @@
 ---
 title: Migration guide
 description: This guide includes everything you need to migrate your offering from an older version of Carbon to v10.
-tabs: ['Overview', 'Design', 'Develop']
+tabs: ["Overview", "Design", "Develop"]
 ---
 
 <PageDescription>
diff --git a/src/pages/updates/migration-guide/overview.mdx b/src/pages/updates/migration-guide/overview.mdx
index 65de0828cbf..4c08c8f8f2b 100644
--- a/src/pages/updates/migration-guide/overview.mdx
+++ b/src/pages/updates/migration-guide/overview.mdx
@@ -1,7 +1,7 @@
 ---
 title: Migration guide
 description: This guide includes everything you need to migrate your offering from an older version of Carbon to v10.
-tabs: ['Overview', 'Design', 'Develop']
+tabs: ["Overview", "Design", "Develop"]
 ---
 
 <PageDescription>
diff --git a/src/styles/_grid-demo.scss b/src/styles/_grid-demo.scss
index d230edd7443..8867ef9062d 100644
--- a/src/styles/_grid-demo.scss
+++ b/src/styles/_grid-demo.scss
@@ -2,16 +2,16 @@
 // Set 16 column grid for examples only
 //---------------------------------------
 .grid-demo {
-  $prefix: 'bx-demo';
+  $prefix: "bx-demo";
   $feature-flags: (
     grid-columns-16: true,
   );
-  @import '~carbon-components/scss/globals/grid/grid';
-  @import '~carbon-components/scss/globals/scss/layout';
+  @import "~carbon-components/scss/globals/grid/grid";
+  @import "~carbon-components/scss/globals/scss/layout";
 }
 
 .bx-demo-sm {
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     display: none;
   }
 }
@@ -19,11 +19,11 @@
 .bx-demo-md {
   display: none;
 
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     display: inline;
   }
 
-  @include carbon--breakpoint('lg') {
+  @include carbon--breakpoint("lg") {
     display: none;
   }
 }
@@ -31,7 +31,7 @@
 .bx-demo-lg {
   display: none;
 
-  @include carbon--breakpoint('lg') {
+  @include carbon--breakpoint("lg") {
     display: inline;
   }
 }
@@ -40,7 +40,7 @@
 .hide-sm {
   display: none;
 
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     display: block;
   }
 }
@@ -48,7 +48,7 @@
 .hide-md {
   display: none;
 
-  @include carbon--breakpoint('lg') {
+  @include carbon--breakpoint("lg") {
     display: block;
   }
 }
@@ -71,26 +71,26 @@
   padding-right: $spacing-07;
 }
 
-.grid-demo [class*='col'] {
-  @include carbon--type-style('caption-01');
+.grid-demo [class*="col"] {
+  @include carbon--type-style("caption-01");
   padding-top: $spacing-05;
   min-height: 4rem;
   background-color: $carbon--blue-10;
   outline: 1px solid $carbon--blue-30;
 }
 
-.grid-demo--wide [class*='col'] {
+.grid-demo--wide [class*="col"] {
   background-color: $carbon--blue-20;
   padding-top: 0;
 }
 
-.grid-demo--narrow [class*='col'] {
+.grid-demo--narrow [class*="col"] {
   background-color: $carbon--teal-20;
   outline: 1px solid $carbon--teal-30;
   padding-top: 0;
 }
 
-.grid-demo--condensed [class*='col'] {
+.grid-demo--condensed [class*="col"] {
   background-color: $carbon--purple-30;
   outline: 1px solid $carbon--purple-30;
   padding-top: 0;
@@ -133,7 +133,7 @@
   display: block;
 }
 
-.aspect-ratio-demo [class*='col'] {
+.aspect-ratio-demo [class*="col"] {
   padding-bottom: $spacing-05;
 }
 
@@ -153,7 +153,7 @@
 // Shell collapsed/expanded
 //---------------------------------------
 .grid-demo .side-nav + .bx-demo--grid {
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     padding-left: $spacing-05;
   }
 }
@@ -166,7 +166,7 @@
   margin-left: $spacing-05;
   display: none;
 
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     display: block;
   }
 }
@@ -177,7 +177,7 @@
   display: block;
   height: 12rem;
 
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     position: static;
     height: auto;
   }
@@ -186,8 +186,8 @@
 //---------------------------------------
 // Code snippet override (full width)
 //---------------------------------------
-.grid-demo + pre > div[class*='Code-module--row'],
-.grid-demo--bleed + pre > div[class*='Code-module--row'] {
+.grid-demo + pre > div[class*="Code-module--row"],
+.grid-demo--bleed + pre > div[class*="Code-module--row"] {
   width: 100%;
   margin-bottom: $spacing-06;
 }
@@ -213,6 +213,6 @@
   padding-top: $spacing-04;
 }
 
-.grid-modes div[class*='Markdown-module--paragraph-row'] {
+.grid-modes div[class*="Markdown-module--paragraph-row"] {
   margin-bottom: $spacing-03;
 }
diff --git a/src/styles/_homepage.scss b/src/styles/_homepage.scss
index 999765c8e5a..1ab2da0c7a2 100644
--- a/src/styles/_homepage.scss
+++ b/src/styles/_homepage.scss
@@ -10,9 +10,9 @@
 }
 
 //make sure content is above dots
-.container--homepage div[class*='Main-module--main'],
-.container--homepage div[class*='Callout-module--grid'],
-.container--homepage div[class*='NextPrevious-module--wrapper'] {
+.container--homepage div[class*="Main-module--main"],
+.container--homepage div[class*="Callout-module--grid"],
+.container--homepage div[class*="NextPrevious-module--wrapper"] {
   position: relative;
   z-index: 2;
 }
@@ -23,12 +23,12 @@
   padding-top: 100%;
   position: relative;
 
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     padding-top: 50%;
   }
 
   // Match max height at lg breakpoint
-  @include carbon--breakpoint('lg') {
+  @include carbon--breakpoint("lg") {
     padding: 0;
     height: 560px;
   }
@@ -47,19 +47,19 @@
   padding-left: 0;
   padding-right: 0;
 
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     padding-left: $spacing-05;
     padding-right: $spacing-05;
   }
 
-  @include carbon--breakpoint('lg') {
+  @include carbon--breakpoint("lg") {
     margin-top: 0;
   }
 
   .bx--aspect-ratio--2x1 {
     padding-bottom: 100%;
 
-    @include carbon--breakpoint('md') {
+    @include carbon--breakpoint("md") {
       padding-bottom: 50%;
     }
   }
@@ -76,7 +76,7 @@
 .homepage-feature .bx--feature-card__img {
   padding-bottom: 50%;
 
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     padding-bottom: 0;
   }
 }
diff --git a/src/styles/_images.scss b/src/styles/_images.scss
index cab387fe3c9..126b172d83a 100644
--- a/src/styles/_images.scss
+++ b/src/styles/_images.scss
@@ -1,14 +1,14 @@
 // Adds white background color to all images
 .container .gatsby-resp-image-wrapper,
-.container img[src*='gif'],
-.container img[src*='svg'] {
+.container img[src*="gif"],
+.container img[src*="svg"] {
   background: $carbon--white-0;
 }
 
 // Removes white background from images inside cards/icons
 .bx--resource-card .gatsby-resp-image-wrapper,
-.bx--resource-card img[src*='gif'],
-.bx--resource-card img[src*='svg'] {
+.bx--resource-card img[src*="gif"],
+.bx--resource-card img[src*="svg"] {
   background: transparent;
 }
 
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 9b74d89e35c..146aa0d8b20 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -16,32 +16,32 @@ $base-font-size: 16px;
 /// @param {String} $type ['border'] - Type of outline from: `border`, `blurred`, `outline`, `invalid`, `reset`
 /// @example @include focus-outline('outline');
 /// @group global-helpers
-@mixin focus-outline($type: 'border') {
-  @if ($type == 'border') {
+@mixin focus-outline($type: "border") {
+  @if ($type == "border") {
     outline: 1px solid $focus;
   }
 
-  @if ($type == 'blurred') {
+  @if ($type == "blurred") {
     box-shadow: 0 0 0 3px $focus;
     outline: 1px solid transparent;
   }
 
-  @if ($type == 'outline') {
+  @if ($type == "outline") {
     outline: 2px solid $focus;
     outline-offset: -2px;
   }
 
-  @if ($type == 'outline-compat') {
+  @if ($type == "outline-compat") {
     border: 2px solid $focus;
     box-sizing: border-box;
   }
 
-  @if ($type == 'invalid') {
+  @if ($type == "invalid") {
     outline: 2px solid $support-01;
     outline-offset: -2px;
   }
 
-  @if ($type == 'reset') {
+  @if ($type == "reset") {
     outline: 2px solid transparent;
     outline-offset: -2px;
   }
diff --git a/src/styles/_overrides.scss b/src/styles/_overrides.scss
index 375770769f2..67c7456f375 100644
--- a/src/styles/_overrides.scss
+++ b/src/styles/_overrides.scss
@@ -1,7 +1,7 @@
 // Checkbox uses body text
 // https://github.com/carbon-design-system/carbon/issues/4545
-[class*='--checkbox-label'],
-[class*='accordion__content'] {
+[class*="--checkbox-label"],
+[class*="accordion__content"] {
   color: var(--cds-text-01, #161616);
 }
 
diff --git a/src/styles/_page.scss b/src/styles/_page.scss
index b482b9673c1..952374c6045 100644
--- a/src/styles/_page.scss
+++ b/src/styles/_page.scss
@@ -2,7 +2,7 @@
 // P
 //---------------------------------------
 .paragraph {
-  @include carbon--type-style('body-long-02');
+  @include carbon--type-style("body-long-02");
   margin-bottom: $spacing-06;
   padding-right: $spacing-07;
 }
@@ -13,12 +13,12 @@
   padding-left: $spacing-05;
 
   // 6 col
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     width: 75%;
   }
 
   // 8 col
-  @include carbon--breakpoint('lg') {
+  @include carbon--breakpoint("lg") {
     width: 66.667%;
   }
 }
@@ -35,10 +35,10 @@
 .page-h6,
 .list {
   width: 100%;
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     width: 75%;
   }
-  @include carbon--breakpoint('lg') {
+  @include carbon--breakpoint("lg") {
     width: 66.667%;
   }
 }
@@ -50,29 +50,29 @@
 .page-h1 {
   margin-top: $spacing-12;
   margin-bottom: $spacing-05;
-  @include carbon--type-style('expressive-heading-05', true);
+  @include carbon--type-style("expressive-heading-05", true);
 }
 
 .page-h2 {
   margin-top: $spacing-11;
   margin-bottom: $spacing-05;
-  @include carbon--type-style('expressive-heading-04', true);
+  @include carbon--type-style("expressive-heading-04", true);
 }
 
 .page-h3 {
   margin-top: $spacing-10;
   margin-bottom: $spacing-05;
-  @include carbon--type-style('expressive-heading-03', true);
+  @include carbon--type-style("expressive-heading-03", true);
 }
 
 .page-h4 {
   margin-top: $spacing-04;
-  @include carbon--type-style('heading-02');
+  @include carbon--type-style("heading-02");
 }
 
 .page-h5,
 .page-h6 {
   // h5 and h6 intentionally mimic one another
   margin-top: $spacing-04;
-  @include carbon--type-style('heading-01');
+  @include carbon--type-style("heading-01");
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index bf9e0d53d45..4778cf5ccf0 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,24 +1,24 @@
-@import 'mixins';
+@import "mixins";
 
-@import 'page';
-@import 'images';
-@import 'homepage';
-@import 'grid-demo';
-@import 'overrides';
-@import 'structured-list';
+@import "page";
+@import "images";
+@import "homepage";
+@import "grid-demo";
+@import "overrides";
+@import "structured-list";
 
-@import 'src/components/ColorBlock/color-block.scss';
-@import 'src/components/ColorGrid/color-grid.scss';
-@import 'src/components/ColorTokenTable/color-token-table.scss';
-@import 'src/components/ComponentOverview/component-overview.scss';
-@import 'src/components/ComponentStatus/component-status.scss';
-@import 'src/components/GlossaryComponent/GlossaryList/glossary-list.scss';
-@import 'src/components/GlossaryComponent/GlossaryNav/glossary-nav.scss';
-@import 'src/components/TypeScaleTable/type-scale-table.scss';
-@import 'src/components/TypeWeight/type-weight.scss';
-@import 'src/components/HomepageVideo/homepage-video.scss';
-@import 'src/components/TypesetStyle/typeset-style.scss';
-@import 'src/components/TypesetStyle/typeset-example.scss';
-@import 'src/components/OverviewCard/overview-card.scss';
-@import 'src/components/OverviewCard/overview-card-group.scss';
-@import 'src/pages/data-visualization/data-visualization.scss';
+@import "src/components/ColorBlock/color-block.scss";
+@import "src/components/ColorGrid/color-grid.scss";
+@import "src/components/ColorTokenTable/color-token-table.scss";
+@import "src/components/ComponentOverview/component-overview.scss";
+@import "src/components/ComponentStatus/component-status.scss";
+@import "src/components/GlossaryComponent/GlossaryList/glossary-list.scss";
+@import "src/components/GlossaryComponent/GlossaryNav/glossary-nav.scss";
+@import "src/components/TypeScaleTable/type-scale-table.scss";
+@import "src/components/TypeWeight/type-weight.scss";
+@import "src/components/HomepageVideo/homepage-video.scss";
+@import "src/components/TypesetStyle/typeset-style.scss";
+@import "src/components/TypesetStyle/typeset-example.scss";
+@import "src/components/OverviewCard/overview-card.scss";
+@import "src/components/OverviewCard/overview-card-group.scss";
+@import "src/pages/data-visualization/data-visualization.scss";