@toptal/picasso-lab 9.3.1 → 10.0.0

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

@@ -1,186 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Section renders collapsible initially collapsed 1`] = `
-<div>
-  <div
-    class="Picasso-root"
-  >
-    <div
-      class="PicassoSection-default PicassoSection-collapsed PicassoSection-root"
-    >
-      <div
-        class="PicassoSection-defaultHeader PicassoSection-defaultCollapsedHeader"
-        data-testid="header"
-      >
-        <div
-          class="PicassoSection-actions"
-          data-testid="actions"
-        >
-          <button
-            class="MuiButtonBase-root PicassoButton-small PicassoButton-primary PicassoButton-root PicassoButtonCircular-flat PicassoButtonCircular-root"
-            data-component-type="button"
-            data-testid="collapse"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
-            >
-              <svg
-                class="PicassoSvgArrowDownMinor16-root PicassoButton-icon Rotate180-transition"
-                style="min-width: 16px; min-height: 16px;"
-                viewBox="0 0 16 16"
-              >
-                <path
-                  d="M11.997 5.29l.707.707-4 4-.707.707-.707-.707-4-4 .707-.707 4 4 4-4z"
-                />
-              </svg>
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Section renders collapsible initially expanded 1`] = `
-<div>
-  <div
-    class="Picasso-root"
-  >
-    <div
-      class="PicassoSection-default PicassoSection-root"
-    >
-      <div
-        class="PicassoSection-defaultHeader"
-        data-testid="header"
-      >
-        <div
-          class="PicassoSection-actions"
-          data-testid="actions"
-        >
-          <button
-            class="MuiButtonBase-root PicassoButton-small PicassoButton-primary PicassoButton-root PicassoButtonCircular-flat PicassoButtonCircular-root"
-            data-component-type="button"
-            data-testid="collapse"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
-            >
-              <svg
-                class="PicassoSvgArrowDownMinor16-root PicassoButton-icon Rotate180-transition Rotate180-rotate180"
-                style="min-width: 16px; min-height: 16px;"
-                viewBox="0 0 16 16"
-              >
-                <path
-                  d="M11.997 5.29l.707.707-4 4-.707.707-.707-.707-4-4 .707-.707 4 4 4-4z"
-                />
-              </svg>
-            </span>
-          </button>
-        </div>
-      </div>
-      <div
-        class="MuiCollapse-container MuiCollapse-entered"
-        style="min-height: 0px;"
-      >
-        <div
-          class="MuiCollapse-wrapper"
-        >
-          <div
-            class="MuiCollapse-wrapperInner"
-          >
-            <div
-              data-testid="content"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Section renders with title, subtitle, actions and content 1`] = `
-<div>
-  <div
-    class="Picasso-root"
-  >
-    <div
-      class="PicassoSection-default PicassoSection-root"
-    >
-      <div
-        class="PicassoSection-defaultHeader"
-        data-testid="header"
-      >
-        <h3
-          class="MuiTypography-root PicassoSection-title MuiTypography-h3"
-          data-testid="title"
-        >
-          Title
-        </h3>
-        <p
-          class="MuiTypography-root PicassoTypography-bodyMedium PicassoTypography-darkGrey PicassoSection-subtitle MuiTypography-body1"
-          data-testid="subtitle"
-        >
-          Subtitle
-        </p>
-        <div
-          class="PicassoSection-actions"
-          data-testid="actions"
-        >
-          Actions
-        </div>
-      </div>
-      <div
-        class="MuiCollapse-container MuiCollapse-entered"
-        style="min-height: 0px;"
-      >
-        <div
-          class="MuiCollapse-wrapper"
-        >
-          <div
-            class="MuiCollapse-wrapperInner"
-          >
-            <div
-              data-testid="content"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Section renders without header 1`] = `
-<div>
-  <div
-    class="Picasso-root"
-  >
-    <div
-      class="PicassoSection-default PicassoSection-root"
-    >
-      <div
-        class="MuiCollapse-container MuiCollapse-entered"
-        style="min-height: 0px;"
-      >
-        <div
-          class="MuiCollapse-wrapper"
-        >
-          <div
-            class="MuiCollapse-wrapperInner"
-          >
-            <div
-              data-testid="content"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;

package/src/Section/index.ts

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

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

@@ -1,85 +0,0 @@
-import React from 'react'
-import { Button, Table } from '@toptal/picasso'
-import { Section } from '@toptal/picasso-lab'
-
-const Example = () => {
-  return (
-    <Section
-      title='Talents'
-      subtitle={`${data.length} people`}
-      actions={
-        <Button size='small' variant='secondary'>
-          More
-        </Button>
-      }
-    >
-      <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>
-    </Section>
-  )
-}
-
-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/Collapsible.example.tsx

@@ -1,113 +0,0 @@
-import React from 'react'
-import { Table, Button, Grid, Typography } from '@toptal/picasso'
-import { Section } from '@toptal/picasso-lab'
-
-const Example = () => {
-  const content = (
-    <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>
-  )
-
-  return (
-    <Grid>
-      <Grid.Item small={6}>
-        <Typography>Collapsible section is collapsed by default.</Typography>
-        <Section
-          title='Talents'
-          subtitle={`${data.length} people`}
-          actions={
-            <Button size='small' variant='secondary'>
-              More
-            </Button>
-          }
-          collapsible
-        >
-          {content}
-        </Section>
-      </Grid.Item>
-      <Grid.Item small={6}>
-        <Typography>
-          You can modify this behavior with `defaultCollapsed` property.
-        </Typography>
-        <Section
-          title='Talents'
-          subtitle={`${data.length} people`}
-          actions={
-            <Button size='small' variant='secondary'>
-              More
-            </Button>
-          }
-          collapsible
-          defaultCollapsed={false}
-        >
-          {content}
-        </Section>
-      </Grid.Item>
-    </Grid>
-  )
-}
-
-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/Default.example.tsx

@@ -1,77 +0,0 @@
-import React from 'react'
-import { Table } from '@toptal/picasso'
-import { Section } from '@toptal/picasso-lab'
-
-const Example = () => {
-  return (
-    <Section title='Talents' subtitle={`${data.length} people`}>
-      <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>
-    </Section>
-  )
-}
-
-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/TitleSize.example.tsx

@@ -1,34 +0,0 @@
-import React from 'react'
-import { Grid, List, Typography } from '@toptal/picasso'
-import { Section } from '@toptal/picasso-lab'
-
-const Example = () => {
-  return (
-    <Grid>
-      <Grid.Item small={6}>
-        <Typography>Default title size</Typography>
-        <Section title='Quotes'>
-          <List variant='unordered'>
-            <List.Item>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            </List.Item>
-            <List.Item>In nec cursus lectus, nec malesuada tellus.</List.Item>
-          </List>
-        </Section>
-      </Grid.Item>
-      <Grid.Item small={6}>
-        <Typography>Small title size</Typography>
-        <Section title='Quotes' titleSize='small'>
-          <List variant='unordered'>
-            <List.Item>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            </List.Item>
-            <List.Item>In nec cursus lectus, nec malesuada tellus.</List.Item>
-          </List>
-        </Section>
-      </Grid.Item>
-    </Grid>
-  )
-}
-
-export default Example

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

@@ -1,108 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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