@automattic/vip-design-system 0.27.3 → 0.27.4

package/build/system/NewTabs/Tabs.js

@@ -36,12 +36,15 @@ var NewTabs = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       onValueChange = _ref$onValueChange === void 0 ? undefined : _ref$onValueChange,
       _ref$defaultValue = _ref.defaultValue,
       defaultValue = _ref$defaultValue === void 0 ? undefined : _ref$defaultValue,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? undefined : _ref$value,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? null : _ref$className,
       _ref$sx = _ref.sx,
       sx = _ref$sx === void 0 ? {} : _ref$sx;
   return (0, _jsxRuntime.jsx)(TabsPrimitive.Root, {
     ref: ref,
+    value: value,
     defaultValue: defaultValue,
     onValueChange: onValueChange,
     className: (0, _classnames["default"])('vip-tabs-component', className),
@@ -55,6 +58,7 @@ NewTabs.propTypes = {
   className: _propTypes["default"].any,
   sx: _propTypes["default"].object,
   defaultValue: _propTypes["default"].node,
+  value: _propTypes["default"].node,
   onValueChange: _propTypes["default"].func,
   children: _propTypes["default"].node.isRequired
 };

package/build/system/NewTabs/Tabs.stories.js

@@ -1,12 +1,20 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.SetActiveTab = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
 
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+/**
+ * External dependencies
+ */
+
 /**
  * Internal dependencies
  */
@@ -58,4 +66,58 @@ var Default = function Default() {
   });
 };
 
-exports.Default = Default;
+exports.Default = Default;
+
+var SetActiveTab = function SetActiveTab() {
+  var _React$useState = _react["default"].useState('all'),
+      activeTab = _React$useState[0],
+      setActiveTab = _React$useState[1];
+
+  return (0, _jsxRuntime.jsxs)(_.NewTabs, {
+    value: activeTab,
+    onValueChange: function onValueChange(val) {
+      return setActiveTab(val);
+    },
+    children: [(0, _jsxRuntime.jsxs)(_.TabsList, {
+      title: "See all the content",
+      children: [(0, _jsxRuntime.jsx)(_.TabsTrigger, {
+        value: "all",
+        children: "All (5)"
+      }), (0, _jsxRuntime.jsx)(_.TabsTrigger, {
+        value: "live",
+        children: "Live (2)"
+      }), (0, _jsxRuntime.jsx)(_.TabsTrigger, {
+        value: "dev",
+        children: "In Development (3)"
+      }), (0, _jsxRuntime.jsx)(_.TabsTrigger, {
+        value: "protect",
+        disabled: true,
+        children: "Not accessible"
+      })]
+    }), (0, _jsxRuntime.jsx)(_.TabsContent, {
+      value: "all",
+      children: (0, _jsxRuntime.jsx)(_.Text, {
+        children: (0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          onClick: function onClick() {
+            return setActiveTab('live');
+          },
+          children: "Switch to live tab"
+        })
+      })
+    }), (0, _jsxRuntime.jsx)(_.TabsContent, {
+      value: "live",
+      children: "Live content"
+    }), (0, _jsxRuntime.jsx)(_.TabsContent, {
+      value: "dev",
+      children: (0, _jsxRuntime.jsxs)(_.Text, {
+        children: ["In Development content ", (0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          children: "Hey I am a button"
+        }), ' ']
+      })
+    })]
+  });
+};
+
+exports.SetActiveTab = SetActiveTab;

package/package.json

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

package/src/system/Form/Radio.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Label } from './Label';
 import { screenReaderTextClass } from '../ScreenReaderText/ScreenReaderText';
-import theme from '../theme';
+import mainTheme from '../theme';
 
 const prefix = 'vip-radio-component-';
 
@@ -19,7 +19,7 @@ const itemStyle = {
 	my: 2,
 };
 
-const radioPosition = theme.space[ 4 ] - theme.space[ 1 ];
+const radioPosition = mainTheme.space[ 4 ] - mainTheme.space[ 1 ];
 
 const inputStyle = {
 	...screenReaderTextClass,

package/src/system/NewTabs/Tabs.js

@@ -14,12 +14,20 @@ import React from 'react';
 
 const NewTabs = React.forwardRef(
 	(
-		{ children, onValueChange = undefined, defaultValue = undefined, className = null, sx = {} },
+		{
+			children,
+			onValueChange = undefined,
+			defaultValue = undefined,
+			value = undefined,
+			className = null,
+			sx = {},
+		},
 		ref
 	) => {
 		return (
 			<TabsPrimitive.Root
 				ref={ ref }
+				value={ value }
 				defaultValue={ defaultValue }
 				onValueChange={ onValueChange }
 				className={ classNames( 'vip-tabs-component', className ) }
@@ -35,6 +43,7 @@ NewTabs.propTypes = {
 	className: PropTypes.any,
 	sx: PropTypes.object,
 	defaultValue: PropTypes.node,
+	value: PropTypes.node,
 	onValueChange: PropTypes.func,
 	children: PropTypes.node.isRequired,
 };

package/src/system/NewTabs/Tabs.stories.jsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
 /**
  * Internal dependencies
  */
@@ -31,3 +36,32 @@ export const Default = () => (
 		</TabsContent>
 	</NewTabs>
 );
+export const SetActiveTab = () => {
+	const [ activeTab, setActiveTab ] = React.useState( 'all' );
+
+	return (
+		<NewTabs value={ activeTab } onValueChange={ val => setActiveTab( val ) }>
+			<TabsList title="See all the content">
+				<TabsTrigger value="all">All (5)</TabsTrigger>
+				<TabsTrigger value="live">Live (2)</TabsTrigger>
+				<TabsTrigger value="dev">In Development (3)</TabsTrigger>
+				<TabsTrigger value="protect" disabled={ true }>
+					Not accessible
+				</TabsTrigger>
+			</TabsList>
+			<TabsContent value="all">
+				<Text>
+					<button type="button" onClick={ () => setActiveTab( 'live' ) }>
+						Switch to live tab
+					</button>
+				</Text>
+			</TabsContent>
+			<TabsContent value="live">Live content</TabsContent>
+			<TabsContent value="dev">
+				<Text>
+					In Development content <button type="button">Hey I am a button</button>{ ' ' }
+				</Text>
+			</TabsContent>
+		</NewTabs>
+	);
+};