Merge pull request #1034 from RCopeland/icon-update

Icon update
sparkdesignsystem · Jan 11, 2019 · afbb1e5 · afbb1e5
2 parents 6ac7d05 + 109418d
commit afbb1e5
Show file tree

Hide file tree

Showing 72 changed files with 609 additions and 200 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -12,7 +12,7 @@ then please remove it.
 ### Code
  - [ ] Build Component in Spark Vanilla (Sass, HTML, JS)
  - [ ] Build Component in Spark Angular
- - [ ] Unit Testing in Spark Vanilla with `npm run test --prefix ./packages/spark-core` (100% coverage, 100% passing)
+ - [ ] Unit Testing in Spark Vanilla with `npm run test` (100% coverage, 100% passing)
  - [ ] Unit Testing in Spark Angular with `gulp test-angular` (100% coverage, 100% passing)
 
 ### Accessibility

diff --git a/README.md b/README.md
@@ -46,17 +46,11 @@ also that your project has a Javascript build step that will transpile ES6+ and
 
 ### Spark Extras
 
-* Install the npm package.
-
-  `npm install --save-dev @sparkdesignsystem/spark-extras`
-
 * Import any of the Spark-Extras Sass patterns that you need.
 
-  `@import "node_modules/@sparkdesignsystem/spark-extras/components/<pattern-name>/<pattern-name>";`
-
-* Import any of the Spark-Extras JS patterns that you need.
-
-  `import <pattern-name> from "node_modules/@sparkdesignsystem/spark-extras/components/<pattern-name>/<pattern-name>";`
+  * `@sparkdesignsystem/spark-card`
+  * `@sparkdesignsystem/spark-dictionary`
+  * `@sparkdesignsystem/spark-highlight-board`
 
 ## Contribution Guide
 

diff --git a/gulp/spark-extras/spark-highlight-board.gulpfile.js b/gulp/spark-extras/spark-highlight-board.gulpfile.js
@@ -4,7 +4,7 @@ const runSequence = require('run-sequence');
 const clean = require('gulp-clean');
 
 gulp.task('setup-spark-highlight-board', (cb) => {
-  runSequence('link-spark-highlight-board', cb);
+  runSequence('clean-spark-highlight-board', 'install-spark-highlight-board', 'build-spark-highlight-board', 'link-spark-highlight-board', cb);
 });
 
 gulp.task('build-spark-highlight-board', (cb) => {
@@ -18,7 +18,7 @@ gulp.task('build-spark-highlight-board', (cb) => {
 gulp.task('clean-spark-highlight-board', () => gulp.src(['./packages/spark-highlight-board/node_modules', './packages/spark-highight-board/es5'], { read: false })
   .pipe(clean()));
 
-gulp.task('install-spark-highlight-board', ['clean-spark-extras'], (cb) => {
+gulp.task('install-spark-highlight-board', ['clean-spark-highlight-board'], (cb) => {
   exec('cd packages/spark-highlight-board && npm install', (err, stdout, stderr) => {
     console.log(stdout);
     console.log(stderr);

diff --git a/packages/spark-core/base/inputs/_error-container.scss b/packages/spark-core/base/inputs/_error-container.scss
@@ -1,4 +1,5 @@
 .sprk-b-ErrorContainer {
+  align-items: center;
   display: flex;
   margin: $sprk-error-container-margin;
 }
@@ -9,6 +10,7 @@
 
 .sprk-b-ErrorIcon {
   fill: $sprk-text-input-error-color;
+  stroke: none;
   flex: 0 0 auto;
   height: $sprk-error-icon-size;
   width: $sprk-error-icon-size;

diff --git a/packages/spark-core/components/_alerts.scss b/packages/spark-core/components/_alerts.scss
@@ -79,6 +79,11 @@
   }
 }
 
+.sprk-c-Alert .sprk-c-Icon {
+  height: $sprk-alert-icon-size;
+  width: $sprk-alert-icon-size;
+}
+
 .sprk-c-Alert__icon--dismiss {
   align-self: flex-start;
   background-color: transparent;
@@ -87,13 +92,8 @@
   padding: $sprk-alert-dismiss-padding;
 }
 
-.sprk-c-Alert__icon,
 .sprk-c-Alert__icon--dismiss .sprk-c-Icon {
-  fill: currentColor;
-  stroke: currentColor;
+  height: $sprk-alert-dismiss-icon-size;
+  width: $sprk-alert-dismiss-icon-size;
 }
 
-.sprk-c-Alert .sprk-c-Icon {
-  height: $sprk-alert-icon-size;
-  width: $sprk-alert-icon-size;
-}
diff --git a/packages/spark-core/components/_icons.scss b/packages/spark-core/components/_icons.scss
@@ -1,6 +1,54 @@
 // ==================================================================
 // Icons
 // ==================================================================
+.sprk-o-StrokeIconSymbol circle,
+.sprk-o-StrokeIconSymbol ellipse,
+.sprk-o-StrokeIconSymbol line,
+.sprk-o-StrokeIconSymbol path,
+.sprk-o-StrokeIconSymbol g,
+.sprk-o-StrokeIconSymbol polygon,
+.sprk-o-StrokeIconSymbol polyline,
+.sprk-o-StrokeIconSymbol rect {
+  fill: inherit;
+  stroke: inherit;
+
+  @if ($sprk-icon-using-custom-stroke) {
+    stroke-width: inherit;
+  }
+}
+
+.sprk-o-FilledIconSymbol circle,
+.sprk-o-FilledIconSymbol ellipse,
+.sprk-o-FilledIconSymbol line,
+.sprk-o-FilledIconSymbol path,
+.sprk-o-FilledIconSymbol g,
+.sprk-o-FilledIconSymbol polygon,
+.sprk-o-FilledIconSymbol polyline,
+.sprk-o-FilledIconSymbol rect {
+  fill: inherit;
+  stroke: inherit;
+
+  @if ($sprk-icon-using-custom-stroke) {
+    stroke-width: inherit;
+  }
+}
+
+.sprk-o-FilledSmallIconSymbol circle,
+.sprk-o-FilledSmallIconSymbol ellipse,
+.sprk-o-FilledSmallIconSymbol line,
+.sprk-o-FilledSmallIconSymbol path,
+.sprk-o-FilledSmallIconSymbol g,
+.sprk-o-FilledSmallIconSymbol polygon,
+.sprk-o-FilledSmallIconSymbol polyline,
+.sprk-o-FilledSmallIconSymbol rect {
+  fill: inherit;
+  stroke: inherit;
+
+  @if ($sprk-icon-using-custom-stroke) {
+    stroke-width: inherit;
+  }
+}
+
 .sprk-c-Icon {
   height: $sprk-icon-m;
   width: $sprk-icon-m;
@@ -12,11 +60,20 @@
   }
 }
 
-.sprk-c-Icon--current-color {
-  fill: currentColor;
+.sprk-c-Icon--filled,
+.sprk-c-Icon--filled-small {
+  stroke: $sprk-icon-filled-stroke-color;
+  fill: $sprk-icon-filled-fill-color;
+}
+
+.sprk-c-Icon--stroke-current-color {
   stroke: currentColor;
 }
 
+.sprk-c-Icon--filled-current-color {
+  fill: currentColor;
+}
+
 .sprk-c-Icon--l {
   height: $sprk-icon-l;
   width: $sprk-icon-l;

diff --git a/packages/spark-core/components/_modals.scss b/packages/spark-core/components/_modals.scss
@@ -18,6 +18,7 @@
 .sprk-c-Modal {
   background-color: $sprk-modal-color;
   box-shadow: $sprk-modal-shadow;
+  border-radius: $sprk-modal-border-radius;
   margin-right: auto;
   margin-left: auto;
   max-width: $sprk-modal-max-width;

diff --git a/packages/spark-core/components/toggle.js b/packages/spark-core/components/toggle.js
@@ -51,7 +51,7 @@ const handleToggleClick = (toggleContent, toggleIcon, toggleIconUse, element) =>
     toggleIconType(
       toggleIcon,
       toggleIconUse,
-      'chevron-down-circle-two-color',
+      'chevron-up-circle-two-color',
       'chevron-up-circle-two-color',
     );
   }

diff --git a/packages/spark-core/settings/_settings.scss b/packages/spark-core/settings/_settings.scss
@@ -58,8 +58,10 @@ $sprk-icon-m: 16px !default;
 $sprk-icon-l: 32px !default;
 $sprk-icon-xl: 64px !default;
 $sprk-icon-xxl: 128px !default;
-$sprk-icon-fill-color: $sprk-red !default;
-$sprk-icon-stroke-color: $sprk-red !default;
+$sprk-icon-fill-color: none !default;
+$sprk-icon-stroke-color: $sprk-black !default;
+$sprk-icon-filled-fill-color: $sprk-black !default;
+$sprk-icon-filled-stroke-color: none !default;
 $sprk-icon-using-custom-stroke: true !default;
 $sprk-icon-custom-stroke-width-s: 1px !default;
 $sprk-icon-custom-stroke-width-m: 1.5px !default;
@@ -237,15 +239,16 @@ $sprk-alert-border: 1px solid $sprk-gray !default;
 $sprk-alert-shadow: 0 3px 10px 1px rgba(0, 0, 0, 0.08) !default;
 $sprk-alert-color: $sprk-black !default;
 $sprk-alert-bg-color: $sprk-white !default;
-$sprk-alert-icon-size: 40px !default;
+$sprk-alert-icon-size: 32px !default;
 $sprk-alert-font-size: 1rem !default;
 $sprk-alert-font-weight: 400 !default;
 $sprk-alert-line-height: 1.5 !default;
 $sprk-alert-content-padding: $sprk-space-m $sprk-space-m $sprk-space-m
   $sprk-space-misc-a !default;
-$sprk-alert-dismiss-padding: $sprk-space-m !default;
+$sprk-alert-dismiss-padding: $sprk-space-m 24px $sprk-space-m $sprk-space-m !default;
 $sprk-alert-icon-margin: 0 $sprk-space-misc-a 0 0 !default;
-$sprk-alert-dismiss-icon-color: $sprk-black;
+$sprk-alert-dismiss-icon-color: $sprk-black !default;
+$sprk-alert-dismiss-icon-size: $sprk-space-m !default;
 // Info
 $sprk-alert-icon-color-info: $sprk-blue !default;
 $sprk-alert-border-info: 1px solid $sprk-blue !default;
@@ -441,8 +444,8 @@ $sprk-select-font-weight: $sprk-text-input-font-weight !default;
 $sprk-select-line-height: $sprk-text-input-line-height !default;
 $sprk-select-outline: $sprk-text-input-outline !default;
 $sprk-select-padding: 14px 45px 14px 13px !default;
-$sprk-select-arrow-offset-y: -37px !default;
-$sprk-select-arrow-offset-x: 8px !default;
+$sprk-select-arrow-offset-y: -31px !default;
+$sprk-select-arrow-offset-x: 19px !default;
 $sprk-select-arrow-stroke-width: 6px !default;
 $sprk-select-disabled-border-color: $sprk-text-input-disabled-border-color !default;
 $sprk-select-disabled-background-color: $sprk-text-input-disabled-background-color !default;
@@ -689,6 +692,7 @@ $sprk-modal-height: 70% !default;
 $sprk-modal-breakpoint-small: 25rem !default;
 $sprk-modal-breakpoint-medium: 37.5rem !default;
 $sprk-modal-shadow: 0 4px 5px rgba(0, 0, 0, 0.6) !default;
+$sprk-modal-border-radius: 8px !default;
 
 //
 // Masthead

diff --git a/packages/spark-core/tests/toggle.tests.js b/packages/spark-core/tests/toggle.tests.js
@@ -122,14 +122,14 @@ describe('Toggle tests', () => {
   it('should toggle accordion item open', () => {
     handleToggleClick(contentAccordion, iconAccordion, iconAccordionUseElement, triggerAccordion);
     expect(containerAccordion.classList.contains('sprk-c-Accordion__item--open')).eql(true);
-    expect(iconAccordionUseElement.getAttribute('xlink:href')).eql('#chevron-down-circle-two-color');
+    expect(iconAccordionUseElement.getAttribute('xlink:href')).eql('#chevron-up-circle-two-color');
   });
 
   it('should toggle accordion item open', () => {
     triggerAccordion.setAttribute('data-sprk-toggle-type', 'masthead-accordion');
     handleToggleClick(contentAccordion, iconAccordion, iconAccordionUseElement, triggerAccordion);
     expect(containerAccordion.classList.contains('sprk-c-MastheadAccordion__item--open')).eql(true);
-    expect(iconAccordionUseElement.getAttribute('xlink:href')).eql('#chevron-down-circle-two-color');
+    expect(iconAccordionUseElement.getAttribute('xlink:href')).eql('#chevron-up-circle-two-color');
   });
 
   it('should toggle accordion icon open', () => {

diff --git a/...park-core-angular/src/lib/components/sprk-accordion-item/sprk-accordion-item.component.ts b/...park-core-angular/src/lib/components/sprk-accordion-item/sprk-accordion-item.component.ts
@@ -25,7 +25,7 @@ import {
         <span [ngClass]="getHeadingClasses()">
           <sprk-icon
             [iconType]="leadingIcon"
-            additionalClasses="sprk-c-Icon--current-color sprk-c-Icon--l sprk-u-mrs"
+            additionalClasses="sprk-c-Icon--stroke-current-color sprk-c-Icon--l sprk-u-mrs"
             *ngIf="leadingIcon"
           ></sprk-icon>
           {{ title }}

diff --git a/...angular/projects/spark-core-angular/src/lib/components/sprk-alert/sprk-alert.component.ts b/...angular/projects/spark-core-angular/src/lib/components/sprk-alert/sprk-alert.component.ts
@@ -14,7 +14,7 @@ import { dismissAlert } from '@sparkdesignsystem/spark-core';
       <div class="sprk-c-Alert__content">
         <sprk-icon
           iconType="{{ icon }}"
-          additionalClasses="sprk-c-Alert__icon sprk-c-Icon--l sprk-c-Icon--current-color"
+          additionalClasses="sprk-c-Alert__icon sprk-c-Icon--l sprk-c-Icon--stroke-current-color"
           aria-hidden="true"
         ></sprk-icon>
 
@@ -29,8 +29,8 @@ import { dismissAlert } from '@sparkdesignsystem/spark-core';
         (click)="alertDismiss($event)"
       >
         <sprk-icon
-          iconType="close-circle"
-          additionalClasses="sprk-c-Icon--l sprk-c-Icon--current-color"
+          iconType="close"
+          additionalClasses="sprk-c-Icon--stroke-current-color"
           aria-hidden="true"
         ></sprk-icon>
       </button>

diff --git a/...r/projects/spark-core-angular/src/lib/components/sprk-dropdown/sprk-dropdown.component.ts b/...r/projects/spark-core-angular/src/lib/components/sprk-dropdown/sprk-dropdown.component.ts
@@ -29,7 +29,7 @@ import {
           <span class="sprk-u-ScreenReaderText">{{ screenReaderText }}</span>
           <sprk-icon
             [iconType]="triggerIconType"
-            additionalClasses="sprk-c-Icon--current-color {{ additionalIconClasses }}"
+            additionalClasses="sprk-u-mls sprk-c-Icon--stroke-current-color {{ additionalIconClasses }}"
           ></sprk-icon>
         </a>
       </div>
@@ -56,7 +56,7 @@ import {
             >
             <sprk-icon
               [iconType]="triggerIconType"
-              additionalClasses="sprk-c-Icon--current-color sprk-c-Icon--l sprk-c-Icon--toggle sprk-Stack__item {{ additionalIconClasses }}"
+              additionalClasses="sprk-c-Icon--stroke-current-color sprk-u-mls sprk-c-Icon--toggle sprk-Stack__item {{ additionalIconClasses }}"
             ></sprk-icon>
           </a>
         </div>

diff --git a/...gular/projects/spark-core-angular/src/lib/components/sprk-footer/sprk-footer.component.ts b/...gular/projects/spark-core-angular/src/lib/components/sprk-footer/sprk-footer.component.ts
@@ -168,7 +168,7 @@ import { Component, Input } from '@angular/core';
               <sprk-toggle
                 title="{{ toggle.title }}"
                 analyticsString="{{ toggle.analytics }}"
-                iconClass="sprk-c-Icon--current-color"
+                iconClass="sprk-c-Icon--stroke-current-color"
                 titleFontClass="sprk-b-TypeBodyFour"
               >
                 <p class="sprk-b-TypeBodyFour">{{ toggle.body }}</p>

diff --git a/...ents/sprk-masthead/sprk-masthead-accordion-item/sprk-masthead-accordion-item.component.ts b/...ents/sprk-masthead/sprk-masthead-accordion-item/sprk-masthead-accordion-item.component.ts
@@ -28,13 +28,13 @@ import {
           <span [ngClass]="getHeadingClasses()">
             <sprk-icon
               [iconType]="leadingIcon"
-              additionalClasses="sprk-c-Icon--current-color sprk-c-Icon--l sprk-c-Icon--toggle sprk-u-mrs"
+              additionalClasses="sprk-c-Icon--stroke-current-color sprk-c-Icon--l sprk-c-Icon--toggle sprk-u-mrs"
               *ngIf="leadingIcon"
             ></sprk-icon>
             {{ title }}
           </span>
           <sprk-icon
-            additionalClasses="sprk-c-MastheadAccordion__icon sprk-c-Icon--current-color sprk-c-Icon--toggle sprk-c-Icon--l {{ iconStateClass }}"
+            additionalClasses="sprk-c-MastheadAccordion__icon sprk-c-Icon--stroke-current-color sprk-c-Icon--toggle {{ iconStateClass }}"
             [iconType]="currentIconType"
           ></sprk-icon>
         </a>

diff --git a/...r/projects/spark-core-angular/src/lib/components/sprk-masthead/sprk-masthead.component.ts b/...r/projects/spark-core-angular/src/lib/components/sprk-masthead/sprk-masthead.component.ts
@@ -130,7 +130,7 @@ import * as _ from 'lodash';
             additionalClasses="sprk-c-Masthead__selector-dropdown"
             additionalTriggerClasses="sprk-c-Masthead__selector sprk-b-Link sprk-b-Link--plain sprk-o-Stack sprk-o-Stack--split@xxs sprk-o-Stack--center-column"
             additionalTriggerTextClasses="sprk-o-Stack__item sprk-o-Stack__item--flex@xxs"
-            additionalIconClasses="sprk-c-Icon--l sprk-Stack__item"
+            additionalIconClasses="sprk-Stack__item sprk-u-mrs"
             [triggerText]="narrowSelector['trigger'].text"
             selector="Select One"
             triggerIconType="chevron-down"
@@ -170,7 +170,7 @@ import * as _ from 'lodash';
                       >
                         <sprk-icon
                           [iconType]="subNavLink.leadingIcon"
-                          additionalClasses="sprk-c-Icon--current-color sprk-u-mrs"
+                          additionalClasses="sprk-c-Icon--stroke-current-color sprk-u-mrs"
                           *ngIf="subNavLink.leadingIcon"
                         ></sprk-icon>
                         {{ subNavLink.text }}
@@ -194,7 +194,7 @@ import * as _ from 'lodash';
                     <span class="sprk-c-MastheadAccordion__heading">
                       <sprk-icon
                         [iconType]="narrowLink.leadingIcon"
-                        additionalClasses="sprk-c-Icon--current-color sprk-u-mrs"
+                        additionalClasses="sprk-c-Icon--stroke-current-color sprk-u-mrs"
                         *ngIf="narrowLink.leadingIcon"
                       ></sprk-icon>
                       {{ narrowLink.text }}

diff --git a/...angular/projects/spark-core-angular/src/lib/components/sprk-modal/sprk-modal.component.ts b/...angular/projects/spark-core-angular/src/lib/components/sprk-modal/sprk-modal.component.ts
@@ -40,8 +40,8 @@ import * as _ from 'lodash';
             (click)="closeModal($event)"
           >
             <sprk-icon
-              iconType="close-circle"
-              additionalClasses="sprk-c-Icon--l sprk-c-Icon--current-color"
+              iconType="close"
+              additionalClasses="sprk-c-Icon--stroke-current-color"
             ></sprk-icon>
           </button>
         </header>