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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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"}