@appquality/unguess-design-system 2.8.4 → 2.8.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/storybook.yml +37 -37
- package/.prettierrc +3 -3
- package/CHANGELOG.md +588 -552
- package/README.md +73 -73
- package/generate-story.sh +60 -60
- package/package.json +119 -119
- package/build/hooks/useWindowSize.d.ts +0 -4
- package/build/index.d.ts +0 -63
- package/build/index.js +0 -2134
- package/build/stories/accordions/_types.d.ts +0 -25
- package/build/stories/accordions/index.d.ts +0 -17
- package/build/stories/accordions/index.stories.d.ts +0 -21
- package/build/stories/avatar/_types.d.ts +0 -19
- package/build/stories/avatar/index.d.ts +0 -13
- package/build/stories/avatar/index.stories.d.ts +0 -10
- package/build/stories/breadcrumbs/_types.d.ts +0 -5
- package/build/stories/breadcrumbs/index.d.ts +0 -11
- package/build/stories/breadcrumbs/index.stories.d.ts +0 -6
- package/build/stories/buttons/anchor/_types.d.ts +0 -11
- package/build/stories/buttons/anchor/index.d.ts +0 -12
- package/build/stories/buttons/anchor/index.stories.d.ts +0 -8
- package/build/stories/buttons/button/_types.d.ts +0 -30
- package/build/stories/buttons/button/index.d.ts +0 -22
- package/build/stories/buttons/button/index.stories.d.ts +0 -19
- package/build/stories/buttons/button-group/_types.d.ts +0 -5
- package/build/stories/buttons/button-group/index.d.ts +0 -9
- package/build/stories/buttons/button-group/index.stories.d.ts +0 -15
- package/build/stories/buttons/icon-button/_types.d.ts +0 -19
- package/build/stories/buttons/icon-button/index.d.ts +0 -14
- package/build/stories/buttons/icon-button/index.stories.d.ts +0 -9
- package/build/stories/buttons/shared/_shared.d.ts +0 -2
- package/build/stories/buttons/split-button/_types.d.ts +0 -2
- package/build/stories/buttons/split-button/index.d.ts +0 -11
- package/build/stories/buttons/split-button/index.stories.d.ts +0 -6
- package/build/stories/buttons/utils/useButtonVariant.d.ts +0 -5
- package/build/stories/campaignCards/_types.d.ts +0 -43
- package/build/stories/campaignCards/index.d.ts +0 -4
- package/build/stories/campaignCards/index.stories.d.ts +0 -7
- package/build/stories/cards/_types.d.ts +0 -7
- package/build/stories/cards/index.d.ts +0 -10
- package/build/stories/cards/index.stories.d.ts +0 -11
- package/build/stories/close/_types.d.ts +0 -3
- package/build/stories/close/index.d.ts +0 -7
- package/build/stories/close/index.stories.d.ts +0 -6
- package/build/stories/counter/_types.d.ts +0 -5
- package/build/stories/counter/index.d.ts +0 -13
- package/build/stories/counter/index.stories.d.ts +0 -15
- package/build/stories/dropdowns/field/_types.d.ts +0 -2
- package/build/stories/dropdowns/field/index.d.ts +0 -4
- package/build/stories/dropdowns/item/_types.d.ts +0 -9
- package/build/stories/dropdowns/item/index.d.ts +0 -4
- package/build/stories/dropdowns/menu/_types.d.ts +0 -47
- package/build/stories/dropdowns/menu/index.d.ts +0 -14
- package/build/stories/dropdowns/menu/index.stories.d.ts +0 -6
- package/build/stories/dropdowns/multiselect/_types.d.ts +0 -17
- package/build/stories/dropdowns/multiselect/index.d.ts +0 -11
- package/build/stories/dropdowns/multiselect/index.stories.d.ts +0 -21
- package/build/stories/dropdowns/select/_types.d.ts +0 -31
- package/build/stories/dropdowns/select/index.d.ts +0 -16
- package/build/stories/dropdowns/select/index.stories.d.ts +0 -20
- package/build/stories/forms/checkbox/_types.d.ts +0 -8
- package/build/stories/forms/checkbox/index.d.ts +0 -14
- package/build/stories/forms/checkbox/index.stories.d.ts +0 -6
- package/build/stories/forms/field/_types.d.ts +0 -3
- package/build/stories/forms/field/index.d.ts +0 -8
- package/build/stories/forms/field/index.stories.d.ts +0 -6
- package/build/stories/forms/input/_types.d.ts +0 -9
- package/build/stories/forms/input/index.d.ts +0 -11
- package/build/stories/forms/input/index.stories.d.ts +0 -9
- package/build/stories/forms/radio/_types.d.ts +0 -3
- package/build/stories/forms/radio/index.d.ts +0 -14
- package/build/stories/forms/radio/index.stories.d.ts +0 -7
- package/build/stories/forms/textarea/_types.d.ts +0 -15
- package/build/stories/forms/textarea/index.d.ts +0 -10
- package/build/stories/forms/textarea/index.stories.d.ts +0 -8
- package/build/stories/forms/toggle/_types.d.ts +0 -3
- package/build/stories/forms/toggle/index.d.ts +0 -13
- package/build/stories/forms/toggle/index.stories.d.ts +0 -10
- package/build/stories/grid/col/_types.d.ts +0 -77
- package/build/stories/grid/col/index.d.ts +0 -4
- package/build/stories/grid/col/index.stories.d.ts +0 -8
- package/build/stories/grid/grid/_types.d.ts +0 -9
- package/build/stories/grid/grid/index.d.ts +0 -10
- package/build/stories/grid/grid/index.stories.d.ts +0 -12
- package/build/stories/grid/row/_types.d.ts +0 -48
- package/build/stories/grid/row/index.d.ts +0 -4
- package/build/stories/grid/row/index.stories.d.ts +0 -10
- package/build/stories/icons/_types.d.ts +0 -7
- package/build/stories/icons/index.d.ts +0 -4
- package/build/stories/icons/index.stories.d.ts +0 -6
- package/build/stories/label/_types.d.ts +0 -5
- package/build/stories/label/index.d.ts +0 -8
- package/build/stories/label/index.stories.d.ts +0 -7
- package/build/stories/loaders/progress/_types.d.ts +0 -12
- package/build/stories/loaders/progress/index.d.ts +0 -14
- package/build/stories/loaders/progress/index.stories.d.ts +0 -6
- package/build/stories/loaders/skeleton/_types.d.ts +0 -9
- package/build/stories/loaders/skeleton/index.d.ts +0 -17
- package/build/stories/loaders/skeleton/index.stories.d.ts +0 -7
- package/build/stories/loaders/spinner/_types.d.ts +0 -19
- package/build/stories/loaders/spinner/index.d.ts +0 -11
- package/build/stories/loaders/spinner/index.stories.d.ts +0 -6
- package/build/stories/login-form/_types.d.ts +0 -29
- package/build/stories/login-form/index.d.ts +0 -10
- package/build/stories/login-form/index.stories.d.ts +0 -7
- package/build/stories/logo/_types.d.ts +0 -9
- package/build/stories/logo/index.d.ts +0 -13
- package/build/stories/logo/index.stories.d.ts +0 -6
- package/build/stories/modals/_types.d.ts +0 -34
- package/build/stories/modals/index.d.ts +0 -11
- package/build/stories/modals/index.stories.d.ts +0 -19
- package/build/stories/navigation/app-header/_types.d.ts +0 -18
- package/build/stories/navigation/app-header/index.d.ts +0 -8
- package/build/stories/navigation/app-header/index.stories.d.ts +0 -6
- package/build/stories/navigation/body/_types.d.ts +0 -5
- package/build/stories/navigation/body/index.d.ts +0 -7
- package/build/stories/navigation/chrome/_types.d.ts +0 -7
- package/build/stories/navigation/chrome/index.d.ts +0 -10
- package/build/stories/navigation/content/_types.d.ts +0 -2
- package/build/stories/navigation/content/index.d.ts +0 -7
- package/build/stories/navigation/header/_types.d.ts +0 -5
- package/build/stories/navigation/header/header-item/_types.d.ts +0 -32
- package/build/stories/navigation/header/header-item/brandItem.d.ts +0 -4
- package/build/stories/navigation/header/header-item/headerItem.d.ts +0 -4
- package/build/stories/navigation/header/header-item/headerItemIcon.d.ts +0 -4
- package/build/stories/navigation/header/header-item/headerItemText.d.ts +0 -4
- package/build/stories/navigation/header/header-item/index.d.ts +0 -5
- package/build/stories/navigation/header/header-item/utils.d.ts +0 -13
- package/build/stories/navigation/header/index.d.ts +0 -13
- package/build/stories/navigation/main/_types.d.ts +0 -2
- package/build/stories/navigation/main/index.d.ts +0 -7
- package/build/stories/navigation/nav/_types.d.ts +0 -5
- package/build/stories/navigation/nav/index.d.ts +0 -10
- package/build/stories/navigation/nav/nav-item/_types.d.ts +0 -29
- package/build/stories/navigation/nav/nav-item/index.d.ts +0 -7
- package/build/stories/navigation/nav/nav-item/navDivider.d.ts +0 -4
- package/build/stories/navigation/nav/nav-item/navItem.d.ts +0 -4
- package/build/stories/navigation/nav/nav-item/navItemIcon.d.ts +0 -4
- package/build/stories/navigation/nav/nav-item/navItemProject.d.ts +0 -8
- package/build/stories/navigation/nav/nav-item/navItemText.d.ts +0 -4
- package/build/stories/navigation/nav/nav-item/navToggle.d.ts +0 -4
- package/build/stories/navigation/sidebar/_types.d.ts +0 -17
- package/build/stories/navigation/sidebar/index.d.ts +0 -10
- package/build/stories/navigation/sidebar/index.stories.d.ts +0 -9
- package/build/stories/notifications/_types.d.ts +0 -9
- package/build/stories/notifications/index.d.ts +0 -20
- package/build/stories/notifications/index.stories.d.ts +0 -10
- package/build/stories/page/index.d.ts +0 -8
- package/build/stories/page/index.stories.d.ts +0 -6
- package/build/stories/pagination/_types.d.ts +0 -34
- package/build/stories/pagination/index.d.ts +0 -17
- package/build/stories/pagination/index.stories.d.ts +0 -7
- package/build/stories/profile-modal/UserContainer.d.ts +0 -3
- package/build/stories/profile-modal/_types.d.ts +0 -43
- package/build/stories/profile-modal/helpMenuItem.d.ts +0 -18
- package/build/stories/profile-modal/index.d.ts +0 -11
- package/build/stories/profile-modal/index.stories.d.ts +0 -6
- package/build/stories/profile-modal/languageMenuItem.d.ts +0 -14
- package/build/stories/profile-modal/menuItem.d.ts +0 -11
- package/build/stories/profile-modal/menuItemIcon.d.ts +0 -9
- package/build/stories/profile-modal/previousMenuButton.d.ts +0 -3
- package/build/stories/profile-modal/userMenu.d.ts +0 -3
- package/build/stories/profile-modal/utils.d.ts +0 -1
- package/build/stories/shared/globalStyle.d.ts +0 -2
- package/build/stories/table/_types.d.ts +0 -83
- package/build/stories/table/grouped.d.ts +0 -5
- package/build/stories/table/index.d.ts +0 -21
- package/build/stories/table/index.stories.d.ts +0 -18
- package/build/stories/tags/_types.d.ts +0 -17
- package/build/stories/tags/index.d.ts +0 -22
- package/build/stories/tags/index.stories.d.ts +0 -19
- package/build/stories/theme/gradients.d.ts +0 -4
- package/build/stories/theme/index.d.ts +0 -244
- package/build/stories/theme/mixins.d.ts +0 -3
- package/build/stories/theme/palette.d.ts +0 -141
- package/build/stories/theme/palette.stories.d.ts +0 -15
- package/build/stories/theme/utils.d.ts +0 -3
- package/build/stories/tiles/_types.d.ts +0 -12
- package/build/stories/tiles/index.d.ts +0 -22
- package/build/stories/tiles/index.stories.d.ts +0 -25
- package/build/stories/title/_types.d.ts +0 -5
- package/build/stories/title/index.d.ts +0 -7
- package/build/stories/title/index.stories.d.ts +0 -6
- package/build/stories/trigger/_types.d.ts +0 -3
- package/build/stories/trigger/index.d.ts +0 -7
- package/build/stories/typography/block-quote/_types.d.ts +0 -5
- package/build/stories/typography/block-quote/index.d.ts +0 -7
- package/build/stories/typography/block-quote/index.stories.d.ts +0 -5
- package/build/stories/typography/code/_types.d.ts +0 -7
- package/build/stories/typography/code/index.d.ts +0 -7
- package/build/stories/typography/code/index.stories.d.ts +0 -8
- package/build/stories/typography/ellipsis/_types.d.ts +0 -9
- package/build/stories/typography/ellipsis/index.d.ts +0 -7
- package/build/stories/typography/ellipsis/index.stories.d.ts +0 -5
- package/build/stories/typography/lists/_types.d.ts +0 -17
- package/build/stories/typography/lists/index.d.ts +0 -16
- package/build/stories/typography/lists/ordered.stories.d.ts +0 -9
- package/build/stories/typography/lists/unordered.stories.d.ts +0 -9
- package/build/stories/typography/paragraph/_types.d.ts +0 -5
- package/build/stories/typography/paragraph/index.d.ts +0 -7
- package/build/stories/typography/paragraph/index.stories.d.ts +0 -6
- package/build/stories/typography/span/_types.d.ts +0 -13
- package/build/stories/typography/span/index.d.ts +0 -13
- package/build/stories/typography/span/index.stories.d.ts +0 -6
- package/build/stories/typography/typescale/_types.d.ts +0 -43
- package/build/stories/typography/typescale/index.d.ts +0 -12
- package/build/stories/typography/typescale/index.stories.d.ts +0 -5
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { IAccordionProps } from "@zendeskgarden/react-accordions";
|
|
2
|
-
export interface AccordionArgs extends IAccordionProps {
|
|
3
|
-
/** Sets `aria-level` heading rank in the document structure */
|
|
4
|
-
level: number;
|
|
5
|
-
/** Sets the expanded sections in a controlled accordion */
|
|
6
|
-
expandedSections?: number[];
|
|
7
|
-
/** Sets the default expanded sections in an uncontrolled accordion */
|
|
8
|
-
defaultExpandedSections?: number[];
|
|
9
|
-
/** Hides section borders */
|
|
10
|
-
isBare?: boolean;
|
|
11
|
-
/** Allows uncontrolled accordion sections to collapse */
|
|
12
|
-
isCollapsible?: boolean;
|
|
13
|
-
/** Applies compact styling */
|
|
14
|
-
isCompact?: boolean;
|
|
15
|
-
/** Animates section expansion and collapse */
|
|
16
|
-
isAnimated?: boolean;
|
|
17
|
-
/** Enables simultaneous expansion of uncontrolled accordion sections */
|
|
18
|
-
isExpandable?: boolean;
|
|
19
|
-
/**
|
|
20
|
-
* Handles accordion expansion changes
|
|
21
|
-
*
|
|
22
|
-
* @param {number} index A section index
|
|
23
|
-
*/
|
|
24
|
-
onChange?: (index: number) => void;
|
|
25
|
-
}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { AccordionArgs } from './_types';
|
|
3
|
-
/**
|
|
4
|
-
* Accordions are headers that can be expanded to reveal content or collapsed to hide it.
|
|
5
|
-
* <hr>
|
|
6
|
-
* Used for this:
|
|
7
|
-
- To organize related information into sections
|
|
8
|
-
- To surface information through progressive disclosure
|
|
9
|
-
*/
|
|
10
|
-
declare const Accordion: {
|
|
11
|
-
(props: AccordionArgs): JSX.Element;
|
|
12
|
-
Section: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|
|
13
|
-
Header: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|
|
14
|
-
Label: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
15
|
-
Panel: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
|
|
16
|
-
};
|
|
17
|
-
export { Accordion };
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { ComponentMeta, Story } from "@storybook/react";
|
|
3
|
-
import { AccordionArgs } from "./_types";
|
|
4
|
-
interface AccordionStoryArg extends AccordionArgs {
|
|
5
|
-
items: Array<{
|
|
6
|
-
headerTitle: string;
|
|
7
|
-
content: string;
|
|
8
|
-
}>;
|
|
9
|
-
}
|
|
10
|
-
export declare const Default: Story<AccordionStoryArg>;
|
|
11
|
-
export declare const Bare: Story<AccordionStoryArg>;
|
|
12
|
-
export declare const Expandable: Story<AccordionStoryArg>;
|
|
13
|
-
export declare const Compact: Story<AccordionStoryArg>;
|
|
14
|
-
declare const _default: ComponentMeta<{
|
|
15
|
-
(props: AccordionArgs): JSX.Element;
|
|
16
|
-
Section: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|
|
17
|
-
Header: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|
|
18
|
-
Label: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
19
|
-
Panel: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
|
|
20
|
-
}>;
|
|
21
|
-
export default _default;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { IAvatarProps } from '@zendeskgarden/react-avatars';
|
|
2
|
-
export interface AvatarArgs extends IAvatarProps {
|
|
3
|
-
/** Sets the avatar background color */
|
|
4
|
-
backgroundColor?: string;
|
|
5
|
-
/** Sets the color for child SVG or `Avatar.Text` components */
|
|
6
|
-
foregroundColor?: string;
|
|
7
|
-
/** Provides surface color for an avatar placed on a non-white background */
|
|
8
|
-
surfaceColor?: string;
|
|
9
|
-
/** Applies system styling for representing objects, brands, or products */
|
|
10
|
-
isSystem?: boolean;
|
|
11
|
-
/** Specifies the avatar size */
|
|
12
|
-
size?: 'extraextrasmall' | 'extrasmall' | 'small' | 'medium' | 'large';
|
|
13
|
-
/** Applies status styling */
|
|
14
|
-
status?: 'available' | 'away';
|
|
15
|
-
/** Sets the badge text and applies active styling */
|
|
16
|
-
badge?: string | number;
|
|
17
|
-
/** Sets the avatar type */
|
|
18
|
-
avatarType?: 'icon' | 'image' | 'text';
|
|
19
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { AvatarArgs } from "./_types";
|
|
3
|
-
/**
|
|
4
|
-
* An Avatar is a visual way to represent a person or brand in the product. They can display text, icons, or images.
|
|
5
|
-
* <hr>
|
|
6
|
-
* Used for this:
|
|
7
|
-
- To visually represent a person, brand, or product
|
|
8
|
-
*/
|
|
9
|
-
declare const Avatar: {
|
|
10
|
-
(props: AvatarArgs): JSX.Element;
|
|
11
|
-
Text: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
|
|
12
|
-
};
|
|
13
|
-
export { Avatar };
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { ComponentMeta, Story } from "@storybook/react";
|
|
3
|
-
import { AvatarArgs } from "./_types";
|
|
4
|
-
export declare const Default: Story<AvatarArgs>;
|
|
5
|
-
export declare const Square: Story<AvatarArgs>;
|
|
6
|
-
declare const _default: ComponentMeta<{
|
|
7
|
-
(props: AvatarArgs): JSX.Element;
|
|
8
|
-
Text: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
|
|
9
|
-
}>;
|
|
10
|
-
export default _default;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { BreadcrumbArgs } from './_types';
|
|
3
|
-
/**
|
|
4
|
-
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
5
|
-
* <hr>
|
|
6
|
-
* Used for this:
|
|
7
|
-
- To show the user where they are in a nested navigation
|
|
8
|
-
- To provide a quick way to navigate to ancestor pages
|
|
9
|
-
*/
|
|
10
|
-
declare const Breadcrumb: (props: BreadcrumbArgs) => JSX.Element;
|
|
11
|
-
export { Breadcrumb };
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { ComponentMeta, Story } from "@storybook/react";
|
|
3
|
-
import { BreadcrumbArgs } from "./_types";
|
|
4
|
-
export declare const Default: Story<BreadcrumbArgs>;
|
|
5
|
-
declare const _default: ComponentMeta<(props: BreadcrumbArgs) => JSX.Element>;
|
|
6
|
-
export default _default;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { IAnchorProps } from "@zendeskgarden/react-buttons";
|
|
2
|
-
export interface AnchorArgs extends IAnchorProps {
|
|
3
|
-
/** Applies danger styling */
|
|
4
|
-
isDanger?: boolean;
|
|
5
|
-
/**
|
|
6
|
-
* Attaches `target="_blank"` and `rel="noopener noreferrer"` to an anchor that
|
|
7
|
-
* navigates to an external resource. This ensures that the anchor is a
|
|
8
|
-
* safe [cross-origin destination link](https://web.dev/external-anchors-use-rel-noopener/).
|
|
9
|
-
**/
|
|
10
|
-
isExternal?: boolean;
|
|
11
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { AnchorArgs } from "./_types";
|
|
3
|
-
/**
|
|
4
|
-
* The Anchor is a link that helps users navigate from one location to another.
|
|
5
|
-
* <hr>
|
|
6
|
-
* Used for this:
|
|
7
|
-
- To navigate from one page to another
|
|
8
|
-
- To navigate within a page
|
|
9
|
-
- To display links alongside text
|
|
10
|
-
*/
|
|
11
|
-
declare const Anchor: (props: AnchorArgs) => JSX.Element;
|
|
12
|
-
export { Anchor };
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { ComponentMeta, Story } from "@storybook/react";
|
|
3
|
-
import { AnchorArgs } from "./_types";
|
|
4
|
-
export declare const Basic: Story<AnchorArgs>;
|
|
5
|
-
export declare const Danger: Story<AnchorArgs>;
|
|
6
|
-
export declare const External: Story<AnchorArgs>;
|
|
7
|
-
declare const _default: ComponentMeta<(props: AnchorArgs) => JSX.Element>;
|
|
8
|
-
export default _default;
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { IButtonProps } from "@zendeskgarden/react-buttons";
|
|
2
|
-
export interface ButtonArgs extends IButtonProps {
|
|
3
|
-
/**
|
|
4
|
-
It's a boolean value that determines whether the button has an icon on the left side.
|
|
5
|
-
@default false
|
|
6
|
-
*/
|
|
7
|
-
hasStartIcon?: boolean;
|
|
8
|
-
/**
|
|
9
|
-
It's a boolean value that determines whether the button has an icon on the right side.
|
|
10
|
-
@default false
|
|
11
|
-
*/
|
|
12
|
-
hasEndIcon?: boolean;
|
|
13
|
-
isStartIconRotated?: boolean;
|
|
14
|
-
isEndIconRotated?: boolean;
|
|
15
|
-
/** Applies danger styling */
|
|
16
|
-
isDanger?: boolean;
|
|
17
|
-
/** Specifies the buton size */
|
|
18
|
-
size?: 'small' | 'medium' | 'large';
|
|
19
|
-
/** Stretches the button fill to its container width */
|
|
20
|
-
isStretched?: boolean;
|
|
21
|
-
/** Applies neutral button styling */
|
|
22
|
-
isNeutral?: boolean;
|
|
23
|
-
/**
|
|
24
|
-
Definine the button variations, possible values are: {isDefault},
|
|
25
|
-
{isBasic},{isPrimary}, {isLink}
|
|
26
|
-
|
|
27
|
-
@default isDefault
|
|
28
|
-
*/
|
|
29
|
-
variant?: string;
|
|
30
|
-
}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { ButtonArgs } from "./_types";
|
|
3
|
-
/**
|
|
4
|
-
* Buttons let users take action quickly.
|
|
5
|
-
* Use a Button to enable actions or decisions that are important to a user’s workflow.
|
|
6
|
-
* <hr>
|
|
7
|
-
* Used for this:
|
|
8
|
-
- To enable user action
|
|
9
|
-
- To draw attention to relevant actions in a user's workflow
|
|
10
|
-
*/
|
|
11
|
-
declare const Button: {
|
|
12
|
-
(props: ButtonArgs): JSX.Element;
|
|
13
|
-
StartIcon: {
|
|
14
|
-
(props: import("@zendeskgarden/react-buttons").IButtonStartIconProps): JSX.Element;
|
|
15
|
-
displayName: string;
|
|
16
|
-
};
|
|
17
|
-
EndIcon: {
|
|
18
|
-
(props: import("@zendeskgarden/react-buttons").IButtonEndIconProps): JSX.Element;
|
|
19
|
-
displayName: string;
|
|
20
|
-
};
|
|
21
|
-
};
|
|
22
|
-
export { Button };
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { ComponentMeta, Story } from "@storybook/react";
|
|
3
|
-
import { ButtonArgs } from "./_types";
|
|
4
|
-
export declare const Default: Story<ButtonArgs>;
|
|
5
|
-
export declare const Basic: Story<ButtonArgs>;
|
|
6
|
-
export declare const Primary: Story<ButtonArgs>;
|
|
7
|
-
export declare const WithIcon: Story<ButtonArgs>;
|
|
8
|
-
declare const _default: ComponentMeta<{
|
|
9
|
-
(props: ButtonArgs): JSX.Element;
|
|
10
|
-
StartIcon: {
|
|
11
|
-
(props: import("@zendeskgarden/react-buttons").IButtonStartIconProps): JSX.Element;
|
|
12
|
-
displayName: string;
|
|
13
|
-
};
|
|
14
|
-
EndIcon: {
|
|
15
|
-
(props: import("@zendeskgarden/react-buttons").IButtonEndIconProps): JSX.Element;
|
|
16
|
-
displayName: string;
|
|
17
|
-
};
|
|
18
|
-
}>;
|
|
19
|
-
export default _default;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { ButtonGroupArgs } from "./_types";
|
|
3
|
-
/**
|
|
4
|
-
A Button group lets users make a selection from a set of options.
|
|
5
|
-
|
|
6
|
-
This is a legacy component and may be deprecated in the future. UNGUESS does not presently recommend the use of Button groups.
|
|
7
|
-
**/
|
|
8
|
-
declare const ButtonGroup: (props: ButtonGroupArgs) => JSX.Element;
|
|
9
|
-
export { ButtonGroup };
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { ComponentMeta, Story } from "@storybook/react";
|
|
3
|
-
import { ButtonGroupArgs } from "./_types";
|
|
4
|
-
interface ButtonGroupProps extends ButtonGroupArgs {
|
|
5
|
-
/**
|
|
6
|
-
The children of the button group.
|
|
7
|
-
@default []
|
|
8
|
-
*/
|
|
9
|
-
items: any[];
|
|
10
|
-
}
|
|
11
|
-
export declare const TwoItems: Story<ButtonGroupProps>;
|
|
12
|
-
export declare const WithBorders: Story<ButtonGroupProps>;
|
|
13
|
-
export declare const RoundedItems: Story<ButtonGroupProps>;
|
|
14
|
-
declare const _default: ComponentMeta<(props: ButtonGroupArgs) => JSX.Element>;
|
|
15
|
-
export default _default;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { IIconButtonProps } from "@zendeskgarden/react-buttons";
|
|
2
|
-
export interface IconButtonArgs extends IIconButtonProps {
|
|
3
|
-
/** Applies neutral button styling */
|
|
4
|
-
isNeutral?: boolean;
|
|
5
|
-
/** Applies primary button styling */
|
|
6
|
-
isPrimary?: boolean;
|
|
7
|
-
/** Applies danger button styling */
|
|
8
|
-
isDanger?: boolean;
|
|
9
|
-
/** Applies basic button styling */
|
|
10
|
-
isBasic?: boolean;
|
|
11
|
-
/** Applies pill button styling */
|
|
12
|
-
isPill?: boolean;
|
|
13
|
-
/** Applies inset `box-shadow` styling on focus */
|
|
14
|
-
focusInset?: boolean;
|
|
15
|
-
/** Rotates icon 180 degrees */
|
|
16
|
-
isRotated?: boolean;
|
|
17
|
-
/** Specifies icon button size */
|
|
18
|
-
size?: 'small' | 'medium' | 'large';
|
|
19
|
-
}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { IconButtonArgs } from "./_types";
|
|
3
|
-
/**
|
|
4
|
-
Icon buttons (like Buttons) let users take action.
|
|
5
|
-
They are used for repeated or persistent actions on a page and lack visible labels to simplify the UI.
|
|
6
|
-
<br>
|
|
7
|
-
Do this: <b>Include a Tooltip to help any users who may be unfamiliar with the icon.</b>
|
|
8
|
-
<hr>
|
|
9
|
-
Used for this
|
|
10
|
-
- To simplify the appearance of repeated or persistent actions on a page
|
|
11
|
-
- To enable action in a toolbar
|
|
12
|
-
**/
|
|
13
|
-
declare const IconButton: (props: IconButtonArgs) => JSX.Element;
|
|
14
|
-
export { IconButton };
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { ComponentMeta, Story } from "@storybook/react";
|
|
3
|
-
import { IconButtonArgs } from "./_types";
|
|
4
|
-
export declare const Default: Story<IconButtonArgs>;
|
|
5
|
-
export declare const Danger: Story<IconButtonArgs>;
|
|
6
|
-
export declare const Disabled: Story<IconButtonArgs>;
|
|
7
|
-
export declare const Shape: Story<IconButtonArgs>;
|
|
8
|
-
declare const _default: ComponentMeta<(props: IconButtonArgs) => JSX.Element>;
|
|
9
|
-
export default _default;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { SplitButtonArgs } from "./_types";
|
|
3
|
-
/**
|
|
4
|
-
A Split button is a hybrid between a Dropdown Menu and a Button. It lets users choose from parallel actions and take action on their choice.
|
|
5
|
-
<hr>
|
|
6
|
-
Used for this:
|
|
7
|
-
- To let users select from multiple parallel actions. Actions are parallel when each represents a path forward for the user and none cancel the action.
|
|
8
|
-
- To reduce visual complexity when there are multiple actions a user can take
|
|
9
|
-
**/
|
|
10
|
-
declare const SplitButton: (props: SplitButtonArgs) => JSX.Element;
|
|
11
|
-
export { SplitButton };
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { ComponentMeta, Story } from "@storybook/react";
|
|
3
|
-
import { SplitButtonArgs } from "./_types";
|
|
4
|
-
export declare const Default: Story<SplitButtonArgs>;
|
|
5
|
-
declare const _default: ComponentMeta<(props: import("../icon-button/_types").IconButtonArgs) => JSX.Element>;
|
|
6
|
-
export default _default;
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { CardProps } from "../cards/_types";
|
|
2
|
-
export interface CampaignCardsProps extends CardProps {
|
|
3
|
-
/**
|
|
4
|
-
* displays a new tag in the top right
|
|
5
|
-
*/
|
|
6
|
-
isNew?: boolean;
|
|
7
|
-
/**
|
|
8
|
-
* displays the date, if is the current day, the word "Today" will be shown instead
|
|
9
|
-
* use this format DD/MM/YYYY
|
|
10
|
-
*/
|
|
11
|
-
date: string;
|
|
12
|
-
/**
|
|
13
|
-
* the main topic of the card
|
|
14
|
-
*/
|
|
15
|
-
projectTitle: string;
|
|
16
|
-
/**
|
|
17
|
-
* a specification to the topic of the card
|
|
18
|
-
*/
|
|
19
|
-
campaignTitle: string;
|
|
20
|
-
/**
|
|
21
|
-
* the status of the card,
|
|
22
|
-
* can be only
|
|
23
|
-
* "COMPLETED" or "PROGRESS" or "INCOMING"
|
|
24
|
-
* default is "INCOMING"
|
|
25
|
-
*/
|
|
26
|
-
status?: 'COMPLETED' | 'PROGRESS' | 'INCOMING';
|
|
27
|
-
/**
|
|
28
|
-
* this renders the pill of the card,
|
|
29
|
-
* can be only
|
|
30
|
-
* "FUNCTIONAL" or "EXPERIENTIAL"
|
|
31
|
-
* if nothing of that is chosen the pill will not be shown
|
|
32
|
-
*/
|
|
33
|
-
type?: 'FUNCTIONAL' | 'EXPERIENTIAL';
|
|
34
|
-
/**
|
|
35
|
-
* this renders the pill text
|
|
36
|
-
* if the value is not defined the pill text will not be shown
|
|
37
|
-
*/
|
|
38
|
-
pillText?: string;
|
|
39
|
-
/**
|
|
40
|
-
* this renders the new flag label
|
|
41
|
-
*/
|
|
42
|
-
labelNew?: string;
|
|
43
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { CampaignCardsProps } from "./_types";
|
|
3
|
-
import { ComponentMeta, Story } from "@storybook/react";
|
|
4
|
-
export declare const SingleCard: Story<CampaignCardsProps>;
|
|
5
|
-
export declare const Grid: Story<CampaignCardsProps>;
|
|
6
|
-
declare const _default: ComponentMeta<(props: CampaignCardsProps) => JSX.Element>;
|
|
7
|
-
export default _default;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { CardProps } from './_types';
|
|
3
|
-
/**
|
|
4
|
-
* A Card is a container that groups related content.
|
|
5
|
-
* <hr>
|
|
6
|
-
* Used for this:
|
|
7
|
-
- To group related content
|
|
8
|
-
*/
|
|
9
|
-
declare const Card: (props: CardProps) => JSX.Element;
|
|
10
|
-
export { Card };
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { ComponentMeta, Story } from "@storybook/react";
|
|
3
|
-
import { CardProps } from "./_types";
|
|
4
|
-
interface CardStoryProps extends CardProps {
|
|
5
|
-
title: string;
|
|
6
|
-
content: string;
|
|
7
|
-
}
|
|
8
|
-
export declare const Default: Story<CardStoryProps>;
|
|
9
|
-
export declare const Floating: Story<CardStoryProps>;
|
|
10
|
-
declare const _default: ComponentMeta<(props: CardProps) => JSX.Element>;
|
|
11
|
-
export default _default;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { ComponentMeta, Story } from "@storybook/react";
|
|
3
|
-
import { CloseArgs } from "./_types";
|
|
4
|
-
export declare const Default: Story<CloseArgs>;
|
|
5
|
-
declare const _default: ComponentMeta<(props: CloseArgs) => JSX.Element>;
|
|
6
|
-
export default _default;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { CounterArgs } from "./_types";
|
|
3
|
-
/**
|
|
4
|
-
* Counter let users categorize content using a keyword.
|
|
5
|
-
*/
|
|
6
|
-
declare const Counter: {
|
|
7
|
-
(props: CounterArgs): JSX.Element;
|
|
8
|
-
Avatar: {
|
|
9
|
-
(props: import("react").HTMLAttributes<HTMLElement>): JSX.Element;
|
|
10
|
-
displayName: string;
|
|
11
|
-
};
|
|
12
|
-
};
|
|
13
|
-
export { Counter };
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { ComponentMeta, Story } from "@storybook/react";
|
|
3
|
-
import { CounterArgs } from "./_types";
|
|
4
|
-
interface TagStoryProps extends CounterArgs {
|
|
5
|
-
hasAvatar: boolean;
|
|
6
|
-
}
|
|
7
|
-
export declare const Default: Story<TagStoryProps>;
|
|
8
|
-
declare const _default: ComponentMeta<{
|
|
9
|
-
(props: CounterArgs): JSX.Element;
|
|
10
|
-
Avatar: {
|
|
11
|
-
(props: import("react").HTMLAttributes<HTMLElement>): JSX.Element;
|
|
12
|
-
displayName: string;
|
|
13
|
-
};
|
|
14
|
-
}>;
|
|
15
|
-
export default _default;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { IItemProps } from "@zendeskgarden/react-dropdowns";
|
|
2
|
-
export interface ItemArgs extends IItemProps {
|
|
3
|
-
/** Sets the value that is returned upon selection */
|
|
4
|
-
value?: any;
|
|
5
|
-
/** Indicates that the element is not interactive */
|
|
6
|
-
disabled?: boolean;
|
|
7
|
-
/** Applies danger styling */
|
|
8
|
-
isDanger?: boolean;
|
|
9
|
-
}
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import { IItemProps, IMenuProps } from "@zendeskgarden/react-dropdowns";
|
|
2
|
-
export interface MenuArgs extends IMenuProps {
|
|
3
|
-
/**
|
|
4
|
-
* Allows the menu to reposition during browser resize events
|
|
5
|
-
*/
|
|
6
|
-
eventsEnabled?: boolean;
|
|
7
|
-
/**
|
|
8
|
-
* Sets the `z-index` of the menu
|
|
9
|
-
*/
|
|
10
|
-
zIndex?: number;
|
|
11
|
-
/**
|
|
12
|
-
* Adjusts the placement of the menu
|
|
13
|
-
*/
|
|
14
|
-
placement?: 'auto' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'end' | 'end-top' | 'end-bottom' | 'start' | 'start-top' | 'start-bottom';
|
|
15
|
-
/**
|
|
16
|
-
* Animates the menu
|
|
17
|
-
*/
|
|
18
|
-
isAnimated?: boolean;
|
|
19
|
-
/**
|
|
20
|
-
* Applies compact styling
|
|
21
|
-
*/
|
|
22
|
-
isCompact?: boolean;
|
|
23
|
-
/**
|
|
24
|
-
* Attaches an arrow that points towards the menu trigger
|
|
25
|
-
*/
|
|
26
|
-
hasArrow?: boolean;
|
|
27
|
-
/**
|
|
28
|
-
* Sets the `max-height` of the menu
|
|
29
|
-
*/
|
|
30
|
-
maxHeight?: string;
|
|
31
|
-
}
|
|
32
|
-
export interface PreviousItemArgs extends IItemProps {
|
|
33
|
-
/** Sets the value that is returned upon selection */
|
|
34
|
-
value?: any;
|
|
35
|
-
/** Indicates that the element is not interactive */
|
|
36
|
-
disabled?: boolean;
|
|
37
|
-
/** Applies danger styling */
|
|
38
|
-
isDanger?: boolean;
|
|
39
|
-
}
|
|
40
|
-
export interface NextItemArgs extends IItemProps {
|
|
41
|
-
/** Sets the value that is returned upon selection */
|
|
42
|
-
value?: any;
|
|
43
|
-
/** Indicates that the element is not interactive */
|
|
44
|
-
disabled?: boolean;
|
|
45
|
-
/** Applies danger styling */
|
|
46
|
-
isDanger?: boolean;
|
|
47
|
-
}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { MenuArgs, NextItemArgs, PreviousItemArgs } from "./_types";
|
|
2
|
-
import { HTMLAttributes, LiHTMLAttributes } from "react";
|
|
3
|
-
/**
|
|
4
|
-
* A Menu is a wrapper for items elements
|
|
5
|
-
**/
|
|
6
|
-
declare const Menu: (props: MenuArgs) => JSX.Element;
|
|
7
|
-
declare const PreviousItem: (props: PreviousItemArgs) => JSX.Element;
|
|
8
|
-
declare const Separator: (props: LiHTMLAttributes<HTMLLIElement>) => JSX.Element;
|
|
9
|
-
declare const NextItem: (props: NextItemArgs) => JSX.Element;
|
|
10
|
-
declare const ItemMeta: (props: HTMLAttributes<HTMLSpanElement>) => JSX.Element;
|
|
11
|
-
declare const MediaBody: (props: HTMLAttributes<HTMLDivElement>) => JSX.Element;
|
|
12
|
-
declare const MediaFigure: (props: HTMLAttributes<Element>) => JSX.Element;
|
|
13
|
-
declare const MediaItem: (props: LiHTMLAttributes<HTMLLIElement>) => JSX.Element;
|
|
14
|
-
export { Menu, PreviousItem, Separator, NextItem, ItemMeta, MediaBody, MediaFigure, MediaItem };
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { ComponentMeta, Story } from '@storybook/react';
|
|
3
|
-
export declare const Default: Story<any>;
|
|
4
|
-
export declare const Nested: Story<any>;
|
|
5
|
-
declare const _default: ComponentMeta<(props: import("./_types").MenuArgs) => JSX.Element>;
|
|
6
|
-
export default _default;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { IMultiselectProps } from "@zendeskgarden/react-dropdowns";
|
|
2
|
-
export interface MultiselectArgs extends IMultiselectProps {
|
|
3
|
-
/** Applies compact styling */
|
|
4
|
-
isCompact?: boolean;
|
|
5
|
-
/** Removes borders and padding */
|
|
6
|
-
isBare?: boolean;
|
|
7
|
-
/** Indicates that the element is not interactive */
|
|
8
|
-
disabled?: boolean;
|
|
9
|
-
/** Applies inset `box-shadow` styling on focus */
|
|
10
|
-
focusInset?: boolean;
|
|
11
|
-
/** Defines text that appears in the element when no items are selected */
|
|
12
|
-
placeholder?: string;
|
|
13
|
-
/** Defines the element's validation state */
|
|
14
|
-
validation?: "success" | "warning" | "error";
|
|
15
|
-
/** Determines the maximum number of items displayed while collapsed */
|
|
16
|
-
maxItems?: number;
|
|
17
|
-
}
|