@fluentui-react-native/tester 0.78.3 → 0.79.1

package/src/TestComponents/Persona/CustomizeUsage.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { View, Text, Switch, TextInput, TextStyle } from 'react-native';
+import { Persona } from '@fluentui/react-native';
+import { michaelImageUrl } from './styles';
+import { commonTestStyles as commonStyles } from '../Common/styles';
+import { useTheme } from '@fluentui-react-native/theme-types';
+import { Slider } from '../Common/Slider';
+
+export const CustomizeUsage: React.FunctionComponent = () => {
+  const [showImage, setShowImage] = React.useState(true);
+  const [coinColor, setCoinColor] = React.useState<string>();
+  const [textColor, setTextColor] = React.useState<string>();
+
+  const [textSize, setTextSize] = React.useState<number>(23);
+  const [secondarySize, setSecondarySize] = React.useState<number>(20);
+  const [tertiarySize, setTertiarySize] = React.useState<number>(17);
+  const [optionalSize, setOptionalSize] = React.useState<number>(14);
+
+  const [horizontalGap, setHorizontalGap] = React.useState<number>();
+  const [verticalGap, setVerticalGap] = React.useState<number>();
+
+  const theme = useTheme();
+  const textBoxBorderStyle: TextStyle = {
+    borderColor: theme.colors.inputBorder,
+  };
+
+  const CustomizedPersona = React.useMemo(() => {
+    const tokens = {
+      backgroundColor: coinColor,
+      color: textColor,
+      textFont: { fontSize: textSize },
+      secondaryFont: { fontSize: secondarySize },
+      tertiaryFont: { fontSize: tertiarySize },
+      optionalFont: { fontSize: optionalSize },
+      horizontalGap: horizontalGap,
+      verticalGap: verticalGap,
+    };
+    return Persona.customize({ tokens });
+  }, [coinColor, textColor, textSize, secondarySize, tertiarySize, optionalSize, horizontalGap, verticalGap]);
+
+  return (
+    <View style={commonStyles.root}>
+      {/* settings */}
+      <View style={commonStyles.settings}>
+        <View style={commonStyles.switch}>
+          <Text>Show image</Text>
+          <Switch value={showImage} onValueChange={setShowImage} />
+        </View>
+
+        <TextInput
+          accessibilityLabel="Background color"
+          style={[commonStyles.textBox, textBoxBorderStyle]}
+          placeholder="Background color"
+          blurOnSubmit={true}
+          onSubmitEditing={(e) => {
+            setCoinColor(e.nativeEvent.text);
+          }}
+        />
+
+        <TextInput
+          accessibilityLabel="Initials text color"
+          style={[commonStyles.textBox, textBoxBorderStyle]}
+          placeholder="Initials text color"
+          blurOnSubmit={true}
+          onSubmitEditing={(e) => {
+            setTextColor(e.nativeEvent.text);
+          }}
+        />
+
+        <Text>Primary text size</Text>
+        <Slider maximum={50} minimum={5} initialValue={textSize} style={commonStyles.vmargin} onChange={setTextSize} />
+
+        <Text>Secondary text size</Text>
+        <Slider maximum={50} minimum={5} initialValue={secondarySize} style={commonStyles.vmargin} onChange={setSecondarySize} />
+
+        <Text>Tertiary text size</Text>
+        <Slider maximum={50} minimum={5} initialValue={tertiarySize} style={commonStyles.vmargin} onChange={setTertiarySize} />
+
+        <Text>Optional text size</Text>
+        <Slider maximum={50} minimum={5} initialValue={optionalSize} style={commonStyles.vmargin} onChange={setOptionalSize} />
+
+        <Text>Horizontal gap</Text>
+        <Slider maximum={100} initialValue={5} minimum={0} style={commonStyles.vmargin} onChange={setHorizontalGap} />
+
+        <Text>Vertical gap</Text>
+        <Slider maximum={20} initialValue={5} minimum={0} style={commonStyles.vmargin} onChange={setVerticalGap} />
+      </View>
+      {/* component under test */}
+      <CustomizedPersona
+        initials="MJ"
+        size="size72"
+        text="Michael Jackson"
+        secondaryText="Pop singer"
+        tertiaryText="King of pop"
+        optionalText="Indiana"
+        imageDescription="Legendary pop singer"
+        presence="offline"
+        imageUrl={showImage ? michaelImageUrl : undefined}
+      />
+    </View>
+  );
+};

package/src/TestComponents/PersonaCoin/CustomizeUsage.mobile.tsx

@@ -0,0 +1,161 @@
+import * as React from 'react';
+import { PersonaCoin } from '@fluentui/react-native';
+import { Switch, View, Text, TextInput } from 'react-native';
+import Slider from '@react-native-community/slider';
+import { steveBallmerPhotoUrl, undefinedText } from './styles';
+import { commonTestStyles as commonStyles } from '../Common/styles';
+import { useTheme } from '@fluentui-react-native/theme-types';
+
+type WithUndefined<T> = T | typeof undefinedText;
+
+const StyledSlider = (props) => {
+  const { title, min, max, initial, onChange, current, step } = props;
+  const theme = useTheme();
+  return (
+    <View style={{ flexDirection: 'row' }}>
+      <Text style={{ flex: 0.5, color: theme.colors.inputText }}>{title}</Text>
+      <Slider
+        step={step || 1}
+        minimumValue={min}
+        maximumValue={max}
+        value={initial}
+        style={[commonStyles.vmargin, { flex: 1 }]}
+        onValueChange={onChange}
+      />
+      <Text style={{ flex: 0.2, color: theme.colors.inputText }}>{current}</Text>
+    </View>
+  );
+};
+
+const StyledTextInput = (props) => {
+  const theme = useTheme();
+  const textInputStyles = [
+    commonStyles.textBox,
+    { flex: 1, marginHorizontal: 5, borderColor: theme.colors.disabledBodyText, color: theme.colors.inputText },
+  ];
+  return (
+    <TextInput
+      accessibilityLabel={props.placeholder}
+      style={textInputStyles}
+      placeholderTextColor={theme.colors.disabledBodyText}
+      blurOnSubmit={true}
+      {...props}
+    />
+  );
+};
+
+const StyledSwitch = (props) => {
+  const { title, value, onChange } = props;
+  const theme = useTheme();
+  return (
+    <View style={commonStyles.switch}>
+      <Text style={{ color: theme.colors.inputText, flex: 1 }}>{title}</Text>
+      <Switch style={{ flex: 1 }} value={value} onValueChange={onChange} />
+    </View>
+  );
+};
+
+export const CustomizeUsage: React.FunctionComponent = () => {
+  const [showImage, setShowImage] = React.useState(true);
+  const [showRings, setShowRings] = React.useState(true);
+  const [showPresence, setShowPresence] = React.useState(true);
+  const [showColoredBackground, setShowColoredBackground] = React.useState(false);
+  const [transparent, setTransparent] = React.useState(false);
+  const [coinColor, setCoinColor] = React.useState<WithUndefined<string>>('green');
+  const [textColor, setTextColor] = React.useState<WithUndefined<string>>('white');
+  const [coinSize, setCoinsize] = React.useState<number>(88);
+  const [ringThickness, setRingThickness] = React.useState<number>(4);
+  const [innerGap, setInnerGap] = React.useState<number>(4);
+  const [iconSize, setIconSize] = React.useState<number>(20);
+  const [iconStrokeWidth, setIconStrokeWidth] = React.useState<number>(4);
+  const [ringColor, setRingColor] = React.useState<string>('green');
+  const [ringBackgroundColor, setRingBackgroundColor] = React.useState<string>(undefined);
+
+  const CustomizedPersonaCoin = React.useMemo(() => {
+    const tokens = {
+      backgroundColor: coinColor,
+      color: textColor,
+      ring: { ringColor: 'red' },
+      coinSize: coinSize,
+      iconSize: iconSize,
+      iconStrokeWidth: iconStrokeWidth,
+    };
+    return PersonaCoin.customize({ tokens });
+  }, [coinColor, textColor, coinSize, iconSize, iconStrokeWidth]);
+
+  return (
+    <View style={{ flexDirection: 'column', padding: 10, backgroundColor: showColoredBackground ? 'gray' : 'transparent' }}>
+      {/* component under test */}
+      <View style={{ flexDirection: 'row', padding: 20, alignItems: 'center' }}>
+        <View style={{ width: '35%', alignItems: 'center' }}>
+          <CustomizedPersonaCoin
+            initials="SB"
+            imageDescription="Photo of Satya Nadella"
+            imageUrl={showImage ? steveBallmerPhotoUrl : undefined}
+            presence={showPresence && iconSize ? 'away' : undefined}
+            ring={
+              showRings && ringThickness
+                ? {
+                    ringColor,
+                    ringBackgroundColor,
+                    ringThickness,
+                    innerGap,
+                    transparent,
+                  }
+                : undefined
+            }
+          />
+        </View>
+        {/** Switch settings */}
+        <View style={{ width: '50%', marginLeft: 30 }}>
+          <StyledSwitch title="Change Background" value={showColoredBackground} onChange={setShowColoredBackground} />
+          <StyledSwitch title="Show Image" value={showImage} onChange={setShowImage} />
+          <StyledSwitch title="Show Presence" value={showPresence} onChange={setShowPresence} />
+          <StyledSwitch title="Show Rings" value={showRings} onChange={setShowRings} />
+          <StyledSwitch title="Show transparent rings" value={transparent} onChange={setTransparent} />
+        </View>
+      </View>
+
+      {/** settings section */}
+      <View>
+        <StyledSlider min={8} max={120} initial={88} onChange={setCoinsize} current={coinSize} step={8} title="coinSize" />
+        <StyledSlider min={0} max={8} initial={4} onChange={setRingThickness} current={ringThickness} title="ringThickness" />
+        <StyledSlider min={0} max={8} initial={4} onChange={setInnerGap} current={innerGap} title="innerGap" />
+        <StyledSlider min={0} max={28} initial={20} onChange={setIconSize} current={iconSize} step={4} title="iconSize" />
+        <StyledSlider min={2} max={8} initial={4} onChange={setIconStrokeWidth} current={iconStrokeWidth} title="iconStrokeWidth" />
+
+        <View style={{ flexDirection: 'row' }}>
+          <StyledTextInput
+            placeholder="Ring glow color"
+            onSubmitEditing={(e) => {
+              setRingColor(e.nativeEvent.text);
+            }}
+          />
+
+          <StyledTextInput
+            placeholder="Ring background color"
+            onSubmitEditing={(e) => {
+              setRingBackgroundColor(e.nativeEvent.text);
+            }}
+          />
+        </View>
+
+        <View style={{ flexDirection: 'row' }}>
+          <StyledTextInput
+            placeholder="Background color"
+            onSubmitEditing={(e) => {
+              setCoinColor(e.nativeEvent.text);
+            }}
+          />
+
+          <StyledTextInput
+            placeholder="Initials text color"
+            onSubmitEditing={(e) => {
+              setTextColor(e.nativeEvent.text);
+            }}
+          />
+        </View>
+      </View>
+    </View>
+  );
+};

package/src/TestComponents/PersonaCoin/CustomizeUsage.tsx

@@ -0,0 +1,162 @@
+import * as React from 'react';
+import { PersonaCoin, IconAlignment } from '@fluentui/react-native';
+import { Switch, View, Text, TextInput, TextStyle } from 'react-native';
+import { Slider } from '../Common/Slider';
+import { steveBallmerPhotoUrl } from './styles';
+import { useTheme } from '@fluentui-react-native/theme-types';
+import { AlignmentPicker } from '../Common/AlignmentPicker';
+import { commonTestStyles as commonStyles } from '../Common/styles';
+
+export const CustomizeUsage: React.FunctionComponent = () => {
+  const [showImage, setShowImage] = React.useState(true);
+  const [coinColor, setCoinColor] = React.useState<string>();
+  const [textColor, setTextColor] = React.useState<string>();
+  const [physicalSize, setPhysicalSize] = React.useState<number>(80);
+  const [iconSize, setIconSize] = React.useState<number>(24);
+  const [iconStrokeWidth, setIconStrokeWidth] = React.useState<number>(2);
+  const [iconStrokeColor, setIconStrokeColor] = React.useState<string>(undefined);
+  const [initialsSize, setInitialsSize] = React.useState<number>(14);
+  const [horizontalAlignment, setHorizontalAlignment] = React.useState<IconAlignment>();
+  const [verticalAlignment, setVerticalAlignment] = React.useState<IconAlignment>();
+
+  const [ringColor, setRingColor] = React.useState<string>('red');
+  const [ringBackgroundColor, setRingBackgroundColor] = React.useState<string>(undefined);
+  const [showRing, setShowRing] = React.useState<boolean>(true);
+  const [transparent, setTransparent] = React.useState<boolean>(false);
+
+  const theme = useTheme();
+  const textBoxBorderStyle: TextStyle = {
+    borderColor: theme.colors.inputBorder,
+  };
+
+  const CustomizedPersonaCoin = React.useMemo(() => {
+    const tokens = {
+      backgroundColor: coinColor,
+      color: textColor,
+      horizontalIconAlignment: horizontalAlignment,
+      verticalIconAlignment: verticalAlignment,
+      iconSize: iconSize,
+      iconStrokeWidth: iconStrokeWidth,
+      iconStrokeColor: iconStrokeColor,
+      initialsSize: initialsSize,
+      coinSize: physicalSize,
+    };
+    return PersonaCoin.customize({ tokens });
+  }, [
+    coinColor,
+    textColor,
+    horizontalAlignment,
+    verticalAlignment,
+    iconSize,
+    iconStrokeWidth,
+    iconStrokeColor,
+    initialsSize,
+    physicalSize,
+  ]);
+
+  return (
+    <View style={commonStyles.root}>
+      {/* settings */}
+      <View style={commonStyles.settings}>
+        <View style={commonStyles.switch}>
+          <Text>Show image</Text>
+          <Switch value={showImage} onValueChange={setShowImage} />
+        </View>
+
+        <View style={commonStyles.switch}>
+          <Text>Show rings</Text>
+          <Switch value={showRing} onValueChange={setShowRing} />
+        </View>
+
+        <View style={commonStyles.switch}>
+          <Text>Transparent Ring</Text>
+          <Switch value={transparent} onValueChange={setTransparent} />
+        </View>
+
+        <TextInput
+          accessibilityLabel="Background color"
+          style={[commonStyles.textBox, textBoxBorderStyle]}
+          placeholder="Background color"
+          blurOnSubmit={true}
+          onSubmitEditing={(e) => {
+            setCoinColor(e.nativeEvent.text);
+          }}
+        />
+
+        <TextInput
+          accessibilityLabel="Initials text color"
+          style={[commonStyles.textBox, textBoxBorderStyle]}
+          placeholder="Initials text color"
+          blurOnSubmit={true}
+          onSubmitEditing={(e) => {
+            setTextColor(e.nativeEvent.text);
+          }}
+        />
+
+        <TextInput
+          accessibilityLabel="Icon stroke color"
+          style={[commonStyles.textBox, textBoxBorderStyle]}
+          placeholder="Icon stroke color"
+          blurOnSubmit={true}
+          onSubmitEditing={(e) => {
+            setIconStrokeColor(e.nativeEvent.text);
+          }}
+        />
+
+        <TextInput
+          accessibilityLabel="Ring color"
+          style={[commonStyles.textBox, textBoxBorderStyle]}
+          placeholder="Ring color"
+          blurOnSubmit={true}
+          onSubmitEditing={(e) => {
+            setRingColor(e.nativeEvent.text);
+          }}
+        />
+
+        <TextInput
+          accessibilityLabel="Ring background color"
+          style={[commonStyles.textBox, textBoxBorderStyle]}
+          placeholder="Ring background color"
+          blurOnSubmit={true}
+          onSubmitEditing={(e) => {
+            setRingBackgroundColor(e.nativeEvent.text);
+          }}
+        />
+
+        <AlignmentPicker style={commonStyles.header} label="Horizontal icon alignment" onSelectionChange={setHorizontalAlignment} />
+        <AlignmentPicker style={commonStyles.header} label="Vertical icon alignment" onSelectionChange={setVerticalAlignment} />
+
+        <Text>Coin size</Text>
+        <Slider minimum={8} maximum={200} initialValue={80} style={commonStyles.vmargin} onChange={setPhysicalSize} />
+
+        <Text>Icon size</Text>
+        <Slider minimum={8} maximum={100} initialValue={24} style={commonStyles.vmargin} onChange={setIconSize} />
+
+        <Text>Icon stroke width</Text>
+        <Slider minimum={0} maximum={8} initialValue={2} style={commonStyles.vmargin} onChange={setIconStrokeWidth} />
+
+        <Text>Font size</Text>
+        <Slider minimum={5} maximum={50} initialValue={14} style={commonStyles.vmargin} onChange={setInitialsSize} />
+      </View>
+
+      {/* component under test */}
+      <CustomizedPersonaCoin
+        initials="SB"
+        imageDescription="Former CEO of Microsoft"
+        presence="blocked"
+        imageUrl={showImage ? steveBallmerPhotoUrl : undefined}
+        ring={
+          showRing
+            ? {
+                ringColor,
+                ringBackgroundColor,
+                ringThickness: 4,
+                innerGap: 4,
+                transparent,
+              }
+            : undefined
+        }
+      />
+    </View>
+  );
+};

package/src/index.ts

@@ -1 +1 @@
-export { FluentTesterApp } from './FluentTester';
+export { FluentTesterApp } from './FluentTesterApp';