Merge branch 'main' into PPF-416-improve-styling

cultuurnet · Apr 19, 2024 · 39d912e · 39d912e
2 parents 92a9456 + ac5d99c
commit 39d912e
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 45 deletions.
diff --git a/public/vendor/horizon/app-dark.css b/public/vendor/horizon/app-dark.css
diff --git a/public/vendor/horizon/app.css b/public/vendor/horizon/app.css
diff --git a/public/vendor/horizon/app.js b/public/vendor/horizon/app.js
diff --git a/public/vendor/horizon/mix-manifest.json b/public/vendor/horizon/mix-manifest.json
@@ -1,7 +1,7 @@
 {
-    "/app.js": "/app.js?id=7e1968acfd75b8dc843675097962e3ce",
-    "/app-dark.css": "/app-dark.css?id=15c72df05e2b1147fa3e4b0670cfb435",
-    "/app.css": "/app.css?id=4d6a1a7fe095eedc2cb2a4ce822ea8a5",
+    "/app.js": "/app.js?id=4999da9248177ed487693daec2a7d3fe",
+    "/app-dark.css": "/app-dark.css?id=dcaca44a9f0f1d019e3cd3d76c3cb8fd",
+    "/app.css": "/app.css?id=14e3bcd1f1b1cf88e63e945529c4d0ce",
     "/img/favicon.png": "/img/favicon.png?id=1542bfe8a0010dcbee710da13cce367f",
     "/img/horizon.svg": "/img/horizon.svg?id=904d5b5185fefb09035384e15bfca765",
     "/img/sprite.svg": "/img/sprite.svg?id=afc4952b74895bdef3ab4ebe9adb746f"

diff --git a/resources/ts/Components/RadioButtonGroup.tsx b/resources/ts/Components/RadioButtonGroup.tsx
@@ -1,7 +1,22 @@
-import type { ComponentProps, ElementType, ReactElement } from "react";
+import type { ComponentProps, ReactElement } from "react";
 import React from "react";
 import { classNames } from "../utils/classNames";
 
+export const RadioButtonGroupLabel = ({
+  name,
+  description,
+}: {
+  name: string | ReactElement;
+  description: string | ReactElement;
+}) => (
+  <div className="flex flex-col flex-grow justify-between md:flex-row items-center gap-2">
+    <span>{name}</span>
+    <span className="text-neutral-700 font-thin max-md:text-center text-sm">
+      {description}
+    </span>
+  </div>
+);
+
 type Option = {
   label: string | ReactElement;
   value: string;
@@ -15,26 +30,6 @@ type Props = {
   orientation: "vertical" | "horizontal";
 } & Omit<ComponentProps<"ul">, "onChange">;
 
-export const RichRadioButton = ({
-  name,
-  description,
-  Icon,
-}: {
-  name: string | ReactElement;
-  description: string | ReactElement;
-  Icon?: ElementType;
-}) => (
-  <div className="flex flex-col md:flex-row justify-between items-center gap-2">
-    <span className="flex flex-row gap-2 justify-between text-left">
-      {Icon && <Icon className="h-7 w-7" />}
-      <span>{name}</span>
-    </span>
-    <span className="text-neutral-700 font-thin max-md:text-center text-sm">
-      {description}
-    </span>
-  </div>
-);
-
 export const RadioButtonGroup = ({
   name,
   options,
@@ -58,7 +53,7 @@ export const RadioButtonGroup = ({
 
   const optionClasses = (index: number, option: Option) => {
     return classNames(
-      "px-4 py-2 text-base font-medium text-center border border-gray-200 hover:bg-gray-100 focus:z-10 focus:ring-2 ring-publiq-blue-dark focus:bg-gray-100 max-sm:rounded-lg cursor-pointer",
+      "px-4 py-2 text-base font-medium border border-gray-200 hover:bg-gray-100 focus:z-10 focus:ring-2 ring-publiq-blue-dark focus:bg-gray-100 max-sm:rounded-lg cursor-pointer",
       getRoundedStyles(index),
       value === option.value
         ? "bg-publiq-gray-75 text-publiq-blue-dark"
@@ -88,19 +83,24 @@ export const RadioButtonGroup = ({
           }}
           className={classNames(
             optionClasses(index, option),
-            "px-10 py-3 max-md:px-5 max-md:py-2 w-[100%] h-[100%]"
+            "flex items-center gap-5 px-10 py-3 max-md:px-5 max-md:py-2 w-[100%] h-[100%]"
           )}
         >
           <input
             type="radio"
             id={option.value}
             name={name}
             value={option.value}
-            className="hidden"
+            checked={value === option.value}
           />
-          <label htmlFor={option.value} className="cursor-pointer text-right">
-            {option.label}
-          </label>
+          <div className="flex flex-grow">
+            <label
+              htmlFor={option.value}
+              className="flex flex-grow cursor-pointer"
+            >
+              {option.label}
+            </label>
+          </div>
         </li>
       ))}
     </ul>

diff --git a/resources/ts/Pages/Integrations/New.tsx b/resources/ts/Pages/Integrations/New.tsx
@@ -18,7 +18,7 @@ import {
 } from "../../types/IntegrationType";
 import {
   RadioButtonGroup,
-  RichRadioButton,
+  RadioButtonGroupLabel,
 } from "../../Components/RadioButtonGroup";
 import type { Subscription } from "../../types/Subscription";
 import { useGetPricingPlans } from "../../hooks/useGetPricingPlans";
@@ -111,13 +111,12 @@ const New = ({ subscriptions }: Props) => {
               name="integrationType"
               value={data.integrationType}
               options={integrationTypesInfo.map(
-                ({ Icon, ...integrationTypeInfo }) => ({
+                ({ ...integrationTypeInfo }) => ({
                   value: integrationTypeInfo.type,
                   label: (
-                    <RichRadioButton
+                    <RadioButtonGroupLabel
                       name={integrationTypeInfo.title}
                       description={integrationTypeInfo.description}
-                      Icon={Icon}
                     />
                   ),
                 })
@@ -148,8 +147,8 @@ const New = ({ subscriptions }: Props) => {
                 options={pricingPlans.map((pricingPlan) => ({
                   value: pricingPlan.id,
                   label: (
-                    <RichRadioButton
-                      name={`${pricingPlan.title} (${pricingPlan.price})`}
+                    <RadioButtonGroupLabel
+                      name={`${pricingPlan.title} ${pricingPlan.price}`}
                       description={pricingPlan.description}
                     />
                   ),