@automattic/vip-design-system 1.2.0 → 1.2.2

package/src/system/Tooltip/Tooltip.css

@@ -0,0 +1,96 @@
+[data-vip-tooltip] {
+	position: relative;
+	cursor: help;
+  }
+
+  [data-vip-tooltip]::before,
+  [data-vip-tooltip]::after {
+	position: absolute;
+	opacity: 0;
+	visibility: hidden;
+	transition: opacity .3s ease-in-out;
+  }
+
+  [data-vip-tooltip]:focus-within::before,
+  [data-vip-tooltip]:focus-within::after,
+  [data-vip-tooltip]:hover::before,
+  [data-vip-tooltip]:hover::after {
+	opacity: 1;
+	visibility: visible;
+  }
+
+  [data-vip-tooltip]::before {
+	content: attr(data-vip-tooltip);
+	z-index: 9999;
+	width: 210px;
+	color: #fff;
+	background: rgba(0,0,0, .7);
+	border-radius: 5px;
+	padding: 5px;
+  }
+
+  [data-vip-tooltip]::after {
+	content: "";
+	width: 0;
+	height: 0;
+  }
+
+  [data-vip-tooltip][data-vip-tooltip-position="top"]::before,
+  [data-vip-tooltip][data-vip-tooltip-position="top"]::after {
+	bottom: 100%;
+	left: 50%;
+	transform: translate(-50%);
+	margin-bottom: 15px;
+  }
+
+  [data-vip-tooltip][data-vip-tooltip-position="top"]::after {
+	margin-bottom: 8px;
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	border-top: 7px solid rgba(0,0,0, .7);
+  }
+
+  [data-vip-tooltip][data-vip-tooltip-position="bottom"]::before,
+  [data-vip-tooltip][data-vip-tooltip-position="bottom"]::after {
+	top: 100%;
+	left: 50%;
+	transform: translate(-50%);
+	margin-top: 15px;
+  }
+
+  [data-vip-tooltip][data-vip-tooltip-position="bottom"]::after {
+	margin-top: 8px;
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	border-bottom: 7px solid rgba(0,0,0, .7);
+  }
+
+  [data-vip-tooltip][data-vip-tooltip-position="right"]::before,
+  [data-vip-tooltip][data-vip-tooltip-position="right"]::after {
+	top: 50%;
+	left: 100%;
+	transform: translate(0, -50%);
+	margin-left: 15px;
+  }
+
+  [data-vip-tooltip][data-vip-tooltip-position="right"]::after {
+	margin-left: 8px;
+	border-top: 5px solid transparent;
+	border-right: 7px solid rgba(0,0,0, .7);
+	border-bottom: 5px solid transparent;
+  }
+
+  [data-vip-tooltip][data-vip-tooltip-position="left"]::before,
+  [data-vip-tooltip][data-vip-tooltip-position="left"]::after {
+	top: 50%;
+	right: 100%;
+	transform: translate(0, -50%);
+	margin-right: 15px;
+  }
+
+  [data-vip-tooltip][data-vip-tooltip-position="left"]::after {
+	margin-right: 8px;
+	border-top: 5px solid transparent;
+	border-left: 7px solid rgba(0,0,0, .7);
+	border-bottom: 5px solid transparent;
+  }

package/src/system/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,133 @@
+/**
+ * Internal dependencies
+ */
+import { Tooltip, Button, Heading, Text, Link } from '..';
+
+export default {
+	title: 'Tooltip',
+	component: Tooltip,
+	parameters: {
+		docs: {
+			description: {
+				component: `
+A tooltip is a short descriptive message that appears when a user hovers or focuses on an
+element. Our tooltip aims to be 100% CSS-only. It uses a global css approach to inject the
+tooltip styles.
+
+## Kwown issues
+
+- Storybook uses iframes to render the components. This means that the tooltip box will overlap in the demos, but you can click on each demo page to see the correct render.
+- The current implementation of this component is <strong>NOT</strong> protected from viewport
+clipping (collision). For now, you can pick another <code>vip-tooltip-position</code> if
+possible.
+
+## Guidance
+
+### When to use the tooltip component
+
+- <strong>Helpful, non-critical information.</strong> Use tooltips to strengthen an existing
+message.
+- <strong>Enhance confidence.</strong> Use tooltips to increase certainty about an
+interaction.
+- <strong>Brief descriptions.</strong> Tooltips perform best with succinct helper text.
+- <strong>Lack of space.</strong> Tooltips are useful as a last resort for space-constrained
+UI. Explore other options for keeping content visible without a tooltip.
+
+### When to consider something else
+
+- <strong>Critical information.</strong> Don&apos;t hide information necessary for completing
+a task behind an tooltip interaction.
+- <strong>Lengthy descriptions.</strong> Tooltips are microcopy, and should be brief.
+Don&apos;t use a tooltip if you need a lot of text.
+- <strong>Redundant content.</strong> Don&apos;t use a tooltip when its content is repetitive
+or if usability is obvious.
+- <strong>Sufficient space.</strong> If content can fit outside a tooltip, don&apos;t use a
+tooltip.
+
+### Usability guidance
+
+- <strong>Use affordances.</strong> A hidden tooltip is unusable. Use tooltips only on
+elements that appear interactive, like buttons or links.
+- <strong>Avoid collisions.</strong> Be careful not introduce conflicting hover or focus
+events.
+- <strong>Use consistently.</strong> If using tooltips in one context, use in all similar
+contexts.
+- <strong>Don&apos;t block content.</strong> Use the <code>data-position</code> attribute to
+prevent the tooltip from covering other page elements.
+
+-------
+
+This documentation is heavily inspired by the [U.S Web Design System (USWDS)](https://designsystem.digital.gov/components/tooltip/#package). We use USWDS as trusted source of truth for accessibility and usability best practices.
+
+## Component Properties
+`,
+			},
+		},
+	},
+};
+
+export const Basic = () => (
+	<>
+		<Heading variant="h2">Basic Usage</Heading>
+		<Text>
+			Pass a trigger and title, the trigger component will be cloned and injected with a{ ' ' }
+			<code>[vip-tooltip]</code> HTML attribute.
+		</Text>
+
+		<Tooltip
+			trigger={ <Button sx={ { mr: 3 } }>Button with top tooltip</Button> }
+			title="On the top"
+			position="top"
+		/>
+
+		<Tooltip
+			trigger={ <Button sx={ { mr: 3 } }>Button with bottom tooltip</Button> }
+			title="On the Bottom"
+			position="bottom"
+		/>
+
+		<Tooltip
+			trigger={ <Button sx={ { mr: 3 } }>Button with left tooltip</Button> }
+			title="On the Left"
+			position="left"
+		/>
+
+		<Tooltip
+			trigger={ <Button>Button with right tooltip</Button> }
+			title="On the Right"
+			position="right"
+		/>
+	</>
+);
+
+export const Container = () => (
+	<div>
+		<Heading variant="h2">Container Usage</Heading>
+
+		<Text>
+			You can also wrap a component with the <code>Tooltip</code> component. To use tooltips you can
+			simply pass <code>data-vip-tooltip</code> as an HTML attribute to your component.
+		</Text>
+
+		<div sx={ { backgroundColor: 'red' } }>
+			<Tooltip>
+				<Button data-vip-tooltip-position="top" data-vip-tooltip="Test test" sx={ { ml: 3 } }>
+					This is another way
+				</Button>
+
+				<br />
+				<br />
+				<br />
+
+				<Link
+					href="http://google.com"
+					data-vip-tooltip-position="right"
+					data-vip-tooltip="is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500"
+					sx={ { ml: 3 } }
+				>
+					Use with links too
+				</Link>
+			</Tooltip>
+		</div>
+	</div>
+);

package/src/system/Tooltip/Tooltip.tsx

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { PropsWithChildren, ReactElement, cloneElement } from 'react';
+import css from './Tooltip.css';
+
+/**
+ * Internal dependencies
+ */
+
+export interface TooltipProps {
+	title?: string;
+	trigger?: ReactElement;
+	position?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+const Tooltip = ( {
+	title,
+	trigger,
+	children,
+	position = 'top',
+}: PropsWithChildren< TooltipProps > ) => {
+	const triggerCloned = trigger
+		? cloneElement( trigger, {
+				'data-vip-tooltip': title,
+				'aria-label': title,
+				'data-vip-tooltip-position': position,
+		  } )
+		: null;
+
+	return (
+		<>
+			{ triggerCloned }
+			{ children }
+		</>
+	);
+};
+
+export { Tooltip, css };

package/src/system/index.js

@@ -43,7 +43,7 @@ import { Notice } from './Notice';
 import { Progress } from './Progress';
 import { Spinner } from './Spinner';
 import { Tooltip } from './Tooltip';
-import { Notification } from './Notification';
+
 import { OptionRow } from './OptionRow';
 import { Table, TableRow, TableCell } from './Table';
 import { Text } from './Text';
@@ -85,7 +85,6 @@ export {
 	TableRow,
 	TableCell,
 	Tooltip,
-	Notification,
 	Link,
 	Radio,
 	RadioBoxGroup,

package/src/system/theme/index.js

@@ -54,7 +54,27 @@ const getComponentColors = ( theme, gColor, gVariants ) => ( {
 
 	// Notice
 	notice: {
-		...theme.support,
+		// extending the notice theme to support the alert variant
+		background: {
+			alert: theme.support.background.error,
+			...theme.support.background,
+		},
+		link: {
+			alert: theme.support.link.error,
+			...theme.support.link,
+		},
+		accent: {
+			alert: theme.support.accent.error,
+			...theme.support.accent,
+		},
+		icon: {
+			alert: theme.support.icon.error,
+			...theme.support.icon,
+		},
+		text: {
+			alert: theme.support.text.error,
+			...theme.support.text,
+		},
 	},
 
 	// layer

package/test/fileMock.ts

@@ -0,0 +1 @@
+export default {};

package/test/setupAfterEnv.ts

@@ -0,0 +1,5 @@
+/**
+ * External dependencies
+ */
+import 'jest-axe/extend-expect';
+import '@testing-library/jest-dom';

package/tsconfig.definition.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    // Produce .d.ts declaration files. Must be enabled via command-line flags
+    // since noEmit=true in this file. See `npm run build:types` script.
+    "declaration": true,
+
+    // Output directory for declaration files.
+    "outDir": "build/system"
+  },
+  "include": [ "src" ]
+}

package/.storybook/decorators/withBoundingBox.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { makeDecorator } from '@storybook/addons';
-import { Box, Heading } from '../../src/system';
-
-export default makeDecorator( {
-	name: 'withBoundingBox',
-	parameterName: 'colorMode2',
-	wrapper: ( storyFn, context ) => {
-		return (
-			<Box sx={ { p: 3, height: '100vh' } }>
-				<Box sx={ { backgroundColor: 'backgroundMuted', p: 3, borderRadius: 2 } }>
-					<Heading variant="h1" sx={ { mb: 1 } }>
-						{ context.title }
-					</Heading>
-					<Heading variant="h2">{ context.name }</Heading>
-				</Box>
-
-				<Box sx={ { py: 3 } }>{ storyFn() }</Box>
-			</Box>
-		);
-	},
-} );

package/build/system/Box/Box.stories.tsx

@@ -1,11 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Box } from '..';
-
-export default {
-	title: 'Box',
-	component: Box,
-};
-
-export const Default = () => <Box>Hello</Box>;

package/build/system/Box/Box.tsx

@@ -1,22 +0,0 @@
-/**
- * External dependencies
- */
-import React, { Ref } from 'react';
-import classNames, { Argument } from 'classnames';
-import { Box as ThemeBox, BoxProps as ThemeBoxProps } from 'theme-ui';
-
-export interface BoxProps extends Omit< ThemeBoxProps, 'className' > {
-	className?: Argument;
-}
-
-export const Box = React.forwardRef< HTMLDivElement, BoxProps >(
-	( props: BoxProps, ref: Ref< HTMLDivElement > ) => (
-		<ThemeBox
-			{ ...props }
-			className={ classNames( 'vip-box-component', props.className ) }
-			ref={ ref }
-		/>
-	)
-);
-
-Box.displayName = 'Box';

package/build/system/Button/ButtonSubmit.stories.js

@@ -1,58 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _ = require("..");
-var _variants = _interopRequireDefault(require("./variants"));
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /**
-                                                                                                                                                                                                                                                                                                                                                     * External dependencies
-                                                                                                                                                                                                                                                                                                                                                     */ /**
-                                                                                                                                                                                                                                                                                                                                                         * Internal dependencies
-                                                                                                                                                                                                                                                                                                                                                         */
-var _default = {
-  title: 'ButtonSubmit',
-  component: _.ButtonSubmit,
-  argTypes: {
-    loading: {
-      control: {
-        type: 'boolean',
-        defaultValue: true
-      }
-    },
-    disabled: {
-      control: {
-        type: 'boolean'
-      }
-    },
-    show: {
-      control: {
-        type: 'boolean',
-        "default": true
-      }
-    },
-    variant: {
-      type: 'select',
-      options: _variants["default"]
-    }
-  }
-};
-exports["default"] = _default;
-var Template = function Template(args) {
-  return (0, _jsxRuntime.jsx)(_react["default"].Fragment, {
-    children: _variants["default"].map(function (v) {
-      return (0, _jsxRuntime.jsx)(_.ButtonSubmit, _extends({
-        sx: {
-          m: 3
-        },
-        variant: v
-      }, args, {
-        label: "Loading\u2026"
-      }), v);
-    })
-  });
-};
-var Default = Template.bind({});
-exports.Default = Default;

package/build/system/ConfirmationDialog/ConfirmationDialog.stories.js

@@ -1,42 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
-var _ = require("..");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-/**
- * Internal dependencies
- */
-var _default = {
-  title: 'Deprecated/ConfirmationDialog',
-  component: _.ConfirmationDialog
-};
-exports["default"] = _default;
-var ConfirmationTrigger = (0, _jsxRuntime.jsx)(_.Button, {
-  sx: {
-    mr: 3
-  },
-  children: "Dangerous Action"
-});
-var ConfirmationContent = (0, _jsxRuntime.jsxs)(_.Box, {
-  p: 5,
-  children: [(0, _jsxRuntime.jsx)(_.Heading, {
-    children: "This is a Modal"
-  }), (0, _jsxRuntime.jsx)(_.Text, {
-    sx: {
-      fontSize: 3
-    },
-    children: "A modal is used to perform more detailed actions that don\u2018t necessarily need the context behind."
-  })]
-});
-var Default = function Default() {
-  return (0, _jsxRuntime.jsx)(_.Flex, {
-    children: (0, _jsxRuntime.jsx)(_.Box, {
-      children: (0, _jsxRuntime.jsx)(_.ConfirmationDialog, {
-        trigger: ConfirmationTrigger,
-        content: ConfirmationContent
-      })
-    })
-  });
-};
-exports.Default = Default;

package/build/system/Dialog/Dialog.stories.js

@@ -1,70 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
-var _ = require("..");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-/**
- * Internal dependencies
- */
-var _default = {
-  title: 'Deprecated/Dialog',
-  component: _.Dialog
-};
-exports["default"] = _default;
-var DropdownTrigger = (0, _jsxRuntime.jsx)(_.Button, {
-  children: "Trigger Dropdown"
-});
-var ModalTrigger = (0, _jsxRuntime.jsx)(_.Button, {
-  sx: {
-    mr: 3
-  },
-  children: "Trigger Modal"
-});
-var DropdownContent = (0, _jsxRuntime.jsxs)("div", {
-  children: [(0, _jsxRuntime.jsxs)(_.DialogMenu, {
-    children: [(0, _jsxRuntime.jsx)(_.DialogMenuItem, {
-      children: "Profile"
-    }), (0, _jsxRuntime.jsx)(_.DialogMenuItem, {
-      children: "Account"
-    }), (0, _jsxRuntime.jsx)(_.DialogMenuItem, {
-      children: "Dark Mode"
-    })]
-  }), (0, _jsxRuntime.jsx)(_.DialogDivider, {}), (0, _jsxRuntime.jsx)(_.DialogMenu, {
-    children: (0, _jsxRuntime.jsx)(_.DialogMenuItem, {
-      children: "Logout"
-    })
-  })]
-});
-var ModalContent = (0, _jsxRuntime.jsxs)(_.Box, {
-  p: 5,
-  children: [(0, _jsxRuntime.jsx)(_.Heading, {
-    children: "This is a Modal"
-  }), (0, _jsxRuntime.jsx)(_.Text, {
-    sx: {
-      fontSize: 3
-    },
-    children: "A modal is used to perform more detailed actions that don\u2018t necessarily need the context behind."
-  })]
-});
-var Default = function Default() {
-  return (0, _jsxRuntime.jsxs)(_.Flex, {
-    children: [(0, _jsxRuntime.jsx)(_.Box, {
-      children: (0, _jsxRuntime.jsx)(_.Dialog, {
-        trigger: ModalTrigger,
-        content: ModalContent,
-        sx: {
-          width: 480
-        },
-        variant: "modal"
-      })
-    }), (0, _jsxRuntime.jsx)(_.Dialog, {
-      trigger: DropdownTrigger,
-      content: DropdownContent,
-      sx: {
-        width: 200
-      }
-    })]
-  });
-};
-exports.Default = Default;