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.
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.
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.
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 is recommended to control the layout when using a custom container.
Example
HomeWidget Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
activeColor | Abyss.Color | undefined | - | - | Color of the home widget when pressed |
children | React.ReactNode | undefined | - | - | The children of the widget |
color | Abyss.Color | undefined | '$semantic.color.surface.container.emphasis.3' | - | Color of the home widget component |
headerAlignment | 'top' | 'bottom' | undefined | 'top' | - | Header alignment of the home widget component |
heading | string | undefined | - | - | The heading of the home widget |
headingColor | Abyss.Color | undefined | - | - | The color of the heading |
notification | React.ReactNode | undefined | - | - | The notification of the home widget component |
notificationColor | Abyss.Color | undefined | '$semantic.color.text.label.status.success' | - | The color of the notification text |
onPress | Abyss.GestureResponderEventHandler | - | - | Callback fired when the widget is pressed |
onPressIn | Abyss.GestureResponderEventHandler | - | - | Callback fired at the start of the widget press |
onPressOut | Abyss.GestureResponderEventHandler | - | - | Callback fired at the end of the widget press |
span | number | undefined | - | - | Sets the width of the widget |
subheading | string | undefined | - | - | Text displayed directly below the heading |
HomeWidget.Card Props
Extends Card props.
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
children | React.ReactNode | undefined | - | - | The contents of the home widget card |
color | Abyss.Color | undefined | '$card.color.surface.container' | - | Color of the card |
headerBackground | React.ReactNode | undefined | - | - | Sets the header background of the home widget card |
heading | string | undefined | - | - | Title of the home widget card. If nothing is defined here, the heading bar will be hidden |
headingAccessibilityRole | AccessibilityRole | undefined | 'header' | - | Accessibility role for the heading |
isDisabled | boolean | undefined | false | - | Toggle the disabled state |
padding | Abyss.Space | undefined | 0 | - | Padding of the card |
HomeWidget Classes
| Class Name | Description |
|---|---|
| abyss-home-widget-root | Widget container |
| abyss-home-widget-header-wrapper | Widget header container |
| abyss-home-widget-heading-wrapper | Widget heading container |
| abyss-home-widget-heading | Widget heading |
| abyss-home-widget-notification | Widget notification text |
| abyss-home-widget-subheading | Widget subheading text |
| abyss-home-widget-icon | Chevron on the right side of the widget |
| abyss-home-widget-content-wrapper | Widget header container |
HomeWidget.Card Classes
| Class Name | Description |
|---|---|
| abyss-home-widget-card-root | HomeWidget card root container |
| abyss-home-widget-header-wrapper | HomeWidget card header container |
| abyss-home-widget-card-heading | HomeWidget card heading |
HomeWidget.Card Tokens
| Token Name | Value | |
|---|---|---|
| widget-card.color.surface.container | #FFFFFF | |
| widget-card.color.border.container | #CBCCCD | |
| widget-card.color.text.heading | #002677 | |
| widget-card.spacing.padding.all.tile-grid.no-children | 12 | |
| widget-card.spacing.padding.horizontal.with-children | 12 | |
| widget-card.spacing.padding.horizontal.heading | 12 | |
| widget-card.spacing.padding.top.heading | 24 | |
| widget-card.spacing.padding.top.with-children | 12 | |
| widget-card.spacing.gap.all.tile-grid | 12 | |
| widget-card.box-shadow.container |
|
HomeWidget Tokens
| Token Name | Value | |
|---|---|---|
| tile.color.surface.container.rest.emphasis-1 | #EFF6EF | |
| tile.color.surface.container.rest.emphasis-2 | #FAF8F2 | |
| tile.color.surface.container.rest.emphasis-3 | #EEF8FB | |
| tile.color.surface.container.rest.emphasis-4 | #F7FCFD | |
| tile.color.surface.container.rest.dark | #00184D | |
| tile.color.surface.container.rest.white | #FFFFFF | |
| tile.color.surface.container.active.emphasis-1 | #E6F5E6 | |
| tile.color.surface.container.active.emphasis-2 | #F5F3ED | |
| tile.color.surface.container.active.emphasis-3 | #E4F1F5 | |
| tile.color.surface.container.active.emphasis-4 | #F1F6F7 | |
| tile.color.surface.container.active.dark | #004BA0 | |
| tile.color.surface.container.active.white | #F3F3F3 | |
| tile.color.text.heading.light | #FFFFFF | |
| tile.color.text.heading.dark | #002677 | |
| tile.color.text.subheading.light | #FFFFFF | |
| tile.color.text.subheading.dark | #002677 | |
| tile.color.text.bottom-content.heading.light | #FFFFFF | |
| tile.color.text.bottom-content.heading.dark | #002677 | |
| tile.color.text.bottom-content.paragraph.light | #FFFFFF | |
| tile.color.text.bottom-content.paragraph.dark | #323334 | |
| tile.color.icon.navigation.light | #FFFFFF | |
| tile.color.icon.navigation.dark | #323334 | |
| tile.border-radius.all.container | 8 | |
| tile.sizing.all.icon.navigation | 20 | |
| tile.spacing.padding.all.container | 16 | |
| tile.spacing.padding.bottom.header | 16 | |
| tile.spacing.gap.horizontal.header | 4 | |
| tile.spacing.gap.horizontal.bottom-content | 4 | |
| tile.spacing.gap.vertical.header-text | 4 | |
| tile.spacing.gap.vertical.bottom-content-text | 4 |