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

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

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

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

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

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

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

@@ -0,0 +1,55 @@
+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)
+  },
+}