@meduza/ui-kit-2 0.2.20 → 0.2.22

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.20",
+  "version": "0.2.22",
   "license": "MIT",
   "description": "UIKit for Meduza",
   "repository": "https://github.com/meduza-corp/ui-kit-2.git",

package/src/AnnouncementInText/AnnouncementInText.module.css

@@ -50,6 +50,10 @@
   }
 }
 
+.body p + p {
+  margin-top: 12px;
+}
+
 .title {
   max-width: 315px;
   margin: 0 0 10px;

package/src/AnnouncementInText/index.tsx

@@ -21,17 +21,18 @@ export const AnnouncementInText: React.FC<AnnouncementInTextProps> = ({
   const data = {
     ru: {
       title:
-        'Поддержите &laquo;Медузу&raquo;. Сейчас. Это&nbsp;критически важно',
+        '&laquo;Медуза&raquo; заблокирована в&nbsp;России. Мы&nbsp;были к&nbsp;этому готовы&nbsp;&mdash; и&nbsp;продолжаем работать. Несмотря&nbsp;ни&nbsp;на&nbsp;что',
       text:
-        'Мы&nbsp;готовимся к&nbsp;худшему. Из-за войны с&nbsp;Украиной власти могут начать блокировать независимые СМИ в&nbsp;любой момент. В&nbsp;то&nbsp;же время международные санкции в&nbsp;отношении Центробанка и&nbsp;других российских кредитных организаций создают серьезные риски для нашего краудфандинга. Поэтому мы&nbsp;просим вас помочь нашей редакции. Прямо сейчас. Что важно знать: мы&nbsp;независимое издание, мы&nbsp;работаем только в&nbsp;интересах наших читателей, мы&nbsp;не&nbsp;планируем закрываться. Несмотря ни&nbsp;на&nbsp;что. Спасибо вам!',
+        '<p>Нам нужна ваша помощь как никогда. Прямо сейчас. Дальше всем нам будет еще труднее. Мы&nbsp;независимое издание и&nbsp;работаем только в&nbsp;интересах читателей.</p>',
       button: 'Хочу помочь',
       href: 'https://mdza.io/yiNxPZ7Bs-k'
     },
 
     en: {
-      title: 'Meduza needs your support. We need it now, like never before.',
+      title:
+        'Meduza has been blocked in Russia. We&nbsp;were ready for this and our work continues, no matter what, but we need your support like never before. ',
       text:
-        'We are preparing for the worst. Due to the war with Ukraine, the Russian authorities could begin blocking the country’s independent media at any moment. International sanctions against the Central Bank and other Russian credit organizations are creating serious risks for own crowdfunding. That’s why we’re asking you to support our newsroom. Right now. What you should know: We are an independent publication. We work only in the interests of our readers. We have no plans to close, come hell or high water. Thank you, everyone!',
+        '<p>We need it now. Tomorrow could be too late. We are an independent publication, and we work only in the interests of our readers. Many&nbsp;of&nbsp;our&nbsp;readers in Russia can no longer contribute, so we turn to you, our audience around the world.</p>',
       button: 'I want to help',
       href: 'https://support.meduza.io/en'
     }
@@ -49,7 +50,8 @@ export const AnnouncementInText: React.FC<AnnouncementInTextProps> = ({
           className={styles.title}
           dangerouslySetInnerHTML={{ __html: localeData.title }}
         />
-        <p dangerouslySetInnerHTML={{ __html: localeData.text }} />
+
+        <div dangerouslySetInnerHTML={{ __html: localeData.text }} />
       </div>
 
       <div className={styles.footer}>

package/src/SvgSymbol/SvgSymbol.module.css

@@ -206,6 +206,13 @@
   }
 }
 
+.shareBookmark {
+  width: 8px;
+  height: auto;
+
+  cursor: pointer;
+}
+
 .isInToolbar.bookmark {
   width: 14px;
 }

package/src/SvgSymbol/SvgSymbol.types.ts

@@ -29,6 +29,7 @@ export type Icons =
   | 'download'
   | 'play'
   | 'pause'
+  | 'shareBookmark'
   | 'speedHalf'
   | 'speedOne'
   | 'speedOneHalf'

package/src/SvgSymbol/icons.ts

@@ -195,6 +195,13 @@ export const icons = {
       '<path d="M16 20l-7.5-6.333L1 20V1h15z" stroke="currentColor" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>'
   },
 
+  shareBookmark: {
+    width: 8,
+    height: 11,
+    content:
+      '<path clip-rule="evenodd" d="M7 10 4 7l-3 3V1h6v9Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>'
+  },
+
   receipt: {
     width: 10,
     height: 13,

package/src/Toolbar/Toolbar.module.css

@@ -12,14 +12,10 @@
   display: flex;
   flex-flow: row wrap;
 
-  margin: 0 0 0 -10px;
+  margin: 0 0 0 -11px;
   padding: 0;
 
   list-style: none;
-
-  @media $landscapeTablet {
-    margin: 0 0 0 -15px;
-  }
 }
 
 .item {
@@ -27,8 +23,8 @@
 
   min-width: 42px;
   height: 32px;
-  padding-right: 10px;
-  padding-left: 10px;
+  padding-right: 11px;
+  padding-left: 11px;
 
   cursor: pointer;
   transition: color 250ms ease;
@@ -37,11 +33,6 @@
   color: #808080;
 
   line-height: 1;
-
-  @media $landscapeTablet {
-    padding-right: 15px;
-    padding-left: 15px;
-  }
 }
 
 .item:last-child {
@@ -50,15 +41,13 @@
 
 .item::before {
   position: absolute;
-  top: 7px;
+  top: 50%;
   left: 0;
 
-  height: 18px;
-
-  content: '';
-  vertical-align: middle;
+  content: '·';
+  transform: translateY(-50%);
 
-  border-left: 1px solid rgba(0, 0, 0, 0.15);
+  font-size: 14px;
 }
 
 .item:empty {

package/src/Toolbar/Toolbar.stories.tsx

@@ -14,11 +14,21 @@ export default {
   }
 }
 
-const buttons: { type: ToolbarButtonTypes; label?: string }[] = [
+const buttons: {
+  type: ToolbarButtonTypes
+  label?: string
+  icon?: 'shareBookmark'
+}[] = [
+  {
+    type: 'tg'
+  },
   {
     type: 'fb',
     label: '23,4K'
   },
+  {
+    type: 'tw'
+  },
   {
     type: 'vk',
     label: '481'
@@ -27,17 +37,11 @@ const buttons: { type: ToolbarButtonTypes; label?: string }[] = [
     type: 'ok'
   },
   {
-    type: 'tw'
-  },
-  {
-    type: 'tg'
-  },
-  {
-    type: 'reaction',
-    label: 'Связаться с редакцией'
+    type: 'bookmark',
+    icon: 'shareBookmark'
   },
   {
-    type: 'bookmark'
+    type: 'reaction'
   }
 ]
 
@@ -66,6 +70,8 @@ const Example: React.FC<{ theme?: string }> = ({ theme }) => {
               }
               key={`${index}-${button.type}`}
               isActive={button.type === 'bookmark' && bookmark}
+              lang="ru"
+              icon={button.icon}
             >
               {button.label && button.label}
             </ToolbarButton>

package/src/ToolbarButton/ToolbarButton.module.css

@@ -7,7 +7,7 @@
 
   cursor: pointer;
 
-  color: inherit;
+  color: #000;
   border-width: 0;
   outline: none;
   background-color: transparent;
@@ -82,21 +82,35 @@
   visibility: hidden;
 }
 
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+  margin-top: -1px;
+  padding-right: 5px;
+
+  @media $landscapeTablet {
+    padding-left: 5px;
+  }
+}
+
 .text {
   display: inline-block;
 
-  padding-left: 5px;
+  vertical-align: middle;
+}
 
+.counter {
+  color: #8c8c8c;
+  display: inline-block;
   vertical-align: middle;
+  padding-left: 3px;
 }
 
-.text:empty {
+.counter:empty {
   display: none;
 }
 
 .bookmark {
-  color: #999;
-
   fill: transparent;
 }
 

package/src/ToolbarButton/ToolbarButton.stories.tsx

@@ -20,6 +20,7 @@ const Example: React.FC<{ theme?: string }> = ({ theme }) => {
           type="fb"
           theme={theme}
           onClick={(): void => alert('Hello Button')}
+          lang="ru"
         >
           42
         </ToolbarButton>

package/src/ToolbarButton/ToolbarButton.test.tsx

@@ -10,7 +10,11 @@ describe('Toolbar Button', () => {
 
   const renderComponent = () =>
     render(
-      <ToolbarButton type="fb" onClick={(): void => alert('Hello Button')}>
+      <ToolbarButton
+        lang="ru"
+        type="fb"
+        onClick={(): void => alert('Hello Button')}
+      >
         42
       </ToolbarButton>
     )

package/src/ToolbarButton/ToolbarButton.types.ts

@@ -13,6 +13,8 @@ export type ToolbarButtonTypes =
 export interface ToolbarButtonProps {
   type: ToolbarButtonTypes
   theme?: string
+  lang: 'ru' | 'en'
+  icon?: 'shareBookmark'
   isActive?: boolean
   onClick: (type: string) => void
   children?: React.ReactNode | JSX.Element[] | JSX.Element

package/src/ToolbarButton/index.tsx

@@ -5,12 +5,15 @@ import { makeClassName, ClassNames } from '../utils/makeClassName'
 
 import toolbarStyles from '../Toolbar/Toolbar.module.css'
 import styles from './ToolbarButton.module.css'
+import { SocialLabels } from '../constants'
 
 export const ToolbarButton: React.FC<ToolbarButtonProps> = ({
   children,
   type,
   theme,
   isActive,
+  lang = 'ru',
+  icon,
   onClick
 }) => {
   const classNames: ClassNames = [
@@ -20,6 +23,8 @@ export const ToolbarButton: React.FC<ToolbarButtonProps> = ({
     [styles.isActive, !!isActive]
   ]
 
+  const label = SocialLabels[lang][type]
+
   return (
     <li className={toolbarStyles.item}>
       <button
@@ -28,8 +33,18 @@ export const ToolbarButton: React.FC<ToolbarButtonProps> = ({
         type="button"
         onClick={(): void => onClick(type)}
       >
-        <SvgSymbol size="medium" icon={type} styleContext="isInToolbar" />
-        {children && <span className={styles.text}>{children}</span>}
+        {icon && (
+          <div className={styles.icon}>
+            <SvgSymbol size="medium" icon={icon} styleContext="isInToolbar" />
+          </div>
+        )}
+        <span className={styles.text}>{label}</span>
+        {children && (
+          <span className={styles.counter}>
+            {` `}
+            {children}
+          </span>
+        )}
       </button>
     </li>
   )

package/src/constants.ts

@@ -22,3 +22,23 @@ export const imageConditionalKeys = {
   default: [650, 520, 325],
   narrow: [600, 325]
 }
+
+export const SocialLabels = {
+  ru: {
+    tg: 'Telegram',
+    fb: 'Фб',
+    vk: 'Вк',
+    ok: 'Ок',
+    tw: 'Твиттер',
+    bookmark: 'В закладки',
+    reaction: 'Напишите нам'
+  },
+  en: {
+    tg: 'Telegram',
+    fb: 'Fb',
+    vk: 'Vk',
+    ok: 'Ok',
+    tw: 'Twitter',
+    bookmark: 'Add to bookmarks'
+  }
+}