[DEV-11281] Implemented new Accordion component

prezly · Aug 10, 2023 · 8dabae1 · 8dabae1
1 parent 40176b9
commit 8dabae1
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 12 deletions.
diff --git a/packages/slate-editor/src/components/Accordion/Accordion.module.scss b/packages/slate-editor/src/components/Accordion/Accordion.module.scss
@@ -0,0 +1,37 @@
+@import "styles/variables";
+@import "styles/helpers";
+
+.Accordion {
+    border-top: 1px solid rgba($color: $white, $alpha: 0.12);
+}
+
+.button {
+    @include btn-unstyled;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: $spacing-2;
+    color: $grey-300;
+    font-size: $font-size-small;
+    font-weight: 600;
+}
+
+.content {
+    display: none;
+    padding: 0 $spacing-2 $spacing-2;
+
+    &.open {
+        display: block;
+    }
+}
+
+.icon {
+    fill: $white;
+    transition: transform 0.3s ease-in;
+
+    &.open {
+        transform: rotate(180deg);
+    }
+}
diff --git a/packages/slate-editor/src/components/Accordion/Accordion.tsx b/packages/slate-editor/src/components/Accordion/Accordion.tsx
@@ -0,0 +1,41 @@
+import classNames from 'classnames';
+import React, { useState, type ReactNode } from 'react';
+
+import { Caret } from '#icons';
+
+import styles from './Accordion.module.scss';
+
+interface Props {
+    title: string;
+    children: ReactNode;
+}
+
+export function Accordion({ title, children }: Props) {
+    const [isOpen, setIsOpen] = useState(false);
+
+    function toggleOpen() {
+        setIsOpen(!isOpen);
+    }
+
+    return (
+        <div className={styles.Accordion}>
+            <button className={styles.button} onClick={toggleOpen}>
+                <span>{title}</span>
+                {
+                    <Caret
+                        className={classNames(styles.icon, {
+                            [styles.open]: isOpen,
+                        })}
+                    />
+                }
+            </button>
+            <div
+                className={classNames(styles.content, {
+                    [styles.open]: isOpen,
+                })}
+            >
+                {children}
+            </div>
+        </div>
+    );
+}
diff --git a/packages/slate-editor/src/components/Accordion/index.ts b/packages/slate-editor/src/components/Accordion/index.ts
@@ -0,0 +1 @@
+export { Accordion } from './Accordion';
diff --git a/packages/slate-editor/src/components/index.ts b/packages/slate-editor/src/components/index.ts
@@ -1,3 +1,4 @@
+export { Accordion } from './Accordion';
 export { Avatar } from './Avatar';
 export { CloseButtonV2 } from './CloseButtonV2';
 export { CloseButton, EditorBlock, ResizableEditorBlock } from './EditorBlock';

diff --git a/packages/slate-editor/src/extensions/button-block/components/ButtonBlockMenu.tsx b/packages/slate-editor/src/extensions/button-block/components/ButtonBlockMenu.tsx
@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import React, { useCallback, useEffect, useState } from 'react';
 
 import {
+    Accordion,
     Button,
     Input,
     type OptionsGroupOption,
@@ -166,18 +167,15 @@ export function ButtonMenu({ onUpdate, onClose, onRemove, value, withNewTabOptio
                 </VStack>
             </Toolbox.Section>
 
-            <Toolbox.Section>
+            <Accordion title="Styling options">
                 <VStack spacing="2">
-                    <VStack spacing="1-5">
-                        <Toolbox.Caption>Styling options</Toolbox.Caption>
-                        <OptionsGroup
-                            name="variant"
-                            onChange={(variant) => onUpdate({ variant })}
-                            options={BUTTON_MENU_VARIANT_OPTIONS}
-                            selectedValue={value.variant}
-                            variant="pills"
-                        />
-                    </VStack>
+                    <OptionsGroup
+                        name="variant"
+                        onChange={(variant) => onUpdate({ variant })}
+                        options={BUTTON_MENU_VARIANT_OPTIONS}
+                        selectedValue={value.variant}
+                        variant="pills"
+                    />
 
                     <VStack spacing="1-5">
                         <Toolbox.Caption>Alignment</Toolbox.Caption>
@@ -189,7 +187,7 @@ export function ButtonMenu({ onUpdate, onClose, onRemove, value, withNewTabOptio
                         />
                     </VStack>
                 </VStack>
-            </Toolbox.Section>
+            </Accordion>
 
             <Toolbox.Footer>
                 <Button variant="clear" icon={Delete} fullWidth onClick={onRemove}>

diff --git a/packages/slate-editor/src/icons/Caret.svg b/packages/slate-editor/src/icons/Caret.svg
diff --git a/packages/slate-editor/src/icons/index.ts b/packages/slate-editor/src/icons/index.ts
@@ -8,6 +8,7 @@ export { default as ButtonLayoutLeft } from './ButtonLayoutLeft.svg';
 export { default as ButtonLayoutRight } from './ButtonLayoutRight.svg';
 export { default as ButtonLayoutCenter } from './ButtonLayoutCenter.svg';
 export { default as ButtonLayoutWide } from './ButtonLayoutWide.svg';
+export { default as Caret } from './Caret.svg';
 export { default as ChickenNoSignalIllustration } from './Chicken-no-signal-Illustration.svg';
 export { default as Bookmark } from './Embed.svg'; // this will be reworked in scope of MT-4462
 export { default as Clear } from './Clear.svg';