@oliasoft-open-source/react-ui-library 2.4.8 → 3.0.0

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

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

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

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

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

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

@@ -1,63 +0,0 @@
-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).',
-    },
-  },
-};