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

package/raw/components/atoms/label/index.tsx

@@ -0,0 +1,37 @@
+import React, { CSSProperties, ReactNode } from 'react'
+
+import styled from 'styled-components'
+
+export type Props = {
+  size: 'label1' | 'label2'
+  children: ReactNode
+  className?: string
+  style?: CSSProperties
+  htmlFor: string
+}
+
+const StyledLabel = styled.label`
+  &[data-size='label1'] {
+    font-size: 14px;
+    line-height: 22px;
+  }
+  &[data-size='label2'] {
+    font-size: 13px;
+    line-height: 19px;
+  }
+`
+
+const Label = ({ children, className, style, htmlFor, size }: Props) => {
+  return (
+    <StyledLabel
+      data-size={size}
+      className={className}
+      style={style}
+      htmlFor={htmlFor}
+    >
+      {children}
+    </StyledLabel>
+  )
+}
+
+export { Label }

package/raw/components/atoms/logo/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,99 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it renders 1`] = `
+.c0[data-logo-is-light] > svg path {
+  fill: #fff;
+}
+
+.c0[data-has-badge] {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c0 .amp-logo img {
+  object-fit: contain;
+}
+
+@supports (display:flex; gap:1em) {
+  .c0[data-has-badge] {
+    gap: 0.5rem;
+  }
+}
+
+@supports not (display:flex; gap:1em) {
+  .c0[data-has-badge] > img,
+  .c0[data-has-badge] amp-image {
+    margin-left: 0.25rem;
+  }
+}
+
+<div
+  class="c0"
+  data-has-badge="false"
+>
+  <svg
+    fill="none"
+    height="24px"
+    viewBox="0 0 107 24"
+    width="107px"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3.16197 18.0042H0V0.735352H3.16197V7.0593C3.60049 6.71804 4.09012 6.45097 4.63415 6.25644C5.17653 6.06191 5.75683 5.96464 6.3734 5.96464C7.20099 5.96464 7.96593 6.13444 8.67152 6.4757C9.37711 6.81696 9.97224 7.27856 10.4586 7.86215C10.8476 8.332 11.1477 8.88427 11.3587 9.51568C11.5697 10.1487 11.6752 10.9747 11.6752 11.9968V18.0042H8.51325V11.7544C8.51325 11.1708 8.45226 10.7125 8.33026 10.3795C8.20827 10.0482 8.03352 9.76791 7.80766 9.5404C7.36914 9.10188 6.7773 8.88427 6.03214 8.88427C5.69089 8.88427 5.37106 8.93373 5.07102 9.03099C4.77098 9.12826 4.49897 9.25025 4.25663 9.39533C4.01264 9.54205 3.79832 9.69867 3.61203 9.87012C3.42574 10.0399 3.27572 10.1982 3.16197 10.3449V18.0042Z"
+      fill="#4D8DFF"
+    />
+    <path
+      d="M24.3165 15.9334C23.7493 16.6142 23.0306 17.1368 22.1634 17.5028C21.2963 17.8672 20.3994 18.0501 19.4762 18.0501C18.6008 18.0501 17.7864 17.9034 17.0314 17.6116C16.278 17.3198 15.6252 16.906 15.0729 16.3719C14.5206 15.8361 14.087 15.1915 13.7722 14.4381C13.4556 13.6847 13.2974 12.8456 13.2974 11.9207C13.2974 11.0932 13.4309 10.3117 13.698 9.57317C13.965 8.83625 14.3508 8.18341 14.8536 7.61466C15.3564 7.04754 15.9598 6.59748 16.6654 6.26447C17.371 5.93311 18.1607 5.7666 19.0361 5.7666C19.8472 5.7666 20.5923 5.92816 21.2732 6.25293C21.954 6.5777 22.5409 7.01128 23.0372 7.55366C23.5317 8.09769 23.9158 8.73404 24.1928 9.46271C24.4681 10.193 24.6066 10.9712 24.6066 11.7971C24.6066 12.1384 24.5819 12.4384 24.5341 12.6972H16.3621C16.4115 13.1193 16.5236 13.5001 16.7033 13.8397C16.8814 14.1809 17.1122 14.4727 17.3974 14.7151C17.6809 14.9591 18.0057 15.1487 18.37 15.2871C18.7344 15.4256 19.1284 15.4932 19.5504 15.4932C20.2313 15.4932 20.8264 15.3432 21.3375 15.0431C21.8485 14.7431 22.2409 14.4398 22.5179 14.1315L24.3165 15.9334ZM21.3737 10.3892C21.3408 10.1304 21.2649 9.87485 21.1429 9.62262C21.0209 9.37204 20.8594 9.14783 20.6566 8.9533C20.4538 8.75877 20.2148 8.60545 19.9395 8.4917C19.6642 8.37795 19.3641 8.3219 19.0394 8.3219C18.375 8.3219 17.8062 8.53291 17.3364 8.95495C16.8665 9.37699 16.5912 9.85507 16.5088 10.3892H21.3737Z"
+      fill="#4D8DFF"
+    />
+    <path
+      clip-rule="evenodd"
+      d="M36.5623 3.30191C36.5623 3.10738 36.5491 2.89966 36.5342 2.70183C36.521 2.32595 36.3957 1.95502 36.1616 1.59728C35.6044 0.746616 34.8246 0.336119 33.8454 0.377333C33.3228 0.407008 32.9255 0.650997 32.665 1.10106C32.4441 1.47858 32.388 1.92865 32.5117 2.33914C32.6337 2.74469 32.9139 3.07276 33.2948 3.2607C33.4926 3.3662 33.5503 3.45853 33.5305 3.64317V3.64976V14.5551C33.5305 14.5848 33.5289 14.6161 33.5272 14.6458C33.5239 14.7167 33.5206 14.7908 33.5305 14.865C33.5404 15.0068 33.4942 15.0777 33.3574 15.1354C32.7227 15.4107 32.426 15.93 32.4721 16.6752C32.5166 17.4467 33.0936 18.0056 33.8751 18.0352C33.9097 18.0369 33.9443 18.0369 33.9773 18.0369C35.4082 18.0369 36.4683 16.8318 36.5342 15.7141C36.5491 15.5113 36.5623 15.3134 36.5623 15.109V9.21206C36.5623 8.55758 36.5639 7.90309 36.5656 7.24695C36.5672 5.95612 36.5705 4.62077 36.5623 3.30191Z"
+      fill="#4D8DFF"
+      fill-rule="evenodd"
+    />
+    <path
+      clip-rule="evenodd"
+      d="M29.6839 15.1748C29.4416 15.0693 29.3641 14.9341 29.3889 14.6588V3.55065C29.4004 3.40887 29.4498 3.33798 29.5718 3.29017C29.646 3.2605 29.7219 3.23083 29.7812 3.18467C30.3368 2.81868 30.5907 2.12957 30.4126 1.4652C30.2197 0.797522 29.6955 0.390325 29.0113 0.375488C28.9948 0.375488 28.9767 0.375488 28.9602 0.375488C28.1458 0.375488 27.46 0.705204 26.9242 1.35474C26.5467 1.81305 26.3555 2.37686 26.3555 3.03134V9.18549C26.3555 10.2307 26.3588 11.2742 26.3621 12.3145C26.3654 13.3514 26.3687 14.3867 26.3687 15.4221C26.3687 16.3172 26.8913 17.4201 28.0601 17.8669C28.3667 17.979 28.6552 18.035 28.9272 18.035C29.0855 18.035 29.2405 18.0169 29.3905 17.979C29.9708 17.8339 30.3945 17.3311 30.4703 16.6981C30.5494 16.0568 30.2263 15.4319 29.6839 15.1748Z"
+      fill="#4D8DFF"
+      fill-rule="evenodd"
+    />
+    <path
+      clip-rule="evenodd"
+      d="M45.8571 17.4932L45.7928 17.3218L45.6247 17.3399C45.5126 17.3514 45.0163 17.3696 44.535 17.3877C43.4568 17.4273 43.3266 17.4372 43.2738 17.4537L43.1633 17.4916L43.165 17.6086C43.198 19.2852 42.1017 20.3618 41.1537 20.7739C40.763 20.9421 40.3245 21.0673 39.8184 21.1564C38.5457 21.3558 37.2614 21.3558 36.0019 21.1564C35.4018 21.0574 34.8644 20.8876 34.4094 20.6568C33.7813 20.3304 33.3213 19.821 33.046 19.1418C32.985 18.9901 32.9306 18.8286 32.8762 18.6703C32.8136 18.4857 32.7542 18.3126 32.6965 18.1856C32.4393 17.5839 31.8079 17.2608 31.1963 17.4157C30.5633 17.5724 30.1412 18.1246 30.1709 18.7577C30.1857 19.1253 30.255 19.4682 30.4116 19.9463C30.5732 20.4244 30.8287 20.9025 31.1485 21.3278C31.7288 22.1158 32.4987 22.7176 33.5027 23.1676C34.4671 23.6062 35.5304 23.8633 36.7553 23.954C37.1988 23.9837 37.6175 24.0002 38.0165 24.0002C38.8639 24.0002 39.6222 23.9309 40.341 23.7891C41.406 23.588 42.2945 23.2715 43.0578 22.8214C44.5449 21.9378 45.9494 20.7739 45.8571 17.4932Z"
+      fill="#325C91"
+      fill-rule="evenodd"
+    />
+    <path
+      d="M44.5199 5.53613C41.1188 5.53613 38.3525 8.34037 38.3525 11.7892C38.3525 15.2364 41.1188 18.0422 44.5199 18.0422C47.9209 18.0422 50.6872 15.238 50.6872 11.7892C50.6872 8.34037 47.9209 5.53613 44.5199 5.53613ZM47.8599 11.7892C47.8599 13.6587 46.3613 15.1787 44.5199 15.1787C42.6784 15.1787 41.1798 13.657 41.1798 11.7892C41.1798 9.9197 42.6784 8.39972 44.5199 8.39972C46.3613 8.39807 47.8599 9.9197 47.8599 11.7892Z"
+      fill="#4D8DFF"
+    />
+    <path
+      d="M45.913 11.8664C45.913 12.6314 45.2932 13.2529 44.5266 13.2529C43.7617 13.2529 43.1401 12.633 43.1401 11.8664C43.1401 11.1015 43.76 10.48 44.5266 10.48C45.2932 10.48 45.913 11.1015 45.913 11.8664Z"
+      fill="#325C91"
+    />
+    <path
+      d="M52.1709 18.0138V0.728516H55.3362V7.0574C56.261 6.32708 57.3722 5.9611 58.6712 5.9611C59.4659 5.9611 60.2176 6.11937 60.9232 6.43589C61.6288 6.75242 62.2454 7.18764 62.7729 7.73827C63.3004 8.29054 63.7142 8.94008 64.0143 9.68524C64.3143 10.432 64.4643 11.2431 64.4643 12.1202C64.4643 12.9313 64.3308 13.6896 64.0621 14.3969C63.795 15.1025 63.4257 15.724 62.9542 16.2598C62.4349 16.8763 61.7821 17.3643 60.9941 17.7204C60.2061 18.0765 59.3752 18.2562 58.4981 18.2562C57.8981 18.2562 57.3211 18.1622 56.7704 17.9759C56.2182 17.7896 55.6989 17.4847 55.2125 17.0626V18.0122H52.1709V18.0138ZM55.3362 13.8759C55.6445 14.3144 56.0467 14.6672 56.5413 14.9343C57.0359 15.2014 57.5832 15.3366 58.1849 15.3366C58.6234 15.3366 59.0323 15.2558 59.4147 15.0926C59.7956 14.931 60.1286 14.7068 60.4121 14.4232C60.6957 14.1397 60.915 13.8017 61.0699 13.4127C61.2232 13.0236 61.3007 12.5933 61.3007 12.1218C61.3007 11.6998 61.2282 11.2942 61.0815 10.9052C60.9347 10.5161 60.732 10.1716 60.4731 9.86988C60.2127 9.56984 59.8928 9.33079 59.512 9.1511C59.1312 8.97305 58.7125 8.88403 58.2574 8.88403C57.6409 8.88403 57.0804 9.01756 56.5775 9.28628C56.0747 9.55335 55.6609 9.90779 55.3362 10.3447V13.8759Z"
+      fill="#325C91"
+    />
+    <path
+      d="M77.8869 18.014H74.8436V17.0644C74.3573 17.4865 73.8363 17.7914 73.2857 17.9777C72.7334 18.164 72.1581 18.258 71.558 18.258C70.681 18.258 69.8501 18.0799 69.0621 17.7222C68.274 17.3661 67.6212 16.8781 67.1019 16.2616C66.6304 15.7258 66.2628 15.1043 65.9941 14.3987C65.727 13.6931 65.5918 12.9347 65.5918 12.122C65.5918 11.2449 65.7418 10.4338 66.0419 9.68703C66.3419 8.94023 66.7557 8.29069 67.2832 7.74006C67.8108 7.18779 68.4241 6.75421 69.1214 6.43768C69.8188 6.12115 70.5738 5.96289 71.3849 5.96289C72.0658 5.96289 72.6955 6.0684 73.2709 6.27942C73.8462 6.49044 74.3705 6.78224 74.8403 7.15646V6.20688H77.8836V18.014H77.8869ZM74.7216 10.3448C74.3969 9.90629 73.9831 9.55349 73.4802 9.28642C72.9774 9.01935 72.4169 8.88417 71.8003 8.88417C71.3288 8.88417 70.9068 8.9732 70.5342 9.15124C70.16 9.32929 69.8435 9.56998 69.5847 9.87002C69.3242 10.1701 69.1214 10.5146 68.9763 10.9053C68.8296 11.2944 68.7571 11.6999 68.7571 12.122C68.7571 12.5935 68.8346 13.0221 68.9879 13.4128C69.1412 13.8019 69.3604 14.1398 69.6456 14.4234C69.9292 14.7069 70.2622 14.9312 70.643 15.0927C71.0239 15.2543 71.4344 15.3367 71.8729 15.3367C72.473 15.3367 73.0203 15.2032 73.5165 14.9345C74.0111 14.6674 74.4133 14.3129 74.7216 13.8761V10.3448Z"
+      fill="#325C91"
+    />
+    <path
+      d="M90.7938 15.6036C90.0965 16.5284 89.3084 17.2027 88.4331 17.6247C87.556 18.0468 86.5586 18.2578 85.4392 18.2578C84.5309 18.2578 83.6868 18.0995 82.907 17.783C82.1272 17.4665 81.4579 17.028 80.8991 16.4691C80.3385 15.9086 79.9017 15.2607 79.5851 14.5221C79.2686 13.7836 79.1104 12.984 79.1104 12.1234C79.1104 11.2629 79.2719 10.46 79.5967 9.71322C79.9215 8.96641 80.3666 8.31358 80.9353 7.75306C81.5024 7.19255 82.1734 6.75402 82.9433 6.43915C83.7132 6.12262 84.554 5.96436 85.4623 5.96436C86.4844 5.96436 87.4307 6.18032 88.2979 6.60895C89.1667 7.03923 89.8756 7.61129 90.4278 8.32512L88.1874 10.2968C87.8626 9.87478 87.4686 9.53353 87.007 9.2747C86.5438 9.01587 86.0294 8.88563 85.4607 8.88563C85.0057 8.88563 84.5836 8.97136 84.1946 9.14117C83.8055 9.31097 83.4675 9.54342 83.184 9.83522C82.9004 10.127 82.6762 10.4683 82.5147 10.8573C82.3515 11.2464 82.2707 11.6684 82.2707 12.1234C82.2707 12.5949 82.3515 13.0236 82.5147 13.4143C82.6762 13.8033 82.9004 14.1413 83.184 14.4249C83.4675 14.7084 83.8088 14.9326 84.2061 15.0942C84.6034 15.2557 85.0452 15.3382 85.5332 15.3382C86.1828 15.3382 86.7499 15.1766 87.2378 14.8518C87.7242 14.5271 88.0984 14.171 88.3572 13.7803L90.7938 15.6036Z"
+      fill="#325C91"
+    />
+    <path
+      d="M93.3276 14.4118C93.7332 14.7861 94.2244 15.0729 94.7998 15.2757C95.3751 15.4785 95.9637 15.5807 96.5654 15.5807C96.9875 15.5807 97.3452 15.4867 97.637 15.3004C97.9288 15.1141 98.0755 14.8751 98.0755 14.5817C98.0755 14.2899 97.9337 14.0508 97.6502 13.8629C97.3666 13.6766 97.0138 13.5068 96.5918 13.3518C96.1698 13.1985 95.7115 13.0353 95.2169 12.8655C94.7223 12.6957 94.264 12.4764 93.842 12.2077C93.4199 11.9406 93.0671 11.6027 92.7836 11.1971C92.5 10.7916 92.3582 10.2723 92.3582 9.63922C92.3582 9.07211 92.4835 8.5594 92.7358 8.10604C92.988 7.65103 93.3243 7.26527 93.7464 6.94874C94.1684 6.63221 94.6514 6.38823 95.1954 6.21842C95.7395 6.04862 96.3033 5.96289 96.8869 5.96289C97.276 5.96289 97.6667 5.99587 98.0557 6.06016C98.4448 6.12446 98.8141 6.21513 99.1636 6.32723C99.5131 6.44098 99.8362 6.57122 100.138 6.71629C100.438 6.86302 100.685 7.00809 100.88 7.15481L99.3944 9.44304C99.0861 9.21554 98.7366 9.02595 98.3475 8.87098C97.9585 8.71767 97.5529 8.64018 97.1309 8.64018C96.6924 8.64018 96.3148 8.72096 95.9983 8.88417C95.6818 9.04573 95.5235 9.28148 95.5235 9.58976C95.5235 9.85024 95.6653 10.0563 95.9488 10.2113C96.2324 10.3662 96.5852 10.5163 97.0072 10.6613C97.4293 10.8081 97.8876 10.9663 98.3821 11.1361C98.8767 11.3059 99.335 11.5384 99.7571 11.8302C100.179 12.122 100.532 12.488 100.815 12.9265C101.099 13.365 101.241 13.9255 101.241 14.6064C101.241 15.1751 101.111 15.6813 100.852 16.128C100.591 16.5748 100.247 16.9556 99.8164 17.2721C99.3861 17.5887 98.8866 17.8327 98.3195 18.0025C97.7507 18.1723 97.1589 18.258 96.5423 18.258C95.7147 18.258 94.8905 18.1244 94.0711 17.8557C93.2518 17.5887 92.4918 17.1946 91.7944 16.6753L93.3276 14.4118Z"
+      fill="#325C91"
+    />
+    <path
+      d="M102.32 2.01951C102.32 1.4524 102.523 0.97266 102.929 0.583595C103.334 0.194531 103.821 0 104.389 0C104.958 0 105.444 0.194531 105.85 0.583595C106.255 0.97266 106.458 1.4524 106.458 2.01951C106.458 2.58827 106.255 3.06635 105.85 3.45542C105.444 3.84448 104.956 4.03901 104.389 4.03901C103.821 4.03901 103.334 3.84448 102.929 3.45542C102.523 3.06635 102.32 2.58827 102.32 2.01951ZM105.972 18.014H102.807V6.20689H105.972V18.014Z"
+      fill="#325C91"
+    />
+  </svg>
+</div>
+`;

package/raw/components/atoms/logo/index.stories.tsx

@@ -0,0 +1,84 @@
+import React from 'react'
+
+import { Story } from '@storybook/react/types-6-0'
+
+import { Logo, Props } from '.'
+
+export default {
+  component: Logo,
+  title: 'Atoms/Logo',
+  argTypes: {
+    type: {
+      control: {
+        type: 'select',
+        options: [
+          'hellobacsi',
+          'hellosehat',
+          'hellohealth',
+          'hellotogether',
+          'hellocare',
+          'logomark',
+          'hellodoctor',
+          'hellodoktor',
+          'hellosayarwon',
+          'helloyishi',
+          'hellokhunmor',
+          'hellokrupet',
+          'helloswasthya',
+        ],
+      },
+      description: 'Show the logo for any Hello brand',
+    },
+  },
+}
+
+const Template: Story<Props> = (args) => <Logo {...args} />
+
+export const HelloBacsi = Template.bind({})
+
+const defaultprops = {
+  width: '350px',
+  height: 'auto',
+  isLightLogo: false,
+  badge: <img src="//unsplash.it/150" />,
+}
+
+HelloBacsi.args = {
+  type: 'hellobacsi',
+  ...defaultprops,
+}
+
+export const HelloHealth = Template.bind({})
+
+HelloHealth.args = {
+  type: 'hellohealth',
+  ...defaultprops,
+}
+
+export const HelloSehat = Template.bind({})
+
+HelloSehat.args = {
+  type: 'hellosehat',
+  ...defaultprops,
+}
+
+export const HelloTogether = Template.bind({})
+
+HelloTogether.args = {
+  type: 'hellotogether',
+  ...defaultprops,
+}
+
+export const HelloCare = Template.bind({})
+
+HelloCare.args = {
+  type: 'hellocare',
+  ...defaultprops,
+}
+
+export const LogoMark = Template.bind({})
+
+LogoMark.args = {
+  type: 'logomark',
+  ...defaultprops,
+}

package/raw/components/atoms/logo/index.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import { render, cleanup } from '@testing-library/react'
+import 'jest-styled-components'
+
+import { Logo } from '.'
+
+afterEach(cleanup)
+
+test('it renders', () => {
+  const logo = render(<Logo type="hellobacsi" width="100px" height="auto" />)
+
+  const self = logo.container.firstChild
+
+  expect(self).toMatchSnapshot()
+
+  expect('svg').toBeInTheDocument
+})