@apolitical/component-library 1.18.8 → 2.0.0

package/styles/base/buttons/_sizes.scss

@@ -1,13 +1,52 @@
 // The button defaults to the primary variant and medium styling so are not added as classes - they live on the default `button` styling
-$large: ('font-size': 18, 'padding-top': 14, 'padding-horizontal': 24, 'padding-bottom': 16, 'icon-width': 18, 'icon-offset': 2, 'icon-gutter': 12);
-$medium: ('font-size': 16, 'padding-top': 10, 'padding-horizontal': 24, 'padding-bottom': 12, 'icon-width': 16, 'icon-offset': 2, 'icon-gutter': 10);
-$small: ('font-size': 14, 'padding-top': 8, 'padding-horizontal': 16, 'padding-bottom': 10, 'icon-width': 12, 'icon-offset': 2, 'icon-gutter': 8);
+$large: (
+  'font-size': 18,
+  'padding-top': 14,
+  'padding-horizontal': 24,
+  'padding-bottom': 16,
+  'icon-width': 18,
+  'icon-offset': 2,
+  'icon-gutter': 12,
+);
+$medium: (
+  'font-size': 16,
+  'padding-top': 10,
+  'padding-horizontal': 24,
+  'padding-bottom': 12,
+  'icon-width': 16,
+  'icon-offset': 2,
+  'icon-gutter': 10,
+);
+$small: (
+  'font-size': 14,
+  'padding-top': 8,
+  'padding-horizontal': 16,
+  'padding-bottom': 10,
+  'icon-width': 12,
+  'icon-offset': 2,
+  'icon-gutter': 8,
+);
 $sizes: ('large', $large), ('small', $small);
-$secondary: ('border': 1);
-$secondary-destruction: ('right': -5%, 'offset': -1);
+$secondary: (
+  'border': 1,
+);
+$secondary-destruction: (
+  'right': -5%,
+  'offset': -1,
+);
 
 // The tertiary styling has its own padding; regardless of size, we add a tiny amount of padding to accommodate
 // the focus outline and to ensure any icons are centered
-$tertiary: ('padding-top': 1.6, 'padding-horizontal': 8,'padding-bottom': 3.2);
-$animation: ('duration': 0.2);
-$animation-bounce: ('scale': 1.1, 'duration': 0.5, 'iteration': 1);
+$tertiary: (
+  'padding-top': 1.6,
+  'padding-horizontal': 8,
+  'padding-bottom': 3.2,
+);
+$animation: (
+  'duration': 0.2,
+);
+$animation-bounce: (
+  'scale': 1.1,
+  'duration': 0.5,
+  'iteration': 1,
+);

package/styles/base/form/_fields.scss

@@ -1,64 +1,73 @@
-@use 'sass:map';
-@import './../../functions',
-        './../../mixins',
-        './../../variables';
+@import './../../functions', './../../mixins', './../../variables';
 
-$field: ('padding-vertical': 8, 'padding-horizontal': 16, 'font-size': 16, 'line-height': 24, 'border': 1, 'border-radius': 8);
+$field: (
+  'padding-vertical': 8,
+  'padding-horizontal': 16,
+  'font-size': 16,
+  'line-height': 24,
+  'border': 1,
+  'border-radius': 8,
+);
 
 @mixin field-styling {
-  background: map.get($theme, 'form_input_bg');
-  border: px-to-rem(map.get($field, 'border')) solid map.get($theme, 'form_input_border');
-  border-radius: px-to-rem(map.get($field, 'border-radius'));
+  background: get-map($theme, 'form_input_bg');
+  color: get-map($theme, 'form_input');
+  border: px-to-rem(get-map($field, 'border')) solid get-map($theme, 'form_input_border');
+  border-radius: px-to-rem(get-map($field, 'border-radius'));
   box-sizing: border-box;
   outline: none;
 
-    &:focus, &:focus-visible {
-      box-shadow: $outline-width map.get($theme, 'form_input_focus_box-shadow');
-    }
+  &:focus,
+  &:focus-visible {
+    box-shadow: $outline-width get-map($theme, 'form_input_focus_box-shadow');
+  }
 
-    &.error {
-      border-color: map.get($theme, 'form_input_error_border');
-    }
+  &.error {
+    border-color: get-map($theme, 'form_input_error_border');
+  }
 }
 
 @layer base {
-  input, .input, textarea {
+  input,
+  .input,
+  textarea {
     @include field-styling;
 
     width: 100%;
-    padding: px-to-rem(map.get($field, 'padding-vertical')) px-to-rem(map.get($field, 'padding-horizontal'));
-    font-size: px-to-rem(map.get($field, 'font-size'));
-    color: map.get($theme, 'form_input');
-    line-height: px-to-rem(map.get($field, 'line-height'));
+    padding: px-to-rem(get-map($field, 'padding-vertical'))
+      px-to-rem(get-map($field, 'padding-horizontal'));
+    font-size: px-to-rem(get-map($field, 'font-size'));
+    color: get-map($theme, 'form_input');
+    line-height: px-to-rem(get-map($field, 'line-height'));
 
-      ::placeholder {
-        color: map.get($theme, 'form_input_placeholder');
-      }
+    ::placeholder {
+      color: get-map($theme, 'form_input_placeholder');
+    }
 
-      // Remove default styling, for consistency
-      &[type='search'] {
-        &::-ms-clear {
-          width: 0;
-          height: 0;
-          display: none;
-        }
+    // Remove default styling, for consistency
+    &[type='search'] {
+      &::-ms-clear {
+        width: 0;
+        height: 0;
+        display: none;
+      }
 
-        &::-ms-reveal {
-          width: 0;
-          height: 0;
-          display: none;
-        }
+      &::-ms-reveal {
+        width: 0;
+        height: 0;
+        display: none;
+      }
 
-        &::-webkit-search-decoration,
-        &::-webkit-search-cancel-button,
-        &::-webkit-search-results-button,
-        &::-webkit-search-results-decoration {
-          display: none;
-        }
+      &::-webkit-search-decoration,
+      &::-webkit-search-cancel-button,
+      &::-webkit-search-results-button,
+      &::-webkit-search-results-decoration {
+        display: none;
       }
+    }
   }
 
   textarea {
     resize: none;
   }
-}
+}

package/styles/base/form/_form.scss

@@ -0,0 +1,26 @@
+@import '@/styles/functions', '@/styles/mixins', '@/styles/variables';
+
+$form: (
+  'padding': 40,
+);
+
+@layer components {
+  .form {
+    width: 100%;
+    position: relative;
+    padding: px-to-rem(get-map($form, 'padding'));
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+    box-sizing: border-box;
+
+    .cta {
+      width: 100%;
+      text-align: right;
+
+      &.center {
+        text-align: center;
+      }
+    }
+  }
+}

package/styles/base/form/_index.scss

@@ -1,2 +1 @@
-@import 'fields',
-        'search-button';
+@import 'fields', 'form', 'labels', 'search-button';

package/styles/base/form/_labels.scss

@@ -0,0 +1,12 @@
+@import '@/styles/functions', '@/styles/variables';
+
+@layer base {
+  label {
+    font-weight: 900;
+
+    small {
+      color: get-map($theme, 'form_label-small');
+      font-weight: inherit;
+    }
+  }
+}

package/styles/base/form/_search-button.scss

@@ -1,14 +1,14 @@
-@use 'sass:map';
-@import './../../functions',
-        './../../mixins',
-        './../../variables';
+@import './../../functions', './../../mixins', './../../variables';
 
-$search-icon: ('width': 24, 'height': 24);
+$search-icon: (
+  'width': 24,
+  'height': 24,
+);
 
 @layer base {
   button.search {
-    width: px-to-rem(map.get($search-icon, 'width'));
-    height: px-to-rem(map.get($search-icon, 'height'));
+    width: px-to-rem(get-map($search-icon, 'width'));
+    height: px-to-rem(get-map($search-icon, 'height'));
     background: transparent;
     margin: 0;
     padding: 0;
@@ -18,15 +18,15 @@ $search-icon: ('width': 24, 'height': 24);
     justify-content: center;
     cursor: pointer;
 
-      &::before {
-        @include transition(background, 0.3s, ease);
-        @include image('icons/magnifying-glass.svg', true);
+    &::before {
+      @include transition(background, 0.3s, ease);
+      @include image('icons/magnifying-glass.svg', true);
 
-        content: '';
-        width: px-to-rem(map.get($search-icon, 'width'));
-        height: px-to-rem(map.get($search-icon, 'height'));
-        background: map.get($theme, 'form_search-button_bg');
-        display: block;
-      }
+      content: '';
+      width: px-to-rem(get-map($search-icon, 'width'));
+      height: px-to-rem(get-map($search-icon, 'height'));
+      background: get-map($theme, 'form_search-button_bg');
+      display: block;
+    }
   }
-}
+}

package/styles/functions/_index.scss

@@ -1 +1 @@
-@import 'size-conversions';
+@import 'maps', 'size-conversions';

package/styles/functions/_maps.scss

@@ -0,0 +1,25 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+
+@function get-map($map, $key) {
+  @if meta.variable-exists('map') and meta.type-of($map) == map {
+    @if map.has-key($map, $key) {
+      @return map.get($map, $key);
+    } @else {
+      @error "ERROR: the key `#{$key}` does not exist in map.";
+    }
+  } @else {
+    @error "ERROR: map does not exist.";
+  }
+}
+
+@function merge-maps($maps) {
+  $collection: ();
+
+  @for $i from 1 through length($maps) {
+    $collection: map.merge($collection, list.nth($maps, $i));
+  }
+
+  @return $collection;
+}

package/styles/functions/_size-conversions.scss

@@ -4,7 +4,7 @@
 // We want to use rem for accessibility, but Figma uses px (which is also a bit easier for us
 // to read and reason about). This mixin does the conversion for us.
 @function px-to-rem($size, $baseTextSize: 16) {
-    $new-size: math.div($size, $baseTextSize);
+  $new-size: math.div($size, $baseTextSize);
 
-    @return $new-size + rem;
-}
+  @return $new-size + rem;
+}

package/styles/index.scss

@@ -1,7 +1,5 @@
 /* We use CSS layers to handle specificity: https://css-tricks.com/css-cascade-layers/ */
 @layer splash, reset, base, components, pages, overrides;
-@import 'functions',
-        'variables',
-        'mixins',
-        'reset',
-        'base';
+
+// noinspection Stylelint
+@import 'functions', 'variables', 'mixins', 'reset', 'base';

package/styles/mixins/_animations.scss

@@ -4,4 +4,4 @@
       @content;
     }
   }
-}
+}

package/styles/mixins/_backgrounds.scss

@@ -6,7 +6,13 @@
 // If no 'http' is in the image path, we will prepend the image bucket URL, or the asset bucket URL for masks.
 // The asset paths can be passed in directly as part of `$image` to avoid this.
 
-@mixin image($image, $is-mask: false, $size: 100% auto, $repeat: no-repeat, $position: 0 0) {
+@mixin image(
+  $image,
+  $is-mask: false,
+  $size: 100% auto,
+  $repeat: no-repeat,
+  $position: 0 0
+) {
   @if string.index($image, 'http') {
     $image: $image;
   } @else {
@@ -34,4 +40,4 @@
   mask-position: $position;
   mask-size: $size;
   display: block;
-}
+}

package/styles/mixins/_breakpoints.scss

@@ -11,7 +11,7 @@ $breakpoint-sizes: (
 // and lets us reference custom breakpoints by passing in a number. It lets us code
 // breakpoints a bit faster by not having to type out the full media query each time.
 @mixin breakpoint($type, $breakpoint) {
-  @if  map-has-key($breakpoint-sizes, $breakpoint) {
+  @if map-has-key($breakpoint-sizes, $breakpoint) {
     $breakpoint: map.get($breakpoint-sizes, $breakpoint);
   }
 

package/styles/mixins/_browsers.scss

@@ -1,3 +1,5 @@
 @mixin target-safari() {
-  @media not all and (resolution >=.001dpcm) { @content; }
-}
+  @media not all and (resolution >=.001dpcm) {
+    @content;
+  }
+}

package/styles/mixins/_containers.scss

@@ -6,7 +6,6 @@
 // e.g. we use it on carousels to ensure we show different numbers of cards when the carousel is different sizes
 // Find out more: https://blog.logrocket.com/css-container-queries-guide/
 
-
 @mixin container-query($container, $type, $breakpoint) {
   @if map-has-key($breakpoint-sizes, $breakpoint) {
     $breakpoint: map.get($breakpoint-sizes, $breakpoint);

package/styles/mixins/_index.scss

@@ -1,8 +1,2 @@
-@import 'animations',
-        'backgrounds',
-        'breakpoints',
-        'browsers',
-        'containers',
-        'selectors',
-        'styles',
-        'transitions';
+@import 'animations', 'backgrounds', 'breakpoints', 'browsers', 'containers', 'queries',
+  'selectors', 'styles', 'transitions';

package/styles/mixins/_queries.scss

@@ -0,0 +1,11 @@
+@mixin query-touchscreen {
+  @media (hover: none), (pointer: coarse) {
+    @content;
+  }
+}
+
+@mixin query-not-touchscreen {
+  @media (hover: hover) and (pointer: fine) {
+    @content;
+  }
+}

package/styles/mixins/_selectors.scss

@@ -2,4 +2,4 @@
   @at-root #{selector-replace(&, $old, $new)} {
     @content;
   }
-}
+}

package/styles/mixins/_styles.scss

@@ -1,31 +1,33 @@
-@use 'sass:map';
 @use 'sass:math';
-@import './../variables',
-        './../functions';
+@import './../functions', './../variables';
 
-@mixin dashed-border($color: map.get($theme, 'divider')) {
+@mixin dashed-border($color: get-map($theme, 'divider')) {
   background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='#{$color}' stroke-width='1' stroke-dasharray='6%2c 8' stroke-dashoffset='2' stroke-linecap='round'/%3e%3c/svg%3e");
 }
 
-@mixin line-under-text($color: 'light', $width: 60, $height: 4, $gap: 16, $border-radius: 2.5) {
+@mixin line-under-text(
+  $color: 'light',
+  $width: 60,
+  $height: 4,
+  $gap: 16,
+  $border-radius: 2.5
+) {
   position: relative;
   padding-bottom: px-to-rem($height + $gap);
 
-    &::after {
-      content: '';
-      background: map.get($theme, 'text_line');
-      width: px-to-rem($width);
-      height: px-to-rem($height);
-      position: absolute;
-      bottom: 0;
-      left: 50%;
-      margin-left: -(px-to-rem(math.div($width, 2)));
-      border-radius: px-to-rem($border-radius);
+  &::after {
+    content: '';
+    background: get-map($theme, 'text_line');
+    width: px-to-rem($width);
+    height: px-to-rem($height);
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    margin-left: -(px-to-rem(math.div($width, 2)));
+    border-radius: px-to-rem($border-radius);
 
-      @if $color == 'dark' {
-        background: map.get($theme, 'text_line_dark');
-      }
+    @if $color == 'dark' {
+      background: get-map($theme, 'text_line_dark');
     }
-
-
-}
+  }
+}

package/styles/mixins/_transitions.scss

@@ -7,26 +7,30 @@
     $transition: ();
 
     @for $property from 1 through length($properties) {
-        @for $i from 0 to (length($properties)) - (length($duration)) {
-            $duration: list.join($duration, list.nth($duration, -1));
-        }
+      @for $i from 0 to (length($properties)) - (length($duration)) {
+        $duration: list.join($duration, list.nth($duration, -1));
+      }
 
-        @for $i from 0 to (length($properties)) - (length($ease)) {
-            $ease: list.join($ease, list.nth($ease, -1));
-        }
+      @for $i from 0 to (length($properties)) - (length($ease)) {
+        $ease: list.join($ease, list.nth($ease, -1));
+      }
 
-        @for $i from 0 to (length($properties)) - (length($delay)) {
-            $delay: list.join($delay, list.nth($delay, -1));
-        }
+      @for $i from 0 to (length($properties)) - (length($delay)) {
+        $delay: list.join($delay, list.nth($delay, -1));
+      }
 
-        $transition: list.append(
-            $transition,
-            (list.nth($properties, $property) list.nth($duration, $property) list.nth($ease, $property) list.nth($delay, $property)),
-            $separator: comma
-        );
+      $transition: list.append(
+        $transition,
+        (
+          list.nth($properties, $property)
+            list.nth($duration, $property)
+            list.nth($ease, $property)
+            list.nth($delay, $property)
+        ),
+        $separator: comma
+      );
     }
 
     transition: $transition;
   }
-
 }

package/styles/reset/_index.scss

@@ -1 +1 @@
-@import 'reset';
+@import 'reset';

package/styles/reset/_reset.scss

@@ -2,19 +2,87 @@
  * https://meyerweb.com/eric/tools/css/reset/ */
 
 @layer reset {
-  html, body, div, span, applet, object, iframe,
-  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-  a, abbr, acronym, address, big, cite, code,
-  del, dfn, em, img, ins, kbd, q, s, samp,
-  small, strike, strong, sub, sup, tt, var,
-  b, u, i, center,
-  dl, dt, dd, ol, ul, li,
-  fieldset, form, label, legend,
-  table, caption, tbody, tfoot, thead, tr, th, td,
-  article, aside, canvas, details, embed,
-  figure, figcaption, footer, header, hgroup,
-  menu, nav, output, ruby, section, summary,
-  time, mark, audio, video {
+  html,
+  body,
+  div,
+  span,
+  applet,
+  object,
+  iframe,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  blockquote,
+  pre,
+  a,
+  abbr,
+  acronym,
+  address,
+  big,
+  cite,
+  code,
+  del,
+  dfn,
+  em,
+  img,
+  ins,
+  kbd,
+  q,
+  s,
+  samp,
+  small,
+  strike,
+  strong,
+  sub,
+  sup,
+  tt,
+  var,
+  b,
+  u,
+  i,
+  center,
+  dl,
+  dt,
+  dd,
+  ol,
+  ul,
+  li,
+  fieldset,
+  form,
+  label,
+  legend,
+  table,
+  caption,
+  tbody,
+  tfoot,
+  thead,
+  tr,
+  th,
+  td,
+  article,
+  aside,
+  canvas,
+  details,
+  embed,
+  figure,
+  figcaption,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  output,
+  ruby,
+  section,
+  summary,
+  time,
+  mark,
+  audio,
+  video {
     margin: 0;
     padding: 0;
     border: 0;
@@ -23,8 +91,17 @@
     vertical-align: baseline;
   }
 
-  article, aside, details, figcaption, figure,
-  footer, header, hgroup, menu, nav, section {
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  section {
     display: block;
   }
 
@@ -43,13 +120,20 @@
     line-height: 1;
   }
 
-  ul { list-style: disc; }
-  ol { list-style: decimal; }
+  ul {
+    list-style: disc;
+  }
+
+  ol {
+    list-style: decimal;
+  }
 
-  blockquote, q {
+  blockquote,
+  q {
     quotes: none;
 
-    &::before, &::after {
+    &::before,
+    &::after {
       content: '';
       content: none;
     }
@@ -59,4 +143,4 @@
     border-collapse: collapse;
     border-spacing: 0;
   }
-}
+}