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

package/src/components/message/message.module.less

@@ -1,114 +0,0 @@
-@import '../../style/variables.less';
-
-:root {
-  --color-border-message: rgba(black, 0.1);
-}
-
-html[data-theme='dark'] {
-  --color-border-message: transparent;
-}
-
-@line_height: 20px;
-@line_spacing: 3px;
-
-.container {
-  padding: 10px 14px;
-  border-radius: 4px;
-  display: inline-flex;
-  align-items: flex-start;
-  line-height: @line_height;
-  flex-wrap: wrap;
-  overflow-y: auto;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  border: 1px solid var(--color-border-message);
-
-  &::-webkit-scrollbar {
-    width: 0px;
-    background: transparent;
-  }
-
-  &.block {
-    display: flex;
-  }
-
-  &.info {
-    color: var(--color-text-info);
-    background-color: var(--color-background-info);
-  }
-
-  &.success {
-    color: var(--color-text-success);
-    background-color: var(--color-background-success);
-  }
-
-  &.warning {
-    color: var(--color-text-warning);
-    background-color: var(--color-background-warning);
-  }
-
-  &.error {
-    color: var(--color-text-error);
-    background-color: var(--color-background-error);
-  }
-}
-
-.content {
-  flex: 1;
-  min-width: 0;
-}
-
-.heading {
-  font-weight: bold;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  font-size: 0.9rem;
-  line-height: @line_height;
-  margin-bottom: @line_spacing;
-}
-
-.icon,
-.dismiss {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: @line_height;
-}
-
-.icon {
-  margin-right: 12px;
-}
-
-.dismiss {
-  margin-left: 12px;
-  color: var(--color-text);
-
-  &.absolute {
-    position: absolute;
-    top: 10px;
-    right: 14px;
-  }
-}
-
-.legendToggle,
-.dismiss {
-  opacity: 0.4;
-
-  &:hover {
-    opacity: 0.8;
-    cursor: pointer;
-  }
-
-  &:active {
-    opacity: 1;
-  }
-}
-
-.legendToggle {
-  margin-top: @line_spacing;
-}
-
-.detailsText {
-  margin-top: @line_spacing;
-  word-break: break-word;
-}

package/src/components/message/message.stories.jsx

@@ -1,84 +0,0 @@
-import { useArgs } from '@storybook/addons';
-import React from 'react';
-import { Message } from '../../..';
-
-const message = {
-  visible: true,
-  heading: undefined,
-  content: 'Here is some info',
-  type: 'Info',
-  withDismiss: false,
-  icon: false,
-  details: undefined,
-  maxHeight: undefined,
-};
-
-export default {
-  title: 'Basic/Message',
-  component: Message,
-  args: {
-    ...message,
-  },
-  argTypes: {
-    type: {
-      control: {
-        type: 'inline-radio',
-      },
-      options: ['Info', 'Error', 'Warning', 'Success'],
-    },
-    heading: {
-      control: { type: 'text' },
-    },
-    details: {
-      control: { type: 'text' },
-    },
-  },
-};
-
-const Template = (args) => {
-  const [_, updateArgs] = useArgs();
-
-  const handleClose = () => {
-    updateArgs({ visible: false });
-    setTimeout(() => {
-      updateArgs({ visible: true });
-    }, 1000);
-  };
-
-  return (
-    <Message
-      message={{
-        ...args,
-        onClose: handleClose,
-      }}
-    />
-  );
-};
-
-export const Default = Template.bind({});
-
-export const Heading = Template.bind({});
-Heading.args = { heading: 'Message Heading' };
-
-export const Icon = Template.bind({});
-Icon.args = { icon: true };
-
-export const Details = Template.bind({});
-Details.args = {
-  details:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at mi ac quam condimentum blandit at sit amet lectus. Nullam volutpat erat maximus, venenatis nisl sed, aliquam libero.',
-};
-
-export const FullWidth = Template.bind({});
-FullWidth.args = { width: '100%' };
-
-export const FixedWidth = Template.bind({});
-FixedWidth.args = { width: '300px' };
-
-export const MaxHeight = Template.bind({});
-MaxHeight.args = {
-  maxHeight: '100px',
-  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '.repeat(
-    20,
-  ),
-};

package/src/components/modal/modal.jsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { Portal } from '../portal/portal';
-import styles from './modal.module.less';
-
-const Wrapper = ({ children }) => (
-  <div className={cx(styles.wrapper)}>{children}</div>
-);
-
-const Content = ({ children, width, centered }) => {
-  return (
-    <div
-      className={cx(styles.contentContainer, centered ? styles.centered : '')}
-      style={{ maxWidth: width }}
-    >
-      {children}
-    </div>
-  );
-};
-
-export const Modal = ({ children, visible, centered, width }) => {
-  return (
-    <>
-      <Portal id="modalContainer">
-        {visible ? (
-          <Wrapper>
-            <Content width={width} centered={centered}>
-              {children}
-            </Content>
-          </Wrapper>
-        ) : null}
-      </Portal>
-      <div id="modalContainer" />
-    </>
-  );
-};
-
-Modal.defaultProps = {
-  visible: false,
-  centered: false,
-  width: '100%',
-};
-
-Modal.propTypes = {
-  children: PropTypes.node.isRequired,
-  visible: PropTypes.bool,
-  centered: PropTypes.bool,
-  width: PropTypes.string,
-};

package/src/components/modal/modal.module.less

@@ -1,39 +0,0 @@
-@import '../../style/variables.less';
-
-.wrapper {
-  z-index: @zindex_modal;
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  background: rgba(0, 0, 0, 0.8);
-  padding: 30px;
-  overflow-x: hidden;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-}
-
-.contentContainer {
-  color: var(--color-background-raised);
-  max-height: 100%;
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-
-  button:not(:last-child) {
-    margin-right: 12px;
-  }
-}
-
-.centered > * {
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
-.newLine {
-  white-space: 'pre-wrap';
-}

package/src/components/modal/modal.stories.jsx

@@ -1,162 +0,0 @@
-import { useArgs } from '@storybook/addons';
-import React from 'react';
-import {
-  Modal,
-  Button,
-  Dialog,
-  Popover,
-  Input,
-  InputGroup,
-  Field,
-  Menu,
-  Select,
-  Spacer,
-  Tooltip,
-} from '../../..';
-
-export default {
-  title: 'Modals/Modal',
-  component: Modal,
-  args: {
-    visible: true,
-    centered: true,
-    width: '300px',
-    heading: 'Are you sure?',
-    content: <>This will complete the transaction</>,
-    footer: (
-      <>
-        <Button label="Okay" colored onClick={() => {}} />
-        <Button label="Cancel" onClick={() => {}} />
-      </>
-    ),
-    onClose: () => {},
-  },
-  parameters: {
-    docs: {
-      inlineStories: false,
-      iframeHeight: 400,
-    },
-  },
-};
-
-const Template = (args) => {
-  const [{ visible, centered, ...dialogProps }, updateArgs] = useArgs();
-  const toggleModal = () => {
-    updateArgs({ visible: !visible });
-  };
-  return (
-    <>
-      <Modal visible={visible} centered={centered}>
-        <Dialog
-          dialog={{
-            ...dialogProps,
-            onClose: toggleModal,
-          }}
-        />
-      </Modal>
-      <Button label="Open Modal" onClick={toggleModal} />
-    </>
-  );
-};
-
-export const Default = Template.bind({});
-
-export const Centered = Template.bind({});
-Centered.args = { centered: true };
-
-export const LineBreak = Template.bind({});
-LineBreak.args = { content: ['This is a', 'new line!'] };
-
-export const Scroll = Template.bind({});
-Scroll.args = {
-  scroll: true,
-  content: (
-    <div>{'Example modal content goes here lorem ipsum. '.repeat(100)}</div>
-  ),
-};
-
-export const FullWidth = Template.bind({});
-FullWidth.args = {
-  width: '100%',
-  content: (
-    <div>{'Example modal content goes here lorem ipsum. '.repeat(100)}</div>
-  ),
-};
-
-export const NoContentPadding = Template.bind({});
-NoContentPadding.args = { contentPadding: 0 };
-
-export const WithPopoverLayers = Template.bind({});
-WithPopoverLayers.args = {
-  content: (
-    <>
-      <Tooltip text="Tooltip text">Hover for tooltip</Tooltip>
-      <Spacer />
-      <Field label="Custom Select" helpText="Select an animal">
-        <Select
-          name="example"
-          options={[
-            'Aardvarks',
-            'Kangaroos',
-            'Monkeys',
-            'Possums',
-            'Gorilla',
-            'Puma',
-            'Patagonian Mara',
-            'Tarsier',
-            'Koala',
-            'Panda',
-            'Red Panda',
-            'Impala',
-            'Tiger',
-            'Crocodile',
-            'Bat',
-          ]}
-          onChange={() => {}}
-          value="Monkeys"
-          error="Bad value"
-        />
-      </Field>
-      <Field label="Nested Menu">
-        <Menu
-          maxHeight="240px"
-          menu={{
-            label: 'Menu',
-            trigger: 'DropDownButton',
-            sections: [
-              {
-                type: 'Menu',
-                menu: {
-                  trigger: 'Text',
-                  label: 'Children',
-                  sections: [...Array(100).keys()].map(() => ({
-                    type: 'Option',
-                    label: Math.random().toString(36).substring(7),
-                    onClick: () => {},
-                  })),
-                },
-              },
-            ].concat(
-              [...Array(100).keys()].map(() => ({
-                type: 'Option',
-                label: Math.random().toString(36).substring(7),
-                onClick: () => {},
-              })),
-            ),
-          }}
-        />
-      </Field>
-      <Popover
-        content={
-          <InputGroup small>
-            <Input value="Value" width="150px" error="Bad value" />
-            <Button colored label="Save" onClick={() => {}} />
-            <Button label="Cancel" onClick={close} />
-          </InputGroup>
-        }
-      >
-        <Button colored label="Toggle me" onClick={() => {}} />
-      </Popover>
-    </>
-  ),
-};

package/src/components/option-dropdown/heading.jsx

@@ -1,6 +0,0 @@
-import React from 'react';
-import styles from './option-dropdown.module.less';
-
-export const Heading = ({ label }) => (
-  <div className={styles.heading}>{label}</div>
-);

package/src/components/option-dropdown/layer.jsx

@@ -1,81 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import { Option } from './option';
-import { Divider } from '../divider/divider';
-import styles from './option-dropdown.module.less';
-import { Heading } from './heading';
-
-export const Layer = ({ options, onChangeOptions, showHeader }) => {
-  return (
-    <div className={cx('menu', styles.menu)}>
-      {showHeader && (
-        <>
-          <div className={styles.header}>
-            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-            <a
-              onClick={(evt) => {
-                const next = options.map((option) => ({
-                  ...option,
-                  selected: true,
-                }));
-                onChangeOptions(evt, next);
-              }}
-            >
-              All
-            </a>
-            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-            <a
-              onClick={(evt) => {
-                const next = options.map((option) => ({
-                  ...option,
-                  selected: false,
-                }));
-                onChangeOptions(evt, next);
-              }}
-            >
-              Clear
-            </a>
-            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-            <a
-              onClick={(evt) => {
-                const next = options.map((option) => ({
-                  ...option,
-                  selected: !option.selected,
-                }));
-                onChangeOptions(evt, next);
-              }}
-            >
-              Invert
-            </a>
-          </div>
-          <Divider margin="7px" />
-        </>
-      )}
-
-      {options.map((option, index) => {
-        switch (option.type) {
-          case 'Heading':
-            return <Heading key={index} label={option.label} />;
-          case 'Divider':
-            return <Divider key={index} margin="7px" />;
-          default:
-            return (
-              <Option
-                key={index}
-                option={option}
-                onChange={(evt) => {
-                  const { value } = option;
-                  const next = options.map((option) =>
-                    option.value !== value
-                      ? option
-                      : { ...option, selected: !option.selected },
-                  );
-                  onChangeOptions(evt, next);
-                }}
-              />
-            );
-        }
-      })}
-    </div>
-  );
-};

package/src/components/option-dropdown/option-dropdown.jsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Menu } from '../menu/menu';
-import { Layer } from './layer';
-
-export const OptionDropdown = ({
-  name,
-  label,
-  options,
-  onChange,
-  showHeader,
-}) => {
-  return (
-    <Menu
-      menu={{
-        label,
-        trigger: 'DropDownButton',
-        possiblePlacements: ['top-start', 'bottom-start'],
-        sections: (
-          <Layer
-            options={options}
-            onChangeOptions={(evt, nextOptions) => {
-              evt.stopPropagation();
-              evt.target.name = name;
-              evt.target.value = nextOptions;
-              onChange(evt);
-            }}
-            showHeader={showHeader}
-          />
-        ),
-      }}
-    />
-  );
-};
-
-OptionDropdown.defaultProps = {
-  name: undefined,
-  showHeader: true,
-};
-
-OptionDropdown.propTypes = {
-  name: PropTypes.string,
-  label: PropTypes.string.isRequired,
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string,
-      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      selected: PropTypes.bool,
-    }),
-  ).isRequired,
-  onChange: PropTypes.func.isRequired,
-  showHeader: PropTypes.bool,
-};

package/src/components/option-dropdown/option-dropdown.module.less

@@ -1,50 +0,0 @@
-@import '../../style/variables.less';
-
-.menu {
-  min-width: 160px;
-  padding: 7px 0;
-  border: 1px solid var(--color-border);
-  border-radius: 4px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  background-color: var(--color-background-raised);
-  margin-top: 2px;
-}
-
-.header {
-  padding: 7px 16px;
-  display: flex;
-  justify-content: space-between;
-
-  a {
-    color: var(--color-text-primary);
-    font-weight: normal;
-    cursor: pointer;
-
-    &:hover {
-      color: var(--color-text-primary-hover);
-    }
-
-    &:active {
-      color: var(--color-text-primary-active);
-    }
-  }
-}
-
-.item {
-  padding: 7px 16px;
-  background: transparent;
-  cursor: default;
-}
-
-.heading {
-  color: var(--color-text-muted);
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  font-size: 12px;
-  padding: 7px 16px;
-  max-width: 100%;
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}

package/src/components/option-dropdown/option-dropdown.stories.jsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { useArgs } from '@storybook/addons';
-import { OptionDropdown } from './option-dropdown';
-
-const options = [
-  { label: 'Animals', type: 'Heading' },
-  { type: 'Divider' },
-  { label: 'Aardvarks', value: 'termites' },
-  { label: 'Kangaroos', value: 'grass' },
-  { label: 'Monkeys', value: 'bananas' },
-];
-
-export default {
-  title: 'Forms/OptionDropdown',
-  component: OptionDropdown,
-  args: {
-    label: 'Label',
-    options,
-  },
-};
-
-const Template = (args) => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt) => {
-    updateArgs({ options: evt.target.value });
-  };
-  return (
-    <OptionDropdown
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...args}
-      onChange={handleChange}
-    />
-  );
-};
-export const Default = Template.bind({});

package/src/components/option-dropdown/option.jsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import { CheckBox } from '../check-box/check-box';
-import styles from './option-dropdown.module.less';
-
-export const Option = ({ option, onChange }) => {
-  const { key, label, selected } = option;
-  return (
-    <div key={key} className={styles.item}>
-      <CheckBox label={label} noMargin checked={selected} onChange={onChange} />
-    </div>
-  );
-};