Merge pull request #401 from lidofinance/feature/ui-833-migrate-addre…

…ssbadge

Migrated to css modules addressbadge & identicon

packages/accordion/Accordion.tsx

@@ -1,6 +1,6 @@
 import { ForwardedRef, forwardRef } from 'react'
 import { useExpanded } from './useExpanded'
-import { NewLidoComponentProps } from 'packages/utils'
+import { NewLidoComponentProps } from '../utils'
 import { ArrowBottom } from '../icons'
 import styles from './Accordion.module.css'
 import cn from 'classnames'

packages/address/Address.tsx

@@ -1,6 +1,6 @@
 import React, { ForwardedRef, forwardRef } from 'react'
 import { trimAddress } from './trimAddress'
-import { NewLidoComponentProps } from 'packages/utils'
+import { NewLidoComponentProps } from '../utils'
 import styles from './Address.module.css'
 import cn from 'classnames'
 

packages/addressBadge/AddressBadgeStyles.tsx → packages/addressBadge/AddressBadge.module.css

@@ -1,7 +1,4 @@
-import { IdenticonBadge } from '../identicon'
-import styled from 'styled-components'
-
-export const AddressBadgeStyle = styled(IdenticonBadge)`
+.addressBadge {
   max-width: 100%;
   box-sizing: border-box;
   overflow: hidden;
@@ -13,4 +10,4 @@ export const AddressBadgeStyle = styled(IdenticonBadge)`
     overflow: hidden;
     text-overflow: ellipsis;
   }
-`
+}

packages/addressBadge/AddressBadge.stories.tsx

@@ -1,6 +1,5 @@
-import { Story, Meta } from '@storybook/react'
-import { AddressBadgeProps } from './types'
-import AddressBadge from './AddressBadge'
+import { StoryFn, Meta } from '@storybook/react'
+import { AddressBadge, AddressBadgeProps } from '.'
 
 export default {
   component: AddressBadge,
@@ -20,6 +19,6 @@ export default {
   },
 } as Meta
 
-export const Basic: Story<AddressBadgeProps> = (props) => (
+export const Basic: StoryFn<AddressBadgeProps> = (props) => (
   <AddressBadge {...props} />
 )

packages/addressBadge/AddressBadge.tsx

@@ -1,22 +1,40 @@
-import React, { ForwardedRef, forwardRef } from 'react'
+import { ForwardedRef, forwardRef } from 'react'
 import { useBreakpoint } from '../hooks'
-import { AddressBadgeStyle } from './AddressBadgeStyles'
-import { AddressBadgeProps } from './types'
+import cn from 'classnames'
+import styles from './AddressBadge.module.css'
+import { IdenticonBadge, IdenticonBadgeProps } from '../identicon'
 
-function AddressBadge(
-  props: AddressBadgeProps,
-  ref?: ForwardedRef<HTMLDivElement>,
-) {
-  const { address, symbolsMobile = 3, symbolsDesktop = 6 } = props
-  const isMobile = useBreakpoint('md')
-
-  return (
-    <AddressBadgeStyle
-      symbols={isMobile ? symbolsMobile : symbolsDesktop}
-      address={address ?? ''}
-      ref={ref}
-    />
-  )
+export type AddressBadgeProps = Omit<
+  IdenticonBadgeProps,
+  'address' | 'symbols'
+> & {
+  address?: string
+  symbolsMobile?: number
+  symbolsDesktop?: number
 }
 
-export default forwardRef(AddressBadge)
+export const AddressBadge = forwardRef(
+  (
+    {
+      address,
+      symbolsMobile = 3,
+      symbolsDesktop = 6,
+      className,
+      ...rest
+    }: AddressBadgeProps,
+    ref?: ForwardedRef<HTMLDivElement>,
+  ) => {
+    const isMobile = useBreakpoint('md')
+
+    return (
+      <IdenticonBadge
+        symbols={isMobile ? symbolsMobile : symbolsDesktop}
+        address={address ?? ''}
+        className={cn(styles.addressBadge, className)}
+        {...rest}
+        ref={ref}
+      />
+    )
+  },
+)
+AddressBadge.displayName = 'AddressBadge'

packages/addressBadge/index.ts

@@ -1,2 +1 @@
-export { default as AddressBadge } from './AddressBadge'
-export * from './types'
+export * from './AddressBadge'

packages/identicon/Identicon.module.css

@@ -0,0 +1,7 @@
+/* export const IdenticonStyle = styled.div` */
+.identicon {
+  border-radius: 1000px;
+  overflow: hidden;
+  line-height: 0;
+  display: inline-block;
+}

packages/identicon/Identicon.stories.tsx

@@ -1,11 +1,11 @@
-import { Story, Meta } from '@storybook/react'
+import { StoryFn, Meta } from '@storybook/react'
 import {
+  Identicon,
   IdenticonProps,
+  IdenticonBadge,
   IdenticonBadgeProps,
   IdenticonBadgeColor,
-} from './types'
-import Identicon from './Identicon'
-import IdenticonBadge from './IdenticonBadge'
+} from '.'
 
 const getOptions = (enumObject: Record<string, string | number>) =>
   Object.values(enumObject).filter((value) => typeof value === 'string')
@@ -22,11 +22,13 @@ export default {
       control: { type: 'range', min: 4, max: 64, step: 4 },
     },
   },
-} as Meta
+} satisfies Meta
 
-export const Basic: Story<IdenticonProps> = (props) => <Identicon {...props} />
+export const Basic: StoryFn<IdenticonProps> = (props) => (
+  <Identicon {...props} />
+)
 
-export const Badge: Story<IdenticonBadgeProps> = (props) => (
+export const Badge: StoryFn<IdenticonBadgeProps> = (props) => (
   <IdenticonBadge {...props} />
 )
 

packages/identicon/Identicon.tsx

@@ -1,17 +1,38 @@
-import React, { ForwardedRef, forwardRef } from 'react'
-import { IdenticonProps } from './types'
-import { IdenticonStyle } from './IdenticonStyles'
+import { ForwardedRef, forwardRef } from 'react'
 import Jazzicon, { jsNumberForAddress } from 'react-jazzicon'
+import cn from 'classnames'
+import styles from './Identicon.module.css'
+import { NewLidoComponentProps } from '../utils'
 
-function Identicon(props: IdenticonProps, ref?: ForwardedRef<HTMLDivElement>) {
-  const { diameter = 24, address, paperStyles, svgStyles, ...rest } = props
-  const iconProps = { diameter, paperStyles, svgStyles }
+export type IdenticonProps = NewLidoComponentProps<
+  'div',
+  {
+    address: string
+    diameter?: number
+    paperStyles?: React.CSSProperties
+    svgStyles?: React.CSSProperties
+  }
+>
 
-  return (
-    <IdenticonStyle {...rest} ref={ref}>
-      <Jazzicon seed={jsNumberForAddress(address)} {...iconProps} />
-    </IdenticonStyle>
-  )
-}
+export const Identicon = forwardRef(
+  (
+    {
+      diameter = 24,
+      address,
+      paperStyles,
+      svgStyles,
+      className,
+      ...rest
+    }: IdenticonProps,
+    ref?: ForwardedRef<HTMLDivElement>,
+  ) => {
+    const iconProps = { diameter, paperStyles, svgStyles }
 
-export default forwardRef(Identicon)
+    return (
+      <div className={cn(styles.identicon, className)} {...rest} ref={ref}>
+        <Jazzicon seed={jsNumberForAddress(address)} {...iconProps} />
+      </div>
+    )
+  },
+)
+Identicon.displayName = 'Identicon'

packages/identicon/IdenticonBadge.module.css

@@ -0,0 +1,26 @@
+/* export const IdenticonBadgeStyle = styled.div<{ $color: IdenticonBadgeColors }>`
+
+  ${({ $color }) => colors[$color]}
+` */
+
+.identiconBadge {
+  border-radius: 1000px;
+  padding: 4px;
+  margin: 0 6px;
+  display: inline-flex;
+  align-items: center;
+}
+
+.background {
+  background: var(--lido-color-background);
+  color: var(--lido-color-textSecondary);
+}
+
+.accent {
+  background: var(--lido-color-accentDarken);
+  color: var(--lido-color-accentContrast);
+}
+
+.wrapper {
+  padding: 0 6px;
+}

packages/identicon/IdenticonBadge.tsx

@@ -1,36 +1,55 @@
-import React, { ForwardedRef, forwardRef } from 'react'
+import { ForwardedRef, forwardRef } from 'react'
 import { Address } from '../address'
-import { IdenticonBadgeProps } from './types'
-import { IdenticonBadgeStyle, AddressWrapperStyle } from './IdenticonStyles'
-import Identicon from './Identicon'
+import { Identicon, IdenticonProps } from './Identicon'
+import cn from 'classnames'
+import styles from './IdenticonBadge.module.css'
 
-function IdenticonBadge(
-  props: IdenticonBadgeProps,
-  ref?: ForwardedRef<HTMLDivElement>,
-) {
-  const {
-    symbols = 3,
-    color = 'background',
-    diameter,
-    address,
-    paperStyles,
-    svgStyles,
-    ...rest
-  } = props
-  const identiconProps = { address, diameter, paperStyles, svgStyles }
+export enum IdenticonBadgeColor {
+  background,
+  accent,
+}
+export type IdenticonBadgeColors = keyof typeof IdenticonBadgeColor
 
-  return (
-    <IdenticonBadgeStyle $color={color} {...rest} ref={ref}>
-      {symbols > 0 ? (
-        <AddressWrapperStyle>
-          <Address address={address} symbols={symbols} />
-        </AddressWrapperStyle>
-      ) : (
-        ''
-      )}
-      <Identicon {...identiconProps} />
-    </IdenticonBadgeStyle>
-  )
+export type IdenticonBadgeProps = IdenticonProps & {
+  symbols?: number
+  color?: IdenticonBadgeColors
 }
 
-export default forwardRef(IdenticonBadge)
+export const IdenticonBadge = forwardRef(
+  (
+    {
+      symbols = 3,
+      color = 'background',
+      diameter,
+      address,
+      paperStyles,
+      svgStyles,
+      className,
+      ...rest
+    }: IdenticonBadgeProps,
+    ref?: ForwardedRef<HTMLDivElement>,
+  ) => {
+    const identiconProps = { address, diameter, paperStyles, svgStyles }
+
+    return (
+      <div
+        className={cn(styles.identiconBadge, className, {
+          [styles.background]: color === 'background',
+          [styles.accent]: color === 'accent',
+        })}
+        {...rest}
+        ref={ref}
+      >
+        {symbols > 0 ? (
+          <div className={styles.wrapper}>
+            <Address address={address} symbols={symbols} />
+          </div>
+        ) : (
+          ''
+        )}
+        <Identicon {...identiconProps} />
+      </div>
+    )
+  },
+)
+IdenticonBadge.displayName = 'IdenticonBadge'

packages/identicon/index.ts

@@ -1,3 +1,2 @@
-export { default as IdenticonBadge } from './IdenticonBadge'
-export { default as Identicon } from './Identicon'
-export * from './types'
+export * from './IdenticonBadge'
+export * from './Identicon'