Web: Components: added Tab component and svg icon

web/ASC.Web.Components/src/components/icons/svg/index.js

@@ -141,6 +141,7 @@ import OrigRadiobuttonHoverCheckedIcon from './radiobutton.hover.checked.react.s
 
 import OrigToggleButtonCheckedIcon from './toggle.button.checked.react.svg';
 import OrigToggleButtonIcon from './toggle.button.react.svg';
+import OrigTabsIcon from './tabs.react.svg';
 
 export const AZSortingIcon = createStyledIcon(
   OrigAZSortingIcon,
@@ -698,4 +699,10 @@ export const ToggleButtonIcon = createStyledIcon(
   OrigToggleButtonIcon,
   'ToggleButtonIcon',
   "rect"
+);
+
+export const TabsIcon = createStyledIcon(
+  OrigTabsIcon,
+  'TabsIcon',
+  "rect"
 );

web/ASC.Web.Components/src/components/icons/svg/tabs.react.svg

@@ -0,0 +1,3 @@
+<svg width="80" height="32" viewBox="0 0 80 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="80" height="32" rx="16" fill="#265A8F"/>
+</svg>

web/ASC.Web.Components/src/components/tabs/index.js

@@ -0,0 +1,99 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styled, { css } from 'styled-components';
+import { Icons } from '../icons';
+
+import { getCssFromSvg } from '../icons/get-css-from-svg';
+import ReactDOMServer from 'react-dom/server';
+
+
+
+var tabsIcon/*, tabsIcon2*/;
+(function () { tabsIcon = getCssFromSvg(ReactDOMServer.renderToString(<Icons.TabsIcon />)); }());
+//tabsIcon2 = getCssFromSvg(ReactDOMServer.renderToString(<Icons.TabsIcon />)); 
+
+// Основной контейнер
+const TabsContainer = styled.div``;
+
+// Шапка
+const NavItem = styled.div`
+    position: relative;
+    box-shadow: 0px 5px 20px rgba(0,0,0,0.13);
+`;
+
+//Исправить!!!
+const hoverCss = css`
+  width: 80px;
+  height: 32px;
+  background-color: #F8F9F9;
+  border-radius: 16px;
+`;
+
+// Заголовки шапки
+const Label = styled.label`
+  margin:0;
+  min-width: 80px;
+  position: relative;
+  background-repeat: no-repeat;
+  p {text-align: center; margin-top: 6px;}
+  margin-right: 5px;
+  label {margin:0}
+
+  ${props => props.selected ?
+    `background-image: url("data:image/svg+xml,${tabsIcon}"); cursor: default;` :
+    `background-image: none;
+    &:hover{
+      cursor: pointer;
+      ${hoverCss}
+    }`
+  }
+`;
+
+// Контенn в зависимости от шапки
+const BodyContainer = styled.div``;
+
+
+class Tabs extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeTab: '0'
+    };
+  }
+
+  labelClick = (tab) => {
+    if (this.state.activeTab !== tab.id) {
+      this.setState({ activeTab: tab.id });
+      console.log('My update setState()');
+    }
+  };
+
+  render() {
+    //console.log(this.props.selected);
+
+    return (
+      <TabsContainer>
+        <NavItem>
+          {this.props.children.map((item) =>
+            <Label
+              selected={item.id === this.state.activeTab}
+              key={item.id}
+              onClick={() => {
+                this.labelClick(item);
+              }}>
+              {item.something_title}
+            </Label>
+          )}
+        </NavItem>
+        <BodyContainer> {this.props.children[this.state.activeTab].something_body} </BodyContainer>
+      </TabsContainer>
+    );
+  }
+}
+
+export default Tabs;
+
+Tabs.propTypes = {
+  children: PropTypes.object.isRequired
+};
+Tabs.defaultProps = {/*isChecked: false*/ };

web/ASC.Web.Components/src/index.js

@@ -39,3 +39,4 @@ export { default as RadioButtonGroup } from './components/radio-button-group'
 export { default as RadioButton } from './components/radio-button'
 export { default as TextArea } from './components/text-area'
 export { default as ToggleButton } from './components/toggle-button'
+export { default as Tabs } from './components/tabs'

web/ASC.Web.Storybook/stories/tabs/README.md

@@ -0,0 +1,19 @@
+# Scrollbar
+
+#### Description
+
+Scrollbar is used for displaying custom scroollbar
+
+#### Usage
+
+```js
+import { Scrollbar } from 'asc-web-components';
+
+<Scrollbar>Some content</Scrollbar>
+```
+
+#### Properties
+
+| Props      | Type        | Required | Values                                    | Default      | Description           |
+| ---------- | ----------- | :------: | ----------------------------------------- | ------------ | --------------------- |
+| `stype`    | `string`    |          | `smallWhite`, `smallBlack`, `preMediumBlack`, `mediumBlack` | `smallBlack` | Scroollbar style type |

web/ASC.Web.Storybook/stories/tabs/index.stories.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, boolean, text, select } from '@storybook/addon-knobs/react';
+import { action } from '@storybook/addon-actions';
+import withReadme from 'storybook-readme/with-readme';
+import Readme from './README.md';
+import { Tabs, Text } from 'asc-web-components';
+import Section from '../../.storybook/decorators/section';
+import { BooleanValue } from 'react-values';
+
+//<Text.Body tag="span">{text("Body text", "Try again later")}</Text.Body>
+
+
+const something_items = [
+    {
+        id: "0",
+        something_title: <Text.Body>{text("Title text", "Title1")} </Text.Body>,
+        something_body:
+            <div >
+                <div> <button>BUTTON</button> <button>BUTTON</button> <button>BUTTON</button> </div>
+                <div> <button>BUTTON</button> <button>BUTTON</button> <button>BUTTON</button> </div>
+                <div> <button>BUTTON</button> <button>BUTTON</button> <button>BUTTON</button> </div>
+            </div>
+    },
+    {
+        id: "1",
+        something_title: <Text.Body>{text("Title text2", "Title2")} </Text.Body>,
+        something_body:
+            <div >
+                <div> <label>LABEL</label> <label>LABEL</label> <label>LABEL</label> </div>
+                <div> <label>LABEL</label> <label>LABEL</label> <label>LABEL</label> </div>
+                <div> <label>LABEL</label> <label>LABEL</label> <label>LABEL</label> </div>
+            </div>
+    },
+    {
+        id: "2",
+        something_title: <Text.Body>{text("Title text3", "Title3")} </Text.Body>,
+        something_body:
+            <div>
+                <div> <input></input> <input></input> <input></input> </div>
+                <div> <input></input> <input></input> <input></input> </div>
+                <div> <input></input> <input></input> <input></input> </div>
+            </div>
+    },
+    {
+        id: "3",
+        something_title: <Text.Body>{text("Title text3", "Title3")} </Text.Body>,
+        something_body:
+            <div>
+                <div> <input></input> <input></input> <input></input> </div>
+                <div> <input></input> <input></input> <input></input> </div>
+                <div> <input></input> <input></input> <input></input> </div>
+            </div>
+    },
+    {
+        id: "4",
+        something_title: <Text.Body>{text("Title text3", "Title3")} </Text.Body>,
+        something_body:
+            <div>
+                <div> <input></input> <input></input> <input></input> </div>
+                <div> <input></input> <input></input> <input></input> </div>
+                <div> <input></input> <input></input> <input></input> </div>
+            </div>
+    }
+];
+/*
+const item = [{
+    id: "0",
+    something_title: <Text.Body>{text("Title text", "Title1")} </Text.Body>,
+    something_body:
+        <div >
+            <div> <button>BUTTON</button> <button>BUTTON</button> <button>BUTTON</button> </div>
+            <div> <button>BUTTON</button> <button>BUTTON</button> <button>BUTTON</button> </div>
+            <div> <button>BUTTON</button> <button>BUTTON</button> <button>BUTTON</button> </div>
+        </div>
+}];
+*/
+
+storiesOf('Components|Tabs', module)
+    .addDecorator(withKnobs)
+    .addDecorator(withReadme(Readme))
+    .add('base', () => {
+        return (
+            <BooleanValue>
+                    <Tabs>
+                        {something_items}
+                    </Tabs>
+            </BooleanValue>
+        );
+    });