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

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

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

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

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

@@ -0,0 +1,35 @@
+@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;
+}

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

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

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

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

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

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

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

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