@everchron/ec-shards 3.1.5 → 3.3.0

package/src/components/separator/separator.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="ecs-separator" :class="classes" :style="{margin: marginStyles, width: width, height: height}" />
+</template>
+
+<script>
+  export default {
+    props: {
+      /** Determines if the separator line is horinzontally or vertically shown. */
+      type: {
+        type: String,
+        default: 'horizontal',
+        validator: v => ['horizontal', 'vertical'].includes(v)
+      },
+      /** Determines the color strength of the line. */
+      strength: {
+        type: String,
+        default: 'medium',
+        validator: v => ['soft', 'medium', 'strong'].includes(v)
+      },
+      /** Determines to margin (top/bottom for horizontal, left/right for vertical). If a `Number` is passed, the margin will used for both top/bottom or left/right. If an `Array` is passed (eg. `[8, 16]`), you can set individual margins for each side (CSS shorthand syntax). */
+      margin: {
+        type: [Number, Array],
+        default: 0
+      },
+      /** Determines the width of the separator. Any valid css (px, %) value possible. */
+      width: {
+        type: String
+      },
+      /** Determines the height of the separator. Any valid css (px, %) value possible. Vertical separators typically require a pixel value height. */
+      height: {
+        type: String
+      }
+    },
+
+    computed: {
+      classes(){
+        return 'ecs-separator-' + this.type + ' ecs-separator-' + this.strength
+      },
+
+      marginStyles(){
+        if(typeof(this.margin) === 'number') {
+          if(this.type === 'horizontal')
+            return this.margin + 'px 0 ' + this.margin + 'px 0'
+          else
+            return '0 ' + this.margin + 'px 0 ' + this.margin + 'px'
+        } else if(typeof(this.margin) === 'object') {
+          const iterator = this.margin.values()
+          let margins
+          let iteration = 0
+          for (const value of iterator) {
+            if(iteration == 0)
+              margins = value + 'px '
+            else
+              margins = margins + value + 'px '
+            iteration++
+          }
+          return margins
+        }
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+
+.ecs-separator{
+  border-radius: 1px;
+
+  &-soft{
+    background-color: $color-gray-2;
+  }
+
+  &-medium{
+    background-color: $color-gray-3;
+  }
+
+  &-strong{
+    background-color: $color-gray-4;
+  }
+
+  &-horizontal{
+    width: 100%;
+    height: 1px;
+  }
+
+  &-vertical{
+    height: 100%;
+    width: 1px;
+  }
+}
+</style>
+

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,22 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 3.3.0 (12 January 2023)
+
+### Features
+
+- Added new EcsFillIcon component
+- Added `login-key` icon
+- Added EU flag icon
+- Added new `placeholder` prop support for EcsSelect component
+- Added new EcsSeparator component
+
+## Version 3.2.0 (11 January 2023)
+
+### Fixes
+
+Reverted all EcsPagination updates and moved these changes to the @next branch, until infinite scroll feature can be implemented. This means 3.2.0 can be used again as a stable release for current application development.
+
 ## Version 3.1.5 (undefined)
 
 ### Features

package/src/stories/fill-icon/fill-icon.stories.js

@@ -0,0 +1,24 @@
+import EcsFillIcon from '@components/fill-icon/fill-icon';
+
+export default {
+  title: 'Icons/Fill Icon',
+  component: EcsFillIcon
+};
+
+export const fillIcon = () => ({
+  components: { EcsFillIcon },
+  template: `<main>
+              <ecs-fill-icon type="login-sso-azure" />
+              <ecs-fill-icon type="login-sso-okta" />
+              <ecs-fill-icon type="login-email" />
+              <ecs-fill-icon type="login-email-mfa" :width="23" />
+            </main>`,
+});
+
+export const fillIconSizes = () => ({
+  components: { EcsFillIcon },
+  template: `<main>
+              <ecs-fill-icon type="login-sso-azure" :width="40" />
+              <ecs-fill-icon type="login-sso-azure" :height="40" :width="40" />
+            </main>`,
+});

package/src/stories/flag/flag.stories.js

@@ -7,5 +7,10 @@ export default {
 
 export const flag = () => ({
   components: { EcsFlag },
-  template: `<ecs-flag code="us" />`,
+  template: `<main>
+              <ecs-flag code="us" />
+              <ecs-flag code="eu" />
+              <ecs-flag code="gb" />
+              <ecs-flag code="au" />
+            </main>`,
 });

package/src/stories/pagination/pagination.stories.js

@@ -35,33 +35,3 @@ export const tabPagination = () => ({
               </ecs-pagination>
             </div>`,
 });
-
-export const infiniteScroll = () => ({
-  components: { EcsPagination, EcsTabBar, EcsTabButton },
-  template: `<div style="display:flex;flex-direction:column;height: 200px;justify-content: flex-end;">
-              <ecs-pagination type="infinite" :current-page="2" :total-pages="10">
-                <template slot="tabs">
-                  <ecs-tab-bar type="sheet">
-                    <ecs-tab-button show>Settings</ecs-tab-button>
-                    <ecs-tab-button>Calendar</ecs-tab-button>
-                    <ecs-tab-button>Versions</ecs-tab-button>
-                  </ecs-tab-bar>
-                </template>
-              </ecs-pagination>
-            </div>`,
-});
-
-export const infiniteScrollRange = () => ({
-  components: { EcsPagination, EcsTabBar, EcsTabButton },
-  template: `<div style="display:flex;flex-direction:column;height: 200px;justify-content: flex-end;">
-              <ecs-pagination type="infinite" :current-page="2" :total-pages="10" :itemRangeFrom="1" :itemRangeTo="10" :itemRangeTotal="90">
-                <template slot="tabs">
-                  <ecs-tab-bar type="sheet">
-                    <ecs-tab-button>Settings</ecs-tab-button>
-                    <ecs-tab-button show>Calendar</ecs-tab-button>
-                    <ecs-tab-button>Versions</ecs-tab-button>
-                  </ecs-tab-bar>
-                </template>
-              </ecs-pagination>
-            </div>`,
-});

package/src/stories/select/select.stories.js

@@ -89,3 +89,19 @@ export const selectNaked = () => ({
                 </ecs-select>
               </div>`,
 });
+
+export const selectPlaceholders = () => ({
+  components: { EcsSelect },
+  template: `<div>
+                <ecs-select placeholder="Placeholder" class="mb-4">
+                  <option value="admin">Admin</option>
+                  <option value="basic">Basic</option>
+                  <option value="guest">Guest</option>
+                </ecs-select>
+                <ecs-select placeholder="Placeholder" subtle>
+                  <option value="admin">Admin</option>
+                  <option value="basic">Basic</option>
+                  <option value="guest">Guest</option>
+                </ecs-select>
+              </div>`,
+});

package/src/stories/separator/separator.stories.js

@@ -0,0 +1,33 @@
+import EcsSeparator from '@components/separator/separator';
+
+export default {
+  title: 'Layout/Separator',
+  component: EcsSeparator
+};
+
+export const separator = () => ({
+  components: { EcsSeparator },
+  template: `<div>
+              <ecs-separator :margin="20" />
+              <ecs-separator type="vertical" height="24px" />
+            </div>`,
+});
+
+export const separatorStrengths = () => ({
+  components: { EcsSeparator },
+  template: `<div>
+              <ecs-separator strength="soft" :margin="20" />
+              <ecs-separator strength="medium" :margin="20" />
+              <ecs-separator strength="strong" :margin="20" />
+            </div>`,
+});
+
+export const separatorMargins = () => ({
+  components: { EcsSeparator },
+  template: `<div>
+              <ecs-separator :margin="20" />
+              <ecs-separator type="vertical" :margin="20" height="24px" />
+              <ecs-separator :margin="[20, 40]" />
+              <ecs-separator type="vertical" :margin="[8, 16, 12, 20]" height="24px" />
+            </div>`,
+});