import { NeedHelp } from '@uhg-abyss/mobile';

heading

paragraph

(
  <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.

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.

NeedHelp Props

Name	Type	Default	Required	A11y	Description
children	string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined				The contents of the need help component
heading	string				Set the heading of the need help component
headingAccessibilityRole	AccessibilityRole | undefined	'header'			Accessibility role for the heading element
paragraph	string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined				Set the paragraph of the need help component

NeedHelp.Link Props

Name	Type	Default	Description
after	Element | LinkInsertFunction | undefined		Insert element into link component after children
alt	boolean | undefined	false	Set the color of the Link to the alt variant
before	Element | LinkInsertFunction | undefined		Insert element into link component before children
children	((string | number | boolean | Value | AnimatedInterpolation<string | number> | ((state: PressableStateCallbackType) => ReactNode) | WithAnimatedObject<...> | WithAnimatedObject<...> | WithAnimatedObject<...> | null) & string) | undefined		Either children or a render prop that receives a boolean reflecting whether the component is currently pressed. Set the text of the link
color	Color | undefined		Set the color of the link
href	string | undefined		Set the URL of the link
inline	false | undefined	false	Render as standard Pressable link with flexbox layout. Supports before/after icons. Use inline={true} for text-inline variant.
onPress	(((event: GestureResponderEvent) => void) & ((event: GestureResponderEvent) => void)) | null | undefined		Called when a single tap gesture is detected. Callback fired when the link is pressed
onPressIn	(((event: GestureResponderEvent) => void) & ((event: GestureResponderEvent) => void)) | null | undefined		Called when a touch is engaged before onPress. Callback fired when the link is pressed In
onPressOut	(((event: GestureResponderEvent) => void) & ((event: GestureResponderEvent) => void)) | null | undefined		Called when a touch is released before onPress. Callback fired when the link is pressed Out
underline	boolean | undefined		Used to underline the link text

NeedHelp.Button Props

Name	Type	Default	Description
children	ReactNode | ((state: PressableStateCallbackType) => ReactNode)		The contents of the button component
icon	ButtonIcon		Defines the icon name, variant and position
iconPosition	"leading" | "trailing" | "iconOnly" | undefined	'trailing'	Defines the position of the icon relative to the button text
isDisabled	boolean | undefined	false	Disables the button
isLoading	boolean | undefined	false	Shows a loading spinner
onPress	GestureResponderEventHandler		Callback fired when the Button is pressed
submit	boolean | undefined	false	Flag to indicate the button is a form submit button

NeedHelp Classes

Class Name	Description
abyss-need-help-children-container	NeedHelp children container
abyss-need-help-heading	NeedHelp heading element
abyss-need-help-root	NeedHelp root element
abyss-need-help-text	NeedHelp text element

NeedHelp.Link Classes

Extends Abyss - Link Classes

Class Name	Description
abyss-link-icon	Link icon
abyss-link-label	Link label
abyss-link-root	Link root element
abyss-need-help-link-root	NeedHelp link element

NeedHelp.Button Classes

Extends Abyss - Button Classes

Class Name	Description
abyss-button-icon	Button icon element
abyss-button-label	Button label element
abyss-button-loading-spinner	Button loading spinner element
abyss-button-root	Button root element
abyss-need-help-button-root	NeedHelp link element

NeedHelp Tokens

Search tokens

Token Name	Value
need-help.color.surface.container	#EEF8FB
need-help.color.border.container	#CBCCCD
need-help.color.text.heading	#002677
need-help.color.text.paragraph	#4B4D4F
need-help.border-width.top.container	1
need-help.spacing.padding.horizontal.container	16
need-help.spacing.padding.vertical.container	24
need-help.spacing.gap.vertical.container	16
need-help.spacing.gap.vertical.text	2

NeedHelp Props

V2	V1	Status
children	children	Unchanged
heading	title	Renamed
paragraph	description	Renamed