@ukic/react 3.1.0 → 3.2.0

package/README.md

@@ -58,6 +58,36 @@ The `@ukic/react` package will need to be transformed before you can use these c
 
 Add a `transformIgnorePatterns` field with the value `["/node_modules/(?!@ukic/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/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/react. 
+
+```ts
+import { IcSelectTypes, IcMenuOption } from '@ukic/web-components';
+
+const selectType: IcSelectTypes = "single";
+
+const options: IcMenuOption[] = [
+  {
+    label: "Americano",
+    value: "ame",
+    description: "Classic black coffee",
+
+  },
+  {
+    label: "Latte",
+    value: "lat",
+    description: "This coffee has milk in, we know that much",
+    disabled: true
+  }
+];
+```
+
 ## Contributing
 
 We have a couple of resources to help you with contributing.

package/dist/core/core.css

@@ -1777,4 +1777,4 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
     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%),
     inset 0 -4px 16px rgb(0 0 0 / 25%);--ic-easing-transition-fast:var(--ic-transition-duration-fast)
     cubic-bezier(0.165, 0.84, 0.44, 1);--ic-easing-transition-slow:var(--ic-transition-duration-slow)
-    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))}
+    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

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "React-wrapped web components compiled using StencilJS",
   "author": "mi6",
   "bugs": {
@@ -46,7 +46,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@ukic/web-components": "^3.1.0"
+    "@ukic/web-components": "^3.2.0"
   },
   "devDependencies": {
     "@ag-grid-community/styles": "^33.0.3",
@@ -108,11 +108,11 @@
     "webpack-dev-server": "^4.15.2"
   },
   "peerDependencies": {
-    "@ukic/fonts": "^2.6.0",
+    "@ukic/fonts": "^3.1.0",
     "react": "^16.7.0 || ^17.0.2 || ^18.2.0 || ^19.0.0",
     "react-dom": "^16.7.0 || ^17.0.2 || ^18.2.0 || ^19.0.0"
   },
   "license": "MIT",
   "packageManager": "^npm@10.9.2",
-  "gitHead": "6ddd470175efc6e34d94c67fe05db42304dd4e3c"
+  "gitHead": "e084fa80621797c35c5a59446ea6a3e97486a552"
 }