@appquality/unguess-design-system 2.3.0 → 2.4.1

package/build/stories/dropdowns/item/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ItemArgs } from "./_types";
+declare const Item: (props: ItemArgs) => JSX.Element;
+export { Item };

package/build/stories/dropdowns/menu/_types.d.ts

@@ -0,0 +1,31 @@
+import { IMenuProps } from "@zendeskgarden/react-dropdowns";
+export interface MenuArgs extends IMenuProps {
+    /**
+     * Allows the menu to reposition during browser resize events
+     */
+    eventsEnabled?: boolean;
+    /**
+     * Sets the `z-index` of the menu
+     */
+    zIndex?: number;
+    /**
+     * Adjusts the placement of the menu
+     */
+    placement?: 'auto' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'end' | 'end-top' | 'end-bottom' | 'start' | 'start-top' | 'start-bottom';
+    /**
+     * Animates the menu
+     */
+    isAnimated?: boolean;
+    /**
+     * Applies compact styling
+     */
+    isCompact?: boolean;
+    /**
+     * Attaches an arrow that points towards the menu trigger
+     */
+    hasArrow?: boolean;
+    /**
+     * Sets the `max-height` of the menu
+     */
+    maxHeight?: string;
+}

package/build/stories/dropdowns/menu/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { MenuArgs } from "./_types";
+/**
+   * A Menu is a wrapper for items elements
+   **/
+declare const Menu: (props: MenuArgs) => JSX.Element;
+export { Menu };

package/build/stories/dropdowns/multiselect/_types.d.ts

@@ -0,0 +1,17 @@
+import { IMultiselectProps } from "@zendeskgarden/react-dropdowns";
+export interface MultiselectArgs extends IMultiselectProps {
+    /** Applies compact styling */
+    isCompact?: boolean;
+    /** Removes borders and padding */
+    isBare?: boolean;
+    /** Indicates that the element is not interactive */
+    disabled?: boolean;
+    /** Applies inset `box-shadow` styling on focus */
+    focusInset?: boolean;
+    /** Defines text that appears in the element when no items are selected */
+    placeholder?: string;
+    /** Defines the element's validation state */
+    validation?: "success" | "warning" | "error";
+    /** Determines the maximum number of items displayed while collapsed */
+    maxItems?: number;
+}

package/build/stories/dropdowns/multiselect/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { MultiselectArgs } from "./_types";
+/**
+ * Multiselect lets users select multiple items from a list. Options are dynamically filtered as a user types in the input field and their selections appear as tags in the input field.
+ * <hr>
+ * Used for this:
+    - To choose multiple items from a list of options
+    - To filter through a set of data by typing
+ */
+declare const Multiselect: (props: MultiselectArgs) => JSX.Element;
+export { Multiselect };

package/build/stories/dropdowns/multiselect/index.stories.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { MultiselectArgs } from "./_types";
+import { MenuArgs } from "../../menu/_types";
+import { DropdownArgs } from "../select/_types";
+interface IItem {
+    label: string;
+    value: string;
+}
+interface MenuStoryArgs {
+    dropdown: DropdownArgs;
+    menu: MenuArgs;
+    items: Array<IItem>;
+    select: MultiselectArgs;
+    validation?: "success" | "warning" | "error";
+    hasHelpText?: boolean;
+}
+export declare const Default: Story<MenuStoryArgs>;
+export declare const Validation: Story<MenuStoryArgs>;
+declare const _default: ComponentMeta<(props: MultiselectArgs) => JSX.Element>;
+export default _default;

package/build/stories/dropdowns/select/_types.d.ts

@@ -1,4 +1,4 @@
-import { IDropdownProps, ISelectProps } from "@zendeskgarden/react-dropdowns";
+import { IDropdownProps, ISelectProps, IMessageProps } from "@zendeskgarden/react-dropdowns";
 export interface DropdownArgs extends IDropdownProps {
     /** Opens the dropdown */
     isOpen?: boolean;
@@ -25,3 +25,7 @@ export interface SelectArgs extends ISelectProps {
     /** Defines the icon rendered before the element's content */
     start?: any;
 }
+export interface MessageArgs extends IMessageProps {
+    /** Applies styles based on validation state */
+    validation?: 'success' | 'warning' | 'error';
+}

package/build/stories/dropdowns/select/index.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { SelectArgs, DropdownArgs, MessageArgs } from "./_types";
+/**
+ * Select allows a user to pick one option from a list. This helps simplify the UI when space is limited
+ * <hr>
+ * Used for this:
+    - To make a selection from a list of options
+ * Not for this:
+    - To filter a large list of options, use Autocomplete instead
+    - To make multiple selections from a list, use Multiselect instead
+    - To select from a list on mobile, use a native Select instead
+ */
+declare const Select: (props: SelectArgs) => JSX.Element;
+declare const Dropdown: (props: DropdownArgs) => JSX.Element;
+declare const Message: (props: MessageArgs) => JSX.Element;
+export { Select, Dropdown, Message };

package/build/stories/dropdowns/select/index.stories.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { DropdownArgs, SelectArgs } from "./_types";
+import { MenuArgs } from "../../menu/_types";
+interface IItem {
+    label: string;
+    value: string;
+}
+interface MenuStoryArgs {
+    dropdown: DropdownArgs;
+    menu: MenuArgs;
+    items: Array<IItem>;
+    select: SelectArgs;
+    validation?: "success" | "warning" | "error";
+    hasHelpText?: boolean;
+}
+export declare const Default: Story<MenuStoryArgs>;
+export declare const Validation: Story<MenuStoryArgs>;
+declare const _default: ComponentMeta<(props: DropdownArgs) => JSX.Element>;
+export default _default;

package/build/stories/forms/radio/_types.d.ts

@@ -0,0 +1,3 @@
+import { IRadioProps } from "@zendeskgarden/react-forms";
+export interface RadioArgs extends IRadioProps {
+}

package/build/stories/forms/radio/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { RadioArgs } from "./_types";
+/**
+   * Radio buttons let users choose a single option among two or more mutually exclusive options.
+   * <hr>
+   * Used for this:
+   *  - For choices or options that can't occur at the same time
+   *  - To indicate that two or more options are mutually exclusive
+   * Not for this:
+   *  - If the user can choose more than one option at once, use a Checkbox instead
+   *  - To select from a long list of options, use Select instead
+   **/
+declare const Radio: (props: RadioArgs) => JSX.Element;
+export { Radio };

package/build/stories/forms/radio/index.stories.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { RadioArgs } from "./_types";
+export declare const Default: Story<RadioArgs>;
+export declare const Checked: Story<RadioArgs>;
+declare const _default: ComponentMeta<(props: RadioArgs) => JSX.Element>;
+export default _default;

package/build/stories/forms/textarea/_types.d.ts

@@ -0,0 +1,15 @@
+import { ITextareaProps } from "@zendeskgarden/react-forms";
+export interface TextareaArgs extends ITextareaProps {
+    /** Removes borders and padding */
+    isBare?: boolean;
+    /** Applies inset `box-shadow` styling on focus */
+    focusInset?: boolean;
+    /** Enables manual vertical resize */
+    isResizable?: boolean;
+    /** Defines the minimum height in rows */
+    minRows?: number;
+    /** Defines the maximum height in rows */
+    maxRows?: number;
+    /** Applies validation state styling */
+    validation?: 'success' | 'warning' | 'error';
+}

package/build/stories/forms/textarea/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { TextareaArgs } from "./_types";
+/**
+   * A Textarea is a form control for multi-line text.
+   * <hr>
+   * Used for this:
+   *  - To enter multi-line text
+   **/
+declare const Textarea: (props: TextareaArgs) => JSX.Element;
+export { Textarea };

package/build/stories/forms/textarea/index.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { TextareaArgs } from "./_types";
+export declare const Default: Story<TextareaArgs>;
+export declare const Warning: Story<TextareaArgs>;
+export declare const Resize: Story<TextareaArgs>;
+declare const _default: ComponentMeta<(props: TextareaArgs) => JSX.Element>;
+export default _default;

package/build/stories/forms/toggle/_types.d.ts

@@ -0,0 +1,3 @@
+import { IToggleProps } from "@zendeskgarden/react-forms";
+export interface ToggleArgs extends IToggleProps {
+}

package/build/stories/forms/toggle/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ToggleArgs } from "./_types";
+/**
+   * A Toggle lets users turn something on and off like a light switch. Unlike a Checkbox, which is used for selection, a Toggle is used for activation.
+   * <hr>
+   * Used for this:
+   *  - To see or compare the results of a settings change
+   *  - To activate a mode (such as "dark mode") which takes immediate effect
+   * Not for this:
+   *  - To let users select from a list of settings, use Checkboxes instead
+   **/
+declare const Toggle: (props: ToggleArgs) => JSX.Element;
+export { Toggle };

package/build/stories/forms/toggle/index.stories.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { LabelArgs } from "../../label/_types";
+import { ToggleArgs } from "./_types";
+interface ToggleStoryProps extends ToggleArgs {
+    label: LabelArgs;
+}
+export declare const Default: Story<ToggleStoryProps>;
+declare const _default: ComponentMeta<(props: ToggleArgs) => JSX.Element>;
+export default _default;

package/build/stories/login-form/_types.d.ts

@@ -0,0 +1,23 @@
+import { FormikTouched, FormikErrors, FormikValues } from "formik";
+export interface LoginFormArgs {
+    /**
+     * Handles accordion expansion changes
+     *
+     * @param {number} index A section index
+     */
+    onSubmit: (values: FormikValues, actions: any) => void | Promise<any> | any;
+    onBlur?: (formData: any) => void;
+    validate?: (values: FormikValues) => void | object | Promise<FormikErrors<LoginFields>>;
+    validateOnChange: boolean;
+    errors: FormikErrors<any>;
+    touched: FormikTouched<any>;
+    initialValues: LoginFields;
+    title: string;
+    buttonText: string;
+    placeholderEmail: string;
+    placeholderPassword: string;
+}
+export interface LoginFields {
+    email: string;
+    password: string;
+}

package/build/stories/login-form/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { LoginFormArgs } from "./_types";
+/**
+ * Login Form
+ * <hr>
+ * Used for this:
+    - Login user to the application
+ */
+declare const LoginForm: (props: LoginFormArgs) => JSX.Element;
+export { LoginForm };

package/build/stories/login-form/index.stories.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { LoginFormArgs } from "./_types";
+export declare const Default: Story<LoginFormArgs>;
+export declare const Filled: Story<LoginFormArgs>;
+declare const _default: ComponentMeta<(props: LoginFormArgs) => JSX.Element>;
+export default _default;

package/build/stories/logo/_types.d.ts

@@ -0,0 +1,14 @@
+import { ImgHTMLAttributes } from 'react';
+export interface LogoArgs extends ImgHTMLAttributes<HTMLImageElement> {
+    /** Specifies the kind of logo */
+    type: Type;
+    /** Specifies the css class */
+    className: string;
+    /** Sets the image dimension */
+    size: number;
+}
+export declare enum Type {
+    vertical = "vertical",
+    horizontal = "horizontal",
+    icon = "icon"
+}

package/build/stories/logo/index.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import PropTypes from "prop-types";
+import { LogoArgs, Type } from './_types';
+/**
+ * A Logo is a visual way to represent a brand logo.
+ * <hr>
+ * Used for this:
+ *  - To visually represent a brand or product
+ *
+ * Not for this:
+ *  - To visually represent a common image
+ */
+declare const Logo: {
+    (props: LogoArgs): JSX.Element;
+    propTypes: {
+        type: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        size: PropTypes.Requireable<number>;
+    };
+    defaultProps: {
+        type: Type;
+        size: number;
+        style: {};
+        className: string;
+    };
+};
+export { Logo };

package/build/stories/logo/index.stories.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { LogoArgs } from "./_types";
+export declare const Default: Story<LogoArgs>;
+declare const _default: ComponentMeta<{
+    (props: LogoArgs): JSX.Element;
+    propTypes: {
+        type: import("prop-types").Requireable<string>;
+        className: import("prop-types").Requireable<string>;
+        size: import("prop-types").Requireable<number>;
+    };
+    defaultProps: {
+        type: import("./_types").Type;
+        size: number;
+        style: {};
+        className: string;
+    };
+}>;
+export default _default;

package/build/stories/pagination/_types.d.ts

@@ -0,0 +1,34 @@
+import { IPaginationProps, PAGE_TYPE } from "@zendeskgarden/react-pagination";
+export interface PaginationProps extends IPaginationProps {
+    /**
+       * Sets the current page. Pages start at 1.
+       */
+    currentPage: number;
+    /**
+     * Defines the total number of pages
+     */
+    totalPages: number;
+    /**
+     * Sets the number of pages that appear between the current page and a gap indicator
+     */
+    pagePadding?: number;
+    /**
+     * Positions the leading and trailing gap indicator, based on
+     * the current and total pages
+     */
+    pageGap?: number;
+    /**
+     * Handles page change events
+     *
+     * @param {any} currentPage The current page
+     */
+    onChange?: (currentPage: number) => void;
+    /**
+     * Applies localized labels, test attributes, etc. to individual pages
+     *
+     * @param {string} pageType The type of the page accepting the props; one of:
+     * "previous", "gap", "page", "next"
+     * @param {any} props Default page props to transform
+     */
+    transformPageProps?: (pageType: PAGE_TYPE, props: any) => any;
+}

package/build/stories/pagination/index.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { PaginationProps } from './_types';
+/**
+ * Pagination separates content into pages and allows users to navigate between those pages.
+
+ * Used for this:
+    - To divide large amounts of data into manageable chunks
+
+ */
+declare const Pagination: (props: PaginationProps) => JSX.Element;
+declare const CursorPagination: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>> & {
+    First: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+    Last: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+    Next: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+    Previous: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export { Pagination, CursorPagination };

package/build/stories/pagination/index.stories.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { PaginationProps } from "./_types";
+export declare const CursorPagination: Story<PaginationProps>;
+export declare const NumberedPagination: Story<PaginationProps>;
+declare const _default: ComponentMeta<(props: PaginationProps) => JSX.Element>;
+export default _default;

package/build/stories/table/_types.d.ts

@@ -0,0 +1,54 @@
+import { ITableProps, IRowProps, ICellProps, IHeaderCellProps } from "@zendeskgarden/react-tables";
+import { SIZE } from "@zendeskgarden/react-tables/dist/typings/styled";
+export interface TableProps extends ITableProps {
+    /** Sets the table size */
+    size?: SIZE;
+    /** Removes interactive styling from table rows */
+    isReadOnly?: boolean;
+}
+export interface HeaderCellArgs extends IHeaderCellProps {
+    /** Applies striped styling */
+    isStriped?: boolean;
+    /** @ignore Applies focus styling */
+    isFocused?: boolean;
+    /** @ignore Applies hover styling */
+    isHovered?: boolean;
+    /** Applies selected styling */
+    isSelected?: boolean;
+}
+export interface RowArgs extends IRowProps {
+    /** Applies striped styling */
+    isStriped?: boolean;
+    /** @ignore Applies focus styling */
+    isFocused?: boolean;
+    /** @ignore Applies hover styling */
+    isHovered?: boolean;
+    /** Applies selected styling */
+    isSelected?: boolean;
+}
+export interface CellArgs extends ICellProps {
+    /**
+     * Applies minimum fixed width styling (e.g. for cells that contain
+     * checkboxes or icons)
+     */
+    isMinimum?: boolean;
+    /** Truncates long text with an ellipsis */
+    isTruncated?: boolean;
+    /** Applies styling for a cell that contains an overflow menu */
+    hasOverflow?: boolean;
+    /** Adjusts the [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width) of the cell */
+    width?: string | number;
+}
+export interface HeadArgs extends ICellProps {
+    /**
+     * Applies minimum fixed width styling (e.g. for cells that contain
+     * checkboxes or icons)
+     */
+    isMinimum?: boolean;
+    /** Truncates long text with an ellipsis */
+    isTruncated?: boolean;
+    /** Applies styling for a cell that contains an overflow menu */
+    hasOverflow?: boolean;
+    /** Adjusts the [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width) of the cell */
+    width?: string | number;
+}

package/build/stories/table/index.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from 'react';
+import { CellArgs, HeaderCellArgs, RowArgs, TableProps } from './_types';
+/**
+ * A Table organizes data into columns and rows. Tables make it easier for users to compare and analyze information.
+
+ * Used for this:
+    - To organize and display read-only data with logical relationships
+
+ * Not for this:
+    - To structure content on a page, use the Grid component instead
+ */
+declare const Table: (props: TableProps) => JSX.Element;
+declare const Head: (props: HTMLAttributes<HTMLTableSectionElement>) => JSX.Element;
+declare const HeaderRow: (props: RowArgs) => JSX.Element;
+declare const HeaderCell: (props: HeaderCellArgs) => JSX.Element;
+declare const Body: (props: HTMLAttributes<HTMLTableSectionElement>) => JSX.Element;
+declare const Row: (props: RowArgs) => JSX.Element;
+declare const Cell: (props: CellArgs) => JSX.Element;
+declare const GroupRow: (props: RowArgs) => JSX.Element;
+declare const Caption: (props: HTMLAttributes<HTMLTableCaptionElement>) => JSX.Element;
+export { Table, Head, HeaderRow, HeaderCell, Body, Row, Cell, GroupRow, Caption };

package/build/stories/table/index.stories.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { TableProps } from "./_types";
+interface IRow {
+    id?: number | string;
+    groupName?: string;
+    fruit?: string;
+    sunExposure?: string;
+    soil?: string;
+    selected?: boolean;
+}
+interface TableStoryArg extends TableProps {
+    columns: Array<string>;
+    items: Array<IRow>;
+    isStriped?: boolean;
+    hasCaption?: boolean;
+    isTruncated?: boolean;
+}
+export declare const Default: Story<TableStoryArg>;
+export declare const Grouped: Story<TableStoryArg>;
+export declare const WithPagination: Story<TableStoryArg>;
+/** STRIPED */
+export declare const Striped: Story<TableStoryArg>;
+/** WITH CAPTION */
+export declare const WithCaption: Story<TableStoryArg>;
+/** TRUNCATED */
+export declare const Truncated: Story<TableStoryArg>;
+export declare const Scroll: Story<TableStoryArg>;
+export declare const Selection: Story<TableStoryArg>;
+export declare const VirtualScrolling: Story<TableStoryArg>;
+declare const _default: ComponentMeta<(props: TableProps) => JSX.Element>;
+export default _default;

package/build/stories/tags/_types.d.ts

@@ -0,0 +1,17 @@
+import { ITagProps } from '@zendeskgarden/react-tags';
+export interface TagArgs extends ITagProps {
+    /** Adjusts font size and padding */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Sets the color of the tag. Refer to
+     * [PALETTE](/components/palette#palette)
+     * for available colors. Accepts any hex value.
+     */
+    hue?: string;
+    /** Applies pill styling */
+    isPill?: boolean;
+    /** Applies styles to round the tag */
+    isRound?: boolean;
+    /** Applies regular (non-bold) font weight */
+    isRegular?: boolean;
+}

package/build/stories/tags/index.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { TagArgs } from "./_types";
+/**
+ * Tags let users categorize content using a keyword.
+
+ * Used for this:
+    - To add metadata to an element such as category, attribute, or property
+    - To communicate status
+    - To represent parameters of a filter
+
+ * Not for this:
+    - To prompt an action by the user, use a Button instead
+ */
+declare const Tag: {
+    (props: TagArgs): JSX.Element;
+    Avatar: {
+        (props: import("react").HTMLAttributes<HTMLElement>): JSX.Element;
+        displayName: string;
+    };
+    Close: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export { Tag };

package/build/stories/tags/index.stories.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { TagArgs } from "./_types";
+interface TagStoryProps extends TagArgs {
+    canBeClosed: boolean;
+    hasAvatar: boolean;
+}
+export declare const Default: Story<TagStoryProps>;
+export declare const Avatar: Story<TagStoryProps>;
+export declare const Close: Story<TagStoryProps>;
+declare const _default: ComponentMeta<{
+    (props: TagArgs): JSX.Element;
+    Avatar: {
+        (props: import("react").HTMLAttributes<HTMLElement>): JSX.Element;
+        displayName: string;
+    };
+    Close: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+}>;
+export default _default;

package/build/stories/theme/gradients.d.ts

@@ -0,0 +1,4 @@
+export declare const gradients: {
+    horizontal: string;
+    dark: string;
+};