Shrek desperately wants your attention in this{' '}
ticket
@@ -103,8 +103,8 @@ export const mockNotifications: NotificationProps[] = [
alt=""
style={{
position: 'absolute',
- bottom: 0,
- right: 0,
+ insetBlockEnd: 0,
+ insetInlineEnd: 0,
borderRadius: '100%',
background: 'rgba(0, 0, 0, 0.1)',
}}
diff --git a/src/components/Notifications/i18n/index.ts b/src/components/Notifications/i18n/index.ts
index 3c37d95a..5db018d7 100644
--- a/src/components/Notifications/i18n/index.ts
+++ b/src/components/Notifications/i18n/index.ts
@@ -1,7 +1,8 @@
-import {registerKeyset} from '../../utils/registerKeyset';
+import {addComponentKeysets} from '@gravity-ui/uikit/i18n';
+
+import {NAMESPACE} from '../../utils/cn';
import en from './en.json';
import ru from './ru.json';
-const COMPONENT = 'Notifications';
-export default registerKeyset({en, ru}, COMPONENT);
+export const i18n = addComponentKeysets({en, ru}, `${NAMESPACE}notifications`);
diff --git a/src/components/PasswordInput/PasswordInput.scss b/src/components/PasswordInput/PasswordInput.scss
index 388aea09..46d4729c 100644
--- a/src/components/PasswordInput/PasswordInput.scss
+++ b/src/components/PasswordInput/PasswordInput.scss
@@ -16,6 +16,6 @@ $block: '.#{variables.$ns}password-input';
}
&__copy-button {
- margin-right: 4px;
+ margin-inline-end: 4px;
}
}
diff --git a/src/components/PasswordInput/PasswordInput.tsx b/src/components/PasswordInput/PasswordInput.tsx
index e53900c6..009d4ffb 100644
--- a/src/components/PasswordInput/PasswordInput.tsx
+++ b/src/components/PasswordInput/PasswordInput.tsx
@@ -1,12 +1,19 @@
import React from 'react';
import {Eye, EyeSlash} from '@gravity-ui/icons';
-import {Button, ClipboardButton, Icon, TextInput, TextInputProps, Tooltip} from '@gravity-ui/uikit';
+import {
+ ActionTooltip,
+ Button,
+ ClipboardButton,
+ Icon,
+ TextInput,
+ TextInputProps,
+} from '@gravity-ui/uikit';
import {block} from '../utils/cn';
-import i18n from './i18n';
-import {getCopyButtonSizeAndIconSize} from './utils';
+import {i18n} from './i18n';
+import {getActionButtonSizeAndIconSize} from './utils';
import './PasswordInput.scss';
@@ -30,6 +37,7 @@ export const PasswordInput = (props: PasswordInputProps) => {
value,
showCopyButton,
rightContent,
+ endContent,
showRevealButton,
size = 'm',
hasCopyTooltip = true,
@@ -39,39 +47,40 @@ export const PasswordInput = (props: PasswordInputProps) => {
const [hideValue, setHideValue] = React.useState(true);
- const additionalRightContent = React.useMemo(() => {
+ const additionalEndContent = React.useMemo(() => {
if (!showRevealButton && !showCopyButton) {
- return
{rightContent} ;
+ return
{endContent || rightContent} ;
}
const onClick = () => {
setHideValue((hideValue) => !hideValue);
};
- const {copyButtonSize, iconSize} = getCopyButtonSizeAndIconSize(size);
+ const {actionButtonSize, iconSize} = getActionButtonSizeAndIconSize(size);
return (
- {rightContent}
+ {endContent || rightContent}
{value && showCopyButton ? (
) : null}
{showRevealButton ? (
-
{
>
-
+
) : null}
);
}, [
showRevealButton,
showCopyButton,
+ endContent,
rightContent,
value,
hasRevealTooltip,
@@ -99,7 +109,7 @@ export const PasswordInput = (props: PasswordInputProps) => {
{
- let copyButtonSize: ButtonSize = 's';
+): {actionButtonSize: ButtonSize; iconSize: number} => {
+ let actionButtonSize: ButtonSize = 's';
let iconSize = 16;
switch (textInputSize) {
case 's': {
- copyButtonSize = 'xs';
+ actionButtonSize = 'xs';
iconSize = 12;
break;
}
case 'l': {
- copyButtonSize = 'm';
+ actionButtonSize = 'm';
break;
}
case 'xl': {
- copyButtonSize = 'l';
- iconSize = 20;
+ actionButtonSize = 'l';
}
}
- return {copyButtonSize, iconSize};
+ return {actionButtonSize, iconSize};
};
diff --git a/src/components/PlaceholderContainer/PlaceholderContainer.scss b/src/components/PlaceholderContainer/PlaceholderContainer.scss
index e3be6826..75870ed7 100644
--- a/src/components/PlaceholderContainer/PlaceholderContainer.scss
+++ b/src/components/PlaceholderContainer/PlaceholderContainer.scss
@@ -33,7 +33,7 @@ $block: '.#{variables.$ns}placeholder-container';
}
#{$block}__content {
- margin-left: $contentOffset;
+ margin-inline-start: $contentOffset;
min-height: $contentHeight;
}
}
@@ -78,7 +78,7 @@ $block: '.#{variables.$ns}placeholder-container';
padding: variables.$normalOffset;
#{$block}__description {
- margin-top: variables.$nanoOffset;
+ margin-block-start: variables.$nanoOffset;
}
}
@@ -86,14 +86,14 @@ $block: '.#{variables.$ns}placeholder-container';
padding: variables.$mediumOffset;
#{$block}__description {
- margin-top: variables.$microOffset;
+ margin-block-start: variables.$microOffset;
}
}
&_size_promo,
&_size_l {
#{$block}__description {
- margin-top: variables.$smallOffset;
+ margin-block-start: variables.$smallOffset;
}
}
@@ -132,7 +132,7 @@ $block: '.#{variables.$ns}placeholder-container';
}
&__actions {
- margin-top: variables.$normalOffset;
+ margin-block-start: variables.$normalOffset;
display: flex;
flex-direction: row;
}
@@ -181,7 +181,7 @@ $block: '.#{variables.$ns}placeholder-container';
}
#{$block}__content {
- margin-top: variables.$normalOffset;
+ margin-block-start: variables.$normalOffset;
align-items: center;
text-align: center;
flex-shrink: 0;
@@ -215,10 +215,10 @@ $block: '.#{variables.$ns}placeholder-container';
}
&__action {
- margin-right: variables.$normalOffset;
+ margin-inline-end: variables.$normalOffset;
}
&__action:last-child {
- margin-right: 0;
+ margin-inline-end: 0;
}
}
diff --git a/src/components/PlaceholderContainer/__stories__/PlaceholderContainerShowcase.scss b/src/components/PlaceholderContainer/__stories__/PlaceholderContainerShowcase.scss
index 90ee92c5..a5a6443e 100644
--- a/src/components/PlaceholderContainer/__stories__/PlaceholderContainerShowcase.scss
+++ b/src/components/PlaceholderContainer/__stories__/PlaceholderContainerShowcase.scss
@@ -10,7 +10,7 @@
}
&__section + &__section {
- border-top: 1px solid var(--g-color-text-hint);
+ border-block-start: 1px solid var(--g-color-text-hint);
}
&__examples-row {
@@ -28,6 +28,6 @@
}
&__custom-action {
- margin-top: 20px;
+ margin-block-start: 20px;
}
}
diff --git a/src/components/PromoSheet/PromoSheet.scss b/src/components/PromoSheet/PromoSheet.scss
index 1152e6a4..cc6595e1 100644
--- a/src/components/PromoSheet/PromoSheet.scss
+++ b/src/components/PromoSheet/PromoSheet.scss
@@ -16,7 +16,8 @@ $block: '.#{variables.$ns}promo-sheet';
&__header {
position: relative;
- padding: 0 20px 0 0;
+ padding: 0;
+ padding-inline-end: 20px;
margin: 0 0 var(--gc-promo-sheet-header-margin);
}
@@ -29,8 +30,8 @@ $block: '.#{variables.$ns}promo-sheet';
&__close-button {
position: absolute;
- top: calc(12px * -1);
- right: calc(12px * -1);
+ inset-block-start: -12px;
+ inset-inline-end: -12px;
}
&__message {
@@ -41,7 +42,7 @@ $block: '.#{variables.$ns}promo-sheet';
}
&__image-container {
- margin-bottom: var(--gc-promo-sheet-image-margin);
+ margin-block-end: var(--gc-promo-sheet-image-margin);
}
&__image {
diff --git a/src/components/PromoSheet/__tests__/PromoSheet.test.tsx b/src/components/PromoSheet/__tests__/PromoSheet.test.tsx
index 6f02e4a1..21e5ab42 100644
--- a/src/components/PromoSheet/__tests__/PromoSheet.test.tsx
+++ b/src/components/PromoSheet/__tests__/PromoSheet.test.tsx
@@ -1,8 +1,8 @@
import React from 'react';
-import {act, render, screen} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+import {act, render, screen} from '../../../../test-utils/utils';
import {PromoSheet} from '../PromoSheet';
test('Renders base content', () => {
diff --git a/src/components/SharePopover/ShareList/ShareList.scss b/src/components/SharePopover/ShareList/ShareList.scss
index 4416933b..203a1bdc 100644
--- a/src/components/SharePopover/ShareList/ShareList.scss
+++ b/src/components/SharePopover/ShareList/ShareList.scss
@@ -25,7 +25,7 @@ $block: '.#{variables.$ns}share-list';
}
#{$block}__link + #{$block}__link {
- margin-left: 4px;
+ margin-inline-start: 4px;
}
}
&_column {
diff --git a/src/components/SharePopover/ShareList/ShareList.tsx b/src/components/SharePopover/ShareList/ShareList.tsx
index c52e78ba..56219a04 100644
--- a/src/components/SharePopover/ShareList/ShareList.tsx
+++ b/src/components/SharePopover/ShareList/ShareList.tsx
@@ -1,14 +1,14 @@
import React from 'react';
import {Link} from '@gravity-ui/icons';
-import {Button, CopyToClipboard, CopyToClipboardStatus, Icon} from '@gravity-ui/uikit';
+import {Button, CopyToClipboard, Icon} from '@gravity-ui/uikit';
import type {IconData} from '@gravity-ui/uikit';
import {block} from '../../utils/cn';
import {isOfType} from '../../utils/isOfType';
import {ShareListItem} from '../ShareListItem/ShareListItem';
import type {LayoutDirection, ShareOptions} from '../constants';
-import i18n from '../i18n';
+import {i18n} from '../i18n';
import type {ShareOptionsData} from '../models';
import './ShareList.scss';
@@ -133,7 +133,7 @@ export class ShareList extends React.PureComponent
{
+export interface StoreBadgeProps extends Omit {
/** store platform name */
platform: StoreBadgePlatform;
+ lang?: `${Lang}`;
+ onClick?: React.MouseEventHandler;
}
const badgeData: Record<
@@ -41,9 +41,10 @@ export const StoreBadge = ({
className,
onClick,
href,
+ lang = Lang.En,
...restLinkProps
}: StoreBadgeProps) => {
- const lang = i18n.lang as Lang;
+ // const lang = i18n.lang as Lang;
const iconData = badgeData?.[platform][lang];
if (!iconData) {
@@ -53,7 +54,7 @@ export const StoreBadge = ({
if (!href) {
return (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus
-
+
);
diff --git a/src/components/Stories/Stories.scss b/src/components/Stories/Stories.scss
index 29186b85..d8807848 100644
--- a/src/components/Stories/Stories.scss
+++ b/src/components/Stories/Stories.scss
@@ -1,9 +1,13 @@
@use '../variables';
$block: '.#{variables.$ns}stories';
+$borderRadius: 20px;
#{$block} {
+ --g-modal-border-radius: #{$borderRadius};
+ --g-modal-margin: 20px;
+
&__modal-content {
- border-radius: 20px;
+ border-radius: $borderRadius;
}
}
diff --git a/src/components/Stories/Stories.tsx b/src/components/Stories/Stories.tsx
index 9df8ce4b..bad2bbd8 100644
--- a/src/components/Stories/Stories.tsx
+++ b/src/components/Stories/Stories.tsx
@@ -115,6 +115,7 @@ export function Stories({
open={open}
onClose={handleClose}
disableOutsideClick={disableOutsideClick}
+ className={b()}
contentClassName={b('modal-content', className)}
>
{
{props.items.length > 1 && (
- {i18n('label_counter', {
- current: props.storyIndex + 1,
- total: props.items.length,
- })}
+
+ {props.storyIndex + 1} / {props.items.length}
+
)}
diff --git a/src/components/Stories/i18n/en.json b/src/components/Stories/i18n/en.json
index 3fb9d051..c23bb920 100644
--- a/src/components/Stories/i18n/en.json
+++ b/src/components/Stories/i18n/en.json
@@ -2,6 +2,5 @@
"label_back": "Back",
"label_next": "Next",
"label_close": "Close",
- "label_more": "More",
- "label_counter": "{{current}} of {{total}}"
+ "label_more": "More"
}
diff --git a/src/components/Stories/i18n/index.ts b/src/components/Stories/i18n/index.ts
index b43a82ff..60ce051c 100644
--- a/src/components/Stories/i18n/index.ts
+++ b/src/components/Stories/i18n/index.ts
@@ -1,8 +1,8 @@
-import {registerKeyset} from '../../utils/registerKeyset';
+import {addComponentKeysets} from '@gravity-ui/uikit/i18n';
+
+import {NAMESPACE} from '../../utils/cn';
import en from './en.json';
import ru from './ru.json';
-const COMPONENT = 'Stories';
-
-export default registerKeyset({en, ru}, COMPONENT);
+export const i18n = addComponentKeysets({en, ru}, `${NAMESPACE}stories`);
diff --git a/src/components/Stories/i18n/ru.json b/src/components/Stories/i18n/ru.json
index 1f904eb4..7c082d74 100644
--- a/src/components/Stories/i18n/ru.json
+++ b/src/components/Stories/i18n/ru.json
@@ -2,6 +2,5 @@
"label_back": "Назад",
"label_next": "Дальше",
"label_close": "Закрыть",
- "label_more": "Подробнее",
- "label_counter": "{{current}} из {{total}}"
+ "label_more": "Подробнее"
}
diff --git a/src/components/StoriesGroup/StoriesGroup.scss b/src/components/StoriesGroup/StoriesGroup.scss
index 21cd169e..7712f08c 100644
--- a/src/components/StoriesGroup/StoriesGroup.scss
+++ b/src/components/StoriesGroup/StoriesGroup.scss
@@ -1,10 +1,14 @@
@use '../variables';
$block: '.#{variables.$ns}stories-group';
+$borderRadius: 20px;
#{$block} {
+ --g-modal-border-radius: #{$borderRadius};
+ --g-modal-margin: 20px;
+
&__modal-content {
background-color: inherit;
- border-radius: 20px;
+ border-radius: $borderRadius;
}
}
diff --git a/src/components/StoriesGroup/StoriesGroup.tsx b/src/components/StoriesGroup/StoriesGroup.tsx
index 29bb43f0..27ebaee9 100644
--- a/src/components/StoriesGroup/StoriesGroup.tsx
+++ b/src/components/StoriesGroup/StoriesGroup.tsx
@@ -155,6 +155,7 @@ export const StoriesGroup = ({
open={open}
onClose={handleClose}
disableOutsideClick={disableOutsideClick}
+ className={b()}
contentClassName={b('modal-content')}
>
void;
-
-let subs: Subscriber[] = [];
-
-const config: Config = {
- lang: Lang.En,
-};
-
-export const configure = (newConfig: Partial) => {
- Object.assign(config, newConfig);
- subs.forEach((sub) => {
- sub(config);
- });
-};
-
-export const subscribeConfigure = (sub: Subscriber) => {
- subs.push(sub);
-
- return () => {
- subs = subs.filter((item) => item !== sub);
- };
-};
-
-export const getConfig = () => config;
diff --git a/src/components/utils/registerKeyset.ts b/src/components/utils/registerKeyset.ts
deleted file mode 100644
index b5d97a60..00000000
--- a/src/components/utils/registerKeyset.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {i18n} from '../../i18n';
-
-import {Lang} from './configure';
-
-type KeysData = Parameters[2];
-
-export function registerKeyset(data: Record, keysetName: string) {
- Object.entries(data).forEach(([lang, keys]) => i18n.registerKeyset(lang, keysetName, keys));
-
- return i18n.keyset(keysetName);
-}
diff --git a/src/i18n.ts b/src/i18n.ts
deleted file mode 100644
index 90f2b77a..00000000
--- a/src/i18n.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {I18N} from '@gravity-ui/i18n';
-
-import {getConfig, subscribeConfigure} from './components/utils/configure';
-
-export const i18n = new I18N();
-
-i18n.setLang(getConfig().lang);
-
-subscribeConfigure((config) => {
- i18n.setLang(config.lang);
-});
diff --git a/test-utils/setup-tests.ts b/test-utils/setup-tests.ts
index f9c06f47..0ef1710f 100644
--- a/test-utils/setup-tests.ts
+++ b/test-utils/setup-tests.ts
@@ -1,10 +1,5 @@
import {configure} from '@testing-library/dom';
-import {Lang, configure as libConfigure} from '../src';
-
-libConfigure({
- lang: Lang.En,
-});
configure({testIdAttribute: 'data-qa'});
global.ResizeObserver = class implements ResizeObserver {
diff --git a/test-utils/utils.tsx b/test-utils/utils.tsx
new file mode 100644
index 00000000..88e19518
--- /dev/null
+++ b/test-utils/utils.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import {ThemeContext} from '@gravity-ui/uikit';
+import type {ThemeContextProps} from '@gravity-ui/uikit';
+import {render} from '@testing-library/react';
+import type {RenderOptions} from '@testing-library/react';
+
+const themeContextValue: ThemeContextProps = {
+ direction: 'ltr',
+ theme: 'light',
+ themeValue: 'light',
+};
+
+function Providers({children}: {children: React.ReactElement}) {
+ return {children} ;
+}
+
+function createWrapper(Component: React.JSXElementConstructor<{children: React.ReactElement}>) {
+ return function Wrapper({children}: {children: React.ReactElement}) {
+ return (
+
+ {children}
+
+ );
+ };
+}
+
+function customRender(ui: React.ReactElement, options?: RenderOptions) {
+ const wrapper = options?.wrapper ? createWrapper(options.wrapper) : Providers;
+ return render(ui, {...options, wrapper});
+}
+
+export * from '@testing-library/react';
+export {customRender as render};