From b71f24f595a1551ab18437efb09dc75038709baf Mon Sep 17 00:00:00 2001 From: Benji Franck Date: Tue, 7 Oct 2025 15:59:57 -0600 Subject: [PATCH] feat(#3070): v2 badge with emphasis and size --- libs/web-components/src/common/types.ts | 1 + .../src/components/badge/Badge.svelte | 187 +++++++++++++++++- 2 files changed, 182 insertions(+), 6 deletions(-) diff --git a/libs/web-components/src/common/types.ts b/libs/web-components/src/common/types.ts index 2189cecab..1074d25d5 100644 --- a/libs/web-components/src/common/types.ts +++ b/libs/web-components/src/common/types.ts @@ -2,3 +2,4 @@ export type DrawerPosition = "bottom" | "left" | "right" | undefined; export type DrawerSizeUnit = "px" | "rem" | "ch" | "vh" | "vw"; export type DrawerSize = `${number}${DrawerSizeUnit}` | undefined; +export type Version = "1" | "2"; diff --git a/libs/web-components/src/components/badge/Badge.svelte b/libs/web-components/src/components/badge/Badge.svelte index b64779344..33fdf0e63 100644 --- a/libs/web-components/src/components/badge/Badge.svelte +++ b/libs/web-components/src/components/badge/Badge.svelte @@ -7,8 +7,9 @@ import { calculateMargin } from "../../common/styling"; import { typeValidator, toBoolean } from "../../common/utils"; import type { GoAIconType } from "../icon/Icon.svelte"; + import type { Version } from "../../common/types"; - // Validator + // Validators const [Types, validateType] = typeValidator( "Badge type", [ @@ -39,12 +40,35 @@ "red-light", "violet-light", "yellow-light", + "sky", + "prairie", + "lilac", + "pasture", + "sunset", + "dawn", + "default", ], true, ); + const [badgeSizes, validateBadgeSize] = typeValidator("Badge size", [ + "medium", + "large", + ]); + + const [versions, validateVersion] = typeValidator("Badge version", [ + "1", + "2", + ]); + + const [emphasisLevels, validateEmphasisLevel] = typeValidator( + "Badge emphasis level", + ["subtle", "strong"], + ); + //Type type BadgeType = (typeof Types)[number]; + type BadgeSize = (typeof badgeSizes)[number]; export let type: BadgeType; @@ -54,6 +78,9 @@ export let icon: string = ""; export let icontype: GoAIconType | null = null; export let arialabel: string = ""; + export let size: BadgeSize = "medium"; + export let emphasis: (typeof emphasisLevels)[number] = "strong"; + export let version: Version = "1"; // margin export let mt: Spacing = null; @@ -94,10 +121,22 @@ "red-light": "information-circle", "violet-light": "information-circle", "yellow-light": "information-circle", + sky: "information-circle", + prairie: "information-circle", + lilac: "information-circle", + pasture: "information-circle", + sunset: "information-circle", + dawn: "information-circle", + default: "information-circle", }[type]; onMount(() => { - setTimeout(() => validateType(type), 1); + setTimeout(() => { + validateType(type); + validateBadgeSize(size); + validateEmphasisLevel(emphasis); + validateVersion(version); + }, 1); //wait for property initialization setTimeout(() => { @@ -118,15 +157,16 @@ style={calculateMargin(mt, mr, mb, ml)} data-testid={testid} data-type="goa-badge" - class="goa-badge badge-{type}" + class="goa-badge badge-{type} badge-{size} badge-{emphasis}" class:icon-only={showIconOnly} + class:v2={version === "2"} > {#if showIcon} {:else}
@@ -210,8 +250,14 @@ } .goa-badge.badge-archived { - background-color: var(--goa-color-greyscale-700); - color: var(--goa-badge-dark-color-content); + background-color: var( + --goa-badge-archived-color-bg, + var(--goa-color-greyscale-700) + ); + color: var( + --goa-badge-archived-color-content, + var(--goa-badge-dark-color-content) + ); } .goa-badge.badge-aqua { @@ -308,4 +354,133 @@ background-color: var(--goa-color-extended-light-yellow); color: var(--goa-badge-light-color-content); } + + .v2 .goa-badge-content { + padding-bottom: 0; + } + + /* Version 2: Default Colours */ + .v2.badge-default { + background-color: var(--goa-badge-default-color-bg); + color: var(--goa-badge-default-color-content); + } + + .v2.badge-default.badge-subtle { + background-color: var(--goa-badge-default-subtle-color-bg); + box-shadow: var(--goa-badge-default-subtle-border); + color: var(--goa-badge-default-subtle-color-content); + } + + .v2.goa-badge.badge-archived.badge-subtle { + background-color: var(--goa-badge-archived-subtle-color-bg); + box-shadow: var(--goa-badge-archived-subtle-border); + color: var(--goa-badge-archived-subtle-color-content); + } + + /* Version 2: Extended Colours */ + + .v2.badge-sky { + background-color: var(--goa-color-extended-sky-default); + color: var(--goa-color-extended-sky-text); + } + + .v2.badge-prairie { + background-color: var(--goa-color-extended-prairie-default); + color: var(--goa-color-extended-prairie-text); + } + + .v2.badge-lilac { + background-color: var(--goa-color-extended-lilac-default); + color: var(--goa-color-extended-lilac-text); + } + + .v2.badge-pasture { + background-color: var(--goa-color-extended-pasture-default); + color: var(--goa-color-extended-pasture-text); + } + + .v2.badge-sunset { + background-color: var(--goa-color-extended-sunset-default); + color: var(--goa-color-extended-sunset-text); + } + + .v2.badge-dawn { + background-color: var(--goa-color-extended-dawn-default); + color: var(--goa-color-extended-dawn-text); + } + + .v2.badge-subtle.badge-sky { + background-color: var(--goa-color-extended-sky-light); + box-shadow: var(--goa-color-extended-sky-subtle-border); + color: var(--goa-color-extended-sky-text); + } + + .v2.badge-subtle.badge-prairie { + background-color: var(--goa-color-extended-prairie-light); + box-shadow: var(--goa-color-extended-prairie-subtle-border); + color: var(--goa-color-extended-prairie-text); + } + + .v2.badge-subtle.badge-lilac { + background-color: var(--goa-color-extended-lilac-light); + box-shadow: var(--goa-color-extended-lilac-subtle-border); + color: var(--goa-color-extended-lilac-text); + } + + .v2.badge-subtle.badge-pasture { + background-color: var(--goa-color-extended-pasture-light); + box-shadow: var(--goa-color-extended-pasture-subtle-border); + color: var(--goa-color-extended-pasture-text); + } + + .v2.badge-subtle.badge-sunset { + background-color: var(--goa-color-extended-sunset-light); + box-shadow: var(--goa-color-extended-sunset-subtle-border); + color: var(--goa-color-extended-sunset-text); + } + + .v2.badge-subtle.badge-dawn { + background-color: var(--goa-color-extended-dawn-light); + box-shadow: var(--goa-color-extended-dawn-subtle-border); + color: var(--goa-color-extended-dawn-text); + } + + /* Version 2: Subtle emphasis for standard colours */ + + .v2.goa-badge.badge-subtle.badge-information { + background-color: var(--goa-badge-info-subtle-color-bg); + color: var(--goa-badge-info-subtle-color-content); + box-shadow: var(--goa-badge-info-subtle-border); + } + + .v2.goa-badge.badge-subtle.badge-success { + background-color: var(--goa-badge-success-subtle-color-bg); + color: var(--goa-badge-success-subtle-color-content); + box-shadow: var(--goa-badge-success-subtle-border); + } + + .v2.goa-badge.badge-subtle.badge-important { + background-color: var(--goa-badge-important-subtle-color-bg); + color: var(--goa-badge-important-subtle-color-content); + box-shadow: var(--goa-badge-important-subtle-border); + } + + .v2.goa-badge.badge-subtle.badge-emergency { + background-color: var(--goa-badge-emergency-subtle-color-bg); + color: var(--goa-badge-emergency-subtle-color-content); + box-shadow: var(--goa-badge-emergency-subtle-border); + } + + /* Version 2: Large size */ + + .v2.goa-badge.badge-large { + height: var(--goa-badge-height-large); + padding: var(--goa-badge-padding-large); + --goa-icon-size: var(--goa-badge-icon-size-large); + } + + .v2.goa-badge.badge-large .goa-badge-content { + font-size: var(--goa-badge-font-size-large); + line-height: var(--goa-badge-line-height-large); + }