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

package/src/JSAvatarTokens.ts

@@ -1,201 +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) =>
-  ({
-    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,204 +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',
-    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__/JSAvatar.test.jsx

@@ -1,96 +0,0 @@
-import * as React from 'react';
-import { JSAvatar } from '..';
-import { getInitials } from '../useAvatar';
-import * as renderer from 'react-test-renderer';
-
-const emptyData = [
-  [undefined, ''],
-  [null, ''],
-  ['', ''],
-];
-const testData = [
-  ['Marie', 'M'],
-  ['Aadi KaPoor', 'AK'],
-  ['Marie Beaudouin', 'MB'],
-  ['Aadi Meni KaPoor', 'AK'],
-  ['Will Little (Teams)', 'WL'],
-  ['Will Little-Tanaka', 'WL'],
-  ['-Aadi Kapoor', 'AK'],
-  ['Richard 23 Feynman', 'RF'],
-  ['* Richard *', 'R'],
-  ['Richard Feynman [Teams],', 'RF'],
-  ['Richard Feynman {Teams}', 'RF'],
-  ['-Test   str  with *spaces', 'TS'],
-  ['Second, First', 'SF'],
-];
-const namesWithTitles = [
-  ['Mr Feynman', 'F'],
-  ['Dr Richard Feynman', 'RF'],
-  ['Aadi Meni Ka Jr', 'AK'],
-  ['Consul General Richard Faynman', 'RF'],
-  ['Major General Victor', 'V'],
-];
-
-const languageTestData = [
-  ['خسرو رحیمی', 'خ'], // Arabic
-  ['桂英', '桂'], // Chinese
-  ['佳', '佳'],
-  ['宋智洋', '宋'],
-  ['강현', '강'], // Korean
-  ['최종래', '최'],
-  ['남궁 성종', '남'],
-  ['松田', '松'], // Japanese
-  ['海野', '海'],
-  ['かり', 'か'],
-  ['Илон Маск', 'ИМ'], // Cyrillic
-  ['Írissa Þórðardóttir', 'ÍÞ'], // non-ASCII characters
-  ['Øyvind Åsen', 'ØÅ'],
-  ['ثابت بن قره', 'ث'], // Thābit ibn Qurra - result in PCX - ثابت
-  ['שירה לוי', 'של'], // Hebrew - Shira Levi
-];
-
-const phoneNumbersAndDigits = [
-  ['12345678', ''],
-  ['+47 12 34 56 78 (X 5678)', ''],
-  ['47 12 34', ''],
-  ['47 12', ''],
-  ['James Ext 2', 'JE'],
-  ['1', ''],
-  ['A2', 'A'],
-];
-
-const edgeCaseData = [
-  ['4lex 5loo', 'LL'],
-  [' !@#$%^&*()=+ (Alpha) David   (The man) `~<>,./?[]{}|   Goff   (Gamma)    ', 'DG'],
-  ['+1 (555) 123-4567 ext.4567', 'E'],
-  ['1 Ext 2', 'E'],
-  ['1x1', 'X'],
-];
-
-describe('Avatar rendering', () => {
-  it('renders Avatar', () => {
-    const tree = renderer.create(<JSAvatar />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});
-
-describe('getInitials method', () => {
-  it.each(emptyData)("returns an empty string for '%s'", (text, expected) => {
-    expect(getInitials(text)).toBe(expected);
-  });
-  it.each(testData)("render correct initials for input '%s'", (text, expected) => {
-    expect(getInitials(text)).toBe(expected);
-  });
-  it.each(namesWithTitles)("render initials for names with titles: '%s'", (text, expected) => {
-    expect(getInitials(text)).toBe(expected);
-  });
-  it.each(languageTestData)("render initials for different languages: '%s'", (text, expected) => {
-    expect(getInitials(text)).toBe(expected);
-  });
-  it.each(phoneNumbersAndDigits)("returns an empty string for phone numbers: '%s'", (text, expected) => {
-    expect(getInitials(text)).toBe(expected);
-  });
-  it.each(edgeCaseData)("render initials for edge cases: '%s'", (text, expected) => {
-    expect(getInitials(text)).toBe(expected);
-  });
-});

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',
-]);