Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
@commercetools-uikit/text
Advanced tools
The Text component implements the typography elements such as headings, paragraphs, etc.
The Text
component implements the typography elements such as headings, paragraphs, etc.
<Text.Headline>
Wraps the given text in the given HTML header size
.
import Text from '@commercetools-uikit/text';
<Text.Headline as="h1">{'The title'}</Text.Headline>;
Props | Type | Required | Values | Default | Description |
---|---|---|---|---|---|
as | String | ✅ | ['h1', 'h2', 'h3'] | - | - |
children | PropTypes.node | ✅ (*) | - | - | - |
intlMessage | intl message | ✅ (*) | - | - | An intl message object that will be rendered with FormattedMessage |
id | String | - | - | - | Used as HTML id property |
title | String | - | - | - | Text to show in a tooltip on hover over the element |
truncate | Bool | - | - | false | Option for truncate content in case the screen has small width |
*
:children
is required only ifintlMessage
is not provided
The component further forwards all data-
attributes to the underlying component.
Title of pages.
<Text.Subheadline>
Wraps the given text in the given HTML header size
.
import Text from '@commercetools-uikit/text';
<Text.Subheadline as="h4">{'The subtitle'}</Text.Subheadline>;
Props | Type | Required | Values | Default | |
---|---|---|---|---|---|
as | String | ✅ | ['h4', 'h5'] | - | |
id | String | - | - | - | Used as HTML id property |
isBold | Boolean | - | - | false | |
tone | String | - | ['primary', 'secondary', 'information', 'positive', 'negative'] | - | |
children | PropTypes.node | ✅ (*) | - | - | |
intlMessage | intl message | ✅ (*) | - | - | An intl message object that will be rendered with FormattedMessage |
title | String | - | - | - | |
truncate | Bool | - | - | false |
*
:children
is required only ifintlMessage
is not provided
The component further forwards all data-
attributes to the underlying component.
Subtitle of pages.
<Text.Wrap>
Wraps the given text in its container. And for long text, text will be wrapped to new line.
import Text from '@commercetools-uikit/text';
<Text.Wrap>{'Sooo long text'}</Text.Wrap>;
When we render value that may be vey long, and we prefer to wrap text to new line after it exceeds its wrapper's width.
<Text.Body>
Wraps the given text in a <p>
element, for normal content.
import Text from '@commercetools-uikit/text';
<Text.Body>{'This is a content'}</Text.Body>;
Props | Type | Required | Values | Default | |
---|---|---|---|---|---|
as | String | - | ['p', 'span'] | - | |
id | String | - | - | - | Used as HTML id property |
isBold | Boolean | - | - | false | |
isItalic | Boolean | - | - | false | |
isStrikethrough | Boolean | - | - | false | |
tone | String | - | ['primary', 'secondary', 'information', 'positive', 'negative', 'inverted'] | - | |
children | PropTypes.node | ✅ (*) | - | - | |
intlMessage | intl message | ✅ (*) | - | - | An intl message object that will be rendered with FormattedMessage |
title | String | - | - | - | |
truncate | Bool | - | - | false |
*
:children
is required only ifintlMessage
is not provided
The component further forwards all data-
attributes to the underlying component.
Content text in general.
<Text.Detail>
Wraps the given text in a <small>
semantic tag. It accepts a tone
prop to
properly style the text.
import Text from '@commercetools-uikit/text';
<Text.Detail>{'This would be something small'}</Text.Detail>
<Text.Detail tone="secondary">{'This would be something small with the secondary tone applied'}</Text.Detail>
Props | Type | Required | Values | Default | |
---|---|---|---|---|---|
as | string | - | ['small', 'span'] [^] | false | |
id | String | - | - | - | Used as HTML id property |
isBold | Boolean | - | - | false | |
isItalic | Boolean | - | - | false | |
isStrikethrough | Boolean | - | - | false | |
tone | String | - | ['primary', 'secondary', 'information', 'positive', 'negative', 'warning''] | - | |
children | PropTypes.node | ✅ (*) | - | - | |
intlMessage | intl message | ✅ (*) | - | - | An intl message object that will be rendered with FormattedMessage |
title | String | - | - | - | |
truncate | Bool | - | - | false | |
aria-labelledby | String | - | - | - | HTML ID of an element containing the label for the text rendered in this component |
*
:children
is required only ifintlMessage
is not provided.[^]
: Useas
prop to render an inline element.
The component further forwards all data-
attributes to the underlying component.
Details text of form boxes.
FAQs
The Text component implements the typography elements such as headings, paragraphs, etc.
The npm package @commercetools-uikit/text receives a total of 10,619 weekly downloads. As such, @commercetools-uikit/text popularity was classified as popular.
We found that @commercetools-uikit/text demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.