@hashicorp/design-system-components 1.0.1 → 1.0.4

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # @hashicorp/design-system-components
2
2
 
3
+ ## 1.0.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [#534](https://github.com/hashicorp/design-system/pull/534) [`65cde6ad`](https://github.com/hashicorp/design-system/commit/65cde6ad63c370fd9f0f6984cb7e974e4d3a9030) Thanks [@alex-ju](https://github.com/alex-ju)! - Fix label indicator for assistive technologies
8
+
9
+ - Updated dependencies []:
10
+ - @hashicorp/ember-flight-icons@2.0.12
11
+
12
+ ## 1.0.3
13
+
14
+ ### Patch Changes
15
+
16
+ - [#529](https://github.com/hashicorp/design-system/pull/529) [`b956be8f`](https://github.com/hashicorp/design-system/commit/b956be8fcb3692d184603a2a40e0c42df0461ff5) Thanks [@alex-ju](https://github.com/alex-ju)! - Fix `required` attribute on form fields
17
+
18
+ ## 1.0.2
19
+
20
+ ### Patch Changes
21
+
22
+ - Updated dependencies []:
23
+ - @hashicorp/ember-flight-icons@2.0.11
24
+
3
25
  ## 1.0.1
4
26
 
5
27
  ### Patch Changes
@@ -0,0 +1,7 @@
1
+ <div class="hds-avatar" ...attributes aria-hidden="true">
2
+ {{#if @src}}
3
+ <img src={{@src}} alt="" role="none" />
4
+ {{else}}
5
+ <FlightIcon @name="user-circle" @size="24" />
6
+ {{/if}}
7
+ </div>
@@ -0,0 +1,3 @@
1
+ <div class="hds-empty-state__body" ...attributes>
2
+ {{yield}}
3
+ </div>
@@ -0,0 +1,3 @@
1
+ <div class="hds-empty-state__footer" ...attributes>
2
+ {{yield}}
3
+ </div>
@@ -0,0 +1,3 @@
1
+ <div class="hds-empty-state__header" ...attributes>
2
+ {{yield}}
3
+ </div>
@@ -0,0 +1,9 @@
1
+ <div class="hds-empty-state" ...attributes>
2
+ {{yield
3
+ (hash
4
+ Header=(component "hds/empty-state/header")
5
+ Body=(component "hds/empty-state/body")
6
+ Footer=(component "hds/empty-state/footer")
7
+ )
8
+ }}
9
+ </div>
@@ -12,10 +12,10 @@
12
12
  class="hds-form-field__control"
13
13
  @value={{@value}}
14
14
  name={{@name}}
15
+ required={{@isRequired}}
15
16
  ...attributes
16
17
  id={{F.id}}
17
18
  aria-describedby={{F.ariaDescribedBy}}
18
- required={{@isRequired}}
19
19
  />
20
20
  </F.Control>
21
21
  </Hds::Form::Field>
@@ -1,4 +1,4 @@
1
1
  <label class={{this.classNames}} for={{@controlId}} ...attributes>
2
- {{yield}}
2
+ {{yield}}{{#if (or @isRequired @isOptional)}}&nbsp;{{/if}}
3
3
  <Hds::Form::Indicator @isRequired={{@isRequired}} @isOptional={{@isOptional}} />
4
4
  </label>
@@ -12,10 +12,10 @@
12
12
  class="hds-form-field__control"
13
13
  @value={{@value}}
14
14
  name={{@name}}
15
+ required={{@isRequired}}
15
16
  ...attributes
16
17
  id={{F.id}}
17
18
  aria-describedby={{F.ariaDescribedBy}}
18
- required={{@isRequired}}
19
19
  />
20
20
  </F.Control>
21
21
  </Hds::Form::Field>
@@ -15,10 +15,10 @@
15
15
  @value={{@value}}
16
16
  @isInvalid={{@isInvalid}}
17
17
  @width={{@width}}
18
+ required={{@isRequired}}
18
19
  ...attributes
19
20
  id={{F.id}}
20
21
  aria-describedby={{F.ariaDescribedBy}}
21
- required={{@isRequired}}
22
22
  as |S|
23
23
  >
24
24
  {{yield (hash Options=S.Options)}}
@@ -16,10 +16,10 @@
16
16
  @value={{@value}}
17
17
  @isInvalid={{@isInvalid}}
18
18
  @width={{@width}}
19
+ required={{@isRequired}}
19
20
  ...attributes
20
21
  id={{F.id}}
21
22
  aria-describedby={{F.ariaDescribedBy}}
22
- required={{@isRequired}}
23
23
  />
24
24
  </F.Control>
25
25
  </Hds::Form::Field>
@@ -16,10 +16,10 @@
16
16
  @isInvalid={{@isInvalid}}
17
17
  @width={{@width}}
18
18
  @height={{@height}}
19
+ required={{@isRequired}}
19
20
  ...attributes
20
21
  id={{F.id}}
21
22
  aria-describedby={{F.ariaDescribedBy}}
22
- required={{@isRequired}}
23
23
  />
24
24
  </F.Control>
25
25
  </Hds::Form::Field>
@@ -12,10 +12,10 @@
12
12
  {{! template-lint-disable no-capital-arguments }}
13
13
  @_wrapperClass="hds-form-field__control"
14
14
  @value={{@value}}
15
+ required={{@isRequired}}
15
16
  ...attributes
16
17
  id={{F.id}}
17
18
  aria-describedby={{F.ariaDescribedBy}}
18
- required={{@isRequired}}
19
19
  />
20
20
  </F.Control>
21
21
  </Hds::Form::Field>
@@ -0,0 +1 @@
1
+ export { default } from '@hashicorp/design-system-components/components/hds/avatar/index';
@@ -0,0 +1 @@
1
+ export { default } from '@hashicorp/design-system-components/components/hds/empty-state/body';
@@ -0,0 +1 @@
1
+ export { default } from '@hashicorp/design-system-components/components/hds/empty-state/footer';
@@ -0,0 +1 @@
1
+ export { default } from '@hashicorp/design-system-components/components/hds/empty-state/header';
@@ -0,0 +1 @@
1
+ export { default } from '@hashicorp/design-system-components/components/hds/empty-state/index';
@@ -8,6 +8,7 @@
8
8
  // Notice: this list can be automatically edited by the Ember blueprint, please don't remove the start/end comments
9
9
  // START COMPONENTS CSS FILES IMPORTS
10
10
  @use "../components/alert";
11
+ @use "../components/avatar";
11
12
  @use "../components/badge";
12
13
  @use "../components/badge-count";
13
14
  @use "../components/breadcrumb";
@@ -16,6 +17,7 @@
16
17
  @use "../components/card";
17
18
  @use "../components/disclosure";
18
19
  @use "../components/dropdown";
20
+ @use "../components/empty-state";
19
21
  @use "../components/form"; // multiple components
20
22
  @use "../components/icon-tile";
21
23
  @use "../components/link/inline";
@@ -0,0 +1,24 @@
1
+ //
2
+ // AVATAR
3
+ //
4
+ // properties within each class are sorted alphabetically
5
+ //
6
+
7
+ .hds-avatar {
8
+ align-items: center;
9
+ box-sizing: border-box;
10
+ display: inline-flex;
11
+ height: 32px;
12
+ justify-content: center;
13
+ width: 32px;
14
+
15
+ img {
16
+ border-radius: 2px;
17
+ height: inherit;
18
+ width: inherit;
19
+ }
20
+
21
+ svg {
22
+ display: inline-block;
23
+ }
24
+ }
@@ -0,0 +1,25 @@
1
+ .hds-empty-state {
2
+ color: var(--token-color-foreground-faint);
3
+ display: block;
4
+ margin: 0 auto;
5
+ max-width: 40ch;
6
+ padding: 0;
7
+
8
+ > * {
9
+ margin: 0;
10
+ padding: 0;
11
+ }
12
+ }
13
+ .hds-empty-state__body {
14
+ font-size: 1rem;
15
+ font-weight: 400;
16
+ line-height: 1.5;
17
+ + * {
18
+ margin-block-start: 1rem;
19
+ }
20
+ }
21
+ .hds-empty-state__header {
22
+ font-size: 1.25rem;
23
+ font-weight: 700;
24
+ line-height: 1.2;
25
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hashicorp/design-system-components",
3
- "version": "1.0.1",
3
+ "version": "1.0.4",
4
4
  "description": "HashiCorp Design System Components",
5
5
  "keywords": [
6
6
  "hashicorp",
@@ -35,7 +35,7 @@
35
35
  },
36
36
  "dependencies": {
37
37
  "@hashicorp/design-system-tokens": "^1.0.0",
38
- "@hashicorp/ember-flight-icons": "^2.0.10",
38
+ "@hashicorp/ember-flight-icons": "^2.0.12",
39
39
  "ember-auto-import": "^2.4.1",
40
40
  "ember-cli-babel": "^7.26.11",
41
41
  "ember-cli-htmlbars": "^6.0.1",
@@ -50,11 +50,12 @@
50
50
  "@embroider/test-setup": "^1.5.0",
51
51
  "@glimmer/component": "^1.0.4",
52
52
  "@glimmer/tracking": "^1.0.4",
53
- "@percy/cli": "^1.7.2",
53
+ "@percy/cli": "^1.10.0",
54
54
  "@percy/ember": "^3.0.1",
55
55
  "babel-eslint": "^10.1.0",
56
56
  "broccoli-asset-rev": "^3.0.0",
57
57
  "ember-a11y-refocus": "^2.1.0",
58
+ "ember-a11y-testing": "^5.0.0",
58
59
  "ember-cli": "~4.3.0",
59
60
  "ember-cli-clipboard": "^0.16.0",
60
61
  "ember-cli-dependency-checker": "^3.3.0",