fixup! 7cf1387

V3.md

@@ -1,9 +1,17 @@
 ## Breaking
 
 - Update to `@gravity-ui/uilit@5`
-- Remove peer dependency on `@doc-tools/transform`
+- Remove peer dependency on `@doc-tools/transform` <br>
   `@doc-tools/transform` js and css bundles should be attached directly to final projects
 - `DISLIKE_VARIANTS` not exported from package. Use `i18n['feedback-variants']` instead.
+- Prop `lang` war removed from component. Now you should use `configure` helper
+  ```js
+  import {configure} from '@doc-tools/components';
+
+  configure({
+    lang: 'ru'
+  })
+  ```
 
 
 ### BookmarkButton
@@ -18,6 +26,15 @@
 
 ### Controls
 - Removed `lang` prop
+- Removed `isVerticalView`, `controlSize`, `popupPosition` prop. Configure it with `ControlsLayout` wrapper component
+  ```jsx
+  <ControlsLayout
+    isVerticalView={isVerticalView}
+    controlSize={controlSize}
+  >
+    <Controls />
+  </ControlsLayout>
+  ```
 - Prop `showEditControl` replaced by `hideEditControl`
 
 ### DividerControl
@@ -79,9 +96,26 @@
 - Removed `lang` prop
 - Removed `singlePage` prop
 - Removed `size`, `isVerticalView`, `className`, `popupPosition` props
+- Removed `dislikeVariants` prop. Variants should be configured via `configure` util
+  ```js
+  configure({
+    loc: {
+      en: {
+        'feedback-variants': {
+          'variant1': 'test1'
+        }
+      },
+      ru: {
+        'feedback-variants': {
+          'variant1': 'текс1'
+        }
+      }
+    }
+  })
+  ```
 - Values for `size`, `isVerticalView`, `popupPosition` now stored in `ControlsLayoutContext`
 - Value for `className` now stored in `ControlsLayoutContext.controlClassName` prop
-- Pick `dislikeVariants` from i18n by default
+
 - Icons replaced with equal from `@gravity-ui/uikit`
 
 ### MiniToc

src/components/Controls/Controls.scss

@@ -34,6 +34,10 @@
         margin-left: 8px;
     }
 
+    &__icon-rotated {
+        transform: rotate(90deg);
+    }
+
     @media (min-width: map-get($screenBreakpoints, 'md')) {
         right: 0;
 

src/components/Controls/Controls.tsx

@@ -1,13 +1,12 @@
-import React, {memo} from 'react';
+import React, {memo, useContext} from 'react';
 
 import block from 'bem-cn-lite';
 
-import {PopperPosition} from '../../hooks';
-import {ControlSizes, FeedbackSendData, Lang, SubscribeData, TextSizes, Theme} from '../../models';
+import {FeedbackSendData, Lang, SubscribeData, TextSizes, Theme} from '../../models';
 import {Feedback, FeedbackView} from '../Feedback';
 import {Subscribe, SubscribeView} from '../Subscribe';
 
-import {CommonPropsContext} from './contexts';
+import {ControlsLayoutContext} from './ControlsLayout';
 
 import {
     DividerControl,
@@ -34,10 +33,8 @@ export interface ControlsProps {
     textSize?: TextSizes;
     vcsUrl?: string;
     vcsType?: string;
-    hideEditControl?: boolean;
     isLiked?: boolean;
     isDisliked?: boolean;
-    dislikeVariants?: string[];
     onChangeLang?: (lang: Lang) => void;
     onChangeFullScreen?: (value: boolean) => void;
     onChangeSinglePage?: (value: boolean) => void;
@@ -49,17 +46,16 @@ export interface ControlsProps {
     onSubscribe?: (data: SubscribeData) => void;
     pdfLink?: string;
     className?: string;
-    isVerticalView?: boolean;
-    controlSize?: ControlSizes;
+    hideEditControl?: boolean;
     hideFeedbackControls?: boolean;
-    popupPosition?: PopperPosition;
 }
 
 type Defined = {
     [P in keyof ControlsProps]-?: ControlsProps[P];
 };
 
 const Controls = memo<ControlsProps>((props) => {
+    const {isVerticalView} = useContext(ControlsLayoutContext);
     const {
         className,
         fullScreen,
@@ -79,17 +75,13 @@ const Controls = memo<ControlsProps>((props) => {
         onChangeSinglePage,
         onSendFeedback,
         onSubscribe,
-        isVerticalView = false,
-        controlSize = ControlSizes.M,
-        popupPosition,
         lang,
         langs,
         pdfLink,
         vcsUrl,
         vcsType,
         isLiked,
         isDisliked,
-        dislikeVariants,
     } = props;
 
     const withFullscreenControl = Boolean(onChangeFullScreen);
@@ -154,7 +146,6 @@ const Controls = memo<ControlsProps>((props) => {
                 key="feedback-control"
                 isLiked={isLiked}
                 isDisliked={isDisliked}
-                dislikeVariants={dislikeVariants}
                 onSendFeedback={onSendFeedback as Defined['onSendFeedback']}
                 view={FeedbackView.Regular}
             />
@@ -184,16 +175,7 @@ const Controls = memo<ControlsProps>((props) => {
         }, [] as React.ReactElement[]);
 
     return (
-        <CommonPropsContext.Provider
-            value={{
-                controlClassName: b('control'),
-                isVerticalView: isVerticalView,
-                controlSize: controlSize,
-                popupPosition: popupPosition,
-            }}
-        >
-            <div className={b({vertical: isVerticalView}, className)}>{controls}</div>
-        </CommonPropsContext.Provider>
+        <div className={b({vertical: isVerticalView}, className)}>{controls}</div>
     );
 });
 

src/components/Controls/ControlsLayout.tsx

@@ -0,0 +1,43 @@
+import React, {PropsWithChildren, createContext} from 'react';
+
+import block from 'bem-cn-lite';
+
+import {PopperPosition} from '../../hooks';
+import {ControlSizes} from '../../models';
+
+type ControlsLayoutProps = {
+    isVerticalView?: boolean;
+    controlClassName?: string;
+    controlSize?: ControlSizes;
+    popupPosition?: PopperPosition;
+};
+
+export const ControlsLayoutContext = createContext<ControlsLayoutProps>({
+    controlClassName: '',
+    isVerticalView: false,
+    controlSize: ControlSizes.M,
+    popupPosition: PopperPosition.BOTTOM_END,
+});
+
+const b = block('dc-controls');
+
+export const ControlsLayout: React.FC<PropsWithChildren<ControlsLayoutProps>> = ({
+    isVerticalView,
+    controlClassName,
+    controlSize,
+    popupPosition,
+    children,
+}) => {
+    return (
+        <ControlsLayoutContext.Provider
+            value={{
+                controlClassName: controlClassName || b('control'),
+                isVerticalView: isVerticalView,
+                controlSize: controlSize,
+                popupPosition: popupPosition,
+            }}
+        >
+            {children}
+        </ControlsLayoutContext.Provider>
+    );
+};

src/components/Controls/index.ts

@@ -1,3 +1,4 @@
 export * from './Controls';
 export {default as Controls} from './Controls';
 export * from './single-controls';
+export {ControlsLayout} from './ControlsLayout';

src/components/Controls/single-controls/DividerControl/DividerControl.tsx

@@ -2,9 +2,8 @@ import React, {useContext} from 'react';
 
 import cn from 'bem-cn-lite';
 
-import {CommonPropsContext} from '../../contexts';
-
 import './DividerControl.scss';
+import {ControlsLayoutContext} from '../../ControlsLayout';
 
 const b = cn('dc-divider-control');
 
@@ -13,7 +12,7 @@ interface DividerControlProps {
 }
 
 const DividerControl: React.FC<DividerControlProps> = ({className}) => {
-    const {isVerticalView, controlSize} = useContext(CommonPropsContext);
+    const {isVerticalView, controlSize} = useContext(ControlsLayoutContext);
 
     return <div className={b({size: controlSize, vertical: !isVerticalView}, className)} />;
 };

src/components/Controls/single-controls/EditControl.tsx

@@ -5,9 +5,9 @@ import block from 'bem-cn-lite';
 
 import {useTranslation} from '../../../hooks';
 import {Control} from '../../Control';
-import {CommonPropsContext} from '../contexts';
 
 import EditIcon from '@gravity-ui/icons/svgs/pencil.svg';
+import {ControlsLayoutContext} from '../ControlsLayout';
 
 interface EditControlProps {
     vcsUrl: string;
@@ -21,7 +21,7 @@ const b = block('dc-controls');
 const EditControl = memo<EditControlProps>(({vcsUrl, vcsType = 'github', view, className}) => {
     const {t} = useTranslation('controls');
     const {controlClassName, controlSize, isVerticalView, popupPosition} =
-        useContext(CommonPropsContext);
+        useContext(ControlsLayoutContext);
 
     if (view === 'wide') {
         return (

src/components/Controls/single-controls/FullScreenControl.tsx

@@ -4,10 +4,10 @@ import {Icon} from '@gravity-ui/uikit';
 
 import {useTranslation} from '../../../hooks';
 import {Control} from '../../Control';
-import {CommonPropsContext} from '../contexts';
 
 import FullScreenClickedIcon from '@gravity-ui/icons/svgs/square-dashed-circle.svg';
 import FullScreenIcon from '@gravity-ui/icons/svgs/square-dashed.svg';
+import {ControlsLayoutContext} from '../ControlsLayout';
 
 interface ControlProps {
     value?: boolean;
@@ -17,7 +17,7 @@ interface ControlProps {
 const FullScreenControl = memo<ControlProps>((props) => {
     const {t} = useTranslation('controls');
     const {controlClassName, controlSize, isVerticalView, popupPosition} =
-        useContext(CommonPropsContext);
+        useContext(ControlsLayoutContext);
     const {value, onChange} = props;
 
     const onClick = useCallback(() => {

src/components/Controls/single-controls/LangControl.tsx

@@ -7,13 +7,13 @@ import allLangs from 'langs';
 import {usePopupState, useTranslation} from '../../../hooks';
 import {Lang} from '../../../models';
 import {Control} from '../../Control';
-import {CommonPropsContext} from '../contexts';
 
 import {getPopupPosition} from './utils';
 
 import LangIcon from '@gravity-ui/icons/svgs/globe.svg';
 
 import '../Controls.scss';
+import {ControlsLayoutContext} from '../ControlsLayout';
 
 const ICONS: Record<string, string> = {
     en: '🇬🇧',
@@ -44,7 +44,7 @@ const LIST_ITEM_HEIGHT = 36;
 const LangControl = (props: ControlProps) => {
     const {t} = useTranslation('controls');
     const {controlClassName, controlSize, isVerticalView, popupPosition} =
-        useContext(CommonPropsContext);
+        useContext(ControlsLayoutContext);
     const {lang, langs = DEFAULT_LANGS, onChangeLang} = props;
 
     const controlRef = useRef<HTMLButtonElement | null>(null);
@@ -70,7 +70,8 @@ const LangControl = (props: ControlProps) => {
     const renderItem = useCallback((item: ListItem) => {
         return (
             <div className={b('lang-item')}>
-                <div className={b('list-icon')}>{item.icon}</div> {item.text}
+                <div className={b('list-icon')}>{item.icon}</div>
+                {item.text}
             </div>
         );
     }, []);

src/components/Controls/single-controls/PdfControl.tsx

@@ -4,9 +4,9 @@ import {Icon} from '@gravity-ui/uikit';
 
 import {useTranslation} from '../../../hooks';
 import {Control} from '../../Control';
-import {CommonPropsContext} from '../contexts';
 
 import PdfIcon from '../../../../assets/icons/pdf.svg';
+import {ControlsLayoutContext} from '../ControlsLayout';
 
 interface ControlProps {
     pdfLink: string;
@@ -15,7 +15,7 @@ interface ControlProps {
 const PdfControl = memo<ControlProps>((props) => {
     const {t} = useTranslation('controls');
     const {controlClassName, controlSize, isVerticalView, popupPosition} =
-        useContext(CommonPropsContext);
+        useContext(ControlsLayoutContext);
     const {pdfLink} = props;
 
     return (

src/components/Controls/single-controls/SettingsControl/SettingsControl.tsx

@@ -6,12 +6,12 @@ import cn from 'bem-cn-lite';
 import {useTranslation} from '../../../../hooks';
 import {TextSizes, Theme} from '../../../../models';
 import {Control} from '../../../Control';
-import {CommonPropsContext} from '../../contexts';
 import {getPopupPosition} from '../utils';
 
 import SettingsIcon from '@gravity-ui/icons/svgs/gear.svg';
 
 import './SettingsControl.scss';
+import {ControlsLayoutContext} from '../../ControlsLayout';
 
 const ITEM_HEIGHT = 48;
 const b = cn('dc-settings-control');
@@ -38,7 +38,7 @@ interface SettingControlItem {
 const SettingsControl = (props: ControlProps) => {
     const {t} = useTranslation('controls');
     const {controlClassName, controlSize, isVerticalView, popupPosition} =
-        useContext(CommonPropsContext);
+        useContext(ControlsLayoutContext);
     const {
         textSize,
         theme,
@@ -57,11 +57,13 @@ const SettingsControl = (props: ControlProps) => {
     const showPopup = () => setIsVisiblePopup(true);
     const hidePopup = () => setIsVisiblePopup(false);
 
-    const _onChangeTextSize = useCallback((textSizeKey: TextSizes) => () => {
+    const _onChangeTextSize = useCallback(
+        (textSizeKey: TextSizes) => () => {
             if (onChangeTextSize) {
                 onChangeTextSize(textSizeKey);
             }
-        }, [onChangeTextSize],
+        },
+        [onChangeTextSize],
     );
     const _onChangeTheme = useCallback(() => {
         if (onChangeTheme) {