@mindly/ui-components 3.1.4 → 3.1.6

package/dist/lib/Theme/mindly_constants.ts

@@ -0,0 +1,23 @@
+export const colorConstants = {
+  primaryColor: '#21ABD2',
+  secondaryColor: '#F0FBFF',
+  primaryTextColor: '#1D201F',
+  secondaryTextColor: '#5B5B5B',
+  AccentStrokeColor: '#EDEFF2',
+  AccentDisabledColor: '#C1C1C1',
+  AccentCrossColor: '#A31621',
+  AccentTickColor: '#478862',
+  AccentInputBgColor: '#F5F9FF',
+  AccentTabsBgColor: '#D6F2F9',
+  AccentCross: '#f1646f',
+  White: '#FFFFFF',
+  AccentAchieveBgNew: '#E7E7E7',
+  StrokeGray: '#F2F4F7',
+  AccentSurveyButton: '#E9F7FB',
+  AccentCancelActive: '#F5939A',
+  AccentActiveButtonBG: '#90D5E8',
+  AccentDivider: '#E5E5E5',
+  AccentGrayBlue: '#E8ECF2',
+};
+
+export const maxContainerWidth = '410px';

package/dist/lib/UsersPsychologistScrollList/UserPsychologistScrollList.styled.ts

@@ -0,0 +1,61 @@
+import styled from 'styled-components';
+
+export const StyledScrollListSectionWrapper = styled.div`
+  @media (min-width: 1024px) {
+    grid-column: 1 / 3;
+  }
+
+  @media (max-width: 1024px) and (min-width: 600px) {
+    max-width: 452px;
+  }
+`;
+
+export const StyledSectionTitle = styled.div`
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 32px;
+`;
+
+export const StyledScrollListWrapper = styled.div`
+  display: flex;
+  overflow-x: auto;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+export const StyledScrollListPsychologist = styled.div`
+  min-width: max-content;
+  margin-right: 12px;
+  cursor: pointer;
+`;
+
+export const StyledScrollListPsychologistAvatar = styled.section`
+  border: 1px solid #f2f4f7;
+  border-radius: 999px;
+  height: 72px;
+  width: 72px;
+  padding: 5px;
+  overflow: hidden !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .img {
+    border-radius: 99px;
+    max-width: max-content;
+    min-width: 62px;
+    width: 62px;
+    height: 62px;
+    user-select: none;
+  }
+`;
+
+export const StyledScrollListPsychologistName = styled.div`
+  color: #1d201f;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 16px;
+  text-align: center;
+`;

package/dist/lib/UsersPsychologistScrollList/UsersPsychologistScrollList.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { IonSkeletonText } from '@ionic/react';
+import {
+  StyledScrollListSectionWrapper,
+  StyledScrollListWrapper,
+  StyledScrollListPsychologist,
+  StyledScrollListPsychologistAvatar,
+  StyledScrollListPsychologistName,
+} from './UserPsychologistScrollList.styled';
+import { PsychologistType } from '../userAppTypes';
+
+export type UsersPsychologistScrollListPropsType = {
+  psychologistClickHandler: React.Dispatch<
+    React.SetStateAction<{
+      isShow: boolean;
+      psychologist_id: string;
+    }>
+  >;
+  usersPsychologists: Array<PsychologistType> | null;
+};
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const UsersPsychologistScrollList = ({
+  psychologistClickHandler,
+  usersPsychologists,
+}: UsersPsychologistScrollListPropsType) => {
+  const [imageLoaded, setImageLoaded] = useState(false);
+
+
+  if (usersPsychologists && usersPsychologists.length) {
+    return (
+      <StyledScrollListSectionWrapper>
+        <StyledScrollListWrapper>
+          {usersPsychologists.map((psychologist) => (
+            <StyledScrollListPsychologist
+              key={`${psychologist.id}-scroll`}
+              onClick={() =>
+                psychologistClickHandler({
+                  isShow: true,
+                  psychologist_id: psychologist.id,
+                })
+              }
+            >
+              <StyledScrollListPsychologistAvatar>
+                <img
+                  className="img"
+                  src={psychologist.avatar}
+                  alt={psychologist.first_name}
+                  onLoad={() => setImageLoaded(true)}
+                  style={{ display: imageLoaded ? 'block' : 'none' }}
+                />
+                <IonSkeletonText
+                  animated
+                  className="img"
+                  style={{ display: imageLoaded ? 'none' : 'block' }}
+                />
+              </StyledScrollListPsychologistAvatar>
+              <StyledScrollListPsychologistName>
+                {psychologist.first_name}
+              </StyledScrollListPsychologistName>
+            </StyledScrollListPsychologist>
+          ))}
+        </StyledScrollListWrapper>
+      </StyledScrollListSectionWrapper>
+    );
+  }
+  return null;
+};

package/dist/lib/archived-consultation-card/ArchivedConsultation.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ArchivedConsultationCard } from './ArchivedConsultationCard';
+
+describe('Test archived consultation', () => {
+  test('Smoke test', () => {
+    render(<ArchivedConsultationCard date="" img="" name="" />);
+  });
+});

package/dist/lib/archived-consultation-card/ArchivedConsultationCard.style.ts

@@ -0,0 +1,72 @@
+import styled from 'styled-components';
+import { colorConstants } from '../Theme/mindly_constants';
+
+export const Container = styled.div`
+  overflow: hidden;
+  display: flex;
+  justify-content: space-between;
+  background: ${colorConstants.AccentGrayBlue};
+  padding: 8px;
+  width: 100%;
+  border-radius: 4px;
+`;
+
+export const TextContainer = styled.div`
+  h3 {
+    padding-top: 5px;
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 24px;
+    color: ${colorConstants.primaryTextColor};
+  }
+
+  h5 {
+    color: ${colorConstants.secondaryTextColor};
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  h5.isFreeStatus {
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 16px;
+    text-align: center;
+    padding: 2px 8px;
+    color: ${colorConstants.primaryTextColor};
+  }
+
+  .greeny-bg {
+    max-width: max-content;
+    background: #cfe2d7;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 12px;
+  }
+
+  .reddy-bg {
+    max-width: max-content;
+    background: #f6dfdf;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 12px;
+  }
+
+  h5.check {
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    color: ${colorConstants.AccentTickColor};
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+  }
+
+  svg {
+    margin-right: 4px;
+  }
+`;
+
+export const Avatar = styled.img`
+  max-width: 94px;
+  max-height: 94px;
+  border-radius: 8px;
+`;

package/dist/lib/archived-consultation-card/ArchivedConsultationCard.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="M12.6237 3.67075C12.8056 3.46294 13.1214 3.44188 13.3293 3.62372C13.5342 3.80307 13.5575 4.11281 13.3836 4.32066L13.3763 4.32926L6.37629 12.3293C6.18827 12.5441 5.85953 12.5578 5.65438 12.3613L5.64645 12.3536L2.64645 9.35356C2.45118 9.1583 2.45118 8.84171 2.64645 8.64645C2.839 8.4539 3.14952 8.45123 3.34535 8.63843L3.35355 8.64645L5.97563 11.2685L12.6237 3.67075Z" fill="#478862"/>
+</svg>

package/dist/lib/archived-consultation-card/ArchivedConsultationCard.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import {
+  Avatar,
+  Container,
+  TextContainer,
+} from './ArchivedConsultationCard.style';
+import { ReactComponent as Icon } from './ArchivedConsultationCard.svg';
+import '../Theme/global.css';
+
+export interface ArchivedConsultationCardProps {
+  /*
+   * Psychologist name and surname
+   */
+  nameAndSurname: string;
+
+  /*
+   * Start date of the last consultation ( in format day, month, time)
+   */
+  date: string;
+
+  /*
+   * Psychologist avatar link
+   */
+  avatar: string;
+  /*
+   * If that's a free consultation
+   */
+  isFree?: boolean;
+  /**
+   * Consultation price
+   */
+  price: string;
+  ['data-testid']?: string;
+}
+
+export const ArchivedConsultationCard: React.FC<ArchivedConsultationCardProps> =
+  (props) => {
+    return (
+      <Container data-testid={props['data-testid']}>
+        <TextContainer>
+          {typeof props.isFree === 'boolean' &&
+            (props.isFree ? (
+              <div className="reddy-bg">
+                <h5 className="isFreeStatus">Безкоштовна</h5>
+              </div>
+            ) : (
+              <div className="greeny-bg">
+                <h5 className="isFreeStatus">{`Платна - ${props.price} грн`}</h5>
+              </div>
+            ))}
+          <h3>{props.nameAndSurname}</h3>
+          <h5 className="semiBold">{props.date}</h5>
+          <h5 className="check">
+            <Icon />
+            Завершена
+          </h5>
+        </TextContainer>
+        <Avatar src={props.avatar} alt="user-avatar" />
+      </Container>
+    );
+  };

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;
+`;