@appquality/unguess-design-system 2.10.21 → 2.10.24

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+# v2.10.24 (Thu May 12 2022)
+
+#### ⚠️ Pushed to `master`
+
+- fix(table): type error ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.10.23 (Thu May 12 2022)
+
+#### ⚠️ Pushed to `master`
+
+- feat(counter): update counter behaviour based on screen size ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.10.22 (Thu May 12 2022)
+
+#### ⚠️ Pushed to `master`
+
+- Merge branch 'master' of github.com:AppQuality/unguess-design-system ([@cannarocks](https://github.com/cannarocks))
+- fix(app-header): fix stories type error ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.10.21 (Thu May 12 2022)
 
 #### ⚠️ Pushed to `master`

package/build/index.js

@@ -15,9 +15,9 @@ var reactTags = require('@zendeskgarden/react-tags');
 var reactForms = require('@zendeskgarden/react-forms');
 var React = require('react');
 var reactLoaders = require('@zendeskgarden/react-loaders');
+var reactTypography = require('@zendeskgarden/react-typography');
 var reactModals = require('@zendeskgarden/react-modals');
 var reactDropdowns = require('@zendeskgarden/react-dropdowns');
-var reactTypography = require('@zendeskgarden/react-typography');
 var reactGrid = require('@zendeskgarden/react-grid');
 var reactChrome = require('@zendeskgarden/react-chrome');
 var formik = require('formik');
@@ -385,11 +385,11 @@ var ContentCard = styled__default["default"](reactNotifications.Well)(templateOb
     - To group related content
  */
 var Card = function (props) { return jsxRuntime.jsx(ContentCard, __assign({}, props)); };
-var ContainerCard = styled__default["default"](Card)(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), function (_a) {
+var ContainerCard = styled__default["default"](Card)(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.borderRadii.xl;
 });
-var templateObject_1$R, templateObject_2$l;
+var templateObject_1$R, templateObject_2$m;
 
 /**
  * Tags let users categorize content using a keyword.
@@ -641,7 +641,7 @@ var CampaignCardSkeleton = function () {
 };
 
 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"])));
-var flexColumnCenter = styled.css(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  ", ";\n  flex-direction: column;\n"], ["\n  ", ";\n  flex-direction: column;\n"])), flexCenter);
+var flexColumnCenter = styled.css(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  ", ";\n  flex-direction: column;\n"], ["\n  ", ";\n  flex-direction: column;\n"])), flexCenter);
 var flexStart = styled.css(templateObject_3$d || (templateObject_3$d = __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) {
     var theme = _a.theme;
     return (theme.rtl ? "flex-end" : "flex-start");
@@ -659,7 +659,7 @@ var cardStyle = styled.css(templateObject_4$b || (templateObject_4$b = __makeTem
     var theme = _a.theme;
     return theme.shadows.boxShadow(theme);
 });
-var templateObject_1$O, templateObject_2$k, templateObject_3$d, templateObject_4$b;
+var templateObject_1$O, templateObject_2$l, templateObject_3$d, templateObject_4$b;
 
 var getStatusIcon = function (status) {
     switch (status) {
@@ -684,7 +684,7 @@ var getTypeDataIcon = function (type) {
     }
 };
 var Wrapper$1 = styled__default["default"](Card)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), cardStyle);
-var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  color: ", ";\n  max-width: 75%;\n  cursor: pointer;\n"], ["\n  color: ", ";\n  max-width: 75%;\n  cursor: pointer;\n"])), function (_a) {
+var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  color: ", ";\n  max-width: 75%;\n  cursor: pointer;\n"], ["\n  color: ", ";\n  max-width: 75%;\n  cursor: pointer;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey["700"];
 });
@@ -745,7 +745,7 @@ var CampaignCard = function (props) {
     }
     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, {})] })] })));
 };
-var templateObject_1$N, templateObject_2$j, templateObject_3$c, templateObject_4$a, templateObject_5$5, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9;
+var templateObject_1$N, templateObject_2$k, templateObject_3$c, templateObject_4$a, templateObject_5$5, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9;
 
 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) {
     var theme = _a.theme;
@@ -760,7 +760,7 @@ var Wrapper = styled__default["default"](Card)(templateObject_1$M || (templateOb
     var theme = _a.theme;
     return theme.shadows.boxShadow(theme);
 });
-var StyledTagNew = styled__default["default"](Tag)(templateObject_2$i || (templateObject_2$i = __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) {
+var StyledTagNew = styled__default["default"](Tag)(templateObject_2$j || (templateObject_2$j = __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) {
     var theme = _a.theme;
     return theme.space.base * 6;
 }, function (_a) {
@@ -808,7 +808,7 @@ var ProductCard = function (props) {
     }
     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 })) })] })));
 };
-var templateObject_1$M, templateObject_2$i, templateObject_3$b, templateObject_4$9, templateObject_5$4, templateObject_6$1, templateObject_7, templateObject_8;
+var templateObject_1$M, templateObject_2$j, templateObject_3$b, templateObject_4$9, templateObject_5$4, templateObject_6$1, templateObject_7, templateObject_8;
 
 /**
  * Title is a basic component used to display a title. Often used in card headers.
@@ -1014,7 +1014,46 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
   })));
 };
 
-var StyledTag = styled__default["default"](Tag)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n  background-color: transparent;\n  pointer-events: none;\n  font-weight: ", ";\n  ", "\n  svg {\n    margin-right: ", " !important;\n  }\n\n  span {\n    font-weight: ", ";\n    margin-left: ", ";\n    color: ", ";\n  }\n"], ["\n  background-color: transparent;\n  pointer-events: none;\n  font-weight: ", ";\n  ", "\n  svg {\n    margin-right: ", " !important;\n  }\n\n  span {\n    font-weight: ", ";\n    margin-left: ", ";\n    color: ", ";\n  }\n"])), function (_a) {
+/**
+ * Use Span to style and format inline text elements.
+ * <hr>
+ * Used for this:
+    - To apply styles to short strings of text
+    - To include icons inline with text
+ * Not for this:
+    - To style an entire block of text, use Paragraph instead
+ */
+var Span = function (props) { return jsxRuntime.jsx(reactTypography.Span, __assign({}, props)); };
+
+function debounce(callback, wait) {
+    var timer;
+    return function () {
+        if (typeof timer !== "undefined")
+            clearTimeout(timer);
+        timer = setTimeout(function () {
+            timer = undefined;
+            callback();
+        }, wait);
+    };
+}
+function useWindowSize() {
+    var _a = React.useState({
+        width: window.innerWidth,
+        height: window.innerHeight,
+    }), size = _a[0], setSize = _a[1];
+    React.useLayoutEffect(function () {
+        var debounceUpdateSize = debounce(function () {
+            setSize({ width: window.innerWidth, height: window.innerHeight });
+        }, 300);
+        window.addEventListener("resize", debounceUpdateSize);
+        debounceUpdateSize();
+        return function () { return window.removeEventListener("resize", debounceUpdateSize); };
+    }, []);
+    return size;
+}
+
+var StyledSpan = styled__default["default"](Span)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject([""], [""])));
+var StyledTag = styled__default["default"](Tag)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  background-color: transparent;\n  pointer-events: none;\n  font-weight: ", ";\n  ", "\n  svg {\n    margin-right: ", " !important;\n  }\n\n  ", " {\n    font-weight: ", ";\n    margin-left: ", ";\n    color: ", ";\n  }\n"], ["\n  background-color: transparent;\n  pointer-events: none;\n  font-weight: ", ";\n  ", "\n  svg {\n    margin-right: ", " !important;\n  }\n\n  ", " {\n    font-weight: ", ";\n    margin-left: ", ";\n    color: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.fontWeights.regular;
 }, function (_a) {
@@ -1032,7 +1071,7 @@ var StyledTag = styled__default["default"](Tag)(templateObject_1$L || (templateO
 }, function (_a) {
     var theme = _a.theme;
     return theme.space.xxs;
-}, function (_a) {
+}, StyledSpan, function (_a) {
     var theme = _a.theme;
     return theme.fontWeights.bold;
 }, function (_a) {
@@ -1046,11 +1085,12 @@ var StyledTag = styled__default["default"](Tag)(templateObject_1$L || (templateO
  * Counter let users categorize content using a keyword.
  */
 var Counter = function (props) {
+    var width = useWindowSize().width;
     var status = props.status, counter = props.counter;
-    return (jsxRuntime.jsxs(StyledTag, __assign({}, props, { size: props.size || "large" }, { children: [jsxRuntime.jsx(StyledTag.Avatar, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [status === "completed" && jsxRuntime.jsx(SvgCampaignCompleted, {}), status === "progress" && jsxRuntime.jsx(SvgCampaignProgress, {}), status === "incoming" && jsxRuntime.jsx(SvgCampaignIncoming, {}), status === "functional" && jsxRuntime.jsx(SvgCampaignFunctional, {}), status === "experiential" && jsxRuntime.jsx(SvgCampaignExperiential, {})] }) }), props.children, counter !== undefined && jsxRuntime.jsx("span", { children: counter.toString() })] })));
+    return (jsxRuntime.jsxs(StyledTag, __assign({}, props, { size: props.size || "large" }, { children: [jsxRuntime.jsx(StyledTag.Avatar, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [status === "completed" && jsxRuntime.jsx(SvgCampaignCompleted, {}), status === "progress" && jsxRuntime.jsx(SvgCampaignProgress, {}), status === "incoming" && jsxRuntime.jsx(SvgCampaignIncoming, {}), status === "functional" && jsxRuntime.jsx(SvgCampaignFunctional, {}), status === "experiential" && jsxRuntime.jsx(SvgCampaignExperiential, {})] }) }), width > parseInt(theme.breakpoints.sm) && props.children, counter !== undefined && jsxRuntime.jsx(StyledSpan, { children: counter.toString() })] })));
 };
 Counter.Avatar = StyledTag.Avatar;
-var templateObject_1$L;
+var templateObject_1$L, templateObject_2$i;
 
 /**
  * A Drawer is a container for supplementary content that is anchored to the edge of a page.
@@ -1603,17 +1643,22 @@ var AppHeader = function (_a) {
 };
 var templateObject_1$q;
 
-var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  border-right: ", ";\n  border-color: ", ";\n  ", "\n  transition: width 0.25s ease-in-out;\n  padding-top: ", ";\n  padding-left: ", ";\n"], ["\n  border-right: ", ";\n  border-color: ", ";\n  ", "\n  transition: width 0.25s ease-in-out;\n  padding-top: ", ";\n  padding-left: ", ";\n"])), function (_a) {
+var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  border-right: ", ";\n  border-color: ", ";\n  ", "\n  transition: width 0.25s ease-in-out;\n  padding-top: ", ";\n  @media (min-width: ", ") {\n    padding-left: ", ";\n  }\n"], ["\n  border-right: ", ";\n  border-color: ", ";\n  ", "\n  transition: width 0.25s ease-in-out;\n  padding-top: ", ";\n  @media (min-width: ", ") {\n    padding-left: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.borders.sm;
 }, function (_a) {
     var theme = _a.theme;
     return reactTheming.getColor(theme.colors.neutralHue, 300);
 }, function (props) {
-    return "\n      width: ".concat(props.isExpanded ? props.theme.space.base * 60 : props.theme.space.base * 9, "px;\n      @media (max-width: ").concat(props.theme.breakpoints.sm, ") {\n         width: ").concat(props.isExpanded ? "100%" : "0", ";\n         border-right: none;\n      }\n  ");
+    return "\n      width: ".concat(props.isExpanded
+        ? props.theme.space.base * 60
+        : props.theme.space.base * 9, "px;\n      @media (max-width: ").concat(props.theme.breakpoints.sm, ") {\n         width: ").concat(props.isExpanded ? "100%" : "0", ";\n         border-right: none;\n      }\n  ");
 }, function (_a) {
     var theme = _a.theme;
     return theme.space.sm;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.breakpoints.sm;
 }, function (_a) {
     var theme = _a.theme;
     return theme.space.xs;
@@ -1809,17 +1854,6 @@ var SvgToken = function SvgToken(props) {
   })))));
 };
 
-/**
- * Use Span to style and format inline text elements.
- * <hr>
- * Used for this:
-    - To apply styles to short strings of text
-    - To include icons inline with text
- * Not for this:
-    - To style an entire block of text, use Paragraph instead
- */
-var Span = function (props) { return jsxRuntime.jsx(reactTypography.Span, __assign({}, props)); };
-
 var LoadingSidebar = function () {
     var isExpanded = true;
     return (jsxRuntime.jsxs(Nav, __assign({ style: { width: "250px" } }, { children: [jsxRuntime.jsx(NavToggle, { isExpanded: isExpanded }), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: isExpanded, isCurrent: true }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) })), jsxRuntime.jsx(Skeleton, { height: "12px", width: "60%" }), jsxRuntime.jsx(NavItemText, {})] })), jsxRuntime.jsx(NavDivider, { isExpanded: isExpanded }), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 1), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 2), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 3), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 3), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none" } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
@@ -2227,33 +2261,6 @@ var UserMenu = function (props) {
 };
 var templateObject_1$6;
 
-function debounce(callback, wait) {
-    var timer;
-    return function () {
-        if (typeof timer !== "undefined")
-            clearTimeout(timer);
-        timer = setTimeout(function () {
-            timer = undefined;
-            callback();
-        }, wait);
-    };
-}
-function useWindowSize() {
-    var _a = React.useState({
-        width: window.innerWidth,
-        height: window.innerHeight,
-    }), size = _a[0], setSize = _a[1];
-    React.useLayoutEffect(function () {
-        var debounceUpdateSize = debounce(function () {
-            setSize({ width: window.innerWidth, height: window.innerHeight });
-        }, 300);
-        window.addEventListener("resize", debounceUpdateSize);
-        debounceUpdateSize();
-        return function () { return window.removeEventListener("resize", debounceUpdateSize); };
-    }, []);
-    return size;
-}
-
 var StyledModal = styled__default["default"](Modal)(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  margin: 0;\n  left: auto;\n  right: auto;\n  top: auto;\n  bottom: auto;\n\n  max-height: calc(100vh - ", ");\n\n  @media (min-width: ", ") {\n    margin-top: calc(\n      ", "\n    );\n    margin-right: ", "px;\n  }\n"], ["\n  margin: 0;\n  left: auto;\n  right: auto;\n  top: auto;\n  bottom: auto;\n\n  max-height: calc(100vh - ", ");\n\n  @media (min-width: ", ") {\n    margin-top: calc(\n      ", "\n    );\n    margin-right: ", "px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.xxl;

package/build/stories/table/_types.d.ts

@@ -1,6 +1,6 @@
 import { ITableProps, IRowProps, ICellProps, IHeaderCellProps, ISortableCellProps } from "@zendeskgarden/react-tables";
-import { SIZE, SORT } from "@zendeskgarden/react-tables/dist/typings/styled";
 import { IconArgs } from "../icons/_types";
+declare type SIZE = "small" | "medium" | "large";
 export interface TableProps extends ITableProps {
     /** Sets the table size */
     size?: SIZE;
@@ -63,8 +63,6 @@ export interface HeadArgs extends ICellProps {
     width?: string | number;
 }
 export interface SortableCellArgs extends ISortableCellProps {
-    /** Sets the sort order */
-    sort?: SORT;
     /** Sets the width of the cell */
     width?: string | number;
     /** Passes props to the cell */
@@ -81,3 +79,4 @@ export interface Group {
     groupIcon: IconArgs["type"];
     items: Array<IRow>;
 }
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.10.21",
+  "version": "2.10.24",
   "dependencies": {
     "@zendeskgarden/css-bedrock": "^9.0.0",
     "@zendeskgarden/react-accordions": "^8.49.0",