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

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

@@ -1,58 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import { MediaQueries } from 'misc/utils'
-import styled from 'styled-components'
-
-export const StyledTabs = styled.ul`
-  display: inline-flex;
-  max-width: 100%;
-  border-bottom: 1px solid
-    ${(props: ThemeProps) => props.theme.colors.neutral100};
-  -webkit-overflow-scrolling: touch;
-  overflow-x: auto;
-  overflow-y: hidden;
-`
-
-export const StyledTab = styled.li`
-  display: flex;
-
-  align-items: center;
-  padding-bottom: 4px;
-
-  ${MediaQueries.mbDown} {
-    height: 37px;
-  }
-
-  ${MediaQueries.mbUp} {
-    height: 35px;
-  }
-
-  p {
-    color: ${(props: ThemeProps) => props.theme.colors.gray400};
-    white-space: nowrap;
-  }
-
-  &:not(:last-child) {
-    margin-right: 24px;
-  }
-
-  &[data-is-tab-active] {
-    p {
-      color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
-    }
-    border-bottom: 3px solid
-      ${(props: ThemeProps) => props.theme.colors.primaryBase};
-    bottom: -1px;
-    position: relative;
-  }
-
-  &:not([data-is-tab-active]) {
-    cursor: pointer;
-  }
-`
-export const StyledTabContent = styled.div`
-  display: flex;
-  align-items: center;
-`
-export const StyledIcon = styled.div`
-  margin-right: 8px;
-`

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

@@ -1,49 +0,0 @@
-import React from 'react'
-
-import { render, cleanup } from '@testing-library/react'
-import 'jest-styled-components'
-
-import { Tabs } from '.'
-import MockTheme from '../../../misc/mockTheme'
-
-afterEach(cleanup)
-
-test('it renders', () => {
-  const tabs = render(
-    <MockTheme>
-      <Tabs
-        initialTab={0}
-        tabContent={[
-          {
-            name: 'Tab 1',
-          },
-          {
-            name: 'With icon',
-            icon: <img src="//unsplash.it/16/16" />,
-          },
-          {
-            name: 'Tab 2',
-          },
-          {
-            name: 'With icon',
-            icon: <img src="//unsplash.it/16/16" />,
-          },
-          {
-            name: 'With icon',
-            icon: <img src="//unsplash.it/16/16" />,
-          },
-          {
-            name: 'With icon',
-            icon: <img src="//unsplash.it/16/16" />,
-          },
-        ]}
-      />
-    </MockTheme>,
-  )
-
-  const self = tabs.container.firstChild.firstChild
-
-  expect(self).toMatchSnapshot()
-
-  expect(self).toHaveAttribute('data-is-tab-active', 'true')
-})

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

@@ -1,89 +0,0 @@
-import React, { useEffect, useState } from 'react'
-
-import { Text, TextSize, TextType } from 'components/atoms'
-import { useId } from 'react-id-generator'
-import { CSSProperties } from 'styled-components'
-
-import { theme } from '../../../misc/theme'
-import {
-  StyledTabs,
-  StyledTab,
-  StyledTabContent,
-  StyledIcon,
-} from './index.styled'
-
-type TabContent = {
-  name: string
-  icon?: JSX.Element
-  dataEventCategory?: string
-  dataEventAction?: string
-  dataEventLabel?: string
-  textType?: TextType
-  textSize?: TextSize
-  textColor?: string
-}
-
-export type Props = {
-  tabContent: Array<TabContent>
-  onChange?: (n: number) => void
-  className?: string
-  initialTab?: number
-  style?: CSSProperties
-  dataEventCategory?: string
-  dataEventAction?: string
-  dataEventLabel?: string
-}
-
-const Tabs = ({
-  style,
-  initialTab,
-  tabContent,
-  onChange,
-  className,
-  dataEventCategory,
-  dataEventAction,
-  dataEventLabel,
-}: Props) => {
-  const [activeTab, setActiveTab] = useState(initialTab || 0)
-  const idList = useId(tabContent.length)
-
-  useEffect(() => {
-    setActiveTab(initialTab)
-  }, [initialTab])
-
-  return (
-    <StyledTabs style={style} className={className} role="tablist">
-      {tabContent.map((tab, i) => (
-        <StyledTab
-          data-is-tab-active={activeTab === i || undefined}
-          aria-selected={activeTab === i}
-          role="tab"
-          onClick={() => {
-            setActiveTab(i)
-            onChange && onChange(i)
-          }}
-          key={idList[i]}
-          data-event-category={dataEventCategory}
-          data-event-action={dataEventAction}
-          data-event-label={dataEventLabel}
-        >
-          <StyledTabContent>
-            {tab.icon && <StyledIcon>{tab.icon}</StyledIcon>}
-            <Text
-              size={tab.textSize || 'sm'}
-              type={tab.textType || 'bold'}
-              color={tab.textColor || theme.colors.gray800}
-              dataEventCategory={tab.dataEventCategory}
-              dataEventAction={tab.dataEventAction}
-              dataEventLabel={tab.dataEventLabel}
-            >
-              {tab.name}
-            </Text>
-          </StyledTabContent>
-        </StyledTab>
-      ))}
-    </StyledTabs>
-  )
-}
-
-export { Tabs }

package/src/components/organisms/footer/discoverFooter/index.styled.tsx

@@ -1,286 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import { MediaQueries } from 'misc/utils'
-import styled from 'styled-components'
-
-export const StyledFooter = styled.footer`
-  background-color: #1b3250;
-
-  .inner {
-    padding: 64px 24px 98px 24px;
-    ${MediaQueries.mbDown} {
-      padding: 64px 0;
-    }
-    margin: 0 auto;
-    //max-width: 1168px;
-
-    &[data-type='mini'] {
-      padding: 24px 0;
-    }
-  }
-
-  .footer-logo {
-    max-width: 132px;
-    max-height: 32px;
-    margin-bottom: 24px;
-    &[data-is-sehat='true'] {
-      max-width: 250px;
-    }
-
-    img {
-      object-fit: contain;
-    }
-  }
-
-  .social {
-    margin-top: 24px;
-
-    ${MediaQueries.mbDown} {
-      margin-top: 32px;
-      p {
-        font-size: 13px;
-      }
-    }
-
-    ${MediaQueries.mbUp} {
-      p {
-        font-size: 12px;
-      }
-    }
-
-    p {
-      color: ${(props: ThemeProps) => props.theme.colors.neutral500};
-    }
-  }
-
-  .icons {
-    margin-top: 12px;
-    margin-bottom: 20px;
-    > a:not(:last-child) {
-      margin-right: 16px;
-    }
-
-    .social-icon {
-      width: 32px;
-      height: 32px;
-    }
-  }
-
-  .newsletter {
-    > p {
-      color: ${(props: ThemeProps) => props.theme.colors.neutral500};
-
-      font-size: 14px;
-      line-height: 22px;
-
-      ${MediaQueries.mbUp} {
-        max-width: 380px;
-        line-height: 28.5px;
-      }
-    }
-  }
-
-  hr {
-    height: 1px;
-    border: none;
-    margin: 16px 0 16px 0;
-    ${MediaQueries.mbDown} {
-      margin-top: 0px;
-    }
-    background: ${(props: ThemeProps) => props.theme.colors.neutral500};
-    opacity: 0.1;
-    outline: none;
-  }
-
-  .hrMobile {
-    ${MediaQueries.mbUp} {
-      display: none;
-    }
-  }
-
-  .copyright {
-    padding-top: 8px;
-
-    ${MediaQueries.mbUp} {
-      display: flex;
-      flex-direction: row-reverse;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .copyright-content {
-      width: 90%;
-      color: ${(props: ThemeProps) => props.theme.colors.neutral500};
-      font-size: 12px;
-    }
-
-    .copyright-image {
-      width: 10%;
-      align-self: flex-start;
-
-      img {
-        max-width: 100px;
-        margin-bottom: 16px;
-
-        ${MediaQueries.mbUp} {
-          margin-bottom: 0px;
-        }
-      }
-    }
-
-    &[data-is-amp='true'] {
-      img {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  .copyright-certificate {
-    color: ${(props: ThemeProps) => props.theme.colors.neutral500};
-    ${MediaQueries.mbDown} {
-      font-size: 11px;
-    }
-    ${MediaQueries.mbUp} {
-      font-size: 12px;
-    }
-  }
-
-  .biglinks {
-    margin-bottom: 12px;
-  }
-
-  .bigLink {
-    display: block;
-    color: ${(props: ThemeProps) => props.theme.colors.white};
-    font-size: 14px;
-    font-weight: ${(props: ThemeProps) => props.theme.sizes.fwBold};
-    text-decoration: none;
-    word-break: break-word;
-
-    &:not(:last-child) {
-      margin-bottom: 12px;
-    }
-
-    ${MediaQueries.mbDown} {
-      display: inline-block;
-      width: 50%;
-      font-size: 16px;
-    }
-  }
-
-  .mHalf {
-    display: inline-block;
-    width: 50%;
-    padding-right: 24px;
-    margin-bottom: 24px;
-    vertical-align: top;
-
-    p {
-      color: ${(props: ThemeProps) => props.theme.colors.neutral500};
-
-      ${MediaQueries.mbDown} {
-        margin-bottom: 8px;
-        font-size: 13px;
-        line-height: 20px;
-      }
-      ${MediaQueries.mbUp} {
-        margin-bottom: 12px;
-        font-size: 14px;
-      }
-    }
-  }
-
-  .otherSites {
-    p {
-      margin-bottom: 12px;
-      color: ${(props: ThemeProps) => props.theme.colors.neutral500};
-      font-size: 12px;
-      ${MediaQueries.mbDown} {
-        font-size: 13px;
-      }
-      ${MediaQueries.mbUp} {
-        font-size: 13px;
-      }
-    }
-
-    .flags {
-      display: flex;
-      margin-bottom: 8px;
-
-      div {
-        margin-right: 10px;
-      }
-    }
-  }
-
-  .link {
-    display: block;
-    text-decoration: none;
-
-    p {
-      color: ${(props: ThemeProps) => props.theme.colors.white};
-      font-weight: ${(props: ThemeProps) => props.theme.sizes.fwBold};
-      word-break: break-word;
-    }
-
-    &:not(:last-child) {
-      margin-bottom: 12px;
-    }
-  }
-
-  .columns {
-    ${MediaQueries.mbUp} {
-      display: flex;
-      flex-direction: row;
-      width: 100%;
-
-      > div:nth-child(1) {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        flex-basis: 40%;
-      }
-
-      > div:nth-child(2) {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        flex-basis: 60%;
-
-        > div:nth-child(1) {
-          flex-basis: 45%;
-        }
-
-        > div:not(:last-child) {
-          flex-basis: 27.5%;
-        }
-
-        > div:last-child() {
-          flex-basis: 0;
-        }
-      }
-    }
-  }
-
-  .signupButton {
-    display: none;
-    border: none;
-    margin-top: 16px;
-    outline: none;
-    text-transform: uppercase;
-  }
-`
-export const StyledFlag = styled.div`
-  width: 32px;
-  height: 32px;
-  margin-right: 10px;
-
-  &[data-is-mobile='true'] {
-    width: 24px;
-    height: 24px;
-  }
-
-  .country-flag {
-    width: 100%;
-    height: 100%;
-  }
-`