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

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

@@ -0,0 +1,83 @@
+import React, { CSSProperties } from 'react'
+
+import { Text } from 'components/atoms'
+import { Progress } from 'components/atoms/progress'
+import { theme } from 'misc/theme'
+
+import {
+  StyledSingleRatingLabel,
+  StyledSingleRatingProgressWrapper,
+  StyledSingleRatingWrapper,
+  StyledStarsRatingTable,
+} from './index.styled'
+
+type StarRate = {
+  star?: number
+  label: string
+  percent: number
+}
+
+export type Props = {
+  /**
+   * rates for 5 (multiple) stars
+   */
+  rates?: StarRate[]
+  /**
+   * show empty 5 rate if rates Prop is empty
+   */
+  useDefaultEmptyRates?: boolean
+  /**
+   * style
+   */
+  style?: CSSProperties
+  className?: string
+}
+
+const StarsRatingBox = ({
+  rates,
+  useDefaultEmptyRates = true,
+  style,
+  className,
+}: Props) => {
+  const defaultRates: StarRate[] = Array.from({ length: 5 }, (_, index) => {
+    return {
+      star: 5 - index,
+      label: String(5 - index),
+      percent: 0,
+    }
+  })
+
+  return (
+    <StyledStarsRatingTable style={style} className={className}>
+      <tbody>
+        {(rates || (useDefaultEmptyRates ? defaultRates : [])).map(
+          (rate, index) => {
+            return (
+              <StyledSingleRatingWrapper key={index}>
+                <StyledSingleRatingLabel>
+                  <Text
+                    size="p3"
+                    color={theme.colors.gray500}
+                    type="regular"
+                    style={{
+                      display: 'block',
+                      height: 24,
+                      lineHeight: '20px',
+                    }}
+                  >
+                    {rate.label}
+                  </Text>
+                </StyledSingleRatingLabel>
+                <StyledSingleRatingProgressWrapper>
+                  <Progress percent={rate.percent} />
+                </StyledSingleRatingProgressWrapper>
+              </StyledSingleRatingWrapper>
+            )
+          },
+        )}
+      </tbody>
+    </StyledStarsRatingTable>
+  )
+}
+
+export { StarsRatingBox }

package/src/components/molecules/statisticCard/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it renders 1`] = `
+.c0 {
+  border-radius: 6px;
+  padding: 12px;
+  background-color: #E3F2FF;
+}
+
+.c1 {
+  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;
+  color: #262626;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.c2 {
+  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;
+  margin-top: 4px;
+  color: #262626;
+  font-size: 28px;
+  font-weight: 600;
+}
+
+.c2 > svg {
+  width: 24px;
+  height: 24px;
+  margin-right: 12px;
+}
+
+.c2[data-size='small'] {
+  margin-left: 23px;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+<div
+  class="c0 string"
+  data-card-color="#E3F2FF"
+  data-is-in-card="true"
+  data-size="big"
+>
+  <div
+    class="c1"
+  >
+    Total Bookings
+  </div>
+  <div
+    class="c2"
+    data-size="big"
+  >
+    <svg
+      data-name="Layer 1"
+      viewBox="0 0 26.56 26.94"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>
+        like
+      </title>
+      <path
+        d="M7.36 25.69H3.69a2.41 2.41 0 01-1.72-.71 2.45 2.45 0 01-.72-1.73v-8.56a2.46 2.46 0 012.44-2.44h3.67m8.56-2.44V4.92a3.67 3.67 0 00-3.67-3.67l-4.89 11v13.44h13.79a2.44 2.44 0 002.44-2.07l1.69-11a2.48 2.48 0 00-.07-1 2.43 2.43 0 00-.5-.92 2.39 2.39 0 00-.85-.63 2.27 2.27 0 00-1-.21z"
+        fill="none"
+        stroke="#262626"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2.5"
+      />
+    </svg>
+    12789
+  </div>
+</div>
+`;

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

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import { Story } from '@storybook/react/types-6-0'
+
+import { StatisticCard, Props } from './index'
+
+export default {
+  component: StatisticCard,
+  title: 'Molecules/StatisticCard',
+}
+
+const Template: Story<Props> = (args) => <StatisticCard {...args} />
+
+export const Normal = Template.bind({})
+
+Normal.args = {
+  type: 'big',
+  description: 'Total Bookings',
+  value: 12789,
+  withIcon: (
+    <svg
+      data-name="Layer 1"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 26.56 26.94"
+    >
+      <title>{'like'}</title>
+      <path
+        d="M7.36 25.69H3.69a2.41 2.41 0 01-1.72-.71 2.45 2.45 0 01-.72-1.73v-8.56a2.46 2.46 0 012.44-2.44h3.67m8.56-2.44V4.92a3.67 3.67 0 00-3.67-3.67l-4.89 11v13.44h13.79a2.44 2.44 0 002.44-2.07l1.69-11a2.48 2.48 0 00-.07-1 2.43 2.43 0 00-.5-.92 2.39 2.39 0 00-.85-.63 2.27 2.27 0 00-1-.21z"
+        fill="none"
+        stroke="#262626"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2.5}
+      />
+    </svg>
+  ),
+  isInACard: true,
+  cardColor: '#E3F2FF',
+  className: 'string',
+}

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

@@ -0,0 +1,47 @@
+import { ThemeProps } from 'misc/theme'
+import styled from 'styled-components'
+
+export const StyledStatisticContainer = styled.div`
+  border-radius: 6px;
+  ${(props) =>
+    props['data-is-in-card'] &&
+    `
+  padding: 12px; 
+  background-color: ${props['data-card-color']};`}
+`
+export const StyledDot = styled.div`
+  width: 13px;
+  height: 13px;
+  margin-right: 10px;
+  background-color: ${(props) => props['data-color']};
+  border-radius: 50%;
+`
+
+export const StyledDescriptionWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  color: ${(props: ThemeProps) => props.theme.colors.gray800};
+  font-size: ${(props: ThemeProps) => props.theme.sizes.fsParagraph4};
+  font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
+`
+
+export const StyledStatisticNumberWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 4px;
+  color: ${(props: ThemeProps) => props.theme.colors.gray800};
+  font-size: ${(props: ThemeProps) => props.theme.sizes.fsHeading2};
+  font-weight: ${(props: ThemeProps) => props.theme.sizes.fwSemiBold};
+
+  & > svg {
+    width: 24px;
+    height: 24px;
+    margin-right: 12px;
+  }
+
+  &[data-size='small'] {
+    margin-left: 23px;
+    font-size: ${(props: ThemeProps) => props.theme.sizes.fsParagraph4};
+    font-weight: ${(props: ThemeProps) => props.theme.sizes.fwBold};
+  }
+`

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

@@ -0,0 +1,44 @@
+import React from 'react'
+
+import { render, cleanup } from '@testing-library/react'
+import 'jest-styled-components'
+
+import { StatisticCard } from '.'
+import MockTheme from '../../../misc/mockTheme'
+
+afterEach(cleanup)
+
+test('it renders', () => {
+  const statisticCard = render(
+    <MockTheme>
+      <StatisticCard
+        type="big"
+        description="Total Bookings"
+        value={12789}
+        withIcon={
+          <svg
+            data-name="Layer 1"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 26.56 26.94"
+          >
+            <title>{'like'}</title>
+            <path
+              d="M7.36 25.69H3.69a2.41 2.41 0 01-1.72-.71 2.45 2.45 0 01-.72-1.73v-8.56a2.46 2.46 0 012.44-2.44h3.67m8.56-2.44V4.92a3.67 3.67 0 00-3.67-3.67l-4.89 11v13.44h13.79a2.44 2.44 0 002.44-2.07l1.69-11a2.48 2.48 0 00-.07-1 2.43 2.43 0 00-.5-.92 2.39 2.39 0 00-.85-.63 2.27 2.27 0 00-1-.21z"
+              fill="none"
+              stroke="#262626"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2.5}
+            />
+          </svg>
+        }
+        isInACard={true}
+        cardColor="#E3F2FF"
+        className="string"
+      />
+    </MockTheme>,
+  )
+
+  const self = statisticCard.container.firstChild
+  expect(self).toMatchSnapshot()
+})

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

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import {
+  StyledDescriptionWrapper,
+  StyledDot,
+  StyledStatisticContainer,
+  StyledStatisticNumberWrapper,
+} from './index.styled'
+
+export type Props = {
+  type: 'big' | 'small'
+  description: string
+  value: string | number
+  withIcon?: JSX.Element
+  isInACard?: boolean
+  cardColor?: string
+  className?: string
+}
+
+const StatisticCard = ({
+  type,
+  description,
+  value,
+  withIcon,
+  isInACard,
+  cardColor,
+  className,
+}: Props) => {
+  return (
+    <StyledStatisticContainer
+      className={className}
+      data-size={type}
+      data-is-in-card={type === 'big' && isInACard}
+      data-card-color={cardColor}
+    >
+      <StyledDescriptionWrapper>
+        {type === 'small' && <StyledDot data-color={cardColor} />}
+        {description}
+      </StyledDescriptionWrapper>
+      <StyledStatisticNumberWrapper data-size={type}>
+        {type !== 'small' && withIcon}
+        {value}
+      </StyledStatisticNumberWrapper>
+    </StyledStatisticContainer>
+  )
+}
+
+export { StatisticCard }