@orfium/ictinus 5.43.7 → 5.43.9

package/src/components/Icon/constants.ts

@@ -1,199 +0,0 @@
-import type {
-  AudioControlsIcons,
-  BasicActionsIcons,
-  DataAndFinanceIcons,
-  GenericIcons,
-  MusicBusinessIcons,
-  NavigationIcons,
-  ToggledActionsIcons,
-  UserAndStatusIcons,
-} from './Icon.types';
-
-type IconSet = {
-  userAndStatus: { title: string; icons: UserAndStatusIcons[] };
-  dataAndFinance: { title: string; icons: DataAndFinanceIcons[] };
-  navigation: { title: string; icons: NavigationIcons[] };
-  generic: { title: string; icons: GenericIcons[] };
-  basicActions: { title: string; icons: BasicActionsIcons[] };
-  toggledActions: { title: string; icons: ToggledActionsIcons[] };
-  audioControls: { title: string; icons: AudioControlsIcons[] };
-  musicBusiness: { title: string; icons: MusicBusinessIcons[] };
-};
-
-export const iconsSet: IconSet = {
-  userAndStatus: {
-    title: 'User & Status',
-    icons: [
-      'account',
-      'user',
-      'users',
-      'role',
-      'entities',
-      'organization',
-      'success',
-      'informational',
-      'warning',
-      'error',
-      'verified',
-      'unverified',
-      'pending',
-      'help',
-      'statusIndicator',
-    ],
-  },
-  dataAndFinance: {
-    title: 'Data & Finance',
-    icons: [
-      'dashboard',
-      'analytics',
-      'dataset',
-      'insight',
-      'trendingUp',
-      'trendingDown',
-      'income',
-      'earnings',
-      'invoice',
-    ],
-  },
-  navigation: {
-    title: 'Navigation',
-    icons: [
-      'menu',
-      'apps',
-      'arrowDown',
-      'arrowRight',
-      'arrowLeft',
-      'arrowUp',
-      'chevronDown',
-      'chevronRight',
-      'chevronLeft',
-      'chevronUp',
-      'triangleDown',
-      'triangleRight',
-      'triangleLeft',
-      'triangleUp',
-      'pageFirst',
-      'pageLast',
-    ],
-  },
-  generic: {
-    title: 'Generic',
-    icons: [
-      'chat',
-      'mail',
-      'details',
-      'externalLink',
-      'moreOptions',
-      'filter',
-      'settings',
-      'location',
-      'calendar',
-      'notification',
-      'manual',
-      'language',
-      'delivery',
-      'file',
-      'issue',
-      'keyword',
-      'policy',
-      'legal',
-      'report',
-      'searchFilled',
-      'tag',
-    ],
-  },
-  basicActions: {
-    title: 'Basic Actions',
-    icons: [
-      'edit',
-      'search',
-      'upload',
-      'download',
-      'plus',
-      'minus',
-      'close',
-      'check',
-      'login',
-      'logout',
-      'thumbsUp',
-      'thumbsDown',
-      'copy',
-      'delete',
-      'mediaFile',
-      'review',
-      'refresh',
-      'restore',
-      'update',
-      'convert',
-      'undo',
-      'redo',
-      'sort',
-      'columnChooser',
-      'sortDescending',
-      'sortAscending',
-      'share',
-    ],
-  },
-  toggledActions: {
-    title: 'Toggled Actions',
-    icons: [
-      'favorite',
-      'favoriteOff',
-      'bookmark',
-      'bookmarkOff',
-      'flag',
-      'flagOff',
-      'eye',
-      'eyeOff',
-      'lock',
-      'unlock',
-      'link',
-      'unlink',
-      'pair',
-      'unpair',
-      'freeze',
-      'unfreeze',
-      'image',
-      'imageOff',
-      'video',
-      'videoOff',
-      'audio',
-      'audioOff',
-    ],
-  },
-  audioControls: {
-    title: 'Audio Controls',
-    icons: ['play', 'pause', 'resume', 'stop', 'forward', 'rewind', 'next', 'previous'],
-  },
-  musicBusiness: {
-    title: 'Music Business',
-    icons: [
-      'asset',
-      'composition',
-      'recording',
-      'work',
-      'writer',
-      'publisher',
-      'artist',
-      'recordLabel',
-      'album',
-      'license',
-      'catalog',
-      'usage',
-      'distribution',
-      'conflict',
-      'claim',
-      'radio',
-      'broadcast',
-      'television',
-      'playcount',
-      'concert',
-      'channel',
-      'youTube',
-      'cinema',
-      'publicPerformance',
-      'cueSheet',
-      'digital',
-    ],
-  },
-};

package/src/components/Icon/index.ts

@@ -1,5 +0,0 @@
-export { default } from './Icon';
-export * from './Icon';
-export * from './Icon.types';
-export * from './constants';
-export { default as iconSelector } from './assets/iconSelector';

package/src/components/IconButton/IconButton.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-
-import type { PrimitiveButtonTypes } from 'components/Button/Button.types';
-import type { ButtonBaseProps } from 'components/ButtonBase/ButtonBase';
-import ButtonBase from 'components/ButtonBase/ButtonBase';
-import { BUTTON_ICON_COLOR } from 'components/ButtonBase/constants';
-import { Icon, type IconProps } from '../../icon';
-import { type BoxProps } from '../../vanilla/Box';
-
-export type IconButtonShape = 'circle' | 'square';
-
-export type IconButtonProps = Omit<
-  ButtonBaseProps,
-  'type' | 'isBlock' | 'isLoading' | 'isIconButton'
-> & {
-  /** This property defines the type of the IconButton */
-  type?: PrimitiveButtonTypes;
-  /** This property defines the shape of the IconButton */
-  shape?: IconButtonShape;
-  /** This property defines witch icon to use */
-  iconName: IconProps['name'];
-  /** Custom icon color */
-  iconColor?: BoxProps['color'];
-};
-
-const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
-  (
-    {
-      size = 'normal',
-      type = 'primary',
-      shape = 'circle',
-      iconName,
-      iconColor,
-      dataTestPrefixId,
-      ...props
-    },
-    ref
-  ) => (
-    <ButtonBase
-      {...props}
-      ref={ref}
-      isIconButton
-      shape={shape}
-      size={size}
-      type={type}
-      dataTestPrefixId={dataTestPrefixId ? `${dataTestPrefixId}-icon-` : 'icon-'}
-    >
-      <Icon
-        size={size === 'compact' ? 'sm' : 'md'}
-        name={iconName}
-        color={iconColor ?? BUTTON_ICON_COLOR[type]}
-      />
-    </ButtonBase>
-  )
-);
-
-IconButton.displayName = 'IconButton';
-
-export default IconButton;

package/src/components/IconButton/index.ts

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

package/src/components/InlineAlert/InlineAlert.style.ts

@@ -1,117 +0,0 @@
-import { css } from '@emotion/react';
-import { rem } from 'polished';
-import type { Theme } from 'theme';
-
-import { vars } from '@orfium/tokens';
-import { generateStylesFromTokens } from '../Typography/utils';
-import type { InlineAlertProps } from './InlineAlert.types';
-
-const inlineAlertStyles = (props: InlineAlertProps) => css`
-  --_border-width: ${vars['border-width']['1']};
-  --_outline-width: ${vars['border-width']['3']};
-  --_min-height: ${rem(44)};
-  --_min-content-width: ${rem(100)};
-
-  box-sizing: border-box;
-  position: relative;
-  isolation: isolate;
-  padding: calc(${vars.spacing['5']} - var(--_border-width))
-    calc(${vars.spacing['5']} - var(--_border-width));
-  display: inline-grid;
-  grid-template-columns: auto minmax(var(--_min-content-width), 1fr) auto;
-  grid-template-areas: 'icon content actions close';
-  align-items: center;
-  background: ${props.isAlt ? vars.color.background.default : vars.color.palette.secondary.muted};
-  border-radius: ${vars['border-radius']['2']};
-  border: var(--_border-width) solid ${vars.color['border-color'].decorative.default};
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-family: sans-serif;
-  min-height: var(--_min-height);
-  outline: none;
-  outline-offset: ${rem(2)};
-  transition: outline-offset 150ms cubic-bezier(0.4, 0, 0.2, 1);
-
-  &:focus-visible {
-    outline-offset: 0;
-    outline: var(--_outline-width) solid ${vars.color['border-color'].interactive.focused};
-  }
-
-  &:has([data-slot='button']) {
-    padding: calc(${vars.spacing['4']} - var(--_border-width))
-      calc(${vars.spacing['5']} - var(--_border-width));
-  }
-
-  /* Since we match desktop first, below 600px should become 599px */
-  @container (max-width: calc(600px - 1px)) {
-    grid-template-areas:
-      'icon content close'
-      'icon actions close';
-    align-items: flex-start;
-
-    &:has([data-slot='button']) {
-      padding: calc(${vars.spacing['5']} - var(--_border-width))
-        calc(${vars.spacing['5']} - var(--_border-width));
-    }
-  }
-
-  @media (prefers-reduced-motion) {
-    transition: none;
-  }
-`;
-
-const iconStyles = () => css`
-  grid-area: icon;
-  margin-right: ${vars.spacing['5']};
-  pointer-events: none;
-`;
-
-const contentStyles = () => (theme: Theme) => css`
-  ${generateStylesFromTokens(theme.tokens.typography.get('normal.body02'))};
-
-  grid-area: content;
-  cursor: default;
-`;
-
-const actionsStyles = () => css`
-  grid-area: actions;
-  display: flex;
-  align-items: flex-start;
-  flex-wrap: wrap;
-  gap: ${vars.spacing['4']};
-  margin-left: ${vars.spacing['7']};
-
-  @container (max-width: calc(600px - 1px)) {
-    margin-left: 0;
-    margin-top: ${vars.spacing['4']};
-  }
-`;
-
-const dismissStyles = () => css`
-  grid-area: close;
-  justify-self: end;
-  margin-left: ${vars.spacing['6']};
-`;
-
-export const getIconColor = (status: InlineAlertProps['status']) => {
-  switch (status) {
-    case 'informational':
-      return vars.color.indicators.brand;
-    case 'error':
-      return vars.color.indicators.error;
-    case 'warning':
-      return vars.color.indicators.warning;
-    case 'success':
-      return vars.color.indicators.success;
-    default:
-      return vars.color.indicators.brand;
-  }
-};
-
-export const styles = {
-  'inline-alert': inlineAlertStyles,
-  icon: iconStyles,
-  content: contentStyles,
-  actions: actionsStyles,
-  dismiss: dismissStyles,
-};

package/src/components/InlineAlert/InlineAlert.tsx

@@ -1,89 +0,0 @@
-import type { ReactElement, RefObject } from 'react';
-import React, { forwardRef, useEffect, useRef } from 'react';
-import { useId } from 'react-aria';
-
-import Icon from '../Icon';
-import { SlotProvider, useSlotProps } from '../utils/Slots';
-import { useDOMRef } from '../utils/useDOMRef';
-import { getIconColor, styles } from './InlineAlert.style';
-import type { InlineAlertProps } from './InlineAlert.types';
-
-export const InlineAlert = forwardRef<HTMLDivElement, InlineAlertProps>(
-  (props: InlineAlertProps, ref: RefObject<HTMLDivElement>) => {
-    props = useSlotProps(props, 'inline-alert');
-    const {
-      status = 'neutral',
-      actions,
-      children,
-      onDismiss,
-      dataTestPrefixId = '',
-      hasAutoFocus,
-      ...otherProps
-    } = props;
-    const dismissId = useId();
-    const domRef = useDOMRef(ref);
-
-    const actionElements =
-      actions && (actions as ReactElement).type === React.Fragment
-        ? (actions as ReactElement).props.children
-        : actions;
-    const actionsArray = React.Children.toArray(actionElements);
-
-    const autoFocusRef = useRef(hasAutoFocus);
-    useEffect(() => {
-      if (autoFocusRef.current && domRef.current) {
-        domRef.current.focus();
-      }
-      autoFocusRef.current = false;
-    }, [domRef]);
-
-    return (
-      <div
-        {...otherProps}
-        css={styles['inline-alert'](props)}
-        ref={domRef}
-        tabIndex={0}
-        role={status === 'warning' || status === 'error' ? 'alert' : 'status'}
-        aria-describedby={onDismiss ? dismissId : undefined}
-        data-testid={`${dataTestPrefixId}_inline_alert`}
-      >
-        {status !== 'neutral' ? (
-          <Icon
-            role="img"
-            aria-hidden="true"
-            name={status}
-            css={styles.icon}
-            color={getIconColor(status)}
-          />
-        ) : null}
-        <div css={styles.content}>{children}</div>
-        {actionsArray.length > 0 ? (
-          <div css={styles.actions}>
-            <SlotProvider
-              slots={{
-                button: { size: 'compact' },
-                link: { size: 2 },
-              }}
-            >
-              {actionsArray}
-            </SlotProvider>
-          </div>
-        ) : null}
-        {onDismiss ? (
-          <Icon
-            role="button"
-            aria-label="Dismiss notification"
-            id={onDismiss ? dismissId : undefined}
-            data-testid={`${dataTestPrefixId}_inline_alert_dismiss`}
-            name="close"
-            css={styles.dismiss}
-            onClick={onDismiss}
-            size={20}
-          />
-        ) : null}
-      </div>
-    );
-  }
-);
-
-InlineAlert.displayName = 'InlineAlert';

package/src/components/InlineAlert/InlineAlert.types.ts

@@ -1,48 +0,0 @@
-import type { ReactElement, ReactNode } from 'react';
-
-import type { TestProps } from '~/utils/types';
-
-/**
- * Represents the possible status values for an inline alert.
- */
-export type AlertStatus = 'neutral' | 'informational' | 'error' | 'warning' | 'success';
-
-export interface InlineAlertProps extends TestProps {
-  /**
-   * The status of the inline alert.
-   * @default 'neutral'
-   */
-  status?: AlertStatus;
-  /**
-   * The actions to be rendered within the alert.
-   * Can be a single ReactElement or an array of ReactElements.
-   * @example
-   * actions={[
-   *   <Button type="tertiary" size="compact">Tertiary</Button>,
-   *   <Button size="compact">Primary</Button>
-   * ]}
-   */
-  actions?: ReactElement | ReactElement[];
-  /**
-   * Whether to use alternative styling for the inline alert.
-   * @default false
-   */
-  isAlt?: boolean;
-  /**
-   * Callback function for the dismiss button.
-   * If not provided, the dismiss button will not be rendered.
-   */
-  onDismiss?(): void;
-  /**
-   * The main content of the inline alert.
-   */
-  children: ReactNode;
-  /**
-   * Whether the alert should receive focus automatically when rendered.
-   * Useful for scenarios where the alert is triggered programmatically.
-   * @default false
-   */
-  hasAutoFocus?: boolean;
-  /** Optional css class */
-  className?: string;
-}

package/src/components/InlineAlert/index.ts

@@ -1,2 +0,0 @@
-export { InlineAlert } from './InlineAlert';
-export type { AlertStatus, InlineAlertProps } from './InlineAlert.types';

package/src/components/InlineAlert/tests/InlineAlert.test.tsx

@@ -1,71 +0,0 @@
-import { createRef } from 'react';
-import { vi } from 'vitest';
-import Button from '~/components/Button';
-import Link from '~/components/Link';
-import { fireEvent, render, screen } from '~/test';
-import { InlineAlert } from '../InlineAlert';
-
-describe('<InlineAlert />', () => {
-  it('renders with default props', () => {
-    render(<InlineAlert>Default</InlineAlert>);
-
-    expect(screen.getByText('Default')).toBeInTheDocument();
-    expect(screen.getByRole('status')).toBeInTheDocument();
-  });
-
-  it('applies correct ARIA attributes', () => {
-    render(
-      <InlineAlert status="error" onDismiss={() => {}}>
-        ARIA test
-      </InlineAlert>
-    );
-
-    const alert = screen.getByRole('alert');
-
-    expect(alert).toHaveAttribute('role', 'alert');
-    expect(alert).toHaveAttribute('aria-describedby');
-  });
-
-  it('forwards ref correctly', () => {
-    const ref = createRef<HTMLDivElement>();
-
-    render(<InlineAlert ref={ref}>Ref test</InlineAlert>);
-
-    expect(ref.current).toBeInstanceOf(HTMLDivElement);
-  });
-
-  describe('actions', () => {
-    it('renders with link', () => {
-      render(<InlineAlert actions={<Link>Single Action</Link>}>With actions</InlineAlert>);
-
-      expect(screen.getByText('Single Action')).toBeInTheDocument();
-    });
-
-    it('renders with buttons', () => {
-      render(
-        <InlineAlert
-          actions={[
-            <Button key="button1">Button 1</Button>,
-            <Button key="button2">Button 2</Button>,
-          ]}
-        >
-          With actions
-        </InlineAlert>
-      );
-
-      expect(screen.getByText('Button 1')).toBeInTheDocument();
-      expect(screen.getByText('Button 2')).toBeInTheDocument();
-    });
-  });
-
-  describe('onDismiss', () => {
-    it('calls onDismiss when close icon is clicked', () => {
-      const onDismiss = vi.fn();
-      render(<InlineAlert onDismiss={onDismiss}>With dismiss</InlineAlert>);
-
-      const closeButton = screen.getByRole('button', { name: 'Dismiss notification' });
-      fireEvent.click(closeButton);
-      expect(onDismiss).toHaveBeenCalledTimes(1);
-    });
-  });
-});

package/src/components/Label/Label.style.ts

@@ -1,42 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
-import type { SemanticTypographyKey } from '@orfium/tokens';
-import { rem, vars } from '@orfium/tokens';
-import { generateStylesFromTokens } from 'components/Typography/utils';
-import type { Theme } from 'theme';
-import type { LabelProps } from './Label';
-
-export const LABEL_TRANSFORM_LEFT_SPACING = rem(3);
-
-export const labelStyle =
-  ({
-    isAnimated,
-    hasError,
-    size = 'normal',
-  }: Pick<LabelProps, 'isAnimated' | 'hasError' | 'size'>) =>
-  (theme: Theme): SerializedStyles => {
-    const typography: SemanticTypographyKey = size === 'normal' ? 'normal.body02' : 'normal.body03';
-
-    return css`
-      transition:
-        transform 0.25s,
-        opacity 0.25s ease-in-out;
-      transform-origin: 0 0;
-      width: 100%;
-      position: absolute;
-      user-select: none;
-      transform: ${!isAnimated
-        ? `translate(${LABEL_TRANSFORM_LEFT_SPACING}, 0)`
-        : `translate(${LABEL_TRANSFORM_LEFT_SPACING}, -95%) scale(0.8);`};
-      color: ${hasError ? vars.color.text.default.error : vars.color.text.default.secondary};
-      align-items: center;
-      display: flex;
-      top: 0;
-      bottom: 0;
-      right: ${rem(3)};
-      margin: auto;
-      white-space: nowrap;
-      overflow: hidden;
-      ${generateStylesFromTokens(theme.tokens.typography.get(typography))}
-    `;
-  };

package/src/components/Label/Label.tsx

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import type { ComponentSizes } from 'utils/types';
-
-import { labelStyle } from './Label.style';
-
-export type LabelProps = {
-  /** If the label has error */
-  hasError?: boolean;
-  /** The label that is going to be displayed */
-  label: string;
-  /** If the label value is required */
-  isRequired: boolean;
-  /** If the label must be moved to the top */
-  isAnimated?: boolean;
-  /** HTML <label/>'s for prop */
-  htmlFor?: string;
-  /** The size of the label */
-  size?: ComponentSizes;
-};
-
-const Label: React.FCC<LabelProps> = ({
-  hasError = false,
-  htmlFor,
-  label,
-  size = 'normal',
-  isRequired = false,
-  isAnimated = false,
-}) => {
-  return (
-    <label htmlFor={htmlFor} css={labelStyle({ isAnimated, hasError, size })}>
-      {label} {isRequired && '*'}
-    </label>
-  );
-};
-
-export default Label;

package/src/components/Label/index.ts

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