Merge branch 'uswds3.3' of https://github.com/GSA/sam-styles into uswds3.3

Author: yerramshilpa

src/packages/components/alerts/alert.stories.js

@@ -12,7 +12,7 @@ export default {
     class: {type: "string"},
     //role: {type: "string"},
     //title: {type: "string"},
-    //text: {type: "string"},
+    text: {type: "string"},
   },
 };
 
@@ -21,60 +21,60 @@ export const __namedExportsOrder = ['Default','Expanded', 'Header', 'Sticky', 'D
 const AlertTemplate = (args) => {
   return `
 <h3>SDS Alert Default</h3>
-<div class="sds-alert--default info ${args.class}">
+<div class="sds-alert info ${args.class}">
     <div class="grid-container width-full maxw-full margin-0 padding-0">
         <div class="grid-row">
             <div class="grid-col-auto">
                 <i class="sds bi-info-circle size-2x"></i>
             </div>
             <div class="grid-col-fill">
-                <span class="sds-alert--default-content">
-                    <b>Less important than Global Alerts</b> Consectetur adipiscing elit, sed do eiusmod tempor indididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+                <span class="sds-alert-content">
+                    <b>Less important than Global Alerts</b></br>${args.text}
                 </span>
             </div>
         </div>
     </div>
 </div>
 
-<div class="sds-alert--default ${args.class}">
+<div class="sds-alert ${args.class}">
     <div class="grid-container width-full maxw-full margin-0 padding-0">
         <div class="grid-row">
             <div class="grid-col-auto">
                 <i class="sds bi-exclamation-triangle size-2x"></i>
             </div>
             <div class="grid-col-fill">
-                <span class="sds-alert--default-content">
-                    <b>Less important than Global Alerts</b> Consectetur adipiscing elit, sed do eiusmod tempor indididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+                <span class="sds-alert-content">
+                    <b>Less important than Global Alerts</b></br>${args.text}
                 </span>
             </div>
         </div>
     </div>
 </div>
 
-<div class="sds-alert--default error ${args.class}">
+<div class="sds-alert error ${args.class}">
     <div class="grid-container width-full maxw-full margin-0 padding-0">
         <div class="grid-row">
             <div class="grid-col-auto">
                 <i class="sds bi-slash-circle size-2x"></i>
             </div>
             <div class="grid-col-fill">
-                <span class="sds-alert--default-content">
-                    <b>Error Alerts Lorem Ipsum</b> Consectetur adipiscing elit, sed do eiusmod tempor indididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+                <span class="sds-alert-content">
+                    <b>Error Alerts Lorem Ipsum</b></br>${args.text}
                 </span>
             </div>
         </div>
     </div>
 </div>
 
-<div class="sds-alert--default success ${args.class}">
+<div class="sds-alert success ${args.class}">
     <div class="grid-container width-full maxw-full margin-0 padding-0">
         <div class="grid-row">
             <div class="grid-col-auto">
                 <i class="sds bi-check-circle size-2x"></i>
             </div>
             <div class="grid-col-fill">
-                <span class="sds-alert--default-content">
-                    <b>Less important than Global Alerts</b> Consectetur adipiscing elit, sed do eiusmod tempor indididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+                <span class="sds-alert-content">
+                    <b>Less important than Global Alerts</b></br>${args.text}
                 </span>
             </div>
         </div>
@@ -130,7 +130,7 @@ Default.args = {
   class: "",
   //role: "",
   //title: "",
-  //text: 'Lorem ipsum dolor sit amet, <a class="usa-link" href="javascript:void(0);">consectetur adipiscing</a> elit, sed do eiusmod.',
+  text: 'Consectetur adipiscing elit, sed do eiusmod tempor indididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.',
 };
 
 /*export const Emergency = AlertTemplate.bind({});

src/packages/components/alerts/styles/alert.scss

@@ -1,6 +1,6 @@
 //SDS ALERT
 
-.sds-alert {
+.sds-alert--deprecated {
   @include u-padding('05');
   @include u-radius('lg');
   border: solid 0.1rem #fbc036;
@@ -331,7 +331,7 @@
   }
 }
 //ALERT-Default
-.sds-alert--default {
+.sds-alert {
   border: solid 0.1rem #FEBE2E;
   @include u-radius('lg');
   @include u-display('flex');
@@ -353,10 +353,9 @@
     margin: auto 10px;
   }
 
-  .sds-alert--default-content {
+  .sds-alert-content {
     @include u-display('inline-block');
     margin: auto;
-    max-width: 75%;
   }
 
   // Alert tag - Info

src/packages/components/alerts/templates/default.html

@@ -1,19 +1,19 @@
 <h3>SDS Alert</h3>
-<div class="sds-alert">
+<div class="sds-alert--deprecated">
     <div class="sds-alert-icon">
         <i class="text-ink bi bi-exclamation-lg size-lg"></i>
     </div>
     <span>Review Required</span>
 </div>
 
-<div class="sds-alert info margin-y-4">
+<div class="sds-alert--deprecated info margin-y-4">
     <div class="sds-alert-icon">
         <i class="fa text-ink bi-exclamation-lg size-lg"></i>
     </div>
     <span>Review Required</span>
 </div>
 
-<div class="sds-alert error">
+<div class="sds-alert--deprecated error">
     <div class="sds-alert-icon">
         <i class="fa text-ink bi-exclamation-lg size-lg"></i>
     </div>