---
id: brandmark
category: Brand
title: Brandmark
description: Logos/Brandmarks for Optum brands.
design: 'https://www.figma.com/file/tk08Md4NBBVUPNHQYthmqp/Abyss-Web?type=design&node-id=0-21&mode=design&t=uWtmzWwvT2Kv5MMG-0'
---

<Tabs>

<Tab label="Overview">

```jsx
import { Brandmark } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Brandmark',
  inputs: [
    {
      prop: 'size',
      type: 'string',
      default: '$brandmark.sizing.lg'
    },
    {
      prop: 'affiliate',
      type: 'select',
      options: [
        { label: 'optum', value: 'optum' },
        { label: 'optum_financial', value: 'optum_financial' },
        { label: 'optum_frontier_therapies', value: 'optum_frontier_therapies' },
        { label: 'optum_health-education', value: 'optum_health-education' },
        { label: 'optum_now', value: 'optum_now' },
        { label: 'optum_perks', value: 'optum_perks' },
        { label: 'optum_prescription', value: 'optum_prescription' },
        { label: 'optum_serve', value: 'optum_serve' },
        { label: 'optum_store', value: 'optum_store' },
      ],
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'lockup', value: 'lockup' },
      ]
    },
    {
      prop: 'color',
      type: 'select',
      options: [
        { label: 'white', value: 'white' },
        { label: 'black', value: 'black' },
        { label: 'orange', value: 'orange' },
      ]
    },
  ]
}

// Disclaimer: not all affiliate variant/color combinations are applicable, and inapplicable combinations will display as empty
<Box color="$semantic.color.surface.container.emphasis.2" style={{ justifyContent: 'center', alignItems: 'center' }}>
  <Brandmark
    brand="optum"
    size="$lg"
    affiliate="optum"
    variant="lockup"
    color="orange"
  />
</Box>
```

## Brand

Use the `brand` property to adjust which brand is being selected.

```jsx live
<Layout.Group>
  <Box color="$semantic.color.surface.container.secondary" padding={50}>
    <Brandmark
      brand="optum"
      size="$lg"
      affiliate="optum"
      variant="lockup"
      color="orange"
    />
  </Box>
</Layout.Group>
```

## Size

Use the `size` property to adjust the size of the brandmark.

```jsx live
<Layout.Group>
  <Box color="$semantic.color.surface.container.secondary" padding={50}>
    <Brandmark
      brand="optum"
      size="$sm"
      affiliate="optum"
      variant="lockup"
      color="orange"
    />
  </Box>
  <Box color="$semantic.color.surface.container.secondary" padding={50}>
    <Brandmark
      brand="optum"
      size="$lg"
      affiliate="optum"
      variant="lockup"
      color="orange"
    />
  </Box>
</Layout.Group>
```

## Affiliate

Use the `affiliate` property to select the required brandmark affiliates.

```jsx live
<Layout.Stack>
  <Box color="$semantic.color.surface.container.primary" padding={50}>
    <Brandmark
      brand="optum"
      size="$lg"
      affiliate="optum_financial"
      variant="lockup"
      color="white"
    />
  </Box>
  <Box color="$semantic.color.surface.container.primary" padding={50}>
    <Brandmark
      brand="optum"
      size="$lg"
      affiliate="optum_perks"
      variant="lockup"
      color="white"
    />
  </Box>
</Layout.Stack>
```

## Variant

Use the `variant` property to select the required brandmark variants.

```jsx live
<Layout.Stack>
  <Box color="$semantic.color.surface.container.primary" padding={50}>
    <Brandmark
      brand="optum"
      size="$lg"
      affiliate="optum"
      variant="lockup"
      color="white"
    />
  </Box>
</Layout.Stack>
```

## Color

Use the `color` property to select available brandmark colors.

```jsx live
<Layout.Stack>
  <Box color="$semantic.color.surface.container.primary" padding={50}>
    <Brandmark
      brand="optum"
      size="$lg"
      affiliate="optum"
      variant="lockup"
      color="white"
    />
  </Box>
  <Box color="$semantic.color.surface.container.secondary" padding={50}>
    <Brandmark
      brand="optum"
      size="$lg"
      affiliate="optum"
      variant="lockup"
      color="orange"
    />
  </Box>
</Layout.Stack>
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Brandmark"
  rows={[
    {
      name: 'brand',
      type: 'optum',
      description: 'Indicates which brand you want your brandmark from',
    },
    {
      name: 'size',
      type: 'number | string',
      description: 'Set the size of the brandmark',
    },
    {
      name: 'affiliate',
      type: 'optum | optum_financial | optum_frontier_therapies | optum_health-education | optum_now | optum_perks | optum_prescription | optum_serve | optum_store',
      description: 'Indicates the brandmark affiliate',
    },
    {
      name: 'variant',
      type: 'lockup',
      description: 'Indicates the brandmark variant',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Set color option of the brandmark',
    },
  ]}
/>

<Docs.ClassesTable
  of="Brandmark"
  rows={[
    {
      name: 'brandmark',
      description: 'Brandmark root element',
    },
  ]}
/>

</Tab>

<Tab label="Brandmarks">

```jsx render
<h2>Brandmarks</h2>
```

<br />

The source for these brandmarks can be found in the [Brandmark Library](https://brand.optum.com/content/wordmark-library-resources).

You can use the search functionality to find the required brandmark. Brandmarks can be searched using their affiliates, variants or colors.

<BrandmarkLibrary brand="optum" />

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="Brandmark" keys={['brandmark']} />

</Tab>
</Tabs>

---
id: icon-brand
category: Brand
title: IconBrand
description: Used to implement Brand icons and adapt their properties.
design: https://www.figma.com/file/anZoHg026SyKJHWGJ7Vf4Q/Abyss-Icons?node-id=5%3A159&t=yumeSCoKoGQjs5PJ-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { IconBrand } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'IconBrand',
  inputs: [
    {
      prop: 'size',
      type: 'string',
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'one tone', value: 'onetone' },
        { label: 'two tone', value: 'twotone' },
        { label: 'one tone w/ dark circle', value: 'onetonedarkcircle' },
        { label: 'two tone w/ dark circle', value: 'twotonedarkcircle' },
        { label: 'two tone w/ light circle', value: 'twotonelightcircle' },
      ],
    },
    {
      prop: 'icon',
      type: 'string',
    },
  ]
}

<IconBrand icon="home" size={48} variant="twotonedarkcircle"/>
```

## Icons

Use the `icon` property to adjust which icon is being selected.

```jsx live
<Layout.Group>
  <IconBrand icon="alert" size={48} />
  <IconBrand icon="piggy_bank" size={48} />
  <IconBrand icon="music" size={48} />
</Layout.Group>
```

## Size

Use the `size` property to adjust the size of an icon by setting it to a specific number, or using a token. The default is `$md`.
Token sizes: `$icon-brand.sizing.xs`: 40 `$icon-brand.sizing.sm`: 64 `$icon-brand.sizing.md`: 96 `$icon-brand.sizing.lg`: 112 `$icon-brand.sizing.xl`: 136

```jsx live
<Layout.Group>
  <IconBrand icon="home" size="$icon-brand.sizing.xs" />
  <IconBrand icon="home" size="$icon-brand.sizing.sm" />
  <IconBrand icon="home" size="$icon-brand.sizing.md" />
  <IconBrand icon="home" size="$icon-brand.sizing.lg" />
  <IconBrand icon="home" size="$icon-brand.sizing.xl" />
</Layout.Group>
```

## Brand Icon Variants

Use the `variant` property to change the style of Brand icons. Available variants are `twotonedarkcircle`, `twotonelightcircle`, `twotone`, `onetonedarkcircle`, and `onetone`. The default variant is `twotonedarkcircle`.

```jsx live
<Grid columns={5} span={{ md: '50%', lg: '20%' }}>
  <Grid.Col>
    <Layout.Stack grow space={0}>
      <Box
        padding="$semantic.spacing.sm"
        color="$semantic.color.surface.container.secondary"
      >
        <Text>onetonedarkcircle</Text>
      </Box>
      <Box padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="onetonedarkcircle" />
      </Box>
      <Box color="#D0F1F5" padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="onetonedarkcircle" />
      </Box>
      <Box color="#A5DFE7" padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="onetonedarkcircle" />
      </Box>
      <Box
        color="$semantic.color.surface.container.primary"
        padding="$semantic.spacing.sm"
      >
        <IconBrand icon="airplane" size={48} variant="onetonedarkcircle" />
      </Box>
    </Layout.Stack>
  </Grid.Col>
  <Grid.Col>
    <Layout.Stack grow space={0}>
      <Box
        padding="$semantic.spacing.sm"
        color="$semantic.color.surface.container.secondary"
      >
        <Text>twotonedarkcircle</Text>
      </Box>
      <Box padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="twotonedarkcircle" />
      </Box>
      <Box color="#D0F1F5" padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="twotonedarkcircle" />
      </Box>
      <Box color="#A5DFE7" padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="twotonedarkcircle" />
      </Box>
      <Box
        color="$semantic.color.surface.container.primary"
        padding="$semantic.spacing.sm"
      >
        <IconBrand icon="airplane" size={48} variant="twotonedarkcircle" />
      </Box>
    </Layout.Stack>
  </Grid.Col>
  <Grid.Col>
    <Layout.Stack grow space={0}>
      <Box
        padding="$semantic.spacing.sm"
        color="$semantic.color.surface.container.secondary"
      >
        <Text>twotonelightcircle</Text>
      </Box>
      <Box padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="twotonelightcircle" />
      </Box>
      <Box color="#D0F1F5" padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="twotonelightcircle" />
      </Box>
      <Box color="#A5DFE7" padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="twotonelightcircle" />
      </Box>
      <Box
        color="$semantic.color.surface.container.primary"
        padding="$semantic.spacing.sm"
      >
        <IconBrand icon="airplane" size={48} variant="twotonelightcircle" />
      </Box>
    </Layout.Stack>
  </Grid.Col>
  <Grid.Col>
    <Layout.Stack grow space={0}>
      <Box
        padding="$semantic.spacing.sm"
        color="$semantic.color.surface.container.secondary"
      >
        <Text>onetone</Text>
      </Box>
      <Box padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="onetone" />
      </Box>
      <Box color="#D0F1F5" padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="onetone" />
      </Box>
      <Box color="#A5DFE7" padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="onetone" />
      </Box>
      <Box
        color="$semantic.color.surface.container.primary"
        padding="$semantic.spacing.sm"
      >
        <Layout.Space space={48} />
      </Box>
    </Layout.Stack>
  </Grid.Col>
  <Grid.Col>
    <Layout.Stack grow space={0}>
      <Box
        padding="$semantic.spacing.sm"
        color="$semantic.color.surface.container.secondary"
      >
        <Text>twotone</Text>
      </Box>
      <Box padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="twotone" />
      </Box>
      <Box color="#D0F1F5" padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="twotone" />
      </Box>
      <Box color="#A5DFE7" padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="twotone" />
      </Box>
      <Box
        color="$semantic.color.surface.container.primary"
        padding="$semantic.spacing.sm"
      >
        <Layout.Space space={48} />
      </Box>
    </Layout.Stack>
  </Grid.Col>
</Grid>
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="IconBrand"
  rows={[
    {
      name: 'icon',
      type: 'string',
      description: 'Name of the brand icon',
    },
    {
      name: 'variant',
      type: 'twotonedarkcircle | twotonelightcircle | twotone | onetonedarkcircle | onetone',
      description: 'The style/color variation of the brand icon',
    },
    {
      name: 'brand',
      type: 'uhc | optum | uhg',
      description:
        'Indicates which brand you want your icon from. This changes the colors of the icon to match the brand you select',
    },
    {
      name: 'size',
      type: 'number | string',
      description: 'Set the size of the brand icon',
      default: '$icon-brand.sizing.md',
    },
    {
      name: 'title',
      type: 'string',
      description: 'Set the title of the icon',
    },
    {
      name: 'isScreenReadable',
      type: 'boolean',
      description:
        'Indicate whether the icon is screen readable or not. If the icon is Screen Readable, then provide a title',
    },
    {
      name: 'disableScaling',
      type: 'boolean',
      description:
        'Specifies whether the icon should scale to respect Text Size accessibility settings',
    },
    {
      name: 'maxFontSizeMultiplier',
      type: 'boolean',
      description:
        'Specifies the largest possible scale the icon can reach when `disableScaling` is false',
    },
    {
      name: 'onLoad',
      type: 'function',
      description: 'Callback function when the icon is loaded',
    },
    {
      name: 'onError',
      type: 'function',
      description: 'Callback function when the icon fails to load',
    },
    {
      name: 'fallback',
      type: 'JSX.Element',
      description: 'Fallback element to render when the icon fails to load',
    },
  ]}
/>

<Docs.ClassesTable
  of="IconBrand"
  rows={[
    {
      name: 'icon-brand-root',
      description: 'Icon brand root element',
    },
  ]}
/>

</Tab>

<Tab label="Brand Icons">

```jsx render
<h2>Brand Icons</h2>
```

<br />
Abyss uses branded iconography iconography that is designed to aid wayfinding, draw
attention, and support messaging.

The source for these design icons can be found in the [Brand Icons Library](https://brand.uhc.com/content/iconography).

<IconLibrary brand="optum" />

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="IconBrand" keys={['icon-brand']} />

</Tab>
</Tabs>

---
id: icon-custom
category: Brand
title: IconCustom
description: Used to implement custom icons and adapt their properties.
design: https://www.figma.com/file/anZoHg026SyKJHWGJ7Vf4Q/Abyss-Icons?node-id=5%3A159&t=yumeSCoKoGQjs5PJ-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { IconCustom } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'IconCustom',
  inputs: [
    {
      prop: 'size',
      type: 'string',
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'light', value: 'light' },
        { label: 'lightactive', value: 'lightactive' },
      ],
    },
    {
      prop: 'icon',
      type: 'string',
    },
  ]
}

<IconCustom icon="my_health" brand="optum" />
```

## Size

Use the `size` property to adjust the size of an icon by setting it to a specific number or token. The default size is set to 24.
Token sizes: `$xs`: 16 `$sm`: 20 `$md`: 24 `$lg`: 40 `$xl`: 48

```jsx live
<Layout.Group>
  <IconCustom icon="my_health" brand="optum" size="$xs" />
  <IconCustom icon="my_health" brand="optum" size={24} />
  <IconCustom icon="my_health" brand="optum" size={48} />
</Layout.Group>
```

## Variants

Use the `variant` prop to change the style of the custom icons. The prop takes in either a `light` or `lightactive` value. The default is `light`.

```jsx live
<Layout.Stack>
  <Layout.Group space={20} wrap>
    <View style={{ width: 100 }}>
      <Text>light</Text>
    </View>
    <IconCustom icon="home" variant="light" brand="optum" />
    <IconCustom icon="benefits" variant="light" brand="optum" />
    <IconCustom icon="find_care" variant="light" brand="optum" />
    <IconCustom icon="my_health" variant="light" brand="optum" />
    <IconCustom icon="menu" variant="light" brand="optum" />
    <IconCustom icon="programs" variant="light" brand="optum" />
  </Layout.Group>
  <Layout.Group space={20} wrap>
    <View style={{ width: 100 }}>
      <Text>lightactive</Text>
    </View>
    <IconCustom icon="home" variant="lightactive" brand="optum" />
    <IconCustom icon="benefits" variant="lightactive" brand="optum" />
    <IconCustom icon="find_care" variant="lightactive" brand="optum" />
    <IconCustom icon="my_health" variant="lightactive" brand="optum" />
    <IconCustom icon="menu" variant="lightactive" brand="optum" />
    <IconCustom icon="programs" variant="lightactive" brand="optum" />
  </Layout.Group>
</Layout.Stack>
```

## Brand

Use the `brand` property to adjust which brands icons are being selected. Note that some of the icons unique to certain brands.
The default is the theme brand, then falls back to `uhc`.

```jsx live
<IconCustom icon="my_health" variant="light" brand="optum" size="$xl" />
```

## Active

When placing an icon inside of a clickable element, the icon should be toggled between its normal and active state.

```jsx live
<Layout.Stack>
  <Pressable>
    {({ pressed }) => (
      <Layout.Stack space={-4}>
        <IconCustom icon="home" variant={pressed ? 'lightactive' : 'light'} />
        <Text
          color="$semantic.color.text.body.paragraph"
          size="$core.font-size.p.60"
        >
          Home
        </Text>
      </Layout.Stack>
    )}
  </Pressable>
</Layout.Stack>
```

## Indicator

The [indicator component](/mobile/ui/indicator) can be used as a wrapper to add a notification badge.

```jsx live
<Layout.Group space={20}>
  <Indicator withBorder>
    <IconCustom icon="home" />
  </Indicator>
</Layout.Group>
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="IconCustom"
  rows={[
    {
      name: 'icon',
      type: 'string',
      description: 'Name of the custom icon',
    },
    {
      name: 'variant',
      type: '"light" | "lightactive"',
      description: 'The style variation of the custom icon',
    },
    {
      name: 'size',
      type: 'number | string',
      description: 'Set the size of the custom icon',
    },
    {
      name: 'title',
      type: 'string',
      description: 'Set the title of the icon',
    },
    {
      name: 'isScreenReadable',
      type: 'boolean',
      description:
        'Indicate whether the icon is screen readable or not. If the icon is Screen Readable, then provide a title',
    },
    {
      name: 'brand',
      type: '"uhc" | "optum"',
      description: 'The brand of the custom icon',
    },
    {
      name: 'disableScaling',
      type: 'boolean',
      description:
        'Specifies whether the icon should scale to respect Text Size accessibility settings',
    },
    {
      name: 'maxFontSizeMultiplier',
      type: 'boolean',
      description:
        'Specifies the largest possible scale the icon can reach when `disableScaling` is false',
    },
  ]}
/>

<Docs.ClassesTable
  of="IconCustom"
  rows={[
    {
      name: 'icon-custom-root',
      description: 'Icon custom root element',
    },
  ]}
/>

</Tab>

<Tab label="Custom Icons">

```jsx render
<h2>Custom Icons</h2>
```

<IconLibrary brand="optumCustom" />

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="IconCustom" keys={['icon']} />

</Tab>
</Tabs>

---
id: illustration-brand
category: Media
title: IllustrationBrand
description: Used to implement Brand illustrations and adapt their properties.
design: 'https://www.figma.com/file/34gRQMq2NxFgeRynjqd24C/Documentation-%7C-Abyss-Mobile?type=design&node-id=1218-19509&mode=design&t=eobYuZOIhhms55Vc-0'
---

<Tabs>

<Tab label="Overview">

```jsx
import { IllustrationBrand } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'IllustrationBrand',
  inputs: [
    {
      prop: 'size',
      type: 'string',
    },
    {
      prop: 'illustration',
      type: 'string',
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 1, value: 1 },
        { label: 2, value: 2 },
      ],
    },
    {
      prop: 'color',
      type: 'select',
      options: [
        { label: 'primary', value: 'primary' },
        { label: 'pacific', value: 'pacific' },
        { label: 'white', value: 'white' },
      ]
    },
  ]
}

// Disclaimer: not all brand color combinations or variants are applicable, and inapplicable combinations will display as empty

  <IllustrationBrand
    brand="optum"
    size={400}
    illustration="note_taking_1"
  />
```

## Brand

Use the `brand` property to adjust which brand is being selected.

```jsx live
<IllustrationBrand brand="optum" size={200} illustration="calendar" />
```

## Size

Use the `size` property to adjust the size of the illustration.

```jsx live
<IllustrationBrand brand="optum" illustration="home_delivery" size={300} />
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="IllustrationBrand"
  rows={[
    {
      name: 'brand',
      type: '"uhc" | "optum"',
      description: 'Indicates which brand you want your illustration from',
    },
    {
      name: 'size',
      type: 'number | string',
      description: 'Sets the size of the illustration',
    },
    {
      name: 'color',
      type: '"white"| "primary" | "pacific"',
      description: 'Sets color option of the illustration',
    },
    {
      name: 'variant',
      type: '1 | 2',
      description:
        'For illustrations with variants on the same background color. Applicable only to UHC illustrations',
    },
    {
      name: 'illustration',
      type: 'string',
      description: 'The name of the illustration',
    },
    {
      name: 'title',
      type: 'string',
      description: 'Set accessibilityLabel of the image',
    },
  ]}
/>

<Docs.ClassesTable
  of="IllustrationBrand"
  rows={[
    {
      name: 'illustration-brand-root',
      description: 'IllustrationBrand root element',
    },
  ]}
/>

</Tab>

<Tab label="Illustration Source">

```jsx render
<h2>Illustration Source</h2>
```

<br />
The source for these illustrations can be found in the brand libraries.
<br />
<br />
[UnitedHealthCare
Library](https://unitedhealthcare.gettyimages.com/s/3f79xfhwgtcsc8t3t79hfc9) <br />
[Optum Library](https://brand.optum.com/content/illustration-library-resources)

<br />
<br />
You can use the search functionality to find the required illustration.
Illustrations can be searched using their title, variants or colors.
<br />
<br />
<IllustrationLibrary brand="optum" />

</Tab>
</Tabs>

---
id: tokens
title: Tokens
category: Brand
---

<Tabs>

<Tab label="Overview">

## Overview

Design tokens are the visual sub-atom variables of a design system. They contain UI data such as colors, border width, elevation, and even motion.

They are used in the place of hard-coded values such as hex codes or pixels to maintain scalability and consistency.

Think about them as recipe ingredients - you could add chocolate to a salad, but it won't be very tasty.
You would only consider what is a standard salad ingredient - it's the same with tokens, they are a limited set of options that make sense for our product.

**Further reading:** <br />
[Nathan Curtis on Tokens in design systems](https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421).

### Token Hierarchy

Abyss uses a 3-tier token system:

- Core tier - the WHAT or the OPTIONS: contains primitive values, with no specific meaning - the name of the token and its raw value (HEX code for colors, and numbers for borders, corner radius, opacity, etc.)
- Semantic tier - the HOW or the DECISIONS: communicates design decisions on the exact usage of a Core token system-wide.
- Brand tokens - shorthand tokens to define common colors used throughout Abyss.

### Using Tokens

Before you can consume Abyss tokens, your project must be configured with our [themeProvider](/mobile/ui/theme-provider). This will allow you to access the tokens in your project.

Tokens are used in place of hard-coded values such as hex codes or pixels. To use a token, you can reference it in your code using the `$` symbol followed by the token name.

All Abyss components can accept tokens, when they are passed in using the `style`, or [styles](/mobile/developers/style-customization) prop. Non-Abyss components can use the [tokenize](/mobile/tools/tokenize) function to accept tokens.

#### Styled Function

To create a `View` component with a background color of `$core.color.brand.100`, you can leverage our [styled function](/mobile/tools/styled) and do the following:

```jsx sandbox
() => {
  const Example = styled('View', {
    backgroundColor: '$core.color.brand.100',
    height: 100,
    width: 100,
  });

  return <Example />;
};
```

#### useToken hook

Alternatively, you can use our [useToken Hook](/mobile/hooks/use-token) to directly access the value of a token. This is useful when you need the value of multiple tokens.

```jsx sandbox
() => {
  const getColorToken = useToken('colors');
  const green = getColorToken('$core.color.green.100');
  const red = getColorToken('$core.color.red.100');

  return (
    <>
      <View style={{ backgroundColor: green, height: 50, width: 100 }} />
      <View style={{ backgroundColor: red, height: 50, width: 100 }} />
    </>
  );
};
```

#### Tokenize Function

Our [tokenize](/mobile/tools/tokenize) function is useful for mapping any non-Abyss component's props to accept Abyss tokens.

```jsx live
const TokenizedTouchableHighlight = tokenize(TouchableHighlight, {
  underlayColor: 'colors',
});

render(() => {
  return (
    <TokenizedTouchableHighlight
      underlayColor="$semantic.color.surface.container.emphasis.1"
      style={{ padding: 8 }}
      onPress={() => {}}
      accessibilityRole="button"
    >
      <Text size="$core.font-size.p.100">Press Me</Text>
    </TokenizedTouchableHighlight>
  );
});
```

#### Useful Links

- [Custom Theme Tutorial](/mobile/developers/tutorials/custom-themes/): This tutorial will guide you through creating a custom Abyss theme for your project.
- [createTheme Function](/mobile/tools/create-theme): This tool allows you to create and modify themes to fit your design needs.
- [Theme Provider](/mobile/ui/theme-provider): Provider that passes the theme object down the component tree giving your project access to Abyss tokens.
- [styled Function](/mobile/tools/styled): Tool that allows you to create styled components.
- [useToken Hook](/mobile/hooks/use-token): Hook that allows you to access the value of a token in your project.
- [tokenize](/mobile/tools/tokenize): Function that allows you to map a component's props to accept Abyss tokens.

</Tab>

<Tab label="Core Tokens">

## Core Tokens

Below is a list of core tokens used throughout Abyss, These are split into the categories `color`, `border-width`, `border-radius`, `opacity`, `spacing`, `sizing`.

_**Note:** Click on the token row to copy the token to your clipboard._

#### Border Width Tokens

`border-width` tokens are used to define the `borderWidth` on components.

```jsx
const Example = styled('View', {
  borderWidth: '$core.border-width.md',
});
```

<Docs.CoreTokenTable type="borderWidths" tier="core" />

#### Border Radius Tokens

`border-radius` tokens are used to define the `borderRadius` on components.

```jsx
const Example = styled('View', {
  borderRadius: '$core.border-radius.md',
});
```

<Docs.CoreTokenTable type="radii" tier="core" />

---

#### Opacity Tokens

`opacity` tokens are used to define the opacity of a component.

```jsx
const Example = styled('View', {
  opacity: '$core.opacity.md',
});
```

<Docs.CoreTokenTable type="opacities" tier="core" />

---

#### Spacing Tokens

`spacing` tokens define the space between components. Generally, these are used for the `padding`, `margin`, or `gap` of components.

```jsx
const Example = styled('View', {
  padding: '$core.spacing.200',
});
```

<Docs.CoreTokenTable type="space" tier="core" />

---

#### Sizing Tokens

`sizing` tokens define the size of components. Generally, these will be used to define the `width` or `height`.

```jsx
const Example = styled('View', {
  width: '$core.sizing.600',
  height: '$core.sizing.600',
});
```

<Docs.CoreTokenTable type="sizes" tier="core" />

---

#### Color Tokens

`color` tokens are used to define the color of components.

```jsx
const Example = styled('View', {
  backgroundColor: '$core.color.brand.100',
});
```

<Docs.CoreTokenTable type="colors" tier="core" />

</Tab>

<Tab label="Semantic Tokens">
<h2>Semantic tokens</h2>

**Note:** Click on the desired token to copy it to your clipboard.

<Docs.SemanticTokensTable />

</Tab>
</Tabs>

---
id: brandmark
category: Brand
title: Brandmark
description: Logos/Brandmarks for UHC brands.
design: 'https://www.figma.com/file/tk08Md4NBBVUPNHQYthmqp/Abyss-Web?type=design&node-id=0-21&mode=design&t=uWtmzWwvT2Kv5MMG-0'
---

<Tabs>

<Tab label="Overview">

```jsx
import { Brandmark } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Brandmark',
  inputs: [
    {
      prop: 'size',
      type: 'string',
    },
    {
      prop: 'affiliate',
      type: 'select',
       options: [
        { label: 'aarp_extra_assurance_benefits', value: 'aarp_extra_assurance_benefits' },
        { label: 'aarp_medicare_advantage_walgreens', value: 'aarp_medicare_advantage_walgreens' },
        { label: 'aarp_medicare_advantage', value: 'aarp_medicare_advantage' },
        { label: 'aarp_medicare_plans', value: 'aarp_medicare_plans' },
        { label: 'aarp_medicare_prescription', value: 'aarp_medicare_prescription' },
        { label: 'aarp_medicare_prescription_walgreens', value: 'aarp_medicare_prescription_walgreens' },
        { label: 'aarp_medicare_supplement', value: 'aarp_medicare_supplement' },
        { label: 'aarp_supplemental_personal_health', value: 'aarp_supplemental_personal_health' },
        { label: 'community_plan', value: 'community_plan' },
        { label: 'dental', value: 'dental' },
        { label: 'dual_complete', value: 'dual_complete' },
        { label: 'global', value: 'global' },
        { label: 'hearing', value: 'hearing' },
        { label: 'medicare_advantage', value: 'medicare_advantage' },
        { label: 'group_medicare_advantage', value: 'group_medicare_advantage' },
        { label: 'medicare_plans', value: 'medicare_plans' },
        { label: 'medicare_solutions', value: 'medicare_solutions' },
        { label: 'oxford', value: 'oxford' },
        { label: 'student_resources', value: 'student_resources' },
        { label: 'uhc', value: 'uhc' },
        { label: 'vision', value: 'vision' },
      ],
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'lockup', value: 'lockup' },
        { label: 'lockup_horizontal', value: 'lockup_horizontal' },
        { label: 'u_mark', value: 'u_mark' },
        { label: 'u_mark_horizontal', value: 'u_mark_horizontal' },
        { label: 'monogram', value: 'monogram' },
        { label: 'stacked_wordmark', value: 'stacked_wordmark' },
        { label: 'wordmark', value: 'wordmark' },
      ]
    },
    {
      prop: 'color',
      type: 'select',
      options: [
        { label: 'red', value: 'red' },
        { label: 'white', value: 'white' },
        { label: 'black', value: 'black' },
        { label: 'blue', value: 'blue' },
        { label: 'full', value: 'full' },
      ]
    },
  ]
}

// Disclaimer: not all affiliate variant/color combinations are applicable, and inapplicable combinations will display as empty
<Box color="$semantic.color.surface.container.tertiary" style={{ justifyContent: 'center', alignItems: 'center' }}>
  <Brandmark
    brand="uhc"
    size={400}
    affiliate="uhc"
    variant="lockup"
    color="blue"
  />
</Box>
```

## Brand

Use the `brand` property to adjust which brand is being selected.

```jsx live
<Layout.Group>
  <Box color="$semantic.color.surface.container.secondary" padding={50}>
    <Brandmark
      brand="uhc"
      size="$lg"
      affiliate="uhc"
      variant="lockup"
      color="blue"
    />
  </Box>
</Layout.Group>
```

## Size

Use the `size` property to adjust the size of the brandmark.

```jsx live
<Layout.Group>
  <Box color="$semantic.color.surface.container.secondary" padding={50}>
    <Brandmark
      brand="uhc"
      size="$sm"
      affiliate="uhc"
      variant="lockup"
      color="blue"
    />
  </Box>
  <Box color="$semantic.color.surface.container.secondary" padding={50}>
    <Brandmark
      brand="uhc"
      size="$lg"
      affiliate="uhc"
      variant="lockup"
      color="blue"
    />
  </Box>
</Layout.Group>
```

## Affiliate

Use the `affiliate` property to select the required brandmark affiliates.

```jsx live
<Layout.Stack>
  <Box color="$semantic.color.surface.container.secondary" padding={50}>
    <Brandmark
      brand="uhc"
      size="$lg"
      affiliate="aarp_medicare_advantage"
      variant="lockup"
      color="full"
    />
  </Box>
  <Box color="$semantic.color.surface.container.secondary" padding={50}>
    <Brandmark
      brand="uhc"
      size="$lg"
      affiliate="uhc"
      variant="lockup"
      color="blue"
    />
  </Box>
</Layout.Stack>
```

## Variant

Use the `variant` property to select the required brandmark variants.

```jsx live
<Layout.Stack>
  <Box color="$semantic.color.surface.container.secondary" padding={50}>
    <Brandmark
      brand="uhc"
      size="$lg"
      affiliate="uhc"
      variant="monogram"
      color="blue"
    />
  </Box>
  <Box color="$semantic.color.surface.container.secondary" padding={50}>
    <Brandmark
      brand="uhc"
      size="$lg"
      affiliate="uhc"
      variant="lockup"
      color="blue"
    />
  </Box>
</Layout.Stack>
```

## Color

Use the `color` property to select available brandmark colors.

```jsx live
<Layout.Stack>
  <Box color="$semantic.color.surface.container.primary" padding={50}>
    <Brandmark
      brand="uhc"
      size="$lg"
      affiliate="uhc"
      variant="monogram"
      color="white"
    />
  </Box>
  <Box color="$semantic.color.surface.container.secondary" padding={50}>
    <Brandmark
      brand="uhc"
      size="$lg"
      affiliate="medicare_plans"
      variant="u_mark"
      color="black"
    />
  </Box>
</Layout.Stack>
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Brandmark"
  rows={[
    {
      name: 'brand',
      type: 'uhc',
      description: 'Indicates which brand you want your brandmark from',
    },
    {
      name: 'size',
      type: 'number | string',
      description: 'Set the size of the brandmark',
      default: '$brandmark.sizing.lg',
    },
    {
      name: 'affiliate',
      type: 'aarp_extra_assurance_benefits | aarp_medicare_advantage_walgreens | aarp_medicare_plans | aarp_medicare_prescription | aarp_medicare_prescription_walgreens | aarp_medicare_supplement | aarp_supplemental_personal_health | community_plan | dental | dual_complete | global | hearing | medicare_advantage | group_medicare_advantage | medicare_plans | medicare_solutions | oxford | student_resources | uhc | vision',
      description: 'Indicates the brandmark affiliate',
    },
    {
      name: 'variant',
      type: 'lockup | lockup_horizontal | u_mark | u_mark_horizontal | monogram | stacked_wordmark | wordmark',
      description: 'Indicates the brandmark variant',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Set color option of the brandmark',
    },
    {
      name: 'title',
      type: 'string',
      description: 'Set title for the brandmark',
    },
    {
      name: 'sizes',
      type: 'Record',
      description: 'Pre programmed sizes for the brandmark',
      default: '{sm: 100, md: 150, lg: 200}',
    },
  ]}
/>

<Docs.ClassesTable
  of="Brandmark"
  rows={[
    {
      name: 'brandmark-root',
      description: 'Brandmark root element',
    },
  ]}
/>

<Docs.TranslationTable of="Brandmark" rows={['Brandmark.fromUHC']} />

</Tab>

<Tab label="Brandmarks">

```jsx render
<h2>Brandmarks</h2>
```

<br />

The source for these brandmarks can be found in the [Brandmark Library](https://brand.uhc.com/content/logo-brandmark-library).

You can use the search functionality to find the required brandmark. Brandmarks can be searched using their affiliates, variants or colors.

<BrandmarkLibrary brand="uhc" />

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="Brandmark" keys={['brandmark']} />

</Tab>
</Tabs>

---
id: icon-brand
category: Brand
title: IconBrand
description: Used to implement Brand icons and adapt their properties.
design: https://www.figma.com/file/anZoHg026SyKJHWGJ7Vf4Q/Abyss-Icons?node-id=5%3A159&t=yumeSCoKoGQjs5PJ-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { IconBrand } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'IconBrand',
  inputs: [
    {
      prop: 'size',
      type: 'string',
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'one tone', value: 'onetone' },
        { label: 'two tone', value: 'twotone' },
        { label: 'one tone w/ dark circle', value: 'onetonedarkcircle' },
        { label: 'two tone w/ dark circle', value: 'twotonedarkcircle' },
        { label: 'two tone w/ light circle', value: 'twotonelightcircle' },
      ],
    },
    {
      prop: 'icon',
      type: 'string',
    },
  ]
}

<IconBrand icon="home" size={48} variant="twotonedarkcircle"/>
```

## Icons

Use the `icon` property to adjust which icon is being selected.

```jsx live
<Layout.Group>
  <IconBrand icon="alert" size={48} />
  <IconBrand icon="piggy_bank" size={48} />
  <IconBrand icon="music" size={48} />
</Layout.Group>
```

## Size

Use the `size` property to adjust the size of an icon by setting it to a specific number, or using a token. The default is `$md`.
Token sizes: `$icon-brand.sizing.xs`: 40 `$icon-brand.sizing.sm`: 64 `$icon-brand.sizing.md`: 96 `$icon-brand.sizing.lg`: 112 `$icon-brand.sizing.xl`: 136

```jsx live
<Layout.Group>
  <IconBrand icon="home" size="$icon-brand.sizing.xs" />
  <IconBrand icon="home" size="$icon-brand.sizing.sm" />
  <IconBrand icon="home" size="icon-brand.sizing.md" />
  <IconBrand icon="home" size="icon-brand.sizing.lg" />
  <IconBrand icon="home" size="icon-brand.sizing.xl" />
</Layout.Group>
```

## Brand Icon Variants

Use the `variant` property to change the style of Brand icons. Available variants are `twotonedarkcircle`, `twotonelightcircle`, `twotone`, `onetonedarkcircle`, and `onetone`. The default variant is `twotonedarkcircle`.

```jsx live
<Grid columns={5} span={{ md: '50%', lg: '20%' }}>
  <Grid.Col>
    <Layout.Stack grow space={0}>
      <Box
        padding="$semantic.spacing.sm"
        color="$semantic.color.surface.container.secondary"
      >
        <Text>onetonedarkcircle</Text>
      </Box>
      <Box padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="onetonedarkcircle" />
      </Box>
      <Box color="#D0F1F5" padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="onetonedarkcircle" />
      </Box>
      <Box color="#A5DFE7" padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="onetonedarkcircle" />
      </Box>
      <Box
        color="$semantic.color.surface.container.primary"
        padding="$semantic.spacing.sm"
      >
        <IconBrand icon="airplane" size={48} variant="onetonedarkcircle" />
      </Box>
    </Layout.Stack>
  </Grid.Col>
  <Grid.Col>
    <Layout.Stack grow space={0}>
      <Box
        padding="$semantic.spacing.sm"
        color="$semantic.color.surface.container.secondary"
      >
        <Text>twotonedarkcircle</Text>
      </Box>
      <Box padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="twotonedarkcircle" />
      </Box>
      <Box color="#D0F1F5" padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="twotonedarkcircle" />
      </Box>
      <Box color="#A5DFE7" padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="twotonedarkcircle" />
      </Box>
      <Box
        color="$semantic.color.surface.container.primary"
        padding="$semantic.spacing.sm"
      >
        <IconBrand icon="airplane" size={48} variant="twotonedarkcircle" />
      </Box>
    </Layout.Stack>
  </Grid.Col>
  <Grid.Col>
    <Layout.Stack grow space={0}>
      <Box
        padding="$semantic.spacing.sm"
        color="$semantic.color.surface.container.secondary"
      >
        <Text>twotonelightcircle</Text>
      </Box>
      <Box padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="twotonelightcircle" />
      </Box>
      <Box color="#D0F1F5" padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="twotonelightcircle" />
      </Box>
      <Box color="#A5DFE7" padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="twotonelightcircle" />
      </Box>
      <Box
        color="$semantic.color.surface.container.primary"
        padding="$semantic.spacing.sm"
      >
        <IconBrand icon="airplane" size={48} variant="twotonelightcircle" />
      </Box>
    </Layout.Stack>
  </Grid.Col>
  <Grid.Col>
    <Layout.Stack grow space={0}>
      <Box
        padding="$semantic.spacing.sm"
        color="$semantic.color.surface.container.secondary"
      >
        <Text>onetone</Text>
      </Box>
      <Box padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="onetone" />
      </Box>
      <Box color="#D0F1F5" padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="onetone" />
      </Box>
      <Box color="#A5DFE7" padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="onetone" />
      </Box>
      <Box
        color="$semantic.color.surface.container.primary"
        padding="$semantic.spacing.sm"
      >
        <Layout.Space space={48} />
      </Box>
    </Layout.Stack>
  </Grid.Col>
  <Grid.Col>
    <Layout.Stack grow space={0}>
      <Box
        padding="$semantic.spacing.sm"
        color="$semantic.color.surface.container.secondary"
      >
        <Text>twotone</Text>
      </Box>
      <Box padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="twotone" />
      </Box>
      <Box color="#D0F1F5" padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="twotone" />
      </Box>
      <Box color="#A5DFE7" padding="$semantic.spacing.sm">
        <IconBrand icon="airplane" size={48} variant="twotone" />
      </Box>
      <Box
        color="$semantic.color.surface.container.primary"
        padding="$semantic.spacing.sm"
      >
        <Layout.Space space={48} />
      </Box>
    </Layout.Stack>
  </Grid.Col>
</Grid>
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="IconBrand"
  rows={[
    {
      name: 'icon',
      type: 'string',
      description: 'Name of the brand icon',
    },
    {
      name: 'variant',
      type: 'twotonedarkcircle | twotonelightcircle | twotone | onetonedarkcircle | onetone',
      description: 'The style/color variation of the brand icon',
      default: 'twotonedarkcircle',
    },
    {
      name: 'brand',
      type: 'uhc | optum | uhg',
      description:
        'indicates which brand you want your icon from. This changes the colors of the icon to match the brand you select',
    },
    {
      name: 'size',
      type: 'number | string',
      description: 'Set the size of the brand icon',
      default: '$icon-brand.sizing.md',
    },
    {
      name: 'title',
      type: 'string',
      description: 'Set the title of the icon',
    },
    {
      name: 'isScreenReadable',
      type: 'boolean',
      description:
        'Indicate whether the icon is screen readable or not. If the icon is Screen Readable, then provide a title',
      default: 'false',
    },
    {
      name: 'disableScaling',
      type: 'boolean',
      description:
        'Specifies whether the icon should scale to respect Text Size accessibility settings',
      default: 'false',
    },
    {
      name: 'maxFontSizeMultiplier',
      type: 'boolean',
      description:
        'Specifies the largest possible scale the icon can reach when `disableScaling` is false',
    },
    {
      name: 'onLoad',
      type: 'function',
      description: 'Callback function when the icon is loaded',
    },
    {
      name: 'onError',
      type: 'function',
      description: 'Callback function when the icon fails to load',
    },
    {
      name: 'fallback',
      type: 'JSX.Element',
      description: 'Fallback element to render when the icon fails to load',
    },
  ]}
/>

<Docs.ClassesTable
  of="IconBrand"
  rows={[
    {
      name: 'icon-brand-root',
      description: 'Icon brand root element',
    },
  ]}
/>

</Tab>

<Tab label="Brand Icons">

```jsx render
<h2>Brand Icons</h2>
```

<br />
Abyss uses branded iconography that is designed to aid way-finding, draw attention,
and support messaging.

The source for these design icons can be found in the [Brand Icons Library](https://brand.uhc.com/content/iconography).

<IconLibrary brand="uhc" />

</Tab>

<Tab label="Accessibility">

## Dynamic Type

Brand icons do not scale. When using IconBrand, the `disabledScaling` prop should be set to `true`.

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="IconBrand" keys={['icon-brand']} />

</Tab>
</Tabs>

---
id: icon-custom
category: Brand
title: IconCustom
description: Used to implement custom icons and adapt their properties.
design: https://www.figma.com/file/anZoHg026SyKJHWGJ7Vf4Q/Abyss-Icons?node-id=5%3A159&t=yumeSCoKoGQjs5PJ-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { IconCustom } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'IconCustom',
  inputs: [
    {
      prop: 'size',
      type: 'string',
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'light', value: 'light' },
        { label: 'lightactive', value: 'lightactive' },
      ],
    },
    {
      prop: 'icon',
      type: 'string',
    },
  ]
}

<IconCustom icon="rx" />
```

## Size

Use the `size` property to adjust the size of an icon by setting it to a specific number or token. The default size is set to 24.
Token sizes: `$xs`: 16 `$sm`: 20 `$md`: 24 `$lg`: 40 `$xl`: 48

```jsx live
<Layout.Group>
  <IconCustom icon="rx" size="$xs" />
  <IconCustom icon="rx" size={24} />
  <IconCustom icon="rx" size={48} />
</Layout.Group>
```

## Variants

Use the `variant` prop to change the style of the custom icons. The prop takes in a `light` and `dark` value, as well as
`lightactive` and `darkactive` counterparts. The default is `light`.

```jsx live
<Layout.Stack>
  <Layout.Group space={20} wrap>
    <View style={{ width: 100 }}>
      <Text>light</Text>
    </View>
    <IconCustom icon="home" variant="light" />
    <IconCustom icon="benefits" variant="light" />
    <IconCustom icon="find_care" variant="light" />
    <IconCustom icon="rx" variant="light" />
    <IconCustom icon="menu" variant="light" />
    <IconCustom icon="my_plan" variant="light" />
    <IconCustom icon="medical_benefits" variant="light" />
  </Layout.Group>
  <Layout.Group space={20} wrap>
    <View style={{ width: 100 }}>
      <Text>lightactive</Text>
    </View>
    <IconCustom icon="home" variant="lightactive" />
    <IconCustom icon="benefits" variant="lightactive" />
    <IconCustom icon="find_care" variant="lightactive" />
    <IconCustom icon="rx" variant="lightactive" />
    <IconCustom icon="menu" variant="lightactive" />
    <IconCustom icon="my_plan" variant="lightactive" />
    <IconCustom icon="medical_benefits" variant="lightactive" />
  </Layout.Group>
  <Box color="$semantic.color.surface.container.primary">
    <Layout.Stack>
      <Layout.Group space={20} wrap>
        <View style={{ width: 100 }}>
          <Text color="$semantic.color.text.body.alt">dark</Text>
        </View>
        <IconCustom icon="home" variant="dark" />
        <IconCustom icon="benefits" variant="dark" />
        <IconCustom icon="find_care" variant="dark" />
        <IconCustom icon="rx" variant="dark" />
        <IconCustom icon="menu" variant="dark" />
        <IconCustom icon="my_plan" variant="dark" />
        <IconCustom icon="medical_benefits" variant="dark" />
      </Layout.Group>
      <Layout.Group space={20} wrap>
        <View style={{ width: 100 }}>
          <Text color="$semantic.color.text.body.alt">darkactive</Text>
        </View>
        <IconCustom icon="home" variant="darkactive" />
        <IconCustom icon="benefits" variant="darkactive" />
        <IconCustom icon="find_care" variant="darkactive" />
        <IconCustom icon="rx" variant="darkactive" />
        <IconCustom icon="menu" variant="darkactive" />
        <IconCustom icon="my_plan" variant="darkactive" />
        <IconCustom icon="medical_benefits" variant="darkactive" />
      </Layout.Group>
    </Layout.Stack>
  </Box>
</Layout.Stack>
```

## Brand

Use the `brand` property to adjust which brands icons are being selected. Note that some of the icons unique to certain brands.
The default is the theme brand, then falls back to `uhc`.

```jsx live
<IconCustom icon="rx" variant="light" size="$xl" />
```

## Active

When placing an icon inside of a clickable element, the icon should be toggled between its normal and active state.

```jsx live
<Layout.Stack>
  <Pressable>
    {({ pressed }) => (
      <Layout.Stack space={-4}>
        <IconCustom icon="home" variant={pressed ? 'lightactive' : 'light'} />
        <Text
          color="$semantic.color.text.body.paragraph"
          size="$core.font-size.p.60"
        >
          Home
        </Text>
      </Layout.Stack>
    )}
  </Pressable>
</Layout.Stack>
```

## Indicator

The [indicator component](/mobile/ui/indicator) can be used as a wrapper to add a notification badge.

```jsx live
<Layout.Group space={20}>
  <Indicator>
    <IconCustom icon="home" />
  </Indicator>
  <Box color="$semantic.color.surface.container.primary">
    <Indicator>
      <IconCustom icon="home" variant="dark" />
    </Indicator>
  </Box>
</Layout.Group>
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="IconCustom"
  rows={[
    {
      name: 'icon',
      type: 'string',
      description: 'Name of the custom icon',
    },
    {
      name: 'variant',
      type: '"light" | "lightactive" | "dark" | "darkactive"',
      description: 'The style variation of the custom icon',
    },
    {
      name: 'size',
      type: 'number | string',
      description: 'Set the size of the custom icon',
      default: '$icon.sizing.md',
    },
    {
      name: 'title',
      type: 'string',
      description: 'Set the title of the icon',
    },
    {
      name: 'isScreenReadable',
      type: 'boolean',
      description:
        'Indicate whether the icon is screen readable or not. If the icon is Screen Readable, then provide a title',
    },
    {
      name: 'brand',
      type: '"uhc" | "optum"',
      description: 'The brand of the custom icon',
    },
    {
      name: 'disableScaling',
      type: 'boolean',
      description:
        'Specifies whether the icon should scale to respect Text Size accessibility settings',
    },
    {
      name: 'maxFontSizeMultiplier',
      type: 'boolean',
      description:
        'Specifies the largest possible scale the icon can reach when `disableScaling` is false',
    },
  ]}
/>

<Docs.ClassesTable
  of="IconCustom"
  rows={[
    {
      name: 'icon-custom-root',
      description: 'Icon custom root element',
    },
  ]}
/>

</Tab>

<Tab label="Custom Icons">

```jsx render
<h2>Custom Icons</h2>
```

<IconLibrary brand="uhcCustom" />

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="IconCustom" keys={['icon']} />

</Tab>
</Tabs>

---
id: illustrated-icon-brand
slug: /mobile/brand/uhc/illustrated-icon-brand
category: Brand
title: IllustratedIconBrand
description: Used to implement UHC brand illustrated icons and adapt their properties.
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { IllustratedIconBrand } from '@uhg-abyss/mobile';
```

```tsx sandbox
{
  component: 'IllustratedIconBrand',
  inputs: [
    {
      prop: 'icon',
      type: 'string',
    },
    {
      prop: 'size',
      type: 'string',
    },
    {
      prop: 'color',
      type: 'select',
      options: [
        { label: 'none', value: undefined },
        { label: 'gold', value: 'gold' },
        { label: 'orange', value: 'orange' },
        { label: 'multicolor', value: 'multicolor' },
      ]
    },
  ],
}

// Disclaimer: Not all icon/color combinations are applicable; inapplicable combinations will display as empty

<IllustratedIconBrand icon="gears_system" color="multicolor" size={400} />
```

## Size

Use the `size` property to adjust the width of the illustrated icon. The default value is `100`. The height of the illustration will scale proportionally to the width.

```tsx live
<IllustratedIconBrand icon="handshake" color="multicolor" size={300} />
```

## Color

Use the `color` property to select available illustrated icon colors. The available colors are `"gold"`, `"orange"`, and `"multicolor"`.

**Note:** Not all illustrated icons have any color variants. In such cases, omit the `color` prop; otherwise, the icon will not display.

```tsx live
<Layout.Group>
  <IllustratedIconBrand icon="health_potential" color="gold" />
  <IllustratedIconBrand icon="health_potential" color="orange" />
  <IllustratedIconBrand icon="health_potential" color="multicolor" />
</Layout.Group>
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="IllustratedIconBrand"
  rows={[
    {
      name: 'size',
      type: 'number',
      description: 'The width of the illustration',
    },
    {
      name: 'color',
      type: '"gold" | "orange" | "multicolor"',
      description:
        'The color of the illustrated icon. Applicable only to certain assets.',
    },
    {
      name: 'icon',
      type: 'string',
      description: 'The name of the illustrated icon',
    },
  ]}
/>

<Docs.ClassesTable
  of="IllustratedIconBrand"
  rows={[
    {
      name: 'illustrated-icon-brand-root',
      description: 'IllustratedIconBrand root element',
    },
  ]}
/>

</Tab>

<Tab label="Accessibility">

<h2>Screen Reader Support</h2>

Illustrated icons are intended to be used as [decorative images](https://www.w3.org/WAI/tutorials/images/decorative/) and as such, are ignored by screen readers by default. However, should a case arise in which an illustrated icon needs to be accessible, use the `accessibilityLabel` prop to provide accessible text to the image. This text should be descriptive enough to convey the meaning of the illustrated icon.

```tsx live
<IllustratedIconBrand
  icon="full_dial_high"
  size={300}
  accessibilityLabel="A dial set to the highest setting"
/>
```

</Tab>

<Tab label="Illustrated Icon Source">

```jsx render
<h2>Illustrated Icon Source</h2>
```

<br />
The source for these illustrated icons can be found in the brand libraries.
<br />
<br />
[UnitedHealthCare
Library](https://unitedhealthcare.gettyimages.com/s/3f79xfhwgtcsc8t3t79hfc9)

<br />
<br />

You can use the search functionality to find the required illustrated icons. Icons can be searched using their title or colors.

<IllustrationLibrary brand="uhc" icons />

</Tab>
</Tabs>

---
id: illustration-brand
category: Brand
title: IllustrationBrand
description: Used to implement Brand illustrations and adapt their properties.
design: 'https://www.figma.com/file/34gRQMq2NxFgeRynjqd24C/Documentation-%7C-Abyss-Mobile?type=design&node-id=1218-19509&mode=design&t=eobYuZOIhhms55Vc-0'
---

<Tabs>

<Tab label="Overview">

```jsx
import { IllustrationBrand } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'IllustrationBrand',
  inputs: [
    {
      prop: 'size',
      type: 'string',
    },
    {
      prop: 'illustration',
      type: 'string',
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: '1', value: '1' },
        { label: '2', value: '2' },
      ],
    },
    {
      prop: 'color',
      type: 'select',
      options: [
        { label: 'primary', value: 'primary' },
        { label: 'pacific', value: 'pacific' },
        { label: 'white', value: 'white' },
      ]
    },
  ]
}

// Disclaimer: not all brand color combinations or variants are applicable, and inapplicable combinations will display as empty

  <IllustrationBrand
    brand="uhc"
    size={400}
    color="primary"
    illustration="heart"
  />
```

## Brand

Use the `brand` property to adjust which brand is being selected.

```jsx live
<IllustrationBrand
  brand="uhc"
  color="white"
  illustration="calendar"
  size={300}
/>
```

## Size

Use the `size` property to adjust the size of the illustration.

```jsx live
<IllustrationBrand brand="uhc" illustration="us_map" size={300} />
```

## Color

Use the `color` property to select available illustration colors.

```jsx live
<Layout.Group wrap>
  <IllustrationBrand
    brand="uhc"
    size={300}
    color="primary"
    illustration="care"
  />
  <IllustrationBrand brand="uhc" size={300} color="white" illustration="care" />
  <IllustrationBrand
    brand="uhc"
    size={300}
    color="white"
    variant={2}
    illustration="care"
  />
  <IllustrationBrand
    brand="uhc"
    size={300}
    color="pacific"
    illustration="care"
  />
</Layout.Group>
```

## Variant

Some UHC illustrations have multiple variants of accent colors on the same background color. Use the `variant` prop to select the color combination.

```jsx live
<Layout.Group wrap>
  <IllustrationBrand
    brand="uhc"
    size={300}
    color="white"
    illustration="walking"
  />
  <IllustrationBrand
    brand="uhc"
    size={300}
    color="white"
    illustration="walking"
    variant={2}
  />
  <IllustrationBrand
    brand="uhc"
    size={300}
    color="white"
    variant={2}
    illustration="in_home_care"
  />
  <IllustrationBrand
    brand="uhc"
    size={300}
    color="white"
    illustration="in_home_care"
  />
</Layout.Group>
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="IllustrationBrand"
  rows={[
    {
      name: 'brand',
      type: '"uhc" | "optum"',
      description: 'Indicates which brand you want your illustration from',
    },
    {
      name: 'size',
      type: 'number | string',
      description: 'Set the size of the illustration',
    },
    {
      name: 'color',
      type: '"white"| "primary" | "pacific"',
      description: 'Set color option of the illustration',
    },
    {
      name: 'variant',
      type: '1 | 2',
      description:
        'For illustrations with variants on the same background color. Applicable only to UHC illustrations',
    },
    {
      name: 'illustration',
      type: 'string',
      description: 'The name of the illustration',
    },
    {
      name: 'title',
      type: 'string',
      description: 'Set accessibilityLabel of the image',
    },
  ]}
/>

<Docs.ClassesTable
  of="IllustrationBrand"
  rows={[
    {
      name: 'illustration-brand-root',
      description: 'IllustrationBrand root element',
    },
  ]}
/>

</Tab>

<Tab label="Illustration Source">

```jsx render
<h2>Illustration Source</h2>
```

<br />
The source for these illustrations can be found in the brand libraries.
<br />
<br />
[UnitedHealthCare
Library](https://unitedhealthcare.gettyimages.com/s/3f79xfhwgtcsc8t3t79hfc9) <br />
[Optum Library](https://brand.optum.com/content/illustration-library-resources)

<br />
<br />
You can use the search functionality to find the required illustration.
Illustrations can be searched using their title, variants or colors.
<br />
<br />
<IllustrationLibrary brand="uhc" />

</Tab>
</Tabs>

---
id: tokens
title: Tokens
category: Brand
---

<Tabs>

<Tab label="Overview">

## Overview

Design tokens are the visual sub-atom variables of a design system. They contain UI data such as colors, border width, elevation, and even motion.

They are used in the place of hard-coded values such as hex codes or pixels to maintain scalability and consistency.

Think about them as recipe ingredients - you could add chocolate to a salad, but it won't be very tasty.
You would only consider what is a standard salad ingredient - it's the same with tokens, they are a limited set of options that make sense for our product.

**Further reading:** <br />
[Nathan Curtis on Tokens in design systems](https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421).

### Token Hierarchy

Abyss uses a 3-tier token system:

- Core tier - the WHAT or the OPTIONS: contains primitive values, with no specific meaning - the name of the token and its raw value (HEX code for colors, and numbers for borders, corner radius, opacity, etc.)
- Semantic tier - the HOW or the DECISIONS: communicates design decisions on the exact usage of a Core token system-wide.

### Using Tokens

Before you can consume Abyss tokens, your project must be configured with our [themeProvider](/mobile/ui/theme-provider). This will allow you to access the tokens in your project.

Tokens are used in place of hard-coded values such as hex codes or pixels. To use a token, you can reference it in your code using the `$` symbol followed by the token name.

All Abyss components can accept tokens, when they are passed in using the `style`, or [styles](/mobile/developers/style-customization) prop. Non-Abyss components can use the [tokenize](/mobile/tools/tokenize) function to accept tokens.

#### Styled Function

To create a `View` component with a background color of `$core.color.brand.100`, you can leverage our [styled function](/mobile/tools/styled) and do the following:

```jsx sandbox
() => {
  const Example = styled('View', {
    backgroundColor: '$core.color.brand.100',
    height: 100,
    width: 100,
  });

  return <Example />;
};
```

#### useToken hook

Alternatively, you can use our [useToken Hook](/mobile/hooks/use-token) to directly access the value of a token. This is useful when you need the value of multiple tokens.

```jsx sandbox
() => {
  const getColorToken = useToken('colors');
  const green = getColorToken('$core.color.green.100');
  const red = getColorToken('$core.color.red.100');

  return (
    <>
      <View style={{ backgroundColor: green, height: 50, width: 100 }} />
      <View style={{ backgroundColor: red, height: 50, width: 100 }} />
    </>
  );
};
```

#### Tokenize Function

Our [tokenize](/mobile/tools/tokenize) function is useful for mapping any non-Abyss component's props to accept Abyss tokens.

```jsx live
const TokenizedTouchableHighlight = tokenize(TouchableHighlight, {
  underlayColor: 'colors',
});

render(() => {
  return (
    <TokenizedTouchableHighlight
      underlayColor="$semantic.color.surface.container.emphasis.1"
      style={{ padding: 8 }}
      onPress={() => {}}
      accessibilityRole="button"
    >
      <Text size="$core.font-size.p.100">Press Me</Text>
    </TokenizedTouchableHighlight>
  );
});
```

#### Useful Links

- [Custom Theme Tutorial](/mobile/developers/tutorials/custom-themes/): This tutorial will guide you through creating a custom Abyss theme for your project.
- [createTheme Function](/mobile/tools/create-theme): This tool allows you to create and modify themes to fit your design needs.
- [Theme Provider](/mobile/ui/theme-provider): Provider that passes the theme object down the component tree giving your project access to Abyss tokens.
- [styled Function](/mobile/tools/styled): Tool that allows you to create styled components.
- [useToken Hook](/mobile/hooks/use-token): Hook that allows you to access the value of a token in your project.
- [tokenize](/mobile/tools/tokenize): Function that allows you to map a component's props to accept Abyss tokens.

</Tab>

<Tab label="Core Tokens">

## Core Tokens

Below is a list of core tokens used throughout Abyss, These are split into the categories `color`, `border-width`, `border-radius`, `opacity`, `spacing`, `sizing`.

_**Note:** Click on the token row to copy the token to your clipboard._

#### Border Width Tokens

`border-width` tokens are used to define the `borderWidth` on components.

```jsx
const Example = styled('View', {
  borderWidth: '$core.border-width.md',
});
```

<Docs.CoreTokenTable type="borderWidths" tier="core" />

#### Border Radius Tokens

`border-radius` tokens are used to define the `borderRadius` on components.

```jsx
const Example = styled('View', {
  borderRadius: '$core.border-radius.md',
});
```

<Docs.CoreTokenTable type="radii" tier="core" />

---

#### Opacity Tokens

`opacity` tokens are used to define the opacity of a component.

```jsx
const Example = styled('View', {
  opacity: '$core.opacity.md',
});
```

<Docs.CoreTokenTable type="opacities" tier="core" />

---

#### Spacing Tokens

`spacing` tokens define the space between components. Generally, these are used for the `padding`, `margin`, or `gap` of components.

```jsx
const Example = styled('View', {
  padding: '$core.spacing.200',
});
```

<Docs.CoreTokenTable type="space" tier="core" />

---

#### Sizing Tokens

`sizing` tokens define the size of components. Generally, these will be used to define the `width` or `height`.

```jsx
const Example = styled('View', {
  width: '$core.sizing.600',
  height: '$core.sizing.600',
});
```

<Docs.CoreTokenTable type="sizes" tier="core" />

---

#### Color Tokens

`color` tokens are used to define the color of components.

```jsx
const Example = styled('View', {
  backgroundColor: '$core.color.brand.100',
});
```

<Docs.CoreTokenTable type="colors" tier="core" />

</Tab>

<Tab label="Semantic Tokens">
<h2>Semantic tokens</h2>

**Note:** Click on the desired token to copy it to your clipboard.

<Docs.SemanticTokensTable />

</Tab>
</Tabs>

---
id: typography
title: Typography
category: Brand
description: Typography for UHC brands
---

## Overview

Typography is the art and technique of arranging type to make written language legible. In the Abyss library, [Heading](/mobile/ui/heading) and [Text](/mobile/ui/text) dive into the detail behind text formatting for UHC branding. More in depth guidance on typography can be found below and in the [UHC Brand Page](https://brand.uhc.com/typography).

## Setting Global Fonts

Fonts can be set globally throughout an application by using the <a href='/mobile/tools/create-theme'>createTheme</a> function in conjunction with the <a href='/mobile/ui/theme-provider'>ThemeProvider</a> component.
The second argument of createTheme function allows you to extend the base theme. Below is an example of setting a token named `customFont`.

```jsx
import { ThemeProvider } from '@uhg-abyss/mobile';
import { createTheme } from '@uhg-abyss/mobile';

const theme = createTheme('uhc', {
  theme: {
    fonts: {
      customFont: 'RobotoFlex',
    },
  },
});

const App = () => {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
};
```

This would allow you to consume the font as a token globally.

```jsx
<Text fontFamily="$customFont">Filler Text</Text>
```

There are 2 tokens that are reserved for consumer usage: `$text` and `$heading`. Setting the tokens for these two will set the default font for the Text and Heading components globally.
If no font is set, the Text and Heading components will default to the system font.

```jsx
import { ThemeProvider } from '@uhg-abyss/mobile';
import { createTheme } from '@uhg-abyss/mobile';

const theme = createTheme('uhc', {
  theme: {
    fonts: {
      heading: 'UHCSerif',
      text: 'UHCSans',
    },
  },
});

const App = () => {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
};
```

## Headings

Headings identify chunks of related content on a page and establish the hierarchy showing how those chunks of content relate to each other. If someone reads only the headings on a page, they will get a general understanding of the information presented.

HTML defines six heading levels: H1 to H6.

H1 identifies an entire page, or overall topic, and is the most important level. There should only be 1 H1 per page.

Find further documentation in the [Heading](/mobile/ui/heading) component.

```jsx render
<Layout.Stack grow>
  <Docs.TypeTileMobile type="heading1" fontWeight="600">
    <Heading>H | 1 | SemiBold</Heading>
  </Docs.TypeTileMobile>
  <Docs.TypeTileMobile type="heading2" fontWeight="600">
    <Heading offset={2}>H | 2 | SemiBold</Heading>
  </Docs.TypeTileMobile>
  <Docs.TypeTileMobile type="heading3" fontWeight="600">
    <Heading offset={3}>H | 3 | SemiBold</Heading>
  </Docs.TypeTileMobile>
  <Docs.TypeTileMobile type="heading4" fontWeight="600">
    <Heading offset={4}>H | 4 | SemiBold</Heading>
  </Docs.TypeTileMobile>
  <Docs.TypeTileMobile type="heading5" fontWeight="700">
    <Heading offset={5}>H | 5 | Bold</Heading>
  </Docs.TypeTileMobile>
  <Docs.TypeTileMobile type="heading6" fontWeight="900">
    <Heading offset={6}>H | 6 | Heavy</Heading>
  </Docs.TypeTileMobile>
</Layout.Stack>
```

#### <b>Recommendations</b>

<ul>
  <li>
    <b>Always</b> have an H1 heading for the page title
  </li>
  <li>Keep headings scannable</li>
  <li>Headings are always sentence-case</li>
  <li>Do not use punctuation in headings</li>
</ul>

<b>
  IMPORTANT: For way-finding, every page must have an H1 available (especially
  for screen readers) that describes the main purpose of the page such as
  “Claims & Benefits”
</b>

---

## Body Copy Text

SF Pro is our primary iOS typeface and Roboto is our primary Android typeface for body copy. All weights are available in italics.

Regular copy is the default style for the majority of text on pages. Small copy is the secondary style for context on pages and is used for secondary text styles, as well as footnotes and legal messaging or less important content. Find further documentation in the [Text Component](/web/ui/text).

```jsx render
() => {
  const lorem =
    'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.';

  return (
    <Layout.Stack grow>
      <Docs.TypeTileMobile size="lg" fontWeight="600">
        <Web.Text asElement="div">P | LG | SemiBold</Web.Text>
        <Text
          size="$core.font-size.p.100"
          fontWeight="$core.font-weight.semibold"
        >
          {lorem}
        </Text>
      </Docs.TypeTileMobile>
      <Docs.TypeTileMobile size="lg" fontWeight="400">
        <Web.Text asElement="div">P | LG | Regular</Web.Text>
        <Text
          size="$core.font-size.p.100"
          fontWeight="$core.font-weight.regular"
        >
          {lorem}
        </Text>
      </Docs.TypeTileMobile>
      <Docs.TypeTileMobile size="md" fontWeight="700">
        <Web.Text asElement="div">P | MD | Bold</Web.Text>
        <Text size="$core.font-size.p.80" fontWeight="$core.font-weight.bold">
          {lorem}
        </Text>
      </Docs.TypeTileMobile>
      <Docs.TypeTileMobile size="md" fontWeight="600">
        <Web.Text asElement="div">P | MD | SemiBold</Web.Text>
        <Text
          size="$core.font-size.p.80"
          fontWeight="$core.font-weight.semibold"
        >
          {lorem}
        </Text>
      </Docs.TypeTileMobile>
      <Docs.TypeTileMobile size="md" fontWeight="400">
        <Web.Text asElement="div">P | MD | Regular</Web.Text>
        <Text
          size="$core.font-size.p.80"
          fontWeight="$core.font-weight.regular"
        >
          {lorem}
        </Text>
      </Docs.TypeTileMobile>
      <Docs.TypeTileMobile size="sm" fontWeight="900">
        <Web.Text asElement="div">P | SM | Heavy</Web.Text>
        <Text size="$core.font-size.p.60" fontWeight="$core.font-weight.heavy">
          {lorem}
        </Text>
      </Docs.TypeTileMobile>
      <Docs.TypeTileMobile size="sm" fontWeight="700">
        <Web.Text asElement="div">P | SM | Bold</Web.Text>
        <Text size="$core.font-size.p.60" fontWeight="$core.font-weight.bold">
          {lorem}
        </Text>
      </Docs.TypeTileMobile>
      <Docs.TypeTileMobile size="sm" fontWeight="600">
        <Web.Text asElement="div">P | SM | SemiBold</Web.Text>
        <Text
          size="$core.font-size.p.60"
          fontWeight="$core.font-weight.semibold"
        >
          {lorem}
        </Text>
      </Docs.TypeTileMobile>
      <Docs.TypeTileMobile size="sm" fontWeight="400">
        <Web.Text asElement="div">P | SM | Regular</Web.Text>
        <Text
          size="$core.font-size.p.60"
          fontWeight="$core.font-weight.regular"
        >
          {lorem}
        </Text>
      </Docs.TypeTileMobile>
      <Docs.TypeTileMobile size="sm" fontWeight="700">
        <Web.Text asElement="div">P | XS | Bold</Web.Text>
        <Text size="$core.font-size.p.40" fontWeight="$core.font-weight.bold">
          {lorem}
        </Text>
      </Docs.TypeTileMobile>
      <Docs.TypeTileMobile size="xs" fontWeight="600">
        <Web.Text asElement="div">P | XS | SemiBold</Web.Text>
        <Text
          size="$core.font-size.p.40"
          fontWeight="$core.font-weight.semibold"
        >
          {lorem}
        </Text>
      </Docs.TypeTileMobile>
      <Docs.TypeTileMobile size="xs" fontWeight="500">
        <Web.Text asElement="div">P | XS | Medium</Web.Text>
        <Text size="$core.font-size.p.40" fontWeight="$core.font-weight.medium">
          {lorem}
        </Text>
      </Docs.TypeTileMobile>
      <Docs.TypeTileMobile size="2xs" fontWeight="600">
        <Web.Text asElement="div">P | 2XS | SemiBold</Web.Text>
        <Text
          size="$core.font-size.p.20"
          fontWeight="$core.font-weight.semibold"
        >
          {lorem}
        </Text>
      </Docs.TypeTileMobile>
      <Docs.TypeTileMobile size="2xs" fontWeight="500">
        <Web.Text asElement="div">P | 2XS | Medium</Web.Text>
        <Text size="$core.font-size.p.20" fontWeight="$core.font-weight.medium">
          {lorem}
        </Text>
      </Docs.TypeTileMobile>
    </Layout.Stack>
  );
};
```

---
id: brandmark
category: Brand
title: Brandmark
description: Logos/Brandmarks for UHG brands.
design: 'https://www.figma.com/file/tk08Md4NBBVUPNHQYthmqp/Abyss-Web?type=design&node-id=0-21&mode=design&t=uWtmzWwvT2Kv5MMG-0'
---

<Tabs>

<Tab label="Overview">

```jsx
import { Brandmark } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Brandmark',
  inputs: [
    {
      prop: 'size',
      type: 'string',
      default: '$brandmark.sizing.lg'
    },
    {
      prop: 'affiliate',
      type: 'select',
      options: [
        { label: 'uhg', value: 'uhg' },
      ],
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'lockup', value: 'lockup' },
      ]
    },
    {
      prop: 'color',
      type: 'select',
      options: [
        { label: 'blue', value: 'blue' },
        { label: 'black', value: 'black' },
        { label: 'white', value: 'white' },
      ]
    },
  ]
}

// Disclaimer: not all affiliate variant/color combinations are applicable, and inapplicable combinations will display as empty
<Box color="$semantic.color.surface.container.primary" style={{ justifyContent: 'center', alignItems: 'center' }}>
  <Brandmark
    brand="uhg"
    size="$lg"
    affiliate="uhg"
    variant="lockup"
    color="white"
  />
</Box>
```

## Brand

Use the `brand` property to adjust which brand is being selected.

```jsx live
<Layout.Group>
  <Box color="$semantic.color.surface.container.secondary" padding={50}>
    <Brandmark
      brand="uhg"
      size="$lg"
      affiliate="uhg"
      variant="lockup"
      color="blue"
    />
  </Box>
</Layout.Group>
```

## Size

Use the `size` property to adjust the size of the brandmark.

```jsx live
<Layout.Group>
  <Box color="$semantic.color.surface.container.secondary" padding={50}>
    <Brandmark
      brand="uhg"
      size="$sm"
      affiliate="uhg"
      variant="lockup"
      color="blue"
    />
  </Box>
  <Box color="$semantic.color.surface.container.secondary" padding={50}>
    <Brandmark
      brand="uhg"
      size="$lg"
      affiliate="uhg"
      variant="lockup"
      color="blue"
    />
  </Box>
</Layout.Group>
```

## Variant

Use the `variant` property to select the required brandmark variants.

```jsx live
<Layout.Stack>
  <Box color="$semantic.color.surface.container.primary" padding={50}>
    <Brandmark
      brand="uhg"
      size="$lg"
      affiliate="uhg"
      variant="lockup"
      color="white"
    />
  </Box>
</Layout.Stack>
```

## Color

Use the `color` property to select available brandmark colors.

```jsx live
<Layout.Stack>
  <Box color="$semantic.color.surface.container.primary" padding={50}>
    <Brandmark
      brand="uhg"
      size="$lg"
      affiliate="uhg"
      variant="lockup"
      color="white"
    />
  </Box>
  <Box color="$semantic.color.surface.container.secondary" padding={50}>
    <Brandmark
      brand="uhg"
      size="$lg"
      affiliate="uhg"
      variant="lockup"
      color="black"
    />
  </Box>
</Layout.Stack>
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Brandmark"
  rows={[
    {
      name: 'brand',
      type: 'uhg',
      description: 'Indicates which brand you want your brandmark from',
    },
    {
      name: 'size',
      type: 'number | string',
      description: 'Set the size of the brandmark',
    },
    {
      name: 'affiliate',
      type: 'uhg',
      description: 'Indicates the brandmark affiliate',
    },
    {
      name: 'variant',
      type: 'lockup',
      description: 'Indicates the brandmark variant',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Set color option of the brandmark',
    },
  ]}
/>

<Docs.ClassesTable
  of="Brandmark"
  rows={[
    {
      name: 'brandmark',
      description: 'Brandmark root element',
    },
  ]}
/>

</Tab>

<Tab label="Brandmarks">

```jsx render
<h2>Brandmarks</h2>
```

<br />

You can use the search functionality to find the required brandmark. Brandmarks can be searched using their affiliates, variants or colors.

<BrandmarkLibrary brand="uhg" />

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="Brandmark" keys={['brandmark']} />

</Tab>
</Tabs>

---
id: flat-list
category: Core
title: FlatList
description: A performant interface for rendering basic flat lists.
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

## Usage

The `FlatList` component is a high-performance list component that efficiently renders only the items currently
visible on the screen, regardless of the size of the data set. It is ideal for rendering basic, flat lists and
supports the most handy features like:

- Full tokenization support.
- Fully cross-platform.
- Optional horizontal mode.
- Configurable viewability callbacks.
- Header support.
- Footer support.
- Separator support.
- Pull to Refresh.
- Scroll loading.
- ScrollToIndex support.
- Multiple column support.

_If you need section support, consider using the [SectionList](/mobile/core/section-list) component._

```jsx live
const data = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'One',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Two',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Three',
  },
  {
    id: '9b7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'Four',
  },
  {
    id: '8ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Five',
  },
  {
    id: '78694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Six',
  },
  {
    id: '6b7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'Seven',
  },
  {
    id: '5ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Eight',
  },
];

const ItemWrapper = styled('View', {
  width: '50%',
  padding: '$semantic.spacing.lg',
});

const ItemContainer = styled('View', {
  backgroundColor: '$semantic.color.surface.container.emphasis.3',
  padding: '$semantic.spacing.lg',
  borderWidth: 4,
  borderColor: '$semantic.color.border.status.saturated.info',
  alignItems: 'center',
  borderRadius: '$semantic.border-radius.container.main',
});

const Category = styled('View', {
  height: 50,
  alignItems: 'center',
  justifyContent: 'center',
});

const Item = ({ title }) => {
  return (
    <ItemWrapper>
      <ItemContainer>
        <Text
          color="$semantic.color.text.label.status.info"
          size="$core.font-size.h.40"
          fontWeight="$core.font-weight.bold"
          fontFamily="$heading"
        >
          {title}
        </Text>
      </ItemContainer>
    </ItemWrapper>
  );
};

render(() => {
  return (
    <View style={{ height: 350 }}>
      <FlatList
        data={data}
        renderItem={({ item }) => {
          return <Item title={item.title} />;
        }}
        keyExtractor={(item) => {
          return item.id;
        }}
        numColumns={2}
        ListHeaderComponent={
          <Category>
            <Text
              color="$semantic.color.text.body.alt"
              size="$core.font-size.h.80"
              fontWeight="$core.font-weight.bold"
              fontFamily="$heading"
            >
              FlatList Header
            </Text>
          </Category>
        }
        ListHeaderComponentStyle={{
          backgroundColor: '$semantic.color.surface.container.primary',
          borderColor: '$semantic.color.border.status.saturated.info',
          borderWidth: 6,
          marginHorizontal: '$semantic.spacing.lg',
          borderRadius: '$semantic.border-radius.container.main',
        }}
        columnWrapperStyle={{
          borderWidth: 6,
          borderColor: '$semantic.color.border.status.saturated.info',
          marginVertical: '$semantic.spacing.xs',
          backgroundColor: '$semantic.color.surface.container.primary',
          borderRadius: '$semantic.border-radius.container.main',
        }}
        contentContainerStyle={{
          backgroundColor: '$semantic.color.surface.container.tertiary',
          padding: '$semantic.spacing.lg',
        }}
        ListFooterComponentStyle={{
          backgroundColor: '$semantic.color.surface.container.primary',
          borderColor: '$semantic.color.border.status.saturated.info',
          borderWidth: 6,
          marginHorizontal: '$semantic.spacing.lg',
          borderRadius: '$semantic.border-radius.container.main',
        }}
        ListFooterComponent={
          <Category>
            <Text
              color="$semantic.color.text.body.alt"
              size="$core.font-size.h.80"
              fontWeight="$core.font-weight.bold"
              fontFamily="$heading"
            >
              FlatList Footer
            </Text>
          </Category>
        }
      />
    </View>
  );
});
```

### Best Practices

- **Use Memoization:** Use [React.memo()](https://react.dev/reference/react/memo) to avoid unnecessary re-renders of list items.
- **Pagination:** For large datasets, implement pagination with `onEndReached` to load additional data dynamically.
- **Key Extraction:** Ensure `keyExtractor` returns a unique and stable key to avoid performance degradation caused by reordering or re-rendering items unnecessarily.

## Considerations

_`FlatList` is a convenience wrapper around [VirtualizedList](/mobile/core/virtualized-list), and thus inherits its props (as well as those of [ScrollView](/mobile/core/scroll-view)) that aren't explicitly listed here, along with the following caveats:_

- **Internal State:** Internal state is not preserved when content scrolls out of the render window. Ensure all your data is captured in the item data or external stores like Flux, Redux, or Relay.
- **Prop Updates:** This is a `PureComponent` meaning it will not re-render if props remain shallow-equal. Make sure that everything your `renderItem` function depends on is passed as a prop (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on changes. This includes the `data` prop and parent component state.
- **Item Rendering:** In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application.
- **Key Management:** By default, the list looks for a `key` prop on each item and uses that for the React key. Alternatively, you can provide a custom `keyExtractor` prop.

### Accessibility Considerations

- **Screen Reader Support:** Ensure that list items have accessible labels and descriptions, especially if they contain interactive elements.
- **Focus Management:** When dynamically loading data, manage focus properly so users can navigate the list without losing track of their position.

### Performance Considerations

- **Windowing:** Use `initialNumToRender` and `maxToRenderPerBatch` props to control how many items are rendered initially and in each batch to avoid overloading the UI with too many items at once.
- **Recycling Cells:** Consider using `CellRenderComponent` to recycle rendered items and improve rendering performance for large lists.
- **Avoid Excessive Renders:** Leverage `shouldComponentUpdate` to prevent unnecessary renders of list items.

</Tab>

<Tab label="Integration">

<Docs.ClassesTable
  of="FlatList"
  rows={[
    {
      name: 'flat-list-root',
      description: 'FlatList root element',
    },
  ]}
/>

<Docs.PropsTable
  of="FlatList"
  inherits={[
    {
      name: 'React Native - FlatList',
      link: 'https://reactnative.dev/docs/flatlist#props',
    },
  ]}
  rows={[
    {
      name: 'style',
      type: 'Abyss.Style<"FlatList">',
      description:
        'Object or array of objects defining the style of the FlatList component with design tokens',
    },
    {
      name: 'hitSlop',
      type: 'Insets',
      description:
        'This defines how far a touch event can start away from the FlatList',
    },
    {
      name: 'contentContainerStyle',
      type: 'Abyss.Style<"View">',
      description:
        'Object or array of objects defining the style of the content container within the FlatList component with design tokens. These styles will be applied to the FlatList content container which wraps all of the child views',
    },
    {
      name: 'contentInset',
      type: 'Insets',
      description:
        'The amount by which the FlatList content is inset from the edges of the FlatList',
    },
    {
      name: 'endFillColor',
      type: 'Abyss.Color',
      description:
        'The color of the background of the list when there are not enough items to fill the content',
    },
    {
      name: 'ListFooterComponentStyle',
      type: 'Abyss.Style<"View">',
      description:
        'Styling for internal View for ListFooterComponent. Accepts an object or array of objects which defines the style of the ListFooterComponent within the FlatList component with design tokens',
    },
    {
      name: 'ListHeaderComponentStyle',
      type: 'Abyss.Style<"View">',
      description:
        'Styling for internal View for ListHeaderComponent. Accepts an object or array of objects which defines the style of the ListFooterComponent within the FlatList component with design tokens',
    },
    {
      name: 'columnWrapperStyle',
      type: 'Abyss.Style<"View">',
      description:
        'Optional custom style for multi-item rows generated when `numColumns > 1`. Accepts an object or array of objects which defines the style of the column wrapper within the FlatList component with design tokens',
    },
  ]}
/>

</Tab>
</Tabs>

---
id: image
category: Core
title: Image
description: Displays different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll.
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { Image } from '@uhg-abyss/mobile';
```

## Usage

The Image component is a fundamental UI element that displays images in your application.
This component is a customized extension of React Native's `Image` component, which is enhanced to
fit seamlessly within our design system. It supports various image formats, allows for custom
styling, and includes optimizations for loading performance.

```jsx render
<Web.Alert variant="warning" dismissible={false}>
  Note that for network and data images, you will need to manually specify the
  dimensions of your image!
</Web.Alert>
```

<br />

```jsx live-expanded
<Layout.Group>
  <Image
    accessibilityLabel="Designer Toolkit"
    source={{
      uri: 'https://abyss.uhc.com/img/graphics/designer_toolkit/toolkit_logos.png',
    }}
    style={{ width: 100, height: 100 }}
  />
  <Image
    accessibilityLabel="Abyss"
    source={{
      uri: 'data:image/png;base64,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9Yu+r7rOasMnd28AfnclBn4HkKuP+7AcF3rtTdFyxBjOD2k489A07nt4P57973Nw7UMR180/vEUEIfX1MrfAU+U9fayvf5GRTrUwnl+pRyMupqu2Q63Z/bwygTysQl5EvTDz++VWDUJAnG44qgIpztT3cFXBoeaOlsOJaPzpEUPsArjxD33mbfpPTkLqjB9ux+VndqCrw4udfhFbX4McuZhekxy6hAjBwwAehiWO/OVAHKPdvSlMhgCI0ae2fLbrw7/qezYcjjlrlq5oikbjy9Pd+70r15106aGB6LJ4Xx8HPc2JDmetYZgCMzSSP/JE83EY7FaLcmSfDwXWEJuPM+GYpcjxIKLERIE39LQyCY+fVnfOo4sanfu37xy4z7d0RbzGw+8bn4yPLDz37PQdVwaj4lnfp5QXMHKgG38PtOGpT6x7TYoVM9G/BqBtVDDAjAGfuhWf/lU3TUxNT1NDm/7wj18/9uMb9+1hE4PcurNW3j34aJ83PjxGnG6H1LDxrCsHDxyZZ4z2EqKrqKrxN0vB2vVTkaRAU0nLlmzoeRuyHbR2IGedoHgBEERAlMG5Paj2uw09PLktGo4NM28AYvsCtnhha1/vE4/dnuQ9mq9zAdu4oTq+fzA9EVi3id50TVB/0zv/QOPj43jXX+KgF6xD6xfPxB2E4I4T3dEniP7lAF1AGXDfbfvTWy2oAAAAmUlEQVTqgXuuo3p4UjU1Db9489r+TzOG777Hj2XLfIS6qw8NDY4L4AXA0HD6FZe2hOWaMyN7e0VteACIhIBk1Io5l92KZ0D+/JctuAufOTLm9gH+GghNrViwqlMPKqEn7/u/vwxBdIDz16B28VKjvqku+ZS4lN3wfuA/CIHndTdBGRvGr58JIvznd+PxP+frP/ilE92pJ5b+PxTHEEE1XKqDAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE5LTA2LTMwVDE5OjU0OjM0KzAwOjAwArKJzgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOS0wNi0zMFQxOTo1NDozNCswMDowMHPvMXIAAABGdEVYdHNvZnR3YXJlAEltYWdlTWFnaWNrIDYuNy44LTkgMjAxNC0wNS0xMiBRMTYgaHR0cDovL3d3dy5pbWFnZW1hZ2ljay5vcmfchu0AAAAAGHRFWHRUaHVtYjo6RG9jdW1lbnQ6OlBhZ2VzADGn/7svAAAAGHRFWHRUaHVtYjo6SW1hZ2U6OmhlaWdodAAxOTIPAHKFAAAAF3RFWHRUaHVtYjo6SW1hZ2U6OldpZHRoADE5MtOsIQgAAAAZdEVYdFRodW1iOjpNaW1ldHlwZQBpbWFnZS9wbmc/slZOAAAAF3RFWHRUaHVtYjo6TVRpbWUAMTU2MTkyNDQ3NMYSLmgAAAAPdEVYdFRodW1iOjpTaXplADBCQpSiPuwAAABWdEVYdFRodW1iOjpVUkkAZmlsZTovLy9tbnRsb2cvZmF2aWNvbnMvMjAxOS0wNi0zMC84N2I2MjY4MzIwN2RiZGU4M2I0NDcxZTBmODg5M2ExYS5pY28ucG5nR/8IJgAAAABJRU5ErkJggg==',
    }}
    style={{ width: 100, height: 100 }}
  />
</Layout.Group>
```

You can also use the `style` prop with custom design tokens to style the image.

```jsx live
<View>
  <Image
    accessibilityLabel="React Native"
    source={{
      uri: 'https://reactnative.dev/img/tiny_logo.png',
    }}
    style={{
      width: 100,
      height: 100,
      backgroundColor: '$semantic.color.surface.container.primary',
      margin: '$semantic.spacing.lg',
      borderWidth: 5,
      borderColor: '$semantic.color.border.interactive.buttons.active.alt',
      borderRadius: 12,
    }}
  />
</View>
```

## GIF and WebP support on Android

When building your own native code, GIF and WebP are not supported by default on Android.

You will need to add some optional modules in `android/app/build.gradle`, depending on the needs of your app.

```
dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  implementation 'com.facebook.fresco:animated-base-support:1.3.0'

  // For animated GIF support
  implementation 'com.facebook.fresco:animated-gif:3.1.3'

  // For WebP support, including animated WebP
  implementation 'com.facebook.fresco:animated-webp:3.1.3'
  implementation 'com.facebook.fresco:webpsupport:3.1.3'

  // For WebP support, without animations
  implementation 'com.facebook.fresco:webpsupport:3.1.3'
}
```

## Best Practices

- **Use Accessibility Label:** Provide meaningful accessibility labels for accessibility. This is especially important for images that convey important information.
- **Optimize Images:** Use appropriately sized images to reduce load times and improve performance. Compress images and use formats that balance quality and file size.
- **Minimize Re-Renders:** Avoid unnecessary re-renders of the Image component, especially for large or high-resolution images.

</Tab>

<Tab label="Integration">

<Docs.ClassesTable
  of="Image"
  rows={[{ name: 'image-root', description: 'Image root element' }]}
/>

<Docs.PropsTable
  of="Image"
  inherits={[
    {
      name: 'React Native - Image',
      link: 'https://reactnative.dev/docs/image#props',
    },
  ]}
  rows={[
    {
      name: 'style',
      type: 'Abyss.Style<"Image">',
      description:
        'Object or array of objects defining the style of the Image component with design tokens.',
    },
    {
      name: 'capInsets',
      type: 'Insets',
      description:
        'When the image is resized, the corners of the size specified by `capInsets` will stay a fixed size, but the center content and borders of the image will not be stretched.',
    },
    {
      name: 'height',
      type: 'Abyss.Size',
      description: 'Height of the image.',
    },
    {
      name: 'width',
      type: 'Abyss.Size',
      description: 'Width of the image.',
    },
    {
      name: 'tintColor',
      type: 'Abyss.Color',
      description:
        'Changes the color of all non-transparent pixels to the `tintColor`.',
    },
  ]}
/>

</Tab>
</Tabs>

---
id: image-background
category: Core
title: ImageBackground
description: Display an image as the background of another component.
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { ImageBackground } from '@uhg-abyss/mobile';
```

## Usage

A common feature request from developers familiar with the web is a `background-image`. To handle this use case, you can use the
`ImageBackground` component, which has the same props as `Image`, and add whatever children to it you would like to layer on top of it.

The `ImageBackground` component is a specialized container that displays an image as the background of a view.
This component is an enhancement of React Native's core `ImageBackground`, tailored to integrate seamlessly with our design system.

## Example

```jsx live
<View style={{ height: 500 }}>
  <ImageBackground
    source="https://legacy.reactjs.org/logo-og.png"
    resizeMode="cover"
    style={{ flex: 1, justifyContent: 'center' }}
  >
    <Text
      style={{
        color: 'white',
        fontSize: 42,
        lineHeight: 84,
        fontWeight: 'bold',
        textAlign: 'center',
        backgroundColor: '#000000c0',
      }}
    >
      Inside
    </Text>
  </ImageBackground>
</View>
```

## Resize Mode

The `resizeMode` prop controls how the image is resized within the bounds set by the `style` prop. It can be one of the following values:

```jsx live
() => {
  const [mode, setMode] = useState('cover');
  const changeMode = (newMode) => {
    return () => setMode(newMode);
  };

  const modes = ['cover', 'contain', 'stretch', 'repeat', 'center'];

  return (
    <React.Fragment>
      <View style={{ height: 500 }}>
        <ImageBackground
          source={{ uri: 'https://abyss.uhc.com/img/logo.svg' }}
          resizeMode={mode}
          style={{
            padding: '$semantic.spacing.lg',
            flex: 1,
          }}
          imageStyle={{
            marginBottom: '$semantic.spacing.lg',
            backgroundColor:
              '$semantic.color.surface.container.status.info.tint',
          }}
        >
          <Text
            style={{
              top: '20%',
              color: '$semantic.color.text.body.alt',
              fontSize: 36,
              lineHeight: 72,
              fontWeight: 'bold',
              textAlign: 'center',
              marginBottom: '$semantic.spacing.lg',
              backgroundColor: '#000000c0',
            }}
          >
            Abyss
          </Text>
        </ImageBackground>
      </View>
      <Layout.Group>
        {modes.map((m) => {
          return (
            <Button
              styles={{
                'abyss-button-root': [
                  { marginHorizontal: '$semantic.spacing.xs', marginTop: 2 },
                  mode === m && {
                    backgroundColor:
                      '$semantic.color.surface.interactive.standards.active.tertiary',
                  },
                ],
                'abyss-button-label': { textTransform: 'capitalize' },
              }}
              rounded
              key={m}
              onPress={changeMode(m)}
              size="small"
            >
              {m}
            </Button>
          );
        })}
      </Layout.Group>
    </React.Fragment>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.ClassesTable
  of="ImageBackground"
  rows={[
    {
      name: 'image-background-root',
      description: 'ImageBackground root element',
    },
  ]}
/>

<Docs.PropsTable
  of="ImageBackground"
  inherits={[
    {
      name: 'React Native - ImageBackground',
      link: 'https://reactnative.dev/docs/imagebackground#props',
    },
  ]}
  rows={[
    {
      name: 'style',
      type: 'Abyss.Style<"ImageBackground">',
      description:
        'Object or array of objects defining the style of the ImageBackground component with design tokens.',
    },
    {
      name: 'capInsets',
      type: 'Insets',
      description:
        'When the image is resized, the corners of the size specified by `capInsets` will stay a fixed size, but the center content and borders of the image will not be stretched.',
    },
    {
      name: 'height',
      type: 'Abyss.Size',
      description: 'Height of the image.',
    },
    {
      name: 'width',
      type: 'Abyss.Size',
      description: 'Width of the image.',
    },
    {
      name: 'tintColor',
      type: 'Abyss.Color',
      description:
        'Changes the color of all non-transparent pixels to the `tintColor`.',
    },
    {
      name: 'imageStyle',
      type: 'Abyss.Style<"Image">',
      description:
        'Object or array of objects defining the style of the Image component within the ImageBackground component with design tokens.',
    },
  ]}
/>

</Tab>
</Tabs>

---
id: keyboard-avoiding-view
category: Core
title: KeyboardAvoidingView
description: Automatically adjust its height, position, or bottom padding based on the keyboard height to remain visible while the virtual keyboard is displayed.
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { KeyboardAvoidingView } from '@uhg-abyss/mobile';
```

## Usage

The `KeyboardAvoidingView` component is designed to automatically adjust the layout of your application
when the on-screen keyboard appears, ensuring that the content remains visible and accessible to the user.

This component extends the `KeyboardAvoidingView` core component present in React Native, while also supporting tokens
in the `style`, `contentContainerStyle`, and `keyboardVerticalOffset` props.

```jsx
() => {
  const [value, setValue] = useState('');
  return (
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      behavior="padding"
      keyboardVerticalOffset={100}
    >
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <View style={styles.innerView}>
          <View>
            <Heading style={styles.heading} offset={4}>
              Press the Input
            </Heading>
          </View>
          <InputField label="Username" value={value} onChangeText={setValue} />
        </View>
      </TouchableWithoutFeedback>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  heading: {
    marginBottom: '$semantic.spacing.sm',
  },
  innerView: {
    padding: 24,
    flex: 1,
    justifyContent: 'space-between',
  },
});
```

</Tab>

<Tab label="Integration">

<Docs.ClassesTable
  of="View"
  rows={[
    {
      name: 'keyboard-avoiding-view-root',
      description: 'KeyboardAvoidingView root element',
    },
  ]}
/>

<Docs.PropsTable
  of="View"
  inherits={[
    {
      name: 'React Native - KeyboardAvoidingView',
      link: 'https://reactnative.dev/docs/keyboardavoidingview#props',
    },
  ]}
  rows={[
    {
      name: 'style',
      type: 'Abyss.Style<"KeyboardAvoidingView">',
      description:
        'Object or array of objects defining the style of the KeyboardAvoidingView component with design tokens.',
    },
    {
      name: 'contentContainerStyle',
      type: 'Abyss.Style<"View">',
      description:
        'Style object for the content container within the KeyboardAvoidingView.',
    },
    {
      name: 'keyboardVerticalOffset',
      type: 'Abyss.Space',
      description: 'The distance between the keyboard and the view.',
    },
  ]}
/>

</Tab>
</Tabs>

---
id: keyboard-aware-scroll-view
category: Core
title: KeyboardAwareScrollView
description: A ScrollView component that automatically handles keyboard appearance and scrolls to focused TextInput.
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { KeyboardAwareScrollView } from '@uhg-abyss/mobile';
```

## Usage

The `KeyboardAwareScrollView` component is a wrapper around [react-native-keyboard-aware-scroll-view's](https://github.com/APSL/react-native-keyboard-aware-scroll-view) `KeyboardAwareScrollView` component that automatically adjusts its content when the keyboard appears. It's particularly useful for forms and other input-heavy screens where you want to ensure that the focused input remains visible when the keyboard is shown.

```jsx
() => {
  const [value1, setValue1] = useState('');
  const [value2, setValue2] = useState('');

  return (
    <KeyboardAwareScrollView
      keyboardAware={true}
      dismissKeyboardOnScroll={true}
    >
      <View>
        <Heading>Form Example</Heading>
        <InputField
          label="First Field"
          value={value1}
          onChangeText={setValue1}
        />
        <InputField
          label="Second Field"
          value={value2}
          onChangeText={setValue2}
        />
        <Button onPress={() => {}}>Submit</Button>
      </View>
    </KeyboardAwareScrollView>
  );
};
```

## Platform Differences

- On iOS, the component uses `react-native-keyboard-aware-scroll-view` which provides smooth keyboard handling.
- On Android, it falls back to the native `ScrollView` with basic keyboard handling.

</Tab>

<Tab label="Integration">

<Docs.ClassesTable
  of="ScrollView"
  rows={[
    {
      name: 'keyboard-aware-scroll-view-root',
      description: 'Root element of view',
    },
  ]}
/>

<Docs.PropsTable
  of="ScrollView"
  inherits={[
    {
      name: 'React Native - ScrollView',
      link: 'https://reactnative.dev/docs/scrollview#props',
    },
  ]}
  rows={[
    {
      name: 'children',
      type: 'React.ReactNode',
      description: 'The content of the ScrollView',
    },
    {
      name: 'keyboardAware',
      type: 'boolean',
      default: 'false',
      description: 'Enables or disables keyboard awareness',
    },
    {
      name: 'dismissKeyboardOnScroll',
      type: 'boolean',
      default: 'false',
      description: 'Dismisses the keyboard when scrolling begins',
    },
  ]}
/>

</Tab>
</Tabs>

---
id: pressable
category: Core
title: Pressable
description: A pressable component wrapper that can be used to provide touch feedback.
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

## Usage

Pressable is a Core Component that can detect various stages of press interactions on any of its defined children.

```jsx
<Pressable onPress={onPressFunction}>
  <Text>I'm pressable!</Text>
</Pressable>
```

### How It Works

**On an element wrapped by Pressable:**

- [onPressIn](https://reactnative.dev/docs/pressable#onpressin) is called when a press is activated.
- [onPressOut](https://reactnative.dev/docs/pressable#onpressout) is called when the press gesture is deactivated.

**After onPressIn, the user will either:**

- Remove their finger, triggering [onPressOut](https://reactnative.dev/docs/pressable#onpressout) followed
  by [onPress](https://reactnative.dev/docs/pressable#onpress).
- Hold their finger longer than 500 milliseconds before removing it, [onLongPress](https://reactnative.dev/docs/pressable#onlongpress)
  is triggered. _([onPressOut](https://reactnative.dev/docs/pressable#onpressout) will still fire when they remove their finger)_.

<div
  style={{
    width: '90%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  }}
>
  <img
    src="https://reactnative.dev/docs/assets/d_pressable_pressing.svg"
    alt="Diagram of the onPress events in sequence."
  />
  <small>
    <i>Diagram from React Native Documentation</i>
  </small>
  <br />
</div>

```jsx render
<Web.Alert variant="warning" dismissible={false}>
  The touch area never extends past the parent view bounds and the Z-index of
  sibling views always takes precedence if a touch hits two overlapping views.
</Web.Alert>
```

### HitRect & HitSlop

Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss
the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from
the wrapped element. Presses can start anywhere within a `HitRect`.

`PressRect` allows presses to move beyond the element and its `HitRect` while maintaining activation and being eligible for a
"press"—think of sliding your finger slowly away from a button you're pressing down on.

<div
  style={{
    width: '90%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  }}
>
  <img
    src="https://reactnative.dev/docs/assets/d_pressable_anatomy.svg"
    alt="Diagram of the onPress events in sequence."
  />
  <small>
    <i>Diagram from React Native Documentation</i>
  </small>
  <br />
</div>

_You can set `HitRect` with `hitSlop` and set `PressRect` with `pressRetentionOffset`_.

```jsx render
<Web.Alert variant="warning" dismissible={false}>
  <code>Pressable</code> uses React Native's <code>Pressability</code> API. For
  more information around the state machine flow of Pressability and how it
  works, check out the implementation for
  <Web.Link
    openNewWindow
    size="sm"
    href="https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Pressability/Pressability.js#L350"
  >
    Pressability
  </Web.Link>.
</Web.Alert>
```

### Styling

The `style` prop can be a function, an array of objects, or an object that defines the style of the `Pressable` component with design tokens.
When using a function, the function will receive the `pressed` state as an argument.

Additionally, the `children` prop can be a function that receives the `pressed` state as an argument or a React element.

```jsx live
<Pressable
  style={({ pressed }) => {
    return {
      width: 125,
      height: 125,
      borderWidth: pressed ? 10 : 4,
      borderRadius: '$core.border-radius.xl',
      borderColor: pressed
        ? '$semantic.color.border.status.subtle.success'
        : '$semantic.color.border.status.subtle.error',
      backgroundColor: pressed
        ? '$semantic.color.surface.container.status.success.tint'
        : '$semantic.color.surface.container.status.error.tint',
      margin: '$semantic.spacing.lg',
      padding: '$semantic.spacing.sm',
      alignItems: 'center',
      justifyContent: 'center',
    };
  }}
  onPress={() => console.log('onPress Called!')}
  onPressIn={() => console.log('onPressIn Called!')}
  onPressOut={() => console.log('onPressOut Called!')}
  onLongPress={() => console.log('onLongPress Called!')}
>
  {({ pressed }) => (
    <Text textAlign="center">{pressed ? 'Release Me' : 'Press Me'}</Text>
  )}
</Pressable>
```

### Best Practices

- **Press Feedback:** Always provide clear visual feedback (like color changes or animations) to indicate the element has been pressed.
- **Hit Slop:** Use the `hitSlop` prop to extend the touchable area if needed, especially for smaller elements.
- **Optimize Press Timing**: Use `onPressIn` and `onPressOut` wisely to handle animations or delays without affecting user experience.

## Accessibility Considerations

- **Pressable Texts:** Ensure that the label of the pressable is descriptive for screen readers.
- **Feedback for Press**: Make sure the visual feedback is discernible for all users, including those with visual impairments.
- **Keyboard Navigation:** Ensure that pressable components are focusable and navigable with a keyboard.

</Tab>

<Tab label="Integration">

<Docs.ClassesTable
  of="Pressable"
  rows={[
    {
      name: 'pressable-root',
      description: 'Pressable root element',
    },
  ]}
/>

<Docs.PropsTable
  of="Pressable"
  inherits={[
    {
      name: 'React Native - Pressable',
      link: 'https://reactnative.dev/docs/pressable#props',
    },
  ]}
  rows={[
    {
      name: 'style',
      type: 'Function | Abyss.Style<"Pressable">',
      description:
        'Object or array of objects defining the style of the Pressable component with design tokens',
    },
    {
      name: 'hitSlop',
      type: 'Inset | Insets',
      description:
        'This defines how far a touch event can start away from the view.',
    },
    {
      name: 'pressRetentionOffset',
      type: 'Inset | Insets',
      description:
        'Additional distance outside of this view in which a touch is considered a press before `onPressOut` is triggered.',
    },
  ]}
/>

</Tab>
</Tabs>

---
id: refresh-control
category: Core
title: RefreshControl
description: A standard control that can initiate the refreshing of a scroll view's contents
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { RefreshControl } from '@uhg-abyss/mobile';
```

## Usage

The `RefreshControl` component is used to implement pull-to-refresh functionality in scrollable views,
such as `ScrollView`, `FlatList`, or `SectionList`. This component is a customized version of React
Native's core RefreshControl, offering enhanced styling, animations, and better integration with our
design system.

```jsx render
<Web.Alert variant="warning" dismissible={false}>
  Note: <code>refreshing</code> is a controlled prop, which is why it needs to
  be set to <code>true</code> in the onRefresh function otherwise the refresh
  indicator will stop immediately.
</Web.Alert>
```

<br />

```jsx
() => {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => {
      setRefreshing(false);
    }, 4500);
  }, []);

  return (
    <ScrollView
      contentContainerStyle={{
        flex: 1,
        backgroundColor: '#D9E9FA',
        alignItems: 'center',
        justifyContent: 'center',
      }}
      refreshControl={
        <RefreshControl
          colors={[
            'red',
            '$core.color.yellow.100',
            '$semantic.color.surface.accent.decorative.3',
            'green',
          ]}
          progressBackgroundColor="$semantic.color.surface.container.emphasis.1"
          tintColor="$semantic.color.surface.container.emphasis.4"
          titleColor="$semantic.color.icon.status.info"
          title="Page is refreshing"
          progressViewOffset="$semantic.spacing.xs"
          refreshing={refreshing}
          onRefresh={onRefresh}
        />
      }
    >
      <Text>Pull down to see RefreshControl indicator</Text>
    </ScrollView>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.ClassesTable
  of="RefreshControl"
  rows={[
    {
      name: 'refresh-control-root',
      description: 'RefreshControl root element',
    },
  ]}
/>

<Docs.PropsTable
  of="RefreshControl"
  inherits={[
    {
      name: 'React Native - RefreshControl',
      link: 'https://reactnative.dev/docs/refreshcontrol#props',
    },
  ]}
  rows={[
    {
      name: 'style',
      type: 'Abyss.Style<"RefreshControl">',
      description:
        'Object or array of objects defining the style of the RefreshControl component',
    },
    {
      name: 'colors',
      type: 'Abyss.Color[]',
      description:
        'The colors (at least one) that will be used to draw the refresh indicator',
    },
    {
      name: 'progressBackgroundColor',
      type: 'Abyss.Color',
      description: 'The background color of the refresh indicator',
    },
    {
      name: 'tintColor',
      type: 'Abyss.Color',
      description: 'The tint color of the refresh indicator',
    },
    {
      name: 'titleColor',
      type: 'string',
      description: 'The color of the refresh indicator title',
    },
    {
      name: 'progressViewOffset',
      type: 'number',
      description:
        'The distance between the refresh indicator and the top of the view',
    },
  ]}
/>

</Tab>
</Tabs>

---
id: safe-area-view
category: Core
title: SafeAreaView
description: Render content within the safe area boundaries of a device.
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { SafeAreaView } from '@uhg-abyss/mobile';
```

## Usage

The purpose of `SafeAreaView` is to render content within the safe area boundaries of a device.

The Abyss SafeAreaView is built on top of the SafeAreaView component provided by the [react-native-safe-area-context](https://github.com/AppAndFlow/react-native-safe-area-context) library.
Please install the library in your project to use the Abyss SafeAreaView component. If the library is not installed, the Abyss SafeAreaView will fallback to the React Native SafeAreaView component.

`SafeAreaView` renders nested content and automatically applies padding to reflect the portion
of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor
views. Moreover, and most importantly, Safe Area's paddings reflect the physical limitation
of the screen, such as rounded corners or camera notches (i.e. the sensor housing area on iPhone 13).

## Edges

You can set the edges to apply the safe area insets to by using the `edges` prop.

For example if you don't want insets to apply to the top edge because the view does not touch the top of the screen you can use:

```jsx
<SafeAreaView edges={['bottom', 'left', 'right']}>...</SafeAreaView>
```

Optionally it can be set to an object `{ top?: EdgeMode, right?: EdgeMode, bottom?: EdgeMode, left?: EdgeMode }` where `EdgeMode = 'off' | 'additive' | 'maximum'`.
Additive is a default mode and is the same as passing and edge in the array: `finalPadding = safeArea + padding`.
Maximum mode will use safe area inset or padding/margin (depends on mode) if safe area is less: `finalPadding = max(safeArea, padding)`.
For example if you want a floating UI element that should be at the bottom safe area edge on devices with safe area or 24px from the
bottom of the screen on devices without safe area or if safe area is less than 24px:

```jsx
<SafeAreaView style={{ paddingBottom: 24 }} edges={{ bottom: 'maximum' }}>
  ...
</SafeAreaView>
```

## Example

```jsx
<View style={{ flex: 1, justifyContent: 'space-between' }}>
  <SafeAreaView
    edges={['top', 'left', 'right']}
    style={{ backgroundColor: '$core.color.brand.100' }}
  >
    <View style={{ padding: '$semantic.spacing.lg' }}>
      <Text textAlign="center" color="$semantic.color.text.body.alt">
        This is a SafeAreaView that avoids the Status Bar
      </Text>
    </View>
  </SafeAreaView>
  <SafeAreaView
    edges={['bottom', 'left', 'right']}
    style={{ backgroundColor: '$core.color.brand.100' }}
  >
    <View style={{ padding: '$semantic.spacing.lg' }}>
      <Text textAlign="center" color="$semantic.color.text.body.alt">
        This is a SafeAreaView that avoids the Home Bar
      </Text>
    </View>
  </SafeAreaView>
</View>
```

```jsx render:phone-dark
const PhoneContainer = styled('View', {
  justifyContent: 'space-between',
  width: '100%',
});

const PaddedView = styled('View', {
  paddingHorizontal: '$semantic.spacing.lg',
  backgroundColor: '$core.color.brand.100',
  width: '100%',
  variants: {
    placement: {
      top: {
        paddingTop: 40,
        paddingBottom: '$semantic.spacing.lg',
      },
      bottom: {
        paddingBottom: 28,
        paddingTop: '$semantic.spacing.lg',
      },
    },
  },
});

const Label = styled('Text', {
  color: '$semantic.color.text.body.alt',
  fontSize: '$semantic.spacing.lg',
  textAlign: 'center',
});

render(() => {
  return (
    <PhoneContainer>
      <PaddedView placement="top">
        <Label>This is a SafeAreaView that avoids the Status Bar</Label>
      </PaddedView>
      <PaddedView placement="bottom">
        <Label>This is a SafeAreaView that avoids the Home Bar</Label>
      </PaddedView>
    </PhoneContainer>
  );
});
```

</Tab>

<Tab label="Integration">

<Docs.ClassesTable
  of="SafeAreaView"
  rows={[
    {
      name: 'safe-area-view-root',
      description: 'SafeAreaView root element',
    },
  ]}
/>

<Docs.PropsTable
  of="SafeAreaView"
  inherits={[
    {
      name: 'React Native - SafeAreaView',
      link: 'https://reactnative.dev/docs/safeareaview#props',
    },
  ]}
  rows={[
    {
      name: 'style',
      type: 'Abyss.Style<"SafeAreView">',
      description:
        'Object or array of objects defining the style of the SafeAreaView component with design tokens.',
    },
    {
      name: 'edges',
      type: 'Array<"top" | "right" | "bottom" | "left"> | { top?: EdgeMode, right?: EdgeMode, bottom?: EdgeMode, left?: EdgeMode }',
      description:
        'Defines which edges of the SafeAreaView should apply safe area insets to. See the Edges section for more details.',
    },
  ]}
/>

</Tab>
</Tabs>

---
id: scroll-view
category: Core
title: ScrollView
description: A generic scrolling container that can host multiple components and views.
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

## Usage

The `ScrollView` component is a scrollable container that can hold a variety of elements,
enabling vertical or horizontal scrolling. This customized version of React Native's [ScrollView](https://reactnative.dev/docs/scrollview)
component integrates Abyss design tokens and performance optimizations for a smooth and responsive experience.

```jsx live
<ScrollView
  style={{
    backgroundColor: '$semantic.color.surface.container.tertiary',
    padding: '$semantic.spacing.lg',
    height: 300,
  }}
>
  <Heading>Scroll Me</Heading>
  <Text
    style={{
      paddingTop: '$semantic.spacing.lg',
      fontSize: '$core.font-size.h.40',
    }}
  >
    Lorem ipsum odor amet, consectetuer adipiscing elit. Elit lacinia torquent
    et mauris habitasse netus efficitur aenean aptent. Finibus posuere maximus
    tortor, nisi bibendum ultricies. Tellus integer eu commodo sed pharetra
    mauris quam potenti mauris. Convallis nisl auctor risus mattis id. Himenaeos
    turpis egestas consequat tortor aliquam, dictumst integer volutpat eu. Quis
    leo ex parturient arcu sagittis. Et nostra platea vestibulum bibendum
    pharetra accumsan semper cursus.
    {'\n'}
    {'\n'}
    Dictum porttitor penatibus auctor nisl; sem porttitor curae quisque. Ipsum accumsan
    eu vestibulum ligula, vehicula integer. Nunc varius massa placerat conubia mus
    magna. Aliquet eleifend porttitor porta mattis consectetur habitasse at fringilla.
    Odio aptent aliquam sociosqu justo egestas adipiscing ac conubia. Bibendum ultrices
    commodo ante mus mollis netus.
    {'\n'}
    {'\n'}
    Bibendum taciti habitant ridiculus scelerisque aliquam varius lacus maximus.
    Efficitur facilisis parturient auctor accumsan nascetur ad phasellus lectus.
    Lacinia natoque conubia convallis habitant mauris eleifend. Turpis
    consectetur tempor egestas taciti; venenatis cursus? Cursus congue
    adipiscing purus neque vitae nibh? Risus accumsan ullamcorper velit eros
    tellus curae. Interdum nascetur morbi; pharetra id venenatis volutpat
    potenti. Convallis senectus praesent lectus nisi eget justo vitae. Venenatis
    ornare sociosqu euismod feugiat integer. Curae odio massa purus eu facilisis
    laoreet.
    {'\n'}
    {'\n'}
    Lectus curabitur scelerisque mus auctor nascetur iaculis ante risus. Tristique
    conubia nisl inceptos bibendum pellentesque. Eleifend imperdiet gravida pellentesque
    hendrerit eget dignissim magnis varius augue. Curabitur proin porttitor molestie
    gravida amet praesent et fringilla. Ante etiam at gravida efficitur cubilia rutrum
    torquent adipiscing. Parturient bibendum id convallis torquent venenatis. Lacinia
    primis leo nullam tincidunt consectetur quisque. Elementum tristique quis magnis
    ornare molestie venenatis. Sollicitudin netus class rutrum proin; curabitur facilisis
    convallis pretium sollicitudin. Feugiat volutpat eget arcu convallis ultricies
    id.
  </Text>
</ScrollView>
```

### ScrollView vs FlatList

`ScrollView` renders all its child components all at once, even if the component is not in view.
This can negatively affect the performance of the app by requiring more processing power and memory usage when rendering a large number of items.

This is where [FlatList](/mobile/core/flat-list) comes into play. `FlatList` renders items lazily, before they
appear on screen. It also removes items that scroll off-screen to save memory and processing time.

`FlatList` is also handy if you want to render separators between your items, multiple columns,
infinite scrolling, or any number of other features it supports out of the box.

### Best Practices

- **Minimize Overdraw:** Use a background color to avoid unnecessary redrawing of background elements.
- **Limit Scrollable Content:** Avoid putting too many elements inside a `ScrollView`. If the content grows large, consider using a `FlatList` or `SectionList` for better performance.
- **Optimize Images:** When scrolling with images, ensure they are properly sized and optimized to prevent memory issues.

## Considerations

- **Bounded Height:** The `ScrollView` must have a bounded height, since they contain children with unbound-heights.
  - To set the height of a `ScrollView`, either define a height directly (discouraged) or make sure the parent Components have bounded height.
- **Nested Responders:** `ScrollView` does not yet support preventing touch gestures on its children from becoming scroll gestures.
  - This doesn't mean that responders won't work inside of a `ScrollView`. It simply means `ScrollView` will prioritize its own responder if it detects a gesture that could be interpretedas a scroll.
    - _*For more information, check out React Native's [Gesture Responder System](https://reactnative.dev/docs/gesture-responder-system).*_

### Accessibility Considerations

- **Keyboard Focus:** Ensure that the content inside the `ScrollView` is reachable and visible when users navigate with a keyboard.
- **Readable Labels:** Label any scrollable area for screen readers, so users know they can scroll through the content.
- **Scroll Indicators:** Allow scroll indicators to be visible for accessibility users, so they are aware of the scrollable content.

### Performance Considerations

- **Rendering Limits:** Avoid placing too many child components inside a `ScrollView` as it can cause performance bottlenecks. Instead, use lists (`FlatList`,`SectionList`) for large datasets.
- **Lazy Loading:** Consider lazy loading for content-heavy views to avoid loading everything upfront.
- **Batch Updates:** Ensure updates to the scroll view content are batched to reduce rendering overhead.

</Tab>

<Tab label="Integration">

<Docs.ClassesTable
  of="SafeAreaView"
  rows={[
    {
      name: 'scroll-view-root',
      description: 'ScrollView root element',
    },
  ]}
/>

<Docs.PropsTable
  of="SafeAreaView"
  inherits={[
    {
      name: 'React Native - ScrollView',
      link: 'https://reactnative.dev/docs/scrollview#props',
    },
  ]}
  rows={[
    {
      name: 'style',
      type: 'Abyss.Style<"ScrollView">',
      description:
        'Object or array of objects defining the style of the ScrollView component with design tokens',
    },
    {
      name: 'contentContainerStyle',
      type: 'Abyss.Style<"View">',
      description:
        'Object or array of objects defining the style of the content container within the ScrollView component with design tokens. These styles will be applied to the scroll view content container which wraps all of the child views',
    },
    {
      name: 'contentInset',
      type: 'Insets',
      description:
        'The amount by which the scroll view content is inset from the edges of the scroll view',
    },
    {
      name: 'hitSlop',
      type: 'Insets',
      description:
        'This defines how far a touch event can start away from the ScrollView',
    },
    {
      name: 'endFillColor',
      type: 'Abyss.Color',
      description:
        'Sometimes a scrollview takes up more space than its content fills. When this is the case, this prop will fill the rest of the scrollview with a color to avoid setting a background and creating unnecessary overdraw. This is an advanced optimization that is not needed in the general case',
    },
  ]}
/>

</Tab>
</Tabs>

---
id: section-list
category: Core
title: SectionList
description: A performant interface for rendering sectioned lists.
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

## Usage

The `SectionList` component is a high-performance list component that efficiently renders sectioned lists. It is ideal for rendering lists with sections and supports the most handy features like:

- Full tokenization support.
- Fully cross-platform.
- Configurable viewability callbacks.
- List header support.
- List footer support.
- Item separator support.
- Section header support.
- Section separator support.
- Heterogeneous data and item rendering support.
- Pull to Refresh.
- Scroll loading.

_If you don't need section support and want a simpler interface, use a [FlatList](/mobile/core/flat-list)._

```jsx live
const data = [
  {
    title: 'Main Dishes',
    data: ['Pizza', 'Burger', 'Risotto'],
  },
  {
    title: 'Sides',
    data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
  },
  {
    title: 'Drinks',
    data: ['Water', 'Coke', 'Beer'],
  },
  {
    title: 'Desserts',
    data: ['Cheese Cake', 'Ice Cream', 'Brownies'],
  },
];

const Item = styled('Text', {
  backgroundColor: '$semantic.color.surface.container.emphasis.4',
  padding: '$semantic.spacing.lg',
  marginVertical: '$semantic.spacing.xs',
  fontSize: '$core.font-size.h.40',
  color: '$core.color.brand.100',
  borderWidth: 2.5,
  borderColor: '$core.color.brand.100',
});

render(() => {
  return (
    <View style={{ height: 400 }}>
      <SectionList
        sections={data}
        keyExtractor={(item, index) => {
          return item + index;
        }}
        renderItem={({ item }) => {
          return <Item>{item}</Item>;
        }}
        renderSectionHeader={({ section: { title } }) => {
          return (
            <Heading style={{ marginBottom: '$semantic.spacing.xs' }}>
              {title}
            </Heading>
          );
        }}
        contentContainerStyle={{ padding: '$semantic.spacing.lg' }}
      />
    </View>
  );
});
```

### Best Practices

- **Use Memoization:** Use [React.memo()](https://react.dev/reference/react/memo) to avoid unnecessary re-renders of list items.
- **Section Headers:** Keep section headers concise to avoid taking up too much space.
- **Key Management:** Ensure that the `keyExtractor` for individual items and sections is unique to avoid rerender issues.

## Considerations

_`SectionList` is a convenience wrapper around [VirtualizedList](/mobile/core/virtualized-list), and thus inherits its props (as well as those of [ScrollView](/mobile/core/scroll-view)) that aren't explicitly listed here, along with the following caveats:_

- **Internal State:** Internal state is not preserved when content scrolls out of the render window. Ensure all your data is captured in the item data or external stores like Flux, Redux, or Relay.
- **Prop Updates:** This is a `PureComponent` meaning it will not re-render if props remain shallow-equal. Make sure that everything your `renderItem` function depends on is passed as a prop (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on changes. This includes the `data` prop and parent component state.
- **Item Rendering:** In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application.
- **Key Management:** By default, the list looks for a `key` prop on each item and uses that for the React key. Alternatively, you can provide a custom `keyExtractor` prop.

### Accessibility Considerations

- **Navigable Sections:** Ensure section headers and items are properly labeled for screen readers.
- **Focus Management:** When rendering additional sections, ensure the user focus remains consistent without jumping or losing context.

### Performance Considerations

- **Batch Updates:** Use batch updates to avoid triggering multiple re-renders when updating section data.
- **SectionHeader Optimization:** Memoize section headers to prevent unnecessary re-renders during list scrolls.
- **Windowing:** Use `initialNumToRender` and `maxToRenderPerBatch` props to control how many items are rendered initially and in each batch to avoid overloading the UI with too many items at once.
- **Recycling Cells:** Consider using `CellRenderComponent` to recycle rendered items and improve rendering performance for large lists.

</Tab>

<Tab label="Integration">

<Docs.ClassesTable
  of="SectionList"
  rows={[
    {
      name: 'section-list-root',
      description: 'SectionList root element',
    },
  ]}
/>

<Docs.PropsTable
  of="SectionList"
  inherits={[
    {
      name: 'React Native - SectionList',
      link: 'https://reactnative.dev/docs/sectionlist#props',
    },
  ]}
  rows={[
    {
      name: 'style',
      type: 'Abyss.Style<"SectionList">',
      description:
        'Object or array of objects defining the style of the SectionList component with design tokens',
    },
    {
      name: 'hitSlop',
      type: 'Insets',
      description:
        'This defines how far a touch event can start away from the SectionList',
    },
    {
      name: 'contentContainerStyle',
      type: 'Abyss.Style<"View">',
      description:
        'Object or array of objects defining the style of the content container within the SectionList component with design tokens. These styles will be applied to the scroll view content container which wraps all of the child views',
    },
    {
      name: 'contentInset',
      type: 'Insets',
      description:
        'The amount by which the scroll view content is inset from the edges of the scroll view',
    },
    {
      name: 'endFillColor',
      type: 'Abyss.Color',
      description:
        'The color of the background of the SectionList when there are not enough items to fill the content',
    },
    {
      name: 'ListFooterComponentStyle',
      type: 'Abyss.Style<"View">',
      description:
        'Styling for internal View for ListFooterComponent. Accepts an object or array of objects which defines the style of the ListFooterComponent within the FlatList component with design tokens',
    },
    {
      name: 'ListHeaderComponentStyle',
      type: 'Abyss.Style<"View">',
      description:
        'Styling for internal View for ListHeaderComponent. Accepts an object or array of objects which defines the style of the ListHeaderComponent within the FlatList component with design tokens',
    },
  ]}
/>

</Tab>
</Tabs>

---
id: status-bar
category: Core
title: StatusBar
description: Component to control the app's status bar.
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { StatusBar } from '@uhg-abyss/mobile';
```

## Usage

The `StatusBar` component controls the app's status bar. The status bar is the zone, typically at the top of
the screen, that displays the current time, Wi-Fi and cellular network information, battery level
and/or other status icons.

This component is a customized version of React Native's `StatusBar` core component, offering additional configuration
options and integration with our design system. It allows you to manage the status bar's `style`, `visibility`, and `backgroundColor`
to match the application's theme with our design tokens.

## Usage with Navigator

It is possible to have multiple StatusBar components mounted at the same time. The props will
be merged in the order the StatusBar components were mounted.

## Imperative API

For cases where using a component is not ideal, there is also an imperative API exposed as
static functions on the component. However, it is not recommended to use the static API and the
component for the same prop because any value set by the static API will get overridden by the one
set by the component in the next render.

## Performance Considerations

The StatusBar is a lightweight component, but to ensure optimal performance:

- **Minimize Dynamic Changes:** Limit frequent updates to the status bar's properties, as unnecessary changes
  can impact performance, especially on lower-end devices.
- **Use Animations Judiciously:** While animations can enhance the user experience, use them sparingly to
  avoid performance degradation.

## Accessibility Considerations

When configuring the StatusBar, ensure that the chosen colors and styles provide sufficient contrast
and readability. The status bar should be easily readable in various lighting conditions and should not
obscure critical content or UI elements.

</Tab>

<Tab label="Integration">

<Docs.ClassesTable
  of="StatusBar"
  rows={[
    {
      name: 'status-bar-root',
      description: 'StatusBar root element',
    },
  ]}
/>

<Docs.PropsTable
  of="StatusBar"
  inherits={[
    {
      name: 'React Native - StatusBar',
      link: 'https://reactnative.dev/docs/statusbar#props',
    },
  ]}
  rows={[
    {
      name: 'backgroundColor',
      type: 'Abyss.Color',
      description: 'The background color of the status bar',
    },
  ]}
/>

</Tab>
</Tabs>

---
id: touchable-highlight
category: Core
title: TouchableHighlight
description: A wrapper for making views respond properly to touches.
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx render
<Web.Alert variant="warning" dismissible={false}>
  If you're looking for a more extensive and future-proof way to handle
  touch-based input, check out the{' '}
  <Web.Link size="sm" href="/mobile/core/pressable">
    Pressable
  </Web.Link>{' '}
  API.
</Web.Alert>
```

## Usage

`TouchableHighlight` is a wrapper for handling pressEvents of a `View`. While pressing down, the opacity of the wrapped view
is decreased, allowing the underlay color to show through.

```jsx
function MyComponent(props: MyComponentProps) {
  return (
    <View
      {...props}
      style={{
        flex: 1,
        backgroundColor: '$semantic.color.surface.container.secondary',
      }}
    >
      <Text>My Component</Text>
    </View>
  );
}

<TouchableHighlight
  activeOpacity="$core.opacity.lg"
  underlayColor="$semantic.color.surface.interactive.standards.active.secondary"
  onPress={() => alert('Pressed!')}
>
  <MyComponent />
</TouchableHighlight>;
```

```jsx live
render(() => {
  return (
    <TouchableHighlight
      pressRetentionOffset={{
        top: '$core.spacing.600',
        bottom: '$semantic.spacing.sm',
      }}
      style={{ padding: '$semantic.spacing.lg', alignItems: 'center' }}
      underlayColor="$semantic.color.surface.interactive.standards.active.secondary"
      activeOpacity="$core.opacity.lg"
      onPress={() => {}}
    >
      <Text>Gray Touchable Highlight</Text>
    </TouchableHighlight>
  );
});
```

## Considerations

- **Visual Artifacts:** The underlay comes from wrapping the child in a `View` component. This can sometimes cause unwanted visual artifacts and affect layout if not used correctly.
  For example, if the `backgroundColor` of the wrapped `View` is not explicitly set to an opaque color.
- **Children:** `TouchableHighlight` can only have a single child. If you wish to have several children, wrap them in a `View`.

### Accessibility Considerations

- **Feedback for Users:** Ensure that the visual feedback (`underlayColor` color) is noticeable for users with visual impairments.
- **Screen Reader Support:** Label the component appropriately for screen readers so users understand the interaction.
- **Keyboard Focus:** Ensure the component can be focused and activated using a keyboard for accessibility.

</Tab>

<Tab label="Integration">

<Docs.ClassesTable
  of="TouchableHighlight"
  rows={[
    {
      name: 'touchable-highlight-root',
      description: 'TouchableHighlight root element',
    },
  ]}
/>

<Docs.PropsTable
  of="TouchableHighlight"
  inherits={[
    {
      name: 'React Native - TouchableHighlight',
      link: 'https://reactnative.dev/docs/touchablehighlight#props',
    },
  ]}
  rows={[
    {
      name: 'style',
      type: 'Abyss.Style<"TouchableHighlight">',
      description:
        'Object or array of objects defining the style of the TouchableHighlight component with design tokens',
    },
    {
      name: 'hitSlop',
      type: 'Inset | Insets',
      description:
        'This defines how far a touch event can start away from the view',
    },
    {
      name: 'pressRetentionOffset',
      type: 'Inset | Insets',
      description:
        'Additional distance outside of this view in which a touch is considered a press before `onPressOut` is triggered',
    },
    {
      name: 'underlayColor',
      type: 'Abyss.Color',
      description:
        'The color of the underlay that will show through when the touch is active',
    },
    {
      name: 'activeOpacity',
      type: 'Abyss.Opacity',
      description:
        'Defines what the opacity of the wrapped view should be when touch is active',
    },
  ]}
/>

</Tab>
</Tabs>

---
id: touchable-opacity
category: Core
title: TouchableOpacity
description: A wrapper for making views respond properly to touches.
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx render
<Web.Alert variant="warning" dismissible={false}>
  If you're looking for a more extensive and future-proof way to handle
  touch-based input, check out the{' '}
  <Web.Link size="sm" href="/mobile/core/pressable">
    Pressable
  </Web.Link>{' '}
  API.
</Web.Alert>
```

## Usage

The `TouchableOpacity` component is used to create pressable elements that fade out on press,
providing smooth and subtle visual feedback. This component is lightweight and often used for
buttons or other pressable elements that require an opacity change on interaction. This customized
version of the React Native `TouchableOpacity` component is enhanced to supports Abyss design tokens and fit seamlessly into our design system.

Opacity is controlled by wrapping the children in an `Animated.View`, which is added to the view
hierarchy. Be aware that this can affect layout.

```jsx live
const styles = StyleSheet.create({
  button: {
    borderWidth: 2,
    padding: '$semantic.spacing.lg',
    alignItems: 'center',
    borderRadius: 100,
    borderColor: '$semantic.color.border.status.saturated.info',
    backgroundColor: '$semantic.color.surface.container.emphasis.4',
  },
});

render(() => {
  return (
    <TouchableOpacity style={styles.button} activeOpacity="$core.opacity.md">
      <Text
        color="$semantic.color.text.label.status.info"
        fontWeight="$semantic.font-weight.semibold"
        fontFamily="$heading"
      >
        Opacity Button
      </Text>
    </TouchableOpacity>
  );
});
```

### Best Practices

- **Consistent Opacity:** Use consistent values for activeOpacity across your app to maintain uniformity in user interactions.
- **Clear Press Feedback:** Ensure that the change in opacity is noticeable enough to signal to users that the element is pressed.
- **Layering Components:** Be mindful when layering TouchableOpacity over complex backgrounds, as the fade effect might not be as visible.

## Accessibility Considerations

- **Visual Feedback:** Ensure the fade effect is sufficiently noticeable for all users, especially those with visual impairments.
- **Keyboard Navigation:** Ensure the component can be navigated and activated via a keyboard.
- **Accessible Labels:** Add descriptive labels to the TouchableOpacity component so screen readers can convey its functionality.

</Tab>

<Tab label="Integration">

<Docs.ClassesTable
  of="TouchableOpacity"
  rows={[
    {
      name: 'touchable-opacity-root',
      description: 'TouchableOpacity root element',
    },
  ]}
/>

<Docs.PropsTable
  of="TouchableOpacity"
  inherits={[
    {
      name: 'React Native - TouchableOpacity',
      link: 'https://reactnative.dev/docs/touchableopacity#props',
    },
  ]}
  rows={[
    {
      name: 'style',
      type: 'Abyss.Style<"TouchableOpacity">',
      description:
        'Object or array of objects defining the style of the TouchableOpacity component with design tokens',
    },
  ]}
/>

</Tab>
</Tabs>

---
id: touchable-without-feedback
category: Core
title: TouchableWithoutFeedback
description: Captures touch events without providing any visual feedback.
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx render
<Web.Alert variant="warning" dismissible={false}>
  If you're looking for a more extensive and future-proof way to handle
  touch-based input, check out the
  <Web.Link size="sm" href="/mobile/core/pressable">
    Pressable
  </Web.Link> API.
</Web.Alert>
```

## Usage

The `TouchableWithoutFeedback` component is a wrapper that captures touch events without providing any visual feedback.
It is ideal for handling touch events on components that don't need to display any visual feedback.

**Do not use unless you have a very good reason.** All elements that respond to press should have a visual feedback when touched.

```tsx
function MyComponent(props: MyComponentProps) {
  return (
    <View
      {...props}
      style={{
        flex: 1,
        backgroundColor: '$semantic.color.surface.container.secondary',
      }}
    >
      <Text>My Component</Text>
    </View>
  );
}

<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
  <MyComponent />
</TouchableWithoutFeedback>;
```

### Example

```jsx live
() => {
  const Container = styled('View', {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: '$semantic.spacing.lg',
  });

  const CountContainer = styled('View', {
    alignItems: 'center',
    padding: '$semantic.spacing.lg',
  });

  const Count = styled('Text', {
    color: '$semantic.color.text.label.status.info',
  });

  const ButtonView = styled('View', {
    alignItems: 'center',
    backgroundColor:
      '$semantic.color.surface.interactive.standards.active.secondary',
    padding: '$semantic.spacing.sm',
  });

  const [count, setCount] = useState(0);

  const handlePress = () => {
    setCount(count + 1);
  };

  return (
    <Container>
      <CountContainer>
        <Count>Count: {count}</Count>
      </CountContainer>
      <TouchableWithoutFeedback onPress={handlePress}>
        <ButtonView>
          <Text>Increment</Text>
        </ButtonView>
      </TouchableWithoutFeedback>
    </Container>
  );
};
```

### Best Practices

- **Use Sparingly:** Only use `TouchableWithoutFeedback` when no visual feedback is required or desired.
  If feedback is expected, use `Pressable` or `TouchableOpacity` instead.
- **Visual Feedback:** Ensure the child components provide sufficient visual feedback, even if `TouchableWithoutFeedback` does not.
- **Invisible Buttons:** Consider accessibility implications if `TouchableWithoutFeedback` is used to
  create invisible or hidden touch areas.

## Considerations

- **Number of Children:** `TouchableWithoutFeedback` only supports one child. If you wish to have several child components, wrap them in a View.
- **Prop Spread:** `TouchableWithoutFeedback` Does not handle touch events directly, it clones its child and applies responder props to the clone.
  Therefore it is important that any intermediary components pass props through to the underlying React Native component.

### Accessibility Considerations

- **Keyboard Navigation:** Ensure the component is accessible via keyboard and focusable if needed.
- **Screen Reader Labels:** If touchable areas are hidden or provide no feedback, ensure the interactive
  area is described accurately for screen readers.

</Tab>

<Tab label="Integration">

<Docs.ClassesTable
  of="TouchableWithoutFeedback"
  rows={[
    {
      name: 'touchable-without-feedback-root',
      description: 'TouchableWithoutFeedback root element',
    },
  ]}
/>

<Docs.PropsTable
  of="TouchableWithoutFeedback"
  inherits={[
    {
      name: 'React Native - TouchableWithoutFeedback',
      link: 'https://reactnative.dev/docs/touchablewithoutfeedback#props',
    },
  ]}
  rows={[
    {
      name: 'style',
      type: 'Abyss.Style<"TouchableWithoutFeedback">',
      description:
        'Object or array of objects defining the style of the TouchableWithoutFeedback component with design token support.',
    },
    {
      name: 'hitSlop',
      type: 'Inset | Insets',
      description:
        'This defines how far a touch event can start away from the view.',
    },
    {
      name: 'pressRetentionOffset',
      type: 'Inset | Insets',
      description:
        'Additional distance outside of this view in which a touch is considered a press before `onPressOut` is triggered.',
    },
  ]}
/>

</Tab>
</Tabs>

---
id: view
category: Core
title: View
description: The most fundamental core component for building a UI, a container that supports layout.
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { View } from '@uhg-abyss/mobile';
```

## Usage

The `View` component is one of the fundamental building blocks of a user interface. It functions as a
container that supports layout, styling, and interaction handling. The component serves as a versatile
wrapper for organizing and displaying other components within a user interface.

While it extends the core View component present in React Native, the `View` component in Abyss Mobile
allows using tokens directly in the style prop. This feature enables developers to use the design tokens
defined in the theme to style a component.

This example creates a View that wraps two boxes with color and a text component in a row with padding.
Notice the use of design tokens in the style prop.

```jsx live
<View
  style={{
    flexDirection: 'row',
    height: 100,
    padding: '$semantic.spacing.lg',
  }}
>
  <View
    style={{
      backgroundColor: '$semantic.color.text.interactive.rest.primary',
      flex: 0.3,
    }}
  />
  <View
    style={{
      backgroundColor: '$semantic.color.text.interactive.rest.status.error',
      flex: 0.5,
    }}
  />
  <Text>Hello World!</Text>
</View>
```

```jsx render
<Web.Alert variant="warning" dismissible={false}>
  Views are designed to be used with{' '}
  <a href="/mobile/ui/style-sheet">StyleSheet</a> for clarity and performance,
  although inline styles are also supported.
</Web.Alert>
```

## Best Practices

- **Use for Layout**: Utilize the `View` component to create layouts and organize components within a user interface. For
  text context, consider using the [Text component](/mobile/ui/text).
- **Avoid Excessive Nesting**: Limit the number of nested `View` components to maintain a clean and efficient layout.
- **Use Tokens**: Leverage design tokens in the style prop to ensure consistency and maintainability in styling.
- **Accessibility**: Ensure that the content within the `View` component is accessible to all users by providing
  appropriate labels and descriptions where necessary.

## Performance Considerations

To maximize performance, be mindful of:

- **Shallow component trees**: Minimize nesting `View` components to reduce the complexity of the component tree.
- **Avoid unnecessary re-renders**: Use `React.memo` or similar optimization when rendering complex or frequently changing layouts.

</Tab>

<Tab label="Integration">

<Docs.ClassesTable
  of="View"
  rows={[{ name: 'view-root', description: 'View root element' }]}
/>

<Docs.PropsTable
  of="View"
  inherits={[
    {
      name: 'React Native - View',
      link: 'https://reactnative.dev/docs/view#props',
    },
  ]}
  rows={[
    {
      name: 'style',
      type: 'Abyss.Style<"View">',
      description:
        'Object or array of objects defining the style of the View component with design tokens.',
    },
  ]}
/>

</Tab>
</Tabs>

---
id: virtualized-list
category: Core
title: VirtualizedList
description: A high-performance list component that efficiently renders only the items currently visible on the screen, regardless of the size of the data set.
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

## Usage

The `VirtualizedList` component is a high-performance list component that efficiently renders only the items currently
visible on the screen, regardless of the size of the data set.

This is the base implementation of the [FlatList](/mobile/core/flat-list) and [SectionList](/mobile/core/section-list) components. In general,
this should only be used if you need more flexibility than FlatList or SectionList can provides, e.g. for use with immutable data instead of plain arrays.

Virtualization massively improves the performance and memory consumption of large lists by maintaining a finite render window showing only active
items and replacing all items outside of the render window with appropriately sized blank space. The render window adapts with scrolling behavior,
items are rendered incrementally with _low-pri_ (after any running interactions) if they are far from the visible area, or with _hi-pri_ if they are near the visible area.

```jsx live
const ItemContainer = styled('View', {
  backgroundColor: '$semantic.color.surface.accent.secondary',
  height: 150,
  justifyContent: 'center',
  marginVertical: '$semantic.spacing.sm',
  marginHorizontal: '$semantic.spacing.lg',
  padding: 20,
});

const ItemText = styled('Text', {
  fontSize: 32,
});

const Item = ({ title }) => {
  return (
    <ItemContainer>
      <ItemText>{title}</ItemText>
    </ItemContainer>
  );
};

const getItem = (_data, index) => {
  return {
    id: Math.random().toString(12).substring(0),
    title: `Item ${index + 1}`,
  };
};

render(() => {
  return (
    <View style={{ height: 400 }}>
      <VirtualizedList
        initialNumToRender={4}
        renderItem={({ item }) => {
          return <Item title={item.title} />;
        }}
        keyExtractor={(item) => {
          return item.id;
        }}
        getItemCount={() => {
          return 50;
        }}
        getItem={getItem}
        ListFooterComponent={<Item title="VirtualizedList Footer" />}
        ListHeaderComponent={<Item title="VirtualizedList Header" />}
        ListHeaderComponentStyle={{
          borderColor: '$semantic.color.border.interactive.buttons.active.alt',
          borderWidth: 4,
          marginHorizontal: '$semantic.spacing.lg',
        }}
        ListFooterComponentStyle={{
          borderColor: '$semantic.color.border.interactive.buttons.active.alt',
          borderWidth: 4,
          marginHorizontal: '$semantic.spacing.lg',
        }}
      />
    </View>
  );
});
```

### Best Practices

- **Pagination:** Implement infinite scrolling by utilizing the `onEndReached` prop for large datasets.
- **Use Memoization:** Use [React.memo()](https://react.dev/reference/react/memo) to avoid unnecessary re-renders of list items.
- **Lazy Load Images:** If the list contains images, ensure they are lazy-loaded to avoid consuming memory unnecessarily.
- **Key Management:** Ensure `keyExtractor` returns a unique and stable key to avoid performance degradation caused by reordering or re-rendering items unnecessarily.

## Considerations

- **Internal State:** Internal state is not preserved when content scrolls out of the render window. Ensure all your data is captured in the item data or external stores like _Flux_, _Redux_, or _Relay_.
- **Prop Updates:** This is a `PureComponent` meaning it will not re-render if props remain shallow-equal. Make sure that everything your `renderItem` function depends on is in
  passed as a prop (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on changes. This includes the `data` prop and parent component state.
- **Item Rendering:** To constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill
  rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application.
- **Key Management:** By default, the list looks for a `key` prop on each item and uses that for the React key. Alternatively, you can provide a custom `keyExtractor` prop.

### Accessibility Considerations

- **Focus Retention:** Retain focus and scroll position when adding or removing items from the list.
- **Content Labeling:** Ensure each list item has accessible labels or descriptions for screen readers.

### Performance Considerations

- **Windowing:** Adjust the `initialNumToRender` and `windowSize` props to strike a balance between performance and UX.
- **Cell Recycling:** Use `CellRendererComponent` to efficiently recycle rendered items, especially for very large datasets.
- **Avoid Expensive Re-renders:** Avoid triggering unnecessary re-renders by memoizing components or using `React.PureComponent`.

</Tab>

<Tab label="Integration">

<Docs.ClassesTable
  of="VirtualizedList"
  rows={[
    {
      name: 'virtualized-list-root',
      description: 'VirtualizedList root element',
    },
  ]}
/>

<Docs.PropsTable
  of="VirtualizedList"
  inherits={[
    {
      name: 'React Native',
      link: 'https://reactnative.dev/docs/virtualizedlist#props',
    },
  ]}
  rows={[
    {
      name: 'style',
      type: 'Abyss.Style<"VirtualizedList">',
      description:
        'Object or array of objects defining the style of the VirtualizedList component with design tokens',
    },
    {
      name: 'hitSlop',
      type: 'Insets',
      description:
        'This defines how far a touch event can start away from the VirtualizedList',
    },
    {
      name: 'contentContainerStyle',
      type: 'Abyss.Style<"View">',
      description:
        'Object or array of objects defining the style of the content container within the VirtualizedList component with design tokens. These styles will be applied to the virtualized list content container which wraps all of the child views',
    },
    {
      name: 'contentInset',
      type: 'Insets',
      description:
        'The amount by which the virtualized list content is inset from the edges of the virtualized list',
    },
    {
      name: 'endFillColor',
      type: 'Abyss.Color',
      description:
        'The color of the background of the list when there are no items to display',
    },
    {
      name: 'ListFooterComponentStyle',
      type: 'Abyss.Style<"View">',
      description:
        'Styling for internal View for ListFooterComponent. Accepts an object or array of objects which defines the style of the ListFooterComponent within the FlatList component with design tokens',
    },
    {
      name: 'ListHeaderComponentStyle',
      type: 'Abyss.Style<"View">',
      description:
        'Styling for internal View for ListHeaderComponent. Accepts an object or array of objects which defines the style of the ListHeaderComponent within the FlatList component with design tokens',
    },
  ]}
/>

</Tab>
</Tabs>

---
id: design-checklist
title: Design Checklist
---

## Overview

Welcome to Abyss! If you’re just starting out designing with Abyss, you’re in the right place. Here’s a checklist of everything you need to get up and running. Abyss design kit is available in Figma through our enterprise account (Optum/UHG)

## Create Figma Account

<FigmaAccount library="mobile" />

## Using the Designer Toolkit

<UsingDesignToolkit />

## Review Updates

<ReviewUpdates />

---
id: design-kit
title: Design Kit
---

## Overview

<DesignersOverview />

## Designer Toolkit

<DesignerToolkit library="mobile" />

## Guidance

<Guidance library="mobile" />

## Accessibility

<DesignAccessibility library="mobile" />

## Contact Us

<DesignContactUs library="mobile" />

---
id: overview
title: Overview
---

<Intro />

## Design resources

<DesignResources />

## Support

<DesignSupport library="mobile" />

---
id: code-connect
title: Code Connect
---

## Figma Code Connect for Mobile

Figma [Code Connect](https://www.figma.com/code-connect-docs/) is a Design-to-Code tool that aims to scaffold out the code required to implement a Figma Design.

**Note:** Code Connect is currently in alpha and availability for components is changing. We invite you to discuss any enhancements or limitations in our [Github Discussion Topic](https://github.com/uhc-tech/abyss/discussions/3775).

**Note:** Components on the UHC or Global Figma with Code Connect enabled may only be for the V2 version of the component. See the list below for supported components.

## Instructions

This [Demo Video](https://uhgazure.sharepoint.com/teams/AbyssProductUHCProvider/_layouts/15/stream.aspx?id=%2Fteams%2FAbyssProductUHCProvider%2FShared%20Documents%2FHow%20To%20Videos%2Fabyss%2Dcode%2Dconnect%2Dmobile%2Emp4&ga=1&referrer=StreamWebApp%2EWeb&referrerScenario=AddressBarCopied%2Eview%2Ea2480ad0%2D24c0%2D4f27%2Dbecb%2D49e924c87c97) contains an overview of how to use Abyss with Code Connect.

- Open the Figma file with the component you want to use and select the component. In dev mode, the Code Connect will be viewable in the side bar under "Recommended Code".

- The button "Explore component behavior" will allow you to see the component in a preview mode. You can change available props and variants from this panel.
  _Due to Figma limitations, not all possible combinations will be available through here. Check Abyss documentation._

```jsx render
<img
  src="/code-connect/code-connect-example.png"
  alt="Code Connect Example with Badge"
  role="presentation"
/>
```

#### Slot limitations

At this time, code connect does not support slots. If you need to use a slot, you will need to manually add it to the code after copying it from Code Connect.
The recommended code section does not show the actual slot element's code.

```jsx render
<img
  src="/code-connect/slot-example.png"
  alt="Code Connect Example with Slots"
  role="presentation"
/>
```

### Supported Components

<Docs.CodeConnectTable platform="mobile" />

---
id: abyss-admirals
title: Abyss Admirals
isHidden: true
---

## Who are Abyss Admirals?

<div style={{ display: 'flex', alignItems: 'flex-start' }}>
  <div style={{ marginRight: '8px' }}>
    <div>
      An <strong>Abyss Admiral</strong> is a highly specialized role for a
      software engineer who is a dedicated member of a product delivery team.
      The most basic and essential function of an Admiral is to act as a bridge
      between the core Abyss ecosystem and the product team leveraging the
      framework.
    </div>
    <br />
    <div>
      Acting as representatives or ambassadors for their products, Admirals
      enable the adoption of a{' '}
      <strong>scalable, federated software development model</strong> by sharing
      the Abyss community's best practices with their teams. As subject matter
      experts for Abyss, Admirals are encouraged to guide and mentor their
      engineering teams, empowering them to take advantage of the benefits of
      working in a collaborative enterprise environment.
    </div>
  </div>
  <img
    width="300"
    src="/img/graphics/abyss_admirals.png"
    alt="Abyss Admirals"
  />
</div>

## Benefits for Product Stakeholders

It's very important for product stakeholders to understand that an Admiral's involvement in their new responsibilities will <strong>reduce their capacity for delivering sprint work</strong> as a standard individual contributor. However, by allocating enough time for the role, Admirals will enable engineering scrum teams to measurably improve both quality and delivery metrics. It's recommended to dedicate between **30% - 50%** of an Admiral's capacity for this role, but could be up to 100% depending on the size and scope of the project.

Product stakeholders will be able to capitalize on the efficiencies gained by leveraging the collective knowledge and shared solutions that are accessible through the broader Abyss community. The benefits of staffing a dedicated Admiral on your product include:

- **Accelerated Solution Development:**
  When delivery teams are asked to identify and create solutions to common problems, they’ll need to do so in between developing new features which can result in delays. An Admiral assists their product teams at critical moments by eliminating these bottlenecks and offering proven solutions, which in turn increases the speed of delivery.
  <br />
  <br />
- **Minimized Duplication of Work:**
  The Abyss team facilitates the creation of reusable digital assets such that, when the business makes a new request, an Admiral can utilize a similar solution that was built previously for another team rather than building a new one from scratch, greatly minimizing cost and time to value.
  <br />
  <br />
- **Consistent Product Quality:**
  It’s reasonable to assume that most teams will not be evenly balanced when it comes to experience and skill levels, resulting in products being built with different techniques and standards. Admirals can ensure that the quality of development is both consistent and in accordance with the established standards of other products built with Abyss.
  <br />
  <br />
- **Expansive Specialist Network:**
  When working with an Abyss Admiral, product stakeholders obtain access to a network of highly experienced and qualified specialists including software architects, lead engineers, UX designers, accessibility experts who are motivated to craft the best product experiences possible.

## Benefits for Engineering Managers

It's very important for engineering managers to understand that an Admiral's involvement in their new responsibilities will <strong>reduce their capacity for delivering sprint work</strong> as a standard individual contributor. However, by allocating enough time for the role, Admirals will enable engineering scrum teams to measurably improve both quality and delivery metrics. It's recommended to dedicate between **30% - 50%** of an Admiral's capacity for this role, but could be up to 100% depending on the size and scope of the project.

Engineering managers will be able to capitalize on the efficiencies gained by leveraging the collective knowledge and shared solutions that are accessible through the broader Abyss community. The benefits of staffing a dedicated Admiral on your delivery team include:

- **Reduced Software Fragmentation:**
  When individual teams are developing within disconnected, siloed environments, they’ll often discover multiple different approaches to solve the same problem. Admirals can act as advisors to prevent this additional overhead from occurring by raising awareness of pre-existing solutions.
  <br />
  <br />
- **Promote Engineering Growth:**
  For an engineer who is eager to progress further along their career path, the Admirals program offers an elevated set of responsibilities for overseeing software projects. Since this role is both highly technical and relationship-oriented, coupled with a sense of personal accountability, Admirals can leverage this experience to explore their interest in management or technology leadership roles.
  <br />
  <br />
- **Accountability for Essential Tasks:**
  Engineering teams are often overburdened with upkeep and maintenance related chores because they are given a lower priority than feature work. By assigning an Admiral to each project, engineering managers can verify that code quality, versioning, and peer review processes are being observed.
  <br />
  <br />
- **Optimized Outcomes:**
  Admirals reduce the time and cost of development through specialization and economies of scale. By tapping into a centralized community of knowledge, skills, and experience, the Admirals program is able to streamline access to those scarce capabilities while also facilitating balanced, cohesive engineering teams.

## Admiral Assignments

- **Upgrade Abyss Versions:**
  It's highly beneficial to keep your product up-to-date with the newest versions of Abyss. Inform your engineering team and product stakeholders of any new components, tools, or patterns your application can leverage.

  - **Review the [release notes](/mobile/releases/) after a release** to determine the level of effort for upgrading to the latest version.
  - **Run the command "npm run abyss"** to automatically upgrade all Abyss packages in your project.
  - **Support for new features and defects** will only be included in new versions.
    <br />
    <br />

- **Monitor Code Quality:**
  As an Admiral, the accountability of maintaining high standards for code quality starts with you. Become well-versed in JavaScript, React, ESLint, and SonarQube anti-patterns and shepherd your team away from these pitfalls, reducing the burden of unrestrained technical debt and extending the lifespan of your codebase.

  - **Remediate runtime errors & warnings** observed in the browser's developer console for your product.
  - **Inspect problems reported by [ESLint](https://eslint.org/docs/latest/rules)** and discuss rule modifications with other Admirals.
  - **Triage issues identified by [Sonar](https://sonar.optum.com)** to ensure your product meets code quality benchmarks.
    <br />
    <br />

- **Manage Pull Requests:**
  Within the GitHub repository for your product, you should encourage your team to open pull requests regularly. By consulting with other Admirals, you are in the most well-suited position to act as a code reviewer for your team.

  - **Open draft PR's early** in the sprint to give you and your team enough time to review and offer feedback on the approach.
  - **Offer comments and conduct reviews** for each PR before approving.
  - **Merge PR's in a timely manner** to improve time-to-build metrics for your product.
    <br />
    <br />

- **Leverage Assets:**
  Admirals should strive to identify all of the usable assets that exist within Abyss, as well as the network of individuals involved. Becoming familiar with the abstract concepts of a framework will elevate the engineering maturity of your team.

  - **Research code developed for Abyss** to understand the patterns for consistent, repeatable software practices.
  - **Review and update documentation** which demonstrates guidance for best practices, guidelines, and considerations.
  - **Foster relationships with key experts** who possess very specific and unique skill sets who can influence the growth of your product.
    <br />
    <br />

- **Continuous Learning:**
  To be successful, Admirals should provide thought leadership, direction, and appropriate recommendations for their teams and the Admiral community. The ability to both absorb and transfer knowledge is essential.

  - **Have a self-starter attitude** and a passion for growing your career by being surrounded by like-minded engineers.
  - **Seek opportunities for learning** by reading developer blogs, attending tech conferences, and networking with other Admirals.
  - **Familiarize yourself with industry trends** by researching and recommending techniques for application development.
    <br />
    <br />

- **Sustainable Software:**
  When left unchecked, the sustainability of an application can continuously deteriorate. Admirals are able to counteract this by taking appropriate measures to establish a healthy development environment and extend the lifespan of a product.

  - **Maintain a log of tech debt** and track the ongoing scope of maintenance tasks incurred from past sprints.
  - **Conduct frequent pair programming** sessions with your team to guide current feature development.
  - **Discuss upcoming requirements** with architects to establish a clear path for future stories in your product pipeline.
    <br />
    <br />

- **Abyss Contributions:**
  With the Admiral contribution process, the development process for new assets can be accelerated by building the solution yourself as the need arises; rather than waiting for your idea to reach the top of the Abyss core backlog.

  - **Determine the priority** for framework enhancements based on your product delivery schedule.
  - **Discuss new ideas in [Office Hours](#abyss-office-hours)** with the core team and other Admirals.
  - **Follow the [Contribution Workflow](#contribution-workflow)** shown below to share your proposals with the framework.

## Admiral Developers Guide

If an existing Abyss component doesn't meet your product's requirements, you can follow this guide for building and testing changes within your application's codebase. Start by cloning the package structure of abyss within your product, such as **'src/abyss/mobile/ui/Badge'** demonstrated below. If you are creating a new component, you can start with a similar one as a template, otherwise cloning the existing component is the recommended approach.

```txt
└── packages
    └── mobile
        ├── node_modules
        ├── src
        |   └── ui
        |       └── Badge
        |           ├── index.js
        |           └── Badge.jsx
        └── package.json
```

Next, replace the relative imports with absolute paths to **@uhg-abyss/mobile**. You can use any combination of Abyss package imports, open source libraries, and custom JavaScript dependencies to build your component.

```jsx
import React from 'react';
import PropTypes from 'prop-types';
import { styled } from '../../tools/styled';
import { useAbyssProps } from '../../hooks/useAbyssProps';
```

Replace with:

```jsx
import React from 'react';
import PropTypes from 'prop-types';
import { styled } from '@uhg-abyss/mobile/tools/styled';
import { useAbyssProps } from '@uhg-abyss/mobile/hooks/useAbyssProps';
```

Finally, to test your component changes, modify your import path by changing **'@uhg-abyss/mobile/ui/Badge'** to **'@src/abyss/mobile/ui/Badge'** which will use your local Abyss component. Once you have fully verified your changes, you can submit a new Pull Request back to [Abyss](https://github.com/uhc-tech/abyss/pulls) and showcase your updates in the Abyss office hours. Once merged, your contributions will be available in the next release!

## Contribution Workflow

    As an Abyss Admiral the workflow for a contribution goes as follows:

    1. Office Hours: Discuss proposal for new components, designs, architecture, and tools with other Admirals.
    2. Abyss Contact us: If idea can be re-used, submit a new request with Abyss "Contact Us" form.
    3. Develop Locally: Follow the steps in Admiral developers guide to create re-usable asset locally in your product.
    4. Abyss GitHub: Before opening a new Pull Request, ensure that all requirements are met for UX, branding, and accessibility guidelines.
    5. Abyss Office Hours: Demo proposed feature with Abyss core team and other Admirals.
    6. Abyss Github: Pull Request undergoes modifications from feedback, acceptance, quality checks and merge.

    The contribution will end with the finalized abyss packages

![Contribution Workflow](/img/graphics/abyss_admirals_flowchart.png)

## Abyss Office Hours

| Day       | Time                    | Meeting                                                                                                                                                                                                                                                                   |
| --------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Tuesdays  | 3:00 - 4:00 PM **CST**  | [Join Teams Meeting](https://teams.microsoft.com/l/meetup-join/19%3ameeting_YjVlMDM3OTgtY2ExYi00OTU0LWIyYTYtODk0NGUwN2E2MmUz%40thread.v2/0?context=%7b%22Tid%22%3a%22db05faca-c82a-4b9d-b9c5-0f64b6755421%22%2c%22Oid%22%3a%226e73a16f-0cf1-4fd2-9501-31c2c9038e9b%22%7d) |
| Thursdays | 9:00 - 10:00 AM **CST** | [Join Teams Meeting](https://teams.microsoft.com/l/meetup-join/19%3ameeting_YjVlMDM3OTgtY2ExYi00OTU0LWIyYTYtODk0NGUwN2E2MmUz%40thread.v2/0?context=%7b%22Tid%22%3a%22db05faca-c82a-4b9d-b9c5-0f64b6755421%22%2c%22Oid%22%3a%226e73a16f-0cf1-4fd2-9501-31c2c9038e9b%22%7d) |

---
id: abyss-contributors
title: Abyss Contributors
---

## Overview

First of all, thank you for your interest in contributing to Abyss. All of your contributions are valuable to the project! There are several ways you can get involved in the Abyss community and become a contributor:

- **Share Abyss:** Share the link to [Abyss](https://abyss.uhc.com) with members of your product team, and we'd be happy to discuss how we can help support your application.
- **Improve documentation:** Help us improve the [Abyss Docs](https://github.com/uhc-tech/abyss/tree/main/products/abyss-docs-web) by fixing incomplete or missing sections, examples, and explanations.
- **Provide feedback:** The team at Abyss are constantly working to make the project better, please let us know what features you would like to see with the [Contact Us](/mobile/contact-us/) form.

## Abyss Code Repo

```jsx render
() => {
  const packages = [
    'api',
    'core',
    'desktop',
    'ext',
    'infra',
    'mobile',
    'parcels',
    'utility',
    'web',
  ];
  const products = ['assets', 'docs', 'ext', 'scaffold', 'storybook'];
  return (
    <Layout.Stack alignItems="left" space={12}>
      <Text>
        {' '}
        The Abyss source code monorepo contains both core packages and products
      </Text>
      <Text fontWeight="bold"> Packages:</Text>
      <Chip.Group>
        {packages.map((item) => {
          return (
            <Chip key={item} isTag>
              {item}
            </Chip>
          );
        })}
      </Chip.Group>
      <Text fontWeight="bold">Products:</Text>
      <Chip.Group>
        {products.map((item) => {
          return (
            <Chip key={item} isTag>
              {item}
            </Chip>
          );
        })}
      </Chip.Group>
      <Layout.Space space={2} />
      <Docs.Button
        variant="outline"
        size="$sm"
        href="https://github.com/uhc-tech/abyss"
        after={
          <Icon
            title="github"
            size="$sm"
            color="$semantic.color.icon.interactive.rest.primary"
          >
            {`<svg viewBox="0 0 16 16">
      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" /></svg>`}
          </Icon>
        }
      >
        Visit
      </Docs.Button>
    </Layout.Stack>
  );
};
```

### Setting Up Project Locally

For the essential system tools to get Abyss running on your local development environment, visit our [workspace setup](/mobile/developers/workspace-setup) guide.

To set up, clone the [abyss](https://github.com/uhc-tech/abyss) repository:

```bash
# Make the abyss-projects directory
mkdir abyss-projects && cd abyss-projects

# Clone the abyss repository
git clone https://github.com/uhc-tech/abyss.git
```

<br />

Afterwards, install the dependencies for `abyss` on your machine:

```bash
# Go into the abyss directory
cd abyss

# Install abyss dependencies
npm i
```

<br />

Then you are ready to start `abyss-docs` on your machine:

```bash
npm run docs
```

### Commit Conventions

Head to the [Abyss](https://github.com/uhc-tech/abyss) source code for updates and additions to our Abyss NPM packages and documentation. With several contributors working in these repos daily, it's important to write your commit messages to be as descriptive as possible.

Commit Convention:

```
[area] Optional title: Message
```

<br />

Examples:

```
[docs] Button: Edit accessibility section

[@uhg-abyss/ui] useLoadingOverlay: Add remove handler

[@uhg-abyss/core] Fix non-prod deployment scripts

[@uhg-abyss/ui] Carousel: New feature added

[docs] Doc scripts: Fix docs deployment script
```

### Git Branch Names

Naming the branch you're working on helps repository maintainers understand the changes being made when the PR is opened. Using consistent branch name prefixes also allows build tools to automatically categorize the branches using labels. Branch names should be all lowercase (with the exception of US and DE) and include hyphens between words. All branches are divided into four groups:

- **story/#######** - Changes associated with a User Story, use the unique 7-digit number from Rally followed by a task description.

- **defect/#######** - Changes associated with a Defect, use the unique 7-digit number from Rally followed by a task description.

- **refactor/** - Changes to the repo that aren't documented in Rally are considered refactors, so use the task portion to add detail to your branch name.

- **release/** - Used specifically by build tools, this branch name is exclusive to release notes and documentation leading up to a new release.

Examples:

```
git checkout -b story/US2434515-developer-toolkit

git checkout -b defect/DE308703-button-accessibility

git checkout -b refactor/select-list-multi-docs

git checkout -b story/US1533842-use-loading-overlay
```

<br />

Branch Name Rules:

- Branch prefix must start with **story**, **defect**, **refactor**, or **release**
- Branch name must be only **lowercase letters, numbers, and hyphens**
- **US###** and **DE###** are valid character exceptions

## Secure Groups

Visit [secure.uhc.com](https://secure.uhc.com) to request permissions groups:

- **abyss_contributors**: For write access to [abyss](https://github.com/uhc-tech/abyss) code repositories

## Developer Tools

Abyss is built using a list of trusted resources. Below are links to what makes up the framework of Abyss Mobile.

<Docs.NpmLinkAlert />

<br />

```jsx render
() => {
  const devLinks = [
    {
      id: 1,
      name: 'React Native',
      href: 'https://reactnative.dev/',
    },
    {
      id: 2,
      name: 'Emotion',
      href: 'https://emotion.sh/docs/introduction',
    },
    {
      id: 3,
      name: 'React Navigation',
      href: 'https://reactnavigation.org/docs/getting-started',
    },
    {
      id: 4,
      name: 'npm ',
      href: 'https://docs.npmjs.com/about-npm',
    },
  ];
  return (
    <Layout.Stack>
      <Layout.Group style={{ flexFlow: 'row wrap' }}>
        {devLinks.map((link) => {
          return (
            <Docs.Button
              key={link.href}
              variant="outline"
              style={{
                borderRadius: '5px',
                marginRight: '8px',
                marginBottom: '8px',
              }}
              href={link.href}
              after={
                <IconSymbol
                  icon="arrow_forward"
                  color="$semantic.color.icon.interactive.rest.primary"
                />
              }
            >
              {link.name}
            </Docs.Button>
          );
        })}
      </Layout.Group>
    </Layout.Stack>
  );
};
```

If you're ready to get started with Abyss on your own, checkout the Abyss StarterKit (coming soon) to get started.

## Design Tools

Abyss has a dedicated team of designers creating a Design Kit on Figma. Below are some resources to help developers navigate these tools:

```jsx render
() => {
  const designLinks = [
    {
      id: 1,
      name: 'Abyss Design Kit',
      href: 'https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=1180-3541&t=1l9yUfKeafljt2k0-0',
    },
    {
      id: 2,
      name: 'Figma for developers',
      href: 'https://www.figma.com/best-practices/tips-on-developer-handoff/an-overview-of-figma-for-developers/',
    },
    {
      id: 3,
      name: 'UHC branding',
      href: 'https://brand.uhc.com/design-with-care',
    },
    {
      id: 4,
      name: 'Optum branding',
      href: 'https://brand.optum.com/',
    },
  ];
  return (
    <Layout.Stack>
      <Layout.Group style={{ flexFlow: 'row wrap' }}>
        {designLinks.map((link) => {
          return (
            <Docs.Button
              key={link.href}
              variant="outline"
              style={{
                borderRadius: '5px',
                marginRight: '8px',
                marginBottom: '8px',
              }}
              href={link.href}
              after={
                <IconSymbol
                  icon="arrow_forward"
                  color="$semantic.color.icon.interactive.rest.primary"
                />
              }
            >
              {link.name}
            </Docs.Button>
          );
        })}
      </Layout.Group>
    </Layout.Stack>
  );
};
```

If you're a designer and want to dive deeper into the Abyss Design Kit, visit our Designer Getting Started (coming soon) page to learn more.

<br />

---
id: documentation-guide
title: Documentation Guide
---

## Overview

The documentation pages are organized under the **docs** directory shown below. When adding a new component, tool, or guide to Abyss Docs, create a new markdown.md file under the associated folder.

```txt
abyss-docs-web
└── docs
    └── mobile
        ├── brand
        ├── developers
        ├── hooks
        ├── tools
        └── ui
```

## Markdown Structure

Each markdown file should begin with the following metadata, as an example:

```md
---
id: card
category: Layout
title: Card
description: A single or multi-section container used to display content related to a single subject.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/branch/Sk3MrHYxjT39TKDzDU5LBc/Abyss-Mobile?node-id=12334%3A61355
---
```

<br />

Every doc page is divided into three tabs: Overview, Integration and Accessibility. Within the body of the markdown file, use these tabs to group sections of information.

```
<Tab label="Overview">
  **Overview Content**
</Tab>

<Tab label="Integration">
  **Integration Content**
</Tab>

<Tab label="Accessibility">
  **Accessibility Content**
</Tab>
```

<br />

## Overview Tab

###### Import statement

Add the import statement for the feature like such:

```jsx
import { Alert } from '@uhg-abyss/mobile';
```

###### Component Sandbox

Add Sandbox after the import statement for any components that make sense
to have a sandbox. Inputs are controlled props that can be adjusted by the user using the Sandbox features. Each input contains `prop`, `type` and optionally: `options` and, `defaultValue`.
To create a Sandbox, use the convention below:

```jsx sandbox
{
  component: 'Alert',
  inputs: [
    {
      prop: 'heading',
      type: 'string',
    },
    {
      prop: 'paragraph',
      type: 'string'
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'success', value: 'success' },
        { label: 'warning', value: 'warning' },
        { label: 'error', value: 'error' },
        { label: 'info', value: 'info' },
      ]
    },
  ]
}

<Alert heading="Completed Health Screen:" paragraph="Review of your results are ready.">
  <Alert.Button>Go To Results</Alert.Button>
</Alert>
```

###### Property examples

Following the Sandbox, it's important to show the ability of each property separate of the others. We break each one down, giving it a title, description and jsx example showing variants of that specific property. For example, if you wanted to show the sizes for Button, you'd write:

```
<Button size="small">Small</Button>
<Button size="large">Large</Button>
```

<br />

Since there are multiple visual variants of Button, which use the same sizing convention (`small` & `large`) we can combine the visuals under the one size example by organizing them utilizing the built-in Layout component from the Abyss library. Here's what the combined example looks like:

```
<Layout.Stack grow>
    <Button type="filled" variant="brand">
      Filled Brand
    </Button>
    <Button type="filled" variant="neutral">
      Filled Neutral
    </Button>
    <Button type="filled" variant="destructive">
      Filled Destructive
    </Button>
</Layout.Stack>
```

<br />

To follow the complexity of each prop example, use the following rules to properly document the feature:

- **When organizing the list of examples,** they should be ordered from simple to complex starting with size or width
- **Start each example case** with "Use the `prop-name` property to..." followed by an explanation
- **For props with a pre-set list of variants,** add a sentence listing out the variant options "Variants include `variant-1`, `variant-2`", and so on
- **For props with a default value,** add "The default value is set to `value`"
- **For the customization example section,** include the sentence “If further customization is needed, most styles of `component-name` can be overridden by passing style props to `abyss-component-name`. See the class table on each component for more details”
- **Size and width examples** should include the list of Abyss style sizes
- **Examples may include:** size, width, isDisabled, controlled, uncontrolled, loading, and customization. Take a look at other doc pages for examples of how to best format the component you're documenting

## Integration Tab

Implementing a props table and classes table for the component, and any sub-components gives users an in-depth view of the component without having to visit the code. (The below example is modified for this template. Please refer to the Button component for a full list of props and classes).

Follow these rules when creating a Props Table:

- **Prop name** is lowercase
- **Type** is one of the following: boolean, function, array, shape, number, string, number | string
- **Description** first word is uppercase, followed by a brief description of the props use

Follow these rules when creating a Classes Table:

- **Class name** is lowercase and uses dashes to separate words
- **Description** first word is uppercase, followed by a brief description of the class

#### Example of Integration Tab

<Docs.PropsTable
  aria-labelledby={'Button integration table'}
  of="Button"
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the button component',
    },
    {
      name: 'variant',
      type: "'primary' | 'secondary' | 'tertiary' | 'destructive' | 'alt'",
      description: 'Change the button style',
    },
    {
      name: 'size',
      type: "'large' | 'small'",
      description: 'Set the size of the button',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Callback fired when the button is pressed',
    },
  ]}
/>

<Docs.ClassesTable
  aria-labelledby={'Button class table'}
  of="Button"
  rows={[
    {
      name: 'button-root',
      description: 'Button root element',
    },
    {
      name: 'button-label',
      description: 'Button label element',
    },
  ]}
/>

## Accessibility Tab

This tab is important to be as thorough and in-detail as possible, adhering to the WAI-ARIA design guidelines. Check out the accessibility documentation on [React Native](https://reactnative.dev/docs/accessibility) for guidance during development.

Follow this pattern when creating the Accessibility tab:

- **Brief description** write a description about the component, and link to the WAI-ARIA website page referring to the component
- **Sandbox** allows our A11Y partners to practice assistive technology on the component in a dedicated field
- **Keyboard interactions table** referring to the WAI-ARIA keyboard interactions, create a table with all interactions usable for the specific component
- **Additional guidance** note any additional guidance features of the component, including (but not limited to) Decorative Icons, Loading State, etc.

#### Example of Accessibility Tab

An alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task. Dynamically rendered alerts are automatically announced by most screen readers, and in some operating systems, they may trigger an alert sound. It is important to note that, at this time, screen readers do not inform users of alerts that are present on the page before page load completes.

Adheres to the [Alert WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#alert).

```jsx live
<Layout.Stack grow>
  <Alert
    heading="Error Alert"
    paragraph="error paragraph"
    variant="error"
    onClose={() => {}}
  />
  <Alert
    heading="Success Alert"
    paragraph="success paragraph"
    variant="success"
    onClose={() => {}}
  />
  <Alert
    heading="Info Alert"
    paragraph="info paragraph"
    variant="info"
    onClose={() => {}}
  />
  <Alert
    heading="Warning Alert"
    paragraph="warning paragraph"
    variant="warning"
    onClose={() => {}}
  />
</Layout.Stack>
```

<br />

<Docs.AccessibilityTable
  aria-labelledby={'Alert accessibility table'}
  heading="Alert"
  rows={[
    {
      name: 'Tab',
      description: 'Puts focus on the Button inside of the Alert',
    },
    {
      name: 'Enter',
      description:
        'When focus is on the Button, pressing enter will press the Button inside the Alert',
    },
    {
      name: 'Space',
      description:
        'When focus is on the Button, pressing space will press the Button inside the Alert',
    },
  ]}
/>

###### Decorative Icons

In the alert below, since the word “Warning” appears next to the icon, the icon is considered decorative and must be ignored by assistive technology. The icon does not need to meet the 3:1 minimum contrast requirement against its adjacent color.

```jsx live
<Alert heading="Warning Alert" paragraph="warning message" variant="warning" />
```

###### Close Button Guidance

Keyboard operation: if the “close” button is used on the alert, it must be keyboard accessible. A keyboard only user must be able to tab to the button, and activate it with the space bar and the enter key.

```jsx live
<Alert
  heading="Alert With Close Button"
  paragraph="alert message"
  onClose={() => {}}
/>
```

<br />

Note: per the WAI ARIA specification, when the “alert” role is used, the user should not be required to close the alert. In this case, it is assumed that the close button is provided as a convenience and the user is not explicitly required to close the alert.

---
id: mobile-contribution-standards
title: Mobile Contribution Standards
---

## Overview

Thanks for getting involved with Abyss! If you've made it here we'll assume you've reviewed the [Abyss Contributors](/mobile/developers/contributors/abyss-contributors) page. To make the contribution process go as smooth as possible, we've laid out our code standards and development steps for you below.

As a reminder the component you are developing should _already_ be approved by product, design, and accessibility.

## Code Standards

While components may differ, most Abyss Mobile UI components have the following...

The outermost styled element will be named `ComponentNameRoot`. The rest of the names should describe what they contain. <br/> Below is a simplified example from [Modal](/mobile/ui/modal/)

```
<ModalRoot>
    <Header>
        <ActionButton> </ActionButton>
        <TitleContainer>
            <Title> </Title>
        </TitleContainer>
    </Header>

    // code

</ModalRoot>
```

<br />

The `useAbyssProps` hook must be imported in each component. This allows consuming teams to customize the style of the component and gives the ability to assign unique test-ids.

```
const abyssProps = useAbyssProps(props);
```

`abyssProps` are spread into each element that will allow for customization and testing. The class names start with the component name followed by a dash and then the element name. These names should be simple and self-explanatory. For example, `button-root` describes the root element and `button-label` describes the label element.

```
<ButtonRoot {...abyssProps('button-root')} >
<Label {...abyssProps('button-label')} >{label}</Label>
</ButtonRoot>
```

<br />

Add accessibility props when applicable.

```
<ButtonRoot
    accessible
    accessibilityRole="button"
    accessibilityState={{ disabled: isDisabled }}
    >
</ButtonRoot>
```

<br />

Don't forget the display name.

```
Button.displayName = '@uhg-abyss/mobile/ui/Button';
```

### Types, Props, and Classes

All the types, props, and classes used in the component must be defined in a `ComponentName.types.ts` file. This file should export a TypeScript interface for the component's props, classes, and any reused types.<br />
Below is a simplified example of Button:

```
export type ButtonClasses = {
  'button-root': Abyss.Class<'Animated.Pressable'>;
  'button-label': Abyss.Class<'Animated.Text'>;
};
```

Unless a prop is marked as required in the TypeScript interface, be sure to add a default value where applicable (and within the component itself).

```
export interface ButtonProps
  extends Abyss.BaseProps<ButtonClasses, 'Animated.Pressable'> {
  /**
   * The contents of the button component
   */
  children?:
    | React.ReactNode
    | ((state: PressableStateCallbackType) => React.ReactNode);
  /**
   * Defines the button type (style)
   * @default 'filled'
   */
  type?: 'filled' | 'outline' | 'text';
  /**
   * Defines the button size
   * @default 'large'
   */
  size?: 'large' | 'small';
    /**
   * Disables the button
   * @default false
   */
  isDisabled?: boolean;
  /**
   * Callback fired when the Button is pressed
   */
  onPress?: Abyss.GestureResponderEventHandler;
}
```

```
export interface ButtonRef extends Abyss.PressableRef {}
```

<br />

Once the `ComponentName.types.ts` file is complete import the necessary elements into the `ComponentName.tsx` file.

```
import type { ButtonProps, ButtonRef } from './Button.types';
```

The full props spread may look something like the example below. <br/><br/> `ButtonRoot` is the outermost `Pressable` component, so `size` and `type` are passed in for styling, as well as all the props pertaining to press interactions: `onPress`, `onPressIn`, `onPressOut`, and `disabled`. `{...abyssProps('button-root')}` is added, and for the Button component specifically, accessibility props are only within the `ButtonRoot` element.

```
<ButtonRoot
    onPress={onPress}
    accessible
    accessibilityRole="button"
    accessibilityState={{ disabled: isDisabled }}
    size={size}
    type={type}
    {...props}
    {...abyssProps('button-root')}
    onPressIn={handlePressIn}
    onPressOut={handlePressOut}
    disabled={isDisabled}
>
    <Label {...abyssProps('button-label')}>{children}</Label>
</ButtonRoot>
```

## Development Workflow

###### 1. Developer Refinement

Before starting development, you are **required** to attend our Mobile Developer refinement session. Here we will discuss the development plan for the component you are contributing. This includes outlining code already available to be used within your component, as well as what we expect to be reusable from your component.

###### 2. Development

Please review our [Code Standards](/mobile/developers/contributors/mobile-contribution-standards/#code-standards) before you get started, and remember we're here to help! Feel free to reach out an Abyss Mobile developer and attend [office hours](/mobile/contact-us/?card=meetings) for anything that comes up during development.

###### 3. Documentation

A component is not complete without proper documentation. Please see our [Documentation Guide](/mobile/developers/contributors/documentation-guide/) for more details and examples. Be sure to continue to update documentation with any changes from the Peer, QE, and A11y reviews.

###### 4. Peer Review

After you've completed development, make a pull request and reach out to the Abyss Mobile developer that has been assigned to review your component. They will do an initial review, as well as check any code changes after QE and Accessibility testing. Any changes requested bring you back to [development](/mobile/developers/contributors/mobile-contribution-standards/#2-development).

###### 5. Quality Engineering Review

Once the PR is complete, your component will be sent to our quality engineer for testing. Any changes requested bring you back to [development](/mobile/developers/contributors/mobile-contribution-standards/#2-development).

###### 6. Accessibility Review

After your component has been approved by QE, it will be passed on to our accessibility engineer for testing. You are responsible for adding accessibility elements within your component. Check out our [Accessibility Testing](/mobile/developers/testing/accessibility-testing/) page and the [React Native documentation](https://reactnative.dev/docs/accessibility) for further guidance. Any changes requested bring you back to [development](/mobile/developers/contributors/mobile-contribution-standards/#2-development). If the changes made only pertain to accessibility, the component does not need to be reviewed again by QE.

## Definition of Done

By contributing to Abyss, you are committing to the full development cycle. A component is complete when all changes have been made and accepted by the Peer, QE, and Accessibility reviews, and is thoroughly documented.

---
id: ai-code-gen-how-to
title: How to use AI to perform code generation "CodeGen" with Abyss
sidebar_label: AI Code Generation
searchSiteWide: true
---

<CodeGenIntro />

## Design-to-Code

<DesignToCode />

## Prompt-to-Code

<PromptToCode />

---
id: installation
title: Installation
---

There are two ways to go about installing Abyss - either by creating a new Abyss app or by adding Abyss to an existing application.

## Create Abyss App (Recommended)

The recommended way to get started with Abyss is by using `create-abyss-app`.
Go to our [tutorials](/mobile/developers/tutorials/create-abyss-app/) to get started!

### Advantages

- **Zero Configuration Setup**
  - All tools are already configured that are essential for React development. Tools like Webpack (for bundling your code) and Babel (for using modern JavaScript features).
- **Easy To Use**
  - You can start developing and see those results immediately.
- **Optimized Build Output**
  - Provides optimized production builds out of the box, including minification, concatenation, and efficient loading (e.g., code splitting).
- **Community and Support:**
  - Many teams are already using the `create-abyss-app`, it offers significant support, regular updates, and a large number of resources for troubleshooting.

## Existing Application

For teams that want to use Abyss web within an existing React framework (i.e. NextJs) or are unable to migrate their existing application to a create-abyss-app you can still use Abyss within your application.

### Peer dependencies

Please note that react and react-native are peer dependencies, meaning you should ensure they are installed before installing Abyss.

```jsx
"peerDependencies": {

   "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
   "react-native": ">=0.63.0 <1",
   "react-native-safe-area-context": ">=3.0.0",
   "react-native-screens": ">=2.0.0",
   "react-native-svg": ">=12.0.0"
   "@react-navigation/bottom-tabs": ">=5.0.0",
   "@react-navigation/native": ">=5.0.0",
   "@react-navigation/native-stack": ">=5.0.0",
},
```

### Install Abyss Mobile

To add Abyss mobile to an existing application, first install the Abyss dependencies:

```jsx
npm install @uhg-abyss/mobile
```

Then, wrap your application root component with [`ThemeProvider`](/mobile/ui/theme-provider).
The `ThemeProvider` enables global theming for your application, with the option to customize or rely on the default styles of Abyss components. Utilizing React's context, it distributes your theme to all nested components.

```jsx
import { ThemeProvider } from '@uhg-abyss/mobile/ui/ThemeProvider';

const theme = createTheme('uhc');

function Demo() {
  return (
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  );
}
```

## Upgrading Abyss

Abyss releases [New Versions](/mobile/releases/) on a biweekly basis. For further details, refer to our [Versioning Guide](/mobile/developers/versioning-guide).
Benefits to staying current with the latest version of Abyss include:

- **Adhering to Brand Guidelines**
  - Align with the latest branding guidelines, ensuring your application maintains a consistent look and feel with the overall brand identity.
- **Enhanced Security**
  - Address vulnerabilities and security enhancements to protect your application against emerging threats.
- **Improved Accessibility**
  - As accessibility standards evolve, Abyss updates provide enhancements and fixes that help ensure your application is accessible to all users, including those with disabilities.
- **Access to New Components Features**
  - Gain access to new components and features that can enrich the user experience and offer new functionality for your application.
- **Bug Fixes**
  - Addresses defects that improve the stability and performance of your application.
- **Efficient Upgrades and Minimal Regression Testing**
  - Staying updated with the latest version simplifies the upgrade process and minimizes related regression testing efforts.

### How To Upgrade Abyss

You can upgrade Abyss by running the following command in the root of your application:

```bash
npm install @uhg-abyss/mobile@latest
```

```bash
yarn add @uhg-abyss/mobile@latest
```

---
id: v1-to-v2-guide
title: V1 to V2 Guide
---

Abyss V2 is finally here! We've worked hard to make the transition from V1 as smooth as possible.

## Troubleshooting

If you encounter any issues during the migration process, please post your questions, problems, or findings on GitHub Discussions. This will allow all teams to see, respond to, and benefit from shared solutions. If someone has already asked a similar question, consider adding your insights or upvoting the existing discussion rather than creating a duplicate. This helps keep the conversation organized and makes it easier for everyone to find relevant information.

[Go to the V1 → V2 Migration Discussion](https://github.com/uhc-tech/abyss/discussions/5083)

## Getting started

The steps listed below will guide you through the migration process.

### 1. Update to the latest V1 version

Make sure your project is running on the [most recent V1 release](/mobile/releases) before starting any migration steps. This will help minimize potential issues during the migration process.

### 2. Update React

In Abyss V2, we have updated our peer dependencies for React and React DOM. Notably, **React 16 and 17 are no longer supported** in Abyss V2. You should ensure your application is running on React 18 or 19 before migrating to Abyss V2.

```json
// V1
- "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"

// V2
+ "react": "^18.0.0 || ^19.0.0"
```

### 3. Update React Native

In Abyss V2, we have updated our peer dependencies for React Native. Notably, **React Native versions below 0.70 are no longer supported** in Abyss V2. You should ensure your application is running on React Native 0.70 or higher before migrating to Abyss V2.

```json
// V1
- "react-native": ">=0.64.0 <1"

// V2
+ "react-native": ">=0.70.0 <1"
```

### 4. Update component usage

**It is strongly recommended** to replacing your V1 components with their V2 counterparts before updating to Abyss V2. This way, when you move to V2, most of your components will only need to update the import names (e.g., `V2Button` → `Button`) instead of making all the prop changes at the same time.

Navigate to the [Component Changes](/mobile/developers/migration/v2/components/) guide to see a list of components with breaking changes between V1 and V2, along with details on what has changed for each component.

**Note:** Some components have breaking changes between V1 and V2 without a V2 counterpart. Please refer to the [Component Migration Notes](/mobile/developers/migration/v2/components#component-migration-notes) section for more details.

#### Deprecations

Below is a list of tools, hooks, and components that are no longer available in Abyss V2.

<DeprecationTable library="mobile" />

### 5. Update to the latest V2 version

Now that you've completed all preparation steps, you can update your project to use Abyss V2! Assuming that you have already replaced the deprecated V1 components with their recommended alternatives and switched all other components to their V2 counterparts, the migration to Abyss V2 should be straightforward.

Most of the remaining work should be **import renaming** rather than large-scale refactoring.

#### Remove the V2 prefix

We had released a number of V2 components in V1 with a `V2` prefix to allow teams to start using them early and ease the migration process. Now that you are migrating to Abyss V2, you will need to **remove the `V2` prefix** from these components in your imports. If you used an alias when importing, make sure to update that as well.

```jsx
// Before
import { V2Button } from '@uhg-abyss/mobile/ui/Button';
import { V2Coachmark as Coachmark } from '@uhg-abyss/mobile/ui/Coachmark';

// After
import { Button } from '@uhg-abyss/mobile/ui/Button';
import { Coachmark } from '@uhg-abyss/mobile/ui/TextInput';
```

#### Updating components with breaking changes

As mentioned above some components have breaking changes between V1 and V2 without a V2 counterpart. Please update these components as needed based on the documentation found in the [Component Changes](/mobile/developers/migration/v2/components/) section.

Example of a breaking change:

```jsx
// V1 (1.X)
<Toast variant="success">
  This is the toast message content
</Toast>
// V2 (2.X)
<Toast variant="success" paragraph="This is the toast message content" />
```

## UHG theme

The UHG theme has been **removed in Abyss V2**. To learn more about this change and how to migrate, please navigate to the [UHG Theme](/mobile/developers/migration/v2/v2-uhg-theme) documentation.

## Theming

Some values in the overrides provided to the [createTheme function](/mobile/tools/create-theme) have been removed to better align with brand design guidelines. If your project is using any of the following overrides, you will need to remove them.

### deprecatedOptumIcons

The `deprecatedOptumIcons` override has been removed as the old Optum brand icons were not aligned with the Optum brand guidelines. Removing this override will ensure that your application uses the correct icons. No changes to your codebase are necessary beyond removing this override from your theme configuration.

Note that it was also possible to override a single `BrandIcon` with the `useDeprecated` prop. This prop is no longer supported in V2 and should be removed from all `BrandIcon` instances.

## AI-Powered Migration Copilot

To help with component migration, we provide an AI context package that works with tools like GitHub Copilot, ChatGPT, or other AI code assistants. This context enables the AI to understand V1 to V2 changes and provide accurate migration assistance.

#### Using the Migration Copilot

- [Download the this zip folder](/migration/mobile/ai-migration-context.zip)
- Extract the zip to your project root directory:

```
your-project-root/
├── abyss-migration-ai-context/
│   ├── ABYSS-MIGRATION-ASSISTANT.md
|   └── MigrationData.json
├── package.json
└── src/
    └── ... (your project files)

```

Add the context to your AI tool of choice (e.g., Copilot, ChatGPT, etc.) referencing the folder location.

Next you can prompt the AI tool with questions like:

```bash
Migrate this file from V1 to V2 of Abyss
Migrate the `Button` component from V1 to V2 of Abyss
```

Here is an example showcasing migrating a file from V1 to V2 of Abyss using the AI tool:

```bash
Migrate #file:Mobile.tsx from V1 to V2 of Abyss
```

**Note:** This is the result after using the one prompt above. No additional prompts were needed to get the correct result

```jsx render
<img
  src="/migration/mobile/ai-v1-v2.png"
  alt="AI Migration Example from V1 to V2 of Abyss"
  role="presentation"
/>
```

---
id: components
title: Component Changes
---

## Overview

This guide focuses on breaking prop changes to be aware of when migrating from Abyss V1 to V2. These include:

- Props that have been removed
- Props whose behavior or typings have been updated
- Props whose names have been changed but whose functionality remains the same.

This guide does **not** cover:

- New props added in V2
- Class changes
- Token changes
- Additional features and enhancements

For complete documentation of all available props, including new features added, refer to each component's dedicated documentation page.

:::tip AI-Powered Component Migration
Need help with component migration? Use our [AI-powered migration tool](/mobile/developers/migration/v2/v1-to-v2-guide#ai-powered-migration-copilot) to help convert V1 components to their V2 equivalents with proper prop mapping.
:::

## Component migration notes

While many components in V1 had a dedicated `V2`-prefixed counterpart to allow teams to adopt enhancements gradually , **not all components followed this pattern**.
In some cases, breaking changes were introduced directly in the V2 release without creating a separate `V2` component name.

To help identify this:

- **Migration possible while staying on 1.X — via V2 Component or usage adjustments:** The updated (V2) form of this component is already included in the latest 1.X release. You can migrate without upgrading to 2.X by switching to the V2 Component or updating your usage to avoid deprecated features (such as removing or replacing certain props).
- **Requires 2.X upgrade — migration available only in major V2:** The updated component or breaking change is only available starting in major version 2.X, where it becomes the default without any “V2” prefix.

## Badge

<MobileBadgeMigration />

## Banner

<MobileBannerMigration />

## Button

<MobileButtonMigration />

## Carousel

<MobileCarouselMigration />

## CellGroup

<MobileCellGroupMigration />

### CellGroup.Cell

<MobileCellMigration />

## Chip

<MobileChipGroupMigration />

## Coachmark

<MobileCoachmarkMigration />

## DonutChart

<MobileDonutChartMigration />

## IconBrand

<MobileIconBrandMigration />

## LoadingSpinner

<MobileLoadingSpinnerMigration />

## NeedHelp

<MobileNeedHelpMigration />

## Popover

<MobilePopoverMigration />

## Rating

<MobileRatingMigration />

## SelectInput

<MobileSelectInputMigration />

## SelectInputMulti

<MobileSelectInputMultiMigration />

## Skeleton

<MobileSkeletonMigration />

## Tabs

<MobileTabsMigration />

## TextField

<MobileTextFieldMigration />

## TextInput

<MobileTextInputMigration />

## Timeline

<MobileTimelineMigration />

## Toast

<MobileToastMigration />

---
id: v2-uhg-theme
title: UHG Theme
---

## Overview

The `uhg` theme will be removed in Abyss V2.

**Why is the UHG theme being removed?**

The `uhg` theme does not have an official set of design tokens, which means it cannot be aligned to design standards.

## Migration

All teams currently using the `uhg` theme should migrate to the `uhc` theme as soon as possible.

**Note:** All actions in this guide can/should be implemented **now** in Abyss V1.

The `uhg` and `uhc` themes are very close in appearance. If UHG-specific styling is required, you can override using tokens.

**Step by-step migration instructions are provided below.**

**Step 1:** Update the theme used in your application from `uhg` to `uhc`.

```jsx
// Old usage
const theme = createTheme('uhg');

// New usage
const theme = createTheme('uhc');
```

**Step 2:** If you are using `Brandmark` or `IconBrand` components, update them to use the `brand` prop.

```jsx
<IconBrand
  icon="music"
  size={48}
  brand="uhg" // If you don't set this, it will default to your current theme (uhc)
/>
```

**Note:** Teams are welcome to use the `uhc` theme assets (logos, icons) if they prefer the updated branding.

**Step 3:** Override tokens (if needed)

If you need to preserve specific UHG token styling from V1, you can override tokens when creating your theme.

To learn more about overriding tokens, see the [Flatten Tokens](/mobile/tools/flatten-tokens) and [Create Theme](/mobile/tools/create-theme) documentation.

**Step 4:** Test your application to ensure all components have the desired appearance.

As stated above the `uhg` and `uhc` themes are very similar, so minimal changes should be needed. However, it's important to verify that everything looks correct after the migration.

**Note:** Many teams may find the `uhc` theme meets their visual and functional needs without additional customization.
Unless your team has specific styling requirements or a business request for a different look, you should expect **little to no changes** beyond the theme switch.

## Smooth Upgrade to V2

By completing the steps outlined above **now** in Abyss V1, you will have already addressed all `uhg` changes.

When Abyss V2 is officially released, your application should have **no `uhg`-specific breaking issues**, allowing for a smooth upgrade process.

## Future of the UHG theme

There is a possibility that a fully defined UHG theme - with its own complete set of design tokens - may be created in the future.
However, this is **not currently planned** and should not be expected in the near term.

Teams should use the `uhc` theme moving forward.

---
id: legacy-tokens-migration
title: Legacy Tokens Migration
---

For a long time, Abyss provided a set of "tokens" to allow teams to access standardized values for colors, typography, spacing, and more. These legacy tokens have been **removed** in Abyss V2 in favor of our new [design token system](/mobile/brand/{brand}/tokens).

Teams that were not using these legacy tokens previously will not need to make any changes to their codebase beyond the normal [component migrations](/mobile/developers/migration/v2/components), but teams that were using them will need to perform some migration steps. The largest challenge is that there is not a one-to-one mapping between the legacy tokens and the new design tokens. To better align with the Abyss V2 Design System, we highly recommend that teams migrate to the new design tokens. However, for teams wanting to minimize up-front work, there is an alternative. Both methods are described below.

## Method 1: Mapping to new design tokens (Preferred)

The preferred method for migrating away from legacy tokens is to update your usages of them to the new design tokens. This will ensure your application is fully aligned with the Abyss V2 Design System and will benefit from any future updates to the design tokens. Additionally, as the legacy tokens have been removed, this method will make it easier for the Abyss team to provide support.

When migrating to the new design tokens, you will need to identify the appropriate design token that matches the legacy token you were using. Generally speaking, this will mean finding the closest matching [semantic token](/mobile/brand/{brand}/tokens?tab=semantic+tokens) and replacing the legacy token with that semantic token.

```jsx
<Box color="$primary2">
  Legacy token usage
</Box>

<Box color="$semantic.color.surface.container.secondary">
  New design token usage
</Box>
```

<br/ >

**Note:** While it is possible to use [core tokens](/mobile/brand/{brand}/tokens?tab=core+tokens) directly, we strongly recommend using semantic tokens whenever possible. Semantic tokens provide context for how a token should be used, which helps ensure consistency across your application.

Additionally, there will likely be some cases where a direct mapping is not possible. In these cases, you will either need to:

- Use a hard-coded value that matches the legacy token (not recommended),
- Find a semantic token that is close enough, or
- Create a custom token in your theme override to match the legacy token (see [Method 2](#method-2-adding-custom-tokens) below).

See our [migration table](#legacy-tokens-migration-table) below for help finding the appropriate tokens.

## Method 2: Adding custom tokens

The quickest way to migrate to V2 with minimal token changes is to reintroduce any legacy tokens used in your application as custom tokens in your [theme overrides](/mobile/tools/create-theme#example) in the `createTheme` tool. These tokens will be added into the theme and can be used in the same way as before.

The reason we discourage this method is that it adds extra maintenance overhead for your team and is inconsistent with the Abyss V2 Design System. However, it is valid as a temporary solution to minimize up-front work and allow your team to migrate to the new design tokens over time.

## Legacy tokens reference

Below are all the legacy tokens we supported in Abyss V1. You can use this as a reference when migrating your application to use the new design tokens.

<LegacyTokens />

## Legacy tokens migration table

To help with your migration, we've additionally created an interactive table that shows each legacy token, its resolved value, and all matching semantic tokens in the new system. You can click on any token to copy it to your clipboard.

**Note:** Some legacy tokens may not have direct semantic token matches. In these cases, you'll need to either find a semantically similar token, use a core token directly, or add a custom token to your theme.

<LegacyTokensMigrationTable />

---
id: overview
title: Overview
---

Abyss is a full-stack mobile application framework that enables you to build products faster and easier than ever. It features a comprehensive set of tools that weaves together the best parts of [React Native](https://reactnative.dev/) and [GraphQL](https://graphql.org). By taking common patterns and modularizing them into accessible and reusable packages, Abyss is designed to accelerate the development of production-ready React Native applications.

The framework handles all heavy lifting behind the scenes, allowing you to focus on core business logic specific to your product. Automated code quality tools analyze, identify, and correct errors in the code, giving developers real-time feedback and training to standardize programming styles. With improvements in project maintainability, scalability, and source code quality, Abyss aims to deliver the best overall development experience.

Developers looking to use Abyss must have, or obtain access via Secure, to Artifactory (repo1.uhc.com)

<!-- ## Building with Abyss
Before you begin, be sure to follow our [workspace setup](/mobile/developers/workspace-setup) guide.

The Abyss scaffold project includes all of the tools and libraries pre-installed you need to start developing. Try importing the React Native code below and see!

```jsx
import { Alert } from '@uhg-abyss/mobile';

export const App = () => {
  return (
    <Alert
      title="Task Completed!"
      description="You have successfully imported an Abyss component!"
      variant="info"/>
    );
};
```

<br/>

```jsx render
<Alert title="Task Completed!"
      description="You have successfully imported an Abyss component!"
      variant="info"/>
``` -->

## Learning React Native

Just starting your journey with React Native? Abyss is a framework built on top of the popular React Native library. To get started, visit the [React Native documentation](https://reactnative.dev/docs/environment-setup). If you are interested in learning high-level concepts, check out the [getting started guide for React Native](https://reactnative.dev/docs/getting-started).

## Developer Tools

Abyss is built using a list of trusted resources. Below are links to what makes up the framework of Abyss Mobile.

<Docs.NpmLinkAlert />

<br />

```jsx render
() => {
  const devLinks = [
    {
      id: 1,
      name: 'React Native',
      href: 'https://reactnative.dev/',
    },
    {
      id: 2,
      name: 'Emotion',
      href: 'https://emotion.sh/docs/introduction',
    },
    {
      id: 3,
      name: 'React Navigation',
      href: 'https://reactnavigation.org/docs/getting-started',
    },
    {
      id: 4,
      name: 'npm ',
      href: 'https://docs.npmjs.com/about-npm',
    },
  ];

  return (
    <Layout.Stack>
      <Layout.Group style={{ flexFlow: 'row wrap' }}>
        {devLinks.map((link) => {
          return (
            <Docs.Button
              key={link.href}
              variant="outline"
              style={{
                borderRadius: '5px',
                marginRight: '8px',
                marginBottom: '8px',
              }}
              href={link.href}
              after={
                <IconSymbol
                  icon="arrow_forward"
                  color="$semantic.color.icon.interactive.rest.primary"
                />
              }
            >
              {link.name}
            </Docs.Button>
          );
        })}
      </Layout.Group>
    </Layout.Stack>
  );
};
```

## Support

If you're ready to get started with Abyss for your next project, check out our [Contact Us](/mobile/contact-us) page. Submit a new support request and let us know how we can help your team. If you found Abyss to be helpful, please [give us a star on github](https://github.com/uhc-tech/abyss)!

---
id: style-customization
title: Style Customization
description: Guide to override styles for Abyss components.
design: https://www.figma.com/file/tk08Md4NBBVUPNHQYthmqp/Abyss-Design-System?node-id=0%3A1
---

## Overview

Every Abyss component supports style customization using class names. Customization should be kept at a minimum, as the Abyss components are set to create a standard across all UHG affiliated products.

## Prop Overrides

To apply your styles to any component, go to the **Integration** tab under component documentation and find the classes table. The class name column will tell you how to target specific elements in any component.

### Button Example

Here you have a default `Button` component.

```jsx live
<Button>Brand Button</Button>
```

<br />

Similarly, to customize `Button` component, you can target specific class names to change the styles. The `Button` component should maintain a 3:1 color contrast ratio. Please visit the [accessibility](/mobile/resources/accessibility) documentation page to read more on designing an accessible component.

<Docs.ClassesTable
  aria-labelledby={'Button class table'}
  of="Button"
  rows={[
    {
      name: 'button-root',
      description: 'Button root element',
    },
    {
      name: 'button-label',
      description: 'Button label element',
    },
  ]}
/>

```jsx
// Add styles to Button
<Button
  styles={{
    'abyss-button-root': {
      backgroundColor: '#d9f6fa',
    },
    'abyss-button-label': {
      color: '#002677',
    },
  }}
/>
```

```jsx live
<Layout.Group>
  <Button
    styles={{
      'abyss-button-root': {
        backgroundColor: '#d9f6fa',
      },
      'abyss-button-label': {
        color: '#002677',
      },
    }}
  >
    Custom Button
  </Button>
  <Button
    styles={{
      'abyss-button-root': {
        backgroundColor: '#002677',
      },
      'abyss-button-label': {
        fontWeight: 900,
        color: '#d9f6fa',
      },
    }}
  >
    Custom Button
  </Button>
</Layout.Group>
```

## States

Components that allow for additional customization depending on their state can be configured by passing the desired style to the Abyss class using the `&:state` selector. Available states will be displayed on the integration tab.

```jsx live
() => {
  const today = new Date();
  const day = today.getDate();
  const [value, setValue] = useState(today);

  return (
    <Calendar
      value={value}
      onChange={setValue}
      excludeDate={(date) => {
        return date.getDay() === 6;
      }}
      styles={{
        'abyss-calendar-day-label': {
          '&:selected': { color: '$semantic.color.text.body.primary' },
          '&:disabled': { color: '#99A8C9' },
        },
        'abyss-calendar-selection-circle': {
          backgroundColor: '#d9f6fa',
        },
      }}
    />
  );
};
```

---
id: quality-engineering
title: Quality Engineering
description: QE Testing Overview
---

## Dedication To Quality

<DedicationToQuality />

## Test Plan

<TestPlan />

## Automation Testing

Automation testing of Abyss components is a top priority. Currently, our automation tests consist of the following:

### Web

<AutomationWeb />

### Mobile

<AutomationMobile />

### Unit Testing

<UnitTesting />

## Manual Testing

<ManualTesting />

## FAQ

<FAQ />

---
id: end-user-spec
title: End User Specifications
description: Abyss Spec
---

## Version Requirements

<Requirements />

## Testing and Review

<Testing />

## How are these numbers calculated?

<Metrics />

## Abyss Web

<WebTable />

## Abyss Mobile

<MobileTable />

<br />
<br />

\* Last updated March 2025. To ensure this document is kept up to date and relevant, it should be revisited and revised with the latest metrics information on a set schedule, such as quarterly or bi-annually.

---
id: component-testing
title: Component Testing
description: Guide on how to facilitate testing of Abyss Mobile components.
---

## testID

To facilitate the usage of component testing libraries such as **[React Native Testing Library](https://callstack.github.io/react-native-testing-library/docs/getting-started)** you have the option of adding a `testID` attribute to a component's corresponding elements. By passing `testID` in as a prop with a value of the desired string id this attribute will be appended to all component elements that include a unique Abyss class name. Please see the Integration tab and the Classes sub-heading for each component to determine which elements will receive this test id. The resulting `testID` value will be a concatenated string that combines the value passed in with the prop and the element's unique class name.

For example, the following code:

```jsx live
<Notification date={new Date(2025, 4, 13)} testID="my-test-ID">
  Add your dependents to your account to view their claims and coverage.
</Notification>
```

will render the following structure:

```jsx
<View
  accessibilityRole="button"
  accessible={true}
  testID="my-test-ID-abyss-notification-root"
>
  <View testID="my-test-ID-abyss-notification-dot" />
  <View>
    <Text testID="my-test-ID-abyss-notification-text">
      Add your dependents to your account to view their claims and coverage.
    </Text>
    <Text testID="my-test-ID-abyss-notification-date">May 13, 2025</Text>
  </View>
</View>
```

## Change testing strategy

By default, the `testID` will have an abyss class name appended to it. If you do not want this, you can use the [`TestProvider`](/mobile/ui/test-provider) component to change the testing strategy.

The `TestProvider` component has two strategies: `"class"` and `"root"`.

### Root strategy

The `"root"` strategy applies the `testID` only to the root element of the component. This means you won't be able to target nested elements within the Abyss component for testing.

For example, let's say the `testID` of [ProgressBar](/mobile/ui/progress-bar) is set to `"your-test-ID"`.

```jsx
<TestProvider strategy="root">
  <ProgressBar testID="your-test-ID" />
</TestProvider>
```

You can use the following code to find and test the element:

```jsx
import { render } from '@testing-library/react-native';

const screen = render(
  <TestProvider strategy="root">
    <ProgressBar testID="your-test-ID" />
  </TestProvider>
);
const element = screen.getByTestId('your-test-ID');
```

### Class strategy

The `"class"` strategy (similar to default) allows testing of nested components by appending the Abyss class name to your `testID`. This creates unique identifiers for each element within the component.

For example, let's say the `testID` of [ProgressBar](/mobile/ui/progress-bar) is set to `"your-test-ID"`.

```jsx
<TestProvider strategy="class">
  <ProgressBar testID="your-test-ID" />
</TestProvider>
```

You will have to look at the classes for the ProgressBar component to determine which elements will receive this test ID
and have its class name appended to it.

<Docs.ClassesTable
  of="ProgressBar"
  rows={[
    {
      name: 'progress-bar-root',
      description: 'Progress bar root element',
    },
    {
      name: 'progress-bar-slide',
      description: 'Progress bar slide',
    },
  ]}
/>

The resulting test IDs will be _**`"your-test-ID-abyss-progress-bar-root"`**_ & _**`"your-test-ID-abyss-progress-bar-slide"`**_.

You can then use the following code to find and test an element's subcomponents:

```jsx
import { render } from '@testing-library/react-native';

const screen = render(
  <TestProvider strategy="class">
    <ProgressBar testID="your-test-ID" />
  </TestProvider>
);
const element = screen.getByTestId('your-test-ID-abyss-progress-bar-slide');
```

---
id: accessibility-testing
title: Accessibility Testing
---

## Overview

Mobile accessibility, also known as A11Y, is the design and creation of mobile applications that can be used by everyone regardless of age, device, or disability. Accessibility support is necessary to allow assistive technology to interpret mobile pages. Abyss fully supports building accessible mobile applications and follows the Web Content Accessibility Guidelines [(WCAG 2.1)](https://www.w3.org/WAI/standards-guidelines/mobile/) and the [UHG Accessibility Engineering Standards](https://uhgazure.sharepoint.com/sites/a11y-engineering-standards) by the Accessibility Center of Excellence (ACOE).

The list below are steps to take as a developer to ensure accessibility compliance. Please take a minute to read through the following testing resources and familiarize yourself with how to utilize them for best practices.

## Keyboard Navigation

Use an external Bluetooth keyboard only to navigate the page without using your finger to tap or swipe. A visual indicator, known as the keyboard focus, should appear when navigating content. Look for difficulty reaching or activating interactive components, or if the focus becomes trapped on portions of the screen.

Expected keyboard behavior for custom components is typically the following, but there are exceptions

- Content navigation
  - **Tab** to enter a component
  - Use **arrow keys** to navigate within the component
  - **Tab** to exit the component
- Interacting with CTA or form components
  - **Enter** or **Space** to mimic a tap or press
  - **Arrow keys** to navigate to an item within a list OR mimic a swipe
  - **Tab** to move onto the next item

## Desktop Development Tools

XCode's Accessibility Inspector tool is available for inspecting the code of the application for accessibility features and labels via a mobile emulator.

## Screen Reader Mobile Controls

A Screen Reader is an accessibility tool used primarily by sight-deficient users to navigate computer/mobile content. They interact with applications by reading aloud the content presented in the code. On mobile devices, users utilize either custom tap/swipe controls, Bluetooth keyboards, or both, to interact with the application. These users are impacted the most from lacking A11Y implementation.

Testing with a screen reader on physical mobile devices is important to understand if the code is working effectively for these tools.

Mobile devices provide the following screen readers, each with similar, yet unique functionality

- iOS VoiceOver: [Learn about VoiceOver gestures](https://support.apple.com/guide/iphone/learn-voiceover-gestures-iph3e2e2281/ios)
- Android TalkBack: [Learn about TalkBack gestures](https://support.apple.com/guide/iphone/learn-voiceover-gestures-iph3e2e2281/ios)

## NPM Packages

Most NPM packages rely on axe-core. Set an impact level and start with critical issues then work down. Remember to allow time to fix critical issues in the User Story. Otherwise, the product developers will get frustrated and learn to ignore the errors, which defeats the purpose and doesn't help anyone.

## Linting

For linting rules, work with an Accessibility Engineer to determine what to include there.

## Summary

Remember, the tools/processes mentioned above don't catch all A11Y issues, but they serve as a great start to empowering the team to do some of your own testing.

You can learn more from the Mobile Accessibility page in the [Accessibility Knowledge Center](https://uhgazure.sharepoint.com/sites/accessibility-knowledge-center/SitePages/Mobile-accessibility.aspx).

For further information, reach out to an Accessibility Engineer!

## Accessibility Tools

If you're looking for an in-depth overview of what accessibility standards Abyss is working towards, visit our Abyss [Accessibility page](/web/resources/accessibility).

```jsx render
() => {
  const accessibilityLinks = [
    {
      id: 1,
      name: 'WCAG 2.1',
      href: 'https://www.w3.org/WAI/WCAG21/Understanding/',
    },
    {
      id: 2,
      name: 'Color Contrast Analyser (CCA)',
      href: 'https://webaim.org/resources/contrastchecker/',
    },
    {
      id: 3,
      name: 'W3 Validator',
      href: 'https://validator.w3.org/favelets.html',
    },
    {
      id: 4,
      name: 'Digital A11y',
      href: 'https://www.digitala11y.com/accessibility-bookmarklets-testing/',
    },
    {
      id: 5,
      name: 'React Native Accessibility',
      href: 'https://reactnative.dev/docs/accessibility',
    },
  ];
  return (
    <Layout.Stack>
      <Layout.Group style={{ flexFlow: 'row wrap' }}>
        {accessibilityLinks.map((link) => {
          return (
            <Docs.Button
              key={link.href}
              variant="outline"
              style={{
                borderRadius: '5px',
                marginRight: '8px',
                marginBottom: '8px',
              }}
              href={link.href}
              after={
                <IconSymbol
                  icon="arrow_forward"
                  color="$semantic.color.icon.interactive.rest.primary"
                />
              }
            >
              {link.name}
            </Docs.Button>
          );
        })}
      </Layout.Group>
    </Layout.Stack>
  );
};
```

---
id: create-abyss-app
title: Create Abyss App
---

---

**Note:** <br />We would appreciate any feedback on our tutorial guide. If you are stuck at any time, make sure to contact the Abyss Admiral assigned to your team. If they cannot help, send a help request on our [Contact Page](/mobile/contact-us/).

---

Before starting, be sure to complete the [Workspace Setup](/mobile/developers/workspace-setup/) guide.

### Step 1: Create an App

Now, let's get started. Navigate to your terminal in order to create a new project named **"my-new-app"**. Once there, run the following command:

```bash
npx github:uhc-tech/abyss-app my-new-app
```

### Step 2: Navigate to Project Directory

Next, navigate into the **my-new-app** project directory by running the command below:

```bash
cd my-new-app
```

### Step 3: Run Abyss

Finally, run the following command in order to get localhost running:

```bash
npm run mobile
```

Once you see the screen shown below, you are now up and running with Abyss!

```jsx render:phone
() => {
  const Container = styled('ScrollView', {
    height: '90%',
  });

  const theme = createTheme('uhc');

  const links = [
    {
      heading: 'About Us',
      paragraph: 'Learn more about the Abyss library',
      url: 'https://abyss.uhc.com/web/about',
    },
    {
      heading: 'Components',
      paragraph: 'View the full list of components inside Abyss Mobile',
      url: 'https://abyss.uhc.com/mobile/ui/button',
    },
    {
      heading: 'Tokens',
      paragraph: 'View our palette of color tokens',
      url: 'https://abyss.uhc.com/mobile/brand/uhc/colors/',
    },
    {
      heading: 'Custom Styling',
      paragraph: 'Learn how to customize Abyss components',
      url: 'https://abyss.uhc.com/mobile/developers/style-customization',
    },
    {
      heading: 'Navigation',
      paragraph:
        'Learn to handle moving between screens inside your application',
      url: 'https://abyss.uhc.com/mobile/tools/create-bottom-tab-navigator',
    },
    {
      heading: 'Support',
      paragraph: 'Need help? Visit our support page',
      url: 'https://abyss.uhc.com/mobile/contact-us',
    },
  ];

  return (
    <ThemeProvider theme={theme}>
      <Container contentContainerStyle={{ marginTop: 24 }}>
        <View
          style={{
            alignItems: 'center',
            paddingHorizontal: 16,
            paddingTop: 16,
          }}
        >
          <Image
            accessible
            aria-label="Abyss"
            role="img"
            style={{
              width: 150,
              height: 150,
              opacity: 0.8,
            }}
            source={'/img/logo.svg'}
          />
          <Heading offset={5} style={{ margin: 8 }} role="heading">
            Welcome to Abyss
          </Heading>
          <Text style={{ marginHorizontal: '$semantic.spacing.sm' }}>
            Edit{' '}
            <Text style={{ fontWeight: '$core.font-weight.bold' }}>
              App.tsx
            </Text>{' '}
            to change this screen and then come back to see your edits.
          </Text>
          <Layout.Group
            space={16}
            style={{ marginVertical: '$semantic.spacing.lg' }}
          >
            <Brandmark
              brand="uhc"
              affiliate="uhc"
              variant="lockup"
              color="blue"
              size={80}
            />
            <Brandmark
              brand="uhg"
              affiliate="uhg"
              variant="lockup"
              color="blue"
              size={80}
            />
            <Brandmark
              brand="optum"
              affiliate="optum"
              variant="lockup"
              color="orange"
              size={80}
            />
          </Layout.Group>
        </View>
        <CellGroup>
          {links.map((link) => {
            return (
              <Cell
                style={{ backgroundColor: 'transparent' }}
                key={link.heading}
                heading={link.heading}
                paragraph={link.paragraph}
                onPress={() => window.open(link.url)}
              />
            );
          })}
        </CellGroup>
      </Container>
    </ThemeProvider>
  );
};
```

<br />

Great job, you have successfully created an abyss app!

---
id: import-components
title: Import Components
---

---

**Note:** <br />We would appreciate any feedback on our tutorial guide. If you are stuck at any time, make sure to contact the Abyss Admiral assigned to your team. If they cannot help, send a help request on our [Contact Page](/mobile/contact-us/).

---

<!-- Before starting, be sure to complete the [Create Abyss App](/mobile/developers/tutorials/create-abyss-app/) tutorial. -->

### Step 1: Open App.tsx

In Visual Studio Code, open **my-new-app** project. From here, navigate into **products/mobile**, and open the **App.tsx** file.

```txt
└── products
    └── mobile
        └── App.tsx
```

### Step 2: Import React

Anytime you’re using a react component, make sure to import the following dependency at the top:

```jsx
import React from 'react';
```

### Step 3: Importing Component

Depending on the project requirements, the **@uhg-abyss/mobile/ui**, **@uhg-abyss/mobile/hooks**, and **@uhg-abyss/mobile/tools** libraries have different components in order to assemble products quickly.

There are three ways to import resources: Directly from one of the libraries above, from **@uhg-abyss/mobile**, or from the file for that resource
**@uhg-abyss/mobile/ui/ComponentName**

Let's start with the **Card** component. A Card acts as a container used to display content related to a single subject.

You can access the documentation for the [Card](/mobile/ui/card/) through the Abyss Portal. The import statement for a card can be any of the following:

```jsx
import { Card } from '@uhg-abyss/mobile';
```

```jsx
import { Card } from '@uhg-abyss/mobile/ui';
```

```jsx
import { Card } from '@uhg-abyss/mobile/ui/Card';
```

In **App.tsx**, within the tsx of **App** functional component, insert the following code:

```jsx
<Card style={{ padding: 16, alignItems: 'center' }}>
  <Heading>Hello tutorial</Heading>
  <Text>We did it!</Text>
</Card>
```

### Step 4: Verifying Your Code

Your code in **App.tsx** should now look similar to this:

```jsx
import React from 'react';
import { Image, SafeAreaView, ScrollView, View } from 'react-native';
import {
  createTheme,
  ThemeProvider,
  Layout,
  Text,
  Card,
  Heading,
} from '@uhg-abyss/mobile';

const theme = createTheme('uhc');

function App(): React.JSX.Element {
  return (
    <ThemeProvider theme={theme}>
      <SafeAreaView>
        <ScrollView>
          <View style={{ alignItems: 'center', padding: 16 }}>
            <Image
              accessible
              accessibilityLabel="Abyss Logo"
              style={{
                width: 150,
                height: 150,
                opacity: 0.8,
              }}
              source={require('./assets/Abyss_Logo.png')}
            />
            <Text
              style={{
                marginVertical: '$semantic.spacing.lg',
                fontWeight: '$core.font-weight.bold',
                fontSize: '$core.font-size.h.60',
              }}
            >
              Welcome to Abyss
            </Text>
            <Text style={{ marginHorizontal: '$semantic.spacing.sm' }}>
              Edit{' '}
              <Text style={{ fontWeight: '$core.font-weight.bold' }}>
                App.tsx
              </Text>{' '}
              to change this screen and then come back to see your edits.
            </Text>
            <Layout.Space />
            <Card style={{ padding: 16, alignItems: 'center' }}>
              <Heading>Hello tutorial</Heading>
              <Text>We did it!</Text>
            </Card>
          </View>
        </ScrollView>
      </SafeAreaView>
    </ThemeProvider>
  );
}

export default App;
```

```jsx render
const App = () => {
  const theme = createTheme('uhc');

  return (
    <ThemeProvider theme={theme}>
      <SafeAreaView>
        <ScrollView>
          <View style={{ alignItems: 'center', padding: 16 }}>
            <Image
              accessible
              accessibilityLabel="Abyss Logo"
              style={{
                width: 150,
                height: 150,
                opacity: 0.8,
              }}
              source={'/img/logo.svg'}
            />
            <Text
              style={{
                marginVertical: '$semantic.spacing.lg',
                fontWeight: '$core.font-weight.bold',
                fontSize: '$core.font-size.h.40',
              }}
            >
              Welcome to Abyss
            </Text>
            <Text style={{ marginHorizontal: '$semantic.spacing.sm' }}>
              Edit{' '}
              <Text style={{ fontWeight: '$core.font-weight.bold' }}>
                App.tsx
              </Text>{' '}
              to change this screen and then come back to see your edits.
            </Text>
            <Layout.Space />
            <Card style={{ padding: 16, alignItems: 'center' }}>
              <Heading role="" level={null}>
                Hello tutorial
              </Heading>
              <Text>We did it!</Text>
            </Card>
          </View>
        </ScrollView>
      </SafeAreaView>
    </ThemeProvider>
  );
};

render(() => {
  return <App />;
});
```

<br />

Great job, you have successfully imported components!

---
id: screen-navigation
title: Screen Navigation
---

---

**Note:** <br />We would appreciate any feedback on our tutorial guide. If you are stuck at any time, make sure to contact the Abyss Admiral assigned to your team. If they cannot help, send a help request on our [Contact Page](/mobile/contact-us/).

---

Before starting, be sure to complete the [Create Abyss App](/mobile/developers/tutorials/create-abyss-app/) tutorial.

## Step 1: Create New Files

In Visual Studio Code, open **my-new-app** project.
From here, navigate into **products/mobile/src/navigation**, and create a new file, named **"MyPlanNavigator.tsx"**.

Then, navigate to **products/mobile/src/screens**, and create a new folder named **MyPlan**. Within this folder, we'll be creating 3 files:
**"MyPlanScreen.tsx"**, **"CoverageScreen.tsx"**, and **"index.ts"**.

Your folder structure should look like this:

```txt
└── products
    └── mobile
        ├── src
        |   ├── navigation
        |   |   ├── HomeNavigator.tsx
        |   |   ├── MenuNavigator.tsx
        |   |   └── MyPlanNavigator.tsx
        |   ├── screens
        |   |   ├── Home
        |   |   ├── Menu
        |   |   ├── MyPlan
        |   |   |   ├── CoverageScreen.tsx
        |   |   |   ├── index.ts
        |   |   |   └── MyPlanScreen.tsx
        └── App.tsx
        └── package.json
```

## Step 2: Create MyPlan Screen

Lets create a screen! We'll add a Plan Coverage card.

In **"MyPlanScreen.tsx"**, insert the following code:

```jsx
import React from 'react';
import { View } from 'react-native';
import { Card, Cell, CellGroup, Heading, IconBrand } from '@uhg-abyss/mobile';

export const MyPlanScreen = ({ navigation, route }) => {
  return (
    <View style={{ padding: 16 }}>
      <Card>
        <Heading
          offset={4}
          style={{
            paddingLeft: '$semantic.spacing.lg',
            marginVertical: '$semantic.spacing.lg',
          }}
        >
          Plan Coverage
        </Heading>
        <CellGroup>
          <Cell
            icon={<IconBrand icon="heart" size="$xs" />}
            heading="Coverage & Benefits"
            onPress={() =>
              navigation.navigate('Coverage', {
                benefits: ['Medical', 'Dental', 'Transportation'],
              })
            }
          />
        </CellGroup>
      </Card>
    </View>
  );
};
```

Then in **index.ts** , insert the following export command:

```jsx
// Exporting MyPlanScreen allows us to import and use MyPlanScreen in the Navigator
export { MyPlanScreen } from './MyPlanScreen';
```

In the code above, we have a Cell that navigates to another screen called **Coverage**.
The Coverage screen takes an array of benefits as a parameter.
Let's create that screen.

## Step 3: Create Coverage Screen

```jsx
import React from 'react';
import { View } from 'react-native';
import { Card, Cell, CellGroup, Heading } from '@uhg-abyss/mobile';

export const CoverageScreen = ({ navigation, route }) => {
  // The benefits array from MyPlanScreen
  const { benefits } = route.params;
  return (
    <View style={{ padding: 16 }}>
      <Card>
        <Heading
          offset={4}
          style={{
            paddingLeft: '$semantic.spacing.lg',
            marginVertical: '$semantic.spacing.lg',
          }}
        >
          Coverage & Benefits
        </Heading>
        <CellGroup>
          {benefits.map((benefit) => {
            return <Cell key={benefit} heading={benefit} onPress={() => {}} />;
          })}
        </CellGroup>
      </Card>
    </View>
  );
};
```

```jsx
// Exporting MyPlanScreen allows us to import and use MyPlanScreen in the Navigator
export { MyPlanScreen } from './MyPlanScreen';
```

Then in **index.ts** , add the screen to the list of exports:

```jsx
export { CoverageScreen } from './CoverageScreen';
export { MyPlanScreen } from './MyPlanScreen';
```

## Step 4: Create a Stack Navigator

Next, we will create the stack navigator. In **MyPlanNavigator.tsx**, insert the following code:

```jsx
import React from 'react';
import { Pressable } from 'react-native';
import { createStackNavigator, IconSymbol } from '@uhg-abyss/mobile';
import { MyPlanScreen, CoverageScreen } from '@/screens/MyPlan';

const MyPlanStack = createStackNavigator();

export const MyPlanNavigator = () => {
  return (
    <MyPlanStack.Navigator screenOptions={{ headerShown: true }}>
      <MyPlanStack.Screen
        name="MyPlan"
        component={MyPlanScreen}
        options={{ headerTitle: 'My Plan', headerTitleAlign: 'left' }}
      />
      <MyPlanStack.Screen
        name="Coverage"
        component={CoverageScreen}
        options={{
          headerTitle: 'Plan Coverage',
          headerTitleAlign: 'center',
          headerLeft: ({ goBack }) => (
            <Pressable onPress={goBack}>
              <IconSymbol
                icon="chevron_left"
                color="$button.color.icon.primary"
              />
            </Pressable>
          ),
        }}
      />
    </MyPlanStack.Navigator>
  );
};
```

## Step 5: Add MyPlan Tab

Next, we will add the MyPlan Stack Navigator, to the main tab bar.

Navigate into **products/mobile/App.tsx**. There should already be two existing `Tab.Screen` components, representing the Home and Menu tabs.
Let's place a new `Tab.Screen` in between the existing tabs so that the My Plan tab shows 2nd on the tab bar.

First import the `MyPlanNavigator`.

```jsx
import { MyPlanNavigator } from '@/navigation/MyPlanNavigator';
```

Then add the MyPlan tab

```jsx
...
<Tab.Screen
  options={{
    headerTitle: 'Home',
    tabBarLabel: 'Home',
    tabBarIcon: ({ active }) => (
      <IconCustom
        icon="home"
        size="$md"
        variant={active ? 'darkactive' : 'dark'}
      />
    ),
  }}
  name="HomeTab"
  component={HomeNavigator}
/>
<Tab.Screen
  options={{
    headerTitle: 'My Plan',
    tabBarLabel: 'My Plan',
    tabBarIcon: ({ active }) => (
      <IconCustom
        icon="my_plan"
        size="$md"
        variant={active ? 'darkactive' : 'dark'}
      />
    ),
  }}
  name="MyPlanTab"
  component={MyPlanNavigator}
/>
<Tab.Screen
  options={{
    headerTitle: 'Menu',
    tabBarLabel: 'Menu',
    tabBarIcon: ({ active }) => (
      <IconCustom
        icon="menu"
        size="$md"
        variant={active ? 'darkactive' : 'dark'}
      />
    ),
  }}
  name="MenuTab"
  component={MenuNavigator}
/>
...
```

## Step 6: Create Navigation Types

Navigate to **products/mobile/src/navigation** and open **"navigation.ts"**.

Let's create a new `type` to represent the two screens' parameters. The `MyPlan` screen has no parameters and the `Coverage`
screen has a benefits array of strings.

In **"navigation.ts"**, insert the following code.

```ts
type MyPlanTabParamList = {
  MyPlan: undefined;
  Coverage: { benefits: string[] };
};
```

Now, we can create a `type` for the navigation and route props of each screen.

In **"navigation.ts"**, insert the following code.

```ts
export type MyPlanTabScreenProps<T extends keyof MyPlanTabParamList> =
  CompositeScreenProps<
    BottomTabScreenProps<MyPlanTabParamList, T>,
    RootStackScreenProps<keyof RootStackParamList>
  >;
```

Next, let's navigate back to **"MyPlanScreen.tsx"** and add the `MyPlanTabScreenProps` type in the function's parameter.

```jsx
import { MyPlanTabScreenProps } from '@/types/navigation';

export const MyPlanScreen = ({
  navigation,
  route,
}: MyPlanTabScreenProps<'MyPlan'>) => {
  // rest of the code
};
```

We can do the same thing in **"Coverage.tsx"**.

```jsx
import { MyPlanTabScreenProps } from '@/types/navigation';

export const CoverageScreen = ({
  navigation,
  route,
}: MyPlanTabScreenProps<'Coverage'>) => {
  // rest of the code
};
```

<br />

Great job, you have successfully completed page routing!

---
id: custom-themes
title: Custom Themes
---

---

**Note:** <br />We would appreciate any feedback on our tutorial guide. If you are stuck at any time, make sure to contact the Abyss Admiral assigned to your team. If they cannot help, send a help request on our [Contact Page](/mobile/contact-us/).

---

<!-- Before starting, be sure to complete the [Create Abyss App](/mobile/developers/tutorials/create-abyss-app/) tutorial. //TODO replace with mobile kit doc page when available-->

### Step 1: Create a Theme screen

In Visual Studio Code, open the **my-new-app** project. From here, navigate to **products/mobile/src/screens** and create a new folder named `ThemeScreen`. Within this new folder, create two new files named `index.ts` and `ThemeScreen.tsx`.

```txt
products
└── mobile
    └── src
        └── screens
            └── ThemeScreen
                ├── index.ts
                └── ThemeScreen.tsx
```

### Step 2: Choosing A Theme

In **ThemeScreen.tsx**, we are building our theme using the pre-defined `UHC` theme. You can choose between the different brands shown below:

Abyss offers pre-defined themes: `UHC` and `Optum`. You can find these themes [here](https://github.com/uhc-tech/abyss/tree/main/packages/abyss-mobile/src/tools/theme/variants).

While building **ThemeScreen.tsx**, you can choose any of the brands demonstrated below.

---

[UHC Theme](https://github.com/uhc-tech/abyss/blob/main/packages/abyss-mobile/src/tools/theme/variants/uhc.js)

```jsx
const theme = createTheme('uhc');
```

[Optum Theme](https://github.com/uhc-tech/abyss/blob/main/packages/abyss-mobile/src/tools/theme/variants/optum.js)

```jsx
const theme = createTheme('optum');
```

### Step 3: Customizing your Theme

There are multiple ways to customize and style your application. In this guide, we will focus on color and font customization.

To customize your brand's default themes to align with your product's branding, you can include a configuration object to add or override variables within the theme by adding values inside the **createTheme** function as shown below.

You can learn more about the **createTheme** function [here](/mobile/tools/create-theme).

```jsx
const theme = createTheme('uhc', {
  // Add custom colors
  theme: {
    colors: {
      customColor: 'purple',
    },
    // Add custom fonts
    fonts: {
      customFont: 'UHCSerif',
    },
  },
});
```

### Step 4: Viewing Theme

To view some of your theme updates, import some Abyss components into your project and see how they look!

```jsx sandbox
() => {
  // Add Custom Theme
  const theme = createTheme('uhc', {
    theme: {
      colors: {
        customColor: '#8943fe',
      },
      fonts: {
        customFont: 'UHCSerif',
      },
    },
  });

  return (
    //Define Custom Theme in theme prop
    <ThemeProvider theme={theme}>
      <Text>Standard Text</Text>
      <Text fontFamily="$customFont" color="$customColor">
        Customized Text
      </Text>
    </ThemeProvider>
  );
};
```

<br />

Great job, you have successfully customized a theme!

---
id: styled-components
title: Styled Components
---

---

**Note:** <br />We would appreciate any feedback on our tutorial guide. If you are stuck at any time, make sure to contact the Abyss Admiral assigned to your team. If they cannot help, send a help request on our [Contact Page](/mobile/contact-us/).

---

<!-- Before starting, be sure to complete the [Create Abyss App](/mobile/developers/tutorials/create-abyss-app/) tutorial. //TODO replace with mobile kit doc page when available-->

### Step 1: Create a Styled Screen

In Visual Studio Code, open the **my-new-app** project. From here, navigate to **products/mobile/src/screens** and create a new folder named `StyledScreen`. Within this new folder, create two new files named `index.ts` and `StyledScreen.tsx`.

```txt
products
└── mobile
    └── src
        └── screens
            └── StyledScreen
                ├── index.ts
                └── StyledScreen.tsx
```

### Step 2: Creating Styled Components

You can use the **styled** tool to style existing components or create new styled components. To learn more, check out our [styled](/mobile/tools/styled/) function.

In your **StyledScreen.tsx** file, add the following import statements:

```jsx
import React from 'react';
import { IconBrand, Card, Text, styled } from '@uhg-abyss/mobile';
```

We will create an information box to demonstrate how to work with styled-components.

After your import statements, insert the following code:

```jsx
const StyledCard = styled(Card, {
  padding: '$semantic.spacing.sm',
  flexDirection: 'row',
  alignItems: 'center',
});

const StyledText = styled('Text', {
  fontWeight: '$semantic.font-weight.semibold',
});
```

### Step 3: Rendering Styled Components

This component uses the **StyledCard**, and **StyledText** components we created previously. There are other features available in the [styled](/mobile/tools/styled/) function to customize and edit your components to best fit your product's custom designs.

In the **StyledScreen.tsx** file, add the following code to your **StyledScreen** component:

```jsx
export const StyledScreen = () => {
  return (
    <StyledCard color="$semantic.color.surface.container.emphasis.3">
      <IconBrand
        icon="cost"
        size={30}
        variant="twotonelightcircle"
        brand="uhc"
      />
      <Text>
        Average cost in your area: <StyledText>$980</StyledText>
      </Text>
    </StyledCard>
  );
};
```

### Step 4: Viewing Styled Components

At the end of this tutorial, the code in your **StyledScreen.tsx** file should look like this:

```jsx
import React from 'react';
import { styled, IconBrand, Card, Text } from '@uhg-abyss/mobile';

const StyledCard = styled(Card, {
  padding: '$semantic.spacing.sm',
  flexDirection: 'row',
  alignItems: 'center',
});

const StyledText = styled('Text', {
  fontWeight: '$$semantic.font-weight.semibold',
});

const StyledScreen = () => {
  return (
    <StyledCard color="$semantic.color.surface.container.emphasis.3">
      <IconBrand
        icon="cost"
        size={30}
        variant="twotonelightcircle"
        brand="uhc"
      />
      <Text>
        Average cost in your area: <StyledText>$980</StyledText>
      </Text>
    </StyledCard>
  );
};
```

On your device, your StyledScreen should look like this:

```jsx live
// Create styled Card
const StyledCard = styled(Card, {
  padding: '$semantic.spacing.sm',
  flexDirection: 'row',
  alignItems: 'center',
});

// Create styled Text
const StyledText = styled('Text', {
  fontWeight: '$semantic.font-weight.semibold',
});

const StyledScreen = () => {
  return (
    <StyledCard color="$semantic.color.surface.container.emphasis.3">
      <IconBrand
        icon="cost"
        size={30}
        variant="twotonelightcircle"
        brand="uhc"
      />
      <Text>
        Average cost in your area: <StyledText>$980</StyledText>
      </Text>
    </StyledCard>
  );
};

render(() => {
  return <StyledScreen />;
});
```

<br />

Great job, you have successfully styled components!

---
id: versioning-guide
title: Versioning Guide
---

## Overview

Stability ensures that reusable components and libraries, tutorials, tools, and learned practices don't become obsolete unexpectedly. Stability is essential for the ecosystem around Abyss to thrive.

This document contains the practices that are followed to provide you with a leading-edge UI library, balanced with stability, ensuring that future changes are always introduced in a predictable way.

## Semantic Versioning

Abyss follows [Semantic Versioning 2.0.0](https://semver.org). Abyss version numbers have three parts: major.minor.patch. The version number is incremented based on the level of change included in the release.

- **Major releases** contain significant new features, some but minimal developer assistance is expected during the update. When updating to a new major release, you may need to run update scripts, refactor code, run additional tests, and learn new APIs.
- **Minor releases** contain important new features. Minor releases should be fully backward-compatible; no developer assistance is expected during update, but you can optionally modify your apps and libraries to begin using new APIs, features, and capabilities that were added in the release.
- **Patch releases** are low risk, contain bug fixes and small new features. No developer assistance is expected during update.

<SemanticVersion />

## Release Frequency

A regular schedule of releases helps you plan and coordinate your updates with the continuing evolution of Abyss. In general, you can expect the following release cycle:

- A **major** release typically every year for major changes.
- A **minor** releases every two weeks after each sprint.
- A **patch** release at any time for urgent bugfixes.

## Deprecation Practices

Sometimes **"breaking changes"**, such as the removal of support for select APIs and features, are necessary.

To make these transitions as easy as possible:

- The number of breaking changes is minimized, and migration tools provided when possible.
- The deprecation policy described below is followed, so that you have time to update your apps to the latest APIs and best practices.

## Deprecation Policy

- Deprecated features are announced in the changelog, and when possible, with warnings at runtime.
- When a deprecation is announced, recommended update path is provided.
- Existing use of a stable API during the deprecation period is supported, so your code will keep working during that period.
- Peer dependency updates (React) that require changes to your apps are only made in a major release.

## Tested React Native versions

<ReactNativeVersionTable />

---
id: workspace-setup
title: Workspace Setup
pagination_prev: null
---

## Overview

Developing modern JavaScript applications requires efficient, powerful, and extensible tooling. Consistency across developer machines is a priority when collaborating across highly distributed teams. The following is a guide for installing the preferred environment for JS development.

![workspace setup](/img/graphics/workspace.svg)

## Secure Groups

Visit [secure.uhc.com](https://secure.uhc.com) to request permissions groups:

- **github_users**: To access [github.com](https://github.com)
- **Mac_Admin**: To install software for macOS users only

## VSCode Editor

To write code for UI projects, it is **highly recommended** that you download and install [Visual Studio Code](https://code.visualstudio.com).

![Visual Studio Code](https://code.visualstudio.com/assets/home/home-screenshot-mac-lg-2x.png)

## VSCode Extensions

Recommended extensions will be suggested to you when you visit the VSCode Marketplace.

- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - code syntax validator

ESLint is a JavaScript linting tool which is used for automatically detecting incorrect patterns found in ECMAScript/JavaScript code. It is used with the purpose of improving code quality, making code more consistent, and avoiding bugs. Rules can be configured to look for all kinds of discrepancies due to discouraged code patterns or formatting. Running a Linting tool over the source code helps to improve the quality and readability of the code.

- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - code formatter

Prettier is very popular because it improves code readability and makes the coding style consistent for teams. Developers are more likely to adopt a standard rather than writing their own code style from scratch, so tools like Prettier will make your code look good without you ever having to dabble in the formatting.

## System Essentials

### Xcode

- [Xcode Command Line Tools](https://mac.install.guide/commandlinetools/4.html) (Mac Only)

`xcode-select` contains necessary utilities for software development on macOS. Xcode's simulator will be used for viewing your app in an iOS environment.

```bash
xcode-select --install
```

<br />

**_After install, exit and restart Terminal (CMD + Q)_**

```
$ xcode-select --version
```

### Android Studio

Install [Android Studio.](https://developer.android.com/) The Virtual Device Manager will be use for viewing your app in an Android environment.

### Additional Tools

- [oh-my-zsh](https://ohmyz.sh/) >= 5.3.0 (optional)

`zsh` is an optional upgrade to the native shell which provides a delightful terminal experience.

```bash
sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
```

<br />

**_After install, exit and restart Terminal (CMD + Q)_**

```bash
omz version
```

<br />

---

- [node](https://github.com/nvm-sh/nvm) >= 16.0.0

`nvm` is a great tool for installing and upgrading versions of Node on your system.

```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash
```

<br />

**_After install, exit and restart Terminal (CMD + Q)_**

```bash
nvm --version

nvm install 16 && nvm use 16 && nvm alias default 16
```

<br />

**_After install, exit and restart Terminal (CMD + Q)_**

```
$ npm --version

$ npm config set registry https://repo1.uhc.com/artifactory/api/npm/npm-virtual
```

<br />

---

- [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) >= 2.0.0

`git` is a universal version control system for working collaboratively and efficiently.

```bash
git config --global user.id "YOUR_MS_ID"

git config --global user.email "YOUR_EMAIL@optum.com"
```

## Git Branch Names

Naming the branch you're working on helps repository maintainers understand the changes being made when the PR is opened. Using consistent branch name prefixes also allows build tools to automatically categorize the branches using labels. Branch names should be all lowercase (with the exception of US and DE) and include hyphens between words. All branches are divided into four groups:

- **story/#######** - Changes associated with a User Story, use the unique 7-digit number from Rally followed by a task description.

- **defect/#######** - Changes associated with a Defect, use the unique 7-digit number from Rally followed by a task description.

- **refactor/** - Changes to the repo that aren't documented in Rally are considered refactors, so use the task portion to add detail to your branch name.

- **release/** - Used specifically by build tools, this branch name is exclusive to release notes and documentation leading up to a new release.

Examples:

```
git checkout -b story/US2434515-developer-toolkit

git checkout -b defect/DE308703-button-accessibility

git checkout -b refactor/select-list-multi-docs

git checkout -b story/US1533842-use-loading-overlay
```

<br />

Branch Name Rules:

- Branch prefix must start with **story**, **defect**, **refactor**, or **release**
- Branch name must be only **lowercase letters, numbers, and hyphens**
- **US###** and **DE###** are valid character exceptions

---
id: use-animation
category: Utilities
title: useAnimation
description: Use to create standardized animation types for Abyss Mobile components
design: https://www.figma.com/proto/wCMblLsq9TxAQvKzY3EfCt/branch/c6ve0gNrTGpdwBIuJehC3n/Abyss-Mobile?page-id=41951%3A175&type=design&node-id=41951-176&viewport=741%2C524%2C0.06&t=33q3lqs409fRYj6B-1&scaling=scale-down-width&starting-point-node-id=41951%3A176&show-proto-sidebar=1
---

```jsx
import { useAnimation } from '@uhg-abyss/mobile';
```

## Usage

`useAnimation` hook standardizes the animation types for Abyss components and simplifies additional customization. The hook returns `animate`, `value`, `interpolations`, as well as other [Animated](https://reactnative.dev/docs/animated#methods) functions used throughout Abyss.

```jsx
export const useAnimation = (value: number, config: AnimationConfig) => {
  ...
  return {
    animate,
    value: animatedValue,
    interpolations,
    createAnimation,
    add,
    subtract,
    multiply,
    divide,
    delay,
    parallel,
    loop,
    sequence,
  };
};
```

## Animate

The `animate` function requires a toValue be passed in, with the option for overrides and a callback function.

```jsx
const animate = (
  toValue: number,
  configOverride?: Partial<AnimationConfigType>,
  callback?: Animated.EndCallback
) => {
  return createAnimation(toValue, configOverride).start(callback);
};
```

```jsx live
() => {
  const { animate, value, interpolations } = useAnimation(1, {
    easing: 'gentle',
    interpolations: {
      background: {
        inputRange: [0.95, 1],
        outputRange: [
          '$core.color.brand.100',
          '$semantic.color.surface.container.status.info.saturated',
        ],
        tokenType: 'colors',
      },
    },
  });

  const AnimatedButton = styled(Animated.createAnimatedComponent(Pressable), {
    justifyContent: 'center',
    alignItems: 'center',
    padding: '$semantic.spacing.lg',
    borderRadius: 100,
    alignSelf: 'center',
  });

  return (
    <AnimatedButton
      onPressIn={() => {
        animate(0.95);
      }}
      onPressOut={() => {
        animate(1);
      }}
      style={{
        transform: [{ scale: value }],
        background: interpolations.background,
      }}
    >
      <Text
        color="$semantic.color.text.body.alt"
        fontWeight="$core.font-weight.bold"
      >
        Press Me
      </Text>
    </AnimatedButton>
  );
};
```

### Overrides

By default the animation type is set to `'timing'`. Additional types supported are `'spring'` and `'instant'` with the following animation config open to override:

```jsx
interface AnimationConfig extends BaseAnimationConfig {
  type?: 'spring' | 'timing' | 'instant';
  interpolations?: Record<string, InterpolationConfigType>;
  delay?: number | undefined;
  // timing
  easing?: Easing;
  duration?: number | undefined;
  // spring
  overshootClamping?: boolean | undefined;
  restDisplacementThreshold?: number | undefined;
  restSpeedThreshold?: number | undefined;
  velocity?: number | { x: number, y: number } | undefined;
  bounciness?: number | undefined;
  speed?: number | undefined;
  tension?: number | undefined;
  friction?: number | undefined;
  stiffness?: number | undefined;
  mass?: number | undefined;
  damping?: number | undefined;
}
```

## Interpolations

The `interpolations` prop can take in multiple interpolation objects to be used on the same animated value.

```jsx
const { value, animate, interpolations } = useAnimation(1, {
  easing: 'gentle',
  interpolations: {
    backgroundColor: {
      inputRange: [0.95, 1],
      outputRange: [
        '$semantic.color.surface.container.status.info.saturated',
        '$core.color.brand.100',
      ],
      tokenType: 'colors',
    },
    opacity: {
      inputRange: [0.95, 1],
      outputRange: [0, 1],
    },
  },
});
```

```jsx live
() => {
  const { animate, value, interpolations } = useAnimation(1, {
    easing: 'gentle',
    interpolations: {
      background: {
        inputRange: [0.95, 1],
        outputRange: ['#00BED5', '$core.color.brand.100'],
        tokenType: 'colors',
      },
      opacity: {
        inputRange: [0.95, 1],
        outputRange: [0.8, 1],
      },
    },
  });

  const Label = styled(Animated.Text, {
    color: '$semantic.color.text.body.alt',
    typography: '$semantic.typography.p.xs-bold',
    marginTop: '$semantic.spacing.xs',
  });

  const AnimatedTabButton = styled(
    Animated.createAnimatedComponent(Pressable),
    {
      justifyContent: 'center',
      alignItems: 'center',
      padding: '$semantic.spacing.lg',
      borderRadius: 10,
      alignSelf: 'center',
    }
  );

  return (
    <AnimatedTabButton
      onPressIn={() => {
        animate(0.95);
      }}
      onPressOut={() => {
        animate(1);
      }}
      style={{
        transform: [{ scale: value }],
        background: interpolations.background,
      }}
    >
      <IconCustom variant={'darkactive'} size={24} icon={'my_plan'} />
      <Label
        style={{
          opacity: interpolations.opacity,
        }}
      >
        My Plan
      </Label>
    </AnimatedTabButton>
  );
};
```

## Additional Functionality

Other Animated methods currently used throughout Abyss components can also be returned.

```jsx
const parallel = (
  animations: Animated.CompositeAnimation[],
  parallelConfig?: Animated.ParallelConfig
) => {
  return Animated.parallel(animations, parallelConfig);
};

const loop = (
  animation: Animated.CompositeAnimation,
  loopConfig?: Animated.LoopAnimationConfig
) => {
  return Animated.loop(animation, loopConfig);
};

const sequence = (animations: Animated.CompositeAnimation[]) => {
  return Animated.sequence(animations);
};

const delay = (time: number) => {
  return Animated.delay(time);
};

const add = (num: number) => {
  return Animated.add(animatedValue, num);
};

const subtract = (num: number) => {
  return Animated.subtract(animatedValue, num);
};

const divide = (num: number) => {
  return Animated.divide(animatedValue, num);
};

const multiply = (num: number) => {
  return Animated.multiply(animatedValue, num);
};
```

## Accessibility Integration

The `useAnimation` hook has built-in integration with the [`useReduceMotion`](/mobile/hooks/use-reduce-motion) hook. This ensures that animated components automatically respect the user's "Reduce Motion" accessibility setting without requiring additional handling.

When "Reduce Motion" is enabled, the `useAnimation` hook adjusts the animation type to `'instant'`, minimizing motion effects. This makes it easier to create accessible components that align with user preferences.

---
id: use-device-orientation
category: Utilities
title: useDeviceOrientation
description: Used to retrieve the orientation of the mobile device
---

```jsx
import { useDeviceOrientation } from '@uhg-abyss/mobile';
```

## Usage

`useDeviceOrientation` measures the width and height of the screen and returns `'landscape'` or `'portrait'`.

```jsx
const orientation = useDeviceOrientation();
const iconSize = orientation === 'landscape' ? 20 : 24;

return <IconCustom icon="home" variant={'darkactive'} size={iconSize} />;
```

---
id: use-form
category: State Management
title: useForm
description: useForm is a hook for defining, validating and submitting forms.
sourceIsTS: true
---

```jsx
import { useForm } from '@uhg-abyss/mobile';
```

## Usage

The `useForm` hook is used to define, validate, and submit forms in Abyss. Use `useForm` along with the [FormProvider](/mobile/ui/form-provider)
component in order to better manage your forms and fully utilize the capabilities of form management within Abyss.
Abyss components that can be used with useForm have a `model` prop that is used to bind the component to the form state.
Validations can be defined on each component using the `validations` prop, which accepts an object with validation rules.
If a component fails validation, it will display an error message based on the validation rules defined.
When a form is successfully submitted, the function passed to the `onSubmit` prop will be called with the form data.

```jsx live
() => {
  const form = useForm();

  const onSubmit = (data) => {
    // Do something on submit
    alert(`FormData:  ${JSON.stringify(data)}`);
  };

  return (
    <FormProvider state={form} onSubmit={onSubmit}>
      <InputField
        data-testid="firstName"
        label="First Name"
        model="firstName"
        validations={{ required: true }}
        showValidations={false}
      />
      <InputField
        data-testid="lastName"
        label="Last Name"
        model="lastName"
        validations={{ required: true }}
        showValidations={false}
      />
      <Layout.Space />
      <Button submit>Submit</Button>
    </FormProvider>
  );
};
```

## Default Values

The defaultValues prop populates the entire form with default values. It supports both synchronous and asynchronous assignments of default values.

```jsx live
() => {
  // Default Values Passed into useForm
  const form = useForm({
    defaultValues: {
      firstName: 'John',
      lastName: 'Doe',
    },
  });

  const onSubmit = (data) => {
    alert(`FormData:  ${JSON.stringify(data)}`);
  };

  return (
    <FormProvider state={form} onSubmit={onSubmit}>
      <InputField
        label="First Name"
        model="firstName"
        validations={{ required: true }}
        showValidations={false}
      />
      <InputField
        label="Last Name"
        model="lastName"
        validations={{ required: true }}
        showValidations={false}
      />
      <Layout.Space />
      <Button submit>Submit</Button>
    </FormProvider>
  );
};
```

## Form State

This object contains information about the form state. If you want to subscribe to formState via useEffect, make sure that you place the entire formState in the optional array.

```jsx
const form = useForm();

const {
  errors, // An object with field errors
  isDirty, // Set to true after the user modifies any of the inputs.
  isValid, // Set to true if the form doesn't have any errors.
  isValidating, // Set to true during validation.
  isSubmitting, // true if the form is currently being submitted; false if otherwise.
  isSubmitted, // Set to true after the form is submitted.
  isSubmitSuccessful, //	Indicate the form was successfully submitted without any Promise rejection or Error being thrown within the handleSubmit callback.
  submitCount, //	Number of times the form was submitted.
  touchedFields, // An object containing all the inputs the user has interacted with.
  dirtyFields, // An object with the user-modified fields.
} = form.formState;
```

## Watch

This will watch specified inputs and return their values. It is useful for determining what to render.

```jsx live
() => {
  const form = useForm();

  const onSubmit = (data) => {
    alert(`FormData:  ${JSON.stringify(data)}`);
  };

  // Watch one field
  const WatchField = form.watch('firstName');

  // Target specific fields by their names
  const WatchFields = form.watch(['firstName', 'lastName']);

  // Watch everything by passing no arguments
  const WatchAllFields = form.watch();

  return (
    <React.Fragment>
      <FormProvider state={form} onSubmit={onSubmit}>
        <InputField
          label="First Name"
          model="firstName"
          validations={{ required: true }}
          showValidations={false}
        />
        <InputField
          label="Last Name"
          model="lastName"
          validations={{ required: true }}
          showValidations={false}
        />
        <Layout.Space />
        <Button submit>Submit</Button>
      </FormProvider>
      <Layout.Space />
      <Layout.Stack grow>
        <Text>Watch One Field: {JSON.stringify(WatchField)}</Text>
        <Text>Watch Multiple Fields: {JSON.stringify(WatchFields)}</Text>
        <Text>Watch All Fields: {JSON.stringify(WatchAllFields)}</Text>
      </Layout.Stack>
    </React.Fragment>
  );
};
```

## Handle Submit

This function will receive the form data if form validation is successful.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      firstName: 'John',
      lastName: 'Doe',
    },
  });

  const onSubmit = (data, e) => alert('onSubmit');
  const onError = (errors, e) => alert('onError');

  return (
    <FormProvider state={form} onSubmit={onSubmit} onError={onError}>
      <InputField
        label="First Name"
        model="firstName"
        validations={{ required: true }}
        showValidations={false}
      />
      <InputField
        label="Last Name"
        model="lastName"
        validations={{ required: true }}
        showValidations={false}
      />
      <Layout.Space />
      <Button submit>Submit</Button>
    </FormProvider>
  );
};
```

## Validate Model

This function will receive the model data if form validation is successful.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      firstName: 'John',
    },
  });

  const handleValidateFirst = () => {
    form.validate(
      'firstName',
      (data) => {
        alert(`FormData:  ${JSON.stringify(data)}`);
      },
      (error) => {
        delete error.ref;
        alert(`Error:  ${JSON.stringify(error)}`);
      }
    );
  };

  const handleValidateLast = () => {
    form.validate(
      'lastName',
      (data) => {
        alert(`FormData:  ${JSON.stringify(data)}`);
      },
      (error) => {
        delete error.ref;
        alert(`Error:  ${JSON.stringify(error)}`);
      }
    );
  };

  return (
    <FormProvider state={form}>
      <InputField
        label="First Name"
        model="firstName"
        validations={{ required: true }}
        showValidations={false}
      />
      <InputField
        label="Last Name"
        model="lastName"
        validations={{ required: true }}
        showValidations={false}
      />
      <Layout.Space />
      <Layout.Group>
        <Button onPress={handleValidateFirst}>Validate First Name</Button>
        <Button onPress={handleValidateLast}>Validate Last Name</Button>
      </Layout.Group>
    </FormProvider>
  );
};
```

## Set Error

The function allows you to manually set one or more errors.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      firstName: 'John',
      lastName: 'Doe',
    },
  });

  // Set single error
  const setSingleError = () => {
    form.setError('firstName', {
      type: 'manual',
      message: 'There is an error with your name!',
    });
  };

  // Set multiple errors
  const setMultipleErrors = () => {
    [
      {
        type: 'manual',
        name: 'firstName',
        message: 'Check first name',
      },
      {
        type: 'manual',
        name: 'lastName',
        message: 'Check last name',
      },
    ].forEach(({ name, type, message }) => {
      form.setError(name, { type, message });
    });
  };

  // Set error for single field errors
  React.useEffect(() => {
    form.setError('firstName', {
      types: {
        required: 'This is required',
        minLength: 'This is minLength',
      },
    });
  }, []);

  return (
    <FormProvider state={form}>
      <InputField label="First Name" model="firstName" />
      <InputField label="Last Name" model="lastName" />
      <Layout.Space />
      <Layout.Group>
        <Button onPress={setSingleError}>Set Single Error</Button>
        <Button onPress={setMultipleErrors}>Set Multiple Errors</Button>
      </Layout.Group>
    </FormProvider>
  );
};
```

## Clear Errors

This function can manually clear errors in the form.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      firstName: 'John',
      lastName: 'Doe',
      phone: '555-555-5555',
    },
  });

  const resetErrors = () => {
    [
      {
        type: 'manual',
        name: 'firstName',
        message: 'Required',
      },
      {
        type: 'manual',
        name: 'lastName',
        message: 'Required',
      },
      {
        type: 'manual',
        name: 'phone',
        message: 'Required',
      },
    ].forEach(({ name, type, message }) => {
      form.setError(name, { type, message });
    });
  };

  // Clear single error
  const clearSingleErrors = () => {
    form.clearErrors('firstName');
  };

  // Clear multiple errors
  const clearMultipleErrors = () => {
    form.clearErrors(['firstName', 'lastName']);
  };

  // Clear all errors
  const clearAllErrors = () => {
    form.clearErrors();
  };

  return (
    <FormProvider state={form}>
      <InputField label="First Name" model="firstName" />
      <InputField label="Last Name" model="lastName" />
      <InputField label="Phone" model="phone" mask="phone" />
      <Layout.Space />
      <Layout.Group>
        <Button type="outline" onPress={resetErrors}>
          Set Errors
        </Button>
        <Button onPress={clearSingleErrors}>Clear Single Error</Button>
        <Button onPress={clearMultipleErrors}>Clear Multiple Error</Button>
        <Button onPress={clearAllErrors}>Clear All Errors</Button>
      </Layout.Group>
    </FormProvider>
  );
};
```

## Get Values

An optimized helper for reading form values. The difference between watch and getValues is that getValues will not trigger re-renders or subscribe to input changes.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      firstName: 'John',
      lastName: 'Doe',
      phone: '555-555-5555',
    },
  });

  // Read an individual field value by name
  const singleValue = form.getValues('firstName');

  // Read multiple fields by name
  const multipleValues = form.getValues(['firstName', 'lastName']);

  // Reads all form values
  const allValues = form.getValues();

  return (
    <React.Fragment>
      <FormProvider state={form}>
        <InputField label="First Name" model="firstName" />
        <InputField label="Last Name" model="lastName" />
        <InputField label="Phone" model="phone" mask="phone" />
      </FormProvider>
      <Layout.Space />
      <p>Single Value: {JSON.stringify(singleValue)}</p>
      <p>Multiple Values: {JSON.stringify(multipleValues)}</p>
      <p>All Values: {JSON.stringify(allValues)}</p>
    </React.Fragment>
  );
};
```

## Trigger

Manually triggers form or input validation. This method is also useful when you have dependent validation (input validation depends on another input's value).

```jsx live
() => {
  const form = useForm();

  // Trigger one input to validate
  const triggerSingle = () => {
    form.trigger('firstName');
  };

  // Trigger multiple inputs to validate
  const triggerMultiple = () => {
    form.trigger(['firstName', 'lastName']);
  };

  // Trigger entire form to validate
  const triggerAll = () => {
    form.trigger();
  };

  const clearErrors = () => {
    form.clearErrors();
  };

  return (
    <FormProvider state={form}>
      <InputField
        label="First Name"
        model="firstName"
        validations={{ required: true }}
        showValidations={false}
      />
      <InputField
        label="Last Name"
        model="lastName"
        validations={{ required: true }}
        showValidations={false}
      />
      <InputField
        label="Phone"
        model="phone"
        mask="phone"
        validations={{ required: true }}
        showValidations={false}
      />
      <Layout.Space />
      <Layout.Group>
        <Button onPress={triggerSingle}>Trigger Single</Button>
        <Button onPress={triggerMultiple}>Trigger Multiple</Button>
        <Button onPress={triggerAll}>Trigger All</Button>
        <Button variant="outline" onPress={clearErrors}>
          Clear Errors
        </Button>
      </Layout.Group>
    </FormProvider>
  );
};
```

## Cross-Field Validation Example

```jsx live
() => {
  const form = useForm();

  const onSubmit = (data) => {
    console.log('data', data);
  };

  return (
    <FormProvider state={form} onSubmit={onSubmit}>
      <InputField
        label="First Name"
        model="firstName"
        validations={{ required: true }}
        showValidations={false}
      />
      <InputField
        label="Middle Name"
        model="middleName"
        validations={{
          validate: (v) => {
            const checkValue = form.getValues('middleName-check');
            if (!checkValue && !v) {
              return 'Required';
            }
          },
        }}
        showValidations={false}
      />
      <Checkbox
        label="No Middle Name"
        model="middleName-check"
        onChange={() => {
          form.trigger('middleName');
        }}
      />
      <InputField
        label="Last Name"
        model="lastName"
        validations={{ required: true }}
        showValidations={false}
      />
      <Layout.Space />
      <Button submit>Submit</Button>
    </FormProvider>
  );
};
```

## Additional Documentation

`@uhg-abyss/mobile/hooks/useForm` is a built on top of the `useForm` hook from [React Form Hook](https://react-hook-form.com/get-started).

**Note:** You should be using Abyss's `useForm` hook when using Abyss components and **not** react hook forms.

---
id: use-reduce-motion
category: Utilities
title: useReduceMotion
description: Used within animated components to respect a user's accessibility preferences.
---

```jsx
import { useReduceMotion } from '@uhg-abyss/mobile';
```

## Usage

The `useReduceMotion` hook is a custom hook designed to determine whether the user has enabled the "Reduce Motion" accessibility setting on their device. This setting is often used by individuals who prefer to minimize animations and motion effects for accessibility or comfort reasons.

The hook returns an object `{reducedMotionEnabled}` with the boolean value:

- `true`: "Reduce Motion" is enabled.
- `false`: "Reduce Motion" is disabled.

When reduce motion is enabled, this hook can be used to adjust animation behavior.

```jsx live
const AnimatedContainer = styled('Animated.View', {
  padding: '$semantic.spacing.xl',
  backgroundColor: '$semantic.color.surface.container.primary',
  width: 100,
  height: 100,
  margin: '$semantic.spacing.xl',
});

const SequentialAnimation = () => {
  const { reducedMotionEnabled } = useReduceMotion();
  const animatedValues = useRef([
    new Animated.Value(1),
    new Animated.Value(1),
    new Animated.Value(1),
  ]).current;

  useEffect(() => {
    const createAnimation = (index) =>
      Animated.sequence([
        Animated.timing(animatedValues[index], {
          toValue: 1.4,
          duration: 500,
          useNativeDriver: false,
        }),
        Animated.timing(animatedValues[index], {
          toValue: 1,
          duration: 500,
          useNativeDriver: false,
        }),
      ]);

    const loopAnimation = Animated.loop(
      Animated.stagger(250, [
        createAnimation(0),
        createAnimation(1),
        createAnimation(2),
      ])
    );

    loopAnimation.start();

    return () => loopAnimation.stop();
  }, []);

  return (
    <View
      style={{
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      {animatedValues.map((animatedValue, index) => (
        <AnimatedContainer
          key={index}
          style={[
            reducedMotionEnabled
              ? {
                  backgroundColor: animatedValue.interpolate({
                    inputRange: [1, 1.4],
                    outputRange: ['#002677', '#00BED5'],
                  }),
                }
              : {
                  transform: [{ scale: animatedValue }],
                },
          ]}
        />
      ))}
    </View>
  );
};

render(() => {
  return <SequentialAnimation />;
});
```

## Enabling Reduce Motion by Device

### iOS

- Open the Settings app
- Select Accessibility
- Choose Motion
- Toggle the switch next to Reduce Motion to on

### Android

- Open the Settings app
- Select Accessibility
- Depending on your Android version, look for Remove Animations (or similar)

### Windows

- Open Settings
- Select Accessibility
- Go to Visual Effects
- Toggle Animation Effects to off

### Mac OS

- Open System Settings
- Select Accessibility
- Choose Display
- Toggle Reduce Motion to on

## Additional Notes

- The hook listens for changes to the "Reduce Motion" setting and updates its value dynamically.
- The [`useAnimation`](/mobile/hooks/use-animation) hook integrates `useReduceMotion` directly, ensuring that animated components automatically respect the user's motion preferences without requiring additional handling.
- Use this hook to create a more inclusive and accessible experience for users who prefer minimal motion effects. Please refer to accessibility guidelines for animations when creating new components.
  - WCAG standards:
    - [iOS](https://uhgazure.sharepoint.com/sites/a11y-engineering-standards/SitePages/CP-2.33-Animations-from-Interactions-Native-iOS.aspx?web=1)
    - [Android](https://uhgazure.sharepoint.com/sites/a11y-engineering-standards/SitePages/CP-2.33-Animations-from-Interactions-Native-Android.aspx?web=1)

---
id: use-set-focus
category: Utilities
title: useSetFocus
description: Used to set accessibility focus on a specified element.
---

```jsx
import { useSetFocus } from '@uhg-abyss/mobile';
```

## Usage

The hook returns a function that consumes a ref object. Simply call said function to set the screen reader focus.

```jsx
const setFocus = useSetFocus();
const myRef = useRef(null);

return (
  <>
    <Button
      onPress={() => {
        return setFocus(myRef);
      }}
    >
      Focus Link
    </Button>
    <Link href="google.com" ref={myRef}>
      Link to be focused
    </Link>
  </>
);
```

## Example

In the example below, Android's Talkback can be seen focusing the bottom text when the `Focus Text` button is pressed.

<img src="/mobile/useSetFocus/useSetFocusDemo.gif" alt="" role="presentation" />

---
id: use-style-sheet
category: Styling
title: useStyleSheet
description: Used to parse styles from a StyleSheet
---

```jsx
import { useStyleSheet } from '@uhg-abyss/mobile';
```

The `useStyleSheet` hook helps to parse the additional functionality from the Abyss [StyleSheet](/mobile/ui/style-sheet).

## Usage

```tsx
useStyleSheet(styles: object): object
```

Take a look at StyleSheet below:

```jsx
const styles = StyleSheet.create({
  container: {
    padding: '$semantic.spacing.xs * 4px',
    margin: '$fontScale',
  },
  label: {
    color: '$semantic.color.text.body.paragraph',
    fontWeight: '$core.font-weight.bold',
    fontSize: '$core.font-size.p.100',
    marginVertical: '$semantic.spacing.lg * 2',
    fontFamily: '$heading',
  },
  box: {
    backgroundColor: '$semantic.color.surface.container.status.info.saturated',
    borderColor: '$semantic.color.border.status.saturated.error',
    borderRadius:
      '$semantic.border-radius.container.sticky * $core.border-radius.xs',
    borderWidth: 4,
    width: '6rem',
    height: '48px * 3',
    marginBottom: '32px - 0.75rem',
    '@media (min-width: 767px)': {
      width: '12rem',
    },
  },
});
```

There's a lot of code that is unfamiliar to the normal StyleSheet. Above, there are _**media queries**_,
_**tokens**_, _**operations**_, _**rem values**_, and _**pixel values**_, which normally would not be able to be parsed by React
Native core component. This is where the `useStyleSheet` hook comes in. By using the hook, we can parse these
value into value that the core component can understand.

```jsx live
const themedStyles = StyleSheet.create({
  container: {
    padding: '$semantic.spacing.xs * 4px',
    margin: '$fontScale',
  },
  label: {
    color: '$semantic.color.text.body.paragraph',
    fontWeight: '$core.font-weight.bold',
    fontSize: '$core.font-size.p.100',
    marginVertical: '$semantic.spacing.lg * 2',
    fontFamily: '$heading',
  },
  box: {
    backgroundColor: '$semantic.color.surface.container.status.info.saturated',
    borderColor: '$semantic.color.border.status.saturated.error',
    borderRadius:
      '$semantic.border-radius.container.sticky * $core.border-radius.xs',
    borderWidth: 4,
    width: '6rem',
    height: '48px * 3',
    marginBottom: '32px - 0.75rem',
    '@media (min-width: 767px)': {
      width: '12rem',
    },
  },
});

render(() => {
  const styles = useStyleSheet(themedStyles);

  return (
    <View style={styles.container}>
      <View style={styles.box} />
      <Layout.Group wrap alignItems="top">
        <Card padding="$semantic.spacing.xl">
          <Text style={styles.label}>Parsed Styles</Text>
          <Text>{JSON.stringify(styles, null, 4)}</Text>
        </Card>
        <Card padding="$semantic.spacing.xl">
          <Text style={styles.label}>Original Styles</Text>
          <Text>{JSON.stringify(themedStyles, null, 4)}</Text>
        </Card>
      </Layout.Group>
    </View>
  );
});
```

---
id: use-token
category: Utilities
title: useToken
description: Used to get values mapped to tokens.
---

```jsx
import { useToken } from '@uhg-abyss/mobile';
```

This hook returns a function that is used to get the style value associated with a token defined in the theme. Use this whenever you want to pass in a prop with the value of a token string instead of the associated token value.

## Properties

```typescript
type TokenKey = 'colors' | 'space' | 'sizes' | 'fontSizes' | 'lineHeights' | 'fontWeights' | 'fonts' | 'radii';
interface TokenConfig {
  retain?: boolean;
};

useToken(key: TokenKey, config?: TokenConfig)
```

## Usage

The `key` argument corresponds to the upper level category inside the theme. Start with defining a function and passing it the string of the token key. You can then use that function to pass in your token element and get the associated value.
A hex value can also be passed in as a `token` and it will be returned as is|unless set not to.

```jsx
const theme = {
  theme: {
    colors: {...},
    space: {...},
    fontSizes: {...},
    fonts: {...},
  },
};

const getColorToken = useToken('colors');
const color = getColorToken('$core.color.brand.100');
```

## Example

```jsx live
() => {
  const getColorToken = useToken('colors');
  const color = getColorToken('$semantic.color.surface.container.emphasis.4');

  const getSpaceToken = useToken('space');
  const space = getSpaceToken('$semantic.spacing.lg');

  return (
    <View
      style={{ backgroundColor: color, padding: space, alignItems: 'center' }}
    >
      <Heading color="$core.color.brand.100">Abyss Design System</Heading>
    </View>
  );
};
```

### Defaults

By default, the `useToken` hook uses the passed in value if the token is not found/is invalid. This
allows it to take hex and string values and return them as is.

Using the `config` parameter, you can pass in `{retain: false}` to require tokenized values.

```jsx live
() => {
  const getSpaceToken = useToken('space');
  const space = getSpaceToken('$semantic.spacing.lg');

  const getColorToken = useToken('colors');
  const color = getColorToken('#D9E9FA');
  const color2 = getColorToken('gray');

  const getColorToken2 = useToken('colors', { retain: false });
  const color3 = getColorToken2('#D9E9FA');

  return (
    <React.Fragment>
      <View
        style={{ backgroundColor: color, padding: space, alignItems: 'center' }}
      >
        <Heading color="$core.color.brand.100">Abyss Design System</Heading>
      </View>
      <View
        style={{
          backgroundColor: color2,
          padding: space,
          alignItems: 'center',
        }}
      >
        <Heading color="$core.color.brand.100">Abyss Design System</Heading>
      </View>
      <View
        style={{
          backgroundColor: color3,
          padding: space,
          alignItems: 'center',
        }}
      >
        <Heading color="$core.color.brand.100">Abyss Design System</Heading>
      </View>
    </React.Fragment>
  );
};
```

---
id: use-translate
category: Utilities
title: useTranslate
description: Used to get the translated string from the i18n object.
---

```jsx
import { useTranslate } from '@uhg-abyss/mobile/hooks/useTranslate';
```

The `useTranslate` hook is used to get the translated string from the Abyss [i18n](https://github.com/uhc-tech/abyss/blob/main/packages/abyss-mobile/src/tools/i18n/translations/en.ts) object..

## Usage

```typescript
interface I18nTranslate {
  t: (key: string, replacements?: object) => string;
  i18n: object;
}

useTranslate(key: string, replacements?: object): I18nTranslate
```

The `key` argument corresponds to the key in the i18n object. The `replacements` argument is an object that contains the values to replace in the translated string.

Let's use an example to illustrate how to use the `useTranslate` hook. In the [TextArea](/mobile/ui/text-area) component, we have a text block that displays the remaining characters available
to be typed in the text area. We can get that value with the key `TextArea.charactersRemaining`.

```jsx live-expanded
() => {
  const { t } = useTranslate();
  return <Text>{t('TextArea.charactersRemaining')}</Text>;
};
```

If we want to replace the value of the remaining characters, we can pass in the `replacements` object with the key `count`.
Replacement values should always appear in double curly braces, (e.g. `{{count}}`).

```jsx live-expanded
() => {
  const { t } = useTranslate();
  return <Text>{t('TextArea.charactersRemaining', { count: 10 })}</Text>;
};
```

We can also use the `useTranslate` hook to get the translated string from the i18n object.

```jsx live-expanded
() => {
  const { i18n } = useTranslate();
  return <Text>{i18n.TextArea.charactersRemaining}</Text>;
};
```

---
id: about
slug: /mobile/about
title: About Abyss
---

## What is Abyss?

 <WhatIsAbyss/>

## How Abyss works

<HowAbyssWorks/>

## We support adoption
<SupportAdoption library='mobile'/>

## Guiding Principles

<GuidingPrinciples/>

## We Maintain Assets

<MaintainAssets library='mobile'/>

## The Abyss Team

<AbyssTeam library='mobile'/>

---
id: abyss-version-2
slug: /mobile/abyss-version-2
title: Abyss Version 2
hide_table_of_contents: true
---

<Header />

## Abyss Design System version 2

<Version2 />

## V2 prep for designers

<V2PrepDesigners />

## V2 prep for developers

<V2PrepDevelopers />

## Stay connected

<StayConnected library="mobile" />

---
id: contact-us
slug: /mobile/contact-us
title: Contact Us
hide_table_of_contents: true
---

## Support

<Support />

## Requests

<ContactForm />

---
id: disclaimer
slug: /mobile/disclaimer
title: Mobile Components Disclaimer
---

As a note, these components were developed for use in a mobile application environment. For your convenience, we created documentation and interactive examples on our Abyss site. We have tried our best to accurately show the functionality and style of each component on these pages, but you may notice some differences and limitations as the optimal platform for viewing and interacting with these components is a mobile device.

A few examples are described below:

- [Date Input](/mobile/ui/date-input) requires native code, so this component is only supported on iOS and Android. There are no interactive examples in the documentation; only recordings of each feature are available. To fully interact with the date and time pickers you will need to import the component within a mobile development environment.
- [Modal](/mobile/ui/modal), and any component that uses Modal, takes up the entire browser window when opened. While it is intended to take up the entire phone screen as well, the content on the modal will fill much more space when used on a mobile device than it does in the browser window.

---
id: overview
slug: /mobile/overview
title: Overview
hide_table_of_contents: true
---

<AbyssOverview library="mobile" />

---
id: releases
slug: /mobile/releases
title: Releases
hide_table_of_contents: true
---

<Releases />

---
id: accessibility
title: Accessibility
---

## Overview

<AccessibilityOverview />

## Interactive components

<InteractiveComponents />

```jsx sandbox
{
  component: 'Button',
  inputs: [
    {
      prop: 'variant',
      type: 'select',
      defaultValue: 'brand',
      options: [
        { label: 'brand', value: 'brand' },
        { label: 'neutral', value: 'neutral' },
        { label: 'destructive', value: 'destructive' },
        { label: 'inverse', value: 'inverse' },
      ],
    },
    {
      prop: 'type',
      type: 'select',
      defaultValue: 'filled',
      options: [
        { label: 'filled', value: 'filled' },
        { label: 'outline', value: 'outline' },
        { label: 'text', value: 'text' },
      ],
    },
    {
      prop: 'size',
         type: 'select',
      defaultValue: 'large',
      options: [
        { label: 'small', value: 'small' },
        { label: 'large', value: 'large' },
      ],
    },
    {
      prop: 'children',
      type: 'string',
    },
    {
      prop: 'isDisabled',
      type: 'boolean'
    },
  ],
}

<Button>Click Here!</Button>
```

## Color Contrast

<ColorContrast />

```jsx render
<iframe
  width="100%"
  height="450"
  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Ftk08Md4NBBVUPNHQYthmqp%2FAbyss-Design-System%3Fnode-id%3D1025%253A13039"
  allow="fullscreen"
></iframe>
```

## Icons

### Meaningful or Control Icons

If the icon is being used in a setting where it is the only element providing meaning, then that same meaning should be conveyed to screen reader users. The below implementation provides examples of situations in which the property `isScreenReadable` should be set to true and the `title` property is required and should describe the purpose of the image.

Example 1: An alert icon is used to convey a sense of urgency; there is adjacent text (“There is a data outage”) but the text doesn't include any words that convey urgency. So, in this case, the icon should have a text alternative such as “Alert” or “Warning”.

```jsx live
<Layout.Group>
  <IconBrand title="alert" icon="alert" isScreenReadable={true} size={24} />
  <div>There is a data outage</div>
</Layout.Group>
```

<br />
Example 2: An “X” material icon is used as a close button on a modal dialog. There
is no adjacent text, so the icon should have a text alternative of “close” or “close
window”.

```jsx live
<Layout.Group>
  <IconSymbol title="close" icon="close" isScreenReadable={true} size={24} />
</Layout.Group>
```

### Decorative Icons

If the icon is being used in a setting in which it is just a decorative element (which is the default case for icons), then the icon should be ignored by screen readers. The below implementation provides example of which situations would be classified as decorative. Since the default of `isScreenReadable` is set to false no specific changes need to be made for decorative icons.

Example 1: An alert icon is used next to an urgent message and the word “Alert” is included in the adjacent text. In this case, the icon becomes decorative in nature and should be ignored by screen readers.

```jsx live
<Layout.Group>
  <IconBrand icon="alert" size={24} />
  <div>Alert: There is a data outage</div>
</Layout.Group>
```

<br />
Example 2: An “X” material icon is used as a close button on a modal dialog; the
word “Close” appears to the right of the button. In this case, the icon should be
considered decorative and ignored by screen readers.

```jsx live
<Layout.Group>
  <IconSymbol icon="close" size={24} />
  <div>Close</div>
</Layout.Group>
```

## Dynamic Type

Abyss Mobile standards for dynamic types are as follows: <br/>

- We scale typography and icons in increments of 11.8%. <br/>
- [Figma](https://www.figma.com/design/34gRQMq2NxFgeRynjqd24C/Documentation-%7C-Abyss-Mobile?node-id=7-144&t=Os647hSjOcX5N1UO-0)
  shows scaling examples at xxxLarge and AX5.
  <br />
- We do not scale images, brand icons, or illustrations.
  - See [IconBrand](/mobile/brand/uhc/icon-brand/) and [IllustrationBrand](/mobile/brand/uhc/illustration-brand/) for more details.<br/>
- We also do not scale border-weight or border-radius.<br/>
- Some components, such as framing components and certain graphic elements, freeze at xxxLarge (3XL).

### Scale

```jsx render
<table>
  <thead>
    <tr>
      <th>Scale</th>
      <th>Percent</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>XL</td>
      <td>110%</td>
    </tr>
    <tr>
      <td>XXL</td>
      <td>120%</td>
    </tr>
    <tr>
      <td>XXXL</td>
      <td>130%</td>
    </tr>
    <tr>
      <td>AX1</td>
      <td>179%</td>
    </tr>
    <tr>
      <td>AX2</td>
      <td>214%</td>
    </tr>
    <tr>
      <td>AX3</td>
      <td>264%</td>
    </tr>
    <tr>
      <td>AX4</td>
      <td>314%</td>
    </tr>
    <tr>
      <td>AX5</td>
      <td>357%</td>
    </tr>
  </tbody>
</table>
```

## Additional Resources

<AdditionalResources />

---
id: product-inclusion
title: Product Inclusion
---

## Mission statement

<MissionStatement />

## Product inclusion principles

<ProductInclusionPrinciples />

## Product inclusion checklist

<ProductInclusionChecklist />

## Product inclusion audit tool

<ProductInclusionAuditTool />

## Contact us

<ContactUs />


---
id: product-resources
title: Product Resources
---

## Overview

<ProductResourcesOverview />

## How does Abyss work?

<HowItWorks />

## Versioning

<ProductVersioning library="mobile" />

## Branding

<ProductBranding library="mobile" />

## Accessibility

<ProductResourcesAccessibility library="mobile" />

## Support

<ProductResourcesSupport library="mobile" />

---
id: create-theme
category: Util
title: createTheme
description: Tool to create and modify themes.
---

```jsx
import { createTheme } from '@uhg-abyss/mobile';
```

The tool `createTheme` allows for the creation of preset themes and allows you to override those themes to fit your design needs. `createTheme` is used in conjunction with [ThemeProvider](/mobile/ui/theme-provider).

## Properties

```typescript
createTheme(
  theme: string,
  override?: object,
): object;
```

## Usage

`createTheme` takes two arguments. The first argument is the choice of a default theme. There are currently 4 themes available: `"uhc"`, `"uhg"`, `"optum"`, and `"abyss"`. If no theme is chosen, it will fall back to the default `"abyss"` theme. The second argument is any overrides you wish to apply to the chosen base theme.

```jsx
import { ThemeProvider, createTheme } from '@uhg-abyss/mobile';
import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';

const themeOverride = {
  theme: {
    colors: {...},
    space: {...},
    fontSizes: {...},
    fonts: {...},
    fontWeights: {...},
    lineHeights: {...},
    letterSpacings: {...},
    sizes: {...},
    borderWidths: {...},
    borderStyles: {...},
    radii: {...},
    shadows: {...},
    zIndices: {...},
    transitions: {...},
  },

};

const theme = createTheme('uhc', themeOverride);

const App = () => {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
};

AppRegistry.registerComponent(appName, () => App);
```

## Example

Here is an example of a theme created with a custom override. A token named `customColor` will be added to the color tokens.

```jsx
const theme = createTheme('uhc', {
  theme: {
    colors: {
      customColor: '#ff612b', // orange
    },
  },
});
```

```jsx live
() => {
  const theme = createTheme('uhc', {
    theme: {
      colors: {
        customColor: '#ff612b',
      },
    },
  });

  return (
    <ThemeProvider theme={theme}>
      <Text
        size="$core.font-size.p.100"
        fontWeight="$core.font-weight.bold"
        color="$customColor"
      >
        Sample Text
      </Text>
    </ThemeProvider>
  );
};
```

---
id: create-bottom-tab-navigator
category: Navigation
title: createBottomTabNavigator
description: A simple tab bar on the bottom of the screen that lets you switch between different routes.
---

<Tabs>

<Tab label="Overview">

```jsx
import { createBottomTabNavigator } from '@uhg-abyss/mobile';
```

The most common style of navigation in mobile apps is tab-based navigation. A simple tab bar on the bottom of the screen lets you switch between different routes. Routes are lazily initialized -- their screen components are not mounted until they are first focused.

Calling the `createBottomTabNavigator` function creates a Tab object with `Screen` & `Navigator` properties.
All tab screen must be wrapped around a Tab.Navigator object component. All screens must have a `name` and `component` passed in as props.

## Example

```jsx
const Tab = createBottomTabNavigator();

const Screen = ({ route }) => {
  return (
    <ScreenWrapper>
      <Text>This is the {route.name} page</Text>
    </ScreenWrapper>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName="Home">
        <Tab.Screen
          name="Home"
          component={Screen}
          options={{
            tabBarIcon: ({ active }) => (
              <IconCustom
                icon="home"
                variant={active ? 'darkactive' : 'dark'}
                maxFontSizeMultiplier={1.3}
              />
            ),
          }}
        />
        <Tab.Screen
          name="My Plan"
          component={Screen}
          options={{
            tabBarIcon: ({ active }) => (
              <IconCustom
                icon="my_plan"
                variant={active ? 'darkactive' : 'dark'}
                maxFontSizeMultiplier={1.3}
              />
            ),
          }}
        />
        <Tab.Screen
          name="Find Care"
          component={Screen}
          options={{
            tabBarIcon: ({ active }) => (
              <IconCustom
                icon="find_care"
                variant={active ? 'darkactive' : 'dark'}
                maxFontSizeMultiplier={1.3}
              />
            ),
          }}
        />
        <Tab.Screen
          name="Menu"
          component={Screen}
          options={{
            tabBarIcon: ({ active }) => (
              <IconCustom
                icon="menu"
                variant={active ? 'darkactive' : 'dark'}
                maxFontSizeMultiplier={1.3}
              />
            ),
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}
```

```jsx render:phone-dark
() => {
  const [page, setPage] = useState('home');
  const Container = styled('View', {
    flexGrow: 1,
  });

  const Header = styled('View', {
    backgroundColor: '$app-bar.color.surface.container',
    width: '100%',
    paddingTop: 30,
  });
  const HeaderContent = styled('View', {
    margin: '$semantic.spacing.sm',
    flexDirection: 'row',
    justifyContent: 'center',
  });

  const Title = styled('Text', {
    color: '$app-bar.color.text.heading',
    typography: '$semantic.typography.h.xxs-bold',
    textTransform: 'capitalize',
  });

  const ContentArea = styled('View', {
    flexGrow: 1,
    alignItems: 'center',
    justifyContent: 'center',
  });

  const TabBar = styled('View', {
    backgroundColor: '$tab-bar.color.surface.container',
    display: 'flex',
    color: '$tab-bar.color.text.label.default',
    paddingBottom: 24,
    paddingTop: 8,
    flexDirection: 'row',
    borderTopLeftRadius: 12,
    borderTopRightRadius: 12,
  });

  const TabBarItem = styled('Pressable', {
    flex: 1,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  });

  const ContentText = styled('Text', {});

  const TabLabel = styled('Text', {
    typography: '$semantic.typography.p.xs-med',
    color: '$tab-bar.color.text.label.default',
    variants: {
      active: {
        true: { fontWeight: '$core.font-weight.bold' },
      },
    },
  });

  return (
    <Container>
      <Header>
        <HeaderContent>
          <Title>{page.split('_').join(' ')}</Title>
        </HeaderContent>
      </Header>
      <ContentArea>
        {page === 'home' && <ContentText>This is the Home page</ContentText>}
        {page === 'my_plan' && (
          <ContentText>This is the My Plan page</ContentText>
        )}
        {page === 'find_care' && (
          <ContentText>This is the Find Care page</ContentText>
        )}
        {page === 'menu' && <ContentText>This is the Menu page</ContentText>}
      </ContentArea>
      <TabBar>
        <TabBarItem
          role="button"
          aria-current={page === 'home' ? 'page' : false}
          onPressIn={() => setPage('home')}
        >
          {({ pressed }) => {
            const active = page === 'home';
            return (
              <>
                <IconCustom
                  icon="home"
                  variant={`dark${pressed || active ? 'active' : ''}`}
                />
                <TabLabel active={active}>Home</TabLabel>
              </>
            );
          }}
        </TabBarItem>
        <TabBarItem
          role="button"
          aria-current={page === 'my_plan' ? 'page' : false}
          onPressIn={() => setPage('my_plan')}
        >
          {({ pressed }) => {
            const active = page === 'my_plan';
            return (
              <>
                <IconCustom
                  icon="my_plan"
                  variant={`dark${pressed || active ? 'active' : ''}`}
                />
                <TabLabel active={active}>My Plan</TabLabel>
              </>
            );
          }}
        </TabBarItem>
        <TabBarItem
          role="button"
          aria-current={page === 'find_care' ? 'page' : false}
          onPressIn={() => setPage('find_care')}
        >
          {({ pressed }) => {
            const active = page === 'find_care';
            return (
              <>
                <IconCustom
                  icon="find_care"
                  variant={`dark${pressed || active ? 'active' : ''}`}
                />
                <TabLabel active={active}>Find Care</TabLabel>
              </>
            );
          }}
        </TabBarItem>
        <TabBarItem
          role="button"
          aria-current={page === 'menu' ? 'page' : false}
          onPressIn={() => setPage('menu')}
        >
          {({ pressed }) => {
            const active = page === 'menu';
            return (
              <>
                <IconCustom
                  icon="menu"
                  variant={`dark${pressed || active ? 'active' : ''}`}
                />
                <TabLabel active={active}>Menu</TabLabel>
              </>
            );
          }}
        </TabBarItem>
      </TabBar>
    </Container>
  );
};
```

</Tab>

<Tab label="Integration">

### Props

The `Tab.Navigator` component accepts following props:

#### `id`

Optional unique ID for the navigator. This can be used with `navigation.getParent` to refer to this navigator in a child navigator.

#### `initialRouteName`

The name of the route to render on first load of the navigator.

#### `screenOptions`

Default options to use for the screens in the navigator.

#### `backBehavior`

This controls what happens when `goBack` is called in the navigator. This includes pressing the device's back button or back gesture on Android.

It supports the following values:

- `firstRoute` - return to the first screen defined in the navigator (default)
- `initialRoute` - return to initial screen passed in `initialRouteName` prop, if not passed, defaults to the first screen
- `order` - return to screen defined before the focused screen
- `history` - return to last visited screen in the navigator; if the same screen is visited multiple times, the older entries are dropped from the history
- `none` - do not handle back button

#### `detachInactiveScreens`

Boolean used to indicate whether inactive screens should be detached from the view hierarchy to save memory. This enables integration with [react-native-screens](https://github.com/software-mansion/react-native-screens). Defaults to `true`.

#### `sceneContainerStyle`

Style object for the component wrapping the screen content.

#### `tabBar`

Function that returns a React element to display as the tab bar.

Note that you **cannot** use the `useNavigation` hook inside the `tabBar` since `useNavigation` is only available inside screens. You get a `navigation` prop for your `tabBar` which you can use instead:

### Options

The following options can be used to configure the screens in the navigator. These can be specified under `screenOptions` prop of `Tab.navigator` or `options` prop of `Tab.Screen`.

#### `title`

Generic title that can be used as a fallback for `headerTitle` and `tabBarLabel`.

#### `tabBarLabel`

Title string of a tab displayed in the tab bar or a function that given `{ active: boolean, color: string }` returns a React.Node, to display in tab bar. When undefined, scene `title` is used. To hide, see `tabBarShowLabel`.

#### `tabBarShowLabel`

Whether the tab label should be visible. Defaults to `true`.

#### `tabBarLabelPosition`

Whether the label is shown below the icon or beside the icon.

- `below-icon`: the label is shown below the icon (typical for iPhones)
- `beside-icon` the label is shown next to the icon (typical for iPad)

By default, the position is chosen automatically based on device width.

#### `tabBarLabelStyle`

Style object for the tab label.

#### `tabBarIcon`

React.ReactNode or a function that given `{ active: boolean }` returns a React.ReactNode, to display in the tab bar.

#### `showTabBarBadge`

Whether or not the badge should be visible on the tab icon.

#### `showTabBarBadgeOnActive`

Whether or not the badge should be visible on the tab icon when it is active.

#### `tabBarBadgeLabel`

Text to show in a badge on the tab icon. Accepts a `string` or a `number`.

#### `tabBarBadgeOffset`

Offset for the badge on the tab icon.

#### `tabBarAccessibilityLabel`

Accessibility label for the tab button. This is read by the screen reader when the user taps the tab. It's recommended to set this if you don't have a label for the tab.

#### `tabBarTestID`

ID to locate this tab button in tests.

#### `tabBarActiveTintColor`

Color for the icon and label in the active tab.

#### `tabBarInactiveTintColor`

Color for the icon and label in the inactive tabs.

#### `tabBarActiveBackgroundColor`

Background color for the active tab.

#### `tabBarInactiveBackgroundColor`

Background color for the inactive tabs.

#### `tabBarActiveLabelWeight`

Font weight for the label in the active tab.

#### `tabBarInactiveLabelWeight`

Font weight for the label in the inactive tabs.

#### `tabBarItemStyle`

Style object for the tab item container.

#### `tabBarStyle`

Style object for the tab bar. You can configure styles such as background color here.

To show your screen under the tab bar, you can set the `position` style to absolute:

```js
<Tab.Navigator
  screenOptions={{
    tabBarStyle: { position: 'absolute' },
  }}
>
```

</Tab>

<Tab label="Accessibility">

## Dynamic Type

Text and icons scale to 3XL. Any additional text or icon passed in should set `maxFontSizeMultiplier={1.3}`.

</Tab>
</Tabs>

---
id: create-stack-navigator
category: Navigation
title: createStackNavigator
description: Provides a way for your apps to transition between screens where each new screen is placed on top of a stack.
---

<Tabs>

<Tab label='Overview'>

```jsx
import { createStackNavigator } from '@uhg-abyss/mobile';
```

This navigator uses the native APIs `UINavigationController` on iOS and `Fragment` on Android so that navigation built with `createStackNavigator` will behave exactly the same and have the same performance characteristics as apps built natively on top of those APIs.

`Screen` components are used to configure various aspects of screens inside a navigator.

A `Screen` is returned from a createStackNavigator function:

```jsx
const Stack = createStackNavigator(); // Stack contains Screen & Navigator properties
```

After creating the navigator, it can be used as children of the Navigator component:

```jsx
function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Notifications" component={Notifications} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}
```

You need to provide at least a name and a component to render for each screen.

</Tab>

<Tab label='Screen Options'>

### Options

The following options can be used to configure the screens in the navigator.
These can be specified under `screenOptions` prop of `Tab.Navigator` or `options` prop of `Tab.Screen`.

#### `title`

Generic title that can be used as a fallback for `headerTitle` and `tabBarLabel`.

#### `lazy`

Whether the screen should render the first time it's accessed. Defaults to `true`. Set it to `false` if you want to render the screen on initial render.

#### `unmountOnBlur`

Whether this screen should be unmounted when navigating away from it. Unmounting a screen resets any local state in the screen as well as state of nested navigators in the screen. Defaults to `false`.

Normally, we don't recommend enabling this prop as users don't expect their navigation history to be lost when switching tabs. If you enable this prop, please consider if this will actually provide a better experience for the user.

#### `freezeOnBlur`

Boolean indicating whether to prevent inactive screens from re-rendering. Defaults to `false`.
Defaults to `true` when `enableFreeze()` from `react-native-screens` package is run at the top of the application.

Requires `react-native-screens` version >=3.16.0.

### Header related options

You can find the list of header related options [here](https://reactnavigation.org/docs/stack-navigator/#header). These [options](https://reactnavigation.org/docs/stack-navigator/#options) can be specified under `screenOptions` prop of `Tab.navigator` or `options` prop of `Tab.Screen`. You don't have to be using `@react-navigation/elements` directly to use these options, they are just documented in that page.

In addition to those, the following options are also supported in bottom tabs:

#### `header`

Custom header to use instead of the default header.

This accepts a function that returns a React Element to display as a header. The function receives an object containing the following properties as the argument:

- `navigation` - The navigation object for the current screen.
- `route` - The route object for the current screen.
- `options` - The options for the current screen.

Example:

```jsx
import { getHeaderTitle } from '@react-navigation/elements';

header: ({ navigation, route, options }) => {
  const title = getHeaderTitle(options, route.name);

  return <MyHeader title={title} style={options.headerStyle} />;
};
```

To set a custom header for all the screens in the navigator, you can specify this option in the `screenOptions` prop of the navigator.

#### `headerTitle`

String or React Element that returns a React Element to be used as the title of the header. Defaults to scene `title`

#### `headerTitleAlign`

How to align the header title. Possible values:

- `left`
- `center`

Defaults to `center` on iOS and `left` on Android.

#### `truncateHeading`

Allows the heading to be truncated. Defaults to false.

#### `headerEyebrow`

String, React Element, or function that returns a React Element to be used as the eyebrow of the header.
The eyebrow is placed above the title.

#### `headerSubtitle`

String, React Element, or function that returns a React Element to be used as the subtitle of the header.
The subtitle is placed below the title.

#### `headerLeft`

React Element or Function which returns a React Element to display on the left side of the header. You can use it to implement your custom left button, for example:

```js
<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{
    headerLeft: (props) => (
      <MyButton
        {...props}
        onPress={() => {
          // Do something
        }}
      />
    ),
  }}
/>
```

#### `headerRight`

Function which returns a React Element to display on the right side of the header.

#### `headerContent`

Content of the header placed at the bottom of the header.

#### `headerStyle`

Style object for the header. You can specify a custom background color here, for example.

#### `headerTitleStyle`

Styles for the title component.

#### `headerLeftContainerStyle`

Customize the style for the container of the `headerLeft` component, for example to add padding.

#### `headerRightContainerStyle`

Customize the style for the container of the `headerRight` component, for example to add padding.

#### `headerTitleContainerStyle`

Customize the style for the container of the `headerTitle` element.

#### `headerBackgroundContainerStyle`

Customize the style for the container of the `headerBackground` element.

#### `headerTintColor`

Tint color for the header

#### `headerTransparent`

Defaults to `false`. If `true`, the header will not have a background unless you explicitly provide it with `headerBackground`. The header will also float over the screen so that it overlaps the content underneath.

This is useful if you want to render a semi-transparent header or a blurred background.

Note that if you don't want your content to appear under the header, you need to manually add a top margin to your content. React Navigation won't do it automatically.

#### `headerBackground`

Function which returns a React Element to render as the background of the header. This is useful for using backgrounds such as an image or a gradient.

For example, you can use this with `headerTransparent` to render a blur view to create a translucent header.

#### `headerShown`

Whether to show or hide the header for the screen. The header is shown by default. Setting this to `false` hides the header.

#### `headerCenter`

Place content in the center of the app bar. Overrides `heading`, `subheading`, and `headerEyebrow` components.

</Tab>

<Tab label='Group'>

## Group

`Group` components are used to group several screens inside a navigator.

A `Group` is returned from a createStackNavigator function:

```jsx
const Stack = createStackNavigator(); // Stack contains Screen & `Navigator` properties
```

After creating the navigator, it can be used as children of the Navigator component:

```jsx
<Stack.Navigator>
  <Stack.Group
    screenOptions={{ headerStyle: { backgroundColor: 'papayawhip' } }}
  >
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Profile" component={ProfileScreen} />
  </Stack.Group>
  <Stack.Group screenOptions={{ presentation: 'modal' }}>
    <Stack.Screen name="Search" component={SearchScreen} />
    <Stack.Screen name="Share" component={ShareScreen} />
  </Stack.Group>
</Stack.Navigator>
```

It's also possible to nest `Group` components inside other `Group` components.

## Props

### screenOptions

Options to configure how the screens inside the group get presented in the navigator. It accepts either an object or a function returning an object:

```jsx
<Stack.Group
  screenOptions={{
    presentation: 'modal',
  }}
>
  {/* screens */}
</Stack.Group>
```

When you pass a function, it'll receive the route and navigation:

```jsx
<Stack.Group
  screenOptions={({ route, navigation }) => ({
    title: route.params.title,
  })}
>
  {/* screens */}
</Stack.Group>
```

These options are merged with the options specified in the individual screens, and the screen's options will take precedence over the group's options.

See Options for screens for more details and examples.

## navigationKey

Optional key for a group of screens screen. If the key changes, all existing screens in this group will be removed (if used in a stack navigator)
or reset (if used in a tab or drawer navigator):

```jsx
<Stack.Group navigationKey={isSignedIn ? 'user' : 'guest'}>
  {/* screens */}
</Stack.Group>
```

This is similar to the navigationKey prop on Screen, but applies to a group of screens.

</Tab>
</Tabs>

---
id: elevation
category: Styling
title: elevation
description: Tool to create depth on screen for users
---

```jsx
import { elevation } from '@uhg-abyss/mobile';
```

## Properties

```typescript
elevation(level: number)
```

## Usage

The `elevation` function take in a single parameter that chooses the magnitude of the shadow effect
applied to the surface of the component. The parameter accepts integers 0 - 4 inclusive.

The function will return an object that can be placed in a component's style prop, which will add
the shadow effects directly to the component.

```jsx live
() => {
  return (
    <Layout.Stack space={20} grow>
      <Box style={elevation(0)} color="white" width={135}>
        <Heading
          offset={2}
          color="$semantic.color.text.interactive.rest.primary"
        >
          Level 0
        </Heading>
      </Box>
      <Box style={elevation(1)} color="white" width={135}>
        <Heading
          offset={2}
          color="$semantic.color.text.interactive.rest.primary"
        >
          Level 1
        </Heading>
      </Box>
      <Box style={elevation(2)} color="white" width={135}>
        <Heading
          offset={2}
          color="$semantic.color.text.interactive.rest.primary"
        >
          Level 2
        </Heading>
      </Box>
      <Box style={elevation(3)} color="white" width={135}>
        <Heading
          offset={2}
          color="$semantic.color.text.interactive.rest.primary"
        >
          Level 3
        </Heading>
      </Box>
      <Box style={elevation(4)} color="white" width={135}>
        <Heading
          offset={2}
          color="$semantic.color.text.interactive.rest.primary"
        >
          Level 4
        </Heading>
      </Box>
    </Layout.Stack>
  );
};
```

---
id: extend-theme
category: Util
title: extendTheme
description: Tool to extend and modify themes.
---

```jsx
import { extendTheme } from '@uhg-abyss/mobile';
```

The tool `extendTheme` allows for extending preset themes and allows you to override those themes to fit your design needs.
`extendTheme` is used in conjunction with [ThemeProvider](/mobile/ui/theme-provider) and [createTheme](/mobile/tools/create-theme).

## Properties

```typescript
extendTheme(
  baseTheme: object,
  ...override: object[],
): object;
```

## Usage

`extendTheme` takes in a base theme object and one or more override objects.
The override objects can contain any of the theme properties listed below to modify the base theme.
If multiple override objects are provided, they will be merged in the order they are passed in,
with later overrides taking precedence over earlier ones. If you do not have access to the base theme object,
you can use the [ThemeProvider's](/mobile/ui/theme-provider) `theme` prop as a function to get the current theme object as a parameter
and pass it to extendTheme as the base theme.

If the token format is still in a nested JSON structure, you can use [flattenTokens](/mobile/tools/flatten-tokens) to flatten the tokens before passing them to `extendTheme`.

### Overriding theme from createTheme

In this example, we create a base theme using `createTheme` and then extend it using `extendTheme` with our custom overrides.

```jsx
import { ThemeProvider, createTheme, extendTheme } from '@uhg-abyss/mobile';
import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';

const baseTheme = createTheme('uhc');

const themeOverride = {
  theme: {
    colors: {...},
    space: {...},
    fontSizes: {...},
    fonts: {...},
    fontWeights: {...},
    lineHeights: {...},
    letterSpacings: {...},
    sizes: {...},
    borderWidths: {...},
    borderStyles: {...},
    radii: {...},
    shadows: {...},
    zIndices: {...},
    transitions: {...},
  },
};

const extendedTheme = extendTheme(baseTheme, themeOverride);

const App = () => {
  return <ThemeProvider theme={extendedTheme}>...</ThemeProvider>;
};

AppRegistry.registerComponent(appName, () => App);
```

```jsx sandbox
{
}

() => {
  const baseTheme = createTheme('uhc');
  const extendedTheme = extendTheme(baseTheme, {
    theme: {
      colors: {
        'core.color.purple.90': '#6950C3',
        'core.color.purple.120': '#2F1783',
        'semantic.color.surface.interactive.standards.rest.primary':
          '$core.color.purple.90',
        'semantic.color.surface.interactive.standards.active.primary':
          '$core.color.purple.120',
      },
    },
  });

  return (
    <React.Fragment>
      <Layout.Stack grow space={16}>
        <ThemeProvider theme={baseTheme}>
          <Button>Original Button</Button>
        </ThemeProvider>
        <ThemeProvider theme={extendedTheme}>
          <Button>Custom Button</Button>
        </ThemeProvider>
      </Layout.Stack>
    </React.Fragment>
  );
};
```

### Overriding theme from ThemeProvider

In this example, we use the `ThemeProvider`'s `theme` prop as a function to get the current theme and extend it with our custom overrides using `extendTheme`.

```jsx
import { ThemeProvider, extendTheme } from '@uhg-abyss/mobile';
import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';

const themeOverride = {
  theme: {
    colors: {...},
    space: {...},
    fontSizes: {...},
    fonts: {...},
    fontWeights: {...},
    lineHeights: {...},
    letterSpacings: {...},
    sizes: {...},
    borderWidths: {...},
    borderStyles: {...},
    radii: {...},
    shadows: {...},
    zIndices: {...},
    transitions: {...},
  },
};

const App = () => {
  return (
    <ThemeProvider
      theme={(currentTheme) =>
        extendTheme(currentTheme, themeOverride)
      }
    >
      ...
    </ThemeProvider>
  );
};

AppRegistry.registerComponent(appName, () => App);
```

```jsx sandbox
{
}

<React.Fragment>
  <Layout.Stack grow space={16}>
    <Button>Original Button</Button>
    <ThemeProvider
      theme={(currentTheme) =>
        extendTheme(currentTheme, {
          theme: {
            colors: {
              'core.color.purple.90': '#6950C3',
              'core.color.purple.120': '#2F1783',
              'semantic.color.surface.interactive.standards.rest.primary':
                '$core.color.purple.90',
              'semantic.color.surface.interactive.standards.active.primary':
                '$core.color.purple.120',
            },
          },
        })
      }
    >
      <Button>Custom Button</Button>
    </ThemeProvider>
  </Layout.Stack>
</React.Fragment>;
```

## Extend theme with flattened tokens

In this example, we use `flattenTokens` to flatten nested token objects before passing them to `extendTheme`.

```jsx live
() => {
  const nestedTokens = {
    semantic: {
      color: {
        surface: {
          interactive: {
            standards: {
              rest: {
                primary: {
                  value: '#6950C3',
                  type: 'color',
                  description: 'Overrides primary Button background color',
                },
              },
              active: {
                primary: {
                  value: '#2F1783',
                  type: 'color',
                  description:
                    'Overrides primary Button active background color',
                },
              },
            },
          },
        },
      },
    },
  };

  const flattenedTokens = flattenTokens(nestedTokens);

  return (
    <Layout.Stack grow space={16}>
      <Button>Original Button</Button>
      <ThemeProvider
        theme={(currentTheme) =>
          extendTheme(currentTheme, { theme: flattenedTokens })
        }
      >
        <Button>Custom Button</Button>
      </ThemeProvider>
    </Layout.Stack>
  );
};
```

---
id: flatten-tokens
category: Theme
title: flattenTokens
description: Tool to combine tokens from multiple sources into a single object.
---

```jsx
import { flattenTokens } from '@uhg-abyss/mobile';
```

## Properties

```typescript
flattenTokens(...themes: TokenTheme[])
```

## Usage

The `flattenTokens` function is designed to flatten and merge tokens from multiple JSON structures,
to support a layered system where tokens from different themes can override core, semantic, and component
level tokens.

The Abyss theme accepts an object with the following keys to define the theme:
`sizing`, `spacing`, `color`, `borderRadius`, `borderWidth`, `boxShadow`, `fontFamilies`, `fontWeights`,
`fontSizes`, `lineHeights`, `letterSpacing`, `border`, and `opacity`.

This function will return a single object in this format that can be used to create a theme object via
[createTheme](/mobile/tools/create-theme) for later use in the [ThemeProvider](/mobile/ui/theme-provider).

## Token Format Support

The `flattenTokens` function supports both legacy and DTCG (Design Tokens Community Group) token formats, allowing for backward compatibility during the transition to the standardized DTCG format.

### DTCG Format (Current Standard)

The DTCG format uses `$`-prefixed properties to distinguish token metadata from user-defined properties:

```json
{
  "brand": {
    "$value": "#0071e3",
    "$type": "color",
    "$description": "Primary brand color"
  }
}
```

### Legacy Format (Deprecated)

The legacy format uses unprefixed properties:

```json
{
  "brand": {
    "value": "#0071e3",
    "type": "color",
    "description": "Primary brand color"
  }
}
```

### Format Detection

The `flattenTokens` function automatically detects which format is being used by checking for the presence of `$value` (DTCG) or `value` (legacy) properties. Both formats are parsed identically and produce the same output, ensuring seamless compatibility regardless of which format your tokens use.

**Key features:**

- Automatic format detection per token
- Support for mixed formats within the same token structure
- Identical output regardless of input format
- Type inheritance from parent groups (for DTCG format with hoisted `$type`)

## Overriding Abyss Token Theme

In this example, we use `flattenTokens` and `createTheme` to create a new theme object, which is then passed
into `ThemeProvider` to override the Abyss theme and customize the `Toast` component.

```jsx live
const coreTheme = {
  core: {
    color: {
      brand: {
        60: {
          $value: '#60A0F0',
          $type: 'color',
          $description: 'Overrides info toast with core token',
        },
      },
      red: {
        60: {
          $value: '#FF5757',
          $type: 'color',
          $description: 'Overrides error toast with core token',
        },
      },
    },
  },
};

const semanticTheme = {
  semantic: {
    color: {
      surface: {
        container: {
          status: {
            warning: {
              saturated: {
                $value: '#FFAC63',
                $type: 'color',
                $description: 'Overrides warning toast with semantic token',
              },
            },
          },
        },
      },
    },
  },
};

const componentTheme = {
  toast: {
    color: {
      background: {
        success: {
          $value: '#61D48F',
          $type: 'color',
          $description: 'Overrides success toast with component token',
        },
        error: {
          $value: '{core.color.red.60}',
          $type: 'color',
          $description: 'Overrides error toast with component token',
        },
      },
      icon: {
        leading: {
          $value: '{core.color.neutral.80}',
          $type: 'color',
          $description: 'Toast color icon leading',
        },
        close: {
          $value: '{core.color.neutral.80}',
          $type: 'color',
          $description: 'Toast color icon close',
        },
      },
      text: {
        heading: {
          $value: '{semantic.color.text.interactive.rest.tertiary}',
          $type: 'color',
          $description: 'Toast color heading',
        },
        link: {
          $value: '{semantic.color.text.interactive.rest.tertiary}',
          $type: 'color',
          $description: 'Toast color link',
        },
        notification: {
          $value: '{semantic.color.text.interactive.rest.tertiary}',
          $type: 'color',
          $description: 'Toast color notification',
        },
      },
    },
    'font-size': {
      heading: {
        $value: '{core.font-size.lg}',
        $type: 'fontSizes',
        $description: 'Overrides toast heading font size with component token',
      },
    },
    'line-height': {
      $value: '{core.line-height.lg}',
      $type: 'lineHeights',
      $description: 'Overrides toast line height with component token',
    },
  },
};

const Toasts = ({ overridden }) => {
  return (
    <Layout.Stack grow style={{ paddingHorizontal: '$semantic.spacing.lg' }}>
      <Toast
        variant="info"
        heading="Informational Heading"
        href="https://www.github.com"
        paragraph={
          overridden
            ? 'Info Toast color overridden by Core Theme'
            : 'You can only compare up to 4 providers'
        }
        linkText="Github"
        isClosable
        underlineLink
      ></Toast>
      <Toast
        variant="success"
        href="https://www.github.com"
        linkText="Undo Change"
        paragraph={
          overridden
            ? 'Success Toast color overridden by Component Theme'
            : 'Your estimate has been saved!'
        }
      ></Toast>
      <Toast
        variant="warning"
        linkText="Make A Wish"
        underlineLink
        paragraph={
          overridden
            ? 'Warning Toast color overridden by Semantic Theme'
            : 'Be careful what you wish for!'
        }
      ></Toast>
      <Toast
        variant="error"
        paragraph={
          overridden
            ? 'Error Toast color is overridden by Component & Core Theme'
            : 'Your estimate did not save!'
        }
      ></Toast>
    </Layout.Stack>
  );
};

const flattenedTokens = flattenTokens(coreTheme, semanticTheme, componentTheme);
const theme = createTheme('uhc', { theme: flattenedTokens });

const styles = StyleSheet.create({
  heading: {
    marginLeft: '$semantic.spacing.lg',
    marginBottom: '$semantic.spacing.sm',
    marginTop: '$semantic.spacing.xl',
  },
});

render(() => {
  return (
    <View>
      <Heading style={styles.heading}>Original Theme</Heading>
      <View>
        <Toasts />
      </View>
      <Heading style={styles.heading}>Custom Theme</Heading>
      <ThemeProvider theme={theme}>
        <View>
          <Toasts overridden />
        </View>
      </ThemeProvider>
    </View>
  );
});
```

---
id: styled
category: Styling
title: styled
description: Tool to style elements.
---

```jsx
import { styled } from '@uhg-abyss/mobile';
```

## Properties

```typescript
styled(
  nativeElement: string | React.FC,
  config?: object
)

```

## Object Syntax Only

Write using the JavaScript object style syntax. The reasons for this are: performance, bundle size, and developer experience.

```jsx
const Button = styled('Pressable', {
  backgroundColor: '$semantic.color.surface.container.emphasis.4',
  borderColor: '$core.color.brand.100',
  borderWidth: 2,
  borderRadius: 24,
  padding: 12,
});
```

```jsx live
() => {
  const Button = styled('Pressable', {
    backgroundColor: '$semantic.color.surface.container.emphasis.4',
    borderColor: '$core.color.brand.100',
    borderWidth: 2,
    borderRadius: 24,
    padding: 16,
  });

  return <Button />;
};
```

## Prop Interpolation vs Variants

You can conditionally apply variants at the consumption level.

```jsx
const Button = styled('Pressable', {
  ...
  variants: {
    isDisabled: {
      true: { backgroundColor: '$semantic.color.surface.interactive.standards.disabled.secondary' },
    },
  },
});
```

```jsx live
() => {
  const Button = styled('Pressable', {
    alignItems: 'center',
    borderRadius: 24,
    paddingVertical: 8,
    paddingHorizontal: 16,
    backgroundColor: '$semantic.color.surface.container.primary',
    variants: {
      isDisabled: {
        true: {
          backgroundColor:
            '$semantic.color.surface.interactive.standards.disabled.secondary',
        },
      },
    },
  });

  return (
    <Layout.Stack>
      <Button isDisabled>
        <Text
          color="$semantic.color.text.body.alt"
          fontWeight="$core.font-weight.bold"
        >
          Button
        </Text>
      </Button>
    </Layout.Stack>
  );
};
```

## Tokens and Themes

You can define tokens in the config file and seamlessly consume and access directly in the Style Object.

```jsx
const Button = styled('Pressable', {
  ...
  backgroundColor: '$semantic.color.surface.container.primary',
  paddingVertical: '$semantic.spacing.sm',
  paddingHorizontal: '$semantic.spacing.lg',
});
```

```jsx live
() => {
  const Button = styled('Pressable', {
    alignItems: 'center',
    borderRadius: 24,
    paddingVertical: '$semantic.spacing.sm',
    paddingHorizontal: '$semantic.spacing.lg',
    backgroundColor: '$semantic.color.surface.container.primary',
  });

  return (
    <Layout.Stack>
      <Button>
        <Text
          color="$semantic.color.text.body.alt"
          fontWeight="$core.font-weight.bold"
        >
          Button
        </Text>
      </Button>
    </Layout.Stack>
  );
};
```

### Landscape and Portrait Orientation

Use `landscape` and `portrait` to define styles specific to the device orientation.

```jsx
  const OrientationView = styled('View', {
    ...
  landscape: {
    flexDirection: 'row',
    paddingVertical: '$semantic.spacing.xs',
  },
  portrait: {
    paddingVertical: '$semantic.spacing.sm',
  },
  });
```

## Animations

You can use Animated within a styled component to add animations. Animation values must be passed to the component's `style` prop, not placed within the styled configs.

```jsx
import { Animated } from 'react-native';

  const AnimatedButton = styled(Animated.View, {
    alignItems: 'center',
    borderRadius: 24,
    paddingVertical: '$semantic.spacing.sm',
    paddingHorizontal: '$semantic.spacing.lg',
    backgroundColor: '$semantic.color.surface.container.primary',
  });

const animatedValue = useRef(new Animated.Value(1)).current;

const fade = (direction) => {
  Animated.timing(animatedValue, {
    toValue: direction === 'in' ? 0.95 : 1,
    duration: direction === 'in' ? 100 : 300,
    useNativeDriver: true,
    easing: Easing.bezier(0.25, 0.1, 0.25, 0.1),
  }).start();
};

const handlePressIn = (e) => {
  fade('in');
};

const handlePressOut = (e) => {
  fade('out');
};

<AnimatedButton style={{ transform: [{ scale: animatedValue }] }}>
```

```jsx live
() => {
  const ButtonWrapper = styled('Pressable', {});

  const AnimatedButton = styled(Animated.View, {
    alignItems: 'center',
    borderRadius: 24,
    paddingVertical: '$semantic.spacing.sm',
    paddingHorizontal: '$semantic.spacing.lg',
    backgroundColor: '$semantic.color.surface.container.primary',
  });

  const animatedValue = useRef(new Animated.Value(1)).current;

  const fade = (direction) => {
    Animated.timing(animatedValue, {
      toValue: direction === 'in' ? 0.95 : 1,
      duration: direction === 'in' ? 100 : 300,
      useNativeDriver: Platform.select({
        native: true,
        default: false,
      }),
      easing: Easing.bezier(0.25, 0.1, 0.25, 0.1),
    }).start();
  };

  const handlePressIn = (e) => {
    fade('in');
  };

  const handlePressOut = (e) => {
    fade('out');
  };

  return (
    <Layout.Stack>
      <ButtonWrapper onPressIn={handlePressIn} onPressOut={handlePressOut}>
        <AnimatedButton style={{ transform: [{ scale: animatedValue }] }}>
          <Text
            color="$semantic.color.text.body.alt"
            fontWeight="$core.font-weight.bold"
          >
            Button
          </Text>
        </AnimatedButton>
      </ButtonWrapper>
    </Layout.Stack>
  );
};
```

## Dynamic/Static

When static variants won't work and you need a variable style, you can use the `props` config in the `styled` tool. Place all of your styles along with variants in the static config. The `props` config takes in a function with the props passed into the component as the function's parameters. You can then use those props to handle dynamic styles like sizing and colors. The function should return the style properties to add to the component. The `props` function overrides static styles and styles defined in `variants`.

For the best results and performance, it is recommended to use variants when possible.

```jsx live
() => {
  const Button = styled('Pressable', {
    borderRadius: 24,
    alignItems: 'center',
    justifyContent: 'center',
    variants: {
      variant: {
        solid: { backgroundColor: '#d9f6fa' },
        outline: {
          backgroundColor: '$semantic.color.surface.container.secondary',
          borderWidth: 2,
          borderColor: '$core.color.brand.100',
        },
      },
      isDisabled: {
        true: {
          backgroundColor:
            '$semantic.color.surface.interactive.standards.disabled.secondary',
          borderWidth: 0,
        },
      },
    },

    props: ({ size }) => {
      return { padding: size + 4 };
    },
  });

  return (
    <Layout.Stack>
      <Button variant="solid" isDisabled={false} size={8}>
        <Text color="$core.color.brand.100" fontWeight="$core.font-weight.bold">
          Styled Button
        </Text>
      </Button>
    </Layout.Stack>
  );
};
```

---
id: tokenize
category: Theme
title: tokenize
description: Tool to tokenize props in a component.
---

```jsx
import { tokenize } from '@uhg-abyss/mobile';
```

## Properties

```typescript
tokenize(
  component: React.Component,
  tokenObj: object
): React.Component;
```

There are times when a component accepts a prop that could potentially map to an Abyss token.

For example, the [React Native SVG Circle](https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md#circle)
component has a `fill` prop that accepts a color. We can use the `tokenize` function to allow the `fill` prop to now accept an Abyss color token.

```jsx
const TokenizedCircle = tokenize(Circle, { fill: 'colors' });
```

The default values that can be used for a prop are `'colors'`, `'space'`, `'fontSizes'`, `'lineHeights'`, `'fontWeights'`, `'fonts'` & `'radii'`.

## Basic Example

The [TouchableHighlight](https://reactnative.dev/docs/touchablehighlight) component has a prop, `underlayColor` that accepts a color.
Since we have tokens for colors, we can use the `tokenize` function to map the prop to accept tokens.

```jsx
const TokenizedTouchableHighlight = tokenize(TouchableHighlight, {
  underlayColor: 'colors',
});
```

Now we can use a color token as a value for the `underlayColor` prop. Press the button below to see the underlay color.

```jsx live
const TokenizedTouchableHighlight = tokenize(TouchableHighlight, {
  underlayColor: 'colors',
});

render(() => {
  return (
    <TokenizedTouchableHighlight
      underlayColor="$semantic.color.border.interactive.buttons.active.alt"
      style={{ padding: 8 }}
      onPress={() => {}}
      accessibilityRole="button"
    >
      <Text size="$core.font-size.p.100">Press Me</Text>
    </TokenizedTouchableHighlight>
  );
});
```

### Advanced Example

If the prop that should accept tokens is an object, the token object can be mapped to an object.

For example, the `style` prop on a View accepts an object with many props that can be mapped to tokens.

```jsx
const TokenizedView = tokenize(View, {
  style: {
    backgroundColor: 'colors',
    borderColor: 'colors',
    marginLeft: 'space',
    borderRadius: 'radii',
  },
});
```

Now, those four props can now accept tokens.

```jsx live
const TokenizedView = tokenize(View, {
  style: {
    backgroundColor: 'colors',
    borderColor: 'colors',
    marginLeft: 'space',
    borderRadius: 'radii',
  },
});

render(() => {
  return (
    <TokenizedView
      style={{
        backgroundColor:
          '$semantic.color.surface.container.status.info.saturated',
        borderColor: '$semantic.color.border.status.alert.error',
        marginLeft: 48,
        borderRadius: '$core.border-radius.xl',
        borderWidth: 4,
        width: 100,
        height: 100,
      }}
    />
  );
});
```

---
id: with-theme
category: Util
title: withTheme
description: Tool to wrap a component with a higher order component.
---

```jsx
import { withTheme } from '@uhg-abyss/mobile';
```

This function takes a component and returns a higher order component with the current theme passed into the child.

## Usage

`withTheme` has one argument: the component to be wrapped. This sample code will show the difference.
The first component will not have the theme passed to it, while the second will.

```jsx
() => {
  const UnwrappedComponent = (props) => {
    return <Text>{JSON.stringify(props, null, 4)}</Text>;
  };

  const WrappedComponent = withTheme(UnwrappedComponent);

  return (
    <React.Fragment>
      <Text>
        Here are the props of a component not wrapped with the withTheme
        function
      </Text>
      <UnwrappedComponent />
      <Layout.Space space={16} />
      <Text>
        Here are the props of a component that *are* wrapped with the withTheme
        function
      </Text>
      <WrappedComponent />
    </React.Fragment>
  );
};
```

```jsx live
() => {
  const UnwrappedComponent = (props) => {
    return <Text>{JSON.stringify(props, null, 4)}</Text>;
  };

  const WrappedComponent = withTheme(UnwrappedComponent);

  return (
    <React.Fragment>
      <Text>
        Here are the props of a component not wrapped with the withTheme
        function
      </Text>
      <UnwrappedComponent />
      <Layout.Space space={16} />
      <Text>
        Here are the props of a component that *are* wrapped with the withTheme
        function
      </Text>
      <WrappedComponent />
    </React.Fragment>
  );
};
```

---
id: accordion
category: Content
title: Accordion
description: A vertically stacked list of headers that reveal or hide associated sections of content.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/branch/1Uml7LO8NTEWoBUAl4DTaG/Abyss-Mobile?node-id=10126-35246&t=2iqvkqjkI4KBEphM-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { Accordion } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Accordion',
  inputs: [
    {
      prop: 'type',
      type: 'select',
      options: [
        { label: 'single', value: 'single' },
        { label: 'multiple', value: 'multiple' },
      ],
    },
    {
      prop: 'defaultValue',
      type: 'select',
      options: [
        { label: 'none', value: '' },
        { label: 'sandbox-1', value: 'sandbox-1' },
        { label: 'sandbox-2', value: 'sandbox-2' },
        { label: 'sandbox-3', value: 'sandbox-3' },
      ],
    },
    {
      prop: 'isCollapsible',
      type: 'boolean',
    },
    {
      prop: 'isDisabled',
      type: 'boolean',
    },
  ]
}

<Accordion>
  <Accordion.Item value="sandbox-1" label="Sandbox Accordion 1">
      SURPRISE - Sandbox Accordion 1
  </Accordion.Item>

  <Accordion.Item value="sandbox-2" label="Sandbox Accordion 2">
      SURPRISE - Sandbox Accordion 2
  </Accordion.Item>

  <Accordion.Item value="sandbox-3" label="Sandbox Accordion 3">
      SURPRISE - Sandbox Accordion 3
  </Accordion.Item>
</Accordion>
```

## Type Multiple

Use the `type` property to set the Accordion to either have `single` or `multiple` open items. The default is set to `single`.

```jsx live
<Box padding={0} color="white">
  <Accordion type="multiple" isCollapsible>
    <Accordion.Item value="item-1" label="SandBox Accordion 1">
      SURPRISE - Sandbox Accordion 1
    </Accordion.Item>

    <Accordion.Item value="item-2" label="SandBox Accordion 2">
      SURPRISE - Sandbox Accordion 2
    </Accordion.Item>

    <Accordion.Item value="item-3" label="SandBox Accordion 3">
      SURPRISE - Sandbox Accordion 3
    </Accordion.Item>
  </Accordion>
</Box>
```

## Default Value - Single

Use the `defaultValue` property to set an initial Accordion to be open based on its `value` property. When type is set to `single` pass in a string.

```jsx live
<Box padding={0} color="white">
  <Accordion defaultValue="item-1" isCollapsible>
    <Accordion.Item value="item-1" label="SandBox Accordion 1">
      SURPRISE - Sandbox Accordion 1
    </Accordion.Item>

    <Accordion.Item value="item-2" label="SandBox Accordion 2">
      SURPRISE - Sandbox Accordion 2
    </Accordion.Item>

    <Accordion.Item value="item-3" label="SandBox Accordion 3">
      SURPRISE - Sandbox Accordion 3
    </Accordion.Item>
  </Accordion>
</Box>
```

## Default Value - Multiple

When the `type` of the Accordion is set to `multiple` pass in a string array.

```jsx live
<Box padding={0} color="white">
  <Accordion
    type="multiple"
    defaultValue={['item-1', 'item-2', 'item-3']}
    isCollapsible
  >
    <Accordion.Item value="item-1" label="SandBox Accordion 1">
      SURPRISE - Sandbox Accordion 1
    </Accordion.Item>

    <Accordion.Item value="item-2" label="SandBox Accordion 2">
      SURPRISE - Sandbox Accordion 2
    </Accordion.Item>

    <Accordion.Item value="item-3" label="SandBox Accordion 3">
      SURPRISE - Sandbox Accordion 3
    </Accordion.Item>
  </Accordion>
</Box>
```

## Collapsible

The `isCollapsible` property allows closing content when clicking the trigger for an open item. When `true` you are allowed to collapse all items. When `false` one item will always remain open. The default is set to `true`. Collapsible does not apply when the type is "multiple".

```jsx live
<Box padding={0} color="transparent">
  <Accordion
    type="single"
    defaultValue="item-1"
    isCollapsible={false}
    style={{ marginBottom: 20 }}
  >
    <Accordion.Item value="item-1" label="Non Collapsible Accordion Item 1">
      Accordion Content 1
    </Accordion.Item>

    <Accordion.Item value="item-2" label="Non Collapsible Accordion Item 2">
      Accordion Content 2
    </Accordion.Item>
  </Accordion>
  <Accordion type="single" defaultValue="item-1">
    <Accordion.Item value="item-1" label="Default Accordion Item 1">
      Accordion Content 1
    </Accordion.Item>

    <Accordion.Item value="item-2" label="Default Accordion Item 2">
      Accordion Content Item 2
    </Accordion.Item>
  </Accordion>
</Box>
```

## Disabled

Use the `isDisabled` property to disable the entire `Accordion` or individual levels. The default is set to `false`.

```jsx live
<Box padding={0} color="transparent">
  <Accordion
    type="single"
    defaultValue="item-1"
    isCollapsible
    style={{ marginBottom: 20 }}
  >
    <Accordion.Item value="item-1" label="Item is not disabled">
      Not disabled
    </Accordion.Item>

    <Accordion.Item isDisabled value="item-2" label="Item disabled">
      Disabled
    </Accordion.Item>

    <Accordion.Item value="item-3" label="Item is not disabled">
      Not disabled
    </Accordion.Item>
  </Accordion>

  <Accordion type="single" defaultValue="item-1" isDisabled>
    <Accordion.Item value="item-1" label="Entire Accordion Is Disabled">
      Disabled
    </Accordion.Item>

    <Accordion.Item value="item-2" label="Entire Accordion Is Disabled">
      Disabled
    </Accordion.Item>
  </Accordion>
</Box>
```

## Border Variants

Accordion borders can be manipulated using the below props:

`hideBorderTop` | hides the border at the top of the accordion.

`hideBorderBottom` | hides the border at the bottom of the accordion.

`hideBorderAll` | hides all borders in the accordion.

```jsx live
<Box padding={0} color="transparent">
  <Accordion
    type="single"
    style={{ marginBottom: 20 }}
    isCollapsible
    hideBorderTop
  >
    <Accordion.Item value="item-1" label="Hide Border Top">
      Hides the border at the top of the accordion
    </Accordion.Item>

    <Accordion.Item value="item-2" label="Hide Border Top">
      Hides the border at the top of the accordion
    </Accordion.Item>
  </Accordion>

  <Accordion
    type="single"
    style={{ marginBottom: 20 }}
    isCollapsible
    hideBorderBottom
  >
    <Accordion.Item value="item-1" label="Hide Border Bottom">
      Hides the border at the bottom of the accordion
    </Accordion.Item>

    <Accordion.Item value="item-2" label="Hide Border Bottom">
      Hides the border at the bottom of the accordion
    </Accordion.Item>
  </Accordion>

  <Accordion type="single" isCollapsible hideBorderAll>
    <Accordion.Item value="item-1" label="Hide Border All">
      Hides all borders in the accordion
    </Accordion.Item>

    <Accordion.Item value="item-2" label="Hide Border All">
      Hides all borders in the accordion
    </Accordion.Item>
  </Accordion>
</Box>
```

## onValueChange

The `onValueChange` property is an event handler that is called when the expanded state of any item changes.

```jsx live
() => {
  return (
    <Box padding={0} color="transparent">
      <Accordion
        type="single"
        defaultValue="item-1"
        onValueChange={(val) => console.log('Multi Value', val)}
        style={{ marginBottom: 20 }}
      >
        <Accordion.Item value="item-1" label="Single Accordion Item 1">
          Accordion Content 1
        </Accordion.Item>

        <Accordion.Item value="item-2" label="Single Accordion Item 2">
          Accordion Content 2
        </Accordion.Item>

        <Accordion.Item value="item-3" label="Single Accordion Item 3">
          Accordion Content 3
        </Accordion.Item>
      </Accordion>

      <Accordion
        type="multiple"
        defaultValue={['item-1']}
        onValueChange={(val) => console.log('Single Value', val)}
      >
        <Accordion.Item value="item-1" label="Multiple Accordion Item 1">
          Accordion Content 1
        </Accordion.Item>

        <Accordion.Item value="item-2" label="Multiple Accordion Item 2">
          Accordion Content 2
        </Accordion.Item>

        <Accordion.Item value="item-3" label="Multiple Accordion Item 3">
          Accordion Content 3
        </Accordion.Item>
      </Accordion>
    </Box>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Accordion"
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The Accordion items to be displayed',
    },
    {
      name: 'isCollapsible',
      type: 'boolean',
      description:
        'Used to enable/disable the ability to collapse all Accordion items',
      default: 'true',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description:
        'disables the Accordion so that none of the Accordion items can be opened',
      default: 'false',
    },
    {
      name: 'onValueChange',
      type: 'function',
      description:
        'Event handler called when the expanded state of an item changes',
    },
    {
      name: 'defaultValue',
      type: 'string | array[string]',
      description: 'Used to set an initial item or items to be open',
    },
    {
      name: 'type',
      type: "'single' | 'multiple'",
      description:
        'Used to set the amount of items able to be opened at one time',
      default: 'single',
    },
    {
      name: 'hideBorderAll',
      type: 'boolean',
      description: 'Hides the borders of the Accordion',
      default: 'false',
    },
    {
      name: 'hideBorderBottom',
      type: 'boolean',
      description: 'Hides the border at the bottom of the Accordion',
      default: 'false',
    },
    {
      name: 'hideBorderTop',
      type: 'boolean',
      description: 'Hides the border at the top of the Accordion',
      default: 'false',
    },
  ]}
/>

<Docs.PropsTable
  of="Accordion.Item"
  rows={[
    {
      name: 'label',
      type: 'string',
      description: 'Sets the label of the Accordion item',
    },
    {
      name: 'value',
      type: 'string',
      description: 'Used to set the value of the Accordion item',
    },
    {
      name: 'children',
      type: 'node',
      description: 'The Text to be displayed on an expanded Accordion item',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description:
        "disables the individual Accordion Item so that it can't be opened",
      default: 'false',
    },
    {
      name: 'hideBorderAll',
      type: 'boolean',
      description: 'Hides the borders of the current accordion item',
      default: 'false',
    },
    {
      name: 'hideBorderBottom',
      type: 'boolean',
      description:
        'Hides the border at the bottom of the current accordion item',
      default: 'false',
    },
    {
      name: 'hideBorderTop',
      type: 'boolean',
      description: 'Hides the border at the top of the current accordion item',
      default: 'false',
    },
  ]}
/>

<Docs.ClassesTable
  of="Accordion"
  rows={[
    {
      name: 'accordion-root',
      description: 'Accordion root element',
    },
  ]}
/>

<Docs.ClassesTable
  of="Accordion.Item"
  rows={[
    {
      name: 'accordion-item-root',
      description: 'Accordion item root element',
    },
    {
      name: 'accordion-label',
      description: 'Accordion label element',
    },
    {
      name: 'accordion-trigger',
      description: 'Accordion item content',
    },
    {
      name: 'accordion-trigger-icon',
      description: 'Accordion item icon',
    },
    {
      name: 'accordion-content',
      description: 'Accordion content',
    },
    {
      name: 'accordion-text',
      description: 'Accordion content text',
    },
  ]}
/>

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="Accordion" keys={['accordion']} />

</Tab>
</Tabs>

---
id: accumulator
category: Data Viz
title: Accumulator
description: A graphical representation of a data set based on one variable.
design: https://www.figma.com/design/5djnh49w0SBYAG5tFJifIG?node-id=1469-15540&t=v9rViPeBQC82z4yT-0
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { Accumulator } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Accumulator',
  inputs: [
    {
      prop: 'percentage',
      type: 'number',
      defaultValue: 50
    },
    {
      prop: 'animationDelay',
      type: 'number',
      defaultValue: 0,
    },
    {
      prop: 'color',
      type: 'string',
      defaultValue: '$accumulator.color.surface.track.green',
    },
  ]
}

<Accumulator />
```

## Percentage

The `percentage` prop determines how far the accumulator will move. The prop accepts numbers between `0` and `100`.
The default is `0`.

```jsx live
<Layout.Stack grow>
  <Accumulator percentage={100} />
  <Accumulator percentage={75} />
  <Accumulator percentage={50} />
  <Accumulator percentage={25} />
  <Accumulator percentage={10} />
  <Accumulator percentage={0} />
</Layout.Stack>
```

## Animation Delay

The `animationDelay` prop is used to start the animation after a given delay (milliseconds).
The default is `0`.

```jsx live
() => {
  const [animated, toggle] = useToggle(false);
  const percentage = animated ? 40 : 0;
  return (
    <Layout.Stack grow>
      <Accumulator percentage={percentage} animationDelay={0} />
      <Accumulator percentage={percentage} animationDelay={300} />
      <Accumulator percentage={percentage} animationDelay={600} />
      <Accumulator percentage={percentage} animationDelay={900} />
      <Accumulator percentage={percentage} animationDelay={1200} />
      <Layout.Space space={20} />
      <Button onPress={toggle}>Start Animation</Button>
    </Layout.Stack>
  );
};
```

## Color

The `color` prop is used to set the color for the accumulator track.
The default is set to `$accumulator.color.surface.track.green`.

```jsx live
<Layout.Stack grow>
  <Accumulator percentage={50} />
  <Accumulator percentage={50} color="$core.color.brand.100" />
  <Accumulator
    percentage={50}
    color="$semantic.color.surface.container.status.info.saturated"
  />
  <Box color="$core.color.brand.100">
    <Accumulator percentage={50} color="$core.color.neutral.0" />
  </Box>
</Layout.Stack>
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Accumulator"
  rows={[
    {
      name: 'percentage',
      type: 'number',
      description:
        'The percentage of the bar that is filled. Value between 0 and 100',
      default: 0,
    },
    {
      name: 'animationDelay',
      type: 'number',
      description: 'The amount of milliseconds before animating the bar',
      default: 0,
    },
    {
      name: 'color',
      type: 'string',
      description: 'The color of the accumulator track',
      default: '$accumulator.color.surface.track.green',
    },
  ]}
/>

<Docs.ClassesTable
  of="Accumulator"
  rows={[
    {
      name: 'accumulator-root',
      description: 'Accumulator root element',
    },
    {
      name: 'accumulator-track',
      description: 'Accumulator track element',
    },
  ]}
/>

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="Accumulator" keys={['accumulator']} />

</Tab>

<Tab label="Migration">

<Docs.ComparisonTable of="Accumulator" type="class" />

<Docs.ComparisonTable of="Accumulator" type="props" />

</Tab>
</Tabs>

---
id: activity-tracker
category: Data
title: ActivityTracker
description: Displays a visual representation of the user's activity.
design: https://www.figma.com/design/wCMblLsq9TxAQvKzY3EfCt/UHC-Abyss-Mobile?node-id=56619-6859&t=7SRu2GmHzPNPQzaT-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { ActivityTracker } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
    component: 'ActivityTracker',
    inputs: [
        {
            prop: 'heading',
            type: 'string',
        },
        {
            prop: 'showActiveStep',
            type: 'boolean',
        },
        {
            prop: 'variant',
            type: 'select',
            options: [
                { label: 'oneweek', value: 'oneweek' },
                { label: 'twoweeks', value: 'twoweeks' },
            ],
        },
    ]
}

<ActivityTracker
    heading="Activity Tracker"
    showActiveStep={true}
/>
```

## Variants

Use the `variant` prop to determine the variant of the activity tracker. The `twoweeks` variant displays a 14-day option that does not contain an `showActiveStep`. The `oneweek` variant is the default.

```jsx live
<Layout.Stack grow>
  <ActivityTracker
    heading="One Week"
    completedSteps={[0, 1]}
    style={{ marginBottom: 20 }}
  />
  <ActivityTracker
    heading="Two Weeks"
    completedSteps={[0, 1]}
    variant="twoweeks"
  />
</Layout.Stack>
```

## Completed Steps

Use the `completedSteps` prop to determine the steps that have been completed.

```jsx live
<ActivityTracker
  heading="Activity Tracker"
  showActiveStep={false}
  completedSteps={[0, 1, 3]}
/>
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="ActivityTracker"
  rows={[
    {
      name: 'heading',
      type: 'string',
      description: 'Heading of the activity tracker',
    },
    {
      name: 'showActiveStep',
      type: 'boolean',
      description: 'Highlights the current day of the week',
    },
    {
      name: 'completedSteps',
      type: 'number[]',
      description: 'Completed steps in the activity tracker',
    },
    {
      name: 'variant',
      type: 'oneweek | twoweeks',
      description: 'Change the amount of days in the activity tracker',
    },
  ]}
/>

<Docs.ClassesTable
  of="ActivityTracker"
  rows={[
    {
      name: 'activity-tracker-root',
      description: 'Root activity tracker element',
    },
    {
      name: 'activity-tracker-heading',
      description: 'Heading container',
    },
    {
      name: 'activity-tracker-selection-circle',
      description:
        'Circle indicating the current day of the week in the activity tracker',
    },
    {
      name: 'activity-tracker-success-circle',
      description: 'Circle indicating a successfully completed step',
    },
    {
      name: 'activity-tracker-week-day-text',
      description: 'Text displaying the day of the week.',
    },
    {
      name: 'activity-tracker-date-label',
      description: 'Text inside the circle',
    },
  ]}
/>

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="ActivityTracker" keys={['activity-tracker']} />

</Tab>

<Tab label="Migration">

<Docs.ComparisonTable of="ActivityTracker" type="class" />

<Docs.ComparisonTable of="ActivityTracker" type="props" />

</Tab>
</Tabs>

---
id: alert
category: Feedback
title: Alert
description: Communicate a state that affects the entire system, not just a feature or page. It persists over a session and appears without the user initiating the action.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=10091%3A35499&t=KluMjh3mwaQrqcQh-0
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { Alert } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Alert',
  inputs: [
    {
      prop: 'heading',
      type: 'string',
    },
    {
      prop: 'paragraph',
      type: 'string'
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'success', value: 'success' },
        { label: 'warning', value: 'warning' },
        { label: 'error', value: 'error' },
        { label: 'info', value: 'info' },
      ]
    },
    {
      prop: 'isCloseable',
      type: 'boolean'
    },
  ]
}

<Alert heading="Completed Health Screen:" paragraph="Review of your results are ready." isCloseable={true}>
  <Alert.Button>Go To Results</Alert.Button>
</Alert>
```

## Heading and Paragraph

The `heading` and `paragraph` props are used to set the heading and paragraph of the alert.
Both props are required.

```jsx live
<Alert
  heading="Prior Authorization Needed:"
  paragraph="Review your benefits with your health plan."
  variant="success"
/>
```

## isCloseable

The `isCloseable` prop determines if a close button is displayed in the alert. It defaults to `true` unless the `inline` prop is enabled.

```jsx live
<Layout.Stack grow space={8}>
  <Alert
    heading="Prior Authorization Needed:"
    paragraph="Review your benefits with your health plan."
    variant="success"
  />
  <Alert
    heading="Prior Authorization Needed:"
    paragraph="Review your benefits with your health plan."
    variant="success"
    isCloseable={false}
  />
</Layout.Stack>
```

## Variants

Use the `variant` property to set the color of the `Alert`.
The options are `success`, `warning`, `error`, and `info`. The default is `success`.

```jsx live
<Layout.Stack grow space={8}>
  <Alert
    heading="Prior Authorization Needed:"
    paragraph="Review your benefits with your health plan."
    variant="success"
  />
  <Alert
    heading="Prior Authorization Needed:"
    paragraph="Review your benefits with your health plan."
    variant="warning"
  />
  <Alert
    heading="Prior Authorization Needed:"
    paragraph="Review your benefits with your health plan."
    variant="error"
  />
  <Alert
    heading="Prior Authorization Needed:"
    paragraph="Review your benefits with your health plan."
    variant="info"
  />
</Layout.Stack>
```

## Inline Variant

The inline variant functions the same as the default, but is rounder and takes up less width. It uses the `inline` prop, changing the border radius to create a more rounded look. The inline variant should be wrapped in a component that provides padding on the left and right (see example below).

```jsx live
() => {
  const InlineWrapper = styled('View', {
    paddingHorizontal: 48,
  });

  return (
    <InlineWrapper>
      <Alert
        heading="You're going paperless!"
        paragraph="Starting on 3/22/2023"
        variant="info"
        inline={true}
      />
    </InlineWrapper>
  );
};
```

## Children

Add Children to the Alert component by simply placing elements between the Alert tags. Children should be used for adding either a link or button.
Links and buttons can be added with the `Alert.Link` and `Alert.Button` components, respectively.

```jsx live
<Layout.Stack grow space={8}>
  <Alert
    heading="Completed Health Screen:"
    paragraph="Review of your results are ready."
    onClose={() => setIsVisible(false)}
  >
    <Alert.Link
      after={
        <IconSymbol
          icon="chevron_right"
          size={16}
          color="$semantic.color.icon.status.info"
        />
      }
    >
      Go To Results
    </Alert.Link>
  </Alert>
  <Alert
    heading="Unable to confirm location:"
    paragraph="Please use a valid zip code or address."
    variant="error"
  >
    <Alert.Button
      after={
        <IconSymbol
          icon="location_on"
          size={16}
          variant="outlined"
          color="$semantic.color.icon.content.primary"
        />
      }
    >
      Use current location
    </Alert.Button>
  </Alert>
</Layout.Stack>
```

## Change Icon

Use the `icon` property to pass in a specific `Icon` component.

Since `heading` and `paragraph` are required props, icons are used in a setting in which it is just a decorative element (which is the default case for icons) and should be ignored by screen readers. The implementation below provides an example. Since the default of `isScreenReadable` is set to false, no specific changes need to be made for decorative icons. Find further guidance on icons symbols in the [Icons Symbols Tab](/mobile/ui/icon-symbol/).

```jsx live
<Alert
  icon={<IconSymbol icon="search" />}
  heading="Search Heading"
  paragraph="The icon is decorative because of text from the heading and this paragraph."
  variant="info"
  onClose={() => {}}
/>
```

## onClose

Use the `onClose` property to handle the action when close button is triggered. The `onClose` property is always required.

```jsx live
() => {
  const [isVisible, toggleVisibility] = useToggle(true);
  return (
    <Layout.Stack grow>
      <Button size="small" onPress={toggleVisibility}>
        Toggle Alert
      </Button>
      <Alert
        heading="Alert With onClose Function"
        paragraph="The onClose prop handles the action when close button is triggered"
        isVisible={isVisible}
        onClose={toggleVisibility}
      />
    </Layout.Stack>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Alert"
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the Alert component',
    },
    {
      name: 'heading',
      type: 'string',
      description: 'Sets the heading for the alert',
    },
    {
      name: 'paragraph',
      type: 'string',
      description: 'Sets the paragraph for the alert',
    },
    {
      name: 'variant',
      type: "'info' | 'success' | 'error' | 'warning'",
      description: 'Change the alert style',
      default: 'success',
    },
    {
      name: 'icon',
      type: 'ReactNode',
      description: 'Change the default icon',
    },
    {
      name: 'onClose',
      type: 'function',
      description: 'Callback fired when the alert is closed',
    },
    {
      name: 'isVisible',
      type: 'boolean',
      description: 'Flag to show or hide Alert',
      default: 'true',
    },
    {
      name: 'isCloseable',
      type: 'boolean',
      description: 'Determines if alert has close button',
      default: 'true',
    },
    {
      name: 'inline',
      type: 'boolean',
      description: 'Change the alert type to inline',
      default: 'false',
    },
  ]}
/>

<Docs.PropsTable
  of="Alert.Link"
  rows={[
    {
      name: 'before',
      type: 'ReactNode',
      description: 'Insert element into link component before children',
    },
    {
      name: 'after',
      type: 'ReactNode',
      description: 'Insert element into link component after children',
    },
    {
      name: 'href',
      type: 'string',
      description: 'Set the URL of the link',
    },
    {
      name: 'children',
      type: 'ReactNode',
      description: 'Set the text of the link',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Set the color of the link',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Callback fired when the button is pressed',
    },
    {
      name: 'underline',
      type: 'boolean',
      description: 'Used to underline the link text',
      default: 'false',
    },
  ]}
/>

<Docs.PropsTable
  of="Alert.Button"
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the button component',
    },
    {
      name: 'before',
      type: 'node',
      description: 'Insert element into button component before children',
    },
    {
      name: 'after',
      type: 'node',
      description: 'Insert element into button component after children',
    },
    {
      name: 'rounded',
      type: 'boolean',
      description: 'Flag to make button rounded',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Callback fired when the button is pressed',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description: 'Flag to disable the button',
    },
  ]}
/>

<Docs.ClassesTable
  of="Alert"
  rows={[
    {
      name: 'alert-root',
      description: 'Alert root element',
    },
    {
      name: 'alert-content',
      description: 'Alert content element',
    },
    {
      name: 'alert-heading',
      description: 'Alert heading element',
    },
    {
      name: 'alert-paragraph',
      description: 'Alert paragraph element',
    },
    {
      name: 'alert-children-container',
      description: 'Alert children container',
    },
    {
      name: 'alert-close-button',
      description: 'Alert close icon container',
    },
    {
      name: 'alert-close-icon',
      description: 'Alert close icon element',
    },
    {
      name: 'alert-icon',
      description: 'Alert icon element',
    },
  ]}
/>

<Docs.ClassesTable
  of="Alert.Link"
  rows={[
    {
      name: 'alert-link-root',
      description: 'Alert link element',
    },
  ]}
  inherits={[{ name: 'Link', link: '/mobile/ui/link' }]}
/>

<Docs.ClassesTable
  of="Alert.Button"
  rows={[
    {
      name: 'alert-button-root',
      description: 'Alert link element',
    },
  ]}
  inherits={[{ name: 'Button', link: '/mobile/ui/button' }]}
/>

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="Alert" keys={['alert']} />

</Tab>

<Tab label="Migration">

<Docs.ComparisonTable of="Alert" type="props" />

<Docs.ComparisonTable of="Alert" type="class" />

</Tab>
</Tabs>

---
id: app-bar
category: Navigation
title: AppBar
description: Displays information and actions relating to the current screen.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=10091%3A35499&t=KluMjh3mwaQrqcQh-0
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { AppBar } from '@uhg-abyss/mobile';
```

## Basics

AppBar can be fully customized using the `left`, `right`, and `center` props, as well as by passing components to `nestedContent` and `children`.

```jsx render
() => {
  const CustomSlot = styled(Slot, {
    flexGrow: 1,
    height: 52,
    width: '100%',
  });
  return (
    <View style={{ width: 480 }}>
      <AppBar
        left={<CustomSlot>left content</CustomSlot>}
        right={<CustomSlot>right content</CustomSlot>}
        center={<CustomSlot>center content</CustomSlot>}
        nestedContent={
          <AppBar.NestedContent testID="nested">
            <CustomSlot>nested content</CustomSlot>
            <CustomSlot>nested content</CustomSlot>
          </AppBar.NestedContent>
        }
      >
        <CustomSlot>full width content</CustomSlot>
      </AppBar>
    </View>
  );
};
```

## Accessories

App Bar contains options to add several partner components, depending on the page the App Bar is designed for.
These accessories can be placed in the children of the AppBar.

- <b>
    <a href="/mobile/ui/search-input">SearchBar </a>
  </b>
  - a SearchBar is used in AppBar content and the AppBar is wrapped in a<a href="/mobile/ui/scroll-provider">
    ScrollProvider
  </a>, set `animateRight` to enable the right-side hide/show animation while collapsing.
  Without a ScrollProvider, this prop has no effect.
- <b>
    <a href="/mobile/ui/progress-bar">ProgressBar </a>
  </b>
  - A complementary visual representation of the current step a user is on while
  completing a form of inputs.
- <b>
    <a href="/mobile/ui/tabs">Tabs </a>
  </b>
  - A navigation tool for secondary pages and actions. When a page contains Tabs,
  the user is able to horizontally scroll through the list of options.
- <b>
    <a href="/mobile/ui/segmented-controls">Segmented Controls </a>
  </b>
  - A list of options, and there cannot be more than one segment selected, so under
  the hood this behaves like a radio group.
- <b>
    <a href="/mobile/ui/Avatar">Avatar </a>
  </b>
  - Used on the homepage App Bar, and within the nested actions for Selector Section
  to show the current user on the app.

```jsx live
() => {
  const [segmentTab, setSegmentTab] = useState('tab-1');
  const [value, setValue] = useState('');

  return (
    <View style={{ width: 560 }}>
      <AppBar heading="Home" headingAlignment="left" animateRight>
        <ProgressBar steps={4} currentStep={1} />
        <SearchBar
          value={value}
          onChangeText={setValue}
          onSubmit={() => {
            return console.log('Value submitted');
          }}
          placeholder="Search your benefits"
        />
        <View style={{ padding: 4 }}>
          <Tabs heading="Example Tabs" style={{ padding: 4 }}>
            <Tabs.Tab value="default-1" label="Default 1" />
            <Tabs.Tab value="default-2" label="Default 2" />
            <Tabs.Tab value="default-3" label="Default 3" />
            <Tabs.Tab value="default-4" label="Default 4" />
            <Tabs.Tab value="default-5" label="Default 5" />
            <Tabs.Tab value="default-6" label="Default 6" />
          </Tabs>
        </View>
        <View style={{ alignItems: 'center' }}>
          <SegmentedControls shrink value={segmentTab} onChange={setSegmentTab}>
            <SegmentedControls.Tab label="Tab 1" value="tab-1" />
            <SegmentedControls.Tab label="Tab 2" value="tab-2" />
            <SegmentedControls.Tab label="Tab 3" value="tab-3" />
          </SegmentedControls>
        </View>
        <View
          style={{
            alignItems: 'center',
            justifyContent: 'space-between',
            flexDirection: 'row',
            backgroundColor: '$semantic.color.surface.container.primary',
            padding: 16,
          }}
        >
          <Layout.Group space={0}>
            <IconSymbol
              icon="location_on"
              variant="outlined"
              color="$semantic.color.surface.accent.decorative.3"
            />
            <View style={{ justifyContent: 'center', paddingLeft: 9 }}>
              <Text
                color="$semantic.color.text.body.alt"
                fontWeight="$core.font-weight.bold"
                lineHeight="$core.line-height.60"
                size="$core.font-size.p.60"
              >
                For Michael
              </Text>
              <Text
                color="$semantic.color.text.body.alt"
                fontWeight="$core.font-weight.regular"
                lineHeight="$core.line-height.60"
                size="$core.font-size.p.60"
              >
                California
              </Text>
            </View>
          </Layout.Group>
          <Button size="small" variant="brand" type="outlined">
            Change
          </Button>
        </View>
      </AppBar>
    </View>
  );
};
```

## Center Content

Use the `center` prop to add content to the AppBar. If the `center` prop is present, it will be preferred to `heading`, `subheading`, and `eyebrow`.

```jsx live
<AppBar
  left={
    <Button
      size="small"
      icon={{ name: 'chevron_left' }}
      iconPosition="iconOnly"
    />
  }
  right={
    <Button size="small" icon={{ name: 'search' }} iconPosition="iconOnly" />
  }
  center={
    <Text
      color="$app-bar.color.text.heading"
      styles={{
        'abyss-text-root': { typography: '$semantic.typography.h.xxs-bold' },
      }}
    >
      Start your Search
    </Text>
  }
/>
```

## Nested Content

Use the `AppBar.NestedContent` component to add nested content to the AppBar with the `nestedContent` prop.
The `AppBar.NestedContent` component adds padding and around the nested content and gaps between the nested content.

For enabling animations on the collapsing/expanding AppBar content based on page scroll, see the <a href="/mobile/ui/scroll-provider">ScrollProvider documentation</a>.

```jsx live
<AppBar
  heading="Heading"
  headingAlignment="left"
  nestedContent={
    <AppBar.NestedContent>
      <Slot height={40}>Nested Content</Slot>
      <Slot height={40}>Nested Content</Slot>
    </AppBar.NestedContent>
  }
  right={
    <Button
      size="small"
      icon={{ name: 'notifications' }}
      iconPosition="iconOnly"
    />
  }
>
  <ProgressBar steps={4} currentStep={1} />
</AppBar>
```

## Banner

Use the `Banner` prop to pass an accessory such as <a href="/mobile/ui/global-app-process">GlobalAppProcess</a> to be displayed at the top of the AppBar.

- <b>
    <a href="/mobile/ui/global-app-process">GlobalAppProcess</a>
  </b>
  : Used to communicate system status or background processes.

```jsx live
<AppBar
  heading="AppBar"
  headingAlignment="left"
  banner={<GlobalAppProcess label="Loading" variant="info" />}
/>
```

## Left and Right

The `left` and `right` props are used to placed content on the left and right sides of the heading.

```jsx live
<AppBar
  heading="Heading"
  left={
    <Pressable accessibilityRole="button">
      <Text color="$app-bar.color.text.button.rest">Cancel</Text>
    </Pressable>
  }
  right={<Text color="$app-bar.color.text.button.rest">1 of 5</Text>}
/>
```

## Variants

The App Bar’s functionality should change based on the page that it is on.

- <b>Homepage</b> - On the homepage, App Bar announces the user’s name, and shows
  the Avatar of the specific user.
- <b>Level 1</b> - Level One pages are reserved for the pages that are the highest
  level of navigation. There is no previous content that navigated them to this page,
  and to return to the homepage, the user will click on the Homepage tab on Tab Bar.
- <b>Level 2</b> - Level Two pages are nested pages within a Level One page. The
  Back button in the upper left corner of the heading section will bring the user
  back to the Level One page. Like the Level One page, these pages also host a number
  of nested components used to help users navigate the page.

```jsx live
<Layout.Stack grow space={32}>
  <Layout.Stack grow>
    <Text fontWeight="$core.font-weight.bold">Homepage</Text>
    <AppBar
      left={<Avatar initials="JA" />}
      headingAlignment="left"
      heading="Home"
      subheading="Jessica Anderson"
      right={
        <Layout.Group>
          <Button
            size="small"
            icon={{ name: 'notifications' }}
            iconPosition="iconOnly"
          />
          <Button
            size="small"
            icon={{ name: 'search' }}
            iconPosition="iconOnly"
          />
        </Layout.Group>
      }
    />
  </Layout.Stack>
  <Layout.Stack grow>
    <Text fontWeight="$core.font-weight.bold">Level 1</Text>
    <AppBar
      headingAlignment="left"
      heading="Home"
      right={
        <Layout.Group>
          <Button
            size="small"
            icon={{ name: 'notifications' }}
            iconPosition="iconOnly"
          />
          <Button
            size="small"
            icon={{ name: 'search' }}
            iconPosition="iconOnly"
          />
        </Layout.Group>
      }
    />
  </Layout.Stack>
  <Layout.Stack grow>
    <Text fontWeight="$core.font-weight.bold">Level 2</Text>
    <AppBar
      left={
        <Pressable>
          <IconSymbol
            icon="chevron_left"
            color="$semantic.color.icon.content.primary-alt"
            size={24}
          />
        </Pressable>
      }
      headingAlignment="center"
      heading="Home"
      right={
        <Layout.Group>
          <Button
            size="small"
            icon={{ name: 'ios_share' }}
            iconPosition="iconOnly"
          />
          <Button
            size="small"
            icon={{ name: 'more_vert' }}
            iconPosition="iconOnly"
          />
        </Layout.Group>
      }
    />
  </Layout.Stack>
</Layout.Stack>
```

## ScrollProvider Integration

For collapsing/expanding behavior, place `AppBar` and your scrollable content under the same <a href="/mobile/ui/scroll-provider">ScrollProvider</a> and spread `scrollProps` from `useCollapsibleScroll` into your scroll container.

```jsx
import { Animated } from 'react-native';
import {
  AppBar,
  ScrollProvider,
  useCollapsibleScroll,
  SearchInputButton,
  Button,
  ProgressBar,
} from '@uhg-abyss/mobile';

const ScreenContent = () => {
  const { scrollProps } = useCollapsibleScroll();

  return (
    <>
      <AppBar
        heading="Home"
        animateRight
        nestedContent={
          <AppBar.NestedContent>
            <SearchInputButton placeholder="Search" />
          </AppBar.NestedContent>
        }
        right={
          <Button
            size="small"
            icon={{ name: 'search' }}
            iconPosition="iconOnly"
          />
        }
      />
      <Animated.ScrollView {...scrollProps}>
        {/* Scrollable content */}
      </Animated.ScrollView>
    </>
  );
};

const App = () => {
  return (
    <ScrollProvider>
      <ScreenContent />
    </ScrollProvider>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="AppBar"
  rows={[
    {
      name: 'banner',
      type: 'node',
      description:
        'Places content at the top of the AppBar. To be used for the GlobalAppProcess component.',
    },
    {
      name: 'children',
      type: 'node',
      description: 'The content of the app bar',
    },
    {
      name: 'heading',
      type: 'string | node',
      description: 'Sets the heading of the app bar',
    },
    {
      name: 'subheading',
      type: 'string | node',
      description: 'Sets the subheading of the app bar',
    },
    {
      name: 'truncateHeading',
      type: 'boolean',
      description: 'Allows the heading to be truncated',
    },
    {
      name: 'left',
      type: 'node',
      description: 'Place content on the left side of the app bar',
    },
    {
      name: 'right',
      type: 'node',
      description: 'Place content on the right side of the app bar',
    },
    {
      name: 'center',
      type: 'node',
      description:
        'Place content in the center of the app bar. Overrides heading, subheading, and eyebrow components.',
    },
    {
      name: 'headingAlignment',
      type: "'center' | 'left'",
      description: 'Sets the alignment of the heading',
    },
    {
      name: 'eyebrow',
      type: 'string | node',
      description: 'Adds an eyebrow string above the heading',
    },
    {
      name: 'background',
      type: 'node',
      description: 'Sets background for the AppBar',
    },
    {
      name: 'nestedContent',
      type: 'node',
      description: 'Nested content above the main content of the app bar',
    },
    {
      name: 'animateRight',
      type: 'boolean',
      description:
        'Enables right-side collapse animation (fade/scale) when used with ScrollProvider. Animation is automatically disabled when the scroll content is not tall enough to support a full collapse (controlled by shouldAnimate from ScrollContext).',
    },
  ]}
/>

<Docs.ClassesTable
  of="AppBar"
  rows={[
    {
      name: 'app-bar-root',
      description: 'AppBar root element',
    },
    {
      name: 'app-bar-background',
      description: 'App Bar background',
    },
    {
      name: 'app-bar-wrapper',
      description:
        'Container for the left, center, and right elements of the app bar',
    },
    {
      name: 'app-bar-left',
      description: 'Container for the left side of the app bar',
    },
    {
      name: 'app-bar-center',
      description: 'Container for the center of the app bar',
    },
    {
      name: 'app-bar-right',
      description: 'Container for the right side of the app bar',
    },
    {
      name: 'app-bar-eyebrow',
      description: 'Eyebrow text of the app bar',
    },
    {
      name: 'app-bar-heading',
      description: 'Heading text of the app bar',
    },
    {
      name: 'app-bar-subheading',
      description: 'Subheading text of the app bar',
    },
  ]}
/>

<Docs.ClassesTable
  of="AppBar.NestedContent"
  rows={[
    {
      name: 'app-bar-nested-content-root',
      description: 'Nested content subcomponent root element',
    },
  ]}
/>

</Tab>

<Tab label="Accessibility">

**It is the responsibility of consuming teams to make sure all components within AppBar are accessible.**

<h2>Dynamic Type</h2>

AppBar scales to 3XL. Additional Icons and Text passed to any prop of type node should
have `maxFontSizeMultiplier={1.3}` set.

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="AppBar" keys={['app-bar']} />

</Tab>

<Tab label="Migration">

<Docs.ComparisonTable of="AppBar" type="class" />

<Docs.ComparisonTable of="AppBar" type="props" />

</Tab>
</Tabs>

---
id: avatar
category: Data Display
title: Avatar
description: The Avatar component is used to represent a user, and displays the profile picture or the user initials as a fallback.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=10158%3A35251&t=0e2Zlqt54CaApzhj-0
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { Avatar } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Avatar',
  inputs: [
    {
      prop: 'initials',
      type: 'string',
    },
    {
      prop: 'size',
      type: 'select',
      options: [
        { label: 'large', value: 'large' },
        { label: 'Small', value: 'small' },
      ]
    },
    {
      prop: 'colorTheme',
      type: 'select',
      options: [
        { label: 'blue', value: 1 },
        { label: 'green', value: 2 },
        { label: 'orange', value: 3 },
        { label: 'light blue', value: 4 },
      ]
    },
    {
      prop: 'showBorder',
      type: 'boolean'
    },
  ]
}

<Avatar />

```

## Images

Use the `imageUrl` prop to set the `Avatar` image. This can be used to create a co-branded avatar.

```jsx live
<Layout.Stack>
  <Box color="$semantic.color.surface.container.secondary">
    <Layout.Group space={30}>
      <Avatar
        size="large"
        imageUrl="https://reactnative.dev/img/tiny_logo.png"
      />
      <Avatar size="large" imageUrl="/img/logo.svg" />
      <Avatar
        size="small"
        imageUrl="https://reactnative.dev/img/tiny_logo.png"
      />
      <Avatar size="small" imageUrl="/img/logo.svg" />
    </Layout.Group>
  </Box>
  <Box color="$semantic.color.surface.interactive.standards.rest.on-primary">
    <Layout.Group space={30}>
      <Avatar
        size="large"
        imageUrl="https://reactnative.dev/img/tiny_logo.png"
      />
      <Avatar size="large" imageUrl="/img/logo.svg" />
      <Avatar
        size="small"
        imageUrl="https://reactnative.dev/img/tiny_logo.png"
      />
      <Avatar size="small" imageUrl="/img/logo.svg" />
    </Layout.Group>
  </Box>
</Layout.Stack>
```

###### Co-branded Avatars

```jsx live
() => {
  const AvatarBorder = styled('View', {
    borderRadius: 100,
    borderWidth: 4,
    borderColor: '$semantic.color.surface.container.emphasis.2',
    marginLeft: -15,
  });

  return (
    <Box
      color="$semantic.color.surface.container.emphasis.2"
      padding={8}
      style={{ flexDirection: 'row', alignItems: 'center' }}
    >
      <Avatar size="large" imageUrl="/img/logo.svg" />
      <AvatarBorder>
        <Avatar
          initials="AD"
          size="large"
          styles={{
            'abyss-avatar-initials': {
              color: '$semantic.color.text.label.status.info',
            },
          }}
        />
      </AvatarBorder>
      <Layout.Stack alignItems="left" style={{ paddingLeft: 8 }} space={0}>
        <Text
          color="$semantic.color.text.body.primary"
          fontWeight="$semantic.font-weight.semibold"
          size="$core.font-size.p.60"
          numberOfLines={1}
        >
          Abyss Design System
        </Text>
        <Heading offset={6} level={2} color="$semantic.color.text.body.heading">
          Home
        </Heading>
      </Layout.Stack>
    </Box>
  );
};
```

## Color Theme

Use the `colorTheme` prop to set the color of the `Avatar`.
The options are `1` (blue), `2` (green), `3` (orange), and `4` (light blue). The default is `1` (blue).

```jsx live
<Layout.Group space={30}>
  <Avatar initials="MW" colorTheme={1} size="large" />
  <Avatar initials="TM" colorTheme={2} size="large" />
  <Avatar initials="BS" colorTheme={3} size="large" />
  <Avatar initials="NP" colorTheme={4} size="large" />
</Layout.Group>
```

## Size

Use the `size` prop to set the size of the `Avatar`.
The 2 options are `small`, `large`. The default is `small`.

```jsx live
<Layout.Stack space={20} alignItems="left">
  <Layout.Group space={30}>
    <Avatar initials="MW" colorTheme={1} size="large" />
    <Avatar initials="TM" colorTheme={2} size="large" />
    <Avatar initials="BS" colorTheme={3} size="large" />
    <Avatar initials="NP" colorTheme={4} size="large" />
  </Layout.Group>
  <Layout.Group space={30}>
    <Avatar initials="MW" size="small" colorTheme={1} />
    <Avatar initials="TM" size="small" colorTheme={2} />
    <Avatar initials="BS" size="small" colorTheme={3} />
    <Avatar initials="NP" size="small" colorTheme={4} />
  </Layout.Group>
</Layout.Stack>
```

## Notification

Use the Indicator component with the Avatar to display a notification. See [Indicator](/mobile/ui/indicator) for more details and examples.

```jsx live
<Layout.Stack>
  <Box color="$semantic.color.surface.container.secondary">
    <Layout.Stack space={20}>
      <Layout.Group space={30}>
        <Indicator size="large" withBorder offset={8}>
          <Avatar initials="MW" size="large" colorTheme={1} />
        </Indicator>
        <Indicator size="large">
          <Avatar initials="TM" size="large" colorTheme={2} />
        </Indicator>
        <Indicator withBorder offset={5}>
          <Avatar initials="BS" size="small" colorTheme={3} />
        </Indicator>
        <Indicator>
          <Avatar initials="NP" size="small" colorTheme={4} />
        </Indicator>
      </Layout.Group>
    </Layout.Stack>
  </Box>
  <Box color="$semantic.color.surface.interactive.standards.rest.on-primary">
    <Layout.Group space={30}>
      <Indicator size="large" offset={8}>
        <Avatar initials="MW" size="large" colorTheme={1} />
      </Indicator>
      <Indicator size="large">
        <Avatar initials="TM" size="large" colorTheme={2} />
      </Indicator>
      <Indicator offset={5}>
        <Avatar initials="BS" size="small" colorTheme={3} />
      </Indicator>
      <Indicator>
        <Avatar initials="NP" size="small" colorTheme={4} />
      </Indicator>
    </Layout.Group>
  </Box>
</Layout.Stack>
```

## Show border

Use the `showBorder` prop to add a border to the Avatar.

```jsx live
<Layout.Group space={30}>
  <Avatar initials="MW" colorTheme={1} size="large" showBorder />
  <Avatar initials="TM" colorTheme={2} size="large" showBorder />
  <Avatar initials="BS" colorTheme={3} size="large" showBorder />
  <Avatar initials="NP" colorTheme={4} size="large" showBorder />
</Layout.Group>
```

</Tab>
<Tab label="Integration">

<Docs.PropsTable
  of="Avatar"
  rows={[
    {
      name: 'initials',
      type: 'string',
      description:
        'Sets the users initials to be displayed inside the component, up to two letters',
    },
    {
      name: 'size',
      type: '"large" | "small"',
      description:
        'Sets the size of the Avatar component. Small is 40px, large is 60px',
      default: '"small"',
    },
    {
      name: 'colorTheme',
      type: '1 | 2 | 3 | 4',
      description: 'Set the color theme of the Avatar',
      default: '1',
    },
    {
      name: 'imageUrl',
      type: 'string',
      description: 'Sets the Avatar image, if one exists',
    },
    {
      name: 'showBorder',
      type: 'boolean',
      description: 'Adds a border to the Avatar',
      default: 'false',
    },
  ]}
/>

<Docs.ClassesTable
  of="Avatar"
  rows={[
    {
      name: 'avatar-root',
      description: 'Avatar root element',
    },
    {
      name: 'avatar-initials',
      description: 'Avatar text element',
    },
    {
      name: 'avatar-image',
      description: 'Avatar image element',
    },
  ]}
/>

</Tab>

<Tab label="Accessibility">

## Dynamic Type

The avatar text will scale up to 3XL.

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="Avatar" keys={['avatar']} />

</Tab>
</Tabs>

---
id: badge
category: Data Display
title: Badge
description: Used to highlight an item's status for quick recognition.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=9534%3A32348
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { Badge } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Badge',
  inputs: [
    {
      prop: 'children',
      type: 'string',
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'success', value: 'success' },
        { label: 'warning', value: 'warning' },
        { label: 'error', value: 'error' },
        { label: 'info', value: 'info' },
        { label: 'neutral', value: 'neutral' },
      ],
      defaultValue: 'success',
    },
    {
      prop: 'outline',
      type: 'boolean',
    },
  ]
}

<Badge>Badge Sandbox</Badge>
```

## Variants

Use the `variant` property to set the color of the `Badge`.
The options are `success`, `warning`, `error`, `info`, and `neutral`. The default is `success`.

```jsx live
<Layout.Group space={20}>
  <Layout.Stack alignItems="left" space={20}>
    <Badge variant="success">Success Badge</Badge>
    <Badge variant="warning">Warning Badge</Badge>
    <Badge variant="error">Error Badge</Badge>
    <Badge variant="info">Info Badge</Badge>
    <Badge variant="neutral">Neutral Badge</Badge>
  </Layout.Stack>
  <Layout.Stack alignItems="left" space={20}>
    <Badge variant="success" outline>
      Success Badge
    </Badge>
    <Badge variant="warning" outline>
      Warning Badge
    </Badge>
    <Badge variant="error" outline>
      Error Badge
    </Badge>
    <Badge variant="info" outline>
      Info Badge
    </Badge>
    <Badge variant="neutral" outline>
      Neutral Badge
    </Badge>
  </Layout.Stack>
</Layout.Group>
```

## Outline

Use the `outline` property to turn on the outline of the `Badge`. The default is `false`.

```jsx live
<Layout.Group>
  <Badge variant="info" ariaText="information">
    Badge
  </Badge>
  <Badge outline variant="info" ariaText="information">
    Outlined Badge
  </Badge>
</Layout.Group>
```

## Icons

Use the `icon` property to set the icon of the `Badge`.

```jsx live
<Layout.Group>
  <Badge
    icon={
      <IconSymbol
        icon="check_circle"
        size="$sm"
        color="$semantic.color.icon.status.success"
        variant="filled"
      />
    }
    variant="success"
  >
    Complete
  </Badge>
  <Badge
    icon={
      <IconSymbol
        icon="do_not_disturb_on"
        size="$sm"
        color="$semantic.color.icon.status.error"
        variant="filled"
      />
    }
    variant="error"
  >
    Incomplete
  </Badge>
</Layout.Group>
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Badge"
  rows={[
    {
      name: 'outline',
      type: 'boolean',
      description: 'Add an outline to the badge.',
      default: 'false',
    },
    {
      name: 'variant',
      type: '"success" | "warning" | "error" | "info" | "neutral"',
      description: 'Set the color of the badge',
      default: 'success',
    },
    {
      name: 'icon',
      type: 'node',
      description: 'Adds an icon to the Badge component',
    },
    {
      name: 'children',
      type: 'node',
      description: 'The text to be input into the Badge component',
    },
  ]}
/>

<Docs.ClassesTable
  of="Badge"
  rows={[
    {
      name: 'badge-root',
      description: 'Badge root element',
    },
    {
      name: 'badge-text',
      description: 'Badge text element',
    },
  ]}
/>

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="Badge" keys={['badge']} />

</Tab>

<Tab label="Migration">

<Docs.ComparisonTable of="Badge" type="class" />

<Docs.ComparisonTable of="Badge" type="props" />

</Tab>
</Tabs>

---
id: banner
category: Layout
title: Banner
description: Used to provide high-level content in a heading, paragraph, and image format within a pressable for navigation.
design: https://www.figma.com/design/5djnh49w0SBYAG5tFJifIG?node-id=1492-351&m=dev
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { Banner } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Banner',
  inputs: [
    {
      prop: 'heading',
      type: 'string',
      defaultValue: '2 line heading max'
    },
    {
      prop: 'paragraph',
      type: 'string',
      defaultValue: 'Description paragraph should not expand on more than four lines and truncates if that is the case.'
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'horizontal', value: 'horizontal' },
        { label: 'vertical-lg', value: 'vertical-lg' },
        { label: 'vertical-sm', value: 'vertical-sm' },
        { label: 'branded', value: 'branded' },
      ],
      defaultValue: 'horizontal'
    },
    {
      prop: 'background',
      type: 'select',
      options: [
        { label: 'White', value: 'white' },
        { label: 'Peach', value: 'peach' },
        { label: 'Mint', value: 'mint' },
        { label: 'Aqua', value: 'aqua' },
        { label: 'Sky Blue', value: 'sky-blue' },
      ],
      defaultValue: 'white'
    },
    {
      prop: 'isClosable',
      type: 'boolean',
    },
  ]
}

<Banner />
```

## Variants

Use the `variant` prop to set the type of `Banner` to render.

```jsx live
<Layout.Stack alignItems="left" space={20}>
  <Banner
    paragraph="The horizontal banner renders the image on the right side."
    eyebrow="Eyebrow"
    heading="Horizontal"
    variant="horizontal"
  />
  <Banner
    paragraph="The large horizontal banner renders the image above the content."
    heading="Vertical Large"
    variant="vertical-lg"
  />
  <Banner
    paragraph="The small vertical banner is a smaller banner that renders the image above the content."
    heading="Vertical Small"
    variant="vertical-sm"
  />
  <Banner
    paragraph="The branded banner render the image above the heading."
    title="Branded"
    variant="branded"
    image={
      <Box
        width={100}
        height={20}
        color="$semantic.color.surface.container.tertiary"
        padding={0}
      />
    }
  />
</Layout.Stack>
```

## Background

Use the `background` prop to set the background color of the banner. The default value is `white`.

```jsx live
<Layout.Stack alignItems="left" space={20}>
  <Banner
    heading="White"
    paragraph="A 'one-stop-shop' for the important things a caregiver could need to give you for providing the best care."
    variant="horizontal"
    background="white"
  />
  <Banner
    heading="Peach"
    paragraph="A 'one-stop-shop' for the important things a caregiver could need to give you for providing the best care."
    variant="horizontal"
    background="peach"
  />
  <Banner
    heading="Mint"
    paragraph="A 'one-stop-shop' for the important things a caregiver could need to give you for providing the best care."
    variant="horizontal"
    background="mint"
  />
  <Banner
    heading="Aqua"
    paragraph="A 'one-stop-shop' for the important things a caregiver could need to give you for providing the best care."
    variant="horizontal"
    background="aqua"
  />
  <Banner
    heading="Sky Blue"
    paragraph="A 'one-stop-shop' for the important things a caregiver could need to give you for providing the best care."
    variant="horizontal"
    background="sky-blue"
  />
</Layout.Stack>
```

## Image

Use the `image` prop to set an image in the image container of the banner.

```jsx live
<Layout.Stack alignItems="left" space={20}>
  <Banner
    heading="Go Paperless"
    paragraph="Opt in to receive communication electronically and reduce clutter."
    variant="horizontal"
    image={
      <IconBrand icon="go_digital" variant="twotonelightcircle" size="$sm" />
    }
    imageBackgroundColor="$semantic.color.surface.container.emphasis.3"
  />
  <Banner
    variant="branded"
    image={
      <Brandmark
        brand="optum"
        affiliate="optum"
        variant="lockup"
        color="orange"
        size={75}
      />
    }
    paragraph="Get 24/7 access to providers by phone, video, or tablet."
    cta={
      <Button
        type="outline"
        size="small"
        icon={{ name: 'open_in_new' }}
        iconPosition="trailing"
      >
        Visit Optum
      </Button>
    }
  />
</Layout.Stack>
```

## Image Background Color

Use the `imageBackgroundColor` prop to set an image in the image container of the banner. The default is `$semantic.color.surface.interactive.standards.rest.quaternary`.

```jsx live
<Banner
  heading="Home Delivery"
  paragraph="Easily fill prescriptions and have them delivered to your door with OptumRx."
  imageBackgroundColor="$semantic.color.surface.container.emphasis.3"
  image={<IconBrand size={64} variant="twotonelightcircle" icon="pill" />}
  variant="horizontal"
/>
```

## CTA

Use the `cta` prop to set a call to action button in the banner. If a cta is set
the number of lines of the heading paragraph are limited depending on the size of the CTA.
To view the truncation rules, see the [Banner truncation conditions](https://www.figma.com/design/5djnh49w0SBYAG5tFJifIG?node-id=1620-6985&m=dev).

```jsx live
<Layout.Stack alignItems="left" space={20}>
  <Banner
    heading="2 line heading max"
    paragraph="Description paragraph should not expand on more than four lines and truncates if that is the case."
    variant="horizontal"
    image={
      <IconBrand icon="go_digital" variant="twotonelightcircle" size="$sm" />
    }
    imageBackgroundColor="$semantic.color.surface.container.emphasis.3"
    cta={
      <Button
        type="outline"
        size="small"
        icon={{ name: 'open_in_new' }}
        iconPosition="trailing"
      >
        Button CTA
      </Button>
    }
  />
  <Banner
    heading="2 line heading max"
    paragraph="Description paragraph should not expand on more than four lines and truncates if that is the case."
    imageBackgroundColor="$semantic.color.surface.container.emphasis.3"
    image={<IconBrand size={64} variant="twotonelightcircle" icon="pill" />}
    variant="horizontal"
    cta={
      <Link size="small" href="https://www.optumrx.com">
        Link CTA
      </Link>
    }
  />
</Layout.Stack>
```

</Tab>

<Tab label='Integration'>

<Docs.PropsTable
  of="Banner"
  rows={[
    {
      name: 'background',
      type: 'string',
      description: 'The background color of the banner.',
      default: 'white',
    },
    {
      name: 'cta',
      type: 'React.ReactNode',
      description: 'The action of the banner.',
    },
    {
      name: 'heading',
      type: 'string',
      description: 'The heading text of the banner.',
    },
    {
      name: 'paragraph',
      type: 'string',
      description: 'The paragraph text of the banner.',
    },
    {
      name: 'image',
      type: 'React.ReactNode',
      description: 'The image of the banner.',
    },
    {
      name: 'imageBackgroundColor',
      type: 'string',
      description: 'The background color of the image container.',
      default: '$semantic.color.surface.interactive.standards.rest.quaternary',
    },
    {
      name: 'variant',
      type: "'horizontal' | 'vertical-lg' | 'vertical-sm' | 'branded'",
      description: 'The variant of the banner.',
      default: "'horizontal'",
    },
    // {
    //   name: 'isClosable',
    //   type: 'boolean',
    //   description: 'Flag to indicate if the banner is closable.',
    //   default: 'false',
    // },
    {
      name: 'onClose',
      type: 'function',
      description:
        'Callback function when the banner is closed. This prop is only used when `isClosable` is true.',
    },
    {
      name: 'isVisible',
      type: 'boolean',
      description: 'Flag to indicate if the banner is visible.',
      default: 'true',
    },
  ]}
/>

<Docs.ClassesTable
  of="Banner"
  rows={[
    {
      name: 'banner-root',
      description: 'Root element of the component',
    },
    {
      name: 'banner-content',
      description: 'Container for heading and paragraph',
    },
    {
      name: 'banner-heading',
      description: 'Heading text',
    },
    {
      name: 'banner-paragraph',
      description: 'Paragraph text',
    },
    {
      name: 'banner-image-container',
      description: 'Container for image or icon',
    },
    // {
    //   name: 'banner-close-button',
    //   description: 'Close button container',
    // },
    // {
    //   name: 'banner-close-icon',
    //   description: 'Close icon',
    // },
  ]}
/>

</Tab>

<Tab label='Accessibility'>

## Dynamic Type

Text and icons scale to Abyss standards. Any images, illustrations, or IconBrand passed to Banner should not scale. Size AX5 and larger cause reordering and resizing of all variants.

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="Banner" keys={['banner']} />

</Tab>

<Tab label="Migration">

<Docs.ComparisonTable of="Banner" type="class" />

<Docs.ComparisonTable of="Banner" type="props" />

</Tab>
</Tabs>

---
id: bottom-sheet
category: Overlay
title: BottomSheet
description: A surface containing supplementary content that are anchored to the bottom of the screen.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=15431-86066&t=xQWp12dwBu1GhQOV-0
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { BottomSheet } from '@uhg-abyss/mobile';
```

## Example

```jsx live
() => {
  const [radioValue, setRadioValue] = useState('one');
  const [tempRadioValue, setTempRadioValue] = useState(radioValue);
  const [isVisible, setIsVisible] = useState(false);
  const [isVisible2, setIsVisible2] = useState(false);

  const updateRadioValue = (save) => {
    if (save) {
      setRadioValue(tempRadioValue);
    } else {
      setTempRadioValue(radioValue);
    }
    setIsVisible(false);
  };

  return (
    <View>
      <Layout.Stack space={20}>
        <View>
          <Button onPress={() => setIsVisible(!isVisible)}>
            Show Radio Bottom Sheet
          </Button>
        </View>
        <View>
          <Button onPress={() => setIsVisible2(!isVisible2)}>
            Show Other Bottom Sheet
          </Button>
        </View>
      </Layout.Stack>
      <BottomSheet
        hideBorder
        isVisible={isVisible}
        onClose={() => updateRadioValue()}
        heading="A really long heading"
        footer={
          <View>
            <Button onPress={() => updateRadioValue(true)}>
              <Text color="$semantic.color.text.body.alt">
                Select Value: {tempRadioValue}
              </Text>
            </Button>
            <Layout.Space space={12} />
            <Button onPress={() => updateRadioValue(false)} variant="tertiary">
              Cancel
            </Button>
          </View>
        }
      >
        <View>
          <CellGroup
            type="radio"
            value={tempRadioValue}
            onChange={setTempRadioValue}
          >
            <Cell heading="Cell Heading" value="one" />
            <Cell heading="Cell Heading" value="two" />
            <Cell heading="Cell Heading" value="three" />
          </CellGroup>
        </View>
      </BottomSheet>
      <BottomSheet
        onClose={setIsVisible2}
        isVisible={isVisible2}
        heading="I Need You To Delete This Step"
        footer={
          <View>
            <Button onPress={() => setIsVisible2(!isVisible2)}>
              Yes, delete this step
            </Button>
            <Layout.Space space={12} />
            <Button
              onPress={() => setIsVisible2(!isVisible2)}
              variant="secondary"
            >
              Cancel
            </Button>
          </View>
        }
      >
        <Text>
          You can customize your estimate by deleting this step. Would you like
          to delete this step from the estimate?
        </Text>
      </BottomSheet>
    </View>
  );
};
```

### Scrolling

When the content of the BottomSheet becomes too long to display, scrolling is automatically enabled. In code, the height of the content is compared to the max height of the BottomSheet, which is 90% of the screen.

To manually disable scrolling, setting `scrollEnabled` to `false` will switch the component from a ScrollView to a View. Default is `true,` meaning the
height of the content will determine scrollability.

```jsx live
() => {
  const [radioValue, setRadioValue] = useState('one');
  const [tempRadioValue, setTempRadioValue] = useState(radioValue);
  const [isVisible, setIsVisible] = useState(false);

  const updateRadioValue = (save) => {
    if (save) {
      setRadioValue(tempRadioValue);
    } else {
      setTempRadioValue(radioValue);
    }
    setIsVisible(false);
  };

  return (
    <View>
      <Layout.Stack space={20}>
        <View>
          <Button onPress={() => setIsVisible(!isVisible)}>
            Show Radio Bottom Sheet
          </Button>
        </View>
      </Layout.Stack>
      <BottomSheet
        hideBorder
        isVisible={isVisible}
        onClose={() => updateRadioValue()}
        heading="A really long heading"
        footer={
          <View>
            <Button onPress={() => updateRadioValue(true)}>
              <Text color="$semantic.color.text.body.alt">
                Select Value: {tempRadioValue}
              </Text>
            </Button>
            <Layout.Space space={12} />
            <Button onPress={() => updateRadioValue(false)} variant="tertiary">
              Cancel
            </Button>
          </View>
        }
      >
        <View>
          <CellGroup
            type="radio"
            value={tempRadioValue}
            onChange={setTempRadioValue}
          >
            <Cell heading="Cell Heading" value="one" />
            <Cell heading="Cell Heading" value="two" />
            <Cell heading="Cell Heading" value="three" />
            <Cell heading="Cell Heading" value="four" />
            <Cell heading="Cell Heading" value="five" />
            <Cell heading="Cell Heading" value="six" />
            <Cell heading="Cell Heading" value="seven" />
            <Cell heading="Cell Heading" value="eight" />
            <Cell heading="Cell Heading" value="nine" />
            <Cell heading="Cell Heading" value="ten" />
            <Cell heading="Cell Heading" value="eleven" />
            <Cell heading="Cell Heading" value="twelve" />
            <Cell heading="Cell Heading" value="thirteen" />
            <Cell heading="Cell Heading" value="fourteen" />
            <Cell heading="Cell Heading" value="fifteen" />
            <Cell heading="Cell Heading" value="sixteen" />
            <Cell heading="Cell Heading" value="seventeen" />
            <Cell heading="Cell Heading" value="eighteen" />
          </CellGroup>
        </View>
      </BottomSheet>
    </View>
  );
};
```

### Closing on Background Press

By default, the BottomSheet will close when the user taps on the background overlay. This can be disabled by setting the `disableOverlayPress` prop to `true`.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <View>
      <Layout.Stack space={20}>
        <View>
          <Button onPress={() => setIsVisible(!isVisible)}>
            Show Bottom Sheet
          </Button>
        </View>
      </Layout.Stack>
      <BottomSheet
        isVisible={isVisible}
        onClose={() => setIsVisible(false)}
        title="Bottom Sheet with Background Click Disabled"
        disableOverlayPress
        footer={
          <View>
            <Button onPress={() => setIsVisible(!isVisible)}>
              Close Bottom Sheet
            </Button>
          </View>
        }
      >
        <Text>
          Tapping outside this Bottom Sheet will not close it. Use the button
          below to close.
        </Text>
      </BottomSheet>
    </View>
  );
};
```

## Advanced Layout

Layouts like BottomSheet and Modal can be used in combination with each other to create flows.

```jsx live
() => {
  const team = [
    {
      firstName: 'Michael',
      lastName: 'White',
      linkText: 'California',
      subText: 'MM/DD/YYYY',
      value: '1',
    },
    {
      firstName: 'Thomas',
      lastName: 'Musengwa',
      linkText: 'Arkansas',
      subText: 'MM/DD/YYYY',
      value: '2',
    },
    {
      firstName: 'Bailey',
      lastName: 'Surowiec',
      linkText: 'Illinois',
      subText: 'MM/DD/YYYY',
      value: '3',
    },
    {
      firstName: 'Pablo',
      lastName: 'Zepeda',
      linkText: 'California',
      subText: 'MM/DD/YYYY',
      value: '4',
    },
  ];

  const locations = [
    {
      name: 'Alabama',
      value: 'AL',
    },
    {
      name: 'Alaska',
      value: 'AK',
    },
    {
      name: 'Arizona',
      value: 'AZ',
    },
    {
      name: 'Arkansas',
      value: 'AR',
    },
    {
      name: 'California',
      value: 'CA',
    },
    {
      name: 'Colorado',
      value: 'CO',
    },
    {
      name: 'Connecticut',
      value: 'CT',
    },
    {
      name: 'Delaware',
      value: 'DE',
    },
    {
      name: 'Florida',
      value: 'FL',
    },
    {
      name: 'Georgia',
      value: 'GA',
    },
    {
      name: 'Hawaii',
      value: 'HI',
    },
    {
      name: 'Idaho',
      value: 'ID',
    },
    {
      name: 'Illinois',
      value: 'IL',
    },
    {
      name: 'Indiana',
      value: 'IN',
    },
    {
      name: 'Iowa',
      value: 'IA',
    },
    {
      name: 'Kansas',
      value: 'KS',
    },
    {
      name: 'Kentucky',
      value: 'KY',
    },
    {
      name: 'Louisiana',
      value: 'LA',
    },
    {
      name: 'Maine',
      value: 'ME',
    },
    {
      name: 'Maryland',
      value: 'MD',
    },
    {
      name: 'Massachusetts',
      value: 'MA',
    },
    {
      name: 'Michigan',
      value: 'MI',
    },
    {
      name: 'Minnesota',
      value: 'MN',
    },
    {
      name: 'Mississippi',
      value: 'MS',
    },
    {
      name: 'Missouri',
      value: 'MO',
    },
    {
      name: 'Montana',
      value: 'MT',
    },
    {
      name: 'Nebraska',
      value: 'NE',
    },
    {
      name: 'Nevada',
      value: 'NV',
    },
    {
      name: 'New Hampshire',
      value: 'NH',
    },
    {
      name: 'New Jersey',
      value: 'NJ',
    },
    {
      name: 'New Mexico',
      value: 'NM',
    },
    {
      name: 'New York',
      value: 'NY',
    },
    {
      name: 'North Carolina',
      value: 'NC',
    },
    {
      name: 'North Dakota',
      value: 'ND',
    },
    {
      name: 'Ohio',
      value: 'OH',
    },
    {
      name: 'Oklahoma',
      value: 'OK',
    },
    {
      name: 'Oregon',
      value: 'OR',
    },
    {
      name: 'Pennsylvania',
      value: 'PA',
    },
    {
      name: 'Rhode Island',
      value: 'RI',
    },
    {
      name: 'South Carolina',
      value: 'SC',
    },
    {
      name: 'South Dakota',
      value: 'SD',
    },
    {
      name: 'Tennessee',
      value: 'TN',
    },
    {
      name: 'Texas',
      value: 'TX',
    },
    {
      name: 'Utah',
      value: 'UT',
    },
    {
      name: 'Vermont',
      value: 'VT',
    },
    {
      name: 'Virginia',
      value: 'VA',
    },
    {
      name: 'Washington',
      value: 'WA',
    },
    {
      name: 'West Virginia',
      value: 'WV',
    },
    {
      name: 'Wisconsin',
      value: 'WI',
    },
    {
      name: 'Wyoming',
      value: 'WY',
    },
  ];

  const [data, setData] = useState(team);
  const [value, setValue] = useState(data[0].value);
  const [member, setMember] = useState(data[0]);

  const [isVisible, setIsVisible] = useState(false);
  const [showModal, setShowModal] = useState(false);

  const getCurrentMember = (data, val) => {
    return data.find(({ value }) => value === val);
  };

  const getLocation = (locations, val) => {
    return locations.find(({ value }) => value === val);
  };

  const showToastMessage = () => {
    Toast.show({
      paragraph: 'Member changed',
      variant: 'success',
    });
  };

  const handlePress = () => {
    setIsVisible(true);
  };

  const updateTeam = (newLocation) => {
    const newArr = data.map((member) => {
      if (member.value === value) {
        member.linkText = newLocation;
      }
      return member;
    });
    setData(newArr);
  };

  const handlePressLink = (value) => {
    const currentMember = getCurrentMember(data, value);
    setValue(currentMember.value);
    setShowModal(true);
  };

  const handleButtonPress = () => {
    const currentMember = getCurrentMember(data, value);
    setMember(currentMember);
    setIsVisible(false);
    showToastMessage();
  };

  const handleCellPress = (val) => {
    const newLocation = getLocation(locations, val);
    updateTeam(newLocation.name);
    const currentMember = getCurrentMember(data, value);
    Toast.show({
      paragraph:
        currentMember.firstName +
        "'s location updated to " +
        newLocation.name +
        '!',
      variant: 'success',
    });
  };

  const TextView = styled('View', {
    justifyContent: 'center',
    paddingLeft: 9,
  });

  const Content = styled('View', {
    alignItems: 'center',
    justifyContent: 'space-between',
    flexDirection: 'row',
    backgroundColor: '$semantic.color.surface.container.primary',
    padding: '$semantic.spacing.lg',
  });

  return (
    <ToastProvider>
      <Layout.Stack grow>
        <Content>
          <Layout.Group space={0}>
            <IconSymbol
              icon="location_on"
              variant="outlined"
              color="$semantic.color.surface.accent.decorative.3"
            />
            <TextView>
              <Text
                color="$semantic.color.text.body.alt"
                fontWeight="$core.font-weight.bold"
                lineHeight="$core.line-height.60"
                size="$core.font-size.p.60"
              >
                {'For ' + member.firstName}
              </Text>
              <Text
                color="$semantic.color.text.body.alt"
                fontWeight="$core.font-weight.regular"
                lineHeight="$core.line-height.60"
                size="$core.font-size.p.60"
              >
                {member.linkText}
              </Text>
            </TextView>
          </Layout.Group>
          <View>
            <Button
              onPress={handlePress}
              size="small"
              type="outline"
              variant="inverse"
            >
              Change
            </Button>
          </View>
        </Content>
        <BottomSheet
          isVisible={isVisible}
          onClose={() => setIsVisible(false)}
          heading={'Select a member'}
          footer={<Button onPress={handleButtonPress}>Confirm</Button>}
        >
          <CellGroup type="radio" value={value} onChange={setValue}>
            {data.map(
              ({ linkText, value, firstName, lastName, subText }, i) => (
                <Cell
                  key={value}
                  value={value}
                  heading={firstName + ' ' + lastName}
                  paragraph={subText}
                  leadingContent={
                    <Avatar
                      initials={firstName[0] + lastName[0]}
                      colorTheme={i + 1}
                    />
                  }
                  link={
                    linkText && (
                      <Link
                        size="small"
                        onPress={() => handlePressLink(value)}
                        after={
                          <IconSymbol
                            icon="chevron_right"
                            color="$semantic.color.icon.status.info"
                            size={18}
                          />
                        }
                      >
                        {linkText}
                      </Link>
                    )
                  }
                />
              )
            )}
          </CellGroup>
          <Modal
            heading={'Select a Location'}
            isVisible={showModal}
            onClose={() => setShowModal(false)}
            actionLeft={
              <IconSymbol
                icon="chevron_left"
                color="$semantic.color.icon.interactive.rest.primary"
                title="Back"
                isScreenReadable
              />
            }
            onActionLeftPress={() => {
              setShowModal(false);
            }}
          >
            <CellGroup value={value}>
              <ToastProvider>
                {locations.map(({ value, name }) => (
                  <Cell
                    key={value}
                    heading={name}
                    onPress={() => handleCellPress(value)}
                  />
                ))}
              </ToastProvider>
            </CellGroup>
          </Modal>
        </BottomSheet>
      </Layout.Stack>
    </ToastProvider>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="BottomSheet"
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The content of the BottomSheet',
    },
    {
      name: 'footer',
      type: 'node',
      description:
        'Content that will be at the bottom of the BottomSheet (generally used for buttons)',
    },
    {
      name: 'footerVariant',
      type: 'sticky | nested',
      description: 'The variant of the footer',
      default: 'nested',
    },
    {
      name: 'heading',
      type: 'string',
      description: 'The heading of the BottomSheet',
    },
    {
      name: 'isVisible',
      type: 'boolean',
      description:
        'Variable used to control the visible state of the BottomSheet',
      default: 'false',
    },
    {
      name: 'onClose',
      type: 'function',
      description: 'Function called on BottomSheet close',
    },
    {
      name: 'scrollEnabled',
      type: 'boolean',
      description: 'Enable or disable ScrollView on the BottomSheet',
      default: 'true',
    },
    {
      name: 'hideBorder',
      type: 'boolean',
      description: 'Flag to hide the border at the top of the BottomSheet',
      default: 'false',
    },
    {
      name: 'disableOverlayPress',
      type: 'boolean',
      description:
        'Toggle closing the BottomSheet when the user clicks on the background overlay',
      default: 'false',
    },
  ]}
/>

<Docs.ClassesTable
  of="BottomSheet"
  rows={[
    {
      name: 'bottom-sheet-root',
      description: 'BottomSheet root element',
    },
    {
      name: 'bottom-sheet-overlay',
      description: 'BottomSheet overlay element',
    },
    {
      name: 'bottom-sheet-container',
      description: 'BottomSheet container element',
    },
    {
      name: 'bottom-sheet-background',
      description: 'BottomSheet background element',
    },
    {
      name: 'bottom-sheet-header-container',
      description: 'BottomSheet header container',
    },
    {
      name: 'bottom-sheet-top-bar',
      description: 'BottomSheet top bar element',
    },
    {
      name: 'bottom-sheet-header',
      description: 'BottomSheet header element',
    },
    {
      name: 'bottom-sheet-heading',
      description: 'BottomSheet heading text',
    },
    {
      name: 'bottom-sheet-close-button',
      description: 'BottomSheet close button',
    },
    {
      name: 'bottom-sheet-close-icon',
      description: 'BottomSheet close icon',
    },
    {
      name: 'bottom-sheet-content-container',
      description: 'BottomSheet content element',
    },
    {
      name: 'bottom-sheet-footer-container',
      description: 'BottomSheet footer element',
    },
  ]}
/>

<Docs.TranslationTable of="BottomSheet" rows={['close']} />

</Tab>

<Tab label="Accessibility">

## Focus Guidance

Abyss does not control the focus of components on the screen when the BottomSheet is toggled off. To meet
accessibility guidelines, the focus must be set to the previous node when closed. The [useSetFocus](/mobile/hooks/use-set-focus) hook can be used for this.

For example, if a button is pressed to open a BottomSheet, focus must return to that button once it is closed, so that a screen reader or keyboard user may continue using the app where they left off.

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="BottomSheet" keys={['bottom-sheet']} />

</Tab>

<Tab label="Migration">

<Docs.ComparisonTable of="BottomSheet" type="class" />

<Docs.ComparisonTable of="BottomSheet" type="props" />

</Tab>
</Tabs>

---
id: box
category: Layout
title: Box
description: Used as a blanket filler to surround just about any component(s) with color or create a box of predefined size.
---

<Tabs>

<Tab label="Overview">

```jsx
import { Box } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Box',
  inputs: [
    {
      prop: 'children',
      type: 'string',
    },
    {
      prop: 'padding',
      type: 'string',
    },
    {
      prop: 'height',
      type: 'string',
    },
    {
      prop: 'width',
      type: 'string',
    },
    {
      prop: 'color',
      type: 'string'
    },
  ],
}

<Box width={100}></Box>
```

## Basic Usage

`Box` is a container component that can be used to organize or structure a screen. Use `height` and `width` to control the size.

## Children

`Box` takes children of type `node`.

```jsx live
() => {
  return (
    <Layout.Stack alignItems="left" grow>
      <Box
        height={50}
        width={200}
        color="$semantic.color.surface.container.status.info.saturated"
      >
        <Text color="white">Abyss is cool!</Text>
      </Box>
      <Box width={200} color="$semantic.color.surface.container.emphasis.3">
        <Button size="small">Example</Button>
      </Box>
    </Layout.Stack>
  );
};
```

## Color

The `color` prop sets the background color. The default is set to '$semantic.color.surface.interactive.standards.rest.quaternary'.

```jsx live
() => {
  return (
    <Layout.Stack alignItems="left">
      <Box height={50} width={100} />
      <Box
        height={50}
        width={100}
        color="$semantic.color.surface.container.emphasis.2"
      />
      <Box
        height={50}
        width={100}
        color="$semantic.color.surface.accent.secondary"
      />
    </Layout.Stack>
  );
};
```

## Padding

The `padding` prop sets the padding in all directions. The default is set to $md.

```jsx live
() => {
  return (
    <Layout.Stack alignItems="left">
      <Box
        width={200}
        color="$semantic.color.surface.container.status.info.saturated"
      >
        <Text color="white">Default Padding</Text>
      </Box>
      <Box
        width={200}
        color="$semantic.color.surface.accent.secondary"
        padding="$semantic.spacing.xl"
      >
        <Text color="white">Large Padding</Text>
      </Box>
    </Layout.Stack>
  );
};
```

## Search Message Example

A simple component that displays a message with a link to search for a different term.
[Design](https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=64584-133368&mode=design&t=oXWMZJo7aLUqUiFG-0)

```jsx live
() => {
  return (
    <Box width={400} color="$semantic.color.surface.container.emphasis.3">
      <Layout.Stack alignItems={'left'}>
        <Text>
          <Text>Results for providers that can treat </Text>
          <Text fontWeight="bold">knee replacement</Text>
          <Text> in the following categories:</Text>
        </Text>
        <Link size="small" after={<IconSymbol icon="chevron_right" />}>
          Search for knee repladment instead
        </Link>
      </Layout.Stack>
    </Box>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Box"
  rows={[
    {
      name: 'width',
      type: 'number | string',
      description: 'Set width of Box',
    },
    {
      name: 'height',
      type: 'number | string',
      description: 'Set height of Box',
    },
    {
      name: 'children',
      type: 'node',
      description: 'Children of the Box component',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Set color of Box',
      default: '$semantic.color.surface.interactive.standards.rest.quaternary',
    },

    {
      name: 'padding',
      type: 'number | string',
      description: 'Set padding of Box',
      default: '$semantic.spacing.lg',
    },

]}
/>

<Docs.ClassesTable
  of="Box"
  rows={[
    {
      name: 'box-root',
      description: 'Box root element',
    },
  ]}
/>

</Tab>
</Tabs>

---
id: button
category: Navigation
title: Button
description: Used to trigger an action or event.
design: https://www.figma.com/design/wCMblLsq9TxAQvKzY3EfCt/v1.66.0-App-Abyss-UHC-Component-Library?node-id=9529-32359&p=f&m=dev
---

<Tabs>

<Tab label="Overview">

```jsx
import { Button } from '@uhg-abyss/mobile';
```

```jsx sandbox
{  component: 'Button',
  inputs: [
    {
      prop: 'children',
      type: 'string',
    },
    {
      prop: 'variant',
      type: 'select',
      defaultValue: 'brand',
      options: [
        { label: 'brand', value: 'brand' },
        { label: 'neutral', value: 'neutral' },
        { label: 'destructive', value: 'destructive' },
        { label: 'inverse', value: 'inverse' },
      ],
    },
    {
      prop: 'type',
      type: 'select',
      defaultValue: 'filled',
      options: [
        { label: 'filled', value: 'filled' },
        { label: 'outline', value: 'outline' },
        { label: 'text', value: 'text' },
      ],
    },
    {
      prop: 'size',
      type: 'select',
      defaultValue: 'large',
      options: [
        { label: 'large', value: 'large' },
        { label: 'small', value: 'small' },
      ],
    },
    {
      prop: 'isDisabled',
      type: 'boolean',
    },

  ],
}

<Button>Click Here!</Button>
```

## Button Types and Variants

Button provides distinct visual styles through separate `type` and `variant` props:

- Use the `type` prop to specify the button style category: `filled`, `outline`, or `text`.
- Use the `variant` prop to indicate purpose: `brand` (primary actions), `neutral` (secondary actions), `destructive` (dangerous actions), or `inverse` (on dark backgrounds).

By default, `brand` variant and `filled` type are enabled.

```jsx live
<Layout.Stack grow>
  <Layout.Group>
    <Button type="filled" variant="brand">
      Filled Brand
    </Button>
    <Button type="filled" variant="neutral">
      Filled Neutral
    </Button>
    <Button type="filled" variant="destructive">
      Filled Destructive
    </Button>
  </Layout.Group>
  <Layout.Group>
    <Button type="outline" variant="brand">
      Outline Brand
    </Button>
    <Button type="outline" variant="neutral">
      Outline Neutral
    </Button>
    <Button type="outline" variant="destructive">
      Outline Destructive
    </Button>
  </Layout.Group>
  <Layout.Group>
    <Button type="text" variant="brand">
      Text Brand
    </Button>
    <Button type="text" variant="neutral">
      Text Neutral
    </Button>
    <Button type="text" variant="destructive">
      Text Destructive
    </Button>
  </Layout.Group>
  <Box color="$semantic.color.surface.container.primary">
    <Layout.Group>
      <Button type="filled" variant="inverse">
        Filled Inverse
      </Button>
      <Button type="outline" variant="inverse">
        Outline Inverse
      </Button>
      <Button type="text" variant="inverse">
        Text Inverse
      </Button>
    </Layout.Group>
  </Box>
</Layout.Stack>
```

## Size

Use the `size` prop to change the size of the button. The size prop can take in either `large` or `small`. The default value is `large`. To better visualize the difference, the Layout is preventing the large from taking up the full screen.

```jsx live
<Layout.Stack>
  <Button size="large">Large Button</Button>
  <Button size="small" type="outline" variant="brand">
    Small Button
  </Button>
</Layout.Stack>
```

## Icon Position

The `iconPosition` prop controls where icons appear in your button. There are three options:

- `trailing` (default): Places the icon after the button text
- `leading`: Places the icon before the button text
- `iconOnly`: Creates a small circular button with only the icon and no text

```jsx live
<Layout.Stack grow>
  <Button icon="arrow_forward" variant="brand">
    Continue
  </Button>
  <Button icon="send" type="filled" variant="neutral">
    Send Message
  </Button>
  <Button icon="arrow_back" iconPosition="leading" variant="brand">
    Back
  </Button>
  <Button
    icon="shopping_cart"
    iconPosition="leading"
    type="filled"
    variant="neutral"
  >
    Add to Cart
  </Button>
</Layout.Stack>
```

### Icon-Only Buttons

`iconPosition="iconOnly"` creates button with no text.

```jsx live
<Layout.Stack>
  <Layout.Group>
    <Button
      iconPosition="iconOnly"
      icon={{ name: 'favorite' }}
      variant="brand"
      accessibilityLabel="Favorite"
    />
    <Button
      iconPosition="iconOnly"
      icon={{ name: 'search' }}
      type="filled"
      variant="neutral"
      accessibilityLabel="Search"
    />
    <Button
      iconPosition="iconOnly"
      icon={{ name: 'delete' }}
      type="filled"
      variant="destructive"
      accessibilityLabel="Delete"
    />
  </Layout.Group>
</Layout.Stack>
```

## Icons

Button provides icon support through the `icon` prop. You can display icons in different ways:

**Using an Icon Object:** Provide an icon object with properties:

- `name`: The icon name (from [IconSymbol](/mobile/ui/icon-symbol))
- `variant`: icon style ('filled' or 'outlined')

**Using a String Name:** Provide the icon name as a valid IconSymbol name string.

**Using a React Node:** For advanced use cases, you can provide a custom Icon component.

**Using a Function:** Use a function that returns a React node, which receives the button's pressed state and allows `Button` to set the color according to Abyss color mappings, or override them.

```jsx live
<Layout.Stack grow>
  <Button icon={{ name: 'print', variant: 'filled' }} variant="brand">
    Object
  </Button>
  <Button icon="add" variant="neutral">
    String
  </Button>
  <Button
    variant="brand"
    type="outline"
    icon={<IconSymbol icon="api" color="white" size={16} />}
  >
    ReactNode
  </Button>
  <Button
    icon={({ color, isPressed }: { color: Abyss.Color }) => {
      return (
        <IconSymbol
          icon="info"
          size={16}
          color={isPressed ? '#890000' : color}
        />
      );
    }}
    iconPosition="leading"
    variant="destructive"
    type="outline"
  >
    Function
  </Button>
</Layout.Stack>
```

## Loading

When `isLoading` is set to `true`, a spinner indicates that an action is in progress, and `onPress` events are disabled.

```jsx live
<Layout.Stack grow>
  <Button
    variant="brand"
    type="filled"
    size="large"
    icon={{
      name: 'print',
      variant: 'outlined',
      position: 'leading',
    }}
    isLoading
  >
    Button
  </Button>
  <Button
    variant="destructive"
    type="filled"
    size="large"
    icon={{
      name: 'print',
      variant: 'outlined',
      position: 'leading',
    }}
    isLoading
  >
    Button
  </Button>
  <Button
    variant="brand"
    type="outline"
    size="large"
    icon={{
      name: 'print',
      variant: 'outlined',
      position: 'leading',
    }}
    isLoading
  >
    Button
  </Button>
  <Button
    variant="destructive"
    type="outline"
    size="large"
    icon={{
      name: 'print',
      variant: 'outlined',
      position: 'leading',
    }}
    isLoading
  >
    Button
  </Button>
  <Button
    iconPosition="iconOnly"
    icon={{ name: 'favorite' }}
    variant="brand"
    isLoading
    accessibilityLabel="Favorite"
  />
  <Button
    iconPosition="iconOnly"
    icon={{ name: 'search' }}
    type="outline"
    variant="neutral"
    isLoading
    accessibilityLabel="Search"
  />
</Layout.Stack>
```

## Disabled

Use the `isDisabled` prop to render the button in a non-interactive state. A disabled button cannot be in a loading state.

```jsx live
<Layout.Stack grow>
  <Button isDisabled>Disabled Button</Button>
  <Button
    type="outline"
    variant="destructive"
    isDisabled
    icon={{ name: 'delete', position: 'leading' }}
  >
    Cannot Delete
  </Button>
  <Button type="text" variant="brand" isDisabled>
    Unavailable
  </Button>
  <Button
    iconPosition="iconOnly"
    icon={{ name: 'print' }}
    isDisabled
    accessibilityLabel="Print"
  />
</Layout.Stack>
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Button"
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the button component',
    },
    {
      name: 'variant',
      type: "'brand' | 'neutral' | 'destructive' | 'inverse'",
      default: 'brand',
      description: 'The color scheme of the button',
    },
    {
      name: 'type',
      type: "'filled' | 'outline' | 'text'",
      default: 'filled',
      description: 'The style category of the button',
    },
    {
      name: 'icon',
      type: '{ name: string, variant?: string } | React.ReactNode | string | Function',
      description: 'Configuration for an icon to display in the button',
    },
    {
      name: 'iconPosition',
      type: "'leading' | 'trailing' | 'iconOnly'",
      default: 'false',
      description: 'When true, displays only the icon in a circular button',
    },
    {
      name: 'size',
      type: "'large' | 'small'",
      default: 'large',
      description: 'Set the size of the button',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Callback fired when the button is pressed',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      default: 'false',
      description: 'Flag to disable the button',
    },
    {
      name: 'isLoading',
      type: 'boolean',
      default: 'false',
      description: 'Flag to show loading spinner within the button',
    },
    {
      name: 'submit',
      type: 'boolean',
      default: 'false',
      description: 'Flag to indicate the button is a form submit button',
    },
  ]}
/>

<Docs.ClassesTable
  of="Button"
  rows={[
    {
      name: 'button-root',
      description: 'Button root element',
    },
    {
      name: 'button-label',
      description: 'Button label element',
    },
    {
      name: 'button-icon',
      description: 'Button icon element',
    },
    {
      name: 'button-loading-spinner',
      description: 'Button spinner element',
    },
  ]}
/>

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="Button" keys={['button']} />

</Tab>

<Tab label="Migration">

## Variant Mappings

This section explains how Button props map from V1 to V2 and shows concrete examples to make migration easier.

The `variant` props were renamed.

- `primary` -> `brand` (Brand is the default)
- `secondary` -> `neutral`
- `tertiary` -> Use the prop: `type="text"` The color is determined by the `variant`
- `destructive` -> `destructive` and `type="outline"`
- `alt` -> `inverse`

Example:

```jsx
// v1
<Button variant="primary">Click Here!</Button>

// v2
<Button variant="brand">Click Here!</Button>
```

### Type vs Variant in V2

In v2 the `type` prop controls the visual category (`filled` | `outline` | `text`) while `variant` controls purpose/semantic color (`brand` | `neutral` | `destructive` | `inverse`). If you previously relied on `variant` to imply filled vs outline, add an explicit `type` prop in V2.
If you used `type` in the v1 Button to submit a form, in v2 you can use the new `submit` boolean prop.

Example:

```jsx
// v1 intent: a secondary/outline button with the primary color (legacy)
<Button variant="secondary">Secondary</Button>

// v2: an outlined button with the brand color (brand prop optional here due to default)
<Button type="outline" variant="brand">Secondary</Button>

// v1 intent: a button that submits a form
<Button type="submit">Submit</Button>

// v2: a button that submits a form
<Button submit>Submit</Button>
```

### Removed props and recommended replacements

- `before` / `after` -> use `icon` + `iconPosition` (leading/trailing)
- `rounded` -> use `iconPosition="iconOnly"` and `icon` object

There are multiple ways to add icons in the new button, see main doc page.

Examples:

```jsx
// v1
<Button before={<IconSymbol icon="home" />}>Home</Button>

// v2
<Button icon={{ name: 'home' }} iconPosition="leading">Home</Button>

// v1
<Button rounded before={<IconSymbol icon="add" />} />

// v2
<Button icon={{ name: 'add' }} iconPosition="iconOnly" accessibilityLabel="Add" />
```

<Docs.ComparisonTable of="Button" type="class" />

<Docs.ComparisonTable of="Button" type="props" />

<Docs.ComparisonTable of="Button" type="tokens" />

</Tab>
</Tabs>

---
id: calendar
category: Controls
title: Calendar
description: A control element that displays a full calendar month at one time.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=39874-170177&mode=design&t=Ridf1HoSvYi7LIPY-0
---

<Tabs>

<Tab label="Overview">

```jsx sandbox
{
  component: 'Calendar',
}

() => {
  const [value, setValue] = useState(new Date());
  return (
    <Calendar
      value={value}
      onChange={setValue}
      minimumDate={new Date(2023, 7, 10)}
      maximumDate={new Date(2025, 6, 28)}
      goals={[
        { date: new Date(2023, 9, 23), state: 'progress', percentage: 23 },
        { date: new Date(2023, 9, 24), state: 'progress', percentage: 100 },
        { date: new Date(2023, 9, 25), state: 'complete' },
      ]}
    />
  )
}
```

## useState

Using the `useState` hook gets values from the component state.

```jsx live
() => {
  const [value, setValue] = useState();

  return <Calendar value={value} onChange={setValue} />;
};
```

## Minimum and Maximum Date

Use the `minimumDate` and `maximumDate` props to set the min and max dates in the Calendar. The default values will be a 1 year range from the prop `value.`

```jsx live
() => {
  const [value, setValue] = useState();

  const currentYear = new Date().getFullYear();
  const currentMonth = new Date().getMonth();

  return (
    <Calendar
      value={value}
      onChange={setValue}
      minimumDate={new Date(currentYear, currentMonth, 3)}
      maximumDate={new Date(currentYear, currentMonth + 1, 28)}
    />
  );
};
```

## Excluded Dates

To exclude dates use the `excludeDate` prop. Set a function that receives date as an argument and returns true if date should be disabled. For example, to disable weekends, check if the day is 0 or 6.

```jsx live
() => {
  const [value, setValue] = useState();

  return (
    <Calendar
      value={value}
      onChange={setValue}
      excludeDate={(date) => {
        return date.getDay() === 0 || date.getDay() === 6;
      }}
    />
  );
};
```

## Goals

Use the `goals` prop to add rewards to certain days on the calendar.

The goals prop must be an array of 'Goal' objects. A goal object has three properties

- `date`: The date the reward will be. Must be a date instance.
- `state`: The current state of the reward. Valid values are `'progress'` and `'complete'`.
- `percentage`: If the state of the goal is `'progress'`, you can add the completed percentage. Defaults to `50`.

```jsx live
() => {
  const [value, setValue] = useState();

  const currentYear = new Date().getFullYear();
  const currentMonth = new Date().getMonth();

  return (
    <Calendar
      value={value}
      onChange={setValue}
      minimumDate={new Date(currentYear, currentMonth, 3)}
      maximumDate={new Date(currentYear, currentMonth, 28)}
      goals={[
        {
          date: new Date(currentYear, currentMonth, 23),
          state: 'progress',
          percentage: 23,
        },
        {
          date: new Date(currentYear, currentMonth, 24),
          state: 'progress',
          percentage: 100,
        },
        { date: new Date(currentYear, currentMonth, 25), state: 'complete' },
      ]}
    />
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Calendar"
  rows={[
    {
      name: 'value',
      type: 'Date',
      description: 'Selected calendar date',
    },
    {
      name: 'onChange',
      type: 'Function',
      description: 'Callback fired every time the value changes',
    },
    {
      name: 'minimumDate',
      type: 'Date',
      description: 'Specifies the minimum selectable day by a user',
    },
    {
      name: 'maximumDate',
      type: 'Date',
      description: 'Specifies the maximum selectable day by a user',
    },
    {
      name: 'goals',
      type: 'Array',
      description:
        'An array used to add rewards markers to certain days on the calendar',
    },
    {
      name: 'excludeDate',
      type: 'Function',
      description: 'Callback fired to exclude dates from the calendar',
    },
  ]}
/>

<Docs.ClassesTable
  of="Calendar"
  rows={[
    {
      name: 'calendar-root',
      description: 'Calendar root element',
    },
    {
      name: 'calendar-header',
      description: 'Calendar header',
    },
    {
      name: 'calendar-month-button',
      description: 'Calendar month-button',
    },
    {
      name: 'calendar-month-label',
      description: 'Calendar month label',
    },
    {
      name: 'calendar-month-chevron',
      description: 'Calendar month chevron arrow',
    },
    {
      name: 'calendar-back-month-button',
      description: 'Calendar back month button',
    },
    {
      name: 'calendar-back-month-icon',
      description: 'Calendar back month icon',
      states: ['disabled'],
    },
    {
      name: 'calendar-forward-month-button',
      description: 'Calendar forward month button',
    },
    {
      name: 'calendar-forward-month-icon',
      description: 'Calendar forward month icon',
      states: ['disabled'],
    },
    {
      name: 'calendar-content',
      description: 'Calendar content',
    },
    {
      name: 'calendar-day-of-week',
      description: 'Calendar day of week',
    },
    {
      name: 'calendar-day-button',
      description: 'Calendar day button',
    },
    {
      name: 'calendar-selection-circle',
      description: 'Calendar selection circle',
    },
    {
      name: 'calendar-today-circle',
      description: 'Calendar today circle',
    },
    {
      name: 'calendar-day-label',
      description: 'Calendar day label',
      states: ['disabled', 'selected'],
    },
    {
      name: 'calendar-dates-wrapper',
      description: 'Calendar dates wrapper',
    },
    {
      name: 'calendar-goal-star',
      description: 'Calendar goal star',
    },
    {
      name: 'calendar-progress-circle',
      description: 'Calendar progress circle',
    },
  ]}
/>

<Docs.TranslationTable
  of="Calendar"
  rows={[
    'selected',
    'Calendar.prevMonth',
    'Calendar.nextMonth',
    'Calendar.year',
    'Calendar.today',
    'Calendar.inProgress',
  ]}
/>

</Tab>

<Tab label="Accessibility">

## Dynamic Type

Calendar scales to 3XL. Star icon does not grow.

The date picker component in Abyss library is currently not accessible to users relying on screen readers and therefore it is hidden from screen reader users.
Please use the date input method as an alternative to the date picker.

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="Calendar" keys={['calendar']} />

</Tab>

</Tabs>

---
id: card
category: Content
title: Card
description: A single or multi-section container used to display content related to a single subject.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/branch/Sk3MrHYxjT39TKDzDU5LBc/Abyss-Mobile?node-id=12334%3A61355
---

<Tabs>

<Tab label="Overview">

```jsx
import { Card } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Card',
  inputs: [
    {
      prop: 'children',
      type: 'string',
    },
  ]
}

<Card style={{ height: 100, padding: 12 }}>
  <Text>Card Sandbox</Text>
</Card>
```

## Basic usage

The Card component is a versatile wrapper used to display content related to a single subject.

One example of `Card` can be seen in [HomeWidget](/mobile/ui/home-widget).

```jsx live
<View>
  <Card
    height={200}
    styles={{
      'abyss-card-root': {
        paddingTop: 20,
        height: 200,
        alignItems: 'center',
      },
    }}
  >
    <Heading>Heading text example</Heading>
    <Text>Text example</Text>
  </Card>
</View>
```

## Pressable and Animations

The Card component extends the props of [Pressable](https://reactnative.dev/docs/pressable#props) and can be used as a button.

Use the `isDisabled` prop to disable the pressable responder. In the case where you place something with its own touch responder within the card, like a ScrollView, FlatList, SectionList, etc., you will want to disable the pressable responder.

[Animations](https://reactnative.dev/docs/animated#props) can be added via the `styles` prop targeting `abyss-card-root`.

A Card that is programmed as a button with a Call To Action (CTA) must use accessibility props like those in `Button`. This ensures assistive technology can reach, understand, and activate the card.

When building a CTA Card, text content should be short. A Screen Reader will present button content in one full string that cannot be navigated easily by the device. Large CTA Card text will be difficult for screen reader users to understand.

```jsx live
() => {
  const scale = useRef(new Animated.Value(1)).current;

  const shrink = () => {
    Animated.timing(scale, {
      toValue: 0.95,
      duration: 300,
      easing: Easing.linear,
      useNativeDriver: true,
    }).start();
  };

  const grow = () => {
    Animated.timing(scale, {
      toValue: 1,
      duration: 300,
      easing: Easing.linear,
      useNativeDriver: true,
    }).start();
  };

  return (
    <View>
      <Card
        color="$semantic.color.surface.container.emphasis.1"
        onPress={() => console.log('pressed')}
        onPressIn={shrink}
        onPressOut={grow}
        accessible={true}
        role="button"
        styles={{
          'abyss-card-root': {
            paddingTop: 20,
            height: 200,
            alignItems: 'center',
            transform: [{ scale }],
          },
        }}
      >
        <Heading>Pressable Card</Heading>
        <Text>Press card to log a console message</Text>
      </Card>
    </View>
  );
};
```

## Card.Section

The `Card.Section` subcomponent provides a card 16px of padding. A use case example is provided in [CheckBoxGroup](/mobile/ui/checkbox-group/#multi-select-card).

```jsx live
<View>
  <Card color="$semantic.color.surface.container.emphasis.3">
    <Card.Section>
      <Text>Card Section </Text>
    </Card.Section>
  </Card>
</View>
```

## Multi Select Card

A Card can be used as a container for selections by combining it with the [CheckboxGroup](/mobile/ui/checkbox-group) or [Checkbox](/mobile/ui/checkbox) components.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <View style={{ width: 400 }}>
        <CheckboxGroup align="left" model="claims">
          <CheckboxGroup.SelectAll>
            <Card>
              <Card.Section>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}
                >
                  <Text fontWeight="700">Select All Claims (4)</Text>
                  <Text fontWeight="700">$278.89</Text>
                </View>
              </Card.Section>
            </Card>
          </CheckboxGroup.SelectAll>
          <Checkbox value="one">
            <Card>
              <Card.Section>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}
                >
                  <Text fontWeight="700">Dr. Sharon Tang</Text>
                  <Text fontWeight="700">$93.22</Text>
                </View>
                <Text size="$core.font-size.p.60">Date of Service 5/11/23</Text>
                <View style={{ flexDirection: 'row', justifyContent: 'left' }}>
                  <IconSymbol
                    icon="info"
                    variant="outlined"
                    color="$semantic.color.icon.status.info"
                    size={16}
                  />
                  <Text
                    size="$core.font-size.p.60"
                    color="$semantic.color.text.label.status.info"
                  >
                    Claim Information
                  </Text>
                </View>
              </Card.Section>
            </Card>
          </Checkbox>
          <Checkbox value="two">
            <Card>
              <Card.Section>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}
                >
                  <Text fontWeight="700">Walgreens #927956</Text>
                  <Text fontWeight="700">$127.93</Text>
                </View>
                <Text size="$core.font-size.p.60">Date of Service 5/5/23</Text>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'left',
                  }}
                >
                  <IconSymbol
                    icon="info"
                    variant="outlined"
                    color="$semantic.color.icon.status.info"
                    size={16}
                  />
                  <Text
                    size="$core.font-size.p.60"
                    color="$semantic.color.text.label.status.info"
                  >
                    Claim Information
                  </Text>
                </View>
              </Card.Section>
            </Card>
          </Checkbox>
          <Checkbox value="three">
            <Card>
              <Card.Section>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}
                >
                  <Text fontWeight="700">Dr. Edward M Jenner</Text>
                  <Text fontWeight="700">$25.00</Text>
                </View>
                <Text size="$core.font-size.p.60">
                  Date of Service 10/30/22
                </Text>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'left',
                  }}
                >
                  <IconSymbol
                    icon="info"
                    variant="outlined"
                    color="$semantic.color.icon.status.info"
                    size={16}
                  />
                  <Text
                    size="$core.font-size.p.60"
                    color="$semantic.color.text.label.status.info"
                  >
                    Claim Information
                  </Text>
                </View>
              </Card.Section>
            </Card>
          </Checkbox>
          <Checkbox value="four">
            <Card>
              <Card.Section>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}
                >
                  <Text fontWeight="700">Odin Medical Group</Text>
                  <Text fontWeight="700">$32.74</Text>
                </View>
                <Text size="$core.font-size.p.60">Date of Service 12/9/22</Text>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'left',
                  }}
                >
                  <IconSymbol
                    icon="info"
                    variant="outlined"
                    color="$semantic.color.icon.status.info"
                    size={16}
                  />
                  <Text
                    size="$core.font-size.p.60"
                    color="$semantic.color.text.label.status.info"
                  >
                    Claim Information
                  </Text>
                </View>
              </Card.Section>
            </Card>
          </Checkbox>
        </CheckboxGroup>
      </View>
    </FormProvider>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Card"
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The node to be input into the Card component',
    },
    {
      name: 'color',
      type: 'string',
      description: 'The color of the card',
      default: '$card.color.surface.container',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description: 'Flag to disable the pressable responder',
      default: 'false',
    },
    {
      name: 'padding',
      type: 'number',
      description: 'Card padding value',
      default: '0',
    },
  ]}
/>

<Docs.ClassesTable
  of="Card"
  rows={[
    {
      name: 'card-root',
      description: 'Card root',
    },
  ]}
/>

<Docs.ClassesTable
  of="Card.Section"
  rows={[
    {
      name: 'card-section-root',
      description: 'Card section root element',
    },
  ]}
/>

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="Card" keys={['card']} />

</Tab>
</Tabs>

---
id: carousel
category: Content
title: Carousel
description: A circular conveyor of information, cycling between cards.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=12446-61354
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

** Disclaimer: ** On a mobile device the carousel has the full functionality of scrolling, pagination, and snapping to a slide. While on the web, the carousel is restricted to scrolling only by dragging the bottom scroll bar or using the pagination buttons.

```jsx
import { Carousel } from '@uhg-abyss/mobile';
```

## Heading

Use the `heading` prop to add a heading above the carousel.

```jsx live
() => {
  const colors = [
    '$semantic.color.surface.container.secondary',
    '$semantic.color.surface.container.emphasis.3',
    '$semantic.color.surface.container.emphasis.4',
    '$semantic.color.surface.container.emphasis.2',
    '$semantic.color.surface.container.emphasis.1',
  ];

  return (
    <View>
      <Carousel
        data={colors}
        heading="Carousel Heading"
        renderSlide={({ slide, index }) => {
          return (
            <Box
              height={100}
              width={325}
              color={colors[index]}
              style={{ borderWidth: 1 }}
            >
              <Text style={{ top: 8, left: 8, position: 'absolute' }}>
                Slide {index + 1}
              </Text>
            </Box>
          );
        }}
      />
    </View>
  );
};
```

## Action Text

Use the `actionText` prop to add an action button next to the heading.

```jsx live
() => {
  const colors = [
    '$semantic.color.surface.container.secondary',
    '$semantic.color.surface.container.emphasis.3',
    '$semantic.color.surface.container.emphasis.4',
    '$semantic.color.surface.container.emphasis.2',
    '$semantic.color.surface.container.emphasis.1',
  ];

  return (
    <View>
      <Carousel
        data={colors}
        heading="Carousel Heading"
        actionText="View All"
        onActionPress={() => {
          console.log('View All Pressed');
        }}
        renderSlide={({ slide, index }) => {
          return (
            <Box
              height={100}
              width={325}
              color={colors[index]}
              style={{ borderWidth: 1 }}
            >
              <Text style={{ top: 8, left: 8, position: 'absolute' }}>
                Slide {index + 1}
              </Text>
            </Box>
          );
        }}
      />
    </View>
  );
};
```

## Programmatic Slide Navigation

Carousel exposes methods and state to programmatically control the current slide via a ref.

- `goToSlide(slide: number)`: Function to programmatically change to a specific slide
- `goToPrevSlide()`: Function to programmatically go to the previous slide
- `goToNextSlide()`: Function to programmatically go to the next slide
- `activeSlide`: The currently active slide

```jsx live
() => {
  const colors = [
    '$semantic.color.surface.container.secondary',
    '$semantic.color.surface.container.emphasis.3',
    '$semantic.color.surface.container.emphasis.4',
    '$semantic.color.surface.container.emphasis.2',
    '$semantic.color.surface.container.emphasis.1',
  ];
  const carouselRef = useRef(null);

  return (
    <View>
      <Carousel
        heading="Programmatic Slide Navigation"
        ref={carouselRef}
        data={colors}
        slideGap={10}
        renderSlide={({ slide, index }) => {
          return (
            <Box
              height={100}
              width={325}
              color={colors[index]}
              style={{ borderWidth: 1 }}
            >
              <Text style={{ top: 8, left: 8, position: 'absolute' }}>
                Slide {index + 1}
              </Text>
            </Box>
          );
        }}
      />
      <Layout.Group style={{ marginTop: '$semantic.spacing.lg' }}>
        <Button
          size="small"
          onPress={() => {
            carouselRef.current?.goToPrevSlide();
          }}
        >
          Previous
        </Button>
        <Button
          size="small"
          onPress={() => {
            carouselRef.current?.goToNextSlide();
          }}
        >
          Next
        </Button>
        <Button
          size="small"
          onPress={() => {
            carouselRef.current?.goToSlide(3);
          }}
        >
          Go to Slide 3
        </Button>
      </Layout.Group>
    </View>
  );
};
```

## Disable Scrolling

Use the `disableScrolling` prop to prevent the carousel from scrolling.

```jsx live
() => {
  const [disableScrolling, toggleScrolling] = useToggle(true);

  const colors = [
    '$semantic.color.surface.container.emphasis.3',
    '$semantic.color.surface.container.emphasis.4',
    '$semantic.color.surface.container.emphasis.2',
    '$semantic.color.surface.container.emphasis.1',
  ];

  return (
    <View>
      <Carousel
        data={colors}
        disableScrolling={disableScrolling}
        slideGap={10}
        renderSlide={({ slide, index }) => {
          return (
            <Box
              height={100}
              width={325}
              color={colors[index]}
              style={{ borderWidth: 1 }}
            >
              <Text style={{ top: 8, left: 8, position: 'absolute' }}>
                Slide {index + 1}
              </Text>
            </Box>
          );
        }}
      />
      <Button variant="tertiary" size="small" onPress={toggleScrolling}>
        {`${disableScrolling ? 'Enable' : 'Disable'} Scrolling`}
      </Button>
    </View>
  );
};
```

## Disable Pagination

Use the `disablePagination` prop to remove the pagination bullets below the carousel.

```jsx live
() => {
  const [disablePagination, togglePagination] = useToggle(true);

  const colors = [
    '$semantic.color.surface.container.emphasis.3',
    '$semantic.color.surface.container.emphasis.4',
    '$semantic.color.surface.container.emphasis.2',
    '$semantic.color.surface.container.emphasis.1',
  ];

  return (
    <View>
      <Carousel
        data={colors}
        disablePagination={disablePagination}
        slideGap={10}
        renderSlide={({ slide, index }) => {
          return (
            <Box
              height={100}
              width={325}
              color={colors[index]}
              style={{ borderWidth: 1 }}
            >
              <Text style={{ top: 8, left: 8, position: 'absolute' }}>
                Slide {index + 1}
              </Text>
            </Box>
          );
        }}
      />
      <Button variant="tertiary" size="small" onPress={togglePagination}>
        {`${disablePagination ? 'Enable' : 'Disable'} Pagination`}
      </Button>
    </View>
  );
};
```

## Slide Gap

Use the `slideGap` prop to add a gap between each slide. The default value is `$carousel.space.slide-gap || 8`.

```jsx live
() => {
  const [disableScrolling, toggleScrolling] = useToggle();

  const colors = [
    '$semantic.color.surface.container.emphasis.3',
    '$semantic.color.surface.container.emphasis.4',
    '$semantic.color.surface.container.emphasis.2',
    '$semantic.color.surface.container.emphasis.1',
  ];

  return (
    <Layout.Stack grow>
      <Carousel
        data={colors}
        slideGap={10}
        renderSlide={({ slide, index }) => {
          return (
            <Box
              height={100}
              width={325}
              color={colors[index]}
              style={{ borderWidth: 1 }}
            >
              <Text style={{ top: 8, left: 8, position: 'absolute' }}>
                Slide {index + 1}
              </Text>
            </Box>
          );
        }}
      />
      <Carousel
        data={colors}
        slideGap={50}
        renderSlide={({ slide, index }) => {
          return (
            <Box
              height={100}
              width={325}
              color={colors[index]}
              style={{ borderWidth: 1 }}
            >
              <Text style={{ top: 8, left: 8, position: 'absolute' }}>
                Slide {index + 1}
              </Text>
            </Box>
          );
        }}
      />
    </Layout.Stack>
  );
};
```

## Snap Percentage

Use the `snapPercentage` prop to set minimum percent in either direction a carousel should be shifted to snap to another carousel.
The default value is `30`.

In the examples below, there is a green line denoting how much the carousel would need to scroll before snapping to the next slide.

```jsx live
() => {
  const snapPercents = [30, 50, 75];

  const carousels = snapPercents.map((percent, i) => {
    const slideContent = ['Slide 1', 'Slide 2'];

    return (
      <Layout.Stack grow key={i}>
        <Carousel
          snapPercentage={percent}
          slideGap={0}
          disablePagination
          data={slideContent}
          renderSlide={({ slide, index }) => {
            return (
              <View style={{ height: 100, width: 325, borderWidth: 1 }}>
                <Text style={{ top: 8, left: 8, position: 'absolute' }}>
                  {slideContent[index]}
                </Text>
                <View
                  style={{
                    left: 325 * (percent / 100) - 16,
                    borderWidth: 1.5,
                    height: '100%',
                    width: 0,
                    borderColor: 'green',
                  }}
                />
              </View>
            );
          }}
        />
        <Text>Snap Percentage: {percent}</Text>
      </Layout.Stack>
    );
  });

  return <Layout.Stack grow>{carousels}</Layout.Stack>;
};
```

## Data

Carousel is made to be used in conjunction with slides, therefore the `data` prop is required. This prop takes in an array that contains the information to be rendered on each slide.

```
  const slides = [
    {
      imageBackgroundColor: '$semantic.color.surface.container.secondary',
      eyebrow: 'New Service',
      heading: 'Virtual Care',
      paragraph:
        'Get medical advice from the comfort of your home. Discover our new virtual care services.',
    },
    {
      imageBackgroundColor: '$semantic.color.surface.container.emphasis.3',
      eyebrow: 'Mental health',
      paragraph:
        'Learn more about available mental health benefits and resources available to you',
      heading: 'Explore Coverage & Support',
    },
    {
      imageBackgroundColor: '$semantic.color.surface.container.emphasis.4',
      eyebrow: 'Update',
      heading: 'COVID-19 Vaccine Information',
      paragraph:
        'Stay informed about the COVID-19 vaccine. Learn about eligibility, safety, and how to get your shot.',
    },
    {
      imageBackgroundColor: '$semantic.color.surface.container.emphasis.2',
      eyebrow: 'Event',
      heading: 'United Healthcare Community Health Fair',
      paragraph:
        'Join us for a day of free health screenings and wellness activities. Bring your family and friends!',
    },
    {
      imageBackgroundColor: '$semantic.color.surface.container.emphasis.1',
      eyebrow: 'In-App Care',
      heading: 'Real-time, online visits',
      paragraph: 'Connect with a designated provider using your smartphone.',
    },
  ];
```

## Render Slide

Use the `renderSlide` prop to render the data passed into Carousel. This function takes in the slide object and index number.

```
renderSlide={{({ slide, index }) => {
  return (
     <Carousel.Card
      paragraph={slide.paragraph}
      eyebrow={slide.eyebrow}
      heading={slide.heading}
      variant={'vertical-small'}
      imageBackgroundColor="$semantic.color.surface.container.secondary"
      onPress={() => {
        console.log(`card ${index + 1} pressed`);
      }}
    />);
}}}
```

```jsx live
() => {
  const slides = [
    {
      imageBackgroundColor: '$semantic.color.surface.container.secondary',
      background: 'mint',
      heading: 'Virtual Care',
      paragraph:
        'Get medical advice from the comfort of your home. Discover our new virtual care services.',
    },
    {
      imageBackgroundColor: '$semantic.color.surface.container.emphasis.3',
      background: 'peach',
      paragraph:
        'Learn more about available mental health benefits and resources available to you',
      heading: 'Explore Coverage & Support',
    },
    {
      imageBackgroundColor: '$semantic.color.surface.container.emphasis.4',
      background: 'white',
      heading: 'COVID-19 Vaccine Information',
      paragraph:
        'Stay informed about the COVID-19 vaccine. Learn about eligibility, safety, and how to get your shot.',
    },
    {
      imageBackgroundColor: '$semantic.color.surface.container.emphasis.2',
      background: 'sky-blue',
      heading: 'United Healthcare Community Health Fair',
      paragraph:
        'Join us for a day of free health screenings and wellness activities. Bring your family and friends!',
    },
    {
      imageBackgroundColor: '$semantic.color.surface.container.emphasis.1',
      background: 'aqua',
      heading: 'Real-time, online visits',
      paragraph: 'Connect with a designated provider using your smartphone.',
    },
  ];

  return (
    <View>
      <Carousel
        snapPercentage={30}
        data={slides}
        renderSlide={({ slide, index }) => {
          return (
            <Carousel.Card
              background={slide.background}
              paragraph={slide.paragraph}
              heading={slide.heading}
              variant={'vertical-small'}
              imageBackgroundColor={slide.imageBackgroundColor}
              onPress={() => {
                console.log(`card ${index + 1} pressed`);
              }}
            />
          );
        }}
      />
    </View>
  );
};
```

### Carousel Card

Use the `Carousel.Card` component to display content on a card with pre-defined styled specific for use within a carousel. It does not allow for multiple variants within the same carousel. Please follow [design guidelines](https://www.figma.com/design/5djnh49w0SBYAG5tFJifIG/v1.76.0-App-Abyss-Global%E2%80%A8Component-Library?node-id=1185-2419) when implementing.

```jsx live
() => {
  const [variant, setVariant] = useState('vertical-sm');

  const optumBrand = (
    <Brandmark
      brand="optum"
      affiliate="optum"
      variant="lockup"
      color="orange"
      size={75}
    />
  );

  const slides = [
    {
      imageBackgroundColor: '$semantic.color.surface.container.secondary',
      background: 'mint',
      heading: 'Virtual Care',
      paragraph:
        'Get medical advice from the comfort of your home. Discover our new virtual care services.',
    },
    {
      imageBackgroundColor: '$semantic.color.surface.container.emphasis.3',
      background: 'peach',
      paragraph:
        'Learn more about available mental health benefits and resources available to you',
      heading: 'Explore Coverage & Support',
    },
    {
      imageBackgroundColor: '$semantic.color.surface.container.emphasis.4',
      background: 'white',
      heading: 'COVID-19 Vaccine Information',
      paragraph:
        'Stay informed about the COVID-19 vaccine. Learn about eligibility, safety, and how to get your shot.',
    },
    {
      imageBackgroundColor: '$semantic.color.surface.container.emphasis.2',
      background: 'sky-blue',
      heading: 'United Healthcare Community Health Fair',
      paragraph:
        'Join us for a day of free health screenings and wellness activities. Bring your family and friends!',
    },
    {
      imageBackgroundColor: '$semantic.color.surface.container.emphasis.1',
      background: 'aqua',
      heading: 'Real-time, online visits',
      paragraph: 'Connect with a designated provider using your smartphone.',
    },
  ];

  return (
    <>
      <SegmentedControls
        value={variant}
        onChange={setVariant}
        style={{ marginBottom: 16 }}
      >
        <SegmentedControls.Tab label="vertical-sm" value="vertical-sm" />
        <SegmentedControls.Tab label="vertical-lg" value="vertical-lg" />
        <SegmentedControls.Tab label="horizontal" value="horizontal" />
        <SegmentedControls.Tab label="branded" value="branded" />
      </SegmentedControls>
      <Carousel
        heading="Spotlight"
        snapPercentage={30}
        data={slides}
        renderSlide={({ slide, index }) => {
          return (
            <Carousel.Card
              paragraph={slide.paragraph}
              heading={slide.heading}
              variant={variant}
              image={variant === 'branded' ? optumBrand : null}
              imageBackgroundColor={slide.imageBackgroundColor}
              background={slide.background}
              onPress={() => {
                console.log(`Card ${index + 1} pressed`);
              }}
            />
          );
        }}
      />
    </>
  );
};
```

### Carousel Nib

Use the `Carousel.Nib` component to display nibs within a carousel. Nibs are small, pill-shaped buttons that can be used for navigation or to represent different categories or options. They are typically used in a horizontal layout and can be scrolled through if there are more nibs than can fit on the screen at once.

```jsx live
() => {
  return (
    <Carousel
      heading="Carousel Nibs"
      data={[1, 2, 3, 4, 5, 6, 7]}
      slideGap={10}
      renderSlide={({ slide, index }) => {
        return <Carousel.Nib>Nib {index + 1}</Carousel.Nib>;
      }}
    />
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Carousel"
  rows={[
    {
      name: 'disableScrolling',
      type: 'boolean',
      description: 'Flag to disable carousel scrolling',
      default: 'false',
    },
    {
      name: 'disablePagination',
      type: 'boolean',
      description: 'Flag to remove pagination bullets',
      default: 'false',
    },
    {
      name: 'renderSlide',
      type: 'function',
      description: 'Callback fired on slide render',
    },
    {
      name: 'slideGap',
      type: 'number',
      description: 'The gap between each slide',
      default: '$carousel.space.slide-gap',
    },
    {
      name: 'data',
      type: 'any[]',
      description: 'Each individual slide data stored in an array',
    },
    {
      name: 'snapPercentage',
      type: 'number',
      description:
        'The minimum percent in either direction a carousel should be shifted to snap to another slide',
      default: '30',
    },
    {
      name: 'actionText',
      type: 'string',
      description: 'Text for the action button',
    },
    {
      name: 'onActionPress',
      type: 'function',
      description: 'Callback fired when the action button is pressed',
    },
  ]}
/>

<Docs.ClassesTable
  of="Carousel"
  rows={[
    {
      name: 'carousel-root',
      description: 'Carousel root element',
    },
    {
      name: 'carousel-slide',
      description: 'Carousel slide',
    },
    {
      name: 'carousel-bullets-container',
      description: 'Carousel bullets container',
    },
    {
      name: 'carousel-bullets',
      description: 'Carousel bullets component',
    },
  ]}
/>

<Docs.PropsTable
  of="Carousel.Card"
  rows={[
    {
      name: 'variant',
      type: '"horizontal" | "vertical-lg" | "vertical-sm" | "branded"',
      description: 'The carousel card variant',
      default: 'horizontal',
    },
    {
      name: 'background',
      type: '"white" | "peach" | "mint" | "aqua" | "sky-blue"',
      description: 'The background color of the carousel card',
      default: 'white',
    },
    {
      name: 'eyebrow',
      type: 'string',
      description: 'The eyebrow text of the carousel card',
    },
    {
      name: 'heading',
      type: 'string',
      description: 'The heading text of the carousel card',
    },
    {
      name: 'paragraph',
      type: 'string',
      description: 'The paragraph text of the carousel card',
    },
    {
      name: 'imageBackgroundColor',
      type: 'string',
      description: 'The background color of the image container',
    },
    {
      name: 'image',
      type: 'React.ReactNode',
      description: 'The image of the carousel card',
    },
    {
      name: 'isExternal',
      type: 'boolean',
      description: 'Displays an external icon after the heading',
    },
  ]}
/>

<Docs.ClassesTable
  of="Carousel.Card"
  rows={[
    {
      name: 'carousel-card-root',
      description: 'Carousel card root element',
    },
    {
      name: 'carousel-card-content',
      description: 'Carousel card content section',
    },
    {
      name: 'carousel-card-image-container',
      description: 'Carousel card image container',
    },
    {
      name: 'carousel-card-eyebrow',
      description: 'Carousel card eyebrow text',
    },
    {
      name: 'carousel-card-heading',
      description: 'Carousel card heading text',
    },
    {
      name: 'carousel-card-paragraph',
      description: 'Carousel card paragraph text',
    },
  ]}
/>

<Docs.PropsTable
  of="Carousel.Nib"
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the Nib Group component',
    },
    {
      name: 'type',
      type: "'list' | 'carousel'",
      description:
        'The type of Nib group. This can either be a list or carousel',
      default: 'list',
    },
    {
      name: 'size',
      type: "'small' | 'medium' | 'large'",
      description:
        'The size of the nibs. Nibs in a list should use small, while nibs in a carousel can use medium or large',
      default: 'small',
    },
  ]}
/>

<Docs.ClassesTable
  of="Carousel.Nib"
  rows={[
    {
      name: 'nib-root',
      description: 'The root element',
    },
    {
      name: 'nib-label',
      description: 'The label element',
    },
  ]}
/>

</Tab>

<Tab label="Accessibility">

## Pagination

When a screen reader is enabled, the pagination should not be shown. Be sure to set `disablePagination` prop to `true`.

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="Carousel" keys={['carousel']} />

</Tab>
</Tabs>

---
id: cell
category: Data Display
title: Cell
description: A navigation element to display a page of categorized content.
design: https://www.figma.com/design/5djnh49w0SBYAG5tFJifIG/v1.66.0-App-Abyss-Global%E2%80%A8Component-Library?node-id=1242-1385&p=f&t=sMgU6UgXCqKGqjZe-0
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { Cell } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Cell',
  inputs: [
    {
      prop: 'eyebrow',
      type: 'string',
      defaultValue: 'eyebrow'

    },
    {
      prop: 'heading',
      type: 'string',
      defaultValue: 'Cell Heading'
    },
    {
      prop: 'subheading',
      type: 'string',
      defaultValue: 'Subheading'

    },
    {
      prop: 'paragraph',
      type: 'string',
      defaultValue: 'Paragraph content here'
    },
    {
      prop: 'value',
      type: 'string',
    },
    {
      prop: 'indicator',
      type: 'string',
    },
  ]
}

<Cell />
```

## Leading Content

The `leadingContent` prop defines the cell's content on the left-hand side. This may contain the [IconBrand](/mobile/brand/{brand}/icon-brand) component, a utility icon ([IconSymbol](/mobile/ui/icon-symbol)), or an [Avatar](/mobile/ui/avatar).

```jsx live
<>
  <Cell
    heading="Abyss Design System"
    leadingContent={<Avatar initials="AD" colorTheme={4} />}
  />
  <Cell
    onPress={() => console.log('Cell Pressed')}
    heading="Primary Care"
    paragraph="Your first contact for to get care for your health."
    leadingContent={<IconBrand icon="handshake" size="$xs" disableScaling />}
  />
  <Cell
    onPress={() => console.log('Cell Pressed')}
    subheading="Search your benefits"
    leadingContent={
      <IconSymbol
        icon="search"
        size="$cell.sizing.icon.all.leading"
        color="$cell.color.icon.leading.utility"
      />
    }
  />
</>
```

## Main Content

The `eyebrow` prop defines the cell's eyebrow. This prop can either be text or a custom component such as `Badge`.

The `heading` prop defines the cell's heading.

The `subheading` prop defines the cell's subheading.

The `paragraph` prop defines the cell's paragraph

The `trailingIcon` prop placed an icon at the end of the paragraph. This will not show unless there are also defined `paragraph` and `onPress` props. When this icon is present, only the icon is pressable, not the entire cell.

A [link](/mobile/ui/link) can be displayed below the paragraph using the `link` prop. A link may also be passed to the `value` prop to be displayed on the right side of the cell.

```jsx live
<>
  <Cell
    heading="Heading"
    subheading="subheading"
    paragraph="The trailingIcon prop displays the icon after the end of the paragraph. When the trailing icon is present, only the icon is pressable, not the entire cell"
    eyebrow="eyebrow"
    onPress={() => console.log('Help Icon Pressed')}
    trailingIcon={
      <IconSymbol
        icon="help"
        variant="outlined"
        color="$cell.color.icon.trailing.interactive"
        size="$cell.sizing.icon.all.trailing"
      />
    }
  />
  <Cell
    heading="Heading"
    subheading="subheading"
    paragraph="Paragraph content goes here"
    eyebrow={<Badge>Badge</Badge>}
    onPress={() => console.log('Cell Pressed')}
  />
  <Cell
    heading="Heading"
    paragraph="Paragraph content goes here"
    link={
      <Link size="small" href="https://abyss.uhg.com/">
        Go to Abyss
      </Link>
    }
  />
</>
```

## Trailing Content

The `value` prop defines the value component on the right side of the cell. This is generally used to display a numerical value but can also display the [Link](/mobile/ui/link) component.
If the `value` prop exists, the cell cannot contain an `onPress` function.

The `indicator` prop defines the indicator component on the right side of the cell. Unlike `value`, this prop can co-exist with an `onPress` function. Either a string or a custom Component can be passed here.

The `navIcon` prop defines the icon that appears on the far right side of the cell. This icon will only exist when an `onPress` function exists.

```jsx live
<>
  <Cell heading="Cell heading" paragraph="Cell paragraph" value="$Value" />
  <Cell
    heading="Cell heading"
    paragraph="Cell paragraph"
    value={
      <Link size="small" href="https://Google.com">
        Link Value
      </Link>
    }
  />
  <Cell
    onPress={() => console.log('Cell Pressed')}
    heading="Cell heading"
    paragraph="Cell with a string indicator and onPress"
    indicator="Indicator"
  />
  <Cell
    onPress={() => console.log('Cell Pressed')}
    subheading="Badge Indicator"
    indicator={
      <Badge
        icon={
          <IconSymbol
            size={14}
            icon="check_circle"
            color="$semantic.color.icon.status.success"
          />
        }
      >
        Badge
      </Badge>
    }
  />
  <Cell
    heading="Cell with a navIcon"
    onPress={() => console.log('Cell Pressed')}
    navIcon={
      <IconSymbol
        size={20}
        icon="open_in_new"
        color="$semantic.color.icon.interactive.rest.secondary"
      />
    }
  />
</>
```

## isDisabled

`isDisabled` is a prop available for type `radio`, `checkbox`, and `toggle`.

When `isDisabled` is present in [CellGroup](/mobile/ui/cell-group), the entire group is disabled and cannot be modified. However, if `isDisabled` is present in `Cell`, only that cell is disabled and cannot be modified.

```jsx live
() => {
  const [checkboxValue, setCheckboxValue] = useState([]);
  const [radioValue, setRadioValue] = useState('one');
  const [disableGroup, setDisableGroup] = useState(false);
  const [disableCells, setDisableCells] = useState(false);

  return (
    <>
      <Cell
        heading="Disabled Cell Groups"
        type="toggle"
        value={disableGroup}
        onChange={setDisableGroup}
      />
      <CellGroup
        type="checkbox"
        value={checkboxValue}
        onChange={setCheckboxValue}
        isDisabled={disableGroup}
      >
        <Cell heading="Checkbox 1" value="1" />
        <Cell
          isDisabled={disableCells}
          heading="Checkbox 2"
          value="2"
          isDisabled
        />
      </CellGroup>
      <CellGroup
        type="radio"
        value={radioValue}
        onChange={setRadioValue}
        isDisabled={disableGroup}
      >
        <Cell heading="Radio 1" value="1" isDisabled />
        <Cell isDisabled={disableCells} heading="Radio 2" value="2" />
      </CellGroup>
    </>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Cell"
  rows={[
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired when the cell value is changed',
    },
    {
      name: 'value',
      type: 'any',
      description: 'The value of the cell',
    },
    {
      name: 'type',
      type: '"default" | "toggle" | "radio" | "checkbox"',
      description: 'The type of cell',
    },
    {
      name: 'heading',
      type: 'string',
      description: 'The heading of the cell',
    },
    {
      name: 'subheading',
      type: 'string',
      description: 'The subheading of the cell',
    },
    {
      name: 'paragraph',
      type: 'string',
      description: 'The paragraph of the cell',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Callback fired when the cell is pressed',
    },
    {
      name: 'eyebrow',
      type: 'string | node',
      description: 'The eyebrow of the cell',
    },
    {
      name: 'icon',
      type: 'node',
      description: 'Icon displayed on the left side of the cell',
    },
    {
      name: 'indicator',
      type: 'string | node',
      description: 'Indicator text or link on the right side of the cell',
    },
    {
      name: 'navIcon',
      type: 'node',
      description: 'Icon used on the right side of the cell',
    },
    {
      name: 'selectAll',
      type: 'boolean',
      description: 'Flag to uses cell as a select all checkbox',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description:
        'Disables the radio button, toggle, or checkbox inside of cell',
    },
  ]}
/>

<Docs.ClassesTable
  of="Cell"
  rows={[
    {
      name: 'cell-root',
      description: 'Cell root',
    },
    {
      name: 'cell-leading-content',
      description:
        'The leading content. Can include IconBrand component, a utility icon, or an Avatar',
    },
    {
      name: 'cell-content-wrapper',
      description: 'The content wrapper of the cell',
    },
    {
      name: 'cell-eyebrow',
      description: 'Cell eyebrow',
    },
    {
      name: 'cell-heading',
      description: 'Cell heading',
    },
    {
      name: 'cell-subheading',
      description: 'Cell subheading',
    },
    {
      name: 'cell-paragraph',
      description: 'Cell paragraph',
    },
    {
      name: 'cell-value',
      description: 'Cell value',
    },
    {
      name: 'cell-radio-button',
      description: 'Radio component',
    },
    {
      name: 'cell-checkbox-button',
      description: 'Checkbox component',
    },
    {
      name: 'cell-toggle-button',
      description: 'ToggleSwitch component',
    },
    {
      name: 'cell-indicator',
      description: 'Cell indicator',
    },
    {
      name: 'cell-nav-icon',
      description: 'onPress icon to the far right of cell',
    },
    {
      name: 'cell-trailing-icon',
      description: 'The icon placed at the end of the paragraph',
    },
    {
      name: 'cell-icon-button',
      description: 'The icon button at the end of the paragraph',
    },
  ]}
/>

</Tab>

<Tab label="Accessibility">

**It is the responsibility of consuming teams to make sure all components within Cell are accessible.**<br />When possible, please test on physical devices for accessibility accuracy.

</Tab>
<Tab label="Tokens">

<Docs.ComponentTokensTable of="Cell" keys={['cell']} />

</Tab>

<Tab label="Migration">

<Docs.ComparisonTable of="Cell" type="class" />

<Docs.ComparisonTable of="Cell" type="props" />

</Tab>
</Tabs>

---
id: cell-group
category: Data Display
title: CellGroup
description: Cells present data in one or more vertically stacked rows.
design: https://www.figma.com/design/5djnh49w0SBYAG5tFJifIG/v1.66.0-App-Abyss-Global%E2%80%A8Component-Library?node-id=1242-1385&p=f&t=sMgU6UgXCqKGqjZe-0
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { CellGroup } from '@uhg-abyss/mobile';
```

## Type Inheritance

When creating a `CellGroup` of type `radio`, `checkbox`, or `toggle`, it is important to use the `type` prop. Once a type prop is assigned to a CellGroup, every child will inherit the group's type and have access to all necessary providers preventing errors.

Below, you can see a few examples of type inheritance within `CellGroup`. Notice how `Cell` does not have the `type` prop, inheriting it from the CellGroup.

```jsx live
() => {
  const [isToggleChecked, setIsToggleChecked] = useState(false);
  const [radioValue, setRadioValue] = useState('one');
  const [value, setValue] = useState([]);

  return (
    <>
      <CellGroup type="radio" value={radioValue} onChange={setRadioValue}>
        <Cell heading="Radio One" value="one" />
        <Cell heading="Radio Two" value="two" />
      </CellGroup>
      <CellGroup type="checkbox" value={value} onChange={setValue}>
        <Cell heading="One" value="one" />
        <Cell heading="Two" value="two" />
        <Cell heading="Three" value="three" />
      </CellGroup>
      <CellGroup type="toggle">
        <Cell
          type="toggle"
          heading="Toggle Switch Cell"
          value={isToggleChecked}
          onChange={setIsToggleChecked}
        />
      </CellGroup>
    </>
  );
};
```

## Toggle Switch CellGroup

Cells of type `toggle` contain the content of the cell with a ToggleSwitch on the right side. Toggle Cells will return a boolean of the selected value onChange.

```jsx live
() => {
  const [isToggleChecked, setIsToggleChecked] = useState(false);
  const [isToggleChecked2, setIsToggleChecked2] = useState(true);

  return (
    <Box
      color="$semantic.color.surface.container.secondary"
      style={{ flexDirection: 'column', justifyContent: 'space-between' }}
      padding={0}
    >
      <CellGroup>
        <Cell
          heading="Toggle Switch 1"
          type="toggle"
          value={isToggleChecked}
          onChange={setIsToggleChecked}
        />
        <Cell
          heading="Toggle Switch 1"
          paragraph="value"
          value={String(isToggleChecked)}
        />
        <Cell
          heading="Toggle Switch 2"
          type="toggle"
          value={isToggleChecked2}
          onChange={setIsToggleChecked2}
        />
        <Cell
          heading="Toggle Switch 2"
          paragraph="value"
          value={String(isToggleChecked2)}
        />
      </CellGroup>
    </Box>
  );
};
```

## Radio Group

Cells of type `radio` are required to be wrapped in a `CellGroup` with type `radio`. Reference the [Type Inheritance](/mobile/ui/cell-group/#type-inheritance) section above for more information.

Radio Cells contain the content of the cell with a radio button on the right side, and return the selected value onChange.

Radio `CellGroup` requires the `onChange` and `value` props.

```jsx live
() => {
  const [radioValue, setRadioValue] = useState('one');

  return (
    <>
      <Heading>Radio Group Example</Heading>
      <Layout.Space />
      <CellGroup type="radio" value={radioValue} onChange={setRadioValue}>
        <Cell heading="Option 1" value="one" />
        <Cell heading="Option 2" value="two" />
        <Cell heading="Option 3" value="three" />
      </CellGroup>
    </>
  );
};
```

## Checkbox Group

Cells of type `checkbox` are required to be wrapped in a `CellGroup` with type `checkbox`, reference the [Type Inheritance](/mobile/ui/cell-group/#type-inheritance) section above for more information.

Checkbox Cells contain the content of the cell, with a checkbox on the right side.

Checkbox Cells works the same as a standard Checkbox Group, returning the selected cell values.

`selectAll` is a prop that can exist inside a Cell in a Checkbox CellGroup. This prop creates a select all checkbox that will select/deselect the entire checkbox list.

Checkbox `CellGroup`'s require the `onChange` and `value` props.

```jsx live
() => {
  const [checkboxValue, setCheckboxValue] = useState([]);

  return (
    <>
      <Heading>Checkbox Group Example</Heading>
      <Layout.Space />
      <CellGroup
        type="checkbox"
        value={checkboxValue}
        onChange={setCheckboxValue}
      >
        <Cell heading="Select All" selectAll value="selectAll" />
        <Cell heading="Option 1" value="one" />
        <Cell heading="Option 2" value="two" />
        <Cell heading="Option 3" value="three" />
      </CellGroup>
    </>
  );
};
```

## isDisabled

`isDisabled` is a prop available for type `radio`, `checkbox`, and `toggle`.

When `isDisabled` is present in `CellGroup`, the entire group is disabled and cannot be modified. However, if `isDisabled` is present in `Cell`, only that cell is disabled and cannot be modified.

```jsx live
() => {
  const [checkboxValue, setCheckboxValue] = useState([]);
  const [radioValue, setRadioValue] = useState('one');
  const [disableGroup, setDisableGroup] = useState(false);
  const [disableCells, setDisableCells] = useState(false);

  return (
    <>
      <Cell
        heading="Disabled Cell Groups"
        type="toggle"
        value={disableGroup}
        onChange={setDisableGroup}
      />
      <CellGroup
        type="checkbox"
        value={checkboxValue}
        onChange={setCheckboxValue}
        isDisabled={disableGroup}
      >
        <Cell heading="Checkbox 1" value="1" />
        <Cell
          isDisabled={disableCells}
          heading="Checkbox 2"
          value="2"
          isDisabled
        />
      </CellGroup>
      <CellGroup
        type="radio"
        value={radioValue}
        onChange={setRadioValue}
        isDisabled={disableGroup}
      >
        <Cell heading="Radio 1" value="1" />
        <Cell isDisabled={disableCells} heading="Radio 2" value="2" />
      </CellGroup>
    </>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="CellGroup"
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The child cells in CellGroup',
    },
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired when the cell value is changed',
    },
    {
      name: 'value',
      type: 'string | boolean',
      description: 'The value of the cell',
    },
    {
      name: 'type',
      type: '"default" | "toggle" | "radio" | "checkbox"',
      description: 'The type of cell',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description:
        'Disables the radio button, toggle, or checkbox inside of cell',
    },
  ]}
/>

</Tab>

<Tab label="Accessibility">

**It is the responsibility of consuming teams to make sure all components within CellGroup are accessible.**

</Tab>

<Tab label="Migration">

<Docs.ComparisonTable of="CellGroup" type="class" />

<Docs.ComparisonTable of="CellGroup" type="props" />

</Tab>
</Tabs>

---
id: checkbox
category: Forms
title: Checkbox
description: Used to mark an option as true/checked or false/not checked
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=9602%3A34536
---

<Tabs>

<Tab label="Overview">

```jsx
import { Checkbox } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Checkbox',
  inputs: [
    {
      prop: 'label',
      type: 'string',
    },
    {
      prop: 'align',
      type: 'select',
      options: [
        { label: 'left', value: 'left' },
        { label: 'right', value: 'right' },
      ],
    },
    {
      prop: 'isDisabled',
      type: 'boolean',
    },
    {
      prop: 'isIndeterminate',
      type: 'boolean',
    },
  ]
}

() => {
  const [isChecked, setChecked] = useState(true);

  return (
    <Checkbox
      label="I agree"
      isChecked={isChecked}
      onChange={setChecked}
    />
  );
};
```

## States

- <b>Default</b> - The default checkbox is unchecked.
- <b>Checked</b> - Use the `isChecked` prop to mark a checkbox as checked.
- <b>Indeterminate</b> - Use the `isIndeterminate` prop to set the checkbox as indeterminate.
- <b>Disabled</b> - Use the `isDisabled` prop to disable a checkbox. A disabled checkbox
  is unusable and un-clickable.
- <b>Help Text</b> - Use the `helpText` prop to insert helpful text below the checkbox.
- <b>Error Message</b> - Use the `errorMessage` prop to display a custom error message
  below the checkbox.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      indeterminate: true,
      'indeterminate-disabled': true,
      'disabled-checked': true,
    },
  });

  return (
    <FormProvider state={form}>
      <Checkbox label="Default Checkbox" />
      <Checkbox label="Checked Checkbox" isChecked />
      <Checkbox
        label="Indeterminate Checkbox"
        isIndeterminate
        model="indeterminate"
      />
      <Checkbox label="Disabled Checkbox" isDisabled />
      <Checkbox
        label="Disabled Checked Checkbox"
        isDisabled
        model="disabled-checked"
      />
      <Checkbox
        label="Disabled Indeterminate Checkbox"
        isIndeterminate
        isDisabled
        model="indeterminate-disabled"
      />
      <Checkbox label="Checkbox with Help Text" helpText="Help Text Message" />
      <Checkbox label="Checkbox with Error" errorMessage="Error Message" />
    </FormProvider>
  );
};
```

## useForm (Recommended)

Using the `useForm` hook allows you to easily manage form state and validation.

```jsx live
() => {
  const form = useForm();

  const onSubmit = (data) => {
    console.log('submitted', data);
  };

  return (
    <FormProvider state={form} onSubmit={onSubmit}>
      <Checkbox label="Form Checkbox" model="checkbox" />
      <Button submit size="small" style={{ marginTop: 16 }}>
        Submit
      </Button>
    </FormProvider>
  );
};
```

## useState

Using the `useState` hook gets values from the component state.

```jsx live
() => {
  const [isChecked, setChecked] = useState(false);

  return (
    <Checkbox
      label="State Checkbox"
      isChecked={isChecked}
      onChange={setChecked}
    />
  );
};
```

## Align

The `align` prop determines which side the checkbox is on. The options are `left` or `right`.
When the align prop is set to `right`, the label stays on the left and only the checkbox is set
to the rightmost edge of it's container. The default is `left`.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      leftAlignedCheckbox: true,
      rightAlignedCheckbox: true,
    },
  });

  return (
    <FormProvider state={form}>
      <Checkbox label="Left Align" align="left" model="leftAlignedCheckbox" />
      <Checkbox
        label="Right Align"
        align="right"
        model="rightAlignedCheckbox"
      />
    </FormProvider>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Checkbox"
  rows={[
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired every time the value changes',
    },
    {
      name: 'value',
      type: 'string',
      description: 'Value of the checkbox',
    },
    {
      name: 'isChecked',
      type: 'boolean',
      description: 'Flag to turn checkbox on or off',
      default: 'false',
    },
    {
      name: 'label',
      type: 'string',
      description: 'Label of the checkbox',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description:
        'Flag to enable/disable the checkbox. If true, the checkbox will be disabled',
      default: 'false',
    },
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the checkbox component',
    },
    {
      name: 'isIndeterminate',
      type: 'boolean',
      description: 'Set the checkbox to indeterminate or not',
      default: 'false',
    },
    {
      name: 'hideLabel',
      type: 'boolean',
      description: 'Flag to hide label',
      default: 'false',
    },
    {
      name: 'helpText',
      type: 'string',
      description: 'Set the subtext displayed below the checkbox',
    },
    {
      name: 'errorMessage',
      type: 'string',
      description: 'Set the error message displayed below the checkbox',
    },
    {
      name: 'align',
      type: '"left" | "right',
      description: 'The side the checkbox should be aligned to',
      default: 'left',
    },
  ]}
/>

<Docs.ClassesTable
  of="Checkbox"
  rows={[
    {
      name: 'checkbox-root',
      description: 'Checkbox root element',
    },
    {
      name: 'checkbox',
      description: 'Checkbox element',
    },
    {
      name: 'checkbox-help-text',
      description: 'Text element below the label',
    },
    {
      name: 'checkbox-error-icon',
      description: 'Error icon element',
    },
    {
      name: 'checkbox-error-container',
      description: 'Checkbox error container element',
    },
    {
      name: 'checkbox-error-label',
      description: 'Text element in the error container',
    },
    {
      name: 'checkbox-label',
      description: 'Label element',
    },
    {
      name: 'checkbox-label-container',
      description: 'Label container',
    },
  ]}
/>

</Tab>

<Tab label="Accessibility">

## Dynamic Type

The checkbox icon scales up to 3XL, while any text passed in scales according to Abyss dynamic type standards.

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="Checkbox" keys={['checkbox']} />

</Tab>
</Tabs>

---
id: checkbox-group
category: Forms
title: CheckboxGroup
description: Allows a user to select one or multiple items from a list.
---

<Tabs>

<Tab label="Overview">

```jsx
import { CheckboxGroup } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'CheckboxGroup',
  inputs: [
    {
      prop: 'align',
      type: 'select',
      options: [
        { label: 'left', value: 'left' },
        { label: 'right', value: 'right' },
      ],
    },
    {
      prop: 'isDisabled',
      type: 'boolean',
    },
  ]
}

() => {
  const [value, setValue] = useState([]);

  const handlePress = () => {
    console.log(value);
  };
  return (
    <Layout.Stack grow>
      <CheckboxGroup align="left" value={value} onChange={(value) => setValue(value)}>
        <CheckboxGroup.SelectAll  label='Select All'/>
        <Checkbox label="Option 1" value="one" />
        <Checkbox label="Option 2" value="two" />
        <Checkbox label="Option 3" value="three" />
        <Checkbox label="Option 4" value="four" />
        <Checkbox label="Option 5" value="five" />
      </CheckboxGroup>
      <Button size='small' onPress={handlePress}>Submit</Button>
    </Layout.Stack>
  );
};
```

## useForm (Recommended)

Using the `useForm` hook allows you to manage the state of the checkbox group more effectively, especially when dealing with forms.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      'checkbox-form': ['two'],
    },
  });

  const onSubmit = (data) => {
    console.log('submitted', data);
  };

  return (
    <FormProvider state={form} onSubmit={onSubmit}>
      <CheckboxGroup label="CheckboxGroup useForm" model="checkbox-form">
        <CheckboxGroup.SelectAll label="Select All" />
        <Checkbox label="Option 1" value="one" />
        <Checkbox label="Option 2" value="two" />
        <Checkbox label="Option 3" value="three" />
      </CheckboxGroup>
      <Button submit style={{ marginTop: 16 }}>
        Submit
      </Button>
    </FormProvider>
  );
};
```

## useState

Using the `useState` hook gets values from the component state.

```jsx live
() => {
  const [value, setValue] = useState(['two']);
  return (
    <CheckboxGroup align="left" value={value} onChange={setValue}>
      <CheckboxGroup.SelectAll label="Select All" />
      <Checkbox label="Option 1" value="one" />
      <Checkbox label="Option 2" value="two" />
      <Checkbox label="Option 3" value="three" />
    </CheckboxGroup>
  );
};
```

## Value

Checkboxes within a `CheckboxGroup` component require the `value` prop to be specified in order to function as part of the checkbox group.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <CheckboxGroup align="left" model="checkbox-form">
        <Checkbox label="Option 1" value="one" />
        <Checkbox label="Option 2" value="two" />
        <Checkbox label="Option 3" value="three" />
      </CheckboxGroup>
    </FormProvider>
  );
};
```

## Select All

Use the `CheckboxGroup.SelectAll` component to control the checked state for the entire group.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <CheckboxGroup align="left" model="checkbox-group-select-all">
        <CheckboxGroup.SelectAll label="Select All Options" />
        <Checkbox label="Option 1" value="1" />
        <Checkbox label="Option 2" value="2" />
        <Checkbox label="Option 3" value="3" />
      </CheckboxGroup>
    </FormProvider>
  );
};
```

## Disabled

Use the `isDisabled` prop to disable the entire group.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <CheckboxGroup isDisabled model="disabled-checkbox-group">
        <CheckboxGroup.SelectAll label="Select All" />
        <Checkbox label="Option 1" value="one" />
        <Checkbox label="Option 2" value="two" />
        <Checkbox label="Option 3" value="three" />
      </CheckboxGroup>
    </FormProvider>
  );
};
```

## Align

The `align` prop determines which side the checkbox is on for the entire group. The options are `left` or `right`.
When the align prop is set to `right`, the label stays on the left and only the checkbox is set
to the rightmost edge of it's container. The default is `left`.

```jsx live
() => {
  const form = useForm();
  const [align, setAlign] = useState(true);

  return (
    <FormProvider state={form}>
      <CheckboxGroup model="checkbox-form" align={align ? 'left' : 'right'}>
        <CheckboxGroup.SelectAll label="Select All" />
        <Checkbox label="Option 1" value="one" />
        <Checkbox label="Option 2" value="two" />
        <Checkbox label="Option 3" value="three" />
      </CheckboxGroup>
      <Button onPress={() => setAlign(!align)} size={'small'}>
        Toggle Align
      </Button>
    </FormProvider>
  );
};
```

## Multi Select Card

A child component can be used instead of a traditional checkbox label. The `label` prop is removed and a component is added as a child of each checkbox.

See [Card](/mobile/ui/card/#cardsection) for more details on the Card used below.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <View style={{ width: 400 }}>
        <CheckboxGroup align="left" model="claims">
          <CheckboxGroup.SelectAll>
            <Card>
              <Card.Section>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}
                >
                  <Text fontWeight="700">Select All Claims (4)</Text>
                  <Text fontWeight="700">$278.89</Text>
                </View>
              </Card.Section>
            </Card>
          </CheckboxGroup.SelectAll>
          <Checkbox value="one">
            <Card>
              <Card.Section>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}
                >
                  <Text fontWeight="700">Dr. Sharon Tang</Text>
                  <Text fontWeight="700">$93.22</Text>
                </View>
                <Text size="$core.font-size.p.60">Date of Service 5/11/23</Text>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'left',
                  }}
                >
                  <IconSymbol
                    icon="info"
                    variant="outlined"
                    color="$semantic.color.icon.status.info"
                    size={16}
                  />
                  <Text
                    size="$core.font-size.p.60"
                    color="$semantic.color.text.label.status.info"
                  >
                    Claim Information
                  </Text>
                </View>
              </Card.Section>
            </Card>
          </Checkbox>
          <Checkbox value="two">
            <Card>
              <Card.Section>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}
                >
                  <Text fontWeight="700">Walgreens #927956</Text>
                  <Text fontWeight="700">$127.93</Text>
                </View>
                <Text size="$core.font-size.p.60">Date of Service 5/5/23</Text>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'left',
                  }}
                >
                  <IconSymbol
                    icon="info"
                    variant="outlined"
                    color="$semantic.color.icon.status.info"
                    size={16}
                  />
                  <Text
                    size="$core.font-size.p.60"
                    color="$semantic.color.text.label.status.info"
                  >
                    Claim Information
                  </Text>
                </View>
              </Card.Section>
            </Card>
          </Checkbox>
          <Checkbox value="three">
            <Card>
              <Card.Section>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}
                >
                  <Text fontWeight="700">Dr. Edward M Jenner</Text>
                  <Text fontWeight="700">$25.00</Text>
                </View>
                <Text size="$core.font-size.p.60">
                  Date of Service 10/30/22
                </Text>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'left',
                  }}
                >
                  <IconSymbol
                    icon="info"
                    variant="outlined"
                    color="$semantic.color.icon.status.info"
                    size={16}
                  />
                  <Text
                    size="$core.font-size.p.60"
                    color="$semantic.color.text.label.status.info"
                  >
                    Claim Information
                  </Text>
                </View>
              </Card.Section>
            </Card>
          </Checkbox>
          <Checkbox value="four">
            <Card>
              <Card.Section>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}
                >
                  <Text fontWeight="700">Odin Medical Group</Text>
                  <Text fontWeight="700">$32.74</Text>
                </View>
                <Text size="$core.font-size.p.60">Date of Service 12/9/22</Text>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'left',
                  }}
                >
                  <IconSymbol
                    icon="info"
                    variant="outlined"
                    color="$semantic.color.icon.status.info"
                    size={16}
                  />
                  <Text
                    size="$core.font-size.p.60"
                    color="$semantic.color.text.label.status.info"
                  >
                    Claim Information
                  </Text>
                </View>
              </Card.Section>
            </Card>
          </Checkbox>
        </CheckboxGroup>
      </View>
    </FormProvider>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="CheckboxGroup"
  rows={[
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired every time the value changes',
    },
    {
      name: 'value',
      type: 'array',
      description:
        'Array that holds the checkbox value when the isChecked prop set to true',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description:
        'Flag to enable/disable the checkboxes. If true, all checkboxes will be disabled',
    },
    {
      name: 'hideLabel',
      type: 'boolean',
      description: 'Flag to hide label',
    },
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the checkbox group component',
    },
    {
      name: 'align',
      type: '"left" | "right',
      description: 'The side the checkboxes in the group will be aligned to',
    },
  ]}
/>

<Docs.PropsTable
  of="CheckboxGroup.SelectAll"
  rows={[
    {
      name: 'label',
      type: 'string',
      description: 'Label of the SelectAll checkbox',
    },
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the SelectAll component',
    },
  ]}
  inherits={[{ name: 'Checkbox', link: '/mobile/ui/checkbox' }]}
/>

<Docs.ClassesTable
  of="CheckboxGroup.SelectAll"
  rows={[
    {
      name: 'checkbox-group-select-all-root',
      description: 'Select All checkbox root element',
    },
    {
      name: 'checkbox-group-select-all-checkbox',
      description: 'Select All checkbox element',
    },
  ]}
  inherits={[{ name: 'Checkbox', link: '/mobile/ui/checkbox' }]}
/>

</Tab>
</Tabs>

---
id: chip
category: Data Display
title: Chip
description: Chips are clickable, and used for filtering and selections.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=11953-60547&t=N5JdMpNlL65N19qO-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { Chip } from '@uhg-abyss/mobile';
```

```jsx sandbox
  {
    component: 'Chip',
    inputs: [
      {
        prop: 'children',
        type: 'string',
      },
      {
        prop: 'isDisabled',
        type: 'boolean',
      },
      {
        prop: 'isClosable',
        type: 'boolean',
      },
      {
        prop: 'isTag',
        type: 'boolean',
      },
            {
        prop: 'isChecked',
        type: 'boolean',
      },
    ],
  };

<Chip>Chip</Chip>;
```

## useState

Pass the value from the `useState` hook to the `isChecked` prop to set the checked state of the chip.

```jsx live
() => {
  const [isChecked, setIsChecked] = useState(false);
  return (
    <Layout.Stack>
      <Chip isChecked={isChecked} onChange={() => setIsChecked(!isChecked)}>
        Chip
      </Chip>
    </Layout.Stack>
  );
};
```

## Group

Group has three variants: `wrap`, `scroll` and `fit`. The `wrap` variant is the default.

### Wrap

Chips can be wrapped in a `Group`. When using this to group multiple chips together, a chip that is too long to stack horizontally wraps to the next line.
This variant allows any number of chips to be selected when each chip has an `isChecked` and `onChange`.

Alternatively, passing the state into the `Group` (and not individual chips) will allow only one chip to be selected at a time.

```jsx live
() => {
  const [isChecked, setIsChecked] = useState(false);
  const [isChecked2, setIsChecked2] = useState(false);
  const [isChecked3, setIsChecked3] = useState(false);
  const [isChecked4, setIsChecked4] = useState(false);

  return (
    <Chip.Group>
      <Chip isChecked={isChecked} onChange={() => setIsChecked(!isChecked)}>
        Default Chip
      </Chip>
      <Chip isChecked={isChecked2} onChange={() => setIsChecked2(!isChecked2)}>
        A long time ago in a galaxy far, far away
      </Chip>
      <Chip
        isChecked={isChecked3}
        onChange={() => setIsChecked3(!isChecked3)}
        icon={
          <IconSymbol
            icon="star"
            size={20}
            color="$semantic.color.icon.content.secondary"
            title="star"
            isScreenReadable
          />
        }
      >
        A long time ago in a galaxy far, far away
      </Chip>
      <Chip isChecked={isChecked4} onChange={() => setIsChecked4(!isChecked4)}>
        Chip
      </Chip>
    </Chip.Group>
  );
};
```

### Scroll

This variant has a filter button for selection and the chips scroll horizontally.
Only one chip can be selected in this group. The `heading` prop is used to display a heading on the bottom sheet.

```jsx live
() => {
  const [val, setVal] = useState('one');

  return (
    <Layout.Group shrink>
      <Chip.Group
        value={val}
        onChange={setVal}
        variant="scroll"
        heading="Example Scroll Variant"
      >
        <Chip value="one">Chip 1</Chip>
        <Chip value="two">Chip 2</Chip>
        <Chip value="three">Chip 3</Chip>
        <Chip value="four">Chip 4</Chip>
        <Chip value="five">Chip 5</Chip>
        <Chip value="six">Chip 6</Chip>
      </Chip.Group>
    </Layout.Group>
  );
};
```

### Fit

This variant does not scroll or have a filter button. The chips will fit the width of the parent container.

Like the wrap variant, multiple chips can be selected when each chip has an `isChecked` and `onChange`, and only one chip can be selected when the state is passed into the `Group` (as shown).

```jsx live
() => {
  const [val, setVal] = useState('one');

  return (
    <Chip.Group value={val} onChange={setVal} variant="fit">
      <Chip value="one">Chip 1</Chip>
      <Chip value="two">Chip 2</Chip>
      <Chip value="three">Chip 3</Chip>
    </Chip.Group>
  );
};
```

## Icons

Use the `icon` prop to pass in a specific Icon component. Icons should be 20px and given an accurate title to meet accessibility standards. Find further guidance on icons symbols in the [Icons Symbols Tab](/mobile/ui/icon-symbol/).

```jsx live
() => {
  const [isChecked, setIsChecked] = useState(false);
  return (
    <Chip
      isChecked={isChecked}
      onChange={() => setIsChecked(!isChecked)}
      icon={
        <IconSymbol
          icon="home"
          size={20}
          color="$semantic.color.icon.content.secondary"
          title="home"
          isScreenReadable
        />
      }
    >
      Chip
    </Chip>
  );
};
```

## Dismissible Chips

Use the `isClosable` prop with the `onClose` function to allow a chip to be dismissed. The checked and pressed states are not enabled with a dismissible chip.

```jsx live
() => {
  const [shouldShow, setShouldShow] = useState(true);
  return (
    <Layout.Stack>
      {shouldShow && (
        <Chip isClosable onClose={() => setShouldShow(false)}>
          Close Me
        </Chip>
      )}
    </Layout.Stack>
  );
};
```

## Disabled

Use the `isDisabled` prop to disable a chip.

```jsx live
<Chip
  icon={
    <IconSymbol
      icon="home"
      size={20}
      color="$semantic.color.icon.content.secondary"
      title="home"
      isScreenReadable
    />
  }
  isDisabled={true}
>
  Disabled Chip
</Chip>
```

## Tag

Use the `isTag` prop to create a non-clickable chip.

```jsx live
<Chip isTag={true}>Tag</Chip>
```

## Width

Chips do not wrap if the text gets longer than the width of the parent container. Instead, the text will truncate.

```jsx live
() => {
  const [isChecked, setIsChecked] = useState(false);
  return (
    <Box width="40%" color="$semantic.color.surface.container.secondary">
      <Chip
        isChecked={isChecked}
        onChange={() => setIsChecked(!isChecked)}
        icon={
          <IconSymbol
            icon="flight"
            size={20}
            color="$semantic.color.icon.content.secondary"
            title="plane"
            isScreenReadable
          />
        }
      >
        A long time ago in a galaxy far, far away
      </Chip>
    </Box>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Chip"
  rows={[
    {
      name: 'icon',
      type: 'node',
      description: 'Adds an icon to the Chip component',
    },
    {
      name: 'children',
      type: 'node',
      description: 'The text to be input into the Chip component',
    },
    {
      name: 'isClosable',
      type: 'boolean',
      description:
        'Adds a close icon to the Chip component. Use with the onClose function to dismiss the chip',
      default: 'false',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description: 'Disables a chip, making it unusable and un-clickable',
      default: 'false',
    },
    {
      name: 'isTag',
      type: 'boolean',
      description: 'Creates a tag. A smaller, non-clickable version of chip',
      default: 'false',
    },
    {
      name: 'isChecked',
      type: 'boolean',
      description: 'Flag to check the chip and enable selected border',
      default: 'false',
    },
    {
      name: 'onClose',
      type: 'function',
      description: 'Callback fired when the close button is pressed',
    },
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired when the chip is pressed',
    },
    {
      name: 'value',
      type: 'string',
      description: 'Value of the chip',
    },
  ]}
/>

<Docs.ClassesTable
  of="Chip"
  rows={[
    {
      name: 'chip-root',
      description: 'Chip root element',
    },
    {
      name: 'chip-label',
      description: 'Chip label element',
    },
    {
      name: 'chip-close-button',
      description: 'Close icon container ',
    },
    {
      name: 'chip-close-icon',
      description: 'Close icon',
    },
  ]}
/>

<Docs.PropsTable
  of="Chip.Group"
  rows={[
    {
      name: 'variant',
      type: 'string',
      description:
        'The variant of the Chip Group. Options are wrap, scroll, and fit',
    },
    {
      name: 'value',
      type: 'string',
      description: 'The value of the selected chip',
    },
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired when the chip is pressed',
    },
    {
      name: 'children',
      type: 'node',
      description: 'The chips to be input into the Chip Group component',
    },
    {
      name: 'heading',
      type: 'string',
      description:
        'The heading displayed on the bottom sheet in the scroll variant',
    },
  ]}
/>

<Docs.ClassesTable
  of="Chip.Group"
  rows={[
    {
      name: 'chip-group-root',
      description: 'Chip group root element',
    },
    {
      name: 'chip-group-tab-bar',
      description: 'Chip group tab bar element',
    },
    {
      name: 'chip-group-tab-bar-menu-button',
      description: 'Chip group tab bar menu button element',
    },
    {
      name: 'chip-group-tab-bar-menu-icon',
      description: 'Chip group tab bar menu icon element',
    },
    {
      name: 'chip-group-tab-bar-bottom-sheet',
      description: 'Chip group tab bar bottom sheet element',
    },
  ]}
/>

<Docs.TranslationTable of="Chip" rows={['Chip.remove', 'Chip.openMenu']} />

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="Chip" keys={['chip']} />

</Tab>

<Tab label="Migration">

<Docs.ComparisonTable of="Chip.Group" type="props" />

</Tab>
</Tabs>

---
id: coachmark
category: CTA
title: Coachmark
description: A temporal message that provides contextual information or help.
design: https://www.figma.com/design/5djnh49w0SBYAG5tFJifIG/branch/A6jVbwG9VlIxsupoiwvRjs/v1.72.0-App-Abyss-Global%E2%80%A8Component-Library?node-id=1360-50043&m=dev
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { Coachmark } from '@uhg-abyss/mobile';
```

```jsx sandbox
  {
  component: 'Coachmark',
  inputs: [
    {
        prop: 'offset',
        type: 'number',
    },
    {
        prop: 'heading',
        type: 'string',
    },
    {
        prop: 'children',
        type: 'string',
    },
    {
      prop: 'position',
      type: 'select',
      options: [
        { label: 'Above', value: 'above' },
        { label: 'Below', value: 'below' },
      ],
    },
    {
      prop: 'type',
      type: 'select',
      options: [
        { label: 'Dark', value: 'dark' },
        { label: 'Light', value: 'light' },
        { label: 'Light Border', value: 'light-border' },
      ],
      default:'light-border'
    },
    {
      prop: 'isVisible',
      type: 'boolean',
    },
    {
      prop: 'dismissible',
      type: 'boolean',
    },
  ]
}

<Coachmark
  offset={25}
  heading="Heading"
  position="below"
  type="light-border"
  isVisible
  dismissible
>
  Coachmark text
</Coachmark>
```

## Usage

Coachmarks always take the full width of the screen, should be placed with an 8px horizontal margin, and appear above or below the content it is pointing to. Content along the flat side should have a 16px margin from coachmark.

```jsx live
<Coachmark heading="Welcome">
  Coachmark text goes here, can be a 100 characters maximum and expands on no
  more than four lines
</Coachmark>
```

#### Coachmark Tour

For creating guided tours with multiple sequential coachmarks, use the [CoachmarkTour](./CoachmarkTour.mdx) component. CoachmarkTour extends Coachmark functionality while providing:

- **Automatic step management**: Handles navigation between multiple coachmarks
- **Built-in controls**: Provides Previous/Next buttons and step counting
- **Coachmark positioning**: Calculates the best position and offset for each coachmark based on available screen space
- **Tour state management**: Manages the overall tour lifecycle (start, skip, complete)

Use Coachmark for standalone contextual help and CoachmarkTour for multi-step guided experiences.

## Position

Use the `position` prop to display the notch either above or below the coachmark. The default is `"above"`.

```jsx live
<Layout.Stack grow space={0}>
  <Coachmark dismissible={false} position="above" heading="Above Position">
    This coachmark appears above the content pointing down
  </Coachmark>

  <Card padding={32}>
    <Text textAlign="center">Content</Text>
  </Card>

  <Coachmark dismissible={false} position="below" heading="Below Position">
    This coachmark appears below the content pointing up
  </Coachmark>
</Layout.Stack>
```

## Type Variants

Use the `type` prop to change the visual appearance of the coachmark. Available options are `"dark"`, `"light"`, and `"light-border"`. The default is `"light-border"`.

```jsx live
<Layout.Stack grow space={8}>
  <Coachmark type="dark" heading="Dark Type">
    Dark coachmark with white text
  </Coachmark>
  <Coachmark type="light" heading="Light Type">
    Light coachmark with dark text
  </Coachmark>
  <Coachmark type="light-border" heading="Light with Border">
    Light coachmark with dark text and visible border
  </Coachmark>
</Layout.Stack>
```

## Offset

Use the `offset` prop to change the horizontal position of the notch. It is determined as a percent from the left edge of the coachmark. The default is `50`.

```jsx live
() => {
  const [offset, setOffset] = useState(0);

  return (
    <Layout.Stack grow space={0}>
      <Coachmark
        heading={`Custom Offset: ${offset}%`}
        offset={offset}
        dismissible={false}
      >
        The notch can be adjusted to point to specific content. 0 sets the notch
        20px from the left and 100 sets the notch 20px from the right.
      </Coachmark>
      <SegmentedControls value={offset} onChange={setOffset}>
        <SegmentedControls.Tab label="0" value={0} />
        <SegmentedControls.Tab label="25" value={25} />
        <SegmentedControls.Tab label="50" value={50} />
        <SegmentedControls.Tab label="75" value={75} />
        <SegmentedControls.Tab label="100" value={100} />
      </SegmentedControls>
    </Layout.Stack>
  );
};
```

## Heading and Content

The Coachmark supports both a heading and body content. Use the `heading` prop for the title and pass the body content as `children`.

```jsx live
<Coachmark heading="Feature Introduction" type="light-border">
  This is the body content that provides additional details about the feature
  being highlighted.
</Coachmark>
```

## Footer Content

Use the `footer` prop to add custom footer content.

**Note:** For guided tours with multiple coachmarks, consider using the [CoachmarkTour component](./CoachmarkTour.mdx) which provides built-in navigation controls and step management.

```jsx live
() => {
  const [currentStep, setCurrentStep] = useState(1);

  const handleNext = () => {
    setCurrentStep(currentStep + 1);
  };
  const handlePrev = () => {
    setCurrentStep(currentStep - 1);
  };

  return (
    <Layout.Stack grow space={0}>
      <Coachmark
        isVisible={currentStep === 1}
        heading="Step 1: This coachmark includes footer navigation."
        position="above"
        dismissible={false}
        footer={
          <Coachmark.Footer
            currentStep={currentStep}
            totalSteps={3}
            onNext={() => handleNext()}
            onPrevious={() => handlePrev()}
            onComplete={() => setCurrentStep(1)}
          />
        }
      />

      <Card padding={16}>
        <Heading>Content Card 1</Heading>
      </Card>
      <Layout.Space />
      <Card padding={16}>
        <Heading>Content Card 2</Heading>
        <Coachmark
          heading={`Step ${currentStep}`}
          offset={currentStep === 2 ? 20 : 80}
          isVisible={currentStep !== 1}
          dismissible={currentStep === 3}
          footer={
            <Coachmark.Footer
              currentStep={currentStep}
              totalSteps={3}
              onNext={() => handleNext()}
              onPrevious={() => handlePrev()}
              onComplete={() => setCurrentStep(1)}
            />
          }
        >
          {`This coachmark is inside Content Card and is currently on step ${currentStep}.`}
        </Coachmark>
        <Layout.Group alignLayout="around" padding={16}>
          <Alert
            title="Card not activated!"
            description="Error alert description"
            variant="error"
            isCloseable={false}
          />
          <Alert
            title="Card activated!"
            description="Success alert description"
            isCloseable={false}
          />
        </Layout.Group>
      </Card>
    </Layout.Stack>
  );
};
```

## Dismissible

Use the `dismissible` prop to control whether the close button is shown. Set to `false` to hide the close button for non-dismissible coachmarks.

```jsx live
<>
  <Coachmark heading="Important Notice" type="dark" dismissible={false}>
    This coachmark cannot be dismissed by the user.
  </Coachmark>
  <Coachmark heading="Less Important Notice">
    This coachmark can be dismissed by the user.
  </Coachmark>
</>
```

## onClose

Use the `onClose` prop to handle the action when the close button is pressed. Built into Coachmark is a fade out animation.

```jsx live
() => {
  const [showCoachmark, setShowCoachmark] = useState(true);
  const handleClose = () => {
    setShowCoachmark(false);
    console.log('Coachmark closed');
  };
  return (
    <Layout.Stack grow>
      <Card
        padding={16}
        style={{
          alignItems: 'center',
        }}
      >
        <Coachmark
          offset={50}
          isVisible={showCoachmark}
          onClose={handleClose}
          heading="Closeable Coachmark"
        >
          Press the close button for coachmark to fade out.
        </Coachmark>
        <Button
          size="small"
          isDisabled={showCoachmark}
          onPress={() => setShowCoachmark(true)}
        >
          Show Coachmark
        </Button>
      </Card>
    </Layout.Stack>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Coachmark"
  rows={[
    {
      name: 'heading',
      type: 'string',
      description: 'The title or heading content of the coachmark',
    },
    {
      name: 'children',
      type: 'string | React.ReactNode',
      description: 'The text content or paragraph of the coachmark',
    },
    {
      name: 'position',
      type: '"above" | "below"',
      description: 'Places the notch above or below the coachmark',
      default: 'below',
    },
    {
      name: 'type',
      type: '"dark" | "light" | "light-border"',
      description: 'The visual variant of the coachmark',
      default: 'light',
    },
    {
      name: 'offset',
      type: 'number | string',
      description:
        'The horizontal position of the notch. Determined as a percent from the left edge of the coachmark component',
      default: 50,
    },
    {
      name: 'onClose',
      type: 'function',
      description: 'Callback fired when the close button is pressed',
    },
    {
      name: 'isVisible',
      type: 'boolean',
      description: 'Flag to show or hide the coachmark',
      default: true,
    },
    {
      name: 'dismissible',
      type: 'boolean',
      description: 'Flag to show or hide the close button',
      default: true,
    },
    {
      name: 'footer',
      type: 'React.ReactNode',
      description: 'Footer content such as navigation buttons',
    },
  ]}
/>

<Docs.ClassesTable
  of="Coachmark"
  rows={[
    {
      name: 'coachmark-root',
      description: 'Coachmark root element',
    },
    {
      name: 'coachmark-content-wrapper',
      description: 'Wrapper for coachmark content',
    },
    {
      name: 'coachmark-text-wrapper',
      description: 'Wrapper for text content',
    },
    {
      name: 'coachmark-heading',
      description: 'Coachmark heading element',
    },
    {
      name: 'coachmark-paragraph',
      description: 'Coachmark paragraph content element',
    },
    {
      name: 'coachmark-close-button',
      description: 'Coachmark close button',
    },
    {
      name: 'coachmark-close-icon',
      description: 'Coachmark close icon',
    },
    {
      name: 'coachmark-notch',
      description: 'The pointer to content',
    },
  ]}
/>

<Docs.TranslationTable of="Coachmark" rows={['close']} />

</Tab>
<Tab label="Tokens">

<Docs.ComponentTokensTable of="Coachmark" keys={['coachmark']} />

</Tab>

<Tab label="Migration">

<Docs.ComparisonTable of="Coachmark" type="class" />

<Docs.ComparisonTable of="Coachmark" type="props" />

</Tab>
</Tabs>

---
id: coachmark-tour
category: CTA
title: CoachmarkTour
description: A guided tour system that displays contextual coachmarks to walk users through multiple steps of an interface.
design: https://www.figma.com/design/5djnh49w0SBYAG5tFJifIG/branch/A6jVbwG9VlIxsupoiwvRjs/v1.72.0-App-Abyss-Global%E2%80%A8Component-Library?node-id=1360-50043&m=dev
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { CoachmarkTour } from '@abyss/mobile';
```

## Basic Usage

The CoachmarkTour system consists of two main components: `CoachmarkTour` (the provider) and `CoachmarkTour.Step` (wrapper for target elements). The tour displays Coachmarks in sequence to guide users through your interface.

**Important:** The `children` prop in `CoachmarkTour.Step` is different from `Coachmark`'s `children` prop. In `CoachmarkTour.Step`, the `children` prop contains the target element to highlight, while the coachmark content should be passed via the `description` prop. This is unlike `Coachmark` where the `children` prop contains the coachmark content itself.

```jsx live
() => {
  const [isStarted, setIsStarted] = useState(false);

  return (
    <CoachmarkTour
      isStarted={isStarted}
      onSkip={() => setIsStarted(false)}
      onComplete={() => setIsStarted(false)}
    >
      <Layout.Stack space={16}>
        <Button isDisabled={isStarted} onPress={() => setIsStarted(true)}>
          Start Tour
        </Button>
        <Layout.Group>
          <CoachmarkTour.Step
            stepId={1}
            heading="Step Heading"
            description="This card demonstrates how coachmarks highlight specific content"
          >
            <Text>Coachmark Tour Target Content</Text>
          </CoachmarkTour.Step>
        </Layout.Group>
      </Layout.Stack>
    </CoachmarkTour>
  );
};
```

## Tour Navigation

This example demonstrates navigation controls, multiple steps, position control, and different coachmark types. Users can skip the tour at any time using the close button, and callbacks are provided for navigation events.

```jsx live
() => {
  const [isStarted, setIsStarted] = useState(false);
  const [tourType, setTourType] = useState('light-border');

  return (
    <CoachmarkTour
      type={tourType}
      isStarted={isStarted}
      onSkip={() => {
        console.log('Tour skipped');
        setIsStarted(false);
      }}
      onNext={(stepId) => console.log(`Moving to step ${stepId}`)}
      onPrevious={(stepId) => console.log(`Going back to step ${stepId}`)}
      onComplete={() => {
        console.log('Tour completed');
        setIsStarted(false);
      }}
    >
      <Layout.Stack space={16} grow>
        <SegmentedControls value={tourType} onChange={setTourType}>
          <SegmentedControls.Tab label="Light Border" value="light-border" />
          <SegmentedControls.Tab label="Light" value="light" />
          <SegmentedControls.Tab label="Dark" value="dark" />
        </SegmentedControls>

        <CoachmarkTour.Step
          stepId={1}
          heading="Tour Controls"
          description={`This ${tourType} tour uses the ${tourType} variant. Use the navigation buttons to move through steps.`}
        >
          <Button onPress={() => setIsStarted(true)} isDisabled={isStarted}>
            Start Tour
          </Button>
        </CoachmarkTour.Step>
        <CoachmarkTour.Step
          stepId={2}
          heading="Above Position"
          description="This coachmark appears above the target element"
          position="above"
        >
          <Card padding={16}>
            <Grid columns={3} span={1} space={12}>
              {Array.from({ length: 3 }).map((_, i) => {
                const stepId = i + 3;
                return (
                  <Grid.Col key={i}>
                    <CoachmarkTour.Step
                      key={stepId}
                      stepId={stepId}
                      heading={`Grid Item ${stepId - 2}`}
                      description="Each coachmark points to a different grid item, demonstrating automatic positioning."
                    >
                      <Card
                        style={{
                          padding: 12,
                          backgroundColor: `$semantic.color.surface.interactive.standards.rest.emphasis.${
                            stepId - 1
                          }`,
                          alignItems: 'center',
                        }}
                      >
                        <Text>Item {stepId - 2}</Text>
                      </Card>
                    </CoachmarkTour.Step>
                  </Grid.Col>
                );
              })}
            </Grid>
          </Card>
        </CoachmarkTour.Step>

        <CoachmarkTour.Step
          stepId={6}
          heading="Below Position"
          description="This final step demonstrates the below position and completes our tour."
          position="below"
        >
          <Card
            padding={16}
            style={{
              backgroundColor:
                '$semantic.color.surface.interactive.standards.rest.quaternary',
            }}
          >
            <Text>Step 6: Final Step (Below)</Text>
          </Card>
        </CoachmarkTour.Step>
      </Layout.Stack>
    </CoachmarkTour>
  );
};
```

## Step Ordering

Steps are displayed in the order of their `stepId` regardless of their DOM order, giving you full control over the tour flow.

```jsx live
() => {
  const [isStarted, setIsStarted] = useState(false);

  return (
    <CoachmarkTour
      isStarted={isStarted}
      onSkip={() => setIsStarted(false)}
      onComplete={() => setIsStarted(false)}
    >
      <Layout.Stack space={16}>
        <Button onPress={() => setIsStarted(true)}>Start Ordered Tour</Button>

        <CoachmarkTour.Step
          stepId={3}
          heading="Third Step"
          description="This appears first in the DOM but third in the tour"
        >
          <Card
            padding={16}
            style={{
              backgroundColor: '$semantic.color.surface.container.emphasis.2',
            }}
          >
            <Text>DOM Order: 1st, Tour Order: 3rd</Text>
          </Card>
        </CoachmarkTour.Step>

        <CoachmarkTour.Step
          stepId={1}
          heading="First Step"
          description="This appears second in the DOM but first in the tour"
        >
          <Card
            padding={16}
            style={{
              backgroundColor: '$semantic.color.surface.container.emphasis.3',
            }}
          >
            <Text>DOM Order: 2nd, Tour Order: 1st</Text>
          </Card>
        </CoachmarkTour.Step>

        <CoachmarkTour.Step
          stepId={2}
          heading="Second Step"
          description="This appears third in the DOM but second in the tour"
        >
          <Card
            padding={16}
            style={{
              backgroundColor: '$semantic.color.surface.container.emphasis.4',
            }}
          >
            <Text>DOM Order: 3rd, Tour Order: 2nd</Text>
          </Card>
        </CoachmarkTour.Step>
      </Layout.Stack>
    </CoachmarkTour>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="CoachmarkTour"
  rows={[
    {
      name: 'isStarted',
      type: 'boolean',
      description: 'Controls whether the tour is active',
      default: 'false',
    },
    {
      name: 'type',
      type: "'dark' | 'light' | 'light-border'",
      description:
        'Visual variant applied to all coachmarks in the tour. Options: dark, light, light-border',
      default: 'light-border',
    },
    {
      name: 'dismissible',
      type: 'boolean',
      description: 'Whether coachmarks can be dismissed with close button',
      default: 'true',
    },
    {
      name: 'position',
      type: "'above' | 'below'",
      description:
        'Default position for all coachmarks (can be overridden per step). Options: above, below',
    },
    {
      name: 'initialStep',
      type: 'number',
      description: 'The step to start the tour from',
      default: 1,
    },
    {
      name: 'onNext',
      type: 'function',
      description: 'Callback fired when user clicks Next button',
    },
    {
      name: 'onPrevious',
      type: 'function',
      description: 'Callback fired when user clicks Previous button',
    },
    {
      name: 'onComplete',
      type: 'function',
      description: 'Callback fired when tour is completed',
    },
    {
      name: 'onSkip',
      type: 'function',
      description: 'Callback fired when tour is skipped via close button',
    },
  ]}
/>

<Docs.PropsTable
  of="CoachmarkTour.Step"
  rows={[
    {
      name: 'stepId',
      type: 'number',
      description:
        'Unique identifier that determines the order of steps in the tour',
    },
    {
      name: 'heading',
      type: 'string',
      description: 'Title displayed in the coachmark',
    },
    {
      name: 'description',
      type: 'string | ReactNode',
      description: 'Content displayed in the coachmark body',
    },
    {
      name: 'position',
      type: "'above' | 'below'",
      description:
        'Preferred position for this step coachmark. Options: above, below',
    },
    {
      name: 'wrapperStyle',
      type: 'ViewStyle',
      description:
        'Style object applied to the wrapper around the target element',
    },
    {
      name: 'children',
      type: 'ReactElement',
      description:
        'The target element to highlight during this step (not the coachmark content)',
    },
  ]}
/>

<Docs.ClassesTable
  of="CoachmarkTour"
  rows={[
    {
      name: 'coachmark-tour-root',
      description: 'Root container for the tour',
    },
    {
      name: 'coachmark-tour-element-wrapper',
      description: 'Wrapper element around the target component',
    },
  ]}
/>

</Tab>
</Tabs>

---
id: container
category: Layout
title: Container
description: A responsive container component that adjusts padding based on screen size and safe area insets.
design: https://www.figma.com/design/pXUASUBRjlvl1ZEUVuqniE/Landscape-A11y?node-id=647-37364
---

<Tabs>

<Tab label="Overview">

```jsx
import { Container } from '@uhg-abyss/mobile';
```

The `Container` adjusts its padding based on the following rules:

- **Small Screens (< 480px):** Minimum padding of 16px or the safe area inset, whichever is larger.
- **Medium Screens (480px - 1023px):** Minimum padding of 44px or the safe area inset, whichever is larger.
- **Large Screens (> 1024px):** Padding is calculated dynamically based on the screen width and safe area insets.

## Usage

```jsx live
() => {
  return (
    <Container>
      <Grid columns={8} space={8}>
        {Array.from({ length: 24 }).map((span, index) => {
          return (
            <Grid.Col key={index} span={1}>
              <Box
                width="100%"
                color="$semantic.color.surface.container.primary"
              />
            </Grid.Col>
          );
        })}
      </Grid>
    </Container>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Container"
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'Content to be rendered inside the container.',
    },
  ]}
/>

</Tab>
</Tabs>

---
id: date-input
category: Forms
title: DateInput
description: Capture date input from user.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=18955-105856&t=YLpsLvAcbJ0Le6G5-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { DateInput } from '@uhg-abyss/mobile';
```

Important Note: The scrolling picker portion of this component is currently NOT accessible. The input box is accessible and can be used to enter a date or time with the keyboard.
When a screen reader is active, the button to activate the picker will be hidden.

## Usage

The `DateInput` component allows users to select a date or time from a picker. The picker will display a calendar for date selection and a time picker for time selection.
The time picker is an internal component, but [Calendar](/mobile/ui/calendar) is a separate component that can be used independently.

### Keyboard Entry

Users can enter the date or time with the native keyboard by pressing the input box. The date or time entered can be read from the `value` prop. Use the `onSubmit` prop to handle the action when the submit key is pressed.
The date input will not accept an entry if it is not in the format of `MM/DD/YYYY` with leading zeros. The time input will not accept an entry if it is not in 12-hour `hh:mm AM/PM` format with leading zeros.

## useState

The `useState` hook gets values from the component state. A date value is required and will be displayed in the input box and as the selected date or time on the picker.

```jsx live
() => {
  const [date, setDate] = useState(new Date());

  return (
    <DateInput
      mode="date"
      label="Select a Date"
      value={date}
      onChange={setDate}
    />
  );
};
```

## Mode

Use the `mode` prop to define the type of picker. The default mode is set to `"date"`

### Date

```jsx live
() => {
  const [date, setDate] = useState(new Date());

  return (
    <DateInput
      mode="date"
      label="Select a Date"
      value={date}
      onChange={setDate}
    />
  );
};
```

### Time

```jsx live
() => {
  const [date, setDate] = useState(new Date());

  return (
    <DateInput
      mode="time"
      label="Select a Date"
      value={date}
      onChange={setDate}
    />
  );
};
```

## Label

Use the `label` prop to display a label above the input menu.

```jsx live
() => {
  const [date, setDate] = useState(new Date());

  return (
    <DateInput
      mode="date"
      label="Enter your birthday: "
      value={date}
      onChange={setDate}
    />
  );
};
```

## Help Content

The `helpContent` prop is used to display a help icon in the top right of the container, which will display the provided content in a BottomSheet when pressed.

```jsx live
() => {
  const [date, setDate] = useState(new Date());

  return (
    <DateInput
      mode="date"
      label="Select a Date"
      value={date}
      onChange={setDate}
      helpContent="This is some text used to explain something to the user, but is too long to be hint text."
    />
  );
};
```

## Required

Use the `isRequired` prop to display an asterisk next to the label.

```jsx live
() => {
  const [date, setDate] = useState(new Date());

  return (
    <DateInput
      mode="date"
      label="Select a Date"
      value={date}
      onChange={setDate}
      isRequired
    />
  );
};
```

## Disabled

Set the `isDisabled` prop to `true` to disable the date picker.

```jsx live
() => {
  const [date, setDate] = useState(new Date());

  return (
    <DateInput
      mode="date"
      label="Select a Date"
      value={date}
      onChange={setDate}
      isDisabled
    />
  );
};
```

## Messages

Use the `errorMessage` and `successMessage` props to display a custom error or success message below the menu.

```jsx live
() => {
  const [date, setDate] = useState(new Date());
  const errorMessage = useRef(true);
  const successMessage = useRef(false);

  const handleChange = (newDate) => {
    if (newDate) {
      errorMessage.current = false;
      successMessage.current = true;
    } else {
      errorMessage.current = true;
      successMessage.current = false;
    }
    setDate(newDate);
  };
  return (
    <DateInput
      mode="date"
      label="Select a Date"
      isRequired
      successMessage={successMessage.current ? 'great pick' : null}
      errorMessage={errorMessage.current ? 'please select a date' : null}
      value={date}
      onChange={handleChange}
    />
  );
};
```

## Excluded Dates

To exclude dates use the `excludeDate` prop. Set a function that receives date as an argument and returns true if date should be disabled. For example, to disable weekends, check if the day is 0 or 6.

```jsx live
() => {
  const [date, setDate] = useState(new Date());

  return (
    <DateInput
      mode="date"
      label="Select a Date"
      value={date}
      onChange={setDate}
      excludeDate={(date) => {
        return date.getDay() === 0 || date.getDay() === 6;
      }}
    />
  );
};
```

## Min/Max Date

### Date

Use the `minimumDate` and `maximumDate` props to set the min and max dates in the Calendar dropdown.

```jsx live
() => {
  const [date, setDate] = useState(new Date());
  const minDate = new Date();
  const maxDate = new Date();
  minDate.setFullYear(minDate.getFullYear() - 1);
  maxDate.setFullYear(maxDate.getFullYear() + 1);

  return (
    <DateInput
      mode="date"
      label="Select a Date"
      value={date}
      onChange={setDate}
      minimumDate={minDate}
      maximumDate={maxDate}
    />
  );
};
```

### Time

Use the `minimumDate` and `maximumDate` props to set the min and max times in the Time dropdown.

```jsx live
() => {
  const [date, setDate] = useState(new Date());
  const minDate = new Date();
  const maxDate = new Date();
  minDate.setHours(7);
  maxDate.setHours(19);

  return (
    <DateInput
      mode="time"
      label="Select a Time"
      value={date}
      onChange={setDate}
      minimumDate={minDate}
      maximumDate={maxDate}
    />
  );
};
```

## onInvalidEntry

Use the `onInvalidEntry` prop to handle the date validation. The function returns an object
`{ value: Date, input: string, code: number, message: string }` where `value` is the Date instance of the user's attempted entry,
`input` is the string submitted by the user, `code` indicates a custom code that references a specific error and
`message` describes the error.
The explanation of `code` is noted below:

- 0 - Indicates the input date is invalid.
- 1 - Indicates the input is before the minimum date.
- 2 - Indicates the input is after the minimum date.
- 3 - Indicates the input is a disabled date.

```jsx live
() => {
  const setFocus = useSetFocus();
  const inputRef = useRef();
  const [date, setDate] = useState(new Date());
  const [dateMessage, setDateMessage] = useState({
    success: '',
    error: '',
  });
  const minimumDate = new Date(2024, 0, 1);
  const maximumDate = new Date(2024, 2, 31);

  const handleInvalidEntry = ({ code, message }) => {
    setFocus(inputRef);
    if (code === 0) {
      setDateMessage({
        error: message,
        success: '',
      });
    } else if (code === 1) {
      setDateMessage({
        error: `${message}: ${minimumDate.toDateString()}`,
        success: '',
      });
    } else if (code === 2) {
      setDateMessage({
        error: `${message}: ${maximumDate.toDateString()}`,
        success: '',
      });
    } else if (code === 3) {
      setDateMessage({
        error: message,
        success: '',
      });
    }
  };
  return (
    <DateInput
      label="Date Input"
      ref={inputRef}
      successMessage={dateMessage.success}
      errorMessage={dateMessage.error}
      minimumDate={minimumDate}
      maximumDate={maximumDate}
      value={date}
      onChange={setDate}
      onInvalidEntry={handleInvalidEntry}
      mode="date"
      excludeDate={(date) => {
        return date.getDay() === 6;
      }}
    />
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="DateInput"
  rows={[
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired every time the value changes',
    },
    {
      name: 'onInvalidEntry',
      type: 'function',
      description:
        'Callback fired on date entry validation. Returns the entered date value',
    },
    {
      name: 'value',
      type: 'Date',
      description: 'Value of the date input',
    },
    {
      name: 'maximumDate',
      type: 'Date',
      description: 'Specifies the maximum selectable day by a user',
    },
    {
      name: 'minimumDate',
      type: 'Date',
      description: 'Specifies the minimum selectable day by a user',
    },
    {
      name: 'mode',
      type: 'date | time',
      default: 'date',
      description:
        'Sets the mode of the date input to capture date or time entry',
    },
    {
      name: 'label',
      type: 'string',
      description: 'Label for date or time input field',
    },
    {
      name: 'errorMessage',
      type: 'string',
      description:
        'Sets the error message to be displayed below the date input field',
    },
    {
      name: 'successMessage',
      type: 'string',
      description:
        'Sets the success message to be displayed below the date input field',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      default: 'false',
      description:
        'Flag to enable/disable the picker. If true, the picker will be disabled',
    },
    {
      name: 'isRequired',
      type: 'boolean',
      description:
        'Visual indicator that a selection is required. If true, an asterisk will be displayed next to the label',
    },
    {
      name: 'helpContent',
      type: 'string | ReactNode',
      description:
        'When defined, displays a help icon that can be tapped to view the provided content in a modal screen',
    },
    {
      name: 'helpButtonAccessibilityLabel',
      type: 'string',
      description: 'Sets the accessibility label for the help button',
    },
    {
      name: 'excludeDate',
      type: 'Function',
      description: 'Callback fired to exclude dates from the calendar',
    },
  ]}
/>

<Docs.ClassesTable
  of="DateInput"
  rows={[
    {
      name: 'date-input-root',
      description: 'Root element',
    },
    {
      name: 'date-input-header',
      description: 'Header element',
    },
    {
      name: 'date-input-label',
      description: 'Label element',
    },
    {
      name: 'date-input',
      description: 'Date input element',
    },
    {
      name: 'date-input-hint-text',
      description: 'Hint text element',
    },
    {
      name: 'date-input-format-text',
      description: 'Format text element',
    },
    {
      name: 'date-input-submit-button',
      description: 'Submit button element',
    },
    {
      name: 'date-input-icon-button',
      description: 'The date or time picker button',
    },
    {
      name: 'date-input-icon',
      description: 'The date or time picker icon',
    },
    {
      name: 'date-input-message',
      description: 'Message element',
    },
    {
      name: 'date-input-bottom-sheet',
      description: 'Bottom sheet element',
    },
    {
      name: 'date-input-help-button',
      description: 'Help button',
    },
    {
      name: 'date-input-help-modal',
      description: 'Help modal',
    },
    {
      name: 'input-help-icon',
      description: 'Help icon element',
    },
    {
      name: 'input-help-modal-footer',
      description: 'Help modal footer',
    },
    {
      name: 'input-help-modal-close-button',
      description: 'Help modal close button',
    },
    {
      name: 'input-message-icon',
      description: 'Message icon',
    },
    {
      name: 'input-message-text',
      description: 'Message text',
    },
    {
      name: 'date-input-calendar',
      description: 'Calendar',
    },
    {
      name: 'date-input-time-picker',
      description: 'Time picker',
    },
  ]}
  inherits={[{ name: 'Calendar', link: '/mobile/ui/calendar' }]}
/>

<Docs.TranslationTable
  of="DateInput"
  rows={[
    'help',
    'close',
    'error',
    'success',
    'selected',
    'DateInput.selectDate',
    'DateInput.selectTime',
    'TimePicker.hours',
    'TimePicker.minutes',
    'TimePicker.AM',
    'TimePicker.PM',
    'Calendar.prevMonth',
    'Calendar.nextMonth',
    'Calendar.year',
    'Calendar.today',
    'Calendar.inProgress',
  ]}
/>

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable
  of="DateInput"
  keys={['input-header', 'input-container', 'input-message', 'input-field']}
/>

</Tab>
</Tabs>

---
id: default-props-provider
category: Providers
title: DefaultPropsProvider
description: An Abyss component that provides default props to all its child components.
---

```jsx
import { DefaultPropsProvider } from '@uhg-abyss/mobile/ui/DefaultPropsProvider';
```

```jsx render
<Alert
  title="Note:"
  description="This provider only applies to components from the V2 suite and those without a newer version. It will not affect V1 components."
  variant="info"
  isCloseable={false}
/>
```

## Overview

`DefaultPropsProvider` lets you set default props for multiple components in one place. This helps keep your app consistent and reduces repeated code.

```jsx
<DefaultPropsProvider
  components={{
    [componentName]: {
      // ...default props for the component
    },
    // Example:
    Button: {
      variant: 'destructive',
    },
  }}
>
  {/* ...children */}
</DefaultPropsProvider>
```

## How it Works

The provider uses React Context to pass default props down to child components. Each component uses the `useDefaultProps` hook internally to merge the provider's defaults with its own props, with component-specific props taking precedence.

Prop Priority (highest to lowest):

- Props passed directly to the component
- Default props from DefaultPropsProvider
- Component's built-in default props

## Opting Out of Defaults

To opt out of the defaults, you can set the `disableDefaultProviderProps` prop to `true` on the component. This will prevent the component from inheriting any default props set by the provider.

## Button

```jsx sandbox
<DefaultPropsProvider
  components={{
    Button: {
      icon: 'star',
      iconPosition: 'leading',
      variant: 'destructive',
    },
  }}
>
  <Layout.Stack alignItems="center">
    <Button>Provider defaults</Button>
    <Button variant="neutral">Provider defaults with color override</Button>
    <Button disableDefaultProviderProps>Opt out of provider defaults</Button>
  </Layout.Stack>
</DefaultPropsProvider>
```

---
id: divider
category: Layout
title: Divider
description: Used to add visual or semantic separation between content.
design: https://www.figma.com/design/wCMblLsq9TxAQvKzY3EfCt/v1.61.0-App-Abyss-UHC-Component-Library?node-id=65731-2323&p=f&t=5FIU5wnT0w5NeJW3-0
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { Divider } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Divider',
  inputs: [
    {
      prop: 'orientation',
      type: 'select',
      options: [
        { label: 'horizontal', value: 'horizontal' },
        { label: 'vertical', value: 'vertical' },
      ],
      defaultValue: 'horizontal'
    },
    {
      prop: 'margin',
      type: 'string',
      default: '$semantic.spacing.sm',
    },
    {
      prop: 'height',
      type: 'string',
    },
    {
      prop: 'width',
      type: 'string',

    },
    {
      prop: 'color',
      type: 'string',
      defaultValue: '$divider.color.surface.thin'
    },
  ]
}

<View style={{ height: '320px' }}>
  <Divider />
</View>
```

## Usage

```jsx live
() => {
  const VerticalDivider = () => (
    <Divider
      orientation="vertical"
      height={20}
      color="$core.color.neutral.90"
    />
  );

  return (
    <Card
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '$semantic.color.surface.container.tertiary',
        height: '350px',
        padding: '50px',
      }}
    >
      <Layout.Stack alignItems="center" grow>
        <Heading offset={3}>Abyss Divider Component</Heading>
        <Divider orientation="horizontal" color="$core.color.neutral.90" />
        <Text>Add visual separation between content</Text>
        <Layout.Group>
          <Link size="small" href="#orientation">
            Orientation
          </Link>
          <VerticalDivider />
          <Link size="small" href="#width-and-height">
            Width
          </Link>
          <VerticalDivider />
          <Link size="small" href="#width-and-height">
            Height
          </Link>
          <VerticalDivider />
          <Link size="small" href="#color">
            Color
          </Link>
        </Layout.Group>
      </Layout.Stack>
    </Card>
  );
};
```

## Orientation

Use the `orientation` prop to adjust the orientation to either `horizontal` or `vertical`. The default setting is `horizontal`.

```jsx live
<Divider orientation="horizontal" />
```

```jsx live
<View style={{ height: '200px' }}>
  <Divider orientation="vertical" />
</View>
```

## Width, Height and Margin

Use the `width` and `height` props to set the desired sizing dimensions. Depending on the orientation, they default to
`2` or `100%` to create a thin line.

Use the `margin` prop to set the margin between the divider and the content it is separating. Default is `$semantic.spacing.sm`.

When `horizontal` orientation is selected the settings are applied as follows:

- `width` : determines the left-to-right length of the of the divider; default setting is `100%`
- `height` : determines the thickness of the divider; default setting is `2px`
- `margin`: sets the `marginVertical` property

```jsx live
<Divider orientation="horizontal" width={50} height={3} />
```

When `vertical` orientation is selected the settings are applied as follows:

- `width` : determines the thickness of the divider; default setting is `2px`
- `height` : determines the top-to-bottom length of the of the divider; default setting is `100%`
- `margin`: sets the `marginHorizontal` property

```jsx live
<View style={{ height: '50px' }}>
  <Divider orientation="vertical" height={50} width={3} />
</View>
```

## Color

Use the `color` property to set the color of the divider. The two color tokens fit Abyss design guidelines for thin and thick dividers respectively. The default is set to `thin`.

```jsx live
() => {
  return (
    <View>
      <Divider />
      <Divider color="$core.color.brand.100" />
      <Divider color="$divider.color.surface.thick" height={24} />
    </View>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Divider"
  rows={[
    {
      name: 'orientation',
      type: "'horizontal' | 'vertical'",
      description: 'The orientation of the divider',
      default: 'horizontal',
    },
    {
      name: 'color',
      type: 'string',
      description: 'The color of the divider',
      default: '$divider.color.surface.thin',
    },
    {
      name: 'margin',
      type: 'number | string',
      description: 'Margin between the divider and surrounding elements',
      default: '$semantic.spacing.sm',
    },
    {
      name: 'width',
      type: 'number | string',
      description: 'The width of the divider',
    },
    {
      name: 'height',
      type: 'number | string',
      description: 'The height of the divider',
    },
  ]}
/>

<Docs.ClassesTable
  of="Divider"
  rows={[
    {
      name: 'divider-root',
      description: 'Divider root element',
    },
  ]}
/>

</Tab>

<Tab label="Accessibility">

## Color

Decorative only component -- does not need to meet minimum contrast ratio.

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="Divider" keys={['divider']} />

</Tab>
</Tabs>

---
id: donut-chart
category: Data Viz
title: DonutChart
description: A graphical representation technique that displays data in a circular-shaped graph.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=20095-102112
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { DonutChart } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'DonutChart',
  inputs: [
    {
     prop: 'progress',
     type: 'number',
     defaultValue: 30
    },
    {
      prop: 'size',
      type: 'number',
      defaultValue: 40
    },
    {
      prop: 'animationDuration',
      type: 'number',
      defaultValue: 500
    },
    {
      prop: 'color',
      type: 'string',
      defaultValue: '$donut-chart.color.surface.container.green'
    },
  ],
}

<DonutChart />
```

## Progress

The `progress` prop determines how far the accumulator will move. The prop accepts numbers between `0` and `100`.
The default is `0`.

```jsx live
<Layout.Group grow wrap>
  <DonutChart progress={100} />
  <DonutChart progress={75} />
  <DonutChart progress={50} />
  <DonutChart progress={25} />
  <DonutChart progress={10} />
  <DonutChart progress={0} />
</Layout.Group>
```

## Animation Duration

The `animationDuration` prop is used to determine how long the donut chart takes to animate (milliseconds).
The default is `500`.

```jsx live
() => {
  const [animated, toggle] = useToggle(false);
  const progress = animated ? 40 : 0;
  return (
    <Layout.Group grow>
      <DonutChart progress={progress} animationDuration={500} />
      <DonutChart progress={progress} animationDuration={1000} />
      <DonutChart progress={progress} animationDuration={1500} />
      <DonutChart progress={progress} animationDuration={2500} />
      <DonutChart progress={progress} animationDuration={4000} />
      <Layout.Space space={20} />
      <Button onPress={toggle}>Start Animation</Button>
    </Layout.Group>
  );
};
```

## Color

The `color` prop is used to set the color for the donut chart.
The default is `$donut-chart.color.surface.container.green`.

```jsx live
<Layout.Group grow>
  <DonutChart progress={50} />
  <DonutChart
    progress={50}
    color="$donut-chart.color.surface.container.primary"
  />
  <DonutChart progress={50} color="$donut-chart.color.surface.container.info" />
  <Box color="$semantic.color.surface.container.primary">
    <DonutChart
      progress={50}
      color="$donut-chart.color.surface.container.white"
    />
  </Box>
</Layout.Group>
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="DonutChart"
  rows={[
    {
      name: 'progress',
      type: 'number',
      description:
        'The percentage of the bar that is filled. Value between 0 and 100',
      default: '0',
    },
    {
      name: 'size',
      type: 'number',
      description: 'Set the size of the donut chart',
      default: '40',
    },
    {
      name: 'animationDuration',
      type: 'number',
      description: 'Set the time it takes to animate the donut chart',
      default: '500',
    },
  ]}
/>

<Docs.ClassesTable
  of="DonutChart"
  rows={[
    {
      name: 'donut-chart-root',
      description: 'Donut chart root element',
    },
  ]}
/>

<Docs.TranslationTable of="DonutChart" rows={['DonutChart.percentage']} />

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="DonutChart" keys={['donut-chart']} />

</Tab>

<Tab label="Accessibility">

Due to React Native limitations, this component enables keyboard access despite not having an interactive element. This component requires an accessibility label for use with a screen reader, which enables keyboard focus.

</Tab>

<Tab label="Migration">

<Docs.ComparisonTable of="DonutChart" type="props" />

</Tab>
</Tabs>

---
id: expandable-text-block
category: Typography
title: ExpandableTextBlock
description: Displays a text block that can be expanded or collapsed.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/branch/1Uml7LO8NTEWoBUAl4DTaG/Abyss-Mobile?type=design&node-id=18955-106021&t=DfyeirEdeaLCVZP9-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { ExpandableTextBlock } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'ExpandableTextBlock',
  inputs: [
    {
      prop: 'children',
      type: 'string',
    },
    {
      prop: 'numberOfLines',
      type: 'number',
    },
    {
      prop: 'showLess',
      type: 'boolean',
    },

  ]
}

<ExpandableTextBlock>Lorem ipsum dolor sit amet,  adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et. Penatibus et magnis dis parturient montes. Diam in arcu cursus euismod quis viverra nibh cras pulvinar. Lorem mollis aliquam ut porttitor. </ExpandableTextBlock>
```

## Props and Usage

Children are required to use `ExpandableTextBlock`.

The `numberOfLines` prop is used to control the number of lines shown while `ExpandableTextBlock` is closed. The default for `numberOfLines` is 2.

The `showLess` prop is used to give the consumer the ability to shrink the `ExpandableTextBlock`. The default for `showLess` is `false`.

The `onLinkPress` prop can be used when pressing the more/less link needs a callback function. This can take in `expanded` as an argument.

```jsx live
() => {
  const lorum = `Lorem ipsum dolor sit amet, adipiscing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua. Consectetur adipiscing elit
      pellentesque habitant morbi tristique senectus et. Penatibus et magnis dis
      parturient montes. Diam in arcu cursus euismod quis viverra nibh cras
      pulvinar. Lorem mollis aliquam ut porttitor. Mauris augue neque gravida in
      fermentum et sollicitudin ac. Ultrices tincidunt arcu non sodales neque
      sodales ut etiam. In hac habitasse platea dictumst. In dictum non
      consectetur a erat nam at lectus. Sed nisi lacus sed viverra tellus in hac
      habitasse platea. Vitae ultricies leo integer malesuada nunc vel risus
      commodo viverra. Sed elementum tempus egestas sed sed risus pretium quam.
      Tellus id interdum velit laoreet id donec ultrices.`;

  return (
    <>
      <ExpandableTextBlock numberOfLines={3}>{lorum}</ExpandableTextBlock>
      <Layout.Space />
      <ExpandableTextBlock
        showLess
        numberOfLines={2}
        onLinkPress={({ expanded }) => {
          console.log(
            `The text block is now ${expanded ? 'expanded' : 'collapsed'}.`
          );
        }}
      >
        {lorum}
      </ExpandableTextBlock>
    </>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="ExpandableTextBlock"
  rows={[
    {
      name: 'children',
      type: 'string',
      description: 'The text to be displayed',
    },
    {
      name: 'onLinkPress',
      type: 'function',
      description: 'Callback fired when more/less button is pressed',
    },
    {
      name: 'numberOfLines',
      type: 'number',
      description: 'The number of lines to be displayed while collapsed',
    },
    {
      name: 'showLess',
      type: 'boolean',
      description: 'Flag to enable show less button while expanded',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Set the color of the text',
    },
    {
      name: 'size',
      type: 'number | string',
      description: 'Set the size of the text',
    },
    {
      name: 'transform',
      type: 'string',
      description:
        'Reformat the text by changing whether letters are capitalized or not',
    },
    {
      name: 'fontWeight',
      type: 'string',
      description: 'Set the font weight of text',
    },
    {
      name: 'textAlign',
      type: '"left" | "center" | "right"',
      description: 'Specifies text alignment',
    },
    {
      name: 'fontFamily',
      type: 'string',
      description: 'Set the font family of text',
    },
  ]}
/>

<Docs.ClassesTable
  of="ExpandableTextBlock"
  rows={[
    {
      name: 'expandable-text-block-root',
      description: 'Expandable text block main text',
    },
    {
      name: 'expandable-text-block-link',
      description: 'Expandable text block link text',
    },
  ]}
/>

<Docs.TranslationTable
  of="ExpandableTextBlock"
  rows={['ExpandableTextBlock.more', 'ExpandableTextBlock.less']}
/>

</Tab>

<Tab label='Accessibility'>

## Dynamic Type

Text scales according to Abyss standards. Note that the `numberOfLines` prop also scales according to the font scale.

## Screen Reader Support

Accessibility focus may need to be reset to the start of the text paragraph after the "more" button is pressed. This can be done within your `onLinkPress` function.

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable
  of="ExpandableTextBlock"
  keys={['expandable-text-block']}
/>

</Tab>
</Tabs>

---
id: filter-button
category: CTA
title: FilterButton
description: A button that serves as an entry point to filtering options.
design: https://www.figma.com/design/34gRQMq2NxFgeRynjqd24C/Documentation-%7C-UHC-Abyss-Mobile-App?node-id=104-1483&t=5zdX8H00uo6BCkNJ-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { FilterButton } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'FilterButton',
  inputs: [
    {
      prop: 'label',
      type: 'string',
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'primary', value: 'primary' },
        { label: 'secondary-a', value: 'secondary-a' },
        { label: 'secondary-b', value: 'secondary-b' },
      ],
    },
  ],
}

  <FilterButton variant="primary"/>

```

## Label

Use the `label` prop to set the label of the FilterButton. The label can be a filter count or 'filter'. If there is no count, the secondary variants should have the label of 'filter' passed in.

```jsx live
() => {
  const [value, setValue] = useState([]);
  return (
    <Layout.Group space={36}>
      <CheckboxGroup align="left" value={value} onChange={setValue}>
        <CheckboxGroup.SelectAll label="Select All" />
        <Checkbox label="Filter 1" value="one" />
        <Checkbox label="Filter 2" value="two" />
        <Checkbox label="Filter 3" value="three" />
      </CheckboxGroup>
      <Layout.Stack space={8} grow>
        <FilterButton
          variant="primary"
          label={value.length || undefined}
          onPress={() => {
            console.log('primary FilterButton pressed');
          }}
        />
        <FilterButton
          variant="secondary-a"
          label={value.length}
          onPress={() => {
            console.log('secondary-a FilterButton pressed');
          }}
        />
        <FilterButton
          variant="secondary-b"
          label={value.length}
          onPress={() => {
            console.log('secondary-b FilterButton pressed');
          }}
        />
      </Layout.Stack>
    </Layout.Group>
  );
};
```

## Variant

Use the `variant` prop to change the style of the `FilterButton`. You can set the value to `'primary'`, `'secondary-a'`, and `'secondary-b'`. Please follow design guidelines for each variants use case.

```jsx live
<Layout.Stack space={16} grow>
  <Text fontWeight="$core.font-weight.bold">Primary</Text>
  <AppBar
    title="Find a pharmacy"
    left={
      <IconSymbol
        icon="chevron_left"
        color="$semantic.color.icon.interactive.rest.primary-alt"
      />
    }
    right={
      <FilterButton
        variant="primary"
        onPress={() => {
          console.log('primary FilterButton pressed');
        }}
      />
    }
  />
  <Layout.Group>
    <Text fontWeight="$core.font-weight.bold">Secondary A</Text>
    <FilterButton
      variant="secondary-a"
      onPress={() => {
        console.log('secondary-a FilterButton pressed');
      }}
    />
  </Layout.Group>
  <Layout.Group>
    <Text fontWeight="$core.font-weight.bold">Secondary B</Text>
    <FilterButton
      variant="secondary-b"
      label="3"
      onPress={() => {
        console.log('secondary-b FilterButton pressed');
      }}
    />
  </Layout.Group>
</Layout.Stack>
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="FilterButton"
  rows={[
    {
      name: 'label',
      type: 'string | number',
      description: 'The label of the filter button component',
    },
    {
      name: 'variant',
      type: "'primary' | 'secondary-a' | 'secondary-b'",
      description: 'Change the filter button style',
      default: 'primary',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Callback fired when the filter button is pressed',
    },
  ]}
/>

<Docs.ClassesTable
  of="FilterButton"
  rows={[
    {
      name: 'filter-button-root',
      description: 'FilterButton root element',
    },
    {
      name: 'filter-button-label',
      description: 'FilterButton label element',
    },
    {
      name: 'filter-button-icon',
      description: 'FilterButton icon element',
    },
  ]}
/>

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="FilterButton" keys={['filter-button']} />

</Tab>
</Tabs>

---
id: font-scale
category: Layout
title: FontScale
description: Used to layout UI elements conditionally by font size.
---

<Tabs>

<Tab label="Overview">

```jsx
import { FontScale } from '@uhg-abyss/mobile';
```

## Usage

Used to conditionally display elements based on the device font scale. The condition is based on the `smallerThan` or `largerThan` props (or both of them at the same time).

```jsx live
<React.Fragment>
  <View style={{ flexDirection: 'row' }}>
    An icon will appear to the right when the window size is at least extra
    large:
    <FontScale largerThan="$xl">
      <IconSymbol icon="home" />
    </FontScale>
  </View>
  <View style={{ flexDirection: 'row' }}>
    An icon will appear to the right when the window size is less than extra
    large:
    <FontScale smallerThan="$xl">
      <IconSymbol icon="home" />
    </FontScale>
  </View>
  <View style={{ flexDirection: 'row' }}>
    An icon will appear to the right when the window size is between large and
    extra large:
    <FontScale smallerThan="$xl" largerThan="$lg">
      <IconSymbol icon="home" />
    </FontScale>
  </View>
</React.Fragment>
```

## Smaller Than

Use the `smallerThan` prop to specify a font scale that the device must be smaller than for the contents inside the FontScale to display.

```jsx live
<View style={{ flexDirection: 'row' }}>
  An icon will appear to the right when the font scale is less than 150%:
  <FontScale smallerThan={1.5}>
    <IconSymbol icon="home" />
  </FontScale>
</View>
```

## Larger Than

Use the `largerThan` prop to specify a font scale that the device must be greater than or equal to for the contents inside the FontScale to display.

```jsx live
<View style={{ flexDirection: 'row' }}>
  An icon will appear to the right when the window size is at greater than 90%:
  <FontScale largerThan={0.9}>
    <IconSymbol icon="home" />
  </FontScale>
</View>
```

## Preset Scale Values

As an alternative to using hardcoded number for `smallerThan` and `largerThan`, you can use preset scale values to ensure consistency across your app. (Scale values are taken from the app's theme configuration.) Possible values are `$xs`, `$sm`, `$md`, `$lg`, and `$xl`.

```jsx live
<View style={{ flexDirection: 'row' }}>
  An icon will appear to the right when the window size is at least the size of
  the $md breakpoint:
  <FontScale largerThan="$md">
    <IconSymbol icon="home" />
  </FontScale>
</View>
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="FontScale"
  rows={[
    {
      name: 'children',
      type: 'ReactNode',
      description: 'The element the group wraps',
    },
    {
      name: 'smallerThan',
      type: 'number | string',
      description:
        'The value that the font scale must be smaller than in order for the children to render',
    },
    {
      name: 'largerThan',
      type: 'number | string',
      description:
        'The value that the font scale must be greater than or equal to in order for the children to render',
    },
  ]}
/>

</Tab>
</Tabs>

---
id: footer
category: Content
title: Footer
description: A footer is a component that appears at the bottom of the screen.
design: https://www.figma.com/design/34gRQMq2NxFgeRynjqd24C/Documentation-%7C-UHC-Abyss-Mobile-App?node-id=104-2016&p=f&t=jLxszkqX1mcOC0WV-0
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { Footer } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Footer',
  inputs: [
    {
      prop: 'variant',
      type: 'select',
      defaultValue: 'nested',
      options: [
        { label: 'nested', value: 'nested' },
        { label: 'sticky', value: 'sticky' },
      ]
    },
    {
      prop: 'direction',
      type: 'select',
      defaultValue: 'vertical',
      options: [
        { label: 'vertical', value: 'vertical' },
        { label: 'horizontal', value: 'horizontal' },
      ]
    },
  ]
}

<Footer>
  <Button variant="brand">
    Agree
  </Button>
  <Button type='outline'>
    Disagree
  </Button>
</Footer>
```

## Variant

Use the `variant` prop to set the variant of the footer. The footer can be `'nested'` or `'sticky'`.

```jsx live
<Layout.Stack grow>
  <Heading offset={5}>Nested Footer</Heading>
  <Footer variant="nested">
    <Button variant="brand">Agree</Button>
    <Button type="outline">Disagree</Button>
  </Footer>
  <Heading offset={5}>Sticky Footer</Heading>
  <Footer variant="sticky">
    <Button variant="brand">Agree</Button>
    <Button type="outline">Disagree</Button>
  </Footer>
</Layout.Stack>
```

## Direction

Use the `direction` prop to set the direction of the items in the footer. The footer should house
up to three buttons in its vertically staked variant and up to two button in its horizontally stacked variant.

```jsx live
<Layout.Stack grow>
  <Heading offset={5}>Horizontal Footer</Heading>
  <Footer direction="horizontal">
    <Button variant="brand">Agree</Button>
    <Button type="outline">Disagree</Button>
  </Footer>
  <Heading offset={5}>Vertical Footer</Heading>
  <Footer direction="vertical">
    <Button variant="brand">Agree</Button>
    <Button type="outline">Disagree</Button>
  </Footer>
</Layout.Stack>
```

## Header

Use the `header` prop to set the header of the footer.

```jsx live
<Footer
  header={
    <Layout.Stack grow>
      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
        <Text>HSA Available Balance</Text>
        <Text>$1,763.20</Text>
      </View>
      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
        <Text fontWeight="$core.font-weight.bold">Payment Towards Balance</Text>
        <Text fontWeight="$core.font-weight.bold">$426.20</Text>
      </View>
    </Layout.Stack>
  }
>
  <Button variant="brand">Continue</Button>
</Footer>
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Footer"
  rows={[
    {
      name: 'children',
      type: 'React.ReactNode',
      description: 'The buttons to be placed inside the footer',
    },
    {
      name: 'direction',
      type: '"vertical" | "horizontal"',
      default: 'vertical',
      description: 'The direction the items in the footer should be laid out',
    },
    {
      name: 'header',
      type: 'React.ReactNode',
      description: 'Content placed at the top of the footer',
    },
    {
      name: 'variant',
      type: '"nested" | "sticky"',
      default: 'nested',
      description: 'The variant of the footer',
    },
  ]}
/>

<Docs.ClassesTable
  of="Footer"
  rows={[
    {
      name: 'footer-root',
      description: 'Footer root element',
    },
    {
      name: 'footer-header',
      description: 'Footer header wrapping element',
    },
  ]}
/>

</Tab>
</Tabs>

---
id: form-provider
category: Providers
title: FormProvider
description: Adds form functionality to Abyss inputs.
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { FormProvider } from '@uhg-abyss/mobile';
```

## Usage

Use `FormProvider` along with the [useForm](/mobile/hooks/use-form) hook in order to better manage your forms and fully utilize the capabilities of form management within Abyss. To achieve this you will need to wrap all form fields and the submission button with the `FormProvider` component and provide state through usage of `useForm`.

Please see examples below for additional props to pass into the `FormProvider` and go to [useForm](/mobile/hooks/use-form) for detailed documentation on how to configure your forms and take advantage of all the available features.

```jsx live
() => {
  const form = useForm();

  const onSubmit = (data) => {
    console.log('data', data);
    // Do something on submit
  };

  return (
    <FormProvider state={form} onSubmit={onSubmit}>
      <Checkbox
        label="I agree to the Terms and Conditions"
        model="accept-terms"
        validations={{ required: true }}
      />
      <Layout.Space />
      <SelectInput
        label="Select List Usage"
        model="select-list"
        placeholder="Select List Form Provider"
        options={[
          { label: 'Option 1', value: '1' },
          { label: 'Option 2', value: '2' },
          { label: 'Option 3', value: '3' },
        ]}
        validations={{ required: true }}
      />
      <Button submit size="small" style={{ marginTop: 8 }}>
        Submit
      </Button>
    </FormProvider>
  );
};
```

</Tab>
</Tabs>

---
id: global-app-process
category: Feedback
title: GlobalAppProcess
description: A type of notification message that communicates system status or background processes.
design: https://www.figma.com/design/34gRQMq2NxFgeRynjqd24C/Documentation-%7C-UHC-Abyss-Mobile?node-id=931-196076&node-type=frame&t=ti8wesv8clRgQn1m-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { GlobalAppProcess } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'GlobalAppProcess',
  inputs: [
    {
      prop: 'label',
      type: 'string',
    },
    {
      prop: 'actionText',
      type: 'string',
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'success', value: 'success' },
        { label: 'warning', value: 'warning' },
        { label: 'error', value: 'error' },
        { label: 'info', value: 'info' },
      ]
    },
    {
      prop: 'isVisible',
      type: 'boolean'
    },
  ]
}

<GlobalAppProcess label="Input Label Here" variant={'success'} isVisible={true}/>
```

## Label

Use the `label` prop to set the label of the global app process. Setting a label is required.

```jsx live
<GlobalAppProcess label="Loading" variant="info" />
```

## Variants

Use the `variant` property to set the color and icon of the `GlobalAppProcess`.
The options are `success`, `warning`, `error`, and `info`. All variants have the default icons shown below. `info` is the only variant with a built-in icon animation.

```jsx live
<Layout.Stack grow space={8}>
  <GlobalAppProcess label="Success" variant="success" />
  <GlobalAppProcess label="Warning" variant="warning" />
  <GlobalAppProcess label="Error" variant="error" />
  <GlobalAppProcess label="Info" variant="info" />
</Layout.Stack>
```

## Icon

Use the `icon` property to pass in a specific `Icon` component. Note that if the icon on the `info` variant is replaced it will not animate.

```jsx live
<GlobalAppProcess
  icon={<IconSymbol icon="search" color="white" size={20} />}
  label="Search Title"
  variant="info"
/>
```

## Button Text

Use the `actionText` prop to add a button to the right of the process banner. This will adjust the layout of the banner from centered to stretched.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(true);
  return (
    <GlobalAppProcess
      label="Location Confirmed"
      variant="success"
      isVisible={isVisible}
      actionText="close"
      onActionPress={() => {
        setIsVisible(false);
      }}
    />
  );
};
```

## onActionPress

Use the `onActionPress` property to handle the action when the button is pressed.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(true);
  return (
    <GlobalAppProcess
      variant="error"
      label="GlobalAppProcess With onActionPress Function"
      isVisible={isVisible}
      actionText="Press to close"
      onActionPress={() => {
        setIsVisible(false);
      }}
    />
  );
};
```

## isVisible

Use the `isVisible` prop to change the visibility of the process banner.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <Layout.Stack grow>
      <Button
        variant="secondary"
        size="small"
        onPress={() => {
          return setIsVisible(!isVisible);
        }}
        style={{ margin: '$semantic.spacing.sm' }}
      >
        Toggle Banners
      </Button>
      <GlobalAppProcess
        isVisible={isVisible}
        label="Warning"
        variant="warning"
      />
      <GlobalAppProcess isVisible={isVisible} label="Loading" variant="info" />
      <GlobalAppProcess isVisible={isVisible} variant="error" label="Error" />
      <GlobalAppProcess
        label="Success"
        variant="success"
        isVisible={isVisible}
      />
    </Layout.Stack>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="GlobalAppProcess"
  rows={[
    {
      name: 'label',
      type: 'string',
      description: 'Sets the label for the global app process',
    },
    {
      name: 'actionText',
      type: 'string',
      description: 'Sets the text for the global app process button',
    },
    {
      name: 'variant',
      default: 'success',
      type: "'info' | 'success' | 'error' | 'warning'",
      description: 'Change the global app process style',
    },
    {
      name: 'icon',
      type: 'ReactNode',
      description: 'Change the default icon',
    },
    {
      name: 'onActionPress',
      type: 'function',
      description: 'Callback fired when the button is pressed',
    },
    {
      name: 'isVisible',
      type: 'boolean',
      default: 'true',
      description: 'Flag to show or hide GlobalAppProcess',
    },
  ]}
/>

<Docs.ClassesTable
  of="GlobalAppProcess"
  inherits={[{ name: 'Link', link: '/mobile/ui/link' }]}
  rows={[
    {
      name: 'global-app-process-root',
      description: 'GlobalAppProcess root element',
    },
    {
      name: 'global-app-process-style-wrapper',
      description: 'GlobalAppProcess style container',
    },
    {
      name: 'global-app-process-label',
      description: 'GlobalAppProcess label element',
    },
    {
      name: 'global-app-process-button',
      description: 'GlobalAppProcess button element',
    },
    {
      name: 'global-app-process-icon',
      description: 'GlobalAppProcess icon element',
    },
  ]}
/>

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable
  of="GlobalAppProcess"
  keys={['global-app-process']}
/>

</Tab>
</Tabs>

---
id: grid
category: Layout
title: Grid
description: Provides a brief message about the app processes.
---

<Tabs>

<Tab label="Overview">

```jsx
import { Grid } from '@uhg-abyss/mobile';
```

## Space

Use the `space` prop to determine the amount of space between elements in the grid.

```jsx live
<Grid space="$semantic.spacing.xl">
  <Grid.Col span="50%">
    <Box color="$semantic.color.surface.accent.secondary" />
  </Grid.Col>
  <Grid.Col span="50%">
    <Box color="$semantic.color.surface.accent.secondary" />
  </Grid.Col>
  <Grid.Col span="33%">
    <Box color="$semantic.color.surface.accent.secondary" />
  </Grid.Col>
  <Grid.Col span="33%">
    <Box color="$semantic.color.surface.accent.secondary" />
  </Grid.Col>
  <Grid.Col span="33%">
    <Box color="$semantic.color.surface.accent.secondary" />
  </Grid.Col>
</Grid>
```

## Span

### Number

Regardless of viewport width, the span will remain the same for these columns. Change the span by using [column spans] of the parent container.

```jsx live
<Grid>
  <Grid.Col span={12}>
    <Box color="$semantic.color.surface.accent.secondary">
      <Heading offset={5}>12</Heading>
    </Box>
  </Grid.Col>
  <Grid.Col span={3}>
    <Box color="$semantic.color.surface.accent.secondary">
      <Heading offset={5}>3</Heading>
    </Box>
  </Grid.Col>
  <Grid.Col span={3}>
    <Box color="$semantic.color.surface.accent.secondary">
      <Heading offset={5}>3</Heading>
    </Box>
  </Grid.Col>
  <Grid.Col span={3}>
    <Box color="$semantic.color.surface.accent.secondary">
      <Heading offset={5}>3</Heading>
    </Box>
  </Grid.Col>
  <Grid.Col span={3}>
    <Box color="$semantic.color.surface.accent.secondary">
      <Heading offset={5}>3</Heading>
    </Box>
  </Grid.Col>
  <Grid.Col span={6}>
    <Box color="$semantic.color.surface.accent.secondary">
      <Heading offset={5}>6</Heading>
    </Box>
  </Grid.Col>
  <Grid.Col span={6}>
    <Box color="$semantic.color.surface.accent.secondary">
      <Heading offset={5}>6</Heading>
    </Box>
  </Grid.Col>
</Grid>
```

### Percent

Regardless of viewport width, the span will remain the same for these columns. Change the span by using percentages of the parent container.

```jsx live
<Grid>
  <Grid.Col span="100%">
    <Box color="$semantic.color.surface.accent.secondary">
      <Heading offset={5}>100%</Heading>
    </Box>
  </Grid.Col>
  <Grid.Col span="33%">
    <Box color="$semantic.color.surface.accent.secondary">
      <Heading offset={5}>33%</Heading>
    </Box>
  </Grid.Col>
  <Grid.Col span="33%">
    <Box color="$semantic.color.surface.accent.secondary">
      <Heading offset={5}>33%</Heading>
    </Box>
  </Grid.Col>
  <Grid.Col span="33%">
    <Box color="$semantic.color.surface.accent.secondary">
      <Heading offset={5}>33%</Heading>
    </Box>
  </Grid.Col>
  <Grid.Col span="20%">
    <Box color="$semantic.color.surface.accent.secondary">
      <Heading offset={5}>20%</Heading>
    </Box>
  </Grid.Col>
  <Grid.Col span="20%">
    <Box color="$semantic.color.surface.accent.secondary">
      <Heading offset={5}>20%</Heading>
    </Box>
  </Grid.Col>
  <Grid.Col span="20%">
    <Box color="$semantic.color.surface.accent.secondary">
      <Heading offset={5}>20%</Heading>
    </Box>
  </Grid.Col>
  <Grid.Col span="20%">
    <Box color="$semantic.color.surface.accent.secondary">
      <Heading offset={5}>20%</Heading>
    </Box>
  </Grid.Col>
  <Grid.Col span="20%">
    <Box color="$semantic.color.surface.accent.secondary">
      <Heading offset={5}>20%</Heading>
    </Box>
  </Grid.Col>
</Grid>
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Grid"
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the grid component',
    },
    {
      name: 'columns',
      type: 'number',
      description: 'The number of columns in the grid',
      default: 12,
    },
    {
      name: 'space',
      type: 'number | string',
      description:
        'Determines the amount of space between elements in the grid',
      default: '$semantic.spacing.sm',
    },
    {
      name: 'span',
      type: 'number | string',
      description: 'Handles the span size of the grid',
      default: 12,
    },
  ]}
/>

<Docs.PropsTable
  of="Grid.Col"
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the grid col component',
    },
    {
      name: 'span',
      type: 'number | string',
      description: 'Handles the span size of the column',
    },
  ]}
/>

<Docs.ClassesTable
  of="Grid"
  rows={[
    {
      name: 'grid',
      description: 'Grid root element',
    },
  ]}
/>

<Docs.ClassesTable
  of="Grid.Col"
  rows={[
    {
      name: 'grid-col-root',
      description: 'Grid column element',
    },
  ]}
/>

</Tab>
</Tabs>

---
id: heading
category: Typography
title: Heading
description: Creates appropriately sized heading elements.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=9470%3A32790
---

<Tabs>

<Tab label="Overview">

```jsx
import { Heading } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Heading',
  inputs: [
    {
      prop: 'children',
      type: 'string',
      defaultValue: 'Heading',
    },
    {
      prop: 'offset',
      type: 'select',
      options: [
        { label: '1', value: '1' },
        { label: '2', value: '2' },
        { label: '3', value: '3' },
        { label: '4', value: '4' },
        { label: '5', value: '5' },
        { label: '6', value: '6' },
      ],
    },
    {
      prop: 'color',
      type: 'select',
      options: [
        { label: '$core.color.brand.100', value: '$core.color.brand.100' },
        { label: '$core.color.brand.60', value: '$core.color.brand.60' },
        { label: '$core.color.neutral.80', value: '$core.color.neutral.80' },
        { label: 'lightseagreen', value: 'lightseagreen' },
        { label: '#ff0000', value: '#ff0000' },
      ],
    },
    {
      prop: 'textAlign',
      type: 'select',
      options: [
        { label: 'left', value: 'left' },
        { label: 'center', value: 'center' },
        { label: 'right', value: 'right' },
      ],
    },
  ]
}

<Heading>Heading</Heading>
```

## <b>Set Global Heading Font</b>

One of the limitations of our library is the inability to install fonts into applications. Because of this, we have reserved a special token, `$heading`, to be added in the createTheme function, which will add the font to all Heading components globally.

In the example below, the font 'UHCSerif' is set as the heading font and will now be applied to all Heading components.

```jsx
import { ThemeProvider, createTheme } from '@uhg-abyss/mobile';

const theme = createTheme('uhc', {
  theme: {
    fonts: {
      heading: 'UHCSerif',
    },
  },
});

const App = () => {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
};
```

## Offset

If you want to have heading levels relative to the current level, you can provide an offset prop.
These are equivalent to using a heading element in HTML. A Heading with an offset of 1 would be the equivalent of an `<h1>`.
Headings 1-4 have a default color of `$core.color.brand.100` and Headings 5 & 6 have a default color of `$core.color.neutral.100`.

You can use `offset={1|2|3|4|5|6}`.

```jsx live
<Layout.Stack alignItems="left">
  <Heading offset={1}>Heading 1</Heading>
  <Heading offset={2}>Heading 2</Heading>
  <Heading offset={3}>Heading 3</Heading>
  <Heading offset={4}>Heading 4</Heading>
  <Heading offset={5}>Heading 5</Heading>
  <Heading offset={6}>Heading 6</Heading>
</Layout.Stack>
```

## Level

Headings 5 and 6 have an optional property called `level` that allows you to use a lighter version of the text. The default is level 1, the heavier version. The level two prop makes the
heading lighter.

```jsx live
<Layout.Stack alignItems="left">
  <Heading offset={5} level={1}>
    Heading 5 (level 1)
  </Heading>
  <Heading offset={5} level={2}>
    Heading 5 (level 2)
  </Heading>
  <Heading offset={6} level={1}>
    Heading 6 (level 1)
  </Heading>
  <Heading offset={6} level={2}>
    Heading 6 (level 2)
  </Heading>
</Layout.Stack>
```

## Color

Use the `color` property to set the color of the text. The default is set to `$core.color.brand.100`.

```jsx live
<Layout.Stack alignItems="left">
  <Heading>My Benefits</Heading>
  <Heading color="$semantic.color.text.label.status.error">My Benefits</Heading>
  <Heading color="#FF00FF">My Benefits</Heading>
  <Heading color="blue">My Benefits</Heading>
</Layout.Stack>
```

## Text Align

Use the `textAlign` prop to change the alignment of the text. Options include `left`, `center` and `right`.
The default is set to `left`.

```jsx live
<Layout.Stack grow>
  <Heading textAlign="left">Left Aligned Heading</Heading>
  <Heading textAlign="center">Center Aligned Heading</Heading>
  <Heading textAlign="right">Right Aligned Heading</Heading>
</Layout.Stack>
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Heading"
  rows={[
    {
      name: 'children',
      type: 'string',
      description: 'The text to be input into the heading component',
    },
    {
      name: 'offset',
      type: '1 | 2 | 3 | 4 | 5 | 6 ',
      description: 'The offset hierarchy of heading. 1 is <h1>, and so on',
      default: '1',
    },
    {
      name: 'textAlign',
      type: '"left" | "center" | "right"',
      description: 'Specifies text alignment of the heading text',
      default: 'left',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Set the color of the heading text',
      default: 'Headings 1-4: "#002677", Headings 5-6: "#000000"',
    },
    {
      name: 'animated',
      type: 'boolean',
      description: 'Flag to enable component animation',
      default: 'false',
    },
    {
      name: 'level',
      type: '1 | 2',
      description:
        'Set the level of the heading. Used for offset 5 and 6 headings',
      default: '1',
    },
    {
      name: 'fontFamily',
      type: 'string',
      description: 'Set the font family of the heading',
    },
  ]}
/>

<Docs.ClassesTable
  of="Heading"
  rows={[
    {
      name: 'heading-root',
      description: 'Heading root element',
    },
  ]}
/>

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="Heading" keys={['heading']} />

</Tab>
</Tabs>

---
id: home-widget
category: Content
title: HomeWidget
description: A component of an interface, that enables a user to perform a function or access a service.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=12334-61355&t=hhJi0b2ytlH4Ftjo-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { HomeWidget } from '@uhg-abyss/mobile';
```

## HomeWidget Card Heading & Background

Entering a value into the `heading` prop will display a header with heading and accompanying Background image when applicable.

You can customize the Background using the `headerBackground` prop.

```jsx live
() => {
  const CostIcon = styled(Image, {
    position: 'absolute',
    zIndex: -20,
    top: -100,
    right: -30,
    width: 550,
    height: 250,
  });

  const Cost = ({ children, label, number }) => {
    return (
      <Layout.Group wrap grow>
        <Layout.Stack alignItems="left">
          <Text
            fontWeight="$core.font-weight.regular"
            lineHeight="$core.line-height.40"
            size="$core.font-size.p.40"
          >
            {label}
          </Text>
          <Text
            fontWeight="$core.font-weight.bold"
            lineHeight="$core.line-height.100"
            size="$core.font-size.p.100"
          >
            ${number}
          </Text>
        </Layout.Stack>
        {children}
      </Layout.Group>
    );
  };

  return (
    <HomeWidget.Card
      heading="Spending & Rewards"
      headerBackground={<CostIcon source="/mobile/homeWidget/costSVG.svg" />}
    >
      <HomeWidget
        color="$semantic.color.surface.container.emphasis.2"
        textColor="$semantic.color.text.body.alt"
        heading="Members Account"
        onPress={() => console.log('widget has been pressed')}
      >
        <Cost label="Available" number={600} />
        <DonutChart progress={75} />
      </HomeWidget>
      <HomeWidget
        color="$semantic.color.surface.container.emphasis.3"
        heading="Walk it off"
        onPress={() => console.log('widget has been pressed')}
      >
        <Cost label="Total Due" number={1043.43}></Cost>
      </HomeWidget>
      <HomeWidget
        color="$semantic.color.surface.container.emphasis.4"
        heading="HSA Account"
        onPress={() => console.log('widget has been pressed')}
      >
        <Cost label="Available" number={1043.43} />
        <DonutChart progress={75} />
      </HomeWidget>
      <HomeWidget
        color="$semantic.color.surface.container.emphasis.1"
        heading={`Reward`}
        onPress={() => console.log('widget has been pressed')}
      >
        <Cost label="Available" number={600} />
        <DonutChart progress={75} />
      </HomeWidget>
    </HomeWidget.Card>
  );
};
```

## HomeWidget Customization

A heading can be added to `HomeWidget` via the `heading` prop.

Content is added to `HomeWidget` with children. Any content added will be placed inside a horizontal flex container with justifyContent set to `space-between`. By default, content is placed underneath the heading, but this can be changed via the `headerAlignment` prop.

The `color` prop is used to change the widget color. If a dark color is applied, the text color will adjust to white, this can be overridden via the `headingColor` prop. Use the `activeColor` prop to set the pressed color. If nothing is passed the color will stay the same when pressed.

The heading position can be adjusted via the `headerAlignment` prop, the heading can either be above or below the widget content. The default for `headerAlignment` is `top`

A subheading can be placed below the widget heading via the `subheading` prop.

```jsx live
() => {
  return (
    <HomeWidget.Card>
      <HomeWidget
        color="$tile.color.surface.container.rest.emphasis-1"
        activeColor="$tile.color.surface.container.active.emphasis-1"
        heading="Walk it off"
        onPress={() => console.log('widget has been pressed')}
        subheading="Sub-heading"
      >
        <Layout.Stack alignItems="left">
          <Text
            fontWeight="$core.font-weight.regular"
            lineHeight="$core.line-height.40"
            size="$core.font-size.p.40"
          >
            Total Due
          </Text>
          <Text
            fontWeight="$core.font-weight.bold"
            lineHeight="$core.line-height.100"
            size="$core.font-size.p.100"
          >
            $1043.43
          </Text>
        </Layout.Stack>
      </HomeWidget>
      <HomeWidget
        color="$tile.color.surface.container.rest.emphasis-4"
        activeColor="$tile.color.surface.container.active.emphasis-4"
        heading="Walk it off"
        onPress={() => console.log('widget has been pressed')}
      >
        <Layout.Stack alignItems="left">
          <Text
            fontWeight="$core.font-weight.regular"
            lineHeight="$core.line-height.40"
            size="$core.font-size.p.40"
          >
            Total Due
          </Text>
          <Text
            fontWeight="$core.font-weight.bold"
            lineHeight="$core.line-height.100"
            size="$core.font-size.p.100"
          >
            $1043.43
          </Text>
        </Layout.Stack>
      </HomeWidget>
      <HomeWidget
        color="$tile.color.surface.container.rest.emphasis-3"
        activeColor="$tile.color.surface.container.active.emphasis-3"
        heading="Moved Header"
        onPress={() => console.log('widget has been pressed')}
        headerAlignment="bottom"
      >
        <IconBrand size={48} icon="home" />
      </HomeWidget>
    </HomeWidget.Card>
  );
};
```

## Widget Layout

`HomeWidget` will be laid out automatically when placed inside of `HomeWidget.Card`. The widgets will be laid out in a grid with two columns and will grow when given space.

`HomeWidget` can be made to occupy the entire width of the card by setting `span={2}`.

The widget heading will wrap to be two lines if no notification is present, but only one line if a notification is present.

```jsx live
() => {
  return (
    <HomeWidget.Card>
      <HomeWidget
        color="$semantic.color.surface.container.emphasis.2"
        heading="Full width containing two children"
        onPress={() => console.log('widget has been pressed')}
      >
        <Layout.Stack alignItems="left">
          <Text
            fontWeight="$core.font-weight.regular"
            lineHeight="$core.line-height.40"
            size="$core.font-size.p.40"
          >
            Available
          </Text>
          <Text
            fontWeight="$core.font-weight.bold"
            lineHeight="$core.line-height.100"
            size="$core.font-size.p.100"
          >
            $600
          </Text>
        </Layout.Stack>
        <DonutChart progress={75} />
      </HomeWidget>
      <HomeWidget
        color="$semantic.color.surface.interactive.standards.rest.on-primary"
        heading="Single widget without a card"
        onPress={() => console.log('widget has been pressed')}
      >
        <Layout.Stack alignItems="left">
          <Text
            color="$semantic.color.text.body.alt"
            fontWeight="$core.font-weight.regular"
            lineHeight="$core.line-height.40"
            size="$core.font-size.p.40"
          >
            Available
          </Text>
          <Text
            color="$semantic.color.text.body.alt"
            fontWeight="$core.font-weight.bold"
            lineHeight="$core.line-height.100"
            size="$core.font-size.p.100"
          >
            $425
          </Text>
        </Layout.Stack>
        <DonutChart progress={75} />
      </HomeWidget>
      <HomeWidget
        color="$semantic.color.surface.container.emphasis.3"
        heading="Full width"
        span={2}
        onPress={() => console.log('widget has been pressed')}
      >
        <Layout.Stack alignItems="left">
          <Text
            fontWeight="$core.font-weight.regular"
            lineHeight="$core.line-height.40"
            size="$core.font-size.p.40"
          >
            Total Due
          </Text>
          <Text
            fontWeight="$core.font-weight.bold"
            lineHeight="$core.line-height.100"
            size="$core.font-size.p.100"
          >
            $1043.43
          </Text>
        </Layout.Stack>
      </HomeWidget>
    </HomeWidget.Card>
  );
};
```

## Custom containers

`HomeWidget` can also be used on its own or with a custom container. When standing alone, the `HomeWidget` will grow to full width of its container.

[Grid](/mobile/ui/grid) is recommended to control the layout when using a custom container.

```jsx live
() => {
  return (
    <Box color="$semantic.color.surface.container.primary">
      <Grid columns={2}>
        <Grid.Col span={1}>
          <HomeWidget
            color="$semantic.color.surface.container.emphasis.1"
            heading="Custom Container"
            onPress={() => console.log('widget has been pressed')}
            headerAlignment="bottom"
          >
            <IconBrand size={48} icon="home" />
          </HomeWidget>
        </Grid.Col>
        <Grid.Col span={1}>
          <HomeWidget
            color="$semantic.color.surface.container.emphasis.2"
            heading="Custom container"
            onPress={() => console.log('widget has been pressed')}
            headerAlignment="bottom"
          >
            <IconBrand size={48} icon="home" />
          </HomeWidget>
        </Grid.Col>
        <Grid.Col span={2}>
          <HomeWidget
            color="$semantic.color.surface.container.emphasis.4"
            heading="Custom container"
            onPress={() => console.log('widget has been pressed')}
          >
            <Layout.Stack alignItems="left">
              <Text
                fontWeight="$core.font-weight.regular"
                lineHeight="$core.line-height.40"
                size="$core.font-size.p.40"
              >
                Available
              </Text>
              <Text
                fontWeight="$core.font-weight.bold"
                lineHeight="$core.line-height.100"
                size="$core.font-size.p.100"
              >
                $600
              </Text>
            </Layout.Stack>
            <DonutChart progress={75} />
          </HomeWidget>
        </Grid.Col>
      </Grid>
    </Box>
  );
};
```

```jsx live
() => {
  return (
    <HomeWidget
      color="$semantic.color.surface.container.primary"
      heading="Stand alone widget"
      onPress={() => console.log('widget has been pressed')}
    >
      <IconBrand size={48} icon="home" />
    </HomeWidget>
  );
};
```

## Example

```jsx live
() => {
  const CostIcon = styled(Image, {
    position: 'absolute',
    zIndex: -20,
    top: -100,
    right: -30,
    width: 550,
    height: 250,
  });

  const Cost = ({ children, label, number }) => {
    return (
      <Layout.Group wrap grow>
        <Layout.Stack alignItems="left">
          <Text
            fontWeight="$core.font-weight.regular"
            lineHeight="$core.line-height.40"
            size="$core.font-size.p.40"
          >
            {label}
          </Text>
          <Text
            fontWeight="$core.font-weight.bold"
            lineHeight="$core.line-height.100"
            size="$core.font-size.p.100"
          >
            ${number}
          </Text>
        </Layout.Stack>
        {children}
      </Layout.Group>
    );
  };

  const RemainingCost = ({ label, number }) => {
    return (
      <View style={{ flexDirection: 'column', flex: 1, paddingHorizontal: 5 }}>
        <Text
          fontWeight="$core.font-weight.regular"
          lineHeight="$core.line-height.40"
          size="$core.font-size.p.40"
        >
          {label}
        </Text>
        <Layout.Group
          style={{ flexGrow: 1, flexDirection: 'row', flexWrap: 'nowrap' }}
        >
          <Text
            fontWeight="$core.font-weight.bold"
            lineHeight="$core.line-height.0"
            size="$core.font-size.p.60"
            color="semantic.color.text.body.primary"
          >
            ${number + ' '}
            <Text
              fontWeight="$core.font-weight.medium"
              lineHeight="$core.line-height.60"
              size="$core.font-size.p.60"
              color="$semantic.color.text.body.secondary"
            >
              Remaining
            </Text>
          </Text>
        </Layout.Group>
        <Accumulator percentage={50} />
      </View>
    );
  };

  return (
    <HomeWidget.Card
      headerBackground={<CostIcon source="/mobile/homeWidget/costSVG.svg" />}
      style={{ padding: 6 }}
      heading="Spending & Rewards"
    >
      <HomeWidget
        color="$semantic.color.surface.interactive.standards.rest.on-primary"
        variant="small"
        heading="Member Cards"
        onPress={() => console.log('widget has been pressed')}
      >
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            width: '100%',
          }}
        >
          <View>
            <Text
              color="$semantic.color.text.body.alt"
              size="$core.font-size.p.40"
              fontWeight="$core.font-weight.bold"
            >
              Medical / Rx
            </Text>
            <Text
              color="$semantic.color.text.body.alt"
              size="$core.font-size.p.40"
              fontWeight="$core.font-weight.bold"
            >
              Dental
            </Text>
            <Text
              color="$semantic.color.text.body.alt"
              size="$core.font-size.p.40"
              fontWeight="$core.font-weight.bold"
            >
              Vision
            </Text>
          </View>
          <Brandmark
            brand="uhc"
            size={28}
            affiliate="uhc"
            variant="u_mark"
            color="white"
          />
        </View>
      </HomeWidget>
      <HomeWidget
        color="$semantic.color.surface.container.emphasis.4"
        heading="Walk it off"
        onPress={() => console.log('widget has been pressed')}
      >
        <Cost label="This Month" number={551.23} />
      </HomeWidget>
      <HomeWidget
        color="$semantic.color.surface.container.emphasis.3"
        heading="HSA Account"
        onPress={() => console.log('widget has been pressed')}
      >
        <Cost label="Available" number={1043.43} />
        <DonutChart progress={75} />
      </HomeWidget>
      <HomeWidget
        color="$semantic.color.surface.container.emphasis.1"
        heading={`Reward`}
        onPress={() => console.log('widget has been pressed')}
      >
        <Cost label="Available" number={600} />
        <DonutChart progress={75} />
      </HomeWidget>
      <HomeWidget
        color="$semantic.color.surface.container.emphasis.2"
        heading={`Rose's Plan Spending`}
        onPress={() => console.log('widget has been pressed')}
        subheading="Medical In-Network"
      >
        <RemainingCost label="Deductible" number={300} />
        <RemainingCost label="out-of-pocket" number={300} />
      </HomeWidget>
    </HomeWidget.Card>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="HomeWidget"
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The children of the widget',
    },
    {
      name: 'span',
      type: 'number',
      description: 'Sets the width of the widget',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Callback fired when the widget is pressed',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Defines the widget color',
      default: '$semantic.color.surface.container.emphasis.3',
    },
    {
      name: 'activeColor',
      type: 'string',
      description: 'Defines the widget color when pressed',
    },
    {
      name: 'activeColor',
      type: 'string',
      description: 'Defines the widget color when pressed',
    },
    {
      name: 'headerAlignment',
      type: 'top | bottom',
      description: 'Moves header above or below content',
      default: 'top',
    },
    {
      name: 'heading',
      type: 'string',
      description: 'The heading of the home widget',
    },
    {
      name: 'subheading',
      type: 'string',
      description: 'Text displayed directly below the heading',
    },
    {
      name: 'headingColor',
      type: 'function',
      description: 'The color of the heading',
    },
    {
      name: 'notification',
      type: 'string',
      description: 'The notification of the home widget component',
    },
    {
      name: 'notificationColor',
      type: 'string',
      description: 'The color of the notification text',
      default: '$semantic.color.text.label.status.success',
    },
  ]}
/>

<Docs.PropsTable
  of="HomeWidget.Card"
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the home widget card',
    },
    {
      name: 'headerBackground',
      type: 'string',
      description: 'Sets the header background of the home widget card',
    },
    {
      name: 'heading',
      type: 'string',
      description:
        'Heading of the home widget card. If nothing is defined here, the heading bar will be hidden',
    },
  ]}
  inherits={[{ name: 'Card', link: '/mobile/ui/card' }]}
/>

<Docs.ClassesTable
  of="HomeWidget"
  rows={[
    {
      name: 'home-widget-root',
      description: 'Widget container',
    },
    {
      name: 'home-widget-header-wrapper',
      description: 'Widget header container',
    },
    {
      name: 'home-widget-heading-wrapper',
      description: 'Widget heading container',
    },
    {
      name: 'home-widget-heading',
      description: 'Widget heading',
    },
    {
      name: 'home-widget-notification',
      description: 'Widget notification text',
    },
    {
      name: 'home-widget-subheading',
      description: 'Widget subheading text',
    },
    {
      name: 'home-widget-icon',
      description: 'Chevron on the right side of the widget',
    },
    {
      name: 'home-widget-content-wrapper',
      description: 'Widget header container',
    },
  ]}
/>

<Docs.ClassesTable
  of="HomeWidget.Card"
  rows={[
    {
      name: 'home-widget-card-root',
      description: 'HomeWidget card root container',
    },
    {
      name: 'home-widget-card-header-wrapper',
      description: 'HomeWidget card header container',
    },
    {
      name: 'home-widget-card-heading',
      description: 'HomeWidget card heading',
    },
  ]}
  inherits={[{ name: 'Card', link: '/mobile/ui/card' }]}
/>

</Tab>

<Tab label="Accessibility">

## Dynamic Type

HomeWidget scales according to Abyss standards. Dynamic type causes some elements to reconfigure in a stacked format. Any [IconBrand](/mobile/brand/uhc/icon-brand/?tab=accessibility) should set `disableScaling={true}`. The internal chevron icon will only scale to 130%.

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="HomeWidget.Card" keys={['widget-card']} />

<Docs.ComponentTokensTable of="HomeWidget" keys={['tile']} />

</Tab>
</Tabs>

---
id: i18n-provider
category: Providers
title: I18nProvider
description: Used to provide i18n data to the application.
---

<Tabs>

<Tab label="Overview">

```jsx
import { I18nProvider } from '@uhg-abyss/mobile/ui/I18nProvider';
```

## Usage

Abyss supports overriding the default i18n object by using the `I18nProvider` component. The `I18nProvider` component takes a `translations`
prop that is an object containing the translations to either override the default translations with or to provide custom translations. The
translations object for overrides will be in the following format:

```jsx
{
  [commonWord]: 'Translated Value',
  [componentName]: {
    [key]: 'Translated Value',
  },
}
```

THe `commonWord` key is used to override the default translations for common words used in Abyss component. The `componentName` key with an object
is for words within specific Abyss components that allow an additional scope to other keys. Below is an example of a few of the words in our default i18n object:

```jsx
{
  disabled: 'Disabled',
  submit: 'Submit',
  TextArea: {
    clear: 'clear',
    charactersRemaining: '{{count}} characters remaining',
  },
}
```

When using the `t` function from the [useTranslate](/mobile/hooks/use-translate) hook or the [Translate](/mobile/ui/translate) component, the key will be in dotted
notation. For example, the key `'TextArea.clear'` will be used to get the value `'clear'` from the i18n object.

Our default i18n object can be seen [here](https://github.com/uhc-tech/abyss/blob/main/packages/abyss-mobile/src/tools/i18n/translations/en.ts)

## Example

Let's use the [TextArea](/mobile/ui/text-area) component as an example. The `TextArea` component has a text block that
displays the remaining characters available to be typed in the text area when the `maxLength` prop is used.

```jsx render
() => {
  const [value, setValue] = useState('State Default Value');

  return (
    <View>
      <TextArea
        label="Label"
        value={value}
        onChangeText={setValue}
        maxLength={500}
      />
      <View
        style={{
          alignItems: 'flex-end',
          right: 10,
          marginTop: 8,
          marginBottom: 16,
        }}
      >
        <IconSymbol
          icon="arrow_upward"
          size={48}
          color="$semantic.color.icon.status.info"
        />
      </View>
    </View>
  );
};
```

Internally, we use the `'TextArea.charactersRemaining'` key to get value in our i18n object. This value can be overridden with
the `translations` prop in the `I18nProvider` component. Let's change the value of the `'TextArea.charactersRemaining'` key to place
the amount of characters left at the end of the string.

```jsx live-expanded
() => {
  const [value, setValue] = useState('State Default Value');

  return (
    <I18nProvider
      translations={{
        TextArea: { charactersRemaining: 'Characters Remaining: {{count}}' },
      }}
    >
      <TextArea
        label="Label"
        value={value}
        onChangeText={setValue}
        maxLength={500}
      />
    </I18nProvider>
  );
};
```

## Language Translations

We can use the same idea to translate text into different languages.

```jsx live
() => {
  const [value, setValue] = useState('Valor por defecto');

  return (
    <I18nProvider
      translations={{
        TextArea: {
          clear: 'Borrar',
          charactersRemaining: '{{count}} caracteres restantes',
        },
      }}
    >
      <TextArea
        label="Etiqueta"
        value={value}
        onChangeText={setValue}
        maxLength={500}
      />
    </I18nProvider>
  );
};
```

## Custom I18n

You can also use the `I18nProvider` component to not only override the default values used in Abyss components, but you provide your own custom custom values .
Those values can then consumed later using the [useTranslate](/mobile/hooks/use-translate) hook or the [Translate](/mobile/ui/translate) component.

```jsx live
const MyComponent = () => {
  const { t } = useTranslate();
  return (
    <View>
      <Text>{t('myCustomText')}</Text>
      <Text>{t('nested.key')}</Text>
    </View>
  );
};

render(() => {
  return (
    <I18nProvider
      translations={{
        myCustomText: 'My custom Text',
        nested: { key: 'Nested Value' },
      }}
    >
      <MyComponent />
    </I18nProvider>
  );
});
```

## Related Links

- [useTranslate](/mobile/hooks/use-translate)
- [Translate](/mobile/ui/translate)

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="I18nProvider"
  rows={[
    {
      name: 'children',
      type: 'React.ReactNode',
      description: 'The rest of the component tree',
    },
    {
      name: 'translations',
      type: 'object',
      description: 'The translations to override the default translations with',
    },
  ]}
/>

</Tab>
</Tabs>

---
id: icon
category: Media
title: Icon
description: Used to implement icons and adapt their properties.
# design: https://www.figma.com/file/tk08Md4NBBVUPNHQYthmqp/Abyss-Design-System?node-id=0%3A10709
---

<Tabs>

<Tab label="Overview">

```jsx
import { Icon } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Icon',
  inputs: [
    {
      prop: 'size',
      type: 'string',
    },
    {
      prop: 'title',
      type: 'string',
    },
    {
      prop: 'color',
      type: 'string',
    },
  ]
}

() => {
  const customIcon = (
    `<svg viewBox="0 0 16 16">
      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
    </svg>`
  );

  return (
    <Icon size={48} title="github">{customIcon}</Icon>
  );
};
```

## Usage

Use `Icon` to implement custom SVG icons

```jsx live
<Layout.Group>
  <Icon title="github" size="$icon.sizing.lg">
    {`<svg viewBox="0 0 16 16">
      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
    </svg>`}
  </Icon>
  <Icon title="figma" size="$icon.sizing.lg">
    {`<svg viewBox="-60 0 500 500">
      <path d="M14 95.7924C14 42.8877 56.8878 0 109.793 0H274.161C327.066 0 369.954 42.8877 369.954 95.7924C369.954 129.292 352.758 158.776 326.711 175.897C352.758 193.019 369.954 222.502 369.954 256.002C369.954 308.907 327.066 351.795 274.161 351.795H272.081C247.279 351.795 224.678 342.369 207.666 326.904V415.167C207.666 468.777 163.657 512 110.309 512C57.5361 512 14 469.243 14 416.207C14 382.709 31.1945 353.227 57.2392 336.105C31.1945 318.983 14 289.5 14 256.002C14 222.502 31.196 193.019 57.2425 175.897C31.196 158.776 14 129.292 14 95.7924ZM176.288 191.587H109.793C74.2172 191.587 45.3778 220.427 45.3778 256.002C45.3778 291.44 73.9948 320.194 109.381 320.416C109.518 320.415 109.655 320.415 109.793 320.415H176.288V191.587ZM207.666 256.002C207.666 291.577 236.505 320.417 272.081 320.417H274.161C309.737 320.417 338.576 291.577 338.576 256.002C338.576 220.427 309.737 191.587 274.161 191.587H272.081C236.505 191.587 207.666 220.427 207.666 256.002ZM109.793 351.795C109.655 351.795 109.518 351.794 109.381 351.794C73.9948 352.015 45.3778 380.769 45.3778 416.207C45.3778 451.652 74.6025 480.622 110.309 480.622C146.591 480.622 176.288 451.186 176.288 415.167V351.795H109.793ZM109.793 31.3778C74.2172 31.3778 45.3778 60.2173 45.3778 95.7924C45.3778 131.368 74.2172 160.207 109.793 160.207H176.288V31.3778H109.793ZM207.666 160.207H274.161C309.737 160.207 338.576 131.368 338.576 95.7924C338.576 60.2173 309.737 31.3778 274.161 31.3778H207.666V160.207Z" />
    </svg>`}
  </Icon>
</Layout.Group>
```

## Colors

Use the `color` property to adjust the color of a Google material icon. The default color is set to the theme `'interactive1'`.

```jsx live
<Layout.Group>
  <Icon title="github" size="$icon.sizing.lg" color="#145cf2">
    {`<svg viewBox="0 0 16 16">
      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
    </svg>`}
  </Icon>
  <Icon title="github" size="$icon.sizing.lg" color="#fff">
    {`<svg viewBox="0 0 16 16">
      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
    </svg>`}
  </Icon>
</Layout.Group>
```

## Size

Use the `size` property to adjust the size of an icon by setting it to a specific preset size or number. The default is set to `24px` || `$icon.sizing.md`. The size prop can take in px or tokens.
Token sizes: `$icon.sizing.xs`: 16 `$icon.sizing.sm`: 20 `$icon.sizing.md`: 24 `$icon.sizing.lg`: 40 `$icon.sizing.xl`: 48

```jsx live
() => {
  const customIcon = `<svg viewBox="0 0 16 16">
      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
    </svg>`;

  return (
    <Layout.Group>
      <Icon title="github" size="$icon.sizing.sm">
        {customIcon}
      </Icon>
      <Icon title="github" size="$icon.sizing.md">
        {customIcon}
      </Icon>
      <Icon title="github" size="$icon.sizing.lg">
        {customIcon}
      </Icon>
    </Layout.Group>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Icon"
  rows={[
    {
      name: 'children',
      type: 'ReactNode',
      description: 'The svg content of the icon',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Set the color of the icon',
    },
    {
      name: 'size',
      type: 'number | string',
      description: 'Set the size of the icon',
    },
    {
      name: 'title',
      type: 'string',
      description: 'Set the title of the icon',
    },
    {
      name: 'isScreenReadable',
      type: 'boolean',
      description:
        'Indicate whether the icon is screen readable or not. If the icon is Screen Readable, then provide a title',
    },
    {
      name: 'disableScaling',
      type: 'boolean',
      description:
        'Specifies whether the icon should scale to respect Text Size accessibility settings',
    },
    {
      name: 'maxFontSizeMultiplier',
      type: 'boolean',
      description:
        'Specifies the largest possible scale the icon can reach when `disableScaling` is false',
    },
  ]}
/>

<Docs.ClassesTable
  of="Icon"
  rows={[
    {
      name: 'icon-root',
      description: 'Icon root element',
    },
  ]}
/>

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="Icon" keys={['icon']} />

</Tab>
</Tabs>

---
id: icon-symbol
category: Media
title: IconSymbol
description: Used to implement material symbol icons and adapt their properties.
design: https://www.figma.com/file/anZoHg026SyKJHWGJ7Vf4Q/Abyss-Icons?node-id=1%3A432
---

<Tabs>

<Tab label="Overview">

```jsx
import { IconSymbol } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'IconSymbol',
  inputs: [
    {
      prop: 'icon',
      type: 'string',
    },
    {
      prop: 'color',
      type: 'string',
    },
    {
      prop: 'size',
      type: 'string | number',
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'filled', value: 'filled' },
        { label: 'outlined', value: 'outlined' },
      ],
    },
  ]
}

<IconSymbol icon="home" size={40} variant="filled" color="$semantic.color.icon.status.info" />

```

## Icons

Use the `icon` property to adjust which icon is being selected.

```jsx live
<Layout.Group>
  <IconSymbol icon="bookmarks" size={24} />
  <IconSymbol icon="face" size={24} />
  <IconSymbol icon="home" size={24} />
</Layout.Group>
```

## Colors

Use the `color` property to adjust the color of a material symbol icon. The default color is set to the theme `'interactive1'`.

```jsx live
<Layout.Group>
  <IconSymbol icon="home" size={24} />
  <IconSymbol
    icon="home"
    size={24}
    color="$semantic.color.icon.status.success"
  />
  <IconSymbol
    icon="home"
    size={24}
    color="$semantic.color.icon.interactive.rest.status.error"
  />
  <IconSymbol
    icon="home"
    size={24}
    color="$semantic.color.icon.interactive.rest.primary"
  />
</Layout.Group>
```

## Size

Use the `size` property to adjust the size of an icon by setting it to a specific number or token. The default size is set to 24.
Token sizes: `$icon.sizing.xs`: 16 `$icon.sizing.sm`: 20 `$icon.sizing.md`: 24 `$icon.sizing.lg`: 40 `$icon.sizing.xl`: 48

```jsx live
<Layout.Group>
  <IconSymbol icon="home" size={16} />
  <IconSymbol icon="home" size="$icon.sizing.sm" />
  <IconSymbol icon="home" />
</Layout.Group>
```

## Material Symbol Variants

Use the `variant` property to change the style of Material symbol icons. The default variant is `filled`.

```jsx live
<Grid columns={5} span={1}>
  <Grid.Col>
    <Box
      padding="$semantic.spacing.sm"
      color="$semantic.color.surface.container.secondary"
    >
      <Layout.Stack grow space={0}>
        <div style={{ lineHeight: 2 }}>filled</div>
        <div style={{ lineHeight: 2 }}>outlined</div>
      </Layout.Stack>
    </Box>
  </Grid.Col>
  <Grid.Col>
    <Box
      padding="$semantic.spacing.sm"
      color="$semantic.color.surface.container.secondary"
    >
      <Layout.Stack grow space={2}>
        <IconSymbol icon="health_and_safety" size={24} variant="filled" />
        <IconSymbol icon="health_and_safety" size={24} variant="outlined" />
      </Layout.Stack>
    </Box>
  </Grid.Col>
  <Grid.Col>
    <Box padding="$semantic.spacing.sm" color="#D0F1F5">
      <Layout.Stack grow space={2}>
        <IconSymbol icon="health_and_safety" size={24} variant="filled" />
        <IconSymbol icon="health_and_safety" size={24} variant="outlined" />
      </Layout.Stack>
    </Box>
  </Grid.Col>
  <Grid.Col>
    <Box padding="$semantic.spacing.sm" color="#A5DFE7">
      <Layout.Stack grow space={2}>
        <IconSymbol icon="health_and_safety" size={24} variant="filled" />
        <IconSymbol icon="health_and_safety" size={24} variant="outlined" />
      </Layout.Stack>
    </Box>
  </Grid.Col>
  <Grid.Col>
    <Box
      padding="$semantic.spacing.sm"
      color="$semantic.color.surface.container.primary"
    >
      <Layout.Stack grow space={2}>
        <IconSymbol
          icon="health_and_safety"
          size={24}
          variant="filled"
          color="#fff"
        />
        <IconSymbol
          icon="health_and_safety"
          size={24}
          variant="outlined"
          color="#fff"
        />
      </Layout.Stack>
    </Box>
  </Grid.Col>
</Grid>
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="IconSymbol"
  rows={[
    {
      name: 'icon',
      type: 'string',
      description: 'Name of the material symbol icon',
    },
    {
      name: 'variant',
      type: 'filled | outlined',
      description: 'The style variation of the material symbol icon',
      default: 'filled',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Set the color of the material symbol icon',
      default: '$icon.color.default',
    },
    {
      name: 'size',
      type: 'number | string',
      description: 'Set the size of the material symbol icon',
      default: '$icon.sizing.md',
    },
    {
      name: 'title',
      type: 'string',
      description: 'Set the title of the icon',
    },
    {
      name: 'isScreenReadable',
      type: 'boolean',
      description:
        'Indicate whether the icon is screen readable or not. If the icon is Screen Readable, then provide a title',
      default: 'false',
    },
    {
      name: 'disableScaling',
      type: 'boolean',
      description:
        'Specifies whether the icon should scale to respect Text Size accessibility settings',
      default: 'false',
    },
    {
      name: 'maxFontSizeMultiplier',
      type: 'boolean',
      description:
        'Specifies the largest possible scale the icon can reach when `disableScaling` is false',
    },
    {
      name: 'onLoad',
      type: 'function',
      description: 'Callback function when the icon is loaded',
    },
    {
      name: 'onError',
      type: 'function',
      description: 'Callback function when the icon fails to load',
    },
    {
      name: 'fallback',
      type: 'JSX.Element',
      description: 'Fallback element to render when the icon fails to load',
    },
  ]}
/>

<Docs.ClassesTable
  of="IconSymbol"
  rows={[
    {
      name: 'icon-symbol-root',
      description: 'Material symbol icon root element',
    },
  ]}
/>

</Tab>

<Tab label="Material Symbols">

```jsx render
<h2>Material Symbols</h2>
```

<IconLibrary brand="symbol" />

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="Icon" keys={['icon']} />

</Tab>
</Tabs>

---
id: indicator
category: Data Display
title: Indicator
description: Adds an indicator to wrapped elements.
# design: https://www.figma.com/file/tk08Md4NBBVUPNHQYthmqp/branch/sabyctxmnS57eNFcPZQAbi/Abyss-Design-System
---

<Tabs>

<Tab label="Overview">

```jsx
import { Indicator } from '@uhg-abyss/mobile';
```

```jsx sandbox

{
  component: 'Indicator',
  inputs: [
    {
      prop: 'offset',
      type: 'number',
      defaultValue: 0
    },
        {
      prop: 'overflowCount',
      type: 'number',
      defaultValue: 99
    },
    {
      prop: 'position',
      type: 'select',
      options: [
        { label: 'top-start', value: 'top-start' },
        { label: 'top-end', value: 'top-end' },
        { label: 'bottom-start', value: 'bottom-start' },
        { label: 'bottom-end', value: 'bottom-end' },
      ],
      defaultValue: 'top-end',
    },
    {
      prop: 'color',
      type: 'string',
      defaultValue: '$indicator.color.surface.container',
    },
    {
      prop: 'label',
      type: 'string',
    },
  ]
}

<Indicator>
  <Badge>Indicator Sandbox</Badge>
</Indicator>
```

## Offset

Use the `offset` prop to change the position of the Indicator. It is useful when the Indicator component is used with children that have border radius.

```jsx live
<Layout.Group space={30}>
  <Indicator>
    <IconSymbol icon="face" size={48} />
  </Indicator>
  <Indicator offset={10}>
    <IconSymbol icon="face" size={48} />
  </Indicator>
</Layout.Group>
```

## Color

Use the `color` prop to change the color of the Indicator. Default value is set to `'$indicator.color.surface.container'`.

```jsx live
<Layout.Group space={30}>
  <Indicator color="green" offset={4}>
    <IconSymbol icon="mail" size={48} />
  </Indicator>
  <Indicator
    color="$semantic.color.surface.interactive.standards.rest.neutral"
    offset={4}
  >
    <IconSymbol icon="mail" size={48} />
  </Indicator>
</Layout.Group>
```

## Label

Use the `label` prop to add a label to the indicator. A value greater than 99 will display as "99+". Use the `overflowCount` prop to change the overflow value.

```jsx live
<Layout.Group space={30}>
  <Indicator offset={4} label={2}>
    <IconSymbol icon="mail" size={48} />
  </Indicator>
  <Indicator offset={4} label={354}>
    <IconSymbol icon="mail" size={48} />
  </Indicator>
</Layout.Group>
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Indicator"
  rows={[
    {
      name: 'children',
      type: 'ReactNode',
      description: 'The contents of the indicator component',
    },
    {
      name: 'position',
      type: "'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' ",
      default: "'top-end'",
      description: 'Position of the indicator',
    },
    {
      name: 'label',
      type: 'number | string',
      description: 'Label of the indicator',
    },
    {
      name: 'offset',
      type: 'number',
      default: '0',
      description:
        'Change the indicator default position based on the position variant',
    },
    {
      name: 'color',
      type: 'string',
      default: '$indicator.color.surface.container',
      description: 'Color of the indicator',
    },
    {
      name: 'overflowCount',
      type: 'number',
      default: '99',
      description: 'Overflow count display',
    },
    {
      name: 'showZero',
      type: 'boolean',
      default: 'true',
      description: 'Flag to hide label when value is 0',
    },
  ]}
/>

<Docs.ClassesTable
  of="Indicator"
  rows={[
    {
      name: 'indicator-root',
      description: 'Indicator root element',
    },
    {
      name: 'indicator',
      description: 'Indicator element',
    },
    {
      name: 'indicator-label',
      description: 'Indicator label element',
    },
  ]}
/>

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="Indicator" keys={['indicator']} />

</Tab>
</Tabs>

---
id: input-field
category: Forms
title: InputField
description: Allows users to enter text into a UI.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=40307-5604&mode=design&t=dirQ2Ey2NpKNpNfn-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { InputField } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'InputField',
  inputs: [
    {
      prop: 'label',
      type: 'string',
    },
    {
      prop: 'hintText',
      type: 'string',
    },
    {
      prop: 'errorMessage',
      type: 'string',
    },
    {
      prop: 'type',
      type: 'select',
      options: [
        { label: 'Text', value: 'text' },
        { label: 'Password', value: 'password' },
        { label: 'Price', value: 'price' },
      ]
    },
    {
      prop: 'isRequired',
      type: 'boolean',
    },
    {
      prop: 'isDisabled',
      type: 'boolean',
    },
    {
      prop: 'helpContent',
      type: 'string',
    },
  ]
}

() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <InputField
        model="input-field-sandbox"
        label="Sandbox Label"
        hintText="Sandbox Hint Text"
      />
    </FormProvider>
  );
};
```

Note: If the InputField is inside a ScrollView, verify the `keyboardShouldPersistTaps` prop on the ScrollView is set to `"always"` or `"handled"`
to allow pressing icons within the InputField when the keyboard is open.

## useForm (recommended)

Using the `useForm` hook with `FormProvider` sets state for the component.

```jsx live
() => {
  const form = useForm();

  const handleSubmit = (data) => {
    console.log('Submitted:', data);
  };

  return (
    <FormProvider state={form} onSubmit={handleSubmit}>
      <InputField
        model="input-field-form"
        label="InputField useForm"
        placeholder="Enter text"
      />
      <Button submit size="small" style={{ marginTop: 15 }}>
        Submit
      </Button>
    </FormProvider>
  );
};
```

Note: If the InputField is inside a ScrollView, verify the `keyboardShouldPersistTaps` prop on the ScrollView is set to `"always"` or `"handled"`
to allow pressing icons within the InputField when the keyboard is open.

## useState

Using the `useState` hook gets values from the component state.

```jsx live
() => {
  const [value, setValue] = useState('');

  const onSubmit = () => {
    console.log('Submitted:', value);
  };

  return (
    <React.Fragment>
      <InputField
        label="InputField useState"
        placeholder="State"
        value={value}
        onChangeText={setValue}
      />
      <Layout.Space />
      <Button size="small" onPress={onSubmit}>
        Submit
      </Button>
    </React.Fragment>
  );
};
```

## Placeholder

Use the `placeholder` prop to give users a short description in the input field before they enter a value.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <InputField
        model="input-field-placeholder"
        placeholder="Placeholder"
        label="InputField placeholder"
      />
    </FormProvider>
  );
};
```

## Label

Use the `label` prop to display a label above the input.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <InputField model="input-field-label" label="Custom Label" />
    </FormProvider>
  );
};
```

## Error Message

Use the `errorMessage` prop to display a custom error message below the input field.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <InputField
        model="input-field-error"
        label="Input With Error"
        errorMessage="Error Message"
      />
    </FormProvider>
  );
};
```

## Success Message

Use the `successMessage` prop to display a custom success message below the input field.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <InputField
        model="input-field-success"
        label="Input With Success"
        successMessage="Success Message"
      />
    </FormProvider>
  );
};
```

## Disabled

Set the `isDisabled` prop to `true` to disable the input field so users cannot enter a value.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <InputField
        model="input-field-disabled"
        isDisabled={true}
        label="Disabled"
      />
    </FormProvider>
  );
};
```

## Types

Use the `type` prop to set the type of input field to be displayed. Types include: `'text'`, `'email'`, `'password'`, `'price'`, `'number'` and `'phone'`.
The default is `text`.

### Text

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <InputField model="input-field-type-text" label="Type Text" type="text" />
    </FormProvider>
  );
};
```

### Password

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <InputField
        model="input-field-type-password"
        label="Password Text"
        type="password"
      />
    </FormProvider>
  );
};
```

### Price

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <InputField
        model="input-field-type-price"
        label="Price Text"
        type="price"
      />
    </FormProvider>
  );
};
```

## Prefix

Use the `prefix` prop to display content before the input field. This is meant for text and decorative icons. The default prefix for `type='price'` is '$'.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <Layout.Stack grow>
        <InputField
          model="input-field-prefix-price"
          label="Price Text"
          type="price"
        />
        <InputField
          model="input-field-prefix-phone"
          label="Enter Your Phone Number"
          type="phone"
          prefix={
            <IconSymbol
              icon="call"
              size={20}
              color="$semantic.color.icon.interactive.rest.secondary"
              variant="outlined"
            />
          }
        />
      </Layout.Stack>
    </FormProvider>
  );
};
```

## Suffix

Use the `suffix` prop to display content after the input field.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <InputField
        model="input-field-suffix"
        label="Enter your weight"
        suffix="lbs"
      />
    </FormProvider>
  );
};
```

## Action Icon

Use the `actionIcon` prop to pass in an actionable button. This can be used to further customize the input component.

```jsx live
() => {
  const form = useForm();
  const [isVisible, setIsVisible] = useState(false);

  return (
    <FormProvider state={form}>
      <InputField
        model="input-field-action-icon"
        label="Location Picker"
        actionIcon={
          <IconSymbol
            size={20}
            color="$semantic.color.icon.interactive.rest.secondary"
            icon="location_on"
            isScreenReadable
            title="pick location"
            variant="outlined"
          />
        }
        onActionIconPress={() => setIsVisible(true)}
      />
      <Modal
        title="Search for location"
        isVisible={isVisible}
        onClose={() => setIsVisible(false)}
        actionRight={
          <IconSymbol
            size={20}
            color="$semantic.color.icon.interactive.rest.secondary"
            icon="close"
            title="close"
            isScreenReadable
          />
        }
        onActionRightPress={() => setIsVisible(false)}
      >
        <Modal.Section>
          <Text>This is where location search would be added</Text>
        </Modal.Section>
      </Modal>
    </FormProvider>
  );
};
```

## Validation

Use the `validations` prop to set rules for the field to be valid. Each validation must have a key for it's name and an object that describes the validation. The object must have a message to display what should be validated. To create a custom validation, you can add a `validate` function that takes in the text as an argument and should return a boolean.

There are 5 built in validations: `minLength`, `maxLength`, `hasUppercaseLetters`, `hasLowercaseLetters` and `hasNumbers`. For the `minLength` and `maxLength` validations, you can pass in a `value` to determine the amount of characters to check for.

- <b>minLength</b> - Returns true if the amount of characters is less than the value.
  Default: 8
- <b>maxLength</b> - Returns true if the amount of characters is less than the value.
  Default: 20
- <b>hasUppercaseLetters</b> - Returns true if the text contains uppercase letters.
- <b>hasLowercaseLetters</b> - Returns true if the text contains lowercase letters.
- <b>hasNumbers</b> - Returns true if the text contains numbers.

To check the status of the validations, use the second parameter of the `onChangeText` prop.

```jsx live
() => {
  const [text, setText] = useState('');
  const success = useRef(false);

  const handleChangeText = (text, validations) => {
    console.log(validations);
    success.current = Object.values(validations).every((v) => v === true);
    setText(text);
  };
  return (
    <InputField
      isRequired
      label="Label"
      type="text"
      hintText="Hint Text"
      value={text}
      onChangeText={handleChangeText}
      successMessage={success.current ? 'Valid Password' : null}
      requirementsText="Password must have at least:"
      validations={{
        minLength: {
          value: 6,
          message: 'Must be at least 6 characters',
        },
        hasUppercaseLetters: {
          message: '1 uppercase letter',
        },
        hasLowercaseLetters: {
          message: '1 lowercase letter',
        },
        hasNumbers: {
          message: '1 number',
        },
        endsWithQ: {
          message: 'End with a uppercase Q',
          validate: (text) => {
            return text.endsWith('Q');
          },
        },
      }}
    />
  );
};
```

## Help Content

Use the `helpContent` prop to display a help icon in the top right of the container, which will display the provided content in a modal screen when pressed.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <InputField
        model="input-field-help"
        label="Label"
        hintText="Hint Text"
        helpContent={
          <Text style={{ margin: 16 }}>
            This is some text used to explain something to the user, but is too
            long to be hint text.
          </Text>
        }
      />
    </FormProvider>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="InputField"
  rows={[
    {
      name: 'value',
      type: 'string',
      description: 'Value of the input field',
    },
    {
      name: 'type',
      type: "'text' | 'email' | 'password' | 'price' | 'phone' | 'number'",
      description: 'Set the type of input field',
      default: 'text',
    },
    {
      name: 'placeholder',
      type: 'string',
      description:
        'Short description displayed in the input before the user enters a value',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description:
        'Flag to enable/disable the input. If true, the input will be disabled',
      default: 'false',
    },
    {
      name: 'requirementsText',
      type: 'string',
      description: 'Set the text displayed above validations',
    },
    {
      name: 'validations',
      type: 'object',
      description: 'Set rules for the input field to be valid',
    },
    {
      name: 'label',
      type: 'string',
      description: 'Label for input field',
    },
    {
      name: 'hintText',
      type: 'string',
      description: 'Set the text displayed below label',
    },
    {
      name: 'isRequired',
      type: 'boolean',
      description: 'Flag to require text',
      default: 'false',
    },
    {
      name: 'showOptionalLabel',
      type: 'boolean',
      description: 'Flag to display "optional" next to the label',
      default: 'false',
    },
    {
      name: 'errorMessage',
      type: 'string',
      description: 'Error message to be displayed below input field',
    },
    {
      name: 'successMessage',
      type: 'string',
      description: 'Success message to be displayed below input field',
    },
    {
      name: 'textContentType',
      type: 'string',
      description:
        'Give the keyboard and the system information about the expected semantic meaning for the content that users enter',
    },
    {
      name: 'keyboardType',
      type: 'string',
      description: 'Determines which keyboard to open',
    },
    {
      name: 'onChangeText',
      type: 'function',
      description:
        'Callback that is called when the input field text changes. Changed text is passed as a single string argument to the callback handler',
    },
    {
      name: 'onFocus',
      type: 'function',
      description: 'Callback fired every time the component is focused',
    },
    {
      name: 'onBlur',
      type: 'function',
      description: 'Callback fired every time the component is unfocused',
    },
    {
      name: 'helpContent',
      type: 'string | ReactNode',
      description:
        'When defined, displays a help icon that can be tapped to view the provided content in a modal screen',
    },
    {
      name: 'prefix',
      type: 'string | node',
      description:
        'Sets the content to be displayed before the text entry field',
    },
    {
      name: 'suffix',
      type: 'string | node',
      description:
        'Sets the content to be displayed after the text entry field',
    },
    {
      name: 'actionIcon',
      type: 'node',
      description:
        'Sets the action button to be displayed after the text entry field',
    },
    {
      name: 'onActionIconPress',
      type: 'function',
      description: 'Callback fired when the action button is pressed',
    },
    {
      name: 'helpButtonAccessibilityLabel',
      type: 'string',
      description: 'Set the accessibility label for the help button',
    },
  ]}
/>

<Docs.ClassesTable
  of="InputField"
  rows={[
    {
      name: 'input-field-root',
      description: 'Root element',
    },
    {
      name: 'input-field-header',
      description: 'Header element',
    },
    {
      name: 'input-field-help-button',
      description: 'Help button',
    },
    {
      name: 'input-field-label',
      description: 'Label element',
    },
    {
      name: 'input-field-prefix',
      description: 'Prefix text',
    },
    {
      name: 'input-field-container',
      description: 'The container around the input field',
    },
    {
      name: 'input-field',
      description: 'Input container',
    },
    {
      name: 'input-field-cancel-button',
      description: 'Cancel button',
    },
    {
      name: 'input-field-cancel-icon',
      description: 'Cancel icon',
    },
    {
      name: 'input-field-icon-button',
      description: 'Icon button',
    },
    {
      name: 'input-field-show-password-icon',
      description: 'Show password icon',
    },
    {
      name: 'input-field-hint-text',
      description: 'Input hint text',
    },
    {
      name: 'input-field-help-modal',
      description: 'Help modal',
    },
    {
      name: 'input-help-icon',
      description: 'Help icon element',
    },
    {
      name: 'input-help-modal-footer',
      description: 'Help modal footer',
    },
    {
      name: 'input-help-modal-close-button',
      description: 'Help modal close button',
    },
    {
      name: 'input-field-message',
      description: 'Message element',
    },
    {
      name: 'input-message-icon',
      description: 'Message icon',
    },
    {
      name: 'input-message-text',
      description: 'Message text',
    },
    { name: 'input-field-validation-checked-icon', description: 'Valid icon' },
    {
      name: 'input-field-validation-unchecked-icon',
      description: 'Invalid icon',
    },
    { name: 'input-field-validation-text', description: 'Validation text' },
  ]}
/>

<Docs.TranslationTable
  of="InputField"
  rows={[
    'help',
    'close',
    'error',
    'success',
    'InputField.priceInDollars',
    'InputField.clearText',
    'InputField.hidePassword',
    'InputField.revealPassword',
    'InputField.pass',
  ]}
/>

</Tab>

<Tab label="Accessibility">

## Focus Guidance

Abyss does not control the focus of components on the screen when handling validation errors. The [useSetFocus](/mobile/hooks/use-set-focus) hook can be used for this.

For input fields, the focus should move back to the input when there is an error (e.g user typed too many characters).

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable
  of="InputField"
  keys={[
    'input-header',
    'input-container',
    'input-message',
    'input-field',
    'input-requirements',
  ]}
/>

</Tab>
</Tabs>

---
id: layout
category: Layout
title: Layout
description: A single or multi-section container used to display content related to a single subject.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/branch/Sk3MrHYxjT39TKDzDU5LBc/Abyss-Mobile?node-id=20334%3A61355
---

<Tabs>

<Tab label="Overview">

# Overview

Layout is a set of organizational components that follow the patterns of Flexbox.

## Layout.Group

Used to align elements in a row.

```jsx sandbox
{
  component: 'Layout.Group',
  inputs: [
    {
      prop: 'space',
      type: 'number',
    },
    {
      prop: 'alignLayout',
      type: 'select',
      options: [
        { label: 'left', value: 'left' },
        { label: 'center', value: 'center' },
        { label: 'right', value: 'right' },
      ],
    },
    {
      prop: 'alignItems',
      type: 'select',
      options: [
        { label: 'top', value: 'top' },
        { label: 'center', value: 'center' },
        { label: 'bottom', value: 'bottom' },
      ],
    },
    {
      prop: 'grow',
      type: 'boolean',
    },
  ],
}

<Layout.Group>
  <Box color="#D0F1F5" padding={20}>
    <Text>Group 1</Text>
  </Box>
  <Box color="#D0F1F5" padding={15}>
     <Text>Group 2</Text>
  </Box>
  <Box color="#D0F1F5" padding={10}>
     <Text>Group 3</Text>
  </Box>
</Layout.Group>
```

## Layout.Stack

Used to align elements in a column.

```jsx sandbox
{
  component: 'Layout.Stack',
  inputs: [
    {
      prop: 'space',
      type: 'number',
    },
    {
      prop: 'alignLayout',
      type: 'select',
      options: [
        { label: 'left', value: 'left' },
        { label: 'center', value: 'center' },
        { label: 'right', value: 'right' },
      ],
    },
    {
      prop: 'alignItems',
      type: 'select',
      options: [
        { label: 'left', value: 'left' },
        { label: 'center', value: 'center' },
        { label: 'right', value: 'right' },
      ],
    },
    {
      prop: 'grow',
      type: 'boolean',
    },
  ],
}

<Layout.Stack>
    <Box color="#D0F1F5" padding={20} >
      <Text>Stack 1</Text>
    </Box>
    <Box color="#D0F1F5" padding={15} >
       <Text>Stack 2</Text>
    </Box>
    <Box color="#D0F1F5" padding={10}>
       <Text>Stack 3</Text>
    </Box>
</Layout.Stack>
```

## Layout.Group and Layout.Stack Props

### Space

Use the `space` property to set the spacing for a `Group` or `Stack`. The default is set to `8`.

```jsx live
<Grid>
  <Grid.Col span="100%">
    <Heading offset={3}>Group </Heading>
    <Layout.Group>
      <Box color="#D0F1F5" padding={20}>
        <Text>Group 1</Text>
      </Box>
      <Box color="#D0F1F5" padding={20}>
        <Text>Group 2</Text>
      </Box>
      <Box color="#D0F1F5" padding={20}>
        <Text>Group 3</Text>
      </Box>
    </Layout.Group>
  </Grid.Col>
  <Grid.Col span="100%">
    <Heading offset={3}>Group - 20px space </Heading>
    <Layout.Group space={20}>
      <Box color="#D0F1F5" padding={20}>
        <Text>Group 1</Text>
      </Box>
      <Box color="#D0F1F5" padding={20}>
        <Text>Group 2</Text>
      </Box>
      <Box color="#D0F1F5" padding={20}>
        <Text>Group 3</Text>
      </Box>
    </Layout.Group>
  </Grid.Col>
</Grid>
```

```jsx live
<Grid>
  <Grid.Col>
    <Heading offset={3}>Stack </Heading>
    <Layout.Stack>
      <Box color="#D0F1F5" padding={20}>
        <Text>Stack 1</Text>
      </Box>
      <Box color="#D0F1F5" padding={20}>
        <Text>Stack 2</Text>
      </Box>
      <Box color="#D0F1F5" padding={20}>
        <Text>Stack 3</Text>
      </Box>
    </Layout.Stack>
  </Grid.Col>
  <Grid.Col>
    <Heading offset={3}>Stack - 20px space </Heading>
    <Layout.Stack space={20}>
      <Box color="#D0F1F5" padding={20}>
        <Text>Stack 1</Text>
      </Box>
      <Box color="#D0F1F5" padding={20}>
        <Text>Stack 2</Text>
      </Box>
      <Box color="#D0F1F5" padding={20}>
        <Text>Stack 3</Text>
      </Box>
    </Layout.Stack>
  </Grid.Col>
</Grid>
```

### AlignLayout

Use the `alignLayout` property to indicate the horizontal alignment of the items in a `Group` or `Stack`. For a Group, the possible options are `left`, `center`, and `right`. For a Stack, the possible options are `left`, `center`, and `right`. The default is set to `left` in both cases.

```jsx live
<React.Fragment>
  <Heading offset={3}>Group - top align - Default </Heading>
  <Layout.Group>
    <Box color="#D0F1F5" padding={20}>
      <Text>Group Top 1</Text>
    </Box>
    <Box color="#D0F1F5" padding={15}>
      <Text>Group Top 2</Text>
    </Box>
    <Box color="#D0F1F5" padding={10}>
      <Text>Group Top 3</Text>
    </Box>
  </Layout.Group>
  <Heading offset={3}>Group - center align </Heading>
  <Layout.Group alignLayout="center">
    <Box color="#D0F1F5" padding={20}>
      <Text>Group Default</Text>
    </Box>
    <Box color="#D0F1F5" padding={15}>
      <Text>Group Default</Text>
    </Box>
    <Box color="#D0F1F5" padding={10}>
      <Text>Group Default</Text>
    </Box>
  </Layout.Group>
  <Heading offset={3}>Group - bottom align </Heading>
  <Layout.Group alignLayout="right">
    <Box color="#D0F1F5" padding={20}>
      <Text>Group Bottom 1</Text>
    </Box>
    <Box color="#D0F1F5" padding={15}>
      <Text>Group Bottom 2</Text>
    </Box>
    <Box color="#D0F1F5" padding={10}>
      <Text>Group Bottom 3</Text>
    </Box>
  </Layout.Group>
</React.Fragment>
```

```jsx live
<React.Fragment>
  <Heading offset={3}>Stack - left align - default </Heading>
  <Layout.Stack>
    <Box color="#D0F1F5" padding={20}>
      <Text>Stack Left 1</Text>
    </Box>
    <Box color="#D0F1F5" padding={15}>
      <Text>Stack Left 2</Text>
    </Box>
    <Box color="#D0F1F5" padding={10}>
      <Text>Stack Left 3</Text>
    </Box>
  </Layout.Stack>
  <Heading offset={3}>Stack - center align </Heading>
  <Layout.Stack alignLayout="center">
    <Box color="#D0F1F5" padding={20}>
      <Text>Stack Default</Text>
    </Box>
    <Box color="#D0F1F5" padding={15}>
      <Text>Stack Default</Text>
    </Box>
    <Box color="#D0F1F5" padding={10}>
      <Text>Stack Default</Text>
    </Box>
  </Layout.Stack>
  <Heading offset={3}>Stack - right align </Heading>
  <Layout.Stack alignLayout="right">
    <Box color="#D0F1F5" padding={20}>
      <Text>Stack Right 1</Text>
    </Box>
    <Box color="#D0F1F5" padding={15}>
      <Text>Stack Right 2</Text>
    </Box>
    <Box color="#D0F1F5" padding={10}>
      <Text>Stack Right 3</Text>
    </Box>
  </Layout.Stack>
</React.Fragment>
```

### AlignItems

Use the `alignItems` property to indicate the alignment of the items in a `Group` or `Stack`. For a `Group` the vertical alignment is adjusted, whereas for a `Stack` the horizontal alignment is adjusted. For a Group, the possible options are `top`, `center`, and `bottom`. For a Stack, the possible options are `left`, `center`, and `right`. The default is set to `center` in both cases.

```jsx live
<React.Fragment>
  <Heading offset={3}>Group - top align </Heading>
  <Layout.Group alignItems="top">
    <Box color="#D0F1F5" padding={20}>
      <Text>Group Top 1</Text>
    </Box>
    <Box color="#D0F1F5" padding={15}>
      <Text>Group Top 2</Text>
    </Box>
    <Box color="#D0F1F5" padding={10}>
      <Text>Group Top 3</Text>
    </Box>
  </Layout.Group>
  <Heading offset={3}>Group - center align - Default </Heading>
  <Layout.Group>
    <Box color="#D0F1F5" padding={20}>
      <Text>Group Default</Text>
    </Box>
    <Box color="#D0F1F5" padding={15}>
      <Text>Group Default</Text>
    </Box>
    <Box color="#D0F1F5" padding={10}>
      <Text>Group Default</Text>
    </Box>
  </Layout.Group>
  <Heading offset={3}>Group - bottom align </Heading>
  <Layout.Group alignItems="bottom">
    <Box color="#D0F1F5" padding={20}>
      <Text>Group Bottom 1</Text>
    </Box>
    <Box color="#D0F1F5" padding={15}>
      <Text>Group Bottom 2</Text>
    </Box>
    <Box color="#D0F1F5" padding={10}>
      <Text>Group Bottom 3</Text>
    </Box>
  </Layout.Group>
</React.Fragment>
```

```jsx live
<React.Fragment>
  <Heading offset={3}>Stack - left align </Heading>
  <Layout.Stack alignItems="left">
    <Box color="#D0F1F5" padding={20}>
      <Text>Stack Left 1</Text>
    </Box>
    <Box color="#D0F1F5" padding={15}>
      <Text>Stack Left 2</Text>
    </Box>
    <Box color="#D0F1F5" padding={10}>
      <Text>Stack Left 3</Text>
    </Box>
  </Layout.Stack>
  <Heading offset={3}>Stack - center align - Default </Heading>
  <Layout.Stack>
    <Box color="#D0F1F5" padding={20}>
      <Text>Stack Default</Text>
    </Box>
    <Box color="#D0F1F5" padding={15}>
      <Text>Stack Default</Text>
    </Box>
    <Box color="#D0F1F5" padding={10}>
      <Text>Stack Default</Text>
    </Box>
  </Layout.Stack>
  <Heading offset={3}>Stack - right align </Heading>
  <Layout.Stack alignItems="right">
    <Box color="#D0F1F5" padding={20}>
      <Text>Stack Right 1</Text>
    </Box>
    <Box color="#D0F1F5" padding={15}>
      <Text>Stack Right 2</Text>
    </Box>
    <Box color="#D0F1F5" padding={10}>
      <Text>Stack Right 3</Text>
    </Box>
  </Layout.Stack>
</React.Fragment>
```

### Grow

Use the `grow` property to indicate whether the grouped components should be stretched to fill the space horizontally. The default is set to `false`.

```jsx live
<React.Fragment>
  <Heading offset={3}>Group - default </Heading>
  <Layout.Group>
    <Box color="#D0F1F5" padding={20}>
      <Text>One</Text>
    </Box>
    <Box color="#D0F1F5" padding={20}>
      <Text>Two</Text>
    </Box>
    <Box color="#D0F1F5" padding={20}>
      <Text>Three</Text>
    </Box>
  </Layout.Group>
  <Heading offset={3}>Group - grow </Heading>
  <Layout.Group grow>
    <Box color="#D0F1F5" padding={20}>
      <Text>Item 1</Text>
    </Box>
    <Box color="#D0F1F5" padding={20}>
      <Text>Item 2</Text>
    </Box>
    <Box color="#D0F1F5" padding={20}>
      <Text>Item 3</Text>
    </Box>
  </Layout.Group>
</React.Fragment>
```

```jsx live
<React.Fragment>
  <Heading offset={3}>Stack - default </Heading>
  <Layout.Stack>
    <Box color="#D0F1F5" padding={20}>
      <Text>One</Text>
    </Box>
    <Box color="#D0F1F5" padding={20}>
      <Text>Two</Text>
    </Box>
    <Box color="#D0F1F5" padding={20}>
      <Text>Three</Text>
    </Box>
  </Layout.Stack>
  <Heading offset={3}>Stack - grow </Heading>
  <Layout.Stack grow>
    <Box color="#D0F1F5" padding={20}>
      <Text>One</Text>
    </Box>
    <Box color="#D0F1F5" padding={20}>
      <Text>Two</Text>
    </Box>
    <Box color="#D0F1F5" padding={20}>
      <Text>Three</Text>
    </Box>
  </Layout.Stack>
</React.Fragment>
```

### Shrink

Use the `shrink` property to indicate whether the grouped components should be shrunk to fill the space horizontally in a `Group`, to prevent an overflow. The default is set to `false`.

```jsx live
<React.Fragment>
  <Heading offset={3}>Group - default </Heading>
  <Layout.Group space="$core.spacing.600">
    <Box color="#D0F1F5" padding={20}>
      <Text>Lorem Ipsum Dolor </Text>
    </Box>
    <Box color="#D0F1F5" padding={20}>
      <Text>Lorem Ipsum Dolor </Text>
    </Box>
    <Box color="#D0F1F5" padding={20}>
      <Text>Lorem Ipsum Dolor </Text>
    </Box>
    <Box color="#D0F1F5" padding={20}>
      <Text>Lorem Ipsum Dolor </Text>
    </Box>
  </Layout.Group>
  <Heading offset={3}>Group - shrink </Heading>
  <Layout.Group shrink space="$core.spacing.600">
    <Box color="#D0F1F5" padding={20}>
      <Text>Lorem Ipsum Dolor </Text>
    </Box>
    <Box color="#D0F1F5" padding={20}>
      <Text>Lorem Ipsum Dolor </Text>
    </Box>
    <Box color="#D0F1F5" padding={20}>
      <Text>Lorem Ipsum Dolor </Text>
    </Box>
    <Box color="#D0F1F5" padding={20}>
      <Text>Lorem Ipsum Dolor </Text>
    </Box>
  </Layout.Group>
</React.Fragment>
```

## Layout.Insert

Used to place elements before and after a central component. Padding is `$semantic.spacing.sm` and direction is `row`by default.

```jsx live
<React.Fragment>
  <Layout.Insert
    icon={{ name: 'chevron_left' }}
    iconPosition="leading"
    icon={{ name: 'chevron_right' }}
    iconPosition="trailing"
    padding="$semantic.spacing.sm"
  >
    <Box color="#D0F1F5" padding={20}>
      <Text>Center</Text>
    </Box>
  </Layout.Insert>
</React.Fragment>
```

## Layout.Space

Adds a space of height `space`. Default is `16px`.

```jsx live
<React.Fragment>
  <Box color="#D0F1F5" padding={20}>
    <Text>One</Text>
  </Box>
  <Layout.Space />
  <Box color="#D0F1F5" padding={20}>
    <Text>Two</Text>
  </Box>
</React.Fragment>
```

</Tab>
<Tab label="Integration">

<Docs.PropsTable
  of="Layout.Group"
  rows={[
    {
      name: 'children',
      type: 'ReactNode',
      description: 'The element the group wraps',
    },
    {
      name: 'width',
      type: 'number | string',
      description: 'Set the width of the group',
    },
    {
      name: 'alignItems',
      type: 'top | center | bottom',
      description: 'Adjust the vertical alignment of items in the group',
      default: 'center',
    },
    {
      name: 'alignLayout',
      type: 'left | center | right',
      description: 'Set the position of the group',
      default: 'left',
    },
    {
      name: 'grow',
      type: 'boolean',
      description: 'Flag to stretch grouped components to fit evenly or not',
      default: 'false',
    },
    {
      name: 'space',
      type: 'number',
      description: 'Distance between elements in the Group component',
      default: '$layout-group.space',
    },
    {
      name: 'shrink',
      type: 'boolean',
      description:
        'Flag to indicate whether the grouped components should be shrunk to ill the space horizontally in a `Group`, to prevent an overflow',
      default: 'false',
    },
    {
      name: 'wrap',
      type: 'boolean',
      description: 'Flag indicating if the elements should wrap to a new line',
      default: 'false',
    },
    {
      name: 'wrap',
      type: 'boolean',
      description: 'Flag indicating if the elements should wrap to a new line',
    },
  ]}
/>

<Docs.PropsTable
  of="Layout.Stack"
  rows={[
    {
      name: 'children',
      type: 'ReactNode',
      description: 'The element the stack wraps',
    },
    {
      name: 'width',
      type: 'number | string',
      description: 'Set the width of the stack',
    },
    {
      name: 'alignItems',
      type: 'left | center | right',
      description: 'Adjust the horizontal alignment of items in the stack',
      default: 'center',
    },
    {
      name: 'alignLayout',
      type: 'left | center | right',
      description: 'Set the position of the stack',
      default: 'left',
    },
    {
      name: 'grow',
      type: 'boolean',
      description: 'Flag to stretch grouped components to fit evenly or not',
      default: 'false',
    },
    {
      name: 'space',
      type: 'number',
      description: 'Distance between elements in the Group component',
      default: 8,
    },
  ]}
/>

<Docs.PropsTable
  of="Layout.Insert"
  rows={[
    {
      name: 'children',
      type: 'ReactNode',
      description: 'The elements in the center',
    },
    {
      name: 'before',
      type: 'node',
      description: 'Element displayed before children',
    },
    {
      name: 'after',
      type: 'node',
      description: 'Element displayed after children',
    },
    {
      name: 'direction',
      type: 'row | column',
      description: 'Position of before and after nodes',
      default: 'row',
    },
    {
      name: 'grow',
      type: 'boolean',
      description: 'Flag to stretch grouped components to fit evenly or not',
      default: 'false',
    },
    {
      name: 'padding',
      type: 'number',
      description: 'Padding between elements',
      default: '$semantic.spacing.sm',
    },
  ]}
/>

<Docs.PropsTable
  of="Layout.Space"
  rows={[
    {
      name: 'space',
      type: 'number | string',
      description: 'The height of the space',
      default: 16,
    },
  ]}
/>

<Docs.ClassesTable
  of="Layout.Group"
  rows={[
    {
      name: 'layout-group',
      description: 'Group root element',
    },
  ]}
/>

<Docs.ClassesTable
  of="Layout.Stack"
  rows={[
    {
      name: 'layout-stack',
      description: 'Stack root element',
    },
  ]}
/>

<Docs.ClassesTable
  of="Layout.Insert"
  rows={[
    {
      name: 'layout-insert-root',
      description: 'Insert root element',
    },
    {
      name: 'layout-insert-before',
      description: 'Insert before element',
    },
    {
      name: 'layout-insert-after',
      description: 'Insert after element',
    },
  ]}
/>

<Docs.ClassesTable
  of="Layout.Space"
  rows={[
    {
      name: 'layout-space-root',
      description: 'Space root element',
    },
  ]}
/>

</Tab>
</Tabs>

---
id: link
category: Navigation
title: Link
description: Used to navigate to other pages, or sections of a page.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=11579-66904&mode=design&t=lQdpLQ0uWdxbRS9p-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { Link } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Link',
  inputs: [
    {
      prop: 'children',
      type: 'string',
    },
    {
      prop: 'size',
      type: 'select',
      options: [
        { label: 'large', value: 'large' },
        { label: 'medium', value: 'medium' },
        { label: 'small', value: 'small' },
      ],
    },
    {
      prop: 'href',
      type: 'string',
    },
    {
      prop: 'underline',
      type: 'boolean',
    },
  ]
}

  <Link>Link Sandbox</Link>
```

**The children passed into the link must be a string or an error will appear.**

## Text

Change the children of the link to set the text. Note that the child must be a string.

```jsx live
<Link
  href="https://www.uhc.com/"
  after={({ color }) => {
    return <IconSymbol icon="chevron_right" color={color} />;
  }}
>
  UHC
</Link>
```

## Size

Use the `size` prop to set the size of the link. The default is set to `large`.

```jsx live
<Layout.Stack alignItems="left">
  <Link size="large" href="https://abyss.uhc.com/">
    Large Link / 18px
  </Link>
  <Link size="medium" href="https://abyss.uhc.com/">
    Medium Link / 16px
  </Link>
  <Link size="small" href="https://abyss.uhc.com/">
    Small Link / 14px
  </Link>
</Layout.Stack>
```

## Color

Change the color of the link using the `color` prop. This accepts a design token or color string.

```jsx live
<Layout.Stack alignItems="left">
  <Link color="blue">Blue Link</Link>
  <Link color="#FF5733">Custom Color Link</Link>
</Layout.Stack>
```

### Alt

The `alt` prop can be used to create a link that contrasts against a dark background. Uses the `alt` color tokens.

```jsx live
<Box color="$semantic.color.border.content.primary" padding={4}>
  <Link alt href="https://abyss.uhc.com/">
    Alt Color Link
  </Link>
</Box>
```

## Underline

The `underline` prop is used to underline the link text. The default is set to `false`.

```jsx live
<Layout.Stack alignItems="left">
  <Link href="https://abyss.uhc.com/">Normal Link</Link>
  <Link href="https://abyss.uhc.com/" underline>
    Underlined Link
  </Link>
</Layout.Stack>
```

## Inline

The `inline` prop allows links to be embedded within other text content, keeping them inline with the surrounding text. When `inline` is set to `true`, the link behaves like regular inline text without breaking onto a new line. The default is set to `false`.

**Note:** When using the inline variant, the `before` and `after` props are not supported.

```jsx live
<Layout.Stack alignItems="left">
  <Text>
    This is a paragraph with an{' '}
    <Link inline href="https://abyss.uhc.com/">
      inline link
    </Link>{' '}
    embedded in the text content.
  </Text>
  <Text>
    For more information, visit our{' '}
    <Link inline underline href="https://abyss.uhc.com/">
      documentation site
    </Link>{' '}
    to learn more.
  </Text>
</Layout.Stack>
```

## Inserting Elements

Insert elements into the Link component using the `before` and `after` props.

To account for press state color, the `before` and `after` props can accept a function whose arguments contain the properties `color` and `isPressed`.

```jsx live
<Layout.Stack>
  <Link
    before={({ color }) => {
      return <IconSymbol icon="chevron_left" color={'color'} />;
    }}
    href="https://abyss.uhc.com/"
  >
    Abyss Docs
  </Link>
  <Link
    after={({ isPressed }) => {
      return (
        <IconSymbol icon="chevron_right" color={isPressed ? 'green' : 'red'} />
      );
    }}
  >
    Abyss Docs
  </Link>
  <Link
    before={({ color }) => <IconSymbol icon="info" size={14} color={color} />}
    size="small"
  >
    Abyss Docs
  </Link>
</Layout.Stack>
```

## Content Guidelines

The informational (left) icon should be used when the link is being used as a Tooltip. Do not use the right icon in this case. Tooltips can appear as icons only, or with text.

```jsx live
<Layout.Stack>
  <Link before={<IconSymbol icon="info" />}></Link>
  <Link before={<IconSymbol icon="info" />}>What is this?</Link>
</Layout.Stack>
```

A directional (right) icon should be used when the link will take you to another screen.

```jsx live
<Layout.Stack>
  <Link after={<IconSymbol icon="chevron_right" />}>View results</Link>
</Layout.Stack>
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Link"
  rows={[
    {
      name: 'before',
      type: 'JSX.Element | Function',
      description: 'Insert element into link component before children',
    },
    {
      name: 'after',
      type: 'JSX.Element | Function',
      description: 'Insert element into link component after children',
    },
    {
      name: 'href',
      type: 'string',
      description: 'Set the URL of the link',
    },
    {
      name: 'children',
      type: 'string',
      description: 'Set the text of the link',
    },
    {
      name: 'size',
      type: '"large" | "medium" | "small"',
      description: 'Set the size of the link',
      default: 'large',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Set the color of the link',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Callback fired when the link is pressed',
    },
    {
      name: 'underline',
      type: 'boolean',
      description: 'Used to underline the link text',
      default: 'false',
    },
    {
      name: 'inline',
      type: 'boolean',
      description: 'Keeps link inline with surrounding text. When true, before and after props are not supported',
      default: 'false',
    },
  ]}
/>

<Docs.ClassesTable
  of="Link"
  rows={[
    {
      name: 'link-root',
      description: 'Link root element',
    },
    {
      name: 'link-label',
      description: 'Link label',
    },
    {
      name: 'link-icon',
      description: 'Link icon',
    },
  ]}
/>

<Docs.TranslationTable of="Link" rows={['Link.iconTitle']} />

</Tab>
<Tab label="Tokens">

<Docs.ComponentTokensTable of="Link" keys={['link']} />

</Tab>
</Tabs>

---
id: loading-spinner
category: Overlay
title: LoadingSpinner
description: Infinite loading spinner.
design: https://www.figma.com/design/wCMblLsq9TxAQvKzY3EfCt/v1.66.0-App-Abyss-UHC-Component-Library?node-id=12985-84753&p=f&t=Q9ZAauYOQC2ugiP4-0
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { LoadingSpinner } from '@uhg-abyss/mobile';
```

## Overview

Loading Spinner requires the `accessibilityLabel` prop to describe what happens while the loading spinner is active. Common labels are 'Submitting Form', 'Downloading Files', 'Content is loading', etc. Be as descriptive as possible.

```jsx
<LoadingSpinner accessibilityLabel="Downloading" isLoading={isLoading} />
```

## Size

Loading spinner comes in two sizes, `xs` and `sm`. With the `xs` variant being used solely for use on buttons.

```jsx live
() => {
  return (
    <Layout.Group space={20}>
      <LoadingSpinner
        size="xs"
        isLoading
        accessibilityLabel="Downloading files"
      />
      <LoadingSpinner isLoading accessibilityLabel="Importing data" />
    </Layout.Group>
  );
};
```

## Color

The `color` property allows changing the color of the loading spinner.

```jsx live
() => {
  const [isLoading, setIsLoading] = useState(true);
  const toggleLoading = () => {
    setIsLoading(!isLoading);
  };

  return (
    <Layout.Stack space={20}>
      <Layout.Group space={20}>
        <Box color="$semantic.color.border.content.primary">
          <LoadingSpinner
            color="$loading-spinner.color.surface.spinner.alt"
            isLoading={isLoading}
            accessibilityLabel="Downloading files"
          />
        </Box>
        <LoadingSpinner
          isLoading={isLoading}
          accessibilityLabel="Submitting form"
        />
        <LoadingSpinner
          color="blue"
          isLoading={isLoading}
          accessibilityLabel="Submitting form"
        />
        <LoadingSpinner
          color="red"
          isLoading={isLoading}
          accessibilityLabel="Submitting form"
        />
      </Layout.Group>
    </Layout.Stack>
  );
};
```

## Alt

The `alt` property changes the color of the loading spinner.

```jsx live
() => {
  return (
    <Layout.Group space={20}>
      <Box color="$semantic.color.border.content.primary">
        <LoadingSpinner alt isLoading accessibilityLabel="Downloading files" />
      </Box>
      <LoadingSpinner isLoading accessibilityLabel="Submitting form" />
    </Layout.Group>
  );
};
```

## Heading

Use the `heading` prop to add text below the spinner. Only available when the size is set to `'sm'`.

```jsx live
<LoadingSpinner
  isLoading
  size="sm"
  accessibilityLabel="Loading"
  heading="Loading, please wait..."
/>
```

## Button

The Button component has LoadingSpinner integration. Head over to the [Button](/mobile/ui/button) component documentation to learn more.

```jsx live
() => {
  return (
    <Button variant="brand" isLoading accessibilityLabel="Importing data">
      Submit
    </Button>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="LoadingSpinner"
  rows={[
    {
      name: 'heading',
      type: 'string',
      description:
        'The heading of the spinner. Only available when size is set to "sm"',
    },
    {
      name: 'isLoading',
      type: 'boolean',
      default: 'false',
      description:
        'Flag to show or hide the loading spinner. If true, spinner is visible',
    },
    {
      name: 'size',
      type: '"xs" | "sm"',
      default: '"sm"',
      description: 'Set the size of the spinner',
    },
    {
      name: 'accessibilityLabel',
      type: 'string',
      description:
        'Text to describe what is happening while the loading spinner is active',
    },
    {
      name: 'color',
      type: 'string',
      default: '"$loading-spinner.color.surface.spinner.regular"',
      description: 'Color of the loading spinner',
    },
    {
      name: 'alt',
      type: 'boolean',
      default: 'false',
      description: 'Flag to change the loading spinner color variant',
    },
  ]}
/>

<Docs.ClassesTable
  of="LoadingSpinner"
  rows={[
    {
      name: 'loading-spinner-root',
      description: 'Loading spinner root element',
    },
    {
      name: 'loading-spinner-heading',
      description: 'Heading element',
    },
  ]}
/>

<Docs.TranslationTable of="LoadingSpinner" rows={['loading']} />

</Tab>

<Tab label="Accessibility">

Following the requirements of WAI-ARIA, Loading Spinner follows the requirements 4.1.3: Status Messages. Status messages are defined by WCAG as messages that provide information on the success or results of a user action, but do not change the user's context (i.e., take focus).

Loading Spinner is programmed through the `accessibilityLabel` property, and has been tested using a screen reader to present a status message to assistive technology without receiving focus.

Adheres to the [Status messages WAI-ARIA design pattern](https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html).

```jsx live
() => {
  return <LoadingSpinner isLoading accessibilityLabel="Downloading files" />;
};
```

## Dynamic Type

LoadingSpinner does not scale. If the `size` prop is set to "xs" and dynamic type scales past 3XL, then `size` will adjust to "sm".

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="LoadingSpinner" keys={['loading-spinner']} />

</Tab>

<Tab label="Migration">

<Docs.ComparisonTable of="LoadingSpinner" type="class" />

<Docs.ComparisonTable of="LoadingSpinner" type="props" />

</Tab>
</Tabs>

---
id: modal
category: Overlay
title: Modal
description: Appears from the bottom of the screen and fills up the entire screen, requiring user action to clear it.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=15291-83943
---

<Tabs>

<Tab label="Overview">

```jsx
import { Modal } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Modal',
  inputs: [
    {
      prop: 'children',
      type: 'string',
    },
    {
      prop: 'heading',
      type: 'string',
    },
  ]
}

() => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <React.Fragment>
      <Modal heading="Enter heading here" isVisible={isVisible}>
        <Modal.Section>
          <Button
            onPress={() => setIsVisible(false)}
            variant='destructive'
            size='small'
          >
            Click to close modal
          </Button>
        </Modal.Section>
      </Modal>
      <Button onPress={() => setIsVisible(true)}>
        Toggle Modal
      </Button>
    </React.Fragment>
  );
}

```

## useState

Pass the value from the `useState` hook to the `isVisible` modal prop to set the open state of the modal.

```jsx live
() => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <React.Fragment>
      <Button onPress={() => setModalVisible(true)}>Open Modal</Button>
      <Modal
        heading="Modal Heading"
        isVisible={modalVisible}
        actionLeft={
          <IconSymbol
            icon="close"
            color="$semantic.color.icon.interactive.rest.primary"
            title="Close"
            isScreenReadable
          />
        }
        onActionLeftPress={() => setModalVisible(false)}
      >
        <Modal.Section>
          <Text>My text</Text>
        </Modal.Section>
      </Modal>
    </React.Fragment>
  );
};
```

## Heading

Use the `heading` prop to set the heading of the modal. For accessibility purposes, a heading is required.
Please provide a heading that accurately describes the content of the modal so a screen reader
can provide this description to the user.

```jsx live
() => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <React.Fragment>
      <Button onPress={() => setModalVisible(true)}>Open Modal</Button>
      <Modal heading="Custom Heading" isVisible={modalVisible}>
        <Modal.Section>
          <Text>Custom Text</Text>
          <Button
            onPress={() => setModalVisible(false)}
            variant="destructive"
            size="small"
          >
            Click to close modal
          </Button>
        </Modal.Section>
      </Modal>
    </React.Fragment>
  );
};
```

## Scrollable

Use the `scrollable` prop to make the content scrollable. Setting the prop to `false` changes the Modal's content container from a ScrollView to a View. Defaults to `true`.

## Action Buttons

Action Buttons can be placed on either the left or right side of the header using the `actionLeft` and `actionRight` props.
Use the `onActionLeftPress` prop to fire a callback when the left action is pressed, and `onActionRightPress` prop to
fire a callback when the right action is pressed.

If one of the actions is an icon, make sure to use the `heading` and `isScreenReadable` props on the icon for accessibility.

```jsx live
() => {
  const [modalVisible, setModalVisible] = useState(false);

  const showToast = () => {
    Toast.show({
      placement: 'top',
      text: 'You clicked the right action button',
      variant: 'info',
    });
  };

  return (
    <React.Fragment>
      <Button onPress={() => setModalVisible(true)}>Open Modal</Button>
      <Modal
        heading="Action Buttons"
        isVisible={modalVisible}
        actionLeft={
          <IconSymbol
            icon="close"
            color="$semantic.color.icon.interactive.rest.primary"
            title="Close"
            isScreenReadable
          />
        }
        actionRight={
          <IconSymbol
            icon="more_vert"
            color="$semantic.color.icon.interactive.rest.primary"
            title="More Options"
            isScreenReadable
          />
        }
        onActionLeftPress={() => setModalVisible(false)}
        onActionRightPress={showToast}
      >
        <ToastProvider>
          <Modal.Section>
            <Text>
              The left and right side of the header have an action button
            </Text>
            <Layout.Space />
            <Text>Click on the left action button to close the modal</Text>
            <Text>
              Click on the right action button to display a toast message
            </Text>
          </Modal.Section>
        </ToastProvider>
      </Modal>
    </React.Fragment>
  );
};
```

## Footer

Use the `footer` prop to place content at the bottom of the modal.

```jsx live
() => {
  const [modalVisible, setModalVisible] = useState(false);

  const showToast = () => {
    Toast.show({
      placement: 'top',
      text: 'You clicked the right action button',
      variant: 'info',
    });
  };

  return (
    <React.Fragment>
      <Button onPress={() => setModalVisible(true)}>Open Modal</Button>
      <Modal
        heading="Footer"
        isVisible={modalVisible}
        footer={
          <View style={{ padding: 16 }}>
            <Button onPress={() => setModalVisible(false)}>
              Press here to close the modal
            </Button>
          </View>
        }
      ></Modal>
    </React.Fragment>
  );
};
```

## Modal Section

Wrap content in a `Modal.Section` component to add padding to the content.

```jsx live
() => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <React.Fragment>
      <Button onPress={() => setModalVisible(true)}>Open Modal</Button>
      <Modal
        heading="Modal Section"
        isVisible={modalVisible}
        actionLeft={
          <IconSymbol
            icon="close"
            color="$semantic.color.icon.interactive.rest.primary"
            title="Close"
            isScreenReadable
          />
        }
        onActionLeftPress={() => setModalVisible(false)}
      >
        <Modal.Section>
          <Text>This text is inside of the `Modal.Section` component</Text>
        </Modal.Section>
      </Modal>
    </React.Fragment>
  );
};
```

## onClose <SystemLabel system='ios'/>

Use `onClose` to close the modal when swiping the modal down on iOS devices.

```jsx
() => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <Modal
      heading="Swipeable Modal"
      isVisible={modalVisible}
      actionLeft={
        <IconSymbol
          icon="close"
          color="$semantic.color.icon.interactive.rest.primary"
          title="Close"
          isScreenReadable
        />
      }
      onActionLeftPress={() => setModalVisible(false)}
      onClose={() => setModalVisible(false)}
    >
      <Modal.Section>
        <Text>Swipe the modal down</Text>
      </Modal.Section>
    </Modal>
  );
};
```

## Advanced Layout

Layouts like BottomSheet and Modal can be used in combination with each other to create flows.

```jsx live
() => {
  const team = [
    {
      firstName: 'Michael',
      lastName: 'White',
      linkText: 'California',
      subText: 'MM/DD/YYYY',
      value: '1',
    },
    {
      firstName: 'Thomas',
      lastName: 'Musengwa',
      linkText: 'Arkansas',
      subText: 'MM/DD/YYYY',
      value: '2',
    },
    {
      firstName: 'Bailey',
      lastName: 'Surowiec',
      linkText: 'Illinois',
      subText: 'MM/DD/YYYY',
      value: '3',
    },
    {
      firstName: 'Pablo',
      lastName: 'Zepeda',
      linkText: 'California',
      subText: 'MM/DD/YYYY',
      value: '4',
    },
  ];

  const locations = [
    {
      name: 'Alabama',
      value: 'AL',
    },
    {
      name: 'Alaska',
      value: 'AK',
    },
    {
      name: 'Arizona',
      value: 'AZ',
    },
    {
      name: 'Arkansas',
      value: 'AR',
    },
    {
      name: 'California',
      value: 'CA',
    },
    {
      name: 'Colorado',
      value: 'CO',
    },
    {
      name: 'Connecticut',
      value: 'CT',
    },
    {
      name: 'Delaware',
      value: 'DE',
    },
    {
      name: 'Florida',
      value: 'FL',
    },
    {
      name: 'Georgia',
      value: 'GA',
    },
    {
      name: 'Hawaii',
      value: 'HI',
    },
    {
      name: 'Idaho',
      value: 'ID',
    },
    {
      name: 'Illinois',
      value: 'IL',
    },
    {
      name: 'Indiana',
      value: 'IN',
    },
    {
      name: 'Iowa',
      value: 'IA',
    },
    {
      name: 'Kansas',
      value: 'KS',
    },
    {
      name: 'Kentucky',
      value: 'KY',
    },
    {
      name: 'Louisiana',
      value: 'LA',
    },
    {
      name: 'Maine',
      value: 'ME',
    },
    {
      name: 'Maryland',
      value: 'MD',
    },
    {
      name: 'Massachusetts',
      value: 'MA',
    },
    {
      name: 'Michigan',
      value: 'MI',
    },
    {
      name: 'Minnesota',
      value: 'MN',
    },
    {
      name: 'Mississippi',
      value: 'MS',
    },
    {
      name: 'Missouri',
      value: 'MO',
    },
    {
      name: 'Montana',
      value: 'MT',
    },
    {
      name: 'Nebraska',
      value: 'NE',
    },
    {
      name: 'Nevada',
      value: 'NV',
    },
    {
      name: 'New Hampshire',
      value: 'NH',
    },
    {
      name: 'New Jersey',
      value: 'NJ',
    },
    {
      name: 'New Mexico',
      value: 'NM',
    },
    {
      name: 'New York',
      value: 'NY',
    },
    {
      name: 'North Carolina',
      value: 'NC',
    },
    {
      name: 'North Dakota',
      value: 'ND',
    },
    {
      name: 'Ohio',
      value: 'OH',
    },
    {
      name: 'Oklahoma',
      value: 'OK',
    },
    {
      name: 'Oregon',
      value: 'OR',
    },
    {
      name: 'Pennsylvania',
      value: 'PA',
    },
    {
      name: 'Rhode Island',
      value: 'RI',
    },
    {
      name: 'South Carolina',
      value: 'SC',
    },
    {
      name: 'South Dakota',
      value: 'SD',
    },
    {
      name: 'Tennessee',
      value: 'TN',
    },
    {
      name: 'Texas',
      value: 'TX',
    },
    {
      name: 'Utah',
      value: 'UT',
    },
    {
      name: 'Vermont',
      value: 'VT',
    },
    {
      name: 'Virginia',
      value: 'VA',
    },
    {
      name: 'Washington',
      value: 'WA',
    },
    {
      name: 'West Virginia',
      value: 'WV',
    },
    {
      name: 'Wisconsin',
      value: 'WI',
    },
    {
      name: 'Wyoming',
      value: 'WY',
    },
  ];

  const [data, setData] = useState(team);
  const [value, setValue] = useState(data[0].value);
  const [member, setMember] = useState(data[0]);

  const [isVisible, setIsVisible] = useState(false);
  const [showModal, setShowModal] = useState(false);

  const getCurrentMember = (data, val) => {
    return data.find(({ value }) => value === val);
  };

  const getLocation = (locations, val) => {
    return locations.find(({ value }) => value === val);
  };

  const showToastMessage = () => {
    Toast.show({
      text: 'Member changed',
      variant: 'success',
    });
  };

  const handlePress = () => {
    setIsVisible(true);
  };

  const updateTeam = (newLocation) => {
    const newArr = data.map((member) => {
      if (member.value === value) {
        member.linkText = newLocation;
      }
      return member;
    });
    setData(newArr);
  };

  const handlePressLink = (value) => {
    const currentMember = getCurrentMember(data, value);
    setValue(currentMember.value);
    setShowModal(true);
  };

  const handleButtonPress = () => {
    const currentMember = getCurrentMember(data, value);
    setMember(currentMember);
    setIsVisible(false);
    showToastMessage();
  };

  const handleCellPress = (val) => {
    const newLocation = getLocation(locations, val);
    updateTeam(newLocation.name);
    const currentMember = getCurrentMember(data, value);
    Toast.show({
      text:
        currentMember.firstName +
        "'s location updated to " +
        newLocation.name +
        '!',
      variant: 'success',
    });
  };

  const TextView = styled('View', {
    justifyContent: 'center',
    paddingLeft: 9,
  });

  const Content = styled('View', {
    alignItems: 'center',
    justifyContent: 'space-between',
    flexDirection: 'row',
    backgroundColor: '$semantic.color.surface.container.primary',
    padding: '$semantic.spacing.lg',
  });

  return (
    <ToastProvider>
      <Layout.Stack grow>
        <Content>
          <Layout.Group space={0}>
            <IconSymbol
              icon="location_on"
              variant="outlined"
              color="$semantic.color.surface.accent.decorative.3"
            />
            <TextView>
              <Text
                color="$semantic.color.text.body.alt"
                fontWeight="$core.font-weight.bold"
                lineHeight="$core.line-height.60"
                size="$core.font-size.60"
              >
                {'For ' + member.firstName}
              </Text>
              <Text
                color="$semantic.color.text.body.alt"
                fontWeight="$core.font-weight.regular"
                lineHeight="$core.line-height.60"
                size="$core.font-size.60"
              >
                {member.linkText}
              </Text>
            </TextView>
          </Layout.Group>
          <View>
            <Button onPress={handlePress} size="small" variant={'alt'}>
              Change
            </Button>
          </View>
        </Content>
        <BottomSheet
          isVisible={isVisible}
          onClose={() => setIsVisible(false)}
          heading={'Select a member'}
          footer={<Button onPress={handleButtonPress}>Confirm</Button>}
        >
          <CellGroup type="radio" value={value} onChange={setValue}>
            {data.map(
              ({ linkText, value, firstName, lastName, subText }, i) => (
                <Cell
                  key={value}
                  value={value}
                  heading={firstName + ' ' + lastName}
                  paragraph={subText}
                  leadingContent={
                    <Avatar
                      initials={firstName[0] + lastName[0]}
                      colorTheme={i + 1}
                    />
                  }
                  link={
                    linkText && (
                      <Link
                        size="small"
                        onPress={() => handlePressLink(value)}
                        after={<IconSymbol icon="chevron_right" size={18} />}
                      >
                        {linkText}
                      </Link>
                    )
                  }
                />
              )
            )}
          </CellGroup>
          <Modal
            heading={'Select a Location'}
            isVisible={showModal}
            onClose={() => setShowModal(false)}
            actionLeft={
              <IconSymbol
                icon="chevron_left"
                color="$semantic.color.icon.interactive.rest.primary"
                title="Back"
                isScreenReadable
              />
            }
            onActionLeftPress={() => {
              setShowModal(false);
            }}
          >
            <CellGroup value={value}>
              <ToastProvider>
                {locations.map(({ value, name }) => (
                  <Cell
                    key={value}
                    heading={name}
                    onPress={() => handleCellPress(value)}
                    iconRight={
                      <IconSymbol
                        icon="check"
                        color="$semantic.color.icon.interactive.rest.primary-alt"
                        title="Select"
                        isScreenReadable
                      />
                    }
                  />
                ))}
              </ToastProvider>
            </CellGroup>
          </Modal>
        </BottomSheet>
      </Layout.Stack>
    </ToastProvider>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Modal"
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'Content inside of the modal',
    },
    {
      name: 'heading',
      type: 'string',
      description: 'The heading of the modal',
    },
    {
      name: 'isVisible',
      type: 'boolean',
      description: 'Flag to check if modal is visible',
    },
    {
      name: 'footer',
      type: 'node',
      description: 'Content inside the footer section of the modal',
    },
    {
      name: 'actionLeft',
      type: 'node',
      description: 'The action placed on the left side of the header',
    },
    {
      name: 'actionRight',
      type: 'node',
      description: 'The action placed on the right side of the header',
    },
    {
      name: 'sticker',
      type: 'node',
      description:
        'Content at the top of the modal that stays in the header and does not scroll',
    },
    {
      name: 'onActionLeftPress',
      type: 'function',
      description: 'Callback fired when the left action button is pressed',
    },
    {
      name: 'onActionRightPress',
      type: 'function',
      description: 'Callback fired when the right action button is pressed',
    },
    {
      name: 'onClose',
      type: 'function',
      description: 'Callback fired when the modal is triggered to close',
      system: 'ios',
    },
    {
      name: 'onDismiss',
      type: 'function',
      description: 'Callback fired when the modal is closed',
      system: 'ios',
    },
    {
      name: 'hideBorder',
      type: 'boolean',
      description: 'Flag to hide the header border',
      default: 'false',
    },
    {
      name: 'showsVerticalScrollIndicator',
      type: 'boolean',
      description: 'Flag to show the vertical scroll indicator',
      default: 'false',
    },
    {
      name: 'scrollable',
      type: 'boolean',
      description:
        "Flag to make the content scrollable. Setting to false will turn the Modal's content container into a View",
      default: 'true',
    },
  ]}
/>

<Docs.PropsTable
  of="Modal.Section"
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'Content inside of the section',
    },
  ]}
/>

<Docs.ClassesTable
  of="Modal"
  rows={[
    {
      name: 'modal-root',
      description: 'Modal root element',
    },
    {
      name: 'modal-header',
      description: 'Modal header container',
    },
    {
      name: 'modal-action-left-button',
      description: 'Action left container',
    },
    {
      name: 'modal-children-container',
      description: 'Modal content',
    },
    {
      name: 'modal-action-right-button',
      description: 'Action right container',
    },
    {
      name: 'modal-heading-container',
      description: 'Modal heading container',
    },
    {
      name: 'modal-heading',
      description: 'Modal heading element',
    },
    {
      name: 'modal-long-heading',
      description: 'Modal heading element',
    },
    {
      name: 'modal-footer',
      description: 'Modal footer container',
    },
  ]}
/>

<Docs.ClassesTable
  of="Modal.Section"
  rows={[
    {
      name: 'modal-section-root',
      description: 'Modal section root element',
    },
  ]}
/>

</Tab>

<Tab label="Accessibility">

## Focus Guidance

Abyss does not control the focus of components on the screen when the Modal is toggled off. To meet
accessibility guidelines, the focus must be set to the previous node when closed. The [useSetFocus](/mobile/hooks/use-set-focus) hook can be used for this.

For example, if a button is pressed to open a Modal, focus must return to that button once the Modal is closed, so that a screen reader or keyboard user may continue using the app where they left off.

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="Modal" keys={['modal']} />

</Tab>
</Tabs>

---
id: navigation-container
category: Navigation
title: NavigationContainer
description: Responsible for managing app state and linking your top-level navigator to the app environment.
---

<Tabs>

<Tab label="Overview">

```jsx
import { NavigationContainer } from '@uhg-abyss/mobile';
```

The container takes care of platform specific integration and provides various useful functionality:

- Deep link integration with the linking prop.
- Notify state changes for screen tracking, state persistence etc.
- Handle system back button on Android by using the BackHandler API from React Native.

## Usage

```jsx
import { NavigationContainer, createStackNavigator } from '@uhg-abyss/mobile';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>{/* ... */}</Stack.Navigator>
    </NavigationContainer>
  );
}
```

## Initial State

The `initialState` prop accepts initial state for the navigator. This can be useful for cases such as deep linking, state persistence etc.

**Example:**

```jsx
<NavigationContainer initialState={initialState}>
  {/* ... */}
</NavigationContainer>
```

Providing a custom initial state object will override the initial state object obtained via linking configuration or from browser's URL. If you're providing an initial state object, make sure that you don't pass it on web and that there's no deep link to handle.

## State Change

The `onStateChange` prop accepts a function that gets called every time navigation state changes. It receives the new navigation state as the argument.

You can use it to track the focused screen, persist the navigation state etc.

**Example:**

```jsx
<NavigationContainer
  onStateChange={(state) => console.log('New state is', state)}
>
  {/* ... */}
</NavigationContainer>
```

## onReady

The `onReady` prop accepts a function which is called after the navigation container and all its children finish mounting for the first time. You can use it for:

Making sure that the ref is usable. See docs regarding initialization of the ref for more details.
Hiding your native splash screen

**Example:**

```jsx
<NavigationContainer
  onReady={() => console.log('Navigation container is ready')}
>
  {/* ... */}
</NavigationContainer>
```

## onUnhandledAction

The `onUnhandledAction` prop accepts a function which is called when a navigation action is not handled by any of the navigators.

By default, a development-only error message will be shown when an action was not handled. You can override the default behavior by providing a custom function.

## Linking

The `linking` props handles configuration for linking integration used for deep linking, URL support in browsers etc.

**Example:**

```jsx
import { NavigationContainer } from '@uhg-abyss/mobile';

function App() {
  const linking = {
    prefixes: ['https://mychat.com', 'mychat://'],
    config: {
      screens: {
        Home: 'feed/:sort',
      },
    },
  };

  return (
    <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
      {/* content */}
    </NavigationContainer>
  );
}
```

## Fallback

The `fallback` prop is a React Element to use as a fallback while we resolve deep links. Defaults to `null`.

If you have a native splash screen, please use `onReady` instead of fallback prop.

**Example:**

```jsx
<NavigationContainer fallback={<Text>Loading...</Text>}>
  {/* content */}
</NavigationContainer>
```

## Independent

Use the `independent` prop when the navigation container should be independent of parent containers. If this is not set to true, this container cannot be nested inside another container. Setting it to true disconnects any children navigators from parent container.

You probably don't want to set this to true in a typical React Native app. This is only useful if you have navigation trees that work like their own mini-apps and don't need to navigate to the screens outside of them.

</Tab>

<Tab label='Integration'>

<Docs.PropsTable
  of="NavigationContainer"
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'Content inside of the navigation container',
    },
    {
      name: 'initialState',
      type: 'object',
      description: 'Prop that accepts initial state for the navigator',
    },
    {
      name: 'onStateChange',
      type: 'function',
      description:
        'Function that gets called every time navigation state changes',
    },
    {
      name: 'onReady',
      type: 'function',
      description:
        'Function which is called after the navigation container and all its children finish mounting for the first time',
    },
    {
      name: 'onUnhandledAction',
      type: 'function',
      description:
        'Function which is called when a navigation action is not handled by any of the navigators',
    },
    {
      name: 'linking',
      type: 'object',
      description:
        'Configuration for linking integration used for deep linking',
    },
    {
      name: 'independent',
      type: 'boolean',
      description:
        'Whether this navigation container should be independent of parent containers',
    },
  ]}
/>

</Tab>
</Tabs>

---
id: needhelp
category: CTA
title: NeedHelp
description: Provides in-app help content, always at the bottom of the page
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=36393-5275&mode=design&t=kg0BV3Q6dFmAIOBa-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { NeedHelp } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'NeedHelp',
  inputs: [
    {
      prop: 'heading',
      type: 'string',
    },
    {
      prop: 'paragraph',
      type: 'string'
    },

  ]
}

<NeedHelp heading="Completed Health Screen:" paragraph="Review of your results are ready.">
  <NeedHelp.Button>Go To Results</NeedHelp.Button>
</NeedHelp>
```

## Heading and Paragraph

The `heading` and `paragraph` props are used to set the heading and paragraph of NeedHelp.
Both props are required. The `paragraph` can also take a node.

```jsx live
<NeedHelp
  heading="Completed Health Screen:"
  paragraph="Review of your results are ready."
>
  <NeedHelp.Link after={<IconSymbol icon="chevron_right" size={20} />}>
    Go To Results
  </NeedHelp.Link>
</NeedHelp>
```

## Children

Add Children to the NeedHelp component by simply placing elements between the NeedHelp tags. Children should be used for adding either a link or button.
Links and buttons can be added with the `NeedHelp.Link` and `NeedHelp.Button` components, respectively.

```jsx live
<Layout.Stack grow space={8}>
  <NeedHelp
    heading="Looking for non-Rx purchases?"
    paragraph="Go to the Optum Store for HSA/FSA Eligible products"
  >
    <NeedHelp.Link after={<IconSymbol icon="chevron_right" size={20} />}>
      Go To Results
    </NeedHelp.Link>
  </NeedHelp>

  <NeedHelp
    heading="Are you looking for claims?"
    paragraph={
      <Text>
        Claims can be found from a shortcut on the homescreen. Tap the button
        below to go to your claims.
      </Text>
    }
  >
    <NeedHelp.Button>My Claims</NeedHelp.Button>
  </NeedHelp>
</Layout.Stack>
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="NeedHelp"
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the NeedHelp component',
    },
    {
      name: 'heading',
      type: 'string',
      description: 'Sets the heading for the NeedHelp',
    },
    {
      name: 'paragraph',
      type: 'string || node',
      description: 'Sets the paragraph for the NeedHelp',
    },
  ]}
/>

<Docs.PropsTable
  of="NeedHelp.Link"
  rows={[
    {
      name: 'before',
      type: 'ReactNode',
      description: 'Insert element into link component before children',
    },
    {
      name: 'after',
      type: 'ReactNode',
      description: 'Insert element into link component after children',
    },
    {
      name: 'href',
      type: 'string',
      description: 'Set the URL of the link',
    },
    {
      name: 'children',
      type: 'ReactNode',
      description: 'Set the text of the link',
    },
  ]}
/>

<Docs.PropsTable
  of="NeedHelp.Button"
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the button component',
    },
    {
      name: 'icon',
      type: '{ name: string, variant?: string } | React.ReactNode | string | Function',
      description: 'Configuration for an icon to display in the button',
    },
    {
      name: 'iconPosition',
      type: "'leading' | 'trailing' | 'iconOnly'",
      default: 'false',
      description: 'When true, displays only the icon in a circular button',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Callback fired when the button is pressed',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      default: 'false',
      description: 'Flag to disable the button',
    },
    {
      name: 'isLoading',
      type: 'boolean',
      default: 'false',
      description: 'Flag to show loading spinner within the button',
    },
  ]}
/>

<Docs.ClassesTable
  of="NeedHelp"
  rows={[
    {
      name: 'need-help-root',
      description: 'NeedHelp root element',
    },
    {
      name: 'need-help-heading',
      description: 'NeedHelp heading element',
    },
    {
      name: 'need-help-text',
      description: 'NeedHelp text element',
    },
    {
      name: 'need-help-children-container',
      description: 'NeedHelp children container',
    },
  ]}
/>

<Docs.ClassesTable
  of="NeedHelp.Link"
  rows={[
    {
      name: 'need-help-link-root',
      description: 'NeedHelp link element',
    },
  ]}
  inherits={[{ name: 'Link', link: '/mobile/ui/link' }]}
/>

<Docs.ClassesTable
  of="NeedHelp.Button"
  rows={[
    {
      name: 'need-help-button-root',
      description: 'NeedHelp link element',
    },
  ]}
  inherits={[{ name: 'Button', link: '/mobile/ui/button' }]}
/>

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="NeedHelp" keys={['need-help']} />

</Tab>

<Tab label="Migration">

<Docs.ComparisonTable of="NeedHelp" type="props" />

</Tab>
</Tabs>

---
id: notification
category: Feedback
title: Notification
description: A container used to display information to the user.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=42686-245323&mode=design&t=i3zoWjm6y2FTIEfZ-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { Notification } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Notification',
  inputs: [
    {
      prop: 'children',
      type: 'string',
    },

    {
      prop: 'seen',
      type: 'boolean',
    },

  ]
}

<Notification date={new Date()} >
  Notification Sandbox
</Notification>
```

## Basic usage

The content of the `Notification` component is made up `children` and `date`. The `date` prop is required and takes a Javascript Date object.

```jsx live
() => {
  const [value, setValue] = useState(false);
  const [value2, setValue2] = useState(false);
  const date1 = new Date();
  const date2 = new Date(2022, 3, 11);

  return (
    <Layout.Stack grow>
      <Notification date={date1}>
        Add your dependents to your account to view their claims and coverage.
      </Notification>
      <Notification date={date2}>
        Your claim has been processed. View your Explanation of Benefits.
      </Notification>
    </Layout.Stack>
  );
};
```

## Seen

The `seen` prop handles the state of the Notification. When `true` the text of the component is bold, with a round indicator. `onPress` will be called once the Notification is pressed.

```jsx live
() => {
  const [value, setValue] = useState(false);
  const [value2, setValue2] = useState(false);
  const date1 = new Date();
  const date2 = new Date(2021, 7, 21);

  return (
    <Layout.Stack grow>
      <Notification seen={value} onPress={() => setValue(true)} date={date1}>
        New! Now you can get care cost estimates then compare, save and share
        them.
      </Notification>
      <Notification seen={value2} onPress={() => setValue2(true)} date={date2}>
        Go paperless and save time! Sign up for electronic delivery of your
        Explanation of Benefits.
      </Notification>
    </Layout.Stack>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Notification"
  rows={[
    {
      name: 'children',
      type: 'string',
      description: 'The text body of the component',
    },
    {
      name: 'date',
      type: 'Date',
      description: 'Set the date of the notification',
    },
    {
      name: 'seen',
      type: 'boolean',
      description: 'Flag to set the notification as seen',
      default: 'false',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Callback fired when notification is pressed',
    },
  ]}
/>

<Docs.ClassesTable
  of="Notification"
  rows={[
    {
      name: 'notification-root',
      description: 'Notification root',
    },
    {
      name: 'notification-text',
      description: 'Notification text',
    },
    {
      name: 'notification-dot',
      description: 'Notification dot',
    },
    {
      name: 'notification-date',
      description: 'Notification date',
    },
  ]}
/>

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="Notification" keys={['notification']} />

</Tab>
</Tabs>

---
id: number-stepper
category: Controls
title: NumberStepper
description: A two-segment UI control used to incrementally increase or decrease a numeric value.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=52553-4919&mode=design&t=jeurw9GyqLDTHSBG-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { NumberStepper } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'NumberStepper',
  inputs: [
    {
      prop: 'maximumValue',
      type: 'number',
      default: 99,
    },
        {
      prop: 'minimumValue',
      type: 'number',
      default: 0,
    },
    {
      prop: 'title',
      type: 'string',
    },
    {
      prop: 'description',
      type: 'string'
    },
        {
      prop: 'isDisabled',
      type: 'boolean'
    },
  ]
}

() => {
  const [value, setValue] = useState(0)
  return(
    <NumberStepper
    title="Title Here"
    description="2 lines max description here"
    value={value}
    onChange={setValue}
    />
  );
};

```

## useState

The `useState` hook gets the value from the component state. It is required to pass in the starting number to the `value` prop.

```jsx live
() => {
  const [value, setValue] = useState(1);

  return (
    <NumberStepper
      title="Adults"
      description="Age 18 and above"
      value={value}
      onChange={setValue}
    />
  );
};
```

## Title

Use the `title` prop to set the title for the input. It is required to pass in a string to the `title` prop.

```jsx live
() => {
  const [value, setValue] = useState(1);

  return (
    <NumberStepper title="Title Only Input" value={value} onChange={setValue} />
  );
};
```

## Description

Use the `description` prop to set the description for the input.

```jsx live
() => {
  const [value, setValue] = useState(1);

  return (
    <NumberStepper
      title="Adults"
      description="Age 18 and above"
      value={value}
      onChange={setValue}
    />
  );
};
```

## Min and Max Values

Use the `minimumValue` and `maximumValue` to constrain the stepper to a specific range. By default this range is 0-99.

```jsx live
() => {
  const [value, setValue] = useState(1);

  return (
    <NumberStepper
      title="Number range"
      description="Pick a number between 1 and 10"
      value={value}
      onChange={setValue}
      minimumValue={1}
      maximumValue={10}
    />
  );
};
```

## Disabled

Use the `isDisabled` prop to disable the stepper. By default, the add or remove buttons disable when the min or max is reached.

```jsx live
() => {
  const [value, setValue] = useState(1);

  return (
    <NumberStepper
      title="Adults"
      description="Age 18 and above"
      value={value}
      onChange={setValue}
      isDisabled={true}
    />
  );
};
```

## Error Message

Use the `errorMessage` prop to display a message below the description.

```jsx live
() => {
  const [value, setValue] = useState(1);

  return (
    <NumberStepper
      title="Child car seat(s)"
      description="How many child car seats are you bringing?"
      value={value}
      onChange={setValue}
      minimumValue={1}
      maximumValue={5}
      errorMessage="Driver has the right to refuse service without proper child seats"
    />
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="NumberStepper"
  rows={[
    {
      name: 'value',
      type: 'number',
      description: 'The current value of the number stepper',
    },
    {
      name: 'title',
      type: 'node',
      description: 'The title of the number stepper',
    },
    {
      name: 'description',
      type: 'string',
      description: 'The description of the number stepper',
    },
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired when the add or remove button is pressed',
    },
    {
      name: 'errorMessage',
      type: 'string',
      description: 'Error message to be displayed below the stepper',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description:
        'Flag to enable/disable the stepper. If true, both buttons will be disabled',
      default: 'false',
    },
    {
      name: 'maximumValue',
      type: 'numbers',
      description: 'Specifies the number the stepper can be increased to',
    },
    {
      name: 'minimumValue',
      type: 'number',
      description: 'Specifies the number the stepper can be decreased to',
    },
    {
      name: 'increaseRef',
      type: 'shape',
      description: 'The ref to be passed to the increase button',
    },
    {
      name: 'decreaseRef',
      type: 'shape',
      description: 'The ref to be passed to the decrease button',
    },
  ]}
/>

<Docs.ClassesTable
  of="NumberStepper"
  rows={[
    {
      name: 'number-stepper-root',
      description: 'Root element',
    },
    {
      name: 'number-stepper-container',
      description: 'Container around title, description and buttons',
    },
    {
      name: 'number-stepper-title',
      description: 'Title element',
    },
    {
      name: 'number-stepper-description',
      description: 'Description element',
    },
    {
      name: 'number-stepper-button',
      description: 'Button element',
    },
    {
      name: 'number-stepper-message',
      description: 'Error message',
    },
    {
      name: 'number-stepper-icon',
      description: 'Icon element',
    },
    {
      name: 'number-stepper-count',
      description: 'Count element',
    },
  ]}
/>

</Tab>

<Tab label="Accessibility">

## Dynamic Type

AX5 reorders items to a vertical stack.

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="NumberStepper" keys={['number-stepper']} />

</Tab>
</Tabs>

---
id: popover
category: Layout
title: Popover
description: A popover displays content on top of the page in a separate container and requires user action.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=31310-52671&mode=design&t=Ra4lP896wr2B96P7-0
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { Popover } from '@uhg-abyss/mobile';
```

## useState

Pass the value from the `useState` hook to the `isVisible` prop to set the open state of the popover.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <React.Fragment>
      <Button onPress={() => setIsVisible(true)}>Open useState Example</Button>
      <Popover
        heading="Heading"
        paragraph="Paragraph copy goes below the title. Copy can be a 100 characters maximum and expands on no more than four lines"
        isVisible={isVisible}
        onClose={() => setIsVisible(false)}
        media={<Slot light>Media Content</Slot>}
        content={<Slot light>Content Section</Slot>}
        footer={<Button onPress={() => setIsVisible(false)}>Close</Button>}
      ></Popover>
    </React.Fragment>
  );
};
```

## Heading

Use the `heading` prop to set the heading of the popover. For accessibility purposes, a heading is required.
Please provide a heading that accurately describes the content of the popover so a screen reader
can provide the description to the user.

Use the `headingSize` prop to set the size of the heading. The `headingSize` prop accepts `small` and `large` as values.
The default size is `large`.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(false);
  const [isVisible2, setIsVisible2] = useState(false);
  return (
    <Layout.Stack grow>
      <Button onPress={() => setIsVisible(true)}>Open Heading Example</Button>
      <Popover
        heading="Descriptive and Concise Heading"
        headingSize="small"
        paragraph="The heading should be concise and clear and must not expand on more than 2 lines"
        isVisible={isVisible}
        onClose={() => setIsVisible(false)}
        footer={<Button onPress={() => setIsVisible(false)}>Close</Button>}
      ></Popover>
    </Layout.Stack>
  );
};
```

## Paragraph

Use the `paragraph` prop to add a description below the heading. The paragraph should be concise and clear and must not expand on more than 4 lines.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <React.Fragment>
      <Button onPress={() => setIsVisible(true)}>Open Paragraph Example</Button>
      <Popover
        heading="Descriptive and Concise heading"
        paragraph="Paragraph copy goes below the title. Copy can be a 100 characters maximum and expands on no more than four lines"
        isVisible={isVisible}
        onClose={() => setIsVisible(false)}
        footer={<Button onPress={() => setIsVisible(false)}>Close</Button>}
      ></Popover>
    </React.Fragment>
  );
};
```

## Content

Use the `content` prop to add custom content below the paragraph.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <React.Fragment>
      <Button onPress={() => setIsVisible(true)}>Open Content Example</Button>
      <Popover
        heading="Descriptive and Concise heading"
        paragraph="Paragraph copy goes below the title. Copy can be a 100 characters maximum and expands on no more than four lines"
        isVisible={isVisible}
        onClose={() => setIsVisible(false)}
        content={
          <Text textAlign="center">
            The content section is where you can add custom content.
          </Text>
        }
        footer={<Button onPress={() => setIsVisible(false)}>Close</Button>}
      ></Popover>
    </React.Fragment>
  );
};
```

## Media

Use the `media` prop to add custom content above the heading.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <React.Fragment>
      <Button onPress={() => setIsVisible(true)}>Open Media Example</Button>
      <Popover
        heading="Abyss Design System"
        paragraph="The header content goes above the title. Here you can add custom content or replace with an existing Abyss component"
        isVisible={isVisible}
        onClose={() => setIsVisible(false)}
        media={
          <Image
            style={{
              width: 100,
              height: 100,
              alignSelf: 'center',
              marginTop: '$semantic.spacing.md',
            }}
            source="/img/logo.svg"
          />
        }
        footer={
          <Button variant="tertiary" onPress={() => setIsVisible(false)}>
            Close
          </Button>
        }
      ></Popover>
    </React.Fragment>
  );
};
```

## Footer

Use the `footer` prop to place content at the bottom of the popover. The popover must always have at least one button, so users can close it.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <React.Fragment>
      <Button onPress={() => setIsVisible(true)}>Open Footer Example</Button>
      <Popover
        heading="Descriptive and Concise heading"
        paragraph="Footer buttons stack vertically or horizontally and contain up to three OS specific buttons in the order that they are placed in the component. The Popover must always have at least one button, so users can close it"
        isVisible={isVisible}
        onClose={() => setIsVisible(false)}
        footer={
          <Layout.Stack grow>
            <Button onPress={() => setIsVisible(false)}>Close</Button>
            <Button variant="secondary" onPress={() => setIsVisible(false)}>
              Close
            </Button>
            <Button variant="tertiary" onPress={() => setIsVisible(false)}>
              Close
            </Button>
          </Layout.Stack>
        }
      ></Popover>
    </React.Fragment>
  );
};
```

## onClose

Use the `onClose` function to handle the action when close button is triggered or when the background is pressed.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <React.Fragment>
      <Button onPress={() => setIsVisible(true)}>Open onClose Example</Button>
      <Popover
        heading="Title"
        paragraph="Paragraph copy goes below the title. Copy can be a 100 characters maximum and expands on no more than four lines"
        isVisible={isVisible}
        onClose={() => {
          setIsVisible(false);
          console.log('Popover closed by background tap');
        }}
        footer={
          <Button
            onPress={() => {
              setIsVisible(false);
              console.log('Popover closed by button');
            }}
          >
            Close
          </Button>
        }
      ></Popover>
    </React.Fragment>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Popover"
  rows={[
    {
      name: 'heading',
      type: 'string',
      description: 'Heading of the popover',
    },
    {
      name: 'headingSize',
      type: "'large' | 'small'",
      default: 'large',
      description: 'Size of the heading',
    },
    {
      name: 'footer',
      type: 'node',
      description: 'Component to show at the bottom of the popover',
    },
    {
      name: 'media',
      type: 'node',
      description: 'Component to show at the top of the popover',
    },
    {
      name: 'onClose',
      type: 'function',
      description: 'Callback fired when the popover is triggered to close',
    },
    {
      name: 'isVisible',
      type: 'boolean',
      description: 'Flag to check if the popover is visible',
      default: 'false',
    },
    {
      name: 'paragraph',
      type: 'string',
      description: 'Paragraph copy goes below the heading',
    },
    {
      name: 'content',
      type: 'string',
      description: 'Content of the popover',
    },
  ]}
/>

<Docs.ClassesTable
  of="Popover"
  rows={[
    {
      name: 'popover-root',
      description: 'Popover root element',
    },
    {
      name: 'popover-overlay',
      description: 'Popover overlay element',
    },
    {
      name: 'popover-dialog',
      description: 'Popover dialog element',
    },
    {
      name: 'popover-text-container',
      description: 'Popover container for text elements',
    },
    {
      name: 'popover-heading',
      description: 'The heading text element of the popover',
    },
    {
      name: 'popover-paragraph',
      description: 'The paragraph text element of the popover',
    },
    {
      name: 'popover-footer',
      description: 'Popover footer element',
    },
  ]}
/>

</Tab>

<Tab label="Accessibility">

## Dynamic Type

To accommodate for larger text sizes, the popover will scroll when it has grown to have a 16px margin on the top and bottom. Depending on the screen size, the height of the popover when scrollable will vary. The footer does not scroll with the rest of the content. Please follow design guidelines when deciding the amount of content to place within popover.

## Focus Guidance

Abyss does not control the focus of components on the screen when the Popover is toggled off. To meet
accessibility guidelines, the focus must be set to the previous node when closed. The [useSetFocus](/mobile/hooks/use-set-focus) hook can be used for this.

For example, if a button is pressed to open a popover, focus must return to that button once the popover is closed, so that a screen reader or keyboard user may continue using the app where they left off.

</Tab>

<Tab label='Migration'>
<Docs.ComparisonTable of="Popover" type="class" />

<Docs.ComparisonTable of="Popover" type="props" />

</Tab>
</Tabs>

---
id: progress-bar
category: Data Viz
title: ProgressBar
description: Used to show users the status of loading an app, ongoing processes, saving changes/updates, and more.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=12952%3A84441&t=OIAOmowjKZ4THvqh-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { ProgressBar } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'ProgressBar',
  inputs: [
    {
      prop: 'steps',
      type: 'number',
    },
    {
      prop: 'currentStep',
      type: 'number',
    },
  ]
}

  <ProgressBar steps={5} currentStep={2} />
```

## useState

In this example, we use the `steps` prop to define the number of steps available. React's `useState` hook is used to update the `currentStep` prop.

```jsx live
() => {
  const [value, setValue] = useState(0);
  const changeValue = (operator) => {
    setValue((v) => Math.min(Math.max(v + operator, 0), 10));
  };
  return (
    <Layout.Stack space={12} grow>
      <Box color="$semantic.color.surface.container.secondary">
        <ThemeProvider colorScheme="dark">
          <Box color="$semantic.color.surface.container.primary">
            <ProgressBar steps={10} currentStep={value} />
          </Box>
        </ThemeProvider>
        <Box color="$semantic.color.surface.container.secondary">
          <ProgressBar steps={10} currentStep={value} />
        </Box>
        <Layout.Group grow>
          <Button type="outline" onPress={() => changeValue(-1)}>
            Subtract 1
          </Button>
          <Button onPress={() => changeValue(+1)}>Add 1</Button>
        </Layout.Group>
        <Text>Current step: {value}/10</Text>
      </Box>
    </Layout.Stack>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="ProgressBar"
  rows={[
    {
      name: 'steps',
      type: 'number',
      description: 'Sets number of steps',
    },
    {
      name: 'currentStep',
      type: 'number',
      description: 'Sets current step',
    },
  ]}
/>

<Docs.ClassesTable
  of="ProgressBar"
  rows={[
    {
      name: 'progress-bar-root',
      description: 'Progress bar root element',
    },
    {
      name: 'progress-bar-slide',
      description: 'Progress bar slide',
    },
  ]}
/>

<Docs.TranslationTable
  of="ProgressBar"
  rows={['ProgressBar.textValue', 'ProgressBar.progressBar']}
/>

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="ProgressBar" keys={['progress-bar']} />

</Tab>
</Tabs>

---
id: radio-group
category: Forms
title: RadioGroup
description: A radio input allows people to select only one option from a number of choices. Radio is generally displayed in a radio group.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=9596%3A34313&t=FBnhV14SktRX1IuI-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { RadioGroup } from '@uhg-abyss/mobile';
```

### useForm (recommended)

Using the `useForm` hook for handling RadioGroup lets the DOM handle form data.

```jsx live
() => {
  const form = useForm();

  const handleSubmit = (data) => {
    console.log('Form submitted with data:', data);
  };

  return (
    <FormProvider state={form} onSubmit={handleSubmit}>
      <RadioGroup model="radio-form">
        <RadioGroup.Radio label="One" value="one" />
        <RadioGroup.Radio label="Two" value="two" />
        <RadioGroup.Radio label="Three" value="three" />
        <RadioGroup.Radio label="Four" value="four" />
      </RadioGroup>
      <Button submit size="small" style={{ marginTop: 15 }}>
        Submit
      </Button>
    </FormProvider>
  );
};
```

## useState

Using the `useState` hook gets values from the component state.

```jsx live
() => {
  const [radioValue, setRadioValue] = useState('one');

  return (
    <RadioGroup value={radioValue} onChange={setRadioValue}>
      <RadioGroup.Radio label="One" value="one" />
      <RadioGroup.Radio label="Two" value="two" />
    </RadioGroup>
  );
};
```

## Label

Use the `label` prop to pass a string as the text next to the radio button.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <RadioGroup model="radio-label">
        <RadioGroup.Radio label="One" value="one" />
        <RadioGroup.Radio label="Two" value="two" />
      </RadioGroup>
    </FormProvider>
  );
};
```

## Children

Content passed to the radio as children will be displayed in place of the label prop. If a value is passed to the label prop in addition to children, the label prop will take priority.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <RadioGroup model="radio-children">
        <RadioGroup.Radio value="one">
          <Box
            color="$semantic.color.surface.container.emphasis.4"
            width="100%"
            style={{ marginLeft: 12 }}
          >
            <Text color="$semantic.color.text.body.primary">Abyss 1</Text>
          </Box>
        </RadioGroup.Radio>
        <RadioGroup.Radio value="two">
          <Box
            color="$semantic.color.surface.container.primary"
            width="100%"
            style={{ marginLeft: 12 }}
          >
            <Text color="$semantic.color.surface.container.emphasis.4">
              Abyss 2
            </Text>
          </Box>
        </RadioGroup.Radio>
      </RadioGroup>
    </FormProvider>
  );
};
```

## Side

Use the `side` prop to place the label text on the left or right side of the radio buttons. By default, the prop is set to `left`, which is the upper example.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <RadioGroup model="radio-side-left">
        <RadioGroup.Radio label="One" value="one" />
        <RadioGroup.Radio label="Two" value="two" />
        <RadioGroup.Radio label="Three" value="three" />
        <RadioGroup.Radio label="Four" value="four" />
      </RadioGroup>
      <Layout.Space />
      <RadioGroup side="right" model="radio-side-right">
        <RadioGroup.Radio label="One" value="one" />
        <RadioGroup.Radio label="Two" value="two" />
        <RadioGroup.Radio label="Three" value="three" />
        <RadioGroup.Radio label="Four" value="four" />
      </RadioGroup>
    </FormProvider>
  );
};
```

## isDisabled

`isDisabled` will disable the radio button. It can be added to either the RadioGroup or the individual Radio components.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <Text>Individual radio buttons Disabled</Text>
      <RadioGroup model="radio-disabled-individual">
        <RadioGroup.Radio label="Uno" value="uno" />
        <RadioGroup.Radio isDisabled label="Dos" value="dos" />
        <RadioGroup.Radio isDisabled label="Tres" value="tres" />
        <RadioGroup.Radio label="Cuatro" value="cuatro" />
      </RadioGroup>
      <Layout.Space />
      <Text>All buttons in component disabled</Text>
      <RadioGroup isDisabled model="radio-disabled-group">
        <RadioGroup.Radio label="Uno" value="uno" />
        <RadioGroup.Radio label="Dos" value="dos" />
        <RadioGroup.Radio label="Tres" value="tres" />
        <RadioGroup.Radio label="Cuatro" value="cuatro" />
      </RadioGroup>
    </FormProvider>
  );
};
```

## hideLabel

The `hideLabel` prop hides the label by each radio button, and is set to `false` by default.

```jsx live
() => {
  const [radioValue, setRadioValue] = useState('four');
  const [radioValue2, setRadioValue2] = useState('one');

  return (
    <>
      <RadioGroup hideLabel value={radioValue} onChange={setRadioValue}>
        <RadioGroup.Radio label="One" value="one" />
        <RadioGroup.Radio label="Two" value="two" />
        <RadioGroup.Radio label="Three" value="three" />
        <RadioGroup.Radio label="Four" value="four" />
      </RadioGroup>
      <Text>Value = {radioValue}</Text>
      <Layout.Space />
      <RadioGroup value={radioValue2} onChange={setRadioValue2}>
        <RadioGroup.Radio label="One" value="one" />
        <RadioGroup.Radio label="Two" value="two" />
        <RadioGroup.Radio label="Three" value="three" />
        <RadioGroup.Radio label="Four" value="four" />
      </RadioGroup>
      <Text>Value = {radioValue2}</Text>
    </>
  );
};
```

## shrink

The `shrink` property brings labels and radio buttons closer together than the default. By default, `shrink` prop is set to `false`.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <RadioGroup shrink model="radio-shrink">
        <RadioGroup.Radio label="One" value="one" />
        <RadioGroup.Radio label="Two" value="two" />
      </RadioGroup>
    </FormProvider>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="RadioGroup"
  rows={[
    {
      name: 'side',
      type: '"left" | "right"',
      description: 'Defines the side label lands on',
      default: 'left',
    },
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired when the radio group value is changed',
    },
    {
      name: 'value',
      type: 'string',
      description: 'Sets value of RadioGroup',
    },
    {
      name: 'hideLabel',
      type: 'boolean',
      description: 'Hides the label next to Radio button',
      default: 'false',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description: 'Toggles disabled state for all radio buttons in RadioGroup',
      default: 'false',
    },
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the radio group component',
    },
    {
      name: 'shrink',
      type: 'boolean',
      description: 'Places the label beside the radio button',
      default: 'false',
    },
  ]}
/>

<Docs.PropsTable
  of="RadioGroup.Radio"
  rows={[
    {
      name: 'label',
      type: 'string',
      description:
        'Sets label of radioButton. The label prop will override children',
    },
    {
      name: 'children',
      type: 'node',
      description: 'Sets the label of radioButton',
    },
    {
      name: 'value',
      type: 'string',
      description: 'Sets value of Radio button',
    },
    {
      name: 'hideLabel',
      type: 'boolean',
      description: 'Hides label text',
      default: 'false',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description: 'Toggles disabled state for individual Radio button',
      default: 'false',
    },
  ]}
/>

<Docs.ClassesTable
  of="RadioGroup"
  rows={[
    {
      name: 'radio-group-root',
      description: 'RadioGroup root element',
    },
  ]}
/>

<Docs.ClassesTable
  of="RadioGroup.Radio"
  rows={[
    {
      name: 'radio-root',
      description: 'Radio root element',
    },
    {
      name: 'radio-outer-circle',
      description: 'Outer circle element',
    },
    {
      name: 'radio-inner-circle',
      description: 'Inner circle element',
    },
    {
      name: 'radio-label',
      description: 'Radio label element',
    },
  ]}
/>

</Tab>

<Tab label="Accessibility">

## Dynamic Type

RadioButton scales up to 3XL.

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="RadioGroup" keys={['radio']} />

</Tab>
</Tabs>

---
id: rating
category: Data
title: Rating
description: Graphical representation of the degree of rating scale.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=10068-35503&mode=design&t=XOrzmaAmfVkUUtDy-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { Rating } from '@uhg-abyss/mobile';
```

```jsx sandbox
  {
    component: 'Rating',
    inputs: [
      {
        prop: 'variant',
        type: 'select',
        options: [
          { label: 'Large', value: 'large' },
          { label: 'Small', value: 'small' },
          { label: 'Single', value: 'single' },
        ]
      },
      {
        prop: 'rating',
        type: 'string',
      },
      {
        prop: 'reviews',
        type: 'number',
      },
    ]
  }
 <Rating rating={3} reviews={5} />

```

## Variants

Variant `small` contains the rating to the left side of the populated stars and the number of reviews to the right.

Variant `single` consists of a single star with the rating and reviews in parentheses on the right side.

Variant `large` has a heading style rating value followed by the reviews and stars underneath.

If a variant is not provided it defaults to `small`.

```jsx live
<View
  style={{
    flexDirection: 'row',
    flexWrap: 'wrap',
  }}
>
  <View
    style={{
      flexGrow: 1,
      alignItems: 'center',
    }}
  >
    <Heading>Small</Heading>
    <Layout.Space />
    <Layout.Stack alignItems="right">
      {Array.from({ length: 6 }).map((x, index) => (
        <Rating key={index} rating={index} variant="small" reviews={index} />
      ))}
    </Layout.Stack>
  </View>
  <View
    style={{
      flexGrow: 1,
      alignItems: 'center',
    }}
  >
    <Heading>Single</Heading>
    <Layout.Space />
    <View>
      {Array.from({ length: 6 }).map((x, index) => (
        <Rating key={index} rating={index} reviews={index} variant="single" />
      ))}
    </View>
  </View>
  <View
    style={{
      flexGrow: 1,
      alignItems: 'center',
    }}
  >
    <Heading>Large</Heading>
    <Layout.Space />
    {Array.from({ length: 6 }).map((x, index) => (
      <Rating key={index} rating={index} reviews={index} variant="large" />
    ))}
  </View>
</View>
```

## Advanced Layout and Manipulation

`rating` is required and is used to determine the number of active stars as well as the display number. The inputted rating will be formatted to the first decimal point.

The `onPress` prop is optional and will transform the review text into a pressable link.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(false);
  const [activeReviewNum, setActiveReviewNum] = useState('store1');
  const reviewNum = [
    { reviews: 5, rating: 5 },
    { reviews: 4, rating: 4 },
    { reviews: 3, rating: 3 },
    { reviews: 2, rating: 2 },
    { reviews: 1, rating: 1 },
  ];

  const handleModal = (reviewNum) => {
    setIsVisible(true);
    setActiveReviewNum(reviewNum);
    return;
  };

  const ReviewList = (store) => {
    return Array.from({ length: activeReviewNum }).map((x, index) => (
      <Cell
        key={index}
        heading={'some customer'}
        paragraph={'this place was either good or bad'}
        leadingContent={<Avatar colorTheme={2} initials={'AB'} />}
      />
    ));
  };

  return (
    <>
      <View
        style={{
          flexDirection: 'row',
          flexWrap: 'wrap',
        }}
      >
        <View
          style={{
            flexGrow: 1,
            alignItems: 'center',
          }}
        >
          <Heading>Small</Heading>
          <Layout.Space />
          <Layout.Stack alignItems="left">
            {Array.from({ length: 5 }).map((x, index) => (
              <Rating
                key={index}
                rating={reviewNum[index].rating}
                reviews={reviewNum[index].reviews}
                variant="small"
                onPress={() => handleModal(reviewNum[index].reviews)}
              />
            ))}
          </Layout.Stack>
        </View>
        <View
          style={{
            flexGrow: 1,
            alignItems: 'center',
          }}
        >
          <Heading>Single</Heading>
          <Layout.Space />
          <View>
            {Array.from({ length: 5 }).map((x, index) => (
              <Rating
                key={index}
                rating={reviewNum[index].rating}
                reviews={reviewNum[index].reviews}
                variant="single"
                onPress={() => handleModal(reviewNum[index].reviews)}
              />
            ))}
          </View>
        </View>
        <View
          style={{
            flexGrow: 1,
            alignItems: 'center',
          }}
        >
          <Heading>Large</Heading>
          <Layout.Space />
          <View>
            {Array.from({ length: 5 }).map((x, index) => (
              <Rating
                key={index}
                rating={reviewNum[index].rating}
                reviews={reviewNum[index].reviews}
                variant="large"
                onPress={() => handleModal(reviewNum[index].reviews)}
              />
            ))}
          </View>
        </View>
      </View>

      <Modal
        title="Custom Title"
        isVisible={isVisible}
        footer={
          <View style={{ padding: 16 }}>
            <Button onPress={() => setIsVisible(false)}>Close</Button>
          </View>
        }
      >
        <Modal.Section>
          <CellGroup>
            <ReviewList />
          </CellGroup>
        </Modal.Section>
      </Modal>
    </>
  );
};
```

## Hide Reviews and Rating

`hideRating` can be used with variant `small` to hide the rating number on the left side.

`hideReviews` can be used with variants `small` and `single` to hide the reviews text.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(false);
  const [activeReviewNum, setActiveReviewNum] = useState('store1');
  const reviewNum = [
    { reviews: 5, rating: 5 },
    { reviews: 4, rating: 4 },
    { reviews: 3, rating: 3 },
    { reviews: 2, rating: 2 },
    { reviews: 1, rating: 1 },
  ];

  const handleModal = (reviewNum) => {
    setIsVisible(true);
    setActiveReviewNum(reviewNum);
    return;
  };

  const ReviewList = (store) => {
    return Array.from({ length: activeReviewNum }).map((x, index) => (
      <Cell
        key={index}
        heading="some customer"
        paragraph="this place was either good or bad"
        leadingContent={<Avatar colorTheme={2} initials={'AB'} />}
      />
    ));
  };

  return (
    <>
      <View
        style={{
          flexDirection: 'row',
          flexWrap: 'wrap',
        }}
      >
        <View
          style={{
            flexGrow: 1,
            alignItems: 'center',
          }}
        >
          <Heading>Hide Rating</Heading>
          <Layout.Space />
          <Layout.Stack alignItems="left" style={{ paddingLeft: 20 }}>
            {Array.from({ length: 5 }).map((x, index) => (
              <Rating
                key={index}
                rating={reviewNum[index].rating}
                reviews={reviewNum[index].reviews}
                variant="small"
                hideRating
                onPress={() => handleModal(reviewNum[index].reviews)}
              />
            ))}
          </Layout.Stack>
        </View>
        <View
          style={{
            flexGrow: 1,
            alignItems: 'center',
          }}
        >
          <Heading>Hide Reviews</Heading>
          <Layout.Space />
          <Layout.Stack alignItems="left" style={{ paddingLeft: 20 }}>
            {Array.from({ length: 5 }).map((x, index) => (
              <Rating
                key={index}
                rating={reviewNum[index].rating}
                reviews={reviewNum[index].reviews}
                variant="small"
                hideReviews
                onPress={() => handleModal(reviewNum[index].reviews)}
              />
            ))}
          </Layout.Stack>
        </View>
        <View
          style={{
            flexGrow: 1,
            alignItems: 'center',
          }}
        >
          <Heading>Hide Reviews</Heading>
          <Layout.Space />
          <Layout.Stack alignItems="left" style={{ paddingLeft: 20 }}>
            {Array.from({ length: 5 }).map((x, index) => (
              <Rating
                key={index}
                rating={reviewNum[index].rating}
                reviews={reviewNum[index].reviews}
                variant="single"
                hideReviews
                onPress={() => handleModal(reviewNum[index].reviews)}
              />
            ))}
          </Layout.Stack>
        </View>
      </View>

      <Modal
        title="Custom Title"
        isVisible={isVisible}
        footer={
          <View style={{ padding: 16 }}>
            <Button onPress={() => setIsVisible(false)}>Close</Button>
          </View>
        }
      >
        <Modal.Section>
          <CellGroup>
            <ReviewList />
          </CellGroup>
        </Modal.Section>
      </Modal>
    </>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Rating"
  rows={[
    {
      name: 'rating',
      type: 'number',
      description: 'Rating given to component between 0-5',
    },
    {
      name: 'reviews',
      type: 'number',
      default: '0',
      description: 'Number of reviews',
      default: '0',
    },
    {
      name: 'hideRating',
      type: 'boolean',
      default: 'false',
      description: 'Hides rating number',
      default: 'false',
    },
    {
      name: 'hideReviews',
      type: 'boolean',
      default: 'false',
      description: 'Hides review text',
    },
    {
      name: 'variant',
      type: "'small' | 'large' | 'single'",
      default: 'small',
      description: 'Defines the rating variant',
      default: 'large',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Function called on link press',
    },
  ]}
/>

<Docs.ClassesTable
  of="Rating"
  rows={[
    {
      name: 'rating-root',
      description: 'Rating root',
    },
    {
      name: 'rating-number',
      description: 'The numerical value displayed next to or above the stars',
    },
    {
      name: 'rating-stars-container',
      description: 'Container wrapping the stars',
    },
    {
      name: 'rating-text',
      description: 'The text/link to the right of the stars',
    },
    {
      name: 'rating-star',
      description: 'Each individual star',
    },
    {
      name: 'rating-star-container',
      description: 'Wrapper for an individual star',
    },
    {
      name: 'rating-star-border',
      description: 'Border for an individual star',
    },
  ]}
/>

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="Rating" keys={['rating']} />

</Tab>
</Tabs>

---
id: rating-accumulator
category: Data Viz
title: RatingAccumulator
description: A visual representation of rating distribution using horizontal bars.
design: https://www.figma.com/design/5djnh49w0SBYAG5tFJifIG/v1.67.0-App-Abyss-Global%E2%80%A8Component-Library?m=auto&node-id=1349-10860&t=dapVPpbPg1aFyoDh-1
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { RatingAccumulator } from '@uhg-abyss/mobile';
```

## Data

The `data` prop is an array of numbers representing percentages for each star rating level, from 1 stars (index 0) to 5 stars (index 4).

```jsx live
<Layout.Stack grow>
  <RatingAccumulator data={[5, 10, 10, 25, 50]} />
</Layout.Stack>
```

## Alternate Theme

The `alt` prop changes the color theme to an alternate style, useful for displaying against darker backgrounds.

```jsx live
<Layout.Stack grow>
  <View style={{ padding: 16 }}>
    <RatingAccumulator data={[20, 30, 15, 25, 10]} />
  </View>
  <View
    style={{
      padding: 16,
      backgroundColor: '$semantic.color.surface.container.primary',
    }}
  >
    <RatingAccumulator data={[0, 5, 5, 10, 80]} alt />
  </View>
</Layout.Stack>
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="RatingAccumulator"
  rows={[
    {
      name: 'data',
      type: 'number[]',
      description: 'Array of percentages for star ratings (1★ to 5★)',
    },
    {
      name: 'alt',
      type: 'boolean',
      description: 'Toggle color theme for use on darker backgrounds',
      default: 'false',
    },
  ]}
/>

<Docs.ClassesTable
  of="RatingAccumulator"
  inherits={[{ name: 'Accumulator', link: '/mobile/ui/accumulator' }]}
  rows={[
    {
      name: 'rating-accumulator-root',
      description: 'RatingAccumulator root element',
    },
    {
      name: 'rating-accumulator',
      description: 'Accumulator element class',
    },
    {
      name: 'rating-accumulator-percentage-label',
      description: 'RatingAccumulator percentage label element',
    },
    {
      name: 'rating-accumulator-stars-label',
      description: 'RatingAccumulator stars label element',
    },
  ]}
/>

<Docs.TranslationTable
  of="RatingAccumulator"
  rows={['RatingAccumulator.star', 'RatingAccumulator.stars']}
/>

</Tab>

<Tab label="Accessibility">

Due to React Native limitations, this component enables keyboard access despite not having an interactive element. This component requires an accessibility label for use with a screen reader, which enables keyboard focus.

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable
  of="RatingAccumulator"
  keys={['rating-accumulator-group']}
/>

</Tab>
</Tabs>

---
id: scroll-provider
category: Providers
title: ScrollProvider
description: An Abyss provider that shares animated scroll state through context.
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { ScrollProvider, useCollapsibleScroll } from '@uhg-abyss/mobile';
```

## Usage

`ScrollProvider` shares animated scroll state through context so components like `AppBar` can respond to scroll position.

When used with `AppBar`, it enables hide/show behavior for AppBar content while the page scrolls. If the `AppBar` includes right-side content that should fade in during collapse (e.g. a search icon button), set the `animateRight` prop on `AppBar` to enable that animation.

`useCollapsibleScroll` returns:

- `scrollProps`: props to spread into your scrollable container
- `reset`: a reset function for scroll animation state

The `ScrollContext` also provides:

- `shouldAnimate`: a boolean that is `false` when the scroll view's content is not tall enough to support a full collapse of the header, automatically disabling collapse animations. This prevents partial or stuck collapse states on screens with limited content.
- `resetHeight`: clears the measured height and resets scroll state, used internally during route transitions.

When `scrollProps` are generated, the hook wires AppBar collapse handlers and merges them with handlers you pass in. It also applies:

- `keyboardShouldPersistTaps="always"`
- `bounces={false}`
- `decelerationRate="fast"`
- `scrollEventThrottle={16}` (unless overridden)

## AppBar Integration

Use this pattern for screens that have an `AppBar` and a scrollable content area:

1. Wrap the screen with `ScrollProvider`.
2. Call `useCollapsibleScroll()` inside that provider.
3. Spread `scrollProps` into your scrollable container (`Animated.ScrollView`).
4. Render `AppBar` in the same provider tree.

```jsx
import { Animated } from 'react-native';
import {
  AppBar,
  ScrollProvider,
  useCollapsibleScroll,
  SearchInputButton,
  ProgressBar,
} from '@uhg-abyss/mobile';

const ScreenContent = () => {
  const { scrollProps } = useCollapsibleScroll();

  return (
    <>
      <AppBar
        heading="Heading"
        headingAlignment="left"
        nestedContent={
          <AppBar.NestedContent>
            <SearchInputButton placeholder="Search" />
          </AppBar.NestedContent>
        }
      />
      <Animated.ScrollView {...scrollProps}>
        {/* Scrollable content */}
      </Animated.ScrollView>
    </>
  );
};

const App = () => {
  return (
    <ScrollProvider>
      <ScreenContent />
    </ScrollProvider>
  );
};
```

## Notes

- `useCollapsibleScroll` must be called within `ScrollProvider`.
- `AppBar` and your scrollable container should both be descendants of the same provider instance.
- `useCollapsibleScroll` accepts optional `Animated.ScrollView` props and merges event handlers (`onScroll`, drag, momentum) with provider behavior.
- Collapse animations are automatically disabled when the scroll view's content is not tall enough to support a full collapse. This is driven by the `shouldAnimate` context value and requires no manual configuration.
- To animate the right side of the `AppBar` (fade/scale) during collapse, set the `animateRight` prop on `AppBar`. Without it, only the children/nested content will collapse.
- Currently the only scroll behavior is designed for vertical scrolling with collapse/expand transitions as displayed in AppBar.

</Tab>

<Tab label="Integration">

## ScrollProvider Props

<Docs.PropsTable
  of="ScrollProvider"
  rows={[
    {
      name: 'scrollY',
      type: 'Animated.Value',
      description:
        'Optional external animated value for vertical scroll offset.',
    },
    {
      name: 'onScroll',
      type: '(e: NativeSyntheticEvent<NativeScrollEvent>) => void',
      description:
        'Optional callback fired on scroll events from descendant scroll containers.',
    },
    {
      name: 'children',
      type: 'React.ReactNode',
      description: 'The component tree that consumes scroll context',
    },
  ]}
/>

## useCollapsibleScroll

`useCollapsibleScroll(props?)`

- `props`: optional `Abyss.BaseProps<{}, 'Animated.ScrollView'> | Animated.AnimatedProps<ScrollViewProps>` passed through to `scrollProps`
- returns `{ scrollProps, reset }`
- merges `onScroll`, `onScrollBeginDrag`, `onScrollEndDrag`, and `onMomentumScrollEnd` with provider behavior

</Tab>
</Tabs>

---
id: search-input
category: Forms
title: SearchInput
description: A type of input field that allows searching through content.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=41039-16146&mode=design&t=bfPqTvn7mEdSo5pn-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { SearchInput } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'SearchInput',
  inputs: [
    {
      prop: 'label',
      type: 'string',
    },
     {
      prop: 'hintText',
      type: 'string',
    },
    {
      prop: 'helpContent',
      type: 'string',
    },
  ],
}

() => {
  const data = [
    { value: 'react', label: 'React' },
    { value: 'ng', label: 'Angular' },
    { value: 'svelte', label: 'Svelte' },
    { value: 'vue', label: 'Vue' },
    { value: 'alpine', label: 'Alpine' },
    { value: 'ember', label: 'Ember' },
    { value: 'stimulus', label: 'Stimulus' },
    { value: 'preact', label: 'Preact' },
  ];
  const [value, setValue] = React.useState('');
  const [results, setResults] = useState([]);

  const handleSubmit = ()=>{
    console.log(results)
  }

  return (
    <SearchInput
      label="Search Sandbox"
      value={value}
      onChangeText={setValue}
      onChange={setResults}
      onSubmit={handleSubmit}
      options={data}
      keys={['label']}
    />
  );
};
```

## useState

Using the `useState` hook sets state for the component.

```jsx live
() => {
  const [text, setText] = useState('');

  const handleSubmit = () => {
    console.log('Submitted:', text);
  };

  return (
    <Layout.Stack grow>
      <SearchInput onChangeText={setText} value={text} />
      <Button size="small" onPress={handleSubmit}>
        Submit
      </Button>
    </Layout.Stack>
  );
};
```

## onChange

The `onChange` prop handles the action for the search results.

```jsx live
() => {
  const data = [
    { value: 'react', label: 'React' },
    { value: 'ng', label: 'Angular' },
    { value: 'svelte', label: 'Svelte' },
    { value: 'vue', label: 'Vue' },
    { value: 'alpine', label: 'Alpine' },
    { value: 'ember', label: 'Ember' },
    { value: 'stimulus', label: 'Stimulus' },
    { value: 'preact', label: 'Preact' },
  ];
  const [value, setValue] = React.useState('');
  const [results, setResults] = useState([]);

  return (
    <SearchInput
      keys={['value', 'label']}
      label="Your framework/library"
      options={data}
      onChange={setResults}
      value={value}
      onChangeText={setValue}
    />
  );
};
```

## Fuse.js

Search Input filtering uses the [Fuse.js](https://fusejs.io) library to fuzzy filter results. What is fuzzy searching? Generally speaking, fuzzy searching (more formally known as approximate string matching) is the technique of finding strings that are approximately equal to a given pattern (rather than exactly).

### Fuse Configurations

To adjust the fuse configurations, pass the desired options into the `fuseConfigs` prop. Note that `keys` is required when using fuse. By default the fuse search configurations are:

```
{
  includeMatches: true,
  findAllMatches: true,
  threshold: 0,
  ignoreLocation: true,
  minMatchCharLength: searchText.length,
  keys,
}
```

The default configurations return the search results object below:

```
{
  item: []
}
```

### Fuse Data

The `options` prop is the information that fuse will filter on and display in the search dropdown. You can search on any value(s) in the object, see Fuse Keys below. Required when using fuse.

```jsx live
() => {
  const data = [
    { value: 'react', label: 'React' },
    { value: 'ng', label: 'Angular' },
    { value: 'svelte', label: 'Svelte' },
    { value: 'vue', label: 'Vue' },
    { value: 'alpine', label: 'Alpine' },
    { value: 'ember', label: 'Ember' },
    { value: 'stimulus', label: 'Stimulus' },
    { value: 'preact', label: 'Preact' },
  ];
  const [value, setValue] = React.useState('');
  const [results, setResults] = useState([]);

  const ResultsList = styled('ScrollView', {
    height: 200,
  });

  return (
    <Layout.Stack grow>
      <SearchInput
        keys={['value', 'label']}
        label="Fuse Data"
        options={data}
        onChange={setResults}
        value={value}
        onChangeText={setValue}
      />
      <Layout.Space />
      <Text style={{ fontWeight: '$core.font-weight.bold' }}>Results:</Text>
      <ResultsList>
        <CellGroup>
          {(value.length > 0 ? results : data).map((item, i) => {
            return <Cell heading={item.label} />;
          })}
        </CellGroup>
      </ResultsList>
    </Layout.Stack>
  );
};
```

### Fuse Keys

List of keys that will be searched. This supports nested paths, weighted search, searching in arrays of objects. Required when using fuse. Below the `keys` set are "label" and "value".

```jsx live
() => {
  const data = [
    { value: 'react', label: 'React' },
    { value: 'ng', label: 'Angular' },
    { value: 'svelte', label: 'Svelte' },
    { value: 'vue', label: 'Vue' },
    { value: 'alpine', label: 'Alpine' },
    { value: 'ember', label: 'Ember' },
    { value: 'stimulus', label: 'Stimulus' },
    { value: 'preact', label: 'Preact' },
  ];
  const [text, setText] = useState('');
  const [results, setResults] = useState([]);

  const ResultsList = styled('ScrollView', {
    height: 200,
  });

  return (
    <Layout.Stack grow>
      <SearchInput
        keys={['label', 'value']}
        label="Fuse Keys"
        options={data}
        value={text}
        onChangeText={setText}
        onChange={setResults}
      />
      <Layout.Space />
      <Text style={{ fontWeight: '$core.font-weight.bold' }}>Results:</Text>
      <ResultsList>
        <CellGroup>
          {(text.length > 0 ? results : data).map((item, i) => {
            return <Cell heading={item.label} />;
          })}
        </CellGroup>
      </ResultsList>
    </Layout.Stack>
  );
};
```

## Custom Filtering

Use the `customFilter` prop to override the fuse.js filtering. In the example function below, the filter is checking the first letter typed in the search bar against the first letter of each item in the list. If the letter is a match the item is included in the filtered list.

```jsx live
() => {
  const data = [
    { value: 'react', label: 'React' },
    { value: 'ng', label: 'Angular' },
    { value: 'svelte', label: 'Svelte' },
    { value: 'vue', label: 'Vue' },
    { value: 'alpine', label: 'Alpine' },
    { value: 'ember', label: 'Ember' },
    { value: 'stimulus', label: 'Stimulus' },
    { value: 'preact', label: 'Preact' },
  ];
  const [results, setResults] = useState([]);
  const [text, setText] = useState('');

  const ResultsList = styled('ScrollView', {
    height: 200,
  });

  const filterFunction = (searchText, list) => {
    const newList = [];
    if (searchText.length > 0) {
      list.forEach((item) => {
        const title = item.label.toUpperCase();
        if (title[0] === searchText[0].toUpperCase()) {
          newList.push(item);
        }
      });
    }
    return newList;
  };

  return (
    <Layout.Stack grow>
      <SearchInput
        customFilter={filterFunction}
        value={text}
        onChangeText={setText}
        label="Custom filter function"
        hintText="Search matching only the first letter of the component title"
        onChange={setResults}
        options={data}
      />
      <Layout.Space />
      <Text style={{ fontWeight: '$core.font-weight.bold' }}>Results:</Text>
      <ResultsList>
        <CellGroup>
          {(text.length > 0 ? results : data).map((item, i) => {
            return <Cell heading={item.label} />;
          })}
        </CellGroup>
      </ResultsList>
    </Layout.Stack>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="SearchInput"
  rows={[
    {
      name: 'options',
      type: 'object[]',
      description: 'Data filtered on by Fuse',
      default: '[]',
    },
    {
      name: 'keys',
      type: 'array[string]',
      description: 'Keys used by Fuse',
      default: '[]',
    },
    {
      name: 'fuseConfigs',
      type: 'shape',
      description: 'Configs for Fuse',
    },
    {
      name: 'customFilter',
      type: 'function',
      description: 'Custom function used for search',
    },
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired when search is changed',
    },
    {
      name: 'helpButtonAccessibilityLabel',
      type: 'string',
      description: 'Set the accessibility label for the help button',
    },
    {
      name: 'helpContent',
      type: 'string | ReactNode',
      description:
        'When defined, displays a help icon that can be tapped to view the provided content in a modal screen',
    },
    {
      name: 'onChangeText',
      type: 'function',
      description:
        'Callback that is called when the text input text changes. Changed text is passed as a single string argument to the callback handler',
    },
    {
      name: 'onFocus',
      type: 'function',
      description: 'Callback fired every time the component is focused',
    },
    {
      name: 'onBlur',
      type: 'function',
      description: 'Callback fired every time the component is unfocused',
    },
    {
      name: 'onSubmit',
      type: 'function',
      description: 'Callback fired when input is submitted',
    },
    {
      name: 'label',
      type: 'string',
      description: 'Label for input field',
    },
    {
      name: 'hintText',
      type: 'string',
      description: 'Set the text displayed below label',
    },
    {
      name: 'value',
      type: 'string',
      description: 'Value of the text input',
    },
    ,
    {
      name: 'returnKeyType',
      type: 'string',
      description: 'Sets the type of return key',
      default: 'search',
    },
    {
      name: 'returnKeyLabel',
      type: 'string',
      description: 'Sets the label of the return key. Defaults to "search"',
      default: 'search',
    },
  ]}
/>

<Docs.ClassesTable
  of="SearchInput"
  rows={[
    {
      name: 'search-input-root',
      description: 'SearchInput root element',
    },
  ]}
  inherits={[{ name: 'InputField', link: '/mobile/ui/input-field' }]}
/>

</Tab>
</Tabs>

---
id: search-input-button
category: Navigation
title: SearchInputButton
description: Acts as a placeholder for search bar.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=9600-35750&mode=design&t=9miNk11OVJWfR3kX-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { SearchInputButton } from '@uhg-abyss/mobile';
```

## Placeholder

The `placeholder` prop gives users a short description in the search bar.

```jsx live
() => {
  return <SearchInputButton placeholder="Search your benefits" />;
};
```

## onPress

Use the `onPress` prop to determine the action when the search button is pressed.

```jsx live
() => {
  const handlePress = () => {
    console.log('pressed');
  };

  return (
    <SearchInputButton
      placeholder="Search your benefits"
      onPress={handlePress}
    />
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="SearchInputButton"
  rows={[
    {
      name: 'onPress',
      type: 'Function',
      description: 'Callback fired when the search button is pressed',
    },
    {
      name: 'placeholder',
      type: 'string',
      description: 'Short description displayed in the input',
    },
  ]}
/>

<Docs.ClassesTable
  of="SearchInputButton"
  rows={[
    {
      name: 'search-input-button-root',
      description: 'Search input button root element',
    },
    {
      name: 'search-input-button-text',
      description: 'Search input button placeholder text',
    },
    {
      name: 'search-input-button-icon',
      description: 'Search icon',
    },
  ]}
/>

</Tab>
</Tabs>

---
id: segmented-controls
category: Forms
title: SegmentedControls
description: A segmented control is a linear set of two or more segments, each of which functions as a button. There cannot be more than one segment selected, so under the hood this behaves like a radio group.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=9553%3A32917&t=lY6iM2O8OTPyLv8A-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { SegmentedControls } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'SegmentedControls',
  inputs: [
    {
      prop: 'shrink',
      type: 'boolean',
    },
  ]
}

() => {
  const form = useForm({
    defaultValues: {
      'segmented-controls-sandbox': 'one',
    },
  });

  return (
    <FormProvider state={form}>
      <SegmentedControls model="segmented-controls-sandbox">
        <SegmentedControls.Tab label="One" value="one" />
        <SegmentedControls.Tab label="Two" value="two" />
        <SegmentedControls.Tab label="Three" value="three" />
      </SegmentedControls>
    </FormProvider>
  );
};
```

## useForm (recommended)

Using the `useForm` hook with `FormProvider` sets state for the component.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      'segmented-controls-form': 'one',
    },
  });

  const handleSubmit = (data) => {
    console.log('Submitted:', data);
  };

  return (
    <FormProvider state={form} onSubmit={handleSubmit}>
      <SegmentedControls model="segmented-controls-form">
        <SegmentedControls.Tab label="One" value="one" />
        <SegmentedControls.Tab label="Two" value="two" />
        <SegmentedControls.Tab label="Three" value="three" />
      </SegmentedControls>
      <Button submit size="small" style={{ marginTop: 15 }}>
        Submit
      </Button>
    </FormProvider>
  );
};
```

## useState

Using the `useState` hook gets values from the component state.

```jsx live
() => {
  const [activeValue, setActiveValue] = useState('one');

  const handleSubmit = () => {
    console.log('Submitted:', activeValue);
  };

  return (
    <View>
      <SegmentedControls value={activeValue} onChange={setActiveValue}>
        <SegmentedControls.Tab label="One" value="one" />
        <SegmentedControls.Tab label="Two" value="two" />
        <SegmentedControls.Tab label="Three" value="three" />
      </SegmentedControls>
      <Button onPress={handleSubmit} size="small" style={{ marginTop: 15 }}>
        Submit
      </Button>
    </View>
  );
};
```

## Label

The `label` prop is used to define the display in each Tab. The `label` can be an Icon or text.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      'segmented-controls-label': 'one',
      'segmented-controls-label-icons': 'two',
    },
  });

  return (
    <FormProvider state={form}>
      <Layout.Stack grow>
        <SegmentedControls model="segmented-controls-label">
          <SegmentedControls.Tab label="One" value="one" />
          <SegmentedControls.Tab label="Two" value="two" />
          <SegmentedControls.Tab label="Three" value="three" />
        </SegmentedControls>
        <SegmentedControls model="segmented-controls-label-icons">
          <SegmentedControls.Tab
            accessibilityLabel="snow"
            label={
              <IconSymbol
                size={20}
                color="$semantic.color.icon.interactive.rest.secondary"
                icon="ac_unit"
                variant="outlined"
              />
            }
            value="one"
          />
          <SegmentedControls.Tab
            accessibilityLabel="cloud"
            label={
              <IconSymbol
                size={20}
                color="$semantic.color.icon.interactive.rest.secondary"
                icon="cloud"
                variant="outlined"
              />
            }
            value="two"
          />
          <SegmentedControls.Tab
            accessibilityLabel="sun"
            label={
              <IconSymbol
                size={20}
                color="$semantic.color.icon.interactive.rest.secondary"
                icon="wb_sunny"
                variant="outlined"
              />
            }
            value="three"
          />
        </SegmentedControls>
      </Layout.Stack>
    </FormProvider>
  );
};
```

## Structure

Segmented controls consist of a parent element and several children. The parent element `<SegmentedControls />` handles the active Tab state.
While the children define the segments of the component.

Each child is a Tab: `<SegmentedControls.Tab />` A new child is required for every segment.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      'segmented-controls-structure': 'snow',
    },
  });

  return (
    <FormProvider state={form}>
      <SegmentedControls model="segmented-controls-structure">
        <SegmentedControls.Tab label={'Snow'} value="snow" />
        <SegmentedControls.Tab label={'Clouds'} value="clouds" />
        <SegmentedControls.Tab label="Sun" value="sun" />
      </SegmentedControls>
    </FormProvider>
  );
};
```

## Shrink

The `shrink` prop toggles whether the component will take up the full width of the parent container. When true, they will automatically size based on the number of tabs and their content. Defaults to `false`.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      'segmented-controls-one': 'snow',
      'segmented-controls-two': 'clouds',
      'segmented-controls-three': 'sun',
    },
  });

  return (
    <FormProvider state={form}>
      <Layout.Stack grow>
        <SegmentedControls model="segmented-controls-one">
          <SegmentedControls.Tab label="Snow" value="snow" />
          <SegmentedControls.Tab label="Clouds" value="clouds" />
          <SegmentedControls.Tab label="Sun" value="sun" />
        </SegmentedControls>
        <SegmentedControls model="segmented-controls-two" shrink>
          <SegmentedControls.Tab label="Snow" value="snow" />
          <SegmentedControls.Tab label="Clouds" value="clouds" />
          <SegmentedControls.Tab label="Sun" value="sun" />
        </SegmentedControls>
        <SegmentedControls model="segmented-controls-three" shrink>
          <SegmentedControls.Tab label="Snow is cold" value="snow" />
          <SegmentedControls.Tab label="Clouds are cool" value="clouds" />
          <SegmentedControls.Tab label="Sun is hot" value="sun" />
        </SegmentedControls>
      </Layout.Stack>
    </FormProvider>
  );
};
```

## Example

```jsx live
() => {
  const [activeTab, setActiveTab] = useState('one');
  return (
    <Box
      padding={0}
      color="$semantic.color.surface.container.primary"
      width={'400px'}
    >
      <Layout.Group
        style={{
          justifyContent: 'space-between',
          padding: 16,
        }}
      >
        <Text
          fontWeight="$core.font-weight.bold"
          size="$core.font-size.h.40"
          textAlign="center"
          color="white"
        >
          Title {activeTab}
        </Text>
        <Layout.Group space={12}>
          <Button
            size="small"
            icon={{ name: 'share' }}
            iconPosition="iconOnly"
          />
          <Button
            size="small"
            icon={{ name: 'home' }}
            iconPosition="iconOnly"
          />
        </Layout.Group>
      </Layout.Group>
      <ProgressBar steps={10} currentStep={5} />
      <View
        style={{
          alignSelf: 'center',
          padding: 16,
        }}
      >
        <SegmentedControls shrink value={activeTab} onChange={setActiveTab}>
          <SegmentedControls.Tab label={'One'} value={'one'} />
          <SegmentedControls.Tab label={'Two'} value={'two'} />
          <SegmentedControls.Tab label={'Three'} value={'three'} />
        </SegmentedControls>
      </View>
    </Box>
  );
};
```

## Dynamic Type

SegmentedControls scale to 3XL. Any icons passed to the label prop will need to set `maxFontSizeMultiplier={1.3}`.

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="SegmentedControls"
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'Defines the tab children',
    },
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired when the active tab changes',
    },
    {
      name: 'value',
      type: 'string | number',
      description: 'The SegmentedControls Tabs',
    },
    {
      name: 'shrink',
      type: 'boolean',
      default: 'false',
      description:
        'Toggles between width filling parent and width matching tabs and content',
    },
  ]}
/>

<Docs.PropsTable
  of="SegmentedControls.Tab"
  rows={[
    {
      name: 'label',
      type: 'string | number | node',
      description:
        'Defines the label of the tab, which can be a node for icons',
    },
    {
      name: 'value',
      type: 'string',
      description: 'Defines the value of the tab',
    },
  ]}
/>

<Docs.ClassesTable
  of="SegmentedControls"
  rows={[
    {
      name: 'segmented-controls-root',
      description: 'Segmented controls root element',
    },
    {
      name: 'segmented-controls-selected-tab',
      description: 'Selected tab in the controls',
    },
  ]}
/>

<Docs.ClassesTable
  of="SegmentedControls.Tab"
  rows={[
    {
      name: 'segmented-controls-tab-root',
      description: 'Segmented controls root element',
    },
  ]}
/>

</Tab>
<Tab label="Tokens">

<Docs.ComponentTokensTable
  of="SegmentedControls"
  keys={['segmented-control']}
/>

</Tab>
</Tabs>

---
id: select-input
category: Forms
title: SelectInput
description: Allows users to select one value from a provided list of options.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=18828-105743&mode=design&t=Aa48cFkeiLakVzb1-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { SelectInput } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'SelectInput',
  inputs: [
    {
      prop: 'label',
      type: 'string',
    },
    {
      prop: 'hintText',
      type: 'string',
    },
    {
      prop: 'isDisabled',
      type: 'boolean',
    },
    {
      prop: 'isRequired',
      type: 'boolean',
    },
    {
      prop: 'helpContent',
      type: 'string',
    },
  ],
}

() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInput
        model="select-input-sandbox"
        label="Menu"
        options={[
          {
            title: 'Title 1',
            items: [
              { label: 'item 1', value: 'item11', isDisabled: false },
              { label: 'item 2', value: 'item12', isDisabled: true },
              { label: 'item 3', value: 'item13', isDisabled: false },
            ],
          },
          {
            title: 'Title 2',
            items: [
              { label: 'item 1', value: 'item21', isDisabled: false },
              { label: 'item 2', value: 'item22', isDisabled: false },
              { label: 'item 3', value: 'item23', isDisabled: false },
            ],
          },
        ]}
      />
    </FormProvider>
  );
};
```

## Usage

Use the `options` prop to supply the options that can be selected. `options` is an array of objects, where each object should have two properties:

- `label`, a string which is how the option will be displayed in the list
- `value`, a string which is the unique identifier for the option

Sections can also be specified, in which case the section object should have `title` and `items` properties instead of `label` and `value` (See [Titles](#titles) for more details).

```
options = {
  [
    { label: 'Item 1', value: 'item1' },
    { label: 'Item 2', value: 'item2', isDisabled: true },
    { label: 'Item 3', value: 'item3' },
    { label: 'Item 4', value: 'item4' },
    { label: 'Item 5', value: 'item5' },
  ]
}
```

## useForm (recommended)

Use the `useForm` hook to manage the state of the select input. The `model` prop should be set to a unique string that identifies the form field.

```jsx live
() => {
  const form = useForm();

  const handleSubmit = (data) => {
    console.log('Submitted:', data);
  };

  return (
    <View>
      <FormProvider state={form}>
        <SelectInput
          model="select-input"
          label="Menu"
          options={[
            { label: 'item 1', value: 'item11' },
            { label: 'item 2', value: 'item12' },
            { label: 'item 3', value: 'item13' },
          ]}
        />
        <Button
          submit
          size="small"
          style={{ marginTop: 15 }}
          onPress={handleSubmit}
        >
          Submit
        </Button>
      </FormProvider>
    </View>
  );
};
```

## useState

Using the `useState` hook gets values from the component state.

```jsx live
() => {
  const [selection, setSelection] = useState();

  return (
    <View>
      <SelectInput
        label="Menu"
        value={selection}
        onChange={setSelection}
        options={[
          { label: 'item 1', value: 'item11' },
          { label: 'item 2', value: 'item12' },
          { label: 'item 3', value: 'item13' },
        ]}
      />
      <Button
        size="small"
        onPress={() => console.log('Selected:', selection)}
        style={{ marginTop: 15 }}
      >
        Submit
      </Button>
    </View>
  );
};
```

## Titles

To create sections in the list, pass objects into the `options` array that have the `title` and `items` properties. `title` specifies the name of the title, which will be bolded and not selectable, `items` should contain the options within that section (with the same `label`/`value` format as normal).

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInput
        model="select-input-titles"
        label="Menu"
        options={[
          {
            title: 'Title 1',
            items: [
              { label: 'item 1', value: 'item11' },
              { label: 'item 2', value: 'item12', isDisabled: true },
              { label: 'item 3', value: 'item13' },
            ],
          },
        ]}
      />
    </FormProvider>
  );
};
```

## Label

Use the `label` prop to display a label above the input menu.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInput
        model="select-input-label"
        label="Menu"
        options={[
          { label: 'item 1', value: 'item11' },
          { label: 'item 2', value: 'item12' },
          { label: 'item 3', value: 'item13' },
        ]}
      />
    </FormProvider>
  );
};
```

## Required

Use the `isRequired` prop to display an asterisk next to the label.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInput
        model="select-input-required"
        label="Menu"
        isRequired={true}
        options={[
          { label: 'item 1', value: 'item11' },
          { label: 'item 2', value: 'item12' },
          { label: 'item 3', value: 'item13' },
        ]}
      />
    </FormProvider>
  );
};
```

## Hint Text

Use the `hintText` prop to display text below the label.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInput
        model="select-input-hint"
        label="Menu"
        hintText="Only one item can be selected"
        options={[
          { label: 'item 1', value: 'item11' },
          { label: 'item 2', value: 'item12' },
          { label: 'item 3', value: 'item13' },
        ]}
      />
    </FormProvider>
  );
};
```

## Help Content

Use the `helpContent` prop to display a help icon in the top right of the container, which will display the provided content in a modal screen when pressed.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInput
        model="select-input-help"
        label="Menu"
        helpContent={
          <Text style={{ margin: 16 }}>
            This is some text used to explain something to the user, but is too
            long to be hint text.
          </Text>
        }
        options={[
          { label: 'item 1', value: 'item11' },
          { label: 'item 2', value: 'item12' },
          { label: 'item 3', value: 'item13' },
        ]}
      />
    </FormProvider>
  );
};
```

## Messages

Use the `errorMessage` and `successMessage` props to display a custom error or success message below the menu.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <Layout.Group space={16}>
        <SelectInput
          model="select-input-error"
          label="Menu"
          isRequired={true}
          errorMessage="A selection is required"
          options={[
            { label: 'item 1', value: 'item11' },
            { label: 'item 2', value: 'item12' },
            { label: 'item 3', value: 'item13' },
          ]}
        />
        <SelectInput
          model="select-input-success"
          label="Menu"
          successMessage="Great pick"
          options={[
            { label: 'item 1', value: 'item11' },
            { label: 'item 2', value: 'item12' },
            { label: 'item 3', value: 'item13' },
          ]}
        />
      </Layout.Group>
    </FormProvider>
  );
};
```

## Disabled

Set the `isDisabled` prop to `true` to disable the select list input field so users cannot select a value.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInput
        model="select-input-disabled"
        label="Menu"
        isDisabled={true}
        options={[
          { label: 'item 1', value: 'item11' },
          { label: 'item 2', value: 'item12' },
          { label: 'item 3', value: 'item13' },
        ]}
      />
    </FormProvider>
  );
};
```

## Disable Option Items

Disable an individual option item by setting the `isDisabled` key to `true` within the object.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInput
        model="select-input-disable-items"
        label="Menu"
        options={[
          {
            title: 'Title 1',
            isDisabled: true,
            items: [
              { label: 'item 1', value: 'item11', isDisabled: true },
              { label: 'item 2', value: 'item12', isDisabled: true },
            ],
          },
          {
            title: 'Title 2',
            items: [
              { label: 'item 1', value: 'item21', isDisabled: true },
              { label: 'item 2', value: 'item22' },
              { label: 'item 3', value: 'item23', isDisabled: true },
            ],
          },
        ]}
      />
    </FormProvider>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="SelectInput"
  rows={[
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired every time the selection value changes',
    },
    {
      name: 'value',
      type: 'string',
      description: 'Option value selected in the select list input',
    },
    {
      name: 'label',
      type: 'string',
      description: 'Select list label',
    },
    {
      name: 'modalTitle',
      type: 'string',
      description: 'Title of the input modal',
    },
    {
      name: 'errorMessage',
      type: 'string',
      description: 'Error message to be displayed below the select input field',
    },
    {
      name: 'successMessage',
      type: 'string',
      description:
        'Success message to be displayed below the select input field',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description:
        'Flag to enable/disable the select list. If true, the select list will be disabled',
    },
    {
      name: 'isRequired',
      type: 'boolean',
      description:
        'Requires a user to make a selection. If true, the asterisk will be displayed next to the label',
    },
    {
      name: 'hintText',
      type: 'string',
      description: 'Set the subtext displayed below the Label',
    },
    {
      name: 'options',
      type: 'object[]',
      description:
        'List of options selectable in the select list input. { label: string, value: string }',
    },
    {
      name: 'helpContent',
      type: 'string | ReactNode',
      description:
        'When defined, displays a help icon that can be tapped to view the provided content in a modal screen',
    },
    {
      name: 'helpButtonAccessibilityLabel',
      type: 'string',
      description: 'Set the accessibility label for the help button',
    },
    {
      name: 'placeholder',
      type: 'string',
      description: 'The rendered string when no option is selected',
    },
  ]}
/>

<Docs.ClassesTable
  of="SelectInput"
  rows={[
    {
      name: 'select-input-root',
      description: 'Root element',
    },
    {
      name: 'select-input-header',
      description: 'Header element',
    },
    {
      name: 'select-input-label',
      description: 'Label element',
    },
    {
      name: 'select-input-hint-text',
      description: 'Input hint text',
    },
    {
      name: 'select-input-help-button',
      description: 'Help button',
    },
    {
      name: 'select-input-open-icon',
      description: 'Menu open icon',
    },
    {
      name: 'select-input-modal',
      description: 'Menu modal',
    },
    {
      name: 'select-input-menu-list',
      description: 'Menu list',
    },
    {
      name: 'select-input-message',
      description: 'Message element',
    },
    {
      name: 'select-input-close-icon',
      description: 'Close icon',
    },
    {
      name: 'input-help-icon',
      description: 'Help icon element',
    },
    {
      name: 'input-help-modal-footer',
      description: 'Help modal footer',
    },
    {
      name: 'input-help-modal-close-button',
      description: 'Help modal close button',
    },
    {
      name: 'select-input-text-container',
      description: 'Text container',
    },
    {
      name: 'select-input-text',
      description: 'Text element',
    },
    {
      name: 'select-input-container',
      description: 'Selection container',
    },
    {
      name: 'select-input-menu-container',
      description: 'Menu container',
    },
    {
      name: 'select-input-menu-list-title',
      description: 'Menu title',
    },

    {
      name: 'select-input-menu-item-container',
      description: 'Menu item container',
    },
    {
      name: 'select-input-menu-item',
      description: 'Menu item element',
      states: ['disabled', 'selected'],
    },
    {
      name: 'select-input-menu-item-text',
      description: 'Menu item text',
      states: ['disabled', 'selected'],
    },
    {
      name: 'input-message-icon',
      description: 'Message icon',
    },
    {
      name: 'input-message-text',
      description: 'Message text',
    },

]}
inherits={[{ name: 'Modal', link: '/mobile/ui/modal' }]}
/>

<Docs.TranslationTable
  of="SelectInput"
  rows={['help', 'close', 'error', 'success', 'SelectInput.placeholder']}
/>

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable
  of="SelectInput"
  keys={['input-field', 'input-container', 'input-header', 'input-message']}
/>

</Tab>
</Tabs>

---
id: select-input-multi
category: Forms
title: SelectInputMulti
description: Allows users to select multiple values from a provided list of options.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=18828-105743&mode=design&t=Aa48cFkeiLakVzb1-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { SelectInputMulti } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'SelectInputMulti',
  inputs: [
    {
      prop: 'label',
      type: 'string',
    },
    {
      prop: 'hintText',
      type: 'string',
    },
    {
      prop: 'isDisabled',
      type: 'boolean',
    },
    {
      prop: 'isSearchable',
      type: 'boolean',
    },
    {
      prop: 'selectAll',
      type: 'boolean',
    },
    {
      prop: 'helpContent',
      type: 'string',
    },
  ],
}

() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInputMulti
        model="select-input-multi-sandbox"
        label="Your favorite framework/library"
        isSearchable
        options={[
          { value: 'react', label: 'React' },
          { value: 'ng', label: 'Angular' },
          { value: 'svelte', label: 'Svelte' },
          { value: 'vue', label: 'Vue' },
          { value: 'alpine', label: 'Alpine' },
          { value: 'ember', label: 'Ember' },
          { value: 'stimulus', label: 'Stimulus' },
          { value: 'preact', label: 'Preact' },
        ]}
      />
    </FormProvider>
  );
};
```

## Usage

Use the `options` prop to supply the options that can be selected. `options` is an array of objects, where each object should have two properties:

- `label`, a string which is how the option will be displayed in the list
- `value`, a string which is the unique identifier for the option

Sections can also be specified, in which case the section object should have `title`, `value`, and `items` properties instead of `label` and `value` (See [Titles](#titles) for more details).

```
options = {
  [
    { label: 'Item 1', value: 'item1' },
    { label: 'Item 2', value: 'item2', isDisabled: true },
    { label: 'Item 3', value: 'item3' },
    { label: 'Item 4', value: 'item4' },
    { label: 'Item 5', value: 'item5' },
  ]
}
```

## useForm (recommended)

Using the `useForm` hook with `FormProvider` sets state for the component.

```jsx live
() => {
  const form = useForm();

  const options = [
    { label: 'Colors', value: 'Colors' },
    { label: 'Elevation', value: 'E' },
    { label: 'Icon Brand', value: 'IB' },
    { label: 'Typography', value: 'T' },
    {
      title: 'CTA',
      value: 'CTA',
      items: [
        { label: 'Button', value: 'button' },
        { label: 'Cell Group', value: 'cellGroup' },
        { label: 'Chip', value: 'chip' },
      ],
    },
    {
      title: 'Controls',
      value: 'Controls',
      items: [
        { label: 'Checkbox', value: 'checkbox' },
        { label: 'Checkbox Group', value: 'CG' },
        { label: 'Radio Group', value: 'RG' },
        { label: 'Segmented Controls', value: 'SC' },
        { label: 'Toggle Switch', value: 'TS' },
      ],
    },
    {
      title: 'Data',
      value: 'Title1',
      items: [
        { label: 'Avatar', value: 'avatar' },
        { label: 'Indicator', value: 'indicator' },
        { label: 'Progress Bar', value: 'PB' },
      ],
    },
    {
      title: 'Data Viz',
      value: 'DataViz',
      items: [
        { label: 'Accordion', value: 'accordion' },
        { label: 'Accumulator', value: 'accumulator' },
        { label: 'Donut Chart', value: 'DC' },
      ],
    },
    {
      title: 'Forms',
      value: 'Forms',
      items: [
        { label: 'Date Input', value: 'DI' },
        { label: 'Select Input', value: 'SI' },
        { label: 'Select Input Multi', value: 'SIM' },
        { label: 'Input Field', value: 'IF' },
      ],
    },
    {
      title: 'Layout',
      value: 'Layout',
      items: [
        { label: 'Bottom Sheet', value: 'BS' },
        { label: 'Modal', value: 'modal' },
        { label: 'Card', value: 'card' },
      ],
    },
    {
      title: 'Media',
      value: 'Media',
      items: [
        { label: 'Icon', value: 'icon' },
        { label: 'Icon Custom', value: 'IC' },
        { label: 'Icon Material', value: 'IM' },
      ],
    },
    {
      title: 'Navigation',
      value: 'nav',
      items: [
        { label: 'Link', value: 'link' },
        { label: 'Tabs', value: 'tabs' },
      ],
    },
    {
      title: 'Notifications',
      value: 'Notifications',
      items: [
        { label: 'Alert', value: 'alert' },
        { label: 'Badge', value: 'badge' },
        { label: 'Toast', value: 'toast' },
      ],
    },
    {
      title: 'Typography',
      value: 'typography',
      items: [
        { label: 'Heading', value: 'heading' },
        { label: 'Text', value: 'text' },
      ],
    },
  ];

  const handleSubmit = (data) => {
    console.log('Submitted:', data);
  };

  return (
    <FormProvider state={form} onSubmit={handleSubmit}>
      <SelectInputMulti
        model="select-input-multi-form"
        label="Mobile Components"
        isSearchable
        options={options}
      />
      <Button submit size="small" style={{ marginTop: 15 }}>
        Submit
      </Button>
    </FormProvider>
  );
};
```

## useState

Using the `useState` hook gets values from the component state.

```jsx live
() => {
  const options = [
    { label: 'Colors', value: 'Colors' },
    { label: 'Elevation', value: 'E' },
    { label: 'Icon Brand', value: 'IB' },
    { label: 'Typography', value: 'T' },
    {
      title: 'CTA',
      value: 'CTA',
      items: [
        { label: 'Button', value: 'button' },
        { label: 'Cell Group', value: 'cellGroup' },
        { label: 'Chip', value: 'chip' },
      ],
    },
    {
      title: 'Controls',
      value: 'Controls',
      items: [
        { label: 'Checkbox', value: 'checkbox' },
        { label: 'Checkbox Group', value: 'CG' },
        { label: 'Radio Group', value: 'RG' },
        { label: 'Segmented Controls', value: 'SC' },
        { label: 'Toggle Switch', value: 'TS' },
      ],
    },
    {
      title: 'Data',
      value: 'Title1',
      items: [
        { label: 'Avatar', value: 'avatar' },
        { label: 'Indicator', value: 'indicator' },
        { label: 'Progress Bar', value: 'PB' },
      ],
    },
    {
      title: 'Data Viz',
      value: 'DataViz',
      items: [
        { label: 'Accordion', value: 'accordion' },
        { label: 'Accumulator', value: 'accumulator' },
        { label: 'Donut Chart', value: 'DC' },
      ],
    },
    {
      title: 'Forms',
      value: 'Forms',
      items: [
        { label: 'Date Input', value: 'DI' },
        { label: 'Select Input', value: 'SI' },
        { label: 'Select Input Multi', value: 'SIM' },
        { label: 'Input Field', value: 'IF' },
      ],
    },
    {
      title: 'Layout',
      value: 'Layout',
      items: [
        { label: 'Bottom Sheet', value: 'BS' },
        { label: 'Modal', value: 'modal' },
        { label: 'Card', value: 'card' },
      ],
    },
    {
      title: 'Media',
      value: 'Media',
      items: [
        { label: 'Icon', value: 'icon' },
        { label: 'Icon Custom', value: 'IC' },
        { label: 'Icon Material', value: 'IM' },
      ],
    },
    {
      title: 'Navigation',
      value: 'nav',
      items: [
        { label: 'Link', value: 'link' },
        { label: 'Tabs', value: 'tabs' },
      ],
    },
    {
      title: 'Notifications',
      value: 'Notifications',
      items: [
        { label: 'Alert', value: 'alert' },
        { label: 'Badge', value: 'badge' },
        { label: 'Toast', value: 'toast' },
      ],
    },
    {
      title: 'Typography',
      value: 'typography',
      items: [
        { label: 'Heading', value: 'heading' },
        { label: 'Text', value: 'text' },
      ],
    },
  ];
  const [value, setValue] = useState([]);

  const handleSubmit = () => {
    console.log('Submitted:', value);
  };

  return (
    <View>
      <SelectInputMulti
        label="Mobile Components"
        value={value}
        onChange={setValue}
        isSearchable
        options={options}
      />
      <Button onPress={handleSubmit} size="small" style={{ marginTop: 15 }}>
        Submit
      </Button>
    </View>
  );
};
```

## Titles

To create sections in the list, pass objects into the `options` array that have the `title`, `value`, and `items` properties. `title` specifies the name of the title, which will be bolded and not selectable, `value` is the unique identifier for the title, while `items` should contain the options within that section (with the same `label`/`value` format as normal).

```
options = {
  [
    {
      title: 'Title 1',
      value: 'Title1',
      items: [
        { label: 'item 1', value: 'item11' },
        { label: 'item 2', value: 'item12', isDisabled: true },
        { label: 'item 3', value: 'item13' },
      ],
    },
  ]
}
```

## Label

Use the `label` prop to display a label above the input menu.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInputMulti
        model="select-input-multi-label"
        label="Menu"
        options={[
          { value: 'react', label: 'React' },
          { value: 'ng', label: 'Angular' },
          { value: 'svelte', label: 'Svelte' },
          { value: 'vue', label: 'Vue' },
          { value: 'alpine', label: 'Alpine' },
          { value: 'ember', label: 'Ember' },
          { value: 'stimulus', label: 'Stimulus' },
          { value: 'preact', label: 'Preact' },
        ]}
      />
    </FormProvider>
  );
};
```

## Required

Use the `isRequired` prop to display an asterisk next to the label.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInputMulti
        model="select-input-multi-required"
        label="Menu"
        isRequired
        options={[
          { value: 'react', label: 'React' },
          { value: 'ng', label: 'Angular' },
          { value: 'svelte', label: 'Svelte' },
          { value: 'vue', label: 'Vue' },
          { value: 'alpine', label: 'Alpine' },
          { value: 'ember', label: 'Ember' },
          { value: 'stimulus', label: 'Stimulus' },
          { value: 'preact', label: 'Preact' },
        ]}
      />
    </FormProvider>
  );
};
```

## Hint Text

Use the `hintText` prop to display text below the label.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInputMulti
        model="select-input-multi-hint"
        label="Menu"
        hintText="Hint Text"
        options={[
          { value: 'react', label: 'React' },
          { value: 'ng', label: 'Angular' },
          { value: 'svelte', label: 'Svelte' },
          { value: 'vue', label: 'Vue' },
          { value: 'alpine', label: 'Alpine' },
          { value: 'ember', label: 'Ember' },
          { value: 'stimulus', label: 'Stimulus' },
          { value: 'preact', label: 'Preact' },
        ]}
      />
    </FormProvider>
  );
};
```

## Help Content

Use the `helpContent` prop to display a help icon in the top right of the container, which will display the provided content in a modal screen when pressed.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInputMulti
        model="select-input-multi-help"
        label="Menu"
        helpContent={
          <Text style={{ margin: 16 }}>
            This is some text used to explain something to the user, but is too
            long to be hint text.
          </Text>
        }
        options={[
          { value: 'react', label: 'React' },
          { value: 'ng', label: 'Angular' },
          { value: 'svelte', label: 'Svelte' },
          { value: 'vue', label: 'Vue' },
          { value: 'alpine', label: 'Alpine' },
          { value: 'ember', label: 'Ember' },
          { value: 'stimulus', label: 'Stimulus' },
          { value: 'preact', label: 'Preact' },
        ]}
      />
    </FormProvider>
  );
};
```

## Messages

Use the `errorMessage` and `successMessage` props to display a custom error or success message below the menu.

```jsx live
() => {
  const form = useForm();
  const data = [
    { value: 'react', label: 'React' },
    { value: 'ng', label: 'Angular' },
    { value: 'svelte', label: 'Svelte' },
    { value: 'vue', label: 'Vue' },
    { value: 'alpine', label: 'Alpine' },
    { value: 'ember', label: 'Ember' },
    { value: 'stimulus', label: 'Stimulus' },
    { value: 'preact', label: 'Preact' },
  ];

  return (
    <FormProvider state={form}>
      <Layout.Stack grow space={16}>
        <SelectInputMulti
          model="select-input-multi-error"
          label="Menu"
          isRequired={true}
          errorMessage="A selection is required"
          options={data}
        />
        <SelectInputMulti
          model="select-input-multi-success"
          label="Menu"
          successMessage="Great pick"
          options={data}
        />
      </Layout.Stack>
    </FormProvider>
  );
};
```

## Disabled

Set the `isDisabled` prop to `true` to disable the select list input field so users cannot select a value.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInputMulti
        model="select-input-multi-disabled"
        label="Disabled Menu"
        isDisabled={true}
        options={[
          { value: 'react', label: 'React' },
          { value: 'ng', label: 'Angular' },
          { value: 'svelte', label: 'Svelte' },
          { value: 'vue', label: 'Vue' },
          { value: 'alpine', label: 'Alpine' },
          { value: 'ember', label: 'Ember' },
          { value: 'stimulus', label: 'Stimulus' },
          { value: 'preact', label: 'Preact' },
        ]}
      />
    </FormProvider>
  );
};
```

## Disable Option Items

Disable an individual option item by setting the `isDisabled` key to `true` within the object.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInputMulti
        model="select-input-multi-disable-items"
        label="Your favorite framework/library"
        options={[
          { value: 'react', label: 'React' },
          { value: 'ng', label: 'Angular', isDisabled: true },
          { value: 'svelte', label: 'Svelte' },
          { value: 'vue', label: 'Vue' },
          { value: 'alpine', label: 'Alpine', isDisabled: true },
          { value: 'ember', label: 'Ember' },
          { value: 'stimulus', label: 'Stimulus' },
          { value: 'preact', label: 'Preact' },
        ]}
      />
    </FormProvider>
  );
};
```

## Select All

By setting the `selectAll` property to `true` you can make a "Select All" option visible at the top of the dropdown. When selected, all options will be selected. When deselected, all options will be deselected.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInputMulti
        model="select-input-multi-select-all"
        label="Your favorite framework/library"
        selectAll={true}
        options={[
          { value: 'react', label: 'React' },
          { value: 'ng', label: 'Angular' },
          { value: 'svelte', label: 'Svelte' },
          { value: 'vue', label: 'Vue' },
          { value: 'alpine', label: 'Alpine' },
          { value: 'ember', label: 'Ember' },
          { value: 'stimulus', label: 'Stimulus' },
          { value: 'preact', label: 'Preact' },
        ]}
      />
    </FormProvider>
  );
};
```

## Searchable

Use the `isSearchable` prop to display an input field for the user to search/filter the list of options that is located inside the dropdown.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInputMulti
        model="select-input-multi-searchable"
        label="Searchable"
        isSearchable
        options={[
          { label: 'Colors', value: 'Colors' },
          { label: 'Elevation', value: 'E' },
          { label: 'Icon Brand', value: 'IB' },
          { label: 'Typography', value: 'T' },
          {
            title: 'CTA',
            value: 'CTA',
            items: [
              { label: 'Button', value: 'button' },
              { label: 'Cell Group', value: 'cellGroup' },
              { label: 'Chip', value: 'chip' },
            ],
          },
          {
            title: 'Controls',
            value: 'Controls',
            items: [
              { label: 'Checkbox', value: 'checkbox' },
              { label: 'Checkbox Group', value: 'CG' },
              { label: 'Radio Group', value: 'RG' },
              { label: 'Segmented Controls', value: 'SC' },
              { label: 'Toggle Switch', value: 'TS' },
            ],
          },
          {
            title: 'Data',
            value: 'Title1',
            items: [
              { label: 'Avatar', value: 'avatar' },
              { label: 'Indicator', value: 'indicator' },
              { label: 'Progress Bar', value: 'PB' },
            ],
          },
          {
            title: 'Data Viz',
            value: 'DataViz',
            items: [
              { label: 'Accordion', value: 'accordion' },
              { label: 'Accumulator', value: 'accumulator' },
              { label: 'Donut Chart', value: 'DC' },
            ],
          },
          {
            title: 'Forms',
            value: 'Forms',
            items: [
              { label: 'Date Input', value: 'DI' },
              { label: 'Select Input', value: 'SI' },
              { label: 'Select Input Multi', value: 'SIM' },
              { label: 'Input Field', value: 'IF' },
            ],
          },
          {
            title: 'Layout',
            value: 'Layout',
            items: [
              { label: 'Bottom Sheet', value: 'BS' },
              { label: 'Modal', value: 'modal' },
              { label: 'Card', value: 'card' },
            ],
          },
          {
            title: 'Media',
            value: 'Media',
            items: [
              { label: 'Icon', value: 'icon' },
              { label: 'Icon Custom', value: 'IC' },
              { label: 'Icon Material', value: 'IM' },
            ],
          },
          {
            title: 'Navigation',
            value: 'nav',
            items: [
              { label: 'Link', value: 'link' },
              { label: 'Tabs', value: 'tabs' },
            ],
          },
          {
            title: 'Notifications',
            value: 'Notifications',
            items: [
              { label: 'Alert', value: 'alert' },
              { label: 'Badge', value: 'badge' },
              { label: 'Toast', value: 'toast' },
            ],
          },
          {
            title: 'Typography',
            value: 'typography',
            items: [
              { label: 'Heading', value: 'heading' },
              { label: 'Text', value: 'text' },
            ],
          },
        ]}
      />
    </FormProvider>
  );
};
```

## Fuse.js

Search Bar filtering uses the [Fuse.js](https://fusejs.io) library to fuzzy filter results. What is fuzzy searching? Generally speaking, fuzzy searching (more formally known as approximate string matching) is the technique of finding strings that are approximately equal to a given pattern (rather than exactly).

### Fuse Data

The `options` prop is the information that fuse will filter on and display in the search dropdown.

### Fuse Configurations

The fuse search options are set by default as follows. The keys are set to `label` and cannot be changed.

```
{
  keys: ['label', 'items.label'],
  includeMatches: true,
  findAllMatches: true,
  threshold: 0,
  ignoreLocation: true,
  minMatchCharLength: searchText.length,
}
```

### Custom Fuse Configurations

You can customize the fuse filter by following the documentation on [Fuse](https://fusejs.io/api/options.html) and passing your configurations into the `fuseConfigs` prop. To get the filtered list back, be sure `includeMatches` is always set to `true`.

```jsx live
() => {
  const [value, setValue] = useState([]);
  const customFuseConfigs = {
    ignoreLocation: false,
    distance: 0,
    includeMatches: true,
  };

  return (
    <SelectInputMulti
      label="Your favorite framework/library"
      value={value}
      onChange={setValue}
      selectAll={true}
      isSearchable={true}
      fuseConfigs={customFuseConfigs}
      options={[
        { value: 'react', label: 'React' },
        { value: 'ng', label: 'Angular' },
        { value: 'svelte', label: 'Svelte' },
        { value: 'vue', label: 'Vue' },
        { value: 'alpine', label: 'Alpine' },
        { value: 'ember', label: 'Ember' },
        { value: 'stimulus', label: 'Stimulus' },
        { value: 'preact', label: 'Preact' },
      ]}
    />
  );
};
```

## Custom Filtering

Use the `customFilter` prop to override the fuse.js filtering. The results returned from your customFilter function should be passed into the options prop. In the example function below, the filter is checking the first letter typed in the search bar against the first letter of each item in the list. If the letter is a match the item is included in the filtered list. Any 'type-ahead' styles will not be applied when a custom filtering function is being used.

```jsx live
() => {
  const [value, setValue] = useState([]);

  const filterFunction = (searchText, list) => {
    const newList = [];
    if (searchText.length > 0) {
      list.forEach((item) => {
        if (item.label) {
          if (item.label[0].toUpperCase() == searchText[0].toUpperCase()) {
            newList.push(item);
          }
        }
        if (item.items) {
          item.items.forEach((i) => {
            if (i.label[0].toUpperCase() == searchText[0].toUpperCase()) {
              newList.push(i);
            }
          });
        }
      });
    }
    return newList;
  };

  return (
    <SelectInputMulti
      label="Your favorite framework/library"
      value={value}
      onChange={setValue}
      selectAll={true}
      isSearchable={true}
      customFilter={filterFunction}
      options={[
        { label: 'Colors', value: 'Colors' },
        { label: 'Elevation', value: 'E' },
        { label: 'Icon Brand', value: 'IB' },
        { label: 'Typography', value: 'T' },
        {
          title: 'CTA',
          value: 'CTA',
          items: [
            { label: 'Button', value: 'button' },
            { label: 'Cell Group', value: 'cellGroup' },
            { label: 'Chip', value: 'chip' },
          ],
        },
        {
          title: 'Controls',
          value: 'Controls',
          items: [
            { label: 'Checkbox', value: 'checkbox' },
            { label: 'Checkbox Group', value: 'CG' },
            { label: 'Radio Group', value: 'RG' },
            { label: 'Segmented Controls', value: 'SC' },
            { label: 'Toggle Switch', value: 'TS' },
          ],
        },
        {
          title: 'Data',
          value: 'Title1',
          items: [
            { label: 'Avatar', value: 'avatar' },
            { label: 'Indicator', value: 'indicator' },
            { label: 'Progress Bar', value: 'PB' },
          ],
        },
        {
          title: 'Data Viz',
          value: 'DataViz',
          items: [
            { label: 'Accordion', value: 'accordion' },
            { label: 'Accumulator', value: 'accumulator' },
            { label: 'Donut Chart', value: 'DC' },
          ],
        },
        {
          title: 'Forms',
          value: 'Forms',
          items: [
            { label: 'Date Input', value: 'DI' },
            { label: 'Select Input', value: 'SI' },
            { label: 'Select Input Multi', value: 'SIM' },
            { label: 'Input Field', value: 'IF' },
          ],
        },
        {
          title: 'Layout',
          value: 'Layout',
          items: [
            { label: 'Bottom Sheet', value: 'BS' },
            { label: 'Modal', value: 'modal' },
            { label: 'Card', value: 'card' },
          ],
        },
        {
          title: 'Media',
          value: 'Media',
          items: [
            { label: 'Icon', value: 'icon' },
            { label: 'Icon Custom', value: 'IC' },
            { label: 'Icon Material', value: 'IM' },
          ],
        },
        {
          title: 'Navigation',
          value: 'nav',
          items: [
            { label: 'Link', value: 'link' },
            { label: 'Tabs', value: 'tabs' },
          ],
        },
        {
          title: 'Notifications',
          value: 'Notifications',
          items: [
            { label: 'Alert', value: 'alert' },
            { label: 'Badge', value: 'badge' },
            { label: 'Toast', value: 'toast' },
          ],
        },
        {
          title: 'Typography',
          value: 'typography',
          items: [
            { label: 'Heading', value: 'heading' },
            { label: 'Text', value: 'text' },
          ],
        },
      ]}
    />
  );
};
```

## Notes

In order for a user to select an item from the menu while the softkeyboard is up, the prop `keyboardShouldPersistTaps` is set to `'always'`. If the menu is contained in a ScrollView, `keyboardShouldPersistTaps={'always'}` should be set with in that view. This allows for the keyboard to remain open and an item to be selected on initial tap.

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="SelectInputMulti"
  rows={[
    {
      name: 'label',
      type: 'string',
      description: 'Select list label',
    },
    {
      name: 'modalTitle',
      type: 'string',
      description: 'Title of the input modal',
    },
    {
      name: 'errorMessage',
      type: 'string',
      description: 'Error message to be displayed below the select input field',
    },
    {
      name: 'hintText',
      type: 'string',
      description: 'Text displayed below the select input field',
    },
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired every time the value changes',
    },
    {
      name: 'onSubmit',
      type: 'function',
      description: 'Callback fired every time the submit button is pressed',
    },
    {
      name: 'customFilter',
      type: 'function',
      description: 'Custom function used for search',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description:
        'Flag to enable/disable the select list. If true, the select list will be disabled',
    },
    {
      name: 'successMessage',
      type: 'string',
      description:
        'Success message to be displayed below the select input field',
    },
    {
      name: 'isRequired',
      type: 'boolean',
      description:
        'Requires a user to make a selection. If true, the asterisk will be displayed next to the label',
    },
    {
      name: 'isSearchable',
      type: 'boolean',
      description:
        'Flag to enable/disable the select list search/filter feature',
    },
    {
      name: 'options',
      type: 'object[]',
      description:
        'List of options selectable in the select list input. { label: string, value: string }',
    },
    {
      name: 'fuseConfig',
      type: 'shape',
      description: 'Configs for Fuse',
    },
    {
      name: 'value',
      type: 'string',
      description:
        'Option value or list of option values selected in the select list input',
    },

    {
      name: 'selectAll',
      type: 'boolean',
      description: 'Toggles the Select All option',
    },
    {
      name: 'helpContent',
      type: 'string | ReactNode',
      description:
        'When defined, displays a help icon that can be tapped to view the provided content in a modal screen',
    },
    {
      name: 'helpButtonAccessibilityLabel',
      type: 'string',
      description: 'Set the accessibility label for the help button',
    },
    {
      name: 'placeholder',
      type: 'string',
      description: 'The rendered string when no option is selected',
    },

]}
/>

<Docs.ClassesTable
  of="SelectInputMulti"
  rows={[
    {
      name: 'select-input-multi-root',
      description: 'Root element',
    },
    {
      name: 'select-input-multi-header',
      description: 'Header element',
    },
    {
      name: 'select-input-multi-label',
      description: 'Label element',
    },
    {
      name: 'select-input-multi-hint-text',
      description: 'Input hint text',
    },
    {
      name: 'select-input-multi-help-button',
      description: 'Help button',
    },
    {
      name: 'select-input-multi-open-icon',
      description: 'Menu open icon',
    },
    {
      name: 'select-input-multi-modal',
      description: 'Menu modal',
    },
    {
      name: 'select-input-multi-menu-list',
      description: 'Menu list',
    },
    {
      name: 'select-input-multi-message',
      description: 'Message element',
    },
    {
      name: 'input-help-icon',
      description: 'Help icon element',
    },
    {
      name: 'input-help-modal-footer',
      description: 'Help modal footer',
    },
    {
      name: 'input-help-modal-close-button',
      description: 'Help modal close button',
    },
    {
      name: 'select-input-text-container',
      description: 'Text container',
    },
    {
      name: 'select-input-text',
      description: 'Text element',
    },
    {
      name: 'select-input-search-bar',
      description: 'Menu search bar',
    },
    {
      name: 'select-input-footer',
      description: 'Modal menu footer',
    },
    {
      name: 'select-input-footer-button',
      description: 'Modal menu footer button',
    },
    {
      name: 'select-input-multi-container',
      description: 'Selection container',
    },
    {
      name: 'select-input-menu-container',
      description: 'Menu container',
    },
    {
      name: 'select-input-menu-list-title',
      description: 'Menu title',
    },
    {
      name: 'select-input-close-icon',
      description: 'Close icon',
    },
    {
      name: 'select-input-menu-item-container',
      description: 'Menu item container',
    },
    {
      name: 'select-input-menu-item',
      description: 'Menu item element',
      states: ['disabled', 'selected'],
    },
    {
      name: 'select-input-menu-item-text',
      description: 'Menu item text',
      states: ['disabled', 'selected'],
    },
    {
      name: 'select-input-menu-item-checkbox',
      description: 'Menu item checkbox',
    },
    {
      name: 'select-input-menu-item-select-all-checkbox',
      description: 'Menu item select all checkbox',
    },
    {
      name: 'input-message-icon',
      description: 'Message icon',
    },
    {
      name: 'input-message-text',
      description: 'Message text',
    },
  ]}
  inherits={[{ name: 'Modal', link: '/mobile/ui/modal' }]}
/>

<Docs.TranslationTable
  of="SelectInputMulti"
  rows={['help', 'close', 'error', 'success', 'SelectInput.placeholder']}
/>

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable
  of="SelectInputMulti"
  keys={['input-field', 'input-container', 'input-header', 'input-message']}
/>

</Tab>

<Tab label="Migration">

<Docs.ComparisonTable of="SelectInputMulti" type="props" />

</Tab>
</Tabs>

---
id: skeleton
category: Overlay
title: Skeleton
description: Placeholder for loading content.
design: https://www.figma.com/design/5djnh49w0SBYAG5tFJifIG/v1.66.0-App-Abyss-Global%E2%80%A8Component-Library?m=auto&node-id=1469-39887&t=og176wcAIBNmTzwi-1
sourceIsTS: true
subDirectory: Skeleton/
---

<Tabs>

<Tab label="Overview">

```jsx
import { Skeleton } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Skeleton',
  inputs: [
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'Text', value: 'text' },
        { label: 'Square', value: 'square' },
        { label: 'Round', value: 'round' },
      ],
    },
    {
      prop: 'height',
      type: 'string',
    },
    {
      prop: 'width',
      type: 'string',
    },
    {
      prop: 'animated',
      type: 'boolean'
    },
  ],
}

<Skeleton variant="text" />
```

## Usage

The `Skeleton` component is a placeholder for content that is loading. It helps convey to users that the page is functioning as intended and that content will appear shortly.

###### Common Use Cases:

- Displaying a loading state for text, images, or cards.
- Providing a visual cue for asynchronous content.
- Maintaining layout consistency while data is being fetched.

```jsx live
() => {
  const avatar =
    'https://abyss.uhc.com/img/team/AbyssMobile/Thomas-Musengwa.png';
  const cardImage = 'https://abyss.uhc.com/img/graphics/card-image-example.png';

  const [isDoneLoading, onToggle] = useToggle(false);

  const returnContent = () => {
    if (isDoneLoading) {
      return (
        <>
          <Layout.Stack alignItems="left">
            <Layout.Group>
              <Layout.Group>
                <Image
                  source={{ uri: avatar }}
                  style={{
                    height: 50,
                    width: 50,
                    borderRadius: 25,
                  }}
                />
              </Layout.Group>
              <Layout.Group>
                <Layout.Stack space={0} alignItems="left">
                  <Text fontWeight={600}>Name goes here</Text>
                  <Text size="$semantic.font-size.p.60">Description</Text>
                </Layout.Stack>
              </Layout.Group>
            </Layout.Group>
            <Layout.Group>
              <Image
                source={{ uri: cardImage }}
                style={{
                  height: 100,
                  width: 260,
                  borderRadius: 10,
                }}
              />
            </Layout.Group>
          </Layout.Stack>
        </>
      );
    }
    return null;
  };

  const returnSkeletonStack = () => {
    if (!isDoneLoading) {
      return (
        <Layout.Stack alignItems="left">
          <Layout.Group>
            <Skeleton variant="round" />
            <Layout.Stack>
              <Skeleton variant="text" />
              <Skeleton variant="text" />
            </Layout.Stack>
          </Layout.Group>
          <Skeleton variant="square" width={256} height={100} />
        </Layout.Stack>
      );
    }
    return null;
  };

  return (
    <Layout.Stack alignItems="left">
      {returnContent()}
      {returnSkeletonStack()}
      <Button style={{ marginTop: 15 }} onPress={onToggle}>
        Toggle Loading
      </Button>
    </Layout.Stack>
  );
};
```

## Width and Height

The `height` and `width` props define the dimensions of the component. Setting their values to `100%` will fill its parent container.
The default values for `height` and `width` depend on the variant. For more details, refer to the [Variant](#variant--alt) section.

```jsx live
() => {
  return (
    <Layout.Stack alignItems="left">
      <Skeleton width={48} height={48} />
      <View style={{ width: 100, height: 100 }}>
        <Skeleton height="100%" width="100%" />
      </View>
      <Skeleton width={196} height={48} />
    </Layout.Stack>
  );
};
```

## Variant & Alt

The `alt` prop adjusts the color of the component, changing it to a lighter shade.

The `variant` prop defines the default size and border radius of the component. Use this prop to match the skeleton's shape to the content it represents.

###### Available Variants:

- **`text`**: The default variant with a `height` of _20px_, a `width` of _180px_, and slightly rounded edges. Ideal for text blocks.
- **`square`**: This variant has a default `height` and `width` of _48px_, with slightly rounded edges. Suitable for square images or icons.
- **`round`**: This variant also has a default `height` and `width` of _48px_, but features fully rounded edges. Best for avatars or circular icons.

```jsx live
() => {
  const SkeletonGroup = styled(Layout.Group, {
    padding: 8,
    variants: {
      alt: {
        true: {
          backgroundColor:
            '$semantic.color.surface.container.status.neutral.saturated',
        },
      },
    },
  });
  return (
    <Layout.Stack alignItems="left">
      <SkeletonGroup alignItems="bottom">
        <Skeleton variant="round" />
        <Skeleton variant="square" />
        <Skeleton variant="text" />
      </SkeletonGroup>
      <SkeletonGroup alt alignItems="bottom">
        <Skeleton alt variant="round" />
        <Skeleton alt variant="square" />
        <Skeleton alt variant="text" />
      </SkeletonGroup>
    </Layout.Stack>
  );
};
```

## Animations & Color

Animation is enabled by default. To disable it, set the `animated` prop to `false`.
The `color` prop can be used to customize the color of the component.
You can also customize the loader's color and opacity using the `loaderColor` and `loaderOpacity` props.

```jsx live
() => {
  const [isAnimated, onToggle] = useToggle(true);
  return (
    <Layout.Stack grow space={18}>
      <Layout.Stack alignItems="left">
        <Layout.Group>
          <Skeleton color="orange" animated={isAnimated} variant="round" />
          <Layout.Stack>
            <Skeleton animated={isAnimated} />
            <Skeleton animated={isAnimated} />
          </Layout.Stack>
        </Layout.Group>
        <Skeleton
          color="$semantic.color.surface.container.status.info.saturated"
          animated={isAnimated}
          variant="square"
          width={236}
          height={72}
        />
      </Layout.Stack>

      <Button onPress={onToggle} size="small" variant="secondary">
        <Text>Turn Animation {isAnimated ? 'OFF' : 'ON'}</Text>
      </Button>
    </Layout.Stack>
  );
};
```

## Skeleton with Children

Add children to the `Skeleton` component by placing elements between the `Skeleton` tags.

```jsx live
() => {
  const Row = styled('View', {
    display: 'flex',
    flexDirection: 'row',
    marginVertical: 15,
  });
  const InnerWrapper = styled('View', {
    padding: '$semantic.spacing.lg',
    justifyContent: 'space-between',
    height: '100%',
  });
  return (
    <Skeleton width={260} height={78} style={{ padding: 12 }}>
      <Layout.Stack alignItems="left">
        <Layout.Group>
          <Skeleton variant="round" animated={false} />
          <Layout.Stack>
            <Skeleton animated={false} />
            <Skeleton animated={false} />
          </Layout.Stack>
        </Layout.Group>
      </Layout.Stack>
    </Skeleton>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Skeleton"
  rows={[
    {
      name: 'width',
      type: 'number | string',
      description: 'Set width of skeleton',
    },
    {
      name: 'height',
      type: 'number | string',
      description: 'Set height of skeleton',
    },
    {
      name: 'animated',
      type: 'boolean',
      description: 'Set to false to disable animation',
    },
    {
      name: 'variant',
      type: "'text' | 'square' | 'round'",
      description: 'Change shape of the skeleton',
    },
    {
      name: 'children',
      type: 'node',
      description: 'The content within the skeleton',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Set the color of the skeleton',
    },
    {
      name: 'alt',
      type: 'boolean',
      description: 'sets the skeleton to a lighter shade',
    },
    {
      name: 'loadingColor',
      type: 'string',
      description: 'Set the color of the skeleton loader',
    },
    {
      name: 'loaderOpacity',
      type: 'string',
      description: 'Set the opacity of the skeleton loader',
    },
  ]}
/>

<Docs.ClassesTable
  of="Skeleton"
  rows={[
    {
      name: 'skeleton-root',
      description: 'Skeleton root element',
    },
  ]}
/>

<Docs.TranslationTable of="Skeleton" rows={['loading']} />

</Tab>

<Tab label="Tokens">

<h2> Component Tokens </h2>

**Note:** Click on the tokens to copy onto your clipboard.

<Docs.ComponentTokensTable of="Skeleton" keys={['skeleton']} />

</Tab>

<Tab label="Migration">

<Docs.ComparisonTable of="Skeleton" type="class" />

<Docs.ComparisonTable of="Skeleton" type="props" />

</Tab>
</Tabs>

---
id: style-sheet
category: Styling
title: StyleSheet
description: A utility to define and organize styles in an application
---

```jsx
import { StyleSheet } from '@uhg-abyss/mobile';
```

The `StyleSheet` module is a utility for defining and organizing styles in an application. It provides a way
to create an abstraction over native styles, ensuring performance optimization and consistency across different platforms.

## Key Features

- **Platform Consistency:** By using `StyleSheet`, you can define styles that work across both iOS and Android, ensuring a
  uniform look and feel for your application.

  <br />

- **Performance Optimization:** `StyleSheet optimizes style calculations which can significantly improve the rendering
  performance of your app. It ensures that styles are calculated once then applied efficiently.

  <br />

- **Readability and Maintainability:** Using `StyleSheet.create`, you can separate style definitions from your component logic,
  making your code more readable and easier to maintain.

## Abyss StyleSheet vs. React Native StyleSheet

The Abyss StyleSheet extends the React Native StyleSheet API, so it can be used as a direct replacement and adds additional features. The additional
functionality works in conjunction with the [useStyleSheet](/mobile/hooks/use-style-sheet) hook.

### Token Typescript Support

`StyleSheet` extends the normal TypeScript declarations by allowing additional values to be placed in as values, such as
tokens, pixels and rem values.

![StyleSheet TypeScript](/mobile/styleSheet/stylesheet-typescript.png)

### Media Query

Media queries allows to have different styles for different screens, platform, direction and orientation.
They are supported as properties with `@media` prefix.

- **width**: _`<length>`_
- **height**: _`<length>`_
- **min-width**: _`<length>`_
- **min-height**: _`<length>`_
- **max-width**: _`<length>`_
- **max-height**: _`<length>`_
- **direction**: (_`ltr`_ | _`rtl`_)
- **platform**: (_`ios`_ | _`web`_ | _`android`_)
- **orientation**: (_`landscape`_ | _`portrait`_)
- **aspect-ratio**: _`<ratio>`_

Resize browser window to see changes on the box.

```jsx live-expanded
const themedStyles = StyleSheet.create({
  label: {
    fontWeight: '$core.font-weight.bold',
    textAlign: 'center',
    '@media (min-width: 800) and (max-width: 1100)': {
      color: '$semantic.color.text.label.status.info',
    },
    '@media (orientation: portrait)': {
      paddingHorizontal: 16,
    },
    '@media (orientation: landscape)': {
      paddingHorizontal: 44,
    },
    '@media (min-width: 900px)': {
      color: '$semantic.color.text.body.alt',
    },
  },
  box: {
    width: 250,
    height: 200,
    justifyContent: 'center',
    backgroundColor: '$semantic.color.surface.container.tertiary',
    '@media web': {
      borderRadius: 8,
    },
    '@media (max-width: 700px)': {
      width: 150,
      backgroundColor: '$semantic.color.surface.container.status.error.tint',
    },
    '@media (min-width: 900px)': {
      width: 350,
      backgroundColor:
        '$semantic.color.surface.container.status.success.saturated',
    },
  },
});

render(() => {
  const styles = useStyleSheet(themedStyles);
  return (
    <View style={styles.box}>
      <Text style={styles.label}>
        Resize browser window to see changes on the box.
      </Text>
    </View>
  );
});
```

### Pixel and Rem Support

Similar to [CSS3 rem unit](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/) it allows to define any integer value as relative to the root element. In our case the root value
is set to `16`. It makes it easy to scale app depending on screen size and other conditions.

`StyleSheet` also accepts string pixel values (e.g. '16px'), which typically isn't available in React Native.

```jsx live
const themedStyles = StyleSheet.create({
  text: {
    color: '$semantic.color.text.label.status.info',
    fontSize: '2rem',
    lineHeight: '50px',
    fontWeight: '$semantic.font-weight.semibold',
  },
});

render(() => {
  const styles = useStyleSheet(themedStyles);

  return <Text style={styles.text}>Abyss Mobile</Text>;
});
```

### Operations

Any value can contain one of following math operations: `*` , `/`, `+`, `-`. Operands can be numbers, tokens, pixels or rems.
There must be a space between operands and operations.

```jsx live
const themedStyles = StyleSheet.create({
  box: {
    backgroundColor: '$semantic.color.surface.container.emphasis.4',
    borderRadius: '$core.border-radius.xl * 2',
    padding: '$semantic.spacing.xl * 2',
    borderWidth: '2 * 3',
    borderColor: '$semantic.color.border.status.saturated.neutral',
  },
  text: {
    fontSize: '$core.font-size.p.80 * 3',
    fontWeight: '$core.font-weight.bold',
    color: '$semantic.color.text.body.tertiary',
    textAlign: 'center',
  },
});

render(() => {
  const styles = useStyleSheet(themedStyles);
  return (
    <View style={styles.box}>
      <Text style={styles.text}>Abyss Mobile</Text>
    </View>
  );
});
```

## Methods

### create()

```tsx
static create(styles: Object): Object;
```

Creates a StyleSheet style reference from the given object.

```jsx live
const themedStyles = StyleSheet.create({
  container: {
    flex: 1,
    padding: '$semantic.spacing.xl',
    backgroundColor: '$semantic.color.surface.container.tertiary',
  },
  title: {
    marginTop: '$semantic.spacing.lg',
    paddingVertical: '$semantic.spacing.sm',
    borderWidth: 4,
    borderColor: '$semantic.color.border.status.saturated.neutral',
    borderRadius: '$core.border-radius.xl',
    backgroundColor: '$semantic.color.surface.container.emphasis.4',
    color: '$semantic.color.text.body.tertiary',
    textAlign: 'center',
    fontSize: '$core.font-size.h.40',
    fontWeight: '$core.font-weight.xbold',
  },
});

render(() => {
  const styles = useStyleSheet(themedStyles);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Abyss Mobile</Text>
    </View>
  );
});
```

### createThemed()

```tsx
static createThemed(theme: Theme, styles: Object): Object;
```

If you have direct access to a theme and do not want to use the `useStyleSheet` hook,
you can add the theme directly as a parameter to the `createThemed` function and use token
values in the StyleSheet. If your theme has token overrides, those can be used as well.

```jsx live
const theme = createTheme('uhc', {
  theme: {
    sizes: { notTooBigNotTooSmall: 200 },
    radii: { fullyRounded: 1000000 },
  },
});

const styles = StyleSheet.createThemed(theme, {
  circle: {
    backgroundColor: '$semantic.color.surface.container.emphasis.4',
    height: '$notTooBigNotTooSmall',
    width: '$notTooBigNotTooSmall',
    borderRadius: '$fullyRounded',
  },
});

render(() => {
  return <View style={styles.circle} />;
});
```

### compose()

```tsx
static compose(style1: Object, style2: Object): Object | Object[];
```

Combines two styles such that `style2` will override any styles in `style1`.
If either style is falsy, the other one is returned without allocating an array,
saving allocations and maintaining reference equality for PureComponent checks.

```jsx live
const page = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: 'white',
  },
  text: {
    fontSize: 30,
    color: '#4B4D4F',
  },
});

const lists = StyleSheet.create({
  listContainer: {
    flex: 1,
    backgroundColor: '#D9E9FA',
  },
  listItem: {
    fontStyle: 'italic',
    fontWeight: 'bold',
  },
});

const container = StyleSheet.compose(page.container, lists.listContainer);
const text = StyleSheet.compose(page.text, lists.listItem);

render(() => {
  return (
    <View style={container}>
      <Text style={text}>Abyss Mobile</Text>
    </View>
  );
});
```

### flatten()

```tsx
static flatten(style: Object[]): Object;
```

Flattens an array of style objects, into one aggregated style object.

```jsx live
const page = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    alignItems: 'center',
  },
  text: {
    color: '#000',
    fontSize: 14,
    fontWeight: 'bold',
  },
  code: {
    marginTop: 12,
    padding: 12,
    borderRadius: 8,
    color: '#666',
    backgroundColor: '#EAEAEA',
  },
});

const typography = StyleSheet.create({
  header: {
    color: '#004BA0',
    fontSize: 30,
    marginBottom: 36,
  },
});

const flattenedTextStyle = StyleSheet.flatten([page.text, typography.header]);

render(() => {
  return (
    <View style={page.container}>
      <Text style={flattenedTextStyle}>React Native</Text>
      <Text>Flattened Text Style</Text>
      <Text style={page.code}>
        {JSON.stringify(flattenedTextStyle, null, 2)}
      </Text>
    </View>
  );
});
```

### setStyleAttributePreprocessor()

```jsx render
<Web.Alert
  title="WARNING: EXPERIMENTAL."
  variant="warning"
  actionHref="https://reactnative.dev/docs/stylesheet#setstyleattributepreprocessor"
  actionText="More on React Native Docs"
  dismissible={false}
>
  Breaking changes will probably happen a lot and will not be reliably
  announced. The whole thing might be deleted, who knows? Use at your own risk.
</Web.Alert>
```

<br />

```tsx
static setStyleAttributePreprocessor(
  property: string,
  process: (propValue: any) => any,
);
```

Sets a function to use to pre-process a style property value.
This is used internally to process color and transform values.
You should not use this unless you really know what you are doing and have exhausted other options.

## Properties

### absoluteFill

A very common pattern is to create overlays with position absolute and zero positioning
(`position: 'absolute', left: 0, right: 0, top: 0, bottom: 0`), so `absoluteFill` can be
used for convenience and to reduce duplication of these repeated styles. If you want, absoluteFill
can be used to create a customized entry in a StyleSheet.

```jsx live
const themedStyles = StyleSheet.create({
  container: {
    height: 250,
  },
  box1: {
    position: 'absolute',
    top: 40,
    left: 40,
    width: 100,
    height: 100,
    backgroundColor: '$semantic.color.surface.container.status.error.saturated',
  },
  box2: {
    width: 100,
    height: 100,
    backgroundColor: '$semantic.color.surface.container.status.info.saturated',
  },
  box3: {
    position: 'absolute',
    top: 120,
    left: 120,
    width: 100,
    height: 100,
    backgroundColor:
      '$semantic.color.surface.container.status.success.saturated',
  },
  text: {
    color: '$semantic.color.text.body.alt',
    fontSize: 80,
  },
});

render(() => {
  const styles = useStyleSheet(themedStyles);

  return (
    <View style={styles.container}>
      <View style={styles.box1}>
        <Text style={styles.text}>1</Text>
      </View>
      <View style={[styles.box2, StyleSheet.absoluteFill]}>
        <Text style={styles.text}>2</Text>
      </View>
      <View style={styles.box3}>
        <Text style={styles.text}>3</Text>
      </View>
    </View>
  );
});
```

### absoluteFillObject

Sometimes you may want absoluteFill but with a couple tweaks - absoluteFillObject can be
used to create a customized entry in a StyleSheet.

```jsx live
const themedStyles = StyleSheet.create({
  container: {
    height: 250,
  },
  box1: {
    position: 'absolute',
    top: 40,
    left: 40,
    width: 100,
    height: 100,
    backgroundColor: '$semantic.color.surface.container.status.error.saturated',
  },
  box2: {
    ...StyleSheet.absoluteFillObject,
    top: 120,
    left: 50,
    width: 100,
    height: 100,
    backgroundColor: '$semantic.color.surface.container.status.info.saturated',
  },
  box3: {
    ...StyleSheet.absoluteFillObject,
    top: 120,
    left: 120,
    width: 100,
    height: 100,
    backgroundColor:
      '$semantic.color.surface.container.status.success.saturated',
  },
  text: {
    color: '$semantic.color.text.body.alt',
    fontSize: 80,
  },
});

render(() => {
  const styles = useStyleSheet(themedStyles);

  return (
    <View style={styles.container}>
      <View style={styles.box1}>
        <Text style={styles.text}>1</Text>
      </View>
      <View style={styles.box2}>
        <Text style={styles.text}>2</Text>
      </View>
      <View style={styles.box3}>
        <Text style={styles.text}>3</Text>
      </View>
    </View>
  );
});
```

### hairlineWidth

This is defined as the width of a thin line on the platform. It can be used as the thickness
of a border or division between two elements

```jsx live
const themedStyles = StyleSheet.create({
  container: {
    flex: 1,
    padding: '$core.spacing.600',
  },
  row: {
    padding: '$semantic.spacing.sm',
    borderBottomColor: '$semantic.color.border.status.saturated.error',
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
});

render(() => {
  const styles = useStyleSheet(themedStyles);

  return (
    <View style={styles.container}>
      <Text style={styles.row}>Abyss</Text>
      <Text style={styles.row}>Mobile</Text>
    </View>
  );
});
```

## Usage with Abyss component

All Abyss components are able to parse objects from the StyleSheet directly, so there is no need to
use the `useStylesheet` hook if the styles are only going into Abyss components.

```jsx live
const styles = StyleSheet.create({
  button: {
    backgroundColor: '$semantic.color.surface.container.status.info.saturated',
    borderWidth: '4px',
    borderColor: '$semantic.color.border.status.saturated.error',
  },
});

render(() => {
  return <Button style={styles.button}>Styled Button</Button>;
});
```

---
id: tabs
category: Content
title: Tabs
description: The Tabs component is used to navigate to other pages, or sections of a page.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=9678-35146&mode=design&t=DgoELndJt2PBF6Lf-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { Tabs } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Tabs',
  inputs: [
    {
      prop: 'alt',
      type: 'boolean'
    },
    {
      prop: 'disableSwipe',
      type: 'boolean'
    },
    {
      prop: 'disableTransition',
      type: 'boolean',
    },
    {
      prop: 'tabBarColor',
      type: 'string'
    },
  ],
}

<Tabs heading="Tabs Sandbox">
  <Tabs.Tab label="Tab 1">
    <Text style={{ margin: '$semantic.spacing.xl' }}>Tab 1 Content</Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab 2">
    <Text style={{ margin: '$semantic.spacing.xl' }}>Tab 2 Content</Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab 3">
    <Text style={{ margin: '$semantic.spacing.xl' }}>Tab 3 Content</Text>
  </Tabs.Tab>
</Tabs>
```

## Heading

The `heading` property provides a label that describes the purpose of the set of tabs. This is a required property as it gives screen reader users important context.

```jsx
<Tabs heading="Tab Group Heading">
  <Tabs.Tab label="Tab - 1">
    <Text>Tab 1 Content</Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab - 2">
    <Text>Tab 2 Content</Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab - 3">
    <Text>Tab 3 Content</Text>
  </Tabs.Tab>
</Tabs>
```

## Initial Tab

Use the `initialTab` property to set the tab that is active at build time. The default is set to the first tab in the sequence.
The active state will be handled internally by the component. To directly control the active state see the next section.

```jsx live
<Tabs initialTab={2} heading="Initial Tab Sandbox">
  <Tabs.Tab label="Tab 1">
    <Text style={{ margin: '$semantic.spacing.xl' }}>Tab 1 Content</Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab 2">
    <Text style={{ margin: '$semantic.spacing.xl' }}>
      Content starts with tab 2
    </Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab 3">
    <Text style={{ margin: '$semantic.spacing.xl' }}>Tab 3 Content</Text>
  </Tabs.Tab>
</Tabs>
```

## Alt Variant

Use the `alt` prop to apply the alternative styling to the Tabs component.

```jsx live
<Tabs alt heading="Alt Variant Tabs">
  <Tabs.Tab label="Tab 1">
    <Text style={{ margin: '$semantic.spacing.xl' }}>Tab 1 Content</Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab 2">
    <Text style={{ margin: '$semantic.spacing.xl' }}>Tab 2 Content</Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab 3">
    <Text style={{ margin: '$semantic.spacing.xl' }}>Tab 3 Content</Text>
  </Tabs.Tab>
</Tabs>
```

## Programmatic Navigation

Ref functions control of the Tabs active state.

- `goToTab(index: number)`: Navigate to a specific tab (1-based).
- `goToPrevTab()`: Navigate to the previous tab.
- `goToNextTab()`: Navigate to the next tab.
- `activeTab`: The current active tab (1-based).

The `initialTab` property can still be used to set the initial tab at build time.

Create a ref and optionally attach the provided type `TabsRef` to the ref for type safety.
Pass the ref to the Tabs component, then call the functions on the ref for navigation.

```jsx live
() => {
  /**
   * For types, import TabsRef from '@uhg-abyss/mobile/ui/Tabs' and use:
   * const ref = useRef<TabsRef>(null);
   */

  const ref = useRef(null);

  return (
    <View>
      <Tabs heading="Using Refs" ref={ref}>
        <Tabs.Tab label="Tab 1">
          <Text style={{ margin: '$semantic.spacing.xl' }}>Tab 1 Content</Text>
        </Tabs.Tab>
        <Tabs.Tab label="Tab 2">
          <Text style={{ margin: '$semantic.spacing.xl' }}>Content starts with tab 2</Text>
        </Tabs.Tab>
        <Tabs.Tab label="Tab 3">
          <Text style={{ margin: '$semantic.spacing.xl' }}>Tab 3 Content</Text>
        </Tabs.Tab>
      </Tabs>
      <Layout.Group>
        <Button size="small" onPress={() => {return ref.current!.goToTab(1);}}>
          Set To Tab 1
        </Button>
       <Button size="small" onPress={() => {return ref.current!.goToTab(2);}}>
          Set To Tab 2
        </Button>
         <Button size="small" onPress={() => {return ref.current!.goToTab(3);}}>
          Set To Tab 3
        </Button>
      </Layout.Group>
    </View>
  );
};
```

## Disable Swipe

Use the `disableSwipe` prop to disable swiping from one tab to another.

```jsx live
<Tabs disableSwipe heading="Swipe Disabled">
  <Tabs.Tab label="Tab 1">
    <Text style={{ margin: '$semantic.spacing.xl' }}>
      Swiping is now disabled. You can go to another tab by pressing one of the
      tab buttons.
    </Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab 2">
    <Text style={{ margin: '$semantic.spacing.xl' }}>Tab 2 Content</Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab 3">
    <Text style={{ margin: '$semantic.spacing.xl' }}>Tab 3 Content</Text>
  </Tabs.Tab>
</Tabs>
```

## Disable Transition

Use the `disableTransition` prop to disable animating from one tab to another on either a swipe or a tab button press.

```jsx live
<Tabs disableTransition heading="Transition Disabled">
  <Tabs.Tab label="Tab 1">
    <Text style={{ margin: '$semantic.spacing.xl' }}>Tab 1 Content</Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab 2">
    <Text style={{ margin: '$semantic.spacing.xl' }}>Tab 2 Content</Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab 3">
    <Text style={{ margin: '$semantic.spacing.xl' }}>Tab 3 Content</Text>
  </Tabs.Tab>
</Tabs>
```

## Scrollable Tabs and Menu

If there are more than three tabs, the Tabs component will scroll horizontally. If there are fewer than four tabs and the tabs fit on the screen horizontally, the scroll does not apply. If the tabs do not fit, a horizontal scroll is activated. Ideally, there should be no more than eight tabs.

The Tab menu opens up a bottom sheet with a list of the tabs. When there are fewer than four tabs, there is not a Tab menu.

```jsx live
<Box color="$semantic.color.surface.container.secondary" width={500}>
  <Tabs heading="Light Tabs">
    <Tabs.Tab label="Default 1">
      <Text style={{ margin: '$semantic.spacing.xl' }}>Tab 1 Content</Text>
    </Tabs.Tab>
    <Tabs.Tab label="Default 2">
      <Text style={{ margin: '$semantic.spacing.xl' }}>Tab 2 Content</Text>
    </Tabs.Tab>
    <Tabs.Tab label="Default 3">
      <Text style={{ margin: '$semantic.spacing.xl' }}>Tab 3 Content</Text>
    </Tabs.Tab>
    <Tabs.Tab label="Default 4">
      <Text style={{ margin: '$semantic.spacing.xl' }}>Tab 4 Content</Text>
    </Tabs.Tab>
    <Tabs.Tab label="Default 5">
      <Text style={{ margin: '$semantic.spacing.xl' }}>Tab 5 Content</Text>
    </Tabs.Tab>
    <Tabs.Tab label="Default 6">
      <Text style={{ margin: '$semantic.spacing.xl' }}>Tab 6 Content</Text>
    </Tabs.Tab>
  </Tabs>
</Box>
```

## Tab Bar Color

Use the `tabBarColor` prop to change the color of the tab bar.

```jsx live
<Tabs
  heading="Tab Sandbox"
  tabBarColor="$semantic.color.surface.container.status.info.tint"
>
  <Tabs.Tab label="Tab 1">
    <Text style={{ margin: '$semantic.spacing.xl' }}>Tab 1 Content</Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab 2">
    <Text style={{ margin: '$semantic.spacing.xl' }}>
      Content starts with tab 2
    </Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab 3">
    <Text style={{ margin: '$semantic.spacing.xl' }}>Tab 3 Content</Text>
  </Tabs.Tab>
</Tabs>
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Tabs"
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the tabs component',
    },
    {
      name: 'alt',
      type: 'boolean',
      description: 'Flag to apply `alt` variant to the Tabs component',
    },
    {
      name: 'disableSwipe',
      type: 'boolean',
      description: 'Flag to disable tab scrolling',
      default: 'false',
    },
    {
      name: 'disableTransition',
      type: 'boolean',
      description: 'Flag to disable tab transitions',
      default: 'false',
    },
    {
      name: 'initialTab',
      type: 'number',
      description: 'Used to indicate initial tab',
    },
    {
      name: 'heading',
      type: 'string',
      description:
        'The name for the tabs. Used to set the accessibility label tag and bottom sheet heading',
    },
    {
      name: 'tabBarColor',
      type: 'string',
      description: 'Color of the tab background',
    },
  ]}
/>

<Docs.PropsTable
  of="Tabs.Tab"
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the tab',
    },
    {
      name: 'label',
      type: 'string',
      description: 'The label of the tab',
    },
  ]}
/>

<Docs.ClassesTable
  of="Tabs"
  rows={[
    {
      name: 'tabs-root',
      description: 'Tabs root element',
    },
    {
      name: 'tabs-screen-wrapper',
      description: 'Tabs screen wrapper',
    },
    {
      name: 'tabs-tab-bar',
      description: 'Tab bar at the top of the component',
    },
    {
      name: 'tabs-menu-button',
      description: 'Tabs menu button',
    },
    {
      name: 'tabs-menu-icon',
      description: 'Tabs menu button icon',
    },
    {
      name: 'tabs-tab-button',
      description: 'Tab button',
    },
    {
      name: 'tabs-tab-button-active-label',
      description: 'Tab button active label',
    },
    {
      name: 'tabs-tab-button-inactive-label',
      description: 'Tab button inactive label',
    },
    {
      name: 'tabs-tab-indicator',
      description: 'Tab scroll indicator',
    },
    {
      name: 'tabs-bottom-sheet',
      description: 'Bottom sheet menu element',
    },
    {
      name: 'tabs-bottom-sheet-container',
      description: 'Tabs bottom sheet list container',
    },
    {
      name: 'tabs-bottom-sheet-active-line',
      description: 'Tabs bottom sheet active line',
    },
    {
      name: 'tabs-bottom-sheet-list-item',
      description: 'Tab bottom sheet item',
    },
    {
      name: 'tabs-bottom-sheet-list-item-label',
      description: 'Tabs bottom sheet item label',
    },
  ]}
  inherits={[{ name: 'BottomSheet', link: '/mobile/ui/bottom-sheet' }]}
/>

<Docs.ClassesTable
  of="Tabs.Tab"
  rows={[
    {
      name: 'tabs-tab-root',
      description: 'Tab root element',
    },
  ]}
/>

<Docs.TranslationTable of="Tabs" rows={['Tabs.openMenu', 'Tabs.selected']} />

</Tab>

<Tab label="Accessibility">

## Dynamic Type

Text and Icons on Tabs scale to 3XL.

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable
  of="Tabs"
  keys={['tabs', 'tabs-tab-item', 'tabs-menu-item']}
/>

</Tab>

<Tab label="Migration">

<Docs.ComparisonTable of="Tabs" type="props" />

</Tab>
</Tabs>

---
id: test-provider
category: Providers
title: TestProvider
description: Used to determine strategy for testing
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { TestProvider } from '@uhg-abyss/mobile';
```

The `TestProvider` is a component that provides a context for testing purposes. It allows you to specify a strategy for testing, which can be either "root" or "class".
The provider wraps the rest of the component tree and applies the specified strategy.

### Class strategy (default)

The `"class"` strategy (similar to default) allows testing of nested components by appending the Abyss class name to your `testID`. This creates unique identifiers for each element within the component.

For example, let's say the `testID` of [ProgressBar](/mobile/ui/progress-bar) is set to `"your-test-ID"`.

```jsx
<TestProvider strategy="class">
  <ProgressBar testID="your-test-ID" />
</TestProvider>
```

We can then refer to the classes for the ProgressBar.

<Docs.ClassesTable
  of="ProgressBar"
  rows={[
    {
      name: 'progress-bar-root',
      description: 'Progress bar root element',
    },
    {
      name: 'progress-bar-slide',
      description: 'Progress bar slide',
    },
  ]}
/>

The resulting test IDs will be _**`"your-test-ID-abyss-progress-bar-root"`**_ & _**`"your-test-ID-abyss-progress-bar-slide"`**_.

### Root strategy

The `"root"` strategy applies the `testID` only to the root element of the component. This means you won't be able to target nested elements within the Abyss component for testing.

For example, let's say the `testID` of [ProgressBar](/mobile/ui/progress-bar) is set to `"your-test-ID"`.

```jsx
<TestProvider strategy="root">
  <ProgressBar testID="your-test-ID" />
</TestProvider>
```

The resulting testID will still be **_`"your-test-ID"`_**.

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="TestProvider"
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The rest of the component tree',
    },
    {
      name: 'strategy',
      type: '"root" | "class"',
      description: 'The strategy to use for testing',
    },
  ]}
/>

</Tab>
</Tabs>

---
id: text
category: Typography
title: Text
description: Used to create segments of text such as phrases, sentences, and paragraphs.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=9470%3A32790
pagination_prev: mobile/ui/heading
# pagination_next: null
---

<Tabs>

<Tab label="Overview">

```jsx
import { Text } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Text',
  inputs: [
    {
     prop: 'children',
     type: 'string',
    },
    {
      prop: 'color',
      type: 'string',
    },
    {
      prop: 'fontWeight',
      type: 'string',
    },
    {
      prop: 'size',
      type: 'string',
    },
    {
      prop: 'transform',
      type: 'select',
      options: [
        { label: 'none', value: 'none' },
        { label: 'capitalize', value: 'capitalize' },
        { label: 'lowercase', value: 'lowercase' },
        { label: 'uppercase', value: 'uppercase' },
      ],
    },
    {
      prop: 'textAlign',
      type: 'select',
      options: [
        { label: 'left', value: 'left' },
        { label: 'center', value: 'center' },
        { label: 'right', value: 'right' },
      ],
    },
  ],
}

<Text>Enter message here</Text>
```

## Set Global Text Font

One of the limitations of our library is the inability to install fonts into applications. Because of this, we have reserved a special token, `$text`, to be added in the createTheme function, which will add the font to all Heading components globally.

In the example below, the font 'UHCSans' is set as the text font and will now be applied to all Text components.

```jsx
import { ThemeProvider, createTheme } from '@uhg-abyss/mobile';

const theme = createTheme('uhc', {
  theme: {
    fonts: {
      text: 'UHCSans',
    },
  },
});

const App = () => {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
};
```

Any individual Text component can override the font with the `fontFamily` prop.

## Color

Use the `color` property to set the color of the text. The default is set to `black`.

```jsx live
<Layout.Stack alignItems="left">
  <Text>Some filler text - Black</Text>
  <Text color="$semantic.color.text.label.status.error">
    Some filler text - error
  </Text>
  <Text color="#FF00FF">Some filler text - hex</Text>
  <Text color="blue">Some filler text - color</Text>
</Layout.Stack>
```

## Sizes

Use the `size` property to change the size of the text. The default is set to md which is 16px. The values for each size are represented by `FontSize - LineHeight`.

```jsx live
<Layout.Stack alignItems="left">
  <Text size="$core.font-size.p.100">Body 1 - Large / 18px - 24px</Text>
  <Text size="$core.font-size.p.80">Body 2 - Medium / 16px - 20px</Text>
  <Text size="$core.font-size.p.60">Body 3 - Small / 14px - 16px</Text>
  <Text size="$core.font-size.p.40">Small 1 - Extra Small / 12px - 16px</Text>
</Layout.Stack>
```

## Font Weight

Use the `fontWeight` property to change the weight of the text.

```jsx live
<Layout.Stack alignItems="left">
  <Text fontWeight="$core.font-weight.lighter">Lighter Text</Text>
  <Text fontWeight="$core.font-weight.light">Light Text</Text>
  <Text fontWeight="$core.font-weight.regular">Regular Text</Text>
  <Text fontWeight="$core.font-weight.medium">Medium Text</Text>
  <Text fontWeight="$core.font-weight.semibold">Semibold Text</Text>
  <Text fontWeight="$core.font-weight.bold">Bold Text</Text>
  <Text fontWeight="$core.font-weight.xbold">Bolder Text</Text>
  <Text fontWeight="$core.font-weight.heavy">Heavy Text</Text>
</Layout.Stack>
```

## Transform

Use the `transform` property to change the formatting of the text. Variants available include the default case, `capitalize` the first letter of each word, `lowercase` all letters, or `uppercase` all letters.

```jsx live
<Layout.Stack alignItems="left">
  <Text>Default text</Text>
  <Text transform="capitalize">Capitalize text</Text>
  <Text transform="lowercase">Lowercase text</Text>
  <Text transform="uppercase">Uppercase text</Text>
</Layout.Stack>
```

## Text Align

Use the `textAlign` prop to change the alignment of the text. Options include `left`, `center` and `right`. Default is `left`.

```jsx live
<Layout.Stack grow>
  <Text textAlign="left">Left Aligned Text</Text>
  <Text textAlign="center">Center Aligned Text</Text>
  <Text textAlign="right">Right Aligned Text</Text>
</Layout.Stack>
```

## Animated

Use the `animated` prop to use animation styles on the component.
The default is set to `false`.

```jsx live
() => {
  const val = useRef(new Animated.Value(0)).current;

  const animateTo = (toValue) => {
    return Animated.timing(val, {
      toValue,
      duration: 2000,
      easing: Easing.linear,
      useNativeDriver: false,
    });
  };

  useEffect(() => {
    Animated.loop(Animated.sequence([animateTo(1), animateTo(0)])).start();
  });

  return (
    <Text
      animated
      style={{
        color: val.interpolate({
          inputRange: [0, 1],
          outputRange: ['red', 'yellow'],
        }),
      }}
    >
      Animated Text Color
    </Text>
  );
};
```

### Nesting

Nested text components will inherit properties from the outer `Text`.

```jsx live
<Text size={18} fontWeight="$core.font-weight.bold">
  Outside Text...
  <Text color="$core.color.brand.60">Inside Text</Text>
</Text>
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Text"
  rows={[
    {
      name: 'animated',
      type: 'boolean',
      description: 'Flag to enable component animation',
      default: 'false',
    },
    {
      name: 'children',
      type: 'string',
      description: 'The contents of the text component',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Set the color of the text',
    },
    {
      name: 'size',
      type: 'number | string',
      description: 'Set the size of the text',
    },
    {
      name: 'transform',
      type: 'string',
      description:
        'Reformat the text by changing whether letters are capitalized or not',
    },
    {
      name: 'fontWeight',
      type: 'string',
      description: 'Set the font weight of text',
    },
    {
      name: 'textAlign',
      type: '"left" | "center" | "right"',
      description: 'Specifies text alignment',
    },
    {
      name: 'fontFamily',
      type: 'string',
      description: 'Set the font family of text',
    },
  ]}
/>

<Docs.ClassesTable
  of="Text"
  rows={[
    {
      name: 'text-root',
      description: 'Text root element',
    },
  ]}
/>

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="Text" keys={['text']} />

</Tab>
</Tabs>

---
id: text-area
category: Forms
title: TextArea
description: Large input allows users to enter a large amount of text and data.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/branch/1Uml7LO8NTEWoBUAl4DTaG/Abyss-Mobile?type=design&node-id=18955-106021&t=DfyeirEdeaLCVZP9-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { TextArea } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'TextArea',
  inputs: [
    {
      prop: 'label',
      type: 'string',
    },
    {
      prop: 'hintText',
      type: 'string',
    },
    {
      prop: 'errorMessage',
      type: 'string',
    },
    {
      prop: 'isRequired',
      type: 'boolean',
    },
    {
      prop: 'isDisabled',
      type: 'boolean',
    },
    {
      prop: 'helpContent',
      type: 'string',
    },
  ]
}

() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <TextArea
        model="text-area-sandbox"
        label="Sandbox Label"
        hintText="Sandbox Hint Text"
        maxLength={500}
      />
    </FormProvider>
  );
};
```

## useForm (recommended)

Using the `useForm` hook with `FormProvider` sets state for the component.

```jsx live
() => {
  const form = useForm();

  const handleSubmit = (data) => {
    console.log('Submitted:', data);
  };

  return (
    <FormProvider state={form} onSubmit={handleSubmit}>
      <TextArea
        model="text-area-form"
        label="Form Label"
        hintText="Form Hint Text"
        maxLength={500}
      />
      <Button submit size="small" style={{ marginTop: 15 }}>
        Submit
      </Button>
    </FormProvider>
  );
};
```

## useState

Using the `useState` hook gets values from the component state.

```jsx live
() => {
  const [value, setValue] = useState('');

  const onSubmit = () => {
    console.log('Submitted:', value);
  };

  return (
    <React.Fragment>
      <TextArea
        label="TextArea useState"
        placeholder="State"
        value={value}
        onChangeText={setValue}
        maxLength={500}
      />
      <Layout.Space />
      <Button size="small" onPress={onSubmit}>
        Submit
      </Button>
    </React.Fragment>
  );
};
```

## Label

Use the `label` prop to display a label above the text area.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <TextArea model="text-area-label" label="Custom Label" maxLength={500} />
    </FormProvider>
  );
};
```

## Error Message

Use the `errorMessage` prop to display a custom error message below the text area.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <TextArea
        model="text-area-error"
        label="Input With Error"
        errorMessage="Error Message"
        maxLength={500}
      />
    </FormProvider>
  );
};
```

## Success Message

Use the `successMessage` prop to display a custom success message below the text area.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <TextArea
        model="text-area-success"
        label="Input With Success"
        successMessage="Success Message"
        maxLength={500}
      />
    </FormProvider>
  );
};
```

## Disabled

Set the `isDisabled` prop to `true` to disable the text area so users cannot enter a value.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <TextArea
        model="text-area-disabled"
        isDisabled={true}
        label="Disabled"
        maxLength={500}
      />
    </FormProvider>
  );
};
```

## MaxLength

Use the `maxLength` prop to set the maximum length of characters accepted as input.
The amount of characters remaining will appear in the bottom right.
The default value of `maxLength` is 500. Per accessibility requirements, the `hintText` prop should include the maximum number of characters a user can enter.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <TextArea
        model="text-area-max-length"
        label="Type Text"
        maxLength={200}
      />
    </FormProvider>
  );
};
```

## Help Content

Use the `helpContent` prop to display a help icon in the top right of the container, which will display the provided content in a modal screen when pressed.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <TextArea
        model="text-area-help"
        label="Help Content"
        hintText="Click the Help button"
        helpContent={
          <Text style={{ margin: 16 }}>
            This is some text used to explain something to the user, but is too
            long to be hint text.
          </Text>
        }
      />
    </FormProvider>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="TextArea"
  rows={[
    {
      name: 'value',
      type: 'string',
      description: 'Value of the text input',
      default: '',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description:
        'Flag to enable/disable the input. If true, the input will be disabled',
      default: 'false',
    },
    {
      name: 'label',
      type: 'string',
      description: 'Label for input field',
    },
    {
      name: 'hintText',
      type: 'string',
      description: 'Set the text displayed below label',
    },
    {
      name: 'isRequired',
      type: 'boolean',
      description: 'Flag to require text',
      default: 'false',
    },
    {
      name: 'errorMessage',
      type: 'string',
      description: 'Error message to be displayed below input field',
    },
    {
      name: 'successMessage',
      type: 'string',
      description: 'Success message to be displayed below input field',
    },
    {
      name: 'onChangeText',
      type: 'function',
      description:
        'Callback that is called when the text input text changes. Changed text is passed as a single string argument to the callback handler',
    },
    {
      name: 'onFocus',
      type: 'function',
      description: 'Callback fired every time the component is focused',
    },
    {
      name: 'onBlur',
      type: 'function',
      description: 'Callback fired every time the component is unfocused',
    },
    {
      name: 'maxLength',
      type: 'string',
      description: 'Set the maximum number of characters accepted as input',
      default: '500',
    },
    {
      name: 'helpContent',
      type: 'string | ReactNode',
      description:
        'When defined, displays a help icon that can be tapped to view the provided content in a modal screen',
    },
    {
      name: 'helpButtonAccessibilityLabel',
      type: 'string',
      description: 'Set the accessibility label for the help button',
    },
  ]}
/>

<Docs.ClassesTable
  of="TextArea"
  rows={[
    {
      name: 'text-area-root',
      description: 'Root element',
    },
    {
      name: 'text-area-header',
      description: 'Header element',
    },
    {
      name: 'text-area-help-button',
      description: 'Help button',
    },
    {
      name: 'text-area-label',
      description: 'Label element',
    },
    {
      name: 'text-area-hint-text',
      description: 'Input hint text',
    },
    {
      name: 'text-area-container',
      description: 'The container around the text area',
    },
    {
      name: 'text-area',
      description: 'Input container',
    },
    {
      name: 'text-area-clear-button',
      description: 'Clear button',
    },
    {
      name: 'text-area-clear-text',
      description: 'Clear text',
    },
    {
      name: 'text-area-remaining-count-text',
      description: 'Remaining count text',
    },
    {
      name: 'text-area-message',
      description: 'Message element',
    },
    {
      name: 'input-message-icon',
      description: 'Message icon',
    },
    {
      name: 'input-message-text',
      description: 'Message text',
    },
    {
      name: 'text-area-help-modal',
      description: 'Help modal',
    },
    {
      name: 'input-help-icon',
      description: 'Help icon element',
    },
    {
      name: 'input-help-modal-footer',
      description: 'Help modal footer',
    },
    {
      name: 'input-help-modal-close-button',
      description: 'Help modal close button',
    },
  ]}
/>

<Docs.TranslationTable
  of="TextArea"
  rows={[
    'help',
    'close',
    'error',
    'success',
    'TextArea.clear',
    'TextArea.charactersRemaining',
  ]}
/>

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable
  of="TextArea"
  keys={[
    'input-header',
    'input-container',
    'input-message',
    'input-field',
    'input-character-count',
  ]}
/>

</Tab>
</Tabs>

---
id: theme-provider
category: Providers
title: ThemeProvider
description: An Abyss component that passes the theme object down the component tree.
---

```jsx
import { ThemeProvider } from '@uhg-abyss/mobile';
```

# Theming

Abyss theming supports changing colors, spacing, box-shadows, font families, font sizes and many other properties. Themes let you apply a consistent tone to your app. It allows you to customize all design aspects of your project in order to meet the specific needs of your business or brand. To configure the theme, wrap your app with a `ThemeProvider` component.

## Theme Provider

While Abyss components come with a default theme, the `ThemeProvider` is an optional component to change the theme globally.

`ThemeProvider` relies on the context feature of React to pass the theme down to the components, so you need to make sure that `ThemeProvider` is a parent of the components you are trying to customize.

This component takes a theme prop and applies it to the entire React tree that it is wrapping around. It should preferably be used at the root of The component tree.

<Docs.PropsTable
  of="ThemeProvider"
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The component tree',
    },
    {
      name: 'theme',
      type: 'object | (prevTheme: object) => object',
      description:
        'A theme object, usually the result of createTheme(). Can also be a function that receives the previous theme and returns an updated theme.',
    },
    {
      name: 'system',
      type: "'ios' | 'android'",
      description: 'The system the theme should support',
    },
    {
      name: 'colorScheme',
      type: "'light' | 'dark'",
      description: 'The color scheme of the theme',
    },
    {
      name: 'brandAssetsCdn',
      type: 'string',
      description:
        'A URL to provide a custom CDN for hosting brand assets handled by the Brandmark and IconBrand components',
    },
  ]}
/>

```jsx
import { ThemeProvider, createTheme } from '@uhg-abyss/mobile';

import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';


const themeOverride = {
  theme: {
    colors: {
      primary1: '#002677',
      primary2: '#FFFFFF',

      secondary1: '#00BED5',
      secondary2: '#F5B700',
    },
    fonts: {...},
  },
};

const theme = createTheme('uhc', themeOverride);

const App = () => {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
};

AppRegistry.registerComponent(appName, () => App);
```

---
id: timeline
category: Data
title: Timeline
description: A timeline step displays a single event or action of the timeline tracker.
design: https://www.figma.com/design/34gRQMq2NxFgeRynjqd24C/Documentation-%7C-UHC-Abyss-Mobile-App?node-id=931-225262&t=iguCSwnU4rMOZ7Dn-0
sourceIsTS: true
---

<Tabs>

<Tab label="Overview">

```jsx
import { Timeline } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Timeline',
  inputs: [
    {
      prop: 'type',
      type: 'select',
      options: [
        { label: 'Combo', value: 'combo' },
        { label: 'Card', value: 'card' },
        { label: 'Progress', value: 'progress' },
      ],
      defaultValue: 'combo',
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'Default', value: 'default' },
        { label: 'Warning', value: 'warning' },
        { label: 'Error', value: 'error' },
        { label: 'Info', value: 'info' },
      ],
      defaultValue: 'default',
    },
    {
      prop: 'headingWeight',
      type: 'string',
      defaultValue: '$core.font-weight.regular',
    },
    {
      prop: 'currentStep',
      type: 'select',
      options: [
        { label: '0', value: 0},
        { label: '1', value: 1 },
        { label: '2', value: 2 },
        { label: '3', value: 3},
        { label: '4', value: 4},
        { label: '5', value: 5},
      ],
    },
  ]
}

<Timeline
  currentStep={1}
  paragraph="Paragraph text in the active step card"
>
  <Timeline.Step
    heading="Application Received and Processing"
    date={new Date(2024, 6, 17)}
    paragraph="Paragraph would go here"
  />
  <Timeline.Step
    heading="CMS Determination"
    date={new Date(2024, 6, 19)}
    paragraph="Paragraph would go here"
  />
  <Timeline.Step
    heading="Determination Outcome"
  />
  <Timeline.Step heading="UCard Shipped" />
  <Timeline.Step
    heading="Plan coverage begins"
    date={new Date(2025, 1, 1)}
    paragraph="Paragraph would go here"
    content={
      <Button size="small" variant="secondary">
        Button
      </Button>
    }
  />
</Timeline>
```

## Timeline Props & Usage

The `currentStep` prop is used to define the active timeline step. `currentStep` is required. To get the fully complete state for the timeline,
`currentStep` should be set to be greater than the total number of steps.
For example, if there are 3 steps, `currentStep` should be set to 4 to show the timeline as fully complete.

`variant` is used to select the step variant, The options are `default`, `warning`, `error`, and `info`.

Use the `type` prop to select what timeline type is most appropriate for you. The default `type` is `combo`.

- `combo` displays the active step card with the steps contained in a card directly below.
- `card` wraps the steps within a card. `card` does **NOT** contain the active step card.
- `progress` displays only the timeline steps without any wrapper.

`headingWeight` is used to modify the heading's fontWeight of every **non-active** step.

Use `content` to add custom components inside of the active step card.

Use `button` to add a button to the active step card.

## Timeline.Step Props & Usage

`Timeline.Step` is used to display an individual step, each step has access to the props below providing the ability to manipulate the data displayed. `Timeline.Step` must be a direct child of `Timeline`.

`isDisabled` will disable the step. When a step is disabled, it can still be accessed by `Timeline` via `currentStep`. A disabled step will not animate when active/complete.

`heading` defines the step's Heading.

`date` defines the date value displayed below `heading`, if a Date object is passed into `date` it will be formatted `MM/DD/YYYY`.

Use `paragraph` to add a paragraph below `date`.

`content` is used to add custom components to the bottom of the step.

```jsx live
() => {
  const [activeStep, setActiveStep] = useState(1);
  const [value, setValue] = useState(false);

  return (
    <Timeline
      currentStep={activeStep}
      content={
        <SegmentedControls value={activeStep} onChange={setActiveStep}>
          <SegmentedControls.Tab label="Step 1" value={1} />
          <SegmentedControls.Tab label="Step 2" value={2} />
          <SegmentedControls.Tab label="Step 3" value={3} />
          <SegmentedControls.Tab label="Step 4" value={4} />
          <SegmentedControls.Tab label="Step 5" value={5} />
        </SegmentedControls>
      }
      footer={
        <Cell
          heading="Notify me about plan status"
          type="toggle"
          value={value}
          onChange={setValue}
        />
      }
    >
      <Timeline.Step
        heading="Heading text"
        date={new Date()}
        paragraph="Paragraph Text"
      />
      <Timeline.Step heading="Heading text" date={new Date()} />
      <Timeline.Step heading="Heading text" paragraph="Paragraph Text" />
      <Timeline.Step
        heading="Heading text"
        date="05/21/2023"
        paragraph="Paragraph Text"
      />
      <Timeline.Step
        heading="Heading text"
        paragraph="Paragraph Text"
        date={new Date()}
        content={
          <Button variant="secondary" size="small">
            Button
          </Button>
        }
      />
    </Timeline>
  );
};
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Timeline"
  rows={[
    {
      name: 'button',
      type: 'node',
      description:
        "Button lives inside the top card of type 'combo'. The button is placed at the bottom of the card below 'content'",
    },
    {
      name: 'children',
      type: 'node',
      description: 'Timeline steps',
    },
    {
      name: 'content',
      type: 'node',
      description:
        "Content lives inside the top card of type 'combo'. The content is placed at the bottom of the card above 'button'",
    },
    {
      name: 'currentStep',
      type: 'number',
      description: 'The active timeline step',
    },
    {
      name: 'paragraph',
      type: 'string',
      description: 'Custom description placed inside the active step card',
    },
    {
      name: 'footer',
      type: 'node',
      description: 'content placed at the bottom of the timeline',
    },
    {
      name: 'headingWeight',
      type: 'string | number',
      description: 'Defines the heading weight of all inactive timeline steps',
      default: '$core.font-weight.regular',
    },
    {
      name: 'type',
      type: "'combo' | 'card' | 'progress'",
      description:
        'Defines the layout type of the timeline (combo, card, or progress)',
      default: 'combo',
    },
    {
      name: 'variant',
      type: "'default' | 'warning' | 'error' | 'info'",
      description: 'Defines the color palette of timeline',
      default: 'default',
    },
  ]}
/>

<Docs.PropsTable
  of="Timeline.Step"
  rows={[
    {
      name: 'content',
      type: 'node',
      description:
        'Customizable content that is displayed at the bottom of the step',
    },
    {
      name: 'date',
      type: 'string | Date',
      description: 'The date displayed under title and above paragraph',
    },
    {
      name: 'heading',
      type: 'string',
      description: 'The step heading, a heading is required for every step',
    },
    {
      name: 'paragraph',
      type: 'string',
      description: 'Text displayed below step',
    },
  ]}
/>

<Docs.ClassesTable
  of="Timeline"
  rows={[
    {
      name: 'timeline-root',
      description: 'Timeline root element',
    },
    {
      name: 'timeline-combo-card',
      description: 'Timeline active step card root',
    },
    {
      name: 'timeline-combo-card-heading',
      description: 'Timeline active step card heading',
    },
    {
      name: 'timeline-combo-card-paragraph',
      description: 'Timeline active step card paragraph',
    },
    {
      name: 'timeline-combo-card-content',
      description: 'Timeline active step card content',
    },
    {
      name: 'timeline-combo-card-button-wrapper',
      description: 'Timeline active step card button wrapper',
    },
    {
      name: 'timeline-card',
      description: 'Timeline card root',
    },
    {
      name: 'timeline-card-heading',
      description: 'Timeline card heading',
    },
    {
      name: 'timeline-step-wrapper',
      description: 'Timeline step wrapper',
    },
  ]}
/>

<Docs.ClassesTable
  of="Timeline.Step"
  rows={[
    {
      name: 'timeline-step-root',
      description: 'Timeline step root element',
    },
    {
      name: 'timeline-step-status-indicator',
      description: 'Timeline step status indicator',
    },
    {
      name: 'timeline-step-solid-track',
      description: 'Timeline step solid track',
    },
    {
      name: 'timeline-step-dashed-track',
      description: 'Timeline step dashed track',
    },
    {
      name: 'timeline-step-content',
      description: 'Timeline step content',
    },
    {
      name: 'timeline-step-heading',
      description: 'Timeline step heading',
    },
    {
      name: 'timeline-step-date-status',
      description: 'Timeline step date status',
    },
    {
      name: 'timeline-step-paragraph',
      description: 'Timeline step paragraph',
    },
  ]}
/>

<Docs.TranslationTable
  of="Timeline"
  rows={[
    'disabled',
    'Timeline.history',
    'Timeline.currentStep',
    'Timeline.step',
    'Timeline.active',
    'Timeline.incomplete',
    'Timeline.complete',
  ]}
/>

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="Timeline" keys={['timeline']} />

</Tab>

<Tab label="Migration">

<Docs.ComparisonTable of="Timeline" type="class" />

<Docs.ComparisonTable of="Timeline.Step" type="class" />

<Docs.ComparisonTable of="Timeline" type="props" />

<Docs.ComparisonTable of="Timeline.Step" type="props" />

</Tab>
</Tabs>

---
id: toast
category: Feedback
title: Toast
description: Feedback on the result of an operation that disappears without user action.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=9982%3A35190&t=g1imyz1B5bFHjcvc-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { Toast } from '@uhg-abyss/mobile';
```

```jsx sandbox
  {
    component: 'Toast',
    inputs: [
      {
        prop: 'variant',
        type: 'select',
        options: [
          { label: 'success', value: 'success'},
          { label: 'warning', value: 'warning'},
          { label: 'error', value: 'error'},
          { label: "info", value: 'info'},
        ]
      },
      {
        prop: 'paragraph',
        type: 'string',
      },
      {
        prop: 'href',
        type: 'string',
      },
      {
        prop: 'linkText',
        type: 'string',
      },
      {
        prop: 'heading',
        type: 'string',
      },
      {
        prop: 'underlineLink',
        type: 'boolean',
      },
      {
        prop: 'isClosable',
        type: 'boolean',
      },
    ],
  }
  <Toast href="https://www.google.com" linkText="Google" paragraph="Link to Google" />
```

## Variant

Use the `variant` property to set the color of the `Toast`.
The options are `success`, `warning`, `error`, and `info`. The default is `success`.

```jsx live
<Layout.Stack grow>
  <Toast variant="info" paragraph="You can only compare up to 4 providers" />
  <Toast variant="success" paragraph="Your estimate has been saved!" />
  <Toast variant="warning" paragraph="Be careful what you wish for!" />
  <Toast variant="error" paragraph="Your estimate did not save!" />
</Layout.Stack>
```

## Icons

Use the `icon` prop to pass in a specific Icon component. The expected size for the icon is 18px to stay consistent with the height of the text within the Toast. Find further guidance on icons symbols in the [Icons Symbols Tab](/mobile/ui/icon-symbol/).

```jsx live
<Layout.Stack grow>
  <Toast
    icon={
      <IconSymbol
        icon="favorite"
        size={18}
        color="$semantic.color.icon.content.primary-alt"
      />
    }
    paragraph="filled white favorite"
  />
  <Toast
    variant="info"
    paragraph="outlined warning"
    icon={
      <IconSymbol
        color="$semantic.color.icon.content.primary-alt"
        variant="outlined"
        icon="warning"
        size={18}
      />
    }
  />
  <Toast
    variant="error"
    paragraph="outlined local_activity"
    icon={
      <IconSymbol
        variant="outlined"
        icon="local_activity"
        size={18}
        color="$semantic.color.icon.content.primary-alt"
      />
    }
  />
</Layout.Stack>
```

## Heading

Use the `heading` prop to add text above the description. This is optional and should only be used to summarize the paragraph if needed.

```jsx live
<Toast
  variant="info"
  heading={'Informational Heading'}
  paragraph="Description text goes here"
/>
```

## Paragraph

Change the paragraph of the Toast to set the text.

```jsx live
<Toast variant="success" paragraph="Your estimate has been saved!" />
```

## onPress

Use the `onPress` function to handle the action when the link within the Toast is pressed.

```jsx live
<Toast
  variant="warning"
  onPress={() => {
    console.log('Link Pressed');
  }}
  href="https://www.github.com"
  linkText="Make A Wish"
  paragraph="You can only compare up to 4 providers"
/>
```

## Link Text

Change the `linkText` prop to set the text.

Use the `underlineLink` prop to underline the linkText.

```jsx live
<Layout.Stack grow>
  <Toast
    variant="success"
    href="https://www.github.com"
    linkText="Undo Change"
    paragraph="Your estimate has been saved!"
  />
  <Toast
    variant="warning"
    linkText="Make A Wish"
    underlineLink
    onPress={() => console.log('Link pressed')}
    paragraph="Be careful what you wish for!"
  />
</Layout.Stack>
```

## Dismissible Toast

Use the `isClosable` prop to create a dismissible toast. The toast will remain on the screen until a user presses the close button or the set duration time has expired. Accessibility requires a toast that has a link to be dismissible, this cannot be changed.

```jsx live
<Layout.Stack grow>
  <Toast
    variant="success"
    href="https://www.github.com"
    linkText="Undo Change"
    paragraph="Your estimate has been saved!"
  />
  <Toast variant="error" isClosable paragraph="Your estimate did not save!" />
</Layout.Stack>
```

## Toast Functions

### Toast.show()

```ts
Toast.show(options: ShowToastOptions): string
```

The Toast will appear at the top of the screen for a default duration of 7 seconds per accessibility. It is recommended to increase the duration if more content is placed within the toast. A toast with a heading and description, or a link, should account for the time a user may need to interact with the toast. To use Toast.show(), import the ToastProvider.

```jsx
import { ToastProvider } from '@uhg-abyss/mobile';
```

- <b>duration</b> - Sets the time before the toast disappears.
- <b>placement</b> - Determines the placement of the toast.
- <b>offset</b> - Offset space for both the top and bottom of the toast.
- <b>onPress</b> - Callback fired when the link is pressed.
- <b>onClose</b> - Callback fired when the toast disappears.
- <b>href</b> - Sets the URL of the link.
- <b>icon</b> - Adds an icon to the Toast component.
- <b>linkText</b> - Sets the text of the link.
- <b>heading</b> - Sets the heading of the toast.
- <b>paragraph</b> - Sets the text of the Toast Message.
- <b>variant</b> - Sets the color of the toast.
- <b>animationDuration</b> - Sets the transition time of the toast.
- <b>underlineLink</b> - Sets the heading of the toast.
- <b>isClosable</b> - Adds close icon to close the toast. The toast will not disappear
  until the close icon is pressed.

In addition, Toast.show() also accepts the same props as the Toast component.

### Toast.update()

```ts
Toast.update(id: string, options: ShowToastOptions): void
```

The function updates the already shown toast by passing in the unique id of the respective toast and the parameters to update.

### Toast.hide()

```ts
Toast.hide(id: string): void
```

The function hides the toast by specifying a unique id that is returned by Toast.show().

### Toast.hideAll()

```ts
Toast.hideAll(): void
```

The function hides all toasts rendered on the screen.

```jsx live
const StyledButton = styled(Button, {
  marginBottom: 10,
});

const delay = (ms) => {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
};

const Screen = () => {
  const showToast = () => {
    Toast.show({
      paragraph: 'Your estimate has been saved!',
      onClose: () => console.log('Closed'),
      placement: 'top',
      variant: 'success',
    });
  };

  const showClosableToast = () => {
    Toast.show({
      paragraph: 'Your estimate did not save!',
      onClose: () => console.log('Closed'),
      variant: 'error',
      isClosable: true,
    });
  };

  const showUpdatableToast = () => {
    const toastId = Toast.show({
      paragraph: 'You can only compare up to 4 providers',
      heading: 'Changes not saved',
      variant: 'error',
      placement: 'top',
      onClose: () => {
        return console.log('Closed');
      },
      isClosable: false,
    });
    delay(3000).then(() => {
      Toast.update(toastId, {
        paragraph: 'You picked one of our providers. Great choice!',
        variant: 'success',
        isClosable: true,
        heading: 'Changes Saved',
      });
    });
  };
  const showHidableToast = () => {
    const toastId = Toast.show({
      paragraph: 'You can only compare up to 5 providers',
      heading: 'Changes not saved',
      variant: 'warning',
      placement: 'top',
      onClose: () => {
        return console.log('Closed');
      },
      isClosable: true,
    });
    delay(3000).then(() => {
      Toast.hide(toastId);
    });
  };

  return (
    <Layout.Group wrap alignLayout="center">
      <StyledButton onPress={showToast}>Show Toast</StyledButton>
      <StyledButton onPress={showClosableToast}>
        Show Closable Toast
      </StyledButton>
      <StyledButton onPress={showUpdatableToast}>
        Show & Updatable Toast
      </StyledButton>
      <StyledButton onPress={showHidableToast}>Show & Hide Toast</StyledButton>
      <StyledButton onPress={Toast.hideAll}>Hide all Toasts</StyledButton>
    </Layout.Group>
  );
};

render(() => {
  return (
    <ToastProvider>
      <Screen />
    </ToastProvider>
  );
});
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Toast"
  rows={[
    {
      name: 'icon',
      type: 'node',
      description: 'Adds an icon to the Toast component',
    },
    {
      name: 'paragraph',
      type: 'string',
      description: 'The text to be displayed within the Toast component',
    },
    {
      name: 'heading',
      type: 'string',
      description: 'The text to be displayed above the main content',
    },
    {
      name: 'linkText',
      type: 'string',
      description: 'Set the text of the link',
    },
    {
      name: 'variant',
      type: '"success" | "warning" | "error" | "info"',
      description: 'Set the color of the toast',
      default: 'success',
    },
    {
      name: 'href',
      type: 'string',
      description: 'Set the URL of the link',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Callback fired when the button is pressed',
    },
    {
      name: 'underlineLink',
      type: 'boolean',
      description: 'Adds underline to link text',
      default: 'false',
    },
    {
      name: 'isClosable',
      type: 'boolean',
      description: 'Creates a toast dismissible by close button only',
      default: 'false',
    },
  ]}
/>

<Docs.ClassesTable
  of="Toast"
  rows={[
    {
      name: 'toast-root',
      description: 'Toast root element',
    },
    {
      name: 'toast-content-container',
      description: 'Toast element',
    },
    {
      name: 'toast-content-wrapper',
      description: 'Toast outer element',
    },
    {
      name: 'toast-icon',
      description: 'Toast icon element',
    },
    {
      name: 'toast-paragraph-container',
      description: 'Toast paragraph container',
    },
    {
      name: 'toast-paragraph',
      description: 'Toast paragraph element',
    },
    {
      name: 'toast-heading',
      description: 'Toast heading element',
    },
    {
      name: 'toast-link',
      description: 'Toast link',
    },
    {
      name: 'toast-close-button',
      description: 'Close button',
    },
    {
      name: 'toast-close-icon',
      description: 'Close icon',
    },
  ]}
  inherits={[{ name: 'Link', link: '/mobile/ui/link' }]}
/>

<Docs.TranslationTable of="Toast" rows={['close']} />

<Docs.TranslationTable of="ToastProvider" rows={['alert']} />

</Tab>

<Tab label="Accessibility">

## Focus Guidance for Dismissable Toasts

Abyss does not control the focus of components on the screen when a dismissable Toast is closed. To meet
accessibility guidelines, the focus must be set to the previous node when closed. The [useSetFocus](/mobile/hooks/use-set-focus) hook can be used for this.

For example, if a button is pressed that triggers a Toast, focus must return to that button once it is closed, so that a screen reader or keyboard user may continue using the app where they left off.

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="Toast" keys={['toast']} />

</Tab>
</Tabs>

---
id: toggle-switch
category: Forms
title: ToggleSwitch
description: Used to switch between 2 modes.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=9549-32657&mode=design&t=7hfDPwhG2zrhoDjN-0
---

<Tabs>

<Tab label="Overview">

```jsx
import { ToggleSwitch } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'ToggleSwitch',
  inputs: [
    {
      prop: 'isDisabled',
      type: 'boolean',
    },
    {
      prop: 'showAccessibilityIcon',
      type: 'boolean',
    },
  ]
}

() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <ToggleSwitch model="toggle-switch-sandbox" />
    </FormProvider>
  );
};
```

## Usage

The toggle switch adapts its style based on the operating system. Use the system dropdown at the top right of the screen to update.

## useForm (recommended)

Using the `useForm` hook with `FormProvider` sets state for the component.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      'toggle-switch-form': true,
    },
  });

  const handleSubmit = (data) => {
    console.log('Submitted:', data);
  };

  return (
    <FormProvider state={form} onSubmit={handleSubmit}>
      <ToggleSwitch model="toggle-switch-form" />
    </FormProvider>
  );
};
```

## useState

Using the `useState` hook gets values from the component state.

```jsx live
() => {
  const [example1, toggleExample1] = useState(true);

  return <ToggleSwitch isChecked={example1} onChange={toggleExample1} />;
};
```

## isDisabled

The `isDisabled` prop when set to true will cause the ToggleSwitch to be rendered in a disabled state, preventing user interaction and providing visual feedback that the component cannot be toggled.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      'toggle-switch-disabled-one': true,
      'toggle-switch-disabled-two': false,
    },
  });

  return (
    <FormProvider state={form}>
      <ToggleSwitch model="toggle-switch-disabled-one" isDisabled />
      <Layout.Space />
      <ToggleSwitch model="toggle-switch-disabled-two" isDisabled />
    </FormProvider>
  );
};
```

## showAccessibilityIcon

The `showAccessibilityIcon` prop when set to true will cause the ToggleSwitch to be rendered with the accessibility icon.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      'toggle-switch-accessibility-one': true,
      'toggle-switch-accessibility-two': true,
      'toggle-switch-accessibility-three': false,
    },
  });

  return (
    <FormProvider state={form}>
      <ToggleSwitch
        model="toggle-switch-accessibility-two"
        showAccessibilityIcon
      />
      <Layout.Space />
      <ToggleSwitch
        model="toggle-switch-accessibility-one"
        isDisabled
        showAccessibilityIcon
      />
      <Layout.Space />
      <ToggleSwitch
        model="toggle-switch-accessibility-three"
        isDisabled
        showAccessibilityIcon
      />
    </FormProvider>
  );
};
```

</Tab>
<Tab label="Integration">

<Docs.PropsTable
  of="ToggleSwitch"
  rows={[
    {
      name: 'isChecked',
      type: 'boolean',
      description: 'Sets toggle status',
      default: 'false',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description: 'Flag to disable ToggleSwitch',
      default: 'false',
    },
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired when the value changes',
    },
    {
      name: 'showAccessibilityIcon',
      type: 'boolean',
      description: 'Flag to show the accessibility icon',
      default: 'false',
    },
  ]}
/>

<Docs.ClassesTable
  of="ToggleSwitch"
  rows={[
    {
      name: 'toggle-switch-root',
      description: 'ToggleSwitch root element',
    },
    {
      name: 'toggle-switch-circle',
      description: 'ToggleSwitch Thumb element',
    },
  ]}
/>

</Tab>

<Tab label="Accessibility">

## Dynamic Type

ToggleSwitch scales up to 3XL.

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="ToggleSwitch" keys={['toggle-switch']} />

</Tab>
</Tabs>

---
id: translate
category: I18n
title: Translate
description: Used to get the translated string from the i18n object.
---

<Tabs>

<Tab label="Overview">

## Usage

```jsx
import { Translate } from '@uhg-abyss/mobile/ui/Translate';
```

## Usage

The `Translate` component can use a function as a child which passes an object with the `t` and `i18n` properties. The `t` property is a function that is used to get the translated string from the i18n object.
The `i18n` property is the i18n object.

The `t` function takes two arguments.

```jsx
t(key: string, replacements?: object): string
```

The `key` argument corresponds to the key in the i18n object. The `replacements` argument is an object that contains the values to replace in the translated string.

## Example

Let's use an example to illustrate how to use the `Translate` component. In the [TextArea](/mobile/ui/text-area) component, we have a text block that displays the remaining characters available
to be typed in the text area. We can get that value with the key `TextArea.charactersRemaining`.

```jsx live-expanded
<Translate>
  {({ t }) => <Text>{t('TextArea.charactersRemaining')}</Text>}
</Translate>
```

If we want to replace the value of the remaining characters, we can pass in the `replacements` object with the key `count`.
Replacement values should always appear in double curly braces, (e.g. `{{count}}`).

```jsx live-expanded
<Translate>
  {({ t }) => <Text>{t('TextArea.charactersRemaining', { count: 10 })}</Text>}
</Translate>
```

We can also use the component to get the translated string from the i18n object.

```jsx live-expanded
<Translate>
  {({ i18n }) => <Text>{i18n.TextArea.charactersRemaining}</Text>}
</Translate>
```

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="Translate"
  rows={[
    {
      name: 'children',
      type: 'React.ReactNode | () => React.ReactNode',
      description: '',
    },
  ]}
/>

</Tab>
</Tabs>

---
id: video-player
category: Media
title: VideoPlayer
description: A component that provides playback of video.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=47768%3A3163&mode=dev
---

<Tabs>

<Tab label="Overview">

```jsx
import { VideoPlayer } from '@uhg-abyss/mobile/ui/VideoPlayer';
```

## Setup

VideoPlayer requires `react-native-video` to be install as a dependency. To start, follow the `react-native-video` [installation directions](https://docs.thewidlarzgroup.com/react-native-video/docs/v6/installation).

## Basic usage

`VideoPlayer` can be used with a single `source` prop. In this configuration it will use the native controls in `iOS`, and abyss specific controls for `Android`.

`VideoPlayer` is built around `react-native-video`, and thus has the ability to consume [any prop available](https://docs.thewidlarzgroup.com/react-native-video/docs/v6/component/props) in `react-native-video` except `fullscreen`.

```jsx
<VideoPlayer source={video} />
```

```jsx render
<Tabs title="Tabs Sandbox">
  <Tabs.Tab label="IOS" value="ios">
    <img
      src="/mobile/videoPlayer/basicUsageIOS.gif"
      alt="VideoPlayer IOS Basic usage"
      role="presentation"
    />
  </Tabs.Tab>
  <Tabs.Tab label="Android" value="android">
    <img
      src="/mobile/videoPlayer/basicUsageAndroid.gif"
      alt="VideoPlayer Android Basic usage"
      role="presentation"
    />
  </Tabs.Tab>
</Tabs>
```

## Customization

You can use the `thumbnail` prop to display a custom thumbnail before the video is started.

```jsx
<VideoPlayer
  source={video}
  thumbnail={
    <Brandmark size={300} affiliate="uhc" variant="lockup" color="blue" />
  }
/>
```

<img
  src="/mobile/videoPlayer/customThumbnail.png"
  alt="VideoPlayer custom thumbnail"
  role="presentation"
/>

## Subtitles/CC

Be sure to add closed captions to your video via the `textTrack` prop.

Closed Captions are required for accessibility. You can provide multiple text tracks, and select the default one using the `selectedTextTrack` prop.

```jsx
<VideoPlayer
  source={TestVid}
  videoTitle="Test Video"
  selectedTextTrack={{ type: 'index', value: 0 }}
  textTracks={[
    {
      title: 'english',
      language: 'en',
      uri: 'https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt',
    },
  ]}
/>
```

## Accessibility

- Closed Captions is required for all videos.
- Be sure to provide an `videoTitle` prop to the `VideoPlayer` component. This will be used as the A11y title for the video.
- It is recommended to provide a text transcript on the same page as the video player.

</Tab>

<Tab label="Integration">

<Docs.PropsTable
  of="VideoPlayer"
  rows={[
    {
      name: 'source',
      type: 'uri',
      description: 'The video source',
    },
    {
      name: 'videoTitle',
      type: 'string',
      description: 'The A11y title for the video',
    },
    {
      name: 'thumbnail',
      type: 'node',
      description:
        'Override that will place a custom video thumbnail over the video',
    },
    {
      name: 'onEnd',
      type: 'function',
      description: 'Callback ran on video end',
    },
    {
      name: 'onLoad',
      type: 'function',
      description: 'Callback ran on video load',
    },
  ]}
/>

<Docs.ClassesTable
  of="VideoPlayer"
  rows={[
    {
      name: 'video-player-root',
      description: 'VideoPlayer root',
    },
    {
      name: 'video-player-full-screen-wrapper',
      description:
        'Wrapper for the full screen modal (Modal for android | View for iOS)',
    },
    {
      name: 'video-player-wrapper',
      description: 'Fullscreen wrapper for the video component',
    },
    {
      name: 'video-player-video',
      description: 'Video component',
    },
    {
      name: 'video-player-thumbnail-wrapper',
      description: 'VideoPlayer thumbnail wrapper',
    },
    {
      name: 'video-player-thumbnail-overlay',
      description: 'VideoPlayer thumbnail overlay',
    },
    {
      name: 'video-player-thumbnail-play-button',
      description: 'VideoPlayer thumbnail play/pause button',
    },
    {
      name: 'video-player-thumbnail-duration-text',
      description: 'VideoPlayer thumbnail duration text',
    },
    {
      name: 'video-player-thumbnail-custom-wrapper',
      description: 'VideoPlayer custom thumbnail wrapper',
    },
    {
      name: 'video-player-duration-wrapper',
      description: 'VideoPlayer duration text wrapper',
    },
    {
      name: 'video-player-duration-text',
      description: 'VideoPlayer duration text',
    },
    {
      name: 'video-player-play-button',
      description: 'VideoPlayer Play button',
    },
    {
      name: 'video-player-play-button-icon',
      description: 'VideoPlayer Play button icon',
    },
    {
      name: 'video-player-android-controls-overlay',
      description: 'VideoPlayer android controls overlay',
    },
    {
      name: 'video-player-android-controls-close-button',
      description: 'VideoPlayer android controls close button',
    },
    {
      name: 'video-player-android-controls-close-button-icon',
      description: 'VideoPlayer android controls close button icon',
    },
    {
      name: 'video-player-android-controls-center-wrapper',
      description:
        'VideoPlayer android controls center wrapper (skip & play/pause buttons)',
    },
    {
      name: 'video-player-android-controls-back-button',
      description: 'VideoPlayer android controls skip back button',
    },
    {
      name: 'video-player-android-controls-back-button-icon',
      description: 'VideoPlayer android controls skip back button icon',
    },
    {
      name: 'video-player-android-controls-pause-button',
      description: 'VideoPlayer android controls play/pause button',
    },
    {
      name: 'video-player-android-controls-pause-button-icon',
      description: 'VideoPlayer android controls play/pause button icon',
    },
    {
      name: 'video-player-android-controls-forward-button',
      description: 'VideoPlayer android controls skip forward button',
    },
    {
      name: 'video-player-android-controls-forward-button-icon',
      description: 'VideoPlayer android controls skip forward button',
    },
    {
      name: 'video-player-android-controls-bottom-wrapper',
      description:
        'VideoPlayer android controls bottom wrapper (time slider, CC, fullscreen & duration)',
    },
    {
      name: 'video-player-android-controls-time-wrapper',
      description: 'VideoPlayer android controls duration time wrapper',
    },
    {
      name: 'video-player-android-controls-duration-current-text',
      description: 'VideoPlayer android controls current time text',
    },
    {
      name: 'video-player-android-controls-duration-remaining-text',
      description: 'VideoPlayer android controls duration left time wrapper',
    },
    {
      name: 'video-player-android-controls-slider-background',
      description: 'VideoPlayer android controls slider background',
    },
    {
      name: 'video-player-android-controls-slider-foreground',
      description: 'VideoPlayer android controls slider foreground',
    },
    {
      name: 'video-player-android-controls-slider-thumb',
      description: 'VideoPlayer android controls slider thumb',
    },
    {
      name: 'video-player-android-controls-subtitle-button',
      description: 'VideoPlayer android controls subtitle button',
    },
    {
      name: 'video-player-android-controls-subtitle-button-icon',
      description: 'VideoPlayer android controls subtitle button icon',
    },
    {
      name: 'video-player-android-controls-full-screen-button',
      description: 'VideoPlayer android controls full screen button',
    },
    {
      name: 'video-player-android-controls-full-screen-button-icon',
      description: 'VideoPlayer android controls full screen button icon',
    },
  ]}
/>

</Tab>

<Tab label="Tokens">

<Docs.ComponentTokensTable of="'VideoPlayer'" keys={['video-player']} />

</Tab>
</Tabs>

---
id: overview
category: White Labeling
title: Overview
hideHeaderActions: true
---

## White Labeling with Abyss

Abyss is comprised of a group of designers, accessibility experts, engineers, and QE who work together to build design kits, component libraries, and documentation sites that are packed with prebuilt, reusable or global assets that align with our enterprise branding and accessibility standards to ensure quality, drive consistency, and help teams reduce redundancies in design and code, forging seamless collaboration across product portfolios.

Abyss helps teams create exceptional digital solutions and user journeys, enhancing user experience while driving familiarity for our end users across different platforms. Teams can feel confident using Abyss, leveraging our components and assets, knowing they don’t have to do design or accessibility checks to ensure compliance.

In addition to reusability, we also offer flexibility for customization, ensuring products remain streamlined and effortlessly maintainable through the combination of leveraging what’s available in Abyss and allowing teams to focus more of their time on specific user cases or product needs. This includes white labeling, which allows for design and engineering teams to take any of the reusable components, or building blocks, and apply their own styling and themes, rather than leveraging enterprise brand themes for UHC or Optum.

### The Goal

The Abyss brand aims to empower white label consuming teams to apply their own themes to the design system, ensuring flexibility for both development and design teams to fully own and manage their tokens. This approach reduces dependency on the core design team for updates while preserving a unified system structure, allowing teams to maintain consistency and efficiency in their digital solutions.

## Glossary

**White Labeling** - The process of adapting a framework to support a specific brand or multiple brands not supported by Abyss, while allowing for customization.

**Tokens Studio for Figma** - Token Studio is the backbone of the abyss tokening strategy. It's a centralized place to create, manage, and export tokens to both Figma variables and as a dev-consumable JSON file. Read more on [Tokens Studio here](https://tokens.studio/).

**Tokens** - Tokens are key-value pairs consisting of the Token Name and value. These represent fundamental design decisions as abstract, reusable data. They allow for easy adaptation and customization of the Abyss Design System while maintaining consistency for any brand or style.
Abyss currently supports tokens for: color, spacing, sizing, border radius, border width, and opacity.

- `[Token Key]: [Token Value]`

**Theme** - A set of tokens that define a brand.

**Base Theme** - A theme whose tokens are managed, published and versioned by Abyss, such as `Optum` and `UHC`.

**White-Labeled Theme** - A customized theme whose tokens are managed, published, and versioned by an Abyss consumer for the brands they maintain.

## Tokens

To effectively leverage white labeling with Abyss, it's important to understand how tokens function within the design system. Teams looking to white label can use the Abyss token formula and variable map, applying their own values to achieve the desired theming and styling. This standardized token formula ensures consistent application of styles across experiences. Its reusability not only streamlines the process but also provides significant time savings and efficiencies for teams building and maintaining digital experiences.

### What are Tokens?

Tokens are even smaller building blocks (or sub-atoms) of the design system, used in place of hardcoded values and built in alignment with various standards that allow teams to maintain scalability and consistency. Each token category has its own structure based on defined rules and guidelines, representing design decisions that set the standard for the design system. When creating new or enhanced designs, use tokens to create a cohesive UI that follows established standards and patterns.

For a deeper dive into using tokens, visit our [Tokens](/mobile/brand/uhc/tokens) documentation.

---
id: introduction
category: Developer Guide
title: Introduction
description: Implementing a White Label Theme
hideHeaderActions: true
---

## Prepare

### Token Syncing

- Familiarize yourself with [Token Syncing in Tokens Studio](https://docs.tokens.studio/token-storage-and-sync/sync-provider-overview). This is an optional step that would allow you to skip importing the token JSON file manually

## 1. Combine Tokens

Use the `flattenTokens` function to flatten and combine the imported tokens from the JSON file into a single object consumable by [createTheme](/mobile/tools/create-theme). This function supports a layered system where tokens from different themes can override core, semantic, and component-level tokens. Check out the [flattenTokens](/mobile/tools/flatten-tokens) documentation for an in-depth look at the function.

_Note that this approach assumes the token files are exported from Figma Token Studio._

```typescript
import { flattenTokens } from '@uhg-abyss/mobile';
import core_01 from '../01_core.json';
import semantic_02 from '../02_semantic.json';
import brand_03 from '../03_brand.json';

const brandTheme = flattenTokens(core_01, semantic_02, brand_03);
```

For maintaining multiple brands, refer to the [multi-brand](/mobile/white-labeling/developer-guide/multi-brand-implementation) tutorial.

## 2. Create Theme Object

Use the [createTheme](/mobile/tools/create-theme) function to create a theme object from the flattened tokens. This theme object will be used to apply the white label theme to your application. The `createTheme` function takes two arguments: the name of the base theme (`"uhc"` or `"optum"`) and an optional object for any overrides you wish to apply, such as your white-labeled theme.

```typescript
import { createTheme } from '@uhg-abyss/mobile';

const theme = createTheme('optum', brandTheme);
```

## 3. Implement New Theme

Wrap your application with the [ThemeProvider](/mobile/ui/theme-provider) and pass in the created theme object. This ensures that the theme is applied globally to all components within your application.

```typescript
import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';
import { ThemeProvider, createTheme, flattenTokens } from '@uhg-abyss/mobile';
import core_01 from '../01_core.json';
import semantic_02 from '../semantic_02.json';
import brand_03 from '../03_brand.json';

const brandTheme = flattenTokens(core_01, semantic_02, brand_03);
const theme = createTheme('optum', brandTheme);

const App = () => (
  <ThemeProvider theme={theme}>
    {/* Your application components */}
  </ThemeProvider>
);

AppRegistry.registerComponent(appName, () => App);
```

---
id: multi-brand-implementation
category: Developer Guide
title: Multi-Brand Themes
description: White Labeling for Multiple Brands
hideHeaderActions: true
---

## 1. Combine Brand Tokens

Use the `flattenTokens` function to combine the tokens from the JSON files into a single object for each different brand. This function supports a layered system where tokens from different themes can override core, semantic, and component level tokens. Check out the [flattenTokens](/mobile/tools/flatten-tokens) documentation for an in-depth look at the function.

```typescript
import { flattenTokens } from '@uhg-abyss/mobile';
import brand_A from '..tokens/brand_A.json';
import brand_B from '..tokens/brand_B.json';

const brandThemeObjectA = flattenTokens(core, brand_A);
const brandThemeObjectB = flattenTokens(core, brand_B);
```

## 2. Create Theme Objects

Use the [createTheme](/mobile/tools/create-theme) function to create a theme object from the flattened tokens. This theme object will be used to apply the white label theme to your application. The `createTheme` function takes two arguments: the name of the base theme (`"uhc"`, or `"optum"`) and an optional object for any overrides you wish to apply, such as your white-labeled theme.

```typescript
import { createTheme } from '@uhg-abyss/mobile';

const brandThemeA = createTheme('optum', brandThemeObjectA);
const brandThemeB = createTheme('optum', brandThemeObjectB);
```

## 3. Implement New Themes

Wrap your application with the [ThemeProvider](/mobile/ui/theme-provider). Depending on the brand selected, pass in the needed brand theme to the theme object. This ensures that the brand theme is applied globally to all components within your application.

```typescript
import { ThemeProvider, createTheme, flattenTokens } from '@uhg-abyss/mobile';
import core from '..tokens/core.json';
import brand_A from '..tokens/brand_A.json';
import brand_B from '..tokens/brand_B.json';

// flatten each brands tokens
const brandThemeObjectA = flattenTokens(core, brand_A);
const brandThemeObjectB = flattenTokens(core, brand_B);

// create each brand theme
const brandThemeA = createTheme('optum', brandThemeObjectA);
const brandThemeB = createTheme('optum', brandThemeObjectB);

const App = () => (
  <ThemeProvider theme={/* insert brand theme here */}>
    {/* Your application */}
  </ThemeProvider>
);
```