-
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.
Merge pull request #199 from lumapps/feat/textfield-after
feat(textfield-enhancements): Text field enhancements
- Loading branch information
Showing
30 changed files
with
822 additions
and
298 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
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
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,82 @@ | ||
| import { CSS_PREFIX } from 'LumX/core/constants'; | ||
| import { COMPONENT_PREFIX, MODULE_NAME } from 'LumX/angularjs/constants/common_constants'; | ||
|
|
||
| ///////////////////////////// | ||
|
|
||
| function ChipGroupController() { | ||
| 'ngInject'; | ||
|
|
||
| // eslint-disable-next-line consistent-this | ||
| const lumx = this; | ||
|
|
||
| ///////////////////////////// | ||
| // // | ||
| // Private attributes // | ||
| // // | ||
| ///////////////////////////// | ||
|
|
||
| /** | ||
| * The default props. | ||
| * | ||
| * @type {Object} | ||
| * @constant | ||
| * @readonly | ||
| */ | ||
| const _DEFAULT_PROPS = { | ||
| align: 'left', | ||
| }; | ||
|
|
||
| ///////////////////////////// | ||
| // // | ||
| // Public functions // | ||
| // // | ||
| ///////////////////////////// | ||
|
|
||
| /** | ||
| * Get button classes. | ||
| * | ||
| * @return {Array} The list of button classes. | ||
| */ | ||
| function getClasses() { | ||
| const classes = []; | ||
|
|
||
| if (angular.isDefined(lumx.align) && lumx.align) { | ||
| classes.push(`${CSS_PREFIX}-chip-group--align-${lumx.align}`); | ||
| } else { | ||
| classes.push(`${CSS_PREFIX}-chip-group--align-${_DEFAULT_PROPS.align}`); | ||
| } | ||
|
|
||
| return classes; | ||
| } | ||
|
|
||
| ///////////////////////////// | ||
|
|
||
| lumx.getClasses = getClasses; | ||
| } | ||
|
|
||
| ///////////////////////////// | ||
|
|
||
| function ChipGroupDirective() { | ||
| 'ngInject'; | ||
|
|
||
| return { | ||
| bindToController: true, | ||
| controller: ChipGroupController, | ||
| controllerAs: 'lumx', | ||
| replace: true, | ||
| restrict: 'E', | ||
| scope: { | ||
| align: '@?lumxAlign', | ||
| }, | ||
| template: `<div class="${CSS_PREFIX}-chip-group" ng-class="lumx.getClasses()" ng-transclude></div>`, | ||
| transclude: true, | ||
| }; | ||
| } | ||
|
|
||
| ///////////////////////////// | ||
|
|
||
| angular.module(`${MODULE_NAME}.chip`).directive(`${COMPONENT_PREFIX}ChipGroup`, ChipGroupDirective); | ||
|
|
||
| ///////////////////////////// | ||
|
|
||
| export { ChipGroupDirective }; |
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,38 @@ | ||
| import { shallow } from 'enzyme'; | ||
| import React from 'react'; | ||
|
|
||
| import { ICommonSetup } from 'LumX/core/testing/utils.test'; | ||
| import { Chip } from './Chip'; | ||
| import { ChipGroup, ChipGroupProps } from './ChipGroup'; | ||
|
|
||
| interface ISetup extends ICommonSetup {} | ||
|
|
||
| /** | ||
| * Mounts the component and returns common DOM elements / data needed in multiple tests further down. | ||
| * | ||
| * @param propOverrides An object that will extend the default properties. | ||
| * @return An object with some shortcuts to elements or data required in tests. | ||
| */ | ||
| const setup = (propOverrides: Partial<ChipGroupProps> = {}): ISetup => { | ||
| const props = { | ||
| children: [<Chip key="1">Chip 1</Chip>, <Chip key="2">Chip 2</Chip>, <Chip key="3">Chip 3</Chip>], | ||
| ...propOverrides, | ||
| }; | ||
|
|
||
| const wrapper = shallow(<ChipGroup {...props} />); | ||
|
|
||
| return { | ||
| props, | ||
| wrapper, | ||
| }; | ||
| }; | ||
|
|
||
| describe('<ChipGroup />', () => { | ||
| // 1. Test render via snapshot (default state of component). | ||
| describe('Snapshot', () => { | ||
| it('should render correctly Chip Group component', () => { | ||
| const { wrapper } = setup(); | ||
| expect(wrapper).toMatchSnapshot(); | ||
| }); | ||
| }); | ||
| }); |
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,82 @@ | ||
| import React, { ReactElement } from 'react'; | ||
|
|
||
| import classNames from 'classnames'; | ||
|
|
||
| import { COMPONENT_PREFIX } from 'LumX/core/react/constants'; | ||
|
|
||
| import { IGenericProps, getRootClassName } from 'LumX/core/react/utils'; | ||
| import { handleBasicClasses } from 'LumX/core/utils'; | ||
|
|
||
| ///////////////////////////// | ||
|
|
||
| /** | ||
| * Defines the props of the component. | ||
| */ | ||
| interface IChipGroupProps extends IGenericProps { | ||
| /** Children of the ChipGroup. This should be a list of Chips */ | ||
| children: React.ReactNode; | ||
|
|
||
| /** Chip group alignment */ | ||
| align?: string; | ||
| } | ||
| type ChipGroupProps = IChipGroupProps; | ||
|
|
||
| ///////////////////////////// | ||
|
|
||
| /** | ||
| * Define the types of the default props. | ||
| */ | ||
| interface IDefaultPropsType extends Partial<ChipGroupProps> {} | ||
|
|
||
| ///////////////////////////// | ||
| // // | ||
| // Public attributes // | ||
| // // | ||
| ///////////////////////////// | ||
|
|
||
| /** | ||
| * The default value of props. | ||
| */ | ||
| const DEFAULT_PROPS: IDefaultPropsType = { | ||
| align: 'left', | ||
| }; | ||
|
|
||
| /** | ||
| * The display name of the component. | ||
| */ | ||
| const COMPONENT_NAME = `${COMPONENT_PREFIX}ChipGroup`; | ||
|
|
||
| /** | ||
| * The default class name and classes prefix for this component. | ||
| */ | ||
| const CLASSNAME: string = getRootClassName(COMPONENT_NAME); | ||
|
|
||
| ///////////////////////////// | ||
|
|
||
| /** | ||
| * Displays a list of Chips in a grouped fashion. | ||
| * @return The Chip Group component. | ||
| */ | ||
| const ChipGroup: React.FC<IChipGroupProps> = ({ | ||
| className, | ||
| align = DEFAULT_PROPS.align, | ||
| children, | ||
| ...props | ||
| }: ChipGroupProps): ReactElement => { | ||
| const chipGroupClassName = handleBasicClasses({ | ||
| align, | ||
| prefix: CLASSNAME, | ||
| }); | ||
|
|
||
| return ( | ||
| <div className={classNames(className, chipGroupClassName)} {...props}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| ChipGroup.displayName = COMPONENT_NAME; | ||
|
|
||
| ///////////////////////////// | ||
|
|
||
| export { CLASSNAME, ChipGroup, ChipGroupProps }; |
Oops, something went wrong.