wip: Placement and styling of tags

theopensystemslab · Oct 2, 2024 · da423da · da423da
1 parent 12f22c3
commit da423da
Show file tree

Hide file tree

Showing 5 changed files with 136 additions and 45 deletions.
diff --git a/editor.planx.uk/src/@planx/components/ui.tsx b/editor.planx.uk/src/@planx/components/ui.tsx
@@ -1,5 +1,6 @@
 import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 import Article from "@mui/icons-material/Article";
+import BookmarksIcon from "@mui/icons-material/Bookmarks";
 import BorderColorIcon from "@mui/icons-material/BorderColor";
 import CallSplit from "@mui/icons-material/CallSplit";
 import CheckBoxOutlined from "@mui/icons-material/CheckBoxOutlined";
@@ -28,10 +29,15 @@ import Send from "@mui/icons-material/Send";
 import ShapeLine from "@mui/icons-material/ShapeLine";
 import SquareFoot from "@mui/icons-material/SquareFoot";
 import TextFields from "@mui/icons-material/TextFields";
+import { inputLabelClasses } from "@mui/material/InputLabel";
+import { outlinedInputClasses } from "@mui/material/OutlinedInput";
+import { styled } from "@mui/material/styles";
+import TextField from "@mui/material/TextField";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { Store } from "pages/FlowEditor/lib/store";
 import type { HandleSubmit } from "pages/Preview/Node";
 import React, { ChangeEvent } from "react";
+import { borderedFocusStyle } from "theme";
 import ImgInput from "ui/editor/ImgInput";
 import InputGroup from "ui/editor/InputGroup";
 import InputLabel from "ui/editor/InputLabel";
@@ -41,6 +47,37 @@ import RichTextInput from "ui/editor/RichTextInput";
 import Input from "ui/shared/Input";
 import InputRow from "ui/shared/InputRow";
 
+const StyledTextField = styled(TextField)(({ theme }) => ({
+  backgroundColor: theme.palette.background.default,
+  marginTop: theme.spacing(1),
+  "&:focus-within": {
+    ...borderedFocusStyle,
+    [`& .${outlinedInputClasses.notchedOutline}`]: {
+      border: "1px solid transparent !important",
+    },
+  },
+  [`& .${outlinedInputClasses.notchedOutline}`]: {
+    borderRadius: 0,
+    border: `1px solid${theme.palette.border.light} !important`,
+  },
+  "& fieldset": {
+    borderColor: theme.palette.border.light,
+  },
+  [`& .${outlinedInputClasses.root}, input`]: {
+    cursor: "pointer",
+  },
+  [`& .${inputLabelClasses.root}`]: {
+    textDecoration: "underline",
+    color: theme.palette.primary.main,
+    "&[data-shrink=true]": {
+      textDecoration: "none",
+      color: theme.palette.text.primary,
+      paddingY: 0,
+      transform: "translate(0px, -22px) scale(0.85)",
+    },
+  },
+}));
+
 export interface EditorProps<Type, Data> {
   id?: string;
   handleSubmit?: (data: { type: Type; data: Data }) => void;
@@ -168,21 +205,30 @@ export const InternalNotes: React.FC<InternalNotesProps> = ({
   onChange,
 }) => {
   return (
-    <ModalSection>
-      <ModalSectionContent title="Internal Notes" Icon={BorderColorIcon}>
-        <InputRow>
-          <Input
-            // required
-            name={name}
-            value={value}
-            onChange={onChange}
-            multiline
-            placeholder="Internal Notes"
-            rows={3}
-          />
-        </InputRow>
-      </ModalSectionContent>
-    </ModalSection>
+    <>
+      <ModalSection>
+        <ModalSectionContent title="Internal Notes" Icon={BorderColorIcon}>
+          <InputRow>
+            <Input
+              // required
+              name={name}
+              value={value}
+              onChange={onChange}
+              multiline
+              placeholder="Internal Notes"
+              rows={3}
+            />
+          </InputRow>
+        </ModalSectionContent>
+      </ModalSection>
+      <ModalSection>
+        <ModalSectionContent title="Tags" Icon={BookmarksIcon}>
+          <InputRow>
+            <StyledTextField label="Tag this component" />
+          </InputRow>
+        </ModalSectionContent>
+      </ModalSection>
+    </>
   );
 };
 

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Checklist.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Checklist.tsx
@@ -1,3 +1,4 @@
+import Box from "@mui/material/Box";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { ICONS } from "@planx/components/ui";
 import classNames from "classnames";
@@ -80,15 +81,17 @@ const Checklist: React.FC<Props> = React.memo((props) => {
           wasVisited: props.wasVisited,
         })}
       >
-        <Link
-          href={href}
-          prefetch={false}
-          onContextMenu={handleContext}
-          ref={drag}
-        >
-          {Icon && <Icon />}
-          <span>{props.text}</span>
-        </Link>
+        <Box className="tag-wrap">
+          <Link
+            href={href}
+            prefetch={false}
+            onContextMenu={handleContext}
+            ref={drag}
+          >
+            {Icon && <Icon />}
+            <span>{props.text}</span>
+          </Link>
+        </Box>
         {groupedOptions ? (
           <ol className="categories">
             {groupedOptions.map(({ title, children }, i) => (

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Filter.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Filter.tsx
@@ -1,3 +1,4 @@
+import Box from "@mui/material/Box";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { ICONS } from "@planx/components/ui";
 import classNames from "classnames";
@@ -59,15 +60,17 @@ const Filter: React.FC<Props> = React.memo((props) => {
           isNote: childNodes.length === 0,
         })}
       >
-        <Link
-          href={href}
-          prefetch={false}
-          onContextMenu={handleContext}
-          ref={drag}
-        >
-          {Icon && <Icon />}
-          <span>{props.text}</span>
-        </Link>
+        <Box className="tag-wrap">
+          <Link
+            href={href}
+            prefetch={false}
+            onContextMenu={handleContext}
+            ref={drag}
+          >
+            {Icon && <Icon />}
+            <span>{props.text}</span>
+          </Link>
+        </Box>
         <ol className="options">
           {childNodes.map((child: any) => (
             <Node key={child.id} {...child} />

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Question.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Question.tsx
@@ -1,4 +1,5 @@
 import ErrorIcon from "@mui/icons-material/Error";
+import Box from "@mui/material/Box";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { ICONS } from "@planx/components/ui";
 import classNames from "classnames";
@@ -70,15 +71,17 @@ const Question: React.FC<Props> = React.memo((props) => {
           },
         )}
       >
-        <Link
-          href={href}
-          prefetch={false}
-          onContextMenu={handleContext}
-          ref={drag}
-        >
-          {Icon && <Icon titleAccess={iconTitleAccess} />}
-          <span>{props.text}</span>
-        </Link>
+        <Box className="tag-wrap">
+          <Link
+            href={href}
+            prefetch={false}
+            onContextMenu={handleContext}
+            ref={drag}
+          >
+            {Icon && <Icon titleAccess={iconTitleAccess} />}
+            <span>{props.text}</span>
+          </Link>
+        </Box>
         <ol className="options">
           {childNodes.map((child: any) => (
             <Node key={child.id} {...child} />

diff --git a/editor.planx.uk/src/pages/FlowEditor/floweditor.scss b/editor.planx.uk/src/pages/FlowEditor/floweditor.scss
@@ -50,8 +50,8 @@ $fontMonospace: "Source Code Pro", monospace;
     margin: 0 auto;
     width: max-content;
 
-    > a:focus,
-    > a:active {
+    a:focus,
+    a:active {
       outline: 4px solid $focus;
       outline-offset: 0;
     }
@@ -137,7 +137,7 @@ $fontMonospace: "Source Code Pro", monospace;
     border: $nodeBorderWidth dashed red;
   }
 
-  & > a {
+  & a {
     position: relative;
     display: flex;
     align-items: flex-start;
@@ -187,6 +187,42 @@ $fontMonospace: "Source Code Pro", monospace;
     }
   }
 
+  // Temp styles to demo tags
+  .tag-wrap {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &.type-AddressInput .tag-wrap,
+  &.type-Result .tag-wrap,
+  &.question .tag-wrap {
+    &::after {
+      content: "";
+      font-weight: 600;
+      background: white;
+      padding: 0.25em;
+      border: 1px solid $nodeBorder;
+      border-top: none;
+      width: 100%;
+      text-align: center;
+    }
+  }
+
+  &.type-AddressInput .tag-wrap::after {
+    content: "Placeholder";
+    background: #fae1b7;
+  }
+
+  &.question .tag-wrap::after {
+    content: "Another tag";
+    background: #e9edc9;
+  }
+
+  &.type-Result .tag-wrap::after {
+    content: "Warning tag";
+    background: #f4978e;
+  }
+
   &.type-Section::after {
     content: "";
     position: absolute;