@react-ui-org/react-ui 0.52.0 → 0.53.0

package/src/{lib/components/Alert/README.mdx → components/Alert/README.md}

@@ -1,22 +1,5 @@
----
-name: Alert
-menu: 'Miscellaneous'
-route: /components/alert
----
-
 # Alert
 
-import {
-  Playground,
-  Props,
-} from 'docz'
-import Icon from '../../../docs/_components/Icon'
-import Placeholder from '../../../docs/_components/Placeholder'
-import {
-  Button,
-  Alert,
-} from '../..'
-
 Alert presents feedback or important information to users.
 
 ## Basic Usage
@@ -29,11 +12,11 @@ import { Alert } from '@react-ui-org/react-ui';
 
 And use it:
 
-<Playground>
-  <Alert>
-    <strong>Hello!</strong> This is an alert.
-  </Alert>
-</Playground>
+```docoff-react-preview
+<Alert>
+  <strong>Hello!</strong> This is an alert.
+</Alert>
+```
 
 See [API](#api) for all available options.
 
@@ -48,31 +31,31 @@ See [API](#api) for all available options.
 
 ## Color Variants
 
-All [component colors](/foundation/colors#component-colors) are supported by
+All [component colors](/docs/foundation/colors#component-colors) are supported by
 alert to cover all possible needs of your project.
 
 ### Success
 
 Success alerts confirm that an operation has been processed successfully.
 
-<Playground>
-  <Alert color="success">
-    <strong>Success:</strong> Settings have been successfully saved.
-  </Alert>
-</Playground>
+```docoff-react-preview
+<Alert color="success">
+  <strong>Success:</strong> Settings have been successfully saved.
+</Alert>
+```
 
 ### Warning
 
 Use warning alerts when a potentially unfavourable situation may occur. You may
 suggest an action to resolve the problem.
 
-<Playground>
-  <Alert color="warning">
-    <strong>Warning:</strong> Your credit card is going to expire soon.
-    {' '}
-    <a href="/">Update my payment options</a>
-  </Alert>
-</Playground>
+```docoff-react-preview
+<Alert color="warning">
+  <strong>Warning:</strong> Your credit card is going to expire soon.
+  {' '}
+  <a href="/">Update my payment options</a>
+</Alert>
+```
 
 ### Danger
 
@@ -80,109 +63,110 @@ Danger alerts say there is something that block users from continuing that
 requires their immediate attention. The alert should offer a solution to the
 problem.
 
-<Playground>
-  <Alert color="danger">
-    <strong>Error:</strong> Cannot connect to the server. Is your internet
-    connection working fine?
-    {' '}
-    <a href="/">Try again</a>
-  </Alert>
-</Playground>
+```docoff-react-preview
+<Alert color="danger">
+  <strong>Error:</strong> Cannot connect to the server. Is your internet
+  connection working fine?
+  {' '}
+  <a href="/">Try again</a>
+</Alert>
+```
 
 ### Help
 
 This kind of alert can be used to display helpful information.
 
-<Playground>
-  <Alert color="help">
-    <strong>Help:</strong> You should choose a password you don&apos;t use
-    anywhere else.
-  </Alert>
-</Playground>
+```docoff-react-preview
+<Alert color="help">
+  <strong>Help:</strong> You should choose a password you don&apos;t use
+  anywhere else.
+</Alert>
+```
 
 ### Info
 
 Another common, informative alert.
 
-<Playground>
-  <Alert color="info">
-    <strong>Info:</strong> This feature depends on user&apos;s OS preferences.
-  </Alert>
-</Playground>
+```docoff-react-preview
+<Alert color="info">
+  <strong>Info:</strong> This feature depends on user&apos;s OS preferences.
+</Alert>
+```
 
 ### Note (Default)
 
 Neutral informative alert.
 
-<Playground>
-  <Alert>
-    <strong>Note:</strong> This feature may not be available in all regions.
-  </Alert>
-</Playground>
+```docoff-react-preview
+<Alert>
+  <strong>Note:</strong> This feature may not be available in all regions.
+</Alert>
+```
 
 ### Light
 
 Light alert variant.
 
-<Playground>
-  <Placeholder dark>
-    <Alert color="light">
-      <strong>Light alert:</strong> Stands out on dark backgrounds.
-    </Alert>
-  </Placeholder>
-</Playground>
+```docoff-react-preview
+<docoff-placeholder dark>
+  <Alert color="light">
+    <strong>Light alert:</strong> Stands out on dark backgrounds.
+  </Alert>
+</docoff-placeholder>
+```
 
 ### Dark
 
 Dark alert variant.
 
-<Playground>
-  <Alert color="dark">
-    <strong>Dark alert:</strong> Stands out on light backgrounds.
-  </Alert>
-</Playground>
+```docoff-react-preview
+<Alert color="dark">
+  <strong>Dark alert:</strong> Stands out on light backgrounds.
+</Alert>
+```
 
 ## Alerts with Icons
 
 An icon can (and should) accompany the message.
 
 👉 Please note there are no icons pre-packed in React UI. Visit
-[Icons](/foundation/icons) to see how it works.
+[Icons](/docs/foundation/icons) to see how it works.
 
-<Playground>
-  <Alert color="success" icon={<Icon icon="success" />}>
-    <strong>Success:</strong> Settings have been successfully saved.
-  </Alert>
-</Playground>
+```docoff-react-preview
+<Alert color="success" icon={<rui-icon icon="success" />}>
+  <strong>Success:</strong> Settings have been successfully saved.
+</Alert>
+```
 
 ## Dismissible Alerts
 
 You can make an alert dismissible by providing a function that closes it on
 click on the close button:
 
-<Playground>
-  {() => {
-    const [isAlertVisible, setIsAlertVisible] = React.useState(true);
+```docoff-react-preview
+React.createElement(() => {
+  const [isAlertVisible, setIsAlertVisible] = React.useState(true);
+
+  if (isAlertVisible) {
     return (
-      <>
-        {isAlertVisible ? (
-          <Alert
-            color="success"
-            icon={<Icon icon="success" />}
-            onClose={() => setIsAlertVisible(false)}
-          >
-            <strong>Success:</strong> Settings have been successfully saved.
-          </Alert>
-        ) : (
-          <Button
-            label="Bring the alert back!"
-            onClick={() => setIsAlertVisible(true)}
-          />
-        )}
-      </>
+      <Alert
+        color="success"
+        icon={<rui-icon icon="success" />}
+        onClose={() => setIsAlertVisible(false)}
+      >
+        <strong>Success:</strong> Settings have been successfully saved.
+      </Alert>
     );
-  }}
-</Playground>
+  }
+
+  return (
+    <Button
+      label="Bring the alert back!"
+      onClick={() => setIsAlertVisible(true)}
+    />
+  );
+});
+```
 
 ## Forwarding HTML Attributes
 
@@ -197,7 +181,7 @@ its accessibility.
 
 ## API
 
-<Props table of={Alert} />
+<docoff-react-props src="/components/Alert/Alert.jsx" />
 
 ## Theming
 
@@ -222,7 +206,7 @@ convention looks as follows:
 Where:
 
 - `<COLOR>` is one of supported
-  [component colors](/foundation/colors#component-colors)
+  [component colors](/docs/foundation/colors#component-colors)
   (see alert [color variants](#color-variants) and [API](#api)),
 - `<PROPERTY>` is one of `color` (color of text), `foreground-color` (color of
   border, icon, links, and emphasis), or `background-color`.

package/src/{lib/components → components}/Badge/Badge.jsx

@@ -31,7 +31,7 @@ Badge.defaultProps = {
 
 Badge.propTypes = {
   /**
-   * [Color variant](/foundation/colors#component-colors) to clarify importance and meaning of the badge.
+   * [Color variant](/docs/foundation/colors#component-colors) to clarify importance and meaning of the badge.
    */
   color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
   /**

package/src/{lib/components → components}/Badge/Badge.scss

@@ -71,7 +71,7 @@ $_badge-size: 1.25rem;
 
     padding-top: 0.1875rem;
     padding-bottom: 0.1875rem;
-    border: borders.$width solid currentColor;
+    border: borders.$width solid currentcolor;
 }
 
 .isRootPriorityOutline.isRootColorSuccess {

package/src/components/Badge/README.md

@@ -0,0 +1,103 @@
+# Badge
+
+## Basic Usage
+
+To implement the Badge component, you need to import it first:
+
+```js
+import { Badge } from '@react-ui-org/react-ui';
+```
+
+And use it:
+
+```docoff-react-preview
+<Badge label="Hello!" />
+```
+
+See [API](#api) for all available options.
+
+## General Guidelines
+
+Use badges to highlight content with a **short and brief** additional
+information: a number, a word, but no more than two words.
+
+## Priorities
+
+There are two **visual priorities** of badges to choose from, from highest to
+lowest:
+
+1. filled
+2. outline
+
+All priorities come in supported
+[component colors](/docs/foundation/colors#component-colors).
+
+### Filled
+
+High-emphasis priority to draw user's attention.
+
+```docoff-react-preview
+<Badge label="3" color="success" />
+<Badge label="4" color="warning" />
+<Badge label="5" color="danger" />
+<Badge label="10" color="help" />
+<Badge label="34" color="info" />
+<Badge label="99+" />
+<Badge label="365" color="light" />
+<Badge label="999+" color="dark" />
+```
+
+```docoff-react-preview
+<Badge label="Success" color="success" />
+<Badge label="Warning" color="warning" />
+<Badge label="Danger" color="danger" />
+<Badge label="Help" color="help" />
+<Badge label="Info" color="info" />
+<Badge label="Note" />
+<Badge label="Light" color="light" />
+<Badge label="Dark" color="dark" />
+```
+
+### Outline
+
+Medium-emphasis priority to provide additional context in an unobtrusive way.
+
+```docoff-react-preview
+<Badge priority="outline" label="3" color="success" />
+<Badge priority="outline" label="4" color="warning" />
+<Badge priority="outline" label="5" color="danger" />
+<Badge priority="outline" label="10" color="help" />
+<Badge priority="outline" label="34" color="info" />
+<Badge priority="outline" label="99+" />
+<Badge priority="outline" label="365" color="light" />
+<Badge priority="outline" label="999+" color="dark" />
+```
+
+```docoff-react-preview
+<Badge priority="outline" label="Success" color="success" />
+<Badge priority="outline" label="Warning" color="warning" />
+<Badge priority="outline" label="Danger" color="danger" />
+<Badge priority="outline" label="Help" color="help" />
+<Badge priority="outline" label="Info" color="info" />
+<Badge priority="outline" label="Note" />
+<Badge priority="outline" label="Light" color="light" />
+<Badge priority="outline" label="Dark" color="dark" />
+```
+
+## Forwarding HTML Attributes
+
+In addition to the options below in the [component's API](#api) section, you
+can specify [React synthetic events] or **any HTML attribute you like.** All
+attributes that don't interfere with the API are forwarded to the root `<div>`
+HTML element. This enables making the component interactive and helps to improve
+its accessibility.
+
+👉 Refer to the MDN reference for the full list of supported attributes of the
+[div] element.
+
+## API
+
+<docoff-react-props src="/components/Badge/Badge.jsx" />
+
+[React synthetic events]: https://reactjs.org/docs/events.html
+[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes

package/src/{lib/components → components}/Button/Button.jsx

@@ -133,7 +133,7 @@ Button.propTypes = {
    */
   block: PropTypes.bool,
   /**
-   * [Color variant](/foundation/colors#component-colors) to clarify importance and meaning of the button.
+   * [Color variant](/docs/foundation/colors#component-colors) to clarify importance and meaning of the button.
    */
   color: PropTypes.oneOf(
     ['primary', 'secondary', 'selected', 'success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark'],