[C] refactor out WidgetContainerBlock

lsst-epo · Oct 18, 2023 · 6abb206 · 6abb206
1 parent 920fea1
commit 6abb206
Show file tree

Hide file tree

Showing 22 changed files with 292 additions and 343 deletions.
diff --git a/components/content-blocks/CameraFilterTool/CameraFilterTool.tsx b/components/content-blocks/CameraFilterTool/CameraFilterTool.tsx
@@ -0,0 +1,28 @@
+import { FunctionComponent } from "react";
+import { BaseContentBlockProps } from "@/components/shapes";
+import { useTranslation } from "@/lib/i18n/client";
+import WidgetContainer from "@/components/layout/WidgetContainer";
+import CameraFilterTool from "@rubin-epo/epo-widget-lib/CameraFilter";
+import withModal from "@/components/hoc/withModal/withModal";
+
+const CameraFilterToolBlock: FunctionComponent<BaseContentBlockProps> = ({
+  openModal,
+  isOpen,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <WidgetContainer
+      title={t("widgets.camera_filter_tool")}
+      paddingSize="none"
+      bgColor="white"
+      {...{ openModal, isOpen }}
+    >
+      <CameraFilterTool />
+    </WidgetContainer>
+  );
+};
+
+CameraFilterToolBlock.displayName = "ContentBlock.CameraFilterTool";
+
+export default withModal(CameraFilterToolBlock);
diff --git a/components/content-blocks/CameraFilterTool/index.ts b/components/content-blocks/CameraFilterTool/index.ts
@@ -0,0 +1 @@
+export { default } from "./CameraFilterTool";
diff --git a/components/content-blocks/FilterTool/FilterTool.tsx b/components/content-blocks/FilterTool/FilterTool.tsx
@@ -1,7 +1,10 @@
-import { useState } from "react";
-import { Container } from "@rubin-epo/epo-react-lib";
+import { FunctionComponent, useState } from "react";
 import { graphql, useFragment, FragmentType } from "@/gql/public-schema";
+import { BaseContentBlockProps } from "@/components/shapes";
+import { useTranslation } from "@/lib/i18n/client";
+import WidgetContainer from "@/components/layout/WidgetContainer";
 import FilterTool from "@rubin-epo/epo-widget-lib/FilterTool";
+import withModal from "@/components/hoc/withModal/withModal";
 
 const Fragment = graphql(`
   fragment FilterToolBlock on contentBlocks_filterTool_BlockType {
@@ -12,22 +15,38 @@ const Fragment = graphql(`
   }
 `);
 
-export default function FilterToolBlock(props: {
+interface FilterToolBlockProps extends BaseContentBlockProps {
   data: FragmentType<typeof Fragment>;
-}) {
+}
+
+const FilterToolBlock: FunctionComponent<FilterToolBlockProps> = ({
+  data,
+  openModal,
+  isOpen,
+}) => {
+  const { t } = useTranslation();
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { preSelectedColor, readOnly } = useFragment(Fragment, props.data);
+  const { preSelectedColor = "none", readOnly = false } = useFragment(
+    Fragment,
+    data
+  );
   const [selectedColor, setSelectedColor] = useState(preSelectedColor);
 
   return (
-    <Container>
+    <WidgetContainer
+      title={t("widgets.filter_tool")}
+      paddingSize="none"
+      {...{ openModal, isOpen }}
+    >
       <FilterTool
         isDisabled={readOnly}
         selectedColor={selectedColor}
         selectionCallback={(selection) => setSelectedColor(selection)}
       />
-    </Container>
+    </WidgetContainer>
   );
-}
+};
 
 FilterToolBlock.displayName = "ContentBlock.FilterTool";
+
+export default withModal(FilterToolBlock);
diff --git a/components/content-blocks/FilterTool/mocks.ts b/components/content-blocks/FilterTool/mocks.ts
diff --git a/components/content-blocks/Image/Image.tsx b/components/content-blocks/Image/Image.tsx
@@ -1,5 +1,6 @@
 import { FunctionComponent } from "react";
 import { graphql, useFragment, FragmentType } from "@/gql/public-schema";
+import withModal from "@/components/hoc/withModal/withModal";
 import { BaseContentBlockProps } from "@/components/shapes";
 import { imageShaper } from "@/helpers";
 import * as Styled from "./styles";
@@ -26,10 +27,6 @@ const Fragment = graphql(`
 interface ImageContentBlockProps extends BaseContentBlockProps {
   data: FragmentType<typeof Fragment>;
   site: string;
-  hasModal: boolean;
-  isOpen: boolean;
-  openModal: () => void;
-  closeModal: () => void;
 }
 
 /**
@@ -68,4 +65,4 @@ const ImageContentBlock: FunctionComponent<ImageContentBlockProps> = (
 
 ImageContentBlock.displayName = "ContentBlock.Image";
 
-export default ImageContentBlock;
+export default withModal(ImageContentBlock);
diff --git a/components/content-blocks/InteractionGroupContainer/InteractionGroupContainer.tsx b/components/content-blocks/InteractionGroupContainer/InteractionGroupContainer.tsx
@@ -1,7 +1,6 @@
 import { useTranslation } from "@/lib/i18n/client";
 import { graphql, useFragment, FragmentType } from "@/gql/public-schema";
 import { blockMap } from "@/components/factories/ContentBlockFactory/ContentBlockFactory";
-import withModal from "@/hoc/withModal";
 import * as Styled from "./styles";
 
 const Fragment = graphql(`
@@ -12,7 +11,6 @@ const Fragment = graphql(`
       ...TextBlock
       ...ImageBlock
       ...QuestionsBlock
-      ...WidgetContainerBlock
       ...BarGraphToolBlock
       ...ColorToolBlock
       ...FilterToolBlock
@@ -37,12 +35,8 @@ export default function InteractionGroupContainerBlock(props: {
 
       if (!Block) return null;
 
-      const isWithModal = block.__typename === "contentBlocks_image_BlockType";
-
-      const EnhancedBlock = isWithModal ? withModal(Block) : Block;
-
       return (
-        <EnhancedBlock
+        <Block
           key={block.id}
           data={block}
           site={props.site}
@@ -54,8 +48,11 @@ export default function InteractionGroupContainerBlock(props: {
   }
 
   return (
-    <Styled.InteractionGroup width="wide" className="content-block">
-      <Styled.Heading>{t('page.interaction')}</Styled.Heading>
+    <Styled.InteractionGroup
+      className="content-block"
+      style={{ "--text-color": "#34706D" }}
+    >
+      <Styled.Heading>{t("page.interaction")}</Styled.Heading>
       {renderBlocks(childBlocks)}
     </Styled.InteractionGroup>
   );

diff --git a/components/content-blocks/InteractionGroupContainer/styles.ts b/components/content-blocks/InteractionGroupContainer/styles.ts
@@ -1,15 +1,14 @@
 import styled from "styled-components";
-import { green20 } from "@/styles/globalStyles";
 import { fluidScale } from "@rubin-epo/epo-react-lib/styles";
 
 export const Heading = styled.h2`
-  padding-block-end: ${fluidScale("57px", "47px")};
+  margin-block-end: ${fluidScale("2em", "1.5em")};
 `;
 export const InteractionGroup = styled.div`
-  padding: ${fluidScale("40px", "30px")};
-  background-color: ${green20};
+  padding: ${fluidScale("2em", "1.5em")};
+  background-color: #e6ffe6;
 
   > section + section {
-    margin-top: 30px;
+    margin-top: 1.5em;
   }
 `;
diff --git a/components/content-blocks/Text/Text.tsx b/components/content-blocks/Text/Text.tsx
@@ -25,7 +25,7 @@ const TextContentBlock: FunctionComponent<TextProps> = (props) => {
     <Styled.Container className="content-block">
       <Styled.TextContent
         dangerouslySetInnerHTML={{ __html: text }}
-        $darkMode={isOpen}
+        style={{ "--text-color": isOpen ? "var(--white,#fff)" : undefined }}
       />
     </Styled.Container>
   );

diff --git a/components/content-blocks/Text/styles.ts b/components/content-blocks/Text/styles.ts
@@ -1,20 +1,15 @@
 import { ptToEm, fluidScale } from "@rubin-epo/epo-react-lib/styles";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 
 export const Container = styled.section`
   display: block;
 `;
 
-export const TextContent = styled.div<{ $darkMode?: boolean }>`
-  ${({ $darkMode = false }) =>
-    $darkMode
-      ? css`
-          color: var(--white, #fff);
-        `
-      : ""}
+export const TextContent = styled.div`
+  color: var(--text-color);
 
   > * + * {
-    margin-block-start: 1rem;
+    margin-block-start: 1em;
   }
 
   > *:first-child {

diff --git a/components/content-blocks/TwoColumnContainer/TwoColumnContainer.tsx b/components/content-blocks/TwoColumnContainer/TwoColumnContainer.tsx
@@ -1,6 +1,5 @@
 import { graphql, useFragment, FragmentType } from "@/gql/public-schema";
 import { blockMap } from "@/components/factories/ContentBlockFactory/ContentBlockFactory";
-import withModal from "@/hoc/withModal";
 import * as Styled from "./styles";
 
 const Fragment = graphql(`
@@ -63,12 +62,8 @@ export default function TwoColumnContainerBlock(props: {
 
       if (!Block) return null;
 
-      const isWithModal = block.__typename === "contentBlocks_image_BlockType";
-
-      const EnhancedBlock = isWithModal ? withModal(Block) : Block;
-
       return (
-        <EnhancedBlock
+        <Block
           key={block.id}
           data={block}
           site={props.site}
@@ -79,7 +74,7 @@ export default function TwoColumnContainerBlock(props: {
   }
 
   return (
-    <Styled.TwoColContainer width="wide" className="content-block">
+    <Styled.TwoColContainer className="content-block">
       {leftCol && (
         <Styled.LeftCol>{renderBlocks(leftCol?.childblocks)}</Styled.LeftCol>
       )}

diff --git a/components/content-blocks/WidgetContainer/WidgetContainer.tsx b/components/content-blocks/WidgetContainer/WidgetContainer.tsx
diff --git a/components/content-blocks/WidgetContainer/index.ts b/components/content-blocks/WidgetContainer/index.ts
diff --git a/components/content-blocks/index.ts b/components/content-blocks/index.ts
@@ -1,12 +1,10 @@
-// import Modal from "./Modal";
-
 export { default as TwoColumnContainer } from "./TwoColumnContainer";
 export { default as InteractionGroupContainer } from "./InteractionGroupContainer";
 export { default as Text } from "./Text";
 export { default as Image } from "./Image";
 export { default as Questions } from "./Questions";
-export { default as WidgetContainer } from "./WidgetContainer";
 export { default as BarGraphTool } from "./BarGraphTool";
 export { default as ColorTool } from "./ColorTool";
 export { default as FilterTool } from "./FilterTool";
 export { default as ScatterplotTool } from "./ScatterplotTool";
+export { default as CameraFilterTool } from "./CameraFilterTool";
diff --git a/components/factories/ContentBlockFactory/ContentBlockFactory.tsx b/components/factories/ContentBlockFactory/ContentBlockFactory.tsx
@@ -1,7 +1,6 @@
 import { FunctionComponent } from "react";
 import { graphql, useFragment, FragmentType } from "@/gql/public-schema";
 import * as Blocks from "@/components/content-blocks";
-import withModal from "@/hoc/withModal";
 
 /** content blocks that can be rendered anywhere */
 export const blockMap: Record<string, any> = {
@@ -10,12 +9,11 @@ export const blockMap: Record<string, any> = {
   contentBlocks_text_BlockType: Blocks.Text,
   contentBlocks_image_BlockType: Blocks.Image,
   contentBlocks_questionBlock_BlockType: Blocks.Questions,
-  contentBlocks_widgetContainer_BlockType: Blocks.WidgetContainer,
   contentBlocks_scatterplotTool_BlockType: Blocks.ScatterplotTool,
   contentBlocks_barGraphTool_BlockType: Blocks.BarGraphTool,
   contentBlocks_colorTool_BlockType: Blocks.ColorTool,
   contentBlocks_filterTool_BlockType: Blocks.FilterTool,
-  // contentBlocks_modal_BlockType: Modal,
+  contentBlocks_cameraFilterTool_BlockType: Blocks.CameraFilterTool,
 };
 
 const Fragment = graphql(`
@@ -26,7 +24,6 @@ const Fragment = graphql(`
     ...TextBlock
     ...ImageBlock
     ...QuestionsBlock
-    ...WidgetContainerBlock
     ...BarGraphToolBlock
     ...ColorToolBlock
     ...FilterToolBlock
@@ -38,7 +35,6 @@ interface ContentBlockFactoryProps {
   data: FragmentType<typeof Fragment>;
   site: string;
   pageId?: string;
-  isInModal?: boolean;
 }
 
 export type ContentBlockType = keyof typeof blockMap;
@@ -52,18 +48,7 @@ const ContentBlockFactory: FunctionComponent<ContentBlockFactoryProps> = (
 
   if (!Block) return null;
 
-  const isWithModal =
-    props.isInModal || data.__typename === "contentBlocks_image_BlockType";
-
-  const EnhancedBlock = isWithModal ? withModal(Block) : Block;
-
-  return (
-    <EnhancedBlock
-      data={data}
-      site={props.site}
-      pageId={props.pageId}
-    />
-  );
+  return <Block data={data} site={props.site} pageId={props.pageId} />;
 };
 
 ContentBlockFactory.displayName = "ContentBlocks.Factory";

diff --git a/components/layout/WidgetContainer/WidgetContainer.tsx b/components/layout/WidgetContainer/WidgetContainer.tsx
@@ -39,9 +39,7 @@ const WidgetContainer: FunctionComponent<
     <Styled.WidgetContainer
       className={className}
       style={{
-        "--widget-background-color": isOpen
-          ? "transparent"
-          : backgrounds[bgColor],
+        "--widget-background-color": backgrounds[bgColor],
         "--widget-container-padding": isOpen
           ? 0
           : `calc(${padding[paddingSize]} / 2)`,