@appquality/unguess-design-system 2.4.0 → 2.4.1

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+# v2.4.1 (Fri Mar 18 2022)
+
+
+
+---
+
 # v2.4.0 (Fri Mar 18 2022)
 
 #### 🚀 Enhancement

package/build/index.js

@@ -15,32 +15,12 @@ var reactForms = require('@zendeskgarden/react-forms');
 var reactGrid = require('@zendeskgarden/react-grid');
 var reactLoaders = require('@zendeskgarden/react-loaders');
 var formik = require('formik');
-var React = require('react');
 var reactTables = require('@zendeskgarden/react-tables');
 var reactTypography = require('@zendeskgarden/react-typography');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n["default"] = e;
-    return Object.freeze(n);
-}
-
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -467,135 +447,16 @@ var templateObject_1$4;
  */
 var Title = function (props) { return jsxRuntime.jsx(reactNotifications.Title, __assign({}, props)); };
 
-var _g;
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-var SvgLogo = function SvgLogo(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 189.135,
-    height: 30.792,
-    viewBox: "0 0 189.135 30.792"
-  }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
-    id: "Group_2",
-    "data-name": "Group 2",
-    transform: "translate(-356.09 231.603)"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    id: "Path_10",
-    "data-name": "Path 10",
-    d: "M531.1-170.478v-10.108c0-2.8-1.5-4.406-4.12-4.406-2.466,0-3.881,1.606-3.881,4.406v10.108h-3.525v-10.108c0-4.73,2.847-7.669,7.43-7.669,4.629,0,7.62,3.01,7.62,7.669v10.108Z",
-    transform: "translate(-116.123 -30.79)",
-    fill: "#003a57"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    id: "Path_11",
-    "data-name": "Path 11",
-    d: "M617.594-170.308c-6.8,0-9.223-4.6-9.223-8.906,0-6.523,4.632-9.443,9.223-9.443a9.179,9.179,0,0,1,6.482,2.667l.141.139-2.276,2.331-.143-.136a6.385,6.385,0,0,0-4.2-1.651c-3.343,0-5.678,2.506-5.678,6.093,0,2.662,1.492,5.508,5.678,5.508a5.452,5.452,0,0,0,3.654-1.263V-177.7h-4.365v-3.277h7.928v7.212l-.261.314A8.759,8.759,0,0,1,617.594-170.308Z",
-    transform: "translate(-179.191 -30.504)",
-    fill: "#003a57"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    id: "Path_12",
-    "data-name": "Path 12",
-    d: "M710.01-170.478c-4.629,0-7.621-3.01-7.621-7.669v-10.107h3.525v10.107c0,2.8,1.5,4.407,4.119,4.407,2.467,0,3.881-1.606,3.881-4.407v-10.107h3.525v10.107C717.44-173.416,714.592-170.478,710.01-170.478Z",
-    transform: "translate(-245.97 -30.79)",
-    fill: "#003a57"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    id: "Path_13",
-    "data-name": "Path 13",
-    d: "M791.18-170.215v-17.669H805.1v3.453h-10.4v3.9h8.7v3.334h-8.7v3.484h10.4v3.5Z",
-    transform: "translate(-309.038 -31.053)",
-    fill: "#003a57"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    id: "Path_14",
-    "data-name": "Path 14",
-    d: "M880.688-170.132c-3.866,0-6.307-1.383-7.463-4.229l-.069-.169,2.981-1.545.082.2c.636,1.58,2.324,2.524,4.516,2.524.854,0,3.642-.166,3.642-2.306,0-1.254-1.206-1.993-3.687-2.26-5.94-.706-6.741-3.054-6.741-5.258,0-3.465,3.347-5.042,6.665-5.067,3.311,0,5.642,1.186,6.743,3.429l.086.176-2.846,1.463-.1-.16a4.623,4.623,0,0,0-3.79-1.764c-2.011,0-3.26.774-3.26,2.02,0,1.228,1.417,1.648,3.546,1.9,3.587.442,6.905,1.417,6.905,5.52C887.9-171.582,884.176-170.132,880.688-170.132Z",
-    transform: "translate(-367.264 -30.802)",
-    fill: "#003a57"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    id: "Path_15",
-    "data-name": "Path 15",
-    d: "M965.594-169.8c-3.862,0-6.3-1.382-7.455-4.225l-.068-.169,2.978-1.543.082.2c.636,1.579,2.322,2.521,4.511,2.521.854,0,3.639-.166,3.639-2.3,0-1.253-1.2-1.991-3.684-2.257-5.933-.705-6.733-3.051-6.733-5.252,0-3.461,3.344-5.036,6.657-5.062,3.307,0,5.636,1.184,6.736,3.425l.086.176-2.843,1.461-.1-.16a4.619,4.619,0,0,0-3.786-1.762c-2.009,0-3.257.773-3.257,2.018,0,1.227,1.416,1.647,3.543,1.9,3.583.442,6.9,1.416,6.9,5.514C972.8-171.253,969.079-169.8,965.594-169.8Z",
-    transform: "translate(-427.577 -31.049)",
-    fill: "#003a57"
-  }), /*#__PURE__*/React__namespace.createElement("g", {
-    id: "Group_1",
-    "data-name": "Group 1",
-    transform: "translate(356.09 -231.603)"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    id: "Path_16",
-    "data-name": "Path 16",
-    d: "M441.7-157.552v1.74h-.013c-.149,2.52-1.542,3.954-3.874,3.954a3.812,3.812,0,0,1-4.112-3.954h-.012v-1.74h-3.525v1.74h0v.023h0c.2,4.391,3.148,7.2,7.624,7.2,4.434,0,7.245-2.745,7.434-7.2h0v-1.762Z",
-    transform: "translate(-408.704 179.006)",
-    fill: "#003a57"
-  }), /*#__PURE__*/React__namespace.createElement("rect", {
-    id: "Rectangle_55",
-    "data-name": "Rectangle 55",
-    width: 3.535,
-    height: 3.535,
-    transform: "translate(21.459 12.573)",
-    fill: "#54c38a"
-  }), /*#__PURE__*/React__namespace.createElement("rect", {
-    id: "Rectangle_56",
-    "data-name": "Rectangle 56",
-    width: 3.585,
-    height: 3.585,
-    transform: "translate(32.908 12.573)",
-    fill: "#003a57"
-  }), /*#__PURE__*/React__namespace.createElement("rect", {
-    id: "Rectangle_57",
-    "data-name": "Rectangle 57",
-    width: 3.535,
-    height: 3.535,
-    transform: "translate(15.427 3.989) rotate(90)",
-    fill: "#b2c4cd"
-  }), /*#__PURE__*/React__namespace.createElement("rect", {
-    id: "Rectangle_58",
-    "data-name": "Rectangle 58",
-    width: 3.535,
-    height: 3.535,
-    transform: "translate(20.618 8.614) rotate(90)",
-    fill: "#809cab"
-  }), /*#__PURE__*/React__namespace.createElement("rect", {
-    id: "Rectangle_59",
-    "data-name": "Rectangle 59",
-    width: 3.535,
-    height: 3.535,
-    transform: "translate(8.944 7.179) rotate(90)",
-    fill: "#cceddc"
-  }), /*#__PURE__*/React__namespace.createElement("rect", {
-    id: "Rectangle_60",
-    "data-name": "Rectangle 60",
-    width: 3.535,
-    height: 3.535,
-    transform: "translate(3.535 0) rotate(90)",
-    fill: "#ccd8dd"
-  }), /*#__PURE__*/React__namespace.createElement("rect", {
-    id: "Rectangle_61",
-    "data-name": "Rectangle 61",
-    width: 3.535,
-    height: 3.535,
-    transform: "translate(10.631 23.196) rotate(90)",
-    fill: "#e5ebee"
-  }), /*#__PURE__*/React__namespace.createElement("rect", {
-    id: "Rectangle_62",
-    "data-name": "Rectangle 62",
-    width: 3.535,
-    height: 3.535,
-    transform: "translate(16.831 16.898) rotate(90)",
-    fill: "#a9e1c5"
-  })))));
-};
-
 /**
  * Login Form
  * <hr>
  * Used for this:
     - Login user to the application
  */
-var LoginForm = function (props) { return (jsxRuntime.jsx(Grid, { children: jsxRuntime.jsx(Row, __assign({ justifyContent: "center", alignItems: "center" }, { children: jsxRuntime.jsxs(Col, __assign({ size: 4, xs: 12, sm: 12 }, { children: [jsxRuntime.jsx(SvgLogo, { style: { marginBottom: theme.space.md } }), jsxRuntime.jsx(formik.Formik, __assign({}, props, { initialValues: props.initialValues, onSubmit: props.onSubmit, validate: props.validate }, { children: function (_a) {
-                        var values = _a.values, errors = _a.errors, touched = _a.touched, handleChange = _a.handleChange, handleSubmit = _a.handleSubmit, isSubmitting = _a.isSubmitting;
-                        return (jsxRuntime.jsx(formik.Form, __assign({ onSubmit: handleSubmit }, { children: jsxRuntime.jsxs(Card, __assign({ isFloating: true }, { children: [jsxRuntime.jsx(Title, __assign({ style: { textAlign: "center", margin: theme.space.md } }, { children: "Log In" })), jsxRuntime.jsxs(Field, { children: [jsxRuntime.jsx(Input, __assign({ type: "email", name: "email", placeholder: "Email Address", onChange: handleChange, value: values.email }, touched && values.email ? touched.email = true : touched.email = false, errors && errors.email ? { validation: "error" } : (touched.email ? { validation: "success" } : ""))), (errors.email) ? (jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: errors.email }))) : ""] }), jsxRuntime.jsxs(Field, __assign({ style: { marginTop: theme.space.md } }, { children: [jsxRuntime.jsx(Input, __assign({ type: "password", name: "password", placeholder: "Password", onChange: handleChange, value: values.password }, touched && values.password ? touched.password = true : touched.password = false, errors && errors.password ? { validation: "error" } : (touched.password ? { validation: "success" } : ""))), (errors.password) ? (jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: errors.password }))) : ""] })), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Button, __assign({ type: "submit", isStretched: true, disabled: (Object.keys(errors).length) ? true : (isSubmitting) ? true : false, isPrimary: true }, { children: "Log in" }))] })) })));
-                    } }))] })) })) })); };
+var LoginForm = function (props) { return (jsxRuntime.jsx(formik.Formik, __assign({}, props, { initialValues: props.initialValues, onSubmit: props.onSubmit, validate: props.validate }, { children: function (_a) {
+        var values = _a.values, errors = _a.errors, touched = _a.touched, handleChange = _a.handleChange, handleSubmit = _a.handleSubmit, isSubmitting = _a.isSubmitting;
+        return (jsxRuntime.jsx(formik.Form, __assign({ onSubmit: handleSubmit }, { children: jsxRuntime.jsxs(Card, __assign({ isFloating: true }, { children: [jsxRuntime.jsx(Title, __assign({ style: { textAlign: "center", margin: theme.space.md } }, { children: props.title })), jsxRuntime.jsxs(Field, { children: [jsxRuntime.jsx(Input, __assign({ type: "email", name: "email", placeholder: props.placeholderEmail, onChange: handleChange, value: values.email }, touched && values.email ? touched.email = true : touched.email = false, errors && errors.email ? { validation: "error" } : (touched.email ? { validation: "success" } : ""))), (errors.email) ? (jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: errors.email }))) : ""] }), jsxRuntime.jsxs(Field, __assign({ style: { marginTop: theme.space.md } }, { children: [jsxRuntime.jsx(Input, __assign({ type: "password", name: "password", placeholder: props.placeholderPassword, onChange: handleChange, value: values.password }, touched && values.password ? touched.password = true : touched.password = false, errors && errors.password ? { validation: "error" } : (touched.password ? { validation: "success" } : ""))), (errors.password) ? (jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: errors.password }))) : ""] })), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Button, __assign({ type: "submit", isStretched: true, disabled: (Object.keys(errors).length) ? true : (isSubmitting) ? true : false, isPrimary: true }, { children: props.buttonText }))] })) })));
+    } }))); };
 
 /**
  * A Notification is a passive status update that keeps users informed of system progress.

package/build/stories/login-form/_types.d.ts

@@ -12,6 +12,10 @@ export interface LoginFormArgs {
     errors: FormikErrors<any>;
     touched: FormikTouched<any>;
     initialValues: LoginFields;
+    title: string;
+    buttonText: string;
+    placeholderEmail: string;
+    placeholderPassword: string;
 }
 export interface LoginFields {
     email: string;

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

@@ -0,0 +1,14 @@
+import { ImgHTMLAttributes } from 'react';
+export interface LogoArgs extends ImgHTMLAttributes<HTMLImageElement> {
+    /** Specifies the kind of logo */
+    type: Type;
+    /** Specifies the css class */
+    className: string;
+    /** Sets the image dimension */
+    size: number;
+}
+export declare enum Type {
+    vertical = "vertical",
+    horizontal = "horizontal",
+    icon = "icon"
+}

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

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import PropTypes from "prop-types";
+import { LogoArgs, Type } from './_types';
+/**
+ * A Logo is a visual way to represent a brand logo.
+ * <hr>
+ * Used for this:
+ *  - To visually represent a brand or product
+ *
+ * Not for this:
+ *  - To visually represent a common image
+ */
+declare const Logo: {
+    (props: LogoArgs): JSX.Element;
+    propTypes: {
+        type: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        size: PropTypes.Requireable<number>;
+    };
+    defaultProps: {
+        type: Type;
+        size: number;
+        style: {};
+        className: string;
+    };
+};
+export { Logo };

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { LogoArgs } from "./_types";
+export declare const Default: Story<LogoArgs>;
+declare const _default: ComponentMeta<{
+    (props: LogoArgs): JSX.Element;
+    propTypes: {
+        type: import("prop-types").Requireable<string>;
+        className: import("prop-types").Requireable<string>;
+        size: import("prop-types").Requireable<number>;
+    };
+    defaultProps: {
+        type: import("./_types").Type;
+        size: number;
+        style: {};
+        className: string;
+    };
+}>;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "dependencies": {
     "@zendeskgarden/react-accordions": "^8.49.0",
     "@zendeskgarden/react-avatars": "^8.49.0",