Gutenboarding: add header (#36525)

client/gutenboarding/components/header/index.tsx

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+export function Header() {
+	/* eslint-disable wpcalypso/jsx-classname-namespace */
+	return (
+		<div
+			className="gutenboarding__header"
+			role="region"
+			aria-label={ __( 'Top bar' ) }
+			tabIndex="-1"
+		>
+			<div
+				aria-label={ __( 'Document tools' ) }
+				aria-orientation="horizontal"
+				className="gutenboarding__header-toolbar"
+				role="toolbar"
+			></div>
+			<div className="gutenboarding__header-actions">
+				<Button isPrimary isLarge>
+					{ __( 'Continue' ) }
+				</Button>
+			</div>
+		</div>
+	);
+	/* eslint-enable wpcalypso/jsx-classname-namespace */
+}

client/gutenboarding/components/header/style.scss

@@ -0,0 +1,37 @@
+@import '../../gutenberg-styles/styles';
+
+// Copied from https://github.com/WordPress/gutenberg/blob/8c0c7b7267473b5c197dd3052e9707f75f4e6448/packages/edit-widgets/src/components/header/style.scss
+.gutenboarding__header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	border-bottom: 1px solid $light-gray-500;
+	height: $header-height;
+	background: $white;
+	z-index: z-index( '.edit-post-header' );
+
+	left: 0;
+	right: 0;
+	// Stick the toolbar to the top, because the admin bar is not fixed on mobile.
+	top: 0;
+	position: sticky;
+
+	// On mobile the main content area has to scroll, otherwise you can invoke the overscroll bounce on the non-scrolling container.
+	@include break-small {
+		position: fixed;
+		padding: $grid-size;
+		// Needed at wp-admin but not in Calypso
+		// top: $admin-bar-height-big;
+	}
+
+	// Needed at wp-admin but not in Calypso
+	/*
+	@include break-medium() {
+		top: $admin-bar-height;
+	}
+	*/
+}
+
+.gutenboarding__header-actions {
+	padding: 0 20px;
+}

client/gutenboarding/gutenberg-styles/README.md

@@ -0,0 +1,5 @@
+# Gutenberg core stylesheets
+
+From [`WordPress/gutenberg/assets/stylesheets`](https://github.com/WordPress/gutenberg/tree/399e5e143a62a66101285de623cf47fab159bbdb/assets/stylesheets) on Gutenberg v6.6.0.
+
+This will be replaced with imports from `@wordpress/base-styles` package [once it's available](https://github.com/WordPress/gutenberg/pull/17883).

client/gutenboarding/gutenberg-styles/_animations.scss

@@ -0,0 +1,5 @@
+@mixin edit-post__fade-in-animation($speed: 0.2s, $delay: 0s) {
+	animation: edit-post__fade-in-animation $speed ease-out $delay;
+	animation-fill-mode: forwards;
+	@include reduce-motion("animation");
+}

client/gutenboarding/gutenberg-styles/_breakpoints.scss

@@ -0,0 +1,41 @@
+/**
+ * Breakpoints & Media Queries
+ */
+
+// Most used breakpoints
+$break-huge: 1440px;
+$break-wide: 1280px;
+$break-xlarge: 1080px;
+$break-large: 960px;	// admin sidebar auto folds
+$break-medium: 782px;	// adminbar goes big
+$break-small: 600px;
+$break-mobile: 480px;
+$break-zoomed-in: 280px;
+
+// All media queries currently in WordPress:
+//
+// min-width: 2000px
+// min-width: 1680px
+// min-width: 1250px
+// max-width: 1120px *
+// max-width: 1000px
+// min-width: 769px and max-width: 1000px
+// max-width: 960px *
+// max-width: 900px
+// max-width: 850px
+// min-width: 800px and max-width: 1499px
+// max-width: 800px
+// max-width: 799px
+// max-width: 782px *
+// max-width: 768px
+// max-width: 640px *
+// max-width: 600px *
+// max-width: 520px
+// max-width: 500px
+// max-width: 480px *
+// max-width: 400px *
+// max-width: 380px
+// max-width: 320px *
+//
+// Those marked * seem to be more commonly used than the others.
+// Let's try and use as few of these as possible, and be mindful about adding new ones, so we don't make the situation worse

client/gutenboarding/gutenberg-styles/_colors.scss

@@ -0,0 +1,90 @@
+/**
+ * Colors
+ */
+
+// Hugo's new WordPress shades of gray, from http://codepen.io/hugobaeta/pen/grJjVp.
+$black: #000;
+$dark-gray-900: #191e23;
+$dark-gray-800: #23282d;
+$dark-gray-700: #32373c;
+$dark-gray-600: #40464d;
+$dark-gray-500: #555d66; // Use this most of the time for dark items.
+$dark-gray-400: #606a73;
+$dark-gray-300: #6c7781; // Lightest gray that can be used for AA text contrast.
+$dark-gray-200: #7e8993;
+$dark-gray-150: #8d96a0; // Lightest gray that can be used for AA non-text contrast.
+$dark-gray-100: #8f98a1;
+$light-gray-900: #a2aab2;
+$light-gray-800: #b5bcc2;
+$light-gray-700: #ccd0d4;
+$light-gray-600: #d7dade;
+$light-gray-500: #e2e4e7; // Good for "grayed" items and borders.
+$light-gray-400: #e8eaeb; // Good for "readonly" input fields and special text selection.
+$light-gray-300: #edeff0;
+$light-gray-200: #f3f4f5;
+$light-gray-100: #f8f9f9;
+$white: #fff;
+
+// Dark opacities, for use with light themes.
+$dark-opacity-900: rgba(#000510, 0.9);
+$dark-opacity-800: rgba(#00000a, 0.85);
+$dark-opacity-700: rgba(#06060b, 0.8);
+$dark-opacity-600: rgba(#000913, 0.75);
+$dark-opacity-500: rgba(#0a1829, 0.7);
+$dark-opacity-400: rgba(#0a1829, 0.65);
+$dark-opacity-300: rgba(#0e1c2e, 0.62);
+$dark-opacity-200: rgba(#162435, 0.55);
+$dark-opacity-100: rgba(#223443, 0.5);
+$dark-opacity-light-900: rgba(#304455, 0.45);
+$dark-opacity-light-800: rgba(#425863, 0.4);
+$dark-opacity-light-700: rgba(#667886, 0.35);
+$dark-opacity-light-600: rgba(#7b86a2, 0.3);
+$dark-opacity-light-500: rgba(#9197a2, 0.25);
+$dark-opacity-light-400: rgba(#95959c, 0.2);
+$dark-opacity-light-300: rgba(#829493, 0.15);
+$dark-opacity-light-200: rgba(#8b8b96, 0.1);
+$dark-opacity-light-100: rgba(#747474, 0.05);
+$dark-opacity-background-fill: rgba($dark-gray-700, 0.7); // Similar to $dark-opacity-light-200, but more opaque.
+
+// Light opacities, for use with dark themes.
+$light-opacity-900: rgba($white, 1);
+$light-opacity-800: rgba($white, 0.9);
+$light-opacity-700: rgba($white, 0.85);
+$light-opacity-600: rgba($white, 0.8);
+$light-opacity-500: rgba($white, 0.75);
+$light-opacity-400: rgba($white, 0.7);
+$light-opacity-300: rgba($white, 0.65);
+$light-opacity-200: rgba($white, 0.6);
+$light-opacity-100: rgba($white, 0.55);
+$light-opacity-light-900: rgba($white, 0.5);
+$light-opacity-light-800: rgba($white, 0.45);
+$light-opacity-light-700: rgba($white, 0.4);
+$light-opacity-light-600: rgba($white, 0.35);
+$light-opacity-light-500: rgba($white, 0.3);
+$light-opacity-light-400: rgba($white, 0.25);
+$light-opacity-light-300: rgba($white, 0.2);
+$light-opacity-light-200: rgba($white, 0.15);
+$light-opacity-light-100: rgba($white, 0.1);
+$light-opacity-background-fill: rgba($light-gray-300, 0.8);  // Similar to $light-opacity-light-200, but more opaque.
+
+// Additional colors.
+// Some are from https://make.wordpress.org/design/handbook/foundations/colors/.
+$blue-wordpress-700: #00669b;
+$blue-dark-900: #0071a1;
+
+$blue-medium-900: #006589;
+$blue-medium-800: #00739c;
+$blue-medium-700: #007fac;
+$blue-medium-600: #008dbe;
+$blue-medium-500: #00a0d2;
+$blue-medium-400: #33b3db;
+$blue-medium-300: #66c6e4;
+$blue-medium-200: #bfe7f3;
+$blue-medium-100: #e5f5fa;
+$blue-medium-highlight: #b3e7fe;
+$blue-medium-focus: #007cba;
+
+// Alert colors.
+$alert-yellow: #f0b849;
+$alert-red: #d94f4f;
+$alert-green: #4ab866;