fix(components): 💅 ‘format’ prettier

Author: aklkv

packages/components/.prettierrc.cjs

@@ -2,6 +2,7 @@
 
 module.exports = {
   plugins: ['prettier-plugin-ember-template-tag'],
+  trailingComma: 'es5',
   overrides: [
     {
       files: '*.{js,gjs,ts,gts,mjs,mts,cjs,cts}',
@@ -11,10 +12,10 @@ module.exports = {
       },
     },
     {
-      files: '*.hbs',
+      files: '*.{hbs,scss}',
       options: {
         printWidth: 120,
       },
     },
   ],
-};
+};

packages/components/CHANGELOG-FIGMA-COMPONENTS.md

@@ -70,10 +70,10 @@ In many cases, replacing v1.0 library components with the components in the Figm
 - Added an `alignment` property which can be set at the root level to `left` or `center`.
 - The footer now supports up to three actions at once. The actions are now organized in accordance with our [Button Organization](/patterns/button-organization) pattern.
 - Updated several visual styles including:
-    - Removing the divider
-    - Reducing the title from `Display/400/Bold` to `Display/300/Bold`
-    - Changing the icon and the title color from `Foreground/Faint` to `Foreground/Strong`
-    - Changing the body text color from `Foreground/Faint` to `Foreground/Primary`
+  - Removing the divider
+  - Reducing the title from `Display/400/Bold` to `Display/300/Bold`
+  - Changing the icon and the title color from `Foreground/Faint` to `Foreground/Strong`
+  - Changing the body text color from `Foreground/Faint` to `Foreground/Primary`
 
 _Adding support for three actions within the `ApplicationState` results in a breaking change to the previous actions. Before updating the library, we recommend annotating the text and icon name (with a comment or otherwise) in files that are in progress or still being referenced by engineering._
 

packages/components/CHANGELOG-FIGMA-PATTERNS.md

@@ -2,4 +2,4 @@
 
 ## December 20th, 2024
 
-Released HDS Patterns UI Kit v2.0.
+Released HDS Patterns UI Kit v2.0.

packages/components/CHANGELOG-FIGMA-UTILITIES.md

@@ -10,4 +10,4 @@ Released [HDS Wireframes UI Kit](https://www.figma.com/design/w0ukydeAsbv6sJirLx
 
 ## August 30th, 2024
 
-Released [HDS A11y Helper Annotations Kit](https://www.figma.com/design/EEfM1jjqLfUv59eYLopn5x/HDS-A11Y-Helper-UI-Kit?m=auto)
+Released [HDS A11y Helper Annotations Kit](https://www.figma.com/design/EEfM1jjqLfUv59eYLopn5x/HDS-A11Y-Helper-UI-Kit?m=auto)

packages/components/CHANGELOG.md

@@ -1545,7 +1545,7 @@ Alternatively, you can import the CSS by adding this configuration in `ember-cli
 
 ```js
 app.import(
-  'node_modules/@hashicorp/design-system-components/dist/styles/@hashicorp/design-system-components.css'
+  "node_modules/@hashicorp/design-system-components/dist/styles/@hashicorp/design-system-components.css"
 );
 ```
 

packages/components/CONTRIBUTING.md

@@ -2,46 +2,46 @@
 
 ## Installation
 
-* `git clone <repository-url>`
-* `pnpm install`
-* `cd packages/components`
+- `git clone <repository-url>`
+- `pnpm install`
+- `cd packages/components`
 
 ## Building
 
-* `pnpm build`
+- `pnpm build`
 
 To set a watcher on files located in `src` and rebuild on change
 
-* `pnpm start`
+- `pnpm start`
 
 ## Linting
 
-* `pnpm lint`
-* `pnpm lint:fix`
+- `pnpm lint`
+- `pnpm lint:fix`
 
 ## Stylelinting
 
-* `pnpm lint:css`
-* `pnpm lint:css:fix`
+- `pnpm lint:css`
+- `pnpm lint:css:fix`
 
 Notice: to have VSCode autofix the code on save, you have to:
 
-* install the [Stylelint extension](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
-* in either the user or workspace settings add the entry `"source.fixAll.stylelint": true` to the `editor.codeActionsOnSave` option
+- install the [Stylelint extension](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
+- in either the user or workspace settings add the entry `"source.fixAll.stylelint": true` to the `editor.codeActionsOnSave` option
 
 ## Running tests
 
 The associated test application is located at the root of the monorepo, in `showcase`
 
-* `cd showcase`
-* `ember test` – Runs the test suite on the current Ember version
-* `ember test --server` – Runs the test suite in "watch mode"
-* `ember try:each` – Runs the test suite against multiple Ember versions
+- `cd showcase`
+- `ember test` – Runs the test suite on the current Ember version
+- `ember test --server` – Runs the test suite in "watch mode"
+- `ember try:each` – Runs the test suite against multiple Ember versions
 
 ## Running the `showcase` application
 
-* `cd showcase`
-* `pnpm start`
-* Visit the application at [http://localhost:4200](http://localhost:4200).
+- `cd showcase`
+- `pnpm start`
+- Visit the application at [http://localhost:4200](http://localhost:4200).
 
 For more information on using ember-cli, visit [https://cli.emberjs.com/release/](https://cli.emberjs.com/release/).

packages/components/NEW-COMPONENT-CHECKLIST.md

@@ -14,7 +14,9 @@ The following should be available as resources for the Project Kickoff.
 A project kickoff will be scheduled before the project start date. The kickoff will be used to align on project scope, timelines, and milestones and as a space to discuss any open questions. In attendance should be Design Systems Team leadership, lead Designer and Engineer on the project, and Design/Engineer buddies (if applicable).
 
 ## Design Checklist
+
 The design checklist has 4 primary parts:
+
 1. component design
 2. testing
 3. documentation
@@ -23,6 +25,7 @@ The design checklist has 4 primary parts:
 The design process is largely cyclical, so some steps may be repeated until final approval.
 
 ### Component Design
+
 - [ ] [create a branch](https://help.figma.com/hc/en-us/articles/360063144053-Create-branches-and-merge-changes#Create_a_branch) in the [product components ui kit](https://www.figma.com/file/noyY6dUMDYjmySpHcMjhkN/HDS-Product---Components)
 - [ ] add a new page for the component, as needed
 - [ ] copy & paste the [new component template](https://www.figma.com/file/noyY6dUMDYjmySpHcMjhkN/HDS-Product---Components?type=design&node-id=46856-287&mode=design&t=V4zCk5Jv07PcHYzZ-4) to the new page
@@ -59,6 +62,7 @@ The design process is largely cyclical, so some steps may be repeated until fina
   - let them know it's been approved and answer any remaining questions
 
 ### Component Testing
+
 - [ ] prepare for testing
   - [ ] lock the components
   - [ ] change the badge in the banner to "Experimental"
@@ -72,24 +76,27 @@ The design process is largely cyclical, so some steps may be repeated until fina
 - [ ] if iterations are needed, work through the process until approved (don't forget to branch!)
 
 ### Documentation
+
 - [ ] while the component is being tested, write the documentation
   - artifacts should include:
     - design guidelines
     - specifications
     - relevant accessibility details
 
 ### Release in Figma
+
 Once key stakeholders have tested the component and iterations are approved, prepare for a final release of the component.
 
 - [ ] add a changelog entry to [CHANGELOG-FIGMA-COMPONENTS.md](https://github.com/hashicorp/design-system/blob/main/packages/components/CHANGELOG-FIGMA-COMPONENTS.md)
 - [ ] if changes were made, publish the component
 - [ ] once the code has been released, communicate the release in the slack channel [#team-design-systems](https://hashicorp.slack.com/archives/C7KTUHNUS)
 
-
 ## Engineering Checklist
+
 The engineering checklist has six parts: creating the feature branch, component template, component backing class, component style, tests, and documentation.
 
 ### Dependency
+
 - Since we are trying to align the component API naming with the same terms used in the Figma file, it is likely useful to have a fairly stable Figma design before we create a component; it should definitely be finalized before the component ships, however.
 
 ### Component Creation

packages/components/src/styles/@hashicorp/design-system-power-select-overrides.scss

@@ -25,7 +25,9 @@
     background-color: var(--token-form-control-base-surface-color-default);
     background-image: var(--token-form-select-background-image-data-url);
     background-repeat: no-repeat;
-    background-position: right var(--token-form-select-background-image-position-right-x) center, top 8px left 20px;
+    background-position:
+      right var(--token-form-select-background-image-position-right-x) center,
+      top 8px left 20px;
     background-size: var(--token-form-select-background-image-size) var(--token-form-select-background-image-size);
     border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
     border-radius: var(--token-form-control-border-radius);
@@ -268,7 +270,6 @@
     }
   }
 
-
   .hds-power-select__after-options {
     padding: 8px;
     color: var(--token-color-foreground-primary);

packages/components/src/styles/components/accordion.scss

@@ -88,7 +88,8 @@
   --hds-accordion-item-focus-ring-offset: 3px;
   border-bottom: 1px solid var(--token-color-border-primary);
 
-  &.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static) > .hds-disclosure-primitive__toggle {
+  &.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static)
+    > .hds-disclosure-primitive__toggle {
     &:hover,
     &.mock-hover {
       .hds-accordion-item__toggle {
@@ -112,13 +113,16 @@
   display: flex;
   gap: var(--hds-accordion-item-gap);
   align-items: center;
-  padding: var(--hds-accordion-item-toggle-padding) var(--hds-accordion-item-toggle-padding) var(--hds-accordion-item-toggle-padding) var(--hds-accordion-item-toggle-padding-left);
+  padding: var(--hds-accordion-item-toggle-padding) var(--hds-accordion-item-toggle-padding)
+    var(--hds-accordion-item-toggle-padding) var(--hds-accordion-item-toggle-padding-left);
 }
 
 .hds-accordion-item__button {
   padding: 0;
 
-  &:hover { cursor: pointer; }
+  &:hover {
+    cursor: pointer;
+  }
 
   .hds-icon {
     @media (prefers-reduced-motion: no-preference) {
@@ -134,7 +138,12 @@
 
 // entire toggle area is interactive
 .hds-accordion-item__button--parent-does-not-contain-interactive {
-  @include hds-focus-ring-with-pseudo-element($top: var(--hds-accordion-item-focus-ring-offset), $right: var(--hds-accordion-item-focus-ring-offset), $bottom: var(--hds-accordion-item-focus-ring-offset), $left: var(--hds-accordion-item-focus-ring-offset));
+  @include hds-focus-ring-with-pseudo-element(
+    $top: var(--hds-accordion-item-focus-ring-offset),
+    $right: var(--hds-accordion-item-focus-ring-offset),
+    $bottom: var(--hds-accordion-item-focus-ring-offset),
+    $left: var(--hds-accordion-item-focus-ring-offset)
+  );
 
   position: static;
   display: flex;
@@ -180,7 +189,8 @@
 
 .hds-accordion-item__content {
   .hds-accordion-item & {
-    padding: var(--hds-accordion-item-content-padding-top) var(--hds-accordion-item-content-padding-right) var(--hds-accordion-item-content-padding-bottom) var(--hds-accordion-item-content-padding-left);
+    padding: var(--hds-accordion-item-content-padding-top) var(--hds-accordion-item-content-padding-right)
+      var(--hds-accordion-item-content-padding-bottom) var(--hds-accordion-item-content-padding-left);
   }
 }
 

packages/components/src/styles/components/advanced-table.scss

@@ -12,7 +12,9 @@
 
 $hds-advanced-table-border-radius: var(--token-border-radius-medium);
 $hds-advanced-table-border-width: 1px;
-$hds-advanced-table-inner-border-radius: calc(#{$hds-advanced-table-border-radius} - #{$hds-advanced-table-border-width});
+$hds-advanced-table-inner-border-radius: calc(
+  #{$hds-advanced-table-border-radius} - #{$hds-advanced-table-border-width}
+);
 $hds-advanced-table-border-color: var(--token-color-border-primary);
 $hds-advanced-table-header-height: 48px;
 $hds-advanced-table-cell-padding-medium: 14px 16px 13px 16px; // the 1px difference is to account for the bottom border
@@ -34,8 +36,7 @@ $hds-advanced-table-cell-padding-tall: 22px 16px 21px 16px; // the 1px differenc
 .hds-advanced-table,
 .hds-advanced-table__th,
 .hds-advanced-table__td {
-  border: calc(#{$hds-advanced-table-border-width} / 2) solid
-    $hds-advanced-table-border-color;
+  border: calc(#{$hds-advanced-table-border-width} / 2) solid $hds-advanced-table-border-color;
 }
 
 // ----------------------------------------------------------------
@@ -60,12 +61,7 @@ $hds-advanced-table-cell-padding-tall: 22px 16px 21px 16px; // the 1px differenc
 
       &:focus,
       &.mock-hover {
-        @include hds-focus-ring-with-pseudo-element(
-          $top: -1px,
-          $right: -1px,
-          $bottom: -1px,
-          $left: -1px
-        );
+        @include hds-focus-ring-with-pseudo-element($top: -1px, $right: -1px, $bottom: -1px, $left: -1px);
       }
     }
 
@@ -113,8 +109,7 @@ $hds-advanced-table-cell-padding-tall: 22px 16px 21px 16px; // the 1px differenc
 
   &.hds-advanced-table__thead--sticky.hds-advanced-table__thead--is-pinned {
     // need to add 1px to offset `top: -1px`
-    border-top: calc(#{$hds-advanced-table-border-width} / 2 + 1px) solid
-      $hds-advanced-table-border-color;
+    border-top: calc(#{$hds-advanced-table-border-width} / 2 + 1px) solid $hds-advanced-table-border-color;
     border-bottom: 3px solid $hds-advanced-table-border-color;
 
     .hds-advanced-table__tr {
@@ -208,7 +203,7 @@ $hds-advanced-table-cell-padding-tall: 22px 16px 21px 16px; // the 1px differenc
   .hds-advanced-table__tr {
     display: contents;
     color: var(--token-color-foreground-primary);
-  
+
     // striped rows
 
     .hds-advanced-table--striped &:nth-child(even) {
@@ -248,12 +243,7 @@ $hds-advanced-table-cell-padding-tall: 22px 16px 21px 16px; // the 1px differenc
     background-color: var(--token-color-surface-primary);
 
     &:focus {
-      @include hds-focus-ring-with-pseudo-element(
-        $top: -1px,
-        $right: -1px,
-        $bottom: -1px,
-        $left: -1px
-      );
+      @include hds-focus-ring-with-pseudo-element($top: -1px, $right: -1px, $bottom: -1px, $left: -1px);
     }
 
     // density
@@ -296,11 +286,11 @@ $hds-advanced-table-cell-padding-tall: 22px 16px 21px 16px; // the 1px differenc
   .hds-advanced-table__th,
   .hds-advanced-table__td {
     .hds-advanced-table--valign-top & {
-        align-items: flex-start;
+      align-items: flex-start;
     }
 
     .hds-advanced-table--valign-middle & {
-        align-items: center;
+      align-items: center;
     }
 
     .hds-advanced-table--valign-baseline & {
@@ -309,7 +299,7 @@ $hds-advanced-table-cell-padding-tall: 22px 16px 21px 16px; // the 1px differenc
       
         we decided as a team to match the Table behavior instead of actually setting align-items to baseline to mitigate the difference.
       */
-        align-items: center;
+      align-items: center;
     }
   }
 
@@ -322,25 +312,27 @@ $hds-advanced-table-cell-padding-tall: 22px 16px 21px 16px; // the 1px differenc
   .hds-advanced-table__tr--parent-row {
     .hds-advanced-table__th:not(:first-child),
     .hds-advanced-table__td:not(:first-child) {
-      border-left:0
+      border-left: 0;
     }
 
     .hds-advanced-table__th:not(:last-child),
     .hds-advanced-table__td:not(:last-child) {
-      border-right:0
+      border-right: 0;
     }
   }
 }
 
 .hds-advanced-table--nested {
   .hds-advanced-table__tr {
-    .hds-advanced-table__th, .hds-advanced-table__td {
-      background-color: var(--token-color-surface-faint);  
+    .hds-advanced-table__th,
+    .hds-advanced-table__td {
+      background-color: var(--token-color-surface-faint);
     }
   }
 
   .hds-advanced-table__tr.hds-advanced-table__tr--parent-row {
-    .hds-advanced-table__th, .hds-advanced-table__td {
+    .hds-advanced-table__th,
+    .hds-advanced-table__td {
       background-color: var(--token-color-surface-primary);
     }
   }

packages/components/src/styles/components/alert.scss

@@ -145,7 +145,9 @@
 
   &.hds-alert--type-inline {
     background-color: var(--token-color-surface-faint);
-    border-color: var(--token-color-border-strong); // notice: in the "neutral" color the "inline" has a slightly darker border color compared to the others to increase contrast (eg. could be used on a light gray background)
+    border-color: var(
+      --token-color-border-strong
+    ); // notice: in the "neutral" color the "inline" has a slightly darker border color compared to the others to increase contrast (eg. could be used on a light gray background)
   }
 
   // different color by design