feature(components): add chip component

app/scripts/components/common/_variables.scss

@@ -0,0 +1 @@
+$images-path: "../images/components";

app/scripts/components/common/chip/chip.component.scss

@@ -0,0 +1,110 @@
+.chip {
+  display: inline-block;
+  padding: 4px 8px;
+  border: 1px solid #E5E5E5;
+  border-radius: 16px;
+
+  font-family: "Roboto-Regular";
+  font-size: 14px;
+  line-height: 16px;
+  color: #8B8B8F;
+
+  cursor: pointer;
+
+  &:hover {
+    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
+    color: #010101;
+  }
+}
+
+.chip__content {
+  display: flex;
+  align-items: center;
+}
+
+.chip__buttons {
+  display: flex;
+  align-items: center;
+}
+
+.chip__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+
+  &:before {
+    display: block;
+    content: '';
+    width: 8px;
+    height: 8px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+
+  &.chip__icon_name_drag {
+    width: 2px;
+    margin-right: 4px;
+
+    &:before {
+      width: 2px;
+      background-image: url('#{$images-path}/chip/icon-chip-ellipsis-vertical.svg');
+    }
+  }
+
+  &.chip__icon_name_active:before {
+    width: 12px;
+    background-image: url('#{$images-path}/chip/icon-chip-active.svg');
+  }
+}
+
+.chip__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+
+  &:before {
+    display: block;
+    content: '';
+    width: 12px;
+    height: 12px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+
+  &.chip__button_action_delete:before {
+    width: 8px;
+    height: 8px;
+    background-image: url('#{$images-path}/chip/icon-chip-delete.svg');
+  }
+}
+
+.chip {
+  &:not(.chip_state_active) {
+    .chip__icon_name_active {
+      display: none;
+    }
+  }
+
+  &.chip_state_active {
+    .chip__button_action_delete {
+      display: none;
+    }
+  }
+
+  &:not(:hover) {
+    .chip__icon_name_drag {
+      visibility: hidden;
+    }
+  }
+}
+
+.chip__text {
+  margin-right: 6px;
+  user-select: none;
+}

app/scripts/components/common/chip/chip.component.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+
+interface IChip {
+  value: any;
+  text: string;
+  active?: boolean;
+  maxLength?: number;
+  onChange?: ( state: IChipState ) => any;
+  onDelete?: ( state: IChipState ) => any;
+}
+
+interface IChipState {
+  text: string;
+  value: any;
+  active: boolean;
+}
+
+/**
+ * Chip component
+ * @param props { IChip } - component properties
+ * @returns 
+ */
+export function Chip (props: IChip) {
+  const {
+    value = null,
+    text = '',
+    maxLength = 15,
+    active = false,
+    onChange = null,
+    onDelete = null
+  } = props;
+
+  const chipClassList = ['chip'];
+
+  // add a class for applying CSS styles when the chip is active
+  if (active) {
+    chipClassList.push('chip_state_active');
+  }
+
+  // trim the "text" if its length is greater than "maxLength"
+  const chipText = text.length > maxLength ? text.slice(0, maxLength) + '..' : text;
+
+  // call the "onChange" function when the chip is clicked
+  // skip clicks on chip buttons
+  const handleChange = (event: React.MouseEvent<HTMLElement>) => {
+    if ( !isButtonElement(event.target as HTMLElement) ) {
+      onChange && onChange({ text, value, active });
+    }
+  };
+
+  // call the "onDelete" function when the "delete" button is clicked
+  const handleDelete = () => {
+    onDelete && onDelete({ text, value, active });
+  };
+
+  return (
+    <div
+      className={ chipClassList.join(' ') }
+      title={ text }
+      onClick={ (event) => {
+        handleChange(event);
+      } }
+    >
+      <div className="chip__content">
+        <span className="chip__icon chip__icon_name_drag"></span>
+        <div className="chip__text">{ chipText }</div>
+        <span className="chip__icon chip__icon_name_active"></span>
+        <span
+          className="chip__button chip__button_action_delete"
+          onClick={ (event) => {
+            handleDelete();
+          } }
+        ></span>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Returns true, if the element is [inside] the chip button element
+ * @param element { HTMLElement } - an
+ * @returns boolean;
+ */
+function isButtonElement (element: HTMLElement): boolean {
+  return element && !!element.closest('.chip__button');
+}

app/scripts/components/common/common.scss

@@ -0,0 +1,2 @@
+@import "./variables";
+@import "./chip/chip.component";