From f3e772350b77e0d3f8024cbd5daea64a71b21c23 Mon Sep 17 00:00:00 2001 From: CarolineVP Date: Tue, 29 Nov 2022 15:46:54 +0100 Subject: [PATCH 1/2] feature(ExpansionCard): introduce new component --- src/ExpansionCard/ExpansionCard.interface.ts | 19 ++++ src/ExpansionCard/ExpansionCard.stories.tsx | 86 +++++++++++++++++++ src/ExpansionCard/ExpansionCard.style.ts | 7 ++ src/ExpansionCard/ExpansionCard.tsx | 31 +++++++ src/ExpansionCard/index.ts | 3 + .../ExpansionPanel.interface.ts | 6 +- .../ControlledExpansionPanelItem.tsx | 10 ++- .../ExpansionPanelItem.interface.ts | 1 + .../ExpansionPanelItem.style.ts | 6 +- src/index.ts | 1 + 10 files changed, 162 insertions(+), 8 deletions(-) create mode 100644 src/ExpansionCard/ExpansionCard.interface.ts create mode 100644 src/ExpansionCard/ExpansionCard.stories.tsx create mode 100644 src/ExpansionCard/ExpansionCard.style.ts create mode 100644 src/ExpansionCard/ExpansionCard.tsx create mode 100644 src/ExpansionCard/index.ts diff --git a/src/ExpansionCard/ExpansionCard.interface.ts b/src/ExpansionCard/ExpansionCard.interface.ts new file mode 100644 index 000000000..8d055e87f --- /dev/null +++ b/src/ExpansionCard/ExpansionCard.interface.ts @@ -0,0 +1,19 @@ +import { Modal } from '@delangle/use-modal' + +import { CardProps } from '../Card' + +export interface ExpansionCardProps + extends Omit { + children?: React.ReactNode + defaultOpen?: boolean + description?: string | React.ReactNode + disabled?: boolean + error?: boolean + header?: React.ReactNode | ((state: Modal) => React.ReactNode) + onToggle?: (e?: React.MouseEvent) => void + /** + * Positionb sticky when opened + */ + sticky?: boolean + title?: string | React.ReactNode +} diff --git a/src/ExpansionCard/ExpansionCard.stories.tsx b/src/ExpansionCard/ExpansionCard.stories.tsx new file mode 100644 index 000000000..aad7603e5 --- /dev/null +++ b/src/ExpansionCard/ExpansionCard.stories.tsx @@ -0,0 +1,86 @@ +import * as React from 'react' +import styled from 'styled-components' + +import { CenteredComponent } from '../_storybook/CenteredComponent' +import { withGrid } from '../_storybook/withGrid' +import { Text } from '../Text' + +import { ExpansionCard, ExpansionCardProps } from './index' + +const CardChildrenContainer = styled.div` + display: flex; + flex-direction: column; + width: 300px; + max-width: calc(100vw - 48px); + + & > img { + width: 100%; + height: auto; + } +` + +const CardChildren = () => ( + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae delectus + distinctio eligendi eum exercitationem facilis. + + +) + +const GRID_PROPS = { + children: , +} + +const GRID_LINES = [ + { + label: 'Default', + }, + { + label: 'With title', + props: { + title: Title, + }, + outline: true, + }, + { + label: 'With title and description', + props: { + title: Title, + description: Description, + }, + outline: true, + }, +] + +const GRID_ITEMS = [ + { + label: 'Default', + }, +] + +const Grid = withGrid({ + props: GRID_PROPS, + lines: GRID_LINES, + items: GRID_ITEMS, +})(ExpansionCard) + +export default { + title: 'Layouts/ExpansionCard', + component: ExpansionCard, +} + +export const basic = (props: ExpansionCardProps) => ( + + {GRID_PROPS.children} + +) + +basic.parameters = { + design: { + type: 'figma', + url: 'https://www.figma.com/file/LfGEUbovutcTpygwzrfTYbl5/Desktop-components?node-id=4%3A0', + }, +} + +export const gallery = () => diff --git a/src/ExpansionCard/ExpansionCard.style.ts b/src/ExpansionCard/ExpansionCard.style.ts new file mode 100644 index 000000000..2d6fd20fd --- /dev/null +++ b/src/ExpansionCard/ExpansionCard.style.ts @@ -0,0 +1,7 @@ +import styled from 'styled-components' + +import { ExpansionPanelItem as BaseExpansionPanelItem } from '../ExpansionPanelItem' + +export const ExpansionPanelItem = styled(BaseExpansionPanelItem)` + --expansion-panel-item-horizontal-padding: 12px; +` diff --git a/src/ExpansionCard/ExpansionCard.tsx b/src/ExpansionCard/ExpansionCard.tsx new file mode 100644 index 000000000..db9578829 --- /dev/null +++ b/src/ExpansionCard/ExpansionCard.tsx @@ -0,0 +1,31 @@ +import * as React from 'react' + +import { Card } from '../Card' +import { ExpansionPanel } from '../ExpansionPanel' + +import { ExpansionCardProps } from './ExpansionCard.interface' +import { ExpansionPanelItem } from './ExpansionCard.style' + +export const ExpansionCard = React.forwardRef< + HTMLDivElement | HTMLButtonElement, + ExpansionCardProps +>((props, ref) => { + const { + description, + children, + outline = true, + spacing = 'narrow-horizontal-only', + title, + ...rest + } = props + + return ( + + + + {children} + + + + ) +}) diff --git a/src/ExpansionCard/index.ts b/src/ExpansionCard/index.ts new file mode 100644 index 000000000..2367fc21a --- /dev/null +++ b/src/ExpansionCard/index.ts @@ -0,0 +1,3 @@ +export { ExpansionCard } from './ExpansionCard' + +export { ExpansionCardProps } from './ExpansionCard.interface' diff --git a/src/ExpansionPanel/ExpansionPanel.interface.ts b/src/ExpansionPanel/ExpansionPanel.interface.ts index 7c67e3fe5..9b6c4ebfa 100644 --- a/src/ExpansionPanel/ExpansionPanel.interface.ts +++ b/src/ExpansionPanel/ExpansionPanel.interface.ts @@ -2,12 +2,12 @@ import * as React from 'react' export interface ExpansionPanelProps extends React.HTMLAttributes { - multiOpen?: boolean disabled?: boolean - light?: boolean + expandIconPosition?: 'left' | 'right' large?: boolean + light?: boolean + multiOpen?: boolean small?: boolean - expandIconPosition?: 'left' | 'right' } export type ExpansionPanelContextType = { diff --git a/src/ExpansionPanelItem/ControlledExpansionPanelItem.tsx b/src/ExpansionPanelItem/ControlledExpansionPanelItem.tsx index 8a775abf1..6d2f59014 100644 --- a/src/ExpansionPanelItem/ControlledExpansionPanelItem.tsx +++ b/src/ExpansionPanelItem/ControlledExpansionPanelItem.tsx @@ -24,13 +24,14 @@ export const ControlledExpansionPanelItem = React.forwardRef< >((props, ref) => { const { children, - title, - open, - onToggle, - header, description, disabled, + header, + inCard, + open, + onToggle, sticky, + title, ...rest } = props @@ -95,6 +96,7 @@ export const ControlledExpansionPanelItem = React.forwardRef< data-testid="expansion-panel-item-title-bar" onClick={onToggle} data-sticky={open && sticky} + data-isOpened={open && inCard} > {header && (isFunction(header) ? header(panel) : header)} {!header && ( diff --git a/src/ExpansionPanelItem/ExpansionPanelItem.interface.ts b/src/ExpansionPanelItem/ExpansionPanelItem.interface.ts index b101dee13..3f9672768 100644 --- a/src/ExpansionPanelItem/ExpansionPanelItem.interface.ts +++ b/src/ExpansionPanelItem/ExpansionPanelItem.interface.ts @@ -15,6 +15,7 @@ export interface ExpansionPanelItemProps * Positionb sticky when opened */ sticky?: boolean + inCard?: boolean } export interface ControlledExpansionPanelItemProps diff --git a/src/ExpansionPanelItem/ExpansionPanelItem.style.ts b/src/ExpansionPanelItem/ExpansionPanelItem.style.ts index 903276f1d..583d9510f 100644 --- a/src/ExpansionPanelItem/ExpansionPanelItem.style.ts +++ b/src/ExpansionPanelItem/ExpansionPanelItem.style.ts @@ -12,7 +12,7 @@ export const ExpansionPanelItemContainer = styled.div` transition: ${transition('all')}; @media screen { - &:not([data-light='true']) { + &:not([data-light='true']):not(:last-child) { border-bottom: 1px solid ${theme.neutralColor(300)}; &:hover { @@ -67,6 +67,10 @@ export const HeaderBar = styled.div` z-index: ${zIndex.dropDowns}; background: ${theme.color('background')}; } + &[data-isOpened='true'] { + background: ${theme.neutralColor(100)}; + margin-bottom: unset; + } ` export const HeaderBarElement = styled.div` diff --git a/src/index.ts b/src/index.ts index e372b982f..9cc84d206 100644 --- a/src/index.ts +++ b/src/index.ts @@ -101,6 +101,7 @@ export { Layout, LayoutProps } from './Layout' export { ActionBar, ActionBarProps } from './ActionBar' export { HeaderBar, HeaderBarProps } from './HeaderBar' export { Card, CardProps } from './Card' +export { ExpansionCard, ExpansionCardProps } from './ExpansionCard' export { ExpansionPanel, ExpansionPanelProps } from './ExpansionPanel' export { Drawer, DrawerProps, DrawerStep } from './Drawer' export { From 48322aa54de6b9e34a67401fab2386cda87f846e Mon Sep 17 00:00:00 2001 From: Caroline Victor-Pujebet Date: Tue, 29 Nov 2022 16:08:30 +0100 Subject: [PATCH 2/2] fix: typo Co-authored-by: Jean Dessane --- src/ExpansionCard/ExpansionCard.interface.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ExpansionCard/ExpansionCard.interface.ts b/src/ExpansionCard/ExpansionCard.interface.ts index 8d055e87f..42c3b8f79 100644 --- a/src/ExpansionCard/ExpansionCard.interface.ts +++ b/src/ExpansionCard/ExpansionCard.interface.ts @@ -12,7 +12,7 @@ export interface ExpansionCardProps header?: React.ReactNode | ((state: Modal) => React.ReactNode) onToggle?: (e?: React.MouseEvent) => void /** - * Positionb sticky when opened + * Position sticky when opened */ sticky?: boolean title?: string | React.ReactNode