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

package/src/components/atoms/marryBabyText/index.styled.tsx

@@ -1,86 +0,0 @@
-import React from 'react'
-
-import { ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-const Heading = ({
-  type,
-  ...elementProps
-}: {
-  type: string
-  [elementProps: string]: string | JSX.Element | JSX.Element[] | React.ReactNode
-}) => {
-  return React.createElement(type, elementProps)
-}
-
-export const StyledHeading = styled(Heading)`
-  color: var(--text-color, ${(props: ThemeProps) => props.theme.mbColors.dark});
-  font-family: Krub;
-  font-weight: 600;
-  letter-spacing: -0.2px;
-
-  &[data-type='headline-1'] {
-    font-size: 40px;
-    line-height: 60px;
-  }
-  &[data-type='headline-2'] {
-    font-size: 32px;
-    line-height: 48px;
-  }
-  &[data-type='headline-3'] {
-    font-size: 24px;
-    line-height: 40px;
-  }
-  &[data-type='headline-4'] {
-    font-size: 18px;
-    line-height: 32px;
-  }
-`
-
-export const StyledText = styled.p`
-  color: var(--text-color, ${(props: ThemeProps) => props.theme.mbColors.dark});
-  letter-spacing: -0.2px;
-
-  &[data-type='subtitle-1'] {
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 26px;
-  }
-  &[data-type='subtitle-2'] {
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 24px;
-  }
-  &[data-type='subtitle-3'] {
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 20px;
-  }
-  &[data-type='bodytext-1'] {
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 28px;
-  }
-  &[data-type='bodytext-2'] {
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 24px;
-  }
-  &[data-type='bodytext-3'] {
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 20px;
-  }
-  &[data-type='caption-1'] {
-    font-size: 10px;
-    font-weight: 500;
-    letter-spacing: -0.1px;
-    line-height: 14px;
-  }
-  &[data-type='caption-2'] {
-    font-size: 10px;
-    font-weight: 400;
-    letter-spacing: -0.1px;
-    line-height: 14px;
-  }
-`

package/src/components/atoms/marryBabyText/index.tsx

@@ -1,57 +0,0 @@
-import React from 'react'
-
-import { CSSProperties } from 'styled-components'
-
-import { StyledHeading, StyledText } from './index.styled'
-
-type HeadingProps = {
-  type: 'h1' | 'h2' | 'h3' | 'h4'
-  color?: string
-  style?: CSSProperties
-  [x: string]: string | JSX.Element | JSX.Element[] | React.ReactNode
-}
-
-const MarryBabyHeading = ({ type, color, style, ...props }: HeadingProps) => {
-  const DATATYPE = {
-    h1: 'headline-1',
-    h2: 'headline-2',
-    h3: 'headline-3',
-    h4: 'headline-4',
-  }
-
-  return (
-    <StyledHeading
-      type={type}
-      data-type={DATATYPE[type]}
-      style={{ ...(color && { '--text-color': color }), ...style }}
-      {...props}
-    />
-  )
-}
-
-type TextProps = {
-  type:
-    | 'subtitle-1'
-    | 'subtitle-2'
-    | 'subtitle-3'
-    | 'bodytext-1'
-    | 'bodytext-2'
-    | 'bodytext-3'
-    | 'caption-1'
-    | 'caption-2'
-  color?: string
-  style?: CSSProperties
-  [x: string]: string | JSX.Element | JSX.Element[] | React.ReactNode
-}
-
-const MarryBabyText = ({ type, color, style, ...props }: TextProps) => {
-  return (
-    <StyledText
-      data-type={type}
-      style={{ ...style, ...(color && { '--text-color': color }) }}
-      {...props}
-    />
-  )
-}
-
-export { MarryBabyHeading, MarryBabyText }

package/src/components/atoms/pagination/__snapshots__/index.test.tsx.snap

@@ -1,185 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`it renders 1`] = `
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.c0 li {
-  -webkit-transition: all 0.3s ease;
-  transition: all 0.3s ease;
-}
-
-.c0 [data-page-active] {
-  background: #2d87f3;
-  color: #fff;
-}
-
-.c0 [data-page-active] > a {
-  color: #fff;
-}
-
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 32px;
-  height: 32px;
-  box-sizing: border-box;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  border: 1px solid #d9d9d9;
-  margin: 0 2px;
-  border-radius: 4px;
-  color: #262626;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 700;
-}
-
-.c1[data-last-page] {
-  border: none;
-  background-color: #f2f2f2;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c1[data-last-page] svg path {
-  stroke: #bfbfbf;
-}
-
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 32px;
-  height: 32px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  margin: 0 2px;
-  border-radius: 4px;
-  color: #262626;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 700;
-}
-
-.c2 > a {
-  color: #262626;
-  -webkit-text-decoration: unset;
-  text-decoration: unset;
-  display: block;
-  width: 100%;
-  height: 100%;
-  line-height: 32px;
-  text-align: center;
-}
-
-<div
-  class="c0"
->
-  <div
-    class="c1 prev-page"
-  >
-    <svg
-      fill="none"
-      height="10"
-      viewBox="0 0 7 10"
-      width="7"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M5.5 9L1.5 5L5.5 1"
-        stroke="#2D87F3"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="1.5"
-      />
-    </svg>
-  </div>
-  <li
-    class="c2"
-  >
-    1
-  </li>
-  <li
-    class="c2"
-  >
-    2
-  </li>
-  <li
-    class="c2"
-    data-page-active="true"
-  >
-    3
-  </li>
-  <li
-    class="c2"
-  >
-    4
-  </li>
-  <li
-    class="c2"
-  >
-    5
-  </li>
-  <li
-    class="c2"
-  >
-    ...
-  </li>
-  <li
-    class="c2"
-  >
-    10
-  </li>
-  <div
-    class="c1 next-page"
-  >
-    <svg
-      fill="none"
-      height="10"
-      viewBox="0 0 7 10"
-      width="7"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M1.5 9L5.5 5L1.5 1"
-        stroke="#2D87F3"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="1.5"
-      />
-    </svg>
-  </div>
-</div>
-`;

package/src/components/atoms/pagination/index.stories.tsx

@@ -1,92 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { Pagination, Props } from './index'
-
-export default {
-  component: Pagination,
-  title: 'Atoms/Pagination',
-}
-
-const defaultProps = {
-  currentPage: 3,
-  onChange: (page) => {
-    console.log('onChange', page)
-  },
-  onClick: (e) => {
-    console.log('onClick', e)
-  },
-}
-
-const Template: Story<Props> = (args) => (
-  <div
-    style={{
-      display: 'flex',
-      justifyContent: 'center',
-    }}
-  >
-    <Pagination {...args} />
-  </div>
-)
-
-export const Normal1Page = Template.bind({})
-
-Normal1Page.args = {
-  ...defaultProps,
-  pagesAmount: 1,
-}
-
-export const Normal3Pages = Template.bind({})
-
-Normal3Pages.args = {
-  ...defaultProps,
-  pagesAmount: 3,
-}
-
-export const Normal5Pages = Template.bind({})
-
-Normal5Pages.args = {
-  ...defaultProps,
-  pagesAmount: 5,
-}
-
-export const Normal10Pages = Template.bind({})
-
-Normal10Pages.args = {
-  ...defaultProps,
-  pagesAmount: 10,
-}
-
-export const Normal15Pages = Template.bind({})
-
-Normal15Pages.args = {
-  ...defaultProps,
-  pagesAmount: 15,
-}
-
-export const WithHref = Template.bind({})
-
-WithHref.args = {
-  ...defaultProps,
-  pagesAmount: 10,
-  href: '/care/all/hospital/',
-}
-
-export const WithHrefAndParam = Template.bind({})
-
-WithHrefAndParam.args = {
-  ...defaultProps,
-  pagesAmount: 10,
-  href: '/care/all/hospital/?foo=bar&name=john',
-}
-
-export const WithPageName = Template.bind({})
-
-WithPageName.args = {
-  ...defaultProps,
-  pagesAmount: 10,
-  queryPageName: 'currentPage',
-  // It's become: /care/all/hospital/?foo=bar&name=john&currentPage=2
-  href: '/care/all/hospital/?foo=bar&name=john',
-}

package/src/components/atoms/pagination/index.styled.tsx

@@ -1,73 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-export const StyledPagination = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  user-select: none;
-  li {
-    transition: all 0.3s ease;
-  }
-  [data-page-active] {
-    background: ${(props: ThemeProps) => props.theme.colors.primaryBase};
-    color: ${(props: ThemeProps) => props.theme.colors.white};
-
-    > a {
-      color: ${(props: ThemeProps) => props.theme.colors.white};
-    }
-  }
-`
-
-export const StyledPageBlock = styled.div`
-  display: flex;
-  width: 32px;
-  height: 32px;
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid ${(props: ThemeProps) => props.theme.colors.gray200};
-  margin: 0 2px;
-  border-radius: 4px;
-  color: ${(props: ThemeProps) => props.theme.colors.gray800};
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: ${(props: ThemeProps) => props.theme.sizes.fwBold};
-
-  &[data-last-page] {
-    border: none;
-    background-color: ${(props: ThemeProps) => props.theme.colors.gray100};
-    cursor: not-allowed;
-    pointer-events: none;
-
-    svg {
-      path {
-        stroke: ${(props: ThemeProps) => props.theme.colors.gray300};
-      }
-    }
-  }
-`
-
-export const StyledPaginationBlock = styled.li`
-  display: flex;
-  width: 32px;
-  height: 32px;
-  align-items: center;
-  justify-content: center;
-  margin: 0 2px;
-  border-radius: 4px;
-  color: ${(props: ThemeProps) => props.theme.colors.gray800};
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: ${(props: ThemeProps) => props.theme.sizes.fwBold};
-
-  > a {
-    color: ${(props: ThemeProps) => props.theme.colors.gray800};
-    text-decoration: unset;
-    display: block;
-    width: 100%;
-    height: 100%;
-    line-height: 32px;
-    text-align: center;
-  }
-`

package/src/components/atoms/pagination/index.test.tsx

@@ -1,26 +0,0 @@
-import React from 'react'
-
-import { render, cleanup } from '@testing-library/react'
-import 'jest-styled-components'
-
-import { Pagination } from '.'
-import MockTheme from '../../../misc/mockTheme'
-
-afterEach(cleanup)
-
-test('it renders', () => {
-  const rendered = render(
-    <MockTheme>
-      <Pagination
-        pagesAmount={10}
-        currentPage={3}
-        onChange={(page) => {
-          console.log(page)
-        }}
-      />
-    </MockTheme>,
-  )
-
-  const self = rendered.container.firstChild
-  expect(self).toMatchSnapshot()
-})