@repobit/dex-system-design 0.23.14 → 0.23.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/package.json +3 -3
  3. package/src/components/Button/Button.js +60 -32
  4. package/src/components/Button/button.css.js +59 -75
  5. package/src/components/anchor/anchor-nav.css.js +3 -1
  6. package/src/components/anchor/anchor-nav.js +88 -119
  7. package/src/components/anchor/anchor.stories.js +190 -83
  8. package/src/components/badge/badge.css.js +15 -38
  9. package/src/components/badge/badge.js +15 -35
  10. package/src/components/compare/compare.stories.js +6 -3
package/src/components/anchor/anchor.stories.js CHANGED
@@ -1,191 +1,298 @@
1
- import { html } from 'lit';
2
- import './anchor-nav.js';
1
+ import { html } from "lit";
2
+ import "../Button/Button.js";
3
+ import "../heading/heading.js";
4
+ import "../image/image.js";
5
+ import "../link/link.js";
6
+ import "./anchor-nav.js";
7
+
8
+ import "../paragraph/paragraph.js";
3
9
 
4
10
  export default {
5
- title : 'Components/AnchorNav',
6
- tags : ['autodocs'],
11
+ title : "Components/AnchorNav",
12
+ tags : ["autodocs"],
7
13
  parameters: {
8
14
  docs: {
9
15
  description: {
10
16
  component: `
11
- **BdAnchorNav** is a Lit web component that renders a sticky navigation bar with anchor links and a "Buy now" CTA button.
17
+ **BdAnchorNav** is a sticky navigation bar with anchor links and a customizable CTA button.
12
18
 
13
- It consists of two elements:
14
- - \`<bd-anchor-nav>\` — the nav container with auto-generated anchor links and a Buy button
15
- - \`<bd-anchor-nav-item>\` — declarative items that define the link labels via their \`title\` attribute
19
+ ### Elements
20
+ - \`<bd-anchor-nav>\` — the nav container
21
+ - \`<bd-anchor-nav-item>\` — declarative items (via \`title\` and optional \`href\` attributes)
16
22
 
17
- ### Usage
23
+ ### Usage — child elements
18
24
  \`\`\`html
19
- <bd-anchor-nav>
20
- <bd-anchor-nav-item title="Overview"></bd-anchor-nav-item>
21
- <bd-anchor-nav-item title="Features"></bd-anchor-nav-item>
22
- <bd-anchor-nav-item title="Reviews"></bd-anchor-nav-item>
23
- <bd-anchor-nav-item title="Pricing"></bd-anchor-nav-item>
25
+ <bd-anchor-nav cta-label="Buy now" cta-href="https://www.bitdefender.com/buy">
26
+ <bd-anchor-nav-item title="Overview" href="#anchor-1-section"></bd-anchor-nav-item>
27
+ <bd-anchor-nav-item title="Features" href="#anchor-2-section"></bd-anchor-nav-item>
28
+ <bd-anchor-nav-item title="Pricing" href="#section-pricing"></bd-anchor-nav-item>
24
29
  </bd-anchor-nav>
25
30
  \`\`\`
26
31
 
27
- ### Behavior
28
- - Links are auto-indexed as \`anchor-1\`, \`anchor-2\`, etc.
29
- - Clicking a link sets it as active and smooth-scrolls to \`#anchor-N-section\` with a 120px offset
30
- - The Buy now button smooth-scrolls to \`#section-pricing\`
31
- - Active state is tracked internally via \`this.activeId\`
32
+ ### Usage — programmatic items prop
33
+ \`\`\`html
34
+ <bd-anchor-nav
35
+ cta-label="Buy now"
36
+ cta-href="https://www.bitdefender.com/buy"
37
+ .items=${[
38
+ { title: "Overview", href: "#anchor-1-section" },
39
+ { title: "Features", href: "#anchor-2-section" },
40
+ { title: "Pricing", href: "#section-pricing" }
41
+ ]}
42
+ ></bd-anchor-nav>
43
+ \`\`\`
44
+
45
+ ### Attributes
46
+
47
+ #### \`bd-anchor-nav\`
48
+ | Attribute | Type | Default | Description |
49
+ |--------------|--------|----------------------|------------------------------------------------------|
50
+ | \`cta-label\` | String | \`"Buy now"\` | Text label for the CTA button |
51
+ | \`cta-href\` | String | \`"#section-pricing"\` | href for the CTA button |
52
+ | \`aria-label\` | String | \`"Section navigation"\` | Accessible label for the \`<nav>\` landmark |
53
+ | \`items\` | Array | — | \`{ title, href }[]\` — overrides child elements |
32
54
 
33
- ### Notes
34
- - \`bd-anchor-nav-item\` is a plain \`HTMLElement\` (not LitElement) — it is used only as a declarative data source
35
- - The nav renders all links dynamically from its children
55
+ #### \`bd-anchor-nav-item\`
56
+ | Attribute | Type | Description |
57
+ |-----------|--------|----------------------------------------------------------|
58
+ | \`title\` | String | Link label |
59
+ | \`href\` | String | Target URL or anchor (default: \`#anchor-N-section\`) |
36
60
  `
37
61
  }
38
62
  }
39
63
  },
40
64
  argTypes: {
65
+ ctaLabel: {
66
+ control : "text",
67
+ description: "Text label for the CTA button",
68
+ table : { type: { summary: "string" }, defaultValue: { summary: "Buy now" }, category: "CTA" }
69
+ },
70
+ ctaHref: {
71
+ control : "text",
72
+ description: "href for the CTA button",
73
+ table : { type: { summary: "string" }, defaultValue: { summary: "#section-pricing" }, category: "CTA" }
74
+ },
41
75
  items: {
42
- control : 'object',
43
- description: 'Array of nav item labels rendered as anchor links',
44
- table : {
45
- type : { summary: 'string[]' },
46
- defaultValue: { summary: "['Overview', 'Features', 'Reviews', 'Pricing']" },
47
- category : 'Content'
48
- }
76
+ control : "object",
77
+ description: "Array of { title, href } objects (overrides child elements)",
78
+ table : { type: { summary: "{ title: string, href: string }[]" }, category: "Content" }
49
79
  }
50
80
  }
51
81
  };
52
82
 
53
- const renderNav = (items) => html`
54
- <bd-anchor-nav>
55
- ${items.map(label => html`
56
- <bd-anchor-nav-item title="${label}"></bd-anchor-nav-item>
83
+
84
+ // ─── Helpers ─────────────────────────────────────────────────────────────────
85
+
86
+ const renderNavChildren = (labels, ctaLabel = "Buy now", ctaHref = "#section-pricing") => html`
87
+ <bd-anchor-nav cta-label=${ctaLabel} cta-href=${ctaHref}>
88
+ ${labels.map((item) => html`
89
+ <bd-anchor-nav-item
90
+ title=${typeof item === "string" ? item : item.title}
91
+ href=${typeof item === "string" ? "" : (item.href || "")}
92
+ ></bd-anchor-nav-item>
57
93
  `)}
58
94
  </bd-anchor-nav>
59
95
  `;
60
96
 
61
- // ─── Stories ───────────────────────────────────────────────────────────────
97
+ const renderNavItems = (items, ctaLabel = "Buy now", ctaHref = "#section-pricing") => html`
98
+ <bd-anchor-nav
99
+ cta-label=${ctaLabel}
100
+ cta-href=${ctaHref}
101
+ .items=${items}
102
+ ></bd-anchor-nav>
103
+ `;
104
+
105
+
106
+ // ─── Stories ─────────────────────────────────────────────────────────────────
62
107
 
63
108
  export const Default = {
64
- name : 'Default (4 items)',
65
- render : () => renderNav(['Overview', 'Features', 'Reviews', 'Pricing']),
109
+ name : "Default (4 items)",
110
+ render : () => renderNavChildren(["Overview", "Features", "Reviews", "Pricing"]),
66
111
  parameters: {
67
112
  docs: {
68
113
  description: {
69
- story: 'Default nav with four anchor links and the Buy now button. The first link is active on mount.'
114
+ story: "Default nav with four anchor links. Each link auto-targets `#anchor-N-section`. The CTA defaults to `#section-pricing`."
70
115
  }
71
116
  }
72
117
  }
73
118
  };
74
119
 
75
- export const TwoItems = {
76
- name : 'Two Items',
77
- render : () => renderNav(['Overview', 'Pricing']),
120
+ export const CustomCtaHref = {
121
+ name : "Custom CTA href",
122
+ render: () => renderNavChildren(
123
+ ["Overview", "Features", "Reviews", "Pricing"],
124
+ "Get Bitdefender",
125
+ "https://www.bitdefender.com/buy"
126
+ ),
78
127
  parameters: {
79
128
  docs: {
80
129
  description: {
81
- story: 'Minimal nav with only two items. Verifies layout and active state with a small item count.'
130
+ story: "CTA button uses a full external URL via `cta-href`. The button label is overridden with `cta-label`."
82
131
  }
83
132
  }
84
133
  }
85
134
  };
86
135
 
87
- export const ManyItems = {
88
- name : 'Many Items (7)',
89
- render : () => renderNav(['Overview', 'Features', 'Security', 'Performance', 'Reviews', 'FAQ', 'Pricing']),
136
+ export const CustomItemHrefs = {
137
+ name : "Custom item hrefs (child elements)",
138
+ render: () => html`
139
+ <bd-anchor-nav cta-label="Buy now" cta-href="#section-pricing">
140
+ <bd-anchor-nav-item title="Overview" href="#overview"></bd-anchor-nav-item>
141
+ <bd-anchor-nav-item title="Features" href="#features"></bd-anchor-nav-item>
142
+ <bd-anchor-nav-item title="Reviews" href="#reviews"></bd-anchor-nav-item>
143
+ <bd-anchor-nav-item title="Pricing" href="#section-pricing"></bd-anchor-nav-item>
144
+ </bd-anchor-nav>
145
+ `,
90
146
  parameters: {
91
147
  docs: {
92
148
  description: {
93
- story: 'Nav with 7 items. Useful for testing overflow behavior and link truncation on smaller viewports.'
149
+ story: "Each `bd-anchor-nav-item` has a custom `href` attribute pointing to a specific section ID."
94
150
  }
95
151
  }
96
152
  }
97
153
  };
98
154
 
99
- export const SingleItem = {
100
- name : 'Single Item (edge case)',
101
- render : () => renderNav(['Pricing']),
155
+ export const ProgrammaticItems = {
156
+ name : "Programmatic items prop",
157
+ render: () => renderNavItems(
158
+ [
159
+ { title: "Overview", href: "#anchor-1-section" },
160
+ { title: "Features", href: "#anchor-2-section" },
161
+ { title: "Reviews", href: "#anchor-3-section" },
162
+ { title: "Pricing", href: "#section-pricing" }
163
+ ],
164
+ "Buy now",
165
+ "#section-pricing"
166
+ ),
102
167
  parameters: {
103
168
  docs: {
104
169
  description: {
105
- story: 'Edge case: only one anchor item. The single link should be active by default.'
170
+ story: "Items defined via the `.items` property array instead of child elements. Useful for dynamic rendering from CMS data."
106
171
  }
107
172
  }
108
173
  }
109
174
  };
110
175
 
176
+ export const TwoItems = {
177
+ name : "Two Items",
178
+ render : () => renderNavChildren(["Overview", "Pricing"]),
179
+ parameters: {
180
+ docs: {
181
+ description: { story: "Minimal nav with only two items." }
182
+ }
183
+ }
184
+ };
185
+
186
+ export const ManyItems = {
187
+ name : "Many Items (7)",
188
+ render : () => renderNavChildren(["Overview", "Features", "Security", "Performance", "Reviews", "FAQ", "Pricing"]),
189
+ parameters: {
190
+ docs: {
191
+ description: { story: "Seven items — tests overflow and truncation on narrow viewports." }
192
+ }
193
+ }
194
+ };
195
+
196
+ export const SingleItem = {
197
+ name : "Single Item (edge case)",
198
+ render : () => renderNavChildren(["Pricing"]),
199
+ parameters: {
200
+ docs: {
201
+ description: { story: "Edge case: single anchor item. Should be active by default." }
202
+ }
203
+ }
204
+ };
205
+
111
206
  export const LongLabels = {
112
- name : 'Long Item Labels',
113
- render: () => renderNav([
114
- 'Product Overview',
115
- 'Advanced Security Features',
116
- 'Performance Benchmarks',
117
- 'Customer Reviews & Ratings',
118
- 'Plans & Pricing'
207
+ name : "Long Item Labels",
208
+ render: () => renderNavChildren([
209
+ "Product Overview",
210
+ "Advanced Security Features",
211
+ "Performance Benchmarks",
212
+ "Customer Reviews & Ratings",
213
+ "Plans & Pricing"
119
214
  ]),
120
215
  parameters: {
121
216
  docs: {
122
- description: {
123
- story: 'Items with longer label strings. Tests whether the nav handles text overflow or wrapping gracefully.'
124
- }
217
+ description: { story: "Long label strings — tests text overflow and wrapping." }
125
218
  }
126
219
  }
127
220
  };
128
221
 
129
222
  export const WithScrollTargets = {
130
- name : 'With Scroll Targets',
223
+ name : "With Scroll Targets",
131
224
  render: () => html`
132
225
  <div style="position: sticky; top: 0; z-index: 100;">
133
- <bd-anchor-nav>
134
- <bd-anchor-nav-item title="Overview"></bd-anchor-nav-item>
135
- <bd-anchor-nav-item title="Features"></bd-anchor-nav-item>
136
- <bd-anchor-nav-item title="Pricing"></bd-anchor-nav-item>
226
+ <bd-anchor-nav
227
+ cta-label="Buy now"
228
+ cta-href="#section-pricing"
229
+ >
230
+ <bd-anchor-nav-item title="Overview" href="#anchor-1-section"></bd-anchor-nav-item>
231
+ <bd-anchor-nav-item title="Features" href="#anchor-2-section"></bd-anchor-nav-item>
232
+ <bd-anchor-nav-item title="Pricing" href="#anchor-3-section"></bd-anchor-nav-item>
137
233
  </bd-anchor-nav>
138
234
  </div>
139
235
 
140
236
  <div id="anchor-1-section" style="padding: 80px 24px; background: #EDF9FF;">
141
- <h2>Overview Section</h2>
142
- <p>This is the overview content area. The nav scrolls here when "Overview" is clicked.</p>
237
+ <bd-h as="h2">Overview Section</bd-h>
238
+ <bd-p kind="regular">This is the overview content area. The nav scrolls here when "Overview" is clicked.</bd-p>
143
239
  </div>
144
240
  <div id="anchor-2-section" style="padding: 80px 24px; background: #fff;">
145
- <h2>Features Section</h2>
146
- <p>This is the features content area.</p>
241
+ <bd-h as="h2">Features Section</bd-h>
242
+ <bd-p kind="regular">This is the features content area.</bd-p>
147
243
  </div>
148
244
  <div id="anchor-3-section" style="padding: 80px 24px; background: #EDF9FF;">
149
- <h2>Pricing Section</h2>
150
- <p>This is the pricing content area.</p>
245
+ <bd-h as="h2">Pricing Section</bd-h>
246
+ <bd-p kind="regular">This is the pricing content area.</bd-p>
151
247
  </div>
152
248
  <div id="section-pricing" style="padding: 80px 24px; background: #fff;">
153
- <h2>Buy Now Target</h2>
154
- <p>The "Buy now" button scrolls to this element (#section-pricing).</p>
249
+ <bd-h as="h2">Buy Now Target</bd-h>
250
+ <bd-p kind="regular">The "Buy now" button scrolls to this element (#section-pricing).</bd-p>
155
251
  </div>
156
252
  `,
157
253
  parameters: {
158
254
  docs: {
159
255
  description: {
160
- story: 'Full scroll demo with actual target sections in the DOM. Click nav links or the Buy now button to trigger smooth scroll behavior.'
256
+ story: "Full scroll demo with actual target sections. Click nav links or Buy now to trigger smooth scroll."
161
257
  }
162
258
  }
163
259
  }
164
260
  };
165
261
 
166
262
  export const MobileView = {
167
- name : 'Mobile View',
168
- render : () => renderNav(['Overview', 'Features', 'Reviews', 'Pricing']),
263
+ name : "Mobile View",
264
+ render : () => renderNavChildren(["Overview", "Features", "Reviews", "Pricing"]),
169
265
  parameters: {
170
- viewport: { defaultViewport: 'mobile1' },
266
+ viewport: { defaultViewport: "mobile1" },
171
267
  docs : {
172
- description: {
173
- story: 'Nav rendered at 375px mobile width. Tests horizontal overflow and Buy now button layout at small viewports.'
174
- }
268
+ description: { story: "Nav at 375px mobile width — dropdown replaces link row." }
175
269
  }
176
270
  }
177
271
  };
178
272
 
179
273
  export const Playground = {
180
- name: '🛝 Playground',
274
+ name: "Playground",
181
275
  args: {
182
- items: ['Overview', 'Features', 'Reviews', 'Pricing']
276
+ ctaLabel: "Buy now",
277
+ ctaHref : "#section-pricing",
278
+ items : [
279
+ { title: "Overview", href: "#anchor-1-section" },
280
+ { title: "Features", href: "#anchor-2-section" },
281
+ { title: "Reviews", href: "#anchor-3-section" },
282
+ { title: "Pricing", href: "#section-pricing" }
283
+ ]
183
284
  },
184
- render : (args) => renderNav(args.items),
285
+ render: (args) => html`
286
+ <bd-anchor-nav
287
+ cta-label=${args.ctaLabel}
288
+ cta-href=${args.ctaHref}
289
+ .items=${args.items}
290
+ ></bd-anchor-nav>
291
+ `,
185
292
  parameters: {
186
293
  docs: {
187
294
  description: {
188
- story: 'Interactive playground. Edit the `items` array in Controls to add, remove, or rename nav links.'
295
+ story: "Fully interactive playground. Edit `items`, `ctaLabel`, and `ctaHref` in Controls."
189
296
  }
190
297
  }
191
298
  }
package/src/components/badge/badge.css.js CHANGED
@@ -2,12 +2,11 @@ import { css } from "lit";
2
2
 
3
3
  export default css`
4
4
  :host {
5
- --badge-background-default: #026DFF;
6
- --badge-font-weight: 700;
5
+ --badge-font-weight: var(--typography-fontWeight-medium);
7
6
  --badge-font-family: var(--typography-fontFamily-sans, sans-serif);
8
- --badge-padding: 0 var(--spacing-12);
9
- --badge-border-radius: var(--spacing-20);
10
- --badge-font-size: var(--typography-label-extra-small-fontSize);
7
+ --badge-padding: var(--spacing-4) var(--spacing-10);
8
+ --badge-border-radius: var(--spacing-16);
9
+ --badge-font-size: var(--typography-label-small-fontSize);
11
10
  --badge-icon-size: 16px;
12
11
  --badge-gap: var(--spacing-4);
13
12
  }
@@ -16,7 +15,7 @@ export default css`
16
15
  display: inline-flex;
17
16
  align-items: center;
18
17
  gap: var(--badge-gap);
19
- background-color: var(--color-blue-500);
18
+ background-color: var(--badge-bg, var(--color-blue-500));
20
19
  color: var(--color-neutral-0);
21
20
  border-radius: var(--badge-border-radius);
22
21
  font-size: var(--badge-font-size);
@@ -54,59 +53,37 @@ export default css`
54
53
  /* Stil pentru badge-ul bd-light-blue */
55
54
  .badge.bd-light-blue {
56
55
  background-color: var(--color-blue-500);
57
- color: white;
58
- padding: var(--spacing-4) var(--spacing-14);
59
- border-radius: var(--spacing-14);
60
- font-size: var(--spacing-16);
61
- font-family: var(--typography-fontFamily-sans);
62
- font-weight: var(--typography-fontWeight-semibold);
56
+ color: var(--color-neutral-0);
63
57
  }
64
58
 
65
59
  /* Stil pentru badge-ul bd-light-green */
66
60
  .badge.bd-light-green {
67
- background-color: #c3f4d4;
68
- color: #0b6a26;
69
- padding: var(--spacing-4) var(--spacing-14);
70
- border-radius: var(--spacing-14);
71
- font-size: var(--spacing-16);
72
- font-family: var(--typography-fontFamily-sans);
73
- font-weight: var(--typography-fontWeight-semibold);
61
+ background-color: var(--color-green-100);
62
+ color: var(--color-green-800);
74
63
  }
75
64
 
76
- /* Stiluri pentru variantele cu size */
77
- .badge.bd-light-blue.sm,
78
- .badge.bd-light-green.sm {
79
- padding: var(--spacing-2) var(--spacing-10);
80
- border-radius: var(--spacing-12);
81
- font-size: var(--typography-label-extra-small-fontSize);
65
+ /* Stiluri pentru variantele cu size (doar ajustări de icon și gap) */
66
+ .badge.sm {
82
67
  --badge-icon-size: 14px;
83
68
  --badge-gap: var(--spacing-2);
84
69
  }
85
70
 
86
- .badge.bd-light-blue.md,
87
- .badge.bd-light-green.md {
88
- padding: var(--spacing-4) var(--spacing-14);
89
- border-radius: var(--spacing-14);
90
- font-size: var(--typography-label-small-fontSize);
71
+ .badge.md {
91
72
  --badge-icon-size: 16px;
92
73
  --badge-gap: var(--spacing-4);
93
74
  }
94
75
 
95
- .badge.bd-light-blue.lg,
96
- .badge.bd-light-green.lg {
97
- padding: var(--spacing-6) var(--spacing-16);
98
- border-radius: var(--spacing-16);
99
- font-size: var(--typography-label-medium-fontSize);
76
+ .badge.lg {
100
77
  --badge-icon-size: 18px;
101
78
  --badge-gap: var(--spacing-6);
102
79
  }
103
80
 
104
- /* Ajustări pentru iconițe în varianta bd-light-green - ALBĂ */
81
+ /* Green badge icons use dark green fill for WCAG contrast on --color-green-100 background */
105
82
  .badge.bd-light-green .badge-icon.icon-individual {
106
- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M12.1154 5.42846C11.0158 6.39902 10.1576 7.97293 10.1576 10.4303C10.1576 14.2122 11.2398 16.6474 13.1651 18.0413C13.7542 18.4678 14.5777 18.842 15.9997 18.842C17.4157 18.842 18.2942 18.4324 18.8344 18.0413C20.7597 16.6474 21.8419 14.2122 21.8419 10.4303C21.8419 7.97293 20.9837 6.39902 19.8841 5.42846C18.7585 4.43503 17.2951 3.99994 15.9997 3.99994C14.7044 3.99994 13.241 4.43503 12.1154 5.42846ZM10.792 3.929C12.3375 2.56485 14.2951 1.99994 15.9997 1.99994C17.7044 1.99994 19.662 2.56485 21.2075 3.929C22.779 5.31602 23.8419 7.45729 23.8419 10.4303C23.8419 14.3066 22.793 17.3385 20.4997 19.276V20.3089C20.4997 20.7959 20.8184 21.2255 21.2845 21.3667L22.9476 21.8707C25.2447 22.5667 26.8155 24.6841 26.8155 27.0843V30.0526H24.8155V27.0843C24.8155 25.5653 23.8214 24.2252 22.3676 23.7847L20.7045 23.2807C19.4382 22.897 18.5591 21.7556 18.5026 20.4434C17.8123 20.6859 16.9853 20.842 15.9997 20.842C15.005 20.842 14.1865 20.6944 13.4965 20.4513C13.4369 21.7602 12.5587 22.8978 11.295 23.2807L9.63186 23.7847C8.17811 24.2252 7.18396 25.5653 7.18396 27.0843V30.0526H5.18396V27.0843C5.18396 24.6841 6.75481 22.5667 9.05185 21.8707L10.715 21.3667C11.1811 21.2255 11.4997 20.7959 11.4997 20.3089V19.276C9.2065 17.3385 8.15764 14.3066 8.15764 10.4303C8.15764 7.45729 9.22051 5.31602 10.792 3.929Z' fill='white'/></svg>");
83
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M12.1154 5.42846C11.0158 6.39902 10.1576 7.97293 10.1576 10.4303C10.1576 14.2122 11.2398 16.6474 13.1651 18.0413C13.7542 18.4678 14.5777 18.842 15.9997 18.842C17.4157 18.842 18.2942 18.4324 18.8344 18.0413C20.7597 16.6474 21.8419 14.2122 21.8419 10.4303C21.8419 7.97293 20.9837 6.39902 19.8841 5.42846C18.7585 4.43503 17.2951 3.99994 15.9997 3.99994C14.7044 3.99994 13.241 4.43503 12.1154 5.42846ZM10.792 3.929C12.3375 2.56485 14.2951 1.99994 15.9997 1.99994C17.7044 1.99994 19.662 2.56485 21.2075 3.929C22.779 5.31602 23.8419 7.45729 23.8419 10.4303C23.8419 14.3066 22.793 17.3385 20.4997 19.276V20.3089C20.4997 20.7959 20.8184 21.2255 21.2845 21.3667L22.9476 21.8707C25.2447 22.5667 26.8155 24.6841 26.8155 27.0843V30.0526H24.8155V27.0843C24.8155 25.5653 23.8214 24.2252 22.3676 23.7847L20.7045 23.2807C19.4382 22.897 18.5591 21.7556 18.5026 20.4434C17.8123 20.6859 16.9853 20.842 15.9997 20.842C15.005 20.842 14.1865 20.6944 13.4965 20.4513C13.4369 21.7602 12.5587 22.8978 11.295 23.2807L9.63186 23.7847C8.17811 24.2252 7.18396 25.5653 7.18396 27.0843V30.0526H5.18396V27.0843C5.18396 24.6841 6.75481 22.5667 9.05185 21.8707L10.715 21.3667C11.1811 21.2255 11.4997 20.7959 11.4997 20.3089V19.276C9.2065 17.3385 8.15764 14.3066 8.15764 10.4303C8.15764 7.45729 9.22051 5.31602 10.792 3.929Z' fill='%230b6a26'/></svg>");
107
84
  }
108
85
 
109
86
  .badge.bd-light-green .badge-icon.icon-family {
110
- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.0394 21.0955C16.5717 21.0955 17.093 21.0063 17.6014 20.8372C17.9 21.7401 18.6188 22.4693 19.5635 22.7615L20.4295 23.0294C21.3633 23.3183 22 24.1817 22 25.1591V27H24V25.1591C24 23.3048 22.792 21.6667 21.0205 21.1187L20.1545 20.8509C19.7356 20.7213 19.45 20.334 19.45 19.8955V19.7449C21.1462 18.295 21.9 16.0583 21.9 13.2778C21.9 10.8447 20.8711 9.23277 19.577 8.25708C18.3332 7.3193 16.8903 7 16 7C15.1097 7 13.6668 7.3193 12.423 8.25708C11.1289 9.23277 10.1 10.8447 10.1 13.2778C10.1 16.0583 10.8538 18.295 12.55 19.7449V19.8955C12.55 20.334 12.2644 20.7213 11.8455 20.8509L10.9795 21.1187C9.20796 21.6667 8 23.3048 8 25.1591V27H10V25.1591C10 24.1817 10.6367 23.3183 11.5705 23.0294L12.4365 22.7615C13.3896 22.4667 14.1128 21.727 14.4065 20.813C14.9375 20.9979 15.4826 21.0955 16.0394 21.0955ZM12.1 13.2778C12.1 11.4886 12.8211 10.4617 13.627 9.85403C14.4832 9.20848 15.4903 9 16 9C16.5097 9 17.5168 9.20848 18.373 9.85403C19.1789 10.4617 19.9 11.4886 19.9 13.2778C19.9 15.9088 19.1434 17.5302 17.8667 18.447L17.4753 18.728C16.9672 18.9837 16.4907 19.0955 16.0394 19.0955C15.4812 19.0955 14.8855 18.9245 14.2393 18.5231L14.1333 18.447C12.8566 17.5302 12.1 15.9088 12.1 13.2778Z' fill='white'/><path fill-rule='evenodd' clip-rule='evenodd' d='M6 19.955C6.24301 19.955 6.50063 19.9153 6.75514 19.8475C7.0813 20.4138 7.61269 20.8554 8.26724 21.0605L8.40095 21.1024C8.52133 21.1401 8.62873 21.2028 8.71818 21.2836C9.21418 20.834 9.80066 20.4758 10.4549 20.2401C10.103 19.7558 9.59939 19.382 8.99905 19.1939L8.86534 19.152C8.71342 19.1044 8.58812 19.0057 8.50596 18.8783C9.41844 17.937 9.8 16.5994 9.8 15.0556C9.8 13.5167 9.1507 12.4609 8.30704 11.8164C7.51308 11.2099 6.59336 11 6 11C5.40664 11 4.48692 11.2099 3.69296 11.8164C2.8493 12.4609 2.2 13.5167 2.2 15.0556C2.2 16.5845 2.57424 17.9112 3.46779 18.851L3.46121 18.8574L3.48918 18.8858C3.40698 19.0095 3.28362 19.1053 3.13466 19.152L3.00095 19.1939C1.81034 19.567 1 20.6702 1 21.9179V23H3V21.9179C3 21.5444 3.2426 21.2141 3.59905 21.1024L3.73276 21.0605C4.3858 20.8558 4.91624 20.4158 5.2426 19.8514C5.49788 19.9168 5.75644 19.955 6 19.955ZM4.2 15.0556C4.2 14.15 4.5507 13.678 4.90704 13.4058C5.31308 13.0956 5.79336 13 6 13C6.20664 13 6.68692 13.0956 7.09296 13.4058C7.4493 13.678 7.8 14.15 7.8 15.0556C7.8 16.2132 7.5391 16.9456 7.13947 17.4082L7.13758 17.4065C6.99679 17.5579 6.78144 17.7035 6.53517 17.8109C6.28066 17.9219 6.07954 17.955 6 17.955C5.90858 17.955 5.70643 17.922 5.46088 17.8209C5.29102 17.751 5.14074 17.665 5.02308 17.5752C4.5331 17.1288 4.2 16.3637 4.2 15.0556Z' fill='white'/><path fill-rule='evenodd' clip-rule='evenodd' d='M26 19.955C26.2431 19.955 26.5007 19.9153 26.7552 19.8475C27.0813 20.4138 27.6127 20.8554 28.2673 21.0605L28.401 21.1024C28.7574 21.2141 29 21.5444 29 21.9179V23H31V21.9179C31 20.6702 30.1897 19.567 28.9991 19.1939L28.8654 19.152C28.7135 19.1044 28.5882 19.0057 28.506 18.8783C29.4185 17.937 29.8 16.5994 29.8 15.0556C29.8 13.5167 29.1507 12.4609 28.3071 11.8164C27.5131 11.2099 26.5934 11 26 11C25.4067 11 24.487 11.2099 23.693 11.8164C22.8493 12.4609 22.2 13.5167 22.2 15.0556C22.2 16.5845 22.5743 17.9112 23.4678 18.851L23.4613 18.8574L23.4892 18.8858C23.407 19.0095 23.2837 19.1053 23.1347 19.152L23.001 19.1939C22.4007 19.382 21.897 19.7558 21.5452 20.2401C22.1994 20.4758 22.7859 20.834 23.2819 21.2836C23.3713 21.2028 23.4787 21.1401 23.5991 21.1024L23.7328 21.0605C24.3858 20.8558 24.9163 20.4158 25.2426 19.8514C25.4979 19.9168 25.7565 19.955 26 19.955ZM24.2 15.0556C24.2 14.15 24.5507 13.678 24.9071 13.4058C25.3131 13.0956 25.7934 13 26 13C26.2067 13 26.687 13.0956 27.093 13.4058C27.4493 13.678 27.8 14.15 27.8 15.0556C27.8 16.2132 27.5391 16.9456 27.1395 17.4082L27.1376 17.4065C26.9968 17.5579 26.7815 17.7035 26.5352 17.8109C26.2807 17.9219 26.0796 17.955 26 17.955C25.9086 17.955 25.7065 17.922 25.4609 17.8209C25.2911 17.751 25.1408 17.665 25.0231 17.5752C24.5331 17.1288 24.2 16.3637 24.2 15.0556Z' fill='white'/></svg>");
87
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.0394 21.0955C16.5717 21.0955 17.093 21.0063 17.6014 20.8372C17.9 21.7401 18.6188 22.4693 19.5635 22.7615L20.4295 23.0294C21.3633 23.3183 22 24.1817 22 25.1591V27H24V25.1591C24 23.3048 22.792 21.6667 21.0205 21.1187L20.1545 20.8509C19.7356 20.7213 19.45 20.334 19.45 19.8955V19.7449C21.1462 18.295 21.9 16.0583 21.9 13.2778C21.9 10.8447 20.8711 9.23277 19.577 8.25708C18.3332 7.3193 16.8903 7 16 7C15.1097 7 13.6668 7.3193 12.423 8.25708C11.1289 9.23277 10.1 10.8447 10.1 13.2778C10.1 16.0583 10.8538 18.295 12.55 19.7449V19.8955C12.55 20.334 12.2644 20.7213 11.8455 20.8509L10.9795 21.1187C9.20796 21.6667 8 23.3048 8 25.1591V27H10V25.1591C10 24.1817 10.6367 23.3183 11.5705 23.0294L12.4365 22.7615C13.3896 22.4667 14.1128 21.727 14.4065 20.813C14.9375 20.9979 15.4826 21.0955 16.0394 21.0955ZM12.1 13.2778C12.1 11.4886 12.8211 10.4617 13.627 9.85403C14.4832 9.20848 15.4903 9 16 9C16.5097 9 17.5168 9.20848 18.373 9.85403C19.1789 10.4617 19.9 11.4886 19.9 13.2778C19.9 15.9088 19.1434 17.5302 17.8667 18.447L17.4753 18.728C16.9672 18.9837 16.4907 19.0955 16.0394 19.0955C15.4812 19.0955 14.8855 18.9245 14.2393 18.5231L14.1333 18.447C12.8566 17.5302 12.1 15.9088 12.1 13.2778Z' fill='%230b6a26'/><path fill-rule='evenodd' clip-rule='evenodd' d='M6 19.955C6.24301 19.955 6.50063 19.9153 6.75514 19.8475C7.0813 20.4138 7.61269 20.8554 8.26724 21.0605L8.40095 21.1024C8.52133 21.1401 8.62873 21.2028 8.71818 21.2836C9.21418 20.834 9.80066 20.4758 10.4549 20.2401C10.103 19.7558 9.59939 19.382 8.99905 19.1939L8.86534 19.152C8.71342 19.1044 8.58812 19.0057 8.50596 18.8783C9.41844 17.937 9.8 16.5994 9.8 15.0556C9.8 13.5167 9.1507 12.4609 8.30704 11.8164C7.51308 11.2099 6.59336 11 6 11C5.40664 11 4.48692 11.2099 3.69296 11.8164C2.8493 12.4609 2.2 13.5167 2.2 15.0556C2.2 16.5845 2.57424 17.9112 3.46779 18.851L3.46121 18.8574L3.48918 18.8858C3.40698 19.0095 3.28362 19.1053 3.13466 19.152L3.00095 19.1939C1.81034 19.567 1 20.6702 1 21.9179V23H3V21.9179C3 21.5444 3.2426 21.2141 3.59905 21.1024L3.73276 21.0605C4.3858 20.8558 4.91624 20.4158 5.2426 19.8514C5.49788 19.9168 5.75644 19.955 6 19.955ZM4.2 15.0556C4.2 14.15 4.5507 13.678 4.90704 13.4058C5.31308 13.0956 5.79336 13 6 13C6.20664 13 6.68692 13.0956 7.09296 13.4058C7.4493 13.678 7.8 14.15 7.8 15.0556C7.8 16.2132 7.5391 16.9456 7.13947 17.4082L7.13758 17.4065C6.99679 17.5579 6.78144 17.7035 6.53517 17.8109C6.28066 17.9219 6.07954 17.955 6 17.955C5.90858 17.955 5.70643 17.922 5.46088 17.8209C5.29102 17.751 5.14074 17.665 5.02308 17.5752C4.5331 17.1288 4.2 16.3637 4.2 15.0556Z' fill='%230b6a26'/><path fill-rule='evenodd' clip-rule='evenodd' d='M26 19.955C26.2431 19.955 26.5007 19.9153 26.7552 19.8475C27.0813 20.4138 27.6127 20.8554 28.2673 21.0605L28.401 21.1024C28.7574 21.2141 29 21.5444 29 21.9179V23H31V21.9179C31 20.6702 30.1897 19.567 28.9991 19.1939L28.8654 19.152C28.7135 19.1044 28.5882 19.0057 28.506 18.8783C29.4185 17.937 29.8 16.5994 29.8 15.0556C29.8 13.5167 29.1507 12.4609 28.3071 11.8164C27.5131 11.2099 26.5934 11 26 11C25.4067 11 24.487 11.2099 23.693 11.8164C22.8493 12.4609 22.2 13.5167 22.2 15.0556C22.2 16.5845 22.5743 17.9112 23.4678 18.851L23.4613 18.8574L23.4892 18.8858C23.407 19.0095 23.2837 19.1053 23.1347 19.152L23.001 19.1939C22.4007 19.382 21.897 19.7558 21.5452 20.2401C22.1994 20.4758 22.7859 20.834 23.2819 21.2836C23.3713 21.2028 23.4787 21.1401 23.5991 21.1024L23.7328 21.0605C24.3858 20.8558 24.9163 20.4158 25.2426 19.8514C25.4979 19.9168 25.7565 19.955 26 19.955ZM24.2 15.0556C24.2 14.15 24.5507 13.678 24.9071 13.4058C25.3131 13.0956 25.7934 13 26 13C26.2067 13 26.687 13.0956 27.093 13.4058C27.4493 13.678 27.8 14.15 27.8 15.0556C27.8 16.2132 27.5391 16.9456 27.1395 17.4082L27.1376 17.4065C26.9968 17.5579 26.7815 17.7035 26.5352 17.8109C26.2807 17.9219 26.0796 17.955 26 17.955C25.9086 17.955 25.7065 17.922 25.4609 17.8209C25.2911 17.751 25.1408 17.665 25.0231 17.5752C24.5331 17.1288 24.2 16.3637 24.2 15.0556Z' fill='%230b6a26'/></svg>");
111
88
  }
112
89
  `;
package/src/components/badge/badge.js CHANGED
@@ -3,6 +3,8 @@ import { tokens } from "../../tokens/tokens.js";
3
3
  import badgeCSS from './badge.css.js';
4
4
 
5
5
  export class BdBadge extends LitElement {
6
+ static styles = [tokens, badgeCSS];
7
+
6
8
  static properties = {
7
9
  color : { type: String },
8
10
  variant : { type: String },
@@ -13,91 +15,71 @@ export class BdBadge extends LitElement {
13
15
 
14
16
  constructor() {
15
17
  super();
16
- this.text = 'Badge';
17
- this.color = '#026DFF';
18
+ this.color = '';
18
19
  this.variant = '';
19
20
  this.size = 'md';
20
- this.fontsize = '14';
21
+ this.fontsize = '';
21
22
  this.icon = '';
22
23
  }
23
24
 
24
25
  updated(changed) {
25
26
  if (changed.has('color')) {
26
- this.style.setProperty('--badge-bg', this.color);
27
+ this.style.setProperty('--badge-bg', this.color || '');
27
28
  }
28
29
 
29
30
  if (changed.has('size') || changed.has('fontsize')) {
30
31
  this._updateSizeStyles();
31
32
  }
32
-
33
- if (changed.has('icon')) {
34
- this._updateIcon();
35
- }
36
33
  }
37
34
 
38
35
  _updateSizeStyles() {
39
- // Mapăm size la valori specifice
40
36
  const sizeMap = {
41
37
  'sm': {
42
- padding : 'var(--spacing-4) var(--spacing-8)',
38
+ padding : 'var(--spacing-2) var(--spacing-8)',
43
39
  borderRadius: 'var(--spacing-12)',
44
40
  fontSize : 'var(--typography-label-extra-small-fontSize)'
45
41
  },
46
42
  'md': {
47
- padding : 'var(--spacing-4) var(--spacing-12)',
43
+ padding : 'var(--spacing-4) var(--spacing-10)',
48
44
  borderRadius: 'var(--spacing-16)',
49
45
  fontSize : 'var(--typography-label-small-fontSize)'
50
46
  },
51
47
  'lg': {
52
- padding : 'var(--spacing-6) var(--spacing-16)',
48
+ padding : 'var(--spacing-6) var(--spacing-12)',
53
49
  borderRadius: 'var(--spacing-20)',
54
- fontSize : 'var(--typography-label-medium-fontSize)'
50
+ fontSize : 'var(--typography-label-default-fontSize)'
55
51
  }
56
52
  };
57
53
 
58
- // Mapăm fontsize la valori specifice
59
54
  const fontSizeMap = {
60
- '12': 'var(--typography-label-extra-small-fontSize)',
61
- '14': 'var(--typography-label-small-fontSize)',
62
- '16': 'var(--typography-label-medium-fontSize)'
55
+ '12': 'var(--typography-label-small-fontSize)',
56
+ '14': 'var(--typography-label-default-fontSize)',
57
+ '16': 'var(--typography-label-large-fontSize)'
63
58
  };
64
59
 
65
- // Aplicăm stilurile în funcție de size
66
60
  if (this.size && sizeMap[this.size]) {
67
61
  const sizeStyle = sizeMap[this.size];
68
62
  this.style.setProperty('--badge-padding', sizeStyle.padding);
69
63
  this.style.setProperty('--badge-border-radius', sizeStyle.borderRadius);
70
64
 
71
- // Doar dacă fontsize nu este setat explicit, folosim valoarea din size
72
65
  if (!this.fontsize) {
73
66
  this.style.setProperty('--badge-font-size', sizeStyle.fontSize);
74
67
  }
75
68
  }
76
69
 
77
- // Aplicăm fontsize dacă este setat explicit
78
70
  if (this.fontsize && fontSizeMap[this.fontsize]) {
79
71
  this.style.setProperty('--badge-font-size', fontSizeMap[this.fontsize]);
80
72
  }
81
73
  }
82
74
 
83
- _updateIcon() {
84
- this.classList.remove('icon-individual', 'icon-family');
85
-
86
- if (this.icon === 'individual') {
87
- this.classList.add('icon-individual');
88
- } else if (this.icon === 'family') {
89
- this.classList.add('icon-family');
90
- }
91
- }
92
-
93
75
  _renderIcon() {
94
76
  if (!this.icon) return '';
95
77
 
96
78
  switch (this.icon) {
97
79
  case 'individual':
98
- return html`<span class="badge-icon icon-individual"></span>`;
80
+ return html`<span class="badge-icon icon-individual" aria-hidden="true"></span>`;
99
81
  case 'family':
100
- return html`<span class="badge-icon icon-family"></span>`;
82
+ return html`<span class="badge-icon icon-family" aria-hidden="true"></span>`;
101
83
  default:
102
84
  return '';
103
85
  }
@@ -105,7 +87,7 @@ export class BdBadge extends LitElement {
105
87
 
106
88
  render() {
107
89
  return html`
108
- <span class="badge ${this.variant}">
90
+ <span class="badge ${this.variant} ${this.size}">
109
91
  ${this._renderIcon()}
110
92
  <slot></slot>
111
93
  </span>
@@ -113,6 +95,4 @@ export class BdBadge extends LitElement {
113
95
  }
114
96
  }
115
97
 
116
- BdBadge.styles = [tokens, badgeCSS];
117
-
118
98
  customElements.define('bd-badge', BdBadge);