@scality/core-ui 0.146.0 → 0.148.0

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

@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+
+import { spacing, Stack } from '../../spacing';
+import { Box } from '../box/Box';
+import { Icon } from '../icon/Icon.component';
+
+import styled from 'styled-components';
+
+import { Text } from '../text/Text.component';
+
+export type AccordionProps = {
+  title: string;
+  id: string;
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+};
+
+const AccordionHeader = styled.button`
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: none;
+  width: 100%;
+  cursor: pointer;
+  background-color: transparent;
+  color: ${(props) => props.theme.textPrimary};
+  padding: 0;
+`;
+const AccordionContainer = styled.div<{
+  isOpen: boolean;
+}>`
+  overflow: hidden;
+  opacity: ${(props) => (props.isOpen ? 1 : 0)};
+  transition:
+    height 0.3s ease-in,
+    opacity 0.3s ease-in,
+    visibility 0.3s;
+  visibility: ${(props) => (props.isOpen ? 'visible' : 'hidden')};
+`;
+const Wrapper = styled.div`
+  padding: ${spacing.r8} 0 ${spacing.r8} ${spacing.r20};
+`;
+
+export const Accordion = ({ title, id, style, children }: AccordionProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleToggleContent = (
+    e:
+      | React.MouseEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
+  ) => {
+    setIsOpen((prev) => !prev);
+  };
+
+  return (
+    <Box style={{ width: '100%', height: 'auto' }}>
+      <h3 style={{ margin: 0 }}>
+        <AccordionHeader
+          type="button"
+          id={`Accordion-header-${id}`}
+          onClick={handleToggleContent}
+          aria-controls={id}
+          aria-expanded={isOpen}
+          onKeyDown={(e) =>
+            (e.key === 'Enter' || e.key === ' ') && handleToggleContent
+          }
+        >
+          <Stack direction="horizontal" gap="r8">
+            <Icon
+              name="Chevron-up"
+              size="lg"
+              style={{
+                transform: isOpen ? 'rotate(0deg)' : 'rotate(180deg)',
+                transition: 'transform 0.3s ease-in',
+              }}
+            />
+            <Text isEmphazed>{title}</Text>
+          </Stack>
+        </AccordionHeader>
+      </h3>
+
+      <AccordionContainer
+        ref={(element) => {
+          if (isOpen) {
+            element?.style.setProperty('height', element.scrollHeight + 'px');
+          } else {
+            element?.style.setProperty('height', '0px');
+          }
+        }}
+        isOpen={isOpen}
+        id={id}
+        aria-labelledby={`Accordion-header-${id}`}
+        role="region"
+      >
+        <Wrapper style={style}>{children}</Wrapper>
+      </AccordionContainer>
+    </Box>
+  );
+};

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

@@ -0,0 +1,52 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { Accordion } from './Accordion.component';
+import userEvent from '@testing-library/user-event';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+describe('Accordion', () => {
+  const selectors = {
+    accordionToggle: () => screen.getByRole('button'),
+    accordionContainer: () => screen.getByRole('region'),
+    accordionContent: () => screen.queryByText(/Test content/i),
+  };
+  const renderAccordion = () => {
+    const queryClient = new QueryClient();
+    render(
+      <QueryClientProvider client={queryClient}>
+        <Accordion title="Advanced Testings" id="test-accordion">
+          <div>Test content</div>
+        </Accordion>
+      </QueryClientProvider>,
+    );
+  };
+  it('should render the Accordion component with title and content', () => {
+    renderAccordion();
+
+    const accordionToggle = selectors.accordionToggle();
+    expect(accordionToggle).toBeInTheDocument();
+    const accordionContent = selectors.accordionContent();
+    expect(accordionContent).toBeInTheDocument();
+  });
+
+  it('should toggle the content when clicking on the accordion header', () => {
+    renderAccordion();
+    const accordionToggle = selectors.accordionToggle();
+    const accordionContent = selectors.accordionContent();
+    expect(accordionContent).not.toBeVisible();
+    userEvent.click(accordionToggle);
+    expect(accordionContent).toBeVisible();
+  });
+
+  it('should toggle the content when pressing the enter key or space key on the accordion header', () => {
+    renderAccordion();
+    const accordionToggle = selectors.accordionToggle();
+    const accordionContent = selectors.accordionContent();
+    expect(accordionContent).not.toBeVisible();
+    accordionToggle.focus();
+    userEvent.keyboard('{enter}');
+    expect(accordionContent).toBeVisible();
+    userEvent.keyboard('{space}');
+    expect(accordionContent).not.toBeVisible();
+  });
+});

package/src/lib/components/tabsv2/Tabsv2.component.tsx

@@ -186,7 +186,6 @@ function Tabs({
   return (
     <TabsContext.Provider value={true}>
       <TabsContainer
-        // @ts-expect-error containerType is not yet a valid prop for react
         style={{ containerType: 'size' }}
         className={['sc-tabs', className].join(' ')}
         tabLineColor={tabLineColor}

package/src/lib/next.ts

@@ -15,3 +15,4 @@ export { HealthSelector } from './components/healthselectorv2/HealthSelector.com
 export { CoreUiThemeProvider } from './components/coreuithemeprovider/CoreUiThemeProvider';
 export { Box } from './components/box/Box';
 export { Input } from './components/inputv2/inputv2';
+export { Accordion } from './components/accordion/Accordion.component';

package/src/lib/organisms/attachments/AttachmentTable.tsx

@@ -97,8 +97,8 @@ const MenuContainer = styled.ul<{
       border: 1px solid ${props.theme.selectedActive};
   `
       : props.searchInputIsFocused
-      ? `border-bottom: 1px solid ${props.theme.selectedActive};`
-      : ''}
+        ? `border-bottom: 1px solid ${props.theme.selectedActive};`
+        : ''}
   border-top: 0;
   li {
     padding: ${spacing.r8};
@@ -497,6 +497,7 @@ export const AttachmentTable = <
             flex: 1.5,
             marginRight: '1.5rem',
           },
+          //@ts-expect-error
           Cell: ({
             value,
             row: { original: entity },

package/stories/Accordion/accordion.guideline.mdx

@@ -0,0 +1,33 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  Primary,
+  Controls,
+  Unstyled,
+  Source,
+  Title,
+} from '@storybook/blocks';
+import { Accordion } from '../../src/lib/components/accordion/Accordion.component';
+
+import * as Stories from './accordion.stories';
+
+<Meta of={Stories} name="Guideline" />
+
+# Accordion
+
+Accordions are used to toggle the visibility of content.  
+It is used to hide non essential information or to reduce the amount of information displayed on the screen.
+
+## Style
+
+Accordion component comes with a style prop that can be used to customize the appearance of the accordion content.
+The default style of the accordion container only includes padding.
+
+<Canvas of={Stories.WithCustomStyle} />
+
+## Playground
+
+<Canvas of={Stories.Playground} layout="fullscreen" />
+
+<Controls of={Stories.Playground} />

package/stories/Accordion/accordion.stories.tsx

@@ -0,0 +1,88 @@
+import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { useTheme } from 'styled-components';
+import {
+  Accordion,
+  AccordionProps,
+} from '../../src/lib/components/accordion/Accordion.component';
+import { Button } from '../../src/lib/components/buttonv2/Buttonv2.component';
+import { spacing, Stack } from '../../src/lib/spacing';
+import { Text } from '../../src/lib';
+
+type AccordionStory = StoryObj<AccordionProps>;
+
+const meta: Meta<AccordionProps> = {
+  title: 'Components/Accordion',
+  component: Accordion,
+  args: {
+    title: 'Accordion title',
+    children: (
+      <Stack direction="vertical" gap="r8">
+        <div>This is the content of the accordion.</div>
+        <Button label={'Check'} onClick={() => console.log('click')}></Button>
+      </Stack>
+    ),
+  },
+  argTypes: {
+    children: {
+      control: { disable: true },
+      description: 'Content of the accordion',
+      table: {
+        type: { summary: 'React.ReactNode' },
+      },
+    },
+    title: {
+      control: { type: 'text' },
+      description: 'Title of the accordion',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    style: {
+      control: { disable: true },
+      description: 'Use this to style the accordion content container',
+      table: { type: { summary: 'CSSProperties' } },
+    },
+    id: {
+      control: { disable: true },
+      table: { type: { summary: 'string' } },
+      description: 'Unique id for the accordion content container',
+    },
+  },
+};
+
+export default meta;
+
+export const Playground: AccordionStory = {};
+
+export const Stacked: AccordionStory = {
+  render: (args) => (
+    <Stack direction="vertical" gap="r8">
+      <Accordion {...args} />
+      <Accordion {...args} />
+      <Accordion {...args} />
+    </Stack>
+  ),
+};
+
+export const WithCustomStyle: AccordionStory = {
+  render: (args) => {
+    const { title } = args;
+    const theme = useTheme();
+
+    const style = {
+      backgroundColor: theme.statusHealthy,
+      borderRadius: spacing.r4,
+      padding: spacing.r16,
+      margin: spacing.r8,
+    };
+    return (
+      <Accordion {...args} style={style} title={title}>
+        <Text>The container of this accordion has a custom style</Text>
+      </Accordion>
+    );
+  },
+  args: {
+    title: 'Accordion with custom style',
+  },
+};

package/stories/form.stories.tsx

@@ -13,6 +13,7 @@ import { Text } from '../src/lib/components/text/Text.component';
 import { Toggle } from '../src/lib/components/toggle/Toggle.component';
 import { Stack } from '../src/lib/spacing';
 import { iconArgType } from './controls';
+import { Accordion } from '../src/lib/next';
 
 export default {
   title: 'Templates/Form',
@@ -251,3 +252,181 @@ export const PageFormWithIcon = {
     },
   },
 };
+
+export const FormWithAccordion = {
+  render: ({ kind, title, subTitle, icon, requireMode }) => {
+    const layout = {
+      kind,
+      title,
+      subTitle,
+      icon,
+    };
+    const [toggle, setToggle] = useState(true);
+    return (
+      <>
+        <Form
+          layout={layout}
+          requireMode={requireMode}
+          rightActions={
+            <Stack gap={'r16'}>
+              <Button variant="outline" label="Cancel" />
+              <Button
+                variant="primary"
+                label="Save"
+                icon={<Icon name="Save" />}
+              />
+            </Stack>
+          }
+          banner={
+            <Banner
+              variant="danger"
+              icon={<Icon name="Exclamation-circle" />}
+              title={'Error'}
+            >
+              There is an error
+            </Banner>
+          }
+        >
+          <FormSection
+            title={{
+              name: 'First part entity data',
+              helpTooltip: 'Tooltip of the first entity',
+              icon: 'Search',
+            }}
+          >
+            <FormGroup
+              direction="vertical"
+              label="Name"
+              id="name"
+              labelHelpTooltip="Name Tooltip"
+              content={<Input id="name" />}
+              help="Optional helper text"
+              required
+              disabled
+            ></FormGroup>
+            <FormGroup
+              direction="horizontal"
+              label="Email"
+              id="email"
+              labelHelpTooltip="Email Tooltip"
+              content={<Input id="email" />}
+              error="Invalid email format. Try with a better format."
+              helpErrorPosition="right"
+              required
+            ></FormGroup>
+          </FormSection>
+          <FormSection
+            title={{
+              name: 'Second part entity data',
+              helpTooltip: 'Tooltip of the Second entity',
+              icon: 'Search',
+            }}
+          >
+            <FormGroup
+              direction="horizontal"
+              label="Name"
+              id="name1"
+              labelHelpTooltip="Name Tooltip"
+              content={
+                <Toggle
+                  onChange={() => {
+                    setToggle(!toggle);
+                  }}
+                  toggle={toggle}
+                  name="toggle"
+                />
+              }
+              help="Optional helper text"
+              required={false}
+            ></FormGroup>
+            <FormGroup
+              direction="horizontal"
+              label="Email"
+              id="email1"
+              labelHelpTooltip="Email Tooltip"
+              content={<Input id="email1" />}
+              error="Invalid email format. Try with a better format."
+              helpErrorPosition="right"
+              required={false}
+            ></FormGroup>
+            <FormGroup
+              direction="horizontal"
+              label="Email long long long"
+              id="email-long1"
+              labelHelpTooltip="Email Tooltip"
+              content={<Input id="email-long1" />}
+              help="optional helper text"
+              helpErrorPosition="bottom"
+              required={false}
+            ></FormGroup>
+          </FormSection>
+          <FormSection>
+            <Accordion title="Advanced Settings" id="advanced-settings">
+              <FormGroup
+                direction="vertical"
+                label="Object Lock Mode"
+                id="object_lock_mode"
+                labelHelpTooltip="S3 Object Lock Retention"
+                content={
+                  <Stack direction="vertical">
+                    <Stack direction="vertical">
+                      <Stack>
+                        <input
+                          type="radio"
+                          name="locktype"
+                          id="locktype-governance"
+                          value="governance"
+                        />
+                        <label htmlFor="locktype-governance">Governance</label>
+                      </Stack>
+                      <Text isEmphazed color="textSecondary" variant="Smaller">
+                        An user with a specific IAM permissions can
+                        overwrite/delete protected object versions during the
+                        retention period.
+                      </Text>
+                    </Stack>
+                    <Stack>
+                      <input
+                        type="radio"
+                        name="locktype"
+                        id="locktype-compliance"
+                        value="compliance"
+                      />
+                      <label htmlFor="locktype-compliance">Compliance</label>
+                    </Stack>
+                    <Text isEmphazed color="textSecondary" variant="Smaller">
+                      No one can overwrite protected object versions during the
+                      retention period.
+                    </Text>
+                  </Stack>
+                }
+                required={true}
+              ></FormGroup>
+              <FormGroup
+                id="value-example"
+                label="Choose a value"
+                helpErrorPosition="bottom"
+                required
+                content={
+                  <Select
+                    id="value-example"
+                    placeholder="Select an option..."
+                    onChange={() => {}}
+                    value={'value-1'}
+                  >
+                    <Select.Option value={'value-1'}>Value 1</Select.Option>
+                    <Select.Option value={'value-2'}>Value 2</Select.Option>
+                    <Select.Option value={'value-3'}>Value 3</Select.Option>
+                  </Select>
+                }
+              />
+            </Accordion>
+          </FormSection>
+        </Form>
+      </>
+    );
+  },
+  args: {
+    requireMode: 'partial',
+  },
+};