Skip to content

Commit

Permalink
Merge pull request #723 from GSA/status-tags
Browse files Browse the repository at this point in the history 
status tags for modular dashboard
  • Loading branch information
@cwolf10
cwolf10 authored Jan 9, 2025
2 parents 804f70f + ff2bf51 commit e238947
Show file tree
Hide file tree
Showing 3 changed files with 197 additions and 1 deletion.
68 changes: 67 additions & 1 deletion sam-styles/packages/branding/elements/_tags.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
$info-light-alt: #9DDFEB;
$info-lighter-alt: #E7F6F8;
$info-dark-alt: #009EC1;

$error-light-alt: #FDB8AE;
$error-lighter-alt: #FDB8AE;
$error-lightest-alt: #FDE0DB;
$error-dark-alt: #B50909;

.usa-tag:last-of-type {
margin-right: units(0.5);
}
Expand Down Expand Up @@ -401,4 +410,61 @@
line-height: 1.5;
margin-left: 0.75rem;
text-decoration: none;
}
}

.sds-tag-right-align {
position: absolute;
top: 12px;
right: 12px;
z-index: 10;
@media (max-width: 1000px) {
position: static;
display: block;
text-align: center;
}
}

.sds-status-tag {
@include u-font("sans", "3xs");
@include u-text("normal");
padding: 6px 10px !important;
margin: 8px;
border-radius: 99rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
@media (max-width: 1000px) {
width: 100%;
max-width: none;
border-radius: 4px 4px 0 0;
margin: 0px;
}

&--info {
background-color: $info-lighter-alt;
border-color: $info-light-alt;
}

&--error {
background-color: $error-lightest-alt;
border-color: $error-light-alt;
}

&--accent-cool {
@include u-bg("accent-cool-lighter");
@include u-border("accent-cool");
}
&--locked {
@include u-bg("base-light");
@include u-border("base-light");
i {
margin-right: 8px;
}
}
&--primary-lighter {
@include u-bg("primary-lighter");
@include u-border("primary");
}
}

126 changes: 126 additions & 0 deletions sam-styles/packages/components/tags/statusTag.html
View file
Original file line number Diff line number Diff line change
@@ -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="sds-tag-right-align">
<span class="sds-status-tag sds-status-tag--info">In Progress</span>
</div>
<div class="usa-card__header">
<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="sds-tag-right-align">
<span class="sds-status-tag sds-status-tag--error"
>Needs Review</span
>
</div>
<div class="usa-card__header">
<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="sds-tag-right-align">
<span class="sds-status-tag sds-status-tag--accent-cool"
>Not Started</span
>
</div>
<div class="usa-card__header">
<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="sds-tag-right-align">
<span class="sds-status-tag sds-status-tag--locked">
<i class="bi bi-lock-fill"></i> Locked
</span>
</div>
<div class="usa-card__header">
<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="sds-tag-right-align">
<span class="sds-status-tag sds-status-tag--primary-lighter"
>Complete</span
>
</div>
<div class="usa-card__header">
<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>
4 changes: 4 additions & 0 deletions sam-styles/packages/components/tags/tags.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -28,3 +29,6 @@ export const OutlinedSam = () => {
export const OutlinedExtended = () => {
return outlinedExtended;
};
export const StatusTag = () => {
return statusTag;
};

0 comments on commit e238947

Please sign in to comment.