@bbl-digital/snorre 4.0.0-beta.5 → 4.0.0-beta.7

package/esm/core/Input/Input.stories.js

@@ -1,121 +1,158 @@
 import { action } from '@storybook/addon-actions';
 import Input from '.';
-import { jsx as _jsx } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/Input',
   component: Input
 };
+export default meta;
 export const Default = {
-  render: () => /*#__PURE__*/_jsx(Input, {
-    type: "text",
-    label: "Label",
-    placeholder: "Placeholder text"
-  }),
+  args: {
+    type: 'text',
+    label: 'Label',
+    placeholder: 'Placeholder text'
+  },
   name: 'Default'
 };
 export const Focused = {
-  render: () => /*#__PURE__*/_jsx(Input, {
-    type: "text",
-    label: "Focused",
-    placeholder: "Placeholder text",
+  args: {
+    type: 'text',
+    label: 'Focused',
+    placeholder: 'Placeholder text',
     focus: true
-  }),
+  },
   name: 'Focused'
 };
 export const Disabled = {
-  render: () => /*#__PURE__*/_jsx(Input, {
-    type: "text",
-    label: "Disabled",
-    placeholder: "Field disabled",
+  args: {
+    type: 'text',
+    label: 'Disabled',
+    placeholder: 'Field disabled',
     disabled: true
-  }),
+  },
   name: 'Disabled'
 };
 export const Passsword = {
-  render: () => /*#__PURE__*/_jsx(Input, {
-    type: "password",
-    label: "Inputfield - password",
-    placeholder: "Password field",
-    value: "Secret password"
-  }),
+  args: {
+    type: 'password',
+    label: 'Inputfield - password',
+    placeholder: 'Password field',
+    value: 'Secret password'
+  },
   name: 'Passsword'
 };
 export const Search = {
-  render: () => /*#__PURE__*/_jsx(Input, {
-    type: "search",
+  args: {
+    type: 'search',
     highlight: true,
-    placeholder: "Placeholder text"
-  }),
+    placeholder: 'Placeholder text'
+  },
   name: 'Search'
 };
 export const Highlighted = {
-  render: () => /*#__PURE__*/_jsx(Input, {
-    type: "text",
-    placeholder: "Placeholder text",
+  args: {
+    type: 'text',
+    placeholder: 'Placeholder text',
     highlight: true
-  }),
+  },
   name: 'Highlighted'
 };
 export const Reset = {
-  render: () => /*#__PURE__*/_jsx(Input, {
-    type: "text",
+  args: {
+    type: 'text',
     value: 'should be empty',
-    placeholder: "Placeholder text",
+    placeholder: 'Placeholder text',
     highlight: true,
     reset: true
-  }),
+  },
   name: 'Reset'
 };
 export const WithDebounce = {
-  render: () => /*#__PURE__*/_jsx(Input, {
-    type: "text",
-    value: "",
+  args: {
+    type: 'text',
+    value: '',
     onDebounceChange: value => {
       action('debounce callback..');
       console.log('debounce callback..', value);
     },
-    placeholder: "Placeholder text",
+    placeholder: 'Placeholder text',
     highlight: true,
     debounceDelay: 500
-  }),
+  },
   name: 'WithDebounce'
 };
 export const WithMaxlength = {
-  render: () => /*#__PURE__*/_jsx(Input, {
-    type: "text",
-    value: "",
+  args: {
+    type: 'text',
+    value: '',
     onChange: value => {
       action('value changed..');
       console.log('value changed..', value);
     },
-    placeholder: "Placeholder text",
+    placeholder: 'Placeholder text',
     highlight: true,
     maxlength: 50
-  }),
+  },
   name: 'With maxlength'
 };
 export const Format = {
-  render: () => /*#__PURE__*/_jsx(Input, {
-    type: "text",
-    value: "123123123",
-    placeholder: "Start typing a price",
+  args: {
+    type: 'text',
+    value: '123123123',
+    placeholder: 'Start typing a price',
     format: 'price'
-  }),
+  },
   name: 'Format'
 };
 export const Height = {
-  render: () => /*#__PURE__*/_jsx(Input, {
-    type: "search",
-    height: "50px",
+  args: {
+    type: 'search',
+    height: '50px',
     highlight: true
-  }),
+  },
   name: 'Height'
 };
 export const Info = {
-  render: () => /*#__PURE__*/_jsx(Input, {
-    label: "With info",
-    info: "Hello, this is important information",
-    invalidMessage: "error"
-  }),
+  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/esm/core/Input/index.js

@@ -17,6 +17,8 @@ const Input = /*#__PURE__*/React.forwardRef(({
   height,
   info,
   infoPlacement = 'left',
+  className,
+  cardInput,
   ...props
 }, ref) => {
   const [value, setValueChanged] = useState(props.value ? props.value : '');
@@ -61,6 +63,7 @@ const Input = /*#__PURE__*/React.forwardRef(({
     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
@@ -78,7 +81,7 @@ 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;