Skip to content

Commit

Permalink
fix(window-start): check if window start is a function before executi…
Browse files Browse the repository at this point in the history
…ng (#6)

* fix(window-start): check if window start is a function before executing

* fix(window.start): check if window is not undefined

* fix(badges): badges children can be anything

* fix(reactNode): delete useless importation

* fix(badge): children is not optionnal

* fix(window.dsfr): start condition earlier

* fix(window.start): check if start is a function
  • Loading branch information
Mihoub2 authored Jul 12, 2024
1 parent 6922e79 commit 14e9e01
Show file tree
Hide file tree
Showing 4 changed files with 145 additions and 70 deletions.
121 changes: 89 additions & 32 deletions example-ts/src/pages/components/Badges.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,20 @@
import { Alert, Badge, BadgeGroup, Container, Row, Col, Title, Text, Link, Breadcrumb } from '@dataesr/dsfr-plus';
import Playground from '../../components/Playground';
import {
Alert,
Badge,
BadgeGroup,
Container,
Row,
Col,
Title,
Text,
Link,
Breadcrumb,
} from "@dataesr/dsfr-plus";
import Playground from "../../components/Playground";

const badge = `
<Badge>Badge</Badge>
`
`;

const variants = `
<>
Expand All @@ -22,21 +33,21 @@ const variants = `
<Badge noIcon variant="warning">Attention</Badge>
</BadgeGroup>
</>
`
`;

const badgeGroup = `
<BadgeGroup>
<Badge>Badge 1</Badge>
<Badge>Badge 2</Badge>
</BadgeGroup>
`
`;

const icons = `
<BadgeGroup>
<Badge color="green-emeraude" icon="user-line">Badge</Badge>
<Badge color="purple-glycine" icon="user-line">Badge</Badge>
</BadgeGroup>
`
`;
const sizes = `
<BadgeGroup>
<Badge size="sm" variant="new">Nouveau</Badge>
Expand All @@ -45,15 +56,15 @@ const sizes = `
<Badge size="sm" variant="success">Success</Badge>
<Badge size="sm" variant="warning">Attention</Badge>
</BadgeGroup>
`
`;
const colors = `
<BadgeGroup>
<Badge color="green-emeraude">Badge</Badge>
<Badge color="yellow-tournesol">Badge</Badge>
<Badge color="blue-cumulus">Badge</Badge>
<Badge color="purple-glycine">Badge</Badge>
</BadgeGroup>
`
`;

export function Badges() {
return (
Expand All @@ -65,56 +76,102 @@ export function Badges() {
<Link aria-current="page">Badge - Badge</Link>
</Breadcrumb>
</Row>
<Badge variant="info" >Badge</Badge>
<Badge variant="info">Badge</Badge>
<Row gutters>
<Col xs={12}>
<Title as="h1">Badge - Badge</Title>
<Text>
Le composant badge permet de mettre en avant une information de type “statut” ou “état” sur un élément du site.
Le badge n’est pas un composant cliquable. Il doit être associé à une information donnée sur une page pour préciser le statut ou l'état associée à cette information.
Le composant badge permet de mettre en avant une information de type
“statut” ou “état” sur un élément du site. Le badge n’est pas un
composant cliquable. Il doit être associé à une information donnée
sur une page pour préciser le statut ou l'état associée à cette
information.
</Text>
<Playground code={badge} scope={{ Badge, BadgeGroup }} defaultShowCode />
<Playground
code={badge}
scope={{ Badge, BadgeGroup }}
defaultShowCode
/>
</Col>
<Col xs={12}>
<Title as="h2" look="h4">Groupes de badges</Title>
<Title as="h2" look="h4">
Groupes de badges
</Title>
<Text>
Afin de gérer l'espacement lorsque plusieurs badges sont acollés, il est recommandé d'utiliser le composant `BadgeGroup`.
Afin de gérer l'espacement lorsque plusieurs badges sont acollés, il
est recommandé d'utiliser le composant `BadgeGroup`.
</Text>
<Playground code={badgeGroup} scope={{ Badge, BadgeGroup }} defaultShowCode />
<Playground
code={badgeGroup}
scope={{ Badge, BadgeGroup }}
defaultShowCode
/>
</Col>
<Col xs={12}>
<Title as="h2" look="h4">Variants</Title>
<Title as="h2" look="h4">
Variants
</Title>
<Text>
Il existe 5 variantes du badge: `new`, `info`, `error`, `success`, et `warning` avec des icones qui leur sont propre.
Vous pouvez dissimuler l'icone avec la propriété `noIcon`.
Il existe 5 variantes du badge: `new`, `info`, `error`, `success`,
et `warning` avec des icones qui leur sont propre. Vous pouvez
dissimuler l'icone avec la propriété `noIcon`.
</Text>
<Playground code={variants} scope={{ Badge, BadgeGroup }} defaultShowCode />
<Playground
code={variants}
scope={{ Badge, BadgeGroup }}
defaultShowCode
/>
</Col>
<Col xs={12}>
<Title as="h2" look="h4">Taille `small`</Title>
<Title as="h2" look="h4">
Taille `small`
</Title>
<Text>
Vous pouvee réduire la taille des badges avec la propriété `isSmall`.
La taille se gère pour chaque badge à l'intérieur du groupe de badge.
Vous pouvee réduire la taille des badges avec la propriété
`isSmall`. La taille se gère pour chaque badge à l'intérieur du
groupe de badge.
</Text>
<Playground code={sizes} scope={{ Badge, BadgeGroup }} defaultShowCode />
<Playground
code={sizes}
scope={{ Badge, BadgeGroup }}
defaultShowCode
/>
</Col>
<Col xs={12}>
<Title as="h2" look="h4">Couleurs</Title>
<Title as="h2" look="h4">
Couleurs
</Title>
<Text>
Les couleurs du design system sont disponibles pour les badges.
</Text>
<Playground code={colors} scope={{ Badge, BadgeGroup }} defaultShowCode />
<Playground
code={colors}
scope={{ Badge, BadgeGroup }}
defaultShowCode
/>
</Col>
<Col xs={12}>
<Title as="h2" look="h4">Composition de badge</Title>
<Alert className='fr-my-2w' variant="warning" title="Ajout du dsfr-plus" description="Ceci est un ajout du dsfr-plus et n'est pas recommandé par le système de design de l'état.
Ne l'utilisez pas sur un site grand public." />
<Title as="h2" look="h4">
Composition de badge
</Title>
<Alert
className="fr-my-2w"
variant="warning"
title="Ajout du dsfr-plus"
description="Ceci est un ajout du dsfr-plus et n'est pas recommandé par le système de design de l'état.
Ne l'utilisez pas sur un site grand public."
/>
<Text>
La version React offre la possibilité d'utiliser des boutons avec les couleurs définies par le design system ainsi qu'une icône.
La version React offre la possibilité d'utiliser des boutons avec
les couleurs définies par le design system ainsi qu'une icône.
</Text>
<Playground code={icons} scope={{ Badge, BadgeGroup }} defaultShowCode />
<Playground
code={icons}
scope={{ Badge, BadgeGroup }}
defaultShowCode
/>
</Col>
</Row>
</Container>
)
}
);
}
37 changes: 22 additions & 15 deletions src/components/Badge/Badge.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,38 +6,45 @@ import { Link } from "../Link";

const polyRef = forwardRef as PolyRefFunction;

export type BadgeType =
| "new"
| 'error'
| 'info'
| 'warning'
| 'success';
export type BadgeType = "new" | "error" | "info" | "warning" | "success";

export type BadgeProps = {
icon?: string;
className?: Argument;
size?: "md" | "sm";
children: string;
children: React.ReactNode;
noIcon?: boolean;
color?: DSFRColors;
variant?: BadgeType;
}
};
export const Badge = polyRef<"p", BadgeProps, OnlyAs<"button" | "p" | "a">>(
({ as, className, noIcon, color = 'blue-france', size, icon, variant = 'primary', ...props }, ref) => {
const Component = (as === "a") ? Link : as ? as : "p";
(
{
as,
className,
noIcon,
color = "blue-france",
size,
icon,
variant = "primary",
...props
},
ref
) => {
const Component = as === "a" ? Link : as ? as : "p";
const _classes = cn(
'fr-badge',
"fr-badge",
{
[`fr-badge--${variant}`]: variant,
[`fr-badge--${color}`]: color,
[`fr-icon-${icon}`]: icon,
// Next line is a hack to oblige dsfr to display the icon because otherwise
// Next line is a hack to oblige dsfr to display the icon because otherwise
// "content: none" is applied on .fr-badge[class^="fr-icon-"]
"fr-badge--icon-": icon,
'fr-badge--no-icon': noIcon,
'fr-badge--sm': size === "sm",
"fr-badge--no-icon": noIcon,
"fr-badge--sm": size === "sm",
},
className,
className
);
return <Component className={_classes} ref={ref} {...props} />;
}
Expand Down
24 changes: 15 additions & 9 deletions src/components/Badge/BadgeGroup.tsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,31 @@
import { useId } from 'react';
import classNames from 'classnames';
import { getChildrenOfType } from '../../utils/children';
import { Merge } from '../../types/polymophic';
import { Badge } from './Badge';
import { useId } from "react";
import classNames from "classnames";
import { getChildrenOfType } from "../../utils/children";
import { Merge } from "../../types/polymophic";
import { Badge } from "./Badge";

type BadgeGroupBaseProps = {
className?: string;
}
children?: React.ReactNode;
};

export type BadgeGroupProps = Merge<React.HTMLAttributes<HTMLUListElement>, BadgeGroupBaseProps>;
export type BadgeGroupProps = Merge<
React.HTMLAttributes<HTMLUListElement>,
BadgeGroupBaseProps
>;

export const BadgeGroup: React.FC<BadgeGroupProps> = ({
children,
className,
...props
}: React.HTMLAttributes<HTMLUListElement>) => {
const id = useId();
const _classes = classNames('fr-badges-group', className);
const _classes = classNames("fr-badges-group", className);
return (
<ul className={_classes} {...props}>
{getChildrenOfType(children, Badge).map((child, index) => <li key={`${id}-${index}`}>{child}</li>)}
{getChildrenOfType(children, Badge).map((child, index) => (
<li key={`${id}-${index}`}>{child}</li>
))}
</ul>
);
};
33 changes: 19 additions & 14 deletions src/hooks/useDSFRConfig.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,21 +37,26 @@ export const DSFRConfig = ({

useEffect(() => {
const startDSFR = async () => {
if ((window as any)?.dsfr?.isStarted) {
return;
}
(window as any).dsfr = {
verbose,
mode: "manual",
};

// @ts-expect-error
await import("@gouvfr/dsfr/dist/dsfr/dsfr.module.min");
await import("@gouvfr/dsfr/dist/utility/utility.css");
await import("@gouvfr/dsfr/dist/dsfr.css");
// @ts-expect-error
window.dsfr.start();
setDSFRStarted(true);
if (typeof window !== undefined || typeof window.dsfr !== "undefined") {
if ((window as any)?.dsfr?.isStarted) {
return;
}
(window as any).dsfr = {
verbose,
mode: "manual",
};

// @ts-expect-error
await import("@gouvfr/dsfr/dist/dsfr/dsfr.module.min");
await import("@gouvfr/dsfr/dist/utility/utility.css");
await import("@gouvfr/dsfr/dist/dsfr.css");
// @ts-expect-error
window.dsfr.start?.();
setDSFRStarted(true);
} else {
console.error("dsfr.start is not a function");
}
};
const defaultPreferedTheme = window.matchMedia(
"(prefers-color-scheme: dark)"
Expand Down

0 comments on commit 14e9e01

Please sign in to comment.