Merge branch 'connect-buttons'

Author: garronej

.storybook/preview.js

@@ -108,6 +108,8 @@ const { getHardCodedWeight } = (() => {
         "components/Tabs",
         "components/Stepper",
         "components/Button",
+        "components/FranceConnectButton",
+        "components/AgentConnectButton",
     ];
 
     function getHardCodedWeight(kind) {

src/AgentConnectButton.tsx

@@ -14,14 +14,14 @@ import { getAssetUrl } from "./tools/getAssetUrl";
 
 export type AgentConnectButtonProps = {
     className?: string;
-    redirectUrl: string;
+    url: string;
     style?: CSSProperties;
 };
 
 /** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-franceconnectbutton> */
 export const AgentConnectButton = memo(
     forwardRef<HTMLDivElement, AgentConnectButtonProps>((props, ref) => {
-        const { className, redirectUrl, style, ...rest } = props;
+        const { className, url, style, ...rest } = props;
 
         assert<Equals<keyof typeof rest, never>>();
 
@@ -35,7 +35,7 @@ export const AgentConnectButton = memo(
         return (
             <div className={className} style={style} ref={ref}>
                 <a
-                    href={redirectUrl}
+                    href={url}
                     style={{
                         "display": "block",
                         "backgroundImage": "unset"

src/FranceConnectButton.tsx

@@ -7,7 +7,7 @@ import { cx } from "./tools/cx";
 
 export type FranceConnectButtonProps = {
     className?: string;
-    redirectUrl: string;
+    url: string;
     /** Default: false */
     plus?: boolean;
     classes?: Partial<Record<"root" | "login" | "brand", string>>;
@@ -17,7 +17,7 @@ export type FranceConnectButtonProps = {
 /** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-franceconnectbutton> */
 export const FranceConnectButton = memo(
     forwardRef<HTMLDivElement, FranceConnectButtonProps>((props, ref) => {
-        const { classes = {}, className, redirectUrl, plus = false, style, ...rest } = props;
+        const { classes = {}, className, url, plus = false, style, ...rest } = props;
 
         assert<Equals<keyof typeof rest, never>>();
 
@@ -29,7 +29,7 @@ export const FranceConnectButton = memo(
                 style={style}
                 ref={ref}
             >
-                <a className={fr.cx("fr-btn", "fr-connect")} href={redirectUrl}>
+                <a className={fr.cx("fr-btn", "fr-connect")} href={url}>
                     <span className={cx(fr.cx("fr-connect__login"), classes.login)}>
                         S’identifier avec
                     </span>

stories/AgentConnectButton.stories.tsx

@@ -13,12 +13,12 @@ const { meta, getStory } = getStoryFactory({
 export default meta;
 
 export const Default = getStory({
-    "redirectUrl": "https://example.com"
+    "url": "https://example.com"
 });
 
 export const Centered = getStory({
     "style": {
         "textAlign": "center"
     },
-    "redirectUrl": "https://example.com"
+    "url": "https://example.com"
 });

stories/FranceConnectButton.stories.tsx

@@ -13,17 +13,17 @@ const { meta, getStory } = getStoryFactory({
 export default meta;
 
 export const Default = getStory({
-    "redirectUrl": "https://example.com"
+    "url": "https://example.com"
 });
 
 export const Plus = getStory({
-    "redirectUrl": "https://example.com",
+    "url": "https://example.com",
     "plus": true
 });
 
 export const Centered = getStory({
     "style": {
         "textAlign": "center"
     },
-    "redirectUrl": "https://example.com"
+    "url": "https://example.com"
 });