From 084fd473d6a5ea49ae50ad03d94f4212b2b95ce2 Mon Sep 17 00:00:00 2001 From: Shayan Roshan Date: Thu, 12 Dec 2024 15:32:16 -0600 Subject: [PATCH 1/5] status tags for modular dashboard --- .../packages/branding/elements/_tags.scss | 44 +++++- .../packages/components/tags/statusTag.html | 126 ++++++++++++++++++ .../packages/components/tags/tags.stories.js | 4 + 3 files changed, 173 insertions(+), 1 deletion(-) create mode 100644 sam-styles/packages/components/tags/statusTag.html diff --git a/sam-styles/packages/branding/elements/_tags.scss b/sam-styles/packages/branding/elements/_tags.scss index 76cff55f..c4c5ddb6 100644 --- a/sam-styles/packages/branding/elements/_tags.scss +++ b/sam-styles/packages/branding/elements/_tags.scss @@ -401,4 +401,46 @@ line-height: 1.5; margin-left: 0.75rem; text-decoration: none; - } \ No newline at end of file + } + + .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"); + } + } + \ No newline at end of file diff --git a/sam-styles/packages/components/tags/statusTag.html b/sam-styles/packages/components/tags/statusTag.html new file mode 100644 index 00000000..72f6cf8b --- /dev/null +++ b/sam-styles/packages/components/tags/statusTag.html @@ -0,0 +1,126 @@ +

Status tags:

+
+
+ In Progress + + Needs Review + + Not Started + + + Locked + + + Complete +
+
+ +

In progress:

+
+
+
+
+ In Progress +
+

Business Types

+
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum + tenetur quo cupiditate, eaque qui officia recusandae. +

+
+
+ +
+
+ +
+ +
+
+
+ Needs Review +
+

Business Types

+
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum + tenetur quo cupiditate, eaque qui officia recusandae. +

+
+
+ +
+
+

Not started:

+
+
+
+ Not Started +
+

Business Types

+
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum + tenetur quo cupiditate, eaque qui officia recusandae. +

+
+
+ +
+
+
+
+
+
+ + Locked + +
+

Business Types

+
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum + tenetur quo cupiditate, eaque qui officia recusandae. +

+
+
+ +
+
+

Complete

+ +
+
+
+ Complete +
+

Business Types

+
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum + tenetur quo cupiditate, eaque qui officia recusandae. +

+
+
+ +
+
+
diff --git a/sam-styles/packages/components/tags/tags.stories.js b/sam-styles/packages/components/tags/tags.stories.js index 7775652a..8ecaae66 100644 --- a/sam-styles/packages/components/tags/tags.stories.js +++ b/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; +}; From 945675da58ae03cbcb1c6395f9b79413ecca7b9d Mon Sep 17 00:00:00 2001 From: Shayan Roshan Date: Wed, 18 Dec 2024 11:30:56 -0600 Subject: [PATCH 2/5] fix mobile view --- .../packages/branding/elements/_tags.scss | 17 ++++++- .../packages/components/tags/statusTag.html | 44 +++++++++---------- 2 files changed, 38 insertions(+), 23 deletions(-) diff --git a/sam-styles/packages/branding/elements/_tags.scss b/sam-styles/packages/branding/elements/_tags.scss index c4c5ddb6..85b52093 100644 --- a/sam-styles/packages/branding/elements/_tags.scss +++ b/sam-styles/packages/branding/elements/_tags.scss @@ -408,21 +408,33 @@ 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: 0rem; + margin: 0px; + } &--info { @include u-bg("info-lighter"); - @include u-border("info-light"); + border-color: #9ddfeb; } &--error { @@ -437,6 +449,9 @@ &--locked { @include u-bg("base-light"); @include u-border("base-light"); + i { + margin-right: 8px; + } } &--primary-lighter { @include u-bg("primary-lighter"); diff --git a/sam-styles/packages/components/tags/statusTag.html b/sam-styles/packages/components/tags/statusTag.html index 72f6cf8b..53245854 100644 --- a/sam-styles/packages/components/tags/statusTag.html +++ b/sam-styles/packages/components/tags/statusTag.html @@ -22,10 +22,10 @@

Status tags:

In progress:

-
-
+
In Progress
+

Business Types

@@ -42,12 +42,12 @@

Business Types


+
+ Needs Review +
-
- Needs Review -

Business Types

@@ -62,12 +62,12 @@

Business Types

Not started:

+
+ Not Started +
-
- Not Started -

Business Types

@@ -82,12 +82,12 @@

Business Types


+
+ + Locked + +
-
- - Locked - -

Business Types

@@ -105,12 +105,12 @@

Business Types

Complete

+
+ Complete +
-
- Complete -

Business Types

From bc83921182180bdba496eaff2ef041e5f90a24dd Mon Sep 17 00:00:00 2001 From: Shayan Roshan Date: Wed, 18 Dec 2024 13:49:46 -0600 Subject: [PATCH 3/5] error lightest color fix --- sam-styles/packages/branding/elements/_tags.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sam-styles/packages/branding/elements/_tags.scss b/sam-styles/packages/branding/elements/_tags.scss index 85b52093..be448d86 100644 --- a/sam-styles/packages/branding/elements/_tags.scss +++ b/sam-styles/packages/branding/elements/_tags.scss @@ -438,7 +438,7 @@ } &--error { - background-color: #fdecea; + background-color: #fde0db; @include u-border("error-lighter"); } From 9670cb4f8f9aea01c5f570d0bdf24445cd4736ef Mon Sep 17 00:00:00 2001 From: Shayan Roshan Date: Wed, 18 Dec 2024 15:14:14 -0600 Subject: [PATCH 4/5] fixed border radius --- sam-styles/packages/branding/elements/_tags.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sam-styles/packages/branding/elements/_tags.scss b/sam-styles/packages/branding/elements/_tags.scss index be448d86..99ffbd8d 100644 --- a/sam-styles/packages/branding/elements/_tags.scss +++ b/sam-styles/packages/branding/elements/_tags.scss @@ -428,7 +428,7 @@ @media (max-width: 1000px) { width: 100%; max-width: none; - border-radius: 0rem; + border-radius: 4px 4px 0 0; margin: 0px; } From ff2bf511d73f951d2074ec9d1ebc9ba75f629a7c Mon Sep 17 00:00:00 2001 From: Cameron Wolf Date: Thu, 9 Jan 2025 12:38:13 -0500 Subject: [PATCH 5/5] Updated tag colors to match with info-light and error-light buttons --- .../packages/branding/elements/_tags.scss | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/sam-styles/packages/branding/elements/_tags.scss b/sam-styles/packages/branding/elements/_tags.scss index 99ffbd8d..291c0d52 100644 --- a/sam-styles/packages/branding/elements/_tags.scss +++ b/sam-styles/packages/branding/elements/_tags.scss @@ -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); } @@ -433,13 +442,13 @@ } &--info { - @include u-bg("info-lighter"); - border-color: #9ddfeb; + background-color: $info-lighter-alt; + border-color: $info-light-alt; } &--error { - background-color: #fde0db; - @include u-border("error-lighter"); + background-color: $error-lightest-alt; + border-color: $error-light-alt; } &--accent-cool {