@automattic/vip-design-system 0.27.2 → 0.27.4

package/build/system/Form/Radio.js

@@ -19,6 +19,8 @@ var _Label = require("./Label");
 
 var _ScreenReaderText = require("../ScreenReaderText/ScreenReaderText");
 
+var _theme = _interopRequireDefault(require("../theme"));
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["children"],
@@ -33,10 +35,9 @@ var prefix = 'vip-radio-component-';
 var itemStyle = {
   display: 'flex',
   alignItems: 'center',
-  minHeight: function minHeight(theme) {
-    return theme.space[4] - theme.space[2] + "px";
-  }
+  my: 2
 };
+var radioPosition = _theme["default"].space[4] - _theme["default"].space[1];
 var inputStyle = (0, _extends2["default"])({}, _ScreenReaderText.screenReaderTextClass, {
   width: '16px',
   height: '16px',
@@ -46,7 +47,7 @@ var inputStyle = (0, _extends2["default"])({}, _ScreenReaderText.screenReaderTex
       border: '2px solid',
       borderColor: 'border',
       zIndex: 3,
-      left: -1 * (theme.space[4] - theme.space[2]) + "px"
+      left: -1 * radioPosition + "px"
     });
   },
   '&:checked ~ label::after': {
@@ -57,9 +58,7 @@ var inputStyle = (0, _extends2["default"])({}, _ScreenReaderText.screenReaderTex
 var labelStyle = {
   cursor: 'pointer',
   position: 'relative',
-  marginLeft: function marginLeft(theme) {
-    return theme.space[4] - theme.space[2] + "px";
-  },
+  marginLeft: radioPosition + "px",
   marginBottom: 0,
   userSelect: 'none',
   color: 'heading',
@@ -68,9 +67,7 @@ var labelStyle = {
     borderRadius: '50%',
     position: 'absolute',
     top: 0,
-    left: function left(theme) {
-      return -1 * (theme.space[4] - theme.space[2]) + "px";
-    },
+    left: -1 * radioPosition + "px",
     transition: 'all .3s ease-out',
     zIndex: 2,
     width: '16px',

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.2",
+	"version": "0.27.4",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",

package/src/system/Form/Radio.js

@@ -9,15 +9,18 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Label } from './Label';
 import { screenReaderTextClass } from '../ScreenReaderText/ScreenReaderText';
+import mainTheme from '../theme';
 
 const prefix = 'vip-radio-component-';
 
 const itemStyle = {
 	display: 'flex',
 	alignItems: 'center',
-	minHeight: theme => `${ theme.space[ 4 ] - theme.space[ 2 ] }px`,
+	my: 2,
 };
 
+const radioPosition = mainTheme.space[ 4 ] - mainTheme.space[ 1 ];
+
 const inputStyle = {
 	...screenReaderTextClass,
 	width: '16px',
@@ -28,7 +31,7 @@ const inputStyle = {
 		border: '2px solid',
 		borderColor: 'border',
 		zIndex: 3,
-		left: `${ -1 * ( theme.space[ 4 ] - theme.space[ 2 ] ) }px`,
+		left: `${ -1 * radioPosition }px`,
 	} ),
 	'&:checked ~ label::after': {
 		opacity: 1,
@@ -39,7 +42,7 @@ const inputStyle = {
 const labelStyle = {
 	cursor: 'pointer',
 	position: 'relative',
-	marginLeft: theme => `${ theme.space[ 4 ] - theme.space[ 2 ] }px`,
+	marginLeft: `${ radioPosition }px`,
 	marginBottom: 0,
 	userSelect: 'none',
 	color: 'heading',
@@ -48,7 +51,7 @@ const labelStyle = {
 		borderRadius: '50%',
 		position: 'absolute',
 		top: 0,
-		left: theme => `${ -1 * ( theme.space[ 4 ] - theme.space[ 2 ] ) }px`,
+		left: `${ -1 * radioPosition }px`,
 		transition: 'all .3s ease-out',
 		zIndex: 2,
 		width: '16px',

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>
+	);
+};