[Bug] Icon – Update "no icon" variant

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/mobile-component-library",
-  "version": "0.27.1-alpha.2",
+  "version": "0.27.1-alpha.7",
   "description": "VA Design System Mobile Component Library",
   "main": "src/index.tsx",
   "scripts": {

packages/components/src/components/Icon/Icon.stories.tsx

@@ -44,7 +44,7 @@ const meta: Meta<IconProps> = {
     ),
   ],
   argTypes: {
-    name: { options: Object.keys(IconMap) },
+    name: { options: ['none', ...Object.keys(IconMap)] },
   },
   parameters: {
     docs: generateDocs({

packages/components/src/components/Icon/Icon.tsx

@@ -5,25 +5,17 @@ import React, { FC } from 'react'
 import { IconMap } from './iconList'
 import { useColorScheme, useTheme } from '../../utils'
 
-type nameOrSvgOrNoIcon =
+type nameOrSvg =
   | {
       /** Name of preset icon to use {@link IconMap} **/
-      name: keyof typeof IconMap
-      noIcon?: never
+      name: keyof typeof IconMap | 'none'
       svg?: never
     }
   | {
       name?: never
-      noIcon?: never
       /** Custom SVG passed to display */
       svg: React.FC<SvgProps>
     }
-  | {
-      name?: never
-      /** True to render icon as a null passthrough */
-      noIcon: boolean
-      svg?: never
-    }
 
 type heightAndWidth =
   | {
@@ -45,7 +37,7 @@ type lightDarkModeFill = {
 /**
  *  Props that need to be passed in to {@link Icon}
  */
-export type IconProps = nameOrSvgOrNoIcon &
+export type IconProps = nameOrSvg &
   heightAndWidth & {
     /** Wraps in View that aligns the icon with text of line height passed */
     alignWithTextLineHeight?: number
@@ -70,7 +62,6 @@ export type IconProps = nameOrSvgOrNoIcon &
  */
 export const Icon: FC<IconProps> = ({
   name,
-  noIcon,
   svg,
   width = 24,
   height = 24,
@@ -85,7 +76,7 @@ export const Icon: FC<IconProps> = ({
   const fontScale = useWindowDimensions().fontScale
   const fs = (val: number) => fontScale * val
 
-  if (noIcon) return null
+  if (name === 'none') return null
 
   // ! to override TS incorrectly thinking svg can be undefined after update
   const _Icon: FC<SvgProps> = name ? IconMap[name] : svg!

packages/components/src/components/Link/Link.test.tsx

@@ -81,9 +81,8 @@ describe('Link', () => {
       render(<Link {...commonProps} />)
       const icon = screen.UNSAFE_queryByType(Icon)
 
-      expect(icon?.props.name).toBeUndefined()
+      expect(icon?.props.name).toBe('none')
       expect(icon?.props.svg).toBeUndefined()
-      expect(icon?.props.noIcon).toBeDefined()
     })
   })
 
@@ -416,9 +415,8 @@ describe('Link', () => {
       render(<Link {...iconOverrideProps} icon={'no icon'} />)
       const icon = screen.UNSAFE_queryByType(Icon)
 
-      expect(icon?.props.name).toBeUndefined()
+      expect(icon?.props.name).toBe('none')
       expect(icon?.props.svg).toBeUndefined()
-      expect(icon?.props.noIcon).toBeDefined()
     })
   })
 

packages/components/src/components/Link/Link.tsx

@@ -153,15 +153,16 @@ export const Link: FC<LinkProps> = ({
 
   /** Function to massage Partial<IconProps> data into IconProps based on variant icon defaults */
   const setIcon = (name?: IconProps['name']) => {
+    const noIcon: IconProps = { name: 'none' }
     switch (icon) {
       case 'no icon':
-        return { noIcon: true }
+        return noIcon
       case undefined:
         if (name) return { name }
-        return { noIcon: true }
+        return noIcon
       default:
         if (icon.svg) return icon as IconProps
-        if (!name && !icon.name) return { noIcon: true }
+        if (!name && !icon.name) return noIcon
 
         if (!icon.name) icon.name = name
         return icon as IconProps
@@ -268,7 +269,7 @@ export const Link: FC<LinkProps> = ({
     <ComponentWrapper>
       <Pressable {...pressableProps} testID={testID}>
         <Icon fill={linkColor} {..._icon} />
-        {_icon.noIcon ? null : <Spacer size="2xs" horizontal />}
+        {_icon.name === 'none' ? null : <Spacer size="2xs" horizontal />}
         <Text style={textStyle}>{text}</Text>
       </Pressable>
     </ComponentWrapper>

packages/components/src/index.tsx

@@ -6,6 +6,10 @@ if (expoApp && App.initiateExpo) {
   App.initiateExpo(expoApp)
 }
 
+// Export consumer available utilities here so they are exported through npm
+export { useIsScreenReaderEnabled, useTheme } from './utils'
+export { useSnackbar } from './components/Snackbar/useSnackbar'
+
 // Export components here so they are exported through npm
 export { Alert } from './components/Alert/Alert'
 export { Button, ButtonVariants } from './components/Button/Button'
@@ -22,6 +26,14 @@ export {
 export { Spacer } from './components/Spacer/Spacer'
 export { Text } from './components/Text/Text'
 
-// Export consumer available utilities here so they are exported through npm
-export { useIsScreenReaderEnabled, useTheme } from './utils'
-export { useSnackbar } from './components/Snackbar/useSnackbar'
+// Export Prop Types
+export type { AlertProps } from './components/Alert/Alert'
+export type { ButtonProps } from './components/Button/Button'
+export type { CheckboxProps } from './components/Checkbox/Checkbox'
+export type { CheckboxGroupProps } from './components/CheckboxGroup/CheckboxGroup'
+export type { IconProps } from './components/Icon/Icon'
+export type { LinkProps } from './components/Link/Link'
+export type { LoadingIndicatorProps } from './components/LoadingIndicator/LoadingIndicator'
+export type { SegmentedControlProps } from './components/SegmentedControl/SegmentedControl'
+export type { SpacerProps } from './components/Spacer/Spacer'
+export type { TextProps } from './components/Text/Text'