Update stories.js to include default arguments. Updated the template,…

… constructor and connectedcallback in the ActionButtonV2.js and removed rulesets from the ActionButtonVS.css file that are no longer needed
CityOfDetroit · Feb 28, 2024 · 9016432 · 9016432
1 parent 09edaca
commit 9016432
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 25 deletions.
diff --git a/src/components/atoms/ActionButtonV2/ActionButtonV2.css b/src/components/atoms/ActionButtonV2/ActionButtonV2.css
@@ -13,16 +13,6 @@ div {
   padding-top: 1em;
 }
 
-.abutton-title {
-  margin-bottom: var(--abutton-title-spacer-y);
-  font-weight: 900;
-  text-transform: uppercase;
-}
-
-.abutton-text:last-child {
-  margin-bottom: 0;
-}
-
 .abutton-body {
   padding: var(--abutton-spacer-y) var(--abutton-spacer-x);
 }

diff --git a/src/components/atoms/ActionButtonV2/ActionButtonV2.js b/src/components/atoms/ActionButtonV2/ActionButtonV2.js
@@ -12,8 +12,7 @@ template.innerHTML = `
         <cod-icon data-icon="" data-size="x-large">
         </cod-icon>
       </div>
-      <div class="abutton-body">
-        <h4 class="abutton-title"></h4>
+      <div class="abutton-body">  
         <slot></slot>
       </div>
     </div>
@@ -22,16 +21,12 @@ template.innerHTML = `
 `;
 
 class ActionButtonV2 extends HTMLElement {
-  static observedAttributes = [];
+  static observedAttributes = ['icon'];
 
   constructor() {
-    // Always call super first in constructor
     super();
-    // Create a shadow root
     const shadow = this.attachShadow({ mode: 'open' });
     shadow.appendChild(template.content.cloneNode(true));
-
-    // Add styles
     const bootStyles = document.createElement('style');
     bootStyles.textContent = bootstrapStyles;
     const variableStyles = document.createElement('style');
@@ -44,17 +39,10 @@ class ActionButtonV2 extends HTMLElement {
   }
 
   connectedCallback() {
-    // Update the title.
-    const title = this.getAttribute('title');
-    const titleElt = this.shadowRoot.querySelector('h4.abutton-title');
-    titleElt.innerText = title;
-
-    // Update the icon.
-    const icon = this.getAttribute('icon');
+    const icon = this.getAttribute('icon') || 'default-icon';
     const iconElt = this.shadowRoot.querySelector('cod-icon');
     iconElt.setAttribute('data-icon', icon);
 
-    // Update the button link and style.
     const btnColor = this.getAttribute('btn-color') ?? 'btn-outline-primary';
     const href = this.getAttribute('href');
     const target = this.getAttribute('target');

diff --git a/src/stories/actionbuttonV2.stories.js b/src/stories/actionbuttonV2.stories.js
@@ -24,6 +24,12 @@ export default {
       control: 'text',
     },
   },  
+  args: {
+    buttonColor: 'btn-outline-primary',
+    'primary-text': 'Do Something',
+    'secondary-text': 'Like click on this card',
+    icon: 'house-fill',
+  },
 };
 
 // Template
@@ -48,6 +54,7 @@ const Template = (args) => {
 
 export const ActionButtonV2 = Template.bind({});
 
+
 export const ActionButtonV2RichBody = () => html`
   <div style="width: 300px; height: 300px">
     <cod-action-button-v2