You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
/** @todo Pull this up into a utility function for all components to leverage */
27
+
functioncapitalize(str?: string): string{
28
+
if(typeofstr!=='string'){
29
+
return'';
30
+
}
31
+
returnstr.charAt(0).toUpperCase()+str.slice(1);
32
+
}
33
+
34
+
/** @todo Pull this up into a decorator for all stories to leverage */
35
+
constCONTAINER=(content: TemplateResult<1>[])=>
36
+
html`<div
37
+
style=${styleMap({
38
+
display: 'flex',
39
+
gap: 'var(--spectrum-spacing-200)',
40
+
'flex-wrap': 'wrap',
41
+
'justify-content': 'center',
42
+
// Used 80ch because that's generally considered the maximum readable width for text in a web page.
43
+
'max-inline-size': '80ch',
44
+
})}
45
+
>
46
+
${content}
47
+
</div>`;
48
+
49
+
/**
50
+
* Badges are for showing a small amount of color-categorized metadata. They're ideal for getting a user's attention. There are two additional styles - subtle fill and outline - in addition to the default, bold fill style.
51
+
*
52
+
* Because outline and subtle fill styles draw a similar level of attention, choose only one to use consistently within a single product. Bold fill can be paired with either style, and is reserved for high-attention badging only.
53
+
*/
25
54
constmeta: Meta={
26
55
title: 'Components/Badge',
27
56
component: 'swc-badge',
28
57
argTypes: {
29
-
variant: {
30
-
control: {type: 'select'},
31
-
options: BADGE_VARIANTS,
32
-
},
33
-
fixed: {
34
-
control: {type: 'select'},
35
-
options: [undefined, ...FIXED_VALUES],
36
-
},
37
58
size: {
59
+
name: 'Size',
38
60
control: {type: 'select'},
39
61
options: ['s','m','l','xl'],
40
62
},
63
+
variant: {
64
+
name: 'Variant',
65
+
control: {type: 'select'},
66
+
options: BADGE_VARIANTS,
67
+
},
41
68
subtle: {
69
+
name: 'Subtle',
42
70
control: {type: 'boolean'},
43
71
},
44
72
outline: {
73
+
name: 'Outline',
45
74
control: {type: 'boolean'},
46
75
},
76
+
fixed: {
77
+
name: 'Fixed',
78
+
control: {type: 'select'},
79
+
options: [...FIXED_VALUES],
80
+
},
81
+
label: {
82
+
name: 'Label',
83
+
control: {type: 'text'},
84
+
table: {category: 'Slots'},
85
+
},
86
+
icon: {
87
+
name: 'Icon',
88
+
control: {type: 'text'},
89
+
table: {category: 'Slots'},
90
+
},
47
91
},
48
92
args: {
93
+
label: 'Badge',
94
+
// updating this to make the options more readable as a demo
* Badges can be rendered with or without an icon. Icons can be passed to the component using the `icon` slot and can be sourced from either the Spectrum icon library or a custom icon library as needed.
144
+
*/
145
+
exportconstWithIcon: Story={
146
+
args: {
147
+
icon: '✓',
148
+
},
149
+
render: BASE_TEMPLATE,
150
+
// Removes the story from the side navigation while keeping in the docs view
* Semantic variants allow you to render the badge with a descriptive name that maps to a design-system-aligned color. This is the preferred way to assign color to a badge because it will align more consistently with other components in your UI with the same meaning.
* The `subtle` style is available for all variants. It is useful when you want to reduce the visual prominence of the badge while still mapping to the design system color palette.
0 commit comments