@appquality/unguess-design-system 3.1.51 → 3.1.52
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.
- package/CHANGELOG.md +12 -0
- package/build/index.js +27 -4
- package/build/stories/buttons/button/index.stories.d.ts +1 -0
- package/build/stories/buttons/utils.d.ts +36 -36
- package/build/stories/color-swatch/index.d.ts +1 -1
- package/build/stories/dropdowns/select/index.stories.d.ts +1 -0
- package/build/stories/editor/index.stories.d.ts +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v3.1.52 (Wed Nov 08 2023)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- 🔀 chore(color-swatch): update import statement for ColorSwatch component [#275](https://github.com/AppQuality/unguess-design-system/pull/275) ([@marcbon](https://github.com/marcbon))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Marco Bonomo ([@marcbon](https://github.com/marcbon))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v3.1.51 (Wed Nov 08 2023)
|
|
2
14
|
|
|
3
15
|
#### 🐛 Bug Fix
|
package/build/index.js
CHANGED
|
@@ -24,8 +24,8 @@ var pie = require('@nivo/pie');
|
|
|
24
24
|
var sunburst = require('@nivo/sunburst');
|
|
25
25
|
var waffle = require('@nivo/waffle');
|
|
26
26
|
var line = require('@nivo/line');
|
|
27
|
-
require('@zendeskgarden/container-utilities');
|
|
28
|
-
require('@zendeskgarden/react-colorpickers');
|
|
27
|
+
var containerUtilities = require('@zendeskgarden/container-utilities');
|
|
28
|
+
var reactColorpickers = require('@zendeskgarden/react-colorpickers');
|
|
29
29
|
var reactModals = require('@zendeskgarden/react-modals');
|
|
30
30
|
var reactDropdowns = require('@zendeskgarden/react-dropdowns');
|
|
31
31
|
var reactForms = require('@zendeskgarden/react-forms');
|
|
@@ -2326,10 +2326,32 @@ const Trigger$1 = styled.styled.div `
|
|
|
2326
2326
|
justify-content: flex-start;
|
|
2327
2327
|
cursor: pointer;
|
|
2328
2328
|
`;
|
|
2329
|
-
React__default["default"].forwardRef((props, ref) => {
|
|
2329
|
+
const ColorSwatchTrigger = React__default["default"].forwardRef((props, ref) => {
|
|
2330
2330
|
var _a;
|
|
2331
2331
|
return (jsxRuntime.jsx(Trigger$1, Object.assign({ ref: ref }, props, { style: Object.assign(Object.assign({}, props.style), { color: props.color }) }, { children: (_a = props.children) !== null && _a !== void 0 ? _a : jsxRuntime.jsx(SvgCircleFullFill, {}) })));
|
|
2332
|
-
});
|
|
2332
|
+
});
|
|
2333
|
+
const ColorSwatch = ({ colors, rowSize, children, onSelect, }) => {
|
|
2334
|
+
const matrix = containerUtilities.convertToMatrix(colors, rowSize !== null && rowSize !== void 0 ? rowSize : 7);
|
|
2335
|
+
const [color, setColor] = React.useState(matrix[0][0].value);
|
|
2336
|
+
const [rowIndex, setRowIndex] = React.useState(0);
|
|
2337
|
+
const [colIndex, setColIndex] = React.useState(0);
|
|
2338
|
+
const [selectedRowIndex, setSelectedRowIndex] = React.useState(0);
|
|
2339
|
+
const [selectedColIndex, setSelectedColIndex] = React.useState(0);
|
|
2340
|
+
const handleChange = (rowIdx, colIdx) => {
|
|
2341
|
+
setRowIndex(rowIdx);
|
|
2342
|
+
setColIndex(colIdx);
|
|
2343
|
+
};
|
|
2344
|
+
const handleSelect = (rowIdx, colIdx) => {
|
|
2345
|
+
setSelectedRowIndex(rowIdx);
|
|
2346
|
+
setSelectedColIndex(colIdx);
|
|
2347
|
+
setColor(matrix[rowIdx][colIdx].value);
|
|
2348
|
+
};
|
|
2349
|
+
return (jsxRuntime.jsx(reactColorpickers.ColorSwatchDialog, Object.assign({ colors: matrix, onChange: handleChange, onSelect: (rowIdx, colIdx) => {
|
|
2350
|
+
handleSelect(rowIdx, colIdx);
|
|
2351
|
+
if (onSelect)
|
|
2352
|
+
onSelect(color);
|
|
2353
|
+
}, rowIndex: rowIndex, colIndex: colIndex, selectedRowIndex: selectedRowIndex, selectedColIndex: selectedColIndex }, { children: jsxRuntime.jsx(ColorSwatchTrigger, Object.assign({ color: color }, { children: children })) })));
|
|
2354
|
+
};
|
|
2333
2355
|
|
|
2334
2356
|
const UgDrawer = styled__default["default"](reactModals.DrawerModal) `
|
|
2335
2357
|
@media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
|
|
@@ -5796,6 +5818,7 @@ exports.Chrome = Chrome;
|
|
|
5796
5818
|
exports.Close = Close;
|
|
5797
5819
|
exports.Code = Code;
|
|
5798
5820
|
exports.Col = Col;
|
|
5821
|
+
exports.ColorSwatch = ColorSwatch;
|
|
5799
5822
|
exports.ContainerCard = ContainerCard;
|
|
5800
5823
|
exports.Content = Content$1;
|
|
5801
5824
|
exports.CounterMultiselect = CounterMultiselect;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { ButtonArgs } from "./_types";
|
|
2
3
|
export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ButtonArgs>;
|
|
3
4
|
export declare const Basic: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ButtonArgs>;
|
|
@@ -8,18 +8,18 @@ export declare const variants: readonly [{}, {
|
|
|
8
8
|
readonly disabled: true;
|
|
9
9
|
}];
|
|
10
10
|
export declare const Row: import("styled-components").IStyledComponent<"web", {
|
|
11
|
-
alignItems?: "
|
|
12
|
-
alignItemsXs?: "
|
|
13
|
-
alignItemsSm?: "
|
|
14
|
-
alignItemsMd?: "
|
|
15
|
-
alignItemsLg?: "
|
|
16
|
-
alignItemsXl?: "
|
|
17
|
-
justifyContent?: "
|
|
18
|
-
justifyContentXs?: "
|
|
19
|
-
justifyContentSm?: "
|
|
20
|
-
justifyContentMd?: "
|
|
21
|
-
justifyContentLg?: "
|
|
22
|
-
justifyContentXl?: "
|
|
11
|
+
alignItems?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
|
|
12
|
+
alignItemsXs?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
|
|
13
|
+
alignItemsSm?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
|
|
14
|
+
alignItemsMd?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
|
|
15
|
+
alignItemsLg?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
|
|
16
|
+
alignItemsXl?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
|
|
17
|
+
justifyContent?: "center" | "start" | "end" | "between" | "around" | undefined;
|
|
18
|
+
justifyContentXs?: "center" | "start" | "end" | "between" | "around" | undefined;
|
|
19
|
+
justifyContentSm?: "center" | "start" | "end" | "between" | "around" | undefined;
|
|
20
|
+
justifyContentMd?: "center" | "start" | "end" | "between" | "around" | undefined;
|
|
21
|
+
justifyContentLg?: "center" | "start" | "end" | "between" | "around" | undefined;
|
|
22
|
+
justifyContentXl?: "center" | "start" | "end" | "between" | "around" | undefined;
|
|
23
23
|
wrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
|
|
24
24
|
wrapXs?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
|
|
25
25
|
wrapSm?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
|
|
@@ -33,7 +33,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
|
|
|
33
33
|
accessKey?: string | undefined;
|
|
34
34
|
autoFocus?: boolean | undefined;
|
|
35
35
|
className?: string | undefined;
|
|
36
|
-
contentEditable?: (boolean | "true" | "false") |
|
|
36
|
+
contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
|
|
37
37
|
contextMenu?: string | undefined;
|
|
38
38
|
dir?: string | undefined;
|
|
39
39
|
draggable?: (boolean | "true" | "false") | undefined;
|
|
@@ -73,7 +73,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
|
|
|
73
73
|
results?: number | undefined;
|
|
74
74
|
security?: string | undefined;
|
|
75
75
|
unselectable?: "on" | "off" | undefined;
|
|
76
|
-
inputMode?: "
|
|
76
|
+
inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
|
|
77
77
|
is?: string | undefined;
|
|
78
78
|
"aria-activedescendant"?: string | undefined;
|
|
79
79
|
"aria-atomic"?: (boolean | "true" | "false") | undefined;
|
|
@@ -84,7 +84,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
|
|
|
84
84
|
"aria-colindex"?: number | undefined;
|
|
85
85
|
"aria-colspan"?: number | undefined;
|
|
86
86
|
"aria-controls"?: string | undefined;
|
|
87
|
-
"aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" |
|
|
87
|
+
"aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
|
|
88
88
|
"aria-describedby"?: string | undefined;
|
|
89
89
|
"aria-details"?: string | undefined;
|
|
90
90
|
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
@@ -93,7 +93,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
|
|
|
93
93
|
"aria-expanded"?: (boolean | "true" | "false") | undefined;
|
|
94
94
|
"aria-flowto"?: string | undefined;
|
|
95
95
|
"aria-grabbed"?: (boolean | "true" | "false") | undefined;
|
|
96
|
-
"aria-haspopup"?: boolean | "
|
|
96
|
+
"aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
|
|
97
97
|
"aria-hidden"?: (boolean | "true" | "false") | undefined;
|
|
98
98
|
"aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
|
|
99
99
|
"aria-keyshortcuts"?: string | undefined;
|
|
@@ -299,18 +299,18 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
|
|
|
299
299
|
md?: string | number | boolean | undefined;
|
|
300
300
|
lg?: string | number | boolean | undefined;
|
|
301
301
|
xl?: string | number | boolean | undefined;
|
|
302
|
-
alignSelf?: "
|
|
303
|
-
alignSelfXs?: "
|
|
304
|
-
alignSelfSm?: "
|
|
305
|
-
alignSelfMd?: "
|
|
306
|
-
alignSelfLg?: "
|
|
307
|
-
alignSelfXl?: "
|
|
308
|
-
textAlign?: "
|
|
309
|
-
textAlignXs?: "
|
|
310
|
-
textAlignSm?: "
|
|
311
|
-
textAlignMd?: "
|
|
312
|
-
textAlignLg?: "
|
|
313
|
-
textAlignXl?: "
|
|
302
|
+
alignSelf?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
|
|
303
|
+
alignSelfXs?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
|
|
304
|
+
alignSelfSm?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
|
|
305
|
+
alignSelfMd?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
|
|
306
|
+
alignSelfLg?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
|
|
307
|
+
alignSelfXl?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
|
|
308
|
+
textAlign?: "center" | "start" | "end" | "justify" | undefined;
|
|
309
|
+
textAlignXs?: "center" | "start" | "end" | "justify" | undefined;
|
|
310
|
+
textAlignSm?: "center" | "start" | "end" | "justify" | undefined;
|
|
311
|
+
textAlignMd?: "center" | "start" | "end" | "justify" | undefined;
|
|
312
|
+
textAlignLg?: "center" | "start" | "end" | "justify" | undefined;
|
|
313
|
+
textAlignXl?: "center" | "start" | "end" | "justify" | undefined;
|
|
314
314
|
offset?: string | number | undefined;
|
|
315
315
|
offsetXs?: string | number | undefined;
|
|
316
316
|
offsetSm?: string | number | undefined;
|
|
@@ -330,7 +330,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
|
|
|
330
330
|
accessKey?: string | undefined;
|
|
331
331
|
autoFocus?: boolean | undefined;
|
|
332
332
|
className?: string | undefined;
|
|
333
|
-
contentEditable?: (boolean | "true" | "false") |
|
|
333
|
+
contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
|
|
334
334
|
contextMenu?: string | undefined;
|
|
335
335
|
dir?: string | undefined;
|
|
336
336
|
draggable?: (boolean | "true" | "false") | undefined;
|
|
@@ -370,7 +370,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
|
|
|
370
370
|
results?: number | undefined;
|
|
371
371
|
security?: string | undefined;
|
|
372
372
|
unselectable?: "on" | "off" | undefined;
|
|
373
|
-
inputMode?: "
|
|
373
|
+
inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
|
|
374
374
|
is?: string | undefined;
|
|
375
375
|
"aria-activedescendant"?: string | undefined;
|
|
376
376
|
"aria-atomic"?: (boolean | "true" | "false") | undefined;
|
|
@@ -381,7 +381,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
|
|
|
381
381
|
"aria-colindex"?: number | undefined;
|
|
382
382
|
"aria-colspan"?: number | undefined;
|
|
383
383
|
"aria-controls"?: string | undefined;
|
|
384
|
-
"aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" |
|
|
384
|
+
"aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
|
|
385
385
|
"aria-describedby"?: string | undefined;
|
|
386
386
|
"aria-details"?: string | undefined;
|
|
387
387
|
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
@@ -390,7 +390,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
|
|
|
390
390
|
"aria-expanded"?: (boolean | "true" | "false") | undefined;
|
|
391
391
|
"aria-flowto"?: string | undefined;
|
|
392
392
|
"aria-grabbed"?: (boolean | "true" | "false") | undefined;
|
|
393
|
-
"aria-haspopup"?: boolean | "
|
|
393
|
+
"aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
|
|
394
394
|
"aria-hidden"?: (boolean | "true" | "false") | undefined;
|
|
395
395
|
"aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
|
|
396
396
|
"aria-keyshortcuts"?: string | undefined;
|
|
@@ -600,7 +600,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
|
|
|
600
600
|
accessKey?: string | undefined;
|
|
601
601
|
autoFocus?: boolean | undefined;
|
|
602
602
|
className?: string | undefined;
|
|
603
|
-
contentEditable?: (boolean | "true" | "false") |
|
|
603
|
+
contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
|
|
604
604
|
contextMenu?: string | undefined;
|
|
605
605
|
dir?: string | undefined;
|
|
606
606
|
draggable?: (boolean | "true" | "false") | undefined;
|
|
@@ -640,7 +640,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
|
|
|
640
640
|
results?: number | undefined;
|
|
641
641
|
security?: string | undefined;
|
|
642
642
|
unselectable?: "on" | "off" | undefined;
|
|
643
|
-
inputMode?: "
|
|
643
|
+
inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
|
|
644
644
|
is?: string | undefined;
|
|
645
645
|
"aria-activedescendant"?: string | undefined;
|
|
646
646
|
"aria-atomic"?: (boolean | "true" | "false") | undefined;
|
|
@@ -651,7 +651,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
|
|
|
651
651
|
"aria-colindex"?: number | undefined;
|
|
652
652
|
"aria-colspan"?: number | undefined;
|
|
653
653
|
"aria-controls"?: string | undefined;
|
|
654
|
-
"aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" |
|
|
654
|
+
"aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
|
|
655
655
|
"aria-describedby"?: string | undefined;
|
|
656
656
|
"aria-details"?: string | undefined;
|
|
657
657
|
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
@@ -660,7 +660,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
|
|
|
660
660
|
"aria-expanded"?: (boolean | "true" | "false") | undefined;
|
|
661
661
|
"aria-flowto"?: string | undefined;
|
|
662
662
|
"aria-grabbed"?: (boolean | "true" | "false") | undefined;
|
|
663
|
-
"aria-haspopup"?: boolean | "
|
|
663
|
+
"aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
|
|
664
664
|
"aria-hidden"?: (boolean | "true" | "false") | undefined;
|
|
665
665
|
"aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
|
|
666
666
|
"aria-keyshortcuts"?: string | undefined;
|