diff --git a/package.json b/package.json
index 46716788..fcd2a910 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
"react": "^18.0.0",
"react-bootstrap": "^2.10.2",
"react-dom": "^18.0.0",
+ "react-tooltip": "^5.28.0",
"sass": "^1.77.3"
},
"devDependencies": {
diff --git a/src/components/Link/index.js b/src/components/Link/index.js
index a2917298..bbc9140d 100644
--- a/src/components/Link/index.js
+++ b/src/components/Link/index.js
@@ -12,6 +12,7 @@ export default function Link ({href, className, target, title, children, ...prop
rel={(!isInternal || target === `_blank`) ? `noopener noreferrer` : null}
title={title || null}
onClick={props.onClick}
+ {...props}
>
{children}
diff --git a/src/components/ShieldsBadge/index.js b/src/components/ShieldsBadge/index.js
new file mode 100644
index 00000000..3ad2ae13
--- /dev/null
+++ b/src/components/ShieldsBadge/index.js
@@ -0,0 +1,76 @@
+import React from 'react'
+import {useEffect, useState} from 'react'
+import { Tooltip } from 'react-tooltip'
+import { useColorMode } from '@docusaurus/theme-common'
+import Link from '/src/components/Link';
+
+function generateUniqueId(prefix = 'id') {
+ return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
+}
+export const badgeSrc = ({ title, color, logo, logoColor, label, labelColor, version }) => {
+ if (version) {
+ title = version
+ label = label ?? 'version'
+ color = color ?? 'blue'
+ }
+
+ let encodedTitle = title ? title.replace(/-/g, '--').replace(/_/g, '__').replace(/ /g, '_') : ''
+
+ const colorsMatch = {
+ pink: '#FF70E0',
+ purple: '#9E75FF',
+ green: '#78C700',
+ orange: '#FF9100',
+ cyan: '#08FFD1',
+ yellow: '#DEFF1A'
+ }
+
+ color = colorsMatch[color] || color
+ labelColor = colorsMatch[labelColor] || labelColor || 'gray'
+ label = label ? `&label=${label}&labelColor=${labelColor}` : ''
+
+ logoColor = colorsMatch[logoColor] || logoColor || 'white'
+ logo = logo ? `&logo=${logo}&logoColor=${logoColor}` : ''
+
+ return encodeURI(
+ `https://img.shields.io/badge/${encodedTitle}-${color || 'gray'}?${logo}${label}`
+ ).replace(/#/g, '%23')
+}
+
+function Tag ({ children, href, ...props }) {
+ return href ? (
+
+ {children}
+
+ ) : (
+ {children}
+ )
+}
+
+export default function ShieldsBadge ({ title, color, href, label, labelColor, logo, logoColor, version, tooltip = null, ...props }) {
+
+ const src = badgeSrc({ title, color, logo, logoColor, label, labelColor, version })
+
+ const tooltipId = tooltip ? generateUniqueId('tooltip') : null;
+
+ const {colorMode} = useColorMode();
+ const [toolTipColor, setTooltipColor] = useState('light');
+
+ useEffect(() => {
+ if (tooltip) {
+ setTooltipColor(colorMode === 'light' ? 'dark' : 'light');
+ }
+ }, [colorMode]);
+
+ return src && <>
+
+ 
+ {tooltip && (
+
+ )}
+
+
+}
diff --git a/src/pages/components.md b/src/pages/components.md
index 4ab66654..a546fce6 100644
--- a/src/pages/components.md
+++ b/src/pages/components.md
@@ -127,35 +127,13 @@ You can add images in two ways on our doc.
## Gallery/Slider
Use this to showcase a series of images or content that benefit from a swiping or sliding interface.
-- **Code**
+- **Codes**
```jsx
```
**Result**
-## Gallery/Slider images with links.
-
-- **Code**
-```jsx
-
-
-
-
-
-
-
-
-```
-**Result**
-
-
-
-
-
-
-
-
## Video
Use this to demonstrate functionalities, complex explanations, or walkthroughs.
@@ -586,7 +564,6 @@ description="Get an API key & make your first API call in minutes. Get an API ke
/>
-
## Grid of Cards no filter
- **Code**
@@ -675,6 +652,83 @@ description="Get an API key & make your first API call in minutes. Get an API ke
Default , small , and large buttons for different use cases.
+## Badges
+Badges based on [shields.io](https://shields.io/)
+
+Available options:
+```jsx
+
+```
+Detailed option description you can find [here](https://shields.io/badges/static-badge)
+
+- **Code**
+```jsx
+
+
+
+
+```
+- **Render**
+
+
+
+
+
+#### Version badge
+
+- **Code**
+```jsx
+ //default color is blue
+ //you can change color
+```
+- **Render**
+
+
+
+
+#### Colors
+
+Brand colors (pink, purple, green, orange) or any text colors, hex or rgb values
+
+- **Code**
+```jsx
+
+
+
+
+
+```
+
+- **Render**
+
+
+
+
+
+
+
+#### Tooltip, logo and link
+Available logo options you can find [here](https://github.com/inttter/md-badges).
+- **Code**
+```jsx
+
+
+
+```
+
+- **Render**
+
+
+
diff --git a/src/scss/base/_content.scss b/src/scss/base/_content.scss
index 327e85f1..7ee96eef 100644
--- a/src/scss/base/_content.scss
+++ b/src/scss/base/_content.scss
@@ -32,7 +32,6 @@ ul{
color: var(--bs-heading-color);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
- display: inline;
font-size: $f40;
letter-spacing: -0.04em;
margin: 0;
@@ -152,7 +151,7 @@ ul{
}
}
- img{
+ img:not([src*="shields.io"]){
border: 1px solid var(--rsk-image-border-color);
border-radius: 10px;
max-height: 500px; //TODO test if works for all images
diff --git a/src/theme/MDXComponents.js b/src/theme/MDXComponents.js
index 8b13fab7..f7ac39bb 100644
--- a/src/theme/MDXComponents.js
+++ b/src/theme/MDXComponents.js
@@ -11,6 +11,7 @@ import Video from "/src/components/Video";
import Card from "/src/components/CardSimple";
import Filter from "/src/components/Filter";
import FilterItem from "/src/components/Filter/FilterItem";
+import Shield from "/src/components/ShieldsBadge";
import Button from "/src/components/Button";
import CardsGrid from "/src/components/CardsGrid";
import CardsGridItem from "/src/components/CardsGrid/Card";
@@ -20,5 +21,5 @@ export default {
...MDXComponents,
// Map the "" tag to our Highlight component
// `Highlight` will receive all props that were passed to `` in MDX
- Carousel, CarouselItem, Tabs, TabItem, Accordion, Card, Quote, Video, Filter, FilterItem, Button, CardsGrid, CardsGridItem
+ Carousel, CarouselItem, Tabs, TabItem, Accordion, Card, Quote, Video, Filter, FilterItem, Button, CardsGrid, CardsGridItem, Shield
};
diff --git a/yarn.lock b/yarn.lock
index 24289ee3..9ccac9c5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1658,6 +1658,26 @@
utility-types "^3.10.0"
webpack "^5.88.1"
+"@floating-ui/core@^1.6.0":
+ version "1.6.8"
+ resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.8.tgz#aa43561be075815879305965020f492cdb43da12"
+ integrity sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==
+ dependencies:
+ "@floating-ui/utils" "^0.2.8"
+
+"@floating-ui/dom@^1.6.1":
+ version "1.6.12"
+ resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.12.tgz#6333dcb5a8ead3b2bf82f33d6bc410e95f54e556"
+ integrity sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==
+ dependencies:
+ "@floating-ui/core" "^1.6.0"
+ "@floating-ui/utils" "^0.2.8"
+
+"@floating-ui/utils@^0.2.8":
+ version "0.2.8"
+ resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.8.tgz#21a907684723bbbaa5f0974cf7730bd797eb8e62"
+ integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==
+
"@formspark/use-formspark@^0.1.39":
version "0.1.39"
resolved "https://registry.yarnpkg.com/@formspark/use-formspark/-/use-formspark-0.1.39.tgz#155af2f5f587d754e1541519e3d69691823770a8"
@@ -3070,7 +3090,7 @@ ci-info@^3.2.0:
resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==
-classnames@^2.3.2:
+classnames@^2.3.0, classnames@^2.3.2:
version "2.5.1"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
@@ -7169,6 +7189,14 @@ react-router@5.3.4, react-router@^5.3.4:
tiny-invariant "^1.0.2"
tiny-warning "^1.0.0"
+react-tooltip@^5.28.0:
+ version "5.28.0"
+ resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.28.0.tgz#c7b5343ab2d740a428494a3d8315515af1f26f46"
+ integrity sha512-R5cO3JPPXk6FRbBHMO0rI9nkUG/JKfalBSQfZedZYzmqaZQgq7GLzF8vcCWx6IhUCKg0yPqJhXIzmIO5ff15xg==
+ dependencies:
+ "@floating-ui/dom" "^1.6.1"
+ classnames "^2.3.0"
+
react-transition-group@^4.4.5:
version "4.4.5"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"