Merge pull request #806 from owncloud/breadcrumbs-lead-size

changelog/unreleased/lead-variation-breadcrumbs

@@ -0,0 +1,6 @@
+Enhancement: Add lead breadcrumb variation
+
+We've added a lead variation to the breadcrumbs.
+This variation gives large font size to breadcrumb items.
+
+https://github.com/owncloud/owncloud-design-system/pull/806

src/elements/OcBreadcrumb.spec.js

@@ -0,0 +1,35 @@
+import { shallowMount } from "@vue/test-utils"
+import Breadcrumb from "./OcBreadcrumb.vue"
+
+const items = [
+  { text:'First folder', to:{ path:'folder' } },
+  { text:'Subfolder', onClick: () => alert('Breadcrumb clicked!') },
+  { text:'Deep', to:{ path:'folder' } },
+  { text:'Deeper ellipsize in responsive mode' },
+]
+
+describe("OcBreadcrumb", () => {
+  it("sets correct variation", () => {
+    const wrapper = shallowMount(Breadcrumb, {
+      propsData: {
+        variation: "lead",
+        items
+      }
+    })
+
+    expect(wrapper.props().variation).toMatch("lead")
+    expect(wrapper.classes()).toContain("oc-breadcrumb-lead")
+    expect(wrapper).toMatchSnapshot()
+  }),
+
+  it("displays all items", () => {
+    const wrapper = shallowMount(Breadcrumb, {
+      propsData: {
+        items
+      }
+    })
+
+    expect(wrapper.findAll(".oc-breadcrumb-list-item").length).toBe(4)
+    expect(wrapper).toMatchSnapshot()
+  })
+})

src/elements/OcBreadcrumb.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="oc-breadcrumb">
+  <div :class="`oc-breadcrumb oc-breadcrumb-${variation}`">
     <ul class="oc-breadcrumb-list">
-      <li v-for="(item, index) in items" :key="index">
+      <li v-for="(item, index) in items" :key="index" class="oc-breadcrumb-list-item">
         <router-link v-if="home && index === 0" :to="item.to" class="uk-flex"
           ><oc-icon name="home"
         /></router-link>
@@ -33,6 +33,9 @@
 </template>
 
 <script>
+import OcDrop from "./OCDrop.vue"
+import OcIcon from "./OcIcon.vue"
+
 /**
  * Displays a breadcrumb. Each item in the items property has the following elements:
  *
@@ -44,13 +47,18 @@ export default {
   name: "oc-breadcrumb",
   status: "review",
   release: "1.0.0",
+
+  components: {
+    OcDrop,
+    OcIcon
+  },
+
   props: {
     /**
      * Array of breadcrub items
      */
     items: {
       type: Array,
-      default: () => [],
       required: true,
     },
     /**
@@ -61,6 +69,16 @@ export default {
       type: [Boolean],
       default: false,
     },
+    /**
+     * Variation of breadcrumbs
+     * Can be `default` or `lead`
+     */
+    variation: {
+      type: String,
+      required: false,
+      default: "default",
+      validator: value => value === "lead" || value === "default"
+    }
   },
   computed: {
     $_ocBreadcrumb_dropdownItems() {
@@ -78,11 +96,12 @@ export default {
 </script>
 
 <docs>
-```vue
+```js
 <template>
-  <section>
-    <oc-breadcrumb :items="items" home></oc-breadcrumb>
-  </section>
+  <div>
+    <oc-breadcrumb :items="items" home class="uk-margin-bottom" />
+    <oc-breadcrumb :items="items" variation="lead" />
+  </div>
 </template>
 <script>
   export default {

src/elements/__snapshots__/OcBreadcrumb.spec.js.snap

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OcBreadcrumb displays all items 1`] = `
+<div class="oc-breadcrumb oc-breadcrumb-default">
+  <ul class="oc-breadcrumb-list">
+    <li class="oc-breadcrumb-list-item">
+      <router-link-stub tag="a" to="[object Object]">First folder</router-link-stub>
+    </li>
+    <li class="oc-breadcrumb-list-item"><a>Subfolder</a></li>
+    <li class="oc-breadcrumb-list-item">
+      <router-link-stub tag="a" to="[object Object]">Deep</router-link-stub>
+    </li>
+    <li class="oc-breadcrumb-list-item"><span>Deeper ellipsize in responsive mode</span></li>
+  </ul>
+  <div class="oc-breadcrumb-drop"><label class="oc-breadcrumb-drop-label"><span class="oc-breadcrumb-drop-label-text">Deeper ellipsize in responsive mode</span>
+      <oc-icon-stub name="expand_more" arialabel="icon" type="span" size="small" variation="system" class="oc-breadcrumb-drop-label-icon"></oc-icon-stub>
+    </label>
+    <oc-drop-stub toggle="- *" position="bottom-left" mode="click" options="[object Object]">
+      <ul class="uk-nav uk-nav-default">
+        <li>
+          <router-link-stub tag="a" to="[object Object]">Deep</router-link-stub>
+        </li>
+        <li><a>Subfolder</a></li>
+        <li>
+          <router-link-stub tag="a" to="[object Object]">First folder</router-link-stub>
+        </li>
+      </ul>
+    </oc-drop-stub>
+  </div>
+</div>
+`;
+
+exports[`OcBreadcrumb sets correct variation 1`] = `
+<div class="oc-breadcrumb oc-breadcrumb-lead">
+  <ul class="oc-breadcrumb-list">
+    <li class="oc-breadcrumb-list-item">
+      <router-link-stub tag="a" to="[object Object]">First folder</router-link-stub>
+    </li>
+    <li class="oc-breadcrumb-list-item"><a>Subfolder</a></li>
+    <li class="oc-breadcrumb-list-item">
+      <router-link-stub tag="a" to="[object Object]">Deep</router-link-stub>
+    </li>
+    <li class="oc-breadcrumb-list-item"><span>Deeper ellipsize in responsive mode</span></li>
+  </ul>
+  <div class="oc-breadcrumb-drop"><label class="oc-breadcrumb-drop-label"><span class="oc-breadcrumb-drop-label-text">Deeper ellipsize in responsive mode</span>
+      <oc-icon-stub name="expand_more" arialabel="icon" type="span" size="small" variation="system" class="oc-breadcrumb-drop-label-icon"></oc-icon-stub>
+    </label>
+    <oc-drop-stub toggle="- *" position="bottom-left" mode="click" options="[object Object]">
+      <ul class="uk-nav uk-nav-default">
+        <li>
+          <router-link-stub tag="a" to="[object Object]">Deep</router-link-stub>
+        </li>
+        <li><a>Subfolder</a></li>
+        <li>
+          <router-link-stub tag="a" to="[object Object]">First folder</router-link-stub>
+        </li>
+      </ul>
+    </oc-drop-stub>
+  </div>
+</div>
+`;

src/styles/theme/oc-breadcrumb.scss

@@ -35,4 +35,13 @@
       }
     }
   }
+
+  &-lead &-list-item {
+    &::before,
+    a,
+    span {
+      // FIXME: Remove important after we get rid of UIKit
+      font-size: $large-font-size !important;
+    }
+  }
 }