@carbon-labs/react-animated-header 0.11.0 → 0.13.0

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

@@ -8637,6 +8637,14 @@ export declare const ThemeG10: {
         workspaceLabel: {
             description: string;
         };
+        expandButtonLabel: {
+            description: string;
+            type: string;
+        };
+        collapseButtonLabel: {
+            description: string;
+            type: string;
+        };
     };
     args: {
         allTiles: ({
@@ -8696,6 +8704,8 @@ export declare const ThemeG10: {
         tasksConfig: number;
         userName: string;
         welcomeText: string;
+        expandButtonLabel: string;
+        collapseButtonLabel: string;
         headerAnimation: number;
     };
 };
@@ -17333,6 +17343,14 @@ export declare const ThemeG100: {
         workspaceLabel: {
             description: string;
         };
+        expandButtonLabel: {
+            description: string;
+            type: string;
+        };
+        collapseButtonLabel: {
+            description: string;
+            type: string;
+        };
     };
     args: {
         allTiles: ({
@@ -17392,6 +17410,8 @@ export declare const ThemeG100: {
         tasksConfig: number;
         userName: string;
         welcomeText: string;
+        expandButtonLabel: string;
+        collapseButtonLabel: string;
         headerAnimation: number;
     };
     globals: {

package/es/components/AnimatedHeader/AnimatedHeader.d.ts

@@ -50,6 +50,8 @@ export interface AnimatedHeaderProps {
     userName?: string;
     welcomeText?: string;
     workspaceLabel?: string;
+    expandButtonLabel?: string;
+    collapseButtonLabel?: string;
 }
 declare const AnimatedHeader: React.FC<AnimatedHeaderProps>;
 export default AnimatedHeader;

package/es/components/AnimatedHeader/AnimatedHeader.js

@@ -35,7 +35,9 @@ const AnimatedHeader = _ref => {
     tasksConfig,
     userName,
     welcomeText,
-    workspaceLabel = `Open in: ${userName}'s workspace` || `Select a workspace`
+    workspaceLabel = `Open in: ${userName}'s workspace` || `Select a workspace`,
+    expandButtonLabel = 'Expand',
+    collapseButtonLabel = 'Collapse'
   } = _ref;
   const prefix = usePrefix();
   const blockClass = `${prefix}--animated-header`;
@@ -194,7 +196,7 @@ const AnimatedHeader = _ref => {
     kind: "ghost",
     renderIcon: open ? ChevronUp : ChevronDown,
     onClick: handleButtonCollapseClick
-  }, open ? `Collapse` : `Expand`))));
+  }, open ? collapseButtonLabel : expandButtonLabel))));
 };
 AnimatedHeader.displayName = 'Animated Header';
 AnimatedHeader.propTypes = {
@@ -210,10 +212,18 @@ AnimatedHeader.propTypes = {
    * Specify an optional className to be added to your Animated Header
    */
   className: PropTypes.string,
+  /**
+   * Custom collapse button label
+   */
+  collapseButtonLabel: PropTypes.string,
   /**
    * Provide short sentence in max. 3 lines related to product context
    */
   description: PropTypes.string,
+  /**
+   * Custom expand button label
+   */
+  expandButtonLabel: PropTypes.string,
   /**
    * Helper function passed to downshift that allows the library to render a
    * given item to a string label. By default, it extracts the `label` field

package/lib/__stories__/AnimatedHeader.stories.d.ts

@@ -8637,6 +8637,14 @@ export declare const ThemeG10: {
         workspaceLabel: {
             description: string;
         };
+        expandButtonLabel: {
+            description: string;
+            type: string;
+        };
+        collapseButtonLabel: {
+            description: string;
+            type: string;
+        };
     };
     args: {
         allTiles: ({
@@ -8696,6 +8704,8 @@ export declare const ThemeG10: {
         tasksConfig: number;
         userName: string;
         welcomeText: string;
+        expandButtonLabel: string;
+        collapseButtonLabel: string;
         headerAnimation: number;
     };
 };
@@ -17333,6 +17343,14 @@ export declare const ThemeG100: {
         workspaceLabel: {
             description: string;
         };
+        expandButtonLabel: {
+            description: string;
+            type: string;
+        };
+        collapseButtonLabel: {
+            description: string;
+            type: string;
+        };
     };
     args: {
         allTiles: ({
@@ -17392,6 +17410,8 @@ export declare const ThemeG100: {
         tasksConfig: number;
         userName: string;
         welcomeText: string;
+        expandButtonLabel: string;
+        collapseButtonLabel: string;
         headerAnimation: number;
     };
     globals: {

package/lib/components/AnimatedHeader/AnimatedHeader.d.ts

@@ -50,6 +50,8 @@ export interface AnimatedHeaderProps {
     userName?: string;
     welcomeText?: string;
     workspaceLabel?: string;
+    expandButtonLabel?: string;
+    collapseButtonLabel?: string;
 }
 declare const AnimatedHeader: React.FC<AnimatedHeaderProps>;
 export default AnimatedHeader;

package/lib/components/AnimatedHeader/AnimatedHeader.js

@@ -39,7 +39,9 @@ const AnimatedHeader = _ref => {
     tasksConfig,
     userName,
     welcomeText,
-    workspaceLabel = `Open in: ${userName}'s workspace` || `Select a workspace`
+    workspaceLabel = `Open in: ${userName}'s workspace` || `Select a workspace`,
+    expandButtonLabel = 'Expand',
+    collapseButtonLabel = 'Collapse'
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const blockClass = `${prefix}--animated-header`;
@@ -198,7 +200,7 @@ const AnimatedHeader = _ref => {
     kind: "ghost",
     renderIcon: open ? bucket3.ChevronUp : bucket3.ChevronDown,
     onClick: handleButtonCollapseClick
-  }, open ? `Collapse` : `Expand`))));
+  }, open ? collapseButtonLabel : expandButtonLabel))));
 };
 AnimatedHeader.displayName = 'Animated Header';
 AnimatedHeader.propTypes = {
@@ -214,10 +216,18 @@ AnimatedHeader.propTypes = {
    * Specify an optional className to be added to your Animated Header
    */
   className: PropTypes.string,
+  /**
+   * Custom collapse button label
+   */
+  collapseButtonLabel: PropTypes.string,
   /**
    * Provide short sentence in max. 3 lines related to product context
    */
   description: PropTypes.string,
+  /**
+   * Custom expand button label
+   */
+  expandButtonLabel: PropTypes.string,
   /**
    * Helper function passed to downshift that allows the library to render a
    * given item to a string label. By default, it extracts the `label` field

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-animated-header",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -13,8 +13,10 @@
     "url": "https://github.com/carbon-design-system/carbon-labs",
     "directory": "src/components/AnimatedHeader"
   },
-  "main": "./src/index.js",
-  "module": "./src/index.js",
+  "exports": {
+    "import": "./es/index.js",
+    "require": "./lib/index.js"
+  },
   "files": [
     "es",
     "lib",
@@ -36,5 +38,5 @@
   "devDependencies": {
     "@carbon-labs/utilities": "canary"
   },
-  "gitHead": "21d95639102946ba47ba52d7b98fe09ff6c55a6e"
+  "gitHead": "a5745110a01ff799eb90643535370b87f17ea4fa"
 }