Merge pull request #58 from nebula-aac/group-icons

[svg] group icons

packages/svg/jest.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+    preset: 'ts-jest',
+    testEnvironment: 'jsdom',
+    coverageThreshold: {
+        global: {
+            branches: 80,
+            functions: 80,
+            lines: 80,
+            statements: 80,
+        },
+    },
+};

packages/svg/package.json

@@ -14,10 +14,6 @@
     "test": "jest",
     "coverage": "jest --coverage"
   },
-  "jest": {
-    "preset": "ts-jest",
-    "testEnvironment": "jsdom"
-  },
   "devDependencies": {
     "@babel/preset-react": "^7.22.5",
     "@swc/core": "^1.3.78",
@@ -36,5 +32,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "@testing-library/react": "^14.0.0"
   }
 }

packages/svg/src/__testing__/AddIcon.test.tsx

@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react';
+import { AddIcon } from '../icons';
+
+describe('AddIcon', () => {
+  it('renders without errors', () => {
+    render(<AddIcon width={24} height={24} />);
+  });
+
+  it('applies width and height', () => {
+    const { getByTestId } = render(<AddIcon width={24} height={24} />);
+    const svgElement = getByTestId('add-icon-svg');
+    expect(svgElement.getAttribute('width')).toBe('24');
+    expect(svgElement.getAttribute('height')).toBe('24');
+  });
+});

packages/svg/src/icons/Add/AddIcon.tsx

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+import { IconProps } from '../types';
+import { DEFAULT_WIDTH, DEFAULT_HEIGHT, DEFAULT_FILL_NONE } from '../../constants/constants';
+
+export const AddIcon: FC<IconProps> = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  fill = DEFAULT_FILL_NONE,
+  ...props
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      data-testid="add-icon-svg"
+      {...props}
+    >
+      <path d="M0 0h24v24H0z" fill={fill} />
+      <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+    </svg>
+  );
+};
+
+export default AddIcon;

packages/svg/src/icons/Add/AddIconCircleBordered.tsx

@@ -0,0 +1,25 @@
+import { FC } from 'react';
+import { IconProps } from '../types';
+import { DEFAULT_WIDTH, DEFAULT_HEIGHT, DEFAULT_FILL_NONE } from '../../constants/constants';
+
+export const AddIconCircleBordered: FC<IconProps> = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  fill = DEFAULT_FILL_NONE,
+  ...props
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 48 48"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M0 0h48v48h-48z" fill={fill} />
+      <path d="M26 14h-4v8h-8v4h8v8h4v-8h8v-4h-8v-8zm-2-10c-11.05 0-20 8.95-20 20s8.95 20 20 20 20-8.95 20-20-8.95-20-20-20zm0 36c-8.82 0-16-7.18-16-16s7.18-16 16-16 16 7.18 16 16-7.18 16-16 16z" />
+    </svg>
+  );
+};
+
+export default AddIconCircleBordered;

packages/svg/src/icons/Add/index.ts

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

packages/svg/src/icons/Bell/BellIcon.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { IconProps } from '../types';
+import { DEFAULT_WIDTH, DEFAULT_HEIGHT } from '../../constants/constants';
+
+export const BellIcon: FC<IconProps> = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  ...props
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path d="M12 22c1.1 0 2-.9 2-2h-4a2 2 0 0 0 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z" />
+    </svg>
+  );
+};
+
+export default BellIcon;

packages/svg/src/icons/Bell/index.ts

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

packages/svg/src/icons/ChatIcon.tsx → packages/svg/src/icons/Chat/ChatIcon.tsx

@@ -1,7 +1,12 @@
 import { FC } from 'react';
-import { IconProps } from './types';
+import { IconProps } from '../types';
+import { DEFAULT_WIDTH, DEFAULT_HEIGHT } from '../../constants/constants';
 
-export const ChatIcon: FC<IconProps> = ({ width, height, color, ...props }) => {
+export const ChatIcon: FC<IconProps> = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  ...props
+}) => {
   return (
     <svg
       width={width}

packages/svg/src/icons/Chat/index.ts

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

packages/svg/src/icons/Clone/CloneIcon.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { IconProps } from '../types';
+import { DEFAULT_WIDTH, DEFAULT_HEIGHT } from '../../constants/constants';
+
+export const CloneIcon: FC<IconProps> = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  ...props
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      {...props}
+    >
+      <path d="M14.5 0h-10A1.5 1.5 0 0 0 3 1.5V3H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V13h1.5a1.5 1.5 0 0 0 1.5-1.5v-10A1.5 1.5 0 0 0 14.5 0Zm-3.188 14.5H1.688a.188.188 0 0 1-.188-.188V4.688a.187.187 0 0 1 .188-.188H3v7A1.5 1.5 0 0 0 4.5 13h7v1.313a.188.188 0 0 1-.188.187Zm3-3H4.688a.188.188 0 0 1-.188-.188V1.688a.187.187 0 0 1 .188-.188h9.625a.188.188 0 0 1 .187.188v9.624a.188.188 0 0 1-.188.188Z" />
+    </svg>
+  );
+};
+
+export default CloneIcon;

packages/svg/src/icons/Clone/index.ts

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

packages/svg/src/icons/CloudSavedIcon.tsx → packages/svg/src/icons/Cloud/CloudSavedIcon.tsx

@@ -1,15 +1,18 @@
 import { FC } from 'react';
-import { IconProps } from './types';
+import { IconProps } from '../types';
+import { DEFAULT_WIDTH, DEFAULT_HEIGHT } from '../../constants/constants';
 
-export const CloudSavedIcon: FC<IconProps> = ({ width, height, ...props }) => {
+export const CloudSavedIcon: FC<IconProps> = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  ...props
+}) => {
   return (
     <svg
       width={width}
       height={height}
-      viewBox="0 0 19.8 13.3"
       xmlns="http://www.w3.org/2000/svg"
-      xmlSpace="preserve"
-      enableBackground="new 0 0 19.8 13.3"
+      viewBox="0 0 19.8 13.3"
       {...props}
     >
       <path d="M6.6 7.6c-.2-.2-.2-.5 0-.7.2-.2.5-.2.7 0l1.4 1.4 3.5-3.5c.2-.2.5-.2.7 0 .2.2.2.5 0 .7L8.7 9.7 6.6 7.6zM3.2 6c.3-.1.4-.3.4-.5v-.1c-.1-.3-.1-.5 0-.8 0-.6.4-1.1 1-1.3.2-.1.4-.1.5-.1.3 0 .7.1 1 .3l.1.1c.2.2.5.1.6-.1l.1-.1c.8-1.6 2.5-2.5 4.2-2.3 1.8.2 3.3 1.6 3.6 3.4.1.6.1 1.2-.1 1.8v.2c-.1.3.2.6.5.5h.2c.4-.1.8-.1 1.2-.1 1.2.1 2.1 1.1 2.3 2.3.1.8-.2 1.6-.7 2.2-.5.6-1.3.8-2 .8H4.4c-1.8 0-3.2-1.3-3.3-3C1 7.7 1.9 6.4 3.2 6zM0 9.2c.1 2.3 2 4 4.3 4h11.8c1 0 2-.4 2.7-1.2.7-.7 1.1-1.7 1-2.7-.1-1.9-1.6-3.4-3.5-3.6h-.6c.1-.5 0-1 0-1.5-.4-2.3-2.3-4-4.6-4.3-2-.2-3.9.7-5 2.4-.5-.2-1-.3-1.5-.2-1.1.2-2 1-2.2 2.1-.1.3-.1.6 0 .9C.9 5.9-.1 7.5 0 9.2z" />

packages/svg/src/icons/Cloud/index.ts

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