Components: Add stories for Icon and IconButton (#17868)

* Components: Add stories for Icon and IconButton component

This update adds some initial Storybook stories for the Icon and IconButton
component.

Most of the stories were derived from the component's README.md documentation.
Additional stories were added to showcase prop variation (e.g. `Icon` size),
as well as composition (e.g. `IconButton` grouping).

In order to render certain UI for the stories, some simple stateless
functional components were created in the `.stories.js` file.

* Fix story names and refactor prop forward in example component

packages/components/src/icon-button/stories/index.js

@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import IconButton from '../';
+
+export default { title: 'IconButton', component: IconButton };
+
+export const _default = () => <IconButton icon="ellipsis" label="More" />;
+
+export const grouped = () => {
+	const GroupContainer = ( { children } ) => (
+		<div style={ { display: 'inline-flex' } }>{ children }</div>
+	);
+
+	return (
+		<GroupContainer>
+			<IconButton icon="editor-bold" label="Bold" />
+			<IconButton icon="editor-italic" label="Italic" />
+			<IconButton icon="editor-underline" label="Underline" />
+		</GroupContainer>
+	);
+};

packages/components/src/icon/stories/index.js

@@ -0,0 +1,85 @@
+/**
+ * Internal dependencies
+ */
+import Icon from '../';
+import { SVG, Path } from '../../';
+
+export default { title: 'Icon', component: Icon };
+
+const IconSizeLabel = ( { size } ) => <div style={ { fontSize: 12 } }>{ size }px</div>;
+
+export const _default = () => (
+	<div>
+		<Icon icon="screenoptions" />
+		<IconSizeLabel size={ 24 } />
+	</div>
+);
+
+export const sizes = () => {
+	const iconSizes = [ 14, 16, 20, 24, 28, 32, 40, 48, 56 ];
+
+	return (
+		<>
+			{ iconSizes.map( ( size ) => (
+				<div key={ size } style={ { padding: 20, display: 'inline-block' } }>
+					<Icon icon="screenoptions" size={ size } />
+					<IconSizeLabel size={ size } />
+				</div>
+			) ) }
+		</>
+	);
+};
+
+export const colors = () => {
+	const iconColors = [ 'blue', 'purple', 'green' ];
+
+	/**
+	 * The SVG icon inherits the color from a parent selector.
+	 */
+
+	return (
+		<>
+			{ iconColors.map( ( color ) => (
+				<div
+					key={ color }
+					style={ { padding: 20, display: 'inline-block', color } }
+				>
+					<Icon icon="screenoptions" />
+					<IconSizeLabel size={ 24 } />
+				</div>
+			) ) }
+		</>
+	);
+};
+
+export const withAFunction = () => (
+	<Icon
+		icon={ () => (
+			<SVG>
+				<Path d="M5 4v3h5.5v12h3V7H19V4z" />
+			</SVG>
+		) }
+	/>
+);
+
+export const withAComponent = () => {
+	const MyIconComponent = () => (
+		<SVG>
+			<Path d="M5 4v3h5.5v12h3V7H19V4z" />
+		</SVG>
+	);
+
+	return <Icon icon={ MyIconComponent } />;
+};
+
+export const withAnSVG = () => {
+	return (
+		<Icon
+			icon={
+				<SVG>
+					<Path d="M5 4v3h5.5v12h3V7H19V4z" />
+				</SVG>
+			}
+		/>
+	);
+};