Extract UnavailableWorkPackage to its own file

Author: judithroth

lib/components/OpenProjectWorkPackageBlock.tsx

@@ -7,14 +7,14 @@ import { useWorkPackage } from "../hooks/useWorkPackage";
 import { useWorkPackageSearch } from "../hooks/useWorkPackageSearch";
 import type { WorkPackage } from "../openProjectTypes";
 import { linkToWorkPackage } from "../services/openProjectApi";
-import { defaultVariables, useColors} from "../services/colors";
+import { useColors} from "../services/colors";
 import { getAliases } from "../services/slashMenuAliases";
 import { useTranslation } from "react-i18next"; // localize react components
 import i18n from "../services/i18n.ts"; // localize other code
 
 import { LinkIcon, SearchIcon } from "@primer/octicons-react";
-import { SPACER_S, SPACER_M, SPACER_L, SPACER_XL } from "../services/css_constants";
 import { WorkPackageElement } from "../elements/workPackageElement";
+import { UnavailableWorkPackageElement } from "../elements/unavailableWorkPackageElement";
 import styled from "styled-components";
 
 const Block = styled.div.attrs({
@@ -89,53 +89,18 @@ const DropdownOption = styled.div.attrs({
   background-color: ${({ selected }) => selected ? 'var(--highlight-wp-background)' : 'var(--bn-colors-menu-background)'};
   border: none;
   border-radius: var(--bn-border-radius-small);
-  margin: ${SPACER_S} 0;
-  padding: 0 ${SPACER_M};
+  margin: var(--spacer-s) 0;
+  padding: 0 var(--spacer-m);
   cursor: pointer;
 `;
 
-const UnavailableWorkPackage = styled.div.attrs({
-  className: 'op-bn-work-package-placeholder'
-})`
-  ${defaultVariables}
-  padding: ${SPACER_M} ${SPACER_L};
-  background-color: var(--highlight-wp-background);
-  border-radius: var(--bn-border-radius-small);
-`;
-
-const UnavailableMessage = styled.div.attrs({
-  className: 'op-bn-unavailable-message'
-})`
-  color: var(--bn-colors-editor-text) !important;
-`
-
-const UnavailableMessageHeader = styled.div.attrs({
-  className: 'op-bn-unavailable-message--header'
-})`
-  font-weight: 600;
-  color: var(--bn-colors-editor-text) !important;
-`
-
 interface BlockProps {
   id: string,
   props: {
     wpid: string;
   };
 }
 
-const UnavailableWorkPackageElement = ({ header, message }: {header: string, message: string}) => {
-  return (
-    <UnavailableWorkPackage>
-      <UnavailableMessage>
-        <UnavailableMessageHeader>
-          { header }
-        </UnavailableMessageHeader>
-        { message }
-      </UnavailableMessage>
-    </UnavailableWorkPackage>
-  )
-}
-
 const OpenProjectWorkPackageBlockComponent = ({
   block,
   editor,

lib/elements/unavailableWorkPackageElement.tsx

@@ -0,0 +1,37 @@
+import { defaultVariables } from "../services/colors.ts";
+import styled from "styled-components";
+
+export const UnavailableWorkPackageElement = ({ header, message }: {header: string, message: string}) => {
+  return (
+    <UnavailableWorkPackage>
+      <UnavailableMessage>
+        <UnavailableMessageHeader>
+          { header }
+        </UnavailableMessageHeader>
+        { message }
+      </UnavailableMessage>
+    </UnavailableWorkPackage>
+  )
+}
+
+const UnavailableWorkPackage = styled.div.attrs({
+  className: 'op-bn-work-package-placeholder'
+})`
+  ${defaultVariables}
+  padding: var(--spacer-m) var(--spacer-l);
+  background-color: var(--highlight-wp-background);
+  border-radius: var(--bn-border-radius-small);
+`;
+
+const UnavailableMessage = styled.div.attrs({
+  className: 'op-bn-unavailable-message'
+})`
+  color: var(--bn-colors-editor-text) !important;
+`
+
+const UnavailableMessageHeader = styled.div.attrs({
+  className: 'op-bn-unavailable-message--header'
+})`
+  font-weight: 600;
+  color: var(--bn-colors-editor-text) !important;
+`