@appquality/unguess-design-system 2.12.59 → 2.12.61

package/build/stories/buttons/button/_types.d.ts

@@ -14,6 +14,8 @@ export interface ButtonArgs extends IButtonProps {
     isEndIconRotated?: boolean;
     /** Applies danger styling */
     isDanger?: boolean;
+    /** Applies bright styling, used for dark interfaces */
+    isBright?: boolean;
     /** Specifies the buton size */
     size?: "small" | "medium" | "large";
     /** Stretches the button fill to its container width */

package/build/stories/buttons/icon-button/_types.d.ts

@@ -2,6 +2,8 @@ import { IIconButtonProps } from "@zendeskgarden/react-buttons";
 export interface IconButtonArgs extends IIconButtonProps {
     /** Applies neutral button styling */
     isNeutral?: boolean;
+    /** Applies bright styling, used for dark interfaces */
+    isBright?: boolean;
     /** Applies primary button styling */
     isPrimary?: boolean;
     /** Applies danger button styling */
@@ -15,5 +17,5 @@ export interface IconButtonArgs extends IIconButtonProps {
     /** Rotates icon 180 degrees */
     isRotated?: boolean;
     /** Specifies icon button size */
-    size?: 'small' | 'medium' | 'large';
+    size?: "small" | "medium" | "large";
 }

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export interface CounterMultiselectArgs {
     options: {
-        id: number;
+        id: number | string;
         label: string;
         selected?: boolean;
     }[];

package/build/stories/loaders/dots/_types.d.ts

@@ -0,0 +1,11 @@
+import { IDotsProps } from "@zendeskgarden/react-loaders";
+export interface DotsArgs extends IDotsProps {
+    /** Sets the height and width in pixels. Inherits the parent's font size by default. */
+    size?: string | number;
+    /** Sets the fill color. Inherits the parent's `color` by default. */
+    color?: string;
+    /** Sets the length of the animation cycle in milliseconds **/
+    duration?: number;
+    /** Delays displaying the loader to prevent a render flash during normal loading times **/
+    delayMS?: number;
+}

package/build/stories/loaders/dots/index.d.ts

@@ -0,0 +1,14 @@
+import { DotsArgs } from './_types';
+/**
+ * The Dots loader communicates ongoing activity after a user takes an action.
+ * It tells them that something is taking place.
+ * <hr>
+ * Used for this:
+    - To indicate that a single component, like a Button or Search input, is doing something
+   Not for this:
+    - To communicate a page is loading, use a Skeleton loader or Spinner instead
+    - To communicate typing status, use an Inline loader instead
+    - To communicate progress, use a Progress loader instead
+ */
+declare const Dots: (props: DotsArgs) => JSX.Element;
+export { Dots };

package/build/stories/loaders/dots/index.stories.d.ts

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

package/build/stories/loaders/progress/index.d.ts

@@ -1,4 +1,5 @@
-import { ProgressArgs } from './_types';
+/// <reference types="react" />
+import { ProgressArgs } from "./_types";
 /**
  * A Progress loader communicates progress when downloading or uploading content.
  * <hr>
@@ -9,5 +10,5 @@ import { ProgressArgs } from './_types';
     - When the loading time is unknown, use a Spinner instead
     - When loading page content, use a Skeleton loader instead
  */
-declare const Progress: (props: ProgressArgs) => JSX.Element;
+declare const Progress: import("react").ForwardRefExoticComponent<ProgressArgs & import("react").RefAttributes<HTMLDivElement>>;
 export { Progress };

package/build/stories/loaders/progress/index.stories.d.ts

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

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

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from "react";
+export interface PlayerArgs extends HTMLAttributes<HTMLVideoElement> {
+}
+export interface WrapperProps {
+    isPlaying?: boolean;
+    isLoaded?: boolean;
+}

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

@@ -0,0 +1,9 @@
+import { PlayerArgs } from "./_types";
+/**
+ * The Player is a styled media tag with custom controls
+ * <hr>
+ * Used for this:
+    - To display a video
+ */
+declare const Player: (props: PlayerArgs) => JSX.Element;
+export { Player };

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

@@ -0,0 +1,8 @@
+import { ComponentMeta, Story } from "@storybook/react";
+import { PlayerArgs } from "./_types";
+interface PlayerStoryArgs extends PlayerArgs {
+    url: string;
+}
+export declare const Basic: Story<PlayerStoryArgs>;
+declare const _default: ComponentMeta<(props: PlayerArgs) => JSX.Element>;
+export default _default;

package/build/stories/player/parts/audioButton.d.ts

@@ -0,0 +1,9 @@
+interface VideowithAudio extends HTMLVideoElement {
+    mozHasAudio?: boolean;
+    webkitAudioDecodedByteCount?: number;
+    audioTracks?: any[];
+}
+export declare const AudioButton: (props: {
+    videoRef: VideowithAudio | null;
+}) => JSX.Element;
+export {};

package/build/stories/player/parts/container.d.ts

@@ -0,0 +1,2 @@
+import { WrapperProps } from "../_types";
+export declare const Container: import("styled-components").StyledComponent<"div", any, WrapperProps, never>;

package/build/stories/player/parts/controls.d.ts

@@ -0,0 +1,9 @@
+import { WrapperProps } from "../_types";
+export declare const ControlsWrapper: import("styled-components").StyledComponent<"div", any, WrapperProps, never>;
+export declare const ControlsBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Controls: (props: {
+    videoRef: HTMLVideoElement | null;
+    duration: number;
+    isPlaying?: boolean | undefined;
+    onPlayChange?: ((isPlaying: boolean) => void) | undefined;
+}) => JSX.Element;

package/build/stories/player/parts/controlsCenterGroup.d.ts

@@ -0,0 +1,5 @@
+export declare const ControlsGroupCenter: ({ videoRef, isPlaying, onPlayChange, }: {
+    videoRef: HTMLVideoElement | null;
+    isPlaying?: boolean | undefined;
+    onPlayChange?: ((isPlaying: boolean) => void) | undefined;
+}) => JSX.Element;

package/build/stories/player/parts/floatingControls.d.ts

@@ -0,0 +1,5 @@
+import { WrapperProps } from "../_types";
+export declare const FloatingContainer: import("styled-components").StyledComponent<"div", any, WrapperProps, never>;
+export declare const FloatingControls: (props: {
+    isPlaying?: boolean;
+}) => JSX.Element;

package/build/stories/player/parts/fullScreenButton.d.ts

@@ -0,0 +1,10 @@
+interface VideowithFullscreen extends HTMLVideoElement {
+    webkitEnterFullscreen?: () => Promise<void>;
+    webkitRequestFullscreen?: () => Promise<void>;
+    mozRequestFullScreen?: () => Promise<void>;
+    msRequestFullscreen?: () => Promise<void>;
+}
+export declare const FullScreenButton: (props: {
+    videoRef: VideowithFullscreen | null;
+}) => JSX.Element;
+export {};

package/build/stories/player/parts/spinner.d.ts

@@ -0,0 +1 @@
+export declare const VideoSpinner: () => JSX.Element;

package/build/stories/player/parts/timeLabel.d.ts

@@ -0,0 +1,4 @@
+export declare const TimeLabel: ({ current, duration, }: {
+    current: string;
+    duration: string;
+}) => JSX.Element;

package/build/stories/player/parts/tooltip.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from "react";
+interface TooltipArgs extends HTMLAttributes<HTMLDivElement> {
+}
+export declare const PlayerTooltip: ({ children, ...props }: TooltipArgs) => JSX.Element;
+export {};

package/build/stories/player/parts/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const formatDuration: (durationInSeconds: number) => string;
+export declare const getNextPlaybackRate: (rate?: number) => 1 | 2 | 1.5 | 0.5;

package/build/stories/player/parts/video.d.ts

@@ -0,0 +1 @@
+export declare const Video: import("styled-components").StyledComponent<"video", any, {}, never>;

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

@@ -28,4 +28,53 @@ export declare const components: {
         color?: string | undefined;
         cursor?: string | undefined;
     };
+    "buttons.icon_button": ({ isDanger, isBasic, isPrimary, isHovered, isNeutral, isBright, disabled, }: {
+        isBasic: boolean;
+        isDanger: boolean;
+        isPrimary: boolean;
+        isHovered: boolean;
+        isNeutral: boolean;
+        isBright: boolean;
+        disabled: boolean;
+    }) => {
+        pointerEvents?: string | undefined;
+        backgroundColor?: string | undefined;
+        color?: string | undefined;
+        "&:hover"?: {
+            backgroundColor: string;
+            color?: undefined;
+        } | {
+            backgroundColor: string;
+            color: string;
+        } | undefined;
+        "&:active"?: {
+            backgroundColor: string;
+            color: string;
+        } | undefined;
+    };
+    "buttons.button": ({ isDanger, isPrimary, isHovered, isNeutral, isBright, }: {
+        isDanger: boolean;
+        isPrimary: boolean;
+        isHovered: boolean;
+        isNeutral: boolean;
+        isBright: boolean;
+    }) => {
+        backgroundColor: string;
+        color: string;
+        border: string;
+        "&:hover": {
+            backgroundColor: string;
+            color: string;
+        };
+        "&:active": {
+            backgroundColor: string;
+            color: string;
+        };
+    } | {
+        backgroundColor?: undefined;
+        color?: undefined;
+        border?: undefined;
+        "&:hover"?: undefined;
+        "&:active"?: undefined;
+    };
 };

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

@@ -233,6 +233,55 @@ declare const theme: {
             color?: string | undefined;
             cursor?: string | undefined;
         };
+        "buttons.icon_button": ({ isDanger, isBasic, isPrimary, isHovered, isNeutral, isBright, disabled, }: {
+            isBasic: boolean;
+            isDanger: boolean;
+            isPrimary: boolean;
+            isHovered: boolean;
+            isNeutral: boolean;
+            isBright: boolean;
+            disabled: boolean;
+        }) => {
+            pointerEvents?: string | undefined;
+            backgroundColor?: string | undefined;
+            color?: string | undefined;
+            "&:hover"?: {
+                backgroundColor: string;
+                color?: undefined;
+            } | {
+                backgroundColor: string;
+                color: string;
+            } | undefined;
+            "&:active"?: {
+                backgroundColor: string;
+                color: string;
+            } | undefined;
+        };
+        "buttons.button": ({ isDanger, isPrimary, isHovered, isNeutral, isBright, }: {
+            isDanger: boolean;
+            isPrimary: boolean;
+            isHovered: boolean;
+            isNeutral: boolean;
+            isBright: boolean;
+        }) => {
+            backgroundColor: string;
+            color: string;
+            border: string;
+            "&:hover": {
+                backgroundColor: string;
+                color: string;
+            };
+            "&:active": {
+                backgroundColor: string;
+                color: string;
+            };
+        } | {
+            backgroundColor?: undefined;
+            color?: undefined;
+            border?: undefined;
+            "&:hover"?: undefined;
+            "&:active"?: undefined;
+        };
     };
     shadows: {
         boxShadow: (theme: import("@zendeskgarden/react-theming").IGardenTheme) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.12.59",
+  "version": "2.12.61",
   "dependencies": {
     "@nivo/bar": "^0.80.0",
     "@nivo/bullet": "^0.80.0",