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

package/src/lib/utils/classNames.js

@@ -0,0 +1,8 @@
+export const classNames = (...classes) => {
+  const filteredClassNames = classes.filter(
+    (className) => typeof className === 'string'
+    && className.trim().length > 0,
+  );
+
+  return filteredClassNames.length > 0 ? filteredClassNames.join(' ') : undefined;
+};

package/src/lib/components/CTA/CTA.jsx

@@ -1,60 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withProviderContext } from '../../provider';
-import styles from './CTA.scss';
-
-export const CTA = (props) => {
-  const {
-    align,
-    children,
-  } = props;
-
-  const alignClass = (value) => {
-    if (value === 'top') {
-      return styles.isAlignedToTop;
-    }
-
-    if (value === 'middle') {
-      return styles.isAlignedToMiddle;
-    }
-
-    if (value === 'bottom') {
-      return styles.isAlignedToBottom;
-    }
-
-    return styles.isAlignedToBaseline;
-  };
-
-  return (
-    <div
-      className={[
-        styles.root,
-        alignClass(align),
-      ].join(' ')}
-    >
-      {children}
-    </div>
-  );
-};
-
-CTA.defaultProps = {
-  align: 'baseline',
-};
-
-CTA.propTypes = {
-  /**
-   * Vertical alignment of CTA elements.
-   */
-  align: PropTypes.oneOf(['top', 'middle', 'bottom', 'baseline']),
-  /**
-   * Nested elements. Supported types are:
-   * * `CTAStart`
-   * * `CTACenter`
-   * * `CTAEnd`
-   */
-  children: PropTypes.node.isRequired,
-};
-
-export const CTAWithContext = withProviderContext(CTA, 'CTA');
-
-export default CTAWithContext;

package/src/lib/components/CTA/CTA.scss

@@ -1,71 +0,0 @@
-@use '../../styles/tools/breakpoint';
-@use '../../styles/tools/spacing';
-
-$_breakpoint: lg;
-$_spacing: spacing.of(1);
-$_column-gap: spacing.of(3);
-
-.root {
-  @include spacing.bottom(layouts, $compensation: $_spacing);
-
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  margin: calc(-1 * #{$_spacing});
-
-  @include breakpoint.up($_breakpoint) {
-    display: grid;
-    grid-template: 'start center end' auto #{'/'} 1fr auto 1fr;
-    grid-column-gap: $_column-gap;
-    margin: 0;
-  }
-}
-
-.start,
-.center,
-.end {
-  margin: $_spacing;
-
-  @include breakpoint.up($_breakpoint) {
-    margin: 0;
-  }
-}
-
-.start {
-  flex-basis: 100%;
-
-  @include breakpoint.up($_breakpoint) {
-    grid-area: start;
-    justify-self: start;
-  }
-}
-
-.center {
-  @include breakpoint.up($_breakpoint) {
-    grid-area: center;
-    justify-self: center;
-  }
-}
-
-.end {
-  @include breakpoint.up($_breakpoint) {
-    grid-area: end;
-    justify-self: end;
-  }
-}
-
-.isAlignedToTop {
-  align-items: start;
-}
-
-.isAlignedToMiddle {
-  align-items: center;
-}
-
-.isAlignedToBottom {
-  align-items: end;
-}
-
-.isAlignedToBaseline {
-  align-items: baseline;
-}

package/src/lib/components/CTA/CTACenter.jsx

@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withProviderContext } from '../../provider';
-import styles from './CTA.scss';
-
-export const CTACenter = (props) => {
-  const {
-    children,
-  } = props;
-
-  return (
-    <div className={styles.center}>
-      {children}
-    </div>
-  );
-};
-
-CTACenter.propTypes = {
-  /**
-   * Content of the center element.
-   */
-  children: PropTypes.node.isRequired,
-};
-
-export const CTACenterWithContext = withProviderContext(CTACenter, 'CTACenter');
-
-export default CTACenterWithContext;

package/src/lib/components/CTA/CTAEnd.jsx

@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withProviderContext } from '../../provider';
-import styles from './CTA.scss';
-
-export const CTAEnd = (props) => {
-  const {
-    children,
-  } = props;
-
-  return (
-    <div className={styles.end}>
-      {children}
-    </div>
-  );
-};
-
-CTAEnd.propTypes = {
-  /**
-   * Content of the end element.
-   */
-  children: PropTypes.node.isRequired,
-};
-
-export const CTAEndWithContext = withProviderContext(CTAEnd, 'CTAEnd');
-
-export default CTAEndWithContext;

package/src/lib/components/CTA/CTAStart.jsx

@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withProviderContext } from '../../provider';
-import styles from './CTA.scss';
-
-export const CTAStart = (props) => {
-  const {
-    children,
-  } = props;
-
-  return (
-    <div className={styles.start}>
-      {children}
-    </div>
-  );
-};
-
-CTAStart.propTypes = {
-  /**
-   * Content of the start element.
-   */
-  children: PropTypes.node.isRequired,
-};
-
-export const CTAStartWithContext = withProviderContext(CTAStart, 'CTAStart');
-
-export default CTAStartWithContext;

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

@@ -1,119 +0,0 @@
----
-name: CTA
-menu: 'Layouts'
-route: /components/cta
----
-
-# CTA
-
-The responsive CTA layout holds an action at the center and two additional
-elements on sides.
-
-import {
-  Playground,
-  Props,
-} from 'docz'
-import { Placeholder } from '../../../docs/_components/Placeholder/Placeholder'
-import { CTA } from './CTA'
-import { CTACenter } from './CTACenter'
-import { CTAEnd } from './CTAEnd'
-import { CTAStart } from './CTAStart'
-
-## Basic Usage
-
-To implement the CTA component, you need to import it first:
-
-```js
-import { CTA } from '@react-ui-org/react-ui';
-```
-
-And use it:
-
-<Playground>
-  <Placeholder bordered>
-    <CTA>
-      <CTAStart>
-        <Placeholder bordered>
-          Start
-        </Placeholder>
-      </CTAStart>
-      <CTACenter>
-        <Placeholder bordered>
-          Center
-        </Placeholder>
-      </CTACenter>
-      <CTAEnd>
-        <Placeholder bordered>
-          End
-        </Placeholder>
-      </CTAEnd>
-    </CTA>
-  </Placeholder>
-</Playground>
-
-See [API](#api) for all available options.
-
-## General Guidelines
-
-- The CTA (call to action) layout is designed for an **action placed at the
-  center** of its parent and two optional side elements. It works perfectly
-  especially in composition with a load-more button.
-
-- Place rather **a few smaller elements** into the layout, so they fit the
-  screen even at the smallest size. For complex layouts and a lot of actions,
-  consider using the [Toolbar](/components/toolbar) layout.
-
-📐 On screen sizes smaller than 66 em (the `lg`
-[breakpoint](/foundation/breakpoints)), the start element expands over the full
-width of its parent. Please resize your browser rather than the playground to
-see this work.
-
-## Vertical Alignment
-
-There are four options of vertical alignment: baseline (default), top, middle,
-and bottom.
-
-<Playground>
-  <Placeholder bordered>
-    <CTA align="bottom">
-      <CTAStart>
-        <Placeholder bordered>
-          Start
-        </Placeholder>
-      </CTAStart>
-      <CTACenter>
-        <Placeholder bordered>
-          Center<br />
-          Element
-        </Placeholder>
-      </CTACenter>
-      <CTAEnd>
-        <Placeholder bordered>
-          End
-        </Placeholder>
-      </CTAEnd>
-    </CTA>
-  </Placeholder>
-</Playground>
-
-## API
-
-<Props table of={CTA} />
-
-### CTAStart
-
-The start element of the CTA layout.
-
-<Props table of={CTAStart} />
-
-### CTACenter
-
-The center element of the CTA layout.
-
-<Props table of={CTACenter} />
-
-### CTAEnd
-
-The end element of the CTA layout.
-
-<Props table of={CTAEnd} />

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

@@ -1,4 +0,0 @@
-export { default as CTA } from './CTA';
-export { default as CTACenter } from './CTACenter';
-export { default as CTAEnd } from './CTAEnd';
-export { default as CTAStart } from './CTAStart';

package/src/lib/components/Center/Center.jsx

@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withProviderContext } from '../../provider';
-import styles from './Center.scss';
-
-export const Center = ({ children }) => (
-  <div className={styles.root}>
-    <div>
-      {children}
-    </div>
-  </div>
-);
-
-Center.defaultProps = {
-  children: null,
-};
-
-Center.propTypes = {
-  /**
-   * The content to be centered.
-   */
-  children: PropTypes.node,
-};
-
-export const CenterWithContext = withProviderContext(Center, 'Center');
-
-export default CenterWithContext;

package/src/lib/components/Center/Center.scss

@@ -1,7 +0,0 @@
-.root {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}

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

@@ -1,52 +0,0 @@
----
-name: Center
-menu: 'Layouts'
-route: /components/center
----
-
-# Center
-
-The Center layout aligns content both horizontally and vertically.
-
-import {
-  Playground,
-  Props,
-} from 'docz'
-import { Placeholder } from '../../../docs/_components/Placeholder/Placeholder'
-import { Center } from './Center'
-
-## Basic Usage
-
-To implement the Center component, you need to import it first:
-
-```js
-import { Center } from '@react-ui-org/react-ui';
-```
-
-And use it:
-
-<Playground>
-  <Placeholder height="200px" bordered>
-    <Center>
-      <Placeholder bordered>
-        Look, I&apos;m centered!
-      </Placeholder>
-    </Center>
-  </Placeholder>
-</Playground>
-
-See [API](#api) for all available options.
-
-## General Guidelines
-
-- The Center takes up all **available horizontal space and expands vertically**
-  according to the length of its content. Depending on your layout, you may need
-  to define the height of its parent to see the vertical alignment work.
-
-- The Center layout uses `flexbox` for alignment. You may need to define the
-  desired width of your centered content because it will be shrunk to the
-  smallest possible width by default.
-
-## API
-
-<Props table of={Center} />

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

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

package/src/lib/components/Link/Link.jsx

@@ -1,45 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import transferProps from '../../utils/transferProps';
-import { withProviderContext } from '../../provider';
-import styles from './Link.scss';
-
-export const Link = ({
-  children,
-  href,
-  id,
-  ...restProps
-}) => (
-  <a
-    {...transferProps(restProps)}
-    href={href}
-    className={styles.root}
-    id={id}
-  >
-    {children}
-  </a>
-);
-
-Link.defaultProps = {
-  children: null,
-  id: undefined,
-};
-
-Link.propTypes = {
-  /**
-   * Content of the link.
-   */
-  children: PropTypes.node,
-  /**
-   * Link's `href` attribute.
-   */
-  href: PropTypes.string.isRequired,
-  /**
-   * ID of the root HTML element.
-   */
-  id: PropTypes.string,
-};
-
-export const LinkWithContext = withProviderContext(Link, 'Link');
-
-export default LinkWithContext;

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

@@ -1,11 +0,0 @@
-@use 'theme';
-
-.root {
-  text-decoration: theme.$link-text-decoration;
-  color: theme.$link-color;
-
-  &:hover {
-    text-decoration: theme.$link-hover-text-decoration;
-    color: theme.$link-hover-color;
-  }
-}

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

@@ -1,85 +0,0 @@
----
-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

@@ -1,4 +0,0 @@
-$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

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

package/src/lib/components/List/List.jsx

@@ -1,71 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withProviderContext } from '../../provider';
-import styles from './List.scss';
-
-export const List = ({
-  align,
-  autoWidth,
-  children,
-}) => {
-  if (!children) {
-    return null;
-  }
-
-  let alignClass = '';
-
-  if (align === 'start') {
-    alignClass = styles.alignStart;
-  } else if (align === 'end') {
-    alignClass = styles.alignEnd;
-  }
-
-  let autoWidthClass = '';
-
-  if (autoWidth) {
-    autoWidthClass = styles.isAutoWidth;
-  }
-
-  return (
-    <div
-      className={`
-        ${styles.root}
-        ${autoWidthClass}
-      `.trim()}
-    >
-      <ul
-        className={`
-          ${styles.list}
-          ${alignClass}
-        `.trim()}
-      >
-        {children}
-      </ul>
-    </div>
-  );
-};
-
-List.defaultProps = {
-  align: 'start',
-  autoWidth: false,
-  children: null,
-};
-
-List.propTypes = {
-  /**
-   * Horizontal alignment of list items.
-   */
-  align: PropTypes.oneOf(['start', 'end']),
-  /**
-   * If `true`, the list items will take up only as much horizontal space as necessary.
-   */
-  autoWidth: PropTypes.bool,
-  /**
-   * Individual ListItems.
-   */
-  children: PropTypes.node,
-};
-
-export const ListWithContext = withProviderContext(List, 'List');
-
-export default ListWithContext;