@spaced-out/ui-design-system/lib/components/CollapsibleCard/CollapsibleCard.stories.d.ts

Sense UI components library

import * as React from 'react';
import type { CollapsibleCardProps } from './';
declare const _default: {
    tags: string[];
    title: string;
    component: import("flow-to-typescript-codemod").Flow.AbstractComponent<CollapsibleCardProps, HTMLDivElement>;
    argTypes: {
        semantic: {
            options: unknown[];
            description: string;
            control: {
                type: string;
            };
            table: {
                type: {
                    summary: string;
                };
                defaultValue: {
                    summary: "neutral";
                };
            };
        };
        id: {
            description: string;
            control: {
                type: string;
            };
            table: {
                type: {
                    summary: string;
                };
            };
        };
        title: {
            description: string;
            type: {
                required: boolean;
            };
            control: {
                type: string;
            };
            table: {
                type: {
                    summary: string;
                };
            };
        };
        children: {
            description: string;
            type: {
                required: boolean;
            };
            control: {
                type: string;
            };
            table: {
                type: {
                    summary: string;
                };
            };
        };
        isOpen: {
            description: string;
            control: {
                type: string;
            };
            table: {
                type: {
                    summary: string;
                };
            };
        };
        headerIconName: {
            description: string;
            control: {
                type: string;
            };
            table: {
                type: {
                    summary: string;
                };
            };
        };
        headerIconType: {
            description: string;
            options: string[];
            control: {
                type: string;
            };
            table: {
                type: {
                    summary: string;
                };
                defaultValue: {
                    summary: string;
                };
            };
        };
        onChange: {
            description: string;
            action: string;
            table: {
                type: {
                    summary: string;
                };
            };
        };
        classNames: {
            description: string;
            control: {
                type: string;
            };
            table: {
                type: {
                    summary: string;
                };
            };
        };
    };
    parameters: {
        docs: {
            subtitle: string;
            description: {
                component: string;
            };
        };
        storySource: {
            componentPath: string;
        };
    };
};
export default _default;
export declare const _Default: {
    (args: CollapsibleCardProps): React.JSX.Element;
    args: {
        title: string;
        classNames: {
            wrapper: string;
        };
    };
};
export declare const _WithAction: {
    (args: CollapsibleCardProps): React.JSX.Element;
    args: {
        title: string;
        classNames: {
            wrapper: string;
        };
    };
};
/**
 * Usage:
 *
```jsx

const ActionableHeader = (): React.Node => (
  <div className={css.cardHeader}>
    <SubTitleSmall>Accordion Title</SubTitleSmall>
    <ClickableIcon
      name="plus"
      color="secondary"
      size="small"
      onClick={(e) => {
        e.stopPropagation();
        e.preventDefault();
      }}
    ></ClickableIcon>
  </div>
);

export const _WithHeaderActionSlots = (
  args: CollapsibleCardProps,
): React.Node => (
  <div className={css.container}>
    <CollapsibleCard {...args} title={<ActionableHeader />}>
      <CollapsibleCardContent>
        <div className={css.acContent}>
          <BodySmall>
            This section has been populated using CollapsibleCardContent
          </BodySmall>
        </div>
      </CollapsibleCardContent>
      <CollapsibleCardAction className={css.action}>
        <Button type="tertiary" isFluid>
          Button Text
        </Button>
        <Button type="secondary" isFluid>
          Button Text
        </Button>
      </CollapsibleCardAction>
    </CollapsibleCard>
  </div>
);
```

```css
  .cardHeader {
    width: sizeFluid;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
```
 *
 */
export declare const _WithHeaderActionSlots: {
    (args: CollapsibleCardProps): React.JSX.Element;
    args: {
        classNames: {
            wrapper: string;
        };
    };
};
export declare const _WithIcon: {
    (args: CollapsibleCardProps): React.JSX.Element;
    args: {
        title: string;
        classNames: {
            wrapper: string;
        };
        headerIconName: string;
        semantic: string;
    };
};
//# sourceMappingURL=CollapsibleCard.stories.d.ts.map