diff --git a/.changeset/lemon-tables-beam.md b/.changeset/lemon-tables-beam.md new file mode 100644 index 00000000..67e1d709 --- /dev/null +++ b/.changeset/lemon-tables-beam.md @@ -0,0 +1,5 @@ +--- +"@govtechmy/myds-react": patch +--- + +SPLaSK compliance - Broadcast, Number of online services, Freedom of Information, Online Procurement Announcement, E-participation, privacy policy on link component and E-participation on button component diff --git a/packages/react/src/components/button.tsx b/packages/react/src/components/button.tsx index a3ff9481..0d6ebef5 100644 --- a/packages/react/src/components/button.tsx +++ b/packages/react/src/components/button.tsx @@ -1,3 +1,273 @@ +// import React, { +// ComponentProps, +// createContext, +// forwardRef, +// ForwardRefExoticComponent, +// ReactNode, +// useContext, +// LegacyRef, +// } from "react"; +// import { clx } from "../utils"; +// import { cva, VariantProps } from "class-variance-authority"; +// import { Slot } from "@radix-ui/react-slot"; + +// /*========================================================================================================================*/ + +// /** +// * Button component that supports various styles and sizes. +// * +// * @example +// * +// */ +// const button_cva = cva( +// [ +// "group flex select-none items-center gap-1.5 rounded-md w-fit", +// "font-body font-medium outline-none transition disabled:cursor-not-allowed", +// "text-center active:translate-y-[0.5px]", +// "focus:ring focus:ring-fr-primary", +// ], +// { +// variants: { +// variant: { +// "default-outline": [ +// "bg-bg-white border border-otl-gray-200 text-txt-black-700 shadow-button", +// "hover:bg-bg-white-hover hover:border-otl-gray-300 hover:text-txt-black-900", +// "disabled:bg-bg-white-disabled disabled:text-txt-black-disabled disabled:border-transparent", +// ], +// "default-ghost": [ +// "bg-transparent border border-transparent text-txt-black-700", +// "hover:bg-bg-white-hover", +// "disabled:bg-bg-white-disabled disabled:text-txt-black-disabled disabled:border-transparent", +// ], +// "danger-fill": [ +// "bg-danger-600 border border-danger-600 text-white shadow-button", +// "hover:bg-danger-700", +// "disabled:bg-bg-danger-disabled disabled:text-white-disabled disabled:border-bg-danger-disabled", +// ], +// "danger-outline": [ +// "bg-bg-white border border-otl-danger-200 text-txt-danger shadow-button", +// "hover:bg-bg-danger-50", +// "disabled:bg-bg-white-disabled disabled:text-txt-danger-disabled disabled:border-transparent", +// ], +// "danger-ghost": [ +// "bg-transparent border border-transparent text-txt-danger", +// "hover:bg-bg-danger-50", +// "disabled:bg-bg-white-disabled disabled:text-txt-danger-disabled disabled:border-transparent", +// ], +// "primary-fill": [ +// "bg-primary-600 border border-primary-600 text-white shadow-button", +// "hover:bg-primary-700", +// "disabled:bg-bg-primary-disabled disabled:text-white-disabled disabled:border-bg-primary-disabled", +// ], +// "primary-outline": [ +// "bg-bg-white border border-otl-primary-200 text-txt-primary shadow-button", +// "hover:bg-bg-primary-50", +// "disabled:bg-bg-white-disabled disabled:text-txt-primary-disabled disabled:border-transparent", +// ], +// "primary-ghost": [ +// "bg-transparent border border-transparent text-txt-primary", +// "hover:bg-bg-primary-50", +// "disabled:bg-bg-white-disabled disabled:text-txt-primary-disabled disabled:border-transparent", +// ], +// unset: null, +// }, + +// size: { +// small: "py-1.5 px-2.5 text-body-sm", +// medium: "py-2 px-3 text-body-md", +// large: "py-2.5 px-4 text-body-lg", +// }, + +// iconOnly: { +// true: "aspect-square rounded-md", +// false: "", +// }, +// }, +// compoundVariants: [ +// { +// iconOnly: true, +// size: "small", +// className: "p-2", +// }, +// { +// iconOnly: true, +// size: "medium", +// className: "p-2.5", +// }, +// { +// iconOnly: true, +// size: "large", +// className: "p-3", +// }, +// ], +// defaultVariants: { +// variant: "primary-fill", +// size: "small", +// iconOnly: false, +// }, +// }, +// ); + +// export interface ButtonProps +// extends ComponentProps<"button">, +// VariantProps { +// asChild?: boolean; +// iconOnly?: boolean; +// SplaskOnlineEParticipation?: boolean; +// } + +// /*========================================================================================================================*/ + +// const ButtonContext = createContext>({ +// variant: "primary-fill", +// size: "small", +// iconOnly: false, +// }); + +// const Button: ForwardRefExoticComponent = forwardRef( +// ( +// { +// className, +// variant = "primary-fill", +// size = "small", +// children, +// asChild = false, +// iconOnly = false, +// SplaskOnlineEParticipation, +// ...props +// }, +// ref, +// ) => { +// const Comp = asChild ? Slot : "button"; + +// const buttonElement = ( +// +// +// {children} +// +// +// ); + +// if (!SplaskOnlineEParticipation) return buttonElement; + +// return ( +//
+// {buttonElement} +//
+// ); +// }, +// ); +// Button.displayName = "Button"; + +// /*========================================================================================================================*/ + +// /** +// * ButtonCounter component is a forward-ref exotic component that utilizes the ButtonContext +// * to apply variant and size styles to a span element. +// */ +// const button_counter_cva = cva( +// [ +// "flex aspect-square shrink-0 items-center justify-center", +// "rounded-full px-1 leading-none bg-bg-primary-600 text-txt-white", +// "group-disabled:bg-bg-white-disabled group-disabled:text-inherit", +// ], +// { +// variants: { +// variant: { +// "primary-fill": ["bg-white text-primary-600"], +// "danger-fill": ["bg-white text-danger-600"], +// "default-outline": "", +// "default-ghost": "", +// "danger-outline": "", +// "danger-ghost": "", +// "primary-outline": "", +// "primary-ghost": "", +// unset: "", +// }, +// size: { +// small: "h-4.5 w-4.5 text-body-sm", +// medium: "h-5 w-5 text-body-sm", +// large: "h-6 w-6 text-base", +// }, +// }, +// defaultVariants: { +// variant: "primary-fill", +// size: "small", +// }, +// }, +// ); + +// interface ButtonCounterProps { +// children: ReactNode; +// ref?: LegacyRef; +// } + +// const ButtonCounter: ForwardRefExoticComponent = forwardRef( +// ({ children }, ref) => { +// const { variant, size } = useContext(ButtonContext); + +// return ( +// +// {children} +// +// ); +// }, +// ); +// ButtonCounter.displayName = "ButtonCounter"; + +// /*========================================================================================================================*/ + +// /** +// * `ButtonIcon` forwards a ref to its child and applies a class based on the button size. +// */ +// const button_icon_cva = cva( +// "block stroke-inherit text-inherit stroke-[1.5px] shrink-0", +// { +// variants: { +// size: { +// small: "h-4 w-4", +// medium: "h-5 w-5", +// large: "h-5 w-5", +// }, +// }, +// defaultVariants: { +// size: "small", +// }, +// }, +// ); + +// interface ButtonIconProps extends ComponentProps<"div"> { +// children: React.ReactElement>; +// } + +// const ButtonIcon: ForwardRefExoticComponent = forwardRef( +// ({ children, className, ...props }, ref) => { +// const { size } = useContext(ButtonContext); + +// return ( +// +// {children} +// +// ); +// }, +// ); +// ButtonIcon.displayName = "ButtonIcon"; + +// /*========================================================================================================================*/ + +// export { Button, ButtonIcon, ButtonCounter, button_cva }; + + import React, { ComponentProps, createContext, @@ -115,6 +385,7 @@ export interface ButtonProps VariantProps { asChild?: boolean; iconOnly?: boolean; + splwpkBroadcast?: boolean; } const Button: ForwardRefExoticComponent = forwardRef( @@ -126,6 +397,7 @@ const Button: ForwardRefExoticComponent = forwardRef( children, asChild = false, iconOnly = false, + splwpkBroadcast = false, ...props }, ref, @@ -137,6 +409,9 @@ const Button: ForwardRefExoticComponent = forwardRef( {children} diff --git a/packages/react/src/components/link.tsx b/packages/react/src/components/link.tsx index d36686b3..7f7a1d17 100644 --- a/packages/react/src/components/link.tsx +++ b/packages/react/src/components/link.tsx @@ -5,6 +5,14 @@ import { cva, VariantProps } from "class-variance-authority"; interface LinkProps extends ComponentProps<"a">, VariantProps { asChild?: boolean; newTab?: boolean; + + splwpkBroadcast?: boolean; + splwpkOnlineServices?: boolean; + splwpkOnlineEParticipation?: boolean; + splwpkPrivacyPolicy?: boolean; + splwpkProcurement?: boolean; + splwpkFreedom?: boolean; + splwpkFaqs?: boolean; } const link_cva = cva("transition-colors", { @@ -37,18 +45,35 @@ const Link: ForwardRefExoticComponent = forwardRef( newTab = false, primary = false, underline = "always", + splwpkBroadcast = false, + splwpkOnlineServices = false, + splwpkOnlineEParticipation = false, + splwpkPrivacyPolicy = false, + splwpkProcurement = false, + splwpkFreedom = false, + splwpkFaqs = false, ...props }, ref, ) => { const Comp = asChild ? Slot : "a"; + const splwpkAttrs: Record = {}; + if (splwpkBroadcast) splwpkAttrs["splwpk-broadcast"] = "splwpk-broadcast"; + if (splwpkOnlineServices) splwpkAttrs["splwpk-online-services"] = "splwpk-online-services"; + if (splwpkOnlineEParticipation) splwpkAttrs["splwpk-online-e-participation"] = "splwpk-online-e-participation"; + if (splwpkPrivacyPolicy) splwpkAttrs["splwpk-privacy-policy"] = "splwpk-privacy-policy"; + if (splwpkProcurement) splwpkAttrs["splwpk-procurement"] = "splwpk-procurement"; + if (splwpkFreedom) splwpkAttrs["splwpk-freedom"] = "splwpk-freedom"; + if (splwpkFaqs) splwpkAttrs["splwpk-faqs"] = "splwpk-faqs"; + return ( {children} @@ -58,4 +83,4 @@ const Link: ForwardRefExoticComponent = forwardRef( ); Link.displayName = "Link"; -export { Link }; +export { Link }; \ No newline at end of file