From 1bfbd665fa23528690ee9efc81a709fdabd959b2 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 27 Jul 2020 07:32:17 -0400
Subject: [PATCH] Add pulse prop to badge

---
 docs/components/badge.md        | 22 +++++++++++++++
 src/components.d.ts             |  8 ++++++
 src/components/badge/badge.scss | 47 ++++++++++++++++++++++++++++++++-
 src/components/badge/badge.tsx  |  6 ++++-
 4 files changed, 81 insertions(+), 2 deletions(-)

diff --git a/docs/components/badge.md b/docs/components/badge.md
index 6d7566b81..758c2f54c 100644
--- a/docs/components/badge.md
+++ b/docs/components/badge.md
@@ -24,6 +24,8 @@ Set the `type` attribute to change the badge's type.
 
 ### Pill Badges
 
+Use the `pill` attribute to give badges rounded edges.
+
 ```html preview
 <sl-badge type="primary" pill>Primary</sl-icon></sl-badge>
 <sl-badge type="success" pill>Success</sl-badge>
@@ -32,6 +34,26 @@ Set the `type` attribute to change the badge's type.
 <sl-badge type="danger" pill>Danger</sl-badge>
 ```
 
+### Pulsating Badges
+
+Use the `pulse` attribute to draw attention to the badge with a subtle animation.
+
+```html preview
+<div class="badge-pulse">
+  <sl-badge type="primary" pill pulse>1</sl-icon></sl-badge>
+  <sl-badge type="success" pill pulse>1</sl-badge>
+  <sl-badge type="info" pill pulse>1</sl-badge>
+  <sl-badge type="warning" pill pulse>1</sl-badge>
+  <sl-badge type="danger" pill pulse>1</sl-badge>
+</div>
+
+<style>
+  .badge-pulse sl-badge:not(:last-of-type) {
+    margin-right: 1rem;
+  }
+</style>
+```
+
 ### With Buttons
 
 One of the most common use cases for badges is attaching them to buttons. To make this easier, badges will be automatically positioned at the top-right when they're a child of a button.
diff --git a/src/components.d.ts b/src/components.d.ts
index d86a965aa..c36be66df 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -51,6 +51,10 @@ export namespace Components {
           * Set to true to draw a pill-style badge with rounded edges.
          */
         "pill": boolean;
+        /**
+          * Set to true to make the badge pulsate to draw attention.
+         */
+        "pulse": boolean;
         /**
           * The badge's type.
          */
@@ -1184,6 +1188,10 @@ declare namespace LocalJSX {
           * Set to true to draw a pill-style badge with rounded edges.
          */
         "pill"?: boolean;
+        /**
+          * Set to true to make the badge pulsate to draw attention.
+         */
+        "pulse"?: boolean;
         /**
           * The badge's type.
          */
diff --git a/src/components/badge/badge.scss b/src/components/badge/badge.scss
index d67741367..131d46c3e 100644
--- a/src/components/badge/badge.scss
+++ b/src/components/badge/badge.scss
@@ -49,9 +49,54 @@
 }
 
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-// Pill modifiers
+// Pill modifier
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
 .badge--pill {
   border-radius: var(--sl-border-radius-pill);
 }
+
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+// Pulse modifier
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+.badge--pulse {
+  animation: pulse 1.5s infinite;
+}
+
+.badge--pulse.badge--primary {
+  --pulse-hue: var(--sl-color-primary-hue);
+  --pulse-saturation: var(--sl-color-primary-saturation);
+}
+
+.badge--pulse.badge--success {
+  --pulse-hue: var(--sl-color-success-hue);
+  --pulse-saturation: var(--sl-color-success-saturation);
+}
+
+.badge--pulse.badge--info {
+  --pulse-hue: var(--sl-color-info-hue);
+  --pulse-saturation: var(--sl-color-info-saturation);
+}
+
+.badge--pulse.badge--warning {
+  --pulse-hue: var(--sl-color-warning-hue);
+  --pulse-saturation: var(--sl-color-warning-saturation);
+}
+
+.badge--pulse.badge--danger {
+  --pulse-hue: var(--sl-color-danger-hue);
+  --pulse-saturation: var(--sl-color-danger-saturation);
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 hsla(var(--pulse-hue), var(--pulse-saturation), 50%, 0.75);
+  }
+  70% {
+    box-shadow: 0 0 0 0.5rem hsla(var(--pulse-hue), var(--pulse-saturation), 50%, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 hsla(var(--pulse-hue), var(--pulse-saturation), 50%, 0);
+  }
+}
diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx
index 5ac77a444..e9692225e 100644
--- a/src/components/badge/badge.tsx
+++ b/src/components/badge/badge.tsx
@@ -23,6 +23,9 @@ export class Badge {
   /** Set to true to draw a pill-style badge with rounded edges. */
   @Prop() pill = false;
 
+  /** Set to true to make the badge pulsate to draw attention. */
+  @Prop() pulse = false;
+
   render() {
     return (
       <span
@@ -38,7 +41,8 @@ export class Badge {
           'badge--warning': this.type === 'warning',
           'badge--danger': this.type === 'danger',
           'badge--text': this.type === 'text',
-          'badge--pill': this.pill
+          'badge--pill': this.pill,
+          'badge--pulse': this.pulse
         }}
         role="status"
       >