@hashicorp/design-system-components 0.1.0 → 0.1.1

package/README.md

@@ -21,7 +21,27 @@ Installation
 yarn add @hashicorp/design-system-components
 ```
 
-Then add this line to the top of your app's style file (`app.scss` or similar):
+If you do not have `ember-cli-sass` installed, you will need to do three things before importing the styles into your app:
+
+1. Install `ember-cli-sass`
+
+```bash
+ember install ember-cli-sass
+```
+
+2. Change `app/styles/app.css` to `app/styles/app.scss`
+3. Add the following to the `app` definition (starts on/around line 6 in new Ember apps) in `ember-cli-build.js`
+
+```js
+sassOptions: {
+  precision: 4,
+  includePaths: [
+    './node_modules/@hashicorp/design-system-tokens/products/css',
+  ],
+},
+```
+
+Finally, add this line to the top of your app's style file (`app.scss` or similar):
 
 ```
 @import '@hashicorp/design-system-components';

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

@@ -6,7 +6,7 @@ export const DEFAULT_COLOR = 'primary';
 export const DEFAULT_TYPE = 'button';
 export const DEFAULT_ICONPOSITION = 'leading';
 export const SIZES = ['small', 'medium', 'large'];
-export const COLORS = ['primary', 'secondary', 'destructive'];
+export const COLORS = ['primary', 'secondary', 'critical'];
 export const TYPES = ['button', 'submit', 'reset'];
 export const ICONPOSITIONS = ['leading', 'trailing'];
 
@@ -50,7 +50,7 @@ export default class HdsButtonIndexComponent extends Component {
    * @param color
    * @type {string}
    * @default primary
-   * @description Determines the color of button to be used; acceptable values are `primary`, `secondary`, and `destructive`
+   * @description Determines the color of button to be used; acceptable values are `primary`, `secondary`, and `critical`
    */
   get color() {
     let { color = DEFAULT_COLOR } = this.args;

package/addon/components/hds/link-to/standalone.hbs

@@ -2,7 +2,7 @@
   class={{this.classNames}}
   @current-when={{@current-when}}
   @models={{hds-link-to-models @model @models}}
-  @query={{this.queryParams}}
+  @query={{hds-link-to-query @query}}
   @replace={{@replace}}
   @route={{this.route}}
   ...attributes

package/addon/components/hds/link-to/standalone.js

@@ -128,16 +128,6 @@ export default class HdsLinkToStandaloneComponent extends Component {
     }
   }
 
-  // this is a workaround for https://github.com/emberjs/ember.js/issues/19693
-  // don't remove until we drop support for ember 3.27 and 3.28
-  get queryParams() {
-    if (this.args.query) {
-      return this.args.query;
-    } else {
-      return {};
-    }
-  }
-
   /**
    * Get the class names to apply to the component.
    * @method LinkToStandalone#classNames

package/addon/helpers/hds-link-to-query.js

@@ -0,0 +1,21 @@
+import { helper } from '@ember/component/helper';
+
+/*
+ * This helper can be used to safely pass a @query argument to the `<LinkTo>` component
+ * without the risk of triggering an assertion if the argument is undefined
+ *
+ * The result of this helper should be passed into the `@query` argument of the `<LinkTo>` component:
+ *
+ * ```hbs
+ * <LinkTo @query={{hds-link-to-query @query}} />
+ * ```
+ */
+
+// this is a workaround for https://github.com/emberjs/ember.js/issues/19693
+// don't remove until we drop support for ember 3.27 and 3.28
+
+export function hdsLinkToQuery([query]) {
+  return query ?? {};
+}
+
+export default helper(hdsLinkToQuery);

package/app/helpers/hds-link-to-query.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/helpers/hds-link-to-query';

package/app/styles/components/button.scss

@@ -213,14 +213,14 @@ $size-props: (
   }
 }
 
-.hds-button--color-destructive {
-  background-color: var(--token-color-background-secondary);
-  border-color: var(--token-color-border-strong);
+.hds-button--color-critical {
+  background-color: var(--token-color-surface-critical);
+  border-color: var(--token-color-foreground-critical-on-surface);
   color: var(--token-color-foreground-critical-on-surface);
 
   &:focus,
   &.is-focus {
-    background-color: var(--token-color-background-secondary);
+    background-color: var(--token-color-surface-critical);
     border-color: var(--token-color-focus-critical-internal);
     color: var(--token-color-foreground-critical-on-surface);
     &::before {

package/app/styles/components/link/standalone.scss

@@ -108,7 +108,7 @@ $size-props: (
 }
 
 .hds-link-standalone--color-secondary {
-  color: var(--token-color-foreground-primary);
+  color: var(--token-color-foreground-strong);
 
   &:hover,
   &.is-hover {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",