From 3d9ae4e0f87c2099599c30d92f05e6044b05a622 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Fri, 30 Apr 2021 10:59:49 +0200
Subject: [PATCH] Fix integration issues

---
 packages/components/src/box-control/index.js     |  2 +-
 packages/components/src/flex/flex/component.js   |  7 ++++++-
 packages/components/src/flex/stories/index.js    |  5 ++---
 packages/components/src/flex/test/index.js       |  4 +---
 packages/components/src/index.js                 |  4 ++--
 .../input-control/styles/input-control-styles.js |  2 +-
 .../src/navigation/styles/navigation-styles.js   |  2 +-
 .../styles/resize-tooltip.styles.js              |  2 +-
 packages/components/src/text/README.md           | 16 ++++++++--------
 packages/components/src/text/component.js        |  2 +-
 packages/components/src/text/index.js            |  2 +-
 packages/components/src/text/stories/index.js    |  2 +-
 .../{text.js.snap => index.js.snap}              |  0
 .../src/text/test/{text.js => index.js}          |  2 +-
 packages/components/src/truncate/README.md       |  4 ++--
 packages/components/src/truncate/component.js    |  2 +-
 packages/components/src/truncate/index.js        |  2 +-
 .../src/truncate/test/{truncate.js => index.js}  |  2 +-
 .../src/ui/__storybook-utils/example-grid.js     |  2 +-
 packages/components/src/ui/card/stories/index.js |  2 +-
 .../src/ui/form-group/stories/index.js           |  2 +-
 .../components/src/ui/surface/stories/index.js   |  2 +-
 .../components/src/ui/tooltip/stories/index.js   |  2 +-
 packages/components/src/ui/tooltip/test/index.js |  2 +-
 24 files changed, 38 insertions(+), 36 deletions(-)
 rename packages/components/src/text/test/__snapshots__/{text.js.snap => index.js.snap} (100%)
 rename packages/components/src/text/test/{text.js => index.js} (99%)
 rename packages/components/src/truncate/test/{truncate.js => index.js} (97%)

diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index 9421792b56471..21bf8314270ba 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -18,7 +18,7 @@ import { FlexItem, FlexBlock } from '../flex';
 import AllInputControl from './all-input-control';
 import InputControls from './input-controls';
 import BoxControlIcon from './icon';
-import Text from '../text';
+import { Text } from '../text';
 import LinkedButton from './linked-button';
 import Visualizer from './visualizer';
 import {
diff --git a/packages/components/src/flex/flex/component.js b/packages/components/src/flex/flex/component.js
index 21e8ff24b0816..310b85c53369b 100644
--- a/packages/components/src/flex/flex/component.js
+++ b/packages/components/src/flex/flex/component.js
@@ -33,7 +33,12 @@ function Flex( props, forwardedRef ) {
  *
  * @example
  * ```jsx
- * import { Flex, FlexItem, FlexBlock, Text } from `@wordpress/components/ui`;
+ * import {
+ * 	__experimentalFlex as Flex,
+ * 	__experimentalFlexBlock as FlexBlock,
+ * 	__experimentalFlexItem as FlexItem,
+ * 	__experimentalText as Text
+ * } from `@wordpress/components`;
  *
  * function Example() {
  * 	return (
diff --git a/packages/components/src/flex/stories/index.js b/packages/components/src/flex/stories/index.js
index a1b27e8b8a265..c5860db4c3ee3 100644
--- a/packages/components/src/flex/stories/index.js
+++ b/packages/components/src/flex/stories/index.js
@@ -1,9 +1,8 @@
 /**
  * Internal dependencies
  */
-import Flex from '../flex';
-import FlexItem from '../flex-item';
-import { View } from '../../view';
+import { Flex, FlexItem } from '../';
+import { View } from '../../ui/view';
 
 export default {
 	component: Flex,
diff --git a/packages/components/src/flex/test/index.js b/packages/components/src/flex/test/index.js
index d20b383cbb883..a4ce8fb8ef141 100644
--- a/packages/components/src/flex/test/index.js
+++ b/packages/components/src/flex/test/index.js
@@ -7,9 +7,7 @@ import { render } from '@testing-library/react';
  * Internal dependencies
  */
 import { View } from '../../ui/view';
-import Flex from '../flex';
-import FlexItem from '../flex-item';
-import FlexBlock from '../flex-block';
+import { Flex, FlexBlock, FlexItem } from '../';
 
 describe( 'props', () => {
 	let base;
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index d802378e1e4e4..bed734fbd31bf 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -102,7 +102,7 @@ export { default as Snackbar } from './snackbar';
 export { default as SnackbarList } from './snackbar/list';
 export { default as Spinner } from './spinner';
 export { default as TabPanel } from './tab-panel';
-export { default as __experimentalText } from './text';
+export { Text as __experimentalText } from './text';
 export { default as TextControl } from './text-control';
 export { default as TextareaControl } from './textarea-control';
 export { default as TextHighlight } from './text-highlight';
@@ -121,7 +121,7 @@ export {
 	TreeGridItem as __experimentalTreeGridItem,
 } from './tree-grid';
 export { default as TreeSelect } from './tree-select';
-export { default as __experimentalTruncate } from './truncate';
+export { Truncate as __experimentalTruncate } from './truncate';
 export { default as __experimentalUnitControl } from './unit-control';
 export { default as VisuallyHidden } from './visually-hidden';
 export { default as IsolatedEventContainer } from './isolated-event-container';
diff --git a/packages/components/src/input-control/styles/input-control-styles.js b/packages/components/src/input-control/styles/input-control-styles.js
index 9aa80b78db50a..759f52ef0608b 100644
--- a/packages/components/src/input-control/styles/input-control-styles.js
+++ b/packages/components/src/input-control/styles/input-control-styles.js
@@ -8,7 +8,7 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import { Flex, FlexItem } from '../../flex';
-import Text from '../../text';
+import { Text } from '../../text';
 import { color, rtl } from '../../utils/style-mixins';
 
 const rootFloatLabelStyles = () => {
diff --git a/packages/components/src/navigation/styles/navigation-styles.js b/packages/components/src/navigation/styles/navigation-styles.js
index 48331fe94a789..862579cc54b48 100644
--- a/packages/components/src/navigation/styles/navigation-styles.js
+++ b/packages/components/src/navigation/styles/navigation-styles.js
@@ -13,7 +13,7 @@ import { isRTL } from '@wordpress/i18n';
  */
 import { G2, UI } from '../../utils/colors-values';
 import Button from '../../button';
-import Text from '../../text';
+import { Text } from '../../text';
 import { reduceMotion, space, rtl } from '../../utils';
 
 export const NavigationUI = styled.div`
diff --git a/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js b/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js
index 7837f7d6742fd..ea134719d50fe 100644
--- a/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js
+++ b/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js
@@ -6,7 +6,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import Text from '../../../text';
+import { Text } from '../../../text';
 import { color } from '../../../utils/style-mixins';
 
 export const Root = styled.div`
diff --git a/packages/components/src/text/README.md b/packages/components/src/text/README.md
index 9b4f9ca2c2e9f..51ecdbd1d465a 100644
--- a/packages/components/src/text/README.md
+++ b/packages/components/src/text/README.md
@@ -1,4 +1,4 @@
-# Text
+# Text (Experimental)
 
 `Text` is a core component that renders text in the library, using the library's typography system.
 
@@ -23,7 +23,7 @@ function Example() {
 Automatically calculate the appropriate line-height value for contents that render text and Control elements (e.g. `TextInput`).
 
 ```jsx
-import { Text, TextInput } from '@wordpress/components';
+import { __experimentalText as Text, TextInput } from '@wordpress/components';
 
 function Example() {
 	return (
@@ -42,7 +42,7 @@ function Example() {
 Adjusts the text alignment.
 
 ```jsx
-import { Text } from '@wordpress/components';
+import { __experimentalText as Text } from '@wordpress/components';
 
 function Example() {
 	return (
@@ -107,7 +107,7 @@ Array of search words. String search terms are automatically cast to RegExps unl
 Letters or words within `Text` can be highlighted using `highlightWords`.
 
 ```jsx
-import { Text } from '@wordpress/components';
+import { __experimentalText as Text } from '@wordpress/components';
 
 function Example() {
 	return (
@@ -159,7 +159,7 @@ Clamps the text content to the specifiec `numberOfLines`, adding the `ellipsis`
 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
-import { Text, View } from '@wordpress/components';
+import { __experimentalText as Text, View } from '@wordpress/components';
 
 function Example() {
 	const backgroundColor = 'blue';
@@ -181,7 +181,7 @@ function Example() {
 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
-import { Text } from '@wordpress/components';
+import { __experimentalText as Text } from '@wordpress/components';
 
 function Example() {
 	return <Text size="largeTitle">Code is Poetry</Text>;
@@ -195,7 +195,7 @@ function Example() {
 Enables text truncation. When `truncate` is set,we are able to truncate the long text in a variety of ways.
 
 ```jsx
-import { Text } from '@wordpress/components';
+import { __experimentalText as Text } from '@wordpress/components';
 
 function Example() {
 	return (
@@ -223,7 +223,7 @@ Uppercases the text content.
 Adjusts style variation of the text.
 
 ```jsx
-import { Text } from '@wordpress/components';
+import { __experimentalText as Text } from '@wordpress/components';
 
 function Example() {
 	return <Text variant="muted">Code is Poetry</Text>;
diff --git a/packages/components/src/text/component.js b/packages/components/src/text/component.js
index 10b4040ceaaed..bd7f063294521 100644
--- a/packages/components/src/text/component.js
+++ b/packages/components/src/text/component.js
@@ -13,7 +13,7 @@ import useText from './hook';
  * @example
  *
  * ```jsx
- * import { Text } from `@wordpress/components`;
+ * import { __experimentalText as Text } from `@wordpress/components`;
  *
  * function Example() {
  * 	return <Text>Code is Poetry</Text>;
diff --git a/packages/components/src/text/index.js b/packages/components/src/text/index.js
index a11c4fd3a65c2..2341fd018171b 100644
--- a/packages/components/src/text/index.js
+++ b/packages/components/src/text/index.js
@@ -1,2 +1,2 @@
-export { default } from './component';
+export { default as Text } from './component';
 export { default as useText } from './hook';
diff --git a/packages/components/src/text/stories/index.js b/packages/components/src/text/stories/index.js
index 653f48d214287..34e7e5c21459c 100644
--- a/packages/components/src/text/stories/index.js
+++ b/packages/components/src/text/stories/index.js
@@ -5,7 +5,7 @@ import { Text } from '..';
 
 export default {
 	component: Text,
-	title: 'Components/Text',
+	title: 'G2 Components (Experimental)/Text',
 };
 
 export const _default = () => {
diff --git a/packages/components/src/text/test/__snapshots__/text.js.snap b/packages/components/src/text/test/__snapshots__/index.js.snap
similarity index 100%
rename from packages/components/src/text/test/__snapshots__/text.js.snap
rename to packages/components/src/text/test/__snapshots__/index.js.snap
diff --git a/packages/components/src/text/test/text.js b/packages/components/src/text/test/index.js
similarity index 99%
rename from packages/components/src/text/test/text.js
rename to packages/components/src/text/test/index.js
index b30a18e735de5..093f0a4eb29a6 100644
--- a/packages/components/src/text/test/text.js
+++ b/packages/components/src/text/test/index.js
@@ -8,7 +8,7 @@ import { render } from '@testing-library/react';
  */
 import { getFontSize } from '../../ui/utils/font-size';
 import { COLORS } from '../../utils';
-import Text from '..';
+import { Text } from '../';
 
 describe( 'Text', () => {
 	describe( 'snapshot tests', () => {
diff --git a/packages/components/src/truncate/README.md b/packages/components/src/truncate/README.md
index 76c98c0a4166b..663f04b1119f6 100644
--- a/packages/components/src/truncate/README.md
+++ b/packages/components/src/truncate/README.md
@@ -5,7 +5,7 @@
 ## Usage
 
 ```jsx
-import { Truncate } from '@wordpress/components/ui';
+import { __experimentalTruncate as Truncate } from '@wordpress/components';
 
 function Example() {
 	return (
@@ -50,7 +50,7 @@ Determines the max characters when `truncate` is set.
 Clamps the text content to the specifiec `numberOfLines`, adding the `ellipsis` at the end.
 
 ```jsx
-import { Truncate } from '@wordpress/components/ui';
+import { __experimentalTruncate as Truncate } from '@wordpress/components';
 
 function Example() {
 	return (
diff --git a/packages/components/src/truncate/component.js b/packages/components/src/truncate/component.js
index f3e3b3674fc0d..5cb453b778c8d 100644
--- a/packages/components/src/truncate/component.js
+++ b/packages/components/src/truncate/component.js
@@ -12,7 +12,7 @@ import useTruncate from './hook';
  *
  * @example
  * ```jsx
- * import { Truncate } from `@wordpress/components/ui`;
+ * import { __experimentalTruncate as Truncate } from `@wordpress/components`;
  *
  * function Example() {
  * 	return (
diff --git a/packages/components/src/truncate/index.js b/packages/components/src/truncate/index.js
index 3d68d3a62d815..0ea1912af03c8 100644
--- a/packages/components/src/truncate/index.js
+++ b/packages/components/src/truncate/index.js
@@ -1,2 +1,2 @@
-export { default } from './component';
+export { default as Truncate } from './component';
 export { default as useTruncate } from './hook';
diff --git a/packages/components/src/truncate/test/truncate.js b/packages/components/src/truncate/test/index.js
similarity index 97%
rename from packages/components/src/truncate/test/truncate.js
rename to packages/components/src/truncate/test/index.js
index 564ddcf3d66cb..82b5b95d6e3e6 100644
--- a/packages/components/src/truncate/test/truncate.js
+++ b/packages/components/src/truncate/test/index.js
@@ -6,7 +6,7 @@ import { render } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import Truncate from '..';
+import { Truncate } from '..';
 
 describe( 'props', () => {
 	test( 'should render correctly', () => {
diff --git a/packages/components/src/ui/__storybook-utils/example-grid.js b/packages/components/src/ui/__storybook-utils/example-grid.js
index 7b3c073eeccf9..7ba8a2725329c 100644
--- a/packages/components/src/ui/__storybook-utils/example-grid.js
+++ b/packages/components/src/ui/__storybook-utils/example-grid.js
@@ -3,7 +3,7 @@
  */
 import { Grid } from '../grid';
 import { Surface } from '../surface';
-import Text from '../../text';
+import { Text } from '../../text';
 import { View } from '../view';
 import { VStack } from '../v-stack';
 
diff --git a/packages/components/src/ui/card/stories/index.js b/packages/components/src/ui/card/stories/index.js
index d44c093dbc8ce..dff054f89ffb9 100644
--- a/packages/components/src/ui/card/stories/index.js
+++ b/packages/components/src/ui/card/stories/index.js
@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import { Grid } from '../../grid';
-import Text from '../../../text';
+import { Text } from '../../../text';
 import { VStack } from '../../v-stack';
 import { Card, CardBody, CardFooter } from '../index';
 import { Divider } from '../../divider';
diff --git a/packages/components/src/ui/form-group/stories/index.js b/packages/components/src/ui/form-group/stories/index.js
index 226bbe0b64088..ba693c3825fe4 100644
--- a/packages/components/src/ui/form-group/stories/index.js
+++ b/packages/components/src/ui/form-group/stories/index.js
@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import { FormGroup, useFormGroupContextId } from '../index';
-import Text from '../../../text';
+import { Text } from '../../../text';
 
 // @todo: Refactor this after adding next TextInput component.
 const TextInput = ( { id: idProp, ...props } ) => {
diff --git a/packages/components/src/ui/surface/stories/index.js b/packages/components/src/ui/surface/stories/index.js
index 669eb9a447807..7ab5b68b329e8 100644
--- a/packages/components/src/ui/surface/stories/index.js
+++ b/packages/components/src/ui/surface/stories/index.js
@@ -7,7 +7,7 @@ import { boolean, number, select } from '@storybook/addon-knobs';
  * Internal dependencies
  */
 import { Surface } from '../index';
-import Text from '../../../text';
+import { Text } from '../../../text';
 
 export default {
 	component: Surface,
diff --git a/packages/components/src/ui/tooltip/stories/index.js b/packages/components/src/ui/tooltip/stories/index.js
index 704c70501fcb8..e216b126def9e 100644
--- a/packages/components/src/ui/tooltip/stories/index.js
+++ b/packages/components/src/ui/tooltip/stories/index.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import Text from '../../../text';
+import { Text } from '../../../text';
 import { Tooltip } from '../index';
 
 export default {
diff --git a/packages/components/src/ui/tooltip/test/index.js b/packages/components/src/ui/tooltip/test/index.js
index c17a5c71e3433..b1ac48ff35043 100644
--- a/packages/components/src/ui/tooltip/test/index.js
+++ b/packages/components/src/ui/tooltip/test/index.js
@@ -6,7 +6,7 @@ import { render, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import Text from '../../../text';
+import { Text } from '../../../text';
 import { Tooltip } from '../index';
 
 describe( 'props', () => {