@scality/core-ui 0.147.0 → 0.149.0

package/.github/workflows/github-pages.yml

@@ -2,15 +2,15 @@ name: Deploy Storybook
 
 on:
   push:
-    branches: development/1.0
+    branches: [development/1.0]
 jobs:
   deploy:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: '16'
+          node-version: 20
       - run: npm ci
       - run: npm run storybook:deploy -- --ci
         env:

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;AA2BF,eAAO,MAAM,SAAS,mCAAoC,cAAc,4CAkDvE,CAAC"}
+{"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"}

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

@@ -5,37 +5,43 @@ import { Box } from '../box/Box';
 import { Icon } from '../icon/Icon.component';
 import styled from 'styled-components';
 import { Text } from '../text/Text.component';
+const AccordionContainer = styled(Box) `
+  width: 100%;
+  height: auto;
+`;
 const AccordionHeader = styled.button `
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   border: none;
-  gap: ${spacing.r8};
   width: 100%;
   cursor: pointer;
   background-color: transparent;
   color: ${(props) => props.theme.textPrimary};
-  padding: ${spacing.r4};
-  width: 100%;
+  padding: 0;
+  font-family: 'Lato';
 `;
-const AccordionContainer = styled.div `
+const AccordionContent = styled.div `
   overflow: hidden;
   opacity: ${(props) => (props.isOpen ? 1 : 0)};
-  transition: height 0.3s ease-in, opacity 0.3s ease-in, visibility 0.3s;
+  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-block: ${spacing.r8};
+  padding: ${spacing.r8} 0 ${spacing.r8} 0;
 `;
 export const Accordion = ({ title, id, style, children }) => {
     const [isOpen, setIsOpen] = useState(false);
-    const handleToggleContent = () => {
+    const handleToggleContent = (e) => {
         setIsOpen((prev) => !prev);
     };
-    return (_jsxs(Box, { style: { width: '100%', height: 'auto' }, children: [_jsx("h3", { style: { margin: 0 }, children: _jsx(AccordionHeader, { 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: {
+    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)',
                                     transition: 'transform 0.3s ease-in',
-                                } }), _jsx(Text, { isEmphazed: true, children: title })] }) }) }), _jsx(AccordionContainer, { ref: (element) => {
+                                } }), _jsx(Text, { isEmphazed: true, 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.147.0",
+  "version": "0.149.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",

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

@@ -15,42 +15,54 @@ export type AccordionProps = {
   style?: React.CSSProperties;
 };
 
+const AccordionContainer = styled(Box)`
+  width: 100%;
+  height: auto;
+`;
+
 const AccordionHeader = styled.button`
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   border: none;
-  gap: ${spacing.r8};
   width: 100%;
   cursor: pointer;
   background-color: transparent;
   color: ${(props) => props.theme.textPrimary};
-  padding: ${spacing.r4};
-  width: 100%;
+  padding: 0;
+  font-family: 'Lato';
 `;
-const AccordionContainer = styled.div<{
+const AccordionContent = 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;
+  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-block: ${spacing.r8};
+  padding: ${spacing.r8} 0 ${spacing.r8} 0;
 `;
 
 export const Accordion = ({ title, id, style, children }: AccordionProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
-  const handleToggleContent = () => {
+  const handleToggleContent = (
+    e:
+      | React.MouseEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
+  ) => {
     setIsOpen((prev) => !prev);
   };
 
   return (
-    <Box style={{ width: '100%', height: 'auto' }}>
+    <AccordionContainer>
       <h3 style={{ margin: 0 }}>
         <AccordionHeader
+          type="button"
           id={`Accordion-header-${id}`}
           onClick={handleToggleContent}
           aria-controls={id}
@@ -73,7 +85,7 @@ export const Accordion = ({ title, id, style, children }: AccordionProps) => {
         </AccordionHeader>
       </h3>
 
-      <AccordionContainer
+      <AccordionContent
         ref={(element) => {
           if (isOpen) {
             element?.style.setProperty('height', element.scrollHeight + 'px');
@@ -87,7 +99,7 @@ export const Accordion = ({ title, id, style, children }: AccordionProps) => {
         role="region"
       >
         <Wrapper style={style}>{children}</Wrapper>
-      </AccordionContainer>
-    </Box>
+      </AccordionContent>
+    </AccordionContainer>
   );
 };

package/stories/Accordion/accordion.guideline.mdx

@@ -19,6 +19,13 @@ import * as Stories from './accordion.stories';
 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" />

package/stories/Accordion/accordion.stories.tsx

@@ -1,12 +1,13 @@
 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 { Stack } from '../../src/lib/spacing';
 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>;
 
@@ -59,7 +60,29 @@ export const Stacked: AccordionStory = {
     <Stack direction="vertical" gap="r8">
       <Accordion {...args} />
       <Accordion {...args} />
-      <Accordion {...args} style={{ backgroundColor: 'grey' }} />
+      <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',
+  },
+};