@fluentui-react-native/experimental-avatar 0.14.43 → 0.15.0

package/src/JSAvatarTokens.ts

@@ -1,203 +0,0 @@
-import { Theme } from '@fluentui-react-native/framework';
-import { TokenSettings } from '@fluentui-react-native/use-styling';
-import { JSAvatarTokens } from '.';
-import { globalTokens } from '@fluentui-react-native/theme-tokens';
-
-export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: Theme) =>
-  ({
-    horizontalIconAlignment: 'end',
-    verticalIconAlignment: 'end',
-    color: t.colors.neutralForeground3,
-    backgroundColor: t.colors.neutralBackground6,
-    avatarOpacity: 1,
-    fontFamily: t.typography.families.primary,
-    fontWeight: globalTokens.font.weight.semibold,
-    fontSize: globalTokens.font.size[200],
-    size: 24,
-    iconSize: 16,
-    iconColor: t.colors.neutralForeground3,
-    ringColor: t.colors.transparentStroke,
-    borderColor: globalTokens.color.white,
-    borderWidth: t.host.appearance === 'highContrast' ? 1 : 0,
-    circular: {
-      borderRadius: globalTokens.corner.radius.circle,
-    },
-    square: {
-      borderRadius: globalTokens.corner.radius.medium,
-    },
-    inactive: {
-      avatarOpacity: 0.8,
-    },
-    size20: {
-      size: 20,
-      badgeSize: 'smallest',
-      iconSize: 16,
-      fontSize: globalTokens.font.size[100],
-      square: {
-        borderRadius: globalTokens.corner.radius.small,
-      },
-    },
-    size24: {
-      size: 24,
-      badgeSize: 'smallest',
-      iconSize: 16,
-      fontSize: globalTokens.font.size[100],
-      square: {
-        borderRadius: globalTokens.corner.radius.small,
-      },
-    },
-    size28: {
-      size: 28,
-      badgeSize: 'smaller',
-      iconSize: 20,
-      fontWeight: globalTokens.font.weight.semibold,
-      fontSize: globalTokens.font.size[100],
-    },
-    size32: {
-      size: 32,
-      badgeSize: 'smaller',
-      iconSize: 20,
-      fontSize: globalTokens.font.size[100],
-    },
-    size36: {
-      size: 36,
-      badgeSize: 'smaller',
-      iconSize: 20,
-    },
-    size40: {
-      size: 40,
-      badgeSize: 'small',
-      iconSize: 20,
-    },
-    size48: {
-      size: 48,
-      badgeSize: 'small',
-      iconSize: 24,
-    },
-    size56: {
-      size: 56,
-      badgeSize: 'medium',
-      iconSize: 28,
-      fontSize: globalTokens.font.size[400],
-      square: {
-        borderRadius: globalTokens.corner.radius.large,
-      },
-    },
-    size64: {
-      size: 64,
-      badgeSize: 'large',
-      iconSize: 32,
-      fontSize: globalTokens.font.size[500],
-      square: {
-        borderRadius: globalTokens.corner.radius.large,
-      },
-    },
-    size72: {
-      size: 72,
-      badgeSize: 'large',
-      iconSize: 32,
-      fontSize: globalTokens.font.size[500],
-      square: {
-        borderRadius: globalTokens.corner.radius.large,
-      },
-    },
-    size96: {
-      size: 96,
-      badgeSize: 'largest',
-      iconSize: 48,
-      fontWeight: globalTokens.font.weight.regular,
-      fontSize: globalTokens.font.size[700],
-      square: {
-        borderRadius: globalTokens.corner.radius.extraLarge,
-      },
-    },
-    size120: {
-      size: 120,
-      badgeSize: 'largest',
-      iconSize: 48,
-      fontWeight: globalTokens.font.weight.regular,
-      fontSize: globalTokens.font.size[900],
-      square: {
-        borderRadius: globalTokens.corner.radius.extraLarge,
-      },
-    },
-    neutral: {
-      backgroundColor: t.colors.neutralBackground6,
-      color: t.colors.neutralForeground3,
-      iconColor: t.colors.neutralForeground3,
-      ringColor: t.colors.transparentStroke,
-    },
-    brand: {
-      backgroundColor: t.colors.brandBackgroundStatic,
-      color: t.colors.neutralForegroundOnBrand,
-      iconColor: t.colors.neutralForegroundOnBrand,
-      ringColor: t.colors.transparentStroke,
-    },
-    darkRed: getColorProps('darkRed', t),
-    cranberry: getColorProps('cranberry', t),
-    red: getColorProps('red', t),
-    pumpkin: getColorProps('pumpkin', t),
-    peach: getColorProps('peach', t),
-    marigold: getColorProps('marigold', t),
-    gold: getColorProps('gold', t),
-    brass: getColorProps('brass', t),
-    brown: getColorProps('brown', t),
-    forest: getColorProps('forest', t),
-    seafoam: getColorProps('seafoam', t),
-    darkGreen: getColorProps('darkGreen', t),
-    lightTeal: getColorProps('lightTeal', t),
-    teal: getColorProps('teal', t),
-    steel: getColorProps('steel', t),
-    blue: getColorProps('blue', t),
-    royalBlue: getColorProps('royalBlue', t),
-    cornflower: getColorProps('cornflower', t),
-    navy: getColorProps('navy', t),
-    lavender: getColorProps('lavender', t),
-    purple: getColorProps('purple', t),
-    grape: getColorProps('grape', t),
-    lilac: getColorProps('lilac', t),
-    pink: getColorProps('pink', t),
-    magenta: getColorProps('magenta', t),
-    plum: getColorProps('plum', t),
-    beige: getColorProps('beige', t),
-    mink: getColorProps('mink', t),
-    platinum: getColorProps('platinum', t),
-    anchor: getColorProps('anchor', t),
-    burgundy: getColorProps('burgundy', t),
-    hotPink: getColorProps('hotPink', t),
-    orchid: getColorProps('orchid', t),
-  } as JSAvatarTokens);
-
-/**
- * A function which returns object of props depending on color and theme.
- * @param color
- * @param theme
- * @returns object of props - backgroundColor, color and ringColor
- */
-function getColorProps(color: string, theme: Theme) {
-  const themeAppearance = theme.host.appearance;
-  switch (themeAppearance) {
-    case 'light':
-    default:
-      return {
-        backgroundColor: globalTokens.color[color].tint40,
-        color: globalTokens.color[color].shade30,
-        iconColor: globalTokens.color[color].shade30,
-        ringColor: globalTokens.color[color].primary,
-      };
-    case 'dark':
-      return {
-        backgroundColor: globalTokens.color[color].shade30,
-        color: globalTokens.color[color].tint40,
-        iconColor: globalTokens.color[color].tint40,
-        ringColor: globalTokens.color[color].tint30,
-      };
-    case 'highContrast':
-      return {
-        backgroundColor: theme.colors.neutralBackground6,
-        color: theme.colors.neutralForeground3,
-        iconColor: theme.colors.neutralForeground3,
-        ringColor: theme.colors.transparentStroke,
-      };
-  }
-}

package/src/JSAvatarTokens.win32.ts

@@ -1,206 +0,0 @@
-import { Theme } from '@fluentui-react-native/framework';
-import { TokenSettings } from '@fluentui-react-native/use-styling';
-import { JSAvatarTokens } from '.';
-import { globalTokens } from '@fluentui-react-native/theme-tokens';
-
-export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: Theme) =>
-  ({
-    badgeSize: 'smallest',
-    horizontalIconAlignment: 'end',
-    verticalIconAlignment: 'end',
-    color: t.colors.neutralForeground3,
-    backgroundColor: t.colors.neutralBackground6,
-    avatarOpacity: 1,
-    fontFamily: t.typography.families.primary,
-    fontWeight: globalTokens.font.weight.semibold,
-    fontSize: globalTokens.font.size[200],
-    size: 24,
-    iconSize: 16,
-    iconColor: t.colors.neutralForeground3,
-    ringColor: t.colors.transparentStroke,
-    borderColor: globalTokens.color.white,
-    borderWidth: t.name === 'HighContrast' ? 1 : 0,
-    circular: {
-      borderRadius: globalTokens.corner.radius.circle,
-    },
-    square: {
-      borderRadius: globalTokens.corner.radius.medium,
-    },
-    inactive: {
-      avatarOpacity: 0.8,
-    },
-    size20: {
-      size: 20,
-      badgeSize: 'smallest',
-      iconSize: 16,
-      fontSize: globalTokens.font.size[100],
-      square: {
-        borderRadius: globalTokens.corner.radius.small,
-      },
-    },
-    size24: {
-      size: 24,
-      badgeSize: 'smallest',
-      iconSize: 16,
-      fontSize: globalTokens.font.size[100],
-      square: {
-        borderRadius: globalTokens.corner.radius.small,
-      },
-    },
-    size28: {
-      size: 28,
-      badgeSize: 'smaller',
-      iconSize: 20,
-      fontWeight: globalTokens.font.weight.semibold,
-      fontSize: globalTokens.font.size[100],
-    },
-    size32: {
-      size: 32,
-      badgeSize: 'smaller',
-      iconSize: 20,
-      fontSize: globalTokens.font.size[100],
-    },
-    size36: {
-      size: 36,
-      badgeSize: 'smaller',
-      iconSize: 20,
-    },
-    size40: {
-      size: 40,
-      badgeSize: 'small',
-      iconSize: 20,
-    },
-    size48: {
-      size: 48,
-      badgeSize: 'small',
-      iconSize: 24,
-    },
-    size56: {
-      size: 56,
-      badgeSize: 'medium',
-      iconSize: 28,
-      fontSize: globalTokens.font.size[400],
-      square: {
-        borderRadius: globalTokens.corner.radius.large,
-      },
-    },
-    size64: {
-      size: 64,
-      badgeSize: 'large',
-      iconSize: 32,
-      fontSize: globalTokens.font.size[500],
-      square: {
-        borderRadius: globalTokens.corner.radius.large,
-      },
-    },
-    size72: {
-      size: 72,
-      badgeSize: 'large',
-      iconSize: 32,
-      fontSize: globalTokens.font.size[500],
-      square: {
-        borderRadius: globalTokens.corner.radius.large,
-      },
-    },
-    size96: {
-      size: 96,
-      badgeSize: 'largest',
-      iconSize: 48,
-      fontWeight: globalTokens.font.weight.regular,
-      fontSize: globalTokens.font.size[700],
-      square: {
-        borderRadius: globalTokens.corner.radius.extraLarge,
-      },
-    },
-    size120: {
-      size: 120,
-      badgeSize: 'largest',
-      iconSize: 48,
-      fontWeight: globalTokens.font.weight.regular,
-      fontSize: globalTokens.font.size[900],
-      square: {
-        borderRadius: globalTokens.corner.radius.extraLarge,
-      },
-    },
-    neutral: {
-      backgroundColor: t.colors.neutralBackground6,
-      color: t.colors.neutralForeground3,
-      iconColor: t.colors.neutralForeground3,
-      ringColor: t.colors.transparentStroke,
-    },
-    brand: {
-      backgroundColor: t.colors.brandBackgroundStatic,
-      color: t.colors.neutralForegroundOnBrand,
-      iconColor: t.colors.neutralForegroundOnBrand,
-      ringColor: t.colors.transparentStroke,
-    },
-    darkRed: getColorProps('darkRed', t),
-    cranberry: getColorProps('cranberry', t),
-    red: getColorProps('red', t),
-    pumpkin: getColorProps('pumpkin', t),
-    peach: getColorProps('peach', t),
-    marigold: getColorProps('marigold', t),
-    gold: getColorProps('gold', t),
-    brass: getColorProps('brass', t),
-    brown: getColorProps('brown', t),
-    forest: getColorProps('forest', t),
-    seafoam: getColorProps('seafoam', t),
-    darkGreen: getColorProps('darkGreen', t),
-    lightTeal: getColorProps('lightTeal', t),
-    teal: getColorProps('teal', t),
-    steel: getColorProps('steel', t),
-    blue: getColorProps('blue', t),
-    royalBlue: getColorProps('royalBlue', t),
-    cornflower: getColorProps('cornflower', t),
-    navy: getColorProps('navy', t),
-    lavender: getColorProps('lavender', t),
-    purple: getColorProps('purple', t),
-    grape: getColorProps('grape', t),
-    lilac: getColorProps('lilac', t),
-    pink: getColorProps('pink', t),
-    magenta: getColorProps('magenta', t),
-    plum: getColorProps('plum', t),
-    beige: getColorProps('beige', t),
-    mink: getColorProps('mink', t),
-    platinum: getColorProps('platinum', t),
-    anchor: getColorProps('anchor', t),
-    burgundy: getColorProps('burgundy', t),
-    hotPink: getColorProps('hotPink', t),
-    orchid: getColorProps('orchid', t),
-  } as JSAvatarTokens);
-
-/**
- * A function which returns object of props depending on color and theme.
- * @param color
- * @param theme
- * @returns object of props - backgroundColor, color and ringColor
- */
-function getColorProps(color: string, theme: Theme) {
-  const themeAppearance = theme.name;
-  switch (themeAppearance) {
-    case 'White':
-    case 'Colorful':
-    default:
-      return {
-        backgroundColor: globalTokens.color[color].tint40,
-        color: globalTokens.color[color].shade30,
-        iconColor: globalTokens.color[color].shade30,
-        ringColor: globalTokens.color[color].primary,
-      };
-    case 'DarkGray':
-    case 'Black':
-      return {
-        backgroundColor: globalTokens.color[color].shade30,
-        color: globalTokens.color[color].tint40,
-        iconColor: globalTokens.color[color].tint40,
-        ringColor: globalTokens.color[color].tint30,
-      };
-    case 'HighContrast':
-      return {
-        backgroundColor: theme.colors.neutralBackground6,
-        color: theme.colors.neutralForeground3,
-        iconColor: theme.colors.neutralForeground3,
-        ringColor: theme.colors.transparentStroke,
-      };
-  }
-}

package/src/__tests__/__snapshots__/JSAvatar.test.jsx.snap

@@ -1,96 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Avatar rendering renders Avatar 1`] = `
-<View
-  accessibilityLabel=""
-  accessibilityRole="image"
-  accessible={true}
-  shape="circular"
-  style={
-    Object {
-      "alignItems": "flex-end",
-      "flexDirection": "row",
-      "height": 24,
-      "horizontalIconAlignment": "end",
-      "justifyContent": "flex-end",
-      "opacity": 1,
-      "verticalIconAlignment": "end",
-      "width": 24,
-    }
-  }
->
-  <View
-    accessible={false}
-    style={
-      Object {
-        "alignItems": "center",
-        "alignSelf": "stretch",
-        "backgroundColor": "#e6e6e6",
-        "borderColor": "#ffffff",
-        "borderRadius": 9999,
-        "borderWidth": 0,
-        "flexGrow": 1,
-        "height": 24,
-        "justifyContent": "center",
-        "width": 24,
-      }
-    }
-  >
-    <RNSVGSvgView
-      align="xMidYMid"
-      bbHeight={16}
-      bbWidth={14}
-      fill="none"
-      focusable={false}
-      height={16}
-      meetOrSlice={0}
-      minX={0}
-      minY={0}
-      style={
-        Array [
-          Object {
-            "backgroundColor": "transparent",
-            "borderWidth": 0,
-          },
-          Object {
-            "flex": 0,
-            "height": 16,
-            "width": 14,
-          },
-        ]
-      }
-      vbHeight={16}
-      vbWidth={14}
-      width={14}
-      xml="<svg width=\\"14\\" height=\\"16\\" viewBox=\\"0 0 14 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\">
-        <path d=\\"M7 0C4.79086 0 3 1.79086 3 4C3 6.20914 4.79086 8 7 8C9.20914 8 11 6.20914 11 4C11 1.79086 9.20914 0 7 0ZM4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4ZM2.00873 9C0.903151 9 0 9.88687 0 11C0 12.6912 0.83281 13.9663 2.13499 14.7966C3.41697 15.614 5.14526 16 7 16C8.85474 16 10.583 15.614 11.865 14.7966C13.1672 13.9663 14 12.6912 14 11C14 9.89557 13.1045 9.00001 12 9.00001L2.00873 9ZM1 11C1 10.4467 1.44786 10 2.00873 10L12 10C12.5522 10 13 10.4478 13 11C13 12.3088 12.3777 13.2837 11.3274 13.9534C10.2568 14.636 8.73511 15 7 15C5.26489 15 3.74318 14.636 2.67262 13.9534C1.62226 13.2837 1 12.3088 1 11Z\\" fill=\\"currentColor\\"/>
-      </svg>
-      "
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <RNSVGGroup
-        fill={null}
-        propList={
-          Array [
-            "fill",
-          ]
-        }
-      >
-        <RNSVGPath
-          d="M7 0C4.79086 0 3 1.79086 3 4C3 6.20914 4.79086 8 7 8C9.20914 8 11 6.20914 11 4C11 1.79086 9.20914 0 7 0ZM4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4ZM2.00873 9C0.903151 9 0 9.88687 0 11C0 12.6912 0.83281 13.9663 2.13499 14.7966C3.41697 15.614 5.14526 16 7 16C8.85474 16 10.583 15.614 11.865 14.7966C13.1672 13.9663 14 12.6912 14 11C14 9.89557 13.1045 9.00001 12 9.00001L2.00873 9ZM1 11C1 10.4467 1.44786 10 2.00873 10L12 10C12.5522 10 13 10.4478 13 11C13 12.3088 12.3777 13.2837 11.3274 13.9534C10.2568 14.636 8.73511 15 7 15C5.26489 15 3.74318 14.636 2.67262 13.9534C1.62226 13.2837 1 12.3088 1 11Z"
-          fill={
-            Array [
-              2,
-            ]
-          }
-          propList={
-            Array [
-              "fill",
-            ]
-          }
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
-  </View>
-</View>
-`;

package/src/getHashCode.ts

@@ -1,16 +0,0 @@
-/**
- * A function which returns hash code for the avatar color. Web implementation
- *
- * @param str is idForColor or name
- * @returns hash code of the color
- */
-export const getHashCodeWeb = (str: string): number => {
-  let hashCode = 0;
-  for (let len: number = str.length - 1; len >= 0; len--) {
-    const ch = str.charCodeAt(len);
-    const shift = len % 8;
-    hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise
-  }
-
-  return hashCode;
-};

package/src/titles.ts

@@ -1,108 +0,0 @@
-export const titles = new Set<string>([
-  'Mr',
-  'Mrs',
-  'Miss',
-  'Ms',
-  'Dr',
-  'Admiral',
-  'Air Comm',
-  'Ambassador',
-  'Baron',
-  'Baroness',
-  'Brig & Mrs',
-  'Brig Gen',
-  'Brigadier',
-  'Brother',
-  'Canon',
-  'Capt',
-  'Chief',
-  'Cllr',
-  'Col',
-  'Commander',
-  'Commander & Mrs',
-  'Consul',
-  'Consul General',
-  'Count',
-  'Countess',
-  'Countess of',
-  'Cpl',
-  'Dame',
-  'Deputy',
-  'Dr & Mrs',
-  'Drs',
-  'Duchess',
-  'Duke',
-  'Earl',
-  'Father',
-  'General',
-  'Gräfin',
-  'HE',
-  'HMA',
-  'Her Grace',
-  'His Excellency',
-  'Jr',
-  'Judge',
-  'Justice',
-  'Lady',
-  'Lic',
-  'Llc',
-  'Lord',
-  'Lord & Lady',
-  'Lt',
-  'Lt Col',
-  'Lt Cpl',
-  'M',
-  'Madam',
-  'Madame',
-  'Major',
-  'Major General',
-  'Marchioness',
-  'Marquis',
-  'Minister',
-  'Mme',
-  'Mr & Dr',
-  'Mr & Mrs',
-  'Mr & Ms',
-  'Prince',
-  'Princess',
-  'Professor',
-  'Prof',
-  'Prof & Dr',
-  'Prof & Mrs',
-  'Prof & Rev',
-  'Prof Dame',
-  'Prof Dr',
-  'Pvt',
-  'Rabbi',
-  'Rear Admiral',
-  'Rev',
-  'Rev & Mrs',
-  'Rev Canon',
-  'Rev Dr',
-  'Senator',
-  'Sgt',
-  'Sheriff',
-  'Sir',
-  'Sir & Lady',
-  'Sister',
-  'Sr',
-  'Sqr. Leader',
-  'The Earl of',
-  'The Hon',
-  'The Hon Dr',
-  'The Hon Lady',
-  'The Hon Lord',
-  'The Hon Mrs',
-  'The Hon Sir',
-  'The Honourable',
-  'The Rt Hon',
-  'The Rt Hon Dr',
-  'The Rt Hon Lord',
-  'The Rt Hon Sir',
-  'The Rt Hon Visc',
-  'Viscount',
-  'van',
-  'I',
-  'II',
-  'III',
-]);