Merge pull request #2469 from habx/feature/APP-34027

APP-34027: feature(ExpansionCard): introduce new component

src/ExpansionCard/ExpansionCard.interface.ts

@@ -0,0 +1,19 @@
+import { Modal } from '@delangle/use-modal'
+
+import { CardProps } from '../Card'
+
+export interface ExpansionCardProps
+  extends Omit<CardProps, 'title' | 'children'> {
+  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
+  /**
+   * Position sticky when opened
+   */
+  sticky?: boolean
+  title?: string | React.ReactNode
+}

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 = () => (
+  <CardChildrenContainer>
+    <Text type="small">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae delectus
+      distinctio eligendi eum exercitationem facilis.
+    </Text>
+  </CardChildrenContainer>
+)
+
+const GRID_PROPS = {
+  children: <CardChildren />,
+}
+
+const GRID_LINES = [
+  {
+    label: 'Default',
+  },
+  {
+    label: 'With title',
+    props: {
+      title: <Text type="caption">Title</Text>,
+    },
+    outline: true,
+  },
+  {
+    label: 'With title and description',
+    props: {
+      title: <Text type="caption">Title</Text>,
+      description: <Text type="caption">Description</Text>,
+    },
+    outline: true,
+  },
+]
+
+const GRID_ITEMS = [
+  {
+    label: 'Default',
+  },
+]
+
+const Grid = withGrid<ExpansionCardProps>({
+  props: GRID_PROPS,
+  lines: GRID_LINES,
+  items: GRID_ITEMS,
+})(ExpansionCard)
+
+export default {
+  title: 'Layouts/ExpansionCard',
+  component: ExpansionCard,
+}
+
+export const basic = (props: ExpansionCardProps) => (
+  <CenteredComponent>
+    <ExpansionCard {...props}>{GRID_PROPS.children}</ExpansionCard>
+  </CenteredComponent>
+)
+
+basic.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/LfGEUbovutcTpygwzrfTYbl5/Desktop-components?node-id=4%3A0',
+  },
+}
+
+export const gallery = () => <Grid />

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;
+`

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 (
+    <Card outline={outline} spacing={spacing} ref={ref}>
+      <ExpansionPanel {...rest}>
+        <ExpansionPanelItem title={title} description={description} inCard>
+          {children}
+        </ExpansionPanelItem>
+      </ExpansionPanel>
+    </Card>
+  )
+})

src/ExpansionCard/index.ts

@@ -0,0 +1,3 @@
+export { ExpansionCard } from './ExpansionCard'
+
+export { ExpansionCardProps } from './ExpansionCard.interface'

src/ExpansionPanel/ExpansionPanel.interface.ts

@@ -2,12 +2,12 @@ import * as React from 'react'
 
 export interface ExpansionPanelProps
   extends React.HTMLAttributes<HTMLDivElement> {
-  multiOpen?: boolean
   disabled?: boolean
-  light?: boolean
+  expandIconPosition?: 'left' | 'right'
   large?: boolean
+  light?: boolean
+  multiOpen?: boolean
   small?: boolean
-  expandIconPosition?: 'left' | 'right'
 }
 
 export type ExpansionPanelContextType = {

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 && (

src/ExpansionPanelItem/ExpansionPanelItem.interface.ts

@@ -15,6 +15,7 @@ export interface ExpansionPanelItemProps
    * Positionb sticky when opened
    */
   sticky?: boolean
+  inCard?: boolean
 }
 
 export interface ControlledExpansionPanelItemProps

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`

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 {