@artsy/palette 38.12.1 → 38.12.2-canary.1389.30751.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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"}
|
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.30751.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.30751.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": "0f9e0262b0174d1632062c74c8bacc7b54581ff4"
|
|
186
186
|
}
|