@mrshmllw/smores-react 1.2.10 → 1.2.15

package/dist/ConfirmationRadioButtons/Confirmation.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+declare type ConfirmationProps = {
+    onChange(value?: boolean): void;
+    checked?: boolean;
+    id: string;
+    error?: boolean;
+    errorMsg?: string;
+    label: string;
+};
+export declare const Confirmation: FC<ConfirmationProps>;
+export {};

package/dist/ConfirmationRadioButtons/Confirmation.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import styled from 'styled-components';
+import { theme } from '../theme';
+import { Box } from '../Box';
+import { Text } from '../Text';
+import { RadioButton } from './RadioButtonStyled';
+export const Confirmation = ({ checked, onChange, id, error = false, errorMsg = '', label, }) => {
+    return (React.createElement(ConfirmationWrapper, null,
+        React.createElement(SectionHeadingText, { tag: "h3" }, label),
+        React.createElement(RadioButtonGroupWrapper, null,
+            React.createElement(RadioButtonGroup, null,
+                React.createElement(RadioButtonWrapper, { checked: checked === true, error: error },
+                    React.createElement(RadioButton, { id: id, label: "Yes", checked: checked === true, onChange: () => onChange(true), value: id })),
+                React.createElement(RadioButtonWrapper, { checked: checked === false, error: error },
+                    React.createElement(RadioButton, { id: `${id}-1`, label: "No", checked: checked === false, onChange: () => onChange(false), value: `${id}-1` }))),
+            error && React.createElement(ErrorBox, null, errorMsg))));
+};
+const RadioButtonGroupWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+`;
+const RadioButtonGroup = styled.div `
+  display: flex;
+  flex-direction: row;
+`;
+const getColor = (checked, error) => {
+    if (error) {
+        return `2px solid ${theme.colors.red7}`;
+    }
+    else if (checked) {
+        return `2px solid ${theme.colors.blue7}`;
+    }
+    else {
+        return 'none';
+    }
+};
+const RadioButtonWrapper = styled.div `
+  background-color: ${({ checked }) => !checked && `${theme.colors.bg4}`};
+  border: ${({ checked, error }) => getColor(checked, error)};
+  margin: 0px 10px;
+  width: 139px;
+  display: flex;
+  align-items: center;
+  height: 49px;
+  padding-left: 12px;
+  border-radius: 5px;
+  font-weight: bold;
+`;
+const ErrorBox = styled.span `
+  margin-top: 7px;
+  margin-left: 12px;
+  font-size: 12px;
+  color: ${theme.colors.red7};
+`;
+const ConfirmationWrapper = styled(Box) `
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+`;
+const SectionHeadingText = styled(Text) `
+  font-weight: bold;
+  padding-bottom: 8px;
+`;
+//# sourceMappingURL=Confirmation.js.map

package/dist/ConfirmationRadioButtons/Confirmation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../src/ConfirmationRadioButtons/Confirmation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAa,MAAM,qBAAqB,CAAA;AAW5D,MAAM,CAAC,MAAM,YAAY,GAA0B,CAAC,EAClD,OAAO,EACP,QAAQ,EACR,EAAE,EACF,KAAK,GAAG,KAAK,EACb,QAAQ,GAAG,EAAE,EACb,KAAK,GACa,EAAE,EAAE;IACtB,OAAO,CACL,oBAAC,mBAAmB;QAClB,oBAAC,kBAAkB,IAAC,GAAG,EAAC,IAAI,IAAE,KAAK,CAAsB;QACzD,oBAAC,uBAAuB;YACtB,oBAAC,gBAAgB;gBACf,oBAAC,kBAAkB,IAAC,OAAO,EAAE,OAAO,KAAK,IAAI,EAAE,KAAK,EAAE,KAAK;oBACzD,oBAAC,WAAW,IACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAC,KAAK,EACX,OAAO,EAAE,OAAO,KAAK,IAAI,EACzB,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAC9B,KAAK,EAAE,EAAE,GACT,CACiB;gBACrB,oBAAC,kBAAkB,IAAC,OAAO,EAAE,OAAO,KAAK,KAAK,EAAE,KAAK,EAAE,KAAK;oBAC1D,oBAAC,WAAW,IACV,EAAE,EAAE,GAAG,EAAE,IAAI,EACb,KAAK,EAAC,IAAI,EACV,OAAO,EAAE,OAAO,KAAK,KAAK,EAC1B,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC/B,KAAK,EAAE,GAAG,EAAE,IAAI,GAChB,CACiB,CACJ;YAClB,KAAK,IAAI,oBAAC,QAAQ,QAAE,QAAQ,CAAY,CACjB,CACN,CACvB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGzC,CAAA;AAED,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGlC,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,OAAiB,EAAE,KAAe,EAAE,EAAE;IACtD,IAAI,KAAK,EAAE;QACT,OAAO,aAAa,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,CAAA;KACxC;SAAM,IAAI,OAAO,EAAE;QAClB,OAAO,aAAa,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;KACzC;SAAM;QACL,OAAO,MAAM,CAAA;KACd;AACH,CAAC,CAAA;AAED,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAW;sBAC1B,CAAC,EAAE,OAAO,EAAa,EAAE,EAAE,CAC7C,CAAC,OAAO,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,EAAE;YACzB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAa,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC;;;;;;;;;CAStE,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAA;;;;WAIjB,KAAK,CAAC,MAAM,CAAC,IAAI;CAC3B,CAAA;AAED,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;CAGtC,CAAA;AAED,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;CAGtC,CAAA"}

package/dist/ConfirmationRadioButtons/Confirmation.stories.d.ts

@@ -0,0 +1,14 @@
+declare namespace _default {
+    export const title: string;
+    export { Confirmation as component };
+    export namespace argTypes {
+        namespace onChange {
+            const action: string;
+        }
+    }
+}
+export default _default;
+export const Default: any;
+export const WithError: any;
+export const WorkingExample: any;
+import { Confirmation } from "./Confirmation";

package/dist/ConfirmationRadioButtons/Confirmation.stories.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Confirmation } from './Confirmation';
+import { Container } from './Container';
+export default {
+    title: 'Confirmation Radio Buttons',
+    component: Confirmation,
+    argTypes: { onChange: { action: 'clicked' } },
+};
+const Template = (args) => React.createElement(Confirmation, Object.assign({}, args));
+export const Default = Template.bind({});
+Default.args = {
+    id: 'radioButton',
+    onChange: () => { },
+    checked: false,
+    label: 'Do you like marshmallows?',
+};
+export const WithError = Template.bind({});
+WithError.args = {
+    id: 'radioButton',
+    onChange: () => { },
+    checked: undefined,
+    label: 'Do you like marshmallows?',
+    error: true,
+    errorMsg: 'This field is required.',
+};
+const ContainerTemplate = (args) => React.createElement(Container, Object.assign({}, args));
+export const WorkingExample = ContainerTemplate.bind({});
+//# sourceMappingURL=Confirmation.stories.js.map

package/dist/ConfirmationRadioButtons/Confirmation.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Confirmation.stories.js","sourceRoot":"","sources":["../../src/ConfirmationRadioButtons/Confirmation.stories.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,eAAe;IACb,KAAK,EAAE,4BAA4B;IACnC,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE,EAAE,QAAQ,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,YAAY,oBAAK,IAAI,EAAI,CAAA;AAErD,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,EAAE,EAAE,aAAa;IACjB,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;IAClB,OAAO,EAAE,KAAK;IACd,KAAK,EAAE,2BAA2B;CACnC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,SAAS,CAAC,IAAI,GAAG;IACf,EAAE,EAAE,aAAa;IACjB,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;IAClB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,2BAA2B;IAClC,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,yBAAyB;CACpC,CAAA;AAED,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,SAAS,oBAAK,IAAI,EAAI,CAAA;AAE3D,MAAM,CAAC,MAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}

package/dist/ConfirmationRadioButtons/Container.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Container: () => JSX.Element;

package/dist/ConfirmationRadioButtons/Container.js

@@ -0,0 +1,8 @@
+import React, { useState } from 'react';
+import { Confirmation } from './Confirmation';
+export const Container = () => {
+    const [checked, setChecked] = useState(undefined);
+    return (React.createElement("form", null,
+        React.createElement(Confirmation, { id: "radioButton", onChange: (selection) => setChecked(selection), checked: checked, label: 'Do you like marshmallows?', error: checked === undefined, errorMsg: "This field is required." })));
+};
+//# sourceMappingURL=Container.js.map

package/dist/ConfirmationRadioButtons/Container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.js","sourceRoot":"","sources":["../../src/ConfirmationRadioButtons/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAsB,SAAS,CAAC,CAAA;IAEtE,OAAO,CACL;QACE,oBAAC,YAAY,IACX,EAAE,EAAC,aAAa,EAChB,QAAQ,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,EAC9C,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,2BAA2B,EAClC,KAAK,EAAE,OAAO,KAAK,SAAS,EAC5B,QAAQ,EAAC,yBAAyB,GAClC,CACG,CACR,CAAA;AACH,CAAC,CAAA"}

package/dist/ConfirmationRadioButtons/RadioButtonStyled.d.ts

@@ -0,0 +1,14 @@
+import { FC, ChangeEvent } from 'react';
+export interface FakeInput {
+    checked?: boolean;
+    error?: boolean;
+}
+declare type RadioButtonProps = {
+    id: string;
+    label: string;
+    checked?: boolean;
+    value: string;
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+};
+export declare const RadioButton: FC<RadioButtonProps>;
+export {};

package/dist/ConfirmationRadioButtons/RadioButtonStyled.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import styled from 'styled-components';
+import { theme } from '../theme';
+import { Box } from '../Box';
+export const RadioButton = ({ id, label, checked, value, onChange, }) => (React.createElement(Box, { flex: true, alignItems: "center" },
+    React.createElement(RadioInput, { id: id, type: "radio", checked: checked, value: value, onChange: onChange }),
+    React.createElement(RadioLabel, { htmlFor: id },
+        React.createElement(FakeInput, { checked: checked }),
+        React.createElement(Text, null, label))));
+const FakeInput = styled.div `
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: ${theme.colors.white};
+  margin-right: 10px;
+  border: ${({ checked }) => checked
+    ? `8px solid ${theme.colors.blue7}`
+    : `1px solid ${theme.colors.blue7}`};
+`;
+const RadioInput = styled.input `
+  position: absolute;
+  opacity: 0;
+  height: 0;
+  width: 0;
+`;
+const RadioLabel = styled.label `
+  font-family: 'Gordita', sans-serif;
+  text-transform: none;
+  font-size: 16px;
+  line-height: 17px;
+  color: ${theme.colors.blue7};
+  margin-bottom: 0;
+  display: flex;
+  cursor: pointer;
+`;
+// needed because the text is top aligned in its viewbox
+const Text = styled.span `
+  position: relative;
+  bottom: -5px;
+`;
+//# sourceMappingURL=RadioButtonStyled.js.map

package/dist/ConfirmationRadioButtons/RadioButtonStyled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonStyled.js","sourceRoot":"","sources":["../../src/ConfirmationRadioButtons/RadioButtonStyled.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAA;AAC9C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAe5B,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAChD,EAAE,EACF,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,GACS,EAAE,EAAE,CAAC,CACtB,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ;IAC3B,oBAAC,UAAU,IACT,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,GAClB;IACF,oBAAC,UAAU,IAAC,OAAO,EAAE,EAAE;QACrB,oBAAC,SAAS,IAAC,OAAO,EAAE,OAAO,GAAI;QAC/B,oBAAC,IAAI,QAAE,KAAK,CAAQ,CACT,CACT,CACP,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAW;;;;sBAIjB,KAAK,CAAC,MAAM,CAAC,KAAK;;YAE5B,CAAC,EAAE,OAAO,EAAa,EAAE,EAAE,CACnC,OAAO;IACL,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE;IACnC,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE;CACxC,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;CAK9B,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;WAKpB,KAAK,CAAC,MAAM,CAAC,KAAK;;;;CAI5B,CAAA;AAED,wDAAwD;AACxD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;;;CAGvB,CAAA"}

package/dist/ConfirmationRadioButtons/__tests__/Confirmation.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ConfirmationRadioButtons/__tests__/Confirmation.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Confirmation } from '../Confirmation';
+test('renders', () => {
+    const { container } = render(React.createElement(Confirmation, null));
+    expect(container.firstChild).toMatchSnapshot();
+});
+//# sourceMappingURL=Confirmation.js.map

package/dist/ConfirmationRadioButtons/__tests__/Confirmation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../../src/ConfirmationRadioButtons/__tests__/Confirmation.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAE/C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE;IACnB,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,YAAY,OAAG,CAAC,CAAA;IAC9C,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAA;AAChD,CAAC,CAAC,CAAA"}

package/dist/ConfirmationRadioButtons/index.d.ts

@@ -0,0 +1 @@
+export { Confirmation } from './Confirmation';

package/dist/ConfirmationRadioButtons/index.js

@@ -0,0 +1,2 @@
+export { Confirmation } from './Confirmation';
+//# sourceMappingURL=index.js.map

package/dist/ConfirmationRadioButtons/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ConfirmationRadioButtons/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/Dropdown/Dropdown.d.ts

@@ -1,19 +1,29 @@
-import { FC } from 'react';
+import { FC, FormEvent, RefObject } from 'react';
 export declare type DropdownItem = {
     label: string;
     value: string;
 };
-declare type Props = {
+declare type DefaultProps = {
     /** ID, usually used for tests  */
     id: string;
     /** className attribute to apply classes from props */
     className?: string;
-    /** label displayed above the dropdown  */
-    label?: string;
+    /** ref attribute for select input */
+    ref?: RefObject<HTMLSelectElement>;
     /** Placeholder (initial state) */
     placeholder?: string;
+    /** label displayed above the dropdown  */
+    label?: string;
+    /** used for label - input connection */
+    name?: string;
+    /** input value */
+    value: string;
     /** Default value */
     defaultValue?: string;
+    /** conditionally renders error message below dropdown */
+    error?: boolean;
+    /** error message to be displayed */
+    errorMsg?: string;
     /** Disabled flag */
     disabled?: boolean;
     /** list of items for the dropdown list */
@@ -22,6 +32,19 @@ declare type Props = {
     onSelect: (element: string) => void;
     /** Displays border */
     outlined?: boolean;
+    /** onBlur listener */
+    onBlur?: (e: FormEvent<HTMLSelectElement>) => void;
+};
+/** on change or on input required */
+declare type TruncateProps = {
+    /** on change is required and on input optional */
+    onSelect: (e: string) => void;
+    onInputChange?: (e: FormEvent<HTMLSelectElement>) => void;
+} | {
+    /** on input is required and on change optional */
+    onSelect?: (e: string) => void;
+    onInputChange: (e: FormEvent<HTMLSelectElement>) => void;
 };
+declare type Props = DefaultProps & TruncateProps;
 export declare const Dropdown: FC<Props>;
 export {};

package/dist/Dropdown/Dropdown.js

@@ -4,7 +4,7 @@ import { Text } from '../Text';
 import { Icon } from '../Icon';
 import { Box } from '../Box';
 import { theme } from '../theme';
-export const Dropdown = ({ id, className = '', label, placeholder, defaultValue, disabled = false, list, onSelect, outlined = false, }) => {
+export const Dropdown = ({ id, className = '', ref, label, placeholder, name, value, defaultValue, disabled = false, list, onSelect, outlined = false, error = false, errorMsg = '', onInputChange, onBlur, }) => {
     const [key, setKey] = useState('');
     useEffect(() => {
         if (list.length === 1) {
@@ -22,12 +22,16 @@ export const Dropdown = ({ id, className = '', label, placeholder, defaultValue,
                     : defaultValue
                         ? defaultValue
                         : placeholder, disabled: disabled || list.length < 1, onChange: (e) => {
-                    onSelect(e.currentTarget.value);
-                }, required: true, outlined: outlined },
+                    onSelect && onSelect(e.currentTarget.value);
+                    onInputChange && onInputChange(e);
+                }, required: true, outlined: outlined, error: error, ref: ref, onBlur: (e) => {
+                    onBlur && onBlur(e);
+                }, name: name, value: value },
                 React.createElement("option", { value: "", hidden: true }, placeholder),
                 list.map((el, i) => (React.createElement("option", { key: i, value: el.value }, el.label)))),
             React.createElement(Caret, { outlined: outlined },
-                React.createElement(Icon, { render: "caret", color: "grey4", size: 24 })))));
+                React.createElement(Icon, { render: "caret", color: "grey4", size: 24 }))),
+        error && React.createElement(ErrorBox, null, errorMsg)));
 };
 const Container = styled.div `
   display: flex;
@@ -41,6 +45,17 @@ const Content = styled.div `
   width: 100%;
   position: relative;
 `;
+const getErrorOutline = (outlined, error) => {
+    if (error && outlined) {
+        return `border: 2px solid ${theme.colors.red7}`;
+    }
+    else if (error && !outlined) {
+        return `border-bottom: 2px solid ${theme.colors.red7}`;
+    }
+    else {
+        return;
+    }
+};
 const Select = styled.select `
   width: 100%;
   height: 32px;
@@ -61,6 +76,7 @@ const Select = styled.select `
     box-sizing: border-box;
     height: auto;
   `}
+  ${({ error, outlined }) => getErrorOutline(outlined, error)};
 
   &:disabled {
     cursor: not-allowed;
@@ -88,4 +104,9 @@ const Caret = styled.div `
   pointer-events: none;
   transform: translateY(-50%);
 `;
+const ErrorBox = styled.span `
+  margin-top: 7px;
+  font-size: 12px;
+  color: ${theme.colors.red7};
+`;
 //# sourceMappingURL=Dropdown.js.map

package/dist/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../src/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../src/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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"}

package/dist/Dropdown/Dropdown.stories.d.ts

@@ -14,5 +14,7 @@ export const Disabled: any;
 export const SingleListItem: any;
 export const EmptyList: any;
 export const WithOutline: any;
+export const OutlineWithError: any;
+export const WithError: any;
 export const DateSelectorExample: any;
 import { Dropdown } from "./Dropdown";

package/dist/Dropdown/Dropdown.stories.js

@@ -77,6 +77,26 @@ WithOutline.args = {
     placeholder: 'Select Day',
     outlined: true,
 };
+export const OutlineWithError = Template.bind({});
+OutlineWithError.args = {
+    id: 'days',
+    list: days,
+    placeholder: 'Select',
+    outlined: true,
+    error: true,
+    errorMsg: 'This field is required',
+    label: 'Select day',
+};
+export const WithError = Template.bind({});
+WithError.args = {
+    id: 'days',
+    list: days,
+    placeholder: 'Select',
+    outlined: false,
+    error: true,
+    errorMsg: 'This field is required',
+    label: 'Select day',
+};
 const DateSelectorExampleTemplate = (args) => React.createElement(Container, Object.assign({}, args));
 export const DateSelectorExample = DateSelectorExampleTemplate.bind({});
 DateSelectorExample.args = {};

package/dist/Dropdown/Dropdown.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.stories.js","sourceRoot":"","sources":["../../src/Dropdown/Dropdown.stories.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,MAAM,IAAI,GAAG;IACX;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;KAChB;IACD;QACE,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;KACjB;IACD;QACE,KAAK,EAAE,WAAW;QAClB,KAAK,EAAE,WAAW;KACnB;IACD;QACE,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,UAAU;KAClB;IACD;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;KAChB;IACD;QACE,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,UAAU;KAClB;IACD;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;KAChB;CACF,CAAA;AAED,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE,EAAE,QAAQ,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE;CAC/C,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,QAAQ,oBAAK,IAAI,EAAI,CAAA;AAEjD,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,EAAE,EAAE,MAAM;IACV,IAAI,EAAE,IAAI;IACV,WAAW,EAAE,YAAY;CAC1B,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,SAAS,CAAC,IAAI,GAAG;IACf,EAAE,EAAE,MAAM;IACV,IAAI,EAAE,IAAI;IACV,WAAW,EAAE,YAAY;IACzB,KAAK,EAAE,KAAK;IACZ,QAAQ,EAAE,KAAK;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEzC,QAAQ,CAAC,IAAI,GAAG;IACd,EAAE,EAAE,MAAM;IACV,IAAI,EAAE,IAAI;IACV,WAAW,EAAE,YAAY;IACzB,QAAQ,EAAE,IAAI;CACf,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE/C,cAAc,CAAC,IAAI,GAAG;IACpB,EAAE,EAAE,MAAM;IACV,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;IACtB,WAAW,EAAE,YAAY;CAC1B,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,SAAS,CAAC,IAAI,GAAG;IACf,EAAE,EAAE,MAAM;IACV,IAAI,EAAE,EAAE;IACR,WAAW,EAAE,YAAY;CAC1B,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE5C,WAAW,CAAC,IAAI,GAAG;IACjB,EAAE,EAAE,MAAM;IACV,IAAI,EAAE,IAAI;IACV,WAAW,EAAE,YAAY;IACzB,QAAQ,EAAE,IAAI;CACf,CAAA;AAED,MAAM,2BAA2B,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,SAAS,oBAAK,IAAI,EAAI,CAAA;AAErE,MAAM,CAAC,MAAM,mBAAmB,GAAG,2BAA2B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEvE,mBAAmB,CAAC,IAAI,GAAG,EAAE,CAAA"}
+{"version":3,"file":"Dropdown.stories.js","sourceRoot":"","sources":["../../src/Dropdown/Dropdown.stories.js"],"names":[],"mappings":"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"}

package/dist/Textarea/Textarea.d.ts

@@ -1,9 +1,11 @@
-import { FC } from 'react';
+import { FC, FormEvent, RefObject } from 'react';
 declare type TextareaProps = {
     /** ID, usually used for tests  */
     id: string;
     /** className attribute to apply classses from props */
     className?: string;
+    /** ref attribute for input */
+    ref?: RefObject<HTMLTextAreaElement>;
     /** Placeholder */
     placeholder?: string;
     /** label displayed above the input  */
@@ -18,12 +20,25 @@ declare type TextareaProps = {
     errorMsg?: string;
     /** Allow user to resize the textarea vertically and horizontally or not */
     resize?: 'none' | 'both';
-    /** onChange listener */
-    onChange: (e: string) => void;
     /** Disabled flag */
     disabled?: boolean;
     /** maxLength property */
     maxLength?: number;
+    /** onBlur listener */
+    onBlur?: (e: FormEvent<HTMLTextAreaElement>) => void;
+    /** number of rows of input */
+    rows?: number;
+};
+/** on change or on input required */
+declare type TruncateProps = {
+    /** on change is required and on input optional */
+    onChange: (e: string) => void;
+    onInputChange?: (e: FormEvent<HTMLTextAreaElement>) => void;
+} | {
+    /** on input is required and on change optional */
+    onChange?: (e: string) => void;
+    onInputChange: (e: FormEvent<HTMLTextAreaElement>) => void;
 };
-export declare const Textarea: FC<TextareaProps>;
+declare type Props = TextareaProps & TruncateProps;
+export declare const Textarea: FC<Props>;
 export {};

package/dist/Textarea/Textarea.js

@@ -3,11 +3,16 @@ import styled from 'styled-components';
 import { Text } from '../Text';
 import { Box } from '../Box';
 import { theme } from '../theme';
-export const Textarea = ({ id, name, label, value, onChange, className, resize = 'none', error = false, errorMsg, placeholder, disabled = false, maxLength, }) => (React.createElement(Box, { flex: true, direction: "column", className: className },
+export const Textarea = ({ id, name, label, value, onChange, onInputChange, className, resize = 'none', error = false, errorMsg, placeholder, disabled = false, maxLength, onBlur, ref, rows = 4, }) => (React.createElement(Box, { flex: true, direction: "column", className: className },
     label && (React.createElement(Box, { mb: "4px" },
         React.createElement(Text, { tag: "label", color: "grey8", typo: "label" }, label))),
     React.createElement(Box, { flex: true, direction: "column" },
-        React.createElement(Field, { error: error, id: id, name: name, disabled: disabled, resize: resize, placeholder: placeholder, value: value, onChange: (e) => onChange(e.currentTarget.value), maxLength: maxLength })),
+        React.createElement(Field, { error: error, id: id, name: name, disabled: disabled, resize: resize, placeholder: placeholder, value: value, onChange: (e) => {
+                onChange && onChange(e.currentTarget.value);
+                onInputChange && onInputChange(e);
+            }, maxLength: maxLength, ref: ref, onBlur: (e) => {
+                onBlur && onBlur(e);
+            }, rows: rows })),
     error && React.createElement(ErrorBox, null, errorMsg)));
 const Field = styled.textarea `
   font-size: 16px;

package/dist/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAE5B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AA6BhC,MAAM,CAAC,MAAM,QAAQ,GAAsB,CAAC,EAC1C,EAAE,EACF,IAAI,EACJ,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAS,EACT,MAAM,GAAG,MAAM,EACf,KAAK,GAAG,KAAK,EACb,QAAQ,EACR,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,SAAS,GACV,EAAE,EAAE,CAAC,CACJ,oBAAC,GAAG,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,EAAE,SAAS;IAC9C,KAAK,IAAI,CACR,oBAAC,GAAG,IAAC,EAAE,EAAC,KAAK;QACX,oBAAC,IAAI,IAAC,GAAG,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IACzC,KAAK,CACD,CACH,CACP;IAED,oBAAC,GAAG,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ;QAC1B,oBAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAiC,EAAE,EAAE,CAC9C,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,EAEjC,SAAS,EAAE,SAAS,GACpB,CACE;IACL,KAAK,IAAI,oBAAC,QAAQ,QAAE,QAAQ,CAAY,CACrC,CACP,CAAA;AASD,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAW;;;gBAGxB,KAAK,CAAC,MAAM,CAAC,KAAK;sBACZ,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;WAK7B,KAAK,CAAC,MAAM,CAAC,KAAK;YACjB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;YACtB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC;aACpD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;kBACrC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC;;;;;;oBAMxD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC;;;IAG1E,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACd,KAAK;IACL,KAAK,IAAI,EAAE;IACX;sBACkB,KAAK,CAAC,MAAM,CAAC,KAAK;KACnC;CACJ,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAA;;;WAGjB,KAAK,CAAC,MAAM,CAAC,IAAI;CAC3B,CAAA"}
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export * from './Card';
 export * from './CheckBox';
 export * from './CheckBoxGroup';
 export * from './Chip';
+export * from './ConfirmationRadioButtons';
 export * from './Datepicker';
 export * from './Dropdown';
 export * from './Emoji';

package/dist/index.js

@@ -6,6 +6,7 @@ export * from './Card';
 export * from './CheckBox';
 export * from './CheckBoxGroup';
 export * from './Chip';
+export * from './ConfirmationRadioButtons';
 export * from './Datepicker';
 export * from './Dropdown';
 export * from './Emoji';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,OAAO,CAAA;AACrB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,QAAQ,CAAA;AACtB,cAAc,4BAA4B,CAAA;AAC1C,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,OAAO,CAAA;AACrB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrshmllw/smores-react",
-  "version": "1.2.10",
+  "version": "1.2.15",
   "main": "./dist/index.js",
   "description": "Collection of React components used by Marshmallow Technology",
   "keywords": [
@@ -50,7 +50,7 @@
     "babel-loader": "^8.1.0",
     "eslint": "^7.9.0",
     "eslint-config-prettier": "^8.2.0",
-    "eslint-plugin-jest": "^24.0.2",
+    "eslint-plugin-jest": "^25.0.1",
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.1.2",
     "husky": "^7.0.0",