Merge pull request #238 from CityOfDetroit/issue.237

Allow legacy icons and buttons to scale responsively with parent container
CityOfDetroit · Jun 28, 2024 · 40f01e7 · 40f01e7
2 parents bb19656 + 91cce20
commit 40f01e7
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 62 deletions.
diff --git a/src/components/atoms/LegacyButton/LegacyButton.css b/src/components/atoms/LegacyButton/LegacyButton.css
@@ -0,0 +1,17 @@
+:host {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+:host *:not(style) {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+a {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
diff --git a/src/components/atoms/LegacyIcon/LegacyIcon.css b/src/components/atoms/LegacyIcon/LegacyIcon.css
@@ -1,11 +1,23 @@
+:host {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+:host *:not(style) {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
 .icon-container {
   position: relative;
 }
 
 .ellipse-shadow {
   position: absolute;
-  bottom: 12px;
-  left: 12px;
+  bottom: 5%;
+  left: 5%;
   width: 100%;
   height: 100%;
   z-index: -1;
@@ -25,7 +37,19 @@
   align-items: center;
 }
 
+.outline svg {
+  height: 100%;
+  width: 100%;
+}
+
+.ellipse svg {
+  height: 100%;
+  width: 100%;
+}
+
 .icon svg {
   display: block;
   margin: auto;
+  width: 50%;
+  height: 50%;
 }
diff --git a/src/components/atoms/LegacyIcon/LegacyIcon.js b/src/components/atoms/LegacyIcon/LegacyIcon.js
@@ -7,7 +7,7 @@ template.innerHTML = `
   <div class="icon-container d-inline-flex flex-column align-items-center">
     <div class="outline"></div>
     <div class="ellipse-shadow"></div>
-    <div class="icon"></div>
+    <div class="icon d-flex align-items-center justify-content-center"></div>
   </div>
 `;
 
@@ -43,17 +43,17 @@ class LegacyIcon extends HTMLElement {
     const outlineColor = this.getAttribute('outline-color');
     const outlineElement = this.shadowRoot.querySelector('.outline');
     outlineElement.innerHTML = `
-      <svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <circle cx="90" cy="90" r="89" stroke="${
-        outlineColor ?? 'black'
+      <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="50" cy="50" r="49" stroke="${
+        outlineColor ?? '#18252A'
       }" stroke-width="2"/>
       </svg>
       `;
 
     const shadowElement = this.shadowRoot.querySelector('.ellipse-shadow');
     shadowElement.innerHTML = `
-      <svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <circle cx="90" cy="90" r="90" fill="#9FD5B3"/>
+      <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="50" cy="50" r="49" fill="#9FD5B3"/>
       </svg>
       `;
 
@@ -77,32 +77,32 @@ class LegacyIcon extends HTMLElement {
         `;
       case 'housing':
         return `
-          <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M81.5 83.75C81.5 87.475 78.475 90.5 74.75 90.5H63.5V61.25C63.5 53.79 57.455 47.75 50 47.75C42.545 47.75 36.5 53.79 36.5 61.25V90.5H25.25C21.525 90.5 18.5 87.475 18.5 83.75V39.68L47.75 10.43C48.35 9.83 49.155 9.5 50 9.5C50.845 9.5 51.65 9.835 52.25 10.43L81.5 39.68V83.75ZM27.5 24.32L18.5 33.32ZM41 61.25C41 56.275 45.03 52.25 50 52.25C54.97 52.25 59 56.275 59 61.25V90.5H41V61.25ZM94.345 46.155L55.43 7.25C53.99 5.81 52.035 5 50 5C47.965 5 46.01 5.81 44.57 7.25L32 19.82L14 37.82L5.655 46.16C4.775 47.04 4.775 48.465 5.655 49.345C6.535 50.225 7.96 50.225 8.84 49.345L13.995 44.185V83.755C13.995 89.97 19.03 95.005 25.245 95.005H74.745C80.96 95.005 85.995 89.97 85.995 83.755V44.185L91.15 49.345C92.03 50.225 93.455 50.225 94.335 49.345C95.215 48.465 95.215 47.04 94.335 46.16" fill="white"/>
           </svg>
         `;
       case 'people':
         return `
-          <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M81.505 90.5H18.495V89.015C18.495 84.92 19.715 81.41 22.085 79.16C29.355 72.23 39.175 67.995 50 67.995C60.825 67.995 70.645 72.225 77.915 79.16C80.285 81.41 81.505 84.92 81.505 89.015V90.5ZM86.005 95V89.015C86.005 84.11 84.545 79.25 81.02 75.87C72.945 68.22 62.02 63.495 50 63.495C37.98 63.495 27.055 68.22 18.98 75.87C15.45 79.245 13.995 84.105 13.995 89.015V95H86.01H86.005Z" fill="white"/>
           <path d="M50 58.505C35.25 58.505 23.245 46.505 23.245 31.75C23.245 16.995 35.25 5 50 5C64.75 5 76.755 17 76.755 31.755C76.755 46.51 64.755 58.51 50 58.51V58.505ZM50 9.495C37.725 9.495 27.74 19.48 27.74 31.755C27.74 44.03 37.725 54.015 50 54.015C62.275 54.015 72.26 44.03 72.26 31.755C72.26 19.48 62.275 9.495 50 9.495Z" fill="white"/>
           </svg>
         `;
       case 'sustainability':
         return `
-          <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M92.755 11.75H25.25C24.31 11.76 23.43 12.36 23.12 13.3L5.195 67.085C5.07 67.365 4.995 67.675 4.995 68C4.995 69.24 6.01 70.25 7.25 70.25H28.135V88.245H32.855V70.245H36.495H50.64V88.245H55.36V70.24H63.5H74.745C75.685 70.24 76.565 69.64 76.875 68.7L88.685 33.27C88.925 32.925 89.065 32.52 89.085 32.075L94.805 14.915C94.925 14.635 95 14.325 95 13.995C95 12.755 93.995 11.745 92.75 11.745L92.755 11.75ZM49.36 16.245H67.135L62.645 29.74H44.86L49.36 16.245ZM61.145 34.25L56.645 47.755H38.86L43.365 34.25H61.145ZM26.86 16.245H44.635L40.14 29.74H22.36L26.86 16.245ZM20.86 34.25H38.64L34.14 47.755H16.36L20.86 34.25ZM10.36 65.75L14.86 52.25H32.635L28.135 65.75H10.36ZM38.905 65.75H38.75H38.595H32.86L37.36 52.25H55.14L50.64 65.75H38.905ZM73.14 65.75H55.365L59.86 52.25H77.64L73.14 65.75ZM79.14 47.755H61.365L65.865 34.25H83.645L79.14 47.755ZM85.145 29.745H67.365L71.865 16.25H89.645L85.145 29.745Z" fill="white"/>
           </svg>
         `;
       case 'safety':
         return `
-          <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M81.49 27.015C81.415 42.39 80.775 54.225 76.82 64.1C72.845 74.035 65.3 82.43 50 90.005C34.7 82.425 27.15 74.035 23.18 64.1C19.245 54.27 18.59 42.5 18.51 27.225C26.71 26.285 38.04 22.835 46.805 15.295C47.935 14.325 49.025 13.275 50.065 12.155C51.155 13.255 52.305 14.275 53.5 15.22C59.35 19.855 66.425 22.895 72.37 24.77C75.74 25.83 78.92 26.58 81.49 27.02M86 23.54V23C82.345 23 66.82 20.03 56.295 11.685C55.105 10.745 53.98 9.73 52.94 8.65C51.85 7.51 50.86 6.295 50 5C49.115 6.325 48.15 7.56 47.11 8.715C46.095 9.85 45.005 10.905 43.865 11.88C34.345 20.08 21.25 23 14 23V23.28C14 24.71 14 26.115 14.01 27.5C14.185 59.265 16.875 79.395 50 95C83.125 79.395 85.815 59.265 85.99 27.5C85.99 26.2 86 24.88 86 23.54Z" fill="white"/>
           </svg>
         `;
       case 'commerce':
         return `
-          <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M5.97498 7.375C5.97498 6.12 6.95498 5.13 8.16498 5.13C9.37498 5.13 10.355 6.115 10.355 7.375V90.455H91.83C93.04 90.455 94.02 91.49 94.02 92.7C94.02 93.91 93.04 94.945 91.83 94.945H8.16498C6.95498 94.945 5.97498 93.96 5.97498 92.7V7.375ZM65.415 32.075C64.2 32.075 63.215 31.09 63.215 29.83C63.215 28.57 64.2 27.585 65.415 27.585H87.75L87.77 27.63H87.96L87.985 27.675H88.11L88.14 27.72H88.24L88.26 27.765H88.335L88.355 27.81H88.43L88.45 27.855H88.475L88.515 27.9H88.565L88.585 27.945H88.65L88.675 27.99H88.695L88.74 28.035H88.765L88.78 28.08H88.825L88.855 28.125L88.905 28.17L88.94 28.215L88.98 28.26H89.02L89.09 28.35L89.13 28.395L89.15 28.44H89.165L89.185 28.485L89.23 28.53L89.25 28.575H89.265L89.285 28.62H89.3L89.315 28.665L89.34 28.71L89.36 28.755H89.37L89.39 28.8H89.4L89.415 28.845H89.43L89.44 28.89H89.455L89.465 28.935L89.485 28.98L89.495 29.025H89.51L89.52 29.07H89.53V29.115L89.56 29.205L89.58 29.25L89.59 29.295L89.6 29.34L89.61 29.385L89.625 29.475V29.52L89.635 29.565V29.61H89.645V29.7L89.655 29.835V52.29C89.655 53.545 88.67 54.535 87.46 54.535C86.25 54.535 85.255 53.55 85.255 52.29V35.27L58.185 62.845C57.325 63.745 55.93 63.745 55.075 62.845L43.42 50.99L22.955 71.83C22.1 72.73 20.705 72.73 19.84 71.83C18.98 70.975 18.98 69.54 19.84 68.685L41.86 46.23C42.725 45.33 44.12 45.33 44.97 46.23L56.625 58.085L82.14 32.085H65.435L65.415 32.075Z" fill="white"/>
           <path d="M5.97498 7.375C5.97498 6.12 6.95498 5.13 8.16498 5.13C9.37498 5.13 10.355 6.115 10.355 7.375V90.455H91.83C93.04 90.455 94.02 91.49 94.02 92.7C94.02 93.91 93.04 94.945 91.83 94.945H8.16498C6.95498 94.945 5.97498 93.96 5.97498 92.7V7.375ZM65.415 32.075C64.2 32.075 63.215 31.09 63.215 29.83C63.215 28.57 64.2 27.585 65.415 27.585H87.75L87.77 27.63H87.96L87.985 27.675H88.11L88.14 27.72H88.24L88.26 27.765H88.335L88.355 27.81H88.43L88.45 27.855H88.475L88.515 27.9H88.565L88.585 27.945H88.65L88.675 27.99H88.695L88.74 28.035H88.765L88.78 28.08H88.825L88.855 28.125L88.905 28.17L88.94 28.215L88.98 28.26H89.02L89.09 28.35L89.13 28.395L89.15 28.44H89.165L89.185 28.485L89.23 28.53L89.25 28.575H89.265L89.285 28.62H89.3L89.315 28.665L89.34 28.71L89.36 28.755H89.37L89.39 28.8H89.4L89.415 28.845H89.43L89.44 28.89H89.455L89.465 28.935L89.485 28.98L89.495 29.025H89.51L89.52 29.07H89.53V29.115L89.56 29.205L89.58 29.25L89.59 29.295L89.6 29.34L89.61 29.385L89.625 29.475V29.52L89.635 29.565V29.61H89.645V29.7L89.655 29.835V52.29C89.655 53.545 88.67 54.535 87.46 54.535C86.25 54.535 85.255 53.55 85.255 52.29V35.27L58.185 62.845C57.325 63.745 55.93 63.745 55.075 62.845L43.42 50.99L22.955 71.83C22.1 72.73 20.705 72.73 19.84 71.83C18.98 70.975 18.98 69.54 19.84 68.685L41.86 46.23C42.725 45.33 44.12 45.33 44.97 46.23L56.625 58.085L82.14 32.085H65.435L65.415 32.075Z" stroke="white" stroke-width="0.1" stroke-miterlimit="10"/>
           </svg>

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,70 @@ 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,34 @@ 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>
   `;