@orfium/ictinus 5.43.6 → 5.43.8

package/src/components/Notification/Notification.test.tsx

@@ -1,293 +0,0 @@
-import { vi } from 'vitest';
-import { fireEvent, render } from '../../test';
-import Toast from '../ToastV4';
-import Banner from './Banner';
-import InlineNotification from './InlineNotification';
-import type { NotificationTypes } from './Notification';
-import NotificationsContainer from './NotificationsContainer';
-import NotificationVisual from './NotificationVisual';
-import Snackbar from './Snackbar';
-
-describe('Inline Notification', () => {
-  const data = {
-    hasIcon: true,
-    message: 'message',
-    type: 'info' as NotificationTypes,
-    primaryCTALabel: 'primaryCTALabel',
-  };
-
-  test('Inline Notification renders correctly', async () => {
-    const primaryCTA = vi.fn();
-    const closeCTA = vi.fn();
-
-    const { findByText } = render(
-      <InlineNotification {...data} primaryCTA={primaryCTA} closeCTA={closeCTA} />
-    );
-
-    const message = await findByText(data.message);
-    expect(message).toBeTruthy();
-
-    const primaryCTALabel = await findByText(data.primaryCTALabel);
-    expect(primaryCTALabel).toBeTruthy();
-  });
-
-  test('Inline Notification primaryCTA works properly when clicked', async () => {
-    const primaryCTA = vi.fn();
-    const closeCTA = vi.fn();
-
-    const { findByText } = render(
-      <InlineNotification {...data} primaryCTA={primaryCTA} closeCTA={closeCTA} />
-    );
-
-    const primaryCTALabel = await findByText(data.primaryCTALabel);
-    expect(primaryCTALabel).toBeTruthy();
-
-    fireEvent.click(primaryCTALabel);
-
-    expect(primaryCTA).toHaveBeenCalledTimes(1);
-  });
-
-  test('Inline Notification closeCTA works properly when clicked', async () => {
-    const primaryCTA = vi.fn();
-    const closeCTA = vi.fn();
-
-    const { findByTestId } = render(
-      <InlineNotification {...data} primaryCTA={primaryCTA} closeCTA={closeCTA} />
-    );
-
-    const closeButton = await findByTestId('notification-close');
-    fireEvent.click(closeButton);
-
-    expect(closeCTA).toHaveBeenCalledTimes(1);
-  });
-});
-
-describe('Notifications Container', () => {
-  const data = {
-    hasIcon: true,
-    title: 'Message heading',
-    message: 'Informative Message',
-    type: 'info' as NotificationTypes,
-    primaryCTALabel: 'primaryCTALabel',
-  };
-
-  test('Notifications Container with 1 Banner Notification renders correctly', async () => {
-    const primaryCTA = vi.fn();
-    const closeCTA = vi.fn();
-
-    const { findByText } = render(
-      <NotificationsContainer position="top-right">
-        <Banner {...data} primaryCTA={primaryCTA} closeCTA={closeCTA} />
-      </NotificationsContainer>
-    );
-
-    const message = await findByText(data.message);
-    expect(message).toBeTruthy();
-
-    const primaryCTALabel = await findByText(data.primaryCTALabel);
-    expect(primaryCTALabel).toBeTruthy();
-  });
-
-  test("Notifications Container Banner Notification's primaryCTA works properly when clicked", async () => {
-    const primaryCTA = vi.fn();
-    const closeCTA = vi.fn();
-
-    const { findByText } = render(
-      <NotificationsContainer position="top-right">
-        <Banner {...data} primaryCTA={primaryCTA} closeCTA={closeCTA} />
-      </NotificationsContainer>
-    );
-
-    const primaryCTALabel = await findByText(data.primaryCTALabel);
-    expect(primaryCTALabel).toBeTruthy();
-    fireEvent.click(primaryCTALabel);
-    expect(primaryCTA).toHaveBeenCalledTimes(1);
-  });
-
-  test("Notifications Container Banner Notification's closeCTA works properly when clicked", async () => {
-    const primaryCTA = vi.fn();
-    const closeCTA = vi.fn();
-
-    const { findByTestId } = render(
-      <NotificationsContainer position="top-right">
-        <Banner {...data} primaryCTA={primaryCTA} closeCTA={closeCTA} />
-      </NotificationsContainer>
-    );
-
-    const closeButton = await findByTestId('notification-close');
-
-    fireEvent.click(closeButton);
-    expect(closeCTA).toHaveBeenCalledTimes(1);
-  });
-});
-
-describe('Toast Notification (Toast with NotificationVisual)', () => {
-  const toastData = {
-    message: 'message',
-    type: 'info' as NotificationTypes,
-  };
-
-  const visualData = {
-    title: 'title',
-    primaryCTALabel: 'primaryCTALabel',
-    secondaryCTALabel: 'secondaryCTALabel',
-    description:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra neque nec est porttitor',
-  };
-
-  test('Toast with NotificationVisual renders correctly', async () => {
-    const primaryCTA = vi.fn();
-    const secondaryCTA = vi.fn();
-    const closeCTA = vi.fn();
-
-    const { findByText } = render(
-      <Toast {...toastData} closeCTA={closeCTA}>
-        <NotificationVisual {...visualData} primaryCTA={primaryCTA} secondaryCTA={secondaryCTA} />
-      </Toast>
-    );
-
-    // Toast is initialized with expanded=false
-
-    const message = await findByText(toastData.message);
-    expect(message).toBeTruthy();
-  });
-
-  test('Toast with NotificationVisual expands/shrinks correctly', async () => {
-    const primaryCTA = vi.fn();
-    const secondaryCTA = vi.fn();
-    const closeCTA = vi.fn();
-
-    const { findByTestId, findByText } = render(
-      <Toast {...toastData} closeCTA={closeCTA}>
-        <NotificationVisual {...visualData} primaryCTA={primaryCTA} secondaryCTA={secondaryCTA} />
-      </Toast>
-    );
-
-    // Toast is initialized with expanded=false
-    // Note: The NotificationVisual is rendered regardless of the isExpanded value, so it can be always found in document
-    // If isExpanded=false, the min-height of the NotificationVisual is 0, else > 0.
-    // So to test if the visual is visible or not, the only way to check it is check the min-height
-
-    const expandButton = await findByTestId('toast-expand');
-    const expandedContainer = await findByTestId('expanded-container');
-    expect(expandedContainer).toHaveStyle('min-height: 0rem;');
-    fireEvent.click(expandButton);
-    expect(expandedContainer).toHaveStyle('min-height: 9.125rem;');
-
-    const title = await findByText(visualData.title);
-    expect(title).toBeTruthy();
-
-    const primaryCTALabel = await findByText(visualData.primaryCTALabel);
-    expect(primaryCTALabel).toBeTruthy();
-
-    const secondaryCTALabel = await findByText(visualData.secondaryCTALabel);
-    expect(secondaryCTALabel).toBeTruthy();
-
-    const description = await findByText(visualData.description);
-    expect(description).toBeTruthy();
-  });
-
-  test('Toast with NotificationVisual closeCTA works properly', async () => {
-    const primaryCTA = vi.fn();
-    const secondaryCTA = vi.fn();
-    const closeCTA = vi.fn();
-
-    const { findByTestId } = render(
-      <Toast {...toastData} isExpanded closeCTA={closeCTA}>
-        <NotificationVisual {...visualData} primaryCTA={primaryCTA} secondaryCTA={secondaryCTA} />
-      </Toast>
-    );
-
-    const closeButton = await findByTestId('toast-close');
-    fireEvent.click(closeButton);
-    expect(closeCTA).toHaveBeenCalledTimes(1);
-  });
-
-  test('Toast with NotificationVisual primaryCTA and secondaryCTA work properly', async () => {
-    const primaryCTA = vi.fn();
-    const secondaryCTA = vi.fn();
-    const closeCTA = vi.fn();
-
-    const { findByText } = render(
-      <Toast {...toastData} isExpanded closeCTA={closeCTA}>
-        <NotificationVisual {...visualData} primaryCTA={primaryCTA} secondaryCTA={secondaryCTA} />
-      </Toast>
-    );
-
-    const primaryCTALabel = await findByText(visualData.primaryCTALabel);
-    expect(primaryCTALabel).toBeTruthy();
-    fireEvent.click(primaryCTALabel);
-    expect(primaryCTA).toHaveBeenCalledTimes(1);
-
-    const secondaryCTALabel = await findByText(visualData.secondaryCTALabel);
-    expect(secondaryCTALabel).toBeTruthy();
-    fireEvent.click(secondaryCTALabel);
-    expect(secondaryCTA).toHaveBeenCalledTimes(1);
-  });
-});
-
-describe('Snackbar Notification', () => {
-  const data = {
-    message: 'message',
-    type: 'info' as NotificationTypes,
-    description: 'this is the description',
-    primaryCTALabel: 'primaryCTALabel',
-    secondaryCTALabel: 'secondaryCTALabel',
-  };
-
-  test('Snackbar Notification renders correctly', async () => {
-    const primaryCTA = vi.fn();
-    const secondaryCTA = vi.fn();
-    const closeCTA = vi.fn();
-
-    const { findByText } = render(
-      <Snackbar {...data} primaryCTA={primaryCTA} secondaryCTA={secondaryCTA} closeCTA={closeCTA} />
-    );
-
-    const message = await findByText(data.message);
-    expect(message).toBeTruthy();
-
-    const description = await findByText(data.description);
-    expect(description).toBeTruthy();
-
-    const primaryCTALabel = await findByText(data.primaryCTALabel);
-    expect(primaryCTALabel).toBeTruthy();
-
-    const secondaryCTALabel = await findByText(data.secondaryCTALabel);
-    expect(secondaryCTALabel).toBeTruthy();
-  });
-
-  test("Snackbar Notification's closeCTA works properly", async () => {
-    const primaryCTA = vi.fn();
-    const secondaryCTA = vi.fn();
-    const closeCTA = vi.fn();
-
-    const { findByTestId } = render(
-      <Snackbar {...data} primaryCTA={primaryCTA} secondaryCTA={secondaryCTA} closeCTA={closeCTA} />
-    );
-
-    const closeButton = await findByTestId('snackbar-close');
-    fireEvent.click(closeButton);
-    expect(closeCTA).toHaveBeenCalledTimes(1);
-  });
-
-  test("Snackbar Notification's primaryCTA and secondaryCTA work properly", async () => {
-    const primaryCTA = vi.fn();
-    const secondaryCTA = vi.fn();
-    const closeCTA = vi.fn();
-
-    const { findByText } = render(
-      <Snackbar {...data} primaryCTA={primaryCTA} secondaryCTA={secondaryCTA} closeCTA={closeCTA} />
-    );
-
-    const primaryCTALabel = await findByText(data.primaryCTALabel);
-    expect(primaryCTALabel).toBeTruthy();
-    fireEvent.click(primaryCTALabel);
-    expect(primaryCTA).toHaveBeenCalledTimes(1);
-
-    const secondaryCTALabel = await findByText(data.secondaryCTALabel);
-    expect(secondaryCTALabel).toBeTruthy();
-    fireEvent.click(secondaryCTALabel);
-    expect(secondaryCTA).toHaveBeenCalledTimes(1);
-  });
-});

package/src/components/Notification/Notification.tsx

@@ -1,16 +0,0 @@
-export type NotificationTypes = 'success' | 'error' | 'info' | 'warning';
-
-export type NotificationVariants = 'inline' | 'banner';
-
-export type NotificationStyleType = 'elevated' | 'outlined';
-
-export type NotificationActions = {
-  /** The primary call-to-action label of the Notification */
-  primaryCTALabel?: string;
-  /** The primary call-to-action of the Notification */
-  primaryCTA?: () => void;
-  /** The secondary call-to-action label of the Notification */
-  secondaryCTALabel?: string;
-  /** The secondary call-to-action of the Notification */
-  secondaryCTA?: () => void;
-};

package/src/components/Notification/NotificationVisual/NotificationVisual.style.tsx

@@ -1,14 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
-import { rem, vars } from '@orfium/tokens';
-
-export const visualContainer = (): SerializedStyles => css`
-  padding: ${vars.spacing['6']};
-`;
-
-export const descriptionContainer = (): SerializedStyles => css`
-  padding-top: ${vars.spacing['4']};
-  max-height: ${rem(180)};
-  overflow: auto;
-  width: ${rem(547)};
-`;

package/src/components/Notification/NotificationVisual/NotificationVisual.tsx

@@ -1,58 +0,0 @@
-import * as React from 'react';
-import { generateTestDataId } from 'utils/helpers';
-import type { TestId } from 'utils/types';
-
-import { visualContainer, descriptionContainer } from './NotificationVisual.style';
-import type { NotificationActions } from '../Notification';
-import { boldMessageContainer } from '../Notification.style';
-import NotificationActionsArea from '../subcomponents/NotificationActionsArea';
-
-export type NotificationVisualProps = {
-  /** The message heading of the Notification */
-  title: string | undefined;
-  /** The description of the Notification (only for toast) */
-  description: string | undefined;
-  /** The data test id if needed */
-  dataTestId?: TestId;
-} & NotificationActions;
-
-const NotificationVisual: React.FCC<NotificationVisualProps> = ({
-  title,
-  primaryCTALabel = 'OK',
-  primaryCTA,
-  secondaryCTALabel = 'Cancel',
-  secondaryCTA,
-  description,
-  dataTestId,
-}) => {
-  const hasActions = (primaryCTA && primaryCTALabel) || (secondaryCTA && secondaryCTALabel);
-
-  return (
-    <div css={visualContainer()}>
-      <div
-        css={boldMessageContainer()}
-        data-testid={generateTestDataId('visual-title', dataTestId)}
-      >
-        {title}
-      </div>
-      <div
-        css={descriptionContainer()}
-        data-testid={generateTestDataId('visual-description', dataTestId)}
-      >
-        {description}
-      </div>
-      {hasActions && (
-        <NotificationActionsArea
-          primaryCTA={primaryCTA}
-          primaryCTALabel={primaryCTALabel}
-          secondaryCTA={secondaryCTA}
-          secondaryCTALabel={secondaryCTALabel}
-          dataTestPrefixId="visual"
-          dataTestId={dataTestId}
-        />
-      )}
-    </div>
-  );
-};
-
-export default NotificationVisual;

package/src/components/Notification/NotificationVisual/index.tsx

@@ -1,2 +0,0 @@
-export { default } from './NotificationVisual';
-export * from './NotificationVisual';

package/src/components/Notification/NotificationsContainer/NotificationsContainer.style.tsx

@@ -1,54 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
-import { rem, vars } from '@orfium/tokens';
-
-const getPositionStyle = (styleLiteral: string) => {
-  return css`
-    ${styleLiteral}
-  `;
-};
-
-const positionOptions = {
-  'top-right': `top:0; right: 0; align-items: flex-end;`,
-  'top-left': `top:0; left: 0; align-items: flex-start;`,
-  'bottom-left': `bottom:0; left: 0; align-items: flex-start;`,
-  'bottom-right': `bottom:0; right: 0; align-items: flex-end;`,
-};
-
-export const notificationsContainer = (
-  currentPosition: string,
-  parent: HTMLElement
-): SerializedStyles => css`
-  position: ${parent === document.body ? 'fixed' : 'absolute'};
-  ${getPositionStyle(positionOptions[currentPosition])};
-  max-width: 66%;
-  display: flex;
-  flex-direction: column;
-  z-index: 2500;
-  margin: ${vars.spacing['4']} ${vars.spacing['6']} ${vars.spacing['6']};
-  > div {
-    margin: ${vars.spacing['4']} 0;
-  }
-
-  div[notification-type='toast'] {
-    min-width: ${rem(336)};
-    width: 100%;
-  }
-
-  div[notification-type='snackbar'] {
-    min-width: ${rem(336)};
-    width: 100%;
-  }
-
-  div[notification-type='banner'] {
-    min-width: ${rem(490)};
-  }
-
-  div[notification-type='banner'] ~ div[notification-type='toast'] {
-    width: 100%;
-  }
-
-  div[notification-type='banner'] ~ div[notification-type='snackbar'] {
-    width: 100%;
-  }
-`;

package/src/components/Notification/NotificationsContainer/NotificationsContainer.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-import { notificationsContainer } from './NotificationsContainer.style';
-
-export type NotificationsContainerPositions =
-  | 'top-right'
-  | 'top-left'
-  | 'bottom-left'
-  | 'bottom-right';
-
-export type NotificationsContainerProps = {
-  /** Notifications Container position */
-  position: NotificationsContainerPositions;
-  parent?: HTMLElement | null;
-};
-
-const NotificationsContainer: React.FCC<NotificationsContainerProps> = (props) => {
-  const { children, position, parent = document.body } = props;
-
-  if (parent === null) {
-    return null;
-  }
-
-  return ReactDOM.createPortal(
-    <div css={notificationsContainer(position, parent)}>{children}</div>,
-    parent
-  );
-};
-
-export default NotificationsContainer;

package/src/components/Notification/NotificationsContainer/index.ts

@@ -1,2 +0,0 @@
-export { default } from './NotificationsContainer';
-export * from './NotificationsContainer';

package/src/components/Notification/Snackbar/Snackbar.style.ts

@@ -1,55 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
-import { rem, vars } from '@orfium/tokens';
-
-import type { Theme } from '../../../theme';
-import type { NotificationStyleType, NotificationTypes } from '../Notification';
-import { typeToColorStyle } from '../Notification.style';
-
-const snackbarContainerPerType = (
-  type: NotificationTypes,
-  styleType: NotificationStyleType,
-  theme: Theme
-) =>
-  styleType === 'outlined'
-    ? `
-    border: ${vars['border-width']['2']} solid
-    ${vars.color['border-color'].interactive[typeToColorStyle(type)]};
-      `
-    : `
-    border-left: ${vars.color['border-color'].interactive[typeToColorStyle(type)]} ${vars['border-width']['3']} solid;
-    box-shadow: ${theme.globals.elevation['02']};
-`;
-
-export const cardContainer =
-  (type: NotificationTypes, styleType: NotificationStyleType) =>
-  (theme: Theme): SerializedStyles => css`
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    padding: ${vars.spacing['6']};
-    box-sizing: border-box;
-    max-height: ${rem(294)};
-    border-radius: ${vars['border-radius']['3']};
-    background: ${vars.color.background.default};
-    ${snackbarContainerPerType(type, styleType, theme)};
-  `;
-
-export const topContainer = (): SerializedStyles => css`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-bottom: ${vars.spacing['6']};
-`;
-
-export const infoContainer = () => (): SerializedStyles => css`
-  display: flex;
-  align-items: center;
-`;
-
-export const descriptionContainer = (): SerializedStyles => css`
-  font-size: ${vars['font-size']['3']};
-  max-height: ${rem(194)};
-  overflow: auto;
-  width: ${rem(547)};
-`;

package/src/components/Notification/Snackbar/Snackbar.tsx

@@ -1,94 +0,0 @@
-import { vars } from '@orfium/tokens';
-import * as React from 'react';
-import { generateTestDataId } from 'utils/helpers';
-import type { TestId } from 'utils/types';
-
-import Icon from 'components/Icon';
-import type {
-  NotificationActions,
-  NotificationStyleType,
-  NotificationTypes,
-} from '../Notification';
-import {
-  actionContainer,
-  boldMessageContainer,
-  iconContainer,
-  typeToColorStyle,
-} from '../Notification.style';
-import { typeToIconName } from '../subcomponents/CompactNotification/CompactNotification';
-import NotificationActionsArea from '../subcomponents/NotificationActionsArea';
-import { cardContainer, descriptionContainer, infoContainer, topContainer } from './Snackbar.style';
-
-export type SnackbarProps = {
-  /** The informative message of the Toast */
-  message: string;
-  /** The type of the Notification */
-  type: NotificationTypes;
-  /** The style type of the Notification. Defaults to elevated */
-  styleType?: NotificationStyleType;
-  /** The description of the Notification (only for toast) */
-  description: string | undefined;
-  /** The closing call-to-action of the Toast */
-  closeCTA: (() => void) | undefined;
-  /** The data test id if needed */
-  dataTestId?: TestId;
-} & NotificationActions;
-
-const Snackbar: React.FCC<SnackbarProps> = ({
-  message,
-  type,
-  styleType = 'elevated',
-  primaryCTALabel = 'OK',
-  primaryCTA,
-  secondaryCTALabel = 'Cancel',
-  secondaryCTA,
-  description,
-  closeCTA,
-  dataTestId,
-}) => {
-  const hasActions = (primaryCTA && primaryCTALabel) || (secondaryCTA && secondaryCTALabel);
-
-  return (
-    // @TODO remove the below or change to data-
-    // eslint-disable-next-line react/no-unknown-property
-    <div css={cardContainer(type, styleType)} notification-type="snackbar">
-      <div css={topContainer()}>
-        <div css={infoContainer()}>
-          <div css={iconContainer()}>
-            <Icon
-              name={typeToIconName(type)}
-              color={vars.color.text.default[typeToColorStyle(type)]}
-              size={24}
-            />
-          </div>
-          <div css={boldMessageContainer(type)}>{message}</div>
-        </div>
-        <span
-          css={actionContainer()}
-          onClick={closeCTA}
-          data-testid={generateTestDataId('snackbar-close', dataTestId)}
-        >
-          <Icon name="close" color={vars.color.text.default.secondary} size={24} />
-        </span>
-      </div>
-      <div
-        css={descriptionContainer()}
-        data-testid={generateTestDataId('snackbar-description', dataTestId)}
-      >
-        {description}
-      </div>
-      {hasActions && (
-        <NotificationActionsArea
-          primaryCTA={primaryCTA}
-          primaryCTALabel={primaryCTALabel}
-          secondaryCTA={secondaryCTA}
-          secondaryCTALabel={secondaryCTALabel}
-          dataTestPrefixId="snackbar"
-          dataTestId={dataTestId}
-        />
-      )}
-    </div>
-  );
-};
-
-export default Snackbar;

package/src/components/Notification/Snackbar/index.tsx

@@ -1,2 +0,0 @@
-export { default } from './Snackbar';
-export * from './Snackbar';

package/src/components/Notification/subcomponents/CompactNotification/CompactNotification.style.ts

@@ -1,48 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
-import { rem, vars } from '@orfium/tokens';
-
-import type { Theme } from '../../../../theme';
-import type { NotificationStyleType, NotificationTypes } from '../../Notification';
-import { notificationsContainerPerType } from '../../Notification.style';
-
-export const notificationsContainer =
-  (type: NotificationTypes, styleType: NotificationStyleType) =>
-  (theme: Theme): SerializedStyles => css`
-    box-sizing: border-box;
-    display: flex;
-    justify-content: space-between;
-    overflow: hidden;
-    width: 100%;
-    min-height: ${rem(46)};
-    border-radius: ${vars['border-radius']['2']};
-    color: ${vars.color.text.default.primary};
-    font-size: ${vars['font-size']['3']};
-    ${notificationsContainerPerType(type, styleType, theme)};
-  `;
-
-export const infoContainer = (): SerializedStyles => css`
-  display: flex;
-  align-items: center;
-  padding: 0 ${vars.spacing['6']};
-`;
-
-export const messageContainer = (): SerializedStyles => css`
-  padding: ${vars.spacing['6']} 0;
-`;
-
-export const actionsContainer = (): SerializedStyles => css`
-  display: flex;
-  align-items: center;
-  padding-right: ${vars.spacing['6']};
-  font-weight: ${vars.weight.medium};
-`;
-
-export const headContainer = (): SerializedStyles => css`
-  padding-right: ${vars.spacing['3']};
-  font-weight: ${vars.weight.medium};
-`;
-
-export const primaryActionContainer = () => (): SerializedStyles => css`
-  cursor: pointer;
-`;