feat(docs): add badge for only sc components

salute-developers · Dec 25, 2024 · 7afb57e · 7afb57e
1 parent e053a7d
commit 7afb57e
Show file tree

Hide file tree

Showing 42 changed files with 308 additions and 30 deletions.
diff --git a/website/plasma-b2c-docs/docs/components/AudioPlayer.mdx b/website/plasma-b2c-docs/docs/components/AudioPlayer.mdx
@@ -3,10 +3,12 @@ id: AudioPlayer
 title: AudioPlayer
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # AudioPlayer
 
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="AudioPlayer" />
 <PropsTable name="AudioPlayer" />
 <StorybookLink name="AudioPlayer" />

diff --git a/website/plasma-b2c-docs/docs/components/Card.mdx b/website/plasma-b2c-docs/docs/components/Card.mdx
@@ -3,9 +3,12 @@ id: card
 title: Card
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # Card
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 Набор компонентов для создания карточек.
 
 <StorybookLink name="Card" />

diff --git a/website/plasma-b2c-docs/docs/components/Carousel.mdx b/website/plasma-b2c-docs/docs/components/Carousel.mdx
@@ -3,9 +3,12 @@ id: carousel
 title: Carousel
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # Carousel
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 Набор компонентов для создания списков с прокруткой (галерей).
 
 <StorybookLink name="Carousel" />

diff --git a/website/plasma-b2c-docs/docs/components/ElasticGrid.mdx b/website/plasma-b2c-docs/docs/components/ElasticGrid.mdx
@@ -3,10 +3,12 @@ id: ElasticGrid
 title: ElasticGrid
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # ElasticGrid
 
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="ElasticGrid" />
 <PropsTable name="ElasticGrid" />
 <StorybookLink name="ElasticGrid" />

diff --git a/website/plasma-b2c-docs/docs/components/Modal.mdx b/website/plasma-b2c-docs/docs/components/Modal.mdx
@@ -3,9 +3,12 @@ id: modal
 title: Modal
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # Modal
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="Modal" />
 <PropsTable name="Modal" />
 <StorybookLink name="Modal" />

diff --git a/website/plasma-b2c-docs/docs/components/Overlay.mdx b/website/plasma-b2c-docs/docs/components/Overlay.mdx
@@ -3,9 +3,12 @@ id: overlay
 title: Overlay
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # Overlay
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="Overlay" />
 <PropsTable name="Overlay" exclude={['css']} />
 <StorybookLink name="Overlay" />
diff --git a/website/plasma-b2c-docs/docs/components/Portal.mdx b/website/plasma-b2c-docs/docs/components/Portal.mdx
@@ -3,9 +3,12 @@ id: portal
 title: Portal
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # Portal
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="Portal" />
 <PropsTable name="Portal" exclude={['css']} />
 <StorybookLink name="Portal" />

diff --git a/website/plasma-b2c-docs/docs/components/PreviewGallery.mdx b/website/plasma-b2c-docs/docs/components/PreviewGallery.mdx
@@ -3,10 +3,12 @@ id: PreviewGallery
 title: PreviewGallery
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # PreviewGallery
 
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="PreviewGallery" />
 <PropsTable name="PreviewGallery" />
 <StorybookLink name="PreviewGallery" />

diff --git a/website/plasma-b2c-docs/docs/components/Upload.mdx b/website/plasma-b2c-docs/docs/components/Upload.mdx
@@ -3,10 +3,12 @@ id: Upload
 title: Upload
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # Upload
 
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="Upload" />
 <PropsTable name="Upload" />
 <StorybookLink name="Upload" />

diff --git a/website/plasma-b2c-docs/docs/components/UploadAudio.mdx b/website/plasma-b2c-docs/docs/components/UploadAudio.mdx
@@ -3,9 +3,12 @@ id: UploadAudio
 title: UploadAudio
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
+
+# UploadAudio
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
 
-## UploadAudio
 <Description name="UploadAudio" />
 <PropsTable name="UploadAudio" />
 <StorybookLink name="UploadAudio" />

diff --git a/website/plasma-b2c-docs/docs/components/UploadVisual.mdx b/website/plasma-b2c-docs/docs/components/UploadVisual.mdx
@@ -3,10 +3,12 @@ id: UploadVisual
 title: UploadVisual
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # UploadVisual
 
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="UploadVisual" />
 <PropsTable name="UploadVisual" />
 <StorybookLink name="UploadVisual" />

diff --git a/website/plasma-b2c-docs/src/components/Badge.tsx b/website/plasma-b2c-docs/src/components/Badge.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import type { FC } from 'react';
+import { Badge, Tooltip, BodyXS } from '@salutejs/plasma-b2c';
+
+export const DocsBadge: FC<{ title: string; desctiption: string }> = ({ title, desctiption }) => (
+    <div
+        style={{
+            marginTop: '-22px',
+            marginBottom: '16px',
+        }}
+    >
+        <Tooltip
+            target={
+                <Badge size="m" view="accent">
+                    <BodyXS bold>{title}</BodyXS>
+                </Badge>
+            }
+            text={desctiption}
+            placement="right-start"
+            trigger="hover"
+            hoverTimeout={500}
+            maxWidth="400px"
+            hasArrow={false}
+            style={{
+                verticalAlign: 'middle',
+            }}
+        />
+    </div>
+);
diff --git a/website/plasma-b2c-docs/src/components/index.ts b/website/plasma-b2c-docs/src/components/index.ts
@@ -2,3 +2,4 @@ export { CodeSandbox } from './CodeSandbox';
 export { Description } from './Description';
 export { PropsTable } from './PropsTable';
 export { StorybookLink } from './Storybook';
+export { DocsBadge as Badge } from './Badge';
diff --git a/website/plasma-giga-docs/docs/components/Overlay.mdx b/website/plasma-giga-docs/docs/components/Overlay.mdx
@@ -3,8 +3,10 @@ id: overlay
 title: Overlay
 ---
 
-import { PropsTable, Description } from '@site/src/components';
+import { PropsTable, Description, Badge } from '@site/src/components';
 
 # Overlay
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
 <Description name="Overlay" />
 <PropsTable name="Overlay" exclude={['css']} />
diff --git a/website/plasma-giga-docs/docs/components/Portal.mdx b/website/plasma-giga-docs/docs/components/Portal.mdx
@@ -3,9 +3,12 @@ id: portal
 title: Portal
 ---
 
-import { PropsTable, Description } from '@site/src/components';
+import { PropsTable, Description, Badge } from '@site/src/components';
 
 # Portal
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="Portal" />
 <PropsTable name="Portal" exclude={['css']} />
 

diff --git a/website/plasma-giga-docs/src/components/Badge.tsx b/website/plasma-giga-docs/src/components/Badge.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import type { FC } from 'react';
+import { Badge, Tooltip, BodyXS } from '@salutejs/plasma-giga';
+
+export const DocsBadge: FC<{ title: string; desctiption: string }> = ({ title, desctiption }) => (
+    <div
+        style={{
+            marginTop: '-22px',
+            marginBottom: '16px',
+        }}
+    >
+        <Tooltip
+            target={
+                <Badge size="m" view="accent">
+                    <BodyXS bold>{title}</BodyXS>
+                </Badge>
+            }
+            text={desctiption}
+            placement="right-start"
+            trigger="hover"
+            hoverTimeout={500}
+            maxWidth="400px"
+            hasArrow={false}
+            style={{
+                verticalAlign: 'middle',
+            }}
+        />
+    </div>
+);
diff --git a/website/plasma-giga-docs/src/components/index.ts b/website/plasma-giga-docs/src/components/index.ts
@@ -1,3 +1,4 @@
 export { CodeSandbox } from './CodeSandbox';
 export { Description } from './Description';
 export { PropsTable } from './PropsTable';
+export { DocsBadge as Badge } from './Badge';
diff --git a/website/plasma-web-docs/docs/components/AudioPlayer.mdx b/website/plasma-web-docs/docs/components/AudioPlayer.mdx
@@ -3,10 +3,12 @@ id: AudioPlayer
 title: AudioPlayer
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # AudioPlayer
 
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="AudioPlayer" />
 <PropsTable name="AudioPlayer" />
 <StorybookLink name="AudioPlayer" />

diff --git a/website/plasma-web-docs/docs/components/Card.mdx b/website/plasma-web-docs/docs/components/Card.mdx
@@ -3,9 +3,12 @@ id: card
 title: Card
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # Card
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 Набор компонентов для создания карточек.
 
 <StorybookLink name="Card" />

diff --git a/website/plasma-web-docs/docs/components/Carousel.mdx b/website/plasma-web-docs/docs/components/Carousel.mdx
@@ -3,9 +3,12 @@ id: carousel
 title: Carousel
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # Carousel
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 Набор компонентов для создания списков с прокруткой (галерей).
 
 <StorybookLink name="Carousel" />

diff --git a/website/plasma-web-docs/docs/components/ElasticGrid.mdx b/website/plasma-web-docs/docs/components/ElasticGrid.mdx
@@ -3,10 +3,12 @@ id: ElasticGrid
 title: ElasticGrid
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # ElasticGrid
 
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="ElasticGrid" />
 <PropsTable name="ElasticGrid" />
 <StorybookLink name="ElasticGrid" />

diff --git a/website/plasma-web-docs/docs/components/Modal.mdx b/website/plasma-web-docs/docs/components/Modal.mdx
@@ -3,9 +3,11 @@ id: modal
 title: Modal
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # Modal
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
 <Description name="Modal" />
 <PropsTable name="Modal" />
 <StorybookLink name="Modal" />

diff --git a/website/plasma-web-docs/docs/components/Overlay.mdx b/website/plasma-web-docs/docs/components/Overlay.mdx
@@ -3,9 +3,11 @@ id: overlay
 title: Overlay
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # Overlay
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
 <Description name="Overlay" />
 <PropsTable name="Overlay" exclude={['css']} />
 <StorybookLink name="Overlay" />
diff --git a/website/plasma-web-docs/docs/components/Portal.mdx b/website/plasma-web-docs/docs/components/Portal.mdx
@@ -3,9 +3,11 @@ id: portal
 title: Portal
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # Portal
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
 <Description name="Portal" />
 <PropsTable name="Portal" exclude={['css']} />
 <StorybookLink name="Portal" />

diff --git a/website/plasma-web-docs/docs/components/PreviewGallery.mdx b/website/plasma-web-docs/docs/components/PreviewGallery.mdx
@@ -3,10 +3,12 @@ id: PreviewGallery
 title: PreviewGallery
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # PreviewGallery
 
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="PreviewGallery" />
 <PropsTable name="PreviewGallery" />
 <StorybookLink name="PreviewGallery" />

diff --git a/website/plasma-web-docs/docs/components/Upload.mdx b/website/plasma-web-docs/docs/components/Upload.mdx
@@ -3,10 +3,12 @@ id: Upload
 title: Upload
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # Upload
 
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="Upload" />
 <PropsTable name="Upload" />
 <StorybookLink name="Upload" />

diff --git a/website/plasma-web-docs/docs/components/UploadAudio.mdx b/website/plasma-web-docs/docs/components/UploadAudio.mdx
@@ -3,9 +3,11 @@ id: UploadAudio
 title: UploadAudio
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
-## UploadAudio
+# UploadAudio
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
 <Description name="UploadAudio" />
 <PropsTable name="UploadAudio" />
 <StorybookLink name="UploadAudio" />