@otto-de/b2b-core-components 1.6.0 → 1.7.0

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 (191) hide show
  1. package/dist/b2b-core-components/b2b-core-components.esm.js +1 -1
  2. package/dist/b2b-core-components/icons/b2b_icon-error-hint.svg +3 -0
  3. package/dist/b2b-core-components/p-03e21565.entry.js +1 -0
  4. package/dist/b2b-core-components/p-1c0df04b.entry.js +1 -0
  5. package/dist/b2b-core-components/p-1dc70300.js +1 -0
  6. package/dist/b2b-core-components/{p-a50ea33f.entry.js → p-33e66446.entry.js} +1 -1
  7. package/dist/b2b-core-components/{p-90a3ffed.entry.js → p-7a879329.entry.js} +1 -1
  8. package/dist/b2b-core-components/p-8bad814b.entry.js +1 -0
  9. package/dist/b2b-core-components/{p-db7d2ec3.entry.js → p-98b563a9.entry.js} +1 -1
  10. package/dist/b2b-core-components/p-9c0e419e.entry.js +1 -0
  11. package/dist/b2b-core-components/p-c60253d2.entry.js +1 -0
  12. package/dist/b2b-core-components/p-c885a630.entry.js +1 -0
  13. package/dist/b2b-core-components/p-cf0999e2.entry.js +1 -0
  14. package/dist/b2b-core-components/p-e31915cf.entry.js +1 -0
  15. package/dist/b2b-core-components/{p-0beabdb4.entry.js → p-f8ed569f.entry.js} +1 -1
  16. package/dist/cjs/b2b-breadcrumb-item.cjs.entry.js +40 -0
  17. package/dist/cjs/b2b-breadcrumb.cjs.entry.js +34 -0
  18. package/dist/cjs/b2b-button_2.cjs.entry.js +1 -1
  19. package/dist/cjs/b2b-checkbox_3.cjs.entry.js +24 -8
  20. package/dist/cjs/b2b-chip-component.cjs.entry.js +37 -0
  21. package/dist/cjs/b2b-core-components.cjs.js +1 -1
  22. package/dist/cjs/b2b-dropdown.cjs.entry.js +2 -2
  23. package/dist/cjs/b2b-icon.cjs.entry.js +1 -0
  24. package/dist/cjs/b2b-tab-group.cjs.entry.js +3 -1
  25. package/dist/cjs/b2b-table-row.cjs.entry.js +5 -8
  26. package/dist/cjs/b2b-table-rowgroup.cjs.entry.js +1 -1
  27. package/dist/cjs/b2b-table.cjs.entry.js +1 -1
  28. package/dist/cjs/b2b-textarea.cjs.entry.js +2 -1
  29. package/dist/cjs/index-04e07a00.js +12 -0
  30. package/dist/cjs/loader.cjs.js +1 -1
  31. package/dist/cjs/{table.types-00c8228a.js → table.types-196dc690.js} +6 -0
  32. package/dist/collection/collection-manifest.json +3 -0
  33. package/dist/collection/components/alert/alert.css +2 -2
  34. package/dist/collection/components/alert/alert.stories.js +1 -8
  35. package/dist/collection/components/anchor/anchor.css +2 -2
  36. package/dist/collection/components/anchor/anchor.stories.js +0 -6
  37. package/dist/collection/components/breadcrumb/breadcrumb-item.js +123 -0
  38. package/dist/collection/components/breadcrumb/breadcrumb.css +250 -0
  39. package/dist/collection/components/breadcrumb/breadcrumb.e2e.js +50 -0
  40. package/dist/collection/components/breadcrumb/breadcrumb.js +66 -0
  41. package/dist/collection/components/breadcrumb/breadcrumb.stories.js +22 -0
  42. package/dist/collection/components/button/button.css +10 -6
  43. package/dist/collection/components/button/button.stories.js +136 -80
  44. package/dist/collection/components/card/card.css +2 -2
  45. package/dist/collection/components/card/card.stories.js +0 -6
  46. package/dist/collection/components/checkbox/checkbox.css +5 -5
  47. package/dist/collection/components/checkbox/checkbox.js +1 -1
  48. package/dist/collection/components/checkbox/checkbox.stories.js +0 -6
  49. package/dist/collection/components/checkbox-group/checkbox-group.css +2 -2
  50. package/dist/collection/components/checkbox-group/checkbox-group.stories.js +0 -6
  51. package/dist/collection/components/chip/chip.css +249 -0
  52. package/dist/collection/components/chip/chip.e2e.js +19 -0
  53. package/dist/collection/components/chip/chip.js +134 -0
  54. package/dist/collection/components/chip/chip.stories.js +30 -0
  55. package/dist/collection/components/dropdown/dropdown.css +2 -2
  56. package/dist/collection/components/dropdown/dropdown.js +2 -2
  57. package/dist/collection/components/dropdown/dropdown.stories.js +0 -6
  58. package/dist/collection/components/grid/grid.stories.js +0 -4
  59. package/dist/collection/components/headline/headline.css +2 -2
  60. package/dist/collection/components/headline/headline.stories.js +0 -6
  61. package/dist/collection/components/icon/icon.css +2 -2
  62. package/dist/collection/components/icon/icon.js +1 -1
  63. package/dist/collection/components/icon/icon.stories.js +0 -6
  64. package/dist/collection/components/icon/icons/b2b_icon-error-hint.svg +3 -0
  65. package/dist/collection/components/icon/types.js +1 -0
  66. package/dist/collection/components/input/input.css +2 -2
  67. package/dist/collection/components/input/input.stories.js +124 -75
  68. package/dist/collection/components/input-group/input-group.css +2 -2
  69. package/dist/collection/components/input-group/input-group.stories.js +0 -6
  70. package/dist/collection/components/input-list/input-list.css +2 -2
  71. package/dist/collection/components/input-list/input-list.stories.js +74 -58
  72. package/dist/collection/components/label/label.css +2 -2
  73. package/dist/collection/components/label/label.stories.js +0 -6
  74. package/dist/collection/components/modal/modal.css +2 -2
  75. package/dist/collection/components/modal/modal.stories.js +1 -7
  76. package/dist/collection/components/pagination/pagination.css +2 -2
  77. package/dist/collection/components/pagination/pagination.stories.js +0 -4
  78. package/dist/collection/components/paragraph/paragraph.css +2 -2
  79. package/dist/collection/components/paragraph/paragraph.stories.js +0 -9
  80. package/dist/collection/components/radio/radio.css +2 -2
  81. package/dist/collection/components/radio/radio.stories.js +0 -6
  82. package/dist/collection/components/radio-group/radio-group.css +2 -2
  83. package/dist/collection/components/radio-group/radio-group.stories.js +0 -6
  84. package/dist/collection/components/required-separator/required-separator.css +2 -2
  85. package/dist/collection/components/required-separator/required-separator.stories.js +0 -6
  86. package/dist/collection/components/rounded-icon/rounded-icon.css +2 -2
  87. package/dist/collection/components/rounded-icon/rounded-icon.stories.js +0 -4
  88. package/dist/collection/components/scrollable-container/scrollable-container.css +2 -2
  89. package/dist/collection/components/scrollable-container/scrollable-container.stories.js +0 -4
  90. package/dist/collection/components/search/search.stories.js +2 -8
  91. package/dist/collection/components/separator/separator.css +2 -2
  92. package/dist/collection/components/separator/separator.stories.js +0 -6
  93. package/dist/collection/components/spinner/spinner.css +2 -2
  94. package/dist/collection/components/spinner/spinner.stories.js +0 -6
  95. package/dist/collection/components/tab/tab.css +2 -2
  96. package/dist/collection/components/tab-group/tab-group.e2e.js +1 -0
  97. package/dist/collection/components/tab-group/tab-group.js +3 -1
  98. package/dist/collection/components/tab-group/tab-group.stories.js +0 -6
  99. package/dist/collection/components/tab-panel/tab-panel.css +2 -2
  100. package/dist/collection/components/table/stories.data.js +4 -26
  101. package/dist/collection/components/table/table-cell/table-cell.css +2 -2
  102. package/dist/collection/components/table/table-header/table-header.css +27 -4
  103. package/dist/collection/components/table/table-header/table-header.js +46 -6
  104. package/dist/collection/components/table/table-row/table-row.css +2 -2
  105. package/dist/collection/components/table/table-row/table-row.js +4 -7
  106. package/dist/collection/components/table/table-rowgroup/table-rowgroup.css +2 -2
  107. package/dist/collection/components/table/table.css +2 -2
  108. package/dist/collection/components/table/table.e2e.js +7 -3
  109. package/dist/collection/components/table/table.stories.js +334 -275
  110. package/dist/collection/components/textarea/textarea.css +2 -2
  111. package/dist/collection/components/textarea/textarea.js +19 -1
  112. package/dist/collection/components/textarea/textarea.stories.js +5 -7
  113. package/dist/collection/components/toggle-button/toggle-button.css +2 -2
  114. package/dist/collection/components/toggle-group/toggle-group.css +2 -2
  115. package/dist/collection/components/toggle-group/toggle-group.stories.js +0 -6
  116. package/dist/collection/components/tooltip/tooltip.css +2 -2
  117. package/dist/collection/components/tooltip/tooltip.stories.js +1 -7
  118. package/dist/collection/components/wizard/wizard.css +2 -2
  119. package/dist/collection/components/wizard/wizard.stories.js +0 -4
  120. package/dist/collection/components/wizard-icon/wizard-icon.css +2 -2
  121. package/dist/collection/components/wizard-icon/wizard-icon.stories.js +9 -7
  122. package/dist/collection/docs/tokens/color.stories.js +1 -5
  123. package/dist/collection/docs/tokens/font.stories.js +1 -6
  124. package/dist/collection/docs/tokens/size.stories.js +1 -5
  125. package/dist/collection/utils/types/table.types.js +5 -0
  126. package/dist/components/b2b-breadcrumb-item.d.ts +11 -0
  127. package/dist/components/b2b-breadcrumb-item.js +58 -0
  128. package/dist/components/b2b-breadcrumb.d.ts +11 -0
  129. package/dist/components/b2b-breadcrumb.js +48 -0
  130. package/dist/components/b2b-chip-component.d.ts +11 -0
  131. package/dist/components/b2b-chip-component.js +56 -0
  132. package/dist/components/b2b-dropdown.js +2 -2
  133. package/dist/components/b2b-tab-group.js +3 -1
  134. package/dist/components/b2b-table-row.js +4 -7
  135. package/dist/components/b2b-textarea.js +4 -2
  136. package/dist/components/button.js +1 -1
  137. package/dist/components/checkbox.js +2 -2
  138. package/dist/components/icon.js +1 -0
  139. package/dist/components/table-header.js +25 -7
  140. package/dist/components/table.types.js +6 -1
  141. package/dist/custom-elements.json +76 -0
  142. package/dist/esm/b2b-breadcrumb-item.entry.js +36 -0
  143. package/dist/esm/b2b-breadcrumb.entry.js +30 -0
  144. package/dist/esm/b2b-button_2.entry.js +1 -1
  145. package/dist/esm/b2b-checkbox_3.entry.js +24 -8
  146. package/dist/esm/b2b-chip-component.entry.js +33 -0
  147. package/dist/esm/b2b-core-components.js +1 -1
  148. package/dist/esm/b2b-dropdown.entry.js +2 -2
  149. package/dist/esm/b2b-icon.entry.js +1 -0
  150. package/dist/esm/b2b-tab-group.entry.js +3 -1
  151. package/dist/esm/b2b-table-row.entry.js +5 -8
  152. package/dist/esm/b2b-table-rowgroup.entry.js +1 -1
  153. package/dist/esm/b2b-table.entry.js +1 -1
  154. package/dist/esm/b2b-textarea.entry.js +2 -1
  155. package/dist/esm/index-dfdbf4b9.js +12 -0
  156. package/dist/esm/loader.js +1 -1
  157. package/dist/esm/{table.types-dd829d83.js → table.types-46c5a83a.js} +6 -1
  158. package/{loader → dist/loader}/cdn.js +1 -1
  159. package/{loader → dist/loader}/index.cjs.js +1 -1
  160. package/{loader → dist/loader}/index.d.ts +1 -1
  161. package/dist/loader/index.es2017.js +3 -0
  162. package/{loader → dist/loader}/index.js +2 -2
  163. package/dist/types/components/breadcrumb/breadcrumb-item.d.ts +15 -0
  164. package/dist/types/components/breadcrumb/breadcrumb.d.ts +11 -0
  165. package/dist/types/components/breadcrumb/breadcrumb.stories.d.ts +4 -0
  166. package/dist/types/components/button/button.stories.d.ts +14 -12
  167. package/dist/types/components/chip/chip.d.ts +17 -0
  168. package/dist/types/components/chip/chip.stories.d.ts +6 -0
  169. package/dist/types/components/icon/types.d.ts +1 -1
  170. package/dist/types/components/input/input.stories.d.ts +14 -13
  171. package/dist/types/components/input-list/input-list.stories.d.ts +8 -7
  172. package/dist/types/components/paragraph/paragraph.stories.d.ts +0 -1
  173. package/dist/types/components/table/stories.data.d.ts +3 -3
  174. package/dist/types/components/table/table-header/table-header.d.ts +5 -2
  175. package/dist/types/components/table/table.stories.d.ts +18 -16
  176. package/dist/types/components/textarea/textarea.d.ts +2 -0
  177. package/dist/types/components/textarea/textarea.stories.d.ts +1 -0
  178. package/dist/types/components.d.ts +135 -4
  179. package/dist/types/utils/interfaces/form.interface.d.ts +3 -0
  180. package/dist/types/utils/interfaces/interaction.interface.d.ts +4 -0
  181. package/dist/types/utils/types/table.types.d.ts +6 -0
  182. package/dist/web-types.json +149 -3
  183. package/package.json +26 -21
  184. package/dist/b2b-core-components/p-01fd54a1.entry.js +0 -1
  185. package/dist/b2b-core-components/p-06aa96a8.entry.js +0 -1
  186. package/dist/b2b-core-components/p-077217b3.entry.js +0 -1
  187. package/dist/b2b-core-components/p-163466cf.entry.js +0 -1
  188. package/dist/b2b-core-components/p-34eb99cb.js +0 -1
  189. package/dist/b2b-core-components/p-d7bb8aa1.entry.js +0 -1
  190. package/loader/index.es2017.js +0 -3
  191. /package/{loader → dist/loader}/package.json +0 -0
@@ -1,84 +1,133 @@
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s)
4
+ if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
5
+ t[p] = s[p];
6
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
7
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
8
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
9
+ t[p[i]] = s[p[i]];
10
+ }
11
+ return t;
12
+ };
1
13
  import { html } from 'lit-html';
2
- import inputDocs from './input.docs.mdx';
3
14
  import { getArgTypes } from '../../docs/config/utils';
4
- const Template = ({ label, required, type, disabled, placeholder, value, hint, error, autofocus, invalid, iconMarkup, }) => {
5
- const defaultLabel = label ? label : 'Input Label';
6
- const defaultType = type ? type : 'text';
7
- return html `<div style="width: 400px;">
15
+ const meta = {
16
+ title: 'Components/Form/Input',
17
+ component: 'b2b-input',
18
+ args: {
19
+ label: 'Label',
20
+ required: false,
21
+ type: 'text',
22
+ disabled: false,
23
+ placeholder: '',
24
+ value: '',
25
+ hint: '',
26
+ error: '',
27
+ autofocus: false,
28
+ invalid: false,
29
+ },
30
+ argTypes: getArgTypes('b2b-input'),
31
+ render: (_a) => {
32
+ var args = __rest(_a, []);
33
+ return html `<div style="width: 400px;">
8
34
  <b2b-input
9
- label="${defaultLabel}"
10
- required="${required}"
11
- type="${defaultType}"
12
- disabled="${disabled}"
13
- placeholder="${placeholder}"
14
- value="${value}"
15
- hint="${hint}"
16
- error="${error}"
17
- autofocus="${autofocus}"
18
- invalid=${invalid}
19
- >${iconMarkup}</b2b-input
20
- >
35
+ label="${args.label}"
36
+ required="${args.required}"
37
+ type="${args.defaultType}"
38
+ disabled="${args.disabled}"
39
+ placeholder="${args.placeholder}"
40
+ value="${args.value}"
41
+ hint="${args.hint}"
42
+ error="${args.error}"
43
+ autofocus="${args.autofocus}"
44
+ invalid=${args.invalid}></b2b-input>
21
45
  </div>`;
46
+ },
22
47
  };
23
- const defaultArgs = {
24
- label: 'Label',
25
- required: false,
26
- type: 'text',
27
- disabled: false,
28
- placeholder: '',
29
- value: '',
30
- hint: '',
31
- error: '',
32
- autofocus: false,
33
- invalid: false,
48
+ export default meta;
49
+ export const Default = {
50
+ args: Object.assign(Object.assign({}, meta.args), { label: 'Default Input' }),
34
51
  };
35
- export const story010Default = Template.bind({});
36
- story010Default.args = Object.assign(Object.assign({}, defaultArgs), { label: 'Default Input' });
37
- story010Default.storyName = 'Default';
38
- export const story020Placeholder = Template.bind({});
39
- story020Placeholder.args = Object.assign(Object.assign({}, defaultArgs), { label: 'Input with Placeholder', placeholder: 'This is a placeholder' });
40
- story020Placeholder.storyName = 'Placeholder';
41
- export const story030Disabled = Template.bind({});
42
- story030Disabled.args = Object.assign(Object.assign({}, defaultArgs), { label: 'Disabled Input', disabled: true });
43
- story030Disabled.storyName = 'Disabled';
44
- export const story040Hint = Template.bind({});
45
- story040Hint.args = Object.assign(Object.assign({}, defaultArgs), { label: 'Input with hint', hint: 'This is a hint' });
46
- story040Hint.storyName = 'Hint';
47
- export const story050Error = Template.bind({});
48
- story050Error.args = Object.assign(Object.assign({}, defaultArgs), { label: 'Input with an error', error: 'This is an error', invalid: true });
49
- story050Error.storyName = 'Error';
50
- export const story055Required = Template.bind({});
51
- story055Required.args = Object.assign(Object.assign({}, defaultArgs), { label: 'Required input', required: true });
52
- story055Required.storyName = 'Required';
53
- export const story060IconEnd = Template.bind({});
54
- const icon = html `<b2b-icon icon="b2b_icon-search" slot="end"></b2b-icon>`;
55
- story060IconEnd.args = Object.assign(Object.assign({}, defaultArgs), { iconMarkup: icon });
56
- story060IconEnd.storyName = 'Input with Icon';
57
- export const story080Prefix = Template.bind({});
58
- const prefix = html `<span slot="start">Registration Number</span>`;
59
- story080Prefix.args = Object.assign(Object.assign({}, defaultArgs), { iconMarkup: prefix });
60
- story080Prefix.storyName = 'Input with Prefix';
61
- export const story090PrefixSuffix = Template.bind({});
62
- const suffix = html `<span slot="start">Registration Number</span
63
- ><b2b-icon icon="b2b_icon-search" slot="end"></b2b-icon>`;
64
- story090PrefixSuffix.args = Object.assign(Object.assign({}, defaultArgs), { iconMarkup: suffix });
65
- story090PrefixSuffix.storyName = 'Input with Prefix and Icon';
66
- export const story070AllArgs = Template.bind({});
67
- story070AllArgs.args = Object.assign(Object.assign({}, defaultArgs), { label: 'Input with all arguments', required: true, placeholder: 'All arguments placeholder', value: 'an initial value', hint: 'This is a hint for an every argument specified input', error: 'This is an error so you will not see the hint', disabled: false, autofocus: false });
68
- story070AllArgs.storyName = 'All arguments specified';
69
- const controls = {
70
- type: 'radio',
52
+ export const Placeholder = {
53
+ args: Object.assign(Object.assign({}, meta.args), { label: 'Input with Placeholder', placeholder: 'This is a placeholder' }),
71
54
  };
72
- const inputArgs = getArgTypes('b2b-input', controls);
73
- export default {
74
- title: 'Components/Form/Input',
75
- argTypes: Object.assign(Object.assign({}, inputArgs), { iconMarkup: {
76
- control: false,
77
- } }),
78
- viewMode: 'docs',
79
- parameters: {
80
- docs: {
81
- page: inputDocs,
82
- },
55
+ export const Disabled = {
56
+ args: Object.assign(Object.assign({}, meta.args), { label: 'Disabled Input', disabled: true }),
57
+ };
58
+ export const Hint = {
59
+ args: Object.assign(Object.assign({}, meta.args), { label: 'Input with hint', hint: 'This is a hint' }),
60
+ };
61
+ export const Error = {
62
+ args: Object.assign(Object.assign({}, meta.args), { label: 'Input with an error', error: 'This is an error', invalid: true }),
63
+ };
64
+ export const Required = {
65
+ args: Object.assign(Object.assign({}, meta.args), { label: 'Required input', required: true }),
66
+ };
67
+ export const IconEnd = {
68
+ args: Object.assign(Object.assign({}, meta.args), { label: 'Default Input' }),
69
+ render: (_a) => {
70
+ var args = __rest(_a, []);
71
+ return html `<div style="width: 400px;">
72
+ <b2b-input
73
+ label="${args.label}"
74
+ required="${args.required}"
75
+ type="${args.type}"
76
+ disabled="${args.disabled}"
77
+ placeholder="${args.placeholder}"
78
+ value="${args.value}"
79
+ hint="${args.hint}"
80
+ error="${args.error}"
81
+ autofocus="${args.autofocus}"
82
+ invalid=${args.invalid}
83
+ ><b2b-icon icon="b2b_icon-search" slot="end"></b2b-icon
84
+ ></b2b-input>
85
+ </div>`;
86
+ },
87
+ };
88
+ export const Prefix = {
89
+ args: Object.assign(Object.assign({}, meta.args), { label: 'Default Input' }),
90
+ render: (_a) => {
91
+ var args = __rest(_a, []);
92
+ return html `<div style="width: 400px;">
93
+ <b2b-input
94
+ label="${args.label}"
95
+ required="${args.required}"
96
+ type="${args.type}"
97
+ disabled="${args.disabled}"
98
+ placeholder="${args.placeholder}"
99
+ value="${args.value}"
100
+ hint="${args.hint}"
101
+ error="${args.error}"
102
+ autofocus="${args.autofocus}"
103
+ invalid=${args.invalid}
104
+ ><span slot="start">Registration Number</span></b2b-input
105
+ >
106
+ </div>`;
83
107
  },
84
108
  };
109
+ export const PrefixAndSuffix = {
110
+ args: Object.assign(Object.assign({}, meta.args), { label: 'Default Input' }),
111
+ render: (_a) => {
112
+ var args = __rest(_a, []);
113
+ return html `<div style="width: 400px;">
114
+ <b2b-input
115
+ label="${args.label}"
116
+ required="${args.required}"
117
+ type="${args.type}"
118
+ disabled="${args.disabled}"
119
+ placeholder="${args.placeholder}"
120
+ value="${args.value}"
121
+ hint="${args.hint}"
122
+ error="${args.error}"
123
+ autofocus="${args.autofocus}"
124
+ invalid=${args.invalid}
125
+ ><span slot="start">Registration Number</span
126
+ ><b2b-icon icon="b2b_icon-search" slot="end"></b2b-icon
127
+ ></b2b-input>
128
+ </div>`;
129
+ },
130
+ };
131
+ export const AllPropertiesSpecified = {
132
+ args: Object.assign(Object.assign({}, meta.args), { label: 'Input with all arguments', required: true, placeholder: 'All arguments placeholder', value: 'an initial value', hint: 'This is a hint for an every argument specified input', error: 'This is an error so you will not see the hint', disabled: false, autofocus: false }),
133
+ };
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
3
+ * Generated on Thu, 26 Oct 2023 14:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
122
122
  }
123
123
  /**
124
124
  * Do not edit directly
125
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
125
+ * Generated on Thu, 26 Oct 2023 14:16:22 GMT
126
126
  */
127
127
  :root [data-theme="dark"] {
128
128
  --b2b-size-200: 5rem; /* 80px */
@@ -1,5 +1,4 @@
1
1
  import { html } from 'lit-html';
2
- import inputGroupDocs from './input-group.docs.mdx';
3
2
  import { getArgTypes } from '../../docs/config/utils';
4
3
  const Template = ({ invalid, disabled, error, hint, additionalSlot, }) => {
5
4
  return additionalSlot
@@ -55,9 +54,4 @@ export default {
55
54
  control: false,
56
55
  } }),
57
56
  viewMode: 'docs',
58
- parameters: {
59
- docs: {
60
- page: inputGroupDocs,
61
- },
62
- },
63
57
  };
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
3
+ * Generated on Thu, 26 Oct 2023 14:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
122
122
  }
123
123
  /**
124
124
  * Do not edit directly
125
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
125
+ * Generated on Thu, 26 Oct 2023 14:16:22 GMT
126
126
  */
127
127
  :root [data-theme="dark"] {
128
128
  --b2b-size-200: 5rem; /* 80px */
@@ -1,69 +1,85 @@
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s)
4
+ if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
5
+ t[p] = s[p];
6
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
7
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
8
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
9
+ t[p[i]] = s[p[i]];
10
+ }
11
+ return t;
12
+ };
1
13
  import { getArgTypes } from '../../docs/config/utils';
2
14
  import { html } from 'lit-html';
3
- import inputListDocs from './input-list.docs.mdx';
4
15
  import { userEvent } from '@storybook/testing-library';
5
- const Template = ({ label, required, placeholder, optionsList, customMarkup, disabled, }) => {
6
- return html `<div style="height: 130px; width: 300px">
16
+ const meta = {
17
+ title: 'Components/Form/Input List',
18
+ component: 'b2b-input-list',
19
+ args: {
20
+ label: '',
21
+ required: false,
22
+ placeholder: 'Search here',
23
+ optionsList: ['option1', 'option2', 'option3'],
24
+ disabled: false,
25
+ },
26
+ argTypes: getArgTypes('b2b-input-list'),
27
+ render: (_a) => {
28
+ var args = __rest(_a, []);
29
+ return html `<div style="height: 130px; width: 300px">
7
30
  <b2b-input-list
8
31
  data-testid="element"
9
- label="${label}"
10
- required="${required}"
11
- placeholder="${placeholder}"
12
- disabled="${disabled}"
13
- .optionsList=${optionsList}
14
- >${customMarkup}</b2b-input-list
15
- >
32
+ label="${args.label}"
33
+ required="${args.required}"
34
+ placeholder="${args.placeholder}"
35
+ disabled="${args.disabled}"
36
+ .optionsList=${args.optionsList}></b2b-input-list>
16
37
  </div>`;
38
+ },
39
+ };
40
+ export default meta;
41
+ export const InputList = {
42
+ args: Object.assign({}, meta.args),
17
43
  };
18
- const defaultArgs = {
19
- label: '',
20
- required: false,
21
- placeholder: 'Search here',
22
- optionsList: ['option1', 'option2', 'option3'],
23
- disabled: false,
44
+ export const Focused = {
45
+ args: Object.assign({}, meta.args),
46
+ play: async ({ canvasElement }) => {
47
+ setTimeout(async () => {
48
+ var _a, _b;
49
+ const inputList = await canvasElement.querySelector('b2b-input-list');
50
+ const b2bInput = (_a = inputList.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('b2b-input');
51
+ const input = (_b = b2bInput === null || b2bInput === void 0 ? void 0 : b2bInput.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
52
+ userEvent.type(input, 'op');
53
+ }, 500);
54
+ },
24
55
  };
25
- export const story010InputList = Template.bind({});
26
- story010InputList.args = Object.assign({}, defaultArgs);
27
- story010InputList.storyName = 'Input List';
28
- export const story020InputListFocused = Template.bind({});
29
- story020InputListFocused.args = Object.assign({}, defaultArgs);
30
- story020InputListFocused.storyName = 'Focused';
31
- export const story025InputListDisabled = Template.bind({});
32
- story025InputListDisabled.args = Object.assign(Object.assign({}, defaultArgs), { disabled: true });
33
- story025InputListDisabled.storyName = 'Disabled';
34
- export const story030CustomList = Template.bind({});
35
- const list = html `<ul>
36
- <li>Option 1</li>
37
- <li>
38
- Option 2
39
- <ul>
40
- <li>Option 2.1</li>
41
- <li>Option 2.2</li>
42
- </ul>
43
- </li>
44
- <li>Option 3</li>
45
- </ul>`;
46
- story030CustomList.args = Object.assign(Object.assign({}, defaultArgs), { optionsList: [], customMarkup: list });
47
- story030CustomList.storyName = 'Custom List Content';
48
- story020InputListFocused.play = async ({ canvasElement }) => {
49
- setTimeout(async () => {
50
- var _a, _b;
51
- const inputList = await canvasElement.querySelector('b2b-input-list');
52
- const b2bInput = (_a = inputList.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('b2b-input');
53
- const input = (_b = b2bInput === null || b2bInput === void 0 ? void 0 : b2bInput.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
54
- userEvent.type(input, 'op');
55
- }, 500);
56
+ export const Disabled = {
57
+ args: Object.assign(Object.assign({}, meta.args), { disabled: true }),
56
58
  };
57
- const controls = {};
58
- const searchArgs = getArgTypes('b2b-input-list', controls);
59
- export default {
60
- title: 'Components/Form/Input List',
61
- argTypes: Object.assign({}, searchArgs),
62
- viewmode: 'docs',
63
- parameters: {
64
- controls: { expanded: true },
65
- docs: {
66
- page: inputListDocs,
67
- },
59
+ export const CustomList = {
60
+ args: Object.assign({}, meta.args),
61
+ render: (_a) => {
62
+ var args = __rest(_a, []);
63
+ return html `<div style="height: 130px; width: 300px">
64
+ <b2b-input-list
65
+ data-testid="element"
66
+ label="${args.label}"
67
+ required="${args.required}"
68
+ placeholder="${args.placeholder}"
69
+ disabled="${args.disabled}"
70
+ .optionsList=${args.optionsList}
71
+ ><ul>
72
+ <li>Option 1</li>
73
+ <li>
74
+ Option 2
75
+ <ul>
76
+ <li>Option 2.1</li>
77
+ <li>Option 2.2</li>
78
+ </ul>
79
+ </li>
80
+ <li>Option 3</li>
81
+ </ul></b2b-input-list
82
+ >
83
+ </div>`;
68
84
  },
69
85
  };
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
3
+ * Generated on Thu, 26 Oct 2023 14:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
122
122
  }
123
123
  /**
124
124
  * Do not edit directly
125
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
125
+ * Generated on Thu, 26 Oct 2023 14:16:22 GMT
126
126
  */
127
127
  :root [data-theme="dark"] {
128
128
  --b2b-size-200: 5rem; /* 80px */
@@ -1,5 +1,4 @@
1
1
  import { html } from 'lit-html';
2
- import docs from './label.docs.mdx';
3
2
  import { getArgTypes } from '../../docs/config/utils';
4
3
  const Template = ({ type }) => {
5
4
  return html `<b2b-label type="${type}">Label</b2b-label>`;
@@ -27,9 +26,4 @@ export default {
27
26
  title: 'Components/Status & Feedback/Label',
28
27
  argTypes: argTypes,
29
28
  viewMode: 'docs',
30
- parameters: {
31
- docs: {
32
- page: docs,
33
- },
34
- },
35
29
  };
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
3
+ * Generated on Thu, 26 Oct 2023 14:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
122
122
  }
123
123
  /**
124
124
  * Do not edit directly
125
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
125
+ * Generated on Thu, 26 Oct 2023 14:16:22 GMT
126
126
  */
127
127
  :root [data-theme="dark"] {
128
128
  --b2b-size-200: 5rem; /* 80px */
@@ -1,8 +1,7 @@
1
1
  import { screen } from '@storybook/testing-library';
2
2
  import { getArgTypes } from '../../docs/config/utils';
3
- import { useArgs } from '@storybook/client-api';
3
+ import { useArgs } from '@storybook/preview-api';
4
4
  import { html } from 'lit-html';
5
- import modalDocs from './modal.docs.mdx';
6
5
  const Template = ({ opened, variant, heading, backdropDismiss, escDismiss, content, }) => {
7
6
  const [_, updateArgs] = useArgs();
8
7
  const openModal = () => {
@@ -73,9 +72,4 @@ export default {
73
72
  title: 'Components/Status & Feedback/Modal',
74
73
  argTypes: modalArgs,
75
74
  viewmode: 'docs',
76
- parameters: {
77
- docs: {
78
- page: modalDocs,
79
- },
80
- },
81
75
  };
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
3
+ * Generated on Thu, 26 Oct 2023 14:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
122
122
  }
123
123
  /**
124
124
  * Do not edit directly
125
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
125
+ * Generated on Thu, 26 Oct 2023 14:16:22 GMT
126
126
  */
127
127
  :root [data-theme="dark"] {
128
128
  --b2b-size-200: 5rem; /* 80px */
@@ -1,6 +1,5 @@
1
1
  import { getArgTypes } from '../../docs/config/utils';
2
2
  import { html } from 'lit-html';
3
- import paginationDocs from './pagination.docs.mdx';
4
3
  const Template = ({ totalPages, activePage }) => {
5
4
  return html `<b2b-pagination
6
5
  total-pages="${totalPages}"
@@ -27,8 +26,5 @@ export default {
27
26
  viewmode: 'docs',
28
27
  parameters: {
29
28
  controls: { expanded: true },
30
- docs: {
31
- page: paginationDocs,
32
- },
33
29
  },
34
30
  };
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
3
+ * Generated on Thu, 26 Oct 2023 14:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
122
122
  }
123
123
  /**
124
124
  * Do not edit directly
125
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
125
+ * Generated on Thu, 26 Oct 2023 14:16:22 GMT
126
126
  */
127
127
  :root [data-theme="dark"] {
128
128
  --b2b-size-200: 5rem; /* 80px */
@@ -1,5 +1,4 @@
1
1
  import { html } from 'lit-html';
2
- import docs from './paragraph.docs.mdx';
3
2
  import { getArgTypes } from '../../docs/config/utils';
4
3
  const template = ({ weight, size, align }) => {
5
4
  return html `<b2b-paragraph weight="${weight}" size="${size}" align="${align}">
@@ -36,17 +35,9 @@ story040Center.storyName = 'Center aligned text';
36
35
  export const story050Right = template.bind({});
37
36
  story050Right.args = Object.assign(Object.assign({}, defaultArgs), { align: 'right' });
38
37
  story050Right.storyName = 'Right aligned text';
39
- export const story900Playground = template.bind({});
40
- story900Playground.args = Object.assign({}, defaultArgs);
41
- story900Playground.storyName = 'Playground';
42
38
  const argTypes = getArgTypes('b2b-paragraph');
43
39
  export default {
44
40
  title: 'Components/Content/Paragraph',
45
41
  argTypes: argTypes,
46
42
  viewMode: 'docs',
47
- parameters: {
48
- docs: {
49
- page: docs,
50
- },
51
- },
52
43
  };
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
3
+ * Generated on Thu, 26 Oct 2023 14:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
122
122
  }
123
123
  /**
124
124
  * Do not edit directly
125
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
125
+ * Generated on Thu, 26 Oct 2023 14:16:22 GMT
126
126
  */
127
127
  :root [data-theme="dark"] {
128
128
  --b2b-size-200: 5rem; /* 80px */
@@ -1,5 +1,4 @@
1
1
  import { getArgTypes } from '../../docs/config/utils';
2
- import radioButtonDocs from './radio.docs.mdx';
3
2
  import { html } from 'lit-html';
4
3
  const Template = ({ label, required, name, checked, disabled, invalid, value, hint, error, }) => {
5
4
  return html ` <b2b-radio-button
@@ -45,9 +44,4 @@ export default {
45
44
  title: 'Components/Form/Radio Button',
46
45
  argTypes: radioButtonArgs,
47
46
  viewmode: 'docs',
48
- parameters: {
49
- docs: {
50
- page: radioButtonDocs,
51
- },
52
- },
53
47
  };
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
3
+ * Generated on Thu, 26 Oct 2023 14:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
122
122
  }
123
123
  /**
124
124
  * Do not edit directly
125
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
125
+ * Generated on Thu, 26 Oct 2023 14:16:22 GMT
126
126
  */
127
127
  :root [data-theme="dark"] {
128
128
  --b2b-size-200: 5rem; /* 80px */
@@ -1,5 +1,4 @@
1
1
  import { getArgTypes } from '../../docs/config/utils';
2
- import radioGroupDocs from './radio-group.docs.mdx';
3
2
  import { html } from 'lit-html';
4
3
  const Template = ({ label, required, name, disabled, invalid, alignment, hint, error, }) => {
5
4
  return html ` <b2b-radio-group
@@ -55,9 +54,4 @@ export default {
55
54
  title: 'Components/Form/Radio Group',
56
55
  argTypes: radioGroupArgs,
57
56
  viewMode: 'docs',
58
- parameters: {
59
- docs: {
60
- page: radioGroupDocs,
61
- },
62
- },
63
57
  };
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
3
+ * Generated on Thu, 26 Oct 2023 14:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
122
122
  }
123
123
  /**
124
124
  * Do not edit directly
125
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
125
+ * Generated on Thu, 26 Oct 2023 14:16:22 GMT
126
126
  */
127
127
  :root [data-theme="dark"] {
128
128
  --b2b-size-200: 5rem; /* 80px */
@@ -1,6 +1,5 @@
1
1
  import { getArgTypes } from '../../docs/config/utils';
2
2
  import { html } from 'lit-html';
3
- import requiredSeparatorDocs from './required-separator.docs.mdx';
4
3
  const Template = ({ label }) => {
5
4
  return html `<div style="width: 400px">
6
5
  <b2b-input required="true" label="Name"></b2b-input
@@ -18,9 +17,4 @@ export default {
18
17
  title: 'Components/Form/Required Separator',
19
18
  args: requiredSeparatorArgs,
20
19
  viewMode: 'docs',
21
- parameters: {
22
- docs: {
23
- page: requiredSeparatorDocs,
24
- },
25
- },
26
20
  };