@appquality/unguess-design-system 2.10.5 → 2.10.8

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# v2.10.8 (Thu May 05 2022)
+
+#### ⚠️ Pushed to `master`
+
+- feat(contentcard): update content card padding ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.10.7 (Wed May 04 2022)
+
+#### 🐛 Bug Fix
+
+- feat(card): add Container variant with different border-radius [#49](https://github.com/AppQuality/unguess-design-system/pull/49) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.10.6 (Wed May 04 2022)
+
+#### ⚠️ Pushed to `master`
+
+- feat(palette): add `water` palette ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.10.5 (Wed May 04 2022)
 
 #### ⚠️ Pushed to `master`

package/build/index.js

@@ -102,7 +102,7 @@ var palette = __assign(__assign({}, reactTheming.DEFAULT_THEME.palette), { black
         talk: "#efc93d",
         sell: "#c38f00",
     }, grey: {
-        "100": "#f8f9f9",
+        "100": "#F6F6F8",
         "200": "#e9ebed",
         "300": "#d8dcde",
         "400": "#c2c8cc",
@@ -210,6 +210,13 @@ var palette = __assign(__assign({}, reactTheming.DEFAULT_THEME.palette), { black
         "600": "#6a27b8",
         M400: "#b072cc",
         M600: "#9358b0",
+    }, water: {
+        100: "#D4FFF7",
+        200: "#ABEBDF",
+        300: "#6FD1BE",
+        600: "#2B8473",
+        700: "#206E6A",
+        800: "#0C4D5E",
     } });
 
 var hex2rgba = function (hex, alpha) {
@@ -236,8 +243,8 @@ var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), {
 
 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$T || (templateObject_1$T = __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$T;
+var GlobalStyle = styled.createGlobalStyle(templateObject_1$U || (templateObject_1$U = __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$U;
 
 /**
  * Accordions are headers that can be expanded to reveal content or collapsed to hide it.
@@ -253,7 +260,7 @@ Accordion.Label = reactAccordions.Accordion.Label;
 Accordion.Panel = reactAccordions.Accordion.Panel;
 
 // import useWindowSize from "../../hooks/useWindowSize";
-var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     return props.avatarType &&
         props.avatarType !== "image" &&
         "background: ".concat(props.backgroundColor || theme.gradients.dark, ";");
@@ -278,7 +285,7 @@ var Avatar = function (props) {
     return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
 };
 Avatar.Text = UgAvatar.Text;
-var templateObject_1$S;
+var templateObject_1$T;
 
 /**
  * Breadcrumbs mark and communicate a user’s location in the product.
@@ -299,7 +306,7 @@ var Breadcrumb = function (props) { return jsxRuntime.jsx(reactBreadcrumbs.Bread
  */
 var Anchor = function (props) { return jsxRuntime.jsx(reactButtons.Anchor, __assign({}, props)); };
 
-var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject([""], [""])));
+var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$S || (templateObject_1$S = __makeTemplateObject([""], [""])));
 /**
  * Buttons let users take action quickly.
  * Use a Button to enable actions or decisions that are important to a user’s workflow.
@@ -311,7 +318,7 @@ var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
 var Button = function (props) { return jsxRuntime.jsx(UgButton, __assign({}, props)); };
 Button.StartIcon = UgButton.StartIcon;
 Button.EndIcon = UgButton.EndIcon;
-var templateObject_1$R;
+var templateObject_1$S;
 
 /**
 A Button group lets users make a selection from a set of options.
@@ -341,13 +348,32 @@ Used for this:
 **/
 var SplitButton = function (props) { return (jsxRuntime.jsx(reactButtons.SplitButton, __assign({}, props))); };
 
+var ContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  ", "\n"], ["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.borderRadii.lg;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.space.xxl;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey["200"];
+}, function (_a) {
+    var isFloating = _a.isFloating, theme = _a.theme;
+    return !isFloating &&
+        "\n      &:hover {\n         box-shadow: ".concat(theme.shadows.boxShadow(theme), ";\n      }");
+});
 /**
  * A Card is a container that groups related content.
  * <hr>
  * Used for this:
     - To group related content
  */
-var Card = function (props) { return jsxRuntime.jsx(reactNotifications.Well, __assign({}, props)); };
+var Card = function (props) { return jsxRuntime.jsx(ContentCard, __assign({}, props)); };
+var ContainerCard = styled__default["default"](Card)(templateObject_2$i || (templateObject_2$i = __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$i;
 
 /**
  * Tags let users categorize content using a keyword.
@@ -2385,6 +2411,7 @@ exports.Chrome = Chrome;
 exports.Close = Close;
 exports.Code = Code;
 exports.Col = Col;
+exports.ContainerCard = ContainerCard;
 exports.Content = Content;
 exports.Counter = Counter;
 exports.CursorPagination = CursorPagination;

package/build/stories/cards/container.stories.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { CardProps } from "./_types";
+interface CardStoryProps extends CardProps {
+    title: string;
+    content: string;
+}
+export declare const Default: Story<CardStoryProps>;
+export declare const Floating: Story<CardStoryProps>;
+declare const _default: ComponentMeta<import("styled-components").StyledComponent<(props: CardProps) => JSX.Element, any, {}, never>>;
+export default _default;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CardProps } from './_types';
+import { CardProps } from "./_types";
 /**
  * A Card is a container that groups related content.
  * <hr>
@@ -7,4 +7,5 @@ import { CardProps } from './_types';
     - To group related content
  */
 declare const Card: (props: CardProps) => JSX.Element;
-export { Card };
+declare const ContainerCard: import("styled-components").StyledComponent<(props: CardProps) => JSX.Element, any, {}, never>;
+export { Card, ContainerCard };

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

@@ -150,6 +150,14 @@ declare const theme: {
             M400: string;
             M600: string;
         };
+        water: {
+            100: string;
+            200: string;
+            300: string;
+            600: string;
+            700: string;
+            800: string;
+        };
     };
     fonts: {
         system: string;

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

@@ -138,4 +138,12 @@ export declare const palette: {
         M400: string;
         M600: string;
     };
+    water: {
+        100: string;
+        200: string;
+        300: string;
+        600: string;
+        700: string;
+        800: string;
+    };
 };

package/package.json

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