Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@commercetools-uikit/text

Package Overview
Dependencies
Maintainers
3
Versions
835
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@commercetools-uikit/text

The Text component implements the typography elements such as headings, paragraphs, etc.

  • 0.0.0-canary-20240805095513
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
11K
decreased by-9.17%
Maintainers
3
Weekly downloads
 
Created
Source

Typography: Text

Description

The Text component implements the typography elements such as headings, paragraphs, etc.

<Text.Headline>

Wraps the given text in the given HTML header size.

Usage

import Text from '@commercetools-uikit/text';

<Text.Headline as="h1">{'The title'}</Text.Headline>;

Properties

PropsTypeRequiredValuesDefaultDescription
asString['h1', 'h2', 'h3']--
childrenPropTypes.node✅ (*)---
intlMessageintl message✅ (*)--An intl message object that will be rendered with FormattedMessage
idString---Used as HTML id property
titleString---Text to show in a tooltip on hover over the element
truncateBool--falseOption for truncate content in case the screen has small width
nowrapBool--falseThe content in the element will not be wrapped to a new line unless explicitly specified.

*: children is required only if intlMessage is not provided

The component further forwards all data- attributes to the underlying component.

Where to use

Title of pages.

<Text.Subheadline>

Wraps the given text in the given HTML header size.

Usage

import Text from '@commercetools-uikit/text';

<Text.Subheadline as="h4">{'The subtitle'}</Text.Subheadline>;

Properties

PropsTypeRequiredValuesDefault
asString['h4', 'h5']-
idString---Used as HTML id property
isBoldBoolean--false
toneString-['primary', 'secondary', 'tertiary', 'information', 'positive', 'negative']-
childrenPropTypes.node✅ (*)--
intlMessageintl message✅ (*)--An intl message object that will be rendered with FormattedMessage
titleString---
truncateBool--false
nowrapBool--falseThe content in the element will not be wrapped to a new line unless explicitly specified.

*: children is required only if intlMessage is not provided

The component further forwards all data- attributes to the underlying component.

Where to use

Subtitle of pages.

<Text.Wrap>

Wraps the given text in its container. And for long text, text will be wrapped to new line.

Usage

import Text from '@commercetools-uikit/text';

<Text.Wrap>{'Sooo long text'}</Text.Wrap>;

Where to use

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.

Usage

import Text from '@commercetools-uikit/text';

<Text.Body>{'This is a content'}</Text.Body>;

Properties

PropsTypeRequiredValuesDefault
asString-['p', 'span']-
idString---Used as HTML id property
isBoldBoolean--falseThis prop is being deprecated in favor of the fontWeight prop
fontWeightString-['regular', 'medium', 'bold']regular
isItalicBoolean--false
isStrikethroughBoolean--false
toneString-['primary', 'secondary', 'tertiary', 'information', 'positive', 'negative', 'inverted']-
childrenPropTypes.node✅ (*)--
intlMessageintl message✅ (*)--An intl message object that will be rendered with FormattedMessage
titleString---
truncateBool--false
nowrapBool--falseThe content in the element will not be wrapped to a new line unless explicitly specified.

*: children is required only if intlMessage is not provided

The component further forwards all data- attributes to the underlying component.

Where to use

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.

Usage

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>

Properties

PropsTypeRequiredValuesDefault
asstring-['small', 'span'] [^]false
idString---Used as HTML id property
isBoldBoolean--falseThis prop is being deprecated in favor of the fontWeight prop
fontWeightString-['regular', 'medium', 'bold']regular
isItalicBoolean--false
isStrikethroughBoolean--false
toneString-['primary', 'secondary', 'tertiary', 'information', 'positive', 'negative', 'warning'']-
childrenPropTypes.node✅ (*)--
intlMessageintl message✅ (*)--An intl message object that will be rendered with FormattedMessage
titleString---
truncateBool--false
aria-labelledbyString---HTML ID of an element containing the label for the text rendered in this component
nowrapBool--falseThe content in the element will not be wrapped to a new line unless explicitly specified.

*: children is required only if intlMessage is not provided. [^]: Use as prop to render an inline element.

The component further forwards all data- attributes to the underlying component.

Where to use

Details text of form boxes.

<Text.Caption>

Wraps the text in the smallest available font size and accepts tone and fontWeight props.

Usage

import Text from '@commercetools-uikit/text';

<Text.Caption as="h4">{'The caption'}</Text.Caption>;

Properties

PropsTypeRequiredValuesDefaultDescription
idString---Used as HTML id property
isItalicBoolean--false
isStrikethroughBoolean--false
toneString-['primary', 'secondary','tertiary', 'information', 'positive','negative', 'critical', 'inherit','warning','inverted']
fontWeightString-['regular', 'medium', 'bold']regular
truncateBool--falseOption for truncate content in case the screen has small width
nowrapBool--falseThe content in the element will not be wrapped to a new line unless explicitly specified.
aria-labelledbyString---HTML ID of an element containing the label for the text rendered in this component
titleString---Text to show in a tooltip on hover over the element
childrenPropTypes.node✅ (*)---
intlMessageintl message✅ (*)--An intl message object that will be rendered with FormattedMessage

*: children is required only if intlMessage is not provided

Where to use

Text.Caption is the smallest available font size in our design system. From the visual hierarchy perspective, it sits on the last spot of the importance scale and therefor should be used sparingly only in specific situations:

  • The text does not have high importance and is not crucial to complete a task.
  • In an information dense UI where using a bigger font size would harm the visual hierarchy of the page.
  • For small descriptive labels, or tooltips, that provide helpful additional information in a given context.
  • Text.Caption should not be used in text paragraphs longer than 1-2 sentences.

Keywords

FAQs

Package last updated on 05 Aug 2024

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc