@fluentui-react-native/experimental-avatar 0.14.24 → 0.14.27

package/src/JSAvatarTokens.ts

@@ -10,6 +10,11 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
     color: globalTokens.color.white,
     backgroundColor: globalTokens.color.cornflower.primary,
     avatarOpacity: 1,
+    fontFamily: t.typography.families.primary,
+    fontWeight: globalTokens.font.weight.semibold,
+    fontSize: globalTokens.font.size[200],
+    width: 24,
+    height: 24,
     circular: {
       borderRadius: globalTokens.corner.radius.circle,
     },
@@ -23,184 +28,265 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
       width: 20,
       height: 20,
       badgeSize: 'smallest',
-      iconSize: 10,
-      initialsSize: 16,
+      iconSize: 16,
+      fontSize: globalTokens.font.size[100],
+      square: {
+        borderRadius: globalTokens.corner.radius.small,
+      },
     },
     size24: {
       width: 24,
       height: 24,
       badgeSize: 'smallest',
-      iconSize: 10,
-      initialsSize: 16,
+      iconSize: 16,
+      fontSize: globalTokens.font.size[100],
+      square: {
+        borderRadius: globalTokens.corner.radius.small,
+      },
     },
     size28: {
       width: 28,
       height: 28,
       badgeSize: 'smaller',
-      iconSize: 16,
-      initialsSize: 20,
+      iconSize: 20,
+      fontWeight: globalTokens.font.weight.semibold,
+      fontSize: globalTokens.font.size[100],
     },
     size32: {
       width: 32,
       height: 32,
       badgeSize: 'smaller',
-      iconSize: 16,
-      initialsSize: 20,
+      iconSize: 20,
+      fontSize: globalTokens.font.size[100],
     },
     size36: {
       width: 36,
       height: 36,
       badgeSize: 'smaller',
-      iconSize: 16,
-      initialsSize: 20,
+      iconSize: 20,
     },
     size40: {
       width: 40,
       height: 40,
       badgeSize: 'small',
-      iconSize: 16,
-      initialsSize: 20,
+      iconSize: 20,
     },
     size48: {
       width: 48,
       height: 48,
       badgeSize: 'small',
-      iconSize: 20,
-      initialsSize: 24,
+      iconSize: 24,
     },
     size56: {
       width: 56,
       height: 56,
       badgeSize: 'medium',
-      iconSize: 24,
-      initialsSize: 28,
+      iconSize: 28,
+      fontSize: globalTokens.font.size[400],
+      square: {
+        borderRadius: globalTokens.corner.radius.large,
+      },
     },
     size64: {
       width: 64,
       height: 64,
       badgeSize: 'large',
-      iconSize: 28,
-      initialsSize: 32,
+      iconSize: 32,
+      fontSize: globalTokens.font.size[500],
+      square: {
+        borderRadius: globalTokens.corner.radius.large,
+      },
     },
     size72: {
       width: 72,
       height: 72,
       badgeSize: 'large',
-      iconSize: 28,
-      initialsSize: 32,
+      iconSize: 32,
+      fontSize: globalTokens.font.size[500],
+      square: {
+        borderRadius: globalTokens.corner.radius.large,
+      },
     },
     size96: {
       width: 96,
       height: 96,
       badgeSize: 'largest',
-      iconSize: 40,
-      initialsSize: 48,
+      iconSize: 48,
+      fontWeight: globalTokens.font.weight.regular,
+      fontSize: globalTokens.font.size[700],
+      square: {
+        borderRadius: globalTokens.corner.radius.extraLarge,
+      },
     },
     size120: {
       width: 120,
       height: 120,
       badgeSize: 'largest',
-      iconSize: 40,
-      initialsSize: 48,
+      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,
-      ringColor: t.colors.defaultBorder,
+      borderColor: t.colors.defaultBorder,
     },
     brand: {
       backgroundColor: t.colors.brandBackgroundStatic,
       color: t.colors.neutralForegroundOnBrand,
-      ringColor: t.colors.brandedBorder,
+      borderColor: t.colors.brandedBorder,
     },
     darkRed: {
-      backgroundColor: globalTokens.color.darkRed.primary,
+      backgroundColor: globalTokens.color.darkRed.tint40,
+      color: globalTokens.color.darkRed.shade30,
+      borderColor: globalTokens.color.darkRed.primary,
     },
     cranberry: {
-      backgroundColor: globalTokens.color.cranberry.primary,
+      backgroundColor: globalTokens.color.cranberry.tint40,
+      color: globalTokens.color.cranberry.shade30,
+      borderColor: globalTokens.color.cranberry.primary,
     },
     red: {
-      backgroundColor: globalTokens.color.red.primary,
+      backgroundColor: globalTokens.color.red.tint40,
+      color: globalTokens.color.red.shade30,
+      borderColor: globalTokens.color.red.primary,
     },
     pumpkin: {
-      backgroundColor: globalTokens.color.pumpkin.primary,
+      backgroundColor: globalTokens.color.pumpkin.tint40,
+      color: globalTokens.color.pumpkin.shade30,
+      borderColor: globalTokens.color.pumpkin.primary,
     },
     peach: {
-      backgroundColor: globalTokens.color.peach.primary,
+      backgroundColor: globalTokens.color.peach.tint40,
+      color: globalTokens.color.peach.shade30,
+      borderColor: globalTokens.color.peach.primary,
     },
     marigold: {
-      backgroundColor: globalTokens.color.marigold.primary,
+      backgroundColor: globalTokens.color.marigold.tint40,
+      color: globalTokens.color.marigold.shade30,
+      borderColor: globalTokens.color.marigold.primary,
     },
     gold: {
-      backgroundColor: globalTokens.color.gold.primary,
+      backgroundColor: globalTokens.color.gold.tint40,
+      color: globalTokens.color.gold.shade30,
+      borderColor: globalTokens.color.gold.primary,
     },
     brass: {
-      backgroundColor: globalTokens.color.brass.primary,
+      backgroundColor: globalTokens.color.brass.tint40,
+      color: globalTokens.color.brass.shade30,
+      borderColor: globalTokens.color.brass.primary,
     },
     brown: {
-      backgroundColor: globalTokens.color.brown.primary,
+      backgroundColor: globalTokens.color.brown.tint40,
+      color: globalTokens.color.brown.shade30,
+      borderColor: globalTokens.color.brown.primary,
     },
     forest: {
-      backgroundColor: globalTokens.color.forest.primary,
+      backgroundColor: globalTokens.color.forest.tint40,
+      color: globalTokens.color.forest.shade30,
+      borderColor: globalTokens.color.forest.primary,
     },
     seafoam: {
-      backgroundColor: globalTokens.color.seafoam.primary,
+      backgroundColor: globalTokens.color.seafoam.tint40,
+      color: globalTokens.color.seafoam.shade30,
+      borderColor: globalTokens.color.seafoam.primary,
     },
     darkGreen: {
-      backgroundColor: globalTokens.color.darkGreen.primary,
+      backgroundColor: globalTokens.color.darkGreen.tint40,
+      color: globalTokens.color.darkGreen.shade30,
+      borderColor: globalTokens.color.darkGreen.primary,
     },
     lightTeal: {
-      backgroundColor: globalTokens.color.lightTeal.primary,
+      backgroundColor: globalTokens.color.lightTeal.tint40,
+      color: globalTokens.color.lightTeal.shade30,
+      borderColor: globalTokens.color.lightTeal.primary,
     },
     teal: {
-      backgroundColor: globalTokens.color.teal.primary,
+      backgroundColor: globalTokens.color.teal.tint40,
+      color: globalTokens.color.teal.shade30,
+      borderColor: globalTokens.color.teal.primary,
     },
     steel: {
-      backgroundColor: globalTokens.color.steel.primary,
+      backgroundColor: globalTokens.color.steel.tint40,
+      color: globalTokens.color.steel.shade30,
+      borderColor: globalTokens.color.steel.primary,
     },
     blue: {
-      backgroundColor: globalTokens.color.blue.primary,
+      backgroundColor: globalTokens.color.blue.tint40,
+      color: globalTokens.color.blue.shade30,
+      borderColor: globalTokens.color.blue.primary,
     },
     royalBlue: {
-      backgroundColor: globalTokens.color.royalBlue.primary,
+      backgroundColor: globalTokens.color.royalBlue.tint40,
+      color: globalTokens.color.royalBlue.shade30,
+      borderColor: globalTokens.color.royalBlue.primary,
     },
     cornflower: {
-      backgroundColor: globalTokens.color.cornflower.primary,
+      backgroundColor: globalTokens.color.cornflower.tint40,
+      color: globalTokens.color.cornflower.shade30,
+      borderColor: globalTokens.color.cornflower.primary,
     },
     navy: {
-      backgroundColor: globalTokens.color.navy.primary,
+      backgroundColor: globalTokens.color.navy.tint40,
+      color: globalTokens.color.navy.shade30,
+      borderColor: globalTokens.color.navy.primary,
     },
     lavender: {
-      backgroundColor: globalTokens.color.lavender.primary,
+      backgroundColor: globalTokens.color.lavender.tint40,
+      color: globalTokens.color.lavender.shade30,
+      borderColor: globalTokens.color.lavender.primary,
     },
     purple: {
-      backgroundColor: globalTokens.color.purple.primary,
+      backgroundColor: globalTokens.color.purple.tint40,
+      color: globalTokens.color.purple.shade30,
+      borderColor: globalTokens.color.purple.primary,
     },
     grape: {
-      backgroundColor: globalTokens.color.grape.primary,
+      backgroundColor: globalTokens.color.grape.tint40,
+      color: globalTokens.color.grape.shade30,
+      borderColor: globalTokens.color.grape.primary,
     },
     lilac: {
-      backgroundColor: globalTokens.color.lilac.primary,
+      backgroundColor: globalTokens.color.lilac.tint40,
+      color: globalTokens.color.lilac.shade30,
+      borderColor: globalTokens.color.lilac.primary,
     },
     pink: {
-      backgroundColor: globalTokens.color.pink.primary,
+      backgroundColor: globalTokens.color.pink.tint40,
+      color: globalTokens.color.pink.shade30,
+      borderColor: globalTokens.color.pink.primary,
     },
     magenta: {
-      backgroundColor: globalTokens.color.magenta.primary,
+      backgroundColor: globalTokens.color.magenta.tint40,
+      color: globalTokens.color.magenta.shade30,
+      borderColor: globalTokens.color.magenta.primary,
     },
     plum: {
-      backgroundColor: globalTokens.color.plum.primary,
+      backgroundColor: globalTokens.color.plum.tint40,
+      color: globalTokens.color.plum.shade30,
+      borderColor: globalTokens.color.plum.primary,
     },
     beige: {
-      backgroundColor: globalTokens.color.beige.primary,
+      backgroundColor: globalTokens.color.beige.tint40,
+      color: globalTokens.color.beige.shade30,
+      borderColor: globalTokens.color.beige.primary,
     },
     mink: {
-      backgroundColor: globalTokens.color.mink.primary,
+      backgroundColor: globalTokens.color.mink.tint40,
+      color: globalTokens.color.mink.shade30,
+      borderColor: globalTokens.color.mink.primary,
     },
     platinum: {
-      backgroundColor: globalTokens.color.platinum.primary,
+      backgroundColor: globalTokens.color.platinum.tint40,
+      color: globalTokens.color.platinum.shade30,
+      borderColor: globalTokens.color.platinum.primary,
     },
     anchor: {
-      backgroundColor: globalTokens.color.anchor.primary,
+      backgroundColor: globalTokens.color.anchor.tint40,
+      color: globalTokens.color.anchor.shade30,
+      borderColor: globalTokens.color.anchor.primary,
     },
   } as JSAvatarTokens);

package/src/__tests__/JSAvatar.test.jsx

@@ -0,0 +1,156 @@
+import * as React from 'react';
+import { JSAvatar } from '..';
+import { getInitials, validateAlphabeticalCharacters, removeTitlesFromName } from '../useAvatar';
+import * as renderer from 'react-test-renderer';
+
+const alphabeticalTestNames = [
+  'Marie',
+  'Aadi KaPoor',
+  'Marie Beaudouin',
+  'Aadi Meni KaPoor',
+  'Aadi Meni Ka Jr',
+  'Will Little (Teams)',
+  'Will Little-Tanaka',
+  '-Aadi Kapoor',
+  'Richard 23 Feynman',
+  '* Richard *',
+  'Richard Feynman [Teams]',
+  'Richard Feynman {Teams}',
+];
+const alphabeticalInitials = ['M', 'AK', 'MB', 'AK', 'AK', 'WL', 'WL', 'AK', 'RF', 'R', 'RF', 'RF'];
+const otherTestNames = ['(206) 123-4567', '耿盈盈']; // will return this case after bug bash - '耿 James'
+const namesWithTitles = ['Mr Feynman', 'Dr Richard Feynman'];
+const initialsForNameWithTitles = ['F', 'RF'];
+
+it('renders Avatar', () => {
+  const tree = renderer.create(<JSAvatar />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+describe('validateAlphabeticalCharacters method', () => {
+  it('validates alphabetical characters', () => {
+    for (let i = 0; i < alphabeticalTestNames.length; i++) {
+      expect(validateAlphabeticalCharacters(alphabeticalTestNames[i])).toBeTruthy();
+    }
+    for (let i = 0; i < otherTestNames.length; i++) {
+      expect(validateAlphabeticalCharacters(otherTestNames[i])).toBeFalsy();
+    }
+  });
+
+  it("doesn't validate undefined name", () => {
+    expect(validateAlphabeticalCharacters(undefined)).toBeFalsy();
+  });
+  it("doesn't validate an empty string", () => {
+    expect(validateAlphabeticalCharacters('')).toBeFalsy();
+  });
+  it("doesn't validate null name", () => {
+    expect(validateAlphabeticalCharacters(null)).toBeFalsy();
+  });
+});
+
+describe('removeTitlesFromName method', () => {
+  it('removes titles from the name', () => {
+    const words = ['Mr', 'Faynman'];
+    expect(removeTitlesFromName(words)).toStrictEqual(['Faynman']);
+  });
+  // it('removes multiword titles from the name', () => {
+  //   const name = 'Consul General Richard Faynman';
+  //   expect(removeTitlesFromName(name)).toStrictEqual(['Richard Faynman']);
+  // });
+});
+
+describe('getInitials method', () => {
+  it('returns correct initials', () => {
+    const test = getInitials('-Test   str  with *spaces');
+    expect(test).toBe('TS');
+  });
+
+  it('returns an empty string if name is undefined', () => {
+    expect(getInitials(undefined)).toBe('');
+  });
+
+  it('return initials for alphabetical words', () => {
+    for (let i = 0; i < alphabeticalTestNames.length; i++) {
+      expect(getInitials(alphabeticalTestNames[i])).toBe(alphabeticalInitials[i]);
+    }
+  });
+
+  it('return initials for words with titles', () => {
+    for (let i = 0; i < namesWithTitles.length; i++) {
+      expect(getInitials(namesWithTitles[i])).toBe(initialsForNameWithTitles[i]);
+    }
+  });
+
+  it("returns initials when there's a coma", () => {
+    expect(getInitials('Second, First')).toEqual('SF');
+  });
+
+  // Unit tests from Web
+  it('handles null inputs', () => {
+    expect(getInitials(null)).toEqual('');
+    expect(getInitials(undefined)).toEqual('');
+  });
+
+  // it('calculates an expected initials in LTR for non-ASCII characters', () => {
+  //   expect(getInitials('Írissa Þórðardóttir')).toEqual('ÍÞ');
+  //   expect(getInitials('Øyvind Åsen')).toEqual('ØÅ');
+  // });
+
+  it('calculates an expected initials in LTR with a hypen', () => {
+    expect(getInitials('David Zearing-Goff')).toEqual('DZ');
+  });
+
+  // it('calculates an expected initials in LTR with numbers', () => {
+  //   expect(getInitials('4lex 5loo')).toEqual('45');
+  // });
+  it('calculates an expected initials in LTR with multiple parentheses, extra spaces, and unwanted characters', () => {
+    const result = getInitials(' !@#$%^&*()=+ (Alpha) David   (The man) `~<>,./?[]{}|   Goff   (Gamma)    ');
+    expect(result).toEqual('DG');
+  });
+
+  it('calculates an expected initials in LTR with multiple types of unwanted text', () => {
+    const result = getInitials(' !@#$%^&*()=+ (Alpha) David   (The man) `~<>,./?[]{}|   Goff   (Gamma)  [Beta]  ');
+    expect(result).toEqual('DG');
+  });
+
+  it('calculates an expected initials for Arabic names', () => {
+    expect(getInitials('خسرو رحیمی')).toEqual('');
+  });
+
+  it('calculates an expected initials for Chinese names', () => {
+    expect(getInitials('桂英')).toEqual('');
+    expect(getInitials('佳')).toEqual('');
+    expect(getInitials('宋智洋')).toEqual('');
+  });
+
+  it('calculates an expected initials for Korean names', () => {
+    expect(getInitials('강현')).toEqual('');
+    expect(getInitials('최종래')).toEqual('');
+    expect(getInitials('남궁 성종')).toEqual('');
+  });
+
+  it('calculates an expected initials for Japanese names', () => {
+    expect(getInitials('松田')).toEqual('');
+    expect(getInitials('海野')).toEqual('');
+    expect(getInitials('かり')).toEqual('');
+  });
+
+  // it('validates phone numbers', () => {
+  // expect(getInitials('12345678')).toEqual('');
+  // expect(getInitials('+1 (555) 123-4567 ext.4567')).toEqual('');
+  // expect(getInitials('+47 12 34 56 78 (X 5678)')).toEqual('4');
+  // expect(getInitials('47 12 34')).toEqual('');
+  // expect(getInitials('47 12')).toEqual('');
+  // expect(getInitials('1 Ext 2')).toEqual('');
+  // result = getInitials('James Ext 2');
+  // expect(result).toEqual('JE');
+  // result = getInitials('1x1');
+  // expect(result).toEqual('');
+  // result = getInitials('1y1');
+  // expect(result).toEqual('');
+  // result = getInitials('1');
+  // expect(result).toEqual('');
+  // result = getInitials('A 2');
+  // expect(result).toEqual('A');
+  // });
+});

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

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders Avatar 1`] = `
+<View
+  shape="circular"
+  style={
+    Object {
+      "alignItems": "flex-end",
+      "flexDirection": "row",
+      "height": 24,
+      "horizontalIconAlignment": "end",
+      "justifyContent": "flex-end",
+      "opacity": 1,
+      "verticalIconAlignment": "end",
+      "width": 24,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "alignSelf": "stretch",
+        "backgroundColor": "#4f6bed",
+        "borderRadius": 9999,
+        "flexGrow": 1,
+        "height": 24,
+        "justifyContent": "center",
+        "width": 24,
+      }
+    }
+  />
+</View>
+`;

package/src/titles.ts

@@ -0,0 +1,108 @@
+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',
+]);