wip

pro/src/ui-kit/MultiSelect/MultiSelect.module.scss

@@ -0,0 +1,149 @@
+@use "styles/mixins/_fonts.scss" as fonts;
+@use "styles/mixins/fonts-design-system.scss" as fonts-design-system;
+@use "styles/mixins/_rem.scss" as rem;
+@use "styles/mixins/_a11y.scss" as a11y;
+@use "styles/mixins/_size.scss" as size;
+
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 400px;
+  position: relative;
+}
+
+.legend {
+  // @include fonts-design-system.body;
+  @include fonts.body;
+
+  color: var(--color-black);
+  margin-bottom: 8px;
+}
+
+.trigger {
+  @include fonts.body;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  background-color: var(--color-white);
+  border: 1px solid var(--color-grey-dark);
+  border-radius: 10px;
+  width: 100%;
+  cursor: pointer;
+
+  &:disabled {
+    background-color: var(--color-grey-light);
+    border: none;
+    color: var(--color-black);
+  }
+
+  &:hover {
+    background: var(--color-grey-light);
+  }
+
+  &:focus {
+    border: 1px solid var(--color-black);
+  }
+
+  &:focus-visible {
+    outline: rem.torem(1px) solid var(--color-input-text-color);
+    outline-offset: rem.torem(2px);
+    border-radius: rem.torem(8px);
+    border: 1px solid var(--color-grey-dark);
+  }
+
+  &-selected {
+    border: 2px solid var(--color-black);
+  }
+}
+
+.trigger-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  max-width: 500px;
+}
+
+.trigger-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.badge {
+  // @include fonts-design-system.body-semi-bold-xs;
+  @include fonts.caption;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  background-color: var(--color-primary);
+  color: var(--color-white);
+  border-radius: 50%;
+}
+
+.chevron {
+  width: 16px;
+  height: 16px;
+  color: var(--color-black);
+}
+
+.chevron-open {
+  transform: rotate(180deg);
+}
+
+.item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  font-size: 14px;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.checkbox {
+  padding-top: rem.torem(16px);
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.panel {
+  position: absolute;
+  background-color: var(--color-white);
+  left: 0;
+  right: 0;
+  top: rem.torem(48px);
+  box-shadow: 0 rem.torem(3px) rem.torem(4px) var(--color-medium-shadow);
+  padding: rem.torem(24px);
+}
+
+.search-example {
+  // @include fonts-design-system.body-semi-bold-xs;
+  @include fonts.caption;
+
+  display: block;
+  min-height: rem.torem(16px);
+  color: var(--color-grey-dark);
+  padding-top: 8px;
+  padding-bottom: 24px;
+}
+
+.visually-hidden {
+  @include a11y.visually-hidden;
+}
+
+.separator {
+  height: rem.torem(1px);
+  background: var(--color-grey-medium);
+  margin-top: rem.torem(12px);
+}

pro/src/ui-kit/MultiSelect/MultiSelect.spec.tsx

@@ -0,0 +1,29 @@
+import { screen } from '@testing-library/react'
+import { axe } from 'vitest-axe'
+
+import {
+  renderWithProviders,
+  RenderWithProvidersOptions,
+} from 'commons/utils/renderWithProviders'
+
+import { MultiSelect } from './MultiSelect'
+
+const renderMultiSelect = (options?: RenderWithProvidersOptions) => {
+  return renderWithProviders(<MultiSelect />, { ...options })
+}
+
+describe('<MultiSelect />', () => {
+  it('should render correctly', async () => {
+    renderMultiSelect()
+
+    expect(
+      await screen.findByRole('heading', { name: /MultiSelect/ })
+    ).toBeInTheDocument()
+  })
+
+  it('should not have accessibility violations', async () => {
+    const { container } = renderMultiSelect()
+
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})

pro/src/ui-kit/MultiSelect/MultiSelect.stories.tsx

@@ -0,0 +1,59 @@
+import { StoryObj } from '@storybook/react'
+import { withRouter } from 'storybook-addon-remix-react-router'
+
+import { MultiSelect } from './MultiSelect'
+
+export default {
+  title: 'ui-kit/MultiSelect',
+  decorators: [withRouter],
+  component: MultiSelect,
+  parameters: {
+    docs: {
+      story: {
+        inline: false,
+        iframeHeight: 380,
+      },
+    },
+  },
+}
+
+const defaultOptions = [
+  { id: '1', label: '78 - Yvelines' },
+  { id: '2', label: '75 - Paris' },
+  { id: '3', label: '44 - Nantes' },
+  { id: '4', label: '76 - Rouen' },
+  { id: '5', label: '77 - Seine et Marne' },
+]
+
+const defaultProps = {
+  options: defaultOptions,
+  legend: 'Département',
+  label: 'Selectionner un département',
+}
+
+export const Default: StoryObj<typeof MultiSelect> = {
+  args: {
+    ...defaultProps,
+  },
+}
+
+export const WithDefaultOptions: StoryObj<typeof MultiSelect> = {
+  args: {
+    ...defaultProps,
+    defaultOptions: [
+      { id: '2', label: '75 - Paris' },
+      { id: '3', label: '44 - Nantes' },
+    ],
+  },
+}
+
+export const WithSearchInput: StoryObj<typeof MultiSelect> = {
+  args: {
+    ...defaultProps,
+    hasSearch: true,
+    searchExample: 'Ex : 44 - Nantes',
+    searchLabel: 'Rechercher des départements',
+    legend: 'Départements',
+    label: 'Selectionner des départements',
+  },
+}