[Icons] Add PinIcon and OutlinedPinIcon

src/__testing__/PinIcon.test.tsx

@@ -0,0 +1,90 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import { Tooltip } from '../base/Tooltip';
+import { OutlinedPinIcon, PinIcon } from '../icons';
+import { SistentThemeProviderWithoutBaseLine } from '../theme';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<SistentThemeProviderWithoutBaseLine>{ui}</SistentThemeProviderWithoutBaseLine>);
+}
+
+const icons = [
+  { name: 'PinIcon', Component: PinIcon },
+  { name: 'OutlinedPinIcon', Component: OutlinedPinIcon }
+];
+
+describe.each(icons)('$name', ({ Component }) => {
+  it('renders an <svg> with viewBox "0 0 24 24"', () => {
+    const { container } = renderWithTheme(<Component />);
+    const svg = container.querySelector('svg');
+    expect(svg).not.toBeNull();
+    expect(svg!.getAttribute('viewBox')).toBe('0 0 24 24');
+  });
+
+  it('renders with default width and height "24", and default fill "currentColor"', () => {
+    const { container } = renderWithTheme(<Component />);
+    const svg = container.querySelector('svg');
+    expect(svg).not.toBeNull();
+    expect(svg!.getAttribute('width')).toBe('24');
+    expect(svg!.getAttribute('height')).toBe('24');
+    expect(svg!.getAttribute('fill')).toBe('currentColor');
+  });
+
+  it('applies custom width, height, and fill props', () => {
+    const { container } = renderWithTheme(<Component width={32} height={32} fill="#ff0000" />);
+    const svg = container.querySelector('svg');
+    expect(svg).not.toBeNull();
+    expect(svg!.getAttribute('width')).toBe('32');
+    expect(svg!.getAttribute('height')).toBe('32');
+    expect(svg!.getAttribute('fill')).toBe('#ff0000');
+  });
+
+  it('forwards extra props like aria-hidden', () => {
+    const { container } = renderWithTheme(<Component aria-hidden="true" />);
+    const svg = container.querySelector('svg');
+    expect(svg).not.toBeNull();
+    expect(svg!.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('attaches a forwarded ref to the rendered <svg> element', () => {
+    const ref = React.createRef<SVGSVGElement>();
+    const { container } = renderWithTheme(<Component ref={ref} />);
+    const svg = container.querySelector('svg');
+    expect(ref.current).toBeInstanceOf(SVGSVGElement);
+    expect(ref.current).toBe(svg);
+  });
+
+  it('opens MUI Tooltip when the icon is its direct child', async () => {
+    const { container } = renderWithTheme(
+      <Tooltip title="Pin tooltip" enterDelay={0}>
+        <Component />
+      </Tooltip>
+    );
+    const svg = container.querySelector('svg');
+    expect(svg).not.toBeNull();
+
+    fireEvent.mouseOver(svg!);
+    const tooltipText = await screen.findByText('Pin tooltip');
+    expect(tooltipText).not.toBeNull();
+  });
+});
+
+describe('PinIcon and OutlinedPinIcon path comparison', () => {
+  it('renders different path "d" attributes for the two icons', () => {
+    const { container: pinContainer } = renderWithTheme(<PinIcon />);
+    const { container: outlinedContainer } = renderWithTheme(<OutlinedPinIcon />);
+
+    const pinPath = pinContainer.querySelector('path');
+    const outlinedPath = outlinedContainer.querySelector('path');
+
+    expect(pinPath).not.toBeNull();
+    expect(outlinedPath).not.toBeNull();
+
+    const pinD = pinPath!.getAttribute('d');
+    const outlinedD = outlinedPath!.getAttribute('d');
+
+    expect(pinD).toBeTruthy();
+    expect(outlinedD).toBeTruthy();
+    expect(pinD).not.toBe(outlinedD);
+  });
+});

src/icons/Pin/OutlinedPinIcon.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { DEFAULT_FILL_NONE, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import { IconProps } from '../types';
+
+export const OutlinedPinIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, fill = DEFAULT_FILL_NONE, ...props }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        width={width}
+        height={height}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill={fill}
+        {...props}
+      >
+        <path d="M14 4v5c0 1.12.37 2.16 1 3H9c.65-.86 1-1.9 1-3V4h4m3-2H7c-.55 0-1 .45-1 1s.45 1 1 1h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3V4h1c.55 0 1-.45 1-1s-.45-1-1-1z" />
+      </svg>
+    );
+  }
+);
+
+OutlinedPinIcon.displayName = 'OutlinedPinIcon';
+
+export default OutlinedPinIcon;

src/icons/Pin/PinIcon.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { DEFAULT_FILL_NONE, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import { IconProps } from '../types';
+
+export const PinIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, fill = DEFAULT_FILL_NONE, ...props }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        width={width}
+        height={height}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill={fill}
+        {...props}
+      >
+        <path d="M16 9V4h1c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z" />
+      </svg>
+    );
+  }
+);
+
+PinIcon.displayName = 'PinIcon';
+
+export default PinIcon;

src/icons/Pin/index.ts

@@ -0,0 +1,2 @@
+export { default as OutlinedPinIcon } from './OutlinedPinIcon';
+export { default as PinIcon } from './PinIcon';

src/icons/index.ts

@@ -149,6 +149,7 @@ export * from './Pattern';
 export * from './People';
 export * from './Performance';
 export * from './Person';
+export * from './Pin';
 export * from './PlayArrow';
 export * from './Pod';
 export * from './Poll';