Skip to content

Commit f30cbc7

Browse files
amir78729amir78729
authored
Merge pull request #101 from amir78729/fix/base-button-jsdoc
docs: add JSDoc to ‍‍`button` and `icon-button` components
2 parents b63454d + 73f7fe3 commit f30cbc7

File tree

6 files changed

+195
-8
lines changed

6 files changed

+195
-8
lines changed

‎docs/.vitepress/config.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const file = fs.readFileSync('dist/custom-elements.json');
66
const manifest = JSON.parse(file.toString()) as Package;
77

88
const components = manifest.modules
9-
.filter((module) => !module.path.startsWith('src/icon') && !!module.declarations?.length)
9+
.filter((module) => !(module.path.startsWith('src/icon/') || module.path.startsWith('src/icons/')) && !!module.declarations?.length)
1010
.map((module) => {
1111
if (!module.exports)
1212
throw new Error(`Module has no export: ${module.path}`);

‎docs/components/[component].paths.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default {
99
return manifest.modules
1010
.filter(
1111
(module) =>
12-
!module.path.startsWith('src/icon') && !!module.declarations?.length,
12+
!(module.path.startsWith('src/icon/') || module.path.startsWith('src/icons/')) && !!module.declarations?.length
1313
)
1414
.map((module) => {
1515
if (!module.exports)
@@ -120,4 +120,4 @@ Then import this component into your project by using a bare module specifier:
120120
import '@tapsi/components/${name}/${name}.js';
121121
\`\`\`
122122
`
123-
}
123+
}

‎src/base-button/base-button.style.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export default css`
3939
font: inherit;
4040
gap: inherit;
4141
width: 100%;
42-
font-family: var(--tap-font-family, var(--tap-sys-font-family)), serif;
42+
font-family: var(--tap-font-family, var(--tap-sys-font-family));
4343
border-radius: var(--tap-button-radius, var(--tap-sys-radius-full));
4444
}
4545

‎src/button/index.ts

+85
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,91 @@ import { Button } from './button';
33
import styles from './button.style';
44
import { baseButtonStyles } from '../base-button';
55

6+
/**
7+
* ### Example
8+
*
9+
* ##### Simple
10+
*
11+
* ```html
12+
* <tap-button>Click Me</tap-button>
13+
* ```
14+
*
15+
* ##### Disabled Button
16+
*
17+
* ```html
18+
* <tap-button disabled>Disabled</tap-button>
19+
* ```
20+
*
21+
* ##### Variants
22+
*
23+
* ```html
24+
* <tap-button variant="primary">Primary</tap-button>
25+
* <tap-button variant="ghost">Ghost</tap-button>
26+
* <tap-button variant="naked">Naked</tap-button>
27+
* <tap-button variant="elevated">Elevated</tap-button>
28+
* <tap-button variant="destructive">Destructive</tap-button>
29+
* <tap-button variant="brand">Brand</tap-button>
30+
* ```
31+
*
32+
* ##### Sizes
33+
*
34+
* ```html
35+
* <tap-button size="small">Small</tap-button>
36+
* <tap-button size="medium">Medium</tap-button>
37+
* <tap-button size="large">Large</tap-button>
38+
* ```
39+
*
40+
* @summary A customizable button component with various styles and states.
41+
*
42+
* @prop {`boolean`} [`disabled`=`false`] - Whether the button is disabled.
43+
* @prop {`'button'` \| `'submit'` \| `'reset'`} [`type`] - The type of the button.
44+
* @prop {`string`} [`value`] - The value associated with the button.
45+
* @prop {`string`} [`name`] - The name associated with the button.
46+
* @prop {`string`} [`label`] - The accessible label for the button.
47+
* @prop {`boolean`} [`loading`=`false`] - Whether the button is in a loading state.
48+
* @prop {`'small'` \| `'medium'` \| `'large'`} [`size`=`'medium'`] - The size of the button.
49+
* @prop {`'primary'` \| `'ghost'` \| `'naked'` \| `'elevated'` \| `'destructive'` \| `'brand'`} [`variant`=`'primary'`] - The variant style of the button.
50+
*
51+
* @csspart `button` - The button element.
52+
*
53+
* @cssprop [`--tap-font-family`=`--tap-sys-font-family`] - The font family for the button.
54+
* @cssprop [`--tap-sys-radius-full`] - The border radius for the button.
55+
* @cssprop [`--tap-button-color-surface-cover`=`--tap-sys-color-surface-overlay-light`] - The surface cover color for the button.
56+
* @cssprop [`--tap-sys-color-surface-overlay-light`] - The overlay light color for the button.
57+
* @cssprop [`--tap-sys-color-surface-disabled`] - The disabled surface color for the button.
58+
* @cssprop [`--tap-button-color-surface-disabled`=`--tap-sys-color-surface-disabled`] - The disabled surface color for the button.
59+
* @cssprop [`--tap-sys-spacing-9`] - The spacing for the small button height.
60+
* @cssprop [`--tap-sys-spacing-10`] - The spacing for the medium button height.
61+
* @cssprop [`--tap-sys-spacing-11`] - The spacing for the large button height.
62+
* @cssprop [`--tap-sys-spacing-5`] - The spacing for the small button padding.
63+
* @cssprop [`--tap-sys-spacing-6`] - The spacing for the medium button padding.
64+
* @cssprop [`--tap-sys-spacing-8`] - The spacing for the large button padding.
65+
* @cssprop [`--tap-button-typography-label-sm-height`=`--tap-sys-typography-label-sm-height`] - The line height for the small button label.
66+
* @cssprop [`--tap-button-typography-label-sm-size`=`--tap-sys-typography-label-sm-size`] - The font size for the small button label.
67+
* @cssprop [`--tap-button-typography-label-sm-weight`=`--tap-sys-typography-label-sm-weight`] - The font weight for the small button label.
68+
* @cssprop [`--tap-button-typography-label-md-height`=`--tap-sys-typography-label-sm-height`] - The line height for the medium button label.
69+
* @cssprop [`--tap-button-typography-label-md-size`=`--tap-sys-typography-label-sm-size`] - The font size for the medium button label.
70+
* @cssprop [`--tap-button-typography-label-md-weight`=`--tap-sys-typography-label-sm-weight`] - The font weight for the medium button label.
71+
* @cssprop [`--tap-button-typography-label-lg-height`=`--tap-sys-typography-label-lg-height`] - The line height for the large button label.
72+
* @cssprop [`--tap-button-typography-label-lg-size`=`--tap-sys-typography-label-lg-size`] - The font size for the large button label.
73+
* @cssprop [`--tap-button-typography-label-lg-weight`=`--tap-sys-typography-label-lg-weight`] - The font weight for the large button label.
74+
* @cssprop [`--tap-button-color-surface-inverse-primary`=`--tap-sys-color-surface-inverse-primary`] - The surface color for the primary variant.
75+
* @cssprop [`--tap-sys-color-surface-inverse-primary`] - The surface color for the primary variant.
76+
* @cssprop [`--tap-button-color-content-on-inverse`=`--tap-sys-color-content-on-inverse`] - The content color on inverse surface.
77+
* @cssprop [`--tap-sys-color-content-on-inverse`] - The content color on inverse surface.
78+
* @cssprop [`--tap-button-color-surface-tertiary`=`--tap-sys-color-surface-tertiary`] - The surface color for the ghost variant.
79+
* @cssprop [`--tap-sys-color-surface-tertiary`] - The surface color for the ghost variant.
80+
* @cssprop [`--tap-button-color-content-primary`=`--tap-sys-color-content-primary`] - The content color for the primary variant.
81+
* @cssprop [`--tap-sys-color-content-primary`] - The content color for the primary variant.
82+
* @cssprop [`--tap-button-color-surface-primary`=`--tap-sys-color-surface-primary`] - The surface color for the elevated variant.
83+
* @cssprop [`--tap-sys-color-surface-primary`] - The surface color for the elevated variant.
84+
* @cssprop [`--tap-button-color-surface-destructive`=`--tap-sys-color-surface-negative-light`] - The surface color for the destructive variant.
85+
* @cssprop [`--tap-sys-color-surface-negative-light`] - The surface color for the destructive variant.
86+
* @cssprop [`--tap-button-color-content-destructive`=`--tap-sys-color-content-negative`] - The content color for the destructive variant.
87+
* @cssprop [`--tap-sys-color-content-negative`] - The content color for the destructive variant.
88+
* @cssprop [`--tap-button-color-gradient-brand`=`--tap-sys-color-gradient-brand`] - The gradient color for the brand variant.
89+
* @cssprop [`--tap-sys-color-gradient-brand`] - The gradient color for the brand variant.
90+
*/
691
@customElement('tap-button')
792
export class TapButton extends Button {
893
static readonly styles = [baseButtonStyles, styles];

‎src/icon-button/icon-button.test.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { expect, defineCE, fixture } from "@open-wc/testing";
2-
import { TapIconButton } from "./";
1+
import { expect, defineCE, fixture } from '@open-wc/testing';
2+
import { TapIconButton } from './';
33

4-
describe("Test tap-button", () => {
5-
it("should pass", () => {
4+
describe('Test tap-button', () => {
5+
it('should pass', () => {
66
expect(true).to.equal(true);
77
});
88
});

‎src/icon-button/index.ts

+102
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,108 @@ import { IconButton } from './icon-button';
33
import styles from './icon-button.style';
44
import { baseButtonStyles } from '../base-button';
55

6+
/**
7+
* ### Example
8+
*
9+
* ##### Simple
10+
*
11+
* ```html
12+
* <tap-icon-button size="medium">
13+
* <tap-icon name="check"></tap-icon>
14+
* </tap-icon-button>
15+
* ```
16+
*
17+
* ##### Disabled IconButton
18+
*
19+
* ```html
20+
* <tap-icon-button disabled>
21+
* <tap-icon name="check"></tap-icon>
22+
* </tap-icon-button>
23+
* ```
24+
*
25+
* ##### Variants
26+
*
27+
* ```html
28+
* <tap-icon-button variant="primary">
29+
* <tap-icon name="check"></tap-icon>
30+
* </tap-icon-button>
31+
* <tap-icon-button variant="ghost">
32+
* <tap-icon name="check"></tap-icon>
33+
* </tap-icon-button>
34+
* <tap-icon-button variant="naked">
35+
* <tap-icon name="check"></tap-icon>
36+
* </tap-icon-button>
37+
* <tap-icon-button variant="elevated">
38+
* <tap-icon name="check"></tap-icon>
39+
* </tap-icon-button>
40+
* <tap-icon-button variant="destructive">
41+
* <tap-icon name="check"></tap-icon>
42+
* </tap-icon-button>
43+
* <tap-icon-button variant="brand">
44+
* <tap-icon name="check"></tap-icon>
45+
* </tap-icon-button>
46+
* ```
47+
*
48+
* ##### Sizes
49+
*
50+
* ```html
51+
* <tap-icon-button size="small">
52+
* <tap-icon name="check"></tap-icon>
53+
* </tap-icon-button>
54+
* <tap-icon-button size="medium">
55+
* <tap-icon name="check"></tap-icon>
56+
* </tap-icon-button>
57+
* <tap-icon-button size="large">
58+
* <tap-icon name="check"></tap-icon>
59+
* </tap-icon-button>
60+
* ```
61+
*
62+
* @summary A customizable icon button component with various styles and states.
63+
*
64+
* @prop {`boolean`} [`disabled`=`false`] - Whether the icon button is disabled.
65+
* @prop {`'small'` \| `'medium'` \| `'large'`} [`size`=`'medium'`] - The size of the icon button.
66+
* @prop {`'primary'` \| `'ghost'` \| `'naked'` \| `'elevated'` \| `'destructive'` \| `'brand'`} [`variant`=`'primary'`] - The variant style of the icon button.
67+
*
68+
* @csspart button - The button element.
69+
*
70+
* @cssprop [`--tap-font-family`=`--tap-sys-font-family`] - The font family for the button.
71+
* @cssprop [`--tap-sys-radius-full`] - The border radius for the button.
72+
* @cssprop [`--tap-button-color-surface-cover`=`--tap-sys-color-surface-overlay-light`] - The surface cover color for the button.
73+
* @cssprop [`--tap-sys-color-surface-overlay-light`] - The overlay light color for the button.
74+
* @cssprop [`--tap-sys-color-surface-disabled`] - The disabled surface color for the button.
75+
* @cssprop [`--tap-button-color-surface-disabled`=`--tap-sys-color-surface-disabled`] - The disabled surface color for the button.
76+
* @cssprop [`--tap-sys-spacing-9`] - The spacing for the small button height.
77+
* @cssprop [`--tap-sys-spacing-10`] - The spacing for the medium button height.
78+
* @cssprop [`--tap-sys-spacing-11`] - The spacing for the large button height.
79+
* @cssprop [`--tap-sys-spacing-5`] - The spacing for the small button padding.
80+
* @cssprop [`--tap-sys-spacing-6`] - The spacing for the medium button padding.
81+
* @cssprop [`--tap-sys-spacing-8`] - The spacing for the large button padding.
82+
* @cssprop [`--tap-button-typography-label-sm-height`=`--tap-sys-typography-label-sm-height`] - The line height for the small button label.
83+
* @cssprop [`--tap-button-typography-label-sm-size`=`--tap-sys-typography-label-sm-size`] - The font size for the small button label.
84+
* @cssprop [`--tap-button-typography-label-sm-weight`=`--tap-sys-typography-label-sm-weight`] - The font weight for the small button label.
85+
* @cssprop [`--tap-button-typography-label-md-height`=`--tap-sys-typography-label-sm-height`] - The line height for the medium button label.
86+
* @cssprop [`--tap-button-typography-label-md-size`=`--tap-sys-typography-label-sm-size`] - The font size for the medium button label.
87+
* @cssprop [`--tap-button-typography-label-md-weight`=`--tap-sys-typography-label-sm-weight`] - The font weight for the medium button label.
88+
* @cssprop [`--tap-button-typography-label-lg-height`=`--tap-sys-typography-label-lg-height`] - The line height for the large button label.
89+
* @cssprop [`--tap-button-typography-label-lg-size`=`--tap-sys-typography-label-lg-size`] - The font size for the large button label.
90+
* @cssprop [`--tap-button-typography-label-lg-weight`=`--tap-sys-typography-label-lg-weight`] - The font weight for the large button label.
91+
* @cssprop [`--tap-button-color-surface-inverse-primary`=`--tap-sys-color-surface-inverse-primary`] - The surface color for the primary variant.
92+
* @cssprop [`--tap-sys-color-surface-inverse-primary`] - The surface color for the primary variant.
93+
* @cssprop [`--tap-button-color-content-on-inverse`=`--tap-sys-color-content-on-inverse`] - The content color on inverse surface.
94+
* @cssprop [`--tap-sys-color-content-on-inverse`] - The content color on inverse surface.
95+
* @cssprop [`--tap-button-color-surface-tertiary`=`--tap-sys-color-surface-tertiary`] - The surface color for the ghost variant.
96+
* @cssprop [`--tap-sys-color-surface-tertiary`] - The surface color for the ghost variant.
97+
* @cssprop [`--tap-button-color-content-primary`=`--tap-sys-color-content-primary`] - The content color for the primary variant.
98+
* @cssprop [`--tap-sys-color-content-primary`] - The content color for the primary variant.
99+
* @cssprop [`--tap-button-color-surface-primary`=`--tap-sys-color-surface-primary`] - The surface color for the elevated variant.
100+
* @cssprop [`--tap-sys-color-surface-primary`] - The surface color for the elevated variant.
101+
* @cssprop [`--tap-button-color-surface-destructive`=`--tap-sys-color-surface-negative-light`] - The surface color for the destructive variant.
102+
* @cssprop [`--tap-sys-color-surface-negative-light`] - The surface color for the destructive variant.
103+
* @cssprop [`--tap-button-color-content-destructive`=`--tap-sys-color-content-negative`] - The content color for the destructive variant.
104+
* @cssprop [`--tap-sys-color-content-negative`] - The content color for the destructive variant.
105+
* @cssprop [`--tap-button-color-gradient-brand`=`--tap-sys-color-gradient-brand`] - The gradient color for the brand variant.
106+
* @cssprop [`--tap-sys-color-gradient-brand`] - The gradient color for the brand variant.
107+
*/
6108
@customElement('tap-icon-button')
7109
export class TapIconButton extends IconButton {
8110
static readonly styles = [baseButtonStyles, styles];

0 commit comments

Comments
 (0)