@everchron/ec-shards 1.0.2 → 1.2.0

package/src/components/citation-line/citation-line.vue

@@ -0,0 +1,136 @@
+<template>
+  <ecs-flex-row class="ecs-citation-line">
+    <div class="ecs-citation-line-cite" :class="[state, editable ? 'editable' : '']"
+      ref="editable"
+      @keyup="onInput"
+      @blur="$emit('blur', $event)"
+      @focus="$emit('focus', $event)"
+      @keydown.enter.prevent 
+      :contenteditable="editable">
+    </div>
+    <ecs-flex-row v-if="$slots.actions" justify="end" class="ecs-citation-line-actions">
+      <!-- @slot Slot for optional buttons or other controls that should appear next to the citation line. -->
+      <slot name="actions"></slot>
+    </ecs-flex-row>
+  </ecs-flex-row>
+</template>
+
+<script>
+  import EcsFlexRow from '../flex/flex-row'
+
+  export default {
+    components: { EcsFlexRow },
+
+    props: {
+      /** The citation range text. */
+      cite: {
+        type: String,
+        required: true
+      },
+      /** Unique citation ID */
+      id: {
+        type: [String, Number],
+        required: true
+      },
+      /** Determines the visual state of the citation line. */
+      state: {
+        type: String,
+        validator: v => ['default', 'error', 'warning', 'edited', 'skipped'].includes(v),
+        default: 'default'
+      },
+      /** Makes the content of the citation line editable. */
+      editable: {
+        type: Boolean,
+        default: true
+      }
+    },
+
+    data() {
+      return {
+        citeValue: this.cite
+      }
+    },
+
+    mounted() {
+      this.$refs.editable.innerText = this.citeValue
+    },
+
+    methods: {
+      onInput(e) {
+        this.citeValue = e.target.innerText
+        this.$emit('change', this.citeValue, this.id)
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-citation-line{
+  margin-bottom: 2px;
+
+  &:last-child{
+    margin-bottom: 0;
+  }
+
+  &-cite{
+    border-radius: $border-radius-small;
+    padding: 2px $spacing-10;
+    font-family: $font-family-monospace;
+    font-size: $type-scale-3-font-size - 1;
+    line-height: $type-scale-3-line-height;
+    color: $color-gray-15;
+    transition: .2s;
+    flex: 1;
+    flex-shrink: 0;
+
+    &.editable:hover,
+    &.editable:focus{
+        background: $color-gray-2;
+    }
+
+    &.warning{
+      background: $color-yellow-2;
+
+      &.editable:hover,
+      &.editable:focus{
+        background: $color-yellow-3;
+      }
+    }
+
+    &.error{
+      background: $color-red-2;
+
+      &.editable:hover,
+      &.editable:focus{
+        background: $color-red-3;
+      }
+    }
+
+    &.edited{
+      background: $color-blue-2;
+
+      &.editable:hover,
+      &.editable:focus{
+        background: $color-blue-3;
+      }
+    }
+
+    &.skipped{
+      background: $color-gray-2;
+      color: $color-gray-10;
+
+      &.editable:hover,
+      &.editable:focus{
+        background: $color-gray-3;
+      }
+    }
+  }
+
+  &-actions{
+    margin-left: $spacing-10;
+  }
+}
+</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"
@@ -20,6 +21,7 @@ import EcsButtonToolbar from "./button-toolbar/button-toolbar.vue"
 import EcsButtonToolbarGroup from "./button-toolbar-group/button-toolbar-group.vue"
 import EcsButtonToolbarIcon from "./button-toolbar-icon/button-toolbar-icon.vue"
 import EcsCard from "./card/card.vue"
+import EcsCitationLine from "./citation-line/citation-line.vue"
 import EcsCheckbox from "./checkbox/checkbox.vue"
 import EcsCollapse from "./collapse/collapse.vue"
 import EcsCollectionControl from "./collection-control/collection-control.vue"
@@ -91,6 +93,7 @@ import EcsScrollContainer from "./scroll-container/scroll-container.vue"
 import EcsSection from "./section/section.vue"
 import EcsSegment from "./segment/segment.vue"
 import EcsSelect from "./select/select.vue"
+import EcsSelectTile from "./select-tile/select-tile.vue"
 import EcsSequenceMap from "./sequence-map/sequence-map.vue"
 import EcsSequenceMapButton from "./sequence-map-button/sequence-map-button.vue"
 import EcsSidebar from "./sidebar/sidebar.vue"
@@ -128,6 +131,7 @@ const Components = {
   EcsBreadcrumbButton,
   EcsBreadcrumbTitle,
   EcsButton,
+  EcsButtonGroup,
   EcsButtonCollapse,
   EcsButtonContext,
   EcsButtonContextGroup,
@@ -139,6 +143,7 @@ const Components = {
   EcsButtonToolbarIcon,
   EcsCheckbox,
   EcsCard,
+  EcsCitationLine,
   EcsCollapse,
   EcsCollectionControl,
   EcsComment,
@@ -209,6 +214,7 @@ const Components = {
   EcsSection,
   EcsSegment,
   EcsSelect,
+  EcsSelectTile,
   EcsSequenceMap,
   EcsSequenceMapButton,
   EcsSidebar,

package/src/components/quicklink/quicklink.vue

@@ -24,7 +24,7 @@
       </template>
 
       <template v-else-if="type === 'switch'">
-        <ecs-switch @input="$emit('toggle', $event)" size="sml">{{label}}</ecs-switch>
+        <ecs-switch @input="$emit('toggle', $event)" :value="valueToggle" :disabled="value == false" size="sml">{{label}}</ecs-switch>
       </template>
 
       <template v-else>
@@ -86,6 +86,11 @@
         required: false,
         type: [Date, Number, String, Boolean]
       },
+      valueToggle: {
+        default: false,
+        required: false,
+        type: [Date, Number, String, Boolean]
+      },
       disabled: {
         type: Boolean,
         default: false

package/src/components/select-tile/select-tile.vue

@@ -0,0 +1,181 @@
+<template>
+  <div @click="$emit('click', $event)" class="ecs-select-tile"
+      :class="[selected ? 'ecs-select-tile-selected' : '', disabled ? 'ecs-select-tile-disabled' : '']">
+
+    <div class="select-check" />
+    <div v-if="illustration" class="illustration" :class="illustration" />
+    <div v-if="label" class="label">{{ label }}</div>
+    <div v-if="helpText" class="help">{{ helpText }}</div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      /** The main label for the tile. */
+      label: {
+        type: String,
+        required: true
+      },
+      /** Additional line of text underneath the label, which can be used to add further explanations and infos. */
+      helpText: {
+        type: String
+      },
+      /** The type of illustration that should be shown within the tile. */
+      illustration: {
+        type: String,
+        validator: v => [
+          'load-file-annotations',
+          'load-file-designation-report',
+          'load-file-designation',
+          'load-file-zip',
+          'overlay-files',
+          'overlay-metadata',
+          null
+        ].includes(v),
+      },
+      /** Determines the selection state of the tile. */
+      selected: {
+        type: Boolean,
+        default: false
+      },
+      /** Disables the tile. */
+      disabled: {
+        type: Boolean,
+        default: false
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-select-tile{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 32px 24px;
+  min-width: 240px;
+  background: #FFFFFF;
+  box-shadow: 0px 0px 0px 1px rgba(71, 75, 96, 0.05), 0px 1px 4px rgba(71, 75, 96, 0.1);
+  border-radius: 8px;
+  border: 1px solid #FFF;
+  cursor: pointer;
+  text-align: center;
+  transition: .2s;
+  position: relative;
+
+  &:hover{
+    box-shadow: 0px 0px 0px 1px rgba(71, 75, 96, 0.05), 0px 2px 4px rgba(71, 75, 96, 0.15);
+    transform: translateY(-4px);
+  }
+
+  .label{
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+    color: #202127;
+  }
+
+  .help{
+    font-size: 12px;
+    line-height: 16px;
+    color: #75798F;
+    margin-top: 8px;
+  }
+
+  .select-check{
+    background: #0B71EB;
+    border-radius: 100%;
+    position: absolute;
+    opacity: 0;
+    transition: .2s;
+    top: 8px;
+    left: 8px;
+    width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:before{
+      opacity: 0;
+      transform: rotate(-15deg) scale(.7);
+      transition: .4s;
+      width: 8px;
+      height: 8px;
+      content: "";
+      background-image: svg-uri('<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 4.259L3.347 6.998L7 1" stroke="white" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+    }
+  }
+
+  &-selected{
+    background: #F4F9FF;
+    border: 1px solid #A7CFFF;
+    box-shadow: none;
+
+    .select-check{
+      opacity: 1;
+
+      &:before{
+        opacity: 1;
+        transform: rotate(0) scale(1);
+      }
+    }
+
+    &:hover{
+      box-shadow: none;
+      transform: translateY(0);
+    }
+  }
+
+  &-disabled{
+    background: #F9FAFC;
+    border: 1px solid #ECEDF2;
+    box-shadow: none;
+    pointer-events: none;
+
+    .label{
+      color: #65687A;
+    }
+
+    .help{
+      color: #929AA9;
+    }
+  }
+}
+
+.illustration{
+  width: 140px;
+  height: 140px;
+  background-position: center center;
+  margin-bottom: 16px;
+}
+
+.load-file-annotations{
+  background: url('../../assets/images/selectable-tiles-illustrations/load-file-annotations.svg');
+}
+
+.load-file-designation-report{
+  background: url('../../assets/images/selectable-tiles-illustrations/load-file-designation-report.svg');
+}
+
+.load-file-designation{
+  background: url('../../assets/images/selectable-tiles-illustrations/load-file-designation.svg');
+}
+
+.load-file-zip{
+  background: url('../../assets/images/selectable-tiles-illustrations/load-file-zip.svg');
+}
+
+.overlay-files{
+  background: url('../../assets/images/selectable-tiles-illustrations/overlay-files.svg');
+}
+
+.overlay-metadata{
+  background: url('../../assets/images/selectable-tiles-illustrations/overlay-metadata.svg');
+}
+</style>

package/src/components/switch/switch.vue

@@ -1,9 +1,10 @@
 <template>
-  <div class="ecs-switch-wrapper" :class="disabled ? `disabled` : ''">
+  <div class="ecs-switch-wrapper">
     <label class="ecs-switch"
       :class="[
         sizeClass,
-        hasDefaultSlot ? `ecs-switch-has-label` : ''
+        hasDefaultSlot ? `ecs-switch-has-label` : '',
+        disabled ? `disabled` : ''
       ]">
       <input
         type="checkbox"
@@ -140,10 +141,10 @@
   &-wrapper{
     display: flex;
     align-items: center;
+  }
 
-    &.disabled{
-      opacity: .5;
-    }
+  &.disabled{
+    opacity: .5;
   }
 
   input[type=checkbox] {

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,30 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
-## Version 1.0.2 (undated)
+## Version 1.2.0 (24 August 2022)
+
+### Features
+
+- Added new EcsCitationLine component.
+
+## Version 1.1.0 (23 August 2022)
+
+### Features
+
+- Added new EcsSelectTile component.
+
+## 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 +37,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>
+            `,
+});

package/src/stories/citation-line/citation-line.stories.js

@@ -0,0 +1,32 @@
+import EcsCitationLine from '@components/citation-line/citation-line';
+import EcsButton from '@components/button/button';
+
+export default {
+  title: 'Input/Citation Line',
+  component: EcsCitationLine
+};
+
+export const citationLine = () => ({
+  components: { EcsCitationLine },
+  template: `<ecs-citation-line cite="1:10 - 1:14" :id="1" state="warning"></ecs-citation-line>`,
+});
+
+export const citationLineStates = () => ({
+  components: { EcsCitationLine },
+  template: `<div>
+              <ecs-citation-line cite="1:10 - 1:14" :id="1" state="default"></ecs-citation-line>
+              <ecs-citation-line cite="1:10 - 1:14" :id="1" state="warning"></ecs-citation-line>
+              <ecs-citation-line cite="1:10 - 1:14" :id="1" state="error"></ecs-citation-line>
+              <ecs-citation-line cite="1:10 - 1:14" :id="1" state="edited"></ecs-citation-line>
+              <ecs-citation-line cite="1:10 - 1:14" :id="1" state="skipped"></ecs-citation-line>
+            </div>`,
+});
+
+export const citationLineActions = () => ({
+  components: { EcsCitationLine, EcsButton },
+  template: `<ecs-citation-line cite="1:10 - 1:14" :id="1" state="warning">
+              <template slot="actions">
+                <ecs-button size="sml" icon="warning" icon-only type="warning" />
+              </template>
+              </ecs-citation-line>`,
+});

package/src/stories/quicklink/quicklink.stories.js

@@ -27,5 +27,5 @@ export const quicklinkFavorability = () => ({
 
 export const quicklinkThreeWaySwitch = () => ({
   components: { EcsQuicklink },
-  template: `<ecs-quicklink type="switch" label="Filter" :count="12" />`,
+  template: `<ecs-quicklink type="switch" label="Filter" :value="true" :valueToggle="true" :count="12" />`,
 });

package/src/stories/select-tile/select-tile.stories.js

@@ -0,0 +1,23 @@
+import EcsSelectTile from '@components/select-tile/select-tile';
+
+export default {
+  title: 'Input/Select Tile',
+  component: EcsSelectTile
+};
+
+export const selectTile = () => ({
+  components: { EcsSelectTile },
+  data() {
+    return {
+      selectedTile: null
+    }
+  },
+  template: `
+  <main>
+    <ecs-select-tile @click="selectedTile = 1" :selected="selectedTile == 1" label="Designation Load File Import" help-text="CSV or XLS Load File" illustration="load-file-designation" />
+    <ecs-select-tile @click="selectedTile = 2" :selected="selectedTile == 2" label="Designation Report Import" help-text="XLS Report" illustration="load-file-designation-report" />
+    <ecs-select-tile @click="selectedTile = 3" disabled :selected="selectedTile == 3" label="Designation Report Import" help-text="XLS Report" illustration="load-file-designation-report" />
+  </main>
+  `,
+});
+