@dbcdk/react-components 0.0.111 → 0.0.112
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.
- package/dist/components/forms/input/Input.cjs +2 -0
- package/dist/components/forms/input/Input.d.ts +1 -0
- package/dist/components/forms/input/Input.js +2 -0
- package/dist/components/media-card/MediaCard.module.css +1 -2
- package/dist/components/search-box/SearchBox.cjs +4 -0
- package/dist/components/search-box/SearchBox.d.ts +1 -0
- package/dist/components/search-box/SearchBox.js +4 -0
- package/dist/components/theme-button/ThemeButton.cjs +1 -4
- package/dist/components/theme-button/ThemeButton.js +1 -4
- package/dist/styles/themes/dbc/base.css +1 -0
- package/package.json +1 -1
|
@@ -47,6 +47,7 @@ const Input = react.forwardRef(function Input2({
|
|
|
47
47
|
buttonDisabled = false,
|
|
48
48
|
buttonLabel,
|
|
49
49
|
buttonIcon,
|
|
50
|
+
buttonAriaLabel,
|
|
50
51
|
trailingLabel,
|
|
51
52
|
id,
|
|
52
53
|
tooltipOpenOnFocus = true,
|
|
@@ -172,6 +173,7 @@ const Input = react.forwardRef(function Input2({
|
|
|
172
173
|
type: "button",
|
|
173
174
|
variant: trailingButtonVariant,
|
|
174
175
|
size: inputSize,
|
|
176
|
+
"aria-label": buttonAriaLabel,
|
|
175
177
|
children: [
|
|
176
178
|
buttonIcon != null ? buttonIcon : null,
|
|
177
179
|
buttonLabel != null ? buttonLabel : null
|
|
@@ -16,6 +16,7 @@ export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size
|
|
|
16
16
|
buttonDisabled?: boolean;
|
|
17
17
|
buttonLabel?: string;
|
|
18
18
|
buttonIcon?: React.ReactNode;
|
|
19
|
+
buttonAriaLabel?: string;
|
|
19
20
|
trailingLabel?: string;
|
|
20
21
|
tooltip?: React.ReactNode;
|
|
21
22
|
tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
|
|
@@ -41,6 +41,7 @@ const Input = forwardRef(function Input2({
|
|
|
41
41
|
buttonDisabled = false,
|
|
42
42
|
buttonLabel,
|
|
43
43
|
buttonIcon,
|
|
44
|
+
buttonAriaLabel,
|
|
44
45
|
trailingLabel,
|
|
45
46
|
id,
|
|
46
47
|
tooltipOpenOnFocus = true,
|
|
@@ -166,6 +167,7 @@ const Input = forwardRef(function Input2({
|
|
|
166
167
|
type: "button",
|
|
167
168
|
variant: trailingButtonVariant,
|
|
168
169
|
size: inputSize,
|
|
170
|
+
"aria-label": buttonAriaLabel,
|
|
169
171
|
children: [
|
|
170
172
|
buttonIcon != null ? buttonIcon : null,
|
|
171
173
|
buttonLabel != null ? buttonLabel : null
|
|
@@ -62,8 +62,7 @@
|
|
|
62
62
|
background: var(--overlay-scrim);
|
|
63
63
|
backdrop-filter: blur(var(--backdrop-blur));
|
|
64
64
|
|
|
65
|
-
font-size: var(--font-size-
|
|
66
|
-
font-weight: var(--font-weight-bold);
|
|
65
|
+
font-size: var(--font-size-sm);
|
|
67
66
|
line-height: var(--line-height-tight);
|
|
68
67
|
letter-spacing: var(--letter-spacing-wide);
|
|
69
68
|
}
|
|
@@ -34,6 +34,7 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
|
|
|
34
34
|
onButtonClick,
|
|
35
35
|
buttonLabel,
|
|
36
36
|
buttonIcon,
|
|
37
|
+
buttonAriaLabel,
|
|
37
38
|
fullWidth = false,
|
|
38
39
|
value,
|
|
39
40
|
onChange,
|
|
@@ -120,6 +121,7 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
|
|
|
120
121
|
}, [result]);
|
|
121
122
|
const showInputIcon = !onButtonClick || !!buttonLabel || !!buttonIcon;
|
|
122
123
|
const trailingButtonIcon = onButtonClick && !buttonLabel && !buttonIcon ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, {}) : buttonIcon;
|
|
124
|
+
const trailingButtonAriaLabel = buttonAriaLabel != null ? buttonAriaLabel : onButtonClick && !buttonLabel ? "S\xF8g" : void 0;
|
|
123
125
|
const activeOptionId = activeIndex !== null && (result == null ? void 0 : result.length) ? `${listboxId}-option-${activeIndex}` : void 0;
|
|
124
126
|
const inputProps = {
|
|
125
127
|
...rest,
|
|
@@ -147,6 +149,7 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
|
|
|
147
149
|
onButtonClick,
|
|
148
150
|
buttonLabel,
|
|
149
151
|
buttonIcon: trailingButtonIcon,
|
|
152
|
+
buttonAriaLabel: trailingButtonAriaLabel,
|
|
150
153
|
...inputProps,
|
|
151
154
|
placeholder: (_a = rest.placeholder) != null ? _a : "Indtast s\xF8geord"
|
|
152
155
|
}
|
|
@@ -228,6 +231,7 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
|
|
|
228
231
|
onButtonClick,
|
|
229
232
|
buttonLabel,
|
|
230
233
|
buttonIcon: trailingButtonIcon,
|
|
234
|
+
buttonAriaLabel: trailingButtonAriaLabel,
|
|
231
235
|
...inputProps,
|
|
232
236
|
onKeyDown: (e) => {
|
|
233
237
|
var _a3;
|
|
@@ -23,6 +23,7 @@ type SearchBoxProps<T extends Record<string, unknown>> = {
|
|
|
23
23
|
onButtonClick?: () => void;
|
|
24
24
|
buttonLabel?: string;
|
|
25
25
|
buttonIcon?: React.ReactNode;
|
|
26
|
+
buttonAriaLabel?: string;
|
|
26
27
|
} & React.InputHTMLAttributes<HTMLInputElement>;
|
|
27
28
|
type SearchBoxComponent = <T extends Record<string, unknown>>(props: SearchBoxProps<T> & React.RefAttributes<HTMLInputElement>) => React.ReactElement | null;
|
|
28
29
|
export declare const SearchBox: SearchBoxComponent;
|
|
@@ -28,6 +28,7 @@ const SearchBox = forwardRef(function SearchBoxInner({
|
|
|
28
28
|
onButtonClick,
|
|
29
29
|
buttonLabel,
|
|
30
30
|
buttonIcon,
|
|
31
|
+
buttonAriaLabel,
|
|
31
32
|
fullWidth = false,
|
|
32
33
|
value,
|
|
33
34
|
onChange,
|
|
@@ -114,6 +115,7 @@ const SearchBox = forwardRef(function SearchBoxInner({
|
|
|
114
115
|
}, [result]);
|
|
115
116
|
const showInputIcon = !onButtonClick || !!buttonLabel || !!buttonIcon;
|
|
116
117
|
const trailingButtonIcon = onButtonClick && !buttonLabel && !buttonIcon ? /* @__PURE__ */ jsx(Search, {}) : buttonIcon;
|
|
118
|
+
const trailingButtonAriaLabel = buttonAriaLabel != null ? buttonAriaLabel : onButtonClick && !buttonLabel ? "S\xF8g" : void 0;
|
|
117
119
|
const activeOptionId = activeIndex !== null && (result == null ? void 0 : result.length) ? `${listboxId}-option-${activeIndex}` : void 0;
|
|
118
120
|
const inputProps = {
|
|
119
121
|
...rest,
|
|
@@ -141,6 +143,7 @@ const SearchBox = forwardRef(function SearchBoxInner({
|
|
|
141
143
|
onButtonClick,
|
|
142
144
|
buttonLabel,
|
|
143
145
|
buttonIcon: trailingButtonIcon,
|
|
146
|
+
buttonAriaLabel: trailingButtonAriaLabel,
|
|
144
147
|
...inputProps,
|
|
145
148
|
placeholder: (_a = rest.placeholder) != null ? _a : "Indtast s\xF8geord"
|
|
146
149
|
}
|
|
@@ -222,6 +225,7 @@ const SearchBox = forwardRef(function SearchBoxInner({
|
|
|
222
225
|
onButtonClick,
|
|
223
226
|
buttonLabel,
|
|
224
227
|
buttonIcon: trailingButtonIcon,
|
|
228
|
+
buttonAriaLabel: trailingButtonAriaLabel,
|
|
225
229
|
...inputProps,
|
|
226
230
|
onKeyDown: (e) => {
|
|
227
231
|
var _a3;
|
|
@@ -16,10 +16,7 @@ const THEME_OPTIONS = [
|
|
|
16
16
|
function ThemeMenuSection() {
|
|
17
17
|
const { theme, switchTheme } = useTheme.useTheme();
|
|
18
18
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
19
|
-
/* @__PURE__ */ jsxRuntime.
|
|
20
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Palette, {}),
|
|
21
|
-
"Udseende"
|
|
22
|
-
] }),
|
|
19
|
+
/* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: "Udseende" }),
|
|
23
20
|
THEME_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
24
21
|
Menu.Menu.RadioItem,
|
|
25
22
|
{
|
|
@@ -14,10 +14,7 @@ const THEME_OPTIONS = [
|
|
|
14
14
|
function ThemeMenuSection() {
|
|
15
15
|
const { theme, switchTheme } = useTheme();
|
|
16
16
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
17
|
-
/* @__PURE__ */
|
|
18
|
-
/* @__PURE__ */ jsx(Palette, {}),
|
|
19
|
-
"Udseende"
|
|
20
|
-
] }),
|
|
17
|
+
/* @__PURE__ */ jsx(Menu.Header, { children: "Udseende" }),
|
|
21
18
|
THEME_OPTIONS.map((option) => /* @__PURE__ */ jsx(
|
|
22
19
|
Menu.RadioItem,
|
|
23
20
|
{
|