@energie360/ui-library 0.0.4 → 0.1.0

package/layout/container/container.scss

@@ -0,0 +1,30 @@
+@use '../../base/abstracts' as a;
+@use '@energie360/design-tokens/dist/scss' as dt;
+
+// TODO: Move this mixin to abstratcs?
+@mixin grid-container {
+  margin: 0 auto;
+  max-width: a.rem(dt.$layout-site-width);
+  width: 100%;
+  padding-left: a.rem(a.$container-edge-2xl);
+  padding-right: a.rem(a.$container-edge-2xl);
+
+  @include a.bp(lg) {
+    padding-left: a.rem(a.$container-edge-lg);
+    padding-right: a.rem(a.$container-edge-lg);
+  }
+
+  @include a.bp(m) {
+    padding-left: a.rem(a.$container-edge-m);
+    padding-right: a.rem(a.$container-edge-m);
+  }
+
+  @include a.bp(s) {
+    padding-left: a.rem(a.$container-edge-s);
+    padding-right: a.rem(a.$container-edge-s);
+  }
+}
+
+.container {
+  @include grid-container;
+}

package/layout/grid/grid-row.scss

@@ -0,0 +1,10 @@
+@use 'sass:math';
+@use './grid.mixin' as g;
+
+.row {
+  @include g.grid-row;
+
+  &.row--centered {
+    justify-content: center;
+  }
+}

package/layout/grid/grid.mixin.scss

@@ -0,0 +1,90 @@
+@use 'sass:math';
+@use '../../base/abstracts' as a;
+
+/**
+Helper to colculate col width in %.
+Looks complicated because we use grid-gap on the row, which takes away from available width.
+ */
+@function col-width($size, $columns, $gutter) {
+  @return math.div(100% - (($columns - 1) * $gutter), $columns) * $size +
+    (($size - 1) * $gutter);
+}
+
+@mixin grid-row() {
+  display: flex;
+  flex-wrap: wrap;
+  grid-gap: a.$grid-gutter-2xl;
+
+  @include a.bp(lg) {
+    grid-gap: a.$grid-gutter-lg;
+  }
+
+  @include a.bp(m) {
+    grid-gap: a.$grid-gutter-m;
+  }
+
+  @include a.bp(s) {
+    grid-gap: a.$grid-gutter-s;
+  }
+}
+
+/**
+Mixin to create a grid column cell.
+
+$cols: Column width of cell.
+$columns: Grid size (in columns). Default is set by global variable $grid-columns (defined via design token).
+ */
+@mixin grid-col($cols, $columns: a.$grid-columns) {
+  $width-2xl: col-width($cols, $columns, a.$grid-gutter-2xl);
+
+  flex: 0 0 $width-2xl;
+  max-width: $width-2xl;
+
+  @include a.bp(lg) {
+    $width-lg: col-width($cols, $columns, a.$grid-gutter-lg);
+
+    flex: 0 0 $width-lg;
+    max-width: $width-lg;
+  }
+
+  @include a.bp(m) {
+    $width-m: col-width($cols, $columns, a.$grid-gutter-m);
+
+    flex: 0 0 $width-m;
+    max-width: $width-m;
+  }
+
+  @include a.bp(s) {
+    $width-s: col-width($cols, $columns, a.$grid-gutter-s);
+
+    flex: 0 0 $width-s;
+    max-width: $width-s;
+  }
+}
+
+// TODO: Change args order -> $prop, $indent, $columns
+@mixin grid-col-space(
+  $indent,
+  $columns: a.$grid-columns,
+  $prop: 'margin-left'
+) {
+  #{$prop}: col-width($indent, $columns, a.$grid-gutter-2xl) +
+    a.$grid-gutter-2xl;
+
+  @include a.bp(lg) {
+    #{$prop}: col-width($indent, $columns, a.$grid-gutter-lg) +
+      a.$grid-gutter-lg;
+  }
+
+  @include a.bp(m) {
+    #{$prop}: col-width($indent, $columns, a.$grid-gutter-m) + a.$grid-gutter-m;
+  }
+
+  @include a.bp(s) {
+    #{$prop}: col-width($indent, $columns, a.$grid-gutter-s) + a.$grid-gutter-s;
+  }
+}
+
+@mixin grid-col-indent($indent, $columns: a.$grid-columns) {
+  @include grid-col-space($indent, $columns);
+}

package/layout/grid/grid.scss

@@ -0,0 +1,122 @@
+@use 'sass:math';
+@use '../../base/abstracts' as a;
+@use 'grid.mixin' as *;
+
+@use 'grid-row';
+
+// These loops create column classes for the breakpoints 2xl, xl, lg, m and s.
+// Obviously it will create classes that will probably never be used (CSS bloat).
+// We could be using only the grid-col mixins.
+// Or also define some commonly used responsive column configurations.
+// We'll have to figure it out...
+@for $i from 1 through a.$grid-columns {
+  .col-#{$i} {
+    @include grid-col($i);
+  }
+
+  @if ($i < a.$grid-columns) {
+    .col-indent-#{$i} {
+      @include grid-col-indent($i);
+    }
+  }
+}
+
+// For "2xl" breakpoint
+@include a.bp('2xl') {
+  @for $i from 1 through a.$grid-columns {
+    .col-2xl-#{$i} {
+      @include grid-col($i);
+    }
+
+    @if ($i < a.$grid-columns) {
+      .col-indent-2xl-#{$i} {
+        @include grid-col-indent($i);
+      }
+    }
+
+    // To clear indent on breakpoint xl
+    .col-indent-2xl-0 {
+      margin-left: 0;
+    }
+  }
+}
+
+// For "xl" breakpoint
+@include a.bp(xl) {
+  @for $i from 1 through a.$grid-columns {
+    .col-xl-#{$i} {
+      @include grid-col($i);
+    }
+
+    @if ($i < a.$grid-columns) {
+      .col-indent-xl-#{$i} {
+        @include grid-col-indent($i);
+      }
+    }
+
+    // To clear indent on breakpoint xl
+    .col-indent-xl-0 {
+      margin-left: 0;
+    }
+  }
+}
+
+// For "lg" breakpoint
+@include a.bp(lg) {
+  @for $i from 1 through a.$grid-columns {
+    .col-lg-#{$i} {
+      @include grid-col($i);
+    }
+
+    @if ($i < a.$grid-columns) {
+      .col-indent-lg-#{$i} {
+        @include grid-col-indent($i);
+      }
+    }
+
+    // To clear indent on breakpoint lg
+    .col-indent-lg-0 {
+      margin-left: 0;
+    }
+  }
+}
+
+// For "m" breakpoint
+@include a.bp(m) {
+  @for $i from 1 through a.$grid-columns {
+    .col-m-#{$i} {
+      @include grid-col($i);
+    }
+
+    @if ($i < a.$grid-columns) {
+      .col-indent-m-#{$i} {
+        @include grid-col-indent($i);
+      }
+    }
+
+    // To clear indent on breakpoint m
+    .col-indent-m-0 {
+      margin-left: 0;
+    }
+  }
+}
+
+// For "s" breakpoint
+@include a.bp(s) {
+  @for $i from 1 through a.$grid-columns {
+    .col-s-#{$i} {
+      @include grid-col($i);
+    }
+
+    @if ($i < a.$grid-columns) {
+      .col-indent-s-#{$i} {
+        @include grid-col-indent($i);
+      }
+    }
+
+    // To clear indent on breakpoint s
+    .col-indent-s-0 {
+      margin-left: 0;
+    }
+  }
+}

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@energie360/ui-library",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "description": "",
   "main": "dist/index.js",
   "exports": {
     ".": "./dist/index.js",
     "./base-style.css": "./dist/base-style.css",
-    "./elements/*": "./elements/*"
+    "./elements/*": "./elements/*",
+    "./components/*": "./components/*",
+    "./wizard/*": "./wizard/*"
   },
   "keywords": [],
   "author": "",

package/wizard/wizard-intro/wizard-intro.scss

@@ -0,0 +1,39 @@
+@use '../../base/abstracts' as a;
+
+.wizard-intro {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: var(--e-space-10);
+
+  @include a.bp(lg) {
+    row-gap: var(--e-space-12);
+    grid-template-columns: 1fr;
+  }
+}
+
+.left-col {
+  display: flex;
+  align-items: center;
+}
+
+.title-slot {
+  @include a.type(1000, strong);
+
+  @include a.bp(lg) {
+    @include a.type(800, strong);
+  }
+}
+
+.description-slot {
+  margin-top: var(--e-space-6);
+
+  @include a.type(300);
+
+  @include a.bp(m) {
+    @include a.type(200);
+  }
+}
+
+.cta-slot {
+  margin-top: var(--e-space-16);
+}

package/wizard/wizard-intro/wizard-intro.vue

@@ -0,0 +1,37 @@
+<script setup>
+defineProps({
+  title: String,
+  description: String,
+  ctaText: String
+})
+</script>
+
+<template>
+  <div class="wizard-intro">
+    <div class="left-col">
+      <div>
+        <div class="title-slot">
+          <slot name="title"><h1>{{ title }}</h1></slot>
+        </div>
+
+        <div class="description-slot">
+          <slot name="description">
+            <p v-html="description"/>
+          </slot>
+        </div>
+
+        <div class="cta-slot">
+          <slot name="cta"></slot>
+        </div>
+      </div>
+    </div>
+
+    <div class="right-col">
+      <slot name="content-right"></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use './wizard-intro.scss';
+</style>

package/wizard/wizard-layout/wizard-layout-block.scss

@@ -0,0 +1,45 @@
+@use '../../base/abstracts' as a;
+@use '../../layout/grid/grid-row';
+@use '../../layout/grid/grid.mixin' as g;
+
+.wizard-layout-block + .wizard-layout-block {
+  margin-top: var(--e-wizard-block-bottom);
+}
+
+.wizard-layout-block {
+  .col-6 {
+    @include g.grid-col(6);
+
+    @include a.bp(xl) {
+      @include g.grid-col(8);
+    }
+
+    @include a.bp(m) {
+      @include g.grid-col(12);
+    }
+  }
+
+  .col-8 {
+    @include g.grid-col(8);
+
+    @include a.bp(m) {
+      @include g.grid-col(12);
+    }
+  }
+
+  .col-10 {
+    @include g.grid-col(10);
+
+    @include a.bp(lg) {
+      @include g.grid-col(8);
+    }
+
+    @include a.bp(m) {
+      @include g.grid-col(12);
+    }
+  }
+
+  .col-12 {
+    @include g.grid-col(12);
+  }
+}

package/wizard/wizard-layout/wizard-layout-block.vue

@@ -0,0 +1,19 @@
+<script setup>
+defineProps({
+  columns: [Number, String],
+})
+</script>
+
+<template>
+  <div class="wizard-layout-block">
+    <div class="row row--centered">
+      <div :class="[`col-${columns}`]">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './wizard-layout-block.scss';
+</style>

package/wizard/wizard-layout/wizard-layout-element.scss

@@ -0,0 +1,3 @@
+.wizard-layout-element + .wizard-layout-element {
+  margin-top: var(--e-wizard-block-between);
+}

package/wizard/wizard-layout/wizard-layout-element.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="wizard-layout-element">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './wizard-layout-element.scss';
+</style>

package/wizard/wizard-layout/wizard-layout.scss

@@ -0,0 +1,40 @@
+@use '@energie360/design-tokens/dist/scss/index' as dt;
+@use '../../base/abstracts' as a;
+@use '../../layout/container/container' as c;
+
+.container {
+  @include c.grid-container;
+
+  // TODO: Can we do this differently?
+  &.embedded {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.wizard-layout {
+  --e-wizard-wrapper-top: #{a.rem(dt.$space-28)};
+  --e-wizard-wrapper-bottom: #{a.rem(dt.$space-28)};
+  --e-wizard-block-bottom: #{a.rem(dt.$space-16)};
+  --e-wizard-block-between: #{a.rem(dt.$space-6)};
+
+  @include a.bp(lg) {
+    --e-wizard-wrapper-top: #{a.rem(dt.$space-12)};
+    --e-wizard-wrapper-bottom: #{a.rem(dt.$space-20)};
+    --e-wizard-block-bottom: #{a.rem(dt.$space-12)};
+  }
+
+  padding-top: var(--e-wizard-wrapper-top);
+  padding-bottom: var(--e-wizard-wrapper-bottom);
+
+  // Spacing rules
+  .wizard-layout-block + .wizard-layout-block {
+    margin-top: var(--e-wizard-block-bottom);
+  }
+
+  .wizard-layout-block {
+    .wizard-layout-element + .wizard-layout-element {
+      margin-top: var(--e-wizard-block-between);
+    }
+  }
+}

package/wizard/wizard-layout/wizard-layout.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="container">
+    <div class="wizard-layout">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './wizard-layout.scss';
+</style>