@artsy/palette 29.2.1 → 29.3.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/dist/elements/ModalDialog/ModalDialog.js +3 -1
- package/dist/elements/ModalDialog/ModalDialog.js.map +1 -1
- package/dist/elements/ModalDialog/ModalDialog.story.js +21 -0
- package/dist/elements/ModalDialog/ModalDialog.story.js.map +1 -1
- package/dist/elements/ModalDialog/ModalDialogContent.d.ts +1 -0
- package/dist/elements/ModalDialog/ModalDialogContent.js +9 -4
- package/dist/elements/ModalDialog/ModalDialogContent.js.map +1 -1
- package/package.json +2 -2
|
@@ -15,7 +15,7 @@ var _Box = require("../Box");
|
|
|
15
15
|
|
|
16
16
|
var _useDidMount = require("../../utils/useDidMount");
|
|
17
17
|
|
|
18
|
-
var _excluded = ["children", "footer", "hasLogo", "leftPanel", "onClose", "rightPanel", "title"],
|
|
18
|
+
var _excluded = ["children", "footer", "hasLogo", "leftPanel", "onClose", "rightPanel", "title", "header"],
|
|
19
19
|
_excluded2 = ["width"];
|
|
20
20
|
|
|
21
21
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -46,6 +46,7 @@ var ModalDialog = function ModalDialog(_ref) {
|
|
|
46
46
|
onClose = _ref.onClose,
|
|
47
47
|
rightPanel = _ref.rightPanel,
|
|
48
48
|
title = _ref.title,
|
|
49
|
+
header = _ref.header,
|
|
49
50
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
50
51
|
|
|
51
52
|
var isMounted = (0, _useDidMount.useDidMount)({
|
|
@@ -77,6 +78,7 @@ var ModalDialog = function ModalDialog(_ref) {
|
|
|
77
78
|
onClose: onClose,
|
|
78
79
|
rightPanel: rightPanel,
|
|
79
80
|
title: title,
|
|
81
|
+
header: header,
|
|
80
82
|
width: "100%",
|
|
81
83
|
style: isMounted ? {
|
|
82
84
|
opacity: 1,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialog.tsx"],"names":["ModalDialog","children","footer","hasLogo","leftPanel","onClose","rightPanel","title","rest","isMounted","clearCallStack","width","boxProps","modalProps","backgroundColor","transition","opacity","transform"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAIA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;AAQO,IAAMA,WAAuC,GAAG,SAA1CA,WAA0C,
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialog.tsx"],"names":["ModalDialog","children","footer","hasLogo","leftPanel","onClose","rightPanel","title","header","rest","isMounted","clearCallStack","width","boxProps","modalProps","backgroundColor","transition","opacity","transform"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAIA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;AAQO,IAAMA,WAAuC,GAAG,SAA1CA,WAA0C,OAUjD;AAAA,MATJC,QASI,QATJA,QASI;AAAA,MARJC,MAQI,QARJA,MAQI;AAAA,MAPJC,OAOI,QAPJA,OAOI;AAAA,MANJC,SAMI,QANJA,SAMI;AAAA,MALJC,OAKI,QALJA,OAKI;AAAA,MAJJC,UAII,QAJJA,UAII;AAAA,MAHJC,KAGI,QAHJA,KAGI;AAAA,MAFJC,MAEI,QAFJA,MAEI;AAAA,MADDC,IACC;;AACJ,MAAMC,SAAS,GAAG,8BAAY;AAAEC,IAAAA,cAAc,EAAE;AAAlB,GAAZ,CAAlB;;AAEA,uBAA6C,wBAAcF,IAAd,CAA7C;AAAA;AAAA;AAAA,MAASG,KAAT,oBAASA,KAAT;AAAA,MAAmBC,QAAnB;AAAA,MAA+BC,UAA/B;;AAEA,sBACE,6BAAC,gBAAD;AACE,IAAA,OAAO,EAAET,OADX;AAEE,IAAA,KAAK,EACHK,SAAS,GACL;AACEK,MAAAA,eAAe,EAAE,0BADnB;AAEEC,MAAAA,UAAU,EAAE;AAFd,KADK,GAKL;AAAED,MAAAA,eAAe,EAAE;AAAnB,KARR;AAUE,IAAA,WAAW,EAAE;AAAEH,MAAAA,KAAK,EAAEA,KAAF,aAAEA,KAAF,cAAEA,KAAF,GAAW;AAAlB;AAVf,KAWME,UAXN,gBAaE,6BAAC,sCAAD;AACE,IAAA,MAAM,EAAEZ,MADV;AAEE,IAAA,OAAO,EAAEC,OAFX;AAGE,IAAA,SAAS,EAAEC,SAHb;AAIE,IAAA,OAAO,EAAEC,OAJX;AAKE,IAAA,UAAU,EAAEC,UALd;AAME,IAAA,KAAK,EAAEC,KANT;AAOE,IAAA,MAAM,EAAEC,MAPV;AAQE,IAAA,KAAK,EAAC,MARR;AASE,IAAA,KAAK,EACHE,SAAS,GACL;AACEO,MAAAA,OAAO,EAAE,CADX;AAEED,MAAAA,UAAU,EAAE;AAFd,KADK,GAKL;AAAEC,MAAAA,OAAO,EAAE,CAAX;AAAcC,MAAAA,SAAS,EAAE;AAAzB;AAfR,KAiBML,QAjBN,GAmBGZ,QAnBH,CAbF,CADF;AAqCD,CApDM;;;AAAMD,W","sourcesContent":["import React from \"react\"\nimport { ModalBase, ModalBaseProps } from \"../Modal\"\nimport {\n ModalDialogContent,\n ModalDialogContentProps,\n} from \"./ModalDialogContent\"\nimport { splitBoxProps } from \"../Box\"\nimport { useDidMount } from \"../../utils/useDidMount\"\n\nexport type ModalDialogProps = ModalBaseProps &\n ModalDialogContentProps & {\n leftPanel?: React.ReactNode\n rightPanel?: React.ReactNode\n }\n\nexport const ModalDialog: React.FC<ModalDialogProps> = ({\n children,\n footer,\n hasLogo,\n leftPanel,\n onClose,\n rightPanel,\n title,\n header,\n ...rest\n}) => {\n const isMounted = useDidMount({ clearCallStack: true })\n\n const [{ width, ...boxProps }, modalProps] = splitBoxProps(rest)\n\n return (\n <ModalBase\n onClose={onClose}\n style={\n isMounted\n ? {\n backgroundColor: \"rgba(229, 229, 229, 0.5)\",\n transition: \"background-color 250ms\",\n }\n : { backgroundColor: \"transparent\" }\n }\n dialogProps={{ width: width ?? 480 }}\n {...modalProps}\n >\n <ModalDialogContent\n footer={footer}\n hasLogo={hasLogo}\n leftPanel={leftPanel}\n onClose={onClose}\n rightPanel={rightPanel}\n title={title}\n header={header}\n width=\"100%\"\n style={\n isMounted\n ? {\n opacity: 1,\n transition: \"opacity 250ms, transform 250ms\",\n }\n : { opacity: 0, transform: \"translateY(10px)\" }\n }\n {...boxProps}\n >\n {children}\n </ModalDialogContent>\n </ModalBase>\n )\n}\n"],"file":"ModalDialog.js"}
|
|
@@ -163,6 +163,27 @@ var Default = function Default() {
|
|
|
163
163
|
variant: "xs",
|
|
164
164
|
color: "white100"
|
|
165
165
|
}, "Some custom content on the left"))
|
|
166
|
+
}, {
|
|
167
|
+
title: "With Header",
|
|
168
|
+
header: /*#__PURE__*/_react.default.createElement(_Box.Box, {
|
|
169
|
+
bg: "black10",
|
|
170
|
+
p: 2,
|
|
171
|
+
textAlign: "center"
|
|
172
|
+
}, /*#__PURE__*/_react.default.createElement(_Text.Text, {
|
|
173
|
+
variant: "xs"
|
|
174
|
+
}, "Header Content"))
|
|
175
|
+
}, {
|
|
176
|
+
title: "With Header and Footer",
|
|
177
|
+
header: /*#__PURE__*/_react.default.createElement(_Box.Box, {
|
|
178
|
+
bg: "black10",
|
|
179
|
+
p: 2,
|
|
180
|
+
textAlign: "center"
|
|
181
|
+
}, /*#__PURE__*/_react.default.createElement(_Text.Text, {
|
|
182
|
+
variant: "xs"
|
|
183
|
+
}, "Header Content")),
|
|
184
|
+
footer: /*#__PURE__*/_react.default.createElement(_Button.Button, {
|
|
185
|
+
width: "100%"
|
|
186
|
+
}, "Confirm")
|
|
166
187
|
}]
|
|
167
188
|
}, function (props) {
|
|
168
189
|
return /*#__PURE__*/_react.default.createElement(Demo, props);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialog.story.tsx"],"names":["LOREM","title","Demo","children","rest","open","setOpen","repeat","Default","width","hasLogo","footer","leftPanel","rightPanel","props"],"mappings":"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
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialog.story.tsx"],"names":["LOREM","title","Demo","children","rest","open","setOpen","repeat","Default","width","hasLogo","footer","leftPanel","rightPanel","header","props"],"mappings":"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","sourcesContent":["import React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Text } from \"../Text\"\nimport { Button } from \"../Button\"\nimport { ModalDialog, ModalDialogProps } from \"./ModalDialog\"\nimport { Box } from \"../Box\"\n\nconst LOREM =\n \"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus sed iure repellendus animi, aliquid aut fuga maxime nemo minus quas. Error, incidunt fugit similique quidem culpa hic! Nemo, quas rerum. \"\n\nexport default {\n title: \"Components/ModalDialog\",\n}\n\nconst Demo = ({ children, ...rest }: Partial<ModalDialogProps>) => {\n const [open, setOpen] = useState(false)\n\n return (\n <>\n <Button onClick={() => setOpen(true)}>Open Modal</Button>\n\n {open && (\n <ModalDialog onClose={() => setOpen(false)} {...rest}>\n {children ? children : <Text variant=\"sm\">{LOREM.repeat(15)}</Text>}\n </ModalDialog>\n )}\n </>\n )\n}\n\nexport const Default = () => {\n return (\n <States<Partial<ModalDialogProps>>\n states={[\n {\n children: <Text variant=\"sm\">{LOREM}</Text>,\n },\n { title: \"Modal Title\" },\n { title: \"100% Width\", width: \"100%\" },\n { title: \"Responsive Percentage Width\", width: [\"75%\", \"66%\", \"50%\"] },\n { title: \"Responsive Width\", width: [\"100%\", 550] },\n {\n title:\n \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n },\n { hasLogo: true },\n { title: \"Modal Title\", hasLogo: true },\n {\n children: <Text variant=\"sm\">{LOREM}</Text>,\n footer: <Button width=\"100%\">Confirm</Button>,\n },\n { title: \"Modal Title\", footer: <Button width=\"100%\">Confirm</Button> },\n {\n title:\n \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n footer: <Button width=\"100%\">Confirm</Button>,\n },\n {\n title:\n \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n hasLogo: true,\n footer: <Button width=\"100%\">Confirm</Button>,\n },\n {\n width: 800,\n title: \"With Left Panel\",\n leftPanel: (\n <Box bg=\"black100\" width={300} flexShrink={0} p={1}>\n <Text variant=\"xs\" color=\"white100\">\n Some custom content on the left\n </Text>\n </Box>\n ),\n },\n {\n width: 800,\n title: \"With Right Panel\",\n rightPanel: (\n <Box bg=\"black100\" width={300} flexShrink={0} p={1}>\n <Text variant=\"xs\" color=\"white100\">\n Some custom content on the left\n </Text>\n </Box>\n ),\n },\n {\n width: \"100%\",\n title: \"With Left and Right Panels\",\n leftPanel: (\n <Box bg=\"black100\" width={300} flexShrink={0} p={1}>\n <Text variant=\"xs\" color=\"white100\">\n Some custom content on the left\n </Text>\n </Box>\n ),\n rightPanel: (\n <Box bg=\"black100\" width={300} flexShrink={0} p={1}>\n <Text variant=\"xs\" color=\"white100\">\n Some custom content on the left\n </Text>\n </Box>\n ),\n },\n {\n title: \"With Header\",\n header: (\n <Box bg=\"black10\" p={2} textAlign=\"center\">\n <Text variant=\"xs\">Header Content</Text>\n </Box>\n ),\n },\n {\n title: \"With Header and Footer\",\n header: (\n <Box bg=\"black10\" p={2} textAlign=\"center\">\n <Text variant=\"xs\">Header Content</Text>\n </Box>\n ),\n footer: <Button width=\"100%\">Confirm</Button>,\n },\n ]}\n >\n {(props) => <Demo {...props} />}\n </States>\n )\n}\n"],"file":"ModalDialog.story.js"}
|
|
@@ -29,7 +29,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
29
29
|
|
|
30
30
|
var _themeGet = require("@styled-system/theme-get");
|
|
31
31
|
|
|
32
|
-
var _excluded = ["children", "footer", "hasLogo", "leftPanel", "onClose", "rightPanel", "title"];
|
|
32
|
+
var _excluded = ["children", "footer", "hasLogo", "leftPanel", "onClose", "rightPanel", "title", "header"];
|
|
33
33
|
|
|
34
34
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
35
35
|
|
|
@@ -47,6 +47,7 @@ var ModalDialogContent = function ModalDialogContent(_ref) {
|
|
|
47
47
|
onClose = _ref.onClose,
|
|
48
48
|
rightPanel = _ref.rightPanel,
|
|
49
49
|
title = _ref.title,
|
|
50
|
+
header = _ref.header,
|
|
50
51
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
51
52
|
|
|
52
53
|
var _useSentinelVisibilit = (0, _useSentinelVisibility.useSentinelVisibility)(),
|
|
@@ -68,13 +69,15 @@ var ModalDialogContent = function ModalDialogContent(_ref) {
|
|
|
68
69
|
overflow: "hidden",
|
|
69
70
|
width: "100%"
|
|
70
71
|
}, /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
|
|
71
|
-
|
|
72
|
-
justifyContent: "space-between",
|
|
72
|
+
flexDirection: "column",
|
|
73
73
|
zIndex: 1,
|
|
74
74
|
style: {
|
|
75
75
|
transition: "box-shadow 250ms",
|
|
76
76
|
boxShadow: isAtTop ? _shadow.DROP_SHADOW : undefined
|
|
77
77
|
}
|
|
78
|
+
}, /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
|
|
79
|
+
alignItems: "flex-start",
|
|
80
|
+
justifyContent: "space-between"
|
|
78
81
|
}, (title || hasLogo) && /*#__PURE__*/_react.default.createElement(_Box.Box, {
|
|
79
82
|
m: 2
|
|
80
83
|
}, hasLogo && /*#__PURE__*/_react.default.createElement(_ArtsyLogoBlackIcon.ArtsyLogoBlackIcon, {
|
|
@@ -97,7 +100,9 @@ var ModalDialogContent = function ModalDialogContent(_ref) {
|
|
|
97
100
|
}, /*#__PURE__*/_react.default.createElement(_CloseIcon.CloseIcon, {
|
|
98
101
|
fill: "currentColor",
|
|
99
102
|
display: "block"
|
|
100
|
-
}))), /*#__PURE__*/_react.default.createElement(_Box.Box, {
|
|
103
|
+
}))), header && /*#__PURE__*/_react.default.createElement(_Box.Box, {
|
|
104
|
+
p: 2
|
|
105
|
+
}, header)), /*#__PURE__*/_react.default.createElement(_Box.Box, {
|
|
101
106
|
px: 2,
|
|
102
107
|
pb: 2,
|
|
103
108
|
flex: 1,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialogContent.tsx"],"names":["ModalDialogContent","children","footer","hasLogo","leftPanel","onClose","rightPanel","title","rest","topSentinel","sentinel","isAtTop","isSentinelVisible","bottomSentinel","isAtBottom","boxShadow","DROP_SHADOW","transition","undefined","width","height","WebkitOverflowScrolling","Close","Clickable"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialogContent.tsx"],"names":["ModalDialogContent","children","footer","hasLogo","leftPanel","onClose","rightPanel","title","header","rest","topSentinel","sentinel","isAtTop","isSentinelVisible","bottomSentinel","isAtBottom","boxShadow","DROP_SHADOW","transition","undefined","width","height","WebkitOverflowScrolling","Close","Clickable"],"mappings":"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","sourcesContent":["import React from \"react\"\nimport { Clickable } from \"../Clickable\"\nimport { DROP_SHADOW } from \"../../helpers/shadow\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { CloseIcon } from \"../../svgs/CloseIcon\"\nimport { ArtsyLogoBlackIcon } from \"../../svgs/ArtsyLogoBlackIcon\"\nimport { useSentinelVisibility } from \"../../utils/useSentinelVisibility\"\nimport { Spacer } from \"../Spacer\"\nimport styled from \"styled-components\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nexport interface ModalDialogContentProps\n extends BoxProps,\n React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode\n footer?: React.ReactNode\n hasLogo?: boolean\n leftPanel?: React.ReactNode\n onClose: () => void\n rightPanel?: React.ReactNode\n title?: string\n header?: React.ReactNode\n}\n\nexport const ModalDialogContent: React.FC<ModalDialogContentProps> = ({\n children,\n footer,\n hasLogo,\n leftPanel,\n onClose,\n rightPanel,\n title,\n header,\n ...rest\n}) => {\n const {\n sentinel: topSentinel,\n isSentinelVisible: isAtTop,\n } = useSentinelVisibility()\n\n const {\n sentinel: bottomSentinel,\n isSentinelVisible: isAtBottom,\n } = useSentinelVisibility()\n\n return (\n <Flex bg=\"white100\" m={2} style={{ boxShadow: DROP_SHADOW }} {...rest}>\n {leftPanel}\n\n <Flex flexDirection=\"column\" overflow=\"hidden\" width=\"100%\">\n <Flex\n flexDirection=\"column\"\n zIndex={1}\n style={{\n transition: \"box-shadow 250ms\",\n boxShadow: isAtTop ? DROP_SHADOW : undefined,\n }}\n >\n <Flex alignItems=\"flex-start\" justifyContent=\"space-between\">\n {(title || hasLogo) && (\n <Box m={2}>\n {hasLogo && (\n <ArtsyLogoBlackIcon\n display=\"block\"\n style={{ width: \"75px\", height: \"26px\" }}\n />\n )}\n\n {hasLogo && title && <Spacer y={2} />}\n\n {title && (\n <Text variant=\"lg-display\" lineClamp={6} hyphenate>\n {title}\n </Text>\n )}\n </Box>\n )}\n\n <Close p={2} ml=\"auto\" onClick={onClose} aria-label=\"Close\">\n <CloseIcon fill=\"currentColor\" display=\"block\" />\n </Close>\n </Flex>\n\n {header && <Box p={2}>{header}</Box>}\n </Flex>\n\n <Box\n px={2}\n pb={2}\n flex={1}\n overflow=\"auto\"\n style={{ WebkitOverflowScrolling: \"touch\" }}\n >\n {topSentinel}\n {children}\n {bottomSentinel}\n </Box>\n\n {footer && (\n <Box\n p={2}\n style={{\n transition: \"box-shadow 250ms\",\n boxShadow: isAtBottom ? DROP_SHADOW : undefined,\n }}\n >\n {footer}\n </Box>\n )}\n </Flex>\n\n {rightPanel}\n </Flex>\n )\n}\n\nconst Close = styled(Clickable)`\n color: ${themeGet(\"colors.black100\")};\n\n &:focus,\n &.focus-visible {\n outline: none;\n color: ${themeGet(\"colors.black60\")};\n }\n`\n"],"file":"ModalDialogContent.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette",
|
|
3
|
-
"version": "29.
|
|
3
|
+
"version": "29.3.0",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -174,5 +174,5 @@
|
|
|
174
174
|
"<rootDir>/www/"
|
|
175
175
|
]
|
|
176
176
|
},
|
|
177
|
-
"gitHead": "
|
|
177
|
+
"gitHead": "2139d7dabc09fff9cc96a85548a15bb9e8c73035"
|
|
178
178
|
}
|