Merge pull request #3946 from sparkdesignsystem/staging

Publish - 4-12-21

README.md

@@ -54,9 +54,19 @@ that are published to npm.
 
 If you want to run a copy of Gatsby locally:
 
-1. Run `npm install`.
-2. Run `npm start`.
-3. Open your browser to `http://localhost:8000/`.
+1. Navigate to the root directory of the project.
+2. Run `npm install`.
+3. Run `npm start`.
+4. Open your browser to `http://localhost:8000/`.
+
+If you want to run a copy of Gatsby and Storybook locally:
+
+1. Navigate to the root directory of the project.
+2. Run `npm run installall`.
+3. Run `npm start` to start Gatsby then open your browser to `http://localhost:8000/`.
+4. Run `(cd react/ ; npm run storybook)` to start Storybook for React.
+5. Run `(cd angular/ ; npm run storybook)` to start Storybook for Angular.
+6. Run `(cd html/ ; npm run storybook)` to start Storybook for HTML.
 
 ### Unit Tests
 

angular/package.json

@@ -62,7 +62,7 @@
     "@storybook/angular": "^5.3.18",
     "@storybook/preset-scss": "^1.0.2",
     "@storybook/theming": "^5.3.18",
-    "@types/jest": "^25.1.3",
+    "@types/jest": "^25.2.3",
     "@types/node": "^12.11.1",
     "@types/parse5": "^5.0.3",
     "babel-loader": "^8.0.6",

angular/projects/spark-angular/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sparkdesignsystem/spark-angular",
   "description": "A collection of Spark Design System components in Angular 6+",
-  "version": "12.1.1",
+  "version": "13.0.0",
   "author": "Quicken Loans",
   "license": "MIT",
   "scripts": {
@@ -23,7 +23,7 @@
     "@angular/router": ">=7.0.0 < 9.2.0"
   },
   "dependencies": {
-    "@sparkdesignsystem/spark-styles": "^1.1.1",
+    "@sparkdesignsystem/spark-styles": "^2.0.0",
     "focus-visible": "5.0.2",
     "lodash": "^4.17.21",
     "tiny-date-picker": "github:sparkdesignsystem/tiny-date-picker#v3.2.9"

angular/projects/spark-angular/src/environment/environment.ts

@@ -1,3 +1,3 @@
 export const environment = {
-  version: '12.1.1',
+  version: '13.0.0',
 };

angular/projects/spark-angular/src/lib/components/inputs/Date.stories.ts

@@ -1,38 +1,37 @@
 import { storyWrapper } from '../../../../../../.storybook/helpers/storyWrapper';
-import { SparkInputContainerModule } from './sprk-input-container/sprk-input-container.module';
+import { SprkInputContainerModule } from './sprk-input-container/sprk-input-container.module';
 import { SprkInputModule } from '../../directives/inputs/sprk-input/sprk-input.module';
 import { SprkIconModule } from '../sprk-icon/sprk-icon.module';
 import { SprkLabelModule } from '../../directives/inputs/sprk-label/sprk-label.module';
 import { SprkFieldErrorModule } from '../../directives/inputs/sprk-field-error/sprk-field-error.module';
 import { SprkFieldErrorDirective } from '../../directives/inputs/sprk-field-error/sprk-field-error.directive';
-import { SparkInputContainerComponent } from './sprk-input-container/sprk-input-container.component';
+import { SprkInputContainerComponent } from './sprk-input-container/sprk-input-container.component';
 import { SprkInputDirective } from '../../directives/inputs/sprk-input/sprk-input.directive';
 import { SprkLabelDirective } from '../../directives/inputs/sprk-label/sprk-label.directive';
 import { markdownDocumentationLinkBuilder } from '../../../../../../../storybook-utilities/markdownDocumentationLinkBuilder';
 
 export default {
   title: 'Components/Input/Date',
-  component: SparkInputContainerComponent,
+  component: SprkInputContainerComponent,
   subcomponents: {
     SprkLabelDirective,
     SprkInputDirective,
     SprkFieldErrorDirective,
   },
   decorators: [
     storyWrapper(
-      storyContent => (
+      (storyContent) =>
         `<div class="sprk-o-Box">
           <form (submit)="onSubmit($event)" #sampleForm="ngForm">
             ${storyContent}
           </form>
-        <div>`
-      )
-    )
+        <div>`,
+    ),
   ],
   props: {
     onSubmit(event): void {
       this.form_submitted = true;
-    }
+    },
   },
   parameters: {
     info: `
@@ -46,12 +45,12 @@ which you may need to remove before submitting the form.
   to the hundredth place.
 `,
     docs: { iframeHeight: 200 },
-  }
+  },
 };
 
 const modules = {
   imports: [
-    SparkInputContainerModule,
+    SprkInputContainerModule,
     SprkLabelModule,
     SprkInputModule,
     SprkIconModule,
@@ -63,8 +62,9 @@ export const dateInput = () => ({
   moduleMetadata: modules,
   template: `
     <sprk-input-container>
-      <label sprkLabel>Date Input (No Picker)</label>
+      <label for="date" sprkLabel>Date Input (No Picker)</label>
       <input
+        id="date"
         name="date_input"
         type="text"
         placeholder="MM/DD/YYYY"
@@ -91,8 +91,10 @@ export const invalidDateInput = () => ({
   moduleMetadata: modules,
   template: `
     <sprk-input-container>
-      <label sprkLabel>Date Input (No Picker)</label>
+      <label for="invalid-date" sprkLabel>Date Input (No Picker)</label>
       <input
+        id="invalid-date"
+        aria-describedby="date-error"
         class="sprk-b-TextInput--error"
         name="date_input"
         type="text"
@@ -101,9 +103,9 @@ export const invalidDateInput = () => ({
         #dateInput="ngModel"
         sprkInput
       />
-      <span sprkFieldError>
+      <span sprkFieldError id="date-error">
         <sprk-icon
-          iconType="exclamation-filled"
+          iconName="exclamation-filled"
           additionalClasses="sprk-b-ErrorIcon"
         ></sprk-icon>
         <div class="sprk-b-ErrorText">There is an error on this field.</div>
@@ -128,8 +130,9 @@ export const disabledDateInput = () => ({
   moduleMetadata: modules,
   template: `
     <sprk-input-container>
-      <label sprkLabel class="sprk-b-Label--disabled">Date Input (No Picker)</label>
+      <label for="disabled-date" sprkLabel isDisabled="true">Date Input (No Picker)</label>
       <input
+        id="disabled-date"
         disabled
         name="date_input"
         type="text"