@spaced-out/ui-design-system 0.0.37 → 0.0.39

package/.cspell/custom-words.txt

@@ -15,6 +15,8 @@ Gaurav
 Lipsey
 Neue
 Nishant
+nonbreaking
+nonstrict
 OPACITYS
 partialformat
 premajor

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.39](https://github.com/spaced-out/ui-design-system/compare/v0.0.38...v0.0.39) (2023-03-03)
+
+
+### Features
+
+* (GDS-145) table component ([#70](https://github.com/spaced-out/ui-design-system/issues/70)) ([5d4ccf8](https://github.com/spaced-out/ui-design-system/commit/5d4ccf8c8097cdb545ad9b1086569146b072d761))
+
+### [0.0.38](https://github.com/spaced-out/ui-design-system/compare/v0.0.37...v0.0.38) (2023-03-03)
+
+
+### Bug Fixes
+
+* exposed a classname for each option in a menu ([ef5feab](https://github.com/spaced-out/ui-design-system/commit/ef5feab4f4cc39b1d479641906a141250481dd95))
+
 ### [0.0.37](https://github.com/spaced-out/ui-design-system/compare/v0.0.36...v0.0.37) (2023-03-03)
 
 

package/design-tokens/size/base-size.json

@@ -51,6 +51,9 @@
     "42": {
       "value": "42px"
     },
+    "48": {
+      "value": "48px"
+    },
     "58": {
       "value": "58px"
     },
@@ -110,6 +113,9 @@
     },
     "fullViewportHeight": {
       "value": "100vh"
+    },
+    "fullViewportWidth": {
+      "value": "100vw"
     }
   }
 }

package/lib/components/Checkbox/Checkbox.js.flow

@@ -12,6 +12,11 @@ import css from './Checkbox.module.css';
 
 type ClassNames = $ReadOnly<{wrapper?: string, label?: string}>;
 
+/*
+  Note: An indeterminate state has a higher priority.
+  If true checkbox would be in an indeterminate state. If indeterminate is false, it will owner checked value.
+*/
+
 export type CheckboxProps = {
   name?: string,
   value?: string,

package/lib/components/Checkbox/Checkbox.module.css

@@ -66,6 +66,7 @@
 
 .checkboxSquare .disabled {
   cursor: not-allowed;
+  border: borderWidthTertiary solid colorFillDisabled;
 }
 
 .inputCheckbox {
@@ -124,7 +125,6 @@ input[type='checkbox']:disabled {
 }
 
 .disabled {
-  border: borderWidthTertiary solid colorFillDisabled;
   pointer-events: none;
   cursor: not-allowed;
 }

package/lib/components/Menu/Menu.js.flow

@@ -9,7 +9,7 @@ import {MenuOptionButton} from './MenuOptionButton.js';
 import css from './Menu.module.css';
 
 
-type ClassNames = $ReadOnly<{wrapper?: string}>;
+type ClassNames = $ReadOnly<{wrapper?: string, option?: string}>;
 
 export type MenuOption = {
   key?: string,

package/lib/components/Menu/MenuOptionButton.js

@@ -20,7 +20,8 @@ const MenuOptionButton = props => {
     size,
     onSelect,
     selectedOption,
-    menuDisabled
+    menuDisabled,
+    classNames
   } = props;
   const {
     key,
@@ -46,7 +47,7 @@ const MenuOptionButton = props => {
       [_MenuModule.default.disabled]: menuDisabled || disabled,
       [_MenuModule.default.withIconLeft]: !!iconLeft,
       [_MenuModule.default.withIconRight]: !!iconRight
-    }),
+    }, classNames?.option),
     disabled: menuDisabled || disabled,
     onClick: () => onSelect && onSelect(option),
     autoFocus: selectedOption?.key === key

package/lib/components/Menu/MenuOptionButton.js.flow

@@ -11,7 +11,7 @@ import type {MenuOption} from './Menu.js';
 import css from './Menu.module.css';
 
 
-type ClassNames = $ReadOnly<{wrapper?: string}>;
+type ClassNames = $ReadOnly<{wrapper?: string, option?: string}>;
 
 export type MenuOptionProps = {
   option: MenuOption,
@@ -25,7 +25,8 @@ export type MenuOptionProps = {
 };
 
 export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
-  const {option, size, onSelect, selectedOption, menuDisabled} = props;
+  const {option, size, onSelect, selectedOption, menuDisabled, classNames} =
+    props;
   const {
     key,
     label,
@@ -46,14 +47,18 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
 
   return (
     <UnstyledButton
-      className={classify(css.option, {
-        [css.selected]: key === selectedOption?.key,
-        [css.optionSmall]: buttonSize === 'small',
-        [css.optionMedium]: buttonSize === 'medium',
-        [css.disabled]: menuDisabled || disabled,
-        [css.withIconLeft]: !!iconLeft,
-        [css.withIconRight]: !!iconRight,
-      })}
+      className={classify(
+        css.option,
+        {
+          [css.selected]: key === selectedOption?.key,
+          [css.optionSmall]: buttonSize === 'small',
+          [css.optionMedium]: buttonSize === 'medium',
+          [css.disabled]: menuDisabled || disabled,
+          [css.withIconLeft]: !!iconLeft,
+          [css.withIconRight]: !!iconRight,
+        },
+        classNames?.option,
+      )}
       disabled={menuDisabled || disabled}
       onClick={() => onSelect && onSelect(option)}
       autoFocus={selectedOption?.key === key}

package/lib/components/Table/Cell.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SingleCell = exports.Row = exports.PaddedDoubleContentCell = exports.PaddedContentCell = exports.MonogramCell = exports.Monogram = exports.DoubleCell = exports.DateCell = exports.Cells = exports.Cell = exports.BasicSingleCell = exports.BasicDoubleCell = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _formatDistance = _interopRequireDefault(require("date-fns/formatDistance"));
+var _parseISO = _interopRequireDefault(require("date-fns/parseISO"));
+var _classify = require("../../utils/classify");
+var _makeClassNameComponent = require("../../utils/makeClassNameComponent");
+var _Avatar = require("../Avatar");
+var _Text = require("../Text");
+var _TableModule = _interopRequireDefault(require("./Table.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const Cells = _ref => {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: (0, _classify.classify)(_TableModule.default.row, className)
+  }, rest), children);
+};
+exports.Cells = Cells;
+const Row = Cells;
+exports.Row = Row;
+const Cell = _ref2 => {
+  let {
+    children,
+    className
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.classify)(_TableModule.default.cell, className)
+  }, children);
+};
+exports.Cell = Cell;
+const BasicSingleCell = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.defaultSingleCell, 'td');
+exports.BasicSingleCell = BasicSingleCell;
+const BasicDoubleCell = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.defaultDoubleCell, 'td');
+exports.BasicDoubleCell = BasicDoubleCell;
+const PaddedContentCell = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.singleContentCell, 'td');
+exports.PaddedContentCell = PaddedContentCell;
+const PaddedDoubleContentCell = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.doubleContentCell, 'td');
+exports.PaddedDoubleContentCell = PaddedDoubleContentCell;
+const SingleCell = _ref3 => {
+  let {
+    title,
+    className
+  } = _ref3;
+  return /*#__PURE__*/React.createElement(PaddedContentCell, {
+    className: className
+  }, /*#__PURE__*/React.createElement(_Text.BodyMedium, {
+    className: _TableModule.default.paddedTitleBlock
+  }, title));
+};
+exports.SingleCell = SingleCell;
+const DoubleCell = _ref4 => {
+  let {
+    title,
+    subtitle,
+    className
+  } = _ref4;
+  return /*#__PURE__*/React.createElement(PaddedDoubleContentCell, {
+    className: className
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _TableModule.default.paddedTitleBlock
+  }, /*#__PURE__*/React.createElement(_Text.BodyMedium, {
+    className: _TableModule.default.doubleTitle
+  }, title), /*#__PURE__*/React.createElement(_Text.BodySmall, {
+    color: _Text.TEXT_COLORS.tertiary,
+    className: _TableModule.default.doubleSubtitle
+  }, subtitle ?? '')));
+};
+exports.DoubleCell = DoubleCell;
+const DateCell = _ref5 => {
+  let {
+    date,
+    className
+  } = _ref5;
+  const parsedDate = typeof date === 'object' ? date : (0, _parseISO.default)(date);
+  return /*#__PURE__*/React.createElement(DoubleCell, {
+    title: `${parsedDate.getMonth() + 1} / ${parsedDate.getDate() + 1} / ${parsedDate.getFullYear()}`,
+    subtitle: `${(0, _formatDistance.default)(parsedDate, new Date())} ago`,
+    className: className
+  });
+};
+exports.DateCell = DateCell;
+const Monogram = _ref6 => {
+  let {
+    initials
+  } = _ref6;
+  return /*#__PURE__*/React.createElement(_Avatar.Avatar, {
+    size: "small",
+    text: initials
+  });
+};
+exports.Monogram = Monogram;
+const MonogramCell = _ref7 => {
+  let {
+    initials,
+    className
+  } = _ref7;
+  return /*#__PURE__*/React.createElement(PaddedContentCell, {
+    className: className
+  }, /*#__PURE__*/React.createElement(Monogram, {
+    initials: initials
+  }));
+};
+exports.MonogramCell = MonogramCell;

package/lib/components/Table/Cell.js.flow

@@ -0,0 +1,123 @@
+// @flow strict
+
+import * as React from 'react';
+// $FlowIssue[nonstrict-import] date-fns
+import formatDistance from 'date-fns/formatDistance';
+// $FlowIssue[nonstrict-import] date-fns
+import parseISO from 'date-fns/parseISO';
+
+import {classify} from '../../utils/classify';
+import type {ClassNameComponent} from '../../utils/makeClassNameComponent';
+import {makeClassNameComponent} from '../../utils/makeClassNameComponent';
+import {Avatar} from '../Avatar';
+import {BodyMedium, BodySmall, TEXT_COLORS} from '../Text';
+
+import css from './Table.module.css';
+
+
+type CellsProps = {
+  children?: React.Node,
+  className?: ?string,
+  truncatedText?: React.Node,
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+};
+
+export const Cells = ({
+  children,
+  className,
+  ...rest
+}: CellsProps): React.Element<'div'> => (
+  <div className={classify(css.row, className)} {...rest}>
+    {children}
+  </div>
+);
+export const Row = Cells;
+
+export const Cell = ({
+  children,
+  className,
+}: CellsProps): React.Element<'div'> => (
+  <div className={classify(css.cell, className)}>{children}</div>
+);
+
+export const BasicSingleCell: ClassNameComponent<'td'> = makeClassNameComponent(
+  css.defaultSingleCell,
+  'td',
+);
+export const BasicDoubleCell: ClassNameComponent<'td'> = makeClassNameComponent(
+  css.defaultDoubleCell,
+  'td',
+);
+
+export const PaddedContentCell: ClassNameComponent<'td'> =
+  makeClassNameComponent(css.singleContentCell, 'td');
+
+export const PaddedDoubleContentCell: ClassNameComponent<'td'> =
+  makeClassNameComponent(css.doubleContentCell, 'td');
+
+export const SingleCell = ({
+  title,
+  className,
+}: {
+  title: string,
+  icon?: React.Node,
+  className?: string,
+}): React.Node => (
+  <PaddedContentCell className={className}>
+    <BodyMedium className={css.paddedTitleBlock}>{title}</BodyMedium>
+  </PaddedContentCell>
+);
+
+export const DoubleCell = ({
+  title,
+  subtitle,
+  className,
+}: {
+  title: React.Node,
+  subtitle?: React.Node,
+  className?: string,
+}): React.Node => (
+  <PaddedDoubleContentCell className={className}>
+    <div className={css.paddedTitleBlock}>
+      <BodyMedium className={css.doubleTitle}>{title}</BodyMedium>
+      <BodySmall color={TEXT_COLORS.tertiary} className={css.doubleSubtitle}>
+        {subtitle ?? ''}
+      </BodySmall>
+    </div>
+  </PaddedDoubleContentCell>
+);
+
+export const DateCell = ({
+  date,
+  className,
+}: {
+  date: string | Date,
+  className?: string,
+}): React.Node => {
+  const parsedDate: Date = typeof date === 'object' ? date : parseISO(date);
+  return (
+    <DoubleCell
+      title={`${parsedDate.getMonth() + 1} / ${
+        parsedDate.getDate() + 1
+      } / ${parsedDate.getFullYear()}`}
+      subtitle={`${formatDistance(parsedDate, new Date())} ago`}
+      className={className}
+    />
+  );
+};
+
+export const Monogram = ({initials}: {initials: string}): React.Node => (
+  <Avatar size="small" text={initials} />
+);
+
+export const MonogramCell = ({
+  initials,
+  className,
+}: {
+  initials: string,
+  className?: string,
+}): React.Node => (
+  <PaddedContentCell className={className}>
+    <Monogram initials={initials} />
+  </PaddedContentCell>
+);

package/lib/components/Table/Row.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BasicRow = void 0;
+exports.DefaultRow = DefaultRow;
+exports.EmptyRow = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _makeClassNameComponent = require("../../utils/makeClassNameComponent");
+var _Checkbox = require("../Checkbox");
+var _CircularLoader = require("../CircularLoader");
+var _Text = require("../Text");
+var _Cell = require("./Cell");
+var _TableModule = _interopRequireDefault(require("./Table.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const BasicRow = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.defaultRow, 'tr');
+exports.BasicRow = BasicRow;
+const EmptyRow = _ref => {
+  let {
+    isLoading,
+    emptyText,
+    headersLength = 0,
+    customLoader
+  } = _ref;
+  return /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+    colSpan: headersLength
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _TableModule.default.emptyRow
+  }, isLoading ? customLoader ? customLoader : /*#__PURE__*/React.createElement("div", {
+    className: _TableModule.default.defaultLoader
+  }, ' ', /*#__PURE__*/React.createElement(_CircularLoader.CircularLoader, {
+    colorToken: "colorFillPrimary",
+    size: "large"
+  })) : emptyText || /*#__PURE__*/React.createElement(_Text.BodyLarge, {
+    color: _Text.TEXT_COLORS.secondary,
+    className: _TableModule.default.defaultEmptyText
+  }, "Nothing to display here."))));
+};
+
+// This is a fallback row we use to render a table when
+// initially stubbing out a design, the idea is you just avoid
+// passing in a Row component and instead let this render out
+// all the fields in the header in the short term
+//
+// Using the default row has the benefit that mismatches between
+// header and entries _will_ error out even though there are the
+// suppressions below
+exports.EmptyRow = EmptyRow;
+function DefaultRow(_ref2) {
+  let {
+    data,
+    extras,
+    headers,
+    selected,
+    onSelect,
+    className,
+    disabled
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(BasicRow, {
+    className: (0, _classify.default)(className, selected ? _TableModule.default.defaultSelectedBodyRow : _TableModule.default.defaultBodyRow)
+  }, selected != null && /*#__PURE__*/React.createElement(_Cell.PaddedContentCell, null, /*#__PURE__*/React.createElement("div", {
+    className: _TableModule.default.checkbox
+  }, /*#__PURE__*/React.createElement(_Checkbox.Checkbox, {
+    checked: selected ? true : false,
+    onChange: onSelect,
+    disabled: disabled
+  }))), headers.map((item, index) => {
+    const {
+      key,
+      render: Renderer,
+      className: cellClassName,
+      sticky
+    } = item;
+    const value = data[key];
+    return Renderer ? /*#__PURE__*/React.createElement(Renderer, {
+      key: index,
+      data: data,
+      extras: extras,
+      selected: selected,
+      className: (0, _classify.default)({
+        [_TableModule.default.stickyCell]: sticky
+      })
+    }) : /*#__PURE__*/React.createElement(_Cell.SingleCell, {
+      key: index,
+      title: String(value),
+      className: (0, _classify.default)(cellClassName, {
+        [_TableModule.default.stickyCell]: sticky
+      })
+    });
+  }));
+}

package/lib/components/Table/Row.js.flow

@@ -0,0 +1,145 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+import type {ClassNameComponent} from '../../utils/makeClassNameComponent';
+import {makeClassNameComponent} from '../../utils/makeClassNameComponent';
+import {Checkbox} from '../Checkbox';
+import {CircularLoader} from '../CircularLoader';
+import {BodyLarge, TEXT_COLORS} from '../Text';
+
+import {PaddedContentCell, SingleCell} from './Cell';
+import type {GenericObject} from './Table';
+import type {GenericHeaderItems} from './TableHeader';
+
+import css from './Table.module.css';
+
+// When using a custom Row prop, you need to create a component that looks like
+//     MyRow = (props: TableRowProps<Entries, Extras>): React.Node => {...}
+// otherwise flow will complain.
+// Note that b/c extras is often optional, you will need to explicitly include
+// `invariant(extras, 'extras exists');` in order to pull values out of
+// extras (flow will remind you that it is of type `U | void`)
+export type TableRowProps<T, U> = {
+  data: T,
+  extras?: U,
+  sortedKeys?: string[],
+  headers?: GenericHeaderItems<T, U>,
+  selected?: boolean,
+  disabled?: boolean,
+};
+
+export type TableRow<T, U> = React.ComponentType<TableRowProps<T, U>>;
+
+export const BasicRow: ClassNameComponent<'tr'> = makeClassNameComponent(
+  css.defaultRow,
+  'tr',
+);
+
+type EmptyRowProps = {
+  emptyText?: React.Node,
+  isLoading?: boolean,
+  headersLength: number,
+  customLoader?: React.Node,
+};
+
+export const EmptyRow = ({
+  isLoading,
+  emptyText,
+  headersLength = 0,
+  customLoader,
+}: EmptyRowProps): React.Element<'tr'> => (
+  <tr>
+    <td colSpan={headersLength}>
+      <div className={css.emptyRow}>
+        {isLoading ? (
+          customLoader ? (
+            customLoader
+          ) : (
+            <div className={css.defaultLoader}>
+              {' '}
+              <CircularLoader colorToken="colorFillPrimary" size="large" />
+            </div>
+          )
+        ) : (
+          emptyText || (
+            <BodyLarge
+              color={TEXT_COLORS.secondary}
+              className={css.defaultEmptyText}
+            >
+              Nothing to display here.
+            </BodyLarge>
+          )
+        )}
+      </div>
+    </td>
+  </tr>
+);
+
+// This is a fallback row we use to render a table when
+// initially stubbing out a design, the idea is you just avoid
+// passing in a Row component and instead let this render out
+// all the fields in the header in the short term
+//
+// Using the default row has the benefit that mismatches between
+// header and entries _will_ error out even though there are the
+// suppressions below
+export function DefaultRow<T: GenericObject, U: GenericObject>({
+  data,
+  extras,
+  headers,
+  selected,
+  onSelect,
+  className,
+  disabled,
+}: {
+  data: T,
+  extras?: U,
+  headers: GenericHeaderItems<T, U>,
+  selected?: boolean,
+  // value dependent on checkbox checked value
+  onSelect?: ({value: string, checked: boolean}) => mixed,
+  className?: string,
+  disabled?: boolean,
+}): React.Node {
+  return (
+    <BasicRow
+      className={classify(
+        className,
+        selected ? css.defaultSelectedBodyRow : css.defaultBodyRow,
+      )}
+    >
+      {selected != null && (
+        <PaddedContentCell>
+          <div className={css.checkbox}>
+            <Checkbox
+              checked={selected ? true : false}
+              onChange={onSelect}
+              disabled={disabled}
+            />
+          </div>
+        </PaddedContentCell>
+      )}
+      {headers.map((item, index) => {
+        const {key, render: Renderer, className: cellClassName, sticky} = item;
+        const value = data[key];
+        return Renderer ? (
+          <Renderer
+            key={index}
+            data={data}
+            extras={extras}
+            selected={selected}
+            className={classify({[css.stickyCell]: sticky})}
+          />
+        ) : (
+          <SingleCell
+            key={index}
+            title={String(value)}
+            className={classify(cellClassName, {[css.stickyCell]: sticky})}
+          />
+        );
+      })}
+    </BasicRow>
+  );
+}