@automattic/vip-design-system 2.13.2 → 2.13.4

package/build/system/Accordion/Accordion.stories.js

@@ -42,7 +42,11 @@ var ExampleAccordion = function ExampleAccordion() {
     children: [_jsxs(Accordion.Item, {
       value: "teamPermissions",
       children: [_jsx(Accordion.TriggerWithIcon, {
-        icon: _jsx(RiUserAddLine, {}),
+        icon: _jsx(RiUserAddLine, {
+          sx: {
+            color: 'support.accent.success'
+          }
+        }),
         children: "Team & Permissions"
       }), _jsx(Accordion.Content, {
         children: _jsx(ExampleContent, {})
@@ -50,7 +54,11 @@ var ExampleAccordion = function ExampleAccordion() {
     }), _jsxs(Accordion.Item, {
       value: "addContentMedia",
       children: [_jsx(Accordion.TriggerWithIcon, {
-        icon: _jsx(BiBookContent, {}),
+        icon: _jsx(BiBookContent, {
+          sx: {
+            color: 'support.accent.success'
+          }
+        }),
         children: "Add Content & Media"
       }), _jsx(Accordion.Content, {
         children: _jsx(ExampleContent, {})
@@ -58,7 +66,11 @@ var ExampleAccordion = function ExampleAccordion() {
     }), _jsxs(Accordion.Item, {
       value: "addCode",
       children: [_jsx(Accordion.TriggerWithIcon, {
-        icon: _jsx(RiCodeSSlashFill, {}),
+        icon: _jsx(RiCodeSSlashFill, {
+          sx: {
+            color: 'support.accent.success'
+          }
+        }),
         children: "Add Code"
       }), _jsx(Accordion.Content, {
         children: _jsx(ExampleContent, {})

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

@@ -7,8 +7,9 @@ export type ToggleProps = Switch.SwitchProps & {
     className?: Argument;
     onChange?: () => void;
     variant?: string;
+    disabled?: boolean;
 };
 export declare const Toggle: {
-    ({ name, onChange, className, variant, ...rest }: ToggleProps): import("react").JSX.Element;
+    ({ name, onChange, className, variant, disabled, ...rest }: ToggleProps): import("react").JSX.Element;
     displayName: string;
 };

package/build/system/Form/Toggle.js

@@ -1,4 +1,4 @@
-var _excluded = ["name", "onChange", "className", "variant"];
+var _excluded = ["name", "onChange", "className", "variant", "disabled"];
 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; }
 /* eslint-disable max-len */
@@ -17,12 +17,13 @@ export var Toggle = function Toggle(_ref) {
     className = _ref.className,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
+    disabled = _ref.disabled,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   return _jsx(Switch.Root, _extends({
     className: classNames('vip-toggle-component', className),
     sx: {
       all: 'unset',
-      cursor: 'pointer',
+      cursor: disabled ? 'not-allowed' : 'pointer',
       position: 'relative',
       width: 40,
       height: 20,
@@ -36,8 +37,9 @@ export var Toggle = function Toggle(_ref) {
         return theme.outline;
       },
       '&[disabled]': {
-        opacity: 0.7
+        opacity: 0.5
       },
+      opacity: disabled ? 0.5 : 1,
       '&[data-state="checked"]': {
         backgroundColor: variant,
         backgroundPosition: 'left 2px top 2px',

package/build/system/Form/Toggle.stories.d.ts

@@ -5,7 +5,7 @@ import { Toggle } from '..';
 declare const _default: {
     title: string;
     component: {
-        ({ name, onChange, className, variant, ...rest }: import("./Toggle").ToggleProps): import("react").JSX.Element;
+        ({ name, onChange, className, variant, disabled, ...rest }: import("./Toggle").ToggleProps): import("react").JSX.Element;
         displayName: string;
     };
     argTypes: {

package/build/system/theme/index.js

@@ -53,6 +53,10 @@ const getComponentColors = ( theme, gColor, gVariants ) => ( {
 		...theme.tag,
 	},
 
+	support: {
+		...theme.support,
+	},
+
 	// Notice
 	notice: {
 		// extending the notice theme to support the alert variant

package/package.json

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

package/src/system/Accordion/Accordion.stories.tsx

@@ -27,7 +27,9 @@ const ExampleContent = () => (
 const ExampleAccordion = () => (
 	<Accordion.Root defaultValue="teamPermissions" sx={ { width: '250px' } }>
 		<Accordion.Item value="teamPermissions">
-			<Accordion.TriggerWithIcon icon={ <RiUserAddLine /> }>
+			<Accordion.TriggerWithIcon
+				icon={ <RiUserAddLine sx={ { color: 'support.accent.success' } } /> }
+			>
 				Team & Permissions
 			</Accordion.TriggerWithIcon>
 			<Accordion.Content>
@@ -35,7 +37,9 @@ const ExampleAccordion = () => (
 			</Accordion.Content>
 		</Accordion.Item>
 		<Accordion.Item value="addContentMedia">
-			<Accordion.TriggerWithIcon icon={ <BiBookContent /> }>
+			<Accordion.TriggerWithIcon
+				icon={ <BiBookContent sx={ { color: 'support.accent.success' } } /> }
+			>
 				Add Content & Media
 			</Accordion.TriggerWithIcon>
 			<Accordion.Content>
@@ -43,7 +47,11 @@ const ExampleAccordion = () => (
 			</Accordion.Content>
 		</Accordion.Item>
 		<Accordion.Item value="addCode">
-			<Accordion.TriggerWithIcon icon={ <RiCodeSSlashFill /> }>Add Code</Accordion.TriggerWithIcon>
+			<Accordion.TriggerWithIcon
+				icon={ <RiCodeSSlashFill sx={ { color: 'support.accent.success' } } /> }
+			>
+				Add Code
+			</Accordion.TriggerWithIcon>
 			<Accordion.Content>
 				<ExampleContent />
 			</Accordion.Content>

package/src/system/Form/Toggle.tsx

@@ -17,6 +17,7 @@ export type ToggleProps = Switch.SwitchProps & {
 	className?: Argument;
 	onChange?: () => void;
 	variant?: string;
+	disabled?: boolean;
 };
 
 export const Toggle = ( {
@@ -24,13 +25,14 @@ export const Toggle = ( {
 	onChange,
 	className,
 	variant = 'primary',
+	disabled,
 	...rest
 }: ToggleProps ) => (
 	<Switch.Root
 		className={ classNames( 'vip-toggle-component', className ) }
 		sx={ {
 			all: 'unset',
-			cursor: 'pointer',
+			cursor: disabled ? 'not-allowed' : 'pointer',
 			position: 'relative',
 			width: 40,
 			height: 20,
@@ -44,8 +46,9 @@ export const Toggle = ( {
 
 			'&:focus-visible': ( theme: ThemeProps ) => theme.outline,
 			'&[disabled]': {
-				opacity: 0.7,
+				opacity: 0.5,
 			},
+			opacity: disabled ? 0.5 : 1,
 			'&[data-state="checked"]': {
 				backgroundColor: variant,
 				backgroundPosition: 'left 2px top 2px',

package/src/system/theme/index.js

@@ -53,6 +53,10 @@ const getComponentColors = ( theme, gColor, gVariants ) => ( {
 		...theme.tag,
 	},
 
+	support: {
+		...theme.support,
+	},
+
 	// Notice
 	notice: {
 		// extending the notice theme to support the alert variant