From e8bf6cc2a4909c0764d136ba64c3df17164d3f9a Mon Sep 17 00:00:00 2001 From: Andrew Shubnikov Date: Tue, 7 May 2024 16:10:51 +0300 Subject: [PATCH 1/8] DATAUI-2207: add github stars to landing --- public/locales/en/home.json | 68 +++++++++--------- public/locales/ru/home.json | 68 +++++++++--------- .../GithubStarsPromotion.scss | 71 +++++++++++++++++++ .../GithubStarsPromotion.tsx | 32 +++++++++ src/components/Landing/Landing.tsx | 28 ++++---- src/components/Layout/Layout.scss | 1 + 6 files changed, 190 insertions(+), 78 deletions(-) create mode 100644 src/components/GithubStarsPromotion/GithubStarsPromotion.scss create mode 100644 src/components/GithubStarsPromotion/GithubStarsPromotion.tsx diff --git a/public/locales/en/home.json b/public/locales/en/home.json index 5b3eee9395b..07c2b4e5a1e 100644 --- a/public/locales/en/home.json +++ b/public/locales/en/home.json @@ -1,35 +1,37 @@ { - "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 added a duration module to our date-utils library. It implements the ISO 8601 standard for durations. Here you can find more information about it.", - "news_items_item2": "We've published our illustration library in Figma community.", - "news_items_item3": "We've added two new components: Palette, which allows you to display a grid of icons and emojis, and Divider, which simply divides things.", - "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", - "features_feature2_description": "Experienced designers curate the look of our libraries, ensuring that components are stylish and consistent, with support for dark mode and high-contrast themes.", - "features_feature3_title": "An evolving ecosystem", - "features_feature3_description": "Regular feedback from our community of developers allows us to continuously improve our libraries, and break compatibility only when necessary.", - "examples_title": "Examples", - "examples_colors_yellow": "Yellow", - "examples_colors_red": "Red", - "examples_colors_green": "Green", - "examples_colors_blue": "Blue", - "libraries_title": "Our libraries", - "libraries_actions_allLibraries": "All libraries", - "roadmap_title": "Roadmap 2024", - "roadmap_items_item1": "Date Components: new library for working with date and time", - "roadmap_items_item2": "UIKit: Right-to-left languages support", - "roadmap_items_item3": "UIKit: improvements in digital accessibility", - "roadmap_items_item4": "Figma: color theme template builder", - "roadmap_items_item5": "Development farm", - "roadmap_items_item6": "Docs: Date Components in Components section", - "roadmap_items_item7": "UIKit: emoji picker, color picker, label input and range input components", - "roadmap_items_item8": "UIKit: migration to Floating UI", - "roadmap_items_item9": "Docs: Page constructor in Components section", - "roadmap_items_item10": "UIKit: extended mobile support", - "roadmap_items_item11": "Page constructor: footer block", - "templates_title": "Start creating with Gravity UI", - "companies_title": "Trusted by" + "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 added a duration module to our date-utils library. It implements the ISO 8601 standard for durations. Here you can find more information about it.", + "news_items_item2": "We've published our illustration library in Figma community.", + "news_items_item3": "We've added two new components: Palette, which allows you to display a grid of icons and emojis, and Divider, which simply divides things.", + "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", + "features_feature2_description": "Experienced designers curate the look of our libraries, ensuring that components are stylish and consistent, with support for dark mode and high-contrast themes.", + "features_feature3_title": "An evolving ecosystem", + "features_feature3_description": "Regular feedback from our community of developers allows us to continuously improve our libraries, and break compatibility only when necessary.", + "examples_title": "Examples", + "examples_colors_yellow": "Yellow", + "examples_colors_red": "Red", + "examples_colors_green": "Green", + "examples_colors_blue": "Blue", + "libraries_title": "Our libraries", + "libraries_actions_allLibraries": "All libraries", + "roadmap_title": "Roadmap 2024", + "roadmap_items_item1": "Date Components: new library for working with date and time", + "roadmap_items_item2": "UIKit: Right-to-left languages support", + "roadmap_items_item3": "UIKit: improvements in digital accessibility", + "roadmap_items_item4": "Figma: color theme template builder", + "roadmap_items_item5": "Development farm", + "roadmap_items_item6": "Docs: Date Components in Components section", + "roadmap_items_item7": "UIKit: emoji picker, color picker, label input and range input components", + "roadmap_items_item8": "UIKit: migration to Floating UI", + "roadmap_items_item9": "Docs: Page constructor in Components section", + "roadmap_items_item10": "UIKit: extended mobile support", + "roadmap_items_item11": "Page constructor: footer block", + "templates_title": "Start creating with Gravity UI", + "companies_title": "Trusted by", + "github_stars-text": "Do you ️💖 Gravity UI? Give us a ⭐ on Github", + "github_stars-button": "Star" } diff --git a/public/locales/ru/home.json b/public/locales/ru/home.json index d4b117379e9..bed8cd523ba 100644 --- a/public/locales/ru/home.json +++ b/public/locales/ru/home.json @@ -1,35 +1,37 @@ { - "header_title": "Создавайте современные интерфейсы с дизайн‑системой Gravity", - "header_actions_howToStart": "С чего начать", - "news_title": "Новости", - "news_items_item1": "Мы добавили модуль duration в библиотеку date-utils. Он реализует стандарт ISO 8601 для временных интервалов. Тут об этом можно почитать подробнее.", - "news_items_item2": "Мы опубликовали библиотеку иллюстраций в Figma community.", - "news_items_item3": "Мы добавили два новых компонента: Palette, который помогает отображать эмодзи или иконки и Divider, он поможет везде, где нужен разделитель.", - "features_feature1_title": "Основано на реальном опыте использования", - "features_feature1_description": "Внутреннее решение в ответ на реальные потребности разработчиков: мы выпустили Gravity для open-source сообщества.", - "features_feature2_title": "Отличный дизайн", - "features_feature2_description": "Опытные дизайнеры следят за оформлением библиотек, обеспечивая грамотный стиль и единообразие компонентов, а также поддержку темного режима и высококонтрастных тем.", - "features_feature3_title": "Развивающаяся экосистема", - "features_feature3_description": "Регулярная обратная связь от сообщества разработчиков позволяет нам постоянно улучшать библиотеки и избегать нарушения совместимости (кроме случаев крайней необходимости).", - "examples_title": "Примеры", - "examples_colors_yellow": "Жёлтый", - "examples_colors_red": "Красный", - "examples_colors_green": "Зелёный", - "examples_colors_blue": "Синий", - "libraries_title": "Наши библиотеки", - "libraries_actions_allLibraries": "Все библиотеки", - "roadmap_title": "Roadmap 2024", - "roadmap_items_item1": "Date Components: новая библиотека для работы с датами и временем", - "roadmap_items_item2": "UIKit: поддержка языков с письмом справа налево", - "roadmap_items_item3": "UIKit: улучшение доступности", - "roadmap_items_item4": "Figma: конструктор шаблонов цветовых тем", - "roadmap_items_item5": "Ферма стендов для разработки", - "roadmap_items_item6": "Docs: Date Components в разделе Компоненты", - "roadmap_items_item7": "UIKit: компонент выбора эмодзи, компонент выбора цвета, компоненты ввода лейблов и выбора диапазона", - "roadmap_items_item8": "UIKit: миграция на Floating UI", - "roadmap_items_item9": "Docs: Page constructor в разделе Компоненты", - "roadmap_items_item10": "UIKit: Расширенная поддержка мобильных устройств", - "roadmap_items_item11": "Page constructor: блок футера", - "templates_title": "Начните создавать проекты с Gravity UI", - "companies_title": "Нам доверяют" + "header_title": "Создавайте современные интерфейсы с дизайн‑системой Gravity", + "header_actions_howToStart": "С чего начать", + "news_title": "Новости", + "news_items_item1": "Мы добавили модуль duration в библиотеку date-utils. Он реализует стандарт ISO 8601 для временных интервалов. Тут об этом можно почитать подробнее.", + "news_items_item2": "Мы опубликовали библиотеку иллюстраций в Figma community.", + "news_items_item3": "Мы добавили два новых компонента: Palette, который помогает отображать эмодзи или иконки и Divider, он поможет везде, где нужен разделитель.", + "features_feature1_title": "Основано на реальном опыте использования", + "features_feature1_description": "Внутреннее решение в ответ на реальные потребности разработчиков: мы выпустили Gravity для open-source сообщества.", + "features_feature2_title": "Отличный дизайн", + "features_feature2_description": "Опытные дизайнеры следят за оформлением библиотек, обеспечивая грамотный стиль и единообразие компонентов, а также поддержку темного режима и высококонтрастных тем.", + "features_feature3_title": "Развивающаяся экосистема", + "features_feature3_description": "Регулярная обратная связь от сообщества разработчиков позволяет нам постоянно улучшать библиотеки и избегать нарушения совместимости (кроме случаев крайней необходимости).", + "examples_title": "Примеры", + "examples_colors_yellow": "Жёлтый", + "examples_colors_red": "Красный", + "examples_colors_green": "Зелёный", + "examples_colors_blue": "Синий", + "libraries_title": "Наши библиотеки", + "libraries_actions_allLibraries": "Все библиотеки", + "roadmap_title": "Roadmap 2024", + "roadmap_items_item1": "Date Components: новая библиотека для работы с датами и временем", + "roadmap_items_item2": "UIKit: поддержка языков с письмом справа налево", + "roadmap_items_item3": "UIKit: улучшение доступности", + "roadmap_items_item4": "Figma: конструктор шаблонов цветовых тем", + "roadmap_items_item5": "Ферма стендов для разработки", + "roadmap_items_item6": "Docs: Date Components в разделе Компоненты", + "roadmap_items_item7": "UIKit: компонент выбора эмодзи, компонент выбора цвета, компоненты ввода лейблов и выбора диапазона", + "roadmap_items_item8": "UIKit: миграция на Floating UI", + "roadmap_items_item9": "Docs: Page constructor в разделе Компоненты", + "roadmap_items_item10": "UIKit: Расширенная поддержка мобильных устройств", + "roadmap_items_item11": "Page constructor: блок футера", + "templates_title": "Начните создавать проекты с Gravity UI", + "companies_title": "Нам доверяют", + "github_stars-text": "Вам нравится 💖 Gravity UI? Оставьте нам ⭐ на Github", + "github_stars-button": "Звезда" } diff --git a/src/components/GithubStarsPromotion/GithubStarsPromotion.scss b/src/components/GithubStarsPromotion/GithubStarsPromotion.scss new file mode 100644 index 00000000000..2336bebbf32 --- /dev/null +++ b/src/components/GithubStarsPromotion/GithubStarsPromotion.scss @@ -0,0 +1,71 @@ +@use '~@gravity-ui/page-constructor/styles/styles.scss' as pcStyles; +@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables; +@use '../../variables.scss'; + +$block: '.#{variables.$ns}github-stars-promotion'; + +#{$block} { + display: flex; + align-items: center; + justify-content: center; + gap: var(--g-spacing-2); + + border-radius: var(--g-border-radius-m); + text-decoration: none; + background: #cda2e7; + + @media (min-width: map-get(pcVariables.$gridBreakpoints, 'sm')) { + padding: var(--g-spacing-1) var(--g-spacing-2); + + transform: translateX(calc(100% + 2 * var(--g-spacing-2))); + animation: blockAnimation 0.35s linear forwards; + } + + @media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) { + padding: var(--g-spacing-2) var(--g-spacing-3); + } + + &__wrapper { + display: flex; + justify-content: center; + align-items: center; + + padding: 0px var(--g-spacing-2); + padding-top: var(--g-spacing-2); + + position: relative; + z-index: 10; + overflow: hidden; + + @media (min-width: map-get(pcVariables.$gridBreakpoints, 'sm')) { + position: absolute; + left: 0; + right: 0; + + justify-content: flex-end; + } + } + + &__button { + @media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) { + display: none; + } + } + + &__text { + @media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) { + & > span { + text-decoration: underline; + } + } + } + + @keyframes blockAnimation { + from { + transform: translateX(100%); + } + to { + transform: translateX(0%); + } + } +} diff --git a/src/components/GithubStarsPromotion/GithubStarsPromotion.tsx b/src/components/GithubStarsPromotion/GithubStarsPromotion.tsx new file mode 100644 index 00000000000..359613f2370 --- /dev/null +++ b/src/components/GithubStarsPromotion/GithubStarsPromotion.tsx @@ -0,0 +1,32 @@ +import {Star} from '@gravity-ui/icons'; +import {HTML} from '@gravity-ui/page-constructor'; +import {Button, Icon, Text} from '@gravity-ui/uikit'; +import {useTranslation} from 'next-i18next'; +import React from 'react'; + +import {block} from '../../utils'; + +import './GithubStarsPromotion.scss'; + +const b = block('github-stars-promotion'); + +interface GithubStarsPromotionProps {} + +export const GithubStarsPromotion: React.FC = () => { + const {t} = useTranslation(); + + return ( +
+ + + {t('home:github_stars-text')} + + + + +
+ ); +}; diff --git a/src/components/Landing/Landing.tsx b/src/components/Landing/Landing.tsx index dfc0b122340..2fda9b6f4cf 100644 --- a/src/components/Landing/Landing.tsx +++ b/src/components/Landing/Landing.tsx @@ -2,6 +2,7 @@ import {PageConstructor, PageContent} from '@gravity-ui/page-constructor'; import {useTranslation} from 'next-i18next'; import {useRouter} from 'next/router'; import React from 'react'; +import {GithubStarsPromotion} from 'src/components/GithubStarsPromotion/GithubStarsPromotion'; import {CustomExtendedFeatures} from '../../blocks/CustomExtendedFeatures/CustomExtendedFeatures'; import {CustomHeader} from '../../blocks/CustomHeader/CustomHeader'; @@ -20,17 +21,20 @@ export const Landing: React.FC = () => { useSectionScroll(); return ( - + <> + {pathname === '/' && } + + ); }; diff --git a/src/components/Layout/Layout.scss b/src/components/Layout/Layout.scss index 8c277add665..95c923aa07d 100644 --- a/src/components/Layout/Layout.scss +++ b/src/components/Layout/Layout.scss @@ -24,6 +24,7 @@ $block: '.#{variables.$ns}layout'; } &__content { + position: relative; flex: 1; } } From 77504319455396632408c1282b5dcdb3b567deee Mon Sep 17 00:00:00 2001 From: Andrew Shubnikov Date: Tue, 21 May 2024 15:30:29 +0300 Subject: [PATCH 2/8] DATAUI-2207: add github stars to landing --- public/locales/en/home.json | 68 ++++++++++--------- public/locales/ru/home.json | 68 ++++++++++--------- .../GithubStarsPromotion.scss | 57 ++++++++++++++++ .../GithubStarsPromotion.tsx | 48 +++++++++++++ src/components/Landing/Landing.tsx | 28 ++++---- src/components/Layout/Layout.scss | 1 + src/constants.ts | 2 + 7 files changed, 194 insertions(+), 78 deletions(-) create mode 100644 src/components/GithubStarsPromotion/GithubStarsPromotion.scss create mode 100644 src/components/GithubStarsPromotion/GithubStarsPromotion.tsx diff --git a/public/locales/en/home.json b/public/locales/en/home.json index 5b3eee9395b..edfefe8b176 100644 --- a/public/locales/en/home.json +++ b/public/locales/en/home.json @@ -1,35 +1,37 @@ { - "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 added a duration module to our date-utils library. It implements the ISO 8601 standard for durations. Here you can find more information about it.", - "news_items_item2": "We've published our illustration library in Figma community.", - "news_items_item3": "We've added two new components: Palette, which allows you to display a grid of icons and emojis, and Divider, which simply divides things.", - "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", - "features_feature2_description": "Experienced designers curate the look of our libraries, ensuring that components are stylish and consistent, with support for dark mode and high-contrast themes.", - "features_feature3_title": "An evolving ecosystem", - "features_feature3_description": "Regular feedback from our community of developers allows us to continuously improve our libraries, and break compatibility only when necessary.", - "examples_title": "Examples", - "examples_colors_yellow": "Yellow", - "examples_colors_red": "Red", - "examples_colors_green": "Green", - "examples_colors_blue": "Blue", - "libraries_title": "Our libraries", - "libraries_actions_allLibraries": "All libraries", - "roadmap_title": "Roadmap 2024", - "roadmap_items_item1": "Date Components: new library for working with date and time", - "roadmap_items_item2": "UIKit: Right-to-left languages support", - "roadmap_items_item3": "UIKit: improvements in digital accessibility", - "roadmap_items_item4": "Figma: color theme template builder", - "roadmap_items_item5": "Development farm", - "roadmap_items_item6": "Docs: Date Components in Components section", - "roadmap_items_item7": "UIKit: emoji picker, color picker, label input and range input components", - "roadmap_items_item8": "UIKit: migration to Floating UI", - "roadmap_items_item9": "Docs: Page constructor in Components section", - "roadmap_items_item10": "UIKit: extended mobile support", - "roadmap_items_item11": "Page constructor: footer block", - "templates_title": "Start creating with Gravity UI", - "companies_title": "Trusted by" + "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 added a duration module to our date-utils library. It implements the ISO 8601 standard for durations. Here you can find more information about it.", + "news_items_item2": "We've published our illustration library in Figma community.", + "news_items_item3": "We've added two new components: Palette, which allows you to display a grid of icons and emojis, and Divider, which simply divides things.", + "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", + "features_feature2_description": "Experienced designers curate the look of our libraries, ensuring that components are stylish and consistent, with support for dark mode and high-contrast themes.", + "features_feature3_title": "An evolving ecosystem", + "features_feature3_description": "Regular feedback from our community of developers allows us to continuously improve our libraries, and break compatibility only when necessary.", + "examples_title": "Examples", + "examples_colors_yellow": "Yellow", + "examples_colors_red": "Red", + "examples_colors_green": "Green", + "examples_colors_blue": "Blue", + "libraries_title": "Our libraries", + "libraries_actions_allLibraries": "All libraries", + "roadmap_title": "Roadmap 2024", + "roadmap_items_item1": "Date Components: new library for working with date and time", + "roadmap_items_item2": "UIKit: Right-to-left languages support", + "roadmap_items_item3": "UIKit: improvements in digital accessibility", + "roadmap_items_item4": "Figma: color theme template builder", + "roadmap_items_item5": "Development farm", + "roadmap_items_item6": "Docs: Date Components in Components section", + "roadmap_items_item7": "UIKit: emoji picker, color picker, label input and range input components", + "roadmap_items_item8": "UIKit: migration to Floating UI", + "roadmap_items_item9": "Docs: Page constructor in Components section", + "roadmap_items_item10": "UIKit: extended mobile support", + "roadmap_items_item11": "Page constructor: footer block", + "templates_title": "Start creating with Gravity UI", + "companies_title": "Trusted by", + "github_stars-text": "Do you 💖 Gravity UI? Give us", + "github_stars-button": "Star" } diff --git a/public/locales/ru/home.json b/public/locales/ru/home.json index d4b117379e9..e332c78c511 100644 --- a/public/locales/ru/home.json +++ b/public/locales/ru/home.json @@ -1,35 +1,37 @@ { - "header_title": "Создавайте современные интерфейсы с дизайн‑системой Gravity", - "header_actions_howToStart": "С чего начать", - "news_title": "Новости", - "news_items_item1": "Мы добавили модуль duration в библиотеку date-utils. Он реализует стандарт ISO 8601 для временных интервалов. Тут об этом можно почитать подробнее.", - "news_items_item2": "Мы опубликовали библиотеку иллюстраций в Figma community.", - "news_items_item3": "Мы добавили два новых компонента: Palette, который помогает отображать эмодзи или иконки и Divider, он поможет везде, где нужен разделитель.", - "features_feature1_title": "Основано на реальном опыте использования", - "features_feature1_description": "Внутреннее решение в ответ на реальные потребности разработчиков: мы выпустили Gravity для open-source сообщества.", - "features_feature2_title": "Отличный дизайн", - "features_feature2_description": "Опытные дизайнеры следят за оформлением библиотек, обеспечивая грамотный стиль и единообразие компонентов, а также поддержку темного режима и высококонтрастных тем.", - "features_feature3_title": "Развивающаяся экосистема", - "features_feature3_description": "Регулярная обратная связь от сообщества разработчиков позволяет нам постоянно улучшать библиотеки и избегать нарушения совместимости (кроме случаев крайней необходимости).", - "examples_title": "Примеры", - "examples_colors_yellow": "Жёлтый", - "examples_colors_red": "Красный", - "examples_colors_green": "Зелёный", - "examples_colors_blue": "Синий", - "libraries_title": "Наши библиотеки", - "libraries_actions_allLibraries": "Все библиотеки", - "roadmap_title": "Roadmap 2024", - "roadmap_items_item1": "Date Components: новая библиотека для работы с датами и временем", - "roadmap_items_item2": "UIKit: поддержка языков с письмом справа налево", - "roadmap_items_item3": "UIKit: улучшение доступности", - "roadmap_items_item4": "Figma: конструктор шаблонов цветовых тем", - "roadmap_items_item5": "Ферма стендов для разработки", - "roadmap_items_item6": "Docs: Date Components в разделе Компоненты", - "roadmap_items_item7": "UIKit: компонент выбора эмодзи, компонент выбора цвета, компоненты ввода лейблов и выбора диапазона", - "roadmap_items_item8": "UIKit: миграция на Floating UI", - "roadmap_items_item9": "Docs: Page constructor в разделе Компоненты", - "roadmap_items_item10": "UIKit: Расширенная поддержка мобильных устройств", - "roadmap_items_item11": "Page constructor: блок футера", - "templates_title": "Начните создавать проекты с Gravity UI", - "companies_title": "Нам доверяют" + "header_title": "Создавайте современные интерфейсы с дизайн‑системой Gravity", + "header_actions_howToStart": "С чего начать", + "news_title": "Новости", + "news_items_item1": "Мы добавили модуль duration в библиотеку date-utils. Он реализует стандарт ISO 8601 для временных интервалов. Тут об этом можно почитать подробнее.", + "news_items_item2": "Мы опубликовали библиотеку иллюстраций в Figma community.", + "news_items_item3": "Мы добавили два новых компонента: Palette, который помогает отображать эмодзи или иконки и Divider, он поможет везде, где нужен разделитель.", + "features_feature1_title": "Основано на реальном опыте использования", + "features_feature1_description": "Внутреннее решение в ответ на реальные потребности разработчиков: мы выпустили Gravity для open-source сообщества.", + "features_feature2_title": "Отличный дизайн", + "features_feature2_description": "Опытные дизайнеры следят за оформлением библиотек, обеспечивая грамотный стиль и единообразие компонентов, а также поддержку темного режима и высококонтрастных тем.", + "features_feature3_title": "Развивающаяся экосистема", + "features_feature3_description": "Регулярная обратная связь от сообщества разработчиков позволяет нам постоянно улучшать библиотеки и избегать нарушения совместимости (кроме случаев крайней необходимости).", + "examples_title": "Примеры", + "examples_colors_yellow": "Жёлтый", + "examples_colors_red": "Красный", + "examples_colors_green": "Зелёный", + "examples_colors_blue": "Синий", + "libraries_title": "Наши библиотеки", + "libraries_actions_allLibraries": "Все библиотеки", + "roadmap_title": "Roadmap 2024", + "roadmap_items_item1": "Date Components: новая библиотека для работы с датами и временем", + "roadmap_items_item2": "UIKit: поддержка языков с письмом справа налево", + "roadmap_items_item3": "UIKit: улучшение доступности", + "roadmap_items_item4": "Figma: конструктор шаблонов цветовых тем", + "roadmap_items_item5": "Ферма стендов для разработки", + "roadmap_items_item6": "Docs: Date Components в разделе Компоненты", + "roadmap_items_item7": "UIKit: компонент выбора эмодзи, компонент выбора цвета, компоненты ввода лейблов и выбора диапазона", + "roadmap_items_item8": "UIKit: миграция на Floating UI", + "roadmap_items_item9": "Docs: Page constructor в разделе Компоненты", + "roadmap_items_item10": "UIKit: Расширенная поддержка мобильных устройств", + "roadmap_items_item11": "Page constructor: блок футера", + "templates_title": "Начните создавать проекты с Gravity UI", + "companies_title": "Нам доверяют", + "github_stars-text": "Вам нравится 💖 Gravity UI? Оставьте нам", + "github_stars-button": "Звезда" } diff --git a/src/components/GithubStarsPromotion/GithubStarsPromotion.scss b/src/components/GithubStarsPromotion/GithubStarsPromotion.scss new file mode 100644 index 00000000000..30a4b767ec7 --- /dev/null +++ b/src/components/GithubStarsPromotion/GithubStarsPromotion.scss @@ -0,0 +1,57 @@ +@use '~@gravity-ui/page-constructor/styles/styles.scss' as pcStyles; +@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables; +@use '../../variables.scss'; + +$block: '.#{variables.$ns}github-stars-promotion'; + +#{$block} { + display: flex; + align-items: center; + justify-content: center; + gap: var(--g-spacing-2); + + border-radius: var(--g-border-radius-m); + text-decoration: none; + background: #cda2e7; + + @media (min-width: map-get(pcVariables.$gridBreakpoints, 'sm')) { + padding: var(--g-spacing-1) var(--g-spacing-2); + + transform: translateX(calc(100% + 2 * var(--g-spacing-2))); + animation: blockAnimation 0.35s linear forwards; + } + + @media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) { + padding: var(--g-spacing-2) var(--g-spacing-3); + } + + &__wrapper { + display: flex; + justify-content: center; + align-items: center; + + padding: 0px var(--g-spacing-2); + padding-top: var(--g-spacing-2); + + position: relative; + z-index: 10; + overflow: hidden; + + @media (min-width: map-get(pcVariables.$gridBreakpoints, 'sm')) { + position: absolute; + left: 0; + right: 0; + + justify-content: flex-end; + } + } + + @keyframes blockAnimation { + from { + transform: translateX(100%); + } + to { + transform: translateX(0%); + } + } +} diff --git a/src/components/GithubStarsPromotion/GithubStarsPromotion.tsx b/src/components/GithubStarsPromotion/GithubStarsPromotion.tsx new file mode 100644 index 00000000000..83f43558751 --- /dev/null +++ b/src/components/GithubStarsPromotion/GithubStarsPromotion.tsx @@ -0,0 +1,48 @@ +import {Star} from '@gravity-ui/icons'; +import {HTML} from '@gravity-ui/page-constructor'; +import {Button, Icon, Text} from '@gravity-ui/uikit'; +import {useTranslation} from 'next-i18next'; +import React, {useEffect, useState} from 'react'; +import {GITHUB_UI_KIT_URL} from 'src/constants'; + +import {block} from '../../utils'; + +import './GithubStarsPromotion.scss'; + +const b = block('github-stars-promotion'); +const LOCAL_STORAGE_KEY = 'gravity-landing-hide-stars-promotion'; + +interface GithubStarsPromotionProps {} + +export const GithubStarsPromotion: React.FC = () => { + const {t} = useTranslation(); + const [hide, setHide] = useState(); + + useEffect(() => { + setHide(Boolean(localStorage.getItem(LOCAL_STORAGE_KEY))); + }, []); + + const hideBlock = () => { + setHide(true); + localStorage.setItem(LOCAL_STORAGE_KEY, 'true'); + }; + + if (hide) { + return null; + } + + return ( + + ); +}; diff --git a/src/components/Landing/Landing.tsx b/src/components/Landing/Landing.tsx index dfc0b122340..2fda9b6f4cf 100644 --- a/src/components/Landing/Landing.tsx +++ b/src/components/Landing/Landing.tsx @@ -2,6 +2,7 @@ import {PageConstructor, PageContent} from '@gravity-ui/page-constructor'; import {useTranslation} from 'next-i18next'; import {useRouter} from 'next/router'; import React from 'react'; +import {GithubStarsPromotion} from 'src/components/GithubStarsPromotion/GithubStarsPromotion'; import {CustomExtendedFeatures} from '../../blocks/CustomExtendedFeatures/CustomExtendedFeatures'; import {CustomHeader} from '../../blocks/CustomHeader/CustomHeader'; @@ -20,17 +21,20 @@ export const Landing: React.FC = () => { useSectionScroll(); return ( - + <> + {pathname === '/' && } + + ); }; diff --git a/src/components/Layout/Layout.scss b/src/components/Layout/Layout.scss index 8c277add665..95c923aa07d 100644 --- a/src/components/Layout/Layout.scss +++ b/src/components/Layout/Layout.scss @@ -24,6 +24,7 @@ $block: '.#{variables.$ns}layout'; } &__content { + position: relative; flex: 1; } } diff --git a/src/constants.ts b/src/constants.ts index 8d0862d0844..da45a994bde 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -15,3 +15,5 @@ export const TARGET_PROFILE = 'gravity-ui'; export const SCROLL_TO_TEMPLATES_EVENT = 'templates'; export const LOCALE_LOCAL_STORAGE_KEY = 'gravity-landing-locale-v3'; + +export const GITHUB_UI_KIT_URL = 'https://github.com/gravity-ui/uikit'; From b4fbf99d69b96d5b5d124eab94678fa7783c15bf Mon Sep 17 00:00:00 2001 From: Andrew Shubnikov Date: Tue, 21 May 2024 15:42:37 +0300 Subject: [PATCH 3/8] set default state --- src/components/GithubStarsPromotion/GithubStarsPromotion.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/GithubStarsPromotion/GithubStarsPromotion.tsx b/src/components/GithubStarsPromotion/GithubStarsPromotion.tsx index 83f43558751..da7350678c2 100644 --- a/src/components/GithubStarsPromotion/GithubStarsPromotion.tsx +++ b/src/components/GithubStarsPromotion/GithubStarsPromotion.tsx @@ -16,7 +16,7 @@ interface GithubStarsPromotionProps {} export const GithubStarsPromotion: React.FC = () => { const {t} = useTranslation(); - const [hide, setHide] = useState(); + const [hide, setHide] = useState(true); useEffect(() => { setHide(Boolean(localStorage.getItem(LOCAL_STORAGE_KEY))); From c340152066485c6f3cc65e6707d6bdaabcab1000 Mon Sep 17 00:00:00 2001 From: Andrew Shubnikov Date: Thu, 23 May 2024 15:43:00 +0300 Subject: [PATCH 4/8] design fixes --- .../GithubStarsBlock/GithubStarsBlock.scss} | 42 ++++++++++++++----- .../GithubStarsBlock/GithubStarsBlock.tsx} | 24 ++++++----- src/blocks/constants.ts | 1 + src/blocks/types.ts | 4 +- src/components/Landing/Landing.tsx | 5 ++- src/content/landing.ts | 4 ++ 6 files changed, 57 insertions(+), 23 deletions(-) rename src/{components/GithubStarsPromotion/GithubStarsPromotion.scss => blocks/GithubStarsBlock/GithubStarsBlock.scss} (55%) rename src/{components/GithubStarsPromotion/GithubStarsPromotion.tsx => blocks/GithubStarsBlock/GithubStarsBlock.tsx} (70%) diff --git a/src/components/GithubStarsPromotion/GithubStarsPromotion.scss b/src/blocks/GithubStarsBlock/GithubStarsBlock.scss similarity index 55% rename from src/components/GithubStarsPromotion/GithubStarsPromotion.scss rename to src/blocks/GithubStarsBlock/GithubStarsBlock.scss index 30a4b767ec7..d5dcc97ef23 100644 --- a/src/components/GithubStarsPromotion/GithubStarsPromotion.scss +++ b/src/blocks/GithubStarsBlock/GithubStarsBlock.scss @@ -4,6 +4,12 @@ $block: '.#{variables.$ns}github-stars-promotion'; +.pc-block-base.pc-block-base.pc-block-base.pc-constructor-block_type_github-stars-promotion { + position: unset; + margin: 0; + padding: 0; +} + #{$block} { display: flex; align-items: center; @@ -15,10 +21,11 @@ $block: '.#{variables.$ns}github-stars-promotion'; background: #cda2e7; @media (min-width: map-get(pcVariables.$gridBreakpoints, 'sm')) { - padding: var(--g-spacing-1) var(--g-spacing-2); + padding: var(--g-spacing-1) var(--g-spacing-1) var(--g-spacing-1) var(--g-spacing-4); transform: translateX(calc(100% + 2 * var(--g-spacing-2))); - animation: blockAnimation 0.35s linear forwards; + animation: leftBlockAnimation 250ms ease forwards; + animation-delay: 500ms; } @media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) { @@ -27,29 +34,44 @@ $block: '.#{variables.$ns}github-stars-promotion'; &__wrapper { display: flex; - justify-content: center; + justify-content: flex-end; align-items: center; - padding: 0px var(--g-spacing-2); padding-top: var(--g-spacing-2); - position: relative; - z-index: 10; - overflow: hidden; - @media (min-width: map-get(pcVariables.$gridBreakpoints, 'sm')) { position: absolute; + overflow: hidden; left: 0; right: 0; + z-index: 9; + + padding-left: var(--g-spacing-2); + padding-right: var(--g-spacing-2); + + &[data-hide='true'] { + display: none; + } - justify-content: flex-end; + &[data-device='mobile'] { + display: none; + } + } + + @media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) { + justify-content: center; + + &[data-device='desktop'] { + display: none; + } } } - @keyframes blockAnimation { + @keyframes leftBlockAnimation { from { transform: translateX(100%); } + to { transform: translateX(0%); } diff --git a/src/components/GithubStarsPromotion/GithubStarsPromotion.tsx b/src/blocks/GithubStarsBlock/GithubStarsBlock.tsx similarity index 70% rename from src/components/GithubStarsPromotion/GithubStarsPromotion.tsx rename to src/blocks/GithubStarsBlock/GithubStarsBlock.tsx index da7350678c2..a3eb9cf0ab6 100644 --- a/src/components/GithubStarsPromotion/GithubStarsPromotion.tsx +++ b/src/blocks/GithubStarsBlock/GithubStarsBlock.tsx @@ -1,20 +1,27 @@ import {Star} from '@gravity-ui/icons'; -import {HTML} from '@gravity-ui/page-constructor'; +import {Animatable, HTML} from '@gravity-ui/page-constructor'; import {Button, Icon, Text} from '@gravity-ui/uikit'; import {useTranslation} from 'next-i18next'; import React, {useEffect, useState} from 'react'; import {GITHUB_UI_KIT_URL} from 'src/constants'; import {block} from '../../utils'; +import {CustomBlock} from '../constants'; -import './GithubStarsPromotion.scss'; +import './GithubStarsBlock.scss'; const b = block('github-stars-promotion'); const LOCAL_STORAGE_KEY = 'gravity-landing-hide-stars-promotion'; -interface GithubStarsPromotionProps {} +type GithubStarsBlockProps = Animatable & { + device: 'desktop' | 'mobile'; +}; + +export type GithubStarsModel = GithubStarsBlockProps & { + type: CustomBlock.GithubStars; +}; -export const GithubStarsPromotion: React.FC = () => { +export const GithubStarsBlock: React.FC = ({device}) => { const {t} = useTranslation(); const [hide, setHide] = useState(true); @@ -23,16 +30,11 @@ export const GithubStarsPromotion: React.FC = () => { }, []); const hideBlock = () => { - setHide(true); localStorage.setItem(LOCAL_STORAGE_KEY, 'true'); }; - if (hide) { - return null; - } - return ( -
+ ); }; + +export default GithubStarsBlock; diff --git a/src/blocks/constants.ts b/src/blocks/constants.ts index 2fafdac5d4d..77dd757aeb5 100644 --- a/src/blocks/constants.ts +++ b/src/blocks/constants.ts @@ -4,4 +4,5 @@ export enum CustomBlock { Examples = 'examples', Roadmap = 'roadmap', Templates = 'templates', + GithubStars = 'github-stars-promotion', } diff --git a/src/blocks/types.ts b/src/blocks/types.ts index 459fbe01c07..0c451e2280c 100644 --- a/src/blocks/types.ts +++ b/src/blocks/types.ts @@ -1,6 +1,7 @@ import {CustomExtendedFeaturesModel} from './CustomExtendedFeatures/CustomExtendedFeatures'; import {CustomHeaderModel} from './CustomHeader/CustomHeader'; import {ExamplesModel} from './Examples/Examples'; +import {GithubStarsModel} from './GithubStarsBlock/GithubStarsBlock'; import {RoadmapModel} from './RoadmapBlock/RoadmapBlock'; import {TemplatesModel} from './TemplatesBlock/TemplatesBlock'; @@ -9,4 +10,5 @@ export type CustomBlockModel = | CustomExtendedFeaturesModel | ExamplesModel | RoadmapModel - | TemplatesModel; + | TemplatesModel + | GithubStarsModel; diff --git a/src/components/Landing/Landing.tsx b/src/components/Landing/Landing.tsx index 2fda9b6f4cf..5046edd44ea 100644 --- a/src/components/Landing/Landing.tsx +++ b/src/components/Landing/Landing.tsx @@ -2,11 +2,11 @@ import {PageConstructor, PageContent} from '@gravity-ui/page-constructor'; import {useTranslation} from 'next-i18next'; import {useRouter} from 'next/router'; import React from 'react'; -import {GithubStarsPromotion} from 'src/components/GithubStarsPromotion/GithubStarsPromotion'; import {CustomExtendedFeatures} from '../../blocks/CustomExtendedFeatures/CustomExtendedFeatures'; import {CustomHeader} from '../../blocks/CustomHeader/CustomHeader'; import {Examples} from '../../blocks/Examples/Examples'; +import {GithubStarsBlock} from '../../blocks/GithubStarsBlock/GithubStarsBlock'; import {RoadmapBlock} from '../../blocks/RoadmapBlock/RoadmapBlock'; import TemplatesBlock from '../../blocks/TemplatesBlock/TemplatesBlock'; import {CustomBlock} from '../../blocks/constants'; @@ -22,11 +22,12 @@ export const Landing: React.FC = () => { return ( <> - {pathname === '/' && } + ({ }, }, blocks: [ + { + type: CustomBlock.GithubStars, + device: 'mobile', + }, { type: CustomBlock.CustomHeader, title: t('home:header_title'), From b213950e073ccb0235b901a60b079a739113b892 Mon Sep 17 00:00:00 2001 From: Andrew Shubnikov Date: Thu, 23 May 2024 18:56:38 +0300 Subject: [PATCH 5/8] update styles --- src/blocks/GithubStarsBlock/GithubStarsBlock.scss | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/blocks/GithubStarsBlock/GithubStarsBlock.scss b/src/blocks/GithubStarsBlock/GithubStarsBlock.scss index d5dcc97ef23..d2b33be2656 100644 --- a/src/blocks/GithubStarsBlock/GithubStarsBlock.scss +++ b/src/blocks/GithubStarsBlock/GithubStarsBlock.scss @@ -15,21 +15,18 @@ $block: '.#{variables.$ns}github-stars-promotion'; align-items: center; justify-content: center; gap: var(--g-spacing-2); - + padding: var(--g-spacing-1) var(--g-spacing-1) var(--g-spacing-1) var(--g-spacing-4); border-radius: var(--g-border-radius-m); text-decoration: none; background: #cda2e7; @media (min-width: map-get(pcVariables.$gridBreakpoints, 'sm')) { - padding: var(--g-spacing-1) var(--g-spacing-1) var(--g-spacing-1) var(--g-spacing-4); - transform: translateX(calc(100% + 2 * var(--g-spacing-2))); - animation: leftBlockAnimation 250ms ease forwards; + animation: leftBlockAnimation 250ms ease-out forwards; animation-delay: 500ms; } @media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) { - padding: var(--g-spacing-2) var(--g-spacing-3); } &__wrapper { From fb693483efbfa961b80271544472fc044bf85ffb Mon Sep 17 00:00:00 2001 From: Andrew Shubnikov <32542672+shbov@users.noreply.github.com> Date: Thu, 23 May 2024 19:12:26 +0300 Subject: [PATCH 6/8] Update home.json --- public/locales/en/home.json | 70 ++++++++++++++++++------------------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/public/locales/en/home.json b/public/locales/en/home.json index edfefe8b176..4f16d07a9fb 100644 --- a/public/locales/en/home.json +++ b/public/locales/en/home.json @@ -1,37 +1,37 @@ { - "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 added a duration module to our date-utils library. It implements the ISO 8601 standard for durations. Here you can find more information about it.", - "news_items_item2": "We've published our illustration library in Figma community.", - "news_items_item3": "We've added two new components: Palette, which allows you to display a grid of icons and emojis, and Divider, which simply divides things.", - "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", - "features_feature2_description": "Experienced designers curate the look of our libraries, ensuring that components are stylish and consistent, with support for dark mode and high-contrast themes.", - "features_feature3_title": "An evolving ecosystem", - "features_feature3_description": "Regular feedback from our community of developers allows us to continuously improve our libraries, and break compatibility only when necessary.", - "examples_title": "Examples", - "examples_colors_yellow": "Yellow", - "examples_colors_red": "Red", - "examples_colors_green": "Green", - "examples_colors_blue": "Blue", - "libraries_title": "Our libraries", - "libraries_actions_allLibraries": "All libraries", - "roadmap_title": "Roadmap 2024", - "roadmap_items_item1": "Date Components: new library for working with date and time", - "roadmap_items_item2": "UIKit: Right-to-left languages support", - "roadmap_items_item3": "UIKit: improvements in digital accessibility", - "roadmap_items_item4": "Figma: color theme template builder", - "roadmap_items_item5": "Development farm", - "roadmap_items_item6": "Docs: Date Components in Components section", - "roadmap_items_item7": "UIKit: emoji picker, color picker, label input and range input components", - "roadmap_items_item8": "UIKit: migration to Floating UI", - "roadmap_items_item9": "Docs: Page constructor in Components section", - "roadmap_items_item10": "UIKit: extended mobile support", - "roadmap_items_item11": "Page constructor: footer block", - "templates_title": "Start creating with Gravity UI", - "companies_title": "Trusted by", - "github_stars-text": "Do you 💖 Gravity UI? Give us", - "github_stars-button": "Star" + "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 added a duration module to our date-utils library. It implements the ISO 8601 standard for durations. Here you can find more information about it.", + "news_items_item2": "We've published our illustration library in Figma community.", + "news_items_item3": "We've added two new components: Palette, which allows you to display a grid of icons and emojis, and Divider, which simply divides things.", + "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", + "features_feature2_description": "Experienced designers curate the look of our libraries, ensuring that components are stylish and consistent, with support for dark mode and high-contrast themes.", + "features_feature3_title": "An evolving ecosystem", + "features_feature3_description": "Regular feedback from our community of developers allows us to continuously improve our libraries, and break compatibility only when necessary.", + "examples_title": "Examples", + "examples_colors_yellow": "Yellow", + "examples_colors_red": "Red", + "examples_colors_green": "Green", + "examples_colors_blue": "Blue", + "libraries_title": "Our libraries", + "libraries_actions_allLibraries": "All libraries", + "roadmap_title": "Roadmap 2024", + "roadmap_items_item1": "Date Components: new library for working with date and time", + "roadmap_items_item2": "UIKit: Right-to-left languages support", + "roadmap_items_item3": "UIKit: improvements in digital accessibility", + "roadmap_items_item4": "Figma: color theme template builder", + "roadmap_items_item5": "Development farm", + "roadmap_items_item6": "Docs: Date Components in Components section", + "roadmap_items_item7": "UIKit: emoji picker, color picker, label input and range input components", + "roadmap_items_item8": "UIKit: migration to Floating UI", + "roadmap_items_item9": "Docs: Page constructor in Components section", + "roadmap_items_item10": "UIKit: extended mobile support", + "roadmap_items_item11": "Page constructor: footer block", + "templates_title": "Start creating with Gravity UI", + "companies_title": "Trusted by", + "github_stars-text": "Do you 💖 Gravity UI? Give us", + "github_stars-button": "Star" } From 90103bd30ea31d83a8fc707f3c67df77f756936e Mon Sep 17 00:00:00 2001 From: Andrew Shubnikov <32542672+shbov@users.noreply.github.com> Date: Thu, 23 May 2024 19:13:30 +0300 Subject: [PATCH 7/8] Update home.json --- public/locales/ru/home.json | 70 ++++++++++++++++++------------------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/public/locales/ru/home.json b/public/locales/ru/home.json index e332c78c511..88496df3c1f 100644 --- a/public/locales/ru/home.json +++ b/public/locales/ru/home.json @@ -1,37 +1,37 @@ { - "header_title": "Создавайте современные интерфейсы с дизайн‑системой Gravity", - "header_actions_howToStart": "С чего начать", - "news_title": "Новости", - "news_items_item1": "Мы добавили модуль duration в библиотеку date-utils. Он реализует стандарт ISO 8601 для временных интервалов. Тут об этом можно почитать подробнее.", - "news_items_item2": "Мы опубликовали библиотеку иллюстраций в Figma community.", - "news_items_item3": "Мы добавили два новых компонента: Palette, который помогает отображать эмодзи или иконки и Divider, он поможет везде, где нужен разделитель.", - "features_feature1_title": "Основано на реальном опыте использования", - "features_feature1_description": "Внутреннее решение в ответ на реальные потребности разработчиков: мы выпустили Gravity для open-source сообщества.", - "features_feature2_title": "Отличный дизайн", - "features_feature2_description": "Опытные дизайнеры следят за оформлением библиотек, обеспечивая грамотный стиль и единообразие компонентов, а также поддержку темного режима и высококонтрастных тем.", - "features_feature3_title": "Развивающаяся экосистема", - "features_feature3_description": "Регулярная обратная связь от сообщества разработчиков позволяет нам постоянно улучшать библиотеки и избегать нарушения совместимости (кроме случаев крайней необходимости).", - "examples_title": "Примеры", - "examples_colors_yellow": "Жёлтый", - "examples_colors_red": "Красный", - "examples_colors_green": "Зелёный", - "examples_colors_blue": "Синий", - "libraries_title": "Наши библиотеки", - "libraries_actions_allLibraries": "Все библиотеки", - "roadmap_title": "Roadmap 2024", - "roadmap_items_item1": "Date Components: новая библиотека для работы с датами и временем", - "roadmap_items_item2": "UIKit: поддержка языков с письмом справа налево", - "roadmap_items_item3": "UIKit: улучшение доступности", - "roadmap_items_item4": "Figma: конструктор шаблонов цветовых тем", - "roadmap_items_item5": "Ферма стендов для разработки", - "roadmap_items_item6": "Docs: Date Components в разделе Компоненты", - "roadmap_items_item7": "UIKit: компонент выбора эмодзи, компонент выбора цвета, компоненты ввода лейблов и выбора диапазона", - "roadmap_items_item8": "UIKit: миграция на Floating UI", - "roadmap_items_item9": "Docs: Page constructor в разделе Компоненты", - "roadmap_items_item10": "UIKit: Расширенная поддержка мобильных устройств", - "roadmap_items_item11": "Page constructor: блок футера", - "templates_title": "Начните создавать проекты с Gravity UI", - "companies_title": "Нам доверяют", - "github_stars-text": "Вам нравится 💖 Gravity UI? Оставьте нам", - "github_stars-button": "Звезда" + "header_title": "Создавайте современные интерфейсы с дизайн‑системой Gravity", + "header_actions_howToStart": "С чего начать", + "news_title": "Новости", + "news_items_item1": "Мы добавили модуль duration в библиотеку date-utils. Он реализует стандарт ISO 8601 для временных интервалов. Тут об этом можно почитать подробнее.", + "news_items_item2": "Мы опубликовали библиотеку иллюстраций в Figma community.", + "news_items_item3": "Мы добавили два новых компонента: Palette, который помогает отображать эмодзи или иконки и Divider, он поможет везде, где нужен разделитель.", + "features_feature1_title": "Основано на реальном опыте использования", + "features_feature1_description": "Внутреннее решение в ответ на реальные потребности разработчиков: мы выпустили Gravity для open-source сообщества.", + "features_feature2_title": "Отличный дизайн", + "features_feature2_description": "Опытные дизайнеры следят за оформлением библиотек, обеспечивая грамотный стиль и единообразие компонентов, а также поддержку темного режима и высококонтрастных тем.", + "features_feature3_title": "Развивающаяся экосистема", + "features_feature3_description": "Регулярная обратная связь от сообщества разработчиков позволяет нам постоянно улучшать библиотеки и избегать нарушения совместимости (кроме случаев крайней необходимости).", + "examples_title": "Примеры", + "examples_colors_yellow": "Жёлтый", + "examples_colors_red": "Красный", + "examples_colors_green": "Зелёный", + "examples_colors_blue": "Синий", + "libraries_title": "Наши библиотеки", + "libraries_actions_allLibraries": "Все библиотеки", + "roadmap_title": "Roadmap 2024", + "roadmap_items_item1": "Date Components: новая библиотека для работы с датами и временем", + "roadmap_items_item2": "UIKit: поддержка языков с письмом справа налево", + "roadmap_items_item3": "UIKit: улучшение доступности", + "roadmap_items_item4": "Figma: конструктор шаблонов цветовых тем", + "roadmap_items_item5": "Ферма стендов для разработки", + "roadmap_items_item6": "Docs: Date Components в разделе Компоненты", + "roadmap_items_item7": "UIKit: компонент выбора эмодзи, компонент выбора цвета, компоненты ввода лейблов и выбора диапазона", + "roadmap_items_item8": "UIKit: миграция на Floating UI", + "roadmap_items_item9": "Docs: Page constructor в разделе Компоненты", + "roadmap_items_item10": "UIKit: Расширенная поддержка мобильных устройств", + "roadmap_items_item11": "Page constructor: блок футера", + "templates_title": "Начните создавать проекты с Gravity UI", + "companies_title": "Нам доверяют", + "github_stars-text": "Вам нравится 💖 Gravity UI? Поставьте нам", + "github_stars-button": "Звезду" } From ed4869cd85f06e422895d1e7468904cff8f47b38 Mon Sep 17 00:00:00 2001 From: Andrew Shubnikov Date: Thu, 23 May 2024 21:54:42 +0300 Subject: [PATCH 8/8] hide block on rtl --- src/blocks/GithubStarsBlock/GithubStarsBlock.scss | 3 --- src/blocks/GithubStarsBlock/GithubStarsBlock.tsx | 6 ++++++ 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/blocks/GithubStarsBlock/GithubStarsBlock.scss b/src/blocks/GithubStarsBlock/GithubStarsBlock.scss index d2b33be2656..9bfe96a55bb 100644 --- a/src/blocks/GithubStarsBlock/GithubStarsBlock.scss +++ b/src/blocks/GithubStarsBlock/GithubStarsBlock.scss @@ -26,9 +26,6 @@ $block: '.#{variables.$ns}github-stars-promotion'; animation-delay: 500ms; } - @media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) { - } - &__wrapper { display: flex; justify-content: flex-end; diff --git a/src/blocks/GithubStarsBlock/GithubStarsBlock.tsx b/src/blocks/GithubStarsBlock/GithubStarsBlock.tsx index a3eb9cf0ab6..906ee4fa819 100644 --- a/src/blocks/GithubStarsBlock/GithubStarsBlock.tsx +++ b/src/blocks/GithubStarsBlock/GithubStarsBlock.tsx @@ -2,6 +2,7 @@ import {Star} from '@gravity-ui/icons'; import {Animatable, HTML} from '@gravity-ui/page-constructor'; import {Button, Icon, Text} from '@gravity-ui/uikit'; import {useTranslation} from 'next-i18next'; +import {useRouter} from 'next/router'; import React, {useEffect, useState} from 'react'; import {GITHUB_UI_KIT_URL} from 'src/constants'; @@ -23,6 +24,7 @@ export type GithubStarsModel = GithubStarsBlockProps & { export const GithubStarsBlock: React.FC = ({device}) => { const {t} = useTranslation(); + const {pathname} = useRouter(); const [hide, setHide] = useState(true); useEffect(() => { @@ -33,6 +35,10 @@ export const GithubStarsBlock: React.FC = ({device}) => { localStorage.setItem(LOCAL_STORAGE_KEY, 'true'); }; + if (pathname !== '/') { + return null; + } + return (