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.

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

Created reusable link button component #2818

Merged
merged 5 commits into from
Dec 3, 2024
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
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
129 changes: 129 additions & 0 deletions src/design-system/components/link-button/LinkButton.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
@use '~scss/utilities' as *;

.#{$prefix}link-button {
font-size: var(--#{$prefix}font-size-md);
font-weight: var(--#{$prefix}font-weight-medium);
line-height: var(--#{$prefix}line-height-lg);
text-transform: none;
display: flex;
justify-content: center;
transition: all 0.3s ease-out;
text-decoration: none;
position: relative;

&::after {
content: '';
position: absolute;
bottom: 2px;
left: var(--#{$prefix}space-1);
opacity: 0;
width: calc(100% - var(--#{$prefix}space-1) * 2);
height: var(--#{$prefix}border-width-xs);
transition: all 0.3s ease-out;
border-radius: var(--#{$prefix}border-radius-2xs);
}

& > &__loader {
position: absolute;
}

&__small {
@extend %size-small;
}

&__medium {
@extend %size-medium;
}

&__light {
@extend %variant-light;
}

&__dark {
@extend %variant-dark;
}

&__disabled {
pointer-events: none;
}

&__loading .#{$prefix}link-button__content {
visibility: hidden;
}
}

%size-small {
font-size: var(--#{$prefix}font-size-sm);
line-height: var(--#{$prefix}line-height-sm);
padding: 0 var(--#{$prefix}space-1);
column-gap: var(--#{$prefix}space-1);

&::after {
bottom: 0;
}
}

%size-medium {
padding: 0 var(--#{$prefix}space-1);
column-gap: var(--#{$prefix}space-1);
}

%variant-light {
color: var(--#{$prefix}blue-gray-800);

&:hover {
color: var(--#{$prefix}blue-gray-500);
}

&:active {
color: var(--#{$prefix}blue-gray-500);

&::after {
background-color: var(--#{$prefix}blue-gray-500);
opacity: 1;
}
}

&:focus-visible {
color: var(--#{$prefix}blue-gray-800);

&::after {
background-color: var(--#{$prefix}blue-gray-800);
opacity: 1;
}
}

&.#{$prefix}link-button__disabled {
color: var(--#{$prefix}blue-gray-300);
}
}

%variant-dark {
color: var(--#{$prefix}blue-gray-50);

&:hover {
color: var(--#{$prefix}blue-gray-300);
}

&:active {
color: var(--#{$prefix}blue-gray-300);

&::after {
background-color: var(--#{$prefix}blue-gray-300);
opacity: 1;
}
}

&:focus-visible {
color: var(--#{$prefix}blue-gray-50);

&::after {
background-color: var(--#{$prefix}blue-gray-50);
opacity: 1;
}
}

&.#{$prefix}link-button__disabled {
color: var(--#{$prefix}blue-gray-200);
}
}
41 changes: 41 additions & 0 deletions src/design-system/components/link-button/LinkButton.tsx
VKormylo marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { FC, ReactNode } from 'react'
import Loader from '~/components/loader/Loader'
import { LinkButtonVariantEnum, SizeEnum } from '~/types'
import { Link } from 'react-router-dom'
import '~scss-components/link-button/LinkButton.scss'

interface LinkButtonProps {
children: ReactNode
to: string
variant: LinkButtonVariantEnum
size?: SizeEnum | null
loading?: boolean
disabled?: boolean
}

const LinkButton: FC<LinkButtonProps> = ({
children,
to,
variant,
size = SizeEnum.Medium,
loading,
disabled
}) => {
const loader = <Loader size={20} sx={{ opacity: '0.6' }} />
return (
<Link
className={
`s2s-link-button s2s-link-button__${variant} ` +
(size ? `s2s-link-button__${size} ` : '') +
(disabled || loading ? 's2s-link-button__disabled ' : '') +
(loading ? 's2s-link-button__loading' : '')
}
VKormylo marked this conversation as resolved.
Show resolved Hide resolved
to={disabled ? '#' : to}
>
{loading ? <div className='s2s-link-button__loader'>{loader}</div> : ''}
VKormylo marked this conversation as resolved.
Show resolved Hide resolved
<div className='s2s-link-button__content'>{children}</div>
</Link>
)
}

export default LinkButton
127 changes: 127 additions & 0 deletions src/design-system/stories/LinkButton.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
import type { Meta, StoryObj } from '@storybook/react'
import LinkButton from '~scss-components/link-button/LinkButton'
import { BrowserRouter as Router } from 'react-router-dom'
import { LinkButtonVariantEnum, SizeEnum } from '~/types'

const meta: Meta<typeof LinkButton> = {
title: 'Components/LinkButton',
component: LinkButton,
decorators: [
(Story) => (
<Router>
<Story />
</Router>
)
],
parameters: {
layout: 'centered',
docs: {
description: {
component: `

The \`LinkButton\` component is a versatile and customizable link button element that can be used for a variety of actions in your application. It supports different visual styles (variants), sizes, and states, making it a flexible component for many UI scenarios.

#### Key Features:
- **Variants:** Choose from two pre-defined styles light and dark to match the current theme.
- **Sizes:** Adjust the button's size to suit the context, whether you need a medium link button or a smaller, more subtle link button.
- **Loading State:** Display a loading indicator when an action is in progress, signaling to the user that something is happening.
- **Link Navigation:** Link button acts as a navigation element using the \`to\` prop.

This component is essential for navigating users throughout your application.
`
}
}
},
tags: ['autodocs'],
argTypes: {
children: {
description:
"The content to be displayed inside the link button, typically a text label that describes the button's action or route"
},
variant: {
description:
"The visual style of the button. This determines the button's appearance and behavior",
options: ['light', 'dark'],
control: { type: 'radio' }
},
disabled: {
description:
'When true, the button is disabled, preventing user interaction and applying a "disabled" style'
},
loading: {
description:
'When true, the button content is replaced with a loading indicator, signaling that an action is in progress'
},
size: {
description:
'Specifies the size of the button, affecting its padding and font size',
options: ['medium', 'small'],
control: { type: 'radio' }
},
to: {
description:
'A URL or path that the link button navigates to when clicked.',
control: { type: 'text' }
}
},
args: {
disabled: false,
loading: false,
size: SizeEnum.Small,
to: '/test-link'
}
}

export default meta
type Story = StoryObj<typeof meta>

export const All: Story = {
render: (args) => (
<div style={{ display: 'flex', gap: '10px' }}>
<LinkButton {...args} variant={LinkButtonVariantEnum.Light}>
Light
</LinkButton>
<LinkButton {...args} variant={LinkButtonVariantEnum.Dark}>
Dark
</LinkButton>
</div>
),
parameters: {
docs: {
description: {
story:
'This story showcases both link button variants in a single row for easy comparison.'
}
}
}
}

export const Light: Story = {
args: {
children: 'Light',
variant: LinkButtonVariantEnum.Light
},
parameters: {
docs: {
description: {
story:
'The "Light" variant is a solid link button with darker background for good contrast in light theme.'
}
}
}
}

export const Dark: Story = {
args: {
children: 'Dark',
variant: LinkButtonVariantEnum.Dark
},
parameters: {
docs: {
description: {
story:
'The "Dark" variant is a darker version of the light button for good contrast in dark theme.'
}
}
}
}
5 changes: 5 additions & 0 deletions src/types/common/enums/common.enums.ts
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,11 @@ export enum ButtonVariantEnum {
Danger = 'danger'
}

export enum LinkButtonVariantEnum {
Light = 'light',
Dark = 'dark'
}

export enum ButtonTypeEnum {
Submit = 'submit',
Button = 'button'
Expand Down
48 changes: 48 additions & 0 deletions tests/unit/design-system/components/LinkButton/LinkButton.spec.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { render, screen } from '@testing-library/react'
import { BrowserRouter as Router } from 'react-router-dom'
import LinkButton from '~scss-components/link-button/LinkButton'
import {
LinkButtonVariantEnum,
SizeEnum
} from '~/types/common/enums/common.enums.ts'

describe('LinkButton Component', () => {
const mockText = 'Link Button'
const mockLink = '/test-link'
const props = {
variant: LinkButtonVariantEnum.Light,
size: SizeEnum.Medium
}

beforeEach(() => {
render(
<Router>
<LinkButton to={mockLink} variant={props.variant} size={props.size}>
{mockText}
</LinkButton>
</Router>
)
})

it('should have correct text', () => {
const linkElement = screen.getByText(mockText)
expect(linkElement).toBeInTheDocument()
})

it('should have correct classes', () => {
const linkElement = screen.getByRole('link')
expect(linkElement).toHaveClass('s2s-link-button')
expect(linkElement).toHaveClass('s2s-link-button__light')
expect(linkElement).toHaveClass('s2s-link-button__medium')
})

it('should have correct link', () => {
const linkElement = screen.getByRole('link')
expect(linkElement).toHaveAttribute('href', mockLink)
})

it('should not have disabled class', () => {
const linkElement = screen.getByRole('link')
expect(linkElement).not.toHaveClass('s2s-link-button__disabled')
})
})