@hashicorp/design-system-components 2.4.3 → 2.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/addon/components/hds/disclosure-primitive/index.js +1 -1
  3. package/addon/components/hds/flyout/index.js +16 -1
  4. package/addon/components/hds/modal/index.js +16 -1
  5. package/addon/components/hds/reveal/index.hbs +21 -0
  6. package/addon/components/hds/reveal/index.js +33 -0
  7. package/addon/components/hds/reveal/toggle/button.hbs +13 -0
  8. package/addon/components/hds/reveal/toggle/button.js +24 -0
  9. package/app/components/hds/reveal/index.js +6 -0
  10. package/app/components/hds/reveal/toggle/button.js +6 -0
  11. package/app/styles/@hashicorp/design-system-components.scss +1 -0
  12. package/app/styles/components/reveal.scss +30 -0
  13. package/blueprints/hds-component-test/index.js +18 -0
  14. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @hashicorp/design-system-components
2
2
 
3
+ ## 2.6.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#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
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies []:
12
+ - @hashicorp/ember-flight-icons@3.0.4
13
+
14
+ ## 2.5.0
15
+
16
+ ### Minor Changes
17
+
18
+ - [#1391](https://github.com/hashicorp/design-system/pull/1391) [`0a7c53886`](https://github.com/hashicorp/design-system/commit/0a7c5388643f95891082dde2b27b66716372b514) Thanks [@alex-ju](https://github.com/alex-ju)! - Embed page scroll management into the `Modal` and `Flyout` components
19
+
3
20
  ## 2.4.3
4
21
 
5
22
  ### Patch Changes
package/addon/components/hds/disclosure-primitive/index.js CHANGED
@@ -9,7 +9,7 @@ import { action } from '@ember/object';
9
9
  import { schedule } from '@ember/runloop';
10
10
 
11
11
  export default class HdsDisclosurePrimitiveComponent extends Component {
12
- @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
12
+ @tracked isOpen = this.args.isOpen ?? false;
13
13
 
14
14
  @action
15
15
  onClickToggle() {
package/addon/components/hds/flyout/index.js CHANGED
@@ -60,8 +60,15 @@ export default class HdsFlyoutIndexComponent extends Component {
60
60
 
61
61
  @action
62
62
  didInsert(element) {
63
- // Store a reference of the `<dialog>` element
63
+ // Store references of `<dialog>` and `<body>` elements
64
64
  this.element = element;
65
+ this.body = document.body;
66
+
67
+ if (this.body) {
68
+ // Store the initial `overflow` value of `<body>` so we can reset to it
69
+ this.bodyInitialOverflowValue =
70
+ this.body.style.getPropertyValue('overflow');
71
+ }
65
72
 
66
73
  // Register `<dialog>` element for polyfilling if no native support is available
67
74
  if (!element.showModal) {
@@ -98,6 +105,9 @@ export default class HdsFlyoutIndexComponent extends Component {
98
105
  this.element.showModal();
99
106
  this.isOpen = true;
100
107
 
108
+ // Prevent page from scrolling when the dialog is open
109
+ if (this.body) this.body.style.setProperty('overflow', 'hidden');
110
+
101
111
  // Call "onOpen" callback function
102
112
  if (this.args.onOpen && typeof this.args.onOpen === 'function') {
103
113
  this.args.onOpen();
@@ -108,5 +118,10 @@ export default class HdsFlyoutIndexComponent extends Component {
108
118
  onDismiss() {
109
119
  // Make flyout dialog invisible using the native `close` method
110
120
  this.element.close();
121
+
122
+ // Reset page `overflow` property
123
+ if (this.body) {
124
+ this.body.style.setProperty('overflow', this.bodyInitialOverflowValue);
125
+ }
111
126
  }
112
127
  }
package/addon/components/hds/modal/index.js CHANGED
@@ -86,8 +86,15 @@ export default class HdsModalIndexComponent extends Component {
86
86
 
87
87
  @action
88
88
  didInsert(element) {
89
- // Store a reference of the `<dialog>` element
89
+ // Store references of `<dialog>` and `<body>` elements
90
90
  this.element = element;
91
+ this.body = document.body;
92
+
93
+ if (this.body) {
94
+ // Store the initial `overflow` value of `<body>` so we can reset to it
95
+ this.bodyInitialOverflowValue =
96
+ this.body.style.getPropertyValue('overflow');
97
+ }
91
98
 
92
99
  // Register `<dialog>` element for polyfilling if no native support is available
93
100
  if (!element.showModal) {
@@ -135,6 +142,9 @@ export default class HdsModalIndexComponent extends Component {
135
142
  this.element.showModal();
136
143
  this.isOpen = true;
137
144
 
145
+ // Prevent page from scrolling when the dialog is open
146
+ if (this.body) this.body.style.setProperty('overflow', 'hidden');
147
+
138
148
  // Call "onOpen" callback function
139
149
  if (this.args.onOpen && typeof this.args.onOpen === 'function') {
140
150
  this.args.onOpen();
@@ -145,5 +155,10 @@ export default class HdsModalIndexComponent extends Component {
145
155
  onDismiss() {
146
156
  // Make modal dialog invisible using the native `close` method
147
157
  this.element.close();
158
+
159
+ // Reset page `overflow` property
160
+ if (this.body) {
161
+ this.body.style.setProperty('overflow', this.bodyInitialOverflowValue);
162
+ }
148
163
  }
149
164
  }
package/addon/components/hds/reveal/index.hbs ADDED
@@ -0,0 +1,21 @@
1
+ {{!
2
+ Copyright (c) HashiCorp, Inc.
3
+ SPDX-License-Identifier: MPL-2.0
4
+ }}
5
+
6
+ <Hds::DisclosurePrimitive class="hds-reveal" @isOpen={{@isOpen}} ...attributes>
7
+ <:toggle as |t|>
8
+ <Hds::Reveal::Toggle::Button
9
+ aria-controls={{this.contentId}}
10
+ @text={{if (and t.isOpen @textWhenOpen) @textWhenOpen this.text}}
11
+ @isOpen={{t.isOpen}}
12
+ {{on "click" t.onClickToggle}}
13
+ />
14
+ </:toggle>
15
+
16
+ <:content>
17
+ <div class="hds-reveal__content hds-typography-body-200 hds-foreground-primary" id={{this.contentId}}>
18
+ {{yield}}
19
+ </div>
20
+ </:content>
21
+ </Hds::DisclosurePrimitive>
package/addon/components/hds/reveal/index.js ADDED
@@ -0,0 +1,33 @@
1
+ /**
2
+ * Copyright (c) HashiCorp, Inc.
3
+ * SPDX-License-Identifier: MPL-2.0
4
+ */
5
+
6
+ import Component from '@glimmer/component';
7
+ import { guidFor } from '@ember/object/internals';
8
+ import { assert } from '@ember/debug';
9
+
10
+ export default class HdsRevealIndexComponent extends Component {
11
+ /**
12
+ * Generates a unique ID for the Content
13
+ *
14
+ * @param contentId
15
+ */
16
+ contentId = 'content-' + guidFor(this);
17
+
18
+ /**
19
+ * @param text
20
+ * @type {string}
21
+ * @description The text of the button.
22
+ */
23
+ get text() {
24
+ let { text } = this.args;
25
+
26
+ assert(
27
+ '@text for "Hds::Reveal" must have a valid value',
28
+ text !== undefined
29
+ );
30
+
31
+ return text;
32
+ }
33
+ }
package/addon/components/hds/reveal/toggle/button.hbs ADDED
@@ -0,0 +1,13 @@
1
+ {{!
2
+ Copyright (c) HashiCorp, Inc.
3
+ SPDX-License-Identifier: MPL-2.0
4
+ }}
5
+
6
+ <Hds::Button
7
+ @text={{@text}}
8
+ @color="tertiary"
9
+ @icon="chevron-down"
10
+ aria-expanded={{if @isOpen "true" "false"}}
11
+ class={{this.classNames}}
12
+ ...attributes
13
+ />
package/addon/components/hds/reveal/toggle/button.js ADDED
@@ -0,0 +1,24 @@
1
+ /**
2
+ * Copyright (c) HashiCorp, Inc.
3
+ * SPDX-License-Identifier: MPL-2.0
4
+ */
5
+
6
+ import Component from '@glimmer/component';
7
+
8
+ export default class HdsDropdownToggleButtonComponent extends Component {
9
+ /**
10
+ * Get the class names to apply to the component.
11
+ * @method ToggleButton#classNames
12
+ * @return {string} The "class" attribute to apply to the component.
13
+ */
14
+ get classNames() {
15
+ let classes = ['hds-reveal__toggle-button'];
16
+
17
+ // add a class based on the @isOpen argument
18
+ if (this.args.isOpen) {
19
+ classes.push('hds-reveal__toggle-button--is-open');
20
+ }
21
+
22
+ return classes.join(' ');
23
+ }
24
+ }
package/app/components/hds/reveal/index.js ADDED
@@ -0,0 +1,6 @@
1
+ /**
2
+ * Copyright (c) HashiCorp, Inc.
3
+ * SPDX-License-Identifier: MPL-2.0
4
+ */
5
+
6
+ export { default } from '@hashicorp/design-system-components/components/hds/reveal/index';
package/app/components/hds/reveal/toggle/button.js ADDED
@@ -0,0 +1,6 @@
1
+ /**
2
+ * Copyright (c) HashiCorp, Inc.
3
+ * SPDX-License-Identifier: MPL-2.0
4
+ */
5
+
6
+ export { default } from '@hashicorp/design-system-components/components/hds/reveal/toggle/button';
package/app/styles/@hashicorp/design-system-components.scss CHANGED
@@ -32,6 +32,7 @@
32
32
  @use "../components/menu-primitive";
33
33
  @use "../components/modal";
34
34
  @use "../components/pagination";
35
+ @use "../components/reveal";
35
36
  @use "../components/segmented-group";
36
37
  @use "../components/side-nav";
37
38
  @use "../components/stepper";
package/app/styles/components/reveal.scss ADDED
@@ -0,0 +1,30 @@
1
+ /**
2
+ * Copyright (c) HashiCorp, Inc.
3
+ * SPDX-License-Identifier: MPL-2.0
4
+ */
5
+
6
+ //
7
+ // REVEAL COMPONENT
8
+ //
9
+
10
+ .hds-reveal__toggle-button {
11
+ // overriding some styles of the tertiary button, per design specs
12
+ min-height: 1.75rem; // 28px, Override default so padding difference will be visible
13
+ padding: 0.313rem 0.313rem 0.313rem 0.188rem; // 6px 6px 6px 4px, taking into account the 1px border & icon spacing
14
+
15
+ .flight-icon-chevron-down {
16
+ @media (prefers-reduced-motion: no-preference) {
17
+ transition: transform 0.3s;
18
+ }
19
+ }
20
+ }
21
+
22
+ .hds-reveal__toggle-button--is-open {
23
+ .flight-icon-chevron-down {
24
+ transform: rotate(-180deg);
25
+ }
26
+ }
27
+
28
+ .hds-reveal__content {
29
+ margin-top: 4px;
30
+ }
package/blueprints/hds-component-test/index.js CHANGED
@@ -35,6 +35,7 @@ module.exports = {
35
35
  updateDummyAppRouter.call(this, options);
36
36
  updateDummyAppCSS.call(this, options);
37
37
  updateDummyAppIndexHBS.call(this, options);
38
+ updatePercyTest.call(this, options);
38
39
  },
39
40
  };
40
41
 
@@ -94,6 +95,23 @@ const updateDummyAppIndexHBS = (options) => {
94
95
  fs.appendFileSync(hbsFilePath, `\n\n${newListItemHTML}\n`);
95
96
  };
96
97
 
98
+ const updatePercyTest = (options) => {
99
+ const name = options.entity.name;
100
+ const percyTestFilePath = `${options.project.root}/tests/acceptance/percy-test.js`;
101
+
102
+ let newSnapshot = ` await visit('/components/${getKebabizedModuleName(
103
+ name
104
+ )}');\n`;
105
+ newSnapshot += ` await percySnapshot('${stringUtil.classify(name)}');\n`;
106
+
107
+ let source = fs.readFileSync(percyTestFilePath, 'utf-8');
108
+ source = source.replace(
109
+ ' // DO NOT REMOVE – PERCY SNAPSHOTS END',
110
+ ` // MOVE THIS BLOCK IN THE RIGHT POSITION\n${newSnapshot}\n // DO NOT REMOVE – PERCY SNAPSHOTS END`
111
+ );
112
+ fs.writeFileSync(percyTestFilePath, source);
113
+ };
114
+
97
115
  const getColumnizedModuleName = (name) => {
98
116
  const columnizedModuleName = name
99
117
  .split('/')
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hashicorp/design-system-components",
3
- "version": "2.4.3",
3
+ "version": "2.6.0",
4
4
  "description": "Helios Design System Components",
5
5
  "keywords": [
6
6
  "hashicorp",
@@ -39,7 +39,7 @@
39
39
  "dependencies": {
40
40
  "@ember/render-modifiers": "^2.0.5",
41
41
  "@hashicorp/design-system-tokens": "^1.5.0",
42
- "@hashicorp/ember-flight-icons": "^3.0.3",
42
+ "@hashicorp/ember-flight-icons": "^3.0.4",
43
43
  "dialog-polyfill": "^0.5.6",
44
44
  "ember-a11y-refocus": "^3.0.2",
45
45
  "ember-auto-import": "^2.6.0",