@automattic/vip-design-system 1.2.0 → 1.2.2

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

@@ -0,0 +1,71 @@
+export namespace textStyles {
+    namespace h1 {
+        let fontSize: number;
+        let marginBottom: number;
+        let letterSpacing: string;
+        let fontWeight: string;
+        let fontFamily: string;
+        let color: string;
+    }
+    namespace h2 {
+        let fontSize_1: number;
+        export { fontSize_1 as fontSize };
+        let marginBottom_1: number;
+        export { marginBottom_1 as marginBottom };
+        let letterSpacing_1: string;
+        export { letterSpacing_1 as letterSpacing };
+        let fontWeight_1: number;
+        export { fontWeight_1 as fontWeight };
+        let color_1: string;
+        export { color_1 as color };
+    }
+    namespace h3 {
+        let fontSize_2: number;
+        export { fontSize_2 as fontSize };
+        let marginBottom_2: number;
+        export { marginBottom_2 as marginBottom };
+        let letterSpacing_2: string;
+        export { letterSpacing_2 as letterSpacing };
+        export let lineHeight: number;
+        let fontWeight_2: string;
+        export { fontWeight_2 as fontWeight };
+        let color_2: string;
+        export { color_2 as color };
+    }
+    namespace h4 {
+        let fontSize_3: number;
+        export { fontSize_3 as fontSize };
+        let marginBottom_3: number;
+        export { marginBottom_3 as marginBottom };
+        let lineHeight_1: number;
+        export { lineHeight_1 as lineHeight };
+        let fontWeight_3: string;
+        export { fontWeight_3 as fontWeight };
+        let color_3: string;
+        export { color_3 as color };
+    }
+    namespace h5 {
+        let fontSize_4: number;
+        export { fontSize_4 as fontSize };
+        let marginBottom_4: number;
+        export { marginBottom_4 as marginBottom };
+        let lineHeight_2: number;
+        export { lineHeight_2 as lineHeight };
+        let fontWeight_4: string;
+        export { fontWeight_4 as fontWeight };
+        let color_4: string;
+        export { color_4 as color };
+    }
+    namespace caps {
+        let fontSize_5: number;
+        export { fontSize_5 as fontSize };
+        let marginBottom_5: number;
+        export { marginBottom_5 as marginBottom };
+        let color_5: string;
+        export { color_5 as color };
+        let fontWeight_5: string;
+        export { fontWeight_5 as fontWeight };
+        let letterSpacing_3: string;
+        export { letterSpacing_3 as letterSpacing };
+    }
+}

package/build/system/theme/textStyles.js

@@ -1,51 +1,46 @@
-"use strict";
-
-exports.__esModule = true;
-exports.textStyles = void 0;
-var textStyles = {
-  h1: {
-    fontSize: 5,
-    marginBottom: 3,
-    letterSpacing: '-.02em',
-    fontWeight: 'body',
-    fontFamily: 'serif',
-    color: 'heading'
-  },
-  h2: {
-    fontSize: 4,
-    marginBottom: 2,
-    letterSpacing: '-.005em',
-    fontWeight: 400,
-    color: 'heading'
-  },
-  h3: {
-    fontSize: 3,
-    marginBottom: 3,
-    letterSpacing: '-.005em',
-    lineHeight: 1.4,
-    fontWeight: 'heading',
-    color: 'heading'
-  },
-  h4: {
-    fontSize: 2,
-    marginBottom: 1,
-    lineHeight: 1.5,
-    fontWeight: 'heading',
-    color: 'heading'
-  },
-  h5: {
-    fontSize: 1,
-    marginBottom: 1,
-    lineHeight: 1.5,
-    fontWeight: 'heading',
-    color: 'heading'
-  },
-  caps: {
-    fontSize: 1,
-    marginBottom: 2,
-    color: 'muted',
-    fontWeight: 'bold',
-    letterSpacing: '.05em'
-  }
+export const textStyles = {
+	h1: {
+		fontSize: 5,
+		marginBottom: 3,
+		letterSpacing: '-.02em',
+		fontWeight: 'body',
+		fontFamily: 'serif',
+		color: 'heading',
+	},
+	h2: {
+		fontSize: 4,
+		marginBottom: 2,
+		letterSpacing: '-.005em',
+		fontWeight: 400,
+		color: 'heading',
+	},
+	h3: {
+		fontSize: 3,
+		marginBottom: 3,
+		letterSpacing: '-.005em',
+		lineHeight: 1.4,
+		fontWeight: 'heading',
+		color: 'heading',
+	},
+	h4: {
+		fontSize: 2,
+		marginBottom: 1,
+		lineHeight: 1.5,
+		fontWeight: 'heading',
+		color: 'heading',
+	},
+	h5: {
+		fontSize: 1,
+		marginBottom: 1,
+		lineHeight: 1.5,
+		fontWeight: 'heading',
+		color: 'heading',
+	},
+	caps: {
+		fontSize: 1,
+		marginBottom: 2,
+		color: 'muted',
+		fontWeight: 'bold',
+		letterSpacing: '.05em',
+	},
 };
-exports.textStyles = textStyles;

package/build/system/utils/random.d.ts

@@ -0,0 +1 @@
+export function generateId(): string;

package/build/system/utils/random.js

@@ -1,7 +1,3 @@
-"use strict";
-
-exports.__esModule = true;
-exports.generateId = generateId;
-function generateId() {
-  return Math.random().toString(36).substring(2, 15);
-}
+export function generateId() {
+	return Math.random().toString( 36 ).substring( 2, 15 );
+}

package/package.json

@@ -1,17 +1,19 @@
 {
   "name": "@automattic/vip-design-system",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "main": "build/system/index.js",
   "scripts": {
     "build-storybook": "storybook build",
     "cmd:format": "prettier '**/*.(js|json|jsx|md|mdx|ts|tsx|yml|yaml)'",
     "cmd:lint": "eslint --ext 'js,jsx,ts,tsx' --max-warnings 0",
     "prepare": "npm run build",
-    "build": "npm run theme-update && cross-env NODE_ENV=production babel src --out-dir build --copy-files && npm run theme-builder-copy",
+    "build": "npm run theme-update && npm run build:app && npm run build:types && npm run theme-builder-copy",
+    "build:app": "cross-env NODE_ENV=production babel src --copy-files --delete-dir-on-start --extensions '.ts,.tsx' --out-dir build",
+    "build:types": "tsc -p tsconfig.definition.json --emitDeclarationOnly --noEmit false",
     "check-types": "tsc",
     "format": "npm run cmd:format -- --write",
     "format:check": "npm run cmd:format -- --check",
-    "jest": "NODE_ENV=test jest --detectOpenHandles --env=jsdom",
+    "jest": "NODE_ENV=test jest --env=jsdom",
     "jest:coverage": "npm run jest && open-cli ./coverage/index.html",
     "jest:watch": "npm run jest --watch",
     "theme-builder-copy": "npm run theme-builder-copy-light && npm run theme-builder-copy-dark",
@@ -58,59 +60,51 @@
       "<rootDir>/src",
       "<rootDir>/test"
     ],
-    "setupFiles": [
-      "<rootDir>/test/setupTests.js"
-    ],
     "setupFilesAfterEnv": [
-      "<rootDir>/test/setupAfterEnv.js"
-    ],
-    "transformIgnorePatterns": [
-      "\\.stories.jsx$"
+      "<rootDir>/test/setupAfterEnv.ts"
     ],
     "transform": {
       "\\.[jt]sx?$": "babel-jest"
     },
     "moduleNameMapper": {
-      "\\.(css|less)$": "<rootDir>/test/fileMock.js"
+      "\\.(css|less)$": "<rootDir>/test/fileMock.ts"
     }
   },
   "devDependencies": {
-    "@automattic/eslint-plugin-wpvip": "0.5.8",
-    "@axe-core/react": "4.4.3",
-    "@babel/cli": "7.22.9",
-    "@babel/core": "7.22.9",
-    "@babel/preset-env": "7.22.9",
-    "@babel/preset-react": "7.22.5",
-    "@babel/preset-typescript": "7.22.15",
-    "@babel/runtime": "7.22.6",
+    "@automattic/eslint-plugin-wpvip": "0.6.0",
+    "@axe-core/react": "4.7.3",
+    "@babel/cli": "7.23.0",
+    "@babel/core": "7.23.0",
+    "@babel/preset-env": "7.22.20",
+    "@babel/preset-react": "7.22.15",
+    "@babel/preset-typescript": "7.23.0",
+    "@babel/runtime": "7.23.1",
     "@emotion/react": "11.11.1",
     "@radix-ui/react-icons": "^1.1.1",
-    "@storybook/addon-a11y": "7.2.1",
-    "@storybook/addon-actions": "7.2.1",
-    "@storybook/addon-controls": "7.2.1",
-    "@storybook/addon-essentials": "7.2.1",
-    "@storybook/addon-links": "7.2.1",
-    "@storybook/addon-storysource": "7.2.1",
-    "@storybook/react": "7.2.1",
-    "@storybook/react-webpack5": "7.2.1",
-    "@testing-library/dom": "^8.11.1",
-    "@testing-library/jest-dom": "^5.15.0",
+    "@storybook/addon-a11y": "7.4.5",
+    "@storybook/addon-essentials": "7.4.5",
+    "@storybook/addon-links": "7.4.5",
+    "@storybook/addon-storysource": "7.4.5",
+    "@storybook/react": "7.4.5",
+    "@storybook/react-webpack5": "7.4.5",
+    "@testing-library/dom": "9.3.3",
+    "@testing-library/jest-dom": "6.1.3",
     "@testing-library/react": "14.0.0",
     "@tsconfig/node18": "18.2.2",
-    "@types/react": "18.2.17",
+    "@types/jest": "29.5.5",
+    "@types/jest-axe": "3.5.6",
+    "@types/react": "18.2.22",
     "@types/react-dom": "18.2.7",
     "cross-env": "7.0.3",
-    "eslint": "8.46.0",
-    "eslint-plugin-storybook": "^0.6.13",
-    "jest": "29.6.2",
+    "eslint": "8.50.0",
+    "eslint-plugin-storybook": "0.6.14",
+    "jest": "29.7.0",
     "jest-axe": "8.0.0",
-    "jest-environment-jsdom": "29.6.2",
-    "open-cli": "^7.0.1",
+    "jest-environment-jsdom": "29.7.0",
     "prettier": "npm:wp-prettier@2.8.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-refresh": "^0.9.0",
-    "storybook": "7.2.1",
+    "storybook": "7.4.5",
     "theme-ui": "0.16.0",
     "token-transformer": "^0.0.29",
     "typescript": "5.2.2"

package/src/declaration.d.ts

@@ -0,0 +1 @@
+declare module '*.css';

package/src/system/Accordion/{Accordion.test.js → Accordion.test.tsx}

@@ -41,7 +41,7 @@ describe( '<Accordion />', () => {
 		expect( screen.queryByText( 'content two' ) ).toBeNull();
 
 		// Check for accessibility issues
-		await expect( await axe( container ) ).toHaveNoViolations();
+		expect( await axe( container ) ).toHaveNoViolations();
 	} );
 
 	it( 'should open the content when clicking on its trigger', async () => {
@@ -56,6 +56,6 @@ describe( '<Accordion />', () => {
 		expect( screen.queryByText( 'content two' ) ).toBeInTheDocument();
 
 		// Check for accessibility issues
-		await expect( await axe( container ) ).toHaveNoViolations();
+		expect( await axe( container ) ).toHaveNoViolations();
 	} );
 } );

package/src/system/Accordion/{Accordion.js → Accordion.tsx}

@@ -3,17 +3,18 @@
 /**
  * External dependencies
  */
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import { MdChevronRight } from 'react-icons/md';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { keyframes } from '@emotion/react';
-import classNames from 'classnames';
+import classNames, { Argument } from 'classnames';
 
 /**
  * Internal dependencies
  */
 import { Heading } from '../Heading';
+import { Theme, ThemeUIStyleObject } from 'theme-ui';
+import { HeadingProps } from '../Heading/Heading';
 
 const slideDown = keyframes( {
 	from: { height: 0 },
@@ -25,7 +26,36 @@ const slideUp = keyframes( {
 	to: { height: 0 },
 } );
 
-export const Item = ( { children, ...props } ) => (
+// temporary solution while we converte the theme to TS
+interface AccordionTheme extends Theme {
+	outline?: Record< string, string >;
+}
+interface AccordionItemProps {
+	children: ReactNode;
+	value: string;
+}
+interface TriggerProps {
+	children: ReactNode;
+	headingVariant?: HeadingProps[ 'variant' ];
+	sx?: ThemeUIStyleObject;
+}
+interface TriggerWithIconProps {
+	children: ReactNode;
+	icon: ReactNode;
+}
+
+interface ContentProps {
+	children: ReactNode;
+	sx?: ThemeUIStyleObject;
+}
+interface RootProps {
+	caption?: string;
+	children?: ReactNode;
+	className?: Argument;
+	sx?: ThemeUIStyleObject;
+	defaultValue?: string;
+}
+export const Item = ( { children, ...props }: AccordionItemProps ) => (
 	<AccordionPrimitive.Item
 		{ ...props }
 		sx={ {
@@ -43,7 +73,7 @@ export const Item = ( { children, ...props } ) => (
 				borderBottomLeftRadius: 4,
 				borderBottomRightRadius: 4,
 			},
-			'&:focus-within': theme => theme.outline,
+			'&:focus-within': ( theme: AccordionTheme ) => theme.outline,
 		} }
 	>
 		{ children }
@@ -52,11 +82,7 @@ export const Item = ( { children, ...props } ) => (
 
 Item.displayName = 'Accordion.Item';
 
-Item.propTypes = {
-	children: PropTypes.node.isRequired,
-};
-
-export const Trigger = React.forwardRef(
+export const Trigger = React.forwardRef< HTMLButtonElement, TriggerProps >(
 	( { children, headingVariant = 'h3', sx = {}, ...props }, forwardedRef ) => (
 		<Heading
 			sx={ {
@@ -115,85 +141,66 @@ export const Trigger = React.forwardRef(
 
 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 ) => (
-	<Trigger { ...props } ref={ forwardedRef }>
-		<span sx={ { color: 'icon.primary', fontSize: 3 } }>{ icon }</span>
-		<div sx={ { color: 'accordion.trigger.text', flexGrow: 1, textAlign: 'left', ml: 3 } }>
-			{ children }
-		</div>
-	</Trigger>
-) );
+export const TriggerWithIcon = React.forwardRef< HTMLButtonElement, TriggerWithIconProps >(
+	( { children, icon, ...props }, forwardedRef ) => (
+		<Trigger { ...props } ref={ forwardedRef }>
+			<span sx={ { color: 'icon.primary', fontSize: 3 } }>{ icon }</span>
+			<div sx={ { color: 'accordion.trigger.text', flexGrow: 1, textAlign: 'left', ml: 3 } }>
+				{ children }
+			</div>
+		</Trigger>
+	)
+);
 
 TriggerWithIcon.displayName = 'Accordion.TriggerWithIcon';
 
-TriggerWithIcon.propTypes = {
-	children: PropTypes.node.isRequired,
-	icon: PropTypes.node.isRequired,
-};
+export const Content = React.forwardRef< HTMLDivElement, ContentProps >(
+	( { children, sx = {}, ...props }, forwardedRef ) => {
+		return (
+			<AccordionPrimitive.Content
+				sx={ {
+					backgroundColor: 'accordion.content.background',
+					color: 'accordion.content.text',
+					fontSize: 2,
+					overflow: 'hidden',
+					px: 3,
+					py: 2,
+
+					'&[data-state="open"]': {
+						animation: `${ slideDown } 300ms cubic-bezier(0.87, 0, 0.13, 1)`,
+					},
+					'&[data-state="closed"]': {
+						animation: `${ slideUp } 300ms cubic-bezier(0.87, 0, 0.13, 1)`,
+					},
+					...sx,
+				} }
+				{ ...props }
+				ref={ forwardedRef }
+			>
+				{ children }
+			</AccordionPrimitive.Content>
+		);
+	}
+);
+
+Content.displayName = 'Accordion.Content';
 
-export const Content = React.forwardRef( ( { children, sx = {}, ...props }, forwardedRef ) => {
-	return (
-		<AccordionPrimitive.Content
+export const Root = React.forwardRef< HTMLDivElement, RootProps >(
+	( { sx = {}, children, className, ...props }, forwardRef ) => (
+		<AccordionPrimitive.Root
+			className={ classNames( 'vip-accordion-component', className ) }
+			collapsible
+			type="single"
+			ref={ forwardRef }
 			sx={ {
-				backgroundColor: 'accordion.content.background',
-				color: 'accordion.content.text',
-				fontSize: 2,
-				overflow: 'hidden',
-				px: 3,
-				py: 2,
-
-				'&[data-state="open"]': {
-					animation: `${ slideDown } 300ms cubic-bezier(0.87, 0, 0.13, 1)`,
-				},
-				'&[data-state="closed"]': {
-					animation: `${ slideUp } 300ms cubic-bezier(0.87, 0, 0.13, 1)`,
-				},
+				borderRadius: 6,
 				...sx,
 			} }
 			{ ...props }
-			ref={ forwardedRef }
 		>
 			{ children }
-		</AccordionPrimitive.Content>
-	);
-} );
-
-Content.displayName = 'Accordion.Content';
-
-Content.propTypes = {
-	children: PropTypes.node.isRequired,
-	sx: PropTypes.object,
-};
-
-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>
-) );
+		</AccordionPrimitive.Root>
+	)
+);
 
 Root.displayName = 'Accordion';
-
-Root.propTypes = {
-	children: PropTypes.node,
-	className: PropTypes.any,
-	defaultValue: PropTypes.any,
-	sx: PropTypes.object,
-	type: PropTypes.oneOf( [ 'single', 'multiple' ] ),
-};
-
-export { Root };

package/src/system/Avatar/Avatar.stories.tsx

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import type { StoryObj } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Avatar } from '..';
+
+export default {
+	title: 'Avatar',
+	component: Avatar,
+};
+
+type Story = StoryObj< typeof Avatar >;
+
+export const Default: Story = {};

package/src/system/Avatar/{Avatar.test.js → Avatar.test.tsx}

@@ -16,7 +16,7 @@ describe( '<Avatar />', () => {
 		expect( screen.getByText( 'J' ) ).toBeInTheDocument();
 
 		// Check for accessibility issues
-		await expect( await axe( container ) ).toHaveNoViolations();
+		expect( await axe( container ) ).toHaveNoViolations();
 	} );
 
 	it( 'renders the Avatar with image', async () => {
@@ -25,6 +25,6 @@ describe( '<Avatar />', () => {
 		expect( screen.getByAltText( 'Avatar image from John Doe' ) ).toBeInTheDocument();
 
 		// Check for accessibility issues
-		await expect( await axe( container ) ).toHaveNoViolations();
+		expect( await axe( container ) ).toHaveNoViolations();
 	} );
 } );

package/src/system/Avatar/{Avatar.js → Avatar.tsx}

@@ -1,22 +1,29 @@
-/** @jsxImportSource theme-ui */
-
 /**
  * External dependencies
  */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Image } from 'theme-ui';
-import classNames from 'classnames';
+import { forwardRef, Ref } from 'react';
+import { Image, ImageProps } from 'theme-ui';
+import classNames, { Argument } from 'classnames';
 
 /**
  * Internal dependencies
  */
 import { Box, Text } from '..';
 
-const Avatar = React.forwardRef(
+export interface AvatarProps {
+	isVIP?: boolean;
+	size?: number;
+	src?: string;
+	name?: string;
+	className?: Argument;
+}
+
+type AvatarImageProps = AvatarProps & ImageProps;
+
+export const Avatar = forwardRef< HTMLElement, AvatarImageProps >(
 	(
-		{ isVIP = false, name = null, size = 32, src = null, className = null, ...props },
-		forwardRef
+		{ isVIP = false, name, size = 32, src, className, ...props }: AvatarImageProps,
+		ref: Ref< HTMLElement >
 	) => (
 		<Box
 			sx={ {
@@ -36,7 +43,7 @@ const Avatar = React.forwardRef(
 			} }
 			className={ classNames( 'vip-avatar-component', className ) }
 			aria-hidden="true"
-			ref={ forwardRef }
+			ref={ ref }
 			{ ...props }
 		>
 			{ src ? (
@@ -68,12 +75,3 @@ const Avatar = React.forwardRef(
 );
 
 Avatar.displayName = 'Avatar';
-Avatar.propTypes = {
-	isVIP: PropTypes.bool,
-	size: PropTypes.number,
-	src: PropTypes.string,
-	name: PropTypes.string,
-	className: PropTypes.any,
-};
-
-export { Avatar };

package/src/system/Avatar/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies
+ */
+export { Avatar } from './Avatar';