Merge pull request #230 from CityOfDetroit/issue.221

Add new detroit legacy button component
CityOfDetroit · Jun 12, 2024 · 20628c2 · 20628c2
2 parents eba98d6 + 1ac5fa4
commit 20628c2
Show file tree

Hide file tree

Showing 6 changed files with 290 additions and 1 deletion.
diff --git a/build/assets/js/main.js b/build/assets/js/main.js
diff --git a/src/components/atoms/LegacyButton/LegacyButton.css b/src/components/atoms/LegacyButton/LegacyButton.css
@@ -0,0 +1,31 @@
+.icon-container {
+  position: relative;
+}
+
+.ellipse-shadow {
+  position: absolute;
+  bottom: 12px;
+  left: 12px;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+
+.icon {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  margin: auto;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+}
+
+.icon svg {
+  display: block;
+  margin: auto;
+}
diff --git a/src/components/atoms/LegacyButton/LegacyButton.js b/src/components/atoms/LegacyButton/LegacyButton.js
@@ -0,0 +1,125 @@
+import styles from '!!raw-loader!./LegacyButton.css';
+import varStyles from '!!raw-loader!../../../shared/variables.css';
+import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css';
+
+const template = document.createElement('template');
+template.innerHTML = `
+<div class="btn-container d-inline-flex flex-column align-items-center">
+  <div class="icon-container mb-4">
+    <div class="outline"></div>
+    <div class="ellipse-shadow"></div>
+    <div class="icon"></div>
+  </div>
+  <slot name="label"></slot>
+</div>
+`;
+
+/**
+ * Represents a button custom element for use on the Detroit Legacy website.
+ *
+ * @class LegacyButton
+ * @extends HTMLElement
+ */
+class LegacyButton extends HTMLElement {
+  static observedAttributes = [];
+
+  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');
+    variableStyles.textContent = varStyles;
+    const itemStyles = document.createElement('style');
+    itemStyles.textContent = styles;
+    shadow.appendChild(bootStyles);
+    shadow.appendChild(variableStyles);
+    shadow.appendChild(itemStyles);
+  }
+
+  connectedCallback() {
+    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="black" 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>
+      `;
+
+    const iconElement = this.shadowRoot.querySelector('.icon');
+    iconElement.innerHTML = this._getIconInnerHTML(this.getAttribute('icon'));
+
+    const btnContainer = this.shadowRoot.querySelector('.btn-container');
+    const href = this.getAttribute('href');
+    const target = this.getAttribute('target');
+    const linkElement = document.createElement('a');
+    linkElement.href = href;
+    linkElement.target = target;
+    linkElement.appendChild(btnContainer);
+    this.shadowRoot.appendChild(linkElement);
+  }
+
+  /**
+   * Returns the inner HTML for the specified icon.
+   *
+   * @param {string} icon - The name of the icon.
+   * @returns {string} The inner HTML for the specified icon.
+   */
+  _getIconInnerHTML(icon) {
+    switch (icon) {
+      case 'neighborhoods':
+        return `
+          <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M77 95V76.875C81.695 76.355 85.905 74.235 89.07 71.065C92.735 67.405 95 62.345 95 56.755C95 51.165 92.735 46.095 89.07 42.435C85.405 38.77 80.345 36.5 74.755 36.5C74.015 36.5 73.235 36.55 72.44 36.64C71.92 28.195 68.28 20.58 62.665 14.94L62.615 14.89C56.505 8.78 48.07 5.005 38.755 5.005C29.44 5.005 21.045 8.76501 14.94 14.85L14.89 14.9C8.78501 21.005 5.005 29.44 5.005 38.755C5.005 48.07 8.77001 56.47 14.85 62.57L14.9 62.62C20.515 68.23 28.09 71.87 36.51 72.43V95.005H41.005V72.43C46.99 72.035 52.55 70.08 57.28 66.965C58.83 69.62 60.965 71.88 63.51 73.58C66.14 75.345 69.21 76.505 72.505 76.875V95H77.005H77ZM59.445 59.445C54.65 64.235 48.195 67.38 41.005 67.925V57.685L49.345 49.34C50.225 48.46 50.225 47.04 49.345 46.165C48.47 45.285 47.045 45.285 46.165 46.165L41.005 51.32V29.755C41.005 28.51 39.995 27.5 38.755 27.5C37.515 27.5 36.505 28.51 36.505 29.755V42.325L31.34 37.16C30.465 36.285 29.035 36.285 28.155 37.16C27.28 38.04 27.28 39.465 28.155 40.345L36.5 48.685V56.605C36.49 56.705 36.49 56.8 36.5 56.895V67.92C29.315 67.375 22.855 64.23 18.06 59.44C12.77 54.15 9.495 46.83 9.495 38.755C9.495 30.68 12.77 23.355 18.06 18.07C23.35 12.78 30.665 9.505 38.745 9.505C46.825 9.505 54.145 12.78 59.43 18.07C64.72 23.355 67.99 30.675 67.99 38.755C67.99 43.455 66.885 47.885 64.92 51.82L64.795 52.07L64.735 52.185L64.64 52.365L64.625 52.39L64.545 52.55L64.46 52.705L64.445 52.725L64.35 52.905L64.285 53.015L64.25 53.085L64.145 53.26L64.11 53.32L64.045 53.435L63.94 53.61V53.625L63.835 53.785L63.75 53.93L63.73 53.96L63.62 54.135L63.56 54.225L63.51 54.305L63.4 54.475L63.37 54.515L63.29 54.64L63.18 54.81L62.985 55.105L62.835 55.315L62.78 55.395L62.58 55.685L62.49 55.815L62.38 55.975L62.37 55.985L62.255 56.145L62.17 56.255L62.135 56.31L61.76 56.79L61.74 56.81C61.545 57.07 61.33 57.32 61.125 57.575L61.08 57.63L60.86 57.88L60.85 57.895C60.385 58.43 59.91 58.945 59.415 59.44L59.445 59.445ZM74.75 59.005C73.51 59.005 72.5 60.015 72.5 61.255V72.34C70.11 72.005 67.91 71.13 66 69.86C63.87 68.43 62.105 66.5 60.88 64.23C61.46 63.72 62.025 63.2 62.57 62.66L62.62 62.61C62.84 62.39 63.055 62.17 63.27 61.94L63.415 61.79L63.555 61.635L63.975 61.175L64.11 61.025L64.25 60.865L64.28 60.825L64.515 60.55L64.54 60.515L64.65 60.39L64.78 60.235L64.8 60.215L64.91 60.08L65.04 59.92L65.055 59.9L65.165 59.755L65.295 59.595L65.305 59.58L65.425 59.425L65.545 59.265H65.55L65.795 58.935L66.035 58.61L66.045 58.6L66.165 58.435L66.28 58.265L66.4 58.095L66.505 57.945L66.52 57.925L66.635 57.76L66.735 57.615L66.96 57.275L66.98 57.24L67.09 57.065L67.175 56.935L67.2 56.895L67.31 56.72L67.39 56.59L67.42 56.545L67.53 56.365L67.6 56.245L67.635 56.19L67.81 55.9L67.845 55.835L67.955 55.655L68.015 55.545L68.055 55.475L68.16 55.295L68.22 55.195L68.265 55.115L68.365 54.93L68.42 54.84L68.565 54.565L68.615 54.475L68.665 54.38L68.76 54.195L68.805 54.115L68.855 54.01L68.95 53.82C70.88 49.965 72.095 45.695 72.415 41.175L72.915 41.1C73.475 41.035 74.09 41.005 74.75 41.005C79.1 41.005 83.035 42.765 85.885 45.615C88.73 48.47 90.495 52.405 90.495 56.755C90.495 61.105 88.73 65.04 85.885 67.895C83.535 70.24 80.445 71.85 76.995 72.345V61.26C76.995 60.02 75.985 59.01 74.745 59.01L74.75 59.005Z" fill="white"/>
+          </svg>
+        `;
+      case 'housing':
+        return `
+          <svg width="100" height="100" 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">
+          <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">
+          <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">
+          <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">
+          <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>
+        `;
+      default:
+        return '';
+    }
+  }
+}
+
+export { LegacyButton as default };
diff --git a/src/components/atoms/LegacyButton/cod-legacy-button.js b/src/components/atoms/LegacyButton/cod-legacy-button.js
@@ -0,0 +1,2 @@
+import LegacyButton from './LegacyButton';
+customElements.define('cod-legacy-button', LegacyButton);
diff --git a/src/index.js b/src/index.js
@@ -24,6 +24,7 @@ import './components/atoms/FormLabel/cod-formlabel';
 import './components/atoms/FormSelect/cod-formselect';
 import './components/atoms/Icon/cod-icon';
 import './components/atoms/Image/cod-image';
+import './components/atoms/LegacyButton/cod-legacy-button';
 import './components/atoms/ListGroupItem/cod-listgroup-item';
 import './components/atoms/Loader/cod-loader';
 import './components/atoms/ModalBody/cod-modal-body';

diff --git a/src/stories/legacybutton.stories.js b/src/stories/legacybutton.stories.js
@@ -0,0 +1,130 @@
+import '../components/atoms/LegacyButton/cod-legacy-button';
+import { html } from 'lit-html';
+
+export default {
+  title: 'Components/Atoms/LegacyButton',
+  argTypes: {
+    label: {
+      control: { type: 'text' },
+      description: 'The label of the button. Custom markdown is supported.',
+    },
+    icon: {
+      control: { type: 'select' },
+      options: [
+        'neighborhoods',
+        'housing',
+        'people',
+        'sustainability',
+        'safety',
+        'commerce',
+      ],
+      description: 'The type of icon to use for the button.',
+    },
+    href: {
+      control: { type: 'text' },
+      description: 'The URL of where the button will link to.',
+    },
+    target: {
+      control: { type: 'select' },
+      options: ['_self', '_blank', '_parent', '_top'],
+      description: 'Where the new URL will open.',
+    },
+  },
+  args: {
+    label:
+      '<h3 class="text-center" style="text-transform: uppercase; font-weight: 500;">Neighborhoods</h3>',
+    icon: 'neighborhoods',
+    href: 'https://www.example.com',
+    target: '_blank',
+  },
+};
+
+function _containsHTMLTags(str) {
+  return /<\/?[a-z][\s\S]*>/i.test(str);
+}
+
+function _createElementFromHTML(htmlString) {
+  var div = document.createElement('div');
+  div.innerHTML = htmlString.trim();
+
+  // Change this to div.childNodes to support multiple top-level nodes.
+  return div.firstChild;
+}
+
+function _createLegacyButton(args) {
+  const legacyButtonElt = document.createElement('cod-legacy-button');
+  if (_containsHTMLTags(args.label)) {
+    const label = _createElementFromHTML(args.label);
+    label.slot = 'label';
+    legacyButtonElt.appendChild(label);
+  } else {
+    const label = document.createElement('span');
+    label.innerText = args.title;
+    label.classList.add('text-center');
+    label.slot = 'label';
+    legacyButtonElt.appendChild(label);
+  }
+  legacyButtonElt.setAttribute('icon', args.icon);
+  legacyButtonElt.setAttribute('href', args.href);
+  legacyButtonElt.setAttribute('target', args.target);
+  return legacyButtonElt;
+}
+
+// Template
+const Template = (args) => {
+  return _createLegacyButton(args);
+};
+
+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"
+          >
+            Neighborhoods
+          </h3>
+        </cod-legacy-button>
+      </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"
+          >
+            People
+          </h3>
+        </cod-legacy-button>
+      </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"
+          >
+            Sustainability
+          </h3>
+        </cod-legacy-button>
+      </div>
+    </div>
+  `;
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import LegacyButton from './LegacyButton';
		customElements.define('cod-legacy-button', LegacyButton);