feat(component): Add Tag component (#3062)

---------

Co-authored-by: Samuel Collin <samuel.collin@orange.com>
Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com>
Co-authored-by: Maxime Lardenois <maxime.lardenois@orange.com>
Co-authored-by: Vincent Prothais <vincent.prothais@orange.com>

Author: 5 people

.bundlewatch.config.json

@@ -2,11 +2,11 @@
   "files": [
     {
       "path": "./dist/css/ouds-web-bootstrap.css",
-      "maxSize": "67.25 kB"
+      "maxSize": "69 kB"
     },
     {
       "path": "./dist/css/ouds-web-bootstrap.min.css",
-      "maxSize": "63.75 kB"
+      "maxSize": "65.5 kB"
     },
     {
       "path": "./dist/css/ouds-web-grid.css",
@@ -34,11 +34,11 @@
     },
     {
       "path": "./dist/css/ouds-web.css",
-      "maxSize": "58.5 kB"
+      "maxSize": "60.0 kB"
     },
     {
       "path": "./dist/css/ouds-web.min.css",
-      "maxSize": "55.0 kB"
+      "maxSize": "56.25 kB"
     },
     {
       "path": "./dist/js/ouds-web.bundle.js",

scss/_tags.scss

@@ -2244,44 +2244,6 @@ $footer-gap:                              $spacer * .75 !default;
 $footer-gap-xl:                           $spacer * 1.7 !default;
 // scss-docs-end footer
 
-
-// Tags
-
-// scss-docs-start tag-variables
-$tag-color:                         var(--#{$prefix}body-color) !default;
-$tag-bg:                            var(--#{$prefix}body-bg) !default;
-
-$tag-gap:                           map-get($spacers, 1) !default;
-$tag-font-shift:                    $spacer * .1 !default;
-$tag-font-weight:                   $font-weight-bold !default;
-$tag-border-width:                  var(--#{$prefix}border-width) !default;
-$tag-border-radius:                 var(--#{$prefix}border-radius-pill) !default;
-
-$tag-padding-x:                     $spacer * .65 !default;
-$tag-padding-y:                     $spacer * .45 !default;
-$tag-icon-size:                     $spacer * 1.2 !default;
-$tag-icon-margin-start:             -$spacer * .35 !default;
-$tag-close-margin-end:              -$spacer * .3 !default;
-$tag-close-margin-start:            $spacer * .2 !default;
-$tag-font-size:                     $font-size-base !default;
-
-$tag-active-color:                  var(--#{$prefix}highlight-color) !default;
-$tag-disabled-color:                var(--#{$prefix}color-content-disabled) !default;
-$tag-border-color:                  var(--#{$prefix}color-border-default) !default;
-$tag-active-decoration-color:       var(--#{$prefix}highlight-bg) !default;
-// scss-docs-end tag-variables
-
-// scss-docs-start tag-sm-variables
-$tag-padding-x-sm:                  $spacer * .4 !default;
-$tag-padding-y-sm:                  $spacer * .25 !default;
-$tag-icon-size-sm:                  $spacer !default;
-$tag-icon-margin-start-sm:          -$spacer * .1 !default;
-$tag-close-margin-end-sm:           -$spacer * .25 !default;
-$tag-close-margin-start-sm:         0 !default;
-$tag-font-size-sm:                  $font-size-sm !default;
-// scss-docs-end tag-sm-variables
-
-
 // Local navigation
 
 // scss-docs-start local-nav-variables

scss/_variables.scss

@@ -156,7 +156,6 @@
     - title: Sticker
       draft: true
     - title: Tags
-      draft: true
     - title: Title bars
       draft: true
     - title: Toasts

site/data/sidebar.yml

@@ -5,8 +5,8 @@
 <details class="mt-md mb-2xl" data-sb-css-bootstrap="true">
   <summary class="py-sm">
     Bootstrap
-    <span class="tag tag-sm float-end">
-      <code class="text-default">$enable-bootstrap-compatibility: true</code>
+    <span class="tag tag-sm text-bg-status-neutral-muted float-end">
+      <code>$enable-bootstrap-compatibility: true</code>
     </span>
   </summary>
 

site/src/components/shortcodes/BootstrapCompatibility.astro

@@ -137,7 +137,7 @@ if (filePath && fileMatch && codeToDisplay) {
 
 <div class:list={[{ 'bd-code-snippet': !nestedInExample }, containerClass]}>
   {Astro.slots.has('bar') ? <slot name="bar" /> : null}
-  <div class="highlight">
+  <div class="highlight pe-md-4xl">
     {
       codeToDisplay && lang ? (
         <Prism code={codeToDisplay} lang={lang} />

site/src/components/shortcodes/Code.astro

@@ -36,6 +36,11 @@ interface Props {
    * @default true
    */
   showPreview?: boolean
+  /**
+   * Defines if the toolbar with Stackblitz and copy buttons should be visible or not.
+   * @default true
+   */
+  showToolbar?: boolean
 }
 
 const {
@@ -45,7 +50,8 @@ const {
   id,
   lang = 'html',
   showMarkup = true,
-  showPreview = true
+  showPreview = true,
+  showToolbar = true
 } = Astro.props
 
 let markup = Array.isArray(code) ? code.join('\n') : code
@@ -65,7 +71,7 @@ const simplifiedMarkup = markup
 <div class="bd-example-snippet bd-code-snippet">
   {
     showPreview && (
-      <div id={id} class:list={['bd-example order-first m-none border-none', className]}>
+      <div id={id} class:list={['bd-example order-first m-none border-none', className, showToolbar ? '' : 'border-default border-thin border-bottom']}>
         <Fragment set:html={markup} />
       </div>
     )
@@ -75,7 +81,7 @@ const simplifiedMarkup = markup
     showMarkup && (
       <>
         <Code code={simplifiedMarkup} lang={lang} nestedInExample={true} />
-        {showPreview && (
+        {showPreview && showToolbar && (
           <div class="d-flex order-first align-items-center highlight-toolbar ps-lg border-top border-bottom border-thin border-default">
             <small class="font-monospace text-muted text-uppercase my-sm">{lang}</small>
             <!-- OUDS mod: buttons are not displayed on small screens -->