@spaced-out/ui-design-system 0.4.13-beta.1 → 0.4.14

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

@@ -0,0 +1,111 @@
+// @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';
+
+
+type ClassNames = $ReadOnly<{
+  icon?: string,
+  button?: string,
+}>;
+
+export type ClickableIconProps = {
+  ...IconProps,
+  disabled?: boolean,
+  classNames?: ClassNames,
+};
+
+export const ClickableIcon: React$AbstractComponent<
+  ClickableIconProps,
+  HTMLButtonElement,
+> = React.forwardRef<ClickableIconProps, HTMLButtonElement>(
+  (
+    {
+      size = 'medium',
+      ariaLabel,
+      onClick,
+      className, // Deprecated for Clickable Icon
+      classNames,
+      disabled = false,
+      ...props
+    }: ClickableIconProps,
+    ref,
+  ) => {
+    const onKeyDownHandler = (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        onClick && onClick(e);
+      }
+    };
+    return (
+      <UnstyledButton
+        {...props}
+        onClick={onClick}
+        disabled={disabled}
+        onKeyDown={onKeyDownHandler}
+        ariaLabel={ariaLabel}
+        className={classify(
+          css.button,
+          {
+            [css.small]: size === 'small',
+            [css.medium]: size === 'medium',
+            [css.large]: size === 'large',
+          },
+          classNames?.button,
+        )}
+        ref={ref}
+      >
+        <Icon
+          {...props}
+          size={size}
+          color={disabled ? TEXT_COLORS.disabled : props.color}
+          className={classNames?.icon || className}
+        />
+      </UnstyledButton>
+    );
+  },
+);
+
+export type CloseIconProps = {
+  size?: IconSize,
+  type?: IconType,
+  color?: ColorTypes,
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  className?: string, // Deprecated for Clickable Icon
+  ariaLabel?: string,
+  disabled?: boolean,
+  classNames?: ClassNames,
+};
+
+export const CloseIcon: React$AbstractComponent<
+  CloseIconProps,
+  HTMLButtonElement,
+> = React.forwardRef<CloseIconProps, HTMLButtonElement>(
+  (
+    {
+      size = 'medium',
+      type = 'regular',
+      color = TEXT_COLORS.primary,
+      ...props
+    }: CloseIconProps,
+    ref,
+  ) => (
+    <ClickableIcon
+      name="close"
+      size={size}
+      type={type}
+      color={color}
+      {...props}
+      ref={ref}
+    />
+  ),
+);

package/lib/components/Icon/Icon.docs.js

@@ -148,7 +148,7 @@ The name prop has be to consistent with one used in fontawesome.
       }
     },
     storySource: {
-      componentPath: '/src/components/Icon/Icon.jsx'
+      componentPath: '/src/components/Icon/Icon.js'
     }
   }
 };

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

@@ -0,0 +1,120 @@
+// @flow strict
+
+import {TEXT_COLORS} from '../../types/typography';
+
+import {ICON_SIZE} from './Icon';
+
+
+const colorOptions: Array<mixed> = [...Object.values(TEXT_COLORS)];
+const iconSize: Array<mixed> = [...Object.values(ICON_SIZE)];
+
+export const ICON_DOCS = {
+  argTypes: {
+    type: {
+      description:
+        'Type represents 5 unique icon styles :- Solid, Regular, Light, Thin, Duotone',
+      options: ['regular', 'solid', 'duotone', 'brands'],
+      control: {type: 'select'},
+      table: {
+        type: {summary: 'string'},
+        defaultValue: {summary: 'regular'},
+      },
+    },
+    name: {
+      description:
+        'Icon Name represents name of icon as supported by fontawesome',
+      type: {required: true},
+      table: {
+        type: {summary: 'string'},
+        defaultValue: {summary: 'face-party'},
+      },
+    },
+    color: {
+      description: 'Same set of colors as supported in text',
+      options: colorOptions,
+      control: {type: 'select'},
+      table: {
+        type: {summary: 'string'},
+        defaultValue: {summary: 'primary'},
+      },
+    },
+    size: {
+      description:
+        'Icon supports three size variants namely small and medium. `small` < `medium` < `large`',
+      options: iconSize,
+      control: {type: 'select'},
+      table: {
+        type: {summary: 'string'},
+        defaultValue: {summary: 'medium'},
+      },
+    },
+    swapOpacity: {
+      name: 'swapOpacity',
+      description: `Swap the default opacity of each layer in a duotone icon.`,
+      options: [false, true],
+      control: 'boolean',
+      table: {
+        type: {summary: 'boolean'},
+        defaultValue: {summary: false},
+      },
+    },
+    className: {
+      description: 'External className to be applied on container',
+      control: {
+        type: 'text',
+      },
+      table: {
+        type: {summary: 'string'},
+      },
+    },
+    onClick: {
+      description: 'onClick handler',
+      action: 'clicked',
+      table: {
+        type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
+      },
+    },
+    disabled: {
+      description: 'If **true**, the clickable icon is disabled',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        type: {summary: 'boolean'},
+        defaultValue: {summary: 'false'},
+      },
+    },
+    ariaLabel: {
+      control: {
+        type: 'text',
+      },
+      description:
+        '**aria-label** should be added where `ClickableIcon` and `CloseIcon` is used. This would avoid accessibility violations in screen readers',
+      table: {
+        type: {summary: 'string'},
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates a Icon component',
+      description: {
+        component: `
+\`\`\`js
+import {
+  Icon,
+  ClickableIcon,
+  CloseIcon,
+  SemanticIcon
+} from "@spaced-out/ui-design-system/lib/components/Icon";
+\`\`\`
+Icon component uses <a href="https://fontawesome.com/icons" target="_blank">fontawesome</a> icon internally.
+The name prop has be to consistent with one used in fontawesome.
+        `,
+      },
+    },
+    storySource: {
+      componentPath: '/src/components/Icon/Icon.js',
+    },
+  },
+};

package/lib/components/Icon/Icon.js

@@ -33,9 +33,7 @@ const Icon = exports.Icon = /*#__PURE__*/React.forwardRef((_ref, forwardRef) =>
     swapOpacity
   } = _ref;
   return /*#__PURE__*/React.createElement(React.Fragment, null, !!name && /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_typographyModule.default.centerAlignFlex, _typographyModule.default[`${size}Icon`], _typographyModule.default[color], className)
-    // @ts-ignore - TS2322 - Type '((arg1: SyntheticEvent<HTMLElement, Event>) => unknown) | null | undefined' is not assignable to type 'MouseEventHandler<HTMLDivElement> | undefined'.
-    ,
+    className: (0, _classify.default)(_typographyModule.default.centerAlignFlex, _typographyModule.default[`${size}Icon`], _typographyModule.default[color], className),
     onClick: onClick,
     ref: forwardRef
   }, /*#__PURE__*/React.createElement("i", {

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

@@ -0,0 +1,77 @@
+// @flow strict
+
+import * as React from 'react';
+
+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 const ICON_TYPE = Object.freeze({
+  regular: 'regular',
+  solid: 'solid',
+  duotone: 'duotone',
+  brands: 'brands',
+});
+
+export const ICON_SIZE = Object.freeze({
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+});
+
+export type IconSize = $Keys<typeof ICON_SIZE>;
+export type IconType = $Keys<typeof ICON_TYPE>;
+
+export type IconProps = {
+  type?: IconType,
+  name: string,
+  size?: IconSize,
+  color?: ColorTypes,
+  className?: string,
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  ariaLabel?: string,
+  swapOpacity?: boolean,
+  style?: {[string]: string},
+};
+
+export const Icon: React$AbstractComponent<IconProps, HTMLDivElement> =
+  React.forwardRef<IconProps, HTMLDivElement>(
+    (
+      {
+        type = 'regular',
+        name = '',
+        size = 'medium',
+        color = TEXT_COLORS.primary,
+        className,
+        style,
+        onClick,
+        swapOpacity,
+      }: IconProps,
+      forwardRef,
+    ) => (
+      <>
+        {!!name && (
+          <div
+            className={classify(
+              typographyStyle.centerAlignFlex,
+              typographyStyle[`${size}Icon`],
+              typographyStyle[color],
+              className,
+            )}
+            onClick={onClick}
+            ref={forwardRef}
+          >
+            <i
+              className={classify(`fa-${type} fa-${name} `, {
+                ['fa-swap-opacity']: swapOpacity,
+              })}
+              style={style}
+            />
+          </div>
+        )}
+      </>
+    ),
+  );

package/lib/components/Icon/SemanticIcon.js

@@ -22,9 +22,7 @@ const SemanticIcon = _ref => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, !!iconProps.name && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_SemanticIconModule.default.iconContainer, _SemanticIconModule.default[semantic], _SemanticIconModule.default[size], classNames?.wrapper)
   }, /*#__PURE__*/React.createElement(_Icon.Icon, _extends({}, iconProps, {
-    className: (0, _classify.default)(iconProps.className, classNames?.icon)
-    // @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Readonly<{ primary: string; secondary: string; tertiary: string; disabled: string; clickable: string; neutral: string; success: string; information: string; warning: string; danger: string; inversePrimary: string; inverseSecondary: string; favorite: string; }>'.
-    ,
+    className: (0, _classify.default)(iconProps.className, classNames?.icon),
     color: _typography.TEXT_COLORS[semantic],
     size: size === 'large' ? 'medium' : size
   }))));

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

@@ -0,0 +1,48 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {AlertSemanticType} from '../../types/common';
+import {TEXT_COLORS} from '../../types/typography';
+import classify from '../../utils/classify';
+
+import type {IconProps} from './Icon';
+import {Icon} from './Icon';
+
+import css from './SemanticIcon.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string, icon?: string}>;
+
+export type SemanticIconProps = {
+  ...IconProps,
+  classNames?: ClassNames,
+  semantic?: AlertSemanticType,
+};
+
+export const SemanticIcon = ({
+  semantic = 'neutral',
+  classNames,
+  size = 'medium',
+  ...iconProps
+}: SemanticIconProps): React.Node => (
+  <>
+    {!!iconProps.name && (
+      <div
+        className={classify(
+          css.iconContainer,
+          css[semantic],
+          css[size],
+          classNames?.wrapper,
+        )}
+      >
+        <Icon
+          {...iconProps}
+          className={classify(iconProps.className, classNames?.icon)}
+          color={TEXT_COLORS[semantic]}
+          size={size === 'large' ? 'medium' : size}
+        />
+      </div>
+    )}
+  </>
+);

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

@@ -0,0 +1,5 @@
+// @flow strict
+
+export * from './ClickableIcon';
+export * from './Icon';
+export * from './SemanticIcon';

package/lib/components/InContextAlert/InContextAlert.js

@@ -79,10 +79,8 @@ const InContextAlert = exports.InContextAlert = /*#__PURE__*/React.forwardRef((p
     semantic = _common.ALERT_SEMANTIC.neutral,
     dismissable,
     children,
-    // @ts-ignore - TS2339 - Property 'selfDismiss' does not exist on type 'InContextAlertProps'.
     selfDismiss = false,
     leftIconName = '',
-    // @ts-ignore - TS2339 - Property 'onCloseClick' does not exist on type 'InContextAlertProps'.
     onCloseClick,
     actionText = '',
     onAction,

package/lib/components/InContextAlert/InContextAlert.js.flow

@@ -0,0 +1,208 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {AlertSemanticType} from '../../types/common';
+import {ALERT_SEMANTIC} from '../../types/common';
+import {TEXT_COLORS} from '../../types/typography';
+import {classify} from '../../utils/classify';
+import type {IconType} from '../Icon';
+import {ClickableIcon, Icon} from '../Icon';
+import {Link} from '../Link';
+import {SubTitleExtraSmall} from '../Text';
+import {Truncate} from '../Truncate';
+
+import css from './InContextAlert.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  alertText?: string,
+  actionContainer?: string,
+  icon?: string,
+}>;
+
+type InContextAlertBaseProps = {
+  classNames?: ClassNames,
+  ...
+    | {
+        dismissable: true,
+        onCloseClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+        selfDismiss?: boolean,
+      }
+    | {dismissable?: false},
+  children?: string,
+  actionText?: string,
+  onAction?: ?(SyntheticEvent<HTMLElement>) => mixed,
+};
+
+export type InContextAlertProps = {
+  ...InContextAlertBaseProps,
+  semantic?: AlertSemanticType,
+  leftIconName?: string,
+  leftIconType?: IconType,
+};
+
+const AlertIcon = ({
+  semantic,
+  leftIconName,
+  leftIconType,
+  iconClassName,
+}: {
+  semantic: AlertSemanticType,
+  leftIconName: string,
+  leftIconType?: IconType,
+  iconClassName?: string,
+}) => {
+  switch (semantic) {
+  case ALERT_SEMANTIC.neutral:
+    return (
+      <Icon
+        color={TEXT_COLORS.neutral}
+        name={leftIconName ? leftIconName : 'face-smile'}
+        size="small"
+        type={leftIconType}
+        className={iconClassName}
+      />
+    );
+  case ALERT_SEMANTIC.success:
+    return (
+      <Icon
+        name={leftIconName ? leftIconName : 'circle-check'}
+        size="small"
+        color={TEXT_COLORS.success}
+        type={leftIconType}
+        className={iconClassName}
+      />
+    );
+
+  case ALERT_SEMANTIC.information:
+    return (
+      <Icon
+        name={leftIconName ? leftIconName : 'circle-info'}
+        size="small"
+        color={TEXT_COLORS.information}
+        type={leftIconType}
+        className={iconClassName}
+      />
+    );
+
+  case ALERT_SEMANTIC.warning:
+    return (
+      <Icon
+        name={leftIconName ? leftIconName : 'circle-exclamation'}
+        size="small"
+        color={TEXT_COLORS.warning}
+        type={leftIconType}
+        className={iconClassName}
+      />
+    );
+
+  case ALERT_SEMANTIC.danger:
+    return (
+      <Icon
+        name={leftIconName ? leftIconName : 'shield-exclamation'}
+        size="small"
+        color={TEXT_COLORS.danger}
+        type={leftIconType}
+        className={iconClassName}
+      />
+    );
+
+  default:
+    return (
+      <Icon
+        color={TEXT_COLORS.neutral}
+        name={leftIconName ? leftIconName : 'face-smile'}
+        size="small"
+        type={leftIconType}
+        className={iconClassName}
+      />
+    );
+  }
+};
+
+export const InContextAlert: React$AbstractComponent<
+  InContextAlertProps,
+  HTMLDivElement,
+> = React.forwardRef<InContextAlertProps, HTMLDivElement>(
+  (props: InContextAlertProps, ref): React.Node => {
+    const {
+      classNames,
+      semantic = ALERT_SEMANTIC.neutral,
+      dismissable,
+      children,
+      selfDismiss = false,
+      leftIconName = '',
+      onCloseClick,
+      actionText = '',
+      onAction,
+      leftIconType,
+    } = props;
+    const [dismissed, setDismissed] = React.useState(false);
+    const closeClickHandler = (e) => {
+      onCloseClick && onCloseClick(e);
+      selfDismiss && setDismissed(true);
+    };
+
+    return (
+      <>
+        {!dismissed && (
+          <div
+            className={classify(
+              css.alertContainer,
+              {
+                [css.neutral]: semantic === ALERT_SEMANTIC.neutral,
+                [css.success]: semantic === ALERT_SEMANTIC.success,
+                [css.information]: semantic === ALERT_SEMANTIC.information,
+                [css.warning]: semantic === ALERT_SEMANTIC.warning,
+                [css.danger]: semantic === ALERT_SEMANTIC.danger,
+              },
+              classNames?.wrapper,
+            )}
+            ref={ref}
+          >
+            <AlertIcon
+              semantic={semantic}
+              leftIconName={leftIconName}
+              leftIconType={leftIconType}
+              iconClassName={classNames?.icon}
+            />
+            {React.Children.count(children) > 0 && (
+              <SubTitleExtraSmall className={classify(classNames?.alertText)}>
+                <Truncate line={2} wordBreak="initial">
+                  {children}
+                </Truncate>
+              </SubTitleExtraSmall>
+            )}
+            {!!(actionText || dismissable) && (
+              <div
+                className={classify(
+                  css.actionContainer,
+                  classNames?.actionContainer,
+                )}
+              >
+                {!!actionText && (
+                  <Link onClick={onAction} color="primary">
+                    {actionText}
+                  </Link>
+                )}
+                {!!dismissable && (
+                  <ClickableIcon
+                    color={TEXT_COLORS.primary}
+                    ariaLabel="close"
+                    name="close"
+                    size="small"
+                    type="regular"
+                    onClick={closeClickHandler}
+                    className={css.closeIcon}
+                  />
+                )}
+              </div>
+            )}
+          </div>
+        )}
+      </>
+    );
+  },
+);

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

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

package/lib/components/InfinitePagination/InfinitePagination.js

@@ -13,6 +13,7 @@ var _CircularLoader = require("../CircularLoader");
 var _InfinitePaginationModule = _interopRequireDefault(require("./InfinitePagination.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// $FlowFixMe[nonstrict-import]
 const DEFAULT_THRESHOLD = 200;
 const InfinitePagination = exports.InfinitePagination = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -31,12 +32,9 @@ const InfinitePagination = exports.InfinitePagination = /*#__PURE__*/React.forwa
   const itemsLength = items.length;
   const totalItemsCount = itemsLength + (hasNextPage ? 1 : 0);
   const [containerRef, containerHeight] = (0, _hooks.useResizeObserver)();
-
-  // @ts-ignore - TS2322 - Type 'null' is not assignable to type 'HTMLDivElement'.
   React.useImperativeHandle(ref, () => listRef.current);
   React.useEffect(() => {
     if (listRef.current) {
-      // @ts-ignore - TS2339 - Property 'scrollToItem' does not exist on type 'never'.
       listRef.current.scrollToItem(0);
     }
   }, [itemsLength === 0]);
@@ -49,8 +47,6 @@ const InfinitePagination = exports.InfinitePagination = /*#__PURE__*/React.forwa
     containerHeight,
     isVariableSizeList
   });
-
-  // @ts-ignore - TS7031 - Binding element 'index' implicitly has an 'any' type. | TS7031 - Binding element 'style' implicitly has an 'any' type.
   const Row = _ref => {
     let {
       index,
@@ -66,12 +62,9 @@ const InfinitePagination = exports.InfinitePagination = /*#__PURE__*/React.forwa
       className: _InfinitePaginationModule.default.listRow
     }, renderItem(items[index], index));
   };
-  const itemKey = React.useCallback(
-  // @ts-ignore - TS7006 - Parameter 'index' implicitly has an 'any' type.
-  index => index === itemsLength ? 'loading-indicator' : getItemKey ? getItemKey(items[index], index) : index, [items, getItemKey]);
+  const itemKey = React.useCallback(index => index === itemsLength ? 'loading-indicator' : getItemKey ? getItemKey(items[index], index) : index, [items, getItemKey]);
   const ListComponent = isVariableSizeList ? _reactWindow.VariableSizeList : _reactWindow.FixedSizeList;
   return /*#__PURE__*/React.createElement("div", {
-    // @ts-ignore - TS2322 - Type 'Ref<"div">' is not assignable to type 'Ref<HTMLDivElement> | undefined'.
     ref: containerRef,
     "data-testid": "InfinitePagination",
     className: (0, _classify.default)(_InfinitePaginationModule.default.wrapper, classNames?.wrapper)