feat: add hasAsteriskJustAfterLabel props

Author: 14nrv

README.md

@@ -133,6 +133,10 @@ props: {
     type: String,
     required: true
   },
+  hasAsteriskJustAfterLabel: {
+    type: Boolean,
+    default: false
+  },
   mandatoryAsteriskLegend: {
     type: String,
     default: '* field required'

src/components/Fields/Label.spec.js

@@ -2,83 +2,84 @@ import matchers from 'jest-vue-matcher'
 import { mount } from '@vue/test-utils'
 import Label from '@/components/Fields/Label'
 
+const HELP = '(help content)'
 const LABEL = 'the label'
+const ITEM = {
+  help: HELP,
+  label: LABEL
+}
 let wrapper
 
-describe('Label', () => {
-  beforeEach(() => {
-    wrapper = mount(Label, {
-      propsData: {
-        item: {
-          label: LABEL
-        }
-      }
-    })
-    expect.extend(matchers(wrapper))
+const setup = ({
+  hasAsteriskJustAfterLabel = false,
+  item = ITEM
+} = {}) => {
+  wrapper = mount(Label, {
+    propsData: {
+      item
+    },
+    computed: {
+      hasAsteriskJustAfterLabel: () => hasAsteriskJustAfterLabel
+    }
   })
+  expect.extend(matchers(wrapper))
+  return wrapper
+}
 
+describe('Label', () => {
   afterEach(() => {
     wrapper.destroy()
   })
 
   it('shows a label', () => {
+    setup()
     expect('label').toHaveText(LABEL)
   })
 
-  it('shows an alternative label', async () => {
+  it('shows an alternative label', () => {
     const ALTERNATIVE_LABEL = 'an alternative label'
-
-    await wrapper.setProps({
-      item: {
-        label: LABEL,
-        alternativeLabel: ALTERNATIVE_LABEL
-      }
-    })
+    const item = { ...ITEM, alternativeLabel: ALTERNATIVE_LABEL }
+    setup({ item })
 
     expect('label').toHaveText(ALTERNATIVE_LABEL)
     expect('label').not.toHaveText(LABEL)
   })
 
-  it('hides the label', async () => {
-    await wrapper.setProps({
-      item: {
-        label: LABEL,
-        showLabel: false
-      }
-    })
+  it('hides the label', () => {
+    const item = { ...ITEM, showLabel: false }
+    setup({ item })
 
     expect('label').not.toBeADomElement()
   })
 
   it('has a for attribute by default', () => {
+    setup()
+
     expect('label').toHaveAttribute('for', 'the-label')
   })
 
-  it('has a custom for attribute', async () => {
+  it('has a custom for attribute', () => {
     const ATTR_FOR = 'a-custom-for-attribute'
-
-    await wrapper.setProps({
-      item: {
-        label: LABEL,
-        for: ATTR_FOR
-      }
-    })
+    const item = { ...ITEM, for: ATTR_FOR }
+    setup({ item })
 
     expect('label').toHaveAttribute('for', ATTR_FOR)
   })
 
   it('is mandatory by default', () => {
-    expect('label').toHaveText('*')
+    setup()
+    expect('label').toHaveText(`${LABEL}${HELP}*`)
   })
 
-  it('is not mandatory', async () => {
-    await wrapper.setProps({
-      item: {
-        label: LABEL,
-        isRequired: false
-      }
-    })
+  it('is not mandatory', () => {
+    const item = { ...ITEM, isRequired: false }
+    setup({ item })
 
     expect('label').not.toHaveText('*')
   })
+
+  it('put the asterisk just after the label', () => {
+    setup({ hasAsteriskJustAfterLabel: true })
+    expect('label').toHaveText(`${LABEL}*${HELP}`)
+  })
 })

src/components/Fields/Label.vue

@@ -1,8 +1,10 @@
 <template lang="pug">
   label.label(:for="item.for || item.label | slugify", v-if="item.showLabel !== false")
     p {{ item.alternativeLabel || item.label }}
+      span(v-if="item.isRequired !== false && hasAsteriskJustAfterLabel")
+        sup.has-text-grey-light.is-size-7 *
       span.helpLabel.has-text-grey-light.is-size-7.is-italic(v-if="item.help") {{ item.help }}
-      span(v-if="item.isRequired !== false")
+      span(v-if="item.isRequired !== false && !hasAsteriskJustAfterLabel")
         sup.has-text-grey-light.is-size-7 *
 
 </template>
@@ -20,6 +22,11 @@ export default {
       type: Object,
       required: true
     }
+  },
+  computed: {
+    hasAsteriskJustAfterLabel () {
+      return this.$parent.$parent.hasAsteriskJustAfterLabel
+    }
   }
 }
 </script>

src/components/Form/Form.vue

@@ -89,6 +89,10 @@ export default {
       type: String,
       required: true
     },
+    hasAsteriskJustAfterLabel: {
+      type: Boolean,
+      default: false
+    },
     mandatoryAsteriskLegend: {
       type: String,
       default: '* field required'