feat: Add support to use different labels for tag and node (#412)

Co-authored-by: Bulletninja <[email protected]>

Author: m4theushw

README.md

@@ -273,6 +273,7 @@ Data for rendering the tree select items. The object requires the following stru
   actions,        // optional: An array of extra action on the node (such as displaying an info icon or any custom icons/elements)
   dataset,        // optional: Allows data-* attributes to be set on the node and tag elements
   isDefaultValue, // optional: Indicate if a node is a default value. When true, the dropdown will automatically select the node(s) when there is no other selected node. Can be used on more than one node.
+  tagLabel,       // optional: tag label in case you need it to differ from the checkbox label
   ...             // optional: Any extra properties that you'd like to receive during `onChange` event
 }
 ```

__snapshots__/src/tags/index.test.js.md

@@ -92,3 +92,35 @@ Generated by [AVA](https://ava.li).
         <Input />
       </li>
     </ul>
+
+## should render the tagLabel instead of label when provided
+
+> Snapshot 1
+
+    <ul
+      className="tag-list"
+    >
+      <li
+        className="tag-item"
+        key="tag-item-i1"
+      >
+        <Tag
+          id="i1"
+          label="custom label"
+        />
+      </li>
+      <li
+        className="tag-item"
+        key="tag-item-i2"
+      >
+        <Tag
+          id="i2"
+          label="l2"
+        />
+      </li>
+      <li
+        className="tag-item"
+      >
+        <Input />
+      </li>
+    </ul>

__snapshots__/src/tags/index.test.js.snap

@@ -7,15 +7,15 @@ import './index.css'
 
 const getTags = (tags = [], onDelete, readOnly, disabled, labelRemove) =>
   tags.map(tag => {
-    const { _id, label, tagClassName, dataset } = tag
+    const { _id, label, tagClassName, dataset, tagLabel } = tag
     return (
       <li
         className={['tag-item', tagClassName].filter(Boolean).join(' ')}
         key={`tag-item-${_id}`}
         {...getDataset(dataset)}
       >
         <Tag
-          label={label}
+          label={tagLabel || label}
           id={_id}
           onDelete={onDelete}
           readOnly={readOnly}

src/tags/index.js

@@ -57,3 +57,15 @@ test('should render data attributes', t => {
 
   t.snapshot(wrapper)
 })
+
+test('should render the tagLabel instead of label when provided', t => {
+  const tags = [{ _id: 'i1', label: 'l1', tagLabel: 'custom label' }, { _id: 'i2', label: 'l2' }]
+  const wrapper = toJson(
+    shallow(
+      <Tags tags={tags}>
+        <Input />
+      </Tags>
+    )
+  )
+  t.snapshot(wrapper)
+})