From b112dcc8adf404134abdba9ebd5c4098ca87e909 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Tue, 8 Oct 2024 11:51:43 +0100 Subject: [PATCH] feat: Setup additional node tags --- editor.planx.uk/package.json | 2 +- editor.planx.uk/pnpm-lock.yaml | 11 +++---- .../components/Flow/components/Tag.tsx | 18 +++++++++++ .../src/ui/editor/ComponentTagSelect.tsx | 30 ++++++++++++++++--- 4 files changed, 51 insertions(+), 10 deletions(-) diff --git a/editor.planx.uk/package.json b/editor.planx.uk/package.json index 8e5efc1c1c..1cc088f1af 100644 --- a/editor.planx.uk/package.json +++ b/editor.planx.uk/package.json @@ -15,7 +15,7 @@ "@mui/material": "^5.15.10", "@mui/utils": "^5.15.11", "@opensystemslab/map": "1.0.0-alpha.3", - "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#5781880", + "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#c19c3be", "@tiptap/core": "^2.4.0", "@tiptap/extension-bold": "^2.0.3", "@tiptap/extension-bubble-menu": "^2.1.13", diff --git a/editor.planx.uk/pnpm-lock.yaml b/editor.planx.uk/pnpm-lock.yaml index acbdfdfc0c..b08089cf79 100644 --- a/editor.planx.uk/pnpm-lock.yaml +++ b/editor.planx.uk/pnpm-lock.yaml @@ -47,8 +47,8 @@ dependencies: specifier: 1.0.0-alpha.3 version: 1.0.0-alpha.3 '@opensystemslab/planx-core': - specifier: git+https://github.com/theopensystemslab/planx-core#5781880 - version: github.com/theopensystemslab/planx-core/5781880(@types/react@18.2.45) + specifier: git+https://github.com/theopensystemslab/planx-core#c19c3be + version: github.com/theopensystemslab/planx-core/c19c3be(@types/react@18.2.45) '@tiptap/core': specifier: ^2.4.0 version: 2.4.0(@tiptap/pm@2.0.3) @@ -8423,6 +8423,7 @@ packages: /eslint@8.57.1: resolution: {integrity: sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options. hasBin: true dependencies: '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.1) @@ -15352,9 +15353,9 @@ packages: use-sync-external-store: 1.2.0(react@18.2.0) dev: false - github.com/theopensystemslab/planx-core/5781880(@types/react@18.2.45): - resolution: {tarball: https://codeload.github.com/theopensystemslab/planx-core/tar.gz/5781880} - id: github.com/theopensystemslab/planx-core/5781880 + github.com/theopensystemslab/planx-core/c19c3be(@types/react@18.2.45): + resolution: {tarball: https://codeload.github.com/theopensystemslab/planx-core/tar.gz/c19c3be} + id: github.com/theopensystemslab/planx-core/c19c3be name: '@opensystemslab/planx-core' version: 1.0.0 prepare: true diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx index 7dbca109bb..dcdaa9d5fe 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx @@ -2,6 +2,7 @@ import Box from "@mui/material/Box"; import { visuallyHidden } from "@mui/utils"; import { NodeTag } from "@opensystemslab/planx-core/types"; import React from "react"; +import { getContrastTextColor } from "styleUtils"; import { FONT_WEIGHT_SEMI_BOLD } from "theme"; export const TAG_DISPLAY_VALUES: Record< @@ -12,6 +13,22 @@ export const TAG_DISPLAY_VALUES: Record< color: "#FAE1B7", displayName: "Placeholder", }, + "to review": { + color: "#E9EDC9", + displayName: "To review", + }, + "sensitive data": { + color: "#F4978E", + displayName: "Sensitive data", + }, + analytics: { + color: "#D7C6E6", + displayName: "Analytics", + }, + automation: { + color: "#B7D1DE", + displayName: "Automation", + }, } as const; export const Tag: React.FC<{ tag: NodeTag }> = ({ tag }) => ( @@ -28,6 +45,7 @@ export const Tag: React.FC<{ tag: NodeTag }> = ({ tag }) => ( p: 0.5, textAlign: "center", fontWeight: FONT_WEIGHT_SEMI_BOLD, + color: getContrastTextColor(TAG_DISPLAY_VALUES[tag].color, "#FFF"), })} > {TAG_DISPLAY_VALUES[tag].displayName} diff --git a/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx b/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx index d47440a766..279e4e36ab 100644 --- a/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx +++ b/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx @@ -1,9 +1,11 @@ import BookmarksIcon from "@mui/icons-material/Bookmarks"; import { AutocompleteProps } from "@mui/material/Autocomplete"; +import Chip from "@mui/material/Chip"; import ListItem from "@mui/material/ListItem"; import { NODE_TAGS, NodeTag } from "@opensystemslab/planx-core/types"; import { TAG_DISPLAY_VALUES } from "pages/FlowEditor/components/Flow/components/Tag"; import React from "react"; +import { getContrastTextColor } from "styleUtils"; import ModalSection from "ui/editor/ModalSection"; import ModalSectionContent from "ui/editor/ModalSectionContent"; import InputRow from "ui/shared/InputRow"; @@ -12,7 +14,7 @@ import { CustomCheckbox, SelectMultiple } from "ui/shared/SelectMultiple"; interface Props { value?: NodeTag[]; onChange: (values: NodeTag[]) => void; -}; +} const renderOption: AutocompleteProps< NodeTag, @@ -23,10 +25,29 @@ const renderOption: AutocompleteProps< >["renderOption"] = (props, tag, { selected }) => ( ); +const renderTags: AutocompleteProps< + NodeTag, + true, + true, + false, + "div" +>["renderTags"] = (value, getTagProps) => + value.map((tag, index) => ( + + )); + export const ComponentTagSelect: React.FC = ({ value, onChange }) => { return ( @@ -39,9 +60,10 @@ export const ComponentTagSelect: React.FC = ({ value, onChange }) => { onChange={(_e, value) => onChange(value)} value={value} renderOption={renderOption} + renderTags={renderTags} /> - ) -} \ No newline at end of file + ); +};