orcs-design-system 3.3.3 → 3.3.5

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/Header/Header.stories.js +1 -0
  3. package/es/components/Header/Header.styles.js +10 -8
  4. package/es/components/Header/UserMenu.js +1 -3
  5. package/es/components/Header/index.js +14 -11
  6. package/es/components/SideNav/index.js +0 -1
  7. package/es/components/Table/muiStyleOverrides.js +8 -5
  8. package/es/components/Tag/Tag.stories.js +14 -26
  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 +1 -1
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/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/Table/muiStyleOverrides.js CHANGED
@@ -35,7 +35,7 @@ const muiStyleOverrides = {
35
35
  "& .MuiTableCell-root": {
36
36
  color: "#6b7280",
37
37
  // Subtle text color (gray tone)
38
- fontWeight: "500",
38
+ fontWeight: "600",
39
39
  // Slightly bold for clarity
40
40
  padding: "0 0 6px 0",
41
41
  // Consistent padding
@@ -43,7 +43,9 @@ const muiStyleOverrides = {
43
43
  // Subtle header-row separation
44
44
  textAlign: "left",
45
45
  // Ensure text alignment is consistent
46
- lineHeight: "1.5" // Enhance readability
46
+ lineHeight: "1.5",
47
+ // Enhance readability
48
+ fontSize: "1.3rem"
47
49
  },
48
50
  "& button": {
49
51
  display: "none" // Explicitly hide any buttons in the header
@@ -81,16 +83,16 @@ const muiStyleOverrides = {
81
83
  borderCollapse: "separate !important",
82
84
  tableLayout: "fixed",
83
85
  fontFamily: "inherit",
84
- fontSize: "inherit",
86
+ fontSize: "1.3rem",
85
87
  fontWeight: "normal",
86
88
  "& th, .MuiTableCell-root": {
87
89
  fontWeight: "normal",
88
- fontSize: "inherit",
90
+ fontSize: "1.3rem",
89
91
  fontFamily: "inherit"
90
92
  },
91
93
  "& td": {
92
94
  fontFamily: "inherit",
93
- fontSize: "inherit",
95
+ fontSize: "1.3rem",
94
96
  fontWeight: "normal"
95
97
  },
96
98
  "& td, .MuiTableCell-root": {
@@ -103,6 +105,7 @@ const muiStyleOverrides = {
103
105
  sx: {
104
106
  fontWeight: "normal",
105
107
  // Remove bold when expanded
108
+ fontSize: "1.3rem",
106
109
  // Default row cell style
107
110
  "&.MuiTableRow-root": {
108
111
  fontWeight: "normal" // Ensure the font is not bold by default
package/es/components/Tag/Tag.stories.js CHANGED
@@ -1,13 +1,13 @@
1
1
  import React, { useState } from "react";
2
2
  import Tag from ".";
3
3
  import Flex from "../Flex";
4
- import Spacer from "../Spacer";
5
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
4
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
6
5
  export default {
7
6
  title: "Components/Tag",
8
7
  component: Tag,
9
8
  decorators: [storyFn => /*#__PURE__*/_jsx(Flex, {
10
9
  flexWrap: "wrap",
10
+ gap: "xs",
11
11
  children: storyFn()
12
12
  })]
13
13
  };
@@ -18,8 +18,7 @@ defaultTag.storyName = "Default";
18
18
  export const Selected = () => {
19
19
  const [selectedA, setSelectedA] = useState(true);
20
20
  const [selectedB, setSelectedB] = useState(true);
21
- return /*#__PURE__*/_jsxs(Spacer, {
22
- m: "2px",
21
+ return /*#__PURE__*/_jsxs(_Fragment, {
23
22
  children: [/*#__PURE__*/_jsx(Tag, {
24
23
  selected: selectedA,
25
24
  onClick: () => setSelectedA(!selectedA),
@@ -35,8 +34,7 @@ export const Selected = () => {
35
34
  })]
36
35
  });
37
36
  };
38
- export const showInfo = () => /*#__PURE__*/_jsxs(Spacer, {
39
- m: "2px",
37
+ export const showInfo = () => /*#__PURE__*/_jsxs(_Fragment, {
40
38
  children: [/*#__PURE__*/_jsx(Tag, {
41
39
  selected: true,
42
40
  showInfo: true,
@@ -57,8 +55,7 @@ export const showInfo = () => /*#__PURE__*/_jsxs(Spacer, {
57
55
  children: "digital transformation"
58
56
  })]
59
57
  });
60
- export const showEdit = () => /*#__PURE__*/_jsxs(Spacer, {
61
- m: "2px",
58
+ export const showEdit = () => /*#__PURE__*/_jsxs(_Fragment, {
62
59
  children: [/*#__PURE__*/_jsx(Tag, {
63
60
  selected: true,
64
61
  showEdit: true,
@@ -75,8 +72,7 @@ export const showEdit = () => /*#__PURE__*/_jsxs(Spacer, {
75
72
  children: "digital transformation"
76
73
  })]
77
74
  });
78
- export const showRemove = () => /*#__PURE__*/_jsxs(Spacer, {
79
- m: "2px",
75
+ export const showRemove = () => /*#__PURE__*/_jsxs(_Fragment, {
80
76
  children: [/*#__PURE__*/_jsx(Tag, {
81
77
  selected: true,
82
78
  showRemove: true,
@@ -93,8 +89,7 @@ export const showRemove = () => /*#__PURE__*/_jsxs(Spacer, {
93
89
  children: "digital transformation"
94
90
  })]
95
91
  });
96
- export const showEditAndRemove = () => /*#__PURE__*/_jsxs(Spacer, {
97
- m: "2px",
92
+ export const showEditAndRemove = () => /*#__PURE__*/_jsxs(_Fragment, {
98
93
  children: [/*#__PURE__*/_jsx(Tag, {
99
94
  selected: true,
100
95
  showEdit: true,
@@ -121,8 +116,7 @@ export const showEditAndRemove = () => /*#__PURE__*/_jsxs(Spacer, {
121
116
  children: "digital transformation"
122
117
  })]
123
118
  });
124
- export const disabled = () => /*#__PURE__*/_jsxs(Spacer, {
125
- m: "2px",
119
+ export const disabled = () => /*#__PURE__*/_jsxs(_Fragment, {
126
120
  children: [/*#__PURE__*/_jsx(Tag, {
127
121
  disabled: true,
128
122
  children: "devops"
@@ -140,8 +134,7 @@ export const disabled = () => /*#__PURE__*/_jsxs(Spacer, {
140
134
  children: "product design"
141
135
  })]
142
136
  });
143
- export const strikethrough = () => /*#__PURE__*/_jsxs(Spacer, {
144
- m: "2px",
137
+ export const strikethrough = () => /*#__PURE__*/_jsxs(_Fragment, {
145
138
  children: [/*#__PURE__*/_jsx(Tag, {
146
139
  showStrikeThrough: true,
147
140
  children: "devops"
@@ -159,8 +152,7 @@ export const strikethrough = () => /*#__PURE__*/_jsxs(Spacer, {
159
152
  children: "digital transformation"
160
153
  })]
161
154
  });
162
- export const withTagType = () => /*#__PURE__*/_jsxs(Spacer, {
163
- m: "2px",
155
+ export const withTagType = () => /*#__PURE__*/_jsxs(_Fragment, {
164
156
  children: [/*#__PURE__*/_jsx(Tag, {
165
157
  tagType: "skill",
166
158
  children: "devops"
@@ -203,8 +195,7 @@ export const withTagType = () => /*#__PURE__*/_jsxs(Spacer, {
203
195
  children: "product design"
204
196
  })]
205
197
  });
206
- export const smallVariant = () => /*#__PURE__*/_jsxs(Spacer, {
207
- m: "2px",
198
+ export const smallVariant = () => /*#__PURE__*/_jsxs(_Fragment, {
208
199
  children: [/*#__PURE__*/_jsx(Tag, {
209
200
  selected: true,
210
201
  tagType: "specialist",
@@ -219,8 +210,7 @@ export const smallVariant = () => /*#__PURE__*/_jsxs(Spacer, {
219
210
  children: "Infracore 2.0"
220
211
  })]
221
212
  });
222
- export const highlightedVariant = () => /*#__PURE__*/_jsxs(Spacer, {
223
- m: "2px",
213
+ export const highlightedVariant = () => /*#__PURE__*/_jsxs(_Fragment, {
224
214
  children: [/*#__PURE__*/_jsx(Tag, {
225
215
  selected: true,
226
216
  highlighted: true,
@@ -236,8 +226,7 @@ export const highlightedVariant = () => /*#__PURE__*/_jsxs(Spacer, {
236
226
  children: "Agile Coach"
237
227
  })]
238
228
  });
239
- export const personTag = () => /*#__PURE__*/_jsxs(Spacer, {
240
- m: "2px",
229
+ export const personTag = () => /*#__PURE__*/_jsxs(_Fragment, {
241
230
  children: [/*#__PURE__*/_jsx(Tag, {
242
231
  disabled: true,
243
232
  personEntity: {
@@ -304,8 +293,7 @@ export const personTag = () => /*#__PURE__*/_jsxs(Spacer, {
304
293
  children: "Maximillian Dubois"
305
294
  })]
306
295
  });
307
- export const personTagSmall = () => /*#__PURE__*/_jsxs(Spacer, {
308
- m: "2px",
296
+ export const personTagSmall = () => /*#__PURE__*/_jsxs(_Fragment, {
309
297
  children: [/*#__PURE__*/_jsx(Tag, {
310
298
  small: true,
311
299
  disabled: true,
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.3",
3
+ "version": "3.3.5",
4
4
  "engines": {
5
5
  "node": "20.12.2"
6
6
  },