@sphereon/ui-components.ssi-react 0.2.1-unstable.45 → 0.2.1-unstable.46
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.
- package/dist/components/views/InformationRequestView/index.d.ts +14 -0
- package/dist/components/views/InformationRequestView/index.js +14 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/styles/components/components/InformationRequestView/index.d.ts +16 -0
- package/dist/styles/components/components/InformationRequestView/index.js +85 -0
- package/dist/styles/components/components/index.d.ts +1 -0
- package/dist/styles/components/components/index.js +1 -0
- package/package.json +3 -3
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { CredentialStatus, ImageAttributes } from '@sphereon/ui-components.core';
|
|
3
|
+
type Props = {
|
|
4
|
+
relyingPartyName: string;
|
|
5
|
+
purpose: string;
|
|
6
|
+
credentialStatus: CredentialStatus;
|
|
7
|
+
credentialTitle?: string;
|
|
8
|
+
credentialSubtitle?: string;
|
|
9
|
+
uri?: string;
|
|
10
|
+
logo?: ImageAttributes;
|
|
11
|
+
textColor?: string;
|
|
12
|
+
};
|
|
13
|
+
declare const InformationRequestView: FC<Props>;
|
|
14
|
+
export default InformationRequestView;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Localization } from '@sphereon/ui-components.core';
|
|
3
|
+
import { InformationRequestViewCardSubtitle as CardSubtitle, InformationRequestViewCardTextContainer as CardTextContainer, InformationRequestViewCardTitle as CardTitle, InformationRequestViewContainerStyled as Container, InformationRequestViewContentContainerStyled as ContentContainer, InformationRequestViewFormContainerStyled as FormContainer, InformationRequestViewFormContainerStyled as PurposeContainer, InformationRequestViewHeaderContainerStyled as HeaderContainer, InformationRequestViewLogoContainerStyled as LogoContainer, InformationRequestViewRPCardContainerStyled as RPCardContainer, InformationRequestViewTitleStyled as HeaderTitle, InformationRequestViewParagraphStyled as PurposeTitle, InformationRequestViewParagraphStyled as FormTitle, InformationRequestViewDescriptionStyled as Description, } from '../../../styles/components';
|
|
4
|
+
import SSIStatusLabel from '../../labels/SSIStatusLabel';
|
|
5
|
+
import SSILogo from '../../assets/logos/SSILogo';
|
|
6
|
+
const InformationRequestView = (args) => {
|
|
7
|
+
const { relyingPartyName, purpose, uri, credentialStatus, logo, textColor, } = args;
|
|
8
|
+
return (_jsx(Container, { children: _jsxs(ContentContainer, { children: [_jsxs(HeaderContainer, { children: [_jsx(HeaderTitle, { children: Localization.translate('information_request_title') }), _jsx(Description, { children: Localization.translate('information_request_header_description', {
|
|
9
|
+
partyName: relyingPartyName,
|
|
10
|
+
}) })] }), _jsxs(PurposeContainer, { children: [_jsx(PurposeTitle, { children: Localization.translate('information_request_purpose_label') }), _jsx(Description, { children: purpose })] }), _jsxs(FormContainer, { children: [_jsx(FormTitle, { children: Localization.translate('information_request_form_label') }), _jsx(Description, { children: Localization.translate('information_request_interacting_with', {
|
|
11
|
+
partyName: relyingPartyName,
|
|
12
|
+
}) }), _jsxs(RPCardContainer, { children: [_jsx(LogoContainer, { children: _jsx(SSILogo, { logo: logo, color: textColor ?? '#000' }) }), _jsxs(CardTextContainer, { children: [_jsx(CardTitle, { children: relyingPartyName }), _jsx(CardSubtitle, { children: "Verifier" }), uri && (_jsx(CardSubtitle, { children: uri }))] }), _jsx(SSIStatusLabel, { status: credentialStatus })] })] })] }) }));
|
|
13
|
+
};
|
|
14
|
+
export default InformationRequestView;
|
package/dist/index.d.ts
CHANGED
|
@@ -45,9 +45,10 @@ import JSONDataView from './components/views/JSONDataView';
|
|
|
45
45
|
import TextInputField from './components/fields/TextInputField';
|
|
46
46
|
import WarningImage from './components/assets/images/WarningImage';
|
|
47
47
|
import FormView from './components/views/FormView';
|
|
48
|
+
import InformationRequestView from './components/views/InformationRequestView';
|
|
48
49
|
import { Row } from '@tanstack/react-table';
|
|
49
50
|
export * from './styles/fonts';
|
|
50
51
|
export * from './types';
|
|
51
52
|
export * from './helpers';
|
|
52
53
|
export * from './utils';
|
|
53
|
-
export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, Row, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, };
|
|
54
|
+
export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, Row, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, };
|
package/dist/index.js
CHANGED
|
@@ -45,8 +45,9 @@ import JSONDataView from './components/views/JSONDataView';
|
|
|
45
45
|
import TextInputField from './components/fields/TextInputField';
|
|
46
46
|
import WarningImage from './components/assets/images/WarningImage';
|
|
47
47
|
import FormView from './components/views/FormView';
|
|
48
|
+
import InformationRequestView from './components/views/InformationRequestView';
|
|
48
49
|
export * from './styles/fonts';
|
|
49
50
|
export * from './types';
|
|
50
51
|
export * from './helpers';
|
|
51
52
|
export * from './utils';
|
|
52
|
-
export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, };
|
|
53
|
+
export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export declare const InformationRequestViewContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
|
+
export declare const InformationRequestViewContentContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
|
+
export declare const InformationRequestViewHeaderContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
|
+
export declare const InformationRequestViewPurposeContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
5
|
+
export declare const InformationRequestViewTitleStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
|
+
export declare const InformationRequestViewParagraphStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
7
|
+
export declare const InformationRequestViewDescriptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
|
+
export declare const InformationRequestViewSubSectionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
9
|
+
export declare const InformationRequestViewFormContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
|
+
export declare const InformationRequestViewFormTitleStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
11
|
+
export declare const InformationRequestViewFormDetailsContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
12
|
+
export declare const InformationRequestViewLogoContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
13
|
+
export declare const InformationRequestViewRPCardContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
14
|
+
export declare const InformationRequestViewCardTextContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
15
|
+
export declare const InformationRequestViewCardTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
16
|
+
export declare const InformationRequestViewCardSubtitle: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
import { SSITextH1Styled, SSITextH2Styled, SSITextH3Styled, SSITextH4Styled } from '../../../fonts';
|
|
3
|
+
export const InformationRequestViewContainerStyled = styled.div `
|
|
4
|
+
display: flex;
|
|
5
|
+
flex-direction: column;
|
|
6
|
+
gap: 24px;
|
|
7
|
+
margin: 0 auto;
|
|
8
|
+
padding: 24px;
|
|
9
|
+
`;
|
|
10
|
+
export const InformationRequestViewContentContainerStyled = styled.div `
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
gap: 24px;
|
|
14
|
+
width: 500px; /* FIXME */
|
|
15
|
+
margin-right: auto;
|
|
16
|
+
`;
|
|
17
|
+
export const InformationRequestViewHeaderContainerStyled = styled.div `
|
|
18
|
+
display: flex;
|
|
19
|
+
flex-direction: column;
|
|
20
|
+
gap: 8px;
|
|
21
|
+
`;
|
|
22
|
+
export const InformationRequestViewPurposeContainerStyled = styled.div `
|
|
23
|
+
display: flex;
|
|
24
|
+
flex-direction: column;
|
|
25
|
+
gap: 16px;
|
|
26
|
+
padding: 16px;
|
|
27
|
+
border: 1px solid #e0e0e0;
|
|
28
|
+
border-radius: 8px;
|
|
29
|
+
background-color: #fbfbfb;`;
|
|
30
|
+
export const InformationRequestViewTitleStyled = styled(SSITextH1Styled) `
|
|
31
|
+
text-align: left;
|
|
32
|
+
font-weight: bold;
|
|
33
|
+
`;
|
|
34
|
+
export const InformationRequestViewParagraphStyled = styled(SSITextH2Styled) `
|
|
35
|
+
text-align: left;
|
|
36
|
+
font-weight: bold;
|
|
37
|
+
`;
|
|
38
|
+
export const InformationRequestViewDescriptionStyled = styled(SSITextH3Styled) `
|
|
39
|
+
text-align: left;
|
|
40
|
+
font-weight: normal;
|
|
41
|
+
`;
|
|
42
|
+
export const InformationRequestViewSubSectionStyled = styled(SSITextH3Styled) `
|
|
43
|
+
text-align: left;
|
|
44
|
+
font-weight: bold;
|
|
45
|
+
`;
|
|
46
|
+
export const InformationRequestViewFormContainerStyled = styled.div `
|
|
47
|
+
display: flex;
|
|
48
|
+
flex-direction: column;
|
|
49
|
+
gap: 16px;
|
|
50
|
+
padding: 16px;
|
|
51
|
+
border: 1px solid #e0e0e0;
|
|
52
|
+
border-radius: 8px;
|
|
53
|
+
background-color: #fbfbfb;
|
|
54
|
+
`;
|
|
55
|
+
export const InformationRequestViewFormTitleStyled = styled(SSITextH2Styled) `
|
|
56
|
+
text-align: left;
|
|
57
|
+
`;
|
|
58
|
+
export const InformationRequestViewFormDetailsContainerStyled = styled.div `
|
|
59
|
+
display: flex;
|
|
60
|
+
flex-direction: column;
|
|
61
|
+
gap: 8px;
|
|
62
|
+
`;
|
|
63
|
+
export const InformationRequestViewLogoContainerStyled = styled.div `
|
|
64
|
+
margin: 0 12px 0 9px;
|
|
65
|
+
`;
|
|
66
|
+
export const InformationRequestViewRPCardContainerStyled = styled.div `
|
|
67
|
+
display: flex;
|
|
68
|
+
flex-direction: row;
|
|
69
|
+
align-items: center;
|
|
70
|
+
gap: 16px;
|
|
71
|
+
padding: 16px;
|
|
72
|
+
border: 1px solid #e0e0e0;
|
|
73
|
+
border-radius: 8px;
|
|
74
|
+
background-color: #ffffff;
|
|
75
|
+
`;
|
|
76
|
+
export const InformationRequestViewCardTextContainer = styled.div `
|
|
77
|
+
flex-grow: 1;
|
|
78
|
+
`;
|
|
79
|
+
export const InformationRequestViewCardTitle = styled(SSITextH4Styled) `
|
|
80
|
+
font-weight: bold;
|
|
81
|
+
`;
|
|
82
|
+
export const InformationRequestViewCardSubtitle = styled(SSITextH4Styled) `
|
|
83
|
+
font-weight: normal;
|
|
84
|
+
color: #555;
|
|
85
|
+
`;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sphereon/ui-components.ssi-react",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.2.1-unstable.
|
|
4
|
+
"version": "0.2.1-unstable.46+26c17d2",
|
|
5
5
|
"description": "SSI UI components for React",
|
|
6
6
|
"repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
|
|
7
7
|
"author": "Sphereon <dev@sphereon.com>",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"@mui/styled-engine-sc": "^5.14.12",
|
|
41
41
|
"@mui/system": "^5.15.12",
|
|
42
42
|
"@mui/x-date-pickers": "^6.19.5",
|
|
43
|
-
"@sphereon/ui-components.core": "0.2.1-unstable.
|
|
43
|
+
"@sphereon/ui-components.core": "0.2.1-unstable.46+26c17d2",
|
|
44
44
|
"@tanstack/react-table": "^8.9.3",
|
|
45
45
|
"react-json-tree": "^0.18.0",
|
|
46
46
|
"react-loader-spinner": "5.4.5",
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"peerDependencies": {
|
|
60
60
|
"react": ">= 18"
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "26c17d23568ff3cc37e627e01ad36ae9b3bde6c2"
|
|
63
63
|
}
|