[PF-235] Add 2nd batch of sidebar icons (#4634)

.changeset/serious-dragons-pretend.md

@@ -0,0 +1,7 @@
+---
+'@toptal/picasso-icons': minor
+---
+
+### Icon
+
+- add new icons: `AssociatedOrgUnitJoin16`, `Dashboard`, `Memo`, `ProfileCard`, `Table`, `VideoCall`

packages/base/Icons/src/Icon/AssociatedOrgUnitJoin16.tsx

@@ -0,0 +1,61 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+import styles from './styles'
+const BASE_SIZE = 16
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, {
+  name: 'PicassoSvgAssociatedOrgUnitJoin16',
+})
+const SvgAssociatedOrgUnitJoin16 = forwardRef(
+  function SvgAssociatedOrgUnitJoin16(props: Props, ref: Ref<SVGSVGElement>) {
+    const {
+      className,
+      style = {},
+      color,
+      scale,
+      base,
+      'data-testid': testId,
+    } = props
+    const classes: Record<string, string> = useStyles(props)
+    const classNames = [classes.root, className]
+    const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+    const colorClassName = kebabToCamelCase(`${color}`)
+
+    if (classes[colorClassName]) {
+      classNames.push(classes[colorClassName])
+    }
+
+    const svgStyle = {
+      minWidth: `${scaledSize}px`,
+      minHeight: `${scaledSize}px`,
+      ...style,
+    }
+
+    return (
+      <svg
+        fill='none'
+        viewBox='0 0 16 16'
+        className={cx(...classNames)}
+        style={svgStyle}
+        ref={ref}
+        data-testid={testId}
+      >
+        <path d='M8.5 1a7.5 7.5 0 1 1-4.36 13.604l.583-.814a6.5 6.5 0 1 0-.001-10.58l-.581-.814A7.466 7.466 0 0 1 8.5 1Zm-2 3.793L10.207 8.5 6.5 12.207l-.707-.707L8.292 9H0V8h8.292l-2.5-2.5.708-.707Z' />
+      </svg>
+    )
+  }
+)
+
+SvgAssociatedOrgUnitJoin16.displayName = 'SvgAssociatedOrgUnitJoin16'
+export default SvgAssociatedOrgUnitJoin16

packages/base/Icons/src/Icon/AssociatedOrgUnitJoin24.tsx

@@ -0,0 +1,61 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+import styles from './styles'
+const BASE_SIZE = 24
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, {
+  name: 'PicassoSvgAssociatedOrgUnitJoin24',
+})
+const SvgAssociatedOrgUnitJoin24 = forwardRef(
+  function SvgAssociatedOrgUnitJoin24(props: Props, ref: Ref<SVGSVGElement>) {
+    const {
+      className,
+      style = {},
+      color,
+      scale,
+      base,
+      'data-testid': testId,
+    } = props
+    const classes: Record<string, string> = useStyles(props)
+    const classNames = [classes.root, className]
+    const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+    const colorClassName = kebabToCamelCase(`${color}`)
+
+    if (classes[colorClassName]) {
+      classNames.push(classes[colorClassName])
+    }
+
+    const svgStyle = {
+      minWidth: `${scaledSize}px`,
+      minHeight: `${scaledSize}px`,
+      ...style,
+    }
+
+    return (
+      <svg
+        fill='none'
+        viewBox='0 0 24 24'
+        className={cx(...classNames)}
+        style={svgStyle}
+        ref={ref}
+        data-testid={testId}
+      >
+        <path d='M12.5 2C18.299 2 23 6.701 23 12.5S18.299 23 12.5 23c-2.43 0-4.667-.825-6.446-2.21l.614-.79a9.46 9.46 0 0 0 5.832 2 9.5 9.5 0 0 0 0-19 9.459 9.459 0 0 0-5.832 2l-.615-.789A10.455 10.455 0 0 1 12.5 2Zm-3 5.793 4.707 4.707L9.5 17.207l-.707-.707 3.5-3.5H1v-1h11.293l-3.5-3.5.707-.707Z' />
+      </svg>
+    )
+  }
+)
+
+SvgAssociatedOrgUnitJoin24.displayName = 'SvgAssociatedOrgUnitJoin24'
+export default SvgAssociatedOrgUnitJoin24

packages/base/Icons/src/Icon/AssociatedOrgUnitJoinResponsive.tsx

@@ -0,0 +1,19 @@
+import { useScreens } from '@toptal/picasso-provider'
+import React from 'react'
+
+import AssociatedOrgUnitJoin16 from './AssociatedOrgUnitJoin16'
+import AssociatedOrgUnitJoin24 from './AssociatedOrgUnitJoin24'
+import type { Props } from './AssociatedOrgUnitJoin16'
+
+const AssociatedOrgUnitJoinResponsive = (props: Props) => {
+  const screens = useScreens()
+
+  return screens(
+    {
+      xl: <AssociatedOrgUnitJoin16 {...props} />,
+    },
+    <AssociatedOrgUnitJoin24 {...props} />
+  ) as JSX.Element
+}
+
+export default AssociatedOrgUnitJoinResponsive

packages/base/Icons/src/Icon/Dashboard16.tsx

@@ -0,0 +1,62 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+import styles from './styles'
+const BASE_SIZE = 16
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, {
+  name: 'PicassoSvgDashboard16',
+})
+const SvgDashboard16 = forwardRef(function SvgDashboard16(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId,
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      data-name='Layer 2'
+      viewBox='0 0 16 16'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='M14.2 2H1.8C.81 2 0 2.81 0 3.8v8.4c0 .99.81 1.8 1.8 1.8h12.4c.99 0 1.8-.81 1.8-1.8V3.8c0-.99-.81-1.8-1.8-1.8ZM1 3.8c0-.44.36-.8.8-.8H5v2H1V3.8Zm.8 9.2c-.44 0-.8-.36-.8-.8V6h4v7H1.8Zm13.2-.8c0 .44-.36.8-.8.8H6V3h8.2c.44 0 .8.36.8.8v8.4ZM7 8h7V5H7v3Zm1-2h5v1H8V6Zm-1 6h7V9H7v3Zm1-2h5v1H8v-1Z' />
+    </svg>
+  )
+})
+
+SvgDashboard16.displayName = 'SvgDashboard16'
+export default SvgDashboard16

packages/base/Icons/src/Icon/Dashboard24.tsx

@@ -0,0 +1,62 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+import styles from './styles'
+const BASE_SIZE = 24
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, {
+  name: 'PicassoSvgDashboard24',
+})
+const SvgDashboard24 = forwardRef(function SvgDashboard24(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId,
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      data-name='Layer 2'
+      viewBox='0 0 24 24'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='M21.5 3h-19A2.5 2.5 0 0 0 0 5.5v13A2.5 2.5 0 0 0 2.5 21h19a2.5 2.5 0 0 0 2.5-2.5v-13A2.5 2.5 0 0 0 21.5 3Zm-19 1H7v4H1V5.5C1 4.67 1.67 4 2.5 4Zm0 16c-.83 0-1.5-.67-1.5-1.5V9h6v11H2.5ZM23 18.5c0 .83-.67 1.5-1.5 1.5H8V4h13.5c.83 0 1.5.67 1.5 1.5v13ZM10 12h11V8H10v4Zm1-3h9v2h-9V9Zm-1 9h11v-4H10v4Zm1-3h9v2h-9v-2Z' />
+    </svg>
+  )
+})
+
+SvgDashboard24.displayName = 'SvgDashboard24'
+export default SvgDashboard24

packages/base/Icons/src/Icon/DashboardResponsive.tsx

@@ -0,0 +1,19 @@
+import { useScreens } from '@toptal/picasso-provider'
+import React from 'react'
+
+import Dashboard16 from './Dashboard16'
+import Dashboard24 from './Dashboard24'
+import type { Props } from './Dashboard16'
+
+const DashboardResponsive = (props: Props) => {
+  const screens = useScreens()
+
+  return screens(
+    {
+      xl: <Dashboard16 {...props} />,
+    },
+    <Dashboard24 {...props} />
+  ) as JSX.Element
+}
+
+export default DashboardResponsive

packages/base/Icons/src/Icon/Memo16.tsx

@@ -0,0 +1,62 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+import styles from './styles'
+const BASE_SIZE = 16
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, {
+  name: 'PicassoSvgMemo16',
+})
+const SvgMemo16 = forwardRef(function SvgMemo16(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId,
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      data-name='Layer 2'
+      viewBox='0 0 16 16'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='M0 1v14h16V1H0Zm15 13H1V2h14v12ZM3 4h4v1H3zm0 3h10v1H3zm0 2h10v1H3zm0 2h10v1H3z' />
+    </svg>
+  )
+})
+
+SvgMemo16.displayName = 'SvgMemo16'
+export default SvgMemo16