## Feature Examples

### Skin
- description: Control the appearance of the floating notification with `type` prop. It supports 7 options: - `standard` (default) - use it to provide additional information relevant to current user task or an action. - `success` - use it to inform users about successful operation. - `destructive` - use it for error messages and information about critical issues that prevent to continue. - `warning` - use it to draw the user's attention to unresolved issues that might affect the application, but doesn't block the process. - `premium` - use it for premium upgrades only — packages that let accept payments, connect domain and have business email. [Read more about Premium patterns](https://docs.google.com/document/d/1mALfPW9BOZgAjaFpvor5la3WGhGkXIxpbkF2GFrapU0/edit). - `preview` - use it to present process status or related additional data. - `dark` - use it to emphasize informational messages in the context of other content.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <FloatingNotification type="standard" text="Standard (default)" />
  <FloatingNotification type="success" text="Success" />
  <FloatingNotification type="warning" text="Warning" />
  <FloatingNotification type="destructive" text="Destructive" />
  <FloatingNotification type="premium" text="Premium" />
  <FloatingNotification type="preview" text="Preview" />
  <FloatingNotification type="dark" text="Dark" />
</StorybookComponents.Stack>;
```

### Width
- description: Control component width in pixels or percentage with `width` prop. Set component to fill 100% of its parent container width with `fullWidth` prop. Prop has an effect on notification appearance - it removes left/right borders and corner radius, changes component height and paddings.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <FloatingNotification width="300px" text="Fixed width" />
  <FloatingNotification fullWidth text="Full width" />
</StorybookComponents.Stack>;
```

### Actions
- description: Add call to actions to a notification with: - `buttonProps` - use to add a primary action - `textButtonProps` - use it to add a text button. Add a link to an external URL with `href` prop. Component can have both actions at the same time.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <FloatingNotification text="Text message" buttonProps={{ label: 'Action' }} />
  <FloatingNotification
    text="Text message"
    textButtonProps={{ label: 'Link' }}
  />
  <FloatingNotification
    text="Text message"
    buttonProps={{ label: 'Action' }}
    textButtonProps={{
      label: 'Link to wix.com',
      as: 'a',
      href: 'https://www.wix.com',
    }}
  />
</StorybookComponents.Stack>;
```

### Close Button
- description: Control whether notification can be dismissed by a user with `showCloseButton` prop.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <FloatingNotification text="Dismissable" />
  <FloatingNotification text="Non-dismissable" showCloseButton={false} />
</StorybookComponents.Stack>;
```

### Prefix
- description: Add more context for the notification purpose with `prefixIcon`.
- example:
```jsx
<FloatingNotification
  text="Notification message here"
  prefixIcon={<Icons.InfoCircle />}
/>;
```

## Common Use Case Examples

### In front of content
- description: Position notification 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%)"
          >
            <FloatingNotification
              prefixIcon={<Icons.StatusAlert />}
              type="destructive"
              text="Fix email value to save account details."
              onClose={() => setState(false)}
            />
          </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>
  );
};
```

### Inline with content
- description: Place notifications first in the section that they apply to.
- example:
```jsx
<Card hideOverflow>
  <Card.Header
    title="Earn points"
    subtitle="These are the ways customers earn points."
  />
  <FloatingNotification
    type="warning"
    fullWidth
    prefixIcon={<Icons.StatusWarning />}
    text="You don't have ways of Earning Points enabled, so users can't collect points. Enable at least one of the way below."
  />
  <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>;
```