@mindly/ui-components 3.1.4 → 3.1.5

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

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

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

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

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

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

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

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

package/dist/lib/consultation-card/index.ts

@@ -0,0 +1,2 @@
+export * from './ConsultationCard';
+export * from './ConsultationCardSkeleton';