@hhgtech/hhg-components 1.19.0-beta-7 → 1.19.0

package/src/components/molecules/dropdown/index.stories.tsx

@@ -1,158 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { Dropdown, Props, Option } from './index'
-
-export default {
-  component: Dropdown,
-  title: 'Molecules/Dropdown',
-}
-
-const Template: Story<Props> = (args) => <Dropdown {...args} />
-
-export const Normal = Template.bind({})
-
-Normal.args = {
-  id: 'dropdown1',
-  placeholder: 'Dropdown',
-  value: undefined,
-  options: [
-    {
-      label: 'None',
-      value: '1',
-      icon: <img src="//unsplash.it/16" />,
-    },
-    {
-      label: 'Second point',
-      value: '2',
-      icon: <img src="//unsplash.it/16" />,
-    },
-    {
-      label: 'Third point',
-      value: '3',
-      icon: <img src="//unsplash.it/16" />,
-    },
-  ],
-}
-export const WithPlaceholderIcon = Template.bind({})
-
-WithPlaceholderIcon.args = {
-  id: 'dropdown1',
-  placeholder: 'Dropdown',
-  placeholderIcon: <img src="//unsplash.it/16" />,
-  value: undefined,
-  options: [
-    {
-      label: 'None',
-      value: '1',
-      icon: <img src="//unsplash.it/16" />,
-    },
-    {
-      label: 'Second point',
-      value: '2',
-      icon: <img src="//unsplash.it/16" />,
-    },
-    {
-      label: 'Third point',
-      value: '3',
-      icon: <img src="//unsplash.it/16" />,
-    },
-  ],
-}
-
-export const GroupedWithLabel = Template.bind({})
-
-GroupedWithLabel.args = {
-  id: 'dropdown1',
-  placeholder: 'Dropdown',
-  value: undefined,
-  options: [
-    {
-      label: 'None',
-      value: '1',
-      icon: <img src="//unsplash.it/16" />,
-    },
-    {
-      label: 'Second point',
-      value: '2',
-      icon: <img src="//unsplash.it/16" />,
-    },
-    {
-      label: 'Third point',
-      value: '3',
-      icon: <img src="//unsplash.it/16" />,
-    },
-  ],
-  groupedWithLabel: 'label',
-}
-
-const nativeSelectOptions: Option[] = [
-  {
-    label: 'None',
-    value: '1',
-  },
-  {
-    label: 'Second point',
-    value: '2',
-  },
-  {
-    label: 'Third point',
-    value: '3',
-  },
-]
-
-export const NativeSelect = Template.bind({})
-
-NativeSelect.args = {
-  id: 'dropdown1',
-  placeholder: 'Dropdown',
-  value: undefined,
-  isNativeSelect: true,
-  options: nativeSelectOptions,
-}
-
-export const NativeSelectWithValue = Template.bind({})
-
-NativeSelectWithValue.args = {
-  id: 'dropdown1',
-  placeholder: 'Dropdown',
-  isNativeSelect: true,
-  options: nativeSelectOptions,
-  value: nativeSelectOptions[1],
-}
-
-export const NativeSelectDisabled = Template.bind({})
-
-NativeSelectDisabled.args = {
-  id: 'dropdown1',
-  placeholder: 'Dropdown',
-  isNativeSelect: true,
-  options: nativeSelectOptions,
-  value: nativeSelectOptions[1],
-  disabled: true,
-}
-
-export const WithDisabled = Template.bind({})
-
-WithDisabled.args = {
-  id: 'dropdown1',
-  placeholder: 'Dropdown',
-  value: undefined,
-  options: [
-    {
-      label: 'None',
-      value: '1',
-      disabled: true,
-    },
-    {
-      label: 'Second point',
-      value: '2',
-    },
-    {
-      label: 'Third point',
-      value: '3',
-      disabled: true,
-    },
-  ],
-}

package/src/components/molecules/dropdown/index.styled.tsx

@@ -1,149 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-export const StyledDropdown = styled.div`
-  --dropdown-padding: 12px 18px 12px 16px;
-  position: relative;
-  box-sizing: border-box;
-  border: 1px solid ${(props: ThemeProps) => props.theme.colors.gray200};
-  background: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23595959' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")
-    no-repeat;
-  background-position: right 16px center;
-  border-radius: 6px;
-
-  &[data-disabled='true'],
-  :disabled {
-    background-color: #f2f2f2;
-    cursor: not-allowed;
-  }
-
-  &[data-size='sm'] {
-    font-size: 13px;
-    line-height: 20px;
-  }
-  &[data-size='md'] {
-    font-size: 14px;
-    line-height: 21px;
-  }
-  &[data-size='lg'] {
-    font-size: 16px;
-    line-height: 24px;
-  }
-
-  &[data-has-icons='true'] {
-    border: none;
-    background: ${(props: ThemeProps) => props.theme.colors.gray100};
-
-    img,
-    svg {
-      display: inline-block;
-      max-width: 16px;
-      margin-right: 6px;
-    }
-
-    span {
-      display: inline-block;
-      vertical-align: middle;
-    }
-
-    &:hover {
-      box-shadow: none;
-    }
-    > div {
-      position: relative;
-      display: flex;
-      width: 100%;
-      box-sizing: border-box;
-      align-items: center;
-    }
-    > div::after {
-      position: absolute;
-      top: 50%;
-      right: 12px;
-      width: 10px;
-      height: 8px;
-      background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23595959' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-      background-repeat: no-repeat;
-      content: '';
-      transform: translateY(-50%);
-    }
-  }
-
-  &:hover {
-    box-shadow: 0 0 2px 2px ${(props: ThemeProps) => props.theme.colors.blue200};
-  }
-
-  &[data-is-native='true'] {
-    padding: var(--dropdown-padding);
-    line-height: 24px;
-
-    &:focus {
-      box-shadow: 0px 0px 2px 2px
-        ${(props: ThemeProps) => props.theme.colors.blue200};
-    }
-  }
-`
-
-export const StyledDropdownName = styled.div`
-  padding: var(--dropdown-padding);
-  cursor: pointer;
-
-  &.with-label {
-    padding-top: 34px;
-    padding-bottom: 12px;
-  }
-  &[data-dropdown-open] {
-    padding: 11px 15px 11px 15px;
-    border: 1px solid ${(props: ThemeProps) => props.theme.colors.primaryBase};
-    border-radius: 6px;
-    box-shadow: 0 0 2px 2px ${(props: ThemeProps) => props.theme.colors.blue200};
-  }
-`
-
-export const StyledDropdownList = styled.ul`
-  position: absolute;
-  top: 100%;
-  right: 0;
-  left: 0;
-  display: block;
-  margin-top: 4px;
-  background: ${(props: ThemeProps) => props.theme.colors.white};
-  border-radius: 6px;
-  box-shadow: -1px 1px 2px rgba(67, 70, 74, 0.0001),
-    -2px 2px 5px rgba(67, 86, 100, 0.123689);
-  cursor: pointer;
-
-  &[data-has-icons='true'] {
-    border: 1px solid ${(props: ThemeProps) => props.theme.colors.gray200};
-    background: white;
-    box-shadow: none;
-    filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04));
-  }
-`
-
-export const StyledDropdownOption = styled.li`
-  display: flex;
-  padding: 12px 18px 12px 16px;
-  &[data-disabled='true'] {
-    cursor: not-allowed;
-    color: #bfbfbf;
-    & > * {
-      pointer-events: none;
-    }
-  }
-  &:hover,
-  :active {
-    background: ${(props: ThemeProps) => props.theme.colors.gray100};
-  }
-`
-export const StyledIcon = styled.div`
-  max-width: 16px;
-  margin-right: 8px;
-`
-
-export const StyledDropdownLabel = styled.div`
-  position: absolute;
-  top: 12px;
-  left: 16px;
-  pointer-events: none;
-`

package/src/components/molecules/dropdown/index.test.tsx

@@ -1,45 +0,0 @@
-import React from 'react'
-
-import { render, cleanup } from '@testing-library/react'
-import 'jest-styled-components'
-
-import { Dropdown } from '.'
-import MockTheme from '../../../misc/mockTheme'
-
-afterEach(cleanup)
-
-test('it renders', () => {
-  const dropdown = render(
-    <MockTheme>
-      <Dropdown
-        id="dropdown1"
-        placeholder="Dropdown"
-        placeholderIcon={<img src="//unsplash.it/16" />}
-        value={undefined}
-        options={[
-          {
-            label: 'None',
-            value: '1',
-            icon: <img src="//unsplash.it/16" />,
-          },
-          {
-            label: 'Second point',
-            value: '2',
-            icon: <img src="//unsplash.it/16" />,
-          },
-          {
-            label: 'Third point',
-            value: '3',
-            icon: <img src="//unsplash.it/16" />,
-          },
-        ]}
-      />
-    </MockTheme>,
-  )
-
-  const self = dropdown.container.firstChild
-
-  expect(self).toMatchSnapshot()
-
-  expect(self).toContainHTML('<img')
-})

package/src/components/molecules/dropdown/index.tsx

@@ -1,143 +0,0 @@
-import React from 'react'
-
-import { CSSProperties } from 'styled-components'
-
-import {
-  StyledDropdown,
-  StyledDropdownName,
-  StyledDropdownList,
-  StyledDropdownOption,
-  StyledIcon,
-  StyledDropdownLabel,
-} from './index.styled'
-
-export type Option = {
-  label: string | JSX.Element
-  value: string | Date | number
-  icon?: JSX.Element
-  disabled?: boolean
-}
-
-export type Props = {
-  options: Array<Option>
-  placeholder: string
-  disabled?: boolean
-  id: string
-  size?: 'sm' | 'md' | 'lg'
-  placeholderIcon?: JSX.Element
-  onChange?: (o: Option) => void
-  value?: Option
-  className?: string
-  style?: CSSProperties
-  groupedWithLabel?: string | JSX.Element
-  dropdownLabelTrackingAttributes?: {
-    [key: string]: string
-  }
-  isNativeSelect?: boolean
-}
-
-const Dropdown = ({
-  className,
-  value,
-  options,
-  onChange = () => undefined,
-  id,
-  placeholderIcon,
-  placeholder,
-  style,
-  size = 'lg',
-  groupedWithLabel,
-  disabled,
-  dropdownLabelTrackingAttributes = {},
-  isNativeSelect = false,
-}: Props) => {
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false)
-  const showDropdown = () => !disabled && setIsDropdownOpen(!isDropdownOpen)
-
-  if (isNativeSelect) {
-    return (
-      // @ts-ignore
-      <StyledDropdown
-        as="select"
-        data-is-native="true"
-        value={value?.value || undefined}
-        disabled={disabled}
-        onChange={(e: any) => {
-          if (typeof e.target.value === 'string') {
-            const option = options.find((o) => o.value === e.target.value)
-            if (option) {
-              onChange(option)
-            }
-          }
-        }}
-      >
-        {placeholder && (
-          <option value={placeholder} disabled selected>
-            {placeholder}
-          </option>
-        )}
-        {options.map((option) => (
-          <option
-            key={`${id}-${option.value}`}
-            value={option.value as string}
-            disabled={option.disabled ? option.disabled : false}
-          >
-            {option.label}
-          </option>
-        ))}
-      </StyledDropdown>
-    )
-  }
-
-  return (
-    <StyledDropdown
-      className={className}
-      data-dropdown-open={isDropdownOpen || undefined}
-      data-size={size}
-      id={id}
-      data-has-icons={!!placeholderIcon}
-      style={style}
-      onBlur={() => setIsDropdownOpen(false)}
-      tabIndex={0}
-      data-disabled={disabled}
-    >
-      {!!groupedWithLabel && (
-        <StyledDropdownLabel>{groupedWithLabel}</StyledDropdownLabel>
-      )}
-
-      <StyledDropdownName
-        onClick={showDropdown}
-        className={groupedWithLabel && 'with-label'}
-        {...dropdownLabelTrackingAttributes}
-      >
-        {placeholderIcon}{' '}
-        <span>{value && value.value ? value.label : placeholder}</span>
-      </StyledDropdownName>
-
-      {isDropdownOpen && (
-        <StyledDropdownList
-          onClick={showDropdown}
-          data-has-icons={!!placeholderIcon}
-        >
-          {options.map((option) => (
-            <StyledDropdownOption
-              key={`${id}-${option.value}`}
-              data-selected={
-                (value && value.value === option.value) || undefined
-              }
-              onClick={() =>
-                !option.disabled && !disabled && onChange?.(option)
-              }
-              data-disabled={option.disabled ? option.disabled : false}
-            >
-              {option.icon && <StyledIcon>{option.icon}</StyledIcon>}
-              {option.label}
-            </StyledDropdownOption>
-          ))}
-        </StyledDropdownList>
-      )}
-    </StyledDropdown>
-  )
-}
-
-export { Dropdown }

package/src/components/molecules/dropdownSearch/index.stories.tsx

@@ -1,66 +0,0 @@
-import React from 'react'
-
-import { faker } from '@faker-js/faker'
-import { Story } from '@storybook/react/types-6-0'
-
-import { DropdownSearch, Props } from './'
-import { StyledSearchIcon } from './index.styled'
-
-export default {
-  component: DropdownSearch,
-  title: 'Molecules/DropdownSearch',
-}
-
-const Template: Story<Props> = (args: Props) => <DropdownSearch {...args} />
-
-export const Normal = Template.bind({})
-
-let value = null
-const options = [...Array(faker.datatype.number({ min: 3, max: 10 }))].map(
-  () => ({
-    id: faker.datatype.uuid(),
-    name: faker.random.word(),
-    label: faker.random.word(),
-    icon: <img src={faker.image.image(40, 40)} />,
-  }),
-)
-
-function onChange(_value: any) {
-  value = _value
-}
-
-function onSearchChange(_value: any) {
-  value = _value
-}
-
-Normal.args = {
-  placeholder: 'Type to search',
-  placeholderIcon: (
-    <svg
-      width="24"
-      height="25"
-      viewBox="0 0 24 25"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M11 18.957C14.866 18.957 18 15.823 18 11.957C18 8.09104 14.866 4.95703 11 4.95703C7.13401 4.95703 4 8.09104 4 11.957C4 15.823 7.13401 18.957 11 18.957Z"
-        stroke="#8C8C8C"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M20 20.957L16 16.957"
-        stroke="#8C8C8C"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  ),
-  onChange,
-  value,
-  options,
-  onSearchChange,
-}