@appquality/unguess-design-system 2.8.26 → 2.8.28

package/build/stories/{campaignCards → campaign-cards}/_types.d.ts

@@ -40,4 +40,5 @@ export interface CampaignCardsProps extends CardProps {
      * this renders the new flag label
      */
     labelNew?: string;
+    isLoading?: boolean;
 }

package/build/stories/campaign-cards/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { CampaignCardsProps } from "./_types";
+export declare const Wrapper: import("styled-components").StyledComponent<(props: import("../cards/_types").CardProps) => JSX.Element, any, {}, never>;
+export declare const Divider: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardBody: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const CampaignCard: (props: CampaignCardsProps) => JSX.Element;
+export { CampaignCard };

package/build/stories/campaign-cards/skeleton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const CampaignCardSkeleton: () => JSX.Element;

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

@@ -0,0 +1,30 @@
+import { IDrawerModalProps } from "@zendeskgarden/react-modals";
+import { KeyboardEvent, MouseEvent } from "react";
+export interface DrawerArgs extends IDrawerModalProps {
+    /**
+     * Opens the modal
+     */
+    isOpen?: boolean;
+    /**
+     * Passes HTML attributes to the backdrop element
+     */
+    backdropProps?: any;
+    /**
+     * Handles close actions. Can be triggered from the backdrop and from the close icon.
+     *
+     * @param {Object} event The DOM event that triggered the close action
+     */
+    onClose?: (event: KeyboardEvent | MouseEvent) => void;
+    /**
+     * Defines the DOM element that the modal will attatch to
+     */
+    appendToNode?: Element;
+    /**
+     * Directs keyboard focus to the modal on mount
+     */
+    focusOnMount?: boolean;
+    /**
+     * Returns keyboard focus to the element that triggered the modal
+     */
+    restoreFocus?: boolean;
+}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { DrawerArgs } from "./_types";
+declare const Drawer: {
+    (props: DrawerArgs): JSX.Element;
+    Header: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Body: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    FooterItem: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+    Close: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export { Drawer };

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { DrawerArgs } from "./_types";
+import { ComponentMeta, Story } from "@storybook/react";
+export declare const Default: Story<DrawerArgs>;
+declare const _default: ComponentMeta<{
+    (props: DrawerArgs): JSX.Element;
+    Header: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Body: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    FooterItem: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+    Close: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+}>;
+export default _default;

package/build/stories/drawer/loremIpsum.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const LoremIpsum: () => JSX.Element;

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

@@ -0,0 +1,30 @@
+import { IDrawerModalProps } from "@zendeskgarden/react-modals";
+import { KeyboardEvent, MouseEvent } from "react";
+export interface DrawerArgs extends IDrawerModalProps {
+    /**
+     * Opens the modal
+     */
+    isOpen?: boolean;
+    /**
+     * Passes HTML attributes to the backdrop element
+     */
+    backdropProps?: any;
+    /**
+     * Handles close actions. Can be triggered from the backdrop and from the close icon.
+     *
+     * @param {Object} event The DOM event that triggered the close action
+     */
+    onClose?: (event: KeyboardEvent | MouseEvent) => void;
+    /**
+     * Defines the DOM element that the modal will attatch to
+     */
+    appendToNode?: Element;
+    /**
+     * Directs keyboard focus to the modal on mount
+     */
+    focusOnMount?: boolean;
+    /**
+     * Returns keyboard focus to the element that triggered the modal
+     */
+    restoreFocus?: boolean;
+}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { DrawerArgs } from "./_types";
+declare const Drawer: {
+    (props: DrawerArgs): JSX.Element;
+    Header: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Body: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    FooterItem: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+    Close: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export { Drawer };

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { DrawerArgs } from "./_types";
+import { ComponentMeta, Story } from "@storybook/react";
+export declare const Default: Story<DrawerArgs>;
+declare const _default: ComponentMeta<{
+    (props: DrawerArgs): JSX.Element;
+    Header: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Body: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    FooterItem: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+    Close: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+}>;
+export default _default;

package/build/stories/drawers/loremIpsum.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const LoremIpsum: () => JSX.Element;

package/build/stories/navigation/app-header/_types.d.ts

@@ -19,4 +19,5 @@ export interface AppHeaderArgs extends HeaderArgs {
     onSidebarMenuToggle?: () => void;
     /** Callback when the Logo Item is clicked */
     onLogoItemClick?: () => void;
+    isLoading?: boolean;
 }

package/build/stories/navigation/app-header/index.d.ts

@@ -4,5 +4,5 @@ import { AppHeaderArgs } from "./_types";
  * An Header is a visual way to display general information.
  * This can include navList Items, modal, profile settings.
  */
-declare const AppHeader: ({ brand, avatar, ...args }: AppHeaderArgs) => JSX.Element;
+declare const AppHeader: ({ brand, avatar, isLoading, ...args }: AppHeaderArgs) => JSX.Element;
 export { AppHeader };

package/build/stories/navigation/app-header/index.stories.d.ts

@@ -2,5 +2,5 @@
 import { ComponentMeta, Story } from "@storybook/react";
 import { AppHeaderArgs } from "./_types";
 export declare const Default: Story<AppHeaderArgs>;
-declare const _default: ComponentMeta<({ brand, avatar, ...args }: AppHeaderArgs) => JSX.Element>;
+declare const _default: ComponentMeta<({ brand, avatar, isLoading, ...args }: AppHeaderArgs) => JSX.Element>;
 export default _default;

package/build/stories/navigation/app-header/skeleton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const HeaderSkeleton: () => JSX.Element;

package/build/stories/navigation/header/header-item/brandItem.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
 import { BrandItemArgs } from "./_types";
+export declare const LogoIconContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-chrome").IHeaderItemProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
 declare const BrandItem: (props: BrandItemArgs) => JSX.Element;
 export { BrandItem };

package/build/stories/navigation/sidebar/_types.d.ts

@@ -9,6 +9,7 @@ export interface SidebarArgs extends NavArgs {
     isExpanded?: boolean;
     onToggleMenu?: () => void;
     onNavToggle?: (route: string) => void;
+    isLoading?: boolean;
 }
 export interface ProjectItem {
     id: string;

package/build/stories/navigation/sidebar/skeleton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const LoadingSidebar: () => JSX.Element;

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

@@ -4,5 +4,6 @@ import { AppHeaderArgs } from "../navigation/app-header/_types";
 export interface PageTemplatesArgs {
     sidebar?: SidebarArgs;
     header?: AppHeaderArgs;
+    isLoading?: boolean;
 }
 export declare const PageTemplate: ({ sidebar, header, ...args }: PageTemplatesArgs) => JSX.Element;

package/build/stories/page/pageLoader.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PageLoader: () => JSX.Element;

package/build/stories/product-cards/_types.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+import { CardProps } from "../cards/_types";
+export interface ProductCardProps extends CardProps {
+    /**
+     * displays a new tag in the top right
+     */
+    isNew?: boolean;
+    /**
+     * this renders the new flag label
+     */
+    labelNew?: string;
+    /**
+     * displays product icon
+     */
+    icon?: React.ReactElement;
+    /**
+     * Category, pre-header or any other useful information
+     */
+    preTitle?: string;
+    /**
+     * Card Title
+     */
+    productTitle: string;
+    /**
+     * Display the skeleton
+     */
+    isLoading?: boolean;
+    /**
+     * Text inside the cta button
+     */
+    ctaLabel: string;
+    /**
+     * On Cta click
+     */
+    onCtaClick: () => void;
+}

package/build/stories/product-cards/index.d.ts

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

package/build/stories/product-cards/index.stories.d.ts

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

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

@@ -0,0 +1,4 @@
+export declare const components: {
+    chrome: any;
+    notification: any;
+};

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

@@ -1,4 +1,15 @@
 declare const theme: {
+    colors: {
+        primaryHue: string;
+        base: "light" | "dark";
+        background: string;
+        foreground: string;
+        dangerHue: string;
+        warningHue: string;
+        successHue: string;
+        neutralHue: string;
+        chromeHue: string;
+    };
     palette: {
         black: string;
         white: string;
@@ -150,11 +161,14 @@ declare const theme: {
     };
     borderRadii: {
         lg: string;
+        xl: string;
+        xxl: string;
         sm: string;
         md: string;
     };
     components: {
-        Headers: any;
+        chrome: any;
+        notification: any;
     };
     shadows: {
         boxShadow: (theme: import("@zendeskgarden/react-theming").IGardenTheme) => string;
@@ -182,17 +196,6 @@ declare const theme: {
         lg: string;
         xl: string;
     };
-    colors: {
-        base: "light" | "dark";
-        background: string;
-        foreground: string;
-        primaryHue: string;
-        dangerHue: string;
-        warningHue: string;
-        successHue: string;
-        neutralHue: string;
-        chromeHue: string;
-    };
     fontSizes: {
         xs: string;
         sm: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.8.26",
+  "version": "2.8.28",
   "dependencies": {
     "@zendeskgarden/react-accordions": "^8.49.0",
     "@zendeskgarden/react-avatars": "^8.49.0",

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

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