@appquality/unguess-design-system 2.10.15 → 2.10.18
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 +36 -0
- package/build/index.d.ts +2 -0
- package/build/index.js +78 -36
- package/build/stories/dropdowns/menuheader/_types.d.ts +5 -0
- package/build/stories/dropdowns/menuheader/index.d.ts +3 -0
- package/build/stories/navigation/app-header/index.stories.d.ts +1 -0
- package/build/stories/navigation/header/header-item/_types.d.ts +20 -0
- package/build/stories/navigation/header/header-item/headerItem.d.ts +3 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,39 @@
|
|
|
1
|
+
# v2.10.18 (Thu May 12 2022)
|
|
2
|
+
|
|
3
|
+
#### ⚠️ Pushed to `master`
|
|
4
|
+
|
|
5
|
+
- fix(brand-item): update ws schema ([@cannarocks](https://github.com/cannarocks))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v2.10.17 (Thu May 12 2022)
|
|
14
|
+
|
|
15
|
+
#### 🐛 Bug Fix
|
|
16
|
+
|
|
17
|
+
- feat(brand-item): add workspaces selector when there is more then one… [#52](https://github.com/AppQuality/unguess-design-system/pull/52) ([@cannarocks](https://github.com/cannarocks))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
# v2.10.16 (Fri May 06 2022)
|
|
26
|
+
|
|
27
|
+
#### ⚠️ Pushed to `master`
|
|
28
|
+
|
|
29
|
+
- fix(alerts): add missing export ([@marcbon](https://github.com/marcbon))
|
|
30
|
+
|
|
31
|
+
#### Authors: 1
|
|
32
|
+
|
|
33
|
+
- Marco Bonomo ([@marcbon](https://github.com/marcbon))
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
1
37
|
# v2.10.15 (Fri May 06 2022)
|
|
2
38
|
|
|
3
39
|
#### 🐛 Bug Fix
|
package/build/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { GlobalStyle } from "./stories/shared/globalStyle";
|
|
2
2
|
export * from "./stories/accordions";
|
|
3
|
+
export * from "./stories/alerts";
|
|
3
4
|
export * from "./stories/avatar";
|
|
4
5
|
export * from "./stories/breadcrumbs";
|
|
5
6
|
export * from "./stories/buttons/anchor";
|
|
@@ -19,6 +20,7 @@ export * from "./stories/dropdowns/menu";
|
|
|
19
20
|
export * from "./stories/dropdowns/multiselect";
|
|
20
21
|
export * from "./stories/dropdowns/select";
|
|
21
22
|
export * from "./stories/dropdowns/autocomplete";
|
|
23
|
+
export * from "./stories/dropdowns/menuheader";
|
|
22
24
|
export * from "./stories/forms/checkbox";
|
|
23
25
|
export * from "./stories/forms/checkbox/cards";
|
|
24
26
|
export * as FormField from "./stories/forms/field";
|
package/build/index.js
CHANGED
|
@@ -7,10 +7,10 @@ require('@zendeskgarden/css-bedrock');
|
|
|
7
7
|
var reactTheming = require('@zendeskgarden/react-theming');
|
|
8
8
|
var jsxRuntime = require('react/jsx-runtime');
|
|
9
9
|
var reactAccordions = require('@zendeskgarden/react-accordions');
|
|
10
|
+
var reactNotifications = require('@zendeskgarden/react-notifications');
|
|
10
11
|
var reactAvatars = require('@zendeskgarden/react-avatars');
|
|
11
12
|
var reactBreadcrumbs = require('@zendeskgarden/react-breadcrumbs');
|
|
12
13
|
var reactButtons = require('@zendeskgarden/react-buttons');
|
|
13
|
-
var reactNotifications = require('@zendeskgarden/react-notifications');
|
|
14
14
|
var reactTags = require('@zendeskgarden/react-tags');
|
|
15
15
|
var reactForms = require('@zendeskgarden/react-forms');
|
|
16
16
|
var React = require('react');
|
|
@@ -243,8 +243,8 @@ var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), {
|
|
|
243
243
|
|
|
244
244
|
var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[400] }), palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), fontWeights: __assign(__assign({}, reactTheming.DEFAULT_THEME.fontWeights), { semibold: 500 }), gradients: gradients, borderRadii: __assign(__assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px", xl: "16px", xxl: "32px" }), components: components, shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }) });
|
|
245
245
|
|
|
246
|
-
var GlobalStyle = styled.createGlobalStyle(templateObject_1$
|
|
247
|
-
var templateObject_1$
|
|
246
|
+
var GlobalStyle = styled.createGlobalStyle(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n ::-webkit-scrollbar-track:hover {\n border-left: solid 1px ", ";\n border-right: solid 1px ", ";\n }\n\n ::-webkit-scrollbar {\n width: 10px;\n }\n\n ::-webkit-scrollbar-track {\n border: solid 2px transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n box-shadow: inset 0 0 10px 10px ", ";\n border: solid 2px transparent;\n border-radius: 25px;\n }\n\n /* This stuff is for Firefox */\n * {\n scrollbar-color: ", " #FFFFFF;\n scrollbar-width: thin;\n }\n \n body {\n font-family: ", ";\n margin: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n svg {\n max-height: 100%;\n }\n\n"], ["\n ::-webkit-scrollbar-track:hover {\n border-left: solid 1px ", ";\n border-right: solid 1px ", ";\n }\n\n ::-webkit-scrollbar {\n width: 10px;\n }\n\n ::-webkit-scrollbar-track {\n border: solid 2px transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n box-shadow: inset 0 0 10px 10px ", ";\n border: solid 2px transparent;\n border-radius: 25px;\n }\n\n /* This stuff is for Firefox */\n * {\n scrollbar-color: ", " #FFFFFF;\n scrollbar-width: thin;\n }\n \n body {\n font-family: ", ";\n margin: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n svg {\n max-height: 100%;\n }\n\n"])), theme.palette.grey["200"], theme.palette.grey["200"], theme.palette.blue["200"], theme.palette.blue["200"], theme.fonts.system);
|
|
247
|
+
var templateObject_1$V;
|
|
248
248
|
|
|
249
249
|
/**
|
|
250
250
|
* Accordions are headers that can be expanded to reveal content or collapsed to hide it.
|
|
@@ -259,6 +259,22 @@ Accordion.Header = reactAccordions.Accordion.Header;
|
|
|
259
259
|
Accordion.Label = reactAccordions.Accordion.Label;
|
|
260
260
|
Accordion.Panel = reactAccordions.Accordion.Panel;
|
|
261
261
|
|
|
262
|
+
var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n background-color: white;\n color: ", ";\n border-width: 2px;\n"], ["\n background-color: white;\n color: ", ";\n border-width: 2px;\n"])), function (_a) {
|
|
263
|
+
var theme = _a.theme;
|
|
264
|
+
return theme.palette.grey[700];
|
|
265
|
+
});
|
|
266
|
+
/**
|
|
267
|
+
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
268
|
+
* <hr>
|
|
269
|
+
* Used for this:
|
|
270
|
+
- To show the user where they are in a nested navigation
|
|
271
|
+
- To provide a quick way to navigate to ancestor pages
|
|
272
|
+
*/
|
|
273
|
+
var Alert = function (props) { return jsxRuntime.jsx(UgAlert, __assign({}, props)); };
|
|
274
|
+
Alert.Title = reactNotifications.Title;
|
|
275
|
+
Alert.Close = reactNotifications.Close;
|
|
276
|
+
var templateObject_1$U;
|
|
277
|
+
|
|
262
278
|
// import useWindowSize from "../../hooks/useWindowSize";
|
|
263
279
|
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
264
280
|
return props.avatarType &&
|
|
@@ -369,11 +385,11 @@ var ContentCard = styled__default["default"](reactNotifications.Well)(templateOb
|
|
|
369
385
|
- To group related content
|
|
370
386
|
*/
|
|
371
387
|
var Card = function (props) { return jsxRuntime.jsx(ContentCard, __assign({}, props)); };
|
|
372
|
-
var ContainerCard = styled__default["default"](Card)(templateObject_2$
|
|
388
|
+
var ContainerCard = styled__default["default"](Card)(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), function (_a) {
|
|
373
389
|
var theme = _a.theme;
|
|
374
390
|
return theme.borderRadii.xl;
|
|
375
391
|
});
|
|
376
|
-
var templateObject_1$R, templateObject_2$
|
|
392
|
+
var templateObject_1$R, templateObject_2$k;
|
|
377
393
|
|
|
378
394
|
/**
|
|
379
395
|
* Tags let users categorize content using a keyword.
|
|
@@ -625,12 +641,12 @@ var CampaignCardSkeleton = function () {
|
|
|
625
641
|
};
|
|
626
642
|
|
|
627
643
|
var flexCenter = styled.css(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
628
|
-
var flexColumnCenter = styled.css(templateObject_2$
|
|
644
|
+
var flexColumnCenter = styled.css(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n ", ";\n flex-direction: column;\n"], ["\n ", ";\n flex-direction: column;\n"])), flexCenter);
|
|
629
645
|
var flexStart = styled.css(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: ", ";\n"])), function (_a) {
|
|
630
646
|
var theme = _a.theme;
|
|
631
647
|
return (theme.rtl ? "flex-end" : "flex-start");
|
|
632
648
|
});
|
|
633
|
-
var cardStyle = styled.css(templateObject_4$
|
|
649
|
+
var cardStyle = styled.css(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"])), function (_a) {
|
|
634
650
|
var theme = _a.theme;
|
|
635
651
|
return theme.borderRadii.lg;
|
|
636
652
|
}, function (_a) {
|
|
@@ -643,7 +659,7 @@ var cardStyle = styled.css(templateObject_4$9 || (templateObject_4$9 = __makeTem
|
|
|
643
659
|
var theme = _a.theme;
|
|
644
660
|
return theme.shadows.boxShadow(theme);
|
|
645
661
|
});
|
|
646
|
-
var templateObject_1$O, templateObject_2$
|
|
662
|
+
var templateObject_1$O, templateObject_2$j, templateObject_3$c, templateObject_4$a;
|
|
647
663
|
|
|
648
664
|
var getStatusIcon = function (status) {
|
|
649
665
|
switch (status) {
|
|
@@ -668,7 +684,7 @@ var getTypeDataIcon = function (type) {
|
|
|
668
684
|
}
|
|
669
685
|
};
|
|
670
686
|
var Wrapper$1 = styled__default["default"](Card)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), cardStyle);
|
|
671
|
-
var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$
|
|
687
|
+
var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n color: ", ";\n max-width: 75%;\n cursor: pointer;\n"], ["\n color: ", ";\n max-width: 75%;\n cursor: pointer;\n"])), function (_a) {
|
|
672
688
|
var theme = _a.theme;
|
|
673
689
|
return theme.palette.grey["700"];
|
|
674
690
|
});
|
|
@@ -685,7 +701,7 @@ var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_3$b || (temp
|
|
|
685
701
|
var theme = _a.theme;
|
|
686
702
|
return theme.palette.white;
|
|
687
703
|
});
|
|
688
|
-
var StyledLabel$2 = styled__default["default"](Label)(templateObject_4$
|
|
704
|
+
var StyledLabel$2 = styled__default["default"](Label)(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n font-size: ", ";\n color: ", ";\n cursor: pointer;\n"], ["\n font-size: ", ";\n color: ", ";\n cursor: pointer;\n"])), function (_a) {
|
|
689
705
|
var theme = _a.theme;
|
|
690
706
|
return theme.fontSizes.sm;
|
|
691
707
|
}, function (_a) {
|
|
@@ -729,7 +745,7 @@ var CampaignCard = function (props) {
|
|
|
729
745
|
}
|
|
730
746
|
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(Wrapper$1, __assign({}, props, { children: [jsxRuntime.jsxs(CardHeader, { children: [jsxRuntime.jsx(StyledLabel$2, __assign({ isRegular: true }, { children: date })), isNew && (jsxRuntime.jsx(StyledTagNew$1, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(CardBody$1, { children: [jsxRuntime.jsx(StyledLabel$2, __assign({ isRegular: true }, { children: projectTitleCut })), jsxRuntime.jsx(StyledTitleLabel$1, __assign({ isRegular: true }, { children: campaignTitleCut }))] }), jsxRuntime.jsx(Divider$1, {}), jsxRuntime.jsxs(CardFooter$1, { children: [props.pillText && (jsxRuntime.jsxs(StyledTag$1, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), props.pillText] }))), jsxRuntime.jsx(StatusIcon, {})] })] })));
|
|
731
747
|
};
|
|
732
|
-
var templateObject_1$N, templateObject_2$
|
|
748
|
+
var templateObject_1$N, templateObject_2$i, templateObject_3$b, templateObject_4$9, templateObject_5$4, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9;
|
|
733
749
|
|
|
734
750
|
var Wrapper = styled__default["default"](Card)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n\n &:hover {\n box-shadow: ", ";\n }\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n\n &:hover {\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
735
751
|
var theme = _a.theme;
|
|
@@ -744,7 +760,7 @@ var Wrapper = styled__default["default"](Card)(templateObject_1$M || (templateOb
|
|
|
744
760
|
var theme = _a.theme;
|
|
745
761
|
return theme.shadows.boxShadow(theme);
|
|
746
762
|
});
|
|
747
|
-
var StyledTagNew = styled__default["default"](Tag)(templateObject_2$
|
|
763
|
+
var StyledTagNew = styled__default["default"](Tag)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n position: absolute;\n right: 16px;\n top: 16px;\n"], ["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n position: absolute;\n right: 16px;\n top: 16px;\n"])), function (_a) {
|
|
748
764
|
var theme = _a.theme;
|
|
749
765
|
return theme.space.base * 6;
|
|
750
766
|
}, function (_a) {
|
|
@@ -764,7 +780,7 @@ var StyledLabel$1 = styled__default["default"](Label)(templateObject_3$a || (tem
|
|
|
764
780
|
var theme = _a.theme;
|
|
765
781
|
return theme.palette.grey["500"];
|
|
766
782
|
});
|
|
767
|
-
var StyledTitleLabel = styled__default["default"](Label)(templateObject_4$
|
|
783
|
+
var StyledTitleLabel = styled__default["default"](Label)(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n cursor: pointer;\n"], ["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n cursor: pointer;\n"])), function (_a) {
|
|
768
784
|
var theme = _a.theme;
|
|
769
785
|
return theme.palette.blue["600"];
|
|
770
786
|
}, function (_a) {
|
|
@@ -792,7 +808,7 @@ var ProductCard = function (props) {
|
|
|
792
808
|
}
|
|
793
809
|
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(Wrapper, __assign({}, props, { children: [jsxRuntime.jsxs(CardBody, __assign({ onClick: props.onCtaClick }, { children: [isNew && (jsxRuntime.jsx(StyledTagNew, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" }))), props.icon && jsxRuntime.jsx(IconContainer$1, { children: props.icon }), props.preTitle && (jsxRuntime.jsx(StyledLabel$1, __assign({ isRegular: true }, { children: props.preTitle }))), jsxRuntime.jsx(StyledTitleLabel, __assign({ isRegular: true }, { children: productTitleCut }))] })), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(CardFooter, { children: jsxRuntime.jsx(Button, __assign({ isPill: true, isPrimary: true, onClick: props.onCtaClick }, { children: props.ctaLabel })) })] })));
|
|
794
810
|
};
|
|
795
|
-
var templateObject_1$M, templateObject_2$
|
|
811
|
+
var templateObject_1$M, templateObject_2$h, templateObject_3$a, templateObject_4$8, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8;
|
|
796
812
|
|
|
797
813
|
/**
|
|
798
814
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
@@ -1117,6 +1133,8 @@ var templateObject_1$I;
|
|
|
1117
1133
|
*/
|
|
1118
1134
|
var Autocomplete = function (props) { return jsxRuntime.jsx(reactDropdowns.Autocomplete, __assign({}, props)); };
|
|
1119
1135
|
|
|
1136
|
+
var MenuHeaderItem = function (props) { return (jsxRuntime.jsx(reactDropdowns.HeaderItem, __assign({}, props))); };
|
|
1137
|
+
|
|
1120
1138
|
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject([""], [""])));
|
|
1121
1139
|
/**
|
|
1122
1140
|
* A Checkbox lets users select and unselect options from a list.
|
|
@@ -1135,7 +1153,7 @@ var StyledCard$1 = styled__default["default"](Card)(templateObject_1$G || (templ
|
|
|
1135
1153
|
var theme = _a.theme;
|
|
1136
1154
|
return theme.palette.blue[300];
|
|
1137
1155
|
});
|
|
1138
|
-
var IconWrapper$1 = styled__default["default"].div(templateObject_2$
|
|
1156
|
+
var IconWrapper$1 = styled__default["default"].div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
|
|
1139
1157
|
var theme = _a.theme;
|
|
1140
1158
|
return theme.space.base;
|
|
1141
1159
|
});
|
|
@@ -1146,7 +1164,7 @@ var LabelWrapper = styled__default["default"](Label)(templateObject_3$9 || (temp
|
|
|
1146
1164
|
var theme = _a.theme;
|
|
1147
1165
|
return theme.palette.grey[600];
|
|
1148
1166
|
});
|
|
1149
|
-
var StyledLabel = styled__default["default"](Label)(templateObject_4$
|
|
1167
|
+
var StyledLabel = styled__default["default"](Label)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
|
|
1150
1168
|
var theme = _a.theme;
|
|
1151
1169
|
return theme.space.base;
|
|
1152
1170
|
});
|
|
@@ -1158,7 +1176,7 @@ var CheckboxCard = function (props) {
|
|
|
1158
1176
|
};
|
|
1159
1177
|
return (jsxRuntime.jsxs(StyledCard$1, __assign({}, props.card, props, props && !props.disabled && { onClick: handleToggle }, { className: checked ? "card-active" : "" }, { children: [jsxRuntime.jsx(IconWrapper$1, { children: (props.iconActive && checked) ? props.iconActive : props.icon }), jsxRuntime.jsx(LabelWrapper, { children: props.label }), jsxRuntime.jsx(Checkbox, __assign({}, props, { checked: checked, value: checked ? 1 : 0, onClick: function (e) { return e.stopPropagation(); } }, { children: jsxRuntime.jsx(StyledLabel, __assign({ hidden: true }, { children: props.label })) }))] })));
|
|
1160
1178
|
};
|
|
1161
|
-
var templateObject_1$G, templateObject_2$
|
|
1179
|
+
var templateObject_1$G, templateObject_2$g, templateObject_3$9, templateObject_4$7;
|
|
1162
1180
|
|
|
1163
1181
|
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
|
|
1164
1182
|
/**
|
|
@@ -1174,7 +1192,7 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
1174
1192
|
});
|
|
1175
1193
|
|
|
1176
1194
|
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject([""], [""])));
|
|
1177
|
-
var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$
|
|
1195
|
+
var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject([""], [""])));
|
|
1178
1196
|
/**
|
|
1179
1197
|
* An Input lets users enter text into a field.
|
|
1180
1198
|
* <hr>
|
|
@@ -1183,7 +1201,7 @@ var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$e || (te
|
|
|
1183
1201
|
* - To enter multiline text, use a Textarea
|
|
1184
1202
|
**/
|
|
1185
1203
|
var Input = function (props) { return jsxRuntime.jsx(UgInput, __assign({}, props)); };
|
|
1186
|
-
var templateObject_1$E, templateObject_2$
|
|
1204
|
+
var templateObject_1$E, templateObject_2$f;
|
|
1187
1205
|
|
|
1188
1206
|
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject([""], [""])));
|
|
1189
1207
|
/**
|
|
@@ -1232,7 +1250,7 @@ var StyledCard = styled__default["default"](Card)(templateObject_1$B || (templat
|
|
|
1232
1250
|
var theme = _a.theme;
|
|
1233
1251
|
return theme.palette.blue[300];
|
|
1234
1252
|
});
|
|
1235
|
-
var IconWrapper = styled__default["default"].div(templateObject_2$
|
|
1253
|
+
var IconWrapper = styled__default["default"].div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
|
|
1236
1254
|
var theme = _a.theme;
|
|
1237
1255
|
return theme.space.base;
|
|
1238
1256
|
});
|
|
@@ -1249,7 +1267,7 @@ var StyledText = styled__default["default"](reactTypography.LG)(templateObject_3
|
|
|
1249
1267
|
var theme = _a.theme;
|
|
1250
1268
|
return theme.colors.primaryHue;
|
|
1251
1269
|
});
|
|
1252
|
-
var Circle = styled__default["default"].div(templateObject_4$
|
|
1270
|
+
var Circle = styled__default["default"].div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-left: auto;\n ", "\n"], ["\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-left: auto;\n ", "\n"])), function (_a) {
|
|
1253
1271
|
var theme = _a.theme;
|
|
1254
1272
|
return theme.space.base * 6;
|
|
1255
1273
|
}, function (_a) {
|
|
@@ -1277,7 +1295,7 @@ var RadioCard = function (_a) {
|
|
|
1277
1295
|
var card = _a.card, icon = _a.icon, iconActive = _a.iconActive, props = __rest(_a, ["card", "icon", "iconActive"]);
|
|
1278
1296
|
return (jsxRuntime.jsxs(StyledCard, __assign({}, card, props, { className: props.checked ? "card-active" : "", onClick: function () { props.onChecked && props.onChecked(props.value); } }, { children: [jsxRuntime.jsx(Circle, __assign({ checked: (_b = props.checked) !== null && _b !== void 0 ? _b : false }, { children: jsxRuntime.jsx(SvgCheckLg, { fill: "white" }) })), jsxRuntime.jsx(IconWrapper, { children: (iconActive && props.checked) ? iconActive : icon }), jsxRuntime.jsx("input", { hidden: true, type: "radio", value: props.value, name: props.name, checked: props.checked }), jsxRuntime.jsx(StyledDivider, {}), jsxRuntime.jsx(StyledText, { children: props.label })] })));
|
|
1279
1297
|
};
|
|
1280
|
-
var templateObject_1$B, templateObject_2$
|
|
1298
|
+
var templateObject_1$B, templateObject_2$e, templateObject_3$8, templateObject_4$6, templateObject_5$2;
|
|
1281
1299
|
|
|
1282
1300
|
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject([""], [""])));
|
|
1283
1301
|
/**
|
|
@@ -1441,8 +1459,12 @@ var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateOb
|
|
|
1441
1459
|
var theme = _a.theme;
|
|
1442
1460
|
return theme.fonts.system;
|
|
1443
1461
|
});
|
|
1462
|
+
styled__default["default"](reactChrome.HeaderItemWrapper)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
|
|
1463
|
+
var theme = _a.theme;
|
|
1464
|
+
return theme.fonts.system;
|
|
1465
|
+
});
|
|
1444
1466
|
var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
|
|
1445
|
-
var templateObject_1$u;
|
|
1467
|
+
var templateObject_1$u, templateObject_2$d;
|
|
1446
1468
|
|
|
1447
1469
|
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
|
|
1448
1470
|
var theme = _a.theme;
|
|
@@ -1498,6 +1520,16 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
|
|
|
1498
1520
|
})));
|
|
1499
1521
|
};
|
|
1500
1522
|
|
|
1523
|
+
/**
|
|
1524
|
+
* Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
|
|
1525
|
+
*/
|
|
1526
|
+
var SM = function (props) { return jsxRuntime.jsx(reactTypography.SM, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.sm } : {} }, props)); };
|
|
1527
|
+
var MD = function (props) { return jsxRuntime.jsx(reactTypography.MD, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.md } : {} }, props)); };
|
|
1528
|
+
var LG = function (props) { return jsxRuntime.jsx(reactTypography.LG, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.lg } : {} }, props)); };
|
|
1529
|
+
var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({}, props)); };
|
|
1530
|
+
var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
|
|
1531
|
+
var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
|
|
1532
|
+
|
|
1501
1533
|
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n margin-right: 2px;\n border-right: none;\n @media (max-width: ", ") {\n right: 0;\n left: 0;\n margin-right: auto;\n margin-left: auto;\n position: absolute;\n }\n"], ["\n margin-right: 2px;\n border-right: none;\n @media (max-width: ", ") {\n right: 0;\n left: 0;\n margin-right: auto;\n margin-left: auto;\n position: absolute;\n }\n"])), function (_a) {
|
|
1502
1534
|
var theme = _a.theme;
|
|
1503
1535
|
return theme.breakpoints.sm;
|
|
@@ -1512,7 +1544,17 @@ var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObjec
|
|
|
1512
1544
|
var theme = _a.theme;
|
|
1513
1545
|
return theme.breakpoints.sm;
|
|
1514
1546
|
});
|
|
1515
|
-
var
|
|
1547
|
+
var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n font-family: ", ";\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n font-family: ", ";\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
1548
|
+
var theme = _a.theme;
|
|
1549
|
+
return theme.palette.blue["600"];
|
|
1550
|
+
}, function (_a) {
|
|
1551
|
+
var theme = _a.theme;
|
|
1552
|
+
return theme.fonts.system;
|
|
1553
|
+
}, function (_a) {
|
|
1554
|
+
var theme = _a.theme;
|
|
1555
|
+
return theme.breakpoints.sm;
|
|
1556
|
+
});
|
|
1557
|
+
var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n color: ", ";\n position: absolute;\n left: 0;\n @media (min-width: ", ") {\n display: none;\n }\n"], ["\n color: ", ";\n position: absolute;\n left: 0;\n @media (min-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
1516
1558
|
var theme = _a.theme;
|
|
1517
1559
|
return theme.palette.blue["600"];
|
|
1518
1560
|
}, function (_a) {
|
|
@@ -1520,9 +1562,17 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
|
|
|
1520
1562
|
return theme.breakpoints.sm;
|
|
1521
1563
|
});
|
|
1522
1564
|
var BrandItem = function (props) {
|
|
1523
|
-
|
|
1565
|
+
var _a = React.useState(props.activeWorkspace), selectedWorkspace = _a[0], setSelectedWorkspace = _a[1];
|
|
1566
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(MenuItem$1, __assign({}, props, { onClick: props.toggleMenu }, { children: [jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(SvgMenuStroke, {}) }), props.menuLabel && jsxRuntime.jsx(HeaderItemText, { children: props.menuLabel })] })), jsxRuntime.jsx(LogoIconContainer, __assign({}, props, { hasLogo: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }) })), props.workspaces && props.workspaces.length > 1 ? (jsxRuntime.jsx(DropdownItem, { children: jsxRuntime.jsxs(Dropdown, __assign({ selectedItem: selectedWorkspace, onSelect: function (workspace) {
|
|
1567
|
+
setSelectedWorkspace(workspace);
|
|
1568
|
+
props.onWorkspaceChange && props.onWorkspaceChange(workspace);
|
|
1569
|
+
}, downshiftProps: {
|
|
1570
|
+
itemToString: function (item) { return item && item.company; },
|
|
1571
|
+
} }, { children: [jsxRuntime.jsx(reactDropdowns.Field, { children: jsxRuntime.jsx(Select, __assign({ style: { color: theme.colors.primaryHue } }, { children: selectedWorkspace
|
|
1572
|
+
? selectedWorkspace.company + "'s workspace"
|
|
1573
|
+
: "Select workspace" })) }), jsxRuntime.jsxs(Menu, { children: [jsxRuntime.jsx(MenuHeaderItem, { children: jsxRuntime.jsx(MD, __assign({ isBold: true, style: { color: theme.palette.grey[800] } }, { children: props.workspacesLabel || "Workspaces" })) }), jsxRuntime.jsx(Separator, {}), props.workspaces.map(function (item) { return (jsxRuntime.jsx(Item, __assign({ value: item }, { children: item.company }))); })] })] })) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.brandName && (jsxRuntime.jsx(BrandName, __assign({}, props, { children: jsxRuntime.jsx(HeaderItemText, { children: props.brandName }) }))) }))] }));
|
|
1524
1574
|
};
|
|
1525
|
-
var templateObject_1$s, templateObject_2$c, templateObject_3$7;
|
|
1575
|
+
var templateObject_1$s, templateObject_2$c, templateObject_3$7, templateObject_4$5;
|
|
1526
1576
|
|
|
1527
1577
|
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n height: ", ";\n"], ["\n height: ", ";\n"])), theme.components.chrome.header.height);
|
|
1528
1578
|
/**
|
|
@@ -1821,16 +1871,6 @@ var templateObject_1$h;
|
|
|
1821
1871
|
*/
|
|
1822
1872
|
var Title = function (props) { return jsxRuntime.jsx(reactNotifications.Title, __assign({}, props)); };
|
|
1823
1873
|
|
|
1824
|
-
/**
|
|
1825
|
-
* Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
|
|
1826
|
-
*/
|
|
1827
|
-
var SM = function (props) { return jsxRuntime.jsx(reactTypography.SM, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.sm } : {} }, props)); };
|
|
1828
|
-
var MD = function (props) { return jsxRuntime.jsx(reactTypography.MD, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.md } : {} }, props)); };
|
|
1829
|
-
var LG = function (props) { return jsxRuntime.jsx(reactTypography.LG, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.lg } : {} }, props)); };
|
|
1830
|
-
var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({}, props)); };
|
|
1831
|
-
var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
|
|
1832
|
-
var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
|
|
1833
|
-
|
|
1834
1874
|
/**
|
|
1835
1875
|
* Login Form
|
|
1836
1876
|
* <hr>
|
|
@@ -2398,6 +2438,7 @@ Object.defineProperty(exports, 'ModalClose', {
|
|
|
2398
2438
|
get: function () { return reactModals.Close; }
|
|
2399
2439
|
});
|
|
2400
2440
|
exports.Accordion = Accordion;
|
|
2441
|
+
exports.Alert = Alert;
|
|
2401
2442
|
exports.Anchor = Anchor;
|
|
2402
2443
|
exports.AppHeader = AppHeader;
|
|
2403
2444
|
exports.Autocomplete = Autocomplete;
|
|
@@ -2458,6 +2499,7 @@ exports.MediaFigure = MediaFigure;
|
|
|
2458
2499
|
exports.MediaInput = MediaInput;
|
|
2459
2500
|
exports.MediaItem = MediaItem;
|
|
2460
2501
|
exports.Menu = Menu;
|
|
2502
|
+
exports.MenuHeaderItem = MenuHeaderItem;
|
|
2461
2503
|
exports.Message = Message;
|
|
2462
2504
|
exports.Modal = Modal;
|
|
2463
2505
|
exports.ModalFullScreen = ModalFullScreen;
|
|
@@ -2,5 +2,6 @@
|
|
|
2
2
|
import { ComponentMeta, Story } from "@storybook/react";
|
|
3
3
|
import { AppHeaderArgs } from "./_types";
|
|
4
4
|
export declare const Default: Story<AppHeaderArgs>;
|
|
5
|
+
export declare const MultipleWorkspaces: Story<AppHeaderArgs>;
|
|
5
6
|
declare const _default: ComponentMeta<({ brand, avatar, isLoading, ...args }: AppHeaderArgs) => JSX.Element>;
|
|
6
7
|
export default _default;
|
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
import { ButtonHTMLAttributes, HTMLAttributes } from "react";
|
|
2
2
|
import { IHeaderItemProps, IHeaderItemTextProps } from "@zendeskgarden/react-chrome";
|
|
3
|
+
export interface Workspace {
|
|
4
|
+
id: number;
|
|
5
|
+
company: string;
|
|
6
|
+
tokens?: number;
|
|
7
|
+
logo?: string;
|
|
8
|
+
csm?: {
|
|
9
|
+
id: number;
|
|
10
|
+
email: string;
|
|
11
|
+
name: string;
|
|
12
|
+
profile_id: number;
|
|
13
|
+
tryber_wp_user_id: number;
|
|
14
|
+
picture?: string;
|
|
15
|
+
};
|
|
16
|
+
}
|
|
3
17
|
export interface HeaderItemArgs extends IHeaderItemProps {
|
|
4
18
|
/** Maximizes the width of a flex item in the header */
|
|
5
19
|
maxX?: boolean;
|
|
@@ -21,6 +35,10 @@ export interface BrandItemArgs extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
21
35
|
brandName?: string;
|
|
22
36
|
/** Add a descriptive text to the menu item icon*/
|
|
23
37
|
menuLabel?: string;
|
|
38
|
+
workspacesLabel?: string;
|
|
39
|
+
activeWorkspace?: Workspace;
|
|
40
|
+
workspaces?: Workspace[];
|
|
41
|
+
onWorkspaceChange?: (workspace: Workspace) => void;
|
|
24
42
|
/** Triggered when the menu item is clicked */
|
|
25
43
|
toggleMenu?: () => void;
|
|
26
44
|
}
|
|
@@ -30,3 +48,5 @@ export interface HeaderItemTextArgs extends IHeaderItemTextProps {
|
|
|
30
48
|
}
|
|
31
49
|
export interface HeaderItemIconArgs extends HTMLAttributes<HTMLDivElement> {
|
|
32
50
|
}
|
|
51
|
+
export interface HeaderItemWrapperArgs extends HTMLAttributes<HTMLDivElement> {
|
|
52
|
+
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { HeaderItemArgs } from "./_types";
|
|
2
|
+
import { HeaderItemArgs, HeaderItemWrapperArgs } from "./_types";
|
|
3
3
|
declare const HeaderItem: (props: HeaderItemArgs) => JSX.Element;
|
|
4
|
-
|
|
4
|
+
declare const HeaderItemWrapper: (props: HeaderItemWrapperArgs) => JSX.Element;
|
|
5
|
+
export { HeaderItem, HeaderItemWrapper };
|