Add chips component

changelog/entries/unreleased/feature/1918_add_chips_ui_component.json

@@ -0,0 +1,7 @@
+{
+    "type": "feature",
+    "message": "Add chips UI component",
+    "issue_number": 1918,
+    "bullet_points": [],
+    "created_at": "2023-11-13"
+}

web-frontend/modules/core/assets/scss/components/all.scss

@@ -146,3 +146,4 @@
 @import 'call_to_action';
 @import 'toast_button';
 @import 'workflow_action';
+@import 'chips';

web-frontend/modules/core/assets/scss/components/chips.scss

@@ -0,0 +1,55 @@
+.chips {
+  display: inline-flex;
+  padding: 12px 14px;
+  font-size: 13px;
+  font-weight: 500;
+  justify-content: center;
+  align-items: center;
+  height: 44px;
+  box-sizing: border-box;
+  gap: 8px;
+  margin: 0;
+  background: $white;
+  border: 1px solid $palette-neutral-400;
+  cursor: pointer;
+
+  @include rounded($rounded-md);
+  @include flex-align-items(8px);
+
+  &:hover:not(.chips--disabled) {
+    border: 1px solid $palette-blue-300;
+    background: rgba($palette-blue-1000, 0.06);
+
+    &.chips--active {
+      border-width: 1.5px;
+    }
+  }
+
+  &:active:not(.chips--disabled) {
+    border: 1px solid $palette-blue-500;
+    background: rgba($palette-blue-1000, 0.1);
+  }
+}
+
+.chips--active:not(.chips--disabled) {
+  border: 1.5px solid $palette-blue-600;
+  background: rgba($palette-blue-1000, 0.08);
+}
+
+.chips__icon {
+  color: $palette-neutral-600;
+  font-size: 18px;
+
+  .chips--active:not(.chips--disabled) & {
+    color: #4653e5;
+  }
+
+  .chips:hover:not(.chips--disabled) & {
+    color: #4653e5;
+  }
+}
+
+.chips--disabled {
+  border-color: $palette-neutral-200;
+  color: $palette-neutral-700;
+}

web-frontend/modules/core/components/Chips.vue

@@ -0,0 +1,33 @@
+<template>
+  <button
+    class="chips"
+    :class="{ 'chips--active': active, 'chips--disabled': disabled }"
+    v-on="$listeners"
+  >
+    <i v-if="icon" class="chips__icon" :class="icon" />
+    <slot />
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'Chips',
+  props: {
+    active: {
+      required: false,
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      required: false,
+      type: Boolean,
+      default: false,
+    },
+    icon: {
+      required: false,
+      type: String,
+      default: '',
+    },
+  },
+}
+</script>

web-frontend/stories/Chips.stories.mdx

@@ -0,0 +1,83 @@
+import { Meta, Story, Props, Canvas } from '@storybook/addon-docs/blocks'
+import { config, withDesign } from 'storybook-addon-designs'
+
+import Chips from '@baserow/modules/core/components/Chips'
+
+<Meta
+    title="Baserow/Chips"
+    component={Chips}
+    parameters={{
+        backgrounds: {
+            default: 'white',
+            values: [
+                { name: 'white', value: '#ffffff' },
+                { name: 'light', value: '#eeeeee' },
+                { name: 'dark', value: '#222222' },
+            ],
+        },
+    }}
+    decorators={[withDesign]}
+    argTypes={{
+        default: {
+            defaultValue: 'Label',
+        },
+        active: {
+            control: {
+                type: 'boolean',
+                options: [true, false],
+            },
+            defaultValue: false,
+        },
+        disabled: {
+            control: {
+                type: 'boolean',
+                options: [true, false],
+            },
+            defaultValue: false,
+        },
+        icon: {
+            control: {
+                type: 'text',
+            },
+            defaultValue: '',
+        },
+    }}
+/>
+
+# Chips
+
+export const Template = (args, { argTypes }) => ({
+    components: { Chips },
+    props: Object.keys(argTypes),
+    template: `
+    <Chips v-bind="$props">
+        <template v-slot>${args.default}</template>
+    </Chips>
+    `,
+})
+
+export const designConfig = {
+    type: 'figma',
+    url: 'https://www.figma.com/file/W7R2rQW7ohsZMeHRfEcPFW/Design-Library?node-id=453:3515&mode=dev',
+}
+
+<Canvas>
+    <Story
+        name="Chips"
+        parameters={{
+            design: config(designConfig),
+        }}
+    >
+        {Template.bind({})}
+    </Story>
+</Canvas>
+
+## Example
+
+```javascript
+<Chips>Lorem ipsum dolor sit amet</Chips>
+```
+
+## Props
+
+<Props of={Chips} />

web-frontend/test/unit/core/components/chips.spec.js

@@ -0,0 +1,39 @@
+import { shallowMount } from '@vue/test-utils'
+import Chips from '@baserow/modules/core/components/Chips'
+
+describe('Chips.vue', () => {
+  it('renders correctly when active', () => {
+    const wrapper = shallowMount(Chips, {
+      propsData: {
+        active: true,
+      },
+    })
+
+    expect(wrapper.classes()).toContain('chips--active')
+  })
+
+  it('renders correctly when not active', () => {
+    const wrapper = shallowMount(Chips, {
+      propsData: {
+        active: false,
+      },
+    })
+
+    expect(wrapper.classes()).not.toContain('chips--active')
+  })
+  it('renders chips text in slot', () => {
+    const text = 'Click me'
+    const wrapper = shallowMount(Chips, {
+      slots: {
+        default: text,
+      },
+    })
+    expect(wrapper.find('button').text()).toMatch(text)
+  })
+
+  it('emits click event when clicked', () => {
+    const wrapper = shallowMount(Chips)
+    wrapper.vm.$emit('click')
+    expect(wrapper.emitted().click).toBeTruthy()
+  })
+})