LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat: multi open accordion (#963)

Browse Source 
* feat: 744 multi open accordion but not using pixelated icon anymore

* fix: fix size of the icon and color

* fix: remove styled stitches

* fix: remove styled stitches
This commit is contained in:
m.ray 2022-08-08 20:09:46 +02:00 committed by GitHub
parent f614ec9211
commit ba4954b52a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
libs/ui-toolkit/src/components/accordion/accordion.tsx
View File

@ -1,7 +1,7 @@
import React, { useState } from 'react';
import * as AccordionPrimitive from '@radix-ui/react-accordion';
import ChevronDownIcon from './chevron-down';
import classNames from 'classnames';
import { ChevronDownIcon } from '@radix-ui/react-icons';
export interface AccordionItemProps {
title: React.ReactNode;
@ -13,21 +13,20 @@ export interface AccordionProps {
}
export const Accordion = ({ panels }: AccordionProps) => {
const [value, setValue] = useState<string>('');
const [values, setValues] = useState<string[]>([]);
const triggerClassNames = classNames(
'w-full py-2 box-border',
'appearance-none cursor-pointer focus:outline-none',
'flex items-center justify-between border-b border-muted',
'text-left'
'text-left text-black dark:text-white'
);
return (
<AccordionPrimitive.Root
type="single"
type="multiple"
className="flex flex-col"
value={value}
onValueChange={setValue}
collapsible
value={values}
onValueChange={setValues}
>
{panels.map(({ title, content }, i) => (
<AccordionPrimitive.Item value={`item-${i + 1}`} key={`item-${i + 1}`}>
@ -37,12 +36,15 @@ export const Accordion = ({ panels }: AccordionProps) => {
className={triggerClassNames}
>
<p
className="inline-block text-footnote font-medium text-h6 text-black dark:text-white pt-5"
className="inline-block text-footnote font-medium text-h6 pt-5"
data-testid="accordion-title"
>
{title}
</p>
<ChevronDownIcon active={value === `item-${i + 1}`} aria-hidden />
<AccordionChevron
active={values.includes(`item-${i + 1}`)}
aria-hidden
/>
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
<AccordionPrimitive.Content
@ -58,3 +60,14 @@ export const Accordion = ({ panels }: AccordionProps) => {
</AccordionPrimitive.Root>
);
};
export const AccordionChevron = ({ active }: { active: boolean }) => {
return (
<ChevronDownIcon
className={classNames('w-20 h-20 transition ease-in-out duration-300', {
'transform rotate-180': active,
})}
aria-hidden
/>
);
};

31
libs/ui-toolkit/src/components/accordion/chevron-down.tsx
View File

@ -1,31 +0,0 @@
export const ChevronDownIcon = ({ active }: ChevronDownIconProps) => {
const rotate = active
? 'transform duration-300 ease rotate-180'
: 'transform duration-300 ease';
return (
<svg
width="14"
height="8"
aria-label="chevron icon"
data-testid="accordion-chevron-icon"
viewBox="0 0 14 8"
fill="fillCurrent"
xmlns="http://www.w3.org/2000/svg"
className={`${rotate} inline-block fill-black dark:fill-white mx-4`}
>
<rect x="12" y="0" width="2" height="2" />
<rect x="10" y="2" width="2" height="2" />
<rect x="8" y="4" width="2" height="2" />
<rect x="6" y="6" width="2" height="2" />
<rect x="4" y="4" width="2" height="2" />
<rect x="2" y="2" width="2" height="2" />
<rect x="0" y="0" width="2" height="2" />
</svg>
);
};
export interface ChevronDownIconProps {
active: boolean;
}
export default ChevronDownIcon;