import { Badge } from 'terra-text/package.json?dev-site-package';

import TextColors from './example/TextColors?dev-site-example';
import TextDisplays from './example/TextDisplays?dev-site-example';
import TextFontSizes from './example/TextFontSizes?dev-site-example';
import TextVariations from './example/TextVariations?dev-site-example';
import TextVisuallyHidden from './example/TextVisuallyHidden?dev-site-example';
import TextWeights from './example/TextWeights?dev-site-example';
import TextWordWrapped from './example/TextWordWrapped?dev-site-example';
import TextDate from './example/TextDate?dev-site-example';
import TextTime from './example/TextTime?dev-site-example';

import TextPropsTable from 'terra-text/lib/Text?dev-site-props-table';

<Badge />

# Terra Text

The font size, font weight, font family, and font color in terra components are set to defaults in terra-base which is then inherited into all components. 
Components can override these base styles as needed in their specific component CSS. In some cases, you may need text that differs from the base font styles, 
though, the text doesn't belong to a specific component.

In these cases, the text component may be helpful. Using terra-text, you can create text that differs from the base text styles by changing the font size, 
font weight, and color.

# Decorative text attributes

Decorative text attributes are attributes that do not add meaning to the content of a page. If the attribute is just decorative and does not convey any meaning, the text should not communicate anything else.

# Supportive Text Attributes

The text attribute is "Supportive" when the text attribute is paired with other text or imagery on the page that conveys the same information. Supportive text attributes should be considered the same as decorative, and no extra meaning should be applied.

# Meaningful Text Attributes

Meaningful text attributes are attributes that convey meaning and is not paired with other text or imagery on the page that conveys the meaning. When text attributes are meaningful there should be a way for the screen readers to convey so as to understand WHAT the text attribute means.

**Note:** Large font sizes should be used only for decorative text and not for headers. For text to be understood as a heading, the text must be programmatically set to a heading level in the code.

## Getting Started

- Install with [npmjs](https://www.npmjs.com):
  - `npm install terra-text`

<!-- AUTO-GENERATED-CONTENT:START Peer Dependencies -->
## Peer Dependencies

This component requires the following peer dependencies be installed in your app for the component to properly function.

| Peer Dependency | Version |
|-|-|
| react | ^16.8.5 |
| react-dom | ^16.8.5 |

<!-- AUTO-GENERATED-CONTENT:END -->

## Usage

```jsx
import Text from 'terra-text';
```

### Color Class

```css
:root {
  --my-app-text-attention-color: rgb(220, 20, 60);
  --my-app-text-success-color: rgb(46, 125, 50);
  --my-app-text-info-color: #304ffe;
  --my-app-text-default-color: #333;
}

:local {
  .default {
    color: var(--my-app-text-default-color, #333);
  }

  .attention {
    color: var(--my-app-text-attention-color, rgb(220, 20, 60));
  }

  .success {
    color: var(--my-app-text-success-color, rgb(46, 125, 50));
  }

  .info {
    color: var(--my-app-text-info-color, #304ffe);
  }
}
```

## Component Features
* [Cross-Browser Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support)
* [Responsive Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support)
* [Mobile Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support)

## Examples
<TextDisplays title="Displays" />
<TextFontSizes
  title="Font Sizes" 
  description="The font-size values represent the pixel values of our UX defined font-scale. Then the `Text` component will render these font-sizes with rem units."
/>
<TextColors
	title="Colors"
	description="By passing in a className, authors can manually set the text color of any '<Text />' component."
/>
<TextWeights title="Weight" />

The `isVisuallyHidden` prop can be used to hide the content visually, yet provide the content to screen readers.
More info on this approach can be found here: <Link to="http://a11yproject.com/posts/how-to-hide-content/">http://a11yproject.com/posts/how-to-hide-content/</Link>
<TextVisuallyHidden title="Visually Hidden" />
<TextVariations
	title="Variations"
	description="You can mix and match props on the `<Text />` component to create various text styles."
/>
<TextWordWrapped
	title="Word Wrapped"
	description="The `isWordWrapped` prop can be used to apply cross-browser word-wrapping styles."
/>

<TextDate
  title="Date Format"
  description="You can use `Terra-Text` for date formatting."
/>

<TextTime
  title="Time Format"
  description="You can use `Terra-Text` for time formatting."
/>

## Text Props
<TextPropsTable />