[MP-471] Add icons (Expand / Collapse / CommandKey) (#4624)

toptal · Dec 2, 2024 · 41357fe · 41357fe
1 parent 9ad3a87
commit 41357fe
Show file tree

Hide file tree

Showing 17 changed files with 467 additions and 0 deletions.
diff --git a/.changeset/beige-waves-train.md b/.changeset/beige-waves-train.md
@@ -0,0 +1,5 @@
+---
+'@toptal/picasso-icons': minor
+---
+
+- add icons (`Expand` / `Collapse` / `CommandKey`)
diff --git a/packages/base/Icons/src/Icon/Collapse16.tsx b/packages/base/Icons/src/Icon/Collapse16.tsx
@@ -0,0 +1,65 @@
+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: 'PicassoSvgCollapse16',
+})
+const SvgCollapse16 = forwardRef(function SvgCollapse16(
+  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
+        fillRule='evenodd'
+        d='m1.5 1.5-.353.353L3.22 3.927 5.293 6H2v.987h4.987V2H6v3.293L3.927 3.22 1.853 1.147 1.5 1.5m10.573 1.72L10 5.293V2h-.987v4.987H14V6h-3.293l2.073-2.074 2.074-2.073L14.5 1.5l-.354-.353-2.073 2.073M2 9.507V10h3.293L3.22 12.073l-2.073 2.074.353.353.353.353 2.074-2.073L6 10.707V14h.987V9.013H2v.494m7.013 2V14H10v-3.293l2.073 2.073 2.074 2.073.353-.353.353-.353-2.073-2.074L10.707 10H14v-.987H9.013v2.494'
+      />
+    </svg>
+  )
+})
+
+SvgCollapse16.displayName = 'SvgCollapse16'
+export default SvgCollapse16
diff --git a/packages/base/Icons/src/Icon/Collapse24.tsx b/packages/base/Icons/src/Icon/Collapse24.tsx
@@ -0,0 +1,65 @@
+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: 'PicassoSvgCollapse24',
+})
+const SvgCollapse24 = forwardRef(function SvgCollapse24(
+  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
+        fillRule='evenodd'
+        d='m1.75 1.75-.35.35 3.45 3.45L8.3 9H3v1h7V3H9v5.3L5.55 4.85 2.1 1.4l-.35.35m16.7 3.1L15 8.3V3h-1v7h7V9h-5.3l3.45-3.45 3.451-3.451-.351-.349-.351-.349L18.45 4.85M3 14.5v.5h5.3l-3.45 3.45L1.4 21.9l.35.35.35.35 3.45-3.45L9 15.7V21h1v-7H3v.5m11 3V21h1v-5.3l3.45 3.45 3.45 3.45.35-.35.35-.35-3.45-3.45L15.7 15H21v-1h-7v3.5'
+      />
+    </svg>
+  )
+})
+
+SvgCollapse24.displayName = 'SvgCollapse24'
+export default SvgCollapse24
diff --git a/packages/base/Icons/src/Icon/CollapseResponsive.tsx b/packages/base/Icons/src/Icon/CollapseResponsive.tsx
@@ -0,0 +1,19 @@
+import { useScreens } from '@toptal/picasso-provider'
+import React from 'react'
+
+import Collapse16 from './Collapse16'
+import Collapse24 from './Collapse24'
+import type { Props } from './Collapse16'
+
+const CollapseResponsive = (props: Props) => {
+  const screens = useScreens()
+
+  return screens(
+    {
+      xl: <Collapse16 {...props} />,
+    },
+    <Collapse24 {...props} />
+  ) as JSX.Element
+}
+
+export default CollapseResponsive
diff --git a/packages/base/Icons/src/Icon/CommandKey16.tsx b/packages/base/Icons/src/Icon/CommandKey16.tsx
@@ -0,0 +1,65 @@
+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: 'PicassoSvgCommandKey16',
+})
+const SvgCommandKey16 = forwardRef(function SvgCommandKey16(
+  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
+        fillRule='evenodd'
+        d='M3.003 1.055c-.942.211-1.643.876-1.915 1.814-.053.181-.061.272-.061.638 0 .419.001.431.099.733a2.478 2.478 0 0 0 1.52 1.599c.355.132.44.141 1.427.154l.94.012v3.99l-.94.012c-.99.013-1.071.021-1.433.156-.639.237-1.216.791-1.445 1.388-.144.377-.166.497-.167.942-.001.368.007.456.06.638.211.73.67 1.286 1.325 1.603.407.198.598.239 1.094.239.419 0 .431-.001.733-.099a2.478 2.478 0 0 0 1.599-1.52c.132-.355.141-.44.154-1.427l.012-.94h3.99l.012.94c.013.987.022 1.072.154 1.427.273.736.84 1.275 1.599 1.52.302.098.313.099.733.099.497-.001.69-.043 1.094-.239.655-.317 1.115-.874 1.325-1.603.052-.18.061-.274.061-.638 0-.42-.001-.431-.099-.733a2.478 2.478 0 0 0-1.52-1.599c-.355-.132-.44-.141-1.427-.154l-.94-.012v-3.99l.94-.012c.987-.013 1.072-.022 1.427-.154a2.478 2.478 0 0 0 1.52-1.599c.098-.302.099-.313.099-.733 0-.364-.009-.458-.061-.638-.21-.729-.67-1.286-1.325-1.603-.408-.198-.598-.24-1.094-.238-.445.001-.565.023-.942.167-.597.229-1.151.806-1.388 1.445-.135.362-.143.443-.156 1.433l-.012.94h-3.99l-.012-.94c-.013-.987-.022-1.072-.154-1.427A2.482 2.482 0 0 0 4.253 1.13c-.27-.088-.324-.096-.68-.106-.283-.007-.435.001-.57.031m.861.986c.501.118.964.578 1.102 1.096.024.093.034.373.034.996V5h-.867c-.943 0-.995-.006-1.302-.154-.225-.109-.543-.419-.664-.649-.243-.46-.213-1.101.071-1.515.231-.335.59-.583.949-.655.177-.035.496-.029.677.014m9.156.048c.29.11.555.323.742.593.284.414.314 1.055.071 1.515-.121.23-.439.54-.664.649-.307.148-.359.154-1.302.154H11v-.867c0-.623.01-.903.034-.996.136-.51.594-.971 1.09-1.096.241-.062.668-.039.896.048M10 8v2H6V6h4v2m-5 3.867c0 .943-.006.995-.154 1.302-.109.225-.419.543-.649.664-.46.243-1.101.213-1.515-.071a2.032 2.032 0 0 1-.444-.444c-.282-.411-.314-1.058-.074-1.508.221-.414.669-.739 1.099-.795.09-.012.518-.02.95-.018L5 11v.867m7.907-.822c.266.088.441.196.64.395.341.341.47.674.445 1.147-.026.482-.259.889-.674 1.175-.414.284-1.055.314-1.515.071-.22-.116-.54-.439-.641-.646-.153-.317-.156-.336-.169-1.261-.006-.473-.004-.879.004-.902.015-.038.111-.041.903-.031.69.009.913.021 1.007.052'
+      />
+    </svg>
+  )
+})
+
+SvgCommandKey16.displayName = 'SvgCommandKey16'
+export default SvgCommandKey16
diff --git a/packages/base/Icons/src/Icon/CommandKey24.tsx b/packages/base/Icons/src/Icon/CommandKey24.tsx
@@ -0,0 +1,65 @@
+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: 'PicassoSvgCommandKey24',
+})
+const SvgCommandKey24 = forwardRef(function SvgCommandKey24(
+  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
+        fillRule='evenodd'
+        d='M4.933 2.056c-1.018.195-1.785.691-2.333 1.51-.405.606-.572 1.17-.572 1.934 0 .765.167 1.328.575 1.938.54.808 1.355 1.33 2.347 1.503.256.044.677.059 1.695.059H8v5.994l-1.51.016c-1.627.016-1.686.023-2.338.269-.303.114-.789.435-1.083.715-.285.272-.667.83-.788 1.152-.201.533-.253.812-.253 1.354 0 .765.167 1.328.575 1.938.715 1.07 2.03 1.685 3.265 1.529 1.602-.202 2.797-1.336 3.072-2.915.045-.258.06-.676.06-1.697V16h5.994l.016 1.51c.016 1.629.023 1.686.271 2.344.126.335.514.894.815 1.177.746.697 1.835 1.062 2.791.935.827-.11 1.507-.44 2.073-1.006.57-.57.902-1.26 1.007-2.09.12-.953-.244-2.034-.936-2.774-.283-.301-.842-.689-1.177-.815-.658-.248-.715-.255-2.344-.271L16 14.994V9h1.355c1.021 0 1.439-.015 1.697-.06 1.572-.274 2.701-1.457 2.914-3.055.126-.95-.241-2.047-.935-2.789-.283-.301-.842-.689-1.177-.815-.533-.201-.812-.253-1.354-.253-.764 0-1.328.167-1.934.572-.747.5-1.194 1.139-1.457 2.08-.077.275-.085.428-.099 1.81L14.994 8H9V6.645c0-1.024-.015-1.438-.06-1.699-.292-1.676-1.628-2.854-3.32-2.927a3.299 3.299 0 0 0-.687.037m1.203 1.023c.444.113.758.295 1.108.641.358.354.564.7.676 1.14.073.284.08.444.08 1.726V8H6.586c-1.276 0-1.443-.008-1.722-.079-.457-.117-.757-.293-1.125-.66-.367-.368-.543-.668-.66-1.125a2.655 2.655 0 0 1 .209-1.829c.173-.326.693-.846 1.02-1.019a2.646 2.646 0 0 1 1.828-.209m13 0c.17.043.42.138.557.209.326.173.846.693 1.019 1.019.386.733.379 1.695-.019 2.409-.188.338-.639.789-.977.977-.504.281-.701.307-2.302.307H16V6.586c0-1.581.025-1.779.288-2.279.173-.326.693-.846 1.02-1.019a2.646 2.646 0 0 1 1.828-.209M15 12v3H9V9h6v3m-7 5.414c0 1.6-.026 1.797-.306 2.302-.187.338-.674.822-1.001.995-.718.38-1.666.38-2.386.001-.326-.173-.846-.693-1.019-1.019a2.655 2.655 0 0 1-.209-1.829c.117-.457.293-.757.66-1.125.363-.362.666-.542 1.109-.658.26-.068.447-.077 1.722-.079L8 16v1.414m11.136-1.335c.17.043.42.138.557.209.326.173.846.693 1.019 1.019.386.733.379 1.693-.018 2.409-.187.338-.674.822-1.001.995-.718.38-1.666.38-2.386.001-.326-.173-.846-.693-1.019-1.019-.263-.5-.288-.698-.288-2.279V16h1.414c1.276 0 1.443.008 1.722.079'
+      />
+    </svg>
+  )
+})
+
+SvgCommandKey24.displayName = 'SvgCommandKey24'
+export default SvgCommandKey24
diff --git a/packages/base/Icons/src/Icon/CommandKeyResponsive.tsx b/packages/base/Icons/src/Icon/CommandKeyResponsive.tsx
@@ -0,0 +1,19 @@
+import { useScreens } from '@toptal/picasso-provider'
+import React from 'react'
+
+import CommandKey16 from './CommandKey16'
+import CommandKey24 from './CommandKey24'
+import type { Props } from './CommandKey16'
+
+const CommandKeyResponsive = (props: Props) => {
+  const screens = useScreens()
+
+  return screens(
+    {
+      xl: <CommandKey16 {...props} />,
+    },
+    <CommandKey24 {...props} />
+  ) as JSX.Element
+}
+
+export default CommandKeyResponsive
diff --git a/packages/base/Icons/src/Icon/Expand16.tsx b/packages/base/Icons/src/Icon/Expand16.tsx
@@ -0,0 +1,65 @@
+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: 'PicassoSvgExpand16',
+})
+const SvgExpand16 = forwardRef(function SvgExpand16(
+  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
+        fillRule='evenodd'
+        d='M1.013 3.507V6H2V2.707L4.073 4.78l2.074 2.073L6.5 6.5l.353-.353L4.78 4.073 2.707 2H6v-.987H1.013v2.494m8.987-2V2h3.293L11.22 4.073 9.147 6.147 9.5 6.5l.353.353 2.074-2.073L14 2.707V6h.987V1.013H10v.494M4.073 11.22 2 13.293V10h-.987v4.987H6V14H2.707l2.073-2.074 2.074-2.073L6.5 9.5l-.354-.353-2.073 2.073M9.5 9.5l-.353.353 2.073 2.074L13.293 14H10v.987h4.987V10H14v3.293l-2.073-2.073-2.074-2.073L9.5 9.5'
+      />
+    </svg>
+  )
+})
+
+SvgExpand16.displayName = 'SvgExpand16'
+export default SvgExpand16