@automattic/vip-design-system 0.10.0 → 0.10.1

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "prettier.enable": false,
+}

package/build/system/OptionRow/OptionRow.js

@@ -73,7 +73,7 @@ var OptionRow = function OptionRow(_ref) {
       cursor: disabled ? 'auto' : 'pointer',
       textDecoration: 'none',
       color: 'inherit',
-      '&:hover': {
+      '&:hover': !disabled && {
         backgroundColor: 'hover'
       }
     }, inlineStyles),
@@ -123,7 +123,8 @@ var OptionRow = function OptionRow(_ref) {
         },
         children: body
       })]
-    }), (0, _jsxRuntime.jsx)(_.Box, {
+    }), false !== meta && '' !== meta && (0, _jsxRuntime.jsx)(_.Box, {
+      "data-testid": "meta",
       children: meta ? meta : (0, _jsxRuntime.jsx)(_md.MdArrowForward, {
         size: 24
       })

package/build/system/OptionRow/OptionRow.test.js

@@ -43,4 +43,42 @@ describe('<OptionRow />', function () {
       }
     }, _callee);
   })));
+  it('renders a disabled OptionRow', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    var image1, _render2, container;
+
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            // eslint-disable-next-line max-len
+            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";
+            _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_OptionRow.OptionRow, {
+              image: image1,
+              label: "Option Row",
+              subTitle: "Mostly used to link off to other pages.",
+              as: "a",
+              disabled: true,
+              meta: ""
+            })), container = _render2.container;
+            expect(_react.screen.getByAltText('Image representing the list item').closest('div')).toHaveStyle({
+              background: 'none'
+            });
+            expect(_react.screen.queryByTestId('meta')).not.toBeInTheDocument(); // Check for accessibility issues
+
+            _context2.t0 = expect;
+            _context2.next = 7;
+            return (0, _jestAxe.axe)(container);
+
+          case 7:
+            _context2.t1 = _context2.sent;
+            _context2.next = 10;
+            return (0, _context2.t0)(_context2.t1).toHaveNoViolations();
+
+          case 10:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
 });

package/package.json

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

package/src/system/OptionRow/OptionRow.js

@@ -64,7 +64,7 @@ const OptionRow = ( {
 				cursor: disabled ? 'auto' : 'pointer',
 				textDecoration: 'none',
 				color: 'inherit',
-				'&:hover': {
+				'&:hover': ! disabled && {
 					backgroundColor: 'hover',
 				},
 				...inlineStyles,
@@ -107,7 +107,9 @@ const OptionRow = ( {
 				{subTitle && <Text sx={{ mb: 1, color: 'muted' }}>{subTitle}</Text>}
 				{body && <Text sx={{ mb: 0 }}>{body}</Text>}
 			</Box>
-			<Box>{meta ? meta : <MdArrowForward size={24} />}</Box>
+			{ ( false !== meta && '' !== meta ) && (
+				<Box data-testid="meta">{ meta ? meta : <MdArrowForward size={24} /> }</Box>
+			) }
 		</Grid>
 	);
 };

package/src/system/OptionRow/OptionRow.stories.js

@@ -28,5 +28,13 @@ export const Default = () => (
 			as="a"
 			order={ 2 }
 		/>
+		<OptionRow
+			image={image2}
+			label="Option Row – Disabled"
+			subTitle="Mostly used to link off to other pages."
+			as={ Box }
+			disabled
+			meta=""
+		/>
 	</Box>
 );

package/src/system/OptionRow/OptionRow.test.js

@@ -24,4 +24,26 @@ describe( '<OptionRow />', () => {
 		// Check for accessibility issues
 		await expect( await axe( container ) ).toHaveNoViolations();
 	} );
+
+	it( 'renders a disabled OptionRow', async () => {
+		// eslint-disable-next-line max-len
+		const 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";
+
+		const { container } = render(
+			<OptionRow
+				image={image1}
+				label="Option Row"
+				subTitle="Mostly used to link off to other pages."
+				as="a"
+				disabled
+				meta=""
+			/>
+		);
+
+		expect( screen.getByAltText( 'Image representing the list item' ).closest( 'div' ) ).toHaveStyle( { background: 'none' } );
+		expect( screen.queryByTestId( 'meta' ) ).not.toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
 } );

package/build/system/Avatar/Avatar.stories.js

@@ -1,16 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-/**
- * Internal dependencies
- */
-
-import { Avatar } from '..';
-export default {
-  title: 'Avatar',
-  component: Avatar
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Avatar, null);
-};

package/build/system/Badge/Badge.stories.js

@@ -1,16 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-/**
- * Internal dependencies
- */
-
-import { Badge } from '..';
-export default {
-  title: 'Badge',
-  component: Badge
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Badge, null, "Badge");
-};

package/build/system/BlankState/BlankState.stories.js

@@ -1,25 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-/**
- * Internal dependencies
- */
-
-import { Link, BlankState } from '..';
-export default {
-  title: 'BlankState',
-  component: BlankState
-}; // 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(BlankState, {
-    image: image2,
-    title: "Power up your application",
-    body: "Add-ons give you the ability to bolt on extra capabilities to\nyour application, including logging, analytics and performance\nmonitoring.",
-    cta: /*#__PURE__*/React.createElement(Link, {
-      as: "a"
-    }, "Explore add-ons \u2192")
-  });
-};

package/build/system/Box/Box.stories.js

@@ -1,16 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-/**
- * Internal dependencies
- */
-
-import { Box } from '..';
-export default {
-  title: 'Box',
-  component: Box
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Box, null, "Hello");
-};

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

@@ -1,31 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-/**
- * Internal dependencies
- */
-
-import { Button } from '..';
-export default {
-  title: 'Button',
-  component: Button
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    sx: {
-      mr: 2
-    }
-  }, "Primary"), /*#__PURE__*/React.createElement(Button, {
-    variant: "secondary",
-    sx: {
-      ml: 2
-    }
-  }, "Secondary"), /*#__PURE__*/React.createElement(Button, {
-    variant: "secondary",
-    isLoading: true,
-    sx: {
-      ml: 2
-    }
-  }, "Secondary"));
-};

package/build/system/Card/Card.stories.js

@@ -1,16 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-/**
- * Internal dependencies
- */
-
-import { Card } from '..';
-export default {
-  title: 'Card',
-  component: Card
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Card, null, "Hello");
-};

package/build/system/Code/Code.stories.js

@@ -1,16 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-/**
- * Internal dependencies
- */
-
-import { Code } from '..';
-export default {
-  title: 'Code',
-  component: Code
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Code, null, "Code");
-};

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

@@ -1,32 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-/**
- * Internal dependencies
- */
-
-import { Box, ConfirmationDialog, Button, Heading, Text, Flex } from '..';
-export default {
-  title: 'ConfirmationDialog',
-  component: ConfirmationDialog
-};
-var ConfirmationTrigger = /*#__PURE__*/React.createElement(Button, {
-  sx: {
-    mr: 3
-  }
-}, "Dangerous Action");
-var ConfirmationContent = /*#__PURE__*/React.createElement(Box, {
-  p: 5
-}, /*#__PURE__*/React.createElement(Heading, null, "This is a Modal"), /*#__PURE__*/React.createElement(Text, {
-  sx: {
-    fontSize: 3
-  }
-}, "A modal is used to perform more detailed actions that don\u2018t necessarily need the context behind."));
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(ConfirmationDialog, {
-    trigger: ConfirmationTrigger,
-    title: "Are you sure you want to continue?",
-    body: "Your site will no longer be accessible via the old domain. Please make sure to test this change before moving forward."
-  })));
-};

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

@@ -1,43 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-/**
- * Internal dependencies
- */
-
-import { Box, Dialog, DialogMenu, DialogMenuItem, DialogDivider, Button, Heading, Text, Flex } from '..';
-export default {
-  title: 'Dialog',
-  component: Dialog
-};
-var DropdownTrigger = /*#__PURE__*/React.createElement(Button, null, "Trigger Dropdown");
-var ModalTrigger = /*#__PURE__*/React.createElement(Button, {
-  sx: {
-    mr: 3
-  }
-}, "Trigger Modal");
-var DropdownContent = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DialogMenu, null, /*#__PURE__*/React.createElement(DialogMenuItem, null, "Profile"), /*#__PURE__*/React.createElement(DialogMenuItem, null, "Account"), /*#__PURE__*/React.createElement(DialogMenuItem, null, "Dark Mode")), /*#__PURE__*/React.createElement(DialogDivider, null), /*#__PURE__*/React.createElement(DialogMenu, null, /*#__PURE__*/React.createElement(DialogMenuItem, null, "Logout")));
-var ModalContent = /*#__PURE__*/React.createElement(Box, {
-  p: 5
-}, /*#__PURE__*/React.createElement(Heading, null, "This is a Modal"), /*#__PURE__*/React.createElement(Text, {
-  sx: {
-    fontSize: 3
-  }
-}, "A modal is used to perform more detailed actions that don\u2018t necessarily need the context behind."));
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Dialog, {
-    trigger: ModalTrigger,
-    content: ModalContent,
-    sx: {
-      width: 480
-    },
-    variant: "modal"
-  })), /*#__PURE__*/React.createElement(Dialog, {
-    trigger: DropdownTrigger,
-    content: DropdownContent,
-    sx: {
-      width: 200
-    }
-  }));
-};

package/build/system/Flex/Flex.stories.js

@@ -1,16 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-/**
- * Internal dependencies
- */
-
-import { Flex } from '..';
-export default {
-  title: 'Flex',
-  component: Flex
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Flex, null, "Hello");
-};

package/build/system/Form/Input.stories.js

@@ -1,18 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-/**
- * Internal dependencies
- */
-
-import { Input } from '..';
-export default {
-  title: 'Input',
-  component: Input
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Input, {
-    placeholder: "Your input here..."
-  });
-};

package/build/system/Form/MultiSelect.js

@@ -1,38 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.MultiSelect = void 0;
-
-var _reactSelect = _interopRequireDefault(require("react-select"));
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-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); }
-
-var vipGold = '#c29c69'; // hardcoding for now
-
-var vipGrey2 = '#d7dee2';
-var customStyles = {
-  control: function control(styles) {
-    return _extends({}, styles, {
-      border: "1px solid " + vipGrey2,
-      boxShadow: 'none',
-      '&:hover': {
-        border: "1px solid " + vipGold
-      },
-      '&:focus': {
-        border: "1px solid " + vipGold
-      }
-    });
-  }
-};
-
-var MultiSelect = function MultiSelect(props) {
-  return (0, _jsxRuntime.jsx)(_reactSelect["default"], _extends({}, props, {
-    styles: customStyles
-  }));
-};
-
-exports.MultiSelect = MultiSelect;

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

@@ -1,120 +0,0 @@
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-/**
- * External dependencies
- */
-import React, { useState } from 'react';
-/**
- * Internal dependencies
- */
-
-import { Box, Dialog, DialogMenu, DialogMenuItem, DialogDivider, Select, Button } from '..';
-export default {
-  title: 'Select',
-  component: Dialog
-};
-var options = [{
-  value: 'chocolate',
-  label: 'Chocolate'
-}, {
-  value: 'strawberry',
-  label: 'Strawberry'
-}, {
-  value: 'vanilla',
-  label: 'Vanilla'
-}];
-var DropdownContent = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DialogMenu, null, /*#__PURE__*/React.createElement(DialogMenuItem, null, "Profile"), /*#__PURE__*/React.createElement(DialogMenuItem, null, "Account"), /*#__PURE__*/React.createElement(DialogMenuItem, null, "Dark Mode")), /*#__PURE__*/React.createElement(DialogDivider, null), /*#__PURE__*/React.createElement(DialogMenu, null, /*#__PURE__*/React.createElement(DialogMenuItem, null, "Logout")));
-var DropdownTrigger = /*#__PURE__*/React.createElement(Button, {
-  variant: "secondary"
-}, "Trigger Dropdown");
-export var Multi = function Multi() {
-  var _useState = useState([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
-  return /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      mr: 2,
-      width: 400
-    }
-  }, /*#__PURE__*/React.createElement(Select, {
-    label: "Type",
-    value: value,
-    isMulti: true,
-    placeholder: "Select domains...",
-    options: options,
-    onChange: function onChange(newValue) {
-      return setValue(newValue);
-    }
-  }));
-};
-export var Single = function Single() {
-  var _useState3 = useState([]),
-      _useState4 = _slicedToArray(_useState3, 2),
-      value = _useState4[0],
-      setValue = _useState4[1];
-
-  return /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      mr: 2,
-      width: 200
-    }
-  }, /*#__PURE__*/React.createElement(Select, {
-    label: "User",
-    value: value,
-    placeholder: "Select a domain...",
-    options: options,
-    onChange: function onChange(newValue) {
-      return setValue(newValue);
-    }
-  }));
-};
-export var Inline = function Inline() {
-  var _useState5 = useState([]),
-      _useState6 = _slicedToArray(_useState5, 2),
-      value = _useState6[0],
-      setValue = _useState6[1];
-
-  return /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      mr: 2,
-      width: 200
-    }
-  }, /*#__PURE__*/React.createElement(Select, {
-    label: "User",
-    value: value,
-    isInline: true,
-    isMulti: true,
-    noneLabel: "Everyone",
-    placeholder: "Filter by user...",
-    options: options,
-    onChange: function onChange(newValue) {
-      return setValue(newValue);
-    }
-  }));
-};
-export var DropdownMenu = function DropdownMenu() {
-  return /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      mr: 2,
-      width: 200
-    }
-  }, /*#__PURE__*/React.createElement(Dialog, {
-    trigger: DropdownTrigger,
-    content: DropdownContent,
-    sx: {
-      width: 200
-    }
-  }));
-};

package/build/system/Grid/Grid.stories.js

@@ -1,16 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-/**
- * Internal dependencies
- */
-
-import { Grid } from '..';
-export default {
-  title: 'Grid',
-  component: Grid
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Grid, null, "Hello");
-};

package/build/system/Heading/Heading.stories.js

@@ -1,28 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-/**
- * Internal dependencies
- */
-
-import { Box, Heading } from '..';
-export default {
-  title: 'Heading',
-  component: Heading
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Heading, {
-    variant: "h1"
-  }, "Your Applications"), /*#__PURE__*/React.createElement(Heading, {
-    variant: "h2"
-  }, "Heading Two"), /*#__PURE__*/React.createElement(Heading, {
-    variant: "h3"
-  }, "Heading Three"), /*#__PURE__*/React.createElement(Heading, {
-    variant: "h4"
-  }, "Heading Four"), /*#__PURE__*/React.createElement(Heading, {
-    variant: "h5"
-  }, "Heading Five"), /*#__PURE__*/React.createElement(Heading, {
-    variant: "caps"
-  }, "Heading Caps"));
-};

package/build/system/Link/Link.stories.js

@@ -1,19 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-/**
- * Internal dependencies
- */
-
-import { Link } from '..';
-export default {
-  title: 'Link',
-  component: Link
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Link, {
-    as: "a",
-    href: "#!"
-  }, "Hello");
-};

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

@@ -1,90 +0,0 @@
-/** @jsx jsx */
-
-/**
- * External dependencies
- */
-import { jsx } from 'theme-ui';
-/**
- * Internal dependencies
- */
-
-import { Card, Heading, Notice, Text } from '..';
-export default {
-  title: '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
-    }
-  }));
-};

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

@@ -1,19 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-/**
- * Internal dependencies
- */
-
-import { Notification } from '..';
-export default {
-  title: 'Notification',
-  component: Notification
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Notification, {
-    title: "My first notification",
-    subTitle: "Use when providing success or error feedback on global action"
-  });
-};

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

@@ -1,34 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-/**
- * Internal dependencies
- */
-
-import { Box, OptionRow } from '..';
-export default {
-  title: 'OptionRow',
-  component: OptionRow
-}; // eslint-disable-next-line max-len
-
-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, {
-    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"
-  }));
-};

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

@@ -1,21 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-/**
- * Internal dependencies
- */
-
-import { Progress } from '..';
-export default {
-  title: 'Progress',
-  component: Progress
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Progress, {
-    max: 1,
-    value: 1 / 2,
-    steps: ['Downloading Data', 'Importing Data...', 'Finalizing'],
-    activeStep: 1
-  });
-};

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

@@ -1,16 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-/**
- * Internal dependencies
- */
-
-import { Spinner } from '..';
-export default {
-  title: 'Spinner',
-  component: Spinner
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Spinner, null);
-};

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

@@ -1,50 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-/**
- * Internal dependencies
- */
-
-import { Table, TableRow, Flex, Heading, Text } from '..';
-export default {
-  title: '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")]
-  })));
-};

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

@@ -1,18 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-/**
- * Internal dependencies
- */
-
-import { Tabs, TabItem } from '..';
-export default {
-  title: '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)"));
-};

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

@@ -1,16 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-/**
- * Internal dependencies
- */
-
-import { Text } from '..';
-export default {
-  title: '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.", ' ');
-};

package/build/system/Timeline/Timeline.stories.js

@@ -1,29 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-/**
- * Internal dependencies
- */
-
-import { Timeline, Grid, Box } from '..';
-export default {
-  title: 'Timeline',
-  component: Timeline
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid, {
-    gap: 2,
-    columns: [2, '100px 300px'],
-    sx: {
-      mb: '20px'
-    }
-  }, /*#__PURE__*/React.createElement(Timeline, {
-    time: "7pm"
-  }), /*#__PURE__*/React.createElement(Box, null, "It looks like everything is recovered now. You can forget about the last event.")), /*#__PURE__*/React.createElement(Grid, {
-    gap: 2,
-    columns: [2, '100px 200px']
-  }, /*#__PURE__*/React.createElement(Timeline, {
-    time: "6pm"
-  }), /*#__PURE__*/React.createElement(Box, null, "At this particular moment in the day, something happened with your environment.")));
-};

package/build/system/Tooltip/Tooltip.stories.js

@@ -1,29 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-/**
- * Internal dependencies
- */
-
-import { Flex, Heading, Tooltip, Text, Link } from '..';
-export default {
-  title: 'Tooltip',
-  component: Tooltip
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Flex, {
-    sx: {
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/React.createElement(Heading, {
-    sx: {
-      mb: 0,
-      mr: 2
-    }
-  }, "My Section Heading"), /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(Text, {
-    sx: {
-      fontSize: 1
-    }
-  }, "This is a tooltip that can be used to describe various pieces of functionality.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Link, null, "Find out more \u2192"))));
-};

package/build/system/UsageChart/UsageChart.js

@@ -1,60 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.UsageChart = void 0;
-
-var _framerMotion = require("framer-motion");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-/**
- * External dependencies
- */
-var UsageChart = function UsageChart(_ref) {
-  var total = _ref.total,
-      max = _ref.max,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'primary' : _ref$variant;
-  var width = total / max * 100 + '%';
-  var formattedTotal = total;
-
-  if (total > 1000000) {
-    formattedTotal = (total / 1000000).toFixed(2) + "M";
-  } else if (total > 1000) {
-    formattedTotal = (total / 1000).toFixed(2) + "K";
-  }
-
-  return (0, _jsxRuntime.jsx)("div", {
-    sx: {
-      height: variant === 'primary' ? 32 : 8,
-      overflow: 'hidden',
-      backgroundColor: variant === 'primary' ? 'border' : 'transparent'
-    },
-    children: (0, _jsxRuntime.jsx)(_framerMotion.motion.div, {
-      initial: {
-        width: 0
-      },
-      animate: {
-        width: width
-      },
-      transition: {
-        duration: 0.7
-      },
-      sx: {
-        height: '100%',
-        backgroundColor: variant === 'primary' ? 'primary' : 'grey.40'
-      }
-    })
-  });
-};
-
-exports.UsageChart = UsageChart;
-UsageChart.propTypes = {
-  total: _propTypes["default"].number,
-  max: _propTypes["default"].number,
-  variant: _propTypes["default"].string
-};

package/build/system/UsageChart/UsageChart.stories.js

@@ -1,20 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-/**
- * Internal dependencies
- */
-
-import { UsageChart } from '..';
-export default {
-  title: 'UsageChart',
-  component: UsageChart
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(UsageChart, {
-    total: 50,
-    max: 75,
-    variant: "primary"
-  });
-};

package/build/system/UsageChart/index.js

@@ -1,7 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-
-var _UsageChart = require("./UsageChart");
-
-exports.UsageChart = _UsageChart.UsageChart;

package/build/system/Wizard/Wizard.stories.js

@@ -1,55 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-/**
- * Internal dependencies
- */
-
-import { Wizard, Flex, Box, Heading, Label, Input, Button } from '..';
-export default {
-  title: 'Wizard',
-  component: Wizard
-};
-export var Default = function Default() {
-  var steps = [{
-    title: 'Choose Domain',
-    subTitle: 'You can bring a domain name you already own, or buy a new one.',
-    children: /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Label, null, "Domain"), /*#__PURE__*/React.createElement(Input, {
-      autoFocus: true,
-      placeholder: "yourdomain.com"
-    }), /*#__PURE__*/React.createElement(Button, null, "Continue"))
-  }, {
-    title: 'Configure DNS'
-  }, {
-    title: 'Configure Certificate'
-  }, {
-    title: 'Verify Domain'
-  }];
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex, {
-    sx: {
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      flex: '1 1 auto'
-    }
-  }, /*#__PURE__*/React.createElement(Heading, {
-    variant: "h1",
-    sx: {
-      display: 'flex',
-      alignItems: 'center',
-      mb: 1
-    }
-  }, "Add Domain:", ' ', /*#__PURE__*/React.createElement("span", {
-    sx: {
-      color: 'muted',
-      ml: 2
-    }
-  }, "Production")))), /*#__PURE__*/React.createElement(Box, {
-    mt: 4
-  }, /*#__PURE__*/React.createElement(Wizard, {
-    activeStep: 0,
-    steps: steps
-  })));
-};