@moodlehq/design-system 4.0.0 → 4.1.0

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 (13) hide show
  1. package/README.md +7 -6
  2. package/dist/components/badge/{Badge2.js → Badge.js} +1 -2
  3. package/dist/components/badge/Badge.js.map +1 -0
  4. package/dist/components/badge/index.js +1 -1
  5. package/dist/index.css +6 -121
  6. package/dist/index.js +1 -1
  7. package/package.json +2 -1
  8. package/tokens/css/colors.css +4 -4
  9. package/tokens/css/primitives.css +1 -1
  10. package/tokens/scss/_colors.scss +5 -5
  11. package/tokens/scss/_primitives.scss +1 -1
  12. package/tokens/scss/_typography.scss +1 -1
  13. package/dist/components/badge/Badge2.js.map +0 -1
package/README.md CHANGED
@@ -109,13 +109,13 @@ import { Button } from '@moodlehq/design-system/components/button';
109
109
 
110
110
  ### Fonts
111
111
 
112
- The recommended typeface for Moodle Design System is **[Roboto](https://fonts.google.com/specimen/Roboto)**. The package does not bundle font files. Provide Roboto in your application:
112
+ The recommended typeface for Moodle Design System is **[Noto Sans](https://fonts.google.com/specimen/Noto+Sans)**. The package does not bundle font files. Provide Noto Sans in your application:
113
113
 
114
114
  **Option 1: Google Fonts CDN**
115
115
 
116
116
  ```html
117
117
  <link
118
- href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
118
+ href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
119
119
  rel="stylesheet"
120
120
  />
121
121
  ```
@@ -125,15 +125,16 @@ Place font files in your project and add `@font-face` declarations:
125
125
 
126
126
  ```css
127
127
  @font-face {
128
- font-family: 'Roboto';
129
- src: url('./fonts/Roboto-VariableFont_wdth,wght.woff2') format('woff2');
128
+ font-family: 'Noto Sans';
129
+ src: url('./fonts/NotoSans-VariableFont_wdth,wght.woff2') format('woff2');
130
130
  font-weight: 100 900;
131
131
  font-style: normal;
132
132
  }
133
133
 
134
134
  @font-face {
135
- font-family: 'Roboto';
136
- src: url('./fonts/Roboto-Italic-VariableFont_wdth,wght.woff2') format('woff2');
135
+ font-family: 'Noto Sans';
136
+ src: url('./fonts/NotoSans-Italic-VariableFont_wdth,wght.woff2')
137
+ format('woff2');
137
138
  font-weight: 100 900;
138
139
  font-style: italic;
139
140
  }
package/dist/components/badge/{Badge2.js → Badge.js} RENAMED
@@ -1,4 +1,3 @@
1
- /* empty css */
2
1
  import { isValidElement } from "react";
3
2
  import { jsxs } from "react/jsx-runtime";
4
3
  //#region components/badge/Badge.tsx
@@ -40,4 +39,4 @@ var Badge = ({ label, variant, subtle = false, pill = false, startIcon, endIcon,
40
39
  //#endregion
41
40
  export { Badge };
42
41
 
43
- //# sourceMappingURL=Badge2.js.map
42
+ //# sourceMappingURL=Badge.js.map
package/dist/components/badge/Badge.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Badge.js","names":[],"sources":["../../../components/badge/Badge.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactElement } from 'react';\nimport { isValidElement } from 'react';\n\ntype BadgeVariant =\n | 'primary'\n | 'secondary'\n | 'success'\n | 'danger'\n | 'warning'\n | 'info';\n\ntype IconElement = ReactElement<'i' | 'svg'>;\n\n// Runtime guard — icon props must be <i> or <svg> elements\nconst isIconElement = (el: unknown, propName: string): el is IconElement => {\n const valid = isValidElement(el) && (el.type === 'i' || el.type === 'svg');\n if (!valid && el != null && import.meta.env.DEV) {\n console.error(`Badge: \\`${propName}\\` must be an <i> or <svg> element.`);\n }\n return valid;\n};\n\nconst allowedVariants: BadgeVariant[] = [\n 'primary',\n 'secondary',\n 'success',\n 'danger',\n 'warning',\n 'info',\n];\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n /** Visible badge text. Must be a caller-supplied translated string. */\n label: string;\n /** Colour/semantic variant. Defaults to `primary`. */\n variant?: BadgeVariant;\n /** When true, renders the low-contrast (subtle) style with a light background and border. */\n subtle?: boolean;\n /** When true, renders fully rounded pill shape instead of the default slight rounding. */\n pill?: boolean;\n /** Optional icon rendered before the label. Must be an `<i>` or `<svg>` element. Mutually exclusive with `endIcon`. */\n startIcon?: IconElement;\n /** Optional icon rendered after the label. Must be an `<i>` or `<svg>` element. Mutually exclusive with `startIcon`. */\n endIcon?: IconElement;\n}\n\nexport const Badge = ({\n label,\n variant,\n subtle = false,\n pill = false,\n startIcon,\n endIcon,\n className,\n ...props\n}: BadgeProps) => {\n const resolvedVariant =\n variant && allowedVariants.includes(variant as BadgeVariant)\n ? variant\n : 'primary';\n\n const resolvedStartIcon = isIconElement(startIcon, 'startIcon')\n ? startIcon\n : null;\n let resolvedEndIcon = isIconElement(endIcon, 'endIcon') ? endIcon : null;\n\n if (import.meta.env.DEV) {\n if (variant && !allowedVariants.includes(variant as BadgeVariant)) {\n console.warn(\n `[MDS Badge] Invalid variant \"${variant}\". Falling back to \"primary\". Allowed: ${allowedVariants.join(', ')}`,\n );\n }\n if (resolvedStartIcon && resolvedEndIcon) {\n console.warn(\n '[MDS Badge] `startIcon` and `endIcon` are mutually exclusive. Rendering `startIcon` only.',\n );\n }\n }\n\n // Only one icon can be rendered at a time; startIcon takes precedence when both are provided.\n if (resolvedStartIcon && resolvedEndIcon) {\n resolvedEndIcon = null;\n }\n\n const classes = ['mds-badge', 'badge', `mds-badge--${resolvedVariant}`];\n if (resolvedStartIcon || resolvedEndIcon) classes.push('mds-badge--has-icon');\n if (subtle) classes.push('mds-badge--subtle');\n if (pill) classes.push('mds-badge--pill');\n if (className) classes.push(className);\n\n return (\n <span className={classes.join(' ')} {...props}>\n {resolvedStartIcon}\n {label}\n {resolvedEndIcon}\n </span>\n );\n};\n"],"mappings":";;;AAcA,IAAM,iBAAiB,IAAa,aAAwC;CAK1E,OAJc,eAAe,EAAE,MAAM,GAAG,SAAS,OAAO,GAAG,SAAS;AAKtE;AAEA,IAAM,kBAAkC;CACtC;CACA;CACA;CACA;CACA;CACA;AACF;AAiBA,IAAa,SAAS,EACpB,OACA,SACA,SAAS,OACT,OAAO,OACP,WACA,SACA,WACA,GAAG,YACa;CAChB,MAAM,kBACJ,WAAW,gBAAgB,SAAS,OAAuB,IACvD,UACA;CAEN,MAAM,oBAAoB,cAAc,WAAW,WAAW,IAC1D,YACA;CACJ,IAAI,kBAAkB,cAAc,SAAS,SAAS,IAAI,UAAU;CAgBpE,IAAI,qBAAqB,iBACvB,kBAAkB;CAGpB,MAAM,UAAU;EAAC;EAAa;EAAS,cAAc;CAAiB;CACtE,IAAI,qBAAqB,iBAAiB,QAAQ,KAAK,qBAAqB;CAC5E,IAAI,QAAQ,QAAQ,KAAK,mBAAmB;CAC5C,IAAI,MAAM,QAAQ,KAAK,iBAAiB;CACxC,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,OACE,qBAAC,QAAD;EAAM,WAAW,QAAQ,KAAK,GAAG;EAAG,GAAI;YAAxC;GACG;GACA;GACA;EACG;;AAEV"}
package/dist/components/badge/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import { Badge } from "./Badge2.js";
1
+ import { Badge } from "./Badge.js";
2
2
  export { Badge };
package/dist/index.css CHANGED
@@ -1,119 +1,4 @@
1
- @charset "UTF-8";.mds-badge {
2
- display: inline-flex;
3
- align-items: center;
4
- gap: 0;
5
- padding: var(--mds-spacing-xxs) var(--mds-spacing-xs);
6
- border-radius: var(--mds-border-radius-sm);
7
-
8
- font-family: var(--mds-font-family-base);
9
- font-weight: var(--mds-font-weight-medium);
10
- font-size: var(--mds-font-size-paragraph-small);
11
- line-height: var(--mds-line-height-paragraph-xs);
12
- letter-spacing: var(--mds-letter-spacing-default);
13
- white-space: nowrap;
14
- vertical-align: baseline;
15
- }
16
-
17
- .mds-badge--has-icon {
18
- gap: var(--mds-spacing-xxs);
19
- }
20
-
21
- /* Normalize icon dimensions to match the badge icon token across <i> and <svg> usage. */
22
- .mds-badge > i,
23
- .mds-badge > svg {
24
- width: var(--mds-icons-xxs);
25
- height: var(--mds-icons-xxs);
26
- font-size: var(--mds-icons-xxs);
27
- flex-shrink: 0;
28
- }
29
-
30
- /* Pill shape overrides the default rounded corners */
31
- .mds-badge--pill {
32
- border-radius: var(--mds-border-radius-pill);
33
- }
34
-
35
- /*
36
- * Per-variant colour rules.
37
- * Default contrast: solid coloured background with inverse text.
38
- * Subtle contrast (.mds-badge--subtle): light tinted background, dark feedback text, visible border.
39
- */
40
-
41
- .mds-badge--subtle {
42
- border: var(--mds-stroke-weight-sm) solid transparent;
43
- }
44
-
45
- /* --- Primary --- */
46
- .mds-badge--primary {
47
- background-color: var(--mds-bg-feedback-primary-default);
48
- color: var(--mds-text-inverse);
49
- }
50
-
51
- .mds-badge--primary.mds-badge--subtle {
52
- background-color: var(--mds-bg-feedback-primary-subtle);
53
- color: var(--mds-text-feedback-primary);
54
- border-color: var(--mds-border-feedback-primary);
55
- }
56
-
57
- /* --- Secondary --- */
58
- .mds-badge--secondary {
59
- background-color: var(--mds-bg-feedback-secondary-default);
60
- color: var(--mds-text-feedback-secondary);
61
- }
62
-
63
- .mds-badge--secondary.mds-badge--subtle {
64
- background-color: var(--mds-bg-feedback-secondary-subtle);
65
- color: var(--mds-text-feedback-secondary);
66
- border-color: var(--mds-border-feedback-secondary);
67
- }
68
-
69
- /* --- Success --- */
70
- .mds-badge--success {
71
- background-color: var(--mds-bg-feedback-success-default);
72
- color: var(--mds-text-inverse);
73
- }
74
-
75
- .mds-badge--success.mds-badge--subtle {
76
- background-color: var(--mds-bg-feedback-success-subtle);
77
- color: var(--mds-text-feedback-success);
78
- border-color: var(--mds-border-feedback-success);
79
- }
80
-
81
- /* --- Danger --- */
82
- .mds-badge--danger {
83
- background-color: var(--mds-bg-feedback-danger-default);
84
- color: var(--mds-text-inverse);
85
- }
86
-
87
- .mds-badge--danger.mds-badge--subtle {
88
- background-color: var(--mds-bg-feedback-danger-subtle);
89
- color: var(--mds-text-feedback-danger);
90
- border-color: var(--mds-border-feedback-danger);
91
- }
92
-
93
- /* --- Warning --- */
94
- .mds-badge--warning {
95
- background-color: var(--mds-bg-feedback-warning-default);
96
- color: var(--mds-text-feedback-warning);
97
- }
98
-
99
- .mds-badge--warning.mds-badge--subtle {
100
- background-color: var(--mds-bg-feedback-warning-subtle);
101
- color: var(--mds-text-feedback-warning);
102
- border-color: var(--mds-border-feedback-warning);
103
- }
104
-
105
- /* --- Info --- */
106
- .mds-badge--info {
107
- background-color: var(--mds-bg-feedback-info-default);
108
- color: var(--mds-text-inverse);
109
- }
110
-
111
- .mds-badge--info.mds-badge--subtle {
112
- background-color: var(--mds-bg-feedback-info-subtle);
113
- color: var(--mds-text-feedback-info);
114
- border-color: var(--mds-border-feedback-info);
115
- }
116
- .mds-activity-icon {
1
+ @charset "UTF-8";.mds-activity-icon {
117
2
  align-items: center;
118
3
  /*
119
4
  * content-box so block-size/inline-size declare the ICON content area.
@@ -1132,7 +1017,7 @@
1132
1017
  --mds-bg-feedback-primary-default: var(--mds-color-blue-500);
1133
1018
  --mds-bg-feedback-primary-light: var(--mds-color-blue-50);
1134
1019
  --mds-bg-feedback-primary-subtle: var(--mds-color-blue-100);
1135
- --mds-bg-feedback-secondary-default: var(--mds-color-gray-400);
1020
+ --mds-bg-feedback-secondary-default: var(--mds-color-gray-300);
1136
1021
  --mds-bg-feedback-secondary-subtle: var(--mds-color-gray-100);
1137
1022
  --mds-bg-feedback-success-default: var(--mds-color-green-500);
1138
1023
  --mds-bg-feedback-success-light: var(--mds-color-green-50);
@@ -1150,9 +1035,9 @@
1150
1035
  --mds-bg-interactive-primary-default-light: var(--mds-color-blue-50);
1151
1036
  --mds-bg-interactive-primary-disabled: var(--mds-color-blue-200);
1152
1037
  --mds-bg-interactive-primary-hover: var(--mds-color-blue-600);
1153
- --mds-bg-interactive-secondary-default: var(--mds-color-gray-400);
1038
+ --mds-bg-interactive-secondary-default: var(--mds-color-gray-300);
1154
1039
  --mds-bg-interactive-secondary-disabled: var(--mds-color-gray-200);
1155
- --mds-bg-interactive-secondary-hover: var(--mds-color-gray-300);
1040
+ --mds-bg-interactive-secondary-hover: var(--mds-color-gray-400);
1156
1041
  --mds-bg-surface-default: var(--mds-color-gray-white);
1157
1042
  --mds-bg-surface-strong: var(--mds-color-gray-200);
1158
1043
  --mds-bg-surface-subtle: var(--mds-color-gray-100);
@@ -1168,7 +1053,7 @@
1168
1053
  --mds-border-interactive-primary-active: var(--mds-color-blue-600);
1169
1054
  --mds-border-interactive-primary-disabled: var(--mds-color-blue-300);
1170
1055
  --mds-border-interactive-secondary-active: var(--mds-color-gray-700);
1171
- --mds-border-interactive-secondary-default: var(--mds-color-gray-600);
1056
+ --mds-border-interactive-secondary-default: var(--mds-color-gray-500);
1172
1057
  --mds-border-interactive-secondary-disabled: var(--mds-color-gray-500);
1173
1058
  --mds-border-interactive-secondary-hover: var(--mds-color-gray-600);
1174
1059
  --mds-border-subtle: var(--mds-color-gray-200);
@@ -1330,7 +1215,7 @@
1330
1215
  --mds-scale-1700: 6rem;
1331
1216
  --mds-scale-1800: 50rem;
1332
1217
  --mds-typography-font-family-monospace: Menlo;
1333
- --mds-typography-font-family-sans-serif: Roboto;
1218
+ --mds-typography-font-family-sans-serif: Noto sans;
1334
1219
  --mds-typography-font-size-0: 0rem;
1335
1220
  --mds-typography-font-size-1: 1rem;
1336
1221
  --mds-typography-font-size-2: 2rem;
package/dist/index.js CHANGED
@@ -2,7 +2,7 @@
2
2
  /* empty css */
3
3
  /* empty css */
4
4
  import { ActivityIcon } from "./components/activity-icon/ActivityIcon.js";
5
- import { Badge } from "./components/badge/Badge2.js";
5
+ import { Badge } from "./components/badge/Badge.js";
6
6
  import { Button } from "./components/button/Button.js";
7
7
  import { Checkbox } from "./components/checkbox/Checkbox.js";
8
8
  import { CloseButton } from "./components/close-button/CloseButton.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@moodlehq/design-system",
3
- "version": "4.0.0",
3
+ "version": "4.1.0",
4
4
  "description": "The Moodle Design System",
5
5
  "files": [
6
6
  "/dist",
@@ -56,6 +56,7 @@
56
56
  "@storybook/addon-a11y": "^10.1.2",
57
57
  "@storybook/addon-coverage": "^3.0.0",
58
58
  "@storybook/addon-docs": "^10.1.2",
59
+ "@storybook/addon-mcp": "^0.5.0",
59
60
  "@storybook/addon-themes": "^10.1.2",
60
61
  "@storybook/addon-vitest": "^10.1.2",
61
62
  "@storybook/react-vite": "^10.1.2",
package/tokens/css/colors.css CHANGED
@@ -26,7 +26,7 @@
26
26
  --mds-bg-feedback-primary-default: var(--mds-color-blue-500);
27
27
  --mds-bg-feedback-primary-light: var(--mds-color-blue-50);
28
28
  --mds-bg-feedback-primary-subtle: var(--mds-color-blue-100);
29
- --mds-bg-feedback-secondary-default: var(--mds-color-gray-400);
29
+ --mds-bg-feedback-secondary-default: var(--mds-color-gray-300);
30
30
  --mds-bg-feedback-secondary-subtle: var(--mds-color-gray-100);
31
31
  --mds-bg-feedback-success-default: var(--mds-color-green-500);
32
32
  --mds-bg-feedback-success-light: var(--mds-color-green-50);
@@ -44,9 +44,9 @@
44
44
  --mds-bg-interactive-primary-default-light: var(--mds-color-blue-50);
45
45
  --mds-bg-interactive-primary-disabled: var(--mds-color-blue-200);
46
46
  --mds-bg-interactive-primary-hover: var(--mds-color-blue-600);
47
- --mds-bg-interactive-secondary-default: var(--mds-color-gray-400);
47
+ --mds-bg-interactive-secondary-default: var(--mds-color-gray-300);
48
48
  --mds-bg-interactive-secondary-disabled: var(--mds-color-gray-200);
49
- --mds-bg-interactive-secondary-hover: var(--mds-color-gray-300);
49
+ --mds-bg-interactive-secondary-hover: var(--mds-color-gray-400);
50
50
  --mds-bg-surface-default: var(--mds-color-gray-white);
51
51
  --mds-bg-surface-strong: var(--mds-color-gray-200);
52
52
  --mds-bg-surface-subtle: var(--mds-color-gray-100);
@@ -62,7 +62,7 @@
62
62
  --mds-border-interactive-primary-active: var(--mds-color-blue-600);
63
63
  --mds-border-interactive-primary-disabled: var(--mds-color-blue-300);
64
64
  --mds-border-interactive-secondary-active: var(--mds-color-gray-700);
65
- --mds-border-interactive-secondary-default: var(--mds-color-gray-600);
65
+ --mds-border-interactive-secondary-default: var(--mds-color-gray-500);
66
66
  --mds-border-interactive-secondary-disabled: var(--mds-color-gray-500);
67
67
  --mds-border-interactive-secondary-hover: var(--mds-color-gray-600);
68
68
  --mds-border-subtle: var(--mds-color-gray-200);
package/tokens/css/primitives.css CHANGED
@@ -130,7 +130,7 @@
130
130
  --mds-scale-1700: 6rem;
131
131
  --mds-scale-1800: 50rem;
132
132
  --mds-typography-font-family-monospace: Menlo;
133
- --mds-typography-font-family-sans-serif: Roboto;
133
+ --mds-typography-font-family-sans-serif: Noto sans;
134
134
  --mds-typography-font-size-0: 0rem;
135
135
  --mds-typography-font-size-1: 1rem;
136
136
  --mds-typography-font-size-2: 2rem;
package/tokens/scss/_colors.scss CHANGED
@@ -24,7 +24,7 @@ $mds-bg-feedback-info-subtle: #cce6ea !default;
24
24
  $mds-bg-feedback-primary-default: #0f6cbf !default;
25
25
  $mds-bg-feedback-primary-light: #e7f0f9 !default;
26
26
  $mds-bg-feedback-primary-subtle: #cfe2f2 !default;
27
- $mds-bg-feedback-secondary-default: #ced4da !default;
27
+ $mds-bg-feedback-secondary-default: #dee2e6 !default;
28
28
  $mds-bg-feedback-secondary-subtle: #f8f9fa !default;
29
29
  $mds-bg-feedback-success-default: #357a32 !default;
30
30
  $mds-bg-feedback-success-light: #ebf2ea !default;
@@ -42,10 +42,10 @@ $mds-bg-interactive-primary-default: #0f6cbf !default;
42
42
  $mds-bg-interactive-primary-default-light: #e7f0f9 !default;
43
43
  $mds-bg-interactive-primary-disabled: #9fc4e5 !default;
44
44
  $mds-bg-interactive-primary-hover: #0c5699 !default;
45
- $mds-bg-interactive-secondary-active: #ced4da !default;
46
- $mds-bg-interactive-secondary-default: #ced4da !default;
45
+ $mds-bg-interactive-secondary-active: #dee2e6 !default;
46
+ $mds-bg-interactive-secondary-default: #dee2e6 !default;
47
47
  $mds-bg-interactive-secondary-disabled: #e9ecef !default;
48
- $mds-bg-interactive-secondary-hover: #dee2e6 !default;
48
+ $mds-bg-interactive-secondary-hover: #ced4da !default;
49
49
  $mds-bg-surface-default: #ffffff !default;
50
50
  $mds-bg-surface-strong: #e9ecef !default;
51
51
  $mds-bg-surface-subtle: #f8f9fa !default;
@@ -65,7 +65,7 @@ $mds-border-interactive-primary-default: #0f6cbf !default;
65
65
  $mds-border-interactive-primary-disabled: #6fa7d9 !default;
66
66
  $mds-border-interactive-primary-hover: #0f6cbf !default;
67
67
  $mds-border-interactive-secondary-active: #495057 !default;
68
- $mds-border-interactive-secondary-default: #6a737b !default;
68
+ $mds-border-interactive-secondary-default: #8f959e !default;
69
69
  $mds-border-interactive-secondary-disabled: #8f959e !default;
70
70
  $mds-border-interactive-secondary-hover: #6a737b !default;
71
71
  $mds-border-subtle: #e9ecef !default;
package/tokens/scss/_primitives.scss CHANGED
@@ -128,7 +128,7 @@ $mds-scale-1600: 5rem !default;
128
128
  $mds-scale-1700: 6rem !default;
129
129
  $mds-scale-1800: 50rem !default;
130
130
  $mds-typography-font-family-monospace: Menlo !default;
131
- $mds-typography-font-family-sans-serif: Roboto !default;
131
+ $mds-typography-font-family-sans-serif: Noto sans !default;
132
132
  $mds-typography-font-size-0: 0rem !default;
133
133
  $mds-typography-font-size-1: 1rem !default;
134
134
  $mds-typography-font-size-2: 2rem !default;
package/tokens/scss/_typography.scss CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
  // THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
3
3
 
4
- $mds-font-family-base: Roboto !default; // Default typeface for all UI text. Ensures global consistency.
4
+ $mds-font-family-base: Noto sans !default; // Default typeface for all UI text. Ensures global consistency.
5
5
  $mds-font-family-code: Menlo !default; // Typeface for code, preformatted text, or monospace contexts.
6
6
  $mds-font-size-displays-1: 5rem !default; // Display style, largest.
7
7
  $mds-font-size-displays-2: 4.5rem !default; // Display style, extra-large.
package/dist/components/badge/Badge2.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"Badge2.js","names":[],"sources":["../../../components/badge/Badge.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactElement } from 'react';\nimport { isValidElement } from 'react';\nimport './badge.css';\n\ntype BadgeVariant =\n | 'primary'\n | 'secondary'\n | 'success'\n | 'danger'\n | 'warning'\n | 'info';\n\ntype IconElement = ReactElement<'i' | 'svg'>;\n\n// Runtime guard — icon props must be <i> or <svg> elements\nconst isIconElement = (el: unknown, propName: string): el is IconElement => {\n const valid = isValidElement(el) && (el.type === 'i' || el.type === 'svg');\n if (!valid && el != null && import.meta.env.DEV) {\n console.error(`Badge: \\`${propName}\\` must be an <i> or <svg> element.`);\n }\n return valid;\n};\n\nconst allowedVariants: BadgeVariant[] = [\n 'primary',\n 'secondary',\n 'success',\n 'danger',\n 'warning',\n 'info',\n];\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n /** Visible badge text. Must be a caller-supplied translated string. */\n label: string;\n /** Colour/semantic variant. Defaults to `primary`. */\n variant?: BadgeVariant;\n /** When true, renders the low-contrast (subtle) style with a light background and border. */\n subtle?: boolean;\n /** When true, renders fully rounded pill shape instead of the default slight rounding. */\n pill?: boolean;\n /** Optional icon rendered before the label. Must be an `<i>` or `<svg>` element. Mutually exclusive with `endIcon`. */\n startIcon?: IconElement;\n /** Optional icon rendered after the label. Must be an `<i>` or `<svg>` element. Mutually exclusive with `startIcon`. */\n endIcon?: IconElement;\n}\n\nexport const Badge = ({\n label,\n variant,\n subtle = false,\n pill = false,\n startIcon,\n endIcon,\n className,\n ...props\n}: BadgeProps) => {\n const resolvedVariant =\n variant && allowedVariants.includes(variant as BadgeVariant)\n ? variant\n : 'primary';\n\n const resolvedStartIcon = isIconElement(startIcon, 'startIcon')\n ? startIcon\n : null;\n let resolvedEndIcon = isIconElement(endIcon, 'endIcon') ? endIcon : null;\n\n if (import.meta.env.DEV) {\n if (variant && !allowedVariants.includes(variant as BadgeVariant)) {\n console.warn(\n `[MDS Badge] Invalid variant \"${variant}\". Falling back to \"primary\". Allowed: ${allowedVariants.join(', ')}`,\n );\n }\n if (resolvedStartIcon && resolvedEndIcon) {\n console.warn(\n '[MDS Badge] `startIcon` and `endIcon` are mutually exclusive. Rendering `startIcon` only.',\n );\n }\n }\n\n // Only one icon can be rendered at a time; startIcon takes precedence when both are provided.\n if (resolvedStartIcon && resolvedEndIcon) {\n resolvedEndIcon = null;\n }\n\n const classes = ['mds-badge', 'badge', `mds-badge--${resolvedVariant}`];\n if (resolvedStartIcon || resolvedEndIcon) classes.push('mds-badge--has-icon');\n if (subtle) classes.push('mds-badge--subtle');\n if (pill) classes.push('mds-badge--pill');\n if (className) classes.push(className);\n\n return (\n <span className={classes.join(' ')} {...props}>\n {resolvedStartIcon}\n {label}\n {resolvedEndIcon}\n </span>\n );\n};\n"],"mappings":";;;;AAeA,IAAM,iBAAiB,IAAa,aAAwC;CAK1E,OAJc,eAAe,EAAE,MAAM,GAAG,SAAS,OAAO,GAAG,SAAS;AAKtE;AAEA,IAAM,kBAAkC;CACtC;CACA;CACA;CACA;CACA;CACA;AACF;AAiBA,IAAa,SAAS,EACpB,OACA,SACA,SAAS,OACT,OAAO,OACP,WACA,SACA,WACA,GAAG,YACa;CAChB,MAAM,kBACJ,WAAW,gBAAgB,SAAS,OAAuB,IACvD,UACA;CAEN,MAAM,oBAAoB,cAAc,WAAW,WAAW,IAC1D,YACA;CACJ,IAAI,kBAAkB,cAAc,SAAS,SAAS,IAAI,UAAU;CAgBpE,IAAI,qBAAqB,iBACvB,kBAAkB;CAGpB,MAAM,UAAU;EAAC;EAAa;EAAS,cAAc;CAAiB;CACtE,IAAI,qBAAqB,iBAAiB,QAAQ,KAAK,qBAAqB;CAC5E,IAAI,QAAQ,QAAQ,KAAK,mBAAmB;CAC5C,IAAI,MAAM,QAAQ,KAAK,iBAAiB;CACxC,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,OACE,qBAAC,QAAD;EAAM,WAAW,QAAQ,KAAK,GAAG;EAAG,GAAI;YAAxC;GACG;GACA;GACA;EACG;;AAEV"}