Skip to content

Commit

Permalink
OPHJOD-285: Update RoundLinkButton clickable area
Browse files Browse the repository at this point in the history
  • Loading branch information
@ketsappi
ketsappi committed Apr 9, 2024
1 parent e796b43 commit b36488b
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 64 deletions.
4 changes: 2 additions & 2 deletions lib/components/RoundButton/RoundButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@ export const RoundButton = ({ label, onClick, disabled = false, selected = false
disabled={disabled}
type="button"
onClick={onClick}
className={`border-transparent hover:ring-purple-500 focus:ring-purple-500 size-[72px] rounded-full border hover:ring focus:outline-none focus:ring focus:hover:border-none ${selected ? 'bg-[#697077]' : 'bg-[#f5f5f5]'}`}
className={`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 ${selected ? 'bg-[#697077]' : 'bg-[#f5f5f5]'}`}
>
{/** TODO: Need real icons and alignment and styles to be adjusted then */}
<span className={`text-5xl text-center leading-6 ${selected ? 'text-[#ffffff]' : 'text-[#4d5358]'}`}>
<span className={`text-center text-[42px] leading-6 ${selected ? 'text-[#ffffff]' : 'text-[#4d5358]'}`}>
&#9776;
</span>
</button>
Expand Down
20 changes: 10 additions & 10 deletions lib/components/RoundButton/__snapshots__/RoundButton.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ exports[`Snapshot testing > Default 1`] = `
>
<button
aria-labelledby=":r0:"
class="border-transparent hover:ring-purple-500 focus:ring-purple-500 size-[72px] rounded-full border hover:ring focus:outline-none focus:ring focus:hover:border-none bg-[#f5f5f5]"
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
class="text-5xl text-center leading-6 text-[#4d5358]"
class="text-center text-[42px] leading-6 text-[#4d5358]"
>
☰
</span>
Expand All @@ -30,11 +30,11 @@ exports[`Snapshot testing > Disabled, non-selected 1`] = `
>
<button
aria-labelledby=":r3:"
class="border-transparent hover:ring-purple-500 focus:ring-purple-500 size-[72px] rounded-full border hover:ring focus:outline-none focus:ring focus:hover:border-none bg-[#f5f5f5]"
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
class="text-5xl text-center leading-6 text-[#4d5358]"
class="text-center text-[42px] leading-6 text-[#4d5358]"
>
☰
</span>
Expand All @@ -54,11 +54,11 @@ exports[`Snapshot testing > Disabled, selected 1`] = `
>
<button
aria-labelledby=":r2:"
class="border-transparent hover:ring-purple-500 focus:ring-purple-500 size-[72px] rounded-full border hover:ring focus:outline-none focus:ring focus:hover:border-none bg-[#697077]"
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
class="text-5xl text-center leading-6 text-[#ffffff]"
class="text-center text-[42px] leading-6 text-[#ffffff]"
>
☰
</span>
Expand All @@ -78,11 +78,11 @@ exports[`Snapshot testing > Disabled, selected 2`] = `
>
<button
aria-labelledby=":r4:"
class="border-transparent hover:ring-purple-500 focus:ring-purple-500 size-[72px] rounded-full border hover:ring focus:outline-none focus:ring focus:hover:border-none bg-[#697077]"
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
class="text-5xl text-center leading-6 text-[#ffffff]"
class="text-center text-[42px] leading-6 text-[#ffffff]"
>
☰
</span>
Expand All @@ -102,11 +102,11 @@ exports[`Snapshot testing > selected 1`] = `
>
<button
aria-labelledby=":r1:"
class="border-transparent hover:ring-purple-500 focus:ring-purple-500 size-[72px] rounded-full border hover:ring focus:outline-none focus:ring focus:hover:border-none bg-[#697077]"
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
class="text-5xl text-center leading-6 text-[#ffffff]"
class="text-center text-[42px] leading-6 text-[#ffffff]"
>
☰
</span>
Expand Down
24 changes: 12 additions & 12 deletions lib/components/RoundLinkButton/RoundLinkButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,19 +27,19 @@ export const RoundLinkButton = ({
const labelId = useId();
return (
<div className={`${className ? className : ''} flex flex-col items-center justify-center px-1`.trim()}>
<div
className={`border-transparent hover:ring-purple-500 size-[72px] rounded-full border no-underline hover:ring ${selected ? 'bg-[#697077]' : 'bg-[#f5f5f5]'}`}
<Component
{...rest}
aria-labelledby={labelId}
className={`flex size-[72px] justify-center rounded-full border border-none no-underline hover:ring hover:ring-accent focus:outline-none focus:ring focus:hover:border-none ${selected ? 'bg-[#697077]' : 'bg-[#f5f5f5]'}`}
>
<Component {...rest} aria-labelledby={labelId}>
{/** TODO: Need real icons and alignment and styles to be adjusted then */}
<span
aria-hidden={true}
className={`text-5xl flex select-none justify-center pt-1 ${selected ? 'text-[#ffffff]' : 'text-[#4d5358]'}`}
>
&#9776;
</span>
</Component>
</div>
{/** TODO: Need real icons and alignment and styles to be adjusted then */}
<span
aria-hidden={true}
className={`select-none text-[42px] ${selected ? 'text-[#ffffff]' : 'text-[#4d5358]'}`}
>
&#9776;
</span>
</Component>
<span id={labelId} className={'text-sm flex justify-center font-normal'}>
{label}
</span>
Expand Down
60 changes: 20 additions & 40 deletions lib/components/RoundLinkButton/__snapshots__/RoundLinkButton.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,11 @@ exports[`Snapshot testing > Default 1`] = `
<div
class="flex flex-col items-center justify-center px-1"
>
<div
class="border-transparent hover:ring-purple-500 size-[72px] rounded-full border no-underline hover:ring bg-[#f5f5f5]"
<a
href="/#"
>
<a
href="/#"
>
label
</a>
</div>
label
</a>
<span
class="text-sm flex justify-center font-normal"
id=":r0:"
Expand All @@ -26,15 +22,11 @@ exports[`Snapshot testing > Disabled, non-selected 1`] = `
<div
class="flex flex-col items-center justify-center px-1"
>
<div
class="border-transparent hover:ring-purple-500 size-[72px] rounded-full border no-underline hover:ring bg-[#f5f5f5]"
<a
href="/#"
>
<a
href="/#"
>
label
</a>
</div>
label
</a>
<span
class="text-sm flex justify-center font-normal"
id=":r3:"
Expand All @@ -48,15 +40,11 @@ exports[`Snapshot testing > Disabled, selected 1`] = `
<div
class="flex flex-col items-center justify-center px-1"
>
<div
class="border-transparent hover:ring-purple-500 size-[72px] rounded-full border no-underline hover:ring bg-[#697077]"
<a
href="/#"
>
<a
href="/#"
>
label
</a>
</div>
label
</a>
<span
class="text-sm flex justify-center font-normal"
id=":r2:"
Expand All @@ -70,15 +58,11 @@ exports[`Snapshot testing > Disabled, selected 2`] = `
<div
class="flex flex-col items-center justify-center px-1"
>
<div
class="border-transparent hover:ring-purple-500 size-[72px] rounded-full border no-underline hover:ring bg-[#697077]"
<a
href="/#"
>
<a
href="/#"
>
label
</a>
</div>
label
</a>
<span
class="text-sm flex justify-center font-normal"
id=":r4:"
Expand All @@ -92,15 +76,11 @@ exports[`Snapshot testing > selected 1`] = `
<div
class="flex flex-col items-center justify-center px-1"
>
<div
class="border-transparent hover:ring-purple-500 size-[72px] rounded-full border no-underline hover:ring bg-[#697077]"
<a
href="/#"
>
<a
href="/#"
>
label
</a>
</div>
label
</a>
<span
class="text-sm flex justify-center font-normal"
id=":r1:"
Expand Down

0 comments on commit b36488b

Please sign in to comment.