web: components: changed PageLayout headers

This commit is contained in:
Andrey Savihin 2019-07-19 16:41:11 +03:00
parent 7dfc76b077
commit 130ddabef6
3 changed files with 13 additions and 8 deletions

View File

@ -43,9 +43,6 @@ const StyledArticle = styled.article`
const StyledArticleHeader = styled.div`
border-bottom: 1px solid #ECEEF1;
font-weight: bold;
font-size: 27px;
line-height: 56px;
height: 56px;
@media ${device.tablet} {
@ -95,9 +92,6 @@ const StyledSection = styled.section`
const StyledSectionHeader = styled.div`
border-bottom: 1px solid #ECEEF1;
font-weight: bold;
font-size: 21px;
line-height: 56px;
height: 56px;
`;

View File

@ -13,6 +13,7 @@ export default function createStyledHeader(headlineType) {
const StyledHeadline = styled.h1`
font-family: 'Open Sans',sans-serif,Arial;
margin: 0;
line-height: 56px;
font-size: ${fontSize}px;
font-weight: 700;
color: ${props => props.isDisabled == true ? '#ECEEF1' : '#333333'};

View File

@ -1,6 +1,7 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import styled from '@emotion/styled'
import { Layout, PageLayout, Text, IconButton, ContextMenuButton } from 'asc-web-components'
const currentUser = {
@ -86,15 +87,24 @@ const currentModuleId = '44444444-4444-4444-4444-444444444444';
const onLogoClick = (e) => {action('Logo Clicked')(e)};
const HeaderContent = styled.div`
display: flex;
align-items: center;
& > * {
margin-right: 8px !important;
}
`;
const asideContent = <p style={{padding: 40}}>Aside Content</p>;
const articleHeaderContent = <Text.MenuHeader>Article Header</Text.MenuHeader>;
const articleBodyContent = <p style={{padding: 40}}>Article Content</p>;
const sectionHeaderContent = <>
const sectionHeaderContent = <HeaderContent>
<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')}]} />
</>;
</HeaderContent>;
const sectionBodyContent = <p style={{padding: 40}}>Section Content</p>;
storiesOf('Components|Layout', module)