@ukic/canary-react 3.0.0-canary.2 → 3.0.0-canary.21

package/README.md

@@ -2,6 +2,7 @@
 
 [![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.
 
@@ -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

@@ -4,8 +4,6 @@ export declare const IcDataTable: import("react").ForwardRefExoticComponent<JSX.
 export declare const IcDataTableTitleBar: import("react").ForwardRefExoticComponent<JSX.IcDataTableTitleBar & Omit<import("react").HTMLAttributes<HTMLIcDataTableTitleBarElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDataTableTitleBarElement>>;
 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 IcMenuWithMulti: import("react").ForwardRefExoticComponent<JSX.IcMenuWithMulti & Omit<import("react").HTMLAttributes<HTMLIcMenuWithMultiElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcMenuWithMultiElement>>;
 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 IcSelectWithMulti: import("react").ForwardRefExoticComponent<JSX.IcSelectWithMulti & Omit<import("react").HTMLAttributes<HTMLIcSelectWithMultiElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcSelectWithMultiElement>>;
 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

@@ -9,8 +9,6 @@ export var IcDataTable = /*@__PURE__*/ createReactComponent('ic-data-table');
 export var IcDataTableTitleBar = /*@__PURE__*/ createReactComponent('ic-data-table-title-bar');
 export var IcDateInput = /*@__PURE__*/ createReactComponent('ic-date-input');
 export var IcDatePicker = /*@__PURE__*/ createReactComponent('ic-date-picker');
-export var IcMenuWithMulti = /*@__PURE__*/ createReactComponent('ic-menu-with-multi');
 export var IcPaginationBar = /*@__PURE__*/ createReactComponent('ic-pagination-bar');
-export var IcSelectWithMulti = /*@__PURE__*/ createReactComponent('ic-select-with-multi');
 export var IcTreeItem = /*@__PURE__*/ createReactComponent('ic-tree-item');
 export var IcTreeView = /*@__PURE__*/ createReactComponent('ic-tree-view');