Fixed issue with primary and secondary text not showing properly in t…

…he ActionButtonV2Grid
CityOfDetroit · Feb 28, 2024 · e5b9af7 · e5b9af7
1 parent 1876b37
commit e5b9af7
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 28 deletions.
diff --git a/src/components/atoms/ActionButtonV2/ActionButtonV2.js b/src/components/atoms/ActionButtonV2/ActionButtonV2.js
@@ -14,6 +14,8 @@ template.innerHTML = `
       </div>
       <div class="abutton-body">  
         <slot></slot>
+      <slot name="primary"></slot>
+      <slot name="secondary"></slot> 
       </div>
     </div>
   </a>

diff --git a/src/stories/actionbuttonV2.stories.js b/src/stories/actionbuttonV2.stories.js
@@ -55,25 +55,17 @@ const Template = (args) => {
 export const ActionButtonV2 = Template.bind({});
 
 
+
 export const ActionButtonV2RichBody = () => html`
   <div style="width: 300px; height: 300px">
     <cod-action-button-v2
       btn-color="btn-outline-primary"
       icon="house"
-      primary-text="Do Something"
       href="https://example.com"
       target="_blank"
     >
-      <p>
-        Anything can go inside an action button but it's best to keep to simple
-        text.
-      </p>
-      <img
-        src="https://placehold.co/800x400/000000/FFF"
-        alt="..."
-        width="100"
-        height="50"
-      />
+      <h4 slot="primary">Do Something</h4>
+      <p slot="secondary">Like click on this card</p>
     </cod-action-button-v2>
   </div>
 `;
@@ -85,37 +77,35 @@ export const ActionButtonV2Grid = () => html`
         <cod-action-button-v2
           btn-color="btn-outline-primary"
           icon="house"
-          primary-text="Do Something"
           href="https://example.com"
           target="_blank"
         >
-          <p>Like Click on This Button</p>
+        <h4 slot="primary">Do Something</h4>
+        <p slot="secondary">Like click on this card</p>
         </cod-action-button-v2>
       </div>
       <div class="col-sm-4">
         <cod-action-button-v2
           btn-color="btn-outline-primary"
           icon="house"
-          primary-text="Do Something"
           href="https://example.com"
           target="_blank"
         >
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
-            luctus eros sit amet augue tempus sollicitudin. Mauris lacinia ante
-            et.
-          </p>
+        <h4 slot="primary">Do Something</h4>
+        <p slot="secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
+        luctus eros sit amet augue tempus sollicitudin. Mauris lacinia ante
+        et.</p>
         </cod-action-button-v2>
       </div>
       <div class="col-sm-4">
         <cod-action-button-v2
           btn-color="btn-outline-primary"
           icon="house"
-          primary-text="Do Something"
           href="https://example.com"
           target="_blank"
         >
-          <p>Like Click on This Button</p>
+          <h4 slot="primary">Do Something</h4>
+          <p slot="secondary">Like Click on This Button</p>
         </cod-action-button-v2>
       </div>
     </div>
@@ -124,35 +114,35 @@ export const ActionButtonV2Grid = () => html`
         <cod-action-button-v2
           btn-color="btn-outline-primary"
           icon="house"
-          primary-text="Do Something"
           href="https://example.com"
           target="_blank"
         >
-          <p>Like Click on This Button</p>
+          <h4 slot="primary">Do Something</h4>
+          <p slot="secondary">Like Click on This Button</p>
         </cod-action-button-v2>
       </div>
       <div class="col-sm-4">
         <cod-action-button-v2
           btn-color="btn-outline-primary"
           icon="house"
-          primary-text="Do Something"
           href="https://example.com"
           target="_blank"
         >
-          <p>Like Click on This Button</p>
+          <h4 slot="primary">Do Something</h4>
+          <p slot="secondary">Like Click on This Button</p>
         </cod-action-button-v2>
       </div>
       <div class="col-sm-4">
         <cod-action-button-v2
           btn-color="btn-outline-primary"
           icon="house"
-          primary-text="Do Something"
           href="https://example.com"
           target="_blank"
         >
-          <p>Like Click on This Button</p>
+          <h4 slot="primary">Do Something</h4>
+          <p slot="secondary">Like Click on This Button</p>
         </cod-action-button-v2>
       </div>
     </div>
   </div>
-`;
+`;