@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/danger-button/danger-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"danger-button.js","sourceRoot":"","sources":["../../../components/danger-button/danger-button.ts"],"names":[],"mappings":"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","sourcesContent":["import classnames from 'classnames';\nimport { html, nothing } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport '../icon/icon';\nimport '../loading-spinner/loading-spinner';\nimport { property, query } from 'lit/decorators.js';\nimport styles from './danger-button.styles.js';\nimport { Cre8FormElement } from '../cre8-form-element';\n\n/**\n     * The size and state of buttons on the screen serve as visual cues for the user\n     * about what they can do and what they should do next.\n     * They indicate the availability and priority of the action on the page.\n     *\n     * - Buttons are a single call-to-action where a single click performs that action\n     * - Use Danger Buttons when you are performing an action that is potentially dangerous,\n     * such as permanently deleting information\n     * - Use a link instead of a button when you're navigating to another place\n     *\n     * ## How to Use\n     *\n     * Danger Buttons are distinguished by three key properties:\n     *\n     * - **Visual Priority**: Style and size: Primary, Secondary, or Tertiary styles;\n     *   each with large and small variations\n     * - **State**: Interaction state: hover/click (press), focus, disabled,\n     *   and submitting/loading (only for large buttons)\n     * - **Brand**: Styles determined by the site or component theme\n     *\n     * ### Usage Guidelines\n     *\n     * Primary, Secondary and Tertiary styles emphasize or de-emphasize an action. They also define\n     * background, font style, and border colors. Large and small sizing assists with visual priority by defining button\n     * heights, left and right internal padding, and font-size.\n     *\n     * #### System Feedback\n     * Each button has a default and hover/click (press) state that give the user feedback\n     * that they have successfully interacted with a button.\n     * Button presses should always be combined with other types of timely system feedback.\n     * Examples of system feedback may be a page refresh, exposing additional controls or content,\n     * dialogs, alerts and notifications.\n     * If there is perceived a delay in system response, generally due to technical constraints,\n     * provide a progress or loading indicator.\n     *\n     * #### Button Text\n     *\n     * - Button text should be as short and simple as possible, ideally a maximum of 3 words.\n     * - Use Title Case for readability.\n     * - They should not include punctuation (exception: \"Loading...\").\n     * - They should not be used as an indicator of what happens on the next page, or as a substitute\n     * for a progress meter.\n     *\n     * #### Button Styling\n     *\n     * - DO use only the styles of the brand you are working on.\n     * - DO NOT combine styles, even if the page is co-branded.\n     *\n     * #### Button Sizes\n     * - DO always pair like sizes together and maintain the hierarchy of Primary and Secondary/Tertiary.\n     * - DO NOT mix sizes of buttons when they are used together as a group.\n     *\n     * #### Input Pairing\n     *\n     * Primary and Secondary buttons may be paired with input fields.\n     * Only one Primary button may appear on each screen.\n     * Use the Secondary button when there are multiple in-context buttons\n     * and/or when there is an emphasized page level button.\n     * When used in a form context, the button's `type` needs to be `submit` to pass along form data.\n     *\n     * - DO use only large buttons with input fields.\n     * - DO NOT use small buttons with input fields.\n     *\n     */\n\nexport class Cre8DangerButton extends Cre8FormElement {\n    static styles = [styles];\n\n    /**\n     *\n     * The button text. Should be as short and simple as possible, ideally a maximum of 3 words.\n     * - Use Title Case for readability.\n     * - Should not include punctuation (exception: \"Loading...\").\n     * - Should not be used as an indicator of what happens on the next page, or as a substitute for a progress meter.\n     */\n    @property()\n        text? = 'Button';\n\n    /**\n     * Style variant\n     * - **primary** renders the button used for primary actions. Presents highest visual priority.\n     *   When grouped with other buttons, only one primary is allowed\n     * - **secondary** renders a secondary button. Presents a lower visual priority\n     * - **tertiary** renders a tertiary button. Presents the lowest visual priority.\n     *   Should be used in limited amounts - consider if a link (`<a>`) would be more appropriate\n     */\n    @property({ type: String })\n        variant?: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n    /**\n     * Disabled attribute\n     * @attr {boolean}\n     *\n     * **NOTE**: Disabled states are used to indicate that an action is temporarily unavailable.\n     * In general, using disabled states is NOT advised. It should be clear to the user what actions they must\n     * take to activate the button. Real-time, field-level validation can help provide clarity.\n     */\n    @property({ type: Boolean, reflect: true })\n        disabled?: boolean;\n\n    /**\n     *\n     * Provide this property if you intend to use button styles for an anchor tag (`<a>`).\n     * This changes the component markup from `<button>` usage to `<a>` instead.\n     */\n    @property()\n        href?: string;\n\n    /**\n     * Target attribute for a link if providing `href` to style a link as a button\n     * - **_blank** yields a link that opens in a new tab\n     * - **_self** yields a link that loads the URL into the same browsing context as the current one.\n     *   This is the default behavior\n     * - **_parent** yields a link that loads the URL into the parent browsing context of the current one.\n     *   If there is no parent, this behaves the same way as _self\n     * - **_top** yields a link that loads the URL into the top-level browsing context.\n     *   If there is no parent, this behaves the same way as _self.\n     */\n    @property()\n        target?: '_blank' | '_self' | '_parent' | '_top';\n\n    /**\n     * Type of button.\n     * - **button** (default) button has no default behavior and does nothing unless provided some sort\n     * of client-side trigger\n     * - **submit** button for submitting form data to a server\n     */\n    @property()\n        type: 'button' | 'submit' | 'reset' = 'button';\n\n    /**\n     * Rel if this is an <a> element - this swaps <button> for <a>\n     */\n    @property()\n        rel?: string;\n\n    /**\n     * SVG raw string if including an icon within a button.\n     * Must include the icon's position with `iconPostion`. This prop is used for <cre8-icon>\n     */\n    @property()\n        svg?: string;\n\n    /**\n     * rotate is used for <cre8-icon> to set the arrow in the correct direction\n     */\n    @property({ type: Number })\n        iconRotateDegree?: number = 0;\n\n    /**\n     * flip is used for <cre8-icon> to set the icon in the correct direction\n     */\n    @property()\n        iconFlipDirection?: string;\n\n    /**\n     * Icon position. Must include the name of the icon with `iconName`\n     *\n     * - **before** places the icon before the button text\n     * - **after** places the icon after the button text\n     */\n    @property()\n        iconPosition?: 'before' | 'after' = undefined;\n\n    /**\n     * Size variants add another way to increase or decrease visual priority of a button.\n     * - **sm** shrinks the button typography and overall size from the default. Use when vertical space is constrained.\n     * - **lg** increases the button typography and overall size from the default.\n     */\n    @property()\n        size?: 'sm' | 'lg';\n\n    /**\n     * Visually hide button text. Text is still accessible to assistive technology.\n     * Use this for icon-only buttons for accessibility\n     */\n    @property({ type: Boolean, reflect: true })\n        hideText?: boolean;\n\n    /**\n     * Full width button\n     * @attr {boolean}\n     *\n     */\n    @property({ type: Boolean, reflect: true })\n        fullWidth?: boolean;\n\n    /**\n     * * Changes styling to an active state with a spinning icon.\n     * * Adds accessibility treatment by:\n     *   * announcing via voiceover when the loading success/error state via a aria-live region\n     *   * setting `aria-disabled`\n     * * Disables click events / form submitting while allowing focus (for accessibility)\n     * @attr {boolean}\n     *\n     */\n    @property({ type: Boolean, reflect: true })\n        loading?: boolean;\n\n    /**\n     * * Variant of the loading button that:\n     *   * Removes loading spinner\n     *   * Informs the SR user that the loading status is now complete, with visually hidden text in the live area\n     * @attr {boolean}\n     *\n     */\n    @property({ type: Boolean, reflect: true })\n        loadingComplete?: boolean;\n\n    /**\n     * Inverted colors Danger Button (onDark)\n     */\n    @property({ type: Boolean })\n        inverted?: boolean;\n\n    /**\n     * Controls whether your loading status update to voiceover users will occur\n     * immediately (used for more urgently needed updates) using `assertive` or at the next convenient\n     * pause in their navigation using `polite`.\n     */\n    @property()\n        ariaLive: 'polite' | 'assertive' = 'assertive';\n\n    /**\n     * Button aria expanded attribute\n     */\n    @property({ type: Boolean, reflect: true })\n        buttonAriaExpanded?: boolean;\n\n    @query('button')\n        field!: HTMLButtonElement;\n\n    formSubmit() {\n        const form = this._internals.form;\n        if (form) {\n            form.requestSubmit();\n        }\n    }\n\n    formReset() {\n        const form = this._internals.form;\n        if (form) {\n            form.reset();\n        }\n    }\n\n    private renderDangerButtonLink(componentClassName: string) {\n        return html`\n          <a\n              href=\"${ifDefined(this.href)}\"\n              class=\"${componentClassName}\"\n              rel=\"${ifDefined(this.rel)}\"\n              target=\"${ifDefined(this.target)}\"\n          >\n            ${this.iconPosition === 'before'\n        ? html`<cre8-icon width=\"16\" height=\"16\" aria-hidden=\"true\" svg=\"${ifDefined(this.svg)}\">\n        </cre8-icon>`\n        : nothing}\n      <span\n          class=\"${this.hideText ? 'cre8-u-is-vishidden cre8-c-danger-button__text' : 'cre8-c-danger-button__text'}\"\n      >\n          ${this.text}\n      </span>\n      ${this.iconPosition === 'after'\n        ? html`<cre8-icon width=\"16\" height=\"16\" aria-hidden=\"true\" svg=\"${ifDefined(this.svg)}\">\n        </cre8-icon> `\n        : nothing}\n      </a>\n        `;\n    }\n\n    private renderDangerButtonIconography() {\n        return html`\n        <cre8-icon width=\"16\" height=\"16\" aria-hidden=\"true\" svg=\"${this.svg}\"></cre8-icon>\n      `;\n    }\n\n    private renderDangerButtonLoading() {\n        return html`\n          <span class=\"cre8-c-danger-button__icon\" aria-live=\"${this.ariaLive}\" role=\"alert\">\n              <span class=\"cre8-u-is-vishidden\">${this.loadingComplete ? 'Loading Complete' : 'Loading'}</span>\n              ${!this.loadingComplete\n        ? html`\n          <cre8-loading-spinner\n              class=\"cre8-c-danger-button__loading-icon\"\n              inverted size=\"small\"\n              aria-hidden=\"true\"\n          ></cre8-loading-spinner>`\n        : nothing}\n              </span>`;\n    }\n\n    render() {\n        const componentClassName = classnames('cre8-c-danger-button', {\n            'cre8-c-danger-button--primary': this.variant === 'primary',\n            'cre8-c-danger-button--secondary': this.variant === 'secondary',\n            'cre8-c-danger-button--tertiary': this.variant === 'tertiary',\n            'cre8-c-danger-button--full-width': this.fullWidth === true,\n            'cre8-c-danger-button--sm': this.size === 'sm',\n            'cre8-c-danger-button--lg': this.size === 'lg',\n            'cre8-c-danger-button--icon-only': this.hideText,\n            'cre8-c-danger-button--loading': this.loading,\n            'cre8-c-danger-button--inverted': this.inverted,\n        });\n\n        if (this.hideText) {\n            this.iconPosition = 'after';\n        }\n\n        if (this.href) {\n            return html`${this.renderDangerButtonLink(componentClassName)}`;\n        }\n\n        return html`\n          <button\n            class=\"${componentClassName}\"\n            part=\"button\"\n            aria-disabled=${ifDefined(this.loading)}\n            ?disabled=${this.disabled}\n            @click=\"${this._buttonClick}\"\n            aria-expanded=${ifDefined(this.buttonAriaExpanded)}\n            type=${this.type}\n          >\n            ${this.iconPosition === 'before' && this.svg\n        ? this.renderDangerButtonIconography() : nothing\n}\n            <span\n              class=\"${this.hideText ? 'cre8-u-is-vishidden cre8-c-danger-button__text' : 'cre8-c-danger-button__text'}\"\n            >\n                ${this.text}\n            </span>\n            ${this.iconPosition === 'after' && this.svg\n        ? this.renderDangerButtonIconography() : nothing\n}\n            ${this.loading || this.loadingComplete\n        ? this.renderDangerButtonLoading() : nothing\n}\n          </button>`;\n    }\n\n    public _buttonClick(e: MouseEvent | KeyboardEvent) {\n        if (this.loading) {\n            e.stopPropagation();\n        } else {\n            switch (this.type) {\n                case 'submit':\n                    this.formSubmit();\n                    break;\n                case 'reset':\n                    this.formReset();\n                    break;\n                // no default\n            }\n        }\n    }\n}\n\nif (customElements.get('cre8-danger-button') === undefined) {\n    customElements.define('cre8-danger-button', Cre8DangerButton);\n}\n\ndeclare global { interface HTMLElementTagNameMap { 'cre8-danger-button': Cre8DangerButton; } }\n\nexport default Cre8DangerButton;\n"]}

package/lib/components/danger-button/danger-button.styles.d.ts

@@ -0,0 +1,3 @@
+declare const styles: import("lit").CSSResult;
+export default styles;
+//# sourceMappingURL=danger-button.styles.d.ts.map

package/lib/components/danger-button/danger-button.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"danger-button.styles.d.ts","sourceRoot":"","sources":["../../../components/danger-button/danger-button.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAylCV,CAAC;AACH,eAAe,MAAM,CAAC"}