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

package/src/components/accordion/accordion.jsx

@@ -1,132 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { Chevron } from './chevron/chevron';
-import styles from './accordion.module.less';
-
-export const AccordionManaged = ({
-  heading,
-  bordered,
-  padding,
-  expanded: initialExpanded,
-  children,
-  testId,
-}) => {
-  const [expanded, toggle] = React.useState(initialExpanded);
-
-  return (
-    <>
-      <Accordion
-        heading={heading}
-        bordered={bordered}
-        padding={padding}
-        expanded={expanded}
-        onClick={() => {
-          toggle(!expanded);
-        }}
-        testId={testId}
-      >
-        {children}
-      </Accordion>
-    </>
-  );
-};
-
-export const AccordionBase = ({
-  heading,
-  expanded,
-  bordered,
-  padding,
-  children,
-  squareBottom,
-  onClick,
-  testId,
-}) => {
-  return (
-    <div
-      className={cx(
-        styles.accordion,
-        bordered ? styles.bordered : '',
-        expanded ? styles.expanded : '',
-        squareBottom ? styles.squareBottom : '',
-      )}
-    >
-      <div
-        className={cx(styles.accordionHeader, onClick ? styles.clickable : '')}
-        onClick={onClick}
-        data-testid={testId}
-      >
-        <Chevron expanded={expanded} />
-        <div className={styles.heading}>{heading}</div>
-      </div>
-      {expanded && children && (
-        <div
-          className={cx(
-            styles.accordionContent,
-            bordered && padding ? styles.padding : '',
-          )}
-        >
-          {children}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export const Accordion = ({
-  heading,
-  expanded,
-  managed,
-  bordered,
-  padding,
-  children,
-  onClick,
-  squareBottom,
-  testId,
-}) =>
-  managed ? (
-    <AccordionManaged
-      heading={heading}
-      expanded={expanded}
-      bordered={bordered}
-      padding={padding}
-      squareBottom={squareBottom}
-      onClick={onClick}
-      testId={testId}
-    >
-      {children}
-    </AccordionManaged>
-  ) : (
-    <AccordionBase
-      heading={heading}
-      expanded={expanded}
-      bordered={bordered}
-      padding={padding}
-      squareBottom={squareBottom}
-      onClick={onClick}
-      testId={testId}
-    >
-      {children}
-    </AccordionBase>
-  );
-
-Accordion.defaultProps = {
-  bordered: false,
-  padding: true,
-  managed: false,
-  expanded: false,
-  onClick: null,
-  squareBottom: false,
-  testId: '',
-};
-
-Accordion.propTypes = {
-  heading: PropTypes.node.isRequired,
-  bordered: PropTypes.bool,
-  padding: PropTypes.bool,
-  managed: PropTypes.bool,
-  expanded: PropTypes.bool,
-  onClick: PropTypes.func,
-  squareBottom: PropTypes.bool,
-  testId: PropTypes.string,
-};

package/src/components/accordion/accordion.module.less

@@ -1,66 +0,0 @@
-@import '../../style/variables.less';
-
-.accordion {
-  position: relative;
-  color: var(--color-text);
-
-  .accordionHeader {
-    display: flex;
-    align-items: center;
-
-    .heading {
-      flex-grow: 1;
-    }
-
-    &.clickable {
-      &:hover {
-        cursor: pointer;
-        > * {
-          color: var(--color-text) !important;
-        }
-      }
-    }
-  }
-
-  &:not(.bordered) {
-    .accordionHeader {
-      margin-bottom: 15px;
-    }
-  }
-
-  &.bordered {
-    .accordionHeader,
-    .accordionContent {
-      border: 1px solid var(--color-border);
-      line-height: 20px;
-    }
-
-    .accordionHeader {
-      padding: @card_padding_y @card_padding_x;
-      border-radius: @card_border_radius;
-      background-color: var(--color-background);
-    }
-
-    &.expanded .accordionHeader {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    .accordionContent {
-      border-top: none;
-      border-radius: 0 0 @card_border_radius @card_border_radius;
-      background-color: var(--color-background-raised);
-
-      &.padding {
-        padding: @card_padding_y @card_padding_x;
-      }
-    }
-  }
-
-  &.bordered.squareBottom {
-    .accordionHeader {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-}

package/src/components/accordion/accordion.stories.jsx

@@ -1,171 +0,0 @@
-import React, { useState } from 'react';
-import { useArgs } from '@storybook/addons';
-import { FaPlus } from 'react-icons/fa';
-import { AccordionWithDefaultToggle as AccordionWithDefaultToggleComponent } from './helpers/accordion-with-default-toggle';
-import { Accordion, Heading, Divider, Table } from '../../..';
-
-export default {
-  title: 'Layout/Accordion',
-  component: Accordion,
-  args: {
-    bordered: false,
-    expanded: false,
-    managed: false,
-    children: 'Example content',
-  },
-};
-
-const Template = (args) => {
-  const [_, updateArgs] = useArgs();
-  const toggleExpanded = () => {
-    updateArgs({ expanded: !args.expanded });
-  };
-  return (
-    <Accordion
-      heading={<Heading onClick={toggleExpanded}>Heading</Heading>}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...args}
-    />
-  );
-};
-
-export const Default = Template.bind({});
-
-export const Bordered = Template.bind({});
-Bordered.args = {
-  bordered: true,
-};
-
-export const NoContentPadding = Template.bind({});
-NoContentPadding.args = {
-  bordered: true,
-  expanded: true,
-  padding: false,
-};
-
-export const HelpIcon = Template.bind({});
-HelpIcon.args = {
-  bordered: true,
-  expanded: true,
-  heading: <Heading onClickHelp={() => console.log('help!')}>Heading</Heading>,
-};
-
-export const LibraryIcon = Template.bind({});
-LibraryIcon.args = {
-  bordered: true,
-  expanded: true,
-  heading: (
-    <Heading
-      libraryIcon={{
-        onClick: () => {},
-        tooltip: 'Show in library',
-      }}
-    >
-      Heading
-    </Heading>
-  ),
-};
-
-export const CustomIcon = Template.bind({});
-CustomIcon.args = {
-  bordered: true,
-  expanded: true,
-  heading: (
-    <Heading onIconClick={() => {}} icon={<FaPlus />}>
-      Heading
-    </Heading>
-  ),
-};
-
-export const AccordionWithDefaultToggle = () => {
-  const [enabled, setEnabled] = useState(true);
-  const tableWithFluidWidth = {
-    bordered: false,
-    headers: [
-      {
-        cells: [{ value: 'Name' }, { value: 'Origin' }],
-      },
-    ],
-    rows: [
-      {
-        cells: [{ value: 'Brown rice' }, { value: 'Vietnam' }],
-      },
-      {
-        cells: [{ value: 'Buckwheat' }, { value: 'Poland' }],
-      },
-      {
-        cells: [{ value: 'Couscous' }, { value: 'France' }],
-      },
-    ],
-  };
-  const tableWithFluidWidthEditable = {
-    bordered: false,
-    headers: [
-      {
-        cells: [{ value: 'Name' }, { value: 'Origin' }],
-      },
-    ],
-    rows: [
-      {
-        cells: [
-          { value: 'Brown rice', type: 'Input', onChange: () => {} },
-          {
-            type: 'Select',
-            options: [
-              { label: 'Vietnam', value: 'Vietnam' },
-              { label: 'Other', value: 'Other' },
-            ],
-            value: { label: 'Vietnam', value: 'Vietnam' },
-            native: true,
-            onChange: () => {},
-          },
-        ],
-      },
-      {
-        cells: [
-          { value: 'Buckwheat', type: 'Input', onChange: () => {} },
-          {
-            type: 'Select',
-            options: [
-              { label: 'Poland', value: 'Poland' },
-              { label: 'Other', value: 'Other' },
-            ],
-            value: { label: 'Poland', value: 'Poland' },
-            native: true,
-            onChange: () => {},
-          },
-        ],
-      },
-      {
-        cells: [
-          { value: 'Couscous', type: 'Input', onChange: () => {} },
-          {
-            type: 'Select',
-            options: [
-              { label: 'France', value: 'France' },
-              { label: 'Other', value: 'Other' },
-            ],
-            value: { label: 'France', value: 'France' },
-            native: true,
-            onChange: () => {},
-          },
-        ],
-      },
-    ],
-  };
-  return (
-    <AccordionWithDefaultToggleComponent
-      heading={
-        <Heading onClickHelp={() => console.log('help!')}>Heading</Heading>
-      }
-      toggleLabel="Default Settings"
-      onClickDefaultToggle={() => setEnabled(!enabled)}
-      padding={false}
-    >
-      <Divider margin={0} />
-      <Table
-        table={enabled ? tableWithFluidWidth : tableWithFluidWidthEditable}
-      />
-    </AccordionWithDefaultToggleComponent>
-  );
-};

package/src/components/accordion/chevron/chevron.jsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import { FaChevronRight } from 'react-icons/fa';
-import styles from './chevron.module.less';
-
-export const Chevron = ({ expanded }) => {
-  return expanded ? (
-    <FaChevronRight className={cx(styles.chevron, styles.expanded)} />
-  ) : (
-    <FaChevronRight className={cx(styles.chevron)} />
-  );
-};

package/src/components/accordion/chevron/chevron.module.less

@@ -1,12 +0,0 @@
-@import '../../../style/variables.less';
-
-.chevron {
-  margin-right: 10px;
-  font-size: 11px;
-  transition: transform 0.3s;
-  color: var(--color-text-muted);
-
-  &.expanded {
-    transform: rotate(90deg);
-  }
-}

package/src/components/accordion/helpers/accordion-with-default-toggle.jsx

@@ -1,106 +0,0 @@
-import React, { useReducer, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { Accordion } from '../accordion';
-import { CheckBox } from '../../check-box/check-box';
-import styles from './accordion-with-default-toggle.module.less';
-
-const initialState = (initialExpanded, defaultEnabled) => ({
-  accordionExpanded: initialExpanded,
-  defaultEnabled,
-});
-
-const reducer = (state, action) => {
-  switch (action.type) {
-    case 'TOGGLE_ACCORDION': {
-      return {
-        ...state,
-        accordionExpanded: !state.accordionExpanded,
-      };
-    }
-    case 'TOGGLE_ENABLE': {
-      return {
-        accordionExpanded: state.defaultEnabled,
-        defaultEnabled: !state.defaultEnabled,
-      };
-    }
-    default:
-      return state;
-  }
-};
-
-export const AccordionWithDefaultToggle = ({
-  heading,
-  toggleLabel,
-  onClickDefaultToggle,
-  expanded: initialExpanded,
-  defaultEnabled: initialDefaultEnabled,
-  children,
-  padding,
-}) => {
-  const [state, dispatch] = useReducer(
-    reducer,
-    initialState(initialExpanded, initialDefaultEnabled),
-  );
-
-  useEffect(() => {
-    if (state.accordionExpanded !== initialExpanded) {
-      dispatch({ type: 'TOGGLE_ACCORDION' });
-    }
-
-    if (state.defaultEnabled !== initialDefaultEnabled) {
-      dispatch({ type: 'TOGGLE_ENABLE' });
-    }
-  }, [initialExpanded, initialDefaultEnabled]);
-
-  const content = (
-    <>
-      <div className={styles.checkboxWrapper}>
-        <CheckBox
-          label={toggleLabel}
-          onChange={(evt) => {
-            dispatch({ type: 'TOGGLE_ENABLE' });
-            if (onClickDefaultToggle) {
-              onClickDefaultToggle(evt);
-            }
-          }}
-          checked={state.defaultEnabled}
-        />
-      </div>
-      {state.accordionExpanded && (
-        <div className={styles.contentWrapper}>{children}</div>
-      )}
-    </>
-  );
-
-  return (
-    <>
-      <Accordion
-        heading={heading}
-        bordered
-        expanded={state.accordionExpanded}
-        squareBottom
-        onClick={() => dispatch({ type: 'TOGGLE_ACCORDION' })}
-      />
-      <div className={cx(styles.bordered, padding ? styles.padding : '')}>
-        {content}
-      </div>
-    </>
-  );
-};
-
-AccordionWithDefaultToggle.defaultProps = {
-  expanded: false,
-  defaultEnabled: true,
-  onClickDefaultToggle: null,
-  padding: true,
-};
-
-AccordionWithDefaultToggle.propTypes = {
-  heading: PropTypes.node.isRequired,
-  toggleLabel: PropTypes.string.isRequired,
-  expanded: PropTypes.bool,
-  defaultEnabled: PropTypes.bool,
-  onClickDefaultToggle: PropTypes.func,
-  padding: PropTypes.bool,
-};

package/src/components/accordion/helpers/accordion-with-default-toggle.module.less

@@ -1,24 +0,0 @@
-@import '../../../style/variables.less';
-
-.bordered {
-  border: 1px solid var(--color-border);
-  border-radius: 0 0 @card_border_radius @card_border_radius;
-  border-top: none;
-  background-color: var(--color-background-raised);
-}
-
-.checkboxWrapper {
-  padding: (@card_padding_y - 8px) @card_padding_x;
-
-  &:last-child {
-    border-radius: 0 0 inherit inherit;
-  }
-}
-
-.padding {
-  padding: @card_padding_y @card_padding_x;
-}
-
-.contentWrapper {
-  border-radius: inherit;
-}

package/src/components/actions/actions.jsx

@@ -1,129 +0,0 @@
-import { isFunction } from 'lodash';
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { FaEllipsisV } from 'react-icons/fa';
-import { Icon } from '../icon/icon';
-import { Menu } from '../menu/menu';
-import { Button } from '../button/button';
-import styles from './actions.module.less';
-import { actionsShape } from './actions.shape';
-import { DisabledContext } from '../../helpers/disabled-context';
-
-const SubmenuActions = (props) => {
-  const { actions, subMenuIcon, primary, testId } = props;
-  const menuButton = (
-    <Button
-      colored={primary ? true : 'muted'}
-      basic={!primary}
-      round
-      small
-      icon={subMenuIcon ? <Icon icon={subMenuIcon} /> : <FaEllipsisV />}
-      testId={testId}
-    />
-  );
-
-  if (actions.length) {
-    const subMenu = {
-      trigger: 'Component',
-      component: menuButton,
-      sections: actions.map((a) => {
-        return {
-          type: 'Option',
-          label: a.label,
-          icon: a.icon,
-          testId: a.testId,
-          disabled: a.disabled,
-          onClick: (evt) => {
-            evt.stopPropagation();
-            evt.preventDefault();
-            if (/* Sentry WELLDESIGN-1EB */ isFunction(a.onClick)) {
-              a.onClick(evt);
-            }
-          },
-        };
-      }),
-    };
-
-    return <Menu menu={subMenu} />;
-  }
-  return null;
-};
-
-export const Actions = (props) => {
-  const disabledContext = useContext(DisabledContext);
-  const { actions, right, closeLayer } = props;
-  return (
-    <div className={cx(styles.actions)}>
-      {actions.map((action, index) => {
-        const hidden = action?.hidden || !action || !Object.keys(action).length;
-        if (!hidden) {
-          if (
-            action.childComponent &&
-            React.isValidElement(action.childComponent)
-          ) {
-            return (
-              <Button
-                colored="muted"
-                round
-                basic
-                small
-                icon={action.childComponent}
-                testId={action.testId}
-                key={index}
-              />
-            );
-          } else if (action.subActions) {
-            return (
-              <SubmenuActions
-                actions={action.subActions}
-                primary={action.primary}
-                subMenuIcon={action.icon}
-                testId={action.testId}
-                key={index}
-                right={right}
-              />
-            );
-          } else {
-            return (
-              <Button
-                key={index}
-                colored={action.primary ? true : 'muted'}
-                round
-                basic={!action.primary}
-                disabled={action.disabled}
-                small
-                name={action.label}
-                icon={action.icon ? <Icon icon={action.icon} /> : null}
-                onClick={(evt) => {
-                  if (closeLayer) {
-                    closeLayer();
-                  }
-                  evt.stopPropagation();
-                  evt.preventDefault();
-                  if (
-                    !(action.disabled || disabledContext) &&
-                    /* Sentry WELLDESIGN-1EB */ isFunction(action.onClick)
-                  ) {
-                    action.onClick(evt);
-                  }
-                }}
-                testId={action.testId}
-              />
-            );
-          }
-        }
-      })}
-    </div>
-  );
-};
-
-Actions.defaultProps = {
-  actions: [],
-  right: false,
-};
-
-Actions.propTypes = {
-  actions: actionsShape,
-  right: PropTypes.bool,
-};

package/src/components/actions/actions.module.less

@@ -1,44 +0,0 @@
-@import '../../style/variables.less';
-
-.actions {
-  margin-left: auto;
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: flex-end;
-  align-items: center;
-
-  > *:not(:last-child) {
-    margin-right: 3px;
-  }
-}
-
-// TODO: Deprecate these custom styles - align with Button
-// Need to check existing usage in wellplan
-.actionComponentContainer {
-  width: 24px;
-  height: 24px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  color: #c8c8c8;
-  position: relative;
-  z-index: 2;
-  transition: color 0.2s;
-  line-height: 0; // Strip uneccessary white space
-
-  i {
-    margin: 0;
-    line-height: 1 !important;
-  }
-
-  &:hover,
-  &:focus {
-    color: var(--color-text-primary-hover);
-  }
-
-  &:active,
-  &.active {
-    color: var(--color-text-primary-active);
-  }
-}