Skip to content

Commit

Permalink
Merge branch 'develop' into dependabot/npm_and_yarn/postcss-8.4.31
Browse files Browse the repository at this point in the history
  • Loading branch information
sahsisunny authored Oct 5, 2023
2 parents 4db306a + d4d22df commit 8e48ef3
Show file tree
Hide file tree
Showing 7 changed files with 81 additions and 16 deletions.
38 changes: 38 additions & 0 deletions __tests__/components/Button.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from 'react';
import { render } from '@testing-library/react';
import { Button } from '@/components/Button';
Button;

describe('Button', () => {
it('should render Button', () => {
const handleOnClickMock = jest.fn();
const { getByRole } = render(
<Button
type="button"
className="w-full md:w-auto bg-gray-200 px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
onClick={handleOnClickMock}
>
Generate
</Button>
);
const buttonElement = getByRole('button');
expect(buttonElement).toHaveAttribute('type', 'button');
expect(buttonElement).toHaveTextContent('Generate');
});

test('should render button with the type submit', () => {
const handleOnClickMock = jest.fn();
const { getByRole } = render(
<Button
type="submit"
className="w-full md:w-auto bg-gray-200 px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
onClick={handleOnClickMock}
>
Log in
</Button>
);

const buttonElement = getByRole('button');
expect(buttonElement).toHaveAttribute('type', 'submit');
});
});
2 changes: 1 addition & 1 deletion public/assets/icons/add.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const AddIcon = () => (
<svg width="30px" height="30px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
<title>Create new</title>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g id="Icon-Set-Filled" transform="translate(-466.000000, -1089.000000)" fill="#000000">
<path
d="M488,1106 L483,1106 L483,1111 C483,1111.55 482.553,1112 482,1112 C481.447,1112 481,1111.55 481,1111 L481,1106 L476,1106 C475.447,1106 475,1105.55 475,1105 C475,1104.45 475.447,1104 476,1104 L481,1104 L481,1099 C481,1098.45 481.447,1098 482,1098 C482.553,1098 483,1098.45 483,1099 L483,1104 L488,1104 C488.553,1104 489,1104.45 489,1105 C489,1105.55 488.553,1106 488,1106 L488,1106 Z M482,1089 C473.163,1089 466,1096.16 466,1105 C466,1113.84 473.163,1121 482,1121 C490.837,1121 498,1113.84 498,1105 C498,1096.16 490.837,1089 482,1089 L482,1089 Z"
Expand Down
6 changes: 3 additions & 3 deletions public/assets/icons/copy.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
const CopyIcon = () => (
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Copy</title>
<g clip-path="url(#a)">
<g clipPath="url(#a)">
<path
fill-rule="evenodd"
clip-rule="evenodd"
fillRule="evenodd"
clipRule="evenodd"
d="M8 5h7.795c1.115 0 1.519.116 1.926.334.407.218.727.538.945.945.218.407.334.811.334 1.926V16a1 1 0 1 0 2 0V8.128c0-1.783-.186-2.43-.534-3.082a3.635 3.635 0 0 0-1.512-1.512C18.302 3.186 17.655 3 15.872 3H8a1 1 0 0 0 0 2zm7.721 2.334C15.314 7.116 14.91 7 13.795 7h-7.59c-1.115 0-1.519.116-1.926.334a2.272 2.272 0 0 0-.945.945C3.116 8.686 3 9.09 3 10.205v7.59c0 1.114.116 1.519.334 1.926.218.407.538.727.945.945.407.218.811.334 1.926.334h7.59c1.114 0 1.519-.116 1.926-.334.407-.218.727-.538.945-.945.218-.407.334-.811.334-1.926v-7.59c0-1.115-.116-1.519-.334-1.926a2.272 2.272 0 0 0-.945-.945z"
fill="#000000"
/>
Expand Down
24 changes: 24 additions & 0 deletions src/components/Button/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React from 'react';

interface ButtonProps {
type?: 'button' | 'submit' | 'reset';
className: string;
onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
children: React.ReactNode;
disabled?: boolean;
}

const Button: React.FC<ButtonProps> = ({ type, className, onClick, children, disabled }) => {
return (
<button type={type} className={className} onClick={onClick} disabled={disabled}>
{children}
</button>
);
};

Button.defaultProps = {
type: 'button',
className: 'w-full bg-gray-200 hover:bg-gray-300 ',
};

export { Button };
2 changes: 1 addition & 1 deletion src/components/Navbar/Navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const Navbar: React.FC = () => {
URL Shortener
</a>

<ul className={'lg:flex space-x-4 '}>
<ul className={'lg:flex space-x-4'}>
<li className="relative group">
<button onClick={toggleDropdown} className="text-white focus:outline-none">
<div className="flex items-center space-x-2">
Expand Down
18 changes: 10 additions & 8 deletions src/pages/dashboard/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useState } from 'react';
import CopyIcon from '../../../public/assets/icons/copy';
import AddIcon from '../../../public/assets/icons/add';
import ReloadIcon from '../../../public/assets/icons/reload';
import { Button } from '@/components/Button/index';

const Dashboard = () => {
const [url, getUrl] = useState('');
Expand All @@ -25,15 +26,16 @@ const Dashboard = () => {
getUrl(e.target.value);
}}
/>
<button

<Button
className="w-full md:w-auto bg-gray-200 md:rounded-r-2xl px-4 md:px-8 py-4 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
onClick={() => {
const randomString = generateRandomString();
setUrl(`https://rds.li/${randomString}`);
}}
>
Generate
</button>
</Button>
</div>
<div className="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-1 m-4 w-[98%]">
<input
Expand All @@ -44,31 +46,31 @@ const Dashboard = () => {
value={shortUrl}
/>
<div className="flex flex-row justify-center items-center space-x-1">
<button
<Button
className="w-full md:w-auto bg-gray-200 px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
onClick={() => {
const randomString = generateRandomString();
setUrl(`https://rds.li/${randomString}`);
}}
>
<ReloadIcon />
</button>
<button
</Button>
<Button
className="w-full md:w-auto bg-gray-200 px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
onClick={() => {
setUrl('');
}}
>
<AddIcon />
</button>
<button
</Button>
<Button
className="w-full md:w-auto bg-gray-200 md:rounded-r-2xl px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
onClick={() => {
navigator.clipboard.writeText(shortUrl);
}}
>
<CopyIcon />
</button>
</Button>
</div>
</div>
</div>
Expand Down
7 changes: 4 additions & 3 deletions src/pages/login/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { useState } from 'react';
import { Button } from '@/components/Button/index';

const LoginPage = () => {
const [isValid, setIsValid] = useState(null);
Expand Down Expand Up @@ -80,12 +81,12 @@ const LoginPage = () => {
Forgot password?
</a>
</div>
<button
<Button
type="submit"
className="w-full bg-gray-200 hover:bg-gray-300 text-dark focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center "
className="w-full bg-gray-200 hover:bg-gray-300 text-dark focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
>
Log in
</button>
</Button>
<p className="text-sm font-light text-gray-500 dark:text-gray-400">
Don’t have an account yet?{' '}
<a href="#" className="font-medium text-primary-600 hover:underline dark:text-primary-500">
Expand Down

0 comments on commit 8e48ef3

Please sign in to comment.