feat: added disabled state to Collapse component.

DevoInc · Oct 30, 2024 · 658aed2 · 658aed2
1 parent d27a71e
commit 658aed2
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 15 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -100,7 +100,6 @@ const preview: Preview = {
       </StrictMode>
     ),
     (Story, parameters) => {
-      console.info(parameters.parameters);
       return !parameters.tags.includes('noWrap') ? (
         <StoryWrapper
           display={

diff --git a/packages/core/src/components/Collapse/Collapse.mdx b/packages/core/src/components/Collapse/Collapse.mdx
@@ -29,6 +29,13 @@ we get a collapse with a transparent background.
 
 <Canvas of={Stories.Quiet} />
 
+## Disabled
+
+Set to true if you need that one collapse block to be disabled. The collapse/uncollapse behavior is automatically
+disabled, but have in mind that you must disable manually any possible internal child actions.
+
+<Canvas of={Stories.Disabled} />
+
 ## Draggable
 
 <Canvas of={Stories.Draggable} />

diff --git a/packages/core/src/components/Collapse/Collapse.stories.tsx b/packages/core/src/components/Collapse/Collapse.stories.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
+import styled from 'styled-components';
 import {
   DndContext,
   PointerSensor,
@@ -15,22 +16,25 @@ import {
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 
-import { Collapse } from './Collapse';
-import { Flex } from '../Flex';
-import { Box } from '../Box';
-import { Panel } from '../Panel';
-import { Typography } from '../Typography';
+import type { TElevation } from 'src/declarations';
 import { elevationBoxShadowMixin } from '../../styled/mixins';
 import { lorem } from '../../../stories/utils/fillerTexts';
+
 import {
   GIBinTrashRecycleDeleteGarbageEmpty,
   GIPlusSignAddNew,
 } from '@devoinc/genesys-icons';
+import { Collapse } from './Collapse';
+import { Flex } from '../Flex';
+import { Box } from '../Box';
+import { Panel } from '../Panel';
+import { Typography } from '../Typography';
 import { ButtonGroup } from '../ButtonGroup';
-import styled from 'styled-components';
-import { TElevation } from 'src/declarations';
 import { HFlex } from '../HFlex';
 import { FloatingHelper } from '../FloatingHelper';
+import { IconButton } from '../IconButton';
+import { VFlex } from '../VFlex';
+import { Button } from '../Button';
 
 const meta: Meta<typeof Collapse> = {
   title: 'Components/Navigation/Collapse',
@@ -74,6 +78,77 @@ export const Base: Story = {
     })(args),
 };
 
+export const Disabled: Story = {
+  render: () =>
+    (() => {
+      const [expanded, setExpanded] = React.useState([false, false]);
+      const [disabled, setDisabled] = React.useState(true);
+      const contentId = 'accessibility';
+      return (
+        <VFlex spacing="0">
+          <Collapse
+            heading="Collapse heading one"
+            aria-controls={`${contentId}-one`}
+            expanded={expanded[0]}
+            onClick={() => {
+              setExpanded([!expanded[0], false]);
+            }}
+          />
+          {expanded[0] && (
+            <Box
+              id={`${contentId}-one`}
+              maxHeight={'190px'}
+              overflow={'auto'}
+              padding={'cmp-md cmp-lg'}
+            >
+              <Typography.Paragraph>{lorem}</Typography.Paragraph>
+            </Box>
+          )}
+          <Collapse
+            appendContent={
+              <IconButton
+                state={disabled ? 'disabled' : undefined}
+                icon={<GIPlusSignAddNew />}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  alert('Clicked add button');
+                }}
+              />
+            }
+            disabled={disabled}
+            heading="Collapse heading disabled"
+            aria-controls={`${contentId}-two`}
+            expanded={expanded[1]}
+            onClick={() => {
+              setExpanded([false, !expanded[1]]);
+            }}
+          />
+          {expanded[1] && (
+            <Box
+              id={`${contentId}-two`}
+              maxHeight={'190px'}
+              overflow={'auto'}
+              padding={'cmp-md cmp-lg'}
+            >
+              <Typography.Paragraph>{lorem}</Typography.Paragraph>
+            </Box>
+          )}
+          <HFlex marginTop="cmp-md" justifyContent="flex-end">
+            <Button
+              size="sm"
+              onClick={(event) => {
+                event.stopPropagation();
+                setDisabled(!disabled);
+              }}
+            >
+              {disabled ? 'Enable collapse' : 'Disable collapse'}
+            </Button>
+          </HFlex>
+        </VFlex>
+      );
+    })(),
+};
+
 export const Custom: Story = {
   tags: ['isHidden'],
   render: () =>

diff --git a/packages/core/src/components/Collapse/components/CollapseContainer/CollapseContainer.tsx b/packages/core/src/components/Collapse/components/CollapseContainer/CollapseContainer.tsx
@@ -8,10 +8,10 @@ import type {
   ITriggerAriaAttrs,
   ITriggerEventAttrs,
 } from '../../../../declarations';
+import type { ICollapse } from '../../declarations';
 import { CollapseContext } from '../../context';
 import { Flex } from '../../../Flex';
 import { StyledCollapseContainer } from './StyledCollapseContainer';
-import type { ICollapse } from '../../declarations';
 
 export interface CollapseContainerProps
   extends IStyledPolymorphic,
@@ -31,6 +31,7 @@ export const CollapseContainer: React.FC<CollapseContainerProps> = ({
   'aria-controls': ariaControls,
   'aria-label': ariaLabel = 'Collapsible header',
   children,
+  disabled,
   expanded,
   onClick,
   quiet,
@@ -45,19 +46,20 @@ export const CollapseContainer: React.FC<CollapseContainerProps> = ({
 }) => (
   <StyledCollapseContainer
     {...nativeProps}
+    $disabled={disabled}
     role={role}
-    tabIndex={tabIndex}
+    tabIndex={disabled ? -1 : tabIndex}
     css={style}
     $quiet={quiet}
     $expanded={expanded}
-    onPointerDown={onPointerDown}
-    onKeyDown={onKeyDown}
+    onPointerDown={disabled ? null : onPointerDown}
+    onKeyDown={disabled ? null : onKeyDown}
     aria-controls={ariaControls}
     aria-expanded={expanded}
     aria-label={ariaLabel}
-    onClick={onClick}
+    onClick={disabled ? null : onClick}
     title={tooltip}
-    $isDraggable={isDraggable}
+    $isDraggable={disabled ? false : isDraggable}
   >
     <Flex
       alignItems="center"

diff --git a/...ages/core/src/components/Collapse/components/CollapseContainer/StyledCollapseContainer.ts b/...ages/core/src/components/Collapse/components/CollapseContainer/StyledCollapseContainer.ts
@@ -1,9 +1,14 @@
 import styled, { css } from 'styled-components';
 
 import type { ICollapse } from '../../declarations';
-import { btnResetMixin, pseudoElementMixin } from '../../../../styled';
+import {
+  btnResetMixin,
+  disabledMixin,
+  pseudoElementMixin,
+} from '../../../../styled';
 
 export interface StyledCollapseContainerProps {
+  $disabled?: ICollapse['disabled'];
   $expanded?: ICollapse['expanded'];
   $isDraggable?: ICollapse['isDraggable'];
   $quiet: ICollapse['quiet'];
@@ -45,6 +50,14 @@ export const StyledCollapseContainer = styled.div<StyledCollapseContainerProps>`
       theme.cmp.collapse.button.elevation.bosShadow.focused};
   }
 
+  ${({ theme, $disabled }) => css`
+    ${$disabled ? disabledMixin(theme) : null};
+
+    &::before {
+      content: none;
+    }
+  `}
+
   ${({ $isDraggable }) =>
     $isDraggable &&
     css`

diff --git a/packages/core/src/components/Form/components/FormGroup/FormGroup.tsx b/packages/core/src/components/Form/components/FormGroup/FormGroup.tsx
@@ -132,6 +132,7 @@ export const FormGroup: React.FC<FormGroupProps> = ({
       >
         {collapsable && legend && (
           <Collapse
+            disabled={disabled}
             expanded={expanded}
             quiet
             onClick={() => {