npm - @transferwise/components - Versions diffs - 0.0.0-experimental-4533565 → 0.0.0-experimental-feb2ddf - Mend

@transferwise/components 0.0.0-experimental-4533565 → 0.0.0-experimental-feb2ddf

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (121) hide show

package/src/item/Item.tsx DELETED Viewed

@@ -1,181 +0,0 @@
-import { createContext, ReactNode, useId, useMemo, useState } from 'react';
-import { Typography } from '../common';
-import Body from '../body';
-import { AdditionalInfo } from './ItemAdditionalInfo';
-import { IconButton } from './ItemIconButton';
-import { Checkbox } from './ItemCheckbox';
-import { Navigation } from './ItemNavigation';
-import { clsx } from 'clsx';
-import { Button } from './ItemButton';
-import { Switch } from './ItemSwitch';
-import { AvatarLayout, AvatarView, Image } from './ItemMedia';
-import Prompt from './prompt/Prompt';
-export type ItemTypes =
-  | 'non-interactive'
-  | 'navigation'
-  | 'radio'
-  | 'checkbox'
-  | 'switch'
-  | 'button'
-  | 'icon-button';
-export type Props = {
-  as?: 'li' | 'div' | 'span';
-  inverted?: boolean;
-  disabled?: boolean;
-  spotlight?: 'active' | 'inactive';
-  title: ReactNode;
-  subtitle?: ReactNode;
-  additionalInfo?: ReactNode;
-  valueTitle?: ReactNode;
-  valueSubtitle?: ReactNode;
-  media?: ReactNode;
-  control?: ReactNode;
-  prompt?: ReactNode;
-};
-export type ItemContextData = {
-  setControlType: (type: ItemTypes) => void;
-  ids: {
-    label: string;
-    additionalInfo: string;
-    value: string;
-    control: string;
-    prompt: string;
-  };
-  props: Pick<Props, 'as' | 'disabled' | 'inverted'>;
-};
-// @ts-expect-error for now let's mock it with `null` value
-// but actually by default we should specify `setControlType('none')`
-export const ItemContext = createContext<ItemContextData>(null);
-export const Item = ({
-  as: View = 'li',
-  title,
-  subtitle,
-  additionalInfo,
-  prompt,
-  inverted,
-  media,
-  spotlight = undefined,
-  valueTitle,
-  valueSubtitle,
-  control = null,
-  disabled,
-}: Props) => {
-  /*
-  const returnType = (): ReactNode => {
-    switch (type) {
-      case 'Navigation':
-        return <Chevron orientation={Position.RIGHT} disabled />;
-      case 'Radio':
-        return <RadioButton name="Hello" checked />;
-      case 'Checkbox':
-        return <CheckboxButton name="Hello" checked />;
-      case 'Switch':
-        return <Switch onClick={() => console.log('clicked')} />;
-      case 'Button':
-        return <Button v2>Hello</Button>;
-      case 'IconButton':
-        return (
-          <IconButton size={40} priority="minimal">
-            <InfoCircle />
-          </IconButton>
-        );
-    }
-  };
-  */
-  const idPrefix = useId();
-  const [controlType, setControlType] = useState<ItemTypes>('non-interactive');
-  const ids = {
-    label: `${idPrefix}_label`,
-    value: `${idPrefix}_value`,
-    control: `${idPrefix}_control`,
-    prompt: `${idPrefix}_prompt`,
-    additionalInfo: `${idPrefix}_additional-info`,
-  };
-  const itemCtx = useMemo(
-    () => ({ setControlType, ids, props: { as: View, disabled, inverted } }),
-    [],
-  );
-  return (
-    <ItemContext.Provider value={itemCtx}>
-      <View
-        className={clsx(
-          'np-item',
-          { 'np-item-interactive': controlType !== 'non-interactive' },
-          `np-item-${controlType}`,
-          'd-flex flex-row',
-          { 'align-items-center': !subtitle },
-          {
-            [`np-item-spotlight-${spotlight}`]: !!spotlight,
-          },
-        )}
-        aria-describedby={[ids.additionalInfo].join(' ')}
-      >
-        {media && <div className="np-item-media">{media}</div>}
-        {/* Title + Subtitle + Values + Additional Info - Group */}
-        <div className="np-item-body">
-          {/* Title + Subtitle + Values - Group */}
-          <div className="d-flex justify-content-between">
-            <span>
-              {/* @ts-expect-error div can have role and aria-lavel props */}
-              <Body
-                type={Typography.BODY_LARGE_BOLD}
-                className="np-item-title"
-                // for a11y this needs to be a header but for SEO it shouldn't be `h*` tag
-                // so we enable header semantics via `role` and `aria-level` attrs
-                role="heading"
-                aria-level="4"
-              >
-                {title}
-              </Body>
-              <Body className="np-item-subtitle">{subtitle}</Body>
-            </span>
-            {(valueTitle || valueSubtitle) && (
-              <span
-                id={ids.value}
-                className={clsx('np-item-value', 'd-flex align-items-center', {
-                  'flex-column': valueTitle !== undefined && valueSubtitle !== undefined,
-                })}
-              >
-                {valueTitle && (
-                  <Body type={Typography.BODY_LARGE_BOLD} className="np-item-title-value">
-                    {valueTitle}
-                  </Body>
-                )}
-                {valueSubtitle && <Body className="np-item-subtitle-value">{valueSubtitle}</Body>}
-              </span>
-            )}
-          </div>
-          {/* Additional Info and Prompt here */}
-          {Boolean(subtitle) && additionalInfo}
-        </div>
-        {control === null ? null : <Body className="np-item-control">{control}</Body>}
-        {prompt}
-      </View>
-    </ItemContext.Provider>
-  );
-};
-/* eslint-disable functional/immutable-data */
-Item.Image = Image;
-Item.AvatarView = AvatarView;
-Item.AvatarLayout = AvatarLayout;
-Item.AdditionalInfo = AdditionalInfo;
-Item.Checkbox = Checkbox;
-Item.IconButton = IconButton;
-Item.Navigation = Navigation;
-Item.Button = Button;
-Item.Switch = Switch;
-Item.Prompt = Prompt;
-/* eslint-enable functional/immutable-data */
-export default Item;

package/src/item/index.ts DELETED Viewed

@@ -1,6 +0,0 @@
-export type { Props as ItemProps } from './Item';
-export type { ItemAdditionalInfoProps } from './ItemAdditionalInfo';
-export type { ItemCheckboxProps } from './ItemCheckbox';
-export type { ItemImageProps, ItemAvatarViewProps, ItemAvatarLayoutProps } from './ItemMedia';
-export { default } from './Item';

package/src/item/useItemControl.tsx DELETED Viewed

@@ -1,12 +0,0 @@
-import { useContext, useEffect } from 'react';
-import { ItemContext, ItemContextData, ItemTypes } from './Item';
-export function useItemControl(controlType: ItemTypes) {
-  const { setControlType, props: baseItemProps } = useContext<ItemContextData>(ItemContext);
-  useEffect(() => {
-    setControlType(controlType);
-  }, [controlType, setControlType]);
-  return { baseItemProps };
-}