feat: enable transparent or custom background for content (#2429)

* feat: enable transparent or custom background for content * refactor: simplify logic to look for default or white * Update editor.planx.uk/src/@planx/components/Content/Public.tsx Co-authored-by: Dafydd Llŷr Pearson <[email protected]> --------- Co-authored-by: Dafydd Llŷr Pearson <[email protected]>
theopensystemslab · Nov 16, 2023 · 8ce1579 · 8ce1579
1 parent 6958d88
commit 8ce1579
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/editor.planx.uk/src/@planx/components/Content/Public.tsx b/editor.planx.uk/src/@planx/components/Content/Public.tsx
@@ -13,7 +13,6 @@ export type Props = PublicProps<Content>;
 const Content = styled(Box, {
   shouldForwardProp: (prop) => prop !== "color",
 })<{ color?: string }>(({ theme, color }) => ({
-  padding: theme.spacing(2),
   backgroundColor: color,
   color:
     mostReadable(color || "#fff", [
@@ -25,10 +24,18 @@ const Content = styled(Box, {
   },
 }));
 
+Content.defaultProps = {
+  color: "#ffffff",
+};
+
 const ContentComponent: React.FC<Props> = (props) => {
   return (
     <Card handleSubmit={props.handleSubmit} isValid>
-      <Content color={props.color} data-testid="content">
+      <Content
+        color={props.color}
+        data-testid="content"
+        p={(props.color === "#ffffff" || !props.color) ? 0 : 2}
+      >
         <ReactMarkdownOrHtml
           source={props.content}
           openLinksOnNewTab

diff --git a/editor.planx.uk/src/ui/ColorPicker.tsx b/editor.planx.uk/src/ui/ColorPicker.tsx
@@ -95,7 +95,7 @@ export default function ColorPicker(props: Props): FCReturn {
   return (
     <Root inline={props.inline}>
       <Typography mr={2} variant="body2">
-        {props.label || "Colour"}:{" "}
+        {props.label || "Background colour"}:{" "}
       </Typography>
       <StyledButtonBase show={show} onClick={handleClick} disableRipple>
         <Swatch sx={{ backgroundColor: props.color }} className="swatch" />
@@ -108,7 +108,11 @@ export default function ColorPicker(props: Props): FCReturn {
             aria-label="Close Colour Picker"
             disableRipple
           />
-          <ChromePicker color={props.color} onChange={handleChange} />
+          <ChromePicker
+            color={props.color}
+            disableAlpha={true}
+            onChange={handleChange}
+          />
         </Popover>
       ) : null}
     </Root>