Run stylelint on documentation app

hashicorp · Dec 22, 2023 · 782027d · 782027d
1 parent e88cce3
commit 782027d
Show file tree

Hide file tree

Showing 20 changed files with 123 additions and 127 deletions.
diff --git a/documentation/app/components/component-api/index.hbs b/documentation/app/components/component-api/index.hbs
@@ -2,34 +2,34 @@
   Copyright (c) HashiCorp, Inc.
 }}
 
-<dl class="doc-componentApi">
-  <div class="doc-componentApi-name">
+<dl class="doc-component-api">
+  <div class="doc-component-api-name">
     <dt>Name</dt>
     <dd><Hds::Badge @text={{@name}} @type="inverted" /></dd>
   </div>
 
-  <div class="doc-componentApi-type-required-group">
-    <div class="doc-componentApi-type">
+  <div class="doc-component-api-type-required-group">
+    <div class="doc-component-api-type">
       {{#if @type}}
         <dt>Type</dt>
         <dd class="hds-font-family-mono-code">{{@type}}</dd>
       {{/if}}
     </div>
 
     {{#if @isRequired}}
-      <Hds::Badge @text="Required" class="doc-componentApi-required" />
+      <Hds::Badge @text="Required" class="doc-component-api-required" />
     {{/if}}
   </div>
 
   {{#if (and @default (not @values))}}
-    <div class="doc-componentApi-default">
+    <div class="doc-component-api-default">
       <dt>Default</dt>
       <dd><Hds::Badge @text={{@default}} @type="inverted" /></dd>
     </div>
   {{/if}}
 
   {{#if @values}}
-    <div class="doc-componentApi-values">
+    <div class="doc-component-api-values">
       <dt>Values</dt>
       <dd>
         {{#each @values as |value|}}
@@ -43,7 +43,7 @@
   {{/if}}
 
   {{#if (has-block)}}
-    <div class="doc-componentApi-description">
+    <div class="doc-component-api-description">
       <dt>Description</dt>
       <dd>{{yield}}</dd>
     </div>

diff --git a/documentation/app/components/in-page-nav/index.hbs b/documentation/app/components/in-page-nav/index.hbs
@@ -2,8 +2,8 @@
   Copyright (c) HashiCorp, Inc.
 }}
 
-<aside class="doc-InPageNav">
-  <h4 class="doc-InPageNav-label">On this page</h4>
+<aside class="doc-in-page-nav">
+  <h4 class="doc-in-page-nav-label">On this page</h4>
   <nav>
     <ul>
       {{yield (hash Link=(component "in-page-nav/link"))}}

diff --git a/documentation/app/components/in-page-nav/link.hbs b/documentation/app/components/in-page-nav/link.hbs
@@ -2,6 +2,6 @@
   Copyright (c) HashiCorp, Inc.
 }}
 
-<li class="doc-InPageNav-link doc-InPageNav-link--depth-{{or @depth '1'}}">
+<li class="doc-in-page-nav-link doc-in-page-nav-link-depth-{{or @depth '1'}}">
   <a href={{or @section "#"}}>{{yield}}</a>
 </li>
diff --git a/documentation/app/components/page-header/index.hbs b/documentation/app/components/page-header/index.hbs
@@ -4,11 +4,11 @@
 
 {{page-title @title}}
 
-<header class="doc-PageHeader">
-  <div class="doc-PageHeader-title">
+<header class="doc-page-header">
+  <div class="doc-page-header-title">
     <h1>{{@title}}</h1>
     {{#if this.badge}}
-      <div class="doc-PageHeader-badge">
+      <div class="doc-page-header-badge">
         <Hds::Badge
           @text={{this.badge.text}}
           @color={{this.badge.color}}
@@ -17,7 +17,7 @@
       </div>
     {{/if}}
     {{#if (or @figma @github)}}
-      <div class="doc-PageHeader-links">
+      <div class="doc-page-header-links">
         {{#if @figma}}
           <Hds::Link::Standalone
             @icon="figma-color"
@@ -37,7 +37,7 @@
     {{/if}}
   </div>
   {{! yield the description max width 880}}
-  <p class="doc-PageHeader-description">
+  <p class="doc-page-header-description">
     {{yield}}
   </p>
 </header>
diff --git a/documentation/app/components/preview-block/index.hbs b/documentation/app/components/preview-block/index.hbs
@@ -2,7 +2,7 @@
   Copyright (c) HashiCorp, Inc.
 }}
 
-<div class="doc-PreviewBlock">
+<div class="doc-preview-block">
   {{yield (hash Preview=(component "preview-block/preview"))}}
   {{yield (hash Code=(component "preview-block/code"))}}
 </div>
diff --git a/documentation/app/components/preview-block/preview.hbs b/documentation/app/components/preview-block/preview.hbs
@@ -2,6 +2,6 @@
   Copyright (c) HashiCorp, Inc.
 }}
 
-<div class="doc-PreviewBlock-content">
+<div class="doc-preview-block-content">
   {{yield}}
 </div>
diff --git a/documentation/app/styles/app.scss b/documentation/app/styles/app.scss
@@ -3,12 +3,11 @@
  */
 @use "consul-ui-toolkit";
 @use "@hashicorp/design-system-components";
-
 @import "./components/list-item";
 @import "./components/component-api";
 @import "./components/page-header";
-@import "./components/preview-block.scss";
-@import "./components/in-page-nav.scss";
+@import "./components/preview-block";
+@import "./components/in-page-nav";
 @import "./pages/list";
 @import "./pages/list-item";
 @import "./pages/list-item-template";
@@ -28,7 +27,7 @@ html {
   line-height: var(--token-typography-display-200-line-height);
   font-family: var(--token-typography-font-stack-text);
   color: var(--token-color-foreground-strong);
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   text-size-adjust: 100%;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
@@ -94,11 +93,7 @@ li {
 .application {
   display: grid;
   height: 100vh;
-  grid-template-columns: 280px auto;
-  grid-template-areas:
-    "nav container"
-    "nav footer";
-  grid-template-rows: 1fr auto;
+  grid-template: "nav container" 1fr "nav footer" auto / 280px auto;
 
   > .hds-side-nav {
     grid-area: nav;
@@ -112,14 +107,15 @@ li {
     grid-area: container;
     display: flex;
     flex-direction: column;
-    padding: 2.5rem 2.5rem;
+    padding: 2.5rem;
     align-items: start;
     max-width: 1162px;
 
     > .hds-tabs {
       width: 100%;
     }
 
+    /* stylelint-disable selector-class-pattern -- Using hds classes */
     .content,
     .hds-tabs__panel {
       margin-top: 2rem;
@@ -128,6 +124,7 @@ li {
         margin-top: 0;
       }
     }
+    /* stylelint-enable selector-class-pattern */
 
     .hds-alert {
       margin-bottom: 2.5rem;
@@ -161,11 +158,11 @@ li {
     }
   }
 
-  .doc-Page {
+  .doc-page {
     display: flex;
     justify-content: space-between;
 
-    .doc-Page-content {
+    .doc-page-content {
       max-width: 800px;
       flex-grow: 1;
 

diff --git a/documentation/app/styles/components/component-api.scss b/documentation/app/styles/components/component-api.scss
@@ -2,7 +2,7 @@
  * Copyright (c) HashiCorp, Inc.
  */
 
-.doc-componentApi {
+.doc-component-api {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-areas: "name type";
@@ -15,7 +15,6 @@
   width: 100%;
 
   dt {
-    font-weight: var(--token-typography-display-100-font-size);
     font-weight: var(--token-typography-font-weight-semibold);
     margin-bottom: 0.5rem;
   }
@@ -24,29 +23,29 @@
     margin-left: 0;
   }
 
-  .doc-componentApi-name {
+  .doc-component-api-name {
     grid-area: name;
   }
 
-  .doc-componentApi-type-required-group {
+  .doc-component-api-type-required-group {
     grid-area: type;
     display: flex;
     justify-content: space-between;
   }
 
-  .doc-componentApi-required {
+  .doc-component-api-required {
     align-self: start;
   }
 
-  .doc-componentApi-default {
+  .doc-component-api-default {
     grid-column: 1/4;
   }
 
-  .doc-componentApi-values {
+  .doc-component-api-values {
     grid-column: 1/4;
   }
 
-  .doc-componentApi-description {
+  .doc-component-api-description {
     grid-column: 1/4;
   }
 }
diff --git a/documentation/app/styles/components/in-page-nav.scss b/documentation/app/styles/components/in-page-nav.scss
@@ -2,14 +2,14 @@
  * Copyright (c) HashiCorp, Inc.
  */
 
-.doc-InPageNav {
+.doc-in-page-nav {
   display: none;
   width: 240px;
   align-self: start;
   position: sticky;
   top: 3rem;
 
-  .doc-InPageNav-label {
+  .doc-in-page-nav-label {
     margin-bottom: 1.09rem;
   }
 
@@ -21,36 +21,36 @@
     margin-top: 0;
 
     li {
-      border-left: 3px solid rgba(0, 0, 0, 0);
+      border-left: 3px solid rgb(0 0 0 / 0%);
       line-height: var(--token-typography-display-500-line-height);
       margin-bottom: 0.5rem;
 
-      &.doc-InPageNav-link--depth-1 {
+      &.doc-in-page-nav-link-depth-1 {
         padding-left: 0.75rem;
       }
 
-      &.doc-InPageNav-link--depth-2 {
+      &.doc-in-page-nav-link-depth-2 {
         padding-left: 1.5rem;
       }
 
+      a {
+        color: var(--token-color-foreground-faint);
+        text-decoration: none;
+        display: inline-block;
+        width: 100%;
+      }
+
       &:hover {
         border-left: 3px solid black;
 
         a {
           color: black;
         }
       }
-
-      a {
-        color: var(--token-color-foreground-faint);
-        text-decoration: none;
-        display: inline-block;
-        width: 100%;
-      }
     }
   }
 
-  @media screen and (min-width: 1500px) {
+  @media screen and (width >= 1500px) {
     display: flex;
     flex-direction: column;
   }

diff --git a/documentation/app/styles/components/list-item.scss b/documentation/app/styles/components/list-item.scss
@@ -8,8 +8,9 @@
   gap: 16px;
 }
 
-pre, code {
+pre,
+code {
   background-color: black;
   color: white;
   padding: 10px;
-}
+}
diff --git a/documentation/app/styles/components/page-header.scss b/documentation/app/styles/components/page-header.scss
@@ -2,11 +2,11 @@
  * Copyright (c) HashiCorp, Inc.
  */
 
-.doc-PageHeader {
+.doc-page-header {
   max-width: 1080px;
   width: 100%;
 
-  .doc-PageHeader-title {
+  .doc-page-header-title {
     display: flex;
     gap: 1rem;
     align-items: center;
@@ -18,16 +18,16 @@
     }
   }
 
-  .doc-PageHeader-badge {
+  .doc-page-header-badge {
     flex-grow: 1;
   }
 
-  .doc-PageHeader-links {
+  .doc-page-header-links {
     display: flex;
     gap: 13px;
   }
 
-  .doc-PageHeader-description {
+  .doc-page-header-description {
     max-width: 880px;
     margin-top: 0;
     color: var(--token-color-foreground-faint);