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

package/src/components/text-link/text-link.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Text } from '../text/text';
+
+export const TextLink = ({ children, href, target, testId }) => {
+  return (
+    <a href={href} target={target} data-testid={testId}>
+      <Text link>{children}</Text>
+    </a>
+  );
+};
+
+TextLink.defaultProps = {
+  href: null,
+  target: null,
+  testId: undefined,
+};
+
+TextLink.propTypes = {
+  href: PropTypes.string,
+  target: PropTypes.string,
+  testId: PropTypes.string,
+};

package/src/components/text-link/text-link.stories.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { TextLink } from '../../..';
+
+export default {
+  title: 'Basic/TextLink',
+  component: TextLink,
+  args: {
+    children: 'Link text goes here',
+    href: 'http://oliasoft.com',
+  },
+};
+
+const Template = (args) => (
+  <TextLink
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args}
+  />
+);
+
+export const Default = Template.bind({});

package/src/components/textarea/textarea.jsx

@@ -0,0 +1,126 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import styles from './textarea.module.less';
+import { Tooltip } from '../tooltip/tooltip';
+import { isStringNumberOrNode } from '../../helpers/types';
+import { DisabledContext } from '../../helpers/disabled-context';
+
+export const TextArea = ({
+  name,
+  value,
+  placeholder,
+  cols,
+  rows,
+  disabled,
+  onChange,
+  onKeyPress,
+  onFocus,
+  onBlur,
+  tabIndex,
+  error,
+  warning,
+  tooltip,
+  maxTooltipWidth,
+  resize,
+  monospace,
+  testId,
+}) => {
+  const disabledContext = useContext(DisabledContext);
+
+  const textarea = (
+    <textarea
+      className={cx(
+        styles.textarea,
+        error ? styles.error : '',
+        warning ? styles.warning : '',
+        monospace ? styles.monospace : '',
+      )}
+      name={name}
+      value={value}
+      placeholder={placeholder}
+      cols={cols}
+      rows={rows}
+      onChange={onChange}
+      disabled={disabled || disabledContext}
+      onKeyPress={onKeyPress}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      tabIndex={tabIndex}
+      style={{ resize }}
+      data-testid={testId}
+    />
+  );
+
+  return (
+    <Tooltip
+      error={!!error}
+      warning={!!warning}
+      text={tooltip || error || warning}
+      enabled={
+        (tooltip && isStringNumberOrNode(tooltip)) ||
+        (error && isStringNumberOrNode(error)) ||
+        (warning && isStringNumberOrNode(warning)) ||
+        false
+      }
+      maxWidth={maxTooltipWidth}
+      placement="bottom-center"
+    >
+      {textarea}
+    </Tooltip>
+  );
+};
+
+TextArea.defaultProps = {
+  error: null,
+  warning: null,
+  tooltip: null,
+  name: undefined,
+  onChange: () => {},
+  onKeyPress: () => {},
+  onFocus: () => {},
+  onBlur: () => {},
+  placeholder: '',
+  tabIndex: 0,
+  value: '',
+  disabled: false,
+  cols: undefined,
+  rows: undefined,
+  resize: undefined,
+  maxTooltipWidth: undefined,
+  monospace: false,
+  testId: undefined,
+};
+
+TextArea.propTypes = {
+  error: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.node,
+  ]),
+  warning: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.node,
+  ]),
+  tooltip: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.node,
+  ]),
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  onKeyPress: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  placeholder: PropTypes.string,
+  tabIndex: PropTypes.number,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  disabled: PropTypes.bool,
+  cols: PropTypes.number,
+  rows: PropTypes.number,
+  resize: PropTypes.string,
+  maxTooltipWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  monospace: PropTypes.bool,
+  testId: PropTypes.string,
+};

package/src/components/textarea/textarea.module.less

@@ -0,0 +1,55 @@
+@import '../../style/variables.less';
+@import '../../style/mixins.less';
+
+.textarea {
+  margin: 0;
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  outline: 0;
+  text-align: left;
+  font-family: @default_font;
+  padding: @input_padding_y @input_padding_x;
+  background: var(--color-background-input);
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+  border-radius: @input_border_radius;
+  transition: box-shadow 0.1s ease, border-color 0.1s ease;
+  box-shadow: none;
+  min-height: @input_height;
+
+  &::placeholder {
+    color: var(--color-text-faint);
+  }
+
+  &:hover {
+    border-color: var(--color-border-hover);
+  }
+
+  &:focus {
+    .inputFocus();
+  }
+
+  &[disabled] {
+    .inputDisabled();
+  }
+
+  &.small {
+    font-size: @input_font_size_small;
+    min-height: @input_height_small;
+    padding: @input_padding_small_y @input_padding_small_x;
+    line-height: 1.2;
+  }
+
+  &.error {
+    .inputError();
+  }
+
+  &.warning {
+    .inputWarning();
+  }
+
+  &.monospace {
+    font-family: monospace;
+  }
+}

package/src/components/textarea/textarea.stories.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useArgs } from '@storybook/addons';
+import { TextArea } from './textarea';
+
+export default {
+  title: 'Forms/TextArea',
+  component: TextArea,
+  args: {
+    disabled: false,
+  },
+};
+
+const Template = (args) => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt) => {
+    updateArgs({ value: evt.target.value });
+  };
+  return (
+    <TextArea
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...args}
+      onChange={handleChange}
+    />
+  );
+};
+export const Default = Template.bind({});

package/src/components/toaster/toaster.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { toast as toastBase, Slide } from 'react-toastify';
+import { Message } from '../message/message';
+import { Dismiss } from '../message/dismiss';
+import './toaster.less';
+
+export { ToastContainer as Toaster } from 'react-toastify';
+
+export const toast = ({ id, message, autoClose = 6000, onClose }) => {
+  const { type } = message;
+
+  const CloseButton = (
+    { closeToast }, //Dismiss button that looks like the one in Message
+  ) => <Dismiss type={type} onClose={closeToast} isInToast />;
+
+  const content = (
+    <Message
+      message={{
+        ...message,
+        visible: true,
+        width: '100%',
+        maxHeight: '500px',
+        withDismiss: false,
+      }}
+    />
+  );
+
+  return toastBase(content, {
+    toastId: id,
+    autoClose,
+    onClose,
+    hideProgressBar: true,
+    closeOnClick: false,
+    pauseOnHover: true,
+    draggable: false,
+    closeButton: CloseButton,
+    transition: Slide,
+  });
+};

package/src/components/toaster/toaster.less

@@ -0,0 +1,17 @@
+@import '~react-toastify/dist/ReactToastify.css';
+
+.Toastify__toast {
+  padding: 0;
+  min-height: inherit;
+  font-family: inherit;
+  background-color: rgba(0, 0, 0, 0);
+
+  .Toastify__toast-body {
+    display: block;
+    padding: 0;
+
+    > div > div {
+      padding-right: 35px; // Adds offset for dismiss icon
+    }
+  }
+}

package/src/components/toaster/toaster.stories.jsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { Button, Spacer, toast } from '../../..';
+
+const messageSuccess = {
+  type: 'Success',
+  icon: true,
+  heading: 'Heading',
+  content: 'Great results',
+};
+
+const messageError = {
+  type: 'Error',
+  icon: true,
+  heading: 'Heading',
+  content: 'An error has happened',
+  details: 'Bad input data lorem ipsum dolor est compendum lorem ipsum.',
+};
+
+const messageWarning = {
+  type: 'Warning',
+  icon: true,
+  heading: 'Heading',
+  content: 'Warning message',
+};
+
+const messageInfo = {
+  type: 'Info',
+  icon: true,
+  heading: 'Heading',
+  content: 'Long content lorem ipsum dolor est compendum lorem ipsum.',
+};
+
+export default {
+  title: 'Modals/Toaster',
+  parameters: {
+    docs: {
+      inlineStories: false,
+      iframeHeight: 400,
+    },
+  },
+  source: { type: 'code' },
+  args: {
+    id: undefined,
+    message: messageInfo,
+    autoClose: 6000,
+    onClose: () => {},
+  },
+};
+
+const Template = (args) => {
+  return (
+    <>
+      <Button
+        label="Info"
+        onClick={() =>
+          toast({
+            message: messageInfo,
+            onClose: () => console.log('toast closed'),
+          })
+        }
+      />
+      <Spacer />
+      <Button
+        label="Error"
+        onClick={() =>
+          toast({
+            message: messageError,
+            onClose: () => console.log('toast closed'),
+          })
+        }
+      />
+      <Spacer />
+      <Button
+        label="Warning"
+        onClick={() =>
+          toast({
+            message: messageWarning,
+            onClose: () => console.log('toast closed'),
+          })
+        }
+      />
+      <Spacer />
+      <Button
+        label="Success"
+        onClick={() =>
+          toast({
+            message: messageSuccess,
+            onClose: () => console.log('toast closed'),
+          })
+        }
+      />
+    </>
+  );
+};
+export const Default = Template.bind({});
+
+export const PreventDuplicates = () => (
+  <Button
+    label="Show Toast"
+    onClick={() =>
+      toast({
+        message: messageError,
+        onClose: () => console.log('toast closed'),
+        id: 'uniqueId',
+      })
+    }
+  />
+);
+PreventDuplicates.parameters = {
+  docs: {
+    iframeHeight: 200,
+    description: {
+      story: 'Pass a unique `id` in the `toast` object to prevent duplicates.',
+    },
+  },
+};

package/src/components/toggle/toggle.jsx

@@ -0,0 +1,65 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import styles from './toggle.module.less';
+import { DisabledContext } from '../../helpers/disabled-context';
+
+export const Toggle = ({
+  name,
+  label,
+  checked,
+  disabled,
+  small,
+  onChange,
+  noMargin,
+  testId,
+}) => {
+  const disabledContext = useContext(DisabledContext);
+
+  return (
+    <div
+      className={cx(
+        styles.toggle,
+        disabled || disabledContext ? styles.disabled : null,
+        small ? styles.small : null,
+        noMargin ? styles.noMargin : null,
+      )}
+      onClick={(evt) => {
+        evt.target.name = name;
+        evt.target.checked = !checked;
+        evt.target.value = !checked;
+        onChange(evt);
+      }}
+      data-testid={testId}
+    >
+      <input
+        type="checkbox"
+        name={name}
+        value={checked}
+        disabled={disabled || disabledContext}
+        checked={checked}
+        onChange={() => {}}
+      />
+      <label>{label}</label>
+    </div>
+  );
+};
+
+Toggle.defaultProps = {
+  label: null,
+  name: undefined,
+  checked: false,
+  small: false,
+  noMargin: false,
+  testId: undefined,
+};
+
+Toggle.propTypes = {
+  name: PropTypes.string,
+  checked: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  label: PropTypes.string,
+  small: PropTypes.bool,
+  noMargin: PropTypes.bool,
+  testId: PropTypes.string,
+};

package/src/components/toggle/toggle.module.less

@@ -0,0 +1,139 @@
+@import '../../style/variables.less';
+
+:root {
+  --color-background-toggle: rgba(black, 0.2);
+  --color-background-toggle-hover: rgba(black, 0.3);
+}
+
+[data-theme='dark'] {
+  --color-background-toggle: rgba(white, 0.2);
+  --color-background-toggle-hover: rgba(white, 0.3);
+}
+
+@toggleSize: 17px;
+
+.toggle {
+  position: relative;
+  display: inline-block;
+  backface-visibility: hidden;
+  outline: 0;
+  vertical-align: baseline;
+  font-style: normal;
+  min-height: @toggleSize;
+  font-size: inherit;
+  line-height: @toggleSize;
+  min-width: @toggleSize;
+  margin: 10px 0 11px 0;
+
+  &.small {
+    margin: 3px 0;
+    font-size: @input_font_size_small;
+  }
+
+  input {
+    width: @toggleSize * 2;
+    height: @toggleSize;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0 !important;
+    outline: 0;
+    z-index: 3;
+    box-sizing: border-box;
+    padding: 0;
+    overflow: visible;
+    font-family: sans-serif;
+    font-size: 100%;
+    line-height: 1.15;
+    margin: 0;
+  }
+
+  label {
+    min-height: @toggleSize;
+    padding-left: (@toggleSize * 2) + 9px;
+    transition: color 0.1s ease;
+    cursor: auto;
+    position: relative;
+    display: block;
+    outline: 0;
+    font-size: 1em;
+
+    &:before,
+    &:after {
+      display: block;
+      position: absolute;
+      content: '';
+      top: 0;
+      height: @toggleSize;
+      border-radius: calc(@toggleSize / 2);
+    }
+
+    &:before {
+      z-index: 1;
+      transform: none;
+      background: var(--color-background-toggle);
+      box-shadow: none;
+      width: @toggleSize * 2;
+      left: 0;
+      transition: background 0.3s ease, border 0.1s ease, opacity 0.1s ease,
+        transform 0.1s ease, box-shadow 0.1s ease;
+    }
+
+    &:after {
+      left: -0.05rem;
+      box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15),
+        0 0 0 1px rgba(34, 36, 38, 0.15) inset;
+      background: #fff linear-gradient(transparent, rgba(0, 0, 0, 0.05));
+      opacity: 1;
+      z-index: 2;
+      width: @toggleSize;
+      transition: background 0.3s ease, left 0.3s ease;
+    }
+  }
+
+  input:hover ~ label {
+    &:before {
+      background: var(--color-background-toggle-hover);
+    }
+  }
+
+  input:checked ~ label {
+    &:before {
+      border-color: rgba(34, 36, 38, 0.35);
+      background-color: var(--color-background-button-primary);
+    }
+
+    &:after {
+      left: @toggleSize;
+    }
+  }
+
+  input:checked:hover ~ label {
+    &:before {
+      background-color: var(--color-background-button-primary-hover);
+    }
+  }
+
+  &.disabled {
+    cursor: default;
+    pointer-events: none;
+    color: var(--color-text-muted);
+
+    label {
+      &:before {
+        background-color: var(--color-background-disabled) !important;
+      }
+    }
+
+    input:checked ~ label {
+      &:before {
+        background-color: var(--color-text-faint);
+      }
+    }
+  }
+}
+
+.noMargin {
+  margin: 0;
+}

package/src/components/toggle/toggle.stories.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useArgs } from '@storybook/addons';
+import { Toggle } from '../../..';
+
+export default {
+  title: 'Forms/Toggle',
+  component: Toggle,
+  args: {
+    label: 'Label',
+  },
+};
+
+const Template = (args) => {
+  const [{ checked }, updateArgs] = useArgs();
+  const handleChange = () => {
+    updateArgs({ checked: !checked });
+  };
+  return (
+    <Toggle
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...args}
+      onChange={handleChange}
+    />
+  );
+};
+export const Default = Template.bind({});