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

add header action story closes #107
vmware-clarity · Jun 17, 2022 · ba90734 · ba90734
1 parent e7ea2cc
commit ba90734
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 5 deletions.
diff --git a/projects/core/custom-elements.json b/projects/core/custom-elements.json
@@ -48513,7 +48513,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Web component modal header actions to be used inside modal.\n\n```typescript\nimport '@cds/core/modal/register.js';\n```\n\n```html\n<cds-modal>\n  <cds-modal-header>\n     <h3 cds-text=\"title\">My Modal</h3>\n  </cds-modal-header>\n  <cds-modal-content>\n    <p>Lorem Ipsum</p>\n  </cds-modal-content>\n  <cds-modal-actions>\n      <cds-button>Ok</cds-button>\n  </cds-modal-actions>\n</cds-modal>\n```",
+          "description": "Web component modal header actions to be used inside modal.\n\n```typescript\nimport '@cds/core/modal/register.js';\n```\n\n```html\n<cds-modal>\n  <cds-modal-header>\n     <h3 cds-text=\"title\">My Modal</h3>\n  </cds-modal-header>\n  <cds-modal-header-actions>\n      <cds-button>Ok</cds-button>\n  </cds-modal-header-actions>\n  <cds-modal-content>\n    <p>Lorem Ipsum</p>\n  </cds-modal-content>\n</cds-modal>\n```",
           "name": "CdsModalHeaderActions",
           "members": [],
           "superclass": {

diff --git a/projects/core/src/modal/modal-header-actions.element.ts b/projects/core/src/modal/modal-header-actions.element.ts
@@ -19,12 +19,12 @@ import { html, LitElement } from 'lit';
  *   <cds-modal-header>
  *      <h3 cds-text="title">My Modal</h3>
  *   </cds-modal-header>
+ *   <cds-modal-header-actions>
+ *       <cds-button>Ok</cds-button>
+ *   </cds-modal-header-actions>
  *   <cds-modal-content>
  *     <p>Lorem Ipsum</p>
  *   </cds-modal-content>
- *   <cds-modal-actions>
- *       <cds-button>Ok</cds-button>
- *   </cds-modal-actions>
  * </cds-modal>
  * ```
  *

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'