feat: TET-906 add Dimmer component

src/components/Dimmer/Dimmer.props.ts

@@ -0,0 +1,5 @@
+import { DimmerConfig } from './Dimmer.styles';
+
+export type DimmerProps = {
+  custom?: DimmerConfig;
+};

src/components/Dimmer/Dimmer.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Dimmer } from './Dimmer';
+import { Badge } from '../Badge';
+import { Card } from '../Card';
+
+import { DimmerDocs } from '@/docs-components/DimmerDocs';
+import { TetDocs } from '@/docs-components/TetDocs';
+import { tet } from '@/tetrisly';
+
+const meta = {
+  title: 'Dimmer',
+  component: Dimmer,
+  tags: ['autodocs'],
+  args: {},
+  parameters: {
+    backgrounds: {},
+    docs: {
+      description: {
+        component:
+          'An overlay that darkens the background content to focus the users attention on another specific element or interaction, such as a Modal or Side Panel.',
+      },
+      page: () => (
+        <TetDocs docs={null}>
+          <DimmerDocs />
+        </TetDocs>
+      ),
+    },
+  },
+} satisfies Meta<typeof Dimmer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithCardComponent: Story = {
+  render: () => (
+    <>
+      <Dimmer />
+      <tet.div padding="40">
+        <Card>
+          <tet.div
+            display="flex"
+            flexDirection="column"
+            gap="$space-component-gap-2xLarge"
+            minWidth="432px"
+          >
+            <Badge appearance="blue" emphasis="medium" label="In Progress" />
+            <tet.div display="flex" flexDirection="column">
+              <tet.span
+                color="$color-content-secondary"
+                text="$typo-body-small"
+              >
+                Task:
+              </tet.span>
+              <tet.span color="$color-content-primary" text="$typo-body-large">
+                Creating React components
+              </tet.span>
+            </tet.div>
+            <tet.div display="flex" gap="$space-component-gap-2xLarge">
+              <tet.div display="flex" flexDirection="column" flexGrow={1}>
+                <tet.span
+                  color="$color-content-secondary"
+                  text="$typo-body-small"
+                >
+                  Created
+                </tet.span>
+                <tet.span
+                  color="$color-content-primary"
+                  text="$typo-body-medium"
+                >
+                  Mon, 14 Feb 2023
+                </tet.span>
+              </tet.div>
+              <tet.div display="flex" flexDirection="column" flexGrow={1}>
+                <tet.span
+                  color="$color-content-secondary"
+                  text="$typo-body-small"
+                >
+                  Last modified
+                </tet.span>
+                <tet.span
+                  color="$color-content-primary"
+                  text="$typo-body-medium"
+                >
+                  Today, 5:23 am
+                </tet.span>
+              </tet.div>
+            </tet.div>
+          </tet.div>
+        </Card>
+      </tet.div>
+    </>
+  ),
+};

src/components/Dimmer/Dimmer.styles.ts

@@ -0,0 +1,17 @@
+import type { BaseProps } from '@/types/BaseProps';
+
+export type DimmerConfig = BaseProps;
+
+export const defaultConfig = {
+  w: '100%',
+  h: '100%',
+  backgroundColor: '$color-interaction-background-dimmer',
+  top: 0,
+  left: 0,
+  position: 'absolute',
+  zIndex: 3,
+} satisfies DimmerConfig;
+
+export const dimmerStyles = {
+  defaultConfig,
+};

src/components/Dimmer/Dimmer.test.tsx

@@ -0,0 +1,25 @@
+import { Dimmer } from './Dimmer';
+import { render } from '../../tests/render';
+
+import { customPropTester } from '@/tests/customPropTester';
+
+const getDimmer = (jsx: JSX.Element) => {
+  const { getByTestId } = render(jsx);
+  return getByTestId('dimmer');
+};
+
+describe('Dimmer', () => {
+  it('should render the dimmer', () => {
+    const dimmer = getDimmer(<Dimmer />);
+    expect(dimmer).toBeInTheDocument();
+  });
+
+  it('should render correct color', () => {
+    const dimmer = getDimmer(<Dimmer />);
+    expect(dimmer).toHaveStyle('background-color: rgba(25, 39, 58, 0.741)');
+  });
+
+  customPropTester(<Dimmer />, {
+    containerId: 'dimmer',
+  });
+});

src/components/Dimmer/Dimmer.tsx

@@ -0,0 +1,16 @@
+import { type FC, useMemo } from 'react';
+
+import type { DimmerProps } from './Dimmer.props';
+import { stylesBuilder } from './stylesBuilder';
+
+import { tet } from '@/tetrisly';
+import type { MarginProps } from '@/types';
+
+export const Dimmer: FC<DimmerProps & MarginProps> = ({
+  custom,
+  ...restProps
+}) => {
+  const styles = useMemo(() => stylesBuilder({ custom }), [custom]);
+
+  return <tet.div {...styles.container} data-testid="dimmer" {...restProps} />;
+};

src/components/Dimmer/index.ts

@@ -0,0 +1,3 @@
+export { Dimmer } from './Dimmer';
+export type { DimmerProps } from './Dimmer.props';
+export { dimmerStyles } from './Dimmer.styles';

src/components/Dimmer/stylesBuilder.ts

@@ -0,0 +1,27 @@
+import { DimmerProps } from './Dimmer.props';
+import { defaultConfig } from './Dimmer.styles';
+
+import { mergeConfigWithCustom } from '@/services';
+import { BaseProps } from '@/types/BaseProps';
+
+type StylesBuilderParams = {
+  custom: DimmerProps['custom'];
+};
+
+type DimmerStylesBuilder = {
+  container: BaseProps;
+};
+
+export const stylesBuilder = ({
+  custom,
+}: StylesBuilderParams): DimmerStylesBuilder => {
+  const config = mergeConfigWithCustom({ defaultConfig, custom });
+
+  const { ...restStyles } = config;
+
+  return {
+    container: {
+      ...restStyles,
+    },
+  };
+};

src/docs-components/DimmerDocs.tsx

@@ -0,0 +1,14 @@
+import { Dimmer } from '@/components/Dimmer/Dimmer';
+import { tet } from '@/tetrisly';
+
+export const DimmerDocs = () => (
+  <tet.section py="$space-component-padding-4xLarge">
+    <tet.div px="$dimension-1000" py="$dimension-500">
+      <tet.div display="flex">
+        <tet.div w="300" h="300" position="relative">
+          <Dimmer />
+        </tet.div>
+      </tet.div>
+    </tet.div>
+  </tet.section>
+);

src/index.ts

@@ -8,6 +8,7 @@ export * from './components/Checkbox';
 export * from './components/CheckboxGroup';
 export * from './components/CornerDialog';
 export * from './components/Counter';
+export * from './components/Dimmer';
 export * from './components/Divider';
 export * from './components/FileItem';
 export * from './components/HelperText';