orcs-design-system 3.1.45 → 3.1.46

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/Button/index.js +135 -85
  2. package/es/components/SideNav/NavItem.js +9 -22
  3. package/es/components.test.js +1 -1
  4. package/es/index.js +1 -1
  5. package/package.json +1 -1
package/es/components/Button/index.js CHANGED
@@ -1,5 +1,9 @@
1
1
  import _typeof from "@babel/runtime/helpers/typeof";
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
4
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
5
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
6
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
3
7
  import React from "react";
4
8
  import styled, { ThemeProvider } from "styled-components";
5
9
  import PropTypes from "prop-types";
@@ -9,20 +13,89 @@ import shouldForwardProp from "@styled-system/should-forward-prop";
9
13
  import Icon from "../Icon";
10
14
  import Loading from "../Loading";
11
15
  import { themeGet } from "@styled-system/theme-get";
16
+ export var VARIANT_COLORS = {
17
+ "default": {
18
+ background: "colors.primary",
19
+ color: "colors.white",
20
+ hovered: {
21
+ background: "colors.primaryDark",
22
+ color: "colors.white"
23
+ }
24
+ },
25
+ success: {
26
+ background: "colors.success",
27
+ color: "colors.white",
28
+ hovered: {
29
+ background: "colors.successDark",
30
+ color: "colors.white"
31
+ }
32
+ },
33
+ successAlternate: {
34
+ background: "colors.greyLightest",
35
+ color: "colors.success",
36
+ hovered: {
37
+ background: "colors.greyLighter",
38
+ color: "colors.success"
39
+ }
40
+ },
41
+ danger: {
42
+ background: "colors.danger",
43
+ color: "colors.white",
44
+ hovered: {
45
+ background: "colors.dangerDark",
46
+ color: "colors.white"
47
+ }
48
+ },
49
+ dangerAlternate: {
50
+ background: "colors.greyLightest",
51
+ color: "colors.danger",
52
+ hovered: {
53
+ background: "colors.greyLighter",
54
+ color: "colors.danger"
55
+ }
56
+ },
57
+ disabled: {
58
+ background: "colors.greyLighter",
59
+ color: "colors.grey",
60
+ hovered: {
61
+ background: "colors.greyLighter",
62
+ color: "colors.grey"
63
+ }
64
+ },
65
+ ghost: {
66
+ background: "colors.primaryLightest",
67
+ color: "colors.primaryDark",
68
+ hovered: {
69
+ background: "colors.primaryLighter",
70
+ color: "colors.primaryDarker"
71
+ }
72
+ }
73
+ };
12
74
  var ButtonStyles = compose(space, layout, color, border);
75
+ var addVariantColors = function addVariantColors(variant, key, props) {
76
+ return _objectSpread(_objectSpread({}, variant), {}, {
77
+ bg: themeGet(VARIANT_COLORS[key].background)(props),
78
+ color: themeGet(VARIANT_COLORS[key].color)(props),
79
+ "&:hover": _objectSpread(_objectSpread({}, variant["&:hover"] || {}), {}, {
80
+ bg: themeGet(VARIANT_COLORS[key].hovered.background)(props),
81
+ color: themeGet(VARIANT_COLORS[key].hovered.color)(props)
82
+ })
83
+ });
84
+ };
13
85
  var StyledButton = styled("button").withConfig({
14
86
  shouldForwardProp: shouldForwardProp,
15
87
  displayName: "Button__StyledButton",
16
88
  componentId: "sc-10uojnk-0"
17
89
  }).attrs(function (props) {
18
90
  return {
19
- "data-testid": props.dataTestId ? props.dataTestId : props["data-testid"] ? props["data-testid"] : null,
20
- disabled: props.disabled ? true : props.variant == "disabled" ? true : false
91
+ "data-testid": props.dataTestId || props["data-testid"],
92
+ disabled: props.disabled || props.variant == "disabled",
93
+ className: "".concat(props.className || "", " variant-").concat(props.variant || "default")
21
94
  };
22
95
  })(function (props) {
23
96
  return css({
24
- bg: themeGet("colors.primary")(props),
25
- color: themeGet("colors.white")(props),
97
+ bg: themeGet(VARIANT_COLORS["default"].background)(props),
98
+ color: themeGet(VARIANT_COLORS["default"].color)(props),
26
99
  borderColor: themeGet("colors.primary")(props),
27
100
  display: "flex",
28
101
  alignItems: "center",
@@ -49,7 +122,7 @@ var StyledButton = styled("button").withConfig({
49
122
  marginLeft: !props.iconRight ? "" : props.small ? "xs" : "s"
50
123
  },
51
124
  "&:hover": {
52
- bg: themeGet("colors.primaryDark")(props),
125
+ bg: themeGet(VARIANT_COLORS["default"].hovered.background)(props),
53
126
  borderColor: themeGet("colors.primaryDark")(props),
54
127
  borderWidth: themeGet("borderWidths.1")(props),
55
128
  borderStyle: "solid"
@@ -60,98 +133,75 @@ var StyledButton = styled("button").withConfig({
60
133
  }
61
134
  });
62
135
  }, function (props) {
63
- return variant({
64
- variants: {
65
- "default": {},
66
- success: {
67
- bg: themeGet("colors.success")(props),
68
- color: themeGet("colors.white")(props),
69
- borderColor: themeGet("colors.success")(props),
70
- "&:hover": {
71
- bg: themeGet("colors.successDark")(props),
72
- borderColor: themeGet("colors.successDark")(props)
73
- },
74
- "&:focus": {
75
- outline: "0",
76
- boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.successDarker")(props)
77
- }
78
- },
79
- successAlternate: {
80
- bg: themeGet("colors.greyLightest")(props),
81
- color: themeGet("colors.success")(props),
82
- borderColor: themeGet("colors.greyLightest")(props),
83
- "&:hover": {
84
- bg: themeGet("colors.greyLighter")(props),
85
- borderColor: themeGet("colors.greyLighter")(props)
86
- },
87
- "&:focus": {
88
- outline: "0",
89
- boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.successLight")(props)
90
- }
136
+ var getOutlineStyle = function getOutlineStyle(color) {
137
+ return {
138
+ outline: "0",
139
+ boxShadow: [themeGet("shadows.thinOutline")(props), themeGet(color)(props)].join(" ")
140
+ };
141
+ };
142
+ var variants = {
143
+ "default": {},
144
+ success: {
145
+ borderColor: themeGet("colors.success")(props),
146
+ "&:hover": {
147
+ borderColor: themeGet("colors.successDark")(props)
91
148
  },
92
- danger: {
93
- bg: themeGet("colors.danger")(props),
94
- color: themeGet("colors.white")(props),
95
- borderColor: themeGet("colors.danger")(props),
96
- "&:hover": {
97
- bg: themeGet("colors.dangerDark")(props),
98
- borderColor: themeGet("colors.dangerDark")(props)
99
- },
100
- "&:focus": {
101
- outline: "0",
102
- boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.dangerDarker")(props)
103
- }
149
+ "&:focus": getOutlineStyle("colors.successDarker")
150
+ },
151
+ successAlternate: {
152
+ borderColor: themeGet("colors.greyLightest")(props),
153
+ "&:hover": {
154
+ borderColor: themeGet("colors.greyLighter")(props)
104
155
  },
105
- dangerAlternate: {
106
- bg: themeGet("colors.greyLightest")(props),
107
- color: themeGet("colors.danger")(props),
108
- borderColor: themeGet("colors.greyLightest")(props),
109
- "&:hover": {
110
- bg: themeGet("colors.greyLighter")(props),
111
- borderColor: themeGet("colors.greyLighter")(props)
112
- },
113
- "&:focus": {
114
- outline: "0",
115
- boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.dangerLight")(props)
116
- }
156
+ "&:focus": getOutlineStyle("colors.successLight")
157
+ },
158
+ danger: {
159
+ borderColor: themeGet("colors.danger")(props),
160
+ "&:hover": {
161
+ borderColor: themeGet("colors.dangerDark")(props)
117
162
  },
118
- disabled: {
119
- bg: themeGet("colors.greyLighter")(props),
120
- color: themeGet("colors.grey")(props),
121
- borderColor: themeGet("colors.greyLighter")(props),
122
- "&:hover": {
123
- bg: themeGet("colors.greyLighter")(props),
124
- color: themeGet("colors.grey")(props),
125
- borderColor: themeGet("colors.greyLighter")(props)
126
- }
163
+ "&:focus": getOutlineStyle("colors.dangerDarker")
164
+ },
165
+ dangerAlternate: {
166
+ borderColor: themeGet("colors.greyLightest")(props),
167
+ "&:hover": {
168
+ borderColor: themeGet("colors.greyLighter")(props)
127
169
  },
128
- ghost: {
129
- bg: themeGet("colors.primaryLightest")(props),
130
- color: themeGet("colors.primaryDark")(props),
131
- borderColor: themeGet("colors.primaryLightest")(props),
132
- "&:hover": {
133
- bg: themeGet("colors.primaryLighter")(props),
134
- borderColor: themeGet("colors.primaryLighter")(props),
135
- color: themeGet("colors.primaryDarker")(props)
136
- },
137
- "&:focus": {
138
- outline: "0",
139
- boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.primaryLight")(props)
140
- }
170
+ "&:focus": getOutlineStyle("colors.dangerLight")
171
+ },
172
+ disabled: {
173
+ borderColor: themeGet("colors.greyLighter")(props),
174
+ "&:hover": {
175
+ borderColor: themeGet("colors.greyLighter")(props)
141
176
  }
177
+ },
178
+ ghost: {
179
+ borderColor: themeGet("colors.primaryLightest")(props),
180
+ "&:hover": {
181
+ borderColor: themeGet("colors.primaryLighter")(props)
182
+ },
183
+ "&:focus": getOutlineStyle("colors.primaryLight")
142
184
  }
185
+ };
186
+ var newVariants = Object.entries(variants).reduce(function (variantsWithColors, _ref) {
187
+ var _ref2 = _slicedToArray(_ref, 2),
188
+ key = _ref2[0],
189
+ variant = _ref2[1];
190
+ if (VARIANT_COLORS[key]) {
191
+ variantsWithColors[key] = addVariantColors(variant, key, props);
192
+ }
193
+ return variantsWithColors;
194
+ }, _objectSpread({}, variants));
195
+ return variant({
196
+ variants: newVariants
143
197
  });
144
198
  }, function (props) {
145
- return props.disabled ? css({
146
- bg: themeGet("colors.greyLighter")(props),
147
- color: themeGet("colors.grey")(props),
199
+ return props.disabled ? css(addVariantColors({
148
200
  borderColor: themeGet("colors.greyLighter")(props),
149
201
  "&:hover": {
150
- bg: themeGet("colors.greyLighter")(props),
151
- color: themeGet("colors.grey")(props),
152
202
  borderColor: themeGet("colors.greyLighter")(props)
153
203
  }
154
- }) : css();
204
+ }, "disabled", props)) : css();
155
205
  }, ButtonStyles);
156
206
  export var Button = /*#__PURE__*/React.forwardRef(function (props, ref) {
157
207
  var large = props.large,
package/es/components/SideNav/NavItem.js CHANGED
@@ -3,45 +3,32 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
4
4
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
5
5
  import React from "react";
6
- import styled from "styled-components";
6
+ import styled, { css as styledCss } from "styled-components";
7
7
  import { css } from "@styled-system/css";
8
8
  import { themeGet } from "@styled-system/theme-get";
9
9
  import PropTypes from "prop-types";
10
10
  import Icon from "../Icon";
11
11
  import Popover from "../Popover";
12
- var getSharedNavItemStyles = function getSharedNavItemStyles(props) {
13
- var getThemeStyle = function getThemeStyle(style) {
14
- return themeGet(style)(props);
15
- };
16
- return "\n cursor: pointer;\n padding: ".concat(getThemeStyle("space.s"), ";\n text-decoration: none;\n border-radius: ").concat(getThemeStyle("radii.2"), ";\n width: 100%;\n position: relative;\n border: none;\n path {\n transition: ").concat(getThemeStyle("transition.transitionDefault"), ";\n fill: ").concat(getThemeStyle("colors.greyDarker"), ";\n }\n font-family: ").concat(getThemeStyle("fonts.main"), ";\n \n display: flex;\n align-items: center;\n justify-content: center;\n transition: ").concat(getThemeStyle("transition.transitionDefault"), ";\n background-color: transparent;\n font-size: 1.4rem;\n font-weight: ").concat(getThemeStyle("fontWeights.1"), "; \n\n &:hover, &:focus {\n color: ").concat(getThemeStyle("colors.primary"), ";\n path {\n fill: ").concat(getThemeStyle("colors.primary"), ";\n }\n \n }\n @media screen and (max-width: 900px) {\n width: auto;\n max-height:30px;\n height: 30px;\n }\n &:focus {\n outline: 0;\n color: ").concat(getThemeStyle("colors.primary"), ";\n path {\n fill: ").concat(getThemeStyle("colors.primary"), ";\n }\n }");
12
+ var sharedNavItemStyles = styledCss(["cursor:pointer;padding:", ";text-decoration:none;border-radius:", ";width:100%;position:relative;border:none;path{transition:", ";fill:", ";}font-family:", ";display:flex;align-items:center;justify-content:center;transition:", ";background-color:transparent;font-size:1.4rem;font-weight:", ";&:hover,&:focus{color:", ";path{fill:", ";}}@media screen and (max-width:900px){width:auto;max-height:30px;height:30px;}&:focus{outline:0;color:", ";path{fill:", ";}}"], themeGet("space.s"), themeGet("radii.2"), themeGet("transition.transitionDefault"), themeGet("colors.greyDarker"), themeGet("fonts.main"), themeGet("transition.transitionDefault"), themeGet("fontWeights.1"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("colors.primary"));
13
+ var variantActiveStyles = {
14
+ expandableItem: styledCss(["color:", ";path{fill:", ";}:after{height:100%;position:absolute;right:calc(-", " - 2px);content:\"\";border-right:3px solid ", ";z-index:5;}@media screen and (max-width:900px){:after{border-top:3px solid ", ";border-right:none;top:-", ";right:0;width:100%;}}"], themeGet("colors.primary"), themeGet("colors.primary"), themeGet("space.r"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("space.r")),
15
+ "default": styledCss(["background-color:", ";path{fill:", ";}&:hover,&:focus{path{fill:", ";}}&:focus{path{fill:", ";}}"], themeGet("colors.primary"), themeGet("colors.white"), themeGet("colors.white"), themeGet("colors.white"))
17
16
  };
18
17
  var getActiveStyles = function getActiveStyles(props) {
19
- var getThemeStyle = function getThemeStyle(style) {
20
- return themeGet(style)(props);
21
- };
22
18
  if (!props.active) return "";
23
- var primaryColor = getThemeStyle("colors.primary");
24
19
  if (props["aria-expanded"]) {
25
- return "\n color: ".concat(primaryColor, ";\n\n path {\n fill: ").concat(primaryColor, ";\n }\n :after {\n height: 100%;\n position: absolute;\n right: calc(-").concat(getThemeStyle("space.r"), " - 2px);\n content: \"\";\n border-right: 3px solid ").concat(primaryColor, ";\n z-index: 5;\n }\n\n @media screen and (max-width: 900px) {\n :after {\n border-top: 3px solid ").concat(primaryColor, ";\n border-right: none;\n top: -").concat(getThemeStyle("space.r"), ";\n right:0;\n width: 100%;\n }\n }\n ");
20
+ return variantActiveStyles.expandableItem;
26
21
  }
27
- return "\n background-color: ".concat(primaryColor, ";\n path {\n fill: ").concat(getThemeStyle("colors.white"), ";\n }\n\n &:hover, &:focus {\n path {\n fill: ").concat(getThemeStyle("colors.white"), ";\n }\n }\n &:focus {\n path {\n fill: ").concat(getThemeStyle("colors.white"), ";\n }\n }\n");
22
+ return variantActiveStyles["default"];
28
23
  };
29
24
  var SideNavItemLink = styled.div.withConfig({
30
25
  displayName: "NavItem__SideNavItemLink",
31
26
  componentId: "sc-hkm2u8-0"
32
- })(["& > a{", " ", "}"], function (props) {
33
- return getSharedNavItemStyles(props);
34
- }, function (props) {
35
- return getActiveStyles(props);
36
- });
27
+ })(["& > a{", " ", "}"], sharedNavItemStyles, getActiveStyles);
37
28
  var SideNavItem = styled("button").withConfig({
38
29
  displayName: "NavItem__SideNavItem",
39
30
  componentId: "sc-hkm2u8-1"
40
- })(["", " ", ""], function (props) {
41
- return getSharedNavItemStyles(props);
42
- }, function (props) {
43
- return getActiveStyles(props);
44
- });
31
+ })(["", " ", ""], sharedNavItemStyles, getActiveStyles);
45
32
  var BadgeNumber = styled("div").withConfig({
46
33
  displayName: "NavItem__BadgeNumber",
47
34
  componentId: "sc-hkm2u8-2"
package/es/components.test.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import * as components from ".";
2
2
  test("all components exported", function () {
3
- expect(Object.keys(components)).toMatchInlineSnapshot("\n Array [\n \"ActionsMenu\",\n \"ActionsMenuBody\",\n \"ActionsMenuHeading\",\n \"ActionsMenuItem\",\n \"Avatar\",\n \"Badge\",\n \"Box\",\n \"Button\",\n \"ButtonGroupContainer\",\n \"ButtonGroupItem\",\n \"Card\",\n \"Checkbox\",\n \"Code\",\n \"DatePicker\",\n \"Divider\",\n \"Expandable\",\n \"Flex\",\n \"FlexItem\",\n \"GlobalStyles\",\n \"Grid\",\n \"GridItem\",\n \"H1\",\n \"H2\",\n \"H3\",\n \"H4\",\n \"H5\",\n \"H6\",\n \"Header\",\n \"HeaderSimple\",\n \"Icon\",\n \"Loading\",\n \"Modal\",\n \"Notification\",\n \"P\",\n \"Popover\",\n \"ProgressBar\",\n \"Quote\",\n \"RadioButton\",\n \"Range\",\n \"Select\",\n \"SideNav\",\n \"Sidebar\",\n \"SidebarClose\",\n \"SidebarPanel\",\n \"SidebarPanels\",\n \"SidebarTab\",\n \"SidebarTabs\",\n \"Small\",\n \"Spacer\",\n \"StatusDot\",\n \"StyledLink\",\n \"SystemThemeProvider\",\n \"Tab\",\n \"TabsContainer\",\n \"Tag\",\n \"Text\",\n \"TextArea\",\n \"TextInput\",\n \"Toggle\",\n \"TreeNav\",\n \"Typography\",\n \"getOptionByValue\",\n \"styleLink\",\n \"systemThemeCollapsed\",\n \"systemtheme\",\n ]\n ");
3
+ expect(Object.keys(components)).toMatchInlineSnapshot("\n Array [\n \"ActionsMenu\",\n \"ActionsMenuBody\",\n \"ActionsMenuHeading\",\n \"ActionsMenuItem\",\n \"Avatar\",\n \"Badge\",\n \"Box\",\n \"Button\",\n \"ButtonGroupContainer\",\n \"ButtonGroupItem\",\n \"Card\",\n \"Checkbox\",\n \"Code\",\n \"DatePicker\",\n \"Divider\",\n \"Expandable\",\n \"Flex\",\n \"FlexItem\",\n \"GlobalStyles\",\n \"Grid\",\n \"GridItem\",\n \"H1\",\n \"H2\",\n \"H3\",\n \"H4\",\n \"H5\",\n \"H6\",\n \"Header\",\n \"HeaderSimple\",\n \"Icon\",\n \"Loading\",\n \"Modal\",\n \"Notification\",\n \"P\",\n \"Popover\",\n \"ProgressBar\",\n \"Quote\",\n \"RadioButton\",\n \"Range\",\n \"Select\",\n \"SideNav\",\n \"Sidebar\",\n \"SidebarClose\",\n \"SidebarPanel\",\n \"SidebarPanels\",\n \"SidebarTab\",\n \"SidebarTabs\",\n \"Small\",\n \"Spacer\",\n \"StatusDot\",\n \"StyledLink\",\n \"SystemThemeProvider\",\n \"Tab\",\n \"TabsContainer\",\n \"Tag\",\n \"Text\",\n \"TextArea\",\n \"TextInput\",\n \"Toggle\",\n \"TreeNav\",\n \"Typography\",\n \"VARIANT_COLORS\",\n \"getOptionByValue\",\n \"styleLink\",\n \"systemThemeCollapsed\",\n \"systemtheme\",\n ]\n ");
4
4
  });
package/es/index.js CHANGED
@@ -11,7 +11,7 @@ export { default as ActionsMenu, ActionsMenuBody, ActionsMenuHeading, ActionsMen
11
11
  export { default as Avatar } from "./components/Avatar";
12
12
  export { default as Badge } from "./components/Badge";
13
13
  export { default as Box } from "./components/Box";
14
- export { default as Button } from "./components/Button";
14
+ export { default as Button, VARIANT_COLORS } from "./components/Button";
15
15
  export { ButtonGroupContainer, ButtonGroupItem } from "./components/ButtonGroup";
16
16
  export { default as Card } from "./components/Card";
17
17
  export { default as Checkbox } from "./components/Checkbox";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "orcs-design-system",
3
- "version": "3.1.45",
3
+ "version": "3.1.46",
4
4
  "engines": {
5
5
  "node": "18.17.1"
6
6
  },