@midas-ds/components 17.30.2 → 17.31.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.
package/CHANGELOG.md
CHANGED
|
@@ -10,9 +10,14 @@ export interface AccordionItemProps extends DisclosureProps {
|
|
|
10
10
|
headingLevel?: HeadingProps['elementType'];
|
|
11
11
|
/** Display an accordion item with different type styles. */
|
|
12
12
|
type?: FeedbackStatus;
|
|
13
|
+
/**
|
|
14
|
+
* Background of the content area. `neutral` gives the content its own neutral background, `inherit` lets the item background (e.g. the status color from `type`) show through.
|
|
15
|
+
* @default 'neutral'
|
|
16
|
+
**/
|
|
17
|
+
contentBackground?: 'neutral' | 'inherit';
|
|
13
18
|
/**
|
|
14
19
|
* Adds a neutral background to the content area. When using `type`, set to `false` to let the status color show through the content area as well.
|
|
15
|
-
* @
|
|
20
|
+
* @deprecated since v17.31.0 Use `contentBackground` instead. `hasBackground={false}` equals `contentBackground="inherit"`.
|
|
16
21
|
**/
|
|
17
22
|
hasBackground?: boolean;
|
|
18
23
|
isContained?: boolean;
|
|
@@ -25,4 +30,4 @@ export interface AccordionItemProps extends DisclosureProps {
|
|
|
25
30
|
*/
|
|
26
31
|
iconAriaLabel?: FeedbackStatusIconProps['aria-label'];
|
|
27
32
|
}
|
|
28
|
-
export declare const AccordionItem: ({ title, children, className, headingLevel, type, hasBackground, size, isContained: isContainedFromProp, iconAriaLabel, ...props }: AccordionItemProps) => React.JSX.Element;
|
|
33
|
+
export declare const AccordionItem: ({ title, children, className, headingLevel, type, contentBackground: contentBackgroundFromProp, hasBackground, size, isContained: isContainedFromProp, iconAriaLabel, ...props }: AccordionItemProps) => React.JSX.Element;
|
package/accordion/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as e, t } from "../chunks/accordion-
|
|
1
|
+
import { n as e, t } from "../chunks/accordion-uHbLJtPY.js";
|
|
2
2
|
export { e as Accordion, t as AccordionItem };
|
package/assets/accordion.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._root_17bdp_1{--gap:.75rem;--heading-color:var(--midas-text-primary)}._root_17bdp_1._contained_17bdp_5{--gap:.25rem}._root_17bdp_1[data-disabled]{--heading-color:var(--midas-text-disabled)}._root_17bdp_1[data-disabled] ._triggerButton_17bdp_12{background:0 0}._root_17bdp_1{font-family:var(--midas-typography-font-family);color:var(--midas-text-primary);gap:var(--gap);flex-direction:column;width:100%;display:flex}.
|
|
1
|
+
._root_17bdp_1{--gap:.75rem;--heading-color:var(--midas-text-primary)}._root_17bdp_1._contained_17bdp_5{--gap:.25rem}._root_17bdp_1[data-disabled]{--heading-color:var(--midas-text-disabled)}._root_17bdp_1[data-disabled] ._triggerButton_17bdp_12{background:0 0}._root_17bdp_1{font-family:var(--midas-typography-font-family);color:var(--midas-text-primary);gap:var(--gap);flex-direction:column;width:100%;display:flex}._item_p0cw2_1{--item-padding:0;--content-padding:var(--midas-space-small) var(--midas-space-medium) var(--midas-space-medium) 1.85rem;--border:none;--accordion-background:transparent;--accordion-background-hover:transparent;--text-color:var(--midas-text-primary);--icon-color:var(--midas-icon-primary);font-family:var(--midas-typography-font-family);color:var(--text-color);background-color:var(--accordion-background);border:var(--border);border-color:var(--border-color)}._contained_p0cw2_18{--gap:var(--midas-space-xsmall);--item-padding:calc(var(--midas-space-60) - 2px) var(--midas-space-60);--content-padding:var(--midas-space-60) var(--midas-space-medium) var(--midas-space-medium) var(--midas-space-medium);--border-color:var(--midas-border-color-secondary);--border:1px solid;--accordion-background:var(--midas-layer-01-base);--accordion-background-hover:var(--midas-layer-01-hover);--midas-field-base:var(--midas-field-02-base);--midas-field-hover:var(--midas-field-02-hover);--midas-field-disabled:var(--midas-field-02-disabled)}._contained_p0cw2_18._medium_p0cw2_31{--item-padding:calc(var(--midas-space-small) - 2px) var(--midas-space-60)}._success_p0cw2_36{--accordion-background:var(--midas-support-background-success);--accordion-background-hover:var(--midas-support-background-success-hover);--border-color:var(--midas-support-border-success)}._warning_p0cw2_42{--accordion-background:var(--midas-support-background-warning);--accordion-background-hover:var(--midas-support-background-warning-hover);--border-color:var(--midas-support-border-warning)}._info_p0cw2_48{--accordion-background:var(--midas-support-background-info);--accordion-background-hover:var(--midas-support-background-info-hover);--border-color:var(--midas-support-border-info)}._important_p0cw2_54{--accordion-background:var(--midas-support-background-important);--accordion-background-hover:var(--midas-support-background-important-hover);--border-color:var(--midas-support-border-important)}._item_p0cw2_1[data-disabled]{--border-color:var(--midas-border-color-disabled);--icon-color:var(--midas-text-disabled);--text-color:var(--midas-text-disabled)}._item_p0cw2_1[data-disabled] ._triggerButton_p0cw2_65{background:0 0}._item_p0cw2_1[data-disabled] ._triggerText_p0cw2_69{color:var(--midas-text-disabled)}._trigger_p0cw2_65{cursor:pointer;border:0;margin:0}._triggerMainContent_p0cw2_80{text-align:left;flex:1 0 0}._triggerText_p0cw2_69{margin:0;padding:0}:not(#_\9 _p0cw2_1) ._triggerButton_p0cw2_65{width:100%;padding:var(--item-padding);min-height:unset;align-items:flex-start}._chevronIcon_p0cw2_97{transition:transform var(--midas-transition-duration-normal) ease;padding:var(--midas-space-10) 0;transform:rotate(0)}._statusIcon_p0cw2_103{color:var(--icon-color);padding:var(--midas-space-10) 0}@media (forced-colors:active){._statusIcon_p0cw2_103{color:currentColor}}._triggerButton_p0cw2_65[aria-expanded=true] ._chevronIcon_p0cw2_97{transition:transform var(--midas-transition-duration-normal) ease;transform:rotate(-180deg)}._triggerButton_p0cw2_65[data-hovered]{background-color:var(--accordion-background-hover)}._triggerButton_p0cw2_65[data-focus-visible]{box-shadow:var(--midas-state-focus-inset)}._panel_p0cw2_125{height:var(--disclosure-panel-height);transition:height var(--midas-transition-panel-collapse);overflow:clip}._content_p0cw2_133{height:auto;padding:var(--content-padding)}._neutralBackground_p0cw2_138{background-color:var(--midas-background-base);--midas-field-base:var(--midas-field-01-base);--midas-field-hover:var(--midas-field-01-hover);--midas-field-disabled:var(--midas-field-01-disabled)}._header_p0cw2_146{margin:0}@media (prefers-reduced-motion){._chevronIcon_p0cw2_97,._triggerButton_p0cw2_65[aria-expanded=true] ._chevronIcon_p0cw2_97,._panel_p0cw2_125{transition:none}}
|
|
@@ -22,31 +22,31 @@ import '../assets/accordion.css';var h = {
|
|
|
22
22
|
children: t
|
|
23
23
|
})
|
|
24
24
|
}), v = {
|
|
25
|
-
item: "
|
|
26
|
-
contained: "
|
|
27
|
-
medium: "
|
|
28
|
-
success: "
|
|
29
|
-
warning: "
|
|
30
|
-
info: "
|
|
31
|
-
important: "
|
|
32
|
-
triggerButton: "
|
|
33
|
-
triggerText: "
|
|
34
|
-
trigger: "
|
|
35
|
-
triggerMainContent: "
|
|
36
|
-
" ": "_
|
|
37
|
-
chevronIcon: "
|
|
38
|
-
statusIcon: "
|
|
39
|
-
panel: "
|
|
40
|
-
content: "
|
|
41
|
-
|
|
42
|
-
header: "
|
|
43
|
-
}, y = ({ title: i, children: c, className: h, headingLevel: _ = "h2", type: y,
|
|
44
|
-
let
|
|
25
|
+
item: "_item_p0cw2_1",
|
|
26
|
+
contained: "_contained_p0cw2_18",
|
|
27
|
+
medium: "_medium_p0cw2_31",
|
|
28
|
+
success: "_success_p0cw2_36",
|
|
29
|
+
warning: "_warning_p0cw2_42",
|
|
30
|
+
info: "_info_p0cw2_48",
|
|
31
|
+
important: "_important_p0cw2_54",
|
|
32
|
+
triggerButton: "_triggerButton_p0cw2_65",
|
|
33
|
+
triggerText: "_triggerText_p0cw2_69",
|
|
34
|
+
trigger: "_trigger_p0cw2_65",
|
|
35
|
+
triggerMainContent: "_triggerMainContent_p0cw2_80",
|
|
36
|
+
" ": "_ _p0cw2_1",
|
|
37
|
+
chevronIcon: "_chevronIcon_p0cw2_97",
|
|
38
|
+
statusIcon: "_statusIcon_p0cw2_103",
|
|
39
|
+
panel: "_panel_p0cw2_125",
|
|
40
|
+
content: "_content_p0cw2_133",
|
|
41
|
+
neutralBackground: "_neutralBackground_p0cw2_138",
|
|
42
|
+
header: "_header_p0cw2_146"
|
|
43
|
+
}, y = ({ title: i, children: c, className: h, headingLevel: _ = "h2", type: y, contentBackground: b, hasBackground: x, size: S = "large", isContained: C, iconAriaLabel: w, ...T }) => {
|
|
44
|
+
let E = a(g), D = C ?? E?.isContained ?? !1, O = typeof i == "object", k = b ?? (x === !1 ? "inherit" : "neutral");
|
|
45
45
|
return o(() => {
|
|
46
|
-
y && !
|
|
47
|
-
}, [y,
|
|
48
|
-
...
|
|
49
|
-
className: e(v.item, y &&
|
|
46
|
+
y && !D && console.warn("AccordionItem: When 'type' is set, it is recommended to also set 'isContained' to true for visual consistency.");
|
|
47
|
+
}, [y, D]), /* @__PURE__ */ f(s, {
|
|
48
|
+
...T,
|
|
49
|
+
className: e(v.item, y && D && v[y], (S === "medium" || E?.size === "medium") && v.medium, D && v.contained, h),
|
|
50
50
|
children: u(c, (a) => /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("div", {
|
|
51
51
|
className: v.trigger,
|
|
52
52
|
children: /* @__PURE__ */ p(t, {
|
|
@@ -60,15 +60,15 @@ import '../assets/accordion.css';var h = {
|
|
|
60
60
|
}),
|
|
61
61
|
/* @__PURE__ */ f("div", {
|
|
62
62
|
className: v.triggerMainContent,
|
|
63
|
-
children:
|
|
63
|
+
children: O ? i : /* @__PURE__ */ f(n, {
|
|
64
64
|
level: 3,
|
|
65
65
|
elementType: _,
|
|
66
66
|
className: v.triggerText,
|
|
67
67
|
children: i
|
|
68
68
|
})
|
|
69
69
|
}),
|
|
70
|
-
y &&
|
|
71
|
-
"aria-label":
|
|
70
|
+
y && D && /* @__PURE__ */ f(r, {
|
|
71
|
+
"aria-label": w,
|
|
72
72
|
className: v.statusIcon,
|
|
73
73
|
status: y
|
|
74
74
|
})
|
|
@@ -77,7 +77,7 @@ import '../assets/accordion.css';var h = {
|
|
|
77
77
|
}), /* @__PURE__ */ f(l, {
|
|
78
78
|
className: v.panel,
|
|
79
79
|
children: /* @__PURE__ */ f("div", {
|
|
80
|
-
className: e(v.content,
|
|
80
|
+
className: e(v.content, k === "neutral" && v.neutralBackground),
|
|
81
81
|
children: a
|
|
82
82
|
})
|
|
83
83
|
})] }))
|
package/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
"use client";
|
|
3
|
-
import { n as e, t } from "./chunks/accordion-
|
|
3
|
+
import { n as e, t } from "./chunks/accordion-uHbLJtPY.js";
|
|
4
4
|
import { t as n } from "./chunks/clsx-DAqHMl_k.js";
|
|
5
5
|
import { t as r } from "./chunks/spinner-CIjfJeGm.js";
|
|
6
6
|
import { t as i } from "./chunks/useLocalizedStringFormatter-CeyBc0x0.js";
|
|
@@ -61,7 +61,7 @@ var ot = {
|
|
|
61
61
|
description: "Midas Components",
|
|
62
62
|
homepage: "https://designsystem.migrationsverket.se/",
|
|
63
63
|
license: "CC0-1.0",
|
|
64
|
-
version: "17.
|
|
64
|
+
version: "17.31.0",
|
|
65
65
|
module: "./index.js",
|
|
66
66
|
type: "module",
|
|
67
67
|
main: "./index.js",
|
package/package.json
CHANGED