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
| Prop Name | Type | Default | Description |
|---|---|---|---|
| activeColor | string | - | Defines the widget color when pressed |
| activeColor | string | - | Defines the widget color when pressed |
| children | node | - | The children of the widget |
| color | string | $semantic.color.surface.container.emphasis.3 | Defines the widget color |
| headerAlignment | top | bottom | top | Moves header above or below content |
| heading | string | - | The heading of the home widget |
| headingColor | function | - | The color of the heading |
| notification | string | - | The notification of the home widget component |
| notificationColor | string | $semantic.color.text.label.status.success | The color of the notification text |
| onPress | function | - | Callback fired when the widget is pressed |
| span | number | - | Sets the width of the widget |
| subheading | string | - | Text displayed directly below the heading |
HomeWidget.Card Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | node | - | The contents of the home widget card |
| headerBackground | string | - | Sets the header background of the home widget card |
| heading | string | - | Heading of the home widget card. If nothing is defined here, the heading bar will be hidden |
HomeWidget Classes
| Class Name | Description |
|---|---|
| abyss-home-widget-content-wrapper | Widget header container |
| abyss-home-widget-header-wrapper | Widget header container |
| abyss-home-widget-heading | Widget heading |
| abyss-home-widget-heading-wrapper | Widget heading container |
| abyss-home-widget-icon | Chevron on the right side of the widget |
| abyss-home-widget-notification | Widget notification text |
| abyss-home-widget-root | Widget container |
| abyss-home-widget-subheading | Widget subheading text |
HomeWidget.Card Classes
| Class Name | Description |
|---|---|
| abyss-home-widget-card-header-wrapper | HomeWidget card header container |
| abyss-home-widget-card-heading | HomeWidget card heading |
| abyss-home-widget-card-root | HomeWidget card root container |
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 |