@hashicorp/design-system-components 2.6.0 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @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

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/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/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,9 +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";
@@ -51,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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "2.6.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.4",
+    "@hashicorp/ember-flight-icons": "^3.0.5",
     "dialog-polyfill": "^0.5.6",
     "ember-a11y-refocus": "^3.0.2",
     "ember-auto-import": "^2.6.0",