OPHJOD-320: RoundLinkButton icon change improvement

Opetushallitus · Apr 11, 2024 · 454a2ce · 454a2ce
1 parent 15729a4
commit 454a2ce
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 107 deletions.
diff --git a/lib/components/RoundButton/RoundButton.stories.tsx b/lib/components/RoundButton/RoundButton.stories.tsx
@@ -16,13 +16,6 @@ export const Base: Story = {
   args: {
     label: 'Goals',
     onClick: fn(),
-    iconComponent: ({ selected, className, ...rootProps }) => (
-      <span
-        className={`${className ? className : ''} ${selected ? 'text-white' : 'text-secondary-gray'} material-symbols-outlined size-48 select-none self-center`}
-        {...rootProps}
-      >
-        {'target'}
-      </span>
-    ),
+    icon: 'target',
   },
 };
diff --git a/lib/components/RoundButton/RoundButton.test.tsx b/lib/components/RoundButton/RoundButton.test.tsx
@@ -6,41 +6,45 @@ import { RoundButton } from './RoundButton';
 
 describe('Snapshot testing', () => {
   test('Default', () => {
-    const { container } = render(<RoundButton label="Default" onClick={vi.fn()} />);
+    const { container } = render(<RoundButton label="Default" onClick={vi.fn()} icon="target" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test('selected', () => {
-    const { container } = render(<RoundButton label="Selected" selected={true} onClick={vi.fn()} />);
+    const { container } = render(<RoundButton label="Selected" selected={true} onClick={vi.fn()} icon="target" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test('Disabled, selected', () => {
-    const { container } = render(<RoundButton label="Disabled, non-selected" selected={true} onClick={vi.fn()} />);
+    const { container } = render(
+      <RoundButton label="Disabled, non-selected" selected={true} onClick={vi.fn()} icon="target" />,
+    );
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test('Disabled, non-selected', () => {
-    const { container } = render(<RoundButton label="Disabled, non-selected" onClick={vi.fn()} />);
+    const { container } = render(<RoundButton label="Disabled, non-selected" onClick={vi.fn()} icon="target" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test('Disabled, selected', () => {
-    const { container } = render(<RoundButton label="Disabled, non-selected" selected={true} onClick={vi.fn()} />);
+    const { container } = render(
+      <RoundButton label="Disabled, non-selected" selected={true} onClick={vi.fn()} icon="target" />,
+    );
     expect(container.firstChild).toMatchSnapshot();
   });
 });
 
 it('has the correct label', () => {
-  render(<RoundButton label="Label" onClick={vi.fn()} />);
+  render(<RoundButton label="Label" onClick={vi.fn()} icon="target" />);
   expect(screen.getByRole('button', { name: 'Label' })).not.toBeNull();
 });
 
 it('calls the callback on click', async () => {
   const mockCallback = vi.fn();
   const user = userEvent.setup();
 
-  render(<RoundButton label="Test callback" onClick={mockCallback} />);
+  render(<RoundButton label="Test callback" onClick={mockCallback} icon="target" />);
   const button = screen.getByRole('button', { name: 'Test callback' });
   await user.click(button);
   expect(mockCallback).toHaveBeenCalledTimes(1);
@@ -50,22 +54,24 @@ it('does not call the callback while disabled', async () => {
   const mockCallback = vi.fn();
   const user = userEvent.setup();
 
-  render(<RoundButton label="Disabled RoundButton" onClick={mockCallback} disabled />);
+  render(<RoundButton label="Disabled RoundButton" onClick={mockCallback} disabled icon="target" />);
   const button = screen.getByRole('button', { name: 'Disabled RoundButton' });
   await user.click(button);
   expect(mockCallback).toHaveBeenCalledTimes(0);
 });
 
 describe('disabled', () => {
   it('should add correct CSS classes', () => {
-    render(<RoundButton label="Disabled RoundButton" disabled={true} onClick={vi.fn()} />);
+    render(<RoundButton label="Disabled RoundButton" disabled={true} onClick={vi.fn()} icon="target" />);
     const parentClassList = screen.getByText('Disabled RoundButton').parentElement?.classList;
     expect(parentClassList).toContain('cursor-not-allowed');
     expect(parentClassList).toContain('opacity-50');
   });
 
   it('has the disabled attribute', () => {
-    const { getByRole } = render(<RoundButton label="Disabled RoundButton" disabled={true} onClick={vi.fn()} />);
+    const { getByRole } = render(
+      <RoundButton label="Disabled RoundButton" disabled={true} onClick={vi.fn()} icon="target" />,
+    );
     expect(getByRole('button')).toHaveProperty('disabled', true);
   });
 });
diff --git a/lib/components/RoundButton/RoundButton.tsx b/lib/components/RoundButton/RoundButton.tsx
@@ -1,10 +1,3 @@
-interface IconProps {
-  className?: string;
-  selected?: boolean;
-}
-
-type RoundButtonIconProps = React.ComponentType<IconProps>;
-
 export interface RoundButtonProps {
   /** Text shown on the button */
   label: string;
@@ -16,8 +9,8 @@ export interface RoundButtonProps {
   selected?: boolean;
   /** CSS classname */
   className?: string;
-  /** Icon component to show */
-  iconComponent: RoundButtonIconProps;
+  /** Icon name from Material Design */
+  icon: string;
 }
 
 export const RoundButton = ({
@@ -26,7 +19,7 @@ export const RoundButton = ({
   disabled = false,
   selected = false,
   className,
-  iconComponent: IconComponent,
+  icon,
 }: RoundButtonProps) => {
   return (
     <button
@@ -35,11 +28,12 @@ export const RoundButton = ({
       onClick={onClick}
       className={`${className ? className : ''} flex flex-col justify-center ${disabled ? 'cursor-not-allowed opacity-50' : ''} min-w-[110px] items-center`.trim()}
     >
-      <IconComponent
+      <span
         aria-hidden
-        className={`size-[72px] rounded-full ${selected ? 'bg-accent' : 'bg-bg-gray'} flex items-center justify-center`}
-        selected={selected}
-      />
+        className={`size-[72px] rounded-full ${selected ? 'bg-accent' : 'bg-bg-gray'} flex items-center justify-center ${selected ? 'text-white' : 'text-secondary-gray'} material-symbols-outlined size-48 select-none`}
+      >
+        {icon}
+      </span>
       <span className={`text-sm font-normal ${selected ? 'text-accent' : 'text-primary-gray'}`}>{label}</span>
     </button>
   );

diff --git a/lib/components/RoundButton/__snapshots__/RoundButton.test.tsx.snap b/lib/components/RoundButton/__snapshots__/RoundButton.test.tsx.snap
@@ -1,121 +1,96 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Snapshot testing > Default 1`] = `
-<div
-  class="flex flex-col items-center justify-center px-1"
+<button
+  class="flex flex-col justify-center  min-w-[110px] items-center"
+  type="button"
 >
-  <button
-    aria-labelledby=":r0:"
-    class="focus:ring-purple-500 size-[72px] rounded-full border border-none hover:ring hover:ring-accent focus:outline-none focus:ring focus:hover:border-none bg-[#f5f5f5]"
-    type="button"
+  <span
+    aria-hidden="true"
+    class="size-[72px] rounded-full bg-bg-gray flex items-center justify-center text-secondary-gray material-symbols-outlined size-48 select-none"
   >
-    <span
-      class="text-center text-[42px] leading-6 text-[#4d5358]"
-    >
-      ☰
-    </span>
-  </button>
+    target
+  </span>
   <span
-    class="text-sm font-normal"
-    id=":r0:"
+    class="text-sm font-normal text-primary-gray"
   >
     Default
   </span>
-</div>
+</button>
 `;
 
 exports[`Snapshot testing > Disabled, non-selected 1`] = `
-<div
-  class="flex flex-col items-center justify-center px-1"
+<button
+  class="flex flex-col justify-center  min-w-[110px] items-center"
+  type="button"
 >
-  <button
-    aria-labelledby=":r3:"
-    class="focus:ring-purple-500 size-[72px] rounded-full border border-none hover:ring hover:ring-accent focus:outline-none focus:ring focus:hover:border-none bg-[#f5f5f5]"
-    type="button"
+  <span
+    aria-hidden="true"
+    class="size-[72px] rounded-full bg-bg-gray flex items-center justify-center text-secondary-gray material-symbols-outlined size-48 select-none"
   >
-    <span
-      class="text-center text-[42px] leading-6 text-[#4d5358]"
-    >
-      ☰
-    </span>
-  </button>
+    target
+  </span>
   <span
-    class="text-sm font-normal"
-    id=":r3:"
+    class="text-sm font-normal text-primary-gray"
   >
     Disabled, non-selected
   </span>
-</div>
+</button>
 `;
 
 exports[`Snapshot testing > Disabled, selected 1`] = `
-<div
-  class="flex flex-col items-center justify-center px-1"
+<button
+  class="flex flex-col justify-center  min-w-[110px] items-center"
+  type="button"
 >
-  <button
-    aria-labelledby=":r2:"
-    class="focus:ring-purple-500 size-[72px] rounded-full border border-none hover:ring hover:ring-accent focus:outline-none focus:ring focus:hover:border-none bg-[#697077]"
-    type="button"
+  <span
+    aria-hidden="true"
+    class="size-[72px] rounded-full bg-accent flex items-center justify-center text-white material-symbols-outlined size-48 select-none"
   >
-    <span
-      class="text-center text-[42px] leading-6 text-[#ffffff]"
-    >
-      ☰
-    </span>
-  </button>
+    target
+  </span>
   <span
-    class="text-sm font-normal"
-    id=":r2:"
+    class="text-sm font-normal text-accent"
   >
     Disabled, non-selected
   </span>
-</div>
+</button>
 `;
 
 exports[`Snapshot testing > Disabled, selected 2`] = `
-<div
-  class="flex flex-col items-center justify-center px-1"
+<button
+  class="flex flex-col justify-center  min-w-[110px] items-center"
+  type="button"
 >
-  <button
-    aria-labelledby=":r4:"
-    class="focus:ring-purple-500 size-[72px] rounded-full border border-none hover:ring hover:ring-accent focus:outline-none focus:ring focus:hover:border-none bg-[#697077]"
-    type="button"
+  <span
+    aria-hidden="true"
+    class="size-[72px] rounded-full bg-accent flex items-center justify-center text-white material-symbols-outlined size-48 select-none"
   >
-    <span
-      class="text-center text-[42px] leading-6 text-[#ffffff]"
-    >
-      ☰
-    </span>
-  </button>
+    target
+  </span>
   <span
-    class="text-sm font-normal"
-    id=":r4:"
+    class="text-sm font-normal text-accent"
   >
     Disabled, non-selected
   </span>
-</div>
+</button>
 `;
 
 exports[`Snapshot testing > selected 1`] = `
-<div
-  class="flex flex-col items-center justify-center px-1"
+<button
+  class="flex flex-col justify-center  min-w-[110px] items-center"
+  type="button"
 >
-  <button
-    aria-labelledby=":r1:"
-    class="focus:ring-purple-500 size-[72px] rounded-full border border-none hover:ring hover:ring-accent focus:outline-none focus:ring focus:hover:border-none bg-[#697077]"
-    type="button"
+  <span
+    aria-hidden="true"
+    class="size-[72px] rounded-full bg-accent flex items-center justify-center text-white material-symbols-outlined size-48 select-none"
   >
-    <span
-      class="text-center text-[42px] leading-6 text-[#ffffff]"
-    >
-      ☰
-    </span>
-  </button>
+    target
+  </span>
   <span
-    class="text-sm font-normal"
-    id=":r1:"
+    class="text-sm font-normal text-accent"
   >
     Selected
   </span>
-</div>
+</button>
 `;