Feature/layout for banner

web/ASC.Web.Campaigns/.storybook/main.js

@@ -0,0 +1,12 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  "framework": "@storybook/react"
+}

web/ASC.Web.Campaigns/.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

web/ASC.Web.Campaigns/package.json

@@ -21,9 +21,18 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
-    "react-i18next": "^11.15.3"
+    "react-i18next": "^11.15.3",
+    "styled-components": "^5.3.5"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.12",
+    "@storybook/addon-actions": "^6.4.22",
+    "@storybook/addon-essentials": "^6.4.22",
+    "@storybook/addon-interactions": "^6.4.22",
+    "@storybook/addon-links": "^6.4.22",
+    "@storybook/react": "^6.4.22",
+    "@storybook/testing-library": "^0.0.11",
+    "babel-loader": "^8.2.5",
     "prettier": "^2.4.1"
   },
   "scripts": {
@@ -36,6 +45,8 @@
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
     "firebase:login": "firebase login",
     "firebase:logout": "firebase logout",
-    "firebase:deploy": "firebase deploy"
+    "firebase:deploy": "firebase deploy",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   }
 }

web/ASC.Web.Campaigns/src/components/Docs_7_1/Docs_7_1.stories.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Layout } from '../Layout';
+
+export default {
+  title: 'Example/Docs_7_1',
+  component: Layout,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    theme: {
+      control: {
+        type: "select",
+        options: ["light", "dark"]
+      }
+    },
+    language: {
+      control: {
+        type: "select",
+        options: ["en", "ru", "cs", "de", "es", "fr", "it", "ja", "nl", "pt", "zh"]
+      }
+    }
+  }
+};
+
+const Template = (args) => <Layout {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  origin: "http://localhost:8000", // use your source
+  name: "Docs_7_1",
+  language: "en",
+  theme: "light"
+}

web/ASC.Web.Campaigns/src/components/Layout.jsx

@@ -0,0 +1,41 @@
+import React, {useState, useEffect} from 'react';
+
+import { Header } from './header/Header';
+import { Article } from './article/Article';
+import { Section } from './section/Section';
+import {Dark, Base} from './theme/index';
+import { ThemeProvider } from "styled-components";
+
+export const Layout = ({theme, name, origin, language}) => {
+
+  const [visible, setVisible] = useState(true);
+
+  const themes = {
+    light: Base,
+    dark: Dark
+  }
+
+  const onResize = () => {
+      if (window.innerWidth < 1025) {
+          setVisible(false);
+      } else {
+          setVisible(true);
+      }
+  }
+
+  useEffect(() => {
+      window.addEventListener('resize', onResize)
+
+      return () => window.removeEventListener('resize', onResize);
+  }, [])
+
+  return (
+    <ThemeProvider theme={themes[theme || 'light']}>
+      <Header />
+      <div className='container' style={{display: "flex"}}>
+        {visible && window.innerWidth > 1025 && <Article />}
+        <Section name={name} origin={origin} lang={language} />
+      </div>
+    </ThemeProvider>
+  );
+};

web/ASC.Web.Campaigns/src/components/NewYear/NewYear.stories.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Layout } from '../Layout';
+
+export default {
+  title: 'Example/NewYear',
+  component: Layout,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    theme: {
+      control: {
+        type: "select",
+        options: ["light", "dark"]
+      }
+    },
+    language: {
+      control: {
+        type: "select",
+        options: ["en", "ru"]
+      }
+    }
+  }
+};
+
+const Template = (args) => <Layout {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  origin: "http://localhost:8000", // use your source
+  name: "NewYear",
+  language: "en",
+  theme: "light"
+}

web/ASC.Web.Campaigns/src/components/article/Article.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { StyledArticle, ArticleHeader, Header, StyledButtonWrapper, Button, Block, ArticleWrapper } from './styled-article';
+
+
+
+export const Article = () => {
+    const elements = [];
+
+    for (let i = 0; i < 7; i++) {
+        elements.push(<Block key={i} />)
+    }
+    return  <StyledArticle>
+        <ArticleHeader>
+            <Header>Documents</Header>
+        </ArticleHeader>
+        <StyledButtonWrapper>
+            <Button>Actions</Button>
+        </StyledButtonWrapper>
+        <ArticleWrapper>
+            {elements}
+        </ArticleWrapper>
+
+    </StyledArticle>
+}

web/ASC.Web.Campaigns/src/components/article/styled-article.js

@@ -0,0 +1,49 @@
+import styled from "styled-components";
+
+const StyledArticle = styled.div`
+    width: 302px;
+    background-color: ${props => props.theme.article};
+`;
+
+const ArticleHeader = styled.div`
+    padding: 11px 20px 14px;
+`;
+
+const Header = styled.div`
+    font-size: 26px;
+    font-weight: 700;
+    padding: 0;
+    margin: 0;
+    color: ${props => props.theme.color};
+`;
+
+const StyledButtonWrapper = styled.div`
+    padding: 0px 20px 16px;
+`;
+
+const Button = styled.button`
+    padding: 6px 10px;
+    width: 100%;
+    text-align: left;
+    border: none;
+    background-color: #ED7309;
+    box-sizing: border-box;
+    color: ${props => props.theme.articleButton};
+    font-weight: 900;
+    border-radius: 3px;
+`;
+
+
+const Block = styled.div`
+    height: 28px;
+    width: 100%;
+    background-color: ${props => props.theme.loaders};
+    margin-top: 10px;
+`;
+
+const ArticleWrapper = styled.div`
+    padding: 0 20px;
+`;
+
+
+export {StyledArticle, ArticleHeader, Header, StyledButtonWrapper, Button, Block, ArticleWrapper};

web/ASC.Web.Campaigns/src/components/header/Header.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import styled from "styled-components";
+import logo from './nav.svg'
+
+
+
+const StyledHeader = styled.div`
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 8px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: ${props => props.theme.headerColor};
+`;
+
+
+export const Header = () => (
+    <StyledHeader>
+        <img src={logo} />
+    </StyledHeader>
+);

web/ASC.Web.Campaigns/src/components/section/Section.jsx

@@ -0,0 +1,43 @@
+import React, {useState, useEffect} from "react";
+
+import { 
+    StyledSection, 
+    Icon, 
+    Name, 
+    MainLoader, 
+    FilterLoader, 
+    SectionContent, 
+    SectionHeader, 
+    SectionWrapper, 
+    StyledIframe } from "./styled-section";
+
+export const Section = ({name, origin, lang}) => {
+
+    useEffect(() => {
+        setLanguage(lang);
+    }, [lang])
+
+    const [language, setLanguage] = useState(lang || "en");
+    const url = `${origin}/${language}/${name}`
+
+    const elements = [];
+
+    for (let i = 0; i < 14; i++) {
+        elements.push(<SectionContent key={i}>
+            <Icon />
+            <Name />
+            <MainLoader />
+        </SectionContent>)
+    }
+
+    return <StyledSection>
+            <div>
+                <StyledIframe scrolling="no" className="iframe" src={url} />
+            </div>
+            <SectionWrapper>
+                <SectionHeader>My documents</SectionHeader>
+                <FilterLoader />
+                {elements}
+            </SectionWrapper>
+        </StyledSection>
+}

web/ASC.Web.Campaigns/src/components/section/styled-section.js

@@ -0,0 +1,54 @@
+import styled from "styled-components";
+
+const StyledSection = styled.div`
+    width: 100%;
+    background-color: ${props => props.theme.background};
+`;
+
+const Icon = styled.div`
+    width: 14px;
+    height: 14px;
+    background-color: ${props => props.theme.loaders};
+`;
+
+const Name = styled.div`
+    width: 24px;
+    height: 24px;
+    background-color: ${props => props.theme.loaders};
+    margin-left: 10px;
+`;
+
+const MainLoader = styled.div`
+    background-color: ${props => props.theme.loaders};
+    width: 100%;
+    margin-left: 10px;
+    height: 13px;
+`;
+
+const FilterLoader = styled.div`
+    height: 30px;
+    background-color: ${props => props.theme.loaders};
+`;
+
+const SectionContent = styled.div`
+    display: flex;
+    align-items: baseline;
+    margin: 20px 0;
+`;
+
+const SectionWrapper = styled.div`
+    padding: 0px 20px;
+`;
+
+const SectionHeader = styled.h2`
+    color: ${props => props.theme.color};
+`;
+
+const StyledIframe = styled.iframe`
+    border: none;
+    height: 60px;
+    width: 100%;
+`;
+
+
+export {StyledSection, Icon, Name, MainLoader, FilterLoader, SectionContent, SectionHeader, SectionWrapper, StyledIframe}