Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: use new accordions #2458

Merged
merged 2 commits into from
Oct 9, 2024
Merged

refactor: use new accordions #2458

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fab7236
refactor: use new accordions.
Jonas-C Oct 9, 2024
d51e1e0
fix: lazy mount accordions
Jonas-C Sep 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,6 @@
"@fontsource/source-code-pro": "^4.5.9",
"@fontsource/source-sans-pro": "^4.5.9",
"@fontsource/source-serif-pro": "^4.5.7",
"@ndla/accordion": "^6.0.29-alpha.0",
"@ndla/article-converter": "^10.0.48-alpha.0",
"@ndla/audio-search": "^7.0.41-alpha.0",
"@ndla/button": "^15.0.29-alpha.0",
Expand All @@ -103,7 +102,6 @@
"@ndla/ui": "^56.0.45-alpha.0",
"@ndla/util": "^5.0.0-alpha.0",
"@ndla/video-search": "^8.0.40-alpha.0",
"@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-popover": "^1.0.3",
"@radix-ui/react-portal": "^1.0.3",
"@radix-ui/react-toolbar": "^1.0.4",
Expand Down
167 changes: 59 additions & 108 deletions src/components/Accordion/FormAccordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,123 +7,74 @@
*/

import { ReactNode, memo } from "react";
import styled from "@emotion/styled";
import { AccordionContent, AccordionHeader, AccordionItem } from "@ndla/accordion";
import { colors, misc, spacing } from "@ndla/core";

type Variant = "center";
import { ArrowDownShortLine } from "@ndla/icons/common";
import {
AccordionItem,
AccordionItemContent,
AccordionItemIndicator,
AccordionItemTrigger,
Heading,
} from "@ndla/primitives";
import { styled } from "@ndla/styled-system/jsx";

export interface FormAccordionProps {
children: ReactNode;
title: ReactNode;
hasError: boolean;
className?: string;
id: string;
wide?: boolean;
isFrontpageArticle?: boolean;
variant?: Variant;
}

const StyledHeader = styled(AccordionHeader)`
&[data-error="true"] {
background-color: ${colors.support.redLight};
border-color: ${colors.support.red};
color: ${colors.text.primary};
svg {
color: ${colors.text.primary};
}
}
&:focus-visible {
outline: 2px solid ${colors.support.red};
}

&:hover {
text-decoration: none;

// Underline normal string headers
> div:not(:has(*)) {
text-decoration: underline;
}

// Use data-underline to determine which parts of header should be underlined
> div > [data-underline=""] {
text-decoration: underline;
}
}
`;

const StyledItem = styled(AccordionItem)`
border-radius: ${misc.borderRadius};
background-color: ${colors.white};
overflow: hidden;

&:focus-visible {
border: 2px solid ${colors.support.red};
}

& > div {
overflow: unset;
}

&[data-error="true"] {
border-color: ${colors.support.red};
}
`;

const HeaderWrapper = styled.div`
display: flex;
align-items: center;
gap: ${spacing.small};
svg {
color: ${colors.white};
width: 20px;
height: 20px;
}
`;

const StyledAccordionContent = styled(AccordionContent)`
width: 100%;
&[data-frontpage="true"] {
background-color: ${colors.background.lightBlue};
inset: unset !important;

display: flex;
align-items: center;
justify-content: center;
}
&[data-variant="center"] {
position: relative;
width: 83.333%;
right: auto;
left: 8.333%;
}
`;

const FormAccordion = ({
children,
title,
hasError,
id,
className,
wide,
isFrontpageArticle,
variant,
}: FormAccordionProps) => {
const StyledAccordionItemTrigger = styled(AccordionItemTrigger, {
variants: {
invalid: {
true: {
background: "surface.dangerSubtle",
boxShadowColor: "stroke.error",
_hover: {
background: "surface.dangerSubtle.hover",
boxShadowColor: "stroke.error",
},
_active: {
background: "surface.dangerSubtle.active",
boxShadowColor: "stroke.error",
},
_open: {
background: "surface.dangerSubtle",
boxShadowColor: "stroke.error",
},
},
},
},
});

const StyledAccordionItemContent = styled(AccordionItemContent, {
base: {
overflowX: "visible",
},
variants: {
invalid: {
true: {
borderColor: "stroke.error",
},
},
},
});

const FormAccordion = ({ children, title, hasError, id }: FormAccordionProps) => {
return (
<StyledItem value={id} data-error={hasError}>
<StyledHeader data-error={hasError}>
<HeaderWrapper data-error={hasError}>{title}</HeaderWrapper>
</StyledHeader>
<StyledAccordionContent
id={id}
className={className}
data-wide={!!wide}
data-frontpage={!!isFrontpageArticle}
data-variant={variant}
>
{children}
</StyledAccordionContent>
</StyledItem>
<AccordionItem value={id}>
<Heading asChild consumeCss textStyle="label.medium" fontWeight="bold">
<h2>
<StyledAccordionItemTrigger invalid={hasError}>
{title}
<AccordionItemIndicator asChild>
<ArrowDownShortLine size="medium" />
</AccordionItemIndicator>
</StyledAccordionItemTrigger>
</h2>
</Heading>
<StyledAccordionItemContent invalid={hasError}>{children}</StyledAccordionItemContent>
</AccordionItem>
);
};

Expand Down
21 changes: 14 additions & 7 deletions src/components/Accordion/FormAccordions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,10 @@

import { ReactElement, memo, useState } from "react";
import styled from "@emotion/styled";
import { AccordionRoot } from "@ndla/accordion";
import { spacing } from "@ndla/core";
import { AccordionRoot } from "@ndla/primitives";
import { FormAccordionProps } from "./FormAccordion";
import OpenAllButton from "./OpenAllButton";
import { MainContent } from "../../containers/ArticlePage/styles";

type ChildType = ReactElement<FormAccordionProps> | undefined | false;

Expand All @@ -35,6 +34,10 @@ const FlexWrapper = styled.div`
justify-content: flex-end;
`;

const StyledAccordionRoot = styled(AccordionRoot)`
width: 100%;
`;

const FormAccordions = ({ defaultOpen, children }: Props) => {
const [openAccordions, setOpenAccordions] = useState<string[]>(defaultOpen);

Expand All @@ -47,11 +50,15 @@ const FormAccordions = ({ defaultOpen, children }: Props) => {
formAccordionChildren={children}
/>
</FlexWrapper>
<MainContent>
<AccordionRoot type="multiple" value={openAccordions} onValueChange={setOpenAccordions}>
{children}
</AccordionRoot>
</MainContent>
<StyledAccordionRoot
multiple
value={openAccordions}
onValueChange={(details) => setOpenAccordions(details.value)}
lazyMount
unmountOnExit
>
{children}
</StyledAccordionRoot>
</AccordionsWrapper>
);
};
Expand Down
54 changes: 36 additions & 18 deletions src/components/Accordion/FormAccordionsWithComments.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,21 @@ import { useField } from "formik";
import { ReactElement, memo, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import styled from "@emotion/styled";
import { AccordionRoot } from "@ndla/accordion";
import { spacing } from "@ndla/core";
import { SwitchControl, SwitchHiddenInput, SwitchLabel, SwitchRoot, SwitchThumb } from "@ndla/primitives";
import {
AccordionRoot,
SwitchControl,
SwitchHiddenInput,
SwitchLabel,
SwitchRoot,
SwitchThumb,
} from "@ndla/primitives";
import { IArticle, IUpdatedArticle } from "@ndla/types-backend/draft-api";
import { Node } from "@ndla/types-taxonomy";
import { FormAccordionProps } from "./FormAccordion";
import OpenAllButton from "./OpenAllButton";
import { ARCHIVED, PUBLISHED, STORED_HIDE_COMMENTS, UNPUBLISHED } from "../../constants";
import CommentSection, { COMMENT_WIDTH, SPACING_COMMENT } from "../../containers/ArticlePage/components/CommentSection";
import { MainContent } from "../../containers/ArticlePage/styles";
import { ArticleFormType } from "../../containers/FormikForm/articleFormHooks";
import { useLocalStorageBooleanState } from "../../containers/WelcomePage/hooks/storedFilterHooks";
import QualityEvaluation from "../QualityEvaluation/QualityEvaluation";
Expand Down Expand Up @@ -57,6 +62,9 @@ const CommentWrapper = styled.div`
display: flex;
flex-direction: column;
&[data-hidden="true"] {
visibility: none;
}
&[data-none="true"] {
display: none;
}
`;
Expand All @@ -65,15 +73,20 @@ const StyledSwitchRoot = styled(SwitchRoot)`
min-height: 40px;
`;

const FormControls = styled(MainContent)`
const FormControls = styled.div`
display: flex;
width: 100%;
padding-left: ${spacing.small};
justify-content: flex-end;
&[data-enabled-quality-evaluation="true"] {
justify-content: space-between;
}
`;

const StyledAccordionRoot = styled(AccordionRoot)`
width: 100%;
`;

const FormAccordionsWithComments = ({ defaultOpen, children, article, taxonomy, updateNotes }: Props) => {
const { t } = useTranslation();
const { toggleWideArticles, isWideArticle } = useWideArticle();
Expand Down Expand Up @@ -124,29 +137,34 @@ const FormAccordionsWithComments = ({ defaultOpen, children, article, taxonomy,
/>
</RightFlexWrapper>
</FormControls>
{!disableComments && (
<CommentWrapper>
<CommentWrapper>
{!disableComments && (
<StyledSwitchRoot checked={!hideComments} onCheckedChange={() => setHideComments(!hideComments)}>
<SwitchLabel>{t("form.comment.showComments")}</SwitchLabel>
<SwitchControl>
<SwitchThumb />
</SwitchControl>
<SwitchHiddenInput />
</StyledSwitchRoot>
</CommentWrapper>
)}
)}
</CommentWrapper>
</FlexWrapper>
<FlexWrapper>
<MainContent data-wide={isWideArticle}>
<AccordionRoot type="multiple" value={openAccordions} onValueChange={setOpenAccordions}>
{children}
</AccordionRoot>
</MainContent>
{!disableComments && (
<CommentWrapper data-hidden={hideComments}>
<CommentSection />
</CommentWrapper>
)}
<StyledAccordionRoot
multiple
value={openAccordions}
onValueChange={(details) => setOpenAccordions(details.value)}
lazyMount
unmountOnExit
>
{children}
</StyledAccordionRoot>
<CommentWrapper
data-hidden={hideComments || disableComments}
data-none={isWideArticle && (hideComments || disableComments)}
>
{!hideComments && !disableComments && <CommentSection />}
</CommentWrapper>
</FlexWrapper>
</ContentWrapper>
);
Expand Down
Loading
Loading