diff --git a/packages/base/Icons/src/Icon/Collapse16.tsx b/packages/base/Icons/src/Icon/Collapse16.tsx new file mode 100644 index 0000000000..19b0bc1fdd --- /dev/null +++ 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 +) { + const { + className, + style = {}, + color, + scale, + base, + 'data-testid': testId, + } = props + const classes: Record = 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 ( + + + + ) +}) + +SvgCollapse16.displayName = 'SvgCollapse16' +export default SvgCollapse16 diff --git a/packages/base/Icons/src/Icon/Collapse24.tsx b/packages/base/Icons/src/Icon/Collapse24.tsx new file mode 100644 index 0000000000..00fd62d6e7 --- /dev/null +++ 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 +) { + const { + className, + style = {}, + color, + scale, + base, + 'data-testid': testId, + } = props + const classes: Record = 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 ( + + + + ) +}) + +SvgCollapse24.displayName = 'SvgCollapse24' +export default SvgCollapse24 diff --git a/packages/base/Icons/src/Icon/CollapseResponsive.tsx b/packages/base/Icons/src/Icon/CollapseResponsive.tsx new file mode 100644 index 0000000000..5df129f698 --- /dev/null +++ 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: , + }, + + ) as JSX.Element +} + +export default CollapseResponsive diff --git a/packages/base/Icons/src/Icon/CommandKey16.tsx b/packages/base/Icons/src/Icon/CommandKey16.tsx new file mode 100644 index 0000000000..c5610dffe1 --- /dev/null +++ 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 +) { + const { + className, + style = {}, + color, + scale, + base, + 'data-testid': testId, + } = props + const classes: Record = 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 ( + + + + ) +}) + +SvgCommandKey16.displayName = 'SvgCommandKey16' +export default SvgCommandKey16 diff --git a/packages/base/Icons/src/Icon/CommandKey24.tsx b/packages/base/Icons/src/Icon/CommandKey24.tsx new file mode 100644 index 0000000000..2d06113615 --- /dev/null +++ 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 +) { + const { + className, + style = {}, + color, + scale, + base, + 'data-testid': testId, + } = props + const classes: Record = 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 ( + + + + ) +}) + +SvgCommandKey24.displayName = 'SvgCommandKey24' +export default SvgCommandKey24 diff --git a/packages/base/Icons/src/Icon/CommandKeyResponsive.tsx b/packages/base/Icons/src/Icon/CommandKeyResponsive.tsx new file mode 100644 index 0000000000..132f236926 --- /dev/null +++ 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: , + }, + + ) as JSX.Element +} + +export default CommandKeyResponsive diff --git a/packages/base/Icons/src/Icon/Expand16.tsx b/packages/base/Icons/src/Icon/Expand16.tsx new file mode 100644 index 0000000000..2bbd7cc127 --- /dev/null +++ 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 +) { + const { + className, + style = {}, + color, + scale, + base, + 'data-testid': testId, + } = props + const classes: Record = 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 ( + + + + ) +}) + +SvgExpand16.displayName = 'SvgExpand16' +export default SvgExpand16 diff --git a/packages/base/Icons/src/Icon/Expand24.tsx b/packages/base/Icons/src/Icon/Expand24.tsx new file mode 100644 index 0000000000..94b70c67b2 --- /dev/null +++ b/packages/base/Icons/src/Icon/Expand24.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: 'PicassoSvgExpand24', +}) +const SvgExpand24 = forwardRef(function SvgExpand24( + props: Props, + ref: Ref +) { + const { + className, + style = {}, + color, + scale, + base, + 'data-testid': testId, + } = props + const classes: Record = 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 ( + + + + ) +}) + +SvgExpand24.displayName = 'SvgExpand24' +export default SvgExpand24 diff --git a/packages/base/Icons/src/Icon/ExpandResponsive.tsx b/packages/base/Icons/src/Icon/ExpandResponsive.tsx new file mode 100644 index 0000000000..ba4381b1e3 --- /dev/null +++ b/packages/base/Icons/src/Icon/ExpandResponsive.tsx @@ -0,0 +1,19 @@ +import { useScreens } from '@toptal/picasso-provider' +import React from 'react' + +import Expand16 from './Expand16' +import Expand24 from './Expand24' +import type { Props } from './Expand16' + +const ExpandResponsive = (props: Props) => { + const screens = useScreens() + + return screens( + { + xl: , + }, + + ) as JSX.Element +} + +export default ExpandResponsive diff --git a/packages/base/Icons/src/Icon/index.ts b/packages/base/Icons/src/Icon/index.ts index 0e3842a606..d642989832 100644 --- a/packages/base/Icons/src/Icon/index.ts +++ b/packages/base/Icons/src/Icon/index.ts @@ -98,6 +98,10 @@ export { default as Code16 } from './Code16' export { default as Code24 } from './Code24' export { default as CodeBlock16 } from './CodeBlock16' export { default as CodeBlock24 } from './CodeBlock24' +export { default as Collapse16 } from './Collapse16' +export { default as Collapse24 } from './Collapse24' +export { default as CommandKey16 } from './CommandKey16' +export { default as CommandKey24 } from './CommandKey24' export { default as Commission16 } from './Commission16' export { default as Commission24 } from './Commission24' export { default as Company16 } from './Company16' @@ -147,6 +151,8 @@ export { default as Exclamation16 } from './Exclamation16' export { default as Exclamation24 } from './Exclamation24' export { default as ExclamationSolid16 } from './ExclamationSolid16' export { default as ExclamationSolid24 } from './ExclamationSolid24' +export { default as Expand16 } from './Expand16' +export { default as Expand24 } from './Expand24' export { default as Eye16 } from './Eye16' export { default as Eye24 } from './Eye24' export { default as EyeHidden16 } from './EyeHidden16' @@ -487,6 +493,8 @@ export { default as CloseResponsive } from './CloseResponsive' export { default as CloseMinorResponsive } from './CloseMinorResponsive' export { default as CodeResponsive } from './CodeResponsive' export { default as CodeBlockResponsive } from './CodeBlockResponsive' +export { default as CollapseResponsive } from './CollapseResponsive' +export { default as CommandKeyResponsive } from './CommandKeyResponsive' export { default as CommissionResponsive } from './CommissionResponsive' export { default as CompanyResponsive } from './CompanyResponsive' export { default as ComponentResponsive } from './ComponentResponsive' @@ -511,6 +519,7 @@ export { default as EmployeeResponsive } from './EmployeeResponsive' export { default as EveningResponsive } from './EveningResponsive' export { default as ExclamationResponsive } from './ExclamationResponsive' export { default as ExclamationSolidResponsive } from './ExclamationSolidResponsive' +export { default as ExpandResponsive } from './ExpandResponsive' export { default as EyeResponsive } from './EyeResponsive' export { default as EyeHiddenResponsive } from './EyeHiddenResponsive' export { default as FacebookResponsive } from './FacebookResponsive' diff --git a/packages/base/Icons/src/Icon/svg/collapse16.svg b/packages/base/Icons/src/Icon/svg/collapse16.svg new file mode 100644 index 0000000000..ad62402dd7 --- /dev/null +++ b/packages/base/Icons/src/Icon/svg/collapse16.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/base/Icons/src/Icon/svg/collapse24.svg b/packages/base/Icons/src/Icon/svg/collapse24.svg new file mode 100644 index 0000000000..abd71bf867 --- /dev/null +++ b/packages/base/Icons/src/Icon/svg/collapse24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/base/Icons/src/Icon/svg/commandKey16.svg b/packages/base/Icons/src/Icon/svg/commandKey16.svg new file mode 100644 index 0000000000..1f4e68f60d --- /dev/null +++ b/packages/base/Icons/src/Icon/svg/commandKey16.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/base/Icons/src/Icon/svg/commandKey24.svg b/packages/base/Icons/src/Icon/svg/commandKey24.svg new file mode 100644 index 0000000000..f746dedb4c --- /dev/null +++ b/packages/base/Icons/src/Icon/svg/commandKey24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/base/Icons/src/Icon/svg/expand16.svg b/packages/base/Icons/src/Icon/svg/expand16.svg new file mode 100644 index 0000000000..fc4eb2edea --- /dev/null +++ b/packages/base/Icons/src/Icon/svg/expand16.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/base/Icons/src/Icon/svg/expand24.svg b/packages/base/Icons/src/Icon/svg/expand24.svg new file mode 100644 index 0000000000..35a63a6516 --- /dev/null +++ b/packages/base/Icons/src/Icon/svg/expand24.svg @@ -0,0 +1 @@ + \ No newline at end of file