## Feature Examples

### Structure
- description: The component consists of 4 majors elements: `title`, content, action and close button. Control the action label with `actionText` and its interaction with `onAction` props, and the close button with the `onClose` prop.
- example:
```jsx
<SectionHelper
  title="Title"
  actionText="Action"
  onAction={() => {}}
  onClose={() => {}}
>
  Content
</SectionHelper>;
```

### Size
- description: Adjust the size of the section helper with the `size` prop: - `medium` (default) can be used in all common cases. - `small` is best for dense layouts. - `tiny` fits a single line of text with an action, such as a strip inside a card.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <SectionHelper size="medium">Medium </SectionHelper>
  <SectionHelper size="small">Small </SectionHelper>
  <SectionHelper
    size="tiny"
    layout="horizontal"
    fullWidth
    actionText="Action"
    onAction={() => {}}
  >
    Tiny
  </SectionHelper>
</StorybookComponents.Stack>;
```

### Skin
- description: Control the style of the section helper with the `appearance` prop. It supports 7 options: - `standard` is meant to provide additional information relevant to current user task. - `success` is used to inform users about a successful action. - `warning` (default) is intended to draw the user's attention to unresolved issues. - `danger` is used for error messages and information about critical issues. - `premium` is only intended for premium upgrades, packages that let users accept payments, connect domains, and have business email. [Read more about Premium patterns](https://docs.google.com/document/d/1mALfPW9BOZgAjaFpvor5la3WGhGkXIxpbkF2GFrapU0/edit). - `preview` is meant to present process status or related additional data. - `experimentalDark` is used to emphasize informational messages in the context of other content.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <SectionHelper appearance="standard">Standard </SectionHelper>
  <SectionHelper appearance="success">Success </SectionHelper>
  <SectionHelper appearance="warning">Warning </SectionHelper>
  <SectionHelper appearance="danger">Danger </SectionHelper>
  <SectionHelper appearance="premium">Premium</SectionHelper>
  <SectionHelper appearance="preview">Preview </SectionHelper>
  <SectionHelper appearance="experimentalDark">Dark </SectionHelper>
</StorybookComponents.Stack>;
```

### Prefix
- description: - Use the `showPrefixIcon` prop to show the default status icon. - Add more context for the section helper by also using the `prefixIcon` prop.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <SectionHelper showPrefixIcon prefixIcon={<Icons.EmailAlert />}>
    Fix email value to save account details.
  </SectionHelper>
  <SectionHelper showPrefixIcon>Warning message</SectionHelper>
</StorybookComponents.Stack>;
```

### Close button
- description: Control whether the user can dismiss th section helper with the `showCloseButton` prop.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <SectionHelper>Non-dismissable</SectionHelper>
  <SectionHelper showCloseButton={true}>Dismissable</SectionHelper>
</StorybookComponents.Stack>;
```

### Secondary action
- description: Add a second, lower-emphasis action beside the main one with `secondaryActionProps`, passing its `label` and an `onClick` handler. Keep `actionText` for the step you want people to take, and use the secondary action for the way out, postponing, dismissing or reading more.
- example:
```jsx
<SectionHelper
  title="Your domain expires in 5 days"
  actionText="Renew domain"
  onAction={() => {}}
  secondaryActionProps={{
    label: 'Remind me later',
    onClick: () => {},
  }}
>
  Renew before March 12 to keep bakery-and-co.com pointing at your site.
</SectionHelper>;
```

### Border
- description: Use the `border` prop to choose between: - `standard` (default) for all common cases. - `topBottom` for banner type use cases.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <SectionHelper border="standard">Standard</SectionHelper>
  <SectionHelper border="topBottom">Top bottom</SectionHelper>
</StorybookComponents.Stack>;
```

### Layout
- description: Change how the content and action are stacked using the layout props: - `vertical` (default) arranges the content and action vertically. - `horizontal` arranges the content and action horizontally.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <SectionHelper title="Title" actionText="Action" layout="vertical">
    Vertical content
  </SectionHelper>
  <SectionHelper title="Title" actionText="Action" layout="horizontal">
    Horizontal content
  </SectionHelper>
</StorybookComponents.Stack>;
```

### Content width
- description: Enable content width to be 100% wide with the `fullWidth` prop. By default, the component's title and content are limited to a maximum width of 420 pixels to ensure readability.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <SectionHelper
    title="The Life and Strange Surprizing Adventures of Robinson Crusoe, Of York,
    Mariner: Who lived Eight and Twenty Years, all alone in an un-inhabited
    Island on the Coast of America, near the Mouth of the Great River of
    Oroonoque;"
  >
    Having been cast on Shore by Shipwreck, wherein all the Men perished but
    himself. With An Account how he was at last as strangely deliver'd by
    Pyrates.
  </SectionHelper>
  <SectionHelper
    fullWidth
    title="The Life and Strange Surprizing Adventures of Robinson Crusoe, Of York,
    Mariner: Who lived Eight and Twenty Years, all alone in an un-inhabited
    Island on the Coast of America, near the Mouth of the Great River of
    Oroonoque;"
  >
    Having been cast on Shore by Shipwreck, wherein all the Men perished but
    himself. With An Account how he was at last as strangely deliver'd by
    Pyrates.
  </SectionHelper>
</StorybookComponents.Stack>;
```

## Common Use Case Examples

### Application error
- description: Errors occur because of breaches in application logic or conditions; for example, when users reach storage limits or their payment method has expired. These errors can occur before users even open the application or a specific page, making it essential for them to be visible upon arrival. Place application errors at the top of the page below the page header using the error banner.
- example:
```jsx
<Page>
  <Page.Header
    title="Online Programs"
    subtitle="Build and market multi-step courses."
    actionsBar={
      <Box gap="SP2">
        <Button prefixIcon={<Icons.Add />}>Create New</Button>
      </Box>
    }
  />
  <Page.Content>
    <Layout>
      <Cell>
        <SectionHelper
          appearance="danger"
          title="Payment method expired"
          actionText="Update Payment Method"
          onAction={() => {}}
          onClose={() => {}}
        >
          The payment method linked to your account expired two days ago. To
          continue receiving payments for your online program, updated your
          payment details.
        </SectionHelper>
      </Cell>
      <Cell>
        <Card>
          <Card.Content>
            <Box height="120px" />
          </Card.Content>
        </Card>
      </Cell>
      <Cell>
        <Card>
          <Card.Content>
            <Box height="120px" />
          </Card.Content>
        </Card>
      </Cell>
    </Layout>
  </Page.Content>
</Page>;
```

### Inline with content
- description: Place the section helper at the top of the section that it applies to.
- example:
```jsx
<Card hideOverflow>
  <Card.Header
    title="Earn points"
    subtitle="These are the ways customers earn points."
  />
  <SectionHelper
    fullWidth
    size="small"
    border="topBottom"
    showCloseButton
    showPrefixIcon
    layout="horizontal"
  >
    You don't have ways of Earning Points enabled, so users can't collect
    points. Enable at least one of the way below.
  </SectionHelper>

  <TableListItem
    showDivider
    options={[
      {
        value: (
          <FormField label="Inactive" labelPlacement="right">
            <ToggleSwitch size="medium" />
          </FormField>
        ),
        width: 'auto',
      },
      {
        value: (
          <Box direction="vertical">
            <Text size="small" weight="bold">
              Make a Restaurant Order
            </Text>
            <Text size="small">Give 1 points for every 1$ spent.</Text>
          </Box>
        ),
      },
      {
        value: (
          <IconButton priority="secondary" size="small">
            <Icons.MoreSmall />
          </IconButton>
        ),
        width: 'auto',
      },
    ]}
  />
  <TableListItem
    options={[
      {
        value: (
          <FormField label="Inactive" labelPlacement="right">
            <ToggleSwitch size="medium" />
          </FormField>
        ),
        width: 'auto',
      },
      {
        value: (
          <Box direction="vertical">
            <Text size="small" weight="bold">
              Sign Up to the Site
            </Text>
            <Text size="small">Give 100 points after sign up.</Text>
          </Box>
        ),
      },
      {
        value: (
          <IconButton priority="secondary" size="small">
            <Icons.MoreSmall />
          </IconButton>
        ),
        width: 'auto',
      },
    ]}
  />
</Card>;
```

### In front of content
- description: Position the section helper on top of content in modals to update users about the status change.
- example:
```jsx
() => {
  const [state, setState] = React.useState(true);
  return (
    <CustomModalLayout
      title="Account details"
      subtitle="Manage name and email details."
      secondaryButtonText="Cancel"
      primaryButtonText="Save"
      showHeaderDivider
      overflowY="visible"
      onCloseButtonClick={() => setState(true)}
      primaryButtonOnClick={() => setState(true)}
      secondaryButtonOnClick={() => setState(true)}
    >
      <Layout>
        {state && (
          <Box
            position="absolute"
            top="24px"
            left="50%"
            transform="translateX(-50%)"
          >
            <SectionHelper
              appearance="danger"
              size="small"
              showCloseButton
              showPrefixIcon
              layout="horizontal"
              onClose={() => setState(false)}
            >
              Fix email value to save account details.
            </SectionHelper>
          </Box>
        )}
        <Cell span={6}>
          <FormField label="First name">
            <Input defaultValue="John" />
          </FormField>
        </Cell>
        <Cell span={6}>
          <FormField label="Last name">
            <Input defaultValue="Smith" />
          </FormField>
        </Cell>
        <Cell>
          <FormField
            label="Email address"
            status="error"
            statusMessage='Provide the email in format "your@email.com"'
          >
            <Input defaultValue="asfljaokfjalk" type="email" />
          </FormField>
        </Cell>
      </Layout>
    </CustomModalLayout>
  );
};
```