@spaced-out/ui-design-system 0.4.15 → 0.5.0

package/lib/components/Badge/Badge.js.flow

@@ -1,147 +0,0 @@
-// @flow strict
-
-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 = $Keys<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?: ?(SyntheticEvent<HTMLElement>) => mixed,
-  ariaLabel?: string,
-};
-
-export const Badge: React$AbstractComponent<BadgeProps, HTMLDivElement> =
-  React.forwardRef<BadgeProps, HTMLDivElement>(
-    ({classNames, text, fill = 'gray'}: BadgeProps, ref): React.Node => {
-      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: React$AbstractComponent<
-  IconBadgeProps,
-  HTMLDivElement,
-> = React.forwardRef<IconBadgeProps, HTMLDivElement>(
-  (
-    {
-      classNames,
-      fill = 'gray',
-      iconName,
-      iconSize = 'small',
-      iconType = 'solid',
-      ariaLabel,
-      onClick,
-    }: IconBadgeProps,
-    ref,
-  ): React.Node => {
-    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.js.flow

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

package/lib/components/BadgedIcon/BadgedIcon.js.flow

@@ -1,73 +0,0 @@
-// @flow strict
-
-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): React.Node => (
-  <>
-    {!!name && (
-      <div
-        className={classify(css.iconContainer, css[size], classNames?.wrapper)}
-      >
-        <Icon
-          ariaLabel={ariaLabel}
-          name={name}
-          className={classNames?.icon}
-          name={name}
-          size={size === 'large' ? 'medium' : size}
-          type={type}
-          color={TEXT_COLORS.clickable}
-        />
-        {showBadge && <BadgeIcon className={classNames?.badgeIcon} />}
-      </div>
-    )}
-  </>
-);
-
-const BadgeIcon = ({className}: {className: ?string}): React.Node => (
-  <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.js.flow

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

package/lib/components/Banner/Banner.js.flow

@@ -1,60 +0,0 @@
-// @flow strict
-
-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: React$AbstractComponent<BannerProps, HTMLDivElement> =
-  React.forwardRef<BannerProps, HTMLDivElement>(
-    (
-      {
-        classNames,
-        semantic,
-        leftIconType = 'solid',
-        alignment = 'top',
-        ...props
-      }: BannerProps,
-      ref,
-    ): React.Node => (
-      <>
-        <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.js.flow

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

package/lib/components/Breadcrumbs/BreadcrumbLink/BreadcrumbLink.js.flow

@@ -1,58 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import classify from '../../../utils/classify';
-import type {LinkProps} from '../../Link';
-import {Link} from '../../Link';
-
-import css from './BreadcrumbLink.module.css';
-
-
-export type BreadcrumbLinkProps = {
-  ...LinkProps,
-  isActive?: boolean,
-  id: string,
-  onClick?: (SyntheticEvent<HTMLElement>, id: string) => mixed,
-  ...
-};
-
-export const BreadcrumbLink: React$AbstractComponent<
-  BreadcrumbLinkProps,
-  ?HTMLAnchorElement,
-> = React.forwardRef<BreadcrumbLinkProps, ?HTMLAnchorElement>(
-  (
-    {
-      id,
-      className,
-      as,
-      underline = false,
-      isActive,
-      onClick,
-      href,
-      to,
-      ...props
-    }: BreadcrumbLinkProps,
-    ref,
-  ) => (
-    <Link
-      {...props}
-      to={to ?? href}
-      data-testid="BreadcrumbLink"
-      ref={ref}
-      as={as || 'subTitleExtraSmall'}
-      underline={underline}
-      disabled={isActive}
-      className={classify(
-        css.breadcrumbLink,
-        {[css.active]: isActive ?? window.location.href.includes(to ?? href)},
-        className,
-      )}
-      onClick={(e) => {
-        onClick?.(e, id);
-      }}
-    />
-  ),
-);
-
-BreadcrumbLink.displayName = 'BreadcrumbLink';

package/lib/components/Breadcrumbs/BreadcrumbLink/index.js.flow

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

package/lib/components/Breadcrumbs/Breadcrumbs.js.flow

@@ -1,59 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import classify from '../../utils/classify';
-import {Icon} from '../Icon';
-import type {BaseLinkProps} from '../Link';
-
-import css from './Breadcrumbs.module.css';
-
-
-type ClassNames = $ReadOnly<{wrapper?: string}>;
-
-export type BreadcrumbsProps = {
-  classNames?: ClassNames,
-  children: React.Node,
-  linkComponent?: React.AbstractComponent<BaseLinkProps, ?HTMLAnchorElement>,
-};
-
-const BreadcrumbSeparator = (): React.Node => (
-  <Icon
-    className={css.separator}
-    name="chevron-right"
-    size="small"
-    color="secondary"
-  />
-);
-
-export const Breadcrumbs: React$AbstractComponent<
-  BreadcrumbsProps,
-  HTMLDivElement,
-> = React.forwardRef<BreadcrumbsProps, HTMLDivElement>(
-  ({classNames, children, linkComponent}: BreadcrumbsProps, ref) => {
-    const total = React.Children.count(children);
-
-    return (
-      <div
-        ref={ref}
-        data-testid="Breadcrumbs"
-        className={classify(css.wrapper, classNames?.wrapper)}
-      >
-        {React.Children.map(children, (child, idx) => (
-          // eslint-disable-next-line react/no-array-index-key
-          <React.Fragment key={`crumb-${idx}`}>
-            {/*add linkComponent to BreadcrumbLinks only,
-            otherwise return original element */}
-            {React.isValidElement(child) &&
-            child?.type?.displayName === 'BreadcrumbLink'
-              ? React.cloneElement(child, {linkComponent})
-              : child}
-
-            {/*Add Separator*/}
-            {idx < total - 1 && <BreadcrumbSeparator aria-hidden />}
-          </React.Fragment>
-        ))}
-      </div>
-    );
-  },
-);

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

@@ -1,4 +0,0 @@
-// @flow strict
-
-export * from './BreadcrumbLink';
-export * from './Breadcrumbs';