@mindly/ui-components 3.1.6 → 3.2.0

package/dist/lib/button/Button.style.ts

@@ -1,170 +0,0 @@
-import styled, { css } from 'styled-components';
-import { colorConstants } from '../Theme/mindly_constants';
-
-interface ContainerProps {
-  buttonType:
-    | 'primary'
-    | 'secondary'
-    | 'actionButton'
-    | 'actionButtonDisabled'
-    | 'secondaryWithStroke'
-    | 'secondaryCancel'
-    | 'actionButtonActive'
-    | 'actionButtonGreen';
-  isDisabled: boolean;
-}
-
-export const Container = styled.button<ContainerProps>`
-  padding: 12px 0;
-  width: 100%;
-  border-radius: 4px;
-  max-height: 40px;
-  border: 0;
-  background: ${colorConstants.primaryColor};
-  color: ${colorConstants.White};
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 16px;
-
-  &:hover,
-  &:active {
-    box-shadow: inset 0 4px 15px rgba(0, 0, 0, 0.2),
-      inset 0 -4px 15px rgba(0, 0, 0, 0.2);
-  }
-
-  ${(props: ContainerProps) =>
-    props.buttonType === 'secondary' &&
-    css`
-      background: inherit;
-      color: ${colorConstants.primaryColor};
-      font-weight: 400;
-
-      &:hover,
-      &:active {
-        box-shadow: none;
-        color: ${colorConstants.AccentActiveButtonBG};
-      }
-    `}
-
-  ${(props: ContainerProps) =>
-    props.buttonType === 'secondaryWithStroke' &&
-    css`
-      color: ${colorConstants.primaryColor};
-      background: inherit;
-      box-shadow: none;
-      border: 1px solid ${colorConstants.primaryColor};
-
-      &:hover,
-      &:active {
-        box-shadow: none;
-        color: ${colorConstants.AccentActiveButtonBG};
-        background: inherit;
-        border: 1px solid ${colorConstants.AccentActiveButtonBG};
-      }
-    `}
-
-  ${(props: ContainerProps) =>
-    props.buttonType === 'secondaryCancel' &&
-    css`
-      color: ${colorConstants.AccentCross};
-      background: inherit;
-      box-shadow: none;
-      border: 0;
-      font-weight: 400;
-
-      &:hover,
-      &:active {
-        box-shadow: none;
-        color: ${colorConstants.AccentCancelActive};
-        background: inherit;
-        border: 0;
-      }
-    `}
-
-  ${(props: ContainerProps) =>
-    props.buttonType === 'actionButton' &&
-    css`
-      color: ${colorConstants.AccentDisabledColor};
-      background: inherit;
-      box-shadow: none;
-      border: 1px solid ${colorConstants.AccentDisabledColor};
-
-      &:hover,
-      &:active {
-        color: ${colorConstants.AccentDisabledColor};
-        background: inherit;
-        box-shadow: none;
-        border: 1px solid ${colorConstants.AccentDisabledColor};
-      }
-    `}
-
-
-  ${(props: ContainerProps) =>
-    props.isDisabled &&
-    css`
-      background: ${colorConstants.AccentDisabledColor};
-      color: ${colorConstants.White};
-      box-shadow: none;
-
-      &:hover,
-      &:active {
-        box-shadow: none;
-        background: ${colorConstants.AccentDisabledColor};
-        color: ${colorConstants.White};
-      }
-    `}
-
-  ${(props: ContainerProps) =>
-    props.buttonType === 'actionButtonDisabled' &&
-    css`
-      color: ${colorConstants.AccentDisabledColor};
-      background: inherit;
-      box-shadow: none !important;
-      border: 1px solid ${colorConstants.AccentDisabledColor};
-      text-decoration: line-through;
-    `}
-
-  ${(props: ContainerProps) =>
-    props.buttonType === 'actionButtonActive' &&
-    css`
-      box-shadow: none;
-      color: ${colorConstants.primaryColor};
-      background: ${colorConstants.AccentSurveyButton};
-      border: 1px solid ${colorConstants.primaryColor};
-
-      &:hover,
-      &:active {
-        box-shadow: none;
-        color: ${colorConstants.primaryColor};
-        background: ${colorConstants.AccentSurveyButton};
-        border: 1px solid ${colorConstants.primaryColor};
-      }
-    `}
-
-  ${(props: ContainerProps) =>
-    props.buttonType === 'actionButtonGreen' &&
-    css`
-      color: ${colorConstants.AccentTickColor};
-      background: linear-gradient(
-          0deg,
-          rgba(255, 255, 255, 0.86),
-          rgba(255, 255, 255, 0.86)
-        ),
-        ${colorConstants.AccentTickColor};
-      box-shadow: none;
-      border: 1px solid ${colorConstants.AccentTickColor};
-
-      &:hover,
-      &:active {
-        box-shadow: none;
-        color: ${colorConstants.AccentTickColor};
-        background: linear-gradient(
-            0deg,
-            rgba(255, 255, 255, 0.86),
-            rgba(255, 255, 255, 0.86)
-          ),
-          ${colorConstants.AccentTickColor};
-        border: 1px solid ${colorConstants.AccentTickColor};
-      }
-    `}
-`;

package/dist/lib/button/Button.test.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { Button } from './Button';
-
-describe('Test button', () => {
-  test('Smoke test button', () => {
-    render(
-      <Button buttonType="primary" isDisabled onClick={() => undefined}>
-        Text
-      </Button>
-    );
-  });
-
-  test('Click on button test', () => {
-    const clickFuncMock = jest.fn();
-    const { getByText } = render(
-      <Button onClick={clickFuncMock} buttonType="primary" isDisabled={false}>
-        Text
-      </Button>
-    );
-    const button = getByText('Text');
-    expect(clickFuncMock).not.toHaveBeenCalled();
-    button.click();
-    expect(clickFuncMock).toHaveBeenCalled();
-  });
-
-  test('Text is button disabled', () => {
-    const clickFuncMock = jest.fn();
-    const { getByText } = render(
-      <Button onClick={clickFuncMock} buttonType="primary" isDisabled>
-        Text
-      </Button>
-    );
-    const button = getByText('Text');
-    expect(clickFuncMock).not.toHaveBeenCalled();
-    button.click();
-    expect(clickFuncMock).not.toHaveBeenCalled();
-  });
-});

package/dist/lib/button/Button.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import { Container } from './Button.style';
-
-export interface ButtonProps {
-  /*
-   * A props that sets the appearance of the button
-   */
-  buttonType:
-    | 'primary'
-    | 'secondary'
-    | 'actionButton'
-    | 'actionButtonDisabled'
-    | 'secondaryWithStroke'
-    | 'secondaryCancel'
-    | 'actionButtonActive'
-    | 'actionButtonGreen';
-
-  /*
-   * Toggles clickability of button. Also changes appearance
-   */
-  isDisabled: boolean;
-
-  /*
-   * Text inside the button (default React children)
-   */
-  children: React.ReactNode;
-
-  /*
-   * Default React onClick
-   */
-  onClick?: (props?: React.SyntheticEvent) => void;
-  ['data-testid']?: string;
-}
-
-export const Button: React.FC<ButtonProps> = (props) => {
-  return (
-    <Container
-      data-testid={props['data-testid']}
-      onClick={props?.onClick}
-      disabled={props.isDisabled}
-      isDisabled={props.isDisabled}
-      buttonType={props.buttonType}
-    >
-      {props.children}
-    </Container>
-  );
-};

package/dist/lib/consultation-card/ConsultationCard.style.ts

@@ -1,119 +0,0 @@
-import styled from 'styled-components';
-import { colorConstants } from '../Theme/mindly_constants';
-
-export const Container = styled.div`
-  width: 100%;
-  padding: 16px;
-  border: 1px solid ${colorConstants.StrokeGray};
-  box-shadow: 1px 5px 20px rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
-`;
-
-export const InfoContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 104px;
-
-  & .person-avatar {
-    border-radius: 8px;
-    font-weight: 700;
-    font-size: 41px;
-    line-height: 61px;
-    flex: 0 0 104px;
-  }
-`;
-
-export const TextInfo = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-right: 8px;
-  justify-content: space-around;
-  height: 100%;
-
-  h3 {
-    color: #5b5b5b;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 16px;
-    font-family: 'Inter', sans-serif;
-  }
-
-  span {
-    color: ${colorConstants.primaryColor};
-    font-weight: 600;
-    font-size: 14px;
-    line-height: 16px;
-  }
-
-  h2.time {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 600;
-    font-size: 14px;
-    line-height: 16px;
-    color: #1d201f;
-  }
-
-  div.is-free {
-    margin-top: 12px;
-    padding: 2px 7px;
-    border-radius: 12px;
-    max-width: max-content;
-    text-align: center;
-
-    &.greeny {
-      background-color: #cfe2d7;
-    }
-
-    &.reddy {
-      background-color: #ffc7c7;
-    }
-
-    h2 {
-      font-weight: 700;
-      font-size: 12px;
-      line-height: 16px;
-    }
-  }
-`;
-
-export const Photo = styled.img`
-  width: 104px;
-  height: 104px;
-  border-radius: 8px;
-  object-fit: cover;
-  flex: 0 0 104px;
-`;
-
-export const DividersContainer = styled.div`
-  margin: 16px 0 4px 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  div.divider {
-    height: 1px;
-    flex-grow: 1;
-    background: ${colorConstants.AccentDisabledColor};
-  }
-
-  h4 {
-    color: #c1c1c1;
-    margin: 0 16px;
-    font-size: 12px;
-    line-height: 14px;
-  }
-`;
-
-export const ButtonContainer = styled.div`
-  display: flex;
-
-  & button {
-    padding: 0;
-  }
-`;
-
-export const ButtonsContainer = styled.div`
-  margin-top: 16px;
-`;

package/dist/lib/consultation-card/ConsultationCard.test.tsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ConsultationCard, DateTimeType } from './ConsultationCard';
-import { DateTime } from 'luxon';
-
-describe('Test consultation card', () => {
-  test('Smoke test', () => {
-    render(
-      <ConsultationCard
-        startConsultation={() => undefined}
-        handleReschedule={() => undefined}
-        handleRefund={() => undefined}
-        consultationWith="Елена Шимановская"
-        avatar=""
-        autorecord
-        userTimeZone="America/New_York"
-        consultationTime={
-          {
-            _seconds: DateTime.now().toSeconds(),
-            _nanoseconds: 0,
-          } as DateTimeType
-        }
-      />
-    );
-  });
-
-  test('Text all handle clicks', () => {
-    const startConsultation = jest.fn();
-    const handleRefund = jest.fn();
-
-    render(
-      <ConsultationCard
-        startConsultation={() => startConsultation()}
-        handleReschedule={() => undefined}
-        handleRefund={() => handleRefund()}
-        consultationWith="Елена Шимановская"
-        avatar=""
-        autorecord
-        userTimeZone="America/New_York"
-        consultationTime={
-          {
-            _seconds: DateTime.now().toSeconds(),
-            _nanoseconds: 0,
-          } as DateTimeType
-        }
-      />
-    );
-
-    const refundButton = screen.getByText('Відмінити');
-    const startConsultationButton = screen.getByText('Почати консультацію');
-    expect(startConsultation).toHaveBeenCalledTimes(0);
-    expect(handleRefund).toHaveBeenCalledTimes(0);
-
-    startConsultationButton.click();
-    expect(startConsultation).toHaveBeenCalledTimes(1);
-    expect(handleRefund).toHaveBeenCalledTimes(0);
-
-    expect(startConsultation).toHaveBeenCalledTimes(1);
-    expect(handleRefund).toHaveBeenCalledTimes(0);
-
-    refundButton.click();
-    expect(startConsultation).toHaveBeenCalledTimes(1);
-    expect(handleRefund).toHaveBeenCalledTimes(1);
-  });
-});

package/dist/lib/consultation-card/ConsultationCard.tsx

@@ -1,155 +0,0 @@
-import React from 'react';
-import {
-  ButtonContainer,
-  ButtonsContainer,
-  Container,
-  DividersContainer,
-  InfoContainer,
-  TextInfo,
-} from './ConsultationCard.style';
-import { Button } from '../button/Button';
-import '../Theme/global.css';
-import { DateTime } from 'luxon';
-import { Avatar } from '../Avatar';
-
-export enum DayOfWeeks {
-  'Понеділок' = 1,
-  'Вівторок',
-  'Середа',
-  'Четверг',
-  "П'ятниця",
-  'Субота',
-  'Неділя',
-}
-
-export type DateTimeType = {
-  _nanoseconds: number;
-  _seconds: number;
-};
-
-export interface ConsultationCardProps {
-  /*
-   * Here you need to pass a function to start consultation
-   */
-  startConsultation: (props?: React.SyntheticEvent) => void;
-
-  /*
-   * Function for refund consultation
-   */
-  handleReschedule: (props?: React.SyntheticEvent) => void;
-
-  /*
-   * Function for refund consultation
-   */
-  handleRefund: (props?: React.SyntheticEvent) => void;
-  handleNotes?: (props?: React.SyntheticEvent) => void;
-
-  /*
-   * Psychologist name and last name
-   */
-  consultationWith: string;
-
-  consultationTime: DateTimeType;
-  userTimeZone: string;
-
-  /*
-   * Psychologist avatar link
-   */
-  avatar: string;
-  autorecord?: boolean;
-
-  ['data-container-testid']?: string;
-  ['data-start-testid']?: string;
-  ['data-reschedule-testid']?: string;
-  ['data-refund-testid']?: string;
-}
-
-export const ConsultationCard: React.FC<ConsultationCardProps> = ({
-  startConsultation,
-  handleReschedule,
-  handleRefund,
-  consultationWith,
-  consultationTime,
-  userTimeZone,
-  avatar,
-  autorecord = false,
-  ...props
-}) => {
-  const time = DateTime.fromSeconds(consultationTime._seconds)
-    .setZone(userTimeZone)
-    .setLocale('uk-UK');
-  const finishedTime = DateTime.fromSeconds(consultationTime._seconds)
-    .setZone(userTimeZone)
-    .setLocale('uk-UK')
-    .plus({ minute: 50 });
-  const currentTime = DateTime.now().setZone(userTimeZone).setLocale('uk-UK');
-
-  return (
-    <Container data-testid={props['data-container-testid']}>
-      <InfoContainer>
-        <TextInfo>
-          <h3>Консультація з {consultationWith}</h3>
-          {autorecord && <span>Автозапис</span>}
-          <h2 className="time">
-            {currentTime.toSeconds() <= finishedTime.toSeconds() ? (
-              <>
-                {DayOfWeeks[time.weekday]}
-                <br />
-              </>
-            ) : (
-              <>
-                Відбулась <br />
-              </>
-            )}
-            {time.toLocaleString({
-              month: 'long',
-              day: 'numeric',
-            })}{' '}
-            о {time.toFormat('HH:mm')}
-          </h2>
-        </TextInfo>
-        <Avatar
-          src={avatar}
-          dimensions={104}
-          firstName={consultationWith}
-          className="person-avatar"
-        />
-      </InfoContainer>
-      {currentTime.toSeconds() <= finishedTime.toSeconds() && (
-        <ButtonsContainer>
-          <Button
-            buttonType="primary"
-            isDisabled={false}
-            data-testid={props['data-start-testid']}
-            onClick={startConsultation} // # skipcq JS-0411
-          >
-            Почати консультацію
-          </Button>
-          <DividersContainer>
-            <div className="divider" />
-            <h4>чи</h4>
-            <div className="divider" />
-          </DividersContainer>
-          <ButtonContainer>
-            <Button
-              buttonType="secondaryCancel"
-              isDisabled={false}
-              onClick={handleRefund}
-              data-testid={props['data-refund-testid']}
-            >
-              Відмінити
-            </Button>
-            <Button
-              buttonType="secondary"
-              isDisabled={false}
-              onClick={handleReschedule}
-              data-testid={props['data-refund-testid']}
-            >
-              Перенести
-            </Button>
-          </ButtonContainer>
-        </ButtonsContainer>
-      )}
-    </Container>
-  );
-};

package/dist/lib/consultation-card/ConsultationCardSkeleton.tsx

@@ -1,114 +0,0 @@
-import React from 'react';
-import { IonSkeletonText } from '@ionic/react';
-import {
-  ButtonContainer,
-  Container,
-  InfoContainer,
-  TextInfo,
-} from './ConsultationCard.style';
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export const ConsultationCardSkeleton = () => {
-  return (
-    <Container>
-      <InfoContainer style={{ marginBottom: '16px' }}>
-        <TextInfo style={{ padding: '6px 0' }}>
-          <IonSkeletonText
-            animated
-            style={{
-              width: '159px',
-              height: '10px',
-              borderRadius: '4px',
-              margin: '0',
-            }}
-          />
-          <IonSkeletonText
-            animated
-            style={{
-              width: '69px',
-              height: '10px',
-              borderRadius: '4px',
-              margin: '0',
-            }}
-          />
-          <IonSkeletonText
-            animated
-            style={{
-              width: '74px',
-              height: '14px',
-              borderRadius: '4px',
-              margin: '0',
-            }}
-          />
-          <IonSkeletonText
-            animated
-            style={{
-              width: '57px',
-              height: '11px',
-              borderRadius: '4px',
-              margin: '0',
-            }}
-          />
-          <IonSkeletonText
-            animated
-            style={{
-              width: '118px',
-              height: '11px',
-              borderRadius: '4px',
-              margin: '0',
-            }}
-          />
-        </TextInfo>
-        <IonSkeletonText
-          animated
-          style={{
-            width: '104px',
-            height: '104px',
-            borderRadius: '8px',
-            margin: '0',
-          }}
-        />
-      </InfoContainer>
-      <IonSkeletonText
-        animated
-        style={{
-          width: '100%',
-          height: '40px',
-          borderRadius: '4px',
-          margin: '0 0 20px 0',
-        }}
-      />
-      <IonSkeletonText
-        animated
-        style={{
-          width: '100%',
-          height: '7px',
-          borderRadius: '4px',
-          margin: '0 0 17px 0',
-        }}
-      />
-      <ButtonContainer
-        style={{ justifyContent: 'space-around', paddingBottom: '13px' }}
-      >
-        <IonSkeletonText
-          animated
-          style={{
-            width: '68px',
-            height: '14px',
-            borderRadius: '4px',
-            margin: '0',
-          }}
-        />
-        <IonSkeletonText
-          animated
-          style={{
-            width: '76px',
-            height: '14px',
-            borderRadius: '4px',
-            margin: '0',
-          }}
-        />
-      </ButtonContainer>
-    </Container>
-  );
-};