@netu-si/netu-react-dsf-components 0.0.1 → 0.0.3

package/README.md

@@ -5,21 +5,21 @@ An implementation of the [GOV-CY Design System](https://gov-cy.github.io/govcy-d
 ## Usage
 
 ```sh
-npm install govuk-react styled-components @types/styled-components --save
+yarn install @netu-si/netu-react-dsf-components
 ```
 
 ```jsx
-import { Button } from 'govuk-react';
+import { DSFButton } from 'netu-react-dsf-components';
 
 const MyComponent = ({ title }) => (
   <div>
     <h1>{title}</h1>
-    <Button />
+    <DSFButton id="submitBtn">Submit</DSFButton>
   </div>
 );
 ```
 
-See the [Storybook](https://govuk-react.github.io/govuk-react) for examples of all available components.
+See the [Storybook](https://animated-adventure-ey7gv1m.pages.github.io/) for examples of all available components.
 
 ## Related sites and projects
 

package/dist/cjs/components/DSFBackLink/DSFBackLink.d.ts

@@ -1,8 +1,19 @@
+/**
+ * ### References:
+ *
+ * - https://github.com/netu-si/netu-react-dsf-components/tree/main/src/components/DSFBackLink
+ */
 import { FC } from 'react';
 import '../../resources/css/dsf.main.min.css';
 import { LinkProps } from 'react-router-dom';
 export interface DSFBackLinkProps extends LinkProps {
     onBackClick?: () => void;
 }
+/**
+ * Use the back link component to help users go back to the previous page in a multi-page transaction.
+ *
+ * - https://animated-adventure-ey7gv1m.pages.github.io/?path=/docs/navigation-dsfbacklink--docs
+ * - https://gov-cy.github.io/govcy-design-system-docs/components/back_link
+ */
 declare const DSFBackLink: FC<DSFBackLinkProps>;
 export default DSFBackLink;

package/dist/cjs/components/DSFDateInput/DSFDateInput.d.ts

@@ -1,5 +1,5 @@
 import '../../resources/css/dsf.main.min.css';
-import React, { RefObject } from 'react';
+import React, { RefObject, FC } from 'react';
 import { DSFInputProps } from '../DSFInput/DSFInput';
 interface InputRefObject {
     day: RefObject<HTMLInputElement>;
@@ -79,5 +79,5 @@ export interface DSFDateInputProps {
         };
     };
 }
-declare const DSFDateInput: React.FC<DSFDateInputProps>;
+declare const DSFDateInput: FC<DSFDateInputProps>;
 export default DSFDateInput;

package/dist/cjs/components/DSFFieldSet/DSFFieldSet.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { FC } from 'react';
 import '../../resources/css/dsf.main.min.css';
 export interface DSFFieldSetProps {
     legend: React.ReactNode;
     children?: React.ReactNode;
 }
-declare const DSFFieldSet: React.FC<DSFFieldSetProps>;
+declare const DSFFieldSet: FC<DSFFieldSetProps>;
 export default DSFFieldSet;

package/dist/cjs/components/DSFFileUpload/DSFFileUpload.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ForwardRefExoticComponent, RefAttributes } from 'react';
 import '../../resources/css/dsf.main.min.css';
 export interface DSFFileUploadProps extends React.InputHTMLAttributes<HTMLInputElement> {
     id: string;
@@ -8,8 +8,10 @@ export interface DSFFileUploadProps extends React.InputHTMLAttributes<HTMLInputE
     };
     label: string;
     hint?: string;
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    multiple?: boolean;
     acceptedFormats?: string;
+    name?: string;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
 }
-declare const DSFFileUpload: React.ForwardRefExoticComponent<DSFFileUploadProps & React.RefAttributes<HTMLInputElement>>;
+declare const DSFFileUpload: ForwardRefExoticComponent<DSFFileUploadProps & RefAttributes<HTMLInputElement>>;
 export default DSFFileUpload;

package/dist/cjs/components/DSFFooter/DSFFooter.d.ts

@@ -1,16 +1,23 @@
 import React from 'react';
 import '../../resources/css/dsf.main.min.css';
+import '../../resources/css/custom.css';
 export interface DSFFooterProps {
     privacyStatementUrl?: string;
     cookiePolicyUrl?: string;
     accessibilityStatementUrl?: string;
+    privacyStatementText?: string;
+    cookiePolicyText?: string;
+    accessibilityStatementText?: string;
+    cyprusRepublicText?: string;
+    hasScroll?: boolean;
 }
 declare const DSFFooter: {
-    ({ privacyStatementUrl, cookiePolicyUrl, accessibilityStatementUrl }: DSFFooterProps): React.JSX.Element;
+    ({ privacyStatementUrl, cookiePolicyUrl, accessibilityStatementUrl, privacyStatementText, cookiePolicyText, accessibilityStatementText, cyprusRepublicText, hasScroll, }: DSFFooterProps): React.JSX.Element;
     defaultProps: {
         privacyStatementUrl: undefined;
         cookiePolicyUrl: undefined;
         accessibilityStatementUrl: undefined;
+        hasScroll: boolean;
     };
     displayName: string;
 };

package/dist/cjs/components/DSFFormGroup/DSFFormGroup.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC } from 'react';
 import '../../resources/css/dsf.main.min.css';
 export interface DSFFormGroupProps {
     label?: string;
@@ -13,5 +13,5 @@ export interface IFormGroupContext {
     childrenCount: number;
 }
 export declare const FormGroupContext: React.Context<IFormGroupContext>;
-declare const DSFFormGroup: React.FC<DSFFormGroupProps>;
+declare const DSFFormGroup: FC<DSFFormGroupProps>;
 export default DSFFormGroup;

package/dist/cjs/components/DSFHeader/DSFHeader.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ChangeEvent } from 'react';
 import '../../resources/css/dsf.main.min.css';
 export type NavMenuItem = {
     label: string;
@@ -8,9 +8,10 @@ export interface DSFHeaderProps {
     headerTitle: string;
     showLang?: boolean;
     menu?: NavMenuItem[];
+    languageHandler?: (event: ChangeEvent<HTMLSelectElement>) => void;
 }
 declare const DSFHeader: {
-    ({ headerTitle, menu, showLang }: DSFHeaderProps): React.JSX.Element;
+    ({ headerTitle, menu, showLang, languageHandler }: DSFHeaderProps): React.JSX.Element;
     defaultProps: {
         showLang: boolean;
         menu: undefined;

package/dist/cjs/components/DSFLoadingBox/DSFLoadingBox.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
+import React, { FC } from 'react';
 import '../../resources/css/dsf.main.min.css';
 export interface DSFLoadingBoxProps {
     loading: boolean;
-    spinnerColor?: string;
     children?: React.ReactNode;
 }
-declare const DSFLoadingBox: React.FC<DSFLoadingBoxProps>;
+declare const DSFLoadingBox: FC<DSFLoadingBoxProps>;
 export default DSFLoadingBox;

package/dist/cjs/components/DSFMain/DSFMain.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
 import '../../resources/css/dsf.main.min.css';
 export interface DSFMainProps {
+    id?: string;
     children: React.ReactNode;
 }
 declare const DSFMain: {
-    ({ children }: DSFMainProps): React.JSX.Element;
+    ({ id, children }: DSFMainProps): React.JSX.Element;
     defaultProps: {
+        id: string;
         children: undefined;
     };
     displayName: string;

package/dist/cjs/components/DSFPage/DSFPage.d.ts

@@ -0,0 +1,46 @@
+/**
+ * ### References:
+ *
+ * - https://github.com/alphagov/govuk-frontend/tree/main/src/govuk/components/back-link
+ */
+import React, { FC } from 'react';
+import '../../resources/css/dsf.main.min.css';
+export interface DSFPageProps {
+    /**
+     * Page contents
+     */
+    children?: React.ReactNode;
+    /**
+     * ID for page content
+     */
+    id?: string;
+    /**
+     * Override the default page header component.
+     */
+    header?: React.ReactNode;
+    /**
+     * Override the default page footer component.
+     */
+    footer?: React.ReactNode;
+    /**
+     * Content that needs to appear after body starts and before other components
+     */
+    bodyStartContainer?: React.ReactNode;
+    /**
+     * Content that needs to appear immediately before body ends
+     */
+    bodyEndContainer?: React.ReactNode;
+    /**
+     * Content that needs to appear outside the main page wrapper (see `main`).
+     * For example: A back link component, breadcrumbs, user login component
+     */
+    beforeMainContainer?: React.ReactNode;
+}
+/**
+ * Use the back link component to help users go back to the previous page in a multi-page transaction.
+ *
+ * - https://govuk-react.github.io/govuk-react/?path=/docs/back-link
+ * - https://design-system.service.gov.uk/components/back-link/
+ */
+declare const DSFPage: FC<DSFPageProps>;
+export default DSFPage;

package/dist/cjs/components/DSFPage/index.d.ts

@@ -0,0 +1 @@
+export { default } from './DSFPage';

package/dist/cjs/components/DSFPanel/DSFPanel.d.ts

@@ -1,5 +1,5 @@
-import React, { FC } from "react";
-import "../../resources/css/dsf.main.min.css";
+import React, { FC } from 'react';
+import '../../resources/css/dsf.main.min.css';
 export interface DSFPanelProps {
     /** Panel title text */
     title: string;

package/dist/cjs/components/DSFRadio/DSFRadio.d.ts

@@ -1,6 +1,4 @@
 import React from 'react';
-import '../../resources/js/bootstrap.bundle.min.js';
-import '../../resources/js/app.min.js';
 import '../../resources/css/dsf.main.min.css';
 export interface DSFRadioProps extends React.InputHTMLAttributes<HTMLInputElement> {
     hint?: React.ReactNode;

package/dist/cjs/components/DSFSelect/DSFSelect.d.ts

@@ -10,6 +10,7 @@ export interface DSFSelectProps {
         touched?: boolean;
     };
     children: React.ReactNode;
+    defaultValue?: string | number;
 }
 declare const DSFSelect: FC<DSFSelectProps>;
 export default DSFSelect;

package/dist/cjs/components/DSFTable/DSFTable.d.ts

@@ -1,12 +1,13 @@
-import React from 'react';
+import React, { FC } from 'react';
 import '../../resources/css/dsf.main.min.css';
-interface TableColumn {
-    header: string;
-    type?: 'text' | 'number';
-}
 export interface DSFTableProps {
     columns: TableColumn[];
-    rowData: (string | number)[][];
+    rowData: (string | number | React.ReactNode)[][];
+    hideNumberingColumn?: boolean;
+}
+declare const DSFTable: FC<DSFTableProps>;
+interface TableColumn {
+    header: string;
+    align?: 'left' | 'right';
 }
-declare const DSFTable: React.FC<DSFTableProps>;
 export default DSFTable;

package/dist/cjs/components/index.d.ts

@@ -23,3 +23,5 @@ export { default as DSFFormGroup } from './DSFFormGroup';
 export { default as DSFRadio } from './DSFRadio';
 export { default as DSFTable } from './DSFTable';
 export { default as DSFUserSignOut } from './DSFUserSignOut';
+export { default as DSFPage } from './DSFPage';
+export { default as DSFFileUpload } from './DSFFileUpload';