@orfium/ictinus 5.43.7 → 5.43.8

package/src/components/Avatar/Avatar.style.ts

@@ -1,124 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
-import { vars } from '@orfium/tokens';
-
-import { flex } from 'theme/functions';
-import type { AvatarColors, AvatarProps, AvatarSizes } from './Avatar.types';
-
-export const AVATAR_COLOR: Record<AvatarColors, Record<string, string>> = {
-  blue: {
-    border: vars.color.palette['primary-alt'].contrast,
-    fill: vars.color.palette['primary-alt'].base,
-    text: vars.color.text.default.active,
-  },
-  red: {
-    border: vars.color.palette.error.contrast,
-    fill: vars.color.palette.error.base,
-    text: vars.color.text.default.error,
-  },
-  purple: {
-    border: vars.color.palette.upsell.contrast,
-    fill: vars.color.palette.upsell.base,
-    text: vars.color.text.default.visited,
-  },
-  teal: {
-    border: vars.color.palette.success.contrast,
-    fill: vars.color.palette.success.base,
-    text: vars.color.text.default.success,
-  },
-  orange: {
-    border: vars.color.palette.warning.contrast,
-    fill: vars.color.palette.warning.base,
-    text: vars.color.text.default.warning,
-  },
-};
-
-export const AVATAR_SIZE: Record<AvatarSizes, string> = {
-  '1': vars.sizing['5'],
-  '2': vars.sizing['6'],
-  '3': vars.sizing['8'],
-  '4': vars.sizing['12'],
-  '5': vars.sizing['15'],
-  '6': vars.sizing['18'],
-};
-
-export const AVATAR_TYPOGRAPHY: Record<AvatarSizes, Record<string, string>> = {
-  '1': {
-    fontSize: vars['font-size']['1'],
-    lineHeight: vars['line-height']['1'],
-    letterSpacing: vars['letter-spacing']['1'],
-  },
-  '2': {
-    fontSize: vars['font-size']['2'],
-    lineHeight: vars['line-height']['3'],
-    letterSpacing: vars['letter-spacing']['2'],
-  },
-  '3': {
-    fontSize: vars['font-size']['3'],
-    lineHeight: vars['line-height']['4'],
-    letterSpacing: vars['letter-spacing']['2'],
-  },
-  '4': {
-    fontSize: vars['font-size']['4'],
-    lineHeight: vars['line-height']['5'],
-    letterSpacing: vars['letter-spacing']['1'],
-  },
-  '5': {
-    fontSize: vars['font-size']['8'],
-    lineHeight: vars['line-height']['8'],
-    letterSpacing: vars['letter-spacing']['0'],
-  },
-  '6': {
-    fontSize: vars['font-size']['10'],
-    lineHeight: vars['line-height']['10'],
-    letterSpacing: vars['letter-spacing']['0'],
-  },
-};
-
-export const iconStyles = ({ size = 1, color = 'blue' }: Pick<AvatarProps, 'size' | 'color'>) => {
-  return css`
-    width: calc(${AVATAR_SIZE[size]} * 0.8);
-    height: calc(${AVATAR_SIZE[size]} * 0.8);
-    path {
-      fill: ${AVATAR_COLOR[color].text};
-    }
-  `;
-};
-
-export const avatarStyle = ({
-  size,
-  color,
-}: {
-  size: AvatarSizes;
-  color: AvatarColors;
-}): SerializedStyles => {
-  return css`
-    ${flex};
-    width: ${AVATAR_SIZE[size]};
-    height: ${AVATAR_SIZE[size]};
-    border-radius: ${vars['border-radius'][7]};
-    border: ${vars['border-width']['1']} solid;
-    border-color: ${AVATAR_COLOR[color].border};
-    box-sizing: border-box;
-    background-color: ${AVATAR_COLOR[color].fill};
-    color: ${AVATAR_COLOR[color].text};
-    overflow: hidden;
-    position: relative;
-    align-items: center;
-    flex-shrink: 0;
-    user-select: none;
-    justify-content: center;
-
-    // avatar has custom typography styles
-    font-family: ${vars.weight.medium};
-    font-size: ${AVATAR_TYPOGRAPHY[size].fontSize};
-    line-height: ${AVATAR_TYPOGRAPHY[size].lineHeight};
-    letter-spacing: ${AVATAR_TYPOGRAPHY[size].letterSpacing};
-
-    img {
-      border-radius: ${vars['border-radius'][7]};
-      width: 100%;
-      height: 100%;
-    }
-  `;
-};

package/src/components/Avatar/Avatar.tsx

@@ -1,38 +0,0 @@
-import { forwardRef, useMemo, type PropsWithChildren } from 'react';
-
-import { avatarStyle, iconStyles } from './Avatar.style';
-import type { AvatarProps } from './Avatar.types';
-import { UserAvatar } from './UserAvatar';
-
-const Avatar = forwardRef<HTMLDivElement, PropsWithChildren<AvatarProps>>(
-  ({ src = '', size = 1, color = 'blue', className, dataTestPrefixId = '', children }, ref) => {
-    const avatarContent = useMemo(() => {
-      if (src) {
-        return <img src={src} />;
-      }
-
-      if (!src && children) {
-        return children;
-      }
-
-      return <UserAvatar css={iconStyles({ size, color })} />;
-    }, [children, color, size, src]);
-
-    return (
-      <div
-        ref={ref}
-        className={className}
-        css={avatarStyle({
-          size,
-          color,
-        })}
-        data-testid={`${dataTestPrefixId}_avatar`}
-      >
-        {avatarContent}
-      </div>
-    );
-  }
-);
-Avatar.displayName = 'Avatar';
-
-export default Avatar;

package/src/components/Avatar/Avatar.types.ts

@@ -1,24 +0,0 @@
-import type { DivProps } from '~/utils/common';
-
-export type AvatarColors = 'blue' | 'teal' | 'purple' | 'red' | 'orange';
-
-export type AvatarSizes = 1 | 2 | 3 | 4 | 5 | 6;
-
-export interface AvatarProps extends DivProps {
-  /** The size of the Avatar
-   *  @default 1
-   * */
-  size?: AvatarSizes;
-  /** The color of the Avatar
-   *  @default 'blue'
-   * */
-  color?: AvatarColors;
-  /** the src of the image to show **/
-  src?: string;
-  /** The icon name to pick from our library of icons
-   *  @default 'user'
-   * */
-  className?: string;
-  /** Data Test Id prefix **/
-  dataTestPrefixId?: string;
-}

package/src/components/Avatar/AvatarStack/AvatarStack.style.ts

@@ -1,25 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
-import { flex } from 'theme/functions';
-
-import { AVATAR_SIZE } from '../Avatar.style';
-import type { AvatarSizes } from '../Avatar.types';
-
-export const avatarStackStyle = ({ size }: { size: AvatarSizes }): SerializedStyles => css`
-  ${flex};
-
-  div:last-child {
-    width: ${AVATAR_SIZE[size]};
-  }
-`;
-
-export const avatarWrapperStyle = ({
-  zIndex,
-  size,
-}: {
-  zIndex: number;
-  size: AvatarSizes;
-}): SerializedStyles => css`
-  z-index: ${zIndex};
-  width: calc(${AVATAR_SIZE[size]} * 0.8);
-`;

package/src/components/Avatar/AvatarStack/AvatarStack.tsx

@@ -1,49 +0,0 @@
-import React, { forwardRef, useCallback } from 'react';
-import { errorHandler, generateTestDataId } from 'utils/helpers';
-
-import Avatar from '../Avatar';
-import { avatarStackStyle, avatarWrapperStyle } from './AvatarStack.style';
-import type { AvatarStackProps } from './AvatarStack.types';
-import { errors } from './utils';
-
-const AvatarStack = forwardRef<HTMLDivElement, AvatarStackProps>(
-  ({ maxAvatars = 4, size = 1, color = 'blue', dataTestId = '', children: childrenProp }, ref) => {
-    errorHandler<AvatarStackProps>(errors, { maxAvatars });
-
-    const children = React.Children.toArray(childrenProp);
-
-    const extraAvatars = children.length > maxAvatars ? children.length - maxAvatars : 0;
-
-    const renderContent = useCallback(
-      () =>
-        children.slice(0, children.length - extraAvatars).map((child, index) => {
-          return (
-            <div key={index} css={avatarWrapperStyle({ zIndex: children.length - index, size })}>
-              {child}
-            </div>
-          );
-        }),
-      [children, extraAvatars, size]
-    );
-
-    return (
-      <div
-        ref={ref}
-        data-testid={generateTestDataId('avatarstack', dataTestId)}
-        css={avatarStackStyle({ size })}
-      >
-        {renderContent()}
-        {extraAvatars ? (
-          <div css={avatarWrapperStyle({ zIndex: 0, size })}>
-            <Avatar size={size} color={color}>
-              +{extraAvatars}
-            </Avatar>
-          </div>
-        ) : null}
-      </div>
-    );
-  }
-);
-AvatarStack.displayName = 'AvatarStack';
-
-export default AvatarStack;

package/src/components/Avatar/AvatarStack/AvatarStack.types.ts

@@ -1,12 +0,0 @@
-import type { DivProps } from '~/utils/common';
-import type { TestProps } from '~/utils/types';
-import type { AvatarColors, AvatarSizes } from '../Avatar.types';
-
-export interface AvatarStackProps extends TestProps, DivProps {
-  /** the maximum number of avatars to be displayed **/
-  maxAvatars?: number;
-  /** The size of the extra avatar, if any **/
-  size?: AvatarSizes;
-  /** the color of the extra avatar based on our colors eg. red-500 **/
-  color?: AvatarColors;
-}

package/src/components/Avatar/AvatarStack/index.ts

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

package/src/components/Avatar/AvatarStack/utils.ts

@@ -1,10 +0,0 @@
-import { PropsValidationError } from 'utils/errors';
-
-import type { AvatarStackProps } from './AvatarStack.types';
-
-export const errors = [
-  {
-    condition: ({ maxAvatars = 4 }: AvatarStackProps): boolean => Boolean(maxAvatars < 1),
-    error: new PropsValidationError('maxAvatars prop must be greater than 0'),
-  },
-];

package/src/components/Avatar/UserAvatar.tsx

@@ -1,18 +0,0 @@
-import { Box, type BoxProps } from '../../vanilla/Box';
-
-export function UserAvatar(props: BoxProps) {
-  return (
-    <Box asChild {...props}>
-      <svg viewBox="0 0 14 17" xmlns="http://www.w3.org/2000/svg">
-        <path
-          d="M6.96625 6.55647C8.77677 6.55647 10.2445 5.08876 10.2445 3.27824C10.2445 1.46772 8.77677 0 6.96625 0C5.15573 0 3.68801 1.46772 3.68801 3.27824C3.68801 5.08876 5.15573 6.55647 6.96625 6.55647Z"
-          fill="currentColor"
-        />
-        <path
-          d="M0 12.2113C0 12.1401 0.0171683 12.0699 0.0515269 12.0076C1.31285 9.7198 3.95046 8.09435 7 8.09435C10.0495 8.09435 12.6872 9.7198 13.9485 12.0076C13.9828 12.0699 14 12.1401 14 12.2113C14 12.2824 13.9828 12.3528 13.9483 12.4151C12.687 14.6941 10.0518 16.0044 7.00244 16.0044C3.95304 16.0044 1.31314 14.6941 0.0516988 12.4151C0.0172363 12.3528 0 12.2824 0 12.2113Z"
-          fill="currentColor"
-        />
-      </svg>
-    </Box>
-  );
-}

package/src/components/Avatar/index.ts

@@ -1,3 +0,0 @@
-export { default } from './Avatar';
-export * from './Avatar';
-export * from './Avatar.types';

package/src/components/Box/Box.style.ts

@@ -1,3 +0,0 @@
-import styled from '@emotion/styled';
-
-export const BoxWrapper = styled.div``;

package/src/components/Box/Box.test.ts

@@ -1,98 +0,0 @@
-import { pickCSSProperties, pickNonCSSProps } from './Box.utilities';
-import type { BoxProps } from './Box';
-
-describe('pickCSSProperties', () => {
-  it('should pick only the styled box props from the input object', () => {
-    const inputObject: BoxProps = {
-      color: 'inverted.secondary',
-      backgroundColor: 'default',
-      id: 'testing-id',
-    };
-
-    const expectedOutput: BoxProps = {
-      color: 'inverted.secondary',
-      backgroundColor: 'default',
-    };
-
-    const result = pickCSSProperties(inputObject);
-
-    expect(result).toEqual(expectedOutput);
-  });
-
-  it('should return an empty object if no styled box props are present in the input object', () => {
-    const inputObject: BoxProps = {
-      id: 'testing-id',
-    };
-
-    const expectedOutput: BoxProps = {};
-
-    const result = pickCSSProperties(inputObject);
-
-    expect(result).toEqual(expectedOutput);
-  });
-
-  it('should return an empty object if the input object is empty', () => {
-    const inputObject: BoxProps = {};
-
-    const expectedOutput: BoxProps = {};
-
-    const result = pickCSSProperties(inputObject);
-
-    expect(result).toEqual(expectedOutput);
-  });
-});
-
-describe('pickNonCSSProps', () => {
-  it('should pick only the non-CSS props from the input object', () => {
-    const inputObject: BoxProps = {
-      color: 'inverted.secondary',
-      backgroundColor: 'default',
-      id: 'testing-id',
-    };
-
-    const expectedOutput: BoxProps = {
-      id: 'testing-id',
-    };
-
-    const result = pickNonCSSProps(inputObject);
-
-    expect(result).toEqual(expectedOutput);
-  });
-
-  it('should return an empty object if all props are CSS props', () => {
-    const inputObject: BoxProps = {
-      color: 'inverted.secondary',
-      backgroundColor: 'default',
-    };
-
-    const expectedOutput: BoxProps = {};
-
-    const result = pickNonCSSProps(inputObject);
-
-    expect(result).toEqual(expectedOutput);
-  });
-
-  it('should return the same object if no CSS props are present', () => {
-    const inputObject: BoxProps = {
-      id: 'testing-id',
-    };
-
-    const expectedOutput: BoxProps = {
-      id: 'testing-id',
-    };
-
-    const result = pickNonCSSProps(inputObject);
-
-    expect(result).toEqual(expectedOutput);
-  });
-
-  it('should return an empty object if the input object is empty', () => {
-    const inputObject: BoxProps = {};
-
-    const expectedOutput: BoxProps = {};
-
-    const result = pickNonCSSProps(inputObject);
-
-    expect(result).toEqual(expectedOutput);
-  });
-});

package/src/components/Box/Box.tsx

@@ -1,57 +0,0 @@
-import type { CSSObject } from '@emotion/react';
-import { css } from '@emotion/react';
-import useTheme from 'hooks/useTheme';
-import { omit } from 'lodash-es';
-import React, { forwardRef } from 'react';
-
-import { BoxWrapper } from './Box.style';
-import type { StyledBoxProps } from './Box.types';
-import { cssResolver, omitedCSSprops, pickCSSProperties, pickNonCSSProps } from './Box.utilities';
-
-export type BoxProps = StyledBoxProps & React.HTMLAttributes<HTMLDivElement>;
-
-/**
- *
- * @deprecated {@link Box} has been deprecated; use vanilla Box instead.
- *
- */
-const Box = forwardRef<HTMLDivElement, BoxProps>(({ children, ...rest }, ref) => {
-  const theme = useTheme();
-  const cssPropsOnly = pickCSSProperties(rest);
-  const props = pickNonCSSProps(rest);
-  const resolver = cssResolver(theme, cssPropsOnly);
-
-  const propsToCss: CSSObject = {
-    ...omit(cssPropsOnly, omitedCSSprops),
-    ...resolver('padding', 'p', 'spacing'),
-    ...resolver('paddingTop', 'pt', 'spacing'),
-    ...resolver('paddingRight', 'pr', 'spacing'),
-    ...resolver('paddingLeft', 'pl', 'spacing'),
-    ...resolver('paddingBottom', 'pb', 'spacing'),
-    ...resolver('padding', 'py', 'spacing'),
-    ...resolver('padding', 'px', 'spacing'),
-    ...resolver('margin', 'm', 'spacing'),
-    ...resolver('marginTop', 'mt', 'spacing'),
-    ...resolver('marginRight', 'mr', 'spacing'),
-    ...resolver('marginLeft', 'ml', 'spacing'),
-    ...resolver('marginBottom', 'mb', 'spacing'),
-    ...resolver('margin', 'my', 'spacing'),
-    ...resolver('margin', 'mx', 'spacing'),
-    ...resolver('top', 'top', 'spacing'),
-    ...resolver('right', 'right', 'spacing'),
-    ...resolver('left', 'left', 'spacing'),
-    ...resolver('bottom', 'bottom', 'spacing'),
-    ...resolver('color', 'color', 'color'),
-    ...resolver('gap', 'gap', 'spacing'),
-    ...resolver('backgroundColor', 'backgroundColor', 'backgroundColor'),
-  };
-
-  return (
-    <BoxWrapper ref={ref} css={[css(propsToCss)]} {...props}>
-      {children}
-    </BoxWrapper>
-  );
-});
-
-Box.displayName = 'Box';
-export default Box;