chore: run prettier

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"
     ]
   }

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;
 }
 

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%;

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;
   }
 }

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,15 +47,15 @@
 .link-list {
   display: flex;
   overflow-x: scroll;
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     overflow-x: visible;
   }
 }
 
 .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;

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;
 }
 

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;

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;

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;

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");
 }

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%;

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%;

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;
     }
   }