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

package/src/components/accordion/accordion.jsx

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

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

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

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

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

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

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

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

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