@everchron/ec-shards 4.0.2 → 4.1.1

package/package.json

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

package/src/components/data-list-item/data-list-item.vue

@@ -147,11 +147,11 @@
 
 .ecs-data-list-data{
   a:not(.ecs-button){
-    color: $color-blue-8;
+    color: $color-blue-9;
     cursor: pointer;
 
     &:hover{
-      color: $color-blue-9;
+      color: $color-blue-10;
     }
   }
 
@@ -160,7 +160,7 @@
   }
 
   .subtle{
-    color: $color-gray-8;
+    color: $color-gray-9;
   }
 
   li{

package/src/components/entry-link/entry-link.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="ecs-entry-link" @click.stop="handleClick">
+    <ecs-icon v-if="icon" :type="icon" size="20" class="entry-icon" />
+    <div v-if="$slots.prepender" class="prepend">
+      <!-- @slot Slot for additional prepended content that should preceed the title. Use with care. -->
+      <slot name="prepender"></slot>
+    </div>
+    <div class="ecs-entry-link-label" :class="emphasized ? 'emphasized' : ''">{{ label }}</div>
+    <div v-if="$slots.appender" class="append">
+      <!-- @slot Slot for additional appended content that should follow the title. Use with care. -->
+      <slot name="appender"></slot>
+    </div>
+
+    <ecs-button-more v-if="moreButton" @click.stop="handleMoreButtonClick" type="ellipsis" :title="moreButtonTitle" />
+  </div>
+</template>
+
+<script>
+  import EcsIcon from '../icon/icon'
+  import EcsButtonMore from '../button-more/button-more'
+
+  export default {
+    components: {
+      EcsIcon,
+      EcsButtonMore
+    },
+    props: {
+      /** If set, an icon will be added to the left of the button. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
+      icon: {
+        type: String
+      },
+      /** The text content of the link. */
+      label: {
+        type: String,
+        required: true
+      },
+      /** Determines if the (...) more button will be shown. */
+      moreButton: {
+        type: Boolean,
+        default: false
+      },
+      /** Sets the title of the (...) more button. */
+      moreButtonTitle: {
+        type: String,
+        default: "Show Details"
+      },
+      /** Sets the font-weight of the label to bold. */
+      emphasized: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    computed: {
+
+    },
+
+    methods: {
+      handleClick(e){
+        /** Emitted when the link itself is clicked. */
+        this.$emit('linkClick', e)
+      },
+
+      handleMoreButtonClick(e){
+        /** Emitted when the more (...) button is clicked. */
+        this.$emit('moreClick', e)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+
+.ecs-entry-link{
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+  font-size: $type-scale-3-font-size;
+  line-height: $type-scale-3-line-height;
+  border-radius: $border-radius-small;
+  padding: 0 $spacing-5;
+  position: relative;
+  transition: .2s color, .2s background, .2s box-shadow, .2s opacity;
+  white-space: nowrap;
+  cursor: pointer;
+  z-index: 0;
+  flex-shrink: 0;
+  max-width: 100%;
+  color: $color-gray-15;
+
+  &:after{
+    content: "";
+    background: rgba($color-gray-8, .07);
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    transform: scale(.8);
+    transition: opacity .15s ease-in-out, transform .3s cubic-bezier(0.3, 0.76, 0.27, 1);
+    border-radius: $border-radius-small;
+    z-index: -1;
+    pointer-events: none;
+  }
+
+  &:hover{
+    &:after{
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    .entry-icon{
+      color: $color-gray-7;
+    }
+  }
+
+  &:disabled{
+    opacity: .5;
+    cursor: default;
+    filter: saturate(0);
+
+    &:after{
+      opacity: 0;
+    }
+  }
+
+  .entry-icon{
+    color: $color-gray-6;
+    margin: 0 $spacing-5 0 -2px;
+  }
+
+  &-label{
+    flex: 1;
+    min-width: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+
+    &.emphasized{
+      font-weight: $font-weight-medium;
+    }
+  }
+
+  .ecs-button-more-ellipsis{
+    margin: 0 $spacing-5 0 $spacing-10;
+  }
+
+  .prepend{
+    color: $color-gray-11;
+    margin: 0 $spacing-10 0 0;
+  }
+
+  .append{
+    margin: 0 0 0 $spacing-10;
+  }
+}
+</style>

package/src/components/index.js

@@ -44,6 +44,7 @@ import EcsDocumentState from "./document-state/document-state.vue"
 import EcsDropdown from "./dropdown/dropdown.vue"
 import EcsDropzone from "./dropzone/dropzone.vue"
 import EcsEmptyState from "./empty-state/empty-state.vue"
+import EcsEntryLink from "./entry-link/entry-link.vue"
 import EcsExcerptSnippet from "./excerpt-snippet/excerpt-snippet.vue"
 import EcsFavicon from "./favicon/favicon.vue"
 import EcsFileIcon from "./file-icon/file-icon.vue"
@@ -172,6 +173,7 @@ const Components = {
   EcsDropdown,
   EcsDropzone,
   EcsEmptyState,
+  EcsEntryLink,
   EcsExcerptSnippet,
   EcsFavicon,
   EcsFileIcon,

package/src/stories/entry-link/entry-link.stories.js

@@ -0,0 +1,38 @@
+import EcsEntryLink from '@components/entry-link/entry-link';
+
+export default {
+  title: 'Action/Entry Link',
+  component: EcsEntryLink
+};
+
+export const entryLink = () => ({
+  components: { EcsEntryLink },
+  template: `<ecs-entry-link icon="transcript" label="Entry Link Headline" />`,
+});
+
+export const entryLinkEmphasized = () => ({
+  components: { EcsEntryLink },
+  template: `<ecs-entry-link icon="transcript" emphasized label="Entry Link Headline" />`,
+});
+
+export const entryLinkMoreButton = () => ({
+  components: { EcsEntryLink },
+  template: `<ecs-entry-link icon="transcript" emphasized label="Entry Link Headline" more-button />`,
+});
+
+export const entryLinkEscaping = () => ({
+  components: { EcsEntryLink },
+  template: `<div style="width:500px">
+              <ecs-entry-link icon="transcript" label="Entry Link Headline does automatically escape while appender and prepender stay visible"></ecs-entry-link>
+            </div>`,
+});
+
+export const entryLinkAppendingPrepending = () => ({
+  components: { EcsEntryLink },
+  template: `<div style="width:500px">
+              <ecs-entry-link icon="transcript" label="Entry Link Headline" emphasized>
+                <template slot="prepender">01/01/2023</template>
+                <template slot="appender">Vol. II</template>
+              </ecs-entry-link>
+            </div>`,
+});