Skip to content

Commit

Permalink
Components: Integrate G2 Text component (#28475)
Browse files Browse the repository at this point in the history
* Components: Add Text

* Add easy comparison in story

* Remove most snapshot tests
  • Loading branch information
sarayourfriend authored Jan 28, 2021
1 parent 2301790 commit 63ee69e
Show file tree
Hide file tree
Showing 16 changed files with 1,360 additions and 6 deletions.
6 changes: 6 additions & 0 deletions docs/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -1223,6 +1223,12 @@
"markdown_source": "../packages/components/src/text-highlight/README.md",
"parent": "components"
},
{
"title": "Next",
"slug": "next",
"markdown_source": "../packages/components/src/text/next/README.md",
"parent": "components"
},
{
"title": "Text",
"slug": "text",
Expand Down
1 change: 1 addition & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions packages/components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@
"dom-scroll-into-view": "^1.2.1",
"downshift": "^6.0.15",
"gradient-parser": "^0.1.5",
"highlight-words-core": "^1.2.2",
"lodash": "^4.17.19",
"memize": "^1.1.0",
"moment": "^2.22.1",
Expand Down
6 changes: 1 addition & 5 deletions packages/components/src/__next/context/with-next.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,6 @@
* External dependencies
*/
import { contextConnect, useContextSystem } from '@wp-g2/components';
/**
* WordPress dependencies
*/
import { forwardRef } from '@wordpress/element';

export function withNext(
CurrentComponent = () => null,
Expand All @@ -31,5 +27,5 @@ export function withNext(
return contextConnect( WrappedComponent, namespace );
}

return forwardRef( CurrentComponent );
return CurrentComponent;
}
3 changes: 2 additions & 1 deletion packages/components/src/text/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import styled from '@emotion/styled';
* Internal dependencies
*/
import { text } from './styles/text-mixins';
import { withNextComponent } from './next';

const Text = styled.p(
`
Expand All @@ -16,4 +17,4 @@ const Text = styled.p(
text
);

export default Text;
export default withNextComponent( Text );
235 changes: 235 additions & 0 deletions packages/components/src/text/next/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,235 @@
# Text

`Text` is a core component that renders text in the library, using the library's typography system.

## Usage

`Text` can be used to render any text-content, like an HTML `p` or `span`.

```jsx live
import { Text } from '@wp-g2/components';

function Example() {
return <Text>Where the north wind meets the sea</Text>;
}
```

## Props

##### adjustLineHeightForInnerControls

**Type**: `boolean`,`"large"`,`"medium"`,`"small"`,`"xSmall"`

Automatically calculate the appropriate line-height value for contents that render text and Control elements (e.g. `TextInput`).

```jsx live
import { Text, TextInput } from '@wp-g2/components';

function Example() {
return (
<Text adjustLineHeightForInnerControls>
Where the north wind meets the <TextInput value="sea..." />
</Text>
);
}
```

##### align

**Type**: `CSS['textAlign']`

Adjusts the text alignment.

```jsx live
import { Text } from '@wp-g2/components';

function Example() {
return (
<Text align="center" isBlock>
Where the north wind meets the sea...
</Text>
);
}
```

##### color

**Type**: `CSS['color']`

Adjusts the text color.

##### display

**Type**: `CSS['display']`

Adjusts the CSS display.

##### ellipsis

**Type**: `string`

The ellipsis string when `truncate` is set.

##### ellipsizeMode

**Type**: `"auto"`,`"head"`,`"tail"`,`"middle"`

Determines where to truncate. For example, we can truncate text right in the middle. To do this, we need to set `ellipsizeMode` to `middle` and a text `limit`.

- `auto`: Trims content at the end automatically without a `limit`.
- `head`: Trims content at the beginning. Requires a `limit`.
- `middle`: Trims content in the middle. Requires a `limit`.
- `tail`: Trims content at the end. Requires a `limit`.

##### highlightCaseSensitive

**Type**: `boolean`

Escape characters in `highlightWords` which are meaningful in regular expressions.

##### highlightEscape

**Type**: `boolean`

Determines if `highlightWords` should be case sensitive.

##### highlightSanitize

**Type**: `boolean`

Array of search words. String search terms are automatically cast to RegExps unless `highlightEscape` is true.

##### highlightWords

**Type**: `any[]`

Letters or words within `Text` can be highlighted using `highlightWords`.

```jsx live
import { Text } from '@wp-g2/components';

function Example() {
return (
<Text highlightWords={['the']}>
Where the north wind meets the sea, there's a river full of memory.
Sleep, my darling, safe and sound, for in this river all is found.
In her waters, deep and true, lay the answers and a path for you.
Dive down deep into her sound, but not too far or you'll be drowned
</Text>
);
}
```

##### isBlock

**Type**: `boolean`

Sets `Text` to have `display: block`.

##### isDestructive

**Type**: `boolean`

Renders a destructive color.

##### limit

**Type**: `number`

Determines the max characters when `truncate` is set.

##### lineHeight

**Type**: `CSS['lineHeight']`

Adjusts all text line-height based on the typography system.

##### numberOfLines

**Type**: `number`

Clamps the text content to the specifiec `numberOfLines`, adding the `ellipsis` at the end.

##### optimizeReadabilityFor

**Type**: `CSS['color']`

The `Text` color can be adapted to a background color for optimal readability. `optimizeReadabilityFor` can accept CSS variables, in addition to standard CSS color values (e.g. Hex, RGB, HSL, etc...).

```jsx live
import { Text, View } from '@wp-g2/components';

function Example() {
const backgroundColor = 'blue';

return (
<View css={{ backgroundColor }}>
<Text optimizeReadabilityFor={backgroundColor}>
Where the north wind meets the sea, there's a river full of
memory.
</Text>
</View>
);
}
```
##### size
**Type**: `CSS['fontSize']`,`TextSize`
Adjusts text size based on the typography system. `Text` can render a wide range of font sizes, which are automatically calculated and adapted to the typography system. The `size` value can be a system preset, a `number`, or a custom unit value (`string`) such as `30em`.
```jsx live
import { Text } from '@wp-g2/components';
function Example() {
return <Text size="largeTitle">Where the north wind meets the sea...</Text>;
}
```
##### truncate
**Type**: `boolean`
Enables text truncation. When `truncate` is set,we are able to truncate the long text in a variety of ways.
```jsx live
import { Text } from '@wp-g2/components';
function Example() {
return (
<Text truncate>
Where the north wind meets the sea, there's a river full of memory.
Sleep, my darling, safe and sound, for in this river all is found.
In her waters, deep and true, lay the answers and a path for you.
Dive down deep into her sound, but not too far or you'll be drowned
</Text>
);
}
```
##### upperCase
**Type**: `boolean`
Uppercases the text content.
##### variant
**Type**: `"muted"`
Adjusts style variation of the text.
```jsx live
import { Text } from '@wp-g2/components';
function Example() {
return <Text variant="muted">Where the north wind meets the sea...</Text>;
}
```
##### weight
**Type**: `CSS['fontWeight']`,`TextWeight`
Adjusts font-weight of the text.
21 changes: 21 additions & 0 deletions packages/components/src/text/next/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/**
* Internal dependencies
*/
import { __unstableWithNext as withNext } from '../../__next/context';
import NextText from './text';
import { text } from '../styles/text-mixins';

const Text = process.env.COMPONENT_SYSTEM_PHASE === 1 ? NextText : undefined;

export const adapter = ( { as, variant, ...restProps } ) => ( {
// as has not changed
as,
// luckily `text` just returns an emotion CSS object, so we can pass the styles from that directly to the handy `css` prop
css: text( { variant } ).styles,
// mostly className
...restProps,
} );

export function withNextComponent( Current ) {
return withNext( Current, Text, 'WPComponentsText', adapter );
}
Loading

0 comments on commit 63ee69e

Please sign in to comment.