@automattic/vip-design-system 0.9.4 → 0.9.5

package/build/system/Notice/Notice.stories.js

@@ -1,90 +1,56 @@
-/** @jsx jsx */
+"use strict";
+
+exports.__esModule = true;
+exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 /**
  * External dependencies
  */
-import { jsx } from 'theme-ui';
+
 /**
  * Internal dependencies
  */
-
-import { Card, Heading, Notice, Text } from '..';
-export default {
+var _default = {
   title: 'Notice',
-  component: Notice
+  component: _.Notice
 };
-export var Default = function Default() {
-  return jsx(Card, {
-    sx: {
-      p: 4
-    }
-  }, jsx(Notice, {
-    variant: "alert",
-    title: "This is an alert notice",
-    sx: {
-      mb: 3
-    }
-  }, jsx(Text, {
-    sx: {
-      mb: 0
-    }
-  }, "It looks like you\u2018re ready to share your application with the world.")), jsx(Notice, {
-    variant: "info",
-    title: "This is an info heading",
-    sx: {
-      mb: 3
-    }
-  }, jsx(Text, {
-    sx: {
-      mb: 0
-    }
-  }, "It looks like you\u2018re ready to share your application with the world.")), jsx(Notice, {
-    variant: "success",
-    title: "This is a success heading",
-    sx: {
-      mb: 3
-    }
-  }, jsx(Text, {
-    sx: {
-      mb: 0
-    }
-  }, "It looks like you\u2018re ready to share your application with the world.")), jsx(Notice, {
-    variant: "warning",
-    title: "This is a warning heading",
-    sx: {
-      mb: 3
-    }
-  }, jsx(Text, {
-    sx: {
-      mb: 0
-    }
-  }, "It looks like you\u2018re ready to share your application with the world.")), jsx(Notice, {
-    inline: true,
-    variant: "alert",
-    title: "This is an inline notice",
-    sx: {
-      mb: 3
-    }
-  }), jsx(Notice, {
-    inline: true,
-    variant: "info",
-    title: "This is an inline notice",
-    sx: {
-      mb: 3
-    }
-  }), jsx(Notice, {
-    inline: true,
-    variant: "success",
-    title: "This is an inline notice",
-    sx: {
-      mb: 3
-    }
-  }), jsx(Notice, {
-    inline: true,
-    variant: "warning",
-    title: "This is an inline notice",
-    sx: {
-      mb: 3
-    }
-  }));
-};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
+    children: [(0, _jsxRuntime.jsxs)(_.Notice, {
+      variant: "alert",
+      sx: {
+        mb: 4
+      },
+      children: [(0, _jsxRuntime.jsx)(_.Heading, {
+        variant: "h4",
+        children: "Your site is ready to launch!"
+      }), (0, _jsxRuntime.jsx)(_.Text, {
+        sx: {
+          mb: 0
+        },
+        children: "It looks like you\u2018re ready to share your application with the world."
+      })]
+    }), (0, _jsxRuntime.jsxs)(_.Notice, {
+      variant: "success",
+      sx: {
+        mb: 4
+      },
+      children: ["It looks like you\u2018re ready to share your ", (0, _jsxRuntime.jsx)("a", {
+        href: "#",
+        children: "application with the world."
+      })]
+    })]
+  });
+};
+
+exports.Default = Default;

package/build/system/Notification/Notification.stories.js

@@ -1,19 +1,34 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 /**
  * External dependencies
  */
-import React from 'react';
+
 /**
  * Internal dependencies
  */
-
-import { Notification } from '..';
-export default {
+var _default = {
   title: 'Notification',
-  component: Notification
+  component: _.Notification
 };
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Notification, {
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsx)(_.Notification, {
     title: "My first notification",
     subTitle: "Use when providing success or error feedback on global action"
   });
-};
+};
+
+exports.Default = Default;

package/build/system/OptionRow/OptionRow.stories.js

@@ -1,34 +1,50 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 /**
  * External dependencies
  */
-import React from 'react';
+
 /**
  * Internal dependencies
  */
-
-import { Box, OptionRow } from '..';
-export default {
+var _default = {
   title: 'OptionRow',
-  component: OptionRow
+  component: _.OptionRow
 }; // eslint-disable-next-line max-len
 
+exports["default"] = _default;
 var image1 = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='79' height='79' viewBox='0 0 79 79' fill='none' %3E%3Cpath d='M71.4 15.3L54.2 4.2C54 4 53.7 4 53.4 4H26.4C26.1 4 25.8 4.1 25.6 4.2L8.29997 15.3C7.89997 15.6 7.59998 16 7.59998 16.5V32.1V63C7.59998 63.5 7.89997 64 8.29997 64.2L25.5 75.3C25.5 75.3 25.6 75.3 25.6 75.4C25.6 75.4 25.7 75.4 25.7 75.5C25.9 75.6 26 75.6 26.2 75.6H53.2C53.4 75.6 53.5 75.6 53.7 75.5C53.8 75.5 53.8 75.5 53.8 75.4C53.8 75.4 53.9 75.4 53.9 75.3L71.4 64.2C71.5 64.1 71.7 64 71.8 63.8C71.8 63.8 71.8 63.7 71.9 63.7C72 63.6 72.1 63.4 72.1 63.2V63.1C72.1 63 72.1 62.9 72.1 62.8V32.1V16.5C72.1 16 71.8 15.6 71.4 15.3ZM24.9 71.4L10.6 62.2V34.8L24.9 44V71.4ZM51.9 72.6H27.8V44.7H51.9V72.6ZM69.1 31.3L52.9 41.7H26.8L10.6 31.3V17.3L26.8 6.9H52.9L69.1 17.3V31.3Z' fill='%23BD9D70' /%3E%3C/svg%3E"; // eslint-disable-next-line max-len
 
 var image2 = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='79' height='79' viewBox='0 0 79 79' fill='none'%3E%3Cpath d='M66.3001 15.9C66.3001 15.9 66.3 15.8 66.2 15.8C66.1 15.7 66 15.5 65.9001 15.4C65.9001 15.4 65.9001 15.4 65.9001 15.3L44.4001 0.2C44.3001 0.0999998 44.2 0.0999994 44.1 0.0999994C44 0.0999994 44.0001 0 43.9001 0H43.3C43.2 0 43.1 0.0999994 43.1 0.0999994C43 0.0999994 42.9 0.2 42.8 0.2L28.2001 10.3C28.1 10.4 28.0001 10.5 27.9001 10.6C27.9001 10.6 27.9001 10.6 27.9001 10.7C27.8001 10.8 27.7001 11 27.7001 11.2C27.7001 11.2 27.7001 11.2 27.7001 11.3V31.1L13.9 40.8L13.7001 41C13.6001 41.1 13.6 41.1 13.6 41.2L13.5 41.3C13.5 41.4 13.4 41.5 13.4 41.5V41.6C13.4 41.7 13.3 41.8 13.3 42V62.2C13.3 62.4 13.3 62.6 13.4 62.7V62.8C13.5 62.9 13.6001 63.1 13.7001 63.2C13.7001 63.2 13.7 63.2 13.8 63.3L13.9 63.4L35.3 78.6H35.4001C35.4001 78.6 35.5 78.6 35.5 78.7H35.6C35.8 78.8 36 78.8 36.2001 78.8C36.3001 78.8 36.5 78.8 36.6 78.7H36.7001C36.8001 78.7 36.8001 78.7 36.9001 78.6C36.9001 78.6 37 78.6 37 78.5H37.1L66 58.3C66.1 58.2 66.2001 58.1 66.3001 58V15.9ZM34.6 74.5L16.1 61.3V44.7L34.6 57.8V74.5ZM36 55.3L17.2001 41.9L29 33.5L47.9001 46.9L36 55.3ZM49 44.1L30.5 31V14.4L49 27.5V44.1ZM50.5 24.9L31.6 11.5L43.5 3.2L62.4001 16.6L50.5 24.9Z' fill='%23BD9D70'/%3E%3C/svg%3E";
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Box, {
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_.Box, {
     sx: {
       mx: -5
-    }
-  }, /*#__PURE__*/React.createElement(OptionRow, {
-    image: image1,
-    title: "Option Row",
-    subTitle: "Mostly used to link off to other pages.",
-    as: "a"
-  }), /*#__PURE__*/React.createElement(OptionRow, {
-    image: image2,
-    title: "Option Row",
-    subTitle: "Mostly used to link off to other pages.",
-    as: "a"
-  }));
-};
+    },
+    children: [(0, _jsxRuntime.jsx)(_.OptionRow, {
+      image: image1,
+      title: "Option Row",
+      subTitle: "Mostly used to link off to other pages.",
+      as: "a"
+    }), (0, _jsxRuntime.jsx)(_.OptionRow, {
+      image: image2,
+      title: "Option Row",
+      subTitle: "Mostly used to link off to other pages.",
+      as: "a"
+    })]
+  });
+};
+
+exports.Default = Default;

package/build/system/Progress/Progress.stories.js

@@ -1,21 +1,36 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 /**
  * External dependencies
  */
-import React from 'react';
+
 /**
  * Internal dependencies
  */
-
-import { Progress } from '..';
-export default {
+var _default = {
   title: 'Progress',
-  component: Progress
+  component: _.Progress
 };
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Progress, {
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsx)(_.Progress, {
     max: 1,
     value: 1 / 2,
     steps: ['Downloading Data', 'Importing Data...', 'Finalizing'],
     activeStep: 1
   });
-};
+};
+
+exports.Default = Default;

package/build/system/Spinner/Spinner.stories.js

@@ -1,16 +1,31 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 /**
  * External dependencies
  */
-import React from 'react';
+
 /**
  * Internal dependencies
  */
-
-import { Spinner } from '..';
-export default {
+var _default = {
   title: 'Spinner',
-  component: Spinner
+  component: _.Spinner
 };
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Spinner, null);
-};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsx)(_.Spinner, {});
+};
+
+exports.Default = Default;

package/build/system/Table/Table.stories.js

@@ -1,50 +1,72 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 /**
  * External dependencies
  */
-import React from 'react';
+
 /**
  * Internal dependencies
  */
-
-import { Table, TableRow, Flex, Heading, Text } from '..';
-export default {
+var _default = {
   title: 'Table',
-  component: Table
+  component: _.Table
 };
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement(TableRow, {
-    head: true,
-    cells: ['User', 'Command', 'Duration', 'Time']
-  })), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement(TableRow, {
-    cells: [/*#__PURE__*/React.createElement(Flex, {
-      sx: {
-        alignItems: 'center'
-      },
-      key: "user"
-    }, /*#__PURE__*/React.createElement(Heading, {
-      variant: "h4",
-      sx: {
-        mb: 0
-      }
-    }, "kwaves")), /*#__PURE__*/React.createElement(Heading, {
-      variant: "h4",
-      key: "command",
-      sx: {
-        mb: 0,
-        display: 'flex',
-        alignItems: 'center'
-      }
-    }, "wp rewrite flush"), /*#__PURE__*/React.createElement(Text, {
-      sx: {
-        mb: 0
-      },
-      key: "duration"
-    }, "2s"), /*#__PURE__*/React.createElement(Text, {
-      sx: {
-        mb: 0,
-        color: 'muted'
-      },
-      key: "time"
-    }, "11th Mar 2020, 16:49:22")]
-  })));
-};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_.Table, {
+    children: [(0, _jsxRuntime.jsx)("thead", {
+      children: (0, _jsxRuntime.jsx)(_.TableRow, {
+        head: true,
+        cells: ['User', 'Command', 'Duration', 'Time']
+      })
+    }), (0, _jsxRuntime.jsx)("tbody", {
+      children: (0, _jsxRuntime.jsx)(_.TableRow, {
+        cells: [(0, _jsxRuntime.jsx)(_.Flex, {
+          sx: {
+            alignItems: 'center'
+          },
+          children: (0, _jsxRuntime.jsx)(_.Heading, {
+            variant: "h4",
+            sx: {
+              mb: 0
+            },
+            children: "kwaves"
+          })
+        }, "user"), (0, _jsxRuntime.jsx)(_.Heading, {
+          variant: "h4",
+          sx: {
+            mb: 0,
+            display: 'flex',
+            alignItems: 'center'
+          },
+          children: "wp rewrite flush"
+        }, "command"), (0, _jsxRuntime.jsx)(_.Text, {
+          sx: {
+            mb: 0
+          },
+          children: "2s"
+        }, "duration"), (0, _jsxRuntime.jsx)(_.Text, {
+          sx: {
+            mb: 0,
+            color: 'muted'
+          },
+          children: "11th Mar 2020, 16:49:22"
+        }, "time")]
+      })
+    })]
+  });
+};
+
+exports.Default = Default;

package/build/system/Tabs/Tabs.stories.js

@@ -1,18 +1,40 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 /**
  * External dependencies
  */
-import React from 'react';
+
 /**
  * Internal dependencies
  */
-
-import { Tabs, TabItem } from '..';
-export default {
+var _default = {
   title: 'Tabs',
-  component: Tabs
+  component: _.Tabs
 };
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(TabItem, {
-    active: true
-  }, "All (5)"), /*#__PURE__*/React.createElement(TabItem, null, "Live (2)"), /*#__PURE__*/React.createElement(TabItem, null, "In Development (3)"));
-};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_.Tabs, {
+    children: [(0, _jsxRuntime.jsx)(_.TabItem, {
+      active: true,
+      children: "All (5)"
+    }), (0, _jsxRuntime.jsx)(_.TabItem, {
+      children: "Live (2)"
+    }), (0, _jsxRuntime.jsx)(_.TabItem, {
+      children: "In Development (3)"
+    })]
+  });
+};
+
+exports.Default = Default;

package/build/system/Text/Text.stories.js

@@ -1,16 +1,33 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 /**
  * External dependencies
  */
-import React from 'react';
+
 /**
  * Internal dependencies
  */
-
-import { Text } from '..';
-export default {
+var _default = {
   title: 'Text',
-  component: Text
+  component: _.Text
 };
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Text, null, "Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.", ' ');
-};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_.Text, {
+    children: ["Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.", ' ']
+  });
+};
+
+exports.Default = Default;

package/build/system/Timeline/Timeline.js

@@ -0,0 +1,69 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Timeline = void 0;
+
+var _themeUi = require("theme-ui");
+
+var _md = require("react-icons/md");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+var _excluded = ["time", "first", "last"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign || 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); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var VerticalLine = function VerticalLine() {
+  return (0, _jsxRuntime.jsx)("div", {
+    sx: {
+      borderLeft: '2px solid',
+      borderColor: 'border',
+      height: 'calc( 50% - 16px )',
+      borderRadius: '2px'
+    }
+  });
+};
+
+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, {
+    children: [(0, _jsxRuntime.jsxs)(_themeUi.Flex, {
+      sx: {
+        flexDirection: 'column',
+        justifyContent: 'space-evenly',
+        alignItems: 'center'
+      },
+      children: [!first && (0, _jsxRuntime.jsx)(VerticalLine, {}), (0, _jsxRuntime.jsx)(_md.MdWatchLater, {
+        sx: {
+          color: 'border'
+        },
+        size: 18
+      }), !last && (0, _jsxRuntime.jsx)(VerticalLine, {})]
+    }), (0, _jsxRuntime.jsx)(_themeUi.Flex, {
+      sx: {
+        alignItems: 'center',
+        ml: 2
+      },
+      children: time
+    })]
+  }));
+};
+
+exports.Timeline = Timeline;
+Timeline.propTypes = {
+  first: _propTypes["default"].bool,
+  time: _propTypes["default"].node,
+  last: _propTypes["default"].bool
+};