✨ new(react-tooltips): create new element

packages/react-button-icon/lib/react-button-icon.js

@@ -20,8 +20,8 @@ const ButtonIcon = ({
 
 	let content = (
 		<React.Fragment>
-			<span className={ `sui-icon-${icon}${iconSize ? ' sui-' + iconSize : '' }` } aria-hidden="true" />
-			<span className="sui-screen-reader-text">{label}</span>
+			<span className={ `${icon ? 'sui-icon-' + icon : ''}${iconSize ? ' sui-' + iconSize : '' }` } aria-hidden="true" />
+			{label ? <span className="sui-screen-reader-text">{label}</span> : ''}
 		</React.Fragment>
 	);
 

packages/react-tooltips/README.md

@@ -0,0 +1,11 @@
+# `@wpmudev/react-tooltips`
+
+> TODO: description
+
+## Usage
+
+```
+const reactTooltips = require('@wpmudev/react-tooltips');
+
+// TODO: DEMONSTRATE API
+```

packages/react-tooltips/__tests__/react-tooltips.test.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const reactTooltips = require('..');
+
+describe('@wpmudev/react-tooltips', () => {
+    it('needs tests');
+});

packages/react-tooltips/docs/react-tooltips-position.stories.js

@@ -0,0 +1,142 @@
+import React from 'react';
+import { Box, BoxBody } from '@wpmudev/react-box';
+import ToolTips from '../lib/react-tooltips';
+
+export default {
+	title: 'Components/Tooltips/Position',
+	component: ToolTips,
+	args: {
+		buttonText: 'Element content',
+		tooltipText: 'Example tooltip content goes here',
+		position: 'top',
+		id: 'tooltip-id',
+		customWidth: '',
+		customMobileWidth: '',
+		icon: false,
+	},
+	argTypes: {
+		buttonText: {
+			description: 'This will be the text of the button.',
+			control: {
+				type: 'text',
+			},
+		},
+		tooltipText: {
+			description: 'This will be the content of the tooltip',
+			control: {
+				type: 'text',
+			},
+		},
+		position: {
+			description: 'This will be the position of the tooltip',
+			control: {
+				type: 'select',
+				options: {
+					Top: 'top',
+					'Top Left': 'top-left',
+					'Top Right': 'top-right',
+					Bottom: 'bottom',
+					'Bottom Left': 'bottom-left',
+					'Bottom Right': 'bottom-right',
+					Left: 'left',
+					Right: 'right',
+				},
+			},
+		},
+		id: {
+			description: 'This will be id and aria describedby for tooltip',
+			control: {
+				type: 'text',
+			},
+		},
+		customWidth: {
+			description: 'This will be the width of the tooltip',
+			control: {
+				type: 'text',
+			},
+		},
+		customMobileWidth: {
+			description: 'This will be the width of the tooltip in mobile view.',
+			control: {
+				type: 'text',
+			},
+		},
+		icon: {
+			description: 'This will be the icon of the tooltip',
+		},
+		iconName: {
+			description: 'This will be the icon name of the tooltip',
+			control: {
+				type: 'text',
+			},
+		},
+		iconLabel: {
+			description: 'This will be the icon label of the tooltip',
+			control: {
+				type: 'text',
+			},
+		},
+	},
+};
+
+const Template = (args) => {
+	return (
+		<Box>
+			<BoxBody>
+				<ToolTips {...args} />
+			</BoxBody>
+		</Box>
+	);
+};
+
+export const primary = Template.bind({});
+primary.storyName = 'Top';
+
+// top left position
+export const topLeft = Template.bind({});
+topLeft.storyName = 'Top Left';
+topLeft.args = {
+	position: 'top-left',
+};
+
+// top right position
+export const topRight = Template.bind({});
+topRight.storyName = 'Top Right';
+topRight.args = {
+	position: 'top-right',
+};
+
+// bottom position
+export const bottom = Template.bind({});
+bottom.storyName = 'Bottom';
+bottom.args = {
+	position: 'bottom',
+};
+
+// bottom left position
+export const bottomLeft = Template.bind({});
+bottomLeft.storyName = 'Bottom Left';
+bottomLeft.args = {
+	position: 'bottom-left',
+};
+
+// bottom right position
+export const bottomRight = Template.bind({});
+bottomRight.storyName = 'Bottom Right';
+bottomRight.args = {
+	position: 'bottom-right',
+};
+
+// left position
+export const left = Template.bind({});
+left.storyName = 'Left';
+left.args = {
+	position: 'left',
+};
+
+// right position
+export const right = Template.bind({});
+right.storyName = 'Right';
+right.args = {
+	position: 'right',
+};

packages/react-tooltips/docs/react-tooltips.stories.js

@@ -0,0 +1,117 @@
+import React from 'react';
+import { Box, BoxBody } from '@wpmudev/react-box';
+import ToolTips from '../lib/react-tooltips';
+
+export default {
+	title: 'Components/Tooltips/Variations',
+	component: ToolTips,
+	args: {
+		buttonText: 'Element content',
+		tooltipText: 'Example tooltip content goes here',
+		position: 'top',
+		id: 'tooltip-id',
+		customWidth: '',
+		customMobileWidth: '',
+		icon: false,
+	},
+	argTypes: {
+		buttonText: {
+			description: 'This will be the text of the button.',
+			control: {
+				type: 'text',
+			},
+		},
+		tooltipText: {
+			description: 'This will be the content of the tooltip',
+			control: {
+				type: 'text',
+			},
+		},
+		position: {
+			description: 'This will be the position of the tooltip',
+			control: {
+				type: 'select',
+				options: {
+					Top: 'top',
+					'Top Left': 'top-left',
+					'Top Right': 'top-right',
+					Bottom: 'bottom',
+					'Bottom Left': 'bottom-left',
+					'Bottom Right': 'bottom-right',
+					Left: 'left',
+					Right: 'right',
+				},
+			},
+		},
+		id: {
+			description: 'This will be id and aria describedby for tooltip',
+			control: {
+				type: 'text',
+			},
+		},
+		customWidth: {
+			description: 'This will be the width of the tooltip',
+			control: {
+				type: 'text',
+			},
+		},
+		customMobileWidth: {
+			description: 'This will be the width of the tooltip in mobile view.',
+			control: {
+				type: 'text',
+			},
+		},
+		icon: {
+			description: 'This will be the icon of the tooltip',
+		},
+		iconName: {
+			description: 'This will be the icon name of the tooltip',
+			control: {
+				type: 'text',
+			},
+		},
+		iconLabel: {
+			description: 'This will be the icon label of the tooltip',
+			control: {
+				type: 'text',
+			},
+		},
+	},
+};
+
+const Template = (args) => {
+	return (
+		<Box>
+			<BoxBody>
+				<ToolTips {...args} />
+			</BoxBody>
+		</Box>
+	);
+};
+
+// icon button
+export const button = Template.bind({});
+button.storyName = 'Button';
+
+// icon button
+export const icon = Template.bind({});
+icon.storyName = 'Icon Button';
+icon.args = {
+	icon: true,
+	iconLabel: 'Icon Label',
+	iconName: 'info',
+};
+
+// custom width
+export const customWidth = Template.bind({});
+customWidth.storyName = 'Custom Width';
+customWidth.args = {
+	customWidth: '171',
+};
+
+// custom mobile width
+export const customMobileWidth = Template.bind({});
+customMobileWidth.storyName = 'Custom Mobile Width';
+customMobileWidth.args = {
+	customMobileWidth: '200',
+};