Merged in chore/SW-3145-move-radio-card (pull request #2533)

chore: SW-3145 Moved RadioCard to design system * chore: SW-3145 Moved RadioCard to design system * chore: SW-3145 Optimized code * chore: SW-3145 Optimized code Approved-by: Anton Gunnarsson
2025-07-08 08:25:00 +00:00
parent a68072d2f6
commit 8ae251635d
6 changed files with 18 additions and 16 deletions
--- a/packages/design-system/lib/components/Form/RadioCard/radioCard.module.css
+++ b/packages/design-system/lib/components/Form/RadioCard/radioCard.module.css
@@ -0,0 +1,87 @@
+.label {
+  position: relative;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-auto-rows: min-content;
+  grid-template-areas:
+    'icon subtitleSecondary'
+    'title subtitle';
+  border-radius: var(--Corner-radius-md);
+  border: 1px solid var(--Border-Intense);
+  background: var(--Surface-Primary-Default);
+  padding: var(--Space-x2) var(--Space-x3);
+  gap: var(--Space-x1);
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.label:hover:not(.disabled) {
+  background: var(--Surface-Primary-Hover);
+}
+
+.label.disabled {
+  background: var(--Surface-Primary-Disabled);
+  filter: grayscale(1);
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.label:has(:checked) {
+  border: 2px solid var(--Border-Interactive-Selected);
+}
+
+.label:not(:has(:checked)) .selectedIcon {
+  display: none;
+}
+
+.selectedIcon {
+  position: absolute;
+  top: calc(-1 * var(--Space-x15));
+  right: calc(-1 * var(--Space-x15));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 2px solid var(--Base-Border-Inverted);
+  border-radius: var(--Corner-radius-rounded);
+  background-color: var(--Surface-Feedback-Succes-Accent);
+}
+
+.icon {
+  grid-area: icon;
+}
+
+.title {
+  grid-area: title;
+  color: var(--Text-Default);
+}
+
+.subtitle {
+  grid-area: subtitle;
+  color: var(--Text-Default);
+  justify-self: end;
+}
+
+.subtitleSecondary {
+  grid-area: subtitleSecondary;
+  place-self: end;
+  color: var(--Text-Default);
+}
+
+.divider {
+  grid-column: 1 / -1;
+  margin: var(--Space-x1) 0;
+}
+
+.description {
+  grid-column: 1 / -1;
+  color: var(--Text-Default);
+}
+
+.descriptionSecondary {
+  grid-column: 1 / -1;
+  color: var(--Text-Secondary);
+}