Merge pull request #120 from alphagov/2719-improve-css

CSS Improvements

e2e/lists.spec.js

@@ -8,7 +8,7 @@ test.beforeEach(async ({ page }) => {
 test.describe("bulleted list", () => {
   test("renders bullet list menu items", async ({ page }) => {
     await page.getByTitle("Ordered list").click();
-    await expect(page.locator(".menubar")).toBeVisible();
+    await expect(page.locator(".visual-editor__menu")).toBeVisible();
     const enabledMenuButtons = [];
     const disabledMenuButtons = ["Bullet list", "Ordered list"];
 
@@ -122,7 +122,7 @@ test.describe("bulleted list", () => {
 test.describe("numbered list", () => {
   test("renders numbered list menu items", async ({ page }) => {
     await page.getByTitle("Bullet list").click();
-    await expect(page.locator(".menubar")).toBeVisible();
+    await expect(page.locator(".visual-editor__menu")).toBeVisible();
     const enabledMenuButtons = [];
     const disabledMenuButtons = ["Bullet list", "Ordered list"];
 

e2e/menu_items_block/addresses.spec.js

@@ -11,7 +11,7 @@ test("renders address menu items with expected disabled states", async ({
   await page
     .locator('select:has-text("Add text block")')
     .selectOption("Address");
-  await expect(page.locator(".menubar")).toBeVisible();
+  await expect(page.locator(".visual-editor__menu")).toBeVisible();
 
   const enabledMenuButtons = [
     "Link",

e2e/menu_items_block/blockquote.spec.js

@@ -11,7 +11,7 @@ test("renders blockquote menu items with expected disabled states", async ({
   await page
     .locator('select:has-text("Add text block")')
     .selectOption("Blockquote");
-  await expect(page.locator(".menubar")).toBeVisible();
+  await expect(page.locator(".visual-editor__menu")).toBeVisible();
 
   const enabledMenuButtons = ["Link", "Email link"];
   const disabledMenuButtons = ["Bullet list", "Ordered list"];

e2e/menu_items_block/call_to_actions.spec.js

@@ -11,7 +11,7 @@ test("renders blockquote menu items with expected disabled states", async ({
   await page
     .locator('select:has-text("Add text block")')
     .selectOption("Call to action");
-  await expect(page.locator(".menubar")).toBeVisible();
+  await expect(page.locator(".visual-editor__menu")).toBeVisible();
 
   const enabledMenuButtons = [
     "Bullet list",

e2e/menu_items_block/contacts.spec.js

@@ -15,7 +15,7 @@ test("renders contact menu items with expected disabled states", async ({
   page,
 }) => {
   await page.locator("#editor .contact").click();
-  await expect(page.locator(".menubar")).toBeVisible();
+  await expect(page.locator(".visual-editor__menu")).toBeVisible();
 
   const enabledMenuButtons = ["Link", "Email link"];
   const disabledMenuButtons = ["Bullet list", "Ordered list"];

e2e/menu_items_block/example_callouts.spec.js

@@ -17,7 +17,7 @@ test("renders example callout menu items with expected disabled states", async (
   page,
 }) => {
   await page.locator("#editor .example").click();
-  await expect(page.locator(".menubar")).toBeVisible();
+  await expect(page.locator(".visual-editor__menu")).toBeVisible();
 
   const enabledMenuButtons = [
     "Bullet list",

e2e/menu_items_inline/headings.spec.js

@@ -10,7 +10,7 @@ test.describe("Heading 2", () => {
     await page
       .locator('select:has-text("Paragraph")')
       .selectOption("Heading 2");
-    await expect(page.locator(".menubar")).toBeVisible();
+    await expect(page.locator(".visual-editor__menu")).toBeVisible();
     const enabledMenuButtons = [];
     const disabledMenuButtons = ["Bullet list", "Ordered list"];
 
@@ -94,7 +94,7 @@ test.describe("Heading 3", () => {
     await page
       .locator('select:has-text("Paragraph")')
       .selectOption("Heading 3");
-    await expect(page.locator(".menubar")).toBeVisible();
+    await expect(page.locator(".visual-editor__menu")).toBeVisible();
     const enabledMenuButtons = [];
     const disabledMenuButtons = ["Bullet list", "Ordered list"];
 

e2e/menu_items_inline/information_callouts.spec.js

@@ -19,7 +19,7 @@ test("renders information callout menu items with expected disabled states", asy
   page,
 }) => {
   await page.locator("#editor .info-notice").click();
-  await expect(page.locator(".menubar")).toBeVisible();
+  await expect(page.locator(".visual-editor__menu")).toBeVisible();
 
   const enabledMenuButtons = ["Link", "Email link"];
   const disabledMenuButtons = ["Bullet list", "Ordered list"];

e2e/menu_items_inline/links.spec.js

@@ -46,14 +46,18 @@ test.describe("Link", () => {
 
   test("A tooltip is displayed with the URL of a link", async ({ page }) => {
     await expect(
-      page.locator(".tooltip").getByText("example.com", { exact: true }),
+      page
+        .locator(".visual-editor__tooltip")
+        .getByText("example.com", { exact: true }),
     ).not.toBeVisible();
     await page
       .locator("#editor")
       .getByText("Example link", { exact: true })
       .click();
     await expect(
-      page.locator(".tooltip").getByText("example.com", { exact: true }),
+      page
+        .locator(".visual-editor__tooltip")
+        .getByText("example.com", { exact: true }),
     ).toBeVisible();
   });
 });

e2e/menu_items_inline/warning_callouts.spec.js

@@ -17,7 +17,7 @@ test("renders warning callout menu items with expected disabled states", async (
   page,
 }) => {
   await page.locator("#editor .help-notice").click();
-  await expect(page.locator(".menubar")).toBeVisible();
+  await expect(page.locator(".visual-editor__menu")).toBeVisible();
 
   const enabledMenuButtons = ["Link", "Email link"];
   const disabledMenuButtons = ["Bullet list", "Ordered list"];

lib/plugins/editor-govspeak-class.js

@@ -3,7 +3,7 @@ import { Plugin } from "prosemirror-state";
 export default new Plugin({
   props: {
     attributes: {
-      class: "govspeak",
+      class: "govspeak visual-editor__contenteditable",
       role: "textbox",
       "aria-multiline": "true",
     },

lib/plugins/link-tooltip.js

@@ -3,11 +3,12 @@ import { Decoration, DecorationSet } from "prosemirror-view";
 
 function renderTooltip(href) {
   const tooltipWrapper = document.createElement("div");
-  tooltipWrapper.className = "tooltip-wrapper";
+  tooltipWrapper.className = "visual-editor__tooltip-wrapper";
   const tooltip = document.createElement("div");
-  tooltip.className = "tooltip govuk-body";
+  tooltip.className = "visual-editor__tooltip govuk-body";
   tooltip.textContent = href.startsWith("mailto:") ? "Email: " : "Link: ";
   const a = document.createElement("a");
+  a.className = "visual-editor__tooltip-link";
   a.href = href;
   a.target = "_blank";
   a.textContent = href.startsWith("mailto:") ? href.slice(7) : href;

lib/plugins/menu/buttons.js

@@ -11,7 +11,8 @@ import { trackButton } from "../../tracking/google-analytics";
 
 function button(title, iconUrl) {
   const button = document.createElement("button");
-  button.className = "govuk-button govuk-button--secondary";
+  button.className =
+    "govuk-button govuk-button--secondary visual-editor__menu-button";
   button.type = "button";
   button.title = title;
   trackButton(button);

lib/plugins/menu/dropdowns.js

@@ -3,7 +3,7 @@ import { dispatchSelectTrackingEvent } from "../../tracking/google-analytics";
 
 function selectDom(options, editorView, className, resetOnChange) {
   const select = document.createElement("select");
-  select.className = `govuk-select ${className}`;
+  select.className = `govuk-select visual-editor__menu-select ${className}`;
   options.forEach((o, index) => {
     o.dom = document.createElement("option");
     o.dom.text = o.text;
@@ -115,22 +115,22 @@ export const headingDropdown = (schema, editorView) => {
   return headingSelect(
     headingSelectOptions(schema),
     editorView,
-    "heading-select",
+    "visual-editor__menu-heading-select",
   );
 };
 
 export const textBlockDropdown = (schema, editorView) => {
   return menuSelect(
     textBlockMenuSelectOptions(schema),
     editorView,
-    "text-block-select",
+    "visual-editor__menu-text-block-select",
   );
 };
 
 export const insertDropdown = (schema, editorView) => {
   return menuSelect(
     insertMenuSelectOptions(schema),
     editorView,
-    "insert-select",
+    "visual-editor__menu-insert-select",
   );
 };

lib/plugins/menu/menu-plugin-view.js

@@ -2,7 +2,7 @@ export default class MenuPluginView {
   constructor(items, editorView) {
     this.items = items;
     this.dom = document.createElement("div");
-    this.dom.className = "menubar govuk-button-group";
+    this.dom.className = "govuk-button-group visual-editor__menu";
     this.dom.role = "toolbar";
 
     items.forEach(({ command, dom, customHandler }, index) => {

scss/menu.scss

@@ -0,0 +1,51 @@
+.visual-editor__menu {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: #f3f2f1;
+  margin-bottom: 0;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+  align-items: center;
+  box-shadow: 0 2px 0 0 black;
+}
+
+.visual-editor__menu:has(+ .visual-editor__contenteditable:focus) {
+  box-shadow:
+    inset 0 -3px 0 0 #fd0,
+    0 4px 0 0 black,
+    0 -6px 0 3px white;
+}
+
+.visual-editor__menu .visual-editor__menu-button {
+  height: 38px;
+  width: 40px;
+  margin: 0 5px 2px 0;
+  padding: 2px 0 0 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.visual-editor__menu-button:not(:hover) {
+  box-shadow: none;
+}
+
+.visual-editor__menu-select {
+  min-width: 0;
+  margin: 0 10px 0 5px;
+}
+
+.visual-editor__menu-heading-select {
+  width: 120px;
+}
+
+.visual-editor__menu-text-block-select {
+  width: 154px;
+  margin-right: 5px;
+}
+
+.visual-editor__menu-insert-select {
+  width: 82px;
+}

scss/prosemirror-overrides.scss

@@ -0,0 +1,12 @@
+.ProseMirror {
+  padding: 15px;
+  border: 2px solid black;
+  min-height: 500px;
+}
+
+.ProseMirror:focus,
+.ProseMirror-prompt input[type="text"]:focus {
+  outline: 3px solid #fd0;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 2px;
+}