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

package/src/lib/components/TextField/TextField.scss

@@ -1,102 +1,102 @@
-@use '../../styles/tools/form-fields/box-field-elements';
-@use '../../styles/tools/form-fields/box-field-layout';
-@use '../../styles/tools/form-fields/box-field-sizes';
-@use '../../styles/tools/form-fields/foundation';
-@use '../../styles/tools/form-fields/variants';
-@use '../../styles/tools/accessibility';
+@use "../../styles/tools/form-fields/box-field-elements";
+@use "../../styles/tools/form-fields/box-field-layout";
+@use "../../styles/tools/form-fields/box-field-sizes";
+@use "../../styles/tools/form-fields/foundation";
+@use "../../styles/tools/form-fields/variants";
+@use "../../styles/tools/accessibility";
 
 // Foundation
 .root {
-  @include foundation.root();
+    @include foundation.root();
 }
 
 .label {
-  @include foundation.label();
+    @include foundation.label();
 }
 
 .inputContainer {
-  @include box-field-elements.input-container();
+    @include box-field-elements.input-container();
 }
 
 .input {
-  @include box-field-elements.input();
+    @include box-field-elements.input();
 }
 
 .bottomLine {
-  @include box-field-elements.bottom-line();
+    @include box-field-elements.bottom-line();
 }
 
 .helpText,
 .validationText {
-  @include foundation.help-text();
+    @include foundation.help-text();
 }
 
 .hasRootCustomInputSize .input {
-  @include box-field-elements.input-size();
+    @include box-field-elements.input-size();
 }
 
 .isRootRequired .label {
-  @include foundation.label-required();
+    @include foundation.label-required();
 }
 
 // Variants
 .rootVariantFilled {
-  @include variants.visual(box, $variant: filled);
+    @include variants.visual(box, $variant: filled);
 }
 
 .rootVariantOutline {
-  @include variants.visual(box, $variant: outline);
+    @include variants.visual(box, $variant: outline);
 }
 
 // States
 .isRootStateInvalid {
-  @include variants.validation(invalid);
+    @include variants.validation(invalid);
 }
 
 .isRootStateValid {
-  @include variants.validation(valid);
+    @include variants.validation(valid);
 }
 
 .isRootStateWarning {
-  @include variants.validation(warning);
+    @include variants.validation(warning);
 }
 
 // Invisible label
 .isLabelHidden {
-  @include accessibility.hide-text();
+    @include accessibility.hide-text();
 }
 
 // Layouts
 .rootLayoutVertical,
 .rootLayoutHorizontal {
-  @include box-field-layout.vertical();
+    @include box-field-layout.vertical();
 }
 
 .rootLayoutHorizontal {
-  @include box-field-layout.horizontal();
+    @include box-field-layout.horizontal();
 }
 
 .isRootFullWidth {
-  @include box-field-layout.full-width();
+    @include box-field-layout.full-width();
 }
 
 .isRootInFormLayout {
-  @include box-field-layout.in-form-layout();
+    @include box-field-layout.in-form-layout();
 }
 
 .hasRootSmallInput.rootLayoutHorizontal {
-  @include box-field-layout.horizontal-with-small-input();
+    @include box-field-layout.horizontal-with-small-input();
 }
 
 // Sizes
 .rootSizeSmall {
-  @include box-field-sizes.size(small);
+    @include box-field-sizes.size(small);
 }
 
 .rootSizeMedium {
-  @include box-field-sizes.size(medium);
+    @include box-field-sizes.size(medium);
 }
 
 .rootSizeLarge {
-  @include box-field-sizes.size(large);
+    @include box-field-sizes.size(large);
 }

package/src/lib/components/Toggle/Toggle.jsx

@@ -1,8 +1,9 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import getRootValidationStateClassName from '../../helpers/getRootValidationStateClassName';
 import { withProviderContext } from '../../provider';
-import transferProps from '../../utils/transferProps';
+import { classNames } from '../../utils/classNames';
+import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
+import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
 import withForwardedRef from '../withForwardedRef';
 import styles from './Toggle.scss';
@@ -26,15 +27,15 @@ export const Toggle = ({
 
   return (
     <label
-      className={[
+      className={classNames(
         styles.root,
-        context ? styles.isRootInFormLayout : '',
+        context && styles.isRootInFormLayout,
         context && context.layout === 'horizontal' ? styles.rootLayoutHorizontal : styles.rootLayoutVertical,
-        labelPosition === 'before' ? styles.hasRootLabelBefore : '',
-        disabled ? styles.isRootDisabled : '',
-        required ? styles.isRootRequired : '',
+        labelPosition === 'before' && styles.hasRootLabelBefore,
+        disabled && styles.isRootDisabled,
+        required && styles.isRootRequired,
         getRootValidationStateClassName(validationState, styles),
-      ].join(' ')}
+      )}
       htmlFor={id}
       id={id && `${id}__label`}
     >
@@ -52,10 +53,10 @@ export const Toggle = ({
           value={value}
         />
         <div
-          className={[
+          className={classNames(
             styles.label,
-            isLabelVisible ? '' : styles.isLabelHidden,
-          ].join(' ')}
+            !isLabelVisible && styles.isLabelHidden,
+          )}
           id={id && `${id}__labelText`}
         >
           {label}

package/src/lib/components/Toggle/Toggle.scss

@@ -1,61 +1,61 @@
-@use '../../styles/tools/form-fields/foundation';
-@use '../../styles/tools/form-fields/inline-field-elements';
-@use '../../styles/tools/form-fields/inline-field-layout';
-@use '../../styles/tools/form-fields/variants';
-@use '../../styles/tools/accessibility';
+@use "../../styles/tools/form-fields/foundation";
+@use "../../styles/tools/form-fields/inline-field-elements";
+@use "../../styles/tools/form-fields/inline-field-layout";
+@use "../../styles/tools/form-fields/variants";
+@use "../../styles/tools/accessibility";
 
 // Foundation
 .root {
-  @include foundation.root();
-  @include inline-field-layout.root();
-  @include inline-field-elements.min-tap-target($type: toggle);
-  @include variants.visual(check);
+    @include foundation.root();
+    @include inline-field-layout.root();
+    @include inline-field-elements.min-tap-target($type: toggle);
+    @include variants.visual(check);
 }
 
 .label {
-  @include foundation.label();
+    @include foundation.label();
 }
 
 .field {
-  @include inline-field-layout.field();
+    @include inline-field-layout.field();
 }
 
 .input {
-  @include inline-field-elements.check-input($type: toggle);
+    @include inline-field-elements.check-input($type: toggle);
 }
 
 .helpText,
 .validationText {
-  @include foundation.help-text();
+    @include foundation.help-text();
 }
 
 .isRootRequired .label {
-  @include foundation.label-required();
+    @include foundation.label-required();
 }
 
 // States
 .isRootStateInvalid {
-  @include variants.validation(invalid);
+    @include variants.validation(invalid);
 }
 
 .isRootStateValid {
-  @include variants.validation(valid);
+    @include variants.validation(valid);
 }
 
 .isRootStateWarning {
-  @include variants.validation(warning);
+    @include variants.validation(warning);
 }
 
 // Invisible label
 .isLabelHidden {
-  @include accessibility.hide-text();
+    @include accessibility.hide-text();
 }
 
 // Layouts
 .hasRootLabelBefore {
-  @include inline-field-layout.has-label-before();
+    @include inline-field-layout.has-label-before();
 }
 
 .isRootInFormLayout {
-  @include inline-field-layout.in-form-layout();
+    @include inline-field-layout.in-form-layout();
 }

package/src/lib/components/Toolbar/Toolbar.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
+import { classNames } from '../../utils/classNames';
 import styles from './Toolbar.scss';
 
 export const Toolbar = (props) => {
@@ -46,13 +47,13 @@ export const Toolbar = (props) => {
 
   return (
     <div
-      className={[
+      className={classNames(
         styles.toolbar,
-        dense ? styles.isDense : null,
-        nowrap ? styles.isNowrap : null,
+        dense && styles.isDense,
+        nowrap && styles.isNowrap,
         alignClass(align),
         justifyClass(justify),
-      ].join(' ')}
+      )}
     >
       {children}
     </div>

package/src/lib/components/Toolbar/Toolbar.scss

@@ -1,84 +1,84 @@
 // 1. Get rid of unwanted spacing of inline elements by invocation of flex layout.
 
-@use '../../styles/tools/spacing';
-@use 'theme';
+@use "../../styles/tools/spacing";
+@use "theme";
 
 .toolbar,
 .group {
-  display: flex;
-  flex-wrap: wrap;
+    display: flex;
+    flex-wrap: wrap;
 }
 
 .toolbar {
-  @include spacing.bottom(layouts, $compensation: theme.$gap);
+    @include spacing.bottom(layouts, $compensation: theme.$gap);
 
-  margin: calc(-1 * #{theme.$gap});
+    margin: calc(-1 * #{theme.$gap});
 }
 
 .item {
-  display: flex; // 1.
-  flex: none;
-  flex-direction: column; // 1.
-  margin: theme.$gap;
+    display: flex; // 1.
+    flex: none;
+    flex-direction: column; // 1.
+    margin: theme.$gap;
 }
 
 .isAlignedToTop {
-  align-items: flex-start;
+    align-items: flex-start;
 }
 
 .isAlignedToMiddle {
-  align-items: center;
+    align-items: center;
 }
 
 .isAlignedToBottom {
-  align-items: flex-end;
+    align-items: flex-end;
 }
 
 .isAlignedToBaseline {
-  align-items: baseline;
+    align-items: baseline;
 }
 
 .isJustifiedToStart {
-  justify-content: flex-start;
+    justify-content: flex-start;
 }
 
 .isJustifiedToCenter {
-  justify-content: center;
+    justify-content: center;
 }
 
 .isJustifiedToEnd {
-  justify-content: flex-end;
+    justify-content: flex-end;
 }
 
 .isJustifiedToSpaceBetween {
-  justify-content: space-between;
+    justify-content: space-between;
 }
 
 .isNowrap {
-  flex-wrap: nowrap;
+    flex-wrap: nowrap;
 }
 
 .isNowrap > .item {
-  flex: 0 1 auto;
+    flex: 0 1 auto;
 }
 
 .isDense {
-  margin: calc(-1 * #{theme.$gap-dense});
+    margin: calc(-1 * #{theme.$gap-dense});
 }
 
 .isDense .item {
-  margin: theme.$gap-dense;
+    margin: theme.$gap-dense;
 }
 
 .isDense > .isDense {
-  margin: 0;
+    margin: 0;
 }
 
 .toolbar.isDense {
-  @include spacing.bottom(layouts, $compensation: theme.$gap-dense);
+    @include spacing.bottom(layouts, $compensation: theme.$gap-dense);
 }
 
 .toolbar:not(.isDense) > .isDense,
 .group:not(.isDense) > .isDense {
-  margin: theme.$gap-dense;
+    margin: theme.$gap-dense;
 }

package/src/lib/components/Toolbar/ToolbarGroup.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
+import { classNames } from '../../utils/classNames';
 import styles from './Toolbar.scss';
 
 export const ToolbarGroup = (props) => {
@@ -29,12 +30,12 @@ export const ToolbarGroup = (props) => {
 
   return (
     <div
-      className={[
+      className={classNames(
         styles.group,
-        dense ? styles.isDense : null,
-        nowrap ? styles.isNowrap : null,
+        dense && styles.isDense,
+        nowrap && styles.isNowrap,
         alignClass(align),
-      ].join(' ')}
+      )}
     >
       {children}
     </div>

package/src/lib/{helpers → components/_helpers}/getRootColorClassName.js

@@ -1,4 +1,4 @@
-export default (variant, styles) => {
+export const getRootColorClassName = (variant, styles) => {
   if (variant === 'primary') {
     return styles.rootColorPrimary;
   }

package/src/lib/{helpers → components/_helpers}/getRootSizeClassName.js

@@ -1,4 +1,4 @@
-export default (size, styles) => {
+export const getRootSizeClassName = (size, styles) => {
   if (size === 'small') {
     return styles.rootSizeSmall;
   }

package/src/lib/{helpers → components/_helpers}/getRootValidationStateClassName.js

@@ -1,4 +1,4 @@
-export default (validationState, styles) => {
+export const getRootValidationStateClassName = (validationState, styles) => {
   if (validationState === 'invalid') {
     return styles.isRootStateInvalid;
   }

package/src/lib/{utils → components/_helpers}/transferProps.js

@@ -1,4 +1,4 @@
-export default ({
+export const transferProps = ({
   children,
   className,
   forwardedRef,

package/src/lib/foundation.scss

@@ -7,11 +7,11 @@
 //
 // Ground-zero styles.
 
-@use 'styles/generic/box-sizing';
-@use 'normalize.css/normalize.css';
-@use 'styles/generic/forms';
-@use 'styles/generic/reset';
-@use 'styles/generic/shared';
+@use "styles/generic/box-sizing";
+@use "normalize.css/normalize.css";
+@use "styles/generic/forms";
+@use "styles/generic/reset";
+@use "styles/generic/shared";
 
 //
 // 2. Elements
@@ -19,9 +19,9 @@
 //
 // Unclassed HTML elements (type selectors).
 
-@use 'styles/elements/code';
-@use 'styles/elements/links';
-@use 'styles/elements/lists';
-@use 'styles/elements/page';
-@use 'styles/elements/rulers';
-@use 'styles/elements/small';
+@use "styles/elements/code";
+@use "styles/elements/links";
+@use "styles/elements/lists";
+@use "styles/elements/page";
+@use "styles/elements/rulers";
+@use "styles/elements/small";

package/src/lib/helpers.scss

@@ -9,7 +9,7 @@
 // General purpose helpers for common situations. They can compose multiple CSS rules to do a bit
 // more complicated tasks.
 
-@use 'styles/helpers/animation';
+@use "styles/helpers/animation";
 
 //
 // 2. Utilities
@@ -19,4 +19,4 @@
 // thing: they set a single CSS rule and use the otherwise disallowed `!important` to enforce it.
 // Also they are often responsive (can be adjusted for individual breakpoints).
 
-@use 'styles/utilities';
+@use "styles/utilities";

package/src/lib/index.js

@@ -8,14 +8,7 @@ export {
   CardBody,
   CardFooter,
 } from './components/Card';
-export { default as Center } from './components/Center';
 export { default as CheckboxField } from './components/CheckboxField';
-export {
-  CTA,
-  CTACenter,
-  CTAEnd,
-  CTAStart,
-} from './components/CTA';
 export { default as FileInputField } from './components/FileInputField';
 export {
   FormLayout,
@@ -57,3 +50,6 @@ export {
 
 // Provider
 export { RUIProvider } from './provider';
+
+// Utils
+export { classNames } from './utils/classNames';

package/src/lib/styles/_utilities.scss

@@ -1,18 +1,18 @@
-@use 'sass:map';
-@use 'sass:meta';
-@use 'settings/breakpoints' as breakpoint-settings;
-@use 'settings/utilities' as utility-settings;
-@use 'tools/breakpoint';
-@use 'tools/utilities';
+@use "sass:map";
+@use "sass:meta";
+@use "settings/breakpoints" as breakpoint-settings;
+@use "settings/utilities" as utility-settings;
+@use "tools/breakpoint";
+@use "tools/utilities";
 
 @each $breakpoint in map.keys(breakpoint-settings.$values) {
-  @include breakpoint.up($breakpoint) {
-    $infix: if(map.get(breakpoint-settings.$values, $breakpoint) == 0, '', '-#{$breakpoint}');
+    @include breakpoint.up($breakpoint) {
+        $infix: if(map.get(breakpoint-settings.$values, $breakpoint) == 0, "", "-#{$breakpoint}");
 
-    @each $key, $utility in utility-settings.$map {
-      @if meta.type-of($utility) == 'map' and (map.get($utility, responsive) == true or $infix == '') {
-        @include utilities.generate($utility, $infix);
-      }
+        @each $key, $utility in utility-settings.$map {
+            @if meta.type-of($utility) == "map" and (map.get($utility, responsive) == true or $infix == "") {
+                @include utilities.generate($utility, $infix);
+            }
+        }
     }
-  }
 }

package/src/lib/styles/elements/_code.scss

@@ -1,14 +1,14 @@
-@use 'sass:map';
-@use '../theme/code';
-@use '../theme/colors';
+@use "sass:map";
+@use "../theme/code";
+@use "../theme/colors";
 
 code,
 pre {
-  font-size: code.$font-size;
-  font-family: code.$font-family;
+    font-size: code.$font-size;
+    font-family: code.$font-family;
 }
 
 code {
-  padding: 0.15em 0.5em;
-  background-color: map.get(colors.$grays, gray-100);
+    padding: 0.15em 0.5em;
+    background-color: map.get(colors.$grays, gray-100);
 }

package/src/lib/styles/elements/_links.scss

@@ -1,12 +1,12 @@
-@use '../theme/links';
+@use "../theme/links";
 
 a {
-  text-decoration: links.$decoration;
-  color: links.$color;
+    text-decoration: links.$decoration;
+    color: links.$color;
 
-  &:hover,
-  &:focus {
-    text-decoration: links.$hover-decoration;
-    color: links.$hover-color;
-  }
+    &:hover,
+    &:focus {
+        text-decoration: links.$hover-decoration;
+        color: links.$hover-color;
+    }
 }

package/src/lib/styles/elements/_lists.scss

@@ -1,10 +1,10 @@
-@use '../theme/lists';
+@use "../theme/lists";
 
 ol,
 ul {
-  padding-left: 1.25em;
+    padding-left: 1.25em;
 }
 
 ul {
-  list-style-type: lists.$unordered-style;
+    list-style-type: lists.$unordered-style;
 }

package/src/lib/styles/elements/_page.scss

@@ -1,20 +1,20 @@
-@use '../theme/page';
-@use '../theme/typography';
+@use "../theme/page";
+@use "../theme/typography";
 
 html {
-  width: 100%;
-  height: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-size: typography.$font-size-base;
-  line-height: typography.$line-height-base;
-  font-family: typography.$font-family-base;
+    width: 100%;
+    height: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-size: typography.$font-size-base;
+    line-height: typography.$line-height-base;
+    font-family: typography.$font-family-base;
 }
 
 body {
-  width: 100%;
-  min-height: 100%;
-  font-size: 1em;
-  color: page.$color;
-  background-color: page.$background;
+    width: 100%;
+    min-height: 100%;
+    font-size: 1em;
+    color: page.$color;
+    background-color: page.$background;
 }