Update stories to provide sensible parent container sizes

CityOfDetroit · Jun 28, 2024 · 748fe2d · 748fe2d
1 parent 9d20c4f
commit 748fe2d
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 49 deletions.
diff --git a/src/stories/legacybutton.stories.js b/src/stories/legacybutton.stories.js
@@ -36,7 +36,7 @@ export default {
   },
   args: {
     icon: 'neighborhoods',
-    outlineColor: 'black',
+    outlineColor: '#18252A',
     label:
       '<h3 class="text-center" style="text-transform: uppercase; font-weight: 500;">Neighborhoods</h3>',
     href: 'https://www.example.com',
@@ -78,58 +78,68 @@ function _createLegacyButton(args) {
 
 // Template
 const Template = (args) => {
-  return _createLegacyButton(args);
+  return html`
+    <div class="w-50 h-50">
+      ${_createLegacyButton(args)}
+    </div>
+  `;
 };
 
 export const Primary = Template.bind({});
 
 export const ButtonGrid = () => {
   return html`
     <div class="row">
-      <div class="col px-0 d-flex justify-content-center">
-        <cod-legacy-button
-          icon="neighborhoods"
-          href="https://www.example.com"
-          target="_blank"
-        >
-          <h3
-            class="text-center"
-            style="text-transform: uppercase; font-weight: 500;"
-            slot="label"
+      <div class="col-lg-4 col-sm-12 col-md-6 px-0 d-flex justify-content-center align-items-center">
+        <div class="w-75 h-75">
+          <cod-legacy-button
+            icon="neighborhoods"
+            href="https://www.example.com"
+            target="_blank"
           >
-            Neighborhoods
-          </h3>
-        </cod-legacy-button>
+            <h3
+              class="text-center"
+              style="text-transform: uppercase; font-weight: 500;"
+              slot="label"
+            >
+              Neighborhoods
+            </h3>
+          </cod-legacy-button>
+        </div>
       </div>
-      <div class="col px-0 d-flex justify-content-center">
-        <cod-legacy-button
-          icon="people"
-          href="https://www.example.com"
-          target="_blank"
-        >
-          <h3
-            class="text-center"
-            style="text-transform: uppercase; font-weight: 500;"
-            slot="label"
+      <div class="col-lg-4 col-sm-12 col-md-6 px-0 d-flex justify-content-center align-items-center">
+        <div class="w-75 h-75">
+          <cod-legacy-button
+            icon="people"
+            href="https://www.example.com"
+            target="_blank"
           >
-            People
-          </h3>
-        </cod-legacy-button>
+            <h3
+              class="text-center"
+              style="text-transform: uppercase; font-weight: 500;"
+              slot="label"
+            >
+              People
+            </h3>
+          </cod-legacy-button>
+        </div>
       </div>
-      <div class="col px-0 d-flex justify-content-center">
-        <cod-legacy-button
-          icon="sustainability"
-          href="https://www.example.com"
-          target="_blank"
-        >
-          <h3
-            class="text-center"
-            style="text-transform: uppercase; font-weight: 500;"
-            slot="label"
+      <div class="col-lg-4 col-sm-12 col-md-6 px-0 d-flex justify-content-center align-items-center">
+        <div class="w-75 h-75">
+          <cod-legacy-button
+            icon="sustainability"
+            href="https://www.example.com"
+            target="_blank"
           >
-            Sustainability
-          </h3>
-        </cod-legacy-button>
+            <h3
+              class="text-center"
+              style="text-transform: uppercase; font-weight: 500;"
+              slot="label"
+            >
+              Sustainability
+            </h3>
+          </cod-legacy-button>
+        </div>
       </div>
     </div>
   `;

diff --git a/src/stories/legacyicon.stories.js b/src/stories/legacyicon.stories.js
@@ -23,7 +23,7 @@ export default {
   },
   args: {
     icon: 'neighborhoods',
-    outlineColor: 'black',
+    outlineColor: '#18252A',
   },
 };
 
@@ -36,22 +36,32 @@ function _createLegacyIcon(args) {
 
 // Template
 const Template = (args) => {
-  return _createLegacyIcon(args);
+  return html`
+    <div class="w-50 h-50">
+      ${_createLegacyIcon(args)}
+    </div>
+  `;
 };
 
 export const Primary = Template.bind({});
 
 export const IconGrid = () => {
   return html`
     <div class="row">
-      <div class="col px-0 d-flex justify-content-center">
-        <cod-legacy-icon icon="neighborhoods"> </cod-legacy-icon>
+      <div class="col-lg-4 col-sm-12 col-md-6 px-0 d-flex justify-content-center align-items-center">
+        <div class="w-75 h-75">
+          <cod-legacy-icon icon="neighborhoods"> </cod-legacy-icon>
+        </div>
       </div>
-      <div class="col px-0 d-flex justify-content-center">
-        <cod-legacy-icon icon="people"> </cod-legacy-icon>
+      <div class="col-lg-4 col-sm-12 col-md-6 px-0 d-flex justify-content-center align-items-center">
+        <div class="w-75 h-75">
+          <cod-legacy-icon icon="people"> </cod-legacy-icon>
+        </div>
       </div>
-      <div class="col px-0 d-flex justify-content-center">
-        <cod-legacy-icon icon="sustainability"> </cod-legacy-icon>
+      <div class="col-lg-4 col-sm-12 col-md-6 px-0 d-flex justify-content-center align-items-center">
+        <div class="w-75 h-75">
+          <cod-legacy-icon icon="sustainability"> </cod-legacy-icon>
+        </div>
       </div>
     </div>
   `;