Skip to content

Commit 2363100

Browse files
kubit-uikubit-ui
authored
Merge pull request #9 from kubit-ui/feature/improvements
Feature/improvements
2 parents 8f756f2 + 8d1648f commit 2363100

File tree

105 files changed

+676
-233
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

105 files changed

+676
-233
lines changed

‎.storybook/assets/font/NunitoSans_10pt-Bold.ttf

111 KB
Binary file not shown.

‎.storybook/assets/font/NunitoSans_10pt-Regular.ttf

111 KB
Binary file not shown.

‎.storybook/manager-head.html

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,20 @@
66
src: url('./font/gtamericaregular.woff') format('truetype');
77
}
88

9+
@font-face {
10+
font-family: 'NunitoSans Font';
11+
font-weight: 400;
12+
src: url('./font/NunitoSans_10pt-Regular.ttf') format('truetype');
13+
}
14+
15+
@font-face {
16+
font-family: 'NunitoSans';
17+
font-weight: 700;
18+
src: url('./font/NunitoSans_10pt-Regular.ttf') format('truetype');
19+
}
20+
921
body {
10-
font-family: 'GTAmerica', sans-serif !important;
22+
font-family: 'NunitoSans', sans-serif !important;
1123
border-radius: 0 !important;
1224
}
1325

@@ -26,9 +38,9 @@
2638
.sidebar-item {
2739
padding-top: 0.5rem !important;
2840
padding-bottom: 0.5rem !important;
29-
font-size: 12px !important;
41+
font-size: 14px !important;
3042
font-style: normal !important;
31-
font-weight: 500 !important;
43+
font-weight: 400 !important;
3244
line-height: 16px;
3345
}
3446

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@kubit-ui-web/react-components",
3-
"version": "1.2.0",
3+
"version": "1.3.0",
44
"description": "Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience",
55
"author": {
66
"name": "Kubit",

‎src/components/button/__tests__/button.test.tsx

Lines changed: 74 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -51,102 +51,106 @@ const mockWithoutIcon = {
5151

5252
const children = 'Click me!';
5353

54-
test('Button component', async () => {
55-
const { container } = renderProvider(<Button {...mockProps}>{children}</Button>);
54+
describe('Button component', () => {
55+
test('Should render Button component', async () => {
56+
const { container } = renderProvider(<Button {...mockProps}>{children}</Button>);
5657

57-
const button = screen.getByRole('button', { name: /click/i });
58+
const button = screen.getByRole('button', { name: /click/i });
5859

59-
expect(button).toBeDefined();
60+
expect(button).toBeDefined();
6061

61-
const results = await axe(container);
62-
expect(container).toHTMLValidate();
63-
expect(results).toHaveNoViolations();
64-
});
62+
const results = await axe(container);
63+
expect(container).toHTMLValidate();
64+
expect(results).toHaveNoViolations();
65+
});
6566

66-
test('Button without variant nor state', async () => {
67-
const { container } = renderProvider(<Button {...mockPropsNoVariantNorState}>{children}</Button>);
67+
test('Button without variant nor state', async () => {
68+
const { container } = renderProvider(
69+
<Button {...mockPropsNoVariantNorState}>{children}</Button>
70+
);
6871

69-
const button = screen.getByRole('button', { name: /click/i });
72+
const button = screen.getByRole('button', { name: /click/i });
7073

71-
expect(button).toBeDefined();
74+
expect(button).toBeDefined();
7275

73-
const results = await axe(container);
74-
expect(container).toHTMLValidate();
75-
expect(results).toHaveNoViolations();
76-
});
76+
const results = await axe(container);
77+
expect(container).toHTMLValidate();
78+
expect(results).toHaveNoViolations();
79+
});
7780

78-
test('Button without type nor size', async () => {
79-
const { container } = renderProvider(<Button {...mockPropsNoTypeNorSize}>{children}</Button>);
81+
test('Button without type nor size', async () => {
82+
const { container } = renderProvider(<Button {...mockPropsNoTypeNorSize}>{children}</Button>);
8083

81-
const button = screen.getByRole('button', { name: /click/i });
84+
const button = screen.getByRole('button', { name: /click/i });
8285

83-
expect(button).toBeDefined();
86+
expect(button).toBeDefined();
8487

85-
const results = await axe(container);
86-
expect(container).toHTMLValidate();
87-
expect(results).toHaveNoViolations();
88-
});
88+
const results = await axe(container);
89+
expect(container).toHTMLValidate();
90+
expect(results).toHaveNoViolations();
91+
});
8992

90-
test('Button with loader', async () => {
91-
const { container } = renderProvider(<Button {...mockPropsLoader}>{children}</Button>);
93+
test('Button with loader', async () => {
94+
const { container } = renderProvider(<Button {...mockPropsLoader}>{children}</Button>);
9295

93-
const loader = screen.queryByText('loader');
96+
const loader = screen.queryByText('loader');
9497

95-
expect(loader).toBeDefined();
98+
expect(loader).toBeDefined();
9699

97-
const results = await axe(container);
98-
expect(container).toHTMLValidate();
99-
expect(results).toHaveNoViolations();
100-
});
100+
const results = await axe(container);
101+
expect(container).toHTMLValidate();
102+
expect(results).toHaveNoViolations();
103+
});
101104

102-
test('Button with loader as variant', async () => {
103-
const { queryByText, getByTestId, container } = renderProvider(
104-
<Button {...mockPropsLoaderAsVariant}>{children}</Button>
105-
);
105+
test('Button with loader as variant', async () => {
106+
const { queryByText, getByTestId, container } = renderProvider(
107+
<Button {...mockPropsLoaderAsVariant}>{children}</Button>
108+
);
106109

107-
// Should only render loader variant
108-
const loader = queryByText(mockPropsLoaderAsVariant.loader.variant);
109-
expect(loader).toBeNull();
110+
// Should only render loader variant
111+
const loader = queryByText(mockPropsLoaderAsVariant.loader.variant);
112+
expect(loader).toBeNull();
110113

111-
const loaderVariant = getByTestId('loaderStandaloneTestId');
112-
expect(loaderVariant).toBeDefined();
114+
const loaderVariant = getByTestId('loaderStandaloneTestId');
115+
expect(loaderVariant).toBeDefined();
113116

114-
const results = await axe(container);
115-
expect(container).toHTMLValidate();
116-
expect(results).toHaveNoViolations();
117-
});
117+
const results = await axe(container);
118+
expect(container).toHTMLValidate();
119+
expect(results).toHaveNoViolations();
120+
});
118121

119-
test('Button without icon', async () => {
120-
const { queryByRole, container } = renderProvider(
121-
<Button {...mockWithoutIcon}>{children}</Button>
122-
);
122+
test('Button without icon', async () => {
123+
const { queryByRole, container } = renderProvider(
124+
<Button {...mockWithoutIcon}>{children}</Button>
125+
);
123126

124-
expect(queryByRole('img')).toBeNull();
127+
expect(queryByRole('img')).toBeNull();
125128

126-
const results = await axe(container);
127-
expect(container).toHTMLValidate();
128-
expect(results).toHaveNoViolations();
129-
});
129+
const results = await axe(container);
130+
expect(container).toHTMLValidate();
131+
expect(results).toHaveNoViolations();
132+
});
130133

131-
test('Button without children and icon', async () => {
132-
const { container } = renderProvider(<Button {...mockWithoutIcon}></Button>);
134+
test('Button without children and icon', async () => {
135+
const { container } = renderProvider(<Button {...mockWithoutIcon}></Button>);
133136

134-
expect(container).toBeEmptyDOMElement();
137+
expect(container).toBeEmptyDOMElement();
135138

136-
const results = await axe(container);
137-
expect(container).toHTMLValidate();
138-
expect(results).toHaveNoViolations();
139-
});
139+
const results = await axe(container);
140+
expect(container).toHTMLValidate();
141+
expect(results).toHaveNoViolations();
142+
});
140143

141-
test('should render an SVG if icon prop is provided', async () => {
142-
const { container } = renderProvider(
143-
<Button icon={{ icon: 'icon', altText: 'altIcon' }} size="LARGE" variant="PRIMARY" />
144-
);
144+
test('should render an SVG if icon prop is provided', async () => {
145+
const { container } = renderProvider(
146+
<Button icon={{ icon: 'icon', altText: 'altIcon' }} size="LARGE" variant="PRIMARY" />
147+
);
145148

146-
const svg = screen.getByRole('img', { name: /altIcon/i });
149+
const svg = screen.getByRole('img', { name: /altIcon/i });
147150

148-
expect(svg).toBeInTheDocument();
149-
const results = await axe(container);
150-
expect(container).toHTMLValidate();
151-
expect(results).toHaveNoViolations();
151+
expect(svg).toBeInTheDocument();
152+
const results = await axe(container);
153+
expect(container).toHTMLValidate();
154+
expect(results).toHaveNoViolations();
155+
});
152156
});

‎src/components/button/button.styled.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,13 @@ export const ButtonStyled = styled.button<IButtonStyled>`
5858
${({ $state, $styles, $sizeStyles }) => setTokens($state, $styles, $sizeStyles)}
5959
6060
&:disabled {
61-
${({ $styles, $sizeStyles }) => setTokens(ButtonStateType.DISABLED, $styles, $sizeStyles)}
62-
cursor: 'default',
61+
cursor: default;
62+
${({ $styles, $sizeStyles, $loading }) =>
63+
setTokens(
64+
$loading ? ButtonStateType.LOADING : ButtonStateType.DISABLED,
65+
$styles,
66+
$sizeStyles
67+
)};
6368
}
6469
6570
&:hover:not(:disabled) {

‎src/components/button/buttonStandAlone.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,18 @@ export const ButtonStandAloneStructure = (props: IButtonStandAlone): JSX.Element
1515

1616
return (
1717
<>
18-
{props.loading && props.loader ? (
18+
{props.loader && (
1919
<>
2020
{typeof props.loader === 'object' && 'variant' in props.loader ? (
2121
<ButtonLoaderStyled>
22-
<Loader {...props.loader} width={getWidthSize()} />
22+
<Loader visible={props.loading} width={getWidthSize()} {...props.loader} />
2323
</ButtonLoaderStyled>
2424
) : (
2525
<ButtonLoaderStyled>{props.loader as React.ReactNode}</ButtonLoaderStyled>
2626
)}
2727
</>
28-
) : (
28+
)}
29+
{!props.loading && (
2930
<>
3031
<ElementOrIcon
3132
linearIcon
@@ -34,7 +35,6 @@ export const ButtonStandAloneStructure = (props: IButtonStandAlone): JSX.Element
3435
width={getWidthSize()}
3536
{...props.icon}
3637
/>
37-
3838
{props.children}
3939
</>
4040
)}
@@ -47,6 +47,8 @@ const ButtonStandAloneComponent = (
4747
ref: React.ForwardedRef<HTMLButtonElement> | undefined | null
4848
): JSX.Element => {
4949
const ariaProps = pickAriaProps(props);
50+
const disabled =
51+
props.state === ButtonStateType.DISABLED || props.state === ButtonStateType.LOADING;
5052

5153
return (
5254
<ButtonStyled
@@ -65,7 +67,7 @@ const ButtonStandAloneComponent = (
6567
$styles={props.styles}
6668
alignText={props.alignText}
6769
data-testid={props.dataTestId}
68-
disabled={props.state === ButtonStateType.DISABLED}
70+
disabled={disabled}
6971
form={props.form}
7072
minWidth={props.minWidth}
7173
tabIndex={props.tabIndex}

‎src/components/drawer/drawerStandAlone.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,11 @@ const DrawerStandAloneComponent = (
4646
>
4747
{!blocked && (
4848
<DrawerNavigationStyled level={props.level} styles={props.styles}>
49-
<ElementOrIcon customIconStyles={props.styles.icon} {...props.closeIcon} />
49+
<ElementOrIcon
50+
customIconStyles={props.styles.icon}
51+
{...props.closeIcon}
52+
dataTestId={`${props.dataTestId}CloseIcon`}
53+
/>
5054
</DrawerNavigationStyled>
5155
)}
5256
<DrawerTitleContentFooterContainerStyled

‎src/components/dropdownSelected/dropdownSelectedStandAlone.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,10 @@ import { IDropdownSelectedStandAlone } from './types';
2222

2323
const DROPDOWN_SELECTED_BASE_ID = 'DropdownSelected';
2424

25-
const DropdownSelectedStandAloneComponent = (props: IDropdownSelectedStandAlone): JSX.Element => {
25+
const DropdownSelectedStandAloneComponent = (
26+
props: IDropdownSelectedStandAlone,
27+
ref: React.ForwardedRef<HTMLDivElement> | undefined | null
28+
): JSX.Element => {
2629
const BASE_ID = useId(DROPDOWN_SELECTED_BASE_ID);
2730
const POPOVER_ID = `${BASE_ID}-popover`;
2831
const ariaControls = props.open ? `${BASE_ID}-list` : undefined;
@@ -65,6 +68,7 @@ const DropdownSelectedStandAloneComponent = (props: IDropdownSelectedStandAlone)
6568

6669
return (
6770
<DropdrownSelectedContainerStyled
71+
ref={ref}
6872
data-testid={props.dataTestIdComponent}
6973
styles={props.styles}
7074
onBlur={event => props.onFocus?.(event)}

‎src/components/input/components/loader.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,12 @@ import { Loader } from '@/components/loader';
66
import { LoaderWrapperStyled } from '../input.styled';
77
import { IInputLoader } from '../types/input';
88

9-
export const LoaderStandAlone = (props: IInputLoader): JSX.Element | null => {
10-
if (!props.loading || !(props.styles?.loaderVariant || props.loader?.variant)) {
11-
return null;
12-
}
9+
export const LoaderStandAlone = (props: IInputLoader): JSX.Element => {
1310
return (
1411
<LoaderWrapperStyled styles={props.styles}>
1512
<Loader
1613
variant={props.styles?.loaderVariant}
14+
visible={props.loading}
1715
width={props.styles?.loaderIcon?.width}
1816
{...props.loader}
1917
/>

0 commit comments

Comments
 (0)