From c05c16f0f8aa117cda5a43bd0c1d5944772af1e5 Mon Sep 17 00:00:00 2001
From: Mateusz Kleszcz <mateusz.kacper.kleszcz@gmail.com>
Date: Mon, 11 Sep 2023 10:30:23 +0200
Subject: [PATCH 1/4] refactor: tet-217 label (#49)

* refactor: TET-217 label

* fix: TET-217 add label attributes, action prop
---
 .../CheckboxGroup/CheckboxGroup.props.ts      |  2 +-
 src/components/Label/Label.props.ts           | 13 +++---
 src/components/Label/Label.stories.ts         | 11 +++++
 src/components/Label/Label.styles.ts          | 42 +++++++++----------
 src/components/Label/Label.test.tsx           | 32 ++++++++++++++
 src/components/Label/Label.tsx                | 38 ++++++++---------
 src/components/Label/index.ts                 |  1 +
 src/components/Label/stylesBuilder/index.ts   |  1 +
 .../Label/stylesBuilder/stylesBuilder.ts      | 29 +++++++++++++
 .../RadioButtonGroup.props.ts                 |  2 +-
 10 files changed, 121 insertions(+), 50 deletions(-)
 create mode 100644 src/components/Label/stylesBuilder/index.ts
 create mode 100644 src/components/Label/stylesBuilder/stylesBuilder.ts

diff --git a/src/components/CheckboxGroup/CheckboxGroup.props.ts b/src/components/CheckboxGroup/CheckboxGroup.props.ts
index a358d53d..d03b2eb0 100644
--- a/src/components/CheckboxGroup/CheckboxGroup.props.ts
+++ b/src/components/CheckboxGroup/CheckboxGroup.props.ts
@@ -1,7 +1,7 @@
 import { CheckboxGroupConfig } from './CheckboxGroup.style';
 import { CheckboxProps } from '../Checkbox/Checkbox.props';
 import { HelperTextProps } from '../HelperText/HelperText.props';
-import { LabelProps } from '../Label/Label.props';
+import type { LabelProps } from '../Label';
 
 import { DeepPartial } from '@/utility-types/DeepPartial';
 
diff --git a/src/components/Label/Label.props.ts b/src/components/Label/Label.props.ts
index 9759235b..2044987c 100644
--- a/src/components/Label/Label.props.ts
+++ b/src/components/Label/Label.props.ts
@@ -1,12 +1,13 @@
-import { LabelConfig } from './Label.styles';
-// import { ButtonProps } from '../Button';
+import type { LabelHTMLAttributes } from 'react';
 
-import { DeepPartial } from '@/utility-types/DeepPartial';
+import type { LabelConfig } from './Label.styles';
+
+import type { Action } from '@/types';
 
 export type LabelProps = {
   label: string;
-  // action?: ButtonProps<'bare'>;
+  action?: Action;
   tooltip?: boolean;
   optional?: string;
-  custom?: DeepPartial<LabelConfig>;
-};
+  custom?: LabelConfig;
+} & Omit<LabelHTMLAttributes<HTMLLabelElement>, 'color'>;
diff --git a/src/components/Label/Label.stories.ts b/src/components/Label/Label.stories.ts
index 4a745069..d8f1ee69 100644
--- a/src/components/Label/Label.stories.ts
+++ b/src/components/Label/Label.stories.ts
@@ -28,9 +28,20 @@ export const Tooltip: Story = {
   },
 };
 
+export const Action: Story = {
+  args: {
+    action: {
+      label: 'Action',
+    },
+  },
+};
+
 export const All: Story = {
   args: {
     optional: '(optional)',
     tooltip: true,
+    action: {
+      label: 'Action',
+    },
   },
 };
diff --git a/src/components/Label/Label.styles.ts b/src/components/Label/Label.styles.ts
index 0f67236b..082633e8 100644
--- a/src/components/Label/Label.styles.ts
+++ b/src/components/Label/Label.styles.ts
@@ -1,17 +1,12 @@
-import { SystemProps } from '@xstyled/styled-components';
+import type { BaseProps } from '@/types/BaseProps';
 
-import { Theme } from '@/theme';
-import { BaseProps } from '@/types/BaseProps';
-
-export type LabelConfig = BaseProps & TooltipConfig & OptionalConfig;
-
-type TooltipConfig = {
-  tooltip?: SystemProps<Theme>;
-};
-
-type OptionalConfig = {
-  optional?: SystemProps<Theme>;
-};
+export type LabelConfig = {
+  innerElements?: {
+    tooltip?: BaseProps;
+    optional?: BaseProps;
+    action?: BaseProps;
+  };
+} & BaseProps;
 
 export const defaultConfig = {
   text: 'medium-175',
@@ -19,13 +14,18 @@ export const defaultConfig = {
   display: 'flex',
   alignItems: 'flex-start',
   gap: 'component-gap-xSmall',
-  tooltip: {
-    color: 'content-secondary',
-    display: 'flex',
-    alignItems: 'center',
-    minHeight: 'xSmall',
-  },
-  optional: {
-    color: 'content-tertiary',
+  innerElements: {
+    tooltip: {
+      color: 'content-secondary',
+      display: 'flex',
+      alignItems: 'center',
+      minHeight: 'xSmall',
+    },
+    optional: {
+      color: 'content-tertiary',
+    },
+    action: {
+      ml: 'auto',
+    },
   },
 } satisfies LabelConfig;
diff --git a/src/components/Label/Label.test.tsx b/src/components/Label/Label.test.tsx
index 8d7eae10..c804c9b8 100644
--- a/src/components/Label/Label.test.tsx
+++ b/src/components/Label/Label.test.tsx
@@ -1,12 +1,15 @@
 import { Label } from './Label';
 import { render } from '../../tests/render';
 
+import { customPropTester } from '@/tests/customPropTester';
+
 const getLabel = (jsx: JSX.Element) => {
   const { queryByTestId } = render(jsx);
 
   return {
     label: queryByTestId('label'),
     optional: queryByTestId('label-optional'),
+    action: queryByTestId('label-action'),
     tooltip: queryByTestId('label-tooltip'),
   };
 };
@@ -44,6 +47,18 @@ describe('Label', () => {
     expect(tooltip).toBeNull();
   });
 
+  it('should render action if a prop passed', () => {
+    const { action } = getLabel(
+      <Label label="Hello there" action={{ label: 'Action' }} />,
+    );
+    expect(action).toBeInTheDocument();
+  });
+
+  it('should not render action if a prop not passed', () => {
+    const { action } = getLabel(<Label label="Hello there" />);
+    expect(action).toBeNull();
+  });
+
   it('should render correct colors', () => {
     const { label, optional, tooltip } = getLabel(
       <Label label="Hello there" optional="optional" tooltip />,
@@ -52,4 +67,21 @@ describe('Label', () => {
     expect(optional).toHaveStyle('color: rgb(126, 126, 126);');
     expect(tooltip).toHaveStyle('color: rgb(85, 85, 85)');
   });
+
+  customPropTester(
+    <Label
+      label="Hello there"
+      optional="optional"
+      tooltip
+      action={{ label: 'Action' }}
+    />,
+    {
+      containerId: 'label',
+      innerElements: {
+        optional: [],
+        tooltip: [],
+        action: [],
+      },
+    },
+  );
 });
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index 2926c575..ff2fe2be 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -1,50 +1,46 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
+import { FC, useMemo } from 'react';
 
-import { LabelProps } from './Label.props';
-import { defaultConfig } from './Label.styles';
-// import { Button } from '../Button';
+import type { LabelProps } from './Label.props';
+import { stylesBuilder } from './stylesBuilder';
+import { Button } from '../Button';
 
-import { mergeConfigWithCustom } from '@/services';
 import { tet } from '@/tetrisly';
 import { MarginProps } from '@/types/MarginProps';
 
-export const Label = ({
+export const Label: FC<LabelProps & MarginProps> = ({
   label,
   tooltip,
+  action,
   optional,
   custom,
-  ...rest
-}: LabelProps & MarginProps) => {
-  const options = mergeConfigWithCustom({ defaultConfig, custom });
-  const {
-    optional: optionalStyles,
-    tooltip: tooltipStyles,
-    ...labelStyles
-  } = options;
+  ...restProps
+}) => {
+  const styles = useMemo(() => stylesBuilder(custom), [custom]);
 
   return (
-    <tet.div {...labelStyles} data-testid="label" {...rest}>
+    <tet.label {...styles.label} data-testid="label" {...restProps}>
       {label}
       {!!optional && (
-        <tet.span {...optionalStyles} data-testid="label-optional">
+        <tet.span {...styles.optional} data-testid="label-optional">
           {optional}
         </tet.span>
       )}
       {/* TODO: add tooltip instead of bare icon, when we get one */}
       {tooltip && (
-        <tet.span {...tooltipStyles} data-testid="label-tooltip">
+        <tet.span {...styles.tooltip} data-testid="label-tooltip">
           <Icon name="16-info" />
         </tet.span>
       )}
-      {/* TODO: add action when we discuss how they should behave */}
-      {/* {!!action && (
+      {!!action && (
         <Button
           variant="bare"
+          appearance="primary"
           {...action}
-          marginLeft="auto"
+          {...styles.action}
           data-testid="label-action"
         />
-      )} */}
-    </tet.div>
+      )}
+    </tet.label>
   );
 };
diff --git a/src/components/Label/index.ts b/src/components/Label/index.ts
index dd0252d8..2b893532 100644
--- a/src/components/Label/index.ts
+++ b/src/components/Label/index.ts
@@ -1 +1,2 @@
 export { Label } from './Label';
+export type { LabelProps } from './Label.props';
diff --git a/src/components/Label/stylesBuilder/index.ts b/src/components/Label/stylesBuilder/index.ts
new file mode 100644
index 00000000..fe248ee5
--- /dev/null
+++ b/src/components/Label/stylesBuilder/index.ts
@@ -0,0 +1 @@
+export { stylesBuilder } from './stylesBuilder';
diff --git a/src/components/Label/stylesBuilder/stylesBuilder.ts b/src/components/Label/stylesBuilder/stylesBuilder.ts
new file mode 100644
index 00000000..29878b19
--- /dev/null
+++ b/src/components/Label/stylesBuilder/stylesBuilder.ts
@@ -0,0 +1,29 @@
+import type { LabelProps } from '../Label.props';
+import { defaultConfig } from '../Label.styles';
+
+import { mergeConfigWithCustom } from '@/services';
+import type { BaseProps } from '@/types/BaseProps';
+
+type LabelStylesBuilder = {
+  label: BaseProps;
+  optional: BaseProps;
+  tooltip: BaseProps;
+  action: BaseProps;
+};
+
+export const stylesBuilder = (
+  custom: LabelProps['custom'],
+): LabelStylesBuilder => {
+  const config = mergeConfigWithCustom({ defaultConfig, custom });
+  const {
+    innerElements: { optional, tooltip, action },
+    ...label
+  } = config;
+
+  return {
+    label,
+    optional,
+    tooltip,
+    action,
+  };
+};
diff --git a/src/components/RadioButtonGroup/RadioButtonGroup.props.ts b/src/components/RadioButtonGroup/RadioButtonGroup.props.ts
index 66f83435..00d8996b 100644
--- a/src/components/RadioButtonGroup/RadioButtonGroup.props.ts
+++ b/src/components/RadioButtonGroup/RadioButtonGroup.props.ts
@@ -1,6 +1,6 @@
 import { RadioButtonGroupConfig } from './RadioButtonGroup.styles';
 import { HelperTextProps } from '../HelperText/HelperText.props';
-import { LabelProps } from '../Label/Label.props';
+import type { LabelProps } from '../Label';
 import { RadioButtonProps } from '../RadioButton/RadioButton.props';
 
 import { DeepPartial } from '@/utility-types/DeepPartial';

From dc2315832bc241a1642c52a3f5bcd9b734727e3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Pot=C4=99pa?= <adrian.potepa@gmail.com>
Date: Mon, 11 Sep 2023 12:31:59 +0200
Subject: [PATCH 2/4] fix(storybook): path to brand logo TET-138 (#56)

---
 .storybook/lightTheme.ts | 4 +++-
 .storybook/main.ts       | 3 ++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/.storybook/lightTheme.ts b/.storybook/lightTheme.ts
index 4f121f7d..88d39dd2 100644
--- a/.storybook/lightTheme.ts
+++ b/.storybook/lightTheme.ts
@@ -1,5 +1,7 @@
 import { create } from '@storybook/theming/create';
 
+const REPOSITORY_NAME = process?.env?.REPOSITORY_NAME;
+
 export default create({
   base: 'light',
   colorPrimary: '#272E35',
@@ -10,7 +12,7 @@ export default create({
 
   // Branding
   brandTitle: 'Tetrisly - React Components',
-  brandImage: '/logo.svg',
+  brandImage: `${REPOSITORY_NAME ? '/' + REPOSITORY_NAME : ''}/logo.svg`,
 
   // UI
   appBg: '#ffffff',
diff --git a/.storybook/main.ts b/.storybook/main.ts
index 7ae77431..78cde339 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -19,10 +19,11 @@ const config: StorybookConfig = {
     autodocs: 'tag',
   },
   core: {},
-  async viteFinal(config) {
+  async viteFinal(config, { configType }) {
     if (!config.plugins) {
       config.plugins = [];
     }
+
     config.plugins.push(tsconfigPaths.default());
 
     return config;

From b66f00246d1302237c1ef371298589444a2423be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Pot=C4=99pa?= <adrian.potepa@gmail.com>
Date: Mon, 11 Sep 2023 13:24:42 +0200
Subject: [PATCH 3/4] chore(storybook): removed unnecessary variable from
 config file NO-JIRA (#57)

---
 .storybook/main.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 78cde339..7ae77431 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -19,11 +19,10 @@ const config: StorybookConfig = {
     autodocs: 'tag',
   },
   core: {},
-  async viteFinal(config, { configType }) {
+  async viteFinal(config) {
     if (!config.plugins) {
       config.plugins = [];
     }
-
     config.plugins.push(tsconfigPaths.default());
 
     return config;

From cbfb3f73e2780ed052d70d85ab77e5c15f2687a7 Mon Sep 17 00:00:00 2001
From: Mateusz Kleszcz <mateusz.kacper.kleszcz@gmail.com>
Date: Mon, 11 Sep 2023 13:52:46 +0200
Subject: [PATCH 4/4] refactor: TET-207 avatar (#51)

---
 src/components/Avatar/Avatar.props.ts         |  28 +-
 src/components/Avatar/Avatar.styles.ts        | 262 +++++++++++++++---
 src/components/Avatar/Avatar.test.tsx         |  75 +++++
 src/components/Avatar/Avatar.tsx              |  35 +--
 .../Avatar/stylesBuilder/stylesBuilder.ts     |  24 +-
 .../Avatar/types/AvatarAppearance.type.ts     |  17 ++
 .../Avatar/types/AvatarEmphasis.type.ts       |   1 +
 .../Avatar/{ => types}/AvatarShape.type.ts    |   0
 .../Avatar/types/AvatarSize.type.ts           |   1 +
 src/components/Avatar/types/index.ts          |   7 +
 10 files changed, 362 insertions(+), 88 deletions(-)
 create mode 100644 src/components/Avatar/Avatar.test.tsx
 create mode 100644 src/components/Avatar/types/AvatarAppearance.type.ts
 create mode 100644 src/components/Avatar/types/AvatarEmphasis.type.ts
 rename src/components/Avatar/{ => types}/AvatarShape.type.ts (100%)
 create mode 100644 src/components/Avatar/types/AvatarSize.type.ts
 create mode 100644 src/components/Avatar/types/index.ts

diff --git a/src/components/Avatar/Avatar.props.ts b/src/components/Avatar/Avatar.props.ts
index 001305b9..7c4f6ec7 100644
--- a/src/components/Avatar/Avatar.props.ts
+++ b/src/components/Avatar/Avatar.props.ts
@@ -1,13 +1,12 @@
-import { ImgHTMLAttributes } from 'react';
+import type { ImgHTMLAttributes } from 'react';
 
-import { AvatarConfig } from './Avatar.styles';
-import { AvatarShape } from './AvatarShape.type';
-import { Appearance } from '../../types/Appearance';
-
-import { Emphasis } from '@/types/Emphasis';
-import { MarginProps } from '@/types/MarginProps';
-import { Size } from '@/types/Size';
-import { DeepPartial } from '@/utility-types/DeepPartial';
+import type { AvatarConfig } from './Avatar.styles';
+import type {
+  AvatarAppearanceColors,
+  AvatarEmphasis,
+  AvatarShape,
+  AvatarSize,
+} from './types';
 
 export type AvatarProps = (
   | {
@@ -17,12 +16,13 @@ export type AvatarProps = (
       initials?: never;
     }
   | {
-      appearance?: Appearance;
-      emphasis?: Emphasis;
+      img?: never;
+      appearance?: AvatarAppearanceColors;
+      emphasis?: AvatarEmphasis;
       initials: string;
     }
 ) & {
   shape?: AvatarShape;
-  size?: Size;
-  custom?: DeepPartial<AvatarConfig>;
-} & MarginProps;
+  size?: AvatarSize;
+  custom?: AvatarConfig;
+};
diff --git a/src/components/Avatar/Avatar.styles.ts b/src/components/Avatar/Avatar.styles.ts
index c473bb1a..06cf9483 100644
--- a/src/components/Avatar/Avatar.styles.ts
+++ b/src/components/Avatar/Avatar.styles.ts
@@ -1,28 +1,26 @@
-import { AvatarShape } from './AvatarShape.type';
+import type { AvatarAppearance, AvatarShape } from './types';
 
-import { fromEntries } from '@/services/fromEntries';
-import { Appearance, appearances } from '@/types/Appearance';
-import { BaseProps } from '@/types/BaseProps';
+import type { BaseProps } from '@/types/BaseProps';
 import { Emphasis } from '@/types/Emphasis';
-import { Size, sizes } from '@/types/Size';
+import { Size } from '@/types/Size';
 
 export type AvatarConfig = {
-  nestedImage: BaseProps;
-  shape: Record<AvatarShape, BaseProps>;
-  size: Record<Size, BaseProps>;
-  appearance: Record<
-    Appearance | 'image',
-    {
-      emphasis: Record<Emphasis, BaseProps>;
-    }
+  shape?: Partial<Record<AvatarShape, BaseProps>>;
+  size?: Partial<Record<Size, BaseProps>>;
+  appearance?: Partial<
+    Record<
+      AvatarAppearance,
+      {
+        emphasis?: Partial<Record<Emphasis, BaseProps>>;
+      }
+    >
   >;
+  innerElements?: {
+    image?: BaseProps;
+  };
 } & BaseProps;
 
 export const defaultConfig = {
-  nestedImage: {
-    w: '100%',
-    h: '100%',
-  },
   overflow: 'hidden',
   position: 'relative',
   display: 'flex',
@@ -36,18 +34,33 @@ export const defaultConfig = {
       borderRadius: 'large',
     },
   },
-  size: sizes.reduce(
-    (acc, size) => ({
-      ...acc,
-      [size]: {
-        w: size,
-        h: size,
-        text: `body-${size.includes('xSmall') ? 'strong-xSmall' : size}`,
-      },
-    }),
-    {} as Record<Size, BaseProps>,
-  ),
-
+  size: {
+    large: {
+      w: 'large',
+      h: 'large',
+      text: 'body-large',
+    },
+    medium: {
+      w: 'medium',
+      h: 'medium',
+      text: 'body-medium',
+    },
+    small: {
+      w: 'small',
+      h: 'small',
+      text: 'body-small',
+    },
+    xSmall: {
+      w: 'xSmall',
+      h: 'xSmall',
+      text: 'body-strong-xSmall',
+    },
+    '2xSmall': {
+      w: '2xSmall',
+      h: '2xSmall',
+      text: 'body-strong-xSmall',
+    },
+  },
   appearance: {
     image: {
       emphasis: {
@@ -55,22 +68,179 @@ export const defaultConfig = {
         low: {},
       },
     },
-    ...fromEntries(
-      appearances.map((appearance) => [
-        appearance,
-        {
-          emphasis: {
-            high: {
-              color: 'nonSemantic-white-content-primary',
-              backgroundColor: `nonSemantic-${appearance}-background-strong`,
-            },
-            low: {
-              color: `nonSemantic-${appearance}-content-primary`,
-              backgroundColor: `nonSemantic-${appearance}-background-muted`,
-            },
-          },
-        },
-      ]),
-    ),
+    blue: {
+      emphasis: {
+        high: {
+          color: 'nonSemantic-white-content-primary',
+          backgroundColor: 'nonSemantic-blue-background-strong',
+        },
+        low: {
+          color: 'nonSemantic-blue-content-primary',
+          backgroundColor: 'nonSemantic-blue-background-muted',
+        },
+      },
+    },
+    green: {
+      emphasis: {
+        high: {
+          color: 'nonSemantic-white-content-primary',
+          backgroundColor: 'nonSemantic-green-background-strong',
+        },
+        low: {
+          color: 'nonSemantic-green-content-primary',
+          backgroundColor: 'nonSemantic-green-background-muted',
+        },
+      },
+    },
+    grey: {
+      emphasis: {
+        high: {
+          color: 'nonSemantic-white-content-primary',
+          backgroundColor: 'nonSemantic-grey-background-strong',
+        },
+        low: {
+          color: 'nonSemantic-grey-content-primary',
+          backgroundColor: 'nonSemantic-grey-background-muted',
+        },
+      },
+    },
+    red: {
+      emphasis: {
+        high: {
+          color: 'nonSemantic-white-content-primary',
+          backgroundColor: 'nonSemantic-red-background-strong',
+        },
+        low: {
+          color: 'nonSemantic-red-content-primary',
+          backgroundColor: 'nonSemantic-red-background-muted',
+        },
+      },
+    },
+    orange: {
+      emphasis: {
+        high: {
+          color: 'nonSemantic-white-content-primary',
+          backgroundColor: 'nonSemantic-orange-background-strong',
+        },
+        low: {
+          color: 'nonSemantic-orange-content-primary',
+          backgroundColor: 'nonSemantic-orange-background-muted',
+        },
+      },
+    },
+    raspberry: {
+      emphasis: {
+        high: {
+          color: 'nonSemantic-white-content-primary',
+          backgroundColor: 'nonSemantic-raspberry-background-strong',
+        },
+        low: {
+          color: 'nonSemantic-raspberry-content-primary',
+          backgroundColor: 'nonSemantic-raspberry-background-muted',
+        },
+      },
+    },
+    magenta: {
+      emphasis: {
+        high: {
+          color: 'nonSemantic-white-content-primary',
+          backgroundColor: 'nonSemantic-magenta-background-strong',
+        },
+        low: {
+          color: 'nonSemantic-magenta-content-primary',
+          backgroundColor: 'nonSemantic-magenta-background-muted',
+        },
+      },
+    },
+    purple: {
+      emphasis: {
+        high: {
+          color: 'nonSemantic-white-content-primary',
+          backgroundColor: 'nonSemantic-purple-background-strong',
+        },
+        low: {
+          color: 'nonSemantic-purple-content-primary',
+          backgroundColor: 'nonSemantic-purple-background-muted',
+        },
+      },
+    },
+    grape: {
+      emphasis: {
+        high: {
+          color: 'nonSemantic-white-content-primary',
+          backgroundColor: 'nonSemantic-grape-background-strong',
+        },
+        low: {
+          color: 'nonSemantic-grape-content-primary',
+          backgroundColor: 'nonSemantic-grape-background-muted',
+        },
+      },
+    },
+    violet: {
+      emphasis: {
+        high: {
+          color: 'nonSemantic-white-content-primary',
+          backgroundColor: 'nonSemantic-violet-background-strong',
+        },
+        low: {
+          color: 'nonSemantic-violet-content-primary',
+          backgroundColor: 'nonSemantic-violet-background-muted',
+        },
+      },
+    },
+    cyan: {
+      emphasis: {
+        high: {
+          color: 'nonSemantic-white-content-primary',
+          backgroundColor: 'nonSemantic-cyan-background-strong',
+        },
+        low: {
+          color: 'nonSemantic-cyan-content-primary',
+          backgroundColor: 'nonSemantic-cyan-background-muted',
+        },
+      },
+    },
+    teal: {
+      emphasis: {
+        high: {
+          color: 'nonSemantic-white-content-primary',
+          backgroundColor: 'nonSemantic-teal-background-strong',
+        },
+        low: {
+          color: 'nonSemantic-teal-content-primary',
+          backgroundColor: 'nonSemantic-teal-background-muted',
+        },
+      },
+    },
+    aquamarine: {
+      emphasis: {
+        high: {
+          color: 'nonSemantic-white-content-primary',
+          backgroundColor: 'nonSemantic-aquamarine-background-strong',
+        },
+        low: {
+          color: 'nonSemantic-aquamarine-content-primary',
+          backgroundColor: 'nonSemantic-aquamarine-background-muted',
+        },
+      },
+    },
+    emerald: {
+      emphasis: {
+        high: {
+          color: 'nonSemantic-white-content-primary',
+          backgroundColor: 'nonSemantic-emerald-background-strong',
+        },
+        low: {
+          color: 'nonSemantic-emerald-content-primary',
+          backgroundColor: 'nonSemantic-emerald-background-muted',
+        },
+      },
+    },
+  },
+  innerElements: {
+    image: {
+      w: '100%',
+      h: '100%',
+    },
   },
 } satisfies AvatarConfig;
diff --git a/src/components/Avatar/Avatar.test.tsx b/src/components/Avatar/Avatar.test.tsx
new file mode 100644
index 00000000..62fded08
--- /dev/null
+++ b/src/components/Avatar/Avatar.test.tsx
@@ -0,0 +1,75 @@
+import { Avatar } from './Avatar';
+import { render } from '../../tests/render';
+
+import { customPropTester } from '@/tests/customPropTester';
+
+const getAvatar = (jsx: JSX.Element) => {
+  const { getByTestId } = render(jsx);
+
+  return getByTestId('avatar');
+};
+
+const getImage = (jsx: JSX.Element) => {
+  const { queryByTestId } = render(jsx);
+
+  return queryByTestId('avatar-image');
+};
+
+describe('Avatar', () => {
+  customPropTester(
+    <Avatar
+      img={{ src: 'https://thispersondoesnotexist.com/' }}
+      appearance="image"
+    />,
+    {
+      containerId: 'avatar',
+      props: {
+        appearance: [
+          'blue',
+          'green',
+          'grey',
+          'red',
+          'orange',
+          'raspberry',
+          'magenta',
+          'purple',
+          'grape',
+          'violet',
+          'cyan',
+          'teal',
+          'aquamarine',
+          'emerald',
+          'image',
+        ],
+      },
+      innerElements: {
+        image: [],
+      },
+    },
+  );
+
+  it('should render the avatar', () => {
+    const avatar = getAvatar(<Avatar initials="M" />);
+    expect(avatar).toBeInTheDocument();
+  });
+
+  it('should render the correct initials', () => {
+    const avatar = getAvatar(<Avatar initials="M" />);
+    expect(avatar).toHaveTextContent('M');
+  });
+
+  it('should render the image', () => {
+    const image = getImage(
+      <Avatar
+        img={{ src: 'https://thispersondoesnotexist.com/' }}
+        appearance="image"
+      />,
+    );
+    expect(image).toBeInTheDocument();
+  });
+
+  it('should not render the image if initials are provided', () => {
+    const image = getImage(<Avatar initials="M" />);
+    expect(image).toBeNull();
+  });
+});
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
index 034d1e55..dcfc429d 100644
--- a/src/components/Avatar/Avatar.tsx
+++ b/src/components/Avatar/Avatar.tsx
@@ -1,21 +1,22 @@
-import { FC, ImgHTMLAttributes, useMemo } from 'react';
+import { FC, useMemo } from 'react';
 
-import { AvatarProps } from './Avatar.props';
+import type { AvatarProps } from './Avatar.props';
 import { stylesBuilder } from './stylesBuilder';
 
 import { tet } from '@/tetrisly';
-import { MarginProps } from '@/types/MarginProps';
+import type { MarginProps } from '@/types/MarginProps';
 
-export const Avatar: FC<AvatarProps> = ({
+export const Avatar: FC<AvatarProps & MarginProps> = ({
   appearance = 'blue',
   emphasis = 'low',
   shape = 'rounded',
   size = 'medium',
-  custom = {},
+  custom,
   initials,
-  ...rest
+  img,
+  ...restProps
 }) => {
-  const { nestedImage, ...styles } = useMemo(
+  const styles = useMemo(
     () =>
       stylesBuilder({
         custom,
@@ -24,21 +25,13 @@ export const Avatar: FC<AvatarProps> = ({
     [custom, appearance, emphasis, shape, size],
   );
 
-  const [img, marginProps] = extractImage(rest);
-
   return (
-    <tet.div {...{ ...styles, ...marginProps }}>
-      {img !== null ? <tet.img {...nestedImage} {...img} /> : initials}
+    <tet.div {...styles.container} data-testid="avatar" {...restProps}>
+      {img ? (
+        <tet.img {...styles.image} data-testid="avatar-image" {...img} />
+      ) : (
+        initials
+      )}
     </tet.div>
   );
 };
-
-function extractImage<T extends object>(obj: T) {
-  if ('img' in obj) {
-    const { img, ...marginProps } = obj as {
-      img: Omit<ImgHTMLAttributes<HTMLImageElement>, 'color'>;
-    } & MarginProps;
-    return [img, marginProps] as const;
-  }
-  return [null, obj] as const;
-}
diff --git a/src/components/Avatar/stylesBuilder/stylesBuilder.ts b/src/components/Avatar/stylesBuilder/stylesBuilder.ts
index b0e404ec..0171b79b 100644
--- a/src/components/Avatar/stylesBuilder/stylesBuilder.ts
+++ b/src/components/Avatar/stylesBuilder/stylesBuilder.ts
@@ -1,7 +1,13 @@
-import { AvatarProps } from '../Avatar.props';
+import type { AvatarProps } from '../Avatar.props';
 import { defaultConfig } from '../Avatar.styles';
 
 import { mergeConfigWithCustom } from '@/services';
+import type { BaseProps } from '@/types/BaseProps';
+
+type AvatarStylesBuilder = {
+  container: BaseProps;
+  image: BaseProps;
+};
 
 export const stylesBuilder = ({
   custom,
@@ -11,19 +17,23 @@ export const stylesBuilder = ({
   variant: Required<
     Pick<AvatarProps, 'appearance' | 'emphasis' | 'shape' | 'size'>
   >;
-}) => {
+}): AvatarStylesBuilder => {
   const {
     appearance: appearanceStyles,
     shape: shapeStyles,
     size: sizeStyles,
-    ...base
+    innerElements: { image },
+    ...restContainerStyles
   } = mergeConfigWithCustom({ defaultConfig, custom });
   const { appearance, emphasis, shape, size } = variant;
 
   return {
-    ...base,
-    ...appearanceStyles[appearance].emphasis[emphasis],
-    ...shapeStyles[shape],
-    ...sizeStyles[size],
+    container: {
+      ...appearanceStyles[appearance].emphasis[emphasis],
+      ...shapeStyles[shape],
+      ...sizeStyles[size],
+      ...restContainerStyles,
+    },
+    image,
   };
 };
diff --git a/src/components/Avatar/types/AvatarAppearance.type.ts b/src/components/Avatar/types/AvatarAppearance.type.ts
new file mode 100644
index 00000000..e25e7f97
--- /dev/null
+++ b/src/components/Avatar/types/AvatarAppearance.type.ts
@@ -0,0 +1,17 @@
+export type AvatarAppearanceColors =
+  | 'blue'
+  | 'green'
+  | 'grey'
+  | 'red'
+  | 'orange'
+  | 'raspberry'
+  | 'magenta'
+  | 'purple'
+  | 'grape'
+  | 'violet'
+  | 'cyan'
+  | 'teal'
+  | 'aquamarine'
+  | 'emerald';
+
+export type AvatarAppearance = AvatarAppearanceColors | 'image';
diff --git a/src/components/Avatar/types/AvatarEmphasis.type.ts b/src/components/Avatar/types/AvatarEmphasis.type.ts
new file mode 100644
index 00000000..6de886a7
--- /dev/null
+++ b/src/components/Avatar/types/AvatarEmphasis.type.ts
@@ -0,0 +1 @@
+export type AvatarEmphasis = 'low' | 'high';
diff --git a/src/components/Avatar/AvatarShape.type.ts b/src/components/Avatar/types/AvatarShape.type.ts
similarity index 100%
rename from src/components/Avatar/AvatarShape.type.ts
rename to src/components/Avatar/types/AvatarShape.type.ts
diff --git a/src/components/Avatar/types/AvatarSize.type.ts b/src/components/Avatar/types/AvatarSize.type.ts
new file mode 100644
index 00000000..a64d9bd0
--- /dev/null
+++ b/src/components/Avatar/types/AvatarSize.type.ts
@@ -0,0 +1 @@
+export type AvatarSize = 'large' | 'medium' | 'small' | 'xSmall' | '2xSmall';
diff --git a/src/components/Avatar/types/index.ts b/src/components/Avatar/types/index.ts
new file mode 100644
index 00000000..b2e63056
--- /dev/null
+++ b/src/components/Avatar/types/index.ts
@@ -0,0 +1,7 @@
+export type {
+  AvatarAppearance,
+  AvatarAppearanceColors,
+} from './AvatarAppearance.type';
+export type { AvatarEmphasis } from './AvatarEmphasis.type';
+export type { AvatarShape } from './AvatarShape.type';
+export type { AvatarSize } from './AvatarSize.type';