@hhgtech/hhg-components 1.19.0-beta-5 → 1.19.0-beta-6

package/raw/src/components/molecules/dropdownSearch/index.styled.tsx

@@ -0,0 +1,157 @@
+import { ThemeProps } from 'misc/theme'
+import styled from 'styled-components'
+
+import { PureInput } from '../../atoms/pureInput/index'
+
+export const StyledSearchIcon = styled.img`
+  width: 24px;
+  height: 24px;
+`
+
+export const StyledDropdownSearch = styled.div`
+  position: relative;
+  border: 1px solid ${(props: ThemeProps) => props.theme.colors.gray200};
+  background-position: right 16px center;
+  border-radius: 6px;
+  background-color: ${(props: ThemeProps) => props.theme.colors.white};
+
+  &[data-has-icons='true'] {
+    border: none;
+
+    img,
+    svg {
+      display: inline-block;
+      max-width: 16px;
+    }
+
+    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;
+      z-index: 0;
+      padding: 8px 0px;
+    }
+
+    &[data-is-open='false'] {
+      > div::after {
+        top: 50%;
+        right: 0;
+        width: 52px;
+        height: 36px;
+        background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.99968 11.7259L6.81551 8.54171C6.47051 8.19671 5.91051 8.19671 5.56551 8.54171C5.22051 8.88671 5.22051 9.44671 5.56551 9.79171L9.41051 13.6367C9.73635 13.9625 10.2638 13.9625 10.5888 13.6367L14.4338 9.79171C14.7788 9.44671 14.7788 8.88671 14.4338 8.54171C14.0888 8.19671 13.5288 8.19671 13.1838 8.54171L9.99968 11.7259Z' fill='%23595959'/%3E%3C/svg%3E%0A");
+        background-position: center;
+        background-repeat: no-repeat;
+        content: '';
+        transform: translateY(-50%);
+      }
+    }
+    &[data-is-open='true'] {
+      > div::after {
+        top: 50%;
+        right: 0;
+        width: 52px;
+        height: 36px;
+        background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.66675 10.0001C1.66675 5.39175 5.39175 1.66675 10.0001 1.66675C14.6084 1.66675 18.3334 5.39175 18.3334 10.0001C18.3334 14.6084 14.6084 18.3334 10.0001 18.3334C5.39175 18.3334 1.66675 14.6084 1.66675 10.0001ZM12.4084 13.5834C12.7334 13.9084 13.2584 13.9084 13.5834 13.5834C13.9001 13.2584 13.9001 12.7251 13.5834 12.4084L11.1751 10.0001L13.5834 7.59175C13.9084 7.26675 13.9084 6.74175 13.5834 6.41675C13.2584 6.09175 12.7334 6.09175 12.4084 6.41675L10.0001 8.82508L7.59175 6.41675C7.26675 6.09175 6.74175 6.09175 6.41675 6.41675C6.2607 6.57244 6.17301 6.78382 6.17301 7.00425C6.17301 7.22468 6.2607 7.43606 6.41675 7.59175L8.82508 10.0001L6.41675 12.4084C6.2607 12.5641 6.17301 12.7755 6.17301 12.9959C6.17301 13.2163 6.2607 13.4277 6.41675 13.5834C6.74175 13.9084 7.26675 13.9084 7.59175 13.5834L10.0001 11.1751L12.4084 13.5834Z' fill='%238C8C8C'/%3E%3C/svg%3E%0A");
+        background-position: center;
+        background-repeat: no-repeat;
+        content: '';
+        transform: translateY(-50%);
+      }
+    }
+
+    &:disabled {
+      > div::after {
+        display: none;
+      }
+    }
+  }
+
+  &:hover {
+    box-shadow: 0 0 2px 2px ${(props: ThemeProps) => props.theme.colors.blue200};
+  }
+`
+
+export const StyledDropdownName = styled.div`
+  cursor: pointer;
+  &[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;
+  z-index: 100;
+  top: 100%;
+  right: 0;
+  left: 0;
+  display: block;
+  max-height: 500px;
+  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;
+  overflow-y: auto;
+
+  &[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;
+  width: 100%;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 6px 18px 6px 16px;
+  &:hover,
+  :active {
+    background: ${(props: ThemeProps) => props.theme.colors.gray100};
+  }
+  .dropdown-label {
+    line-height: 20px;
+  }
+`
+
+export const StyledIcon = styled.div`
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+`
+
+export const StyledPureInput = styled(PureInput)`
+  input {
+    padding: 12px 36px 12px 48px;
+  }
+
+  &[data-has-display-icon] input {
+    padding: 12px 36px 12px 48px;
+  }
+  .displayIcon {
+    img {
+      width: 24px;
+      max-width: unset;
+      height: 24px;
+    }
+  }
+`

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

@@ -0,0 +1,169 @@
+import React, { useMemo, useRef, useState } from 'react'
+
+import { CSSProperties } from 'styled-components'
+
+import { SearchOption } from '../../../hooks/useDropdownSearch'
+import {
+  StyledDropdownSearch,
+  StyledDropdownName,
+  StyledDropdownList,
+  StyledDropdownOption,
+  StyledIcon,
+  StyledPureInput,
+} from './index.styled'
+
+export type Option = {
+  label: React.ReactNode
+  value: string | number
+  icon?: JSX.Element | string
+}
+
+export type Props = {
+  id: string
+  placeholder: string
+  options: Array<any>
+  placeholderIcon?: JSX.Element
+  onChange: (o: any, value: string | number) => void
+  value?: any
+  className?: string
+  style?: CSSProperties
+  disabled?: boolean
+  dropdownLabelTrackingAttributes?: {
+    [key: string]: string
+  }
+  onSearchChange?: (keyword: string) => void
+  useSearchFilter?: boolean
+}
+
+const DropdownSearch = ({
+  className,
+  style,
+  id,
+  placeholder,
+  placeholderIcon,
+  onChange,
+  value,
+  options,
+  dropdownLabelTrackingAttributes,
+  disabled,
+  onSearchChange,
+  useSearchFilter = true,
+}: Props) => {
+  const [search, setSearch] = useState('')
+  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false)
+
+  const showDropdown = (e: any) => {
+    if (e.target?.getAttribute?.('data-is-open') === 'true') {
+      setSearch('')
+      onChange(null, '')
+    }
+    !disabled && setIsDropdownOpen(!isDropdownOpen)
+  }
+
+  const clearSearch = (e: any) => {
+    if (e.target?.getAttribute?.('data-is-open') === 'true') {
+      setSearch('')
+      onChange(null, '')
+      onSearchChange?.('')
+    }
+    !disabled && setIsDropdownOpen(true)
+  }
+
+  const wrapperRef = useRef(null)
+
+  const hasIcons = true
+
+  function handleClickOutside(event: React.FocusEvent<HTMLElement>) {
+    if (
+      !event.relatedTarget ||
+      ('id' in event.relatedTarget &&
+        (event.relatedTarget as { id: string }).id !== id)
+    ) {
+      setIsDropdownOpen(false)
+    }
+  }
+
+  const handleOnChange = (v: string) => {
+    onChange(null, v)
+    setSearch(v)
+    onSearchChange?.(search)
+  }
+
+  const filterOptions = (fullOptions: Array<SearchOption>, filter: string) => {
+    const filterText = `${filter}`.toLowerCase()
+    return fullOptions.filter(
+      (option) =>
+        `${option.value}`.toLowerCase().includes(filterText) ||
+        `${option.label}`.toLowerCase().includes(filterText),
+    )
+  }
+
+  const searchFilterOptions = useMemo(() => {
+    if (search && useSearchFilter) {
+      return filterOptions(options, search)
+    } else {
+      if (value) {
+        return options.filter((option) => option.value !== value.value)
+      } else {
+        return options
+      }
+    }
+  }, [search, options, value])
+
+  return (
+    <StyledDropdownSearch
+      className={className}
+      data-dropdown-open={isDropdownOpen || undefined}
+      id={id}
+      data-has-icons={true}
+      data-is-open={isDropdownOpen}
+      ref={wrapperRef}
+      onBlur={handleClickOutside}
+      style={style}
+      tabIndex={0}
+    >
+      <StyledDropdownName
+        onClick={clearSearch}
+        data-is-open={isDropdownOpen}
+        {...dropdownLabelTrackingAttributes}
+      >
+        <StyledPureInput
+          name="dropdown-input"
+          autoFocus={false}
+          displayIcon={placeholderIcon}
+          size="md"
+          onChange={handleOnChange}
+          placeholder={placeholder}
+          value={value && value.value ? `${value.label}` : search}
+          isDisabled={disabled}
+          {...dropdownLabelTrackingAttributes}
+        />
+      </StyledDropdownName>
+
+      {isDropdownOpen && searchFilterOptions.length > 0 && (
+        <StyledDropdownList
+          onClick={showDropdown}
+          className="dropdown-option"
+          data-has-icons={hasIcons}
+        >
+          {searchFilterOptions.map((option) => (
+            <StyledDropdownOption
+              key={`${id}-${option.value}`}
+              data-selected={
+                (value && value.value === option.value) || undefined
+              }
+              onClick={() => {
+                !disabled && onChange?.(option, option.value)
+              }}
+            >
+              {option.icon && <StyledIcon>{option.icon}</StyledIcon>}
+              <div className="dropdown-label">{option.label}</div>
+            </StyledDropdownOption>
+          ))}
+        </StyledDropdownList>
+      )}
+    </StyledDropdownSearch>
+  )
+}
+
+export { DropdownSearch }

package/raw/src/components/molecules/dropdownSearch/search.svg

@@ -0,0 +1,4 @@
+<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" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20 20.957L16 16.957" stroke="#8C8C8C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/raw/src/components/molecules/floatButtonGroup/add-period.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 12V6C21 4.9 20.1 4 19 4H18V2H16V4H8V2H6V4H5C3.9 4 3 4.9 3 6V20C3 21.1 3.9 22 5 22H12V20H5V10H19V12H21ZM19 8H5V6H19V8Z" fill="#2685F1"/>
+<mask id="path-2-outside-1_6558_3872" maskUnits="userSpaceOnUse" x="12.1936" y="11.1832" width="10" height="13" fill="black">
+<rect fill="white" x="12.1936" y="11.1832" width="10" height="13"/>
+<path d="M18.4083 13.4033C18.1421 13.0275 17.9072 12.6817 17.6879 12.3661C17.6566 12.321 17.6096 12.2759 17.5627 12.2458C17.3747 12.1255 17.1242 12.1857 16.9989 12.3661C16.7953 12.6817 16.5604 13.0124 16.2786 13.4033C15.0414 15.147 13.1936 17.7777 13.1936 19.2809C13.1936 20.3782 13.6634 21.3704 14.4151 22.0919C15.1667 22.7984 16.2003 23.2494 17.3434 23.2494C18.4866 23.2494 19.5201 22.7984 20.2718 22.0769C21.0234 21.3553 21.4932 20.3632 21.4932 19.2659C21.4932 17.7626 19.6454 15.147 18.4083 13.4033ZM19.708 21.5357C19.0973 22.122 18.2673 22.4677 17.3434 22.4677C16.4195 22.4677 15.5895 22.107 14.9788 21.5357C14.3681 20.9495 14.0079 20.1528 14.0079 19.2659C14.0079 18.0031 15.7775 15.4928 16.9519 13.8242C17.0929 13.6288 17.2181 13.4333 17.3434 13.268C17.4687 13.4333 17.594 13.6288 17.7349 13.8242C18.9094 15.5078 20.6789 18.0031 20.6789 19.2659C20.6789 20.1528 20.3031 20.9495 19.708 21.5357Z"/>
+</mask>
+<path d="M18.4083 13.4033C18.1421 13.0275 17.9072 12.6817 17.6879 12.3661C17.6566 12.321 17.6096 12.2759 17.5627 12.2458C17.3747 12.1255 17.1242 12.1857 16.9989 12.3661C16.7953 12.6817 16.5604 13.0124 16.2786 13.4033C15.0414 15.147 13.1936 17.7777 13.1936 19.2809C13.1936 20.3782 13.6634 21.3704 14.4151 22.0919C15.1667 22.7984 16.2003 23.2494 17.3434 23.2494C18.4866 23.2494 19.5201 22.7984 20.2718 22.0769C21.0234 21.3553 21.4932 20.3632 21.4932 19.2659C21.4932 17.7626 19.6454 15.147 18.4083 13.4033ZM19.708 21.5357C19.0973 22.122 18.2673 22.4677 17.3434 22.4677C16.4195 22.4677 15.5895 22.107 14.9788 21.5357C14.3681 20.9495 14.0079 20.1528 14.0079 19.2659C14.0079 18.0031 15.7775 15.4928 16.9519 13.8242C17.0929 13.6288 17.2181 13.4333 17.3434 13.268C17.4687 13.4333 17.594 13.6288 17.7349 13.8242C18.9094 15.5078 20.6789 18.0031 20.6789 19.2659C20.6789 20.1528 20.3031 20.9495 19.708 21.5357Z" fill="#2685F1"/>
+<path d="M18.4083 13.4033L18.0003 13.6923L18.0005 13.6926L18.4083 13.4033ZM17.6879 12.3661L17.2773 12.6513L17.6879 12.3661ZM16.9989 12.3661L16.5882 12.0808L16.5833 12.0879L16.5787 12.0951L16.9989 12.3661ZM16.2786 13.4033L15.873 13.1108L15.8708 13.114L16.2786 13.4033ZM14.4151 22.0919L14.0688 22.4526L14.0726 22.4562L14.4151 22.0919ZM21.4932 19.2659H20.9932H21.4932ZM19.708 21.5357L20.0543 21.8965L20.0589 21.8919L19.708 21.5357ZM14.9788 21.5357L14.6325 21.8965L14.6373 21.9009L14.9788 21.5357ZM16.9519 13.8242L16.5464 13.5317L16.5431 13.5364L16.9519 13.8242ZM17.3434 13.268L17.742 12.966L17.3434 12.44L16.9449 12.966L17.3434 13.268ZM17.7349 13.8242L18.145 13.5381L18.1404 13.5317L17.7349 13.8242ZM20.6789 19.2659H21.1789H20.6789ZM18.8163 13.1143C18.5516 12.7406 18.3218 12.4022 18.0986 12.0808L17.2773 12.6513C17.4925 12.9612 17.7325 13.3143 18.0003 13.6923L18.8163 13.1143ZM18.0986 12.0808C18.0291 11.9807 17.9338 11.8897 17.8322 11.8246L17.2931 12.6669C17.2892 12.6644 17.2869 12.6627 17.2861 12.662C17.2853 12.6613 17.285 12.661 17.2849 12.661C17.2849 12.661 17.2844 12.6605 17.2835 12.6594C17.2826 12.6584 17.2804 12.6558 17.2773 12.6513L18.0986 12.0808ZM17.8322 11.8246C17.4018 11.5493 16.8558 11.6956 16.5882 12.0808L17.4096 12.6513C17.3978 12.6682 17.3818 12.6777 17.3654 12.6813C17.3475 12.6853 17.3196 12.6838 17.2931 12.6669L17.8322 11.8246ZM16.5787 12.0951C16.3829 12.3987 16.1549 12.7199 15.873 13.1108L16.6841 13.6958C16.966 13.3049 17.2077 12.9648 17.4191 12.637L16.5787 12.0951ZM15.8708 13.114C15.2537 13.9837 14.4694 15.0952 13.8396 16.1815C13.5245 16.7251 13.2419 17.2727 13.0369 17.7891C12.8346 18.2989 12.6936 18.8134 12.6936 19.2809H13.6936C13.6936 18.9968 13.7836 18.6187 13.9664 18.158C14.1466 17.7039 14.4033 17.203 14.7047 16.6831C15.3081 15.6423 16.0663 14.5666 16.6864 13.6926L15.8708 13.114ZM12.6936 19.2809C12.6936 20.5254 13.2272 21.6447 14.0688 22.4526L14.7613 21.7312C14.0996 21.096 13.6936 20.2311 13.6936 19.2809H12.6936ZM14.0726 22.4562C14.9126 23.2457 16.067 23.7494 17.3434 23.7494V22.7494C16.3335 22.7494 15.4209 22.3511 14.7575 21.7276L14.0726 22.4562ZM17.3434 23.7494C18.6202 23.7494 19.7766 23.2453 20.618 22.4376L19.9255 21.7162C19.2636 22.3516 18.3529 22.7494 17.3434 22.7494V23.7494ZM20.618 22.4376C21.4597 21.6297 21.9932 20.5104 21.9932 19.2659H20.9932C20.9932 20.216 20.5872 21.081 19.9255 21.7162L20.618 22.4376ZM21.9932 19.2659C21.9932 18.7982 21.8522 18.2846 21.6497 17.776C21.4447 17.2608 21.162 16.715 20.8468 16.1733C20.2171 15.0909 19.4327 13.9831 18.8161 13.114L18.0005 13.6926C18.621 14.5672 19.3791 15.6391 19.9825 16.6762C20.2839 17.1943 20.5405 17.6932 20.7206 18.1458C20.9033 18.6049 20.9932 18.9819 20.9932 19.2659H21.9932ZM19.3618 21.175C18.8452 21.6709 18.1397 21.9677 17.3434 21.9677V22.9677C18.395 22.9677 19.3494 22.5731 20.0543 21.8964L19.3618 21.175ZM17.3434 21.9677C16.5524 21.9677 15.843 21.6594 15.3204 21.1706L14.6373 21.9009C15.3361 22.5545 16.2866 22.9677 17.3434 22.9677V21.9677ZM15.3251 21.175C14.8091 20.6797 14.5079 20.0119 14.5079 19.2659H13.5079C13.5079 20.2937 13.9271 21.2192 14.6326 21.8964L15.3251 21.175ZM14.5079 19.2659C14.5079 19.0506 14.5877 18.7307 14.7638 18.311C14.9357 17.9015 15.181 17.439 15.4696 16.9522C16.047 15.978 16.7713 14.9495 17.3608 14.112L16.5431 13.5364C15.9581 14.3674 15.2103 15.4284 14.6094 16.4423C14.3088 16.9494 14.0383 17.4556 13.8417 17.924C13.6493 18.3824 13.5079 18.8498 13.5079 19.2659H14.5079ZM17.3575 14.1167C17.5289 13.8789 17.6128 13.7404 17.742 13.5699L16.9449 12.966C16.8235 13.1262 16.6568 13.3786 16.5464 13.5317L17.3575 14.1167ZM16.9449 13.5699C17.0741 13.7404 17.1579 13.8789 17.3294 14.1167L18.1404 13.5317C18.03 13.3786 17.8633 13.1262 17.742 12.966L16.9449 13.5699ZM17.3248 14.1102C17.9156 14.9571 18.6396 15.9852 19.2174 16.9582C19.5061 17.4442 19.7514 17.9052 19.9232 18.3136C20.0993 18.7319 20.1789 19.0508 20.1789 19.2659H21.1789C21.1789 18.8496 21.0374 18.383 20.8449 17.9257C20.6483 17.4584 20.3778 16.9536 20.0773 16.4475C19.4767 15.4363 18.7287 14.3749 18.145 13.5381L17.3248 14.1102ZM20.1789 19.2659C20.1789 20.0066 19.8659 20.6783 19.3571 21.1795L20.0589 21.8919C20.7403 21.2207 21.1789 20.299 21.1789 19.2659H20.1789Z" fill="#2685F1" mask="url(#path-2-outside-1_6558_3872)"/>
+</svg>

package/raw/src/components/molecules/floatButtonGroup/index.stories.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+
+import { Story } from '@storybook/react/types-6-0'
+
+import { FloatButtonGroup, FloatButtonGroupType } from './'
+// @ts-ignore
+import AddPeriodIcon from './add-period.svg'
+
+export default {
+  component: FloatButtonGroup,
+  title: 'Molecules/FloatButtonGroup',
+}
+
+const Template: Story<FloatButtonGroupType> = (args: FloatButtonGroupType) => (
+  <FloatButtonGroup {...args} />
+)
+
+const items: FloatButtonGroupType['items'] = [
+  {
+    label: 'Add period',
+    icon: <img src={AddPeriodIcon} />,
+    onClick: () => console.log('clicked Add period'),
+  },
+  {
+    label: 'Add weight',
+    icon: <img src={AddPeriodIcon} />,
+    onClick: () => console.log('clicked Add weight'),
+  },
+  {
+    label: 'Add -',
+    icon: <img src={AddPeriodIcon} />,
+    onClick: () => console.log('clicked Add -'),
+  },
+]
+
+export const Normal = Template.bind({})
+export const AnimationScale = Template.bind({})
+export const AnimationSlide = Template.bind({})
+export const AnimationZoom = Template.bind({})
+
+export const KeepOpenAfterClickButton = Template.bind({})
+export const DisableBackdropClick = Template.bind({})
+
+Normal.args = {
+  items,
+}
+
+AnimationScale.args = {
+  items,
+  animationType: 'scale',
+}
+
+AnimationSlide.args = {
+  items: items,
+  animationType: 'slide',
+}
+
+AnimationZoom.args = {
+  items,
+  animationType: 'zoom',
+}
+
+KeepOpenAfterClickButton.args = {
+  items: items.map((i) => ({ ...i, keepMenuOnClick: true })),
+  closeAfterClickButton: false,
+}
+
+DisableBackdropClick.args = {
+  items,
+  closeAfterClickButton: false,
+  disableBackdropClick: true,
+}