@edu-tosel/design 1.0.326 → 1.0.328

package/layout/template/sign/AgreementsSet.js

@@ -55,5 +55,5 @@ export default function AgreementsSet({ onRequiredAgreementsChange, }) {
         backgrounds: "bg-green-dark hover:shadow-green",
         activeStyles: allAgreed ? "opacity-0 pointer-events-none" : "opacity-100",
     };
-    return (_jsxs("div", { className: "flex flex-col gap-4 h-full w-full", children: [!allAgreed && (_jsxs("div", { className: cn(buttonWrapper), children: [_jsxs("div", { className: "flex flex-col text-gray-500 ", children: [_jsx("div", { className: "text-green-dark font-bold", children: "\uBC84\uD2BC\uC744 \uB20C\uB7EC \uD55C\uBC88\uC5D0 \uB3D9\uC758\uD560 \uC218 \uC788\uC5B4\uC694" }), _jsx("div", { className: "text-xs text-green-dark font-medium", children: "\uAC1C\uC778\uC815\uBCF4 \uC218\uC9D1 \uBC0F \uC774\uC6A9, \uB300\uD654 \uAD00\uB9AC \uADDC\uC815, \uBD80\uC815\uD589\uC704\uC790 \uCC98\uB9AC\uADDC\uC815, \uD654\uBA74 \uB179\uD654\uC5D0 \uB300\uD55C \uC0AC\uC2E4\uC744 \uD655\uC778 \uD588\uC73C\uBA70, \uC774\uC5D0 \uB3D9\uC758\uD569\uB2C8\uB2E4." })] }), _jsx("button", { onClick: agreeAll, className: cn(buttonStyles), children: "\uD55C \uBC88\uC5D0 \uB3D9\uC758\uD558\uAE30" })] })), _jsx(ConsentBox, { title: "\uB300\uD68C \uAD00\uB9AC \uADDC\uC815 \uD655\uC778 \uBC0F \uB3D9\uC758", description: "\uB300\uD68C \uAD00\uB9AC \uADDC\uC815\uC744 \uC774\uD574\uD588\uC73C\uBA70, \uC774\uC5D0 \uB3D9\uC758\uD569\uB2C8\uB2E4.", isChecked: agreements.terms, onChange: () => handleAgreementChange("terms") }), _jsx(ConsentBox, { title: "\uBD80\uC815\uD589\uC704\uC790 \uCC98\uB9AC \uADDC\uC815 \uD655\uC778 \uBC0F \uB3D9\uC758", description: "\uBD80\uC815\uD589\uC704\uC790 \uCC98\uB9AC \uADDC\uC815\uC744 \uC774\uD574\uD588\uC73C\uBA70, \uC774\uC5D0 \uB3D9\uC758\uD569\uB2C8\uB2E4.", isChecked: agreements.privacy, onChange: () => handleAgreementChange("privacy") }), _jsx(ConsentBox, { title: "\uD654\uBA74 \uB179\uD654 \uB3D9\uC758", description: "\uBD80\uC815\uD589\uC704 \uBC29\uC9C0\uB97C \uC704\uD574 \uD654\uBA74\uC744 \uB179\uD654\uD558\uB294 \uAC83\uC5D0 \uB3D9\uC758\uD569\uB2C8\uB2E4.", isChecked: agreements.marketing, onChange: () => handleAgreementChange("marketing") })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-4 h-full w-full py-5", children: [!allAgreed && (_jsxs("div", { className: cn(buttonWrapper), children: [_jsxs("div", { className: "flex flex-col text-gray-500 ", children: [_jsx("div", { className: "text-green-dark font-bold", children: "\uBC84\uD2BC\uC744 \uB20C\uB7EC \uD55C\uBC88\uC5D0 \uB3D9\uC758\uD560 \uC218 \uC788\uC5B4\uC694" }), _jsx("div", { className: "text-xs text-green-dark font-medium", children: "\uAC1C\uC778\uC815\uBCF4 \uC218\uC9D1 \uBC0F \uC774\uC6A9, \uB300\uD654 \uAD00\uB9AC \uADDC\uC815, \uBD80\uC815\uD589\uC704\uC790 \uCC98\uB9AC\uADDC\uC815, \uD654\uBA74 \uB179\uD654\uC5D0 \uB300\uD55C \uC0AC\uC2E4\uC744 \uD655\uC778 \uD588\uC73C\uBA70, \uC774\uC5D0 \uB3D9\uC758\uD569\uB2C8\uB2E4." })] }), _jsx("button", { onClick: agreeAll, className: cn(buttonStyles), children: "\uD55C \uBC88\uC5D0 \uB3D9\uC758\uD558\uAE30" })] })), _jsx(ConsentBox, { title: "\uB300\uD68C \uAD00\uB9AC \uADDC\uC815 \uD655\uC778 \uBC0F \uB3D9\uC758", description: "\uB300\uD68C \uAD00\uB9AC \uADDC\uC815\uC744 \uC774\uD574\uD588\uC73C\uBA70, \uC774\uC5D0 \uB3D9\uC758\uD569\uB2C8\uB2E4.", isChecked: agreements.terms, onChange: () => handleAgreementChange("terms") }), _jsx(ConsentBox, { title: "\uBD80\uC815\uD589\uC704\uC790 \uCC98\uB9AC \uADDC\uC815 \uD655\uC778 \uBC0F \uB3D9\uC758", description: "\uBD80\uC815\uD589\uC704\uC790 \uCC98\uB9AC \uADDC\uC815\uC744 \uC774\uD574\uD588\uC73C\uBA70, \uC774\uC5D0 \uB3D9\uC758\uD569\uB2C8\uB2E4.", isChecked: agreements.privacy, onChange: () => handleAgreementChange("privacy") }), _jsx(ConsentBox, { title: "\uD654\uBA74 \uB179\uD654 \uB3D9\uC758", description: "\uBD80\uC815\uD589\uC704 \uBC29\uC9C0\uB97C \uC704\uD574 \uD654\uBA74\uC744 \uB179\uD654\uD558\uB294 \uAC83\uC5D0 \uB3D9\uC758\uD569\uB2C8\uB2E4.", isChecked: agreements.marketing, onChange: () => handleAgreementChange("marketing") }), _jsx(ConsentBox, { title: "\uD654\uBA74 \uB179\uD654 \uB3D9\uC758", description: "\uBD80\uC815\uD589\uC704 \uBC29\uC9C0\uB97C \uC704\uD574 \uD654\uBA74\uC744 \uB179\uD654\uD558\uB294 \uAC83\uC5D0 \uB3D9\uC758\uD569\uB2C8\uB2E4.", isChecked: agreements.marketing, onChange: () => handleAgreementChange("marketing") }), " ", _jsx(ConsentBox, { title: "\uD654\uBA74 \uB179\uD654 \uB3D9\uC758", description: "\uBD80\uC815\uD589\uC704 \uBC29\uC9C0\uB97C \uC704\uD574 \uD654\uBA74\uC744 \uB179\uD654\uD558\uB294 \uAC83\uC5D0 \uB3D9\uC758\uD569\uB2C8\uB2E4.", isChecked: agreements.marketing, onChange: () => handleAgreementChange("marketing") }), " ", _jsx(ConsentBox, { title: "\uD654\uBA74 \uB179\uD654 \uB3D9\uC758", description: "\uBD80\uC815\uD589\uC704 \uBC29\uC9C0\uB97C \uC704\uD574 \uD654\uBA74\uC744 \uB179\uD654\uD558\uB294 \uAC83\uC5D0 \uB3D9\uC758\uD569\uB2C8\uB2E4.", isChecked: agreements.marketing, onChange: () => handleAgreementChange("marketing") }), " ", _jsx(ConsentBox, { title: "\uD654\uBA74 \uB179\uD654 \uB3D9\uC758", description: "\uBD80\uC815\uD589\uC704 \uBC29\uC9C0\uB97C \uC704\uD574 \uD654\uBA74\uC744 \uB179\uD654\uD558\uB294 \uAC83\uC5D0 \uB3D9\uC758\uD569\uB2C8\uB2E4.", isChecked: agreements.marketing, onChange: () => handleAgreementChange("marketing") }), " ", _jsx(ConsentBox, { title: "\uD654\uBA74 \uB179\uD654 \uB3D9\uC758", description: "\uBD80\uC815\uD589\uC704 \uBC29\uC9C0\uB97C \uC704\uD574 \uD654\uBA74\uC744 \uB179\uD654\uD558\uB294 \uAC83\uC5D0 \uB3D9\uC758\uD569\uB2C8\uB2E4.", isChecked: agreements.marketing, onChange: () => handleAgreementChange("marketing") }), " ", _jsx(ConsentBox, { title: "\uD654\uBA74 \uB179\uD654 \uB3D9\uC758", description: "\uBD80\uC815\uD589\uC704 \uBC29\uC9C0\uB97C \uC704\uD574 \uD654\uBA74\uC744 \uB179\uD654\uD558\uB294 \uAC83\uC5D0 \uB3D9\uC758\uD569\uB2C8\uB2E4.", isChecked: agreements.marketing, onChange: () => handleAgreementChange("marketing") }), _jsx("div", { className: "h-5 shrink-0 w-full" })] }));
 }

package/layout/template/sign/Button.d.ts

@@ -1,18 +1,17 @@
 import { OnClick, State } from "../../../interface";
-import { ReactNode } from "react";
 interface ButtonProps {
     title: string;
     onClick: OnClick;
     disabled?: boolean;
     size?: string;
-    icon?: ReactNode;
+    icon?: React.ReactNode;
     bg?: string;
 }
 interface SelectButtonProps {
     state: State<string>;
     buttons: {
         type: string;
-        icon: string;
+        icon: string | React.ReactNode;
         title: string;
     }[];
 }

package/layout/template/sign/Button.js

@@ -19,7 +19,7 @@ function Button({ title, onClick, disabled, size, icon, bg }) {
         }, className: cn(container), children: [title, icon && icon] }));
 }
 function Inner({ title, onClick, bg }) {
-    return (_jsx(Button, { title: title, onClick: onClick, size: "w-full sm:w-102.5 h-13.5", bg: bg }));
+    return (_jsx(Button, { title: title, onClick: onClick, size: "w-full h-13.5", bg: bg }));
 }
 function Selection({ buttons, state }) {
     const [value, setValue] = state;
@@ -27,12 +27,14 @@ function Selection({ buttons, state }) {
         return {
             displays: "flex flex-1 justify-center items-center gap-3",
             sizes: "h-15",
-            backgrounds: value === type ? "bg-green-dark/10 shadow-green" : "bg-gray-light",
+            backgrounds: value === type
+                ? "bg-green-dark/10 text-green-dark "
+                : "bg-gray-light text-gray-medium",
             styles: "rounded-lgx",
             animations: "duration-300",
         };
     };
-    return (_jsx("div", { className: "flex gap-2.5", children: buttons.map(({ icon, title, type }) => (_jsxs("button", { className: cn(container(type)), onClick: () => setValue(type), children: [_jsx("img", { src: icon }), _jsx("div", { children: title })] }, type))) }));
+    return (_jsx("div", { className: "flex gap-2.5", children: buttons.map(({ icon, title, type }) => (_jsxs("button", { className: cn(container(type)), onClick: () => setValue(type), children: [typeof icon === "string" ? _jsx("img", { src: icon }) : icon, _jsx("div", { children: title })] }, type))) }));
 }
 function WithTitle({ buttons, title, state }) {
     return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "leading-none", children: title }), _jsx(Selection, { buttons: buttons, state: state })] }));

package/layout/template/sign/Layout.js

@@ -17,7 +17,7 @@ export default function Layout({ children, steps, script, title, }) {
     const titleText = {
         textStyles: "font-bold text-base text-white",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: cn(headerBox), children: [_jsx("img", { src: "/images/logos/tosel-white-highdefinition.png", width: 93, height: 20, alt: "\uD1A0\uC140\uC758 \uBA54\uC778 \uB85C\uACE0" }), _jsx("div", { className: cn(titleText), children: title })] }), script && _jsx("div", { className: "font-medium text-sm", children: script }), steps && (_jsx("div", { className: "flex gap-5 my-5", children: steps?.map((step, index) => (_jsx(Light, { flag: step }, index))) })), _jsx("div", { className: "flex flex-col h-full w-full justify-start items-center max-w-140", children: children })] }));
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: cn(headerBox), children: [_jsx("img", { src: "/images/logos/tosel-white-highdefinition.png", width: 93, height: 20, alt: "\uD1A0\uC140\uC758 \uBA54\uC778 \uB85C\uACE0" }), _jsx("div", { className: cn(titleText), children: title })] }), script && _jsx("div", { className: "font-medium text-sm", children: script }), steps && (_jsx("div", { className: "flex gap-5 my-5", children: steps?.map((step, index) => (_jsx(Light, { flag: step }, index))) })), _jsx("div", { className: "flex flex-col h-[calc(100%-185px)] sm:h-fit w-full justify-start items-center max-w-140", children: children })] }));
 }
 function Light({ flag }) {
     const container = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.326",
+  "version": "1.0.328",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",

package/version.txt

@@ -1 +1 @@
-1.0.326
+1.0.328