@automattic/vip-design-system 0.9.1 → 0.9.2

package/build/system/Timeline/index.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["time"];
+var _excluded = ["time", "first", "last"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -32,6 +32,10 @@ var VerticalLine = function VerticalLine() {
 
 var Timeline = function Timeline(_ref) {
   var time = _ref.time,
+      _ref$first = _ref.first,
+      first = _ref$first === void 0 ? false : _ref$first,
+      _ref$last = _ref.last,
+      last = _ref$last === void 0 ? false : _ref$last,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return (0, _jsxRuntime.jsxs)(_themeUi.Flex, _extends({}, props, {
@@ -41,22 +45,18 @@ var Timeline = function Timeline(_ref) {
         justifyContent: 'space-evenly',
         alignItems: 'center'
       },
-      children: [(0, _jsxRuntime.jsx)(VerticalLine, {}), (0, _jsxRuntime.jsx)(_md.MdWatchLater, {
+      children: [!first && (0, _jsxRuntime.jsx)(VerticalLine, {}), (0, _jsxRuntime.jsx)(_md.MdWatchLater, {
         sx: {
           color: 'border'
         },
         size: 18
-      }), (0, _jsxRuntime.jsx)(VerticalLine, {})]
+      }), !last && (0, _jsxRuntime.jsx)(VerticalLine, {})]
     }), (0, _jsxRuntime.jsx)(_themeUi.Flex, {
       sx: {
         alignItems: 'center',
         ml: 2
       },
-      children: (0, _jsxRuntime.jsx)(_themeUi.Text, {
-        as: "span",
-        sx: {
-          color: 'muted'
-        },
+      children: (0, _jsxRuntime.jsx)("span", {
         children: time
       })
     })]
@@ -65,5 +65,7 @@ var Timeline = function Timeline(_ref) {
 
 exports.Timeline = Timeline;
 Timeline.propTypes = {
-  time: _propTypes["default"].string
+  first: _propTypes["default"].bool,
+  time: _propTypes["default"].string,
+  last: _propTypes["default"].bool
 };

package/build/system/index.js

@@ -99,6 +99,10 @@ var _Time = require("./Time");
 
 exports.Time = _Time.Time;
 
+var _Timeline = require("./Timeline");
+
+exports.Timeline = _Timeline.Timeline;
+
 var _Notification = require("./Notification");
 
 exports.Notification = _Notification.Notification;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.9.1",
+	"version": "0.9.2",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",

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,