@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-c6a9da7e9.4084

package/src/Tab/test.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import { render } from '@toptal/picasso-test-utils'
+import type { OmitInternalProps } from '@toptal/picasso-shared'
+import * as titleCaseModule from 'ap-style-title-case'
+import type { PicassoConfig } from '@toptal/picasso-test-utils'
+
+import type { Props } from './Tab'
+import { Tab } from './Tab'
+
+jest.mock('ap-style-title-case')
+
+const renderTab = (
+  props: OmitInternalProps<Props>,
+  picassoConfig?: PicassoConfig
+) => {
+  const { label, disabled, icon, titleCase } = props
+
+  return render(
+    <Tab label={label} disabled={disabled} icon={icon} titleCase={titleCase} />,
+    undefined,
+    picassoConfig
+  )
+}
+
+let spiedOnTitleCase: jest.SpyInstance
+
+describe('Tab', () => {
+  beforeEach(() => {
+    spiedOnTitleCase = jest.spyOn(titleCaseModule, 'default')
+  })
+  afterEach(() => {
+    spiedOnTitleCase.mockReset()
+  })
+
+  describe('Tab', () => {
+    it('renders', () => {
+      const { container } = renderTab({
+        label: 'Tab Label',
+      })
+
+      expect(container).toMatchSnapshot()
+    })
+
+    it('disabled tab', () => {
+      const { container } = renderTab({
+        label: 'Tab Label',
+        disabled: true,
+      })
+
+      expect(container).toMatchSnapshot()
+    })
+
+    it('tab with icon', () => {
+      const Icon = () => <div id='Icon' />
+      const { container } = renderTab({
+        label: 'Tab Label',
+        icon: <Icon />,
+      })
+
+      expect(container).toMatchSnapshot()
+    })
+
+    it('should transform text to title case when Picasso titleCase property is true', () => {
+      const LABEL_TEXT = 'Test vh2'
+
+      renderTab({ label: LABEL_TEXT }, { titleCase: true })
+
+      expect(spiedOnTitleCase).toHaveBeenCalledWith(LABEL_TEXT)
+    })
+
+    it('should not transform text to title case when Picasso titleCase property is true but the component property overrides it', () => {
+      renderTab({ label: 'abc sp3', titleCase: false }, { titleCase: true })
+
+      expect(spiedOnTitleCase).toHaveBeenCalledTimes(0)
+    })
+  })
+})

package/src/TabDescription/TabDescription.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import type { Theme } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
+import { TypographyOverflow } from '@toptal/picasso-typography-overflow'
+
+import styles from './styles'
+
+interface Props {
+  children: string
+  disabled?: boolean
+}
+
+const useStyles = makeStyles<Theme>(styles, { name: 'PicassoTabDescription' })
+
+const TabDescription = ({ children, disabled }: Props) => {
+  const classes = useStyles()
+  const color = disabled ? 'inherit' : undefined
+
+  return (
+    <TypographyOverflow
+      className={classes.root}
+      size='xxsmall'
+      inline
+      color={color}
+    >
+      {children}
+    </TypographyOverflow>
+  )
+}
+
+export default TabDescription

package/src/TabDescription/index.ts

@@ -0,0 +1 @@
+export { default as TabDescription } from './TabDescription'

package/src/TabDescription/styles.ts

@@ -0,0 +1,7 @@
+import { rem } from '@toptal/picasso-shared'
+
+export default {
+  root: {
+    marginTop: rem('2px'),
+  },
+}

package/src/TabLabel/TabLabel.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { TypographyOverflow } from '@toptal/picasso-typography-overflow'
+import { Typography } from '@toptal/picasso-typography'
+import { toTitleCase } from '@toptal/picasso-utils'
+
+interface Props {
+  label?: React.ReactNode
+  orientation: 'horizontal' | 'vertical'
+  titleCase?: boolean
+}
+
+const TabLabel = ({ label, orientation, titleCase }: Props) => {
+  if (orientation === 'horizontal') {
+    return (
+      <Typography as='div' size='small' weight='semibold' color='inherit'>
+        {titleCase ? toTitleCase(label) : label}
+      </Typography>
+    )
+  }
+
+  return (
+    <TypographyOverflow
+      as='div'
+      color='inherit'
+      inline
+      size='medium'
+      variant='body'
+      weight='semibold'
+    >
+      {titleCase ? toTitleCase(label) : label}
+    </TypographyOverflow>
+  )
+}
+
+export default TabLabel

package/src/TabLabel/index.ts

@@ -0,0 +1 @@
+export { default as TabLabel } from './TabLabel'

package/src/TabScrollButton/TabScrollButton.tsx

@@ -0,0 +1,64 @@
+import cx from 'classnames'
+import React, { forwardRef } from 'react'
+import { ButtonBase } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+import type { BaseProps } from '@toptal/picasso-shared'
+import { BackMinor16, ChevronMinor16 } from '@toptal/picasso-icons'
+import { Container } from '@toptal/picasso-container'
+
+import styles from './styles'
+
+type DirectionType = 'left' | 'right'
+
+export interface Props extends BaseProps {
+  /** The direction the button should indicate. */
+  direction: DirectionType
+  /** If `true`, the component is disabled. */
+  disabled?: boolean
+}
+
+const useStyles = makeStyles(styles, {
+  name: 'PicassoTabScrollButton',
+})
+
+export const TabScrollButton = forwardRef<HTMLDivElement, Props>(
+  function TabScrollButton(props, ref) {
+    const { className, style, direction, disabled, ...rest } = props
+    const classes = useStyles()
+
+    if (disabled) {
+      return null
+    }
+
+    return (
+      <Container
+        {...rest}
+        ref={ref}
+        className={cx(classes.root, className)}
+        style={style}
+      >
+        <Container
+          className={cx(classes.gradient, {
+            [classes.left]: direction === 'left',
+            [classes.right]: direction === 'right',
+          })}
+        >
+          <ButtonBase
+            className={cx(classes.button, {
+              [classes.left]: direction === 'left',
+              [classes.right]: direction === 'right',
+            })}
+            aria-label={`${direction} button`}
+            data-testid={`tab-scroll-button-${direction}`}
+          >
+            {direction === 'left' ? <BackMinor16 /> : <ChevronMinor16 />}
+          </ButtonBase>
+        </Container>
+      </Container>
+    )
+  }
+)
+
+TabScrollButton.displayName = 'TabScrollButton'
+
+export default TabScrollButton

package/src/TabScrollButton/index.ts

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

package/src/TabScrollButton/styles.ts

@@ -0,0 +1,37 @@
+import { createStyles } from '@material-ui/core'
+import type { Theme } from '@material-ui/core/styles'
+import { alpha } from '@toptal/picasso-shared'
+
+export default ({ palette }: Theme) => {
+  const color = palette.common.white
+  const colorStops = `${color} 0%, ${color} 50%, ${alpha(color, 0)} 100%`
+
+  return createStyles({
+    root: {
+      position: 'relative',
+    },
+    gradient: {
+      position: 'absolute',
+      width: '2.5rem',
+      height: '100%',
+      zIndex: 2,
+      '&$left': {
+        background: `linear-gradient(90deg, ${colorStops})`,
+      },
+      '&$right': {
+        background: `linear-gradient(270deg, ${colorStops})`,
+      },
+    },
+    button: {
+      position: 'absolute',
+      width: '1rem',
+      height: '100%',
+    },
+    left: {
+      left: 0,
+    },
+    right: {
+      right: 0,
+    },
+  })
+}

package/src/Tabs/Tabs.tsx

@@ -0,0 +1,81 @@
+import type { ReactNode } from 'react'
+import React, { forwardRef } from 'react'
+import type { Theme } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
+import type { TabsProps } from '@material-ui/core'
+import { Tabs as MUITabs } from '@material-ui/core'
+import type { ButtonOrAnchorProps, BaseProps } from '@toptal/picasso-shared'
+
+import { TabScrollButton } from '../TabScrollButton'
+import styles from './styles'
+import useTabAction from './use-tab-action'
+
+export interface Props
+  extends BaseProps,
+    Omit<ButtonOrAnchorProps, 'onChange'> {
+  /** Tabs content containing Tab components */
+  children: ReactNode
+
+  /** Callback fired when the value changes. */
+  onChange?: (event: React.ChangeEvent<{}>, value: TabsProps['value']) => void
+
+  /** The value of the currently selected Tab. If you don't want any selected Tab, you can set this property to false. */
+  value: TabsProps['value']
+
+  /** The tabs orientation (layout flow direction). */
+  orientation?: 'horizontal' | 'vertical'
+
+  /** Determines additional display behavior of the tabs */
+  variant?: Extract<TabsProps['variant'], 'scrollable' | 'fullWidth'>
+}
+
+const useStyles = makeStyles<Theme>(styles, {
+  name: 'Tabs',
+})
+
+export const TabsOrientationContext = React.createContext<
+  'horizontal' | 'vertical'
+>('horizontal')
+
+// eslint-disable-next-line react/display-name
+export const Tabs = forwardRef<HTMLButtonElement, Props>(function Tabs(
+  props,
+  ref
+) {
+  const {
+    children,
+    orientation,
+    onChange,
+    value,
+    variant = 'scrollable',
+    ...rest
+  } = props
+  const classes = useStyles(props)
+  const action = useTabAction()
+
+  return (
+    <TabsOrientationContext.Provider value={orientation!}>
+      <MUITabs
+        {...rest}
+        classes={{ root: classes[orientation!] }}
+        ref={ref}
+        onChange={onChange}
+        value={value}
+        action={action}
+        scrollButtons='auto'
+        ScrollButtonComponent={TabScrollButton}
+        orientation={orientation}
+        variant={variant}
+      >
+        {children}
+      </MUITabs>
+    </TabsOrientationContext.Provider>
+  )
+})
+
+Tabs.displayName = 'Tabs'
+Tabs.defaultProps = {
+  orientation: 'horizontal',
+}
+
+export default Tabs

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

@@ -0,0 +1,346 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tabs renders 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <div
+      class="MuiTabs-root Tabs-horizontal"
+    >
+      <div
+        class="MuiTabs-scrollable"
+        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
+      />
+      <div
+        class="MuiTabs-scroller MuiTabs-scrollable"
+        style="margin-bottom: 0px;"
+      >
+        <div
+          class="MuiTabs-flexContainer"
+          role="tablist"
+        >
+          <button
+            aria-selected="false"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit"
+            data-testid="tab-1"
+            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 1
+              </div>
+            </span>
+          </button>
+          <button
+            aria-selected="false"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit"
+            data-testid="tab-2"
+            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 2
+              </div>
+            </span>
+          </button>
+        </div>
+        <span
+          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
+          style="left: 0px; width: 0px;"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Tabs renders in full width 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <div
+      class="MuiTabs-root Tabs-horizontal"
+    >
+      <div
+        class="MuiTabs-scroller MuiTabs-fixed"
+        style="overflow: hidden;"
+      >
+        <div
+          class="MuiTabs-flexContainer"
+          role="tablist"
+        >
+          <button
+            aria-selected="false"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit MuiTab-fullWidth"
+            data-testid="tab-1"
+            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 1
+              </div>
+            </span>
+          </button>
+          <button
+            aria-selected="false"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit MuiTab-fullWidth"
+            data-testid="tab-2"
+            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 2
+              </div>
+            </span>
+          </button>
+        </div>
+        <span
+          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
+          style="left: 0px; width: 0px;"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Tabs renders in vertical orientation 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <div
+      class="MuiTabs-root Tabs-vertical MuiTabs-vertical"
+    >
+      <div
+        class="MuiTabs-scrollable"
+        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
+      />
+      <div
+        class="MuiTabs-scroller MuiTabs-scrollable"
+        style="margin-bottom: 0px;"
+      >
+        <div
+          class="MuiTabs-flexContainer MuiTabs-flexContainerVertical"
+          role="tablist"
+        >
+          <button
+            aria-selected="false"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-vertical MuiTab-textColorInherit"
+            data-testid="tab-1"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiTab-wrapper PicassoTab-wrapper"
+            >
+              <div
+                class="MuiTypography-root PicassoTypography-bodyMedium PicassoTypography-inherit PicassoTypography-semibold TypographyOverflow-wrapper TypographyOverflow-singleLine MuiTypography-body1 MuiTypography-noWrap MuiTypography-displayInline"
+              >
+                Tab 1
+              </div>
+            </span>
+          </button>
+          <button
+            aria-selected="false"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-vertical MuiTab-textColorInherit"
+            data-testid="tab-2"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiTab-wrapper PicassoTab-wrapper"
+            >
+              <div
+                class="MuiTypography-root PicassoTypography-bodyMedium PicassoTypography-inherit PicassoTypography-semibold TypographyOverflow-wrapper TypographyOverflow-singleLine MuiTypography-body1 MuiTypography-noWrap MuiTypography-displayInline"
+              >
+                Tab 2
+              </div>
+            </span>
+          </button>
+        </div>
+        <span
+          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator PrivateTabIndicator-vertical"
+          style="top: 0px; height: 0px;"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Tabs renders with a pre-selected option 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <div
+      class="MuiTabs-root Tabs-horizontal"
+    >
+      <div
+        class="MuiTabs-scrollable"
+        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
+      />
+      <div
+        class="MuiTabs-scroller MuiTabs-scrollable"
+        style="margin-bottom: 0px;"
+      >
+        <div
+          class="MuiTabs-flexContainer"
+          role="tablist"
+        >
+          <button
+            aria-selected="false"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit"
+            data-testid="tab-1"
+            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 1
+              </div>
+            </span>
+          </button>
+          <button
+            aria-selected="true"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit Mui-selected PicassoTab-selected"
+            data-testid="tab-2"
+            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 2
+              </div>
+            </span>
+          </button>
+        </div>
+        <span
+          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
+          style="left: 0px; width: 0px;"
+        />
+      </div>
+    </div>
+    <div
+      data-testid="tab-1-content"
+    >
+      Tab #
+      1
+       content
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Tabs renders with a pre-selected option using custom value 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <div
+      class="MuiTabs-root Tabs-horizontal"
+    >
+      <div
+        class="MuiTabs-scrollable"
+        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
+      />
+      <div
+        class="MuiTabs-scroller MuiTabs-scrollable"
+        style="margin-bottom: 0px;"
+      >
+        <div
+          class="MuiTabs-flexContainer"
+          role="tablist"
+        >
+          <button
+            aria-selected="true"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit Mui-selected PicassoTab-selected"
+            data-testid="tab-1"
+            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 1
+              </div>
+            </span>
+          </button>
+          <button
+            aria-selected="false"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit"
+            data-testid="tab-2"
+            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 2
+              </div>
+            </span>
+          </button>
+        </div>
+        <span
+          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
+          style="left: 0px; width: 0px;"
+        />
+      </div>
+    </div>
+    <div
+      data-testid="tab-1-content"
+    >
+      Tab #
+      1
+       content
+    </div>
+  </div>
+</div>
+`;