@toptal/picasso-tabs 1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-ca4ef823d.4082 → 1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-25389459e.4083

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-tabs",
-  "version": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-ca4ef823d.4082+ca4ef823d",
+  "version": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-25389459e.4083+25389459e",
   "description": "Toptal UI components library - Tabs",
   "publishConfig": {
     "access": "public"
@@ -22,13 +22,13 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-container": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-ca4ef823d.4082+ca4ef823d",
-    "@toptal/picasso-icons": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-ca4ef823d.4082+ca4ef823d",
-    "@toptal/picasso-shared": "13.1.3-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-ca4ef823d.25+ca4ef823d",
-    "@toptal/picasso-typography": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-ca4ef823d.4082+ca4ef823d",
-    "@toptal/picasso-typography-overflow": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-ca4ef823d.4082+ca4ef823d",
-    "@toptal/picasso-user-badge": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-ca4ef823d.4082+ca4ef823d",
-    "@toptal/picasso-utils": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-ca4ef823d.4082+ca4ef823d",
+    "@toptal/picasso-container": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-25389459e.4083+25389459e",
+    "@toptal/picasso-icons": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-25389459e.4083+25389459e",
+    "@toptal/picasso-shared": "13.1.3-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-25389459e.26+25389459e",
+    "@toptal/picasso-typography": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-25389459e.4083+25389459e",
+    "@toptal/picasso-typography-overflow": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-25389459e.4083+25389459e",
+    "@toptal/picasso-user-badge": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-25389459e.4083+25389459e",
+    "@toptal/picasso-utils": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-25389459e.4083+25389459e",
     "ap-style-title-case": "^1.1.2",
     "classnames": "^2.3.1"
   },
@@ -46,12 +46,8 @@
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-provider": "3.4.3-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-ca4ef823d.44+ca4ef823d",
-    "@toptal/picasso-test-utils": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-ca4ef823d.4082+ca4ef823d"
+    "@toptal/picasso-provider": "3.4.3-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-25389459e.45+25389459e",
+    "@toptal/picasso-test-utils": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-25389459e.4083+25389459e"
   },
-  "files": [
-    "dist-package/**",
-    "!dist-package/tsconfig.tsbuildinfo"
-  ],
-  "gitHead": "ca4ef823de9250ac91938e59b5156c3c35f0808c"
+  "gitHead": "25389459e8d238e1cadceeda472ae9cc5b53b162"
 }

package/src/Tab/Tab.tsx

@@ -0,0 +1,153 @@
+import type { ReactNode, HTMLAttributes, ReactElement } from 'react'
+import React, { forwardRef, useContext } from 'react'
+import type { Theme } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
+import type { TabProps } from '@material-ui/core'
+import { Tab as MUITab } from '@material-ui/core'
+import type { BaseProps, TextLabelProps } from '@toptal/picasso-shared'
+import { useTitleCase } from '@toptal/picasso-shared'
+import { UserBadge } from '@toptal/picasso-user-badge'
+
+import styles from './styles'
+import { TabsOrientationContext } from '../Tabs/Tabs'
+import { TabLabel } from '../TabLabel'
+import { TabDescription } from '../TabDescription'
+
+export interface Props
+  extends BaseProps,
+    TextLabelProps,
+    Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /**
+   * If true, the tab will be disabled
+   * @default false
+   */
+  disabled?: boolean
+
+  /** You can provide your own value. Otherwise, we fallback to the child position index */
+  value?: TabProps['value']
+
+  /** The label element */
+  label?: ReactNode
+
+  /** The Icon element */
+  icon?: ReactElement
+
+  /** Image URL */
+  avatar?: string | null
+
+  /** Description */
+  description?: string
+
+  // Properties below are managed by Tabs component
+
+  selected?: boolean
+  onChange?: TabProps['onChange']
+  onClick?: TabProps['onClick']
+}
+
+const useStyles = makeStyles<Theme>(styles, { name: 'PicassoTab' })
+
+export const Tab = forwardRef<HTMLDivElement, Props>(function Tab(props, ref) {
+  const {
+    disabled,
+    value,
+    label,
+    icon,
+    selected,
+    onChange,
+    onClick,
+    titleCase: propsTitleCase,
+    description,
+    avatar,
+    ...rest
+  } = props
+  const classes = useStyles()
+  const titleCase = useTitleCase(propsTitleCase)
+  const orientation = useContext(TabsOrientationContext)
+
+  const labelComponent = getLabelComponent({
+    avatar,
+    description,
+    disabled,
+    label,
+    orientation,
+    titleCase,
+  })
+
+  return (
+    <MUITab
+      {...rest}
+      ref={ref}
+      tabIndex={0}
+      disabled={disabled}
+      label={labelComponent}
+      icon={icon}
+      value={value}
+      selected={selected}
+      onChange={onChange}
+      onClick={onClick}
+      classes={{
+        root: classes[orientation],
+        selected: classes.selected,
+        wrapper: classes.wrapper,
+      }}
+    />
+  )
+})
+
+Tab.defaultProps = {}
+
+Tab.displayName = 'Tab'
+
+type GetLabelComponentProps = {
+  avatar?: string | null
+  description?: string
+  disabled?: boolean
+  label?: React.ReactNode
+  orientation: 'horizontal' | 'vertical'
+  titleCase?: boolean
+}
+const getLabelComponent = ({
+  avatar,
+  description,
+  disabled,
+  label,
+  orientation,
+  titleCase,
+}: GetLabelComponentProps): React.ReactNode => {
+  if (!label) {
+    return null
+  }
+
+  const isHorizontal = orientation === 'horizontal'
+  const isCustomLabel = typeof label !== 'string'
+
+  const Label = () => (
+    <TabLabel titleCase={titleCase} label={label} orientation={orientation} />
+  )
+
+  if (isHorizontal || isCustomLabel) {
+    return <Label />
+  }
+
+  if (typeof avatar === 'undefined') {
+    return (
+      <>
+        <Label />
+        {description && (
+          <TabDescription disabled={disabled}>{description}</TabDescription>
+        )}
+      </>
+    )
+  }
+
+  return (
+    <UserBadge renderName={Label} name={label} avatar={avatar}>
+      {description && (
+        <TabDescription disabled={disabled}>{description}</TabDescription>
+      )}
+    </UserBadge>
+  )
+}
+
+export default Tab

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

@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tab Tab disabled tab 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <button
+      class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit Mui-disabled Mui-disabled"
+      disabled=""
+      role="tab"
+      tabindex="-1"
+      type="button"
+    >
+      <span
+        class="MuiTab-wrapper PicassoTab-wrapper"
+      >
+        <div
+          class="MuiTypography-root PicassoTypography-bodySmall PicassoTypography-inherit PicassoTypography-semibold MuiTypography-body1"
+        >
+          Tab Label
+        </div>
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Tab Tab renders 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <button
+      class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit"
+      role="tab"
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="MuiTab-wrapper PicassoTab-wrapper"
+      >
+        <div
+          class="MuiTypography-root PicassoTypography-bodySmall PicassoTypography-inherit PicassoTypography-semibold MuiTypography-body1"
+        >
+          Tab Label
+        </div>
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Tab Tab tab with icon 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <button
+      class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit MuiTab-labelIcon"
+      role="tab"
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="MuiTab-wrapper PicassoTab-wrapper"
+      >
+        <div
+          id="Icon"
+        />
+        <div
+          class="MuiTypography-root PicassoTypography-bodySmall PicassoTypography-inherit PicassoTypography-semibold MuiTypography-body1"
+        >
+          Tab Label
+        </div>
+      </span>
+    </button>
+  </div>
+</div>
+`;

package/src/Tab/index.ts

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

package/src/Tab/story/CustomValue.example.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Container, Tabs } from '@toptal/picasso'
+import { SPACING_4 } from '@toptal/picasso-utils'
+
+type Value = number | string | boolean
+
+const Example = () => {
+  const [value, setValue] = React.useState<Value>(false)
+
+  const handleChange = (_: React.ChangeEvent<{}>, newValue: Value) => {
+    setValue(newValue)
+  }
+
+  return (
+    <div>
+      <Tabs value={value} onChange={handleChange}>
+        <Tabs.Tab value='jobs' label='Jobs' />
+        <Tabs.Tab value='engagements' label='Engagements' />
+        <Tabs.Tab value='interviews' label='Interviews' />
+      </Tabs>
+
+      <Container top={SPACING_4}>
+        Current <i>value</i> is equal <code>{JSON.stringify(value)}</code>
+      </Container>
+    </div>
+  )
+}
+
+export default Example

package/src/Tab/story/Disabled.example.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Container, Tabs } from '@toptal/picasso'
+import { SPACING_4 } from '@toptal/picasso-utils'
+
+const Example = () => {
+  const [value, setValue] = React.useState(0)
+
+  const handleChange = (_: React.ChangeEvent<{}>, newValue: number) => {
+    setValue(newValue)
+  }
+
+  return (
+    <div>
+      <Tabs value={value} onChange={handleChange}>
+        <Tabs.Tab label='Label' />
+        <Tabs.Tab label='Label' disabled />
+        <Tabs.Tab label='Label' />
+      </Tabs>
+
+      {value === 0 && (
+        <Container top={SPACING_4}>Content of the first tab</Container>
+      )}
+      {value === 1 && (
+        <Container top={SPACING_4}>Content of the second tab</Container>
+      )}
+      {value === 2 && (
+        <Container top={SPACING_4}>Content of the third tab</Container>
+      )}
+    </div>
+  )
+}
+
+export default Example

package/src/Tab/story/Icon.example.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { Container, Tabs, Tooltip } from '@toptal/picasso'
+import { SPACING_4 } from '@toptal/picasso-utils'
+import { Exclamation16 } from '@toptal/picasso-icons'
+
+const Example = () => {
+  const [value, setValue] = React.useState(0)
+
+  const handleChange = (_: React.ChangeEvent<{}>, newValue: number) => {
+    setValue(newValue)
+  }
+
+  return (
+    <div>
+      <Tabs value={value} onChange={handleChange}>
+        <Tabs.Tab
+          label='Label'
+          icon={
+            <Tooltip content='Some content...' placement='top'>
+              <span>
+                <Exclamation16 color='red' />
+              </span>
+            </Tooltip>
+          }
+        />
+        <Tabs.Tab label='Label' />
+        <Tabs.Tab
+          label='Label'
+          icon={
+            <Tooltip content='Some content...' placement='top'>
+              <span>
+                <Exclamation16 color='red' />
+              </span>
+            </Tooltip>
+          }
+        />
+      </Tabs>
+
+      {value === 0 && (
+        <Container top={SPACING_4}>Content of the first tab</Container>
+      )}
+      {value === 1 && (
+        <Container top={SPACING_4}>Content of the second tab</Container>
+      )}
+      {value === 2 && (
+        <Container top={SPACING_4}>Content of the third tab</Container>
+      )}
+    </div>
+  )
+}
+
+export default Example

package/src/Tab/story/Vertical.example.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import { Container, Tabs, Typography } from '@toptal/picasso'
+import { SPACING_8, SPACING_4, palette } from '@toptal/picasso-utils'
+
+const Example = () => {
+  return (
+    <Container flex gap={SPACING_8} padded={SPACING_4}>
+      <ExampleDecorator title='With Title'>
+        <Tabs value={0} orientation='vertical'>
+          <Tabs.Tab label='Label' />
+          <Tabs.Tab label='Label' disabled />
+          <Tabs.Tab label='Label' />
+          <Tabs.Tab label='Very long label that truncated' />
+        </Tabs>
+      </ExampleDecorator>
+      <ExampleDecorator title='With Title & Description'>
+        <Tabs value={0} orientation='vertical'>
+          <Tabs.Tab label='Label' description='Description' />
+          <Tabs.Tab label='Label' description='Description' disabled />
+          <Tabs.Tab label='Label' description='Description' />
+          <Tabs.Tab
+            label='Very long label that truncated'
+            description='Description'
+          />
+          <Tabs.Tab
+            label='Label'
+            description='Very long description that truncated'
+          />
+        </Tabs>
+      </ExampleDecorator>
+      <ExampleDecorator title='With UserBadge'>
+        <Tabs value={0} orientation='vertical'>
+          <Tabs.Tab label='Label' description='Description' avatar={null} />
+          <Tabs.Tab
+            label='Label'
+            disabled
+            description='Description'
+            avatar='./jacqueline-with-flowers-1954-square.jpg'
+          />
+          <Tabs.Tab
+            label='Label'
+            description='Description'
+            avatar='./jacqueline-with-flowers-1954-square.jpg'
+          />
+          <Tabs.Tab
+            label='Very long label that truncated'
+            description='Description'
+            avatar='./jacqueline-with-flowers-1954-square.jpg'
+          />
+          <Tabs.Tab
+            label='Label'
+            description='Very long description that truncated'
+            avatar='./jacqueline-with-flowers-1954-square.jpg'
+          />
+          <Tabs.Tab
+            label='Label'
+            avatar='./jacqueline-with-flowers-1954-square.jpg'
+          />
+        </Tabs>
+      </ExampleDecorator>
+    </Container>
+  )
+}
+
+type Props = {
+  children: React.ReactNode
+  title: string
+}
+
+const ExampleDecorator = ({ children, title }: Props) => {
+  const style: React.CSSProperties = { backgroundColor: palette.grey.lighter }
+
+  return (
+    <Container>
+      <Typography variant='heading' size='small'>
+        {title}
+      </Typography>
+      <Container style={style}>{children}</Container>
+    </Container>
+  )
+}
+
+export default Example

package/src/Tab/story/index.jsx

@@ -0,0 +1,29 @@
+import { Tab } from '../Tab'
+import PicassoBook from '~/.storybook/components/PicassoBook'
+
+const componentDocs = PicassoBook.createComponentDocs(Tab, 'Tabs.Tab')
+
+const chapter = PicassoBook.connectToPage(page => {
+  page
+    .createChapter('Tabs.Tab')
+    .addExample(
+      'Tab/story/Vertical.example.tsx',
+      {
+        title: 'Vertical tab',
+        takeScreenshot: false,
+      },
+      'base/Tabs'
+    )
+    .addExample('Tab/story/Disabled.example.tsx', 'Disabled tab', 'base/Tabs')
+    .addExample(
+      'Tab/story/CustomValue.example.tsx',
+      'Using custom value',
+      'base/Tabs'
+    )
+    .addExample('Tab/story/Icon.example.tsx', 'With Icon', 'base/Tabs')
+})
+
+export default {
+  chapter,
+  componentDocs,
+}

package/src/Tab/styles.ts

@@ -0,0 +1,106 @@
+import type { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/core/styles'
+import { rem } from '@toptal/picasso-shared'
+import { PicassoProvider } from '@toptal/picasso-provider'
+
+PicassoProvider.override(({ breakpoints, palette }: Theme) => ({
+  MuiTab: {
+    root: {
+      minHeight: 0,
+      minWidth: 0,
+      lineHeight: 1,
+      textTransform: 'none',
+      padding: `${rem('9px')} 0 ${rem('7px')}`,
+      overflow: 'initial',
+
+      [breakpoints.up('md')]: {
+        padding: undefined,
+      },
+
+      color: palette.grey.dark,
+
+      [breakpoints.up('md')]: {
+        minWidth: 'auto',
+        fontSize: '1rem',
+      },
+    },
+    labelIcon: {
+      minHeight: 0,
+      paddingRight: '1.5rem',
+      paddingTop: rem('9px'),
+      '& $wrapper > *:first-child': {
+        position: 'absolute',
+        right: 0,
+        marginBottom: 0,
+      },
+    },
+    selected: {
+      color: palette.common.black,
+    },
+    textColorInherit: {
+      '&$disabled': {
+        color: palette.grey.main,
+      },
+    },
+    disabled: {},
+  },
+}))
+
+export default ({ sizes, palette, shadows, transitions }: Theme) =>
+  createStyles({
+    horizontal: {
+      '&:not(:last-child)': {
+        marginRight: '2em',
+      },
+    },
+    vertical: {
+      width: '100%',
+      borderRadius: `${sizes.borderRadius.small} 0 0 ${sizes.borderRadius.small}`,
+      margin: '0.25rem 0',
+      overflow: 'hidden',
+      padding: '0.5rem 1rem',
+      transition: `all ${transitions.duration.short}ms ${transitions.easing.easeInOut}`,
+      textAlign: 'left',
+      backgroundColor: palette.grey.lighter,
+      opacity: 1,
+      color: palette.grey.dark,
+
+      '&:first-child': {
+        marginTop: '1rem',
+      },
+
+      '&:last-child': {
+        marginBottom: '1rem',
+      },
+
+      '&:hover': {
+        color: palette.common.black,
+      },
+
+      '&:hover:not($selected)': {
+        backgroundColor: palette.grey.lighter2,
+      },
+
+      '& $wrapper': {
+        display: 'block',
+      },
+    },
+    selected: {
+      '&$vertical': {
+        color: palette.common.black,
+        boxShadow: shadows[1],
+        backgroundColor: palette.grey.lightest,
+
+        '&::before': {
+          content: '""',
+          background: palette.blue.main,
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          bottom: 0,
+          width: '3px',
+        },
+      },
+    },
+    wrapper: {},
+  })