@hashicorp/design-system-components 2.5.0 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @hashicorp/design-system-components
 
+## 2.7.0
+
+### Minor Changes
+
+- [#1421](https://github.com/hashicorp/design-system/pull/1421) [`b8a45d6e7`](https://github.com/hashicorp/design-system/commit/b8a45d6e7ade6e973b2a860444d80d9216e3ab5c) Thanks [@didoo](https://github.com/didoo)! - `Table` - Exposed the internal sorting properties and methods `setSortBy`, `sortBy` and `sortOrder`
+
+- [#1377](https://github.com/hashicorp/design-system/pull/1377) [`437c253dd`](https://github.com/hashicorp/design-system/commit/437c253dd6106d616ed8f83c060adb12ac83acac) Thanks [@jorytindall](https://github.com/jorytindall)! - Adds `PageHeader` component
+
+- [#1393](https://github.com/hashicorp/design-system/pull/1393) [`38fb21e60`](https://github.com/hashicorp/design-system/commit/38fb21e6091c739f621e967e23d4c8b2794c9575) Thanks [@alex-ju](https://github.com/alex-ju)! - Add `Separator` component
+
+### Patch Changes
+
+- [#1415](https://github.com/hashicorp/design-system/pull/1415) [`555c86d3f`](https://github.com/hashicorp/design-system/commit/555c86d3fde07109775a61523f7b26444fc9ee62) Thanks [@didoo](https://github.com/didoo)! - `Hds::Table` - Changed the way in which the column `@width` defined by the user is applied
+
+- Updated dependencies []:
+  - @hashicorp/ember-flight-icons@3.0.5
+
+## 2.6.0
+
+### Minor Changes
+
+- [#1381](https://github.com/hashicorp/design-system/pull/1381) [`02cdeacd5`](https://github.com/hashicorp/design-system/commit/02cdeacd51d29ed3d19e66cc09b95589becd770b) Thanks [@KristinLBradley](https://github.com/KristinLBradley)! - Add new `Reveal` component
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @hashicorp/ember-flight-icons@3.0.4
+
 ## 2.5.0
 
 ### Minor Changes

package/addon/components/hds/disclosure-primitive/index.js

@@ -9,7 +9,7 @@ import { action } from '@ember/object';
 import { schedule } from '@ember/runloop';
 
 export default class HdsDisclosurePrimitiveComponent extends Component {
-  @tracked isOpen; // notice: if in the future we need to add a "@isOpen" prop to control the status from outside (eg to have the DisclosurePrimitive opened on render) just add  "this.args.isOpen" here to initalize the variable
+  @tracked isOpen = this.args.isOpen ?? false;
 
   @action
   onClickToggle() {

package/addon/components/hds/page-header/actions.hbs

@@ -0,0 +1,5 @@
+{{!
+Copyright (c) HashiCorp, Inc.
+SPDX-License-Identifier: MPL-2.0
+}}
+<div class="hds-page-header__actions" ...attributes>{{yield}}</div>

package/addon/components/hds/page-header/badges.hbs

@@ -0,0 +1,5 @@
+{{!
+Copyright (c) HashiCorp, Inc.
+SPDX-License-Identifier: MPL-2.0
+}}
+<div class="hds-page-header__badges-wrapper" ...attributes>{{yield}}</div>

package/addon/components/hds/page-header/description.hbs

@@ -0,0 +1,5 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<p class="hds-foreground-primary hds-typography-body-200 hds-page-header__description" ...attributes>{{yield}}</p>

package/addon/components/hds/page-header/index.hbs

@@ -0,0 +1,28 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<header class="hds-page-header" ...attributes>
+  {{yield (hash Breadcrumb=(component "hds/yield"))}}
+  <div class="hds-page-header__body">
+    {{yield (hash IconTile=(component "hds/icon-tile" size="medium"))}}
+    <div class="hds-page-header__main">
+      <div class="hds-page-header__content">
+        <div class="hds-page-header__title-main">
+          {{yield (hash Title=(component "hds/page-header/title"))}}
+          {{yield (hash Badges=(component "hds/page-header/badges"))}}
+        </div>
+        <div class="hds-page-header__metadata">
+          {{yield
+            (hash
+              Subtitle=(component "hds/page-header/subtitle")
+              Description=(component "hds/page-header/description")
+              Generic=(component "hds/yield")
+            )
+          }}
+        </div>
+      </div>
+      {{yield (hash Actions=(component "hds/page-header/actions"))}}
+    </div>
+  </div>
+</header>

package/addon/components/hds/page-header/subtitle.hbs

@@ -0,0 +1,5 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<p class="hds-foreground-faint hds-typography-body-200 hds-page-header__subtitle" ...attributes>{{yield}}</p>

package/addon/components/hds/page-header/title.hbs

@@ -0,0 +1,5 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<h1 class="hds-foreground-strong hds-typography-display-500 hds-page-header__title" ...attributes>{{yield}}</h1>

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

@@ -0,0 +1,21 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<Hds::DisclosurePrimitive class="hds-reveal" @isOpen={{@isOpen}} ...attributes>
+  <:toggle as |t|>
+    <Hds::Reveal::Toggle::Button
+      aria-controls={{this.contentId}}
+      @text={{if (and t.isOpen @textWhenOpen) @textWhenOpen this.text}}
+      @isOpen={{t.isOpen}}
+      {{on "click" t.onClickToggle}}
+    />
+  </:toggle>
+
+  <:content>
+    <div class="hds-reveal__content hds-typography-body-200 hds-foreground-primary" id={{this.contentId}}>
+      {{yield}}
+    </div>
+  </:content>
+</Hds::DisclosurePrimitive>

package/addon/components/hds/reveal/index.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { guidFor } from '@ember/object/internals';
+import { assert } from '@ember/debug';
+
+export default class HdsRevealIndexComponent extends Component {
+  /**
+   * Generates a unique ID for the Content
+   *
+   * @param contentId
+   */
+  contentId = 'content-' + guidFor(this);
+
+  /**
+   * @param text
+   * @type {string}
+   * @description The text of the button.
+   */
+  get text() {
+    let { text } = this.args;
+
+    assert(
+      '@text for "Hds::Reveal" must have a valid value',
+      text !== undefined
+    );
+
+    return text;
+  }
+}

package/addon/components/hds/reveal/toggle/button.hbs

@@ -0,0 +1,13 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<Hds::Button
+  @text={{@text}}
+  @color="tertiary"
+  @icon="chevron-down"
+  aria-expanded={{if @isOpen "true" "false"}}
+  class={{this.classNames}}
+  ...attributes
+/>

package/addon/components/hds/reveal/toggle/button.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+export default class HdsDropdownToggleButtonComponent extends Component {
+  /**
+   * Get the class names to apply to the component.
+   * @method ToggleButton#classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-reveal__toggle-button'];
+
+    // add a class based on the @isOpen argument
+    if (this.args.isOpen) {
+      classes.push('hds-reveal__toggle-button--is-open');
+    }
+
+    return classes.join(' ');
+  }
+}

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

@@ -0,0 +1,5 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<hr class={{this.classNames}} ...attributes />

package/addon/components/hds/separator/index.js

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export const DEFAULT_SPACING = '24';
+export const SPACING = ['24', '0'];
+
+export default class HdsSeparatorIndexComponent extends Component {
+  /**
+   * Sets the margin for the separator
+   * Accepted values: 24, 0
+   *
+   * @param spacing
+   * @type {string}
+   * @default 'default'
+   */
+  get spacing() {
+    let { spacing = DEFAULT_SPACING } = this.args;
+
+    assert(
+      `@spacing for "Hds::Separator" must be one of the following: ${SPACING.join(
+        ', '
+      )}; received: ${spacing}`,
+      SPACING.includes(spacing)
+    );
+
+    return spacing;
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-separator'];
+
+    // add a class based on the @spacing argument
+    classes.push(`hds-separator--spacing-${this.spacing}`);
+
+    return classes.join(' ');
+  }
+}

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

@@ -28,7 +28,14 @@
       </Hds::Table::Tr>
     {{else}}
       {{yield
-        (hash Tr=(component "hds/table/tr") Th=(component "hds/table/th") ThSort=(component "hds/table/th-sort"))
+        (hash
+          Tr=(component "hds/table/tr")
+          Th=(component "hds/table/th")
+          ThSort=(component "hds/table/th-sort")
+          sortBy=this.sortBy
+          sortOrder=this.sortOrder
+          setSortBy=this.setSortBy
+        )
         to="head"
       }}
     {{/if}}
@@ -57,6 +64,8 @@
           Tr=(component "hds/table/tr")
           Th=(component "hds/table/th" scope="row")
           Td=(component "hds/table/td" align=@align)
+          sortBy=this.sortBy
+          sortOrder=this.sortOrder
         )
         to="body"
       }}

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

@@ -2,7 +2,13 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<th class={{this.classNames}} aria-sort={{this.ariaSort}} {{style width=@width}} ...attributes scope="col">
+<th
+  class={{this.classNames}}
+  aria-sort={{this.ariaSort}}
+  {{style width=@width minWidth=@width}}
+  ...attributes
+  scope="col"
+>
   <button type="button" {{on "click" this.onClick}}>
     <div class="hds-table__th-sort--button-content">
       <span class="hds-typography-body-200 hds-font-weight-semibold">{{yield}}</span>

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

@@ -2,6 +2,6 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<th class={{this.classNames}} {{style width=@width}} ...attributes scope={{(or @scope "col")}}>
+<th class={{this.classNames}} {{style width=@width minWidth=@width}} ...attributes scope={{(or @scope "col")}}>
   {{yield}}
 </th>

package/app/components/hds/page-header/actions.js

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

package/app/components/hds/page-header/badges.js

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

package/app/components/hds/page-header/description.js

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

package/app/components/hds/page-header/index.js

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

package/app/components/hds/page-header/subtitle.js

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

package/app/components/hds/page-header/title.js

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

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

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

package/app/components/hds/reveal/toggle/button.js

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

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

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

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

@@ -31,8 +31,11 @@
 @use "../components/link"; // multiple components
 @use "../components/menu-primitive";
 @use "../components/modal";
+@use "../components/page-header";
 @use "../components/pagination";
+@use "../components/reveal";
 @use "../components/segmented-group";
+@use "../components/separator";
 @use "../components/side-nav";
 @use "../components/stepper";
 @use "../components/table";
@@ -50,8 +53,8 @@
   margin: -1px !important;
   padding: 0 !important;
   overflow: hidden !important;
-  white-space: nowrap !important;            /* 3 */
+  white-space: nowrap !important; /* 3 */
   border: 0 !important;
   clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
-  clip-path: inset(50%) !important;  /* 2 */
+  clip-path: inset(50%) !important; /* 2 */
 }

package/app/styles/components/page-header.scss

@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// PAGEHEADER
+//
+
+.hds-page-header {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  container-type: inline-size;
+}
+
+.hds-page-header__body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px 16px;
+
+  .hds-icon-tile {
+    flex-shrink: 0;
+  }
+
+  @container (min-width: 400px) {
+    flex-direction: row;
+  }
+}
+
+.hds-page-header__main {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: 16px;
+  align-items: start;
+  justify-content: start;
+
+  @container (min-width: 768px) {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+.hds-page-header__content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: 8px;
+}
+
+.hds-page-header__title-main {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+  align-items: center;
+}
+
+.hds-page-header__badges-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.hds-page-header__metadata {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.hds-page-header__actions {
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: center;
+}

package/app/styles/components/reveal.scss

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// REVEAL COMPONENT
+//
+
+.hds-reveal__toggle-button {
+  // overriding some styles of the tertiary button, per design specs
+  min-height: 1.75rem; // 28px, Override default so padding difference will be visible
+  padding: 0.313rem 0.313rem 0.313rem 0.188rem; // 6px 6px 6px 4px, taking into account the 1px border & icon spacing
+
+  .flight-icon-chevron-down {
+    @media (prefers-reduced-motion: no-preference) {
+      transition: transform 0.3s;
+    }
+  }
+}
+
+.hds-reveal__toggle-button--is-open {
+  .flight-icon-chevron-down {
+    transform: rotate(-180deg);
+  }
+}
+
+.hds-reveal__content {
+  margin-top: 4px;
+}

package/app/styles/components/separator.scss

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// SEPARATOR
+//
+
+.hds-separator {
+  border: none;
+  border-top: 1px solid var(--token-color-border-primary);
+}
+
+.hds-separator--spacing-24 {
+  margin: 24px 0;
+}
+
+.hds-separator--spacing-0 {
+  margin: 0;
+}

package/blueprints/hds-component-test/index.js

@@ -35,6 +35,7 @@ module.exports = {
     updateDummyAppRouter.call(this, options);
     updateDummyAppCSS.call(this, options);
     updateDummyAppIndexHBS.call(this, options);
+    updatePercyTest.call(this, options);
   },
 };
 
@@ -94,6 +95,23 @@ const updateDummyAppIndexHBS = (options) => {
   fs.appendFileSync(hbsFilePath, `\n\n${newListItemHTML}\n`);
 };
 
+const updatePercyTest = (options) => {
+  const name = options.entity.name;
+  const percyTestFilePath = `${options.project.root}/tests/acceptance/percy-test.js`;
+
+  let newSnapshot = `    await visit('/components/${getKebabizedModuleName(
+    name
+  )}');\n`;
+  newSnapshot += `    await percySnapshot('${stringUtil.classify(name)}');\n`;
+
+  let source = fs.readFileSync(percyTestFilePath, 'utf-8');
+  source = source.replace(
+    '    // DO NOT REMOVE – PERCY SNAPSHOTS END',
+    `    // MOVE THIS BLOCK IN THE RIGHT POSITION\n${newSnapshot}\n    // DO NOT REMOVE – PERCY SNAPSHOTS END`
+  );
+  fs.writeFileSync(percyTestFilePath, source);
+};
+
 const getColumnizedModuleName = (name) => {
   const columnizedModuleName = name
     .split('/')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "2.5.0",
+  "version": "2.7.0",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -39,7 +39,7 @@
   "dependencies": {
     "@ember/render-modifiers": "^2.0.5",
     "@hashicorp/design-system-tokens": "^1.5.0",
-    "@hashicorp/ember-flight-icons": "^3.0.3",
+    "@hashicorp/ember-flight-icons": "^3.0.5",
     "dialog-polyfill": "^0.5.6",
     "ember-a11y-refocus": "^3.0.2",
     "ember-auto-import": "^2.6.0",