@latte-macchiat-io/latte-vanilla-components 0.0.177 → 0.0.178
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.
- package/package.json +3 -1
- package/src/assets/styles/mediaqueries.tsx +24 -0
- package/src/components/Actions/Actions.tsx +132 -0
- package/src/components/Actions/export.tsx +4 -0
- package/src/components/{Main/stories.ts → Actions/stories.tsx} +14 -13
- package/src/components/Button/Button.tsx +132 -0
- package/src/components/Button/export.tsx +5 -0
- package/src/components/Carousel/Carousel.tsx +328 -0
- package/src/components/Carousel/export.tsx +4 -0
- package/src/components/Columns/Columns.tsx +142 -0
- package/src/components/Columns/export.tsx +5 -0
- package/src/components/ConsentCookie/ConsentCookie.tsx +202 -0
- package/src/components/ConsentCookie/export.tsx +4 -0
- package/src/components/{Icon/stories.ts → ConsentCookie/stories.tsx} +7 -8
- package/src/components/Footer/Footer.tsx +130 -0
- package/src/components/Footer/export.tsx +4 -0
- package/src/components/Footer/stories.tsx +26 -0
- package/src/components/Form/Form.tsx +127 -0
- package/src/components/Form/Row/Row.tsx +137 -0
- package/src/components/Form/Row/index.tsx +0 -0
- package/src/components/Form/Row/stories.tsx +41 -0
- package/src/components/Form/TextField/Input/Input.tsx +139 -0
- package/src/components/Form/TextField/Input/export.tsx +6 -0
- package/src/components/Form/TextField/Label/Label.tsx +133 -0
- package/src/components/Form/TextField/Label/export.tsx +4 -0
- package/src/components/Form/TextField/TextField.tsx +200 -0
- package/src/components/Form/TextField/Textarea/Textarea.tsx +135 -0
- package/src/components/Form/TextField/Textarea/export.tsx +6 -0
- package/src/components/Form/TextField/Textarea/stories.tsx +44 -0
- package/src/components/Form/TextField/export.tsx +4 -0
- package/src/components/Form/export.tsx +4 -0
- package/src/components/Header/Header.tsx +158 -0
- package/src/components/Header/HeaderOverlay/index.tsx +32 -0
- package/src/components/Header/ToggleNav/index.tsx +32 -0
- package/src/components/Header/export.tsx +4 -0
- package/src/components/Header/stories.tsx +26 -0
- package/src/components/Icon/Icon.tsx +159 -0
- package/src/components/Icon/export.tsx +4 -0
- package/src/components/KeyNumber/KeyNumber.tsx +166 -0
- package/src/components/KeyNumber/export.tsx +4 -0
- package/src/components/LanguageSwitcher/LanguageSwitcher.tsx +168 -0
- package/src/components/LanguageSwitcher/export.tsx +4 -0
- package/src/components/Logo/Logo.tsx +137 -0
- package/src/components/Logo/export.tsx +4 -0
- package/src/components/Logo/stories.tsx +28 -0
- package/src/components/Main/Main.tsx +130 -0
- package/src/components/Main/export.tsx +4 -0
- package/src/components/Modal/Modal.tsx +194 -0
- package/src/components/Modal/export.tsx +4 -0
- package/src/components/Modal/types.tsx +5 -0
- package/src/components/Nav/Nav.tsx +129 -0
- package/src/components/Nav/export.tsx +4 -0
- package/src/components/Nav/stories.tsx +28 -0
- package/src/components/NavLegal/NavLegal.tsx +133 -0
- package/src/components/NavLegal/export.tsx +4 -0
- package/src/components/NavLegal/stories.tsx +28 -0
- package/src/components/NavLegal/types.tsx +1 -0
- package/src/components/NavSocial/NavSocial.tsx +169 -0
- package/src/components/NavSocial/export.tsx +5 -0
- package/src/components/{Columns/stories.ts → NavSocial/stories.tsx} +12 -14
- package/src/components/NavSocial/types.tsx +1 -0
- package/src/components/Section/Section.tsx +130 -0
- package/src/components/Section/export.tsx +6 -0
- package/src/components/ToRemove/ToRemove.tsx +3 -0
- package/src/components/Video/Video.tsx +243 -0
- package/src/components/Video/export.tsx +2 -0
- package/src/components/VideoFullWidth/VideoFullWidth.tsx +152 -0
- package/src/components/VideoFullWidth/export.tsx +2 -0
- package/src/components/Button/stories.ts +0 -127
- package/src/components/Section/stories.ts +0 -64
@@ -1,127 +0,0 @@
|
|
1
|
-
// import type { Meta, StoryObj } from '@storybook/react';
|
2
|
-
// import { fn } from '@storybook/test';
|
3
|
-
|
4
|
-
// import { Button } from './export';
|
5
|
-
// import { Size, Style, Variant } from './types';
|
6
|
-
// import { buttonStyle } from './styles.css';
|
7
|
-
// import { defaultTheme } from '../../assets/styles/default-theme';
|
8
|
-
|
9
|
-
// // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
|
10
|
-
// const meta = {
|
11
|
-
// title: 'Latte Components / 3. Buttons / Button',
|
12
|
-
// component: Button,
|
13
|
-
// parameters: {
|
14
|
-
// // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
|
15
|
-
// layout: 'centered',
|
16
|
-
// },
|
17
|
-
// // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
18
|
-
// tags: ['autodocs'],
|
19
|
-
// // More on argTypes: https://storybook.js.org/docs/api/argtypes
|
20
|
-
// argTypes: {},
|
21
|
-
// // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
|
22
|
-
// args: { onClick: fn() },
|
23
|
-
// } satisfies Meta<typeof Button>;
|
24
|
-
|
25
|
-
// export default meta;
|
26
|
-
// type Story = StoryObj<typeof meta>;
|
27
|
-
|
28
|
-
// // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
29
|
-
// export const Default: Story = {
|
30
|
-
// args: {
|
31
|
-
// children: 'Button',
|
32
|
-
// theme: defaultTheme,
|
33
|
-
// className: buttonStyle,
|
34
|
-
// },
|
35
|
-
// };
|
36
|
-
|
37
|
-
// export const Primary: Story = {
|
38
|
-
// args: {
|
39
|
-
// children: 'Button',
|
40
|
-
// theme: defaultTheme,
|
41
|
-
// className: buttonStyle,
|
42
|
-
// variant: Variant.Primary,
|
43
|
-
// },
|
44
|
-
// };
|
45
|
-
|
46
|
-
// export const StyleOutline: Story = {
|
47
|
-
// args: {
|
48
|
-
// children: 'Button',
|
49
|
-
// theme: defaultTheme,
|
50
|
-
// style: Style.Outline,
|
51
|
-
// className: buttonStyle,
|
52
|
-
// },
|
53
|
-
// };
|
54
|
-
|
55
|
-
// export const Secondary: Story = {
|
56
|
-
// args: {
|
57
|
-
// children: 'Button',
|
58
|
-
// theme: defaultTheme,
|
59
|
-
// className: buttonStyle,
|
60
|
-
// variant: Variant.Secondary,
|
61
|
-
// },
|
62
|
-
// };
|
63
|
-
|
64
|
-
// export const SecondaryOutline: Story = {
|
65
|
-
// args: {
|
66
|
-
// children: 'Button',
|
67
|
-
// theme: defaultTheme,
|
68
|
-
// style: Style.Outline,
|
69
|
-
// className: buttonStyle,
|
70
|
-
// variant: Variant.Secondary,
|
71
|
-
// },
|
72
|
-
// };
|
73
|
-
|
74
|
-
// export const StaticColor: Story = {
|
75
|
-
// args: {
|
76
|
-
// children: 'Button',
|
77
|
-
// theme: defaultTheme,
|
78
|
-
// className: buttonStyle,
|
79
|
-
// staticColor: '#76D1F5',
|
80
|
-
// },
|
81
|
-
// };
|
82
|
-
|
83
|
-
// export const StaticColorOutline: Story = {
|
84
|
-
// args: {
|
85
|
-
// children: 'Button',
|
86
|
-
// theme: defaultTheme,
|
87
|
-
// style: Style.Outline,
|
88
|
-
// className: buttonStyle,
|
89
|
-
// staticColor: '#76D1F5',
|
90
|
-
// },
|
91
|
-
// };
|
92
|
-
|
93
|
-
// export const Disabled: Story = {
|
94
|
-
// args: {
|
95
|
-
// isDisabled: true,
|
96
|
-
// children: 'Button',
|
97
|
-
// theme: defaultTheme,
|
98
|
-
// className: buttonStyle,
|
99
|
-
// },
|
100
|
-
// };
|
101
|
-
|
102
|
-
// export const Pending: Story = {
|
103
|
-
// args: {
|
104
|
-
// isPending: true,
|
105
|
-
// theme: defaultTheme,
|
106
|
-
// children: 'Pending...',
|
107
|
-
// className: buttonStyle,
|
108
|
-
// },
|
109
|
-
// };
|
110
|
-
|
111
|
-
// export const SizeSmall: Story = {
|
112
|
-
// args: {
|
113
|
-
// size: Size.Small,
|
114
|
-
// children: 'Button',
|
115
|
-
// theme: defaultTheme,
|
116
|
-
// className: buttonStyle,
|
117
|
-
// },
|
118
|
-
// };
|
119
|
-
|
120
|
-
// export const SizeLarge: Story = {
|
121
|
-
// args: {
|
122
|
-
// size: Size.Large,
|
123
|
-
// children: 'Button',
|
124
|
-
// theme: defaultTheme,
|
125
|
-
// className: buttonStyle,
|
126
|
-
// },
|
127
|
-
// };
|
@@ -1,64 +0,0 @@
|
|
1
|
-
// import type { Meta, StoryObj } from '@storybook/react';
|
2
|
-
// import { defaultTheme } from '@assets/styles/default-theme';
|
3
|
-
// import { Section } from './Section';
|
4
|
-
// import { sectionStyle } from './styles.css';
|
5
|
-
// import { Align } from './types';
|
6
|
-
|
7
|
-
// // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
|
8
|
-
// const meta = {
|
9
|
-
// title: 'Latte Components / Layout / Section',
|
10
|
-
// component: Section,
|
11
|
-
// parameters: {
|
12
|
-
// // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
|
13
|
-
// layout: 'centered',
|
14
|
-
// },
|
15
|
-
// // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
16
|
-
// tags: ['autodocs'],
|
17
|
-
// // More on argTypes: https://storybook.js.org/docs/api/argtypes
|
18
|
-
// argTypes: {},
|
19
|
-
// // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
|
20
|
-
// } satisfies Meta<typeof Section>;
|
21
|
-
|
22
|
-
// export default meta;
|
23
|
-
// type Story = StoryObj<typeof meta>;
|
24
|
-
|
25
|
-
// // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
26
|
-
// export const Default: Story = {
|
27
|
-
// args: {
|
28
|
-
// theme: defaultTheme,
|
29
|
-
// className: sectionStyle,
|
30
|
-
// children:
|
31
|
-
// 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
|
32
|
-
// },
|
33
|
-
// };
|
34
|
-
|
35
|
-
// export const FullHeight: Story = {
|
36
|
-
// args: {
|
37
|
-
// isFullHeight: true,
|
38
|
-
// theme: defaultTheme,
|
39
|
-
// className: sectionStyle,
|
40
|
-
// children:
|
41
|
-
// 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
|
42
|
-
// },
|
43
|
-
// };
|
44
|
-
|
45
|
-
// export const AlignCenter: Story = {
|
46
|
-
// args: {
|
47
|
-
// theme: defaultTheme,
|
48
|
-
// align: Align.Center,
|
49
|
-
// className: sectionStyle,
|
50
|
-
// children:
|
51
|
-
// 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
|
52
|
-
// },
|
53
|
-
// };
|
54
|
-
|
55
|
-
// export const BackgroundColor: Story = {
|
56
|
-
// args: {
|
57
|
-
// isDark: true,
|
58
|
-
// theme: defaultTheme,
|
59
|
-
// backgroundColor: 'red',
|
60
|
-
// className: sectionStyle,
|
61
|
-
// children:
|
62
|
-
// 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
|
63
|
-
// },
|
64
|
-
// };
|