@automattic/vip-design-system 2.12.3 → 2.12.5

package/build/system/NewConfirmationDialog/NewConfirmationDialog.d.ts

@@ -1,4 +1,4 @@
-export function NewConfirmationDialog({ trigger, onConfirm, needsConfirm, label, buttonVariant, title, body, ...props }: {
+export function NewConfirmationDialog({ trigger, onConfirm, needsConfirm, label, buttonVariant, title, body, buttonDisabled, ...props }: {
     [x: string]: any;
     trigger: any;
     onConfirm: any;
@@ -7,6 +7,7 @@ export function NewConfirmationDialog({ trigger, onConfirm, needsConfirm, label,
     buttonVariant: any;
     title: any;
     body?: string | undefined;
+    buttonDisabled?: boolean | undefined;
 }): React.JSX.Element;
 export namespace NewConfirmationDialog {
     namespace propTypes {
@@ -17,6 +18,7 @@ export namespace NewConfirmationDialog {
         let body: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         let label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         let buttonVariant: PropTypes.Requireable<string>;
+        let buttonDisabled: PropTypes.Requireable<boolean>;
     }
 }
 import React from 'react';

package/build/system/NewConfirmationDialog/NewConfirmationDialog.js

@@ -59,6 +59,7 @@ const NewConfirmationDialog = ( {
 	buttonVariant,
 	title,
 	body = '',
+	buttonDisabled = false,
 	...props
 } ) => {
 	const directTrigger = React.cloneElement( trigger, { onClick: onConfirm } );
@@ -79,6 +80,7 @@ const NewConfirmationDialog = ( {
 					body={ body }
 					label={ label }
 					buttonVariant={ buttonVariant }
+					buttonDisabled={ buttonDisabled }
 				/>
 			) }
 			trigger={ trigger }
@@ -95,6 +97,7 @@ NewConfirmationDialog.propTypes = {
 	body: PropTypes.node,
 	label: PropTypes.node,
 	buttonVariant: PropTypes.string,
+	buttonDisabled: PropTypes.bool,
 };
 
 export { NewConfirmationDialog };

package/build/system/Skeleton/Skeleton.d.ts

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+/// <reference types="react" />
+export interface SkeletonProps {
+    variant?: string;
+    width?: number | string;
+    height?: number | string;
+    borderRadius?: number;
+}
+export declare const Skeleton: {
+    ({ variant, width, height, borderRadius, times, ...props }: {
+        [x: string]: any;
+        variant?: string | undefined;
+        width?: string | undefined;
+        height?: string | undefined;
+        borderRadius?: number | undefined;
+        times?: number | undefined;
+    }): import("react").JSX.Element;
+    displayName: string;
+};
+export default Skeleton;

package/build/system/Skeleton/Skeleton.js

@@ -0,0 +1,56 @@
+var _excluded = ["variant", "width", "height", "borderRadius", "times"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+import { Box } from '../Box';
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { Fragment as _Fragment } from "theme-ui/jsx-runtime";
+export var Skeleton = function Skeleton(_ref) {
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'text' : _ref$variant,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '100%' : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '30px' : _ref$height,
+    _ref$borderRadius = _ref.borderRadius,
+    borderRadius = _ref$borderRadius === void 0 ? 1 : _ref$borderRadius,
+    _ref$times = _ref.times,
+    times = _ref$times === void 0 ? 1 : _ref$times,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return _jsx(_Fragment, {
+    children: Array.from({
+      length: times
+    }).map(function (i, index) {
+      return _jsx(Box, _extends({
+        sx: {
+          borderRadius: variant === 'circle' ? '50%' : borderRadius,
+          width: width,
+          height: height,
+          backgroundColor: 'skeleton.background',
+          animation: 'pulse 1.5s ease-in-out infinite',
+          '@keyframes pulse': {
+            '0%': {
+              opacity: 0.1
+            },
+            '50%': {
+              opacity: 0.2
+            },
+            '100%': {
+              opacity: 0.1
+            }
+          },
+          mb: index === times - 1 ? 0 : 4
+        },
+        "aria-hidden": true
+      }, props), index);
+    })
+  });
+};
+Skeleton.displayName = 'Skeleton';
+export default Skeleton;

package/build/system/Skeleton/Skeleton.stories.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: {
+        ({ variant, width, height, borderRadius, times, ...props }: {
+            [x: string]: any;
+            variant?: string | undefined;
+            width?: string | undefined;
+            height?: string | undefined;
+            borderRadius?: number | undefined;
+            times?: number | undefined;
+        }): import("react").JSX.Element;
+        displayName: string;
+    };
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export declare const Grouped: () => import("react").JSX.Element;
+export declare const Circle: () => import("react").JSX.Element;
+export declare const Text: () => import("react").JSX.Element;

package/build/system/Skeleton/Skeleton.stories.js

@@ -0,0 +1,29 @@
+/**
+ * Internal dependencies
+ */
+import { Skeleton } from '..';
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+export default {
+  title: 'Skeleton',
+  component: Skeleton
+};
+export var Default = function Default() {
+  return _jsx(Skeleton, {});
+};
+export var Grouped = function Grouped() {
+  return _jsx(Skeleton, {
+    times: 3
+  });
+};
+export var Circle = function Circle() {
+  return _jsx(Skeleton, {
+    variant: "circle",
+    width: "50px",
+    height: "50px"
+  });
+};
+export var Text = function Text() {
+  return _jsx(Skeleton, {
+    variant: "text"
+  });
+};

package/build/system/Skeleton/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { Skeleton } from './Skeleton';
+export { Skeleton };
+export default Skeleton;

package/build/system/Skeleton/index.js

@@ -0,0 +1,7 @@
+/**
+ * Internal dependencies
+ */
+
+import { Skeleton } from './Skeleton';
+export { Skeleton };
+export default Skeleton;

package/build/system/index.d.ts

@@ -51,6 +51,7 @@ import { Text } from './Text';
 import { Tabs } from './Tabs';
 import { Nav } from './Nav/Nav';
 import { NavItem } from './Nav/NavItem';
+import { Skeleton } from './Skeleton';
 import { TabsTrigger } from './Tabs';
 import { TabsContent } from './Tabs';
 import { TabsList } from './Tabs';
@@ -62,4 +63,4 @@ import { Validation } from './Form';
 import { Wizard } from './Wizard';
 import { WizardStep } from './Wizard';
 import theme from './theme';
-export { Accordion, Avatar, Badge, Box, Breadcrumbs, Button, ButtonSubmit, ButtonVariant, Card, Checkbox, Code, Dialog, NewDialog, Form, Drawer, Dropdown, DialogButton, DialogMenu, DialogMenuItem, DialogDivider, DialogContent, DialogTrigger, ConfirmationDialog, MobileMenu, MobileMenuTrigger, MobileMenuWrapper, NewConfirmationDialog, Grid, FilterDropdown, Flex, Notice, OptionRow, Heading, Hr, Input, Label, ScreenReaderText, Spinner, Table, TableRow, TableCell, Tooltip, Link, LinkExternal, Radio, RadioBoxGroup, RadioGroupChip, Textarea, Progress, Text, Tabs, Nav, NavItem, TabsTrigger, TabsContent, TabsList, Toggle, ToggleRow, Toolbar, Snackbar, Validation, Wizard, WizardStep, theme };
+export { Accordion, Avatar, Badge, Box, Breadcrumbs, Button, ButtonSubmit, ButtonVariant, Card, Checkbox, Code, Dialog, NewDialog, Form, Drawer, Dropdown, DialogButton, DialogMenu, DialogMenuItem, DialogDivider, DialogContent, DialogTrigger, ConfirmationDialog, MobileMenu, MobileMenuTrigger, MobileMenuWrapper, NewConfirmationDialog, Grid, FilterDropdown, Flex, Notice, OptionRow, Heading, Hr, Input, Label, ScreenReaderText, Spinner, Table, TableRow, TableCell, Tooltip, Link, LinkExternal, Radio, RadioBoxGroup, RadioGroupChip, Textarea, Progress, Text, Tabs, Nav, NavItem, Skeleton, TabsTrigger, TabsContent, TabsList, Toggle, ToggleRow, Toolbar, Snackbar, Validation, Wizard, WizardStep, theme };

package/build/system/index.js

@@ -50,6 +50,7 @@ import { Notice } from './Notice';
 import { OptionRow } from './OptionRow';
 import { Progress } from './Progress';
 import { ScreenReaderText } from './ScreenReaderText';
+import { Skeleton } from './Skeleton';
 import { Snackbar } from './Snackbar';
 import { Spinner } from './Spinner';
 import { Table, TableRow, TableCell } from './Table';
@@ -114,6 +115,7 @@ export {
 	Tabs,
 	Nav,
 	NavItem,
+	Skeleton,
 	TabsTrigger,
 	TabsContent,
 	TabsList,

package/build/system/theme/index.d.ts

@@ -31,6 +31,9 @@ declare namespace _default {
     export namespace tag {
         let gold: {};
     }
+    export namespace skeleton {
+        let background: string;
+    }
     export namespace cards {
         namespace primary {
             let backgroundColor: string;

package/build/system/theme/index.js

@@ -78,6 +78,10 @@ const getComponentColors = ( theme, gColor, gVariants ) => ( {
 		},
 	},
 
+	skeleton: {
+		background: theme.layer.inverse,
+	},
+
 	// Snackbar
 	snackbar: {
 		icon: {
@@ -259,6 +263,10 @@ export default {
 		gold: getVariants( 'tag.gold' ),
 	},
 
+	skeleton: {
+		background: 'layer.2',
+	},
+
 	cards: {
 		primary: {
 			backgroundColor: 'layer.2',

package/package.json

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

package/src/system/NewConfirmationDialog/NewConfirmationDialog.js

@@ -59,6 +59,7 @@ const NewConfirmationDialog = ( {
 	buttonVariant,
 	title,
 	body = '',
+	buttonDisabled = false,
 	...props
 } ) => {
 	const directTrigger = React.cloneElement( trigger, { onClick: onConfirm } );
@@ -79,6 +80,7 @@ const NewConfirmationDialog = ( {
 					body={ body }
 					label={ label }
 					buttonVariant={ buttonVariant }
+					buttonDisabled={ buttonDisabled }
 				/>
 			) }
 			trigger={ trigger }
@@ -95,6 +97,7 @@ NewConfirmationDialog.propTypes = {
 	body: PropTypes.node,
 	label: PropTypes.node,
 	buttonVariant: PropTypes.string,
+	buttonDisabled: PropTypes.bool,
 };
 
 export { NewConfirmationDialog };

package/src/system/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import { Skeleton } from '..';
+
+export default {
+	title: 'Skeleton',
+	component: Skeleton,
+};
+
+export const Default = () => <Skeleton />;
+
+export const Grouped = () => <Skeleton times={ 3 } />;
+
+export const Circle = () => <Skeleton variant="circle" width="50px" height="50px" />;
+
+export const Text = () => <Skeleton variant="text" />;

package/src/system/Skeleton/Skeleton.tsx

@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+import { Box } from '../Box';
+
+export interface SkeletonProps {
+	variant?: string;
+	width?: number | string;
+	height?: number | string;
+	borderRadius?: number;
+}
+
+export const Skeleton = ( {
+	variant = 'text',
+	width = '100%',
+	height = '30px',
+	borderRadius = 1,
+	times = 1,
+	...props
+} ) => (
+	<>
+		{ Array.from( { length: times } ).map( ( i, index ) => (
+			<Box
+				key={ index }
+				sx={ {
+					borderRadius: variant === 'circle' ? '50%' : borderRadius,
+					width,
+					height,
+					backgroundColor: 'skeleton.background',
+					animation: 'pulse 1.5s ease-in-out infinite',
+					'@keyframes pulse': {
+						'0%': {
+							opacity: 0.1,
+						},
+						'50%': {
+							opacity: 0.2,
+						},
+						'100%': {
+							opacity: 0.1,
+						},
+					},
+					mb: index === times - 1 ? 0 : 4,
+				} }
+				aria-hidden
+				{ ...props }
+			></Box>
+		) ) }
+	</>
+);
+
+Skeleton.displayName = 'Skeleton';
+
+export default Skeleton;

package/src/system/Skeleton/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Internal dependencies
+ */
+
+import { Skeleton } from './Skeleton';
+
+export { Skeleton };
+
+export default Skeleton;

package/src/system/index.js

@@ -50,6 +50,7 @@ import { Notice } from './Notice';
 import { OptionRow } from './OptionRow';
 import { Progress } from './Progress';
 import { ScreenReaderText } from './ScreenReaderText';
+import { Skeleton } from './Skeleton';
 import { Snackbar } from './Snackbar';
 import { Spinner } from './Spinner';
 import { Table, TableRow, TableCell } from './Table';
@@ -114,6 +115,7 @@ export {
 	Tabs,
 	Nav,
 	NavItem,
+	Skeleton,
 	TabsTrigger,
 	TabsContent,
 	TabsList,

package/src/system/theme/index.js

@@ -78,6 +78,10 @@ const getComponentColors = ( theme, gColor, gVariants ) => ( {
 		},
 	},
 
+	skeleton: {
+		background: theme.layer.inverse,
+	},
+
 	// Snackbar
 	snackbar: {
 		icon: {
@@ -259,6 +263,10 @@ export default {
 		gold: getVariants( 'tag.gold' ),
 	},
 
+	skeleton: {
+		background: 'layer.2',
+	},
+
 	cards: {
 		primary: {
 			backgroundColor: 'layer.2',