@orfium/ictinus 5.43.7 → 5.43.8

package/src/components/Notification/subcomponents/CompactNotification/CompactNotification.tsx

@@ -1,118 +0,0 @@
-import { vars } from '@orfium/tokens';
-import * as React from 'react';
-import { generateTestDataId } from 'utils/helpers';
-import type { TestId } from 'utils/types';
-
-import type { AcceptedIconNames } from 'components/Icon';
-import Button from '../../../Button';
-import Icon from '../../../Icon';
-import type {
-  NotificationActions,
-  NotificationStyleType,
-  NotificationTypes,
-} from '../../Notification';
-import { actionContainer, iconContainer, typeToColorStyle } from '../../Notification.style';
-import {
-  actionsContainer,
-  headContainer,
-  infoContainer,
-  messageContainer,
-  notificationsContainer,
-  primaryActionContainer,
-} from './CompactNotification.style';
-
-export type CompactNotificationVariants = 'inline' | 'banner' | 'card';
-
-export type CompactNotificationProps = {
-  /** Show notification icon based on the type */
-  hasIcon?: boolean;
-  /** The informative message of the Notification */
-  message: string | React.ReactNode;
-  /** The variant of the Notification */
-  variant: CompactNotificationVariants;
-  /** 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;
-  /** The closing call-to-action of the Notification */
-  closeCTA?: () => void;
-  /** The title (message heading) of the Notification */
-  title?: string;
-  /** The data test id if needed */
-  dataTestId?: TestId;
-} & NotificationActions;
-
-export const typeToIconName = (type: NotificationTypes): AcceptedIconNames =>
-  type === 'info' ? 'informational' : type;
-
-const CompactNotification: React.FCC<CompactNotificationProps> = ({
-  hasIcon = false,
-  message,
-  variant,
-  type,
-  styleType = 'elevated',
-  primaryCTALabel,
-  primaryCTA,
-  closeCTA,
-  title,
-  dataTestId,
-}) => {
-  return (
-    <div
-      css={notificationsContainer(type, styleType)}
-      data-testid={generateTestDataId(variant, dataTestId)}
-      {...(variant == 'banner' && { 'notification-type': 'banner' })}
-    >
-      <div css={infoContainer()}>
-        {hasIcon && (
-          <div css={iconContainer()}>
-            <Icon
-              name={typeToIconName(type)}
-              color={vars.color.text.default[typeToColorStyle(type)]}
-              size={24}
-            />
-          </div>
-        )}
-        {variant === 'banner' && (
-          <div
-            css={headContainer()}
-            data-testid={generateTestDataId(`${variant}-title`, dataTestId)}
-          >
-            {title}
-          </div>
-        )}
-        <div
-          css={messageContainer()}
-          data-testid={generateTestDataId(`${variant}-message`, dataTestId)}
-        >
-          {message}
-        </div>
-      </div>
-      <div css={actionsContainer()}>
-        {primaryCTA && primaryCTALabel && (
-          <Button
-            type="tertiary"
-            css={primaryActionContainer()}
-            onClick={primaryCTA}
-            data-testid={generateTestDataId('notification-primary', dataTestId)}
-          >
-            {primaryCTALabel}
-          </Button>
-        )}
-        {closeCTA && (
-          <span
-            css={actionContainer()}
-            onClick={closeCTA}
-            data-testid={generateTestDataId('notification-close', dataTestId)}
-          >
-            <Icon name="close" color={vars.color.text.default.secondary} size={16} />
-          </span>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default CompactNotification;

package/src/components/Notification/subcomponents/CompactNotification/index.tsx

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

package/src/components/Notification/subcomponents/NotificationActionsArea/NotificationActionsArea.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import { generateTestDataId } from 'utils/helpers';
-import type { TestProps } from 'utils/types';
-
-import Button from '../../../Button';
-import type { NotificationActions } from '../../Notification';
-import { actionContainer, actionsContainer } from '../../Notification.style';
-
-type Props = NotificationActions & TestProps;
-
-const NotificationActionsArea: React.FCC<Props> = ({
-  primaryCTA,
-  primaryCTALabel,
-  secondaryCTA,
-  secondaryCTALabel,
-  dataTestPrefixId,
-  dataTestId,
-}) => {
-  return (
-    <div css={actionsContainer()}>
-      {secondaryCTA && secondaryCTALabel && (
-        <div
-          css={actionContainer()}
-          data-testid={generateTestDataId(`${dataTestPrefixId}-secondary`, dataTestId)}
-        >
-          <Button type="tertiary" onClick={secondaryCTA}>
-            {secondaryCTALabel}
-          </Button>
-        </div>
-      )}
-      {primaryCTA && primaryCTALabel && (
-        <div
-          css={actionContainer()}
-          data-testid={generateTestDataId(`${dataTestPrefixId}-primary`, dataTestId)}
-        >
-          <Button onClick={primaryCTA}>{primaryCTALabel}</Button>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default NotificationActionsArea;

package/src/components/Notification/subcomponents/NotificationActionsArea/index.ts

@@ -1 +0,0 @@
-export { default } from './NotificationActionsArea';

package/src/components/NumberField/NumberField.style.ts

@@ -1,10 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
-import { rem } from '@orfium/tokens';
-
-export const groupStyles = ({ size }: { size: 'compact' | 'normal' }): SerializedStyles => {
-  return css`
-    /** @TODO: add tokens instead of rem */
-    width: ${`calc(100% - ${size === 'normal' ? rem(44) : rem(20)})`};
-  `;
-};

package/src/components/NumberField/NumberField.test.tsx

@@ -1,83 +0,0 @@
-import userEvent from '@testing-library/user-event';
-import React from 'react';
-import type { NumberFieldProps as Props } from './NumberField';
-import NumberField from './NumberField';
-import { render, screen } from '../../test';
-
-const renderNumberField = (props: Partial<Props> = {}) => {
-  const defaultProps = {
-    label: 'Label',
-    formatOptions: { minimumFractionDigits: 2, maximumFractionDigits: 2 },
-  };
-
-  return render(<NumberField {...{ ...defaultProps, ...props }} />);
-};
-
-describe('NumberField', () => {
-  let input: HTMLInputElement;
-  let increase: HTMLButtonElement;
-  let decrease: HTMLButtonElement;
-
-  it('formats the number input based on the given format', async () => {
-    renderNumberField();
-    input = screen.getByTestId('input') as HTMLInputElement;
-
-    await userEvent.type(input, '12.3456');
-    await userEvent.click(document.body);
-    expect(input).toHaveValue('12.35');
-  });
-
-  it('it rounds number input based on step', async () => {
-    renderNumberField({ step: 0.5 });
-    input = screen.getByTestId('input') as HTMLInputElement;
-
-    await userEvent.type(input, '12.21');
-    await userEvent.click(document.body);
-    expect(input).toHaveValue('12.00');
-  });
-
-  it('increases and decreases the number through stepper', async () => {
-    renderNumberField({ step: 0.5, hasStepper: true });
-    input = screen.getByTestId('input') as HTMLInputElement;
-    increase = screen.getByTestId('number_increment') as HTMLButtonElement;
-    decrease = screen.getByTestId('number_decrement') as HTMLButtonElement;
-
-    await userEvent.type(input, '12.00');
-    await userEvent.click(document.body);
-    await userEvent.click(increase);
-    expect(input).toHaveValue('12.50');
-    await userEvent.click(decrease);
-    expect(input).toHaveValue('12.00');
-  });
-
-  it('increases and decreases the number through keyboard', async () => {
-    renderNumberField({ step: 0.5, hasStepper: true });
-    input = screen.getByTestId('input') as HTMLInputElement;
-
-    await userEvent.type(input, '12.00');
-    await userEvent.click(document.body);
-
-    await userEvent.click(input);
-
-    await userEvent.type(input, '{arrowup}');
-    expect(input).toHaveValue('12.50');
-
-    await userEvent.type(input, '{arrowdown}');
-    expect(input).toHaveValue('12.00');
-  });
-
-  it('it rejects number input outside min and max given', async () => {
-    renderNumberField({ minValue: 10, maxValue: 20 });
-    input = screen.getByTestId('input') as HTMLInputElement;
-
-    await userEvent.type(input, '5');
-    await userEvent.click(document.body);
-    expect(input).toHaveValue('10.00');
-
-    await userEvent.clear(input);
-
-    await userEvent.type(input, '25');
-    await userEvent.click(document.body);
-    expect(input).toHaveValue('20.00');
-  });
-});

package/src/components/NumberField/NumberField.tsx

@@ -1,135 +0,0 @@
-import Label from 'components/Label';
-import { suffixContainerStyle } from 'components/TextField/TextField.style';
-import TextInputBase from 'components/TextInputBase/TextInputBase';
-import { inputStyle } from 'components/TextInputBase/TextInputBase.style';
-import useFieldUtils from 'hooks/useFieldUtils';
-import { omit } from 'lodash-es';
-import { rem } from 'polished';
-import React from 'react';
-import { Group, Input, NumberField as ReactAriaNumberField } from 'react-aria-components';
-import { generateUniqueID } from 'utils/helpers';
-import type { TextFieldProps } from '../TextField/TextField';
-import Stepper from './components/Stepper/Stepper';
-import { groupStyles } from './NumberField.style';
-
-export type NumberFieldProps = Omit<
-  TextFieldProps,
-  | 'mask'
-  | 'maskChar'
-  | 'value'
-  | 'onChange'
-  | 'isMulti'
-  | 'onMultiValueClearAll'
-  | 'onMultiValueDelete'
-> & {
-  /** Callback fired when the `input` is changed. */
-  onChange?: (value: number) => void;
-  /** The value of the `input` element. */
-  value?: number;
-  /** Formatting options for the value displayed in the number field, following the Intl.NumberFormatOptions type */
-  formatOptions?: Intl.NumberFormatOptions;
-  /** Whether the numberInput has a stepper */
-  hasStepper?: boolean;
-  /** The amount that the input value changes with each increment or decrement "tick". Defaults to 1 */
-  step?: number;
-  /** The smallest value allowed for the input. */
-  minValue?: number;
-  /** The largest value allowed for the input. */
-  maxValue?: number;
-};
-
-const NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>((props, ref) => {
-  const {
-    id = generateUniqueID('numberfield_'),
-    suffix = null,
-    hasStepper = false,
-    label,
-    placeholder = '',
-    size = 'normal',
-    isRequired = false,
-    isDisabled,
-    isReadOnly,
-    step,
-    onChange,
-    formatOptions,
-    value,
-    minValue,
-    maxValue,
-    status = { type: 'normal' },
-    dataTestPrefixId,
-    sx,
-    ...rest
-  } = props;
-
-  const { isLocked, hintMessageId, handleContainerClick, suffixContent, combinedRefs } =
-    useFieldUtils({
-      id,
-      suffix,
-      status,
-      size,
-      isDisabled,
-      ref,
-    });
-
-  const inputPlaceholder =
-    size === 'normal' ? (placeholder ? `${placeholder} ${isRequired ? '*' : ''}` : label) : ' ';
-  const customStyles =
-    size === 'compact' ? { wrapper: { minWidth: rem(90), ...sx?.wrapper }, ...sx } : sx;
-
-  return (
-    <div onClick={handleContainerClick}>
-      <TextInputBase {...props} status={{ ...status, id: hintMessageId }} sx={customStyles}>
-        <div css={{ width: '100%' }}>
-          <ReactAriaNumberField
-            value={value}
-            step={step}
-            onChange={onChange}
-            formatOptions={formatOptions}
-            minValue={minValue}
-            maxValue={maxValue}
-          >
-            <Group css={hasStepper ? groupStyles({ size }) : {}}>
-              <Input
-                id={id}
-                readOnly={isLocked || isReadOnly}
-                disabled={isDisabled || isLocked}
-                required={isRequired}
-                placeholder={inputPlaceholder}
-                css={inputStyle({ label, placeholder, isLocked, isDisabled, size })}
-                aria-invalid={status?.type === 'error'}
-                aria-describedby={hintMessageId}
-                data-testid={props.dataTestId ? `input_${props.dataTestId}` : 'input'}
-                ref={combinedRefs}
-                {...omit(rest, ['value', 'onChange', 'dataTestId'])}
-              />
-              <Label
-                htmlFor={id}
-                label={label}
-                size={size}
-                isRequired={isRequired}
-                isAnimated={Boolean(value)}
-                hasError={!isDisabled && status?.type === 'error'}
-              />
-              {hasStepper && (
-                <Stepper
-                  size={size}
-                  isDisabled={isLocked || isReadOnly || isDisabled}
-                  dataTestIdPrefix={dataTestPrefixId}
-                />
-              )}
-            </Group>
-          </ReactAriaNumberField>
-        </div>
-        {suffixContent && !hasStepper && (
-          <div aria-hidden={!suffixContent} css={suffixContainerStyle({ size })}>
-            {suffixContent}
-          </div>
-        )}
-      </TextInputBase>
-    </div>
-  );
-});
-
-NumberField.displayName = 'NumberField';
-
-export default NumberField;

package/src/components/NumberField/components/Stepper/Stepper.style.ts

@@ -1,37 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
-import { rem } from '@orfium/tokens';
-import type { Theme } from 'theme';
-
-import { FIELD_TOKENS } from '~/components/DatePicker/DatePickInput/DatePickInput.style';
-
-export const stepperContainerStyle = (size: 'normal' | 'compact'): SerializedStyles => {
-  return css`
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    right: 0;
-    /** @TODO add tokens instead of rem */
-    width: ${size === 'normal' ? rem(44) : rem(20)};
-    top: ${size === 'normal' ? `-${rem(15)}` : `-${rem(8)}`};
-    z-index: 1;
-  `;
-};
-
-export const buttonWrapperStyle =
-  () =>
-  (theme: Theme): SerializedStyles => {
-    return css`
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      background: transparent;
-      border: none;
-      height: calc(${FIELD_TOKENS.container.normal} / 2);
-
-      &:hover {
-        cursor: pointer;
-        background: ${theme.tokens.state.get('backgroundColor.hover')};
-      }
-    `;
-  };

package/src/components/NumberField/components/Stepper/Stepper.tsx

@@ -1,46 +0,0 @@
-import { vars } from '@orfium/tokens';
-import Icon from 'components/Icon';
-import { rem } from 'polished';
-import React from 'react';
-import { Button } from 'react-aria-components';
-import { buttonWrapperStyle, stepperContainerStyle } from './Stepper.style';
-
-type Props = {
-  size?: 'normal' | 'compact';
-  isDisabled?: boolean;
-  dataTestIdPrefix?: string;
-};
-
-const Stepper: React.FCC<Props> = ({ size, isDisabled, dataTestIdPrefix }) => {
-  const dataTestId = dataTestIdPrefix ? `${dataTestIdPrefix}_number` : 'number';
-  const compactSizeBtnStyles = size === 'compact' ? { height: rem(15) } : {};
-
-  return (
-    <div css={stepperContainerStyle(size)}>
-      <Button
-        isDisabled={isDisabled}
-        slot="increment"
-        css={buttonWrapperStyle()}
-        data-testid={`${dataTestId}_increment`}
-        style={compactSizeBtnStyles}
-      >
-        <Icon name="triangleUp" color={vars.color.text.default.secondary} size={vars.sizing['5']} />
-      </Button>
-      <Button
-        isDisabled={isDisabled}
-        slot="decrement"
-        css={buttonWrapperStyle()}
-        data-testid={`${dataTestId}_decrement`}
-        style={compactSizeBtnStyles}
-      >
-        <Icon
-          name="triangleDown"
-          color={vars.color.text.default.secondary}
-          size={vars.sizing['5']}
-        />
-      </Button>
-    </div>
-  );
-};
-
-export default Stepper;

package/src/components/NumberField/components/Stepper/index.ts

@@ -1 +0,0 @@
-export { default } from './Stepper';

package/src/components/NumberField/index.ts

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

package/src/components/Pagination/Pagination.tsx

@@ -1,86 +0,0 @@
-import { vars } from '@orfium/tokens';
-import usePagination from '../../hooks/usePagination';
-import IconButton from '../IconButton';
-
-export type PaginationProps = {
-  /** The current page you are on if you need to control it, defaults to 1 **/
-  page: number;
-  /** The total pages **/
-  count: number;
-  /** An onChange callback that will return the page on navigation **/
-  onChange?: (page: number) => void;
-  /** Show enhanced button functionality, this way the jump to first and last page will be shown. Default to false **/
-  isEnhancedPaginationVisible?: boolean;
-  /** Manually disable next page buttons **/
-  isNextPageDisabled?: boolean;
-  /** Manually disable previous page buttons **/
-  isPrevPageDisabled?: boolean;
-};
-
-const Pagination = ({
-  page = 1,
-  count,
-  onChange = () => {},
-  isEnhancedPaginationVisible = false,
-  isNextPageDisabled,
-  isPrevPageDisabled,
-}: PaginationProps) => {
-  const {
-    currentPage,
-    hasNextPage,
-    hasPrevPage,
-    navigateToFirstPage,
-    navigateToLastPage,
-    navigateToNextPage,
-    navigateToPrevPage,
-  } = usePagination({ page, count, onChange });
-
-  return (
-    <div
-      css={{
-        flex: 1,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        color: vars.color.text.default.primary,
-        '> *': { padding: vars.spacing['4'] },
-      }}
-    >
-      {isEnhancedPaginationVisible && (
-        <IconButton
-          iconName="pageFirst"
-          onClick={navigateToFirstPage}
-          type="tertiary"
-          isDisabled={isPrevPageDisabled || !hasPrevPage}
-        />
-      )}
-      <IconButton
-        iconName="chevronLeft"
-        type="tertiary"
-        onClick={navigateToPrevPage}
-        isDisabled={isPrevPageDisabled || !hasPrevPage}
-      />
-
-      <div>
-        Page {currentPage} of {count}
-      </div>
-
-      <IconButton
-        iconName="chevronRight"
-        type="tertiary"
-        onClick={navigateToNextPage}
-        isDisabled={isNextPageDisabled || !hasNextPage}
-      />
-      {isEnhancedPaginationVisible && (
-        <IconButton
-          iconName="pageLast"
-          type="tertiary"
-          onClick={navigateToLastPage}
-          isDisabled={isNextPageDisabled || !hasNextPage}
-        />
-      )}
-    </div>
-  );
-};
-
-export default Pagination;

package/src/components/Pagination/index.ts

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

package/src/components/ProgressIndicator/ProgressIndicator.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-
-import ProgressBar from './components/ProgressBar';
-import ProgressCircle from './components/ProgressCircle';
-import type { ProgressIndicatorProps } from './ProgressIndicator.types';
-
-const ProgressIndicator = React.forwardRef<HTMLDivElement, ProgressIndicatorProps>(
-  ({ type = 'linear', value, status = 'normal', isBlock = false, dataTestPrefixId }, ref) => {
-    return type === 'linear' ? (
-      <ProgressBar
-        value={value}
-        isBlock={isBlock}
-        status={status}
-        ref={ref}
-        dataTestPrefixId={dataTestPrefixId}
-      />
-    ) : (
-      <ProgressCircle value={value} status={status} ref={ref} dataTestPrefixId={dataTestPrefixId} />
-    );
-  }
-);
-
-ProgressIndicator.displayName = 'ProgressIndicator';
-
-export default ProgressIndicator;

package/src/components/ProgressIndicator/ProgressIndicator.types.ts

@@ -1,12 +0,0 @@
-import type { TestProps } from 'utils/types';
-
-export type ProgressIndicatorProps = {
-  /** The type of the progress indicator in terms of shape */
-  type?: 'linear' | 'circular';
-  /** The value (%) of the progress indicator. If not provided, the progress indicator is indeterminate */
-  value?: number;
-  /** The status of the progress indicator */
-  status?: 'normal' | 'error';
-  /** Whether the progress indicator is block-positioned. Only applies for the linear variation */
-  isBlock?: boolean;
-} & TestProps;