fix(FJS-3): corrections for examples

packages/react-uikit/src/containers/Section/Section.styles.tsx

@@ -0,0 +1,33 @@
+import styled from '@emotion/styled';
+import {getCSSObj} from '../../utils';
+import {THTMLElementProps} from '../../definitions';
+
+export type TCWrapProps = THTMLElementProps;
+
+export const CWrap = styled.div<TCWrapProps>`
+  ${getCSSObj}
+`;
+
+export type TSectionContentProps = THTMLElementProps;
+
+export const SectionContent = styled.div<TSectionContentProps>`
+  ${getCSSObj}
+`;
+
+export type TCharacterImgWrapProps = THTMLElementProps;
+
+export const CharacterImgWrap = styled.div<TCharacterImgWrapProps>`
+  ${getCSSObj}
+`;
+
+export type TTitleProps = THTMLElementProps;
+
+export const Title = styled.h2<TTitleProps>`
+  ${getCSSObj}
+`;
+
+export type TDescriptionProps = THTMLElementProps;
+
+export const Description = styled.p<TDescriptionProps>`
+  ${getCSSObj}
+`;

packages/react-uikit/src/containers/Section/Section.test.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+// import {rest} from 'msw';
+// import {setupServer} from 'msw/node';
+import {render, screen} from '@testing-library/react';
+import {Provider} from 'react-redux';
+import {ThemeProvider} from '@emotion/react';
+import store from '../../redux/store';
+import initStore from '../../redux/initStore';
+import theme from '../../theme';
+
+import {Section} from './Section';
+
+describe('Section', () => {
+  let target: any;
+
+  beforeEach(() => {
+    initStore(store);
+
+    render(
+      <Provider store={store}>
+        <ThemeProvider theme={theme}>
+          <Section sectionType="FEATURES">Hello</Section>
+        </ThemeProvider>
+      </Provider>
+    );
+    target = screen.getByText('Hello');
+  });
+
+  it('renders Initial Render', () => {
+    expect(!!target).toBe(true);
+  });
+});

packages/react-uikit/src/containers/Section/Section.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+
+import { CWrap, SectionContent, Title, Description } from './Section.styles';
+
+export type IProps = TComponentProps;
+
+export const Section: React.FC<IProps> = (props): JSX.Element => {
+    const { sizeId, langs, children } = props;
+
+    // @ts-ignore
+    const theme = { ...useTheme().Section[sectionType] };
+
+    return (
+        <CWrap sizeId={sizeId} theme={theme.cwrap} data-testid={'section__cwrap'}>
+            <SectionContent sizeId={sizeId} theme={theme.sectioncontent} data-testid={'section__section-content'}>
+                <Title sizeId={sizeId} theme={theme.title} data-testid={'section__title'}>
+                    {langs.title}
+                </Title>
+                <Description sizeId={sizeId} theme={theme.description} data-testid={'section__description'}>
+                    {langs.description}
+                </Description>
+                {children}
+            </SectionContent>
+        </CWrap>
+    );
+};
+
+export default Section;

packages/react-uikit/src/containers/Section/index.ts

@@ -0,0 +1,4 @@
+import Section from './Section';
+
+export {Section} from './Section';
+export default Section;

packages/types/react-component.d.ts

@@ -0,0 +1,13 @@
+export type TComponentProps<TSize, TLangId, ReactNode> = {
+    sizeId?: TSize;
+    langId?: TLangId;
+    customize?: {
+      [key: string]: unknown;
+    };
+    children?: ReactNode;
+};
+
+export type THTMLElementProps<TSize, TTheme> = {
+    sizeId: TSize;
+    theme: TTheme;
+};