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

package/lib/components/Badge/Badge.tsx

@@ -1,149 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import {
-  colorDanger,
-  colorDangerLightest,
-  colorGrayLightest,
-  colorInformation,
-  colorInformationLightest,
-  colorNeutral,
-  colorNeutralLightest,
-  colorSuccess,
-  colorSuccessLightest,
-  colorWarning,
-  colorWarningLightest,
-} from '../../styles/variables/_color';
-import classify from '../../utils/classify';
-import type {IconSize, IconType} from '../Icon';
-import {Icon} from '../Icon';
-import {ButtonTextSmall} from '../Text';
-
-import css from './Badge.module.css';
-
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-  text?: string;
-  icon?: string;
-}>;
-
-export const BADGE_COLOR = Object.freeze({
-  gray: colorGrayLightest,
-  red: colorDangerLightest,
-  redDark: colorDanger,
-  orange: colorWarningLightest,
-  orangeDark: colorWarning,
-  green: colorSuccessLightest,
-  greenDark: colorSuccess,
-  blue: colorInformationLightest,
-  blueDark: colorInformation,
-  indigo: colorNeutralLightest,
-  indigoDark: colorNeutral,
-});
-
-export type BadgeColorType = keyof typeof BADGE_COLOR;
-
-export type BaseBadgeProps = {
-  classNames?: ClassNames;
-  fill?: BadgeColorType;
-};
-
-export type BadgeProps = ((BaseBadgeProps) & {
-  text: string;
-});
-
-export type IconBadgeProps = ((BaseBadgeProps) & {
-  iconName: string;
-  iconType?: IconType;
-  iconSize?: IconSize;
-  onClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
-  ariaLabel?: string;
-});
-
-export const Badge: Flow.AbstractComponent<BadgeProps, HTMLDivElement> =
-  React.forwardRef<HTMLDivElement, BadgeProps>((
-    {
-      classNames,
-      text,
-      fill = 'gray',
-    }: BadgeProps,
-    ref,
-  ) => {
-    const isDark = fill.includes('Dark');
-
-    return (
-      <div
-        data-testid="Badge"
-        style={{
-          '--wrapperBgColor': BADGE_COLOR[fill],
-        }}
-        className={classify(
-          css.badgeWrapper,
-          {
-            [css.fixedWidth]: text.length <= 2,
-          },
-          classNames?.wrapper,
-        )}
-        ref={ref}
-      >
-        <ButtonTextSmall
-          className={classify(
-            {
-              [css.dark]: isDark,
-              [css.light]: !isDark,
-            },
-            classNames?.text,
-          )}
-        >
-          {text}
-        </ButtonTextSmall>
-      </div>
-    );
-  });
-
-export const IconBadge: Flow.AbstractComponent<IconBadgeProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, IconBadgeProps>((
-  {
-    classNames,
-    fill = 'gray',
-    iconName,
-    iconSize = 'small',
-    iconType = 'solid',
-    ariaLabel,
-    onClick,
-  }: IconBadgeProps,
-  ref,
-) => {
-  const isDark = fill.includes('Dark');
-
-  return (
-    <div
-      data-testid="Badge"
-      style={{
-        '--wrapperBgColor': BADGE_COLOR[fill],
-      }}
-      className={classify(
-        css.badgeWrapper,
-        css.iconContainer,
-        classNames?.wrapper,
-      )}
-      ref={ref}
-    >
-      <Icon
-        name={iconName}
-        type={iconType}
-        size={iconSize}
-        ariaLabel={ariaLabel}
-        onClick={onClick}
-        className={classify(
-          {
-            [css.dark]: isDark,
-            [css.light]: !isDark,
-          },
-          classNames?.icon,
-        )}
-      />
-    </div>
-  );
-});

package/lib/components/Badge/index.ts

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

package/lib/components/BadgedIcon/BadgedIcon.stories.tsx

@@ -1,80 +0,0 @@
-import * as React from 'react';
-
-import {ICON_DOCS} from '../Icon/Icon.docs';
-
-import type {BadgedIconProps} from './';
-import {BadgedIcon} from './BadgedIcon';
-
-import css from './BadgedIcon.stories.module.css';
-
-
-const { name, size, ariaLabel } = ICON_DOCS.argTypes;
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Badged Icon',
-  component: BadgedIcon,
-  argTypes: {
-    classNames: {
-      description: 'External classnames to be applied.',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary: '{wrapper?: string, icon?: string, badgeIcon?: string}',
-        },
-      },
-    },
-    showBadge: {
-      description: 'If **true**, the badge icon is shown',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'true'},
-      },
-    },
-    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: 'solid'},
-      },
-    },
-    name,
-    size,
-    ariaLabel,
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Badged Icon component.',
-      description: {
-        component: `
-\`\`\`js
-import { BadgedIcon } from "@spaced-out/ui-design-system/lib/components/BadgedIcon";
-\`\`\`
-BadgedIcon component is a wrapper around the Icon component. It is used to display an icon with a badge.
-This 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/BadgedIcon/BadgedIcon.jsx',
-    },
-  },
-};
-
-export const _BadgedIcon = (args: BadgedIconProps) => (<div className={css.container}>
-  <BadgedIcon {...args} />
-</div>);
-
-_BadgedIcon.args = {
-  classNames: {wrapper: ''},
-  name: 'face-party',
-};

package/lib/components/BadgedIcon/BadgedIcon.tsx

@@ -1,76 +0,0 @@
-import * as React from 'react';
-
-import {TEXT_COLORS} from '../../types/typography';
-import classify from '../../utils/classify';
-import type {IconSize, IconType} from '../Icon';
-import {Icon} from '../Icon';
-
-import typographyStyle from '../../styles/typography.module.css';
-import css from './BadgedIcon.module.css';
-
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-  icon?: string;
-  badgeIcon?: string;
-}>;
-
-export type BadgedIconProps = {
-  type?: IconType;
-  name: string;
-  size?: IconSize;
-  ariaLabel?: string;
-  showBadge?: boolean;
-  classNames?: ClassNames;
-};
-
-export const BadgedIcon = (
-  {
-    name,
-    showBadge = true,
-    classNames,
-    size = 'medium',
-    type = 'solid',
-    ariaLabel,
-  }: BadgedIconProps,
-) => (<>
-  {!!name && (
-    <div
-      className={classify(css.iconContainer, css[size], classNames?.wrapper)}
-    >
-      <Icon
-        ariaLabel={ariaLabel}
-        name={name}
-        className={classNames?.icon}
-// @ts-ignore - TS17001 - JSX elements cannot have multiple attributes with the same name.
-        name={name}
-        size={size === 'large' ? 'medium' : size}
-        type={type}
-        color={TEXT_COLORS.clickable}
-      />
-      {showBadge && <BadgeIcon className={classNames?.badgeIcon} />}
-    </div>
-  )}
-</>);
-
-const BadgeIcon = (
-  {
-    className,
-  }: {
-    className: string | null | undefined;
-  },
-) => (<svg
-  className={classify(
-    css.badgeIcon,
-    typographyStyle[TEXT_COLORS['clickable']],
-    className,
-  )}
-  viewBox="0 0 12 13"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="M6.46573 1.0335L8.10352 4.61465L11.6941 6.24816C11.883 6.3424 12.009 6.53088 12.009 6.71936C12.009 6.90784 11.883 7.09632 11.6941 7.15915L8.10352 8.82407L6.46573 12.4052C6.37124 12.5937 6.18226 12.7194 5.99329 12.7194C5.80431 12.7194 5.61533 12.5937 5.55234 12.4052L3.88305 8.82407L0.292498 7.19056C0.103521 7.09632 0.0090332 6.90784 0.0090332 6.71936C0.0090332 6.53088 0.103521 6.3424 0.292498 6.24816L3.88305 4.61465L5.55234 1.0335C5.61533 0.845015 5.80431 0.71936 5.99329 0.71936C6.18226 0.71936 6.37124 0.845015 6.46573 1.0335Z"
-    fill="currentColor"
-  />
-</svg>);

package/lib/components/BadgedIcon/index.ts

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

package/lib/components/Banner/Banner.stories.tsx

@@ -1,187 +0,0 @@
-import * as React from 'react';
-
-import {ALERT_SEMANTIC} from '../../types/common';
-
-import type {BannerProps} from './Banner';
-import {Banner} from './Banner';
-
-import css from './Banner.stories.module.css';
-
-
-const semanticOptions: Array<unknown> = [...Object.values(ALERT_SEMANTIC)];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Banner',
-  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 Banner. It will have different Icon and background color for different semantic type',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: ALERT_SEMANTIC.neutral},
-      },
-    },
-    alignment: {
-      options: ['top', 'bottom'],
-      description:
-        'Semantic type of Banner. It will have different Icon and background color for different semantic type',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'top'},
-      },
-    },
-    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: {
-      options: ['regular', 'solid'],
-      description: 'Type of Icon',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        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}',
-        },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Banner component',
-      description: {
-        component: `
-\`\`\`js
-import { Banner } from "@spaced-out/ui-design-system/lib/components/Banner";
-\`\`\`
-Use Banner 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.
-
-Banners should ideally be absolutely positioned and should stick to top or bottom of container
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Banner/Banner.jsx',
-    },
-  },
-};
-
-export const _Default = (args: BannerProps) => (<div className={css.storyContainer}>
-  <Banner {...args} />
-</div>);
-
-_Default.args = {
-  children: 'The quick brown fox jumps over the lazy dog',
-  semantic: 'neutral',
-};
-
-export const _Dismissable = (args: BannerProps) => (<div className={css.storyContainer}>
-  <Banner {...args} />
-</div>);
-
-_Dismissable.args = {
-  children: 'The quick brown fox jumps over the lazy dog',
-  semantic: 'neutral',
-  dismissable: true,
-  selfDismiss: false,
-};
-
-export const _Actionable = (args: BannerProps) => (<div className={css.storyContainer}>
-  <Banner {...args} />
-</div>);
-
-_Actionable.args = {
-  children: 'Message could not be delivered',
-  semantic: 'danger',
-  actionText: 'Resend',
-};
-
-export const _ActionableAndDismissable = (args: BannerProps) => (<div className={css.storyContainer}>
-  <Banner {...args} />
-</div>);
-
-_ActionableAndDismissable.args = {
-  children: 'Schedule Message - 24 Dec 2021 @ 04:00AM',
-  semantic: 'information',
-  actionText: 'View Details',
-  dismissable: true,
-  selfDismiss: false,
-};

package/lib/components/Banner/Banner.tsx

@@ -1,55 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import {ALERT_SEMANTIC} from '../../types/common';
-import classify from '../../utils/classify';
-import type {InContextAlertProps} from '../InContextAlert';
-import {InContextAlert} from '../InContextAlert';
-
-import css from './Banner.module.css';
-
-
-export type BannerProps = ((InContextAlertProps) & {
-  alignment?: 'top' | 'bottom';
-});
-
-export const Banner: Flow.AbstractComponent<BannerProps, HTMLDivElement> =
-  React.forwardRef<HTMLDivElement, BannerProps>((
-    {
-      classNames,
-      semantic,
-      leftIconType = 'solid',
-      alignment = 'top',
-      ...props
-    }: BannerProps,
-    ref,
-  ) => (<>
-    <InContextAlert
-      {...props}
-      leftIconType={leftIconType}
-      semantic={semantic}
-      ref={ref}
-      classNames={{
-        ...classNames,
-        wrapper: classify(
-          css.bannerContainer,
-          {
-            [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,
-            [css.topAligned]: alignment === 'top',
-            [css.bottomAligned]: alignment === 'bottom',
-          },
-          classNames?.wrapper,
-        ),
-        alertText: classify(classNames?.alertText),
-        actionContainer: classify(
-          css.alertContainer,
-          classNames?.actionContainer,
-        ),
-      }}
-    />
-  </>));

package/lib/components/Banner/index.ts

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

package/lib/components/Breadcrumbs/BreadcrumbLink/BreadcrumbLink.stories.tsx

@@ -1,114 +0,0 @@
-import * as React from 'react';
-
-import type {BreadcrumbLinkProps} from './';
-import {BreadcrumbLink} from './BreadcrumbLink';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Breadcrumbs/Anatomy/Breadcrumb Link',
-  component: BreadcrumbLink,
-  argTypes: {
-    className: {
-      description: 'Provide an optional className to be applied to the wrapper',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary: '{wrapper?: string}',
-        },
-      },
-    },
-    isActive: {
-      description: 'Whether the breadcrumb link is active',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {
-          summary: 'boolean',
-        },
-      },
-    },
-    id: {
-      description: 'An identifier for the breadcrumb link',
-      control: {
-        type: 'text',
-      },
-      type: {required: true},
-      table: {
-        type: {
-          summary: 'string',
-        },
-      },
-    },
-    onClick: {
-      description: 'Function to handle click events on the breadcrumb link',
-      control: null,
-      table: {
-        type: {
-          summary: '(event: SyntheticEvent<HTMLElement>, id: string) => mixed',
-        },
-      },
-    },
-    to: {
-      description:
-        'Link to anchor to. Use this when you pass a router\'s Link component to the this',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    children: {
-      description:
-        'Content to be displayed. If you are using react nodes here, this should only have inline elements since Link renders children inside `<a></a>`',
-      control: {
-        type: 'text',
-      },
-      type: {required: true},
-      table: {
-        type: {summary: 'React.Component | string'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a BreadcrumbLink component.',
-      description: {
-        component: `
-\`\`\`js
-import { BreadcrumbLink } from "@spaced-out/ui-design-system/lib/components/Breadcrumbs";
-\`\`\`
-**BreadcrumbLink** is used to display a breadcrumb link within a Breadcrumbs component.
-
-**IMPORTANT:** BreadcrumbLink internally uses a Genesis's \`<Link>\` component.
-
-**Usage with Routing Library**
-
-To use the \`BreadcrumbLink\` with a routing Library, you would need to pass the \`linkComponent\` prop to the \`<BreadcrumbLink>\` component.
-
-\`\`\`jsx
-import {Link} from 'src/rerouter';
-import {BreadcrumbLink} from '@spaced-out/ui-design-system/lib/components/Breadcrumbs';
-
-<BreadcrumbLink linkComponent={Link} to="/pages">Page 1</BreadcrumbLink>
-\`\`\`
-
-It'll replace the rendered a tag with routing library's Link.
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/BreadcrumbLink/BreadcrumbLink.jsx',
-    },
-  },
-};
-
-export const _BreadcrumbLink = (args: BreadcrumbLinkProps) => (<BreadcrumbLink {...args} />);
-
-_BreadcrumbLink.args = {
-  children: 'Page #1',
-};