@ukic/canary-react 2.0.0-canary.2 → 2.0.0-canary.4
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +67 -67
- package/dist/components.d.ts +4 -63
- package/dist/components.js +8 -67
- package/dist/core/core.css +8 -5
- package/dist/index.d.ts +1 -2
- package/dist/index.js +1 -2
- package/dist/react-component-lib/createComponent.d.ts +10 -10
- package/dist/react-component-lib/createComponent.js +74 -74
- package/dist/react-component-lib/createOverlayComponent.d.ts +21 -21
- package/dist/react-component-lib/createOverlayComponent.js +108 -108
- package/dist/react-component-lib/index.d.ts +2 -2
- package/dist/react-component-lib/index.js +2 -2
- package/dist/react-component-lib/interfaces.d.ts +29 -29
- package/dist/react-component-lib/interfaces.js +1 -1
- package/dist/react-component-lib/utils/attachProps.d.ts +16 -16
- package/dist/react-component-lib/utils/attachProps.js +107 -107
- package/dist/react-component-lib/utils/case.d.ts +2 -2
- package/dist/react-component-lib/utils/case.js +6 -6
- package/dist/react-component-lib/utils/dev.d.ts +2 -2
- package/dist/react-component-lib/utils/dev.js +12 -12
- package/dist/react-component-lib/utils/index.d.ts +10 -10
- package/dist/react-component-lib/utils/index.js +31 -31
- package/package.json +11 -9
- package/dist/react-component-lib/slottedSVG.d.ts +0 -2
- package/dist/react-component-lib/slottedSVG.js +0 -24
package/README.md
CHANGED
@@ -1,68 +1,68 @@
|
|
1
|
-
# The UK Intelligence Community React UI Kit
|
2
|
-
|
3
|
-
[![OGL V3 License](https://img.shields.io/badge/license-OGLv3-blue.svg)](https://github.com/mi6/ic-design-system/tree/main/LICENSE)
|
4
|
-
[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/mi6/ic-design-system/tree/main/LICENSE)
|
5
|
-
|
6
|
-
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.
|
7
|
-
|
8
|
-
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).
|
9
|
-
|
10
|
-
## Installing
|
11
|
-
|
12
|
-
To install the components:
|
13
|
-
|
14
|
-
### Step one
|
15
|
-
|
16
|
-
In the root of your project:
|
17
|
-
|
18
|
-
```shell
|
19
|
-
// using npm
|
20
|
-
npm install @ukic/canary-react @ukic/fonts
|
21
|
-
|
22
|
-
// using yarn
|
23
|
-
rm package-lock.json
|
24
|
-
yarn add @ukic/canary-react @ukic/fonts
|
25
|
-
```
|
26
|
-
|
27
|
-
### Step two
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
```
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
@import "@ukic/canary-react/dist/core/
|
44
|
-
```
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
```
|
51
|
-
|
52
|
-
```
|
53
|
-
|
54
|
-
### Step four
|
55
|
-
|
56
|
-
The `@ukic/canary-react` package will need to be transformed before you can use these components in Jest tests.
|
57
|
-
|
58
|
-
Add a `transformIgnorePatterns` field with the value `["/node_modules/(?!@ukic/canary-react)"]` to your Jest config.
|
59
|
-
|
60
|
-
## Security
|
61
|
-
|
62
|
-
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.
|
63
|
-
|
64
|
-
## License
|
65
|
-
|
66
|
-
Unless stated otherwise, the codebase is released under the [MIT License](https://opensource.org/licenses/MIT). This covers both the codebase and any sample code in the documentation. The documentation is and available under the terms of the [Open Government License v3.0](https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/).
|
67
|
-
|
1
|
+
# [Canary]: The UK Intelligence Community React UI Kit
|
2
|
+
|
3
|
+
[![OGL V3 License](https://img.shields.io/badge/license-OGLv3-blue.svg)](https://github.com/mi6/ic-design-system/tree/main/LICENSE)
|
4
|
+
[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/mi6/ic-design-system/tree/main/LICENSE)
|
5
|
+
|
6
|
+
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.
|
7
|
+
|
8
|
+
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).
|
9
|
+
|
10
|
+
## Installing
|
11
|
+
|
12
|
+
To install the components:
|
13
|
+
|
14
|
+
### Step one
|
15
|
+
|
16
|
+
In the root of your project:
|
17
|
+
|
18
|
+
```shell
|
19
|
+
// using npm
|
20
|
+
npm install @ukic/canary-react @ukic/fonts
|
21
|
+
|
22
|
+
// using yarn
|
23
|
+
rm package-lock.json
|
24
|
+
yarn add @ukic/canary-react @ukic/fonts
|
25
|
+
```
|
26
|
+
|
27
|
+
### Step two
|
28
|
+
|
29
|
+
To get the correct styling with the ICDS components, import the core CSS file.
|
30
|
+
|
31
|
+
Add the following into the top level CSS file for your project.
|
32
|
+
|
33
|
+
```css
|
34
|
+
@import "@ukic/fonts/dist/fonts.css";
|
35
|
+
@import "@ukic/canary-react/dist/core/core.css";
|
36
|
+
```
|
37
|
+
|
38
|
+
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/).
|
39
|
+
|
40
|
+
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.
|
41
|
+
|
42
|
+
```css
|
43
|
+
@import "@ukic/canary-react/dist/core/normalize.css";
|
44
|
+
```
|
45
|
+
|
46
|
+
### Step three
|
47
|
+
|
48
|
+
Import the component(s) in your React files.
|
49
|
+
|
50
|
+
```jsx
|
51
|
+
import { IcComponent } from "@ukic/canary-react";
|
52
|
+
```
|
53
|
+
|
54
|
+
### Step four
|
55
|
+
|
56
|
+
The `@ukic/canary-react` package will need to be transformed before you can use these components in Jest tests.
|
57
|
+
|
58
|
+
Add a `transformIgnorePatterns` field with the value `["/node_modules/(?!@ukic/canary-react)"]` to your Jest config.
|
59
|
+
|
60
|
+
## Security
|
61
|
+
|
62
|
+
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.
|
63
|
+
|
64
|
+
## License
|
65
|
+
|
66
|
+
Unless stated otherwise, the codebase is released under the [MIT License](https://opensource.org/licenses/MIT). This covers both the codebase and any sample code in the documentation. The documentation is and available under the terms of the [Open Government License v3.0](https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/).
|
67
|
+
|
68
68
|
© Crown copyright 2022
|
package/dist/components.d.ts
CHANGED
@@ -1,63 +1,4 @@
|
|
1
|
-
/// <reference types="react" />
|
2
|
-
import type { JSX } from '@ukic/canary-web-components';
|
3
|
-
export declare const
|
4
|
-
export declare const
|
5
|
-
export declare const IcBreadcrumb: import("react").ForwardRefExoticComponent<JSX.IcBreadcrumb & Omit<import("react").HTMLAttributes<HTMLIcBreadcrumbElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcBreadcrumbElement>>;
|
6
|
-
export declare const IcBreadcrumbGroup: import("react").ForwardRefExoticComponent<JSX.IcBreadcrumbGroup & Omit<import("react").HTMLAttributes<HTMLIcBreadcrumbGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcBreadcrumbGroupElement>>;
|
7
|
-
export declare const IcButton: import("react").ForwardRefExoticComponent<JSX.IcButton & Omit<import("react").HTMLAttributes<HTMLIcButtonElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcButtonElement>>;
|
8
|
-
export declare const IcCard: import("react").ForwardRefExoticComponent<JSX.IcCard & Omit<import("react").HTMLAttributes<HTMLIcCardElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcCardElement>>;
|
9
|
-
export declare const IcCheckbox: import("react").ForwardRefExoticComponent<JSX.IcCheckbox & Omit<import("react").HTMLAttributes<HTMLIcCheckboxElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcCheckboxElement>>;
|
10
|
-
export declare const IcCheckboxGroup: import("react").ForwardRefExoticComponent<JSX.IcCheckboxGroup & Omit<import("react").HTMLAttributes<HTMLIcCheckboxGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcCheckboxGroupElement>>;
|
11
|
-
export declare const IcChip: import("react").ForwardRefExoticComponent<JSX.IcChip & Omit<import("react").HTMLAttributes<HTMLIcChipElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcChipElement>>;
|
12
|
-
export declare const IcClassificationBanner: import("react").ForwardRefExoticComponent<JSX.IcClassificationBanner & Omit<import("react").HTMLAttributes<HTMLIcClassificationBannerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcClassificationBannerElement>>;
|
13
|
-
export declare const IcDataEntity: import("react").ForwardRefExoticComponent<JSX.IcDataEntity & Omit<import("react").HTMLAttributes<HTMLIcDataEntityElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDataEntityElement>>;
|
14
|
-
export declare const IcDataRow: import("react").ForwardRefExoticComponent<JSX.IcDataRow & Omit<import("react").HTMLAttributes<HTMLIcDataRowElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDataRowElement>>;
|
15
|
-
export declare const IcDataTable: import("react").ForwardRefExoticComponent<JSX.IcDataTable & Omit<import("react").HTMLAttributes<HTMLIcDataTableElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDataTableElement>>;
|
16
|
-
export declare const IcDialog: import("react").ForwardRefExoticComponent<JSX.IcDialog & Omit<import("react").HTMLAttributes<HTMLIcDialogElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDialogElement>>;
|
17
|
-
export declare const IcDivider: import("react").ForwardRefExoticComponent<JSX.IcDivider & Omit<import("react").HTMLAttributes<HTMLIcDividerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDividerElement>>;
|
18
|
-
export declare const IcEmptyState: import("react").ForwardRefExoticComponent<JSX.IcEmptyState & Omit<import("react").HTMLAttributes<HTMLIcEmptyStateElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcEmptyStateElement>>;
|
19
|
-
export declare const IcFooter: import("react").ForwardRefExoticComponent<JSX.IcFooter & Omit<import("react").HTMLAttributes<HTMLIcFooterElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcFooterElement>>;
|
20
|
-
export declare const IcFooterLink: import("react").ForwardRefExoticComponent<JSX.IcFooterLink & Omit<import("react").HTMLAttributes<HTMLIcFooterLinkElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcFooterLinkElement>>;
|
21
|
-
export declare const IcFooterLinkGroup: import("react").ForwardRefExoticComponent<JSX.IcFooterLinkGroup & Omit<import("react").HTMLAttributes<HTMLIcFooterLinkGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcFooterLinkGroupElement>>;
|
22
|
-
export declare const IcHero: import("react").ForwardRefExoticComponent<JSX.IcHero & Omit<import("react").HTMLAttributes<HTMLIcHeroElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcHeroElement>>;
|
23
|
-
export declare const IcHorizontalScroll: import("react").ForwardRefExoticComponent<JSX.IcHorizontalScroll & Omit<import("react").HTMLAttributes<HTMLIcHorizontalScrollElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcHorizontalScrollElement>>;
|
24
|
-
export declare const IcInputComponentContainer: import("react").ForwardRefExoticComponent<JSX.IcInputComponentContainer & Omit<import("react").HTMLAttributes<HTMLIcInputComponentContainerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcInputComponentContainerElement>>;
|
25
|
-
export declare const IcInputContainer: import("react").ForwardRefExoticComponent<JSX.IcInputContainer & Omit<import("react").HTMLAttributes<HTMLIcInputContainerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcInputContainerElement>>;
|
26
|
-
export declare const IcInputLabel: import("react").ForwardRefExoticComponent<JSX.IcInputLabel & Omit<import("react").HTMLAttributes<HTMLIcInputLabelElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcInputLabelElement>>;
|
27
|
-
export declare const IcInputValidation: import("react").ForwardRefExoticComponent<JSX.IcInputValidation & Omit<import("react").HTMLAttributes<HTMLIcInputValidationElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcInputValidationElement>>;
|
28
|
-
export declare const IcLink: import("react").ForwardRefExoticComponent<JSX.IcLink & Omit<import("react").HTMLAttributes<HTMLIcLinkElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcLinkElement>>;
|
29
|
-
export declare const IcLoadingIndicator: import("react").ForwardRefExoticComponent<JSX.IcLoadingIndicator & Omit<import("react").HTMLAttributes<HTMLIcLoadingIndicatorElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcLoadingIndicatorElement>>;
|
30
|
-
export declare const IcMenu: import("react").ForwardRefExoticComponent<JSX.IcMenu & Omit<import("react").HTMLAttributes<HTMLIcMenuElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcMenuElement>>;
|
31
|
-
export declare const IcMenuGroup: import("react").ForwardRefExoticComponent<JSX.IcMenuGroup & Omit<import("react").HTMLAttributes<HTMLIcMenuGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcMenuGroupElement>>;
|
32
|
-
export declare const IcMenuItem: import("react").ForwardRefExoticComponent<JSX.IcMenuItem & Omit<import("react").HTMLAttributes<HTMLIcMenuItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcMenuItemElement>>;
|
33
|
-
export declare const IcNavigationButton: import("react").ForwardRefExoticComponent<JSX.IcNavigationButton & Omit<import("react").HTMLAttributes<HTMLIcNavigationButtonElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcNavigationButtonElement>>;
|
34
|
-
export declare const IcNavigationGroup: import("react").ForwardRefExoticComponent<JSX.IcNavigationGroup & Omit<import("react").HTMLAttributes<HTMLIcNavigationGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcNavigationGroupElement>>;
|
35
|
-
export declare const IcNavigationItem: import("react").ForwardRefExoticComponent<JSX.IcNavigationItem & Omit<import("react").HTMLAttributes<HTMLIcNavigationItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcNavigationItemElement>>;
|
36
|
-
export declare const IcNavigationMenu: import("react").ForwardRefExoticComponent<JSX.IcNavigationMenu & Omit<import("react").HTMLAttributes<HTMLIcNavigationMenuElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcNavigationMenuElement>>;
|
37
|
-
export declare const IcPageHeader: import("react").ForwardRefExoticComponent<JSX.IcPageHeader & Omit<import("react").HTMLAttributes<HTMLIcPageHeaderElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcPageHeaderElement>>;
|
38
|
-
export declare const IcPagination: import("react").ForwardRefExoticComponent<JSX.IcPagination & Omit<import("react").HTMLAttributes<HTMLIcPaginationElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcPaginationElement>>;
|
39
|
-
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>>;
|
40
|
-
export declare const IcPaginationItem: import("react").ForwardRefExoticComponent<JSX.IcPaginationItem & Omit<import("react").HTMLAttributes<HTMLIcPaginationItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcPaginationItemElement>>;
|
41
|
-
export declare const IcPopoverMenu: import("react").ForwardRefExoticComponent<JSX.IcPopoverMenu & Omit<import("react").HTMLAttributes<HTMLIcPopoverMenuElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcPopoverMenuElement>>;
|
42
|
-
export declare const IcRadioGroup: import("react").ForwardRefExoticComponent<JSX.IcRadioGroup & Omit<import("react").HTMLAttributes<HTMLIcRadioGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcRadioGroupElement>>;
|
43
|
-
export declare const IcRadioOption: import("react").ForwardRefExoticComponent<JSX.IcRadioOption & Omit<import("react").HTMLAttributes<HTMLIcRadioOptionElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcRadioOptionElement>>;
|
44
|
-
export declare const IcSearchBar: import("react").ForwardRefExoticComponent<JSX.IcSearchBar & Omit<import("react").HTMLAttributes<HTMLIcSearchBarElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcSearchBarElement>>;
|
45
|
-
export declare const IcSectionContainer: import("react").ForwardRefExoticComponent<JSX.IcSectionContainer & Omit<import("react").HTMLAttributes<HTMLIcSectionContainerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcSectionContainerElement>>;
|
46
|
-
export declare const IcSelect: import("react").ForwardRefExoticComponent<JSX.IcSelect & Omit<import("react").HTMLAttributes<HTMLIcSelectElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcSelectElement>>;
|
47
|
-
export declare const IcSideNavigation: import("react").ForwardRefExoticComponent<JSX.IcSideNavigation & Omit<import("react").HTMLAttributes<HTMLIcSideNavigationElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcSideNavigationElement>>;
|
48
|
-
export declare const IcSkeleton: import("react").ForwardRefExoticComponent<JSX.IcSkeleton & Omit<import("react").HTMLAttributes<HTMLIcSkeletonElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcSkeletonElement>>;
|
49
|
-
export declare const IcStatusTag: import("react").ForwardRefExoticComponent<JSX.IcStatusTag & Omit<import("react").HTMLAttributes<HTMLIcStatusTagElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcStatusTagElement>>;
|
50
|
-
export declare const IcStep: import("react").ForwardRefExoticComponent<JSX.IcStep & Omit<import("react").HTMLAttributes<HTMLIcStepElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcStepElement>>;
|
51
|
-
export declare const IcStepper: import("react").ForwardRefExoticComponent<JSX.IcStepper & Omit<import("react").HTMLAttributes<HTMLIcStepperElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcStepperElement>>;
|
52
|
-
export declare const IcSwitch: import("react").ForwardRefExoticComponent<JSX.IcSwitch & Omit<import("react").HTMLAttributes<HTMLIcSwitchElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcSwitchElement>>;
|
53
|
-
export declare const IcTab: import("react").ForwardRefExoticComponent<JSX.IcTab & Omit<import("react").HTMLAttributes<HTMLIcTabElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcTabElement>>;
|
54
|
-
export declare const IcTabContext: import("react").ForwardRefExoticComponent<JSX.IcTabContext & Omit<import("react").HTMLAttributes<HTMLIcTabContextElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcTabContextElement>>;
|
55
|
-
export declare const IcTabGroup: import("react").ForwardRefExoticComponent<JSX.IcTabGroup & Omit<import("react").HTMLAttributes<HTMLIcTabGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcTabGroupElement>>;
|
56
|
-
export declare const IcTabPanel: import("react").ForwardRefExoticComponent<JSX.IcTabPanel & Omit<import("react").HTMLAttributes<HTMLIcTabPanelElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcTabPanelElement>>;
|
57
|
-
export declare const IcTextField: import("react").ForwardRefExoticComponent<JSX.IcTextField & Omit<import("react").HTMLAttributes<HTMLIcTextFieldElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcTextFieldElement>>;
|
58
|
-
export declare const IcTheme: import("react").ForwardRefExoticComponent<JSX.IcTheme & Omit<import("react").HTMLAttributes<HTMLIcThemeElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcThemeElement>>;
|
59
|
-
export declare const IcToast: import("react").ForwardRefExoticComponent<JSX.IcToast & Omit<import("react").HTMLAttributes<HTMLIcToastElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcToastElement>>;
|
60
|
-
export declare const IcToastRegion: import("react").ForwardRefExoticComponent<JSX.IcToastRegion & Omit<import("react").HTMLAttributes<HTMLIcToastRegionElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcToastRegionElement>>;
|
61
|
-
export declare const IcTooltip: import("react").ForwardRefExoticComponent<JSX.IcTooltip & Omit<import("react").HTMLAttributes<HTMLIcTooltipElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcTooltipElement>>;
|
62
|
-
export declare const IcTopNavigation: import("react").ForwardRefExoticComponent<JSX.IcTopNavigation & Omit<import("react").HTMLAttributes<HTMLIcTopNavigationElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcTopNavigationElement>>;
|
63
|
-
export declare const IcTypography: import("react").ForwardRefExoticComponent<JSX.IcTypography & Omit<import("react").HTMLAttributes<HTMLIcTypographyElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcTypographyElement>>;
|
1
|
+
/// <reference types="react" />
|
2
|
+
import type { JSX } from '@ukic/canary-web-components';
|
3
|
+
export declare const IcDataTable: import("react").ForwardRefExoticComponent<JSX.IcDataTable & Omit<import("react").HTMLAttributes<HTMLIcDataTableElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDataTableElement>>;
|
4
|
+
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>>;
|
package/dist/components.js
CHANGED
@@ -1,67 +1,8 @@
|
|
1
|
-
/* eslint-disable */
|
2
|
-
/* tslint:disable */
|
3
|
-
/* auto-generated react proxies */
|
4
|
-
import { createReactComponent } from './react-component-lib';
|
5
|
-
import { defineCustomElements } from '@ukic/canary-web-components/loader';
|
6
|
-
defineCustomElements();
|
7
|
-
export const
|
8
|
-
export const
|
9
|
-
export const IcBreadcrumb = /*@__PURE__*/ createReactComponent('ic-breadcrumb');
|
10
|
-
export const IcBreadcrumbGroup = /*@__PURE__*/ createReactComponent('ic-breadcrumb-group');
|
11
|
-
export const IcButton = /*@__PURE__*/ createReactComponent('ic-button');
|
12
|
-
export const IcCard = /*@__PURE__*/ createReactComponent('ic-card');
|
13
|
-
export const IcCheckbox = /*@__PURE__*/ createReactComponent('ic-checkbox');
|
14
|
-
export const IcCheckboxGroup = /*@__PURE__*/ createReactComponent('ic-checkbox-group');
|
15
|
-
export const IcChip = /*@__PURE__*/ createReactComponent('ic-chip');
|
16
|
-
export const IcClassificationBanner = /*@__PURE__*/ createReactComponent('ic-classification-banner');
|
17
|
-
export const IcDataEntity = /*@__PURE__*/ createReactComponent('ic-data-entity');
|
18
|
-
export const IcDataRow = /*@__PURE__*/ createReactComponent('ic-data-row');
|
19
|
-
export const IcDataTable = /*@__PURE__*/ createReactComponent('ic-data-table');
|
20
|
-
export const IcDialog = /*@__PURE__*/ createReactComponent('ic-dialog');
|
21
|
-
export const IcDivider = /*@__PURE__*/ createReactComponent('ic-divider');
|
22
|
-
export const IcEmptyState = /*@__PURE__*/ createReactComponent('ic-empty-state');
|
23
|
-
export const IcFooter = /*@__PURE__*/ createReactComponent('ic-footer');
|
24
|
-
export const IcFooterLink = /*@__PURE__*/ createReactComponent('ic-footer-link');
|
25
|
-
export const IcFooterLinkGroup = /*@__PURE__*/ createReactComponent('ic-footer-link-group');
|
26
|
-
export const IcHero = /*@__PURE__*/ createReactComponent('ic-hero');
|
27
|
-
export const IcHorizontalScroll = /*@__PURE__*/ createReactComponent('ic-horizontal-scroll');
|
28
|
-
export const IcInputComponentContainer = /*@__PURE__*/ createReactComponent('ic-input-component-container');
|
29
|
-
export const IcInputContainer = /*@__PURE__*/ createReactComponent('ic-input-container');
|
30
|
-
export const IcInputLabel = /*@__PURE__*/ createReactComponent('ic-input-label');
|
31
|
-
export const IcInputValidation = /*@__PURE__*/ createReactComponent('ic-input-validation');
|
32
|
-
export const IcLink = /*@__PURE__*/ createReactComponent('ic-link');
|
33
|
-
export const IcLoadingIndicator = /*@__PURE__*/ createReactComponent('ic-loading-indicator');
|
34
|
-
export const IcMenu = /*@__PURE__*/ createReactComponent('ic-menu');
|
35
|
-
export const IcMenuGroup = /*@__PURE__*/ createReactComponent('ic-menu-group');
|
36
|
-
export const IcMenuItem = /*@__PURE__*/ createReactComponent('ic-menu-item');
|
37
|
-
export const IcNavigationButton = /*@__PURE__*/ createReactComponent('ic-navigation-button');
|
38
|
-
export const IcNavigationGroup = /*@__PURE__*/ createReactComponent('ic-navigation-group');
|
39
|
-
export const IcNavigationItem = /*@__PURE__*/ createReactComponent('ic-navigation-item');
|
40
|
-
export const IcNavigationMenu = /*@__PURE__*/ createReactComponent('ic-navigation-menu');
|
41
|
-
export const IcPageHeader = /*@__PURE__*/ createReactComponent('ic-page-header');
|
42
|
-
export const IcPagination = /*@__PURE__*/ createReactComponent('ic-pagination');
|
43
|
-
export const IcPaginationBar = /*@__PURE__*/ createReactComponent('ic-pagination-bar');
|
44
|
-
export const IcPaginationItem = /*@__PURE__*/ createReactComponent('ic-pagination-item');
|
45
|
-
export const IcPopoverMenu = /*@__PURE__*/ createReactComponent('ic-popover-menu');
|
46
|
-
export const IcRadioGroup = /*@__PURE__*/ createReactComponent('ic-radio-group');
|
47
|
-
export const IcRadioOption = /*@__PURE__*/ createReactComponent('ic-radio-option');
|
48
|
-
export const IcSearchBar = /*@__PURE__*/ createReactComponent('ic-search-bar');
|
49
|
-
export const IcSectionContainer = /*@__PURE__*/ createReactComponent('ic-section-container');
|
50
|
-
export const IcSelect = /*@__PURE__*/ createReactComponent('ic-select');
|
51
|
-
export const IcSideNavigation = /*@__PURE__*/ createReactComponent('ic-side-navigation');
|
52
|
-
export const IcSkeleton = /*@__PURE__*/ createReactComponent('ic-skeleton');
|
53
|
-
export const IcStatusTag = /*@__PURE__*/ createReactComponent('ic-status-tag');
|
54
|
-
export const IcStep = /*@__PURE__*/ createReactComponent('ic-step');
|
55
|
-
export const IcStepper = /*@__PURE__*/ createReactComponent('ic-stepper');
|
56
|
-
export const IcSwitch = /*@__PURE__*/ createReactComponent('ic-switch');
|
57
|
-
export const IcTab = /*@__PURE__*/ createReactComponent('ic-tab');
|
58
|
-
export const IcTabContext = /*@__PURE__*/ createReactComponent('ic-tab-context');
|
59
|
-
export const IcTabGroup = /*@__PURE__*/ createReactComponent('ic-tab-group');
|
60
|
-
export const IcTabPanel = /*@__PURE__*/ createReactComponent('ic-tab-panel');
|
61
|
-
export const IcTextField = /*@__PURE__*/ createReactComponent('ic-text-field');
|
62
|
-
export const IcTheme = /*@__PURE__*/ createReactComponent('ic-theme');
|
63
|
-
export const IcToast = /*@__PURE__*/ createReactComponent('ic-toast');
|
64
|
-
export const IcToastRegion = /*@__PURE__*/ createReactComponent('ic-toast-region');
|
65
|
-
export const IcTooltip = /*@__PURE__*/ createReactComponent('ic-tooltip');
|
66
|
-
export const IcTopNavigation = /*@__PURE__*/ createReactComponent('ic-top-navigation');
|
67
|
-
export const IcTypography = /*@__PURE__*/ createReactComponent('ic-typography');
|
1
|
+
/* eslint-disable */
|
2
|
+
/* tslint:disable */
|
3
|
+
/* auto-generated react proxies */
|
4
|
+
import { createReactComponent } from './react-component-lib';
|
5
|
+
import { defineCustomElements } from '@ukic/canary-web-components/loader';
|
6
|
+
defineCustomElements();
|
7
|
+
export const IcDataTable = /*@__PURE__*/ createReactComponent('ic-data-table');
|
8
|
+
export const IcPaginationBar = /*@__PURE__*/ createReactComponent('ic-pagination-bar');
|
package/dist/core/core.css
CHANGED
@@ -4,7 +4,7 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-primary-text)}a
|
|
4
4
|
inset 0 0 0 8px var(--ic-architectural-white);--ic-border-focus-dark:0 0 0 2px white, 0 0 0 5px rgba(255 255 255 / 52%);--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%),
|
5
5
|
inset 0 -4px 16px rgb(0 0 0 / 25%);--ic-easing-transition-fast:var(--ic-transition-duration-fast)
|
6
6
|
cubic-bezier(0.165, 0.84, 0.44, 1);--ic-easing-transition-slow:var(--ic-transition-duration-slow)
|
7
|
-
cubic-bezier(0.165, 0.84, 0.44, 1);--ic-transition-duration-fast:100ms;--ic-transition-duration-slow:300ms;--ic-border-disabled:var(--ic-space-1px) dashed var(--ic-architectural-200);--ic-border-light:var(--ic-space-1px) solid var(--ic-architectural-200);--ic-border-default:var(--ic-space-1px) solid var(--ic-architectural-400);--ic-border-hover:var(--ic-space-1px) solid var(--ic-architectural-500);--ic-border-pressed:var(--ic-space-1px) solid var(--ic-architectural-600);--ic-hc-border:var(--ic-space-1px) solid transparent;--ic-error-border-default:var(--ic-space-xxxs) solid var(--ic-status-error);--ic-error-border-hover:var(--ic-space-xxxs) solid
|
7
|
+
cubic-bezier(0.165, 0.84, 0.44, 1);--ic-transition-duration-fast:100ms;--ic-transition-duration-slow:300ms;--ic-border-width:0.0625rem;--ic-border-disabled:var(--ic-space-1px) dashed var(--ic-architectural-200);--ic-border-light:var(--ic-space-1px) solid var(--ic-architectural-200);--ic-border-default:var(--ic-space-1px) solid var(--ic-architectural-400);--ic-border-hover:var(--ic-space-1px) solid var(--ic-architectural-500);--ic-border-pressed:var(--ic-space-1px) solid var(--ic-architectural-600);--ic-hc-border:var(--ic-space-1px) solid transparent;--ic-error-border-default:var(--ic-space-xxxs) solid var(--ic-status-error);--ic-error-border-hover:var(--ic-space-xxxs) solid
|
8
8
|
var(--ic-status-error-hover);--ic-error-border-pressed:var(--ic-space-xxxs) solid
|
9
9
|
var(--ic-status-error-pressed);--ic-success-border-default:var(--ic-space-xxxs) solid
|
10
10
|
var(--ic-status-success);--ic-success-border-hover:var(--ic-space-xxxs) solid
|
@@ -12,7 +12,7 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-primary-text)}a
|
|
12
12
|
var(--ic-status-success-pressed);--ic-warning-border-default:var(--ic-space-xxxs) solid
|
13
13
|
var(--ic-status-warning);--ic-warning-border-hover:var(--ic-space-xxxs) solid
|
14
14
|
var(--ic-status-warning-hover);--ic-warning-border-pressed:var(--ic-space-xxxs) solid
|
15
|
-
var(--ic-status-warning-pressed);--ic-font-body-family:"Open Sans", "Helvetica Neue", "Arial", "sans-serif";--ic-font-heading-family:"Nunito Sans", sans-serif;--ic-font-code-family:"Source Code Pro", monospace;--ic-font-weight-extrabold:800;--ic-font-weight-bold:700;--ic-font-weight-semibold:600;--ic-font-weight-regular:400;--ic-font-size-h1:2.625rem;--ic-font-size-h2:2.125rem;--ic-font-size-h3:1.5rem;--ic-font-size-h4:1.25rem;--ic-font-size-regular:1rem;--ic-font-size-label:0.875rem;--ic-font-size-caption:0.75rem;--ic-font-line-height-h1:3.5rem;--ic-font-line-height-h2:3.5rem;--ic-font-line-height-h3:2.5rem;--ic-font-line-height-h4:2rem;--ic-font-line-height-subtitle-large:1.5rem;--ic-font-line-height-subtitle-small:1.5rem;--ic-font-line-height-body:1.5rem;--ic-font-line-height-caption:1.25rem;--ic-font-line-height-code:1.5rem;--ic-font-letter-spacing-0pt025:0.025rem;--ic-font-letter-spacing-0pt005:0.005rem;--ic-font-letter-spacing-0pt0025:0.0025rem;--ic-font-letter-spacing-0pt0015:0.0015rem;--ic-font-h1:var(--ic-font-weight-extrabold) var(--ic-font-size-h1) /
|
15
|
+
var(--ic-status-warning-pressed);--ic-font-body-family:"Open Sans", "Helvetica Neue", "Arial", "sans-serif";--ic-font-heading-family:"Nunito Sans", sans-serif;--ic-font-code-family:"Source Code Pro", monospace;--ic-font-weight-extrabold:800;--ic-font-weight-bold:700;--ic-font-weight-semibold:600;--ic-font-weight-regular:400;--ic-font-size-h1:2.625rem;--ic-font-size-h2:2.125rem;--ic-font-size-h3:1.5rem;--ic-font-size-h4:1.25rem;--ic-font-size-regular:1rem;--ic-font-size-label:0.875rem;--ic-font-size-caption:0.75rem;--ic-font-size-badge-small:0.563rem;--ic-font-line-height-h1:3.5rem;--ic-font-line-height-h2:3.5rem;--ic-font-line-height-h3:2.5rem;--ic-font-line-height-h4:2rem;--ic-font-line-height-subtitle-large:1.5rem;--ic-font-line-height-subtitle-small:1.5rem;--ic-font-line-height-body:1.5rem;--ic-font-line-height-caption:1.25rem;--ic-font-line-height-code:1.5rem;--ic-font-line-height-badge:0.875rem;--ic-font-line-height-badge-small:0.75rem;--ic-font-letter-spacing-0pt025:0.025rem;--ic-font-letter-spacing-0pt005:0.005rem;--ic-font-letter-spacing-0pt0025:0.0025rem;--ic-font-letter-spacing-0pt0015:0.0015rem;--ic-font-h1:var(--ic-font-weight-extrabold) var(--ic-font-size-h1) /
|
16
16
|
var(--ic-font-line-height-h1) var(--ic-font-heading-family);--ic-font-h2:var(--ic-font-weight-bold) var(--ic-font-size-h2) /
|
17
17
|
var(--ic-font-line-height-h2) var(--ic-font-heading-family);--ic-font-h3:var(--ic-font-weight-regular) var(--ic-font-size-h3) /
|
18
18
|
var(--ic-font-line-height-h3) var(--ic-font-body-family);--ic-font-h4:var(--ic-font-weight-semibold) var(--ic-font-size-h4) /
|
@@ -28,7 +28,10 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-primary-text)}a
|
|
28
28
|
var(--ic-font-code-family);--ic-font-code-small:var(--ic-font-weight-semibold) var(--ic-font-size-label) /
|
29
29
|
var(--ic-font-line-height-code) var(--ic-font-code-family);--ic-font-code-extra-small:var(--ic-font-weight-regular)
|
30
30
|
var(--ic-font-size-caption) / var(--ic-font-line-height-code)
|
31
|
-
var(--ic-font-code-family);--ic-
|
31
|
+
var(--ic-font-code-family);--ic-font-badge:var(--ic-font-weight-semibold) var(--ic-font-size-caption) /
|
32
|
+
var(--ic-font-line-height-badge) var(--ic-font-body-family);--ic-font-badge-small:var(--ic-font-weight-semibold)
|
33
|
+
var(--ic-font-size-badge-small) / var(--ic-font-line-height-badge-small)
|
34
|
+
var(--ic-font-body-family);--ic-keyline-darken-rgb:rgb(0 0 0 / 20%);--ic-keyline-darken:1px solid var(--ic-keyline-darken-rgb);--ic-keyline-lighten-rgb:rgb(255 255 255 / 20%);--ic-keyline-lighten:1px solid var(--ic-keyline-lighten-rgb);--ic-status-success-light:#e8fef3;--ic-status-success-r:0;--ic-status-success-g:112;--ic-status-success-b:60;--ic-status-success-a:1;--ic-status-success:rgb(
|
32
35
|
var(--ic-status-success-r) var(--ic-status-success-g)
|
33
36
|
var(--ic-status-success-b) / var(--ic-status-success-a)
|
34
37
|
);--ic-status-success-hover:rgb(
|
@@ -59,7 +62,7 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-primary-text)}a
|
|
59
62
|
);--ic-status-error-pressed:rgb(
|
60
63
|
calc(var(--ic-status-error-r) * 0.6) calc(var(--ic-status-error-g) * 0.6)
|
61
64
|
calc(var(--ic-status-error-b) * 0.6) / var(--ic-status-error-a)
|
62
|
-
);--ic-status-error-dark:#610a05;--ic-status-info-light:#e1f0fc;--ic-status-info-contrast:#488fe3;--ic-status-info:#124db3;--ic-status-info-dark:#041144;--ic-status-anomalous-light:#efdbff;--ic-status-anomalous-contrast:#b764fb;--ic-status-anomalous:#7c25c2;--ic-status-anomalous-dark:#350f54;--ic-status-unknown-light:var(--ic-architectural-40);--ic-status-unknown-contrast:var(--ic-architectural-300);--ic-status-unknown:var(--ic-architectural-500);--ic-status-unknown-dark:var(--ic-architectural-800);--ic-status-warning-mid:var(--ic-status-warning);--ic-status-warning-mid-hover:var(--ic-status-warning-hover);--ic-status-warning-mid-pressed:var(--ic-status-warning-pressed);--ic-status-success-background:var(--ic-status-success-light);--ic-status-warning-background:var(--ic-status-warning-light);--ic-status-error-background:var(--ic-status-error-light);--ic-status-info-background:var(--ic-status-info-light);--ic-architectural-20:#f9fafa;--ic-architectural-40:#f4f4f5;--ic-architectural-60:#eeeff0;--ic-architectural-80:#e8e9eb;--ic-architectural-100:#e1e3e5;--ic-architectural-200:#c4c8cd;--ic-architectural-300:#a7acb3;--ic-architectural-400:#8a919b;--ic-architectural-500:#6c7580;--ic-architectural-600:#575e68;--ic-architectural-700:#41464d;--ic-architectural-800:#2c2f34;--ic-architectural-900:#0b0c0c;--ic-architectural-white:#fff;--ic-architectural-black:#000;--ic-color-primary-text:#0b0c0c;--ic-color-white-text:#fff;--ic-color-secondary-text:#41464d;--ic-color-tertiary-text:#6c7580;--ic-action-default:#1759bc;--ic-action-default-hover:#0b399c;--ic-action-default-active:#07277e;--ic-action-default-active-alpha:rgba(23 89 188 / 50%);--ic-action-default-bg-hover:rgb(23 89 188 / 10%);--ic-action-default-bg-active:rgb(23 89 188 / 20%);--ic-action-default-bg-hover-no-alpha:#e7eef8;--ic-action-default-bg-active-no-alpha:#d0def2;--ic-action-destructive:#d4351c;--ic-action-destructive-hover:#ad1e0e;--ic-action-destructive-active:#8b1209;--ic-action-light:#fff;--ic-action-light-hover:#c4c8cd;--ic-action-light-active:#a7acb3;--ic-action-light-bg-hover:rgb(255 255 255 / 10%);--ic-action-light-bg-active:rgb(255 255 255 / 20%);--ic-action-dark:#0b0c0c;--ic-action-dark-hover:#2c2f34;--ic-action-dark-active:#41464d;--ic-action-dark-bg-hover:rgb(65 70 77 / 10%);--ic-action-dark-bg-active:rgb(65 70 77 / 20%);--ic-classification-official:#2b71c7;--ic-classification-official-foreground:#fff;--ic-classification-secret:#f39c2c;--ic-classification-secret-foreground:#000;--ic-classification-top-secret:#a00;--ic-classification-top-secret-foreground:#fff;--ic-classification-not-set:#616161;--ic-classification-not-set-foreground:#fff;--ic-theme-blue-primary-r:27;--ic-theme-blue-primary-g:60;--ic-theme-blue-primary-b:121;--ic-theme-blue-primary-a:1;--ic-theme-lighten-20:rgb(255 255 255 / 20%);--ic-theme-lighten-40:rgb(255 255 255 / 40%);--ic-theme-primary-r:var(--ic-theme-blue-primary-r);--ic-theme-primary-g:var(--ic-theme-blue-primary-g);--ic-theme-primary-b:var(--ic-theme-blue-primary-b);--ic-theme-primary-a:var(--ic-theme-blue-primary-a);--ic-theme-primary:rgb(
|
65
|
+
);--ic-status-error-dark:#610a05;--ic-status-info-light:#e1f0fc;--ic-status-info-contrast:#488fe3;--ic-status-info:#124db3;--ic-status-info-dark:#041144;--ic-status-anomalous-light:#efdbff;--ic-status-anomalous-contrast:#b764fb;--ic-status-anomalous:#7c25c2;--ic-status-anomalous-dark:#350f54;--ic-status-unknown-light:var(--ic-architectural-40);--ic-status-unknown-contrast:var(--ic-architectural-300);--ic-status-unknown:var(--ic-architectural-500);--ic-status-unknown-dark:var(--ic-architectural-800);--ic-status-warning-mid:var(--ic-status-warning);--ic-status-warning-mid-hover:var(--ic-status-warning-hover);--ic-status-warning-mid-pressed:var(--ic-status-warning-pressed);--ic-status-success-background:var(--ic-status-success-light);--ic-status-warning-background:var(--ic-status-warning-light);--ic-status-error-background:var(--ic-status-error-light);--ic-status-info-background:var(--ic-status-info-light);--ic-architectural-20:#f9fafa;--ic-architectural-40:#f4f4f5;--ic-architectural-60:#eeeff0;--ic-architectural-80:#e8e9eb;--ic-architectural-100:#e1e3e5;--ic-architectural-200:#c4c8cd;--ic-architectural-300:#a7acb3;--ic-architectural-400:#8a919b;--ic-architectural-500:#6c7580;--ic-architectural-600:#575e68;--ic-architectural-700:#41464d;--ic-architectural-800:#2c2f34;--ic-architectural-900:#0b0c0c;--ic-architectural-white:#fff;--ic-architectural-black:#000;--ic-color-primary-text:#0b0c0c;--ic-color-white-text:#fff;--ic-color-secondary-text:#41464d;--ic-color-tertiary-text:#6c7580;--ic-action-default:#1759bc;--ic-action-default-hover:#0b399c;--ic-action-default-active:#07277e;--ic-action-default-active-alpha:rgba(23 89 188 / 50%);--ic-action-default-bg-hover:rgb(23 89 188 / 10%);--ic-action-default-bg-active:rgb(23 89 188 / 20%);--ic-action-default-bg-hover-no-alpha:#e7eef8;--ic-action-default-bg-active-no-alpha:#d0def2;--ic-action-destructive:#d4351c;--ic-action-destructive-hover:#ad1e0e;--ic-action-destructive-active:#8b1209;--ic-action-light:#fff;--ic-action-light-hover:#c4c8cd;--ic-action-light-active:#a7acb3;--ic-action-light-bg-hover:rgb(255 255 255 / 10%);--ic-action-light-bg-active:rgb(255 255 255 / 20%);--ic-action-dark:#0b0c0c;--ic-action-dark-hover:#2c2f34;--ic-action-dark-active:#41464d;--ic-action-dark-bg-hover:rgb(65 70 77 / 10%);--ic-action-dark-bg-active:rgb(65 70 77 / 20%);--ic-action-dark-bg-hover-no-alpha:#ececed;--ic-action-dark-bg-active-no-alpha:#d9dadb;--ic-classification-official:#2b71c7;--ic-classification-official-foreground:#fff;--ic-classification-secret:#f39c2c;--ic-classification-secret-foreground:#000;--ic-classification-top-secret:#a00;--ic-classification-top-secret-foreground:#fff;--ic-classification-not-set:#616161;--ic-classification-not-set-foreground:#fff;--ic-theme-blue-primary-r:27;--ic-theme-blue-primary-g:60;--ic-theme-blue-primary-b:121;--ic-theme-blue-primary-a:1;--ic-theme-lighten-20:rgb(255 255 255 / 20%);--ic-theme-lighten-40:rgb(255 255 255 / 40%);--ic-theme-primary-r:var(--ic-theme-blue-primary-r);--ic-theme-primary-g:var(--ic-theme-blue-primary-g);--ic-theme-primary-b:var(--ic-theme-blue-primary-b);--ic-theme-primary-a:var(--ic-theme-blue-primary-a);--ic-theme-primary:rgb(
|
63
66
|
var(--ic-theme-primary-r) var(--ic-theme-primary-g)
|
64
67
|
var(--ic-theme-primary-b) / var(--ic-theme-primary-a)
|
65
68
|
);--ic-theme-secondary:rgb(
|
@@ -101,4 +104,4 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-primary-text)}a
|
|
101
104
|
min(255, calc(var(--ic-theme-calc) + 65))
|
102
105
|
min(255, calc(var(--ic-theme-calc) + 70))
|
103
106
|
min(255, calc(var(--ic-theme-calc) + 77)) / 20%
|
104
|
-
);--ic-hyperlink:#1759bc;--ic-hyperlink-visited:#330072;--ic-hyperlink-hover:#7c2855;--ic-hyperlink-contrast:#5c98f2;--ic-hyperlink-contrast-visited:#bc75ff;--ic-hyperlink-contrast-hover:#db76ac;--ic-focus-blue:#0044d7;--ic-focus-glow:#80a1e8;--ic-hc-focus-outline:3px solid transparent;--ic-
|
107
|
+
);--ic-hyperlink:#1759bc;--ic-hyperlink-visited:#330072;--ic-hyperlink-hover:#7c2855;--ic-hyperlink-contrast:#5c98f2;--ic-hyperlink-contrast-visited:#bc75ff;--ic-hyperlink-contrast-hover:#db76ac;--ic-focus-blue:#0044d7;--ic-focus-glow:#80a1e8;--ic-hc-focus-outline:3px solid transparent;--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-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-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/dist/index.d.ts
CHANGED
@@ -1,2 +1 @@
|
|
1
|
-
export * from "./components";
|
2
|
-
export { SlottedSVG } from "./react-component-lib/slottedSVG";
|
1
|
+
export * from "./components";
|
package/dist/index.js
CHANGED
@@ -1,2 +1 @@
|
|
1
|
-
export * from "./components";
|
2
|
-
export { SlottedSVG } from "./react-component-lib/slottedSVG";
|
1
|
+
export * from "./components";
|
@@ -1,10 +1,10 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
export interface HTMLStencilElement extends HTMLElement {
|
3
|
-
componentOnReady(): Promise<this>;
|
4
|
-
}
|
5
|
-
interface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {
|
6
|
-
forwardedRef: React.RefObject<ElementType>;
|
7
|
-
ref?: React.Ref<any>;
|
8
|
-
}
|
9
|
-
export declare const createReactComponent: <PropType, ElementType extends HTMLStencilElement, ContextStateType = {}, ExpandedPropsTypes = {}>(tagName: string, ReactComponentContext?: React.Context<ContextStateType>, manipulatePropsFunction?: (originalProps: StencilReactInternalProps<ElementType>, propsToPass: any) => ExpandedPropsTypes, defineCustomElement?: () => void) => React.ForwardRefExoticComponent<React.PropsWithoutRef<PropType & Omit<React.HTMLAttributes<ElementType>, "style"> & import("./interfaces").StyleReactProps> & React.RefAttributes<ElementType>>;
|
10
|
-
export {};
|
1
|
+
import React from 'react';
|
2
|
+
export interface HTMLStencilElement extends HTMLElement {
|
3
|
+
componentOnReady(): Promise<this>;
|
4
|
+
}
|
5
|
+
interface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {
|
6
|
+
forwardedRef: React.RefObject<ElementType>;
|
7
|
+
ref?: React.Ref<any>;
|
8
|
+
}
|
9
|
+
export declare const createReactComponent: <PropType, ElementType extends HTMLStencilElement, ContextStateType = {}, ExpandedPropsTypes = {}>(tagName: string, ReactComponentContext?: React.Context<ContextStateType>, manipulatePropsFunction?: (originalProps: StencilReactInternalProps<ElementType>, propsToPass: any) => ExpandedPropsTypes, defineCustomElement?: () => void) => React.ForwardRefExoticComponent<React.PropsWithoutRef<PropType & Omit<React.HTMLAttributes<ElementType>, "style"> & import("./interfaces").StyleReactProps> & React.RefAttributes<ElementType>>;
|
10
|
+
export {};
|
@@ -1,74 +1,74 @@
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
2
|
-
var t = {};
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
4
|
-
t[p] = s[p];
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
8
|
-
t[p[i]] = s[p[i]];
|
9
|
-
}
|
10
|
-
return t;
|
11
|
-
};
|
12
|
-
import React, { createElement } from 'react';
|
13
|
-
import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils';
|
14
|
-
export const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
|
15
|
-
if (defineCustomElement !== undefined) {
|
16
|
-
defineCustomElement();
|
17
|
-
}
|
18
|
-
const displayName = dashToPascalCase(tagName);
|
19
|
-
const ReactComponent = class extends React.Component {
|
20
|
-
constructor(props) {
|
21
|
-
super(props);
|
22
|
-
this.setComponentElRef = (element) => {
|
23
|
-
this.componentEl = element;
|
24
|
-
};
|
25
|
-
}
|
26
|
-
componentDidMount() {
|
27
|
-
this.componentDidUpdate(this.props);
|
28
|
-
}
|
29
|
-
componentDidUpdate(prevProps) {
|
30
|
-
attachProps(this.componentEl, this.props, prevProps);
|
31
|
-
}
|
32
|
-
render() {
|
33
|
-
const _a = this.props, { children, forwardedRef, style, className, ref } = _a, cProps = __rest(_a, ["children", "forwardedRef", "style", "className", "ref"]);
|
34
|
-
let propsToPass = Object.keys(cProps).reduce((acc, name) => {
|
35
|
-
const value = cProps[name];
|
36
|
-
if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
|
37
|
-
const eventName = name.substring(2).toLowerCase();
|
38
|
-
if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
|
39
|
-
acc[name] = value;
|
40
|
-
}
|
41
|
-
}
|
42
|
-
else {
|
43
|
-
// we should only render strings, booleans, and numbers as attrs in html.
|
44
|
-
// objects, functions, arrays etc get synced via properties on mount.
|
45
|
-
const type = typeof value;
|
46
|
-
if (type === 'string' || type === 'boolean' || type === 'number') {
|
47
|
-
acc[camelToDashCase(name)] = value;
|
48
|
-
}
|
49
|
-
}
|
50
|
-
return acc;
|
51
|
-
}, {});
|
52
|
-
if (manipulatePropsFunction) {
|
53
|
-
propsToPass = manipulatePropsFunction(this.props, propsToPass);
|
54
|
-
}
|
55
|
-
const newProps = Object.assign(Object.assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style });
|
56
|
-
/**
|
57
|
-
* We use createElement here instead of
|
58
|
-
* React.createElement to work around a
|
59
|
-
* bug in Vite (https://github.com/vitejs/vite/issues/6104).
|
60
|
-
* React.createElement causes all elements to be rendered
|
61
|
-
* as <tagname> instead of the actual Web Component.
|
62
|
-
*/
|
63
|
-
return createElement(tagName, newProps, children);
|
64
|
-
}
|
65
|
-
static get displayName() {
|
66
|
-
return displayName;
|
67
|
-
}
|
68
|
-
};
|
69
|
-
// If context was passed to createReactComponent then conditionally add it to the Component Class
|
70
|
-
if (ReactComponentContext) {
|
71
|
-
ReactComponent.contextType = ReactComponentContext;
|
72
|
-
}
|
73
|
-
return createForwardRef(ReactComponent, displayName);
|
74
|
-
};
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
2
|
+
var t = {};
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
4
|
+
t[p] = s[p];
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
8
|
+
t[p[i]] = s[p[i]];
|
9
|
+
}
|
10
|
+
return t;
|
11
|
+
};
|
12
|
+
import React, { createElement } from 'react';
|
13
|
+
import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils';
|
14
|
+
export const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
|
15
|
+
if (defineCustomElement !== undefined) {
|
16
|
+
defineCustomElement();
|
17
|
+
}
|
18
|
+
const displayName = dashToPascalCase(tagName);
|
19
|
+
const ReactComponent = class extends React.Component {
|
20
|
+
constructor(props) {
|
21
|
+
super(props);
|
22
|
+
this.setComponentElRef = (element) => {
|
23
|
+
this.componentEl = element;
|
24
|
+
};
|
25
|
+
}
|
26
|
+
componentDidMount() {
|
27
|
+
this.componentDidUpdate(this.props);
|
28
|
+
}
|
29
|
+
componentDidUpdate(prevProps) {
|
30
|
+
attachProps(this.componentEl, this.props, prevProps);
|
31
|
+
}
|
32
|
+
render() {
|
33
|
+
const _a = this.props, { children, forwardedRef, style, className, ref } = _a, cProps = __rest(_a, ["children", "forwardedRef", "style", "className", "ref"]);
|
34
|
+
let propsToPass = Object.keys(cProps).reduce((acc, name) => {
|
35
|
+
const value = cProps[name];
|
36
|
+
if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
|
37
|
+
const eventName = name.substring(2).toLowerCase();
|
38
|
+
if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
|
39
|
+
acc[name] = value;
|
40
|
+
}
|
41
|
+
}
|
42
|
+
else {
|
43
|
+
// we should only render strings, booleans, and numbers as attrs in html.
|
44
|
+
// objects, functions, arrays etc get synced via properties on mount.
|
45
|
+
const type = typeof value;
|
46
|
+
if (type === 'string' || type === 'boolean' || type === 'number') {
|
47
|
+
acc[camelToDashCase(name)] = value;
|
48
|
+
}
|
49
|
+
}
|
50
|
+
return acc;
|
51
|
+
}, {});
|
52
|
+
if (manipulatePropsFunction) {
|
53
|
+
propsToPass = manipulatePropsFunction(this.props, propsToPass);
|
54
|
+
}
|
55
|
+
const newProps = Object.assign(Object.assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style });
|
56
|
+
/**
|
57
|
+
* We use createElement here instead of
|
58
|
+
* React.createElement to work around a
|
59
|
+
* bug in Vite (https://github.com/vitejs/vite/issues/6104).
|
60
|
+
* React.createElement causes all elements to be rendered
|
61
|
+
* as <tagname> instead of the actual Web Component.
|
62
|
+
*/
|
63
|
+
return createElement(tagName, newProps, children);
|
64
|
+
}
|
65
|
+
static get displayName() {
|
66
|
+
return displayName;
|
67
|
+
}
|
68
|
+
};
|
69
|
+
// If context was passed to createReactComponent then conditionally add it to the Component Class
|
70
|
+
if (ReactComponentContext) {
|
71
|
+
ReactComponent.contextType = ReactComponentContext;
|
72
|
+
}
|
73
|
+
return createForwardRef(ReactComponent, displayName);
|
74
|
+
};
|
@@ -1,21 +1,21 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { OverlayEventDetail } from './interfaces';
|
3
|
-
import { StencilReactForwardedRef } from './utils';
|
4
|
-
interface OverlayElement extends HTMLElement {
|
5
|
-
present: () => Promise<void>;
|
6
|
-
dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;
|
7
|
-
}
|
8
|
-
export interface ReactOverlayProps {
|
9
|
-
children?: React.ReactNode;
|
10
|
-
isOpen: boolean;
|
11
|
-
onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
|
12
|
-
onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
|
13
|
-
onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
|
14
|
-
onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
|
15
|
-
}
|
16
|
-
export declare const createOverlayComponent: <OverlayComponent extends object, OverlayType extends OverlayElement>(tagName: string, controller: {
|
17
|
-
create: (options: any) => Promise<OverlayType>;
|
18
|
-
}, customElement?: any) => React.ForwardRefExoticComponent<React.PropsWithoutRef<OverlayComponent & ReactOverlayProps & {
|
19
|
-
forwardedRef?: StencilReactForwardedRef<OverlayType>;
|
20
|
-
}> & React.RefAttributes<OverlayType>>;
|
21
|
-
export {};
|
1
|
+
import React from 'react';
|
2
|
+
import { OverlayEventDetail } from './interfaces';
|
3
|
+
import { StencilReactForwardedRef } from './utils';
|
4
|
+
interface OverlayElement extends HTMLElement {
|
5
|
+
present: () => Promise<void>;
|
6
|
+
dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;
|
7
|
+
}
|
8
|
+
export interface ReactOverlayProps {
|
9
|
+
children?: React.ReactNode;
|
10
|
+
isOpen: boolean;
|
11
|
+
onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
|
12
|
+
onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
|
13
|
+
onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
|
14
|
+
onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
|
15
|
+
}
|
16
|
+
export declare const createOverlayComponent: <OverlayComponent extends object, OverlayType extends OverlayElement>(tagName: string, controller: {
|
17
|
+
create: (options: any) => Promise<OverlayType>;
|
18
|
+
}, customElement?: any) => React.ForwardRefExoticComponent<React.PropsWithoutRef<OverlayComponent & ReactOverlayProps & {
|
19
|
+
forwardedRef?: StencilReactForwardedRef<OverlayType>;
|
20
|
+
}> & React.RefAttributes<OverlayType>>;
|
21
|
+
export {};
|