@toptal/picasso-lab 9.1.1-alpha-sat-750--poc-picasso-with-ssr.2531 → 9.3.1

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

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

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

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

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

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

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

@@ -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