@bbl-digital/snorre 4.2.29 → 4.2.31

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

@@ -1,11 +1,18 @@
-import { action } from '@storybook/addon-actions';
-import Input from '.';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithMaxlength = exports.WithDebounce = exports.Stealth = exports.Search = exports.Reset = exports.Passsword = exports.InvalidNoLabel = exports.Invalid = exports.Info = exports.Highlighted = exports.Height = exports.FormattedNumberOnly = exports.Format = exports.Focused = exports.Disabled = exports.Default = exports.Controls = exports.CardInput = void 0;
+var _addonActions = require("@storybook/addon-actions");
+var _ = _interopRequireDefault(require("."));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
   title: 'Core/Input',
-  component: Input
+  component: _.default
 };
-export default meta;
-export const Default = {
+var _default = exports.default = meta;
+const Default = exports.Default = {
   args: {
     type: 'text',
     label: 'Label',
@@ -13,7 +20,7 @@ export const Default = {
   },
   name: 'Default'
 };
-export const Focused = {
+const Focused = exports.Focused = {
   args: {
     type: 'text',
     label: 'Focused',
@@ -22,7 +29,7 @@ export const Focused = {
   },
   name: 'Focused'
 };
-export const Stealth = {
+const Stealth = exports.Stealth = {
   args: {
     type: 'stealth',
     label: 'Stealth',
@@ -30,7 +37,7 @@ export const Stealth = {
   },
   name: 'Stealth'
 };
-export const Disabled = {
+const Disabled = exports.Disabled = {
   args: {
     type: 'text',
     label: 'Disabled',
@@ -39,7 +46,7 @@ export const Disabled = {
   },
   name: 'Disabled'
 };
-export const Passsword = {
+const Passsword = exports.Passsword = {
   args: {
     type: 'password',
     label: 'Inputfield - password',
@@ -48,7 +55,7 @@ export const Passsword = {
   },
   name: 'Passsword'
 };
-export const Search = {
+const Search = exports.Search = {
   args: {
     type: 'search',
     highlight: true,
@@ -57,7 +64,7 @@ export const Search = {
   },
   name: 'Search'
 };
-export const Highlighted = {
+const Highlighted = exports.Highlighted = {
   args: {
     type: 'text',
     placeholder: 'Placeholder text',
@@ -65,7 +72,7 @@ export const Highlighted = {
   },
   name: 'Highlighted'
 };
-export const Reset = {
+const Reset = exports.Reset = {
   args: {
     type: 'text',
     value: 'should be empty',
@@ -75,12 +82,12 @@ export const Reset = {
   },
   name: 'Reset'
 };
-export const WithDebounce = {
+const WithDebounce = exports.WithDebounce = {
   args: {
     type: 'text',
     value: '',
     onDebounceChange: value => {
-      action('debounce callback..');
+      (0, _addonActions.action)('debounce callback..');
       console.log('debounce callback..', value);
     },
     placeholder: 'Placeholder text',
@@ -89,12 +96,12 @@ export const WithDebounce = {
   },
   name: 'WithDebounce'
 };
-export const WithMaxlength = {
+const WithMaxlength = exports.WithMaxlength = {
   args: {
     type: 'text',
     value: '',
     onChange: value => {
-      action('value changed..');
+      (0, _addonActions.action)('value changed..');
       console.log('value changed..', value);
     },
     placeholder: 'Placeholder text',
@@ -103,7 +110,7 @@ export const WithMaxlength = {
   },
   name: 'With maxlength'
 };
-export const Format = {
+const Format = exports.Format = {
   args: {
     type: 'text',
     value: '900',
@@ -113,7 +120,7 @@ export const Format = {
   },
   name: 'Format'
 };
-export const Height = {
+const Height = exports.Height = {
   args: {
     type: 'search',
     height: '50px',
@@ -121,7 +128,7 @@ export const Height = {
   },
   name: 'Height'
 };
-export const Info = {
+const Info = exports.Info = {
   args: {
     label: 'With info',
     info: 'Hello, this is important information',
@@ -129,7 +136,7 @@ export const Info = {
   },
   name: 'Info'
 };
-export const CardInput = {
+const CardInput = exports.CardInput = {
   args: {
     cardInput: true,
     placeholder: 'Im styled as a card',
@@ -138,7 +145,7 @@ export const CardInput = {
   },
   name: 'CardInput'
 };
-export const Invalid = {
+const Invalid = exports.Invalid = {
   args: {
     label: 'Invalid',
     invalid: true,
@@ -146,14 +153,14 @@ export const Invalid = {
   },
   name: 'Invalid'
 };
-export const InvalidNoLabel = {
+const InvalidNoLabel = exports.InvalidNoLabel = {
   args: {
     invalid: true,
     invalidMessage: 'error'
   },
   name: 'Invalid no label'
 };
-export const Controls = {
+const Controls = exports.Controls = {
   args: {
     label: 'With info',
     info: 'Hello, this is important information',
@@ -174,14 +181,14 @@ export const Controls = {
     placeholder: 'Hello',
     reset: false,
     type: 'text',
-    onChange: action('value changed..'),
-    onBlur: action('on blur..'),
-    onDebounceChange: action('on debounce change..'),
-    onFocus: action('on focus..')
+    onChange: (0, _addonActions.action)('value changed..'),
+    onBlur: (0, _addonActions.action)('on blur..'),
+    onDebounceChange: (0, _addonActions.action)('on debounce change..'),
+    onFocus: (0, _addonActions.action)('on focus..')
   },
   name: 'Controls'
 };
-export const FormattedNumberOnly = {
+const FormattedNumberOnly = exports.FormattedNumberOnly = {
   args: {
     type: 'text',
     label: 'Label',

package/lib/core/Input/index.js

@@ -1,15 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styles = require("./styles");
+var _IconSearch = _interopRequireDefault(require("../../icons/General/IconSearch"));
+var _debounce = require("../utils/debounce");
+var _format = require("../../utils/format");
+var _IconErrorOutline = _interopRequireDefault(require("../../icons/General/IconErrorOutline"));
+var _InfoButton = _interopRequireDefault(require("../InfoButton"));
+var _IconHelp = _interopRequireDefault(require("../../icons/General/IconHelp"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /** @jsxImportSource @emotion/react */
-import React, { useState } from 'react';
-import { styles } from './styles';
-import IconSearch from '../../icons/General/IconSearch';
-import { useEffect } from 'react';
-import { useDebounce } from '../utils/debounce';
-import { getFormattedPrice } from '../../utils/format';
-import IconErrorOutline from '../../icons/General/IconErrorOutline';
-import InfoButton from '../InfoButton';
-import IconHelp from '../../icons/General/IconHelp';
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-const Input = /*#__PURE__*/React.forwardRef(({
+
+const Input = /*#__PURE__*/_react.default.forwardRef(({
   onDebounceChange,
   debounceDelay,
   maxlength,
@@ -24,14 +33,14 @@ const Input = /*#__PURE__*/React.forwardRef(({
   updateValueOnChange = false,
   ...props
 }, ref) => {
-  const [value, setValueChanged] = useState(props.value ? variant === 'formattedNumber' ? props.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ') : props.value : '');
-  const [inputDirty, setInputDirty] = useState(false);
-  const debouncedValue = useDebounce(value, debounceDelay ? debounceDelay : 0);
+  const [value, setValueChanged] = (0, _react.useState)(props.value ? variant === 'formattedNumber' ? props.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ') : props.value : '');
+  const [inputDirty, setInputDirty] = (0, _react.useState)(false);
+  const debouncedValue = (0, _debounce.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 (0, _format.getFormattedPrice)(value);
     }
     return val;
   };
@@ -67,19 +76,19 @@ const Input = /*#__PURE__*/React.forwardRef(({
     }
     props.onFocus && props.onFocus(e);
   };
-  useEffect(() => {
+  (0, _react.useEffect)(() => {
     if (props.reset) {
       setValueChanged('');
     }
   }, [props.reset]);
-  useEffect(() => {
+  (0, _react.useEffect)(() => {
     if (props.value && updateValueOnChange) {
       if (variant === 'formattedNumber') setValueChanged(handleNumberOnlyFormatting(props.value));else setValueChanged(props.value);
     }
   }, [props.value]);
 
   // Handle debounce
-  useEffect(() => {
+  (0, _react.useEffect)(() => {
     const handleDebounceChange = value => {
       if (onDebounceChange && inputDirty) {
         onDebounceChange(value);
@@ -88,18 +97,18 @@ const Input = /*#__PURE__*/React.forwardRef(({
     handleDebounceChange(debouncedValue);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedValue]);
-  return _jsxs("div", {
-    css: styles.relative,
-    children: [_jsxs("label", {
+  return (0, _jsxRuntime.jsxs)("div", {
+    css: _styles.styles.relative,
+    children: [(0, _jsxRuntime.jsxs)("label", {
       htmlFor: props.id,
-      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)],
+      css: theme => [_styles.styles.default(theme), props.highlight && _styles.styles.highligted(height), type === 'search' && _styles.styles.searchLabel(theme), (props.invalid || props.invalidMessage) && _styles.styles.invalid(theme), height && _styles.styles.height(height)],
       className: className,
-      children: [props.label && _jsx("span", {
-        css: info && styles.pr4,
+      children: [props.label && (0, _jsxRuntime.jsx)("span", {
+        css: info && _styles.styles.pr4,
         children: props.label
-      }), _jsxs("div", {
-        css: theme => [styles.inputWrapper(theme)],
-        children: [_jsx("input", {
+      }), (0, _jsxRuntime.jsxs)("div", {
+        css: theme => [_styles.styles.inputWrapper(theme)],
+        children: [(0, _jsxRuntime.jsx)("input", {
           id: props.id,
           type: type === 'stealth' ? 'number' : type,
           ...(type !== 'password' && {
@@ -115,26 +124,26 @@ const Input = /*#__PURE__*/React.forwardRef(({
           ref: ref,
           name: props.name,
           "aria-describedby": props.invalidMessage ? 'input-error-message' : undefined,
-          css: theme => [type === 'text' && styles.text(theme), type === 'search' && styles.search(theme), type === 'password' && styles.password(theme), type === 'number' && styles.number(theme), type === 'stealth' && styles.stealth(theme), props.disabled && styles.disabled(theme), cardInput && styles.cardInput(theme)],
+          css: theme => [type === 'text' && _styles.styles.text(theme), type === 'search' && _styles.styles.search(theme), type === 'password' && _styles.styles.password(theme), type === 'number' && _styles.styles.number(theme), type === 'stealth' && _styles.styles.stealth(theme), props.disabled && _styles.styles.disabled(theme), cardInput && _styles.styles.cardInput(theme)],
           autoComplete: autoComplete,
-          children: React.Children.map(props.children, child => {
+          children: _react.default.Children.map(props.children, child => {
             if (!child) {
               return null;
             }
             return child;
           })
-        }), type === 'search' && _jsx(IconSearch, {})]
-      }), props.invalidMessage && _jsx(IconErrorOutline, {
+        }), type === 'search' && (0, _jsxRuntime.jsx)(_IconSearch.default, {})]
+      }), props.invalidMessage && (0, _jsxRuntime.jsx)(_IconErrorOutline.default, {
         size: "16px"
-      }), props.invalidMessage && _jsx("span", {
+      }), props.invalidMessage && (0, _jsxRuntime.jsx)("span", {
         id: "input-error-message",
-        css: theme => [styles.errorMessage(theme), !props?.label && styles.errorMessageNoLabel],
+        css: theme => [_styles.styles.errorMessage(theme), !props?.label && _styles.styles.errorMessageNoLabel],
         children: props.invalidMessage
       })]
-    }), info && _jsx("span", {
-      css: styles.infoButton,
-      children: _jsx(InfoButton, {
-        icon: _jsx(IconHelp, {
+    }), info && (0, _jsxRuntime.jsx)("span", {
+      css: _styles.styles.infoButton,
+      children: (0, _jsxRuntime.jsx)(_InfoButton.default, {
+        icon: (0, _jsxRuntime.jsx)(_IconHelp.default, {
           primary: true
         }),
         place: infoPlacement,
@@ -143,4 +152,4 @@ const Input = /*#__PURE__*/React.forwardRef(({
     })]
   });
 });
-export default Input;
+var _default = exports.default = Input;