orcs-design-system 2.0.69 → 2.0.72

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.
Files changed (5) hide show
  1. package/es/components/Avatar/Avatar.stories.js +39 -21
  2. package/es/components/Avatar/index.js +17 -3
  3. package/es/components/Tag/Tag.stories.js +106 -10
  4. package/es/components/Tag/index.js +99 -24
  5. package/package.json +2 -2
package/es/components/Avatar/Avatar.stories.js CHANGED
@@ -18,7 +18,7 @@ export var defaultAvatar = function defaultAvatar() {
18
18
  title: "Ayden Lundgre",
19
19
  initials: "AL",
20
20
  subtitle: "Senior Business Analyst",
21
- image: "https://uifaces.co/our-content/donated/gPZwCbdS.jpg"
21
+ image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png"
22
22
  });
23
23
  };
24
24
  defaultAvatar.storyName = "Default";
@@ -41,21 +41,17 @@ export var imageOnly = function imageOnly() {
41
41
  return /*#__PURE__*/React.createElement(Spacer, {
42
42
  my: 4
43
43
  }, /*#__PURE__*/React.createElement(Avatar, {
44
- image: "https://uifaces.co/our-content/donated/gPZwCbdS.jpg"
45
- }), /*#__PURE__*/React.createElement(Avatar, {
46
- initials: "AL"
47
- }), /*#__PURE__*/React.createElement(Avatar, {
48
- initials: "Fun",
49
- uppercase: false,
50
- shape: "hexagon"
44
+ image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png"
51
45
  }));
52
46
  };
53
47
  imageOnly.storyName = "Image only";
54
48
  export var iconOnly = function iconOnly() {
55
- return /*#__PURE__*/React.createElement(Avatar, {
49
+ return /*#__PURE__*/React.createElement(Spacer, {
50
+ my: 4
51
+ }, /*#__PURE__*/React.createElement(Avatar, {
56
52
  title: "Ayden Lundgre",
57
53
  subtitle: "Senior Business Analyst"
58
- });
54
+ }));
59
55
  };
60
56
  iconOnly.storyName = "Icon only";
61
57
  export var nameLink = function nameLink() {
@@ -65,7 +61,7 @@ export var nameLink = function nameLink() {
65
61
  }, "Ayden Lundgre"),
66
62
  subtitle: "Senior Business Analyst",
67
63
  initials: "AL",
68
- image: "https://uifaces.co/our-content/donated/gPZwCbdS.jpg"
64
+ image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png"
69
65
  });
70
66
  };
71
67
  nameLink.storyName = "Name as link";
@@ -82,7 +78,7 @@ export var small = function small() {
82
78
  title: "Ayden Lundgre",
83
79
  subtitle: "Senior Business Analyst",
84
80
  initials: "AL",
85
- image: "https://uifaces.co/our-content/donated/gPZwCbdS.jpg"
81
+ image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png"
86
82
  }), /*#__PURE__*/React.createElement(Avatar, {
87
83
  sizing: "small",
88
84
  title: /*#__PURE__*/React.createElement(StyledLink, {
@@ -90,7 +86,7 @@ export var small = function small() {
90
86
  }, "Ayden Lundgre"),
91
87
  subtitle: "Senior Business Analyst",
92
88
  initials: "AL",
93
- image: "https://uifaces.co/our-content/donated/gPZwCbdS.jpg"
89
+ image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png"
94
90
  }));
95
91
  };
96
92
  small.storyName = "Small";
@@ -105,7 +101,7 @@ export var inverted = function inverted() {
105
101
  title: "Ayden Lundgre",
106
102
  subtitle: "Senior Business Analyst",
107
103
  initials: "AL",
108
- image: "https://uifaces.co/our-content/donated/gPZwCbdS.jpg"
104
+ image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png"
109
105
  }), /*#__PURE__*/React.createElement(Avatar, {
110
106
  type: "inverted",
111
107
  title: /*#__PURE__*/React.createElement(StyledLink, {
@@ -113,7 +109,7 @@ export var inverted = function inverted() {
113
109
  }, "Ayden Lundgre"),
114
110
  subtitle: "Senior Business Analyst",
115
111
  initials: "AL",
116
- image: "https://uifaces.co/our-content/donated/gPZwCbdS.jpg"
112
+ image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png"
117
113
  }), /*#__PURE__*/React.createElement(Avatar, {
118
114
  type: "inverted",
119
115
  sizing: "small",
@@ -130,11 +126,11 @@ export var inverted = function inverted() {
130
126
  }, "Ayden Lundgre"),
131
127
  subtitle: "Senior Business Analyst",
132
128
  initials: "AL",
133
- image: "https://uifaces.co/our-content/donated/gPZwCbdS.jpg"
129
+ image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png"
134
130
  })));
135
131
  };
136
132
  inverted.storyName = "Inverted";
137
- export var alternateShape = function alternateShape() {
133
+ export var alternateShapes = function alternateShapes() {
138
134
  return /*#__PURE__*/React.createElement(Spacer, {
139
135
  my: 4
140
136
  }, /*#__PURE__*/React.createElement(Avatar, {
@@ -143,7 +139,7 @@ export var alternateShape = function alternateShape() {
143
139
  href: "#"
144
140
  }, "Innovation Lab"),
145
141
  subtitle: "15 team members",
146
- image: "https://images.unsplash.com/photo-1592609931095-54a2168ae893?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNjAxODB8MHwxfHNlYXJjaHwyNnx8Y29kZXxlbnwwfDB8fHwxNjI5MjczNjA3&ixlib=rb-1.2.1&q=80&w=1080"
142
+ image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80"
147
143
  }), /*#__PURE__*/React.createElement(Avatar, {
148
144
  shape: "hexagon",
149
145
  sizing: "small",
@@ -159,9 +155,31 @@ export var alternateShape = function alternateShape() {
159
155
  href: "#"
160
156
  }, "Innovation Lab"),
161
157
  subtitle: "15 team members"
158
+ }), /*#__PURE__*/React.createElement(Avatar, {
159
+ shape: "tag",
160
+ title: /*#__PURE__*/React.createElement(StyledLink, {
161
+ href: "#"
162
+ }, "Javascript"),
163
+ subtitle: "Tagged 123 times",
164
+ image: "https://images.unsplash.com/photo-1627398242454-45a1465c2479?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2148&q=80"
165
+ }), /*#__PURE__*/React.createElement(Avatar, {
166
+ shape: "tag",
167
+ sizing: "small",
168
+ title: /*#__PURE__*/React.createElement(StyledLink, {
169
+ href: "#"
170
+ }, "Javascript"),
171
+ subtitle: "Tagged 123 times",
172
+ initials: "JS"
173
+ }), /*#__PURE__*/React.createElement(Avatar, {
174
+ shape: "tag",
175
+ sizing: "small",
176
+ title: /*#__PURE__*/React.createElement(StyledLink, {
177
+ href: "#"
178
+ }, "Javascript"),
179
+ subtitle: "Tagged 123 times"
162
180
  }));
163
181
  };
164
- alternateShape.storyName = "Alternate Shape";
182
+ alternateShapes.storyName = "Alternate Shapes";
165
183
  defaultAvatar.__docgenInfo = {
166
184
  "description": "",
167
185
  "methods": [],
@@ -197,8 +215,8 @@ inverted.__docgenInfo = {
197
215
  "methods": [],
198
216
  "displayName": "inverted"
199
217
  };
200
- alternateShape.__docgenInfo = {
218
+ alternateShapes.__docgenInfo = {
201
219
  "description": "",
202
220
  "methods": [],
203
- "displayName": "alternateShape"
221
+ "displayName": "alternateShapes"
204
222
  };
package/es/components/Avatar/index.js CHANGED
@@ -80,6 +80,10 @@ var Image = styled("img").withConfig({
80
80
  hexagon: {
81
81
  borderRadius: "0",
82
82
  clipPath: "polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%)"
83
+ },
84
+ tag: {
85
+ borderRadius: "0",
86
+ clipPath: "polygon(6% 0, 95% 0, 95% 65%, 50% 100%, 6% 65%)"
83
87
  }
84
88
  }
85
89
  }));
@@ -136,6 +140,11 @@ var Shape = styled("div").withConfig({
136
140
  hexagon: {
137
141
  borderRadius: "0",
138
142
  clipPath: "polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%)"
143
+ },
144
+ tag: {
145
+ borderRadius: "0",
146
+ paddingBottom: "8px",
147
+ clipPath: "polygon(6% 0, 95% 0, 95% 65%, 50% 100%, 6% 65%)"
139
148
  }
140
149
  }
141
150
  }));
@@ -214,6 +223,8 @@ var Avatar = function Avatar(_ref) {
214
223
  uppercase: uppercase
215
224
  }, initials ? initials : shape === "hexagon" ? /*#__PURE__*/React.createElement(Icon, {
216
225
  icon: ["fas", "users"]
226
+ }) : shape === "tag" ? /*#__PURE__*/React.createElement(Icon, {
227
+ icon: ["fas", "tag"]
217
228
  }) : /*#__PURE__*/React.createElement(Icon, {
218
229
  icon: ["fas", "user"]
219
230
  })), (hasTitle || hasSubtitle) && /*#__PURE__*/React.createElement(TextContent, {
@@ -234,8 +245,8 @@ Avatar.propTypes = {
234
245
  /** Changes the sizing of the Avatar component */
235
246
  sizing: PropTypes.oneOf(["small", "default"]),
236
247
 
237
- /** Changes the sizing of the Avatar component */
238
- shape: PropTypes.oneOf(["hexagon", "default"]),
248
+ /** Changes the shape of the Avatar component */
249
+ shape: PropTypes.oneOf(["hexagon", "tag", "default"]),
239
250
 
240
251
  /** Specifies the inverted type for dark backgrounds */
241
252
  type: PropTypes.oneOf(["inverted", "default"]),
@@ -311,13 +322,16 @@ Avatar.__docgenInfo = {
311
322
  "value": [{
312
323
  "value": "\"hexagon\"",
313
324
  "computed": false
325
+ }, {
326
+ "value": "\"tag\"",
327
+ "computed": false
314
328
  }, {
315
329
  "value": "\"default\"",
316
330
  "computed": false
317
331
  }]
318
332
  },
319
333
  "required": false,
320
- "description": "Changes the sizing of the Avatar component"
334
+ "description": "Changes the shape of the Avatar component"
321
335
  },
322
336
  "type": {
323
337
  "type": {
package/es/components/Tag/Tag.stories.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from "react";
2
2
  import Tag from ".";
3
3
  import Flex from "../Flex";
4
+ import Spacer from "../Spacer";
4
5
  import mdx from "./Tag.mdx";
5
6
  export default {
6
7
  title: "Components/Tag",
@@ -12,7 +13,7 @@ export default {
12
13
  },
13
14
  decorators: [function (storyFn) {
14
15
  return /*#__PURE__*/React.createElement(Flex, {
15
- center: true
16
+ flexWrap: "wrap"
16
17
  }, storyFn());
17
18
  }]
18
19
  };
@@ -21,23 +22,67 @@ export var defaultTag = function defaultTag() {
21
22
  };
22
23
  defaultTag.storyName = "Default";
23
24
  export var selected = function selected() {
24
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tag, {
25
+ return /*#__PURE__*/React.createElement(Spacer, {
26
+ m: "2px"
27
+ }, /*#__PURE__*/React.createElement(Tag, {
25
28
  selected: true
26
29
  }, "devops"), /*#__PURE__*/React.createElement(Tag, {
27
30
  selected: true
28
31
  }, "software engineering"), /*#__PURE__*/React.createElement(Tag, null, "product design"), /*#__PURE__*/React.createElement(Tag, null, "digital transformation"));
29
32
  };
30
- export var noCross = function noCross() {
31
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tag, {
33
+ export var showEdit = function showEdit() {
34
+ return /*#__PURE__*/React.createElement(Spacer, {
35
+ m: "2px"
36
+ }, /*#__PURE__*/React.createElement(Tag, {
32
37
  selected: true,
33
- hideCross: true
38
+ showEdit: true
34
39
  }, "devops"), /*#__PURE__*/React.createElement(Tag, {
35
40
  selected: true,
36
- hideCross: true
37
- }, "software engineering"), /*#__PURE__*/React.createElement(Tag, null, "product design"), /*#__PURE__*/React.createElement(Tag, null, "digital transformation"));
41
+ showEdit: true
42
+ }, "software engineering"), /*#__PURE__*/React.createElement(Tag, {
43
+ showEdit: true
44
+ }, "product design"), /*#__PURE__*/React.createElement(Tag, {
45
+ showEdit: true
46
+ }, "digital transformation"));
47
+ };
48
+ export var showRemove = function showRemove() {
49
+ return /*#__PURE__*/React.createElement(Spacer, {
50
+ m: "2px"
51
+ }, /*#__PURE__*/React.createElement(Tag, {
52
+ selected: true,
53
+ showRemove: true
54
+ }, "devops"), /*#__PURE__*/React.createElement(Tag, {
55
+ selected: true,
56
+ showRemove: true
57
+ }, "software engineering"), /*#__PURE__*/React.createElement(Tag, {
58
+ showRemove: true
59
+ }, "product design"), /*#__PURE__*/React.createElement(Tag, {
60
+ showRemove: true
61
+ }, "digital transformation"));
62
+ };
63
+ export var showEditAndRemove = function showEditAndRemove() {
64
+ return /*#__PURE__*/React.createElement(Spacer, {
65
+ m: "2px"
66
+ }, /*#__PURE__*/React.createElement(Tag, {
67
+ selected: true,
68
+ showEdit: true,
69
+ showRemove: true
70
+ }, "devops"), /*#__PURE__*/React.createElement(Tag, {
71
+ selected: true,
72
+ showEdit: true,
73
+ showRemove: true
74
+ }, "software engineering"), /*#__PURE__*/React.createElement(Tag, {
75
+ showEdit: true,
76
+ showRemove: true
77
+ }, "product design"), /*#__PURE__*/React.createElement(Tag, {
78
+ showEdit: true,
79
+ showRemove: true
80
+ }, "digital transformation"));
38
81
  };
39
82
  export var disabled = function disabled() {
40
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tag, {
83
+ return /*#__PURE__*/React.createElement(Spacer, {
84
+ m: "2px"
85
+ }, /*#__PURE__*/React.createElement(Tag, {
41
86
  disabled: true
42
87
  }, "devops"), /*#__PURE__*/React.createElement(Tag, {
43
88
  disabled: true
@@ -47,6 +92,42 @@ export var disabled = function disabled() {
47
92
  disabled: true
48
93
  }, "digital transformation"));
49
94
  };
95
+ export var withTagType = function withTagType() {
96
+ return /*#__PURE__*/React.createElement(Spacer, {
97
+ m: "2px"
98
+ }, /*#__PURE__*/React.createElement(Tag, {
99
+ tagType: "skill"
100
+ }, "devops"), /*#__PURE__*/React.createElement(Tag, {
101
+ tagType: "skill",
102
+ showRemove: true
103
+ }, "devops"), /*#__PURE__*/React.createElement(Tag, {
104
+ tagType: "skill",
105
+ showEdit: true
106
+ }, "devops"), /*#__PURE__*/React.createElement(Tag, {
107
+ tagType: "skill",
108
+ showRemove: true,
109
+ showEdit: true
110
+ }, "devops"), /*#__PURE__*/React.createElement(Tag, {
111
+ selected: true,
112
+ tagType: "skill"
113
+ }, "javascript"), /*#__PURE__*/React.createElement(Tag, {
114
+ selected: true,
115
+ showRemove: true,
116
+ tagType: "skill"
117
+ }, "javascript"), /*#__PURE__*/React.createElement(Tag, {
118
+ selected: true,
119
+ showEdit: true,
120
+ tagType: "skill"
121
+ }, "javascript"), /*#__PURE__*/React.createElement(Tag, {
122
+ selected: true,
123
+ showRemove: true,
124
+ showEdit: true,
125
+ tagType: "skill"
126
+ }, "javascript"), /*#__PURE__*/React.createElement(Tag, {
127
+ disabled: true,
128
+ tagType: "skill"
129
+ }, "product design"));
130
+ };
50
131
  defaultTag.__docgenInfo = {
51
132
  "description": "",
52
133
  "methods": [],
@@ -57,13 +138,28 @@ selected.__docgenInfo = {
57
138
  "methods": [],
58
139
  "displayName": "selected"
59
140
  };
60
- noCross.__docgenInfo = {
141
+ showEdit.__docgenInfo = {
61
142
  "description": "",
62
143
  "methods": [],
63
- "displayName": "noCross"
144
+ "displayName": "showEdit"
145
+ };
146
+ showRemove.__docgenInfo = {
147
+ "description": "",
148
+ "methods": [],
149
+ "displayName": "showRemove"
150
+ };
151
+ showEditAndRemove.__docgenInfo = {
152
+ "description": "",
153
+ "methods": [],
154
+ "displayName": "showEditAndRemove"
64
155
  };
65
156
  disabled.__docgenInfo = {
66
157
  "description": "",
67
158
  "methods": [],
68
159
  "displayName": "disabled"
160
+ };
161
+ withTagType.__docgenInfo = {
162
+ "description": "",
163
+ "methods": [],
164
+ "displayName": "withTagType"
69
165
  };
package/es/components/Tag/index.js CHANGED
@@ -1,38 +1,68 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
1
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
2
  import React from "react";
4
3
  import styled, { css, ThemeProvider } from "styled-components";
5
4
  import PropTypes from "prop-types";
6
5
  import systemtheme from "../../systemtheme";
7
6
  import { space, layout } from "styled-system";
7
+ import Icon from "../Icon";
8
8
  import { themeGet } from "@styled-system/theme-get";
9
- var TagWrapper = styled.button.withConfig({
9
+ var TagWrapper = styled.div.withConfig({
10
10
  displayName: "Tag__TagWrapper",
11
11
  componentId: "sc-1dh2aa8-0"
12
- })(["", " ", " -moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;display:block;border-radius:13px;font-size:1.4rem;font-weight:600;margin:3px;white-space:nowrap;position:relative;transition:", ";cursor:", ";border:solid 1px ", ";padding:", ";background:", ";color:", ";", " &:focus{outline:0;box-shadow:", ";}", ""], space, layout, themeGet("transition.transitionDefault"), function (props) {
12
+ })(["", " ", " display:flex;align-items:center;justify-content:center;"], space, layout);
13
+ var TagValue = styled.button.withConfig({
14
+ displayName: "Tag__TagValue",
15
+ componentId: "sc-1dh2aa8-1"
16
+ })(["-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;display:flex;align-items:center;flex-wrap:nowrap;font-size:1.3rem;font-weight:600;white-space:nowrap;position:relative;z-index:1;transition:", ";cursor:", ";border-radius:", ";border:solid 1px ", ";padding:", ";background-color:", ";color:", ";", " &:focus{outline:0;z-index:2;box-shadow:", ";}"], themeGet("transition.transitionDefault"), function (props) {
13
17
  return props.disabled ? "default" : "pointer";
14
18
  }, function (props) {
15
- return props.disabled ? themeGet("colors.greyDark") : themeGet("colors.primary");
19
+ return props.showEdit || props.showRemove ? "15px 0 0 15px" : "15px";
16
20
  }, function (props) {
17
- return props.hideCross ? "3px 12px 4px 12px;" : props.selected ? "3px 25px 4px 12px;" : "3px 12px 4px 12px;";
21
+ return props.disabled ? themeGet("colors.greyLight") : themeGet("colors.primary");
18
22
  }, function (props) {
19
- return props.selected ? themeGet("colors.primary") : props.disabled ? themeGet("colors.greyDark") : themeGet("colors.white");
23
+ return props.showEdit || props.showRemove ? "3px 4px 4px 10px" : "3px 10px 4px 10px";
20
24
  }, function (props) {
21
- return props.selected ? themeGet("colors.white") : props.disabled ? themeGet("colors.white") : themeGet("colors.primary");
25
+ return props.selected ? themeGet("colors.primary") : props.disabled ? themeGet("colors.greyLighter") : themeGet("colors.white");
26
+ }, function (props) {
27
+ return props.selected ? themeGet("colors.white") : props.disabled ? themeGet("colors.greyDarker") : themeGet("colors.primary");
22
28
  }, function (props) {
23
- return props.disabled ? css([""]) : css(["&:hover{border:solid 1px ", ";color:", ";background:", ";}"], themeGet("colors.primaryDark"), function (props) {
29
+ return props.disabled ? css([""]) : css(["&:hover{border:solid 1px ", ";color:", ";background-color:", ";div{color:", ";}}"], themeGet("colors.primaryDark"), function (props) {
24
30
  return props.selected ? themeGet("colors.white") : themeGet("colors.primaryDark");
25
31
  }, function (props) {
26
32
  return props.selected ? themeGet("colors.primaryDark") : themeGet("colors.white");
33
+ }, function (props) {
34
+ return props.selected ? themeGet("colors.white") : themeGet("colors.primaryDark");
27
35
  });
28
36
  }, function (props) {
29
37
  return themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.primary30")(props);
38
+ });
39
+ var TagEdit = styled(TagValue).withConfig({
40
+ displayName: "Tag__TagEdit",
41
+ componentId: "sc-1dh2aa8-2"
42
+ })(["border-radius:", ";padding:", ";&:focus{z-index:2;box-shadow:-0.5px 0 0 3.5px ", ";}", ""], function (props) {
43
+ return props.showRemove ? "0" : "0 15px 15px 0";
30
44
  }, function (props) {
31
- return props.hideCross ? css([""]) : css(["&::after{content:\"+\";display:block;position:absolute;right:7px;top:1px;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-size:1.8rem;font-weight:600;transform-origin:50% 50%;color:", ";transition:", ";opacity:", ";transform:", ";}"], themeGet("colors.white"), themeGet("transition.transitionDefault"), function (props) {
32
- return props.selected ? 1 : 0;
33
- }, function (props) {
34
- return props.selected ? "rotate(45deg) scale(1)" : "rotate(45deg) scale(0)";
35
- });
45
+ return props.showRemove ? "2px 7px 5px 7px" : "2px 8px 5px 8px";
46
+ }, themeGet("colors.primary30"), function (props) {
47
+ return props.selected ? css(["border-left:solid 1px ", ";&:hover{border-left:solid 1px ", ";}&:focus{box-shadow:", ";}"], themeGet("colors.primaryDark"), themeGet("colors.primaryDark"), function (props) {
48
+ return themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.primary30")(props);
49
+ }) : css(["border-left:0;&:hover{border-left:0;}"]);
50
+ });
51
+ var TagRemove = styled(TagValue).withConfig({
52
+ displayName: "Tag__TagRemove",
53
+ componentId: "sc-1dh2aa8-3"
54
+ })(["border-radius:0 15px 15px 0;padding:2px 10px 5px 9px;&:focus{z-index:2;box-shadow:-0.5px 0 0 3.5px ", ";}", ""], themeGet("colors.primary30"), function (props) {
55
+ return props.selected ? css(["border-left:solid 1px ", ";&:hover{border-left:solid 1px ", ";}&:focus{box-shadow:", ";}"], themeGet("colors.primaryDark"), themeGet("colors.primaryDark"), function (props) {
56
+ return themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.primary30")(props);
57
+ }) : css(["border-left:0;&:hover{border-left:0;}"]);
58
+ });
59
+ var TagType = styled.div.withConfig({
60
+ displayName: "Tag__TagType",
61
+ componentId: "sc-1dh2aa8-4"
62
+ })(["text-transform:uppercase;margin-left:", ";padding:3px;font-size:1.2rem;line-height:1;border-radius:", ";font-size:", ";background-color:", ";color:", ";"], themeGet("space.s"), themeGet("radii.1"), themeGet("fontSizes.0"), function (props) {
63
+ return props.selected ? themeGet("colors.primaryDark") : props.disabled ? themeGet("colors.grey") : themeGet("colors.primaryLightest");
64
+ }, function (props) {
65
+ return props.selected ? themeGet("colors.white") : props.disabled ? themeGet("colors.white") : themeGet("colors.primary");
36
66
  });
37
67
  /**
38
68
  * The top two rows are an example of how tags should be used when they are selectable/unselectable. There is the option to display the cross icon or not.
@@ -43,35 +73,62 @@ var TagWrapper = styled.button.withConfig({
43
73
  export default function Tag(_ref) {
44
74
  var selected = _ref.selected,
45
75
  disabled = _ref.disabled,
46
- hideCross = _ref.hideCross,
76
+ showRemove = _ref.showRemove,
47
77
  theme = _ref.theme,
48
- props = _objectWithoutProperties(_ref, ["selected", "disabled", "hideCross", "theme"]);
78
+ tagType = _ref.tagType,
79
+ showEdit = _ref.showEdit,
80
+ children = _ref.children,
81
+ props = _objectWithoutProperties(_ref, ["selected", "disabled", "showRemove", "theme", "tagType", "showEdit", "children"]);
49
82
 
50
83
  return /*#__PURE__*/React.createElement(ThemeProvider, {
51
84
  theme: theme
52
- }, /*#__PURE__*/React.createElement(TagWrapper, _extends({
85
+ }, /*#__PURE__*/React.createElement(TagWrapper, props, /*#__PURE__*/React.createElement(TagValue, {
86
+ selected: selected,
87
+ disabled: disabled,
88
+ showEdit: showEdit,
89
+ showRemove: showRemove
90
+ }, children, tagType ? /*#__PURE__*/React.createElement(TagType, {
91
+ selected: selected,
92
+ disabled: disabled
93
+ }, tagType) : null), showEdit ? /*#__PURE__*/React.createElement(TagEdit, {
53
94
  selected: selected,
54
95
  disabled: disabled,
55
- hideCross: hideCross
56
- }, props)));
96
+ showRemove: showRemove
97
+ }, /*#__PURE__*/React.createElement(Icon, {
98
+ icon: ["fas", "pen"],
99
+ size: "xs"
100
+ })) : null, showRemove ? /*#__PURE__*/React.createElement(TagRemove, {
101
+ selected: selected,
102
+ disabled: disabled
103
+ }, /*#__PURE__*/React.createElement(Icon, {
104
+ icon: ["fas", "times"],
105
+ size: "xs"
106
+ })) : null));
57
107
  }
58
108
  Tag.propTypes = {
59
109
  /** Adds selected styling to tag */
60
110
  selected: PropTypes.bool,
61
111
 
112
+ /** Shows the remove button */
113
+ showRemove: PropTypes.bool,
114
+
115
+ /** Shows edit button */
116
+ showEdit: PropTypes.bool,
117
+
118
+ /** Can add a type to a tag as text */
119
+ tagType: PropTypes.string,
120
+
62
121
  /** Adds disabled attribute and styling to tag */
63
122
  disabled: PropTypes.bool,
64
123
 
65
- /** Hides the cross icon */
66
- hideCross: PropTypes.bool,
67
-
68
124
  /** Specifies the design theme */
69
125
  theme: PropTypes.object
70
126
  };
71
127
  Tag.defaultProps = {
72
128
  selected: false,
73
129
  disabled: false,
74
- hideCross: false,
130
+ showEdit: false,
131
+ showRemove: false,
75
132
  theme: systemtheme
76
133
  };
77
134
  Tag.__docgenInfo = {
@@ -101,7 +158,18 @@ Tag.__docgenInfo = {
101
158
  "required": false,
102
159
  "description": "Adds disabled attribute and styling to tag"
103
160
  },
104
- "hideCross": {
161
+ "showEdit": {
162
+ "defaultValue": {
163
+ "value": "false",
164
+ "computed": false
165
+ },
166
+ "type": {
167
+ "name": "bool"
168
+ },
169
+ "required": false,
170
+ "description": "Shows edit button"
171
+ },
172
+ "showRemove": {
105
173
  "defaultValue": {
106
174
  "value": "false",
107
175
  "computed": false
@@ -110,7 +178,7 @@ Tag.__docgenInfo = {
110
178
  "name": "bool"
111
179
  },
112
180
  "required": false,
113
- "description": "Hides the cross icon"
181
+ "description": "Shows the remove button"
114
182
  },
115
183
  "theme": {
116
184
  "defaultValue": {
@@ -122,6 +190,13 @@ Tag.__docgenInfo = {
122
190
  },
123
191
  "required": false,
124
192
  "description": "Specifies the design theme"
193
+ },
194
+ "tagType": {
195
+ "type": {
196
+ "name": "string"
197
+ },
198
+ "required": false,
199
+ "description": "Can add a type to a tag as text"
125
200
  }
126
201
  }
127
202
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "orcs-design-system",
3
- "version": "2.0.69",
3
+ "version": "2.0.72",
4
4
  "description": "Orchestrated's Design System, aka: ORCS",
5
5
  "keywords": [
6
6
  "design",
@@ -45,7 +45,7 @@
45
45
  "@styled-system/prop-types": "^5.1.5",
46
46
  "@styled-system/should-forward-prop": "^5.1.5",
47
47
  "@styled-system/theme-get": "^5.1.2",
48
- "moment": "^2.29.2",
48
+ "moment": "^2.29.4",
49
49
  "polished": "^3.7.1",
50
50
  "prop-types": "^15.6.2",
51
51
  "react-app-polyfill": "^2.0.0",