Add docs for InlineAlert

packages/@react-spectrum/inlinealert/docs/InlineAlert.mdx

@@ -0,0 +1,113 @@
+{/* Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License. */}
+
+import {Layout} from '@react-spectrum/docs';
+export default Layout;
+
+import docs from 'docs:@react-spectrum/inlinealert';
+import {HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs';
+import packageData from '@react-spectrum/statuslight/package.json';
+
+```jsx import
+import {InlineAlert} from '@react-spectrum/inlinealert';
+import {Header, Content} from '@adobe/react-spectrum';
+```
+
+---
+category: Status
+keywords: [inline alert, alert]
+---
+
+# InlineAlert
+
+<PageDescription>{docs.exports.InlineAlert.description}</PageDescription>
+
+<HeaderInfo
+  packageData={packageData}
+  componentNames={['InlineAlert']}
+  sourceData={[
+    {type: 'Spectrum', url: 'https://spectrum.adobe.com/page/in-line-alert/'}
+  ]} />
+
+## Example
+
+```tsx example
+<InlineAlert>
+  <Header>Payment Information</Header>
+  <Content>Enter your billing address, shipping address, and payment method to complete your purchase.</Content>
+</InlineAlert>
+```
+
+## Content
+
+Inline alerts contain a title and body. They also include an icon for non-neutral variants.
+
+```tsx example
+<InlineAlert variant="positive">
+  <Header>Payment Information</Header>
+  <Content>Enter your billing address, shipping address, and payment method to complete your purchase.</Content>
+</InlineAlert>
+```
+
+### Accessibility
+
+Inline alerts are given the [alert role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role), which means they should only be used for information that requires the user's immediate attention.
+
+### Internationalization
+
+To internationalize an InlineAlert, localized strings should be set as the title and body content of the InlineAlert.
+For languages that are read right-to-left (e.g. Hebrew and Arabic), the InlineAlert is automatically flipped.
+
+## Props
+
+<PropTable component={docs.exports.InlineAlert} links={docs.links} />
+
+## Visual options
+
+### Variant
+[View guidelines](https://spectrum.adobe.com/page/in-line-alert/#Options)
+
+When inline alerts have a semantic meaning, they should use the appropriate variant.
+The default variant is neutral, and should be used when the message is neutral in tone or when its semantics do not fit any of the other variants.
+
+#### Informative
+
+```tsx example
+<InlineAlert variant="info">
+  <Header>Accepted Payment Methods</Header>
+  <Content>Only major credit cards are accepted for payment. Direct debit is currently unavailable.</Content>
+</InlineAlert>
+```
+
+#### Positive
+
+```tsx example
+<InlineAlert variant="positive">
+  <Header>Purchase completed</Header>
+  <Content>You'll get a confirmation email with your order details shortly.</Content>
+</InlineAlert>
+```
+
+#### Notice
+
+```tsx example
+<InlineAlert variant="notice">
+  <Header>Update payment information</Header>
+  <Content>The saved credit card for your account has expired. Update your payment information to complete the purchase.</Content>
+</InlineAlert>
+```
+
+#### Negative
+
+```tsx example
+<InlineAlert variant="negative">
+  <Header>Unable to process payment</Header>
+  <Content>There was an error processing your payment. Please check that your credit card information is correct, then try again.</Content>
+</InlineAlert>
+```