@connectid-tools/idp-selector-react 6.10.0-alpha.12 → 6.10.0-alpha.13
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/IdpLogoList.css +7 -37
- package/IdpLogoList.js +5 -9
- package/README.md +3 -0
- package/package.json +1 -1
package/IdpLogoList.css
CHANGED
|
@@ -2,52 +2,22 @@
|
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
justify-content: center;
|
|
5
|
-
flex-wrap: wrap;
|
|
6
5
|
gap: 8px;
|
|
7
|
-
margin-top:
|
|
8
|
-
margin-bottom:
|
|
6
|
+
margin-top: 10px;
|
|
7
|
+
margin-bottom: 16px;
|
|
9
8
|
}
|
|
10
|
-
.cid-idp-selector-idp-logo-list-
|
|
11
|
-
font-size:
|
|
12
|
-
color: var(--
|
|
9
|
+
.cid-idp-selector-idp-logo-list-label {
|
|
10
|
+
font-size: 13px;
|
|
11
|
+
color: var(--charcoal);
|
|
13
12
|
}
|
|
14
|
-
.cid-idp-selector-idp-logo-list-
|
|
13
|
+
.cid-idp-selector-idp-logo-list-label--dark {
|
|
15
14
|
color: white;
|
|
16
15
|
}
|
|
17
|
-
.cid-idp-selector-idp-logo-list {
|
|
18
|
-
display: flex;
|
|
19
|
-
flex-wrap: wrap;
|
|
20
|
-
gap: 8px;
|
|
21
|
-
}
|
|
22
16
|
.cid-idp-selector-idp-logo-list-logo {
|
|
23
|
-
|
|
24
|
-
height: 24px;
|
|
25
|
-
border-radius: 2px;
|
|
17
|
+
height: 30px;
|
|
26
18
|
}
|
|
27
19
|
.cid-idp-selector-idp-logo-list-skeleton-wrapper {
|
|
28
20
|
margin-top: 20px;
|
|
29
21
|
display: flex;
|
|
30
22
|
justify-content: center;
|
|
31
23
|
}
|
|
32
|
-
.cid-logo-lockup {
|
|
33
|
-
width: 264px;
|
|
34
|
-
height: 53.18px;
|
|
35
|
-
}
|
|
36
|
-
@media (max-width: 1440px) {
|
|
37
|
-
.cid-logo-lockup {
|
|
38
|
-
width: 234px;
|
|
39
|
-
height: 47px;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
@media (max-width: 430px) {
|
|
43
|
-
.cid-logo-lockup {
|
|
44
|
-
width: 233.78px;
|
|
45
|
-
height: 45px;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
@media (max-width: 375px) {
|
|
49
|
-
.cid-logo-lockup {
|
|
50
|
-
width: 213px;
|
|
51
|
-
height: 41px;
|
|
52
|
-
}
|
|
53
|
-
}
|
package/IdpLogoList.js
CHANGED
|
@@ -1,16 +1,12 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import './IdpLogoList.css';
|
|
3
3
|
import { Skeleton } from './Skeleton';
|
|
4
|
-
const logoLockupUrl = {
|
|
5
|
-
dark: 'https://cdn.connectid.com.au/images/idp-selector/logo-lockup/logo-lockup-dark.svg',
|
|
6
|
-
light: 'https://cdn.connectid.com.au/images/idp-selector/logo-lockup/logo-lockup-light.svg',
|
|
7
|
-
};
|
|
8
4
|
export const IdpLogoList = ({ loading, logoLockupStyle }) => {
|
|
9
5
|
if (loading) {
|
|
10
|
-
return (_jsx("div", { className: "cid-idp-selector-idp-logo-list-skeleton-wrapper", children: _jsx(Skeleton, { height: "
|
|
6
|
+
return (_jsx("div", { className: "cid-idp-selector-idp-logo-list-skeleton-wrapper", children: _jsx(Skeleton, { height: "25px", width: "203px", dataTestId: "idp-logo-list-loading" }) }));
|
|
11
7
|
}
|
|
12
8
|
const isDarkMode = logoLockupStyle === 'dark';
|
|
13
|
-
const imgSrc = isDarkMode ?
|
|
14
|
-
const dataTestId = isDarkMode ? '
|
|
15
|
-
return (
|
|
9
|
+
const imgSrc = `https://cdn.connectid.com.au/images/idp-selector/logo-lockup/logo-lockup-${isDarkMode ? 'dark' : 'light'}2.svg`;
|
|
10
|
+
const dataTestId = `idp-logo-lockup-${isDarkMode ? 'dark' : 'light'}`;
|
|
11
|
+
return (_jsxs("div", { className: "cid-idp-selector-idp-logo-list-wrapper", "data-testid": "idp-logo-list-wrapper", children: [_jsx("span", { className: `cid-idp-selector-idp-logo-list-label ${isDarkMode ? 'cid-idp-selector-idp-logo-list-label--dark' : ''}`, "data-testid": "idp-logo-list-label", children: "Available on" }), _jsx("img", { "data-testid": dataTestId, className: "cid-idp-selector-idp-logo-list-logo", src: imgSrc, alt: "CommBank, NAB, ANZ Plus and Westpac" })] }));
|
|
16
12
|
};
|
package/README.md
CHANGED
|
@@ -259,6 +259,9 @@ The SVG image below the ConnectID button has either option dark or light mode. B
|
|
|
259
259
|
|
|
260
260
|
## 🚀 Release Notes
|
|
261
261
|
|
|
262
|
+
### 6.10.0-alpha.13 (Jul 18, 2025)
|
|
263
|
+
- Remove `Available on` from IDP logo list image.
|
|
264
|
+
|
|
262
265
|
### 6.10.0-alpha.12 (Jul 17, 2025)
|
|
263
266
|
- Add `role="img"` to participant list item.
|
|
264
267
|
|