feat(TextContainer): initial impl of a TextContainer cmp (#9)

lib/components/Text/Text.tsx

@@ -16,11 +16,12 @@ export const Text: FunctionComponent<IProps> = ({
 	variant = null,
 	className = '',
 	children,
-}) => {
-	const cls = cx([styles.root, className], {
-		[styles.variantMobile]: !!variant && variant === EVariant.Mobile,
-		[styles.variantDesktop]: !!variant && variant === EVariant.Desktop,
-	});
-
-	return <p className={cls} children={children} />;
-};
+}) => (
+	<p
+		className={cx([styles.root, className], {
+			[styles.variantMobile]: !!variant && variant === EVariant.Mobile,
+			[styles.variantDesktop]: !!variant && variant === EVariant.Desktop,
+		})}
+		children={children}
+	/>
+);

lib/components/TextContainer/TextContainer.tsx

@@ -0,0 +1,16 @@
+import React, { FunctionComponent, ReactElement } from 'react';
+import styles from './style.scss';
+
+export interface IProps {
+	heading?: ReactElement | null;
+}
+
+export const TextContainer: FunctionComponent<IProps> = ({
+	heading = null,
+	children,
+}) => (
+	<article className={styles.root}>
+		{!!heading && <header>{heading}</header>}
+		{children}
+	</article>
+);

lib/components/TextContainer/index.ts

@@ -0,0 +1 @@
+export { TextContainer } from './TextContainer';

lib/components/TextContainer/stories.tsx

@@ -0,0 +1,61 @@
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+import { Button, EButtonSize, EButtonVariant } from '../Button';
+import { Heading } from '../Heading';
+import { Text } from '../Text';
+import { TextContainer } from './TextContainer';
+
+storiesOf('Components|Type/TextContainer', module)
+	.addDecorator(story => <div style={{ maxWidth: 512 }}>{story()}</div>)
+	.add('default', () => (
+		<TextContainer>
+			<Heading>Choose a credit pack</Heading>
+			<Text>
+				To get started, choose a credit pack that will used for Auto
+				Top-Up.
+			</Text>
+		</TextContainer>
+	))
+	.add('with interaction', () => (
+		<TextContainer
+			heading={
+				<>
+					<Heading>Reviews</Heading>
+					<Button
+						variant={EButtonVariant.Secondary}
+						size={EButtonSize.Small}>
+						Edit
+					</Button>
+				</>
+			}>
+			<Text>All of our reviews are from verified customers.</Text>
+		</TextContainer>
+	))
+	.add('with long title', () => (
+		<TextContainer
+			heading={
+				<>
+					<Heading>Setup your personal settings</Heading>
+					<Button
+						variant={EButtonVariant.Secondary}
+						size={EButtonSize.Small}>
+						Edit
+					</Button>
+				</>
+			}>
+			<Text>All of our reviews are from verified customers.</Text>
+		</TextContainer>
+	))
+	.add('with no body text', () => (
+		<TextContainer>
+			<Heading>Choose a credit pack</Heading>
+		</TextContainer>
+	))
+	.add('with no title text', () => (
+		<TextContainer>
+			<Text>
+				To get started, choose a credit pack that will used for Auto
+				Top-Up.
+			</Text>
+		</TextContainer>
+	));

lib/components/TextContainer/style.scss

@@ -0,0 +1,35 @@
+.root {
+	display: block;
+	margin-bottom: var(--global--space--5);
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	> header {
+		display: block;
+
+		~ * {
+			display: block;
+			padding-top: var(--global--space--2);
+		}
+	}
+
+	header {
+		display: flex;
+		align-items: center;
+		flex-direction: row;
+		place-content: center space-between;
+
+		> :last-child {
+			flex-shrink: 0;
+			margin-left: var(--global--space--4);
+		}
+
+		> * {
+			display: block;
+		}
+	}
+}