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

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

@@ -1,115 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import {
-  SurveyQuestionCard,
-  Props as QuestionCardProps,
-} from './surveyQuestionCard'
-import {
-  SurveyThankyouCard,
-  Props as ThankyouCardProps,
-} from './surveyThankyouCard'
-
-export default {
-  component: SurveyQuestionCard,
-  title: 'Molecules/SurveyQuestionCard',
-}
-
-const QuestionTemplate: Story<QuestionCardProps> = (args) => (
-  <SurveyQuestionCard {...args} />
-)
-const TemplateThankyou: Story<ThankyouCardProps> = (args) => (
-  <SurveyThankyouCard {...args} />
-)
-
-export const Normal = QuestionTemplate.bind({})
-Normal.args = {
-  className: 'test',
-  headerText: 'HAVE TIME FOR A QUICK SURVEY ?',
-  descriptionText: 'You must choose one options',
-  // image: 'https://source.unsplash.com/random/300x400',
-  question: {
-    type: 'radio',
-    title: 'What’s your age group?',
-    subtitle: 'Select an option',
-    is_multi_select: true,
-    multi_select_option: 1,
-    from: 2,
-    to: 4,
-    options: [
-      {
-        label: '18 - 25',
-        value: '1',
-      },
-      {
-        label: '26 - 45',
-        value: '2',
-      },
-      {
-        label: '46 - 65',
-        value: '3',
-      },
-      {
-        label: '65+',
-        value: '4',
-      },
-    ],
-  },
-  prevText: 'Back',
-  nextText: 'Next',
-  onNextClick: console.log,
-} as QuestionCardProps
-
-export const Thankyou = TemplateThankyou.bind({})
-Thankyou.args = {
-  className: 'test',
-  thankyou: 'thank you',
-  thankyouSubtitle: 'thank you subtitle',
-} as ThankyouCardProps
-
-export const ContactForm = QuestionTemplate.bind({})
-ContactForm.args = {
-  className: 'test',
-  prevText: 'Back',
-  nextText: 'Submit',
-
-  question: {
-    type: 'textbox',
-    title:
-      'Before revealing the result, please fill in your information so we can further advise you on this matter',
-    textOptions: [
-      {
-        name: 'name',
-        label: 'Name',
-        placeholder: 'Fill your name',
-      },
-      {
-        name: 'phone',
-        label: 'Phone Number',
-        placeholder: '(+84) 1234 5678',
-        type: 'tel',
-      },
-      {
-        name: 'email',
-        label: 'Email',
-        placeholder: 'name@gmail.com',
-        type: 'email',
-      },
-    ],
-  },
-  isContactForm: true,
-  onNextClick: console.log,
-  termAndPolicyText: (
-    <>
-      {`Click "Continue" to agree to Hellobacsi's `}
-      <a href="#" target="_blank">
-        Terms of Service
-      </a>{' '}
-      and{' '}
-      <a href="#" target="_blank">
-        Privacy Policy
-      </a>
-    </>
-  ),
-} as QuestionCardProps

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

@@ -1,220 +0,0 @@
-import { StyledRadio } from 'components/atoms/radio/index.styled'
-import { ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-export const StyledSurveyQuestionCard = styled.div`
-  padding: 1rem;
-  background: ${(props: ThemeProps) => props.theme.colors.neutral100};
-  .survey-inner-wrapper {
-    padding: 1.25rem 1rem 1.5rem;
-    background: ${(props: ThemeProps) => props.theme.colors.white};
-    border-radius: 6px;
-    .survey-header {
-      border-bottom: 1px solid #dbdfe5;
-      margin-bottom: 12px;
-      .survey-header-text {
-        color: ${(props: ThemeProps) => props.theme.colors.gray500};
-      }
-    }
-
-    .survey-contact-submit {
-      width: 100%;
-      margin-bottom: 1.5rem;
-    }
-    .term-policy-container {
-      width: 70%;
-      min-width: 210px;
-      max-width: 100%;
-      margin: 0 auto 1.5rem;
-      text-align: center;
-    }
-
-    .survey-progress-wrapper {
-      width: calc(100% + 2rem);
-      height: 4px;
-      margin-bottom: 1rem;
-      margin-left: -1rem;
-      background: #e4e8ec;
-      .survey-progress {
-        width: 100%;
-        height: 100%;
-        background: #00b16a;
-        transform: scaleX(0);
-        transform-origin: left;
-        transition: transform ease-in-out 0.3s;
-      }
-    }
-
-    .survey-button-wrapper {
-      display: flex;
-      justify-content: flex-end;
-      button {
-        justify-content: center;
-        &[data-has-icon='true'] {
-          svg {
-            width: 10px;
-            height: 10px;
-            margin-right: 10px;
-            vertical-align: unset;
-          }
-        }
-        &.survey-next-button {
-          &[data-has-icon='true'] {
-            svg {
-              margin-right: 0;
-              margin-left: 10px;
-            }
-          }
-        }
-      }
-      &[data-center='true'] {
-        justify-content: center;
-        button:only-child {
-          width: 200px;
-          max-width: 80%;
-        }
-      }
-      .survey-prev-button {
-        margin-right: 0.5rem;
-      }
-    }
-  }
-`
-
-export const StyledSurveyRadio = styled(StyledRadio)`
-  &[data-type='circle'] {
-    padding: 16px 20px;
-    border: 0.5px solid transparent;
-    background: #fafafa;
-    border-radius: 6px;
-    &[data-checked='true'] {
-      border: 0.5px solid #2d87f3;
-      background: #f7f9fc;
-    }
-    input {
-      border: solid 2px #737373;
-      margin-right: 0;
-      background: white;
-      &[type='checkbox'] {
-        &:checked {
-          border: 0;
-          background: ${(props: ThemeProps) => props.theme.colors.primaryBase}
-            url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 21C16.5228 21 21 16.5228 21 11C21 5.47715 16.5228 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5228 5.47715 21 11 21Z' fill='%232D87F3' stroke='%232D87F3' stroke-width='2'/%3E%3Cpath d='M15.5714 8L9.67857 14L7 11.2727' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")
-            no-repeat center center;
-          &:after {
-            display: none;
-          }
-        }
-      }
-    }
-
-    &[data-has-image='true'] {
-      position: relative;
-      display: block;
-      padding: 12px;
-      input {
-        position: absolute;
-        top: 20px;
-        right: 20px;
-      }
-      .choice-image-wrapper {
-        position: relative;
-        padding-top: 56.25%;
-        margin-bottom: 0.75rem;
-        img {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          border-radius: 6px;
-          object-fit: cover;
-        }
-      }
-    }
-  }
-`
-
-export const StyledSurveyThankyouCard = styled.div`
-  position: relative;
-  width: 100%;
-  padding-top: min(400px, 100%);
-  .survey-thankyou-wrapper-inner {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    width: 100%;
-    height: 100%;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    .survey-thankyou-icon {
-      width: 36%;
-      max-height: 50%;
-      margin-bottom: 1.5rem;
-    }
-    .survey-thankyou-title {
-      margin-bottom: 1rem;
-      text-align: center;
-    }
-    .survey-thankyou-subtitle {
-      text-align: center;
-      > * {
-        text-align: center;
-      }
-    }
-  }
-`
-
-export const StyledSurveyQuestionContent = styled.div`
-  .survey-question-text-wrapper {
-    margin-bottom: 24px;
-    .survey-question-title {
-      margin-bottom: 4px;
-    }
-    .survey-question-subtitle,
-    .survey-question-description {
-      color: ${(props: ThemeProps) => props.theme.colors.gray500};
-    }
-  }
-  .survey-question-image {
-    width: 100%;
-    margin-bottom: 12px;
-    border-radius: 6px;
-  }
-
-  .survey-question-answer-wrapper {
-    margin-bottom: 1.5rem;
-    .survey-question-options-wrapper {
-      display: grid;
-      grid-gap: 0.5rem;
-      grid-template-columns: 1fr;
-      &[data-has-image='true'] {
-        grid-gap: 0.8rem;
-        grid-template-columns: 1fr 1fr;
-      }
-      .survey-question-option-item {
-        label {
-          color: #262626;
-          font-size: 16px;
-          font-style: normal;
-          font-weight: normal;
-          line-height: 24px;
-        }
-      }
-    }
-    .survey-contact-input {
-      margin-bottom: 1rem;
-      &:first-child {
-        margin-top: 1rem;
-      }
-      label {
-        font-weight: 700;
-      }
-      input {
-        margin-top: 6px;
-      }
-    }
-  }
-`

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

@@ -1,53 +0,0 @@
-import React from 'react'
-
-import { render, cleanup } from '@testing-library/react'
-import 'jest-styled-components'
-
-import MockTheme from '../../../misc/mockTheme'
-import { SurveyQuestionCard } from './surveyQuestionCard'
-
-afterEach(cleanup)
-
-test('it renders', () => {
-  const surveyQuestionCard = render(
-    <MockTheme>
-      <SurveyQuestionCard
-        className="test"
-        headerText="HAVE TIME FOR A QUICK SURVEY ?"
-        descriptionText="You must choose one options"
-        question={{
-          type: 'radio',
-          title: 'What’s your age group?',
-          subtitle: 'Select an option',
-          is_multi_select: true,
-          multi_select_option: 1,
-          from: 2,
-          to: 4,
-          options: [
-            {
-              label: '18 - 25',
-              value: '1',
-            },
-            {
-              label: '26 - 45',
-              value: '2',
-            },
-            {
-              label: '46 - 65',
-              value: '3',
-            },
-            {
-              label: '65+',
-              value: '4',
-            },
-          ],
-        }}
-        prevText="Back"
-        nextText="Next"
-      />
-    </MockTheme>,
-  )
-
-  const self = surveyQuestionCard.container.firstChild
-  expect(self).toMatchSnapshot()
-})

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

@@ -1,2 +0,0 @@
-export { SurveyQuestionCard } from './surveyQuestionCard'
-export { SurveyThankyouCard } from './surveyThankyouCard'

package/src/components/molecules/surveyQuestionCard/surveyQuestionCard.tsx

@@ -1,213 +0,0 @@
-import React, { CSSProperties, ReactNode, useRef, useState } from 'react'
-
-import { Button, Text } from 'components/atoms'
-
-import { StyledSurveyQuestionCard } from './index.styled'
-import {
-  SurveyOption,
-  SurveyTextOption,
-  SurveyQuestion,
-  SurveyQuestionContent,
-} from './surveyQuestionContent'
-
-export type SurveyAnswer = SurveyOption[] | SurveyTextOption[]
-
-export type Props = {
-  headerText?: string
-  className?: string
-  style?: CSSProperties
-
-  termAndPolicyText?: ReactNode
-  prevText?: ReactNode
-  nextText: ReactNode
-  isContactForm?: boolean
-  isSubmitButton?: boolean
-  isDisableNext?: boolean
-  isDisablePrev?: boolean
-  onPrevClick?: () => void
-  isButtonCenter?: boolean
-  onNextClick?: (answer?: SurveyAnswer) => void
-
-  question: SurveyQuestion
-  progress?: number
-  descriptionText?: string
-}
-
-export enum NodeMultipleOptions {
-  UNLIMITED = 0,
-  EXACT_NUMBER = 1,
-  RANGE = 2,
-}
-
-const SurveyQuestionCard = ({
-  className,
-  headerText,
-  style,
-
-  question,
-
-  termAndPolicyText,
-  prevText,
-  nextText,
-  isContactForm,
-  isDisableNext,
-  isDisablePrev,
-  onPrevClick,
-  onNextClick,
-
-  isSubmitButton,
-  isButtonCenter,
-  progress,
-  descriptionText,
-}: Props) => {
-  // const [currentQuestionIndex, setQuestionIndex] = useState(0)
-  const [answer, setAnswer] = useState<SurveyAnswer>([])
-  const { is_multi_select, multi_select_option, from, to } = question
-
-  // const currentQuestion = questions[currentQuestionIndex]
-  // const currentAnswer = answers[currentQuestionIndex]
-  const currentType = question?.type
-  const submitDisabled =
-    (currentType === 'checkbox' &&
-      question.options?.length &&
-      (!answer ||
-        answer.length === 0 ||
-        (is_multi_select &&
-          multi_select_option === NodeMultipleOptions.RANGE &&
-          (answer.length < from || answer.length > to)) ||
-        (is_multi_select &&
-          multi_select_option === NodeMultipleOptions.EXACT_NUMBER &&
-          answer.length !== from))) ||
-    (currentType === 'radio' &&
-      question.options?.length &&
-      (!answer || answer.length === 0)) ||
-    (currentType === 'textbox' &&
-      question.textOptions?.length &&
-      (answer.length < question.textOptions.length ||
-        answer.some((a) => !a.value)))
-
-  const normalizedProgress =
-    typeof progress === 'number'
-      ? progress > 1
-        ? 1
-        : progress < 0
-        ? 0
-        : Number(progress.toFixed(2))
-      : -1
-
-  const formRef = useRef<HTMLFormElement>(null)
-  const reportValidity = () => {
-    if (currentType === 'textbox') {
-      // report validity for input elements
-      return formRef.current.reportValidity()
-    }
-    return true
-  }
-  return (
-    <StyledSurveyQuestionCard className={className} style={style}>
-      <div className="survey-inner-wrapper">
-        {headerText && (
-          <div className="survey-header">
-            <Text className="survey-header-text" size="c2">
-              {headerText}
-            </Text>
-          </div>
-        )}
-        <form ref={formRef} onSubmit={(e) => e.preventDefault()}>
-          <SurveyQuestionContent
-            question={question}
-            description={descriptionText}
-            onOptionsChange={(options) => {
-              setAnswer(options)
-            }}
-            onTextOptionsChange={(text) => {
-              setAnswer(text)
-            }}
-          />
-        </form>
-        {isContactForm && nextText && (
-          <Button
-            className="survey-contact-submit"
-            size="lg"
-            isDisabled={isDisableNext || submitDisabled}
-            onClick={() =>
-              reportValidity() && onNextClick && onNextClick(answer)
-            }
-          >
-            {nextText}
-          </Button>
-        )}
-        {termAndPolicyText && (
-          <div className="term-policy-container">{termAndPolicyText}</div>
-        )}
-        {typeof progress === 'number' && (
-          <div className="survey-progress-wrapper">
-            <div
-              className="survey-progress"
-              style={{
-                transform: `scaleX(${normalizedProgress})`,
-              }}
-            ></div>
-          </div>
-        )}
-        {(prevText || nextText) && (
-          <div data-center={isButtonCenter} className="survey-button-wrapper">
-            {prevText && (
-              <Button
-                className="survey-prev-button"
-                size="lg"
-                color={isDisablePrev ? 'primary' : 'secondary'}
-                isDisabled={isDisablePrev}
-                icon={
-                  <svg
-                    width="6"
-                    height="10"
-                    viewBox="0 0 6 10"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M2.44677 4.99999L5.31252 2.13424C5.62302 1.82374 5.62302 1.31974 5.31252 1.00924C5.00202 0.698742 4.49802 0.698742 4.18752 1.00924L0.727018 4.46974C0.433768 4.76299 0.433768 5.23774 0.727018 5.53024L4.18752 8.99074C4.49802 9.30124 5.00202 9.30124 5.31252 8.99074C5.62302 8.68024 5.62302 8.17624 5.31252 7.86574L2.44677 4.99999Z"
-                      fill={isDisablePrev ? '#fff' : '#2D87F3'}
-                    />
-                  </svg>
-                }
-                onClick={onPrevClick}
-              >
-                {prevText}
-              </Button>
-            )}
-            {!isContactForm && nextText && (
-              <Button
-                onClick={() =>
-                  reportValidity() && onNextClick && onNextClick(answer)
-                }
-                className="survey-next-button"
-                size="lg"
-                isDisabled={isDisableNext || submitDisabled}
-              >
-                {nextText}{' '}
-                {isSubmitButton ? undefined : (
-                  <svg
-                    width="6"
-                    height="10"
-                    viewBox="0 0 6 10"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M3.80322 5.19994L0.937465 2.33419C0.626965 2.02369 0.626965 1.51969 0.937465 1.20919C1.24796 0.898693 1.75196 0.898693 2.06246 1.20919L5.52297 4.66969C5.81622 4.96294 5.81622 5.43769 5.52297 5.73019L2.06246 9.19069C1.75196 9.50119 1.24796 9.50119 0.937465 9.19069C0.626965 8.88019 0.626965 8.37619 0.937465 8.06569L3.80322 5.19994Z"
-                      fill="#ffffff"
-                    />
-                  </svg>
-                )}
-              </Button>
-            )}
-          </div>
-        )}
-      </div>
-    </StyledSurveyQuestionCard>
-  )
-}
-
-export { SurveyQuestionCard }