@toptal/picasso-lab 9.3.0 → 9.3.1

package/src/Section/story/Variant.example.tsx

@@ -0,0 +1,108 @@
+import React from 'react'
+import { Container, Table, Typography } from '@toptal/picasso'
+import { Section } from '@toptal/picasso-lab'
+
+const TableDemo = () => (
+  <Table>
+    <Table.Head>
+      <Table.Row>
+        <Table.Cell>Name</Table.Cell>
+        <Table.Cell>Talent type</Table.Cell>
+        <Table.Cell>Company</Table.Cell>
+        <Table.Cell>Role</Table.Cell>
+        <Table.Cell>Country</Table.Cell>
+      </Table.Row>
+    </Table.Head>
+    <Table.Body>
+      {data.map(row => (
+        <Table.Row key={row.id}>
+          <Table.Cell>{row.name}</Table.Cell>
+          <Table.Cell>{row.talentType}</Table.Cell>
+          <Table.Cell>{row.company}</Table.Cell>
+          <Table.Cell>{row.role}</Table.Cell>
+          <Table.Cell>{row.country}</Table.Cell>
+        </Table.Row>
+      ))}
+    </Table.Body>
+  </Table>
+)
+
+const Example = () => {
+  return (
+    <>
+      <Container>
+        <Typography variant='heading' size='small'>
+          Bordered
+        </Typography>
+        <Container top='small'>
+          <Section
+            title='Talents'
+            subtitle={`${data.length} people`}
+            variant='bordered'
+          >
+            <TableDemo />
+          </Section>
+        </Container>
+      </Container>
+      <Container top='large'>
+        <Typography variant='heading' size='small'>
+          WithHeaderBar
+        </Typography>
+        <Container top='small'>
+          <Section
+            title='Talents'
+            subtitle={`${data.length} people`}
+            variant='withHeaderBar'
+          >
+            <TableDemo />
+          </Section>
+        </Container>
+      </Container>
+    </>
+  )
+}
+
+const data = [
+  {
+    id: 0,
+    name: 'Delia Floyd',
+    talentType: 'Designer',
+    company: 'Airbnb',
+    role: 'UX lead',
+    country: 'United States'
+  },
+  {
+    id: 1,
+    name: 'Linnie Sims',
+    talentType: 'Designer',
+    company: 'Facebook',
+    role: 'Art director',
+    country: 'Spain'
+  },
+  {
+    id: 2,
+    name: 'Charles Watson',
+    talentType: 'Developer',
+    company: 'Amazon',
+    role: 'Ruby developer',
+    country: 'Germany'
+  },
+  {
+    id: 3,
+    name: 'Leila Pena',
+    talentType: 'Developer',
+    company: 'Invision',
+    role: 'Web developer',
+    country: 'Poland'
+  },
+  {
+    id: 4,
+    name: 'Logan Burton',
+    talentType: 'Developer',
+    company: 'Microsoft',
+    role: 'CTO',
+    country: 'United States'
+  }
+]
+
+export default Example

package/src/Section/story/index.jsx

@@ -0,0 +1,35 @@
+import { Section } from '../Section'
+import PicassoBook from '~/.storybook/components/PicassoBook'
+
+const page = PicassoBook.section('Picasso Lab').createPage(
+  'Section',
+  'Use sections to organize content on the page'
+)
+
+page.createTabChapter('Props').addComponentDocs({
+  component: Section,
+  name: 'Section',
+  additionalDocs: {
+    variant: {
+      name: 'variant',
+      description: 'The variant to use',
+      type: {
+        name: 'enum',
+        enums: ['bordered', 'default', 'withHeaderBar']
+      },
+      defaultValue: 'default'
+    }
+  }
+})
+
+page.createChapter().addExample('Section/story/Default.example.tsx', 'Default') // picasso-skip-visuals
+page
+  .createChapter()
+  .addExample('Section/story/Actions.example.tsx', 'With Actions') // picasso-skip-visuals
+page
+  .createChapter()
+  .addExample('Section/story/Collapsible.example.tsx', 'Collapsible') // picasso-skip-visuals
+page.createChapter().addExample('Section/story/Variant.example.tsx', 'Variant') // picasso-skip-visuals
+page
+  .createChapter()
+  .addExample('Section/story/TitleSize.example.tsx', 'Title Size') // picasso-skip-visuals

package/src/Section/styles.ts

@@ -0,0 +1,65 @@
+import { createStyles, Theme } from '@material-ui/core'
+
+const defaultHeader = {
+  display: 'flex',
+  paddingBottom: '1.5rem'
+}
+
+const defaultCollapsedHeader = {
+  paddingBottom: '0'
+}
+
+export default ({ sizes, palette }: Theme) =>
+  createStyles({
+    root: {
+      paddingTop: '2rem'
+    },
+    title: {
+      marginRight: '1rem'
+    },
+    subtitle: {
+      alignSelf: 'center',
+      marginRight: '1rem'
+    },
+    actions: {
+      display: 'flex',
+      marginLeft: 'auto'
+    },
+
+    collapsed: {
+      paddingBottom: '2rem'
+    },
+    default: {},
+    bordered: {
+      borderRadius: sizes.borderRadius.medium,
+      border: `solid ${sizes.borderWidth} ${palette.grey.light}`,
+      padding: '2rem',
+      '& > :last-child': {
+        paddingBottom: '0'
+      }
+    },
+    withHeaderBar: {
+      padding: 0,
+      '& > :last-child:not(:first-child)': {
+        padding: '1.5rem'
+      },
+      borderRadius: sizes.borderRadius.medium,
+      border: `solid ${sizes.borderWidth} ${palette.grey.light2}`
+    },
+    defaultHeader,
+    borderedHeader: defaultHeader,
+    withHeaderBarHeader: {
+      display: 'flex',
+      padding: '0.75rem 1rem',
+      borderRadius: `${sizes.borderRadius.medium} ${sizes.borderRadius.medium} 0 0`,
+      borderBottom: `solid ${sizes.borderWidth} ${palette.grey.light2}`,
+      backgroundColor: palette.grey.lighter
+    },
+
+    defaultCollapsedHeader,
+    borderedCollapsedHeader: defaultCollapsedHeader,
+    withHeaderBarCollapsedHeader: {
+      borderBottom: 'none',
+      borderRadius: sizes.borderRadius.medium
+    }
+  })

package/src/Section/test.tsx

@@ -0,0 +1,115 @@
+import React from 'react'
+import {
+  fireEvent,
+  render,
+  waitForElementToBeRemoved
+} from '@toptal/picasso/test-utils'
+
+import Section, { Props } from './Section'
+
+const DEFAULT_HEADER_TEST_ID = 'header'
+const DEFAULT_TITLE_TEST_ID = 'title'
+const DEFAULT_SUBTITLE_TEST_ID = 'subtitle'
+const DEFAULT_ACTIONS_TEST_ID = 'actions'
+const DEFAULT_COLLAPSE_TEST_ID = 'collapse'
+
+const DEFAULT_CONTENT_TEST_ID = 'content'
+
+const renderSection = ({
+  testIds = {
+    header: DEFAULT_HEADER_TEST_ID,
+    title: DEFAULT_TITLE_TEST_ID,
+    subtitle: DEFAULT_SUBTITLE_TEST_ID,
+    actions: DEFAULT_ACTIONS_TEST_ID,
+    collapse: DEFAULT_COLLAPSE_TEST_ID
+  },
+  children = <div data-testid={DEFAULT_CONTENT_TEST_ID} />,
+  ...rest
+}: Partial<Props> = {}) =>
+  render(
+    <Section testIds={testIds} {...rest}>
+      {children}
+    </Section>
+  )
+
+describe('Section', () => {
+  it('renders with title, subtitle, actions and content', () => {
+    const { container, getByTestId } = renderSection({
+      title: 'Title',
+      subtitle: 'Subtitle',
+      actions: 'Actions'
+    })
+
+    const title = getByTestId(DEFAULT_TITLE_TEST_ID)
+    const subtitle = getByTestId(DEFAULT_SUBTITLE_TEST_ID)
+    const actions = getByTestId(DEFAULT_ACTIONS_TEST_ID)
+
+    expect(title).toBeInTheDocument()
+    expect(title).toHaveTextContent('Title')
+    expect(subtitle).toBeInTheDocument()
+    expect(subtitle).toHaveTextContent('Subtitle')
+    expect(actions).toBeInTheDocument()
+    expect(actions).toHaveTextContent('Actions')
+    expect(getByTestId(DEFAULT_CONTENT_TEST_ID)).toBeInTheDocument()
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders without header', () => {
+    const { container, queryByTestId } = renderSection()
+
+    expect(queryByTestId(DEFAULT_HEADER_TEST_ID)).not.toBeInTheDocument()
+    expect(queryByTestId(DEFAULT_TITLE_TEST_ID)).not.toBeInTheDocument()
+    expect(queryByTestId(DEFAULT_SUBTITLE_TEST_ID)).not.toBeInTheDocument()
+    expect(queryByTestId(DEFAULT_ACTIONS_TEST_ID)).not.toBeInTheDocument()
+    expect(queryByTestId(DEFAULT_CONTENT_TEST_ID)).toBeInTheDocument()
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders with only title', () => {
+    const { queryByTestId } = renderSection({ title: 'Title' })
+
+    expect(queryByTestId(DEFAULT_HEADER_TEST_ID)).toBeInTheDocument()
+    expect(queryByTestId(DEFAULT_TITLE_TEST_ID)).toBeInTheDocument()
+    expect(queryByTestId(DEFAULT_SUBTITLE_TEST_ID)).not.toBeInTheDocument()
+    expect(queryByTestId(DEFAULT_ACTIONS_TEST_ID)).not.toBeInTheDocument()
+  })
+
+  it('renders collapsible initially collapsed', async () => {
+    const { container, queryByTestId } = renderSection({
+      collapsible: true
+    })
+
+    expect(queryByTestId(DEFAULT_CONTENT_TEST_ID)).not.toBeInTheDocument()
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders collapsible initially expanded', async () => {
+    const { container, getByTestId } = renderSection({
+      collapsible: true,
+      defaultCollapsed: false
+    })
+
+    expect(getByTestId(DEFAULT_CONTENT_TEST_ID)).toBeInTheDocument()
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('collapses and expands', async () => {
+    const { findByTestId, getByTestId, queryByTestId } = renderSection({
+      collapsible: true
+    })
+
+    expect(queryByTestId(DEFAULT_CONTENT_TEST_ID)).not.toBeInTheDocument()
+
+    const collapse = getByTestId(DEFAULT_COLLAPSE_TEST_ID)
+
+    fireEvent.click(collapse)
+    expect(await findByTestId(DEFAULT_CONTENT_TEST_ID)).toBeInTheDocument()
+
+    fireEvent.click(collapse)
+    await waitForElementToBeRemoved(getByTestId(DEFAULT_CONTENT_TEST_ID))
+  })
+})

package/src/Timeline/Timeline.tsx

@@ -0,0 +1,25 @@
+import React, { forwardRef, ReactElement } from 'react'
+import { BaseProps } from '@toptal/picasso-shared'
+import { Container } from '@toptal/picasso'
+
+import TimelineRow, { TimelineRowProps } from '../TimelineRow'
+
+export type Props = BaseProps & {
+  /** Timeline rows */
+  children: ReactElement<TimelineRowProps> | ReactElement<TimelineRowProps>[]
+}
+
+export const Timeline = forwardRef<HTMLDivElement, Props>(function Timeline(
+  { className, children },
+  ref
+) {
+  return (
+    <Container ref={ref} className={className} flex direction='column'>
+      {children}
+    </Container>
+  )
+})
+
+Timeline.displayName = 'Timeline'
+
+export default Object.assign(Timeline, { Row: TimelineRow })

package/src/Timeline/__snapshots__/test.tsx.snap

@@ -0,0 +1,332 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Timeline renders 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <div
+      class="Picasso-root"
+    >
+      <div
+        class="PicassoContainer-flex PicassoContainer-column"
+      >
+        <div
+          class="PicassoContainer-flex PicassoTimelineRow-root"
+        >
+          <div
+            class="PicassoContainer-rightmediumMargin PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-column"
+          >
+            <div
+              class="PicassoTimelineRow-dot"
+              data-testid="dot"
+            />
+            <div
+              class="PicassoTimelineRow-connector"
+            />
+          </div>
+          <div
+            class="PicassoContainer-bottomlargeMargin PicassoTimelineRow-content"
+          >
+            Row #1
+          </div>
+        </div>
+        <div
+          class="PicassoContainer-flex PicassoTimelineRow-root"
+        >
+          <div
+            class="PicassoContainer-rightmediumMargin PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-column"
+          >
+            <div
+              class="PicassoTimelineRow-dot"
+              data-testid="dot"
+            />
+            <div
+              class="PicassoTimelineRow-connector"
+            />
+          </div>
+          <div
+            class="PicassoContainer-bottomlargeMargin PicassoTimelineRow-content"
+          >
+            Row #2
+          </div>
+        </div>
+        <div
+          class="PicassoContainer-flex PicassoTimelineRow-root"
+        >
+          <div
+            class="PicassoContainer-rightmediumMargin PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-column"
+          >
+            <div
+              class="PicassoTimelineRow-dot"
+              data-testid="dot"
+            />
+            <div
+              class="PicassoTimelineRow-connector"
+            />
+          </div>
+          <div
+            class="PicassoContainer-bottomlargeMargin PicassoTimelineRow-content"
+          >
+            Row #3
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Timeline renders with dates 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <div
+      class="Picasso-root"
+    >
+      <div
+        class="PicassoContainer-flex PicassoContainer-column"
+      >
+        <div
+          class="PicassoContainer-flex PicassoTimelineRow-root"
+        >
+          <div
+            class="PicassoContainer-rightmediumMargin PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-column"
+          >
+            <div
+              class="PicassoTimelineRow-dot"
+            />
+            <div
+              class="PicassoTimelineRow-connector"
+            />
+          </div>
+          <div
+            class="PicassoContainer-rightlargeMargin PicassoTimelineRow-date"
+          >
+            <p
+              class="MuiTypography-root PicassoTypography-bodyMedium PicassoTypography-semibold PicassoTimelineRow-dateText MuiTypography-body1"
+            >
+              25.06.2021
+            </p>
+          </div>
+          <div
+            class="PicassoContainer-bottomlargeMargin PicassoTimelineRow-content"
+          >
+            Row #1
+          </div>
+        </div>
+        <div
+          class="PicassoContainer-flex PicassoTimelineRow-root"
+        >
+          <div
+            class="PicassoContainer-rightmediumMargin PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-column"
+          >
+            <div
+              class="PicassoTimelineRow-dot"
+            />
+            <div
+              class="PicassoTimelineRow-connector"
+            />
+          </div>
+          <div
+            class="PicassoContainer-rightlargeMargin PicassoTimelineRow-date"
+          >
+            <p
+              class="MuiTypography-root PicassoTypography-bodyMedium PicassoTypography-semibold PicassoTimelineRow-dateText MuiTypography-body1"
+            >
+              25.06.2022
+            </p>
+          </div>
+          <div
+            class="PicassoContainer-bottomlargeMargin PicassoTimelineRow-content"
+          >
+            Row #2
+          </div>
+        </div>
+        <div
+          class="PicassoContainer-flex PicassoTimelineRow-root"
+        >
+          <div
+            class="PicassoContainer-rightmediumMargin PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-column"
+          >
+            <div
+              class="PicassoTimelineRow-dot"
+            />
+            <div
+              class="PicassoTimelineRow-connector"
+            />
+          </div>
+          <div
+            class="PicassoContainer-rightlargeMargin PicassoTimelineRow-date"
+          >
+            <p
+              class="MuiTypography-root PicassoTypography-bodyMedium PicassoTypography-semibold PicassoTimelineRow-dateText MuiTypography-body1"
+            >
+              25.06.2023
+            </p>
+          </div>
+          <div
+            class="PicassoContainer-bottomlargeMargin PicassoTimelineRow-content"
+          >
+            Row #3
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Timeline renders with icons 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <div
+      class="Picasso-root"
+    >
+      <div
+        class="PicassoContainer-flex PicassoContainer-column"
+      >
+        <div
+          class="PicassoContainer-flex PicassoTimelineRow-root"
+        >
+          <div
+            class="PicassoContainer-rightmediumMargin PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-column"
+          >
+            <span
+              class="PicassoTimelineRow-icon"
+              data-testid="icon-1"
+            />
+            <div
+              class="PicassoTimelineRow-connector"
+            />
+          </div>
+          <div
+            class="PicassoContainer-bottomlargeMargin PicassoTimelineRow-content"
+          >
+            Row #1
+          </div>
+        </div>
+        <div
+          class="PicassoContainer-flex PicassoTimelineRow-root"
+        >
+          <div
+            class="PicassoContainer-rightmediumMargin PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-column"
+          >
+            <span
+              class="PicassoTimelineRow-icon"
+              data-testid="icon-2"
+            />
+            <div
+              class="PicassoTimelineRow-connector"
+            />
+          </div>
+          <div
+            class="PicassoContainer-bottomlargeMargin PicassoTimelineRow-content"
+          >
+            Row #2
+          </div>
+        </div>
+        <div
+          class="PicassoContainer-flex PicassoTimelineRow-root"
+        >
+          <div
+            class="PicassoContainer-rightmediumMargin PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-column"
+          >
+            <span
+              class="PicassoTimelineRow-icon"
+              data-testid="icon-3"
+            />
+            <div
+              class="PicassoTimelineRow-connector"
+            />
+          </div>
+          <div
+            class="PicassoContainer-bottomlargeMargin PicassoTimelineRow-content"
+          >
+            Row #3
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Timeline renders without a connector 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <div
+      class="Picasso-root"
+    >
+      <div
+        class="PicassoContainer-flex PicassoContainer-column"
+      >
+        <div
+          class="PicassoContainer-flex PicassoTimelineRow-root"
+        >
+          <div
+            class="PicassoContainer-rightmediumMargin PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-column"
+          >
+            <div
+              class="PicassoTimelineRow-dot"
+              data-testid="dot"
+            />
+            <div
+              class="PicassoTimelineRow-connector"
+              data-testid="connector"
+            />
+          </div>
+          <div
+            class="PicassoContainer-bottomlargeMargin PicassoTimelineRow-content"
+          >
+            Row #1
+          </div>
+        </div>
+        <div
+          class="PicassoContainer-flex PicassoTimelineRow-root"
+        >
+          <div
+            class="PicassoContainer-rightmediumMargin PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-column"
+          >
+            <div
+              class="PicassoTimelineRow-dot"
+              data-testid="dot"
+            />
+            <div
+              class="PicassoTimelineRow-connector"
+              data-testid="connector"
+            />
+          </div>
+          <div
+            class="PicassoContainer-bottomlargeMargin PicassoTimelineRow-content"
+          >
+            Row #2
+          </div>
+        </div>
+        <div
+          class="PicassoContainer-flex PicassoTimelineRow-root"
+        >
+          <div
+            class="PicassoContainer-rightmediumMargin PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-column"
+          >
+            <div
+              class="PicassoTimelineRow-dot"
+              data-testid="dot"
+            />
+          </div>
+          <div
+            class="PicassoContainer-bottomlargeMargin PicassoTimelineRow-content"
+          >
+            Row #3
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/Timeline/index.ts

@@ -0,0 +1,6 @@
+import { OmitInternalProps } from '@toptal/picasso-shared'
+
+import { Props } from './Timeline'
+
+export { default } from './Timeline'
+export type TimelineProps = OmitInternalProps<Props>