Merge pull request #1314 from Kajabi/SAGE-186_mw-alert-action-sm

SAGE-186: Sage 3.0 update Alert small variant
Kajabi · Apr 11, 2022 · 4a9ff61 · 4a9ff61
2 parents a5a2c8c + 5cd64ff
commit 4a9ff61
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 50 deletions.
diff --git a/docs/app/views/examples/components/alert/_preview.html.erb b/docs/app/views/examples/components/alert/_preview.html.erb
@@ -1,10 +1,11 @@
 <h3>Dismissable Alert</h3>
 <!-- Info -->
 <%= sage_component SageAlert, {
+  spacer: { bottom: "2xs" },
   color: "info",
   title: "Our privacy policy has changed",
   title_addon: "(as of November 11, 2021)",
-  desc: "Make sure you know how these changes affect you.",
+  desc: "Make sure you know how these changes affect you. Make sure you know how these changes affect you.",
   icon_name: "sage-icon-flag",
   dismissable: true,
   primary_action: {
@@ -29,9 +30,10 @@
 
 <!-- Success -->
 <%= sage_component SageAlert, {
+  spacer: { bottom: "2xs" },
   color: "published",
   title: "Account settings updated",
-  desc: "Make sure you know how these changes affect you.",
+  desc: "Make sure you know how these changes affect you. Make sure you know how these changes affect you.",
   icon_name: "sage-icon-check-circle",
   dismissable: true,
   primary_action: {
@@ -58,9 +60,10 @@
 
 <!-- Warning -->
 <%= sage_component SageAlert, {
+  spacer: { bottom: "2xs" },
   color: "warning",
   title: "Exceeded product amount limit",
-  desc: "Make sure you know how these changes affect you.",
+  desc: "Make sure you know how these changes affect you. Make sure you know how these changes affect you.",
   icon_name: "sage-icon-warning",
   dismissable: true,
 } do %>
@@ -73,9 +76,10 @@
 
 <!-- Danger -->
 <%= sage_component SageAlert, {
+  spacer: { bottom: "2xs" },
   color: "danger",
   title: "App outage tonight at 12am",
-  desc: "Make sure you know how these changes affect you.",
+  desc: "Make sure you know how these changes affect you. Make sure you know how these changes affect you.",
   icon_name: "sage-icon-danger",
   dismissable: true,
   primary_action: {
@@ -84,11 +88,13 @@
 } %>
 
 <h3>Non-Dismissable Alert (no close button)</h3>
+
 <!-- Info -->
 <%= sage_component SageAlert, {
+  spacer: { bottom: "2xs" },
   color: "info",
   title: "Our privacy policy has changed",
-  desc: "Make sure you know how these changes affect you.",
+  desc: "Make sure you know how these changes affect you. Make sure you know how these changes affect you.",
   icon_name: "sage-icon-info-circle",
   primary_action: {
     value: "Primary"
@@ -102,9 +108,10 @@
 
 <!-- Success -->
 <%= sage_component SageAlert, {
+  spacer: { bottom: "2xs" },
   color: "published",
   title: "Account settings updated",
-  desc: "Make sure you know how these changes affect you.",
+  desc: "Make sure you know how these changes affect you. Make sure you know how these changes affect you.",
   icon_name: "sage-icon-check-circle",
   primary_action: {
     value: "Primary"
@@ -118,9 +125,10 @@
 
 <!-- Warning -->
 <%= sage_component SageAlert, {
+  spacer: { bottom: "2xs" },
   color: "warning",
   title: "Exceeded product amount limit",
-  desc: "Make sure you know how these changes affect you.",
+  desc: "Make sure you know how these changes affect you. Make sure you know how these changes affect you.",
   icon_name: "sage-icon-warning",
   primary_action: {
     value: "Primary"
@@ -134,9 +142,10 @@
 
 <!-- Danger -->
 <%= sage_component SageAlert, {
+  spacer: { bottom: "2xs" },
   color: "danger",
   title: "App outage tonight at 12am",
-  desc: "Make sure you know how these changes affect you.",
+  desc: "Make sure you know how these changes affect you. Make sure you know how these changes affect you.",
   icon_name: "sage-icon-danger",
   primary_action: {
     value: "Primary"
@@ -149,34 +158,49 @@
 <% end %>
 
 <h3>Small Alerts</h3>
+
 <!-- Info -->
 <%= sage_component SageAlert, {
+  spacer: { bottom: :md },
   color: "info",
   desc: "Make sure you know how these changes affect you.",
   icon_name: "sage-icon-flag",
-  small: true
-} %>
+  small: true,
+  dismissable: true,
+} do %>
+  <% content_for :sage_alert_actions do %>
+    <%= link_to "Action", "#" %>
+  <% end %>
+<% end %>
 
 <!-- Success -->
 <%= sage_component SageAlert, {
+  spacer: { bottom: :md },
   color: "published",
   desc: "Make sure you know how these changes affect you.",
   icon_name: "sage-icon-check-circle",
-  small: true
+  small: true,
+  dismissable: true,
 } %>
 
 <!-- Warning -->
 <%= sage_component SageAlert, {
+  spacer: { bottom: :md },
   color: "warning",
   desc: "Make sure you know how these changes affect you.",
   icon_name: "sage-icon-warning",
-  small: true
-} %>
+  small: true,
+} do %>
+  <% content_for :sage_alert_actions do %>
+    <%= link_to "Action", "#" %>
+  <% end %>
+<% end %>
 
 <!-- Danger -->
 <%= sage_component SageAlert, {
+  spacer: { bottom: :md },
   color: "danger",
   desc: "Make sure you know how these changes affect you.",
   icon_name: "sage-icon-danger",
-  small: true
+  small: true,
 } %>
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_alert.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_alert.html.erb
@@ -3,6 +3,7 @@
     sage-alert<%= component.color ? "
     sage-alert--#{component.color}" : ""%>
     <%= "sage-alert--small" if component.small %>
+    <%= "sage-alert--small-dismissable" if component.small && component.dismissable %>
     <%= component.generated_css_classes %>
   "
   <%= component.generated_html_attributes.html_safe %>
@@ -22,7 +23,8 @@
     <% if component.desc %>
       <p class="sage-alert__desc"><%= component.desc %></p>
     <% end %>
-    <% if component.primary_action or component.secondary_actions or content_for? :sage_alert_actions %>
+  </div>
+  <% if component.primary_action or component.secondary_actions or content_for? :sage_alert_actions %>
       <div class="sage-alert__actions">
         <% if component.primary_action %>
           <%= sage_component SageButton, {
@@ -51,17 +53,18 @@
         <% end %>
       </div>
     <% end %>
-  </div>
   <% if component.dismissable %>
-    <%= sage_component SageButton, {
-      value: "Close",
-      icon: {
-        style: "only",
-        name: "remove"
-      },
-      subtle: true,
-      small: true,
-      css_classes: "sage-alert__close"
-    } %>
+    <div class="sage-alert__close">
+      <%= sage_component SageButton, {
+        value: "Close",
+        icon: {
+          style: "only",
+          name: "remove"
+        },
+        subtle: true,
+        small: true,
+        css_classes: "sage-alert__close-btn"
+      } %>
+    </div>
   <% end %>
 </div>
diff --git a/packages/sage-assets/lib/stylesheets/components/_alert.scss b/packages/sage-assets/lib/stylesheets/components/_alert.scss
@@ -18,18 +18,38 @@ $-alert-colors: (
 
 .sage-alert {
   display: grid;
-  grid-auto-columns: auto;
-  grid-auto-flow: column;
-  grid-template-columns: auto 1fr;
   gap: sage-spacing(sm);
   position: relative;
-  margin-bottom: sage-spacing(md);
   padding: sage-spacing(sm);
   border-radius: sage-border(radius);
 
   .sage-panel > & {
     margin-bottom: 0;
   }
+
+  &:not(.sage-alert--small) {
+    grid-template-columns: auto 1fr auto;
+    grid-template-areas:
+      "icon content close"
+      "icon content ."
+      "icon actions actions";
+
+    .sage-alert__copy {
+      grid-area: content;
+    }
+
+    .sage-alert__icon {
+      grid-area: icon;
+    }
+
+    .sage-alert__close {
+      grid-area: close;
+    }
+
+    .sage-alert__actions {
+      grid-area: actions;
+    }
+  }
 }
 
 @each $name, $color in $-alert-colors {
@@ -50,11 +70,15 @@ $-alert-colors: (
 
 .sage-alert--small {
   gap: sage-spacing(xs);
+  grid-auto-columns: auto;
+  grid-auto-flow: column;
+  grid-template-columns: auto 1fr;
   align-items: center;
   padding: sage-spacing(xs) sage-spacing(sm);
-  margin-bottom: 0;
+  border-radius: sage-border(radius);
 
   .sage-alert__icon {
+    margin-right: sage-spacing(xs);
     line-height: normal;
   }
 
@@ -101,6 +125,12 @@ $-alert-colors: (
 }
 
 .sage-alert__close {
+  .sage-alert--small & {
+    line-height: 1;
+  }
+}
+
+.sage-alert__close-btn {
   align-self: flex-start;
   height: rem(20px);
   width: rem(20px);
@@ -131,7 +161,6 @@ $-alert-colors: (
   flex-wrap: wrap;
   align-items: center;
   gap: sage-spacing(md);
-  margin-top: sage-spacing(xs); // note: total spacing is sm (16px) but grid stack adds 8px already
 
   @each $name, $color in $-alert-colors {
     .sage-alert--#{$name} & > a {
@@ -140,5 +169,8 @@ $-alert-colors: (
       font-weight: sage-font-weight(medium);
     }
   }
-}
 
+  .sage-alert--small-dismissable & {
+    margin-right: sage-spacing(2xs);
+  }
+}
diff --git a/packages/sage-react/lib/Alert/Alert.jsx b/packages/sage-react/lib/Alert/Alert.jsx
@@ -79,25 +79,27 @@ export const Alert = ({
         {description && (
           <p className="sage-alert__desc">{description}</p>
         )}
-        {actions && (
-          <div className="sage-alert__actions">
-            {actions}
-          </div>
-        )}
       </div>
+      {actions && (
+        <div className="sage-alert__actions">
+          {actions}
+        </div>
+      )}
       {dismissable && (
-        <button
-          aria-label="Close Alert"
-          className="sage-alert__close"
-          onClick={onClickDismiss}
-          type="button"
-        >
-          <Icon
-            color="charcoal-100"
-            icon="remove"
-            size="md"
-          />
-        </button>
+        <div className="sage-alert__close">
+          <button
+            aria-label="Close Alert"
+            className="sage-alert__close-btn"
+            onClick={onClickDismiss}
+            type="button"
+          >
+            <Icon
+              color="grey-500"
+              icon="remove"
+              size="md"
+            />
+          </button>
+        </div>
       )}
     </div>
   ) : null;