@spaced-out/ui-design-system 0.3.38-beta.0 → 0.3.39-beta.0

package/lib/components/Grid/Grid.d.ts

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import {classify} from '../../utils/classify';
+import css from './Grid.module.css';
+export type RowProps = {
+  className?: string;
+  children?: React.ReactNode;
+  span?: number;
+  offset?: number;
+  gridType?: 'small' | 'medium' | 'large' | 'autoFill' | 'autoFit';
+  repeatTracks?: string;
+};
+const GRID_SYSTEM_MAP = {
+  small: 24,
+  medium: 12,
+  large: 6,
+  autoFill: 'auto-fill',
+  autoFit: 'auto-fit',
+};
+export const Row = ({
+  className,
+  children,
+  span = 1,
+  gridType = 'medium',
+  repeatTracks = '1fr',
+}: RowProps): React.ReactNode => {
+  const gridRepeatCount = 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;
+      let gridColumnStart = 0,
+        gridColumnEnd = 0;
+
+      if (gridType === 'autoFill' || gridType === 'autoFit') {
+        gridColumnStart = 'auto';
+        return React.cloneElement(child, {
+          gridColumnStart,
+          gridColumnEnd: `span ${span}`,
+        });
+      } else if (
+        typeof gridRepeatCount === 'number' &&
+        columnSpanCount <= gridRepeatCount
+      ) {
+        gridColumnStart = lastChildColCount + offset + 1;
+        return React.cloneElement(child, {
+          gridColumnStart,
+          gridColumnEnd: `span ${span}`,
+        });
+      } else {
+        console.error(`number of column exceed ${gridRepeatCount}`);
+      }
+    }
+  });
+  return (
+    <div
+      data-testid="Grid"
+      className={classify(css.gridRow, className)}
+      style={{
+        '--grid-repeat-count': gridRepeatCount,
+        '--repeat-tracks': repeatTracks,
+      }}
+    >
+      {childrenWithProps}
+    </div>
+  );
+};
+export type ColProps = {
+  className?: string;
+  children?: React.ReactNode;
+  span?: number;
+  offset?: number;
+  gridColumnStart?: number;
+  gridColumnEnd?: number;
+};
+export const Col = ({
+  className,
+  children,
+  gridColumnStart,
+  gridColumnEnd,
+}: ColProps): React.ReactNode => (
+  <div
+    className={classify(css.gridColumn, className)}
+    style={{
+      '--grid-column-start': gridColumnStart,
+      '--grid-column-end': gridColumnEnd,
+    }}
+  >
+    {children}
+  </div>
+);

package/lib/components/Grid/index.d.ts

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

package/lib/components/Icon/ClickableIcon.d.ts

@@ -0,0 +1,101 @@
+import {$ReadOnly} from 'utility-types';
+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 & {
+  classNames?: ClassNames;
+};
+export const ClickableIcon: React$AbstractComponent<
+  ClickableIconProps,
+  HTMLButtonElement
+> = React.forwardRef<ClickableIconProps, HTMLButtonElement>(
+  (
+    {
+      size = 'medium',
+      ariaLabel,
+      onClick,
+      className,
+      // Deprecated for Clickable Icon
+      classNames,
+      ...props
+    }: ClickableIconProps,
+    ref,
+  ) => {
+    const onKeyDownHandler = (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        onClick && onClick(e);
+      }
+    };
+
+    return (
+      <UnstyledButton
+        {...props}
+        onClick={onClick}
+        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
+          size={size}
+          className={classNames?.icon || className}
+          {...props}
+        />
+      </UnstyledButton>
+    );
+  },
+);
+export type CloseIconProps = {
+  size?: IconSize;
+  type?: IconType;
+  color?: ColorTypes;
+  onClick?:
+    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+    | null
+    | undefined;
+  className?: string;
+  // Deprecated for Clickable Icon
+  ariaLabel?: string;
+  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.d.ts

@@ -0,0 +1,71 @@
+import {$Keys} from 'utility-types';
+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?:
+    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+    | null
+    | undefined;
+  ariaLabel?: string;
+  swapOpacity?: boolean;
+  style?: Record<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/Icon.docs.d.ts

@@ -0,0 +1,138 @@
+import {TEXT_COLORS} from '../../types/typography';
+import {ICON_SIZE} from './Icon';
+const colorOptions: Array<unknown> = [...Object.values(TEXT_COLORS)];
+const iconSize: Array<unknown> = [...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',
+        },
+      },
+    },
+    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: {
+    componentSubtitle: 'Generates a Icon component',
+    docs: {
+      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/SemanticIcon.d.ts

@@ -0,0 +1,42 @@
+import {$ReadOnly} from 'utility-types';
+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.ReactNode => (
+  <>
+    {!!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.d.ts

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

package/lib/components/InContextAlert/InContextAlert.d.ts

@@ -0,0 +1,210 @@
+import {$ReadOnly} from 'utility-types';
+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 = (
+  | {
+      dismissable: true;
+      onCloseClick?:
+        | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+        | null
+        | undefined;
+      selfDismiss?: boolean;
+    }
+  | {
+      dismissable?: false;
+    }
+) & {
+  classNames?: ClassNames;
+  children?: string;
+  actionText?: string;
+  onAction?:
+    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+    | null
+    | undefined;
+};
+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.ReactNode => {
+    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.d.ts

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