@automattic/vip-design-system 0.28.7 → 0.29.0

package/build/system/Badge/Badge.js

@@ -41,16 +41,13 @@ var Badge = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef
       display: 'inline-block',
       borderRadius: 1,
       fontWeight: 'heading',
-      '&:hover, &:focus': {
-        backgroundColor: "tag." + variant + ".hover"
-      },
       a: {
         color: "tag." + variant + ".text",
         '&:hover, &:focus, &:active': {
           textDecoration: 'none'
         },
-        '&:active': {
-          color: variant + ".active"
+        '&:active, &:visited': {
+          color: "tag." + variant + ".text"
         }
       }
     }, sx),

package/build/system/Button/ButtonSubmit.js

@@ -88,7 +88,7 @@ var ButtonSubmit = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, fo
 exports.ButtonSubmit = ButtonSubmit;
 ButtonSubmit.displayName = 'ButtonSubmit';
 ButtonSubmit.propTypes = {
-  label: _propTypes["default"].string.isRequired,
+  label: _propTypes["default"].node.isRequired,
   disabled: _propTypes["default"].bool,
   loading: _propTypes["default"].bool,
   variant: _propTypes["default"].oneOf(_.variants),

package/build/system/Form/index.js

@@ -22,10 +22,6 @@ var _ToggleRow = require("./ToggleRow");
 
 exports.ToggleRow = _ToggleRow.ToggleRow;
 
-var _ToggleGroup = require("./ToggleGroup");
-
-exports.ToggleGroup = _ToggleGroup.ToggleGroup;
-
 var _Select = require("./Select");
 
 exports.Select = _Select.Select;

package/build/system/index.js

@@ -74,7 +74,6 @@ exports.Input = _Form.Input;
 exports.Label = _Form.Label;
 exports.Toggle = _Form.Toggle;
 exports.ToggleRow = _Form.ToggleRow;
-exports.ToggleGroup = _Form.ToggleGroup;
 exports.Validation = _Form.Validation;
 exports.Radio = _Form.Radio;
 exports.RadioBoxGroup = _Form.RadioBoxGroup;

package/package.json

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

package/src/system/Badge/Badge.js

@@ -27,16 +27,13 @@ const Badge = React.forwardRef(
 				display: 'inline-block',
 				borderRadius: 1,
 				fontWeight: 'heading',
-				'&:hover, &:focus': {
-					backgroundColor: `tag.${ variant }.hover`,
-				},
 				a: {
 					color: `tag.${ variant }.text`,
 					'&:hover, &:focus, &:active': {
 						textDecoration: 'none',
 					},
-					'&:active': {
-						color: `${ variant }.active`,
+					'&:active, &:visited': {
+						color: `tag.${ variant }.text`,
 					},
 				},
 				...sx,

package/src/system/Button/ButtonSubmit.js

@@ -63,7 +63,7 @@ export const ButtonSubmit = React.forwardRef(
 ButtonSubmit.displayName = 'ButtonSubmit';
 
 ButtonSubmit.propTypes = {
-	label: PropTypes.string.isRequired,
+	label: PropTypes.node.isRequired,
 	disabled: PropTypes.bool,
 	loading: PropTypes.bool,
 	variant: PropTypes.oneOf( variants ),

package/src/system/Form/index.js

@@ -6,7 +6,6 @@ import { Label } from './Label';
 import { Toggle } from './Toggle';
 import { Validation } from './Validation';
 import { ToggleRow } from './ToggleRow';
-import { ToggleGroup } from './ToggleGroup';
 import { Select } from './Select';
 import { Radio } from './Radio';
 import { RadioBoxGroup } from './RadioBoxGroup';
@@ -18,7 +17,6 @@ export {
 	Label,
 	Radio,
 	RadioBoxGroup,
-	ToggleGroup,
 	Select,
 	Textarea,
 	Toggle,

package/src/system/index.js

@@ -30,7 +30,6 @@ import {
 	Label,
 	Toggle,
 	ToggleRow,
-	ToggleGroup,
 	Validation,
 	Radio,
 	RadioBoxGroup,
@@ -105,7 +104,6 @@ export {
 	TabsList,
 	Toggle,
 	ToggleRow,
-	ToggleGroup,
 	Time,
 	Timeline,
 	Validation,

package/src/system/Form/ToggleGroup.js

@@ -1,67 +0,0 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-
-const ToggleGroup = React.forwardRef(
-	( { onChange, groupLabel, value, options, ...props }, forwardRef ) => (
-		<RadioGroupPrimitive.Root
-			onValueChange={ onChange }
-			value={ value }
-			aria-label={ groupLabel }
-			sx={ {
-				bg: 'backgroundSecondary',
-				p: 1,
-				display: 'flex',
-				alignItems: 'center',
-			} }
-			ref={ forwardRef }
-			{ ...props }
-		>
-			{ options.map( ( option, index ) => (
-				<RadioGroupPrimitive.Item
-					key={ option.value }
-					value={ option.value }
-					id={ `o${ index }` }
-					sx={ {
-						fontSize: 1,
-						color: 'muted',
-						background: 'none',
-						border: 'none',
-						cursor: 'pointer',
-						borderRadius: 1,
-						py: 1,
-						px: 2,
-						flex: '1 1 auto',
-						textAlign: 'center',
-						'&:hover': {
-							color: 'heading',
-						},
-						'&[data-state=checked]': {
-							backgroundColor: 'background',
-							boxShadow: 'low',
-							color: 'heading',
-						},
-					} }
-				>
-					{ option.label }
-				</RadioGroupPrimitive.Item>
-			) ) }
-		</RadioGroupPrimitive.Root>
-	)
-);
-
-ToggleGroup.displayName = 'ToggleGroup';
-
-ToggleGroup.propTypes = {
-	onChange: PropTypes.func,
-	options: PropTypes.array,
-	value: PropTypes.string,
-	groupLabel: PropTypes.string,
-};
-
-export { ToggleGroup };

package/src/system/Form/ToggleGroup.stories.jsx

@@ -1,41 +0,0 @@
-/**
- * External dependencies
- */
-import { useState } from 'react';
-
-/**
- * Internal dependencies
- */
-import { ToggleGroup } from '..';
-
-export default {
-	title: 'ToggleGroup',
-	component: ToggleGroup,
-};
-
-const options = [
-	{
-		label: 'One',
-		value: 'one',
-	},
-	{
-		label: 'Two',
-		value: 'two',
-	},
-	{
-		label: 'Three',
-		value: 'three',
-	},
-];
-
-export const Default = () => {
-	const [ value, setValue ] = useState( 'one' );
-	return (
-		<ToggleGroup
-			value={ value }
-			onChange={ newValue => setValue( newValue ) }
-			groupLabel="group"
-			options={ options }
-		/>
-	);
-};