feat: add accordion to cards

dekk-app · Sep 23, 2021 · 476dbdf · 476dbdf
1 parent 2055615
commit 476dbdf
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 8 deletions.
diff --git a/src/molecules/accordion/index.tsx b/src/molecules/accordion/index.tsx
@@ -1,14 +1,20 @@
 import Icon from "@/atoms/icon";
 import React, { FC, useState } from "react";
 import { FAQ_SCHEMA } from "./constants";
-import { StyledAccordionButton, StyledAccordionContent, StyledAccordionHeading } from "./styled";
+import {
+	StyledAccordionButton,
+	StyledAccordionContent,
+	StyledAccordionHeading,
+	StyledAccordionLabel,
+} from "./styled";
 import { AccordionProps } from "./types";
 
 const Accordion: FC<AccordionProps> = ({
 	children,
 	headerComponent,
 	faq,
 	heading,
+	ellipsis,
 	id,
 	initiallyExpanded,
 }) => {
@@ -31,7 +37,9 @@ const Accordion: FC<AccordionProps> = ({
 						setExpanded(previousState => !previousState);
 					}}
 				>
-					{heading}
+					<StyledAccordionLabel ellipsis={ellipsis && !expanded}>
+						{heading}
+					</StyledAccordionLabel>
 					<Icon icon={expanded ? "chevronUp" : "chevronDown"} />
 				</StyledAccordionButton>
 			</StyledAccordionHeading>

diff --git a/src/molecules/accordion/styled.ts b/src/molecules/accordion/styled.ts
@@ -4,6 +4,16 @@ import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { AccordionContentProps } from "./types";
 
+export const StyledAccordionLabel = styled.div<{ ellipsis?: boolean }>`
+	width: 100%;
+	${({ ellipsis }) =>
+		ellipsis &&
+		css`
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		`};
+`;
 export const StyledAccordionButton = styled.button`
 	display: flex;
 	position: relative;

diff --git a/src/molecules/accordion/types.ts b/src/molecules/accordion/types.ts
@@ -2,6 +2,7 @@ export interface AccordionProps {
 	heading: string;
 	id: string;
 	initiallyExpanded?: boolean;
+	ellipsis?: boolean;
 	faq?: boolean;
 	headerComponent?: "h2" | "h3" | "h4" | "h5" | "h6";
 }

diff --git a/src/organisms/wish-card/index.tsx b/src/organisms/wish-card/index.tsx
@@ -1,3 +1,4 @@
+import { BreakLines } from "@/atoms/break-lines";
 import Icon from "@/atoms/icon";
 import { StyledIconButton } from "@/atoms/icon-button/styled";
 import Spinner from "@/atoms/spinner";
@@ -12,6 +13,7 @@ import {
 import { useAddWishModal } from "@/ions/stores/modal/wish";
 import { useWish } from "@/ions/stores/wish";
 import { pxToRem } from "@/ions/utils/unit";
+import Accordion from "@/molecules/accordion";
 import { Moderation, Role, Wish, WishVote } from "@/types/backend-api";
 import { useMutation } from "@apollo/client";
 import { useSession } from "next-auth/client";
@@ -38,6 +40,7 @@ const WishCard: FC<{ wish: Wish }> = ({
 	const setId = useWish(state => state.setId);
 	const setBody = useWish(state => state.setBody);
 	const setSubject = useWish(state => state.setSubject);
+
 	const [createWishVote] = useMutation<{
 		createWishVote: WishVote;
 	}>(CREATE_WISH_VOTE, {
@@ -123,12 +126,11 @@ const WishCard: FC<{ wish: Wish }> = ({
 	return (
 		<StyledCard colSpanS={4} colSpanL={6} data-test-selector="wish-card" data-test-id={`${id}`}>
 			<StyledArticle>
-				<Typography variant="subtitle" component="h2" data-test-selector="wish-subject">
-					{subject}
-				</Typography>
-				<Typography light variant="body2" data-test-selector="wish-body">
-					{body}
-				</Typography>
+				<Accordion ellipsis heading={subject} id={`__wish-card__${id}`}>
+					<Typography light variant="body2" data-test-selector="wish-body">
+						<BreakLines text={body} />
+					</Typography>
+				</Accordion>
 			</StyledArticle>
 			<StyledTags>
 				{session?.user.id === authorId && (