feat: rename IconFont to IconsFont (#2656)

.circleci/config.yml

@@ -109,19 +109,19 @@ jobs:
       - run:
           name: Prepare font hash
           command: |
-            echo "export ICON_FONT_HASH=$(sha1sum lib/src/components/IconFont/fonts/welcome-icon-font.woff2 | awk '{ print $1 }')" >> $BASH_ENV
+            echo "export ICON_FONT_HASH=$(sha1sum lib/src/components/IconsFont/fonts/welcome-icon-font.woff2 | awk '{ print $1 }')" >> $BASH_ENV
             source $BASH_ENV
       - aws-cli/setup:
           aws_access_key_id: AWS_ACCESS_KEY_ID
           aws_secret_access_key: AWS_SECRET_ACCESS_KEY
           region: ${AWS_REGION}
       - aws-s3/sync:
-          from: lib/src/components/IconFont/fonts
+          from: lib/src/components/IconsFont/fonts
           to: s3://welcome-ui/public/fonts/icon-font/$ICON_FONT_HASH
           arguments: |
             --cache-control "public, max-age=31536000" --exclude "*" --include "welcome-icon-font.woff" --include "welcome-icon-font.woff2" --metadata GitCommit=$CIRCLE_SHA1 --delete
       - aws-s3/sync:
-          from: lib/src/components/IconFont/fonts
+          from: lib/src/components/IconsFont/fonts
           to: s3://wttj-production/fonts/icon-font/$ICON_FONT_HASH
           arguments: |
             --cache-control "public, max-age=31536000" --exclude "*" --include "welcome-icon-font.woff" --include "welcome-icon-font.woff2" --metadata GitCommit=$CIRCLE_SHA1 --delete

lib/src/components/Button/tests/index.test.tsx

@@ -3,7 +3,7 @@ import { act, screen } from '@testing-library/react'
 
 import { SunIcon } from '../../Icons'
 import { Link } from '../../Link'
-import { IconFont } from '../../IconFont'
+import { IconsFont } from '../../IconsFont'
 import { Button } from '../'
 import { render } from '../../../../tests'
 import { createTheme } from '../../../theme'
@@ -195,12 +195,12 @@ describe('<Button />', () => {
     })
   })
 
-  it('should have correct IconFont size with IconFont and text', () => {
+  it('should have correct IconsFont size with IconsFont and text', () => {
     const theme = createTheme()
 
     render(
       <Button dataTestId="button" size="sm">
-        <IconFont.Sun dataTestId="sun" />
+        <IconsFont.Sun dataTestId="sun" />
         <span>{content}</span>
       </Button>
     )
@@ -216,12 +216,12 @@ describe('<Button />', () => {
     })
   })
 
-  it('should have correct IconFont size with IconFont only', () => {
+  it('should have correct IconsFont size with IconsFont only', () => {
     const theme = createTheme()
 
     render(
       <Button dataTestId="button" size="md">
-        <IconFont.Sun dataTestId="sun" />
+        <IconsFont.Sun dataTestId="sun" />
       </Button>
     )
 

lib/src/components/IconsFont/docs/examples/color.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { IconsFont } from 'welcome-ui/IconsFont'
+
+const Example = () => {
+  return (
+    <>
+      <IconsFont.PositiveStraight color="blue" size="xl" />
+      <IconsFont.PositiveStraight color="orange" size="xl" />
+      <IconsFont.PositiveStraight color="green" size="xl" />
+    </>
+  )
+}
+
+export default Example

lib/src/components/IconFont/docs/examples/css.tsx → lib/src/components/IconsFont/docs/examples/css.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-require('welcome-ui/IconFont/fonts/welcome-icon-font.css')
+require('welcome-ui/IconsFont/fonts/welcome-icon-font.css')
 
 const Example = () => {
   return <i className="wui-icon-positive_straight" />

lib/src/components/IconsFont/docs/examples/overview.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react'
+import { IconsFont } from 'welcome-ui/IconsFont'
+
+const Example = () => {
+  return <IconsFont.PositiveStraight />
+}
+
+export default Example

lib/src/components/IconsFont/docs/examples/sizes.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react'
+import { IconsFont } from 'welcome-ui/IconsFont'
+
+const Example = () => {
+  return (
+    <>
+      <IconsFont.PositiveStraight size="xs" />
+      <IconsFont.PositiveStraight size="sm" />
+      <IconsFont.PositiveStraight />
+      <IconsFont.PositiveStraight size="lg" />
+      <IconsFont.PositiveStraight size="xl" />
+      <IconsFont.PositiveStraight size="xxl" />
+    </>
+  )
+}
+
+export default Example

lib/src/components/IconFont/docs/index.mdx → lib/src/components/IconsFont/docs/index.mdx

@@ -1,34 +1,34 @@
 ---
 category: icons-&-logo
-description: The IconFont component uses a font-based approach to display scalable icons. It provides a collection of icons that can be styled with CSS, just like text, ensuring consistency and flexibility in size, color, and other properties. This component is ideal for adding visually appealing and responsive icons to your application, enhancing user interface and experience.
+description: The IconsFont component uses a font-based approach to display scalable icons. It provides a collection of icons that can be styled with CSS, just like text, ensuring consistency and flexibility in size, color, and other properties. This component is ideal for adding visually appealing and responsive icons to your application, enhancing user interface and experience.
 packageName: icons.font
-title: IconFont
+title: IconsFont
 usage: Icons
 ---
 
 ### Size
 
 Use size property with `xs`, `sm`, `md`, `lg` `xl` or `xxl`.
 
-<div data-playground="sizes.tsx" data-component="IconFont"></div>
+<div data-playground="sizes.tsx" data-component="IconsFont"></div>
 
 ### Color
 
 Icons inherit the color from their parent.
 
-<div data-playground="color.tsx" data-component="IconFont"></div>
+<div data-playground="color.tsx" data-component="IconsFont"></div>
 
 ### CSS import
 
-To import IconFont css stylesheet, you should use this import path:
+To import IconsFont css stylesheet, you should use this import path:
 
 ```jsx
 require('welcome-ui/fonts/welcome-icon-font.css')
 ```
 
 Here is an example on how to use css class to display icons:
 
-<div data-playground="css.tsx" data-component="IconFont"></div>
+<div data-playground="css.tsx" data-component="IconsFont"></div>
 
 ## Icons
 

lib/src/components/IconFont/index.tsx → lib/src/components/IconsFont/index.tsx

@@ -5,8 +5,8 @@ import { IconProps } from '../Icon'
 import { Icon, StyledIconProps } from './styles'
 import unicodeJson from './unicode.json'
 
-export type IconFontProps = StyledIconProps
-export const IconFontStyled = Icon
+export type IconsFontProps = StyledIconProps
+export const IconsFontStyled = Icon
 
 type FormatIconJSX<S extends string> = S extends `${infer F}${infer R}`
   ? F extends '_'
@@ -28,7 +28,7 @@ const toPascalCase = (str: string) => {
 
 const iconsKeys = Object.keys(unicodeMap) as IconKey[]
 
-export const IconFont = iconsKeys.reduce<IconsType>((prev, name) => {
+export const IconsFont = iconsKeys.reduce<IconsType>((prev, name) => {
   const key = toPascalCase(name) as IconKeyFormatted
 
   prev[key] = (props: IconProps) => {

lib/src/components/IconFont/tests/index.test.tsx → lib/src/components/IconsFont/tests/index.test.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
 
 import { render } from '../../../../tests'
-import { IconFont } from '../'
+import { IconsFont } from '../'
 
-describe('<IconFont>', () => {
+describe('<IconsFont>', () => {
   it('should render correctly with existing icon name', () => {
     const consoleWarnMock = jest.spyOn(console, 'warn').mockImplementation()
-    const { container } = render(<IconFont.Add size="md" />)
+    const { container } = render(<IconsFont.Add size="md" />)
     expect(container).toBeTruthy()
     // eslint-disable-next-line no-console
     expect(console.warn).not.toBeCalled()

lib/src/components/Modal/Assets/Backdrop.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import * as Ariakit from '@ariakit/react'
 import styled, { system } from '@xstyled/styled-components'
 
-import { IconFont } from '../../IconFont'
+import { IconsFont } from '../../IconsFont'
 import { Button } from '../../Button'
 import * as S from '../styles'
 import { forwardRef } from '../../System'
@@ -38,7 +38,7 @@ export const Backdrop = forwardRef<'div', BackdropProps>(
         <Ariakit.DialogDismiss
           render={
             <CloseButton shape="circle" variant="secondary">
-              <IconFont.Cross />
+              <IconsFont.Cross />
             </CloseButton>
           }
         />

lib/src/components/Swiper/index.tsx

@@ -10,7 +10,7 @@ import React, {
 import debounce from 'lodash.debounce'
 import { useTheme } from '@xstyled/styled-components'
 
-import { IconFont } from '../IconFont'
+import { IconsFont } from '../IconsFont'
 import { CreateWuiProps } from '../System'
 import { useViewportSize } from '../../utils/use-viewport'
 
@@ -308,7 +308,7 @@ export const Swiper = ({ children, dataTestId, store, ...rest }: SwiperProps) =>
         withDarkUI={withDarkUI}
         withNavigation={withNavigation}
       >
-        <IconFont.Left />
+        <IconsFont.Left />
       </S.Arrow>
       <S.Arrow
         data-testid={dataTestId && `${dataTestId}-next-button`}
@@ -322,7 +322,7 @@ export const Swiper = ({ children, dataTestId, store, ...rest }: SwiperProps) =>
         withDarkUI={withDarkUI}
         withNavigation={withNavigation}
       >
-        <IconFont.Right />
+        <IconsFont.Right />
       </S.Arrow>
       <S.Pagination
         className="swiper-pagination"

lib/src/components/index.tsx

@@ -26,7 +26,7 @@ export * from './Hint'
 export * from './Icon'
 export * from './Icons'
 export * as Icons from './Icons'
-export * from './IconFont'
+export * from './IconsFont'
 export * from './InputText'
 export * from './Label'
 export * from './Link'

lib/vite.config.mjs

@@ -75,7 +75,7 @@ export default defineConfig({
     viteStaticCopy({
       targets: [
         {
-          src: 'src/components/IconFont/fonts',
+          src: 'src/components/IconsFont/fonts',
           dest: '.',
         },
       ],

scripts/generate-icon-hash.sh

@@ -1,7 +1,7 @@
 #!/bin/bash
 
 # Set paths
-FONTS_DIR=lib/src/components/IconFont/fonts
+FONTS_DIR=lib/src/components/IconsFont/fonts
 FONT_FILE="$FONTS_DIR/welcome-icon-font.woff2"
 ENV_FILE="lib/.env"
 

scripts/update-imports.js

@@ -23,6 +23,7 @@ function transformImports(content) {
   // Handle special cases first
   content = content.replace(/@welcome-ui\/core/g, 'welcome-ui/theme')
   content = content.replace(/@welcome-ui\/copy/g, 'welcome-ui/utils')
+  content = content.replace(/@welcome-ui\/icons.font/g, 'welcome-ui/IconsFont')
 
   // Transform WuiTheme to ThemeValues in imports, preserving type imports
   const importBlockRegex = /(import\s+(?:type\s+)?){([^}]+)}\s+from/g

scripts/webfont-build.js

@@ -15,11 +15,11 @@ fs.readdirAsync = util.promisify(fs.readdir)
 const ROOT_PATH = path.join(__dirname, '..')
 const ICONS_PATH = path.join(ROOT_PATH, 'lib/src/components/Icons')
 const INPUT_PATH = path.join(ICONS_PATH, '_assets')
-const ICON_FONT_PATH = path.join(ROOT_PATH, 'lib/src/components/IconFont')
+const ICON_FONT_PATH = path.join(ROOT_PATH, 'lib/src/components/IconsFont')
 const FONT_NAME = 'welcome-icon-font'
 
 // Write icon font
-const writeIconFont = files => {
+const writeIconsFont = files => {
   console.log('Started'.blue, 'Writing icon font'.grey)
   const filteredFiles = files.filter(file => !FLAG_ICONS.includes(file.key))
   const unicodeFile = `${ICON_FONT_PATH}/unicode.json`
@@ -86,7 +86,7 @@ const writeIconFont = files => {
 
 // Main function: Read icons from folder and update all icon (packages)
 readIconsFromAssets()
-  .then(writeIconFont)
+  .then(writeIconsFont)
   .catch(err => {
     throw err
   })

website/build-app/components/IconsList/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { IconFont } from 'welcome-ui/IconFont'
+import { IconsFont } from 'welcome-ui/IconsFont'
 import * as Icons from 'welcome-ui/Icons'
 import { Box } from 'welcome-ui/Box'
 import { Text } from 'welcome-ui/Text'
@@ -24,7 +24,7 @@ import {
 } from './icons'
 
 export type IconListProps = {
-  isIconFont?: boolean
+  isIconsFont?: boolean
   name:
     | 'arrows'
     | 'actions'
@@ -54,7 +54,7 @@ const handleClickToCopy = (componentName: string) => {
   )
 }
 
-export const IconsList = ({ isIconFont, name }: IconListProps) => {
+export const IconsList = ({ isIconsFont, name }: IconListProps) => {
   const iconsByName = {
     arrows: arrows,
     actions: actions,
@@ -74,10 +74,10 @@ export const IconsList = ({ isIconFont, name }: IconListProps) => {
     <Box display="grid" gap="lg" gridTemplateColumns={{ xs: '1fr 1fr', lg: '1fr 1fr 1fr 1fr' }}>
       {iconsByName[name]?.map(key => {
         const name = startCase(camelCase(key)).replace(/ /g, '')
-        const componentName = isIconFont ? `IconFont.${name}` : `${name}Icon`
+        const componentName = isIconsFont ? `IconsFont.${name}` : `${name}Icon`
 
-        const Icon = isIconFont
-          ? IconFont[name as keyof typeof IconFont]
+        const Icon = isIconsFont
+          ? IconsFont[name as keyof typeof IconsFont]
           : Icons[componentName as keyof typeof Icons]
 
         if (!Icon) {

website/build-app/components/Mdx/Div.tsx

@@ -38,9 +38,9 @@ export const Div = ({ children, node }: DivProps) => {
 
   // Icons objects
   if (iconsEntry) {
-    const isIconFont = node?.properties?.dataIconsFont === 'true' ? true : false
+    const isIconsFont = node?.properties?.dataIconsFont === 'true' ? true : false
 
-    return <IconsList isIconFont={isIconFont} name={iconsEntry} />
+    return <IconsList isIconsFont={isIconsFont} name={iconsEntry} />
   }
 
   // Theme objects