@automattic/vip-design-system 0.9.1 → 0.9.4

package/src/system/Form/Select.stories.js

@@ -6,15 +6,7 @@ import { useState } from 'react';
 /**
  * Internal dependencies
  */
-import {
-	Box,
-	Dialog,
-	DialogMenu,
-	DialogMenuItem,
-	DialogDivider,
-	Select,
-	Button,
-} from '..';
+import { Box, Dialog, DialogMenu, DialogMenuItem, DialogDivider, Select, Button } from '..';
 
 export default {
 	title: 'Select',
@@ -44,43 +36,79 @@ const DropdownContent = (
 const DropdownTrigger = <Button variant="secondary">Trigger Dropdown</Button>;
 
 export const Multi = () => {
-	const [ value, setValue ] = useState( [ ] );
+	const [ value, setValue ] = useState( [] );
 
 	return (
-		<Box sx={ { mr: 2, width: 400 } }>
-			<Select label="Type" value={ value } isMulti placeholder="Select domains..." options={ options } onChange={ newValue => setValue( newValue ) } />
+		<Box sx={{ mr: 2, width: 400 }}>
+			<Select
+				label="Type"
+				value={value}
+				isMulti
+				placeholder="Select domains..."
+				options={options}
+				onChange={newValue => setValue( newValue )}
+			/>
+		</Box>
+	);
+};
+
+export const usePortal = () => {
+	const [ value, setValue ] = useState( [] );
+
+	return (
+		<Box sx={{ mr: 2, width: 400 }}>
+			<Select
+				label="Type"
+				value={value}
+				isMulti
+				placeholder="Select domains..."
+				usePortal
+				options={options}
+				onChange={newValue => setValue( newValue )}
+			/>
 		</Box>
 	);
 };
 
 export const Single = () => {
-	const [ value, setValue ] = useState( [ ] );
+	const [ value, setValue ] = useState( [] );
 
 	return (
-		<Box sx={ { mr: 2, width: 200 } }>
-			<Select label="User" value={ value } placeholder="Select a domain..." options={ options } onChange={ newValue => setValue( newValue ) } />
+		<Box sx={{ mr: 2, width: 200 }}>
+			<Select
+				label="User"
+				value={value}
+				placeholder="Select a domain..."
+				options={options}
+				onChange={newValue => setValue( newValue )}
+			/>
 		</Box>
 	);
 };
 
 export const Inline = () => {
-	const [ value, setValue ] = useState( [ ] );
+	const [ value, setValue ] = useState( [] );
 
 	return (
-		<Box sx={ { mr: 2, width: 200 } }>
-			<Select label="User" value={ value } isInline isMulti noneLabel="Everyone" placeholder="Filter by user..." options={ options } onChange={ newValue => setValue( newValue ) } />
+		<Box sx={{ mr: 2, width: 200 }}>
+			<Select
+				label="User"
+				value={value}
+				isInline
+				isMulti
+				noneLabel="Everyone"
+				placeholder="Filter by user..."
+				options={options}
+				onChange={newValue => setValue( newValue )}
+			/>
 		</Box>
 	);
 };
 
 export const DropdownMenu = () => {
 	return (
-		<Box sx={ { mr: 2, width: 200 } }>
-			<Dialog
-				trigger={DropdownTrigger}
-				content={DropdownContent}
-				sx={{ width: 200 }}
-			/>
+		<Box sx={{ mr: 2, width: 200 }}>
+			<Dialog trigger={DropdownTrigger} content={DropdownContent} sx={{ width: 200 }} />
 		</Box>
 	);
 };

package/src/system/Timeline/index.js

@@ -0,0 +1,46 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import { Flex } from 'theme-ui';
+import { MdWatchLater } from 'react-icons/md';
+import PropTypes from 'prop-types';
+
+const VerticalLine = () => {
+	return (
+		<div
+			sx={ {
+				borderLeft: '2px solid',
+				borderColor: 'border',
+				height: 'calc( 50% - 16px )',
+				borderRadius: '2px',
+			} }>
+		</div>
+	);
+};
+
+const Timeline = ( { time, first = false, last = false, ...props } ) => (
+	<Flex { ...props }>
+		<Flex sx={ { flexDirection: 'column', justifyContent: 'space-evenly', alignItems: 'center' } }>
+			{ ! first && (
+				<VerticalLine />
+			) }
+			<MdWatchLater sx={ { color: 'border' } } size={ 18 }/>
+			{ ! last && (
+				<VerticalLine />
+			) }
+		</Flex>
+		<Flex sx={ { alignItems: 'center', ml: 2 } }>
+			<span>{ time }</span>
+		</Flex>
+	</Flex>
+);
+
+Timeline.propTypes = {
+	first: PropTypes.bool,
+	time: PropTypes.string,
+	last: PropTypes.bool,
+};
+
+export { Timeline };

package/src/system/index.js

@@ -41,6 +41,7 @@ import { Spinner } from './Spinner';
 import { ResourceList, ResourceItem } from './ResourceList';
 import { Tooltip } from './Tooltip';
 import { Time } from './Time';
+import { Timeline } from './Timeline';
 import { Notification } from './Notification';
 import { OptionRow } from './OptionRow';
 import { Table, TableRow } from './Table';
@@ -93,6 +94,7 @@ export {
 	ToggleGroup,
 	TabItem,
 	Time,
+	Timeline,
 	Validation,
 	Wizard,
 	WizardStep,