Skip to content

Commit

Permalink
Refactor toggle text so it can be used outside of Storyblok (eg. in m…
Browse files Browse the repository at this point in the history
…ethodology page) (#86)
  • Loading branch information
asibs authored Mar 23, 2024
1 parent 2c0b941 commit c1ab987
Show file tree
Hide file tree
Showing 9 changed files with 90 additions and 60 deletions.
59 changes: 59 additions & 0 deletions components/ToggleText.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
"use client";
// ToggleText needs to be a client component - it's interactive

import { useState } from "react";
import { Col, Collapse, Container, Row } from "react-bootstrap";
import { FaCircleChevronRight } from "react-icons/fa6";

const ToggleText = ({
id,
title,
content,
textShownInitially = false,
chevronSize = "fs-2",
}: {
id: string;
title: React.ReactNode;
content: React.ReactNode;
textShownInitially?: boolean;
chevronSize?: string;
}) => {
const [visible, setVisible] = useState(textShownInitially);

return (
<Container className="my-4">
<Row>
<Col xs="auto" className="g-0">
<FaCircleChevronRight
onClick={() => setVisible(!visible)}
aria-controls={`collapse-${id}`}
aria-expanded={visible}
className={chevronSize}
style={{
transition: "transform 0.3s ease 0s",
transform: `rotate(${visible ? 90 : 0}deg)`,
cursor: "pointer",
}}
/>
</Col>
<Col>
<Row
onClick={() => setVisible(!visible)}
aria-controls={`collapse-${id}`}
aria-expanded={visible}
style={{ cursor: "pointer" }}
>
{title}
</Row>
<Row>
<Collapse in={visible}>
<div id={`collapse-${id}`}>{content}</div>
</Collapse>
</Row>
</Col>
</Row>
</Container>
);
};

export default ToggleText;
52 changes: 0 additions & 52 deletions components/page_content/ToggleText.tsx

This file was deleted.

2 changes: 1 addition & 1 deletion components/Page.tsx → components/storybloks/Page.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { storyblokEditable, StoryblokComponent } from "@storyblok/react/rsc";
import Header from "./Header";
import Header from "@/components/Header";
import { PageStoryblok } from "@/storyblok/types/storyblok-types";
import { Container } from "react-bootstrap";

Expand Down
File renamed without changes.
23 changes: 23 additions & 0 deletions components/storybloks/page_content/StoryblokToggleText.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
"use client";
// ToggleText needs to be a client component - it's interactive

import { ToggleTextStoryblok } from "@/storyblok/types/storyblok-types";
import { storyblokEditable } from "@storyblok/react/rsc";
import { render } from "storyblok-rich-text-react-renderer";
import ToggleText from "@/components/ToggleText";

const StoryblokToggleText = ({ blok }: { blok: ToggleTextStoryblok }) => {
return (
<div {...storyblokEditable(blok)} className="my-4">
<ToggleText
id={blok._uid}
title={<h2>{blok.title}</h2>}
content={render(blok.text)}
textShownInitially={blok.text_shown_initially}
chevronSize="fs-2"
/>
</div>
);
};

export default StoryblokToggleText;
File renamed without changes.
File renamed without changes.
14 changes: 7 additions & 7 deletions storyblok/components/ComponentsMap.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ import { SbReactComponentsMap } from "@storyblok/react/rsc";

import Footer from "@/components/footer/Footer";
import FooterLink from "@/components/footer/FooterLink";
import OneColumnLayout from "@/components/page_layout/OneColumnLayout";
import TwoColumnLayout from "@/components/page_layout/TwoColumnLayout";
import ThreeColumnLayout from "@/components/page_layout/ThreeColumnLayout";
import RichText from "@/components/page_content/RichText";
import Page from "@/components/Page";
import ToggleText from "@/components/page_content/ToggleText";
import OneColumnLayout from "@/components/storybloks/page_layout/OneColumnLayout";
import TwoColumnLayout from "@/components/storybloks/page_layout/TwoColumnLayout";
import ThreeColumnLayout from "@/components/storybloks/page_layout/ThreeColumnLayout";
import RichText from "@/components/storybloks/page_content/RichText";
import Page from "@/components/storybloks/Page";
import StoryblokToggleText from "@/components/storybloks/page_content/StoryblokToggleText";
import NavWithHamburger from "@/components/navigation/NavWithHamburger";

export const ComponentsMap: SbReactComponentsMap = {
Expand All @@ -23,7 +23,7 @@ export const ComponentsMap: SbReactComponentsMap = {
three_column_layout: ThreeColumnLayout,
// Page content
rich_text: RichText,
toggle_text: ToggleText,
toggle_text: StoryblokToggleText,
// Generic page
page: Page,
};

0 comments on commit c1ab987

Please sign in to comment.