mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-17 16:44:49 -04:00
fix: Move content into to frontend directory
Doing this BEFORE the merge prevents a lot of merge conflicts. Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth
parent
4e18ce38f3
commit
762a0a850e
1051 changed files with 0 additions and 35 deletions
|
|
@ -0,0 +1,116 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`IconButton correctly uses the onClick callback 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="btn-icon p-0 d-inline-flex align-items-stretch btn btn-primary"
|
||||
data-testid="icon-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="icon-part d-flex align-items-center"
|
||||
>
|
||||
<i
|
||||
class="fa fa-heart icon "
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="text-part d-flex align-items-center"
|
||||
>
|
||||
test with onClick
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`IconButton renders heart icon 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="btn-icon p-0 d-inline-flex align-items-stretch btn btn-primary"
|
||||
data-testid="icon-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="icon-part d-flex align-items-center"
|
||||
>
|
||||
<i
|
||||
class="fa fa-heart icon "
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="text-part d-flex align-items-center"
|
||||
>
|
||||
test
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`IconButton renders with additional className 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="btn-icon p-0 d-inline-flex align-items-stretch testClass btn btn-primary"
|
||||
data-testid="icon-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="icon-part d-flex align-items-center"
|
||||
>
|
||||
<i
|
||||
class="fa fa-heart icon "
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="text-part d-flex align-items-center"
|
||||
>
|
||||
test with additional className
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`IconButton renders with border 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="btn-icon p-0 d-inline-flex align-items-stretch with-border btn btn-primary"
|
||||
data-testid="icon-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="icon-part d-flex align-items-center"
|
||||
>
|
||||
<i
|
||||
class="fa fa-heart icon "
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="text-part d-flex align-items-center"
|
||||
>
|
||||
test with border
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`IconButton renders with fixed width icon 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="btn-icon p-0 d-inline-flex align-items-stretch btn btn-primary"
|
||||
data-testid="icon-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="icon-part d-flex align-items-center"
|
||||
>
|
||||
<i
|
||||
class="fa fa-fw fa-heart icon "
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="text-part d-flex align-items-center"
|
||||
>
|
||||
test with fixed with icon
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`TranslatedIconButton renders heart icon with i18nKey 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="btn-icon p-0 d-inline-flex align-items-stretch btn btn-primary"
|
||||
data-testid="icon-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="icon-part d-flex align-items-center"
|
||||
>
|
||||
<i
|
||||
class="fa fa-heart icon "
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="text-part d-flex align-items-center"
|
||||
>
|
||||
testi18nKey
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
/*
|
||||
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
.btn-icon {
|
||||
|
||||
&.with-border {
|
||||
.icon-part {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.text-part {
|
||||
padding: 0.375rem 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-part {
|
||||
padding: 0.375rem 0.375rem;
|
||||
display: flex;
|
||||
|
||||
.social-icon {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.text-part {
|
||||
padding: 0.375rem 0.75rem 0.375rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
/*
|
||||
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import type { IconName } from '../fork-awesome/types'
|
||||
import { IconButton } from './icon-button'
|
||||
import { fireEvent, render, screen } from '@testing-library/react'
|
||||
|
||||
describe('IconButton', () => {
|
||||
const icon: IconName = 'heart'
|
||||
it('renders heart icon', () => {
|
||||
const view = render(<IconButton icon={icon}>test</IconButton>)
|
||||
expect(view.container).toMatchSnapshot()
|
||||
})
|
||||
it('renders with border', () => {
|
||||
const view = render(
|
||||
<IconButton icon={icon} border={true}>
|
||||
test with border
|
||||
</IconButton>
|
||||
)
|
||||
expect(view.container).toMatchSnapshot()
|
||||
})
|
||||
it('renders with fixed width icon', () => {
|
||||
const view = render(
|
||||
<IconButton icon={icon} iconFixedWidth={true}>
|
||||
test with fixed with icon
|
||||
</IconButton>
|
||||
)
|
||||
expect(view.container).toMatchSnapshot()
|
||||
})
|
||||
it('renders with additional className', () => {
|
||||
const view = render(
|
||||
<IconButton icon={icon} className={'testClass'}>
|
||||
test with additional className
|
||||
</IconButton>
|
||||
)
|
||||
expect(view.container).toMatchSnapshot()
|
||||
})
|
||||
it('correctly uses the onClick callback', async () => {
|
||||
const onClick = jest.fn()
|
||||
const view = render(
|
||||
<IconButton icon={icon} onClick={onClick}>
|
||||
test with onClick
|
||||
</IconButton>
|
||||
)
|
||||
expect(view.container).toMatchSnapshot()
|
||||
const iconButton = await screen.findByTestId('icon-button')
|
||||
fireEvent(
|
||||
iconButton,
|
||||
new MouseEvent('click', {
|
||||
bubbles: true,
|
||||
cancelable: true
|
||||
})
|
||||
)
|
||||
expect(onClick).toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
57
frontend/src/components/common/icon-button/icon-button.tsx
Normal file
57
frontend/src/components/common/icon-button/icon-button.tsx
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
/*
|
||||
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import React from 'react'
|
||||
import type { ButtonProps } from 'react-bootstrap'
|
||||
import { Button } from 'react-bootstrap'
|
||||
import { ForkAwesomeIcon } from '../fork-awesome/fork-awesome-icon'
|
||||
import type { IconName } from '../fork-awesome/types'
|
||||
import { ShowIf } from '../show-if/show-if'
|
||||
import styles from './icon-button.module.scss'
|
||||
import type { PropsWithDataTestId } from '../../../utils/test-id'
|
||||
import { testId } from '../../../utils/test-id'
|
||||
|
||||
export interface IconButtonProps extends ButtonProps, PropsWithDataTestId {
|
||||
icon: IconName
|
||||
onClick?: () => void
|
||||
border?: boolean
|
||||
iconFixedWidth?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* A generic {@link Button button} with an {@link ForkAwesomeIcon icon} in it.
|
||||
*
|
||||
* @param icon Which icon should be used
|
||||
* @param children The children that will be added as the content of the button.
|
||||
* @param iconFixedWidth If the icon should be of fixed width.
|
||||
* @param border Should the button have a border.
|
||||
* @param className Additional class names added to the button.
|
||||
* @param props Additional props for the button.
|
||||
*/
|
||||
export const IconButton: React.FC<IconButtonProps> = ({
|
||||
icon,
|
||||
children,
|
||||
iconFixedWidth = false,
|
||||
border = false,
|
||||
className,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<Button
|
||||
{...props}
|
||||
className={`${styles['btn-icon']} p-0 d-inline-flex align-items-stretch ${border ? styles['with-border'] : ''} ${
|
||||
className ?? ''
|
||||
}`}
|
||||
{...testId('icon-button')}>
|
||||
<span className={`${styles['icon-part']} d-flex align-items-center`}>
|
||||
<ForkAwesomeIcon icon={icon} fixedWidth={iconFixedWidth} className={'icon'} />
|
||||
</span>
|
||||
<ShowIf condition={!!children}>
|
||||
<span className={`${styles['text-part']} d-flex align-items-center`}>{children}</span>
|
||||
</ShowIf>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
/*
|
||||
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import { mockI18n } from '../../markdown-renderer/test-utils/mock-i18n'
|
||||
import { render } from '@testing-library/react'
|
||||
import { TranslatedIconButton } from './translated-icon-button'
|
||||
|
||||
describe('TranslatedIconButton', () => {
|
||||
it('renders heart icon with i18nKey', async () => {
|
||||
await mockI18n()
|
||||
const view = render(<TranslatedIconButton i18nKey={'testi18nKey'} icon={'heart'} />)
|
||||
expect(view.container).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
/*
|
||||
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import React from 'react'
|
||||
import { Trans } from 'react-i18next'
|
||||
import type { IconButtonProps } from './icon-button'
|
||||
import { IconButton } from './icon-button'
|
||||
|
||||
export interface TranslatedIconButtonProps extends IconButtonProps {
|
||||
i18nKey: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders an {@link IconButton icon button} with a translation inside.
|
||||
*
|
||||
* @param i18nKey The key for the translated string.
|
||||
* @param props Additional props directly given to the {@link IconButton}.
|
||||
*/
|
||||
export const TranslatedIconButton: React.FC<TranslatedIconButtonProps> = ({ i18nKey, ...props }) => {
|
||||
return (
|
||||
<IconButton {...props}>
|
||||
<Trans i18nKey={i18nKey} />
|
||||
</IconButton>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue