@oliasoft-open-source/react-ui-library 1.0.0

package/src/components/tooltip/tooltip-layer.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Arrow } from 'react-laag';
+import cx from 'classnames';
+import styles from './tooltip.module.less';
+
+export const TooltipLayer = ({
+  text,
+  error,
+  warning,
+  padding,
+  maxWidth,
+  fontSize,
+  layerProps,
+  arrowProps,
+}) => {
+  return (
+    <div
+      className={cx(
+        styles.tooltip,
+        error ? styles.error : warning ? styles.warning : '',
+      )}
+      {...layerProps} // eslint-disable-line react/jsx-props-no-spreading
+    >
+      <div style={{ maxWidth, fontSize, padding }}>{text}</div>
+      <Arrow
+        {...arrowProps} // eslint-disable-line react/jsx-props-no-spreading
+        size={6}
+      />
+    </div>
+  );
+};
+
+TooltipLayer.defaultProps = {
+  text: '',
+  error: false,
+  warning: false,
+  maxWidth: 'none',
+  fontSize: 'inherit',
+  padding: '4px 8px',
+  layerProps: {
+    style: {
+      position: 'fixed',
+    },
+  },
+  layerSide: 'top',
+  arrowProps: {
+    style: {
+      top: '100%',
+      bottom: null,
+      left: '50%',
+      right: null,
+      position: 'absolute',
+    },
+  },
+};
+
+TooltipLayer.propTypes = {
+  text: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.node,
+  ]),
+  error: PropTypes.bool,
+  warning: PropTypes.bool,
+  fontSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  padding: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  layerSide: PropTypes.string,
+  layerProps: PropTypes.object,
+  arrowProps: PropTypes.object,
+};

package/src/components/tooltip/tooltip.jsx

@@ -0,0 +1,108 @@
+import React, { isValidElement } from 'react';
+import PropTypes from 'prop-types';
+import ResizeObserver from 'resize-observer-polyfill';
+import { useLayer, useHover } from 'react-laag';
+import { TooltipLayer } from './tooltip-layer';
+
+export const Tooltip = ({
+  children,
+  text,
+  error,
+  placement,
+  possiblePlacements,
+  enabled,
+  warning,
+  maxWidth,
+  triggerOffset,
+  fontSize,
+  padding,
+  display,
+  flex,
+  forceOpen,
+}) => {
+  const visible = enabled && (isValidElement(text) || text.length > 0);
+
+  const [isOver, hoverProps, forceClose] = useHover({
+    delayEnter: 100,
+    delayLeave: 100,
+  });
+
+  const isOpen = !visible ? false : forceOpen ? true : isOver;
+
+  const { renderLayer, triggerProps, layerProps, arrowProps } = useLayer({
+    isOpen,
+    overflowContainer: true,
+    ResizeObserver,
+    auto: true,
+    triggerOffset,
+    placement,
+    possiblePlacements,
+    onParentClose: forceClose,
+  });
+
+  return (
+    <>
+      {isOpen &&
+        renderLayer(
+          <TooltipLayer
+            text={text}
+            error={error}
+            warning={warning}
+            padding={padding}
+            maxWidth={maxWidth}
+            fontSize={fontSize}
+            layerProps={layerProps}
+            arrowProps={arrowProps}
+          />,
+        )}
+      <span
+        {...triggerProps} // eslint-disable-line react/jsx-props-no-spreading
+        {...hoverProps} // eslint-disable-line react/jsx-props-no-spreading
+        style={{ display, flex }}
+      >
+        {children}
+      </span>
+    </>
+  );
+};
+
+Tooltip.defaultProps = {
+  text: '',
+  enabled: true,
+  error: false,
+  warning: false,
+  placement: 'top-center',
+  maxWidth: 'none',
+  triggerOffset: 12,
+  possiblePlacements: [
+    'top-center',
+    'left-center',
+    'bottom-center',
+    'right-center',
+  ],
+  fontSize: 'inherit',
+  padding: '4px 8px',
+  display: 'inline',
+  flex: 'none',
+  forceOpen: false,
+};
+
+Tooltip.propTypes = {
+  text: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.node,
+  ]),
+  error: PropTypes.bool,
+  warning: PropTypes.bool,
+  placement: PropTypes.string,
+  enabled: PropTypes.bool,
+  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  triggerOffset: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  possiblePlacements: PropTypes.array,
+  fontSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  padding: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  display: PropTypes.string,
+  flex: PropTypes.string,
+  forceOpen: PropTypes.bool,
+};

package/src/components/tooltip/tooltip.module.less

@@ -0,0 +1,28 @@
+@import '../../style/variables.less';
+
+.tooltip {
+  background: var(--color-text);
+  fill: var(--color-text);
+  z-index: @zindex_tooltip;
+  color: var(--color-background);
+  border-radius: 3px;
+
+  * {
+    color: var(--color-background);
+  }
+
+  > svg,
+  > svg > * {
+    fill: inherit !important;
+  }
+
+  &.error {
+    background: var(--color-error-500);
+    fill: var(--color-error-500);
+  }
+
+  &.warning {
+    background: var(--color-warning-500);
+    fill: var(--color-warning-500);
+  }
+}

package/src/components/tooltip/tooltip.stories.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Tooltip } from '../../..';
+
+export default {
+  title: 'Basic/Tooltip',
+  component: Tooltip,
+  args: {
+    text: 'Tooltip text',
+    error: false,
+    warning: false,
+    enabled: true,
+    placement: undefined,
+    triggerOffset: undefined,
+    fontSize: undefined,
+    padding: undefined,
+    maxWidth: undefined,
+    display: undefined,
+    children: <span>Hover over me</span>,
+  },
+};
+
+const Template = (args) => (
+  <Tooltip
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args}
+  />
+);
+export const Default = Template.bind({});
+
+export const Error = Template.bind({});
+Error.args = { error: true };
+
+export const Warning = Template.bind({});
+Warning.args = { warning: true };
+
+export const JSX = Template.bind({});
+JSX.args = {
+  text: (
+    <>
+      Select from options:
+      <ul>
+        <li>One</li>
+        <li>Two</li>
+      </ul>
+    </>
+  ),
+};
+
+export const Placement = Template.bind({});
+Placement.args = { placement: 'right' };
+
+export const Offset = Template.bind({});
+Offset.args = { triggerOffset: 30 };
+
+export const ForceOpen = Template.bind({});
+ForceOpen.args = { forceOpen: true };
+
+export const Display = Template.bind({});
+Display.args = {
+  display: 'block',
+  children: <div style={{ background: 'lightgray' }}>Block element</div>,
+};
+Display.parameters = {
+  docs: {
+    source: { type: 'code' },
+    description: {
+      story:
+        'The `Tooltip` trigger wrapper defaults to `display: inline`. If you encounter layout issues, try changing this to match its content (i.e. `display: block` for `block` elements)',
+    },
+  },
+};

package/src/components/top-bar/element/element.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import cx from 'classnames';
+import { Button } from '../../button/button';
+import { Menu } from '../../menu/menu';
+import { Link } from './link';
+import styles from '../top-bar.module.less';
+
+export const Element = ({ element }) => {
+  return (() => {
+    switch (element.type) {
+      case 'Link': {
+        return (
+          <div className={styles.item}>
+            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+            <Link
+              label={element.label}
+              url={element.url}
+              icon={element.icon}
+              onClick={element.onClick}
+              active={element.active}
+              disabled={element.disabled}
+              testId={element.testId}
+            />
+          </div>
+        );
+      }
+      case 'Button': {
+        return (
+          <div className={cx(styles.item, styles.button)}>
+            <Button
+              label={element.label}
+              colored={element.colored}
+              pill
+              disabled={element.disabled}
+              onClick={element.onClick}
+              icon={element.icon}
+              testId={element.testId}
+            />
+          </div>
+        );
+      }
+      case 'Menu': {
+        return (
+          <div className={cx(styles.item, styles.menu)}>
+            <Menu
+              height="100%"
+              menu={{
+                trigger: 'Component',
+                fullHeightTrigger: true,
+                placement: 'bottom-start',
+                component: (
+                  // eslint-disable-next-line jsx-a11y/anchor-is-valid
+                  <Link
+                    label={element.label}
+                    icon={element.icon}
+                    onClick={element.onClick}
+                  />
+                ),
+                sections: element.sections,
+              }}
+            />
+          </div>
+        );
+      }
+      case 'Component': {
+        return <div className={styles.item}>{element.component}</div>;
+      }
+      default:
+        return null;
+    }
+  })();
+};

package/src/components/top-bar/element/link.jsx

@@ -0,0 +1,29 @@
+import React, { useContext } from 'react';
+import cx from 'classnames';
+import styles from '../top-bar.module.less';
+import { DisabledContext } from '../../../helpers/disabled-context';
+
+export const Link = ({
+  label,
+  url,
+  icon,
+  onClick,
+  active,
+  disabled,
+  testId,
+}) => {
+  const disabledContext = useContext(DisabledContext);
+
+  return (
+    <a
+      className={cx(styles.link, active ? styles.active : '')}
+      href={url}
+      onClick={onClick}
+      disabled={disabled || disabledContext}
+      data-testid={testId}
+    >
+      {icon}
+      <span className={styles.label}>{label}</span>
+    </a>
+  );
+};

package/src/components/top-bar/title.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import cx from 'classnames';
+import styles from './top-bar.module.less';
+
+export const Title = ({ label, logo, url, version, onClick }) => {
+  const content = (
+    <div className={styles.title}>
+      {logo && logo}
+      {label && <span className={styles.label}>{label}</span>}
+      {version && <div className={styles.version}>{version}</div>}
+    </div>
+  );
+  return (
+    <div className={cx(styles.item, styles.brand)}>
+      {url ? (
+        <a href={url} onClick={onClick}>
+          {content}
+        </a>
+      ) : (
+        <div onClick={onClick}>{content}</div>
+      )}
+    </div>
+  );
+};

package/src/components/top-bar/top-bar.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { Warning } from './warning';
+import { Title } from './title';
+import { Element } from './element/element';
+import styles from './top-bar.module.less';
+
+export const TopBar = ({
+  title,
+  content,
+  contentRight,
+  warning,
+  height,
+  //private:
+  fixedPosition,
+}) => {
+  return (
+    <div>
+      {warning && <Warning warning={warning} />}
+      <div
+        className={cx(styles.topbar, fixedPosition ? styles.fixed : '')}
+        style={{ height }}
+      >
+        <div className={styles.left}>
+          {title && (
+            <Title
+              label={title.label}
+              logo={title.logo}
+              url={title.url}
+              version={title.version}
+              onClick={title.onClick}
+            />
+          )}
+          {content.map((element, i) => {
+            if (element) {
+              return <Element key={i} element={element} />;
+            }
+            return null;
+          })}
+        </div>
+        <div className={styles.right}>
+          {contentRight.map((element, i) => {
+            if (element) {
+              return <Element key={i} element={element} />;
+            }
+            return null;
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+TopBar.defaultProps = {
+  title: null,
+  content: [],
+  contentRight: [],
+  warning: '',
+  height: null,
+  //private props:
+  fixedPosition: true,
+};
+
+TopBar.propTypes = {
+  title: PropTypes.shape({
+    label: PropTypes.string,
+    logo: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    url: PropTypes.string,
+    onClick: PropTypes.func,
+    version: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  }),
+  content: PropTypes.array,
+  contentRight: PropTypes.array,
+  warning: PropTypes.string,
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  //private props:
+  fixedPosition: PropTypes.bool,
+};

package/src/components/top-bar/top-bar.module.less

@@ -0,0 +1,191 @@
+@import '../../style/variables.less';
+
+:root {
+  --shadow-topbar: 0 1px 2px 0 rgba(black, 0.15);
+}
+
+[data-theme='dark'] {
+  --shadow-topbar: 0 1px 2px 0 rgba(black, 0.5);
+}
+
+@topbar_padding: 1.5rem;
+
+.topbar {
+  top: 0;
+  left: 0;
+  z-index: @zindex_topbar;
+  width: 100%;
+  height: @topbar_height;
+  box-shadow: var(--shadow-topbar);
+  background: var(--color-background-raised);
+  display: flex;
+  font-size: 13px;
+
+  &.fixed {
+    position: fixed;
+  }
+
+  @media print {
+    display: none !important;
+  }
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  position: relative;
+
+  img,
+  svg {
+    max-height: 30px;
+    max-width: 300px;
+    height: auto;
+    width: auto;
+    color: var(--color-text);
+  }
+
+  .label {
+    color: var(--color-text);
+    margin-left: 5px;
+    white-space: nowrap;
+  }
+}
+
+.brand {
+  padding: 0;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.title,
+.version,
+.link {
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.version {
+  position: absolute;
+  right: 0;
+  bottom: 100%;
+  margin-bottom: 3px;
+  font-size: 10px;
+  color: var(--color-text-faint);
+}
+
+.left,
+.right {
+  display: flex;
+  min-width: 0;
+}
+
+.left {
+  margin-right: @topbar_padding;
+}
+
+.right {
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.item,
+.link {
+  align-items: center;
+  display: flex;
+}
+
+.item {
+  line-height: 1;
+  margin-left: @topbar_padding;
+  position: relative;
+  transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
+  user-select: none;
+  vertical-align: middle;
+  min-width: 0;
+
+  .right & {
+    margin-left: 0;
+    margin-right: @topbar_padding;
+  }
+
+  &.button,
+  &.menu {
+    flex-shrink: 0;
+  }
+}
+
+.label {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  display: block;
+  max-width: 100%;
+}
+
+.link {
+  text-decoration: none;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  line-height: 1;
+  max-width: 100%;
+
+  svg {
+    margin-right: 5px;
+    flex-shrink: 0;
+  }
+
+  &:hover {
+    color: var(--color-text-primary-hover);
+  }
+
+  &:active {
+    color: var(--color-text-primary-active);
+  }
+
+  &.active {
+    color: var(--color-text);
+  }
+
+  &:hover,
+  &.active {
+    background-color: transparent;
+  }
+
+  &:hover:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-bottom: 2px solid var(--color-border);
+  }
+
+  &.active:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-bottom: 2px solid var(--color-text-primary-active);
+  }
+
+  &[disabled] {
+    pointer-events: none;
+    color: var(--color-text-faint);
+  }
+}
+
+.alert {
+  background-color: var(--color-background-primary);
+  color: white;
+  text-align: center;
+  position: fixed;
+  top: 60px;
+  left: 0;
+  right: 0;
+  z-index: @zindex_topbar_alert;
+  padding: 0.75rem;
+}