From e2c468c1289084c2de0f0c5fe039d6170499060f Mon Sep 17 00:00:00 2001
From: EnzoVezzaro <enzo-vezzaro@live.it>
Date: Thu, 10 Feb 2022 15:37:34 +0100
Subject: [PATCH] added radio to pricing tabs on publish (#1067)

* added radio to pricing tabs on publish

* adding padding to tabs with radio

* correct unnecessary component and style class

* adding attribute selector to css rule
---
 .../@shared/FormInput/InputElement.module.css |  1 -
 src/components/@shared/atoms/Tabs.module.css  |  4 ++++
 src/components/@shared/atoms/Tabs.tsx         | 19 ++++++++++++++++---
 .../Publish/Pricing/index.module.css          |  4 ++++
 src/components/Publish/Pricing/index.tsx      |  1 +
 5 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/components/@shared/FormInput/InputElement.module.css b/src/components/@shared/FormInput/InputElement.module.css
index d1d6494fd..233643a59 100644
--- a/src/components/@shared/FormInput/InputElement.module.css
+++ b/src/components/@shared/FormInput/InputElement.module.css
@@ -96,7 +96,6 @@
   padding: 0;
   font-weight: var(--font-weight-bold);
   font-size: var(--font-size-small);
-  color: var(--font-color-text);
   padding-left: 0.5rem;
 }
 
diff --git a/src/components/@shared/atoms/Tabs.module.css b/src/components/@shared/atoms/Tabs.module.css
index 21a160e7b..0050b54e4 100644
--- a/src/components/@shared/atoms/Tabs.module.css
+++ b/src/components/@shared/atoms/Tabs.module.css
@@ -38,6 +38,10 @@
   cursor: not-allowed;
 }
 
+.tab > div {
+  margin: 0;
+}
+
 .tabContent {
   padding: calc(var(--spacer) / 2);
 }
diff --git a/src/components/@shared/atoms/Tabs.tsx b/src/components/@shared/atoms/Tabs.tsx
index 7e7c01606..dad576451 100644
--- a/src/components/@shared/atoms/Tabs.tsx
+++ b/src/components/@shared/atoms/Tabs.tsx
@@ -1,5 +1,6 @@
 import React, { ReactElement, ReactNode } from 'react'
 import { Tab, Tabs as ReactTabs, TabList, TabPanel } from 'react-tabs'
+import InputElement from '@shared/FormInput/InputElement'
 import styles from './Tabs.module.css'
 
 export interface TabsItem {
@@ -12,12 +13,14 @@ export default function Tabs({
   items,
   className,
   handleTabChange,
-  defaultIndex
+  defaultIndex,
+  showRadio
 }: {
   items: TabsItem[]
   className?: string
   handleTabChange?: (tabName: string) => void
   defaultIndex?: number
+  showRadio?: boolean
 }): ReactElement {
   return (
     <ReactTabs
@@ -25,14 +28,24 @@ export default function Tabs({
       defaultIndex={defaultIndex}
     >
       <TabList className={styles.tabList}>
-        {items.map((item) => (
+        {items.map((item, index) => (
           <Tab
             className={styles.tab}
             key={item.title}
             onClick={handleTabChange ? () => handleTabChange(item.title) : null}
             disabled={item.disabled}
           >
-            {item.title}
+            {showRadio ? (
+              <InputElement
+                name={item.title}
+                type="radio"
+                checked={defaultIndex === index}
+                options={[item.title]}
+                readOnly
+              />
+            ) : (
+              item.title
+            )}
           </Tab>
         ))}
       </TabList>
diff --git a/src/components/Publish/Pricing/index.module.css b/src/components/Publish/Pricing/index.module.css
index c380f3aaf..0bb34deff 100644
--- a/src/components/Publish/Pricing/index.module.css
+++ b/src/components/Publish/Pricing/index.module.css
@@ -2,6 +2,10 @@
   text-align: center;
 }
 
+.pricing ul > li[class*='Tabs_tab'] {
+  padding: calc(var(--spacer) / 4) var(--spacer);
+}
+
 .pricing [class*='Tabs_tabContent'] {
   padding-left: 0;
   padding-right: 0;
diff --git a/src/components/Publish/Pricing/index.tsx b/src/components/Publish/Pricing/index.tsx
index 569c67e22..bf41ab357 100644
--- a/src/components/Publish/Pricing/index.tsx
+++ b/src/components/Publish/Pricing/index.tsx
@@ -71,6 +71,7 @@ export default function PricingFields(): ReactElement {
       handleTabChange={handleTabChange}
       defaultIndex={type === 'dynamic' ? 1 : type === 'free' ? 2 : 0}
       className={styles.pricing}
+      showRadio
     />
   )
 }