Merge pull request #686 from kchar601/master

pulse added to docs

Author: btopro

elements/d-d-d/lib/DDDStyles.js

@@ -658,6 +658,10 @@ export const DDDVariables = css`
     --ddd-primary-19-rgb: 74, 119, 41; /* Forest Green */
     --ddd-primary-20-rgb: 106, 48, 40; /* Landgrant Brown */
     --ddd-primary-21-rgb: 235, 255, 0; /* Global Neon */
+    --ddd-primary-22-rgb: 95, 33, 32; /* Error */
+    --ddd-primary-23-rgb: 102, 60, 0; /* Warning */
+    --ddd-primary-24-rgb: 1, 67, 97; /* Info */
+    --ddd-primary-25-rgb: 30, 70, 32; /* Success */
 
     /* primary colors */
     --ddd-primary-0: var(
@@ -4085,6 +4089,18 @@ export const DDDPulseEffect = css`
   :host([data-primary="21"]) {
     --ddd-animation-pulse-color: var(--ddd-primary-21-rgb);
   }
+  :host([data-primary="22"]) {
+    --ddd-animation-pulse-color: var(--ddd-primary-22-rgb);
+  }
+  :host([data-primary="23"]) {
+    --ddd-animation-pulse-color: var(--ddd-primary-23-rgb);
+  }
+  :host([data-primary="24"]) {
+    --ddd-animation-pulse-color: var(--ddd-primary-24-rgb);
+  }
+  :host([data-primary="25"]) {
+    --ddd-animation-pulse-color: var(--ddd-primary-25-rgb);
+  }
 
   :host([data-pulse]) {
     --ddd-animation-pulse-size: var(--ddd-spacing-4);

elements/d-d-d/lib/d-d-docs.js

@@ -39,7 +39,6 @@ export const styleGuideTopics = {
   InstructionalComponents: "InstructionalComponents",
   Buttons: "Buttons",
   PageSections: "PageSections",
-  Contrast: "Contrast",
 };
 
 class DDDocs extends DDD {
@@ -213,8 +212,18 @@ class DDDocs extends DDD {
           )}
         </div>
       `,
-    )} `;
-  }
+    )}
+    <h5 style="margin-top: 64px;">Note: Pointer events are disabled so the pulsing will not self-remove on hover</h5>
+    <div style="display: grid; grid-template-columns: repeat(4, 1fr); margin: 32px 64px 64px; row-gap: 32px; pointer-events: none;">
+      ${Object.keys(ApplicationAttributeData.primary).map(
+        (key) => html`
+            <simple-cta data-primary="${key}" data-pulse>Primary-${key}</simple-cta>
+            <simple-cta data-primary="${key}" data-pulse light>Primary-${key}</simple-cta>
+        `,
+      )}
+    </div>
+    `;
+  } 
 
   renderHeaderSample() {
     let headers = [];
@@ -1682,7 +1691,6 @@ class DDDocs extends DDD {
       </div>
       <h3>Buttons also support data-accent!</h3>
       <div style="display: inline-flex; width: fit-content; align-items: center;">
-        <simple-cta data-primary="11" data-accent="11" light>Accent-11</simple-cta>
         <simple-cta data-primary="11" data-accent="7" light>Accent-7</simple-cta>
         <simple-cta data-primary="1" data-accent="9" light>Accent-9</simple-cta>
         <simple-cta data-primary="1" data-accent="14" light>Accent-14</simple-cta>
@@ -1693,6 +1701,7 @@ class DDDocs extends DDD {
       <div style="display: inline-flex; width: fit-content; align-items: center; margin-bottom: 64px;">
         <simple-cta data-primary="15" data-accent="10" light>Accent-10</simple-cta>
         <simple-cta data-primary="8" data-accent="7" light>Accent-7</simple-cta>
+        <simple-cta data-primary="11" data-accent="11" light>Accent-11</simple-cta>
       </div>
     `);
     return headers;
@@ -2061,21 +2070,6 @@ class DDDocs extends DDD {
     `;
   }
 
-  renderContrast(){
-    let text = [];
-    let exceptions = [0, 5, 7, 8, 9, 10, 12, 14, 15, 16, 17, 18, 21]
-    for (var i = 0; i<26; i++){
-      for(var j = 0; j<15; j++){
-        if(!exceptions.includes(i)){
-          text.push(html`
-            <p data-accent="${j}" data-primary="${i}" style="color: var(--ddd-theme-primary);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          `);
-        }
-      }
-    }
-    return text;
-  }
-
   selectOption() {
     return html`
       <h1 class="fs-m my-2">Select an option to render</h1>