[CL-500] Add disclosure component and directive (#11865)

libs/components/src/icon-button/icon-button.component.ts

@@ -52,10 +52,14 @@ const styles: Record<IconButtonType, string[]> = {
     "tw-bg-transparent",
     "!tw-text-muted",
     "tw-border-transparent",
+    "aria-expanded:tw-bg-text-muted",
+    "aria-expanded:!tw-text-contrast",
     "hover:tw-bg-transparent-hover",
     "hover:tw-border-primary-700",
     "focus-visible:before:tw-ring-primary-700",
     "disabled:tw-opacity-60",
+    "aria-expanded:hover:tw-bg-secondary-700",
+    "aria-expanded:hover:tw-border-secondary-700",
     "disabled:hover:tw-border-transparent",
     "disabled:hover:tw-bg-transparent",
     ...focusRing,

libs/components/src/icon-button/icon-button.mdx

@@ -29,8 +29,6 @@ Icon buttons can be found in other components such as: the
 [dialog](?path=/docs/component-library-dialogs--docs), and
 [table](?path=/docs/component-library-table--docs).
 
-<Story id="component-library-banner--premium" />
-
 ## Styles
 
 There are 4 common styles for button main, muted, contrast, and danger. The other styles follow the
@@ -40,48 +38,48 @@ button component styles.
 
 Used for general icon buttons appearing on the theme’s main `background`
 
-<Story id="component-library-icon-button--main" />
+<Story of={stories.Main} />
 
 ### Muted
 
 Used for low emphasis icon buttons appearing on the theme’s main `background`
 
-<Story id="component-library-icon-button--muted" />
+<Story of={stories.Muted} />
 
 ### Contrast
 
 Used on a theme’s colored or contrasting backgrounds such as in the navigation or on toasts and
 banners.
 
-<Story id="component-library-icon-button--contrast" />
+<Story of={stories.Contrast} />
 
 ### Danger
 
 Danger is used for “trash” actions throughout the experience, most commonly in the bottom right of
 the dialog component.
 
-<Story id="component-library-icon-button--danger" />
+<Story of={stories.Danger} />
 
 ### Primary
 
 Used in place of the main button component if no text is used. This allows the button to display
 square.
 
-<Story id="component-library-icon-button--primary" />
+<Story of={stories.Primary} />
 
 ### Secondary
 
 Used in place of the main button component if no text is used. This allows the button to display
 square.
 
-<Story id="component-library-icon-button--secondary" />
+<Story of={stories.Secondary} />
 
 ### Light
 
 Used on a background that is dark in both light theme and dark theme. Example: end user navigation
 styles.
 
-<Story id="component-library-icon-button--light" />
+<Story of={stories.Light} />
 
 **Note:** Main and contrast styles appear on backgrounds where using `primary-700` as a focus
 indicator does not meet WCAG graphic contrast guidelines.
@@ -95,11 +93,11 @@ with less padding around the icon, such as in the navigation component.
 
 ### Small
 
-<Story id="component-library-icon-button--small" />
+<Story of={stories.Small} />
 
 ### Default
 
-<Story id="component-library-icon-button--default" />
+<Story of={stories.Default} />
 
 ## Accessibility
 

libs/components/src/icon-button/icon-button.stories.ts

@@ -23,7 +23,7 @@ type Story = StoryObj<BitIconButtonComponent>;
 export const Default: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
     <div class="tw-space-x-4">
       <button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" buttonType="main" [size]="size">Button</button>
       <button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" buttonType="muted" [size]="size">Button</button>
@@ -56,7 +56,7 @@ export const Small: Story = {
 export const Primary: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
     <button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size">Button</button>
     `,
   }),
@@ -96,7 +96,7 @@ export const Muted: Story = {
 export const Light: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
     <div class="tw-bg-background-alt2 tw-p-6 tw-w-full tw-inline-block">
       <button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size">Button</button>
     </div>
@@ -110,7 +110,7 @@ export const Light: Story = {
 export const Contrast: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
     <div class="tw-bg-primary-600 tw-p-6 tw-w-full tw-inline-block">
       <button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size">Button</button>
     </div>