feat(ld-button): progress button

emdgroup-liquid · Aug 23, 2021 · aefdf0b · aefdf0b
1 parent 9712d12
commit aefdf0b
Show file tree

Hide file tree

Showing 12 changed files with 2,120 additions and 238 deletions.
diff --git a/screenshot/builds/master.json b/screenshot/builds/master.json
diff --git a/screenshot/images/0feab7c8d643973c38c64a17ae091cde.png b/screenshot/images/0feab7c8d643973c38c64a17ae091cde.png
diff --git a/screenshot/images/53643ed79afef6834e0adb5732d1f436.png b/screenshot/images/53643ed79afef6834e0adb5732d1f436.png
diff --git a/screenshot/images/9129bdf8cb4f428a2e38dc5ad1c68685.png b/screenshot/images/9129bdf8cb4f428a2e38dc5ad1c68685.png
diff --git a/screenshot/images/b4a7482a070a4f50805586de2ffaeb60.png b/screenshot/images/b4a7482a070a4f50805586de2ffaeb60.png
diff --git a/screenshot/images/fca3b0a1cba1a1309c4d8822815474fd.png b/screenshot/images/fca3b0a1cba1a1309c4d8822815474fd.png
diff --git a/screenshot/images/fe2c9ae45bd27903c53e11b928dc2fbe.png b/screenshot/images/fe2c9ae45bd27903c53e11b928dc2fbe.png
diff --git a/src/liquid/components/ld-button/ld-button.css b/src/liquid/components/ld-button/ld-button.css
@@ -22,6 +22,7 @@ ld-button {
   --ld-button-gap-sm: 0.625rem;
   --ld-button-gap-md: 0.875rem;
   --ld-button-gap-lg: 1.1875rem;
+  position: relative;
   font: var(--ld-typo-body-m);
   border: 0;
   padding: var(--ld-button-padding-y-md) var(--ld-button-padding-x-md);
@@ -130,12 +131,62 @@ ld-button {
   &:where(.ld-button--justify-between) {
     justify-content: space-between;
   }
+
+  &[aria-busy='true'] {
+    cursor: progress;
+  }
+}
+
+@keyframes ld-button-progress-pending {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.ld-button__progress {
+  --ld-button-progress: 0;
+  position: absolute;
+  background-color: inherit;
+  inset: auto 0 0;
+  height: var(--ld-br-m);
+  overflow: hidden;
+  border-bottom-left-radius: var(--ld-br-full);
+  border-bottom-right-radius: var(--ld-br-full);
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+  }
+
+  &::before {
+    background-color: inherit;
+    filter: brightness(0.8);
+  }
+
+  &::after {
+    background-color: var(--ld-button-progress-color);
+    transition: transform 0.2s ease;
+    transform: translateX(-100%)
+      translateX(calc(var(--ld-button-progress) * 100%));
+  }
+
+  &--pending {
+    &::after {
+      animation: ld-button-progress-pending 1s linear infinite;
+    }
+  }
 }
 
 /* .ld-theme-ocean -> default */
 .ld-button,
 .ld-theme-ocean .ld-button,
 [class*='ld-theme'] .ld-theme-ocean .ld-button {
+  --ld-button-progress-color: var(--ld-thm-ocean-accent);
   background-color: var(--ld-thm-ocean-bg-primary);
   color: var(--ld-col-wht);
 
@@ -187,9 +238,29 @@ ld-button {
   }
 }
 
+.ld-theme-bubblegum,
+[class*='ld-theme'] .ld-theme-bubblegum {
+  .ld-button {
+    --ld-button-progress-color: var(--ld-thm-bubblegum-accent);
+  }
+}
+.ld-theme-shake,
+[class*='ld-theme'] .ld-theme-shake {
+  .ld-button {
+    --ld-button-progress-color: var(--ld-thm-shake-accent);
+  }
+}
+.ld-theme-solvent,
+[class*='ld-theme'] .ld-theme-solvent {
+  .ld-button {
+    --ld-button-progress-color: var(--ld-thm-solvent-accent);
+  }
+}
+
 .ld-theme-tea,
 [class*='ld-theme'] .ld-theme-tea {
   :where(.ld-button) {
+    --ld-button-progress-color: var(--ld-thm-tea-accent);
     background-color: var(--ld-thm-tea-bg-primary);
 
     &:where(:not(:disabled):not([aria-disabled='true'])) {
@@ -232,6 +303,10 @@ ld-button {
       color: var(--ld-col-vy4);
     }
   }
+
+  .ld-button__progress::after {
+    background-color: var(--ld-col-vy6);
+  }
 }
 
 .ld-button--danger,
@@ -256,6 +331,10 @@ ld-button {
       color: var(--ld-col-wht);
     }
   }
+
+  .ld-button__progress::after {
+    background-color: var(--ld-col-rr6);
+  }
 }
 
 .ld-button--secondary,
@@ -284,6 +363,13 @@ ld-button {
       background-color: var(--ld-col-rb-a02);
     }
   }
+
+  .ld-button__progress::before {
+    background-color: var(--ld-col-rb-a01);
+  }
+  .ld-button__progress::after {
+    background-color: var(--ld-col-rb-default);
+  }
 }
 
 .ld-button--secondary,
@@ -312,6 +398,13 @@ ld-button {
         background-color: var(--ld-col-rp-a02);
       }
     }
+
+    .ld-button__progress::before {
+      background-color: var(--ld-col-rp-a01);
+    }
+    .ld-button__progress::after {
+      background-color: var(--ld-col-rp-default);
+    }
   }
 
   .ld-theme-tea &,
@@ -334,6 +427,13 @@ ld-button {
         background-color: var(--ld-col-rg-a02);
       }
     }
+
+    .ld-button__progress::before {
+      background-color: var(--ld-col-rg-a01);
+    }
+    .ld-button__progress::after {
+      background-color: var(--ld-col-rg-default);
+    }
   }
 }
 

diff --git a/src/liquid/components/ld-button/ld-button.tsx b/src/liquid/components/ld-button/ld-button.tsx
@@ -55,6 +55,9 @@ export class LdButton {
    */
   @Prop() target?: '_blank' | '_self' | '_parent' | '_top'
 
+  /** Displays a progress bar at the bottom of the button. */
+  @Prop() progress: 'pending' | number
+
   private handleClick(ev) {
     const ariaDisabled = this.button.getAttribute('aria-disabled')
     if (ariaDisabled && ariaDisabled !== 'false') {
@@ -76,6 +79,15 @@ export class LdButton {
 
     const Tag = this.href ? 'a' : 'button'
 
+    const hasProgress = this.progress !== undefined
+
+    const styleProgress = !isNaN(parseFloat(this.progress + ''))
+      ? { '--ld-button-progress': this.progress + '' }
+      : undefined
+    const clProgress = `ld-button__progress${
+      this.progress === 'pending' ? ' ld-button__progress--pending' : ''
+    }`
+
     return (
       <Host>
         <Tag
@@ -84,6 +96,8 @@ export class LdButton {
           class={cl}
           disabled={this.disabled}
           aria-disabled={this.disabled ? 'true' : undefined}
+          aria-busy={hasProgress ? 'true' : undefined}
+          aria-live="polite"
           href={this.href}
           target={this.target}
           rel={this.target === '_blank' ? 'noreferrer noopener' : undefined}
@@ -94,6 +108,9 @@ export class LdButton {
               ))}
         >
           <slot />
+          {hasProgress && (
+            <span class={clProgress} style={styleProgress}></span>
+          )}
         </Tag>
       </Host>
     )

diff --git a/src/liquid/components/ld-button/readme.md b/src/liquid/components/ld-button/readme.md
@@ -419,6 +419,39 @@ You can align the text inside the button using the `align-text` propperty.
 
 > __Note:__ When using `target="_blank"` a `rel` attribute with the value `noreferrer noopener` is applied automatically. Just in case. If you are using the CSS component version of the button, you will need to take care of this yourself. See [https://web.dev/external-anchors-use-rel-noopener/](https://web.dev/external-anchors-use-rel-noopener/)
 
+### Progress button
+
+{% example 'html', false, true %}
+<ld-button progress="0.75">Text</ld-button>
+
+<ld-button progress="pending">Text</ld-button>
+
+<ld-button progress="pending" mode="secondary">Text</ld-button>
+
+<ld-button progress="pending" mode="ghost">Text</ld-button>
+
+<!-- CSS component -->
+
+<button class="ld-button" aria-busy="true" aria-live="polite">
+  Text
+  <span class="ld-button__progress" style="--ld-button-progress: 0.75"></span>
+</button>
+
+<button class="ld-button" aria-busy="true" aria-live="polite">
+  Text
+  <span class="ld-button__progress ld-button__progress--pending"></span>
+</button>
+
+<button class="ld-button ld-button--secondary" aria-busy="true" aria-live="polite">
+  Text
+  <span class="ld-button__progress ld-button__progress--pending"></span>
+</button>
+
+<button class="ld-button ld-button--ghost" aria-busy="true" aria-live="polite">
+  Text
+  <span class="ld-button__progress ld-button__progress--pending"></span>
+</button>
+{% endexample %}
 
 <!-- Auto Generated Below -->
 
@@ -433,6 +466,7 @@ You can align the text inside the button using the `align-text` propperty.
 | `justifyContent` | `justify-content` | Justify content.                                                                                                                                                                                                      | `"between" \| "end" \| "start"`                                                                       | `undefined` |
 | `key`            | `key`             | for tracking the node's identity when working with lists                                                                                                                                                              | `string \| number`                                                                                    | `undefined` |
 | `mode`           | `mode`            | Display mode.                                                                                                                                                                                                         | `"danger" \| "ghost" \| "highlight" \| "on-brand-color" \| "secondary" \| "secondary-on-brand-color"` | `undefined` |
+| `progress`       | `progress`        | Displays a progress bar at the bottom of the button.                                                                                                                                                                  | `"pending" \| number`                                                                                 | `undefined` |
 | `ref`            | `ref`             | reference to component                                                                                                                                                                                                | `any`                                                                                                 | `undefined` |
 | `size`           | `size`            | Size of the button.                                                                                                                                                                                                   | `"lg" \| "sm"`                                                                                        | `undefined` |
 | `target`         | `target`          | The `target` attributed can be used in conjunction with the `href` attribute. See [mdn docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target) for more information on the `target` attribute. | `"_blank" \| "_parent" \| "_self" \| "_top"`                                                          | `undefined` |

diff --git a/src/liquid/components/ld-button/test/ld-button.e2e.ts b/src/liquid/components/ld-button/test/ld-button.e2e.ts
@@ -165,6 +165,34 @@ describe('ld-button', () => {
           expect(results).toMatchScreenshot({ allowableMismatchedRatio })
         })
 
+        // Progress button
+        it(`progress button theme-${theme}`, async () => {
+          const page = await getPageWithContent(
+            `<ld-button progress="0.75">Text</ld-button>`,
+            theme
+          )
+          const results = await page.compareScreenshot()
+          expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+        })
+
+        it(`progress button secondary theme-${theme}`, async () => {
+          const page = await getPageWithContent(
+            `<ld-button progress="0.75" mode="secondary">Text</ld-button>`,
+            theme
+          )
+          const results = await page.compareScreenshot()
+          expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+        })
+
+        it(`progress button ghost theme-${theme}`, async () => {
+          const page = await getPageWithContent(
+            `<ld-button progress="0.75" mode="ghost">Text</ld-button>`,
+            theme
+          )
+          const results = await page.compareScreenshot()
+          expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+        })
+
         // Themed CSS component
         const modeModifier = mode ? ` ld-button--${mode}` : ''
         it(`css component default theme-${theme}${modeStr}`, async () => {
@@ -279,6 +307,43 @@ describe('ld-button', () => {
           const results = await page.compareScreenshot()
           expect(results).toMatchScreenshot({ allowableMismatchedRatio })
         })
+
+        // Progress button CSS component
+        it(`css component progress button theme-${theme}`, async () => {
+          const page = await getPageWithContent(
+            `<button aria-busy="true" aria-live="polite" class="ld-button">
+              Text
+              <span class="ld-button__progress" style="--ld-button-progress: 0.75"></span>
+            </button>`,
+            theme
+          )
+          const results = await page.compareScreenshot()
+          expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+        })
+
+        it(`css component progress button secondary theme-${theme}`, async () => {
+          const page = await getPageWithContent(
+            `<button aria-busy="true" aria-live="polite" class="ld-button ld-button--secondary">
+              Text
+              <span class="ld-button__progress" style="--ld-button-progress: 0.75"></span>
+            </button>`,
+            theme
+          )
+          const results = await page.compareScreenshot()
+          expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+        })
+
+        it(`css component progress button ghost theme-${theme}`, async () => {
+          const page = await getPageWithContent(
+            `<button aria-busy="true" aria-live="polite" class="ld-button ld-button--ghost">
+              Text
+              <span class="ld-button__progress" style="--ld-button-progress: 0.75"></span>
+            </button>`,
+            theme
+          )
+          const results = await page.compareScreenshot()
+          expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+        })
       }
     })
   }