@developer-overheid-nl/don-register-components 0.0.1-beta.6 → 1.0.0

package/README.md

@@ -0,0 +1,20 @@
+# Register Site Components
+
+> Deze package bevat de generieke React componenten voor een register site.
+
+![NPM License](https://img.shields.io/npm/l/%40developer-overheid-nl%2Fdon-register-components)
+[![NPM Version](https://img.shields.io/npm/v/%40developer-overheid-nl%2Fdon-register-components)](https://www.npmjs.com/package/@developer-overheid-nl/don-register-components)
+![NPM Last Update](https://img.shields.io/npm/last-update/%40developer-overheid-nl%2Fdon-register-components)
+
+## Gebruik
+
+Deze package wordt gebruikt in de register sites van developer.overheid.nl en in register-site-template repository.
+
+De package heeft o.a. de volgende dependencies:
+
+- [Rijkshuisstijl Community](https://www.rijkshuisstijl-community.nl/) voor de React componenten, CSS en design tokens
+- [@developer-overheid-nl/don-register-locales](https://www.npmjs.com/package/@developer-overheid-nl/don-register-locales)
+
+## Changelog
+
+Zie de [CHANGELOG](./CHANGELOG.md) voor een overzicht van de wijzigingen in deze package.

package/package.json

@@ -5,7 +5,7 @@
   "license": "EUPL-1.2",
   "private": false,
   "type": "module",
-  "version": "0.0.1-beta.6",
+  "version": "1.0.0",
   "keywords": [],
   "publishConfig": {
     "access": "public"
@@ -31,7 +31,7 @@
     "react-i18next": "16.5.1",
     "react-markdown": "10.1.0",
     "remark-behead": "^3.1.0",
-    "@developer-overheid-nl/don-register-locales": "0.0.1-beta.1"
+    "@developer-overheid-nl/don-register-locales": "1.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^5.1.2",

package/src/button/Button.tsx

@@ -0,0 +1,3 @@
+import { Button } from "@rijkshuisstijl-community/components-react";
+
+export default Button;

package/src/fieldset/FieldSet.tsx

@@ -0,0 +1,3 @@
+import { Fieldset } from "@rijkshuisstijl-community/components-react";
+
+export default Fieldset;

package/src/formFieldLabel/FormFieldLabel.tsx

@@ -0,0 +1,23 @@
+import clsx from "clsx";
+import type React from "react";
+
+interface FormFieldLabelProps {
+  htmlFor?: string;
+  children: React.ReactNode;
+  required?: boolean;
+  className?: string;
+}
+
+const FormFieldLabel: React.FC<FormFieldLabelProps> = ({
+  htmlFor,
+  children,
+  className,
+}) => {
+  return (
+    <label htmlFor={htmlFor} className={clsx("utrecht-form-label", className)}>
+      {children}
+    </label>
+  );
+};
+
+export default FormFieldLabel;

package/src/formFieldTextInput/FormFieldTextInput.tsx

@@ -0,0 +1,3 @@
+import { FormFieldTextInput } from "@rijkshuisstijl-community/components-react";
+
+export default FormFieldTextInput;

package/src/header/Header.tsx

@@ -33,10 +33,10 @@ interface LogoNavProps {
    * Note: translation keys: `components.back-to-homepage-landmark`, ...
    */
   logoLinkBehaviour?:
-  | "no-link"
-  | "site-home"
-  | "main-site"
-  | "main-site-on-home";
+    | "no-link"
+    | "site-home"
+    | "main-site"
+    | "main-site-on-home";
 }
 
 function LogoNav(props: LogoNavProps) {
@@ -67,8 +67,8 @@ function LogoNav(props: LogoNavProps) {
       href = isRoot ? mainSite.url : urlHomepage[0] || "/";
       landmark = isRoot
         ? t("components.back-to-main-site-landmark", {
-          siteName: mainSite.name,
-        })
+            siteName: mainSite.name,
+          })
         : t("components.back-to-homepage-landmark");
       title = isRoot
         ? t("components.back-to-main-site", { siteName: mainSite.name })

package/src/index.ts

@@ -3,6 +3,7 @@ export { type AlertProps, default as Alert } from "./alert/Alert";
 export { type AlignBoxProps, default as AlignBox } from "./alignBox/AlignBox";
 export { default as Article } from "./article/Article";
 export { type BlockProps, default as Block } from "./block/Block";
+export { default as Button } from "./button/Button";
 export {
   type CardAsLinksProps,
   default as CardAsLink,
@@ -27,12 +28,15 @@ export {
   type DataSummaryItemProps,
   default as DataSummaryItem,
 } from "./dataSummary/DataSummaryItem";
+export { default as Fieldset } from "./fieldset/FieldSet";
 export { default as Filters } from "./filters/Filters";
 export {
   type ColumnProps,
   default as Footer,
   type FooterProps,
 } from "./footer/Footer";
+export { default as FormFieldLabel } from "./formFieldLabel/FormFieldLabel";
+export { default as FormFieldTextInput } from "./formFieldTextInput/FormFieldTextInput";
 export { default as Header, type HeaderProps } from "./header/Header";
 export { default as Heading } from "./heading/Heading";
 export {

package/src/readOnlyTextInput/ReadOnlyTextInput.tsx

@@ -5,13 +5,17 @@ import {
 import { clsx } from "clsx";
 import styles from "./styles.module.css";
 
-const ReadOnlyTextInput = (props: TextInputProps) => {
-  const { className, ...restProps } = props;
+interface ReadOnlyTextInputProps extends TextInputProps {
+  fontVariant?: "slashed-zero" | "monospace" | "normal";
+}
+
+const ReadOnlyTextInput = (props: ReadOnlyTextInputProps) => {
+  const { className, fontVariant = "normal", ...restProps } = props;
 
   return (
     <TextInput
       readOnly
-      className={clsx(styles.input, className)}
+      className={clsx(styles.input, styles[fontVariant], className)}
       {...restProps}
     />
   );

package/src/readOnlyTextInput/styles.module.css

@@ -4,3 +4,16 @@
   /* field-sizing: content; */
   inline-size: -webkit-fill-available;
 }
+
+.normal {
+  font-variant: normal;
+}
+
+.input.slashed-zero {
+  /* find a way to use RO font with slashed zero */
+  font-variant-numeric: slashed-zero;
+}
+
+.input.monospace {
+  font-family: monospace;
+}

package/src/search/Search.tsx

@@ -36,7 +36,7 @@ const Search = (props: SearchProps) => {
           label={t("components.search-label")}
           name={searchKey}
           type="text"
-          value={searchTerm}
+          defaultValue={searchTerm}
         >
           <div className="sr-only" id="search-help">
             {t("components.search-help")}

package/src/topNavigation/TopNavigation.tsx

@@ -42,7 +42,7 @@ export const processNavBarItems = (
 ): NavBarItemProps[] => {
   return items.map((item) => ({
     ...item,
-    // TODO: remove current from this output
+    // TODO: remove current from this output. Issue #188
     bold: item.current,
     icon: processIcon(item.icon),
   }));