LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Base level components fixes after code review

Browse Source
This commit is contained in:
Bartłomiej Głownia 2022-03-08 15:03:50 +01:00
parent c1c12d8c70
commit 16cef1ec06
7 changed files with 57 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
libs/ui-toolkit/src/components/button/button.tsx
View File

@ -1,6 +1,10 @@
import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef } from 'react';
import classNames from 'classnames';
import { Icon, IconName } from '../icon';
import {
paddingLeftProvided,
paddingRightProvided,
} from '../../utils/class-names';
interface CommonProps {
children?: React.ReactNode;
@ -21,12 +25,6 @@ const getClassName = (
className: CommonProps['className'],
variant: CommonProps['variant']
) => {
const noPaddingLeftProvided = !(
className?.match(/(^| )p(l|x)-\d+( |$)/) || variant === 'inline'
);
const noPaddingRightProvided = !(
className?.match(/(^| )p(r|x)-\d+( |$)/) || variant === 'inline'
);
return classNames(
[
'inline-flex',
@ -42,8 +40,8 @@ const getClassName = (
'transition-all',
],
{
'pl-28': noPaddingLeftProvided,
'pr-28': noPaddingRightProvided,
'pl-28': !paddingLeftProvided(className) || variant === 'inline',
'pr-28': !paddingRightProvided(className) || variant === 'inline',
'hover:border-black dark:hover:border-white': variant !== 'inline',
'active:border-black dark:active:border-white': true,

12
libs/ui-toolkit/src/components/icon/icon.stories.tsx
View File

@ -3,20 +3,10 @@ import { Icon } from './icon';
export default {
component: Icon,
title: 'Input',
title: 'Icon',
} as Meta;
const Template: Story = (args) => <Icon {...args} name="warning-sign" />;
export const Default = Template.bind({});
Default.args = {};
export const WithError = Template.bind({});
WithError.args = {
hasError: true,
};
export const Disabled = Template.bind({});
Disabled.args = {
disabled: true,
};

2
libs/ui-toolkit/src/components/icon/icon.tsx
View File

@ -4,8 +4,6 @@ import classNames from 'classnames';
export type { IconName } from '@blueprintjs/icons';
interface IconProps {
hasError?: boolean;
disabled?: boolean;
name: IconName;
className?: string;
size?: 16 | 20 | 24 | 32 | 48 | 64;

10
libs/ui-toolkit/src/components/input/input.tsx
View File

@ -1,6 +1,10 @@
import { InputHTMLAttributes, forwardRef } from 'react';
import classNames from 'classnames';
import { Icon, IconName } from '../icon';
import {
paddingLeftProvided,
paddingRightProvided,
} from '../../utils/class-names';
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
hasError?: boolean;
@ -16,8 +20,6 @@ export const inputClassNames = ({
hasError?: boolean;
className?: string;
}) => {
const noPaddingLeftProvided = !className?.match(/(^| )p(l|x)-\d+( |$)/);
const noPaddingRightProvided = !className?.match(/(^| )p(r|x)-\d+( |$)/);
return classNames(
[
'inline-flex',
@ -34,8 +36,8 @@ export const inputClassNames = ({
'disabled:bg-black-10 disabled:dark:bg-white-10',
],
{
'pl-8': noPaddingLeftProvided,
'pr-8': noPaddingRightProvided,
'pl-8': !paddingLeftProvided(className),
'pr-8': !paddingRightProvided(className),
'border-vega-pink dark:border-vega-pink': hasError,
},
className

2
libs/ui-toolkit/src/components/text-area/text-area.tsx
View File

@ -3,7 +3,7 @@ import { inputClassNames } from '../input/input';
export interface TextAreaProps
extends TextareaHTMLAttributes<HTMLTextAreaElement> {
hassError?: boolean;
hasError?: boolean;
className?: string;
}

39
libs/ui-toolkit/src/utils/class-names.spec.ts Normal file
View File

@ -0,0 +1,39 @@
import { paddingLeftProvided, paddingRightProvided } from './class-names';
test('paddingLeftProvided detects class name which affects left padding', () => {
expect(paddingLeftProvided()).toEqual(false);
expect(paddingLeftProvided('')).toEqual(false);
expect(paddingLeftProvided('pl-8')).toEqual(true);
expect(paddingLeftProvided('pl-16')).toEqual(true);
expect(paddingLeftProvided(' pl-16')).toEqual(true);
expect(paddingLeftProvided('prepend pl-8')).toEqual(true);
expect(paddingLeftProvided('pl-16 ')).toEqual(true);
expect(paddingLeftProvided('pl-16 append')).toEqual(true);
expect(paddingLeftProvided('px-8')).toEqual(true);
expect(paddingLeftProvided('px-16')).toEqual(true);
expect(paddingLeftProvided(' px-16')).toEqual(true);
expect(paddingLeftProvided('prepend px-8')).toEqual(true);
expect(paddingLeftProvided('px-16 ')).toEqual(true);
expect(paddingLeftProvided('px-16 append')).toEqual(true);
expect(paddingLeftProvided('px-16a')).toEqual(false);
expect(paddingLeftProvided('apx-16')).toEqual(false);
});
test('paddingRightProvided detects class name which affects right padding', () => {
expect(paddingRightProvided()).toEqual(false);
expect(paddingRightProvided('')).toEqual(false);
expect(paddingRightProvided('pr-8')).toEqual(true);
expect(paddingRightProvided('pr-16')).toEqual(true);
expect(paddingRightProvided(' pr-16')).toEqual(true);
expect(paddingRightProvided('prepend pr-8')).toEqual(true);
expect(paddingRightProvided('pr-16 ')).toEqual(true);
expect(paddingRightProvided('pr-16 append')).toEqual(true);
expect(paddingRightProvided('px-8')).toEqual(true);
expect(paddingRightProvided('px-16')).toEqual(true);
expect(paddingRightProvided(' px-16')).toEqual(true);
expect(paddingRightProvided('prepend px-8')).toEqual(true);
expect(paddingRightProvided('px-16 ')).toEqual(true);
expect(paddingRightProvided('px-16 append')).toEqual(true);
expect(paddingRightProvided('px-16a')).toEqual(false);
expect(paddingRightProvided('apx-16')).toEqual(false);
});

4
libs/ui-toolkit/src/utils/class-names.ts Normal file
View File

@ -0,0 +1,4 @@
export const paddingLeftProvided = (className?: string) =>
!!className?.match(/(^| )p(l|x)-\d+( |$)/);
export const paddingRightProvided = (className?: string) =>
!!className?.match(/(^| )p(r|x)-\d+( |$)/);