feat(illustration): add empty state illustrations (#3041)

* feat(illustration): add illustration component * feat(illustration): add empty state illustrations * feat(illustration): remove vector-effect property * feat(illustration): add addition svgs * feat(illustration): fix lint error * feat(illiustration): fix linter errors * feat(illiustration): fix vnu errors * feat(illustration): add classnames to svg elements * feat(illustration): edit svg attributes * feat(illustration): create docblocks * feat(illustration): add snapshots * feat(illustrations): update snapshots * feat(illustration): add call to action variants and improve docs * feat(illustrations): update snapshots * chore(illustration): remove ids chore(illustration): remove ids * chore(illustration): clean up svgs chore(illustration): update tests * chore(illustration): update snapshots * chore(illustration): use lorum ipsum * chore(illustration): update tests * chore(illustration): add tokens * fix(illustration): doc fixes and text longform fix(illustration): update tests
salesforce-ux · Feb 8, 2018 · a1824e0 · a1824e0
1 parent 9d7b861
commit a1824e0
Show file tree

Hide file tree

Showing 45 changed files with 55,840 additions and 2 deletions.
diff --git a/scripts/gulp/lint.js b/scripts/gulp/lint.js
@@ -92,7 +92,13 @@ gulp.task('lint:html', ['generate:wrappedexamples'], () => {
         // Rules documentation:
         // https://github.com/yaniswang/HTMLHint/wiki/Rules
         'alt-require': true,
-        'attr-lowercase': ['viewBox', 'preserveAspectRatio'],
+        'attr-lowercase': [
+          'viewBox',
+          'preserveAspectRatio',
+          'filterUnits',
+          'gradientTransform',
+          'stdDeviation'
+        ],
         'attr-no-duplication': true,
         'attr-unsafe-chars': true,
         'attr-value-double-quotes': true,
@@ -104,7 +110,7 @@ gulp.task('lint:html', ['generate:wrappedexamples'], () => {
         'src-not-empty': true,
         'tag-pair': true,
         'tag-self-close': true,
-        'tagname-lowercase': true,
+        'tagname-lowercase': false,
         'title-require': true,
         // TODO: enable when https://github.com/yaniswang/HTMLHint/issues/139 is fixed
         // as <div>&lt;div></div> raises errors at the moment

diff --git a/test/__tests__/__snapshots__/Error_alert.json b/test/__tests__/__snapshots__/Error_alert.json
diff --git a/test/__tests__/__snapshots__/Illustration_Base.json b/test/__tests__/__snapshots__/Illustration_Base.json
diff --git a/test/__tests__/__snapshots__/Illustration_Desert.json b/test/__tests__/__snapshots__/Illustration_Desert.json
diff --git a/test/__tests__/__snapshots__/Illustration_Fishing_Deals.json b/test/__tests__/__snapshots__/Illustration_Fishing_Deals.json
diff --git a/test/__tests__/__snapshots__/Illustration_Going_Camping.json b/test/__tests__/__snapshots__/Illustration_Going_Camping.json
diff --git a/test/__tests__/__snapshots__/Illustration_Gone_Fishing.json b/test/__tests__/__snapshots__/Illustration_Gone_Fishing.json
diff --git a/test/__tests__/__snapshots__/Illustration_Lake_Mountain.json b/test/__tests__/__snapshots__/Illustration_Lake_Mountain.json
diff --git a/test/__tests__/__snapshots__/Illustration_Maintenance.json b/test/__tests__/__snapshots__/Illustration_Maintenance.json
diff --git a/test/__tests__/__snapshots__/Illustration_No_Access.json b/test/__tests__/__snapshots__/Illustration_No_Access.json
diff --git a/test/__tests__/__snapshots__/Illustration_No_Access_2.json b/test/__tests__/__snapshots__/Illustration_No_Access_2.json
diff --git a/test/__tests__/__snapshots__/Illustration_No_Connection.json b/test/__tests__/__snapshots__/Illustration_No_Connection.json
diff --git a/test/__tests__/__snapshots__/Illustration_No_Content.json b/test/__tests__/__snapshots__/Illustration_No_Content.json
diff --git a/test/__tests__/__snapshots__/Illustration_No_Events.json b/test/__tests__/__snapshots__/Illustration_No_Events.json
diff --git a/test/__tests__/__snapshots__/Illustration_No_Preview.json b/test/__tests__/__snapshots__/Illustration_No_Preview.json
diff --git a/test/__tests__/__snapshots__/Illustration_No_Task.json b/test/__tests__/__snapshots__/Illustration_No_Task.json
diff --git a/test/__tests__/__snapshots__/Illustration_Not_Available_In_Lightning.json b/test/__tests__/__snapshots__/Illustration_Not_Available_In_Lightning.json
diff --git a/test/__tests__/__snapshots__/Illustration_One_CTA_Button.json b/test/__tests__/__snapshots__/Illustration_One_CTA_Button.json
diff --git a/test/__tests__/__snapshots__/Illustration_One_CTA_Button_Brand.json b/test/__tests__/__snapshots__/Illustration_One_CTA_Button_Brand.json
diff --git a/test/__tests__/__snapshots__/Illustration_One_CTA_Link.json b/test/__tests__/__snapshots__/Illustration_One_CTA_Link.json
diff --git a/test/__tests__/__snapshots__/Illustration_Open_Road.json b/test/__tests__/__snapshots__/Illustration_Open_Road.json
diff --git a/test/__tests__/__snapshots__/Illustration_Page_Not_Available.json b/test/__tests__/__snapshots__/Illustration_Page_Not_Available.json
diff --git a/test/__tests__/__snapshots__/Illustration_Preview.json b/test/__tests__/__snapshots__/Illustration_Preview.json
diff --git a/test/__tests__/__snapshots__/Illustration_Research.json b/test/__tests__/__snapshots__/Illustration_Research.json
diff --git a/test/__tests__/__snapshots__/Illustration_Setup.json b/test/__tests__/__snapshots__/Illustration_Setup.json
diff --git a/test/__tests__/__snapshots__/Illustration_Text_Only_Heading.json b/test/__tests__/__snapshots__/Illustration_Text_Only_Heading.json
diff --git a/test/__tests__/__snapshots__/Illustration_Text_Only_Heading_and_Message.json b/test/__tests__/__snapshots__/Illustration_Text_Only_Heading_and_Message.json
diff --git a/test/__tests__/__snapshots__/Illustration_Text_Only_Message.json b/test/__tests__/__snapshots__/Illustration_Text_Only_Message.json
diff --git a/test/__tests__/__snapshots__/Illustration_Two_CTA.json b/test/__tests__/__snapshots__/Illustration_Two_CTA.json
diff --git a/test/__tests__/__snapshots__/Illustration_Walkthrough_Not_Available.json b/test/__tests__/__snapshots__/Illustration_Walkthrough_Not_Available.json
diff --git a/test/__tests__/__snapshots__/Illustration_With_Message.json b/test/__tests__/__snapshots__/Illustration_With_Message.json
diff --git a/test/__tests__/__snapshots__/Informational_alert.json b/test/__tests__/__snapshots__/Informational_alert.json
diff --git a/test/__tests__/__snapshots__/Offline_alert.json b/test/__tests__/__snapshots__/Offline_alert.json
diff --git a/test/__tests__/__snapshots__/Warning_alert.json b/test/__tests__/__snapshots__/Warning_alert.json
diff --git a/ui/components/_index.scss b/ui/components/_index.scss
@@ -224,6 +224,9 @@
   // Expandable
   'expandable-section/base/index',
 
+  // Illustration
+  'illustration/base/index',
+
   // Regions
   'regions/base/index',
 

diff --git a/ui/components/illustration/_doc.scss b/ui/components/illustration/_doc.scss
@@ -0,0 +1,19 @@
+// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
+
+/**
+ * An illustration is a component that displays an stateful image and message.
+ * Illustrations should be used within other components, such as cards, to express the state of the component (i.e. empty states).
+ * They should be accompanied by text that also describes the state of the component.
+ *
+ * #### Accessibility
+ *
+ * Each SVG tag requires an `aria-hidden="true"` attribute
+ *
+ * @summary Illustrations are used to display illustration images. They should be used within other components, such as cards.
+ *
+ * @base
+ * @name illustration
+ * @selector .slds-illustration
+ * @support dev-ready
+ */
diff --git a/ui/components/illustration/base/_index.scss b/ui/components/illustration/base/_index.scss
@@ -0,0 +1,70 @@
+// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
+
+/**
+ *
+ * @summary Initiates an illustration component
+ *
+ * @name base
+ * @selector .slds-illustration
+ * @restrict div
+ * @variant
+ */
+.slds-illustration {
+
+  text-align: center;
+
+  /**
+   * @summary Applies width and height values for small illustrations
+   * @selector .slds-illustration_small
+   * @restrict .slds-illustration
+   * @modifier
+   * @group width
+   */
+  &_small svg {
+    width: 100%;
+    max-width: 300px;
+    max-height: 200px;
+    margin-bottom: $spacing-medium;
+  }
+
+  /**
+   * @summary Applies width and height values for large illustrations
+   * @selector .slds-illustration_large
+   * @restrict .slds-illustration
+   * @modifier
+   * @group width
+   */
+  &_large svg {
+    width: 100%;
+    max-width: 600px;
+    max-height: 400px;
+    margin-bottom: $spacing-medium;
+  }
+
+  .slds-illustration__stroke-primary {
+    stroke: $illustration-color-primary;
+    stop-color: $illustration-color-primary;
+  }
+
+  .slds-illustration__stroke-secondary {
+    stroke: $illustration-color-secondary;
+    stop-color: $illustration-color-secondary;
+  }
+
+  .slds-illustration__fill-primary {
+    fill: $illustration-color-primary;
+  }
+
+  .slds-illustration__fill-secondary {
+    fill: $illustration-color-secondary;
+  }
+
+  .slds-illustration__stop-color-primary {
+    stop-color: $illustration-color-primary;
+  }
+
+  .slds-illustration__stop-color-secondary {
+    stop-color: $illustration-color-secondary;
+  }
+}