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

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;
 }
 

src/components/@shared/atoms/Tabs.module.css

@@ -38,6 +38,10 @@
   cursor: not-allowed;
 }
 
+.tab > div {
+  margin: 0;
+}
+
 .tabContent {
   padding: calc(var(--spacer) / 2);
 }

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>

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;

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
     />
   )
 }