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

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

@@ -0,0 +1,300 @@
+@import '../../style/variables.less';
+
+@boxShadowOuter: 0 1px 2px rgba(0, 0, 0, 0.1);
+
+:root {
+  --color-background-button-default: var(--color-neutral-0);
+  --color-background-button-default-hover: var(--color-neutral-50);
+  --color-background-button-default-active: var(--color-neutral-100);
+
+  --color-background-button-primary: var(--color-primary-500);
+  --color-background-button-primary-hover: var(--color-primary-550);
+  --color-background-button-primary-active: var(--color-primary-600);
+
+  --color-background-button-success: var(--color-success-500);
+  --color-background-button-success-hover: var(--color-success-550);
+  --color-background-button-success-active: var(--color-success-600);
+
+  --color-background-button-error: var(--color-error-500);
+  --color-background-button-error-hover: var(--color-error-550);
+  --color-background-button-error-active: var(--color-error-600);
+
+  --color-border-button: rgba(black, 0.15);
+  --color-border-button-hover: rgba(black, 0.2);
+
+  --color-text-button-muted: rgba(black, 0.4);
+}
+
+html[data-theme='dark'] {
+  --color-background-button-default: var(--color-neutral-700);
+  --color-background-button-default-hover: var(--color-neutral-650);
+  --color-background-button-default-active: var(--color-neutral-600);
+
+  --color-background-button-primary: var(--color-primary-muted-500);
+  --color-background-button-primary-hover: var(--color-primary-muted-550);
+  --color-background-button-primary-active: var(--color-primary-muted-600);
+
+  --color-background-button-success: var(--color-success-muted-500);
+  --color-background-button-success-hover: var(--color-success-muted-550);
+  --color-background-button-success-active: var(--color-success-muted-600);
+
+  --color-background-button-error: var(--color-error-muted-500);
+  --color-background-button-error-hover: var(--color-error-muted-550);
+  --color-background-button-error-active: var(--color-error-muted-600);
+
+  --color-border-button: transparent;
+  --color-border-button-hover: transparent;
+
+  --color-text-button-muted: rgba(white, 0.4);
+}
+
+.button {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  outline: 0;
+  border: 1px solid var(--color-border-button);
+  vertical-align: baseline;
+  background: var(--color-background-button-default);
+  color: var(--color-text);
+  font-family: @default_font;
+  padding: @input_padding_y @input_padding_x;
+  text-transform: none;
+  text-shadow: none;
+  font-weight: 700;
+  line-height: 1em;
+  font-style: normal;
+  text-align: center;
+  text-decoration: none;
+  border-radius: @input_border_radius;
+  user-select: none;
+  transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease,
+    box-shadow 0.1s ease, background 0.1s ease;
+  max-width: 100%;
+  min-height: @input_height;
+  box-shadow: @boxShadowOuter;
+
+  &:hover {
+    background: var(--color-background-button-default-hover);
+    border-color: var(--color-border-button-hover);
+  }
+
+  &:active {
+    background: var(--color-background-button-default-active);
+    box-shadow: none;
+  }
+
+  &.active {
+    border-color: var(--color-background-button-primary);
+    color: var(--color-text-primary);
+    position: relative;
+    z-index: 2;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    position: relative;
+    z-index: 1;
+  }
+
+  .icon {
+    margin: 0 8px 0 -4px;
+
+    svg {
+      height: 14px;
+      width: 14px;
+    }
+  }
+}
+
+.iconOnly {
+  padding: 0.78571429em 0.78571429em 0.78571429em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  .icon {
+    margin: 0;
+    line-height: 0;
+  }
+}
+
+.basic {
+  color: var(--color-text-primary);
+  background: transparent;
+  box-shadow: none !important;
+  border: none !important;
+
+  &.muted {
+    color: var(--color-text-button-muted);
+  }
+
+  &:hover,
+  &:focus {
+    color: var(--color-text-primary-hover);
+    background: rgba(0, 0, 0, 0.05);
+  }
+
+  &:active,
+  &.active {
+    color: var(--color-text-primary-active);
+    background: rgba(0, 0, 0, 0.1);
+  }
+}
+
+.disabled {
+  cursor: default;
+  pointer-events: none !important;
+  color: var(--color-text-faint) !important;
+  box-shadow: none !important;
+
+  &:not(.active) {
+    &:not(.basic) {
+      background: var(--color-background-disabled) !important;
+      border: 1px solid var(--color-border) !important;
+    }
+  }
+}
+
+.small {
+  font-size: @input_font_size_small;
+  min-height: @input_height_small;
+  padding: 0 0.75rem;
+}
+
+.pill,
+.round {
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-size: 13px;
+  font-weight: bold;
+  border-radius: 19px;
+  display: inline-flex;
+  align-items: center;
+}
+
+.round {
+  padding: 0;
+  width: @input_height;
+  line-height: 1; // Fix for rendering issue on Windows
+
+  &.small {
+    width: @input_height_small;
+  }
+}
+
+.orange {
+  background-color: var(--color-background-button-primary);
+
+  &:hover,
+  &:focus {
+    background-color: var(--color-background-button-primary-hover);
+  }
+
+  &:active {
+    background-color: var(--color-background-button-primary-active);
+  }
+}
+
+.red {
+  background-color: var(--color-background-button-error);
+
+  &:hover,
+  &:focus {
+    background-color: var(--color-background-button-error-hover);
+  }
+
+  &:active {
+    background-color: var(--color-background-button-error-active);
+  }
+}
+
+.green {
+  background-color: var(--color-background-button-success);
+
+  &:hover,
+  &:focus {
+    background-color: var(--color-background-button-success-hover);
+  }
+
+  &:active {
+    background-color: var(--color-background-button-success-active);
+  }
+}
+
+.orange,
+.red,
+.green {
+  color: #fff;
+
+  // &:not(.disabled) {
+  //   border-color: transparent !important;
+  // }
+
+  &:hover,
+  &:focus {
+    color: #fff;
+  }
+
+  &:active {
+    color: #fff;
+  }
+}
+
+.inverted {
+  background-color: transparent;
+  border-color: var(--color-text);
+  box-shadow: none;
+
+  &:hover,
+  &:focus,
+  &:active {
+    box-shadow: none;
+  }
+
+  &.orange {
+    color: var(--color-background-button-primary);
+    border-color: var(--color-background-button-primary);
+  }
+
+  &.red {
+    color: var(--color-background-button-error);
+    border-color: var(--color-background-button-error);
+  }
+
+  &.green {
+    color: var(--color-background-button-success);
+    border-color: var(--color-background-button-success);
+  }
+
+  &.orange,
+  &.red,
+  &.green {
+    &:hover,
+    &:focus,
+    &:active {
+      color: white;
+      box-shadow: none;
+    }
+  }
+}
+
+.groupOrderFirst,
+.groupOrderMiddle,
+.groupOrderLast {
+  margin-right: 0;
+}
+
+.groupOrderFirst,
+.groupOrderMiddle {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.groupOrderLast,
+.groupOrderMiddle {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import { FaTrash } from 'react-icons/fa';
+import { Button } from './button';
+
+export default {
+  title: 'Forms/Button',
+  component: Button,
+  parameters: {
+    canvas: {
+      page: null,
+    },
+  },
+  argTypes: {
+    colored: {
+      control: {
+        type: 'inline-radio',
+      },
+      options: {
+        off: false,
+        primary: 'primary',
+        success: 'success',
+        danger: 'danger',
+        muted: 'muted',
+      },
+    },
+    icon: {
+      control: { type: 'inline-radio' },
+      options: {
+        off: undefined,
+        on: <FaTrash />,
+      },
+    },
+  },
+  args: {
+    label: 'Label',
+    colored: false,
+    disabled: false,
+    icon: undefined,
+    basic: false,
+  },
+};
+
+const Template = (args) => (
+  <Button
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args}
+  />
+);
+
+export const Default = Template.bind({});
+
+export const Small = Template.bind({});
+Small.args = { small: true };
+
+export const Basic = Template.bind({});
+Basic.args = { basic: true };
+
+export const WithIcon = Template.bind({});
+WithIcon.args = { icon: <FaTrash /> };
+
+export const Round = Template.bind({});
+Round.args = { round: true, icon: <FaTrash />, label: undefined };
+
+export const RoundMuted = Template.bind({});
+RoundMuted.args = {
+  round: true,
+  icon: <FaTrash />,
+  label: undefined,
+  colored: 'muted',
+  basic: true,
+};
+
+export const FullWidth = Template.bind({});
+FullWidth.args = { width: '100%' };

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

@@ -0,0 +1,140 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { Button } from '../button/button';
+import { Tooltip } from '../tooltip/tooltip';
+import styles from './button-group.module.less';
+import { isStringNumberOrNode } from '../../helpers/types';
+import { DisabledContext } from '../../helpers/disabled-context';
+
+export class ButtonGroup extends React.PureComponent {
+  onClick = (evt, key, value, label, disabledContextValue, disabledButton) => {
+    evt.preventDefault();
+    evt.stopPropagation();
+    if (this.props.disabled || disabledButton || disabledContextValue) return;
+    this.props.onSelected(key, value, label);
+  };
+
+  renderIcon = (icon) => {
+    if (icon) {
+      return <i className={cx('icon', icon)} />;
+    }
+  };
+
+  renderButtons = () => {
+    const buttons = this.props.items;
+    return buttons.map((button, i) => {
+      const type = Array.isArray(button) ? 'array' : typeof button;
+      const groupOrder =
+        i === 0 ? 'first' : i === buttons.length - 1 ? 'last' : 'middle';
+      const label =
+        type === 'string'
+          ? button
+          : type === 'object'
+          ? button.label
+          : type === 'array'
+          ? button[1]
+          : null;
+      const value =
+        type === 'string'
+          ? button
+          : type === 'object'
+          ? button.value
+          : type === 'array'
+          ? button[0]
+          : null;
+      const key = type === 'object' ? button.key : value;
+      const hidden = type === 'object' ? button.hidden : false;
+      const icon = type === 'object' ? button.icon : false;
+      const active =
+        type === 'object'
+          ? key === this.props.value
+          : value === this.props.value;
+      const { error, maxTooltipWidth, testId, tooltip, warning } = button;
+      if (!hidden) {
+        return (
+          <DisabledContext.Consumer key={i}>
+            {(disabledContextValue) => (
+              <Tooltip
+                key={i}
+                error={!!error}
+                warning={!!warning}
+                text={tooltip || error || warning}
+                maxWidth={maxTooltipWidth}
+                display="block"
+                enabled={
+                  (tooltip && isStringNumberOrNode(tooltip)) ||
+                  (error && isStringNumberOrNode(error)) ||
+                  (warning && isStringNumberOrNode(warning)) ||
+                  false
+                }
+                placement="bottom-center"
+              >
+                <Button
+                  active={active}
+                  basic={this.props.basic}
+                  disabled={this.props.disabled || button.disabled}
+                  groupOrder={groupOrder}
+                  icon={icon}
+                  label={label}
+                  onClick={(evt) =>
+                    this.onClick(
+                      evt,
+                      key,
+                      value,
+                      label,
+                      disabledContextValue,
+                      button.disabled,
+                    )
+                  }
+                  small={this.props.small}
+                  testId={testId}
+                />
+              </Tooltip>
+            )}
+          </DisabledContext.Consumer>
+        );
+      }
+    });
+  };
+
+  renderHeader = () => {
+    if (this.props.header) {
+      return <label className={styles.label}>{this.props.header}</label>;
+    }
+  };
+
+  render() {
+    const { testId } = this.props;
+    return (
+      <div>
+        <div>
+          {this.renderHeader()}
+          <div className={styles.buttonGroup} data-testid={testId}>
+            {this.renderButtons()}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+ButtonGroup.defaultProps = {
+  basic: false,
+  items: [],
+  header: '',
+  onSelected: () => {},
+  small: false,
+  value: '',
+  testId: undefined,
+};
+
+ButtonGroup.propTypes = {
+  basic: PropTypes.bool, // Deprecated?
+  items: PropTypes.array,
+  header: PropTypes.string,
+  onSelected: PropTypes.func,
+  small: PropTypes.bool,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  testId: PropTypes.string,
+};

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

@@ -0,0 +1,24 @@
+@import '../../style/variables.less';
+
+.label {
+  display: inline-block;
+  width: auto;
+  margin: 0 0.85714286em 0 0;
+  vertical-align: baseline;
+  font-size: 0.92857143em;
+  font-weight: 700;
+  color: var(--color-text);
+  text-transform: none;
+}
+
+.buttonGroup {
+  display: inline-flex;
+  flex-direction: row;
+  // font-size: 0;
+  vertical-align: baseline;
+  margin: 0 0.25em 0 0;
+
+  > *:not(:last-child) {
+    margin-right: -1px;
+  }
+}

package/src/components/button-group/button-group.stories-data.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { FaQuestion, FaSortAmountDown, FaTrash } from 'react-icons/fa';
+
+export const buttonsArrayOfObjects = [
+  { key: 0, label: 'Aardvarks', value: 'termites' },
+  { key: 1, label: 'Kangaroos', value: 'grass' },
+  { key: 2, label: 'Monkeys', value: 'bananas' },
+  { key: 3, label: 'Possums', value: 'slugs', hidden: true },
+  { key: 4, label: 'Pandas', value: 'bamboo', disabled: true },
+];
+
+export const buttonsWithIcons = [
+  {
+    key: 0,
+    label: 'Sort',
+    value: 'upload',
+    icon: <FaSortAmountDown />,
+  },
+  {
+    key: 1,
+    label: 'Delete',
+    value: 'delete',
+    icon: <FaTrash />,
+  },
+  {
+    key: 2,
+    label: 'Help',
+    value: 'help',
+    icon: <FaQuestion />,
+  },
+];
+
+export const buttonsArrayOfStrings = ['One', 'Two', 'Three'];
+
+export const buttonsArrayOfArrays = [
+  ['first_item', 'One'],
+  ['second_item', 'Two'],
+  ['third_item', 'Three'],
+];
+
+export const buttonsWithTooltips = [
+  {
+    key: 0,
+    label: 'Aardvarks',
+    value: 'termites',
+    tooltip: 'Eats 50k termites / night',
+  },
+  {
+    key: 1,
+    label: 'Kangaroos',
+    value: 'grass',
+    tooltip: <span>Babies are called joeys</span>,
+  },
+  {
+    key: 2,
+    label: 'Monkeys',
+    value: 'bananas',
+    warning: 'A bit cheeky',
+  },
+  {
+    key: 3,
+    label: 'Pandas',
+    value: 'bamboo',
+    disabled: true,
+    tooltip: 'Extinct',
+  },
+];

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { useArgs } from '@storybook/addons';
+import { ButtonGroup } from './button-group';
+import * as storyData from './button-group.stories-data';
+
+export default {
+  title: 'Forms/ButtonGroup',
+  component: ButtonGroup,
+  args: {
+    disabled: false,
+    items: storyData.buttonsArrayOfObjects,
+    value: 0,
+    small: false,
+    testId: undefined,
+    onSelected: () => {},
+  },
+};
+
+const Template = (args) => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt) => {
+    updateArgs({ value: evt });
+  };
+
+  return (
+    <ButtonGroup
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...args}
+      onSelected={handleChange}
+    />
+  );
+};
+export const Default = Template.bind({});
+
+export const Icons = Template.bind({});
+Icons.args = { items: storyData.buttonsWithIcons };
+
+export const Tooltips = Template.bind({});
+Tooltips.args = { items: storyData.buttonsWithTooltips };
+
+export const Disabled = Template.bind({});
+Disabled.args = { disabled: true };
+
+export const ArrayOfStrings = Template.bind({});
+ArrayOfStrings.args = { items: storyData.buttonsArrayOfStrings };
+ArrayOfStrings.parameters = {
+  docs: {
+    description: {
+      story: 'For simple cases when button key, label and value are the same.',
+    },
+  },
+};
+
+export const ArrayOfArrays = Template.bind({});
+ArrayOfArrays.args = { items: storyData.buttonsArrayOfArrays };
+ArrayOfArrays.parameters = {
+  docs: {
+    description: {
+      story:
+        'Avoid this deprecated legacy usage (still supported, but may be removed in future).',
+    },
+  },
+};