status tags for modular dashboard

sam-styles/packages/branding/elements/_tags.scss

@@ -401,4 +401,46 @@
     line-height: 1.5;
     margin-left: 0.75rem;
     text-decoration: none;
-  }
+  }
+
+  .sds-tag-right-align {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    z-index: 10;
+  }
+
+  .sds-status-tag {
+    @include u-font("sans", "3xs");
+    @include u-text("normal");
+    padding: 6px 10px !important;
+    border-radius: 99rem;
+    display: inline-flex; 
+    align-items: center;
+    justify-content: center;
+    border: 1px solid transparent;
+
+    &--info {
+      @include u-bg("info-lighter");
+      @include u-border("info-light");
+    }
+
+    &--error {
+      background-color: #fdecea; 
+      @include u-border("error-lighter");
+    }
+
+    &--accent-cool {
+      @include u-bg("accent-cool-lighter");
+      @include u-border("accent-cool");
+    }
+    &--locked {
+      @include u-bg("base-light");
+      @include u-border("base-light");
+    }
+    &--primary-lighter {
+      @include u-bg("primary-lighter");
+      @include u-border("primary");
+    }
+  }
+

sam-styles/packages/components/tags/statusTag.html

@@ -0,0 +1,126 @@
+<h2>Status tags:</h2>
+<div class="grid-column">
+  <div class="grid-col-auto margin-top-2">
+    <span class="sds-status-tag sds-status-tag--info">In Progress</span>
+
+    <span class="sds-status-tag sds-status-tag--error">Needs Review</span>
+
+    <span class="sds-status-tag sds-status-tag--accent-cool"
+      >Not Started</span
+    >
+
+    <span class="sds-status-tag sds-status-tag--locked">
+      <i class="bi bi-lock-fill"></i> Locked
+    </span>
+
+    <span class="sds-status-tag sds-status-tag--primary-lighter"
+      >Complete</span
+    >
+  </div>
+</div>
+
+<h2>In progress:</h2>
+<div class="usa-card grid-col-6 tablet:grid-col-4">
+  <div class="usa-card__container">
+    <div class="usa-card__header">
+      <div class="sds-tag-right-align">
+        <span class="sds-status-tag sds-status-tag--info">In Progress</span>
+      </div>
+      <h4 class="usa-card__heading">Business Types</h4>
+    </div>
+    <div class="usa-card__body">
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
+        tenetur quo cupiditate, eaque qui officia recusandae.
+      </p>
+    </div>
+    <div class="usa-card__footer">
+      <button class="usa-button usa-button--info-light">Button</button>
+    </div>
+  </div>
+
+</br>
+
+  <div class="usa-card__container">
+    <div class="usa-card__header">
+      <div class="sds-tag-right-align">
+        <span class="sds-status-tag sds-status-tag--error"
+          >Needs Review</span
+        >
+      </div>
+      <h4 class="usa-card__heading">Business Types</h4>
+    </div>
+    <div class="usa-card__body">
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
+        tenetur quo cupiditate, eaque qui officia recusandae.
+      </p>
+    </div>
+    <div class="usa-card__footer">
+      <button class="usa-button usa-button--error-light">Button</button>
+    </div>
+  </div>
+  <h2>Not started:</h2>
+  <div class="usa-card__container">
+    <div class="usa-card__header">
+      <div class="sds-tag-right-align">
+        <span class="sds-status-tag sds-status-tag--accent-cool"
+          >Not Started</span
+        >
+      </div>
+      <h4 class="usa-card__heading">Business Types</h4>
+    </div>
+    <div class="usa-card__body">
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
+        tenetur quo cupiditate, eaque qui officia recusandae.
+      </p>
+    </div>
+    <div class="usa-card__footer">
+      <button class="usa-button usa-button--accent-cool">Button</button>
+    </div>
+  </div>
+</br>
+  <div class="usa-card__container">
+    <div class="usa-card__header">
+      <div class="sds-tag-right-align">
+        <span class="sds-status-tag sds-status-tag--locked">
+          <i class="bi bi-lock-fill"></i> Locked
+        </span>
+      </div>
+      <h4 class="usa-card__heading">Business Types</h4>
+    </div>
+    <div class="usa-card__body">
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
+        tenetur quo cupiditate, eaque qui officia recusandae.
+      </p>
+    </div>
+    <div class="usa-card__footer">
+      <button class="usa-button usa-button--base bg-base-lighter">
+        Button
+      </button>
+    </div>
+  </div>
+  <h2>Complete</h2>
+
+  <div class="usa-card__container">
+    <div class="usa-card__header">
+      <div class="sds-tag-right-align">
+        <span class="sds-status-tag sds-status-tag--primary-lighter"
+          >Complete</span
+        >
+      </div>
+      <h4 class="usa-card__heading">Business Types</h4>
+    </div>
+    <div class="usa-card__body">
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
+        tenetur quo cupiditate, eaque qui officia recusandae.
+      </p>
+    </div>
+    <div class="usa-card__footer">
+      <button class="usa-button bg-primary-lighter">Button</button>
+    </div>
+  </div>
+</div>

sam-styles/packages/components/tags/tags.stories.js

@@ -3,6 +3,7 @@ import info from "./info.html";
 import status from "./status.html";
 import outlinedSam from "./outlinedSam.html";
 import outlinedExtended from "./outlinedExtended.html";
+import statusTag from "./statusTag.html";
 
 
 export default {
@@ -28,3 +29,6 @@ export const OutlinedSam = () => {
 export const OutlinedExtended = () => {
   return outlinedExtended;
 };
+export const StatusTag = () => {
+  return statusTag;
+};