@wordpress/admin-ui 1.0.1-next.47f435fc9.0

package/build-style/style.css

@@ -0,0 +1,150 @@
+/**
+ * Colors
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * Typography
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
+.admin-ui-page {
+  display: flex;
+  height: 100%;
+  background-color: #fff;
+  color: #2f2f2f;
+  position: relative;
+  z-index: 1;
+  flex-flow: column;
+  container: admin-ui-page/inline-size;
+}
+@media not (prefers-reduced-motion) {
+  .admin-ui-page {
+    transition: width ease-out 0.2s;
+  }
+}
+
+.admin-ui-page__header {
+  padding: 16px 48px;
+  border-bottom: 1px solid #f0f0f0;
+  background: #fff;
+  position: sticky;
+  top: 0;
+}
+@container (max-width: 430px) {
+  .admin-ui-page__header {
+    padding: 16px 24px;
+  }
+}
+
+.admin-ui-page__header-subtitle {
+  padding-block-end: 8px;
+  color: #757575;
+  font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 20px;
+  margin: 0;
+}
+
+.admin-ui-page__content {
+  flex-grow: 1;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+.admin-ui-page__content.has-padding {
+  padding: 16px 20px;
+}
+@container (max-width: 430px) {
+  .admin-ui-page__content.has-padding {
+    padding: 16px 24px;
+  }
+}
+
+.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon {
+  width: auto;
+  padding: 0 8px;
+}
+.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon svg {
+  display: none;
+}
+.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon::after {
+  content: attr(aria-label);
+  font-size: 12px;
+}

package/build-types/index.d.ts

@@ -0,0 +1,3 @@
+export { default as NavigableRegion } from './navigable-region';
+export { default as Page } from './page';
+//# sourceMappingURL=index.d.ts.map

package/build-types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/build-types/navigable-region/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Type definitions
+ */
+type NavigableRegionProps = {
+    children: React.ReactNode;
+    className?: string;
+    ariaLabel: string;
+    as?: React.ElementType;
+    [key: string]: any;
+};
+declare const NavigableRegion: import("react").ForwardRefExoticComponent<Omit<NavigableRegionProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export default NavigableRegion;
+//# sourceMappingURL=index.d.ts.map

package/build-types/navigable-region/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/navigable-region/index.tsx"],"names":[],"mappings":"AAUA;;GAEG;AACH,KAAK,oBAAoB,GAAG;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,CAAE,GAAG,EAAE,MAAM,GAAI,GAAG,CAAC;CACrB,CAAC;AAGF,QAAA,MAAM,eAAe,2HAepB,CAAC;AAIF,eAAe,eAAe,CAAC"}

package/build-types/page/header.d.ts

@@ -0,0 +1,9 @@
+export default function Header({ breadcrumbs, badges, title, subTitle, actions, }: {
+    breadcrumbs?: React.ReactNode;
+    badges?: React.ReactNode;
+    title?: React.ReactNode;
+    subTitle: React.ReactNode;
+    actions?: React.ReactNode;
+    showSidebarToggle?: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=header.d.ts.map

package/build-types/page/header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../src/page/header.tsx"],"names":[],"mappings":"AASA,MAAM,CAAC,OAAO,UAAU,MAAM,CAAE,EAC/B,WAAW,EACX,MAAM,EACN,KAAK,EACL,QAAQ,EACR,OAAO,GACP,EAAE;IACF,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B,+BA8BA"}

package/build-types/page/index.d.ts

@@ -0,0 +1,12 @@
+declare function Page({ breadcrumbs, badges, title, subTitle, children, className, actions, hasPadding, }: {
+    breadcrumbs?: React.ReactNode;
+    badges?: React.ReactNode;
+    title?: React.ReactNode;
+    subTitle?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+    actions?: React.ReactNode;
+    hasPadding?: boolean;
+}): import("react").JSX.Element;
+export default Page;
+//# sourceMappingURL=index.d.ts.map

package/build-types/page/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/page/index.tsx"],"names":[],"mappings":"AAWA,iBAAS,IAAI,CAAE,EACd,WAAW,EACX,MAAM,EACN,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,OAAO,EACP,UAAkB,GAClB,EAAE;IACF,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB,+BAuBA;AAED,eAAe,IAAI,CAAC"}

package/package.json

@@ -0,0 +1,48 @@
+{
+	"name": "@wordpress/admin-ui",
+	"version": "1.0.1-next.47f435fc9.0",
+	"description": "Generic components to be used in the Admin UI.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"admin",
+		"ui"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/admin-ui/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/admin-ui"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"exports": {
+		".": {
+			"types": "./build-types/index.d.ts",
+			"import": "./build-module/index.js",
+			"require": "./build/index.js"
+		},
+		"./package.json": "./package.json"
+	},
+	"react-native": "src/index",
+	"types": "build-types",
+	"sideEffects": false,
+	"dependencies": {
+		"@wordpress/base-styles": "^6.8.1-next.47f435fc9.0",
+		"@wordpress/components": "^30.6.1-next.47f435fc9.0",
+		"@wordpress/element": "^6.32.1-next.47f435fc9.0",
+		"clsx": "^2.1.1"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"gitHead": "9720f22c138771d2ed1a0522725c3cdf1c242953"
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default as NavigableRegion } from './navigable-region';
+export { default as Page } from './page';

package/src/navigable-region/index.tsx

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Type definitions
+ */
+type NavigableRegionProps = {
+	children: React.ReactNode;
+	className?: string;
+	ariaLabel: string;
+	as?: React.ElementType;
+	[ key: string ]: any;
+};
+
+// This is a copy of the private `NavigableRegion` component from the '@wordpress/editor' private APIs.
+const NavigableRegion = forwardRef< HTMLElement, NavigableRegionProps >(
+	( { children, className, ariaLabel, as: Tag = 'div', ...props }, ref ) => {
+		return (
+			<Tag
+				ref={ ref }
+				className={ clsx( 'admin-ui-navigable-region', className ) }
+				aria-label={ ariaLabel }
+				role="region"
+				tabIndex="-1"
+				{ ...props }
+			>
+				{ children }
+			</Tag>
+		);
+	}
+);
+
+NavigableRegion.displayName = 'NavigableRegion';
+
+export default NavigableRegion;

package/src/page/header.tsx

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHeading as Heading,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+
+export default function Header( {
+	breadcrumbs,
+	badges,
+	title,
+	subTitle,
+	actions,
+}: {
+	breadcrumbs?: React.ReactNode;
+	badges?: React.ReactNode;
+	title?: React.ReactNode;
+	subTitle: React.ReactNode;
+	actions?: React.ReactNode;
+	showSidebarToggle?: boolean;
+} ) {
+	return (
+		<VStack className="admin-ui-page__header" as="header">
+			<HStack
+				className="admin-ui-page__header-title"
+				justify="space-between"
+				spacing={ 2 }
+			>
+				<HStack spacing={ 2 }>
+					{ title && (
+						<Heading as="h2" level={ 3 } weight={ 500 } truncate>
+							{ title }
+						</Heading>
+					) }
+					{ breadcrumbs }
+					{ badges }
+				</HStack>
+				<HStack
+					style={ { width: 'auto', flexShrink: 0 } }
+					spacing={ 2 }
+					className="admin-ui-page__header-actions"
+				>
+					{ actions }
+				</HStack>
+			</HStack>
+			{ subTitle && (
+				<p className="admin-ui-page__header-subtitle">{ subTitle }</p>
+			) }
+		</VStack>
+	);
+}

package/src/page/index.tsx

@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * Internal dependencies
+ */
+import Header from './header';
+import NavigableRegion from '../navigable-region';
+
+function Page( {
+	breadcrumbs,
+	badges,
+	title,
+	subTitle,
+	children,
+	className,
+	actions,
+	hasPadding = false,
+}: {
+	breadcrumbs?: React.ReactNode;
+	badges?: React.ReactNode;
+	title?: React.ReactNode;
+	subTitle?: React.ReactNode;
+	children: React.ReactNode;
+	className?: string;
+	actions?: React.ReactNode;
+	hasPadding?: boolean;
+} ) {
+	const classes = clsx( 'admin-ui-page', className );
+
+	return (
+		<NavigableRegion className={ classes } ariaLabel={ title }>
+			{ ( title || breadcrumbs || badges ) && (
+				<Header
+					breadcrumbs={ breadcrumbs }
+					badges={ badges }
+					title={ title }
+					subTitle={ subTitle }
+					actions={ actions }
+				/>
+			) }
+			{ hasPadding ? (
+				<div className="admin-ui-page__content has-padding">
+					{ children }
+				</div>
+			) : (
+				children
+			) }
+		</NavigableRegion>
+	);
+}
+
+export default Page;

package/src/page/style.scss

@@ -0,0 +1,74 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/breakpoints" as *;
+
+.admin-ui-page {
+	display: flex;
+	height: 100%;
+	background-color: $white;
+	color: $gray-800;
+	position: relative;
+	z-index: 1;
+	flex-flow: column;
+	container: admin-ui-page / inline-size;
+
+	@media not (prefers-reduced-motion) {
+		transition: width ease-out 0.2s;
+	}
+}
+
+.admin-ui-page__header {
+	padding: $grid-unit-20 $grid-unit-60;
+	border-bottom: 1px solid $gray-100;
+	background: $white;
+	position: sticky;
+	top: 0;
+
+	@container (max-width: 430px) {
+		padding: $grid-unit-20 $grid-unit-30;
+	}
+}
+
+.admin-ui-page__header-subtitle {
+	padding-block-end: $grid-unit-10;
+	color: $gray-700;
+	@include body-medium();
+	margin: 0;
+}
+
+.admin-ui-page__content {
+	flex-grow: 1;
+	overflow: auto;
+	display: flex;
+	flex-direction: column;
+
+	&.has-padding {
+		padding: $grid-unit-20 $grid-unit * 2.5;
+		@container (max-width: 430px) {
+			padding: $grid-unit-20 $grid-unit-30;
+		}
+	}
+}
+
+// Show button text labels when preference is enabled.
+.show-icon-labels {
+	.admin-ui-page__header-actions {
+		.components-button.has-icon {
+			width: auto;
+			padding: 0 $grid-unit-10;
+
+			// Hide the button icons when labels are set to display...
+			svg {
+				display: none;
+			}
+			// ... and display labels.
+			&::after {
+				content: attr(aria-label);
+				font-size: $helptext-font-size;
+			}
+		}
+
+	}
+}
+

package/src/style.scss

@@ -0,0 +1 @@
+@use "./page/style.scss";

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"references": [ { "path": "../components" }, { "path": "../element" } ]
+}