Accordion

packages/@kws3/ui/accordion/Accordion.svelte

@@ -0,0 +1,57 @@
+<!--
+  @component
+
+
+  @param {string} [style=""] - Inline CSS for the component, Default: `""`
+  @param {string} [class=""] - CSS classes for the component, Default: `""`
+
+  ### Slots
+  - `<slot name="default"  />` - Content slot
+
+-->
+<section class="accordions {klass}" {style}>
+  <!--Content slot-->
+  <slot />
+</section>
+
+<script>
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  /**
+   * Inline CSS for the component
+   */
+  export let style = "";
+
+  /**
+   * CSS classes for the component
+   */
+  let klass = "";
+  export { klass as class };
+
+  const items = writable({});
+
+  setContext("kws-accordion", {
+    items,
+    add: (item) => {
+      items.update((i) => {
+        i[item.context] = item.active;
+        return i;
+      });
+    },
+    remove: (item) => {
+      items.update((i) => {
+        const _items = { ...i };
+        delete _items[item.context];
+        return _items;
+      });
+    },
+    toggle: (item) => {
+      items.update((i) => {
+        Object.keys(i).forEach((context) => (i[context] = false));
+        i[item.context] = item.active;
+        return i;
+      });
+    },
+  });
+</script>

packages/@kws3/ui/accordion/AccordionItem.svelte

@@ -0,0 +1,122 @@
+<!--
+  @component
+
+
+  @param {string} [title=""] - Title for the component, Default: `""`
+  @param {string} [style=""] - Inline CSS for the component, Default: `""`
+  @param {''|'primary'|'warning'|'info'|'danger'|'dark'|'light'} [color="primary"] - Color of the component, Default: `"primary"`
+  @param {boolean} [expanded=false] - Determines whether Accordion has one item expanded, Default: `false`
+  @param {boolean} [title_click=true] - Allows items in Accordion to be expanded or collapsed by clicking the item title, Default: `true`
+  @param {any} [context=undefined] - A unique context value, Default: `undefined`
+  @param {string} [class=""] - CSS classes for the component, Default: `""`
+
+  ### Events
+  - `change` - Fires an event on any change initiated by the user
+
+  ### Slots
+  - `<slot name="title"  />` - Title slot
+  - `<slot name="default"  />` - Content slot
+
+-->
+
+<article
+  class="accordion {active ? 'is-active' : ''} is-{color} {klass}"
+  {style}>
+  <div
+    class="accordion-header {title_click ? ' toggle' : ''}"
+    on:click={() => {
+      if (title_click) onToggle();
+    }}>
+    <div class="field is-grouped" style="align-items: center">
+      <div class="control is-expanded">
+        <!--Title slot-->
+        <slot name="title">{title}</slot>
+      </div>
+      <div class="control">
+        <Icon icon="{active ? 'minus' : 'plus'}-circle" size="small" />
+      </div>
+    </div>
+  </div>
+  <div class="accordion-body" transition:slide>
+    <div class="accordion-content">
+      <!--Content slot-->
+      <slot />
+    </div>
+  </div>
+</article>
+
+<script>
+  import { Icon } from "@kws3/ui";
+  import { slide } from "svelte/transition";
+  import {
+    onMount,
+    afterUpdate,
+    createEventDispatcher,
+    getContext,
+  } from "svelte";
+
+  const fire = createEventDispatcher();
+  const { items, add, remove, toggle } = getContext("kws-accordion");
+
+  /**
+   * Title for the component
+   */
+  export let title = "",
+    /**
+     * Inline CSS for the component
+     */
+    style = "",
+    /**
+     * Color of the component
+     * @type {''|'primary'|'warning'|'info'|'danger'|'dark'|'light'}
+     */
+    color = "primary",
+    /**
+     * Determines whether Accordion has one item expanded
+     */
+    expanded = false,
+    /**
+     * Allows items in Accordion to be expanded or collapsed by clicking the item title
+     */
+    title_click = true,
+    /**
+     * A unique context value
+     */
+    context = `__kws_accordion_item_${Math.random().toString(36)}`;
+
+  /**
+   * CSS classes for the component
+   */
+  let klass = "";
+  export { klass as class };
+
+  let unsubscribe,
+    active = false;
+
+  $: {
+    add({ context, active });
+    unsubscribe = items.subscribe((item) => {
+      active = item[context];
+    });
+  }
+
+  onMount(() => {
+    return () => {
+      remove && remove({ context });
+      unsubscribe && unsubscribe();
+    };
+  });
+
+  afterUpdate(() => {
+    if (expanded === true) onToggle();
+  });
+
+  function onToggle() {
+    toggle({ context, active: !active });
+    /**
+     * Fires an event on any change initiated by the user
+     */
+    fire("change", { context });
+    expanded = false;
+  }
+</script>

packages/@kws3/ui/index.js

@@ -59,6 +59,8 @@ 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 Accordion } from "./accordion/Accordion.svelte";
+export { default as AccordionItem } from "./accordion/AccordionItem.svelte";
 export { default as Chart } from "./charts/Chart.svelte";
 export { default as DonutChart } from "./charts/DonutChart.svelte";
 export { default as PieChart } from "./charts/PieChart.svelte";

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

@@ -0,0 +1,127 @@
+$accordion-background-color: $background !default;
+$accordion-radius: $radius !default;
+
+$accordion-header-background-color: $text !default;
+$accordion-header-color: $text-invert !default;
+$accordion-header-padding: 0.5em 0.75em !default;
+$accordion-header-radius: $radius !default;
+
+$accordion-content-border: 1px solid $border !default;
+$accordion-content-color: $text !default;
+$accordion-content-padding-top: 1em !default;
+$accordion-content-padding-left: 1.25em !default;
+$accordion-content-radius: $radius !default;
+
+$accordion-content-pre-background-color: $white !default;
+$accordion-content-pre-code-background-color: transparent !default;
+
+.accordions {
+  .accordion {
+    @include block;
+    display: flex;
+    flex-direction: column;
+    background-color: $accordion-background-color;
+    border-radius: $accordion-radius;
+    font-size: $size-normal;
+    strong {
+      color: currentColor;
+    }
+    a:not(.button):not(.tag) {
+      color: currentColor;
+      text-decoration: underline;
+    } // Sizes
+    &.is-small {
+      font-size: $size-small;
+    }
+    &.is-medium {
+      font-size: $size-medium;
+    }
+    &.is-large {
+      font-size: $size-large;
+    }
+    &:not(:first-child) {
+      .accordion-header {
+        border-radius: 0;
+      }
+    }
+    &:not(:last-child) {
+      margin-bottom: 0;
+      .accordion-content {
+        border-radius: 0;
+      }
+    }
+    .toggle,
+    [data-action="toggle"] {
+      cursor: pointer;
+    }
+    .accordion-header {
+      background-color: $accordion-header-background-color;
+      border-radius: $accordion-header-radius $accordion-header-radius 0 0;
+      color: $accordion-header-color;
+      line-height: 1.25;
+      padding: $accordion-header-padding;
+      position: relative;
+      & + .accordion-body {
+        overflow-y: hidden;
+        max-height: 0;
+        color: $accordion-content-color;
+        border: $accordion-content-border;
+        border-radius: $accordion-content-radius;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        border-top: none;
+        -webkit-transition: max-height 0.2s ease;
+        -moz-transition: max-height 0.2s ease;
+        -o-transition: max-height 0.2s ease;
+        transition: max-height 0.2s ease;
+        .accordion-content {
+          padding: $accordion-content-padding-top
+            $accordion-content-padding-left;
+          code,
+          pre {
+            background-color: $accordion-content-pre-background-color;
+          }
+          pre code {
+            background-color: $accordion-content-pre-code-background-color;
+          }
+        }
+      }
+    }
+    &.is-active {
+      .accordion-header {
+        .toggle {
+          &::before {
+            content: "\002D";
+          }
+        }
+      }
+      .accordion-body {
+        max-height: 100em;
+      }
+      // Colors
+    }
+    @each $name, $pair in $colors {
+      $color: nth($pair, 1);
+      $color-invert: nth($pair, 2);
+      $color-lightning: max((100% - lightness($color)) - 2%, 0%);
+      $color-luminance: colorLuminance($color);
+      $darken-percentage: $color-luminance * 70%;
+      $desaturate-percentage: $color-luminance * 30%;
+      &.is-#{$name} {
+        background-color: lighten($color, $color-lightning);
+        border-bottom: 1px solid lighten($color, $color-lightning);
+        .accordion-header {
+          background-color: $color;
+          color: $color-invert;
+        }
+        .accordion-content {
+          border-color: $color;
+          color: desaturate(
+            darken($color, $darken-percentage),
+            $desaturate-percentage
+          );
+        }
+      }
+    }
+  }
+}

src/scss/app.scss

@@ -172,6 +172,65 @@ pre.prismjs > code {
 //Tooltip
 @import "../../packages/@kws3/ui/styles/Tooltip.scss";
 
+//Accordion
+@import "../../packages/@kws3/ui/styles/Accordion.scss";
+// #stepsHolder{
+//   padding-top: 1.2rem;
+//   overflow: auto;
+// }
+// .steps{
+//   font-size: 0.9rem;
+//   .steps-segment{
+//     cursor: pointer;
+//     .steps-marker{
+//       transform: scale(0.9);
+//       transition: transform 0.3s $easeOutCustom;
+//     }
+//     &.is-active{
+//       .steps-marker{
+//         transform: scale(1.5);
+//         border:2px solid $primary !important;
+//         background: $white !important;
+//         color: $text !important;
+//       }
+//       & ~ .steps-segment{
+//         cursor: default;
+//         .steps-marker{
+//           transform: scale(1);
+//         }
+//       }
+//     }
+//   }
+// }
+
+// @include mobile{
+//   .steps.is-horizontal.has-content-centered{
+//     .steps-segment{
+//       &:not(:last-child):after {
+//         height: 0.2em;
+//         left: 2.5rem;
+//         right: -1.75rem;
+//         top: calc(0.75rem - (0.1em));
+//       }
+//       .steps-marker {
+//         position: absolute;
+//         left: calc(50% - 0.75rem);
+//         height: 1.5rem;
+//         width: 1.5rem;
+//         font-size: 0.75rem;
+//         transition: transform 0.3s;
+//       }
+//       .steps-content {
+//         margin-top: 2rem;
+//         margin-left: .5em;
+//         margin-right: .5em;
+//         padding-top: .2em;
+//         font-size:0.75rem;
+//         line-height:1.2;
+//       }
+//     }
+//   }
+// }
 //Grid
 @import "../../packages/@kws3/ui/styles/Grid.scss";