@appquality/unguess-design-system 2.8.33 → 2.8.36

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+# v2.8.36 (Thu Apr 28 2022)
+
+#### ⚠️ Pushed to `master`
+
+- fix(campaignscard): pillIcon cannot be used as JSX component ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.8.35 (Wed Apr 27 2022)
+
+#### ⚠️ Pushed to `master`
+
+- fix(counter): only if undefined the counter value MUST disappear ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.8.34 (Tue Apr 26 2022)
+
+#### 🐛 Bug Fix
+
+- Cup 631 typography update [#43](https://github.com/AppQuality/unguess-design-system/pull/43) ([@cicababba](https://github.com/cicababba) [@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 2
+
+- cicababba ([@cicababba](https://github.com/cicababba))
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.8.33 (Tue Apr 26 2022)
 
 #### ⚠️ Pushed to `master`

package/build/index.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var styled = require('styled-components');
+require('@zendeskgarden/css-bedrock');
 var reactTheming = require('@zendeskgarden/react-theming');
 var jsxRuntime = require('react/jsx-runtime');
 var reactAccordions = require('@zendeskgarden/react-accordions');
@@ -233,9 +234,9 @@ var gradients = {
 var _a, _b, _c, _d, _e, _f;
 var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), { chrome: __assign(__assign({}, (_a = reactTheming.DEFAULT_THEME.components) === null || _a === void 0 ? void 0 : _a.chrome), { header: __assign(__assign({}, (_c = (_b = reactTheming.DEFAULT_THEME.components) === null || _b === void 0 ? void 0 : _b.chrome) === null || _c === void 0 ? void 0 : _c.header), { height: "64px" }) }), notification: __assign(__assign({}, (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.notification), { card: __assign(__assign({}, (_f = (_e = reactTheming.DEFAULT_THEME.components) === null || _e === void 0 ? void 0 : _e.notification) === null || _f === void 0 ? void 0 : _f.well), { padding: "16px" }) }) });
 
-var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600] }), palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), 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 }) });
+var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600] }), 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 }) });
 
-var GlobalStyle = styled.createGlobalStyle(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\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"], ["\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);
+var GlobalStyle = styled.createGlobalStyle(templateObject_1$Q || (templateObject_1$Q = __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);
 var templateObject_1$Q;
 
 /**
@@ -605,18 +606,18 @@ var getStatusIcon = function (status) {
             return SvgOnGoingStatusRoundIcon;
         case "INCOMING":
             return SvgArrivalStatusRoundIcon;
+        default:
+            return SvgOnGoingStatusRoundIcon;
     }
 };
-var getTypeData = function (type) {
+var getTypeDataIcon = function (type) {
     switch (type) {
         case "EXPERIENTIAL":
-            return {
-                pillIcon: SvgRegressionTestRoundIcon,
-            };
+            return SvgRegressionTestRoundIcon;
         case "FUNCTIONAL":
-            return {
-                pillIcon: SvgFunctionalTestRoundIcon,
-            };
+            return SvgFunctionalTestRoundIcon;
+        default:
+            return SvgFunctionalTestRoundIcon;
     }
 };
 var Wrapper$1 = styled__default["default"](Card)(templateObject_1$L || (templateObject_1$L = __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) {
@@ -682,8 +683,7 @@ var CardFooter$1 = styled__default["default"].div(templateObject_9 || (templateO
 var CampaignCard = function (props) {
     var isNew = props.isNew, date = props.date, projectTitle = props.projectTitle, campaignTitle = props.campaignTitle, status = props.status, type = props.type, labelNew = props.labelNew;
     var StatusIcon = getStatusIcon(status !== null && status !== void 0 ? status : "PROGRESS");
-    var typeData = getTypeData(type);
-    var PillIcon = typeData === null || typeData === void 0 ? void 0 : typeData.pillIcon;
+    var PillIcon = getTypeDataIcon(type);
     var projectTitleCut = projectTitle;
     if (projectTitle.length > 42) {
         projectTitleCut = "".concat(projectTitle.substring(0, 39), "...");
@@ -692,7 +692,7 @@ var CampaignCard = function (props) {
     if (campaignTitle.length > 29) {
         campaignTitleCut = "".concat(campaignTitle.substring(0, 26), "...");
     }
-    return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(Wrapper$1, __assign({}, props, { children: [jsxRuntime.jsxs(CardHeader, { children: [jsxRuntime.jsx(StyledLabel$1, __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$1, __assign({ isRegular: true }, { children: projectTitleCut })), jsxRuntime.jsx(StyledTitleLabel$1, __assign({ isRegular: true }, { children: campaignTitleCut }))] }), jsxRuntime.jsx(Divider$1, {}), jsxRuntime.jsxs(CardFooter$1, { children: [typeData && (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, {})] })] })));
+    return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(Wrapper$1, __assign({}, props, { children: [jsxRuntime.jsxs(CardHeader, { children: [jsxRuntime.jsx(StyledLabel$1, __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$1, __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$L, templateObject_2$d, templateObject_3$8, templateObject_4$4, templateObject_5$2, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9;
 
@@ -1003,7 +1003,7 @@ var StyledTag = styled__default["default"](Tag)(templateObject_1$J || (templateO
  */
 var Counter = function (props) {
     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 && counter > 0 && jsxRuntime.jsx("span", { children: 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() })] })));
 };
 Counter.Avatar = StyledTag.Avatar;
 var templateObject_1$J;
@@ -1674,9 +1674,9 @@ var Title = function (props) { return jsxRuntime.jsx(reactNotifications.Title, _
 /**
  *  Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
  */
-var SM = function (props) { return jsxRuntime.jsx(reactTypography.SM, __assign({}, props)); };
-var MD = function (props) { return jsxRuntime.jsx(reactTypography.MD, __assign({}, props)); };
-var LG = function (props) { return jsxRuntime.jsx(reactTypography.LG, __assign({}, props)); };
+var SM = function (props) { return jsxRuntime.jsx(reactTypography.SM, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.sm } : {} }, props)); };
+var MD = function (props) { return jsxRuntime.jsx(reactTypography.MD, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.md } : {} }, props)); };
+var LG = function (props) { return jsxRuntime.jsx(reactTypography.LG, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.lg } : {} }, props)); };
 var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({}, props)); };
 var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
 var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };

package/build/stories/shared/globalStyle.d.ts

@@ -1,2 +1,3 @@
+import "@zendeskgarden/css-bedrock";
 declare const GlobalStyle: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
 export { GlobalStyle };

package/build/stories/theme/index.d.ts

@@ -155,6 +155,17 @@ declare const theme: {
         system: string;
         mono: string;
     };
+    fontWeights: {
+        semibold: number;
+        thin: number;
+        extralight: number;
+        light: number;
+        regular: number;
+        medium: number;
+        bold: number;
+        extrabold: number;
+        black: number;
+    };
     gradients: {
         horizontal: string;
         dark: string;
@@ -205,17 +216,6 @@ declare const theme: {
         xxl: string;
         xxxl: string;
     };
-    fontWeights: {
-        thin: number;
-        extralight: number;
-        light: number;
-        regular: number;
-        medium: number;
-        semibold: number;
-        bold: number;
-        extrabold: number;
-        black: number;
-    };
     iconSizes: {
         sm: string;
         md: string;

package/build/stories/typography/typescale/anchortag/index.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+export declare const AnchorTag: Story<any>;
+declare const _default: ComponentMeta<(props: import("../_types").MDArgs) => JSX.Element>;
+export default _default;

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.8.33",
+  "version": "2.8.36",
   "dependencies": {
+    "@zendeskgarden/css-bedrock": "^9.0.0",
     "@zendeskgarden/react-accordions": "^8.49.0",
     "@zendeskgarden/react-avatars": "^8.49.0",
     "@zendeskgarden/react-breadcrumbs": "^8.49.0",