From 23a8d01e4786db7658df33f763b544490160363f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A9sor=20ILOYI?= <tiloyi@users.noreply.github.com>
Date: Wed, 4 Jan 2023 10:19:22 +0100
Subject: [PATCH] fix(component/option-card): update the z-index values of the
 component elements (#1319)

---
 packages/styles/components/_c.option-card.scss              | 6 +++---
 src/docs/Components/OptionGroup/OptionCard/code.mdx         | 4 ++++
 .../OptionGroup/OptionCard/previews/product.preview.scss    | 4 ----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/styles/components/_c.option-card.scss b/packages/styles/components/_c.option-card.scss
index 10cb0928a..ad9449cbe 100644
--- a/packages/styles/components/_c.option-card.scss
+++ b/packages/styles/components/_c.option-card.scss
@@ -16,7 +16,7 @@
       position: absolute;
       right: $mu100;
       top: $mu100;
-      z-index: 10;
+      z-index: 4;
 
       &:focus {
         box-shadow: none;
@@ -46,7 +46,7 @@
         textarea,
         #{$parent}__focusable,
         [tabindex]:not([tabindex="-1"]) {
-          z-index: 2;
+          z-index: 3;
         }
       }
 
@@ -81,7 +81,7 @@
     top: 50%;
     transform: translate(-50%, -50%);
     width: 100%;
-    z-index: 5;
+    z-index: 2;
 
     &-text {
       @include visually-hidden();
diff --git a/src/docs/Components/OptionGroup/OptionCard/code.mdx b/src/docs/Components/OptionGroup/OptionCard/code.mdx
index 7c3f32601..c704649cf 100644
--- a/src/docs/Components/OptionGroup/OptionCard/code.mdx
+++ b/src/docs/Components/OptionGroup/OptionCard/code.mdx
@@ -106,3 +106,7 @@ To achieve that you have to add `mc-option-card--small` modifier to the `mc-opti
 In some cases, your content need to fill the whole card. To add an image for example.
 
 To achieve that you have to add `mc-option-card--no-padding` modifier to the `mc-option-card` element.
+
+## Implementation examples
+
+<Preview path="product" />
diff --git a/src/docs/Components/OptionGroup/OptionCard/previews/product.preview.scss b/src/docs/Components/OptionGroup/OptionCard/previews/product.preview.scss
index 29ca84335..3cc1d4bd2 100644
--- a/src/docs/Components/OptionGroup/OptionCard/previews/product.preview.scss
+++ b/src/docs/Components/OptionGroup/OptionCard/previews/product.preview.scss
@@ -50,7 +50,3 @@
 .hide-button {
   display: none;
 }
-
-#exampleButton {
-  z-index: 10;
-}