@bbl-digital/snorre 4.0.0-alpha.7 → 4.0.0-beta.10

package/lib/core/Input/Input.stories.js

@@ -0,0 +1,158 @@
+import { action } from '@storybook/addon-actions';
+import Input from '.';
+const meta = {
+  title: 'Core/Input',
+  component: Input
+};
+export default meta;
+export const Default = {
+  args: {
+    type: 'text',
+    label: 'Label',
+    placeholder: 'Placeholder text'
+  },
+  name: 'Default'
+};
+export const Focused = {
+  args: {
+    type: 'text',
+    label: 'Focused',
+    placeholder: 'Placeholder text',
+    focus: true
+  },
+  name: 'Focused'
+};
+export const Disabled = {
+  args: {
+    type: 'text',
+    label: 'Disabled',
+    placeholder: 'Field disabled',
+    disabled: true
+  },
+  name: 'Disabled'
+};
+export const Passsword = {
+  args: {
+    type: 'password',
+    label: 'Inputfield - password',
+    placeholder: 'Password field',
+    value: 'Secret password'
+  },
+  name: 'Passsword'
+};
+export const Search = {
+  args: {
+    type: 'search',
+    highlight: true,
+    placeholder: 'Placeholder text'
+  },
+  name: 'Search'
+};
+export const Highlighted = {
+  args: {
+    type: 'text',
+    placeholder: 'Placeholder text',
+    highlight: true
+  },
+  name: 'Highlighted'
+};
+export const Reset = {
+  args: {
+    type: 'text',
+    value: 'should be empty',
+    placeholder: 'Placeholder text',
+    highlight: true,
+    reset: true
+  },
+  name: 'Reset'
+};
+export const WithDebounce = {
+  args: {
+    type: 'text',
+    value: '',
+    onDebounceChange: value => {
+      action('debounce callback..');
+      console.log('debounce callback..', value);
+    },
+    placeholder: 'Placeholder text',
+    highlight: true,
+    debounceDelay: 500
+  },
+  name: 'WithDebounce'
+};
+export const WithMaxlength = {
+  args: {
+    type: 'text',
+    value: '',
+    onChange: value => {
+      action('value changed..');
+      console.log('value changed..', value);
+    },
+    placeholder: 'Placeholder text',
+    highlight: true,
+    maxlength: 50
+  },
+  name: 'With maxlength'
+};
+export const Format = {
+  args: {
+    type: 'text',
+    value: '123123123',
+    placeholder: 'Start typing a price',
+    format: 'price'
+  },
+  name: 'Format'
+};
+export const Height = {
+  args: {
+    type: 'search',
+    height: '50px',
+    highlight: true
+  },
+  name: 'Height'
+};
+export const Info = {
+  args: {
+    label: 'With info',
+    info: 'Hello, this is important information',
+    invalidMessage: 'error'
+  },
+  name: 'Info'
+};
+export const CardInput = {
+  args: {
+    cardInput: true,
+    placeholder: 'Im styled as a card',
+    highlight: true,
+    type: 'search'
+  },
+  name: 'CardInput'
+};
+export const Controls = {
+  args: {
+    label: 'With info',
+    info: 'Hello, this is important information',
+    invalidMessage: 'error',
+    value: '',
+    name: '',
+    cardInput: false,
+    className: '',
+    debounceDelay: 500,
+    disabled: false,
+    focus: false,
+    format: undefined,
+    height: '',
+    invalid: false,
+    maxlength: undefined,
+    highlight: false,
+    infoPlacement: undefined,
+    placeholder: 'Hello',
+    reset: false,
+    type: 'text',
+    onChange: action('value changed..'),
+    onBlur: action('on blur..'),
+    onDebounceChange: action('on debounce change..'),
+    onFocus: action('on focus..')
+  },
+  name: 'Controls'
+};

package/lib/core/Input/index.d.ts

@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import React from 'react';
-interface IProps {
+export interface InputProps {
     /** Input type */
     type?: 'text' | 'search' | 'number' | 'password' | 'file';
     /** Input label */
@@ -17,8 +17,6 @@ interface IProps {
     value?: string | number;
     /** Disabled. */
     disabled?: boolean;
-    /** Style as big card input. */
-    cardInput?: boolean;
     /** Callback fired when blur. */
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
     /** Callback fired when focus. */
@@ -51,8 +49,12 @@ interface IProps {
     info?: string;
     /** Where the info tooltip will be placed relative to the button @default left */
     infoPlacement?: 'top' | 'left' | 'right' | 'bottom';
+    /** Styles as card */
+    cardInput?: boolean;
+    /** Add classnames */
+    className?: string;
 }
 export declare type Ref = HTMLInputElement;
-declare const Input: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLInputElement>>;
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export default Input;
 //# sourceMappingURL=index.d.ts.map

package/lib/core/Input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Input/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAmB,MAAM,OAAO,CAAA;AAUvC,UAAU,MAAM;IACd,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAA;IACzD,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mBAAmB;IACnB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gBAAgB;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gCAAgC;IAChC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACxD,iCAAiC;IACjC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACzD,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC3D,gBAAgB;IAChB,QAAQ,CAAC,EAAE,GAAG,CAAA;IACd,kDAAkD;IAClD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,gGAAgG;IAChG,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,sBAAsB;IACtB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,CAAA;IACtC,+DAA+D;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iFAAiF;IACjF,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;CACpD;AAED,oBAAY,GAAG,GAAG,gBAAgB,CAAA;AAElC,QAAA,MAAM,KAAK,iFAkHV,CAAA;AAED,eAAe,KAAK,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Input/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAmB,MAAM,OAAO,CAAA;AAUvC,MAAM,WAAW,UAAU;IACzB,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAA;IACzD,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mBAAmB;IACnB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gBAAgB;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gCAAgC;IAChC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACxD,iCAAiC;IACjC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACzD,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC3D,gBAAgB;IAChB,QAAQ,CAAC,EAAE,GAAG,CAAA;IACd,kDAAkD;IAClD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,gGAAgG;IAChG,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,sBAAsB;IACtB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,CAAA;IACtC,+DAA+D;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iFAAiF;IACjF,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;IACnD,qBAAqB;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,oBAAY,GAAG,GAAG,gBAAgB,CAAA;AAElC,QAAA,MAAM,KAAK,qFAoHV,CAAA;AAED,eAAe,KAAK,CAAA"}

package/lib/core/Input/index.js

@@ -17,55 +17,53 @@ const Input = /*#__PURE__*/React.forwardRef(({
   height,
   info,
   infoPlacement = 'left',
+  className,
+  cardInput,
   ...props
 }, ref) => {
   const [value, setValueChanged] = useState(props.value ? props.value : '');
   const [inputDirty, setInputDirty] = useState(false);
   const debouncedValue = useDebounce(value, debounceDelay ? debounceDelay : 0);
   const type = props.type ? props.type : 'text';
-
   const handleFormatting = val => {
     if (props.format === 'price' && val) {
       const value = val.replace(/\u00a0/g, '').replace(/ /g, '');
       return getFormattedPrice(value);
     }
-
     return val;
   };
-
   const onInputChange = e => {
     setInputDirty(true);
-
     if (props.format) {
       setValueChanged(handleFormatting(e.target.value));
     } else {
       setValueChanged(e.target.value);
     }
-
     if (props.onChange && !props.disabled) {
       props.onChange(e);
     }
   };
-
   useEffect(() => {
     if (props.reset) {
       setValueChanged('');
     }
-  }, [props.reset]); // Handle debounce
+  }, [props.reset]);
 
+  // Handle debounce
   useEffect(() => {
     const handleDebounceChange = value => {
       if (onDebounceChange && inputDirty) {
         onDebounceChange(value);
       }
     };
-
-    handleDebounceChange(debouncedValue); // eslint-disable-next-line react-hooks/exhaustive-deps
+    handleDebounceChange(debouncedValue);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedValue]);
   return _jsxs("div", {
     css: styles.relative,
     children: [_jsxs("label", {
       css: theme => [styles.default(theme), props.highlight && styles.highligted(height), type === 'search' && styles.searchLabel(theme), (props.invalid || props.invalidMessage) && styles.invalid(theme), height && styles.height(height)],
+      className: className,
       children: [props.label && _jsx("span", {
         css: info && styles.pr4,
         children: props.label
@@ -83,12 +81,11 @@ const Input = /*#__PURE__*/React.forwardRef(({
         maxLength: maxlength,
         ref: ref,
         name: props.name,
-        css: theme => [type === 'text' && styles.text(theme), type === 'search' && styles.search(theme), type === 'password' && styles.password(theme), type === 'number' && styles.number(theme), type === 'file' && styles.file, props.disabled && styles.disabled(theme), props.cardInput && styles.cardInput],
+        css: theme => [type === 'text' && styles.text(theme), type === 'search' && styles.search(theme), type === 'password' && styles.password(theme), type === 'number' && styles.number(theme), props.disabled && styles.disabled(theme), cardInput && styles.cardInput(theme)],
         children: React.Children.map(props.children, child => {
           if (!child) {
             return null;
           }
-
           return child;
         })
       }), type === 'search' && _jsx(IconSearch, {}), props.invalidMessage && _jsx(IconErrorOutline, {

package/lib/core/Input/styles.d.ts

@@ -9,7 +9,7 @@ declare const styles: {
     searchLabel: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
     file: import("@emotion/react").SerializedStyles;
     disabled: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
-    cardInput: import("@emotion/react").SerializedStyles;
+    cardInput: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
     invalid: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
     height: (height: string) => import("@emotion/react").SerializedStyles;
     errorMessage: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;

package/lib/core/Input/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Input/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAEjD,QAAA,MAAM,MAAM;qBACO,SAAS;;oBA4DV,SAAS;kBAKX,SAAS;sBAKL,SAAS;oBAMX,SAAS;yBAaJ,SAAS;;sBAgBZ,SAAS;;qBAeV,SAAS;qBAkCT,MAAM;0BAKD,SAAS;;;;CAwBhC,CAAA;AAED,eAAe,MAAM,CAAA;AAErB,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Input/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAEjD,QAAA,MAAM,MAAM;qBACO,SAAS;;oBA4DV,SAAS;kBAKX,SAAS;sBAKL,SAAS;oBAMX,SAAS;yBAaJ,SAAS;;sBAgBZ,SAAS;uBAMR,SAAS;qBAIX,SAAS;qBAkCT,MAAM;0BAKD,SAAS;;;;CAwBhC,CAAA;AAED,eAAe,MAAM,CAAA;AAErB,OAAO,EAAE,MAAM,EAAE,CAAA"}