@automattic/vip-design-system 2.10.2 → 2.10.3

package/build/system/Accordion/Accordion.d.ts

@@ -26,6 +26,8 @@ interface RootProps {
     className?: Argument;
     sx?: ThemeUIStyleObject;
     defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
 }
 export declare const Item: {
     ({ children, ...props }: AccordionItemProps): React.JSX.Element;

package/build/system/Accordion/Accordion.test.js

@@ -10,13 +10,14 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
+import { useState } from 'react';
 import { ThemeUIProvider } from 'theme-ui';
 
 /**
  * Internal dependencies
  */
 import * as Accordion from './Accordion';
-import { theme } from '../';
+import { Button, theme } from '../';
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
 import { jsxs as _jsxs } from "theme-ui/jsx-runtime";
 var renderWithTheme = function renderWithTheme(children) {
@@ -25,7 +26,7 @@ var renderWithTheme = function renderWithTheme(children) {
     children: children
   }));
 };
-var renderComponent = function renderComponent() {
+var renderUncontrolledComponent = function renderUncontrolledComponent() {
   return renderWithTheme(_jsxs(Accordion.Root, {
     defaultValue: "one",
     sx: {
@@ -48,7 +49,60 @@ var renderComponent = function renderComponent() {
     })]
   }));
 };
-describe('<Accordion />', function () {
+var renderControlledComponent = function renderControlledComponent() {
+  var ControlledComponent = function ControlledComponent() {
+    var _useState = useState('one'),
+      value = _useState[0],
+      setValue = _useState[1];
+    return _jsxs(Accordion.Root, {
+      value: value,
+      onValueChange: setValue,
+      children: [_jsxs(Accordion.Item, {
+        value: "one",
+        children: [_jsx(Button, {
+          "aria-controls": "manage-content-one",
+          "aria-expanded": value === 'one' ? 'true' : 'false',
+          "data-state": value === 'one' ? 'open' : 'closed',
+          onClick: function onClick() {
+            if (value === 'one') {
+              setValue('');
+            } else {
+              setValue('one');
+            }
+          },
+          children: "trigger one"
+        }), _jsx(Accordion.Content, {
+          id: "manage-content-one",
+          children: "content one"
+        })]
+      }), _jsxs(Accordion.Item, {
+        value: "two",
+        children: [_jsx(Button, {
+          "aria-controls": "manage-content-two",
+          "aria-expanded": value === 'two' ? 'true' : 'false',
+          "data-state": value === 'two' ? 'open' : 'closed',
+          onClick: function onClick() {
+            if (value === 'two') {
+              setValue('');
+            } else {
+              setValue('two');
+            }
+          },
+          children: "trigger two"
+        }), _jsx(Accordion.Content, {
+          id: "manage-content-two",
+          children: "content two"
+        })]
+      })]
+    });
+  };
+  return renderWithTheme(_jsx(ControlledComponent, {}));
+};
+describe.each([['Uncontrolled', renderUncontrolledComponent], ['Controlled', renderControlledComponent]])('<Accordion />, %s', function () {
+  for (var _len = arguments.length, modeAndComponent = new Array(_len), _key = 0; _key < _len; _key++) {
+    modeAndComponent[_key] = arguments[_key];
+  }
+  var renderComponent = modeAndComponent[1];
   it('renders the Accordion component with default value visible', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     var _renderComponent, container;
     return _regeneratorRuntime().wrap(function _callee$(_context) {

package/build/system/Code/Code.d.ts

@@ -4,12 +4,18 @@
  */
 import { Argument } from 'classnames';
 import React, { ReactNode } from 'react';
-export interface CodeProps {
+export type CodeProps = React.ComponentPropsWithoutRef<'code'> & {
     prompt?: boolean;
     showCopy?: boolean;
     onCopy?: () => void;
     className?: Argument;
     children?: ReactNode;
-}
-declare const Code: React.ForwardRefExoticComponent<CodeProps & React.RefAttributes<HTMLDivElement>>;
+};
+declare const Code: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    prompt?: boolean | undefined;
+    showCopy?: boolean | undefined;
+    onCopy?: (() => void) | undefined;
+    className?: Argument;
+    children?: ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 export { Code };

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

@@ -9,7 +9,13 @@ import type { StoryObj } from '@storybook/react';
  */
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("./Code").CodeProps & React.RefAttributes<HTMLDivElement>>;
+    component: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+        prompt?: boolean | undefined;
+        showCopy?: boolean | undefined;
+        onCopy?: (() => void) | undefined;
+        className?: import("classnames").Argument;
+        children?: React.ReactNode;
+    } & React.RefAttributes<HTMLDivElement>>;
 };
 export default _default;
 type Story = StoryObj<typeof Code>;

package/build/system/NewDialog/NewDialog.stories.jsx

@@ -19,7 +19,8 @@ export default {
 
 const defaultProps = {
 	title: 'User settings',
-	description: 'Use this form to manage your settings',
+	description:
+		"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book",
 };
 
 export const Default = () => (

package/build/system/NewDialog/styles.js

@@ -13,6 +13,7 @@ export var contentStyles = {
   maxWidth: '640px',
   maxHeight: '85vh',
   padding: 6,
+  overflowY: 'auto',
   '> h1, > h2': {
     marginTop: '0 !important'
   }

package/build/system/NewForm/Form.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
-export interface FormProps {
+export type FormProps = React.ComponentPropsWithoutRef<'form'> & {
     children?: React.ReactNode;
     className?: string;
-}
-export declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
+};
+export declare const Form: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & {
+    children?: React.ReactNode;
+    className?: string | undefined;
+} & React.RefAttributes<HTMLFormElement>>;

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

@@ -1,5 +1,8 @@
 export default Root;
-export const Root: import("react").ForwardRefExoticComponent<import("./Form").FormProps & import("react").RefAttributes<HTMLFormElement>>;
+export const Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & {
+    children?: import("react").ReactNode;
+    className?: string | undefined;
+} & import("react").RefAttributes<HTMLFormElement>>;
 export const Select: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
 export const Autocomplete: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
 export const AutocompleteMulti: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;

package/build/system/Notice/Notice.d.ts

@@ -1,7 +1,7 @@
 /** @jsxImportSource theme-ui */
 import React from 'react';
 import { ThemeUIStyleObject } from 'theme-ui';
-export interface NoticeProps {
+export type NoticeProps = React.HTMLAttributes<HTMLDivElement> & {
     children: React.ReactNode;
     inline?: boolean;
     sx?: ThemeUIStyleObject;
@@ -9,7 +9,15 @@ export interface NoticeProps {
     variant?: ColorVariants;
     headingVariant?: React.ElementType;
     className?: string;
-}
+};
 type ColorVariants = 'warning' | 'error' | 'alert' | 'success' | 'info';
-export declare const Notice: React.ForwardRefExoticComponent<NoticeProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Notice: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    children: React.ReactNode;
+    inline?: boolean | undefined;
+    sx?: ThemeUIStyleObject | undefined;
+    title?: React.ReactNode;
+    variant?: ColorVariants | undefined;
+    headingVariant?: React.ElementType<any> | undefined;
+    className?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -8,7 +8,15 @@
 import React from 'react';
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("./Notice").NoticeProps & React.RefAttributes<HTMLDivElement>>;
+    component: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+        children: React.ReactNode;
+        inline?: boolean | undefined;
+        sx?: import("theme-ui").ThemeUIStyleObject | undefined;
+        title?: React.ReactNode;
+        variant?: ("alert" | "error" | "success" | "warning" | "info") | undefined;
+        headingVariant?: React.ElementType<any> | undefined;
+        className?: string | undefined;
+    } & React.RefAttributes<HTMLDivElement>>;
 };
 export default _default;
 export declare const Default: () => React.JSX.Element;

package/package.json

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

package/src/system/Accordion/Accordion.test.tsx

@@ -7,18 +7,19 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
+import { useState } from 'react';
 import { ThemeUIProvider } from 'theme-ui';
 
 /**
  * Internal dependencies
  */
 import * as Accordion from './Accordion';
-import { theme } from '../';
+import { Button, theme } from '../';
 
 const renderWithTheme = children =>
 	render( <ThemeUIProvider theme={ theme }>{ children }</ThemeUIProvider> );
 
-const renderComponent = () =>
+const renderUncontrolledComponent = () =>
 	renderWithTheme(
 		<Accordion.Root defaultValue="one" sx={ { width: '400px' } }>
 			<Accordion.Item value="one">
@@ -32,7 +33,58 @@ const renderComponent = () =>
 		</Accordion.Root>
 	);
 
-describe( '<Accordion />', () => {
+const renderControlledComponent = () => {
+	const ControlledComponent = () => {
+		const [ value, setValue ] = useState( 'one' );
+
+		return (
+			<Accordion.Root value={ value } onValueChange={ setValue }>
+				<Accordion.Item value="one">
+					<Button
+						aria-controls="manage-content-one"
+						aria-expanded={ value === 'one' ? 'true' : 'false' }
+						data-state={ value === 'one' ? 'open' : 'closed' }
+						onClick={ () => {
+							if ( value === 'one' ) {
+								setValue( '' );
+							} else {
+								setValue( 'one' );
+							}
+						} }
+					>
+						trigger one
+					</Button>
+					<Accordion.Content id="manage-content-one">content one</Accordion.Content>
+				</Accordion.Item>
+				<Accordion.Item value="two">
+					<Button
+						aria-controls="manage-content-two"
+						aria-expanded={ value === 'two' ? 'true' : 'false' }
+						data-state={ value === 'two' ? 'open' : 'closed' }
+						onClick={ () => {
+							if ( value === 'two' ) {
+								setValue( '' );
+							} else {
+								setValue( 'two' );
+							}
+						} }
+					>
+						trigger two
+					</Button>
+					<Accordion.Content id="manage-content-two">content two</Accordion.Content>
+				</Accordion.Item>
+			</Accordion.Root>
+		);
+	};
+
+	return renderWithTheme( <ControlledComponent /> );
+};
+
+describe.each( [
+	[ 'Uncontrolled', renderUncontrolledComponent ],
+	[ 'Controlled', renderControlledComponent ],
+] )( '<Accordion />, %s', ( ...modeAndComponent ) => {
+	const [ , renderComponent ] = modeAndComponent;
 	it( 'renders the Accordion component with default value visible', async () => {
 		const { container } = renderComponent();
 

package/src/system/Accordion/Accordion.tsx

@@ -54,6 +54,8 @@ interface RootProps {
 	className?: Argument;
 	sx?: ThemeUIStyleObject;
 	defaultValue?: string;
+	value?: string;
+	onValueChange?: ( value: string ) => void;
 }
 export const Item = ( { children, ...props }: AccordionItemProps ) => (
 	<AccordionPrimitive.Item

package/src/system/Code/Code.tsx

@@ -7,13 +7,13 @@ import classNames, { Argument } from 'classnames';
 import React, { ReactNode, createRef, useState } from 'react';
 import { MdContentCopy } from 'react-icons/md';
 
-export interface CodeProps {
+export type CodeProps = React.ComponentPropsWithoutRef< 'code' > & {
 	prompt?: boolean;
 	showCopy?: boolean;
 	onCopy?: () => void;
 	className?: Argument;
 	children?: ReactNode;
-}
+};
 
 const Code = React.forwardRef< HTMLDivElement, CodeProps >(
 	( { prompt = false, showCopy = false, onCopy, className, ...props }: CodeProps, forwardRef ) => {

package/src/system/NewDialog/NewDialog.stories.jsx

@@ -19,7 +19,8 @@ export default {
 
 const defaultProps = {
 	title: 'User settings',
-	description: 'Use this form to manage your settings',
+	description:
+		"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book",
 };
 
 export const Default = () => (

package/src/system/NewDialog/styles.ts

@@ -15,5 +15,6 @@ export const contentStyles: ThemeUIStyleObject = {
 	maxWidth: '640px',
 	maxHeight: '85vh',
 	padding: 6,
+	overflowY: 'auto',
 	'> h1, > h2': { marginTop: '0 !important' },
 };

package/src/system/NewForm/Form.tsx

@@ -3,10 +3,10 @@
  */
 import classNames from 'classnames';
 import React from 'react';
-export interface FormProps {
+export type FormProps = React.ComponentPropsWithoutRef< 'form' > & {
 	children?: React.ReactNode;
 	className?: string;
-}
+};
 export const Form = React.forwardRef< HTMLFormElement, FormProps >(
 	( { children, className, ...props }, forwardRef ) => (
 		<form

package/src/system/Notice/Notice.tsx

@@ -18,7 +18,7 @@ interface NoticeIconProps {
 	variant: ColorVariants;
 }
 
-export interface NoticeProps {
+export type NoticeProps = React.HTMLAttributes< HTMLDivElement > & {
 	children: React.ReactNode;
 	inline?: boolean;
 	sx?: ThemeUIStyleObject;
@@ -26,7 +26,7 @@ export interface NoticeProps {
 	variant?: ColorVariants;
 	headingVariant?: React.ElementType;
 	className?: string;
-}
+};
 type ColorVariants = 'warning' | 'error' | 'alert' | 'success' | 'info';
 
 const NoticeIcon = ( { color, variant }: NoticeIconProps ) => {