@react-ui-org/react-ui 0.42.1 → 0.44.1

package/src/lib/components/Link/README.mdx

@@ -0,0 +1,85 @@
+---
+name: Link
+menu: 'Actions'
+route: /components/link
+---
+
+# Link
+
+import {
+  Playground,
+  Props,
+} from 'docz'
+import Placeholder from '../../../docs/_components/Placeholder'
+import { Link } from './Link'
+
+Link allow users to follow navigation.
+
+## Basic Usage
+
+To implement the Link component, you need to import it first:
+
+```js
+import { Link } from '@react-ui-org/react-ui';
+```
+
+And use it:
+
+<Playground>
+  <Link href="/contribute/guidelines">How can I contribute to React UI?</Link>
+</Playground>
+
+See [API](#api) for all available options.
+
+## General Guidelines
+
+**Avoid using links for actions**, use a [Button](/components/button)
+instead. This is because users expect navigation to happen when clicking on
+something what looks like a link.
+
+## Block-Level Content
+
+Besides text, link can contain block-level elements too.
+
+<Playground>
+  <Link href="/contribute/guidelines">
+    <Placeholder>Block-level element wrapped with link</Placeholder>
+  </Link>
+</Playground>
+
+## Custom Routing
+
+It's common to use custom function for routing within SPAs. Use the
+`onClick` option to provide such function.
+
+<Playground>
+  <Link
+    href="/contribute/guidelines"
+    onClick={(event) => {
+      event.preventDefault();
+      window.location = event.currentTarget.getAttribute('href');
+    }}
+  >
+    This link is controlled by custom function
+  </Link>
+</Playground>
+
+## API
+
+In addition to the options below, you can specify [React synthetic events] or
+any custom HTML attributes that do not interfere with the API, and they will be
+passed to the `a` HTML element. This enables making the component interactive
+and helps improve its accessibility.
+
+<Props table of={Link} />
+
+## Theming
+
+| Custom Property                      | Description                                  |
+|--------------------------------------|----------------------------------------------|
+| `--rui-Link__color`                  | Text color                                   |
+| `--rui-Link__text-decoration`        | Text decoration, e.g. underline              |
+| `--rui-Link--hover__color`           | Text color on hover                          |
+| `--rui-Link--hover__text-decoration` | Text decoration on hover                     |
+
+[React synthetic events]: https://reactjs.org/docs/events.html

package/src/lib/components/Link/_theme.scss

@@ -0,0 +1,4 @@
+$link-color: var(--rui-Link__color);
+$link-text-decoration: var(--rui-Link__text-decoration);
+$link-hover-color: var(--rui-Link--hover__color);
+$link-hover-text-decoration: var(--rui-Link--hover__text-decoration);

package/src/lib/components/Link/index.js

@@ -0,0 +1 @@
+export { default } from './Link';

package/src/lib/components/{layout/List → List}/List.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../../provider';
+import { withProviderContext } from '../../provider';
 import styles from './List.scss';
 
 export const List = ({

package/src/lib/components/{layout/List → List}/List.scss

@@ -1,5 +1,5 @@
-@use '../../../styles/tools/reset';
-@use '../../../styles/tools/spacing';
+@use '../../styles/tools/reset';
+@use '../../styles/tools/spacing';
 @use 'theme';
 
 .root {

package/src/lib/components/{layout/List → List}/ListItem.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../../provider';
+import { withProviderContext } from '../../provider';
 import styles from './List.scss';
 
 export const ListItem = ({ children }) => {

package/src/lib/components/{layout/List → List}/README.mdx

@@ -1,7 +1,7 @@
 ---
 name: List
 menu: 'Layouts'
-route: /components/layout/list
+route: /components/list
 ---
 
 # List
@@ -10,7 +10,7 @@ import {
   Playground,
   Props,
 } from 'docz'
-import { Placeholder } from '../../../../docs/_components/Placeholder/Placeholder'
+import { Placeholder } from '../../../docs/_components/Placeholder/Placeholder'
 import { List } from './List'
 import { ListItem } from './ListItem'
 
@@ -49,7 +49,7 @@ See [API](#api) for all available options.
   **not** try to put any custom HTML or React components directly into the
   List layout without wrapping it with the ListItem first.
 
-- For forms, use rather the [FormLayout](/components/layout/form-layout)
+- For forms, use rather the [FormLayout](/components/form-layout)
   component which is designed specifically for that purpose.
 
 ## List Alignment

package/src/lib/components/{layout/Media → Media}/Media.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../../provider';
+import { withProviderContext } from '../../provider';
 import styles from './Media.scss';
 
 export const Media = (props) => {
@@ -17,7 +17,9 @@ export const Media = (props) => {
 
 Media.propTypes = {
   /**
-   * Slot for MediaBody and MediaObject components.
+   * Nested elements. Supported types are:
+   * * `MediaBody`
+   * * `MediaObject`
    */
   children: PropTypes.node.isRequired,
 };

package/src/lib/components/{layout/Media → Media}/Media.scss

@@ -1,4 +1,4 @@
-@use '../../../styles/tools/spacing';
+@use '../../styles/tools/spacing';
 
 .media {
   @include spacing.bottom(layouts);

package/src/lib/components/{layout/Media → Media}/MediaBody.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../../provider';
+import { withProviderContext } from '../../provider';
 import styles from './Media.scss';
 
 export const MediaBody = ({ children }) => (

package/src/lib/components/{layout/Media → Media}/MediaObject.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../../provider';
+import { withProviderContext } from '../../provider';
 import styles from './Media.scss';
 
 export const MediaObject = ({ children }) => (

package/src/lib/components/{layout/Media → Media}/README.mdx

@@ -1,7 +1,7 @@
 ---
 name: Media
 menu: 'Layouts'
-route: /components/layout/media
+route: /components/media
 ---
 
 # Media
@@ -10,7 +10,7 @@ import {
   Playground,
   Props,
 } from 'docz'
-import { Placeholder } from '../../../../docs/_components/Placeholder/Placeholder'
+import { Placeholder } from '../../../docs/_components/Placeholder/Placeholder'
 import { Media } from './Media'
 import { MediaBody } from './MediaBody'
 import { MediaObject } from './MediaObject'

package/src/lib/components/{ui/Modal → Modal}/Modal.jsx

@@ -1,12 +1,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { createPortal } from 'react-dom';
-import transferProps from '../../../utils/transferProps';
-import { withProviderContext } from '../../../provider';
+import transferProps from '../../utils/transferProps';
+import { withProviderContext } from '../../provider';
 import {
   Toolbar,
   ToolbarItem,
-} from '../../layout/Toolbar';
+} from '../Toolbar';
 import Button from '../Button';
 import ScrollView from '../ScrollView';
 import styles from './Modal.scss';
@@ -54,18 +54,18 @@ export class Modal extends React.Component {
   keyPressHandler(e) {
     const {
       actions,
-      closeHandler,
+      onClose,
     } = this.props;
 
-    if (e.keyCode === 27 && closeHandler) {
-      closeHandler();
+    if (e.keyCode === 27 && onClose) {
+      onClose();
     }
 
     if (e.keyCode === 13 && e.target.nodeName !== 'BUTTON') {
       const submitAction = actions.find((action) => action.type === 'submit');
 
       if (submitAction && !submitAction.disabled) {
-        submitAction.clickHandler(e);
+        submitAction.onClick(e);
       }
     }
   }
@@ -74,8 +74,8 @@ export class Modal extends React.Component {
     const {
       actions,
       children,
-      closeHandler,
       id,
+      onClose,
       position,
       scrollView,
       size,
@@ -147,8 +147,8 @@ export class Modal extends React.Component {
         className={styles.backdrop}
         id={id}
         onClick={(e) => {
-          if (closeHandler) {
-            closeHandler(e);
+          if (onClose) {
+            onClose(e);
           }
         }}
         role="presentation"
@@ -171,11 +171,11 @@ export class Modal extends React.Component {
             >
               {title}
             </h3>
-            {closeHandler && (
+            {onClose && (
               <button
                 type="button"
                 className={styles.close}
-                onClick={closeHandler}
+                onClick={onClose}
                 title={translations.close}
                 {...(id && { id: `${id}__closeModalHeaderButton` })}
               >
@@ -184,29 +184,29 @@ export class Modal extends React.Component {
             )}
           </div>
           {modalBody()}
-          {(actions.length || closeHandler) && (
+          {(actions.length || onClose) && (
             <div className={styles.footer}>
               <Toolbar justify="center" dense>
                 {actions.map((action) => (
                   <ToolbarItem key={action.label}>
                     <Button
                       {...transferProps(action)}
-                      clickHandler={action.clickHandler}
                       color={action.color}
                       disabled={action.disabled}
+                      feedbackIcon={action.feedbackIcon}
+                      forwardedRef={this.submitButtonRef}
                       id={action.id || undefined}
                       label={action.label}
-                      loadingIcon={action.loadingIcon}
-                      forwardedRef={this.submitButtonRef}
+                      onClick={action.onClick}
                       type="button"
                     />
                   </ToolbarItem>
                 ))}
-                {closeHandler && (
+                {onClose && (
                   <ToolbarItem>
                     <Button
-                      clickHandler={closeHandler}
                       label={translations.close}
+                      onClick={onClose}
                       priority="flat"
                       {...(id && { id: `${id}__closeModalFooterButton` })}
                     />
@@ -234,8 +234,8 @@ export class Modal extends React.Component {
 Modal.defaultProps = {
   actions: [],
   autoFocus: true,
-  closeHandler: null,
   id: undefined,
+  onClose: null,
   portalId: null,
   position: 'center',
   scrollView: (<ScrollView
@@ -251,12 +251,12 @@ Modal.propTypes = {
    * Actions to be rendered in modal footer.
    */
   actions: PropTypes.arrayOf(PropTypes.shape({
-    clickHandler: PropTypes.func.isRequired,
     color: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
     disabled: PropTypes.bool,
+    feedbackIcon: PropTypes.node,
     id: PropTypes.string,
     label: PropTypes.string.isRequired,
-    loadingIcon: PropTypes.node,
+    onClick: PropTypes.func.isRequired,
   })),
   /**
    * If `true`, focus the first action in the footer when the modal is opened.
@@ -267,15 +267,16 @@ Modal.propTypes = {
    */
   children: PropTypes.node.isRequired,
   /**
-   * If a function is provided, the close buttons will be displayed.
+   * ID of the root HTML element. It also serves as a base for nested elements:
+   * * `<ID>__content`
+   * * `<ID>__closeModalHeaderButton`
+   * * `<ID>__closeModalFooterButton`
    */
-  closeHandler: PropTypes.func,
+  id: PropTypes.string,
   /**
-   * ID of the root HTML element. It also serves as a prefix for the element holding the content of
-   * the modal and for the close buttons: `<ID>__content`, `<ID>__closeModalHeaderButton`,
-   * `<ID>__closeModalFooterButton`.
+   * If a function is provided, the close buttons will be displayed.
    */
-  id: PropTypes.string,
+  onClose: PropTypes.func,
   /**
    * If set, the modal is rendered in the React Portal with that ID.
    */

package/src/lib/components/{ui/Modal → Modal}/Modal.scss

@@ -1,9 +1,9 @@
 @use 'sass:map';
-@use '../../../styles/theme/typography';
-@use '../../../styles/tools/accessibility';
-@use '../../../styles/tools/breakpoint';
-@use '../../../styles/tools/reset';
-@use '../../../styles/tools/spacing';
+@use '../../styles/theme/typography';
+@use '../../styles/tools/accessibility';
+@use '../../styles/tools/breakpoint';
+@use '../../styles/tools/reset';
+@use '../../styles/tools/spacing';
 @use 'settings';
 @use 'theme';
 

package/src/lib/components/{ui/Modal → Modal}/README.mdx

@@ -1,7 +1,7 @@
 ---
 name: Modal
-menu: 'UI'
-route: /components/ui/modal
+menu: 'Miscellaneous'
+route: /components/modal
 ---
 
 # Modal
@@ -34,20 +34,20 @@ And use it:
     return (
       <>
         <Button
-          clickHandler={() => setModalOpen(true)}
           label="Launch modal"
+          onClick={() => setModalOpen(true)}
           priority="outline"
         />
         <div>
           {modalOpen && (
             <Modal
-              title="Warning"
               actions={[{
-                clickHandler: () => setModalOpen(false),
-                label: 'Delete',
                 color: 'danger',
+                label: 'Delete',
+                onClick: () => setModalOpen(false),
               }]}
-              closeHandler={() => setModalOpen(false)}
+              onClose={() => setModalOpen(false)}
+              title="Warning"
             >
               <p>
                 Do you really want to delete the user <code>admin</code>?
@@ -96,48 +96,48 @@ Modals of any size automatically shrink when they cannot fit the screen width.
     return (
       <>
         <Button
-          clickHandler={() => {
+          label="Launch small modal"
+          onClick={() => {
             setModalSize('small');
             setModalOpen(true);
           }}
-          label="Launch small modal"
           priority="outline"
         />
         <Button
-          clickHandler={() => {
+          label="Launch medium modal"
+          onClick={() => {
             setModalSize('medium');
             setModalOpen(true);
           }}
-          label="Launch medium modal"
           priority="outline"
         />
         <Button
-          clickHandler={() => {
+          label="Launch large modal"
+          onClick={() => {
             setModalSize('large');
             setModalOpen(true);
           }}
-          label="Launch large modal"
           priority="outline"
         />
         <Button
-          clickHandler={() => {
+          label="Launch fullscreen modal"
+          onClick={() => {
             setModalSize('fullscreen');
             setModalOpen(true);
           }}
-          label="Launch fullscreen modal"
           priority="outline"
         />
         <div>
           {modalOpen && (
             <Modal
-              title="Delete the user?"
               actions={[{
-                clickHandler: () => setModalOpen(false),
-                label: 'Delete',
                 color: 'danger',
+                label: 'Delete',
+                onClick: () => setModalOpen(false),
               }]}
-              closeHandler={() => setModalOpen(false)}
+              onClose={() => setModalOpen(false)}
               size={modalSize}
+              title="Delete the user?"
             >
               <p>
                 Do you really want to delete the user <code>admin</code>?
@@ -155,7 +155,7 @@ On top of that, the modal is able to adjust to the width of its content.
 
 👉 Please note the auto width may not function correctly in combination with
 other auto layout mechanisms, e.g. the auto-width
-[FormLayout](/components/layout/form-layout#label-width). It's just too much
+[FormLayout](/components/form-layout#label-width). It's just too much
 magic that doesn't work together yet 🎩.
 
 <Playground>
@@ -164,21 +164,21 @@ magic that doesn't work together yet 🎩.
     return (
       <>
         <Button
-          clickHandler={() => setModalOpen(true)}
           label="Launch auto-width modal"
+          onClick={() => setModalOpen(true)}
           priority="outline"
         />
         <div>
           {modalOpen && (
             <Modal
-              title="Delete the user?"
               actions={[{
-                clickHandler: () => setModalOpen(false),
-                label: 'Delete',
                 color: 'danger',
+                label: 'Delete',
+                onClick: () => setModalOpen(false),
               }]}
-              closeHandler={() => setModalOpen(false)}
+              onClose={() => setModalOpen(false)}
               size="auto"
+              title="Delete the user?"
             >
               <p>
                 Do you really want to delete the user <code>admin</code>?
@@ -203,32 +203,32 @@ Modal can be aligned either to top or center of the screen.
     return (
       <>
         <Button
-          clickHandler={() => {
+          label="Launch modal at center"
+          onClick={() => {
             setModalPosition('center');
             setModalOpen(true);
           }}
-          label="Launch modal at center"
           priority="outline"
         />
         <Button
-          clickHandler={() => {
+          label="Launch modal at top"
+          onClick={() => {
             setModalPosition('top');
             setModalOpen(true);
           }}
-          label="Launch modal at top"
           priority="outline"
         />
         <div>
           {modalOpen && (
             <Modal
-              title="Delete the user?"
               actions={[{
-                clickHandler: () => setModalOpen(false),
+                onClick: () => setModalOpen(false),
                 label: 'Delete',
                 color: 'danger',
               }]}
-              closeHandler={() => setModalOpen(false)}
+              onClose={() => setModalOpen(false)}
               position={modalPosition}
+              title="Delete the user?"
             >
               <p>
                 Do you really want to delete the user <code>admin</code>?
@@ -248,7 +248,7 @@ When modals become too long for the user's viewport or device, they scroll
 independent of the page itself.
 
 The inner implementation of body scrolling uses a partially
-[customizable](#api) instance of the [ScrollView](/components/ui/scroll-view)
+[customizable](#api) instance of the [ScrollView](/components/scroll-view)
 component.
 
 <Playground>
@@ -258,33 +258,33 @@ component.
     return (
       <>
         <Button
-          clickHandler={() => {
+          label="Launch modal with scrolling body"
+          onClick={() => {
             setModalScrollView(true);
             setModalOpen(true);
           }}
-          label="Launch modal with scrolling body"
           priority="outline"
         />
         <Button
-          clickHandler={() => {
+          label="Launch scrolling modal"
+          onClick={() => {
             setModalScrollView(false);
             setModalOpen(true);
           }}
-          label="Launch scrolling modal"
           priority="outline"
         />
         <div>
           {modalOpen && (
             <Modal
-              title="Modal with long content"
               actions={[{
-                clickHandler: () => setModalOpen(false),
                 label: 'OK',
+                onClick: () => setModalOpen(false),
               }]}
               autoFocus={false}
-              closeHandler={() => setModalOpen(false)}
+              onClose={() => setModalOpen(false)}
               scrollView={modalScrollView ? undefined : null}
               size="small"
+              title="Modal with long content"
             >
               <p>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
@@ -380,8 +380,8 @@ to prevent interaction. That's where blocking modals may come handy.
     return (
       <>
         <Button
-          clickHandler={() => setModalOpen(true)}
           label="Launch blocking modal"
+          onClick={() => setModalOpen(true)}
           priority="outline"
         />
         <div>
@@ -393,8 +393,8 @@ to prevent interaction. That's where blocking modals may come handy.
                 Don&apos;t turn off the device!
               </p>
               <Button
-                clickHandler={() => setModalOpen(false)}
                 label="Close the demo"
+                onClick={() => setModalOpen(false)}
                 priority="flat"
               />
             </Modal>

package/src/lib/components/{ui/Modal → Modal}/_settings.scss

@@ -1,8 +1,8 @@
 @use 'sass:map';
-@use '../../../styles/settings/z-indexes';
-@use '../../../styles/theme/borders';
-@use '../../../styles/theme/typography';
-@use '../../../styles/tools/spacing';
+@use '../../styles/settings/z-indexes';
+@use '../../styles/theme/borders';
+@use '../../styles/theme/typography';
+@use '../../styles/tools/spacing';
 
 $padding-x: spacing.of(5);
 $padding-y: spacing.of(3);