@toptal/picasso-lab 9.3.0 → 9.3.1

package/src/OverviewBlockRow/styles.ts

@@ -0,0 +1,27 @@
+import { createStyles, Theme } from '@material-ui/core/styles'
+
+export default ({ palette, sizes }: Theme) =>
+  createStyles({
+    root: {
+      display: 'flex',
+      borderRadius: sizes.borderRadius.medium,
+      padding: '1rem 0',
+      border: `${sizes.borderWidth} solid ${palette.grey.lighter2}`,
+      backgroundColor: palette.common.white,
+      justifyContent: 'flex-start',
+      '& > *': {
+        flex: '1 0'
+      },
+      '&:not(:first-child)': {
+        borderTop: 0,
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0
+      },
+      '&:not(:last-child)': {
+        borderBottom: 0,
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+        paddingBottom: 0
+      }
+    }
+  })

package/src/Section/Section.tsx

@@ -0,0 +1,163 @@
+import cx from 'classnames'
+import React, { forwardRef, ReactNode, useState } from 'react'
+import { makeStyles, Theme } from '@material-ui/core/styles'
+import { Collapse } from '@material-ui/core'
+import {
+  ArrowDownMinor16,
+  BaseProps,
+  Button,
+  Container,
+  SizeType,
+  Typography
+} from '@toptal/picasso'
+import { Rotate180 } from '@toptal/picasso/utils/Transitions'
+
+import styles from './styles'
+
+type VariantType = 'bordered' | 'default' | 'withHeaderBar'
+
+export interface Props extends BaseProps {
+  /** Title of the Section */
+  title?: ReactNode
+  /** Subtitle of the Section */
+  subtitle?: ReactNode
+  /** Additional actions of the Section */
+  actions?: ReactNode
+  /** Main content of the Section */
+  children?: ReactNode
+  /** Whether section can be collapsed */
+  collapsible?: boolean
+  /** Default collapsed value **(applied if `collapsible: true`)** */
+  defaultCollapsed?: boolean
+  testIds?: {
+    header?: string
+    title?: string
+    subtitle?: string
+    actions?: string
+    collapse?: string
+  }
+  variant?: VariantType
+  /** Title size of the inner text */
+  titleSize?: SizeType<'small' | 'medium'>
+}
+
+const useStyles = makeStyles<Theme>(styles, {
+  name: 'PicassoSection'
+})
+
+export const Section = forwardRef<HTMLDivElement, Props>(function Section(
+  props,
+  ref
+) {
+  const {
+    className,
+    style,
+    title,
+    subtitle,
+    actions,
+    children,
+    testIds,
+    collapsible = false,
+    defaultCollapsed = true,
+    variant = 'default',
+    titleSize = 'medium',
+    ...rest
+  } = props
+  const classes = useStyles()
+  const [collapsed, setCollapsed] = useState(
+    collapsible ? defaultCollapsed : false
+  )
+
+  const toggleCollapse = () => setCollapsed(!collapsed)
+
+  const renderTitle = () =>
+    title ? (
+      <Typography
+        className={classes.title}
+        data-testid={testIds?.title}
+        variant='heading'
+        size={titleSize}
+      >
+        {title}
+      </Typography>
+    ) : null
+
+  const renderSubtitle = () =>
+    subtitle ? (
+      <Typography
+        className={classes.subtitle}
+        data-testid={testIds?.subtitle}
+        size='medium'
+        color='dark-grey'
+      >
+        {subtitle}
+      </Typography>
+    ) : null
+
+  const renderCollapse = () =>
+    collapsible ? (
+      <Button.Circular
+        onClick={toggleCollapse}
+        data-testid={testIds?.collapse}
+        variant='flat'
+        icon={
+          <Rotate180 on={!collapsed}>
+            <ArrowDownMinor16 />
+          </Rotate180>
+        }
+      />
+    ) : null
+
+  const hasActions = actions || collapsible
+  const renderActions = () =>
+    hasActions ? (
+      <Container data-testid={testIds?.actions} className={classes.actions}>
+        {actions}
+        {renderCollapse()}
+      </Container>
+    ) : null
+
+  const hasHeader = title || subtitle || hasActions
+
+  return (
+    <Container
+      ref={ref}
+      className={cx(
+        {
+          [classes[variant]]: true,
+          [classes.collapsed]: variant === 'default' && collapsed
+        },
+        classes.root,
+        className
+      )}
+      style={style}
+      {...rest}
+    >
+      {hasHeader && (
+        <Container
+          data-testid={testIds?.header}
+          className={cx({
+            [classes[`${variant}Header`]]: true,
+            [classes[`${variant}CollapsedHeader`]]: collapsed
+          })}
+        >
+          {renderTitle()}
+          {renderSubtitle()}
+          {renderActions()}
+        </Container>
+      )}
+      <Collapse in={!collapsed} unmountOnExit>
+        {children}
+      </Collapse>
+    </Container>
+  )
+})
+
+Section.displayName = 'Section'
+Section.defaultProps = {
+  collapsible: false,
+  defaultCollapsed: true,
+  titleSize: 'medium'
+}
+
+export default Section

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