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

package/raw/components/molecules/categoryCard/index.tsx

@@ -1,51 +0,0 @@
-import React, { ReactElement } from 'react'
-
-import { CSSProperties } from 'styled-components'
-
-import { Text } from '../../atoms/text'
-import { StyledCategoryCard } from './index.styled'
-
-export type Props = {
-  imgBanner: ReactElement
-  label: string
-  href?: string
-  className?: string
-  style?: CSSProperties
-  dataEventCategory?: string
-  dataEventAction?: string
-  dataEventLabel?: string
-}
-
-export const CategoryCard = ({
-  imgBanner,
-  label,
-  className,
-  style,
-  href = '',
-  dataEventCategory,
-  dataEventAction,
-  dataEventLabel,
-}: Props) => {
-  return (
-    <StyledCategoryCard
-      data-event-category={dataEventCategory}
-      data-event-action={dataEventAction}
-      data-event-label={dataEventLabel}
-      className={className}
-      style={style}
-      href={href}
-      onClick={(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-        if (href === '') {
-          e.preventDefault()
-        }
-      }}
-    >
-      <div className="banner">{imgBanner}</div>
-      <div className="content">
-        <Text className="category_name" size="sm" type="bold">
-          {label}
-        </Text>
-      </div>
-    </StyledCategoryCard>
-  )
-}

package/raw/components/molecules/checkboxGroup/__snapshots__/index.test.tsx.snap

@@ -1,214 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`it renders 1`] = `
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  cursor: pointer;
-}
-
-.c1 input {
-  width: 20px;
-  height: 20px;
-  border: solid 1px #737373;
-  border-radius: 2px;
-  cursor: inherit;
-  -webkit-transition: border-color 0.4s,box-shadow 0.4s;
-  transition: border-color 0.4s,box-shadow 0.4s;
-}
-
-.c1 input:hover,
-.c1 input:active {
-  border-color: #2d87f3;
-  box-shadow: 0 0 2px 2px #91caff;
-}
-
-.c1 input:focus-visible {
-  border: 2px solid #2b62cd;
-}
-
-.c1 input:checked {
-  border: 0;
-  background: #2d87f3 url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1L4.125 8L1 4.81819' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat center center;
-}
-
-.c1 label {
-  max-width: 15rem;
-  margin-left: 8px;
-  font-weight: 400;
-  width: calc(100% - 24px);
-  cursor: inherit;
-}
-
-.c1[data-is-rectangle] > input {
-  position: relative;
-  width: unset;
-  height: unset;
-  padding: 5px 12px;
-  border: 1px solid #e4e8ec;
-  border-radius: 32px;
-}
-
-.c1[data-is-rectangle] > input::after {
-  color: #262626;
-  content: attr(data-label-text);
-  font-size: 13px;
-}
-
-.c1[data-is-rectangle] > input:checked {
-  border-color: #e3f2ff;
-}
-
-.c1[data-is-rectangle] > input:checked::after {
-  color: #2d87f3;
-}
-
-.c1[data-is-rectangle] > input:checked {
-  background: #e3f2ff;
-}
-
-.c1[data-disabled] {
-  color: #bfbfbf;
-  cursor: not-allowed;
-}
-
-.c1[data-disabled] input {
-  border-color: #bfbfbf;
-}
-
-.c1[data-disabled] input:hover {
-  border-color: #bfbfbf;
-  box-shadow: none;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c0[data-type='vertical'] {
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c0[data-type='vertical'] div {
-  margin-bottom: 20px;
-}
-
-.c0[data-type='horizontal'] {
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.c0[data-type='horizontal'] div {
-  margin-right: 25px;
-}
-
-.c0[data-type='horizontal'][data-is-rectangle] div {
-  margin-right: 14px;
-}
-
-@media (max-width:767px) {
-  .c1 label {
-    font-size: 14px;
-    line-height: 24px;
-  }
-}
-
-@media (min-width:768px) {
-  .c1 label {
-    font-size: 16px;
-    line-height: 22px;
-  }
-}
-
-<div
-  class="c0"
-  data-type="vertical"
->
-  <div
-    class="c1"
-    data-disabled="true"
-    data-label-text="option 1"
-  >
-    <input
-      checked=""
-      data-label-text="option 1"
-      disabled=""
-      id="checkbox1-1"
-      name="checkbox1"
-      type="checkbox"
-      value="1"
-    />
-    <label
-      for="checkbox1-1"
-    >
-      option 1
-    </label>
-  </div>
-  <div
-    class="c1"
-    data-disabled="true"
-    data-label-text="option 2"
-  >
-    <input
-      data-label-text="option 2"
-      disabled=""
-      id="checkbox1-2"
-      name="checkbox1"
-      type="checkbox"
-      value="2"
-    />
-    <label
-      for="checkbox1-2"
-    >
-      option 2
-    </label>
-  </div>
-  <div
-    class="c1"
-    data-disabled="true"
-    data-label-text="option 3"
-  >
-    <input
-      data-label-text="option 3"
-      disabled=""
-      id="checkbox1-3"
-      name="checkbox1"
-      type="checkbox"
-      value="3"
-    />
-    <label
-      for="checkbox1-3"
-    >
-      option 3
-    </label>
-  </div>
-  <div
-    class="c1"
-    data-disabled="true"
-    data-label-text="option 4"
-  >
-    <input
-      checked=""
-      data-label-text="option 4"
-      disabled=""
-      id="checkbox1-4"
-      name="checkbox1"
-      type="checkbox"
-      value="4"
-    />
-    <label
-      for="checkbox1-4"
-    >
-      option 4
-    </label>
-  </div>
-</div>
-`;

package/raw/components/molecules/checkboxGroup/index.stories.tsx

@@ -1,118 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { Props, CheckboxGroup } from '.'
-
-export default {
-  component: CheckboxGroup,
-  title: 'Molecules/CheckboxGroup',
-}
-
-const Template: Story<Props> = (args) => <CheckboxGroup {...args} />
-
-export const Checked = Template.bind({})
-
-Checked.args = {
-  options: [
-    {
-      label: 'option 1',
-      value: '1',
-    },
-    {
-      label: 'option 2',
-      value: '2',
-    },
-    {
-      label: 'option 3',
-      value: '3',
-    },
-    {
-      label: 'option 4',
-      value: '4',
-    },
-  ],
-  values: ['1'],
-  isDisabled: true,
-  name: 'CheckboxGroup',
-  type: 'vertical',
-}
-
-export const Unchecked = Template.bind({})
-
-Unchecked.args = {
-  options: [
-    {
-      label: 'option 1',
-      value: '1',
-    },
-    {
-      label: 'option 2',
-      value: '2',
-    },
-    {
-      label: 'option 3',
-      value: '3',
-    },
-    {
-      label: 'option 4',
-      value: '4',
-    },
-  ],
-  name: 'CheckboxGroup',
-  type: 'vertical',
-}
-
-export const LongText = Template.bind({})
-
-LongText.args = {
-  options: [
-    {
-      label:
-        'Checkbox label that wraps to multiple lines because it is too long',
-      value: '1',
-    },
-    {
-      label: 'option 2',
-      value: '2',
-    },
-    {
-      label:
-        'Checkbox label that wraps to multiple lines because it is too long',
-      value: '3',
-    },
-    {
-      label: 'option 4',
-      value: '4',
-    },
-  ],
-  name: 'CheckboxGroup',
-  type: 'vertical',
-}
-export const SomeDisabled = Template.bind({})
-
-SomeDisabled.args = {
-  options: [
-    {
-      label: 'Checkbox 1',
-      value: '1',
-    },
-    {
-      label: 'option 2',
-      value: '2',
-      disabled: true,
-    },
-    {
-      label: 'Checkbox 3',
-      value: '3',
-    },
-    {
-      label: 'option 4',
-      value: '4',
-      disabled: true,
-    },
-  ],
-  values: ['1', '4'],
-  name: 'CheckboxGroup',
-  type: 'vertical',
-}

package/raw/components/molecules/checkboxGroup/index.styled.tsx

@@ -1,27 +0,0 @@
-import styled from 'styled-components'
-
-export const StyledCheckboxGroup = styled.div`
-  display: flex;
-
-  &[data-type='vertical'] {
-    flex-direction: column;
-
-    div {
-      margin-bottom: 20px;
-    }
-  }
-
-  &[data-type='horizontal'] {
-    flex-wrap: wrap;
-
-    div {
-      margin-right: 25px;
-    }
-
-    &[data-is-rectangle] {
-      div {
-        margin-right: 14px;
-      }
-    }
-  }
-`

package/raw/components/molecules/checkboxGroup/index.test.tsx

@@ -1,36 +0,0 @@
-import 'jest-styled-components'
-
-import React from 'react'
-
-import { cleanup, render } from '@testing-library/react'
-
-import { CheckboxGroup } from '.'
-import MockTheme from '../../../misc/mockTheme'
-
-afterEach(cleanup)
-
-test('it renders', () => {
-  const dropdown = render(
-    <MockTheme>
-      <CheckboxGroup
-        name="checkbox1"
-        values={['1', '4']}
-        type="vertical"
-        isDisabled={true}
-        options={[
-          { label: 'option 1', value: '1' },
-          { label: 'option 2', value: '2' },
-          { label: 'option 3', value: '3' },
-          { label: 'option 4', value: '4' },
-        ]}
-      />
-    </MockTheme>,
-  )
-
-  const self = dropdown.container.firstChild
-
-  expect(self).toMatchSnapshot()
-  expect(self).toContainHTML('for="checkbox1-1"')
-  expect(self).toContainHTML('<input')
-  expect(self).toHaveAttribute('data-type', 'vertical')
-})

package/raw/components/molecules/checkboxGroup/index.tsx

@@ -1,66 +0,0 @@
-import React from 'react'
-
-import { Checkbox } from '../../atoms/checkbox'
-import { StyledCheckboxGroup } from './index.styled'
-
-export type Props = {
-  type: 'vertical' | 'horizontal'
-  options: Array<{
-    label: string
-    value: string
-    disabled?: boolean
-  }>
-  values?: Array<string>
-  onChanges?: (v: Array<string>) => void
-  name: string
-  className?: string
-  isDisabled?: boolean
-  isRectangle?: boolean
-}
-
-const CheckboxGroup = ({
-  name,
-  values = [],
-  onChanges,
-  options = [],
-  className,
-  type = 'vertical',
-  isDisabled,
-  isRectangle,
-}: Props) => {
-  const onChange = (value: string, checked: boolean) => {
-    const newValues = values.slice()
-    if (checked) {
-      newValues.push(value)
-    } else {
-      const removeIndex = newValues.findIndex((item) => item === value)
-      newValues.splice(removeIndex, 1)
-    }
-    if (onChanges) {
-      onChanges(newValues)
-    }
-  }
-
-  return (
-    <StyledCheckboxGroup
-      className={className}
-      data-type={type}
-      data-is-rectangle={isRectangle || undefined}
-    >
-      {options.map((option, index) => (
-        <Checkbox
-          label={option.label}
-          name={name}
-          key={`${index}-${option.value}`}
-          checked={values.includes(option.value)}
-          value={option.value}
-          isDisabled={isDisabled || option.disabled}
-          onChange={!isDisabled && onChange}
-          isRectangle={isRectangle}
-        />
-      ))}
-    </StyledCheckboxGroup>
-  )
-}
-
-export { CheckboxGroup }

package/raw/components/molecules/cookieAcceptConfirm/__snapshots__/index.test.tsx.snap

@@ -1,152 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`it renders 1`] = `
-.c0 {
-  padding: 16px;
-  width: 375px;
-  word-wrap: break-word;
-  word-break: break-word;
-}
-
-.c0[data-theme='helloSites'] {
-  background: #284a75;
-  box-shadow: 0px 8px 40px rgba(0,0,0,0.1);
-}
-
-.c0[data-theme='marryBaby'] {
-  border: none;
-  background: #e85388;
-  border-radius: 12px 12px 0 0;
-}
-
-.c0[data-is-open='false'] {
-  display: none;
-}
-
-.c0[data-default-position='true'] {
-  position: fixed;
-  z-index: 1000;
-  bottom: 0;
-  right: 0;
-}
-
-.c1 {
-  position: relative;
-  padding-left: 24px;
-  color: #fff;
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 22px;
-}
-
-.c1[data-has-content='true']::before {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 16px;
-  height: 16px;
-  margin: auto 0;
-  content: url("data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.00001 1.33331C4.32001 1.33331 1.33334 4.31998 1.33334 7.99998C1.33334 11.68 4.32001 14.6666 8.00001 14.6666C11.68 14.6666 14.6667 11.68 14.6667 7.99998C14.6667 4.31998 11.68 1.33331 8.00001 1.33331ZM8.00001 11.3333C7.63334 11.3333 7.33334 11.0333 7.33334 10.6666V7.99998C7.33334 7.63331 7.63334 7.33331 8.00001 7.33331C8.36668 7.33331 8.66668 7.63331 8.66668 7.99998V10.6666C8.66668 11.0333 8.36668 11.3333 8.00001 11.3333ZM7.33334 5.99998H8.66668V4.66665H7.33334V5.99998Z' fill='white'/%3e%3c/svg%3e");
-}
-
-.c2 {
-  margin-top: 2px;
-  color: #fff;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 18px;
-}
-
-.c2 a {
-  color: #fff;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-text-decoration-line: underline;
-  text-decoration-line: underline;
-}
-
-.c3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  margin-top: 8px;
-  gap: 16px;
-}
-
-.c4 {
-  padding: 7px 28px;
-  background: #fff;
-  border-radius: 6px;
-  color: #284a75;
-  cursor: pointer;
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 18px;
-}
-
-.c5 {
-  color: #fff;
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 22px;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-text-decoration-line: underline;
-  text-decoration-line: underline;
-}
-
-@media (max-width:767px) {
-  .c0 {
-    width: 100%;
-  }
-}
-
-@media (max-width:767px) {
-  .c0[data-default-position='true'] {
-    left: 0;
-    right: unset;
-  }
-}
-
-<div
-  class="c0"
-  data-default-position="true"
-  data-is-open="true"
-  data-theme="helloSites"
->
-  <p
-    class="c1"
-    data-has-content="true"
-  >
-    Please accept our privacy policy
-  </p>
-  <p
-    class="c2"
-  >
-    Hello Bacsi uses cookies to improve your experience and to show you personalized ads
-  </p>
-  <div
-    class="c3"
-  >
-    <div
-      class="c4"
-      on="tap:consent-element.accept"
-      role="button"
-      tabindex="0"
-    >
-      Accept
-    </div>
-    <a
-      class="c5"
-    >
-      Our Policies
-    </a>
-  </div>
-</div>
-`;

package/raw/components/molecules/cookieAcceptConfirm/index.stories.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { CookieAcceptConfirmProps, CookieAcceptConfirm } from '.'
-
-export default {
-  component: CookieAcceptConfirm,
-  title: 'Molecules/CookieAcceptConfirm',
-}
-
-const Template: Story<CookieAcceptConfirmProps> = (args) => (
-  <CookieAcceptConfirm {...args} />
-)
-
-export const Default = Template.bind({})
-
-Default.args = {
-  title: 'Please accept our privacy policy',
-  description:
-    'Hello Bacsi uses cookies to improve your experience and to show you personalized ads',
-  useDefaultPosition: false,
-}