react-icons/fa#FaCog TypeScript Examples
The following examples show how to use
react-icons/fa#FaCog.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Button.test.tsx From convoychat with GNU General Public License v3.0 | 6 votes |
|
describe("Button", () => {
it("should renders <Button>", () => {
const { getByText } = renderWithStyledTheme(<Button>Hello world</Button>);
expect(getByText("Hello world")).toBeInTheDocument();
});
it("should renders <Button> with icon", () => {
const { getByText, getByTestId } = renderWithStyledTheme(
<Button icon={FaCog}>Hello world</Button>
);
expect(getByText("Hello world")).toBeInTheDocument();
expect(getByTestId("icon")).toHaveAttribute(
"class",
expect.stringContaining("button__icon")
);
});
it("should renders <Button> with loading spinner", () => {
const { getByTestId } = renderWithStyledTheme(
<Button icon={FaCog} isLoading>
Hello world
</Button>
);
expect(getByTestId("icon")).toHaveAttribute(
"class",
expect.stringContaining("spin")
);
});
});
Example #2
| Source File: Input.test.tsx From convoychat with GNU General Public License v3.0 | 5 votes |
|
describe("<Input />", () => {
it("should renders <Input>", () => {
const { getByText, getByLabelText } = renderWithStyledTheme(
<Input name="test" label="This is a label" defaultValue="hello world" />
);
expect(getByLabelText(/test/i)).toBeInTheDocument();
expect(getByLabelText(/test/i)).toHaveValue("hello world");
expect(getByText(/This is a label/i)).toBeInTheDocument();
});
it("should have icons", () => {
const onPostfixIconClick = jest.fn();
const { getByLabelText, getByTestId } = renderWithStyledTheme(
<Input
icon={FaCog}
postfixIcon={FaAnchor}
onPostfixIconClick={onPostfixIconClick}
name="test"
label="name"
defaultValue="hello world"
/>
);
expect(getByLabelText(/test/i)).toBeInTheDocument();
expect(getByTestId("input-icon")).toBeInTheDocument();
expect(getByTestId("input-postfix-icon")).toBeInTheDocument();
fireEvent.click(getByTestId("input-postfix-icon"));
expect(onPostfixIconClick).toHaveBeenCalledWith(getByLabelText(/test/i));
});
it("should have errors", () => {
const { getByLabelText, getByTestId } = renderWithStyledTheme(
<Input
errors={{ test: { type: "", message: "Invalid", isManual: true } }}
name="test"
label="name"
defaultValue="hello world"
/>
);
expect(getByLabelText(/test/i)).toBeInTheDocument();
expect(getByTestId("input-error")).toBeInTheDocument();
expect(getByTestId("input-error")).toHaveTextContent("Invalid");
});
});
Example #3
| Source File: GuestDropdown.tsx From hub with Apache License 2.0 | 5 votes |
|
GuestDropdown = () => {
const [openStatus, setOpenStatus] = useState(false);
const ref = useRef(null);
useOutsideClick([ref], openStatus, () => setOpenStatus(false));
return (
<div className="btn-group">
<button
className={`btn p-0 position-relative ${styles.btn}`}
type="button"
onClick={() => setOpenStatus(true)}
aria-label="Guest dropdown button"
aria-expanded={openStatus}
>
<div className="d-flex flex-row align-items-center justify-content-center">
<div
className={classnames(
'rounded-circle d-flex align-items-center justify-content-center textLight border border-2 overflow-hidden lh-1 fs-5',
styles.imageWrapper,
styles.iconWrapper
)}
>
<FaCog data-testid="settingsIcon" className="rounded-circle" />
</div>
<small className="ms-1 textLight">
<FaCaretDown />
</small>
</div>
</button>
<div
role="menu"
ref={ref}
className={classnames('dropdown-menu dropdown-menu-end', styles.dropdown, { show: openStatus })}
>
<div className={`dropdown-arrow ${styles.arrow}`} />
<div className="my-3">
<ThemeMode device="desktop" onSelection={() => setOpenStatus(false)} />
</div>
</div>
</div>
);
}
Example #4
| Source File: MobileSettings.tsx From hub with Apache License 2.0 | 4 votes |
|
MobileSettings = (props: Props) => {
const { ctx } = useContext(AppCtx);
const [openSideBarStatus, setOpenSideBarStatus] = useState(false);
const getSidebarIcon = (): JSX.Element => {
if (ctx.user) {
if (ctx.user.profileImageId) {
return (
<Image
imageId={ctx.user.profileImageId}
alt="User profile"
className={`rounded-circle mw-100 mh-100 h-auto border border-2 ${styles.profileImage}`}
placeholderIcon={<FaUserCircle />}
/>
);
} else {
return <FaUserCircle />;
}
} else {
return <GoThreeBars />;
}
};
return (
<div className={`btn-group navbar-toggler pe-0 ms-auto border-0 fs-6 bg-transparent ${styles.navbarToggler}`}>
{isUndefined(ctx.user) ? (
<div className="spinner-grow spinner-grow-sm textLight pt-2" role="status">
<span className="visually-hidden">Loading...</span>
</div>
) : (
<Sidebar
label="User settings"
className="d-inline-block d-lg-none"
buttonType="position-relative btn text-secondary pe-0 ps-3"
buttonIcon={
<div
className={classnames(
'rounded-circle d-flex align-items-center justify-content-center lh-1 fs-3 bg-white',
styles.iconWrapper
)}
>
{getSidebarIcon()}
</div>
}
direction="right"
header={
<>
{!isNull(ctx.user) && (
<div className="h6 mb-0 text-dark flex-grow-1">
Signed in as <span className="fw-bold">{ctx.user.alias}</span>
</div>
)}
</>
}
open={openSideBarStatus}
onOpenStatusChange={(status: boolean) => setOpenSideBarStatus(status)}
>
<>
{!isUndefined(ctx.user) && (
<>
{!isNull(ctx.user) ? (
<>
<ThemeMode device="mobile" onSelection={() => setOpenSideBarStatus(false)} />
<div className="dropdown-divider my-3" />
<Link
className="dropdown-item my-2"
onClick={() => {
setOpenSideBarStatus(false);
}}
to={{
pathname: '/stats',
}}
>
<div className="d-flex align-items-center">
<HiChartSquareBar className="me-2" />
<div>Stats</div>
</div>
</Link>
<Link
className="dropdown-item my-2"
to={{
pathname: '/packages/starred',
}}
onClick={() => setOpenSideBarStatus(false)}
>
<div className="d-flex align-items-center">
<FaStar className="me-2" />
<div>Starred packages</div>
</div>
</Link>
<Link
className="dropdown-item my-2"
to={{
pathname: '/control-panel',
}}
onClick={() => setOpenSideBarStatus(false)}
>
<div className="d-flex align-items-center">
<FaCog className="me-2" />
<div>Control Panel</div>
</div>
</Link>
<LogOut
className="my-2"
onSuccess={() => setOpenSideBarStatus(false)}
privateRoute={props.privateRoute}
/>
</>
) : (
<>
<ThemeMode device="mobile" onSelection={() => setOpenSideBarStatus(false)} />
<div className="dropdown-divider my-3" />
<Link
className="dropdown-item my-2"
onClick={() => {
setOpenSideBarStatus(false);
}}
to={{
pathname: '/stats',
}}
>
<div className="d-flex align-items-center">
<HiChartSquareBar className="me-2" />
<div>Stats</div>
</div>
</Link>
<button
className="dropdown-item my-2"
onClick={() => {
setOpenSideBarStatus(false);
props.setOpenLogIn(true);
}}
aria-label="Open sign in modal"
>
<div className="d-flex align-items-center">
<FaSignInAlt className="me-2" />
<div>Sign in</div>
</div>
</button>
<button
className="dropdown-item my-2"
onClick={() => {
setOpenSideBarStatus(false);
props.setOpenSignUp(true);
}}
aria-label="Open sign up modal"
>
<div className="d-flex align-items-center">
<FaEdit className="me-2" />
<div>Sign up</div>
</div>
</button>
</>
)}
</>
)}
</>
</Sidebar>
)}
</div>
);
}
Example #5
| Source File: UserAuthDropdown.tsx From hub with Apache License 2.0 | 4 votes |
|
UserAuthDropdown = (props: Props) => {
const { ctx } = useContext(AppCtx);
const [openStatus, setOpenStatus] = useState(false);
const ref = useRef(null);
useOutsideClick([ref], openStatus, () => setOpenStatus(false));
return (
<div className="btn-group">
<button
className={`btn p-0 position-relative ${styles.btn}`}
type="button"
onClick={() => setOpenStatus(true)}
aria-label="Open menu"
>
<div className="d-flex flex-row align-items-center justify-content-center">
<div
className={classnames(
'rounded-circle d-flex align-items-center justify-content-center textLight userAuth overflow-hidden position-relative border border-2 overflow-hidden lh-1 fs-5 bg-white',
styles.imageWrapper,
{ [styles.iconWrapper]: isUndefined(ctx.user!.profileImageId) || isNull(ctx.user!.profileImageId) }
)}
>
{ctx.user && ctx.user.profileImageId ? (
<Image
imageId={ctx.user.profileImageId}
alt="User profile"
className="mw-100 h-auto"
classNameForSquare={`position-absolute top-0 start-0 w-100 h-100 ${styles.imageAsBg}`}
/>
) : (
<FaUser data-testid="profileIcon" className="rounded-circle" />
)}
</div>
<small className="ms-1 textLight">
<FaCaretDown />
</small>
</div>
</button>
<div ref={ref} className={classnames('dropdown-menu dropdown-menu-end', styles.dropdown, { show: openStatus })}>
<div className={`dropdown-arrow ${styles.arrow}`} />
<p className={`mt-2 mb-0 text-break ${styles.signedInText}`}>
Signed in as <span className="fw-bold">{ctx.user!.alias}</span>
</p>
<div className="dropdown-divider my-3" />
<ThemeMode device="desktop" onSelection={() => setOpenStatus(false)} />
<div className="dropdown-divider my-3" />
<Link
className="dropdown-item"
to={{
pathname: '/packages/starred',
}}
onClick={() => setOpenStatus(false)}
>
<div className="d-flex align-items-center">
<FaStar className="me-2" />
<div>Starred packages</div>
</div>
</Link>
<Link
className="dropdown-item"
to={{
pathname: '/control-panel',
}}
onClick={() => setOpenStatus(false)}
>
<div className="d-flex align-items-center">
<FaCog className="me-2" />
<div>Control Panel</div>
</div>
</Link>
<LogOut className="mb-2" onSuccess={() => setOpenStatus(false)} privateRoute={props.privateRoute} />
</div>
</div>
);
}
