@artsy/palette 38.12.1 → 38.12.2-canary.1389.30758.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.
|
@@ -10,7 +10,7 @@ var _Box = require("../Box");
|
|
|
10
10
|
var _Text = require("../Text");
|
|
11
11
|
var _ResponsiveBox = require("../ResponsiveBox");
|
|
12
12
|
var _Theme = require("../../Theme");
|
|
13
|
-
var _excluded = ["image", "title", "subtitle", "status"];
|
|
13
|
+
var _excluded = ["image", "title", "subtitle", "status", "maxWidth", "aspectWidth", "aspectHeight"];
|
|
14
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
15
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
16
16
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
@@ -24,14 +24,21 @@ var Card = function Card(_ref) {
|
|
|
24
24
|
title = _ref.title,
|
|
25
25
|
subtitle = _ref.subtitle,
|
|
26
26
|
status = _ref.status,
|
|
27
|
+
_ref$maxWidth = _ref.maxWidth,
|
|
28
|
+
maxWidth = _ref$maxWidth === void 0 ? 280 : _ref$maxWidth,
|
|
29
|
+
_ref$aspectWidth = _ref.aspectWidth,
|
|
30
|
+
aspectWidth = _ref$aspectWidth === void 0 ? 280 : _ref$aspectWidth,
|
|
31
|
+
_ref$aspectHeight = _ref.aspectHeight,
|
|
32
|
+
aspectHeight = _ref$aspectHeight === void 0 ? 370 : _ref$aspectHeight,
|
|
27
33
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
28
34
|
var _useTheme = (0, _Theme.useTheme)(),
|
|
29
35
|
theme = _useTheme.theme;
|
|
36
|
+
var hasInfo = title || subtitle || status;
|
|
30
37
|
return /*#__PURE__*/_react.default.createElement(_Box.Box, _extends({
|
|
31
|
-
maxWidth:
|
|
38
|
+
maxWidth: maxWidth
|
|
32
39
|
}, rest), /*#__PURE__*/_react.default.createElement(_ResponsiveBox.ResponsiveBox, {
|
|
33
|
-
aspectWidth:
|
|
34
|
-
aspectHeight:
|
|
40
|
+
aspectWidth: aspectWidth,
|
|
41
|
+
aspectHeight: aspectHeight,
|
|
35
42
|
maxWidth: "100%"
|
|
36
43
|
}, /*#__PURE__*/_react.default.createElement(_Image.Image, _extends({
|
|
37
44
|
alt: "",
|
|
@@ -42,11 +49,11 @@ var Card = function Card(_ref) {
|
|
|
42
49
|
}
|
|
43
50
|
}, typeof image === "string" ? {
|
|
44
51
|
src: image
|
|
45
|
-
} : image)), /*#__PURE__*/_react.default.createElement(_Box.Box, {
|
|
52
|
+
} : image)), hasInfo && /*#__PURE__*/_react.default.createElement(_Box.Box, {
|
|
46
53
|
position: "absolute",
|
|
47
54
|
width: "100%",
|
|
48
|
-
height: "
|
|
49
|
-
|
|
55
|
+
height: "50%",
|
|
56
|
+
bottom: 0,
|
|
50
57
|
left: 0,
|
|
51
58
|
background: theme.effects.overlayGradient
|
|
52
59
|
}), /*#__PURE__*/_react.default.createElement(_Box.Box, {
|
|
@@ -61,7 +68,7 @@ var Card = function Card(_ref) {
|
|
|
61
68
|
}, status && /*#__PURE__*/_react.default.createElement(_Text.Text, {
|
|
62
69
|
variant: "xs",
|
|
63
70
|
color: "white100"
|
|
64
|
-
}, status), /*#__PURE__*/_react.default.createElement(_Text.Text, {
|
|
71
|
+
}, status), title && /*#__PURE__*/_react.default.createElement(_Text.Text, {
|
|
65
72
|
variant: "sm-display",
|
|
66
73
|
color: "white100"
|
|
67
74
|
}, title), subtitle && /*#__PURE__*/_react.default.createElement(_Text.Text, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","names":["_react","_interopRequireDefault","require","_Image","_Box","_Text","_ResponsiveBox","_Theme","_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","Card","_ref","image","title","subtitle","status","
|
|
1
|
+
{"version":3,"file":"Card.js","names":["_react","_interopRequireDefault","require","_Image","_Box","_Text","_ResponsiveBox","_Theme","_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","Card","_ref","image","title","subtitle","status","_ref$maxWidth","maxWidth","_ref$aspectWidth","aspectWidth","_ref$aspectHeight","aspectHeight","rest","_useTheme","useTheme","theme","hasInfo","createElement","Box","ResponsiveBox","Image","alt","height","width","style","objectFit","src","position","bottom","left","background","effects","overlayGradient","p","textShadow","Text","variant","color","exports","displayName"],"sources":["../../../src/elements/Cards/Card.tsx"],"sourcesContent":["import React from \"react\"\nimport { Image, ImageProps } from \"../Image\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { ResponsiveBox } from \"../ResponsiveBox\"\nimport { useTheme } from \"../../Theme\"\n\nexport interface CardProps extends BoxProps {\n image: string | ImageProps | null | undefined\n title?: string | null\n subtitle?: string | null\n status?: string | null\n aspectWidth?: number\n aspectHeight?: number\n}\n\n/**\n * `Card` is a card with one image one tall image, and text for title\n * and subtitle at the bottom.\n */\nexport const Card: React.FC<CardProps> = ({\n image,\n title,\n subtitle,\n status,\n maxWidth = 280,\n aspectWidth = 280,\n aspectHeight = 370,\n ...rest\n}) => {\n const { theme } = useTheme()\n\n const hasInfo = title || subtitle || status\n\n return (\n <Box maxWidth={maxWidth} {...rest}>\n <ResponsiveBox\n aspectWidth={aspectWidth}\n aspectHeight={aspectHeight}\n maxWidth=\"100%\"\n >\n <Image\n alt=\"\"\n height=\"100%\"\n width=\"100%\"\n style={{ objectFit: \"cover\" }}\n {...(typeof image === \"string\" ? { src: image } : image)}\n />\n\n {hasInfo && (\n <Box\n position=\"absolute\"\n width=\"100%\"\n height=\"50%\"\n bottom={0}\n left={0}\n background={theme.effects.overlayGradient}\n />\n )}\n\n <Box\n position=\"absolute\"\n bottom={0}\n left={0}\n width=\"100%\"\n p={2}\n style={{ textShadow: theme.effects.textShadow }}\n >\n {status && (\n <Text variant=\"xs\" color=\"white100\">\n {status}\n </Text>\n )}\n\n {title && (\n <Text variant=\"sm-display\" color=\"white100\">\n {title}\n </Text>\n )}\n\n {subtitle && (\n <Text variant=\"sm-display\" color=\"black15\">\n {subtitle}\n </Text>\n )}\n </Box>\n </ResponsiveBox>\n </Box>\n )\n}\n"],"mappings":"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"}
|
|
@@ -12,6 +12,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
|
12
12
|
var _styledSystem = require("styled-system");
|
|
13
13
|
var _reactFocusOn = require("react-focus-on");
|
|
14
14
|
var _usePortal2 = require("../../utils/usePortal");
|
|
15
|
+
var _themeGet = require("@styled-system/theme-get");
|
|
15
16
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
16
17
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -52,14 +53,12 @@ var Drawer = function Drawer(_ref) {
|
|
|
52
53
|
transform: open ? "translateX(0)" : "translateX(".concat(anchor === "left" ? "-110%" : "110%", ")")
|
|
53
54
|
}
|
|
54
55
|
}, children)), /*#__PURE__*/_react.default.createElement(Overlay, {
|
|
55
|
-
backgroundColor: "black100",
|
|
56
|
-
height: "100%",
|
|
57
56
|
display: ["none", "flex"],
|
|
58
57
|
onClick: onClose,
|
|
59
58
|
"data-testid": "drawer-overlay",
|
|
60
59
|
width: "inherit",
|
|
61
60
|
style: {
|
|
62
|
-
opacity: open ?
|
|
61
|
+
opacity: open ? 1 : 0
|
|
63
62
|
}
|
|
64
63
|
})));
|
|
65
64
|
};
|
|
@@ -76,7 +75,7 @@ var Content = (0, _styledComponents.default)(_Box.Box).withConfig({
|
|
|
76
75
|
var Overlay = (0, _styledComponents.default)(_Box.Box).withConfig({
|
|
77
76
|
displayName: "Drawer__Overlay",
|
|
78
77
|
componentId: "ixq342-1"
|
|
79
|
-
})(["transition:opacity 150ms linear 50ms;"]);
|
|
78
|
+
})(["height:100%;background:", ";transition:opacity 150ms linear 50ms;"], (0, _themeGet.themeGet)("effects.backdrop"));
|
|
80
79
|
var Container = (0, _styledComponents.default)(_Flex.Flex).withConfig({
|
|
81
80
|
displayName: "Drawer__Container",
|
|
82
81
|
componentId: "ixq342-2"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","names":["_react","_interopRequireDefault","require","_Box","_Flex","_styledComponents","_interopRequireWildcard","_styledSystem","_reactFocusOn","_usePortal2","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Drawer","_ref","children","_ref$anchor","anchor","_ref$zIndex","zIndex","DEFAULT_DRAWER_Z_INDEX","open","onClose","_usePortal","usePortal","createPortal","createElement","Container","style","pointerEvents","transform","Focus","onClickOutside","enabled","onEscapeKey","Content","backgroundColor","height","width","overflowX","overflowY","transition","concat","Overlay","display","onClick","opacity","exports","styled","Box","withConfig","displayName","componentId","props","css","Flex","FocusOn"],"sources":["../../../src/elements/Drawer/Drawer.tsx"],"sourcesContent":["import React, { FC } from \"react\"\nimport { Box } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport styled, { css } from \"styled-components\"\nimport { zIndex } from \"styled-system\"\nimport { FocusOn } from \"react-focus-on\"\nimport { usePortal } from \"../../utils/usePortal\"\n\nexport interface DrawerProps {\n open: boolean\n anchor?: \"left\" | \"right\"\n zIndex?: number\n onClose?(): void\n}\n\nexport const Drawer: FC<DrawerProps> = ({\n children,\n anchor = \"right\",\n zIndex = DEFAULT_DRAWER_Z_INDEX,\n open,\n onClose,\n}) => {\n const { createPortal } = usePortal()\n\n return createPortal(\n <Container\n zIndex={zIndex}\n anchor={anchor}\n style={{\n pointerEvents: open ? \"auto\" : \"none\",\n transform: open ? \"translateX(0)\" : \"none\",\n }}\n >\n <Focus onClickOutside={onClose} enabled={open} onEscapeKey={onClose}>\n <Content\n backgroundColor=\"white100\"\n height=\"100%\"\n width={[\"100%\", \"auto\"]}\n overflowX=\"hidden\"\n overflowY=\"scroll\"\n anchor={anchor}\n zIndex={zIndex}\n transition={\n open\n ? \"transform .6s cubic-bezier(0.190, 1.000, 0.220, 1.000)\" // easeOutExpo\n : \"transform 1s cubic-bezier(0.075, 0.820, 0.165, 1.000)\" // easeOutCirc\n }\n style={{\n transform: open\n ? \"translateX(0)\"\n : `translateX(${anchor === \"left\" ? \"-110%\" : \"110%\"})`,\n }}\n >\n {children}\n </Content>\n </Focus>\n\n <Overlay\n
|
|
1
|
+
{"version":3,"file":"Drawer.js","names":["_react","_interopRequireDefault","require","_Box","_Flex","_styledComponents","_interopRequireWildcard","_styledSystem","_reactFocusOn","_usePortal2","_themeGet","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Drawer","_ref","children","_ref$anchor","anchor","_ref$zIndex","zIndex","DEFAULT_DRAWER_Z_INDEX","open","onClose","_usePortal","usePortal","createPortal","createElement","Container","style","pointerEvents","transform","Focus","onClickOutside","enabled","onEscapeKey","Content","backgroundColor","height","width","overflowX","overflowY","transition","concat","Overlay","display","onClick","opacity","exports","styled","Box","withConfig","displayName","componentId","props","css","themeGet","Flex","FocusOn"],"sources":["../../../src/elements/Drawer/Drawer.tsx"],"sourcesContent":["import React, { FC } from \"react\"\nimport { Box } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport styled, { css } from \"styled-components\"\nimport { zIndex } from \"styled-system\"\nimport { FocusOn } from \"react-focus-on\"\nimport { usePortal } from \"../../utils/usePortal\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nexport interface DrawerProps {\n open: boolean\n anchor?: \"left\" | \"right\"\n zIndex?: number\n onClose?(): void\n}\n\nexport const Drawer: FC<DrawerProps> = ({\n children,\n anchor = \"right\",\n zIndex = DEFAULT_DRAWER_Z_INDEX,\n open,\n onClose,\n}) => {\n const { createPortal } = usePortal()\n\n return createPortal(\n <Container\n zIndex={zIndex}\n anchor={anchor}\n style={{\n pointerEvents: open ? \"auto\" : \"none\",\n transform: open ? \"translateX(0)\" : \"none\",\n }}\n >\n <Focus onClickOutside={onClose} enabled={open} onEscapeKey={onClose}>\n <Content\n backgroundColor=\"white100\"\n height=\"100%\"\n width={[\"100%\", \"auto\"]}\n overflowX=\"hidden\"\n overflowY=\"scroll\"\n anchor={anchor}\n zIndex={zIndex}\n transition={\n open\n ? \"transform .6s cubic-bezier(0.190, 1.000, 0.220, 1.000)\" // easeOutExpo\n : \"transform 1s cubic-bezier(0.075, 0.820, 0.165, 1.000)\" // easeOutCirc\n }\n style={{\n transform: open\n ? \"translateX(0)\"\n : `translateX(${anchor === \"left\" ? \"-110%\" : \"110%\"})`,\n }}\n >\n {children}\n </Content>\n </Focus>\n\n <Overlay\n display={[\"none\", \"flex\"]}\n onClick={onClose}\n data-testid=\"drawer-overlay\"\n width=\"inherit\"\n style={{\n opacity: open ? 1 : 0,\n }}\n />\n </Container>\n )\n}\n\nconst DEFAULT_DRAWER_Z_INDEX = 1\n\nconst Content = styled(Box)<\n Pick<DrawerProps, \"anchor\"> & { transition: string }\n>`\n position: absolute;\n top: 0;\n -webkit-overflow-scrolling: touch;\n\n ${(props) => css`\n transition: ${props.transition};\n `}\n\n ${(props) => css`\n ${props.anchor === \"left\" ? \"left: 0;\" : \"right: 0;\"}\n `};\n`\n\nconst Overlay = styled(Box)`\n height: 100%;\n background: ${themeGet(\"effects.backdrop\")};\n transition: opacity 150ms linear 50ms;\n`\n\nconst Container = styled(Flex)<Pick<DrawerProps, \"anchor\">>`\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n ${zIndex}\n position: fixed;\n\n ${(props) => {\n return css`\n flex-direction: ${props.anchor === \"left\" ? \"row\" : \"row-reverse\"};\n `\n }}\n`\n\nconst Focus = styled(FocusOn)`\n height: 100%;\n align-items: center;\n justify-content: center;\n`\n"],"mappings":"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"}
|
package/dist/tokens.json
CHANGED
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"innerShadow": "1px 1px 2px 0 rgba(0, 0, 0, 0.1) inset",
|
|
39
39
|
"flatShadow": "0 1px 1px 0 rgba(0, 0, 0, 0.05)",
|
|
40
40
|
"textShadow": "0 0 15px rgba(0, 0, 0, 0.25)",
|
|
41
|
-
"overlayGradient": "linear-gradient(
|
|
41
|
+
"overlayGradient": "\n linear-gradient(\n to bottom,\n hsla(0, 0%, 0%, 0) 0%,\n hsla(0, 0%, 0%, 0.006) 8.1%,\n hsla(0, 0%, 0%, 0.024) 15.5%,\n hsla(0, 0%, 0%, 0.052) 22.5%,\n hsla(0, 0%, 0%, 0.088) 29%,\n hsla(0, 0%, 0%, 0.13) 35.3%,\n hsla(0, 0%, 0%, 0.176) 41.2%,\n hsla(0, 0%, 0%, 0.225) 47.1%,\n hsla(0, 0%, 0%, 0.275) 52.9%,\n hsla(0, 0%, 0%, 0.324) 58.8%,\n hsla(0, 0%, 0%, 0.37) 64.7%,\n hsla(0, 0%, 0%, 0.412) 71%,\n hsla(0, 0%, 0%, 0.448) 77.5%,\n hsla(0, 0%, 0%, 0.476) 84.5%,\n hsla(0, 0%, 0%, 0.494) 91.9%,\n hsla(0, 0%, 0%, 0.5) 100%\n );\n ",
|
|
42
42
|
"fadeRight": "linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%)",
|
|
43
43
|
"backdrop": "rgba(229, 229, 229, 0.5)"
|
|
44
44
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette",
|
|
3
|
-
"version": "38.12.
|
|
3
|
+
"version": "38.12.2-canary.1389.30758.0",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -118,7 +118,7 @@
|
|
|
118
118
|
},
|
|
119
119
|
"dependencies": {
|
|
120
120
|
"@artsy/icons": "^3.2.2",
|
|
121
|
-
"@artsy/palette-tokens": "
|
|
121
|
+
"@artsy/palette-tokens": "6.0.3-canary.1389.30758.0",
|
|
122
122
|
"@seznam/compose-react-refs": "^1.0.6",
|
|
123
123
|
"@styled-system/theme-get": "^5.1.2",
|
|
124
124
|
"lodash": "^4.17.21",
|
|
@@ -182,5 +182,5 @@
|
|
|
182
182
|
"url": "http://localhost"
|
|
183
183
|
}
|
|
184
184
|
},
|
|
185
|
-
"gitHead": "
|
|
185
|
+
"gitHead": "583d03a8805ac53e9eeb836107bb0c8015904648"
|
|
186
186
|
}
|