@ukic/canary-react 3.0.0-canary.3 → 3.0.0-canary.30

package/README.md

@@ -2,10 +2,11 @@
 
 [![OGL V3 License](https://img.shields.io/badge/license-OGLv3-blue.svg)](https://github.com/mi6/ic-design-system/tree/main/LICENSE)
 [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/mi6/ic-design-system/tree/main/LICENSE)
+[![npm](https://img.shields.io/npm/v/@ukic/canary-react.svg)](https://npmjs.com/package/@ukic/canary-react)
 
 The [Intelligence Community Design System](https://design.sis.gov.uk) helps the United Kingdom's Intelligence Community (MI6, GCHQ, MI5, and partners) to quickly build powerful capabilities that are accessible and easy to use.
 
-This is a joint project led by [MI6](https://www.sis.gov.uk), working with [GCHQ](https://www.gchq.gov.uk) and [MI5](https://www.mi5.gov.uk).
+This is a joint project led by [MI6](https://www.sis.gov.uk), working with [GCHQ](https://www.gchq.gov.uk), [MI5](https://www.mi5.gov.uk) and [HMGCC](https://www.hmgcc.gov.uk) (our national security partner).
 
 ## Installing
 
@@ -16,10 +17,10 @@ To install the components:
 In the root of your project:
 
 ```shell
-// using npm
+# using npm
 npm install @ukic/canary-react @ukic/fonts
 
-// using yarn
+# using yarn
 rm package-lock.json
 yarn add @ukic/canary-react @ukic/fonts
 ```
@@ -37,7 +38,7 @@ Add the following into the top level CSS file for your project.
 
 In order to be rendered consistently across browsers and in line with modern standards, each of the ICDS components uses styles from a global CSS file based on [Normalize.css](https://necolas.github.io/normalize.css/). 
 
-If you would like to import these styles to apply them to the rest of your project and slotted elements used within any of the ICDS components, add the following into the top level CSS file as well.
+If you would like to import these styles in order to apply them to the rest of your project and slotted elements used within any of the ICDS components, add the following into the top level CSS file as well.
 
 ```css
 @import "@ukic/canary-react/dist/core/normalize.css";
@@ -57,6 +58,28 @@ The `@ukic/canary-react` package will need to be transformed before you can use
 
 Add a `transformIgnorePatterns` field with the value `["/node_modules/(?!@ukic/canary-react)"]` to your Jest config.
 
+## Typescript
+
+If your project is making use of Typescript, you can import the custom types used in the ICDS component library. For details on the types implemented in each component, refer to the Props table on the Code page for each Component on the [Design System Guidance site](https://design.sis.gov.uk/components/select/code)
+
+Types can be imported from the @ukic/canary-web-components package as per the below example. 
+
+> [!NOTE]  
+> You do not have to install this package into your project, it is already installed as a dependency of @ukic/canary-react. 
+
+```ts
+import { IcPaginationBarOptions } from '@ukic/canary-web-components';
+
+let paginationConfig: IcPaginationBarOptions = {
+  itemsPerPageOptions: [
+    { label: "5", value: "5" },
+    { label: "10", value: "10" },
+  ],
+  showItemsPerPageControl: true,
+  selectedItemsPerPage: 5,
+}
+```
+
 ## Security
 
 If you've found a vulnerability, we want to know so that we can fix it. [Our security policy](https://github.com/mi6/ic-ui-kit/blob/main/SECURITY.md) tells you how to do this.

package/dist/components.d.ts

@@ -5,5 +5,7 @@ export declare const IcDataTableTitleBar: import("react").ForwardRefExoticCompon
 export declare const IcDateInput: import("react").ForwardRefExoticComponent<JSX.IcDateInput & Omit<import("react").HTMLAttributes<HTMLIcDateInputElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDateInputElement>>;
 export declare const IcDatePicker: import("react").ForwardRefExoticComponent<JSX.IcDatePicker & Omit<import("react").HTMLAttributes<HTMLIcDatePickerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDatePickerElement>>;
 export declare const IcPaginationBar: import("react").ForwardRefExoticComponent<JSX.IcPaginationBar & Omit<import("react").HTMLAttributes<HTMLIcPaginationBarElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcPaginationBarElement>>;
+export declare const IcTableOfContents: import("react").ForwardRefExoticComponent<JSX.IcTableOfContents & Omit<import("react").HTMLAttributes<HTMLIcTableOfContentsElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcTableOfContentsElement>>;
+export declare const IcTimeInput: import("react").ForwardRefExoticComponent<JSX.IcTimeInput & Omit<import("react").HTMLAttributes<HTMLIcTimeInputElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcTimeInputElement>>;
 export declare const IcTreeItem: import("react").ForwardRefExoticComponent<JSX.IcTreeItem & Omit<import("react").HTMLAttributes<HTMLIcTreeItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcTreeItemElement>>;
 export declare const IcTreeView: import("react").ForwardRefExoticComponent<JSX.IcTreeView & Omit<import("react").HTMLAttributes<HTMLIcTreeViewElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcTreeViewElement>>;

package/dist/components.js

@@ -10,5 +10,7 @@ export var IcDataTableTitleBar = /*@__PURE__*/ createReactComponent('ic-data-tab
 export var IcDateInput = /*@__PURE__*/ createReactComponent('ic-date-input');
 export var IcDatePicker = /*@__PURE__*/ createReactComponent('ic-date-picker');
 export var IcPaginationBar = /*@__PURE__*/ createReactComponent('ic-pagination-bar');
+export var IcTableOfContents = /*@__PURE__*/ createReactComponent('ic-table-of-contents');
+export var IcTimeInput = /*@__PURE__*/ createReactComponent('ic-time-input');
 export var IcTreeItem = /*@__PURE__*/ createReactComponent('ic-tree-item');
 export var IcTreeView = /*@__PURE__*/ createReactComponent('ic-tree-view');