Global Styles Sidebar (Design/Code V2)

.storybook/themes/blueberry.js

@@ -63,7 +63,10 @@ const theme = createTheme(({ get, space, theme }) => {
 
 	const SEGMENTED_CONTROL_PROPS = {
 		segmentedControlFontSize: '12px',
+		segmentedControlBackdropBackgroundColor: get('surfaceColor'),
+		segmentedControlBackdropBorderColor: get('surfaceColor'),
 		segmentedControlBackdropBoxShadow: get('controlSurfaceBoxShadow'),
+		segmentedControlButtonActiveTextColor: get('colorAdmin'),
 	};
 
 	const SLIDER_PROPS = {

.storybook/themes/next.js

@@ -13,6 +13,10 @@ const theme = createTheme(({ get, theme, space }) => {
 		controlBorderRadius: '2px',
 		controlHeight: '36px',
 		menuItemHeight: '32px',
+		segmentedControlBackdropBackgroundColor: get('colorText'),
+		segmentedControlButtonColorActive: 'transparent',
+		segmentedControlBackdropBoxShadow: '0 0 6px 1px rgba(0, 0, 0, 0.1)',
+		segmentedControlButtonActiveTextColor: get('colorTextInverted'),
 		sliderThumbBackgroundColor: get('colorAdmin'),
 		sliderThumbBorderColor: 'transparent',
 		sliderThumbBoxShadow: 'none',

packages/components/package.json

@@ -38,11 +38,14 @@
     "@types/react": "^16.9.46",
     "@wp-g2/icons": "^0.0.162",
     "@wp-g2/protokit": "^0.0.162",
+    "query-string": "7.0.0",
     "react-beautiful-dnd": "^13.0.0",
     "react-dnd": "^11.1.3",
     "react-dnd-html5-backend": "^11.1.3",
+    "react-icons": "^4.2.0",
     "react-frame-component": "^4.1.3",
     "react-number-format": "^4.4.1",
+    "react-json-view": "^1.21.3",
     "react-router-dom": "^5.2.0",
     "react-sortable-hoc": "^1.11.0",
     "sortablejs": "^1.10.2"
@@ -54,4 +57,4 @@
     "react-dom": "^16.13.1"
   },
   "gitHead": "9536f69d764f89429aa66f4368914ea7936ca4c7"
-}
+}

packages/components/src/Navigator/Router/Link.js

@@ -87,7 +87,10 @@ const Link = forwardRef(
 						context.location,
 					);
 
-					const href = location ? history.createHref(location) : '';
+					let href = location ? history.createHref(location) : '';
+					if (to) {
+						href = undefined;
+					}
 					const props = {
 						...rest,
 						href,

packages/components/src/Navigator/Router/NavLink.js

@@ -86,7 +86,7 @@ const NavLink = forwardRef(
 						props.innerRef = innerRef;
 					}
 
-					return <Link {...props} />;
+					return <Link {...props} to={to} />;
 				}}
 			</RouterContext.Consumer>
 		);

packages/components/src/SegmentedControl/SegmentedControl.js

@@ -21,6 +21,7 @@ function SegmentControl(props, forwardedRef) {
 		options = [],
 		onChange = noop,
 		size = 'medium',
+		showSeparator: showSeparatorProp = true,
 		value,
 		...otherProps
 	} = useContextSystem(props, 'SegmentedControl');
@@ -69,7 +70,8 @@ function SegmentControl(props, forwardedRef) {
 				containerWidth={sizes.width}
 			/>
 			{options.map((option, index) => {
-				const showSeparator = getShowSeparator(radio, index);
+				const showSeparator =
+					showSeparatorProp && getShowSeparator(radio, index);
 				return (
 					<Button
 						{...radio}

packages/components/src/SegmentedControl/SegmentedControl.styles.js

@@ -94,7 +94,7 @@ export const ButtonContentView = styled.div`
 `;
 
 export const buttonActive = css`
-	color: ${ui.get('controlTextActiveColor')};
+	color: ${ui.get('segmentedControlButtonActiveTextColor')};
 	font-weight: bold;
 `;
 

packages/components/src/__fixtures__/GlobalStylesSidebarV2/GlobalStylesSidebarV2.js

@@ -0,0 +1,182 @@
+import { ContextSystemProvider } from '@wp-g2/context';
+import { ui } from '@wp-g2/styles';
+import React from 'react';
+
+import {
+	CardHeader,
+	Heading,
+	Navigator,
+	NavigatorScreen,
+	NavigatorScreens,
+	View,
+} from '../../index';
+import {
+	ColorPickerModal,
+	Inspector,
+	URLSync,
+	useInitialPath,
+} from './components';
+import { ANIMATION_SPEED } from './constants';
+import {
+	ColorsElementScreen,
+	ColorsPaletteScreen,
+	ColorsScreen,
+	GlobalStylesScreen,
+	TypographyElementScreen,
+	TypographyScreen,
+} from './screens';
+import { AppProvider } from './state/AppState';
+
+/**
+ * This is the "root" Component (or app) for Global Styles.
+ */
+
+export default {
+	title: 'Examples/WIP/GlobalStylesSidebarV2',
+};
+
+/**
+ * These are the "routes" that bind navigation paths with components for the
+ * indivudal screens.
+ */
+const screens = [
+	{
+		component: GlobalStylesScreen,
+		path: '/',
+		title: 'Global Styles',
+	},
+	{
+		component: ColorsScreen,
+		path: '/colors',
+		title: 'Colors',
+	},
+	{
+		component: ColorsPaletteScreen,
+		path: '/colors/palette',
+		title: 'Palette',
+	},
+	{
+		component: ColorsElementScreen,
+		path: '/colors/elements/:id',
+		title: 'Color Element',
+	},
+	{
+		component: TypographyScreen,
+		path: '/typography',
+		title: 'Typography',
+	},
+	{
+		component: TypographyElementScreen,
+		path: '/typography/elements/:id',
+		title: 'Typography Element',
+	},
+];
+
+/**
+ * GlobalStylesHeaer and Sidebar can largely be ignored.
+ * These components exist to scaffold/bootstrap the Global Styles Sidebar
+ * app into a simluated Gutenberg UI environment.
+ */
+
+const GlobalStylesHeader = () => {
+	return (
+		<CardHeader>
+			<Heading size={5}>Global Styles</Heading>
+		</CardHeader>
+	);
+};
+
+const Sidebar = ({ children }) => {
+	return (
+		<ContextSystemProvider
+			value={{
+				Grid: { gap: 2 },
+				Icon: { size: 16 },
+			}}
+		>
+			<View
+				css={`
+					width: 280px;
+					position: absolute;
+					height: 100vh;
+					top: 0;
+					right: 0;
+					border-left: 1px solid ${ui.get('colorDivider')};
+				`}
+			>
+				{children}
+			</View>
+		</ContextSystemProvider>
+	);
+};
+
+/**
+ * Used for development purposes only.
+ */
+const DevOnlyComponents = () => {
+	return (
+		<>
+			<Inspector />
+			<URLSync />
+		</>
+	);
+};
+
+/**
+ * This is the main GlobalStylesSidebar app.
+ *
+ * The "AppProvider" is for prototyping purposes only.
+ * It's designed to simulate the data flow from WP data.
+ *
+ * The components to pay attention to would be the setup/relationship
+ * between the NavigatorScreens, NavigatorScree, and routes.
+ */
+const App = () => {
+	/**
+	 * Gets the (potential) initial path from the browser URL.
+	 */
+	const initialPath = useInitialPath();
+
+	return (
+		<AppProvider>
+			<ColorPickerModal />
+			<Navigator initialPath={initialPath}>
+				<DevOnlyComponents />
+				<GlobalStylesHeader />
+				<View
+					css={{
+						overflowY: 'auto',
+						height: 'calc(100vh - 50px)',
+					}}
+				>
+					<View>
+						<NavigatorScreens css={[ui.frame.height('auto')]}>
+							{screens.map((screen) => (
+								<NavigatorScreen
+									{...screen}
+									animationEnterDelay={0}
+									animationEnterDuration={ANIMATION_SPEED}
+									animationExitDuration={ANIMATION_SPEED}
+									exact
+									key={screen.path}
+								/>
+							))}
+						</NavigatorScreens>
+					</View>
+				</View>
+			</Navigator>
+		</AppProvider>
+	);
+};
+
+/**
+ * Mounting for Storybook.
+ */
+
+export const GlobalStylesSidebar = () => {
+	return (
+		<Sidebar>
+			<App />
+		</Sidebar>
+	);
+};

packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/ColorPickerModal.js

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import {
+	Card,
+	CardBody,
+	CardHeader,
+	CloseButton,
+	ColorPicker,
+	Heading,
+	HStack,
+	View,
+} from '../../../index';
+import { useAppState } from '../state';
+
+export function ColorPickerModal() {
+	const appState = useAppState();
+	const { showColorPicker, toggleShowColorPicker } = appState;
+	if (!showColorPicker) return null;
+	const { colorPickerKey, get, set } = appState;
+
+	const color = get(colorPickerKey);
+	const handleOnChange = (next) => set(colorPickerKey, next);
+
+	return (
+		<View
+			css={{
+				position: 'fixed',
+				right: 280,
+				top: 0,
+				bottom: 0,
+				zIndex: 999,
+			}}
+		>
+			<View css={{ right: 12, top: 100, position: 'relative' }}>
+				<Card>
+					<CardHeader>
+						<HStack>
+							<Heading size={5}>Color</Heading>
+							<CloseButton
+								onClick={toggleShowColorPicker}
+								size="small"
+							/>
+						</HStack>
+					</CardHeader>
+					<CardBody>
+						<ColorPicker
+							color={color}
+							onChange={handleOnChange}
+							width={280}
+						/>
+					</CardBody>
+				</Card>
+			</View>
+		</View>
+	);
+}