@hashicorp/design-system-components 3.1.2 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @hashicorp/design-system-components
 
+## 3.2.0
+
+### Minor Changes
+
+`CodeBlock` - Added language support for Ruby syntax
+
+<small>[#1834](https://github.com/hashicorp/design-system/pull/1834)</small>
+
+---
+
+`Hds::Table` - updated `@columns` object to support `isVisuallyHidden` argument
+
+- `Hds::Table::Th` - updated to support `isVisuallyHidden` argument
+
+<small>[#1819](https://github.com/hashicorp/design-system/pull/1819)</small>
+
+---
+
+### Patch Changes
+
+`SideNav` - Reduced the width of `SideNav::ToggleButton`
+
+<small>[#1807](https://github.com/hashicorp/design-system/pull/1807)</small>
+
+---
+
+**🔄 Updated dependencies:**
+
+- @hashicorp/ember-flight-icons@4.0.4
+
 ## 3.1.2
 
 ### Patch Changes

package/addon/components/hds/code-block/index.js

@@ -20,6 +20,7 @@ import 'prismjs/components/prism-go';
 import 'prismjs/components/prism-hcl';
 import 'prismjs/components/prism-json';
 import 'prismjs/components/prism-log';
+import 'prismjs/components/prism-ruby';
 import 'prismjs/components/prism-shell-session';
 import 'prismjs/components/prism-yaml';
 

package/addon/components/hds/table/index.hbs

@@ -22,7 +22,11 @@
               {{column.label}}
             </Hds::Table::ThSort>
           {{else}}
-            <Hds::Table::Th @align={{column.align}} @width={{column.width}}>{{column.label}}</Hds::Table::Th>
+            <Hds::Table::Th
+              @align={{column.align}}
+              @width={{column.width}}
+              @isVisuallyHidden={{column.isVisuallyHidden}}
+            >{{column.label}}</Hds::Table::Th>
           {{/if}}
         {{/each}}
       </Hds::Table::Tr>

package/addon/components/hds/table/th.hbs

@@ -3,5 +3,9 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 <th class={{this.classNames}} {{style width=@width minWidth=@width}} ...attributes scope={{(or @scope "col")}}>
-  {{yield}}
+  {{#if @isVisuallyHidden}}
+    <span class="sr-only">{{yield}}</span>
+  {{else}}
+    {{yield}}
+  {{/if}}
 </th>

package/app/styles/@hashicorp/design-system-components.scss

@@ -17,7 +17,6 @@
 @use "../components/app-footer";
 @use "../components/app-frame";
 @use "../components/application-state";
-@use "../components/avatar";
 @use "../components/badge";
 @use "../components/badge-count";
 @use "../components/breadcrumb";

package/app/styles/components/side-nav/toggle-button.scss

@@ -16,7 +16,7 @@
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
-  width: 26px;
+  width: var(--hds-app-sidenav-toggle-button-width);
   height: 36px;
   padding: 0 4px;
   color: var(--token-color-foreground-high-contrast);

package/app/styles/components/side-nav/vars.scss

@@ -23,6 +23,8 @@
   --hds-app-sidenav-animation-duration: 200ms;
   --hds-app-sidenav-animation-delay: var(--hds-app-sidenav-animation-duration);
   --hds-app-sidenav-animation-easing: cubic-bezier(0.65, 0, 0.35, 1);
+  // toggle-button
+  --hds-app-sidenav-toggle-button-width: 24px;
 }
 
 // reduced motion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -44,7 +44,7 @@
     "@ember/string": "^3.1.1",
     "@ember/test-waiters": "^3.1.0",
     "@hashicorp/design-system-tokens": "^1.9.0",
-    "@hashicorp/ember-flight-icons": "^4.0.3",
+    "@hashicorp/ember-flight-icons": "^4.0.4",
     "dialog-polyfill": "^0.5.6",
     "ember-a11y-refocus": "^3.0.2",
     "ember-auto-import": "^2.6.3",
@@ -118,7 +118,7 @@
     "sinon": "^17.0.0",
     "stylelint": "^15.11.0",
     "stylelint-config-rational-order": "^0.1.2",
-    "stylelint-config-standard-scss": "^5.0.0",
+    "stylelint-config-standard-scss": "^11.1.0",
     "typescript": "^5.2.2",
     "webpack": "^5.89.0"
   },

package/addon/components/hds/avatar/index.hbs

@@ -1,11 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<div class="hds-avatar" ...attributes aria-hidden="true">
-  {{#if @src}}
-    <img src={{@src}} alt="" role="none" />
-  {{else}}
-    <FlightIcon @name="user-circle" @size="24" />
-  {{/if}}
-</div>

package/app/components/hds/avatar/index.js

@@ -1,6 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-export { default } from '@hashicorp/design-system-components/components/hds/avatar/index';

package/app/styles/components/avatar.scss

@@ -1,27 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-//
-// AVATAR COMPONENT
-//
-
-.hds-avatar {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  width: 32px;
-  height: 32px;
-
-  img {
-    width: inherit;
-    height: inherit;
-    border-radius: 2px;
-  }
-
-  svg {
-    display: inline-block;
-  }
-}