@artsy/palette 19.1.5 → 19.4.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/CHANGELOG.md +55 -0
- package/dist/elements/Badge/Badge.js +4 -4
- package/dist/elements/Badge/Badge.js.map +1 -1
- package/dist/elements/Expandable/Expandable.js +4 -1
- package/dist/elements/Expandable/Expandable.js.map +1 -1
- package/dist/elements/Expandable/Expandable.story.js +12 -0
- package/dist/elements/Expandable/Expandable.story.js.map +1 -1
- package/dist/elements/Marquee/Marquee.js +4 -4
- package/dist/elements/Marquee/Marquee.js.map +1 -1
- package/dist/elements/Marquee/Marquee.story.js +2 -2
- package/dist/elements/Marquee/Marquee.story.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,58 @@
|
|
|
1
|
+
# v19.4.0 (Tue Apr 05 2022)
|
|
2
|
+
|
|
3
|
+
#### 🚀 Enhancement
|
|
4
|
+
|
|
5
|
+
- feat(TX-255): ability to close expandable within expandable content [#1151](https://github.com/artsy/palette/pull/1151) ([@rquartararo](https://github.com/rquartararo))
|
|
6
|
+
|
|
7
|
+
#### 🐛 Bug Fix
|
|
8
|
+
|
|
9
|
+
- fix: bug fix ([@rquartararo](https://github.com/rquartararo))
|
|
10
|
+
- feat: add story option with close button ([@rquartararo](https://github.com/rquartararo))
|
|
11
|
+
- feat: pass setExpanded to children ([@rquartararo](https://github.com/rquartararo))
|
|
12
|
+
|
|
13
|
+
#### Authors: 1
|
|
14
|
+
|
|
15
|
+
- Rachel Quartararo ([@rquartararo](https://github.com/rquartararo))
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
# v19.3.0 (Thu Mar 31 2022)
|
|
20
|
+
|
|
21
|
+
#### 🚀 Enhancement
|
|
22
|
+
|
|
23
|
+
- GRO-836 Update: Marquee with newly decided default coloring [#1150](https://github.com/artsy/palette/pull/1150) ([@The-Beez-Kneez](https://github.com/The-Beez-Kneez))
|
|
24
|
+
|
|
25
|
+
#### 🐛 Bug Fix
|
|
26
|
+
|
|
27
|
+
- Update: Marquee with newly decided default coloring ([@The-Beez-Kneez](https://github.com/The-Beez-Kneez))
|
|
28
|
+
|
|
29
|
+
#### Authors: 1
|
|
30
|
+
|
|
31
|
+
- Ana Lisa Sutherland ([@The-Beez-Kneez](https://github.com/The-Beez-Kneez))
|
|
32
|
+
|
|
33
|
+
---
|
|
34
|
+
|
|
35
|
+
# v19.2.0 (Thu Mar 31 2022)
|
|
36
|
+
|
|
37
|
+
#### 🚀 Enhancement
|
|
38
|
+
|
|
39
|
+
- GRO-836: Adding design update for gallery attributes, until further approval on designs met [#1149](https://github.com/artsy/palette/pull/1149) ([@The-Beez-Kneez](https://github.com/The-Beez-Kneez))
|
|
40
|
+
|
|
41
|
+
#### 🐛 Bug Fix
|
|
42
|
+
|
|
43
|
+
- Adding design update for badges, until further approval on designs met ([@The-Beez-Kneez](https://github.com/The-Beez-Kneez))
|
|
44
|
+
|
|
45
|
+
#### 🏠 Internal
|
|
46
|
+
|
|
47
|
+
- chore(deps): update dep typescript from 4.6.2 to v4.6.3 [#1148](https://github.com/artsy/palette/pull/1148) ([@renovate-bot](https://github.com/renovate-bot))
|
|
48
|
+
|
|
49
|
+
#### Authors: 2
|
|
50
|
+
|
|
51
|
+
- Ana Lisa Sutherland ([@The-Beez-Kneez](https://github.com/The-Beez-Kneez))
|
|
52
|
+
- WhiteSource Renovate ([@renovate-bot](https://github.com/renovate-bot))
|
|
53
|
+
|
|
54
|
+
---
|
|
55
|
+
|
|
1
56
|
# v19.1.5 (Thu Mar 24 2022)
|
|
2
57
|
|
|
3
58
|
#### 🐛 Bug Fix
|
|
@@ -37,12 +37,12 @@ var VARIANTS = {
|
|
|
37
37
|
color: "black100"
|
|
38
38
|
},
|
|
39
39
|
defaultDark: {
|
|
40
|
-
backgroundColor: "
|
|
41
|
-
color: "
|
|
40
|
+
backgroundColor: "black10",
|
|
41
|
+
color: "black100"
|
|
42
42
|
},
|
|
43
43
|
brand: {
|
|
44
|
-
backgroundColor: "
|
|
45
|
-
color: "
|
|
44
|
+
backgroundColor: "black10",
|
|
45
|
+
color: "black100"
|
|
46
46
|
}
|
|
47
47
|
};
|
|
48
48
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Badge/Badge.tsx"],"names":["VARIANTS","defaultLight","backgroundColor","color","defaultDark","brand","Badge","children","rest","defaultProps","variant","Container","Box","variants"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,QAAQ,GAAG;AACfC,EAAAA,YAAY,EAAE;AACZC,IAAAA,eAAe,EAAE,SADL;AAEZC,IAAAA,KAAK,EAAE;AAFK,GADC;AAKfC,EAAAA,WAAW,EAAE;AACXF,IAAAA,eAAe,EAAE,
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Badge/Badge.tsx"],"names":["VARIANTS","defaultLight","backgroundColor","color","defaultDark","brand","Badge","children","rest","defaultProps","variant","Container","Box","variants"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,QAAQ,GAAG;AACfC,EAAAA,YAAY,EAAE;AACZC,IAAAA,eAAe,EAAE,SADL;AAEZC,IAAAA,KAAK,EAAE;AAFK,GADC;AAKfC,EAAAA,WAAW,EAAE;AACXF,IAAAA,eAAe,EAAE,SADN;AAEXC,IAAAA,KAAK,EAAE;AAFI,GALE;AASfE,EAAAA,KAAK,EAAE;AACLH,IAAAA,eAAe,EAAE,SADZ;AAELC,IAAAA,KAAK,EAAE;AAFF;AATQ,CAAjB;;AAoBO,IAAMG,KAA2B,GAAG,SAA9BA,KAA8B,OAA2B;AAAA,MAAxBC,QAAwB,QAAxBA,QAAwB;AAAA,MAAXC,IAAW;;AACpE,sBACE,oBAAC,SAAD;AAAW,IAAA,OAAO,EAAC,aAAnB;AAAiC,IAAA,QAAQ,EAAC;AAA1C,KAAqDA,IAArD,gBACE,oBAAC,aAAD;AAAM,IAAA,OAAO,EAAC,IAAd;AAAmB,IAAA,EAAE,EAAE,GAAvB;AAA4B,IAAA,gBAAgB;AAA5C,KACGD,QADH,CADF,CADF;AAOD,CARM;;;AAAMD,K;AAUbA,KAAK,CAACG,YAAN,GAAqB;AACnBC,EAAAA,OAAO,EAAE;AADU,CAArB;AAIA,IAAMC,SAAS,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,aACX,2BAAQ;AAAEC,EAAAA,QAAQ,EAAEb;AAAZ,CAAR,CADW,CAAf","sourcesContent":["import { Text } from \"@artsy/palette\"\nimport * as React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\n\nconst VARIANTS = {\n defaultLight: {\n backgroundColor: \"black10\",\n color: \"black100\",\n },\n defaultDark: {\n backgroundColor: \"black10\",\n color: \"black100\",\n },\n brand: {\n backgroundColor: \"black10\",\n color: \"black100\",\n },\n}\n\nexport interface BadgeProps extends BoxProps {\n variant?: keyof typeof VARIANTS\n children: React.ReactNode\n}\n\nexport const Badge: React.FC<BadgeProps> = ({ children, ...rest }) => {\n return (\n <Container display=\"inline-flex\" maxWidth=\"100%\" {...rest}>\n <Text variant=\"xs\" px={0.5} overflowEllipsis>\n {children}\n </Text>\n </Container>\n )\n}\n\nBadge.defaultProps = {\n variant: \"defaultDark\",\n}\n\nconst Container = styled(Box)`\n ${variant({ variants: VARIANTS })}\n`\n"],"file":"Badge.js"}
|
|
@@ -118,7 +118,10 @@ var Expandable = function Expandable(_ref) {
|
|
|
118
118
|
ml: 1,
|
|
119
119
|
mr: tokens.mr,
|
|
120
120
|
"aria-hidden": "true"
|
|
121
|
-
})), expanded && children
|
|
121
|
+
})), expanded && (typeof children === "function" ? children({
|
|
122
|
+
setExpanded: setExpanded,
|
|
123
|
+
expanded: expanded
|
|
124
|
+
}) : children));
|
|
122
125
|
};
|
|
123
126
|
|
|
124
127
|
exports.Expandable = Expandable;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Expandable/Expandable.tsx"],"names":["Expandable","label","defaultExpanded","expanded","children","disabled","onClick","rest","tokens","v2","borderColor","textProps","variant","fontWeight","chevronSize","mr","undefined","v3","setExpanded","boxProps","clickableProps","handleClick","event","prevExpanded"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA;AACA;AACA;AACO,IAAMA,UAAqC,GAAG,SAAxCA,UAAwC,OAO/C;AAAA,MANJC,KAMI,QANJA,KAMI;AAAA,MALMC,eAKN,QALJC,QAKI;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADDC,IACC;;AACJ,MAAMC,MAAM,GAAG,2BAAe;AAC5BC,IAAAA,EAAE,EAAE;AACFC,MAAAA,WAAW,EAAE,SADX;AAEFC,MAAAA,SAAS,EAAE;AAAEC,QAAAA,OAAO,EAAE,OAAX;AAAoBC,QAAAA,UAAU,EAAE;AAAhC,OAFT;AAGFC,MAAAA,WAAW,EAAE,EAHX;AAIFC,MAAAA,EAAE,EAAEC;AAJF,KADwB;AAO5BC,IAAAA,EAAE,EAAE;AACFP,MAAAA,WAAW,EAAE,SADX;AAEFC,MAAAA,SAAS,EAAE;AAAEC,QAAAA,OAAO,EAAE;AAAX,OAFT;AAGFE,MAAAA,WAAW,EAAE,EAHX;AAIFC,MAAAA,EAAE,EAAE;AAJF;AAPwB,GAAf,CAAf;;AAeA,kBAAgC,qBAASb,eAAT,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBe,WAAjB;;AAEA,uBAAmC,wBAAcX,IAAd,CAAnC;AAAA;AAAA,MAAOY,QAAP;AAAA,MAAiBC,cAAjB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAClBC,KADkB,EAEf;AACHJ,IAAAA,WAAW,CAAC,UAACK,YAAD;AAAA,aAAkB,CAACA,YAAnB;AAAA,KAAD,CAAX;AACAjB,IAAAA,OAAO,IAAIA,OAAO,CAACgB,KAAD,CAAlB;AACD,GALD;;AAOA,sBACE,6BAAC,QAAD,EAASH,QAAT,eACE,6BAAC,oBAAD;AACE,IAAA,KAAK,EAAC,MADR;AAEE,IAAA,OAAO,EAAC,MAFV;AAGE,IAAA,UAAU,EAAC,QAHb;AAIE,IAAA,cAAc,EAAC,eAJjB;AAKE,IAAA,SAAS,EAAC,WALZ;AAME,IAAA,WAAW,EAAEX,MAAM,CAACE,WANtB;AAOE,IAAA,EAAE,EAAE,CAPN;AAQE,IAAA,QAAQ,EAAEL,QARZ;AASE,qBAAeF,QATjB;AAUE,IAAA,OAAO,EAAEkB;AAVX,KAWMD,cAXN,gBAaE,6BAAC,UAAD;AAAM,IAAA,IAAI,EAAE,CAAZ;AAAe,IAAA,SAAS,EAAE,EAA1B;AAA8B,IAAA,OAAO,EAAC,MAAtC;AAA6C,IAAA,UAAU,EAAC;AAAxD,KACG,oBAAOnB,KAAP,iBAAgB,6BAAC,UAAD,EAAUO,MAAM,CAACG,SAAjB,EAA6BV,KAA7B,CAAhB,GAA6DA,KADhE,CAbF,EAiBG,CAACI,QAAD,iBACC,6BAAC,iBAAD;AACE,IAAA,SAAS,EAAEF,QAAQ,GAAG,IAAH,GAAU,MAD/B;AAEE,IAAA,KAAK,EAAEK,MAAM,CAACM,WAFhB;AAGE,IAAA,MAAM,EAAEN,MAAM,CAACM,WAHjB;AAIE,IAAA,EAAE,EAAE,CAJN;AAKE,IAAA,EAAE,EAAEN,MAAM,CAACO,EALb;AAME,mBAAY;AANd,IAlBJ,CADF,EA8BGZ,QAAQ,
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Expandable/Expandable.tsx"],"names":["Expandable","label","defaultExpanded","expanded","children","disabled","onClick","rest","tokens","v2","borderColor","textProps","variant","fontWeight","chevronSize","mr","undefined","v3","setExpanded","boxProps","clickableProps","handleClick","event","prevExpanded"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA;AACA;AACA;AACO,IAAMA,UAAqC,GAAG,SAAxCA,UAAwC,OAO/C;AAAA,MANJC,KAMI,QANJA,KAMI;AAAA,MALMC,eAKN,QALJC,QAKI;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADDC,IACC;;AACJ,MAAMC,MAAM,GAAG,2BAAe;AAC5BC,IAAAA,EAAE,EAAE;AACFC,MAAAA,WAAW,EAAE,SADX;AAEFC,MAAAA,SAAS,EAAE;AAAEC,QAAAA,OAAO,EAAE,OAAX;AAAoBC,QAAAA,UAAU,EAAE;AAAhC,OAFT;AAGFC,MAAAA,WAAW,EAAE,EAHX;AAIFC,MAAAA,EAAE,EAAEC;AAJF,KADwB;AAO5BC,IAAAA,EAAE,EAAE;AACFP,MAAAA,WAAW,EAAE,SADX;AAEFC,MAAAA,SAAS,EAAE;AAAEC,QAAAA,OAAO,EAAE;AAAX,OAFT;AAGFE,MAAAA,WAAW,EAAE,EAHX;AAIFC,MAAAA,EAAE,EAAE;AAJF;AAPwB,GAAf,CAAf;;AAeA,kBAAgC,qBAASb,eAAT,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBe,WAAjB;;AAEA,uBAAmC,wBAAcX,IAAd,CAAnC;AAAA;AAAA,MAAOY,QAAP;AAAA,MAAiBC,cAAjB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAClBC,KADkB,EAEf;AACHJ,IAAAA,WAAW,CAAC,UAACK,YAAD;AAAA,aAAkB,CAACA,YAAnB;AAAA,KAAD,CAAX;AACAjB,IAAAA,OAAO,IAAIA,OAAO,CAACgB,KAAD,CAAlB;AACD,GALD;;AAOA,sBACE,6BAAC,QAAD,EAASH,QAAT,eACE,6BAAC,oBAAD;AACE,IAAA,KAAK,EAAC,MADR;AAEE,IAAA,OAAO,EAAC,MAFV;AAGE,IAAA,UAAU,EAAC,QAHb;AAIE,IAAA,cAAc,EAAC,eAJjB;AAKE,IAAA,SAAS,EAAC,WALZ;AAME,IAAA,WAAW,EAAEX,MAAM,CAACE,WANtB;AAOE,IAAA,EAAE,EAAE,CAPN;AAQE,IAAA,QAAQ,EAAEL,QARZ;AASE,qBAAeF,QATjB;AAUE,IAAA,OAAO,EAAEkB;AAVX,KAWMD,cAXN,gBAaE,6BAAC,UAAD;AAAM,IAAA,IAAI,EAAE,CAAZ;AAAe,IAAA,SAAS,EAAE,EAA1B;AAA8B,IAAA,OAAO,EAAC,MAAtC;AAA6C,IAAA,UAAU,EAAC;AAAxD,KACG,oBAAOnB,KAAP,iBAAgB,6BAAC,UAAD,EAAUO,MAAM,CAACG,SAAjB,EAA6BV,KAA7B,CAAhB,GAA6DA,KADhE,CAbF,EAiBG,CAACI,QAAD,iBACC,6BAAC,iBAAD;AACE,IAAA,SAAS,EAAEF,QAAQ,GAAG,IAAH,GAAU,MAD/B;AAEE,IAAA,KAAK,EAAEK,MAAM,CAACM,WAFhB;AAGE,IAAA,MAAM,EAAEN,MAAM,CAACM,WAHjB;AAIE,IAAA,EAAE,EAAE,CAJN;AAKE,IAAA,EAAE,EAAEN,MAAM,CAACO,EALb;AAME,mBAAY;AANd,IAlBJ,CADF,EA8BGZ,QAAQ,KACN,OAAOC,QAAP,KAAoB,UAApB,GACGA,QAAQ,CAAC;AAAEc,IAAAA,WAAW,EAAXA,WAAF;AAAef,IAAAA,QAAQ,EAARA;AAAf,GAAD,CADX,GAEGC,QAHG,CA9BX,CADF;AAqCD,CAvEM;;;AAAMJ,U","sourcesContent":["import React, { useState } from \"react\"\nimport { isText } from \"../../helpers/isText\"\nimport { ChevronIcon } from \"../../svgs\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { Text, TextProps } from \"../Text\"\n\nexport interface ExpandableProps extends ClickableProps {\n label?: string | JSX.Element\n expanded?: boolean\n children: React.ReactNode\n}\n\n/**\n * A toggleable component used to show / hide content\n */\nexport const Expandable: React.FC<ExpandableProps> = ({\n label,\n expanded: defaultExpanded,\n children,\n disabled,\n onClick,\n ...rest\n}) => {\n const tokens = useThemeConfig({\n v2: {\n borderColor: \"black10\",\n textProps: { variant: \"small\", fontWeight: \"bold\" } as TextProps,\n chevronSize: 12,\n mr: undefined,\n },\n v3: {\n borderColor: \"black60\",\n textProps: { variant: \"md\" } as TextProps,\n chevronSize: 14,\n mr: 1,\n },\n })\n\n const [expanded, setExpanded] = useState(defaultExpanded)\n\n const [boxProps, clickableProps] = splitBoxProps(rest)\n\n const handleClick = (\n event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n ) => {\n setExpanded((prevExpanded) => !prevExpanded)\n onClick && onClick(event)\n }\n\n return (\n <Box {...boxProps}>\n <Clickable\n width=\"100%\"\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"space-between\"\n borderTop=\"1px solid\"\n borderColor={tokens.borderColor}\n pt={1}\n disabled={disabled}\n aria-expanded={expanded}\n onClick={handleClick}\n {...clickableProps}\n >\n <Flex flex={1} minHeight={40} display=\"flex\" alignItems=\"center\">\n {isText(label) ? <Text {...tokens.textProps}>{label}</Text> : label}\n </Flex>\n\n {!disabled && (\n <ChevronIcon\n direction={expanded ? \"up\" : \"down\"}\n width={tokens.chevronSize}\n height={tokens.chevronSize}\n ml={1}\n mr={tokens.mr}\n aria-hidden=\"true\"\n />\n )}\n </Clickable>\n\n {expanded &&\n (typeof children === \"function\"\n ? children({ setExpanded, expanded })\n : children)}\n </Box>\n )\n}\n"],"file":"Expandable.js"}
|
|
@@ -19,6 +19,8 @@ var _Text = require("../Text");
|
|
|
19
19
|
|
|
20
20
|
var _Expandable = require("./Expandable");
|
|
21
21
|
|
|
22
|
+
var _Button = require("../Button");
|
|
23
|
+
|
|
22
24
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
25
|
|
|
24
26
|
var _default = {
|
|
@@ -56,6 +58,16 @@ var Default = function Default() {
|
|
|
56
58
|
}, {
|
|
57
59
|
expanded: true,
|
|
58
60
|
mb: 6
|
|
61
|
+
}, {
|
|
62
|
+
expanded: true,
|
|
63
|
+
children: function children(_ref) {
|
|
64
|
+
var setExpanded = _ref.setExpanded;
|
|
65
|
+
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Text.Text, null, "Expanded content"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
|
|
66
|
+
onClick: function onClick() {
|
|
67
|
+
return setExpanded(false);
|
|
68
|
+
}
|
|
69
|
+
}, "Close"));
|
|
70
|
+
}
|
|
59
71
|
}]
|
|
60
72
|
}, /*#__PURE__*/_react.default.createElement(_Expandable.Expandable, {
|
|
61
73
|
label: "Example",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Expandable/Expandable.story.tsx"],"names":["title","Default","expanded","disabled","label","e","stopPropagation","mb"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KAFM,EAGN;AAAEA,MAAAA,QAAQ,EAAE,KAAZ;AAAmBC,MAAAA,QAAQ,EAAE;AAA7B,KAHM,EAIN;AAAED,MAAAA,QAAQ,EAAE,IAAZ;AAAkBC,MAAAA,QAAQ,EAAE;AAA5B,KAJM,EAKN;AACEC,MAAAA,KAAK,eACH,6BAAC,UAAD;AAAM,QAAA,IAAI,EAAE,CAAZ;AAAe,QAAA,cAAc,EAAC;AAA9B,sBACE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,mBADF,
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Expandable/Expandable.story.tsx"],"names":["title","Default","expanded","disabled","label","e","stopPropagation","mb","children","setExpanded"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KAFM,EAGN;AAAEA,MAAAA,QAAQ,EAAE,KAAZ;AAAmBC,MAAAA,QAAQ,EAAE;AAA7B,KAHM,EAIN;AAAED,MAAAA,QAAQ,EAAE,IAAZ;AAAkBC,MAAAA,QAAQ,EAAE;AAA5B,KAJM,EAKN;AACEC,MAAAA,KAAK,eACH,6BAAC,UAAD;AAAM,QAAA,IAAI,EAAE,CAAZ;AAAe,QAAA,cAAc,EAAC;AAA9B,sBACE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,mBADF,eAEE,6BAAC,oBAAD;AACE,QAAA,cAAc,EAAC,WADjB;AAEE,QAAA,OAAO,EAAE,iBAACC,CAAD,EAAO;AACdA,UAAAA,CAAC,CAACC,eAAF;AACA,oCAAO,kBAAP;AACD;AALH,sBAOE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,iBAPF,CAFF;AAFJ,KALM,EAqBN;AAAEC,MAAAA,EAAE,EAAE;AAAN,KArBM,EAsBN;AAAEL,MAAAA,QAAQ,EAAE,IAAZ;AAAkBK,MAAAA,EAAE,EAAE;AAAtB,KAtBM,EAuBN;AACEL,MAAAA,QAAQ,EAAE,IADZ;AAEEM,MAAAA,QAAQ,EAAE;AAAA,YAAGC,WAAH,QAAGA,WAAH;AAAA,4BACR,uDACE,6BAAC,UAAD,2BADF,eAEE,6BAAC,cAAD;AAAQ,UAAA,OAAO,EAAE;AAAA,mBAAMA,WAAW,CAAC,KAAD,CAAjB;AAAA;AAAjB,mBAFF,CADQ;AAAA;AAFZ,KAvBM;AADV,kBAmCE,6BAAC,sBAAD;AAAY,IAAA,KAAK,EAAC,SAAlB;AAA4B,IAAA,QAAQ,EAAE;AAAtC,kBACE,6BAAC,UAAD,2BADF,CAnCF,CADF;AAyCD,CA1CM;;;AAAMR,O","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { Expandable, ExpandableProps } from \"./Expandable\"\nimport { Button } from \"../Button\"\n\nexport default {\n title: \"Components/Expandable\",\n}\n\nexport const Default = () => {\n return (\n <States<Partial<ExpandableProps>>\n states={[\n {},\n { expanded: true },\n { expanded: false, disabled: true },\n { expanded: true, disabled: true },\n {\n label: (\n <Flex flex={1} justifyContent=\"space-between\">\n <Text variant=\"md\">Heading</Text>\n <Clickable\n textDecoration=\"underline\"\n onClick={(e) => {\n e.stopPropagation()\n action(\"Secondary action\")\n }}\n >\n <Text variant=\"md\">Reset</Text>\n </Clickable>\n </Flex>\n ),\n },\n { mb: 6 },\n { expanded: true, mb: 6 },\n {\n expanded: true,\n children: ({ setExpanded }) => (\n <div>\n <Text>Expanded content</Text>\n <Button onClick={() => setExpanded(false)}>Close</Button>\n </div>\n ),\n },\n ]}\n >\n <Expandable label=\"Example\" maxWidth={350}>\n <Text>Expanded content</Text>\n </Expandable>\n </States>\n )\n}\n"],"file":"Expandable.story.js"}
|
|
@@ -51,12 +51,12 @@ var VARIANTS = {
|
|
|
51
51
|
color: "black100"
|
|
52
52
|
},
|
|
53
53
|
defaultDark: {
|
|
54
|
-
backgroundColor: "
|
|
55
|
-
color: "
|
|
54
|
+
backgroundColor: "black10",
|
|
55
|
+
color: "black100"
|
|
56
56
|
},
|
|
57
57
|
brand: {
|
|
58
|
-
backgroundColor: "
|
|
59
|
-
color: "
|
|
58
|
+
backgroundColor: "black10",
|
|
59
|
+
color: "black100"
|
|
60
60
|
}
|
|
61
61
|
};
|
|
62
62
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Marquee/Marquee.tsx"],"names":["VARIANTS","defaultLight","backgroundColor","color","defaultDark","brand","move","props","keyframes","offset","Container","Box","variants","StyledText","Text","Inner","styled","div","speed","Item","Marquee","marqueeText","divider","rest","size","v2","v3","containerEl","childEl","amount","setAmount","setOffset","current","containerWidth","getBoundingClientRect","width","childWidth","targetAmount","Math","min","ceil","Array","from","map","_","i","defaultProps","variant"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,QAAQ,GAAG;AACfC,EAAAA,YAAY,EAAE;AACZC,IAAAA,eAAe,EAAE,SADL;AAEZC,IAAAA,KAAK,EAAE;AAFK,GADC;AAKfC,EAAAA,WAAW,EAAE;AACXF,IAAAA,eAAe,EAAE,
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Marquee/Marquee.tsx"],"names":["VARIANTS","defaultLight","backgroundColor","color","defaultDark","brand","move","props","keyframes","offset","Container","Box","variants","StyledText","Text","Inner","styled","div","speed","Item","Marquee","marqueeText","divider","rest","size","v2","v3","containerEl","childEl","amount","setAmount","setOffset","current","containerWidth","getBoundingClientRect","width","childWidth","targetAmount","Math","min","ceil","Array","from","map","_","i","defaultProps","variant"],"mappings":"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","sourcesContent":["import React, { useState, useEffect, useRef } from \"react\"\nimport styled, { keyframes } from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { TextVariant } from \"@artsy/palette-tokens/dist/typography/types\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { Flex } from \"../Flex\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\n\nconst VARIANTS = {\n defaultLight: {\n backgroundColor: \"black10\",\n color: \"black100\",\n },\n defaultDark: {\n backgroundColor: \"black10\",\n color: \"black100\",\n },\n brand: {\n backgroundColor: \"black10\",\n color: \"black100\",\n },\n}\n\nconst move = (props) => keyframes`\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-${props.offset}px);\n }\n`\n\nconst Container = styled(Box)`\n ${variant({ variants: VARIANTS })}\n width: 100%;\n overflow-x: hidden;\n`\nconst StyledText = styled(Text)`\n ${variant({ variants: VARIANTS })}\n white-space: nowrap;\n`\n\nconst Inner = styled.div<{ speed: string; offset: number }>`\n animation: ${move} ${(props) => props.speed} infinite linear;\n cursor: default;\n user-select: none;\n white-space: nowrap;\n`\n\nconst Item = styled.div`\n display: inline-block;\n`\n\nexport interface MarqueeProps extends BoxProps {\n variant?: keyof typeof VARIANTS\n speed?: string\n color?: string\n marqueeText: string\n divider?: boolean\n}\n\nexport const Marquee: React.FC<MarqueeProps> = ({\n marqueeText,\n divider = true,\n speed = \"10s\",\n color,\n ...rest\n}) => {\n const size: TextVariant = useThemeConfig({ v2: \"small\", v3: \"xs\" })\n const containerEl = useRef<HTMLDivElement | null>(null)\n const childEl = useRef<HTMLDivElement | null>(null)\n\n const [amount, setAmount] = useState(1)\n const [offset, setOffset] = useState(0)\n\n useEffect(() => {\n if (!childEl.current || !containerEl.current) {\n return\n }\n const containerWidth = containerEl.current.getBoundingClientRect().width\n const childWidth = childEl.current.getBoundingClientRect().width\n const targetAmount = Math.min(Math.ceil(containerWidth / childWidth), 100)\n\n setOffset(targetAmount * childWidth)\n setAmount(Math.ceil(targetAmount * 2))\n }, [])\n\n return (\n <Container ref={containerEl as any} backgroundColor={color} {...rest}>\n <Inner speed={speed} offset={offset}>\n {Array.from(Array(amount)).map((_, i) => (\n <Item key={i} ref={childEl as any}>\n <Flex>\n <StyledText px={[2, 4]} py={0.5} variant={size}>\n {marqueeText}\n </StyledText>\n {divider && (\n <StyledText px={[1, 4]} py={0.5} variant={size}>\n •\n </StyledText>\n )}\n </Flex>\n </Item>\n ))}\n </Inner>\n </Container>\n )\n}\n\nMarquee.defaultProps = {\n variant: \"defaultDark\",\n}\n"],"file":"Marquee.js"}
|
|
@@ -25,7 +25,7 @@ var Default = function Default() {
|
|
|
25
25
|
marqueeText: "Black Owned"
|
|
26
26
|
}, {
|
|
27
27
|
variant: "defaultDark",
|
|
28
|
-
marqueeText: "
|
|
28
|
+
marqueeText: "Women Owned"
|
|
29
29
|
}, {
|
|
30
30
|
variant: "brand",
|
|
31
31
|
marqueeText: "Black Owned"
|
|
@@ -34,7 +34,7 @@ var Default = function Default() {
|
|
|
34
34
|
marqueeText: "Black Owned"
|
|
35
35
|
}, {
|
|
36
36
|
speed: "20s",
|
|
37
|
-
marqueeText: "
|
|
37
|
+
marqueeText: "Women Owned"
|
|
38
38
|
}, {
|
|
39
39
|
divider: false,
|
|
40
40
|
marqueeText: "Black Owned"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Marquee/Marquee.story.tsx"],"names":["title","Default","variant","marqueeText","speed","divider"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN;AAAEC,MAAAA,OAAO,EAAE,cAAX;AAA2BC,MAAAA,WAAW,EAAE;AAAxC,KADM,EAEN;AAAED,MAAAA,OAAO,EAAE,aAAX;AAA0BC,MAAAA,WAAW,EAAE;AAAvC,KAFM,EAGN;AAAED,MAAAA,OAAO,EAAE,OAAX;AAAoBC,MAAAA,WAAW,EAAE;AAAjC,KAHM,EAIN;AAAEC,MAAAA,KAAK,EAAE,IAAT;AAAeD,MAAAA,WAAW,EAAE;AAA5B,KAJM,EAKN;AAAEC,MAAAA,KAAK,EAAE,KAAT;AAAgBD,MAAAA,WAAW,EAAE;AAA7B,KALM,EAMN;AAAEE,MAAAA,OAAO,EAAE,KAAX;AAAkBF,MAAAA,WAAW,EAAE;AAA/B,KANM;AADV,kBAUE,6BAAC,gBAAD;AAAS,IAAA,WAAW,EAAC;AAArB,IAVF,CADF;AAcD,CAfM;;;AAAMF,O","sourcesContent":["import React from \"react\"\nimport { Marquee, MarqueeProps } from \"./Marquee\"\nimport { States } from \"storybook-states\"\n\nexport default {\n title: \"Components/Marquee\",\n}\n\nexport const Default = () => {\n return (\n <States<MarqueeProps>\n states={[\n { variant: \"defaultLight\", marqueeText: \"Black Owned\" },\n { variant: \"defaultDark\", marqueeText: \"
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Marquee/Marquee.story.tsx"],"names":["title","Default","variant","marqueeText","speed","divider"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN;AAAEC,MAAAA,OAAO,EAAE,cAAX;AAA2BC,MAAAA,WAAW,EAAE;AAAxC,KADM,EAEN;AAAED,MAAAA,OAAO,EAAE,aAAX;AAA0BC,MAAAA,WAAW,EAAE;AAAvC,KAFM,EAGN;AAAED,MAAAA,OAAO,EAAE,OAAX;AAAoBC,MAAAA,WAAW,EAAE;AAAjC,KAHM,EAIN;AAAEC,MAAAA,KAAK,EAAE,IAAT;AAAeD,MAAAA,WAAW,EAAE;AAA5B,KAJM,EAKN;AAAEC,MAAAA,KAAK,EAAE,KAAT;AAAgBD,MAAAA,WAAW,EAAE;AAA7B,KALM,EAMN;AAAEE,MAAAA,OAAO,EAAE,KAAX;AAAkBF,MAAAA,WAAW,EAAE;AAA/B,KANM;AADV,kBAUE,6BAAC,gBAAD;AAAS,IAAA,WAAW,EAAC;AAArB,IAVF,CADF;AAcD,CAfM;;;AAAMF,O","sourcesContent":["import React from \"react\"\nimport { Marquee, MarqueeProps } from \"./Marquee\"\nimport { States } from \"storybook-states\"\n\nexport default {\n title: \"Components/Marquee\",\n}\n\nexport const Default = () => {\n return (\n <States<MarqueeProps>\n states={[\n { variant: \"defaultLight\", marqueeText: \"Black Owned\" },\n { variant: \"defaultDark\", marqueeText: \"Women Owned\" },\n { variant: \"brand\", marqueeText: \"Black Owned\" },\n { speed: \"5s\", marqueeText: \"Black Owned\" },\n { speed: \"20s\", marqueeText: \"Women Owned\" },\n { divider: false, marqueeText: \"Black Owned\" },\n ]}\n >\n <Marquee marqueeText=\"Black Owned\" />\n </States>\n )\n}\n"],"file":"Marquee.story.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette",
|
|
3
|
-
"version": "19.
|
|
3
|
+
"version": "19.4.0",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
"storybook-states": "1.2.0",
|
|
112
112
|
"styled-components": "4.3.2",
|
|
113
113
|
"ts-node": "8.1.0",
|
|
114
|
-
"typescript": "4.6.
|
|
114
|
+
"typescript": "4.6.3",
|
|
115
115
|
"typescript-styled-plugin": "0.10.0",
|
|
116
116
|
"webpack": "5"
|
|
117
117
|
},
|
|
@@ -178,5 +178,5 @@
|
|
|
178
178
|
"<rootDir>/www/"
|
|
179
179
|
]
|
|
180
180
|
},
|
|
181
|
-
"gitHead": "
|
|
181
|
+
"gitHead": "f959a4846a1d79e20cec681624c7c2bc4ac0499d"
|
|
182
182
|
}
|