fix(component/option-card): make the content element suitable to the …

…parent (#1294)

packages/styles/components/_c.option-card.scss

@@ -3,6 +3,11 @@
 .mc-option-card {
   $parent: get-parent-selector(&);
 
+  &,
+  * {
+    box-sizing: border-box;
+  }
+
   border-radius: get-border-radius("m");
   position: relative;
 
@@ -11,6 +16,7 @@
       position: absolute;
       right: $mu100;
       top: $mu100;
+      z-index: 10;
 
       &:focus {
         box-shadow: none;
@@ -75,6 +81,7 @@
     top: 50%;
     transform: translate(-50%, -50%);
     width: 100%;
+    z-index: 5;
 
     &-text {
       @include visually-hidden();
@@ -91,6 +98,7 @@
 
   &__content {
     border-radius: 4px;
+    min-height: 100%;
     padding: $mu100;
   }
 

src/docs/Components/OptionGroup/OptionCard/code.mdx

@@ -84,7 +84,7 @@ Depending on the context of use, the option-cards can have several states:
 - `checked`
 - `disabled`
 
-<Preview path="default" />
+<Preview path="withcontent" />
 
 ## Content
 

src/docs/Components/OptionGroup/OptionCard/previews/withcontent.preview.html

@@ -0,0 +1,93 @@
+<div class="example">
+  <div class="mc-option-group">
+    <div class="mc-option-card">
+      <input
+        type="checkbox"
+        name="option-group"
+        id="checkbox-01"
+        class="mc-checkbox__input mc-option-card__input"
+        aria-label="checkbox-01"
+      />
+      <label for="checkbox-01" class="mc-option-card__label">
+        <span class="mc-option-card__label-text">Label group</span>
+      </label>
+      <div class="mc-option-card__content">
+        <article class="user-card">
+          <figure class="user-card__visual">
+            <img
+              src="https://via.placeholder.com/280"
+              alt=""
+              class="user-card__img"
+            />
+          </figure>
+          <p class="user-card__title">This is a title</p>
+          <div class="user-card__content mt-body-s">
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi,
+              eveniet a tenetur praesentium accusamus deserunt aspernatur
+              voluptate id debitis laboriosam hic repellat natus qui omnis vitae
+              nam sequi molestiae in!
+            </p>
+          </div>
+        </article>
+      </div>
+    </div>
+    <div class="mc-option-card">
+      <input
+        type="checkbox"
+        name="option-group"
+        id="checkbox-02"
+        class="mc-checkbox__input mc-option-card__input"
+        aria-label="checkbox-02"
+        disabled
+      />
+      <label for="checkbox-02" class="mc-option-card__label">
+        <span class="mc-option-card__label-text">Label group</span>
+      </label>
+      <div class="mc-option-card__content">
+        <article class="user-card">
+          <figure class="user-card__visual">
+            <img
+              src="https://via.placeholder.com/280"
+              alt=""
+              class="user-card__img"
+            />
+          </figure>
+          <div class="user-card__content mt-body-s">
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi,
+              eveniet a tenetur praesentium accusamus deserunt aspernatur
+              voluptate id debitis laboriosam hic repellat natus qui omnis vitae
+              nam sequi molestiae in!
+            </p>
+          </div>
+        </article>
+      </div>
+    </div>
+    <div class="mc-option-card">
+      <input
+        type="checkbox"
+        name="option-group"
+        id="checkbox-02"
+        class="mc-checkbox__input mc-option-card__input"
+        aria-label="checkbox-02"
+        disabled
+      />
+      <label for="checkbox-02" class="mc-option-card__label">
+        <span class="mc-option-card__label-text">Label group</span>
+      </label>
+      <div class="mc-option-card__content">
+        <article class="user-card">
+          <figure class="user-card__visual">
+            <img
+              src="https://via.placeholder.com/280"
+              alt=""
+              class="user-card__img"
+            />
+          </figure>
+          <p class="user-card__title">This is a title</p>
+        </article>
+      </div>
+    </div>
+  </div>
+</div>

src/docs/Components/OptionGroup/OptionCard/previews/withcontent.preview.scss

@@ -0,0 +1,37 @@
+@import "settings-tools/all-settings";
+@import "typography/t.bodys";
+@include import-font-families();
+@import "components/c.checkbox";
+@import "components/c.option-card";
+
+.example {
+  @include set-font-family();
+
+  padding: 2rem;
+}
+
+.mc-option {
+  &-group {
+    display: flex;
+    gap: $mu125;
+  }
+
+  &-card {
+    max-width: 280px;
+    width: 100%;
+  }
+}
+
+.user-card {
+  max-width: 280px;
+
+  &__visual {
+    @include set-ratio("1x1");
+
+    margin: 0 auto;
+  }
+
+  &__title {
+    @include set-font-weight("semi-bold");
+  }
+}