Tags widget (ToolJet#1659)

* implemented tags widget

* added text color option, changed default tags

* added scrollbar & space between tags

* Required changes are added:

- Changed colors of buttons as per the document
- Now scrollbar only shows if it is needed
- Tags height will be static

* Changed documentation

- Added gif file

* Removed text color style option from inspector
 - Changed md text file

Author: shah21

docs/docs/widgets/tags.md

@@ -0,0 +1,11 @@
+# Tags
+
+Tags widget can be used to show array of data as tags.
+
+<img class="screenshot-full" src="/img/widgets/tags/tags.gif" alt="ToolJet - Widget Reference - Tags" height="420"/>
+
+#### Properties
+
+| properties      | description |
+| ----------- | ----------- |
+| Data | It can be used to set array of tags. It must be an array of objects like this ```[ { title: 'tag1', color: '#000000', textColor: '#fff' }, { title: 'tag2', color: '#fefefe', textColor: 'green' } ]```. Each object should contain a title and color code of a particular tag, also a text color.|

docs/static/img/widgets/tags/tags.gif

@@ -29,6 +29,7 @@ import { Listview } from './Components/Listview';
 import { IFrame } from './Components/IFrame';
 import { CodeEditor } from './Components/CodeEditor';
 import { Timer } from './Components/Timer';
+import { Tags } from './Components/Tags';
 import { renderTooltip } from '../_helpers/appUtils';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import '@/_styles/custom.scss';
@@ -67,6 +68,7 @@ const AllComponents = {
   CodeEditor,
   Listview,
   Timer,
+  Tags,
 };
 
 export const Box = function Box({

frontend/assets/images/icons/widgets/tags.svg

@@ -0,0 +1,36 @@
+import React from 'react';
+
+export const Tags = function Tags({ width, height, properties, styles }) {
+  const { data } = properties;
+  const { visibility } = styles;
+
+  const computedStyles = {
+    width,
+    height,
+    display: visibility ? '' : 'none',
+    overflowY: 'auto',
+  };
+
+  function renderTag(item, index) {
+    const tagComputedStyles = {
+      backgroundColor: item.color,
+      color: item.textColor,
+      textTransform: 'none',
+    };
+
+    return (
+      <span className="badge mx-1 mb-1" style={tagComputedStyles} key={index}>
+        {item.title}
+      </span>
+    );
+  }
+
+  return (
+    <div style={computedStyles}>
+      {data &&
+        data.map((item, index) => {
+          return renderTag(item, index);
+        })}
+    </div>
+  );
+};

frontend/src/Editor/Box.jsx

@@ -1552,4 +1552,42 @@ export const componentTypes = [
       },
     },
   },
+  {
+    name: 'Tags',
+    displayName: 'Tags',
+    description: 'Content can be shown as tags',
+    component: 'Tags',
+    defaultSize: {
+      width: 5,
+      height: 30,
+    },
+    others: {
+      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
+      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
+    },
+    properties: {
+      data: { type: 'code', displayName: 'Tags' },
+    },
+    events: {},
+    styles: {
+      visibility: { type: 'code', displayName: 'Visibility' },
+    },
+    exposedVariables: {},
+    definition: {
+      others: {
+        showOnDesktop: { value: true },
+        showOnMobile: { value: false },
+      },
+      properties: {
+        data: {
+          value:
+            "{{ [ \n\t\t{ title: 'success', color: '#2fb344', textColor: '#fff' }, \n\t\t{ title: 'info', color: '#206bc4', textColor: '#fff'  }, \n\t\t{ title: 'warning', color: '#f59f00', textColor: '#fff'  }, \n\t\t{ title: 'danger', color: '#d63939', textColor: '#fff' } ] }}",
+        },
+      },
+      events: [],
+      styles: {
+        visibility: { value: '{{true}}' },
+      },
+    },
+  },
 ];