-
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.
* icon component * tests * remove ionicons package
- Loading branch information
Showing
24 changed files
with
276 additions
and
86 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,7 +5,7 @@ | |
align-items: center; | ||
|
||
.icon { | ||
font-size: 1.5rem; | ||
font-size: 1.25rem; | ||
margin-right: 0.5rem; | ||
} | ||
} | ||
|
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 |
---|---|---|
|
@@ -11,4 +11,13 @@ | |
.title { | ||
font-size: 2rem; | ||
} | ||
|
||
ion-buttons { | ||
ion-button { | ||
height: 3rem; | ||
width: 3rem; | ||
|
||
margin: 0; | ||
} | ||
} | ||
} |
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 |
---|---|---|
|
@@ -16,4 +16,13 @@ | |
font-size: 1rem; | ||
} | ||
} | ||
|
||
ion-buttons[slot='end'] { | ||
ion-button { | ||
height: 3rem; | ||
width: 3rem; | ||
|
||
margin: 0; | ||
} | ||
} | ||
} |
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,94 @@ | ||
import { ComponentPropsWithoutRef } from 'react'; | ||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; | ||
import { IconProp } from '@fortawesome/fontawesome-svg-core'; | ||
import { | ||
faBuilding, | ||
faCircleInfo, | ||
faEnvelope, | ||
faHouse, | ||
faLink, | ||
faMapLocationDot, | ||
faPenToSquare, | ||
faPhone, | ||
faSignOutAlt, | ||
faTrash, | ||
faTriangleExclamation, | ||
faUser, | ||
faUserGear, | ||
faUsers, | ||
} from '@fortawesome/free-solid-svg-icons'; | ||
import classNames from 'classnames'; | ||
|
||
import { BaseComponentProps } from '../types'; | ||
|
||
/** | ||
* Properties for the `Icon` component. | ||
* @see {@link BaseComponentProps} | ||
* @see {@link FontAwesomeIcon} | ||
*/ | ||
export interface IconProps | ||
extends BaseComponentProps, | ||
Omit<ComponentPropsWithoutRef<typeof FontAwesomeIcon>, 'icon'> { | ||
icon: IconName; | ||
} | ||
|
||
/** | ||
* Icon names. | ||
*/ | ||
export enum IconName { | ||
Building = 'building', | ||
CircleInfo = 'circle_info', | ||
Envelope = 'envelope', | ||
House = 'house', | ||
Link = 'link', | ||
MapLocationDot = 'map_location_dot', | ||
PenToSquare = 'pen_to_square', | ||
Phone = 'phone', | ||
SignOut = 'sign_out', | ||
Trash = 'trash', | ||
TriangleExclamation = 'triangle_exclamation', | ||
User = 'user', | ||
Users = 'users', | ||
UserGear = 'user_gear', | ||
} | ||
|
||
/** | ||
* A key/value mapping of every icon used in the application. | ||
*/ | ||
const icons: Record<IconName, IconProp> = { | ||
building: faBuilding, | ||
circle_info: faCircleInfo, | ||
envelope: faEnvelope, | ||
house: faHouse, | ||
link: faLink, | ||
map_location_dot: faMapLocationDot, | ||
pen_to_square: faPenToSquare, | ||
phone: faPhone, | ||
sign_out: faSignOutAlt, | ||
trash: faTrash, | ||
triangle_exclamation: faTriangleExclamation, | ||
user_gear: faUserGear, | ||
user: faUser, | ||
users: faUsers, | ||
}; | ||
|
||
/** | ||
* The `Icon` component renders an icon. Wraps the `FontAwesomeIcon` component. | ||
* | ||
* @param {IconProps} props - Component properties. | ||
* @returns {JSX.Element} JSX | ||
* @see {@link FontAwesomeIcon} | ||
*/ | ||
const Icon = ({ className, icon, testid = 'icon', ...iconProps }: IconProps): JSX.Element => { | ||
const faIcon = icons[icon]; | ||
return ( | ||
<FontAwesomeIcon | ||
className={classNames('icon', className)} | ||
icon={faIcon} | ||
{...iconProps} | ||
data-testid={testid} | ||
/> | ||
); | ||
}; | ||
|
||
export default Icon; |
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,16 @@ | ||
import { describe, expect, it } from 'vitest'; | ||
|
||
import { render, screen } from 'test/test-utils'; | ||
|
||
import Icon, { IconName } from '../Icon'; | ||
|
||
describe('Icon', () => { | ||
it('should render successfully', async () => { | ||
// ARRANGE | ||
render(<Icon icon={IconName.Building} />); | ||
await screen.findByTestId('icon'); | ||
|
||
// ASSERT | ||
expect(screen.getByTestId('icon')).toBeDefined(); | ||
}); | ||
}); |
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 |
---|---|---|
|
@@ -28,5 +28,7 @@ | |
|
||
.icon { | ||
margin-right: 1rem; | ||
|
||
opacity: 0.5; | ||
} | ||
} |
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,8 @@ | ||
.tab-navigation { | ||
ion-tab-button { | ||
.icon { | ||
margin-top: 0.375rem; | ||
margin-bottom: 0.125rem; | ||
} | ||
} | ||
} |
Oops, something went wrong.