separate expanded and selected card (#220)

Co-authored-by: Mailn Nifeli Snieske <[email protected]>
kartverket · Jan 17, 2025 · f3052f2 · f3052f2
1 parent 85461cd
commit f3052f2
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 45 deletions.
diff --git a/...omponents/function-card-selected-view.tsx → ...ents/function-card-expandable-content.tsx b/...omponents/function-card-selected-view.tsx → ...ents/function-card-expandable-content.tsx
@@ -1,12 +1,11 @@
-import { Flex, Text, Skeleton, Stack } from "@kvib/react";
 import { useFunction } from "@/hooks/use-function";
-import { EditAndSelectButtons } from "./edit-and-select-buttons";
 import { MetadataView } from "./metadata/metadata-view";
 import { useMetadata } from "@/hooks/use-metadata";
 import { Route } from "@/routes";
 import { OboFlowFeature } from "../../frisk.config";
+import { Stack } from "@kvib/react";
 
-export function FunctionCardSelectedView({
+export function FunctionCardExpandableContent({
 	functionId,
 }: { functionId: number }) {
 	const { func } = useFunction(functionId);
@@ -15,21 +14,7 @@ export function FunctionCardSelectedView({
 	const { flags } = Route.useSearch();
 
 	return (
-		<Stack paddingLeft="10px" w="100%">
-			<Flex alignItems="center" w="100%" flex-wrap="wrap">
-				<Skeleton isLoaded={!func.isLoading} flex={1} minWidth={0}>
-					<Text
-						fontWeight="bold"
-						as="span"
-						display="flex"
-						w="100%"
-						overflow="hidden"
-					>
-						{func.data?.name ?? "<Det skjedde en feil>"}
-					</Text>
-				</Skeleton>
-				<EditAndSelectButtons functionId={functionId} selected />
-			</Flex>
+		<Stack pl="10px">
 			{config.metadata?.map((meta) => (
 				<MetadataView key={meta.key} metadata={meta} functionId={functionId} />
 			))}

diff --git a/src/components/function-card.tsx b/src/components/function-card.tsx
@@ -1,8 +1,8 @@
 import { useFunction } from "@/hooks/use-function";
 import { Route } from "@/routes";
-import { Card, Flex, IconButton, Skeleton, Text } from "@kvib/react";
+import { Card, Flex, IconButton, Skeleton, Stack, Text } from "@kvib/react";
 import { FunctionCardEdit } from "./function-card-edit";
-import { FunctionCardSelectedView } from "./function-card-selected-view";
+import { FunctionCardExpandableContent } from "./function-card-expandable-content";
 import { EditAndSelectButtons } from "./edit-and-select-buttons";
 import { useEffect, useState } from "react";
 import { useHasFunctionAccess } from "@/hooks/use-has-function-access";
@@ -17,6 +17,12 @@ export function FunctionCard({
 	const search = Route.useSearch();
 	const navigate = Route.useNavigate();
 
+	const [isCardExpanded, setIsCardExpanded] = useState(false);
+
+	const toggleCardExpanded = () => {
+		setIsCardExpanded((prev) => !prev);
+	};
+
 	const [bottomMargin, setBottomMargin] = useState(0);
 
 	function getParentDistance() {
@@ -77,32 +83,47 @@ export function FunctionCard({
 			>
 				{search.edit === functionId && hasAccess ? (
 					<FunctionCardEdit functionId={functionId} />
-				) : selected ? (
-					<FunctionCardSelectedView functionId={functionId} />
 				) : (
-					<>
-						<IconButton
-							type="button"
-							colorScheme="gray"
-							variant="ghost"
-							aria-label="drag"
-							icon="drag_indicator"
-							isDisabled={!hasAccess}
-						/>
-
-						<Skeleton isLoaded={!func.isLoading} flex="1" minWidth={0}>
-							<Text
-								fontWeight="bold"
-								as="span"
-								display="flex"
-								w="100%"
-								overflow="hidden"
-							>
-								{func.data?.name ?? "<Det skjedde en feil>"}
-							</Text>
-						</Skeleton>
-						<EditAndSelectButtons functionId={functionId} selected={false} />
-					</>
+					<Stack w="100%">
+						<Flex alignItems="center" w="100%" flex-wrap="wrap">
+							<IconButton
+								type="button"
+								colorScheme="gray"
+								variant="ghost"
+								aria-label="drag"
+								icon="drag_indicator"
+								isDisabled={!hasAccess}
+							/>
+							<IconButton
+								colorScheme="gray"
+								variant="tertiary"
+								aria-label={isCardExpanded ? "close card" : "expand card"}
+								icon={isCardExpanded ? "keyboard_arrow_down" : "chevron_right"}
+								onClick={(e) => {
+									e.stopPropagation();
+									toggleCardExpanded();
+								}}
+							/>
+							<Skeleton isLoaded={!func.isLoading} flex="1" minWidth={0}>
+								<Text
+									fontWeight="bold"
+									as="span"
+									display="flex"
+									w="100%"
+									overflow="hidden"
+								>
+									{func.data?.name ?? "<Det skjedde en feil>"}
+								</Text>
+							</Skeleton>
+							<EditAndSelectButtons
+								functionId={functionId}
+								selected={selected}
+							/>
+						</Flex>
+						{isCardExpanded && (
+							<FunctionCardExpandableContent functionId={functionId} />
+						)}
+					</Stack>
 				)}
 			</Flex>
 		</Card>