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

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

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,89 @@
+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

@@ -0,0 +1,286 @@
+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%;
+  }
+`