@ukic/canary-react 3.0.0-canary.16 → 3.0.0-canary.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +22 -0
  2. package/dist/core/core.css +1 -1
  3. package/package.json +6 -6
package/README.md CHANGED
@@ -58,6 +58,28 @@ The `@ukic/canary-react` package will need to be transformed before you can use
58
58
 
59
59
  Add a `transformIgnorePatterns` field with the value `["/node_modules/(?!@ukic/canary-react)"]` to your Jest config.
60
60
 
61
+ ## Typescript
62
+
63
+ 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)
64
+
65
+ Types can be imported from the @ukic/canary-web-components package as per the below example.
66
+
67
+ > [!NOTE]
68
+ > You do not have to install this package into your project, it is already installed as a dependency of @ukic/canary-react.
69
+
70
+ ```ts
71
+ import { IcPaginationBarOptions } from '@ukic/canary-web-components';
72
+
73
+ let paginationConfig: IcPaginationBarOptions = {
74
+ itemsPerPageOptions: [
75
+ { label: "5", value: "5" },
76
+ { label: "10", value: "10" },
77
+ ],
78
+ showItemsPerPageControl: true,
79
+ selectedItemsPerPage: 5,
80
+ }
81
+ ```
82
+
61
83
  ## Security
62
84
 
63
85
  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/core/core.css CHANGED
@@ -1777,4 +1777,4 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
1777
1777
  inset 0 0 0 8px var(--ic-architectural-black);--ic-border-hc:var(--ic-space-1px) solid transparent;--ic-border-keyline-darken:1px solid var(--ic-color-keyline-darken);--ic-border-keyline-lighten:1px solid var(--ic-color-keyline-lighten)}:root{--ic-elevation-raised:0 0 2px rgb(0 0 0 / 50%);--ic-elevation-overlay:0 2px 8px rgb(0 0 0 / 20%);--ic-elevation-modal:0 4px 16px rgb(0 0 0 / 25%);--ic-elevation-inset:inset 0 4px 16px rgb(0 0 0 / 25%),
1778
1778
  inset 0 -4px 16px rgb(0 0 0 / 25%);--ic-easing-transition-fast:var(--ic-transition-duration-fast)
1779
1779
  cubic-bezier(0.165, 0.84, 0.44, 1);--ic-easing-transition-slow:var(--ic-transition-duration-slow)
1780
- cubic-bezier(0.165, 0.84, 0.44, 1);--ic-transition-duration-fast:100ms;--ic-transition-duration-slow:300ms;--ic-breakpoint-xs:0;--ic-breakpoint-sm:576px;--ic-breakpoint-md:768px;--ic-breakpoint-lg:992px;--ic-breakpoint-xl:1200px;--ic-space-1px:0.063rem;--ic-space-xxxs:0.125rem;--ic-space-xxs:0.25rem;--ic-space-xs:0.5rem;--ic-space-sm:0.75rem;--ic-space-md:1rem;--ic-space-lg:1.5rem;--ic-space-xl:2rem;--ic-space-xxl:3rem;--ic-z-index-base-value:0;--ic-z-index-page-header:calc(var(--ic-z-index-base-value) + 10);--ic-z-index-back-to-top:calc(var(--ic-z-index-base-value) + 20);--ic-z-index-skip-link:calc(var(--ic-z-index-base-value) + 20);--ic-z-index-popover:calc(var(--ic-z-index-base-value) + 50);--ic-z-index-sticky-page-header:calc(var(--ic-z-index-base-value) + 60);--ic-z-index-date-picker:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-navigation-item:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-navigation-menu:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-menu:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-side-navigation:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-dialog:calc(var(--ic-z-index-base-value) + 100);--ic-z-index-toast:calc(var(--ic-z-index-base-value) + 110);--ic-z-index-tooltip:calc(var(--ic-z-index-base-value) + 110);--ic-z-index-classification-banner:calc(var(--ic-z-index-base-value) + 200)}:root,ic-theme,.ic-theme-light{--ic-alert-height:calc(var(--ic-space-xs) + var(--ic-space-xxl))}@media (prefers-color-scheme: dark){:root{--ic-alert-height:calc(var(--ic-space-xxs) + var(--ic-space-xxl))}}.ic-theme-dark{--ic-alert-height:calc(var(--ic-space-xxs) + var(--ic-space-xxl))}
1780
+ cubic-bezier(0.165, 0.84, 0.44, 1);--ic-transition-duration-fast:100ms;--ic-transition-duration-slow:300ms;--ic-breakpoint-xs:0;--ic-breakpoint-sm:576px;--ic-breakpoint-md:768px;--ic-breakpoint-lg:992px;--ic-breakpoint-xl:1200px;--ic-space-1px:0.063rem;--ic-space-xxxs:0.125rem;--ic-space-xxs:0.25rem;--ic-space-xs:0.5rem;--ic-space-sm:0.75rem;--ic-space-md:1rem;--ic-space-lg:1.5rem;--ic-space-xl:2rem;--ic-space-xxl:3rem;--ic-z-index-base-value:0;--ic-z-index-page-header:calc(var(--ic-z-index-base-value) + 10);--ic-z-index-back-to-top:calc(var(--ic-z-index-base-value) + 20);--ic-z-index-skip-link:calc(var(--ic-z-index-base-value) + 20);--ic-z-index-popover:calc(var(--ic-z-index-base-value) + 50);--ic-z-index-sticky-page-header:calc(var(--ic-z-index-base-value) + 60);--ic-z-index-date-picker:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-navigation-item:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-navigation-menu:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-menu:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-side-navigation:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-dialog:calc(var(--ic-z-index-base-value) + 100);--ic-z-index-toast:calc(var(--ic-z-index-base-value) + 110);--ic-z-index-tooltip:calc(var(--ic-z-index-base-value) + 110);--ic-z-index-classification-banner:calc(var(--ic-z-index-base-value) + 200)}
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "sideEffects": [
4
4
  "*.css"
5
5
  ],
6
- "version": "3.0.0-canary.16",
6
+ "version": "3.0.0-canary.17",
7
7
  "description": "React-wrapped web components compiled using StencilJS",
8
8
  "scripts": {
9
9
  "build": "npm run clean && npm run compile && npm run copy:core-css && npm run copy:normalize-css",
@@ -38,9 +38,9 @@
38
38
  "email": "icds@gchq.gov.uk"
39
39
  },
40
40
  "dependencies": {
41
- "@ukic/canary-web-components": "^3.0.0-canary.16",
42
- "@ukic/react": "^3.1.0",
43
- "@ukic/web-components": "^3.1.0"
41
+ "@ukic/canary-web-components": "^3.0.0-canary.17",
42
+ "@ukic/react": "^3.2.0",
43
+ "@ukic/web-components": "^3.2.0"
44
44
  },
45
45
  "devDependencies": {
46
46
  "@babel/core": "^7.16.0",
@@ -90,7 +90,7 @@
90
90
  "webpack": "^5.76.0"
91
91
  },
92
92
  "peerDependencies": {
93
- "@ukic/fonts": "^2.3.0",
93
+ "@ukic/fonts": "^3.1.0",
94
94
  "react": "^16.7.0 || ^17.0.2 || ^18.2.0 || ^19.0.0",
95
95
  "react-dom": "^16.7.0 || ^17.0.2 || ^18.2.0 || ^19.0.0"
96
96
  },
@@ -104,5 +104,5 @@
104
104
  },
105
105
  "license": "MIT",
106
106
  "packageManager": "^npm@10.9.2",
107
- "gitHead": "6ddd470175efc6e34d94c67fe05db42304dd4e3c"
107
+ "gitHead": "e084fa80621797c35c5a59446ea6a3e97486a552"
108
108
  }