@hashicorp/design-system-components 0.5.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @hashicorp/design-system-components
 
+## 0.7.0
+
+### Minor Changes
+
+- [#150](https://github.com/hashicorp/design-system/pull/150) [`c236c159`](https://github.com/hashicorp/design-system/commit/c236c159f7d7ec6edc661710963f5733eb961edf) Thanks [@didoo](https://github.com/didoo)! - removed “box-sizing“ declarations from the components (we assume the consumers codebase already have set it to “border-box“ by default
+
+## 0.6.0
+
+### Minor Changes
+
+- [#136](https://github.com/hashicorp/design-system/pull/136) [`bce712a7`](https://github.com/hashicorp/design-system/commit/bce712a7dc13615fa179b8c16791ac6cb8c37984) Thanks [@didoo](https://github.com/didoo)! - updated font-stack definitions in design tokens, will impact the visual aspect of all the components for certains combinations of OS/browser
+
+### Patch Changes
+
+- Updated dependencies [[`c17f142c`](https://github.com/hashicorp/design-system/commit/c17f142c0c938b471b696820d1fa440f62f7315b)]:
+  - @hashicorp/design-system-tokens@0.8.0
+
+## 0.5.1
+
+### Patch Changes
+
+- [#133](https://github.com/hashicorp/design-system/pull/133) [`6ed18c7f`](https://github.com/hashicorp/design-system/commit/6ed18c7f9bf211141ac38005e6bd3aea2dbbf1c7) Thanks [@didoo](https://github.com/didoo)! - small change to the “noop“ guard in the “@didInsert“ method of the “Disclosure“ component
+
 ## 0.5.0
 
 ### Minor Changes

package/NEW-COMPONENT-CHECKLIST.md

@@ -0,0 +1,73 @@
+# New Component Checklist
+
+This is the quest issue/engineering checklist for the COMPONENT_NAME Component. All new components will have their own feature branch, and any PR that adds an item from the checklist should target the feature branch, and not `main`.
+
+## Pre-Flight Checklist
+Update this list and these links as appropriate.
+
+- [Component Requirement Document (CRD)](url_here): This file should exist before any code is written.
+- [FIGMA Design](url_here): Since we are trying to align the component API naming with the same terms used in the Figma file, it is likely useful to have a fairly stable Figma design before we create a component; it should definitely be finalized before the component ships, however.
+- [Design System Website](https://design-system-website.vercel.app/?path=/story/example-introduction--page) (storybook of storybooks): use for reference, to consider existing features that we might need to replicate in the component.
+
+## Engineering Checklist
+The engineering checklist has six parts: creating the feature branch, component template, component backing class, component style, tests, and documentation.
+
+### Component Creation
+
+- [ ] create new branch from main for the component.
+- [ ] create new component
+  - `ember generate component hds/COMPONENT_NAME/index --gc` (the component won't need to be invoked with index, it's just to put all the files in the correct place)
+  - if it's a variation on a component, then `hds/COMPONENT_NAME/VARIATION` instead of `index`
+- [ ] **component template**
+  - use semantic HTML
+  - the component should have a css class that is the same as the component (e.g. `hds/button` should have a class name of `hds-button` on the component, and additional CSS classes should start with this same class name.
+  - add `...attributes` unless doing so would be detrimental (e.g., a parent element and child element in the same component that both have ...attributes)
+- [ ] **component class**
+  - use getters (vs template conditionals or constructors, if possible)
+  - write API comments in the JS doc way (copy from an existing DS component)
+  - use the same naming as the Figma file for the components API unless it conflicts with a pre-existing HTML attribute. If that is the case, document the difference in the comment.
+  - ensure that all existing functionality (from a Structure component) is accounted for in some way. If we are not providing existing functionality at all, it should be documented (along with the reason why). If we are providing temporary functionality, explain that it's temporary and why.
+  - check the [design system website](https://design-system-website.vercel.app/?path=/story/example-introduction--page) to see what kind of component functionality is being used across all products
+  - booleans should start with a verb (is/has/etc)
+  - assertion text should match the content style of the other components.
+  - goal is a terse invocation
+- [ ] **component style**
+  - create `component/COMPONENT_NAME.scss` in `app/styles`
+  - add `@use` to `app/styles/@hashicorp/design-system-components.scss` (see existing code for precise syntax)
+  - use design tokens wherever possible, comment where they are not
+  - sizes should be in relative units
+  - line heights should be unitless
+- [ ] **testing**
+  - [ ] test basic functionality
+  - [ ] test defaults
+  - [ ] try not to repeat tests (i.e., don't have to test all sizes, all colors, etc.)
+  - [ ] test all accessibility attributes
+- [ ] **documentation**
+  - create component page `ember generate route components/COMPONENT_NAME --dummy`
+  - add link to `templates/index.hbs` page
+  - [ ] API docs
+  - [ ] Usage
+  - [ ] Accessibility
+  - [ ] Showcase
+
+### Component Review
+
+Pre-review request checks:
+
+- [ ] run `yarn lint` and fix any issues (`yarn lint:hbs --fix` will resolve most issues)
+- [ ] make sure all tests pass (`ember s` then visit /tests; or `ember t -s`)
+- [ ] check for basic a11y on docs page:
+  - keyboard navigation
+  - logical DOM order
+  - zoom up to 400%
+  - color contrast
+  - (the axe-core browser plugin can run some basic tests and give immediate feedback)
+- [ ] check page on browsers
+  - Chrome
+  - Firefox
+  - Safari
+  - Edge (once available)
+
+When ready for review:
+- [ ] add situationally appropriate reviewers
+- [ ] added instructions for reviewers in your PR, letting them know what kind of review you need

package/README.md

@@ -47,6 +47,8 @@ Finally, add this line to the top of your app's style file (`app.scss` or simila
 @import '@hashicorp/design-system-components';
 ```
 
+⚠️ **Notice**: our component library assumes that a `*, *::before, *::after { box-sizing: border-box; }` reset is applied globally in the CSS of the application. If in your use case this is not true, please speak with the design system team (we can try to find a workaround).
+
 Usage
 ------------------------------------------------------------------------------
 

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

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 
-const noop = () => {};
+const NOOP = () => {};
 
 export default class HdsBreadcrumbComponent extends Component {
   /**
@@ -9,8 +9,13 @@ export default class HdsBreadcrumbComponent extends Component {
    * @default () => {}
    */
   get didInsert() {
-    // TODO discuss with Matthew if this is the right way to create a guard for this method
-    return this.args.didInsert ?? noop;
+    let { didInsert } = this.args;
+
+    if (typeof didInsert === 'function') {
+      return didInsert;
+    } else {
+      return NOOP;
+    }
   }
 
   /**

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

@@ -1,6 +1,6 @@
 <div class="hds-disclosure" ...attributes>
   <div class="hds-disclosure__toggle">
-    {{yield (hash onClickToggle=this.onClickToggle) to="toggle"}}
+    {{yield (hash onClickToggle=this.onClickToggle isActive=this.isActive) to="toggle"}}
   </div>
   {{#if this.isActive}}
     <div

package/app/styles/components/badge-count.scss

@@ -15,7 +15,6 @@ $hds-badge-count-border-width: 1px;
 .hds-badge-count {
   align-items: center;
   border: $hds-badge-count-border-width solid transparent;
-  box-sizing: border-box;
   display: inline-flex;
   font-family: var(--token-typography-font-stack-text);
   max-width: 100%;

package/app/styles/components/badge.scss

@@ -16,7 +16,6 @@
   align-items: center;
   border-radius: 5px;
   border: $hds-badge-border-width solid transparent;
-  box-sizing: border-box;
   display: inline-flex;
   max-width: 100%;
 }

package/app/styles/components/button.scss

@@ -18,7 +18,6 @@ $hds-button-focus-border-width: 3px;
   align-items: center;
   border: $hds-button-border-width solid transparent; // We need this to be transparent for a11y
   border-radius: $hds-button-border-radius;
-  box-sizing: border-box; // TODO https://github.com/hashicorp/design-system-components/issues/46
   display: flex;
   font-family: var(--token-typography-font-stack-text);
   isolation: isolate;
@@ -69,7 +68,6 @@ $hds-button-focus-border-width: 3px;
       border-radius: $hds-button-border-radius + $hds-button-focus-border-width;
       border: $hds-button-focus-border-width solid transparent;
       bottom: -$shift;
-      box-sizing: border-box;
       content: '';
       left: -$shift;
       position: absolute;

package/app/styles/components/icon-tile.scss

@@ -17,7 +17,6 @@
   border-radius: 4px;
   border: $hds-icon-tile-border-width solid transparent;
   box-shadow: $hds-icon-tile-box-shadow;
-  box-sizing: border-box;
   display: flex;
   position: relative;
 }

package/app/styles/mixins/_focus-ring.scss

@@ -35,7 +35,6 @@
   &::before {
     border-radius: $radius;
     bottom: $bottom;
-    box-sizing: border-box;
     content: '';
     left: $left;
     position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -34,7 +34,7 @@
     "test:ember:percy": "percy exec ember test"
   },
   "dependencies": {
-    "@hashicorp/design-system-tokens": "^0.7.0",
+    "@hashicorp/design-system-tokens": "^0.8.0",
     "@hashicorp/ember-flight-icons": "^2.0.1",
     "ember-auto-import": "^2.2.3",
     "ember-cli-babel": "^7.26.6",
@@ -50,7 +50,7 @@
     "@embroider/test-setup": "^0.43.5",
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
-    "@percy/cli": "^1.0.0-beta.70",
+    "@percy/cli": "^1.0.1",
     "@percy/ember": "^3.0.0",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",