@meduza/ui-kit-2 0.2.37 → 0.3.1

package/dist/utils/capitalizeFirstLetter.d.ts

@@ -0,0 +1 @@
+export declare const capitalizeFirstLetter: (string: string) => string;

package/package.json

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

package/src/BookmarkButton/BookmarkButton.css

@@ -42,7 +42,3 @@
     width: 12px;
   }
 }
-
-[data-context='prodano'] .root {
-  display: none;
-}

package/src/BookmarkButton/BookmarkButton.module.css

@@ -44,7 +44,3 @@
     width: 12px;
   }
 }
-
-[data-context='prodano'] .root {
-  display: none;
-}

package/src/Button/Button.module.css

@@ -247,3 +247,16 @@
 
   margin-top: -1px;
 }
+
+/* APPERANCE */
+.isFancy {
+  letter-spacing: 0;
+  text-transform: none;
+
+  border-radius: 30px;
+}
+
+.isFancy.default {
+  font-size: 14px;
+  font-weight: 700;
+}

package/src/Button/Button.stories.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Button } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
-import { ButtonStates, ButtonThemes } from './Button.types'
+import { ButtonAppearance, ButtonStates, ButtonThemes } from './Button.types'
 
 import styles from './Button.stories.module.css'
 
@@ -26,6 +26,7 @@ const buttons: { theme: ButtonThemes; title: string }[] = [
 const Example: React.FC = () => {
   const [state, setState] = useState<ButtonStates>('isDefault')
   const [disabled, setDisabled] = useState(false)
+  const [appearance, setAppearance] = useState<ButtonAppearance>('isClassic')
 
   const handleLoaderClick = () => {
     setState(state === 'isLoading' ? 'isDefault' : 'isLoading')
@@ -33,6 +34,9 @@ const Example: React.FC = () => {
   const handleDisabledClick = () => {
     setDisabled(!disabled)
   }
+  const handleAppearanceClick = () => {
+    setAppearance((prev) => (prev === 'isClassic' ? 'isFancy' : 'isClassic'))
+  }
 
   return (
     <>
@@ -55,6 +59,15 @@ const Example: React.FC = () => {
             Toggle Disabled
           </Button>
         </div>
+        <div className={styles.control}>
+          <Button
+            onClick={() => handleAppearanceClick()}
+            theme="gray"
+            size="default"
+          >
+            Toggle Style
+          </Button>
+        </div>
       </div>
 
       <div className={styles.block}>
@@ -64,6 +77,7 @@ const Example: React.FC = () => {
               theme={item.theme}
               state={state}
               disabled={disabled}
+              appearance={appearance}
               size="default"
             >
               {item.title}

package/src/Button/Button.tsx

@@ -0,0 +1,50 @@
+import React, { FC } from 'react'
+import { makeClassName } from '../utils/makeClassName'
+import { ButtonLoader } from './ButtonLoader'
+import { ButtonProps } from './Button.types'
+
+import styles from './Button.module.css'
+
+export const Button: FC<ButtonProps> = ({
+  theme = 'gold',
+  size = 'default',
+  state = 'isDefault',
+  styleContext = 'isInToolbar',
+  appearance,
+  disabled = false,
+  onClick,
+  children
+}) => {
+  const handleClick = (): void => {
+    if (disabled || !onClick) {
+      return
+    }
+
+    onClick()
+  }
+
+  return (
+    <button
+      data-testid="button"
+      className={makeClassName([
+        [styles.root, true],
+        [styles[size], !!size],
+        [styles[theme], !!theme],
+        [styles[appearance], !!appearance],
+        [styles[state], !!state && !!styles[state]],
+        [styles[styleContext], !!styleContext]
+      ])}
+      disabled={disabled}
+      onClick={handleClick}
+      type="button"
+    >
+      {state === 'isLoading' ? (
+        <span className={styles.loader}>
+          <ButtonLoader />
+        </span>
+      ) : (
+        children
+      )}
+    </button>
+  )
+}

package/src/Button/Button.types.ts

@@ -14,8 +14,11 @@ export type ButtonStates = 'isLoading' | 'isDefault'
 export type ButtonSizes = 'auto' | 'default'
 export type ButtonStyleContexts = 'isInToolbar' | 'isInSpoiler' | 'isInDropdown'
 
+export type ButtonAppearance = 'isFancy' | 'isClassic'
+
 export interface ButtonProps {
   theme?: ButtonThemes
+  appearance?: ButtonAppearance
   size?: ButtonSizes
   state?: ButtonStates
   styleContext?: ButtonStyleContexts

package/src/Button/{loader.tsx → ButtonLoader.tsx}

@@ -1,6 +1,6 @@
 import React from 'react'
 
-const Loader: React.FC = () => (
+export const ButtonLoader: React.FC = () => (
   <svg
     width="30px"
     height="30px"
@@ -26,5 +26,3 @@ const Loader: React.FC = () => (
     </g>
   </svg>
 )
-
-export default Loader

package/src/Button/index.tsx

@@ -1,48 +1,2 @@
-import React, { FC } from 'react'
-import { makeClassName } from '../utils/makeClassName'
-import Loader from './loader'
-import { ButtonProps } from './Button.types'
-
-import styles from './Button.module.css'
-
-export const Button: FC<ButtonProps> = ({
-  theme = 'gold',
-  size = 'default',
-  state = 'isDefault',
-  styleContext = 'isInToolbar',
-  disabled = false,
-  onClick,
-  children
-}) => {
-  const handleClick = (): void => {
-    if (disabled || !onClick) {
-      return
-    }
-
-    onClick()
-  }
-
-  return (
-    <button
-      data-testid="button"
-      className={makeClassName([
-        [styles.root, true],
-        [styles[size], !!size],
-        [styles[theme], !!theme],
-        [styles[state], !!state && !!styles[state]],
-        [styles[styleContext], !!styleContext]
-      ])}
-      disabled={disabled}
-      onClick={handleClick}
-      type="button"
-    >
-      {state === 'isLoading' ? (
-        <span className={styles.loader}>
-          <Loader />
-        </span>
-      ) : (
-        children
-      )}
-    </button>
-  )
-}
+export { Button } from './Button'
+export { ButtonLoader } from './ButtonLoader'

package/src/Cover/Cover.module.css

@@ -76,8 +76,13 @@
   box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.15);
 }
 
+.isInDynamicBlock {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
 .isInDynamicBlock .body {
-  padding: 0 12px 12px
+  padding: 0 12px 12px;
 }
 
 .isInDynamicBlock::after {

package/src/EmbedBlock/EmbedBlock.test.tsx

@@ -3,8 +3,6 @@ import { render } from '@testing-library/react'
 import { EmbedBlockContainer } from './'
 import { EmbedBlockProps } from './EmbedBlock.types'
 
-import styles from './EmbedBlock.module.css'
-
 import mock from './mock.json'
 import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils'
 
@@ -23,11 +21,9 @@ describe('Embed Block', () => {
     )
 
   it('should have root style', () => {
-    const { getByTestId } = renderComponent()
+    const { container } = renderComponent()
     mockAllIsIntersecting(true)
 
-    const embedBlock = getByTestId('embed-block')
-
-    expect(embedBlock).toHaveClass(styles.root)
+    expect(container).toBeInTheDocument()
   })
 })

package/src/SvgSymbol/SvgSymbol.module.css

@@ -60,6 +60,10 @@
   fill: $tgColor;
 }
 
+.magic {
+  width: 15px;
+}
+
 .reaction {
   width: 16px;
 

package/src/SvgSymbol/SvgSymbol.stories.tsx

@@ -13,7 +13,7 @@ export default {
   }
 }
 
-const social: Icons[] = ['fb', 'tw', 'vk', 'ok', 'tg', 'reaction']
+const social: Icons[] = ['fb', 'tw', 'vk', 'ok', 'tg', 'reaction', 'magic']
 
 const podcast: Icons[] = [
   'backward',

package/src/SvgSymbol/SvgSymbol.types.ts

@@ -24,6 +24,7 @@ export type Icons =
   | 'ok'
   | 'tg'
   | 'chat'
+  | 'magic'
   | 'backward'
   | 'forward'
   | 'download'

package/src/SvgSymbol/icons.ts

@@ -220,5 +220,11 @@ export const icons = {
     height: 15,
     content:
       '<g fill-rule="nonzero"><path d="M4.978 4.354a.5.5 0 01-.332.624c-1.197.367-2.064 1.527-2.14 2.897l-.005.167a.749.749 0 01.999.708v3a.75.75 0 01-1.458.248L2 12a1 1 0 01-1-1v-1a1 1 0 01.5-.866V8.072c0-1.886 1.172-3.535 2.854-4.05a.5.5 0 01.624.332zM10 7a.5.5 0 01.492.41l.008.09.001 1.634a1 1 0 01.492.745L11 10v1a1 1 0 01-.883.993L10 12l-.042-.002a.75.75 0 01-1.451-.146L8.5 11.75v-3a.75.75 0 011.001-.707L9.5 7.5l.008-.09A.5.5 0 0110 7z" fill="currentColor" /><path d="M11.585 1.194a.513.513 0 01.855.56l-.051.077-3.163 3.975a.514.514 0 01-.73.075l-.068-.069-1.812-2.208a.512.512 0 01.729-.716l.065.066 1.409 1.718 2.766-3.478z" fill="#6EAC65" /></g>'
+  },
+  magic: {
+    width: 15,
+    height: 15,
+    content:
+      '<g fill-rule="evenodd" clip-rule="evenodd"> <path d="M7.804.4a.6.6 0 0 1 .6.6v2.035a.6.6 0 0 1-1.2 0V1a.6.6 0 0 1 .6-.6ZM7.804 10.577a.6.6 0 0 1 .6.6v2.035a.6.6 0 1 1-1.2 0v-2.035a.6.6 0 0 1 .6-.6ZM14.636 7.106a.6.6 0 0 1-.6.6h-2.078a.6.6 0 1 1 0-1.2h2.078a.6.6 0 0 1 .6.6ZM4.25 7.106a.6.6 0 0 1-.6.6H1.573a.6.6 0 0 1 0-1.2H3.65a.6.6 0 0 1 .6.6ZM12.639 2.37a.585.585 0 0 1 0 .84l-1.442 1.412a.615.615 0 0 1-.857 0 .585.585 0 0 1 0-.84l1.442-1.412a.615.615 0 0 1 .857 0ZM12.639 11.843a.615.615 0 0 1-.857 0L10.34 10.43a.585.585 0 0 1 0-.84.615.615 0 0 1 .857 0l1.442 1.413a.585.585 0 0 1 0 .84ZM5.269 4.621a.615.615 0 0 1-.858 0L2.97 3.208a.585.585 0 0 1 0-.84.615.615 0 0 1 .858 0l1.442 1.413a.585.585 0 0 1 0 .84ZM8.926 6.074a.6.6 0 0 1 0 .849l-.863.863-.849-.849.863-.863a.6.6 0 0 1 .849 0ZM7.348 8.5l-5.924 5.924a.6.6 0 1 1-.848-.848L6.5 7.652l.848.848Z"/> </g>'
   }
 }

package/src/Toolbar/Toolbar.module.css

@@ -37,7 +37,6 @@
   padding-right: 17px;
   padding-left: 17px;
 
-  cursor: pointer;
   transition: color 250ms ease;
   text-align: center;
 
@@ -125,7 +124,3 @@
 .dark::before {
   background-color: #4f4f4f;
 }
-
-[data-context='prodano'] .root {
-  display: none;
-}

package/src/Toolbar/Toolbar.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Toolbar } from './'
+import { Toolbar, ToolbarItem } from './'
 import { ToolbarButton } from '../ToolbarButton'
 import { ToolbarButtonTypes } from '../ToolbarButton/ToolbarButton.types'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
@@ -52,21 +52,22 @@ const Example: React.FC<{ theme?: string }> = ({ theme }) => {
       <div className={styles.root}>
         <Toolbar styleContext={[theme]}>
           {buttons.map((button, index) => (
-            <ToolbarButton
-              type={button.type}
-              theme={theme}
-              onClick={(): void =>
-                button.type === 'bookmark'
-                  ? handleBookmark()
-                  : handleButton(button.type)
-              }
-              key={`${index}-${button.type}`}
-              isActive={button.type === 'bookmark' && bookmark}
-              lang="ru"
-              icon={button.icon}
-            >
-              {button.label && button.label}
-            </ToolbarButton>
+            <ToolbarItem key={`${index}-${button.type}`}>
+              <ToolbarButton
+                type={button.type}
+                theme={theme}
+                onClick={(): void =>
+                  button.type === 'bookmark'
+                    ? handleBookmark()
+                    : handleButton(button.type)
+                }
+                isActive={button.type === 'bookmark' && bookmark}
+                lang="ru"
+                icon={button.icon}
+              >
+                {button.label && button.label}
+              </ToolbarButton>
+            </ToolbarItem>
           ))}
         </Toolbar>
       </div>

package/src/Toolbar/Toolbar.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { ToolbarProps } from './Toolbar.types'
+import makeStyleContext from '../utils/makeStyleContext'
+import { makeClassName, ClassNames } from '../utils/makeClassName'
+
+import styles from './Toolbar.module.css'
+
+export const Toolbar: React.FC<ToolbarProps> = ({ children, styleContext }) => {
+  let classNames: ClassNames = [[styles.root, true]]
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles)
+  }
+
+  return (
+    <div data-testid="toolbar" className={makeClassName(classNames)}>
+      <ul className={styles.list}>{children}</ul>
+    </div>
+  )
+}

package/src/Toolbar/Toolbar.types.ts

@@ -2,3 +2,7 @@ export interface ToolbarProps {
   styleContext?: string | string[]
   children: JSX.Element[] | JSX.Element
 }
+
+export interface ToolbarItemProps {
+  children: JSX.Element[] | JSX.Element
+}

package/src/Toolbar/ToolbarItem.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { ToolbarItemProps } from './Toolbar.types'
+
+import styles from '../Toolbar/Toolbar.module.css'
+
+export const ToolbarItem: React.FC<ToolbarItemProps> = ({ children }) => {
+  return <li className={styles.item}>{children}</li>
+}

package/src/Toolbar/index.tsx

@@ -1,20 +1,2 @@
-import React from 'react'
-import { ToolbarProps } from './Toolbar.types'
-import makeStyleContext from '../utils/makeStyleContext'
-import { makeClassName, ClassNames } from '../utils/makeClassName'
-
-import styles from './Toolbar.module.css'
-
-export const Toolbar: React.FC<ToolbarProps> = ({ children, styleContext }) => {
-  let classNames: ClassNames = [[styles.root, true]]
-
-  if (styleContext) {
-    classNames = makeStyleContext(classNames, styleContext, styles)
-  }
-
-  return (
-    <div data-testid="toolbar" className={makeClassName(classNames)}>
-      <ul className={styles.list}>{children}</ul>
-    </div>
-  )
-}
+export { ToolbarItem } from './ToolbarItem'
+export { Toolbar } from './Toolbar'

package/src/ToolbarButton/ToolbarButton.module.css

@@ -100,20 +100,6 @@
   vertical-align: middle;
 }
 
-.counter {
-  display: inline-block;
-
-  padding-left: 3px;
-
-  vertical-align: middle;
-
-  color: #8c8c8c;
-}
-
-.counter:empty {
-  display: none;
-}
-
 .bookmark {
   fill: transparent;
 }

package/src/ToolbarButton/ToolbarButton.types.ts

@@ -1,5 +1,3 @@
-import React from 'react'
-
 export type ToolbarButtonTypes =
   | 'vk'
   | 'fb'
@@ -9,14 +7,15 @@ export type ToolbarButtonTypes =
   | 'reaction'
   | 'pdf'
   | 'bookmark'
+  | 'unblock'
   | 'cross'
 
 export interface ToolbarButtonProps {
   type: ToolbarButtonTypes
   theme?: string
-  lang: 'ru' | 'en'
+  lang?: 'ru' | 'en'
+  text?: string
   icon?: 'shareBookmark'
   isActive?: boolean
-  onClick: (type: string) => void
-  children?: React.ReactNode | JSX.Element[] | JSX.Element
+  onClick: (event, type: string) => void
 }

package/src/ToolbarButton/index.tsx

@@ -3,16 +3,15 @@ import { ToolbarButtonProps } from './ToolbarButton.types'
 import { SvgSymbol } from '../SvgSymbol/'
 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',
+  text,
   icon,
   onClick
 }) => {
@@ -26,26 +25,18 @@ export const ToolbarButton: React.FC<ToolbarButtonProps> = ({
   const label = SocialLabels[lang][type]
 
   return (
-    <li className={toolbarStyles.item}>
-      <button
-        data-testid="toolbar-button"
-        className={makeClassName(classNames)}
-        type="button"
-        onClick={(): void => onClick(type)}
-      >
-        {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>
+    <button
+      data-testid="toolbar-button"
+      className={makeClassName(classNames)}
+      type="button"
+      onClick={(event): void => onClick(event, type)}
+    >
+      {icon && (
+        <div className={styles.icon}>
+          <SvgSymbol size="medium" icon={icon} styleContext="isInToolbar" />
+        </div>
+      )}
+      <span className={styles.text}>{text || label}</span>
+    </button>
   )
 }

package/src/Tooltip/Tooltip.module.css

@@ -0,0 +1,91 @@
+@import '../vars.css';
+
+.root {
+  position: relative;
+
+  width: 100%;
+  padding: 20px;
+
+  color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 16px;
+  background: #4761e0;
+  box-shadow: 0 37px 37px rgba(0, 0, 0, 0.09), 0 9px 20px rgba(0, 0, 0, 0.1);
+}
+
+.root::after {
+  position: absolute;
+
+  width: 16px;
+  height: 8px;
+
+  content: '';
+
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='8' viewBox='0 0 16 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8 0 8 8H0l8-8Z' fill='%234057CA'/%3E%3Cpath d='M8 1s3.89 3.876 7 7H1l7-7Z' fill='%234761E0'/%3E%3C/svg%3E");
+}
+
+.isCenterBottom::after {
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 100%) rotate(180deg);
+}
+
+.isLeftBottom::after {
+  bottom: 0;
+  left: 0;
+  transform: translate(200%, 100%) rotate(180deg);
+}
+
+.isCenterTop::after {
+  top: 0;
+  left: 50%;
+
+  transform: translate(-50%, -100%);
+}
+
+.isLeftTop::after {
+  top: 0;
+  left: 0;
+  transform: translate(200%, -100%);
+}
+
+.body {
+  font-family: $secondaryFont;
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.body h3 {
+  margin: 0 0 6px;
+
+  font-size: inherit;
+  font-weight: 700;
+  line-height: inherit;
+}
+
+.body p {
+  margin: 0;
+}
+
+.body p + p {
+  margin-top: 6px;
+}
+
+.body a {
+  color: inherit;
+  text-decoration: none;
+  box-shadow: inset 0 -1px;
+}
+
+.body a:hover {
+  opacity: 0.75;
+  color: inherit;
+}
+
+.footer {
+  margin-top: 10px;
+}
+
+.footer button {
+  color: #4761e0;
+}

package/src/Tooltip/Tooltip.stories.module.css

@@ -0,0 +1,7 @@
+@import '../vars.css';
+
+.root {
+  display: block;
+
+  width: 350px;
+}