Skip to content

Commit

Permalink
Merge pull request #101 from amir78729/fix/base-button-jsdoc
Browse files Browse the repository at this point in the history 
docs: add JSDoc to ‍‍`button` and `icon-button` components
  • Loading branch information
@amir78729
amir78729 authored May 28, 2024
2 parents b63454d + 73f7fe3 commit f30cbc7
Show file tree
Hide file tree
Showing 6 changed files with 195 additions and 8 deletions.
2 changes: 1 addition & 1 deletion docs/.vitepress/config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const file = fs.readFileSync('dist/custom-elements.json');
const manifest = JSON.parse(file.toString()) as Package;

const components = manifest.modules
.filter((module) => !module.path.startsWith('src/icon') && !!module.declarations?.length)
.filter((module) => !(module.path.startsWith('src/icon/') || module.path.startsWith('src/icons/')) && !!module.declarations?.length)
.map((module) => {
if (!module.exports)
throw new Error(`Module has no export: ${module.path}`);
Expand Down
4 changes: 2 additions & 2 deletions docs/components/[component].paths.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default {
return manifest.modules
.filter(
(module) =>
!module.path.startsWith('src/icon') && !!module.declarations?.length,
!(module.path.startsWith('src/icon/') || module.path.startsWith('src/icons/')) && !!module.declarations?.length
)
.map((module) => {
if (!module.exports)
Expand Down Expand Up @@ -120,4 +120,4 @@ Then import this component into your project by using a bare module specifier:
import '@tapsi/components/${name}/${name}.js';
\`\`\`
`
}
}
2 changes: 1 addition & 1 deletion src/base-button/base-button.style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export default css`
font: inherit;
gap: inherit;
width: 100%;
font-family: var(--tap-font-family, var(--tap-sys-font-family)), serif;
font-family: var(--tap-font-family, var(--tap-sys-font-family));
border-radius: var(--tap-button-radius, var(--tap-sys-radius-full));
}
Expand Down
85 changes: 85 additions & 0 deletions src/button/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,91 @@ import { Button } from './button';
import styles from './button.style';
import { baseButtonStyles } from '../base-button';

/**
* ### Example
*
* ##### Simple
*
* ```html
* <tap-button>Click Me</tap-button>
* ```
*
* ##### Disabled Button
*
* ```html
* <tap-button disabled>Disabled</tap-button>
* ```
*
* ##### Variants
*
* ```html
* <tap-button variant="primary">Primary</tap-button>
* <tap-button variant="ghost">Ghost</tap-button>
* <tap-button variant="naked">Naked</tap-button>
* <tap-button variant="elevated">Elevated</tap-button>
* <tap-button variant="destructive">Destructive</tap-button>
* <tap-button variant="brand">Brand</tap-button>
* ```
*
* ##### Sizes
*
* ```html
* <tap-button size="small">Small</tap-button>
* <tap-button size="medium">Medium</tap-button>
* <tap-button size="large">Large</tap-button>
* ```
*
* @summary A customizable button component with various styles and states.
*
* @prop {`boolean`} [`disabled`=`false`] - Whether the button is disabled.
* @prop {`'button'` \| `'submit'` \| `'reset'`} [`type`] - The type of the button.
* @prop {`string`} [`value`] - The value associated with the button.
* @prop {`string`} [`name`] - The name associated with the button.
* @prop {`string`} [`label`] - The accessible label for the button.
* @prop {`boolean`} [`loading`=`false`] - Whether the button is in a loading state.
* @prop {`'small'` \| `'medium'` \| `'large'`} [`size`=`'medium'`] - The size of the button.
* @prop {`'primary'` \| `'ghost'` \| `'naked'` \| `'elevated'` \| `'destructive'` \| `'brand'`} [`variant`=`'primary'`] - The variant style of the button.
*
* @csspart `button` - The button element.
*
* @cssprop [`--tap-font-family`=`--tap-sys-font-family`] - The font family for the button.
* @cssprop [`--tap-sys-radius-full`] - The border radius for the button.
* @cssprop [`--tap-button-color-surface-cover`=`--tap-sys-color-surface-overlay-light`] - The surface cover color for the button.
* @cssprop [`--tap-sys-color-surface-overlay-light`] - The overlay light color for the button.
* @cssprop [`--tap-sys-color-surface-disabled`] - The disabled surface color for the button.
* @cssprop [`--tap-button-color-surface-disabled`=`--tap-sys-color-surface-disabled`] - The disabled surface color for the button.
* @cssprop [`--tap-sys-spacing-9`] - The spacing for the small button height.
* @cssprop [`--tap-sys-spacing-10`] - The spacing for the medium button height.
* @cssprop [`--tap-sys-spacing-11`] - The spacing for the large button height.
* @cssprop [`--tap-sys-spacing-5`] - The spacing for the small button padding.
* @cssprop [`--tap-sys-spacing-6`] - The spacing for the medium button padding.
* @cssprop [`--tap-sys-spacing-8`] - The spacing for the large button padding.
* @cssprop [`--tap-button-typography-label-sm-height`=`--tap-sys-typography-label-sm-height`] - The line height for the small button label.
* @cssprop [`--tap-button-typography-label-sm-size`=`--tap-sys-typography-label-sm-size`] - The font size for the small button label.
* @cssprop [`--tap-button-typography-label-sm-weight`=`--tap-sys-typography-label-sm-weight`] - The font weight for the small button label.
* @cssprop [`--tap-button-typography-label-md-height`=`--tap-sys-typography-label-sm-height`] - The line height for the medium button label.
* @cssprop [`--tap-button-typography-label-md-size`=`--tap-sys-typography-label-sm-size`] - The font size for the medium button label.
* @cssprop [`--tap-button-typography-label-md-weight`=`--tap-sys-typography-label-sm-weight`] - The font weight for the medium button label.
* @cssprop [`--tap-button-typography-label-lg-height`=`--tap-sys-typography-label-lg-height`] - The line height for the large button label.
* @cssprop [`--tap-button-typography-label-lg-size`=`--tap-sys-typography-label-lg-size`] - The font size for the large button label.
* @cssprop [`--tap-button-typography-label-lg-weight`=`--tap-sys-typography-label-lg-weight`] - The font weight for the large button label.
* @cssprop [`--tap-button-color-surface-inverse-primary`=`--tap-sys-color-surface-inverse-primary`] - The surface color for the primary variant.
* @cssprop [`--tap-sys-color-surface-inverse-primary`] - The surface color for the primary variant.
* @cssprop [`--tap-button-color-content-on-inverse`=`--tap-sys-color-content-on-inverse`] - The content color on inverse surface.
* @cssprop [`--tap-sys-color-content-on-inverse`] - The content color on inverse surface.
* @cssprop [`--tap-button-color-surface-tertiary`=`--tap-sys-color-surface-tertiary`] - The surface color for the ghost variant.
* @cssprop [`--tap-sys-color-surface-tertiary`] - The surface color for the ghost variant.
* @cssprop [`--tap-button-color-content-primary`=`--tap-sys-color-content-primary`] - The content color for the primary variant.
* @cssprop [`--tap-sys-color-content-primary`] - The content color for the primary variant.
* @cssprop [`--tap-button-color-surface-primary`=`--tap-sys-color-surface-primary`] - The surface color for the elevated variant.
* @cssprop [`--tap-sys-color-surface-primary`] - The surface color for the elevated variant.
* @cssprop [`--tap-button-color-surface-destructive`=`--tap-sys-color-surface-negative-light`] - The surface color for the destructive variant.
* @cssprop [`--tap-sys-color-surface-negative-light`] - The surface color for the destructive variant.
* @cssprop [`--tap-button-color-content-destructive`=`--tap-sys-color-content-negative`] - The content color for the destructive variant.
* @cssprop [`--tap-sys-color-content-negative`] - The content color for the destructive variant.
* @cssprop [`--tap-button-color-gradient-brand`=`--tap-sys-color-gradient-brand`] - The gradient color for the brand variant.
* @cssprop [`--tap-sys-color-gradient-brand`] - The gradient color for the brand variant.
*/
@customElement('tap-button')
export class TapButton extends Button {
static readonly styles = [baseButtonStyles, styles];
Expand Down
8 changes: 4 additions & 4 deletions src/icon-button/icon-button.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { expect, defineCE, fixture } from "@open-wc/testing";
import { TapIconButton } from "./";
import { expect, defineCE, fixture } from '@open-wc/testing';
import { TapIconButton } from './';

describe("Test tap-button", () => {
it("should pass", () => {
describe('Test tap-button', () => {
it('should pass', () => {
expect(true).to.equal(true);
});
});
102 changes: 102 additions & 0 deletions src/icon-button/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,108 @@ import { IconButton } from './icon-button';
import styles from './icon-button.style';
import { baseButtonStyles } from '../base-button';

/**
* ### Example
*
* ##### Simple
*
* ```html
* <tap-icon-button size="medium">
* <tap-icon name="check"></tap-icon>
* </tap-icon-button>
* ```
*
* ##### Disabled IconButton
*
* ```html
* <tap-icon-button disabled>
* <tap-icon name="check"></tap-icon>
* </tap-icon-button>
* ```
*
* ##### Variants
*
* ```html
* <tap-icon-button variant="primary">
* <tap-icon name="check"></tap-icon>
* </tap-icon-button>
* <tap-icon-button variant="ghost">
* <tap-icon name="check"></tap-icon>
* </tap-icon-button>
* <tap-icon-button variant="naked">
* <tap-icon name="check"></tap-icon>
* </tap-icon-button>
* <tap-icon-button variant="elevated">
* <tap-icon name="check"></tap-icon>
* </tap-icon-button>
* <tap-icon-button variant="destructive">
* <tap-icon name="check"></tap-icon>
* </tap-icon-button>
* <tap-icon-button variant="brand">
* <tap-icon name="check"></tap-icon>
* </tap-icon-button>
* ```
*
* ##### Sizes
*
* ```html
* <tap-icon-button size="small">
* <tap-icon name="check"></tap-icon>
* </tap-icon-button>
* <tap-icon-button size="medium">
* <tap-icon name="check"></tap-icon>
* </tap-icon-button>
* <tap-icon-button size="large">
* <tap-icon name="check"></tap-icon>
* </tap-icon-button>
* ```
*
* @summary A customizable icon button component with various styles and states.
*
* @prop {`boolean`} [`disabled`=`false`] - Whether the icon button is disabled.
* @prop {`'small'` \| `'medium'` \| `'large'`} [`size`=`'medium'`] - The size of the icon button.
* @prop {`'primary'` \| `'ghost'` \| `'naked'` \| `'elevated'` \| `'destructive'` \| `'brand'`} [`variant`=`'primary'`] - The variant style of the icon button.
*
* @csspart button - The button element.
*
* @cssprop [`--tap-font-family`=`--tap-sys-font-family`] - The font family for the button.
* @cssprop [`--tap-sys-radius-full`] - The border radius for the button.
* @cssprop [`--tap-button-color-surface-cover`=`--tap-sys-color-surface-overlay-light`] - The surface cover color for the button.
* @cssprop [`--tap-sys-color-surface-overlay-light`] - The overlay light color for the button.
* @cssprop [`--tap-sys-color-surface-disabled`] - The disabled surface color for the button.
* @cssprop [`--tap-button-color-surface-disabled`=`--tap-sys-color-surface-disabled`] - The disabled surface color for the button.
* @cssprop [`--tap-sys-spacing-9`] - The spacing for the small button height.
* @cssprop [`--tap-sys-spacing-10`] - The spacing for the medium button height.
* @cssprop [`--tap-sys-spacing-11`] - The spacing for the large button height.
* @cssprop [`--tap-sys-spacing-5`] - The spacing for the small button padding.
* @cssprop [`--tap-sys-spacing-6`] - The spacing for the medium button padding.
* @cssprop [`--tap-sys-spacing-8`] - The spacing for the large button padding.
* @cssprop [`--tap-button-typography-label-sm-height`=`--tap-sys-typography-label-sm-height`] - The line height for the small button label.
* @cssprop [`--tap-button-typography-label-sm-size`=`--tap-sys-typography-label-sm-size`] - The font size for the small button label.
* @cssprop [`--tap-button-typography-label-sm-weight`=`--tap-sys-typography-label-sm-weight`] - The font weight for the small button label.
* @cssprop [`--tap-button-typography-label-md-height`=`--tap-sys-typography-label-sm-height`] - The line height for the medium button label.
* @cssprop [`--tap-button-typography-label-md-size`=`--tap-sys-typography-label-sm-size`] - The font size for the medium button label.
* @cssprop [`--tap-button-typography-label-md-weight`=`--tap-sys-typography-label-sm-weight`] - The font weight for the medium button label.
* @cssprop [`--tap-button-typography-label-lg-height`=`--tap-sys-typography-label-lg-height`] - The line height for the large button label.
* @cssprop [`--tap-button-typography-label-lg-size`=`--tap-sys-typography-label-lg-size`] - The font size for the large button label.
* @cssprop [`--tap-button-typography-label-lg-weight`=`--tap-sys-typography-label-lg-weight`] - The font weight for the large button label.
* @cssprop [`--tap-button-color-surface-inverse-primary`=`--tap-sys-color-surface-inverse-primary`] - The surface color for the primary variant.
* @cssprop [`--tap-sys-color-surface-inverse-primary`] - The surface color for the primary variant.
* @cssprop [`--tap-button-color-content-on-inverse`=`--tap-sys-color-content-on-inverse`] - The content color on inverse surface.
* @cssprop [`--tap-sys-color-content-on-inverse`] - The content color on inverse surface.
* @cssprop [`--tap-button-color-surface-tertiary`=`--tap-sys-color-surface-tertiary`] - The surface color for the ghost variant.
* @cssprop [`--tap-sys-color-surface-tertiary`] - The surface color for the ghost variant.
* @cssprop [`--tap-button-color-content-primary`=`--tap-sys-color-content-primary`] - The content color for the primary variant.
* @cssprop [`--tap-sys-color-content-primary`] - The content color for the primary variant.
* @cssprop [`--tap-button-color-surface-primary`=`--tap-sys-color-surface-primary`] - The surface color for the elevated variant.
* @cssprop [`--tap-sys-color-surface-primary`] - The surface color for the elevated variant.
* @cssprop [`--tap-button-color-surface-destructive`=`--tap-sys-color-surface-negative-light`] - The surface color for the destructive variant.
* @cssprop [`--tap-sys-color-surface-negative-light`] - The surface color for the destructive variant.
* @cssprop [`--tap-button-color-content-destructive`=`--tap-sys-color-content-negative`] - The content color for the destructive variant.
* @cssprop [`--tap-sys-color-content-negative`] - The content color for the destructive variant.
* @cssprop [`--tap-button-color-gradient-brand`=`--tap-sys-color-gradient-brand`] - The gradient color for the brand variant.
* @cssprop [`--tap-sys-color-gradient-brand`] - The gradient color for the brand variant.
*/
@customElement('tap-icon-button')
export class TapIconButton extends IconButton {
static readonly styles = [baseButtonStyles, styles];
Expand Down

0 comments on commit f30cbc7

Please sign in to comment.