@dta-au/civictheme-twig 1.13.1

package/components/00-base/visibility/_index.scss

@@ -0,0 +1,42 @@
+//
+// Visibility component.
+//
+
+@each $breakpoint, $value in $ct-breakpoints {
+  @if $breakpoint == $ct-visibility-lowest-breakpoint {
+    .show-#{$breakpoint} {
+      display: block !important;
+    }
+
+    .show-#{$breakpoint}-table {
+      display: table !important;
+    }
+
+    .hide-#{$breakpoint} {
+      display: none !important;
+    }
+  }
+  @else {
+    @include ct-breakpoint($breakpoint) {
+      .show-#{$breakpoint} {
+        display: block !important;
+      }
+
+      .show-#{$breakpoint}-table {
+        display: table !important;
+      }
+
+      .show-#{$breakpoint}-flex {
+        display: flex !important;
+      }
+
+      .hide-#{$breakpoint} {
+        display: none !important;
+      }
+    }
+  }
+}
+
+.ct-visually-hidden {
+  @include ct-visually-hidden();
+}

package/components/00-base/welcome/welcome.stories.js

@@ -0,0 +1,37 @@
+import Component from './welcome.stories.twig';
+import Constants from '../../../dist/constants.json';
+
+const meta = {
+  title: 'Welcome',
+  component: Component,
+  argTypes: {
+    logos: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export default meta;
+
+export const Welcome = {
+  parameters: {
+    layout: 'fullscreen',
+    html: {
+      disable: true,
+    },
+  },
+  args: {
+    logos: {
+      primary: {
+        mobile: {
+          url: Constants.LOGOS.light.civictheme.mobile,
+        },
+        desktop: {
+          url: Constants.LOGOS.light.civictheme.desktop,
+        },
+      },
+    },
+  },
+};

package/components/00-base/welcome/welcome.stories.scss

@@ -0,0 +1,30 @@
+.story-welcome {
+  height: 100vh;
+  width: 100%;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  // CivicTheme's own brand color.
+  background-color: #003f56;
+}
+
+.story-welcome__inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .ct-logo {
+    margin-bottom: 2em;
+
+    .ct-logo__image {
+      max-height: 5em;
+    }
+  }
+
+  .ct-paragraph {
+    margin-top: 2em;
+    max-width: 50em;
+  }
+}

package/components/00-base/welcome/welcome.stories.twig

@@ -0,0 +1,41 @@
+{#
+/**
+ * @file
+ * Welcome story template.
+ */
+#}
+
+<div class="story-welcome">
+  <div class="story-welcome__inner">
+    {% include '@molecules/logo/logo.twig' with {
+      theme: 'light',
+      logos: logos,
+    } only %}
+    {% set heading_content %}
+      A design system by
+      {% include '@atoms/content-link/content-link.twig' with {
+        theme: 'dark',
+        text: 'Salsa Digital',
+        url: 'https://salsa.digital/',
+      } only %}
+    {% endset %}
+    {% include '@atoms/heading/heading.twig' with {
+      theme: 'dark',
+      content: heading_content,
+      level: 4,
+      modifier_class: 'ct-text-align-center',
+    } only %}
+
+    {% include '@atoms/paragraph/paragraph.twig' with {
+      theme: 'dark',
+      content: 'Welcome to the CivicTheme design system, an open-source, atomic design-based, true design system developed to help you build websites quickly and efficiently.',
+      modifier_class: 'ct-text-align-center',
+    } only %}
+
+    {% include '@atoms/paragraph/paragraph.twig' with {
+      theme: 'dark',
+      content: 'CivicTheme provides an atomic design, component-based framework to build and easily manage website assets and components.',
+      modifier_class: 'ct-text-align-center',
+    } only %}
+  </div>
+</div>

package/components/01-atoms/button/__snapshots__/button.test.js.snap

@@ -0,0 +1,205 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button Component renders as a link with optional attributes 1`] = `
+<div>
+  
+
+  
+  <a
+    class="ct-button ct-theme-dark  ct-button--link ct-button--regular   custom-class"
+    data-component-name="button"
+    data-test="true"
+    href="https://example.com"
+    role="button"
+    target="_blank"
+  >
+    
+      
+    <svg
+      aria-hidden="true"
+      class="ct-icon ct-button__icon"
+      height="24"
+      role="img"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      
+
+      <path
+        d="M19.4097 13C19.1897 13 18.9597 12.93 18.7397 12.88C18.2945 12.7805 17.8568 12.6501 17.4297 12.49C16.9658 12.3212 16.4558 12.33 15.998 12.5146C15.5402 12.6992 15.1668 13.0466 14.9497 13.49L14.7297 13.95C13.7585 13.3992 12.8613 12.7271 12.0597 11.95C11.2825 11.1484 10.6105 10.2512 10.0597 9.28L10.5197 9.07C10.963 8.85292 11.3105 8.47953 11.4951 8.02169C11.6797 7.56385 11.6885 7.05391 11.5197 6.59C11.3609 6.15903 11.2306 5.71808 11.1297 5.27C11.0797 5.05 11.0397 4.82 11.0097 4.6C10.8882 3.89562 10.5193 3.25774 9.96931 2.80124C9.4193 2.34474 8.72438 2.09961 8.00968 2.11H4.99968C4.57693 2.10945 4.15883 2.19825 3.7728 2.37058C3.38677 2.54292 3.04152 2.7949 2.75968 3.11C2.472 3.43365 2.2578 3.81575 2.13179 4.23004C2.00577 4.64432 1.97094 5.08098 2.02968 5.51C2.57327 9.67214 4.47489 13.5387 7.43968 16.51C10.411 19.4748 14.2775 21.3764 18.4397 21.92C18.5695 21.9299 18.6999 21.9299 18.8297 21.92C19.5671 21.9211 20.2791 21.6505 20.8297 21.16C21.1448 20.8782 21.3968 20.5329 21.5691 20.1469C21.7414 19.7609 21.8302 19.3428 21.8297 18.92V15.92C21.8243 15.229 21.5805 14.5611 21.1396 14.0291C20.6987 13.4971 20.0876 13.1336 19.4097 13ZM19.8997 19C19.8994 19.1395 19.8698 19.2775 19.813 19.4049C19.7562 19.5324 19.6733 19.6465 19.5697 19.74C19.4601 19.8399 19.3297 19.9141 19.1878 19.9573C19.046 20.0006 18.8963 20.0117 18.7497 19.99C15.018 19.5026 11.5499 17.802 8.87968 15.15C6.20716 12.4775 4.49171 8.99737 3.99968 5.25C3.97796 5.10333 3.98912 4.95367 4.03236 4.81185C4.0756 4.67003 4.14983 4.5396 4.24968 4.43C4.3443 4.32515 4.46006 4.24154 4.58933 4.18466C4.7186 4.12778 4.85846 4.09892 4.99968 4.1H7.99968C8.23085 4.09435 8.45682 4.16898 8.63915 4.3112C8.82147 4.45341 8.94888 4.65442 8.99968 4.88C8.99968 5.15 9.08968 5.43 9.14968 5.7C9.26526 6.22386 9.419 6.73857 9.60968 7.24L8.20968 7.9C7.96905 8.01046 7.78204 8.21185 7.68968 8.46C7.58967 8.70346 7.58967 8.97654 7.68968 9.22C9.12888 12.3028 11.6069 14.7808 14.6897 16.22C14.9331 16.32 15.2062 16.32 15.4497 16.22C15.6978 16.1276 15.8992 15.9406 16.0097 15.7L16.6397 14.3C17.1556 14.4881 17.6834 14.6418 18.2197 14.76C18.4797 14.82 18.7597 14.87 19.0297 14.91C19.2553 14.9608 19.4563 15.0882 19.5985 15.2705C19.7407 15.4529 19.8153 15.6788 19.8097 15.91L19.8997 19ZM13.9997 2C13.7697 2 13.5297 2 13.2997 2C13.0345 2.02254 12.7891 2.14952 12.6175 2.353C12.4459 2.55647 12.3621 2.81978 12.3847 3.085C12.4072 3.35022 12.5342 3.59562 12.7377 3.76721C12.9412 3.93881 13.2045 4.02254 13.4697 4H13.9997C15.591 4 17.1171 4.63214 18.2423 5.75736C19.3675 6.88258 19.9997 8.4087 19.9997 10C19.9997 10.18 19.9997 10.35 19.9997 10.53C19.9775 10.7938 20.0609 11.0556 20.2314 11.2581C20.402 11.4606 20.6459 11.5871 20.9097 11.61H20.9897C21.24 11.611 21.4816 11.5181 21.6668 11.3496C21.8519 11.1811 21.9672 10.9493 21.9897 10.7C21.9897 10.47 21.9897 10.23 21.9897 10C21.9897 7.88 21.1482 5.84668 19.6501 4.34668C18.1519 2.84667 16.1197 2.00265 13.9997 2ZM15.9997 10C15.9997 10.2652 16.105 10.5196 16.2926 10.7071C16.4801 10.8946 16.7345 11 16.9997 11C17.2649 11 17.5193 10.8946 17.7068 10.7071C17.8943 10.5196 17.9997 10.2652 17.9997 10C17.9997 8.93913 17.5783 7.92172 16.8281 7.17157C16.078 6.42143 15.0605 6 13.9997 6C13.7345 6 13.4801 6.10536 13.2926 6.29289C13.105 6.48043 12.9997 6.73478 12.9997 7C12.9997 7.26522 13.105 7.51957 13.2926 7.70711C13.4801 7.89464 13.7345 8 13.9997 8C14.5301 8 15.0388 8.21071 15.4139 8.58579C15.789 8.96086 15.9997 9.46957 15.9997 10Z"
+      />
+      
+
+    </svg>
+    
+
+    <span
+      class="ct-text-icon__text"
+    >
+      Click me
+    </span>
+     
+    <span
+      class="ct-visually-hidden"
+    >
+      (Opens in a new tab/window)
+    </span>
+  </a>
+  
+
+</div>
+`;
+
+exports[`Button Component renders as a link with optional attributes, is external 1`] = `
+<div>
+  
+
+  
+  <a
+    class="ct-button ct-theme-dark  ct-button--link ct-button--regular  ct-button--external custom-class"
+    data-component-name="button"
+    data-test="true"
+    href="https://example.com"
+    role="button"
+    target="_blank"
+  >
+    
+      
+    <svg
+      aria-hidden="true"
+      class="ct-icon ct-button__icon"
+      height="24"
+      role="img"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      
+
+      <path
+        d="M19.4097 13C19.1897 13 18.9597 12.93 18.7397 12.88C18.2945 12.7805 17.8568 12.6501 17.4297 12.49C16.9658 12.3212 16.4558 12.33 15.998 12.5146C15.5402 12.6992 15.1668 13.0466 14.9497 13.49L14.7297 13.95C13.7585 13.3992 12.8613 12.7271 12.0597 11.95C11.2825 11.1484 10.6105 10.2512 10.0597 9.28L10.5197 9.07C10.963 8.85292 11.3105 8.47953 11.4951 8.02169C11.6797 7.56385 11.6885 7.05391 11.5197 6.59C11.3609 6.15903 11.2306 5.71808 11.1297 5.27C11.0797 5.05 11.0397 4.82 11.0097 4.6C10.8882 3.89562 10.5193 3.25774 9.96931 2.80124C9.4193 2.34474 8.72438 2.09961 8.00968 2.11H4.99968C4.57693 2.10945 4.15883 2.19825 3.7728 2.37058C3.38677 2.54292 3.04152 2.7949 2.75968 3.11C2.472 3.43365 2.2578 3.81575 2.13179 4.23004C2.00577 4.64432 1.97094 5.08098 2.02968 5.51C2.57327 9.67214 4.47489 13.5387 7.43968 16.51C10.411 19.4748 14.2775 21.3764 18.4397 21.92C18.5695 21.9299 18.6999 21.9299 18.8297 21.92C19.5671 21.9211 20.2791 21.6505 20.8297 21.16C21.1448 20.8782 21.3968 20.5329 21.5691 20.1469C21.7414 19.7609 21.8302 19.3428 21.8297 18.92V15.92C21.8243 15.229 21.5805 14.5611 21.1396 14.0291C20.6987 13.4971 20.0876 13.1336 19.4097 13ZM19.8997 19C19.8994 19.1395 19.8698 19.2775 19.813 19.4049C19.7562 19.5324 19.6733 19.6465 19.5697 19.74C19.4601 19.8399 19.3297 19.9141 19.1878 19.9573C19.046 20.0006 18.8963 20.0117 18.7497 19.99C15.018 19.5026 11.5499 17.802 8.87968 15.15C6.20716 12.4775 4.49171 8.99737 3.99968 5.25C3.97796 5.10333 3.98912 4.95367 4.03236 4.81185C4.0756 4.67003 4.14983 4.5396 4.24968 4.43C4.3443 4.32515 4.46006 4.24154 4.58933 4.18466C4.7186 4.12778 4.85846 4.09892 4.99968 4.1H7.99968C8.23085 4.09435 8.45682 4.16898 8.63915 4.3112C8.82147 4.45341 8.94888 4.65442 8.99968 4.88C8.99968 5.15 9.08968 5.43 9.14968 5.7C9.26526 6.22386 9.419 6.73857 9.60968 7.24L8.20968 7.9C7.96905 8.01046 7.78204 8.21185 7.68968 8.46C7.58967 8.70346 7.58967 8.97654 7.68968 9.22C9.12888 12.3028 11.6069 14.7808 14.6897 16.22C14.9331 16.32 15.2062 16.32 15.4497 16.22C15.6978 16.1276 15.8992 15.9406 16.0097 15.7L16.6397 14.3C17.1556 14.4881 17.6834 14.6418 18.2197 14.76C18.4797 14.82 18.7597 14.87 19.0297 14.91C19.2553 14.9608 19.4563 15.0882 19.5985 15.2705C19.7407 15.4529 19.8153 15.6788 19.8097 15.91L19.8997 19ZM13.9997 2C13.7697 2 13.5297 2 13.2997 2C13.0345 2.02254 12.7891 2.14952 12.6175 2.353C12.4459 2.55647 12.3621 2.81978 12.3847 3.085C12.4072 3.35022 12.5342 3.59562 12.7377 3.76721C12.9412 3.93881 13.2045 4.02254 13.4697 4H13.9997C15.591 4 17.1171 4.63214 18.2423 5.75736C19.3675 6.88258 19.9997 8.4087 19.9997 10C19.9997 10.18 19.9997 10.35 19.9997 10.53C19.9775 10.7938 20.0609 11.0556 20.2314 11.2581C20.402 11.4606 20.6459 11.5871 20.9097 11.61H20.9897C21.24 11.611 21.4816 11.5181 21.6668 11.3496C21.8519 11.1811 21.9672 10.9493 21.9897 10.7C21.9897 10.47 21.9897 10.23 21.9897 10C21.9897 7.88 21.1482 5.84668 19.6501 4.34668C18.1519 2.84667 16.1197 2.00265 13.9997 2ZM15.9997 10C15.9997 10.2652 16.105 10.5196 16.2926 10.7071C16.4801 10.8946 16.7345 11 16.9997 11C17.2649 11 17.5193 10.8946 17.7068 10.7071C17.8943 10.5196 17.9997 10.2652 17.9997 10C17.9997 8.93913 17.5783 7.92172 16.8281 7.17157C16.078 6.42143 15.0605 6 13.9997 6C13.7345 6 13.4801 6.10536 13.2926 6.29289C13.105 6.48043 12.9997 6.73478 12.9997 7C12.9997 7.26522 13.105 7.51957 13.2926 7.70711C13.4801 7.89464 13.7345 8 13.9997 8C14.5301 8 15.0388 8.21071 15.4139 8.58579C15.789 8.96086 15.9997 9.46957 15.9997 10Z"
+      />
+      
+
+    </svg>
+    
+
+    <span
+      class="ct-text-icon__text"
+    >
+      Click 
+    </span>
+    <span
+      class="ct-text-icon__group"
+    >
+      <span
+        class="ct-text-icon__text"
+      >
+        me
+      </span>
+       
+      <svg
+        aria-hidden="true"
+        class="ct-icon"
+        height="24"
+        role="img"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        
+
+        <path
+          d="M17.9199 6.62C17.8185 6.37565 17.6243 6.18147 17.3799 6.08C17.2597 6.02876 17.1306 6.00158 16.9999 6H6.99994C6.73472 6 6.48037 6.10536 6.29283 6.29289C6.1053 6.48043 5.99994 6.73478 5.99994 7C5.99994 7.26522 6.1053 7.51957 6.29283 7.70711C6.48037 7.89464 6.73472 8 6.99994 8H14.5899L6.28994 16.29C6.19621 16.383 6.12182 16.4936 6.07105 16.6154C6.02028 16.7373 5.99414 16.868 5.99414 17C5.99414 17.132 6.02028 17.2627 6.07105 17.3846C6.12182 17.5064 6.19621 17.617 6.28994 17.71C6.3829 17.8037 6.4935 17.8781 6.61536 17.9289C6.73722 17.9797 6.86793 18.0058 6.99994 18.0058C7.13195 18.0058 7.26266 17.9797 7.38452 17.9289C7.50638 17.8781 7.61698 17.8037 7.70994 17.71L15.9999 9.41V17C15.9999 17.2652 16.1053 17.5196 16.2928 17.7071C16.4804 17.8946 16.7347 18 16.9999 18C17.2652 18 17.5195 17.8946 17.707 17.7071C17.8946 17.5196 17.9999 17.2652 17.9999 17V7C17.9984 6.86932 17.9712 6.74022 17.9199 6.62Z"
+        />
+        
+
+      </svg>
+      
+
+    </span>
+    <span
+      class="ct-visually-hidden"
+    >
+      (Opens in a new tab/window)
+    </span>
+  </a>
+  
+
+</div>
+`;
+
+exports[`Button Component renders as a reset button 1`] = `
+<div>
+  
+
+  
+  <input
+    class="ct-button ct-theme-light  ct-button--reset ct-button--regular   "
+    data-component-name="button"
+    type="reset"
+    value="Reset"
+  />
+  
+
+</div>
+`;
+
+exports[`Button Component renders as a submit button 1`] = `
+<div>
+  
+
+  
+  <input
+    class="ct-button ct-theme-light  ct-button--submit ct-button--regular   "
+    data-component-name="button"
+    type="submit"
+    value="Submit"
+  />
+  
+
+</div>
+`;
+
+exports[`Button Component renders with disabled state 1`] = `
+<div>
+  
+
+  
+  <button
+    aria-disabled="true"
+    class="ct-button ct-theme-light  ct-button--button ct-button--regular   "
+    data-component-name="button"
+    disabled="disabled"
+  >
+    <span
+      class="ct-text-icon__text"
+    >
+      Click me
+    </span>
+  </button>
+  
+
+</div>
+`;
+
+exports[`Button Component renders with required attributes 1`] = `
+<div>
+  
+
+  
+  <button
+    class="ct-button ct-theme-light  ct-button--button ct-button--regular   "
+    data-component-name="button"
+  >
+    <span
+      class="ct-text-icon__text"
+    >
+      Click me
+    </span>
+  </button>
+  
+
+</div>
+`;

package/components/01-atoms/button/button.js

@@ -0,0 +1,127 @@
+/**
+ * CivicTheme Button component.
+ */
+
+function CivicThemeButton(el) {
+  if (el.getAttribute('data-button') === 'true') {
+    return;
+  }
+
+  this.el = el;
+  this.el.setAttribute('data-button', 'true');
+  this.dismissButton = this.el.querySelector('[data-button-dismiss]');
+  this.keyboardFocused = false;
+
+  this.el.addEventListener('click', this.clickEvent.bind(this));
+  this.el.addEventListener('focusin', this.focusinEvent.bind(this));
+  this.el.addEventListener('focusout', this.focusoutEvent.bind(this));
+
+  document.addEventListener('mousedown', this.mousedownEvent.bind(this));
+  document.addEventListener('keydown', this.keydownEvent.bind(this));
+
+  if (this.dismissButton) {
+    this.dismissButton.addEventListener('click', this.dismissClickEvent.bind(this));
+  }
+}
+
+/**
+ * Click event handler.
+ */
+CivicThemeButton.prototype.clickEvent = function (e) {
+  if (/input/i.test(e.target.tagName)) {
+    let isChecked = false;
+    const input = e.target;
+    if (input.getAttribute('type') === 'checkbox') {
+      isChecked = input.getAttribute('checked');
+    } else if (input.getAttribute('type') === 'radio') {
+      // "Uncheck" all but current radio in this group.
+      const name = input.getAttribute('name');
+      const radios = document.querySelectorAll(`input[type=radio][name="${name}"]`);
+      for (const i in radios) {
+        if (Object.prototype.hasOwnProperty.call(radios, i) && radios[i] !== input) {
+          this.setChecked(radios[i], false);
+        }
+      }
+    } else {
+      return;
+    }
+    this.setChecked(input, !isChecked);
+  }
+};
+
+/**
+ * Keydown event handler.
+ */
+CivicThemeButton.prototype.keydownEvent = function (e) {
+  if (e.key && (e.key === 'Tab' || e.key.indexOf('Arrow') === 0)) {
+    this.keyboardFocused = true;
+  }
+};
+
+/**
+ * Keydown event handler.
+ */
+CivicThemeButton.prototype.mousedownEvent = function () {
+  this.keyboardFocused = false;
+};
+
+/**
+ * Set the checked value.
+ */
+CivicThemeButton.prototype.setChecked = function (input, check) {
+  const button = this.findButton(input);
+  if (button && !button.hasAttribute('disabled')) {
+    if (check) {
+      input.setAttribute('checked', 'checked');
+      button.classList.add('active');
+    } else {
+      input.removeAttribute('checked');
+      button.classList.remove('active');
+    }
+  }
+};
+
+/**
+ * Focusin event handler.
+ */
+CivicThemeButton.prototype.focusinEvent = function (e) {
+  const button = this.findButton(e.target);
+  if (button && !button.hasAttribute('disabled') && this.keyboardFocused) {
+    button.classList.add('focus');
+  }
+};
+
+/**
+ * Focusout event handler.
+ */
+CivicThemeButton.prototype.focusoutEvent = function (e) {
+  const button = this.findButton(e.target);
+  if (button) {
+    button.classList.remove('focus');
+  }
+};
+
+/**
+ * Click event handler for dismiss button.
+ */
+CivicThemeButton.prototype.dismissClickEvent = function (e) {
+  const button = this.findButton(e.target);
+  if (button) {
+    button.remove();
+    this.el.dispatchEvent(new CustomEvent('ct.button.dismiss', { bubbles: true }));
+  }
+};
+
+/**
+ * Find button element.
+ */
+CivicThemeButton.prototype.findButton = function (el) {
+  if (el.classList.contains('ct-button')) {
+    return el;
+  }
+  return el.closest('.ct-button');
+};
+
+document.querySelectorAll('.ct-button').forEach((el) => {
+  new CivicThemeButton(el);
+});

package/components/01-atoms/button/button.scss

@@ -0,0 +1,82 @@
+//
+// CivicTheme Button component styles.
+//
+
+.ct-button {
+  $root: &;
+
+  cursor: pointer;
+  border: var(--ct-button-border-width) solid transparent;
+  border-radius: var(--ct-button-border-radius);
+  appearance: button;
+
+  @include ct-button-size('regular');
+
+  &--primary {
+    @include ct-button-type('primary');
+  }
+
+  &--secondary {
+    @include ct-button-type('secondary');
+  }
+
+  // Type.
+  &--tertiary {
+    @include ct-button-type('tertiary');
+
+    &:focus-visible,
+    &:hover,
+    &:active {
+      text-decoration: none;
+    }
+
+    &--large {
+      @include ct-button-size('large', false);
+
+      &__dismiss {
+        margin-left: ct-spacing(3);
+      }
+    }
+
+    &--regular {
+      @include ct-button-size('regular', false);
+
+      &__dismiss {
+        margin-left: ct-spacing(3);
+      }
+    }
+
+    &--small {
+      @include ct-button-size('small', false);
+
+      &__dismiss {
+        margin-left: ct-spacing(2);
+      }
+    }
+  }
+
+  // Size.
+  &--large {
+    @include ct-button-size('large');
+
+    &#{$root}--tertiary {
+      padding: 0;
+    }
+  }
+
+  &--regular {
+    @include ct-button-size('regular');
+
+    &#{$root}--tertiary {
+      padding: 0;
+    }
+  }
+
+  &--small {
+    @include ct-button-size('small');
+
+    &#{$root}--tertiary {
+      padding: 0;
+    }
+  }
+}

package/components/01-atoms/button/button.stories.js

@@ -0,0 +1,86 @@
+/**
+ * CivicTheme Button component stories.
+ */
+
+import Component from './button.twig';
+import Constants from '../../../dist/constants.json';
+
+const meta = {
+  title: 'Atoms/Form Controls/Button',
+  component: Component,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    text: {
+      control: { type: 'text' },
+    },
+    type: {
+      control: { type: 'radio' },
+      options: ['primary', 'secondary', 'tertiary'],
+    },
+    kind: {
+      control: { type: 'radio' },
+      options: ['button', 'link', 'reset', 'submit'],
+    },
+    size: {
+      control: { type: 'radio' },
+      options: ['large', 'regular', 'small'],
+    },
+    icon: {
+      control: { type: 'select' },
+      options: Constants.ICONS,
+    },
+    icon_placement: {
+      control: { type: 'radio' },
+      options: ['before', 'after'],
+    },
+    icon_group_disabled: {
+      control: { type: 'boolean' },
+    },
+    icon_single_only: {
+      control: { type: 'boolean' },
+    },
+    url: {
+      control: { type: 'text' },
+    },
+    is_new_window: {
+      control: { type: 'boolean' },
+    },
+    is_disabled: {
+      control: { type: 'boolean' },
+    },
+    is_external: {
+      control: { type: 'boolean' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const Button = {
+  args: {
+    theme: 'light',
+    type: 'primary',
+    kind: 'button',
+    size: 'regular',
+    icon: '',
+    icon_placement: 'after',
+    icon_group_disabled: false,
+    icon_single_only: false,
+    text: 'My title',
+    url: '',
+    is_new_window: false,
+    is_external: false,
+    is_disabled: false,
+    attributes: null,
+    modifier_class: '',
+  },
+};