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

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

@@ -0,0 +1,51 @@
+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/src/components/molecules/checkboxGroup/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,214 @@
+// 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/src/components/molecules/checkboxGroup/index.stories.tsx

@@ -0,0 +1,118 @@
+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/src/components/molecules/checkboxGroup/index.styled.tsx

@@ -0,0 +1,27 @@
+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/src/components/molecules/checkboxGroup/index.test.tsx

@@ -0,0 +1,36 @@
+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/src/components/molecules/checkboxGroup/index.tsx

@@ -0,0 +1,66 @@
+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/src/components/molecules/cookieAcceptConfirm/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,152 @@
+// 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/src/components/molecules/cookieAcceptConfirm/index.stories.tsx

@@ -0,0 +1,23 @@
+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,
+}