(SP:5) Create Chip component (#2901)

* feat: initial chip component implementation

* fix: edit filter chip and refactor

* fix: border values

* feat: add chip tests

* fix: remove unneeded margin

* fix: some sonar issues

* fix: rewrite with cn utils function

* fix: change div to button

* fix

* fix: cleanup

* fix: refactoring

* fix: state in child component

src/design-system/components/chip/Chip.scss

@@ -0,0 +1,187 @@
+@use '~/scss/utilities' as *;
+
+.#{$prefix}chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--#{$prefix}space-0-5) var(--#{$prefix}space-1);
+  border: none;
+  border-radius: var(--#{$prefix}border-radius-md);
+  font-family: var(--#{$prefix}font-family-rubik);
+  cursor: pointer;
+
+  &--sm {
+    font-size: var(--#{$prefix}font-size-sm);
+    line-height: var(--#{$prefix}line-height-sm);
+  }
+
+  &--md {
+    font-size: var(--#{$prefix}font-size-md);
+    line-height: var(--#{$prefix}line-height-md);
+  }
+
+  &--lg {
+    font-size: var(--#{$prefix}font-size-lg);
+    line-height: var(--#{$prefix}line-height-lg);
+  }
+
+  &.#{$prefix}disabled {
+    opacity: 0.7;
+    pointer-events: none;
+  }
+
+  &--filter {
+    position: relative;
+
+    &.#{$prefix}filled {
+      &.#{$prefix}selected {
+        background-color: var(--#{$prefix}blue-gray-100);
+      }
+
+      &.#{$prefix}unselected {
+        background-color: var(--#{$prefix}blue-gray-50);
+      }
+    }
+
+    &.#{$prefix}minimal {
+      color: var(--#{$prefix}blue-gray-600);
+
+      &:hover {
+        color: var(--#{$prefix}blue-gray-800);
+      }
+
+      &.#{$prefix}selected,
+      &.#{$prefix}unselected {
+        background-color: var(--#{$prefix}neutral-0);
+      }
+    }
+
+    &.#{$prefix}minimal,
+    &.#{$prefix}filled {
+      &:hover {
+        box-shadow: var(--#{$prefix}box-shadow-xs);
+      }
+
+      &.#{$prefix}selected {
+        color: var(--#{$prefix}blue-gray-800);
+
+        &:hover {
+          background-color: var(--#{$prefix}blue-gray-100);
+        }
+
+        &:active {
+          background-color: var(--#{$prefix}blue-gray-200);
+          transition: background-color 0.2s;
+        }
+      }
+
+      &.#{$prefix}unselected {
+        &:hover {
+          background-color: var(--#{$prefix}blue-gray-50);
+          color: var(--#{$prefix}blue-gray-800);
+        }
+
+        &:active {
+          background-color: var(--#{$prefix}blue-gray-100);
+          transition: background-color 0.2s;
+        }
+      }
+    }
+
+    &.#{$prefix}disabled {
+      opacity: 1;
+      color: var(--#{$prefix}blue-gray-500);
+    }
+
+    .#{$prefix}btn {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    .#{$prefix}dropdown-menu {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      background-color: var(--#{$prefix}neutral-0);
+      border: var(--#{$prefix}border-width-xs) solid
+        var(--#{$prefix}blue-gray-300);
+      border-radius: var(--#{$prefix}space-1);
+      padding: var(--#{$prefix}space-1) 0;
+      list-style: none;
+      margin: 0;
+      width: 100%;
+      z-index: 10;
+      box-shadow: var(--#{$prefix}box-shadow-xs);
+
+      .#{$prefix}dropdown-item {
+        padding: var(--#{$prefix}space-1) var(--#{$prefix}space-2);
+        cursor: pointer;
+        transition: background-color 0.2s;
+
+        &:hover {
+          background-color: var(--#{$prefix}blue-gray-100);
+        }
+      }
+    }
+  }
+
+  &--input {
+    font-weight: var(--#{$prefix}font-weight-medium);
+
+    &.#{$prefix}outlined,
+    &.#{$prefix}filled-outlined {
+      background-color: var(--#{$prefix}neutral-0);
+      color: var(--#{$prefix}blue-gray-800);
+      border: var(--#{$prefix}border-width-sm) solid
+        var(--#{$prefix}blue-gray-400);
+
+      &.#{$prefix}disabled {
+        opacity: 1;
+        color: var(--#{$prefix}blue-gray-500);
+        border-color: var(--#{$prefix}blue-gray-200);
+      }
+    }
+
+    &.#{$prefix}filled-outlined {
+      background-color: var(--#{$prefix}blue-gray-50);
+    }
+  }
+
+  &-categories {
+    display: inline-flex;
+    gap: var(--#{$prefix}space-0-5);
+  }
+
+  &--category,
+  &--state {
+    font-weight: var(--#{$prefix}font-weight-regular);
+    letter-spacing: var(--#{$prefix}letter-spacing-xl);
+    text-transform: uppercase;
+    background-color: var(--chip-bg-color);
+    color: var(--chip-text-color);
+  }
+
+  &--state {
+    border: var(--#{$prefix}border-width-sm) solid var(--chip-border-color);
+  }
+
+  .#{$prefix}startIcon,
+  .#{$prefix}endIcon {
+    display: flex;
+    align-items: center;
+    font-size: inherit;
+  }
+
+  .#{$prefix}startIcon {
+    margin-right: var(--#{$prefix}space-1);
+  }
+
+  .#{$prefix}endIcon {
+    margin-left: var(--#{$prefix}space-1);
+  }
+
+  .#{$prefix}label {
+    padding: var(--#{$prefix}space-0-5);
+  }
+}

src/design-system/components/chip/Chip.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+import {
+  ChipProps,
+  FilterChip,
+  InputChip,
+  CategoryChip,
+  StateChip
+} from './ChipTypes'
+
+const Chip: React.FC<ChipProps> = (props) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [selectedOption, setSelectedOption] = useState<string | null>(null)
+
+  const handleSelectChange = (option: string) => {
+    setSelectedOption(option)
+  }
+
+  switch (props.type) {
+    case 'filter':
+      return (
+        <FilterChip
+          {...props}
+          isOpen={isOpen}
+          onSelectChange={handleSelectChange}
+          selectedOption={selectedOption}
+          setIsOpen={setIsOpen}
+        />
+      )
+    case 'input':
+      return <InputChip {...props} />
+    case 'category':
+      return <CategoryChip {...props} />
+    case 'state':
+      return <StateChip {...props} />
+    default:
+      return null
+  }
+}
+
+export default Chip