Adding support for text alignment

- Added EuiTextAlign
- Implementing in the same way as EuiTextColor

src-docs/src/views/text/text_align.js

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import {
+  EuiText,
+  EuiTextAlign,
+  EuiCode,
+  EuiSpacer,
+} from '../../../../src/components';
+
+export default () => (
+  <div>
+    <EuiText>
+      <EuiTextAlign textAlign="left">
+        <p>Left aligned paragraph.</p>
+      </EuiTextAlign>
+      <EuiTextAlign textAlign="center">
+        <p>Center aligned paragraph.</p>
+      </EuiTextAlign>
+      <EuiTextAlign textAlign="right">
+        <p>Right aligned paragraph.</p>
+      </EuiTextAlign>
+    </EuiText>
+    <EuiSpacer />
+    <EuiText textAlign="center">
+      <p>You can also pass alignment to <EuiCode>EuiText</EuiCode> directly with a prop</p>
+    </EuiText>
+    <EuiText textAlign="center" color="secondary">
+      <p>And in conjuction with coloring.</p>
+    </EuiText>
+  </div>
+);

src-docs/src/views/text/text_example.js

@@ -10,6 +10,7 @@ import {
   EuiCode,
   EuiText,
   EuiTextColor,
+  EuiTextAlign,
 } from '../../../../src/components';
 
 import Text from './text';
@@ -24,6 +25,10 @@ import TextColor from './text_color';
 const textColorSource = require('!!raw-loader!./text_color');
 const textColorHtml = renderToHtml(TextColor);
 
+import TextAlign from './text_align';
+const textAlignSource = require('!!raw-loader!./text_align');
+const textAlignHtml = renderToHtml(TextAlign);
+
 export const TextExample = {
   title: 'Text',
   sections: [{
@@ -89,5 +94,24 @@ export const TextExample = {
     ),
     props: { EuiTextColor },
     demo: <TextColor />,
+  }, {
+    title: 'Alignment',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: textAlignSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: textAlignHtml,
+    }],
+    text: (
+      <p>
+        There are two ways to align text. Either individually by
+        applying <EuiCode>EuiTextAlign</EuiCode> on individual text objects, or
+        by passing the <EuiCode>textAlign</EuiCode> prop directly on <EuiCode>EuiText</EuiCode> for
+        a blanket approach across the entirely of your text.
+      </p>
+    ),
+    props: { EuiTextAlign },
+    demo: <TextAlign />,
   }],
 };

src/components/index.js

@@ -285,4 +285,5 @@ export {
 export {
   EuiText,
   EuiTextColor,
+  EuiTextAlign,
 } from './text';

src/components/text/__snapshots__/text_align.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiTextAlign is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiTextAlign euiTextAlign--left testClass1 testClass2"
+  data-test-subj="test subject string"
+/>
+`;

src/components/text/_index.scss

@@ -1,2 +1,3 @@
 @import 'text';
 @import 'text_color';
+@import 'text_align';

src/components/text/_text_align.scss

@@ -0,0 +1,11 @@
+.euiTextAlign--left {
+  text-align: left;
+}
+
+.euiTextAlign--right {
+  text-align: right;
+}
+
+.euiTextAlign--center {
+  text-align: center;
+}

src/components/text/index.js

@@ -5,3 +5,7 @@ export {
 export {
   EuiTextColor,
 } from './text_color';
+
+export {
+  EuiTextAlign,
+} from './text_align';

src/components/text/text.js

@@ -7,14 +7,19 @@ import {
   EuiTextColor,
 } from './text_color';
 
+import {
+  ALIGNMENTS,
+  EuiTextAlign,
+} from './text_align';
+
 const textSizeToClassNameMap = {
   s: 'euiText--small',
   xs: 'euiText--extraSmall',
 };
 
 export const TEXT_SIZES = Object.keys(textSizeToClassNameMap);
 
-export const EuiText = ({ size, color, grow, children, className, ...rest }) => {
+export const EuiText = ({ size, color, grow, textAlign, children, className, ...rest }) => {
 
   const classes = classNames(
     'euiText',
@@ -24,20 +29,26 @@ export const EuiText = ({ size, color, grow, children, className, ...rest }) =>
     }
   );
 
-  let optionallyColoredText;
+  let optionallyAlteredText;
   if (color) {
-    optionallyColoredText = (
+    optionallyAlteredText = (
       <EuiTextColor color={color}>
         {children}
       </EuiTextColor>
     );
-  } else {
-    optionallyColoredText = children;
+  }
+
+  if (textAlign) {
+    optionallyAlteredText = (
+      <EuiTextAlign textAlign={textAlign}>
+        {optionallyAlteredText || children}
+      </EuiTextAlign>
+    );
   }
 
   return (
     <div className={classes} {...rest}>
-      {optionallyColoredText}
+      {optionallyAlteredText || children}
     </div>
   );
 };
@@ -47,6 +58,7 @@ EuiText.propTypes = {
   className: PropTypes.string,
   size: PropTypes.oneOf(TEXT_SIZES),
   color: PropTypes.oneOf(COLORS),
+  textAlign: PropTypes.oneOf(ALIGNMENTS),
   grow: PropTypes.bool,
 };
 

src/components/text/text_align.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export const alignmentToClassNameMap = {
+  'left': 'euiTextAlign--left',
+  'right': 'euiTextAlign--right',
+  'center': 'euiTextAlign--center',
+};
+
+export const ALIGNMENTS = Object.keys(alignmentToClassNameMap);
+
+export const EuiTextAlign = ({
+  children,
+  className,
+  textAlign,
+  ...rest,
+}) => {
+  const classes = classNames(
+    'euiTextAlign',
+    alignmentToClassNameMap[textAlign],
+    className
+  );
+
+  return (
+    <div
+      className={classes}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+};
+
+EuiTextAlign.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  textAlign: PropTypes.oneOf(ALIGNMENTS),
+};
+
+EuiTextAlign.defaultProps = {
+  textAlign: 'left',
+};

src/components/text/text_align.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test';
+
+import { EuiTextAlign } from './text_align';
+
+describe('EuiTextAlign', () => {
+  test('is rendered', () => {
+    const component = render(
+      <EuiTextAlign {...requiredProps} />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+});