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

package/lib/components/Icon/SemanticIcon.stories.tsx

@@ -1,74 +0,0 @@
-import * as React from 'react';
-
-import {ALERT_SEMANTIC} from '../../types/common';
-
-import type {SemanticIconProps} from './';
-import {ICON_DOCS} from './Icon.docs';
-import {SemanticIcon} from './';
-
-
-const semanticOptions: Array<unknown> = [...Object.values(ALERT_SEMANTIC)];
-
-const iconDocs = {
-  ...ICON_DOCS,
-  argTypes: {
-    ...ICON_DOCS.argTypes,
-    semantic: {
-      description: `The semantic type of the Icon Container (e.g., success, warning, danger, etc.).
-        This works only in case of \`<SemanticIcon />\`
-        `,
-      control: {
-        type: 'select',
-      },
-      options: semanticOptions,
-      table: {
-        type: {
-          summary: 'AlertSemanticType',
-        },
-      },
-    },
-    classNames: {
-      description:
-        'External classnames to be applied. Only valid in case of `<SemanticIcon />`. Use the className prop for `<Icon />`',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: '{wrapper?: string, icon?: string}'},
-      },
-    },
-  },
-} as const;
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Icon with Background',
-  component: SemanticIcon,
-  ...iconDocs,
-};
-
-/**
- * The SemanticIcon component is a reusable
- * React component that allows you to display
- * icons with semantic styling based on different
- * semantic types. It's designed to work with Font Awesome icons
- * and can be used to maintain consistent icon styles across your
- * application.
- *
- * Usage:
- *
- * ```jsx
-  <SemanticIcon
-    semantic="success"
-    iconName="chart-line-up"
-    iconSize="medium"
-    iconType="solid"
-    classNames={{ wrapper: css.wrapper, icon: css.icon }}
-  />
- * ```
- */
-export const _SemanticIcon = (args: SemanticIconProps) => (<SemanticIcon {...args} />);
-
-_SemanticIcon.args = {
-  name: 'face-party',
-  semantic: 'success',
-};

package/lib/components/Icon/SemanticIcon.tsx

@@ -1,49 +0,0 @@
-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,
-) => (<>
-  {!!iconProps.name && (
-    <div
-      className={classify(
-        css.iconContainer,
-        css[semantic],
-        css[size],
-        classNames?.wrapper,
-      )}
-    >
-      <Icon
-        {...iconProps}
-        className={classify(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; }>'.
-        color={TEXT_COLORS[semantic]}
-        size={size === 'large' ? 'medium' : size}
-      />
-    </div>
-  )}
-</>);

package/lib/components/Icon/index.ts

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

package/lib/components/InContextAlert/InContextAlert.stories.tsx

@@ -1,164 +0,0 @@
-import * as React from 'react';
-
-import {ALERT_SEMANTIC} from '../../types/common';
-
-import type {InContextAlertProps} from './InContextAlert';
-import {InContextAlert} from './InContextAlert';
-
-import css from './InContextAlert.stories.module.css';
-
-
-const semanticOptions: Array<unknown> = [...Object.values(ALERT_SEMANTIC)];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/In-Context Alert',
-  argTypes: {
-    actionText: {
-      name: 'actionText',
-      description: 'Action text to be displayed on **right** of Alert',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    onAction: {
-      name: 'onAction',
-      action: 'Action Click',
-      description: 'Callback function for action text click',
-      type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
-    },
-    semantic: {
-      options: semanticOptions,
-      description:
-        'Semantic type of In-Context Alert. It will have different Icon and background color for different semantic type',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: ALERT_SEMANTIC.neutral},
-      },
-    },
-    onCloseClick: {
-      name: 'onCloseClick',
-      action: 'Close Click',
-      description: 'Callback function for dismissable alert',
-      type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
-    },
-    dismissable: {
-      description: 'Close Icon will appear in right side in case it is true',
-      name: 'dismissable',
-      options: [false, true],
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    selfDismiss: {
-      description: `This prop is valid only in case dismissable is true.
-      It handles whether the dismissal should be handled by the component or it will just pass callback onclick of closeIcon and dismissal will be handled externally`,
-      name: 'selfDismiss',
-      options: [false, true],
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    leftIconName: {
-      name: 'leftIconName',
-      control: {
-        type: 'text',
-      },
-      description: 'Custom left icon. This overrides the default semantic icon',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    leftIconType: {
-      description:
-        'Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',
-      options: ['regular', 'solid', 'duotone', 'brands'],
-      control: {type: 'select'},
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'regular'},
-      },
-    },
-    children: {
-      description: 'Pass the alert message text as children',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    classNames: {
-      description:
-        'Provide an optional className to be applied to the wrapper, alertText',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary:
-            '{wrapper?: string, alertText?: string, actionContainer?: string, icon?: string}',
-        },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a In-Context Alert component',
-      description: {
-        component: `
-\`\`\`js
-import { InContextAlert } from "@spaced-out/ui-design-system/lib/components/InContextAlert";
-\`\`\`
-Use In-Context Alert component to show alert message of different semantics like - success, warning etc. It will take width of the container
-and will show only two lines of text. Post that it will get truncated. As there is no way for user to see the truncated message, it is recommended
-to use it for messages up to two lines only or add a tooltip along with it for showcasing complete message.
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/InContextAlert/InContextAlert.jsx',
-    },
-  },
-};
-
-export const _Default = (args: InContextAlertProps) => (<div className={css.storyContainer}>
-  <InContextAlert {...args} />
-</div>);
-
-_Default.args = {
-  children:
-    'The quick brown fox jumps over the lazy dog is an English-language pangram—a sentence that contains all the letters of the alphabet. The phrase is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired.',
-  semantic: 'neutral',
-  leftIconName: 'envelope',
-};
-
-export const _Dismissable = (args: InContextAlertProps) => (<div className={css.storyContainer}>
-  <InContextAlert {...args} />
-</div>);
-
-_Dismissable.args = {
-  children:
-    'The quick brown fox jumps over the lazy dog is an English-language pangram—a sentence that contains all the letters of the alphabet. The phrase is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired.',
-  semantic: 'neutral',
-  dismissable: true,
-  selfDismiss: false,
-  leftIconName: 'house',
-};
-
-export const _Actionable = (args: InContextAlertProps) => (<div className={css.storyContainer}>
-  <InContextAlert {...args} />
-</div>);
-
-_Actionable.args = {
-  children: 'Message could not be delivered',
-  semantic: 'danger',
-  actionText: 'Resend',
-};

package/lib/components/InContextAlert/InContextAlert.tsx

@@ -1,204 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-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?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
-  selfDismiss?: boolean;
-} | {
-  dismissable?: false;
-}) & {
-  children?: string;
-  actionText?: string;
-  onAction?: ((arg1: 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: Flow.AbstractComponent<InContextAlertProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, InContextAlertProps>((props: InContextAlertProps, ref) => {
-  const {
-    classNames,
-    semantic = 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,
-    leftIconType,
-  } = props;
-  const [dismissed, setDismissed] = React.useState(false);
-  const closeClickHandler = (e: React.SyntheticEvent<HTMLElement>) => {
-    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.ts

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