@artsy/palette 20.0.0 → 20.0.3
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/CHANGELOG.md +45 -0
- package/dist/elements/ResponsiveBox/ResponsiveBox.js +3 -15
- package/dist/elements/ResponsiveBox/ResponsiveBox.js.map +1 -1
- package/dist/elements/ResponsiveBox/ResponsiveBox.story.d.ts +1 -0
- package/dist/elements/ResponsiveBox/ResponsiveBox.story.js +41 -1
- package/dist/elements/ResponsiveBox/ResponsiveBox.story.js.map +1 -1
- package/dist/elements/Spinner/Spinner.d.ts +2 -1
- package/dist/elements/Spinner/Spinner.js +22 -11
- package/dist/elements/Spinner/Spinner.js.map +1 -1
- package/dist/elements/Spinner/Spinner.story.d.ts +6 -5
- package/dist/elements/Spinner/Spinner.story.js +25 -8
- package/dist/elements/Spinner/Spinner.story.js.map +1 -1
- package/dist/elements/Text/Text.js +1 -1
- package/dist/elements/Text/Text.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,48 @@
|
|
|
1
|
+
# v20.0.3 (Mon Jun 06 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- fix(responsivebox): utilize native aspect-ratio property in place of padding-bottom hack [#1176](https://github.com/artsy/palette/pull/1176) ([@dzucconi](https://github.com/dzucconi))
|
|
6
|
+
- fix(responsivebox): utilize native aspect-ratio property in place of padding-bottom hack ([@dzucconi](https://github.com/dzucconi))
|
|
7
|
+
|
|
8
|
+
#### 🏠 Internal
|
|
9
|
+
|
|
10
|
+
- chore(deps): update dep typescript from 4.7.2 to v4.7.3 [#1173](https://github.com/artsy/palette/pull/1173) ([@renovate-bot](https://github.com/renovate-bot))
|
|
11
|
+
- chore(deps): update dep typescript from 4.6.4 to v4.7.2 [#1168](https://github.com/artsy/palette/pull/1168) ([@renovate-bot](https://github.com/renovate-bot))
|
|
12
|
+
|
|
13
|
+
#### Authors: 2
|
|
14
|
+
|
|
15
|
+
- Damon ([@dzucconi](https://github.com/dzucconi))
|
|
16
|
+
- WhiteSource Renovate ([@renovate-bot](https://github.com/renovate-bot))
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
# v20.0.2 (Fri May 20 2022)
|
|
21
|
+
|
|
22
|
+
#### 🐛 Bug Fix
|
|
23
|
+
|
|
24
|
+
- fix(spinner): supports box props; respects theme [#1166](https://github.com/artsy/palette/pull/1166) ([@dzucconi](https://github.com/dzucconi))
|
|
25
|
+
- fix(spinner): supports box props; respects theme ([@dzucconi](https://github.com/dzucconi))
|
|
26
|
+
|
|
27
|
+
#### Authors: 1
|
|
28
|
+
|
|
29
|
+
- Damon ([@dzucconi](https://github.com/dzucconi))
|
|
30
|
+
|
|
31
|
+
---
|
|
32
|
+
|
|
33
|
+
# v20.0.1 (Fri May 20 2022)
|
|
34
|
+
|
|
35
|
+
#### 🐛 Bug Fix
|
|
36
|
+
|
|
37
|
+
- fix(text): updates default variant to v3 [#1165](https://github.com/artsy/palette/pull/1165) ([@dzucconi](https://github.com/dzucconi))
|
|
38
|
+
- fix(text): updates default variant to v3 ([@dzucconi](https://github.com/dzucconi))
|
|
39
|
+
|
|
40
|
+
#### Authors: 1
|
|
41
|
+
|
|
42
|
+
- Damon ([@dzucconi](https://github.com/dzucconi))
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
1
46
|
# v20.0.0 (Thu May 19 2022)
|
|
2
47
|
|
|
3
48
|
#### 💥 Breaking Change
|
|
@@ -69,24 +69,12 @@ var ResponsiveBox = function ResponsiveBox(_ref) {
|
|
|
69
69
|
return /*#__PURE__*/_react.default.createElement(_Box.Box, _extends({
|
|
70
70
|
position: "relative",
|
|
71
71
|
width: "100%",
|
|
72
|
-
style: {
|
|
73
|
-
maxWidth: scaled.maxWidth
|
|
74
|
-
}
|
|
75
|
-
}, rest), /*#__PURE__*/_react.default.createElement(_Box.Box, {
|
|
76
|
-
position: "relative",
|
|
77
|
-
width: "100%",
|
|
78
|
-
height: 0,
|
|
79
72
|
overflow: "hidden",
|
|
80
73
|
style: {
|
|
81
|
-
|
|
74
|
+
aspectRatio: "".concat(aspectWidth, " / ").concat(aspectHeight),
|
|
75
|
+
maxWidth: scaled.maxWidth
|
|
82
76
|
}
|
|
83
|
-
}
|
|
84
|
-
position: "absolute",
|
|
85
|
-
top: 0,
|
|
86
|
-
left: 0,
|
|
87
|
-
width: "100%",
|
|
88
|
-
height: "100%"
|
|
89
|
-
}, children));
|
|
77
|
+
}, rest), children);
|
|
90
78
|
};
|
|
91
79
|
|
|
92
80
|
exports.ResponsiveBox = ResponsiveBox;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/ResponsiveBox/ResponsiveBox.tsx"],"names":["responsiveScale","args","maxWidth","paddingBottom","width","aspectWidth","height","aspectHeight","rest","scaled","ResponsiveBox","children","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;AAiBA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CACtBC,IADsB,EAEnB;AACH,MAAI,cAAcA,IAAd,IAAsBA,IAAI,CAACC,QAAL,KAAkB,MAA5C,EAAoD;AAClD,WAAO;AACLA,MAAAA,QAAQ,EAAE,MADL;AAELC,MAAAA,aAAa,EAAE,sCAAc;AAC3BC,QAAAA,KAAK,EAAEH,IAAI,CAACI,WADe;AAE3BC,QAAAA,MAAM,EAAEL,IAAI,CAACM;AAFc,OAAd;AAFV,KAAP;AAOD;;AAED,MAAqBH,KAArB,GAA8DH,IAA9D,CAAQI,WAAR;AAAA,MAA0CC,MAA1C,GAA8DL,IAA9D,CAA4BM,YAA5B;AAAA,MAAqDC,IAArD,4BAA8DP,IAA9D;;AACA,MAAMQ,MAAM,GAAG;AAAQL,IAAAA,KAAK,EAALA,KAAR;AAAeE,IAAAA,MAAM,EAANA;AAAf,KAA0BE,IAA1B,EAAf;AAEA,SAAO;AACLN,IAAAA,QAAQ,YAAKO,MAAM,CAACL,KAAZ,OADH;AAELD,IAAAA,aAAa,EAAEM,MAAM,CAACN;AAFjB,GAAP;AAID,CApBD;AAsBA;;;AAKA;AACO,IAAMO,aAA2C,GAAG,SAA9CA,aAA8C,OAKrD;AAAA,MAJJL,WAII,QAJJA,WAII;AAAA,MAHJE,YAGI,QAHJA,YAGI;AAAA,MAFJI,QAEI,QAFJA,QAEI;AAAA,MADDH,IACC;;AACJ,MAAMC,MAAM,GAAGT,eAAe;AAAGO,IAAAA,YAAY,EAAZA,YAAH;AAAiBF,IAAAA,WAAW,EAAXA;AAAjB,KAAiCG,IAAjC,EAA9B;AAEA,sBACE,6BAAC,QAAD;AACE,IAAA,QAAQ,EAAC,UADX;AAEE,IAAA,KAAK,EAAC,MAFR;AAGE,IAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/ResponsiveBox/ResponsiveBox.tsx"],"names":["responsiveScale","args","maxWidth","paddingBottom","width","aspectWidth","height","aspectHeight","rest","scaled","ResponsiveBox","children","aspectRatio","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;AAiBA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CACtBC,IADsB,EAEnB;AACH,MAAI,cAAcA,IAAd,IAAsBA,IAAI,CAACC,QAAL,KAAkB,MAA5C,EAAoD;AAClD,WAAO;AACLA,MAAAA,QAAQ,EAAE,MADL;AAELC,MAAAA,aAAa,EAAE,sCAAc;AAC3BC,QAAAA,KAAK,EAAEH,IAAI,CAACI,WADe;AAE3BC,QAAAA,MAAM,EAAEL,IAAI,CAACM;AAFc,OAAd;AAFV,KAAP;AAOD;;AAED,MAAqBH,KAArB,GAA8DH,IAA9D,CAAQI,WAAR;AAAA,MAA0CC,MAA1C,GAA8DL,IAA9D,CAA4BM,YAA5B;AAAA,MAAqDC,IAArD,4BAA8DP,IAA9D;;AACA,MAAMQ,MAAM,GAAG;AAAQL,IAAAA,KAAK,EAALA,KAAR;AAAeE,IAAAA,MAAM,EAANA;AAAf,KAA0BE,IAA1B,EAAf;AAEA,SAAO;AACLN,IAAAA,QAAQ,YAAKO,MAAM,CAACL,KAAZ,OADH;AAELD,IAAAA,aAAa,EAAEM,MAAM,CAACN;AAFjB,GAAP;AAID,CApBD;AAsBA;;;AAKA;AACO,IAAMO,aAA2C,GAAG,SAA9CA,aAA8C,OAKrD;AAAA,MAJJL,WAII,QAJJA,WAII;AAAA,MAHJE,YAGI,QAHJA,YAGI;AAAA,MAFJI,QAEI,QAFJA,QAEI;AAAA,MADDH,IACC;;AACJ,MAAMC,MAAM,GAAGT,eAAe;AAAGO,IAAAA,YAAY,EAAZA,YAAH;AAAiBF,IAAAA,WAAW,EAAXA;AAAjB,KAAiCG,IAAjC,EAA9B;AAEA,sBACE,6BAAC,QAAD;AACE,IAAA,QAAQ,EAAC,UADX;AAEE,IAAA,KAAK,EAAC,MAFR;AAGE,IAAA,QAAQ,EAAC,QAHX;AAIE,IAAA,KAAK,EAAE;AACLI,MAAAA,WAAW,YAAKP,WAAL,gBAAsBE,YAAtB,CADN;AAELL,MAAAA,QAAQ,EAAEO,MAAM,CAACP;AAFZ;AAJT,KAQMM,IARN,GAUGG,QAVH,CADF;AAcD,CAtBM;;;AAAMD,a;AAwBbA,aAAa,CAACG,WAAd,GAA4B,eAA5B","sourcesContent":["import { paddingBottom, scale } from \"proportional-scale\"\nimport React from \"react\"\nimport { Box, BoxProps } from \"../Box\"\n\n/** ResponsiveBoxMaxDimensions */\nexport type ResponsiveBoxMaxDimensions =\n | {\n maxWidth: number\n maxHeight: number\n }\n | { maxWidth: number }\n | { maxHeight: number }\n | { maxWidth: \"100%\" }\n\nexport interface ResponsiveBoxAspectDimensions {\n aspectWidth: number\n aspectHeight: number\n}\n\nconst responsiveScale = (\n args: ResponsiveBoxAspectDimensions & ResponsiveBoxMaxDimensions\n) => {\n if (\"maxWidth\" in args && args.maxWidth === \"100%\") {\n return {\n maxWidth: \"100%\",\n paddingBottom: paddingBottom({\n width: args.aspectWidth,\n height: args.aspectHeight,\n }),\n }\n }\n\n const { aspectWidth: width, aspectHeight: height, ...rest } = args\n const scaled = scale({ width, height, ...rest })\n\n return {\n maxWidth: `${scaled.width}px`,\n paddingBottom: scaled.paddingBottom,\n }\n}\n\n/** ResponsiveBoxProps */\nexport type ResponsiveBoxProps = Omit<BoxProps, \"maxWidth\" | \"maxHeight\"> &\n ResponsiveBoxAspectDimensions &\n ResponsiveBoxMaxDimensions\n\n/** ResponsiveBox */\nexport const ResponsiveBox: React.FC<ResponsiveBoxProps> = ({\n aspectWidth,\n aspectHeight,\n children,\n ...rest\n}) => {\n const scaled = responsiveScale({ aspectHeight, aspectWidth, ...rest })\n\n return (\n <Box\n position=\"relative\"\n width=\"100%\"\n overflow=\"hidden\"\n style={{\n aspectRatio: `${aspectWidth} / ${aspectHeight}`,\n maxWidth: scaled.maxWidth,\n }}\n {...rest}\n >\n {children}\n </Box>\n )\n}\n\nResponsiveBox.displayName = \"ResponsiveBox\"\n"],"file":"ResponsiveBox.js"}
|
|
@@ -5,16 +5,22 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.default = exports.MaxWidth100 = exports.Basic = void 0;
|
|
8
|
+
exports.default = exports.MaxWidth100 = exports.ColumnsWithResponsiveImages = exports.Basic = void 0;
|
|
9
9
|
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
11
|
|
|
12
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
13
|
+
|
|
12
14
|
var _Box = require("../Box");
|
|
13
15
|
|
|
14
16
|
var _Text = require("../Text");
|
|
15
17
|
|
|
18
|
+
var _Image = require("../Image");
|
|
19
|
+
|
|
16
20
|
var _ResponsiveBox = require("./ResponsiveBox");
|
|
17
21
|
|
|
22
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
|
+
|
|
18
24
|
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); }
|
|
19
25
|
|
|
20
26
|
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; }
|
|
@@ -136,4 +142,38 @@ exports.MaxWidth100 = MaxWidth100;
|
|
|
136
142
|
MaxWidth100.story = {
|
|
137
143
|
name: "maxWidth: 100%"
|
|
138
144
|
};
|
|
145
|
+
var Masonry = (0, _styledComponents.default)(_Box.Box).withConfig({
|
|
146
|
+
displayName: "ResponsiveBoxstory__Masonry",
|
|
147
|
+
componentId: "m69kz2-0"
|
|
148
|
+
})(["column-count:3;*{break-inside:avoid;}"]);
|
|
149
|
+
|
|
150
|
+
var ColumnsWithResponsiveImages = function ColumnsWithResponsiveImages() {
|
|
151
|
+
return /*#__PURE__*/_react.default.createElement(Masonry, null, new Array(12).fill(0).map(function (_, i) {
|
|
152
|
+
var orientation = i % 3 === 0 ? "portrait" : "landscape";
|
|
153
|
+
var width = orientation === "portrait" ? 200 : 300;
|
|
154
|
+
var height = orientation === "portrait" ? 300 : 200;
|
|
155
|
+
return (
|
|
156
|
+
/*#__PURE__*/
|
|
157
|
+
// Simply being wrapped in an extra `Box` causes a image loading bug in Chrome
|
|
158
|
+
_react.default.createElement(_Box.Box, {
|
|
159
|
+
key: i
|
|
160
|
+
}, /*#__PURE__*/_react.default.createElement(_ResponsiveBox.ResponsiveBox, {
|
|
161
|
+
aspectWidth: width,
|
|
162
|
+
aspectHeight: height,
|
|
163
|
+
maxWidth: "100%",
|
|
164
|
+
bg: "black10",
|
|
165
|
+
mb: 2
|
|
166
|
+
}, /*#__PURE__*/_react.default.createElement(_Image.Image, {
|
|
167
|
+
lazyLoad: true,
|
|
168
|
+
width: "100%",
|
|
169
|
+
height: "100%",
|
|
170
|
+
src: "https://picsum.photos/seed/".concat(i, "/").concat(width, "/").concat(height),
|
|
171
|
+
srcSet: "https://picsum.photos/seed/".concat(i, "/").concat(width, "/").concat(height, " 1x, https://picsum.photos/seed/").concat(i, "/").concat(width * 2, "/").concat(height * 2, " 2x")
|
|
172
|
+
})))
|
|
173
|
+
);
|
|
174
|
+
}));
|
|
175
|
+
};
|
|
176
|
+
|
|
177
|
+
exports.ColumnsWithResponsiveImages = ColumnsWithResponsiveImages;
|
|
178
|
+
ColumnsWithResponsiveImages.displayName = "ColumnsWithResponsiveImages";
|
|
139
179
|
//# sourceMappingURL=ResponsiveBox.story.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/ResponsiveBox/ResponsiveBox.story.tsx"],"names":["Measure","props","width","height","dimensions","setDimensions","ref","check","current","offsetWidth","offsetHeight","window","addEventListener","removeEventListener","aspectWidth","aspectHeight","maxHeight","maxWidth","join","EXAMPLE_ASPECTS","EXAMPLE_MAXIMUMS","title","Basic","map","aspect","i","maximum","j","MaxWidth100","story","name"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/ResponsiveBox/ResponsiveBox.story.tsx"],"names":["Measure","props","width","height","dimensions","setDimensions","ref","check","current","offsetWidth","offsetHeight","window","addEventListener","removeEventListener","aspectWidth","aspectHeight","maxHeight","maxWidth","join","EXAMPLE_ASPECTS","EXAMPLE_MAXIMUMS","title","Basic","map","aspect","i","maximum","j","MaxWidth100","story","name","Masonry","Box","ColumnsWithResponsiveImages","Array","fill","_","orientation"],"mappings":"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","sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { Box } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Image } from \"../Image\"\nimport {\n ResponsiveBox,\n ResponsiveBoxAspectDimensions,\n ResponsiveBoxMaxDimensions,\n ResponsiveBoxProps,\n} from \"./ResponsiveBox\"\n\nconst Measure: React.FC<ResponsiveBoxProps> = (props) => {\n const [dimensions, setDimensions] = useState({ width: 0, height: 0 })\n\n const ref = useRef<null | HTMLDivElement>(null)\n\n const check = () => {\n if (!ref.current) return\n setDimensions({\n width: ref.current!.offsetWidth,\n height: ref.current!.offsetHeight,\n })\n }\n\n useEffect(() => {\n check()\n window.addEventListener(\"resize\", check)\n return () => {\n window.removeEventListener(\"resize\", check)\n }\n })\n\n return (\n <Box width=\"100%\" height=\"100%\" p={1} ref={ref as any}>\n <Text variant=\"xs\" color=\"white100\">\n {props.aspectWidth}:{props.aspectHeight}\n <br />\n {(\"maxWidth\" in props || \"maxHeight\" in props) && (\n <>\n with max dimensions of{\" \"}\n {[\n (props as any).maxHeight || 0,\n (props as any).maxWidth || \"_\",\n ].join(\" × \")}\n <br />\n </>\n )}\n Renders @ {dimensions.width} × {dimensions.height}\n </Text>\n </Box>\n )\n}\n\nconst EXAMPLE_ASPECTS: ResponsiveBoxAspectDimensions[] = [\n { aspectWidth: 300, aspectHeight: 400 },\n { aspectWidth: 400, aspectHeight: 300 },\n]\n\nconst EXAMPLE_MAXIMUMS: ResponsiveBoxMaxDimensions[] = [\n { maxHeight: 200, maxWidth: 200 },\n { maxHeight: 400, maxWidth: 400 },\n { maxHeight: 400 },\n { maxWidth: 400 },\n { maxHeight: 600, maxWidth: 600 },\n { maxHeight: 100, maxWidth: 600 },\n { maxHeight: 1024, maxWidth: 1024 },\n]\n\nexport default { title: \"Components/ResponsiveBox\" }\n\nexport const Basic = () => {\n return (\n <>\n {EXAMPLE_ASPECTS.map((aspect, i) =>\n EXAMPLE_MAXIMUMS.map((maximum, j) => {\n return (\n <ResponsiveBox\n key={[i, j].join(\".\")}\n {...aspect}\n {...maximum}\n bg=\"brand\"\n my={2}\n >\n <Measure {...aspect} {...maximum} />\n </ResponsiveBox>\n )\n })\n )}\n </>\n )\n}\n\nexport const MaxWidth100 = () => {\n return (\n <>\n {EXAMPLE_ASPECTS.map((aspect, i) => {\n return (\n <ResponsiveBox key={i} {...aspect} maxWidth=\"100%\" bg=\"brand\" my={2}>\n <Measure {...aspect} maxWidth=\"100%\" />\n </ResponsiveBox>\n )\n })}\n </>\n )\n}\n\nMaxWidth100.story = {\n name: \"maxWidth: 100%\",\n}\n\nconst Masonry = styled(Box)`\n column-count: 3;\n\n * {\n break-inside: avoid;\n }\n`\n\nexport const ColumnsWithResponsiveImages = () => {\n return (\n <Masonry>\n {new Array(12).fill(0).map((_, i) => {\n const orientation = i % 3 === 0 ? \"portrait\" : \"landscape\"\n const width = orientation === \"portrait\" ? 200 : 300\n const height = orientation === \"portrait\" ? 300 : 200\n\n return (\n // Simply being wrapped in an extra `Box` causes a image loading bug in Chrome\n <Box key={i}>\n <ResponsiveBox\n aspectWidth={width}\n aspectHeight={height}\n maxWidth=\"100%\"\n bg=\"black10\"\n mb={2}\n >\n <Image\n lazyLoad\n width=\"100%\"\n height=\"100%\"\n src={`https://picsum.photos/seed/${i}/${width}/${height}`}\n srcSet={`https://picsum.photos/seed/${i}/${width}/${height} 1x, https://picsum.photos/seed/${i}/${\n width * 2\n }/${height * 2} 2x`}\n />\n </ResponsiveBox>\n </Box>\n )\n })}\n </Masonry>\n )\n}\n"],"file":"ResponsiveBox.story.js"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import { BoxProps } from "../../../dist";
|
|
2
3
|
import { Color } from "../../Theme";
|
|
3
|
-
export interface SpinnerProps {
|
|
4
|
+
export interface SpinnerProps extends Omit<BoxProps, "size"> {
|
|
4
5
|
/** Delay before spinner appears */
|
|
5
6
|
delay?: number;
|
|
6
7
|
/** Width of the spinner */
|
|
@@ -7,11 +7,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.getSize = exports.Spinner = void 0;
|
|
9
9
|
|
|
10
|
+
var _themeGet = require("@styled-system/theme-get");
|
|
11
|
+
|
|
10
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
13
|
|
|
12
14
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
13
15
|
|
|
14
|
-
var
|
|
16
|
+
var _Box = require("../Box");
|
|
17
|
+
|
|
18
|
+
var _excluded = ["delay"];
|
|
15
19
|
|
|
16
20
|
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); }
|
|
17
21
|
|
|
@@ -29,6 +33,10 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
|
|
|
29
33
|
|
|
30
34
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
31
35
|
|
|
36
|
+
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; }
|
|
37
|
+
|
|
38
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
39
|
+
|
|
32
40
|
/**
|
|
33
41
|
* Returns width and height of spinner based on size
|
|
34
42
|
* @param props
|
|
@@ -70,8 +78,11 @@ exports.getSize = getSize;
|
|
|
70
78
|
var spin = (0, _styledComponents.keyframes)(["100%{transform:rotate(360deg)}"]);
|
|
71
79
|
/** Generic Spinner component */
|
|
72
80
|
|
|
73
|
-
var Spinner = function Spinner(
|
|
74
|
-
var
|
|
81
|
+
var Spinner = function Spinner(_ref) {
|
|
82
|
+
var delay = _ref.delay,
|
|
83
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
84
|
+
|
|
85
|
+
var _useState = (0, _react.useState)(delay === 0),
|
|
75
86
|
_useState2 = _slicedToArray(_useState, 2),
|
|
76
87
|
show = _useState2[0],
|
|
77
88
|
setShow = _useState2[1];
|
|
@@ -79,34 +90,34 @@ var Spinner = function Spinner(props) {
|
|
|
79
90
|
(0, _react.useEffect)(function () {
|
|
80
91
|
var timeout = setTimeout(function () {
|
|
81
92
|
setShow(true);
|
|
82
|
-
},
|
|
93
|
+
}, delay);
|
|
83
94
|
return function () {
|
|
84
95
|
clearTimeout(timeout);
|
|
85
96
|
};
|
|
86
|
-
}, []);
|
|
97
|
+
}, [delay]);
|
|
87
98
|
|
|
88
99
|
if (!show) {
|
|
89
100
|
return null;
|
|
90
101
|
}
|
|
91
102
|
|
|
92
|
-
return /*#__PURE__*/_react.default.createElement(SpinnerBar,
|
|
103
|
+
return /*#__PURE__*/_react.default.createElement(SpinnerBar, rest);
|
|
93
104
|
};
|
|
94
105
|
|
|
95
106
|
exports.Spinner = Spinner;
|
|
96
107
|
Spinner.displayName = "Spinner";
|
|
97
|
-
|
|
98
|
-
var SpinnerBar = _styledComponents.default.div.withConfig({
|
|
108
|
+
var SpinnerBar = (0, _styledComponents.default)(_Box.Box).withConfig({
|
|
99
109
|
displayName: "Spinner__SpinnerBar",
|
|
100
110
|
componentId: "sc-1t000ax-0"
|
|
101
|
-
})(["animation:", " 1s infinite linear;
|
|
111
|
+
})(["animation:", " 1s infinite linear;", ";"], spin, function (props) {
|
|
102
112
|
var _getSize = getSize(props),
|
|
103
113
|
width = _getSize.width,
|
|
104
114
|
height = _getSize.height;
|
|
105
115
|
|
|
106
|
-
return "\n background-color: ".concat(props.color === "currentColor" ? "currentColor" : (0,
|
|
107
|
-
});
|
|
116
|
+
return "\n background-color: ".concat(props.color === "currentColor" ? "currentColor" : (0, _themeGet.themeGet)("colors.".concat(props.color))(props), ";\n\n width: ").concat(width, "px;\n height: ").concat(height, "px;\n top: calc(50% - ").concat(height, "px / 2);\n left: calc(50% - ").concat(width, "px / 2);\n ");
|
|
117
|
+
}); // TODO: Remove default `position`, `top`, & `left` props
|
|
108
118
|
|
|
109
119
|
Spinner.defaultProps = {
|
|
120
|
+
position: "absolute",
|
|
110
121
|
delay: 0,
|
|
111
122
|
width: 25,
|
|
112
123
|
height: 6,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Spinner/Spinner.tsx"],"names":["getSize","props","base","width","height","size","spin","keyframes","Spinner","delay","show","setShow","timeout","setTimeout","clearTimeout","SpinnerBar","
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Spinner/Spinner.tsx"],"names":["getSize","props","base","width","height","size","spin","keyframes","Spinner","delay","rest","show","setShow","timeout","setTimeout","clearTimeout","SpinnerBar","Box","color","defaultProps","position","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAGA;;;;;;;;;;;;;;;;;;;;;;;;AAeA;AACA;AACA;AACA;AACO,IAAMA,OAAO,GAAG,SAAVA,OAAU,CAACC,KAAD,EAAyB;AAC9C,MAAMC,IAAI,GAAG;AAAEC,IAAAA,KAAK,EAAE,EAAT;AAAaC,IAAAA,MAAM,EAAE;AAArB,GAAb;;AAEA,UAAQH,KAAK,CAACI,IAAd;AACE,SAAK,OAAL;AACE,aAAO;AACLF,QAAAA,KAAK,EAAED,IAAI,CAACC,KAAL,GAAa,GADf;AAELC,QAAAA,MAAM,EAAEF,IAAI,CAACE,MAAL,GAAc;AAFjB,OAAP;;AAKF,SAAK,QAAL;AACE,aAAO;AACLD,QAAAA,KAAK,EAAED,IAAI,CAACC,KAAL,GAAa,GADf;AAELC,QAAAA,MAAM,EAAEF,IAAI,CAACE,MAAL,GAAc;AAFjB,OAAP;;AAKF,SAAK,OAAL;AACE,aAAO;AACLD,QAAAA,KAAK,EAAED,IAAI,CAACC,KADP;AAELC,QAAAA,MAAM,EAAEF,IAAI,CAACE;AAFR,OAAP;;AAKF;AACE,aAAO;AACLD,QAAAA,KAAK,EAAEF,KAAK,CAACE,KADR;AAELC,QAAAA,MAAM,EAAEH,KAAK,CAACG;AAFT,OAAP;AApBJ;AAyBD,CA5BM;;;AA8BP,IAAME,IAAI,OAAGC,2BAAH,qCAAV;AAMA;;AACO,IAAMC,OAA+B,GAAG,SAAlCA,OAAkC,OAAwB;AAAA,MAArBC,KAAqB,QAArBA,KAAqB;AAAA,MAAXC,IAAW;;AACrE,kBAAwB,qBAASD,KAAK,KAAK,CAAnB,CAAxB;AAAA;AAAA,MAAOE,IAAP;AAAA,MAAaC,OAAb;;AAEA,wBAAU,YAAM;AACd,QAAMC,OAAO,GAAGC,UAAU,CAAC,YAAM;AAC/BF,MAAAA,OAAO,CAAC,IAAD,CAAP;AACD,KAFyB,EAEvBH,KAFuB,CAA1B;AAIA,WAAO,YAAM;AACXM,MAAAA,YAAY,CAACF,OAAD,CAAZ;AACD,KAFD;AAGD,GARD,EAQG,CAACJ,KAAD,CARH;;AAUA,MAAI,CAACE,IAAL,EAAW;AACT,WAAO,IAAP;AACD;;AAED,sBAAO,6BAAC,UAAD,EAAgBD,IAAhB,CAAP;AACD,CAlBM;;;AAAMF,O;AAoBb,IAAMQ,UAAU,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,gDACDX,IADC,EAGZ,UAACL,KAAD,EAAW;AACX,iBAA0BD,OAAO,CAACC,KAAD,CAAjC;AAAA,MAAQE,KAAR,YAAQA,KAAR;AAAA,MAAeC,MAAf,YAAeA,MAAf;;AAEA,6CAEIH,KAAK,CAACiB,KAAN,KAAgB,cAAhB,GACI,cADJ,GAEI,yCAAmBjB,KAAK,CAACiB,KAAzB,GAAkCjB,KAAlC,CAJR,+BAOWE,KAPX,gCAQYC,MARZ,wCASoBA,MATpB,8CAUqBD,KAVrB;AAYD,CAlBa,CAAhB,C,CAoBA;;AACAK,OAAO,CAACW,YAAR,GAAuB;AACrBC,EAAAA,QAAQ,EAAE,UADW;AAErBX,EAAAA,KAAK,EAAE,CAFc;AAGrBN,EAAAA,KAAK,EAAE,EAHc;AAIrBC,EAAAA,MAAM,EAAE,CAJa;AAKrBc,EAAAA,KAAK,EAAE;AALc,CAAvB;AAQAV,OAAO,CAACa,WAAR,GAAsB,SAAtB","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useEffect, useState } from \"react\"\nimport styled, { keyframes } from \"styled-components\"\nimport { BoxProps } from \"../../../dist\"\nimport { Color } from \"../../Theme\"\nimport { Box } from \"../Box\"\n\nexport interface SpinnerProps extends Omit<BoxProps, \"size\"> {\n /** Delay before spinner appears */\n delay?: number\n /** Width of the spinner */\n width?: number\n /** Height of the spinner */\n height?: number\n /** Size of the spinner */\n size?: \"small\" | \"medium\" | \"large\"\n /** Color of the spinner */\n color?: Color | \"currentColor\"\n}\n\n/**\n * Returns width and height of spinner based on size\n * @param props\n */\nexport const getSize = (props: SpinnerProps) => {\n const base = { width: 25, height: 6 }\n\n switch (props.size) {\n case \"small\":\n return {\n width: base.width * 0.5,\n height: base.height * 0.5,\n }\n\n case \"medium\":\n return {\n width: base.width * 0.8,\n height: base.height * 0.8,\n }\n\n case \"large\":\n return {\n width: base.width,\n height: base.height,\n }\n\n default:\n return {\n width: props.width,\n height: props.height,\n }\n }\n}\n\nconst spin = keyframes`\n 100% {\n transform: rotate(360deg)\n }\n`\n\n/** Generic Spinner component */\nexport const Spinner: React.FC<SpinnerProps> = ({ delay, ...rest }) => {\n const [show, setShow] = useState(delay === 0)\n\n useEffect(() => {\n const timeout = setTimeout(() => {\n setShow(true)\n }, delay)\n\n return () => {\n clearTimeout(timeout)\n }\n }, [delay])\n\n if (!show) {\n return null\n }\n\n return <SpinnerBar {...rest} />\n}\n\nconst SpinnerBar = styled(Box)<SpinnerProps>`\n animation: ${spin} 1s infinite linear;\n\n ${(props) => {\n const { width, height } = getSize(props)\n\n return `\n background-color: ${\n props.color === \"currentColor\"\n ? \"currentColor\"\n : themeGet(`colors.${props.color}`)(props)\n };\n\n width: ${width}px;\n height: ${height}px;\n top: calc(50% - ${height}px / 2);\n left: calc(50% - ${width}px / 2);\n `\n }};\n`\n// TODO: Remove default `position`, `top`, & `left` props\nSpinner.defaultProps = {\n position: \"absolute\",\n delay: 0,\n width: 25,\n height: 6,\n color: \"black100\",\n}\n\nSpinner.displayName = \"Spinner\"\n"],"file":"Spinner.js"}
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
declare const _default: {
|
|
2
2
|
title: string;
|
|
3
|
+
parameters: {
|
|
4
|
+
chromatic: {
|
|
5
|
+
disable: boolean;
|
|
6
|
+
};
|
|
7
|
+
};
|
|
3
8
|
};
|
|
4
9
|
export default _default;
|
|
10
|
+
export declare const Default: () => JSX.Element;
|
|
5
11
|
export declare const DefaultSpinner: () => JSX.Element;
|
|
6
12
|
export declare const SpinnerWithDelayedShow: {
|
|
7
13
|
(): JSX.Element;
|
|
8
14
|
story: {
|
|
9
15
|
name: string;
|
|
10
|
-
parameters: {
|
|
11
|
-
chromatic: {
|
|
12
|
-
disable: boolean;
|
|
13
|
-
};
|
|
14
|
-
};
|
|
15
16
|
};
|
|
16
17
|
};
|
|
@@ -3,19 +3,41 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.SpinnerWithDelayedShow = exports.DefaultSpinner = void 0;
|
|
6
|
+
exports.default = exports.SpinnerWithDelayedShow = exports.DefaultSpinner = exports.Default = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
10
|
+
var _storybookStates = require("storybook-states");
|
|
11
|
+
|
|
10
12
|
var _Spinner = require("./Spinner");
|
|
11
13
|
|
|
12
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
15
|
|
|
14
16
|
var _default = {
|
|
15
|
-
title: "Components/Spinner"
|
|
17
|
+
title: "Components/Spinner",
|
|
18
|
+
parameters: {
|
|
19
|
+
chromatic: {
|
|
20
|
+
disable: true
|
|
21
|
+
}
|
|
22
|
+
}
|
|
16
23
|
};
|
|
17
24
|
exports.default = _default;
|
|
18
25
|
|
|
26
|
+
var Default = function Default() {
|
|
27
|
+
return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
|
|
28
|
+
states: [{}, {
|
|
29
|
+
color: "brand",
|
|
30
|
+
size: "small",
|
|
31
|
+
m: 2
|
|
32
|
+
}]
|
|
33
|
+
}, /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, {
|
|
34
|
+
position: "static"
|
|
35
|
+
}));
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
exports.Default = Default;
|
|
39
|
+
Default.displayName = "Default";
|
|
40
|
+
|
|
19
41
|
var DefaultSpinner = function DefaultSpinner() {
|
|
20
42
|
return /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, null);
|
|
21
43
|
};
|
|
@@ -32,11 +54,6 @@ var SpinnerWithDelayedShow = function SpinnerWithDelayedShow() {
|
|
|
32
54
|
exports.SpinnerWithDelayedShow = SpinnerWithDelayedShow;
|
|
33
55
|
SpinnerWithDelayedShow.displayName = "SpinnerWithDelayedShow";
|
|
34
56
|
SpinnerWithDelayedShow.story = {
|
|
35
|
-
name: "Spinner with delayed show"
|
|
36
|
-
parameters: {
|
|
37
|
-
chromatic: {
|
|
38
|
-
disable: true
|
|
39
|
-
}
|
|
40
|
-
}
|
|
57
|
+
name: "Spinner with delayed show"
|
|
41
58
|
};
|
|
42
59
|
//# sourceMappingURL=Spinner.story.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Spinner/Spinner.story.tsx"],"names":["title","
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Spinner/Spinner.story.tsx"],"names":["title","parameters","chromatic","disable","Default","color","size","m","DefaultSpinner","SpinnerWithDelayedShow","story","name"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE,oBADM;AAEbC,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAE;AAAEC,MAAAA,OAAO,EAAE;AAAX;AAAb;AAFC,C;;;AAKR,IAAMC,OAAO,GAAG,SAAVA,OAAU;AAAA,sBACrB,6BAAC,uBAAD;AAAsB,IAAA,MAAM,EAAE,CAAC,EAAD,EAAK;AAAEC,MAAAA,KAAK,EAAE,OAAT;AAAkBC,MAAAA,IAAI,EAAE,OAAxB;AAAiCC,MAAAA,CAAC,EAAE;AAApC,KAAL;AAA9B,kBACE,6BAAC,gBAAD;AAAS,IAAA,QAAQ,EAAC;AAAlB,IADF,CADqB;AAAA,CAAhB;;;AAAMH,O;;AAMN,IAAMI,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAClC,sBAAO,6BAAC,gBAAD,OAAP;AACD,CAFM;;;AAAMA,c;;AAIN,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB,GAAM;AAC1C,sBAAO,6BAAC,gBAAD;AAAS,IAAA,KAAK,EAAE;AAAhB,IAAP;AACD,CAFM;;;AAAMA,sB;AAIbA,sBAAsB,CAACC,KAAvB,GAA+B;AAC7BC,EAAAA,IAAI,EAAE;AADuB,CAA/B","sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Spinner, SpinnerProps } from \"./Spinner\"\n\nexport default {\n title: \"Components/Spinner\",\n parameters: { chromatic: { disable: true } },\n}\n\nexport const Default = () => (\n <States<SpinnerProps> states={[{}, { color: \"brand\", size: \"small\", m: 2 }]}>\n <Spinner position=\"static\" />\n </States>\n)\n\nexport const DefaultSpinner = () => {\n return <Spinner />\n}\n\nexport const SpinnerWithDelayedShow = () => {\n return <Spinner delay={1000} />\n}\n\nSpinnerWithDelayedShow.story = {\n name: \"Spinner with delayed show\",\n}\n"],"file":"Spinner.story.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Text/Text.tsx"],"names":["textColor","prop","cssProperty","key","textTransform","textMixin","typography","color","overflowEllipsisMixin","css","Text","Box","props","v2","variants","V2_TEXT_VARIANTS","small","large","v3","V3_TEXT_VARIANTS","overflowEllipsis","lineClamp","displayName","defaultProps","fontFamily","variant"],"mappings":";;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AAWA;;AACA;;;;;;AAwBA,IAAMA,SAAS,GAAG,yBAAM;AACtBC,EAAAA,IAAI,EAAE,WADgB;AAEtBC,EAAAA,WAAW,EAAE,OAFS;AAGtBC,EAAAA,GAAG,EAAE;AAHiB,CAAN,CAAlB;AAcA,IAAMC,aAAa,GAAG,0BAAO;AAAEA,EAAAA,aAAa,EAAE;AAAjB,CAAP,CAAtB;AAEA;;AACO,IAAMC,SAAS,GAAG,2BAAQC,wBAAR,EAAoBC,mBAApB,EAA2BP,SAA3B,EAAsCI,aAAtC,CAAlB;AAEP;;;AACO,IAAMI,qBAAqB,OAAGC,qBAAH,iEAA3B;AAMP;;;;AAQA;AACO,IAAMC,IAAI,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,sBAEX,UAACC,KAAD,EAAW;AACX,SAAO,2BAAeA,KAAf,EAAsB;AAC3BC,IAAAA,EAAE,MAAEJ,qBAAF,oDACE,2BAAQ;AAAEK,MAAAA,QAAQ,EAAEC,iBAAiBC;AAA7B,KAAR,CADF,EAEEX,SAFF,EAImB,wBAAS,eAAT,CAJnB,EAKI,2BAAQ;AAAES,MAAAA,QAAQ,EAAEC,iBAAiBE;AAA7B,KAAR,CALJ,EAMIZ,SANJ,CADyB;AAU3Ba,IAAAA,EAAE,MAAET,qBAAF,iBACE,2BAAQ;AAAEK,MAAAA,QAAQ,EAAEK;AAAZ,KAAR,CADF,EAEEd,SAFF;AAVyB,GAAtB,CAAP;AAeD,CAlBY,EAoBX,UAACO,KAAD,EAAW;AACX,aAAOH,qBAAP,iBACIG,KAAK,CAACQ,gBAAN,IAA0BZ,qBAD9B,EAEII,KAAK,CAACS,SAAN,QACFZ,qBADE,gHAIsBG,KAAK,CAACS,SAJ5B,EAKcT,KAAK,CAACS,SALpB,CAFJ;AAWD,CAhCY,CAAV;;AAoCPX,IAAI,CAACY,WAAL,GAAmB,MAAnB;AAEAZ,IAAI,CAACa,YAAL,GAAoB;AAClBC,EAAAA,UAAU,EAAE,MADM;AAElBC,EAAAA,OAAO,EAAE;AAFS,CAApB","sourcesContent":["import { TextVariant } from \"@artsy/palette-tokens/dist/typography/types\"\nimport { TEXT_VARIANTS as V2_TEXT_VARIANTS } from \"@artsy/palette-tokens/dist/typography/v2\"\nimport { TEXT_VARIANTS as V3_TEXT_VARIANTS } from \"@artsy/palette-tokens/dist/typography/v3\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport styled, { css } from \"styled-components\"\nimport {\n color,\n ColorProps,\n compose,\n ResponsiveValue,\n style,\n system,\n typography,\n TypographyProps,\n variant,\n} from \"styled-system\"\nimport { Color, getThemeConfig } from \"../../Theme\"\nimport { Box, BoxProps } from \"../Box\"\n\n/** BaseTextProps */\nexport type BaseTextProps = TypographyProps &\n Omit<ColorProps, \"color\"> & {\n /**\n * @description\n * Variants of the text. Possible to pass an array that\n * behaves accordingly to the media breakpoints [\"sm\", \"md\", \"lg\", \"xl\"]\n * @example\n * \"sm\"\n * \"md\"\n * [\"md\", \"sm\"]\n * @see {@link TextVariant}\n */\n variant?: ResponsiveValue<TextVariant>\n textColor?: ResponsiveValue<Color>\n /**\n * Max number of lines before truncating the content with an ellipsis at the end of the last line.\n * Overwriting display is required for this.\n */\n lineClamp?: number\n }\n\nconst textColor = style({\n prop: \"textColor\",\n cssProperty: \"color\",\n key: \"colors\",\n})\n\nexport type TextTransform =\n | \"none\"\n | \"capitalize\"\n | \"uppercase\"\n | \"lowercase\"\n | \"initial\"\n | \"inherit\"\n\nconst textTransform = system({ textTransform: true })\n\n/** styled functions for Text */\nexport const textMixin = compose(typography, color, textColor, textTransform)\n\n/** Adds ellipsis to overflowing text */\nexport const overflowEllipsisMixin = css`\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n`\n\n/** TextProps */\nexport type TextProps = BaseTextProps &\n BoxProps & {\n overflowEllipsis?: boolean\n textTransform?: ResponsiveValue<TextTransform>\n lineClamp?: ResponsiveValue<number>\n }\n\n/** Text */\nexport const Text = styled(Box)<TextProps>`\n && {\n ${(props) => {\n return getThemeConfig(props, {\n v2: css`\n ${variant({ variants: V2_TEXT_VARIANTS.small })}\n ${textMixin}\n\n @media (min-width: ${themeGet(\"breakpoints.0\")}) {\n ${variant({ variants: V2_TEXT_VARIANTS.large })}\n ${textMixin}\n }\n `,\n v3: css`\n ${variant({ variants: V3_TEXT_VARIANTS })}\n ${textMixin}\n `,\n })\n }}\n\n ${(props) => {\n return css`\n ${props.overflowEllipsis && overflowEllipsisMixin}\n ${props.lineClamp &&\n css`\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ${props.lineClamp};\n line-clamp: ${props.lineClamp};\n overflow: hidden;\n `}\n `\n }}\n }\n`\n\nText.displayName = \"Text\"\n\nText.defaultProps = {\n fontFamily: \"sans\",\n variant: \"
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Text/Text.tsx"],"names":["textColor","prop","cssProperty","key","textTransform","textMixin","typography","color","overflowEllipsisMixin","css","Text","Box","props","v2","variants","V2_TEXT_VARIANTS","small","large","v3","V3_TEXT_VARIANTS","overflowEllipsis","lineClamp","displayName","defaultProps","fontFamily","variant"],"mappings":";;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AAWA;;AACA;;;;;;AAwBA,IAAMA,SAAS,GAAG,yBAAM;AACtBC,EAAAA,IAAI,EAAE,WADgB;AAEtBC,EAAAA,WAAW,EAAE,OAFS;AAGtBC,EAAAA,GAAG,EAAE;AAHiB,CAAN,CAAlB;AAcA,IAAMC,aAAa,GAAG,0BAAO;AAAEA,EAAAA,aAAa,EAAE;AAAjB,CAAP,CAAtB;AAEA;;AACO,IAAMC,SAAS,GAAG,2BAAQC,wBAAR,EAAoBC,mBAApB,EAA2BP,SAA3B,EAAsCI,aAAtC,CAAlB;AAEP;;;AACO,IAAMI,qBAAqB,OAAGC,qBAAH,iEAA3B;AAMP;;;;AAQA;AACO,IAAMC,IAAI,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,sBAEX,UAACC,KAAD,EAAW;AACX,SAAO,2BAAeA,KAAf,EAAsB;AAC3BC,IAAAA,EAAE,MAAEJ,qBAAF,oDACE,2BAAQ;AAAEK,MAAAA,QAAQ,EAAEC,iBAAiBC;AAA7B,KAAR,CADF,EAEEX,SAFF,EAImB,wBAAS,eAAT,CAJnB,EAKI,2BAAQ;AAAES,MAAAA,QAAQ,EAAEC,iBAAiBE;AAA7B,KAAR,CALJ,EAMIZ,SANJ,CADyB;AAU3Ba,IAAAA,EAAE,MAAET,qBAAF,iBACE,2BAAQ;AAAEK,MAAAA,QAAQ,EAAEK;AAAZ,KAAR,CADF,EAEEd,SAFF;AAVyB,GAAtB,CAAP;AAeD,CAlBY,EAoBX,UAACO,KAAD,EAAW;AACX,aAAOH,qBAAP,iBACIG,KAAK,CAACQ,gBAAN,IAA0BZ,qBAD9B,EAEII,KAAK,CAACS,SAAN,QACFZ,qBADE,gHAIsBG,KAAK,CAACS,SAJ5B,EAKcT,KAAK,CAACS,SALpB,CAFJ;AAWD,CAhCY,CAAV;;AAoCPX,IAAI,CAACY,WAAL,GAAmB,MAAnB;AAEAZ,IAAI,CAACa,YAAL,GAAoB;AAClBC,EAAAA,UAAU,EAAE,MADM;AAElBC,EAAAA,OAAO,EAAE;AAFS,CAApB","sourcesContent":["import { TextVariant } from \"@artsy/palette-tokens/dist/typography/types\"\nimport { TEXT_VARIANTS as V2_TEXT_VARIANTS } from \"@artsy/palette-tokens/dist/typography/v2\"\nimport { TEXT_VARIANTS as V3_TEXT_VARIANTS } from \"@artsy/palette-tokens/dist/typography/v3\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport styled, { css } from \"styled-components\"\nimport {\n color,\n ColorProps,\n compose,\n ResponsiveValue,\n style,\n system,\n typography,\n TypographyProps,\n variant,\n} from \"styled-system\"\nimport { Color, getThemeConfig } from \"../../Theme\"\nimport { Box, BoxProps } from \"../Box\"\n\n/** BaseTextProps */\nexport type BaseTextProps = TypographyProps &\n Omit<ColorProps, \"color\"> & {\n /**\n * @description\n * Variants of the text. Possible to pass an array that\n * behaves accordingly to the media breakpoints [\"sm\", \"md\", \"lg\", \"xl\"]\n * @example\n * \"sm\"\n * \"md\"\n * [\"md\", \"sm\"]\n * @see {@link TextVariant}\n */\n variant?: ResponsiveValue<TextVariant>\n textColor?: ResponsiveValue<Color>\n /**\n * Max number of lines before truncating the content with an ellipsis at the end of the last line.\n * Overwriting display is required for this.\n */\n lineClamp?: number\n }\n\nconst textColor = style({\n prop: \"textColor\",\n cssProperty: \"color\",\n key: \"colors\",\n})\n\nexport type TextTransform =\n | \"none\"\n | \"capitalize\"\n | \"uppercase\"\n | \"lowercase\"\n | \"initial\"\n | \"inherit\"\n\nconst textTransform = system({ textTransform: true })\n\n/** styled functions for Text */\nexport const textMixin = compose(typography, color, textColor, textTransform)\n\n/** Adds ellipsis to overflowing text */\nexport const overflowEllipsisMixin = css`\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n`\n\n/** TextProps */\nexport type TextProps = BaseTextProps &\n BoxProps & {\n overflowEllipsis?: boolean\n textTransform?: ResponsiveValue<TextTransform>\n lineClamp?: ResponsiveValue<number>\n }\n\n/** Text */\nexport const Text = styled(Box)<TextProps>`\n && {\n ${(props) => {\n return getThemeConfig(props, {\n v2: css`\n ${variant({ variants: V2_TEXT_VARIANTS.small })}\n ${textMixin}\n\n @media (min-width: ${themeGet(\"breakpoints.0\")}) {\n ${variant({ variants: V2_TEXT_VARIANTS.large })}\n ${textMixin}\n }\n `,\n v3: css`\n ${variant({ variants: V3_TEXT_VARIANTS })}\n ${textMixin}\n `,\n })\n }}\n\n ${(props) => {\n return css`\n ${props.overflowEllipsis && overflowEllipsisMixin}\n ${props.lineClamp &&\n css`\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ${props.lineClamp};\n line-clamp: ${props.lineClamp};\n overflow: hidden;\n `}\n `\n }}\n }\n`\n\nText.displayName = \"Text\"\n\nText.defaultProps = {\n fontFamily: \"sans\",\n variant: \"sm\",\n}\n"],"file":"Text.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette",
|
|
3
|
-
"version": "20.0.
|
|
3
|
+
"version": "20.0.3",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -111,12 +111,12 @@
|
|
|
111
111
|
"storybook-states": "1.2.0",
|
|
112
112
|
"styled-components": "4.3.2",
|
|
113
113
|
"ts-node": "8.1.0",
|
|
114
|
-
"typescript": "4.
|
|
114
|
+
"typescript": "4.7.3",
|
|
115
115
|
"typescript-styled-plugin": "0.10.0",
|
|
116
116
|
"webpack": "5"
|
|
117
117
|
},
|
|
118
118
|
"dependencies": {
|
|
119
|
-
"@artsy/palette-tokens": "^3.0.
|
|
119
|
+
"@artsy/palette-tokens": "^3.0.1",
|
|
120
120
|
"@seznam/compose-react-refs": "^1.0.6",
|
|
121
121
|
"@styled-system/theme-get": "^5.1.2",
|
|
122
122
|
"lodash": "^4.17.21",
|
|
@@ -178,5 +178,5 @@
|
|
|
178
178
|
"<rootDir>/www/"
|
|
179
179
|
]
|
|
180
180
|
},
|
|
181
|
-
"gitHead": "
|
|
181
|
+
"gitHead": "a3b1522ca74ee4e9502d0eb53c48360e1cb93620"
|
|
182
182
|
}
|