@gnist/design-system 2.0.10 → 2.0.11
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 +6 -0
- package/dist/components/actions/buttons/DangerButton.d.ts +3 -1
- package/dist/components/actions/buttons/DangerButton.d.ts.map +1 -1
- package/dist/components/actions/buttons/GhostButton.d.ts +2 -0
- package/dist/components/actions/buttons/GhostButton.d.ts.map +1 -1
- package/dist/components/actions/buttons/IconButton.d.ts +3 -1
- package/dist/components/actions/buttons/IconButton.d.ts.map +1 -1
- package/dist/components/actions/buttons/PrimaryButton.d.ts +3 -1
- package/dist/components/actions/buttons/PrimaryButton.d.ts.map +1 -1
- package/dist/components/actions/buttons/SecondaryButton.d.ts +2 -0
- package/dist/components/actions/buttons/SecondaryButton.d.ts.map +1 -1
- package/dist/components/actions/buttons/SuccessButton.d.ts +2 -0
- package/dist/components/actions/buttons/SuccessButton.d.ts.map +1 -1
- package/dist/components/actions/buttons/TextButton.d.ts +2 -0
- package/dist/components/actions/buttons/TextButton.d.ts.map +1 -1
- package/dist/components/actions/chips/ActionChip.d.ts +2 -0
- package/dist/components/actions/chips/ActionChip.d.ts.map +1 -1
- package/dist/components/actions/chips/FilterChip.d.ts +2 -0
- package/dist/components/actions/chips/FilterChip.d.ts.map +1 -1
- package/dist/components/actions/chips/TagChip.d.ts +2 -0
- package/dist/components/actions/chips/TagChip.d.ts.map +1 -1
- package/dist/components/actions/selectionControls/Checkbox.d.ts +2 -0
- package/dist/components/actions/selectionControls/Checkbox.d.ts.map +1 -1
- package/dist/components/actions/selectionControls/RadioButton.d.ts +7 -0
- package/dist/components/actions/selectionControls/RadioButton.d.ts.map +1 -1
- package/dist/components/feedback/alerts/AlertBanner.cjs +1 -1
- package/dist/components/feedback/alerts/AlertBanner.css.cjs +25 -8
- package/dist/components/feedback/alerts/AlertBanner.css.d.ts +8 -0
- package/dist/components/feedback/alerts/AlertBanner.css.d.ts.map +1 -1
- package/dist/components/feedback/alerts/AlertBanner.css.js +25 -8
- package/dist/components/feedback/alerts/AlertBanner.d.ts +8 -0
- package/dist/components/feedback/alerts/AlertBanner.d.ts.map +1 -1
- package/dist/components/feedback/alerts/AlertBanner.js +2 -2
- package/dist/components/feedback/loaders/LoadingSpinner.d.ts +5 -0
- package/dist/components/feedback/loaders/LoadingSpinner.d.ts.map +1 -1
- package/dist/components/feedback/notifications/Lozenge.d.ts +4 -0
- package/dist/components/feedback/notifications/Lozenge.d.ts.map +1 -1
- package/dist/components/feedback/progress/ProgressBar.d.ts +6 -0
- package/dist/components/feedback/progress/ProgressBar.d.ts.map +1 -1
- package/dist/components/inputs/dropdowns/MultiSelect.d.ts +2 -0
- package/dist/components/inputs/dropdowns/MultiSelect.d.ts.map +1 -1
- package/dist/components/inputs/dropdowns/SingleSelect.d.ts +2 -0
- package/dist/components/inputs/dropdowns/SingleSelect.d.ts.map +1 -1
- package/dist/components/inputs/pickers/calendar.d.ts +5 -1
- package/dist/components/inputs/pickers/calendar.d.ts.map +1 -1
- package/dist/components/inputs/textFields/TextArea.d.ts +2 -0
- package/dist/components/inputs/textFields/TextArea.d.ts.map +1 -1
- package/dist/components/inputs/textFields/TextField.d.ts +3 -1
- package/dist/components/inputs/textFields/TextField.d.ts.map +1 -1
- package/dist/components/surfaces/accordion/Accordion.d.ts +2 -0
- package/dist/components/surfaces/accordion/Accordion.d.ts.map +1 -1
- package/dist/components/surfaces/cards/ActionCard.d.ts +2 -0
- package/dist/components/surfaces/cards/ActionCard.d.ts.map +1 -1
- package/dist/components/surfaces/cards/CheckboxCard.d.ts +2 -0
- package/dist/components/surfaces/cards/CheckboxCard.d.ts.map +1 -1
- package/dist/components/surfaces/cards/InfoCard.d.ts +1 -0
- package/dist/components/surfaces/cards/InfoCard.d.ts.map +1 -1
- package/dist/components/surfaces/cards/LinkCard.d.ts +2 -0
- package/dist/components/surfaces/cards/LinkCard.d.ts.map +1 -1
- package/dist/components/surfaces/cards/RadioCard.d.ts +2 -0
- package/dist/components/surfaces/cards/RadioCard.d.ts.map +1 -1
- package/dist/components/surfaces/modal/Modal.d.ts +12 -0
- package/dist/components/surfaces/modal/Modal.d.ts.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,12 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [2.0.11](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@2.0.10...@gnist/design-system@2.0.11) (2025-02-11)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* styling alertbanner ([a91e916](https://github.com/mollerdigital/design-system-design-system/commit/a91e916f27c0ae55e4421ad89546f218f81a3ccc))
|
|
11
|
+
|
|
6
12
|
## [2.0.10](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@2.0.9...@gnist/design-system@2.0.10) (2025-02-07)
|
|
7
13
|
|
|
8
14
|
**Note:** Version bump only for package @gnist/design-system
|
|
@@ -2,6 +2,8 @@ import { ElementType } from "react";
|
|
|
2
2
|
import { BoxedButtonProps } from "./ButtonBase.js";
|
|
3
3
|
/**
|
|
4
4
|
The danger button appears as a final confirmation for a destructive action like deleting or removing content. These are found mostly in confirmation states and modals.
|
|
5
|
-
|
|
5
|
+
|
|
6
|
+
Documentation: [DangerButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-buttons-dangerbutton--docs)
|
|
7
|
+
*/
|
|
6
8
|
export declare const DangerButton: import("react").ForwardRefExoticComponent<Omit<BoxedButtonProps<ElementType>, "ref"> & import("react").RefAttributes<Element>>;
|
|
7
9
|
//# sourceMappingURL=DangerButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DangerButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/DangerButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA4B,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAmB,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGpE
|
|
1
|
+
{"version":3,"file":"DangerButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/DangerButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA4B,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAmB,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGpE;;;;GAIG;AAEH,eAAO,MAAM,YAAY,gIAMvB,CAAC"}
|
|
@@ -4,6 +4,8 @@ import { BoxedButtonProps } from "./ButtonBase.js";
|
|
|
4
4
|
Ghost buttons indicate a lower level of emphasis and have a solid outline to draw less attention from the primary action. Because the background is transparent, the text and icon color is inherited from ancestors to acommodate use on different background colors.
|
|
5
5
|
|
|
6
6
|
As the ghost button looks less like a traditional button, it must always be used with a CTA button nearby.
|
|
7
|
+
|
|
8
|
+
Documentation: [GhostButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-buttons-ghostbutton--docs)
|
|
7
9
|
*/
|
|
8
10
|
export declare const GhostButton: import("react").ForwardRefExoticComponent<Omit<BoxedButtonProps<ElementType>, "ref"> & import("react").RefAttributes<Element>>;
|
|
9
11
|
//# sourceMappingURL=GhostButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GhostButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/GhostButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA4B,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAmB,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGpE
|
|
1
|
+
{"version":3,"file":"GhostButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/GhostButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA4B,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAmB,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGpE;;;;;;EAME;AACF,eAAO,MAAM,WAAW,gIAStB,CAAC"}
|
|
@@ -21,7 +21,9 @@ type IconButtonProps<AsElement extends ElementType> = PolymorphicProps<AsElement
|
|
|
21
21
|
};
|
|
22
22
|
/**
|
|
23
23
|
An icon button is a button which displays only an icon with or without a label. Icon buttons allow users to take actions, and make choices, with a single tap. Because the background is transparent, the icon and label color is inherited from ancestors to acommodate use on different background colors.
|
|
24
|
-
|
|
24
|
+
|
|
25
|
+
Documentation: [IconButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-buttons-iconbutton--docs)
|
|
26
|
+
*/
|
|
25
27
|
export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<IconButtonProps<ElementType>, "ref"> & import("react").RefAttributes<Element>>;
|
|
26
28
|
export {};
|
|
27
29
|
//# sourceMappingURL=IconButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,wDAAoE;AAG3F,OAAO,EAAE,WAAW,EAA2C,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAQ,MAAM,0CAA0C,CAAC;AAI9E,KAAK,eAAe,CAAC,SAAS,SAAS,WAAW,IAC9C,gBAAgB,CAAC,SAAS,CAAC,GAAG;IAC1B;;OAEG;IACH,IAAI,EAAE,YAAY,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACtC,mHAAmH;IACnH,eAAe,CAAC,EAAE,YAAY,CAAC;CAClC,CAAC;AAEN
|
|
1
|
+
{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,wDAAoE;AAG3F,OAAO,EAAE,WAAW,EAA2C,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAQ,MAAM,0CAA0C,CAAC;AAI9E,KAAK,eAAe,CAAC,SAAS,SAAS,WAAW,IAC9C,gBAAgB,CAAC,SAAS,CAAC,GAAG;IAC1B;;OAEG;IACH,IAAI,EAAE,YAAY,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACtC,mHAAmH;IACnH,eAAe,CAAC,EAAE,YAAY,CAAC;CAClC,CAAC;AAEN;;;;GAIG;AACH,eAAO,MAAM,UAAU,+HA8CrB,CAAC"}
|
|
@@ -4,6 +4,8 @@ import { BoxedButtonProps } from "./ButtonBase.js";
|
|
|
4
4
|
The primary button commands the highest emphasis on the page and is reserved for the main action you want a user to take on a page — the "Call To Action" (CTA) button.
|
|
5
5
|
|
|
6
6
|
Primary buttons shouldn’t appear more than once in a section, and preferably just once on a screen, as it will confuse users as to which is the most important action. If you need a button next to a primary action, use the ghost button.
|
|
7
|
-
|
|
7
|
+
|
|
8
|
+
Documentation: [PrimaryButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-buttons-primarybutton--docs)
|
|
9
|
+
*/
|
|
8
10
|
export declare const PrimaryButton: import("react").ForwardRefExoticComponent<Omit<BoxedButtonProps<ElementType>, "ref"> & import("react").RefAttributes<Element>>;
|
|
9
11
|
//# sourceMappingURL=PrimaryButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/PrimaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA4B,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAmB,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGpE
|
|
1
|
+
{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/PrimaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA4B,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAmB,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGpE;;;;;;GAMG;AAEH,eAAO,MAAM,aAAa,gIASxB,CAAC"}
|
|
@@ -2,6 +2,8 @@ import { ElementType } from "react";
|
|
|
2
2
|
import { BoxedButtonProps } from "./ButtonBase.js";
|
|
3
3
|
/**
|
|
4
4
|
Secondary buttons are used for the second most important action. These are often used if you have multiple actions on a page so need more than one button.
|
|
5
|
+
|
|
6
|
+
Documentation: [SecondaryButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-buttons-secondarybutton--docs)
|
|
5
7
|
*/
|
|
6
8
|
export declare const SecondaryButton: import("react").ForwardRefExoticComponent<Omit<BoxedButtonProps<ElementType>, "ref"> & import("react").RefAttributes<Element>>;
|
|
7
9
|
//# sourceMappingURL=SecondaryButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA4B,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAmB,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGpE
|
|
1
|
+
{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA4B,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAmB,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGpE;;;;EAIE;AAEF,eAAO,MAAM,eAAe,gIAS1B,CAAC"}
|
|
@@ -4,6 +4,8 @@ import { BoxedButtonProps } from "./ButtonBase.js";
|
|
|
4
4
|
The success button is used for positive actions such as to complete, save or fulfill an order.
|
|
5
5
|
|
|
6
6
|
There shouldn’t be more than one success button on a page to avoid overwhelming customers.
|
|
7
|
+
|
|
8
|
+
Documentation: [SuccessButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-buttons-successbutton--docs)
|
|
7
9
|
*/
|
|
8
10
|
export declare const SuccessButton: import("react").ForwardRefExoticComponent<Omit<BoxedButtonProps<ElementType>, "ref"> & import("react").RefAttributes<Element>>;
|
|
9
11
|
//# sourceMappingURL=SuccessButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SuccessButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/SuccessButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA4B,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAmB,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGpE
|
|
1
|
+
{"version":3,"file":"SuccessButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/SuccessButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA4B,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAmB,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGpE;;;;;;EAME;AAEF,eAAO,MAAM,aAAa,gIASxB,CAAC"}
|
|
@@ -10,6 +10,8 @@ type TextButtonProps<AsElement extends ElementType> = PolymorphicProps<AsElement
|
|
|
10
10
|
Text buttons are typically used for less-pronounced actions, including those located in dialogs and cards. In cards and dialogs, text buttons help maintain an emphasis on card content. Because the background is transparent, the text and underline color is inherited from ancestors to acommodate use on different background colors.
|
|
11
11
|
|
|
12
12
|
Note: Unlike most button components, `disabled`, `loading` and `density` props don't exist for TextButton.
|
|
13
|
+
|
|
14
|
+
Documentation: [TextButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-buttons-textbutton--docs)
|
|
13
15
|
*/
|
|
14
16
|
export declare const TextButton: import("react").ForwardRefExoticComponent<Omit<TextButtonProps<ElementType>, "ref"> & import("react").RefAttributes<Element>>;
|
|
15
17
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/TextButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI1D,OAAO,EAAE,WAAW,EAA2C,MAAM,OAAO,CAAC;AAG7E,KAAK,eAAe,CAAC,SAAS,SAAS,WAAW,IAC9C,gBAAgB,CAAC,SAAS,CAAC,GAAG;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEN
|
|
1
|
+
{"version":3,"file":"TextButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/TextButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI1D,OAAO,EAAE,WAAW,EAA2C,MAAM,OAAO,CAAC;AAG7E,KAAK,eAAe,CAAC,SAAS,SAAS,WAAW,IAC9C,gBAAgB,CAAC,SAAS,CAAC,GAAG;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEN;;;;;;EAME;AACF,eAAO,MAAM,UAAU,+HAiCrB,CAAC"}
|
|
@@ -24,6 +24,8 @@ export interface ActionChipProps extends ComponentPropsWithRef<"button"> {
|
|
|
24
24
|
*
|
|
25
25
|
* Action chips could also allow selection of a single chip from a set of options.
|
|
26
26
|
* In this case action chips clearly delineate and display options in a compact area. They are a good alternative to toggle buttons, radio buttons, and single select menus. When used in this way, you should ensure that selecting a single action chip automatically deselects all other chips in the set.
|
|
27
|
+
|
|
28
|
+
Documentation: [ActionChip](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-chips-actionchip--docs)
|
|
27
29
|
**/
|
|
28
30
|
export declare const ActionChip: import("react").ForwardRefExoticComponent<Omit<ActionChipProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
29
31
|
//# sourceMappingURL=ActionChip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionChip.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/chips/ActionChip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EAGf,qCAAiD;AAQlD,OAAO,EACH,qBAAqB,EAGrB,iBAAiB,EACpB,MAAM,OAAO,CAAC;AAKf,MAAM,WAAW,eAAgB,SAAQ,qBAAqB,CAAC,QAAQ,CAAC;IACpE,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE;QACN,SAAS,EAAE,OAAO,CAAC;QACnB,WAAW,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,2BAA2B;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACnC;AAED
|
|
1
|
+
{"version":3,"file":"ActionChip.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/chips/ActionChip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EAGf,qCAAiD;AAQlD,OAAO,EACH,qBAAqB,EAGrB,iBAAiB,EACpB,MAAM,OAAO,CAAC;AAKf,MAAM,WAAW,eAAgB,SAAQ,qBAAqB,CAAC,QAAQ,CAAC;IACpE,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE;QACN,SAAS,EAAE,OAAO,CAAC;QACnB,WAAW,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,2BAA2B;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACnC;AAED;;;;;;;;;IASI;AACJ,eAAO,MAAM,UAAU,4HAuDrB,CAAC"}
|
|
@@ -21,6 +21,8 @@ interface FilterChipProps extends ComponentPropsWithRef<"button"> {
|
|
|
21
21
|
* Chips are compact elements that allow users to enter information, make selections, filter content, or trigger actions. While buttons are expected to appear consistently and with familiar calls to action, chips should appear dynamically as a group of multiple interactive elements. Chips are typically displayed horizontally and sequentially.
|
|
22
22
|
*
|
|
23
23
|
* Filter chips use tags or descriptive words to filter content. They can be a good alternative to toggle buttons or checkboxes. Tapping on a filter chip activates it and appends a leading checkmark icon in front of the label. Multiple filter chips can be selected or unselected.
|
|
24
|
+
|
|
25
|
+
Documentation: [FilterChip](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-chips-filterchip--docs)
|
|
24
26
|
**/
|
|
25
27
|
export declare const FilterChip: import("react").ForwardRefExoticComponent<Omit<FilterChipProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
26
28
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterChip.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/chips/FilterChip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EAGf,qCAAiD;AAQlD,OAAO,EAAE,qBAAqB,EAA4B,MAAM,OAAO,CAAC;AAKxE,UAAU,eAAgB,SAAQ,qBAAqB,CAAC,QAAQ,CAAC;IAC7D,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE;QACN,SAAS,EAAE,OAAO,CAAC;QACnB,WAAW,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,8BAA8B;IAC9B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,sCAAsC;IACtC,IAAI,CAAC,EAAE,YAAY,CAAC;CACvB;AAED
|
|
1
|
+
{"version":3,"file":"FilterChip.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/chips/FilterChip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EAGf,qCAAiD;AAQlD,OAAO,EAAE,qBAAqB,EAA4B,MAAM,OAAO,CAAC;AAKxE,UAAU,eAAgB,SAAQ,qBAAqB,CAAC,QAAQ,CAAC;IAC7D,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE;QACN,SAAS,EAAE,OAAO,CAAC;QACnB,WAAW,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,8BAA8B;IAC9B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,sCAAsC;IACtC,IAAI,CAAC,EAAE,YAAY,CAAC;CACvB;AAED;;;;;;IAMI;AAEJ,eAAO,MAAM,UAAU,4HA0DrB,CAAC"}
|
|
@@ -14,6 +14,8 @@ interface TagChipProps extends ComponentPropsWithRef<"button"> {
|
|
|
14
14
|
* Chips are compact elements that allow users to enter information, make selections, filter content, or trigger actions. While buttons are expected to appear consistently and with familiar calls to action, chips should appear dynamically as a group of multiple interactive elements. Chips are typically displayed horizontally and sequentially.
|
|
15
15
|
*
|
|
16
16
|
* Tag chips appear when selecting an option that triggers a tag and can be removed by clicking on the remove icon or unchecking the option. Tag chips appear within a multi select component or search field, presented as a horizontally scrollable list.
|
|
17
|
+
|
|
18
|
+
Documentation: [TagChip](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-chips-tagchip--docs)
|
|
17
19
|
**/
|
|
18
20
|
export declare const TagChip: import("react").ForwardRefExoticComponent<Omit<TagChipProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
19
21
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagChip.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/chips/TagChip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EAGf,qCAAiD;AAOlD,OAAO,EACH,qBAAqB,EAGrB,iBAAiB,EACpB,MAAM,OAAO,CAAC;AAIf,UAAU,YAAa,SAAQ,qBAAqB,CAAC,QAAQ,CAAC;IAC1D,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,sCAAsC;IACtC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACnC;AAED
|
|
1
|
+
{"version":3,"file":"TagChip.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/chips/TagChip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EAGf,qCAAiD;AAOlD,OAAO,EACH,qBAAqB,EAGrB,iBAAiB,EACpB,MAAM,OAAO,CAAC;AAIf,UAAU,YAAa,SAAQ,qBAAqB,CAAC,QAAQ,CAAC;IAC1D,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,sCAAsC;IACtC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACnC;AAED;;;;;;IAMI;AAEJ,eAAO,MAAM,OAAO,yHA8BlB,CAAC"}
|
|
@@ -5,6 +5,8 @@ export type CheckboxProps = SelectionControlProps<boolean | "indeterminate">;
|
|
|
5
5
|
* Checkboxes allow users to select one or more items from a list. They may also be used as a way to have the users indicate they agree to terms and services.
|
|
6
6
|
*
|
|
7
7
|
* Checkboxes can turn an option on or off. Unlike radio buttons, changes in the states of one checkbox do not usually affect other checkboxes. Checkboxes should be used instead of switches if multiple options can be selected.
|
|
8
|
+
|
|
9
|
+
Documentation: [Checkbox](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-selectioncontrols-checkbox--docs)
|
|
8
10
|
*/
|
|
9
11
|
export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLSpanElement>>;
|
|
10
12
|
//# sourceMappingURL=Checkbox.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/Checkbox.tsx"],"names":[],"mappings":"AAcA,OAAO,EAEH,qBAAqB,EAExB,MAAM,aAAa,CAAC;AAErB,MAAM,MAAM,aAAa,GAAG,qBAAqB,CAAC,OAAO,GAAG,eAAe,CAAC,CAAC;AA+B7E
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/Checkbox.tsx"],"names":[],"mappings":"AAcA,OAAO,EAEH,qBAAqB,EAExB,MAAM,aAAa,CAAC;AAErB,MAAM,MAAM,aAAa,GAAG,qBAAqB,CAAC,OAAO,GAAG,eAAe,CAAC,CAAC;AA+B7E;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,yBAAyB,CAClD,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC,CA6EtD,CAAC"}
|
|
@@ -1,4 +1,11 @@
|
|
|
1
1
|
import { SelectionControlProps } from "./shared.js";
|
|
2
2
|
export type RadioButtonProps = SelectionControlProps<boolean>;
|
|
3
|
+
/**
|
|
4
|
+
* Radio buttons allow users to select one option from a list. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.
|
|
5
|
+
*
|
|
6
|
+
* Radio buttons should be used instead of checkboxes if only one item can be selected from a list.
|
|
7
|
+
|
|
8
|
+
Documentation: [RadioButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-selectioncontrols-radiobutton--docs)
|
|
9
|
+
**/
|
|
3
10
|
export declare const RadioButton: React.ForwardRefExoticComponent<Omit<RadioButtonProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
4
11
|
//# sourceMappingURL=RadioButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/RadioButton.tsx"],"names":[],"mappings":"AAcA,OAAO,EAEH,qBAAqB,EAExB,MAAM,aAAa,CAAC;AAErB,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC;AAqC9D,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,yBAAyB,CACrD,IAAI,CAAC,gBAAgB,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC,CAuEtE,CAAC"}
|
|
1
|
+
{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/RadioButton.tsx"],"names":[],"mappings":"AAcA,OAAO,EAEH,qBAAqB,EAExB,MAAM,aAAa,CAAC;AAErB,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC;AAqC9D;;;;;;GAMG;AAEH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,yBAAyB,CACrD,IAAI,CAAC,gBAAgB,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC,CAuEtE,CAAC"}
|
|
@@ -23,6 +23,6 @@ const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
|
|
|
23
23
|
const BannerHeading = componentUtils.component("BannerHeading", AlertBanner_css.bannerHeading, "h2");
|
|
24
24
|
const AlertBanner = ({ type, heading, message, dismiss, action, density = "default", headingLevel = "h2", className }) => {
|
|
25
25
|
const text = index.useTranslation((t) => t.components.feedback.alerts);
|
|
26
|
-
return jsxRuntime.jsxs("div", { className: classNames__default.default(className, AlertBanner_css.banner({ type, density })), children: [jsxRuntime.jsx(Icon.Icon, { type, icon: type }), jsxRuntime.jsxs("div", { className: AlertBanner_css.mainContentContainer({ density }), children: [heading && jsxRuntime.jsx(BannerHeading, { "$as": headingLevel, children: heading }), dismiss && jsxRuntime.jsx(IconButton.IconButton, { className: AlertBanner_css.closeButton, icon: "close", label: text.dismissLabel, onClick: dismiss }), jsxRuntime.jsx(index$1.TextContainer, { className: AlertBanner_css.messageContainer, children: message }), action && jsxRuntime.jsx(TextButton.TextButton, { className: AlertBanner_css.textButton, onClick: action.onClick, children: action.label })] })] });
|
|
26
|
+
return jsxRuntime.jsxs("div", { className: classNames__default.default(className, AlertBanner_css.banner({ type, density })), children: [jsxRuntime.jsx(Icon.Icon, { type, icon: type, className: AlertBanner_css.icon({ type }) }), jsxRuntime.jsxs("div", { className: AlertBanner_css.mainContentContainer({ density }), children: [heading && jsxRuntime.jsx(BannerHeading, { "$as": headingLevel, children: heading }), dismiss && jsxRuntime.jsx(IconButton.IconButton, { className: AlertBanner_css.closeButton, icon: "close", label: text.dismissLabel, onClick: dismiss }), jsxRuntime.jsx(index$1.TextContainer, { className: AlertBanner_css.messageContainer, children: message }), action && jsxRuntime.jsx(TextButton.TextButton, { className: AlertBanner_css.textButton, onClick: action.onClick, children: action.label })] })] });
|
|
27
27
|
};
|
|
28
28
|
exports.AlertBanner = AlertBanner;
|
|
@@ -2,9 +2,13 @@
|
|
|
2
2
|
"use strict";
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
4
4
|
const atoms_css_js = require("@gnist/themes/atoms.css.js");
|
|
5
|
-
const colors_css_js = require("@gnist/themes/colors.css.js");
|
|
6
5
|
const css = require("@vanilla-extract/css");
|
|
7
6
|
const recipes = require("@vanilla-extract/recipes");
|
|
7
|
+
const boxColors = (colorName) => atoms_css_js.atoms({
|
|
8
|
+
backgroundColor: `${colorName}-container`,
|
|
9
|
+
color: `on-${colorName}-container`,
|
|
10
|
+
borderColor: `${colorName}`
|
|
11
|
+
});
|
|
8
12
|
const banner = recipes.recipe({
|
|
9
13
|
base: [
|
|
10
14
|
{
|
|
@@ -22,17 +26,29 @@ const banner = recipes.recipe({
|
|
|
22
26
|
compact: atoms_css_js.atoms({ padding: "xxs" })
|
|
23
27
|
},
|
|
24
28
|
type: {
|
|
25
|
-
success:
|
|
26
|
-
warning:
|
|
27
|
-
error:
|
|
28
|
-
info:
|
|
29
|
+
success: boxColors("success"),
|
|
30
|
+
warning: boxColors("warning"),
|
|
31
|
+
error: boxColors("error"),
|
|
32
|
+
info: boxColors("info")
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
const icon = recipes.recipe({
|
|
37
|
+
variants: {
|
|
38
|
+
type: {
|
|
39
|
+
success: atoms_css_js.atoms({ color: "success" }),
|
|
40
|
+
warning: atoms_css_js.atoms({ color: "warning" }),
|
|
41
|
+
error: atoms_css_js.atoms({ color: "error" }),
|
|
42
|
+
info: atoms_css_js.atoms({ color: "info" })
|
|
29
43
|
}
|
|
30
44
|
}
|
|
31
45
|
});
|
|
32
46
|
const mainContentContainer = recipes.recipe({
|
|
33
|
-
base:
|
|
34
|
-
|
|
35
|
-
|
|
47
|
+
base: [
|
|
48
|
+
{
|
|
49
|
+
flex: 1
|
|
50
|
+
}
|
|
51
|
+
],
|
|
36
52
|
variants: {
|
|
37
53
|
density: {
|
|
38
54
|
default: atoms_css_js.atoms({ marginLeft: "s" }),
|
|
@@ -50,6 +66,7 @@ const textButton = atoms_css_js.atoms({ marginTop: "base" });
|
|
|
50
66
|
exports.banner = banner;
|
|
51
67
|
exports.bannerHeading = bannerHeading;
|
|
52
68
|
exports.closeButton = closeButton;
|
|
69
|
+
exports.icon = icon;
|
|
53
70
|
exports.mainContentContainer = mainContentContainer;
|
|
54
71
|
exports.messageContainer = messageContainer;
|
|
55
72
|
exports.textButton = textButton;
|
|
@@ -10,6 +10,14 @@ export declare const banner: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
|
10
10
|
info: string;
|
|
11
11
|
};
|
|
12
12
|
}>;
|
|
13
|
+
export declare const icon: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
14
|
+
type: {
|
|
15
|
+
success: string;
|
|
16
|
+
warning: string;
|
|
17
|
+
error: string;
|
|
18
|
+
info: string;
|
|
19
|
+
};
|
|
20
|
+
}>;
|
|
13
21
|
export declare const mainContentContainer: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
14
22
|
density: {
|
|
15
23
|
default: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertBanner.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/alerts/AlertBanner.css.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AlertBanner.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/alerts/AlertBanner.css.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,MAAM;;;;;;;;;;;EAuBjB,CAAC;AAEH,eAAO,MAAM,IAAI;;;;;;;EASf,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;EAY/B,CAAC;AAEH,eAAO,MAAM,aAAa,QAGxB,CAAC;AAEH,eAAO,MAAM,WAAW,QAA4B,CAAC;AAErD,eAAO,MAAM,gBAAgB,QAA2B,CAAC;AAEzD,eAAO,MAAM,UAAU,QAA+B,CAAC"}
|
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { atoms } from "@gnist/themes/atoms.css.js";
|
|
3
|
-
import { boxColors } from "@gnist/themes/colors.css.js";
|
|
4
3
|
import { style } from "@vanilla-extract/css";
|
|
5
4
|
import { recipe } from "@vanilla-extract/recipes";
|
|
5
|
+
const boxColors = (colorName) => atoms({
|
|
6
|
+
backgroundColor: `${colorName}-container`,
|
|
7
|
+
color: `on-${colorName}-container`,
|
|
8
|
+
borderColor: `${colorName}`
|
|
9
|
+
});
|
|
6
10
|
const banner = recipe({
|
|
7
11
|
base: [
|
|
8
12
|
{
|
|
@@ -20,17 +24,29 @@ const banner = recipe({
|
|
|
20
24
|
compact: atoms({ padding: "xxs" })
|
|
21
25
|
},
|
|
22
26
|
type: {
|
|
23
|
-
success: boxColors
|
|
24
|
-
warning: boxColors
|
|
25
|
-
error: boxColors
|
|
26
|
-
info: boxColors
|
|
27
|
+
success: boxColors("success"),
|
|
28
|
+
warning: boxColors("warning"),
|
|
29
|
+
error: boxColors("error"),
|
|
30
|
+
info: boxColors("info")
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
const icon = recipe({
|
|
35
|
+
variants: {
|
|
36
|
+
type: {
|
|
37
|
+
success: atoms({ color: "success" }),
|
|
38
|
+
warning: atoms({ color: "warning" }),
|
|
39
|
+
error: atoms({ color: "error" }),
|
|
40
|
+
info: atoms({ color: "info" })
|
|
27
41
|
}
|
|
28
42
|
}
|
|
29
43
|
});
|
|
30
44
|
const mainContentContainer = recipe({
|
|
31
|
-
base:
|
|
32
|
-
|
|
33
|
-
|
|
45
|
+
base: [
|
|
46
|
+
{
|
|
47
|
+
flex: 1
|
|
48
|
+
}
|
|
49
|
+
],
|
|
34
50
|
variants: {
|
|
35
51
|
density: {
|
|
36
52
|
default: atoms({ marginLeft: "s" }),
|
|
@@ -49,6 +65,7 @@ export {
|
|
|
49
65
|
banner,
|
|
50
66
|
bannerHeading,
|
|
51
67
|
closeButton,
|
|
68
|
+
icon,
|
|
52
69
|
mainContentContainer,
|
|
53
70
|
messageContainer,
|
|
54
71
|
textButton
|
|
@@ -12,5 +12,13 @@ export interface AlertBannerProps {
|
|
|
12
12
|
headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
|
|
13
13
|
className?: string | undefined;
|
|
14
14
|
}
|
|
15
|
+
/** An alert banner displays an important and high-signal message, and provides actions for users to address (or dismiss the banner). They’re meant to be noticed and often requires a user action to be dismissed.
|
|
16
|
+
|
|
17
|
+
Text is required for all alert banners. The message should be concise and, if applicable, describe the next step that a user can take.
|
|
18
|
+
|
|
19
|
+
Title and button with a contextual action are optional.
|
|
20
|
+
|
|
21
|
+
Documentation: [AlertBanner](https://gnist.moller.no/developers/components/latest/?path=/docs/components-feedback-alerts-alertbanner--docs)
|
|
22
|
+
*/
|
|
15
23
|
export declare const AlertBanner: ({ type, heading, message, dismiss, action, density, headingLevel, className, }: AlertBannerProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
24
|
//# sourceMappingURL=AlertBanner.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertBanner.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/alerts/AlertBanner.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,YAAY,EAEf,uCAAmD;
|
|
1
|
+
{"version":3,"file":"AlertBanner.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/alerts/AlertBanner.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,YAAY,EAEf,uCAAmD;AAcpD,MAAM,WAAW,gBAAgB;IAC7B,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,CAAC;KACvB,CAAC;IACF,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC;AAID;;;;;;;GAOG;AAEH,eAAO,MAAM,WAAW,mFASrB,gBAAgB,4CA8BlB,CAAC"}
|
|
@@ -15,11 +15,11 @@ import "../../actions/buttons/DangerButton.js";
|
|
|
15
15
|
import "../../actions/buttons/GhostButton.js";
|
|
16
16
|
import { TextButton } from "../../actions/buttons/TextButton.js";
|
|
17
17
|
import { IconButton } from "../../actions/buttons/IconButton.js";
|
|
18
|
-
import { bannerHeading, banner, mainContentContainer, closeButton, messageContainer, textButton } from "./AlertBanner.css.js";
|
|
18
|
+
import { bannerHeading, banner, icon, mainContentContainer, closeButton, messageContainer, textButton } from "./AlertBanner.css.js";
|
|
19
19
|
const BannerHeading = component("BannerHeading", bannerHeading, "h2");
|
|
20
20
|
const AlertBanner = ({ type, heading, message, dismiss, action, density = "default", headingLevel = "h2", className }) => {
|
|
21
21
|
const text = useTranslation((t) => t.components.feedback.alerts);
|
|
22
|
-
return jsxs("div", { className: classNames(className, banner({ type, density })), children: [jsx(Icon, { type, icon: type }), jsxs("div", { className: mainContentContainer({ density }), children: [heading && jsx(BannerHeading, { "$as": headingLevel, children: heading }), dismiss && jsx(IconButton, { className: closeButton, icon: "close", label: text.dismissLabel, onClick: dismiss }), jsx(TextContainer, { className: messageContainer, children: message }), action && jsx(TextButton, { className: textButton, onClick: action.onClick, children: action.label })] })] });
|
|
22
|
+
return jsxs("div", { className: classNames(className, banner({ type, density })), children: [jsx(Icon, { type, icon: type, className: icon({ type }) }), jsxs("div", { className: mainContentContainer({ density }), children: [heading && jsx(BannerHeading, { "$as": headingLevel, children: heading }), dismiss && jsx(IconButton, { className: closeButton, icon: "close", label: text.dismissLabel, onClick: dismiss }), jsx(TextContainer, { className: messageContainer, children: message }), action && jsx(TextButton, { className: textButton, onClick: action.onClick, children: action.label })] })] });
|
|
23
23
|
};
|
|
24
24
|
export {
|
|
25
25
|
AlertBanner
|
|
@@ -3,6 +3,11 @@ interface LoadingSpinnerProps {
|
|
|
3
3
|
withoutDelay?: boolean;
|
|
4
4
|
delegated?: React.HTMLAttributes<HTMLDivElement>;
|
|
5
5
|
}
|
|
6
|
+
/**
|
|
7
|
+
* A loading spinner that can be used to indicate that a page or component is loading.
|
|
8
|
+
*
|
|
9
|
+
* Documentation: [LoadingSpinner](https://gnist.moller.no/developers/components/latest/?path=/docs/components-feedback-loaders-loadingspinner--docs)
|
|
10
|
+
* */
|
|
6
11
|
export declare const LoadingSpinner: ({ isFullScreen, withoutDelay, delegated, }: LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
7
12
|
export {};
|
|
8
13
|
//# sourceMappingURL=LoadingSpinner.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingSpinner.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/loaders/LoadingSpinner.tsx"],"names":[],"mappings":"AAIA,UAAU,mBAAmB;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;CACpD;AAID,eAAO,MAAM,cAAc,+CAIxB,mBAAmB,mDAgCrB,CAAC"}
|
|
1
|
+
{"version":3,"file":"LoadingSpinner.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/loaders/LoadingSpinner.tsx"],"names":[],"mappings":"AAIA,UAAU,mBAAmB;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;CACpD;AAID;;;;KAIK;AAEL,eAAO,MAAM,cAAc,+CAIxB,mBAAmB,mDAgCrB,CAAC"}
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
/** Lozenges are used to highlight an item's status for quick recognition or to give additional fast short information such as additional price or time.
|
|
2
|
+
*
|
|
3
|
+
* Documentation: [Lozenge](https://gnist.moller.no/developers/components/latest/?path=/docs/components-feedback-notifications-lozenge--docs)
|
|
4
|
+
* */
|
|
1
5
|
export declare const Lozenge: import("@gnist/component-utils").VanillaRecipeComponent<import("react").ElementType, "span", import("@gnist/component-utils").VariantSelection<{
|
|
2
6
|
colorVariant: {
|
|
3
7
|
primary: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Lozenge.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/notifications/Lozenge.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;GAA8C,CAAC"}
|
|
1
|
+
{"version":3,"file":"Lozenge.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/notifications/Lozenge.tsx"],"names":[],"mappings":"AAGA;;;KAGK;AAEL,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;GAA8C,CAAC"}
|
|
@@ -6,6 +6,12 @@ interface ProgressBarProps {
|
|
|
6
6
|
size?: "small" | "medium" | "large";
|
|
7
7
|
}
|
|
8
8
|
export declare const ProgressBarComponent: React.FC<ProgressBarProps>;
|
|
9
|
+
/**
|
|
10
|
+
* Progress bars are used to show the progress of a task or process.
|
|
11
|
+
* They are used to show the user how far along they are in a process.
|
|
12
|
+
*
|
|
13
|
+
* Documentation: [ProgressBar](https://gnist.moller.no/developers/components/latest/?path=/docs/components-feedback-progress-progressbar--docs)
|
|
14
|
+
*/
|
|
9
15
|
export declare const ProgressBar: import("@gnist/component-utils").VanillaComponent<import("react").ElementType, import("react").FC<ProgressBarProps>>;
|
|
10
16
|
export {};
|
|
11
17
|
//# sourceMappingURL=ProgressBar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/progress/ProgressBar.tsx"],"names":[],"mappings":"AAUA,UAAU,gBAAgB;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACvC;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA0C3D,CAAC;AAEF,eAAO,MAAM,WAAW,sHAIvB,CAAC"}
|
|
1
|
+
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/progress/ProgressBar.tsx"],"names":[],"mappings":"AAUA,UAAU,gBAAgB;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACvC;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA0C3D,CAAC;AAEF;;;;;GAKG;AAEH,eAAO,MAAM,WAAW,sHAIvB,CAAC"}
|
|
@@ -2,6 +2,8 @@ import { SelectBaseProps } from "./SelectBase.js";
|
|
|
2
2
|
export type MultiSelectProps = SelectBaseProps<string[]>;
|
|
3
3
|
/**
|
|
4
4
|
Multi selects allow our users to choose one to many options from a list, presented in a dropdown. We typically see these select-inputs in forms.
|
|
5
|
+
|
|
6
|
+
Documentation: [MultiSelect](https://gnist.moller.no/developers/components/latest/?path=/docs/components-inputs-dropdowns-multiselect--docs)
|
|
5
7
|
*/
|
|
6
8
|
export declare const MultiSelect: React.FC<MultiSelectProps>;
|
|
7
9
|
//# sourceMappingURL=MultiSelect.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdowns/MultiSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE9D,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC,MAAM,EAAE,CAAC,CAAC;AAEzD
|
|
1
|
+
{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdowns/MultiSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE9D,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC,MAAM,EAAE,CAAC,CAAC;AAEzD;;;;GAIG;AAEH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAIlD,CAAC"}
|
|
@@ -4,6 +4,8 @@ export type SingleSelectProps = SelectBaseProps<string>;
|
|
|
4
4
|
Single select allows users to select one item from a predefined list of options, presented in a dropdown. We typically see selects in forms.
|
|
5
5
|
|
|
6
6
|
When the user opens the list, the first option is selected, and as the user hovers or arrows down the options, selected options are highlighted. The single select can be used with or without leading icons in the item list.
|
|
7
|
+
|
|
8
|
+
Documentation: [SingleSelect](https://gnist.moller.no/developers/components/latest/?path=/docs/components-inputs-dropdowns-singleselect--docs)
|
|
7
9
|
*/
|
|
8
10
|
export declare const SingleSelect: React.FC<SingleSelectProps>;
|
|
9
11
|
//# sourceMappingURL=SingleSelect.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SingleSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdowns/SingleSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE9D,MAAM,MAAM,iBAAiB,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;AAExD
|
|
1
|
+
{"version":3,"file":"SingleSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdowns/SingleSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE9D,MAAM,MAAM,iBAAiB,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;AAExD;;;;;;GAMG;AAEH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAIpD,CAAC"}
|
|
@@ -14,6 +14,10 @@ export interface CalendarProps {
|
|
|
14
14
|
/** Decides if the calendar is in a loading state */
|
|
15
15
|
isLoading?: boolean;
|
|
16
16
|
}
|
|
17
|
-
/**
|
|
17
|
+
/**
|
|
18
|
+
* When a user does not know what date they will select, it can be useful to offer a browsing experience using a calendar component. This allows users to see dates organized into weeks and months, or with additional context such as which dates are unavailable for selection.
|
|
19
|
+
*
|
|
20
|
+
* Documentation: [Calendar](https://gnist.moller.no/developers/components/latest/?path=/docs/components-inputs-pickers-calendar--docs)
|
|
21
|
+
*/
|
|
18
22
|
export declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
19
23
|
//# sourceMappingURL=calendar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/pickers/calendar.tsx"],"names":[],"mappings":"AA6SA,MAAM,WAAW,aAAa;IAC1B,mBAAmB;IACnB,QAAQ,EAAE,IAAI,GAAG,SAAS,CAAC;IAC3B,kCAAkC;IAClC,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAC9C,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IAC5C,6BAA6B;IAC7B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,4BAA4B;IAC5B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,wEAAwE;IACxE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAClC,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED
|
|
1
|
+
{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/pickers/calendar.tsx"],"names":[],"mappings":"AA6SA,MAAM,WAAW,aAAa;IAC1B,mBAAmB;IACnB,QAAQ,EAAE,IAAI,GAAG,SAAS,CAAC;IAC3B,kCAAkC;IAClC,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAC9C,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IAC5C,6BAA6B;IAC7B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,4BAA4B;IAC5B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,wEAAwE;IACxE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAClC,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;GAIG;AAEH,eAAO,MAAM,QAAQ,0GAyHnB,CAAC"}
|
|
@@ -25,6 +25,8 @@ These should be used instead of multi-line fields on the web.
|
|
|
25
25
|
|
|
26
26
|
_Accessibility note:_ The leading/trailing icon and counter text will not be read by screen readers.
|
|
27
27
|
If they are used, you must ensure the label and helper text in combination adequately describe the field without them.
|
|
28
|
+
|
|
29
|
+
Documentation: [TextArea](https://gnist.moller.no/developers/components/latest/?path=/docs/components-inputs-textfields-textarea--docs)
|
|
28
30
|
*/
|
|
29
31
|
export declare const TextArea: import("react").ForwardRefExoticComponent<TextInputProps & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "placeholder"> & {
|
|
30
32
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/textFields/TextArea.tsx"],"names":[],"mappings":"AAKA,OAAO,EAA4B,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAezE,OAAO,EAGH,cAAc,EAEjB,MAAM,cAAc,CAAC;AAGtB,MAAM,MAAM,aAAa,GAAG,cAAc,GACtC,IAAI,CACA,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,aAAa,GAAG,OAAO,CAC1B,GAAG;IACA;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEN
|
|
1
|
+
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/textFields/TextArea.tsx"],"names":[],"mappings":"AAKA,OAAO,EAA4B,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAezE,OAAO,EAGH,cAAc,EAEjB,MAAM,cAAc,CAAC;AAGtB,MAAM,MAAM,aAAa,GAAG,cAAc,GACtC,IAAI,CACA,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,aAAa,GAAG,OAAO,CAC1B,GAAG;IACA;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEN;;;;;;;;;;;EAWE;AACF,eAAO,MAAM,QAAQ;IA5Bb;;;;;;;OAOG;kBACW,MAAM;IACpB;;;OAGG;mBACY,MAAM;mDAgK3B,CAAC;AAEH,eAAO,MAAM,SAAS,UAAW,MAAM,OAAO,MAAM,WAMjC,CAAC;AAEpB,eAAO,MAAM,cAAc,UAAW,MAAM,OAAO,MAAM,WACtB,CAAC"}
|
|
@@ -15,7 +15,9 @@ This single line variant displays only one line of text, and is used to allow th
|
|
|
15
15
|
In addition to the attributes listed here, it also accepts the [same attributes as the HTML input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes).
|
|
16
16
|
|
|
17
17
|
_Accessibility note:_ The leading/trailing icon and prefix/suffix text will not be read by screen readers. If they are used, you must ensure the label and helper text in combination adequately describe the field without them.
|
|
18
|
-
|
|
18
|
+
|
|
19
|
+
Documentation: [TextField](https://gnist.moller.no/developers/components/latest/?path=/docs/components-inputs-textfields-textfield--docs)
|
|
20
|
+
*/
|
|
19
21
|
export declare const TextField: import("react").ForwardRefExoticComponent<TextInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "placeholder"> & {
|
|
20
22
|
/**
|
|
21
23
|
* Input type
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/textFields/TextField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA4B,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAetE,OAAO,EAGH,cAAc,EAEjB,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,cAAc,GAAG,cAAc,GACvC,IAAI,CACA,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,aAAa,GAAG,OAAO,GAAG,MAAM,CACnC,GAAG;IACA;;;OAGG;IACH,IAAI,CAAC,EACC,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,GACN,KAAK,GACL,UAAU,GACV,QAAQ,GACR,MAAM,GACN,MAAM,CAAC;CAChB,CAAC;AAEN
|
|
1
|
+
{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/textFields/TextField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA4B,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAetE,OAAO,EAGH,cAAc,EAEjB,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,cAAc,GAAG,cAAc,GACvC,IAAI,CACA,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,aAAa,GAAG,OAAO,GAAG,MAAM,CACnC,GAAG;IACA;;;OAGG;IACH,IAAI,CAAC,EACC,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,GACN,KAAK,GACL,UAAU,GACV,QAAQ,GACR,MAAM,GACN,MAAM,CAAC;CAChB,CAAC;AAEN;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS;IA3Bd;;;OAGG;WAEG,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,GACN,KAAK,GACL,UAAU,GACV,QAAQ,GACR,MAAM,GACN,MAAM;mDAsJlB,CAAC"}
|
|
@@ -20,6 +20,8 @@ type AccordionProps = {
|
|
|
20
20
|
* To facilitate different use cases, the Accordion has some props that can be used to customize the component.
|
|
21
21
|
* More importantly, the Accordion has a head prop that can be used to pass in either a string or any React node.
|
|
22
22
|
* This is useful when you want to customize the head of the accordion. Same goes for the children prop.
|
|
23
|
+
*
|
|
24
|
+
* Documentation: [Accordion](https://gnist.moller.no/developers/components/latest/?path=/docs/components-surfaces-accordion--docs)
|
|
23
25
|
*/
|
|
24
26
|
export declare const Accordion: import("@gnist/component-utils").VanillaRecipeComponent<import("react").ElementType, import("react").ForwardRefExoticComponent<AccordionProps & import("react").RefAttributes<HTMLDetailsElement>>, import("@gnist/component-utils").VariantSelection<{
|
|
25
27
|
withDivider: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/accordion/Accordion.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA4B,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5D,KAAK,cAAc,GAAG;IAClB,oFAAoF;IACpF,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,oFAAoF;IACpF,QAAQ,EAAE,SAAS,CAAC;IACpB,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yJAAyJ;IACzJ,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8GAA8G;IAC9G,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AA6BF
|
|
1
|
+
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/accordion/Accordion.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA4B,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5D,KAAK,cAAc,GAAG;IAClB,oFAAoF;IACpF,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,oFAAoF;IACpF,QAAQ,EAAE,SAAS,CAAC;IACpB,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yJAAyJ;IACzJ,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8GAA8G;IAC9G,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AA6BF;;;;;;;;;GASG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;GAIrB,CAAC"}
|
|
@@ -7,6 +7,8 @@ The component is empty and the content and layout can be designed for each spesi
|
|
|
7
7
|
Card layouts can vary to support the types of content they contain. Imagery, icons, title, supporting texts and actions are optional elements that can be used.
|
|
8
8
|
|
|
9
9
|
`ActionCard` is meant for actions with an `onClick` attribute. If a link is desired, use `LinkCard` instead.
|
|
10
|
+
|
|
11
|
+
Documentation: [ActionCard](https://gnist.moller.no/developers/components/latest/?path=/docs/components-surfaces-cards-actioncard--docs)
|
|
10
12
|
*/
|
|
11
13
|
export declare const ActionCard: ForwardRefExoticComponent<ActionCardProps<ElementType>>;
|
|
12
14
|
//# sourceMappingURL=ActionCard.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/ActionCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAGH,WAAW,EAGX,yBAAyB,EAC5B,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAMjD
|
|
1
|
+
{"version":3,"file":"ActionCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/ActionCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAGH,WAAW,EAGX,yBAAyB,EAC5B,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAMjD;;;;;;;;;EASE;AACF,eAAO,MAAM,UAAU,EAAE,yBAAyB,CAC9C,eAAe,CAAC,WAAW,CAAC,CA6B9B,CAAC"}
|
|
@@ -16,6 +16,8 @@ Checkbox cards allow you to present an option and optionally provide additional
|
|
|
16
16
|
The checkbox card includes a checkbox, label, and description. The card is clickable from top to above the description text.
|
|
17
17
|
|
|
18
18
|
The card serves to draw extra attention to a checkbox selection in the user interface.
|
|
19
|
+
|
|
20
|
+
Documentation: [CheckboxCard](https://gnist.moller.no/developers/components/latest/?path=/docs/components-surfaces-cards-checkboxcard--docs)
|
|
19
21
|
*/
|
|
20
22
|
export declare const CheckboxCard: React.ForwardRefExoticComponent<Omit<CheckboxCardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
21
23
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/CheckboxCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,aAAa,EAChB,MAAM,6CAA6C,CAAC;AACrD,OAAO,EACH,yBAAyB,EAGzB,kBAAkB,EACrB,MAAM,6BAA6B,CAAC;AAKrC,UAAU,iBAAkB,SAAQ,kBAAkB;IAClD;;OAEG;IACH,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,IAAI,CAAC,yBAAyB,EAAE,KAAK,CAAC,CAAC;CAC1D;AAED
|
|
1
|
+
{"version":3,"file":"CheckboxCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/CheckboxCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,aAAa,EAChB,MAAM,6CAA6C,CAAC;AACrD,OAAO,EACH,yBAAyB,EAGzB,kBAAkB,EACrB,MAAM,6BAA6B,CAAC;AAKrC,UAAU,iBAAkB,SAAQ,kBAAkB;IAClD;;OAEG;IACH,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,IAAI,CAAC,yBAAyB,EAAE,KAAK,CAAC,CAAC;CAC1D;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,yBAAyB,CACtD,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAqDtE,CAAC"}
|
|
@@ -6,6 +6,7 @@ The component is empty and the content and layout can be designed for each spesi
|
|
|
6
6
|
|
|
7
7
|
Card layouts can vary to support the types of content they contain. Imagery, icons, title, supporting texts and actions are optional elements that can be used.
|
|
8
8
|
|
|
9
|
+
Documentation: [InfoCard](https://gnist.moller.no/developers/components/latest/?path=/docs/components-surfaces-cards-infocard--docs)
|
|
9
10
|
*/
|
|
10
11
|
export declare const InfoCard: ForwardRefExoticComponent<InfoCardProps<ElementType>>;
|
|
11
12
|
//# sourceMappingURL=InfoCard.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/InfoCard.tsx"],"names":[],"mappings":"AACA,OAAO,EACH,WAAW,EAGX,yBAAyB,EAC5B,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAI/C
|
|
1
|
+
{"version":3,"file":"InfoCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/InfoCard.tsx"],"names":[],"mappings":"AACA,OAAO,EACH,WAAW,EAGX,yBAAyB,EAC5B,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAI/C;;;;;;;EAOE;AACF,eAAO,MAAM,QAAQ,EAAE,yBAAyB,CAAC,aAAa,CAAC,WAAW,CAAC,CAsBrE,CAAC"}
|
|
@@ -7,6 +7,8 @@ The component is empty and the content and layout can be designed for each spesi
|
|
|
7
7
|
Card layouts can vary to support the types of content they contain. Imagery, icons, title, supporting texts and actions are optional elements that can be used.
|
|
8
8
|
|
|
9
9
|
`LinkCard` is meant for links with a `href` attribute. If an `onClick` action is desired, use `ActionCard` instead.
|
|
10
|
+
|
|
11
|
+
Documentation: [LinkCard](https://gnist.moller.no/developers/components/latest/?path=/docs/components-surfaces-cards-linkcard--docs)
|
|
10
12
|
*/
|
|
11
13
|
export declare const LinkCard: ForwardRefExoticComponent<LinkCardProps<ElementType>>;
|
|
12
14
|
//# sourceMappingURL=LinkCard.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/LinkCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAGH,WAAW,EAGX,yBAAyB,EAC5B,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAK/C
|
|
1
|
+
{"version":3,"file":"LinkCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/LinkCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAGH,WAAW,EAGX,yBAAyB,EAC5B,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAK/C;;;;;;;;;EASE;AAEF,eAAO,MAAM,QAAQ,EAAE,yBAAyB,CAAC,aAAa,CAAC,WAAW,CAAC,CA6BrE,CAAC"}
|
|
@@ -20,6 +20,8 @@ Radio cards allow you to present an option and optionally provide additional inf
|
|
|
20
20
|
The radio card includes a radio button, label, and description. The card is clickable from top to above the description text.
|
|
21
21
|
|
|
22
22
|
The card serves to draw extra attention to a radio button selection in the user interface.
|
|
23
|
+
|
|
24
|
+
Documentation: [RadioCard](https://gnist.moller.no/developers/components/latest/?path=/docs/components-surfaces-cards-radiocard--docs)
|
|
23
25
|
*/
|
|
24
26
|
export declare const RadioCard: React.ForwardRefExoticComponent<Omit<RadioCardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
25
27
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/RadioCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,gBAAgB,EACnB,MAAM,gDAAgD,CAAC;AACxD,OAAO,EACH,yBAAyB,EAGzB,kBAAkB,EACrB,MAAM,6BAA6B,CAAC;AAKrC,UAAU,cAAe,SAAQ,kBAAkB;IAC/C;;OAEG;IACH,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACvC;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC/B;;OAEG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAC;CAC1C;AAED
|
|
1
|
+
{"version":3,"file":"RadioCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/RadioCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,gBAAgB,EACnB,MAAM,gDAAgD,CAAC;AACxD,OAAO,EACH,yBAAyB,EAGzB,kBAAkB,EACrB,MAAM,6BAA6B,CAAC;AAKrC,UAAU,cAAe,SAAQ,kBAAkB;IAC/C;;OAEG;IACH,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACvC;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC/B;;OAEG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAC;CAC1C;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,yBAAyB,CACnD,IAAI,CAAC,cAAc,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAkDnE,CAAC"}
|
|
@@ -24,6 +24,18 @@ export interface ModalProps {
|
|
|
24
24
|
/** Background color of the modal. */
|
|
25
25
|
backgroundColor?: string;
|
|
26
26
|
}
|
|
27
|
+
/**
|
|
28
|
+
*
|
|
29
|
+
* A modal is a dialog overlay that intentionally interrupts and focuses the user's attention exclusively on an information via a window that is overlaid on primary content.
|
|
30
|
+
*
|
|
31
|
+
* Use modals sparingly and for critical information or tasks that require acknowledgment or completion to return to the task flow, rather than passive notices or information.
|
|
32
|
+
*
|
|
33
|
+
* Small modals are best suited for small screen sizes like phones. Medium size are best for medium breakpoints and large modals are best used for large screens.
|
|
34
|
+
*
|
|
35
|
+
* When the modal appears, the background is dimmed to a 60% black overlay and disabled.
|
|
36
|
+
*
|
|
37
|
+
* Documentation: [Modal](https://gnist.moller.no/developers/components/latest/?path=/docs/components-surfaces-modal--docs)
|
|
38
|
+
*/
|
|
27
39
|
export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
|
|
28
40
|
export {};
|
|
29
41
|
//# sourceMappingURL=Modal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/modal/Modal.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,4CAAsE;AAKjG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAKH,UAAU,EAGb,uBAAmD;AAEpD,UAAU,MAAO,SAAQ,gBAAgB,CAAC,QAAQ,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,UAAU;IACvB,uCAAuC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,8CAA8C;IAC9C,MAAM,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6GAA6G;IAC7G,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uFAAuF;IACvF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+GAA+G;IAC/G,eAAe,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC1C,4BAA4B;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,qCAAqC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAeD,eAAO,MAAM,KAAK,mFA0GhB,CAAC"}
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/modal/Modal.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,4CAAsE;AAKjG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAKH,UAAU,EAGb,uBAAmD;AAEpD,UAAU,MAAO,SAAQ,gBAAgB,CAAC,QAAQ,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,UAAU;IACvB,uCAAuC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,8CAA8C;IAC9C,MAAM,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6GAA6G;IAC7G,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uFAAuF;IACvF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+GAA+G;IAC/G,eAAe,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC1C,4BAA4B;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,qCAAqC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAeD;;;;;;;;;;;GAWG;AAEH,eAAO,MAAM,KAAK,mFA0GhB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gnist/design-system",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.11",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.cjs",
|
|
@@ -113,5 +113,5 @@
|
|
|
113
113
|
"optional": true
|
|
114
114
|
}
|
|
115
115
|
},
|
|
116
|
-
"gitHead": "
|
|
116
|
+
"gitHead": "2a6427b60553e3a9e3492890df3d3ac040e84a86"
|
|
117
117
|
}
|