-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #7 from internxt/feat/switch-and-radio-button-comp…
…onents [_]: feat/switch and radio button components
- Loading branch information
Showing
18 changed files
with
796 additions
and
83 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| name: Components Testing | ||
|
|
||
| on: | ||
| pull_request: | ||
| types: | ||
| - opened | ||
| - synchronize | ||
|
|
||
| jobs: | ||
| build: | ||
| runs-on: ubuntu-latest | ||
| strategy: | ||
| matrix: | ||
| node-version: [18.x] | ||
| steps: | ||
| - name: Checkout | ||
| uses: actions/checkout@v4 | ||
| - name: Use Node.js ${{ matrix.node-version }} | ||
| uses: actions/setup-node@v1 | ||
| with: | ||
| node-version: ${{ matrix.node-version }} | ||
|
|
||
| - run: echo "registry=https://registry.yarnpkg.com/" > .npmrc | ||
| - run: echo "@internxt:registry=https://npm.pkg.github.com" >> .npmrc | ||
| # You cannot read packages from other private repos with GITHUB_TOKEN | ||
| # You have to use a PAT instead https://github.com/actions/setup-node/issues/49 | ||
| - run: echo //npm.pkg.github.com/:_authToken=${{ secrets.PERSONAL_ACCESS_TOKEN }} >> .npmrc | ||
| - run: echo "always-auth=true" >> .npmrc | ||
|
|
||
| - name: Install dependencies | ||
| run: yarn | ||
|
|
||
| - name: Build the project | ||
| run: yarn build | ||
|
|
||
| - name: Run Tests | ||
| run: yarn test |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,3 @@ | ||
| export * from './button'; | ||
| export * from './button/Button'; | ||
| export * from './switch/Switch'; | ||
| export * from './radio-button/RadioButton'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| interface RadioButtonProps { | ||
| checked: boolean; | ||
| disabled?: boolean; | ||
| onClick: () => void; | ||
| } | ||
|
|
||
| export const RadioButton = ({ checked, disabled = false, onClick }: RadioButtonProps) => { | ||
| const borderStyle = disabled ? 'border-gray-10' : 'border-gray-40'; | ||
| const checkedStyle = | ||
| disabled && checked ? 'border-0 bg-gray-20' : checked && 'border-0 bg-primary active:bg-primary-dark'; | ||
|
|
||
| return ( | ||
| <div className="flex cursor-pointer"> | ||
| <button | ||
| disabled={disabled} | ||
| onClick={onClick} | ||
| className={`flex h-5 w-5 items-center justify-center rounded-full border ${checkedStyle} ${borderStyle}`} | ||
| > | ||
| {<div className={`h-2.5 w-2.5 rounded-full ${checked || disabled ? 'bg-white' : 'hover:bg-gray-10'}`}></div>} | ||
| </button> | ||
| <input type="radio" className="h-0 w-0 appearance-none opacity-0" checked /> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import React from 'react'; | ||
| import { describe, expect, it, vi } from 'vitest'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import { RadioButton } from '../RadioButton'; | ||
| import renderer from 'react-test-renderer'; | ||
|
|
||
| describe('Radio Button component', () => { | ||
| it('Radio button onClick should work correctly', () => { | ||
| let checked = false; | ||
| const buttonClick = vi.fn(() => (checked = true)); | ||
| render(<RadioButton checked={checked} onClick={buttonClick} />); | ||
| const radioButton = screen.getByRole('button'); | ||
| radioButton.click(); | ||
| expect(buttonClick).toHaveBeenCalledOnce(); | ||
| }); | ||
|
|
||
| it('Radio Button component should render correctly', () => { | ||
| const radioButton = renderer.create(<RadioButton checked={false} onClick={() => undefined} />).toJSON(); | ||
| expect(radioButton).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('Checked Radio Button component should render correctly', () => { | ||
| const radioButton = renderer.create(<RadioButton checked onClick={() => undefined} />).toJSON(); | ||
| expect(radioButton).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('Disabled Radio Button component should render correctly', () => { | ||
| const radioButton = renderer.create(<RadioButton disabled checked={false} onClick={() => undefined} />).toJSON(); | ||
| expect(radioButton).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('Disabled and Checked Radio Button component should render correctly', () => { | ||
| const radioButton = renderer.create(<RadioButton disabled checked={false} onClick={() => undefined} />).toJSON(); | ||
| expect(radioButton).toMatchSnapshot(); | ||
| }); | ||
| }); |
Oops, something went wrong.