fix(outline-core-alert): Basic updates and cleanup.

phase2 · Oct 25, 2023 · b880f15 · b880f15
1 parent 413e1c2
commit b880f15
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 24 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -9,7 +9,6 @@
   "updateInternalDependencies": "patch",
   "ignore": [
     "@phase2/outline-core-accordion",
-    "@phase2/outline-core-alert",
     "@phase2/outline-core-breadcrumb",
     "@phase2/outline-core-card",
     "@phase2/outline-core-container",

diff --git a/.changeset/twenty-colts-serve.md b/.changeset/twenty-colts-serve.md
@@ -0,0 +1,13 @@
+---
+'@phase2/outline-form': patch
+'@phase2/outline-storybook': patch
+'@phase2/outline-examples': patch
+'@phase2/outline-core-alert': patch
+'@phase2/outline-core-link': patch
+'@phase2/outline-docs': patch
+'@phase2/outline-config': patch
+'@phase2/outline-templates': patch
+'@phase2/outline-core': patch
+---
+
+Cleaup and organization.
diff --git a/packages/components/outline-core-alert/README.md b/packages/components/outline-core-alert/README.md
@@ -0,0 +1,30 @@
+# outline-core-alert
+
+The Outline Core Alert component
+
+## Properties
+
+| Property             | Attribute        | Type                                          | Default | Description                                   |
+|----------------------|------------------|-----------------------------------------------|---------|-----------------------------------------------|
+| `adoptedStylesheets` |                  | `AdoptedStyleSheets`                          |         |                                               |
+| `debug`              |                  | `boolean`                                     | false   |                                               |
+| `isInteractive`      | `is-interactive` | `boolean`                                     | false   | This is important context for screen readers. |
+| `status`             | `status`         | `"info" \| "warning" \| "error" \| "success"` | "info"  |                                               |
+
+## Slots
+
+| Name         | Description                                    |
+|--------------|------------------------------------------------|
+| `default`    | The alert contents.                            |
+| `header`     | The header in the alert.                       |
+| `icon-end`   | The icon to display at the end of the alert.   |
+| `icon-start` | The icon to display at the start of the alert. |
+
+## CSS Custom Properties
+
+| Property                   | Description                                      |
+|----------------------------|--------------------------------------------------|
+| `--outline-alert--error`   | background: The background color for the error alert. |
+| `--outline-alert--info`    | background: The background color for the info alert. |
+| `--outline-alert--success` | background: The background color for the success alert. |
+| `--outline-alert--warning` | background: The background color for the warning alert. |
diff --git a/packages/components/outline-core-alert/docs/outline-core-alert.mdx b/packages/components/outline-core-alert/docs/outline-core-alert.mdx
@@ -1,5 +1,4 @@
 import { Meta } from '@storybook/addon-docs';
-
 import '@phase2/outline-core-alert';
 
 <Meta
@@ -21,7 +20,7 @@ import '@phase2/outline-core-alert';
 
 The `outline-core-alert` component ...
 
-<outline-core-alert status="warning" size="large">
+<outline-core-alert status="warning">
   <span slot="header">Documentation Status: @TODO</span>
   <p>This documentation is in need of completion as the component is built out.</p>
   <ul>
@@ -34,6 +33,31 @@ The `outline-core-alert` component ...
 ## Introduction to the **`outline-core-alert`** component
 The `outline-core-alert` component is a versatile alert box that can be used to display important messages to the user. It supports various statuses such as 'info', 'warning', 'error', and 'success', each with its own distinct styling.
 
+### Slots
+
+The `outline-core-alert` component supports two slots: 'header' and the `default` slot. 
+The 'header' slot is used for the alert's title, and the `default` slot is used for the alert's content. 
+Any content not wrapped inside the `header` slot would by default, be placed inside the `default` slot.
+
+Here's an example of how to use these slots:
+
+<outline-core-alert status="success">
+  <span slot="header">Content in header slot</span>
+  <p>This is a paragraph added to the default slot.</p>
+  <p>This is another paragraph added to the default slot.</p>
+</outline-core-alert>
+<br />
+```html
+<outline-core-alert status="success">
+  <span slot="header">Content in header slot</span>
+  <p>This is a paragraph added to the default slot.</p>
+  <p>This is another paragraph added to the default slot.</p>
+</outline-core-alert>
+```
+
+In the above example, the 'header' slot is used to display the title 'Warning', and the 'default' slot is used to display the message 'This is a warning alert.'.
+
+
 ### Usage
 
 To use the `outline-core-alert` component, you need to import it in your file like so:
@@ -42,16 +66,65 @@ To use the `outline-core-alert` component, you need to import it in your file li
 import '@phase2/outline-core-alert';
 ```
 
-After importing, you can use the `outline-core-alert` component in your HTML. Here's an example:
+After importing, you can use the `outline-core-alert` component in your HTML. 
+The available options are 'info', 'warning', 'error', and 'success'. 
+The content inside the `outline-core-alert` tags is the message that will be displayed in the alert box.
+
+Here are examples of each `status` type:
 
+#### `info`
+<outline-core-alert status="info">
+  <span slot="header">Information</span>
+  <p>This is an informational alert.</p>
+</outline-core-alert>
+<br />
 ```html
 <outline-core-alert status="info">
   <span slot="header">Information</span>
   <p>This is an informational alert.</p>
 </outline-core-alert>
 ```
 
-In the above example, the `status` attribute is used to specify the type of alert. The available options are 'info', 'warning', 'error', and 'success'. The content inside the `outline-core-alert` tags is the message that will be displayed in the alert box.
+#### `warning`
+<outline-core-alert status="warning">
+  <span slot="header">Warning</span>
+  <p>This is a warning alert.</p>
+</outline-core-alert>
+<br />
+```html
+<outline-core-alert status="warning">
+  <span slot="header">Warning</span>
+  <p>This is a warning alert.</p>
+</outline-core-alert>
+```
+
+#### `error`
+<outline-core-alert status="error">
+  <span slot="header">Error</span>
+  <p>This is an error alert.</p>
+</outline-core-alert>
+<br />
+```html
+<outline-core-alert status="error">
+  <span slot="header">Error</span>
+  <p>This is an error alert.</p>
+</outline-core-alert>
+```
+
+#### `success`
+<outline-core-alert status="success">
+  <span slot="header">Success</span>
+  <p>This is a success alert.</p>
+</outline-core-alert>
+<br />
+```html
+<outline-core-alert status="success">
+  <span slot="header">Success</span>
+  <p>This is a success alert.</p>
+</outline-core-alert>
+```
+
+Each `status` type changes the visual style of the alert to correspond with the type of message being conveyed.
 
 ### Styling
 
@@ -73,16 +146,3 @@ The `outline-core-alert` component uses CSS variables for styling. You can overr
 ```
 
 Each variable corresponds to a specific part of the alert's style. For example, `--outline-alert--info-background--computed` controls the background color of 'info' alerts, and `--outline-alert--info-text--computed` controls the text color.
-
-### Slots
-
-The `outline-core-alert` component supports two slots: 'header' and 'default'. The 'header' slot is used for the alert's title, and the 'default' slot is used for the alert's content. Here's an example of how to use these slots:
-
-```html
-<outline-core-alert status="warning">
-  <span slot="header">Warning</span>
-  <p slot="default">This is a warning alert.</p>
-</outline-core-alert>
-```
-
-In the above example, the 'header' slot is used to display the title 'Warning', and the 'default' slot is used to display the message 'This is a warning alert.'.
diff --git a/packages/components/outline-core-alert/src/outline-core-alert.ts b/packages/components/outline-core-alert/src/outline-core-alert.ts
@@ -47,12 +47,6 @@ export interface OutlineCoreAlertInterface extends HTMLElement {
  * @cssprop --outline-alert--error-text: The text color for the error alert.
  * @cssprop --outline-alert--error-border: The border color for the error alert.
  * @todo: Make the alert styling more flexible.
- * @todo: Complete component.
- * @todo: Update `../docs/outline-core-alert.mdx` to accurately document the component.
- * @todo: Run `yarn analyze` to generate README.md.
- * @todo: Update `package.json` to remove the `private` flag.
- * @todo: Update `.changeset/config.json` to remove this component from the `ignore` list.
- * @todo: Create PR for updated and completed component.
  */
 @customElement(componentName)
 export class OutlineCoreAlert

diff --git a/packages/components/outline-core-alert/src/style/outline-core-alert.css b/packages/components/outline-core-alert/src/style/outline-core-alert.css
@@ -1,3 +1,7 @@
+:host {
+  @nested-import './outline-core-alert.vars.css';
+}
+
 .alert-body {
   display: block;
   border-width: 0;

diff --git a/packages/components/outline-core-alert/src/style/outline-core-alert.lightDom.css b/packages/components/outline-core-alert/src/style/outline-core-alert.lightDom.css
@@ -0,0 +1,3 @@
+outline-core-alert {
+  @nested-import './outline-core-alert.vars.css';
+}