Add Icon.Text and TS definition (#339)

* Add Icon.Text and ts definition

* Add Icon.Text documentation and example

* Fix tests

* Add deprecation warning to text prop to Icon component

* Do not add icon prop when text props (deprecated)

* fix snapshot

src/components/icon/__test__/__snapshots__/icon.test.js.snap

@@ -16,9 +16,13 @@ exports[`Icon component Should have box classname 1`] = `
 />
 `;
 
-exports[`Icon component Should only enable icon-text class if text prop is enabled 1`] = `
+exports[`Icon component Should render wrapped on icon-text class 1`] = `
 <span
   className="icon-text"
-  icon="bars"
-/>
+>
+  <span
+    className="icon"
+    icon="bars"
+  />
+</span>
 `;

src/components/icon/__test__/icon.test.js

@@ -16,8 +16,8 @@ describe('Icon component', () => {
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
-  it('Should only enable icon-text class if text prop is enabled', () => {
-    const component = renderer.create(<Icon text icon="bars" />);
+  it('Should render wrapped on icon-text class', () => {
+    const component = renderer.create(<Icon.Text><Icon icon="bars" /></Icon.Text>);
     expect(component.toJSON()).toMatchSnapshot();
   });
 });

src/components/icon/components/text/index.js

@@ -0,0 +1,3 @@
+import Text from './text';
+
+export default Text;

src/components/icon/components/text/text.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Element from '../../../element';
+
+const Text = ({ className, ...props }) => {
+  return <Element className={classNames('icon-text', className)} {...props} />;
+};
+
+Text.propTypes = {
+  renderAs: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.string,
+    PropTypes.object,
+  ]),
+};
+
+Text.defaultProps = {
+  renderAs: 'span',
+};
+
+export default Text;

src/components/icon/icon.js

@@ -1,10 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import Text from './components/text';
 
 import Element from '../element';
 
 const Icon = ({ size, color, className, align, text, ...props }) => {
+  if (text !== undefined) {
+    console.warn(
+      '[Deprecation] Text prop for Icon Component its deprecated, please use Icon.Text Component instead',
+    );
+  }
   return (
     <Element
       {...props}
@@ -52,4 +58,6 @@ Icon.defaultProps = {
   renderAs: 'span',
 };
 
+Icon.Text = Text;
+
 export default Icon;

src/components/icon/icon.story.js

@@ -3,27 +3,36 @@ import React from 'react';
 import classnames from 'classnames';
 import { Box, Icon } from '../..';
 import CONSTANTS from '../../constants';
+import Element from '../element';
 
 const faSizeMapper = {
   small: '',
   medium: 'lg',
   large: '2x',
 };
 
-export const Default = ({ size, ...args }) => {
+export const Default = ({ size, useIconText, ...args }) => {
+  const Wrapper = useIconText ? Icon.Text : React.Fragment;
   return (
     <Box>
-      <Icon {...args} size={size} style={{ border: '1px solid red' }}>
-        <i
-          className={classnames('fas fa-home', {
-            [`fa-${faSizeMapper[size]}`]: size,
-          })}
-        />
-      </Icon>
+      <Wrapper>
+        <Icon {...args} size={size} style={{ border: '1px solid red' }}>
+          <i
+            className={classnames('fas fa-home', {
+              [`fa-${faSizeMapper[size]}`]: size,
+            })}
+          />
+        </Icon>
+        <Element renderAs="span">Some text in a span</Element>
+      </Wrapper>
     </Box>
   );
 };
 
+Default.args = {
+  useIconText: false,
+};
+
 Default.argTypes = {
   color: {
     control: {

src/components/icon/icon.story.mdx

@@ -11,8 +11,16 @@ This component reserve a square space for the icon
 
 ## Props
 
+<br />
+
+### `Icon`
+
 <ArgsTable of={Icon} />
 
+### `Icon.Text`
+
+<ArgsTable of={Icon.Text} />
+
 <CommonProps />
 
 ## Example

src/components/icon/index.d.ts

@@ -1,4 +1,4 @@
-import { BulmaComponentWithoutRenderAs } from '..';
+import { BulmaComponent } from '..';
 import { Color, Size } from '..';
 
 interface IconProps {
@@ -9,6 +9,8 @@ interface IconProps {
   text?: Boolean;
 }
 
-declare const Icon: BulmaComponentWithoutRenderAs<IconProps, 'span'>;
+declare const Icon: BulmaComponent<IconProps, 'span'> & {
+  Text: BulmaComponent<{}, 'span'>;
+};
 
 export default Icon;