orcs-design-system 3.3.4 → 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.
|
@@ -35,7 +35,7 @@ const muiStyleOverrides = {
|
|
|
35
35
|
"& .MuiTableCell-root": {
|
|
36
36
|
color: "#6b7280",
|
|
37
37
|
// Subtle text color (gray tone)
|
|
38
|
-
fontWeight: "
|
|
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"
|
|
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: "
|
|
86
|
+
fontSize: "1.3rem",
|
|
85
87
|
fontWeight: "normal",
|
|
86
88
|
"& th, .MuiTableCell-root": {
|
|
87
89
|
fontWeight: "normal",
|
|
88
|
-
fontSize: "
|
|
90
|
+
fontSize: "1.3rem",
|
|
89
91
|
fontFamily: "inherit"
|
|
90
92
|
},
|
|
91
93
|
"& td": {
|
|
92
94
|
fontFamily: "inherit",
|
|
93
|
-
fontSize: "
|
|
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
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import React, { useState } from "react";
|
|
2
2
|
import Tag from ".";
|
|
3
3
|
import Flex from "../Flex";
|
|
4
|
-
import
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
308
|
-
m: "2px",
|
|
296
|
+
export const personTagSmall = () => /*#__PURE__*/_jsxs(_Fragment, {
|
|
309
297
|
children: [/*#__PURE__*/_jsx(Tag, {
|
|
310
298
|
small: true,
|
|
311
299
|
disabled: true,
|