feat(selectable card): add new component

.nvmrc

@@ -1 +1 @@
-v18
+18.17.0

public/locales/en/component.json

@@ -3,7 +3,8 @@
     "title": "Components",
     "searchPlaceholder": "Search by component name",
     "color-input_validation-format-error": "Incorrect format",
-    "maintainers": "Maintainers:",
+    "maintainers_one": "Maintainer:",
+    "maintainers_other": "Maintainers:",
     "theme": "Switch theme",
     "rtlOn": "Switch RTL on",
     "rtlOff": "Switch RTL off",

public/locales/en/home.json

@@ -2,9 +2,9 @@
     "header_title": "Build modern interfaces with the Gravity design system and libraries",
     "header_actions_howToStart": "How to Start",
     "news_title": "Recent updates",
-    "news_items_item1": "We've released the <a href=\"/components/uikit/pin-input\">PinInput component</a>. You may need it to enter OTP or confirmation codes.",
-    "news_items_item2": "We added a duration module to our <a href=\"/libraries/date-utils\">date-utils library</a>. It implements the ISO 8601 standard for durations. <a href=\"https://github.com/gravity-ui/date-utils/blob/main/src/typings/duration.ts#L9\">Here</a> you can find more information about it.",
-    "news_items_item3": "We've published our <a href=\"https://www.figma.com/community/file/1363128208054017326/gravity-ui-illustrations\">illustration library</a> in Figma community.",
+    "news_items_item1": "500⭐️ for our <a href=\"/libraries/uikit\">UIKit</a>! We just wanted to say thanks for all the support and <a href=\"https://github.com/gravity-ui/uikit/issues\">feedback</a> we've been getting. There's more to come, so stay tuned!",
+    "news_items_item2": "We've released the <a href=\"/components/uikit/pin-input\">PinInput component</a>. You may need it to enter OTP or confirmation codes.",
+    "news_items_item3": "We added a duration module to our <a href=\"/libraries/date-utils\">date-utils library</a>. It implements the ISO 8601 standard for durations. <a href=\"https://github.com/gravity-ui/date-utils/blob/main/src/typings/duration.ts#L9\">Here</a> you can find more information about it.",
     "features_feature1_title": "Built on real-life experience",
     "features_feature1_description": "Conceived as an in-house solution in response to real developers' needs, we released Gravity to the open-source community.",
     "features_feature2_title": "First class design",

public/locales/ru/component.json

@@ -3,7 +3,8 @@
     "title": "Компоненты",
     "searchPlaceholder": "Поиск по названию",
     "color-input_validation-format-error": "Неверный формат",
-    "maintainers": "Maintainers:",
+    "maintainers_one": "Maintainer:",
+    "maintainers_other": "Maintainers:",
     "theme": "Переключить тему",
     "rtlOn": "Включить RTL",
     "rtlOff": "Выключить RTL",

public/locales/ru/home.json

@@ -2,9 +2,9 @@
     "header_title": "Создавайте современные интерфейсы с дизайн‑системой Gravity",
     "header_actions_howToStart": "С чего начать",
     "news_title": "Новости",
-    "news_items_item1": "Мы выложили <a href=\"/components/uikit/pin-input\">компонент PinInput</a>. Он может пригодиться для ввода OTP кодов или подтверждений.",
-    "news_items_item2": "Мы добавили модуль duration в <a href=\"/libraries/date-utils\">библиотеку date-utils</a>. Он реализует стандарт ISO 8601 для временных интервалов. <a href=\"https://github.com/gravity-ui/date-utils/blob/main/src/typings/duration.ts#L9\">Тут</a> об этом можно почитать подробнее.",
-    "news_items_item3": "Мы опубликовали <a href=\"https://www.figma.com/community/file/1363128208054017326/gravity-ui-illustrations\">библиотеку иллюстраций</a> в Figma community.",
+    "news_items_item1": "500⭐️ у <a href=\"/libraries/uikit\">UIKit</a>! Просто хотим поблагодарить вас за поддержку и <a href=\"https://github.com/gravity-ui/uikit/issues\">идеи</a>. Впереди много нового, продолжайте следить за проектом!",
+    "news_items_item2": "Мы выложили <a href=\"/components/uikit/pin-input\">компонент PinInput</a>. Он может пригодиться для ввода OTP кодов или подтверждений.",
+    "news_items_item3": "Мы добавили модуль duration в <a href=\"/libraries/date-utils\">библиотеку date-utils</a>. Он реализует стандарт ISO 8601 для временных интервалов. <a href=\"https://github.com/gravity-ui/date-utils/blob/main/src/typings/duration.ts#L9\">Тут</a> об этом можно почитать подробнее.",
     "features_feature1_title": "Основано на реальном опыте использования",
     "features_feature1_description": "Внутреннее решение в ответ на реальные потребности разработчиков: мы выпустили Gravity для open-source сообщества.",
     "features_feature2_title": "Отличный дизайн",

src/components/HeaderMaintainerList/HeaderMaintainerList.tsx

@@ -18,7 +18,9 @@ export const HeaderMaintainerList: React.FC<HeaderMaintainerListProps> = ({maint
 
     return (
         <div className={b()}>
-            <span className={b('title')}>{t('component:maintainers')}</span>
+            <span className={b('title')}>
+                {t('component:maintainers', {count: limitedMaintainers.length})}
+            </span>
             {limitedMaintainers.map(({login, avatarUrl, url}) => (
                 <Link
                     className={b('maintainer')}

src/components/NavigationLayout/SectionBlock/SectionBlock.scss

@@ -74,7 +74,7 @@ $block: '.#{variables.$ns}navigation-layout-section-block';
         }
 
         &:hover {
-            background: #251b25;
+            background: var(--g-color-base-generic-hover);
         }
 
         &_active {

src/components/SelectableCard/SelectableCard.scss

@@ -0,0 +1,33 @@
+@use '../../variables.scss';
+
+$block: '.#{variables.$ns}selectable-card';
+
+#{$block} {
+    position: relative;
+    display: flex;
+    padding: 26px;
+    height: 80px;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    &__icon {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        color: var(--g-color-base-brand);
+    }
+
+    &__fake-button {
+        width: 69px;
+        height: 28px;
+        background-color: var(--g-color-base-brand);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        user-select: none;
+        user-select: none;
+        user-select: none;
+        user-select: none;
+    }
+}

src/components/SelectableCard/SelectableCard.tsx

@@ -0,0 +1,68 @@
+import {CircleCheckFill} from '@gravity-ui/icons';
+import {Card, type CardProps, DOMProps, Text, TextProps} from '@gravity-ui/uikit';
+import React from 'react';
+
+import {block} from '../../utils';
+
+import './SelectableCard.scss';
+
+const b = block('selectable-card');
+
+export type SelecableCardProps = {
+    /**
+     * Text to display inside
+     */
+    text: string;
+    /**
+     * Flag to show only text without decoration
+     */
+    pureText?: boolean;
+    /**
+     * Props for inner Text component
+     */
+    textProps?: TextProps;
+    /**
+     * Style object to customize decorated text. Has an impact when pureText has falsie values
+     */
+    contentStyle?: React.CSSProperties;
+} & Pick<CardProps, 'selected' | 'onClick'> &
+    Pick<DOMProps, 'className'>;
+
+const CardContent = ({
+    text,
+    pureText,
+    textProps,
+    contentStyle,
+}: Pick<SelecableCardProps, 'text' | 'pureText' | 'textProps' | 'contentStyle'>) => {
+    const props: Record<string, unknown> = pureText
+        ? {variant: 'body-2'}
+        : {color: 'inverted-primary', className: b('fake-button')};
+    props.style = contentStyle;
+    return (
+        <Text {...props} {...textProps}>
+            {text}
+        </Text>
+    );
+};
+
+export const SelectableCard = ({
+    selected,
+    pureText,
+    text,
+    onClick,
+    className,
+    textProps,
+    contentStyle,
+}: SelecableCardProps) => {
+    return (
+        <Card className={b(null, className)} type="selection" selected={selected} onClick={onClick}>
+            <CardContent
+                text={text}
+                pureText={pureText}
+                textProps={textProps}
+                contentStyle={contentStyle}
+            />
+            {selected && <CircleCheckFill className={b('icon')} />}
+        </Card>
+    );
+};

src/content/components/uikit/TextInput/TextInputComponent.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 export const TextInputComponent = (props: TextInputProps) => {
     return (
-        <div style={{width: '100%', maxWidth: 300}}>
+        <div style={{width: '100%', maxWidth: 300, lineHeight: 0}}>
             <TextInput {...props} />
         </div>
     );

src/content/landing.ts

@@ -68,15 +68,15 @@ export const getLanding = (t: TFunction): CustomPageContent => ({
                 title: t('home:news_title'),
                 items: [
                     {
-                        date: '2024-06-13T14:30:00.000Z',
+                        date: '2024-06-27T07:00:00.000Z',
                         content: t('home:news_items_item1'),
                     },
                     {
-                        date: '2024-05-03T14:00:00.000Z',
+                        date: '2024-06-13T14:30:00.000Z',
                         content: t('home:news_items_item2'),
                     },
                     {
-                        date: '2024-04-22T12:00:00.000Z',
+                        date: '2024-05-03T14:00:00.000Z',
                         content: t('home:news_items_item3'),
                     },
                 ],