Skip to content

Commit 9d74f9b

Browse files
wuda-iowuda-io
authored
Merge pull request #628 from materializecss/story-book-docs
Story book Docs
2 parents 8ff53fb + bfe4595 commit 9d74f9b

21 files changed

+4671
-2512
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,4 @@ yarn.lock
3030

3131
#dist/
3232
*storybook.log
33+
storybook-static

‎.storybook/main.ts

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,15 @@
11
import type { StorybookConfig } from '@storybook/html-vite';
22

33
const config: StorybookConfig = {
4-
"stories": [
5-
"../components/**/*.mdx",
6-
"../components/**/*.stories.@(js|jsx|mjs|ts|tsx)",
7-
],
8-
"addons": [
9-
{
10-
name: '@storybook/addon-essentials',
11-
options: {
12-
backgrounds: false, // 👈 disable the backgrounds addon to avoid confusing it with themes
13-
},
14-
},
15-
"@storybook/addon-interactions",
16-
"@storybook/addon-themes"
17-
],
18-
"framework": {
19-
"name": "@storybook/html-vite",
20-
"options": {}
4+
stories: ['../components/**/*.mdx', '../components/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
5+
addons: ['@storybook/addon-themes', '@storybook/addon-docs'],
6+
framework: {
7+
name: '@storybook/html-vite',
8+
options: {}
9+
},
10+
docs: {
11+
//👇 See the table below for the list of supported options
12+
defaultName: 'Documentation'
2113
}
2214
};
2315
export default config;

‎.storybook/manager.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { addons } from 'storybook/manager-api';
2+
import yourTheme from './my-theme';
3+
4+
addons.setConfig({
5+
theme: yourTheme
6+
});

‎.storybook/my-theme.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { create } from 'storybook/theming';
2+
3+
export default create({
4+
// base: 'light',
5+
brandTitle: 'My custom Storybook',
6+
brandUrl: 'https://example.com',
7+
brandImage: 'https://storybook.js.org/images/placeholders/350x150.png',
8+
brandTarget: '_self'
9+
});

‎.storybook/preview.ts

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import type { Preview } from '@storybook/html'
1+
import type { Preview } from '@storybook/html';
22
import { withThemeByDataAttribute } from '@storybook/addon-themes';
3-
43
import './material-icons.css';
54
import '../sass/materialize.scss';
65

@@ -10,24 +9,24 @@ const preview: Preview = {
109
withThemeByDataAttribute({
1110
themes: {
1211
light: 'light',
13-
dark: 'dark',
12+
dark: 'dark'
1413
},
1514
defaultTheme: 'light',
16-
attributeName: 'theme',
17-
}),
15+
attributeName: 'theme'
16+
})
1817
],
1918
parameters: {
2019
docs: {
21-
toc: true, // Enables the table of contents in auto generated docs
20+
toc: true // Enables the table of contents in auto generated docs
2221
},
23-
actions: {argTypesRegex: "^on[A-Z].*"},
22+
actions: { argTypesRegex: '^on[A-Z].*' },
2423
controls: {
2524
matchers: {
26-
color: /(background|color)$/i,
27-
date: /Date$/i,
28-
},
29-
},
30-
},
25+
color: /(background|color)$/i,
26+
date: /Date$/i
27+
}
28+
}
29+
}
3130
};
3231

3332
export default preview;

‎LICENSE

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The MIT License (MIT)
22

3-
Copyright (c) 2014-2024 Materialize
3+
Copyright (c) 2014-2025 Materialize
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎components/buttons/buttons.stories.ts

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,26 @@
1-
import type { Meta, StoryObj } from '@storybook/html';
1+
import type { Meta, StoryObj } from '@storybook/html-vite';
22

33
export default {
4-
title: 'Components/Buttons',
5-
4+
title: 'Components/Buttons'
65
} satisfies Meta;
76

8-
97
const BTN_SIZES = {
10-
'Small': ['btn-small'],
8+
Small: ['btn-small'],
119
'Small disabled': ['btn-small', 'disabled'],
12-
'Normal': [],
10+
Normal: [],
1311
'Normal disabled': ['disabled'],
14-
'Large': ['btn-large'],
15-
'Large disabled': ['btn-large', 'disabled'],
12+
Large: ['btn-large'],
13+
'Large disabled': ['btn-large', 'disabled']
1614
};
1715

1816
const BTN_STYLES = {
19-
'Default': [], // uncomment this to see the default button when no filled/tonal/outlined/text is set
20-
'Filled': ['filled'],
21-
'Tonal': ['tonal'],
22-
'Outlined': ['outlined'],
23-
'Text': ['text']
17+
Default: [], // uncomment this to see the default button when no filled/tonal/outlined/text is set
18+
Filled: ['filled'],
19+
Tonal: ['tonal'],
20+
Outlined: ['outlined'],
21+
Text: ['text']
2422
};
2523

26-
2724
export const Basic: StoryObj = {
2825
render(args) {
2926
const table = document.createElement('table');
@@ -39,7 +36,7 @@ export const Basic: StoryObj = {
3936
cell.innerText = btnStype;
4037
for (const size in BTN_SIZES) {
4138
const cell = row.insertCell();
42-
const classes = [...BTN_STYLES[btnStype], ...BTN_SIZES[size], ...args.classes?? [] ];
39+
const classes = [...BTN_STYLES[btnStype], ...BTN_SIZES[size], ...(args.classes ?? [])];
4340
const disabled = classes.includes('disabled') ? 'disabled="disabled"' : '';
4441
let iconHtml = '';
4542
if (args.icon) {
@@ -107,11 +104,9 @@ export const IconRight: StoryObj = {
107104
label: 'Submit',
108105
iconRight: 'send',
109106
classes: ['btn']
110-
111107
}
112108
};
113109

114-
115110
export const FloatingActionButton: StoryObj = {
116111
render() {
117112
return `
@@ -151,5 +146,5 @@ export const FloatingActionButton: StoryObj = {
151146
</ul>
152147
</div>
153148
`;
154-
},
155-
}
149+
}
150+
};

‎components/checkbox/_checkboxes.scss

Lines changed: 96 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,119 @@
11
/* Checkboxes */
22

3-
/* Remove default checkbox */
4-
[type="checkbox"]:not(:checked),
5-
[type="checkbox"]:checked {
3+
@at-root {
4+
:root {
5+
--checkbox-size: 18px; // 18px
6+
--checkbox-shape: 2px;
7+
}
8+
}
9+
10+
input[type="checkbox"] {
11+
/* Add if not using autoprefixer */
12+
-webkit-appearance: none;
13+
appearance: none;
14+
/* For iOS < 15 to remove gradient background */
15+
// background-color: #fff;
16+
margin: 0;
17+
position: relative;
18+
cursor: pointer;
19+
}
20+
21+
input[type="checkbox"]:focus {
22+
outline: 3px solid var(--md-sys-color-secondary);
23+
border-radius: 50%;
24+
outline-offset: 0.5rem;
25+
}
26+
27+
input[type="checkbox"]:before {
28+
opacity: 1;
629
position: absolute;
7-
opacity: 0;
8-
pointer-events: none;
30+
display: block;
31+
width: var(--checkbox-size);
32+
height: var(--checkbox-size);
33+
border: 2px solid var(--md-sys-color-on-surface-variant);
34+
border-radius: var(--checkbox-shape);
35+
content: "";
36+
// background: #fff;
37+
}
38+
39+
input[type="checkbox"]:after {
40+
position: relative;
41+
display: block;
42+
// left: 2px;
43+
// top: -11px;
44+
width: var(--checkbox-size);
45+
height: var(--checkbox-size);
46+
// border-width: 2px;
47+
// border-style: solid;
48+
// border-color: var(--md-sys-color-on-surface-variant);
49+
content: "";
50+
// background-image: linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
51+
border-radius: var(--checkbox-shape);
52+
background-repeat: no-repeat;
53+
background-position: center;
54+
}
55+
56+
input[type="checkbox"]:checked:after {
57+
background-color: var(--md-sys-color-primary);
58+
clip-path: polygon(0 48%, 0 0, 56% 0, 74% 17%, 40% 64%, 23% 50%, 14% 61%, 42% 82%, 81% 31%, 32% 0, 100% 0, 100% 100%, 0 100%, 0 49%);
59+
}
60+
61+
[type="checkbox"]:indeterminate:after {
62+
background-color: var(--md-sys-color-primary);
63+
clip-path: polygon(0% 0%, 0% 100%, 18% 100%, 16% 43%, 83% 42%, 83% 63%, 16% 63%, 16% 100%, 100% 100%, 100% 0%);
64+
}
65+
66+
// Disabled
67+
input[type="checkbox"]:disabled:before {
68+
filter: opacity(0.2);
69+
}
70+
input[type="checkbox"]:disabled:after {
71+
filter: opacity(0.2);
72+
}
73+
74+
// Hover
75+
input[type="checkbox"]:not(:disabled):checked:hover:after{
76+
// background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%,#FFF 100%);
77+
background-color: var(--md-sys-color-primary);
78+
}
79+
80+
input[type="checkbox"]:not(:disabled):hover:after{
81+
// background-image: linear-gradient(135deg, #8BB0C2 0%,#FFF 100%);
82+
border-color: #85A9BB #92C2DA #92C2DA #85A9BB;
83+
}
84+
85+
input[type="checkbox"]:not(:disabled):hover:before{
86+
border-color: #3D7591;
987
}
1088

89+
/*
1190
// Checkbox Styles
1291
[type="checkbox"] {
1392
// Text Label Style
1493
+ span:not(.lever) {
1594
position: relative;
16-
padding-left: 35px;
1795
cursor: pointer;
1896
display: inline-block;
19-
height: 25px;
20-
line-height: 25px;
97+
height: var(--checkbox-size);
98+
line-height: var(--checkbox-size);
99+
padding-left: var(--checkbox-size);
100+
// background-color: red;
21101
font-size: 1rem;
22102
user-select: none;
23103
}
24104
25-
/* checkbox aspect */
105+
// checkbox aspect
26106
+ span:not(.lever):before,
27107
&:not(.filled-in) + span:not(.lever):after {
28108
content: '';
29109
position: absolute;
30110
top: 0;
31111
left: 0;
32-
width: 18px;
33-
height: 18px;
112+
width: var(--checkbox-size);
113+
height: var(--checkbox-size);
34114
z-index: 0;
35115
border: 2px solid var(--md-sys-color-on-surface-variant);
36116
border-radius: 1px;
37-
margin-top: 3px;
38117
transition: .2s;
39118
}
40119
@@ -82,7 +161,7 @@
82161
}
83162
}
84163
85-
/* Indeterminate checkbox */
164+
// Indeterminate checkbox
86165
[type="checkbox"]:indeterminate {
87166
+ span:not(.lever):before {
88167
top: -11px;
@@ -117,7 +196,7 @@
117196
content: '';
118197
left: 0;
119198
position: absolute;
120-
/* .1s delay is for check animation */
199+
// .1s delay is for check animation
121200
transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
122201
z-index: 1;
123202
}
@@ -151,8 +230,8 @@
151230
height: 13px;
152231
border-top: 2px solid transparent;
153232
border-left: 2px solid transparent;
154-
border-right: 2px solid var(--md-sys-color-on-primary);
155-
border-bottom: 2px solid var(--md-sys-color-on-primary);
233+
border-right: 2px solid var(--md-sys-color-on-primary);
234+
border-bottom: 2px solid var(--md-sys-color-on-primary);
156235
transform: rotateZ(37deg);
157236
transform-origin: 100% 100%;
158237
}
@@ -199,3 +278,4 @@
199278
border: none;
200279
}
201280
}
281+
*/

‎components/checkbox/checkbox.mdx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import {Story, Meta, Source, Controls, Markdown, Primary} from '@storybook/blocks';
2-
1+
import {Story, Meta, Source, Controls, Markdown, Primary} from '@storybook/addon-docs/blocks';
32
import * as stories from './checkbox.stories';
43

54
<Meta of={stories}/>
@@ -23,5 +22,3 @@ Add the input's `id` as the value of the `for` attribute of the label.
2322

2423
<Story of={stories.Indeterminate} />
2524
<Source of={stories.Indeterminate} format="dedent"/>
26-
27-

0 commit comments

Comments
 (0)