@automattic/vip-design-system 0.10.2 → 0.11.1

package/build/system/ResourceList/ResourceList.js

@@ -9,6 +9,8 @@ var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _react = require("react");
+
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
@@ -85,6 +87,37 @@ var ResourceList = function ResourceList(_ref) {
     });
   };
 
+  var renderGoupedItems = function renderGoupedItems() {
+    return (0, _react.useMemo)(function () {
+      return Object.keys(groupedItems).map(function (groupName, index) {
+        return (0, _jsxRuntime.jsxs)(_.Box, {
+          sx: {
+            mb: 4
+          },
+          as: "li",
+          children: [(0, _jsxRuntime.jsx)(_.Heading, {
+            variant: "h4",
+            as: "h4",
+            sx: {
+              mb: 3
+            },
+            children: groupName
+          }), (0, _jsxRuntime.jsx)(_.Box, {
+            as: "ul",
+            sx: {
+              listStyleType: 'none',
+              m: 0,
+              p: 0,
+              borderTop: '1px solid',
+              borderColor: 'border'
+            },
+            children: renderItemList(groupedItems[groupName])
+          })]
+        }, index);
+      });
+    }, [groupedItems]);
+  };
+
   return (0, _jsxRuntime.jsx)(_.Box, {
     as: "ul",
     sx: {
@@ -93,31 +126,7 @@ var ResourceList = function ResourceList(_ref) {
       p: 0
     },
     className: "vip-resource-list-component",
-    children: groupedByDay ? Object.keys(groupedItems).map(function (groupName, index) {
-      return (0, _jsxRuntime.jsxs)(_.Box, {
-        sx: {
-          mb: 4
-        },
-        children: [(0, _jsxRuntime.jsx)(_.Heading, {
-          variant: "h4",
-          as: "h4",
-          sx: {
-            mb: 3
-          },
-          children: groupName
-        }), (0, _jsxRuntime.jsx)(_.Box, {
-          as: "ul",
-          sx: {
-            listStyleType: 'none',
-            m: 0,
-            p: 0,
-            borderTop: '1px solid',
-            borderColor: 'border'
-          },
-          children: renderItemList(groupedItems[groupName])
-        })]
-      }, index);
-    }) : renderItemList(items)
+    children: groupedByDay ? renderGoupedItems(groupedItems) : renderItemList(items)
   });
 };
 

package/build/system/ResourceList/ResourceList.stories.js

@@ -129,6 +129,7 @@ var Grouped = function Grouped() {
                 children: "#443"
               })]
             }), (0, _jsxRuntime.jsxs)(_.Text, {
+              as: "div",
               sx: {
                 mb: 0,
                 fontSize: 1,
@@ -337,6 +338,7 @@ var Relative = function Relative() {
                 children: "Running"
               })]
             }), (0, _jsxRuntime.jsxs)(_.Text, {
+              as: "div",
               sx: {
                 mb: 0,
                 color: 'muted',

package/build/system/ScreenReaderText/ScreenReader.test.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = require("@testing-library/react");
+
+require("@testing-library/jest-dom");
+
+var _ScreenReaderText = _interopRequireDefault(require("./ScreenReaderText"));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+describe('<ScreenReaderText />', function () {
+  it('should render correctly', function () {
+    var props = {};
+    var text = 'Hello there';
+
+    var _render = (0, _react.render)((0, _jsxRuntime.jsx)(_ScreenReaderText["default"], (0, _extends2["default"])({}, props, {
+      children: text
+    }))),
+        container = _render.container; // we're using the querySelector to ensure the class is rendered since it affects the A11Y
+    // in case it's removed it could compromise the A11Y of the components using it.
+
+
+    expect(container.querySelector('.screen-reader-text')).toBeInTheDocument();
+    expect(_react.screen.queryByText(text)).toBeInTheDocument();
+  });
+});

package/build/system/ScreenReaderText/ScreenReaderText.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = ScreenReaderText;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function ScreenReaderText(props) {
+  return (0, _jsxRuntime.jsx)("span", (0, _extends2["default"])({
+    className: "screen-reader-text",
+    sx: {
+      border: 'none',
+      clip: 'rect(1px, 1px, 1px, 1px)',
+      clipPath: 'inset(50%)',
+      height: '1px',
+      margin: '-1px',
+      overflow: 'hidden',
+      padding: '0',
+      position: 'absolute',
+      width: '1px',
+      wordWrap: 'normal !important'
+    }
+  }, props, {
+    children: props.children
+  }));
+}
+/**
+ * propTypes
+ */
+
+
+ScreenReaderText.propTypes = {
+  children: _propTypes["default"].node.isRequired
+};

package/build/system/ScreenReaderText/index.js

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

package/build/system/Table/Table.js

@@ -11,29 +11,29 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["sx"];
+var _excluded = ["sx", "className"];
 
 var Table = function Table(_ref) {
   var sx = _ref.sx,
+      className = _ref.className,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
-  return (0, _jsxRuntime.jsx)("div", {
-    sx: {
-      overflowX: 'auto'
-    },
-    children: (0, _jsxRuntime.jsx)("table", (0, _extends2["default"])({
-      sx: (0, _extends2["default"])({
-        width: '100%',
-        minWidth: 1024
-      }, sx),
-      cellPadding: 0,
-      cellSpacing: 0
-    }, props))
-  });
+  return (0, _jsxRuntime.jsx)("table", (0, _extends2["default"])({
+    sx: (0, _extends2["default"])({
+      width: '100%',
+      minWidth: 1024
+    }, sx),
+    cellPadding: 0,
+    cellSpacing: 0,
+    className: (0, _classnames["default"])('vip-table-component', className)
+  }, props));
 };
 
 exports.Table = Table;
 Table.propTypes = {
-  sx: _propTypes["default"].object
+  sx: _propTypes["default"].object,
+  className: _propTypes["default"].any
 };

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

@@ -23,8 +23,8 @@ var Default = function Default() {
         head: true,
         cells: ['User', 'Command', 'Duration', 'Time']
       })
-    }), (0, _jsxRuntime.jsx)("tbody", {
-      children: (0, _jsxRuntime.jsx)(_.TableRow, {
+    }), (0, _jsxRuntime.jsxs)("tbody", {
+      children: [(0, _jsxRuntime.jsx)(_.TableRow, {
         cells: [(0, _jsxRuntime.jsx)(_.Flex, {
           sx: {
             alignItems: 'center'
@@ -56,7 +56,50 @@ var Default = function Default() {
           },
           children: "11th Mar 2020, 16:49:22"
         }, "time")]
-      })
+      }), (0, _jsxRuntime.jsxs)(_.TableRow, {
+        children: [(0, _jsxRuntime.jsx)(_.TableCell, {
+          sx: {
+            backgroundColor: 'lightgray'
+          },
+          children: (0, _jsxRuntime.jsx)(_.Flex, {
+            sx: {
+              alignItems: 'center'
+            },
+            children: (0, _jsxRuntime.jsx)(_.Heading, {
+              variant: "h4",
+              sx: {
+                mb: 0
+              },
+              children: "simon"
+            })
+          }, "user")
+        }), (0, _jsxRuntime.jsx)(_.TableCell, {
+          children: (0, _jsxRuntime.jsx)(_.Heading, {
+            variant: "h4",
+            sx: {
+              mb: 0,
+              display: 'flex',
+              alignItems: 'center'
+            },
+            children: "wp posts list"
+          }, "command")
+        }), (0, _jsxRuntime.jsx)(_.TableCell, {
+          children: (0, _jsxRuntime.jsx)(_.Text, {
+            sx: {
+              mb: 0
+            },
+            children: "3s"
+          }, "duration")
+        }), (0, _jsxRuntime.jsx)(_.TableCell, {
+          children: (0, _jsxRuntime.jsx)(_.Text, {
+            sx: {
+              mb: 0,
+              color: 'muted'
+            },
+            children: "3rd May 2021, 13:22:13"
+          }, "time")
+        })]
+      })]
     })]
   });
 };

package/build/system/Table/TableCell.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.TableCell = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ = require("../");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+var _excluded = ["head", "children"];
+
+var TableCell = function TableCell(_ref) {
+  var head = _ref.head,
+      children = _ref.children,
+      rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var sx = (0, _extends2["default"])({
+    borderBottom: '1px solid',
+    borderTop: head ? '1px solid' : 'none',
+    // borderColor should come after borderTop so it can override it
+    borderColor: 'border',
+    fontWeight: 'body',
+    px: 3,
+    py: 2,
+    textAlign: 'left',
+    '&:first-of-type': {
+      pl: 5
+    }
+  }, rest.sx);
+  return (0, _jsxRuntime.jsx)(_.Box, (0, _extends2["default"])({
+    as: head ? 'th' : 'td'
+  }, (0, _extends2["default"])({}, rest, {
+    sx: sx
+  }), {
+    children: head ? (0, _jsxRuntime.jsx)(_.Heading, {
+      variant: "caps",
+      as: "div",
+      sx: {
+        mb: 0
+      },
+      children: children
+    }) : children
+  }));
+};
+
+exports.TableCell = TableCell;
+TableCell.propTypes = {
+  children: _propTypes["default"].node,
+  head: _propTypes["default"].bool
+};

package/build/system/Table/TableRow.js

@@ -7,7 +7,7 @@ exports.TableRow = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _ = require("../");
+var _TableCell = require("./TableCell");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
@@ -24,9 +24,9 @@ var TableRow = function TableRow(_ref) {
   var onClick = _ref.onClick,
       _ref$head = _ref.head,
       head = _ref$head === void 0 ? false : _ref$head,
-      _ref$rowHead = _ref.rowHead,
-      rowHead = _ref$rowHead === void 0 ? false : _ref$rowHead,
-      cells = _ref.cells;
+      _ref$cells = _ref.cells,
+      cells = _ref$cells === void 0 ? [] : _ref$cells,
+      children = _ref.children;
   var hoverStyles = onClick ? {
     cursor: 'pointer',
     '&:hover': {
@@ -41,69 +41,24 @@ var TableRow = function TableRow(_ref) {
     }
   };
 
-  return (0, _jsxRuntime.jsx)("tr", {
+  return (0, _jsxRuntime.jsxs)("tr", {
     sx: hoverStyles,
     onClick: onClick,
     tabIndex: onClick ? 0 : null,
     onKeyDown: handleKeyPress,
-    children: cells.map(function (cell, index) {
-      return (0, _jsxRuntime.jsx)(TableCell, {
-        cell: cell,
+    children: [cells.map(function (cell, index) {
+      return (0, _jsxRuntime.jsx)(_TableCell.TableCell, {
         head: head,
-        isRowHead: index === 0 && rowHead
+        children: cell
       }, index);
-    })
+    }), children]
   });
 };
 
 exports.TableRow = TableRow;
-
-var TableCell = function TableCell(_ref2) {
-  var head = _ref2.head,
-      isRowHead = _ref2.isRowHead,
-      cell = _ref2.cell;
-  var scope = null;
-
-  if (head) {
-    scope = 'col';
-  } else if (isRowHead) {
-    scope = 'row';
-  }
-
-  return (0, _jsxRuntime.jsx)(_.Box, {
-    as: isRowHead || head ? 'th' : 'td',
-    scope: scope,
-    sx: {
-      px: 3,
-      py: 2,
-      textAlign: 'left',
-      borderBottom: '1px solid',
-      fontWeight: 'body',
-      borderTop: head ? '1px solid' : 'none',
-      borderColor: 'border',
-      '&:first-of-type': {
-        pl: 5
-      }
-    },
-    children: head ? (0, _jsxRuntime.jsx)(_.Heading, {
-      variant: "caps",
-      as: "div",
-      sx: {
-        mb: 0
-      },
-      children: cell
-    }) : cell
-  });
-};
-
-TableCell.propTypes = {
-  head: _propTypes["default"].bool,
-  isRowHead: _propTypes["default"].bool,
-  cell: _propTypes["default"].node
-};
 TableRow.propTypes = {
-  onClick: _propTypes["default"].func,
-  head: _propTypes["default"].bool,
   cells: _propTypes["default"].array,
-  rowHead: _propTypes["default"].bool
+  children: _propTypes["default"].node,
+  head: _propTypes["default"].bool,
+  onClick: _propTypes["default"].func
 };

package/build/system/Table/index.js

@@ -8,4 +8,8 @@ exports.Table = _Table.Table;
 
 var _TableRow = require("./TableRow");
 
-exports.TableRow = _TableRow.TableRow;
+exports.TableRow = _TableRow.TableRow;
+
+var _TableCell = require("./TableCell");
+
+exports.TableCell = _TableCell.TableCell;

package/build/system/Time/index.js

@@ -88,7 +88,7 @@ var Time = function Time(_ref) {
 
 exports.Time = Time;
 Time.propTypes = {
-  time: _propTypes["default"].string,
+  time: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].instanceOf(Date)]),
   timeOnly: _propTypes["default"].bool,
   relativeTime: _propTypes["default"].bool,
   className: _propTypes["default"].any

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

@@ -61,7 +61,7 @@ var Default = function Default() {
             alignItems: 'center',
             mb: 1
           },
-          children: ["Add Domain:", ' ', (0, _jsxRuntime.jsx)("span", {
+          children: ["Add Domain: ", (0, _jsxRuntime.jsx)("span", {
             sx: {
               color: 'muted',
               ml: 2

package/build/system/index.js

@@ -117,6 +117,7 @@ var _Table = require("./Table");
 
 exports.Table = _Table.Table;
 exports.TableRow = _Table.TableRow;
+exports.TableCell = _Table.TableCell;
 
 var _Tabs = require("./Tabs");
 

package/package.json

@@ -1,15 +1,16 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.10.2",
+	"version": "0.11.1",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",
 		"build": "cross-env NODE_ENV=production babel src --out-dir build",
-		"format": "eslint . --fix",
+		"format": "prettier --write \"src/**/*.{js,ts,tsx,md,mdx,json}\"",
+		"format:check": "prettier --list-different -- \"src/**/*.{js,ts,tsx,md,mdx,json}\"",
 		"jest": "NODE_ENV=test jest --detectOpenHandles --env=jsdom",
 		"jest:coverage": "npm run jest && open-cli ./coverage/index.html",
 		"jest:watch": "npm run jest --watch",
-		"lint": "eslint . -f json | eslines --quiet",
+		"lint": "eslint . --fix --max-warnings 0",
 		"storybook": "start-storybook -p 6006",
 		"dev": "npm run storybook",
 		"test": "npm run lint && npm run jest",
@@ -92,12 +93,14 @@
 		"cross-env": "^7.0.3",
 		"eslines": "2.1.0",
 		"eslint": "7.32.0",
+		"eslint-config-prettier": "^8.5.0",
 		"eslint-config-react-app": "6.0.0",
-		"eslint-config-wpvip": "automattic/eslint-config-wpvip#c6605d1c3a545d43ac2149cd464ec3c38ebc58d5",
+		"eslint-config-wpvip": "github:automattic/eslint-config-wpvip#b73cd84",
 		"eslint-plugin-jest": "24.4.2",
 		"eslint-plugin-json": "3.1.0",
 		"eslint-plugin-jsx-a11y": "6.4.1",
 		"eslint-plugin-no-async-foreach": "0.1.1",
+		"eslint-plugin-prettier": "^4.2.1",
 		"eslint-plugin-react": "7.25.3",
 		"eslint-plugin-storybook": "^0.5.12",
 		"eslint-plugin-wpcalypso": "4.1.0",
@@ -109,6 +112,7 @@
 		"jsdom-global": "3.0.2",
 		"open-cli": "^7.0.1",
 		"optimize-css-assets-webpack-plugin": "^6.0.1",
+		"prettier": "npm:wp-prettier@^2.6.2",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
 		"react-input-autosize": "^3.0.0",

package/src/system/Avatar/Avatar.js

@@ -37,6 +37,7 @@ const Avatar = ( {
 			textAlign: 'center',
 		} }
 		className={ classNames( 'vip-avatar-component', className ) }
+		aria-hidden="true"
 		{ ...props }
 	>
 		{ src ? (

package/src/system/Avatar/index.js

@@ -1,4 +1,3 @@
-
 /**
  * Internal dependencies
  */

package/src/system/Badge/index.js

@@ -1,4 +1,3 @@
-
 /**
  * Internal dependencies
  */

package/src/system/BlankState/BlankState.js

@@ -21,11 +21,14 @@ const BlankState = ( {
 	className = null,
 } ) => {
 	return (
-		<Box sx={{ textAlign: 'center', padding: 5 }} className={ classNames( 'vip-blank-state-component', className ) }>
-			{icon ? icon : <img src={image} sx={{ mb: 3 }} alt={imageAlt} />}
-			<Heading variant="h4">{title}</Heading>
-			<Text>{body}</Text>
-			<Box sx={{ mt: 3 }}>{cta}</Box>
+		<Box
+			sx={ { textAlign: 'center', padding: 5 } }
+			className={ classNames( 'vip-blank-state-component', className ) }
+		>
+			{ icon ? icon : <img src={ image } sx={ { mb: 3 } } alt={ imageAlt } /> }
+			<Heading variant="h4">{ title }</Heading>
+			<Text>{ body }</Text>
+			<Box sx={ { mt: 3 } }>{ cta }</Box>
 		</Box>
 	);
 };

package/src/system/BlankState/BlankState.stories.jsx

@@ -8,16 +8,17 @@ export default {
 	component: BlankState,
 };
 
-// eslint-disable-next-line max-len
-const 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";
+const image2 =
+	// eslint-disable-next-line max-len
+	"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 const Default = () => (
 	<BlankState
-		image={image2}
+		image={ image2 }
 		title="Power up your application"
 		body="Add-ons give you the ability to bolt on extra capabilities to
 your application, including logging, analytics and performance
 monitoring."
-		cta={<Link as="a">Explore add-ons →</Link>}
+		cta={ <Link as="a">Explore add-ons →</Link> }
 	/>
 );