@automattic/vip-design-system 0.26.5 → 0.26.7

package/build/system/Accordion/Accordion.js

@@ -26,9 +26,10 @@ var _Heading = require("../Heading");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["children"],
-    _excluded2 = ["children", "headingVariant"],
+    _excluded2 = ["children", "headingVariant", "sx"],
     _excluded3 = ["children", "icon"],
-    _excluded4 = ["children", "sx"];
+    _excluded4 = ["children", "sx"],
+    _excluded5 = ["sx", "children", "className"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -87,6 +88,8 @@ var Trigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forward
   var children = _ref2.children,
       _ref2$headingVariant = _ref2.headingVariant,
       headingVariant = _ref2$headingVariant === void 0 ? 'h3' : _ref2$headingVariant,
+      _ref2$sx = _ref2.sx,
+      sx = _ref2$sx === void 0 ? {} : _ref2$sx,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded2);
   return (0, _jsxRuntime.jsx)(_Heading.Heading, {
     sx: {
@@ -95,7 +98,7 @@ var Trigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forward
     },
     variant: headingVariant,
     children: (0, _jsxRuntime.jsxs)(AccordionPrimitive.Trigger, (0, _extends2["default"])({
-      sx: {
+      sx: (0, _extends2["default"])({
         color: 'heading',
         cursor: 'pointer',
         all: 'unset',
@@ -134,7 +137,7 @@ var Trigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forward
             return accordion.background.hover;
           }
         }
-      }
+      }, sx)
     }, props, {
       ref: forwardedRef,
       children: [children, (0, _jsxRuntime.jsx)(_md.MdChevronRight, {
@@ -155,7 +158,8 @@ exports.Trigger = Trigger;
 Trigger.displayName = 'Accordion.Trigger';
 Trigger.propTypes = {
   children: _propTypes["default"].node.isRequired,
-  headingVariant: _propTypes["default"].string
+  headingVariant: _propTypes["default"].string,
+  sx: _propTypes["default"].object
 };
 
 var TriggerWithIcon = /*#__PURE__*/_react["default"].forwardRef(function (_ref7, forwardedRef) {
@@ -200,6 +204,8 @@ var Content = /*#__PURE__*/_react["default"].forwardRef(function (_ref8, forward
       color: 'text',
       fontSize: 2,
       overflow: 'hidden',
+      px: 3,
+      py: 2,
       '&[data-state="open"]': {
         animation: slideDown + " 300ms cubic-bezier(0.87, 0, 0.13, 1)"
       },
@@ -209,13 +215,7 @@ var Content = /*#__PURE__*/_react["default"].forwardRef(function (_ref8, forward
     }, sx)
   }, props, {
     ref: forwardedRef,
-    children: (0, _jsxRuntime.jsx)("div", {
-      sx: {
-        px: 3,
-        py: 2
-      },
-      children: children
-    })
+    children: children
   }));
 });
 
@@ -229,21 +229,19 @@ Content.propTypes = {
 var Root = /*#__PURE__*/_react["default"].forwardRef(function (_ref9, forwardRef) {
   var _ref9$sx = _ref9.sx,
       sx = _ref9$sx === void 0 ? {} : _ref9$sx,
-      defaultValue = _ref9.defaultValue,
-      type = _ref9.type,
       children = _ref9.children,
-      className = _ref9.className;
-  return (0, _jsxRuntime.jsx)(AccordionPrimitive.Root, {
+      className = _ref9.className,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref9, _excluded5);
+  return (0, _jsxRuntime.jsx)(AccordionPrimitive.Root, (0, _extends2["default"])({
     className: (0, _classnames["default"])('vip-accordion-component', className),
     collapsible: true,
-    defaultValue: defaultValue,
     ref: forwardRef,
     sx: (0, _extends2["default"])({
       borderRadius: 6
-    }, sx),
-    type: type,
+    }, sx)
+  }, props, {
     children: children
-  });
+  }));
 });
 
 exports.Root = Root;

package/build/system/Form/Validation.js

@@ -27,7 +27,6 @@ var Validation = function Validation(_ref) {
       describedId = _ref$describedId === void 0 ? null : _ref$describedId,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var Icon = isValid ? _md.MdCheckCircle : _md.MdErrorOutline;
-  var IconLabel = isValid ? 'Valid' : 'Invalid';
   return (0, _jsxRuntime.jsxs)("p", (0, _extends2["default"])({
     sx: {
       color: isValid ? 'success' : 'error',
@@ -42,8 +41,7 @@ var Validation = function Validation(_ref) {
       sx: {
         mr: 1
       },
-      role: "img",
-      "aria-label": IconLabel
+      "aria-hidden": "true"
     }), children]
   }));
 };

package/build/system/NewForm/FormAutocomplete.js

@@ -27,9 +27,11 @@ var _FormSelectArrow = require("./FormSelectArrow");
 
 var _Label = require("../Form/Label");
 
+var _FormSelectSearch = require("./FormSelectSearch");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["isInline", "forLabel", "options", "label", "getOptionLabel", "getOptionValue", "onChange", "value", "showAllValues", "displayMenu", "id", "className"];
+var _excluded = ["isInline", "forLabel", "options", "label", "getOptionLabel", "getOptionValue", "onChange", "onInputChange", "value", "showAllValues", "searchIcon", "displayMenu", "noOptionsMessage", "id", "className"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -100,13 +102,34 @@ var defaultStyles = {
   '& .autocomplete__wrapper': {
     width: '100%'
   },
+  '& .autocomplete__option': {
+    borderColor: 'borders.2'
+  },
+  '& .autocomplete__option--odd': {
+    bg: 'backgroundSecondary'
+  },
+  '& .autocomplete__option:hover, & .autocomplete__option--focused': {
+    bg: 'midnight',
+    borderColor: 'midnight'
+  },
   '& .autocomplete__input--show-all-values': {
     paddingRight: 0
+  },
+  '& .autocomplete__hint': {
+    border: 'none',
+    paddingLeft: 3,
+    minHeight: '27px',
+    lineHeight: '27px'
   }
 };
 var inlineStyles = {
   borderWidth: 0
 };
+var searchIconStyles = {
+  '& .autocomplete__input.autocomplete__input--show-all-values': {
+    paddingLeft: '30px'
+  }
+};
 
 var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var isInline = _ref.isInline,
@@ -117,11 +140,18 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       getOptionValue = _ref.getOptionValue,
       _ref$onChange = _ref.onChange,
       onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+      onInputChange = _ref.onInputChange,
       value = _ref.value,
       _ref$showAllValues = _ref.showAllValues,
       showAllValues = _ref$showAllValues === void 0 ? true : _ref$showAllValues,
+      _ref$searchIcon = _ref.searchIcon,
+      searchIcon = _ref$searchIcon === void 0 ? false : _ref$searchIcon,
       _ref$displayMenu = _ref.displayMenu,
       displayMenu = _ref$displayMenu === void 0 ? 'overlay' : _ref$displayMenu,
+      _ref$noOptionsMessage = _ref.noOptionsMessage,
+      noOptionsMessage = _ref$noOptionsMessage === void 0 ? function () {
+    return 'No results found.';
+  } : _ref$noOptionsMessage,
       _ref$id = _ref.id,
       id = _ref$id === void 0 ? 'vip-autocomplete' : _ref$id,
       className = _ref.className,
@@ -163,13 +193,16 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       onChange(getOptionByLabel(inputValue), inputValue);
     }
   }, [onChange, getOptionByLabel]);
+  var handleTypeChange = (0, _react.useCallback)(function (query) {
+    return options.filter(function (option) {
+      return optionLabel(option).toLowerCase().indexOf(query.toLowerCase()) >= 0;
+    });
+  }, [options]);
   var suggest = (0, _react.useCallback)(function (query, populateResults) {
     var data = options;
 
     if (isDirty) {
-      data = options.filter(function (option) {
-        return optionLabel(option).toLowerCase().indexOf(query.toLowerCase()) >= 0;
-      });
+      data = onInputChange ? onInputChange(query) : handleTypeChange(query);
     }
 
     populateResults(data.map(function (option) {
@@ -190,18 +223,19 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
   return (0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames["default"])('vip-form-autocomplete-component', className),
     children: [label && !isInline && (0, _jsxRuntime.jsx)(SelectLabel, {}), (0, _jsxRuntime.jsx)("div", {
-      sx: (0, _extends2["default"])({}, defaultStyles, isInline && inlineStyles),
+      sx: (0, _extends2["default"])({}, defaultStyles, isInline && inlineStyles, searchIcon && searchIconStyles),
       children: (0, _jsxRuntime.jsxs)(_FormSelectContent.FormSelectContent, {
         isInline: inlineLabel,
         label: inlineLabel ? (0, _jsxRuntime.jsx)(SelectLabel, {}) : null,
-        children: [(0, _jsxRuntime.jsx)(_react2["default"], (0, _extends2["default"])({
+        children: [searchIcon && (0, _jsxRuntime.jsx)(_FormSelectSearch.FormSelectSearch, {}), (0, _jsxRuntime.jsx)(_react2["default"], (0, _extends2["default"])({
           id: id,
           showAllValues: showAllValues,
           ref: forwardRef,
           source: suggest,
           defaultValue: value,
           displayMenu: displayMenu,
-          onConfirm: onValueChange
+          onConfirm: onValueChange,
+          tNoResults: noOptionsMessage
         }, props)), (0, _jsxRuntime.jsx)(_FormSelectArrow.FormSelectArrow, {})]
       })
     })]
@@ -212,6 +246,7 @@ exports.FormAutocomplete = FormAutocomplete;
 FormAutocomplete.propTypes = {
   id: _propTypes["default"].string,
   showAllValues: _propTypes["default"].bool,
+  searchIcon: _propTypes["default"].bool,
   isInline: _propTypes["default"].bool,
   forLabel: _propTypes["default"].string,
   value: _propTypes["default"].string,
@@ -220,6 +255,8 @@ FormAutocomplete.propTypes = {
   options: _propTypes["default"].array,
   getOptionLabel: _propTypes["default"].func,
   getOptionValue: _propTypes["default"].func,
+  onInputChange: _propTypes["default"].func,
+  noOptionsMessage: _propTypes["default"].func,
   onChange: _propTypes["default"].func,
   className: _propTypes["default"].any
 };

package/build/system/NewForm/FormAutocomplete.stories.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.WithDefaultValue = exports.Inline = exports.Default = void 0;
+exports["default"] = exports.WithSearchIcon = exports.WithDefaultValue = exports.WithCustomMessages = exports.Inline = exports.Default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -107,4 +107,29 @@ var WithDefaultValue = function WithDefaultValue() {
   });
 };
 
-exports.WithDefaultValue = WithDefaultValue;
+exports.WithDefaultValue = WithDefaultValue;
+
+var WithSearchIcon = function WithSearchIcon() {
+  var customArgs = (0, _extends2["default"])({}, args, {
+    searchIcon: true
+  });
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, customArgs))
+  });
+};
+
+exports.WithSearchIcon = WithSearchIcon;
+
+var WithCustomMessages = function WithCustomMessages() {
+  var customArgs = (0, _extends2["default"])({}, args, {
+    noOptionsMessage: function noOptionsMessage() {
+      return 'No data';
+    },
+    placeholder: 'Type to search'
+  });
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, customArgs))
+  });
+};
+
+exports.WithCustomMessages = WithCustomMessages;

package/build/system/NewForm/FormSelectSearch.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.FormSelectSearch = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _md = require("react-icons/md");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+var FormSelectSearch = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
+  return (0, _jsxRuntime.jsx)(_md.MdSearch, (0, _extends2["default"])({
+    ref: forwardRef,
+    "aria-hidden": "true",
+    size: 24,
+    sx: {
+      position: 'absolute',
+      paddingRight: 2,
+      left: 2,
+      pointerEvents: 'none'
+    }
+  }, props));
+});
+
+exports.FormSelectSearch = FormSelectSearch;
+FormSelectSearch.displayName = 'FormSelectSearch';

package/package.json

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

package/src/system/Accordion/Accordion.js

@@ -57,7 +57,7 @@ Item.propTypes = {
 };
 
 export const Trigger = React.forwardRef(
-	( { children, headingVariant = 'h3', ...props }, forwardedRef ) => (
+	( { children, headingVariant = 'h3', sx = {}, ...props }, forwardedRef ) => (
 		<Heading
 			sx={ {
 				all: 'unset',
@@ -90,6 +90,7 @@ export const Trigger = React.forwardRef(
 						'.vip-accordion-trigger-indicator': { transform: 'rotate(270deg)' },
 					},
 					'&:hover': { backgroundColor: ( { accordion } ) => accordion.background.hover },
+					...sx,
 				} }
 				{ ...props }
 				ref={ forwardedRef }
@@ -115,6 +116,7 @@ Trigger.displayName = 'Accordion.Trigger';
 Trigger.propTypes = {
 	children: PropTypes.node.isRequired,
 	headingVariant: PropTypes.string,
+	sx: PropTypes.object,
 };
 
 export const TriggerWithIcon = React.forwardRef( ( { children, icon, ...props }, forwardedRef ) => (
@@ -139,6 +141,8 @@ export const Content = React.forwardRef( ( { children, sx = {}, ...props }, forw
 				color: 'text',
 				fontSize: 2,
 				overflow: 'hidden',
+				px: 3,
+				py: 2,
 
 				'&[data-state="open"]': {
 					animation: `${ slideDown } 300ms cubic-bezier(0.87, 0, 0.13, 1)`,
@@ -151,14 +155,7 @@ export const Content = React.forwardRef( ( { children, sx = {}, ...props }, forw
 			{ ...props }
 			ref={ forwardedRef }
 		>
-			<div
-				sx={ {
-					px: 3,
-					py: 2,
-				} }
-			>
-				{ children }
-			</div>
+			{ children }
 		</AccordionPrimitive.Content>
 	);
 } );
@@ -170,23 +167,20 @@ Content.propTypes = {
 	sx: PropTypes.object,
 };
 
-const Root = React.forwardRef(
-	( { sx = {}, defaultValue, type, children, className }, forwardRef ) => (
-		<AccordionPrimitive.Root
-			className={ classNames( 'vip-accordion-component', className ) }
-			collapsible
-			defaultValue={ defaultValue }
-			ref={ forwardRef }
-			sx={ {
-				borderRadius: 6,
-				...sx,
-			} }
-			type={ type }
-		>
-			{ children }
-		</AccordionPrimitive.Root>
-	)
-);
+const Root = React.forwardRef( ( { sx = {}, children, className, ...props }, forwardRef ) => (
+	<AccordionPrimitive.Root
+		className={ classNames( 'vip-accordion-component', className ) }
+		collapsible
+		ref={ forwardRef }
+		sx={ {
+			borderRadius: 6,
+			...sx,
+		} }
+		{ ...props }
+	>
+		{ children }
+	</AccordionPrimitive.Root>
+) );
 
 Root.displayName = 'Accordion';
 

package/src/system/Form/Validation.js

@@ -12,7 +12,6 @@ import { MdErrorOutline, MdCheckCircle } from 'react-icons/md';
 
 const Validation = ( { children, isValid, describedId = null, ...props } ) => {
 	const Icon = isValid ? MdCheckCircle : MdErrorOutline;
-	const IconLabel = isValid ? 'Valid' : 'Invalid';
 
 	return (
 		<p
@@ -26,7 +25,7 @@ const Validation = ( { children, isValid, describedId = null, ...props } ) => {
 			id={ describedId ? `describe-${ describedId }-validation` : undefined }
 			{ ...props }
 		>
-			<Icon sx={ { mr: 1 } } role="img" aria-label={ IconLabel } />
+			<Icon sx={ { mr: 1 } } aria-hidden="true" />
 			{ children }
 		</p>
 	);

package/src/system/NewForm/FormAutocomplete.js

@@ -15,6 +15,7 @@ import css from './FormAutocomplete.css';
 import { FormSelectContent } from './FormSelectContent';
 import { FormSelectArrow } from './FormSelectArrow';
 import { Label } from '../Form/Label';
+import { FormSelectSearch } from './FormSelectSearch';
 
 const defaultStyles = {
 	width: '100%',
@@ -59,15 +60,37 @@ const defaultStyles = {
 	'& .autocomplete__wrapper': {
 		width: '100%',
 	},
+	'& .autocomplete__option': {
+		borderColor: 'borders.2',
+	},
+	'& .autocomplete__option--odd': {
+		bg: 'backgroundSecondary',
+	},
+	'& .autocomplete__option:hover, & .autocomplete__option--focused': {
+		bg: 'midnight',
+		borderColor: 'midnight',
+	},
 	'& .autocomplete__input--show-all-values': {
 		paddingRight: 0,
 	},
+	'& .autocomplete__hint': {
+		border: 'none',
+		paddingLeft: 3,
+		minHeight: '27px',
+		lineHeight: '27px',
+	},
 };
 
 const inlineStyles = {
 	borderWidth: 0,
 };
 
+const searchIconStyles = {
+	'& .autocomplete__input.autocomplete__input--show-all-values': {
+		paddingLeft: '30px',
+	},
+};
+
 const FormAutocomplete = React.forwardRef(
 	(
 		{
@@ -78,9 +101,12 @@ const FormAutocomplete = React.forwardRef(
 			getOptionLabel,
 			getOptionValue,
 			onChange = () => {},
+			onInputChange,
 			value,
 			showAllValues = true,
+			searchIcon = false,
 			displayMenu = 'overlay',
+			noOptionsMessage = () => 'No results found.',
 			id = 'vip-autocomplete',
 			className,
 			...props
@@ -122,13 +148,19 @@ const FormAutocomplete = React.forwardRef(
 			[ onChange, getOptionByLabel ]
 		);
 
+		const handleTypeChange = useCallback(
+			query =>
+				options.filter(
+					option => optionLabel( option ).toLowerCase().indexOf( query.toLowerCase() ) >= 0
+				),
+			[ options ]
+		);
+
 		const suggest = useCallback(
 			( query, populateResults ) => {
 				let data = options;
 				if ( isDirty ) {
-					data = options.filter(
-						option => optionLabel( option ).toLowerCase().indexOf( query.toLowerCase() ) >= 0
-					);
+					data = onInputChange ? onInputChange( query ) : handleTypeChange( query );
 				}
 				populateResults( data.map( option => optionLabel( option ) ) );
 			},
@@ -157,11 +189,18 @@ const FormAutocomplete = React.forwardRef(
 			<div className={ classNames( 'vip-form-autocomplete-component', className ) }>
 				{ label && ! isInline && <SelectLabel /> }
 
-				<div sx={ { ...defaultStyles, ...( isInline && inlineStyles ) } }>
+				<div
+					sx={ {
+						...defaultStyles,
+						...( isInline && inlineStyles ),
+						...( searchIcon && searchIconStyles ),
+					} }
+				>
 					<FormSelectContent
 						isInline={ inlineLabel }
 						label={ inlineLabel ? <SelectLabel /> : null }
 					>
+						{ searchIcon && <FormSelectSearch /> }
 						<Autocomplete
 							id={ id }
 							showAllValues={ showAllValues }
@@ -170,6 +209,7 @@ const FormAutocomplete = React.forwardRef(
 							defaultValue={ value }
 							displayMenu={ displayMenu }
 							onConfirm={ onValueChange }
+							tNoResults={ noOptionsMessage }
 							{ ...props }
 						/>
 						<FormSelectArrow />
@@ -183,6 +223,7 @@ const FormAutocomplete = React.forwardRef(
 FormAutocomplete.propTypes = {
 	id: PropTypes.string,
 	showAllValues: PropTypes.bool,
+	searchIcon: PropTypes.bool,
 	isInline: PropTypes.bool,
 	forLabel: PropTypes.string,
 	value: PropTypes.string,
@@ -191,6 +232,8 @@ FormAutocomplete.propTypes = {
 	options: PropTypes.array,
 	getOptionLabel: PropTypes.func,
 	getOptionValue: PropTypes.func,
+	onInputChange: PropTypes.func,
+	noOptionsMessage: PropTypes.func,
 	onChange: PropTypes.func,
 	className: PropTypes.any,
 };

package/src/system/NewForm/FormAutocomplete.stories.jsx

@@ -74,3 +74,30 @@ export const WithDefaultValue = () => {
 		</>
 	);
 };
+
+export const WithSearchIcon = () => {
+	const customArgs = {
+		...args,
+		searchIcon: true,
+	};
+
+	return (
+		<>
+			<DefaultComponent { ...customArgs } />
+		</>
+	);
+};
+
+export const WithCustomMessages = () => {
+	const customArgs = {
+		...args,
+		noOptionsMessage: () => 'No data',
+		placeholder: 'Type to search',
+	};
+
+	return (
+		<>
+			<DefaultComponent { ...customArgs } />
+		</>
+	);
+};

package/src/system/NewForm/FormSelectSearch.js

@@ -0,0 +1,24 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { MdSearch } from 'react-icons/md';
+
+export const FormSelectSearch = React.forwardRef( ( props, forwardRef ) => (
+	<MdSearch
+		ref={ forwardRef }
+		aria-hidden="true"
+		size={ 24 }
+		sx={ {
+			position: 'absolute',
+			paddingRight: 2,
+			left: 2,
+			pointerEvents: 'none',
+		} }
+		{ ...props }
+	/>
+) );
+
+FormSelectSearch.displayName = 'FormSelectSearch';

package/build/system/ResourceList/ResourceItem.js

@@ -1,89 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.ResourceItem = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _ = require("..");
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-var ResourceItem = function ResourceItem(_ref) {
-  var children = _ref.children,
-      item = _ref.item,
-      renderActions = _ref.renderActions,
-      _ref$relativeTime = _ref.relativeTime,
-      relativeTime = _ref$relativeTime === void 0 ? false : _ref$relativeTime,
-      _ref$timeOnly = _ref.timeOnly,
-      timeOnly = _ref$timeOnly === void 0 ? false : _ref$timeOnly,
-      dateKey = _ref.dateKey,
-      _ref$icon = _ref.icon,
-      icon = _ref$icon === void 0 ? null : _ref$icon;
-  return (0, _jsxRuntime.jsxs)(_.Flex, {
-    sx: {
-      alignItems: 'center',
-      gap: 3
-    },
-    children: [icon, (0, _jsxRuntime.jsx)(_.Box, {
-      sx: {
-        flex: '1 1 auto'
-      },
-      children: children
-    }), (0, _jsxRuntime.jsxs)(_.Flex, {
-      sx: {
-        flex: '0 0 auto',
-        alignItems: 'center',
-        gap: 3
-      },
-      children: [(0, _jsxRuntime.jsx)(_.Time, {
-        className: "time",
-        relativeTime: relativeTime,
-        timeOnly: timeOnly,
-        time: item[dateKey],
-        sx: {
-          color: 'muted',
-          mb: 0,
-          textAlign: 'right',
-          flex: '0 0 auto'
-        }
-      }), renderActions && (0, _jsxRuntime.jsxs)(_.Flex, {
-        className: "actions",
-        sx: {
-          alignItems: 'center',
-          gap: 3
-        },
-        children: [(0, _jsxRuntime.jsx)(_.Box, {
-          sx: {
-            width: 4,
-            height: 4,
-            borderRadius: 4,
-            bg: 'border'
-          }
-        }), renderActions(item)]
-      })]
-    })]
-  });
-};
-
-exports.ResourceItem = ResourceItem;
-ResourceItem.propTypes = {
-  children: _propTypes["default"].node,
-  item: _propTypes["default"].object,
-  icon: _propTypes["default"].node,
-  relativeTime: _propTypes["default"].bool,
-  timeOnly: _propTypes["default"].bool,
-  dateKey: _propTypes["default"].string,
-  renderActions: _propTypes["default"].func
-};

package/build/system/ResourceList/ResourceList.js

@@ -1,140 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.ResourceList = void 0;
-
-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");
-
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-var formatterOptions = {
-  weekday: 'long',
-  year: 'numeric',
-  month: 'long',
-  day: 'numeric'
-};
-
-var formatDate = function formatDate(date) {
-  var today = new Date();
-
-  if (date.getFullYear() !== today.getFullYear()) {
-    return date.toLocaleDateString(formatterOptions);
-  } else if (date.getMonth() !== today.getMonth()) {
-    return date.toLocaleDateString(formatterOptions);
-  } else if (date.getDate() < today.getDate() - 1) {
-    return date.toLocaleDateString(formatterOptions);
-  } else if (date.getDate() === today.getDate() - 1) {
-    return 'Yesterday';
-  }
-
-  return 'Today';
-};
-
-var StyledListItem = function StyledListItem(props) {
-  return (0, _jsxRuntime.jsx)(_.Box, (0, _extends3["default"])({
-    as: "li",
-    sx: {
-      py: 2,
-      borderBottom: '1px solid',
-      borderColor: 'borders.2',
-      listStyleType: 'none',
-      margin: 0,
-      px: 0
-    }
-  }, props));
-};
-
-var ResourceList = function ResourceList(_ref) {
-  var _ref$groupedByDay = _ref.groupedByDay,
-      groupedByDay = _ref$groupedByDay === void 0 ? false : _ref$groupedByDay,
-      items = _ref.items,
-      renderItem = _ref.renderItem,
-      dateKey = _ref.dateKey;
-  var groupedItems = {};
-
-  if (groupedByDay) {
-    groupedItems = items == null ? void 0 : items.reduce(function (itemGroups, item) {
-      var _extends2;
-
-      var formattedDate = formatDate(item[dateKey]);
-      var itemsAtDate = itemGroups[formattedDate];
-      return (0, _extends3["default"])({}, itemGroups, (_extends2 = {}, _extends2[formattedDate] = itemsAtDate ? [].concat(itemsAtDate, [item]) : [item], _extends2));
-    }, {});
-  }
-
-  var renderItemList = function renderItemList(itemsList) {
-    return itemsList.map(function (item, index) {
-      return (0, _jsxRuntime.jsx)(StyledListItem, {
-        children: renderItem(item)
-      }, index);
-    });
-  };
-
-  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: {
-      listStyleType: 'none',
-      m: 0,
-      p: 0
-    },
-    className: "vip-resource-list-component",
-    children: groupedByDay ? renderGoupedItems(groupedItems) : renderItemList(items)
-  });
-};
-
-exports.ResourceList = ResourceList;
-ResourceList.propTypes = {
-  groupedByDay: _propTypes["default"].bool,
-  items: _propTypes["default"].array,
-  renderItem: _propTypes["default"].func,
-  relativeTime: _propTypes["default"].bool,
-  dateKey: _propTypes["default"].string
-};

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

@@ -1,379 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports["default"] = exports.Relative = exports.Grouped = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _bi = require("react-icons/bi");
-
-var _ = require("..");
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-var _default = {
-  title: 'ResourceList',
-  component: _.ResourceList
-};
-exports["default"] = _default;
-var logs = [{
-  actor: 'Saxon Fletcher',
-  action: 'switched primary domain to',
-  object: 'mydomain.com',
-  date: new Date()
-}, {
-  actor: 'Saxon Fletcher',
-  action: 'switched primary domain to',
-  object: 'mydomain.com',
-  date: new Date(new Date().setHours(11))
-}, {
-  actor: 'Simon Wheatley',
-  action: 'deployed to',
-  object: 'Production',
-  showObject: true,
-  date: new Date(new Date().setDate(15))
-}, {
-  actor: 'Saxon Fletcher',
-  action: 'created a backup on',
-  object: 'Production',
-  date: new Date(new Date().setDate(13))
-}];
-
-var Grouped = function Grouped() {
-  return (0, _jsxRuntime.jsxs)(_.Box, {
-    sx: {
-      p: 5,
-      pt: 2
-    },
-    children: [(0, _jsxRuntime.jsx)(_.Heading, {
-      sx: {
-        mb: 2
-      },
-      children: "Audit Log"
-    }), (0, _jsxRuntime.jsx)(_.Text, {
-      sx: {
-        mb: 4
-      },
-      children: "A live trail of system and human events."
-    }), (0, _jsxRuntime.jsx)(_.ResourceList, {
-      items: logs,
-      dateKey: "date",
-      groupedByDay: true,
-      renderItem: function renderItem(item) {
-        return (0, _jsxRuntime.jsxs)(_.ResourceItem, {
-          item: item,
-          icon: (0, _jsxRuntime.jsx)(_bi.BiGlobe, {
-            sx: {
-              color: 'red'
-            }
-          }),
-          dateKey: 'date',
-          relativeTime: true,
-          timeOnly: true,
-          children: [(0, _jsxRuntime.jsxs)(_.Flex, {
-            sx: {
-              alignItems: 'center',
-              gap: 3
-            },
-            children: [(0, _jsxRuntime.jsx)(_.Avatar, {
-              name: item.actor,
-              src: "https://uifaces.co/our-content/donated/1H_7AxP0.jpg",
-              size: 16
-            }), (0, _jsxRuntime.jsxs)(_.Heading, {
-              variant: "h4",
-              as: "p",
-              sx: {
-                mb: 0,
-                fontWeight: 'normal'
-              },
-              children: [item.actor, ' ', (0, _jsxRuntime.jsx)(_.Text, {
-                as: "span",
-                sx: {
-                  color: 'muted',
-                  mb: 0
-                },
-                children: item.action
-              }), ' ', item.object]
-            })]
-          }), item.showObject && (0, _jsxRuntime.jsxs)(_.Box, {
-            variant: "indent",
-            sx: {
-              mt: 2,
-              display: 'flex',
-              flexWrap: 'wrap',
-              gap: 3,
-              alignItems: 'center'
-            },
-            children: [(0, _jsxRuntime.jsxs)(_.Heading, {
-              variant: "h5",
-              as: "div",
-              sx: {
-                mb: 0
-              },
-              children: ["Merge pull request", ' ', (0, _jsxRuntime.jsx)(_.Text, {
-                as: "span",
-                sx: {
-                  color: 'muted'
-                },
-                children: "#443"
-              })]
-            }), (0, _jsxRuntime.jsxs)(_.Text, {
-              as: "div",
-              sx: {
-                mb: 0,
-                fontSize: 1,
-                display: 'flex',
-                alignItems: 'center',
-                gap: 1
-              },
-              children: [(0, _jsxRuntime.jsx)(_.Avatar, {
-                name: item.actor,
-                src: "https://uifaces.co/our-content/donated/n4Ngwvi7.jpg",
-                size: 16
-              }), item.actor]
-            }), (0, _jsxRuntime.jsxs)(_.Text, {
-              sx: {
-                mb: 0,
-                fontSize: 1,
-                display: 'flex',
-                alignItems: 'center',
-                gap: 1
-              },
-              children: [(0, _jsxRuntime.jsx)(_bi.BiCheckCircle, {
-                size: 16
-              }), "Deployed in 31s"]
-            })]
-          })]
-        });
-      }
-    })]
-  });
-};
-
-exports.Grouped = Grouped;
-var deploys = [{
-  title: 'Merge pull request',
-  id: '#773',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(11)),
-  status: 'running'
-}, {
-  title: 'Update homepage',
-  id: '#772',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(9))
-}, {
-  title: 'Improve overall performance',
-  id: '#771',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(8))
-}, {
-  title: 'Merge pull request',
-  id: '#770',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(5)),
-  status: 'failed'
-}, {
-  title: 'Merge pull request',
-  id: '#773',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(11))
-}, {
-  title: 'Update homepage',
-  id: '#772',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(9))
-}, {
-  title: 'Improve overall performance',
-  id: '#771',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(8))
-}, {
-  title: 'Merge pull request',
-  id: '#770',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(5))
-}, {
-  title: 'Merge pull request',
-  id: '#773',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(11))
-}, {
-  title: 'Update homepage',
-  id: '#772',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(9))
-}, {
-  title: 'Improve overall performance',
-  id: '#771',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(8))
-}, {
-  title: 'Merge pull request',
-  id: '#770',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(5))
-}, {
-  title: 'Merge pull request',
-  id: '#773',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(11))
-}, {
-  title: 'Update homepage',
-  id: '#772',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(9))
-}, {
-  title: 'Improve overall performance',
-  id: '#771',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(8))
-}, {
-  title: 'Merge pull request',
-  id: '#770',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(5))
-}];
-
-var Relative = function Relative() {
-  return (0, _jsxRuntime.jsxs)(_.Box, {
-    sx: {
-      p: 5,
-      pt: 2
-    },
-    children: [(0, _jsxRuntime.jsx)(_.Heading, {
-      sx: {
-        mb: 2
-      },
-      children: "Deploys"
-    }), (0, _jsxRuntime.jsx)(_.Text, {
-      sx: {
-        mb: 4
-      },
-      children: "View and manage application deployments."
-    }), (0, _jsxRuntime.jsx)(_.Card, {
-      variant: "indent",
-      sx: {
-        mb: 4,
-        display: 'flex',
-        flexDirection: 'row-reverse',
-        gap: 1
-      },
-      children: deploys.map(function (deploy, index) {
-        return (0, _jsxRuntime.jsx)(_.Box, {
-          sx: {
-            flex: '1 1 auto',
-            width: 10,
-            height: 4,
-            backgroundColor: deploy.status === 'running' ? 'blue.50' : 'green.50',
-            borderRadius: 1
-          }
-        }, index);
-      })
-    }), (0, _jsxRuntime.jsx)(_.ResourceList, {
-      items: deploys,
-      dateKey: "date",
-      groupedByDay: false,
-      renderItem: function renderItem(item) {
-        return (0, _jsxRuntime.jsx)(_.ResourceItem, {
-          item: item,
-          dateKey: 'date',
-          relativeTime: true,
-          timeOnly: true,
-          renderActions: function renderActions() {
-            return (0, _jsxRuntime.jsx)(_.Flex, {
-              sx: {
-                alignItems: 'center'
-              },
-              children: (0, _jsxRuntime.jsx)(_.Button, {
-                variant: "secondary",
-                sx: {
-                  fontSize: 1
-                },
-                children: "Rollback"
-              })
-            });
-          },
-          children: (0, _jsxRuntime.jsxs)(_.Flex, {
-            sx: {
-              alignItems: 'center',
-              gap: 4
-            },
-            children: [(0, _jsxRuntime.jsxs)(_.Flex, {
-              sx: {
-                alignItems: 'center',
-                gap: 3,
-                minWidth: 300
-              },
-              children: [(0, _jsxRuntime.jsxs)(_.Heading, {
-                variant: "h4",
-                as: "p",
-                sx: {
-                  mb: 0,
-                  fontWeight: 'normal'
-                },
-                children: [item.title, ' ', (0, _jsxRuntime.jsx)(_.Text, {
-                  as: "span",
-                  sx: {
-                    color: 'muted',
-                    mb: 0
-                  },
-                  children: item.id
-                })]
-              }), item.status === 'running' && (0, _jsxRuntime.jsx)(_.Badge, {
-                sx: {
-                  mb: 0
-                },
-                children: "Running"
-              })]
-            }), (0, _jsxRuntime.jsxs)(_.Text, {
-              as: "div",
-              sx: {
-                mb: 0,
-                color: 'muted',
-                display: 'flex',
-                alignItems: 'center',
-                gap: 2
-              },
-              children: [(0, _jsxRuntime.jsx)(_.Avatar, {
-                name: item.author,
-                size: 16,
-                src: "https://randomuser.me/api/portraits/men/46.jpg"
-              }), item.author]
-            }), (0, _jsxRuntime.jsx)(_.Text, {
-              sx: {
-                mb: 0,
-                color: item.status === 'running' ? 'blue.60' : 'muted',
-                display: 'flex',
-                alignItems: 'center',
-                gap: 1
-              },
-              children: item.status === 'running' ? (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
-                children: [(0, _jsxRuntime.jsx)(_bi.BiRevision, {
-                  size: 16
-                }), "Running for 31s"]
-              }) : (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
-                children: [(0, _jsxRuntime.jsx)(_bi.BiCheckCircle, {
-                  size: 16
-                }), "Deployed in 31s"]
-              })
-            })]
-          })
-        });
-      }
-    })]
-  });
-};
-
-exports.Relative = Relative;

package/build/system/ResourceList/index.js

@@ -1,11 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-
-var _ResourceList = require("./ResourceList");
-
-exports.ResourceList = _ResourceList.ResourceList;
-
-var _ResourceItem = require("./ResourceItem");
-
-exports.ResourceItem = _ResourceItem.ResourceItem;