@react-ui-org/react-ui 0.47.0 → 0.49.0

package/src/lib/components/Modal/ModalContent.jsx

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { withGlobalProps } from '../../provider';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { transferProps } from '../_helpers/transferProps';
+import styles from './ModalContent.scss';
+
+export const ModalContent = ({
+  children,
+  ...restProps
+}) => {
+  if (isChildrenEmpty(children)) {
+    return null;
+  }
+
+  return (
+    <div
+      {...transferProps(restProps)}
+      className={styles.root}
+    >
+      {children}
+    </div>
+  );
+};
+
+ModalContent.defaultProps = {
+  children: null,
+};
+
+ModalContent.propTypes = {
+  /**
+   * Content of the modal.
+   */
+  children: PropTypes.node,
+};
+
+export const ModalContentWithGlobalProps = withGlobalProps(ModalContent, 'ModalContent');
+
+export default ModalContentWithGlobalProps;

package/src/lib/components/Modal/ModalContent.scss

@@ -0,0 +1,5 @@
+@use "theme";
+
+.root {
+    padding: theme.$padding-y theme.$padding-x;
+}

package/src/lib/components/Modal/ModalFooter.jsx

@@ -0,0 +1,42 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { withGlobalProps } from '../../provider';
+import { transferProps } from '../_helpers/transferProps';
+import { classNames } from '../../utils/classNames';
+import { getJustifyClassName } from './_helpers/getJustifyClassName';
+import styles from './ModalFooter.scss';
+
+export const ModalFooter = ({
+  children,
+  justify,
+  ...restProps
+}) => (
+  <div
+    {...transferProps(restProps)}
+    className={classNames(
+      styles.root,
+      getJustifyClassName(justify, styles),
+    )}
+  >
+    {children}
+  </div>
+);
+
+ModalFooter.defaultProps = {
+  justify: 'center',
+};
+
+ModalFooter.propTypes = {
+  /**
+   * Content of the footer (preferably nested `Button` elements).
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Horizontal alignment (distribution) of individual buttons.
+   */
+  justify: PropTypes.oneOf(['start', 'center', 'end', 'space-between', 'stretch']),
+};
+
+export const ModalFooterWithGlobalProps = withGlobalProps(ModalFooter, 'ModalFooter');
+
+export default ModalFooterWithGlobalProps;

package/src/lib/components/Modal/ModalFooter.scss

@@ -0,0 +1,35 @@
+@use "settings";
+@use "theme";
+
+.root {
+    display: flex;
+    flex: none;
+    flex-wrap: wrap;
+    gap: theme.$footer-gap;
+    align-items: center;
+    padding: theme.$padding-y theme.$padding-x;
+    border-top: theme.$separator-width solid theme.$separator-color;
+    border-bottom-right-radius: settings.$border-radius;
+    border-bottom-left-radius: settings.$border-radius;
+    background: theme.$footer-background;
+}
+
+.isRootJustifiedToStart {
+    justify-content: flex-start;
+}
+
+.isRootJustifiedToCenter {
+    justify-content: center;
+}
+
+.isRootJustifiedToEnd {
+    justify-content: flex-end;
+}
+
+.isRootJustifiedToSpaceBetween {
+    justify-content: space-between;
+}
+
+.isRootJustifiedToStretch {
+    display: block;
+}

package/src/lib/components/Modal/ModalHeader.jsx

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {
+  withGlobalProps,
+} from '../../provider';
+import { transferProps } from '../_helpers/transferProps';
+import { classNames } from '../../utils/classNames';
+import { getJustifyClassName } from './_helpers/getJustifyClassName';
+import styles from './ModalHeader.scss';
+
+export const ModalHeader = ({
+  children,
+  justify,
+  ...restProps
+}) => (
+  <div
+    {...transferProps(restProps)}
+    className={classNames(
+      styles.root,
+      getJustifyClassName(justify, styles),
+    )}
+  >
+    {children}
+  </div>
+);
+
+ModalHeader.defaultProps = {
+  justify: 'space-between',
+};
+
+ModalHeader.propTypes = {
+  /**
+   * Content of the header (preferably ModalTitle and ModalCloseButton).
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Horizontal alignment (distribution) of individual buttons.
+   */
+  justify: PropTypes.oneOf(['start', 'center', 'end', 'space-between', 'stretch']),
+};
+
+export const ModalHeaderWithGlobalProps = withGlobalProps(ModalHeader, 'ModalHeader');
+
+export default ModalHeaderWithGlobalProps;

package/src/lib/components/Modal/ModalHeader.scss

@@ -0,0 +1,30 @@
+@use "theme";
+
+.root {
+    display: flex;
+    flex: none;
+    gap: theme.$header-gap;
+    align-items: baseline;
+    padding: theme.$padding-y theme.$padding-x;
+    border-bottom: theme.$separator-width solid theme.$separator-color;
+}
+
+.isRootJustifiedToStart {
+    justify-content: flex-start;
+}
+
+.isRootJustifiedToCenter {
+    justify-content: center;
+}
+
+.isRootJustifiedToEnd {
+    justify-content: flex-end;
+}
+
+.isRootJustifiedToSpaceBetween {
+    justify-content: space-between;
+}
+
+.isRootJustifiedToStretch {
+    display: block;
+}

package/src/lib/components/Modal/ModalTitle.jsx

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {
+  withGlobalProps,
+} from '../../provider';
+import { transferProps } from '../_helpers/transferProps';
+import styles from './ModalTitle.scss';
+
+export const ModalTitle = ({
+  children,
+  level,
+  ...restProps
+}) => {
+  const HeadingTag = `h${level}`;
+
+  return (
+    <HeadingTag
+      {...transferProps(restProps)}
+      className={styles.root}
+    >
+      {children}
+    </HeadingTag>
+  );
+};
+
+ModalTitle.defaultProps = {
+  level: 2,
+};
+
+ModalTitle.propTypes = {
+  /**
+   * Content of the header (preferably ModalTitle and ModalCloseButton).
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Optional heading level. Preferably `1` or `2` should be used, see
+   * [W3C recommendation](https://github.com/w3c/aria-practices/issues/551#issuecomment-365134527).
+   */
+  level: PropTypes.number,
+};
+
+export const ModalTitleWithGlobalProps = withGlobalProps(ModalTitle, 'ModalTitle');
+
+export default ModalTitleWithGlobalProps;

package/src/lib/components/Modal/ModalTitle.scss

@@ -0,0 +1,10 @@
+@use "settings";
+
+.root {
+    margin-block: 0;
+    font-size: settings.$title-font-size;
+
+    &:not(:last-child) {
+        margin-bottom: 0;
+    }
+}