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

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

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

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

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

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

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

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