Feature/info message component

.gitignore

@@ -1,5 +1,6 @@
 node_modules/
 dist/
+coverage/
 
 # Logs
 logs

src/lib/components/infomessage/InfoMessage.component.tsx

@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+import { Link, Text } from '../text/Text.component';
+import { Icon } from '../icon/Icon.component';
+import { defaultTheme } from '../../style/theme';
+import { useComputeBackgroundColor } from './InfoMessageUtils';
+import { Stack } from '../../spacing';
+
+type Props = {
+  title: string | React.ReactNode;
+  content: React.ReactNode;
+  link?: string;
+};
+
+const InfoMessageContainer = styled.div`
+  background-color: ${defaultTheme.darkRebrand.backgroundLevel2};
+  border-radius: 3px;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  color: white;
+`;
+
+function InfoMessage({ title, content, link }: Props) {
+  const { containerRef, backgroundColor } = useComputeBackgroundColor();
+
+  return (
+    <InfoMessageContainer
+      ref={containerRef}
+      style={{ backgroundColor: backgroundColor }}
+    >
+      <Stack>
+        <Icon
+          name="Info-circle"
+          color={defaultTheme.darkRebrand.infoPrimary}
+          size="lg"
+        />
+        {typeof title === 'string' ? <Text isEmphazed>{title}</Text> : title}
+      </Stack>
+      <Text color="textSecondary">{content}</Text>
+      {link && (
+        <Link href={link} target="_blank" style={{ alignSelf: 'flex-end' }}>
+          More infos <Icon name="External-link"></Icon>
+        </Link>
+      )}
+    </InfoMessageContainer>
+  );
+}
+
+export default InfoMessage;

src/lib/components/infomessage/InfoMessageUtils.test.tsx

@@ -0,0 +1,94 @@
+import { defaultTheme } from '../../style/theme';
+import React from 'react';
+import { useComputeBackgroundColor } from './InfoMessageUtils';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { CoreUiThemeProvider } from '../coreuithemeprovider/CoreUiThemeProvider';
+
+describe('useComputeBackgroundColor', () => {
+  const SUT = jest.fn();
+
+  it('should return backgroundlevel2 by default', () => {
+    //S
+    const Component = () => {
+      const { containerRef, backgroundColor } = useComputeBackgroundColor();
+      SUT(backgroundColor);
+      return <div ref={containerRef}></div>;
+    };
+    render(
+      <CoreUiThemeProvider theme={defaultTheme.darkRebrand}>
+        <Component />
+      </CoreUiThemeProvider>,
+    );
+    //V
+    expect(SUT).toHaveBeenCalledWith(defaultTheme.darkRebrand.backgroundLevel2);
+  });
+
+  it('should return backgroundlevel3 if parent element backgroundColor is level 2', () => {
+    //S
+    const Component = () => {
+      const { containerRef, backgroundColor } = useComputeBackgroundColor();
+      SUT(backgroundColor);
+      return (
+        <div
+          style={{ backgroundColor: defaultTheme.darkRebrand.backgroundLevel2 }}
+        >
+          <div ref={containerRef}></div>
+        </div>
+      );
+    };
+    render(
+      <CoreUiThemeProvider theme={defaultTheme.darkRebrand}>
+        <Component />
+      </CoreUiThemeProvider>,
+    );
+    //V
+    expect(SUT).toHaveBeenCalledWith(defaultTheme.darkRebrand.backgroundLevel3);
+  });
+  it('should return backgroundlevel3 if parent of parent element backgroundColor is level 2', () => {
+    //S
+    const Component = () => {
+      const { containerRef, backgroundColor } = useComputeBackgroundColor();
+      SUT(backgroundColor);
+      return (
+        <div
+          style={{ backgroundColor: defaultTheme.darkRebrand.backgroundLevel2 }}
+        >
+          <div>
+            <div ref={containerRef}></div>
+          </div>
+        </div>
+      );
+    };
+    render(
+      <CoreUiThemeProvider theme={defaultTheme.darkRebrand}>
+        <Component />
+      </CoreUiThemeProvider>,
+    );
+    //V
+    expect(SUT).toHaveBeenCalledWith(defaultTheme.darkRebrand.backgroundLevel3);
+  });
+  it('should return backgroundlevel2 if parent of parent element backgroundColor is level 3', () => {
+    //S
+    const Component = () => {
+      const { containerRef, backgroundColor } = useComputeBackgroundColor();
+      SUT(backgroundColor);
+      return (
+        <div
+          style={{ backgroundColor: defaultTheme.darkRebrand.backgroundLevel3 }}
+        >
+          <div>
+            <div ref={containerRef}></div>
+          </div>
+        </div>
+      );
+    };
+    render(
+      <CoreUiThemeProvider theme={defaultTheme.darkRebrand}>
+        <Component />
+      </CoreUiThemeProvider>,
+    );
+    //V
+    expect(SUT).toHaveBeenCalledWith(defaultTheme.darkRebrand.backgroundLevel2);
+  });
+});

src/lib/components/infomessage/InfoMessageUtils.ts

@@ -0,0 +1,39 @@
+import { DefaultTheme, useTheme } from "styled-components";
+import { hex2RGB } from "../../utils";
+import { useEffect, useRef, useState } from "react";
+
+export const useComputeBackgroundColor = () => {
+    const theme = useTheme();
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const [backgroundColor, setBackgroundColor] = useState('');
+
+    useEffect(() => {
+      containerRef.current &&
+        setBackgroundColor(getBackgroundColor(containerRef.current, theme));
+    }, [containerRef,theme]);
+
+    return {
+      containerRef,
+      backgroundColor,
+    };
+  };
+
+export const getBackgroundColor = (element: HTMLElement, theme: DefaultTheme) => {
+    if (element.parentElement) {
+      const parentElementBackgroundColor = window.getComputedStyle(
+        element.parentElement,
+      )['background-color'];
+      if (/rgba\([0-9]+, [0-9]+, [0-9]+, 0\)/.test(parentElementBackgroundColor) || !window.getComputedStyle(element.parentElement,)['background-color']) {
+        return getBackgroundColor(element.parentElement, theme);
+      } else {
+        const rgbArray = hex2RGB(theme.backgroundLevel2);
+        if (
+          `rgb(${rgbArray[0]}, ${rgbArray[1]}, ${rgbArray[2]})` ===
+          parentElementBackgroundColor
+        ) {
+          return theme.backgroundLevel3;
+        }
+      }
+    }
+    return theme.backgroundLevel2;
+  };

stories/infomessage.stories.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import InfoMessage from '../src/lib/components/infomessage/InfoMessage.component';
+import { Wrapper } from './common';
+import { defaultTheme } from '../src/lib/style/theme';
+import { Meta, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof InfoMessage>;
+
+const meta: Meta<typeof InfoMessage> = {
+  title: 'Components/InfoMessage',
+  component: InfoMessage,
+  decorators: [(story) => <Wrapper>{story()}</Wrapper>],
+};
+
+export default meta;
+
+export const Playground: StoryObj<
+  React.ComponentProps<typeof InfoMessage> & { backgroundColor?: string }
+> = {
+  render: ({ backgroundColor, ...args }) => (
+    <div
+      style={{
+        backgroundColor,
+        padding: '1rem',
+      }}
+    >
+      <div
+        style={{
+          padding: '1rem',
+        }}
+      >
+        <InfoMessage
+          title="What to do with this key?"
+          content="This key is needed by the Veeam repository to access ARTESCA for data backup."
+          link="test"
+        />
+      </div>
+    </div>
+  ),
+  argTypes: {
+    backgroundColor: {
+      description: 'Background color of the parent element',
+      options: ['Level1', 'Level2', 'Level3', 'Level4'],
+      mapping: {
+        Level1: defaultTheme.darkRebrand.backgroundLevel1,
+        Level2: defaultTheme.darkRebrand.backgroundLevel2,
+        Level3: defaultTheme.darkRebrand.backgroundLevel3,
+        Level4: defaultTheme.darkRebrand.backgroundLevel4,
+      },
+      control: {
+        type: 'radio',
+      },
+    },
+  },
+};
+
+export const Default: Story = {
+  args: {
+    title: 'Title for the provided info',
+    content: 'Some text that will help the user to understand what to do',
+  },
+};
+
+export const WithLink: Story = {
+  args: {
+    ...Default.args,
+    link: 'toDocs',
+  },
+};
+
+export const WithDifferentBackground: Story = {
+  render: (args) => {
+    return (
+      <div
+        style={{
+          padding: '1rem',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-around',
+          height: '30rem',
+        }}
+      >
+        <div
+          style={{
+            height: '10rem',
+            backgroundColor: defaultTheme.darkRebrand.backgroundLevel3,
+            padding: '1rem',
+          }}
+        >
+          <InfoMessage {...args} />
+        </div>
+        <div
+          style={{
+            height: '10rem',
+            backgroundColor: defaultTheme.darkRebrand.backgroundLevel2,
+            padding: '1rem',
+          }}
+        >
+          <InfoMessage {...args} />
+        </div>
+      </div>
+    );
+  },
+  args: {
+    ...Default.args,
+  },
+};