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

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

@@ -26,7 +26,7 @@ export declare const ThemeG10: {
                 default: boolean;
             };
         };
-        tileDropdownItems: {
+        selectedWorkspace: {
             description: string;
             type: string;
             control: {
@@ -8595,7 +8595,11 @@ export declare const ThemeG10: {
         buttonIcon: number;
         headerStatic: number;
         headerDropdown: boolean;
-        tileDropdownItems: number;
+        selectedWorkspace: number;
+        allWorkspaces: {
+            id: string;
+            text: string;
+        }[];
         selectedTileGroup: number;
         allTiles: ({
             id: number;
@@ -8658,7 +8662,7 @@ export declare const ThemeG100: {
                 default: boolean;
             };
         };
-        tileDropdownItems: {
+        selectedWorkspace: {
             description: string;
             type: string;
             control: {
@@ -17227,7 +17231,11 @@ export declare const ThemeG100: {
         buttonIcon: number;
         headerStatic: number;
         headerDropdown: boolean;
-        tileDropdownItems: number;
+        selectedWorkspace: number;
+        allWorkspaces: {
+            id: string;
+            text: string;
+        }[];
         selectedTileGroup: number;
         allTiles: ({
             id: number;

package/es/__stories__/data/index.d.ts

@@ -6,7 +6,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export const tileDropdownData: {
+export const workspaceData: {
     id: string;
     text: string;
 }[];

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

@@ -1,11 +1,17 @@
 import React from 'react';
 import { ButtonKind } from '@carbon/react';
 /** Animated Header */
+export interface SelectedWorkspace {
+    id: string;
+    text: string;
+}
 export interface Tile {
     id: string;
-    href: string;
-    title: string;
-    mainIcon: string;
+    href: string | null;
+    title: string | null;
+    subtitle: string | null;
+    mainIcon: string | null;
+    secondaryIcon: string | null;
 }
 export interface TileGroup {
     id: number;
@@ -20,7 +26,9 @@ export interface AnimatedHeaderProps {
     buttonIcon?: any;
     headerDropdown?: boolean;
     productName?: string;
-    tileDropdownItems?: Array<object>;
+    selectedWorkspace?: SelectedWorkspace[] | any;
+    setSelectedWorkspace: (e: any) => void;
+    allWorkspaces?: SelectedWorkspace[];
     selectedTileGroup: TileGroup[] | any;
     setSelectedTileGroup: (e: any) => void;
     allTiles: TileGroup[];

package/es/components/AnimatedHeader/AnimatedHeader.js

@@ -28,7 +28,9 @@ const AnimatedHeader = _ref => {
     buttonIcon = null,
     headerDropdown = false,
     productName = '[Product name]',
-    tileDropdownItems,
+    selectedWorkspace,
+    setSelectedWorkspace,
+    allWorkspaces,
     selectedTileGroup,
     setSelectedTileGroup,
     allTiles,
@@ -36,7 +38,7 @@ const AnimatedHeader = _ref => {
     headerStatic
   } = _ref;
   const prefix = usePrefix();
-  const blockClass = `${prefix}-animated-header`;
+  const blockClass = `${prefix}--animated-header`;
   let animationContainer = /*#__PURE__*/createRef();
   const [open, setOpen] = useState(true);
   const [playing, setPlaying] = useState(true);
@@ -140,36 +142,39 @@ const AnimatedHeader = _ref => {
     className: `${blockClass}__button`,
     kind: buttonType,
     renderIcon: buttonIcon
-  }, buttonText), !buttonText && headerDropdown && allTiles && /*#__PURE__*/React.createElement(Dropdown, {
+  }, buttonText), !buttonText && headerDropdown && allTiles && /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__header-dropdown--container`
+  }, /*#__PURE__*/React.createElement(Dropdown, {
     id: `${blockClass}__header-dropdown`,
     className: `${blockClass}__header-dropdown`,
     size: "md",
     autoAlign: true,
     titleText: "Label",
     initialSelectedItem: allTiles[0],
-    label: allTiles[0].name,
+    label: allTiles[0].name || 'Select an option below',
     hideLabel: true,
     type: "inline",
     items: allTiles,
     itemToString: item => item ? item.name : '',
     onChange: e => setSelectedTileGroup(e)
-  })), selectedTileGroup && /*#__PURE__*/React.createElement(Column, {
+  }))), selectedTileGroup && /*#__PURE__*/React.createElement(Column, {
     sm: 4,
     md: 8,
     lg: 12,
     className: `${blockClass}__content`
-  }, tileDropdownItems && /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}__tile-dropdown--container ${!open && contentCollapsed}`
+  }, allWorkspaces && /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__workspace--container ${!open && contentCollapsed}`
   }, /*#__PURE__*/React.createElement(Dropdown, {
-    id: `${blockClass}__tile-dropdown`,
-    className: `${blockClass}__tile-dropdown`,
+    id: `${blockClass}__workspace`,
+    className: `${blockClass}__workspace`,
     size: "sm",
     titleText: "Label",
-    label: `Open in: ${name}'s sandbox`,
+    label: `Open in: ${name}'s workspace` || 'Select a workspace',
     hideLabel: true,
     type: "inline",
-    items: tileDropdownItems,
-    itemToString: item => item ? item['text'] : ''
+    items: allWorkspaces,
+    itemToString: item => item ? item['text'] : '',
+    onChange: e => setSelectedWorkspace(e)
   })), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__tiles-container`
   }, selectedTileGroup.tiles.map(tile => {
@@ -245,10 +250,18 @@ AnimatedHeader.propTypes = {
    */
   productName: PropTypes.string,
   /**
-   * Object containing dropdown items
+   * Object containing workspace selection
    * `Open in: "_"`
    */
-  tileDropdownItems: PropTypes.arrayOf(PropTypes.object),
+  selectedWorkspace: PropTypes.object,
+  /**
+   * Provide function to be called when switching workspace selection
+   */
+  setSelectedWorkspace: PropTypes.func,
+  /**
+   * Array of all workspace options
+   */
+  allWorkspaces: PropTypes.arrayOf(PropTypes.object),
   /**
    * The tile group that is active in the header
    * ex. "AI Chat Tile w/ two glass tiles", "Four glass tiles", ect.

package/es/components/Tiles/AIPromptTile/AIPromptTile.js

@@ -9,7 +9,7 @@ import React, { useState } from 'react';
 import { AILabel, TextInput, IconButton, Button } from '@carbon/react';
 import * as index from '../../../node_modules/@carbon/icons-react/es/index.js';
 import { usePrefix } from '../../../node_modules/@carbon-labs/utilities/es/usePrefix.js';
-import { Send } from '../../../node_modules/@carbon/icons-react/es/generated/bucket-14.js';
+import { Send } from '../../../node_modules/@carbon/icons-react/es/generated/bucket-15.js';
 
 var _AILabel;
 
@@ -25,7 +25,7 @@ const AIPromptTile = _ref => {
     productName
   } = _ref;
   const prefix = usePrefix();
-  const blockClass = `${prefix}-animated-header__ai-prompt-tile`;
+  const blockClass = `${prefix}--animated-header__ai-prompt-tile`;
   const collapsed = `${blockClass}--collapsed`;
   const [textInput, setTextInput] = useState('');
   const MainIcon = mainIcon ? index[mainIcon] : null;
@@ -45,7 +45,7 @@ const AIPromptTile = _ref => {
   };
   return /*#__PURE__*/React.createElement("div", {
     id: `${blockClass}`,
-    className: `${prefix}-animated-header__tile ${blockClass}`,
+    className: `${prefix}--animated-header__tile ${blockClass}`,
     key: id
   }, /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--body ${!open && collapsed}`

package/es/components/Tiles/BaseTile/BaseTile.d.ts

@@ -15,8 +15,8 @@ interface BaseTileProps {
     mainIcon?: string;
     secondaryIcon?: string;
     title?: string;
-    productName?: string;
     subtitle?: string;
+    productName?: string;
 }
 export declare const BaseTile: React.FC<BaseTileProps>;
 export {};

package/es/components/Tiles/BaseTile/BaseTile.js

@@ -19,8 +19,8 @@ const BaseTile = _ref => {
     mainIcon,
     secondaryIcon,
     title,
-    productName,
-    subtitle
+    subtitle,
+    productName
   } = _ref;
   const props = {
     id,
@@ -29,8 +29,8 @@ const BaseTile = _ref => {
     mainIcon,
     secondaryIcon,
     title,
-    productName,
-    subtitle
+    subtitle,
+    productName
   };
   const tile = id === 'ai-tile' ? /*#__PURE__*/React.createElement(AIPromptTile, props) : /*#__PURE__*/React.createElement(GlassTile, props);
   return tile;

package/es/components/Tiles/GlassTile/GlassTile.js

@@ -23,12 +23,12 @@ const GlassTile = _ref => {
     subtitle
   } = _ref;
   const prefix = usePrefix();
-  const blockClass = `${prefix}-animated-header__glass-tile`;
+  const blockClass = `${prefix}--animated-header__glass-tile`;
   const collapsed = `${blockClass}--collapsed`;
   const MainIcon = mainIcon ? index[mainIcon] : null;
   const SecondaryIcon = secondaryIcon ? index[secondaryIcon] : null;
   return /*#__PURE__*/React.createElement(Link, {
-    className: `${prefix}-animated-header__tile ${blockClass}`,
+    className: `${prefix}--animated-header__tile ${blockClass}`,
     key: id,
     href: href
   }, /*#__PURE__*/React.createElement("div", {