@everchron/ec-shards 6.1.1 → 6.1.3

package/package.json

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

package/src/components/collapse/collapse.vue

@@ -12,6 +12,9 @@
           :class="[headlineBold ? 'ecs-headline-section-bold' : 'ecs-headline-section', isVisible ? '' : 'collapsed']"
           @click="toggleCollapse">
           {{title}}
+          <div v-if="$slots.controls" class="ecs-collapsable-headline-controls">
+            <slot name="controls"></slot>
+          </div>
       </h3>
     </div>
     
@@ -216,6 +219,13 @@ export default {
       transform: rotate(-90deg);
       opacity: 1;
     }
+
+    &-controls{
+      margin: 0 $spacing-40 0 auto;
+      display: flex;
+      align-items: center;
+      column-gap: $spacing-10;
+    }
   }
 
   .remove-button{

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

@@ -1,6 +1,6 @@
 <template>
   <div class="ecs-entry-link" @click.stop="handleClick">
-    <div v-if="icon" class="entry-icon">
+    <div v-if="icon" class="entry-icon" :title="iconTitle">
       <ecs-icon v-if="icon" :type="icon" :color="iconColor" size="20" />
       <ecs-sticker v-if="sticker" :type="sticker" />
     </div>
@@ -8,7 +8,7 @@
       <!-- @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 class="ecs-entry-link-label" :class="emphasized ? 'emphasized' : ''" :title="linkTitle">{{ 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>
@@ -62,6 +62,14 @@
       /** Shows a Sticker icon on top of the main icon. */
       sticker: {
         type: String
+      },
+      /** Separate tooltip title for the icon. */
+      iconTitle: {
+        type: String
+      },
+      /** Tooltip for the link itself */
+      linkTitle: {
+        type: String
       }
     },
 

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,18 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 6.1.3 (8 May 2023)
+
+### Fixes
+
+- Add linkTitle and iconTitle props to EntryLink component, to allow separate tooltips
+
+## Version 6.1.2 (4 May 2023)
+
+### Features
+
+- Added a custom controls slot to the Collapse component
+
 ## Version 6.1.1 (4 May 2023)
 
 ### Fixes

package/src/stories/collapse/collapse.stories.js

@@ -1,4 +1,5 @@
 import EcsCollapse from '@components/collapse/collapse';
+import EcsButton from '@components/button/button';
 
 export default {
   title: 'Navigation/Collapse',
@@ -25,6 +26,22 @@ export const indentation = () => ({
             </div>`,
 });
 
+export const controls = () => ({
+  components: { EcsCollapse, EcsButton },
+  methods: {
+    showAlert() {
+      alert('Button clicked!');
+    },
+  },
+  template: `<ecs-collapse headline-bold visible id="test" title="Headline" border-bottom border-top>
+              Content
+              <template slot="controls">
+                <ecs-button @click.stop="showAlert()">Button</ecs-button>
+                <ecs-button @click.stop="showAlert()">Button</ecs-button>
+              </template>
+            </ecs-collapse>`,
+});
+
 export const removable = () => ({
   components: { EcsCollapse },
   template: `<ecs-collapse visible headline-indent="sml" removable id="test7" title="Removable" border-bottom border-top>Content</ecs-collapse>`,