Skip to content

Commit 9b8c02f

Browse files
garronejgarronej
committed
2 parents 7651e36 + 3008260 commit 9b8c02f

File tree

9 files changed

+117
-62
lines changed

9 files changed

+117
-62
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@codegouvfr/react-dsfr",
3-
"version": "0.58.2",
3+
"version": "0.58.3",
44
"description": "French State Design System React integration library",
55
"repository": {
66
"type": "git",

‎src/AgentConnectButton.tsx‎

Lines changed: 23 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,45 @@
1-
"use client";
2-
import React, { forwardRef, memo, useState, type CSSProperties } from "react";
1+
import React, { forwardRef, memo, type CSSProperties } from "react";
32
import { symToStr } from "tsafe/symToStr";
43
import { createComponentI18nApi } from "./i18n";
54
import { fr } from "./fr";
65
import { assert, type Equals } from "tsafe/assert";
7-
import agentconnectBtnPrincipalSvgUrl from "./assets/agentconnect-btn-principal.svg";
8-
import agentconnectBtnPrincipalHoverSvgUrl from "./assets/agentconnect-btn-principal-hover.svg";
9-
import agentconnectBtnAlternatifSvgUrl from "./assets/agentconnect-btn-alternatif.svg";
10-
import agentconnectBtnAlternatifHoverSvgUrl from "./assets/agentconnect-btn-alternatif-hover.svg";
116
import "./assets/agentconnect.css";
12-
import { useIsDark } from "./useIsDark";
13-
import { getAssetUrl } from "./tools/getAssetUrl";
147
import { cx } from "./tools/cx";
158

16-
export type AgentConnectButtonProps = {
17-
className?: string;
18-
url: string;
19-
style?: CSSProperties;
20-
};
9+
export type AgentConnectButtonProps = AgentConnectButtonProps.Common &
10+
(AgentConnectButtonProps.WithUrl | AgentConnectButtonProps.WithOnClick);
11+
12+
export namespace AgentConnectButtonProps {
13+
export type Common = {
14+
className?: string;
15+
style?: CSSProperties;
16+
};
17+
export type WithUrl = {
18+
url: string;
19+
onClick?: never;
20+
};
21+
export type WithOnClick = {
22+
url?: never;
23+
onClick: React.MouseEventHandler<HTMLButtonElement>;
24+
};
25+
}
2126

2227
/** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-franceconnectbutton> */
2328
export const AgentConnectButton = memo(
2429
forwardRef<HTMLDivElement, AgentConnectButtonProps>((props, ref) => {
25-
const { className, url, style, ...rest } = props;
30+
const { className, url: href, style, onClick, ...rest } = props;
2631

2732
assert<Equals<keyof typeof rest, never>>();
2833

2934
const { t } = useTranslation();
3035

31-
const [isMouseHover, setIsMouseHover] = useState(false);
32-
33-
const { isDark } = useIsDark();
36+
const Inner = onClick !== undefined ? "button" : "a";
37+
const innerProps = (onClick !== undefined ? { onClick } : { href }) as any;
3438

3539
return (
3640
<div className={className} style={style} ref={ref}>
37-
<a
38-
className="agentconnect-button__link"
39-
href={url}
40-
onMouseEnter={() => setIsMouseHover(true)}
41-
onMouseLeave={() => setIsMouseHover(false)}
42-
>
43-
<img
44-
src={getAssetUrl(
45-
isDark
46-
? isMouseHover
47-
? agentconnectBtnAlternatifHoverSvgUrl
48-
: agentconnectBtnAlternatifSvgUrl
49-
: isMouseHover
50-
? agentconnectBtnPrincipalHoverSvgUrl
51-
: agentconnectBtnPrincipalSvgUrl
52-
)}
53-
/>
54-
</a>
41+
<span className="agentconnect-button__preload-hover" />
42+
<Inner className="agentconnect-button__link" {...innerProps} />
5543
<p>
5644
<a
5745
className={cx(

‎src/Button.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ export const Button = memo(
123123
prop_className
124124
);
125125

126-
return linkProps ? (
126+
return linkProps !== undefined ? (
127127
<Link
128128
{...linkProps}
129129
title={title ?? linkProps.title}

‎src/FranceConnectButton.tsx‎

Lines changed: 26 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,38 +5,53 @@ import { fr } from "./fr";
55
import { assert, type Equals } from "tsafe/assert";
66
import { cx } from "./tools/cx";
77

8-
export type FranceConnectButtonProps = {
9-
className?: string;
10-
url: string;
11-
/** Default: false */
12-
plus?: boolean;
13-
classes?: Partial<Record<"root" | "login" | "brand", string>>;
14-
style?: CSSProperties;
15-
};
8+
export type FranceConnectButtonProps = FranceConnectButtonProps.Common &
9+
(FranceConnectButtonProps.WithUrl | FranceConnectButtonProps.WithOnClick);
10+
11+
export namespace FranceConnectButtonProps {
12+
export type Common = {
13+
className?: string;
14+
/** Default: false */
15+
plus?: boolean;
16+
classes?: Partial<Record<"root" | "login" | "brand", string>>;
17+
style?: CSSProperties;
18+
};
19+
export type WithUrl = {
20+
url: string;
21+
onClick?: never;
22+
};
23+
export type WithOnClick = {
24+
url?: never;
25+
onClick: React.MouseEventHandler<HTMLButtonElement>;
26+
};
27+
}
1628

1729
/** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-franceconnectbutton> */
1830
export const FranceConnectButton = memo(
1931
forwardRef<HTMLDivElement, FranceConnectButtonProps>((props, ref) => {
20-
const { classes = {}, className, url, plus = false, style, ...rest } = props;
32+
const { classes = {}, className, url: href, plus = false, style, onClick, ...rest } = props;
2133

2234
assert<Equals<keyof typeof rest, never>>();
2335

2436
const { t } = useTranslation();
2537

38+
const Inner = onClick !== undefined ? "button" : "a";
39+
const innerProps = (onClick !== undefined ? { onClick } : { href }) as any;
40+
2641
return (
2742
<div
2843
className={cx(fr.cx("fr-connect-group"), classes.root, className)}
2944
style={style}
3045
ref={ref}
3146
>
32-
<a className={fr.cx("fr-btn", "fr-connect")} href={url}>
47+
<Inner className={fr.cx("fr-btn", "fr-connect")} {...innerProps}>
3348
<span className={cx(fr.cx("fr-connect__login"), classes.login)}>
3449
S’identifier avec
3550
</span>
3651
<span className={cx(fr.cx("fr-connect__brand"), classes.brand)}>
3752
FranceConnect{plus ? "+" : ""}
3853
</span>
39-
</a>
54+
</Inner>
4055
<p>
4156
<a
4257
href={

‎src/MonCompteProButton.tsx‎

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,36 +6,54 @@ import { assert, type Equals } from "tsafe/assert";
66
import { cx } from "./tools/cx";
77
import "./assets/moncomptepro.css";
88

9-
export type FranceConnectButtonProps = {
10-
className?: string;
11-
url: string;
12-
classes?: Partial<Record<"root" | "login" | "brand", string>>;
13-
style?: CSSProperties;
14-
};
9+
export type FranceConnectButtonProps = FranceConnectButtonProps.Common &
10+
(FranceConnectButtonProps.WithUrl | FranceConnectButtonProps.WithOnClick);
11+
12+
export namespace FranceConnectButtonProps {
13+
export type Common = {
14+
className?: string;
15+
classes?: Partial<Record<"root" | "login" | "brand", string>>;
16+
style?: CSSProperties;
17+
};
18+
export type WithUrl = {
19+
url: string;
20+
onClick?: never;
21+
};
22+
export type WithOnClick = {
23+
url?: never;
24+
onClick: React.MouseEventHandler<HTMLButtonElement>;
25+
};
26+
}
1527

1628
/** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-franceconnectbutton> */
1729
export const MonCompteProButton = memo(
1830
forwardRef<HTMLDivElement, FranceConnectButtonProps>((props, ref) => {
19-
const { classes = {}, className, url, style, ...rest } = props;
31+
const { classes = {}, className, url: href, style, onClick, ...rest } = props;
2032

2133
assert<Equals<keyof typeof rest, never>>();
2234

2335
const { t } = useTranslation();
2436

37+
const Inner = onClick !== undefined ? "button" : "a";
38+
const innerProps = (onClick !== undefined ? { onClick } : { href }) as any;
39+
2540
return (
2641
<div
2742
className={cx(fr.cx("fr-connect-group"), classes.root, className)}
2843
style={style}
2944
ref={ref}
3045
>
31-
<a className={cx(fr.cx("fr-btn", "fr-connect"), "moncomptepro-button")} href={url}>
46+
<Inner
47+
className={cx(fr.cx("fr-btn", "fr-connect"), "moncomptepro-button")}
48+
{...innerProps}
49+
>
3250
<span className={cx(fr.cx("fr-connect__login"), classes.login)}>
3351
S’identifier avec
3452
</span>
3553
<span className={cx(fr.cx("fr-connect__brand"), classes.brand)}>
3654
MonComptePro
3755
</span>
38-
</a>
56+
</Inner>
3957
<p>
4058
<a
4159
href="https://moncomptepro.beta.gouv.fr/"

‎src/assets/agentconnect.css‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,30 @@
11

22
.agentconnect-button__link {
3-
display: block;
4-
background-image: unset;
3+
width: 206px;
4+
height: 60px;
5+
display: inline-block;
6+
background-image: url("./agentconnect-btn-principal.svg");
57
--active-tint: unset;
8+
background-color: transparent;
9+
background-position: 0 0;
10+
background-repeat: no-repeat;
11+
background-size: contain;
12+
}
13+
14+
.agentconnect-button__preload-hover {
15+
display: none;
16+
}
17+
.agentconnect-button__link:hover, .agentconnect-button__preload-hover {
18+
background-image: url("./agentconnect-btn-principal-hover.svg");
19+
}
20+
21+
:root[data-fr-theme=dark] .agentconnect-button__link {
22+
background-image: url("./agentconnect-btn-alternatif.svg");
23+
}
24+
25+
:root[data-fr-theme=dark] .agentconnect-button__link:hover,
26+
:root[data-fr-theme=dark] .agentconnect-button__preload-hover {
27+
background-image: url("./agentconnect-btn-alternatif-hover.svg");
628
}
729

830
.agentconnect-button__hint {

‎stories/AgentConnectButton.stories.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { AgentConnectButton } from "../dist/AgentConnectButton";
22
import { sectionName } from "./sectionName";
3-
import { getStoryFactory } from "./getStory";
3+
import { getStoryFactory, logCallbacks } from "./getStory";
44

55
const { meta, getStory } = getStoryFactory({
66
sectionName,
@@ -22,3 +22,7 @@ export const Centered = getStory({
2222
},
2323
"url": "https://example.com"
2424
});
25+
26+
export const WithOnClick = getStory({
27+
...logCallbacks(["onClick"])
28+
});

‎stories/FranceConnectButton.stories.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { FranceConnectButton } from "../dist/FranceConnectButton";
22
import { sectionName } from "./sectionName";
3-
import { getStoryFactory } from "./getStory";
3+
import { getStoryFactory, logCallbacks } from "./getStory";
44

55
const { meta, getStory } = getStoryFactory({
66
sectionName,
@@ -27,3 +27,7 @@ export const Centered = getStory({
2727
},
2828
"url": "https://example.com"
2929
});
30+
31+
export const WithOnClick = getStory({
32+
...logCallbacks(["onClick"])
33+
});

‎stories/MonComptePro.stories.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { MonCompteProButton } from "../dist/MonCompteProButton";
22
import { sectionName } from "./sectionName";
3-
import { getStoryFactory } from "./getStory";
3+
import { getStoryFactory, logCallbacks } from "./getStory";
44

55
const { meta, getStory } = getStoryFactory({
66
sectionName,
@@ -22,3 +22,7 @@ export const Centered = getStory({
2222
},
2323
"url": "https://example.com"
2424
});
25+
26+
export const WithOnClick = getStory({
27+
...logCallbacks(["onClick"])
28+
});

0 commit comments

Comments
 (0)