Steps Component

packages/@kws3/ui/controls/Steps.svelte

@@ -0,0 +1,111 @@
+<!--
+  @component
+
+
+  @param {array} [steps=[]] - Array of steps, which contains the `value`, `name`, `description` and `step_icon` property for each step
+
+Steps are automatically “numbered” by default,
+unless overridden by what is in the `value` property inside the steps array, Default: `[]`
+  @param {number} [active_index=0] - Index used to determine which step is active, Default: `0`
+  @param {''|'small'|'medium'|'large'} [size=""] - Size of the steps, Default: `""`
+  @param {''|'primary'|'warning'|'success'|'info'|'danger'|'dark'|'light'} [color=""] - Colour of the active steps, Default: `""`
+  @param {boolean} [clickable=false] - Determines If the steps are navigable by clicking on the steps themselves, Default: `false`
+  @param {boolean} [icon_only=false] - If `true`, then the steps will display the icon from the default `step_icon` property, or the `step_icon` value from within the `steps` array; instead of numbers, or `value` in the `steps` array, Default: `false`
+  @param {string} [step_icon="check"] - The default icon used in all steps when `icon_only` is `true` unless overridden by another `step_icon` property within the steps array, Default: `"check"`
+  @param {boolean} [have_step_value=true] - When `false`, the step circle will not display numbers or `value` or `step_icon`, and be empty instead, Default: `true`
+  @param {boolean} [filled_step=false] - Determines if active steps appearance is filled(inverted) or not, Default: `false`
+  @param {string} [style=""] - Inline CSS for the Steps container, Default: `""`
+  @param {string} [class=""] - CSS classes for the steps container, Default: `""`
+
+-->
+<ul class="steps {klass} is-{size}" {style}>
+  {#each steps as step, idx}
+    <li
+      class="step-item is-{color} {active_index >= idx && !filled_step
+        ? 'is-active'
+        : ''} {active_index >= idx && filled_step ? 'is-completed' : ''}"
+      on:click={() => navigateStep(idx)}
+      style={clickable ? "cursor:pointer;" : ""}>
+      <div class="step-marker">
+        {#if have_step_value}
+          {#if icon_only}
+            <Icon icon={step.step_icon ? step.step_icon : step_icon} />
+          {:else if step.value}
+            {step.value}
+          {:else}
+            {idx + 1}
+          {/if}
+        {/if}
+      </div>
+      {#if step.name || step.description}
+        <div class="step-details">
+          <p class="step-title">{step.name}</p>
+          {#if step.description}
+            <p>{step.description}</p>
+          {/if}
+        </div>
+      {/if}
+    </li>
+  {/each}
+</ul>
+
+<script>
+  import { Icon } from "@kws3/ui";
+  /**
+   * Array of steps, which contains the `value`, `name`, `description` and `step_icon` property for each step
+   *
+   * Steps are automatically “numbered” by default,
+unless overridden by what is in the `value` property inside the steps array
+   * @any
+   */
+  export let steps = [],
+    /**
+     * Index used to determine which step is active
+     */
+    active_index = 0,
+    /**
+     * Size of the steps
+     * @type {''|'small'|'medium'|'large'}
+     */
+    size = "",
+    /**
+     * Colour of the active steps
+     * @type {''|'primary'|'warning'|'success'|'info'|'danger'|'dark'|'light'}
+     */
+    color = "",
+    /**
+     * Determines If the steps are navigable by clicking on the steps themselves
+     */
+    clickable = false,
+    /**
+     * If `true`, then the steps will display the icon from the default `step_icon` property, or the `step_icon` value from within the `steps` array; instead of numbers, or `value` in the `steps` array
+     */
+    icon_only = false,
+    /**
+     * The default icon used in all steps when `icon_only` is `true` unless overridden by another `step_icon` property within the steps array
+     */
+    step_icon = "check",
+    /**
+     * When `false`, the step circle will not display numbers or `value` or `step_icon`, and be empty instead
+     */
+    have_step_value = true,
+    /**
+     * Determines if active steps appearance is filled(inverted) or not
+     */
+    filled_step = false,
+    /**
+     * Inline CSS for the Steps container
+     */
+    style = "";
+
+  /**
+   * CSS classes for the steps container
+   */
+  let klass = "";
+  export { klass as class };
+
+  function navigateStep(index) {
+    if (!clickable) return;
+    active_index = index;
+  }
+</script>

packages/@kws3/ui/index.js

@@ -46,3 +46,5 @@ export { default as TileView } from "./datagrid/TileView/TileView.svelte";
 export { default as DataSearch } from "./datagrid/DataSearch/DataSearch.svelte";
 export { default as Pagination } from "./datagrid/Pagination/Pagination.svelte";
 export { default as DataSort } from "./datagrid/DataSort/DataSort.svelte";
+
+export { default as Steps } from "./controls/Steps.svelte";

packages/@kws3/ui/styles/Steps.scss

@@ -0,0 +1,190 @@
+$kws-steps-maker-default-color: $grey-light !default;
+$kws-steps-marker-default-border: 0.2em solid #fff !default;
+$kws-steps-default-color: $grey-lighter !default;
+$kws-steps-completed-color: $primary !default;
+$kws-steps-active-color: $primary !default;
+$kws-steps-divider-height: 0.2em !default;
+
+@mixin steps-size($size) {
+  font-size: $size;
+  min-height: $size * 2;
+
+  .step-item {
+    &:not(:first-child)::before {
+      height: $kws-steps-divider-height;
+      width: 100%;
+      bottom: 0;
+      left: -50%;
+      top: #{$size};
+    }
+    .step-marker {
+      height: $size * 2;
+      width: $size * 2;
+      position: absolute;
+      left: calc(50% - #{$size});
+      .icon {
+        * {
+          font-size: $size;
+        }
+      }
+    }
+    .step-details {
+      margin-top: $size * 2;
+      margin-left: 0.5em;
+      margin-right: 0.5em;
+      padding-top: 0.2em;
+      .step-title {
+        font-size: $size * 1.2;
+        font-weight: $weight-semibold;
+      }
+    }
+  }
+}
+.steps {
+  @include block;
+  display: flex;
+  flex-wrap: wrap;
+
+  .step-item {
+    margin-top: 0;
+    position: relative;
+    flex-grow: 1;
+    flex-basis: 0;
+    &:not(:first-child) {
+      flex-basis: 1em;
+      flex-grow: 1;
+      flex-shrink: 1;
+      &::before {
+        // This will contain the horizontal or vertical divider
+        content: " ";
+        display: block;
+        position: absolute;
+      }
+    }
+    &::before {
+      background: linear-gradient(
+        to left,
+        $kws-steps-default-color 50%,
+        $kws-steps-active-color 50%
+      );
+      background-size: 200% 100%;
+      background-position: right bottom;
+      .step-marker {
+        color: $white;
+      }
+    }
+    &.is-active {
+      &::before {
+        background-position: left bottom;
+      }
+      .step-marker {
+        background-color: $white;
+        border-color: $kws-steps-active-color;
+        color: $kws-steps-active-color;
+      }
+    }
+    &.is-completed {
+      &::before {
+        background-position: left bottom;
+      }
+      .step-marker {
+        color: $white;
+        background-color: $kws-steps-completed-color;
+      }
+    }
+    .step-marker {
+      align-items: center;
+      display: flex;
+      border-radius: 50%;
+      font-weight: $weight-bold;
+      justify-content: center;
+      background: $kws-steps-maker-default-color;
+      color: $white;
+      border: $kws-steps-marker-default-border;
+      z-index: 1;
+    }
+    .step-details {
+      text-align: center;
+    }
+    // Override marker color per step
+    @each $name, $pair in $colors {
+      $color: nth($pair, 1);
+      $color-invert: nth($pair, 2);
+      &.is-#{$name} {
+        &::before {
+          background: linear-gradient(
+            to left,
+            $kws-steps-default-color 50%,
+            $color 50%
+          );
+          background-size: 200% 100%;
+          background-position: right bottom;
+        }
+        &.is-active {
+          &::before {
+            background-position: left bottom;
+          }
+          .step-marker {
+            background-color: $white;
+            border-color: $color;
+            color: $color;
+          }
+        }
+        &.is-completed {
+          &::before {
+            background-position: left bottom;
+          }
+          .step-marker {
+            color: $color-invert;
+            background-color: $color;
+          }
+        }
+      }
+    }
+  }
+  .steps-content {
+    align-items: stretch;
+    flex-basis: 100%;
+    margin: 2rem 0;
+    .step-content {
+      display: none;
+      &.is-active {
+        display: block;
+      }
+    }
+  }
+  .steps-actions {
+    display: flex;
+    align-items: stretch;
+    flex-basis: 100%;
+    .steps-action {
+      display: flex;
+      flex-basis: 0;
+      flex-grow: 1;
+      margin: 0.5rem;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+  &.is-animated {
+    .step-item {
+      &::before {
+        transition: all 2s ease;
+      }
+      .step-marker {
+        transition: all 0s ease;
+        transition-delay: 1.5s;
+      }
+    }
+  }
+  @include steps-size($size-normal);
+  &.is-small {
+    @include steps-size($size-small);
+  }
+  &.is-medium {
+    @include steps-size($size-medium);
+  }
+  &.is-large {
+    @include steps-size($size-large);
+  }
+}