Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Icons are now wrapped in accessible SvgIcon #24

Merged
merged 1 commit into from
Nov 7, 2023
Merged

fix: Icons are now wrapped in accessible SvgIcon #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions packages/documentation/src/modules/App/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,15 @@ function App() {
<Button slim>Slim Button</Button>
<ButtonLink link="#">Link as a Button</ButtonLink>
</Section>
<Section kind="light">
<ButtonIcon label="Settings" disabled>
<IconSettings />
</ButtonIcon>
<Button disabled>Default Button</Button>
<Button slim disabled>
Slim Button
</Button>
</Section>

<Section>
<ButtonIcon label="Settings" kind="light">
Expand All @@ -70,6 +79,17 @@ function App() {
Link as a Button
</ButtonLink>
</Section>
<Section>
<ButtonIcon label="Settings" kind="light" disabled>
<IconSettings />
</ButtonIcon>
<Button kind="light" disabled>
Default Button
</Button>
<Button slim kind="light" disabled>
Slim Button
</Button>
</Section>
</section>

<section>
Expand Down
17 changes: 8 additions & 9 deletions packages/ui-components/src/components/Icons/IconClose.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
import { SvgIcon } from "../private/SvgIcon/SvgIcon";
import { defaultIconSize } from "./constants";
import type { IconsProps } from "./IconsTypes";

export const IconClose = ({ className }: IconsProps) => {
const generatedClassName = className ? className : defaultIconSize;

export const IconClose = ({ className, viewBox }: IconsProps) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 384 512"
fill="currentColor"
className={generatedClassName}
<SvgIcon
defaultViewBox="0 0 384 512"
defaultClassName={defaultIconSize}
viewBox={viewBox}
className={className}
>
{/* Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. */}
<path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" />
</svg>
</SvgIcon>
);
};
18 changes: 9 additions & 9 deletions packages/ui-components/src/components/Icons/IconCopied.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import { SvgIcon } from "../private/SvgIcon/SvgIcon";
import { defaultIconSize } from "./constants";
import type { IconsProps } from "./IconsTypes";

export const IconCopied = ({ className }: IconsProps) => {
const generatedClassName = className ? className : defaultIconSize;

export const IconCopied = ({ className, viewBox }: IconsProps) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className={generatedClassName}
<SvgIcon
defaultViewBox="0 0 24 24"
defaultClassName={defaultIconSize}
viewBox={viewBox}
className={className}
>
{/* Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. */}
<path d="m10.933 13.519-2.226-2.226-1.414 1.414 3.774 3.774 5.702-6.84-1.538-1.282z"></path>
<path d="M19 3H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2zM5 19V5h14l.002 14H5z"></path>
</svg>
</SvgIcon>
);
};
18 changes: 9 additions & 9 deletions packages/ui-components/src/components/Icons/IconCopy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import { SvgIcon } from "../private/SvgIcon/SvgIcon";
import { defaultIconSize } from "./constants";
import type { IconsProps } from "./IconsTypes";

export const IconCopy = ({ className }: IconsProps) => {
const generatedClassName = className ? className : defaultIconSize;

export const IconCopy = ({ className, viewBox }: IconsProps) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className={generatedClassName}
<SvgIcon
defaultViewBox="0 0 24 24"
defaultClassName={defaultIconSize}
Comment on lines +8 to +9
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The defaultViewBox and defaultClassName props are hardcoded. Consider making these values configurable through props or context to increase the flexibility of the SvgIcon component.

- defaultViewBox="0 0 24 24"
- defaultClassName={defaultIconSize}
+ defaultViewBox={defaultViewBox || "0 0 24 24"}
+ defaultClassName={defaultClassName || defaultIconSize}
Commitable suggestion

[!IMPORTANT]
Carefully review the code before committing. Make sure it correctly replaces the highlighted code, has no missing lines and indentaion issues.

Suggested change
defaultViewBox="0 0 24 24"
defaultClassName={defaultIconSize}
defaultViewBox={defaultViewBox || "0 0 24 24"}
defaultClassName={defaultClassName || defaultIconSize}

viewBox={viewBox}
className={className}
>
{/* Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. */}
<path d="M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z"></path>
<path d="M6 12h6v2H6zm0 4h6v2H6z"></path>
</svg>
</SvgIcon>
);
};
17 changes: 8 additions & 9 deletions packages/ui-components/src/components/Icons/IconDelete.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
import { SvgIcon } from "../private/SvgIcon/SvgIcon";
import { defaultIconSize } from "./constants";
import type { IconsProps } from "./IconsTypes";

export const IconDelete = ({ className }: IconsProps) => {
const generatedClassName = className ? className : defaultIconSize;

export const IconDelete = ({ className, viewBox }: IconsProps) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
fill="currentColor"
className={generatedClassName}
<SvgIcon
defaultViewBox="0 0 448 512"
defaultClassName={defaultIconSize}
viewBox={viewBox}
className={className}
>
{/* Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. */}
<path d="M135.2 17.7C140.6 6.8 151.7 0 163.8 0H284.2c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32h96l7.2-14.3zM32 128H416V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16z" />
</svg>
</SvgIcon>
);
};
16 changes: 8 additions & 8 deletions packages/ui-components/src/components/Icons/IconDog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { SvgIcon } from "../private/SvgIcon/SvgIcon";
import type { IconsProps } from "./IconsTypes";

export const IconDog = ({ className }: IconsProps) => {
const generatedClassName = className ? className : "w-full";
export const IconDog = ({ className, viewBox }: IconsProps) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 1200 500"
className={generatedClassName}
<SvgIcon
defaultViewBox="0 0 1200 500"
defaultClassName={"w-full"}
viewBox={viewBox}
className={className}
>
<g transform="matrix(11.9092 0 0 11.9092 470.0017 250.0009)" id="879221">
<path
Expand All @@ -17,6 +17,6 @@ export const IconDog = ({ className }: IconsProps) => {
strokeLinecap="round"
/>
</g>
</svg>
</SvgIcon>
);
};
17 changes: 8 additions & 9 deletions packages/ui-components/src/components/Icons/IconDogInShield.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
import { SvgIcon } from "../private/SvgIcon/SvgIcon";
import { defaultIconSize } from "./constants";
import type { IconsProps } from "./IconsTypes";

export const IconDogInShield = ({ className }: IconsProps) => {
const generatedClassName = className ? className : defaultIconSize;

export const IconDogInShield = ({ className, viewBox }: IconsProps) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
fill="currentColor"
className={generatedClassName}
<SvgIcon
defaultViewBox="0 0 512 512"
defaultClassName={defaultIconSize}
viewBox={viewBox}
className={className}
>
{/* Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. */}
<path d="M269.4 2.9C265.2 1 260.7 0 256 0s-9.2 1-13.4 2.9L54.3 82.8c-22 9.3-38.4 31-38.3 57.2c.5 99.2 41.3 280.7 213.6 363.2c16.7 8 36.1 8 52.8 0C454.7 420.7 495.5 239.2 496 140c.1-26.2-16.3-47.9-38.3-57.2L269.4 2.9zM160.9 286.2c4.8 1.2 9.9 1.8 15.1 1.8c35.3 0 64-28.7 64-64V160h44.2c12.1 0 23.2 6.8 28.6 17.7L320 192h64c8.8 0 16 7.2 16 16v32c0 44.2-35.8 80-80 80H272v50.7c0 7.3-5.9 13.3-13.3 13.3c-1.8 0-3.6-.4-5.2-1.1l-98.7-42.3c-6.6-2.8-10.8-9.3-10.8-16.4c0-2.8 .6-5.5 1.9-8l15-30zM160 160h40 8v32 32c0 17.7-14.3 32-32 32s-32-14.3-32-32V176c0-8.8 7.2-16 16-16zm128 48a16 16 0 1 0 -32 0 16 16 0 1 0 32 0z" />
</svg>
</SvgIcon>
);
};
16 changes: 8 additions & 8 deletions packages/ui-components/src/components/Icons/IconEdit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import { SvgIcon } from "../private/SvgIcon/SvgIcon";
import { defaultIconSize } from "./constants";
import type { IconsProps } from "./IconsTypes";

export const IconEdit = ({ className }: IconsProps) => {
const generatedClassName = className ? className : defaultIconSize;
export const IconEdit = ({ className, viewBox }: IconsProps) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
fill="currentColor"
className={generatedClassName}
<SvgIcon
defaultViewBox="0 0 512 512"
defaultClassName={defaultIconSize}
viewBox={viewBox}
className={className}
>
{/* Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. */}
<path d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z" />
</svg>
</SvgIcon>
);
};
17 changes: 8 additions & 9 deletions packages/ui-components/src/components/Icons/IconRestore.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
import { SvgIcon } from "../private/SvgIcon/SvgIcon";
import { defaultIconSize } from "./constants";
import type { IconsProps } from "./IconsTypes";

export const IconRestore = ({ className }: IconsProps) => {
const generatedClassName = className ? className : defaultIconSize;

export const IconRestore = ({ className, viewBox }: IconsProps) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
fill="currentColor"
className={generatedClassName}
<SvgIcon
defaultViewBox="0 0 512 512"
defaultClassName={defaultIconSize}
viewBox={viewBox}
className={className}
>
{/* Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. */}
<path d="M432 64H208c-8.8 0-16 7.2-16 16V96H128V80c0-44.2 35.8-80 80-80H432c44.2 0 80 35.8 80 80V304c0 44.2-35.8 80-80 80H416V320h16c8.8 0 16-7.2 16-16V80c0-8.8-7.2-16-16-16zM0 192c0-35.3 28.7-64 64-64H320c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192zm64 32c0 17.7 14.3 32 32 32H288c17.7 0 32-14.3 32-32s-14.3-32-32-32H96c-17.7 0-32 14.3-32 32z" />
</svg>
</SvgIcon>
);
};
Comment on lines +5 to 17
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The IconRestore component has been correctly refactored to use the SvgIcon component. The viewBox and className props are correctly passed to the SvgIcon component. The SVG path data remains unchanged.

- <svg className={className} viewBox="0 0 512 512">
-   <path d="M432 64H208c-8.8 0-16 7.2-16 16V96H128V80c0-44.2 35.8-80 80-80H432c44.2 0 80 35.8 80 80V304c0 44.2-35.8 80-80 80H416V320h16c8.8 0 16-7.2 16-16V80c0-8.8-7.2-16-16-16zM0 192c0-35.3 28.7-64 64-64H320c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192zm64 32c0 17.7 14.3 32 32 32H288c17.7 0 32-14.3 32-32s-14.3-32-32-32H96c-17.7 0-32 14.3-32 32z" />
- </svg>
+ <SvgIcon
+   defaultViewBox="0 0 512 512"
+   defaultClassName={defaultIconSize}
+   viewBox={viewBox}
+   className={className}
+ >
+   <path d="M432 64H208c-8.8 0-16 7.2-16 16V96H128V80c0-44.2 35.8-80 80-80H432c44.2 0 80 35.8 80 80V304c0 44.2-35.8 80-80 80H416V320h16c8.8 0 16-7.2 16-16V80c0-8.8-7.2-16-16-16zM0 192c0-35.3 28.7-64 64-64H320c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192zm64 32c0 17.7 14.3 32 32 32H288c17.7 0 32-14.3 32-32s-14.3-32-32-32H96c-17.7 0-32 14.3-32 32z" />
+ </SvgIcon>
Commitable suggestion

[!IMPORTANT]
Carefully review the code before committing. Make sure it correctly replaces the highlighted code, has no missing lines and indentaion issues.

Suggested change
export const IconRestore = ({ className, viewBox }: IconsProps) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
fill="currentColor"
className={generatedClassName}
<SvgIcon
defaultViewBox="0 0 512 512"
defaultClassName={defaultIconSize}
viewBox={viewBox}
className={className}
>
{/* Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. */}
<path d="M432 64H208c-8.8 0-16 7.2-16 16V96H128V80c0-44.2 35.8-80 80-80H432c44.2 0 80 35.8 80 80V304c0 44.2-35.8 80-80 80H416V320h16c8.8 0 16-7.2 16-16V80c0-8.8-7.2-16-16-16zM0 192c0-35.3 28.7-64 64-64H320c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192zm64 32c0 17.7 14.3 32 32 32H288c17.7 0 32-14.3 32-32s-14.3-32-32-32H96c-17.7 0-32 14.3-32 32z" />
</svg>
</SvgIcon>
);
};
export const IconRestore = ({ className, viewBox }: IconsProps) => {
return (
<SvgIcon
defaultViewBox="0 0 512 512"
defaultClassName={defaultIconSize}
viewBox={viewBox}
className={className}
>
{/* Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. */}
<path d="M432 64H208c-8.8 0-16 7.2-16 16V96H128V80c0-44.2 35.8-80 80-80H432c44.2 0 80 35.8 80 80V304c0 44.2-35.8 80-80 80H416V320h16c8.8 0 16-7.2 16-16V80c0-8.8-7.2-16-16-16zM0 192c0-35.3 28.7-64 64-64H320c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192zm64 32c0 17.7 14.3 32 32 32H288c17.7 0 32-14.3 32-32s-14.3-32-32-32H96c-17.7 0-32 14.3-32 32z" />
</SvgIcon>
);
};

18 changes: 9 additions & 9 deletions packages/ui-components/src/components/Icons/IconSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import { SvgIcon } from "../private/SvgIcon/SvgIcon";
import { defaultIconSize } from "./constants";
import type { IconsProps } from "./IconsTypes";

export const IconSettings = ({ className }: IconsProps) => {
const generatedClassName = className ? className : defaultIconSize;

export const IconSettings = ({ className, viewBox, ...rest }: IconsProps) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
fill="currentColor"
className={generatedClassName}
<SvgIcon
defaultViewBox="0 0 448 512"
defaultClassName={defaultIconSize}
viewBox={viewBox}
className={className}
{...rest}
>
{/* Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. */}
<path d="M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z" />
</svg>
</SvgIcon>
);
};
17 changes: 8 additions & 9 deletions packages/ui-components/src/components/Icons/IconUser.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
import { SvgIcon } from "../private/SvgIcon/SvgIcon";
import { defaultIconSize } from "./constants";
import type { IconsProps } from "./IconsTypes";

export const IconUser = ({ className }: IconsProps) => {
const generatedClassName = className ? className : defaultIconSize;

export const IconUser = ({ className, viewBox }: IconsProps) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
fill="currentColor"
className={generatedClassName}
<SvgIcon
defaultViewBox="0 0 512 512"
defaultClassName={defaultIconSize}
viewBox={viewBox}
className={className}
>
{/* Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. */}
<path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM164.1 325.5C182 346.2 212.6 368 256 368s74-21.8 91.9-42.5c5.8-6.7 15.9-7.4 22.6-1.6s7.4 15.9 1.6 22.6C349.8 372.1 311.1 400 256 400s-93.8-27.9-116.1-53.5c-5.8-6.7-5.1-16.8 1.6-22.6s16.8-5.1 22.6 1.6zM144.4 208a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm192-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />
</svg>
</SvgIcon>
);
};
1 change: 1 addition & 0 deletions packages/ui-components/src/components/Icons/IconsTypes.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export type IconsProps = {
className?: string;
viewBox?: string;
} & React.SVGAttributes<SVGElement>;
26 changes: 26 additions & 0 deletions packages/ui-components/src/components/private/SvgIcon/SvgIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import type { SvgIconProps } from "./SvgIconTypes";

export const SvgIcon = ({
children,
fill,
viewBox,
className,
defaultViewBox,
defaultClassName,
...rest
}: SvgIconProps) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
className={className ? className : defaultClassName}
viewBox={viewBox ? viewBox : defaultViewBox}
fill={fill ? fill : "currentColor"}
role="img"
aria-hidden
focusable={false}
{...rest}
>
{children}
</svg>
);
};
11 changes: 11 additions & 0 deletions packages/ui-components/src/components/private/SvgIcon/SvgIconTypes.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
export type SvgIconProps = {
children: React.ReactNode;
defaultViewBox: string;

fill?: string;
className?: string;
defaultClassName?: string;
viewBox?: string;
};

// & React.SVGAttributes<SVGElement>;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the commented-out line is not needed, consider removing it to maintain code cleanliness.

- // & React.SVGAttributes<SVGElement>;
Commitable suggestion

[!IMPORTANT]
Carefully review the code before committing. Make sure it correctly replaces the highlighted code, has no missing lines and indentaion issues.

Suggested change
// & React.SVGAttributes<SVGElement>;

43 changes: 43 additions & 0 deletions packages/ui-components/src/components/private/SvgIcon/__tests__/SvgIcon.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { render, screen } from "@testing-library/react";

import { SvgIcon } from "../SvgIcon";

describe("SvgIcon prop tests", () => {
it("should honor the prop `fill`", async () => {
render(
<SvgIcon data-testid="svgicon-1" defaultViewBox="0 0 448 512" fill="red">
<path d="M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z" />
</SvgIcon>,
);
const svg = await screen.findByTestId("svgicon-1");
expect(svg.getAttribute("fill")).toBe("red");
});

it("should honor the prop `viewBox`", async () => {
render(
<SvgIcon
data-testid="svgicon-1"
defaultViewBox="0 0 448 512"
viewBox="0 0 666 666"
>
<path d="M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z" />
</SvgIcon>,
);
const svg = await screen.findByTestId("svgicon-1");
expect(svg.getAttribute("viewBox")).toBe("0 0 666 666");
});

it("should honor the prop `className`", async () => {
render(
<SvgIcon
data-testid="svgicon-1"
defaultViewBox="0 0 448 512"
className="toto"
>
<path d="M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z" />
</SvgIcon>,
);
const svg = await screen.findByTestId("svgicon-1");
expect(svg.getAttribute("class")).toBe("toto");
});
});
Comment on lines +1 to +43
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The tests are well written and cover the main functionality of the SvgIcon component. They check if the component correctly handles the fill, viewBox, and className props. However, consider adding a test case to check the default behavior when these props are not provided.

Loading