From 31c033ceab2eee945c4460a5bc8598725f521cc8 Mon Sep 17 00:00:00 2001 From: Albert Ohrem Larsen Date: Mon, 13 Jun 2022 14:46:17 +0200 Subject: [PATCH 01/26] First iteration accordion component --- src/components/Accordion/Accordion.module.css | 5 ++ .../Accordion/Accordion.stories.tsx | 61 +++++++++++++++++++ src/components/Accordion/Accordion.test.tsx | 10 +++ src/components/Accordion/Accordion.tsx | 24 ++++++++ src/components/Accordion/index.ts | 1 + src/components/index.ts | 1 + 6 files changed, 102 insertions(+) create mode 100644 src/components/Accordion/Accordion.module.css create mode 100644 src/components/Accordion/Accordion.stories.tsx create mode 100644 src/components/Accordion/Accordion.test.tsx create mode 100644 src/components/Accordion/Accordion.tsx create mode 100644 src/components/Accordion/index.ts diff --git a/src/components/Accordion/Accordion.module.css b/src/components/Accordion/Accordion.module.css new file mode 100644 index 00000000..b911fdb2 --- /dev/null +++ b/src/components/Accordion/Accordion.module.css @@ -0,0 +1,5 @@ +.accordion { + + box-shadow: 1px 1px 1px 1px var(--colors-neutral-400); + padding: 10px; +} diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx new file mode 100644 index 00000000..498b949c --- /dev/null +++ b/src/components/Accordion/Accordion.stories.tsx @@ -0,0 +1,61 @@ +import React, { useState } from 'react'; +import type { ComponentStory, ComponentMeta } from '@storybook/react'; +import { config } from 'storybook-addon-designs'; +import { StoryPage } from '@sb/StoryPage'; + +import { Accordion } from './Accordion'; +import type { AccordionChangeProps } from './Accordion'; + +const figmaLink = ''; // TODO: Add figma link + +export default { + title: `Components/Accordion`, + component: Accordion, + parameters: { + design: config([ + { + type: 'figma', + url: figmaLink, + }, + { + type: 'link', + url: figmaLink, + }, + ]), + docs: { + page: () => ( + + ), + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = () => { + const [collapse, setCollapse] = useState(true); + + const handleCollapse = ({ isCollapsed: isCollapsed }: AccordionChangeProps) => + { + setCollapse(isCollapsed); + }; + + return ( + Test}> + + + ); +} + + +export const Example = Template.bind({}); +Example.args = { + // TODO: Add story specific args +}; +Example.parameters = { + docs: { + description: { + story: '', // TODO: add story description, supports markdown + }, + }, +}; diff --git a/src/components/Accordion/Accordion.test.tsx b/src/components/Accordion/Accordion.test.tsx new file mode 100644 index 00000000..2dd80102 --- /dev/null +++ b/src/components/Accordion/Accordion.test.tsx @@ -0,0 +1,10 @@ +import React from 'react'; + +import { Accordion } from './Accordion'; + +describe('Accordion', () => { + it('should verify something', () => { + // Please add some non-snapshot test to verify conditional statements + expect().toBe(true); + }); +}); diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx new file mode 100644 index 00000000..6fdc50bb --- /dev/null +++ b/src/components/Accordion/Accordion.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import cn from 'classnames'; + +import classes from './Accordion.module.css'; + +export interface AccordionChangeProps { + isCollapsed: boolean; +} + +export type AccordionChangeHandler = ({ isCollapsed: isExpanded }: AccordionChangeProps) => void; + +export interface AccordionProps { + children?: React.ReactNode; + onCollapse: AccordionChangeHandler; + isCollapsed: boolean; +} + +export const Accordion = ({ children, onCollapse, isCollapsed }: AccordionProps) => { + return ( +
+ {!isCollapsed && children} +
+ ); +}; diff --git a/src/components/Accordion/index.ts b/src/components/Accordion/index.ts new file mode 100644 index 00000000..feee0c4f --- /dev/null +++ b/src/components/Accordion/index.ts @@ -0,0 +1 @@ +export { Accordion } from './Accordion'; diff --git a/src/components/index.ts b/src/components/index.ts index 20fb8c53..3bae0ac5 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -2,3 +2,4 @@ export { Panel, PanelVariant } from './Panel'; export { CircularProgress } from './CircularProgress'; export { AppWrapper } from './AppWrapper'; export { ToggleButton, ToggleButtonGroup } from './ToggleButtonGroup'; +export { Accordion } from './Accordion'; From ec72700f142c15c081a1fd1c784888b52f4179a9 Mon Sep 17 00:00:00 2001 From: Albert Ohrem Larsen Date: Fri, 17 Jun 2022 12:31:12 +0200 Subject: [PATCH 02/26] second iteration accordion component --- src/components/Accordion/Accordion.module.css | 1 - src/components/Accordion/Accordion.tsx | 33 ++++--- .../Accordion/AccordionHeader.module.css | 0 src/components/Accordion/AccordionHeader.tsx | 58 ++++++++++++ .../Accordion/AccordionItem.module.css | 89 +++++++++++++++++++ src/components/Accordion/AccordionItem.tsx | 0 .../Accordion/CollapsibleContext.ts | 24 +++++ src/components/Accordion/Contexts.ts | 10 +++ src/components/Accordion/ValueContext.ts | 22 +++++ 9 files changed, 224 insertions(+), 13 deletions(-) create mode 100644 src/components/Accordion/AccordionHeader.module.css create mode 100644 src/components/Accordion/AccordionHeader.tsx create mode 100644 src/components/Accordion/AccordionItem.module.css create mode 100644 src/components/Accordion/AccordionItem.tsx create mode 100644 src/components/Accordion/CollapsibleContext.ts create mode 100644 src/components/Accordion/Contexts.ts create mode 100644 src/components/Accordion/ValueContext.ts diff --git a/src/components/Accordion/Accordion.module.css b/src/components/Accordion/Accordion.module.css index b911fdb2..c48dbd03 100644 --- a/src/components/Accordion/Accordion.module.css +++ b/src/components/Accordion/Accordion.module.css @@ -1,5 +1,4 @@ .accordion { - box-shadow: 1px 1px 1px 1px var(--colors-neutral-400); padding: 10px; } diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index 6fdc50bb..07b59089 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -1,24 +1,33 @@ import React from 'react'; import cn from 'classnames'; +import type { ValueChangeProps, ValueChangeHandler } from './ValueContext'; +import { AccordionValueContext } from './ValueContext'; +import { AccordionCollapsibleContext } from './CollapsibleContext'; import classes from './Accordion.module.css'; -export interface AccordionChangeProps { - isCollapsed: boolean; -} - -export type AccordionChangeHandler = ({ isCollapsed: isExpanded }: AccordionChangeProps) => void; - export interface AccordionProps { children?: React.ReactNode; - onCollapse: AccordionChangeHandler; - isCollapsed: boolean; + value?: string; + onValueChange: ValueChangeHandler; } -export const Accordion = ({ children, onCollapse, isCollapsed }: AccordionProps) => { +export const Accordion = ({ + children, + value, + onValueChange, +}: AccordionProps) => { + const handleOnValueChange = ({ value: val }: ValueChangeProps) => { + onValueChange({ value: val }); + }; + return ( -
- {!isCollapsed && children} -
+ + + {children} + + ); }; diff --git a/src/components/Accordion/AccordionHeader.module.css b/src/components/Accordion/AccordionHeader.module.css new file mode 100644 index 00000000..e69de29b diff --git a/src/components/Accordion/AccordionHeader.tsx b/src/components/Accordion/AccordionHeader.tsx new file mode 100644 index 00000000..fc1a3a4a --- /dev/null +++ b/src/components/Accordion/AccordionHeader.tsx @@ -0,0 +1,58 @@ +import cl from 'classnames'; +import React, { useContext } from 'react'; + +import { AccordionItemContext } from './Contexts'; + +export interface AccordionHeaderProps{ + children: React.ReactNode; + onClick: () => boolean; +} + +export const AccordionHeader = ({ children, onClick } : AccordionHeaderProps) => { + const context = useContext(AccordionItemContext); + + + if (context === null) { + console.error( + ' has to be used within an ', + ); + return null; + } + + const handleClick = ( + e: React.MouseEvent, + ) => { + context.toggleOpen(); + onClick && onClick(e); + }; + + return ( + + ); + }, +); + +export default AccordionHeader; diff --git a/src/components/Accordion/AccordionItem.module.css b/src/components/Accordion/AccordionItem.module.css new file mode 100644 index 00000000..223f4a52 --- /dev/null +++ b/src/components/Accordion/AccordionItem.module.css @@ -0,0 +1,89 @@ +import cl from "classnames"; +import React, { createContext, forwardRef, useState } from "react"; + +export interface AccordionItemProps + extends React.HTMLAttributes { + /** + * Content in Accordion.Item + * Should include one Accordion.Header and one Accordion.Content + */ + children: React.ReactNode; + /** + * Controlled open-state + * Using this removes automatic control of open-state + */ + open?: boolean; + /** + * Defaults the accordion to open if not controlled + * @default false + */ + defaultOpen?: boolean; + /** + * Removes content inside Accordion.Content if false from dom when closed + * @default false + */ + renderContentWhenClosed?: boolean; +} + +export type AccordionItemType = React.ForwardRefExoticComponent< + AccordionItemProps & React.RefAttributes +>; + +export interface AccordionItemContextProps { + open: boolean; + toggleOpen: () => void; + setButtonId: (id: string) => void; + buttonId: string; + renderContentWhenClosed: boolean; +} + +export const AccordionItemContext = createContext( + null +); + +const AccordionItem: AccordionItemType = forwardRef( + ( + { + children, + className, + open, + defaultOpen = false, + renderContentWhenClosed = false, + onClick, + id, + ...rest + }, + ref + ) => { + const [internalOpen, setInternalOpen] = useState(defaultOpen); + const [buttonId, setButtonId] = useState(""); + + return ( +
+ { + if (open === undefined) { + setInternalOpen((iOpen) => !iOpen); + } + }, + renderContentWhenClosed, + setButtonId, + buttonId, + }} + > + {children} + +
+ ); + } +); + +export default AccordionItem; \ No newline at end of file diff --git a/src/components/Accordion/AccordionItem.tsx b/src/components/Accordion/AccordionItem.tsx new file mode 100644 index 00000000..e69de29b diff --git a/src/components/Accordion/CollapsibleContext.ts b/src/components/Accordion/CollapsibleContext.ts new file mode 100644 index 00000000..81bdc85f --- /dev/null +++ b/src/components/Accordion/CollapsibleContext.ts @@ -0,0 +1,24 @@ +import { useContext, createContext } from 'react'; + +export interface CollapsibleChangeProps { + isCollapsed: boolean; +} + +export type CollapsibleChangeHandler = ({ + isCollapsed, +}: CollapsibleChangeProps) => void; + +export const AccordionCollapsibleContext = createContext< + { onChange: CollapsibleChangeHandler; collapsed: boolean } | undefined +>(undefined); + +export const useAccordionCollapsibleContext = () => { + const context = useContext(AccordionCollapsibleContext); + if (context === undefined) { + throw new Error( + 'useAccordionCollapsibleContext must be used within a AccordionContext', + ); + } + + return context; +}; diff --git a/src/components/Accordion/Contexts.ts b/src/components/Accordion/Contexts.ts new file mode 100644 index 00000000..1b64c371 --- /dev/null +++ b/src/components/Accordion/Contexts.ts @@ -0,0 +1,10 @@ +import React, { createContext } from 'react'; + +export interface AccordionItemContextProps { + open: boolean; + toggleOpen: () => void; + renderContentWhenClosed: boolean; +} + +export const AccordionItemContext = + createContext(null); diff --git a/src/components/Accordion/ValueContext.ts b/src/components/Accordion/ValueContext.ts new file mode 100644 index 00000000..9d70c5f3 --- /dev/null +++ b/src/components/Accordion/ValueContext.ts @@ -0,0 +1,22 @@ +import { useContext, createContext } from 'react'; + +export interface ValueChangeProps { + value?: string; +} + +export type ValueChangeHandler = ({ value }: ValueChangeProps) => void; + +export const AccordionValueContext = createContext< + { onValueChange: ValueChangeHandler; value?: string } | undefined +>(undefined); + +export const useAccordionValueContext = () => { + const context = useContext(AccordionValueContext); + if (context === undefined) { + throw new Error( + 'useAccordionValueContext must be used within a AccordionContext', + ); + } + + return context; +}; From a1fecba1153ebcaa3b3931e2a2b3d25dc1530735 Mon Sep 17 00:00:00 2001 From: Albert Ohrem Larsen Date: Fri, 17 Jun 2022 12:35:57 +0200 Subject: [PATCH 03/26] Delete code for symbols --- src/components/Accordion/AccordionHeader.tsx | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/src/components/Accordion/AccordionHeader.tsx b/src/components/Accordion/AccordionHeader.tsx index fc1a3a4a..9f963889 100644 --- a/src/components/Accordion/AccordionHeader.tsx +++ b/src/components/Accordion/AccordionHeader.tsx @@ -34,22 +34,7 @@ export const AccordionHeader = ({ children, onClick } : AccordionHeaderProps) => aria-expanded={context.open} > {children} - - + ); }, From fee52db513fa30bf6dfd3351bc72c2d391e9985e Mon Sep 17 00:00:00 2001 From: Albert Ohrem Larsen Date: Mon, 20 Jun 2022 17:08:10 +0200 Subject: [PATCH 04/26] Third iteration Accordion --- .../Accordion/Accordion.stories.tsx | 39 +++++--- src/components/Accordion/Accordion.tsx | 40 ++++----- ...onItem.tsx => AccordionContent.module.css} | 0 src/components/Accordion/AccordionContent.tsx | 35 ++++++++ .../Accordion/AccordionHeader.module.css | 4 + src/components/Accordion/AccordionHeader.tsx | 63 ++++++------- .../Accordion/AccordionItem.module.css | 89 ------------------- .../Accordion/CollapsibleContext.ts | 24 ----- src/components/Accordion/Context.ts | 22 +++++ src/components/Accordion/Contexts.ts | 10 --- src/components/Accordion/ValueContext.ts | 22 ----- src/components/Accordion/index.ts | 1 + src/components/index.ts | 2 +- 13 files changed, 138 insertions(+), 213 deletions(-) rename src/components/Accordion/{AccordionItem.tsx => AccordionContent.module.css} (100%) create mode 100644 src/components/Accordion/AccordionContent.tsx delete mode 100644 src/components/Accordion/AccordionItem.module.css delete mode 100644 src/components/Accordion/CollapsibleContext.ts create mode 100644 src/components/Accordion/Context.ts delete mode 100644 src/components/Accordion/Contexts.ts delete mode 100644 src/components/Accordion/ValueContext.ts diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx index 498b949c..037fbd2e 100644 --- a/src/components/Accordion/Accordion.stories.tsx +++ b/src/components/Accordion/Accordion.stories.tsx @@ -4,7 +4,9 @@ import { config } from 'storybook-addon-designs'; import { StoryPage } from '@sb/StoryPage'; import { Accordion } from './Accordion'; -import type { AccordionChangeProps } from './Accordion'; +import type { AccordionContextProps } from './Context'; +import { AccordionHeader } from './AccordionHeader'; +import { AccordionContent } from './AccordionContent'; const figmaLink = ''; // TODO: Add figma link @@ -33,20 +35,37 @@ export default { } as ComponentMeta; const Template: ComponentStory = () => { - const [collapse, setCollapse] = useState(true); + const [open1, setOpen1] = useState(false); + const [open2, setOpen2] = useState(false); - const handleCollapse = ({ isCollapsed: isCollapsed }: AccordionChangeProps) => - { - setCollapse(isCollapsed); + + const handleChange1 = ({ open: isOpen }: AccordionContextProps) => { + setOpen1(!isOpen); }; - return ( - Test}> + const handleChange2 = ({ open: isOpen }: AccordionContextProps) => { + setOpen2(!isOpen); + }; - + return ( +
+ + Hei + Test + + + Hei + Test + +
); -} - +}; export const Example = Template.bind({}); Example.args = { diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index 07b59089..ec2c3654 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -1,33 +1,33 @@ import React from 'react'; import cn from 'classnames'; -import type { ValueChangeProps, ValueChangeHandler } from './ValueContext'; -import { AccordionValueContext } from './ValueContext'; -import { AccordionCollapsibleContext } from './CollapsibleContext'; +import type { ClickHandler, AccordionContextProps } from './Context'; +import { AccordionContext } from './Context'; import classes from './Accordion.module.css'; -export interface AccordionProps { - children?: React.ReactNode; - value?: string; - onValueChange: ValueChangeHandler; +export interface AccordionItemProps { + children: React.ReactNode; + onClick: ClickHandler; + open: boolean; } -export const Accordion = ({ - children, - value, - onValueChange, -}: AccordionProps) => { - const handleOnValueChange = ({ value: val }: ValueChangeProps) => { - onValueChange({ value: val }); +export const Accordion = ({ children, open, onClick }: AccordionItemProps) => { + const handleClick = ({ open: isOpen }: AccordionContextProps) => { + onClick({ open: isOpen }); }; return ( - - +
+ {children} - - + +
); }; + +export default Accordion; diff --git a/src/components/Accordion/AccordionItem.tsx b/src/components/Accordion/AccordionContent.module.css similarity index 100% rename from src/components/Accordion/AccordionItem.tsx rename to src/components/Accordion/AccordionContent.module.css diff --git a/src/components/Accordion/AccordionContent.tsx b/src/components/Accordion/AccordionContent.tsx new file mode 100644 index 00000000..0f32863a --- /dev/null +++ b/src/components/Accordion/AccordionContent.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import cn from 'classnames'; + +import classes from './AccordionContent.module.css'; +import { useAccordionContext } from './Context'; + +export interface AccordionContentProps { + children?: React.ReactNode; + open: boolean; +} + +export const AccordionContent = ({ children }: AccordionContentProps) => { + const { onClick, open } = useAccordionContext(); + + const handleClick = () => { + onClick({ open }); + }; + + return ( +
+ {open && ( // eslint-disable-next-line +
+ {children} +
+ )} +
+ ); +}; + +export default AccordionContent; diff --git a/src/components/Accordion/AccordionHeader.module.css b/src/components/Accordion/AccordionHeader.module.css index e69de29b..b56c7cc8 100644 --- a/src/components/Accordion/AccordionHeader.module.css +++ b/src/components/Accordion/AccordionHeader.module.css @@ -0,0 +1,4 @@ +.accordion-header--opened{ + background-color: black; + color: black; +} \ No newline at end of file diff --git a/src/components/Accordion/AccordionHeader.tsx b/src/components/Accordion/AccordionHeader.tsx index 9f963889..7a5719af 100644 --- a/src/components/Accordion/AccordionHeader.tsx +++ b/src/components/Accordion/AccordionHeader.tsx @@ -1,43 +1,32 @@ -import cl from 'classnames'; -import React, { useContext } from 'react'; +import React from 'react'; +import cn from 'classnames'; -import { AccordionItemContext } from './Contexts'; +import classes from './AccordionHeader.module.css'; +import { useAccordionContext } from './Context'; -export interface AccordionHeaderProps{ - children: React.ReactNode; - onClick: () => boolean; +export interface AccordionHeaderProps { + children?: React.ReactNode; + open: boolean; } -export const AccordionHeader = ({ children, onClick } : AccordionHeaderProps) => { - const context = useContext(AccordionItemContext); - - - if (context === null) { - console.error( - ' has to be used within an ', - ); - return null; - } - - const handleClick = ( - e: React.MouseEvent, - ) => { - context.toggleOpen(); - onClick && onClick(e); - }; - - return ( - - ); - }, -); +export const AccordionHeader = ({ children }: AccordionHeaderProps) => { + const { onClick, open } = useAccordionContext(); + + const handleClick = () => { + onClick({ open }); + }; + + return ( + + ); +}; export default AccordionHeader; diff --git a/src/components/Accordion/AccordionItem.module.css b/src/components/Accordion/AccordionItem.module.css deleted file mode 100644 index 223f4a52..00000000 --- a/src/components/Accordion/AccordionItem.module.css +++ /dev/null @@ -1,89 +0,0 @@ -import cl from "classnames"; -import React, { createContext, forwardRef, useState } from "react"; - -export interface AccordionItemProps - extends React.HTMLAttributes { - /** - * Content in Accordion.Item - * Should include one Accordion.Header and one Accordion.Content - */ - children: React.ReactNode; - /** - * Controlled open-state - * Using this removes automatic control of open-state - */ - open?: boolean; - /** - * Defaults the accordion to open if not controlled - * @default false - */ - defaultOpen?: boolean; - /** - * Removes content inside Accordion.Content if false from dom when closed - * @default false - */ - renderContentWhenClosed?: boolean; -} - -export type AccordionItemType = React.ForwardRefExoticComponent< - AccordionItemProps & React.RefAttributes ->; - -export interface AccordionItemContextProps { - open: boolean; - toggleOpen: () => void; - setButtonId: (id: string) => void; - buttonId: string; - renderContentWhenClosed: boolean; -} - -export const AccordionItemContext = createContext( - null -); - -const AccordionItem: AccordionItemType = forwardRef( - ( - { - children, - className, - open, - defaultOpen = false, - renderContentWhenClosed = false, - onClick, - id, - ...rest - }, - ref - ) => { - const [internalOpen, setInternalOpen] = useState(defaultOpen); - const [buttonId, setButtonId] = useState(""); - - return ( -
- { - if (open === undefined) { - setInternalOpen((iOpen) => !iOpen); - } - }, - renderContentWhenClosed, - setButtonId, - buttonId, - }} - > - {children} - -
- ); - } -); - -export default AccordionItem; \ No newline at end of file diff --git a/src/components/Accordion/CollapsibleContext.ts b/src/components/Accordion/CollapsibleContext.ts deleted file mode 100644 index 81bdc85f..00000000 --- a/src/components/Accordion/CollapsibleContext.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { useContext, createContext } from 'react'; - -export interface CollapsibleChangeProps { - isCollapsed: boolean; -} - -export type CollapsibleChangeHandler = ({ - isCollapsed, -}: CollapsibleChangeProps) => void; - -export const AccordionCollapsibleContext = createContext< - { onChange: CollapsibleChangeHandler; collapsed: boolean } | undefined ->(undefined); - -export const useAccordionCollapsibleContext = () => { - const context = useContext(AccordionCollapsibleContext); - if (context === undefined) { - throw new Error( - 'useAccordionCollapsibleContext must be used within a AccordionContext', - ); - } - - return context; -}; diff --git a/src/components/Accordion/Context.ts b/src/components/Accordion/Context.ts new file mode 100644 index 00000000..be43479d --- /dev/null +++ b/src/components/Accordion/Context.ts @@ -0,0 +1,22 @@ +import { createContext, useContext } from 'react'; + +export interface AccordionContextProps { + open: boolean; +} + +export type ClickHandler = ({ open }: AccordionContextProps) => void; + +export const AccordionContext = createContext< + { open: boolean; onClick: ClickHandler } | undefined +>(undefined); + +export const useAccordionContext = () => { + const context = useContext(AccordionContext); + if (context === undefined) { + throw new Error( + 'useToggleButtonContext must be used within a ToggleButtonGroupContext', + ); + } + + return context; +}; diff --git a/src/components/Accordion/Contexts.ts b/src/components/Accordion/Contexts.ts deleted file mode 100644 index 1b64c371..00000000 --- a/src/components/Accordion/Contexts.ts +++ /dev/null @@ -1,10 +0,0 @@ -import React, { createContext } from 'react'; - -export interface AccordionItemContextProps { - open: boolean; - toggleOpen: () => void; - renderContentWhenClosed: boolean; -} - -export const AccordionItemContext = - createContext(null); diff --git a/src/components/Accordion/ValueContext.ts b/src/components/Accordion/ValueContext.ts deleted file mode 100644 index 9d70c5f3..00000000 --- a/src/components/Accordion/ValueContext.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { useContext, createContext } from 'react'; - -export interface ValueChangeProps { - value?: string; -} - -export type ValueChangeHandler = ({ value }: ValueChangeProps) => void; - -export const AccordionValueContext = createContext< - { onValueChange: ValueChangeHandler; value?: string } | undefined ->(undefined); - -export const useAccordionValueContext = () => { - const context = useContext(AccordionValueContext); - if (context === undefined) { - throw new Error( - 'useAccordionValueContext must be used within a AccordionContext', - ); - } - - return context; -}; diff --git a/src/components/Accordion/index.ts b/src/components/Accordion/index.ts index feee0c4f..489ca66f 100644 --- a/src/components/Accordion/index.ts +++ b/src/components/Accordion/index.ts @@ -1 +1,2 @@ export { Accordion } from './Accordion'; +export { AccordionHeader } from './AccordionHeader'; diff --git a/src/components/index.ts b/src/components/index.ts index 61d1ae5a..515d76ff 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -2,5 +2,5 @@ export { Panel, PanelVariant } from './Panel'; export { CircularProgress } from './CircularProgress'; export { AppWrapper } from './AppWrapper'; export { ToggleButton, ToggleButtonGroup } from './ToggleButtonGroup'; -export { Accordion } from './Accordion'; +export { Accordion, AccordionHeader } from './Accordion'; export { Button, ButtonVariant } from './Button'; From e2415d679c1b91a0218db988b9792b6b6ff5a9a4 Mon Sep 17 00:00:00 2001 From: Albert Ohrem Larsen Date: Mon, 20 Jun 2022 17:14:53 +0200 Subject: [PATCH 05/26] code formatting --- src/components/Accordion/Accordion.stories.tsx | 4 ++-- src/components/Accordion/Accordion.tsx | 12 ++++++------ src/components/Accordion/AccordionContent.tsx | 6 +----- src/components/Accordion/AccordionHeader.tsx | 8 ++++---- src/components/Accordion/Context.ts | 4 ++-- 5 files changed, 15 insertions(+), 19 deletions(-) diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx index 037fbd2e..943af9b8 100644 --- a/src/components/Accordion/Accordion.stories.tsx +++ b/src/components/Accordion/Accordion.stories.tsx @@ -50,14 +50,14 @@ const Template: ComponentStory = () => { return (
Hei Test Hei diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index ec2c3654..f6ee2d30 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -1,26 +1,26 @@ import React from 'react'; import cn from 'classnames'; -import type { ClickHandler, AccordionContextProps } from './Context'; +import type { ChangeHandler, AccordionContextProps } from './Context'; import { AccordionContext } from './Context'; import classes from './Accordion.module.css'; export interface AccordionItemProps { children: React.ReactNode; - onClick: ClickHandler; + onChange: ChangeHandler; open: boolean; } -export const Accordion = ({ children, open, onClick }: AccordionItemProps) => { - const handleClick = ({ open: isOpen }: AccordionContextProps) => { - onClick({ open: isOpen }); +export const Accordion = ({ children, open, onChange }: AccordionItemProps) => { + const handleChange = ({ open: isOpen }: AccordionContextProps) => { + onChange({ open: isOpen }); }; return (
diff --git a/src/components/Accordion/AccordionContent.tsx b/src/components/Accordion/AccordionContent.tsx index 0f32863a..41992714 100644 --- a/src/components/Accordion/AccordionContent.tsx +++ b/src/components/Accordion/AccordionContent.tsx @@ -10,11 +10,7 @@ export interface AccordionContentProps { } export const AccordionContent = ({ children }: AccordionContentProps) => { - const { onClick, open } = useAccordionContext(); - - const handleClick = () => { - onClick({ open }); - }; + const { open } = useAccordionContext(); return (
diff --git a/src/components/Accordion/AccordionHeader.tsx b/src/components/Accordion/AccordionHeader.tsx index 7a5719af..59ede109 100644 --- a/src/components/Accordion/AccordionHeader.tsx +++ b/src/components/Accordion/AccordionHeader.tsx @@ -10,10 +10,10 @@ export interface AccordionHeaderProps { } export const AccordionHeader = ({ children }: AccordionHeaderProps) => { - const { onClick, open } = useAccordionContext(); + const { onChange, open } = useAccordionContext(); - const handleClick = () => { - onClick({ open }); + const handleChange = () => { + onChange({ open }); }; return ( @@ -21,7 +21,7 @@ export const AccordionHeader = ({ children }: AccordionHeaderProps) => { className={cn(classes['accordion-header'], { [classes['accordion-header--opened']]: open, })} - onClick={handleClick} + onClick={handleChange} aria-expanded={open} > {children} diff --git a/src/components/Accordion/Context.ts b/src/components/Accordion/Context.ts index be43479d..d038fa05 100644 --- a/src/components/Accordion/Context.ts +++ b/src/components/Accordion/Context.ts @@ -4,10 +4,10 @@ export interface AccordionContextProps { open: boolean; } -export type ClickHandler = ({ open }: AccordionContextProps) => void; +export type ChangeHandler = ({ open }: AccordionContextProps) => void; export const AccordionContext = createContext< - { open: boolean; onClick: ClickHandler } | undefined + { open: boolean; onChange: ChangeHandler } | undefined >(undefined); export const useAccordionContext = () => { From 2d35f57a756bb130739f4bde0e1da3239fd49982 Mon Sep 17 00:00:00 2001 From: Albert Ohrem Larsen Date: Tue, 21 Jun 2022 09:31:28 +0200 Subject: [PATCH 06/26] Accordion styling first iteration --- src/components/Accordion/Accordion.module.css | 11 ++++++++++- src/components/Accordion/Accordion.stories.tsx | 13 ++++++------- src/components/Accordion/AccordionHeader.module.css | 10 +++++++++- 3 files changed, 25 insertions(+), 9 deletions(-) diff --git a/src/components/Accordion/Accordion.module.css b/src/components/Accordion/Accordion.module.css index c48dbd03..b5ad955b 100644 --- a/src/components/Accordion/Accordion.module.css +++ b/src/components/Accordion/Accordion.module.css @@ -1,4 +1,13 @@ .accordion { - box-shadow: 1px 1px 1px 1px var(--colors-neutral-400); + --component-accordion-border-style: solid; + --component-accordion-border-color: var(--colors-neutral-200); + --component-accordion-border-width: var(--border-width-thin); + --component-accordion-background: var(); + border-bottom-width: var(--component-accordion-border-bottom); + border-bottom-style: var(--component-accordion-border-style); + border-bottom-color: var(--component-accordion-border-color); + background-color: var(--colors-neutral-000); padding: 10px; + width: stretch; + font-family: inherit; } diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx index 943af9b8..03459bd2 100644 --- a/src/components/Accordion/Accordion.stories.tsx +++ b/src/components/Accordion/Accordion.stories.tsx @@ -38,7 +38,6 @@ const Template: ComponentStory = () => { const [open1, setOpen1] = useState(false); const [open2, setOpen2] = useState(false); - const handleChange1 = ({ open: isOpen }: AccordionContextProps) => { setOpen1(!isOpen); }; @@ -48,22 +47,22 @@ const Template: ComponentStory = () => { }; return ( -
+ <> - Hei - Test + {'>'} Accordion 1 + Accordion content 1 - Hei - Test + {'>'} Accordion 2 + Accordion content 2 -
+ ); }; diff --git a/src/components/Accordion/AccordionHeader.module.css b/src/components/Accordion/AccordionHeader.module.css index b56c7cc8..8294f988 100644 --- a/src/components/Accordion/AccordionHeader.module.css +++ b/src/components/Accordion/AccordionHeader.module.css @@ -1,4 +1,12 @@ +.accordion-header{ + width: 100%; + padding: 0; + border: none; + background: none; + font-family: inherit; +} + .accordion-header--opened{ background-color: black; color: black; -} \ No newline at end of file +} From 65fe1aab0c76f82f0903978e1a034451570120d0 Mon Sep 17 00:00:00 2001 From: Albert Ohrem Larsen Date: Tue, 21 Jun 2022 15:28:08 +0200 Subject: [PATCH 07/26] Accordion styling iteration 2 --- src/components/Accordion/Accordion.module.css | 21 ++++++++-------- .../Accordion/Accordion.stories.module.css | 3 +++ .../Accordion/Accordion.stories.tsx | 23 ++++++++++++----- .../Accordion/AccordionContent.module.css | 7 ++++++ src/components/Accordion/AccordionContent.tsx | 1 - .../Accordion/AccordionHeader.module.css | 25 ++++++++++++------- src/components/Accordion/AccordionHeader.tsx | 1 - 7 files changed, 54 insertions(+), 27 deletions(-) create mode 100644 src/components/Accordion/Accordion.stories.module.css diff --git a/src/components/Accordion/Accordion.module.css b/src/components/Accordion/Accordion.module.css index b5ad955b..3fc2412f 100644 --- a/src/components/Accordion/Accordion.module.css +++ b/src/components/Accordion/Accordion.module.css @@ -1,13 +1,14 @@ .accordion { - --component-accordion-border-style: solid; - --component-accordion-border-color: var(--colors-neutral-200); - --component-accordion-border-width: var(--border-width-thin); - --component-accordion-background: var(); - border-bottom-width: var(--component-accordion-border-bottom); - border-bottom-style: var(--component-accordion-border-style); - border-bottom-color: var(--component-accordion-border-color); - background-color: var(--colors-neutral-000); - padding: 10px; - width: stretch; + --component-accordion-border-top-style: solid; + --component-accordion-border-top-color: var(--colors-neutral-200); + --component-accordion-border-top-width: var(--border-width-thin); + --component-accordion-background: var(--colors-neutral-000); + --component-accordion-width: 100%; font-family: inherit; + border-top-width: var(--component-accordion-border-top-width); + border-top-style: var(--component-accordion-border-top-style); + border-top-color: var(--component-accordion-border-top-color); + background-color: var(--component-accordion-background); + padding: var(--component-panel-space-padding-gap-horizontal-md); + width: var(--component-accordion-width); } diff --git a/src/components/Accordion/Accordion.stories.module.css b/src/components/Accordion/Accordion.stories.module.css new file mode 100644 index 00000000..4b5603fd --- /dev/null +++ b/src/components/Accordion/Accordion.stories.module.css @@ -0,0 +1,3 @@ +.accordion-div-1{ + width: 80vw; +} \ No newline at end of file diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx index 03459bd2..745c612c 100644 --- a/src/components/Accordion/Accordion.stories.tsx +++ b/src/components/Accordion/Accordion.stories.tsx @@ -7,6 +7,8 @@ import { Accordion } from './Accordion'; import type { AccordionContextProps } from './Context'; import { AccordionHeader } from './AccordionHeader'; import { AccordionContent } from './AccordionContent'; +import cn from 'classnames'; +import classes from './Accordion.stories.module.css'; const figmaLink = ''; // TODO: Add figma link @@ -46,23 +48,32 @@ const Template: ComponentStory = () => { setOpen2(!isOpen); }; + const AccordionExampleContent = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '+ + 'Cras ut ultricies erat. Maecenas interdum euismod libero id sollicitudin.'+ + 'id urna semper molestie nec in est. Ut in auctor est, eu euismod nulla. '+ + 'Duis et malesuada risus. Duis condimentum mi vel massa elementum, eget'+ + 'gravida orci lobortis. Ut imperdiet porttitor ligula at fringilla. '+ + 'Praesent rhoncus neque id commodo commodo. Morbi tincidunt pulvinar'+ + ' ex sit amet tincidunt. Cras quis sapien maximus nisi vestibulum efficitur'+ + 'nec nec massa. Nullam ornare mollis sapien, sed sodales magna tincidunt quis.'; + return ( - <> +
- {'>'} Accordion 1 - Accordion content 1 + Accordion 1 + {AccordionExampleContent} - {'>'} Accordion 2 - Accordion content 2 + Accordion 2 + {AccordionExampleContent} - +
); }; diff --git a/src/components/Accordion/AccordionContent.module.css b/src/components/Accordion/AccordionContent.module.css index e69de29b..1492a12c 100644 --- a/src/components/Accordion/AccordionContent.module.css +++ b/src/components/Accordion/AccordionContent.module.css @@ -0,0 +1,7 @@ +.accordion-content{ + --component-accordion-content-margin-left: 20px; + --component-accordion-content-margin-top: 10px; + font-family: inherit; + margin-left: var(--component-accordion-content-margin-left); + margin-top: var(--component-accordion-content-margin-top); +} \ No newline at end of file diff --git a/src/components/Accordion/AccordionContent.tsx b/src/components/Accordion/AccordionContent.tsx index 41992714..4a9a5310 100644 --- a/src/components/Accordion/AccordionContent.tsx +++ b/src/components/Accordion/AccordionContent.tsx @@ -6,7 +6,6 @@ import { useAccordionContext } from './Context'; export interface AccordionContentProps { children?: React.ReactNode; - open: boolean; } export const AccordionContent = ({ children }: AccordionContentProps) => { diff --git a/src/components/Accordion/AccordionHeader.module.css b/src/components/Accordion/AccordionHeader.module.css index 8294f988..317b6bf6 100644 --- a/src/components/Accordion/AccordionHeader.module.css +++ b/src/components/Accordion/AccordionHeader.module.css @@ -1,12 +1,19 @@ .accordion-header{ - width: 100%; - padding: 0; - border: none; - background: none; + --component-accordion-header-width: 100%; + --component-accordion-header-padding: 0; + --component-accordion-header-border: none; + --component-accordion-header-background: none; + --component-accordion-header-text-align: start; + --component-accordion-header-margin-left: 20px; + --component-accordion-header-font-size: var(--font-size-300); + --component-accordion-header-font-weight: var(--component-panel-weight-heading); font-family: inherit; -} - -.accordion-header--opened{ - background-color: black; - color: black; + width: var(--component-accordion-header-width); + padding: var(--component-accordion-header-padding); + border: var(--component-accordion-header-border); + background: var(--component-accordion-header-background); + text-align: var(--component-accordion-header-text-align); + margin-left: var(--component-accordion-header-margin-left); + font-size: var(--component-accordion-header-font-size); + font-weight: var(--component-accordion-header-font-weight); } diff --git a/src/components/Accordion/AccordionHeader.tsx b/src/components/Accordion/AccordionHeader.tsx index 59ede109..a1b05230 100644 --- a/src/components/Accordion/AccordionHeader.tsx +++ b/src/components/Accordion/AccordionHeader.tsx @@ -6,7 +6,6 @@ import { useAccordionContext } from './Context'; export interface AccordionHeaderProps { children?: React.ReactNode; - open: boolean; } export const AccordionHeader = ({ children }: AccordionHeaderProps) => { From d9f53166889ee94e5ba71c8765cd5ea9d9ab8af2 Mon Sep 17 00:00:00 2001 From: Albert Ohrem Larsen Date: Tue, 21 Jun 2022 15:44:51 +0200 Subject: [PATCH 08/26] Code cleanup --- src/components/Accordion/Accordion.stories.tsx | 15 +++++---------- src/components/Accordion/index.ts | 1 + src/components/index.ts | 2 +- 3 files changed, 7 insertions(+), 11 deletions(-) diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx index 745c612c..f0fb8c47 100644 --- a/src/components/Accordion/Accordion.stories.tsx +++ b/src/components/Accordion/Accordion.stories.tsx @@ -1,13 +1,14 @@ import React, { useState } from 'react'; import type { ComponentStory, ComponentMeta } from '@storybook/react'; import { config } from 'storybook-addon-designs'; +import cn from 'classnames'; + import { StoryPage } from '@sb/StoryPage'; import { Accordion } from './Accordion'; import type { AccordionContextProps } from './Context'; import { AccordionHeader } from './AccordionHeader'; import { AccordionContent } from './AccordionContent'; -import cn from 'classnames'; import classes from './Accordion.stories.module.css'; const figmaLink = ''; // TODO: Add figma link @@ -48,17 +49,11 @@ const Template: ComponentStory = () => { setOpen2(!isOpen); }; - const AccordionExampleContent = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '+ - 'Cras ut ultricies erat. Maecenas interdum euismod libero id sollicitudin.'+ - 'id urna semper molestie nec in est. Ut in auctor est, eu euismod nulla. '+ - 'Duis et malesuada risus. Duis condimentum mi vel massa elementum, eget'+ - 'gravida orci lobortis. Ut imperdiet porttitor ligula at fringilla. '+ - 'Praesent rhoncus neque id commodo commodo. Morbi tincidunt pulvinar'+ - ' ex sit amet tincidunt. Cras quis sapien maximus nisi vestibulum efficitur'+ - 'nec nec massa. Nullam ornare mollis sapien, sed sodales magna tincidunt quis.'; + const AccordionExampleContent = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'; return ( -
+
Date: Wed, 22 Jun 2022 11:07:20 +0200 Subject: [PATCH 09/26] code cleanup --- src/components/Accordion/Accordion.module.css | 1 - .../Accordion/Accordion.stories.module.css | 2 +- src/components/Accordion/Accordion.test.tsx | 64 ++++++++++++++++++- src/components/Accordion/Accordion.tsx | 4 +- src/components/Accordion/AccordionHeader.tsx | 5 +- src/components/Accordion/Context.ts | 2 +- 6 files changed, 67 insertions(+), 11 deletions(-) diff --git a/src/components/Accordion/Accordion.module.css b/src/components/Accordion/Accordion.module.css index 3fc2412f..81314847 100644 --- a/src/components/Accordion/Accordion.module.css +++ b/src/components/Accordion/Accordion.module.css @@ -4,7 +4,6 @@ --component-accordion-border-top-width: var(--border-width-thin); --component-accordion-background: var(--colors-neutral-000); --component-accordion-width: 100%; - font-family: inherit; border-top-width: var(--component-accordion-border-top-width); border-top-style: var(--component-accordion-border-top-style); border-top-color: var(--component-accordion-border-top-color); diff --git a/src/components/Accordion/Accordion.stories.module.css b/src/components/Accordion/Accordion.stories.module.css index 4b5603fd..f9835508 100644 --- a/src/components/Accordion/Accordion.stories.module.css +++ b/src/components/Accordion/Accordion.stories.module.css @@ -1,3 +1,3 @@ -.accordion-div-1{ +.accordion-div{ width: 80vw; } \ No newline at end of file diff --git a/src/components/Accordion/Accordion.test.tsx b/src/components/Accordion/Accordion.test.tsx index 2dd80102..82a7efc7 100644 --- a/src/components/Accordion/Accordion.test.tsx +++ b/src/components/Accordion/Accordion.test.tsx @@ -1,10 +1,68 @@ import React from 'react'; +import userEvent from '@testing-library/user-event'; +import { render as renderRtl, screen } from '@testing-library/react'; +import type { AccordionProps } from './Accordion'; import { Accordion } from './Accordion'; +import { AccordionHeader } from './AccordionHeader'; +import { AccordionContent } from './AccordionContent'; + +const render = (props: Partial = {})=>{ + const allProps = { + children: ( + <> + AccordionHeader + AccordionContent + + ), + onChange: jest.fn(), + open: true, + ...props, + }; + renderRtl(); +}; + +const user = userEvent.setup(); describe('Accordion', () => { - it('should verify something', () => { - // Please add some non-snapshot test to verify conditional statements - expect().toBe(true); + it('should call handleChange with correct open=true when AccordionHeader is clicked', async () => { + const handleChange = jest.fn(); + render({ onChange: handleChange }); + await user.click(screen.getByRole('button', { name: 'AccordionHeader' })); + expect(handleChange).toHaveBeenCalledWith({ open: true }); + }); +}); + +describe('Accordion', () => { + it('should call handleChange with open=false when AccordionHeader is clicked', async () => { + const handleChange = jest.fn(); + render({ onChange: handleChange }); + + await user.click(screen.getByRole('button', { name: 'AccordionHeader' })); + expect(handleChange).toHaveBeenCalledWith({ open: true }); + }); +}); + +describe('Accordion', () => { + it('should have aria-expanded=true when clicked and open=true', async () => { + const handleChange = jest.fn(); + render({ onChange: handleChange, open: true }); + + await user.click(screen.getByRole('button', { name: 'AccordionHeader' })); + expect( + screen.getByRole('button', { name: 'Left', pressed: true }), + ).toBeInTheDocument(); + }); +}); + +describe('Accordion', () => { + it('should have aria-expanded=false when clicked and open=false', async () => { + const handleChange = jest.fn(); + render({ onChange: handleChange, open: false }); + + await user.click(screen.getByRole('button', { name: 'AccordionHeader' })); + expect( + screen.getByRole('button', { name: 'Left', pressed: false }), + ).toBeInTheDocument(); }); }); diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index f6ee2d30..c7223377 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -5,13 +5,13 @@ import type { ChangeHandler, AccordionContextProps } from './Context'; import { AccordionContext } from './Context'; import classes from './Accordion.module.css'; -export interface AccordionItemProps { +export interface AccordionProps { children: React.ReactNode; onChange: ChangeHandler; open: boolean; } -export const Accordion = ({ children, open, onChange }: AccordionItemProps) => { +export const Accordion = ({ children, open, onChange }: AccordionProps) => { const handleChange = ({ open: isOpen }: AccordionContextProps) => { onChange({ open: isOpen }); }; diff --git a/src/components/Accordion/AccordionHeader.tsx b/src/components/Accordion/AccordionHeader.tsx index a1b05230..61e52396 100644 --- a/src/components/Accordion/AccordionHeader.tsx +++ b/src/components/Accordion/AccordionHeader.tsx @@ -17,11 +17,10 @@ export const AccordionHeader = ({ children }: AccordionHeaderProps) => { return ( diff --git a/src/components/Accordion/Context.ts b/src/components/Accordion/Context.ts index d038fa05..6ab0f130 100644 --- a/src/components/Accordion/Context.ts +++ b/src/components/Accordion/Context.ts @@ -14,7 +14,7 @@ export const useAccordionContext = () => { const context = useContext(AccordionContext); if (context === undefined) { throw new Error( - 'useToggleButtonContext must be used within a ToggleButtonGroupContext', + 'useAccordionContext must be used within a AccordionContext', ); } From a78d596ea77015eeb05f777a7d9ead6e7d4f3d3b Mon Sep 17 00:00:00 2001 From: Albert Ohrem Larsen Date: Wed, 22 Jun 2022 14:40:02 +0200 Subject: [PATCH 10/26] code cleanup --- .husky/pre-commit | 0 src/components/Accordion/Accordion.test.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) mode change 100644 => 100755 .husky/pre-commit diff --git a/.husky/pre-commit b/.husky/pre-commit old mode 100644 new mode 100755 diff --git a/src/components/Accordion/Accordion.test.tsx b/src/components/Accordion/Accordion.test.tsx index 82a7efc7..538d9c68 100644 --- a/src/components/Accordion/Accordion.test.tsx +++ b/src/components/Accordion/Accordion.test.tsx @@ -7,7 +7,7 @@ import { Accordion } from './Accordion'; import { AccordionHeader } from './AccordionHeader'; import { AccordionContent } from './AccordionContent'; -const render = (props: Partial = {})=>{ +const render = (props: Partial = {}) => { const allProps = { children: ( <> From d2894bf0390b3ddb1c19c9ada64d23641406394f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20Carson=20Bogsrud?= Date: Wed, 22 Jun 2022 15:43:27 +0200 Subject: [PATCH 11/26] add expand/collapse icon --- src/components/Accordion/AccordionHeader.tsx | 5 +++++ src/components/Accordion/expand-collapse.svg | 3 +++ 2 files changed, 8 insertions(+) create mode 100644 src/components/Accordion/expand-collapse.svg diff --git a/src/components/Accordion/AccordionHeader.tsx b/src/components/Accordion/AccordionHeader.tsx index 61e52396..a46a9372 100644 --- a/src/components/Accordion/AccordionHeader.tsx +++ b/src/components/Accordion/AccordionHeader.tsx @@ -3,6 +3,7 @@ import cn from 'classnames'; import classes from './AccordionHeader.module.css'; import { useAccordionContext } from './Context'; +import { ReactComponent as ExpandCollapseArrow } from './expand-collapse.svg'; export interface AccordionHeaderProps { children?: React.ReactNode; @@ -22,6 +23,10 @@ export const AccordionHeader = ({ children }: AccordionHeaderProps) => { aria-expanded={open} type='button' > + {children} ); diff --git a/src/components/Accordion/expand-collapse.svg b/src/components/Accordion/expand-collapse.svg new file mode 100644 index 00000000..58625dc5 --- /dev/null +++ b/src/components/Accordion/expand-collapse.svg @@ -0,0 +1,3 @@ + + + From 412df2df15b84edf486e6c990a63a29de1e6d711 Mon Sep 17 00:00:00 2001 From: Albert Ohrem Larsen Date: Wed, 22 Jun 2022 16:12:56 +0200 Subject: [PATCH 12/26] css cleanup --- src/components/Accordion/Accordion.module.css | 23 +++++----- .../Accordion/AccordionContent.module.css | 14 +++---- .../Accordion/AccordionHeader.module.css | 42 +++++++++++-------- 3 files changed, 43 insertions(+), 36 deletions(-) diff --git a/src/components/Accordion/Accordion.module.css b/src/components/Accordion/Accordion.module.css index 81314847..86ff2020 100644 --- a/src/components/Accordion/Accordion.module.css +++ b/src/components/Accordion/Accordion.module.css @@ -1,13 +1,14 @@ .accordion { - --component-accordion-border-top-style: solid; - --component-accordion-border-top-color: var(--colors-neutral-200); - --component-accordion-border-top-width: var(--border-width-thin); - --component-accordion-background: var(--colors-neutral-000); - --component-accordion-width: 100%; - border-top-width: var(--component-accordion-border-top-width); - border-top-style: var(--component-accordion-border-top-style); - border-top-color: var(--component-accordion-border-top-color); - background-color: var(--component-accordion-background); - padding: var(--component-panel-space-padding-gap-horizontal-md); - width: var(--component-accordion-width); + --component-accordion-border_top_style: solid; + --component-accordion-border_top_color: var(--colors-neutral-200); + --component-accordion-border_top_width: var(--border-width-thin); + --component-accordion-color-background: var(--colors-neutral-000); + --component-accordion-space-padding: 1.2 rem; + --component-panel-size-width: 100%; + border-top-width: var(--component-accordion-border_top-width); + border-top-style: var(--component-accordion-border_top-style); + border-top-color: var(--component-accordion-border_top-color); + background-color: var(--component-accordion-color-background); + padding: var(--component-accordion-space-padding); + width: var(--component-panel-size-width); } diff --git a/src/components/Accordion/AccordionContent.module.css b/src/components/Accordion/AccordionContent.module.css index 1492a12c..3c41d799 100644 --- a/src/components/Accordion/AccordionContent.module.css +++ b/src/components/Accordion/AccordionContent.module.css @@ -1,7 +1,7 @@ -.accordion-content{ - --component-accordion-content-margin-left: 20px; - --component-accordion-content-margin-top: 10px; - font-family: inherit; - margin-left: var(--component-accordion-content-margin-left); - margin-top: var(--component-accordion-content-margin-top); -} \ No newline at end of file +.accordion-content { + --component-accordion-content-space-margin_left: 20px; + --component-accordion-content-space-margin_top: 10px; + font-family: inherit; + margin-left: var(--component-accordion-content-space-margin_left); + margin-top: var(--component-accordion-content-space-margin_top); +} diff --git a/src/components/Accordion/AccordionHeader.module.css b/src/components/Accordion/AccordionHeader.module.css index 317b6bf6..54908002 100644 --- a/src/components/Accordion/AccordionHeader.module.css +++ b/src/components/Accordion/AccordionHeader.module.css @@ -1,19 +1,25 @@ -.accordion-header{ - --component-accordion-header-width: 100%; - --component-accordion-header-padding: 0; - --component-accordion-header-border: none; - --component-accordion-header-background: none; - --component-accordion-header-text-align: start; - --component-accordion-header-margin-left: 20px; - --component-accordion-header-font-size: var(--font-size-300); - --component-accordion-header-font-weight: var(--component-panel-weight-heading); - font-family: inherit; - width: var(--component-accordion-header-width); - padding: var(--component-accordion-header-padding); - border: var(--component-accordion-header-border); - background: var(--component-accordion-header-background); - text-align: var(--component-accordion-header-text-align); - margin-left: var(--component-accordion-header-margin-left); - font-size: var(--component-accordion-header-font-size); - font-weight: var(--component-accordion-header-font-weight); +.accordion_header { + --component-accordion_header-space-width: 100%; + --component-accordion_header-space-padding: 0; + --component-accordion_header-border_style: none; + --component-accordion_header-color-background: none; + --component-accordion_header-text-align: start; + --component-accordion_header-space-margin_left: 20px; + --component-accordion_header-font_size: var(--font-size-300); + --component-accordion_header-font_weight: var( + --component-panel-weight-heading + ); + font-family: inherit; + width: var(--component-accordion_header-space-width); + padding: var(--component-accordion_header-space-padding); + border: var(--component-accordion_header-border_style); + background: var(--component-accordion_header-color-background); + text-align: var(--component-accordion_header-text-align); + margin-left: var(--component-accordion_header-margin-left); + font-size: var(--component-accordion_header-font-size); + font-weight: var(--component-accordion_header-font_weight); +} + +.acoordion-header-actions { + display: inline-block; } From 747252455f40635cdfc731fcb55f7fe895f85d38 Mon Sep 17 00:00:00 2001 From: Albert Ohrem Larsen Date: Thu, 23 Jun 2022 17:25:54 +0200 Subject: [PATCH 13/26] border styling --- src/components/Accordion/Accordion.module.css | 10 ++-------- src/components/Accordion/Accordion.stories.module.css | 6 +++--- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/src/components/Accordion/Accordion.module.css b/src/components/Accordion/Accordion.module.css index 86ff2020..741e2a90 100644 --- a/src/components/Accordion/Accordion.module.css +++ b/src/components/Accordion/Accordion.module.css @@ -1,14 +1,8 @@ .accordion { - --component-accordion-border_top_style: solid; - --component-accordion-border_top_color: var(--colors-neutral-200); - --component-accordion-border_top_width: var(--border-width-thin); --component-accordion-color-background: var(--colors-neutral-000); - --component-accordion-space-padding: 1.2 rem; + --component-accordion-space-padding: 1.2rem; --component-panel-size-width: 100%; - border-top-width: var(--component-accordion-border_top-width); - border-top-style: var(--component-accordion-border_top-style); - border-top-color: var(--component-accordion-border_top-color); background-color: var(--component-accordion-color-background); - padding: var(--component-accordion-space-padding); width: var(--component-panel-size-width); + border-right-style: none; } diff --git a/src/components/Accordion/Accordion.stories.module.css b/src/components/Accordion/Accordion.stories.module.css index f9835508..bfd85744 100644 --- a/src/components/Accordion/Accordion.stories.module.css +++ b/src/components/Accordion/Accordion.stories.module.css @@ -1,3 +1,3 @@ -.accordion-div{ - width: 80vw; -} \ No newline at end of file +.container { + width: 80vw; +} From 45769581a14e7e96c5d41f35d98b282486586232 Mon Sep 17 00:00:00 2001 From: Albert Ohrem Larsen Date: Thu, 23 Jun 2022 17:34:26 +0200 Subject: [PATCH 14/26] delete unecessary css --- .../Accordion/AccordionHeader.module.css | 61 ++++++++++++++----- 1 file changed, 45 insertions(+), 16 deletions(-) diff --git a/src/components/Accordion/AccordionHeader.module.css b/src/components/Accordion/AccordionHeader.module.css index 54908002..4c80fe89 100644 --- a/src/components/Accordion/AccordionHeader.module.css +++ b/src/components/Accordion/AccordionHeader.module.css @@ -1,25 +1,54 @@ -.accordion_header { +.accordion-header { --component-accordion_header-space-width: 100%; --component-accordion_header-space-padding: 0; - --component-accordion_header-border_style: none; - --component-accordion_header-color-background: none; - --component-accordion_header-text-align: start; - --component-accordion_header-space-margin_left: 20px; - --component-accordion_header-font_size: var(--font-size-300); - --component-accordion_header-font_weight: var( - --component-panel-weight-heading - ); - font-family: inherit; + --component-accordion_header-border_top_style: solid; + --component-accordion_header-border_top_color: var(--colors-neutral-200); + --component-accordion_header-border_top_width: var(--border-width-thin); + --component-accordion_header-color-background: var(--colors-neutral-000); width: var(--component-accordion_header-space-width); padding: var(--component-accordion_header-space-padding); - border: var(--component-accordion_header-border_style); - background: var(--component-accordion_header-color-background); + border-top-width: var(--component-accordion_header-border_top_width); + border-top-style: var(--component-accordion_header-border_top_style); + border-top-color: var(--component-accordion_header-border_top_color); + border-bottom-style: var(--component-accordion_header-border_bottom_style); + background-color: var(--component-accordion_header-color-background); text-align: var(--component-accordion_header-text-align); margin-left: var(--component-accordion_header-margin-left); - font-size: var(--component-accordion_header-font-size); - font-weight: var(--component-accordion_header-font_weight); } -.acoordion-header-actions { - display: inline-block; +.accordion-header-button { + --component-accordion_header-button-space-width: 100%; + --component-accordion_header-button-space-padding: 0; + --component-accordion_header-button-border_top_style: none; + --component-accordion_header-button-border_bottom_style: none; + --component-accordion_header-button-border_right_style: none; + --component-accordion_header-button-border_left_style: none; + --component-accordion_header-button-font_size: var(--font-size-300); + --component-accordion_header-button-font_weight: var( + --component-panel-weight-heading + ); + --component-accordion_header-button-space-padding: 1.2rem; + --component-accordion_header-button-color-background: none; + font-family: inherit; + width: auto; + padding: var(--component-accordion_header-button-space-padding); + border-top-style: var(--component-accordion_header-button-border_top_style); + border-bottom-style: var( + --component-accordion_header-button-border_bottom_style + ); + border-left-style: var(--component-accordion_header-button-border_left_style); + border-right-style: var( + --component-accordion_header-button-border_right_style + ); + background-color: var(--component-accordion_header-button-color-background); + text-align: var(--component-accordion_header-button-text-align); + margin-left: var(--component-accordion_header-button-margin-left); + font-size: var(--component-accordion_header-button-font-size); + font-weight: var(--component-accordion_header-button-font_weight); +} + +.accordion-header__actions { + margin-top: 0.3rem; + float: right; + width: max-content; } From c3e87f0d59e4baaf436339e07b832aa2581f8013 Mon Sep 17 00:00:00 2001 From: Albert Ohrem Larsen Date: Thu, 23 Jun 2022 17:35:25 +0200 Subject: [PATCH 15/26] Add action prop and change func name --- .../Accordion/Accordion.stories.tsx | 20 ++++++------ src/components/Accordion/Accordion.tsx | 12 +++---- src/components/Accordion/AccordionContent.tsx | 4 +-- src/components/Accordion/AccordionHeader.tsx | 31 ++++++++++--------- src/components/Accordion/Context.ts | 8 ++--- 5 files changed, 36 insertions(+), 39 deletions(-) diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx index f0fb8c47..de4dd779 100644 --- a/src/components/Accordion/Accordion.stories.tsx +++ b/src/components/Accordion/Accordion.stories.tsx @@ -5,8 +5,9 @@ import cn from 'classnames'; import { StoryPage } from '@sb/StoryPage'; +import { Button } from '../Button'; + import { Accordion } from './Accordion'; -import type { AccordionContextProps } from './Context'; import { AccordionHeader } from './AccordionHeader'; import { AccordionContent } from './AccordionContent'; import classes from './Accordion.stories.module.css'; @@ -41,28 +42,29 @@ const Template: ComponentStory = () => { const [open1, setOpen1] = useState(false); const [open2, setOpen2] = useState(false); - const handleChange1 = ({ open: isOpen }: AccordionContextProps) => { - setOpen1(!isOpen); + const handleClick1 = () => { + setOpen1(!open1); }; - const handleChange2 = ({ open: isOpen }: AccordionContextProps) => { - setOpen2(!isOpen); + const handleClick2 = () => { + setOpen2(!open2); }; const AccordionExampleContent = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'; + const ActionButton = ; return ( -
+
- Accordion 1 + Accordion 1 {AccordionExampleContent} Accordion 2 diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index c7223377..90917165 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -1,26 +1,22 @@ import React from 'react'; import cn from 'classnames'; -import type { ChangeHandler, AccordionContextProps } from './Context'; +import type { ClickHandler } from './Context'; import { AccordionContext } from './Context'; import classes from './Accordion.module.css'; export interface AccordionProps { children: React.ReactNode; - onChange: ChangeHandler; + onClick: ClickHandler; open: boolean; } -export const Accordion = ({ children, open, onChange }: AccordionProps) => { - const handleChange = ({ open: isOpen }: AccordionContextProps) => { - onChange({ open: isOpen }); - }; - +export const Accordion = ({ children, open, onClick }: AccordionProps) => { return (
diff --git a/src/components/Accordion/AccordionContent.tsx b/src/components/Accordion/AccordionContent.tsx index 4a9a5310..48408818 100644 --- a/src/components/Accordion/AccordionContent.tsx +++ b/src/components/Accordion/AccordionContent.tsx @@ -13,8 +13,8 @@ export const AccordionContent = ({ children }: AccordionContentProps) => { return (
- {open && ( // eslint-disable-next-line -
{ - const { onChange, open } = useAccordionContext(); - - const handleChange = () => { - onChange({ open }); - }; +export const AccordionHeader = ({ + children, + actions, +}: AccordionHeaderProps) => { + const { onClick, open } = useAccordionContext(); return ( - +
+ +
{actions}
+
); }; diff --git a/src/components/Accordion/Context.ts b/src/components/Accordion/Context.ts index 6ab0f130..4e869b73 100644 --- a/src/components/Accordion/Context.ts +++ b/src/components/Accordion/Context.ts @@ -1,13 +1,9 @@ import { createContext, useContext } from 'react'; -export interface AccordionContextProps { - open: boolean; -} - -export type ChangeHandler = ({ open }: AccordionContextProps) => void; +export type ClickHandler = () => void; export const AccordionContext = createContext< - { open: boolean; onChange: ChangeHandler } | undefined + { open: boolean; onClick: ClickHandler } | undefined >(undefined); export const useAccordionContext = () => { From e09b0883ceb20602ea800714f78975b0dedd7ac6 Mon Sep 17 00:00:00 2001 From: Albert Ohrem Larsen Date: Fri, 24 Jun 2022 10:24:54 +0200 Subject: [PATCH 16/26] add icon and header title flex --- src/components/Accordion/Accordion.module.css | 1 - .../Accordion/Accordion.stories.tsx | 4 +- .../Accordion/AccordionContent.module.css | 4 -- .../Accordion/AccordionHeader.module.css | 62 +++++++++---------- src/components/Accordion/AccordionHeader.tsx | 7 ++- 5 files changed, 38 insertions(+), 40 deletions(-) diff --git a/src/components/Accordion/Accordion.module.css b/src/components/Accordion/Accordion.module.css index 741e2a90..a3389f25 100644 --- a/src/components/Accordion/Accordion.module.css +++ b/src/components/Accordion/Accordion.module.css @@ -1,6 +1,5 @@ .accordion { --component-accordion-color-background: var(--colors-neutral-000); - --component-accordion-space-padding: 1.2rem; --component-panel-size-width: 100%; background-color: var(--component-accordion-color-background); width: var(--component-panel-size-width); diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx index de4dd779..2dabde61 100644 --- a/src/components/Accordion/Accordion.stories.tsx +++ b/src/components/Accordion/Accordion.stories.tsx @@ -51,7 +51,7 @@ const Template: ComponentStory = () => { }; const AccordionExampleContent = - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'; + 'Accordion content (No preset top spacing, enabling full customization).'; const ActionButton = ; return ( @@ -67,7 +67,7 @@ const Template: ComponentStory = () => { onClick={handleClick2} open={open2} > - Accordion 2 + Accordion 2 {AccordionExampleContent}
diff --git a/src/components/Accordion/AccordionContent.module.css b/src/components/Accordion/AccordionContent.module.css index 3c41d799..3d285ffa 100644 --- a/src/components/Accordion/AccordionContent.module.css +++ b/src/components/Accordion/AccordionContent.module.css @@ -1,7 +1,3 @@ .accordion-content { - --component-accordion-content-space-margin_left: 20px; - --component-accordion-content-space-margin_top: 10px; font-family: inherit; - margin-left: var(--component-accordion-content-space-margin_left); - margin-top: var(--component-accordion-content-space-margin_top); } diff --git a/src/components/Accordion/AccordionHeader.module.css b/src/components/Accordion/AccordionHeader.module.css index 4c80fe89..c343dfb9 100644 --- a/src/components/Accordion/AccordionHeader.module.css +++ b/src/components/Accordion/AccordionHeader.module.css @@ -1,54 +1,54 @@ .accordion-header { - --component-accordion_header-space-width: 100%; - --component-accordion_header-space-padding: 0; --component-accordion_header-border_top_style: solid; --component-accordion_header-border_top_color: var(--colors-neutral-200); --component-accordion_header-border_top_width: var(--border-width-thin); --component-accordion_header-color-background: var(--colors-neutral-000); - width: var(--component-accordion_header-space-width); - padding: var(--component-accordion_header-space-padding); + display: flex; border-top-width: var(--component-accordion_header-border_top_width); border-top-style: var(--component-accordion_header-border_top_style); border-top-color: var(--component-accordion_header-border_top_color); - border-bottom-style: var(--component-accordion_header-border_bottom_style); background-color: var(--component-accordion_header-color-background); - text-align: var(--component-accordion_header-text-align); - margin-left: var(--component-accordion_header-margin-left); } -.accordion-header-button { - --component-accordion_header-button-space-width: 100%; - --component-accordion_header-button-space-padding: 0; - --component-accordion_header-button-border_top_style: none; - --component-accordion_header-button-border_bottom_style: none; - --component-accordion_header-button-border_right_style: none; - --component-accordion_header-button-border_left_style: none; - --component-accordion_header-button-font_size: var(--font-size-300); - --component-accordion_header-button-font_weight: var( +.accordion-header-title { + --component-accordion_header_title-spacing-margin_left: 2.5rem; + --component-accordion_header_title-border_top_style: none; + --component-accordion_header_title-border_bottom_style: none; + --component-accordion_header_title-border_right_style: none; + --component-accordion_header_title-border_left_style: none; + --component-accordion_header_title-font_size: var(--font-size-300); + --component-accordion_header_title-font_weight: var( --component-panel-weight-heading ); - --component-accordion_header-button-space-padding: 1.2rem; - --component-accordion_header-button-color-background: none; + --component-accordion_header_title-color-background: none; font-family: inherit; - width: auto; - padding: var(--component-accordion_header-button-space-padding); - border-top-style: var(--component-accordion_header-button-border_top_style); + flex: 1 1 auto; + border-top-style: var(--component-accordion_header_title-border_top_style); border-bottom-style: var( - --component-accordion_header-button-border_bottom_style + --component-accordion_header_title-border_bottom_style ); - border-left-style: var(--component-accordion_header-button-border_left_style); + border-left-style: var(--component-accordion_header_title-border_left_style); border-right-style: var( - --component-accordion_header-button-border_right_style + --component-accordion_header_title-border_right_style ); - background-color: var(--component-accordion_header-button-color-background); - text-align: var(--component-accordion_header-button-text-align); - margin-left: var(--component-accordion_header-button-margin-left); - font-size: var(--component-accordion_header-button-font-size); - font-weight: var(--component-accordion_header-button-font_weight); + background-color: var(--component-accordion_header_title-color-background); + text-align: var(--component-accordion_header_title-text-align); + margin-left: var(--component-accordion_header_title-margin-left); + font-size: var(--component-accordion_header_title-font_size); + font-weight: var(--component-accordion_header_title-font_weight); + margin-left: var(--component-accordion_header_title-spacing-margin_left); } .accordion-header__actions { margin-top: 0.3rem; - float: right; - width: max-content; +} + +.accordion-header-icon { + padding-top: 1rem; + margin-left: 2.5rem; +} + +.accordion-header-icon__opened { + transform: rotate(90deg); + margin-left: 3rem; } diff --git a/src/components/Accordion/AccordionHeader.tsx b/src/components/Accordion/AccordionHeader.tsx index 178bdcc4..75e50000 100644 --- a/src/components/Accordion/AccordionHeader.tsx +++ b/src/components/Accordion/AccordionHeader.tsx @@ -19,12 +19,15 @@ export const AccordionHeader = ({ return (
; return (
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index 90917165..cea971f3 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -1,23 +1,32 @@ import React from 'react'; -import cn from 'classnames'; import type { ClickHandler } from './Context'; import { AccordionContext } from './Context'; import classes from './Accordion.module.css'; export interface AccordionProps { - children: React.ReactNode; + children?: React.ReactNode; onClick: ClickHandler; open: boolean; + headerId: string; + contentId: string; } -export const Accordion = ({ children, open, onClick }: AccordionProps) => { +export const Accordion = ({ + children, + open, + onClick, + headerId, + contentId, +}: AccordionProps) => { return ( -
+
{children} diff --git a/src/components/Accordion/AccordionContent.tsx b/src/components/Accordion/AccordionContent.tsx index d36c47bc..d21e218f 100644 --- a/src/components/Accordion/AccordionContent.tsx +++ b/src/components/Accordion/AccordionContent.tsx @@ -1,16 +1,33 @@ import React from 'react'; -import cn from 'classnames'; import { useAccordionContext } from './Context'; export interface AccordionContentProps { children?: React.ReactNode; + contentId: string; + headerId: string; } -export const AccordionContent = ({ children }: AccordionContentProps) => { +export const AccordionContent = ({ + children, + contentId, + headerId, +}: AccordionContentProps) => { const { open } = useAccordionContext(); - return
{open &&
{children}
}
; + return ( +
+ {open && ( +
+ {children} +
+ )} +
+ ); }; export default AccordionContent; diff --git a/src/components/Accordion/AccordionHeader.module.css b/src/components/Accordion/AccordionHeader.module.css index acde18f3..cb93cbfe 100644 --- a/src/components/Accordion/AccordionHeader.module.css +++ b/src/components/Accordion/AccordionHeader.module.css @@ -43,7 +43,7 @@ margin-top: 0.3rem; } -.accordion-header-icon { +.accordion-header__icon { padding-top: 1rem; margin-left: 2.5rem; } diff --git a/src/components/Accordion/AccordionHeader.tsx b/src/components/Accordion/AccordionHeader.tsx index d2ab71ef..818b46b4 100644 --- a/src/components/Accordion/AccordionHeader.tsx +++ b/src/components/Accordion/AccordionHeader.tsx @@ -14,13 +14,13 @@ export const AccordionHeader = ({ children, actions, }: AccordionHeaderProps) => { - const { onClick, open } = useAccordionContext(); + const { onClick, open, headerId, contentId } = useAccordionContext(); return (
{children} diff --git a/src/components/Accordion/Context.ts b/src/components/Accordion/Context.ts index 4e869b73..a110bd4a 100644 --- a/src/components/Accordion/Context.ts +++ b/src/components/Accordion/Context.ts @@ -3,7 +3,13 @@ import { createContext, useContext } from 'react'; export type ClickHandler = () => void; export const AccordionContext = createContext< - { open: boolean; onClick: ClickHandler } | undefined + | { + open: boolean; + onClick: ClickHandler; + headerId: string; + contentId: string; + } + | undefined >(undefined); export const useAccordionContext = () => { From dfcaaf8e707b17182515680811976e7ef26b5d4a Mon Sep 17 00:00:00 2001 From: Albert Ohrem Larsen Date: Mon, 25 Jul 2022 09:12:50 +0200 Subject: [PATCH 25/26] fix css --- src/components/Accordion/Accordion.module.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Accordion/Accordion.module.css b/src/components/Accordion/Accordion.module.css index a3389f25..2a10a2e8 100644 --- a/src/components/Accordion/Accordion.module.css +++ b/src/components/Accordion/Accordion.module.css @@ -3,5 +3,4 @@ --component-panel-size-width: 100%; background-color: var(--component-accordion-color-background); width: var(--component-panel-size-width); - border-right-style: none; } From df94ac850b38f368dc6df880a9deeb716ecf8886 Mon Sep 17 00:00:00 2001 From: Albert Ohrem Larsen Date: Mon, 25 Jul 2022 10:45:49 +0200 Subject: [PATCH 26/26] implemented usage of useId --- src/components/Accordion/Accordion.stories.tsx | 7 +------ src/components/Accordion/Accordion.tsx | 14 ++++---------- src/components/Accordion/AccordionContent.tsx | 10 ++-------- .../Accordion/AccordionHeader.module.css | 3 ++- 4 files changed, 9 insertions(+), 25 deletions(-) diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx index 95acaec8..77c77ef6 100644 --- a/src/components/Accordion/Accordion.stories.tsx +++ b/src/components/Accordion/Accordion.stories.tsx @@ -51,12 +51,7 @@ const Template: ComponentStory = () => { }; const AccordionExampleContent = - 'Accordion content (No preset top spacing, enabling full customization).'; - - const HeaderId1 = 'accordion-header-1'; - const ContentId1 = 'accordion-content-1'; - const HeaderId2 = 'accordion-header-2'; - const ContentId2 = 'accordion-content-2'; + 'Accordion-innhold uten css for å tilrettelegge for selvalgt styling'; const ActionButton = ; return ( diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index cea971f3..32d4d616 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useId } from 'react'; import type { ClickHandler } from './Context'; import { AccordionContext } from './Context'; @@ -8,17 +8,11 @@ export interface AccordionProps { children?: React.ReactNode; onClick: ClickHandler; open: boolean; - headerId: string; - contentId: string; } -export const Accordion = ({ - children, - open, - onClick, - headerId, - contentId, -}: AccordionProps) => { +export const Accordion = ({ children, open, onClick }: AccordionProps) => { + const headerId = useId(); + const contentId = useId(); return (
{ - const { open } = useAccordionContext(); +export const AccordionContent = ({ children }: AccordionContentProps) => { + const { open, contentId, headerId } = useAccordionContext(); return (
diff --git a/src/components/Accordion/AccordionHeader.module.css b/src/components/Accordion/AccordionHeader.module.css index cb93cbfe..4797370f 100644 --- a/src/components/Accordion/AccordionHeader.module.css +++ b/src/components/Accordion/AccordionHeader.module.css @@ -48,7 +48,8 @@ margin-left: 2.5rem; } -.accordion-header-icon--opened { +.accordion-header__icon--opened { transform: rotate(90deg); + margin-top: 0.3rem; margin-left: 3rem; }