Add animated_badge (#27)

* Add animated_badge

* linting

* linting

Author: Jonstal

Gemfile.lock

@@ -385,6 +385,7 @@ GEM
 PLATFORMS
   aarch64-linux
   arm64-darwin-21
+  arm64-darwin-22
   arm64-darwin-23
   x86_64-linux
 

app/assets/stylesheets/application.scss

@@ -11,3 +11,4 @@
 @import 'components/tab';
 @import 'components/modal';
 @import 'components/autocomplete';
+@import 'components/animated_badge';

app/assets/stylesheets/components/_animated_badge.scss

@@ -0,0 +1,23 @@
+.pulsating-badge {
+  animation-name: pulse;
+  animation-duration: var(--animation-duration, 1s);
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+  padding: 2px 8px;
+  display: inline-flex;
+  border: 2px solid var(--border-color, black);
+  border-radius: 0.75rem;
+  margin: 0 16px 32px 0;
+
+  @keyframes pulse {
+    from {
+      transform: scale3d(1, 1, 1);
+    }
+    50% {
+      transform: scale3d(var(--pulse-scale, 1.05), var(--pulse-scale, 1.05), var(--pulse-scale, 1.05));
+    }
+    to {
+      transform: scale3d(1, 1, 1);
+    }
+  }
+}

app/components/previews/animated_badge_component_preview.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+class AnimatedBadgeComponentPreview < Lookbook::Preview
+  include LookbookHelper
+
+  # Interactive playground for experimenting with badge styles and animations.
+  # @param title text "Badge Title"
+  # @param colour select :theme_choices
+  # @param border_color color "Border Color"
+  # @param duration number "Animation Duration (seconds)"
+  # @param pulse_scale text "Scale Value"
+  # @source ../../../app/views/components/animated_badges/_playground.html.erb
+  def playground(
+    title: 'Animated badge',
+    colour: 'primary',
+    border_color: 'black',
+    duration: 1,
+    pulse_scale: 1.05
+  )
+    render 'components/animated_badges/playground',
+           title: title,
+           colour: colour,
+           border_color: border_color,
+           duration: duration,
+           pulse_scale: pulse_scale
+  end
+
+  # @source ../../../app/views/components/animated_badges/_themes.html.erb
+  def themes
+    render 'components/animated_badges/themes'
+  end
+end

app/views/components/animated_badges/_playground.html.erb

@@ -0,0 +1,10 @@
+<div class="pulsating-badge bg-<%= colour %>"
+     style="
+         --border-color: <%= border_color %>;
+         animation-duration: <%= duration %>s;
+         --pulse-scale: <%= pulse_scale.to_f %>;
+     ">
+  <span class="badge">
+    <%= title %>
+  </span>
+</div>

app/views/components/animated_badges/_themes.html.erb

@@ -0,0 +1,56 @@
+<div class="mb-8">
+  <h5>Different colors</h5>
+    <div class="pulsating-badge bg-success">
+      <span class="badge">Success</span>
+    </div>
+
+    <div class="pulsating-badge bg-warning">
+      <span class="badge">Warning</span>
+    </div>
+
+    <div class="pulsating-badge bg-danger">
+      <span class="badge">Danger</span>
+    </div>
+
+    <div class="pulsating-badge bg-info">
+      <span class="badge">Info</span>
+    </div>
+
+    <div class="pulsating-badge bg-primary">
+      <span class="badge">Primary</span>
+    </div>
+
+    <div class="pulsating-badge bg-secondary">
+      <span class="badge">Secondary</span>
+    </div>
+</div>
+
+<div>
+  <h5>Different durations</h5>
+    <div class="pulsating-badge bg-primary" style="animation-duration: 1s;">
+      <span class="badge">1s</span>
+    </div>
+
+    <div class="pulsating-badge bg-primary" style="animation-duration: 2s;">
+      <span class="badge">2s</span>
+    </div>
+
+    <div class="pulsating-badge bg-primary" style="animation-duration: 5s;">
+      <span class="badge">5s</span>
+    </div>
+</div>
+
+<div>
+  <h5>Different scales</h5>
+    <div class="pulsating-badge bg-primary" style="--pulse-scale: 1.1;">
+      <span class="badge">1.1 Scale</span>
+    </div>
+
+    <div class="pulsating-badge bg-primary" style="--pulse-scale: 1.2;">
+      <span class="badge">1.2 Scale</span>
+    </div>
+
+    <div class="pulsating-badge bg-primary" style="--pulse-scale: 1.5;">
+      <span class="badge">1.5 Scale</span>
+    </div>
+</div>