refactor: avatarStyles to tuple syntax

Author: levithomason

packages/react/src/themes/teams/components/Avatar/avatarStyles.ts

@@ -1,59 +1,88 @@
-import { pxToRem } from '../../../../lib'
-import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
+import { ComponentSelectorsAndStyles } from '../../../types'
 import { AvatarProps } from '../../../../components/Avatar/Avatar'
+import { AvatarVariables } from 'src/themes/teams/components/Avatar/avatarVariables'
+import { backportComponentStyle } from 'src/lib/resolveComponentRules'
 
-const sizeToPxValue = {
-  smallest: 24,
-  smaller: 24,
-  small: 24,
-  medium: 32,
-  large: 36,
-  larger: 42,
-  largest: 48,
-}
+const avatarStyles: ComponentSelectorsAndStyles<AvatarProps, AvatarVariables> = v => ({
+  root: [
+    [
+      null,
+      {
+        position: 'relative',
+        backgroundColor: 'inherit',
+        display: 'inline-block',
+        verticalAlign: 'middle',
+        height: v.medium,
+        width: v.medium,
+      },
+    ],
+    [{ size: 'smallest' }, { width: v.smallest, height: v.smallest }],
+    [{ size: 'smaller' }, { width: v.smaller, height: v.smaller }],
+    [{ size: 'small' }, { width: v.small, height: v.small }],
+    [{ size: 'medium' }, { width: v.medium, height: v.medium }],
+    [{ size: 'large' }, { width: v.large, height: v.large }],
+    [{ size: 'larger' }, { width: v.larger, height: v.larger }],
+    [{ size: 'largest' }, { width: v.largest, height: v.largest }],
+  ],
 
-const avatarStyles: ComponentSlotStylesInput<AvatarProps, any> = {
-  root: ({ props: { size } }): ICSSInJSStyle => {
-    const sizeInRem = pxToRem(sizeToPxValue[size])
+  //
+  // Image
+  //
+  image: [
+    [
+      null,
+      {
+        borderColor: v.avatarBorderColor,
+        borderStyle: 'solid',
+        borderWidth: v.avatarBorderWidth,
 
-    return {
-      position: 'relative',
-      backgroundColor: 'inherit',
-      display: 'inline-block',
-      verticalAlign: 'middle',
-      height: sizeInRem,
-      width: sizeInRem,
-    }
-  },
-  image: ({ variables: v }): ICSSInJSStyle => ({
-    borderColor: v.avatarBorderColor,
-    borderStyle: 'solid',
-    borderWidth: `${v.avatarBorderWidth}px`,
+        height: '100%',
+        objectFit: 'cover',
+        verticalAlign: 'top',
+        width: '100%',
+      },
+    ],
+  ],
 
-    height: '100%',
-    objectFit: 'cover',
-    verticalAlign: 'top',
-    width: '100%',
-  }),
-  label: ({ props: { size } }): ICSSInJSStyle => {
-    const sizeInRem = pxToRem(sizeToPxValue[size])
-    return {
-      display: 'inline-block',
-      width: sizeInRem,
-      height: sizeInRem,
-      lineHeight: sizeInRem,
-      fontSize: pxToRem(sizeToPxValue[size] / 2.333),
-      verticalAlign: 'top',
-      textAlign: 'center',
-      padding: '0px',
-    }
-  },
-  status: ({ variables: v }): ICSSInJSStyle => ({
-    position: 'absolute',
-    bottom: 0,
-    right: 0,
-    boxShadow: `0 0 0 ${pxToRem(v.statusBorderWidth)} ${v.statusBorderColor}`,
-  }),
-}
+  //
+  // Label
+  //
+  label: [
+    [
+      null,
+      {
+        display: 'inline-block',
+        width: v.medium,
+        height: v.medium,
+        lineHeight: v.medium,
+        fontSize: `calc(${v.medium} / 2.333)`,
+        verticalAlign: 'top',
+        textAlign: 'center',
+        padding: '0px',
+      },
+    ],
+    [{ size: 'smallest' }, { width: v.smallest, height: v.smallest, lineHeight: v.smallest }],
+    [{ size: 'smaller' }, { width: v.smaller, height: v.smaller, lineHeight: v.smaller }],
+    [{ size: 'small' }, { width: v.small, height: v.small, lineHeight: v.small }],
+    [{ size: 'medium' }, { width: v.medium, height: v.medium, lineHeight: v.medium }],
+    [{ size: 'large' }, { width: v.large, height: v.large, lineHeight: v.large }],
+    [{ size: 'larger' }, { width: v.larger, height: v.larger, lineHeight: v.larger }],
+    [{ size: 'largest' }, { width: v.largest, height: v.largest, lineHeight: v.largest }],
+  ],
 
-export default avatarStyles
+  //
+  // Status
+  //
+  status: [
+    [
+      null,
+      {
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+        boxShadow: `0 0 0 ${v.statusBorderWidth} ${v.statusBorderColor}`,
+      },
+    ],
+  ],
+})
+export default backportComponentStyle(avatarStyles)

packages/react/src/themes/teams/components/Avatar/avatarVariables.ts

@@ -1,13 +1,31 @@
+import { pxToRem } from 'src/lib'
+
 export interface AvatarVariables {
   avatarBorderColor: string
-  avatarBorderWidth: number
+  avatarBorderWidth: string
   statusBorderColor: string
-  statusBorderWidth: number
+  statusBorderWidth: string
+
+  smallest: string
+  smaller: string
+  small: string
+  medium: string
+  large: string
+  larger: string
+  largest: string
 }
 
 export default (siteVariables): AvatarVariables => ({
   avatarBorderColor: '',
-  avatarBorderWidth: 0,
+  avatarBorderWidth: '0',
   statusBorderColor: siteVariables.bodyBackground,
-  statusBorderWidth: 2,
+  statusBorderWidth: '2px',
+
+  smallest: pxToRem(24),
+  smaller: pxToRem(24),
+  small: pxToRem(24),
+  medium: pxToRem(32),
+  large: pxToRem(36),
+  larger: pxToRem(42),
+  largest: pxToRem(48),
 })