@wise/art 2.10.0-beta.3 → 2.10.0

package/src/icons/Icon.spec.tsx

@@ -1,21 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-
-import { Icon } from './Icon';
-
-describe('Icon', () => {
-  it.skip('should default (wise flag) icon incase unknown icon name provided', () => {
-    render(<Icon name="foo" />);
-
-    screen.debug();
-
-    // expect(screen.getByRole('img')).toHaveAttribute('alt', '');
-  });
-
-  it.skip('should create alt with custom text', () => {
-    const customAltText = 'Image of slick check mark';
-    render(<Illustration alt={customAltText} name={Assets.CHECK_MARK} />);
-
-    expect(screen.getByRole('img')).toHaveAttribute('alt', customAltText);
-  });
-});

package/src/icons/Icon.stories.tsx

@@ -1,30 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-import { AlertCircle } from '@transferwise/icons';
-
-import { Icon } from './Icon';
-
-export default {
-  component: Icon,
-  title: 'Icon (Beta)',
-};
-
-type Story = StoryObj<typeof Icon>;
-
-export const Basic: Story = {
-  render: (args) => {
-    return (
-      // eslint-disable-next-line react/forbid-dom-props
-      <div style={{ color: 'green' }}>
-        <p>
-          New icon: <Icon {...args} />
-          <br />
-          Old icon: <AlertCircle className={args.className} size={args.size} filled={args.filled} />
-        </p>
-      </div>
-    );
-  },
-  args: {
-    name: 'alert-circle',
-    className: 'd-inline-block',
-  },
-};

package/src/icons/Icon.tsx

@@ -1,98 +0,0 @@
-import { clsx } from 'clsx';
-import { useEffect, useRef, AriaRole } from 'react';
-import sanitize from 'sanitize-html';
-
-export type Props = {
-  name: string;
-  size?: 16 | 24 | '16' | '24';
-  className?: string;
-  'data-testid'?: string;
-  title?: string;
-  role?: AriaRole;
-  filled?: boolean;
-};
-
-export const Icon = ({
-  name,
-  size = 16,
-  className = undefined,
-  filled = false,
-  'data-testid': testId,
-  title = undefined,
-  role = undefined,
-}: Props) => {
-  const assetName: string = filled ? `${name}-fill` : name;
-  const iconRef = useRef<HTMLSpanElement>(null);
-
-  useEffect(() => {
-    const loadIconAsset = async () => {
-      if (iconRef.current) {
-        try {
-          iconRef.current.innerHTML = await downloadSanitizeIcon(name);
-        } catch (error) {
-          // eslint-disable-next-line no-console
-          console.warn(error, 'use fallback (Fast Flag) icon');
-          iconRef.current.innerHTML = await downloadSanitizeIcon('fast-flag');
-        }
-      }
-    };
-    void loadIconAsset();
-  }, [name]);
-
-  return (
-    <span
-      ref={iconRef}
-      className={clsx('wds-icon', `wds-icon-${assetName}`, `wds-icon-size-${size}`, className)}
-      aria-hidden={title ? undefined : true}
-      role={role ?? (title ? undefined : 'none')}
-      data-testid={testId}
-    >
-      {title && <span className="sr-only">{title}</span>}
-    </span>
-  );
-};
-
-const svgAttributes = [
-  'xmlns',
-  'width',
-  'height',
-  'fill',
-  'viewBox',
-  'd',
-  'fill-rule',
-  'cx',
-  'cy',
-  'r',
-  'x',
-  'y',
-];
-
-const allowedTagsAttrs = {
-  svg: svgAttributes,
-  path: svgAttributes,
-  circle: svgAttributes,
-  rect: svgAttributes,
-};
-
-async function downloadSanitizeIcon(name: string): Promise<string> {
-  const response = await fetch(srcUrl(name));
-  if (!response.ok) {
-    throw new Error(`Failed to download icon '${name}'`);
-  }
-  const iconHtml = await response.text();
-  return sanitize(iconHtml, {
-    // allow only SVG elements (https://developer.mozilla.org/en-US/docs/Web/SVG/Element)
-    // and only SVG attributes (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute)
-    allowedTags: Object.keys(allowedTagsAttrs),
-    allowedAttributes: allowedTagsAttrs,
-    parser: {
-      lowerCaseAttributeNames: false,
-    },
-  });
-}
-
-function srcUrl(assetName: string) {
-  // return `/${assetName}.svg`;
-  // return `http://localhost:3001/${assetName}.svg`;
-  return `https://wise.com/web-art/assets/beta-icons/${assetName}.svg`;
-}

package/src/icons/index.ts

@@ -1,2 +0,0 @@
-export { Icon } from './Icon';
-export type { Props as IconProps } from './Icon';