@scality/core-ui 0.157.0 → 0.159.0

package/dist/components/accordion/Accordion.component.d.ts

@@ -4,6 +4,8 @@ export type AccordionProps = {
     id: string;
     children: React.ReactNode;
     style?: React.CSSProperties;
+    open?: boolean;
+    isEmphazed?: boolean;
 };
-export declare const Accordion: ({ title, id, style, children }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Accordion: ({ title, id, style, children, open, isEmphazed, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Accordion.component.d.ts.map

package/dist/components/accordion/Accordion.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/accordion/Accordion.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAUxC,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAkCF,eAAO,MAAM,SAAS,mCAAoC,cAAc,4CAuDvE,CAAC"}
+{"version":3,"file":"Accordion.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/accordion/Accordion.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAUjD,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAkDF,eAAO,MAAM,SAAS,sDAOnB,cAAc,4CA4DhB,CAAC"}

package/dist/components/accordion/Accordion.component.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { spacing, Stack } from '../../spacing';
 import { Box } from '../box/Box';
 import { Icon } from '../icon/Icon.component';
@@ -8,6 +8,11 @@ import { Text } from '../text/Text.component';
 const AccordionContainer = styled(Box) `
   width: 100%;
   height: auto;
+  ${({ theme }) => `
+    border: 0.5px solid ${theme.border};
+    border-radius: 4px;
+    padding: ${spacing.r16};
+  `}
 `;
 const AccordionHeader = styled.button `
   -webkit-appearance: none;
@@ -20,6 +25,12 @@ const AccordionHeader = styled.button `
   color: ${(props) => props.theme.textPrimary};
   padding: 0;
   font-family: 'Lato';
+  ${({ isOpen, theme }) => isOpen &&
+    `
+    border-bottom: 0.5px solid ${theme.border};
+    padding-bottom: ${spacing.r16};
+    margin-bottom: ${spacing.r8};
+  `}
 `;
 const AccordionContent = styled.div `
   overflow: hidden;
@@ -33,15 +44,18 @@ const AccordionContent = styled.div `
 const Wrapper = styled.div `
   padding: ${spacing.r8} 0 ${spacing.r8} 0;
 `;
-export const Accordion = ({ title, id, style, children }) => {
-    const [isOpen, setIsOpen] = useState(false);
+export const Accordion = ({ title, id, style, children, open = false, isEmphazed = true, }) => {
+    const [isOpen, setIsOpen] = useState(open);
+    useMemo(() => {
+        setIsOpen(open);
+    }, [open]);
     const handleToggleContent = (e) => {
         setIsOpen((prev) => !prev);
     };
-    return (_jsxs(AccordionContainer, { children: [_jsx("h3", { style: { margin: 0 }, children: _jsx(AccordionHeader, { type: "button", id: `Accordion-header-${id}`, onClick: handleToggleContent, "aria-controls": id, "aria-expanded": isOpen, onKeyDown: (e) => (e.key === 'Enter' || e.key === ' ') && handleToggleContent, children: _jsxs(Stack, { direction: "horizontal", gap: "r8", children: [_jsx(Icon, { name: "Chevron-up", size: "lg", style: {
-                                    transform: isOpen ? 'rotate(0deg)' : 'rotate(180deg)',
+    return (_jsxs(AccordionContainer, { children: [_jsx("h3", { style: { margin: 0 }, children: _jsx(AccordionHeader, { isOpen: isOpen, type: "button", id: `Accordion-header-${id}`, onClick: handleToggleContent, "aria-controls": id, "aria-expanded": isOpen, onKeyDown: (e) => (e.key === 'Enter' || e.key === ' ') && handleToggleContent, children: _jsxs(Stack, { direction: "horizontal", gap: "r8", children: [_jsx(Icon, { name: "Chevron-up", size: "lg", style: {
+                                    transform: isOpen ? 'rotate(180deg)' : 'rotate(90deg)',
                                     transition: 'transform 0.3s ease-in',
-                                } }), _jsx(Text, { isEmphazed: true, children: title })] }) }) }), _jsx(AccordionContent, { ref: (element) => {
+                                } }), _jsx(Text, { isEmphazed: isEmphazed, children: title })] }) }) }), _jsx(AccordionContent, { ref: (element) => {
                     if (isOpen) {
                         element === null || element === void 0 ? void 0 : element.style.setProperty('height', element.scrollHeight + 'px');
                     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.157.0",
+  "version": "0.159.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",

package/src/lib/components/accordion/Accordion.component.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import { spacing, Stack } from '../../spacing';
 import { Box } from '../box/Box';
@@ -13,14 +13,24 @@ export type AccordionProps = {
   id: string;
   children: React.ReactNode;
   style?: React.CSSProperties;
+  open?: boolean;
+  isEmphazed?: boolean;
 };
 
 const AccordionContainer = styled(Box)`
   width: 100%;
   height: auto;
+  ${({ theme }) =>
+    `
+    border: 0.5px solid ${theme.border};
+    border-radius: 4px;
+    padding: ${spacing.r16};
+  `}
 `;
 
-const AccordionHeader = styled.button`
+const AccordionHeader = styled.button<{
+  isOpen?: boolean;
+}>`
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -31,7 +41,15 @@ const AccordionHeader = styled.button`
   color: ${(props) => props.theme.textPrimary};
   padding: 0;
   font-family: 'Lato';
+  ${({ isOpen, theme }) =>
+    isOpen &&
+    `
+    border-bottom: 0.5px solid ${theme.border};
+    padding-bottom: ${spacing.r16};
+    margin-bottom: ${spacing.r8};
+  `}
 `;
+
 const AccordionContent = styled.div<{
   isOpen: boolean;
 }>`
@@ -47,8 +65,19 @@ const Wrapper = styled.div`
   padding: ${spacing.r8} 0 ${spacing.r8} 0;
 `;
 
-export const Accordion = ({ title, id, style, children }: AccordionProps) => {
-  const [isOpen, setIsOpen] = useState(false);
+export const Accordion = ({
+  title,
+  id,
+  style,
+  children,
+  open = false,
+  isEmphazed = true,
+}: AccordionProps) => {
+  const [isOpen, setIsOpen] = useState(open);
+
+  useMemo(() => {
+    setIsOpen(open);
+  }, [open]);
 
   const handleToggleContent = (
     e:
@@ -62,6 +91,7 @@ export const Accordion = ({ title, id, style, children }: AccordionProps) => {
     <AccordionContainer>
       <h3 style={{ margin: 0 }}>
         <AccordionHeader
+          isOpen={isOpen}
           type="button"
           id={`Accordion-header-${id}`}
           onClick={handleToggleContent}
@@ -76,11 +106,11 @@ export const Accordion = ({ title, id, style, children }: AccordionProps) => {
               name="Chevron-up"
               size="lg"
               style={{
-                transform: isOpen ? 'rotate(0deg)' : 'rotate(180deg)',
+                transform: isOpen ? 'rotate(180deg)' : 'rotate(90deg)',
                 transition: 'transform 0.3s ease-in',
               }}
             />
-            <Text isEmphazed>{title}</Text>
+            <Text isEmphazed={isEmphazed}>{title}</Text>
           </Stack>
         </AccordionHeader>
       </h3>

package/src/lib/components/accordion/Accordion.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import React from 'react';
+import React, { useState } from 'react';
 import { Accordion } from './Accordion.component';
 import userEvent from '@testing-library/user-event';
 import { QueryClient, QueryClientProvider } from 'react-query';
@@ -10,16 +10,19 @@ describe('Accordion', () => {
     accordionContainer: () => screen.getByRole('region'),
     accordionContent: () => screen.queryByText(/Test content/i),
   };
-  const renderAccordion = () => {
+  const SUT = ({ open = false }) => {
     const queryClient = new QueryClient();
-    render(
+    return (
       <QueryClientProvider client={queryClient}>
-        <Accordion title="Advanced Testings" id="test-accordion">
+        <Accordion title="Advanced Testings" id="test-accordion" open={open}>
           <div>Test content</div>
         </Accordion>
-      </QueryClientProvider>,
+      </QueryClientProvider>
     );
   };
+  const renderAccordion = (open = false) => {
+    render(<SUT open={open} />);
+  };
   it('should render the Accordion component with title and content', () => {
     renderAccordion();
 
@@ -49,4 +52,28 @@ describe('Accordion', () => {
     userEvent.keyboard('{space}');
     expect(accordionContent).not.toBeVisible();
   });
+
+  it('should toggle the content when open prop changes', () => {
+    const queryClient = new QueryClient();
+    const TestWrapper = () => {
+      const [isOpen, setisOpen] = useState(false);
+      return (
+        <>
+          <button onClick={() => setisOpen(!isOpen)}>Test button</button>
+          <SUT open={isOpen} />
+        </>
+      );
+    };
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <TestWrapper />
+      </QueryClientProvider>,
+    );
+
+    userEvent.click(screen.getByRole('button', { name: /Test button/i }));
+    expect(selectors.accordionContent()).toBeInTheDocument();
+    userEvent.click(screen.getByRole('button', { name: /Test button/i }));
+    expect(selectors.accordionContent()).not.toBeVisible();
+  });
 });