[v12] feat(ui-billboard): Billboard rework

docs/guides/upgrade-guide.md

@@ -95,6 +95,23 @@ type: embed
 
 ```
 
+### Billboard
+
+```js
+---
+type: embed
+---
+<V12ChangelogTable
+  removed={[
+    {name:"iconHoverColorInverse",note:""},
+    {name:"iconHoverColor",note:""},
+    {name:"iconColor",note:""},
+    {name:"messageColorInverse",note:""}
+  ]}
+/>
+
+```
+
 ### Breadcrumb
 
 ```js

packages/ui-billboard/src/Billboard/README.md

@@ -43,7 +43,7 @@ type: example
     onClick={function () {
       alert('This Billboard was clicked!')
     }}
-    hero={(size) => <IconUserLine size={size} />}
+    hero={(size) => <UserInstUIIcon size={size} />}
   />
 </View>
 ```
@@ -57,7 +57,7 @@ type: example
     margin="large"
     message="Click this link"
     href="http://instructure.com"
-    hero={(size) => <IconGradebookLine size={size} />}
+    hero={(size) => <BookCheckInstUIIcon size={size} />}
   />
 </View>
 ```
@@ -73,7 +73,7 @@ type: example
   onClick={function () {
     alert('This Billboard was clicked!')
   }}
-  hero={(size) => <IconPlusLine size={size} />}
+  hero={(size) => <PlusInstUIIcon size={size} />}
 />
 ```
 
@@ -89,7 +89,7 @@ type: example
   onClick={function () {
     alert('This Billboard was clicked!')
   }}
-  hero={(size) => <IconUserLine size={size} />}
+  hero={(size) => <UserInstUIIcon size={size} />}
   disabled
 />
 ```

packages/ui-billboard/src/Billboard/index.tsx

@@ -31,23 +31,33 @@ import {
   callRenderProp,
   getElementType
 } from '@instructure/ui-react-utils'
+import { renderIconWithProps } from '@instructure/ui-icons'
 
-import { withStyleRework as withStyle } from '@instructure/emotion'
+import { withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
-import generateComponentTheme from './theme'
 
 import { allowedProps } from './props'
-import type { BillboardProps, HeroIconSize } from './props'
+import type { BillboardProps } from './props'
 import type { ViewProps } from '@instructure/ui-view'
 
+// Map Billboard sizes to Lucide icon sizes
+const billboardSizeToIconSize = {
+  small: 'illu-sm',
+  medium: 'illu-md',
+  large: 'illu-lg'
+} as const
+
 /**
 ---
 category: components
 ---
 **/
-@withStyle(generateStyle, generateComponentTheme)
-class Billboard extends Component<BillboardProps> {
+@withStyle(generateStyle)
+class Billboard extends Component<
+  BillboardProps,
+  { isHovered: boolean; isActive: boolean }
+> {
   static readonly componentId = 'Billboard'
 
   static allowedProps = allowedProps
@@ -61,6 +71,11 @@ class Billboard extends Component<BillboardProps> {
     elementRef: () => {}
   } as const
 
+  state = {
+    isHovered: false,
+    isActive: false
+  }
+
   ref: Element | null = null
 
   handleRef = (el: Element | null) => {
@@ -93,25 +108,37 @@ class Billboard extends Component<BillboardProps> {
     )
   }
 
-  get SVGIconSize(): HeroIconSize {
-    const size = this.props.size
+  handleMouseEnter = () => {
+    this.setState({ isHovered: true })
+  }
 
-    // serve up appropriate SVGIcon size for each Billboard size
-    if (size === 'small') {
-      return 'medium'
-    } else if (size === 'large') {
-      return 'x-large'
-    } else {
-      return 'large'
-    }
+  handleMouseLeave = () => {
+    this.setState({ isHovered: false, isActive: false })
+  }
+
+  handleMouseDown = () => {
+    this.setState({ isActive: true })
+  }
+
+  handleMouseUp = () => {
+    this.setState({ isActive: false })
   }
 
   renderHero() {
-    if (typeof this.props.hero === 'function') {
-      return this.props.hero(this.SVGIconSize)
-    } else {
-      return this.props.hero
-    }
+    const { hero, size } = this.props
+    const { isHovered, isActive } = this.state
+
+    if (!hero) return null
+
+    const lucideSize = billboardSizeToIconSize[size!]
+    // Priority: active > hover > default
+    const iconColor = isActive
+      ? 'onColor'
+      : isHovered
+      ? 'infoColor'
+      : 'baseColor'
+
+    return renderIconWithProps(hero, lucideSize, iconColor)
   }
 
   renderContent() {
@@ -157,6 +184,10 @@ class Billboard extends Component<BillboardProps> {
           css={styles?.billboard}
           href={href}
           onClick={this.handleClick}
+          onMouseEnter={this.handleMouseEnter}
+          onMouseLeave={this.handleMouseLeave}
+          onMouseDown={this.handleMouseDown}
+          onMouseUp={this.handleMouseUp}
           disabled={disabled}
           aria-disabled={disabled || readOnly ? 'true' : undefined}
         >

packages/ui-billboard/src/Billboard/props.ts

@@ -40,7 +40,7 @@ type BillboardOwnProps = {
   /**
    * Provide an <Img> component or Instructure Icon for the hero image
    */
-  hero?: React.ReactElement | ((iconSize: HeroIconSize) => React.ReactElement)
+  hero?: React.ReactElement | ((iconSize?: HeroIconSize) => React.ReactElement)
   /**
    * If you're using an icon, this prop will size it. Also sets the font-size
    * of the headline and message.

packages/ui-billboard/src/Billboard/styles.ts

@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 
-import type { BillboardTheme } from '@instructure/shared-types'
 import type { BillboardProps, BillboardStyle } from './props'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 /**
  * ---
@@ -36,7 +36,7 @@ import type { BillboardProps, BillboardStyle } from './props'
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: BillboardTheme,
+  componentTheme: NewComponentTypes['Billboard'],
   props: BillboardProps
 ): BillboardStyle => {
   const { size, href, onClick, disabled, hero, heading } = props
@@ -83,15 +83,11 @@ const generateStyle = (
         '&:hover, &:focus': {
           textDecoration: 'none',
           outline: 'none',
-          borderColor: componentTheme.iconHoverColor,
-
-          '& [class$=-billboard__hero]': {
-            color: componentTheme.iconHoverColor
-          }
+          borderColor: componentTheme.messageColorClickable
         },
         '&:active': {
           background: componentTheme.clickableActiveBg,
-          borderColor: componentTheme.iconHoverColor,
+          borderColor: componentTheme.messageColorClickable,
 
           '& [class$=-billboard__hero], & [class$=-billboard__message]': {
             color: componentTheme.clickableActiveText
@@ -128,7 +124,6 @@ const generateStyle = (
     hero: {
       label: 'billboard__hero',
       display: 'block',
-      color: componentTheme.iconColor,
       ...sizeVariants[size!].hero,
 
       '& > img, & > svg': {

packages/ui-icons/src/lucide/wrapLucideIcon/props.ts

@@ -48,7 +48,17 @@ type LegacyColorTokens =
 /**
  * Semantic size tokens for icons - includes SVGIcon legacy tokens, they are DEPRECATED and will be deleted, DON'T USE THEM.
  */
-type IconSizeToken = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | SVGIconSizeToken
+type IconSizeToken =
+  | 'xs'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | '2xl'
+  | 'illu-sm'
+  | 'illu-md'
+  | 'illu-lg'
+  | SVGIconSizeToken
 
 /**
  * Semantic color tokens from Icon theme

packages/ui-icons/src/lucide/wrapLucideIcon/styles.ts

@@ -51,6 +51,9 @@ const convertSemanticSize = (
     lg: componentTheme.sizeLg,
     xl: componentTheme.sizeXl,
     '2xl': componentTheme.size2xl,
+    'illu-sm': componentTheme.illuSm,
+    'illu-md': componentTheme.illuMd,
+    'illu-lg': componentTheme.illuLg,
     // Legacy SVGIcon size tokens (DEPRECATED)
     'x-small': '1.125rem',
     small: '2rem',
@@ -78,6 +81,9 @@ const convertSizeToStrokeWidth = (
     lg: componentTheme.strokeWidthLg,
     xl: componentTheme.strokeWidthXl,
     '2xl': componentTheme.strokeWidth2xl,
+    'illu-sm': componentTheme.strokeWidthIlluSm,
+    'illu-md': componentTheme.strokeWidthIlluMd,
+    'illu-lg': componentTheme.strokeWidthIlluLg,
     // Legacy SVGIcon stroke tokens (DEPRECATED)
     'x-small': '0.0859375rem',
     small: '0.15625rem',