@hashicorp/design-system-components 2.5.0 → 2.6.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @hashicorp/design-system-components
 
+## 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/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/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/styles/@hashicorp/design-system-components.scss

@@ -32,6 +32,7 @@
 @use "../components/menu-primitive";
 @use "../components/modal";
 @use "../components/pagination";
+@use "../components/reveal";
 @use "../components/segmented-group";
 @use "../components/side-nav";
 @use "../components/stepper";

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/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.6.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.4",
     "dialog-polyfill": "^0.5.6",
     "ember-a11y-refocus": "^3.0.2",
     "ember-auto-import": "^2.6.0",