@artsy/palette 19.2.0 → 19.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,19 @@
|
|
|
1
|
+
# v19.3.0 (Thu Mar 31 2022)
|
|
2
|
+
|
|
3
|
+
#### 🚀 Enhancement
|
|
4
|
+
|
|
5
|
+
- 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))
|
|
6
|
+
|
|
7
|
+
#### 🐛 Bug Fix
|
|
8
|
+
|
|
9
|
+
- Update: Marquee with newly decided default coloring ([@The-Beez-Kneez](https://github.com/The-Beez-Kneez))
|
|
10
|
+
|
|
11
|
+
#### Authors: 1
|
|
12
|
+
|
|
13
|
+
- Ana Lisa Sutherland ([@The-Beez-Kneez](https://github.com/The-Beez-Kneez))
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
1
17
|
# v19.2.0 (Thu Mar 31 2022)
|
|
2
18
|
|
|
3
19
|
#### 🚀 Enhancement
|
|
@@ -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.3.0",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -178,5 +178,5 @@
|
|
|
178
178
|
"<rootDir>/www/"
|
|
179
179
|
]
|
|
180
180
|
},
|
|
181
|
-
"gitHead": "
|
|
181
|
+
"gitHead": "de77b52b2a38bf83d28ac5a143a59374741f2b19"
|
|
182
182
|
}
|