@meduza/ui-kit-2 0.4.6 → 0.4.7

package/dist/ui-kit.css

@@ -1171,7 +1171,6 @@
   }
 @media only screen and (min-width: 64em) {
 .Tag-module_large__EKMu6 {
-
     font-size: 14px;
     line-height: 16px;
     letter-spacing: 1px;
@@ -1192,11 +1191,13 @@
 .Tag-module_inherit__z21c- {
   color: inherit;
 }
+.Tag-module_custom__NU9-e {
+  color: var(--tagColor);
+}
 @media only screen and (min-width: 64em) {
 .Tag-module_is1to1__V-fH5,
 .Tag-module_is1to2__b9Obh,
 .Tag-module_isInSuperBlock__wrFUY {
-
     font-size: 12px;
     line-height: 20px;
     letter-spacing: 1px;
@@ -1205,7 +1206,6 @@
 @media only screen and (min-width: 64em) {
 .Tag-module_is1to3__vZT-R,
 .Tag-module_is1to4__MBh5V {
-
     font-size: 10px;
     line-height: 15px;
     letter-spacing: 0.5px;

package/package.json

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

package/src/Meta/Meta.mock.ts

@@ -0,0 +1,19 @@
+export const MetaMock = {
+  type: 'meta',
+  data: {
+    lang: 'ru',
+    components: [
+      {
+        type: 'string',
+        text: '42 страницы',
+        id: 'e19bcbc2fc5005393177a48818801a6e04e3a5e94aad52ed99f6d6addd4819e5'
+      },
+      {
+        type: 'string',
+        text: 'Сентябрь, 2023',
+        id: 'c5c779fd7088cda5667daedccd35c31e3fe70233e60941ae42965b7d1863302c'
+      }
+    ]
+  },
+  id: '2-219b4aed9da90196465bd1c697b643ffffa219cbcdd325a8abcedc053c6649b0'
+}

package/src/Meta/Meta.stories.module.css

@@ -4,4 +4,20 @@
   display: block;
 
   font-family: $secondaryFont;
+
+  display: flex;
+  flex-flow: column nowrap;
+
+  gap: 40px;
+}
+
+.root h3 {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.layout {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 20px;
 }

package/src/Meta/Meta.stories.tsx

@@ -8,6 +8,8 @@ import { SvgSymbol } from '../SvgSymbol'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
 
 import styles from './Meta.stories.module.css'
+import { MetaContainer } from './MetaContainer'
+import { MetaMock } from './Meta.mock'
 
 export default {
   title: 'Main / Meta',
@@ -19,8 +21,8 @@ export default {
 
 const Example: React.FC = () => {
   return (
-    <>
-      <div className={styles.root}>
+    <div className={styles.root}>
+      <div className={styles.layout}>
         <h3>В карточке</h3>
         <Meta>
           <MetaItem>
@@ -38,7 +40,7 @@ const Example: React.FC = () => {
           ))}
         </Meta>
       </div>
-      <div className={styles.root}>
+      <div className={styles.layout}>
         <h3>В материале</h3>
 
         <Meta styleContext="isInMaterial">
@@ -52,8 +54,19 @@ const Example: React.FC = () => {
             <Timestamp publishedAt={1558353600} type="date" locale="en" />
           </MetaItem>
         </Meta>
+        <div className={styles.layout}>
+          <h3>Блочная</h3>
+          <MetaContainer
+            block={MetaMock}
+            lang="ru"
+            styleContext={[]}
+            isRead={false}
+            isListened={false}
+            isInBookmarks={false}
+          />
+        </div>
       </div>
-    </>
+    </div>
   )
 }
 

package/src/Meta/MetaContainer.tsx

@@ -133,6 +133,14 @@ export const MetaContainer: React.FC<MetaContainerProps> = ({
             )
           }
 
+          case 'string': {
+            return (
+              <MetaItem bullets key={component.id}>
+                {component.text}
+              </MetaItem>
+            )
+          }
+
           default: {
             return null
           }

package/src/Tag/Tag.module.css

@@ -28,7 +28,6 @@
 
 .large {
   @media $landscapeTablet {
-
     font-size: 14px;
     line-height: 16px;
     letter-spacing: 1px;
@@ -55,11 +54,14 @@
   color: inherit;
 }
 
+.custom {
+  color: var(--tagColor);
+}
+
 .is1to1,
 .is1to2,
 .isInSuperBlock {
   @media $landscapeTablet {
-
     font-size: 12px;
     line-height: 20px;
     letter-spacing: 1px;
@@ -69,7 +71,6 @@
 .is1to3,
 .is1to4 {
   @media $landscapeTablet {
-
     font-size: 10px;
     line-height: 15px;
     letter-spacing: 0.5px;

package/src/Tag/Tag.stories.tsx

@@ -14,21 +14,34 @@ export default {
 }
 
 const Example: React.FC = () => {
-  const tags: { theme: TagThemes; size: TagSizes; title: string }[] = [
+  const tags: {
+    theme: TagThemes
+    size: TagSizes
+    title: string
+    color?: string
+  }[] = [
     { theme: 'dark', size: 'small', title: 'Новости' },
     { theme: 'gold', size: 'small', title: 'Новости' },
     { theme: 'gray', size: 'small', title: 'Новости' },
     { theme: 'light', size: 'small', title: 'Новости' },
+    { theme: 'custom', size: 'small', title: 'Новости', color: '250,0,255' },
     { theme: 'dark', size: 'large', title: 'Новости' },
     { theme: 'gold', size: 'large', title: 'Новости' },
     { theme: 'gray', size: 'large', title: 'Новости' },
-    { theme: 'light', size: 'large', title: 'Новости' }
+    { theme: 'light', size: 'large', title: 'Новости' },
+    { theme: 'custom', size: 'large', title: 'Новости', color: '250,0,255' }
   ]
   return (
     <>
       <div className={styles.root}>
         {tags.map((tag) => (
-          <div key={`tagSize-${tag.theme}-${tag.size}`}>
+          <div
+            key={`tagSize-${tag.theme}-${tag.size}`}
+            style={
+              tag.color &&
+              ({ '--tagColor': `rgb(${tag.color})` } as React.CSSProperties)
+            }
+          >
             <Tag size={tag.size} theme={tag.theme} styleContext="rich">
               {tag.title}
             </Tag>

package/src/Tag/Tag.types.ts

@@ -2,7 +2,13 @@ import React from 'react'
 
 export type TagSizes = 'small' | 'large'
 
-export type TagThemes = 'dark' | 'gold' | 'gray' | 'light' | 'inherit'
+export type TagThemes =
+  | 'dark'
+  | 'gold'
+  | 'gray'
+  | 'light'
+  | 'custom'
+  | 'inherit'
 
 export type TagStyleContexts = 'isInToolbar' | 'isInSpoiler' | 'isInDropdown'