@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/button/button.d.ts

@@ -0,0 +1,229 @@
+import { Cre8FormElement } from '../cre8-form-element';
+import '../icon/icon';
+import '../loading-spinner/loading-spinner';
+/**
+ * The size and state of buttons on the screen serve as visual cues for the user
+ * about what they can do and what they should do next.
+ * They indicate the availability and priority of the action on the page.
+ *
+ * - Buttons are a single call-to-action where a single click performs that action
+ * - Use buttons when you are performing an action which is almost always on the same page
+ * - Use a link instead of a button when you're navigating to another place
+ *
+ * ## How to Use
+ *
+ * Buttons are distinguished by three key properties:
+ *
+ * - **Visual Priority**: Style and size: Primary, Secondary, or Tertiary styles;
+ *   each with large and small variations
+ * - **State**: Interaction state: hover/click (press), focus, disabled,
+ *   and submitting/loading (only for large buttons)
+ * - **Brand**: Styles determined by the site or component theme
+ *
+ * ### Usage Guidelines
+ *
+ * Primary, Secondary and Tertiary styles emphasize or de-emphasize an action. They also define
+ * background, font style, and border colors. Large and small sizing assists with visual priority by defining button
+ * heights, left and right internal padding, and font-size.
+ *
+ * #### System Feedback
+ * Each button has a default and hover/click (press) state that give the user feedback
+ * that they have successfully interacted with a button.
+ * Button presses should always be combined with other types of timely system feedback.
+ * Examples of system feedback may be a page refresh, exposing additional controls or content,
+ * dialogs, alerts and notifications.
+ * If there is perceived a delay in system response, generally due to technical constraints,
+ * provide a progress or loading indicator.
+ *
+ * #### Button Text
+ *
+ * - Button text should be as short and simple as possible, ideally a maximum of 3 words.
+ * - Use Title Case for readability.
+ * - They should not include punctuation (exception: "Loading...").
+ * - They should not be used as an indicator of what happens on the next page, or as a substitute
+ * for a progress meter.
+ *
+ * #### Button With Icon
+ *
+ * For button with icon:
+ * - **iconRotateDegree** & **iconFlipDirection** props are optional.
+ * - They are used to set up the correct direction for icons, for example,
+ * arrows, caret up or caret down.
+ *
+ * #### Button Styling
+ *
+ * - DO use only the styles of the brand you are working on.
+ * - DO NOT combine styles, even if the page is co-branded.
+ *
+ * #### Button Sizes
+ * - DO always pair like sizes together and maintain the hierarchy of Primary and Secondary/Tertiary.
+ * - DO NOT mix sizes of buttons when they are used together as a group.
+ *
+ * #### Input Pairing
+ *
+ * Primary and Secondary buttons may be paired with input fields.
+ * Only one Primary button may appear on each screen.
+ * Use the Secondary button when there are multiple in-context buttons
+ * and/or when there is an emphasized page level button.
+ * When used in a form context, the button's `type` needs to be `submit` to pass along form data.
+ *
+ * - DO use only large buttons with input fields.
+ * - DO NOT use small buttons with input fields.
+ *
+ */
+export declare class Cre8Button extends Cre8FormElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * The button text. Should be as short and simple as possible, ideally a maximum of 3 words.
+     * - Use Title Case for readability.
+     * - Should not include punctuation (exception: "Loading...").
+     * - Should not be used as an indicator of what happens on the next page, or as a substitute for a progress meter.
+     */
+    text?: string;
+    /**
+     * Style variant
+     * - **primary** renders the button used for primary actions. Presents highest visual priority.
+     *   When grouped with other buttons, only one primary is allowed
+     * - **secondary** renders a secondary button. Presents a lower visual priority
+     * - **tertiary** renders a tertiary button. Presents the lowest visual priority.
+     *   Should be used in limited amounts - consider if a link (`<a>`) would be more appropriate
+     */
+    variant?: 'primary' | 'secondary' | 'tertiary';
+    /**
+     * Disabled attribute
+     * @attr {boolean}
+     *
+     * **NOTE**: Disabled states are used to indicate that an action is temporarily unavailable.
+     * In general, using disabled states is NOT advised. It should be clear to the user what actions they must
+     * take to activate the button. Real-time, field-level validation can help provide clarity.
+     */
+    disabled?: boolean;
+    /**
+     * This property is for a neutral button propery mainly used for the secondary or tertiary button variant.
+     * @attr {boolean)
+     */
+    neutral?: boolean;
+    /**
+    * Inverse attribute
+    * @attr {boolean}
+    *
+    * The inverse prop allows the button to work on either a light or dark surface.
+    */
+    inverse?: boolean;
+    /**
+     *
+     * Provide this property if you intend to use button styles for an anchor tag (`<a>`).
+     * This changes the component markup from `<button>` usage to `<a>` instead.
+     */
+    href?: string;
+    /**
+     * Target attribute for a link if providing `href` to style a link as a button
+     * - **_blank** yields a link that opens in a new tab
+     * - **_self** yields a link that loads the URL into the same browsing context as the current one.
+     *   This is the default behavior
+     * - **_parent** yields a link that loads the URL into the parent browsing context of the current one.
+     *   If there is no parent, this behaves the same way as _self
+     * - **_top** yields a link that loads the URL into the top-level browsing context.
+     *   If there is no parent, this behaves the same way as _self.
+     */
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    /**
+     * Type of button.
+     * - **button** (default) button has no default behavior and does nothing unless provided some sort
+     * of client-side trigger
+     * - **submit** button for submitting form data to a server
+     */
+    type: 'button' | 'submit' | 'reset';
+    /**
+     * Rel if this is an <a> element - this swaps <button> for <a>
+     */
+    rel?: string;
+    /**
+     * Deprecated: iconName, use svg instead
+     * Icon name if including an icon within a button.
+     * Must include the icon's position with `iconPostion`. This prop is used for <cre8-icon-legacy>
+     * @deprecated
+     */
+    iconName?: string;
+    /**
+     * svg as a raw string
+     * - For button with icon, the icon is defined by this prop.
+     * - Pass in a raw svg as a String for using <cre8-icon>
+     * - Must include the icon's position with `iconPostion`.
+     */
+    svg?: string;
+    /**
+     * iconRotateDegree is used for <cre8-icon> to set the arrow in the correct direction
+     */
+    iconRotateDegree?: number;
+    /**
+     * iconFlipDirection is used for <cre8-icon> to set the icon in the correct direction
+     */
+    iconFlipDirection?: string;
+    /**
+     * Icon position. Must include the name of the icon with `iconName`
+     *
+     * - **before** places the icon before the button text
+     * - **after** places the icon after the button text
+     */
+    iconPosition?: 'before' | 'after';
+    /**
+     * Size variants add another way to increase or decrease visual priority of a button.
+     * - **sm** Shrinks the button typography and overall size from the default. Use when vertical space is constrained.
+     * - **md** This is the default value for the size.
+     * - **lg** Increases the button typography and overall size from the default.
+     */
+    size: 'sm' | 'md' | 'lg';
+    /**
+     * Visually hide button text. Text is still accessible to assistive technology.
+     * Use this for icon-only buttons for accessibility
+     */
+    hideText?: boolean;
+    /**
+     * Full width button
+     * @attr {boolean}
+     *
+     */
+    fullWidth?: boolean;
+    /**
+     * * Changes styling to an active state with a spinning icon.
+     * * Adds accessibility treatment by:
+     *   * announcing via voiceover when the loading success/error state via a aria-live region
+     *   * setting `aria-disabled`
+     * * Disables click events / form submitting while allowing focus (for accessibility)
+     * @attr {boolean}
+     *
+     */
+    loading?: boolean;
+    /**
+     * * Variant of the loading button that:
+     *   * Removes loading spinner
+     *   * Informs the SR user that the loading status is now complete, with visually hidden text in the live area
+     * @attr {boolean}
+     *
+     */
+    loadingComplete?: boolean;
+    /**
+     * Controls whether your loading status update to voiceover users will occur
+     * immediately (used for more urgently needed updates) using `assertive` or at the next convenient
+     * pause in their navigation using `polite`.
+     */
+    ariaLive: 'polite' | 'assertive';
+    /**
+     * These two subvariants of the split button style the two seperate buttons to style as a singular button
+     */
+    splitButtonType?: 'text' | 'caret';
+    /**
+     * Button aria expanded attribute
+     */
+    buttonAriaExpanded?: boolean;
+    field: HTMLButtonElement;
+    formSubmit(): void;
+    formReset(): void;
+    private generateIconBefore;
+    private generateIconAfter;
+    render(): import("lit-html").TemplateResult<1>;
+    private _buttonClick;
+}
+export default Cre8Button;
+//# sourceMappingURL=button.d.ts.map

package/lib/components/button/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../components/button/button.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,cAAc,CAAC;AACtB,OAAO,oCAAoC,CAAC;AAG5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AAEH,qBAAa,UAAW,SAAQ,eAAe;IAC3C,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;;;OAKG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;;;;OAOG;IAEH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAa;IAE3D;;;;;;;OAOG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;MAKE;IAEF,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;;;;;;OASG;IAEH,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAEjD;;;;;OAKG;IAEH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE/C;;OAEG;IAEH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;;OAKG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;OAKG;IAEH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IAEH,gBAAgB,CAAC,EAAE,MAAM,CAAK;IAE9B;;OAEG;IAEH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;;;OAKG;IAEH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAa;IAE9C;;;;;OAKG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;;OAQG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;;OAMG;IAEH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;OAIG;IAEH,QAAQ,EAAE,QAAQ,GAAG,WAAW,CAAe;IAE/C;;OAEG;IAEH,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEnC;;OAEG;IAEH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAG7B,KAAK,EAAG,iBAAiB,CAAC;IAE1B,UAAU;IAOV,SAAS;IAOT,OAAO,CAAC,kBAAkB;IAe1B,OAAO,CAAC,iBAAiB;IAiBzB,MAAM;IA0EN,OAAO,CAAC,YAAY;CAevB;AAMD,eAAe,UAAU,CAAC"}