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

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

@@ -1,101 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import { MediaQueries } from 'misc/utils'
-import styled, { StyledComponent } from 'styled-components'
-
-export const StyledAcceptCardContainer = styled.div`
-  padding: 16px;
-  width: 375px;
-  word-wrap: break-word;
-  word-break: break-word;
-  ${MediaQueries.mbDown} {
-    width: 100%;
-  }
-  &[data-theme='helloSites'] {
-    background: ${(props: ThemeProps) => props.theme.colors.secondaryBase};
-    box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.1);
-  }
-  &[data-theme='marryBaby'] {
-    border: none;
-    background: ${(props: ThemeProps) => props.theme.mbColors.pink};
-    border-radius: 12px 12px 0 0;
-  }
-  &[data-is-open='false'] {
-    display: none;
-  }
-  &[data-default-position='true'] {
-    position: fixed;
-    z-index: 1000;
-    bottom: 0;
-    right: 0;
-    ${MediaQueries.mbDown} {
-      left: 0;
-      right: unset;
-    }
-  }
-`
-
-export const StyledTitleSection = styled.p`
-  position: relative;
-  padding-left: 24px;
-  color: ${(props: ThemeProps) => props.theme.colors.white};
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 22px;
-  &[data-has-content='true'] {
-    ::before {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      width: 16px;
-      height: 16px;
-      margin: auto 0;
-      content: url("data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.00001 1.33331C4.32001 1.33331 1.33334 4.31998 1.33334 7.99998C1.33334 11.68 4.32001 14.6666 8.00001 14.6666C11.68 14.6666 14.6667 11.68 14.6667 7.99998C14.6667 4.31998 11.68 1.33331 8.00001 1.33331ZM8.00001 11.3333C7.63334 11.3333 7.33334 11.0333 7.33334 10.6666V7.99998C7.33334 7.63331 7.63334 7.33331 8.00001 7.33331C8.36668 7.33331 8.66668 7.63331 8.66668 7.99998V10.6666C8.66668 11.0333 8.36668 11.3333 8.00001 11.3333ZM7.33334 5.99998H8.66668V4.66665H7.33334V5.99998Z' fill='white'/%3e%3c/svg%3e");
-    }
-  }
-`
-
-export const StyledDescription = styled.p`
-  margin-top: 2px;
-  color: ${(props: ThemeProps) => props.theme.colors.white};
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 18px;
-  a {
-    color: ${(props: ThemeProps) => props.theme.colors.white};
-    text-decoration: none;
-    text-decoration-line: underline;
-  }
-`
-
-export const StyledButtonGroup = styled.div`
-  display: flex;
-  align-items: center;
-  margin-top: 8px;
-  gap: 16px;
-`
-
-export const StyledAcceptButton: StyledComponent<
-  'div',
-  any,
-  { on?: string },
-  never
-> = styled.div`
-  padding: 7px 28px;
-  background: ${(props: ThemeProps) => props.theme.colors.white};
-  border-radius: 6px;
-  color: ${(props: ThemeProps) => props.theme.colors.secondaryBase};
-  cursor: pointer;
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 18px;
-`
-
-export const StyledPoliciesButton = styled.a`
-  color: ${(props: ThemeProps) => props.theme.colors.white};
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 22px;
-  text-decoration: none;
-  text-decoration-line: underline;
-`

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

@@ -1,23 +0,0 @@
-import 'jest-styled-components'
-
-import React from 'react'
-
-import { cleanup, render } from '@testing-library/react'
-import MockTheme from 'misc/mockTheme'
-
-import { CookieAcceptConfirm } from '.'
-
-afterEach(cleanup)
-
-test('it renders', () => {
-  const cookieConfirmation = render(
-    <MockTheme>
-      <CookieAcceptConfirm
-        title="Please accept our privacy policy"
-        description="Hello Bacsi uses cookies to improve your experience and to show you personalized ads"
-      />
-    </MockTheme>,
-  )
-  const self = cookieConfirmation.container.firstChild
-  expect(self).toMatchSnapshot()
-})

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

@@ -1,78 +0,0 @@
-import React from 'react'
-
-import {
-  StyledAcceptCardContainer,
-  StyledTitleSection,
-  StyledDescription,
-  StyledButtonGroup,
-  StyledAcceptButton,
-  StyledPoliciesButton,
-} from './index.styled'
-
-export type CookieAcceptConfirmProps = {
-  isOpen?: boolean
-  theme?: 'helloSites' | 'marryBaby'
-  className?: string
-  title?: string
-  description?: string
-  policiesUrl?: string
-  translations?: {
-    acceptButton?: string
-    policiesButton?: string
-  }
-  onAcceptClick?: () => void
-  useDefaultPosition?: boolean
-  trackingAttributes?: {
-    dataEventCategory: string
-    dataEventAction: string
-    dataEventLabel: string
-  }
-}
-
-export const CookieAcceptConfirm = ({
-  className,
-  policiesUrl,
-  onAcceptClick,
-  translations = {
-    acceptButton: 'Accept',
-    policiesButton: 'Our Policies',
-  },
-  title = '',
-  description = '',
-  theme = 'helloSites',
-  isOpen = true,
-  useDefaultPosition = true,
-  trackingAttributes,
-}: CookieAcceptConfirmProps) => {
-  return (
-    <StyledAcceptCardContainer
-      className={className}
-      data-theme={theme}
-      data-is-open={isOpen}
-      data-default-position={useDefaultPosition}
-    >
-      <StyledTitleSection data-has-content={!!title}>
-        {title}
-      </StyledTitleSection>
-      <StyledDescription dangerouslySetInnerHTML={{
-        __html: description,
-      }} />
-      <StyledButtonGroup>
-        <StyledAcceptButton
-          role="button"
-          tabIndex={0}
-          on="tap:consent-element.accept"
-          onClick={onAcceptClick}
-          data-event-category={trackingAttributes?.dataEventCategory}
-          data-event-action={trackingAttributes?.dataEventAction}
-          data-event-label={trackingAttributes?.dataEventLabel}
-        >
-          {translations.acceptButton}
-        </StyledAcceptButton>
-        <StyledPoliciesButton href={policiesUrl}>
-          {translations.policiesButton}
-        </StyledPoliciesButton>
-      </StyledButtonGroup>
-    </StyledAcceptCardContainer>
-  )
-}

package/src/components/molecules/cookieAcceptConfirm/info.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.00001 1.33331C4.32001 1.33331 1.33334 4.31998 1.33334 7.99998C1.33334 11.68 4.32001 14.6666 8.00001 14.6666C11.68 14.6666 14.6667 11.68 14.6667 7.99998C14.6667 4.31998 11.68 1.33331 8.00001 1.33331ZM8.00001 11.3333C7.63334 11.3333 7.33334 11.0333 7.33334 10.6666V7.99998C7.33334 7.63331 7.63334 7.33331 8.00001 7.33331C8.36668 7.33331 8.66668 7.63331 8.66668 7.99998V10.6666C8.66668 11.0333 8.36668 11.3333 8.00001 11.3333ZM7.33334 5.99998H8.66668V4.66665H7.33334V5.99998Z" fill="white"/>
-</svg>

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

@@ -1,377 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`it renders and calendar appears on click 1`] = `
-.c0 .pickerContainer {
-  position: relative;
-  padding-top: 0;
-}
-
-.c0 .pickerContainer > div > svg {
-  position: absolute;
-  top: 36px;
-  right: 16px;
-  cursor: pointer;
-}
-
-.c0 .pickerContainer > :not(:first-child) {
-  position: absolute;
-  z-index: 1;
-  width: 100%;
-}
-
-.c0[data-is-static] .pickerOverlayWrapper {
-  position: static;
-  max-width: 250px;
-  aspect-ratio: 1 / 1;
-}
-
-.c0[data-is-static] .pickerOverlayWrapper > .pickerOverlay {
-  padding: 1rem;
-}
-
-.c0 .pickerOverlayWrapper {
-  min-width: 320px;
-}
-
-.c0[data-align-right='true'] .pickerOverlayWrapper {
-  right: 0;
-}
-
-.c0 .pickerOverlay {
-  margin-top: 6px;
-  background: white;
-  border-radius: 6px;
-  box-shadow: 0px 6px 12px rgba(67,86,100,0.2);
-}
-
-.c0 .picker {
-  width: 100%;
-}
-
-.c0 .react-datepicker-popper .react-datepicker {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 340px;
-  height: 305px;
-  -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: none;
-  box-shadow: (-1px 1px 2px rgba(67,70,74,0.0001)), (-2px 2px 5px rgba(67,86,100,0.123689));
-}
-
-.c0 .react-datepicker-popper .svg {
-  cursor: pointer;
-  stroke: #262626;
-}
-
-.c0 .react-datepicker-popper .react-datepicker__day {
-  width: 40px;
-}
-
-.c0 .react-datepicker-popper .react-datepicker__header {
-  border-bottom: 0;
-  background-color: white;
-}
-
-.c0 .react-datepicker-popper .react-datepicker__day--outside-month {
-  color: #e9e9e9;
-}
-
-.c0 .react-datepicker-popper .react-datepicker__day {
-  font-weight: 700;
-}
-
-.c0 .react-datepicker-popper .react-datepicker__day--selected,
-.c0 .react-datepicker-popper .react-datepicker__day--today,
-.c0 .react-datepicker-popper .react-datepicker__day--selected:hover,
-.c0 .react-datepicker-popper .react-datepicker__day--keyboard-selected {
-  width: 32px;
-  height: 30px;
-  margin: 4px;
-  margin-bottom: -2px;
-  background: #2d87f3;
-  border-radius: 50%;
-}
-
-.c0 .react-datepicker-popper .react-datepicker__day-name {
-  width: 40px;
-}
-
-.c0 .react-datepicker-popper .react-datepicker__triangle {
-  display: none;
-}
-
-.c0 .react-datepicker-popper .react-datepicker__header.react-datepicker__header--custom svg {
-  stroke: #262626;
-}
-
-.c0 .react-datepicker-popper .react-datepicker__header.react-datepicker__header--custom select {
-  background: #e4e8ec;
-  text-align: center;
-}
-
-.c0 .react-datepicker-popper .react-datepicker__header.react-datepicker__header--custom select:not(:last-child) {
-  padding: 8px 10px;
-  margin-right: 15px;
-  border-radius: 6px;
-}
-
-.c0 .DayPicker {
-  display: inline-block;
-  font-size: 1rem;
-}
-
-.c0 .DayPicker-wrapper {
-  position: relative;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  padding-bottom: 1em;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.c0 .DayPicker-Months {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c0 .DayPicker-Month {
-  display: table;
-  margin: 0 16px;
-  margin-top: 16px;
-  border-collapse: collapse;
-  border-spacing: 0;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.c0 .DayPicker-NavBar {
-  position: absolute;
-  top: 16px;
-  left: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  height: 0;
-  -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;
-  padding: 0 20px;
-}
-
-.c0 .DayPicker-NavButton {
-  width: 24px;
-  height: 24px;
-  margin-bottom: -47px;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 16px 16px;
-  color: #8b9898;
-  cursor: pointer;
-}
-
-.c0 .DayPicker-NavButton:hover {
-  opacity: 0.8;
-}
-
-.c0 .DayPicker-NavButton--prev {
-  background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 9L1 5L5 1' stroke='%23262626' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-}
-
-.c0 .DayPicker-NavButton--next {
-  background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L1 9' stroke='%23262626' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-}
-
-.c0 .DayPicker-NavButton--interactionDisabled {
-  display: none;
-}
-
-.c0 .DayPicker-Caption {
-  display: table-caption;
-  width: 100%;
-  height: 46px;
-  padding: 0 32px;
-}
-
-.c0 .DayPicker-Caption select {
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 24px;
-  text-align: left;
-}
-
-.c0 .DayPicker-Weekdays {
-  display: table-header-group;
-  margin-top: 1em;
-}
-
-.c0 .DayPicker-WeekdaysRow {
-  display: table-row;
-}
-
-.c0 .DayPicker-Weekday {
-  display: table-cell;
-  padding: 0.5em;
-  color: #8b9898;
-  font-size: 0.875em;
-  text-align: center;
-}
-
-.c0 .DayPicker-Weekday abbr[title] {
-  border-bottom: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c0 .DayPicker-Body {
-  display: table-row-group;
-}
-
-.c0 .DayPicker-Week {
-  display: table-row;
-}
-
-.c0 .DayPicker-Day {
-  display: table-cell;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  cursor: pointer;
-  text-align: center;
-  vertical-align: middle;
-}
-
-.c0 .DayPicker-WeekNumber {
-  display: table-cell;
-  min-width: 1em;
-  padding: 0.5em;
-  border-right: 1px solid #eaecec;
-  color: #8b9898;
-  cursor: pointer;
-  font-size: 0.75em;
-  text-align: right;
-  vertical-align: middle;
-}
-
-.c0 .DayPicker--interactionDisabled .DayPicker-Day {
-  cursor: default;
-}
-
-.c0 .DayPicker-Footer {
-  padding-top: 0.5em;
-}
-
-.c0 .DayPicker-TodayButton {
-  border: none;
-  background-color: transparent;
-  background-image: none;
-  box-shadow: none;
-  color: #4a90e2;
-  cursor: pointer;
-  font-size: 0.875em;
-}
-
-.c0 .DayPicker-Day--today {
-  color: #d0021b;
-  font-weight: 700;
-}
-
-.c0 .DayPicker-Day--outside {
-  color: #8b9898;
-  cursor: default;
-}
-
-.c0 .DayPicker-Day--disabled {
-  color: #dce0e0;
-  cursor: default;
-}
-
-.c0 .DayPicker-Day--sunday {
-  background-color: #f7f8f8;
-}
-
-.c0 .DayPicker-Day--sunday:not(.DayPicker-Day--today) {
-  color: #dce0e0;
-}
-
-.c0 .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
-  position: relative;
-  background-color: #2d87f3;
-  color: #f0f8ff;
-  font-weight: 700;
-}
-
-.c0 .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside):hover {
-  background-color: #51a0fa;
-}
-
-.c0 .DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
-  background-color: #f0f8ff;
-}
-
-.c0 .DayPickerInput {
-  display: inline-block;
-}
-
-.c0 .DayPickerInput-OverlayWrapper {
-  position: relative;
-}
-
-.c0 .DayPickerInput-Overlay {
-  position: absolute;
-  z-index: 1;
-  left: 0;
-  background: white;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
-}
-
-<div
-  class="c0"
-  data-align-right="true"
->
-  <div
-    class="pickerContainer"
-  >
-    <input
-      placeholder="text holder"
-      readonly=""
-      value=""
-    />
-  </div>
-</div>
-`;

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

@@ -1,55 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-import { add } from 'date-fns'
-
-import { DatePicker, Props } from './index'
-
-export default {
-  component: DatePicker,
-  title: 'Molecules/DatePicker',
-}
-
-const Template: Story<Props> = (args) => <DatePicker {...args} />
-
-export const Normal = Template.bind({})
-
-Normal.args = {
-  placeholder: 'placeholder',
-  displayDateFormat: 'dd-MM-yyyy',
-  pickedDate: new Date(),
-  disabledDays: {},
-  customInput: (props) => <input {...props} />,
-  onChange: (d: Date) => {
-    console.log(d)
-  },
-}
-
-export const DisabledDay = Template.bind({})
-const disabledDays = [
-  add(new Date(), {
-    days: 2,
-  }),
-  add(new Date(), {
-    days: 4,
-  }),
-  {
-    from: add(new Date(), {
-      days: 7,
-    }),
-    to: add(new Date(), {
-      days: 14,
-    }),
-  },
-]
-
-DisabledDay.args = {
-  placeholder: 'placeholder',
-  displayDateFormat: 'dd-MM-yyyy',
-  pickedDate: new Date(),
-  disabledDays,
-  customInput: (props) => <input {...props} />,
-  onChange: (d: Date) => {
-    console.log(d)
-  },
-}