diff --git a/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Default-dark-colorblind-linux.png
new file mode 100644
index 00000000000..229b32ed177
Binary files /dev/null and b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Default-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Default-dark-dimmed-linux.png
new file mode 100644
index 00000000000..cc1759f6285
Binary files /dev/null and b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Default-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Default-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..5744c5d8837
Binary files /dev/null and b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Default-dark-linux.png b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Default-dark-linux.png
new file mode 100644
index 00000000000..efc61f7680f
Binary files /dev/null and b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Default-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Default-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..229b32ed177
Binary files /dev/null and b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Default-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Default-light-colorblind-linux.png b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Default-light-colorblind-linux.png
new file mode 100644
index 00000000000..6c4d519f029
Binary files /dev/null and b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Default-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Default-light-high-contrast-linux.png
new file mode 100644
index 00000000000..276f325d57a
Binary files /dev/null and b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Default-light-linux.png b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Default-light-linux.png
new file mode 100644
index 00000000000..3d347d677ff
Binary files /dev/null and b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Default-light-linux.png differ
diff --git a/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Default-light-tritanopia-linux.png
new file mode 100644
index 00000000000..6c4d519f029
Binary files /dev/null and b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Default-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Playground-dark-colorblind-linux.png b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Playground-dark-colorblind-linux.png
new file mode 100644
index 00000000000..e7489cbf1f3
Binary files /dev/null and b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Playground-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Playground-dark-dimmed-linux.png b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Playground-dark-dimmed-linux.png
new file mode 100644
index 00000000000..b104b6fb607
Binary files /dev/null and b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Playground-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Playground-dark-high-contrast-linux.png b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Playground-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..b1448afa8ad
Binary files /dev/null and b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Playground-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Playground-dark-linux.png b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Playground-dark-linux.png
new file mode 100644
index 00000000000..cf61e376458
Binary files /dev/null and b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Playground-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Playground-dark-tritanopia-linux.png b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Playground-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..e7489cbf1f3
Binary files /dev/null and b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Playground-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Playground-light-colorblind-linux.png b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Playground-light-colorblind-linux.png
new file mode 100644
index 00000000000..6687bd8ce30
Binary files /dev/null and b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Playground-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Playground-light-high-contrast-linux.png b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Playground-light-high-contrast-linux.png
new file mode 100644
index 00000000000..eb914d84f4b
Binary files /dev/null and b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Playground-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Playground-light-linux.png b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Playground-light-linux.png
new file mode 100644
index 00000000000..0248fe6dd3e
Binary files /dev/null and b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Playground-light-linux.png differ
diff --git a/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Playground-light-tritanopia-linux.png b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Playground-light-tritanopia-linux.png
new file mode 100644
index 00000000000..6687bd8ce30
Binary files /dev/null and b/.playwright/snapshots/components/Text.test.ts-snapshots/Text-Playground-light-tritanopia-linux.png differ
diff --git a/docs/content/Text.mdx b/docs/content/Text.mdx
index 2374857d885..9e490c48a61 100644
--- a/docs/content/Text.mdx
+++ b/docs/content/Text.mdx
@@ -5,7 +5,7 @@ a11yReviewed: true
status: Alpha
---
-import data from '../../src/Text.docs.json'
+import data from '../../src/Text/Text.docs.json'
The Text component is a wrapper component that will apply typography styles to the text inside.
diff --git a/e2e/components/Text.test.ts b/e2e/components/Text.test.ts
new file mode 100644
index 00000000000..952eb5f17bf
--- /dev/null
+++ b/e2e/components/Text.test.ts
@@ -0,0 +1,61 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+test.describe('Text', () => {
+ test.describe('Default', () => {
+ for (const theme of themes) {
+ test.describe(theme, () => {
+ test('default @vrt', async ({page}) => {
+ await visit(page, {
+ id: 'components-text--default',
+ globals: {
+ colorScheme: theme,
+ },
+ })
+
+ // Default state
+ expect(await page.screenshot()).toMatchSnapshot(`Text.Default.${theme}.png`)
+ })
+
+ test('axe @aat', async ({page}) => {
+ await visit(page, {
+ id: 'components-text--default',
+ globals: {
+ colorScheme: theme,
+ },
+ })
+ await expect(page).toHaveNoViolations()
+ })
+ })
+ }
+ })
+
+ test.describe('Playground', () => {
+ for (const theme of themes) {
+ test.describe(theme, () => {
+ test('default @vrt', async ({page}) => {
+ await visit(page, {
+ id: 'components-text--playground',
+ globals: {
+ colorScheme: theme,
+ },
+ })
+
+ // Default state
+ expect(await page.screenshot()).toMatchSnapshot(`Text.Playground.${theme}.png`)
+ })
+
+ test('axe @aat', async ({page}) => {
+ await visit(page, {
+ id: 'components-text--playground',
+ globals: {
+ colorScheme: theme,
+ },
+ })
+ await expect(page).toHaveNoViolations()
+ })
+ })
+ }
+ })
+})
diff --git a/generated/components.json b/generated/components.json
index 5b0b4a5f931..2ee6ec2bbb0 100644
--- a/generated/components.json
+++ b/generated/components.json
@@ -210,25 +210,6 @@
],
"subcomponents": []
},
- "text": {
- "id": "text",
- "name": "Text",
- "status": "alpha",
- "a11yReviewed": true,
- "stories": [],
- "props": [
- {
- "name": "as",
- "defaultValue": "'span'",
- "type": "React.ElementType"
- },
- {
- "name": "sx",
- "type": "SystemStyleObject"
- }
- ],
- "subcomponents": []
- },
"tooltip": {
"id": "tooltip",
"name": "Tooltip",
@@ -4070,6 +4051,30 @@
}
]
},
+ "text": {
+ "id": "text",
+ "name": "Text",
+ "status": "alpha",
+ "a11yReviewed": true,
+ "stories": [
+ {
+ "id": "components-text--default",
+ "code": "() => Default Text"
+ }
+ ],
+ "props": [
+ {
+ "name": "as",
+ "defaultValue": "'span'",
+ "type": "React.ElementType"
+ },
+ {
+ "name": "sx",
+ "type": "SystemStyleObject"
+ }
+ ],
+ "subcomponents": []
+ },
"text_input": {
"id": "text_input",
"name": "TextInput",
diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js
index 0aefdba82f2..a2e9245f513 100644
--- a/script/generate-e2e-tests.js
+++ b/script/generate-e2e-tests.js
@@ -1055,6 +1055,21 @@ const components = new Map([
],
},
],
+ [
+ 'Text',
+ {
+ stories: [
+ {
+ id: 'components-text--default',
+ name: 'Default',
+ },
+ {
+ id: 'components-text--playground',
+ name: 'Playground',
+ },
+ ],
+ },
+ ],
[
'Textarea',
{
diff --git a/src/Text.docs.json b/src/Text/Text.docs.json
similarity index 100%
rename from src/Text.docs.json
rename to src/Text/Text.docs.json
diff --git a/src/Text/Text.stories.tsx b/src/Text/Text.stories.tsx
new file mode 100644
index 00000000000..41f7a1083c8
--- /dev/null
+++ b/src/Text/Text.stories.tsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import {ComponentStory, Meta} from '@storybook/react'
+import Text from './Text'
+
+export default {
+ title: 'Components/Text',
+ component: Text,
+} as Meta
+
+export const Default = () => Default Text
+
+export const Playground: ComponentStory = args => {args.text}
+
+Playground.args = {
+ text: 'Playground',
+}
+
+Playground.argTypes = {
+ text: {
+ type: 'string',
+ },
+ sx: {
+ controls: false,
+ table: {
+ disable: true,
+ },
+ },
+ theme: {
+ controls: false,
+ table: {
+ disable: true,
+ },
+ },
+ ref: {
+ controls: false,
+ table: {
+ disable: true,
+ },
+ },
+ as: {
+ controls: false,
+ table: {
+ disable: true,
+ },
+ },
+ forwardedAs: {
+ controls: false,
+ table: {
+ disable: true,
+ },
+ },
+}
diff --git a/src/__tests__/Text.test.tsx b/src/Text/Text.test.tsx
similarity index 100%
rename from src/__tests__/Text.test.tsx
rename to src/Text/Text.test.tsx
diff --git a/src/Text.tsx b/src/Text/Text.tsx
similarity index 73%
rename from src/Text.tsx
rename to src/Text/Text.tsx
index 4ee4f7959be..6ff501ce4ae 100644
--- a/src/Text.tsx
+++ b/src/Text/Text.tsx
@@ -1,7 +1,7 @@
import styled from 'styled-components'
-import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
+import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from '../constants'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
const Text = styled.span`
${TYPOGRAPHY};
diff --git a/src/__tests__/__snapshots__/Text.test.tsx.snap b/src/Text/__snapshots__/Text.test.tsx.snap
similarity index 100%
rename from src/__tests__/__snapshots__/Text.test.tsx.snap
rename to src/Text/__snapshots__/Text.test.tsx.snap
diff --git a/src/Text/index.ts b/src/Text/index.ts
new file mode 100644
index 00000000000..e92da1782f9
--- /dev/null
+++ b/src/Text/index.ts
@@ -0,0 +1 @@
+export {default, TextProps} from './Text'