V2 UI accordion component

deepfence_frontend/packages/ui-components/package.json

@@ -25,6 +25,7 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.0.1",
     "@radix-ui/react-checkbox": "^1.0.0",
     "@radix-ui/react-dialog": "^1.0.0",
     "@radix-ui/react-dropdown-menu": "^1.0.0",

deepfence_frontend/packages/ui-components/src/components/accordion/Accordion.stories.tsx

@@ -0,0 +1,43 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from './Accordion';
+
+export default {
+  title: 'Components/Accordion',
+  component: Accordion,
+} as ComponentMeta<typeof Accordion>;
+
+const Items = [
+  `Lorem Ipsum is simply dummy text of the printing and typesetting industry.`,
+  'Item 2',
+  'Item 3',
+];
+
+const DefaultTemplate: ComponentStory<typeof Accordion> = (args) => {
+  return (
+    <Accordion {...args} className="w-1/2">
+      {Items.map((item: string) => {
+        return (
+          <AccordionItem value={item} key={item}>
+            <AccordionTrigger>Click {item}</AccordionTrigger>
+            <AccordionContent>{`Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
+              when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, 
+              remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
+              and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`}</AccordionContent>
+          </AccordionItem>
+        );
+      })}
+    </Accordion>
+  );
+};
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+  type: 'multiple',
+  defaultValue: ['Item 2'],
+};

deepfence_frontend/packages/ui-components/src/components/accordion/Accordion.tsx

@@ -0,0 +1,97 @@
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import cx from 'classnames';
+import React from 'react';
+import { HiOutlineChevronDown } from 'react-icons/hi';
+import { twMerge } from 'tailwind-merge';
+
+import { Typography } from '../typography/Typography';
+
+export const Accordion = React.forwardRef<
+  HTMLDivElement,
+  AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps
+>(({ children, className, ...rest }, forwardedRef) => (
+  <AccordionPrimitive.Root
+    className={twMerge(
+      cx(
+        'w-full overflow-hidden',
+        'rounded-b-lg rounded-t-lg',
+        'border border-gray-200 dark:border-gray-700 dark:border-opacity-50', // border of container
+        'drop-shadow-[0px_1px_2px_rgba(0,_0,_0,_0.8),_0px_1px_2px_-1px_rgba(0,_0,_0,_0.1)]',
+        className,
+      ),
+    )}
+    ref={forwardedRef}
+    {...rest}
+  >
+    {children}
+  </AccordionPrimitive.Root>
+));
+
+export interface AccordionItemProps extends AccordionPrimitive.AccordionItemProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const AccordionItem = (props: AccordionItemProps) => {
+  const { children, value = '', className = '', ...rest } = props;
+  return (
+    <AccordionPrimitive.Item
+      value={value}
+      className={twMerge(
+        cx(
+          'w-full overflow-hidden text-gray-900 dark:text-white dark:bg-gray-800 border-b last:border-b-0', // border bottom on each header trigger except last
+          'border-gray-200 dark:border-gray-700 dark:border-opacity-50',
+          className,
+        ),
+      )}
+      {...rest}
+    >
+      {children}
+    </AccordionPrimitive.Item>
+  );
+};
+
+export const AccordionTrigger = React.forwardRef<
+  HTMLButtonElement,
+  AccordionPrimitive.AccordionTriggerProps
+>(({ children, className, ...props }, forwardedRef) => (
+  <AccordionPrimitive.Header className={cx('p-5')}>
+    <AccordionPrimitive.Trigger
+      className={cx(
+        'flex outline-none  place-items-center',
+        'w-full group',
+        `leading-4 ${Typography.size.base} ${Typography.weight.medium}`,
+        className,
+      )}
+      {...props}
+      ref={forwardedRef}
+    >
+      <span className="mr-auto text-left">{children}</span>
+      <span>
+        <HiOutlineChevronDown
+          aria-hidden
+          className="group-radix-state-open:first:rotate-180 transition duration-550 ease-out"
+        />
+      </span>
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+
+export const AccordionContent = React.forwardRef<
+  HTMLDivElement,
+  AccordionPrimitive.AccordionContentProps
+>(({ children, className, ...props }, forwardedRef) => (
+  <AccordionPrimitive.Content
+    className={cx(
+      'bg-white dark:bg-gray-900 p-2 w-full text-gray-500 dark:text-gray-400 leading-[150%]',
+      'radix-state-open:border-t dark:radix-state-open:border-gray-700 dark:radix-state-open:border-opacity-50', // border top of its content
+      'radix-state-open:animate-accordion-open',
+      'radix-state-closed:animate-accordion-closed',
+      className,
+    )}
+    {...props}
+    ref={forwardedRef}
+  >
+    <div>{children}</div>
+  </AccordionPrimitive.Content>
+));

deepfence_frontend/packages/ui-components/tailwind.config.cjs

@@ -239,6 +239,22 @@ module.exports = {
           '100%': { opacity: 1, transform: 'scale(1)' },
           '0%': { opacity: 0, transform: 'scale(0.96)' },
         },
+        'accordion-slide-down': {
+          from: {
+            height: 0,
+          },
+          to: {
+            height: 'var(--radix-accordion-content-height)',
+          },
+        },
+        'accordion-slide-up': {
+          from: {
+            height: 'var(--radix-accordion-content-height)',
+          },
+          to: {
+            height: 0,
+          },
+        },
       },
       animation: {
         // tooltip
@@ -258,6 +274,8 @@ module.exports = {
         'slide-opacity-out': 'slide-opacity-out 0.3s ease',
         'opacity-out': 'opacity-out 0.5s ease',
         'opacity-in': 'opacity-in 0.5s ease',
+        'accordion-open': 'accordion-slide-down 100ms cubic-bezier(0.16, 1, 0.3, 1)',
+        'accordion-closed': 'accordion-slide-up 100ms cubic-bezier(0.16, 1, 0.3, 1)',
       },
     },
   },