@artsy/palette 45.11.1 → 45.11.2
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.
|
@@ -40,16 +40,18 @@ var ProgressDots = exports.ProgressDots = function ProgressDots(_ref) {
|
|
|
40
40
|
onClick = _ref.onClick,
|
|
41
41
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
42
42
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Box.Box, _extends({
|
|
43
|
-
role: "presentation",
|
|
43
|
+
role: onClick ? "tablist" : "presentation",
|
|
44
|
+
"aria-label": onClick ? "Progress indicators" : undefined,
|
|
44
45
|
display: "flex",
|
|
45
46
|
alignItems: "center",
|
|
46
47
|
justifyContent: "center",
|
|
47
48
|
my: 0.5
|
|
48
49
|
}, rest), Array.from(Array(amount)).map(function (_, i) {
|
|
50
|
+
var isActive = i === activeIndex;
|
|
49
51
|
var indicator = /*#__PURE__*/_react.default.createElement(Indicator, {
|
|
50
52
|
key: i,
|
|
51
53
|
variant: indicatorVariant,
|
|
52
|
-
bg:
|
|
54
|
+
bg: isActive ? "mono100" : "mono30",
|
|
53
55
|
mx: 0.5
|
|
54
56
|
});
|
|
55
57
|
var handleClick = function handleClick() {
|
|
@@ -58,6 +60,10 @@ var ProgressDots = exports.ProgressDots = function ProgressDots(_ref) {
|
|
|
58
60
|
if (onClick) {
|
|
59
61
|
return /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
|
|
60
62
|
key: i,
|
|
63
|
+
role: "tab",
|
|
64
|
+
"aria-label": "Go to ".concat(i + 1, " of ").concat(amount),
|
|
65
|
+
"aria-selected": isActive,
|
|
66
|
+
"aria-current": isActive ? "page" : undefined,
|
|
61
67
|
display: "block",
|
|
62
68
|
position: "relative",
|
|
63
69
|
width: indicatorVariant === "dash" ? "100%" : "auto",
|
|
@@ -74,7 +80,7 @@ var ProgressDots = exports.ProgressDots = function ProgressDots(_ref) {
|
|
|
74
80
|
})), /*#__PURE__*/_react.default.createElement(_VisuallyHidden.VisuallyHidden, {
|
|
75
81
|
"aria-live": "polite",
|
|
76
82
|
"aria-atomic": "true"
|
|
77
|
-
},
|
|
83
|
+
}, activeIndex + 1, " of ", amount));
|
|
78
84
|
};
|
|
79
85
|
var Indicator = (0, _styledComponents.default)(_Box.Box).withConfig({
|
|
80
86
|
displayName: "ProgressDots__Indicator",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressDots.js","names":["_react","_interopRequireDefault","require","_styledComponents","_styledSystem","_Box","_Clickable","_VisuallyHidden","_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","VARIANTS","dot","width","height","borderRadius","dash","flex","ProgressDots","exports","_ref","activeIndex","amount","_ref$variant","variant","indicatorVariant","onClick","rest","createElement","Fragment","Box","role","display","alignItems","justifyContent","my","Array","from","map","_","indicator","Indicator","bg","mx","handleClick","Clickable","position","top","bottom","left","VisuallyHidden","styled","withConfig","displayName","componentId","variants"],"sources":["../../../src/elements/ProgressDots/ProgressDots.tsx"],"sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\n\nconst VARIANTS = {\n dot: {\n width: \"5px\",\n height: \"5px\",\n borderRadius: \"50%\",\n },\n dash: {\n height: \"1px\",\n flex: 1,\n },\n}\n\ntype Variant = keyof typeof VARIANTS\n\n/** ProgressDotsProps */\nexport interface ProgressDotsProps extends BoxProps {\n activeIndex: number\n amount: number\n variant?: Variant\n onClick?: (index: number) => void\n}\n\n/**\n * Renders an `amount` of dots and announces progress when updated\n */\nexport const ProgressDots: React.FC<\n React.PropsWithChildren<ProgressDotsProps>\n> = ({\n activeIndex,\n amount,\n variant: indicatorVariant = \"dot\",\n onClick,\n ...rest\n}) => {\n return (\n <>\n <Box\n role
|
|
1
|
+
{"version":3,"file":"ProgressDots.js","names":["_react","_interopRequireDefault","require","_styledComponents","_styledSystem","_Box","_Clickable","_VisuallyHidden","_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","VARIANTS","dot","width","height","borderRadius","dash","flex","ProgressDots","exports","_ref","activeIndex","amount","_ref$variant","variant","indicatorVariant","onClick","rest","createElement","Fragment","Box","role","undefined","display","alignItems","justifyContent","my","Array","from","map","_","isActive","indicator","Indicator","bg","mx","handleClick","Clickable","concat","position","top","bottom","left","VisuallyHidden","styled","withConfig","displayName","componentId","variants"],"sources":["../../../src/elements/ProgressDots/ProgressDots.tsx"],"sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\n\nconst VARIANTS = {\n dot: {\n width: \"5px\",\n height: \"5px\",\n borderRadius: \"50%\",\n },\n dash: {\n height: \"1px\",\n flex: 1,\n },\n}\n\ntype Variant = keyof typeof VARIANTS\n\n/** ProgressDotsProps */\nexport interface ProgressDotsProps extends BoxProps {\n activeIndex: number\n amount: number\n variant?: Variant\n onClick?: (index: number) => void\n}\n\n/**\n * Renders an `amount` of dots and announces progress when updated\n */\nexport const ProgressDots: React.FC<\n React.PropsWithChildren<ProgressDotsProps>\n> = ({\n activeIndex,\n amount,\n variant: indicatorVariant = \"dot\",\n onClick,\n ...rest\n}) => {\n return (\n <>\n <Box\n role={onClick ? \"tablist\" : \"presentation\"}\n aria-label={onClick ? \"Progress indicators\" : undefined}\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"center\"\n my={0.5}\n {...rest}\n >\n {Array.from(Array(amount)).map((_, i) => {\n const isActive = i === activeIndex\n const indicator = (\n <Indicator\n key={i}\n variant={indicatorVariant}\n bg={isActive ? \"mono100\" : \"mono30\"}\n mx={0.5}\n />\n )\n\n const handleClick = () => onClick && onClick(i)\n\n if (onClick) {\n return (\n <Clickable\n key={i}\n role=\"tab\"\n aria-label={`Go to ${i + 1} of ${amount}`}\n aria-selected={isActive}\n aria-current={isActive ? \"page\" : undefined}\n display=\"block\"\n position=\"relative\"\n width={indicatorVariant === \"dash\" ? \"100%\" : \"auto\"}\n onClick={handleClick}\n >\n {/* Pads out hit area. */}\n <Box\n position=\"absolute\"\n top={-10}\n bottom={-10}\n left={0}\n width=\"100%\"\n />\n\n {indicator}\n </Clickable>\n )\n }\n\n return indicator\n })}\n </Box>\n\n <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n {activeIndex + 1} of {amount}\n </VisuallyHidden>\n </>\n )\n}\n\nconst Indicator = styled(Box)<{\n variant: Variant\n onClick?: (index: number) => void\n}>`\n ${variant({ variants: VARIANTS })}\n transition: background-color 250ms;\n`\n\nIndicator.displayName = \"Indicator\"\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette",
|
|
3
|
-
"version": "45.11.
|
|
3
|
+
"version": "45.11.2",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -191,5 +191,5 @@
|
|
|
191
191
|
"url": "http://localhost"
|
|
192
192
|
}
|
|
193
193
|
},
|
|
194
|
-
"gitHead": "
|
|
194
|
+
"gitHead": "694c1fdd0eedf35d42e0f048fdcccc3dd29eef70"
|
|
195
195
|
}
|