@everchron/ec-shards 0.6.66 → 0.6.73

package/package.json

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

package/src/components/quicklink/quicklink.vue

@@ -1,5 +1,9 @@
 <template>
-  <li class="ecs-quicklinks-link" :class="[typeClass, active ? 'active' : '']">
+  <li class="ecs-quicklinks-link" :class="[
+    typeClass,
+    active ? 'active' : '',
+    disabled ? 'disabled' : ''
+  ]">
     <label v-if="type === 'icon'" @click="$emit('click', $event)">
       <ecs-icon :type="icon" />
       <span class="filter-description">{{label}}</span>
@@ -113,7 +117,7 @@
   &-link{
     display: flex;
     align-items: center;
-    border-radius: 2px;
+    border-radius: 4px;
     min-height: 32px;
     margin-bottom: 4px;
     transition: .2s;
@@ -126,6 +130,10 @@
       color: $gray-8;
     }
 
+    label{
+      cursor: pointer;
+    }
+
     .ecs-form-check,
     label{
       width: 100%;
@@ -201,6 +209,15 @@
         color: $blue-9;
       }
     }
+
+    &.disabled{
+      cursor: default;
+      opacity: .5;
+
+      label{
+        cursor: default;
+      }
+    }
   }
 }
 </style>
@@ -220,5 +237,4 @@
     top: auto !important;
   }
 }
-
 </style>

package/src/components/rating-favorability/rating-favorability.vue

@@ -88,14 +88,13 @@
     height: 20px;
     border-radius: 3px;
     border: 1px solid;
+    position: relative;
   }
 
   .icon{
     position: absolute;
-    width: 30px;
-    height: 30px;
-    top: -5px;
-    left: -5px;
+    left: -6px;
+    top: -6px;
   }
 
   .label{
@@ -159,22 +158,22 @@
     }
 
     .good{
-      border: none;
+      border: 1px solid transparent;
       background: $green-8;
     }
 
     .mixed{
-      border: none;
+      border: 1px solid transparent;
       background: $yellow-8;
     }
 
     .bad{
-      border: none;
+      border: 1px solid transparent;
       background: $red-8;
     }
 
     .unrated{
-      border: none;
+      border: 1px solid transparent;
       background: $gray-4;
     }
   }

package/src/components/section/section.vue

@@ -1,12 +1,18 @@
 <template>
   <div class="ecs-section"
-      :class="[borderTop ? `ecs-section-border-top` : '',
-               borderBottom ? `ecs-section-border-bottom` : '',
+      :class="[borderTop ? 'ecs-section-border-top' : '',
+               borderBottom ? 'ecs-section-border-bottom' : '',
                indentation,
                headlineIndentation]">
 
-    <h3 class="ecs-section-headline" :class="[headlineBold ? `ecs-headline-section-bold` : 'ecs-headline-section', hasControls]">{{title}} <slot name="controls"></slot></h3>
-    <div class="ecs-section-content">
+    <h3 v-if="title" class="ecs-section-headline" :class="[headlineBold ? 'ecs-headline-section-bold' : 'ecs-headline-section', hasControls]">
+      {{title}}
+      <div v-if="$slots.controls" class="ecs-section-controls">
+        <slot name="controls"></slot>
+      </div>
+    </h3>
+
+    <div class="ecs-section-content" :class="title ? '' : 'ecs-section-content-equal'">
       <slot></slot>
     </div>
   </div>
@@ -16,8 +22,7 @@
   export default {
     props: {
       title: {
-        type: String,
-        required: true
+        type: String
       },
       indent: {
         type: String,
@@ -103,9 +108,18 @@
     }
   }
 
+  &-controls{
+    display: flex;
+    align-items: center;
+  }
+
   &-content{
     padding-top: 15px;
     padding-bottom: 25px;
+
+    &-equal{
+      padding-top: 25px;
+    }
   }
 
   &-indent-md,
@@ -148,7 +162,11 @@
       padding-left: 15px;
       padding-right: 15px;
       padding-top: 10px;
-      padding-bottom: 20px
+      padding-bottom: 20px;
+
+      &-equal{
+        padding-top: 20px;
+      }
     }
   }
 

package/src/components/tag/tag.vue

@@ -28,7 +28,7 @@
       },
       party: {
         type: String,
-        validator: v => ['client', 'opposition', 'joint', 'other', 'court', null].includes(v)
+        validator: v => ['client', 'opposing', 'joint', 'other', 'court', 'unaffiliated', null].includes(v)
       },
       count: {
         type: Number,

package/src/stories/section/section.stories.js

@@ -16,6 +16,11 @@ export const borderless = () => ({
   template: `<ecs-section title="Headline">Content</ecs-section>`,
 });
 
+export const noHeadline = () => ({
+  components: { EcsSection },
+  template: `<ecs-section>Content</ecs-section>`,
+});
+
 export const indentation = () => ({
   components: { EcsSection },
   template: `<div>

package/src/stories/section/section.stories.mdx

@@ -24,6 +24,18 @@ Sections are simple content blocks used for grouping related content or forms.
 
 A headline can be set (only text) with the `title` attribute. By setting the `headline-bold` attribute, the headline will appear as a bolder, more emphasized version. 
 
+By not passing any headline, the section component will render without a headline.
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="noHeadline" height="200px">
+    {stories.noHeadline()}
+  </Story>
+</Canvas>
+
+```js
+<ecs-section>Content</ecs-collapse>
+```
+
 ## Borders
 
 The top and bottom borders can be turned on by adding the `border-top` and `border-bottom` attributes. When these attributes are missing, the section is rendered without any borders.
@@ -82,4 +94,4 @@ To show additional controls on the right side of the headline, you can use the `
 
 ## Props and Slots
 
-<ArgsTable of={EcsSection} />
+<ArgsTable of={EcsSection} />

package/src/stories/tag/tag.stories.js

@@ -32,9 +32,9 @@ export const partyTag = () => ({
                 <ecs-tag type="party" party="client" active>active</ecs-tag>
               </main>
               <main class="mb-4">
-                <ecs-tag type="party" party="opposition">opposition</ecs-tag>
-                <ecs-tag type="party" party="opposition" hover>hover</ecs-tag>
-                <ecs-tag type="party" party="opposition" active>active</ecs-tag>
+                <ecs-tag type="party" party="opposing">opposition</ecs-tag>
+                <ecs-tag type="party" party="opposing" hover>hover</ecs-tag>
+                <ecs-tag type="party" party="opposing" active>active</ecs-tag>
               </main>
               <main class="mb-4">
                 <ecs-tag type="party" party="joint">joint</ecs-tag>
@@ -70,4 +70,4 @@ export const tagsLoading = () => ({
               <ecs-tag type="group" loading>hover</ecs-tag>
               <ecs-tag type="filter" loading>active</ecs-tag>
             </main>`,
-});
+});

package/src/stories/tag/tag.stories.mdx

@@ -66,9 +66,9 @@ For the party tag style, set the `type` prop to `party`. Party tags require the
 <ecs-tag type="party" party="client">client</ecs-tag>
 <ecs-tag type="party" party="client" hover>hover</ecs-tag>
 <ecs-tag type="party" party="client" active>active</ecs-tag>
-<ecs-tag type="party" party="opposition">opposition</ecs-tag>
-<ecs-tag type="party" party="opposition" hover>hover</ecs-tag>
-<ecs-tag type="party" party="opposition" active>active</ecs-tag>
+<ecs-tag type="party" party="opposing">opposition</ecs-tag>
+<ecs-tag type="party" party="opposing" hover>hover</ecs-tag>
+<ecs-tag type="party" party="opposing" active>active</ecs-tag>
 <ecs-tag type="party" party="joint">joint</ecs-tag>
 <ecs-tag type="party" party="joint" hover>hover</ecs-tag>
 <ecs-tag type="party" party="joint" active>active</ecs-tag>
@@ -114,4 +114,4 @@ Add the `loading` attribute to show a skeleton loader within the tag.
 
 ## Props, Slots and Events
 
-<ArgsTable of={EcsTag} />
+<ArgsTable of={EcsTag} />