fixes

packages/design-system/lib/components/RateCard/Code/index.tsx

@@ -0,0 +1,122 @@
+import { Rate } from '../types'
+
+import styles from '../rate-card.module.css'
+import { Typography } from '../../Typography'
+import { Button } from '../../Button'
+import InfoCircleIcon from '../../Icons/InfoCircle'
+import { variants } from '../variants'
+
+interface CodeRateCardProps {
+  name: string
+  value: string
+  isSelected: boolean
+  rateTitle: string
+  paymentTerm: string
+  rate: Rate
+  bannerText: string
+  comparisonRate?: Omit<Rate, 'label'>
+  approximateRate?: Rate
+  isHighlightedRate?: boolean
+  handleChange: () => void
+  handleTermsClick?: () => void
+}
+
+export default function CodeRateCard({
+  name,
+  value,
+  isSelected,
+  rateTitle,
+  paymentTerm,
+  rate,
+  approximateRate,
+  comparisonRate,
+  bannerText,
+  isHighlightedRate,
+  handleChange,
+  handleTermsClick,
+}: CodeRateCardProps) {
+  const classNames = variants({
+    variant: 'Code',
+  })
+
+  return (
+    <label>
+      <input
+        className={styles.radio}
+        type="radio"
+        name={name}
+        value={value}
+        checked={isSelected}
+        onChange={handleChange}
+      />
+      <div className={classNames}>
+        <Typography variant="Tag/sm">
+          <p className={styles.banner}>{bannerText}</p>
+        </Typography>
+        <div className={styles.container}>
+          <header>
+            <Typography variant="Tag/sm">
+              <h3 className={styles.title}>
+                <Button
+                  variant="Icon"
+                  color="IconDefault"
+                  size="Small"
+                  onPress={handleTermsClick}
+                >
+                  <InfoCircleIcon height={20} width={20} />
+                </Button>
+                {rateTitle}
+                <span className={styles.textSecondary}>
+                  {` / ${paymentTerm}`}
+                </span>
+              </h3>
+            </Typography>
+          </header>
+          <div className={styles.content}>
+            <div
+              className={`${styles.rateRow} ${isHighlightedRate ? styles.highlightedRate : ''}`}
+            >
+              <Typography variant="Body/Supporting text (caption)/smBold">
+                <p>{rate.label}</p>
+              </Typography>
+              <Typography variant="Title/Subtitle/md">
+                <p>
+                  {rate.price}{' '}
+                  <Typography variant="Body/Supporting text (caption)/smBold">
+                    <span>{rate.unit}</span>
+                  </Typography>
+                </p>
+              </Typography>
+            </div>
+            {comparisonRate ? (
+              <div className={`${styles.rateRow} ${styles.comparisonRate}`}>
+                <Typography variant="Title/Subtitle/md">
+                  <p>
+                    <span className={styles.strikethrough}>{rate.price}</span>{' '}
+                    <Typography variant="Body/Supporting text (caption)/smBold">
+                      <span className={styles.strikethrough}>
+                        {comparisonRate.unit}
+                      </span>
+                    </Typography>
+                  </p>
+                </Typography>
+              </div>
+            ) : null}
+            {approximateRate ? (
+              <div className={`${styles.rateRow} ${styles.approximateRate}`}>
+                <Typography variant="Body/Supporting text (caption)/smRegular">
+                  <p>{approximateRate.label}</p>
+                </Typography>
+                <Typography variant="Body/Supporting text (caption)/smRegular">
+                  <p>
+                    {approximateRate.price} {approximateRate.unit}
+                  </p>
+                </Typography>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </label>
+  )
+}