@paprika/tag 0.0.18-next.0 → 0.0.18-next.4
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 +32 -0
- package/lib/Tag.js +4 -1
- package/lib/Tag.js.map +1 -1
- package/lib/Tag.styles.js +10 -13
- package/lib/Tag.styles.js.map +1 -1
- package/package.json +6 -6
- package/src/Tag.js +5 -1
- package/src/Tag.styles.js +91 -73
- package/stories/Examples/Variations.js +2 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,37 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.0.18-next.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 17ab30d: Tag Icon closing Icon (X icon) background color will be changed depending on the tag background
|
|
8
|
+
|
|
9
|
+
## 0.0.18-next.3
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Updated dependencies [80361b2]
|
|
14
|
+
- @paprika/helpers@2.2.0-next.1
|
|
15
|
+
- @paprika/button@1.1.9-next.3
|
|
16
|
+
|
|
17
|
+
## 0.0.18-next.2
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- Updated dependencies [036fe83]
|
|
22
|
+
- @paprika/tokens@1.1.3-next.0
|
|
23
|
+
- @paprika/button@1.1.9-next.2
|
|
24
|
+
- @paprika/raw-button@1.0.10-next.0
|
|
25
|
+
- @paprika/stylers@1.1.4-next.0
|
|
26
|
+
|
|
27
|
+
## 0.0.18-next.1
|
|
28
|
+
|
|
29
|
+
### Patch Changes
|
|
30
|
+
|
|
31
|
+
- Updated dependencies [343d673]
|
|
32
|
+
- @paprika/helpers@2.1.4-next.0
|
|
33
|
+
- @paprika/button@1.1.9-next.1
|
|
34
|
+
|
|
3
35
|
## 0.0.18-next.0
|
|
4
36
|
|
|
5
37
|
### Patch Changes
|
package/lib/Tag.js
CHANGED
|
@@ -28,6 +28,8 @@ var _rawButton = _interopRequireDefault(require("@paprika/raw-button"));
|
|
|
28
28
|
|
|
29
29
|
var _useI18n = _interopRequireDefault(require("@paprika/l10n/lib/useI18n"));
|
|
30
30
|
|
|
31
|
+
var _TimesCircle = _interopRequireDefault(require("@paprika/icon/lib/TimesCircle"));
|
|
32
|
+
|
|
31
33
|
var sc = _interopRequireWildcard(require("./Tag.styles"));
|
|
32
34
|
|
|
33
35
|
var types = _interopRequireWildcard(require("./types"));
|
|
@@ -70,11 +72,12 @@ function Tag(props) {
|
|
|
70
72
|
a11yText: a11yText || a11yTagText,
|
|
71
73
|
isDisabled: isDisabled,
|
|
72
74
|
size: size,
|
|
75
|
+
theme: moreProps.theme,
|
|
73
76
|
"data-pka-anchor": "tag.remove",
|
|
74
77
|
"data-qa-anchor": "paprika.tag.remove",
|
|
75
78
|
onClick: handleRemove,
|
|
76
79
|
onKeyDown: handleDeleteKeyDown
|
|
77
|
-
}) : null);
|
|
80
|
+
}, /*#__PURE__*/_react["default"].createElement(_TimesCircle["default"], null)) : null);
|
|
78
81
|
|
|
79
82
|
var tagProps = {
|
|
80
83
|
size: size,
|
package/lib/Tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Tag.js"],"names":["Tag","props","children","onRemove","size","onClick","a11yText","avatar","isDisabled","moreProps","I18n","handleRemove","e","stopPropagation","handleDeleteKeyDown","key","a11yTagText","t","value","content","tagProps","RawButton","types","sizes","
|
|
1
|
+
{"version":3,"sources":["../src/Tag.js"],"names":["Tag","props","children","onRemove","size","onClick","a11yText","avatar","isDisabled","moreProps","I18n","handleRemove","e","stopPropagation","handleDeleteKeyDown","key","a11yTagText","t","value","content","theme","tagProps","RawButton","types","sizes","themes","severityTheme","severityThemes","propTypes","PropTypes","string","node","isRequired","bool","func","oneOf","MEDIUM","LARGE","BLACK","BLUE","GREEN","GREY","LIGHT_BLUE","LIGHT_ORANGE","ORANGE","NO_RISK","LOW_RISK","MEDIUM_RISK","HIGH_RISK","ALERT","defaultProps"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport RawButton from \"@paprika/raw-button\";\nimport useI18n from \"@paprika/l10n/lib/useI18n\";\nimport TimesCircleIcon from \"@paprika/icon/lib/TimesCircle\";\nimport * as sc from \"./Tag.styles\";\nimport * as types from \"./types\";\n\nexport default function Tag(props) {\n const { children, onRemove, size, onClick, a11yText, avatar, isDisabled, ...moreProps } = props;\n const I18n = useI18n();\n\n const handleRemove = e => {\n onRemove();\n e.stopPropagation();\n };\n\n const handleDeleteKeyDown = e => {\n if (e.key === \"Enter\" || e.key === \"Backspace\" || e.key === \" \") {\n handleRemove(e);\n }\n };\n\n const a11yTagText = typeof children === \"string\" ? I18n.t(\"remove_a11y\", { value: children }) : I18n.t(\"remove\");\n\n const content = (\n <>\n {avatar}\n <sc.Ellipsis size={size}>{children}</sc.Ellipsis>\n {onRemove ? (\n <sc.Delete\n a11yText={a11yText || a11yTagText}\n isDisabled={isDisabled}\n size={size}\n theme={moreProps.theme}\n data-pka-anchor=\"tag.remove\"\n data-qa-anchor=\"paprika.tag.remove\"\n onClick={handleRemove}\n onKeyDown={handleDeleteKeyDown}\n >\n <TimesCircleIcon />\n </sc.Delete>\n ) : null}\n </>\n );\n\n const tagProps = {\n size,\n \"data-pka-anchor\": \"tag\",\n };\n\n if (onClick) {\n tagProps.a11yText = a11yText;\n tagProps.isDisabled = isDisabled;\n tagProps.onClick = onClick;\n }\n\n return (\n <sc.Tag as={onClick ? RawButton : \"div\"} {...tagProps} {...moreProps}>\n {content}\n </sc.Tag>\n );\n}\n\nTag.types = {\n size: types.sizes,\n theme: types.themes,\n severityTheme: types.severityThemes,\n};\n\nconst propTypes = {\n /** used in aria-tag on the root element */\n a11yText: PropTypes.string,\n /** Can pass a avatar to be displayed to the left of the tag content */\n avatar: PropTypes.node,\n /** Content to show in the central area of the tag */\n children: PropTypes.node.isRequired,\n /** Disables tag onClick and remove button functionality */\n isDisabled: PropTypes.bool,\n /** Fires when clicking the root element. Should also pass value for a11yText when using this */\n onClick: PropTypes.func,\n /** Pass a function to show a remove button */\n onRemove: PropTypes.func,\n /** Size of the tag(font size, min-height, padding, etc). */\n size: PropTypes.oneOf([Tag.types.size.MEDIUM, Tag.types.size.LARGE]),\n /** Visual theme of the tag */\n theme: PropTypes.oneOf([\n Tag.types.theme.BLACK,\n Tag.types.theme.BLUE,\n Tag.types.theme.GREEN,\n Tag.types.theme.GREY,\n Tag.types.theme.LIGHT_BLUE,\n Tag.types.theme.LIGHT_ORANGE,\n Tag.types.theme.ORANGE,\n Tag.types.severityTheme.NO_RISK,\n Tag.types.severityTheme.LOW_RISK,\n Tag.types.severityTheme.MEDIUM_RISK,\n Tag.types.severityTheme.HIGH_RISK,\n Tag.types.severityTheme.ALERT,\n ]),\n};\n\nconst defaultProps = {\n a11yText: null,\n avatar: null,\n isDisabled: false,\n onClick: null,\n onRemove: null,\n size: Tag.types.size.MEDIUM,\n theme: Tag.types.theme.GREY,\n};\n\nTag.propTypes = propTypes;\nTag.defaultProps = defaultProps;\n"],"file":"Tag.js"}
|
package/lib/Tag.styles.js
CHANGED
|
@@ -22,7 +22,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
|
22
22
|
|
|
23
23
|
var _tokens = _interopRequireDefault(require("@paprika/tokens"));
|
|
24
24
|
|
|
25
|
-
var
|
|
25
|
+
var _rawButton = _interopRequireDefault(require("@paprika/raw-button"));
|
|
26
26
|
|
|
27
27
|
var _helpers = require("@paprika/stylers/lib/helpers");
|
|
28
28
|
|
|
@@ -36,8 +36,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
|
|
|
36
36
|
|
|
37
37
|
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; }
|
|
38
38
|
|
|
39
|
-
var themeStyles = (_themeStyles = {}, (0, _defineProperty2["default"])(_themeStyles, types.themes.BLACK, (0, _styledComponents.css)(["background:", ";"], _tokens["default"].color.black)), (0, _defineProperty2["default"])(_themeStyles, types.themes.BLUE, (0, _styledComponents.css)(["background:", ";"], _tokens["default"].color.blue)), (0, _defineProperty2["default"])(_themeStyles, types.themes.GREY, (0, _styledComponents.css)(["background:", ";color:", ";"], _tokens["default"].color.blackLighten70, _tokens["default"].color.black)), (0, _defineProperty2["default"])(_themeStyles, types.themes.GREEN, (0, _styledComponents.css)(["background:", ";"], _tokens["default"].color.greenDarken10)), (0, _defineProperty2["default"])(_themeStyles, types.themes.ORANGE, (0, _styledComponents.css)(["background:", ";"], _tokens["default"].color.orangeDarken10)), (0, _defineProperty2["default"])(_themeStyles, types.themes.LIGHT_BLUE, (0, _styledComponents.css)(["background:", ";color:", ";"], _tokens["default"].color.blueLighten50, _tokens["default"].color.blueDarken20)), (0, _defineProperty2["default"])(_themeStyles, types.themes.LIGHT_ORANGE, (0, _styledComponents.css)(["background:", ";color:", ";"], _tokens["default"].color.orangeLighten40, _tokens["default"].color.orangeDarken20)), (0, _defineProperty2["default"])(_themeStyles, types.severityThemes.NO_RISK, (0, _styledComponents.css)(["background:", ";color:", ";"], _tokens["default"].color.blackLighten70, _tokens["default"].color.black)), (0, _defineProperty2["default"])(_themeStyles, types.severityThemes.LOW_RISK, (0, _styledComponents.css)(["background:#299a7a;"])), (0, _defineProperty2["default"])(_themeStyles, types.severityThemes.MEDIUM_RISK, (0, _styledComponents.css)(["background:#c9af28;"])), (0, _defineProperty2["default"])(_themeStyles, types.severityThemes.HIGH_RISK, (0, _styledComponents.css)(["background:#cd3c44;"])), (0, _defineProperty2["default"])(_themeStyles, types.severityThemes.ALERT, (0, _styledComponents.css)(["background:none;border:1px solid ", ";color:", ";"], _tokens["default"].color.orangeDarken10, _tokens["default"].color.orangeDarken10)), _themeStyles);
|
|
40
|
-
|
|
41
39
|
var Tags = _styledComponents["default"].ul.withConfig({
|
|
42
40
|
displayName: "Tagstyles__Tags",
|
|
43
41
|
componentId: "sc-1ufm8km-0"
|
|
@@ -81,24 +79,23 @@ var Ellipsis = _styledComponents["default"].div.withConfig({
|
|
|
81
79
|
});
|
|
82
80
|
|
|
83
81
|
exports.Ellipsis = Ellipsis;
|
|
84
|
-
var Delete = (0, _styledComponents["default"])(
|
|
82
|
+
var Delete = (0, _styledComponents["default"])(_rawButton["default"]).withConfig({
|
|
85
83
|
displayName: "Tagstyles__Delete",
|
|
86
84
|
componentId: "sc-1ufm8km-3"
|
|
87
85
|
})(function (_ref3) {
|
|
88
86
|
var size = _ref3.size;
|
|
89
87
|
var fontSize = {
|
|
90
|
-
medium: "
|
|
91
|
-
large: "
|
|
92
|
-
};
|
|
93
|
-
var padding = {
|
|
94
|
-
medium: "4px",
|
|
95
|
-
large: "5px"
|
|
88
|
+
medium: _tokens["default"].icon.sizeSm,
|
|
89
|
+
large: _tokens["default"].icon.sizeMd
|
|
96
90
|
};
|
|
97
91
|
var width = {
|
|
98
|
-
medium: "
|
|
99
|
-
large: "
|
|
92
|
+
medium: _tokens["default"].icon.sizeSm,
|
|
93
|
+
large: _tokens["default"].icon.sizeMd
|
|
100
94
|
};
|
|
101
|
-
return (0, _styledComponents.css)(["align-items:center;border-radius:50%;box-sizing:border-box;display:flex;flex-shrink:0;font-size:", ";height:", ";justify-content:center;min-height:auto;
|
|
95
|
+
return (0, _styledComponents.css)(["align-items:center;border-radius:50%;box-sizing:border-box;display:flex;flex-shrink:0;font-size:", ";height:", ";justify-content:center;min-height:auto;width:", ";"], fontSize[size], width[size], width[size]);
|
|
102
96
|
});
|
|
103
97
|
exports.Delete = Delete;
|
|
98
|
+
var DeleteButtonStylesForLightBackground = (0, _styledComponents.css)(["", "{color:", ";&:hover,&:focus{color:", ";}}"], Delete, _tokens["default"].color.blackLighten70, _tokens["default"].color.blackLighten60);
|
|
99
|
+
var DeleteButtonStylesForDarkBackground = (0, _styledComponents.css)(["", "{color:", ";&:hover,&:focus{color:", ";}}"], Delete, _tokens["default"].color.blackLighten30, _tokens["default"].color.blackLighten20);
|
|
100
|
+
var themeStyles = (_themeStyles = {}, (0, _defineProperty2["default"])(_themeStyles, types.themes.BLACK, (0, _styledComponents.css)(["background:", ";", ""], _tokens["default"].color.black, DeleteButtonStylesForLightBackground)), (0, _defineProperty2["default"])(_themeStyles, types.themes.BLUE, (0, _styledComponents.css)(["background:", ";", ""], _tokens["default"].color.blue, DeleteButtonStylesForLightBackground)), (0, _defineProperty2["default"])(_themeStyles, types.themes.GREY, (0, _styledComponents.css)(["background:", ";color:", ";", ""], _tokens["default"].color.blackLighten70, _tokens["default"].color.black, DeleteButtonStylesForDarkBackground)), (0, _defineProperty2["default"])(_themeStyles, types.themes.GREEN, (0, _styledComponents.css)(["background:", ";", ""], _tokens["default"].color.greenDarken10, DeleteButtonStylesForLightBackground)), (0, _defineProperty2["default"])(_themeStyles, types.themes.ORANGE, (0, _styledComponents.css)(["background:", ";", ""], _tokens["default"].color.orangeDarken10, DeleteButtonStylesForLightBackground)), (0, _defineProperty2["default"])(_themeStyles, types.themes.LIGHT_BLUE, (0, _styledComponents.css)(["background:", ";color:", ";", ""], _tokens["default"].color.blueLighten50, _tokens["default"].color.blueDarken20, DeleteButtonStylesForDarkBackground)), (0, _defineProperty2["default"])(_themeStyles, types.themes.LIGHT_ORANGE, (0, _styledComponents.css)(["background:", ";color:", ";", ""], _tokens["default"].color.orangeLighten40, _tokens["default"].color.orangeDarken20, DeleteButtonStylesForDarkBackground)), (0, _defineProperty2["default"])(_themeStyles, types.severityThemes.NO_RISK, (0, _styledComponents.css)(["background:", ";color:", ";", ""], _tokens["default"].color.blackLighten70, _tokens["default"].color.black, DeleteButtonStylesForDarkBackground)), (0, _defineProperty2["default"])(_themeStyles, types.severityThemes.LOW_RISK, (0, _styledComponents.css)(["background:#299a7a;", ""], DeleteButtonStylesForLightBackground)), (0, _defineProperty2["default"])(_themeStyles, types.severityThemes.MEDIUM_RISK, (0, _styledComponents.css)(["background:#c9af28;", ""], DeleteButtonStylesForLightBackground)), (0, _defineProperty2["default"])(_themeStyles, types.severityThemes.HIGH_RISK, (0, _styledComponents.css)(["background:#cd3c44;", ""], DeleteButtonStylesForLightBackground)), (0, _defineProperty2["default"])(_themeStyles, types.severityThemes.ALERT, (0, _styledComponents.css)(["background:none;border:1px solid ", ";color:", ";", ""], _tokens["default"].color.orangeDarken10, _tokens["default"].color.orangeDarken10, DeleteButtonStylesForDarkBackground)), _themeStyles);
|
|
104
101
|
//# sourceMappingURL=Tag.styles.js.map
|
package/lib/Tag.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Tag.styles.js"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/Tag.styles.js"],"names":["Tags","styled","ul","css","widthAndHeight","medium","large","avatarWidthAndHeight","tagStyles","theme","size","tokens","color","blackLighten70","white","spaceSm","themeStyles","Tag","div","Ellipsis","getFontSize","space","truncateText","Delete","RawButton","fontSize","icon","sizeSm","sizeMd","width","DeleteButtonStylesForLightBackground","blackLighten60","DeleteButtonStylesForDarkBackground","blackLighten30","blackLighten20","types","themes","BLACK","black","BLUE","blue","GREY","GREEN","greenDarken10","ORANGE","orangeDarken10","LIGHT_BLUE","blueLighten50","blueDarken20","LIGHT_ORANGE","orangeLighten40","orangeDarken20","severityThemes","NO_RISK","LOW_RISK","MEDIUM_RISK","HIGH_RISK","ALERT"],"mappings":"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","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tokens from \"@paprika/tokens\";\nimport RawButton from \"@paprika/raw-button\";\nimport { fontSize, spacer } from \"@paprika/stylers/lib/helpers\";\nimport { truncateText } from \"@paprika/stylers/lib/includes\";\nimport * as types from \"./types\";\n\nexport const Tags = styled.ul(\n () => css`\n display: flex;\n flex-wrap: wrap;\n line-height: 1;\n list-style-type: none;\n margin: 0;\n padding: 0;\n `\n);\n\nconst widthAndHeight = {\n medium: \"24px\",\n large: \"28px\",\n};\n\nconst avatarWidthAndHeight = {\n medium: \"20px\",\n large: \"24px\",\n};\n\nconst tagStyles = ({ theme, size }) => css`\n align-items: center;\n background: ${tokens.color.blackLighten70};\n border-radius: ${spacer(2)};\n box-sizing: border-box;\n color: ${tokens.color.white};\n display: flex;\n height: ${widthAndHeight[size]};\n line-height: 1;\n margin-bottom: 2px;\n margin-right: ${tokens.spaceSm};\n max-width: 100%;\n padding: 2px;\n ${themeStyles[theme]}\n\n [data-pka-anchor=\"avatar\"] {\n height: ${avatarWidthAndHeight[size]};\n min-width: ${avatarWidthAndHeight[size]};\n }\n`;\n\nexport const Tag = styled.div(tagStyles);\n\nexport const Ellipsis = styled.div(({ size }) => {\n const getFontSize = {\n medium: fontSize(-1),\n large: fontSize(0),\n };\n\n return css`\n align-items: center;\n display: block;\n ${getFontSize[size]};\n padding: 0 ${tokens.space} 1px ${tokens.space};\n ${truncateText};\n `;\n});\n\nexport const Delete = styled(RawButton)(({ size }) => {\n const fontSize = {\n medium: tokens.icon.sizeSm,\n large: tokens.icon.sizeMd,\n };\n\n const width = {\n medium: tokens.icon.sizeSm,\n large: tokens.icon.sizeMd,\n };\n\n return css`\n align-items: center;\n border-radius: 50%;\n box-sizing: border-box;\n display: flex;\n flex-shrink: 0;\n font-size: ${fontSize[size]};\n height: ${width[size]};\n justify-content: center;\n min-height: auto;\n width: ${width[size]};\n `;\n});\n\nconst DeleteButtonStylesForLightBackground = css`\n ${Delete} {\n color: ${tokens.color.blackLighten70};\n &:hover,\n &:focus {\n color: ${tokens.color.blackLighten60};\n }\n }\n`;\n\nconst DeleteButtonStylesForDarkBackground = css`\n ${Delete} {\n color: ${tokens.color.blackLighten30};\n &:hover,\n &:focus {\n color: ${tokens.color.blackLighten20};\n }\n }\n`;\n\nconst themeStyles = {\n [types.themes.BLACK]: css`\n background: ${tokens.color.black};\n ${DeleteButtonStylesForLightBackground}\n `,\n\n [types.themes.BLUE]: css`\n background: ${tokens.color.blue};\n ${DeleteButtonStylesForLightBackground}\n `,\n\n [types.themes.GREY]: css`\n background: ${tokens.color.blackLighten70};\n color: ${tokens.color.black};\n ${DeleteButtonStylesForDarkBackground}\n `,\n\n [types.themes.GREEN]: css`\n background: ${tokens.color.greenDarken10};\n ${DeleteButtonStylesForLightBackground}\n `,\n\n [types.themes.ORANGE]: css`\n background: ${tokens.color.orangeDarken10};\n ${DeleteButtonStylesForLightBackground}\n `,\n\n [types.themes.LIGHT_BLUE]: css`\n background: ${tokens.color.blueLighten50};\n color: ${tokens.color.blueDarken20};\n ${DeleteButtonStylesForDarkBackground}\n `,\n\n [types.themes.LIGHT_ORANGE]: css`\n background: ${tokens.color.orangeLighten40};\n color: ${tokens.color.orangeDarken20};\n ${DeleteButtonStylesForDarkBackground}\n `,\n\n [types.severityThemes.NO_RISK]: css`\n background: ${tokens.color.blackLighten70};\n color: ${tokens.color.black};\n ${DeleteButtonStylesForDarkBackground}\n `,\n\n [types.severityThemes.LOW_RISK]: css`\n background: #299a7a;\n ${DeleteButtonStylesForLightBackground}\n `,\n\n [types.severityThemes.MEDIUM_RISK]: css`\n background: #c9af28;\n ${DeleteButtonStylesForLightBackground}\n `,\n\n [types.severityThemes.HIGH_RISK]: css`\n background: #cd3c44;\n ${DeleteButtonStylesForLightBackground}\n `,\n\n [types.severityThemes.ALERT]: css`\n background: none;\n border: 1px solid ${tokens.color.orangeDarken10};\n color: ${tokens.color.orangeDarken10};\n ${DeleteButtonStylesForDarkBackground}\n `,\n};\n"],"file":"Tag.styles.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@paprika/tag",
|
|
3
|
-
"version": "0.0.18-next.
|
|
3
|
+
"version": "0.0.18-next.4",
|
|
4
4
|
"description": "Tag can be both static UI labels or removable components. Static Tag is mostly used to show an item’s status. A removable Tag should be used to add or group objects.",
|
|
5
5
|
"author": "@paprika",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -16,12 +16,12 @@
|
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@babel/runtime-corejs2": "^7.3.1",
|
|
19
|
-
"@paprika/button": "^1.1.9-next.0",
|
|
20
19
|
"@paprika/constants": "^1.0.0",
|
|
21
|
-
"@paprika/helpers": "^2.1
|
|
22
|
-
"@paprika/raw-button": "^1.0.
|
|
23
|
-
"@paprika/stylers": "^1.1.
|
|
24
|
-
"@paprika/tokens": "^1.1.
|
|
20
|
+
"@paprika/helpers": "^2.2.0-next.1",
|
|
21
|
+
"@paprika/raw-button": "^1.0.10-next.0",
|
|
22
|
+
"@paprika/stylers": "^1.1.4-next.0",
|
|
23
|
+
"@paprika/tokens": "^1.1.3-next.0",
|
|
24
|
+
"@paprika/icon": "^2.1.4-next.0",
|
|
25
25
|
"prop-types": "^15.7.2"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
package/src/Tag.js
CHANGED
|
@@ -2,6 +2,7 @@ import React from "react";
|
|
|
2
2
|
import PropTypes from "prop-types";
|
|
3
3
|
import RawButton from "@paprika/raw-button";
|
|
4
4
|
import useI18n from "@paprika/l10n/lib/useI18n";
|
|
5
|
+
import TimesCircleIcon from "@paprika/icon/lib/TimesCircle";
|
|
5
6
|
import * as sc from "./Tag.styles";
|
|
6
7
|
import * as types from "./types";
|
|
7
8
|
|
|
@@ -31,11 +32,14 @@ export default function Tag(props) {
|
|
|
31
32
|
a11yText={a11yText || a11yTagText}
|
|
32
33
|
isDisabled={isDisabled}
|
|
33
34
|
size={size}
|
|
35
|
+
theme={moreProps.theme}
|
|
34
36
|
data-pka-anchor="tag.remove"
|
|
35
37
|
data-qa-anchor="paprika.tag.remove"
|
|
36
38
|
onClick={handleRemove}
|
|
37
39
|
onKeyDown={handleDeleteKeyDown}
|
|
38
|
-
|
|
40
|
+
>
|
|
41
|
+
<TimesCircleIcon />
|
|
42
|
+
</sc.Delete>
|
|
39
43
|
) : null}
|
|
40
44
|
</>
|
|
41
45
|
);
|
package/src/Tag.styles.js
CHANGED
|
@@ -1,66 +1,10 @@
|
|
|
1
1
|
import styled, { css } from "styled-components";
|
|
2
2
|
import tokens from "@paprika/tokens";
|
|
3
|
-
import
|
|
3
|
+
import RawButton from "@paprika/raw-button";
|
|
4
4
|
import { fontSize, spacer } from "@paprika/stylers/lib/helpers";
|
|
5
5
|
import { truncateText } from "@paprika/stylers/lib/includes";
|
|
6
6
|
import * as types from "./types";
|
|
7
7
|
|
|
8
|
-
const themeStyles = {
|
|
9
|
-
[types.themes.BLACK]: css`
|
|
10
|
-
background: ${tokens.color.black};
|
|
11
|
-
`,
|
|
12
|
-
|
|
13
|
-
[types.themes.BLUE]: css`
|
|
14
|
-
background: ${tokens.color.blue};
|
|
15
|
-
`,
|
|
16
|
-
|
|
17
|
-
[types.themes.GREY]: css`
|
|
18
|
-
background: ${tokens.color.blackLighten70};
|
|
19
|
-
color: ${tokens.color.black};
|
|
20
|
-
`,
|
|
21
|
-
|
|
22
|
-
[types.themes.GREEN]: css`
|
|
23
|
-
background: ${tokens.color.greenDarken10};
|
|
24
|
-
`,
|
|
25
|
-
|
|
26
|
-
[types.themes.ORANGE]: css`
|
|
27
|
-
background: ${tokens.color.orangeDarken10};
|
|
28
|
-
`,
|
|
29
|
-
|
|
30
|
-
[types.themes.LIGHT_BLUE]: css`
|
|
31
|
-
background: ${tokens.color.blueLighten50};
|
|
32
|
-
color: ${tokens.color.blueDarken20};
|
|
33
|
-
`,
|
|
34
|
-
|
|
35
|
-
[types.themes.LIGHT_ORANGE]: css`
|
|
36
|
-
background: ${tokens.color.orangeLighten40};
|
|
37
|
-
color: ${tokens.color.orangeDarken20};
|
|
38
|
-
`,
|
|
39
|
-
|
|
40
|
-
[types.severityThemes.NO_RISK]: css`
|
|
41
|
-
background: ${tokens.color.blackLighten70};
|
|
42
|
-
color: ${tokens.color.black};
|
|
43
|
-
`,
|
|
44
|
-
|
|
45
|
-
[types.severityThemes.LOW_RISK]: css`
|
|
46
|
-
background: #299a7a;
|
|
47
|
-
`,
|
|
48
|
-
|
|
49
|
-
[types.severityThemes.MEDIUM_RISK]: css`
|
|
50
|
-
background: #c9af28;
|
|
51
|
-
`,
|
|
52
|
-
|
|
53
|
-
[types.severityThemes.HIGH_RISK]: css`
|
|
54
|
-
background: #cd3c44;
|
|
55
|
-
`,
|
|
56
|
-
|
|
57
|
-
[types.severityThemes.ALERT]: css`
|
|
58
|
-
background: none;
|
|
59
|
-
border: 1px solid ${tokens.color.orangeDarken10};
|
|
60
|
-
color: ${tokens.color.orangeDarken10};
|
|
61
|
-
`,
|
|
62
|
-
};
|
|
63
|
-
|
|
64
8
|
export const Tags = styled.ul(
|
|
65
9
|
() => css`
|
|
66
10
|
display: flex;
|
|
@@ -120,20 +64,15 @@ export const Ellipsis = styled.div(({ size }) => {
|
|
|
120
64
|
`;
|
|
121
65
|
});
|
|
122
66
|
|
|
123
|
-
export const Delete = styled(
|
|
67
|
+
export const Delete = styled(RawButton)(({ size }) => {
|
|
124
68
|
const fontSize = {
|
|
125
|
-
medium:
|
|
126
|
-
large:
|
|
127
|
-
};
|
|
128
|
-
|
|
129
|
-
const padding = {
|
|
130
|
-
medium: "4px",
|
|
131
|
-
large: "5px",
|
|
69
|
+
medium: tokens.icon.sizeSm,
|
|
70
|
+
large: tokens.icon.sizeMd,
|
|
132
71
|
};
|
|
133
72
|
|
|
134
73
|
const width = {
|
|
135
|
-
medium:
|
|
136
|
-
large:
|
|
74
|
+
medium: tokens.icon.sizeSm,
|
|
75
|
+
large: tokens.icon.sizeMd,
|
|
137
76
|
};
|
|
138
77
|
|
|
139
78
|
return css`
|
|
@@ -146,15 +85,94 @@ export const Delete = styled(Button.Close)(({ size }) => {
|
|
|
146
85
|
height: ${width[size]};
|
|
147
86
|
justify-content: center;
|
|
148
87
|
min-height: auto;
|
|
149
|
-
padding: ${padding[size]};
|
|
150
88
|
width: ${width[size]};
|
|
89
|
+
`;
|
|
90
|
+
});
|
|
151
91
|
|
|
152
|
-
|
|
153
|
-
|
|
92
|
+
const DeleteButtonStylesForLightBackground = css`
|
|
93
|
+
${Delete} {
|
|
94
|
+
color: ${tokens.color.blackLighten70};
|
|
95
|
+
&:hover,
|
|
96
|
+
&:focus {
|
|
97
|
+
color: ${tokens.color.blackLighten60};
|
|
154
98
|
}
|
|
99
|
+
}
|
|
100
|
+
`;
|
|
155
101
|
|
|
102
|
+
const DeleteButtonStylesForDarkBackground = css`
|
|
103
|
+
${Delete} {
|
|
104
|
+
color: ${tokens.color.blackLighten30};
|
|
105
|
+
&:hover,
|
|
156
106
|
&:focus {
|
|
157
|
-
|
|
107
|
+
color: ${tokens.color.blackLighten20};
|
|
158
108
|
}
|
|
159
|
-
|
|
160
|
-
|
|
109
|
+
}
|
|
110
|
+
`;
|
|
111
|
+
|
|
112
|
+
const themeStyles = {
|
|
113
|
+
[types.themes.BLACK]: css`
|
|
114
|
+
background: ${tokens.color.black};
|
|
115
|
+
${DeleteButtonStylesForLightBackground}
|
|
116
|
+
`,
|
|
117
|
+
|
|
118
|
+
[types.themes.BLUE]: css`
|
|
119
|
+
background: ${tokens.color.blue};
|
|
120
|
+
${DeleteButtonStylesForLightBackground}
|
|
121
|
+
`,
|
|
122
|
+
|
|
123
|
+
[types.themes.GREY]: css`
|
|
124
|
+
background: ${tokens.color.blackLighten70};
|
|
125
|
+
color: ${tokens.color.black};
|
|
126
|
+
${DeleteButtonStylesForDarkBackground}
|
|
127
|
+
`,
|
|
128
|
+
|
|
129
|
+
[types.themes.GREEN]: css`
|
|
130
|
+
background: ${tokens.color.greenDarken10};
|
|
131
|
+
${DeleteButtonStylesForLightBackground}
|
|
132
|
+
`,
|
|
133
|
+
|
|
134
|
+
[types.themes.ORANGE]: css`
|
|
135
|
+
background: ${tokens.color.orangeDarken10};
|
|
136
|
+
${DeleteButtonStylesForLightBackground}
|
|
137
|
+
`,
|
|
138
|
+
|
|
139
|
+
[types.themes.LIGHT_BLUE]: css`
|
|
140
|
+
background: ${tokens.color.blueLighten50};
|
|
141
|
+
color: ${tokens.color.blueDarken20};
|
|
142
|
+
${DeleteButtonStylesForDarkBackground}
|
|
143
|
+
`,
|
|
144
|
+
|
|
145
|
+
[types.themes.LIGHT_ORANGE]: css`
|
|
146
|
+
background: ${tokens.color.orangeLighten40};
|
|
147
|
+
color: ${tokens.color.orangeDarken20};
|
|
148
|
+
${DeleteButtonStylesForDarkBackground}
|
|
149
|
+
`,
|
|
150
|
+
|
|
151
|
+
[types.severityThemes.NO_RISK]: css`
|
|
152
|
+
background: ${tokens.color.blackLighten70};
|
|
153
|
+
color: ${tokens.color.black};
|
|
154
|
+
${DeleteButtonStylesForDarkBackground}
|
|
155
|
+
`,
|
|
156
|
+
|
|
157
|
+
[types.severityThemes.LOW_RISK]: css`
|
|
158
|
+
background: #299a7a;
|
|
159
|
+
${DeleteButtonStylesForLightBackground}
|
|
160
|
+
`,
|
|
161
|
+
|
|
162
|
+
[types.severityThemes.MEDIUM_RISK]: css`
|
|
163
|
+
background: #c9af28;
|
|
164
|
+
${DeleteButtonStylesForLightBackground}
|
|
165
|
+
`,
|
|
166
|
+
|
|
167
|
+
[types.severityThemes.HIGH_RISK]: css`
|
|
168
|
+
background: #cd3c44;
|
|
169
|
+
${DeleteButtonStylesForLightBackground}
|
|
170
|
+
`,
|
|
171
|
+
|
|
172
|
+
[types.severityThemes.ALERT]: css`
|
|
173
|
+
background: none;
|
|
174
|
+
border: 1px solid ${tokens.color.orangeDarken10};
|
|
175
|
+
color: ${tokens.color.orangeDarken10};
|
|
176
|
+
${DeleteButtonStylesForDarkBackground}
|
|
177
|
+
`,
|
|
178
|
+
};
|
|
@@ -110,6 +110,7 @@ export default function Variations() {
|
|
|
110
110
|
key={theme[1]}
|
|
111
111
|
theme={theme[1]}
|
|
112
112
|
size={permutation.tagSize}
|
|
113
|
+
onRemove={handleRemove}
|
|
113
114
|
avatar={
|
|
114
115
|
<Avatar isRound size={permutation.avatarSize}>
|
|
115
116
|
<CalendarIcon />
|
|
@@ -133,6 +134,7 @@ export default function Variations() {
|
|
|
133
134
|
key={theme[1]}
|
|
134
135
|
theme={theme[1]}
|
|
135
136
|
size={permutation.tagSize}
|
|
137
|
+
onRemove={handleRemove}
|
|
136
138
|
avatar={
|
|
137
139
|
<Avatar isRound size={permutation.avatarSize}>
|
|
138
140
|
<CalendarIcon />
|