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

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

@@ -0,0 +1,75 @@
+import styled from 'styled-components'
+
+export const StyledRadioGroup = styled.div`
+  display: flex;
+
+  &[data-direction='vertical'] {
+    flex-direction: column;
+
+    div {
+      &[data-type='circle'] {
+        margin-bottom: 20px;
+      }
+
+      &[data-type='rectangle'] {
+        margin-bottom: 20px;
+      }
+    }
+  }
+
+  &[data-direction='horizontal'] {
+    flex-wrap: wrap;
+
+    &[data-group='group1'] {
+      div {
+        &[data-type='rectangle'] {
+          flex-wrap: wrap;
+
+          &:first-child {
+            label {
+              border-top-left-radius: 6px;
+              border-bottom-left-radius: 6px;
+            }
+          }
+
+          &:last-child {
+            label {
+              border-top-right-radius: 6px;
+              border-bottom-right-radius: 6px;
+            }
+          }
+
+          &:not(:last-child) {
+            label {
+              border-right: unset;
+            }
+          }
+
+          label {
+            border-radius: unset;
+          }
+        }
+      }
+    }
+
+    &[data-group='group2'] {
+      div {
+        &[data-type='rectangle'] {
+          flex-wrap: wrap;
+          margin-right: 8px;
+          margin-bottom: 8px;
+        }
+      }
+    }
+
+    div {
+      &[data-type='circle'] {
+        margin-right: 25px;
+      }
+
+      &[data-type='rectangle'] {
+        margin-bottom: 20px;
+      }
+    }
+  }
+`

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

@@ -0,0 +1,33 @@
+import 'jest-styled-components'
+
+import React from 'react'
+
+import { cleanup, render } from '@testing-library/react'
+
+import { RadioGroup } from '.'
+import MockTheme from '../../../misc/mockTheme'
+
+afterEach(cleanup)
+
+test('it renders', () => {
+  const dropdown = render(
+    <MockTheme>
+      <RadioGroup
+        id="dropdown1"
+        value="1"
+        type="circle"
+        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()
+})

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

@@ -0,0 +1,80 @@
+import React, { Fragment, useState } from 'react'
+
+import { Radio } from '../../atoms/radio'
+import { StyledRadioGroup } from './index.styled'
+
+export type RadioGroupOption = Array<{
+  label: string
+  value: string
+  renderActivated?: () => JSX.Element
+}>
+export type Props = {
+  type: 'circle' | 'rectangle'
+  options: RadioGroupOption
+  value?: string
+  id: string
+  className?: string
+  isDisabled?: boolean
+  size?: 'small' | 'large'
+  direction?: 'vertical' | 'horizontal'
+  group?: 'group1' | 'group2'
+  onChange?: (v: string) => void
+  dataEventCategory?: string
+  dataEventAction?: string
+  dataEventLabel?: string
+}
+
+const RadioGroup = ({
+  id,
+  value,
+  options,
+  className,
+  type = 'circle',
+  isDisabled,
+  size = 'small',
+  direction = 'vertical',
+  group = 'group1',
+  onChange,
+  dataEventCategory,
+  dataEventAction,
+  dataEventLabel,
+}: Props) => {
+  const [check, setCheck] = useState(value)
+
+  const handleOnChange = (v: string) => {
+    setCheck(v)
+    onChange && onChange(v)
+  }
+
+  return (
+    <StyledRadioGroup
+      className={className}
+      data-direction={direction}
+      data-group={group}
+    >
+      {options.map((option) => {
+        const checked = check === option.value
+        return (
+          <Fragment key={`${id}-${option.value}`}>
+            <Radio
+              type={type}
+              size={size}
+              label={option.label}
+              name={id}
+              checked={checked}
+              value={option.value}
+              isDisabled={isDisabled}
+              onChange={!isDisabled && handleOnChange}
+              dataEventCategory={dataEventCategory}
+              dataEventAction={dataEventAction}
+              dataEventLabel={dataEventLabel}
+            />
+            {checked && option.renderActivated && option.renderActivated()}
+          </Fragment>
+        )
+      })}
+    </StyledRadioGroup>
+  )
+}
+
+export { RadioGroup }

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

@@ -0,0 +1,113 @@
+import React, { useState } from 'react'
+
+import { Story } from '@storybook/react/types-6-0'
+
+import { CategoryCard } from '../categoryCard'
+import { ScrollList, Props } from './index'
+
+export default {
+  component: ScrollList,
+  title: 'Molecules/ScrollList',
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+}
+const Template: Story<Props> = (args) => {
+  const [, setPage] = useState(0)
+
+  return (
+    <ScrollList
+      onChangePage={(value) => {
+        setPage(value)
+      }}
+      {...args}
+    />
+  )
+}
+
+export const Normal = Template.bind({})
+
+Normal.args = {
+  mode: 'snapped',
+  type: 'separated',
+  column: 3,
+  row: 2,
+  distanceOverlappedLeft: {
+    amount: 0,
+    unit: 'percentage',
+  },
+  children: [...Array(13)].map((ele, index) => (
+    <CategoryCard
+      key={index}
+      imgBanner={
+        <img src="https://source.unsplash.com/random/74x63" alt="img" />
+      }
+      style={{
+        width: '90%',
+      }}
+      label={`Mental Health ${index}`}
+    />
+  )),
+}
+
+export const ShowProgress = Template.bind({})
+
+ShowProgress.args = {
+  mode: 'infinity',
+  type: 'separated',
+  column: 4,
+  row: 1,
+  distanceOverlappedLeft: {
+    amount: 0,
+    unit: 'percentage',
+  },
+  isProgressShown: true,
+  statusChildren: [
+    { index: 0, status: 'done' },
+    { index: 1, status: 'active' },
+  ],
+  children: [...Array(10)].map((ele, index) => (
+    <CategoryCard
+      key={index}
+      imgBanner={
+        <img src="https://source.unsplash.com/random/74x63" alt="img" />
+      }
+      style={{
+        width: '90%',
+      }}
+      label={`Mental Health ${index}`}
+    />
+  )),
+}
+
+export const ShowArrow = Template.bind({})
+
+ShowArrow.args = {
+  mode: 'infinity',
+  type: 'separated',
+  column: 4,
+  row: 1,
+  distanceOverlappedLeft: {
+    amount: 0,
+    unit: 'percentage',
+  },
+  isArrowShown: true,
+  statusChildren: [
+    { index: 0, status: 'done' },
+    { index: 1, status: 'active' },
+  ],
+  children: [...Array(10)].map((ele, index) => (
+    <CategoryCard
+      key={index}
+      imgBanner={
+        <img src="https://source.unsplash.com/random/74x63" alt="img" />
+      }
+      style={{
+        width: '90%',
+      }}
+      label={`Mental Health ${index}`}
+    />
+  )),
+}

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

@@ -0,0 +1,140 @@
+import { ThemeProps } from 'misc/theme'
+import styled from 'styled-components'
+
+export const StyledScrollList = styled.div`
+  position: relative;
+  width: 100%;
+  > .container {
+    display: flex;
+    width: 100%;
+    -ms-overflow-style: none;
+    overflow-x: auto;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .section {
+      display: flex;
+      width: 100%;
+      flex-direction: column;
+      flex-shrink: 0;
+      margin: auto;
+
+      > .grid-layout {
+        display: grid;
+        width: 100%;
+        grid-row-gap: 8px;
+
+        > .item-grid {
+          width: 100%;
+
+          > * {
+            margin: 0 auto;
+          }
+        }
+      }
+
+      .progress-bar {
+        display: grid;
+        height: 15px;
+        margin-bottom: 10px;
+
+        .items-progress {
+          position: relative;
+          display: flex;
+          width: 100%;
+          align-items: center;
+          justify-content: center;
+
+          .icon-status {
+            position: absolute;
+            display: flex;
+          }
+
+          .line {
+            width: 50%;
+            height: 2px;
+            background-color: ${(props: ThemeProps) =>
+              props.theme.colors.gray600};
+          }
+        }
+      }
+    }
+  }
+
+  .bullet-nav {
+    position: absolute;
+    z-index: ${(props: ThemeProps) => props.theme.zIndexes.belowHeader};
+    bottom: -30px;
+    left: 50%;
+    display: flex;
+    transform: translate(-50%, -50%);
+  }
+
+  .bullet-nav__link {
+    display: block;
+    width: 8px;
+    height: 8px;
+    padding: 0;
+    margin-right: 8px;
+    backface-visibility: hidden;
+    background-color: #e4e8ec;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.3s;
+  }
+
+  .bullet-nav__link.active[data-scheme='hellosites'] {
+    background-color: ${(props: ThemeProps) => props.theme.colors.blue600};
+  }
+
+  .bullet-nav__link.active[data-scheme='marrybaby'] {
+    background-color: ${(props: ThemeProps) => props.theme.mbColors.pink};
+  }
+
+  .arrow-left {
+    position: absolute;
+    z-index: 10;
+    top: 50%;
+    left: -35px;
+    transform: translateY(-50%);
+    &[data-event-category] > * {
+      pointer-events: none;
+    }
+  }
+
+  .arrow-right {
+    position: absolute;
+    z-index: 10;
+    top: 50%;
+    right: -35px;
+    transform: translateY(-50%);
+    &[data-event-category] > * {
+      pointer-events: none;
+    }
+  }
+
+  .image-gallery-wrapper {
+    display: flex;
+    position: relative;
+    margin-top: 16px;
+    justify-content: center;
+    gap: 16px;
+    .image-block {
+      display: block;
+      width: 100%;
+      border: 2px solid transparent;
+      border-radius: 4px;
+    }
+    .image-block.active {
+      border-color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
+    }
+    img {
+      height: 40px;
+      width: auto;
+      max-width: 100%;
+    }
+  }
+`