Attempt to revise <TextLabel> (pt. 1)

[zhusee2]

Purpose

Try to simplify the underlying structure of <TextLabel>, starting with replacing <TextLayout> with <Text>.

My current plan is:

1. Stop using <TextLabel> inside almost every component.
   Previous experiences have shown such usage results in a huge, complex mega component with too many features.

2. Compose every base component using <Icon> and <Text>

Components

➕ <Text> (proposed to replace <TextLayout>)
➕ <BasicRow> (stays under Text/, not exposed.)

Usage

<Text
    aside="Aside text"
    align="center"
    basicRow={null} // see desc below
    basic="Basic text" // consumed by <BasicRow>
    tag="Tag"  // consumed by <BasicRow>
    stateIcon={<StatusIcon status="loading" />}  // consumed by <BasicRow>
/>

The row for basic text can be replace via basicRow prop.

In some cases like <TextInput> it can replace the whole row with a general <input> so it should be able to take up full-width.

DOM output

Output of current implement of <Text>

<div class="ic-text ic-text--center">
    <div class="ic-text__row ic-text__basic">
        <div class="ic-flex-cell" style="flex: 0 1 auto;">
            <div class="ic-text-ellipsis">Basic Text</div>
        </div>
        <span class="ic-tag">Tag</span>
        <span class="ic-status-icon ic-status-icon--inline">
            <span
                class="ic-icon ic-icon--blue ic-icon-inline-success"
                role="presentation">
            </span>
        </span>
    </div>
    <div class="ic-text__row ic-text__aside">I am center-aligned</div>
</div>

while the previous output of <TextLayout> in iC-framework-react:

<div class="ic-text-layout ic-text-layout--center">
    <div class="ic-text-layout__body">
        <div class="ic-text-layout__basic">
            <div class="ic-flex-layout ic-flex-layout--center">
                <div class="ic-flex-cell ic-flex-cell--shrink">
                    <div class="ic-text-ellipsis">Basic Text</div>
                </div>
                <div class="ic-flex-cell">
                    <span class="ic-tag">Tag</span>
                </div>
                <div class="ic-flex-cell">
                    <i class="ic-icon ic-icon--blue ic-icon-inline-success"></i>
                </div>
            </div>
        </div>
        <div class="ic-text-layout__aside">Aside Text</div>
    </div>
</div>

Dependency

#4

[cjies]

Others LGTM 👍

[cjies]

Can add some simple description to describe how this method works?
Since I cannot understand this method straightly from it's name XD

[zhusee2]

OK I'll add comments XD

But basically it's a function to check: if the passed-in content is not a valid React Element, then wrap it with Wrapper. Otherwise just return the content.

[zhusee2]

@cjies I've added the comments as suggested, and I also added some tests to the new components introduced in this PR. Please help take a look again.

Here's the diffs: 842e0c5...aa10cda