@automattic/vip-design-system 2.5.0 → 2.7.0

package/src/system/Dropdown/Dropdown.js

@@ -1,101 +0,0 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-/**
- * Internal dependencies
- */
-import { DropdownContent } from './DropdownContent';
-
-const DropdownMenu = DropdownMenuPrimitive.Root;
-const DropdownTrigger = DropdownMenuPrimitive.Trigger;
-const DropdownRadioGroup = DropdownMenuPrimitive.RadioGroup;
-const DropdownItemIndicator = DropdownMenuPrimitive.DropdownMenuItemIndicator;
-const DropdownLabel = DropdownMenuPrimitive.DropdownMenuLabel;
-const DropdownSeparator = DropdownMenuPrimitive.DropdownMenuSeparator;
-const DropdownSub = DropdownMenuPrimitive.DropdownMenuSub;
-const DropdownSubTrigger = DropdownMenuPrimitive.DropdownMenuSubTrigger;
-const DropdownSubContent = DropdownMenuPrimitive.DropdownMenuSubContent;
-
-export const Dropdown = ( {
-	trigger,
-	children,
-	// Radix Specific Properties
-	open = undefined,
-	defaultOpen = false,
-	onOpenChange = undefined,
-	modal = true,
-	dir = 'ltr',
-	contentProps = {},
-	portalProps = {},
-	className,
-} ) => {
-	const firstChild = React.useMemo(
-		() =>
-			React.isValidElement( children ) ? React.Children.only( children )?.type?.displayName : '',
-		[ children ]
-	);
-
-	return (
-		<DropdownMenu
-			className={ classNames( 'vip-dropdown-menu', className ) }
-			open={ open }
-			defaultOpen={ defaultOpen }
-			onOpenChange={ onOpenChange }
-			modal={ modal }
-			dir={ dir }
-		>
-			<DropdownTrigger className="vip-dropdown-trigger" asChild>
-				{ trigger }
-			</DropdownTrigger>
-
-			<DropdownMenuPrimitive.Portal { ...portalProps }>
-				{ /* User can customize the content */ }
-				{ firstChild === 'DropdownContent' ? (
-					children
-				) : (
-					<DropdownContent { ...contentProps }>
-						{ children }
-						<DropdownMenuPrimitive.Arrow sx={ { fill: 'background', boxShadow: 'high' } } />
-					</DropdownContent>
-				) }
-			</DropdownMenuPrimitive.Portal>
-		</DropdownMenu>
-	);
-};
-
-Dropdown.propTypes = {
-	trigger: PropTypes.node.isRequired,
-	children: PropTypes.node.isRequired,
-
-	// Props in root: https://www.radix-ui.com/docs/primitives/components/dropdown-menu#root
-	open: PropTypes.bool,
-	defaultOpen: PropTypes.bool,
-	onOpenChange: PropTypes.func,
-	modal: PropTypes.bool,
-	dir: PropTypes.string,
-
-	// Content props in: https://www.radix-ui.com/docs/primitives/components/dropdown-menu#content
-	contentProps: PropTypes.any,
-	// Portal props in: https://www.radix-ui.com/docs/primitives/components/dropdown-menu#portal
-	portalProps: PropTypes.any,
-	className: PropTypes.string,
-};
-
-// Exports
-export {
-	DropdownTrigger,
-	DropdownRadioGroup,
-	DropdownItemIndicator,
-	DropdownLabel,
-	DropdownSeparator,
-	DropdownSub,
-	DropdownSubTrigger,
-	DropdownSubContent,
-};

package/src/system/Dropdown/DropdownContent.js

@@ -1,50 +0,0 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-export const styles = {
-	minWidth: 220,
-	borderRadius: 2,
-	backgroundColor: 'background',
-	boxShadow: 'high',
-	px: 2,
-	py: 1,
-};
-
-export const DropdownContent = React.forwardRef( ( { className, ...props }, forwardRef ) => (
-	<DropdownMenuPrimitive.DropdownMenuContent
-		className={ classNames( 'vip-dropdown-menu-content', className ) }
-		ref={ forwardRef }
-		sx={ styles }
-		{ ...props }
-	/>
-) );
-
-DropdownContent.displayName = 'DropdownContent';
-
-DropdownContent.propTypes = {
-	className: PropTypes.string,
-};
-
-export const DropdownSubContent = React.forwardRef( ( { className, ...props }, forwardRef ) => (
-	<DropdownMenuPrimitive.Portal>
-		<DropdownMenuPrimitive.DropdownMenuSubContent
-			className={ classNames( 'vip-dropdown-menu-sub-content', className ) }
-			ref={ forwardRef }
-			sx={ styles }
-			{ ...props }
-		/>
-	</DropdownMenuPrimitive.Portal>
-) );
-
-DropdownSubContent.displayName = 'DropdownSubContent';
-
-DropdownSubContent.propTypes = {
-	className: PropTypes.string,
-};

package/src/system/Dropdown/DropdownItem.js

@@ -1,108 +0,0 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-export const styles = {
-	unset: 'all',
-	cursor: 'pointer',
-	display: 'flex',
-	alignItems: 'center',
-	flexDirection: 'row',
-	textAlign: 'left',
-	height: 25,
-	textDecoration: 'none',
-	position: 'relative',
-	m: 0,
-	color: 'heading',
-	px: 2,
-	paddingLeft: 3,
-	py: 1,
-	'&:hover, &:focus': {
-		backgroundColor: 'hover',
-		textDecoration: 'none',
-	},
-
-	'&[data-disabled]': {
-		color: 'muted',
-		pointerEvents: 'none',
-	},
-
-	'&[data-highlighted]': {
-		backgroundColor: 'hover',
-		color: 'link',
-	},
-};
-
-export const DropdownItem = React.forwardRef( ( { className, ...props }, forwardRef ) => (
-	<DropdownMenuPrimitive.DropdownMenuItem
-		className={ classNames( 'vip-dropdown-menu-item', className ) }
-		ref={ forwardRef }
-		sx={ styles }
-		{ ...props }
-	/>
-) );
-
-DropdownItem.displayName = 'DropdownItem';
-
-DropdownItem.propTypes = {
-	className: PropTypes.string,
-};
-
-export const DropdownCheckboxItem = React.forwardRef( ( { className, ...props }, forwardRef ) => (
-	<DropdownMenuPrimitive.CheckboxItem
-		className={ classNames( 'vip-dropdown-checkbox-item', className ) }
-		ref={ forwardRef }
-		sx={ styles }
-		{ ...props }
-	/>
-) );
-
-DropdownCheckboxItem.displayName = 'DropdownCheckboxItem';
-
-DropdownCheckboxItem.propTypes = {
-	className: PropTypes.string,
-};
-
-export const DropdownRadioItem = React.forwardRef( ( { className, ...props }, forwardRef ) => (
-	<DropdownMenuPrimitive.RadioItem
-		className={ classNames( 'vip-dropdown-radio-item', className ) }
-		ref={ forwardRef }
-		sx={ styles }
-		{ ...props }
-	/>
-) );
-
-DropdownRadioItem.displayName = 'DropdownRadioItem';
-
-DropdownRadioItem.propTypes = {
-	className: PropTypes.string,
-};
-
-export const DropdownSubTrigger = React.forwardRef( ( { className, ...props }, forwardRef ) => (
-	<DropdownMenuPrimitive.SubTrigger
-		className={ classNames( 'vip-dropdown-sub-trigger', className ) }
-		ref={ forwardRef }
-		sx={ {
-			...styles,
-			...{
-				'&[data-state="open"]': {
-					background: 'highlight',
-					color: 'primary',
-				},
-			},
-		} }
-		{ ...props }
-	/>
-) );
-
-DropdownSubTrigger.displayName = 'DropdownSubTrigger';
-
-DropdownSubTrigger.propTypes = {
-	className: PropTypes.string,
-};

package/src/system/Dropdown/DropdownLabel.js

@@ -1,31 +0,0 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-export const styles = {
-	paddingLeft: 3,
-	fontSize: 12,
-	lineHeight: '25px',
-	color: 'muted',
-};
-
-export const DropdownLabel = React.forwardRef( ( { className, ...props }, forwardRef ) => (
-	<DropdownMenuPrimitive.DropdownMenuLabel
-		className={ classNames( 'vip-dropdown-menu-label', className ) }
-		ref={ forwardRef }
-		sx={ styles }
-		{ ...props }
-	/>
-) );
-
-DropdownLabel.displayName = 'DropdownLabel';
-
-DropdownLabel.propTypes = {
-	className: PropTypes.string,
-};

package/src/system/Dropdown/DropdownSeparator.js

@@ -1,30 +0,0 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-export const styles = {
-	height: '1px',
-	backgroundColor: 'borders.2',
-	my: '5px',
-};
-
-export const DropdownSeparator = React.forwardRef( ( { className, ...props }, forwardRef ) => (
-	<DropdownMenuPrimitive.DropdownMenuSeparator
-		className={ classNames( 'vip-dropdown-menu-separator', className ) }
-		ref={ forwardRef }
-		sx={ styles }
-		{ ...props }
-	/>
-) );
-
-DropdownSeparator.displayName = 'DropdownSeparator';
-
-DropdownSeparator.propTypes = {
-	className: PropTypes.string,
-};