fix(modal): fix react modal-header-actions export

add header action story closes vmware-clarity#107
ashleyryan · Jun 16, 2022 · 8af3d3f · 8af3d3f
1 parent eb7b870
commit 8af3d3f
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 1 deletion.
diff --git a/projects/core/src/modal/modal.stories.mdx b/projects/core/src/modal/modal.stories.mdx
@@ -20,6 +20,9 @@ import '@cds/core/modal/register.js';
   <cds-modal-header>
     <h3 cds-text="title">I have a nice title</h3>
   </cds-modal-header>
+  <cds-modal-header-actions>
+    <cds-button>Do something in the header</cds-button>
+  </cds-modal-header-actions>
   <cds-modal-content>
     <p cds-text="body">But not much to say...</p>
   </cds-modal-content>
@@ -54,6 +57,12 @@ import '@cds/core/modal/register.js';
   <Story id="stories-modal--extra-large" />
 </Preview>
 
+## Header Actions
+
+<Preview>
+  <Story id="stories-modal--header-actions" />
+</Preview>
+
 ## Dark Theme
 
 <Preview>

diff --git a/projects/core/src/modal/modal.stories.ts b/projects/core/src/modal/modal.stories.ts
@@ -6,6 +6,7 @@
 
 import '@cds/core/modal/register.js';
 import '@cds/core/button/register.js';
+import '@cds/core/button-action/register.js';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { getElementStorybookArgs, property, spreadProps } from '@cds/core/internal';
@@ -165,6 +166,25 @@ export function extraLarge() {
   `;
 }
 
+/** @website */
+export function headerActions() {
+  return html`<cds-demo popover>
+    <cds-modal _demo-mode aria-labelledby="modal-title">
+      <cds-modal-header>
+        <h3 cds-text="section" cds-first-focus id="modal-title">Header Actions Modal Example</h3>
+      </cds-modal-header>
+      <cds-modal-header-actions cds-layout="horizontal gap:sm">
+        <cds-button-action shape="bars" aria-label="filter"></cds-button-action>
+        <cds-button-action shape="filter" aria-label="filter"></cds-button-action>
+      </cds-modal-header-actions>
+      <cds-modal-content>
+        <p cds-text="body">Place holder text for the header actions modal example.</p>
+      </cds-modal-content>
+      <cds-modal-actions></cds-modal-actions>
+    </cds-modal>
+  </cds-demo>`;
+}
+
 /** @website */
 export function darkTheme() {
   return html`

diff --git a/projects/react/src/modal/index.tsx b/projects/react/src/modal/index.tsx
@@ -25,7 +25,7 @@ export const CdsModalContent = createComponent(React, 'cds-modal-content', Modal
 export const CdsModalHeader = createComponent(React, 'cds-modal-header', ModalHeader, {}, 'CdsModalHeader');
 export const CdsModalHeaderActions = createComponent(
   React,
-  'cds-modal-header-action',
+  'cds-modal-header-actions',
   ModalHeaderActions,
   {},
   'CdsModalHeaderActions'