npm - @carbon-labs/react-animated-header - Versions diffs - 0.2.0 → 0.4.0 - Mend

@carbon-labs/react-animated-header 0.2.0 → 0.4.0

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.

Files changed (70) hide show

package/es/__stories__/AnimatedHeader.stories.d.ts CHANGED Viewed

@@ -6,321 +6,9 @@ export default meta;
 export declare const ThemeG10: {
     (args: any): import("react/jsx-runtime").JSX.Element;
     argTypes: {
-        name: {
-            description: string;
-        };
         description: {
             description: string;
         };
-        buttonText: {
-            description: string;
-        };
-        productName: {
-            description: string;
-        };
-        headerDropdown: {
-            description: string;
-            type: string;
-            control: {
-                type: string;
-                default: boolean;
-            };
-        };
-        tileDropdownItems: {
-            description: string;
-            type: string;
-            control: {
-                type: string;
-                labels: {
-                    0: string;
-                    1: string;
-                    2: string;
-                    3: string;
-                };
-            };
-            options: number[];
-            mapping: {
-                0: null;
-                1: {
-                    id: string;
-                    text: string;
-                }[];
-                2: {
-                    id: string;
-                    text: string;
-                }[];
-                3: {
-                    id: string;
-                    text: string;
-                }[];
-            };
-        };
-        selectedTileGroup: {
-            description: string;
-            type: string;
-            control: {
-                type: string;
-                labels: {
-                    0: string;
-                    1: string;
-                    2: string;
-                    3: string;
-                    4: string;
-                    5: string;
-                    6: string;
-                    7: string;
-                };
-            };
-            options: number[];
-            mapping: {
-                0: null;
-                1: {
-                    id: number;
-                    name: string;
-                    tiles: ({
-                        id: string;
-                        href: string;
-                        title: string;
-                        mainIcon: string;
-                        subtitle?: undefined;
-                    } | {
-                        id: string;
-                        href: string;
-                        title: string;
-                        subtitle: string;
-                        mainIcon: string;
-                    })[];
-                } | {
-                    id: number;
-                    name: string;
-                    tiles: ({
-                        id: string;
-                        href: string;
-                        title: string;
-                        subtitle: string;
-                        mainIcon: string;
-                        secondaryIcon?: undefined;
-                    } | {
-                        id: string;
-                        href: string;
-                        title: string;
-                        mainIcon: string;
-                        secondaryIcon: string;
-                        subtitle?: undefined;
-                    })[];
-                };
-                2: {
-                    id: number;
-                    name: string;
-                    tiles: ({
-                        id: string;
-                        href: string;
-                        title: string;
-                        mainIcon: string;
-                        subtitle?: undefined;
-                    } | {
-                        id: string;
-                        href: string;
-                        title: string;
-                        subtitle: string;
-                        mainIcon: string;
-                    })[];
-                } | {
-                    id: number;
-                    name: string;
-                    tiles: ({
-                        id: string;
-                        href: string;
-                        title: string;
-                        subtitle: string;
-                        mainIcon: string;
-                        secondaryIcon?: undefined;
-                    } | {
-                        id: string;
-                        href: string;
-                        title: string;
-                        mainIcon: string;
-                        secondaryIcon: string;
-                        subtitle?: undefined;
-                    })[];
-                };
-                3: {
-                    id: number;
-                    name: string;
-                    tiles: ({
-                        id: string;
-                        href: string;
-                        title: string;
-                        mainIcon: string;
-                        subtitle?: undefined;
-                    } | {
-                        id: string;
-                        href: string;
-                        title: string;
-                        subtitle: string;
-                        mainIcon: string;
-                    })[];
-                } | {
-                    id: number;
-                    name: string;
-                    tiles: ({
-                        id: string;
-                        href: string;
-                        title: string;
-                        subtitle: string;
-                        mainIcon: string;
-                        secondaryIcon?: undefined;
-                    } | {
-                        id: string;
-                        href: string;
-                        title: string;
-                        mainIcon: string;
-                        secondaryIcon: string;
-                        subtitle?: undefined;
-                    })[];
-                };
-                4: {
-                    id: number;
-                    name: string;
-                    tiles: ({
-                        id: string;
-                        href: string;
-                        title: string;
-                        mainIcon: string;
-                        subtitle?: undefined;
-                    } | {
-                        id: string;
-                        href: string;
-                        title: string;
-                        subtitle: string;
-                        mainIcon: string;
-                    })[];
-                } | {
-                    id: number;
-                    name: string;
-                    tiles: ({
-                        id: string;
-                        href: string;
-                        title: string;
-                        subtitle: string;
-                        mainIcon: string;
-                        secondaryIcon?: undefined;
-                    } | {
-                        id: string;
-                        href: string;
-                        title: string;
-                        mainIcon: string;
-                        secondaryIcon: string;
-                        subtitle?: undefined;
-                    })[];
-                };
-                5: {
-                    id: number;
-                    name: string;
-                    tiles: ({
-                        id: string;
-                        href: string;
-                        title: string;
-                        mainIcon: string;
-                        subtitle?: undefined;
-                    } | {
-                        id: string;
-                        href: string;
-                        title: string;
-                        subtitle: string;
-                        mainIcon: string;
-                    })[];
-                } | {
-                    id: number;
-                    name: string;
-                    tiles: ({
-                        id: string;
-                        href: string;
-                        title: string;
-                        subtitle: string;
-                        mainIcon: string;
-                        secondaryIcon?: undefined;
-                    } | {
-                        id: string;
-                        href: string;
-                        title: string;
-                        mainIcon: string;
-                        secondaryIcon: string;
-                        subtitle?: undefined;
-                    })[];
-                };
-                6: {
-                    id: number;
-                    name: string;
-                    tiles: ({
-                        id: string;
-                        href: string;
-                        title: string;
-                        mainIcon: string;
-                        subtitle?: undefined;
-                    } | {
-                        id: string;
-                        href: string;
-                        title: string;
-                        subtitle: string;
-                        mainIcon: string;
-                    })[];
-                } | {
-                    id: number;
-                    name: string;
-                    tiles: ({
-                        id: string;
-                        href: string;
-                        title: string;
-                        subtitle: string;
-                        mainIcon: string;
-                        secondaryIcon?: undefined;
-                    } | {
-                        id: string;
-                        href: string;
-                        title: string;
-                        mainIcon: string;
-                        secondaryIcon: string;
-                        subtitle?: undefined;
-                    })[];
-                };
-                7: {
-                    id: number;
-                    name: string;
-                    tiles: ({
-                        id: string;
-                        href: string;
-                        title: string;
-                        mainIcon: string;
-                        subtitle?: undefined;
-                    } | {
-                        id: string;
-                        href: string;
-                        title: string;
-                        subtitle: string;
-                        mainIcon: string;
-                    })[];
-                } | {
-                    id: number;
-                    name: string;
-                    tiles: ({
-                        id: string;
-                        href: string;
-                        title: string;
-                        subtitle: string;
-                        mainIcon: string;
-                        secondaryIcon?: undefined;
-                    } | {
-                        id: string;
-                        href: string;
-                        title: string;
-                        mainIcon: string;
-                        secondaryIcon: string;
-                        subtitle?: undefined;
-                    })[];
-                };
-            };
-        };
         headerAnimation: {
             description: string;
             type: string;
@@ -8511,57 +8199,11 @@ export declare const ThemeG10: {
                     markers: {
                         tm: number;
                         cm: string;
-                        dr: number;
-                    }[];
-                    props: {};
-                };
-            };
-        };
-        buttonType: {
-            description: string;
-            control: {
-                type: string;
-                labels: {
-                    0: string;
-                    1: string;
-                    2: string;
-                    3: string;
-                    4: string;
-                    5: string;
-                    6: string;
-                    7: string;
-                };
-            };
-            options: number[];
-            mapping: {
-                0: "primary";
-                1: "secondary";
-                2: "danger";
-                3: "ghost";
-                4: "danger--primary";
-                5: "danger--ghost";
-                6: "danger--tertiary";
-                7: "tertiary";
-            };
-        };
-        buttonIcon: {
-            description: string;
-            control: {
-                type: string;
-                labels: {
-                    0: string;
-                    1: string;
-                    2: string;
-                    3: string;
+                        dr: number;
+                    }[];
+                    props: {};
                 };
             };
-            options: number[];
-            mapping: {
-                0: null;
-                1: import("@carbon/react/icons").CarbonIconType;
-                2: import("@carbon/react/icons").CarbonIconType;
-                3: import("@carbon/react/icons").CarbonIconType;
-            };
         };
         headerStatic: {
             description: string;
@@ -8585,108 +8227,9 @@ export declare const ThemeG10: {
                 4: any;
             };
         };
-    };
-    args: {
-        name: string;
-        description: string;
-        buttonText: string;
-        productName: string;
-        buttonType: number;
-        buttonIcon: number;
-        headerStatic: number;
-        headerDropdown: boolean;
-        tileDropdownItems: number;
-        selectedTileGroup: number;
-        allTiles: ({
-            id: number;
-            name: string;
-            tiles: ({
-                id: string;
-                href: string;
-                title: string;
-                mainIcon: string;
-                subtitle?: undefined;
-            } | {
-                id: string;
-                href: string;
-                title: string;
-                subtitle: string;
-                mainIcon: string;
-            })[];
-        } | {
-            id: number;
-            name: string;
-            tiles: ({
-                id: string;
-                href: string;
-                title: string;
-                subtitle: string;
-                mainIcon: string;
-                secondaryIcon?: undefined;
-            } | {
-                id: string;
-                href: string;
-                title: string;
-                mainIcon: string;
-                secondaryIcon: string;
-                subtitle?: undefined;
-            })[];
-        })[];
-        headerAnimation: number;
-    };
-};
-export declare const ThemeG100: {
-    (args: any): import("react/jsx-runtime").JSX.Element;
-    argTypes: {
-        name: {
-            description: string;
-        };
-        description: {
-            description: string;
-        };
-        buttonText: {
-            description: string;
-        };
         productName: {
             description: string;
         };
-        headerDropdown: {
-            description: string;
-            type: string;
-            control: {
-                type: string;
-                default: boolean;
-            };
-        };
-        tileDropdownItems: {
-            description: string;
-            type: string;
-            control: {
-                type: string;
-                labels: {
-                    0: string;
-                    1: string;
-                    2: string;
-                    3: string;
-                };
-            };
-            options: number[];
-            mapping: {
-                0: null;
-                1: {
-                    id: string;
-                    text: string;
-                }[];
-                2: {
-                    id: string;
-                    text: string;
-                }[];
-                3: {
-                    id: string;
-                    text: string;
-                }[];
-            };
-        };
         selectedTileGroup: {
             description: string;
             type: string;
@@ -8953,6 +8496,110 @@ export declare const ThemeG100: {
                 };
             };
         };
+        selectedWorkspace: {
+            description: string;
+            type: string;
+        };
+        tasksConfig: {
+            description: string;
+            control: {
+                type: string;
+                labels: {
+                    0: string;
+                    1: string;
+                    2: string;
+                };
+            };
+            options: number[];
+            mapping: {
+                0: null;
+                1: {
+                    type: string;
+                    button: {
+                        href: string;
+                        icon: import("@carbon/icons-react").CarbonIconType;
+                        text: string;
+                        type: "tertiary";
+                    };
+                };
+                2: {
+                    type: string;
+                    dropdown: {
+                        label: string;
+                    };
+                };
+            };
+        };
+        userName: {
+            description: string;
+        };
+        welcomeText: {
+            description: string;
+        };
+        workspaceLabel: {
+            description: string;
+        };
+    };
+    args: {
+        allTiles: ({
+            id: number;
+            name: string;
+            tiles: ({
+                id: string;
+                href: string;
+                title: string;
+                mainIcon: string;
+                subtitle?: undefined;
+            } | {
+                id: string;
+                href: string;
+                title: string;
+                subtitle: string;
+                mainIcon: string;
+            })[];
+        } | {
+            id: number;
+            name: string;
+            tiles: ({
+                id: string;
+                href: string;
+                title: string;
+                subtitle: string;
+                mainIcon: string;
+                secondaryIcon?: undefined;
+            } | {
+                id: string;
+                href: string;
+                title: string;
+                mainIcon: string;
+                secondaryIcon: string;
+                subtitle?: undefined;
+            })[];
+        })[];
+        allWorkspaces: {
+            id: string;
+            text: string;
+        }[];
+        description: string;
+        headerStatic: number;
+        productName: string;
+        selectedTileGroup: number;
+        selectedWorkspace: {
+            id: string;
+            text: string;
+        };
+        tasksConfig: number;
+        userName: string;
+        welcomeText: string;
+        headerAnimation: number;
+    };
+};
+export declare const ThemeG100: {
+    (args: any): import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        description: {
+            description: string;
+        };
         headerAnimation: {
             description: string;
             type: string;
@@ -17149,34 +16796,302 @@ export declare const ThemeG100: {
                 };
             };
         };
-        buttonType: {
+        headerStatic: {
+            description: string;
+            type: string;
+            control: {
+                type: string;
+                labels: {
+                    0: string;
+                    1: string;
+                    2: string;
+                    3: string;
+                    4: string;
+                };
+            };
+            options: number[];
+            mapping: {
+                0: null;
+                1: any;
+                2: any;
+                3: any;
+                4: any;
+            };
+        };
+        productName: {
+            description: string;
+        };
+        selectedTileGroup: {
+            description: string;
+            type: string;
+            control: {
+                type: string;
+                labels: {
+                    0: string;
+                    1: string;
+                    2: string;
+                    3: string;
+                    4: string;
+                    5: string;
+                    6: string;
+                    7: string;
+                };
+            };
+            options: number[];
+            mapping: {
+                0: null;
+                1: {
+                    id: number;
+                    name: string;
+                    tiles: ({
+                        id: string;
+                        href: string;
+                        title: string;
+                        mainIcon: string;
+                        subtitle?: undefined;
+                    } | {
+                        id: string;
+                        href: string;
+                        title: string;
+                        subtitle: string;
+                        mainIcon: string;
+                    })[];
+                } | {
+                    id: number;
+                    name: string;
+                    tiles: ({
+                        id: string;
+                        href: string;
+                        title: string;
+                        subtitle: string;
+                        mainIcon: string;
+                        secondaryIcon?: undefined;
+                    } | {
+                        id: string;
+                        href: string;
+                        title: string;
+                        mainIcon: string;
+                        secondaryIcon: string;
+                        subtitle?: undefined;
+                    })[];
+                };
+                2: {
+                    id: number;
+                    name: string;
+                    tiles: ({
+                        id: string;
+                        href: string;
+                        title: string;
+                        mainIcon: string;
+                        subtitle?: undefined;
+                    } | {
+                        id: string;
+                        href: string;
+                        title: string;
+                        subtitle: string;
+                        mainIcon: string;
+                    })[];
+                } | {
+                    id: number;
+                    name: string;
+                    tiles: ({
+                        id: string;
+                        href: string;
+                        title: string;
+                        subtitle: string;
+                        mainIcon: string;
+                        secondaryIcon?: undefined;
+                    } | {
+                        id: string;
+                        href: string;
+                        title: string;
+                        mainIcon: string;
+                        secondaryIcon: string;
+                        subtitle?: undefined;
+                    })[];
+                };
+                3: {
+                    id: number;
+                    name: string;
+                    tiles: ({
+                        id: string;
+                        href: string;
+                        title: string;
+                        mainIcon: string;
+                        subtitle?: undefined;
+                    } | {
+                        id: string;
+                        href: string;
+                        title: string;
+                        subtitle: string;
+                        mainIcon: string;
+                    })[];
+                } | {
+                    id: number;
+                    name: string;
+                    tiles: ({
+                        id: string;
+                        href: string;
+                        title: string;
+                        subtitle: string;
+                        mainIcon: string;
+                        secondaryIcon?: undefined;
+                    } | {
+                        id: string;
+                        href: string;
+                        title: string;
+                        mainIcon: string;
+                        secondaryIcon: string;
+                        subtitle?: undefined;
+                    })[];
+                };
+                4: {
+                    id: number;
+                    name: string;
+                    tiles: ({
+                        id: string;
+                        href: string;
+                        title: string;
+                        mainIcon: string;
+                        subtitle?: undefined;
+                    } | {
+                        id: string;
+                        href: string;
+                        title: string;
+                        subtitle: string;
+                        mainIcon: string;
+                    })[];
+                } | {
+                    id: number;
+                    name: string;
+                    tiles: ({
+                        id: string;
+                        href: string;
+                        title: string;
+                        subtitle: string;
+                        mainIcon: string;
+                        secondaryIcon?: undefined;
+                    } | {
+                        id: string;
+                        href: string;
+                        title: string;
+                        mainIcon: string;
+                        secondaryIcon: string;
+                        subtitle?: undefined;
+                    })[];
+                };
+                5: {
+                    id: number;
+                    name: string;
+                    tiles: ({
+                        id: string;
+                        href: string;
+                        title: string;
+                        mainIcon: string;
+                        subtitle?: undefined;
+                    } | {
+                        id: string;
+                        href: string;
+                        title: string;
+                        subtitle: string;
+                        mainIcon: string;
+                    })[];
+                } | {
+                    id: number;
+                    name: string;
+                    tiles: ({
+                        id: string;
+                        href: string;
+                        title: string;
+                        subtitle: string;
+                        mainIcon: string;
+                        secondaryIcon?: undefined;
+                    } | {
+                        id: string;
+                        href: string;
+                        title: string;
+                        mainIcon: string;
+                        secondaryIcon: string;
+                        subtitle?: undefined;
+                    })[];
+                };
+                6: {
+                    id: number;
+                    name: string;
+                    tiles: ({
+                        id: string;
+                        href: string;
+                        title: string;
+                        mainIcon: string;
+                        subtitle?: undefined;
+                    } | {
+                        id: string;
+                        href: string;
+                        title: string;
+                        subtitle: string;
+                        mainIcon: string;
+                    })[];
+                } | {
+                    id: number;
+                    name: string;
+                    tiles: ({
+                        id: string;
+                        href: string;
+                        title: string;
+                        subtitle: string;
+                        mainIcon: string;
+                        secondaryIcon?: undefined;
+                    } | {
+                        id: string;
+                        href: string;
+                        title: string;
+                        mainIcon: string;
+                        secondaryIcon: string;
+                        subtitle?: undefined;
+                    })[];
+                };
+                7: {
+                    id: number;
+                    name: string;
+                    tiles: ({
+                        id: string;
+                        href: string;
+                        title: string;
+                        mainIcon: string;
+                        subtitle?: undefined;
+                    } | {
+                        id: string;
+                        href: string;
+                        title: string;
+                        subtitle: string;
+                        mainIcon: string;
+                    })[];
+                } | {
+                    id: number;
+                    name: string;
+                    tiles: ({
+                        id: string;
+                        href: string;
+                        title: string;
+                        subtitle: string;
+                        mainIcon: string;
+                        secondaryIcon?: undefined;
+                    } | {
+                        id: string;
+                        href: string;
+                        title: string;
+                        mainIcon: string;
+                        secondaryIcon: string;
+                        subtitle?: undefined;
+                    })[];
+                };
+            };
+        };
+        selectedWorkspace: {
             description: string;
-            control: {
-                type: string;
-                labels: {
-                    0: string;
-                    1: string;
-                    2: string;
-                    3: string;
-                    4: string;
-                    5: string;
-                    6: string;
-                    7: string;
-                };
-            };
-            options: number[];
-            mapping: {
-                0: "primary";
-                1: "secondary";
-                2: "danger";
-                3: "ghost";
-                4: "danger--primary";
-                5: "danger--ghost";
-                6: "danger--tertiary";
-                7: "tertiary";
-            };
+            type: string;
         };
-        buttonIcon: {
+        tasksConfig: {
             description: string;
             control: {
                 type: string;
@@ -17184,51 +17099,39 @@ export declare const ThemeG100: {
                     0: string;
                     1: string;
                     2: string;
-                    3: string;
                 };
             };
             options: number[];
             mapping: {
                 0: null;
-                1: import("@carbon/react/icons").CarbonIconType;
-                2: import("@carbon/react/icons").CarbonIconType;
-                3: import("@carbon/react/icons").CarbonIconType;
+                1: {
+                    type: string;
+                    button: {
+                        href: string;
+                        icon: import("@carbon/icons-react").CarbonIconType;
+                        text: string;
+                        type: "tertiary";
+                    };
+                };
+                2: {
+                    type: string;
+                    dropdown: {
+                        label: string;
+                    };
+                };
             };
         };
-        headerStatic: {
+        userName: {
+            description: string;
+        };
+        welcomeText: {
+            description: string;
+        };
+        workspaceLabel: {
             description: string;
-            type: string;
-            control: {
-                type: string;
-                labels: {
-                    0: string;
-                    1: string;
-                    2: string;
-                    3: string;
-                    4: string;
-                };
-            };
-            options: number[];
-            mapping: {
-                0: null;
-                1: any;
-                2: any;
-                3: any;
-                4: any;
-            };
         };
     };
     args: {
-        name: string;
-        description: string;
-        buttonText: string;
-        productName: string;
-        buttonType: number;
-        buttonIcon: number;
-        headerStatic: number;
-        headerDropdown: boolean;
-        tileDropdownItems: number;
-        selectedTileGroup: number;
         allTiles: ({
             id: number;
             name: string;
@@ -17264,6 +17167,21 @@ export declare const ThemeG100: {
                 subtitle?: undefined;
             })[];
         })[];
+        allWorkspaces: {
+            id: string;
+            text: string;
+        }[];
+        description: string;
+        headerStatic: number;
+        productName: string;
+        selectedTileGroup: number;
+        selectedWorkspace: {
+            id: string;
+            text: string;
+        };
+        tasksConfig: number;
+        userName: string;
+        welcomeText: string;
         headerAnimation: number;
     };
     globals: {