@bbl-digital/snorre 4.0.0-beta.6 → 4.0.0-beta.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (19) hide show
  1. package/dist/bundle.js +37 -42
  2. package/esm/core/FileInput/index.js +2 -2
  3. package/esm/core/FileInput/styles.js +15 -15
  4. package/esm/core/Input/Input.stories.js +96 -59
  5. package/esm/core/Input/index.js +4 -1
  6. package/esm/core/Input/styles.js +16 -24
  7. package/lib/core/FileInput/index.js +2 -2
  8. package/lib/core/FileInput/styles.d.ts +1 -1
  9. package/lib/core/FileInput/styles.js +15 -15
  10. package/lib/core/Input/Input.stories.d.ts +19 -50
  11. package/lib/core/Input/Input.stories.d.ts.map +1 -1
  12. package/lib/core/Input/Input.stories.js +96 -59
  13. package/lib/core/Input/index.d.ts +6 -4
  14. package/lib/core/Input/index.d.ts.map +1 -1
  15. package/lib/core/Input/index.js +4 -1
  16. package/lib/core/Input/styles.d.ts +1 -1
  17. package/lib/core/Input/styles.d.ts.map +1 -1
  18. package/lib/core/Input/styles.js +16 -24
  19. package/package.json +3 -2
package/lib/core/Input/Input.stories.js CHANGED
@@ -1,121 +1,158 @@
1
1
  import { action } from '@storybook/addon-actions';
2
2
  import Input from '.';
3
- import { jsx as _jsx } from "react/jsx-runtime";
4
- export default {
3
+ const meta = {
5
4
  title: 'Core/Input',
6
5
  component: Input
7
6
  };
7
+ export default meta;
8
8
  export const Default = {
9
- render: () => /*#__PURE__*/_jsx(Input, {
10
- type: "text",
11
- label: "Label",
12
- placeholder: "Placeholder text"
13
- }),
9
+ args: {
10
+ type: 'text',
11
+ label: 'Label',
12
+ placeholder: 'Placeholder text'
13
+ },
14
14
  name: 'Default'
15
15
  };
16
16
  export const Focused = {
17
- render: () => /*#__PURE__*/_jsx(Input, {
18
- type: "text",
19
- label: "Focused",
20
- placeholder: "Placeholder text",
17
+ args: {
18
+ type: 'text',
19
+ label: 'Focused',
20
+ placeholder: 'Placeholder text',
21
21
  focus: true
22
- }),
22
+ },
23
23
  name: 'Focused'
24
24
  };
25
25
  export const Disabled = {
26
- render: () => /*#__PURE__*/_jsx(Input, {
27
- type: "text",
28
- label: "Disabled",
29
- placeholder: "Field disabled",
26
+ args: {
27
+ type: 'text',
28
+ label: 'Disabled',
29
+ placeholder: 'Field disabled',
30
30
  disabled: true
31
- }),
31
+ },
32
32
  name: 'Disabled'
33
33
  };
34
34
  export const Passsword = {
35
- render: () => /*#__PURE__*/_jsx(Input, {
36
- type: "password",
37
- label: "Inputfield - password",
38
- placeholder: "Password field",
39
- value: "Secret password"
40
- }),
35
+ args: {
36
+ type: 'password',
37
+ label: 'Inputfield - password',
38
+ placeholder: 'Password field',
39
+ value: 'Secret password'
40
+ },
41
41
  name: 'Passsword'
42
42
  };
43
43
  export const Search = {
44
- render: () => /*#__PURE__*/_jsx(Input, {
45
- type: "search",
44
+ args: {
45
+ type: 'search',
46
46
  highlight: true,
47
- placeholder: "Placeholder text"
48
- }),
47
+ placeholder: 'Placeholder text'
48
+ },
49
49
  name: 'Search'
50
50
  };
51
51
  export const Highlighted = {
52
- render: () => /*#__PURE__*/_jsx(Input, {
53
- type: "text",
54
- placeholder: "Placeholder text",
52
+ args: {
53
+ type: 'text',
54
+ placeholder: 'Placeholder text',
55
55
  highlight: true
56
- }),
56
+ },
57
57
  name: 'Highlighted'
58
58
  };
59
59
  export const Reset = {
60
- render: () => /*#__PURE__*/_jsx(Input, {
61
- type: "text",
60
+ args: {
61
+ type: 'text',
62
62
  value: 'should be empty',
63
- placeholder: "Placeholder text",
63
+ placeholder: 'Placeholder text',
64
64
  highlight: true,
65
65
  reset: true
66
- }),
66
+ },
67
67
  name: 'Reset'
68
68
  };
69
69
  export const WithDebounce = {
70
- render: () => /*#__PURE__*/_jsx(Input, {
71
- type: "text",
72
- value: "",
70
+ args: {
71
+ type: 'text',
72
+ value: '',
73
73
  onDebounceChange: value => {
74
74
  action('debounce callback..');
75
75
  console.log('debounce callback..', value);
76
76
  },
77
- placeholder: "Placeholder text",
77
+ placeholder: 'Placeholder text',
78
78
  highlight: true,
79
79
  debounceDelay: 500
80
- }),
80
+ },
81
81
  name: 'WithDebounce'
82
82
  };
83
83
  export const WithMaxlength = {
84
- render: () => /*#__PURE__*/_jsx(Input, {
85
- type: "text",
86
- value: "",
84
+ args: {
85
+ type: 'text',
86
+ value: '',
87
87
  onChange: value => {
88
88
  action('value changed..');
89
89
  console.log('value changed..', value);
90
90
  },
91
- placeholder: "Placeholder text",
91
+ placeholder: 'Placeholder text',
92
92
  highlight: true,
93
93
  maxlength: 50
94
- }),
94
+ },
95
95
  name: 'With maxlength'
96
96
  };
97
97
  export const Format = {
98
- render: () => /*#__PURE__*/_jsx(Input, {
99
- type: "text",
100
- value: "123123123",
101
- placeholder: "Start typing a price",
98
+ args: {
99
+ type: 'text',
100
+ value: '123123123',
101
+ placeholder: 'Start typing a price',
102
102
  format: 'price'
103
- }),
103
+ },
104
104
  name: 'Format'
105
105
  };
106
106
  export const Height = {
107
- render: () => /*#__PURE__*/_jsx(Input, {
108
- type: "search",
109
- height: "50px",
107
+ args: {
108
+ type: 'search',
109
+ height: '50px',
110
110
  highlight: true
111
- }),
111
+ },
112
112
  name: 'Height'
113
113
  };
114
114
  export const Info = {
115
- render: () => /*#__PURE__*/_jsx(Input, {
116
- label: "With info",
117
- info: "Hello, this is important information",
118
- invalidMessage: "error"
119
- }),
115
+ args: {
116
+ label: 'With info',
117
+ info: 'Hello, this is important information',
118
+ invalidMessage: 'error'
119
+ },
120
120
  name: 'Info'
121
+ };
122
+ export const CardInput = {
123
+ args: {
124
+ cardInput: true,
125
+ placeholder: 'Im styled as a card',
126
+ highlight: true,
127
+ type: 'search'
128
+ },
129
+ name: 'CardInput'
130
+ };
131
+ export const Controls = {
132
+ args: {
133
+ label: 'With info',
134
+ info: 'Hello, this is important information',
135
+ invalidMessage: 'error',
136
+ value: '',
137
+ name: '',
138
+ cardInput: false,
139
+ className: '',
140
+ debounceDelay: 500,
141
+ disabled: false,
142
+ focus: false,
143
+ format: undefined,
144
+ height: '',
145
+ invalid: false,
146
+ maxlength: undefined,
147
+ highlight: false,
148
+ infoPlacement: undefined,
149
+ placeholder: 'Hello',
150
+ reset: false,
151
+ type: 'text',
152
+ onChange: action('value changed..'),
153
+ onBlur: action('on blur..'),
154
+ onDebounceChange: action('on debounce change..'),
155
+ onFocus: action('on focus..')
156
+ },
157
+ name: 'Controls'
121
158
  };
package/lib/core/Input/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /** @jsxImportSource @emotion/react */
2
2
  import React from 'react';
3
- interface IProps {
3
+ export interface InputProps {
4
4
  /** Input type */
5
5
  type?: 'text' | 'search' | 'number' | 'password' | 'file';
6
6
  /** Input label */
@@ -17,8 +17,6 @@ interface IProps {
17
17
  value?: string | number;
18
18
  /** Disabled. */
19
19
  disabled?: boolean;
20
- /** Style as big card input. */
21
- cardInput?: boolean;
22
20
  /** Callback fired when blur. */
23
21
  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
24
22
  /** Callback fired when focus. */
@@ -51,8 +49,12 @@ interface IProps {
51
49
  info?: string;
52
50
  /** Where the info tooltip will be placed relative to the button @default left */
53
51
  infoPlacement?: 'top' | 'left' | 'right' | 'bottom';
52
+ /** Styles as card */
53
+ cardInput?: boolean;
54
+ /** Add classnames */
55
+ className?: string;
54
56
  }
55
57
  export declare type Ref = HTMLInputElement;
56
- declare const Input: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLInputElement>>;
58
+ declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
57
59
  export default Input;
58
60
  //# sourceMappingURL=index.d.ts.map
package/lib/core/Input/index.d.ts.map CHANGED
@@ -1 +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"}
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,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 CHANGED
@@ -17,6 +17,8 @@ const Input = /*#__PURE__*/React.forwardRef(({
17
17
  height,
18
18
  info,
19
19
  infoPlacement = 'left',
20
+ className,
21
+ cardInput,
20
22
  ...props
21
23
  }, ref) => {
22
24
  const [value, setValueChanged] = useState(props.value ? props.value : '');
@@ -61,6 +63,7 @@ const Input = /*#__PURE__*/React.forwardRef(({
61
63
  css: styles.relative,
62
64
  children: [_jsxs("label", {
63
65
  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)],
66
+ className: className,
64
67
  children: [props.label && _jsx("span", {
65
68
  css: info && styles.pr4,
66
69
  children: props.label
@@ -78,7 +81,7 @@ const Input = /*#__PURE__*/React.forwardRef(({
78
81
  maxLength: maxlength,
79
82
  ref: ref,
80
83
  name: props.name,
81
- 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],
84
+ 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)],
82
85
  children: React.Children.map(props.children, child => {
83
86
  if (!child) {
84
87
  return null;
package/lib/core/Input/styles.d.ts CHANGED
@@ -9,7 +9,7 @@ declare const styles: {
9
9
  searchLabel: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
10
10
  file: import("@emotion/react").SerializedStyles;
11
11
  disabled: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
12
- cardInput: import("@emotion/react").SerializedStyles;
12
+ cardInput: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
13
13
  invalid: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
14
14
  height: (height: string) => import("@emotion/react").SerializedStyles;
15
15
  errorMessage: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
package/lib/core/Input/styles.d.ts.map CHANGED
@@ -1 +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"}
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;uBAMR,SAAS;qBAIX,SAAS;qBAkCT,MAAM;0BAKD,SAAS;;;;CAwBhC,CAAA;AAED,eAAe,MAAM,CAAA;AAErB,OAAO,EAAE,MAAM,EAAE,CAAA"}