minsky-webform-formkit 1.0.0

package/src/styles/_functions.scss

@@ -0,0 +1,96 @@
+/* =========================================================================  */
+/* SVG */
+/* =========================================================================  */
+
+@function strip-units($number) {
+  @return math.div($number, $number * 0 + 1);
+}
+
+/**
+* Characters to escape from SVGs
+* Source: https://github.com/Threespot/frontline-sass/blob/master/src/functions/_inline-svg.scss
+*/
+$fs-escape-chars: (
+  ' ': '%20',
+  "'": '%22',
+  '"': '%27',
+  '#': '%23',
+  '/': '%2F',
+  ':': '%3A',
+  '(': '%28',
+  ')': '%29',
+  '%': '%25',
+  '<': '%3C',
+  '>': '%3E',
+  '\\':'%5C',
+  '^': '%5E',
+  '{': '%7B',
+  '|': '%7C',
+  '}': '%7D',
+);
+
+/// URL-encode SVG code
+/// @param {string} $string - SVG code
+/// @requires $fs-escape-chars
+/// @return {string} - URL-encoded SVG code
+@function url-encode($string) {
+  $escaped-string: '';
+
+  // Loop through each character in string
+  @for $i from 1 through str-length($string) {
+    $char: str-slice($string, $i, $i);
+
+    // Check if character is in symbol map
+    $char-lookup: map-get($fs-escape-chars, $char);
+
+    // If it is, use escaped version
+    @if $char-lookup != null {
+      $char: $char-lookup;
+    }
+
+    // Append character to escaped string
+    $escaped-string: $escaped-string + $char;
+  }
+
+  // Return escaped string
+  @return $escaped-string; /* stylelint-disable-line */
+}
+
+/// Replace `$search` with `$replace` in `$string`
+/// @param {string} $string - Initial string
+/// @param {string} $search - Substring to replace
+/// @param {string} $replace ('') - New value
+/// @return {string} - Updated string
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string; /* stylelint-disable-line */
+}
+
+/// Helper to get URL-escaped inline SVG code for use with `background-image`
+/// @param {string} $name - Icon name
+/// @param {string} $color (false) - Fill color
+/// @return {string} - URL-encoded SVG code
+@function svg($name, $color: false) {
+  // Check if icon exists
+  @if not map-has-key($svg-icons, $name) {
+    @error 'icon “#{$name}” does not exists in $svg-icons map';
+    @return false;
+  }
+
+  // Get icon data
+  $icon-map: map-get($svg-icons, $name);
+
+  @if $color {
+    // Replace color
+    $icon-map: str-replace($icon-map, 'fill="currentColor"', 'fill="#{$color}"');
+    $icon-map: str-replace($icon-map, 'stroke="currentColor"', 'stroke="#{$color}"');
+  }
+
+  // Return inline SVG data
+  @return url('data:image/svg+xml, #{url-encode(unquote($icon-map))} '); /* stylelint-disable-line */
+}

package/src/styles/_mixins.scss

@@ -0,0 +1,29 @@
+// make element invisible for rendering but accessible
+@mixin _noRenderProps() {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px 1px 1px 1px);
+  clip: rect(1px, 1px, 1px, 1px);
+  z-index: -1;
+}
+
+// @include noRender(--bp-min-medium, --bp-max-large);
+@mixin noRender($bp-min: null, $bp-max: null) {
+  @if ($bp-min != null and $bp-max != null) {
+    @media (#{$bp-min}) and (#{$bp-max}) {
+      @include _noRenderProps();
+    }
+  } @else if ($bp-min != null) {
+    @media (#{$bp-min}) {
+      @include _noRenderProps();
+    }
+  } @else if ($bp-max != null) {
+    @media (#{$bp-max}) {
+      @include _noRenderProps();
+    }
+  } @else {
+    @include _noRenderProps();
+  }
+}

package/src/styles/_variables.scss

@@ -0,0 +1,7 @@
+/**
+* SVG icon map to be used with the `svg` function
+*/
+$svg-icons: (
+  'f-chevron-down': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 7"><path fill="currentColor" fill-rule="evenodd" d="M.244.244a.833.833 0 0 1 1.179 0l4.41 4.41 4.411-4.41a.833.833 0 1 1 1.179 1.179l-5 5a.833.833 0 0 1-1.179 0l-5-5a.833.833 0 0 1 0-1.179" clip-rule="evenodd"/></svg>',
+  'f-check': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 11"><path fill="currentColor" d="M4.896 11 0 5.786l1.224-1.304 3.672 3.91L12.776 0 14 1.304z"/></svg>',
+);

package/src/styles/main.scss

@@ -0,0 +1,11 @@
+@import './functions';
+@import './mixins';
+@import './variables';
+
+// dependencies
+@import 'floating-vue/dist/style.css';
+
+// styles
+@import './webform';
+@import './webform-formkit';
+@import './webform-formkit-multistep';

package/src/styles/webform-formkit-multistep.scss

@@ -0,0 +1,98 @@
+.webform-formkit {
+  .formkit-step-inner {
+    display: grid;
+    gap: var(--f-form-gap);
+  }
+
+  .formkit-step-actions {
+    display: flex;
+    gap: 1rem;
+    justify-content: space-between;
+    margin-top: 1.8rem;
+
+    button {
+      &:disabled {
+        pointer-events: none;
+        opacity: 0.5;
+        background-color: var(--f-submit-btn-disabled-background-color);
+      }
+    }
+  }
+
+  .formkit-tabs {
+    display: flex;
+    justify-content: space-between;
+    counter-reset: tabs;
+  }
+
+  .formkit-tab {
+    position: relative;
+    counter-increment: tabs;
+    appearance: none;
+    padding-top: 4rem;
+    padding-bottom: 3.6rem;
+    color: var(--f-color);
+    font-family: var(--f-input-font-family);
+    text-align: center;
+    background-color: transparent;
+    border: 0;
+    font-size: 0.875em;
+    cursor: pointer;
+
+    &::before {
+      font-weight: 700;
+      position: absolute;
+      left: calc(50% - 1.5rem);
+      top: 0;
+      content: counter(tabs);
+      color: var(--f-multistep-color-tab);
+      width: 3rem;
+      height: 3rem;
+      background-color: var(--f-multistep-background-color-tab);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 1.5rem;
+    }
+
+    &[data-active='true'] {
+      font-weight: 700;
+
+      &::before {
+        color: var(--f-multistep-color-tab-active);
+        background-color: var(--f-multistep-background-color-tab-active);
+      }
+    }
+
+    &[data-valid='true'][data-visited='true'] {
+      &::before {
+        color: var(--f-multistep-color-tab-active);
+        background-color: var(--f-multistep-background-color-tab-active);
+      }
+
+      .formkit-badge {
+        background-image: svg('f-check');
+        background-color: var(--f-success-color);
+        background-size: 50%;
+        background-position: center;
+        background-repeat: no-repeat;
+      }
+    }
+
+    .formkit-badge {
+      font-size: 0.75em;
+      width: 2rem;
+      color: white;
+      height: 2rem;
+      background-color: var(--f-error-color);
+      border-radius: 1rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-weight: 700;
+      position: absolute;
+      top: -0.5rem;
+      left: calc(50% + 0.5rem);
+    }
+  }
+}

package/src/styles/webform-formkit.scss

@@ -0,0 +1,215 @@
+.webform-formkit {
+  /* =========================================================================  */
+  /* styles */
+  /* =========================================================================  */
+  position: relative;
+
+  .formkit-outer[data-type='recaptcha'] {
+    .formkit-label {
+      @include noRender();
+    }
+  }
+
+  .webform-formkit__errors {
+    display: grid;
+    gap: 0.5rem;
+    color: var(--f-error-color);
+    margin-top: 0.3em;
+  }
+
+  //formkit-checkbox
+  .formkit-outer[data-type='radio'],
+  .formkit-outer[data-type='actionSelect'],
+  .formkit-outer[data-type='checkbox'] {
+    .formkit-wrapper {
+      display: flex;
+      align-items: flex-start;
+      margin: 0;
+      padding: 0;
+    }
+
+    .formkit-fieldset {
+      padding: 0;
+      border: 0;
+      margin: 0;
+      display: flex;
+      gap: 0;
+      flex-direction: column;
+    }
+
+    .formkit-legend {
+      text-transform: initial;
+      font-weight: initial;
+      margin-bottom: var(--f-label-margin-bottom);
+      padding-right: 0.6em;
+      display: block;
+      width: fit-content;
+      font-weight: 700;
+    }
+
+    .formkit-label {
+      margin-left: 1em;
+      margin-top: 0.1em;
+      font-weight: 400;
+      margin-bottom: 0;
+      cursor: pointer;
+    }
+
+    .formkit-options {
+      order: -1;
+      padding: 0;
+      margin: 0;
+      list-style-type: none;
+    }
+
+    .formkit-option {
+      margin-top: 0.5rem;
+
+      &:first-of-type {
+        margin-top: 0;
+      }
+    }
+
+    .formkit-input {
+      @include noRender();
+    }
+
+    .formkit-option-help {
+      font-style: italic;
+      font-size: 1.4rem;
+      margin-bottom: var(--f-label-margin-bottom);
+      margin-left: 4.2rem;
+      margin-top: calc(var(--f-label-margin-bottom) * -1 + 0.4em);
+    }
+
+    .formkit-decorator {
+      --width: var(--f-radio-check-decorater-height);
+      width: var(--width);
+      min-width: var(--width);
+      height: var(--width);
+      border: var(--f-submit-btn-border-width) solid var(--f-radio-check-border-color);
+      border-radius: 0.4rem;
+      background-color: var(--f-radio-check-background-color);
+      cursor: pointer;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      margin: 0;
+
+      &::before {
+        --width: calc(var(--f-radio-check-decorater-height) - 0.5em);
+        content: '';
+        width: var(--width);
+        height: var(--width);
+        background-image: svg('f-check');
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+        transform-origin: center;
+        transform: scale(0);
+        transition: transform 150ms ease;
+      }
+    }
+
+    .formkit-input:focus + .formkit-decorator {
+      outline: var(--input-outline);
+    }
+
+    .formkit-input:checked + .formkit-decorator {
+      background-color: var(--f-radio-check-background-color-active);
+
+      &::before {
+        transform: scale(1);
+      }
+    }
+  }
+
+  .formkit-outer[data-type='actionSelect'] {
+    > .formkit-wrapper {
+      display: block;
+
+      > .formkit-label {
+        margin: 0;
+        display: flex;
+      }
+    }
+  }
+
+  .formkit-outer[data-type='radio']:not(.formkit-radio-toggle, .formkit-radio-buttons) {
+    .formkit-decorator {
+      border-radius: var(--width);
+
+      &::before {
+        --width: calc(var(--f-radio-check-decorater-height) - 0.8rem);
+        border-radius: var(--width);
+        background: none;
+        background-color: var(--f-radio-check-background-color-active);
+      }
+    }
+
+    .formkit-input:checked + .formkit-decorator {
+      background-color: var(--f-radio-check-background-color);
+    }
+  }
+
+  .formkit-optional {
+    font-size: 1em;
+    color: var(--f-input-placeholder-color);
+    margin-left: 0.25em;
+  }
+
+  label.form-required::after,
+  .formkit-asterisk {
+    margin-left: 0.1em;
+  }
+
+  .webform-formkit__success {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .webform-flexbox {
+    display: flex;
+    flex-direction: column;
+    gap: var(--f-form-gap);
+    margin: 0;
+
+    @media (--bp-min-medium) {
+      flex-direction: row;
+      align-items: flex-start;
+    }
+
+    .formkit-outer {
+      flex-grow: 1;
+      width: 100%;
+    }
+  }
+}
+
+.webform-formkit__loader {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .icon {
+    font-size: 5em;
+    color: var(--f-loader-color);
+  }
+}
+
+.webform-formkit--loading {
+  min-height: 10rem; // for loading state
+
+  .formkit-form {
+    opacity: 0.25;
+  }
+}