@spaced-out/ui-design-system 0.0.1-alpha.0

package/lib/components/Grid/Grid.js.flow

@@ -0,0 +1,88 @@
+// @flow strict
+import * as React from 'react';
+
+import {classify} from '../../utils/classify';
+
+import css from './Grid.module.css';
+
+
+export type RowProps = {
+  className?: string,
+  children?: React.Node,
+  span?: number,
+  offset?: number,
+  gridType?: 'small' | 'medium' | 'large',
+};
+
+const GRID_SYSTEM_MAP = {
+  small: 24,
+  medium: 12,
+  large: 6,
+};
+
+export const Row = ({
+  className,
+  children,
+  span = 1,
+  gridType = 'medium',
+}: RowProps): React.Node => {
+  const GRID_COLUMN_COUNT = GRID_SYSTEM_MAP[gridType];
+  let columnSpanCount = 0;
+  let lastChildColCount = 0;
+  const childrenWithProps = React.Children.map(children, (child) => {
+    if (React.isValidElement(child)) {
+      const {span = 1, offset = 0} = child.props;
+      if (span < 1) {
+        console.error(`span can not be less than one`);
+        return;
+      }
+      if (offset < 0) {
+        console.error(`offset can not be negative`);
+        return;
+      }
+      lastChildColCount = columnSpanCount;
+      columnSpanCount = lastChildColCount + offset + span;
+      if (columnSpanCount <= GRID_COLUMN_COUNT) {
+        return React.cloneElement(child, {
+          gridColumnStart: lastChildColCount + offset + 1,
+          gridColumnEnd: `span ${span}`,
+        });
+      } else {
+        console.error(`number of column exceed ${GRID_COLUMN_COUNT}`);
+      }
+    }
+  });
+
+  return (
+    <div
+      data-testid="Grid"
+      className={classify(css.gridRow, css[`gridRowSpan${span}`], className)}
+      style={{gridTemplateColumns: `repeat(${GRID_COLUMN_COUNT}, 1fr)`}}
+    >
+      {childrenWithProps}
+    </div>
+  );
+};
+
+export type ColProps = {
+  className?: string,
+  children?: React.Node,
+  span?: number,
+  offset?: number,
+  gridColumnStart?: number,
+  gridColumnEnd?: number,
+};
+
+export const Col = ({
+  className,
+  children,
+  gridColumnStart,
+  gridColumnEnd,
+}: ColProps): React.Node => (
+  <div
+    className={classify(css.gridColumn, className)}
+    style={{gridColumnStart, gridColumnEnd}}
+  >
+    {children}
+  </div>
+);

package/lib/components/Grid/Grid.module.css

@@ -0,0 +1,30 @@
+@value (
+  spaceNone,
+  spaceMedium,
+  spaceLarge
+) from '../../styles/variables/_space.css';
+
+@value (
+  size960,
+  sizeFluid
+) from '../../styles/variables/_size.css';
+
+.gridRow {
+  display: grid !important;
+  width: sizeFluid;
+  min-width: size960;
+  height: sizeFluid;
+  gap: spaceMedium;
+  padding: spaceNone spaceLarge;
+  grid-auto-flow: row;
+  grid-auto-columns: 1fr;
+  grid-column-gap: spaceMedium;
+  grid-row-gap: spaceMedium;
+  grid-auto-rows: sizeFluid;
+  box-sizing: border-box;
+}
+
+.gridColumn {
+  display: flex;
+  align-items: center;
+}

package/lib/components/Grid/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Grid = require("./Grid");
+Object.keys(_Grid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Grid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Grid[key];
+    }
+  });
+});

package/lib/components/Grid/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './Grid';

package/lib/components/Icon/ClickableIcon.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CloseIcon = exports.ClickableIcon = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button");
+var _Text = require("../Text");
+var _ = require("./");
+var _ClickableIconModule = _interopRequireDefault(require("./ClickableIcon.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+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 ClickableIcon = _ref => {
+  let {
+    size = 'medium',
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.js)(_Button.UnstyledButton, {
+    ...props,
+    className: (0, _classify.default)(_ClickableIconModule.default.button, {
+      [_ClickableIconModule.default.small]: size === 'small',
+      [_ClickableIconModule.default.medium]: size === 'medium'
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.js)(_.Icon, {
+      size: size,
+      ...props
+    })
+  });
+};
+exports.ClickableIcon = ClickableIcon;
+const CloseIcon = _ref2 => {
+  let {
+    size = 'medium',
+    type = 'regular',
+    color = _Text.TEXT_COLORS.primary,
+    onClick
+  } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.js)(ClickableIcon, {
+    name: "close",
+    size: size,
+    type: type,
+    color: color,
+    onClick: onClick
+  });
+};
+exports.CloseIcon = CloseIcon;

package/lib/components/Icon/ClickableIcon.js.flow

@@ -0,0 +1,51 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {ColorTypes} from '../../types/typography';
+import classify from '../../utils/classify';
+import {UnstyledButton} from '../Button';
+import {TEXT_COLORS} from '../Text';
+
+import type {IconProps, IconSize, IconType} from './';
+import {Icon} from './';
+
+import css from './ClickableIcon.module.css';
+
+
+export const ClickableIcon = ({
+  size = 'medium',
+  ...props
+}: IconProps): React.Node => (
+  <UnstyledButton
+    {...props}
+    className={classify(css.button, {
+      [css.small]: size === 'small',
+      [css.medium]: size === 'medium',
+    })}
+  >
+    <Icon size={size} {...props} />
+  </UnstyledButton>
+);
+
+export type CloseIconProps = {
+  size?: IconSize,
+  type?: IconType,
+  color?: ColorTypes,
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+};
+
+export const CloseIcon = ({
+  size = 'medium',
+  type = 'regular',
+  color = TEXT_COLORS.primary,
+  onClick,
+}: CloseIconProps): React.Node => (
+  <ClickableIcon
+    name="close"
+    size={size}
+    type={type}
+    color={color}
+    onClick={onClick}
+  />
+);

package/lib/components/Icon/ClickableIcon.module.css

@@ -0,0 +1,50 @@
+@value (
+  colorFocusPrimary
+) from '../../styles/variables/_color.css';
+
+@value (
+  size18,
+  size24
+) from '../../styles/variables/_size.css';
+
+@value (
+  spaceNone
+) from '../../styles/variables/_space.css';
+
+@value (
+  borderRadiusXSmall,
+  borderWidthNone,
+  borderWidthTertiary
+) from '../../styles/variables/_border.css';
+
+button {
+  background: none;
+  border: none;
+}
+
+.button {
+  composes: motionEaseInEaseOut from '../../styles/animation.module.css';
+  display: flex;
+  padding: spaceNone;
+  justify-content: center;
+  align-items: center;
+  outline: none;
+  cursor: pointer;
+}
+
+.medium {
+  height: size24;
+  width: size24;
+  border-radius: borderRadiusXSmall;
+}
+
+.small {
+  height: size18;
+  width: size18;
+  border-radius: borderRadiusXSmall;
+}
+
+.button:focus {
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusPrimary;
+}

package/lib/components/Icon/FontAwesomeLibrary.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("../../assets/fontawesome/css/all.min.css");

package/lib/components/Icon/FontAwesomeLibrary.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+import '../../assets/fontawesome/css/all.min.css';

package/lib/components/Icon/Icon.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Icon = void 0;
+var React = _interopRequireWildcard(require("react"));
+require("./FontAwesomeLibrary");
+var _typography = require("../../types/typography");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _typographyModule = _interopRequireDefault(require("../../styles/typography.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+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; }
+
+// get our fontawesome imports
+
+const Icon = _ref => {
+  let {
+    type = 'regular',
+    name = '',
+    size = 'medium',
+    color = _typography.TEXT_COLORS.primary,
+    className,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.js)(_jsxRuntime.Fragment, {
+    children: !!name && /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+      className: (0, _classify.default)(_typographyModule.default.centerAlignFlex, _typographyModule.default[`${size}Icon`], _typographyModule.default[color], className),
+      onClick: onClick,
+      children: /*#__PURE__*/(0, _jsxRuntime.js)("i", {
+        className: (0, _classify.default)(`fa-${type} fa-${name}`)
+      })
+    })
+  });
+};
+exports.Icon = Icon;

package/lib/components/Icon/Icon.js.flow

@@ -0,0 +1,51 @@
+// @flow strict
+
+import * as React from 'react';
+
+// get our fontawesome imports
+import './FontAwesomeLibrary';
+
+import type {ColorTypes} from '../../types/typography';
+import {TEXT_COLORS} from '../../types/typography';
+import classify from '../../utils/classify';
+
+import typographyStyle from '../../styles/typography.module.css';
+
+
+export type IconType = 'regular' | 'solid';
+
+export type IconSize = 'small' | 'medium';
+
+export type IconProps = {
+  type?: IconType,
+  name: string,
+  size?: IconSize,
+  color?: ColorTypes,
+  className?: string,
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+};
+
+export const Icon = ({
+  type = 'regular',
+  name = '',
+  size = 'medium',
+  color = TEXT_COLORS.primary,
+  className,
+  onClick,
+}: IconProps): React.Node => (
+  <>
+    {!!name && (
+      <div
+        className={classify(
+          typographyStyle.centerAlignFlex,
+          typographyStyle[`${size}Icon`],
+          typographyStyle[color],
+          className,
+        )}
+        onClick={onClick}
+      >
+        <i className={classify(`fa-${type} fa-${name}`)} />
+      </div>
+    )}
+  </>
+);

package/lib/components/Icon/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ClickableIcon", {
+  enumerable: true,
+  get: function () {
+    return _ClickableIcon.ClickableIcon;
+  }
+});
+Object.defineProperty(exports, "CloseIcon", {
+  enumerable: true,
+  get: function () {
+    return _ClickableIcon.CloseIcon;
+  }
+});
+Object.defineProperty(exports, "Icon", {
+  enumerable: true,
+  get: function () {
+    return _Icon.Icon;
+  }
+});
+var _ClickableIcon = require("./ClickableIcon.js");
+var _Icon = require("./Icon");

package/lib/components/Icon/index.js.flow

@@ -0,0 +1,6 @@
+// @flow strict
+
+export type {CloseIconProps} from './ClickableIcon';
+export {ClickableIcon, CloseIcon} from './ClickableIcon.js';
+export type {IconProps, IconSize, IconType} from './Icon';
+export {Icon} from './Icon';

package/lib/components/InContextAlert/InContextAlert.js

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InContextAlert = exports.ALERT_SEMANTIC = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _typography = require("../../types/typography");
+var _classify = require("../../utils/classify");
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _Truncate = require("../Truncate");
+var _InContextAlertModule = _interopRequireDefault(require("./InContextAlert.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+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 ALERT_SEMANTIC = Object.freeze({
+  neutral: 'neutral',
+  success: 'success',
+  information: 'information',
+  warning: 'warning',
+  danger: 'danger'
+});
+exports.ALERT_SEMANTIC = ALERT_SEMANTIC;
+const AlertIcon = _ref => {
+  let {
+    semantic,
+    leftIconName
+  } = _ref;
+  switch (semantic) {
+    case ALERT_SEMANTIC.neutral:
+      return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+        color: _typography.TEXT_COLORS.neutral,
+        name: leftIconName ? leftIconName : 'face-smile',
+        size: "small",
+        type: "regular"
+      });
+    case ALERT_SEMANTIC.success:
+      return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+        name: "circle-check",
+        size: "small",
+        color: _typography.TEXT_COLORS.success,
+        type: "regular"
+      });
+    case ALERT_SEMANTIC.information:
+      return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+        name: "circle-info",
+        size: "small",
+        color: _typography.TEXT_COLORS.information,
+        type: "regular"
+      });
+    case ALERT_SEMANTIC.warning:
+      return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+        name: "circle-exclamation",
+        size: "small",
+        color: _typography.TEXT_COLORS.warning,
+        type: "regular"
+      });
+    case ALERT_SEMANTIC.danger:
+      return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+        name: "shield-exclamation",
+        size: "small",
+        color: _typography.TEXT_COLORS.danger,
+        type: "regular"
+      });
+    default:
+      return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+        color: _typography.TEXT_COLORS.neutral,
+        name: "face-smile",
+        size: "small",
+        type: "regular"
+      });
+  }
+};
+const InContextAlert = props => {
+  const {
+    classNames,
+    semantic = ALERT_SEMANTIC.neutral,
+    dismissable,
+    children,
+    selfDismiss = false,
+    leftIconName = '',
+    onCloseClick
+  } = props;
+  const [dismissed, setDismissed] = React.useState(false);
+  const closeClickHandler = e => {
+    onCloseClick && onCloseClick(e);
+    selfDismiss && setDismissed(true);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.js)(_jsxRuntime.Fragment, {
+    children: !dismissed && /*#__PURE__*/(0, _jsxRuntime.jss)("div", {
+      className: (0, _classify.classify)(_InContextAlertModule.default.alertContainer, {
+        [_InContextAlertModule.default.neutral]: semantic === ALERT_SEMANTIC.neutral,
+        [_InContextAlertModule.default.success]: semantic === ALERT_SEMANTIC.success,
+        [_InContextAlertModule.default.information]: semantic === ALERT_SEMANTIC.information,
+        [_InContextAlertModule.default.warning]: semantic === ALERT_SEMANTIC.warning,
+        [_InContextAlertModule.default.danger]: semantic === ALERT_SEMANTIC.danger
+      }, classNames?.wrapper),
+      children: [/*#__PURE__*/(0, _jsxRuntime.js)(AlertIcon, {
+        semantic: semantic,
+        leftIconName: leftIconName
+      }), React.Children.count(children) > 0 && /*#__PURE__*/(0, _jsxRuntime.js)(_Text.SubTitleExtraSmall, {
+        className: (0, _classify.classify)(classNames?.alertText),
+        children: /*#__PURE__*/(0, _jsxRuntime.js)(_Truncate.Truncate, {
+          line: 2,
+          children: children
+        })
+      }), dismissable && /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+        color: _typography.TEXT_COLORS.primary,
+        name: "close",
+        size: "small",
+        type: "regular",
+        onClick: closeClickHandler,
+        className: _InContextAlertModule.default.closeIcon
+      })]
+    })
+  });
+};
+exports.InContextAlert = InContextAlert;