feat: add ach and creditCard icons

.changeset/shiny-ants-complain.md

@@ -0,0 +1,7 @@
+---
+'@toptal/picasso': minor
+---
+
+### Icon
+
+- add `ach24` and `creditCard24` icons

bin/check-icon-sizes.js

@@ -7,8 +7,6 @@ const { execSync } = require('child_process')
  */
 
 const ICON_COMPONENTS_DIRECTORY = 'packages/picasso/src/Icon'
-// TODO: add missing icons and remove ability to ignore icons
-const IGNORED_ICONS = ['Ach', 'CreditCard']
 
 const getIconName = iconFileName => iconFileName.replace(/(16|24).tsx/, '')
 
@@ -45,10 +43,7 @@ const findIncompleteIcons = () => {
   iconFileNames.forEach(iconFileName => {
     const iconName = getIconName(iconFileName)
 
-    if (
-      IGNORED_ICONS.indexOf(iconName) === -1 &&
-      !checkIfIconIsComplete(iconName, iconFileNames)
-    ) {
+    if (!checkIfIconIsComplete(iconName, iconFileNames)) {
       if (incompleteIcons.indexOf(iconFileName)) {
         incompleteIcons.push(iconName)
       }

packages/picasso/src/Icon/Ach24.tsx

@@ -0,0 +1,66 @@
+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 '../utils/kebab-to-camel-case'
+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: 'PicassoSvgAch24',
+})
+const SvgAch24 = forwardRef(function SvgAch24(
+  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='m15.5 1.793.354.354 4 4 .353.353-.353.354-12 12-.147.146H3v-4.707l.146-.146 12-12 .354-.354ZM4 14.707V18h3.293l9-9L13 5.707l-9 9ZM13.707 5 17 8.293 18.793 6.5 15.5 3.207 13.707 5ZM1.64 9a.64.64 0 0 0-.64.64v10.73c0 .354.286.64.64.64h20.72a.64.64 0 0 0 .64-.64V9.64a.64.64 0 0 0-.64-.64H20V8h2.36c.906 0 1.64.734 1.64 1.64v10.73a1.64 1.64 0 0 1-1.64 1.64H1.64A1.64 1.64 0 0 1 0 20.37V9.64C0 8.734.734 8 1.64 8H6v1H1.64ZM21 16h-7v-1h7v1Zm-10 3h10v-1H11v1Z'
+        clipRule='evenodd'
+      />
+    </svg>
+  )
+})
+
+SvgAch24.displayName = 'SvgAch24'
+export default SvgAch24

packages/picasso/src/Icon/CreditCard24.tsx

@@ -0,0 +1,66 @@
+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 '../utils/kebab-to-camel-case'
+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: 'PicassoSvgCreditCard24',
+})
+const SvgCreditCard24 = forwardRef(function SvgCreditCard24(
+  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.64 5.214c-.36 0-.64.286-.64.626v2.322h22V5.84c0-.34-.28-.626-.64-.626H1.64ZM1 18.394V9.162h22v9.232c0 .34-.28.626-.64.626H1.64a.633.633 0 0 1-.64-.626Zm23 0V5.84c0-.904-.74-1.626-1.64-1.626H1.64C.74 4.214 0 4.936 0 5.84v12.554c0 .904.74 1.626 1.64 1.626h20.72c.9 0 1.64-.722 1.64-1.626ZM3 13.111h7v-1H3v1Zm4 2.96H3v-1h4v1Zm10-2.96h4v-1h-4v1Z'
+        clipRule='evenodd'
+      />
+    </svg>
+  )
+})
+
+SvgCreditCard24.displayName = 'SvgCreditCard24'
+export default SvgCreditCard24

packages/picasso/src/Icon/index.ts

@@ -1,12 +1,8 @@
-export { default as Bold16 } from './Bold16'
-export { default as CheckSolid16 } from './CheckSolid16'
-export { default as CheckSolid24 } from './CheckSolid24'
 export { default as Italic16 } from './Italic16'
-export { default as ListOrdered16 } from './ListOrdered16'
-export { default as ListUnordered16 } from './ListUnordered16'
 export { default as Abstract16 } from './Abstract16'
 export { default as Abstract24 } from './Abstract24'
 export { default as Ach16 } from './Ach16'
+export { default as Ach24 } from './Ach24'
 export { default as Ach32 } from './Ach32'
 export { default as Add16 } from './Add16'
 export { default as Add24 } from './Add24'
@@ -58,6 +54,7 @@ export { default as BellSolid16 } from './BellSolid16'
 export { default as BellSolid24 } from './BellSolid24'
 export { default as Billing16 } from './Billing16'
 export { default as Billing24 } from './Billing24'
+export { default as Bold16 } from './Bold16'
 export { default as Bold24 } from './Bold24'
 export { default as Box16 } from './Box16'
 export { default as Box24 } from './Box24'
@@ -79,6 +76,8 @@ export { default as Check16 } from './Check16'
 export { default as Check24 } from './Check24'
 export { default as CheckMinor16 } from './CheckMinor16'
 export { default as CheckMinor24 } from './CheckMinor24'
+export { default as CheckSolid16 } from './CheckSolid16'
+export { default as CheckSolid24 } from './CheckSolid24'
 export { default as Chevron16 } from './Chevron16'
 export { default as Chevron24 } from './Chevron24'
 export { default as ChevronMinor16 } from './ChevronMinor16'
@@ -104,6 +103,7 @@ export { default as Confluence24 } from './Confluence24'
 export { default as Copy16 } from './Copy16'
 export { default as Copy24 } from './Copy24'
 export { default as CreditCard16 } from './CreditCard16'
+export { default as CreditCard24 } from './CreditCard24'
 export { default as CreditCard32 } from './CreditCard32'
 export { default as Dialpad16 } from './Dialpad16'
 export { default as Dialpad24 } from './Dialpad24'
@@ -196,7 +196,9 @@ export { default as Link16 } from './Link16'
 export { default as Link24 } from './Link24'
 export { default as Linkedin16 } from './Linkedin16'
 export { default as Linkedin24 } from './Linkedin24'
+export { default as ListOrdered16 } from './ListOrdered16'
 export { default as ListOrdered24 } from './ListOrdered24'
+export { default as ListUnordered16 } from './ListUnordered16'
 export { default as ListUnordered24 } from './ListUnordered24'
 export { default as Lock16 } from './Lock16'
 export { default as Lock24 } from './Lock24'