From fe18832c84c2e144d44e3bd023bc958576156e1e Mon Sep 17 00:00:00 2001
From: Pez Cuckow <email@pezcuckow.com>
Date: Sat, 12 Nov 2022 09:51:13 +0200
Subject: [PATCH 1/2] Add disabled attr to list-items

For use in table menus
---
 docs/data/utilities.docs.json      |  6 +++++-
 src/components/ListItem.vue        | 11 ++++++++++-
 src/stylesheets/ff-components.scss |  7 +++++++
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/docs/data/utilities.docs.json b/docs/data/utilities.docs.json
index 52d4048..4d7d35c 100644
--- a/docs/data/utilities.docs.json
+++ b/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"
         }]
     }]
 }
\ No newline at end of file
diff --git a/src/components/ListItem.vue b/src/components/ListItem.vue
index ca13eb7..4629bad 100644
--- a/src/components/ListItem.vue
+++ b/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
         }
     }
 }
diff --git a/src/stylesheets/ff-components.scss b/src/stylesheets/ff-components.scss
index 7da8a0a..ecbdaaa 100644
--- a/src/stylesheets/ff-components.scss
+++ b/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;
+    }
+  }
 }
 
 /*

From 24bbcd83e1015802c5ee2fd8251048289c8fd680 Mon Sep 17 00:00:00 2001
From: Pez Cuckow <email@pezcuckow.com>
Date: Mon, 14 Nov 2022 09:41:36 +0200
Subject: [PATCH 2/2] Coverage of ListItems

---
 tests/unit/components/ListItem.spec.js | 32 ++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 tests/unit/components/ListItem.spec.js

diff --git a/tests/unit/components/ListItem.spec.js b/tests/unit/components/ListItem.spec.js
new file mode 100644
index 0000000..0999713
--- /dev/null
+++ b/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)
+    })
+})