@artsy/palette 34.2.0 → 34.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.
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { FC } from "react";
|
|
2
|
+
import { ClickableProps } from "../Clickable";
|
|
2
3
|
import { BoxProps } from "../Box";
|
|
3
4
|
export interface ModalDialogContentProps extends BoxProps, React.HTMLAttributes<HTMLDivElement> {
|
|
4
5
|
children: React.ReactNode;
|
|
@@ -11,3 +12,5 @@ export interface ModalDialogContentProps extends BoxProps, React.HTMLAttributes<
|
|
|
11
12
|
header?: React.ReactNode;
|
|
12
13
|
}
|
|
13
14
|
export declare const ModalDialogContent: React.FC<ModalDialogContentProps>;
|
|
15
|
+
export declare type ModalCloseProps = ClickableProps;
|
|
16
|
+
export declare const ModalClose: FC<ModalCloseProps>;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.ModalDialogContent = void 0;
|
|
6
|
+
exports.ModalDialogContent = exports.ModalClose = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _Clickable = require("../Clickable");
|
|
9
9
|
var _shadow = require("../../helpers/shadow");
|
|
@@ -69,15 +69,9 @@ var ModalDialogContent = function ModalDialogContent(_ref) {
|
|
|
69
69
|
variant: "lg-display",
|
|
70
70
|
lineClamp: 6,
|
|
71
71
|
hyphenate: true
|
|
72
|
-
}, title)), /*#__PURE__*/_react.default.createElement(
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
onClick: onClose,
|
|
76
|
-
"aria-label": "Close"
|
|
77
|
-
}, /*#__PURE__*/_react.default.createElement(_CloseIcon.default, {
|
|
78
|
-
fill: "currentColor",
|
|
79
|
-
display: "block"
|
|
80
|
-
}))), header && /*#__PURE__*/_react.default.createElement(_Box.Box, {
|
|
72
|
+
}, title)), /*#__PURE__*/_react.default.createElement(ModalClose, {
|
|
73
|
+
onClick: onClose
|
|
74
|
+
})), header && /*#__PURE__*/_react.default.createElement(_Box.Box, {
|
|
81
75
|
px: 2,
|
|
82
76
|
pb: 2
|
|
83
77
|
}, header)), /*#__PURE__*/_react.default.createElement(_Box.Box, {
|
|
@@ -98,6 +92,18 @@ var ModalDialogContent = function ModalDialogContent(_ref) {
|
|
|
98
92
|
};
|
|
99
93
|
exports.ModalDialogContent = ModalDialogContent;
|
|
100
94
|
ModalDialogContent.displayName = "ModalDialogContent";
|
|
95
|
+
var ModalClose = function ModalClose(props) {
|
|
96
|
+
return /*#__PURE__*/_react.default.createElement(Close, _extends({
|
|
97
|
+
p: 2,
|
|
98
|
+
ml: "auto",
|
|
99
|
+
"aria-label": "Close"
|
|
100
|
+
}, props), /*#__PURE__*/_react.default.createElement(_CloseIcon.default, {
|
|
101
|
+
fill: "currentColor",
|
|
102
|
+
display: "block"
|
|
103
|
+
}));
|
|
104
|
+
};
|
|
105
|
+
exports.ModalClose = ModalClose;
|
|
106
|
+
ModalClose.displayName = "ModalClose";
|
|
101
107
|
var Close = (0, _styledComponents.default)(_Clickable.Clickable).withConfig({
|
|
102
108
|
displayName: "ModalDialogContent__Close",
|
|
103
109
|
componentId: "ow6myz-0"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalDialogContent.js","names":["_react","_interopRequireDefault","require","_Clickable","_shadow","_Box","_Flex","_Text","_CloseIcon","_ArtsyLogoIcon","_useSentinelVisibility","_Spacer","_styledComponents","_themeGet","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","ModalDialogContent","_ref","children","footer","hasLogo","leftPanel","onClose","rightPanel","title","header","rest","_useSentinelVisibilit","useSentinelVisibility","topSentinel","sentinel","isAtTop","isSentinelVisible","_useSentinelVisibilit2","bottomSentinel","isAtBottom","createElement","Flex","bg","m","style","boxShadow","DROP_SHADOW","flexDirection","overflow","width","zIndex","transition","undefined","alignItems","justifyContent","Box","display","height","Spacer","y","Text","variant","lineClamp","hyphenate","
|
|
1
|
+
{"version":3,"file":"ModalDialogContent.js","names":["_react","_interopRequireDefault","require","_Clickable","_shadow","_Box","_Flex","_Text","_CloseIcon","_ArtsyLogoIcon","_useSentinelVisibility","_Spacer","_styledComponents","_themeGet","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","ModalDialogContent","_ref","children","footer","hasLogo","leftPanel","onClose","rightPanel","title","header","rest","_useSentinelVisibilit","useSentinelVisibility","topSentinel","sentinel","isAtTop","isSentinelVisible","_useSentinelVisibilit2","bottomSentinel","isAtBottom","createElement","Flex","bg","m","style","boxShadow","DROP_SHADOW","flexDirection","overflow","width","zIndex","transition","undefined","alignItems","justifyContent","Box","display","height","Spacer","y","Text","variant","lineClamp","hyphenate","ModalClose","onClick","px","pb","flex","WebkitOverflowScrolling","p","exports","displayName","props","Close","ml","fill","styled","Clickable","withConfig","componentId","themeGet"],"sources":["../../../src/elements/ModalDialog/ModalDialogContent.tsx"],"sourcesContent":["import React, { FC } from \"react\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { DROP_SHADOW } from \"../../helpers/shadow\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport ArtsyLogoIcon from \"@artsy/icons/ArtsyLogoIcon\"\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 <ArtsyLogoIcon display=\"block\" width={75} height={26} />\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 <ModalClose onClick={onClose} />\n </Flex>\n\n {header && (\n <Box px={2} pb={2}>\n {header}\n </Box>\n )}\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\nexport type ModalCloseProps = ClickableProps\n\nexport const ModalClose: FC<ModalCloseProps> = (props) => {\n return (\n <Close p={2} ml=\"auto\" aria-label=\"Close\" {...props}>\n <CloseIcon fill=\"currentColor\" display=\"block\" />\n </Close>\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"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette",
|
|
3
|
-
"version": "34.
|
|
3
|
+
"version": "34.3.0",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -182,5 +182,5 @@
|
|
|
182
182
|
"url": "http://localhost"
|
|
183
183
|
}
|
|
184
184
|
},
|
|
185
|
-
"gitHead": "
|
|
185
|
+
"gitHead": "05bf14e110984af5c8dc3b20b46fd5053727133a"
|
|
186
186
|
}
|