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

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

@@ -0,0 +1,200 @@
+import React, { CSSProperties, useEffect, useState, ReactNode } from 'react'
+
+import { Heading, Input, Text, TextArea } from 'components/atoms'
+import { Props as InputType } from 'components/atoms/input'
+
+import { StyledSurveyQuestionContent } from './index.styled'
+import { SurveyRadio } from './surveyRadio'
+
+export type SurveyOption = {
+  label: string
+  image?: string
+  value: string
+}
+export type SurveyTextOption = {
+  label: string
+  placeholder?: string
+  inputType?: string
+  name?: string
+  isTextArea?: boolean
+  value?: string
+  type?: InputType['type']
+}
+export type SurveyQuestion = {
+  type: 'checkbox' | 'radio' | 'textbox'
+  title?: ReactNode
+  subtitle?: ReactNode
+  image?: string
+  options?: SurveyOption[]
+  textOptions?: SurveyTextOption[]
+  name?: string
+  multi_select_option?: number | null
+  is_multi_select?: boolean
+  from?: number | null
+  to?: number | null
+}
+export type Props = {
+  question: SurveyQuestion
+  description?: string
+  onOptionsChange?: (c: SurveyOption[]) => void
+  onTextOptionsChange?: (c: SurveyTextOption[]) => void
+  className?: string
+  style?: CSSProperties
+}
+
+export const SurveyQuestionContent = ({
+  question,
+  description,
+  onOptionsChange,
+  onTextOptionsChange,
+  style,
+  className,
+}: Props) => {
+  const {
+    type,
+    title,
+    subtitle,
+    image,
+    textOptions: textOptionsProps,
+    options,
+    name,
+    is_multi_select,
+  } = question
+  const optionHasImage = !!options?.some((o) => o.image)
+  const [selectedOptions, setSelectedOptions] = useState<SurveyOption[]>([])
+  const [textOptions, setTextOptions] = useState<SurveyTextOption[]>(
+    () => textOptionsProps?.slice() || [],
+  )
+
+  useEffect(() => {
+    onOptionsChange && onOptionsChange(selectedOptions.slice())
+  }, [!!onOptionsChange, selectedOptions])
+  useEffect(() => {
+    onTextOptionsChange && onTextOptionsChange(textOptions)
+  }, [!!onTextOptionsChange, textOptions])
+
+  return (
+    <StyledSurveyQuestionContent className={className} style={style}>
+      <div className="survey-question-text-wrapper">
+        {title && (
+          <Heading
+            data-nosubtitle={!subtitle}
+            className="survey-question-title"
+            tag="h4"
+          >
+            {title}
+          </Heading>
+        )}
+        {subtitle && (
+          <Text className="survey-question-subtitle" size="p2">
+            {subtitle}
+          </Text>
+        )}
+        {description && (
+          <Text className="survey-question-description" size="p2">
+            {description}
+          </Text>
+        )}
+      </div>
+      {image && <img src={image} className="survey-question-image" />}
+      <div className="survey-question-answer-wrapper">
+        {type === 'radio' && (
+          <div
+            data-has-image={optionHasImage}
+            className="survey-question-options-wrapper"
+          >
+            {options.map((option) => (
+              <SurveyRadio
+                inputType="radio"
+                label={option.label}
+                name={name}
+                key={`${name}-${option.value}`}
+                checked={selectedOptions[0]?.value === option.value}
+                value={option.value}
+                onChange={(v) => {
+                  setSelectedOptions([options.find((o) => o.value === v)])
+                }}
+                className="survey-question-option-item"
+                image={option.image}
+                hasImage={optionHasImage}
+              />
+            ))}
+          </div>
+        )}
+        {type === 'checkbox' && (
+          <div
+            data-has-image={optionHasImage}
+            className="survey-question-options-wrapper"
+          >
+            {options.map((option) => (
+              <SurveyRadio
+                inputType="checkbox"
+                label={option.label}
+                name={name}
+                key={`${name}-${option.value}`}
+                checked={
+                  !!selectedOptions.find((o) => o.value === option.value)
+                }
+                value={option.value}
+                onChange={() => {
+                  const foundIndex = selectedOptions.findIndex(
+                    (o) => o.value === option.value,
+                  )
+                  if (foundIndex >= 0) {
+                    setSelectedOptions((_old) => {
+                      _old.splice(foundIndex, 1)
+                      return _old.slice()
+                    })
+                  } else {
+                    if (!is_multi_select) {
+                      setSelectedOptions([option])
+                    } else {
+                      setSelectedOptions((_old) => _old.concat(option).slice())
+                    }
+                  }
+                }}
+                className="survey-question-option-item survey-option-radio"
+                image={option.image}
+                hasImage={optionHasImage}
+              />
+            ))}
+          </div>
+        )}
+        {type === 'textbox' &&
+          textOptions.map((option, index) =>
+            option.isTextArea ? (
+              <TextArea
+                key={index}
+                placeholder={option.placeholder}
+                height={'150px'}
+                value={option.value}
+                onChange={(t) =>
+                  setTextOptions((_o) => {
+                    _o[index].value = t
+                    return _o.slice()
+                  })
+                }
+              />
+            ) : (
+              <Input
+                key={index}
+                value={option.value}
+                name={option.name}
+                size="md"
+                className="survey-contact-input"
+                label={option.label}
+                placeholder={option.placeholder}
+                onChange={(v) => {
+                  setTextOptions((_o) => {
+                    _o[index].value = v
+                    return _o.slice()
+                  })
+                }}
+                type={option.type}
+              />
+            ),
+          )}
+      </div>
+    </StyledSurveyQuestionContent>
+  )
+}

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

@@ -0,0 +1,69 @@
+import React from 'react'
+
+import { StyledSurveyRadio } from './index.styled'
+
+export type Props = {
+  size?: 'small' | 'large'
+  label: string
+  name: string
+  value: string
+  checked?: boolean
+  className?: string
+  isDisabled?: boolean
+  image?: string
+  hasImage?: boolean
+  inputType?: 'radio' | 'checkbox'
+  onChange: (v: string) => void
+}
+
+const SurveyRadio = ({
+  size = 'small',
+  label,
+  name,
+  checked,
+  value,
+  className,
+  isDisabled = false,
+  onChange,
+  hasImage,
+  inputType,
+  image,
+}: Props) => {
+  return (
+    <StyledSurveyRadio
+      data-disabled={isDisabled}
+      className={className}
+      data-type="circle"
+      data-size={size}
+      data-checked={checked}
+      onClick={() => {
+        onChange(value)
+      }}
+      data-has-image={hasImage}
+    >
+      {hasImage && (
+        <div className="choice-image-wrapper">
+          {image && <img src={image} />}
+        </div>
+      )}
+      <label
+        onClick={(e) => {
+          e.preventDefault()
+        }}
+        htmlFor={`${name}-${value}`}
+      >
+        {label}
+      </label>
+      <input
+        type={inputType}
+        checked={checked}
+        name={name}
+        id={`${name}-${value}`}
+        value={value}
+        readOnly
+      />
+    </StyledSurveyRadio>
+  )
+}
+
+export { SurveyRadio }

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

@@ -0,0 +1,129 @@
+import React, { CSSProperties, ReactNode } from 'react'
+
+import { Heading, Text } from 'components/atoms'
+
+import {
+  StyledSurveyThankyouCard,
+  StyledSurveyQuestionCard,
+} from './index.styled'
+
+export type Props = {
+  thankyou?: ReactNode
+  thankyouSubtitle?: ReactNode
+  className?: string
+  style?: CSSProperties
+}
+
+export const SurveyThankyouCard = ({
+  thankyou,
+  thankyouSubtitle,
+  className,
+  style,
+}: Props) => {
+  return (
+    <StyledSurveyQuestionCard className={className} style={style}>
+      <div className="survey-inner-wrapper">
+        <StyledSurveyThankyouCard>
+          <div className="survey-thankyou-wrapper-inner">
+            <svg
+              // width="122"
+              // height="122"
+              viewBox="0 0 122 122"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              className="survey-thankyou-icon"
+            >
+              <path
+                d="M61.5 122C94.6371 122 121.5 95.1371 121.5 62C121.5 28.8629 94.6371 2 61.5 2C28.3629 2 1.5 28.8629 1.5 62C1.5 95.1371 28.3629 122 61.5 122Z"
+                fill="#E3F2FF"
+              />
+              <ellipse cx="61.5" cy="110.36" rx="48" ry="3.36" fill="#91CAFF" />
+              <path
+                d="M82.9048 72.6663H101.5L87.597 40H35.403L21.5 72.6663H40.0952V91H83.0786L82.9048 72.6663Z"
+                fill="#2C74DF"
+              />
+              <path
+                d="M74.4004 15.0005H39.863C36.9017 15.0005 34.5 17.4022 34.5 20.3635V72.5769C34.5 75.5383 36.9017 77.9399 39.863 77.9399H83.1357C86.097 77.9399 88.4987 75.5383 88.4987 72.5769V29.0988L88.4987 21.0005C88.4987 17.6868 85.8124 15.0005 82.4987 15.0005H74.4004Z"
+                fill="white"
+              />
+              <path
+                d="M88.8529 80.1077H34.1469C31.8699 80.1077 30.06 78.3036 30.06 76.0338V65.3837C30.06 63.1139 31.8699 61.3098 34.1469 61.3098H88.8529C91.1299 61.3098 92.9398 63.1139 92.9398 65.3837V76.0338C92.9398 78.3036 91.1299 80.1077 88.8529 80.1077Z"
+                fill="#E4E8EC"
+              />
+              <path
+                d="M90.838 85.4512H32.1618C29.8849 85.4512 28.075 83.6471 28.075 81.3774V70.7272C28.075 68.4575 29.8849 66.6533 32.1618 66.6533H90.7796C93.0566 66.6533 94.8665 68.4575 94.8665 70.7272V81.3774C94.9249 83.6471 93.0566 85.4512 90.838 85.4512Z"
+                fill="white"
+              />
+              <path
+                d="M103.748 75.4919V105.755C103.748 107.675 102.172 109.247 100.245 109.247H23.0031C21.0764 109.247 19.5 107.675 19.5 105.755V75.4919C19.5 73.5713 21.0764 72 23.0031 72H42.3866C44.3133 72 45.8897 73.5713 45.8897 75.4919V80.8461C45.8897 81.1952 46.1232 81.428 46.4735 81.428H76.7749C77.1253 81.428 77.3588 81.1952 77.3588 80.8461V75.4919C77.3588 73.5713 78.9352 72 80.8618 72H100.245C102.172 72 103.748 73.5713 103.748 75.4919Z"
+                fill="#45A4FF"
+              />
+              <path
+                d="M51.9541 91.3767V94.4612C51.9541 96.0907 53.2386 97.3711 54.8733 97.3711H67.7179C69.3526 97.3711 70.6371 96.0907 70.6371 94.4612V91.3767"
+                stroke="#2C74DF"
+                strokeWidth="3"
+                strokeMiterlimit="10"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M120.5 38.0251C118.5 37.7793 117.25 39.3768 118.125 41.22L118.375 41.9573C119.125 43.8006 118 45.398 116 45.1523L115.25 45.0294C113.25 44.7836 112 46.3811 112.875 48.2244L113.25 48.9616C114 50.8049 112.875 52.4025 110.875 52.1567L110.125 52.0337C108.625 51.9109 107.5 52.7712 107.5 54"
+                stroke="#FE921D"
+                strokeWidth="1.9096"
+                strokeMiterlimit="10"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M1.53299 62C1.2644 63.413 2.6745 64.337 4.35323 63.8478L5.02472 63.6304C6.70346 63.087 8.11356 64.0109 7.84496 65.4783L7.7107 66.0217C7.4421 67.4348 8.8522 68.3587 10.5309 67.8696L11.2024 67.6522C12.8812 67.1087 14.2913 68.0326 14.0227 69.5L13.8884 70.0435C13.687 71.1304 14.4256 71.8913 15.5 72"
+                stroke="#00B16A"
+                strokeWidth="2.8751"
+                strokeMiterlimit="10"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M118 92C119.381 92 120.5 90.8807 120.5 89.5C120.5 88.1193 119.381 87 118 87C116.619 87 115.5 88.1193 115.5 89.5C115.5 90.8807 116.619 92 118 92Z"
+                stroke="#00B16A"
+                strokeWidth="2.8751"
+                strokeMiterlimit="10"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M82.0001 3.18747L83.1875 7.53467L87.5347 6.34727L86.3473 2.00007L82.0001 3.18747Z"
+                stroke="#00B16A"
+                strokeWidth="2.1628"
+                strokeMiterlimit="10"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M17.0001 28C18.1046 28 19 27.1045 19 25.9999C19 24.8954 18.1046 24 17.0001 24C15.8955 24 15 24.8954 15 25.9999C15 27.1045 15.8955 28 17.0001 28Z"
+                stroke="#FE921D"
+                strokeWidth="2.3278"
+                strokeMiterlimit="10"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M61.5 26.6667C54.136 26.6667 48.1667 32.6361 48.1667 40.0001C48.1667 47.3641 54.136 53.3334 61.5 53.3334C68.864 53.3334 74.8334 47.3641 74.8334 40.0001C74.8334 32.6361 68.864 26.6667 61.5 26.6667ZM69.1094 36.9427L59.776 46.2761C59.516 46.5361 59.1747 46.6667 58.8334 46.6667C58.492 46.6667 58.1507 46.5361 57.8907 46.2761L53.8907 42.2761C53.3694 41.7547 53.3694 40.9121 53.8907 40.3907C54.412 39.8694 55.2547 39.8694 55.776 40.3907L58.8334 43.4481L67.224 35.0574C67.7454 34.5361 68.588 34.5361 69.1094 35.0574C69.6307 35.5787 69.6307 36.4214 69.1094 36.9427Z"
+                fill="#00CB8A"
+              />
+            </svg>
+            {thankyou && (
+              <Heading className="survey-thankyou-title" tag="h3">
+                {thankyou}
+              </Heading>
+            )}
+            {thankyouSubtitle && (
+              <Text className="survey-thankyou-subtitle" size="p3">
+                {thankyouSubtitle}
+              </Text>
+            )}
+          </div>
+        </StyledSurveyThankyouCard>
+      </div>
+    </StyledSurveyQuestionCard>
+  )
+}

package/raw/src/components/molecules/table/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it renders 1`] = `
+.c0 {
+  --horizontal-spacing: 19px;
+  --vertical-spacing: 26px;
+  width: 100%;
+  position: relative;
+}
+
+.c2 {
+  border-bottom: 1px solid #d9d9d9;
+}
+
+.c2[data-is-active='true'] {
+  background-color: #d9d9d9;
+}
+
+.c1 th {
+  padding: var(--vertical-spacing) var(--horizontal-spacing);
+  text-align: left;
+  color: #737373;
+  font-weight: 700;
+}
+
+.c1[data-is-sticky] th {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  background: white;
+  border-bottom: 2px solid #d9d9d9;
+}
+
+<table
+  class="c0"
+>
+  <thead
+    class="c1"
+    data-is-sticky="true"
+  >
+    <tr
+      class="c2"
+    >
+      <th>
+        Header one
+      </th>
+      <th>
+        Header two
+      </th>
+      <th>
+        Header three
+      </th>
+    </tr>
+  </thead>
+</table>
+`;