@mindly/ui-components 3.1.3 → 3.1.5

package/dist/lib/footer-for-booking/FooterForBooking.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { FooterForBooking } from './FooterForBooking';
+
+describe('Test floating button', () => {
+  test('Smoke test', () => {
+    render(
+      <FooterForBooking
+        eventHandler={() => undefined}
+        price="1250 грн"
+        duration={50}
+        isIos
+      />
+    );
+  });
+
+  test('Smoke test', () => {
+    const handleEvent = jest.fn();
+    render(
+      <FooterForBooking
+        eventHandler={handleEvent}
+        price="1250 грн"
+        duration={50}
+        isIos
+      />
+    );
+    screen.getByText('Записатися').click();
+    expect(handleEvent).toHaveBeenCalledTimes(1);
+  });
+});

package/dist/lib/footer-for-booking/FooterForBooking.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Container, InfoContainer, SmallIcon } from './FooterForBooking.style';
+import { Button } from '../button/Button';
+import { timeOutline, cardOutline } from 'ionicons/icons';
+import '../Theme/global.css';
+
+export interface FooterForBookingProps {
+  /*
+   * Function to switch on booking system
+   */
+  eventHandler: (props?: React.SyntheticEvent) => void;
+
+  /*
+   * Duration of consultation (in mn)
+   */
+  duration: number;
+
+  /*
+   * Consultation cost. You need to transfer it together with the type of currency
+   */
+  price: string;
+
+  /*
+   * If platform === ios set this props true
+   */
+  isIos: boolean;
+  ['data-testid']?: string;
+}
+
+export const FooterForBooking: React.FC<FooterForBookingProps> = (props) => {
+  return (
+    <Container isIos={props.isIos}>
+      <InfoContainer>
+        <h4>
+          <SmallIcon icon={timeOutline} color="primary" />
+          <>{props.duration} хв</>
+        </h4>
+        <h4>
+          <SmallIcon icon={cardOutline} color="primary" />
+          {props.price}
+        </h4>
+      </InfoContainer>
+      <Button
+        buttonType={'primary'}
+        isDisabled={false}
+        data-testid={props['data-testid']}
+        onClick={props.eventHandler} // #skipcq
+      >
+        Записатися
+      </Button>
+    </Container>
+  );
+};

package/dist/lib/input/Input.style.ts

@@ -0,0 +1,37 @@
+import { IonIcon, IonInput } from '@ionic/react';
+import { colorConstants } from '../Theme/mindly_constants';
+import styled from 'styled-components';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const InputIonIcon = styled<any>(IonIcon)`
+  // skipcq JS-0323
+  width: 20px;
+  z-index: 3;
+  height: 20px;
+  position: absolute;
+  top: calc(50% - 10px);
+  left: 20px;
+  color: ${colorConstants.primaryTextColor} !important;
+`;
+
+interface CustomIonInputProps {
+  isActive: boolean;
+}
+
+export const CustomIonInput = styled(IonInput)<CustomIonInputProps>`
+  position: relative;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: 'Lato Regular', sans-serif;
+  --padding-start: 55px !important;
+  --background: ${colorConstants.AccentInputBgColor} !important;
+  min-height: 36px;
+  line-height: 20px;
+  color: ${(props) =>
+    props.isActive
+      ? colorConstants.primaryTextColor
+      : colorConstants.AccentDisabledColor};
+  --placeholder-color: ${colorConstants.AccentDisabledColor};
+  --placeholder-opacity: 1;
+`;

package/dist/lib/input/Input.test.tsx

@@ -0,0 +1,21 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { Input } from './Input';
+import { personOutline } from 'ionicons/icons';
+
+describe('Test input', () => {
+  test('Smoke test', () => {
+    render(
+      <Input
+        data-cy="input"
+        icon={personOutline}
+        isActive
+        name={'input'}
+        onIonChange={() => undefined}
+        placeholder={'input'}
+        type="text"
+        value=""
+      />
+    );
+  });
+});

package/dist/lib/input/Input.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { CustomIonInput, InputIonIcon } from './Input.style';
+import '../Theme/global.css';
+
+export interface InputProps {
+  /*
+   *  Toggles the color of text in the input (value !== '')
+   */
+  isActive: boolean;
+
+  /*
+   * Default react input name
+   */
+  name: string;
+
+  /*
+   * Default input type
+   */
+  type:
+    | 'date'
+    | 'email'
+    | 'number'
+    | 'password'
+    | 'search'
+    | 'tel'
+    | 'text'
+    | 'url'
+    | 'time'
+    | 'week'
+    | 'month'
+    | 'datetime-local';
+
+  /*
+   * Default input placeholder
+   */
+  placeholder: string;
+
+  /*
+   * Default input value
+   */
+  value: string;
+
+  /*
+   * Data test id for cypress
+   */
+  ['data-testid']?: string;
+
+  /*
+   * Default onIonChange
+   */
+  onIonChange: (e: CustomEvent) => void;
+
+  /*
+   * Link on icon
+   */
+  icon: string;
+}
+
+export const Input: React.FC<InputProps> = (props) => {
+  return (
+    <CustomIonInput
+      name={props.name}
+      placeholder={props.placeholder}
+      value={props.value}
+      data-testid={props['data-testid']}
+      onIonChange={(e) => props.onIonChange(e)}
+      isActive={props.isActive}
+      type={props.type}
+    >
+      <InputIonIcon icon={props.icon} />
+    </CustomIonInput>
+  );
+};

package/dist/lib/list-button/ListButton.style.ts

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import { colorConstants } from '../Theme/mindly_constants';
+import { IonIcon } from '@ionic/react';
+
+export const Container = styled.button`
+  display: flex;
+  justify-content: space-between;
+  color: ${colorConstants.primaryTextColor};
+  border: 0;
+  border-bottom: 1px solid ${colorConstants.AccentDivider};
+  width: 100%;
+  padding: 10px 16px;
+  background: inherit;
+  align-items: center;
+`;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const CustomIonIcon = styled<any>(IonIcon)`
+  // #skipcq
+  font-size: 24px;
+`;

package/dist/lib/list-button/ListButton.test.tsx

@@ -0,0 +1,26 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { ListButton } from './ListButton';
+import { personOutline } from 'ionicons/icons';
+
+describe('Test list button', () => {
+  test('Smoke test', () => {
+    render(
+      <ListButton onClick={() => false} icon={personOutline}>
+        Кнопка
+      </ListButton>
+    );
+  });
+
+  test('Smoke test', () => {
+    const handleEvent = jest.fn();
+    render(
+      <ListButton onClick={handleEvent} icon={personOutline}>
+        Кнопка
+      </ListButton>
+    );
+    const listButton = screen.getByText('Кнопка');
+    listButton.click();
+    expect(handleEvent).toHaveBeenCalledTimes(1);
+  });
+});

package/dist/lib/list-button/ListButton.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import '../Theme/global.css';
+import { Container, CustomIonIcon } from './ListButton.style';
+
+export interface ListButtonProps {
+  /*
+   * Text inside the button (default React children)
+   */
+  children: React.ReactNode;
+
+  /*
+   * Link on icon
+   */
+  icon: string;
+
+  /*
+   * Default React onClick
+   */
+  onClick: (props?: React.SyntheticEvent) => void;
+  ['data-testid']?: string;
+}
+
+export const ListButton: React.FC<ListButtonProps> = (props) => {
+  return (
+    <Container data-testid={props['data-testid']} onClick={props.onClick}>
+      <h4>{props.children}</h4>
+      <CustomIonIcon src={props.icon} />
+    </Container>
+  );
+};

package/dist/lib/navigation-bar/NavigationBar.style.ts

@@ -0,0 +1,81 @@
+import styled, { css } from 'styled-components';
+import { IonHeader } from '@ionic/react';
+import { colorConstants } from '../Theme/mindly_constants';
+
+interface ContainerProps {
+  isIos: boolean;
+  isInternetConnected: boolean;
+}
+
+export const Container = styled(IonHeader)<ContainerProps>`
+  padding: ${(props) =>
+    props.isInternetConnected ? '10px 16px' : '40px 16px 16px'};
+  background: #ffffff;
+  position: fixed;
+  z-index: 1000;
+  min-height: ${(props) => (props.isInternetConnected ? '44px' : '74px')};
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
+  color: ${colorConstants.secondaryTextColor};
+
+  @media (min-width: 600px) {
+    padding-left: calc((100vw - 468px) / 2);
+    padding-right: calc((100vw - 468px) / 2);
+  }
+
+  @media (min-width: 1024px) {
+    padding-left: calc((100vw - 960px) / 2);
+    padding-right: calc((100vw - 960px) / 2);
+  }
+
+  .left {
+    cursor: pointer;
+    position: absolute;
+    color: ${colorConstants.primaryColor};
+    left: 0;
+  }
+
+  .right {
+    cursor: pointer;
+    color: ${colorConstants.primaryColor};
+    position: absolute;
+    right: 0;
+  }
+
+  &:after {
+    background-image: none;
+  }
+
+  ${(props: ContainerProps) =>
+    props.isIos &&
+    css`
+      padding: ${props.isInternetConnected
+        ? '54px 16px 10px'
+        : '64px 16px 10px'};
+      min-height: ${props.isInternetConnected ? '88px' : '98px'};
+
+      .left {
+        position: absolute;
+        left: 0;
+      }
+
+      .right {
+        position: absolute;
+        right: 0;
+      }
+    `}
+`;
+
+export const PositionRelative = styled.div`
+  position: relative;
+  display: flex;
+  text-align: center;
+  justify-content: center;
+
+  @media (min-width: 600px) {
+    width: 468px;
+  }
+
+  @media (min-width: 1024px) {
+    width: 960px;
+  }
+`;

package/dist/lib/navigation-bar/NavigationBar.test.tsx

@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { NavigationBar } from './NavigationBar';
+
+describe('Test navigation bar', () => {
+  test('Smoke test', () => {
+    render(
+      <NavigationBar isInternetConnected isIos>
+        <h3 className="left">first</h3>
+        <h3>second</h3>
+        <h3 className="right">third</h3>
+      </NavigationBar>
+    );
+  });
+});

package/dist/lib/navigation-bar/NavigationBar.tsx

@@ -0,0 +1,31 @@
+import React, { ReactNode } from 'react';
+import { Container, PositionRelative } from './NavigationBar.style';
+import '../Theme/global.css';
+
+export interface NavigationBarProps {
+  /*
+   * If internet connected, set this props true. Changes the appearance of a component
+   */
+  isInternetConnected: boolean;
+
+  /*
+   * Here you pass the special HTML structure. All variations can be viewed in the storybook
+   */
+  children?: ReactNode;
+
+  /*
+   * If platform === ios set this props true
+   */
+  isIos: boolean;
+}
+
+export const NavigationBar: React.FC<NavigationBarProps> = (props) => {
+  return (
+    <Container
+      isIos={props.isIos}
+      isInternetConnected={props.isInternetConnected}
+    >
+      <PositionRelative>{props.children}</PositionRelative>
+    </Container>
+  );
+};

package/dist/lib/no-internet-connection/NoInternetConnection.style.ts

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { colorConstants } from '../Theme/mindly_constants';
+
+interface ContainerProps {
+  isInternetConnected: boolean;
+  isIos: boolean;
+}
+
+export const Container = styled.div<ContainerProps>`
+  z-index: 999;
+  position: fixed;
+  box-sizing: border-box;
+  background: ${colorConstants.AccentCross};
+  width: 100%;
+  display: ${(props) => (props.isInternetConnected ? 'none' : 'flex')};
+  justify-content: center;
+  align-items: center;
+  padding: ${(props) => (props.isIos ? '32px 0 8px' : '8px 0')};
+
+  span {
+    font-size: 10px;
+    line-height: 14px;
+    margin-left: 8px;
+    color: ${colorConstants.White};
+  }
+`;

package/dist/lib/no-internet-connection/NoInternetConnection.svg

@@ -0,0 +1,10 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7 13.5625C3.38158 13.5625 0.4375 10.6184 0.4375 7C0.4375 3.38158 3.38158 0.4375 7 0.4375C10.6184 0.4375 13.5625 3.38158 13.5625 7C13.5625 10.6184 10.6184 13.5625 7 13.5625Z" fill="#F1646F"/>
+    <path d="M7 14C3.14008 14 0 10.8599 0 7C0 3.14008 3.14008 0 7 0C10.8599 0 14 3.14008 14 7C14 10.8599 10.8599 14 7 14ZM7 0.875C3.6225 0.875 0.875 3.6225 0.875 7C0.875 10.3775 3.6225 13.125 7 13.125C10.3775 13.125 13.125 10.3775 13.125 7C13.125 3.6225 10.3775 0.875 7 0.875Z" fill="white"/>
+    <path d="M11.509 6.25341C11.3976 6.25341 11.285 6.21083 11.1999 6.12566C10.9362 5.86199 10.6492 5.62458 10.3476 5.41924C10.1475 5.28391 10.095 5.01208 10.2315 4.81199C10.3663 4.61191 10.6381 4.55824 10.8388 4.69591C11.1859 4.93099 11.5155 5.20399 11.8188 5.50616C11.9897 5.67708 11.9897 5.95416 11.8194 6.12566C11.7336 6.21024 11.6216 6.25341 11.509 6.25341Z" fill="white"/>
+    <path d="M2.49085 6.25316C2.37943 6.25316 2.26743 6.21058 2.18226 6.12541C2.01076 5.95508 2.0096 5.67799 2.18051 5.50649C3.7911 3.88949 6.0311 3.17666 8.36735 3.63574C8.60418 3.68241 8.75876 3.91283 8.71268 4.14966C8.66601 4.38649 8.43618 4.53758 8.19876 4.49499C6.1466 4.09074 4.2041 4.71433 2.80001 6.12424C2.71485 6.20999 2.60285 6.25316 2.49085 6.25316Z" fill="white"/>
+    <path d="M9.93993 7.82829C9.82851 7.82829 9.71593 7.7857 9.63076 7.70054C9.37351 7.44329 9.08359 7.22395 8.77034 7.04954C8.55918 6.9317 8.48393 6.66512 8.60118 6.45395C8.71843 6.24279 8.98501 6.16695 9.19676 6.28479C9.58001 6.49887 9.93468 6.76662 10.2497 7.08045C10.4206 7.25137 10.4206 7.52845 10.2503 7.69995C10.1645 7.7857 10.0519 7.82829 9.93993 7.82829Z" fill="white"/>
+    <path d="M4.06016 7.82864C3.94816 7.82864 3.83616 7.78606 3.75099 7.70031C3.58007 7.52939 3.58007 7.25172 3.75099 7.08139C4.37632 6.45664 5.14691 6.03022 5.97932 5.84939C6.21499 5.79747 6.44891 5.94739 6.50024 6.18306C6.55216 6.41931 6.40224 6.65264 6.16657 6.70397C5.49749 6.84981 4.87624 7.19456 4.36991 7.70031C4.28416 7.78606 4.17157 7.82864 4.06016 7.82864Z" fill="white"/>
+    <path d="M6.99999 10.4997C6.42599 10.4997 5.92258 10.1135 5.77733 9.56109C5.71608 9.32776 5.85608 9.08801 6.08941 9.02676C6.32099 8.96726 6.56249 9.10492 6.62374 9.33884C6.66866 9.50976 6.81974 9.62467 6.99999 9.62467C7.21874 9.62467 7.39666 9.44676 7.39666 9.22801C7.39666 9.04776 7.28174 8.89726 7.11082 8.85176C6.87749 8.79051 6.73691 8.55076 6.79874 8.31742C6.85999 8.08351 7.10266 7.94642 7.33307 8.00534C7.88549 8.15059 8.27166 8.65284 8.27166 9.22801C8.27166 9.92917 7.70116 10.4997 6.99999 10.4997Z" fill="white"/>
+    <path d="M2.36069 12.0764C2.24869 12.0764 2.13669 12.0339 2.05153 11.9481C1.88061 11.7772 1.88061 11.5001 2.05153 11.3292L11.33 2.05128C11.5009 1.88037 11.778 1.88037 11.9489 2.05128C12.1199 2.2222 12.1199 2.49928 11.9489 2.6702L2.66986 11.9481C2.58469 12.0339 2.47269 12.0764 2.36069 12.0764Z" fill="white"/>
+</svg>

package/dist/lib/no-internet-connection/NoInternetConnection.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { NoInternetConnection } from './NoInternetConnection';
+
+describe('Test no internet connection', () => {
+  test('Smoke test', () => {
+    render(<NoInternetConnection isInternetConnected isIos />);
+  });
+});

package/dist/lib/no-internet-connection/NoInternetConnection.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ReactComponent as Icon } from './NoInternetConnection.svg';
+import { Container } from './NoInternetConnection.style';
+import '../Theme/global.css';
+
+export interface NoInternetConnectionProps {
+  /*
+   * If internet connected, set this props true. Changes the appearance of a component
+   */
+  isInternetConnected: boolean;
+
+  /*
+   * If platform === ios set this props true
+   */
+  isIos: boolean;
+}
+
+export const NoInternetConnection: React.FC<NoInternetConnectionProps> = (
+  props
+) => {
+  return (
+    <Container
+      isInternetConnected={props.isInternetConnected}
+      isIos={props.isIos}
+    >
+      <Icon />
+      <span>Інтернет підключення відсутнє</span>
+    </Container>
+  );
+};

package/dist/lib/notes-card-text/NotesCardText.style.ts

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const StyledNotesCardPre = styled.pre`
+  overflow-y: hidden;
+  overflow-x: auto;
+
+  white-space: pre-wrap;
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  color: #1d201f;
+`;

package/dist/lib/notes-card-text/NotesCardText.tsx

@@ -0,0 +1,32 @@
+import { StyledNotesCardPre } from './NotesCardText.style';
+import React, { useCallback } from 'react';
+
+export type NotesCardTextProps = {
+  text: string
+}
+
+const NotesCardText: React.FC<NotesCardTextProps> = ({ text }) => {
+  const matchAndReplaceLinkToATag = useCallback(
+    () => {
+      const expression =
+        // eslint-disable-next-line max-len
+        /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi;
+      const regex = RegExp(expression);
+
+      return text.split(regex).map((textPart) =>
+        regex.test(textPart) ? (
+          <a className="text-link" href={textPart}>
+            {textPart}
+          </a>
+        ) : (
+          textPart
+        )
+      );
+    },
+    [text]
+  );
+
+  return (<StyledNotesCardPre>{matchAndReplaceLinkToATag()}</StyledNotesCardPre>);
+};
+
+export default NotesCardText;

package/dist/lib/notes-editor/NotesEditor.styled.ts

@@ -0,0 +1,24 @@
+import { IonTextarea } from '@ionic/react';
+import styled from 'styled-components';
+
+export const StyledIonTextarea = styled(IonTextarea)`
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  --padding-bottom: 20px !important;
+  --padding-end: 16px !important;
+  --padding-start: 16px !important;
+  --padding-top: 0 !important;
+
+  textarea {
+    min-height: 300px !important;
+
+    overflow: hidden !important;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+`;

package/dist/lib/notes-editor/NotesEditor.tsx

@@ -0,0 +1,16 @@
+import React, { forwardRef, HTMLAttributes, RefAttributes } from 'react';
+import { JSX } from '@ionic/core/components';
+import { StyledIonTextarea } from './NotesEditor.styled';
+
+export type NotesEditorProps = JSX.IonTextarea &
+  HTMLAttributes<HTMLIonTextareaElement> &
+  RefAttributes<HTMLIonTextareaElement>;
+
+const NotesEditor = forwardRef<HTMLIonTextareaElement, NotesEditorProps>(
+  (props, ref) => {
+    return <StyledIonTextarea autoGrow ref={ref} {...props} />;
+  }
+);
+NotesEditor.displayName = 'NotesEditor';
+
+export default NotesEditor;

package/dist/lib/scroll-tabs/ScrollTabs.style.ts

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import { IonSegment, IonSegmentButton } from '@ionic/react';
+import { colorConstants } from '../Theme/mindly_constants';
+
+export const Container = styled(IonSegment)`
+  --background: ${colorConstants.AccentTabsBgColor};
+`;
+
+export const Button = styled(IonSegmentButton)`
+  --background-checked: ${colorConstants.White};
+  --background-focused: ${colorConstants.White};
+  --background-hover: ${colorConstants.White};
+  --color: ${colorConstants.primaryTextColor};
+  --color-checked: ${colorConstants.primaryTextColor};
+  --color-focused: ${colorConstants.primaryTextColor};
+  --color-hover: ${colorConstants.primaryTextColor};
+  --transition: 0;
+  --indicator-transform: 0;
+`;

package/dist/lib/scroll-tabs/ScrollTabs.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { ScrollTabs } from './ScrollTabs';
+
+describe('Test scroll tabs', () => {
+  test('Smoke test', () => {
+    render(<ScrollTabs setActiveTab={() => false} value="video" />);
+  });
+});

package/dist/lib/scroll-tabs/ScrollTabs.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { IonLabel } from '@ionic/react';
+import { Button, Container } from './ScrollTabs.style';
+import '../Theme/global.css';
+
+export interface ScrollTabsProps {
+  /*
+   * Assumes passing a setter for the active tab value
+   */
+  setActiveTab: (e?: string) => void;
+
+  /*
+   * Active tab value
+   */
+  value: 'profile' | 'video' | 'articles';
+}
+
+export const ScrollTabs: React.FC<ScrollTabsProps> = (props) => {
+  return (
+    <Container
+      value={props.value}
+      mode="ios"
+      onIonChange={(e) => props.setActiveTab(e.detail.value)}
+    >
+      <Button value="profile" data-testid="profile">
+        <IonLabel>
+          <h5>Профіль</h5>
+        </IonLabel>
+      </Button>
+      <Button value="video" data-testid="video">
+        <IonLabel>
+          <h5>Відео</h5>
+        </IonLabel>
+      </Button>
+      <Button value="articles" data-testid="articles">
+        <IonLabel>
+          <h5>Статті</h5>
+        </IonLabel>
+      </Button>
+    </Container>
+  );
+};