refactor!: rename .yc class prefix (#1260)

.storybook/theme-addon/register.tsx

@@ -7,7 +7,7 @@ import type {API} from '@storybook/api';
 import {getThemeType} from '../../src/components/theme/getThemeType';
 import {themes} from '../theme';
 
-const ADDON_ID = 'yc-theme-addon';
+const ADDON_ID = 'g-theme-addon';
 const TOOL_ID = `${ADDON_ID}tool`;
 
 addons.register(ADDON_ID, (api) => {

src/components/Alert/Alert.test.tsx

@@ -6,6 +6,7 @@ import {render, screen} from '../../../test-utils/utils';
 import {Flex} from '../layout';
 
 import {Alert} from './Alert';
+import {bAlert} from './constants';
 import type {AlertTheme} from './types';
 
 const title = 'Where will you go, hero?';
@@ -80,7 +81,7 @@ describe('Alert', () => {
             );
 
             // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-            const icon = await container.querySelector('.yc-alert__icon');
+            const icon = await container.querySelector(`.${bAlert('icon')}`);
 
             expect(icon).toBeInTheDocument();
         },
@@ -90,7 +91,7 @@ describe('Alert', () => {
         const {container} = render(<Alert title={title} message={message} onClose={jest.fn()} />);
 
         // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-        const icon = await container.querySelector('.yc-alert__icon');
+        const icon = await container.querySelector(`.${bAlert('icon')}`);
 
         expect(icon).not.toBeInTheDocument();
     });

src/components/Alert/__snapshots__/Alert.test.tsx.snap

@@ -3,18 +3,18 @@
 exports[`Alert has predicted styles if inline layout rendered 1`] = `
 <div>
   <div
-    class="yc-box yc-card yc-card_theme_danger yc-card_view_filled yc-card_type_container yc-card_size_m yc-alert yc-s__py_4 yc-s__px_5"
+    class="g-box g-card g-card_theme_danger g-card_view_filled g-card_type_container g-card_size_m g-alert g-s__py_4 g-s__px_5"
   >
     <div
-      class="yc-box yc-flex"
+      class="g-box g-flex"
       style="column-gap: 12px; row-gap: 12px; align-items: center;"
     >
       <div
-        class="yc-alert__icon yc-color-text yc-color-text_color_danger"
+        class="g-alert__icon g-color-text g-color-text_color_danger"
       >
         <svg
           aria-hidden="true"
-          class="yc-icon"
+          class="g-icon"
           fill="currentColor"
           height="18"
           stroke="none"
@@ -37,53 +37,53 @@ exports[`Alert has predicted styles if inline layout rendered 1`] = `
         </svg>
       </div>
       <div
-        class="yc-box yc-flex"
+        class="g-box g-flex"
         style="flex-direction: row; flex-grow: 1; column-gap: 20px; row-gap: 20px;"
       >
         <div
-          class="yc-box yc-flex yc-alert__text-content"
+          class="g-box g-flex g-alert__text-content"
           style="flex-grow: 1; column-gap: 8px; row-gap: 8px;"
         >
           <div
-            class="yc-box yc-flex"
+            class="g-box g-flex"
             style="flex-direction: column; flex-grow: 1; column-gap: 4px; row-gap: 4px; justify-content: center;"
           >
             <span
-              class="yc-text yc-text_variant_subheader-2 yc-alert__title"
+              class="g-text g-text_variant_subheader-2 g-alert__title"
             >
               Where will you go, hero?
             </span>
           </div>
         </div>
         <div
-          class="yc-box yc-flex yc-alert__actions yc-alert__actions_minContent"
+          class="g-box g-flex g-alert__actions g-alert__actions_minContent"
           style="flex-direction: row; flex-wrap: wrap; column-gap: 12px; row-gap: 12px; align-items: center;"
         >
           <button
-            class="yc-button yc-button_view_normal yc-button_size_m yc-button_pin_round-round"
+            class="g-button g-button_view_normal g-button_size_m g-button_pin_round-round"
             type="button"
           >
             <span
-              class="yc-button__text"
+              class="g-button__text"
             >
               To the right (lose the horse)
             </span>
           </button>
         </div>
       </div>
       <button
-        class="yc-button yc-button_view_flat yc-button_size_m yc-button_pin_round-round"
+        class="g-button g-button_view_flat g-button_size_m g-button_pin_round-round"
         type="button"
       >
         <span
-          class="yc-button__icon"
+          class="g-button__icon"
         >
           <span
-            class="yc-button__icon-inner"
+            class="g-button__icon-inner"
           >
             <svg
               aria-hidden="true"
-              class="yc-icon yc-color-text yc-color-text_color_secondary"
+              class="g-icon g-color-text g-color-text_color_secondary"
               fill="currentColor"
               height="18"
               stroke="none"

src/components/Avatar/Avatar.scss

@@ -1,6 +1,6 @@
 @use '../variables';
 
-$block: '.#{variables.$ns-new}avatar';
+$block: '.#{variables.$ns}avatar';
 
 #{$block} {
     --_--size: 32px;

src/components/Avatar/Avatar.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {blockNew} from '../utils/cn';
+import {block} from '../utils/cn';
 
 import {AvatarIcon} from './AvatarIcon';
 import {AvatarImage} from './AvatarImage';
@@ -9,7 +9,7 @@ import type {AvatarProps} from './types/main';
 
 import './Avatar.scss';
 
-const b = blockNew('avatar');
+const b = block('avatar');
 
 export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>((props, ref) => {
     const {

src/components/Button/__tests__/Button.test.tsx

@@ -57,22 +57,22 @@ describe('Button', () => {
             render(<Button size={size} qa={qaId} />);
             const button = screen.getByTestId(qaId);
 
-            expect(button).toHaveClass(`yc-button_size_${size}`);
+            expect(button).toHaveClass(`g-button_size_${size}`);
         },
     );
 
     test.each(new Array<ButtonView>(...buttonViews))('render with given "%s" view', (view) => {
         render(<Button view={view} qa={qaId} />);
         const button = screen.getByTestId(qaId);
 
-        expect(button).toHaveClass(`yc-button_view_${view}`);
+        expect(button).toHaveClass(`g-button_view_${view}`);
     });
 
     test.each(new Array<ButtonPin>(...buttonPins))('render with given "%s" pin', (pin) => {
         render(<Button pin={pin} qa={qaId} />);
         const button = screen.getByTestId(qaId);
 
-        expect(button).toHaveClass(`yc-button_pin_${pin}`);
+        expect(button).toHaveClass(`g-button_pin_${pin}`);
     });
 
     test.each(new Array<'button' | 'submit' | 'reset'>('button', 'submit', 'reset'))(
@@ -143,7 +143,7 @@ describe('Button', () => {
         const button = screen.getByRole('button');
 
         expect(button).toBeVisible();
-        expect(button).toHaveClass('yc-button_selected');
+        expect(button).toHaveClass('g-button_selected');
     });
 
     test('should render <a /> tag', () => {
@@ -163,23 +163,23 @@ describe('Button', () => {
         const button = screen.getByRole('button');
 
         expect(button).toBeVisible();
-        expect(button).not.toHaveClass('yc-button_selected');
+        expect(button).not.toHaveClass('g-button_selected');
     });
 
     test('loading when loading=true prop is given', () => {
         render(<Button loading />);
         const button = screen.getByRole('button');
 
         expect(button).toBeVisible();
-        expect(button).toHaveClass('yc-button_loading');
+        expect(button).toHaveClass('g-button_loading');
     });
 
     test('not loading when loading=false prop is given', () => {
         render(<Button loading={false} />);
         const button = screen.getByRole('button');
 
         expect(button).toBeVisible();
-        expect(button).not.toHaveClass('yc-button_loading');
+        expect(button).not.toHaveClass('g-button_loading');
     });
 
     test('disabled when disabled=true prop is given', () => {

src/components/Card/__tests__/Card.test.tsx

@@ -34,7 +34,7 @@ describe('Card', () => {
         );
         const card = screen.getByTestId(qaId);
 
-        expect(card).toHaveClass(`yc-card_theme_${theme}`);
+        expect(card).toHaveClass(`g-card_theme_${theme}`);
     });
 
     test.each(cardSizes)('render with given "%s" size', (size) => {
@@ -45,7 +45,7 @@ describe('Card', () => {
         );
         const card = screen.getByTestId(qaId);
 
-        expect(card).toHaveClass(`yc-card_size_${size}`);
+        expect(card).toHaveClass(`g-card_size_${size}`);
     });
 
     test.each(cardViews)('render with given "%s" view', (view) => {
@@ -56,7 +56,7 @@ describe('Card', () => {
         );
         const card = screen.getByTestId(qaId);
 
-        expect(card).toHaveClass(`yc-card_view_${view}`);
+        expect(card).toHaveClass(`g-card_view_${view}`);
     });
 
     test.each(cardTypes)('render with given "%s" type', (type) => {
@@ -67,7 +67,7 @@ describe('Card', () => {
         );
         const card = screen.getByTestId(qaId);
 
-        expect(card).toHaveClass(`yc-card_type_${type}`);
+        expect(card).toHaveClass(`g-card_type_${type}`);
     });
 
     test('selected when selected=true prop is given', () => {
@@ -79,7 +79,7 @@ describe('Card', () => {
         const card = screen.getByText(cardText);
 
         expect(card).toBeVisible();
-        expect(card).toHaveClass('yc-card_selected');
+        expect(card).toHaveClass('g-card_selected');
     });
 
     test('not selected when selected=false prop is given', () => {
@@ -91,7 +91,7 @@ describe('Card', () => {
         const card = screen.getByText(cardText);
 
         expect(card).toBeVisible();
-        expect(card).not.toHaveClass('yc-card_selected');
+        expect(card).not.toHaveClass('g-card_selected');
     });
 
     test('disabled when disabled=true prop is given', () => {
@@ -102,7 +102,7 @@ describe('Card', () => {
         );
         const card = screen.getByText(cardText);
 
-        expect(card).toHaveClass('yc-card_disabled');
+        expect(card).toHaveClass('g-card_disabled');
     });
 
     test('not disabled when disabled=false prop is given', () => {
@@ -113,7 +113,7 @@ describe('Card', () => {
         );
         const card = screen.getByText(cardText);
 
-        expect(card).not.toHaveClass('yc-card_disabled');
+        expect(card).not.toHaveClass('g-card_disabled');
     });
 
     test('show given content', () => {

src/components/Checkbox/__tests__/Checkbox.test.tsx

@@ -22,7 +22,7 @@ describe('Checkbox', () => {
         render(<Checkbox size={size} qa={qaId} />);
         const component = screen.getByTestId(qaId);
 
-        expect(component).toHaveClass(`yc-checkbox_size_${size}`);
+        expect(component).toHaveClass(`g-checkbox_size_${size}`);
     });
 
     test('disabled when disabled=true prop is given', () => {

src/components/Disclosure/Disclosure.scss

@@ -1,7 +1,7 @@
 @use '../variables';
 @use '../../../styles/mixins';
 
-$block: '.#{variables.$ns-new}disclosure';
+$block: '.#{variables.$ns}disclosure';
 $gap: 8px;
 
 #{$block} {

src/components/Disclosure/cn.ts

@@ -1,3 +1,3 @@
-import {blockNew} from '../utils/cn';
+import {block} from '../utils/cn';
 
-export const b = blockNew('disclosure');
+export const b = block('disclosure');

src/components/DropdownMenu/__stories__/DropdownMenu.stories.scss

@@ -1,14 +1,6 @@
 .dropdown-menu-stories {
     &__label-switcher-menu {
         width: 150px;
-
-        .yc-menu__list-item:nth-child(even) {
-            background-color: var(--g-color-base-generic);
-        }
-
-        .yc-menu__list-item:hover {
-            background-color: var(--g-color-base-selection);
-        }
     }
 
     &__label-switcher-switcher {