@appquality/unguess-design-system 2.10.10 → 2.10.13

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# v2.10.13 (Thu May 05 2022)
+
+#### ⚠️ Pushed to `master`
+
+- feat(hint): add hint component ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.10.12 (Thu May 05 2022)
+
+#### ⚠️ Pushed to `master`
+
+- fix(checkbox-card): fix toggle callback ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.10.11 (Thu May 05 2022)
+
+#### ⚠️ Pushed to `master`
+
+- fix(checkbox-card): add onToggle callback ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.10.10 (Thu May 05 2022)
 
 #### ⚠️ Pushed to `master`

package/build/index.js

@@ -369,11 +369,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$i || (templateObject_2$i = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), function (_a) {
+var ContainerCard = styled__default["default"](Card)(templateObject_2$j || (templateObject_2$j = __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;
+var templateObject_1$R, templateObject_2$j;
 
 /**
  * Tags let users categorize content using a keyword.
@@ -625,7 +625,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$h || (templateObject_2$h = __makeTemplateObject(["\n  ", ";\n  flex-direction: column;\n"], ["\n  ", ";\n  flex-direction: column;\n"])), flexCenter);
+var flexColumnCenter = styled.css(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  ", ";\n  flex-direction: column;\n"], ["\n  ", ";\n  flex-direction: column;\n"])), flexCenter);
 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) {
     var theme = _a.theme;
     return (theme.rtl ? "flex-end" : "flex-start");
@@ -643,7 +643,7 @@ var cardStyle = styled.css(templateObject_4$8 || (templateObject_4$8 = __makeTem
     var theme = _a.theme;
     return theme.shadows.boxShadow(theme);
 });
-var templateObject_1$O, templateObject_2$h, templateObject_3$c, templateObject_4$8;
+var templateObject_1$O, templateObject_2$i, templateObject_3$c, templateObject_4$8;
 
 var getStatusIcon = function (status) {
     switch (status) {
@@ -668,7 +668,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$g || (templateObject_2$g = __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$h || (templateObject_2$h = __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"];
 });
@@ -729,7 +729,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$g, templateObject_3$b, templateObject_4$7, templateObject_5$4, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9;
+var templateObject_1$N, templateObject_2$h, templateObject_3$b, templateObject_4$7, templateObject_5$4, 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;
@@ -744,7 +744,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$f || (templateObject_2$f = __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$g || (templateObject_2$g = __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) {
@@ -792,7 +792,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$f, templateObject_3$a, templateObject_4$6, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8;
+var templateObject_1$M, templateObject_2$g, templateObject_3$a, templateObject_4$6, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8;
 
 /**
  * Title is a basic component used to display a title. Often used in card headers.
@@ -1135,7 +1135,7 @@ var StyledCard$1 = styled__default["default"](Card)(templateObject_1$G || (templ
     var theme = _a.theme;
     return theme.palette.blue[300];
 });
-var IconWrapper$1 = styled__default["default"].div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n   margin: ", "px auto;\n"], ["\n   margin: ", "px auto;\n"])), function (_a) {
+var IconWrapper$1 = styled__default["default"].div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n   margin: ", "px auto;\n"], ["\n   margin: ", "px auto;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.base;
 });
@@ -1154,10 +1154,11 @@ var CheckboxCard = function (props) {
     var _a = React.useState(props.defaultChecked || false), checked = _a[0], setChecked = _a[1];
     var handleToggle = function () {
         setChecked(!checked);
+        props.onToggle && props.onToggle(!checked);
     };
-    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, onChange: props.onChange, onClick: function (e) { return e.stopPropagation(); } }, { children: jsxRuntime.jsx(StyledLabel, __assign({ hidden: true }, { children: props.label })) }))] })));
+    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 })) }))] })));
 };
-var templateObject_1$G, templateObject_2$e, templateObject_3$9, templateObject_4$5;
+var templateObject_1$G, templateObject_2$f, templateObject_3$9, templateObject_4$5;
 
 var UgField = styled__default["default"](reactForms.Field)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
 /**
@@ -1173,6 +1174,7 @@ var index = /*#__PURE__*/Object.freeze({
 });
 
 var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject([""], [""])));
+var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject([""], [""])));
 /**
    * An Input lets users enter text into a field.
    * <hr>
@@ -1181,7 +1183,7 @@ var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$E ||
    *  - To enter multiline text, use a Textarea
    **/
 var Input = function (props) { return jsxRuntime.jsx(UgInput, __assign({}, props)); };
-var templateObject_1$E;
+var templateObject_1$E, templateObject_2$e;
 
 var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject([""], [""])));
 /**
@@ -2432,6 +2434,7 @@ exports.HeaderItem = HeaderItem;
 exports.HeaderItemIcon = HeaderItemIcon;
 exports.HeaderItemText = HeaderItemText;
 exports.HeaderRow = HeaderRow;
+exports.Hint = Hint;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.Input = Input;

package/build/stories/forms/checkbox/cards/_types.d.ts

@@ -6,4 +6,5 @@ export interface CheckboxCardArgs extends CheckboxArgs {
     label: string;
     icon: React.ReactNode;
     iconActive?: React.ReactNode;
+    onToggle?: (checked: boolean) => void;
 }

package/build/stories/forms/input/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { InputArgs } from "./_types";
+declare const Hint: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
 /**
    * An Input lets users enter text into a field.
    * <hr>
@@ -8,4 +9,4 @@ import { InputArgs } from "./_types";
    *  - To enter multiline text, use a Textarea
    **/
 declare const Input: (props: InputArgs) => JSX.Element;
-export { Input };
+export { Input, Hint };

package/package.json

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