Merge 250f644 into 36a451a

src/bh/assets/scss/bh.scss

@@ -3,3 +3,4 @@
 @import '~./typography';
 @import '~./forms';
 @import '~./utils';
+@import '~./shadow';

src/bh/assets/scss/shadow.scss

@@ -0,0 +1,20 @@
+$shadow-color: rgba(0, 0, 0, 0.5);
+
+@mixin shadow() {
+
+  &--shaded {
+    box-shadow: .25rem .25rem .5rem -.25rem $shadow-color;
+
+    &-light {
+      box-shadow: .125rem .125rem .25rem -.125rem $shadow-color;
+    }
+
+    &-strong {
+      box-shadow: .25rem .25rem .75rem -.25rem $shadow-color;
+    }
+
+    &-hard {
+      box-shadow: .25rem .25rem 1rem -.25rem $shadow-color;
+    }
+  }
+}

src/bh/assets/scss/variables.scss

@@ -29,3 +29,11 @@ $form-component-height-large: $height-large;
 $tooltip-z-index: 10;
 $dropdown-z-index: 9;
 $autocomplete-z-index: 8;
+
+
+// Radius
+
+$radius-normal: .5rem;
+$radius-small: .25rem;
+$radius-medium: .75rem;
+$radius-large: 1rem;

src/bh/components/BhCard.vue

@@ -0,0 +1,56 @@
+<template>
+  <div
+    :class="[
+      'bh-card',
+      !!shadow
+        ? `bh-card--shaded-${shadow}`
+        : 'bh-card--shaded'
+  ]">
+    <div class="bh-card__main">
+      <slot />
+    </div>
+    <div
+      v-if="$slots.append"
+      class="bh-card__append">
+      <slot name="append"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BhCard',
+  props: {
+    shadow: {
+      type: String,
+      default: null,
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '~bh/assets/scss/colors.scss';
+@import '~bh/assets/scss/variables.scss';
+@import '~bh/assets/scss/shadow.scss';
+
+
+.bh {
+  &-card {
+    @include shadow();
+
+    display: flex;
+    flex-direction: row;
+    border: 1px solid $color-lighter-grey;
+    border-radius: $radius-normal;
+
+    &__main {
+      flex-grow: 1;
+    }
+
+    &__append {
+      flex-grow: 0;
+    }
+  }
+}
+</style>

src/bh/index.js

@@ -12,6 +12,7 @@ import BhDropdownItem from './components/BhDropdownItem';
 import BhLanguageFlag from './components/BhLanguageFlag';
 import BhAutocomplete from './components/BhAutocomplete';
 import BhInput from './components/BhInput';
+import BhCard from './components/BhCard';
 
 
 const components = [
@@ -29,6 +30,7 @@ const components = [
   BhLanguageFlag,
   BhAutocomplete,
   BhInput,
+  BhCard,
 ];
 
 export default {

src/components/Repository.vue

@@ -139,6 +139,9 @@
               </div>
             </div>
           </div>
+          <intents-and-labels-list
+            :labels="repository.labels"
+            :intents="repository.intents" />
           <h1 class="title examples-title">Examples</h1>
           <examples-list
             ref="examplesList"
@@ -434,6 +437,7 @@ import SetAuthorizationRoleForm from '@/components/repository/SetAuthorizationRo
 import AuthorizationsList from '@/components/repository/AuthorizationsList';
 import RequestAuthorizationForm from '@/components/repository/RequestAuthorizationForm';
 import AuthorizationRequestsList from '@/components/repository/AuthorizationRequestsList';
+import IntentsAndLabelsList from '@/components/repository/IntentsAndLabelsList';
 
 
 const components = {
@@ -455,6 +459,7 @@ const components = {
   AuthorizationsList,
   RequestAuthorizationForm,
   AuthorizationRequestsList,
+  IntentsAndLabelsList,
 };
 
 export default {

src/components/repository/IntentsAndLabelsItem.vue

@@ -0,0 +1,104 @@
+<template>
+  <bh-card>
+    <div class="i-a-l-item">
+      <div class="i-a-l-item__left">
+        <div class="i-a-l-item__left__content">
+          <strong>{{ title }}</strong>
+          <div class="i-a-l-item__left__content__info">
+            <span><strong>{{ 0 }}</strong> Sentences</span>
+            <span v-if="labelEntities"><strong>{{ 0 }}</strong> Entities</span>
+          </div>
+        </div>
+        <span v-if="labelEntities">Entities</span>
+      </div>
+      <div
+        v-if="labelEntities"
+        slot="append"
+        class="entities">
+        <bh-badge
+          v-for="(entities, i) in labelEntities"
+          :key="i"
+          :class="[
+            'entities__entity',
+            getEntityClass(entities),
+          ]"
+          size="small">
+          <span>{{ entities }}</span>
+        </bh-badge>
+      </div>
+    </div>
+  </bh-card>
+</template>
+
+<script>
+import { getEntityColor } from '@/utils/entitiesColors';
+
+
+export default {
+  name: 'IntentsAndLabelsItem',
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    labelEntities: {
+      type: Array,
+      default: null,
+    },
+  },
+  methods: {
+    getEntityClass(entity) {
+      const color = getEntityColor(
+        entity,
+        this.labelEntities,
+      );
+      return `entity-${color}`;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~bh/assets/scss/bh.scss';
+
+
+.i-a-l-item {
+  flex-grow: 1;
+  display: flex;
+  color:$color-grey;
+
+  &__left {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    border-color: #ebebeb;
+    border-style: double;
+    border-width: 0px 2px 0px 0px;
+    height: auto;
+    padding: 20px 20px 20px 20px;
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      flex-grow: 1;
+
+      &__info {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 30%;
+        margin-top: 20px;
+      }
+    }
+  }
+}
+
+.entities {
+  flex-basis: 30%;
+
+  &__entity {
+    margin: .25rem;
+  }
+}
+</style>

src/components/repository/IntentsAndLabelsList.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="intents-and-labels-list">
+    <div class="intents-and-labels-list__radio">
+      <bh-button
+        ref="intents"
+        :primary="listActived === 'intents'"
+        class="intents-and-labels-list__radio__button"
+        size="medium"
+        @click="activeList('intents')" >
+        Intents
+      </bh-button>
+      <bh-button
+        ref="labels"
+        :primary="listActived === 'labels'"
+        class="intents-and-labels-list__radio__button"
+        size="medium"
+        @click="activeList('labels')">
+        Labels
+      </bh-button>
+    </div>
+    <div v-if="listActived === 'intents'">
+      <intents-and-labels-item
+        v-for="intent in intents"
+        :key="intent"
+        :title="intent"
+        class="intents-and-labels-list__item" />
+    </div>
+    <div v-else-if="listActived === 'labels'">
+      <intents-and-labels-item
+        v-for="label in labels"
+        :key="label.value"
+        :title="label.value"
+        :label-entities="label.entities"
+        class="intents-and-labels-list__item" />
+    </div>
+  </div>
+</template>
+
+<script>
+import IntentsAndLabelsItem from '@/components/repository/IntentsAndLabelsItem';
+
+
+export default {
+  name: 'IntentsAndLabelsList',
+  components: {
+    IntentsAndLabelsItem,
+  },
+  props: {
+    intents: {
+      type: Array,
+      required: true,
+    },
+    labels: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      listActived: 'intents',
+    };
+  },
+  methods: {
+    activeList(value) {
+      this.listActived = value;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.intents-and-labels-list {
+  &__radio {
+    margin: 0 -.25rem;
+    display: flex;
+
+    &__button {
+      margin: .25rem;
+    }
+  }
+
+  &__item {
+    margin: 1rem 0;
+  }
+}
+</style>

test/unit/specs/bh/BhCard.spec.js

@@ -0,0 +1,38 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { compileToFunctions } from 'vue-template-compiler';
+import BH from 'bh';
+import BhCard from 'bh/components/BhCard';
+
+
+const localVue = createLocalVue();
+localVue.use(BH);
+
+const defaultSlotComponent = compileToFunctions('<div>default</div>');
+const appendSlotComponent = compileToFunctions('<div>append</div>');
+
+describe('BhCard.vue', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = shallowMount(BhCard, {
+      localVue,
+      slots: {
+        default: defaultSlotComponent,
+        append: appendSlotComponent,
+      },
+    });
+  });
+
+  test('renders correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  describe('set shadow hard', () => {
+    beforeEach(() => {
+      wrapper.setProps({ shadow: 'hard' });
+    });
+
+    test('renders correctly', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});

test/unit/specs/bh/__snapshots__/BhCard.spec.js.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BhCard.vue renders correctly 1`] = `
+<div class="bh-card bh-card--shaded">
+  <div class="bh-card__main">
+    <div>default</div>
+  </div>
+  <div class="bh-card__append">
+    <div>append</div>
+  </div>
+</div>
+`;
+
+exports[`BhCard.vue set shadow hard renders correctly 1`] = `
+<div class="bh-card bh-card--shaded-hard">
+  <div class="bh-card__main">
+    <div>default</div>
+  </div>
+  <div class="bh-card__append">
+    <div>append</div>
+  </div>
+</div>
+`;