diff --git a/packages/design-system-react-native/src/components/AvatarIcon/AvatarIcon.constants.ts b/packages/design-system-react-native/src/components/AvatarIcon/AvatarIcon.constants.ts index 15eb97783..9942a1b94 100644 --- a/packages/design-system-react-native/src/components/AvatarIcon/AvatarIcon.constants.ts +++ b/packages/design-system-react-native/src/components/AvatarIcon/AvatarIcon.constants.ts @@ -1,4 +1,6 @@ -import { AvatarIconSize, AvatarIconSeverity } from '../../types'; +import { AvatarIconSeverity } from '@metamask/design-system-shared'; + +import { AvatarIconSize } from '../../types'; import { IconSize, IconColor } from '../Icon'; // Mappings diff --git a/packages/design-system-react-native/src/components/AvatarIcon/AvatarIcon.stories.tsx b/packages/design-system-react-native/src/components/AvatarIcon/AvatarIcon.stories.tsx index 6140b982c..b3a2d2883 100644 --- a/packages/design-system-react-native/src/components/AvatarIcon/AvatarIcon.stories.tsx +++ b/packages/design-system-react-native/src/components/AvatarIcon/AvatarIcon.stories.tsx @@ -1,7 +1,8 @@ +import { AvatarIconSeverity } from '@metamask/design-system-shared'; import type { Meta, StoryObj } from '@storybook/react-native'; import { View } from 'react-native'; -import { AvatarIconSize, AvatarIconSeverity } from '../../types'; +import { AvatarIconSize } from '../../types'; import { IconName } from '../Icon'; import { AvatarIcon } from './AvatarIcon'; diff --git a/packages/design-system-react-native/src/components/AvatarIcon/AvatarIcon.test.tsx b/packages/design-system-react-native/src/components/AvatarIcon/AvatarIcon.test.tsx index 1ca42042d..bf6a7f7ee 100644 --- a/packages/design-system-react-native/src/components/AvatarIcon/AvatarIcon.test.tsx +++ b/packages/design-system-react-native/src/components/AvatarIcon/AvatarIcon.test.tsx @@ -1,9 +1,10 @@ +import { AvatarIconSeverity } from '@metamask/design-system-shared'; import { useTailwind } from '@metamask/design-system-twrnc-preset'; import { renderHook } from '@testing-library/react-hooks'; import { render } from '@testing-library/react-native'; import React from 'react'; -import { AvatarIconSeverity, AvatarIconSize } from '../../types'; +import { AvatarIconSize } from '../../types'; import { IconName } from '../Icon'; import { AvatarIcon } from './AvatarIcon'; diff --git a/packages/design-system-react-native/src/components/AvatarIcon/AvatarIcon.tsx b/packages/design-system-react-native/src/components/AvatarIcon/AvatarIcon.tsx index ebb28c426..5282c9575 100644 --- a/packages/design-system-react-native/src/components/AvatarIcon/AvatarIcon.tsx +++ b/packages/design-system-react-native/src/components/AvatarIcon/AvatarIcon.tsx @@ -1,11 +1,8 @@ +import { AvatarIconSeverity } from '@metamask/design-system-shared'; import { useTailwind } from '@metamask/design-system-twrnc-preset'; import React from 'react'; -import { - AvatarIconSize, - AvatarBaseShape, - AvatarIconSeverity, -} from '../../types'; +import { AvatarIconSize, AvatarBaseShape } from '../../types'; import { AvatarBase } from '../AvatarBase'; import { Icon } from '../Icon'; diff --git a/packages/design-system-react-native/src/components/AvatarIcon/AvatarIcon.types.ts b/packages/design-system-react-native/src/components/AvatarIcon/AvatarIcon.types.ts index 96bdc4cdb..ad60fd15b 100644 --- a/packages/design-system-react-native/src/components/AvatarIcon/AvatarIcon.types.ts +++ b/packages/design-system-react-native/src/components/AvatarIcon/AvatarIcon.types.ts @@ -1,17 +1,12 @@ -import type { AvatarIconSeverity } from '../../types'; +import type { AvatarIconPropsShared } from '@metamask/design-system-shared'; + import type { AvatarBaseProps } from '../AvatarBase'; import type { IconName, IconProps } from '../Icon'; /** * AvatarIcon component props. */ -export type AvatarIconProps = { - /** - * Optional prop to control the severity of the avatar - * - * @default AvatarIconSeverity.Neutral - */ - severity?: AvatarIconSeverity; +export type AvatarIconProps = AvatarIconPropsShared & { /** * Optional prop to specify an icon to show */ diff --git a/packages/design-system-react-native/src/components/AvatarIcon/index.ts b/packages/design-system-react-native/src/components/AvatarIcon/index.ts index fa0a2dee3..0e49582f8 100644 --- a/packages/design-system-react-native/src/components/AvatarIcon/index.ts +++ b/packages/design-system-react-native/src/components/AvatarIcon/index.ts @@ -1,3 +1,4 @@ -export { AvatarIconSize, AvatarIconSeverity } from '../../types'; +export { AvatarIconSeverity } from '@metamask/design-system-shared'; +export { AvatarIconSize } from '../../types'; export { AvatarIcon } from './AvatarIcon'; export type { AvatarIconProps } from './AvatarIcon.types'; diff --git a/packages/design-system-react-native/src/components/Toast/Toast.types.ts b/packages/design-system-react-native/src/components/Toast/Toast.types.ts index 03dc377d1..3f11bfa0a 100644 --- a/packages/design-system-react-native/src/components/Toast/Toast.types.ts +++ b/packages/design-system-react-native/src/components/Toast/Toast.types.ts @@ -1,9 +1,9 @@ // Third party dependencies. +import type { AvatarIconSeverity } from '@metamask/design-system-shared'; import type { ReactElement } from 'react'; import type { ViewProps } from 'react-native'; // External Dependencies. -import type { AvatarIconSeverity } from '../../types'; import type { AvatarAccountVariant } from '../AvatarAccount'; import type { ButtonProps } from '../Button'; import type { ButtonIconProps } from '../ButtonIcon'; diff --git a/packages/design-system-react-native/src/types/index.ts b/packages/design-system-react-native/src/types/index.ts index d1cd5b82e..2539aa7d9 100644 --- a/packages/design-system-react-native/src/types/index.ts +++ b/packages/design-system-react-native/src/types/index.ts @@ -65,18 +65,6 @@ export enum AvatarGroupVariant { Token = 'token', } -/** - * AvatarIcon - severity - */ -export enum AvatarIconSeverity { - Neutral = 'neutral', - Info = 'info', - Success = 'success', - // eslint-disable-next-line @typescript-eslint/no-shadow - Error = 'error', - Warning = 'warning', -} - /** * BadgeWrapper - positionAnchorShape */ diff --git a/packages/design-system-react/src/components/AvatarIcon/AvatarIcon.constants.ts b/packages/design-system-react/src/components/AvatarIcon/AvatarIcon.constants.ts index 22a3f2902..eec074153 100644 --- a/packages/design-system-react/src/components/AvatarIcon/AvatarIcon.constants.ts +++ b/packages/design-system-react/src/components/AvatarIcon/AvatarIcon.constants.ts @@ -1,4 +1,6 @@ -import { AvatarIconSize, AvatarIconSeverity } from '../../types'; +import { AvatarIconSeverity } from '@metamask/design-system-shared'; + +import { AvatarIconSize } from '../../types'; import { IconSize, IconColor } from '../Icon'; export const MAP_AVATARICON_SIZE_ICONSIZE: Record = { diff --git a/packages/design-system-react/src/components/AvatarIcon/AvatarIcon.stories.tsx b/packages/design-system-react/src/components/AvatarIcon/AvatarIcon.stories.tsx index 08cc3f8ca..ff0f0c134 100644 --- a/packages/design-system-react/src/components/AvatarIcon/AvatarIcon.stories.tsx +++ b/packages/design-system-react/src/components/AvatarIcon/AvatarIcon.stories.tsx @@ -1,7 +1,8 @@ +import { AvatarIconSeverity } from '@metamask/design-system-shared'; import type { Meta, StoryObj } from '@storybook/react-vite'; import React from 'react'; -import { AvatarIconSize, AvatarIconSeverity } from '../../types'; +import { AvatarIconSize } from '../../types'; import { IconName } from '../Icon'; import { AvatarIcon } from './AvatarIcon'; diff --git a/packages/design-system-react/src/components/AvatarIcon/AvatarIcon.test.tsx b/packages/design-system-react/src/components/AvatarIcon/AvatarIcon.test.tsx index 1502c348d..a20436450 100644 --- a/packages/design-system-react/src/components/AvatarIcon/AvatarIcon.test.tsx +++ b/packages/design-system-react/src/components/AvatarIcon/AvatarIcon.test.tsx @@ -1,7 +1,8 @@ +import { AvatarIconSeverity } from '@metamask/design-system-shared'; import { render, screen } from '@testing-library/react'; import React, { createRef } from 'react'; -import { AvatarIconSize, AvatarIconSeverity } from '../../types'; +import { AvatarIconSize } from '../../types'; import { IconName } from '../Icon'; import { TWCLASSMAP_ICON_SIZE_DIMENSION } from '../Icon/Icon.constants'; diff --git a/packages/design-system-react/src/components/AvatarIcon/AvatarIcon.tsx b/packages/design-system-react/src/components/AvatarIcon/AvatarIcon.tsx index 85dd90ee8..2761140a1 100644 --- a/packages/design-system-react/src/components/AvatarIcon/AvatarIcon.tsx +++ b/packages/design-system-react/src/components/AvatarIcon/AvatarIcon.tsx @@ -1,6 +1,7 @@ +import { AvatarIconSeverity } from '@metamask/design-system-shared'; import React, { forwardRef } from 'react'; -import { AvatarIconSize, AvatarIconSeverity } from '../../types'; +import { AvatarIconSize } from '../../types'; import { twMerge } from '../../utils/tw-merge'; import { AvatarBase, AvatarBaseShape } from '../AvatarBase'; import { Icon } from '../Icon'; diff --git a/packages/design-system-react/src/components/AvatarIcon/AvatarIcon.types.ts b/packages/design-system-react/src/components/AvatarIcon/AvatarIcon.types.ts index 074fc836c..0643992a2 100644 --- a/packages/design-system-react/src/components/AvatarIcon/AvatarIcon.types.ts +++ b/packages/design-system-react/src/components/AvatarIcon/AvatarIcon.types.ts @@ -1,26 +1,22 @@ -import type { AvatarIconSize, AvatarIconSeverity } from '../../types'; +import type { AvatarIconPropsShared } from '@metamask/design-system-shared'; + import type { AvatarBaseProps } from '../AvatarBase'; import type { IconName, IconProps } from '../Icon'; -export type AvatarIconProps = Omit & { - /** - * Required icon name from the icon set - */ - iconName: IconName; - /** - * Optional props to be passed to the Icon component - */ - iconProps?: Omit; - /** - * Optional prop to control the size of the avatar - * - * @default AvatarIconSize.Md - */ - size?: AvatarIconSize; - /** - * Optional prop to control the severity of the avatar - * - * @default AvatarIconSeverity.Neutral - */ - severity?: AvatarIconSeverity; -}; +export type AvatarIconProps = Omit & + AvatarIconPropsShared & { + /** + * Required icon name from the icon set + */ + iconName: IconName; + /** + * Optional props to be passed to the Icon component + */ + iconProps?: Omit; + /** + * Optional prop to control the size of the avatar + * + * @default AvatarIconSize.Md + */ + size?: AvatarBaseProps['size']; + }; diff --git a/packages/design-system-react/src/components/AvatarIcon/index.ts b/packages/design-system-react/src/components/AvatarIcon/index.ts index fa0a2dee3..0e49582f8 100644 --- a/packages/design-system-react/src/components/AvatarIcon/index.ts +++ b/packages/design-system-react/src/components/AvatarIcon/index.ts @@ -1,3 +1,4 @@ -export { AvatarIconSize, AvatarIconSeverity } from '../../types'; +export { AvatarIconSeverity } from '@metamask/design-system-shared'; +export { AvatarIconSize } from '../../types'; export { AvatarIcon } from './AvatarIcon'; export type { AvatarIconProps } from './AvatarIcon.types'; diff --git a/packages/design-system-react/src/types/index.ts b/packages/design-system-react/src/types/index.ts index dca069bf8..d22c25afa 100644 --- a/packages/design-system-react/src/types/index.ts +++ b/packages/design-system-react/src/types/index.ts @@ -55,18 +55,6 @@ export enum AvatarAccountVariant { Maskicon = 'maskicon', } -/** - * AvatarIcon - severity - */ -export enum AvatarIconSeverity { - Neutral = 'neutral', - Info = 'info', - Success = 'success', - // eslint-disable-next-line @typescript-eslint/no-shadow - Error = 'error', - Warning = 'warning', -} - /** * AvatarGroup - variant */ diff --git a/packages/design-system-shared/src/index.ts b/packages/design-system-shared/src/index.ts index 8245ec5f8..3e2dd4b80 100644 --- a/packages/design-system-shared/src/index.ts +++ b/packages/design-system-shared/src/index.ts @@ -6,6 +6,12 @@ export { generateIconSeed, } from './utils/caip-address'; +// AvatarIcon types (ADR-0003 + ADR-0004) +export { + AvatarIconSeverity, + type AvatarIconPropsShared, +} from './types/AvatarIcon'; + // BadgeCount types (ADR-0003 + ADR-0004) export { BadgeCountSize, type BadgeCountPropsShared } from './types/BadgeCount'; diff --git a/packages/design-system-shared/src/types/AvatarIcon/AvatarIcon.types.ts b/packages/design-system-shared/src/types/AvatarIcon/AvatarIcon.types.ts new file mode 100644 index 000000000..f5c5b9ac1 --- /dev/null +++ b/packages/design-system-shared/src/types/AvatarIcon/AvatarIcon.types.ts @@ -0,0 +1,47 @@ +/** + * AvatarIcon - severity + * Convert from enum to const object (ADR-0003) + */ +export const AvatarIconSeverity = { + /** + * Represents a neutral severity + */ + Neutral: 'neutral', + /** + * Represents an info severity + */ + Info: 'info', + /** + * Represents a success severity + */ + Success: 'success', + /** + * Represents an error severity + */ + Error: 'error', + /** + * Represents a warning severity + */ + Warning: 'warning', +} as const; +export type AvatarIconSeverity = + (typeof AvatarIconSeverity)[keyof typeof AvatarIconSeverity]; + +/** + * AvatarIcon component shared props (ADR-0004) + * Platform-independent properties shared across React and React Native + */ +export type AvatarIconPropsShared = { + /** + * Optional prop to control the severity of the avatar + * Possible values: + * - AvatarIconSeverity.Neutral + * - AvatarIconSeverity.Info + * - AvatarIconSeverity.Success + * - AvatarIconSeverity.Error + * - AvatarIconSeverity.Warning + * + * @default AvatarIconSeverity.Neutral + */ + severity?: AvatarIconSeverity; +}; diff --git a/packages/design-system-shared/src/types/AvatarIcon/index.ts b/packages/design-system-shared/src/types/AvatarIcon/index.ts new file mode 100644 index 000000000..ec3c26942 --- /dev/null +++ b/packages/design-system-shared/src/types/AvatarIcon/index.ts @@ -0,0 +1,4 @@ +export { + AvatarIconSeverity, + type AvatarIconPropsShared, +} from './AvatarIcon.types';