-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
323 additions
and
0 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,48 @@ | ||
```javascript import | ||
import { Uploader, UploaderVariant } from '@lumx/react'; | ||
import { mdiImagePlus } from '@lumx/icons'; | ||
``` | ||
|
||
# Uploader | ||
|
||
## Default | ||
|
||
```javascript jsx withThemeSwitcher | ||
(theme) => ( | ||
<Uploader | ||
icon={mdiImagePlus} | ||
label="Add profile picture" | ||
theme={theme} | ||
/> | ||
); | ||
``` | ||
|
||
## Rounded | ||
|
||
```javascript jsx withThemeSwitcher | ||
(theme) => ( | ||
<Uploader | ||
icon={mdiImagePlus} | ||
label="Add profile picture" | ||
theme={theme} | ||
variant={UploaderVariant.rounded} | ||
/> | ||
); | ||
``` | ||
|
||
## Circle | ||
|
||
```javascript jsx withThemeSwitcher | ||
(theme) => ( | ||
<Uploader | ||
icon={mdiImagePlus} | ||
label="Add profile picture" | ||
theme={theme} | ||
variant={UploaderVariant.circle} | ||
/> | ||
); | ||
``` | ||
|
||
### Properties | ||
|
||
<PropTable component="Uploader" /> |
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 |
---|---|---|
|
@@ -76,6 +76,7 @@ const ITEMS: Item[] = [ | |
'Thumbnail', | ||
'Toolbar', | ||
'Tooltip', | ||
'Uploader', | ||
'User block', | ||
], | ||
}, | ||
|
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,120 @@ | ||
import React, { ReactElement } from 'react'; | ||
|
||
import { mount, shallow } from 'enzyme'; | ||
|
||
import { ICommonSetup, Wrapper, commonTestsSuite } from 'LumX/core/testing/utils.test'; | ||
import { getBasicClass } from 'LumX/core/utils'; | ||
|
||
import { CLASSNAME, DEFAULT_PROPS, Uploader, UploaderProps } from './Uploader'; | ||
|
||
///////////////////////////// | ||
|
||
/** | ||
* Define the overriding properties waited by the `setup` function. | ||
*/ | ||
type ISetupProps = Partial<UploaderProps>; | ||
|
||
/** | ||
* Defines what the `setup` function will return. | ||
*/ | ||
interface ISetup extends ICommonSetup { | ||
props: ISetupProps; | ||
|
||
/** | ||
* [Enter the description of this wrapper]. | ||
* [You should also probably change the name of the wrapper to something more meaningful]. | ||
*/ | ||
wrapper: Wrapper; | ||
} | ||
|
||
///////////////////////////// | ||
|
||
/** | ||
* Mounts the component and returns common DOM elements / data needed in multiple tests further down. | ||
* | ||
* @param props The props to use to override the default props of the component. | ||
* @param [shallowRendering=true] Indicates if we want to do a shallow or a full rendering. | ||
* @return An object with the props, the component wrapper and some shortcut to some element inside of the component. | ||
*/ | ||
const setup = (props: ISetupProps = {}, shallowRendering: boolean = true): ISetup => { | ||
const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount; | ||
|
||
// @ts-ignore | ||
const wrapper: Wrapper = renderer(<Uploader {...props} />); | ||
|
||
return { | ||
props, | ||
wrapper, | ||
}; | ||
}; | ||
|
||
describe(`<${Uploader.displayName}>`, (): void => { | ||
// 1. Test render via snapshot (default states of component). | ||
describe('Snapshots and structure', (): void => { | ||
// Here is an example of a basic rendering check, with snapshot. | ||
|
||
it('should render correctly', (): void => { | ||
const { wrapper } = setup(); | ||
expect(wrapper).toMatchSnapshot(); | ||
|
||
expect(wrapper).toExist(); | ||
expect(wrapper).toHaveClassName(CLASSNAME); | ||
}); | ||
}); | ||
|
||
///////////////////////////// | ||
|
||
// 2. Test defaultProps value and important props custom values. | ||
describe('Props', (): void => { | ||
// Here are some examples of basic props check. | ||
|
||
it('should use default props', (): void => { | ||
const { wrapper } = setup(); | ||
|
||
Object.keys(DEFAULT_PROPS).forEach((prop: string): void => { | ||
expect(wrapper).toHaveClassName( | ||
getBasicClass({ prefix: CLASSNAME, type: prop, value: DEFAULT_PROPS[prop] }), | ||
); | ||
}); | ||
}); | ||
}); | ||
|
||
///////////////////////////// | ||
|
||
// 3. Test events. | ||
describe('Events', (): void => { | ||
// Here is an example how to check a `onClick` event. | ||
|
||
const onClick: jest.Mock = jest.fn(); | ||
|
||
beforeEach((): void => { | ||
onClick.mockClear(); | ||
}); | ||
|
||
it('should trigger `onClick` when clicked', (): void => { | ||
const { wrapper } = setup({ onClick }, false); | ||
|
||
wrapper.simulate('click'); | ||
|
||
expect(onClick).toHaveBeenCalled(); | ||
}); | ||
}); | ||
///////////////////////////// | ||
|
||
// 4. Test conditions (i.e. things that display or not in the UI based on props). | ||
describe('Conditions', (): void => { | ||
// Nothing to do here. | ||
}); | ||
|
||
///////////////////////////// | ||
|
||
// 5. Test state. | ||
describe('State', (): void => { | ||
// Nothing to do here. | ||
}); | ||
|
||
///////////////////////////// | ||
|
||
// Common tests suite. | ||
commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME }); | ||
}); |
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,137 @@ | ||
import React, { MouseEventHandler, ReactElement } from 'react'; | ||
|
||
import classNames from 'classnames'; | ||
|
||
import { AspectRatio, Icon, Size, Theme } from 'LumX'; | ||
import { COMPONENT_PREFIX } from 'LumX/core/react/constants'; | ||
import { handleBasicClasses } from 'LumX/core/utils'; | ||
import { IGenericProps, getRootClassName } from 'LumX/react/utils'; | ||
|
||
///////////////////////////// | ||
|
||
enum UploaderVariant { | ||
square = 'square', | ||
rounded = 'rounded', | ||
circle = 'circle', | ||
} | ||
|
||
type UploaderSize = Size.xl | Size.xxl; | ||
|
||
/** | ||
* Defines the props of the component. | ||
*/ | ||
interface IUploaderProps extends IGenericProps { | ||
/** | ||
* Aspect ratio | ||
*/ | ||
aspectRatio?: AspectRatio; | ||
/** | ||
* Icon | ||
*/ | ||
icon?: string; | ||
/** | ||
* Label | ||
*/ | ||
label?: string; | ||
/** | ||
* Size | ||
*/ | ||
size?: UploaderSize; | ||
/** | ||
* Theme | ||
*/ | ||
theme?: Theme; | ||
/** | ||
* Uploader variant | ||
*/ | ||
variant?: UploaderVariant; | ||
/** | ||
* On click handler | ||
*/ | ||
onClick?: MouseEventHandler<HTMLDivElement>; | ||
} | ||
type UploaderProps = IUploaderProps; | ||
|
||
///////////////////////////// | ||
|
||
///////////////////////////// | ||
// // | ||
// Public attributes // | ||
// // | ||
///////////////////////////// | ||
|
||
/** | ||
* The display name of the component. | ||
*/ | ||
const COMPONENT_NAME = `${COMPONENT_PREFIX}Uploader`; | ||
|
||
/** | ||
* The default class name and classes prefix for this component. | ||
*/ | ||
const CLASSNAME = getRootClassName(COMPONENT_NAME); | ||
|
||
/** | ||
* The default value of props. | ||
*/ | ||
const DEFAULT_PROPS: Partial<UploaderProps> = { | ||
aspectRatio: AspectRatio.horizontal, | ||
size: Size.xl, | ||
theme: Theme.light, | ||
variant: UploaderVariant.square, | ||
}; | ||
|
||
///////////////////////////// | ||
|
||
/** | ||
* [Enter the description of the component here]. | ||
* | ||
* @return The component. | ||
*/ | ||
const Uploader: React.FC<UploaderProps> = (props: UploaderProps): ReactElement => { | ||
const { | ||
aspectRatio = DEFAULT_PROPS.aspectRatio, | ||
className, | ||
label, | ||
icon, | ||
size = DEFAULT_PROPS.size, | ||
theme = DEFAULT_PROPS.theme, | ||
variant = DEFAULT_PROPS.variant, | ||
...forwardedProps | ||
} = props; | ||
|
||
// Square aspect ratio for circle variants. | ||
const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio.square : aspectRatio; | ||
|
||
return ( | ||
<div | ||
className={classNames( | ||
className, | ||
handleBasicClasses({ | ||
aspectRatio: adjustedAspectRatio, | ||
prefix: CLASSNAME, | ||
size, | ||
theme, | ||
variant, | ||
}), | ||
)} | ||
{...forwardedProps} | ||
> | ||
<div className={`${CLASSNAME}__background`} /> | ||
|
||
<div className={`${CLASSNAME}__wrapper`}> | ||
{icon && ( | ||
<div className={`${CLASSNAME}__icon`}> | ||
<Icon icon={icon} size={Size.s} /> | ||
</div> | ||
)} | ||
|
||
{label && <span className={`${CLASSNAME}__label`}>{label}</span>} | ||
</div> | ||
</div> | ||
); | ||
}; | ||
Uploader.displayName = COMPONENT_NAME; | ||
|
||
///////////////////////////// | ||
|
||
export { CLASSNAME, DEFAULT_PROPS, Uploader, UploaderProps, UploaderVariant }; |
14 changes: 14 additions & 0 deletions
14
src/components/uploader/react/__snapshots__/Uploader.test.tsx.snap
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,14 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`<Uploader> Snapshots and structure should render correctly 1`] = ` | ||
<div | ||
className="lumx-uploader lumx-uploader--aspect-ratio-horizontal lumx-uploader--size-xl lumx-uploader--theme-light lumx-uploader--variant-square" | ||
> | ||
<div | ||
className="lumx-uploader__background" | ||
/> | ||
<div | ||
className="lumx-uploader__wrapper" | ||
/> | ||
</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