@mindly/ui-components 3.1.4 → 3.1.5

package/dist/lib/Theme/global.css

@@ -0,0 +1,251 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+span,
+p {
+  font-family: 'Inter', sans-serif;
+  font-size: 10px;
+  line-height: 14px;
+  margin: 0;
+  font-weight: 400;
+  padding: 0;
+}
+
+h5 {
+  font-family: 'Inter', sans-serif;
+  margin: 0;
+  padding: 0;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 16px;
+}
+
+h4 {
+  font-family: 'Inter', sans-serif;
+  margin: 0;
+  padding: 0;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+h3 {
+  font-family: 'Inter', sans-serif;
+  margin: 0;
+  padding: 0;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+h2 {
+  font-family: 'Inter', sans-serif;
+  margin: 0;
+  padding: 0;
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+h1 {
+  font-family: 'Inter', sans-serif;
+  margin: 0;
+  padding: 0;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+}
+
+span.semiBold,
+p.semiBold {
+  font-family: 'Inter', sans-serif;
+  font-size: 10px;
+  line-height: 14px;
+  margin: 0;
+  padding: 0;
+  font-weight: 600;
+}
+
+h5.semiBold {
+  font-family: 'Inter', sans-serif;
+  margin: 0;
+  padding: 0;
+  font-size: 14px;
+  line-height: 16px;
+  font-weight: 600;
+}
+
+h4.semiBold {
+  font-family: 'Inter', sans-serif;
+  margin: 0;
+  padding: 0;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+}
+
+h3.semiBold {
+  font-family: 'Inter', sans-serif;
+  margin: 0;
+  padding: 0;
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 600;
+}
+
+h2.semiBold {
+  font-family: 'Inter', sans-serif;
+  margin: 0;
+  padding: 0;
+  font-size: 20px;
+  line-height: 24px;
+  font-weight: 600;
+}
+
+h1.semiBold {
+  font-family: 'Inter', sans-serif;
+  margin: 0;
+  padding: 0;
+  font-size: 24px;
+  line-height: 32px;
+  font-weight: 600;
+}
+
+span.bold,
+p.bold {
+  font-family: 'Inter', sans-serif;
+  font-size: 10px;
+  line-height: 14px;
+  margin: 0;
+  padding: 0;
+  font-weight: 700;
+}
+
+h5.bold {
+  font-family: 'Inter', sans-serif;
+  margin: 0;
+  padding: 0;
+  font-size: 14px;
+  line-height: 16px;
+  font-weight: 700;
+}
+
+h4.bold {
+  font-family: 'Inter', sans-serif;
+  margin: 0;
+  padding: 0;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 700;
+}
+
+h3.bold {
+  font-family: 'Inter', sans-serif;
+  margin: 0;
+  padding: 0;
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 700;
+}
+
+h2.bold {
+  font-family: 'Inter', sans-serif;
+  margin: 0;
+  padding: 0;
+  font-size: 20px;
+  line-height: 24px;
+  font-weight: 700;
+}
+
+h1.bold {
+  font-family: 'Inter', sans-serif;
+  margin: 0;
+  padding: 0;
+  font-size: 24px;
+  line-height: 32px;
+  font-weight: 700;
+}
+
+:root {
+  /** primary **/
+  --ion-color-primary: #21abd2;
+  --ion-color-primary-rgb: 33, 171, 210;
+  --ion-color-primary-contrast: #000000;
+  --ion-color-primary-contrast-rgb: 0, 0, 0;
+  --ion-color-primary-shade: #1d96b9;
+  --ion-color-primary-tint: #37b3d7;
+
+  /** secondary **/
+  --ion-color-secondary: #1d201f;
+  --ion-color-secondary-rgb: 29, 32, 31;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+  --ion-color-secondary-shade: #1a1c1b;
+  --ion-color-secondary-tint: #343635;
+
+  /** tertiary **/
+  --ion-color-tertiary: #d6f2f9;
+  --ion-color-tertiary-rgb: 214, 242, 249;
+  --ion-color-tertiary-contrast: #000000;
+  --ion-color-tertiary-contrast-rgb: 0, 0, 0;
+  --ion-color-tertiary-shade: #bcd5db;
+  --ion-color-tertiary-tint: #daf3fa;
+
+  /** success **/
+  --ion-color-success: #478862;
+  --ion-color-success-rgb: 71, 136, 98;
+  --ion-color-success-contrast: #ffffff;
+  --ion-color-success-contrast-rgb: 255, 255, 255;
+  --ion-color-success-shade: #3e7856;
+  --ion-color-success-tint: #599472;
+
+  /** warning **/
+  --ion-color-warning: #ffc409;
+  --ion-color-warning-rgb: 255, 196, 9;
+  --ion-color-warning-contrast: #000000;
+  --ion-color-warning-contrast-rgb: 0, 0, 0;
+  --ion-color-warning-shade: #e0ac08;
+  --ion-color-warning-tint: #ffca22;
+
+  /** danger **/
+  --ion-color-danger: #f1646f;
+  --ion-color-danger-rgb: 241, 100, 111;
+  --ion-color-danger-contrast: #000000;
+  --ion-color-danger-contrast-rgb: 0, 0, 0;
+  --ion-color-danger-shade: #d45862;
+  --ion-color-danger-tint: #f2747d;
+
+  /** dark **/
+  --ion-color-dark: #222428;
+  --ion-color-dark-rgb: 34, 36, 40;
+  --ion-color-dark-contrast: #ffffff;
+  --ion-color-dark-contrast-rgb: 255, 255, 255;
+  --ion-color-dark-shade: #1e2023;
+  --ion-color-dark-tint: #383a3e;
+
+  /** medium **/
+  --ion-color-medium: #5b5b5b;
+  --ion-color-medium-rgb: 91, 91, 91;
+  --ion-color-medium-contrast: #ffffff;
+  --ion-color-medium-contrast-rgb: 255, 255, 255;
+  --ion-color-medium-shade: #505050;
+  --ion-color-medium-tint: #6b6b6b;
+
+  /** light **/
+  --ion-color-light: #ffffff;
+  --ion-color-light-rgb: 255, 255, 255;
+  --ion-color-light-contrast: #000000;
+  --ion-color-light-contrast-rgb: 0, 0, 0;
+  --ion-color-light-shade: #e0e0e0;
+  --ion-color-light-tint: #ffffff;
+
+  --ion-font-family: 'Inter', sans-serif;
+}

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>
+    );
+  };