orcs-design-system 3.3.2 → 3.3.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.
Files changed (12) hide show
  1. package/es/components/Avatar/index.js +2 -2
  2. package/es/components/Badge/Badge.stories.js +102 -68
  3. package/es/components/Badge/index.js +87 -38
  4. package/es/components/Header/Header.stories.js +1 -0
  5. package/es/components/Header/Header.styles.js +10 -8
  6. package/es/components/Header/UserMenu.js +1 -3
  7. package/es/components/Header/index.js +14 -11
  8. package/es/components/SideNav/index.js +0 -1
  9. package/es/components/TextInput/index.js +19 -34
  10. package/es/systemThemeCollapsed.js +2 -0
  11. package/es/systemtheme.js +2 -0
  12. package/package.json +2 -2
package/es/components/Avatar/index.js CHANGED
@@ -63,8 +63,8 @@ const Image = styled("img").withConfig({
63
63
  displayName: "Avatar__Image",
64
64
  componentId: "sc-1wtet2j-2"
65
65
  })(props => css({
66
- width: props.customSize ? props.customSize : themeGet("appScale.avatarDefault")(props),
67
- height: props.customSize ? props.customSize : themeGet("appScale.avatarDefault")(props),
66
+ width: themeGet(`appScale.${props.customSize || "avatarDefault"}`)(props) || props.customSize,
67
+ height: themeGet(`appScale.${props.customSize || "avatarDefault"}`)(props) || props.customSize,
68
68
  flex: "0 0 auto",
69
69
  backgroundColor: themeGet("colors.greyLighter")(props),
70
70
  border: "0",
package/es/components/Badge/Badge.stories.js CHANGED
@@ -12,82 +12,116 @@ export const defaultBadge = () => /*#__PURE__*/_jsx(Badge, {
12
12
  children: "Default"
13
13
  });
14
14
  defaultBadge.storyName = "Default";
15
- export const colourVariants = () => /*#__PURE__*/_jsxs(_Fragment, {
16
- children: [/*#__PURE__*/_jsx(Box, {
17
- p: "r",
18
- children: /*#__PURE__*/_jsx(Flex, {
19
- flexWrap: "wrap",
20
- children: /*#__PURE__*/_jsxs(Spacer, {
21
- m: "1",
22
- children: [/*#__PURE__*/_jsx(Badge, {
23
- children: "Default"
24
- }), /*#__PURE__*/_jsx(Badge, {
25
- variant: "success",
26
- children: "Success"
27
- }), /*#__PURE__*/_jsx(Badge, {
28
- variant: "warning",
29
- children: "Warning"
30
- }), /*#__PURE__*/_jsx(Badge, {
31
- variant: "danger",
32
- children: "Danger"
33
- }), /*#__PURE__*/_jsx(Badge, {
34
- variant: "primaryLight",
35
- children: "Low priority"
36
- }), /*#__PURE__*/_jsx(Badge, {
37
- variant: "primary",
38
- children: "Medium priority"
39
- }), /*#__PURE__*/_jsx(Badge, {
40
- variant: "primaryDark",
41
- children: "High priority"
42
- }), /*#__PURE__*/_jsx(Badge, {
43
- variant: "secondary",
44
- children: "Secondary"
45
- })]
15
+
16
+ // eslint-disable-next-line react/prop-types
17
+ export const ColourVariants = function () {
18
+ let {
19
+ altStyle = false
20
+ } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
21
+ return /*#__PURE__*/_jsxs(_Fragment, {
22
+ children: [/*#__PURE__*/_jsx(Box, {
23
+ p: "r",
24
+ children: /*#__PURE__*/_jsx(Flex, {
25
+ flexWrap: "wrap",
26
+ children: /*#__PURE__*/_jsxs(Spacer, {
27
+ m: "1",
28
+ children: [/*#__PURE__*/_jsx(Badge, {
29
+ altStyle: altStyle,
30
+ children: "Default"
31
+ }), /*#__PURE__*/_jsx(Badge, {
32
+ altStyle: altStyle,
33
+ variant: "success",
34
+ children: "Success"
35
+ }), /*#__PURE__*/_jsx(Badge, {
36
+ altStyle: altStyle,
37
+ variant: "warning",
38
+ children: "Warning"
39
+ }), /*#__PURE__*/_jsx(Badge, {
40
+ altStyle: altStyle,
41
+ variant: "danger",
42
+ children: "Danger"
43
+ }), /*#__PURE__*/_jsx(Badge, {
44
+ altStyle: altStyle,
45
+ variant: "primaryLight",
46
+ children: "Low priority"
47
+ }), /*#__PURE__*/_jsx(Badge, {
48
+ altStyle: altStyle,
49
+ variant: "primary",
50
+ children: "Medium priority"
51
+ }), /*#__PURE__*/_jsx(Badge, {
52
+ altStyle: altStyle,
53
+ variant: "primaryDark",
54
+ children: "High priority"
55
+ }), /*#__PURE__*/_jsx(Badge, {
56
+ altStyle: altStyle,
57
+ variant: "secondary",
58
+ children: "Secondary"
59
+ })]
60
+ })
46
61
  })
47
- })
48
- }), /*#__PURE__*/_jsx(Box, {
49
- p: "r",
50
- bg: "greyDarkest",
51
- children: /*#__PURE__*/_jsx(Flex, {
52
- flexWrap: "wrap",
53
- children: /*#__PURE__*/_jsxs(Spacer, {
54
- m: "1",
55
- children: [/*#__PURE__*/_jsx(Badge, {
56
- children: "Default"
57
- }), /*#__PURE__*/_jsx(Badge, {
58
- variant: "success",
59
- children: "Success"
60
- }), /*#__PURE__*/_jsx(Badge, {
61
- variant: "warning",
62
- children: "Warning"
63
- }), /*#__PURE__*/_jsx(Badge, {
64
- variant: "danger",
65
- children: "Danger"
66
- }), /*#__PURE__*/_jsx(Badge, {
67
- variant: "primaryLight",
68
- children: "Low priority"
69
- }), /*#__PURE__*/_jsx(Badge, {
70
- variant: "primary",
71
- children: "Medium priority"
72
- }), /*#__PURE__*/_jsx(Badge, {
73
- variant: "primaryDark",
74
- children: "High priority"
75
- }), /*#__PURE__*/_jsx(Badge, {
76
- variant: "secondary",
77
- children: "Secondary"
78
- })]
62
+ }), !altStyle && /*#__PURE__*/_jsx(Box, {
63
+ p: "r",
64
+ bg: "greyDarkest",
65
+ children: /*#__PURE__*/_jsx(Flex, {
66
+ flexWrap: "wrap",
67
+ children: /*#__PURE__*/_jsxs(Spacer, {
68
+ m: "1",
69
+ children: [/*#__PURE__*/_jsx(Badge, {
70
+ altStyle: altStyle,
71
+ children: "Default"
72
+ }), /*#__PURE__*/_jsx(Badge, {
73
+ altStyle: altStyle,
74
+ variant: "success",
75
+ children: "Success"
76
+ }), /*#__PURE__*/_jsx(Badge, {
77
+ altStyle: altStyle,
78
+ variant: "warning",
79
+ children: "Warning"
80
+ }), /*#__PURE__*/_jsx(Badge, {
81
+ altStyle: altStyle,
82
+ variant: "danger",
83
+ children: "Danger"
84
+ }), /*#__PURE__*/_jsx(Badge, {
85
+ altStyle: altStyle,
86
+ variant: "primaryLight",
87
+ children: "Low priority"
88
+ }), /*#__PURE__*/_jsx(Badge, {
89
+ altStyle: altStyle,
90
+ variant: "primary",
91
+ children: "Medium priority"
92
+ }), /*#__PURE__*/_jsx(Badge, {
93
+ altStyle: altStyle,
94
+ variant: "primaryDark",
95
+ children: "High priority"
96
+ }), /*#__PURE__*/_jsx(Badge, {
97
+ altStyle: altStyle,
98
+ variant: "secondary",
99
+ children: "Secondary"
100
+ })]
101
+ })
79
102
  })
80
- })
81
- })]
103
+ })]
104
+ });
105
+ };
106
+
107
+ // eslint-disable-next-line react/no-unknown-property
108
+ export const altStyleColourVariants = () => /*#__PURE__*/_jsx(ColourVariants, {
109
+ altStyle: true
82
110
  });
83
- colourVariants.storyName = "Colour variants";
111
+ altStyleColourVariants.storyName = "Alt style colour variants";
112
+ ColourVariants.storyName = "Colour variants";
84
113
  defaultBadge.__docgenInfo = {
85
114
  "description": "",
86
115
  "methods": [],
87
116
  "displayName": "defaultBadge"
88
117
  };
89
- colourVariants.__docgenInfo = {
118
+ ColourVariants.__docgenInfo = {
119
+ "description": "",
120
+ "methods": [],
121
+ "displayName": "ColourVariants"
122
+ };
123
+ altStyleColourVariants.__docgenInfo = {
90
124
  "description": "",
91
125
  "methods": [],
92
- "displayName": "colourVariants"
126
+ "displayName": "altStyleColourVariants"
93
127
  };
package/es/components/Badge/index.js CHANGED
@@ -26,53 +26,93 @@ const Item = styled("span").withConfig({
26
26
  borderRadius: 1,
27
27
  color: themeGet("colors.greyDarkest")(props),
28
28
  bg: themeGet("colors.greyLighter")(props),
29
- whiteSpace: props.noWrap ? "nowrap" : "normal"
30
- }), props => variant({
31
- variants: {
32
- default: {},
33
- success: {
34
- color: themeGet("colors.successDarkest")(props),
35
- bg: themeGet("colors.successLightest")(props)
36
- },
37
- successPending: {
38
- color: themeGet("colors.successDark")(props),
39
- bg: themeGet("colors.successEvenLighter")(props)
40
- },
41
- warning: {
42
- color: themeGet("colors.warningDarkest")(props),
43
- bg: themeGet("colors.warningLighter")(props)
44
- },
45
- danger: {
46
- color: themeGet("colors.dangerDarkest")(props),
47
- bg: themeGet("colors.dangerLightest")(props)
48
- },
49
- primaryLight: {
50
- color: themeGet("colors.primaryDarker")(props),
51
- bg: themeGet("colors.primaryLightest")(props)
52
- },
53
- primary: {
54
- color: themeGet("colors.primaryDarkest")(props),
55
- bg: themeGet("colors.primaryLighter")(props)
56
- },
57
- primaryDark: {
58
- color: themeGet("colors.primaryDarkest")(props),
59
- bg: themeGet("colors.primaryLight")(props)
60
- },
61
- secondary: {
62
- color: themeGet("colors.secondaryDarkest")(props),
63
- bg: themeGet("colors.secondaryEvenLighter")(props)
64
- }
29
+ whiteSpace: props.noWrap ? "nowrap" : "normal",
30
+ ...(props.altStyle ? {
31
+ bg: themeGet("colors.white")(props),
32
+ p: "1px"
33
+ } : {})
34
+ }), props => {
35
+ if (props.altStyle) {
36
+ return variant({
37
+ variants: {
38
+ default: {},
39
+ success: {
40
+ color: themeGet("colors.success")(props)
41
+ },
42
+ successPending: {
43
+ color: themeGet("colors.success")(props)
44
+ },
45
+ warning: {
46
+ color: themeGet("colors.warningDark")(props)
47
+ },
48
+ danger: {
49
+ color: themeGet("colors.danger")(props)
50
+ },
51
+ primaryLight: {
52
+ color: themeGet("colors.primaryLight")(props)
53
+ },
54
+ primary: {
55
+ color: themeGet("colors.primary")(props)
56
+ },
57
+ primaryDark: {
58
+ color: themeGet("colors.primaryDark")(props)
59
+ },
60
+ secondary: {
61
+ color: themeGet("colors.secondary")(props)
62
+ }
63
+ }
64
+ });
65
+ } else {
66
+ return variant({
67
+ variants: {
68
+ default: {},
69
+ success: {
70
+ color: themeGet("colors.successDarkest")(props),
71
+ bg: themeGet("colors.successLightest")(props)
72
+ },
73
+ successPending: {
74
+ color: themeGet("colors.successDark")(props),
75
+ bg: themeGet("colors.successEvenLighter")(props)
76
+ },
77
+ warning: {
78
+ color: themeGet("colors.warningDarkest")(props),
79
+ bg: themeGet("colors.warningLighter")(props)
80
+ },
81
+ danger: {
82
+ color: themeGet("colors.dangerDarkest")(props),
83
+ bg: themeGet("colors.dangerLightest")(props)
84
+ },
85
+ primaryLight: {
86
+ color: themeGet("colors.primaryDarker")(props),
87
+ bg: themeGet("colors.primaryLightest")(props)
88
+ },
89
+ primary: {
90
+ color: themeGet("colors.primaryDarkest")(props),
91
+ bg: themeGet("colors.primaryLighter")(props)
92
+ },
93
+ primaryDark: {
94
+ color: themeGet("colors.primaryDarkest")(props),
95
+ bg: themeGet("colors.primaryLight")(props)
96
+ },
97
+ secondary: {
98
+ color: themeGet("colors.secondaryDarkest")(props),
99
+ bg: themeGet("colors.secondaryEvenLighter")(props)
100
+ }
101
+ }
102
+ });
65
103
  }
66
- }), BadgeStyles);
104
+ }, BadgeStyles);
67
105
  export default function Badge(_ref) {
68
106
  let {
69
107
  noWrap,
70
108
  children,
71
109
  theme,
110
+ altStyle,
72
111
  ...props
73
112
  } = _ref;
74
113
  const component = /*#__PURE__*/_jsx(Item, {
75
114
  noWrap: noWrap,
115
+ altStyle: altStyle,
76
116
  ...props,
77
117
  children: children
78
118
  });
@@ -89,7 +129,9 @@ Badge.propTypes = {
89
129
  /** The label text on the badge is passed as a child element. */
90
130
  children: PropTypes.node,
91
131
  /** Specifies the system theme. */
92
- theme: PropTypes.object
132
+ theme: PropTypes.object,
133
+ /** Specifies use the alternative style */
134
+ altStyle: PropTypes.bool
93
135
  };
94
136
  Badge.__docgenInfo = {
95
137
  "description": "",
@@ -145,6 +187,13 @@ Badge.__docgenInfo = {
145
187
  "name": "object"
146
188
  },
147
189
  "required": false
190
+ },
191
+ "altStyle": {
192
+ "description": "Specifies use the alternative style",
193
+ "type": {
194
+ "name": "bool"
195
+ },
196
+ "required": false
148
197
  }
149
198
  }
150
199
  };
package/es/components/Header/Header.stories.js CHANGED
@@ -69,6 +69,7 @@ export const defaultHeader = () => /*#__PURE__*/_jsx(Header, {
69
69
  searchComponent: /*#__PURE__*/_jsx(TextInput, {
70
70
  fullWidth: true,
71
71
  id: "search",
72
+ height: "100%",
72
73
  type: "text",
73
74
  placeholder: "Search for...",
74
75
  iconRight: ["fas", "search"]
package/es/components/Header/Header.styles.js CHANGED
@@ -31,19 +31,20 @@ export const AppName = styled("div").withConfig({
31
31
  alignItems: "center",
32
32
  gap: ["0", "0", "0", "s"],
33
33
  px: "s",
34
- height: "38px",
34
+ height: themeGet("appScale.sideNavSize")(props),
35
35
  borderRadius: themeGet("radii.2")(props),
36
36
  border: `1px solid ${themeGet("colors.greyLight")(props)}`,
37
- boxShadow: themeGet("shadows.boxDefault")(props),
38
37
  fontSize: themeGet("fontSizes.1")(props),
39
38
  fontWeight: themeGet("fontWeights.2")(props),
40
39
  color: themeGet("colors.greyDarkest")(props),
41
40
  img: {
42
- height: "22px",
41
+ height: "100%",
42
+ maxHeight: themeGet("appScale.navBarLogoSize")(props),
43
43
  width: "auto"
44
44
  },
45
45
  svg: {
46
- height: "22px",
46
+ height: "100%",
47
+ maxHeight: themeGet("appScale.navBarLogoSize")(props),
47
48
  width: "auto"
48
49
  },
49
50
  a: {
@@ -57,9 +58,9 @@ export const SearchContainer = styled("div").withConfig({
57
58
  componentId: "sc-xs8ba0-2"
58
59
  })(props => css({
59
60
  maxWidth: "550px",
61
+ height: themeGet("appScale.sideNavSize")(props),
60
62
  flex: "1 1 auto",
61
- borderRadius: themeGet("radii.2")(props),
62
- boxShadow: themeGet("shadows.boxDefault")(props)
63
+ borderRadius: themeGet("radii.2")(props)
63
64
  }), space, layout);
64
65
  export const UserMenuToggle = styled("button").withConfig({
65
66
  displayName: "Headerstyles__UserMenuToggle",
@@ -97,8 +98,9 @@ export const UserMenuContainer = styled(Box).withConfig({
97
98
  displayName: "Headerstyles__UserMenuContainer",
98
99
  componentId: "sc-xs8ba0-5"
99
100
  })(props => css({
100
- borderRadius: `19px ${themeGet("radii.2")(props)} ${themeGet("radii.2")(props)} 19px`,
101
- position: "relative"
101
+ borderRadius: `calc(${themeGet("appScale.sideNavSize")(props)} / 2) ${themeGet("radii.2")(props)} ${themeGet("radii.2")(props)} calc(${themeGet("appScale.sideNavSize")(props)} / 2)`,
102
+ position: "relative",
103
+ height: themeGet("appScale.sideNavSize")(props)
102
104
  }));
103
105
  export const UserMenuContent = styled(Box).withConfig({
104
106
  displayName: "Headerstyles__UserMenuContent",
package/es/components/Header/UserMenu.js CHANGED
@@ -37,10 +37,8 @@ const UserMenu = _ref => {
37
37
  ml: "auto",
38
38
  bg: "white",
39
39
  width: "auto",
40
- height: "38px",
41
40
  border: "solid 1px",
42
41
  borderColor: "greyLight",
43
- shadow: "default",
44
42
  display: "flex",
45
43
  children: [/*#__PURE__*/_jsxs(UserMenuToggle, {
46
44
  onClick: toggleMenu,
@@ -48,7 +46,7 @@ const UserMenu = _ref => {
48
46
  borderRadius: "50%",
49
47
  p: "2px",
50
48
  children: /*#__PURE__*/_jsx(Avatar, {
51
- customSize: "28px",
49
+ customSize: "navBarAvatarSize",
52
50
  image: avatarSource,
53
51
  imageAlt: avatarAlt,
54
52
  initials: avatarInitials
package/es/components/Header/index.js CHANGED
@@ -28,18 +28,21 @@ const Header = _ref => {
28
28
  alignItems: "center",
29
29
  justifyContent: "center",
30
30
  children: logo
31
- }), /*#__PURE__*/_jsx(FlexItem, {
32
- flex: "0 0 auto",
33
- display: ["none", "none", "none", "block"],
34
- children: appName
35
- }), currentWorkspace && /*#__PURE__*/_jsx(FlexItem, {
36
- flex: "0 0 auto",
37
- children: /*#__PURE__*/_jsx(Small, {
38
- color: "greyDark",
39
- fontSize: "0",
31
+ }), /*#__PURE__*/_jsxs(Flex, {
32
+ flexDirection: "column",
33
+ children: [/*#__PURE__*/_jsx(FlexItem, {
34
+ flex: "0 0 auto",
40
35
  display: ["none", "none", "none", "block"],
41
- children: currentWorkspace
42
- })
36
+ children: appName
37
+ }), currentWorkspace && /*#__PURE__*/_jsx(FlexItem, {
38
+ flex: "0 0 auto",
39
+ children: /*#__PURE__*/_jsx(Small, {
40
+ color: "greyDark",
41
+ fontSize: "0",
42
+ display: ["none", "none", "none", "block"],
43
+ children: currentWorkspace
44
+ })
45
+ })]
43
46
  })]
44
47
  }), searchComponent && /*#__PURE__*/_jsx(SearchContainer, {
45
48
  children: searchComponent
package/es/components/SideNav/index.js CHANGED
@@ -21,7 +21,6 @@ const SideNavWrapper = styled("div").withConfig({
21
21
  fontFamily: themeGet("fonts.main")(props),
22
22
  borderRadius: themeGet("radii.2")(props),
23
23
  border: `solid 1px ${themeGet("colors.greyLighter")(props)}`,
24
- boxShadow: themeGet("shadows.boxDefault")(props),
25
24
  display: "flex",
26
25
  alignItems: "stretch",
27
26
  alignContent: "stretch",
package/es/components/TextInput/index.js CHANGED
@@ -3,7 +3,6 @@ import { NumericFormat } from "react-number-format";
3
3
  import PropTypes from "prop-types";
4
4
  import styled, { css } from "styled-components";
5
5
  import { space, layout, compose } from "styled-system";
6
- import { css as sscss } from "@styled-system/css";
7
6
  import { createShouldForwardProp, props } from "@styled-system/should-forward-prop";
8
7
  import Icon from "../Icon";
9
8
  import { themeGet } from "@styled-system/theme-get";
@@ -15,26 +14,15 @@ const Group = styled("div").withConfig({
15
14
  shouldForwardProp,
16
15
  displayName: "TextInput__Group",
17
16
  componentId: "sc-shde0o-0"
18
- })(props => sscss({
17
+ })(props => css({
19
18
  position: "relative",
20
- width: props.fullWidth ? "100%" : "auto"
19
+ width: props.fullWidth ? "100%" : "auto",
20
+ minHeight: props => props.height ?? themeGet(props.floating ? "appScale.inputHeightLarge" : "appScale.inputHeightDefault")(props)
21
21
  }), InputStyles);
22
22
  const IconWrapper = styled.label.withConfig({
23
23
  displayName: "TextInput__IconWrapper",
24
24
  componentId: "sc-shde0o-1"
25
- })(["display:flex;align-items:center;position:relative;svg{opacity:0.4;position:absolute;}", ";"], props => props.iconLeft && !props.floating ? css(["svg{bottom:", ";left:12px;}"], props => {
26
- let inputHeight = themeGet("appScale.inputHeightDefault")(props);
27
- return `calc(${inputHeight} / 3 - 1px)`;
28
- }) : props.iconLeft && props.floating ? css(["svg{bottom:", ";left:12px;}"], props => {
29
- let inputHeight = themeGet("appScale.inputHeightDefault")(props);
30
- return `calc(${inputHeight} / 2 + 3px)`;
31
- }) : props.iconRight && !props.floating ? css(["svg{bottom:", ";right:12px;}"], props => {
32
- let inputHeight = themeGet("appScale.inputHeightDefault")(props);
33
- return `calc(${inputHeight} / 3 - 1px)`;
34
- }) : props.iconRight && props.floating ? css(["svg{bottom:", ";right:12px;}"], props => {
35
- let inputHeight = themeGet("appScale.inputHeightDefault")(props);
36
- return `calc(${inputHeight} / 2 + 3px)`;
37
- }) : css([""]));
25
+ })(["display:flex;align-items:center;min-height:inherit;position:absolute;width:fit-content;bottom:0;padding:0 10px;svg{opacity:0.4;}", ";"], props => props.iconLeft && !props.floating ? css(["left:0;"]) : props.iconLeft && props.floating ? css(["left:0;bottom:11px;"]) : props.iconRight && !props.floating ? css(["right:0;"]) : props.iconRight && props.floating ? css(["right:0;bottom:11px;"]) : css([""]));
38
26
  const InputStyle = css(["display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;box-shadow:none;font-size:", ";z-index:1;border-radius:", ";transition:", ";background:", ";color:", ";width:", ";height:", ";padding:", ";border:1px solid ", ";", " &:hover{border:1px solid ", ";}&:focus{outline:0;box-shadow:", ";border:1px solid ", ";", ";}"], props => themeGet("fontSizes.2")(props), props => themeGet("radii.2")(props), props => themeGet("transition.transitionDefault")(props), props => props.disabled ? themeGet("colors.greyLightest")(props) : themeGet("colors.white")(props), props => props.disabled ? themeGet("colors.grey")(props) : themeGet("colors.greyDarkest")(props), props => props.fullWidth ? `100%` : `auto`, props => props.height ? props.height : props.floating ? themeGet("appScale.inputHeightLarge")(props) : themeGet("appScale.inputHeightDefault")(props), props => {
39
27
  let left = props.iconLeft ? 36 : 10;
40
28
  let right = props.iconRight ? 36 : 10;
@@ -97,6 +85,7 @@ const TextInput = /*#__PURE__*/React.forwardRef((props, ref) => {
97
85
  }, [props.label, numberProps]);
98
86
  return /*#__PURE__*/_jsxs(Group, {
99
87
  fullWidth: fullWidth,
88
+ height: height,
100
89
  ...InputStyles,
101
90
  children: [label && !floating ? /*#__PURE__*/_jsx(Label, {
102
91
  inverted: inverted,
@@ -131,27 +120,23 @@ const TextInput = /*#__PURE__*/React.forwardRef((props, ref) => {
131
120
  iconRight: iconRight,
132
121
  iconLeft: iconLeft,
133
122
  children: label
134
- }) : null, iconLeft ? /*#__PURE__*/_jsx("div", {
135
- children: /*#__PURE__*/_jsx(IconWrapper, {
123
+ }) : null, iconLeft ? /*#__PURE__*/_jsx(IconWrapper, {
124
+ htmlFor: id,
125
+ iconLeft: iconLeft,
126
+ floating: floating,
127
+ children: /*#__PURE__*/_jsx(Icon, {
128
+ icon: iconLeft,
136
129
  htmlFor: id,
137
- iconLeft: iconLeft,
138
- floating: floating,
139
- children: /*#__PURE__*/_jsx(Icon, {
140
- icon: iconLeft,
141
- htmlFor: id,
142
- color: "black"
143
- })
130
+ color: "black"
144
131
  })
145
- }) : null, iconRight ? /*#__PURE__*/_jsx("div", {
146
- children: /*#__PURE__*/_jsx(IconWrapper, {
132
+ }) : null, iconRight ? /*#__PURE__*/_jsx(IconWrapper, {
133
+ htmlFor: id,
134
+ iconRight: iconRight,
135
+ floating: floating,
136
+ children: /*#__PURE__*/_jsx(Icon, {
137
+ icon: iconRight,
147
138
  htmlFor: id,
148
- iconRight: iconRight,
149
- floating: floating,
150
- children: /*#__PURE__*/_jsx(Icon, {
151
- icon: iconRight,
152
- htmlFor: id,
153
- color: "#black"
154
- })
139
+ color: "#black"
155
140
  })
156
141
  }) : null]
157
142
  });
package/es/systemThemeCollapsed.js CHANGED
@@ -216,6 +216,8 @@ export const mediaQueries = {
216
216
  export const appScale = {
217
217
  navBarSize: "50px",
218
218
  newNavBarSize: "70px",
219
+ navBarLogoSize: "30px",
220
+ navBarAvatarSize: "32px",
219
221
  sideNavSize: "42px",
220
222
  sidebarMaxWidth: "360px",
221
223
  sidebarMaxWidthLarge: "450px",
package/es/systemtheme.js CHANGED
@@ -215,6 +215,8 @@ export const mediaQueries = {
215
215
  export const appScale = {
216
216
  navBarSize: "54px",
217
217
  newNavBarSize: "70px",
218
+ navBarLogoSize: "35px",
219
+ navBarAvatarSize: "40px",
218
220
  sideNavSize: "50px",
219
221
  sidebarMaxWidth: "360px",
220
222
  sidebarMaxWidthLarge: "550px",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "orcs-design-system",
3
- "version": "3.3.2",
3
+ "version": "3.3.4",
4
4
  "engines": {
5
5
  "node": "20.12.2"
6
6
  },
@@ -36,7 +36,7 @@
36
36
  "module": "BABEL_ENV=es babel lib -d es",
37
37
  "deploy-stack": "serverless deploy",
38
38
  "deploy-client": "serverless client deploy --no-confirm",
39
- "storybook": "storybook dev",
39
+ "storybook": "storybook dev -p 1337",
40
40
  "build-storybook": "storybook build -o .build_storybook",
41
41
  "deploy-storybook": "storybook-to-ghpages",
42
42
  "playroom": "playroom start",