web: components: changed PageLayout headers

This commit is contained in:
Andrey Savihin 2019-07-19 14:58:01 +03:00
parent a871d3007f
commit 2f90aa7a27
2 changed files with 16 additions and 9 deletions

View File

@ -43,10 +43,9 @@ const StyledArticle = styled.article`
const StyledArticleHeader = styled.div`
border-bottom: 1px solid #ECEEF1;
font-weight: bold;
font-size: 27px;
line-height: 56px;
height: 56px;
display: flex;
align-items: center;
@media ${device.tablet} {
display: ${props => props.visible ? 'block' : 'none'};
@ -95,10 +94,13 @@ const StyledSection = styled.section`
const StyledSectionHeader = styled.div`
border-bottom: 1px solid #ECEEF1;
font-weight: bold;
font-size: 21px;
line-height: 56px;
height: 56px;
display: flex;
align-items: center;
& > * {
margin-right: 8px;
}
`;
const StyledSectionBody = styled.div`

View File

@ -1,7 +1,7 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { Layout, PageLayout } from 'asc-web-components'
import { Layout, PageLayout, Text, IconButton, ContextMenuButton } from 'asc-web-components'
const currentUser = {
id: '00000000-0000-0000-0000-000000000000',
@ -87,9 +87,14 @@ const currentModuleId = '44444444-4444-4444-4444-444444444444';
const onLogoClick = (e) => {action('Logo Clicked')(e)};
const asideContent = <p style={{padding: 40}}>Aside Content</p>;
const articleHeaderContent = "Article Header";
const articleHeaderContent = <Text.MenuHeader>Article Header</Text.MenuHeader>;
const articleBodyContent = <p style={{padding: 40}}>Article Content</p>;
const sectionHeaderContent = "Section Header";
const sectionHeaderContent = <>
<IconButton size='16'onClick={() => alert('ProjectDocumentsUpIcon Clicked')} iconName={"ProjectDocumentsUpIcon"} />
<Text.ContentHeader>Section Header</Text.ContentHeader>
<IconButton size='16' onClick={() => alert('PlusIcon Clicked')} iconName={"PlusIcon"} />
<ContextMenuButton title="Actions" getData={() => [{key: 'key', label: 'label', onClick: () => alert('label Clicked')}]} />
</>;
const sectionBodyContent = <p style={{padding: 40}}>Section Content</p>;
storiesOf('Components|Layout', module)