@planningcenter/chat-react-native 1.6.2-rc.2 → 1.7.0-rc.0

package/build/screens/design_system_screen.js

@@ -1,8 +1,11 @@
 import React, { useState } from 'react';
 import { Alert, Pressable, ScrollView, StyleSheet, View } from 'react-native';
 import { useTheme } from '../hooks';
-import { Avatar, AvatarGroup, Button, Heading, Icon, IconButton, Image, Spinner, Switch, Text, TextButton, TextInlineButton, } from '../components/display';
+import { Avatar, AvatarGroup, Badge, Button, Heading, Icon, IconButton, Image, Spinner, Switch, Text, TextButton, TextInlineButton, } from '../components/display';
 import { space, MAX_FONT_SIZE_MULTIPLIER, platformPressedOpacityStyle, platformFontWeightMedium, } from '../utils';
+// =================================
+// ====== Docs Utils ===============
+// =================================
 const URL = {
     image: 'https://picsum.photos/seed/picsum/200',
     broken: 'https://broken.url',
@@ -22,349 +25,412 @@ const URL = {
     ],
 };
 const buttonPress = () => Alert.alert('Button clicked');
+// =================================
+// ====== Component ================
+// =================================
 export function DesignSystemScreen() {
+    const styles = useStyles();
+    return (<ScrollView contentContainerStyle={styles.container} style={styles.scrollView}>
+      <ThemeSection />
+      {/* TODO: Enable & update when we install @planningcenter/tapestry */}
+      {/* <TokensSection /> */}
+      <IndicatorsSection />
+      <HeadingTextSection />
+      <PressablesSection />
+      <ImageIconsSection />
+      <FormControlsSection />
+      <StatusComponentsSection isLast/>
+    </ScrollView>);
+}
+function ThemeSection({ isLast }) {
+    return (<CollapsableSection title="Theme" isLast={isLast}>
+      <TextGroup>
+        <Text>There are four main parts to our theming system…</Text>
+        <TextRow>
+          <Heading variant="h3">Default theme</Heading>
+          <Text>
+            Start at `src/utils/theme` when adding new theme values or checking what target apps
+            have access to. The file has more instructions and examples.
+          </Text>
+          <Text>At a high level, it provides…</Text>
+          <TextListItem label="1.">
+            Access to consuming app targets of what theme values that they can be customized.
+          </TextListItem>
+          <TextListItem label="2.">
+            Fallback values for our components to use if the values weren't overriden.
+          </TextListItem>
+        </TextRow>
+        <TextRow>
+          <Heading variant="h3">Customizing the theme</Heading>
+          <Text>
+            Apps can override any default theme value by passing a `theme` object to our
+            `ChatProvider` that holds a `theme` and a `colorScheme`.
+          </Text>
+          <Text>
+            Currently types can be enforced by setting the parent theme object to
+            `CreateChatThemeProps`.
+          </Text>
+          <Text variant="footnote">
+            Example setup: `apps/mobile/src/context/chat_context_provider.tsx`
+          </Text>
+        </TextRow>
+        <TextRow>
+          <Heading variant="h3">Merged theme</Heading>
+          <Text>
+            In `src/contexts/chat_context.tsx` we merge the default theme and any custom values
+            coming from a product target with the `useCreateChatTheme` hook. It creates a single
+            `ChatTheme` type.
+          </Text>
+        </TextRow>
+        <TextRow>
+          <Heading variant="h3">Using theme values</Heading>
+          <Text>
+            Inside of our own `chat-react-native` components we can access the merged `ChatTheme`
+            object via our own `useTheme` hook.
+          </Text>
+          <Text variant="footnote">Example setup: `src/components/display/button.tsx`</Text>
+        </TextRow>
+      </TextGroup>
+    </CollapsableSection>);
+}
+// function TokensSection({ isLast }: SectionProps) {
+//   return (
+//     <CollapsableSection title="Tokens" isLast={isLast}>
+//       <TextGroup>
+//         <TextRow>
+//           <Heading variant="h3">What are they?</Heading>
+//           <Text>
+//             Tokens are UX approved CSS values that we can use to style our UI in a consistent way.
+//             (e.g. colors, spacing amounts, and font weights.)
+//           </Text>
+//         </TextRow>
+//         <TextRow>
+//           <Heading variant="h3">Where do they come from?</Heading>
+//           <Text>
+//             Tokens primarily come from our internal `@planningcenter/tapestry` package. However, at
+//             this time the package only support light mode colors, so Chat uses a workaround.
+//           </Text>
+//           <Text>Color-based tokens are infused into our theming system with two local files…</Text>
+//           <TextListItem label="1. `src/vendor/tapestry/tokens`:">
+//             Primitive color values are stored* here. Primitives capture light or dark mode values,
+//             but don't take into account the devices's colors scheme.
+//           </TextListItem>
+//           <TextListItem label="2. `src/vendor/tapestry/alias_tokens_color_map`:">
+//             Alias tokens reference the primitive color values token file* in light and dark mode
+//             specfic objects. Our theming system then selects the right color to use based on the
+//             device's color scheme.
+//           </TextListItem>
+//           <Text variant="footnote">
+//             *If available, reference the color from the Tapestry package instead.
+//           </Text>
+//         </TextRow>
+//         <TextRow>
+//           <Heading variant="h3">How do we use them?</Heading>
+//           <Text>There are two places to reference tokens at this time…</Text>
+//           <TextListItem label="• Color tokens:">
+//             Reference them from our internal `useTheme` hook to ensure the correct light or dark
+//             mode color token is used.
+//           </TextListItem>
+//           <TextListItem label="• All other tokens:">
+//             Use the `computedToken` function from `@planningcenter/tapestry` by passing it a string
+//             with the token's name. This function provides Typescript support and maps to the token's
+//             raw CSS value. There is another function called `token`, but it maps to CSS custom
+//             properties which React Native doesn't support.
+//           </TextListItem>
+//         </TextRow>
+//       </TextGroup>
+//     </CollapsableSection>
+//   )
+// }
+function IndicatorsSection({ isLast }) {
+    const styles = useStyles();
+    return (<CollapsableSection title="Indicators" isLast={isLast}>
+      <Group title="Spinner" description="Loading indicators that can be used within or close to atomic components. Not intended for full-screen loading.">
+        <Row style={styles.spinnerContainer}>
+          <Spinner size={24}/>
+        </Row>
+      </Group>
+    </CollapsableSection>);
+}
+function HeadingTextSection({ isLast }) {
+    return (<CollapsableSection title="Heading & Text" isLast={isLast}>
+      <Group title="Heading" description="Use for headings & titles as it includes the a11y 'header' role. Change the size and style with the h1-h4 variants.">
+        <Row>
+          <Heading>Heading 1</Heading>
+          <Heading variant="h2">Heading 2</Heading>
+          <Heading variant="h3">Heading 3</Heading>
+          <Heading variant="h4">Heading 4</Heading>
+        </Row>
+      </Group>
+      <Group title="Text" description="Use for body copy and supporting text.">
+        <Row>
+          <Text>Plain text</Text>
+          <Text variant="secondary">Secondary</Text>
+          <Text variant="tertiary">Tertiary</Text>
+          <Text variant="footnote">Footnote</Text>
+        </Row>
+      </Group>
+    </CollapsableSection>);
+}
+function PressablesSection({ isLast }) {
+    const styles = useStyles();
+    return (<CollapsableSection title="Pressables" isLast={isLast}>
+      <Group title="Button" description="Feature fill and outline variants for primary and danger usecases, along with disabled & loading states. Optionally shows icons to the left and right of the text.">
+        <Row>
+          <Button onPress={buttonPress} title="Default" size="sm"/>
+          <Button onPress={buttonPress} title="Default" size="md"/>
+          <Button onPress={buttonPress} title="Danger" appearance="danger" size="lg"/>
+        </Row>
+        <Row>
+          <Button disabled onPress={buttonPress} title="Disabled" size="sm"/>
+          <Button disabled onPress={buttonPress} title="Disabled" size="md"/>
+          <Button disabled onPress={buttonPress} title="Disabled" appearance="danger" size="lg"/>
+        </Row>
+        <Row>
+          <Button onPress={buttonPress} title="Default" size="sm" iconNameLeft="general.plus" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
+          <Button onPress={buttonPress} title="Default" size="md" iconNameRight="churchCenter.sort" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
+          <Button onPress={buttonPress} title="Danger" appearance="danger" size="lg" iconNameLeft="groups.cards" iconNameRight="general.downChevron" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
+        </Row>
+        <Row>
+          <Button loading onPress={buttonPress} title="Default" size="sm"/>
+          <Button loading onPress={buttonPress} title="Default" size="md"/>
+          <Button loading onPress={buttonPress} title="Danger" appearance="danger" size="lg"/>
+        </Row>
+        <Row>
+          <Button onPress={buttonPress} title="Default" size="sm" variant="outline"/>
+          <Button onPress={buttonPress} title="Default" size="md" variant="outline"/>
+          <Button onPress={buttonPress} title="Danger" appearance="danger" size="lg" variant="outline"/>
+        </Row>
+        <Row>
+          <Button onPress={buttonPress} title="Default" size="sm" variant="outline" iconNameLeft="general.plus" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
+          <Button onPress={buttonPress} title="Default" size="md" variant="outline" iconNameRight="churchCenter.sort" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
+          <Button onPress={buttonPress} title="Danger" appearance="danger" size="lg" variant="outline" iconNameLeft="groups.cards" iconNameRight="general.downChevron" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
+        </Row>
+        <Row>
+          <Button disabled onPress={buttonPress} title="Disabled" size="sm" variant="outline" iconNameLeft="general.plus" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
+          <Button disabled onPress={buttonPress} title="Disabled" size="md" variant="outline" iconNameRight="churchCenter.sort" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
+          <Button disabled onPress={buttonPress} title="Disabled" appearance="danger" size="lg" variant="outline" iconNameLeft="groups.cards" iconNameRight="general.downChevron" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
+        </Row>
+        <Row>
+          <Button loading onPress={buttonPress} title="Default" size="sm" variant="outline" iconNameLeft="general.plus" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
+          <Button loading onPress={buttonPress} title="Default" size="md" variant="outline" iconNameRight="churchCenter.sort" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
+          <Button loading onPress={buttonPress} title="Danger" appearance="danger" size="lg" variant="outline" iconNameLeft="groups.cards" iconNameRight="general.downChevron" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
+        </Row>
+      </Group>
+      <Group title="IconButton" description="Supports different appearances, sizes, along with loading & disabled states. Use `iconStyle` for custom colors and font sizes. Requires `accessibilityLabel` as icon's don't provide context to screen readers.">
+        <Row>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="md"/>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="danger" size="lg"/>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="interaction" size="xl"/>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" iconStyle={styles.customIconButtonColor} size="xxl"/>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="xxxl"/>
+        </Row>
+        <Row>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="md" disabled/>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="danger" size="lg" disabled/>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="interaction" size="xl" disabled/>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" iconStyle={styles.customIconButtonColor} size="xxl" disabled/>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="xxxl" disabled/>
+        </Row>
+        <Row>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="md" loading/>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="danger" size="lg" loading/>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="interaction" size="xl" loading/>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" iconStyle={styles.customIconButtonColor} size="xxl" loading/>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="xxxl" loading/>
+        </Row>
+      </Group>
+      <Group title="TextButton" description="Pressable text with default & danger appearance options. Can be disabled and accept `Text` variance props.">
+        <Row>
+          <TextButton onPress={buttonPress}>Default</TextButton>
+          <TextButton onPress={buttonPress} variant="secondary">
+            Default
+          </TextButton>
+          <TextButton onPress={buttonPress} variant="tertiary">
+            Default
+          </TextButton>
+          <TextButton onPress={buttonPress} variant="footnote">
+            Default
+          </TextButton>
+        </Row>
+        <Row>
+          <TextButton onPress={buttonPress} appearance="danger">
+            Danger
+          </TextButton>
+          <TextButton onPress={buttonPress} variant="secondary" appearance="danger">
+            Danger
+          </TextButton>
+          <TextButton onPress={buttonPress} variant="tertiary" appearance="danger">
+            Danger
+          </TextButton>
+          <TextButton onPress={buttonPress} variant="footnote" appearance="danger">
+            Danger
+          </TextButton>
+        </Row>
+        <Row>
+          <TextButton onPress={buttonPress} disabled>
+            Disabled
+          </TextButton>
+          <TextButton onPress={buttonPress} variant="secondary" disabled>
+            Disabled
+          </TextButton>
+          <TextButton onPress={buttonPress} variant="tertiary" disabled>
+            Disabled
+          </TextButton>
+          <TextButton onPress={buttonPress} variant="footnote" disabled>
+            Disabled
+          </TextButton>
+        </Row>
+      </Group>
+      <Group title="TextInlineButton" description="Supports nesting within `Text`. Temporary component until React Native fixes a layout bug in `Pressable` which used in `TextButton`.">
+        <Row style={styles.alignRowLeft}>
+          <Text>
+            This text is next to{' '}
+            <TextInlineButton onPress={buttonPress}>default button text</TextInlineButton> Lorem
+            ipsum dolor{' '}
+            <TextInlineButton onPress={buttonPress} appearance="danger">
+              danger button text
+            </TextInlineButton>{' '}
+            consectetur{' '}
+            <TextInlineButton onPress={buttonPress} disabled>
+              disabled button text
+            </TextInlineButton>{' '}
+            elit.
+          </Text>
+          <Text variant="secondary">
+            This text is next to{' '}
+            <TextInlineButton variant="secondary" onPress={buttonPress}>
+              default button text
+            </TextInlineButton>{' '}
+            Lorem ipsum dolor{' '}
+            <TextInlineButton variant="secondary" onPress={buttonPress} appearance="danger">
+              danger button text
+            </TextInlineButton>{' '}
+            consectetur{' '}
+            <TextInlineButton variant="secondary" onPress={buttonPress} disabled>
+              disabled button text
+            </TextInlineButton>{' '}
+            elit.
+          </Text>
+          <Text variant="tertiary">
+            This text is next to{' '}
+            <TextInlineButton variant="tertiary" onPress={buttonPress}>
+              default button text
+            </TextInlineButton>{' '}
+            Lorem ipsum dolor{' '}
+            <TextInlineButton variant="tertiary" onPress={buttonPress} appearance="danger">
+              danger button text
+            </TextInlineButton>{' '}
+            consectetur{' '}
+            <TextInlineButton variant="tertiary" onPress={buttonPress} disabled>
+              disabled button text
+            </TextInlineButton>{' '}
+            elit.
+          </Text>
+          <Text variant="footnote">
+            This text is next to{' '}
+            <TextInlineButton variant="footnote" onPress={buttonPress}>
+              default button text
+            </TextInlineButton>{' '}
+            Lorem ipsum dolor{' '}
+            <TextInlineButton variant="footnote" onPress={buttonPress} appearance="danger">
+              danger button text
+            </TextInlineButton>{' '}
+            consectetur{' '}
+            <TextInlineButton variant="footnote" onPress={buttonPress} disabled>
+              disabled button text
+            </TextInlineButton>{' '}
+            elit.
+          </Text>
+        </Row>
+      </Group>
+    </CollapsableSection>);
+}
+function ImageIconsSection({ isLast }) {
     const styles = useStyles();
     const { colors } = useTheme();
+    return (<CollapsableSection title="Images & Icons" isLast={isLast}>
+      <Group title="Image" description="Foundational way of displaying images. Loading or broken images will fallback to show a spinner. Hide decortive images from screen readers with `alt=''`.">
+        <Row>
+          <Image source={{ uri: URL.broken }} style={styles.image} alt="Mountain sunrise"/>
+          <Image source={{ uri: URL.image }} style={styles.image} alt="Mountain sunrise"/>
+          <Image source={{ uri: URL.image }} style={styles.image} alt=""/>
+        </Row>
+      </Group>
+      <Group title="Avatar" description='Displays the profile image for a user in different sizes and has a loading fallback. Can optionally show an online/offline "presence" indicator.'>
+        <Row>
+          <Avatar sourceUri={URL.broken}/>
+          <Avatar size="md" sourceUri={URL.avatar_fallback}/>
+          <Avatar sourceUri={URL.avatar}/>
+        </Row>
+        <Row>
+          <Avatar presence="offline" sourceUri={URL.broken}/>
+          <Avatar presence="online" size="md" sourceUri={URL.avatar_fallback}/>
+          <Avatar presence="offline" sourceUri={URL.avatar}/>
+        </Row>
+      </Group>
+      <Group title="AvatarGroup" description="Shows 1-4 images in a grid at different sizes. Loading fallback shows until all images successfully load.">
+        <Row>
+          <AvatarGroup sourceUris={[URL.broken]}/>
+          <AvatarGroup sourceUris={[URL.broken, URL.broken, ...URL.two_avatars]}/>
+          <AvatarGroup sourceUris={[URL.avatar]}/>
+          <AvatarGroup sourceUris={URL.two_avatars}/>
+          <AvatarGroup sourceUris={URL.three_avatars}/>
+          <AvatarGroup sourceUris={URL.four_avatars}/>
+        </Row>
+      </Group>
+      <Group title="Icon" description="Displays any icon from @planningcenter/icons. Missing icons will fallback to a grey circle. Styling with `fontSize` will allow it to scale with the device's text a11y size.">
+        <Row>
+          <Icon name="missingIcon" size={20}/>
+          <Icon name="general.textMessage" size={20}/>
+          <Icon name="general.bell" size={20} color={colors.needsDesignPass}/>
+          <Icon name="churchCenter.sort" style={styles.icon}/>
+        </Row>
+      </Group>
+    </CollapsableSection>);
+}
+function FormControlsSection({ isLast }) {
     const [switchEnabled, setSwitchEnabled] = useState(false);
-    return (<ScrollView contentContainerStyle={styles.container} style={styles.scrollView}>
-      <CollapsableSection title="Molecules">
+    return (<CollapsableSection title="Form Controls" isLast={isLast}>
+      <Group title="Switch" description="Use to toggle a boolean value for some sort of contained setting. (ie. Muting a conversation) This is a light wrapper that takes into account themed colors.">
         <Row>
-          <Text>🚧 Coming soon! 🚧</Text>
+          <Switch value={switchEnabled} onValueChange={value => setSwitchEnabled(value)}/>
+          <Switch disabled/>
         </Row>
-      </CollapsableSection>
-      <CollapsableSection title="Atoms">
-        <Group title="Spinner" description="Loading indicators that can be used within or close to atomic components. Not intended for full-screen loading.">
-          <Row style={styles.spinnerContainer}>
-            <Spinner size={24}/>
-          </Row>
-        </Group>
-        <Group title="Image" description="Foundational way of displaying images. Loading or broken images will fallback to show a spinner. Hide decortive images from screen readers with `alt=''`.">
-          <Row>
-            <Image source={{ uri: URL.broken }} style={styles.image} alt="Mountain sunrise"/>
-            <Image source={{ uri: URL.image }} style={styles.image} alt="Mountain sunrise"/>
-            <Image source={{ uri: URL.image }} style={styles.image} alt=""/>
-          </Row>
-        </Group>
-        <Group title="Avatar" description='Displays the profile image for a user in different sizes and has a loading fallback. Can optionally show an online/offline "presence" indicator.'>
-          <Row>
-            <Avatar sourceUri={URL.broken}/>
-            <Avatar size="md" sourceUri={URL.avatar_fallback}/>
-            <Avatar sourceUri={URL.avatar}/>
-          </Row>
-          <Row>
-            <Avatar presence="offline" sourceUri={URL.broken}/>
-            <Avatar presence="online" size="md" sourceUri={URL.avatar_fallback}/>
-            <Avatar presence="offline" sourceUri={URL.avatar}/>
-          </Row>
-        </Group>
-        <Group title="AvatarGroup" description="Shows 1-4 images in a grid at different sizes. Loading fallback shows until all images successfully load.">
-          <Row>
-            <AvatarGroup sourceUris={[URL.broken]}/>
-            <AvatarGroup sourceUris={[URL.broken, URL.broken, ...URL.two_avatars]}/>
-            <AvatarGroup sourceUris={[URL.avatar]}/>
-            <AvatarGroup sourceUris={URL.two_avatars}/>
-            <AvatarGroup sourceUris={URL.three_avatars}/>
-            <AvatarGroup sourceUris={URL.four_avatars}/>
-          </Row>
-        </Group>
-        <Group title="Icon" description="Displays any icon from @planningcenter/icons. Missing icons will fallback to a grey circle. Styling with `fontSize` will allow it to scale with the device's text a11y size.">
-          <Row>
-            <Icon name="missingIcon" size={20}/>
-            <Icon name="general.textMessage" size={20}/>
-            <Icon name="general.bell" size={20} color={colors.needsDesignPass}/>
-            <Icon name="churchCenter.sort" style={styles.icon}/>
-          </Row>
-        </Group>
-        <Group title="Button" description="Feature fill and outline variants for primary and danger usecases, along with disabled & loading states. Optionally shows icons to the left and right of the text.">
-          <Row>
-            <Button onPress={buttonPress} title="Default" size="sm"/>
-            <Button onPress={buttonPress} title="Default" size="md"/>
-            <Button onPress={buttonPress} title="Danger" appearance="danger" size="lg"/>
-          </Row>
-          <Row>
-            <Button disabled onPress={buttonPress} title="Disabled" size="sm"/>
-            <Button disabled onPress={buttonPress} title="Disabled" size="md"/>
-            <Button disabled onPress={buttonPress} title="Disabled" appearance="danger" size="lg"/>
-          </Row>
-          <Row>
-            <Button onPress={buttonPress} title="Default" size="sm" iconNameLeft="general.plus" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
-            <Button onPress={buttonPress} title="Default" size="md" iconNameRight="churchCenter.sort" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
-            <Button onPress={buttonPress} title="Danger" appearance="danger" size="lg" iconNameLeft="groups.cards" iconNameRight="general.downChevron" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
-          </Row>
-          <Row>
-            <Button loading onPress={buttonPress} title="Default" size="sm"/>
-            <Button loading onPress={buttonPress} title="Default" size="md"/>
-            <Button loading onPress={buttonPress} title="Danger" appearance="danger" size="lg"/>
-          </Row>
-          <Row>
-            <Button onPress={buttonPress} title="Default" size="sm" variant="outline"/>
-            <Button onPress={buttonPress} title="Default" size="md" variant="outline"/>
-            <Button onPress={buttonPress} title="Danger" appearance="danger" size="lg" variant="outline"/>
-          </Row>
-          <Row>
-            <Button onPress={buttonPress} title="Default" size="sm" variant="outline" iconNameLeft="general.plus" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
-            <Button onPress={buttonPress} title="Default" size="md" variant="outline" iconNameRight="churchCenter.sort" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
-            <Button onPress={buttonPress} title="Danger" appearance="danger" size="lg" variant="outline" iconNameLeft="groups.cards" iconNameRight="general.downChevron" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
-          </Row>
-          <Row>
-            <Button disabled onPress={buttonPress} title="Disabled" size="sm" variant="outline" iconNameLeft="general.plus" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
-            <Button disabled onPress={buttonPress} title="Disabled" size="md" variant="outline" iconNameRight="churchCenter.sort" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
-            <Button disabled onPress={buttonPress} title="Disabled" appearance="danger" size="lg" variant="outline" iconNameLeft="groups.cards" iconNameRight="general.downChevron" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
-          </Row>
-          <Row>
-            <Button loading onPress={buttonPress} title="Default" size="sm" variant="outline" iconNameLeft="general.plus" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
-            <Button loading onPress={buttonPress} title="Default" size="md" variant="outline" iconNameRight="churchCenter.sort" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
-            <Button loading onPress={buttonPress} title="Danger" appearance="danger" size="lg" variant="outline" iconNameLeft="groups.cards" iconNameRight="general.downChevron" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
-          </Row>
-        </Group>
-        <Group title="IconButton" description="Supports different appearances, sizes, along with loading & disabled states. Use `iconStyle` for custom colors and font sizes. Requires `accessibilityLabel` as icon's don't provide context to screen readers.">
-          <Row>
-            <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="md"/>
-            <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="danger" size="lg"/>
-            <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="interaction" size="xl"/>
-            <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" iconStyle={styles.customIconButtonColor} size="xxl"/>
-            <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="xxxl"/>
-          </Row>
-          <Row>
-            <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="md" disabled/>
-            <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="danger" size="lg" disabled/>
-            <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="interaction" size="xl" disabled/>
-            <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" iconStyle={styles.customIconButtonColor} size="xxl" disabled/>
-            <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="xxxl" disabled/>
-          </Row>
-          <Row>
-            <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="md" loading/>
-            <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="danger" size="lg" loading/>
-            <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="interaction" size="xl" loading/>
-            <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" iconStyle={styles.customIconButtonColor} size="xxl" loading/>
-            <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="xxxl" loading/>
-          </Row>
-        </Group>
-        <Group title="TextButton" description="Pressable text with default & danger appearance options. Can be disabled and accept `Text` variance props.">
-          <Row>
-            <TextButton onPress={buttonPress}>Default</TextButton>
-            <TextButton onPress={buttonPress} variant="secondary">
-              Default
-            </TextButton>
-            <TextButton onPress={buttonPress} variant="tertiary">
-              Default
-            </TextButton>
-            <TextButton onPress={buttonPress} variant="footnote">
-              Default
-            </TextButton>
-          </Row>
-          <Row>
-            <TextButton onPress={buttonPress} appearance="danger">
-              Danger
-            </TextButton>
-            <TextButton onPress={buttonPress} variant="secondary" appearance="danger">
-              Danger
-            </TextButton>
-            <TextButton onPress={buttonPress} variant="tertiary" appearance="danger">
-              Danger
-            </TextButton>
-            <TextButton onPress={buttonPress} variant="footnote" appearance="danger">
-              Danger
-            </TextButton>
-          </Row>
-          <Row>
-            <TextButton onPress={buttonPress} disabled>
-              Disabled
-            </TextButton>
-            <TextButton onPress={buttonPress} variant="secondary" disabled>
-              Disabled
-            </TextButton>
-            <TextButton onPress={buttonPress} variant="tertiary" disabled>
-              Disabled
-            </TextButton>
-            <TextButton onPress={buttonPress} variant="footnote" disabled>
-              Disabled
-            </TextButton>
-          </Row>
-        </Group>
-        <Group title="TextInlineButton" description="Supports nesting within `Text`. Temporary component until React Native fixes a layout bug in `Pressable` which used in `TextButton`.">
-          <Row style={styles.alignRowLeft}>
-            <Text>
-              This text is next to{' '}
-              <TextInlineButton onPress={buttonPress}>default button text</TextInlineButton> Lorem
-              ipsum dolor{' '}
-              <TextInlineButton onPress={buttonPress} appearance="danger">
-                danger button text
-              </TextInlineButton>{' '}
-              consectetur{' '}
-              <TextInlineButton onPress={buttonPress} disabled>
-                disabled button text
-              </TextInlineButton>{' '}
-              elit.
-            </Text>
-            <Text variant="secondary">
-              This text is next to{' '}
-              <TextInlineButton variant="secondary" onPress={buttonPress}>
-                default button text
-              </TextInlineButton>{' '}
-              Lorem ipsum dolor{' '}
-              <TextInlineButton variant="secondary" onPress={buttonPress} appearance="danger">
-                danger button text
-              </TextInlineButton>{' '}
-              consectetur{' '}
-              <TextInlineButton variant="secondary" onPress={buttonPress} disabled>
-                disabled button text
-              </TextInlineButton>{' '}
-              elit.
-            </Text>
-            <Text variant="tertiary">
-              This text is next to{' '}
-              <TextInlineButton variant="tertiary" onPress={buttonPress}>
-                default button text
-              </TextInlineButton>{' '}
-              Lorem ipsum dolor{' '}
-              <TextInlineButton variant="tertiary" onPress={buttonPress} appearance="danger">
-                danger button text
-              </TextInlineButton>{' '}
-              consectetur{' '}
-              <TextInlineButton variant="tertiary" onPress={buttonPress} disabled>
-                disabled button text
-              </TextInlineButton>{' '}
-              elit.
-            </Text>
-            <Text variant="footnote">
-              This text is next to{' '}
-              <TextInlineButton variant="footnote" onPress={buttonPress}>
-                default button text
-              </TextInlineButton>{' '}
-              Lorem ipsum dolor{' '}
-              <TextInlineButton variant="footnote" onPress={buttonPress} appearance="danger">
-                danger button text
-              </TextInlineButton>{' '}
-              consectetur{' '}
-              <TextInlineButton variant="footnote" onPress={buttonPress} disabled>
-                disabled button text
-              </TextInlineButton>{' '}
-              elit.
-            </Text>
-          </Row>
-        </Group>
-        <Group title="Heading" description="Use for headings & titles as it includes the a11y 'header' role. Change the size and style with the h1-h4 variants.">
-          <Row>
-            <Heading>Heading 1</Heading>
-            <Heading variant="h2">Heading 2</Heading>
-            <Heading variant="h3">Heading 3</Heading>
-            <Heading variant="h4">Heading 4</Heading>
-          </Row>
-        </Group>
-        <Group title="Text" description="Use for body copy and supporting text.">
-          <Row>
-            <Text>Plain text</Text>
-            <Text variant="secondary">Secondary</Text>
-            <Text variant="tertiary">Tertiary</Text>
-            <Text variant="footnote">Footnote</Text>
-          </Row>
-        </Group>
-        <Group title="Switch" description="Use to toggle a boolean value for some sort of contained setting. (ie. Muting a conversation) This is a light wrapper that takes into account themed colors.">
-          <Row>
-            <Switch value={switchEnabled} onValueChange={value => setSwitchEnabled(value)}/>
-            <Switch disabled/>
-          </Row>
-        </Group>
-      </CollapsableSection>
-      <CollapsableSection title="Theme" isLast>
-        <TextGroup>
-          <Text>There are four main parts to our theming system…</Text>
-          <TextRow>
-            <Heading variant="h3">Default theme</Heading>
-            <Text>
-              Start at `src/utils/theme` when adding new theme values. The file has more
-              instructions and examples.
-            </Text>
-            <Text>At a high level, it provides…</Text>
-            <TextListItem label="1.">
-              Access to consuming app targets of what theme values that they can be customized.
-            </TextListItem>
-            <TextListItem label="2.">
-              Fallback values for our components to use if the values weren't overriden.
-            </TextListItem>
-          </TextRow>
-          <TextRow>
-            <Heading variant="h3">Customizing the theme</Heading>
-            <Text>
-              Apps can override any default theme value by passing a `theme` object to our
-              `ChatProvider` that holds a `theme` and a `colorScheme`.
-            </Text>
-            <Text>
-              Currently types can be enforced by setting the parent theme object to
-              `CreateChatThemeProps`.
-            </Text>
-            <Text variant="footnote">
-              Example setup: `apps/mobile/src/context/chat_context_provider.tsx`
-            </Text>
-          </TextRow>
-          <TextRow>
-            <Heading variant="h3">Merged theme</Heading>
-            <Text>
-              In `src/contexts/chat_context.tsx` we merge the default theme and any custom values
-              coming from a product target with the `useCreateChatTheme` hook. It creates a single
-              `ChatTheme` type.
-            </Text>
-          </TextRow>
-          <TextRow>
-            <Heading variant="h3">Using theme values</Heading>
-            <Text>
-              Inside of our own `chat-react-native` components we can access the merged `ChatTheme`
-              object via our own `useTheme` hook.
-            </Text>
-            <Text variant="footnote">Example setup: `src/components/display/button.tsx`</Text>
-          </TextRow>
-        </TextGroup>
-      </CollapsableSection>
-      {/* TODO: Enable & update when we install @planningcenter/tapestry */}
-      {/* <CollapsableSection title="Tokens" isLast>
-          <TextGroup>
-            <TextRow>
-              <Heading variant="h3">What are they?</Heading>
-              <Text>
-                Tokens are UX approved CSS values that we can use to style our UI in a consistent way.
-                (e.g. colors, spacing amounts, and font weights.)
-              </Text>
-            </TextRow>
-            <TextRow>
-              <Heading variant="h3">Where do they come from?</Heading>
-              <Text>
-                Tokens primarily come from our internal `@planningcenter/tapestry` package. However,
-                at this time the package only support light mode colors, so Chat uses a workaround.
-              </Text>
-              <Text>
-                Color-based tokens are infused into our theming system with two local files…
-              </Text>
-              <TextListItem label="1. `src/vendor/tapestry/tokens`:">
-                Primitive color values are stored* here. Primitives capture light or dark mode values,
-                but don't take into account the devices's colors scheme.
-              </TextListItem>
-              <TextListItem label="2. `src/vendor/tapestry/alias_tokens_color_map`:">
-                Alias tokens reference the primitive color values token file* in light and dark mode
-                specfic objects. Our theming system then selects the right color to use based on the
-                device's color scheme.
-              </TextListItem>
-              <Text variant="footnote">
-                *If available, reference the color from the Tapestry package instead.
-              </Text>
-            </TextRow>
-            <TextRow>
-              <Heading variant="h3">How do we use them?</Heading>
-              <Text>There are two places to reference tokens at this time…</Text>
-              <TextListItem label="• Color tokens:">
-                Reference them from our internal `useTheme` hook to ensure the correct light or dark
-                mode color token is used.
-              </TextListItem>
-              <TextListItem label="• All other tokens:">
-                Use the `computedToken` function from `@planningcenter/tapestry` by passing it a
-                string with the token's name. This function provides Typescript support and maps to
-                the token's raw CSS value. There is another function called `token`, but it maps to
-                CSS custom properties which React Native doesn't support.
-              </TextListItem>
-            </TextRow>
-          </TextGroup>
-        </CollapsableSection> */}
-    </ScrollView>);
+      </Group>
+    </CollapsableSection>);
+}
+function StatusComponentsSection({ isLast }) {
+    return (<CollapsableSection title="Status components" isLast={isLast}>
+      <Group title="Badge" description="Badge that can convey a status and show an icon. It also supports a meta label and product logo for the conversation list and conversation header. Target products can change colors and hide the logo via theming.">
+        <Row>
+          <Badge label="Neutral" appearance="neutral"/>
+          <Badge label="Error" appearance="error"/>
+          <Badge label="Info" appearance="info"/>
+          <Badge label="Success" appearance="success"/>
+          <Badge label="Warning" appearance="warning"/>
+        </Row>
+        <Row>
+          <Badge label="Neutral" appearance="neutral" iconName="general.star"/>
+          <Badge label="Error" appearance="error" iconName="general.exclamationTriangle"/>
+          <Badge label="Info" appearance="info" iconName="general.outlinedInfoCircle"/>
+          <Badge label="Success" appearance="success" iconName="general.check"/>
+          <Badge label="Warning" appearance="warning" iconName="general.shieldExclamation"/>
+        </Row>
+        <Row>
+          <Badge variant="meta" productLogoName="groups" label="Group" metaLabel="Worlds longest group name that will probably overflow if it gets very much longer"/>
+          <Badge variant="meta" productLogoName="groups" label="Group" metaLabel="Young adults"/>
+          <Badge variant="meta" productLogoName="services" label="Plan" metaLabel="June 19, 2025"/>
+          <Badge variant="meta" productLogoName="services" label="Team"/>
+        </Row>
+        <Row>
+          <Badge variant="metaSubtle" productLogoName="groups" label="Group" metaLabel="Worlds longest group name that will probably overflow if it gets very much longer"/>
+          <Badge variant="metaSubtle" productLogoName="groups" label="Group" metaLabel="Young adults"/>
+          <Badge variant="metaSubtle" productLogoName="services" label="Plan" metaLabel="June 19, 2025"/>
+          <Badge variant="metaSubtle" productLogoName="services" label="Team"/>
+        </Row>
+      </Group>
+    </CollapsableSection>);
 }
 function CollapsableSection({ children, title, isLast = false }) {
     const styles = useStyles();
@@ -409,6 +475,9 @@ function TextListItem({ label, children }) {
       {children}
     </Text>);
 }
+// =================================
+// ====== Styles ===================
+// =================================
 const useStyles = () => {
     const { colors } = useTheme();
     return StyleSheet.create({