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

package/src/components/popover/popover.stories.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Popover, Input, Button, Flex, Select } from '../../..';
+
+const options = [
+  { label: 'Option 1', value: '1' },
+  { label: 'Option 2', value: '2' },
+];
+
+const SelectForm = ({ close }) => (
+  <Flex gap="8px">
+    <Input value="Value" width="150px" small />
+    <Select options={options} value={options[0]} width="auto" small />
+    <Button colored label="Save" onClick={() => {}} small />
+    <Button label="Cancel" onClick={close} small />
+  </Flex>
+);
+
+export default {
+  title: 'Basic/Popover',
+  component: Popover,
+  args: {
+    overflowContainer: true,
+    content: <SelectForm />,
+    children: <Button label="Toggle me" />,
+  },
+  // TODO: Work out why the story requires this wrapper for the Popover to position correctly
+  decorators: [(story) => <div style={{ display: 'flex' }}>{story()}</div>],
+  parameters: {
+    docs: {
+      source: {
+        excludeDecorators: true,
+      },
+    },
+  },
+};
+
+const Template = (args) => (
+  <Popover
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args}
+  />
+);
+export const Default = Template.bind({});
+
+export const InputTrigger = Template.bind({});
+InputTrigger.args = {
+  children: <Input value="Value" width="100%" />,
+};
+
+export const CloseButton = Template.bind({});
+CloseButton.args = {
+  closeOnOutsideClick: false,
+  showCloseButton: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};

package/src/components/portal/portal.jsx

@@ -0,0 +1,16 @@
+import { useLayoutEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { createPortal } from 'react-dom';
+
+export const Portal = ({ id, children }) => {
+  const parent = document.querySelector(`#${id}`);
+  const [mounted, setMounted] = useState(false);
+  useLayoutEffect(() => {
+    if (!mounted) setMounted(true);
+  }, [id]);
+  return parent ? createPortal(children, parent) : null;
+};
+
+Portal.propTypes = {
+  id: PropTypes.string.isRequired,
+};

package/src/components/portal/portal.stories.jsx

@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Portal } from '../../..';
+
+export default {
+  title: 'Modals/Portal',
+  component: Portal,
+  args: {
+    children: <div>Portal content</div>,
+    id: 'portalContainer',
+  },
+  parameters: {
+    docs: {
+      inlineStories: false,
+    },
+  },
+};
+
+const Template = (args) => (
+  <>
+    <Portal
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...args}
+    />
+    <div id={args.id} />
+  </>
+);
+export const Default = Template.bind({});
+
+export const CreatePortal = () => {
+  const parent = document.querySelector('#root');
+  return (
+    <>
+      <div id="portalContainer" />
+      {parent && createPortal(<div>Portal content</div>, parent)}
+    </>
+  );
+};
+CreatePortal.parameters = {
+  docs: {
+    source: { type: 'code' },
+    description: {
+      story: 'How to use React `createPortal()` directly',
+    },
+  },
+};
+
+export const CreatePortalWithDynamicDOMNode = () => {
+  const parent = document.querySelector('#portalContainer');
+  const [visible, setVisible] = useState(false);
+  useEffect(() => {
+    if (!visible) setVisible(true);
+  }, []);
+  return (
+    <>
+      <div id="portalContainer" />
+      {visible && parent && createPortal(<div>Portal content</div>, parent)}
+    </>
+  );
+};
+CreatePortalWithDynamicDOMNode.parameters = {
+  docs: {
+    source: { type: 'code' },
+    description: {
+      story:
+        'This story shows how to use React `createPortal()` directly. The domNode for `createPortal()` must exist. For a dynamic container, this is not the case on the first render.',
+    },
+  },
+};

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import styles from './progress-bar.module.less';
+
+const getColor = (perct) => {
+  if (perct < 5) return styles.grey;
+  if (perct < 20) return styles.red;
+  if (perct < 45) return styles.orange;
+  if (perct < 60) return styles.yellow;
+  if (perct < 80) return styles.olive;
+  if (perct < 100) return styles.green;
+  return 'green';
+};
+
+export const ProgressBar = ({
+  width,
+  inverted,
+  colored,
+  showProgressColors,
+  percentage,
+  noLabel,
+}) => {
+  return (
+    <div style={{ width }} data-percent={percentage}>
+      <div
+        className={cx(styles.progress, inverted ? styles.inverted : '')}
+        style={{ width }}
+      >
+        <div
+          className={cx(
+            styles.bar,
+            showProgressColors
+              ? getColor(percentage)
+              : colored
+              ? styles.colored
+              : '',
+          )}
+          style={{ width: `${percentage}%` }}
+        >
+          <div className={styles.label}>{!noLabel && `${percentage}%`}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+ProgressBar.defaultProps = {
+  width: 'auto',
+  inverted: false,
+  percentage: 0,
+  colored: true,
+  showProgressColors: false,
+  noLabel: false,
+};
+
+ProgressBar.propTypes = {
+  width: PropTypes.string,
+  colored: PropTypes.bool,
+  inverted: PropTypes.bool,
+  percentage: PropTypes.number,
+  showProgressColors: PropTypes.bool,
+  noLabel: PropTypes.bool,
+};

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

@@ -0,0 +1,64 @@
+.progress {
+  position: relative;
+  display: block;
+  max-width: 100%;
+  border: none;
+  margin: 0;
+  box-shadow: none;
+  background: rgba(0, 0, 0, 0.1);
+  padding: 0;
+  border-radius: 0.28571429rem;
+  font-size: 1rem;
+
+  &.inverted {
+    background: rgba(255, 255, 255, 0.08);
+  }
+}
+
+.bar {
+  display: block;
+  line-height: 1;
+  position: relative;
+  width: 0%;
+  min-width: 2em;
+  background: #888;
+  border-radius: 0.28571429rem;
+  transition: width 0.1s ease, background-color 0.5s ease;
+  height: 1.75em;
+
+  &.grey {
+    background-color: #767676;
+  }
+  &.red {
+    background-color: #db2828;
+  }
+  &.colored,
+  &.orange {
+    background-color: #f2711c;
+  }
+  &.yellow {
+    background-color: #fbbd08;
+  }
+  &.olive {
+    background-color: #b5cc18;
+  }
+  &.green {
+    background-color: #21ba45;
+  }
+}
+
+.label {
+  white-space: nowrap;
+  position: absolute;
+  width: auto;
+  font-size: 0.92857143em;
+  top: 50%;
+  right: 0.5em;
+  left: auto;
+  bottom: auto;
+  color: rgba(255, 255, 255, 0.7);
+  text-shadow: none;
+  margin-top: -0.5em;
+  font-weight: 700;
+  text-align: left;
+}

package/src/components/progress-bar/progress-bar.stories.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ProgressBar } from '../../..';
+
+export default {
+  title: 'Progress/ProgressBar',
+  component: ProgressBar,
+  args: {
+    colored: true,
+    inverted: false,
+    noLabel: false,
+    percentage: 30,
+    showProgressColors: false,
+    width: 'auto',
+  },
+};
+
+const Template = (args) => (
+  <ProgressBar
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args}
+  />
+);
+export const Default = Template.bind({});

package/src/components/radio-button/radio-button.jsx

@@ -0,0 +1,139 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { standardizeInputs } from '../select/select.input';
+import { RadioInput } from './radio-input';
+import styles from './radio-button.module.less';
+import { DisabledContext } from '../../helpers/disabled-context';
+
+export const RadioButton = ({
+  name,
+  label: rawLabel,
+  options: rawOptions,
+  value: rawValue,
+  onChange,
+  inline,
+  disabled,
+  small,
+  //deprecated props:
+  mainLabel,
+  onClick,
+  radioButtonsData,
+  classForContainer,
+  noMargin,
+}) => {
+  const disabledContext = useContext(DisabledContext);
+
+  //----------------------------------------------------------------------------
+  // Deprecation / backwards-compatibility
+  const isDeprecated = radioButtonsData !== undefined;
+  const {
+    simpleInputs,
+    options,
+    selectedOptions: value,
+  } = isDeprecated
+    ? {
+        simpleInputs: false,
+        options: radioButtonsData,
+        selectedOptions: undefined,
+      }
+    : standardizeInputs(rawOptions, rawValue);
+  const selectedValue =
+    isDeprecated || value === undefined || value === null
+      ? undefined
+      : simpleInputs
+      ? value
+      : value.value;
+  const label = isDeprecated ? mainLabel : rawLabel;
+  //----------------------------------------------------------------------------
+
+  return (
+    <div
+      className={cx(
+        styles.wrapper,
+        inline ? styles.inline : null,
+        classForContainer === 'inline fields' ? styles.inline : null, //deprecated
+      )}
+    >
+      {mainLabel && (
+        <label className={cx(inline && styles.labelMargin)}>{label}</label>
+      )}
+      {options.map((option, index) => {
+        const selected =
+          option.checked || option.value === selectedValue || false;
+        return (
+          <RadioInput
+            key={index}
+            name={option.name || option.value} //name must be unique
+            label={option.label}
+            value={option.value}
+            selected={selected}
+            disabled={disabled || option.disabled || disabledContext}
+            small={small}
+            noMargin={noMargin}
+            onChange={
+              !option.disabled
+                ? (evt) => {
+                    if (isDeprecated) {
+                      onClick(evt.target);
+                    } else {
+                      evt.target.name = name;
+                      evt.target.value = option.value;
+                      evt.target.label = option.label;
+                      onChange(evt);
+                    }
+                  }
+                : null
+            }
+            testId={option.testId}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+RadioButton.defaultProps = {
+  name: undefined,
+  noMargin: false,
+  inline: false,
+  mainLabel: '',
+  label: '',
+  disabled: false,
+  small: false,
+  onClick: () => {},
+  onChange: () => {},
+  classForContainer: 'grouped fields', // Deprecated
+};
+
+const RadioButtonShapeDeprecated = {
+  radioButtonsData: PropTypes.arrayOf(PropTypes.object).isRequired,
+  inline: PropTypes.bool,
+  mainLabel: PropTypes.string,
+  onClick: PropTypes.func,
+  disabled: PropTypes.bool,
+  classForContainer: PropTypes.string, // Deprecated
+};
+
+export const radioOptionShape = PropTypes.shape({
+  label: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  testId: PropTypes.string,
+});
+
+const RadioButtonShape = {
+  name: PropTypes.string,
+  noMargin: PropTypes.bool,
+  label: PropTypes.string,
+  options: PropTypes.arrayOf(radioOptionShape).isRequired,
+  value: radioOptionShape,
+  inline: PropTypes.bool,
+  disabled: PropTypes.bool,
+  small: PropTypes.bool,
+  onChange: PropTypes.func,
+};
+
+RadioButton.propTypes = PropTypes.oneOfType([
+  PropTypes.shape(RadioButtonShape), //only use this for new usages
+  PropTypes.shape(RadioButtonShapeDeprecated), //deprecated Select interface
+]).isRequired;

package/src/components/radio-button/radio-button.module.less

@@ -0,0 +1,135 @@
+@import '../../style/variables.less';
+
+.wrapper {
+  &.inline {
+    display: flex;
+    align-items: center;
+
+    .radio:not(:last-child) {
+      margin-right: 16px;
+    }
+  }
+
+  .labelMargin {
+    margin-right: 10px;
+  }
+}
+
+.radio {
+  margin: 10px 0 11px 0;
+  position: relative;
+  display: block;
+  backface-visibility: hidden;
+  vertical-align: baseline;
+  font-style: normal;
+  min-height: 17px;
+  font-size: 1rem;
+  line-height: 17px;
+  min-width: 17px;
+  outline: 0px;
+
+  &.small {
+    margin: 3px 0;
+    font-size: @input_font_size_small;
+  }
+
+  &.noMargin {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  input {
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0 !important;
+    outline: 0;
+    width: 17px;
+    height: 17px;
+    z-index: -1;
+  }
+
+  label {
+    cursor: pointer;
+    position: relative;
+    display: block;
+    padding-left: 1.85714em;
+    outline: 0;
+    font-size: 1em;
+    color: var(--color-text);
+    transition: color 0.1s ease;
+
+    &:before,
+    &:after {
+      content: '';
+      position: absolute;
+      top: 1px;
+      left: 0;
+      width: 15px;
+      height: 15px;
+      line-height: 15px;
+      border-radius: 500rem;
+      transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease,
+        box-shadow 0.1s ease;
+    }
+
+    &:before {
+      background: var(--color-background-input);
+      border: 1px solid var(--color-border);
+      transform: none;
+    }
+
+    &:hover:before {
+      border-color: var(--color-border-hover);
+    }
+
+    &:after {
+      border: none;
+      transform: scale(0.46666667);
+      background-color: white;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+      opacity: 0;
+    }
+  }
+
+  input:checked ~ label {
+    &:before {
+      background-color: var(--color-background-primary);
+      border-color: transparent;
+    }
+
+    &:after {
+      opacity: 1;
+    }
+  }
+
+  &.disabled {
+    cursor: default;
+    pointer-events: none;
+
+    label {
+      color: var(--color-text-muted);
+
+      &:before {
+        background-color: var(--color-background-disabled) !important;
+      }
+    }
+
+    input:checked ~ label {
+      &:before {
+        border-color: var(--color-border);
+      }
+
+      &:after {
+        background-color: var(--color-text-faint);
+      }
+    }
+  }
+}
+
+.isInTable {
+  margin: 0;
+  position: relative;
+  top: 1px;
+}

package/src/components/radio-button/radio-button.stories.jsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import { RadioButton } from './radio-button';
+
+const options = [
+  { label: 'Aardvarks', value: 'termites' },
+  { label: 'Kangaroos', value: 'grass' },
+  { label: 'Monkeys', value: 'bananas', disabled: true },
+];
+
+export default {
+  title: 'Forms/RadioButton',
+  component: RadioButton,
+  args: {
+    options,
+    inline: false,
+    noMargin: false,
+    disabled: false,
+    small: false,
+  },
+};
+
+const Template = (args) => {
+  const [value, setValue] = useState(options[0]);
+  const handleChange = (evt) => {
+    const { value } = evt.target;
+    setValue({ value });
+  };
+  return (
+    <RadioButton
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...args}
+      value={value}
+      onChange={handleChange}
+    />
+  );
+};
+export const Default = Template.bind({});

package/src/components/radio-button/radio-input.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import cx from 'classnames';
+import styles from './radio-button.module.less';
+
+export const RadioInput = ({
+  name,
+  label,
+  value,
+  selected,
+  disabled,
+  small,
+  onChange,
+  noMargin,
+  testId,
+}) => {
+  return (
+    <div
+      className={cx(
+        styles.radio,
+        disabled ? styles.disabled : null,
+        small ? styles.small : null,
+        noMargin ? styles.noMargin : null,
+      )}
+      onClick={onChange}
+      data-testid={testId}
+    >
+      <input
+        type="radio"
+        /*
+          Don't set the name property. In certain circumstances (including
+          duplicated names), it seems confuse React into behaving like an
+          uncontrolled input. We've seen a bug where sometimes the input state
+          wouldn't update visually upon click. If we change this decision, we
+          need to understand why this happens.
+          https://stackoverflow.com/questions/63032125
+        */
+        //name={name} //name must be unique
+        value={value}
+        checked={selected}
+        onChange={() => {}}
+        disabled={disabled}
+      />
+      <label
+        //data attributes are for deprecated variant
+        data-name={name}
+        data-value={value}
+      >
+        {label}
+      </label>
+    </div>
+  );
+};