Skip to content

Commit a2f80e9

Browse files
bdfranckbdfranck
committed
feat(#3070): v2 badge with emphasis and size
1 parent f4cc4b4 commit a2f80e9

File tree

2 files changed

+196
-9
lines changed

2 files changed

+196
-9
lines changed

‎libs/web-components/src/common/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@
22
export type DrawerPosition = "bottom" | "left" | "right" | undefined;
33
export type DrawerSizeUnit = "px" | "rem" | "ch" | "vh" | "vw";
44
export type DrawerSize = `${number}${DrawerSizeUnit}` | undefined;
5+
export type Version = "1" | "2";

‎libs/web-components/src/components/badge/Badge.svelte‎

Lines changed: 195 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@
77
import { calculateMargin } from "../../common/styling";
88
import { typeValidator, toBoolean } from "../../common/utils";
99
import type { GoAIconType } from "../icon/Icon.svelte";
10+
import type { Version } from "../../common/types";
1011
11-
// Validator
12+
// Validators
1213
const [Types, validateType] = typeValidator(
1314
"Badge type",
1415
[
@@ -39,12 +40,35 @@
3940
"red-light",
4041
"violet-light",
4142
"yellow-light",
43+
"sky",
44+
"prairie",
45+
"lilac",
46+
"pasture",
47+
"sunset",
48+
"dawn",
49+
"default",
4250
],
4351
true,
4452
);
4553
54+
const [badgeSizes, validateBadgeSize] = typeValidator("Badge size", [
55+
"medium",
56+
"large",
57+
]);
58+
59+
const [versions, validateVersion] = typeValidator("Badge version", [
60+
"1",
61+
"2",
62+
]);
63+
64+
const [emphasisLevels, validateEmphasisLevel] = typeValidator(
65+
"Badge emphasis level",
66+
["subtle", "strong"],
67+
);
68+
4669
//Type
4770
type BadgeType = (typeof Types)[number];
71+
type BadgeSize = (typeof badgeSizes)[number];
4872
4973
export let type: BadgeType;
5074
@@ -54,6 +78,9 @@
5478
export let icon: string = "";
5579
export let icontype: GoAIconType | null = null;
5680
export let arialabel: string = "";
81+
export let size: BadgeSize = "medium";
82+
export let emphasis: (typeof emphasisLevels)[number] = "strong";
83+
export let version: Version = "1";
5784
5885
// margin
5986
export let mt: Spacing = null;
@@ -94,10 +121,25 @@
94121
"red-light": "information-circle",
95122
"violet-light": "information-circle",
96123
"yellow-light": "information-circle",
124+
sky: "information-circle",
125+
prairie: "information-circle",
126+
lilac: "information-circle",
127+
pasture: "information-circle",
128+
sunset: "information-circle",
129+
dawn: "information-circle",
130+
default: "information-circle",
97131
}[type];
98132
99133
onMount(() => {
100-
setTimeout(() => validateType(type), 1);
134+
setTimeout(() => {
135+
if (version === "2" && !type) {
136+
type = "default";
137+
}
138+
validateType(type);
139+
validateBadgeSize(size);
140+
validateEmphasisLevel(emphasis);
141+
validateVersion(version);
142+
}, 1);
101143
102144
//wait for property initialization
103145
setTimeout(() => {
@@ -118,15 +160,16 @@
118160
style={calculateMargin(mt, mr, mb, ml)}
119161
data-testid={testid}
120162
data-type="goa-badge"
121-
class="goa-badge badge-{type}"
163+
class="goa-badge badge-{type} badge-{size} badge-{emphasis}"
122164
class:icon-only={showIconOnly}
165+
class:v2={version === "2"}
123166
>
124167
{#if showIcon}
125168
<goa-icon
126169
arialabel={showIconOnly && arialabel ? arialabel : null}
127170
role={showIconOnly && arialabel ? "presentation" : null}
128171
type={icontype || _defaultIconType}
129-
size="1"
172+
size={size === "large" ? "3" : "1"}
130173
/>
131174
{:else}
132175
<div class="goa-badge-no-icon"></div>
@@ -210,8 +253,14 @@
210253
}
211254
212255
.goa-badge.badge-archived {
213-
background-color: var(--goa-color-greyscale-700);
214-
color: var(--goa-badge-dark-color-content);
256+
background-color: var(
257+
--goa-badge-archived-color-bg,
258+
var(--goa-color-greyscale-700)
259+
);
260+
color: var(
261+
--goa-badge-archived-color-content,
262+
var(--goa-badge-dark-color-content)
263+
);
215264
}
216265
217266
.goa-badge.badge-aqua {
@@ -295,17 +344,154 @@
295344
}
296345
297346
.goa-badge.badge-red-light {
298-
background-color: var(--goa-color-extended-light-red);
347+
background-color: var(--goa-color-extended-light-red-default);
299348
color: var(--goa-badge-light-color-content);
300349
}
301350
302351
.goa-badge.badge-violet-light {
303-
background-color: var(--goa-color-extended-light-violet);
352+
background-color: var(--goa-color-extended-light-violet-default);
304353
color: var(--goa-badge-light-color-content);
305354
}
306355
307356
.goa-badge.badge-yellow-light {
308-
background-color: var(--goa-color-extended-light-yellow);
357+
background-color: var(--goa-color-extended-light-yellow-default);
309358
color: var(--goa-badge-light-color-content);
310359
}
360+
361+
.v2 .goa-badge-content {
362+
padding-bottom: 0;
363+
}
364+
365+
/* Version 2: Default Colours */
366+
.v2.badge-default {
367+
background-color: var(--goa-badge-default-color-bg);
368+
color: var(--goa-badge-default-color-content);
369+
}
370+
371+
.v2.badge-default.badge-subtle {
372+
background-color: var(--goa-badge-default-subtle-color-bg);
373+
box-shadow: inset 0 0 0 var(--goa-badge-border-width)
374+
var(--goa-badge-default-subtle-color-border);
375+
color: var(--goa-badge-default-subtle-color-content);
376+
}
377+
378+
.v2.goa-badge.badge-archived.badge-subtle {
379+
background-color: var(--goa-badge-archived-subtle-color-bg);
380+
box-shadow: inset 0 0 0 var(--goa-badge-border-width)
381+
var(--goa-badge-archived-subtle-color-border);
382+
color: var(--goa-badge-archived-subtle-color-content);
383+
}
384+
385+
/* Version 2: Extended Colours */
386+
387+
.v2.badge-sky {
388+
background-color: var(--goa-color-extended-sky-default);
389+
color: var(--goa-color-extended-sky-text);
390+
}
391+
392+
.v2.badge-prairie {
393+
background-color: var(--goa-color-extended-prairie-default);
394+
color: var(--goa-color-extended-prairie-text);
395+
}
396+
397+
.v2.badge-lilac {
398+
background-color: var(--goa-color-extended-lilac-default);
399+
color: var(--goa-color-extended-lilac-text);
400+
}
401+
402+
.v2.badge-pasture {
403+
background-color: var(--goa-color-extended-pasture-default);
404+
color: var(--goa-color-extended-pasture-text);
405+
}
406+
407+
.v2.badge-sunset {
408+
background-color: var(--goa-color-extended-sunset-default);
409+
color: var(--goa-color-extended-sunset-text);
410+
}
411+
412+
.v2.badge-dawn {
413+
background-color: var(--goa-color-extended-dawn-default);
414+
color: var(--goa-color-extended-dawn-text);
415+
}
416+
417+
.v2.badge-subtle.badge-sky {
418+
background-color: var(--goa-color-extended-sky-light);
419+
box-shadow: inset 0 0 0 var(--goa-badge-border-width)
420+
var(--goa-color-extended-sky-default);
421+
color: var(--goa-color-extended-sky-text);
422+
}
423+
424+
.v2.badge-subtle.badge-prairie {
425+
background-color: var(--goa-color-extended-prairie-light);
426+
box-shadow: inset 0 0 0 var(--goa-badge-border-width)
427+
var(--goa-color-extended-prairie-default);
428+
color: var(--goa-color-extended-prairie-text);
429+
}
430+
431+
.v2.badge-subtle.badge-lilac {
432+
background-color: var(--goa-color-extended-lilac-light);
433+
box-shadow: inset 0 0 0 var(--goa-badge-border-width)
434+
var(--goa-color-extended-lilac-default);
435+
color: var(--goa-color-extended-lilac-text);
436+
}
437+
438+
.v2.badge-subtle.badge-pasture {
439+
background-color: var(--goa-color-extended-pasture-light);
440+
box-shadow: inset 0 0 0 var(--goa-badge-border-width)
441+
var(--goa-color-extended-pasture-default);
442+
color: var(--goa-color-text-default-pasture-text);
443+
}
444+
445+
.v2.badge-subtle.badge-sunset {
446+
background-color: var(--goa-color-extended-sunset-light);
447+
box-shadow: inset 0 0 0 var(--goa-badge-border-width)
448+
var(--goa-color-extended-sunset-default);
449+
color: var(--goa-color-text-default-sunset-text);
450+
}
451+
452+
.v2.badge-subtle.badge-dawn {
453+
background-color: var(--goa-color-extended-dawn-light);
454+
box-shadow: inset 0 0 0 var(--goa-badge-border-width)
455+
var(--goa-color-extended-dawn-default);
456+
color: var(--goa-color-text-default-dawn-text);
457+
}
458+
459+
/* Version 2: Subtle emphasis for standard colours */
460+
461+
.v2.goa-badge.badge-subtle.badge-information {
462+
background-color: var(--goa-badge-info-subtle-color-bg);
463+
color: var(--goa-badge-info-subtle-color-content);
464+
box-shadow: inset 0 0 0 1px var(--goa-badge-info-subtle-color-border);
465+
}
466+
467+
.v2.goa-badge.badge-subtle.badge-success {
468+
background-color: var(--goa-badge-success-subtle-color-bg);
469+
color: var(--goa-badge-success-subtle-color-content);
470+
box-shadow: inset 0 0 0 1px var(--goa-badge-success-subtle-color-border);
471+
}
472+
473+
.v2.goa-badge.badge-subtle.badge-important {
474+
background-color: var(--goa-badge-important-subtle-color-bg);
475+
color: var(--goa-badge-important-subtle-color-content);
476+
box-shadow: inset 0 0 0 1px var(--goa-badge-important-subtle-color-border);
477+
}
478+
479+
.v2.goa-badge.badge-subtle.badge-emergency {
480+
background-color: var(--goa-badge-emergency-subtle-color-bg);
481+
color: var(--goa-badge-emergency-subtle-color-content);
482+
box-shadow: inset 0 0 0 1px var(--goa-badge-emergency-subtle-color-border);
483+
}
484+
485+
/* Version 2: Large size */
486+
487+
.v2.goa-badge.badge-large {
488+
height: var(--goa-badge-height-large);
489+
padding: var(--goa-badge-padding-large);
490+
--goa-icon-size: var(--goa-badge-icon-size-large);
491+
}
492+
493+
.v2.goa-badge.badge-large .goa-badge-content {
494+
font-size: var(--goa-badge-font-size-large);
495+
line-height: var(--goa-badge-line-height-large);
496+
}
311497
</style>

0 commit comments

Comments
 (0)