IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
3a28b9b1ae
DocSpace-buildtools/web/ASC.Web.Common/src/components/Headline
History
Daniil Senkiv 4d8a8dfb4f Web.Common: Headline: fixed showing props as attributes
2020-01-16 16:42:12 +03:00
..
Headline.js Web.Common: Headline: fixed showing props as attributes 2020-01-16 16:42:12 +03:00
Headline.stories.js ASC.Web.Common: Headline: Added new type 'header', style changes by new design 2019-12-23 15:45:40 +03:00
Headline.test.js web: Common: Refactoring: Changed component according to accepted requirements 2019-12-20 11:38:37 +03:00
index.js web: Common: Refactoring: Changed component according to accepted requirements 2019-12-20 11:38:37 +03:00
README.md ASC.Web.Common: Headline: Added new type 'header', style changes by new design 2019-12-23 15:45:40 +03:00
StyledHeadline.js Web.Common: Headline: fixed showing props as attributes 2020-01-16 16:42:12 +03:00

README.md

Headline

Component that displays Heading text with custom styles

Usage

import { Headline } from "asc-web-common";

<Headline type="content" title="Some title" isInline>
  Some text
</Headline>

<Headline type="header" title="Some title">
  Some text
</Headline>

<Headline type="menu" title="Some title">
  Some text
</Headline>

If you need to override styles add forwardedAs instead of as

const StyledText = styled(Headline)`
  &:hover {
    border-bottom: 1px dotted;
  }
`;

<StyledText forwardedAs="span" title="Some title">
  Some text
</StyledText>

Properties

Props Type Required Values Default Description
color string - - #333333 Specifies the contentHeader color
isInline bool - - false Sets the 'display: inline-block' property
title bool - - - Title
truncate bool - - false Disables word wrapping
type oneOf ✅ content, header, menu - Sets the size of text: content (21px), header (28px) or menu (27px)