Skip to content

Commit faec08c

Browse files
kubit-uikubit-ui
authored
Merge pull request #19 from kubit-ui/feature/new-improvements
Feature/new improvements
2 parents b10590f + 62ecaa7 commit faec08c

Some content is hidden

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

58 files changed

+1164
-379
lines changed

‎package.json

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@kubit-ui-web/react-components",
3-
"version": "1.7.0",
3+
"version": "1.7.1",
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",
@@ -82,23 +82,23 @@
8282
"sideEffects": false,
8383
"license": "Apache-2.0",
8484
"devDependencies": {
85-
"@babel/core": "^7.24.7",
86-
"@babel/preset-env": "^7.24.7",
85+
"@babel/core": "^7.24.8",
86+
"@babel/preset-env": "^7.24.8",
8787
"@babel/preset-react": "^7.24.7",
8888
"@babel/preset-typescript": "^7.24.7",
89-
"@eslint/compat": "^1.1.0",
89+
"@eslint/compat": "^1.1.1",
9090
"@eslint/eslintrc": "^3.1.0",
9191
"@eslint/js": "^9.6.0",
92-
"@storybook/addon-a11y": "^8.1.11",
93-
"@storybook/addon-controls": "^8.1.11",
92+
"@storybook/addon-a11y": "^8.2.2",
93+
"@storybook/addon-controls": "^8.2.2",
9494
"@storybook/addon-coverage": "^1.0.4",
95-
"@storybook/addon-essentials": "^8.1.11",
96-
"@storybook/addon-interactions": "^8.1.11",
97-
"@storybook/addon-links": "^8.1.11",
98-
"@storybook/addon-themes": "^8.1.11",
99-
"@storybook/blocks": "^8.1.11",
100-
"@storybook/react": "^8.1.11",
101-
"@storybook/react-vite": "^8.1.11",
95+
"@storybook/addon-essentials": "^8.2.2",
96+
"@storybook/addon-interactions": "^8.2.2",
97+
"@storybook/addon-links": "^8.2.2",
98+
"@storybook/addon-themes": "^8.2.2",
99+
"@storybook/blocks": "^8.2.2",
100+
"@storybook/react": "^8.2.2",
101+
"@storybook/react-vite": "^8.2.2",
102102
"@testing-library/jest-dom": "^6.4.6",
103103
"@testing-library/react": "^16.0.0",
104104
"@testing-library/react-hooks": "^8.0.1",
@@ -111,8 +111,8 @@
111111
"@types/react-dom": "^18.3.0",
112112
"@types/styled-components": "^5.1.34",
113113
"@types/ungap__structured-clone": "^1.2.0",
114-
"@typescript-eslint/eslint-plugin": "^7.15.0",
115-
"@typescript-eslint/parser": "^7.15.0",
114+
"@typescript-eslint/eslint-plugin": "^7.16.0",
115+
"@typescript-eslint/parser": "^7.16.0",
116116
"@ungap/structured-clone": "^1.2.0",
117117
"@vitejs/plugin-react": "^4.3.1",
118118
"babel-jest": "^29.7.0",
@@ -130,7 +130,7 @@
130130
"eslint-plugin-promise": "^6.4.0",
131131
"eslint-plugin-react": "^7.34.3",
132132
"eslint-plugin-react-hooks": "^4.6.2",
133-
"eslint-plugin-react-refresh": "^0.4.7",
133+
"eslint-plugin-react-refresh": "^0.4.8",
134134
"eslint-plugin-storybook": "^0.8.0",
135135
"eslint-plugin-unused-imports": "^4.0.0",
136136
"globals": "^15.8.0",
@@ -147,11 +147,11 @@
147147
"prettier": "^3.3.2",
148148
"react-transition-group": "^4.4.5",
149149
"sort-imports": "^1.1.0",
150-
"storybook": "^8.1.11",
151-
"ts-jest": "^29.1.5",
150+
"storybook": "^8.2.2",
151+
"ts-jest": "^29.2.2",
152152
"tsc-alias": "1.8.10",
153-
"typedoc": "^0.26.3",
154-
"typedoc-plugin-markdown": "^4.1.2",
153+
"typedoc": "^0.26.4",
154+
"typedoc-plugin-markdown": "^4.2.1",
155155
"typescript": "^5.5.3",
156156
"vite": "^5.3.3",
157157
"vite-tsconfig-paths": "^4.3.2",

‎src/components/accordion/accordion.styled.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import styled, { css } from 'styled-components';
22

33
import { CommonStyleType } from '@/types/styles';
4-
import { getStyles } from '@/utils/getStyles/getStyles';
4+
import { getStyles, getTypographyStyles } from '@/utils/getStyles/getStyles';
55

66
import { LineSeparatorLinePropsStylesType, LineSeparatorPositionType } from '../lineSeparator';
77

@@ -43,6 +43,7 @@ export const AccordionTitleStyled = styled.span<IAccordionStyles>`
4343

4444
export const AccordionHeaderRightContentStyled = styled.div<IAccordionStyles>`
4545
${props => getStyles(props.styles)}
46+
${props => getTypographyStyles(props.styles)}
4647
`;
4748

4849
export const AccordionSubHeaderContainerStyled = styled.div<IAccordionStyles>`

‎src/components/accordion/types/accordionTheme.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export type AccordionPropsStylesType = {
2929
titleIconContainer?: CommonStyleType;
3030
title?: TypographyTypes;
3131
titleIcon?: IconTypes;
32-
headerRightContentContainer?: CommonStyleType;
32+
headerRightContentContainer?: CommonStyleType & TypographyTypes;
3333
lineSeparatorContainer?: CommonStyleType & { variant?: string };
3434
};
3535

‎src/components/calendar/selector/monthSelector/monthSelector.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,8 @@ export const MonthSelector = (props: IMonthSelector): JSX.Element => {
6868
styles={props.styles}
6969
>
7070
<ItemRove
71+
ariaDisabled={setDisabledMonths(index)}
72+
ariaLabel={month.charAt(0).toUpperCase() + month.slice(1)}
7173
asElement={MonthElementStyled}
7274
focus={focus === index}
7375
index={index}

‎src/components/calendar/selector/yearSelector/yearSelector.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ export const YearSelector = (props: IYearSelector): JSX.Element => {
5959
return (
6060
<YearListStyled key={index} state={state} styles={props.styles}>
6161
<ItemRove
62+
ariaLabel={String(year)}
6263
asElement={YearElementStyled}
6364
focus={focus === index}
6465
index={index}

‎src/components/dataTable/stories/argtypes.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const argtypes = (
2525
control: { type: 'object' },
2626
table: {
2727
type: {
28-
summary: 'DataTableColumnType',
28+
summary: 'DataTableColumnType[]',
2929
},
3030
category: CATEGORY_CONTROL.CONTENT,
3131
},
@@ -36,7 +36,7 @@ export const argtypes = (
3636
control: { type: 'object' },
3737
table: {
3838
type: {
39-
summary: 'DataTableRowType',
39+
summary: 'DataTableRowType[]',
4040
},
4141
category: CATEGORY_CONTROL.CONTENT,
4242
},
@@ -48,7 +48,7 @@ export const argtypes = (
4848
control: { type: 'object' },
4949
table: {
5050
type: {
51-
summary: 'DataTableRowGroupType',
51+
summary: 'DataTableRowGroupType[]',
5252
},
5353
category: CATEGORY_CONTROL.CONTENT,
5454
},
@@ -76,7 +76,7 @@ export const argtypes = (
7676
},
7777
},
7878
hoverableRows: {
79-
description: 'When define, only these rows will be hoverable',
79+
description: 'When defined, only these rows will be hoverable',
8080
type: { name: 'array' },
8181
control: { type: 'array' },
8282
table: {
@@ -87,7 +87,7 @@ export const argtypes = (
8787
},
8888
},
8989
nonHoverableRows: {
90-
description: 'When define, these rows will not be hoverable',
90+
description: 'When defined, these rows will not be hoverable',
9191
type: { name: 'array' },
9292
control: { type: 'array' },
9393
table: {
@@ -145,7 +145,7 @@ export const argtypes = (
145145
},
146146
},
147147
['aria-label']: {
148-
description: 'Only when scroll, scrollable container aria label',
148+
description: 'Only when it has scroll, scrollable container aria label',
149149
type: { name: 'string' },
150150
control: { type: 'text' },
151151
table: {
@@ -156,7 +156,7 @@ export const argtypes = (
156156
},
157157
},
158158
['aria-labelledby']: {
159-
description: 'Only when scroll, scrollable container aria labelled by',
159+
description: 'Only when it has scroll, scrollable container aria labelled by',
160160
type: { name: 'string' },
161161
control: { type: 'text' },
162162
table: {

‎src/components/input/components/label.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import * as React from 'react';
33
import { Label } from '@/components/label';
44

55
// styles
6-
import { LabelWrapperStyled } from '../input.styled';
6+
import { AdditionalInfoWrapperStyled, LabelWrapperStyled } from '../input.styled';
77
import { LABEL_TYPE } from '../types';
88
import { ILabel } from '../types/input';
99
import { getFontSize, getMaxLabelSize } from '../utils';
@@ -64,7 +64,9 @@ export const LabelStandAlone = (props: ILabel): JSX.Element | null => {
6464
{props.label.content}
6565
{!props.required && props.secondaryLabel ? props.secondaryLabel : null}
6666
</Label>
67-
{props.additionalInfo}
67+
<AdditionalInfoWrapperStyled styles={props.styles?.[props.state]}>
68+
{props.additionalInfo}
69+
</AdditionalInfoWrapperStyled>
6870
</LabelWrapperStyled>
6971
) : null;
7072
};

‎src/components/input/components/title.tsx

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,38 @@ import * as React from 'react';
33
import { Text, TextComponentType } from '@/components/text';
44

55
// styles
6-
import { TitleWrapperStyled } from '../input.styled';
6+
import {
7+
AdditionalInfoWrapperStyled,
8+
TitleAndAdditionalInfoWrapperStyled,
9+
TitleWrapperStyled,
10+
} from '../input.styled';
711
import { InputTitleComponentType } from '../types';
812
import { ITitle } from '../types/input';
913

1014
export const TitleStandAlone = (props: ITitle): JSX.Element | null => {
1115
if (!props.title?.content) {
1216
return null;
1317
}
18+
1419
return (
15-
<TitleWrapperStyled
16-
$titleStyles={props.styles}
17-
as={Text}
18-
customTypography={props.styles?.title}
19-
dataTestId={`${props.dataTestId}Title`}
20-
{...props.title}
21-
component={
22-
(props.title.component
23-
? props.title.component
24-
: InputTitleComponentType.PARAGRAPH) as unknown as TextComponentType
25-
}
26-
>
27-
{props.title.content}
28-
</TitleWrapperStyled>
20+
<TitleAndAdditionalInfoWrapperStyled styles={props.styles}>
21+
<TitleWrapperStyled
22+
$titleStyles={props.styles}
23+
as={Text}
24+
customTypography={props.styles?.title}
25+
dataTestId={`${props.dataTestId}Title`}
26+
{...props.title}
27+
component={
28+
(props.title.component
29+
? props.title.component
30+
: InputTitleComponentType.PARAGRAPH) as unknown as TextComponentType
31+
}
32+
>
33+
{props.title.content}
34+
</TitleWrapperStyled>
35+
<AdditionalInfoWrapperStyled styles={props.styles}>
36+
{props.additionalInfo}
37+
</AdditionalInfoWrapperStyled>
38+
</TitleAndAdditionalInfoWrapperStyled>
2939
);
3040
};

‎src/components/input/input.styled.ts

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
import { getStyles } from '@/utils/getStyles/getStyles';
1313

1414
import { InputCounterStateProps } from '../inputCounter/types/inputCounterTheme';
15-
import { InputIconPosition, InputState } from './types';
15+
import { InputIconPosition, InputState, InputStateProps } from './types';
1616
import {
1717
ErrorAndHelpMessageWrapperStyledProps,
1818
ErrorMessageStyledProps,
@@ -38,6 +38,14 @@ export const LabelWrapperStyled = styled.div<LabelStyledProps>`
3838
${mapLabelTypeStyles}
3939
`;
4040

41+
export const AdditionalInfoWrapperStyled = styled.div<{ styles?: InputStateProps }>`
42+
${({ styles }) => getStyles(styles?.additionalInfoContainer)};
43+
`;
44+
45+
export const TitleAndAdditionalInfoWrapperStyled = styled.div<{ styles?: InputStateProps }>`
46+
${({ styles }) => getStyles(styles?.titleAndAdditionalInfoContainer)};
47+
`;
48+
4149
export const InformationAssociatedWrapperStyled = styled.div<InformationAssociatedStyledProps>`
4250
flex-direction: ${({ iconPosition }) =>
4351
iconPosition === InputIconPosition.RIGHT ? 'row-reverse' : 'row'};
@@ -87,6 +95,9 @@ export const LoaderWrapperStyled = styled.div<LoaderStyledProps>`
8795
`;
8896

8997
export const InputIconStyled = styled.div<InputIconStyledProps>`
98+
display: flex;
99+
align-items: center;
100+
justify-content: center;
90101
pointer-events: ${({ $pointerEvents }) => ($pointerEvents ? 'auto' : 'none')};
91102
${({ iconPosition, styles }) => css`
92103
${getStyles(

‎src/components/input/inputStandAlone.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,13 @@ const InputStandAloneComponent = (
164164

165165
const buildTopContent = () => (
166166
<TopContentWrapperStyled styles={styles?.[state]}>
167-
<TitleStandAlone dataTestId={props.dataTestId} styles={styles?.[state]} title={props.title} />
167+
<TitleStandAlone
168+
additionalInfo={props.label ? undefined : props.additionalInfo}
169+
dataTestId={props.dataTestId}
170+
state={state}
171+
styles={styles?.[state]}
172+
title={props.title}
173+
/>
168174
<LabelStandAlone
169175
additionalInfo={props.additionalInfo}
170176
dataTestId={props.dataTestId}

0 commit comments

Comments
 (0)