@fluentui-react-native/tester 0.50.24 → 0.50.28

package/src/FluentTester/TestComponents/Badge/BadgeTest.tsx

@@ -0,0 +1,93 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import * as React from 'react';
+import { BADGE_TESTPAGE } from './consts';
+import { Test, TestSection, PlatformStatus } from '../Test';
+import { View, Platform, Text } from 'react-native';
+import { Badge, CompressibleBadge } from '@fluentui-react-native/badge';
+import BadgeSvg from './oof.svg';
+
+import { SvgIconProps } from '@fluentui-react-native/icon';
+
+export const BasicBadge: React.FunctionComponent = () => {
+  const svgProps: SvgIconProps = {
+    src: BadgeSvg,
+    viewBox: '0 0 28 28',
+  };
+
+  const fontBuiltInProps = {
+    fontFamily: 'Arial',
+    codepoint: 0x2663,
+    fontSize: 16,
+  };
+
+  const BadgeNoBorder = Badge.customize({
+    borderColor: 'transparent',
+    borderWidth: 0,
+  });
+
+  const StyledBadge = Badge.customize({
+    backgroundColor: 'yellow',
+    borderColor: '#f09',
+    borderWidth: 4,
+  });
+
+  const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
+  const iconProps = { svgSource: svgProps, width: 20, height: 20 };
+
+  return (
+    <View>
+      <Badge />
+      <Text>Appearance</Text>
+      <Badge appearance="outline" text="Outline badge" />
+      <Text>Shape</Text>
+      <Badge shape="circular" text="Circular badge" />
+      <Badge shape="rounded" text="rounded badge" />
+      <Badge shape="square" text="Square badge" />
+      <Text>Size</Text>
+      <Badge size="smallest" shape="circular" />
+      <Badge size="smaller" shape="circular" />
+      <Badge size="small" text="Small" />
+      <Badge size="medium" text="Medium" />
+      <Badge size="large" text="Large" />
+      <Badge size="largest" text="Largest" />
+      {svgIconsEnabled && (
+        <>
+          <Text>Badge with icon</Text>
+          <Badge appearance="outline" icon={iconProps} />
+          <Badge icon={{ fontSource: { ...fontBuiltInProps }, color: '#fff' }} />
+          <Text>Badge with icon and text</Text>
+          <Badge appearance="outline" icon={iconProps} />
+        </>
+      )}
+      <Text>Customized Badge</Text>
+      <BadgeNoBorder appearance="outline" icon={iconProps} />
+      <StyledBadge appearance="outline" text="styled badge" />
+      <Text>Compressible badge</Text>
+      <CompressibleBadge />
+      <CompressibleBadge text="Basic compressible" />
+    </View>
+  );
+};
+
+const badgeSections: TestSection[] = [
+  {
+    name: 'Basic Badge',
+    testID: BADGE_TESTPAGE,
+    component: BasicBadge,
+  },
+];
+
+export const BadgeTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Beta',
+    uwpStatus: 'Experimental',
+    iosStatus: 'Experimental',
+    macosStatus: 'Experimental',
+    androidStatus: 'Backlog',
+  };
+
+  const description =
+    'A badge is an additional visual discriptor for UI elements. It can be used to denote numerical value, status or general information.\n Included in this spec are base properties for usage in all badge scenarios. Reference properties for other badge types i.e. size, layout, and style variations';
+
+  return <Test name="Badge Test" description={description} sections={badgeSections} status={status}></Test>;
+};

package/src/FluentTester/TestComponents/Badge/consts.ts

@@ -0,0 +1,2 @@
+export const HOMEPAGE_BADGE = 'Homepage_Badge_Button';
+export const BADGE_TESTPAGE = 'Badge_TestPage';

package/src/FluentTester/TestComponents/Badge/index.ts

@@ -0,0 +1,2 @@
+export * from './BadgeTest';
+export * from './consts';

package/src/FluentTester/TestComponents/Badge/oof.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 0C6.26801 0 0 6.26801 0 14C0 21.732 6.26801 28 14 28C21.732 28 28 21.732 28 14C28 6.26801 21.732 0 14 0ZM2.80129 14C2.80129 7.81512 7.81512 2.80129 14 2.80129C20.1849 2.80129 25.1987 7.81512 25.1987 14C25.1987 20.1849 20.1849 25.1987 14 25.1987C7.81512 25.1987 2.80129 20.1849 2.80129 14ZM19.8991 9.51445C20.4461 10.0614 20.4461 10.9483 19.8991 11.4953L13.5962 17.7982C13.0492 18.3452 12.1624 18.3452 11.6154 17.7982L8.81412 14.9969C8.26714 14.4499 8.26714 13.563 8.81412 13.0161C9.36111 12.4691 10.2479 12.4691 10.7949 13.0161L12.6058 14.827L17.9183 9.51445C18.4653 8.96746 19.3522 8.96746 19.8991 9.51445Z" fill="#C239B3"/>
+</svg>

package/src/FluentTester/TestComponents/CheckboxExperimental/CheckboxTest.tsx

@@ -151,7 +151,7 @@ const checkboxSections: TestSection[] = [
 export const ExperimentalCheckboxTest: React.FunctionComponent = () => {
   const status: PlatformStatus = {
     win32Status: 'Beta',
-    uwpStatus: 'Experimental',
+    uwpStatus: 'N/A',
     iosStatus: 'N/A',
     macosStatus: 'Experimental',
     androidStatus: 'N/A',

package/src/FluentTester/testPages.android.ts

@@ -1,5 +1,6 @@
 import { TestDescription } from './TestComponents';
 import { JSAvatarTest, HOMEPAGE_AVATAR_BUTTON } from './TestComponents/Avatar';
+import { BadgeTest, HOMEPAGE_BADGE } from './TestComponents/Badge';
 import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
 import { CalloutTest, HOMEPAGE_CALLOUT_BUTTON } from './TestComponents/Callout';
 import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox';
@@ -34,6 +35,11 @@ export const tests: TestDescription[] = [
     component: JSAvatarTest,
     testPage: HOMEPAGE_AVATAR_BUTTON,
   },
+  {
+    name: 'Badge Test',
+    component: BadgeTest,
+    testPage: HOMEPAGE_BADGE,
+  },
   {
     name: 'Button Test',
     component: ButtonTest,

package/src/FluentTester/testPages.ios.ts

@@ -1,5 +1,6 @@
 import { TestDescription } from './TestComponents';
 import { AvatarTest, HOMEPAGE_AVATAR_BUTTON } from './TestComponents/Avatar';
+import { BadgeTest, HOMEPAGE_BADGE } from './TestComponents/Badge';
 import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
 import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox';
 import { ExperimentalCheckboxTest, HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON } from './TestComponents/CheckboxExperimental';
@@ -31,6 +32,11 @@ export const tests: TestDescription[] = [
     component: AvatarTest,
     testPage: HOMEPAGE_AVATAR_BUTTON,
   },
+  {
+    name: 'Badge Test',
+    component: BadgeTest,
+    testPage: HOMEPAGE_BADGE,
+  },
   {
     name: 'Button Test',
     component: ButtonTest,

package/src/FluentTester/testPages.macos.ts

@@ -1,5 +1,6 @@
 import { TestDescription } from './TestComponents';
 import { AvatarTest, HOMEPAGE_AVATAR_BUTTON } from './TestComponents/Avatar';
+import { BadgeTest, HOMEPAGE_BADGE } from './TestComponents/Badge';
 import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
 import { CalloutTest, HOMEPAGE_CALLOUT_BUTTON } from './TestComponents/Callout';
 import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox';
@@ -37,6 +38,11 @@ export const tests: TestDescription[] = [
     component: AvatarTest,
     testPage: HOMEPAGE_AVATAR_BUTTON,
   },
+  {
+    name: 'Badge Test',
+    component: BadgeTest,
+    testPage: HOMEPAGE_BADGE,
+  },
   {
     name: 'Button Test',
     component: ButtonTest,

package/src/FluentTester/testPages.ts

@@ -1,5 +1,6 @@
 import { TestDescription } from './TestComponents';
 import { AvatarTest, HOMEPAGE_AVATAR_BUTTON } from './TestComponents/Avatar';
+import { BadgeTest, HOMEPAGE_BADGE } from './TestComponents/Badge';
 import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
 import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox';
 import { FocusTrapTest, HOMEPAGE_FOCUSTRAPZONE_BUTTON } from './TestComponents/FocusTrapZone';
@@ -37,6 +38,11 @@ export const tests: TestDescription[] = [
     component: AvatarTest,
     testPage: HOMEPAGE_AVATAR_BUTTON,
   },
+  {
+    name: 'Badge Test',
+    component: BadgeTest,
+    testPage: HOMEPAGE_BADGE,
+  },
   {
     name: 'Button Test',
     component: ButtonTest,

package/src/FluentTester/testPages.web.ts

@@ -1,5 +1,6 @@
 import { TestDescription } from './TestComponents';
 import { JSAvatarTest, HOMEPAGE_AVATAR_BUTTON } from './TestComponents/Avatar';
+import { BadgeTest, HOMEPAGE_BADGE } from './TestComponents/Badge';
 import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
 import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox';
 import { HOMEPAGE_LINK_BUTTON, LinkTest } from './TestComponents/Link';
@@ -25,6 +26,11 @@ export const tests: TestDescription[] = [
     component: JSAvatarTest,
     testPage: HOMEPAGE_AVATAR_BUTTON,
   },
+  {
+    name: 'Badge Test',
+    component: BadgeTest,
+    testPage: HOMEPAGE_BADGE,
+  },
   {
     name: 'Button Test',
     component: ButtonTest,

package/src/FluentTester/testPages.win32.ts

@@ -1,4 +1,5 @@
 import { JSAvatarTest, HOMEPAGE_AVATAR_BUTTON } from './TestComponents/Avatar';
+import { BadgeTest, HOMEPAGE_BADGE } from './TestComponents/Badge';
 import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
 import { ExperimentalButtonTest, HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL } from './TestComponents/ButtonExperimental';
 import { CalloutTest, HOMEPAGE_CALLOUT_BUTTON } from './TestComponents/Callout';
@@ -38,6 +39,11 @@ export const tests: TestDescription[] = [
     component: JSAvatarTest,
     testPage: HOMEPAGE_AVATAR_BUTTON,
   },
+  {
+    name: 'Badge Test',
+    component: BadgeTest,
+    testPage: HOMEPAGE_BADGE,
+  },
   {
     name: 'Button Test',
     component: ButtonTest,

package/src/FluentTester/testPages.windows.ts

@@ -1,7 +1,8 @@
 import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
+import { BadgeTest, HOMEPAGE_BADGE } from './TestComponents/Badge';
 import { CalloutTest, HOMEPAGE_CALLOUT_BUTTON } from './TestComponents/Callout';
 import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox';
-import { HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON, ExperimentalCheckboxTest } from './TestComponents/CheckboxExperimental';
+// import { HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON, ExperimentalCheckboxTest } from './TestComponents/CheckboxExperimental';
 import { HOMEPAGE_LINK_BUTTON, LinkTest } from './TestComponents/Link';
 import { HOMEPAGE_PERSONA_BUTTON, PersonaTest } from './TestComponents/Persona';
 import { HOMEPAGE_PERSONACOIN_BUTTON, PersonaCoinTest } from './TestComponents/PersonaCoin';
@@ -23,6 +24,11 @@ export const tests = [
     component: ActivityIndicatorTest,
     testPage: HOMEPAGE_ACTIVITY_INDICATOR_BUTTON,
   },
+  {
+    name: 'Badge Test',
+    component: BadgeTest,
+    testPage: HOMEPAGE_BADGE,
+  },
   {
     name: 'Button Test',
     component: ButtonTest,
@@ -71,11 +77,12 @@ export const tests = [
     component: CheckboxTest,
     testPage: HOMEPAGE_CHECKBOX_BUTTON,
   },
-  {
-    name: 'Experimental Checkbox',
-    component: ExperimentalCheckboxTest,
-    testPage: HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON,
-  },
+  // GH#935 Temporarily disabling while SVGs don't work in windows
+  // {
+  //   name: 'Experimental Checkbox',
+  //   component: ExperimentalCheckboxTest,
+  //   testPage: HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON,
+  // },
   {
     name: 'Tabs Test',
     component: TabsTest,