From 89c9050bb11ebf5ba332bca8692fa7f857fcbbb2 Mon Sep 17 00:00:00 2001 From: aizad-deriv Date: Wed, 6 Mar 2024 13:57:34 +0800 Subject: [PATCH 01/18] feat: Accordion component --- lib/components/Accordion/Accordion.scss | 62 +++++++++++++++++++++ lib/components/Accordion/Chevron.svg | 3 ++ lib/components/Accordion/index.tsx | 72 +++++++++++++++++++++++++ lib/main.ts | 9 ++-- 4 files changed, 142 insertions(+), 4 deletions(-) create mode 100644 lib/components/Accordion/Accordion.scss create mode 100644 lib/components/Accordion/Chevron.svg create mode 100644 lib/components/Accordion/index.tsx diff --git a/lib/components/Accordion/Accordion.scss b/lib/components/Accordion/Accordion.scss new file mode 100644 index 00000000..6e76aaa4 --- /dev/null +++ b/lib/components/Accordion/Accordion.scss @@ -0,0 +1,62 @@ +.deriv-accordion { + position: relative; + display: inline-flex; + flex-direction: column; + min-width: 100%; + gap: 8px; + + &__header { + outline: none; + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + padding: 24px; + background-color: var(--general-main-2); + border-radius: $border-radius-2; + + // TODO: For testing purposes only - remove this + font-size: map-get($font-sizes, "md"); + color: var(--text-general); + + &:hover { + cursor: pointer; + } + + &--active { + border-radius: $border-radius-2 $border-radius-2 0 0; + } + + &--border-bottom { + border-bottom: 1px solid var(--border-normal-1); + } + } + + &__icon { + margin-left: auto; + display: inline-block; + transition: all 0.3s ease-in-out; + + &--active { + transform: rotate(-180deg); + } + } + + &__content { + width: 100%; + background-color: var(--general-main-2); + padding: 0 24px 24px 24px; + border-radius: 0 0 $border-radius-2 $border-radius-2; + overflow: hidden; + transition: max-height 0.2s ease-out; + + &--active { + border-radius: 0 0 $border-radius-2 $border-radius-2; + } + + // TODO: For testing purposes only - remove this + font-size: map-get($font-sizes, "default"); + line-height: map-get($line-heights, "sm"); + color: var(--text-general); + } +} diff --git a/lib/components/Accordion/Chevron.svg b/lib/components/Accordion/Chevron.svg new file mode 100644 index 00000000..7bb0e7fa --- /dev/null +++ b/lib/components/Accordion/Chevron.svg @@ -0,0 +1,3 @@ + + + diff --git a/lib/components/Accordion/index.tsx b/lib/components/Accordion/index.tsx new file mode 100644 index 00000000..487d203a --- /dev/null +++ b/lib/components/Accordion/index.tsx @@ -0,0 +1,72 @@ +import { useState } from "react"; +import Chevron from "./Chevron.svg"; +import clsx from "clsx"; +import "./Accordion.scss"; + +type AccordionSectionProps = { + section: { title: string; content: string }; + isActiveSection: boolean; + setActiveIndex: (index: number | null) => void; + sectionIndex: number; +}; + +type AccordionProps = { sections: AccordionSectionProps["section"] }; + +const AccordionSection = ({ + section, + isActiveSection, + setActiveIndex, + sectionIndex, +}: AccordionSectionProps) => { + const toggleSection = () => { + const nextIndex = isActiveSection ? null : sectionIndex; + setActiveIndex(nextIndex); + }; + + return ( +
+
+
{section.title}
+
+ +
+
+ {isActiveSection && ( +
+ {section.content} +
+ )} +
+ ); +}; + +export const Accordion = ({ sections }: AccordionProps) => { + const [activeIndex, setActiveIndex] = useState(null); + return ( +
+ {sections.map((section, index) => ( + + ))} +
+ ); +}; diff --git a/lib/main.ts b/lib/main.ts index 0e12cd82..7b3293b7 100644 --- a/lib/main.ts +++ b/lib/main.ts @@ -1,3 +1,4 @@ +export { Accordion } from "./components/Accordion"; export { ActionScreen } from "./components/ActionScreen"; export { Button } from "./components/Button"; export { Checkbox } from "./components/Checkbox"; @@ -6,16 +7,16 @@ export { Dropdown } from "./components/Dropdown"; export { InlineMessage } from "./components/InlineMessage"; export { Input } from "./components/Input"; export { Loader } from "./components/Loader"; +export { Modal } from "./components/Modal"; export { PageLayout } from "./components/PageLayout"; export { PasswordInput } from "./components/PasswordInput"; -export { Table } from "./components/Table"; +export { SideNote } from "./components/SideNote"; export { Tab, Tabs } from "./components/Tabs"; +export { Table } from "./components/Table"; export { Text } from "./components/Text"; +export { TextArea } from "./components/TextArea"; export { ToggleSwitch } from "./components/ToggleSwitch"; export { Tooltip } from "./components/Tooltip"; export { useDevice } from "./hooks/useDevice"; export { useOnClickOutside } from "./hooks/useOnClickOutside"; export { VerticalTab, VerticalTabItems } from "./components/VerticalTab"; -export { SideNote } from "./components/SideNote"; -export { Modal } from "./components/Modal"; -export { TextArea } from "./components/TextArea"; From 44d4c813f00ce0351e35ac12abcf298e19398548 Mon Sep 17 00:00:00 2001 From: aizad-deriv Date: Wed, 6 Mar 2024 15:18:00 +0800 Subject: [PATCH 02/18] chore: made improvements for Accordion component --- lib/components/Accordion/Accordion.scss | 35 ++++---- lib/components/Accordion/index.tsx | 106 ++++++++++++++---------- 2 files changed, 80 insertions(+), 61 deletions(-) diff --git a/lib/components/Accordion/Accordion.scss b/lib/components/Accordion/Accordion.scss index 6e76aaa4..4dd02300 100644 --- a/lib/components/Accordion/Accordion.scss +++ b/lib/components/Accordion/Accordion.scss @@ -1,3 +1,5 @@ +$animation-duration: 0.3s; + .deriv-accordion { position: relative; display: inline-flex; @@ -5,28 +7,24 @@ min-width: 100%; gap: 8px; + &__wrapper { + width: 100%; + border-radius: $border-radius-2; + background-color: var(--general-main-2); + padding: 24px; + } + &__header { outline: none; width: 100%; display: flex; align-items: center; justify-content: space-between; - padding: 24px; - background-color: var(--general-main-2); - border-radius: $border-radius-2; // TODO: For testing purposes only - remove this font-size: map-get($font-sizes, "md"); color: var(--text-general); - &:hover { - cursor: pointer; - } - - &--active { - border-radius: $border-radius-2 $border-radius-2 0 0; - } - &--border-bottom { border-bottom: 1px solid var(--border-normal-1); } @@ -35,7 +33,10 @@ &__icon { margin-left: auto; display: inline-block; - transition: all 0.3s ease-in-out; + transition: all $animation-duration ease-in-out; + &:hover { + cursor: pointer; + } &--active { transform: rotate(-180deg); @@ -44,14 +45,14 @@ &__content { width: 100%; - background-color: var(--general-main-2); - padding: 0 24px 24px 24px; - border-radius: 0 0 $border-radius-2 $border-radius-2; overflow: hidden; - transition: max-height 0.2s ease-out; + max-height: 0px; + opacity: 0; + transition: max-height $animation-duration ease-out; &--active { - border-radius: 0 0 $border-radius-2 $border-radius-2; + padding-top: 24px; + opacity: 1; } // TODO: For testing purposes only - remove this diff --git a/lib/components/Accordion/index.tsx b/lib/components/Accordion/index.tsx index 487d203a..8326c2bf 100644 --- a/lib/components/Accordion/index.tsx +++ b/lib/components/Accordion/index.tsx @@ -1,6 +1,6 @@ -import { useState } from "react"; -import Chevron from "./Chevron.svg"; +import { memo, useEffect, useRef, useState } from "react"; import clsx from "clsx"; +import Chevron from "./Chevron.svg"; import "./Accordion.scss"; type AccordionSectionProps = { @@ -12,61 +12,79 @@ type AccordionSectionProps = { type AccordionProps = { sections: AccordionSectionProps["section"] }; -const AccordionSection = ({ - section, - isActiveSection, - setActiveIndex, - sectionIndex, -}: AccordionSectionProps) => { - const toggleSection = () => { - const nextIndex = isActiveSection ? null : sectionIndex; - setActiveIndex(nextIndex); - }; +const AccordionSection = memo( + ({ + section, + isActiveSection, + setActiveIndex, + sectionIndex, + }: AccordionSectionProps) => { + const toggleSection = () => { + const nextIndex = isActiveSection ? null : sectionIndex; + setActiveIndex(nextIndex); + }; - return ( -
-
-
{section.title}
-
- + const [height, setHeight] = useState(""); + const heightRef = useRef(null); + + useEffect(() => { + const scrollHeight = heightRef.current?.scrollHeight; + setHeight(`${scrollHeight}px`); + }, [isActiveSection]); + + return ( +
+
+
{section.title}
+
+ +
-
- {isActiveSection && (
{section.content}
- )} -
- ); -}; +
+ ); + }, +); export const Accordion = ({ sections }: AccordionProps) => { const [activeIndex, setActiveIndex] = useState(null); return (
- {sections.map((section, index) => ( - - ))} + {sections.map( + ( + section: { title: string; content: string }, + sectionIndex: number, + ) => ( + + ), + )}
); }; From 1c8c5fae7e493f0cc9b7ec58296fc2eaf3342115 Mon Sep 17 00:00:00 2001 From: aizad-deriv Date: Wed, 6 Mar 2024 15:48:49 +0800 Subject: [PATCH 03/18] chore: added variants for accordion component --- lib/components/Accordion/Accordion.scss | 22 ++++++++++++++++++++-- lib/components/Accordion/index.tsx | 17 ++++++++++++++++- 2 files changed, 36 insertions(+), 3 deletions(-) diff --git a/lib/components/Accordion/Accordion.scss b/lib/components/Accordion/Accordion.scss index 4dd02300..020e8b15 100644 --- a/lib/components/Accordion/Accordion.scss +++ b/lib/components/Accordion/Accordion.scss @@ -1,3 +1,4 @@ +$border: 1px solid var(--general-active); $animation-duration: 0.3s; .deriv-accordion { @@ -5,13 +6,30 @@ $animation-duration: 0.3s; display: inline-flex; flex-direction: column; min-width: 100%; - gap: 8px; &__wrapper { width: 100%; - border-radius: $border-radius-2; background-color: var(--general-main-2); padding: 24px; + + &--underline { + border-bottom: $border; + } + &--shadow, + &--bordered { + border-radius: $border-radius-2; + margin-bottom: 8px; + + &:last-child { + margin-bottom: 0; + } + } + &--bordered { + border: $border; + } + &--shadow { + box-shadow: $deriv-box-shadow; + } } &__header { diff --git a/lib/components/Accordion/index.tsx b/lib/components/Accordion/index.tsx index 8326c2bf..969ebd52 100644 --- a/lib/components/Accordion/index.tsx +++ b/lib/components/Accordion/index.tsx @@ -3,21 +3,31 @@ import clsx from "clsx"; import Chevron from "./Chevron.svg"; import "./Accordion.scss"; +type AccordionVariants = "underline" | "bordered" | "shadow"; + type AccordionSectionProps = { section: { title: string; content: string }; isActiveSection: boolean; setActiveIndex: (index: number | null) => void; sectionIndex: number; + variant?: AccordionVariants; }; type AccordionProps = { sections: AccordionSectionProps["section"] }; +const AccordionVariant = { + underline: "deriv-accordion__wrapper--underline", + bordered: "deriv-accordion__wrapper--bordered", + shadow: "deriv-accordion__wrapper--shadow", +} as const; + const AccordionSection = memo( ({ section, isActiveSection, setActiveIndex, sectionIndex, + variant = "underline", }: AccordionSectionProps) => { const toggleSection = () => { const nextIndex = isActiveSection ? null : sectionIndex; @@ -33,7 +43,12 @@ const AccordionSection = memo( }, [isActiveSection]); return ( -
+
Date: Wed, 6 Mar 2024 16:04:59 +0800 Subject: [PATCH 04/18] chore: added sizing --- lib/components/Accordion/Accordion.scss | 18 ++++++++++++++++-- lib/components/Accordion/index.tsx | 18 ++++++++++++++++-- 2 files changed, 32 insertions(+), 4 deletions(-) diff --git a/lib/components/Accordion/Accordion.scss b/lib/components/Accordion/Accordion.scss index 020e8b15..1dcd44ef 100644 --- a/lib/components/Accordion/Accordion.scss +++ b/lib/components/Accordion/Accordion.scss @@ -10,7 +10,14 @@ $animation-duration: 0.3s; &__wrapper { width: 100%; background-color: var(--general-main-2); - padding: 24px; + + &--default { + padding: 24px; + } + + &--sm { + padding: 16px; + } &--underline { border-bottom: $border; @@ -69,10 +76,17 @@ $animation-duration: 0.3s; transition: max-height $animation-duration ease-out; &--active { - padding-top: 24px; opacity: 1; } + &--sm { + padding-top: 16px; + } + + &--default { + padding-top: 24px; + } + // TODO: For testing purposes only - remove this font-size: map-get($font-sizes, "default"); line-height: map-get($line-heights, "sm"); diff --git a/lib/components/Accordion/index.tsx b/lib/components/Accordion/index.tsx index 969ebd52..834fb9f4 100644 --- a/lib/components/Accordion/index.tsx +++ b/lib/components/Accordion/index.tsx @@ -11,9 +11,12 @@ type AccordionSectionProps = { setActiveIndex: (index: number | null) => void; sectionIndex: number; variant?: AccordionVariants; + sizing?: "default" | "sm"; }; -type AccordionProps = { sections: AccordionSectionProps["section"] }; +type AccordionProps = AccordionSectionProps[] & { + sections: { title: string; content: string }[]; +}; const AccordionVariant = { underline: "deriv-accordion__wrapper--underline", @@ -28,6 +31,7 @@ const AccordionSection = memo( setActiveIndex, sectionIndex, variant = "underline", + sizing = "default", }: AccordionSectionProps) => { const toggleSection = () => { const nextIndex = isActiveSection ? null : sectionIndex; @@ -47,6 +51,11 @@ const AccordionSection = memo( className={clsx( "deriv-accordion__wrapper", AccordionVariant[variant], + { + "deriv-accordion__wrapper--default": + sizing === "default", + "deriv-accordion__wrapper--sm": sizing === "sm", + }, )} >
{ +export const Accordion = ({ sections, ...props }: AccordionProps) => { const [activeIndex, setActiveIndex] = useState(null); return (
@@ -97,6 +110,7 @@ export const Accordion = ({ sections }: AccordionProps) => { isActiveSection={sectionIndex === activeIndex} setActiveIndex={setActiveIndex} sectionIndex={sectionIndex} + {...props} /> ), )} From 7b7a468f42858542987d63b3d451484b71ee130f Mon Sep 17 00:00:00 2001 From: aizad-deriv Date: Wed, 6 Mar 2024 18:22:31 +0800 Subject: [PATCH 05/18] chore: added new props --- lib/components/Accordion/Accordion.scss | 6 +- lib/components/Accordion/index.tsx | 95 ++++++++++++++++--------- 2 files changed, 68 insertions(+), 33 deletions(-) diff --git a/lib/components/Accordion/Accordion.scss b/lib/components/Accordion/Accordion.scss index 1dcd44ef..2398394e 100644 --- a/lib/components/Accordion/Accordion.scss +++ b/lib/components/Accordion/Accordion.scss @@ -73,7 +73,11 @@ $animation-duration: 0.3s; overflow: hidden; max-height: 0px; opacity: 0; - transition: max-height $animation-duration ease-out; + transition: all $animation-duration ease-in-out; + + &--no-animations { + transition: none; + } &--active { opacity: 1; diff --git a/lib/components/Accordion/index.tsx b/lib/components/Accordion/index.tsx index 834fb9f4..67a1a834 100644 --- a/lib/components/Accordion/index.tsx +++ b/lib/components/Accordion/index.tsx @@ -1,37 +1,48 @@ -import { memo, useEffect, useRef, useState } from "react"; +import { memo, useCallback, useEffect, useRef, useState } from "react"; import clsx from "clsx"; import Chevron from "./Chevron.svg"; import "./Accordion.scss"; type AccordionVariants = "underline" | "bordered" | "shadow"; +type AccordionSection = { + title: string; + content: string; +}; + type AccordionSectionProps = { - section: { title: string; content: string }; + disableAnimation?: boolean; isActiveSection: boolean; - setActiveIndex: (index: number | null) => void; + isCompact?: boolean; + section: AccordionSection; sectionIndex: number; + setActiveIndex: (index: number | null) => void; variant?: AccordionVariants; - sizing?: "default" | "sm"; }; -type AccordionProps = AccordionSectionProps[] & { - sections: { title: string; content: string }[]; +type AccordionProps = { + allowMultiple?: boolean; + disableAnimation?: boolean; + isCompact?: AccordionSectionProps["isCompact"]; + sections: AccordionSection[]; + variant?: AccordionSectionProps["variant"]; }; const AccordionVariant = { - underline: "deriv-accordion__wrapper--underline", bordered: "deriv-accordion__wrapper--bordered", shadow: "deriv-accordion__wrapper--shadow", + underline: "deriv-accordion__wrapper--underline", } as const; const AccordionSection = memo( ({ - section, + disableAnimation = false, isActiveSection, - setActiveIndex, + isCompact = false, + section, sectionIndex, + setActiveIndex, variant = "underline", - sizing = "default", }: AccordionSectionProps) => { const toggleSection = () => { const nextIndex = isActiveSection ? null : sectionIndex; @@ -52,9 +63,8 @@ const AccordionSection = memo( "deriv-accordion__wrapper", AccordionVariant[variant], { - "deriv-accordion__wrapper--default": - sizing === "default", - "deriv-accordion__wrapper--sm": sizing === "sm", + "deriv-accordion__wrapper--default": !isCompact, + "deriv-accordion__wrapper--sm": isCompact, }, )} > @@ -81,9 +91,11 @@ const AccordionSection = memo( className={clsx("deriv-accordion__content", { "deriv-accordion__content--active": isActiveSection, "deriv-accordion__content--default": - isActiveSection && sizing === "default", + isActiveSection && !isCompact, "deriv-accordion__content--sm": - isActiveSection && sizing === "sm", + isActiveSection && isCompact, + "deriv-accordion__content--no-animations": + disableAnimation, })} ref={heightRef} style={{ maxHeight: isActiveSection ? height : "0px" }} @@ -95,25 +107,44 @@ const AccordionSection = memo( }, ); -export const Accordion = ({ sections, ...props }: AccordionProps) => { - const [activeIndex, setActiveIndex] = useState(null); +export const Accordion = ({ + allowMultiple = false, + disableAnimation = false, + isCompact = false, + sections, + variant, +}: AccordionProps) => { + const [activeIndexes, setActiveIndexes] = useState([]); + + const setActiveIndex = useCallback( + (index: number) => { + setActiveIndexes((prevIndexes) => { + if (prevIndexes.includes(index)) { + return prevIndexes.filter((i) => i !== index); + } else if (allowMultiple) { + return [...prevIndexes, index]; + } else { + return [index]; + } + }); + }, + [allowMultiple], + ); + return (
- {sections.map( - ( - section: { title: string; content: string }, - sectionIndex: number, - ) => ( - - ), - )} + {sections.map((section, sectionIndex) => ( + setActiveIndex(sectionIndex)} + variant={variant} + /> + ))}
); }; From 02e516c032fd69e3497679c6d9527bbb150553e7 Mon Sep 17 00:00:00 2001 From: aizad-deriv Date: Thu, 7 Mar 2024 11:25:16 +0800 Subject: [PATCH 06/18] chore: added storybook for Accordion component --- src/stories/Accordion.stories.tsx | 108 ++++++++++++++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 src/stories/Accordion.stories.tsx diff --git a/src/stories/Accordion.stories.tsx b/src/stories/Accordion.stories.tsx new file mode 100644 index 00000000..25361236 --- /dev/null +++ b/src/stories/Accordion.stories.tsx @@ -0,0 +1,108 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { Accordion } from "../../lib/main"; + +const meta = { + title: "Components/Accordion", + component: Accordion, + parameters: { + layout: "centered", + }, + tags: ["autodocs"], + args: { + disableAnimation: false, + isCompact: false, + allowMultiple: false, + variant: "underline", + sections: [ + { + title: "Section 1", + content: ` + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id erat sit amet arcu luctus pharetra. Cras scelerisque dolor non justo dignissim efficitur. Nunc non molestie nunc, venenatis maximus ante. Vestibulum mattis faucibus scelerisque. Nulla tempus semper congue. Phasellus maximus iaculis eleifend. Praesent elementum risus augue, eu viverra eros pulvinar sagittis. Aliquam ullamcorper vel metus at ultricies. Phasellus sollicitudin nibh lacus, nec malesuada felis dapibus eu. Suspendisse ut condimentum felis, vitae accumsan nunc. Nunc non bibendum diam, eget molestie metus. Nam orci sem, porttitor sed libero ut, rutrum tristique nulla. Praesent et odio posuere diam ultricies luctus nec eu nibh. Cras sit amet sagittis erat. Nulla viverra rhoncus magna, vitae aliquet ex consectetur at. + `, + }, + { + title: "Section 2", + content: ` + Aliquam vel libero et tortor sagittis condimentum. Nam id varius turpis, id pharetra eros. Mauris purus tortor, mattis quis eros in, molestie pharetra lorem. Morbi viverra urna purus, nec ornare purus aliquet et. Curabitur tempus nulla id leo eleifend, sit amet lobortis libero interdum. Proin nulla neque, imperdiet nec metus in, volutpat accumsan sem. Curabitur imperdiet et turpis at condimentum. Nunc nec quam fringilla, porta elit nec, pellentesque ligula. + + `, + }, + { + title: "Section 3", + content: ` + Sed lobortis rutrum dui ut consequat. Vestibulum sollicitudin orci eget risus volutpat, quis congue neque pharetra. Nulla sed justo commodo tellus tincidunt lobortis. Nunc tortor augue, consequat eu odio nec, accumsan accumsan lorem. Suspendisse maximus ultricies turpis, consequat mollis diam tempor ut. Fusce a elementum est. Nulla odio elit, malesuada eu leo sit amet, malesuada accumsan magna. Maecenas molestie bibendum lorem, et ullamcorper dui euismod eget. Proin eget dui dapibus lacus fermentum mattis vitae iaculis lectus. Pellentesque in risus in nibh commodo imperdiet. Morbi at tempus dui. Mauris pellentesque mauris id erat blandit, ac ultrices metus efficitur. Donec porttitor neque eget elit volutpat gravida. + + `, + }, + ], + }, + argTypes: { + variant: { + options: ["underline", "bordered", "shadow"], + control: { type: "select" }, + }, + sections: { + control: { + disable: true, + }, + }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Underline: Story = { + args: { + variant: "underline", + }, + render: (args) => ( +
+ +
+ ), +}; + +export const Bordered: Story = { + args: { + variant: "bordered", + }, + render: (args) => ( +
+ +
+ ), +}; + +export const Shadow: Story = { + args: { + variant: "shadow", + }, + render: (args) => ( +
+ +
+ ), +}; + +export const DisabledAnimation: Story = { + args: { + disableAnimation: true, + }, + render: (args) => ( +
+ +
+ ), +}; + +export const Compact: Story = { + args: { + isCompact: true, + }, + render: (args) => ( +
+ +
+ ), +}; From 13461ab43e8732a9358a3fa03fb15fec4e9d80af Mon Sep 17 00:00:00 2001 From: aizad-deriv Date: Thu, 7 Mar 2024 11:40:58 +0800 Subject: [PATCH 07/18] chore: change props inside of Accordion title and content --- lib/components/Accordion/index.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/lib/components/Accordion/index.tsx b/lib/components/Accordion/index.tsx index 67a1a834..7bfd6216 100644 --- a/lib/components/Accordion/index.tsx +++ b/lib/components/Accordion/index.tsx @@ -1,4 +1,11 @@ -import { memo, useCallback, useEffect, useRef, useState } from "react"; +import { + ReactNode, + memo, + useCallback, + useEffect, + useRef, + useState, +} from "react"; import clsx from "clsx"; import Chevron from "./Chevron.svg"; import "./Accordion.scss"; @@ -6,8 +13,8 @@ import "./Accordion.scss"; type AccordionVariants = "underline" | "bordered" | "shadow"; type AccordionSection = { - title: string; - content: string; + title: ReactNode; + content: ReactNode; }; type AccordionSectionProps = { From aea0f587ab98e52e306f50f23d7d8c051b45e53c Mon Sep 17 00:00:00 2001 From: aizad-deriv Date: Thu, 7 Mar 2024 11:58:56 +0800 Subject: [PATCH 08/18] chore: remove redundant styles --- lib/components/Accordion/Accordion.scss | 9 --------- 1 file changed, 9 deletions(-) diff --git a/lib/components/Accordion/Accordion.scss b/lib/components/Accordion/Accordion.scss index 2398394e..85860a31 100644 --- a/lib/components/Accordion/Accordion.scss +++ b/lib/components/Accordion/Accordion.scss @@ -46,10 +46,6 @@ $animation-duration: 0.3s; align-items: center; justify-content: space-between; - // TODO: For testing purposes only - remove this - font-size: map-get($font-sizes, "md"); - color: var(--text-general); - &--border-bottom { border-bottom: 1px solid var(--border-normal-1); } @@ -90,10 +86,5 @@ $animation-duration: 0.3s; &--default { padding-top: 24px; } - - // TODO: For testing purposes only - remove this - font-size: map-get($font-sizes, "default"); - line-height: map-get($line-heights, "sm"); - color: var(--text-general); } } From 0627157d38f2397b1668640f91eecb0e794130eb Mon Sep 17 00:00:00 2001 From: aizad-deriv Date: Thu, 7 Mar 2024 16:57:03 +0800 Subject: [PATCH 09/18] chore: update css values based on latest changes --- lib/components/Accordion/Accordion.scss | 6 +++--- src/stories/Accordion.stories.tsx | 11 +++++++++++ 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/lib/components/Accordion/Accordion.scss b/lib/components/Accordion/Accordion.scss index 85860a31..0a562bb5 100644 --- a/lib/components/Accordion/Accordion.scss +++ b/lib/components/Accordion/Accordion.scss @@ -1,4 +1,4 @@ -$border: 1px solid var(--general-active); +$border: 1px solid var(--du-general-active); $animation-duration: 0.3s; .deriv-accordion { @@ -9,7 +9,7 @@ $animation-duration: 0.3s; &__wrapper { width: 100%; - background-color: var(--general-main-2); + background-color: var(--du-general-main-2); &--default { padding: 24px; @@ -47,7 +47,7 @@ $animation-duration: 0.3s; justify-content: space-between; &--border-bottom { - border-bottom: 1px solid var(--border-normal-1); + border-bottom: 1px solid var(--du-border-normal-1); } } diff --git a/src/stories/Accordion.stories.tsx b/src/stories/Accordion.stories.tsx index 25361236..29242c2a 100644 --- a/src/stories/Accordion.stories.tsx +++ b/src/stories/Accordion.stories.tsx @@ -49,6 +49,17 @@ const meta = { }, } satisfies Meta; +export const AllowMultiple: Story = { + args: { + allowMultiple: true, + }, + render: (args) => ( +
+ +
+ ), +}; + export default meta; type Story = StoryObj; From 9061554481a569b630dd998564685054006cabb7 Mon Sep 17 00:00:00 2001 From: aizad-deriv Date: Fri, 8 Mar 2024 16:34:38 +0800 Subject: [PATCH 10/18] chore: refactor styles and add changes to storybook --- lib/components/Accordion/Accordion.scss | 21 +++++++--------- lib/components/Accordion/index.tsx | 32 ++++++++++++------------- src/stories/Accordion.stories.tsx | 22 ++++++++++++----- 3 files changed, 40 insertions(+), 35 deletions(-) diff --git a/lib/components/Accordion/Accordion.scss b/lib/components/Accordion/Accordion.scss index 0a562bb5..73805465 100644 --- a/lib/components/Accordion/Accordion.scss +++ b/lib/components/Accordion/Accordion.scss @@ -10,18 +10,16 @@ $animation-duration: 0.3s; &__wrapper { width: 100%; background-color: var(--du-general-main-2); + padding: 24px; - &--default { - padding: 24px; - } - - &--sm { + &--compact { padding: 16px; } &--underline { border-bottom: $border; } + &--shadow, &--bordered { border-radius: $border-radius-2; @@ -31,9 +29,11 @@ $animation-duration: 0.3s; margin-bottom: 0; } } + &--bordered { border: $border; } + &--shadow { box-shadow: $deriv-box-shadow; } @@ -77,14 +77,11 @@ $animation-duration: 0.3s; &--active { opacity: 1; - } - - &--sm { - padding-top: 16px; - } - - &--default { padding-top: 24px; + + .deriv-accordion__content--compact { + padding-top: 16px; + } } } } diff --git a/lib/components/Accordion/index.tsx b/lib/components/Accordion/index.tsx index 7bfd6216..2c325419 100644 --- a/lib/components/Accordion/index.tsx +++ b/lib/components/Accordion/index.tsx @@ -70,8 +70,7 @@ const AccordionSection = memo( "deriv-accordion__wrapper", AccordionVariant[variant], { - "deriv-accordion__wrapper--default": !isCompact, - "deriv-accordion__wrapper--sm": isCompact, + "deriv-accordion__wrapper--compact": isCompact, }, )} > @@ -94,21 +93,20 @@ const AccordionSection = memo( />
-
- {section.content} -
+ {isActiveSection && ( +
+ {section.content} +
+ )}
); }, diff --git a/src/stories/Accordion.stories.tsx b/src/stories/Accordion.stories.tsx index 29242c2a..9e763d54 100644 --- a/src/stories/Accordion.stories.tsx +++ b/src/stories/Accordion.stories.tsx @@ -49,12 +49,22 @@ const meta = { }, } satisfies Meta; +const styles = { + width: "500px", + color: "var(--du-text-general)", +}; + +const props = { + className: "theme--light", + style: styles, +}; + export const AllowMultiple: Story = { args: { allowMultiple: true, }, render: (args) => ( -
+
), @@ -68,7 +78,7 @@ export const Underline: Story = { variant: "underline", }, render: (args) => ( -
+
), @@ -79,7 +89,7 @@ export const Bordered: Story = { variant: "bordered", }, render: (args) => ( -
+
), @@ -90,7 +100,7 @@ export const Shadow: Story = { variant: "shadow", }, render: (args) => ( -
+
), @@ -101,7 +111,7 @@ export const DisabledAnimation: Story = { disableAnimation: true, }, render: (args) => ( -
+
), @@ -112,7 +122,7 @@ export const Compact: Story = { isCompact: true, }, render: (args) => ( -
+
), From f74d5afa4b6dd0fc46cb432beef505f3bfa8bf59 Mon Sep 17 00:00:00 2001 From: aizad-deriv Date: Tue, 2 Apr 2024 10:12:58 +0800 Subject: [PATCH 11/18] chore: update component --- lib/components/Accordion/Accordion.scss | 3 +- lib/components/Accordion/index.tsx | 6 +- lib/components/Accordioon/Accordion.scss | 84 ++++++++++++++++++++++++ lib/components/Accordioon/Chevron.svg | 3 + lib/components/Accordioon/index.tsx | 80 ++++++++++++++++++++++ src/stories/Accordion.stories.tsx | 17 ++--- 6 files changed, 176 insertions(+), 17 deletions(-) create mode 100644 lib/components/Accordioon/Accordion.scss create mode 100644 lib/components/Accordioon/Chevron.svg create mode 100644 lib/components/Accordioon/index.tsx diff --git a/lib/components/Accordion/Accordion.scss b/lib/components/Accordion/Accordion.scss index 73805465..a8326dcd 100644 --- a/lib/components/Accordion/Accordion.scss +++ b/lib/components/Accordion/Accordion.scss @@ -66,8 +66,7 @@ $animation-duration: 0.3s; &__content { width: 100%; - overflow: hidden; - max-height: 0px; + overflow: auto; opacity: 0; transition: all $animation-duration ease-in-out; diff --git a/lib/components/Accordion/index.tsx b/lib/components/Accordion/index.tsx index 2c325419..6798e49b 100644 --- a/lib/components/Accordion/index.tsx +++ b/lib/components/Accordion/index.tsx @@ -78,12 +78,10 @@ const AccordionSection = memo( className={clsx("deriv-accordion__header", { "deriv-accordion__header--active": isActiveSection, })} + onClick={toggleSection} >
{section.title}
-
+
+ + diff --git a/lib/components/Accordioon/index.tsx b/lib/components/Accordioon/index.tsx new file mode 100644 index 00000000..7b0f6121 --- /dev/null +++ b/lib/components/Accordioon/index.tsx @@ -0,0 +1,80 @@ +import React, { useState, useRef, ReactNode, useEffect } from "react"; +import Chevron from "./Chevron.svg"; +import clsx from "clsx"; +import "./Accordion.scss"; + +type AccordionVariants = "underline" | "bordered" | "shadow"; + +type AccordionProps = { + children: ReactNode; + defaultOpen?: boolean; + isCompact?: boolean; + title: string; + variant?: AccordionVariants; +}; + +const AccordionVariant = { + bordered: "deriv-accordion--bordered", + shadow: "deriv-accordion--shadow", + underline: "deriv-accordion--underline", +} as const; + +export const Accordion = ({ + defaultOpen = false, + children, + isCompact = false, + title, + variant = "underline", +}: AccordionProps) => { + const [active, setActive] = useState(defaultOpen); + const [setHeight, setHeightState] = useState(defaultOpen ? "auto" : "0px"); + + const content = useRef(null); + + useEffect(() => { + const scrollHeight = content?.current?.scrollHeight; + setHeightState(active ? `${scrollHeight}px` : "0px"); + }, [active]); + + function toggleAccordion() { + setActive(!active); + } + + return ( +
+ +
+
+ {children} +
+
+
+ ); +}; diff --git a/src/stories/Accordion.stories.tsx b/src/stories/Accordion.stories.tsx index 9e763d54..2801dfbf 100644 --- a/src/stories/Accordion.stories.tsx +++ b/src/stories/Accordion.stories.tsx @@ -16,23 +16,18 @@ const meta = { sections: [ { title: "Section 1", - content: ` - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id erat sit amet arcu luctus pharetra. Cras scelerisque dolor non justo dignissim efficitur. Nunc non molestie nunc, venenatis maximus ante. Vestibulum mattis faucibus scelerisque. Nulla tempus semper congue. Phasellus maximus iaculis eleifend. Praesent elementum risus augue, eu viverra eros pulvinar sagittis. Aliquam ullamcorper vel metus at ultricies. Phasellus sollicitudin nibh lacus, nec malesuada felis dapibus eu. Suspendisse ut condimentum felis, vitae accumsan nunc. Nunc non bibendum diam, eget molestie metus. Nam orci sem, porttitor sed libero ut, rutrum tristique nulla. Praesent et odio posuere diam ultricies luctus nec eu nibh. Cras sit amet sagittis erat. Nulla viverra rhoncus magna, vitae aliquet ex consectetur at. - `, + content: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id erat sit amet arcu luctus pharetra. Cras scelerisque dolor non justo dignissim efficitur. Nunc non molestie nunc, venenatis maximus ante. Vestibulum mattis faucibus scelerisque. Nulla tempus semper congue. Phasellus maximus iaculis eleifend. Praesent elementum risus augue, eu viverra eros pulvinar sagittis. Aliquam ullamcorper vel metus at ultricies. Phasellus sollicitudin nibh lacus, nec malesuada felis dapibus eu. Suspendisse ut condimentum felis, vitae accumsan nunc. Nunc non bibendum diam, eget molestie metus. Nam orci sem, porttitor sed libero ut, rutrum tristique nulla. Praesent et odio posuere diam ultricies luctus nec eu nibh. Cras sit amet sagittis erat. Nulla viverra rhoncus magna, vitae aliquet ex consectetur at.", }, { title: "Section 2", - content: ` - Aliquam vel libero et tortor sagittis condimentum. Nam id varius turpis, id pharetra eros. Mauris purus tortor, mattis quis eros in, molestie pharetra lorem. Morbi viverra urna purus, nec ornare purus aliquet et. Curabitur tempus nulla id leo eleifend, sit amet lobortis libero interdum. Proin nulla neque, imperdiet nec metus in, volutpat accumsan sem. Curabitur imperdiet et turpis at condimentum. Nunc nec quam fringilla, porta elit nec, pellentesque ligula. - - `, + content: + "Aliquam vel libero et tortor sagittis condimentum. Nam id varius turpis, id pharetra eros. Mauris purus tortor, mattis quis eros in, molestie pharetra lorem. Morbi viverra urna purus, nec ornare purus aliquet et. Curabitur tempus nulla id leo eleifend, sit amet lobortis libero interdum. Proin nulla neque, imperdiet nec metus in, volutpat accumsan sem. Curabitur imperdiet et turpis at condimentum. Nunc nec quam fringilla, porta elit nec, pellentesque ligula.", }, { title: "Section 3", - content: ` - Sed lobortis rutrum dui ut consequat. Vestibulum sollicitudin orci eget risus volutpat, quis congue neque pharetra. Nulla sed justo commodo tellus tincidunt lobortis. Nunc tortor augue, consequat eu odio nec, accumsan accumsan lorem. Suspendisse maximus ultricies turpis, consequat mollis diam tempor ut. Fusce a elementum est. Nulla odio elit, malesuada eu leo sit amet, malesuada accumsan magna. Maecenas molestie bibendum lorem, et ullamcorper dui euismod eget. Proin eget dui dapibus lacus fermentum mattis vitae iaculis lectus. Pellentesque in risus in nibh commodo imperdiet. Morbi at tempus dui. Mauris pellentesque mauris id erat blandit, ac ultrices metus efficitur. Donec porttitor neque eget elit volutpat gravida. - - `, + content: + "Sed lobortis rutrum dui ut consequat. Vestibulum sollicitudin orci eget risus volutpat, quis congue neque pharetra. Nulla sed justo commodo tellus tincidunt lobortis. Nunc tortor augue, consequat eu odio nec, accumsan accumsan lorem. Suspendisse maximus ultricies turpis, consequat mollis diam tempor ut. Fusce a elementum est. Nulla odio elit, malesuada eu leo sit amet, malesuada accumsan magna. Maecenas molestie bibendum lorem, et ullamcorper dui euismod eget. Proin eget dui dapibus lacus fermentum mattis vitae iaculis lectus. Pellentesque in risus in nibh commodo imperdiet. Morbi at tempus dui. Mauris pellentesque mauris id erat blandit, ac ultrices metus efficitur. Donec porttitor neque eget elit volutpat gravida.", }, ], }, From 2c7bfbbca24735052b1a318022b607e8a9557454 Mon Sep 17 00:00:00 2001 From: aizad-deriv Date: Tue, 2 Apr 2024 10:39:26 +0800 Subject: [PATCH 12/18] chore: replace existing accordion with new one --- lib/components/Accordion/Accordion.scss | 80 +++++----- lib/components/Accordion/index.tsx | 181 +++++++---------------- lib/components/Accordioon/Accordion.scss | 84 ----------- lib/components/Accordioon/Chevron.svg | 3 - lib/components/Accordioon/index.tsx | 80 ---------- 5 files changed, 92 insertions(+), 336 deletions(-) delete mode 100644 lib/components/Accordioon/Accordion.scss delete mode 100644 lib/components/Accordioon/Chevron.svg delete mode 100644 lib/components/Accordioon/index.tsx diff --git a/lib/components/Accordion/Accordion.scss b/lib/components/Accordion/Accordion.scss index a8326dcd..55d75268 100644 --- a/lib/components/Accordion/Accordion.scss +++ b/lib/components/Accordion/Accordion.scss @@ -1,3 +1,4 @@ +/* Style the accordion section */ $border: 1px solid var(--du-general-active); $animation-duration: 0.3s; @@ -6,37 +7,33 @@ $animation-duration: 0.3s; display: inline-flex; flex-direction: column; min-width: 100%; + background-color: var(--du-general-main-2); + padding: 24px; - &__wrapper { - width: 100%; - background-color: var(--du-general-main-2); - padding: 24px; - - &--compact { - padding: 16px; - } + &--compact { + padding: 16px; + } - &--underline { - border-bottom: $border; - } + &--underline { + border-bottom: $border; + } - &--shadow, - &--bordered { - border-radius: $border-radius-2; - margin-bottom: 8px; + &--shadow, + &--bordered { + border-radius: $border-radius-2; + margin-bottom: 8px; - &:last-child { - margin-bottom: 0; - } + &:last-child { + margin-bottom: 0; } + } - &--bordered { - border: $border; - } + &--bordered { + border: $border; + } - &--shadow { - box-shadow: $deriv-box-shadow; - } + &--shadow { + box-shadow: $deriv-box-shadow; } &__header { @@ -45,42 +42,43 @@ $animation-duration: 0.3s; display: flex; align-items: center; justify-content: space-between; - - &--border-bottom { - border-bottom: 1px solid var(--du-border-normal-1); - } + color: var(--du-text-general); + cursor: pointer; } &__icon { margin-left: auto; display: inline-block; transition: all $animation-duration ease-in-out; - &:hover { - cursor: pointer; - } &--active { transform: rotate(-180deg); } } - &__content { width: 100%; overflow: auto; opacity: 0; - transition: all $animation-duration ease-in-out; - - &--no-animations { - transition: none; - } + background-color: white; + transition: all $animation-duration ease; &--active { opacity: 1; - padding-top: 24px; + } + } + + &__text { + margin-top: 24px; + color: var(--du-text-general); - .deriv-accordion__content--compact { - padding-top: 16px; - } + &--compact { + margin-top: 16px; } } } +.accordion__section { + position: relative; + display: inline-flex; + flex-direction: column; + min-width: 100%; +} diff --git a/lib/components/Accordion/index.tsx b/lib/components/Accordion/index.tsx index 6798e49b..319acaeb 100644 --- a/lib/components/Accordion/index.tsx +++ b/lib/components/Accordion/index.tsx @@ -1,153 +1,78 @@ -import { - ReactNode, - memo, - useCallback, - useEffect, - useRef, - useState, -} from "react"; -import clsx from "clsx"; +import React, { useState, useRef, ReactNode, useEffect } from "react"; import Chevron from "./Chevron.svg"; +import clsx from "clsx"; import "./Accordion.scss"; type AccordionVariants = "underline" | "bordered" | "shadow"; -type AccordionSection = { - title: ReactNode; - content: ReactNode; -}; - -type AccordionSectionProps = { - disableAnimation?: boolean; - isActiveSection: boolean; +type AccordionProps = { + children: ReactNode; + defaultOpen?: boolean; isCompact?: boolean; - section: AccordionSection; - sectionIndex: number; - setActiveIndex: (index: number | null) => void; + title: string; variant?: AccordionVariants; }; -type AccordionProps = { - allowMultiple?: boolean; - disableAnimation?: boolean; - isCompact?: AccordionSectionProps["isCompact"]; - sections: AccordionSection[]; - variant?: AccordionSectionProps["variant"]; -}; - const AccordionVariant = { - bordered: "deriv-accordion__wrapper--bordered", - shadow: "deriv-accordion__wrapper--shadow", - underline: "deriv-accordion__wrapper--underline", + bordered: "deriv-accordion--bordered", + shadow: "deriv-accordion--shadow", + underline: "deriv-accordion--underline", } as const; -const AccordionSection = memo( - ({ - disableAnimation = false, - isActiveSection, - isCompact = false, - section, - sectionIndex, - setActiveIndex, - variant = "underline", - }: AccordionSectionProps) => { - const toggleSection = () => { - const nextIndex = isActiveSection ? null : sectionIndex; - setActiveIndex(nextIndex); - }; +export const Accordion = ({ + defaultOpen = false, + children, + isCompact = false, + title, + variant = "underline", +}: AccordionProps) => { + const [active, setActive] = useState(defaultOpen); + const [setHeight, setHeightState] = useState(defaultOpen ? "auto" : "0px"); + + const content = useRef(null); - const [height, setHeight] = useState(""); - const heightRef = useRef(null); + useEffect(() => { + const scrollHeight = content?.current?.scrollHeight; + setHeightState(active ? `${scrollHeight}px` : "0px"); + }, [active]); - useEffect(() => { - const scrollHeight = heightRef.current?.scrollHeight; - setHeight(`${scrollHeight}px`); - }, [isActiveSection]); + const toggleAccordion = () => setActive(!active); - return ( + return ( +
+
-
{section.title}
-
- -
+ {children}
- {isActiveSection && ( -
- {section.content} -
- )}
- ); - }, -); - -export const Accordion = ({ - allowMultiple = false, - disableAnimation = false, - isCompact = false, - sections, - variant, -}: AccordionProps) => { - const [activeIndexes, setActiveIndexes] = useState([]); - - const setActiveIndex = useCallback( - (index: number) => { - setActiveIndexes((prevIndexes) => { - if (prevIndexes.includes(index)) { - return prevIndexes.filter((i) => i !== index); - } else if (allowMultiple) { - return [...prevIndexes, index]; - } else { - return [index]; - } - }); - }, - [allowMultiple], - ); - - return ( -
- {sections.map((section, sectionIndex) => ( - setActiveIndex(sectionIndex)} - variant={variant} - /> - ))}
); }; diff --git a/lib/components/Accordioon/Accordion.scss b/lib/components/Accordioon/Accordion.scss deleted file mode 100644 index 55d75268..00000000 --- a/lib/components/Accordioon/Accordion.scss +++ /dev/null @@ -1,84 +0,0 @@ -/* Style the accordion section */ -$border: 1px solid var(--du-general-active); -$animation-duration: 0.3s; - -.deriv-accordion { - position: relative; - display: inline-flex; - flex-direction: column; - min-width: 100%; - background-color: var(--du-general-main-2); - padding: 24px; - - &--compact { - padding: 16px; - } - - &--underline { - border-bottom: $border; - } - - &--shadow, - &--bordered { - border-radius: $border-radius-2; - margin-bottom: 8px; - - &:last-child { - margin-bottom: 0; - } - } - - &--bordered { - border: $border; - } - - &--shadow { - box-shadow: $deriv-box-shadow; - } - - &__header { - outline: none; - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; - color: var(--du-text-general); - cursor: pointer; - } - - &__icon { - margin-left: auto; - display: inline-block; - transition: all $animation-duration ease-in-out; - - &--active { - transform: rotate(-180deg); - } - } - &__content { - width: 100%; - overflow: auto; - opacity: 0; - background-color: white; - transition: all $animation-duration ease; - - &--active { - opacity: 1; - } - } - - &__text { - margin-top: 24px; - color: var(--du-text-general); - - &--compact { - margin-top: 16px; - } - } -} -.accordion__section { - position: relative; - display: inline-flex; - flex-direction: column; - min-width: 100%; -} diff --git a/lib/components/Accordioon/Chevron.svg b/lib/components/Accordioon/Chevron.svg deleted file mode 100644 index 7bb0e7fa..00000000 --- a/lib/components/Accordioon/Chevron.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/lib/components/Accordioon/index.tsx b/lib/components/Accordioon/index.tsx deleted file mode 100644 index 7b0f6121..00000000 --- a/lib/components/Accordioon/index.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import React, { useState, useRef, ReactNode, useEffect } from "react"; -import Chevron from "./Chevron.svg"; -import clsx from "clsx"; -import "./Accordion.scss"; - -type AccordionVariants = "underline" | "bordered" | "shadow"; - -type AccordionProps = { - children: ReactNode; - defaultOpen?: boolean; - isCompact?: boolean; - title: string; - variant?: AccordionVariants; -}; - -const AccordionVariant = { - bordered: "deriv-accordion--bordered", - shadow: "deriv-accordion--shadow", - underline: "deriv-accordion--underline", -} as const; - -export const Accordion = ({ - defaultOpen = false, - children, - isCompact = false, - title, - variant = "underline", -}: AccordionProps) => { - const [active, setActive] = useState(defaultOpen); - const [setHeight, setHeightState] = useState(defaultOpen ? "auto" : "0px"); - - const content = useRef(null); - - useEffect(() => { - const scrollHeight = content?.current?.scrollHeight; - setHeightState(active ? `${scrollHeight}px` : "0px"); - }, [active]); - - function toggleAccordion() { - setActive(!active); - } - - return ( -
- -
-
- {children} -
-
-
- ); -}; From fea6511a602246b20faab6f74984b1355ca91ea0 Mon Sep 17 00:00:00 2001 From: aizad-deriv Date: Tue, 2 Apr 2024 10:45:04 +0800 Subject: [PATCH 13/18] chore: updated storybook --- src/stories/Accordion.stories.tsx | 74 ++++++++++++------------------- 1 file changed, 29 insertions(+), 45 deletions(-) diff --git a/src/stories/Accordion.stories.tsx b/src/stories/Accordion.stories.tsx index 2801dfbf..97ab8a06 100644 --- a/src/stories/Accordion.stories.tsx +++ b/src/stories/Accordion.stories.tsx @@ -9,43 +9,23 @@ const meta = { }, tags: ["autodocs"], args: { - disableAnimation: false, + defaultOpen: false, isCompact: false, - allowMultiple: false, + title: "What is your return policy?", variant: "underline", - sections: [ - { - title: "Section 1", - content: - "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id erat sit amet arcu luctus pharetra. Cras scelerisque dolor non justo dignissim efficitur. Nunc non molestie nunc, venenatis maximus ante. Vestibulum mattis faucibus scelerisque. Nulla tempus semper congue. Phasellus maximus iaculis eleifend. Praesent elementum risus augue, eu viverra eros pulvinar sagittis. Aliquam ullamcorper vel metus at ultricies. Phasellus sollicitudin nibh lacus, nec malesuada felis dapibus eu. Suspendisse ut condimentum felis, vitae accumsan nunc. Nunc non bibendum diam, eget molestie metus. Nam orci sem, porttitor sed libero ut, rutrum tristique nulla. Praesent et odio posuere diam ultricies luctus nec eu nibh. Cras sit amet sagittis erat. Nulla viverra rhoncus magna, vitae aliquet ex consectetur at.", - }, - { - title: "Section 2", - content: - "Aliquam vel libero et tortor sagittis condimentum. Nam id varius turpis, id pharetra eros. Mauris purus tortor, mattis quis eros in, molestie pharetra lorem. Morbi viverra urna purus, nec ornare purus aliquet et. Curabitur tempus nulla id leo eleifend, sit amet lobortis libero interdum. Proin nulla neque, imperdiet nec metus in, volutpat accumsan sem. Curabitur imperdiet et turpis at condimentum. Nunc nec quam fringilla, porta elit nec, pellentesque ligula.", - }, - { - title: "Section 3", - content: - "Sed lobortis rutrum dui ut consequat. Vestibulum sollicitudin orci eget risus volutpat, quis congue neque pharetra. Nulla sed justo commodo tellus tincidunt lobortis. Nunc tortor augue, consequat eu odio nec, accumsan accumsan lorem. Suspendisse maximus ultricies turpis, consequat mollis diam tempor ut. Fusce a elementum est. Nulla odio elit, malesuada eu leo sit amet, malesuada accumsan magna. Maecenas molestie bibendum lorem, et ullamcorper dui euismod eget. Proin eget dui dapibus lacus fermentum mattis vitae iaculis lectus. Pellentesque in risus in nibh commodo imperdiet. Morbi at tempus dui. Mauris pellentesque mauris id erat blandit, ac ultrices metus efficitur. Donec porttitor neque eget elit volutpat gravida.", - }, - ], }, argTypes: { + title: { control: { type: "text" } }, + defaultOpen: { control: { type: "boolean" } }, variant: { options: ["underline", "bordered", "shadow"], control: { type: "select" }, }, - sections: { - control: { - disable: true, - }, - }, }, } satisfies Meta; const styles = { - width: "500px", + width: "800px", color: "var(--du-text-general)", }; @@ -54,17 +34,6 @@ const props = { style: styles, }; -export const AllowMultiple: Story = { - args: { - allowMultiple: true, - }, - render: (args) => ( -
- -
- ), -}; - export default meta; type Story = StoryObj; @@ -74,7 +43,10 @@ export const Underline: Story = { }, render: (args) => (
- + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. +
), }; @@ -85,7 +57,10 @@ export const Bordered: Story = { }, render: (args) => (
- + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. +
), }; @@ -96,29 +71,38 @@ export const Shadow: Story = { }, render: (args) => (
- + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. +
), }; -export const DisabledAnimation: Story = { +export const Compact: Story = { args: { - disableAnimation: true, + isCompact: true, }, render: (args) => (
- + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. +
), }; -export const Compact: Story = { +export const DefaultOpen: Story = { args: { - isCompact: true, + defaultOpen: true, }, render: (args) => (
- + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. +
), }; From 3f61c0672e72d3c07d6c534dfc576d23bce31bf3 Mon Sep 17 00:00:00 2001 From: aizad-deriv Date: Tue, 2 Apr 2024 10:59:26 +0800 Subject: [PATCH 14/18] chore: fix types in storybook --- src/stories/Accordion.stories.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/stories/Accordion.stories.tsx b/src/stories/Accordion.stories.tsx index 97ab8a06..a5faec69 100644 --- a/src/stories/Accordion.stories.tsx +++ b/src/stories/Accordion.stories.tsx @@ -9,6 +9,8 @@ const meta = { }, tags: ["autodocs"], args: { + children: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", defaultOpen: false, isCompact: false, title: "What is your return policy?", From ffc37b6436bdde27d92f56c0b05b665635798da3 Mon Sep 17 00:00:00 2001 From: aizad-deriv Date: Tue, 2 Apr 2024 11:09:44 +0800 Subject: [PATCH 15/18] chore: updated structure based on latest changes --- {lib => src}/components/Accordion/Accordion.scss | 0 {lib => src}/components/Accordion/Chevron.svg | 0 {lib => src}/components/Accordion/index.tsx | 0 src/main.ts | 6 +++--- 4 files changed, 3 insertions(+), 3 deletions(-) rename {lib => src}/components/Accordion/Accordion.scss (100%) rename {lib => src}/components/Accordion/Chevron.svg (100%) rename {lib => src}/components/Accordion/index.tsx (100%) diff --git a/lib/components/Accordion/Accordion.scss b/src/components/Accordion/Accordion.scss similarity index 100% rename from lib/components/Accordion/Accordion.scss rename to src/components/Accordion/Accordion.scss diff --git a/lib/components/Accordion/Chevron.svg b/src/components/Accordion/Chevron.svg similarity index 100% rename from lib/components/Accordion/Chevron.svg rename to src/components/Accordion/Chevron.svg diff --git a/lib/components/Accordion/index.tsx b/src/components/Accordion/index.tsx similarity index 100% rename from lib/components/Accordion/index.tsx rename to src/components/Accordion/index.tsx diff --git a/src/main.ts b/src/main.ts index ddb26a87..6a5d303b 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,10 +1,10 @@ export { Accordion } from "./components/Accordion"; export { ActionScreen } from "./components/ActionScreen"; export { Button } from "./components/Button"; -export {Badge} from "./components/Badge"; +export { Badge } from "./components/Badge"; export { Checkbox } from "./components/Checkbox"; export { Divider } from "./components/Divider"; -export { Dialog } from "./components/Dialog" +export { Dialog } from "./components/Dialog"; export { Dropdown } from "./components/Dropdown"; export { InlineMessage } from "./components/InlineMessage"; export { Input } from "./components/Input"; @@ -20,5 +20,5 @@ export { Text } from "./components/Text"; export { TextArea } from "./components/TextArea"; export { ToggleSwitch } from "./components/ToggleSwitch"; export { Tooltip } from "./components/Tooltip"; -export { useDevice,useOnClickOutside } from "./hooks"; +export { useDevice, useOnClickOutside } from "./hooks"; export { VerticalTab, VerticalTabItems } from "./components/VerticalTab"; From 8e0b0927807e73754f5aef9a5c3fa2b7647ac4b4 Mon Sep 17 00:00:00 2001 From: aizad-deriv Date: Tue, 2 Apr 2024 11:30:31 +0800 Subject: [PATCH 16/18] chore: update import statement in storybook --- stories/Accordion.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stories/Accordion.stories.tsx b/stories/Accordion.stories.tsx index a5faec69..a4b1b925 100644 --- a/stories/Accordion.stories.tsx +++ b/stories/Accordion.stories.tsx @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from "@storybook/react"; -import { Accordion } from "../../lib/main"; +import { Accordion } from "../src/main"; const meta = { title: "Components/Accordion", From 8067980000c9c08731c9ce1b4c387dd2ed3a2a05 Mon Sep 17 00:00:00 2001 From: aizad-deriv Date: Tue, 2 Apr 2024 13:01:51 +0800 Subject: [PATCH 17/18] chores: added test cases --- .../Accordion/__test__/Accordion.test.tsx | 30 +++++++++++++++++++ src/components/Accordion/index.tsx | 1 + 2 files changed, 31 insertions(+) create mode 100644 src/components/Accordion/__test__/Accordion.test.tsx diff --git a/src/components/Accordion/__test__/Accordion.test.tsx b/src/components/Accordion/__test__/Accordion.test.tsx new file mode 100644 index 00000000..b0e413ce --- /dev/null +++ b/src/components/Accordion/__test__/Accordion.test.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import { render, fireEvent, screen } from "@testing-library/react"; +import { Accordion } from ".."; + +describe("Accordion", () => { + it("renders correctly", () => { + const { getByText } = render( + Test Content, + ); + + expect(getByText("Test Title")).toBeInTheDocument(); + }); + + it("opens and closes when the header is clicked", () => { + const { getByRole } = render( + Test Content, + ); + + screen.debug(); + const button = getByRole("button"); + + expect(button).toHaveAttribute("aria-expanded", "false"); + + fireEvent.click(button); + expect(button).toHaveAttribute("aria-expanded", "true"); + + fireEvent.click(button); + expect(button).toHaveAttribute("aria-expanded", "false"); + }); +}); diff --git a/src/components/Accordion/index.tsx b/src/components/Accordion/index.tsx index 319acaeb..3c8361ef 100644 --- a/src/components/Accordion/index.tsx +++ b/src/components/Accordion/index.tsx @@ -49,6 +49,7 @@ export const Accordion = ({ "deriv-accordion__header--active": active, })} onClick={toggleAccordion} + aria-expanded={active} >

{title}

Date: Tue, 2 Apr 2024 16:12:46 +0800 Subject: [PATCH 18/18] chore: resolve comments --- .../Accordion/__test__/Accordion.test.tsx | 87 +++++++++++++++++-- 1 file changed, 82 insertions(+), 5 deletions(-) diff --git a/src/components/Accordion/__test__/Accordion.test.tsx b/src/components/Accordion/__test__/Accordion.test.tsx index b0e413ce..2fea2b70 100644 --- a/src/components/Accordion/__test__/Accordion.test.tsx +++ b/src/components/Accordion/__test__/Accordion.test.tsx @@ -1,6 +1,7 @@ import React from "react"; -import { render, fireEvent, screen } from "@testing-library/react"; +import { render } from "@testing-library/react"; import { Accordion } from ".."; +import userEvent from "@testing-library/user-event"; describe("Accordion", () => { it("renders correctly", () => { @@ -11,20 +12,96 @@ describe("Accordion", () => { expect(getByText("Test Title")).toBeInTheDocument(); }); - it("opens and closes when the header is clicked", () => { + it("opens and closes when the header is clicked", async () => { const { getByRole } = render( Test Content, ); + const button = getByRole("button"); + + expect(button).toHaveAttribute("aria-expanded", "false"); + + await userEvent.click(button); + expect(button).toHaveAttribute("aria-expanded", "true"); - screen.debug(); + await userEvent.click(button); + expect(button).toHaveAttribute("aria-expanded", "false"); + }); + + it("opens by default when defaultOpen is passed", async () => { + const { getByRole } = render( + + Test Content + , + ); const button = getByRole("button"); + expect(button).toHaveAttribute("aria-expanded", "true"); + await userEvent.click(button); expect(button).toHaveAttribute("aria-expanded", "false"); + }); - fireEvent.click(button); + it("opens by default when defaultOpen is passed", async () => { + const { getByRole } = render( + + Test Content + , + ); + const button = getByRole("button"); expect(button).toHaveAttribute("aria-expanded", "true"); - fireEvent.click(button); + await userEvent.click(button); expect(button).toHaveAttribute("aria-expanded", "false"); }); + + it("renders correctly with underline variant", () => { + const { container } = render( + + Test Content + , + ); + + expect(container.firstChild).toHaveClass("deriv-accordion--underline"); + }); + + it("renders correctly with bordered variant", () => { + const { container } = render( + + Test Content + , + ); + + expect(container.firstChild).toHaveClass("deriv-accordion--bordered"); + }); + + it("renders correctly with shadow variant", () => { + const { container } = render( + + Test Content + , + ); + + expect(container.firstChild).toHaveClass("deriv-accordion--shadow"); + }); + + it("renders correctly when isCompact is true", () => { + const { container } = render( + + Test Content + , + ); + + expect(container.firstChild).toHaveClass("deriv-accordion--compact"); + }); + + it("renders correctly when isCompact is false", () => { + const { container } = render( + + Test Content + , + ); + + expect(container.firstChild).not.toHaveClass( + "deriv-accordion--compact", + ); + }); });