Workspace component development in Web components

[sangeethababu9223]

Design files:

https://www.figma.com/design/JMdj4uQP5K7wGG5yXw0oFI/Carbon-AI---AI-Workspace?node-id=1224-62815&t=PvIeVw85X7HxrBab-0

Implementation details:

Main component:

• Workspace Shell (cds-aichat-workspace-shell)

Sub components:

• Toolbar (cds-aichat-workspace-shell-toolbar)
• Header (cds-aichat-workspace-shell-header)
• Body (cds-aichat-workspace-shell-body)
• Notification (cds-aichat-workspace-shell-notification)
• Footer (cds-aichat-workspace-shell-footer)

Workspace Shell

Slots:

• toolbar
• header
• notification
• body
• footer

Workspace Shell Toolbar

Props:

• titleText: Expecting a simple text and can pass that as prop. Text truncation can be done for longer texts.

Slots:

• toolbar-action : Holds all the possible buttons/icon buttons in the toolbar.

Workspace Shell Header

Props:

• titleText: Title text in the header section
• subTitleText: Sub title text in the header section

Slots:

• header-description: The description section which could contain anything could be placed here.
• header-actions: This section would hold actionable componets like buttons if any like "Edit Plan" button in design.

Workspace Shell Body

One default slot only. keeping the component for styling purpose mostly.

Workspace Shell Notification

One default slot for notifications.

Workspace Shell Footer

Slots:

• footer-actions: For footer buttons

It is expected that the footer section will have atmost 3 buttons. So maybe should consider making it a prop instead?

Instance Methods:

• closeWorkspaceShell : For closing the workspace (This will be implemented later)