From 334ff2e437fd581c9b96c73a8cefb114cf48e737 Mon Sep 17 00:00:00 2001 From: Amir Hossein Alibakhshi Date: Tue, 28 May 2024 17:01:47 +0330 Subject: [PATCH 1/2] style: fix eslint --- src/toast/index.ts | 12 ++-- src/toast/toast.stories.ts | 49 ++++++++------ src/toast/toast.style.ts | 66 +++++++++++++----- src/toast/toast.ts | 133 ++++++++++++++++++++++++++++--------- 4 files changed, 184 insertions(+), 76 deletions(-) diff --git a/src/toast/index.ts b/src/toast/index.ts index 07d01d27..a6b9c01c 100644 --- a/src/toast/index.ts +++ b/src/toast/index.ts @@ -1,15 +1,15 @@ -import { customElement } from "lit/decorators.js"; -import { Toast } from "./toast"; -import styles from "./toast.style"; -import { LitElement, html } from "lit"; +import { customElement } from 'lit/decorators.js'; +import { Toast } from './toast'; +import styles from './toast.style'; +import { LitElement, html } from 'lit'; -@customElement("tap-toast") +@customElement('tap-toast') export class TapToast extends Toast { static readonly styles = [styles]; } declare global { interface HTMLElementTagNameMap { - "tap-toast": TapToast; + 'tap-toast': TapToast; } } diff --git a/src/toast/toast.stories.ts b/src/toast/toast.stories.ts index 5e775c22..60cfb56e 100644 --- a/src/toast/toast.stories.ts +++ b/src/toast/toast.stories.ts @@ -1,26 +1,32 @@ -import {html, TemplateResult} from "lit"; -import "./index.js"; -import "../button"; +import { html, TemplateResult } from 'lit'; +import './index.js'; +import '../button'; -const toastVariants: string[] = ["success", "error", "info", "inverse", "warning"] +const toastVariants: string[] = [ + 'success', + 'error', + 'info', + 'inverse', + 'warning', +]; export default { - title: "Toast", - component: "tap-toast", + title: 'Toast', + component: 'tap-toast', argTypes: { toastContent: { - control: "text", - description: "Toast Content", + control: 'text', + description: 'Toast Content', }, variant: { options: toastVariants, - control: { type: "inline-radio" }, - description: "The toast variant", + control: { type: 'inline-radio' }, + description: 'The toast variant', defaultValue: `"inverse"`, }, showDismissButton: { - description: "Should the Dismiss button be visible?", - control: { type: "boolean" }, + description: 'Should the Dismiss button be visible?', + control: { type: 'boolean' }, defaultValue: false, }, }, @@ -33,14 +39,14 @@ interface Story { } const defaultProps = { - toastContent: "toast text goes here!", + toastContent: 'toast text goes here!', showDismissButton: false, }; interface ArgTypes { - toastContent: string, - variant?: 'success' | 'error' | 'info' | 'warning' | 'inverse', - showDismissButton?: boolean, + toastContent: string; + variant?: 'success' | 'error' | 'info' | 'warning' | 'inverse'; + showDismissButton?: boolean; } const Template: Story = ({ @@ -48,7 +54,6 @@ const Template: Story = ({ toastContent, showDismissButton, }) => { - document.addEventListener('DOMContentLoaded', () => { const toastElement = document.getElementById('toast-story'); toastElement?.addEventListener('dismiss', () => { @@ -69,15 +74,15 @@ const Template: Story = ({ const VariantTemplate: Story<{}> = () => { return html` - ${toastVariants.map((variant) => html` - ${variant} - `)} + ${toastVariants.map( + (variant) => html` ${variant} `, + )} `; }; export const Simple = Template.bind({}); Simple.args = { - toastContent: "a simple toast", + toastContent: 'a simple toast', }; export const Variants = VariantTemplate.bind({}); @@ -85,6 +90,6 @@ Variants.args = {}; export const DismissButton = Template.bind({}); DismissButton.args = { - toastContent: "A toast with dismiss button", + toastContent: 'A toast with dismiss button', showDismissButton: true, }; diff --git a/src/toast/toast.style.ts b/src/toast/toast.style.ts index 233bcb59..e7ee73ee 100644 --- a/src/toast/toast.style.ts +++ b/src/toast/toast.style.ts @@ -1,4 +1,4 @@ -import { css } from "lit"; +import { css } from 'lit'; export default css` :host { @@ -37,9 +37,16 @@ export default css` width: 100%; font-family: var(--tap-font-family, var(--tap-sys-font-family)); border-radius: 999px; - padding: var(--tap-toast-vertical-padding, var(--tap-sys-spacing-5)) var(--tap-toast-horizontal-padding, var(--tap-sys-spacing-5)); - background-color: var(--tap-toast-background-color-default, var(--tap-sys-color-surface-inverse-secondary)); - color: var(--tap-toast-color-default, var(--tap-sys-color-content-on-inverse)); + padding: var(--tap-toast-vertical-padding, var(--tap-sys-spacing-5)) + var(--tap-toast-horizontal-padding, var(--tap-sys-spacing-5)); + background-color: var( + --tap-toast-background-color-default, + var(--tap-sys-color-surface-inverse-secondary) + ); + color: var( + --tap-toast-color-default, + var(--tap-sys-color-content-on-inverse) + ); } :host .icon { @@ -48,24 +55,48 @@ export default css` justify-content: center; } - :host([variant="success"]) .toast { - background-color: var(--tap-toast-background-color-success, var(--tap-sys-color-surface-positive)); - color: var(--tap-toast-color-success, var(--tap-sys-color-content-on-inverse)); + :host([variant='success']) .toast { + background-color: var( + --tap-toast-background-color-success, + var(--tap-sys-color-surface-positive) + ); + color: var( + --tap-toast-color-success, + var(--tap-sys-color-content-on-inverse) + ); } - :host([variant="error"]) .toast { - background-color: var(--tap-toast-background-color-error, var(--tap-sys-color-surface-negative)); - color: var(--tap-toast-color-error, var(--tap-sys-color-content-on-inverse)); + :host([variant='error']) .toast { + background-color: var( + --tap-toast-background-color-error, + var(--tap-sys-color-surface-negative) + ); + color: var( + --tap-toast-color-error, + var(--tap-sys-color-content-on-inverse) + ); } - :host([variant="info"]) .toast { - background-color: var(--tap-toast-background-color-info, var(--tap-sys-color-surface-accent)); + :host([variant='info']) .toast { + background-color: var( + --tap-toast-background-color-info, + var(--tap-sys-color-surface-accent) + ); color: var(--tap-toast-color-info, var(--tap-sys-color-content-on-inverse)); } - :host([variant="inverse"]) .toast { - background-color: var(--tap-toast-background-color-inverse, var(--tap-sys-color-surface-inverse-secondary)); - color: var(--tap-toast-color-inverse, var(--tap-sys-color-content-on-inverse)); + :host([variant='inverse']) .toast { + background-color: var( + --tap-toast-background-color-inverse, + var(--tap-sys-color-surface-inverse-secondary) + ); + color: var( + --tap-toast-color-inverse, + var(--tap-sys-color-content-on-inverse) + ); } - :host([variant="warning"]) .toast { - background-color: var(--tap-toast-background-color-warning, var(--tap-sys-color-surface-warning)); + :host([variant='warning']) .toast { + background-color: var( + --tap-toast-background-color-warning, + var(--tap-sys-color-surface-warning) + ); color: var(--tap-toast-color-warning, var(--tap-sys-color-content-primary)); } @@ -95,4 +126,3 @@ export default css` gap: inherit; } `; - diff --git a/src/toast/toast.ts b/src/toast/toast.ts index 0e4237f0..a534deb2 100644 --- a/src/toast/toast.ts +++ b/src/toast/toast.ts @@ -1,5 +1,5 @@ -import {html, LitElement, nothing} from "lit"; -import {property} from "lit/decorators.js"; +import { html, LitElement, nothing } from 'lit'; +import { property } from 'lit/decorators.js'; // TODO: after implementing the icon library, add the `icon` property to this component. export class Toast extends LitElement { @@ -10,51 +10,122 @@ export class Toast extends LitElement { private renderSuccessIcon() { return html` - - + + - ` + `; } private renderErrorIcon() { return html` - - + + - ` + `; } private renderInfoIcon() { return html` - - + + - ` + `; } private renderWarningIcon() { return html` - - + + - ` + `; } private renderDefaultIcon() { return html` - - - + + + - ` + `; } private renderCloseIcon() { return html` - - + + - ` + `; } private renderIcon() { @@ -65,15 +136,19 @@ export class Toast extends LitElement { return this.renderDefaultIcon(); } - @property({type: Boolean, attribute: 'show-dismiss-button'}) showDismissButton? = false; + @property({ type: Boolean, attribute: 'show-dismiss-button' }) + showDismissButton? = false; - @property() variant?: 'success' | 'error' | 'info' | 'warning' | 'inverse' = 'inverse'; + @property() variant?: 'success' | 'error' | 'info' | 'warning' | 'inverse' = + 'inverse'; private dispatchDismissEvent() { - this.dispatchEvent(new CustomEvent('dismiss', { - bubbles: true, - composed: true - })); + this.dispatchEvent( + new CustomEvent('dismiss', { + bubbles: true, + composed: true, + }), + ); } render() { @@ -87,9 +162,7 @@ export class Toast extends LitElement { aria-labelledby=${nothing} aria-describedby=${nothing} > - - ${this.renderIcon()} - + ${this.renderIcon()} From 997c232334be047f531ed485e4b9c8a6f8937287 Mon Sep 17 00:00:00 2001 From: Amir Hossein Alibakhshi Date: Tue, 28 May 2024 17:09:04 +0330 Subject: [PATCH 2/2] docs: add jsdoc --- src/toast/index.ts | 51 +++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 50 insertions(+), 1 deletion(-) diff --git a/src/toast/index.ts b/src/toast/index.ts index a6b9c01c..27d7d879 100644 --- a/src/toast/index.ts +++ b/src/toast/index.ts @@ -1,8 +1,57 @@ import { customElement } from 'lit/decorators.js'; import { Toast } from './toast'; import styles from './toast.style'; -import { LitElement, html } from 'lit'; +/** + * ### Example + * + * + * ##### Simple + * + * ```html + * Message + * ``` + * + * ##### Success Variant + * + * ```html + * Success message + * ``` + * + * ##### With Dismiss Button + * + * ```html + * Message with dismiss + * ``` + * + * @summary A toast notification component. + * + * @prop {`boolean`} [`show-dismiss-button`=`false`] - Indicates whether to show the dismiss button. + * @prop {`'success'` \| `'error'` \| `'info'` \| `'warning'` \| `'inverse'`} [`variant`=`'inverse'`] - The variant of the toast notification. Defaults to `inverse`. + * + * @csspart [`toast`] - The main container for the toast notification. + * @csspart [`icon`] - The container for the icon. + * @csspart [`message`] - The container for the message. + * @csspart [`dismiss`] - The container for the dismiss button. + * + * @cssprop [`--tap-toast-vertical-padding`=`--tap-sys-spacing-5`] - The vertical padding inside the toast. + * @cssprop [`--tap-toast-horizontal-padding`=`--tap-sys-spacing-5`] - The horizontal padding inside the toast. + * @cssprop [`--tap-toast-background-color-default`=`--tap-sys-color-surface-inverse-secondary`] - The default background color of the toast. + * @cssprop [`--tap-toast-color-default`=`--tap-sys-color-content-on-inverse`] - The default text color of the toast. + * @cssprop [`--tap-toast-background-color-success`=`--tap-sys-color-surface-positive`] - The background color of the success variant. + * @cssprop [`--tap-toast-color-success`=`--tap-sys-color-content-on-inverse`] - The text color of the success variant. + * @cssprop [`--tap-toast-background-color-error`=`--tap-sys-color-surface-negative`] - The background color of the error variant. + * @cssprop [`--tap-toast-color-error`=`--tap-sys-color-content-on-inverse`] - The text color of the error variant. + * @cssprop [`--tap-toast-background-color-info`=`--tap-sys-color-surface-accent`] - The background color of the info variant. + * @cssprop [`--tap-toast-color-info`=`--tap-sys-color-content-on-inverse`] - The text color of the info variant. + * @cssprop [`--tap-toast-background-color-warning`=`--tap-sys-color-surface-warning`] - The background color of the warning variant. + * @cssprop [`--tap-toast-color-warning`=`--tap-sys-color-content-primary`] - The text color of the warning variant. + * @cssprop [`--tap-toast-background-color-inverse`=`--tap-sys-color-surface-inverse-secondary`] - The background color of the inverse variant. + * @cssprop [`--tap-toast-color-inverse`=`--tap-sys-color-content-on-inverse`] - The text color of the inverse variant. + * @cssprop [`--tap-toast-dismiss-color`=`'inherit'`] - The color of the dismiss button. + * @cssprop [`--tap-toast-dismiss-background-color`=`transparent`] - The background color of the dismiss button. + * + */ @customElement('tap-toast') export class TapToast extends Toast { static readonly styles = [styles];