@appquality/unguess-design-system 2.2.0 → 2.4.0

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

@@ -1,19 +1,153 @@
 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;
+        product: {
+            support: string;
+            message: string;
+            explore: string;
+            gather: string;
+            guide: string;
+            connect: string;
+            chat: string;
+            talk: string;
+            sell: string;
+        };
+        grey: {
+            "100": string;
+            "200": string;
+            "300": string;
+            "400": string;
+            "500": string;
+            "600": string;
+            "700": string;
+            "800": string;
+        };
+        blue: {
+            "100": string;
+            "200": string;
+            "300": string;
+            "400": string;
+            "500": string;
+            "600": string;
+            "700": string;
+            "800": string;
+        };
+        red: {
+            "100": string;
+            "200": string;
+            "300": string;
+            "400": string;
+            "500": string;
+            "600": string;
+            "700": string;
+            "800": string;
+        };
+        yellow: {
+            "100": string;
+            "200": string;
+            "300": string;
+            "400": string;
+            "500": string;
+            "600": string;
+            "700": string;
+            "800": string;
+        };
+        green: {
+            "100": string;
+            "200": string;
+            "300": string;
+            "400": string;
+            "500": string;
+            "600": string;
+            "700": string;
+            "800": string;
+        };
+        kale: {
+            "100": string;
+            "200": string;
+            "300": string;
+            "400": string;
+            "500": string;
+            "600": string;
+            "700": string;
+            "800": string;
+        };
+        fuschia: {
+            "400": string;
+            "600": string;
+            M400: string;
+            M600: string;
+        };
+        pink: {
+            "400": string;
+            "600": string;
+            M400: string;
+            M600: string;
+        };
+        crimson: {
+            "400": string;
+            "600": string;
+            M400: string;
+            M600: string;
+        };
+        orange: {
+            "400": string;
+            "600": string;
+            M400: string;
+            M600: string;
+        };
+        lemon: {
+            "400": string;
+            "600": string;
+            M400: string;
+            M600: string;
+        };
+        lime: {
+            "400": string;
+            "600": string;
+            M400: string;
+            M600: string;
+        };
+        mint: {
+            "400": string;
+            "600": string;
+            M400: string;
+            M600: string;
+        };
+        teal: {
+            "400": string;
+            "600": string;
+            M400: string;
+            M600: string;
+        };
+        azure: {
+            "400": string;
+            "600": string;
+            M400: string;
+            M600: string;
+        };
+        royal: {
+            "400": string;
+            "600": string;
+            M400: string;
+            M600: string;
+        };
+        purple: {
+            "400": string;
+            "600": string;
+            M400: string;
+            M600: string;
+        };
     };
     fonts: {
         system: string;
         mono: string;
     };
+    gradients: {
+        horizontal: string;
+        dark: string;
+    };
     rtl: boolean;
     document?: any;
     borders: {
@@ -38,6 +172,17 @@ 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;
+    };
     components: Record<string, any>;
     fontSizes: {
         xs: string;
@@ -91,6 +236,5 @@ declare const theme: {
         xl: string;
         xxl: string;
     };
-    palette: Record<string, string | Record<string | number, string>>;
 };
 export { theme };

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

@@ -0,0 +1,141 @@
+export declare const palette: {
+    black: string;
+    white: string;
+    product: {
+        support: string;
+        message: string;
+        explore: string;
+        gather: string;
+        guide: string;
+        connect: string;
+        chat: string;
+        talk: string;
+        sell: string;
+    };
+    grey: {
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+    };
+    blue: {
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+    };
+    red: {
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+    };
+    yellow: {
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+    };
+    green: {
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+    };
+    kale: {
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+    };
+    fuschia: {
+        "400": string;
+        "600": string;
+        M400: string;
+        M600: string;
+    };
+    pink: {
+        "400": string;
+        "600": string;
+        M400: string;
+        M600: string;
+    };
+    crimson: {
+        "400": string;
+        "600": string;
+        M400: string;
+        M600: string;
+    };
+    orange: {
+        "400": string;
+        "600": string;
+        M400: string;
+        M600: string;
+    };
+    lemon: {
+        "400": string;
+        "600": string;
+        M400: string;
+        M600: string;
+    };
+    lime: {
+        "400": string;
+        "600": string;
+        M400: string;
+        M600: string;
+    };
+    mint: {
+        "400": string;
+        "600": string;
+        M400: string;
+        M600: string;
+    };
+    teal: {
+        "400": string;
+        "600": string;
+        M400: string;
+        M600: string;
+    };
+    azure: {
+        "400": string;
+        "600": string;
+        M400: string;
+        M600: string;
+    };
+    royal: {
+        "400": string;
+        "600": string;
+        M400: string;
+        M600: string;
+    };
+    purple: {
+        "400": string;
+        "600": string;
+        M400: string;
+        M600: string;
+    };
+};

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

@@ -0,0 +1,15 @@
+import { ComponentMeta, Story } from "@storybook/react";
+import { HTMLAttributes } from "react";
+interface Variant {
+    colorName: string;
+    color: string;
+}
+interface PaletteProps extends HTMLAttributes<HTMLDivElement> {
+    cards: Array<{
+        title: string;
+        colors: Array<Variant>;
+    }>;
+}
+export declare const Default: Story<PaletteProps>;
+declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-typography").IParagraphProps & import("react").RefAttributes<HTMLParagraphElement>>>;
+export default _default;

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

@@ -0,0 +1 @@
+export declare const hex2rgba: (hex: string, alpha?: number) => string;

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

@@ -0,0 +1,12 @@
+import { ChangeEventHandler } from "react";
+import { ITilesProps } from "@zendeskgarden/react-forms";
+export interface TilesArgs extends ITilesProps {
+    /** Sets the value of the selected radio button */
+    value?: string;
+    /** Handles radio selection */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /** Sets the name used to reference the value of the control */
+    name: string;
+    /** Centers tile content */
+    isCentered?: boolean;
+}

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { TilesArgs } from "./_types";
+/**
+ * Tiles are Radio buttons styled with icons or images.
+
+ * Used for this:
+    - Like Radios, Tiles are for choices that can't occur at the same time
+
+ * Not for this:
+    - To choose more than one option at once, use a Checkbox instead
+    - To select from a long list of options, use a Select
+    - To define an action, use a Button instead
+    - For navigation, use an Anchor instead
+ */
+declare const Tiles: {
+    (props: TilesArgs): JSX.Element;
+    Description: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+    Icon: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+    Label: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+    Tile: import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-forms").ITilesTileProps & import("react").RefAttributes<HTMLLabelElement>>;
+};
+export { Tiles };

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

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { TilesArgs } from "./_types";
+interface Tile {
+    value: string;
+    label: string;
+    icon: React.FC;
+    description: string;
+    disabled?: boolean;
+}
+interface TilesStoryProps extends TilesArgs {
+    tiles: Array<Tile>;
+    hasDescription: boolean;
+}
+export declare const Default: Story<TilesStoryProps>;
+export declare const Description: Story<TilesStoryProps>;
+export declare const Disabled: Story<TilesStoryProps>;
+declare const _default: ComponentMeta<{
+    (props: TilesArgs): JSX.Element;
+    Description: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+    Icon: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+    Label: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+    Tile: import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-forms").ITilesTileProps & import("react").RefAttributes<HTMLLabelElement>>;
+}>;
+export default _default;

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

@@ -0,0 +1,3 @@
+import { ITriggerProps } from "@zendeskgarden/react-dropdowns";
+export interface TriggerArgs extends ITriggerProps {
+}

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

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

package/build/stories/typography/span/_types.d.ts

@@ -0,0 +1,13 @@
+import { ISpanProps } from "@zendeskgarden/react-typography";
+export interface SpanArgs extends ISpanProps {
+    /** Applies bold font style. Font weight is inherited by default. */
+    isBold?: boolean;
+    /** Renders with monospace font */
+    isMonospace?: boolean;
+    /**
+     * Applies a font color. Use
+     * [PALETTE](/components/palette#palette)
+     * colors when possible. Accepts all hex values.
+     */
+    hue?: string;
+}

package/build/stories/typography/span/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { SpanArgs } from "./_types";
+/**
+ * Use Span to style and format inline text elements.
+ * <hr>
+ * Used for this:
+    - To apply styles to short strings of text
+    - To include icons inline with text
+ * Not for this:
+    - To style an entire block of text, use Paragraph instead
+ */
+declare const Span: (props: SpanArgs) => JSX.Element;
+export { Span };

package/build/stories/typography/span/index.stories.d.ts

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

package/package.json

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