@everchron/ec-shards 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "private": false,
   "description": "Everchron Shards UI Library",
   "repository": "https://github.com/everchron/ec-shards.git",

package/src/components/button/button.vue

@@ -1,5 +1,5 @@
 <template>
-  <a v-if="href" :href="href" :target="target"
+  <a v-if="href && !addon" :href="href" :target="target"
     class="ecs-button"
     :class="[
       typeClass,
@@ -17,7 +17,7 @@
     <slot></slot>
   </a>
 
-  <button v-else
+  <button v-else-if="!addon"
     class="ecs-button"
     :class="[
       typeClass,
@@ -34,6 +34,18 @@
     <ecs-icon v-if="icon || loading" :type="iconType" :width="iconSize" :height="iconSize" />
     <slot></slot>
   </button>
+
+  <button v-else
+    class="ecs-button ecs-button-addon"
+    :class="[
+      typeClass,
+      sizeClass,
+      active ? `active` : '',]"
+      @click="$emit('click', $event)">
+      <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M1 1.5L4 4.5L7 1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+  </button>
 </template>
 
 <script>
@@ -73,7 +85,9 @@
       /** If the button should act as a link, you can set the href with this prop. */
       href: String,
       /** If the button should act as a link, this allows you to modify the target attribute. */
-      target: String
+      target: String,
+      /** Renders a small dropdown add-on button variant, which should only be used in combination with a regular button, and within an `EcsButtonGroup`. */
+      addon: Boolean
     },
 
     computed: {
@@ -219,7 +233,7 @@
     }
 
     &:focus{
-      box-shadow: 0 0 0 2px $color-blue-2;
+      box-shadow: 0 0 0 2px rgba($color-blue-8, .1);
     }
 
     &:active,
@@ -247,7 +261,7 @@
     }
 
     &:focus{
-      box-shadow: 0 0 0 2px $color-gray-2;
+      box-shadow: 0 0 0 2px rgba($color-gray-8, .1);
     }
 
     &:active,
@@ -275,7 +289,7 @@
     }
 
     &:focus{
-      box-shadow: 0 0 0 2px $color-red-3;
+      box-shadow: 0 0 0 2px rgba($color-red-8, .1);
       color: $color-red-9;
     }
 
@@ -299,7 +313,7 @@
     }
 
     &:focus{
-      box-shadow: 0 0 0 2px $color-red-3;
+      box-shadow: 0 0 0 2px rgba($color-red-8, .1);
       color: $color-red-9;
     }
 
@@ -323,7 +337,7 @@
     }
 
     &:focus{
-      box-shadow: 0 0 0 2px $color-yellow-4;
+      box-shadow: 0 0 0 2px rgba($color-yellow-7, .2);
     }
 
     &:active,
@@ -348,7 +362,7 @@
     }
 
     &:focus{
-      box-shadow: 0 0 0 3px $color-green-2;
+      box-shadow: 0 0 0 3px rgba($color-green-10, .1);
     }
 
     &:active,
@@ -367,7 +381,7 @@
     }
 
     &:focus{
-      box-shadow: 0 0 0 3px $color-blue-2;
+      box-shadow: 0 0 0 3px rgba($color-blue-10, .1);
     }
 
     &:active,
@@ -400,4 +414,65 @@
     }
   }
 }
+
+.ecs-button-addon{
+  &.ecs-button-sml{
+    padding: 0 $spacing-5;
+  }
+
+  &.ecs-button-md{
+    padding: 0 6px;
+  }
+
+  &.ecs-button-lg{
+    padding: 0 $spacing-10;
+  }
+
+  &.ecs-button-primary,
+  &.ecs-button-secondary,
+  &.ecs-button-danger,
+  &.ecs-button-danger-vibrant,
+  &.ecs-button-warning{
+    &:before{
+      content: "";
+      background: rgba($color-gray-12, .1);
+      width: 1px;
+      height: 60%;
+      border-radius: 1px;
+      position: absolute;
+      left: -1px;
+      top: 20%;
+      transition: .5s;
+    }
+
+    &:hover:before{
+      opacity: 0;
+    }
+  }
+}
+
+.ecs-button-group{
+  .ecs-button-create,
+  .ecs-button-vibrant{
+    border-radius: 0;
+    border-right: 1px solid; 
+  }
+
+  .ecs-button-create{
+    border-color: $color-green-10;
+  }
+
+  .ecs-button-create:first-child,
+  .ecs-button-vibrant:first-child{
+    border-top-left-radius: $border-radius-small;
+    border-bottom-left-radius: $border-radius-small;
+  }
+
+  .ecs-button-create:last-child,
+  .ecs-button-vibrant:last-child{
+    border-top-right-radius: $border-radius-small;
+    border-bottom-right-radius: $border-radius-small;
+    border-right: none;
+  }
+}
 </style>

package/src/components/button-group/button-group.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="ecs-button-group">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+
+.ecs-button-group{
+  display: flex;
+  align-items: center;
+}
+</style>

package/src/components/index.js

@@ -10,6 +10,7 @@ import EcsBreadcrumb from "./breadcrumb/breadcrumb.vue"
 import EcsBreadcrumbButton from "./breadcrumb-button/breadcrumb-button.vue"
 import EcsBreadcrumbTitle from "./breadcrumb-title/breadcrumb-title.vue"
 import EcsButton from "./button/button.vue"
+import EcsButtonGroup from "./button-group/button-group.vue"
 import EcsButtonCollapse from "./button-collapse/button-collapse.vue"
 import EcsButtonContext from "./button-context/button-context.vue"
 import EcsButtonContextGroup from "./button-context-group/button-context-group.vue"
@@ -128,6 +129,7 @@ const Components = {
   EcsBreadcrumbButton,
   EcsBreadcrumbTitle,
   EcsButton,
+  EcsButtonGroup,
   EcsButtonCollapse,
   EcsButtonContext,
   EcsButtonContextGroup,

package/src/components/tab-button/tab-button.vue

@@ -220,7 +220,7 @@
 
       .sticker{
         top: 23px;
-        left: 25px;
+        left: 29px;
       }
 
       .hover{

package/src/stories/Changelog.stories.mdx

@@ -6,7 +6,18 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
-## Version 1.0.2 (undated)
+## Version 1.0.3 (21 August 2022)
+
+### Features
+
+- Added new `addon` prop for EcsButton, which renders a small dropdown addition.
+- Added new EcsButtonGroup component to create groups of regular Buttons, as well as dropdown addons.
+
+### Fixes
+
+- Fixed positioning of stickers on column EcsTabButton variant
+
+## Version 1.0.2 (16 August 2022)
 
 ### Fixes
 
@@ -14,13 +25,13 @@ import { Meta } from '@storybook/addon-docs/blocks';
 - Replaced old add icon with new add icon
 - EcsButton type `create` icons are now white instead of dark green
 
-## Version 1.0.1 (undated)
+## Version 1.0.1 (19 August 2022)
 
 ### Fixes
 
 - Changed standard EcsTabButton font scale to 3.
 
-## Version 1.0.0 (undated)
+## Version 1.0.0 (16 August 2022)
 
 ### Features
 

package/src/stories/alert/alert.stories.js

@@ -28,7 +28,7 @@ export const headline = () => ({
 
 export const actions = () => ({
   components: { EcsAlert },
-  template: `<ecs-alert type="warning" dismissable action="Review" @action="">
+  template: `<ecs-alert type="warning" dismissable action-label="Review" @action="">
               <p>This is a warning alert with a primary action — check it out!</p>
               <ul>
                 <li>This is the first bullet point</li>

package/src/stories/button/button.stories.js

@@ -1,4 +1,5 @@
 import EcsButton from '@components/button/button';
+import EcsButtonGroup from '@components/button-group/button-group';
 import { action } from '@storybook/addon-actions';
 
 export default {
@@ -33,13 +34,31 @@ export const sizes = () => ({
 export const withIcon = () => ({
   components: { EcsButton },
   methods: { action: action('clicked') },
-  template: `<ecs-button @click="action" icon="add-plus" type="create">Create</ecs-button>`,
+  template: `<main>
+              <ecs-button @click="action" icon="add-plus" type="primary">Create</ecs-button>
+              <ecs-button @click="action" icon="add-plus" type="secondary">Create</ecs-button>
+              <ecs-button @click="action" icon="add-plus" type="danger">Create</ecs-button>
+              <ecs-button @click="action" icon="add-plus" type="danger-vibrant">Create</ecs-button>
+              <ecs-button @click="action" icon="add-plus" type="warning">Create</ecs-button>
+              <ecs-button @click="action" icon="add-plus" type="create">Create</ecs-button>
+              <ecs-button @click="action" icon="add-plus" type="vibrant">Create</ecs-button>
+            </main>`,
 });
 
 export const iconOnly = () => ({
   components: { EcsButton },
   methods: { action: action('clicked') },
-  template: `<ecs-button @click="action" icon-only icon="add-plus" type="create"></ecs-button>`,
+  template: `
+            <main>
+              <ecs-button @click="action" icon-only icon="add-plus" type="primary"></ecs-button>
+              <ecs-button @click="action" icon-only icon="add-plus" type="secondary"></ecs-button>
+              <ecs-button @click="action" icon-only icon="add-plus" type="danger"></ecs-button>
+              <ecs-button @click="action" icon-only icon="add-plus" type="danger-vibrant"></ecs-button>
+              <ecs-button @click="action" icon-only icon="add-plus" type="warning"></ecs-button>
+              <ecs-button @click="action" icon-only icon="add-plus" type="create"></ecs-button>
+              <ecs-button @click="action" icon-only icon="add-plus" type="vibrant"></ecs-button>
+            </main>
+            `,
 });
 
 export const active = () => ({
@@ -58,3 +77,34 @@ export const fullWidth = () => ({
   methods: { action: action('clicked') },
   template: `<ecs-button @click="action" full-width type="vibrant">Block button</ecs-button>`,
 });
+
+export const grouped = () => ({
+  components: { EcsButton, EcsButtonGroup },
+  methods: { action: action('clicked') },
+  template: `<ecs-button-group>
+              <ecs-button @click="action" type="create">First</ecs-button>
+              <ecs-button @click="action" type="create">Middle</ecs-button>
+              <ecs-button @click="action" type="create">Last</ecs-button>
+            </ecs-button-group>`,
+});
+
+export const addons = () => ({
+  components: { EcsButton, EcsButtonGroup },
+  methods: { action: action('clicked') },
+  template: `
+            <main>
+              <ecs-button-group>
+                <ecs-button @click="action" type="create" size="sml">Small</ecs-button>
+                <ecs-button @click="action" type="create" size="sml" addon />
+              </ecs-button-group>
+              <ecs-button-group>
+                <ecs-button @click="action" type="create">Medium</ecs-button>
+                <ecs-button @click="action" type="create" addon />
+              </ecs-button-group>
+              <ecs-button-group>
+                <ecs-button @click="action" type="create" size="lg">Large</ecs-button>
+                <ecs-button @click="action" type="create" size="lg" addon />
+              </ecs-button-group>
+            </main>
+            `,
+});