Move flexjar to Side and adjust styling

navikt · Dec 21, 2023 · f1c78bd · f1c78bd
1 parent 75973e8
commit f1c78bd
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 20 deletions.
diff --git a/src/components/aktivitetskrav/AktivitetskravContainer.tsx b/src/components/aktivitetskrav/AktivitetskravContainer.tsx
@@ -10,7 +10,6 @@ import { NotificationProvider } from "@/context/notification/NotificationContext
 import UtdragFraSykefravaeret from "@/components/utdragFraSykefravaeret/UtdragFraSykefravaeret";
 import { TREDELING_BREAKING_POINT, TredeltSide } from "@/sider/TredeltSide";
 import { useScreenWidth } from "@/hooks/tredeling/useScreenWidth";
-import { Flexjar } from "@/components/flexjar/Flexjar";
 
 const texts = {
   title: "Aktivitetskrav",
@@ -48,7 +47,6 @@ export const AktivitetskravContainer = (): ReactElement => {
           )}
         </TredeltSide>
       </SideLaster>
-      <Flexjar side={texts.title} />
     </Side>
   );
 };
diff --git a/src/components/flexjar/Flexjar.tsx b/src/components/flexjar/Flexjar.tsx
@@ -14,9 +14,11 @@ import {
 } from "@/data/flexjar/useFlexjarFeedback";
 import { Emoji, emojiProps } from "@/components/flexjar/FeedbackEmojis";
 import { EmojiButton } from "@/components/flexjar/EmojiButton";
-import { ChevronDownIcon, ChevronUpIcon } from "@navikt/aksel-icons";
-import { useFeatureToggles } from "@/data/unleash/unleashQueryHooks";
-import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  MagnifyingGlassIcon,
+} from "@navikt/aksel-icons";
 import { defaultErrorTexts } from "@/api/errors";
 
 const texts = {
@@ -42,7 +44,6 @@ export const Flexjar = ({ side }: FlexjarProps) => {
   const [feedback, setFeedback] = useState<string>();
   const [emoji, setEmoji] = useState<Emoji>();
   const sendFeedback = useFlexjarFeedback();
-  const { toggles } = useFeatureToggles();
 
   useEffect(() => {
     if (!!emoji) {
@@ -65,8 +66,8 @@ export const Flexjar = ({ side }: FlexjarProps) => {
     }
   };
 
-  return toggles.isFlexjarEnabled ? (
-    <div className="flex flex-col sticky bottom-0 items-end">
+  return (
+    <div className="flex flex-col sticky bottom-0 items-end z-[100]">
       <Button
         variant="primary-neutral"
         size="small"
@@ -85,7 +86,7 @@ export const Flexjar = ({ side }: FlexjarProps) => {
           shadow="large"
           borderRadius="medium"
           padding="4"
-          className="flex flex-col gap-4 w-[23rem] z-100"
+          className="flex flex-col gap-4 w-[25rem]"
         >
           <Box className="flex flex-row items-center gap-4">
             <MagnifyingGlassIcon
@@ -108,16 +109,14 @@ export const Flexjar = ({ side }: FlexjarProps) => {
                 background={"surface-default"}
                 className="flex flex-row gap-2"
               >
-                {Object.keys(emojiProps).map((emojiKey, index) => {
-                  return (
-                    <EmojiButton
-                      emojiType={emojiKey as Emoji}
-                      selectedEmoji={emoji}
-                      setSelectedEmoji={setEmoji}
-                      key={index}
-                    />
-                  );
-                })}
+                {Object.keys(emojiProps).map((emojiKey, index) => (
+                  <EmojiButton
+                    emojiType={emojiKey as Emoji}
+                    selectedEmoji={emoji}
+                    setSelectedEmoji={setEmoji}
+                    key={index}
+                  />
+                ))}
               </Box>
               {emoji && (
                 <Textarea
@@ -158,5 +157,5 @@ export const Flexjar = ({ side }: FlexjarProps) => {
         </Box>
       )}
     </div>
-  ) : null;
+  );
 };
diff --git a/src/sider/Side.tsx b/src/sider/Side.tsx
@@ -12,6 +12,7 @@ import { OversiktLenker } from "@/components/personkort/OversiktLenker";
 import SnowButton from "@/components/festive/SnowButton";
 import { Pride } from "@/components/festive/Pride";
 import { Huskelapp } from "@/components/huskelapp/Huskelapp";
+import { Flexjar } from "@/components/flexjar/Flexjar";
 
 export const MODIA_HEADER_ID = "modia-header";
 
@@ -29,6 +30,8 @@ const Side = ({ tittel, aktivtMenypunkt, children }: SideProps) => {
     });
   }, [tittel]);
   const { toggles } = useFeatureToggles();
+  const showFlexjar =
+    toggles.isFlexjarEnabled && aktivtMenypunkt === Menypunkter.AKTIVITETSKRAV;
 
   return (
     <DocumentTitle
@@ -51,6 +54,7 @@ const Side = ({ tittel, aktivtMenypunkt, children }: SideProps) => {
           </nav>
           <div className="w-full flex flex-col">{children}</div>
         </div>
+        {showFlexjar && <Flexjar side={tittel} />}
       </div>
     </DocumentTitle>
   );