IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ASC.Web.Common: Headline: Added new type 'header', style changes by new design

Browse Source
This commit is contained in:
Andrey Savihin 2019-12-23 15:37:36 +03:00
parent 7b9d09c380
commit 7a7436e3c5
4 changed files with 27 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/ASC.Web.Common/src/components/Headline/Headline.js
View File

@ -17,7 +17,7 @@ Headline.propTypes = {
title: PropTypes.string,
truncate: PropTypes.bool,
isInline: PropTypes.bool,
type: PropTypes.oneOf(['menu', 'content']),
type: PropTypes.oneOf(['content', 'header', 'menu']),
};
Headline.defaultProps = {

2
web/ASC.Web.Common/src/components/Headline/Headline.stories.js
View File

@ -6,7 +6,7 @@ import Section from '../../../.storybook/decorators/section';
import withReadme from 'storybook-readme/with-readme';
import Readme from './README.md';
const type = ['content', 'menu'];
const type = ['content', 'header', 'menu'];
const levels = [1, 2, 3, 4, 5, 6];
storiesOf('Components|Heading', module)

8
web/ASC.Web.Common/src/components/Headline/README.md
View File

@ -14,6 +14,12 @@ import { Headline } from "asc-web-common";
</Headline>
```
```jsx
<Headline type="header" title="Some title">
Some text
</Headline>
```
```jsx
<Headline type="menu" title="Some title">
Some text
@ -44,4 +50,4 @@ const StyledText = styled(Headline)`
| `isInline` | `bool` | - | - | `false` | Sets the 'display: inline-block' property |
| `title` | `bool` | - | - | - | Title |
| `truncate` | `bool` | - | - | `false` | Disables word wrapping |
| `type` | `oneOf` | ✅ | `menu, content` | - | Sets the size of text: menu (27px) or content (21px) |
| `type` | `oneOf` | ✅ | `content, header, menu` | - | Sets the size of text: content (21px), header (28px) or menu (27px) |

31
web/ASC.Web.Common/src/components/Headline/StyledHeadline.js
View File

@ -1,18 +1,23 @@
import styled, { css } from 'styled-components';
import { Heading } from 'asc-web-components';
import styled from "styled-components";
import { Heading } from "asc-web-components";
const fontSize = css`
${props =>
(props.type === 'menu' && 27) ||
(props.type === 'content' && 21)
}
`;
const size = {
header: "28px",
menu: "27px",
content: "21px"
};
const weight = {
header: 600,
menu: "bold",
content: "bold"
};
const StyledHeading = styled(Heading)`
margin: 0;
line-height: 56px;
font-size: ${fontSize}px;
font-weight: 700;
margin: 0;
line-height: 56px;
font-size: ${props => size[props.type]};
font-weight: ${props => weight[props.type]};
`;
export default StyledHeading;
export default StyledHeading;