Skip to content

Commit

Permalink
Refactor TabFilter as CheckBoxGroup + some emotion to panda.
Browse files Browse the repository at this point in the history
  • Loading branch information
@katrinewi
katrinewi committed Jul 15, 2024
1 parent 5a97b6c commit 9bd8715
Show file tree
Hide file tree
Showing 4 changed files with 50 additions and 86 deletions.
88 changes: 37 additions & 51 deletions src/components/TabFilter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,69 +6,55 @@
*
*/

import { useTranslation } from "react-i18next";
import styled from "@emotion/styled";
import { ButtonV2 } from "@ndla/button";
import { colors, spacing } from "@ndla/core";

const StyledLi = styled.li`
padding: 0;
`;

const StyledButton = styled(ButtonV2)`
border-width: 1px;
border-radius: 12px;
border-color: ${colors.brand.dark};
:not(:hover, :focus)[aria-current="false"] {
background: ${colors.white};
color: ${colors.brand.dark};
border-color: ${colors.brand.light};
}
`;

const ButtonContainer = styled.ul`
display: flex;
gap: ${spacing.xsmall};
padding: ${spacing.xsmall};
border-radius: ${spacing.small};
background: ${colors.brand.lightest};
border: 1px solid ${colors.brand.lighter};
align-self: flex-start;
margin: ${spacing.normal} 0 ${spacing.small};
list-style: none;
flex-wrap: wrap;
`;
import { Done } from "@ndla/icons/editor";
import {
CheckboxControl,
CheckboxGroup,
CheckboxHiddenInput,
CheckboxIndicator,
CheckboxLabel,
CheckboxRoot,
Text,
} from "@ndla/primitives";
import { styled } from "@ndla/styled-system/jsx";

const StyledLegend = styled("legend", { base: { marginBlock: "small" } });

const StyledCheckboxGroup = styled(CheckboxGroup, {
base: { display: "flex", flexDirection: "row", flexWrap: "wrap" },
});

interface Option {
value: string;
label: string;
}

interface Props {
value: string;
onChange: (value: string) => void;
value: string[];
onChange: (value: string[]) => void;
options: Option[];
}

const TabFilter = ({ value: selectedValue, onChange, options }: Props) => {
const { t } = useTranslation();
return (
<ButtonContainer aria-label={t("subjectsPage.filterSubjects")}>
{/* TODO: Should probably not be buttons */}
{options.map(({ value, label }) => (
<StyledLi role="none" key={value}>
<StyledButton
role="listitem"
fontWeight="bold"
aria-current={selectedValue === value}
variant={selectedValue === value ? undefined : "outline"}
onClick={() => onChange(value)}
>
{label}
</StyledButton>
</StyledLi>
))}
</ButtonContainer>
<fieldset>
<StyledLegend>
<Text textStyle="title.small">Hvilket fag vil du vise?</Text>
</StyledLegend>
<StyledCheckboxGroup defaultValue={selectedValue} onValueChange={(v) => onChange(v)}>
{options.map((item) => (
<CheckboxRoot key={item.value} value={item.value} variant="chip">
<CheckboxControl>
<CheckboxIndicator asChild>
<Done />
</CheckboxIndicator>
</CheckboxControl>
<CheckboxLabel>{item.label}</CheckboxLabel>
<CheckboxHiddenInput />
</CheckboxRoot>
))}
</StyledCheckboxGroup>
</fieldset>
);
};

Expand Down
41 changes: 9 additions & 32 deletions src/containers/AllSubjectsPage/AllSubjectsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,9 @@ import { useTranslation } from "react-i18next";
import { useLocation, useNavigate } from "react-router-dom";
import { gql } from "@apollo/client";
import styled from "@emotion/styled";
import { colors, spacing } from "@ndla/core";
import { spacing } from "@ndla/core";
import { useComponentSize } from "@ndla/hooks";
import { Heading } from "@ndla/primitives";
import { Select } from "@ndla/select";
import { HelmetWithTracker } from "@ndla/tracker";
import { ErrorMessage, ContentPlaceholder, OneColumn, constants } from "@ndla/ui";
import FavoriteSubjects from "./FavoriteSubjects";
Expand All @@ -27,7 +26,6 @@ import { filterSubjects, groupSubjects } from "./utils";
import { AuthContext } from "../../components/AuthenticationContext";
import TabFilter from "../../components/TabFilter";
import { MastheadHeightPx, SKIP_TO_CONTENT_ID } from "../../constants";
import { useUserAgent } from "../../UserAgentContext";
import { useGraphQuery } from "../../util/runQueries";

const { ACTIVE_SUBJECTS, ARCHIVE_SUBJECTS, BETA_SUBJECTS, OTHER } = constants.subjectCategories;
Expand All @@ -38,7 +36,7 @@ const createFilterTranslation = (t: TFunction, key: string, addTail = true) => {
count: 2,
})}`
: t(`subjectCategories.${key}`);
return label.toLocaleUpperCase();
return label;
};

const createFilters = (t: TFunction) => [
Expand All @@ -58,10 +56,11 @@ const createFilters = (t: TFunction) => [
label: createFilterTranslation(t, OTHER, false),
value: OTHER,
},
// TODO: Consider if all should be removed as a option with new filter logic
{
label: `${t("contentTypes.all")} ${t("common.subject", {
count: 2,
})}`.toUpperCase(),
})}`,
value: "all",
},
];
Expand All @@ -81,14 +80,6 @@ const StyledList = styled.ul`
padding: 0;
`;

const SelectWrapper = styled.div`
padding: ${spacing.xsmall};
border-radius: ${spacing.small};
background: ${colors.brand.lightest};
border: 1px solid ${colors.brand.lighter};
margin: ${spacing.normal} 0 ${spacing.small};
`;

const allSubjectsQuery = gql`
query allSubjects {
subjects(filterVisible: true) {
Expand All @@ -104,7 +95,6 @@ const allSubjectsQuery = gql`
const AllSubjectsPage = () => {
const { t } = useTranslation();
const navigate = useNavigate();
const selectors = useUserAgent();
const location = useLocation();
const { user } = useContext(AuthContext);
const { height = MastheadHeightPx } = useComponentSize("masthead");
Expand All @@ -129,13 +119,14 @@ const AllSubjectsPage = () => {
}, [height]);

const filterOptions = useMemo(() => createFilters(t), [t]);
const [filter, _setFilter] = useState<string>(parse(location.search).filter || ACTIVE_SUBJECTS);
const setFilter = (value: string) => {
const [filter, _setFilter] = useState<string[]>(parse(location.search).filter || [ACTIVE_SUBJECTS]);

const setFilter = (value: string[]) => {
const searchObject = parse(location.search);
_setFilter(value);
const search = stringify({
...searchObject,
filter: value !== ACTIVE_SUBJECTS ? value : undefined,
filter: value,
});
navigate(`${location.pathname}?${search}`);
};
Expand Down Expand Up @@ -176,21 +167,7 @@ const AllSubjectsPage = () => {
{t("subjectsPage.allSubjects")}
</Heading>
{!!favoriteSubjects?.length && <FavoriteSubjects favorites={favoriteSubjects} subjects={sortedSubjects} />}
{selectors?.isMobile ? (
<SelectWrapper>
<Select<false>
value={filterOptions.find((opt) => opt.value === filter)}
onChange={(value) => value && setFilter(value?.value)}
options={filterOptions}
colorTheme="white"
outline
bold
prefix={`${t("subjectsPage.shows").toUpperCase()}: `}
/>
</SelectWrapper>
) : (
<TabFilter value={filter} onChange={setFilter} options={filterOptions} />
)}
<TabFilter value={filter} onChange={setFilter} options={filterOptions} />
<LetterNavigation activeLetters={letters} />
<StyledList aria-label={t("subjectsPage.alphabeticSort")}>
{groupedSubjects.map(({ label, subjects }) => (
Expand Down
1 change: 1 addition & 0 deletions src/containers/AllSubjectsPage/LetterNavigation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ const StyledLetter = styled("a", {
outline: "none",
borderRadius: 0,
boxShadowColor: "stroke.default",
// TODO: Box shadow looks weird in Chrome mobile emulation
boxShadow: "0px 2px -0px 0px var(--shadow-color)",
_hover: {
borderRadius: "xsmall",
Expand Down
6 changes: 3 additions & 3 deletions src/containers/AllSubjectsPage/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,10 +60,10 @@ export const groupSubjects = <T extends BaseSubject>(subjects: T[]): GroupedSubj
.sort((a, b) => (a.label > b.label ? 1 : -1));
};

export const filterSubjects = <T extends Pick<GQLSubject, "id" | "metadata">>(allSubjects: T[], status: string) => {
export const filterSubjects = <T extends Pick<GQLSubject, "id" | "metadata">>(allSubjects: T[], status: string[]) => {
const subjects = allSubjects.filter((subject) => subject.metadata.customFields.forklaringsfag !== "true");
if (status === "all") {
if (status.includes("all")) {
return subjects.filter((subject) => subject.metadata.customFields.subjectCategory);
}
return subjects.filter((subject) => subject.metadata.customFields.subjectCategory === status);
return subjects.filter((subject) => status.includes(subject.metadata.customFields.subjectCategory));
};

0 comments on commit 9bd8715

Please sign in to comment.