@danske/sapphire-react-lab 0.87.4 → 0.87.5
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/build/cjs/index.js +14 -12
- package/build/cjs/index.js.map +1 -1
- package/build/esm/AlertDialog/src/AlertDialog.js +14 -12
- package/build/esm/AlertDialog/src/AlertDialog.js.map +1 -1
- package/build/esm/FeedbackMessage/src/FeedbackMessage.js +1 -1
- package/build/esm/FeedbackMessage/src/FeedbackMessage.js.map +1 -1
- package/package.json +5 -5
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { useThemeCheck, Dialog } from '@danske/sapphire-react';
|
|
2
|
+
import { useThemeCheck, Dialog, tokens, DialogTitle, Heading, ButtonGroup } from '@danske/sapphire-react';
|
|
3
3
|
import { FeedbackMessage } from '../../FeedbackMessage/src/FeedbackMessage.js';
|
|
4
4
|
|
|
5
5
|
var __defProp = Object.defineProperty;
|
|
@@ -52,20 +52,22 @@ const AlertDialog = React.forwardRef(function AlertDialog2(props, ref) {
|
|
|
52
52
|
role: "alertdialog",
|
|
53
53
|
type: "active",
|
|
54
54
|
size: "extra-small",
|
|
55
|
-
header:
|
|
55
|
+
header: null,
|
|
56
|
+
footer: null,
|
|
56
57
|
content: /* @__PURE__ */ React.createElement(Dialog.Content, null, /* @__PURE__ */ React.createElement(FeedbackMessage, {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
}),
|
|
58
|
+
marginTop: tokens.size.spacing60,
|
|
59
|
+
heading: /* @__PURE__ */ React.createElement(DialogTitle, null, (titleProps) => /* @__PURE__ */ React.createElement(Heading, __spreadValues({
|
|
60
|
+
level: 6
|
|
61
|
+
}, titleProps), heading)),
|
|
61
62
|
variant,
|
|
62
63
|
icon,
|
|
63
|
-
body
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
64
|
+
body,
|
|
65
|
+
actions: /* @__PURE__ */ React.createElement(ButtonGroup, {
|
|
66
|
+
width: "100%",
|
|
67
|
+
stretch: "autoVertical",
|
|
68
|
+
orientation: actionsOrientation
|
|
69
|
+
}, actions)
|
|
70
|
+
}))
|
|
69
71
|
}, rest));
|
|
70
72
|
});
|
|
71
73
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertDialog.js","sources":["../../../../src/AlertDialog/src/AlertDialog.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport {\n Dialog,\n DialogProps,\n SapphireStyleProps,\n useThemeCheck,\n} from '@danske/sapphire-react';\nimport {\n FeedbackMessage,\n SapphireFeedbackMessageProps,\n} from '../../FeedbackMessage';\nimport { AriaModalOverlayProps } from '@react-aria/overlays';\nimport { DOMRef } from '@react-types/shared';\n\nexport type SapphireAlertDialogProps = AriaModalOverlayProps &\n SapphireStyleProps &\n Pick<DialogProps, 'isOpen' | 'onClose'> &\n Omit<SapphireFeedbackMessageProps, 'heading' | 'actions'> & {\n /**\n *\n * @default \"horizontal\"\n */\n actionsOrientation?: 'vertical' | 'horizontal';\n /**\n * The elements that will be rendered in the footer of the dialog.\n */\n actions: ReactNode;\n /**\n * The title of the dialog.\n */\n heading: string;\n };\n\n/**\n * `AlertDialog` is a wrapper component around `Dialog` and allows you to interrupt the user's\n * experience to prompt them for important confirmations. (e.g. deleting something, confirming\n * an important or irreversible choice etc.).\n * Don't use them for less relevant of unnecessary confirmations.\n *\n * The title should be similar to the action that prompted the user to open it.\n */\nexport const AlertDialog = React.forwardRef(function AlertDialog(\n props: SapphireAlertDialogProps,\n ref: DOMRef<HTMLDivElement>\n) {\n useThemeCheck();\n\n const {\n variant = 'neutral',\n icon,\n body,\n actionsOrientation = 'horizontal',\n actions,\n heading,\n ...rest\n } = props;\n\n return (\n <Dialog\n ref={ref}\n role=\"alertdialog\"\n type=\"active\"\n size=\"extra-small\"\n header={
|
|
1
|
+
{"version":3,"file":"AlertDialog.js","sources":["../../../../src/AlertDialog/src/AlertDialog.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport {\n ButtonGroup,\n Dialog,\n DialogProps,\n Heading,\n SapphireStyleProps,\n tokens,\n useThemeCheck,\n} from '@danske/sapphire-react';\nimport {\n FeedbackMessage,\n SapphireFeedbackMessageProps,\n} from '../../FeedbackMessage';\nimport { AriaModalOverlayProps } from '@react-aria/overlays';\nimport { DOMRef } from '@react-types/shared';\nimport { DialogTitle } from '@danske/sapphire-react';\n\nexport type SapphireAlertDialogProps = AriaModalOverlayProps &\n SapphireStyleProps &\n Pick<DialogProps, 'isOpen' | 'onClose'> &\n Omit<SapphireFeedbackMessageProps, 'heading' | 'actions'> & {\n /**\n *\n * @default \"horizontal\"\n */\n actionsOrientation?: 'vertical' | 'horizontal';\n /**\n * The elements that will be rendered in the footer of the dialog.\n */\n actions: ReactNode;\n /**\n * The title of the dialog.\n */\n heading: string;\n };\n\n/**\n * `AlertDialog` is a wrapper component around `Dialog` and allows you to interrupt the user's\n * experience to prompt them for important confirmations. (e.g. deleting something, confirming\n * an important or irreversible choice etc.).\n * Don't use them for less relevant of unnecessary confirmations.\n *\n * The title should be similar to the action that prompted the user to open it.\n */\nexport const AlertDialog = React.forwardRef(function AlertDialog(\n props: SapphireAlertDialogProps,\n ref: DOMRef<HTMLDivElement>\n) {\n useThemeCheck();\n\n const {\n variant = 'neutral',\n icon,\n body,\n actionsOrientation = 'horizontal',\n actions,\n heading,\n ...rest\n } = props;\n\n return (\n <Dialog\n ref={ref}\n role=\"alertdialog\"\n type=\"active\"\n size=\"extra-small\"\n header={null}\n footer={null}\n content={\n <Dialog.Content>\n <FeedbackMessage\n // FIXME: change to `margin` when Dialog is refactored in UC-3020\n marginTop={tokens.size.spacing60}\n heading={\n <DialogTitle>\n {(titleProps) => (\n <Heading level={6} {...titleProps}>\n {heading}\n </Heading>\n )}\n </DialogTitle>\n }\n variant={variant}\n icon={icon}\n body={body}\n actions={\n <ButtonGroup\n width=\"100%\"\n stretch=\"autoVertical\"\n orientation={actionsOrientation}\n >\n {actions}\n </ButtonGroup>\n }\n />\n </Dialog.Content>\n }\n {...rest}\n />\n );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CO,MAAM,WAAc,GAAA,KAAA,CAAM,UAAW,CAAA,SAAA,YAAA,CAC1C,OACA,GACA,EAAA;AACA,EAAA,aAAA,EAAA,CAAA;AAEA,EAAA,MAQI,EAPF,GAAA,KAAA,EAAA;AAAA,IAAU,OAAA,GAAA,SAAA;AAAA,IACV,IAAA;AAAA,IACA,IAAA;AAAA,IACA,kBAAqB,GAAA,YAAA;AAAA,IACrB,OAAA;AAAA,IACA,OAAA;AAAA,GAEE,GAAA,EAAA,EADC,iBACD,EADC,EAAA;AAAA,IANH,SAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAA;AAAA,IACA,oBAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,GAAA,CAAA,CAAA;AAIF,EAAA,2CACG,MAAD,EAAA,cAAA,CAAA;AAAA,IACE,GAAA;AAAA,IACA,IAAK,EAAA,aAAA;AAAA,IACL,IAAK,EAAA,QAAA;AAAA,IACL,IAAK,EAAA,aAAA;AAAA,IACL,MAAQ,EAAA,IAAA;AAAA,IACR,MAAQ,EAAA,IAAA;AAAA,IACR,yBACG,KAAA,CAAA,aAAA,CAAA,MAAA,CAAO,OAAR,EAAA,IAAA,sCACG,eAAD,EAAA;AAAA,MAEE,SAAA,EAAW,OAAO,IAAK,CAAA,SAAA;AAAA,MACvB,yBACG,KAAA,CAAA,aAAA,CAAA,WAAA,EAAD,MACG,CAAC,UAAA,yCACC,OAAD,EAAA,cAAA,CAAA;AAAA,QAAS,KAAO,EAAA,CAAA;AAAA,OAAA,EAAO,UACpB,CAAA,EAAA,OAAA,CAAA,CAAA;AAAA,MAKT,OAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA,sCACG,WAAD,EAAA;AAAA,QACE,KAAM,EAAA,MAAA;AAAA,QACN,OAAQ,EAAA,cAAA;AAAA,QACR,WAAa,EAAA,kBAAA;AAAA,OAEZ,EAAA,OAAA,CAAA;AAAA,KAAA,CAAA,CAAA;AAAA,GAMP,EAAA,IAAA,CAAA,CAAA,CAAA;AAAA,CAAA;;;;"}
|
|
@@ -77,7 +77,7 @@ const FeedbackMessage = (_a) => {
|
|
|
77
77
|
}), /* @__PURE__ */ React.createElement("div", {
|
|
78
78
|
className: styles["sapphire-feedback-message__content"]
|
|
79
79
|
}, typeof heading === "string" ? /* @__PURE__ */ React.createElement(Heading, {
|
|
80
|
-
level:
|
|
80
|
+
level: 6
|
|
81
81
|
}, heading) : heading, /* @__PURE__ */ React.createElement("section", {
|
|
82
82
|
className: styles["sapphire-feedback-message__body"]
|
|
83
83
|
}, body)), actions);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FeedbackMessage.js","sources":["../../../../src/FeedbackMessage/src/FeedbackMessage.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport {\n AlertCircle,\n AlertTriangle,\n Bell,\n CheckMarkCircle,\n} from '@danske/sapphire-icons/react';\nimport {\n Heading,\n SapphireStyleProps,\n useSapphireStyleProps,\n useThemeCheck,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/feedbackMessage/feedbackMessage.module.css';\nimport { Avatar } from '../../Avatar';\n\nexport type FeedbackMessageVariant =\n | 'success'\n | 'error'\n | 'warning'\n | 'informative'\n | 'neutral';\n\nexport interface SapphireFeedbackMessageProps extends SapphireStyleProps {\n /**\n * Heading content, rendered in a sapphire Heading component.\n */\n heading: React.ReactNode | string;\n /**\n * The type of message.\n * The 'error' and 'success' are meant to attract more attention.\n *\n * @default 'neutral'\n */\n variant?: FeedbackMessageVariant;\n /**\n * Optional icon to override the default icon for the message type.\n */\n icon?: React.ReactNode;\n /**\n * Optional description, rendered as a section below heading.\n */\n body?: React.ReactNode;\n /**\n * Optional actions, rendered at the bottom. Use {@link ButtonGroup}\n * for the content.\n */\n actions?: React.ReactNode;\n}\n\nconst getColor = (variant: FeedbackMessageVariant) => {\n switch (variant) {\n case 'success':\n return 'positive';\n case 'error':\n return 'negative';\n case 'neutral':\n return 'passive';\n default:\n return variant;\n }\n};\n\nconst getIcon = (variant: FeedbackMessageVariant, icon?: React.ReactNode) => {\n if (icon) {\n return icon;\n }\n\n switch (variant) {\n case 'success':\n return <CheckMarkCircle />;\n case 'error':\n return <AlertCircle />;\n case 'warning':\n return <AlertTriangle />;\n case 'informative':\n return <Bell />;\n default:\n return null;\n }\n};\n\n/**\n * Implements layout and style of a feedback message.\n */\nexport const FeedbackMessage = ({\n heading,\n body,\n actions,\n variant = 'neutral',\n icon,\n ...otherProps\n}: SapphireFeedbackMessageProps): JSX.Element => {\n useThemeCheck();\n const {\n styleProps: { style, className },\n } = useSapphireStyleProps(otherProps);\n\n return (\n <div\n className={clsx(styles['sapphire-feedback-message'], className)}\n style={style}\n >\n {variant !== 'neutral' && (\n <Avatar\n color={getColor(variant)}\n size=\"extraLarge\"\n icon={getIcon(variant, icon)}\n />\n )}\n <div className={styles['sapphire-feedback-message__content']}>\n {typeof heading === 'string' ? (\n <Heading level={
|
|
1
|
+
{"version":3,"file":"FeedbackMessage.js","sources":["../../../../src/FeedbackMessage/src/FeedbackMessage.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport {\n AlertCircle,\n AlertTriangle,\n Bell,\n CheckMarkCircle,\n} from '@danske/sapphire-icons/react';\nimport {\n Heading,\n SapphireStyleProps,\n useSapphireStyleProps,\n useThemeCheck,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/feedbackMessage/feedbackMessage.module.css';\nimport { Avatar } from '../../Avatar';\n\nexport type FeedbackMessageVariant =\n | 'success'\n | 'error'\n | 'warning'\n | 'informative'\n | 'neutral';\n\nexport interface SapphireFeedbackMessageProps extends SapphireStyleProps {\n /**\n * Heading content, rendered in a sapphire Heading component.\n */\n heading: React.ReactNode | string;\n /**\n * The type of message.\n * The 'error' and 'success' are meant to attract more attention.\n *\n * @default 'neutral'\n */\n variant?: FeedbackMessageVariant;\n /**\n * Optional icon to override the default icon for the message type.\n */\n icon?: React.ReactNode;\n /**\n * Optional description, rendered as a section below heading.\n */\n body?: React.ReactNode;\n /**\n * Optional actions, rendered at the bottom. Use {@link ButtonGroup}\n * for the content.\n */\n actions?: React.ReactNode;\n}\n\nconst getColor = (variant: FeedbackMessageVariant) => {\n switch (variant) {\n case 'success':\n return 'positive';\n case 'error':\n return 'negative';\n case 'neutral':\n return 'passive';\n default:\n return variant;\n }\n};\n\nconst getIcon = (variant: FeedbackMessageVariant, icon?: React.ReactNode) => {\n if (icon) {\n return icon;\n }\n\n switch (variant) {\n case 'success':\n return <CheckMarkCircle />;\n case 'error':\n return <AlertCircle />;\n case 'warning':\n return <AlertTriangle />;\n case 'informative':\n return <Bell />;\n default:\n return null;\n }\n};\n\n/**\n * Implements layout and style of a feedback message.\n */\nexport const FeedbackMessage = ({\n heading,\n body,\n actions,\n variant = 'neutral',\n icon,\n ...otherProps\n}: SapphireFeedbackMessageProps): JSX.Element => {\n useThemeCheck();\n const {\n styleProps: { style, className },\n } = useSapphireStyleProps(otherProps);\n\n return (\n <div\n className={clsx(styles['sapphire-feedback-message'], className)}\n style={style}\n >\n {variant !== 'neutral' && (\n <Avatar\n color={getColor(variant)}\n size=\"extraLarge\"\n icon={getIcon(variant, icon)}\n />\n )}\n <div className={styles['sapphire-feedback-message__content']}>\n {typeof heading === 'string' ? (\n <Heading level={6}>{heading}</Heading>\n ) : (\n heading\n )}\n <section className={styles['sapphire-feedback-message__body']}>\n {body}\n </section>\n </div>\n {actions}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmDA,MAAM,QAAA,GAAW,CAAC,OAAoC,KAAA;AACpD,EAAQ,QAAA,OAAA;AAAA,IACD,KAAA,SAAA;AACH,MAAO,OAAA,UAAA,CAAA;AAAA,IACJ,KAAA,OAAA;AACH,MAAO,OAAA,UAAA,CAAA;AAAA,IACJ,KAAA,SAAA;AACH,MAAO,OAAA,SAAA,CAAA;AAAA,IAAA;AAEP,MAAO,OAAA,OAAA,CAAA;AAAA,GAAA;AAAA,CAAA,CAAA;AAIb,MAAM,OAAA,GAAU,CAAC,OAAA,EAAiC,IAA2B,KAAA;AAC3E,EAAA,IAAI,IAAM,EAAA;AACR,IAAO,OAAA,IAAA,CAAA;AAAA,GAAA;AAGT,EAAQ,QAAA,OAAA;AAAA,IACD,KAAA,SAAA;AACH,MAAA,2CAAQ,eAAD,EAAA,IAAA,CAAA,CAAA;AAAA,IACJ,KAAA,OAAA;AACH,MAAA,2CAAQ,WAAD,EAAA,IAAA,CAAA,CAAA;AAAA,IACJ,KAAA,SAAA;AACH,MAAA,2CAAQ,aAAD,EAAA,IAAA,CAAA,CAAA;AAAA,IACJ,KAAA,aAAA;AACH,MAAA,2CAAQ,IAAD,EAAA,IAAA,CAAA,CAAA;AAAA,IAAA;AAEP,MAAO,OAAA,IAAA,CAAA;AAAA,GAAA;AAAA,CAAA,CAAA;AAOA,MAAA,eAAA,GAAkB,CAAC,EAOiB,KAAA;AAPjB,EAC9B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACV,IAAA;AAAA,GAL8B,GAAA,EAAA,EAM3B,uBAN2B,EAM3B,EAAA;AAAA,IALH,SAAA;AAAA,IACA,MAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA;AAAA,IACJ,UAAA,EAAY,EAAE,KAAO,EAAA,SAAA,EAAA;AAAA,GAAA,GACnB,qBAAsB,CAAA,UAAA,CAAA,CAAA;AAE1B,EAAA,2CACG,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,IAAK,CAAA,MAAA,CAAO,2BAA8B,CAAA,EAAA,SAAA,CAAA;AAAA,IACrD,KAAA;AAAA,GAEC,EAAA,OAAA,KAAY,SACX,oBAAA,KAAA,CAAA,aAAA,CAAC,MAAD,EAAA;AAAA,IACE,OAAO,QAAS,CAAA,OAAA,CAAA;AAAA,IAChB,IAAK,EAAA,YAAA;AAAA,IACL,IAAA,EAAM,QAAQ,OAAS,EAAA,IAAA,CAAA;AAAA,GAAA,CAAA,sCAG1B,KAAD,EAAA;AAAA,IAAK,WAAW,MAAO,CAAA,oCAAA,CAAA;AAAA,GAAA,EACpB,OAAO,OAAA,KAAY,QAClB,mBAAA,KAAA,CAAA,aAAA,CAAC,OAAD,EAAA;AAAA,IAAS,KAAO,EAAA,CAAA;AAAA,GAAI,EAAA,OAAA,CAAA,GAEpB,OAEF,kBAAA,KAAA,CAAA,aAAA,CAAC,SAAD,EAAA;AAAA,IAAS,WAAW,MAAO,CAAA,iCAAA,CAAA;AAAA,GAAA,EACxB,IAGJ,CAAA,CAAA,EAAA,OAAA,CAAA,CAAA;AAAA;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@danske/sapphire-react-lab",
|
|
3
|
-
"version": "0.87.
|
|
3
|
+
"version": "0.87.5",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"description": "Experimental React components of the Sapphire Design System from Danske Bank A/S",
|
|
6
6
|
"exports": {
|
|
@@ -25,18 +25,18 @@
|
|
|
25
25
|
},
|
|
26
26
|
"peerDependencies": {
|
|
27
27
|
"@danske/sapphire-icons": "^2.1.0",
|
|
28
|
-
"@danske/sapphire-react": "^3.
|
|
28
|
+
"@danske/sapphire-react": "^3.42.1",
|
|
29
29
|
"react": ">=16.8.0",
|
|
30
30
|
"react-dom": ">=16.8.0"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@danske/sapphire-icons": "^2.1.0",
|
|
34
|
-
"@danske/sapphire-react": "^3.
|
|
34
|
+
"@danske/sapphire-react": "^3.42.1",
|
|
35
35
|
"@types/react-transition-group": "^4.4.5",
|
|
36
36
|
"cross-env": "^7.0.3"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@danske/sapphire-css": "^
|
|
39
|
+
"@danske/sapphire-css": "^32.0.0",
|
|
40
40
|
"@internationalized/date": "^3.5.5",
|
|
41
41
|
"@internationalized/string": "^3.2.3",
|
|
42
42
|
"@react-aria/accordion": "^3.0.0-alpha.31",
|
|
@@ -74,5 +74,5 @@
|
|
|
74
74
|
"clsx": "^1.1.1",
|
|
75
75
|
"react-transition-group": "^4.4.5"
|
|
76
76
|
},
|
|
77
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "f697803e6f03705b063ff5d4c89debde608208db"
|
|
78
78
|
}
|