@react-ui-org/react-ui 0.57.0 → 0.59.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-ui-org/react-ui",
   "description": "React UI is a themeable UI library for React apps.",
-  "version": "0.57.0",
+  "version": "0.59.0",
   "keywords": [
     "react",
     "ui",
@@ -31,6 +31,17 @@
   "engines": {
     "node": ">=20"
   },
+  "devEngines": {
+    "runtime": {
+      "name": "node",
+      "version": "22.x",
+      "onFail": "error"
+    },
+    "packageManager": {
+      "name": "npm",
+      "onFail": "error"
+    }
+  },
   "scripts": {
     "build": "webpack --mode=production && webpack --mode=development",
     "copy": "npm run copy:css && npm run copy:js",
@@ -45,7 +56,7 @@
     "precopy": "rm -rf dist && mkdir dist",
     "prepublishOnly": "npm run build",
     "start": "webpack --watch --mode=development",
-    "stylelint": "stylelint \"src/**/*.scss\" --config stylelint.config.js",
+    "stylelint": "stylelint \"src/**/*.{css,scss}\" \"!src/docs/_assets/generated/**\" --config stylelint.config.js",
     "test": "npm run jest"
   },
   "dependencies": {
@@ -65,10 +76,11 @@
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
     "@babel/register": "^7.24.6",
+    "@happy-dom/jest-environment": "^16.6.0",
     "@stylistic/stylelint-config": "^1.0.1",
     "@svgr/webpack": "^8.1.0",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^16.0.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@visionappscz/eslint-config-visionapps": "^1.7.0",
     "@visionappscz/stylelint-config": "^4.0.0",
@@ -86,7 +98,6 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
     "markdownlint-cli2": "^0.13.0",
     "mini-css-extract-plugin": "^2.9.0",
     "postcss": "^8.4.39",

package/src/components/Alert/Alert.jsx

@@ -1,11 +1,9 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import {
-  RUIContext,
-  withGlobalProps,
-} from '../../provider';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { withGlobalProps } from '../../providers/globalProps';
+import { TranslationsContext } from '../../providers/translations';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import styles from './Alert.module.scss';
 
@@ -17,7 +15,7 @@ export const Alert = ({
   onClose,
   ...restProps
 }) => {
-  const { translations } = useContext(RUIContext);
+  const translations = useContext(TranslationsContext);
 
   return (
     <div
@@ -71,9 +69,9 @@ Alert.propTypes = {
   children: PropTypes.node.isRequired,
   /**
    * Color variant to clarify importance and meaning of the alert. Implements
-   * [Feedback and Neutral color collections](/docs/foundation/collections#colors).
+   * [Feedback color collection](/docs/foundation/collections#colors).
    */
-  color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
+  color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note']),
   /**
    * Optional element to be displayed next to the alert body.
    */

package/src/components/Alert/Alert.module.scss

@@ -25,8 +25,8 @@
         padding: theme.$padding;
     }
 
-    .close,
-    .icon {
+    .icon,
+    .close {
         height: settings.$min-height;
         color: var(--rui-local-foreground-color);
     }
@@ -46,7 +46,6 @@
         line-height: settings.$line-height;
     }
 
-    .message a,
     .message strong {
         font-weight: theme.$emphasis-font-weight;
         color: var(--rui-local-foreground-color);
@@ -73,6 +72,7 @@
             $variant-name: "color",
             $variant-value: $color,
             $properties: settings.$themeable-properties,
+            $inherit-link-color: true,
         );
     }
 }

package/src/components/Alert/README.md

@@ -41,6 +41,8 @@ Success alerts confirm that an operation has been processed successfully.
 ```docoff-react-preview
 <Alert color="success">
   <strong>Success:</strong> Settings have been successfully saved.
+  {' '}
+  <TextLink href="/" label="Undo" />
 </Alert>
 ```
 
@@ -53,7 +55,7 @@ suggest an action to resolve the problem.
 <Alert color="warning">
   <strong>Warning:</strong> Your credit card is going to expire soon.
   {' '}
-  <a href="/">Update my payment options</a>
+  <TextLink href="/" label="Update my payment options" />
 </Alert>
 ```
 
@@ -68,7 +70,7 @@ problem.
   <strong>Error:</strong> Cannot connect to the server. Is your internet
   connection working fine?
   {' '}
-  <a href="/">Try again</a>
+  <TextLink href="/" label="Try again" />
 </Alert>
 ```
 
@@ -80,6 +82,8 @@ This kind of alert can be used to display helpful information.
 <Alert color="help">
   <strong>Help:</strong> You should choose a password you don&apos;t use
   anywhere else.
+  {' '}
+  <TextLink href="/" label="Help me choose" />
 </Alert>
 ```
 
@@ -90,6 +94,8 @@ Another common, informative alert.
 ```docoff-react-preview
 <Alert color="info">
   <strong>Info:</strong> This feature depends on user&apos;s OS preferences.
+  {' '}
+  <TextLink href="/" label="Open preferences" />
 </Alert>
 ```
 
@@ -100,28 +106,8 @@ Neutral informative alert.
 ```docoff-react-preview
 <Alert>
   <strong>Note:</strong> This feature may not be available in all regions.
-</Alert>
-```
-
-### Light
-
-Light alert variant.
-
-```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.
-
-```docoff-react-preview
-<Alert color="dark">
-  <strong>Dark alert:</strong> Stands out on light backgrounds.
+  {' '}
+  <TextLink href="/" label="Show list of regions" />
 </Alert>
 ```
 
@@ -190,14 +176,14 @@ helps to improve its accessibility.
 
 ### Common Theming Options
 
-| Custom Property                                      | Description                                                  |
-|------------------------------------------------------|--------------------------------------------------------------|
-| `--rui-Alert__padding`                               | Padding between border and message                           |
-| `--rui-Alert__font-weight`                           | Message font weight                                          |
-| `--rui-Alert__border-width`                          | Border width                                                 |
-| `--rui-Alert__border-radius`                         | Corner radius                                                |
-| `--rui-Alert__emphasis__font-weight`                 | Font weight of text emphasised with `<strong>`               |
-| `--rui-Alert__stripe__width`                         | Width of the border at the start of the Alert                |
+| Custom Property                      | Description                                    |
+|--------------------------------------|------------------------------------------------|
+| `--rui-Alert__padding`               | Padding between border and message             |
+| `--rui-Alert__font-weight`           | Message font weight                            |
+| `--rui-Alert__border-width`          | Border width                                   |
+| `--rui-Alert__border-radius`         | Corner radius                                  |
+| `--rui-Alert__emphasis__font-weight` | Font weight of text emphasised with `<strong>` |
+| `--rui-Alert__stripe__width`         | Width of the border at the start of the Alert  |
 
 ### Theming Variants
 

package/src/components/Alert/_settings.scss

@@ -1,4 +1,3 @@
-@use "sass:list";
 @use "sass:map";
 @use "../../styles/settings/collections";
 @use "../../styles/theme/typography";
@@ -8,5 +7,5 @@ $font-size: map.get(typography.$font-size-values, 1);
 $line-height: typography.$line-height-base;
 $min-height: calc(#{$font-size} * #{$line-height} + 2 * #{theme.$padding});
 
-$colors: list.join(collections.$feedback-colors, collections.$neutral-colors);
+$colors: collections.$feedback-colors;
 $themeable-properties: color, foreground-color, background-color;

package/src/components/Badge/Badge.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { withGlobalProps } from '../../providers/globalProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import { getRootPriorityClassName } from '../_helpers/getRootPriorityClassName';
 import styles from './Badge.module.scss';

package/src/components/Button/Button.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withGlobalProps } from '../../provider';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { withGlobalProps } from '../../providers/globalProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import { getRootPriorityClassName } from '../_helpers/getRootPriorityClassName';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';

package/src/components/ButtonGroup/ButtonGroup.jsx

@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
 import React, {
   useMemo,
 } from 'react';
-import { withGlobalProps } from '../../provider';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { withGlobalProps } from '../../providers/globalProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { getRootPriorityClassName } from '../_helpers/getRootPriorityClassName';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './ButtonGroup.module.scss';

package/src/components/Card/Card.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { withGlobalProps } from '../../providers/globalProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import styles from './Card.module.scss';
 
@@ -18,7 +18,7 @@ export const Card = ({
     {...transferProps(restProps)}
     className={classNames(
       styles.root,
-      getRootColorClassName(color, styles),
+      color && getRootColorClassName(color, styles),
       dense && styles.isRootDense,
       raised && styles.isRootRaised,
       disabled && styles.isRootDisabled,
@@ -29,7 +29,7 @@ export const Card = ({
 );
 
 Card.defaultProps = {
-  color: 'light',
+  color: undefined,
   dense: false,
   disabled: false,
   raised: false,
@@ -45,9 +45,9 @@ Card.propTypes = {
   children: PropTypes.node.isRequired,
   /**
    * Color to clarify importance and meaning of the card. Implements
-   * [Feedback and Neutral color collections](/docs/foundation/collections#colors).
+   * [Feedback color collection](/docs/foundation/collections#colors).
    */
-  color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
+  color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note']),
   /**
    * Make the card more compact.
    */

package/src/components/Card/Card.module.scss

@@ -12,9 +12,9 @@
         flex-direction: column;
         min-width: 0; // 1.
         color: var(--rui-local-color);
-        border: theme.$border-width solid var(--rui-local-border-color);
+        border: theme.$border-width solid var(--rui-local-border-color, transparent);
         border-radius: theme.$border-radius;
-        background-color: var(--rui-local-background-color);
+        background-color: var(--rui-local-background-color, theme.$background-color);
     }
 
     .body {
@@ -34,18 +34,19 @@
         box-shadow: theme.$raised-box-shadow;
     }
 
+    .isRootDisabled {
+        background-color: theme.$disabled-background-color;
+        opacity: theme.$disabled-opacity;
+    }
+
     @each $color in settings.$colors {
         @include collections.generate-class(
             $prefix: "rui-",
             $component-name: "Card",
             $variant-name: "color",
             $variant-value: $color,
+            $inherit-link-color: true,
             $properties: settings.$themeable-properties,
         );
     }
-
-    .isRootDisabled {
-        background-color: theme.$disabled-background-color;
-        opacity: theme.$disabled-opacity;
-    }
 }

package/src/components/Card/CardBody.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
-import { transferProps } from '../../utils/transferProps';
+import { withGlobalProps } from '../../providers/globalProps';
+import { transferProps } from '../../helpers/transferProps';
 import styles from './Card.module.scss';
 
 export const CardBody = ({

package/src/components/Card/CardFooter.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
-import { transferProps } from '../../utils/transferProps';
+import { transferProps } from '../../helpers/transferProps';
+import { withGlobalProps } from '../../providers/globalProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './Card.module.scss';
 

package/src/components/Card/README.md

@@ -148,12 +148,14 @@ for card content.
 ## Color Variants
 
 To cover all possible needs of your project, Card is available in colors from
-[Feedback and Neutral color collections](/docs/foundation/collections#colors).
+[Feedback color collection](/docs/foundation/collections#colors).
 
 ```docoff-react-preview
 <Card color="success">
   <CardBody>
     Hello! I&apos;m success variant of card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" color="success" />
@@ -162,6 +164,8 @@ To cover all possible needs of your project, Card is available in colors from
 <Card color="warning">
   <CardBody>
     Hello! I&apos;m warning variant of card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" color="warning" />
@@ -170,6 +174,8 @@ To cover all possible needs of your project, Card is available in colors from
 <Card color="danger">
   <CardBody>
     Hello! I&apos;m danger variant of card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" color="danger" />
@@ -178,6 +184,8 @@ To cover all possible needs of your project, Card is available in colors from
 <Card color="help">
   <CardBody>
     Hello! I&apos;m help variant of card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" color="help" />
@@ -186,6 +194,8 @@ To cover all possible needs of your project, Card is available in colors from
 <Card color="info">
   <CardBody>
     Hello! I&apos;m info variant of card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" color="info" />
@@ -194,27 +204,13 @@ To cover all possible needs of your project, Card is available in colors from
 <Card color="note">
   <CardBody>
     Hello! I&apos;m note variant of card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" color="note" />
   </CardFooter>
 </Card>
-<Card>
-  <CardBody>
-    Hello! I&apos;m light (default) variant of card.
-  </CardBody>
-  <CardFooter>
-    <Button label="Read more" priority="outline" color="dark" />
-  </CardFooter>
-</Card>
-<Card color="dark">
-  <CardBody>
-    Hello! I&apos;m dark variant of card.
-  </CardBody>
-  <CardFooter>
-    <Button label="Read more" priority="outline" color="light" />
-  </CardFooter>
-</Card>
 ```
 
 ## States
@@ -228,6 +224,8 @@ its interactive elements to disallow user's interaction.
 <Card disabled>
   <CardBody>
     Hello! I&apos;m a disabled card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" disabled />
@@ -236,6 +234,8 @@ its interactive elements to disallow user's interaction.
 <Card disabled raised>
   <CardBody>
     Hello! I&apos;m a disabled raised card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" disabled />
@@ -244,6 +244,8 @@ its interactive elements to disallow user's interaction.
 <Card color="success" disabled>
   <CardBody>
     Hello! I&apos;m a disabled success variant of card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" color="success" disabled />
@@ -292,6 +294,7 @@ Separate your card actions with CardFooter. See
 | `--rui-Card__padding`                                | Padding shared by card header, body and footer               |
 | `--rui-Card__border-width`                           | Border width                                                 |
 | `--rui-Card__border-radius`                          | Corner radius                                                |
+| `--rui-Card__background-color`                       | Card background color                                        |
 | `--rui-Card--dense__padding`                         | Padding of dense card                                        |
 | `--rui-Card--raised__box-shadow`                     | Box shadow of raised card                                    |
 | `--rui-Card--disabled__background-color`             | Card background color in disabled state                      |

package/src/components/Card/_settings.scss

@@ -1,5 +1,4 @@
-@use "sass:list";
 @use "../../styles/settings/collections";
 
-$colors: list.join(collections.$feedback-colors, collections.$neutral-colors);
+$colors: collections.$feedback-colors;
 $themeable-properties: color, border-color, background-color;

package/src/components/Card/_theme.scss

@@ -1,6 +1,7 @@
 $padding: var(--rui-Card__padding);
 $border-width: var(--rui-Card__border-width);
 $border-radius: var(--rui-Card__border-radius);
+$background-color: var(--rui-Card__background-color);
 
 $dense-padding: var(--rui-Card--dense__padding);
 $raised-box-shadow: var(--rui-Card--raised__box-shadow);

package/src/components/CheckboxField/CheckboxField.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withGlobalProps } from '../../provider';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { withGlobalProps } from '../../providers/globalProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { FormLayoutContext } from '../FormLayout';
 import styles from './CheckboxField.module.scss';
@@ -15,6 +15,7 @@ export const CheckboxField = React.forwardRef((props, ref) => {
     isLabelVisible,
     label,
     labelPosition,
+    renderAsRequired,
     required,
     validationState,
     validationText,
@@ -30,7 +31,7 @@ export const CheckboxField = React.forwardRef((props, ref) => {
         context && context.layout === 'horizontal' ? styles.isRootLayoutHorizontal : styles.isRootLayoutVertical,
         labelPosition === 'before' && styles.hasRootLabelBefore,
         disabled && styles.isRootDisabled,
-        required && styles.isRootRequired,
+        (renderAsRequired || required) && styles.isRootRequired,
         getRootValidationStateClassName(validationState, styles),
       )}
       htmlFor={id}
@@ -82,6 +83,7 @@ CheckboxField.defaultProps = {
   id: undefined,
   isLabelVisible: true,
   labelPosition: 'after',
+  renderAsRequired: false,
   required: false,
   validationState: null,
   validationText: null,
@@ -120,7 +122,11 @@ CheckboxField.propTypes = {
    */
   labelPosition: PropTypes.oneOf(['before', 'after']),
   /**
-   * If `true`, the input will be required.
+   * If `true`, the input will be rendered as if it was required.
+   */
+  renderAsRequired: PropTypes.bool,
+  /**
+   * If `true`, the input will be made and rendered as required, regardless of the `renderAsRequired` prop.
    */
   required: PropTypes.bool,
   /**