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

package/src/components/table/table.test.js

@@ -0,0 +1,30 @@
+import { hasRowActions, getColumnCount } from './table.viewdata';
+
+describe('table', () => {
+  test('hasRowActions', () => {
+    const withActions = [{ cells: [], actions: [{}] }, { cells: [] }];
+    const withOutActions = [{ cells: [] }, { cells: [] }];
+    expect(hasRowActions(withOutActions, withOutActions)).toBe(false);
+    expect(hasRowActions(withActions, withOutActions)).toBe(true);
+  });
+
+  test('getColumnCount', () => {
+    const noRows = [];
+    const unevenColumns = [
+      { cells: [{}, {}, {}] },
+      { cells: [{}, {}, {}, {}, {}] },
+      { cells: [{}, {}, {}] },
+    ];
+    expect(getColumnCount(noRows, unevenColumns)).toBe(5);
+  });
+
+  test('getColumnCount with colSpan', () => {
+    const noRows = [];
+    const unevenColumns = [
+      { cells: [{}, { colSpan: 2 }, {}] },
+      { cells: [{}, {}] },
+      { cells: [{}, {}, {}] },
+    ];
+    expect(getColumnCount(noRows, unevenColumns)).toBe(4);
+  });
+});

package/src/components/table/table.variables.less

@@ -0,0 +1,19 @@
+@import '../../style/variables.less';
+
+.cellWrapperPadding {
+  padding: @input_padding_y @input_padding_x !important;
+}
+
+.flexBlock {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.cellErrorWarningWrapper {
+  margin: (-@input_padding_y - 1) (-@input_padding_x - 1) !important;
+  padding: @input_padding_y @input_padding_x !important;
+  display: block;
+  line-height: 17px;
+  position: relative;
+}

package/src/components/table/table.viewdata.js

@@ -0,0 +1,26 @@
+const getMaxCellCount = (rows) => {
+  const count = Math.max(
+    ...rows.reduce((acc, row) => {
+      const count = row.cells
+        .map((c) => (c.colSpan ? c.colSpan : 1))
+        .reduce((a, b) => a + b, 0);
+      return acc.concat(count);
+    }, []),
+  );
+  return !isNaN(count) ? count : 0;
+};
+
+export const getColumnCount = (rows, headers) => {
+  const cellCount = [getMaxCellCount(headers), getMaxCellCount(rows)];
+  return Math.max(...cellCount);
+};
+
+const hasActions = (rows) =>
+  rows.reduce(
+    (acc, row) => (row.actions && row.actions.length > 0 ? 1 : acc),
+    0,
+  );
+
+export const hasRowActions = (rows, headers) => {
+  return hasActions(headers) > 0 || hasActions(rows) > 0;
+};

package/src/components/table/title/title.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './title.module.less';
+import { Actions } from '../../actions/actions';
+import { actionsShape } from '../../actions/actions.shape';
+
+export const Title = (props) => {
+  const { colSpan, name, actions } = props;
+  return name ? (
+    <tr>
+      <th colSpan={colSpan} className={styles.cellWrapper}>
+        <div className={styles.title}>
+          <div>{name}</div>
+          <div>{actions && <Actions actions={actions} isBlockElement />}</div>
+        </div>
+      </th>
+    </tr>
+  ) : null;
+};
+
+Title.defaultProps = {
+  name: null,
+  actions: null,
+};
+
+Title.propTypes = {
+  actions: actionsShape,
+  colSpan: PropTypes.number.isRequired,
+  name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};

package/src/components/table/title/title.module.less

@@ -0,0 +1,9 @@
+@import '../table.variables.less';
+
+.cellWrapper {
+  .cellWrapperPadding();
+}
+
+.title {
+  .flexBlock();
+}

package/src/components/tabs/content.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import cx from 'classnames';
+import styles from './tabs.module.less';
+
+export const Content = ({ children, activeTabIndex, contentPadding }) => {
+  //The tab content is only rendered if the children props are provided, otherwise tab content is handled by the parent
+  return (
+    children && (
+      <div className={cx(contentPadding ? styles.contentPadding : '')}>
+        {children.map((child, index) => activeTabIndex === index && child)}
+      </div>
+    )
+  );
+};

package/src/components/tabs/label.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import cx from 'classnames';
+import styles from './tabs.module.less';
+import { Badge } from '../badge/badge';
+
+export const Label = ({
+  label,
+  url,
+  hidden,
+  disabled,
+  active,
+  onClick,
+  right,
+  invalid,
+  badge,
+  testId,
+}) => {
+  // TODO: Replace with named colors (error, success, warning) which can be defined in LESS
+  const col_danger = getComputedStyle(document.body).getPropertyValue(
+    '--color-text-error',
+  );
+  return (
+    // eslint-disable-next-line jsx-a11y/anchor-is-valid
+    <a
+      id={label}
+      href={url}
+      className={cx(
+        styles.item,
+        active ? styles.active : '',
+        disabled ? styles.disabled : '',
+        hidden && !active ? styles.hidden : '',
+        right ? styles.right : styles.left,
+      )}
+      onClick={onClick}
+      data-testid={testId}
+    >
+      {invalid ? (
+        <Badge small margin="-4px" color={col_danger} title="!">
+          {label}
+        </Badge>
+      ) : badge ? (
+        <Badge small margin="-4px" title={badge}>
+          {label}
+        </Badge>
+      ) : (
+        label
+      )}
+    </a>
+  );
+};

package/src/components/tabs/tabs.jsx

@@ -0,0 +1,191 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { Label } from './label';
+import { Content } from './content';
+import styles from './tabs.module.less';
+import { standardizeInputs } from '../select/select.input';
+import { DisabledContext } from '../../helpers/disabled-context';
+
+export const Tabs = ({
+  name,
+  options: rawOptions,
+  children,
+  value: rawValue,
+  onChange,
+  padding,
+  margin,
+  contentPadding,
+  //deprecated:
+  onChangeTab,
+  activeTabIndex: rawActiveTabIndex,
+  tabs: tabsConfig,
+  testId,
+}) => {
+  const disabledContext = useContext(DisabledContext);
+
+  //----------------------------------------------------------------------------
+  // Deprecation / backwards-compatibility
+  const isDeprecated = onChangeTab !== undefined;
+
+  const rawTabs = children
+    ? children.map((c, i) => ({
+        value: i,
+        url: c.props.url,
+        label: c.props.label,
+        hidden: c.props.hidden,
+        disabled: c.props.disabled || disabledContext,
+        badge: c.props.badge,
+        testId: c.props?.testId && `${c.props.testId}-${i}`,
+      }))
+    : rawOptions || tabsConfig;
+  const {
+    simpleInputs,
+    options: tabs,
+    selectedOptions: value,
+  } = isDeprecated
+    ? {
+        simpleInputs: false,
+        options: rawTabs,
+        selectedOptions: undefined,
+      }
+    : standardizeInputs(rawTabs, rawValue);
+  const selectedValue =
+    isDeprecated || value === undefined || value === null
+      ? undefined
+      : simpleInputs
+      ? value
+      : value.value;
+  const activeTabIndexBase =
+    rawActiveTabIndex !== undefined
+      ? rawActiveTabIndex
+      : tabs.findIndex((t) => t.value === selectedValue);
+  const activeTabIndex = activeTabIndexBase === -1 ? 0 : activeTabIndexBase;
+  //----------------------------------------------------------------------------
+
+  const renderTab = (tab, index) => {
+    const {
+      label,
+      url,
+      hidden,
+      disabled,
+      value,
+      right,
+      invalid,
+      badge,
+      testId,
+    } = tab;
+    return (
+      <Label
+        label={label}
+        url={url}
+        key={index}
+        hidden={hidden}
+        disabled={disabled || disabledContext}
+        invalid={invalid}
+        badge={badge}
+        right={right}
+        active={
+          isDeprecated ? index === activeTabIndex : value === selectedValue
+        }
+        onClick={
+          isDeprecated
+            ? () => {
+                //deprecated
+                const value = tab.key || label || null; //return key if it exists, otherwise use label
+                onChangeTab(index, value);
+              }
+            : (evt) => {
+                evt.target.name = name;
+                evt.target.value = tab.value;
+                evt.target.label = label;
+                onChange(evt);
+              }
+        }
+        testId={testId}
+      />
+    );
+  };
+
+  if (tabs) {
+    return (
+      <div>
+        <div
+          className={cx(
+            styles.tabs,
+            padding ? styles.padding : '',
+            margin ? styles.margin : '',
+          )}
+          data-testid={testId}
+        >
+          {tabs.map(renderTab)}
+        </div>
+        <Content
+          activeTabIndex={activeTabIndex}
+          contentPadding={contentPadding}
+        >
+          {children}
+        </Content>
+      </div>
+    );
+  }
+  return null;
+};
+
+Tabs.defaultProps = {
+  name: undefined,
+  options: null,
+  children: null,
+  onChange: () => {},
+  padding: false,
+  margin: true,
+  contentPadding: true,
+  //deprecated:
+  activeTabIndex: undefined,
+  tabs: undefined,
+  onChangeTab: undefined,
+  testId: undefined,
+};
+
+export const tabOptionShape = PropTypes.shape({
+  label: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  url: PropTypes.string,
+  hidden: PropTypes.bool,
+  disabled: PropTypes.bool,
+  invalid: PropTypes.bool,
+  badge: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  right: PropTypes.bool,
+  testId: PropTypes.string,
+});
+
+export const tabSelectedOptionShape = PropTypes.shape({
+  label: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+});
+
+const TabsShapeDeprecated = {
+  tabs: PropTypes.arrayOf(tabOptionShape),
+  children: PropTypes.node,
+  activeTabIndex: PropTypes.number,
+  onChangeTab: PropTypes.func,
+  padding: PropTypes.bool,
+  margin: PropTypes.bool,
+  contentPadding: PropTypes.bool,
+};
+
+const TabsShape = {
+  name: PropTypes.string,
+  options: PropTypes.arrayOf(tabOptionShape),
+  children: PropTypes.node,
+  value: tabSelectedOptionShape,
+  onChange: PropTypes.func,
+  padding: PropTypes.bool,
+  margin: PropTypes.bool,
+  contentPadding: PropTypes.bool,
+};
+
+Tabs.propTypes = PropTypes.oneOfType([
+  PropTypes.shape(TabsShape), //only use this for new usages
+  PropTypes.shape(TabsShapeDeprecated), //deprecated Select interface
+]).isRequired;

package/src/components/tabs/tabs.module.less

@@ -0,0 +1,73 @@
+@import '../../style/variables.less';
+
+.tabs {
+  display: flex;
+  flex-wrap: wrap;
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+
+  &.padding {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  &.margin {
+    margin: 1rem 0;
+  }
+}
+
+.contentPadding {
+  padding-top: 10px;
+}
+
+.item {
+  align-self: flex-end;
+  display: flex;
+  align-items: center;
+  position: relative;
+  vertical-align: middle;
+  line-height: 1;
+  text-decoration: none;
+  flex: 0 0 auto;
+  user-select: none;
+  padding: 0.85714286em 0;
+  transition: border 0.1s ease, color 0.1s ease;
+  margin-bottom: -1px;
+  border-bottom: 1px solid transparent;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: normal;
+  color: var(--color-text-primary);
+  cursor: pointer;
+
+  &:not(:last-child) {
+    margin-right: 1.5rem;
+  }
+
+  &:hover {
+    color: var(--color-text-primary-hover);
+  }
+
+  &:active {
+    color: var(--color-text-primary-active);
+  }
+
+  &.active {
+    border-color: var(--color-text);
+    color: var(--color-text);
+    cursor: default;
+  }
+
+  &.hidden {
+    display: none !important;
+  }
+
+  &.disabled {
+    color: var(--color-text-faint);
+    pointer-events: none;
+  }
+
+  &.left + .item.right {
+    margin-left: auto;
+  }
+}

package/src/components/tabs/tabs.stories.jsx

@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import { Tabs } from '../../..';
+
+export default {
+  title: 'Navigation/Tabs',
+  component: Tabs,
+  args: {
+    name: 'example',
+    options: [
+      { label: 'Tab', value: 0 },
+      { label: 'Tab', value: 1 },
+      { label: 'With Badge', value: 2, badge: '3' },
+      { label: 'Invalid', value: 3, invalid: true },
+      { label: 'Disabled', value: 4, disabled: true },
+      { label: 'Hidden tab', value: 5, hidden: true },
+    ],
+    value: 0,
+  },
+};
+
+const Template = (args) => (
+  <Tabs
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args}
+  />
+);
+export const Default = Template.bind({});
+
+export const WithChildren = Template.bind({});
+WithChildren.args = {
+  children: [
+    <div label="Tab 0">
+      <h3>Tab 0 Content</h3>
+    </div>,
+    <div label="Tab 1" hidden>
+      <h3>Tab 1 Content</h3>
+    </div>,
+    <div label="Tab 2" disabled>
+      <h3>Tab 2 Content</h3>
+    </div>,
+    <div label="Tab 3">
+      <h3>Tab 3 Content</h3>
+    </div>,
+    <div label="Tab 4">
+      <h3>Tab 4 Content</h3>
+    </div>,
+  ],
+};
+
+export const NoMargin = Template.bind({});
+NoMargin.args = { margin: false };
+
+export const HorizontalPadding = Template.bind({});
+HorizontalPadding.parameters = {
+  layout: 'fullscreen',
+  docs: {
+    description: {
+      story: 'When you want the divider to fill the edges of its container.',
+    },
+  },
+};
+HorizontalPadding.args = { padding: true };
+
+export const Alignment = Template.bind({});
+Alignment.args = {
+  options: [
+    { label: 'Tab 0', value: 0 },
+    { label: 'Tab 1', value: 1 },
+    { label: 'Tab 2', value: 2 },
+    { label: 'Tab 3', value: 3, right: true },
+    { label: 'Tab 4', value: 4, right: true },
+  ],
+};
+
+export const Managed = () => {
+  const options = [
+    {
+      label: 'Strawberries',
+      value: 'strawberries',
+    },
+    {
+      label: 'Bananas',
+      value: 'bananas',
+    },
+    {
+      label: 'Apples',
+      value: 'apples',
+      disabled: true,
+    },
+    {
+      label: 'Pomegranates',
+      value: 'pomegranates',
+    },
+  ];
+  const [selectedTab, setSelectedTab] = useState(options[0]);
+  return (
+    <>
+      <Tabs
+        name="example"
+        value={selectedTab}
+        options={options}
+        onChange={(evt) => {
+          const { value, label } = evt.target;
+          setSelectedTab({ value, label });
+        }}
+      />
+      <span>Eating {selectedTab.value}...</span>
+    </>
+  );
+};

package/src/components/text/text.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import styles from './text.module.less';
+
+export const Text = ({
+  children,
+  bold,
+  center,
+  error,
+  faint,
+  link,
+  muted,
+  onClick,
+  small,
+  success,
+  warning,
+}) => {
+  return (
+    <span
+      className={cx(
+        bold && styles.bold,
+        center && styles.center,
+        error && styles.error,
+        faint && styles.faint,
+        link && styles.link,
+        muted && styles.muted,
+        onClick && styles.clickable,
+        small && styles.small,
+        success && styles.success,
+        warning && styles.warning,
+      )}
+      onClick={onClick}
+    >
+      {children}
+    </span>
+  );
+};
+
+Text.defaultProps = {
+  bold: false,
+  center: false,
+  error: false,
+  faint: false,
+  link: false,
+  muted: false,
+  onClick: null,
+  small: false,
+  success: false,
+  warning: false,
+};
+
+Text.propTypes = {
+  bold: PropTypes.bool,
+  center: PropTypes.bool,
+  error: PropTypes.bool,
+  faint: PropTypes.bool,
+  link: PropTypes.bool,
+  muted: PropTypes.bool,
+  onClick: PropTypes.func,
+  small: PropTypes.bool,
+  success: PropTypes.bool,
+  warning: PropTypes.bool,
+};

package/src/components/text/text.module.less

@@ -0,0 +1,45 @@
+@import '../../style/variables.less';
+
+.bold {
+  font-weight: bold;
+}
+
+.center {
+  text-align: center;
+}
+
+.muted {
+  color: var(--color-text-muted);
+}
+
+.faint {
+  color: var(--color-text-faint);
+}
+
+.success {
+  color: var(--color-text-success);
+}
+
+.warning {
+  color: var(--color-text-warning);
+}
+
+.error {
+  color: var(--color-text-error);
+}
+
+.small {
+  font-size: 0.9em;
+}
+
+.link {
+  color: var(--color-text-primary);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--color-text-primary-hover);
+  }
+  &:active {
+    color: var(--color-text-primary-active);
+  }
+}

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Text } from '../../..';
+
+export default {
+  title: 'Basic/Text',
+  component: Text,
+  args: {
+    children: 'Text goes here',
+    small: false,
+    muted: false,
+    error: false,
+    warning: false,
+    success: false,
+    link: false,
+    onClick: undefined,
+  },
+};
+
+const Template = (args) => (
+  <Text
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args}
+  />
+);
+export const Default = Template.bind({});
+
+export const Small = Template.bind({});
+Small.args = { small: true };
+
+export const Link = Template.bind({});
+Link.args = { link: true, onClick: () => {} };