Merge pull request #96 from flowforge/feat-disabled-list-item

Add disabled attr to list-items

docs/data/utilities.docs.json

@@ -1,7 +1,7 @@
 {
     "name": "Utilities",
     "id": "utilities",
-    "description": "A collection of smaller components that can be used in conjuction with, or as child elements, of any of the other components in this library.",
+    "description": "A collection of smaller components that can be used in conjunction with, or as child elements, of any of the other components in this library.",
     "components": [{
         "name": "ff-check",
         "examples": [{
@@ -23,6 +23,10 @@
             "key": "label",
             "default": "",
             "description": "A string label to display in the list item."
+        }, {
+            "key": "disabled",
+            "default": "false",
+            "description": "Should this list item visually disabled"
         }]
     }]
 }

src/components/ListItem.vue

@@ -1,5 +1,5 @@
 <template>
-    <li class="ff-list-item" :class="'ff-list-item--' + kind">
+    <li class="ff-list-item" :class="[className, this.disabled ? 'disabled' : ''] ">
         <component :is="icon" />
         <label>{{ label }}</label>
     </li>
@@ -20,6 +20,15 @@ export default {
         kind: {
             type: String,
             default: ''
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        className () {
+            return 'ff-list-item--' + this.kind
         }
     }
 }

src/stylesheets/ff-components.scss

@@ -193,6 +193,13 @@ li.ff-list-item {
     cursor: pointer;
     background-color: $ff-grey-200;
   }
+  &.disabled {
+    pointer-events: none;
+
+    label {
+      opacity: 0.5;
+    }
+  }
 }
 
 /*

tests/unit/components/ListItem.spec.js

@@ -0,0 +1,32 @@
+import { mount } from '@vue/test-utils'
+import ListItem from '@/components/ListItem.vue'
+
+describe('ListItem', () => {
+    it('renders the passed label', async () => {
+        const wrapper = mount(ListItem, {
+            props: {
+                label: 'my list item'
+            }
+        })
+
+        expect(wrapper.text()).toMatch('my list item')
+
+        await wrapper.setProps({ label: 'new label' })
+
+        expect(wrapper.text()).toMatch('new label')
+    })
+
+    it('can be visually disabled', async () => {
+        const wrapper = mount(ListItem, {
+            props: {
+                disabled: true
+            }
+        })
+
+        expect(wrapper.classes('disabled')).toBe(true)
+
+        await wrapper.setProps({ disabled: false })
+
+        expect(wrapper.classes('disabled')).toBe(false)
+    })
+})