) => void;
- isDisabled?: boolean;
- isHorizontal?: boolean;
- className?: string;
- dataQa?: string | null;
-}
-
-/** @deprecated Use StyledRadio instead */
-export const RadioButton = ({
- options = [],
- selectedRadio,
- onChange,
- isDisabled = false,
- isHorizontal = true,
- className,
- dataQa,
-}: RadioButtonProps) => {
- return (
-
- {options.map((item, index) => (
- onChange(item)}
- />
- ))}
-
- );
-};
diff --git a/src/components/RadioButton/index.scss b/src/components/RadioButton/index.scss
deleted file mode 100644
index 489fc23e..00000000
--- a/src/components/RadioButton/index.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-/*
- * Copyright (c) 2021 AccelByte Inc. All Rights Reserved.
- * This is licensed software from AccelByte Inc, for limitations
- * and restrictions contact your company contract manager.
- */
-
-@import "src/styles/variables";
-
-.radio-group-horizontal {
- font-family: $font-family-primary;
- display: flex;
- flex-wrap: wrap;
- flex-direction: row;
- .radio-item:not(:last-child) {
- margin-right: 20px;
- }
-}
-
-.radio-group-vertical {
- font-family: $font-family-primary;
- display: block;
- .radio-item:not(:last-child) {
- margin-bottom: 10px;
- }
-}
-
-.radio-item {
- cursor: pointer;
- display: flex;
- flex-direction: row;
- align-items: center;
- .radio-icon {
- display: inline-block;
- width: 20px;
- height: 20px;
- border: 1px solid $input-borderColor--inactive;
- border-radius: 50%;
- position: relative;
- vertical-align: middle;
- margin-right: 10px;
- box-sizing: border-box;
- }
- .radio-label {
- font-size: $font-size-h6;
- color: $color--text--primary;
- }
- &.isDisabled {
- cursor: not-allowed;
- .radio-label {
- color: $radio-color--disabled;
- }
- .radio-icon {
- &:hover {
- border-color: $base-40;
- }
- }
- &.isSelected {
- .radio-icon {
- border-color: $base-40;
- &:hover {
- border-color: $base-40;
- }
- &:active {
- border-color: $base-40;
- }
- }
- }
- }
- &.isSelected {
- .radio-icon {
- border: 6px solid $radio-borderColor--selected;
- &:hover {
- border-color: $brand-60;
- }
- &:active {
- border-color: $brand-100;
- }
- &::before {
- display: none !important;
- }
- }
- }
-}
diff --git a/src/components/StyledRadio/StyledRadio.tsx b/src/components/StyledRadio/StyledRadio.tsx
index a7737c48..c34bae69 100644
--- a/src/components/StyledRadio/StyledRadio.tsx
+++ b/src/components/StyledRadio/StyledRadio.tsx
@@ -55,12 +55,16 @@ export const StyledRadio = ({
disabled,
selected: item.value === selectedRadio,
})}
- {...(!disabled && item.value !== selectedRadio && { onClick: onChange.bind(null, item) })}
key={String(item.value)}
data-qa-props={dataQa && item.value}
>
-
- {item.label}
+
+
+ {item.label}
+
{!isHorizontal &&
item.helper &&
(isList ? (
diff --git a/src/components/StyledRadio/index.scss b/src/components/StyledRadio/index.scss
index d21f9493..1672ed3f 100644
--- a/src/components/StyledRadio/index.scss
+++ b/src/components/StyledRadio/index.scss
@@ -23,7 +23,6 @@
.radio-item {
margin-right: 20px;
- cursor: pointer;
&:hover {
background-color: transparent;
.radio-icon {
@@ -47,6 +46,9 @@
border-color: $base-40;
}
}
+ .selectable-field {
+ cursor: not-allowed;
+ }
&.selected {
.radio-icon {
border-color: $base-40;
@@ -70,6 +72,10 @@
margin-right: 10px;
box-sizing: border-box;
}
+ .selectable-field {
+ cursor: pointer;
+ width: fit-content;
+ }
&.selected {
.radio-icon {
border: 5px solid $radio-borderColor--selected;
diff --git a/src/components/StyledRadioTabVertical/StyledRadioTabVertical.tsx b/src/components/StyledRadioTabVertical/StyledRadioTabVertical.tsx
index c71f46e8..457c38cd 100644
--- a/src/components/StyledRadioTabVertical/StyledRadioTabVertical.tsx
+++ b/src/components/StyledRadioTabVertical/StyledRadioTabVertical.tsx
@@ -55,11 +55,15 @@ export const StyledRadioTabVertical = ({
selected: item.value === selectedRadio,
})}
data-qa-props={item.dataQaProps}
- {...(!disabled && item.value !== selectedRadio && { onClick: onChange.bind(null, item) })}
key={String(item.value)}
>
-
- {item.label}
+
+
+ {item.label}
+
{item.value === selectedRadio && !!item.helper && (
{addLineBreaks(item.helper)}
)}
diff --git a/src/components/StyledRadioTabVertical/index.scss b/src/components/StyledRadioTabVertical/index.scss
index 81077978..d0fef16c 100644
--- a/src/components/StyledRadioTabVertical/index.scss
+++ b/src/components/StyledRadioTabVertical/index.scss
@@ -22,7 +22,6 @@
}
.radio-item {
margin-right: 20px;
- cursor: pointer;
&:hover {
background-color: transparent;
.radio-icon {
@@ -45,6 +44,9 @@
border-color: $base-40;
}
}
+ .selectable-field {
+ cursor: not-allowed;
+ }
&.selected {
.radio-icon {
border-color: $base-40;
@@ -68,6 +70,10 @@
margin-right: 10px;
box-sizing: border-box;
}
+ .selectable-field {
+ cursor: pointer;
+ width: fit-content;
+ }
&.selected {
.radio-icon {
border: 5px solid $radio-borderColor--selected;
diff --git a/src/components/index.ts b/src/components/index.ts
index 628c7601..3af28b1f 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -42,7 +42,6 @@ export * from "./Pagination/Pagination";
export * from "./Popover/Popover";
export * from "./ProgressModalPage/ProgressModalPage";
export * from "./PureSearchPanel/PureSearchPanel";
-export * from "./RadioButton/RadioButton";
export * from "./ScrollSpy/ScrollSpy";
export * from "./Select/Select";
export * from "./Spinner/Spinner";