@hgdc/ui 0.8.0 → 0.9.0
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/README.md +24 -11
- package/dist/account-menu.d.ts +4 -1
- package/dist/account-menu.js +7 -1
- package/dist/command-menu.d.ts +3 -0
- package/dist/command-menu.js +2 -1
- package/dist/family-svg.d.ts +9 -0
- package/dist/family-svg.js +19 -0
- package/dist/product-badge.d.ts +24 -0
- package/dist/product-badge.js +32 -0
- package/dist/products.d.ts +6 -0
- package/dist/products.js +7 -1
- package/email-icons/account.png +0 -0
- package/email-icons/analytics.png +0 -0
- package/email-icons/docs.png +0 -0
- package/email-icons/host.png +0 -0
- package/email-icons/mail.png +0 -0
- package/email-icons/portal.png +0 -0
- package/email-icons/status.png +0 -0
- package/family/account.svg +1 -0
- package/family/analytics.svg +1 -0
- package/family/docs.svg +1 -0
- package/family/hfamily-dark.svg +1 -0
- package/family/hfamily-icon.svg +1 -0
- package/family/hfamily.svg +1 -0
- package/family/host.svg +1 -0
- package/family/mail.svg +1 -0
- package/family/portal.svg +1 -0
- package/family/status.svg +1 -0
- package/package.json +4 -2
- package/styles.css +25 -0
package/README.md
CHANGED
|
@@ -39,16 +39,29 @@ Primitives déjà là : `avatar` `badge` `button` `dialog` `drawer` `dropdown-me
|
|
|
39
39
|
|
|
40
40
|
## Coque des consoles
|
|
41
41
|
|
|
42
|
-
| Import | Exemple
|
|
43
|
-
| -------------- |
|
|
44
|
-
| `app-shell` | `<AppShell sidebarHeader={<OrgSwitcher …/>} nav={<SidebarNav label="Projet">…</SidebarNav>} sidebarFooter={<AccountMenu …/>}>`
|
|
45
|
-
| | `<SidebarNavItem icon={Rocket01Icon} label="Déploiements" render={<Link to="/deployments" />} />`
|
|
46
|
-
| `org-switcher` | `<OrgSwitcher organizations={orgs} activeId={org.id} onSelect={go} createHref="/organisations/nouvelle" />`
|
|
47
|
-
| `account-menu` | `<AccountMenu user={user} onProfile={…} onSecurity={…} onSignOut={signOut} product="Mail" />` : Account et les produits ouverts du catalogue, Mail coché
|
|
48
|
-
| `command-menu` | `<CommandMenu groups={[{ label: "Aller à", items }, { label: "Créer", items }, { label: "Changer", items }]} />` (`Ctrl+K`), `<CommandMenuButton compact="mobile" …/>`
|
|
49
|
-
| `products` | `HGDC_PRODUCTS` (mot, nom, sous-domaine, phrase, icône, état, `entryHref`), `HGDC_ACCOUNT`, `productMenuEntries({ current: "Mail" })` : chaque produit du menu pointe vers son entrée `/auth/hgdc` (ADR 0010) |
|
|
50
|
-
| `kbd` | `<KbdGroup><Kbd>Ctrl</Kbd><Kbd>K</Kbd></KbdGroup>`
|
|
51
|
-
| `page-header` | `<PageHeader title="Domaines" breadcrumbs={[{ label: "Acme", render: <Link to="/o/acme" /> }, { label: "Domaines" }]} actions={<Button>Ajouter</Button>} />`
|
|
42
|
+
| Import | Exemple |
|
|
43
|
+
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
44
|
+
| `app-shell` | `<AppShell sidebarHeader={<OrgSwitcher …/>} nav={<SidebarNav label="Projet">…</SidebarNav>} sidebarFooter={<AccountMenu …/>}>` |
|
|
45
|
+
| | `<SidebarNavItem icon={Rocket01Icon} label="Déploiements" render={<Link to="/deployments" />} />` |
|
|
46
|
+
| `org-switcher` | `<OrgSwitcher organizations={orgs} activeId={org.id} onSelect={go} createHref="/organisations/nouvelle" />` |
|
|
47
|
+
| `account-menu` | `<AccountMenu user={user} onProfile={…} onSecurity={…} onSignOut={signOut} product="Mail" />` : Account et les produits ouverts du catalogue, Mail coché |
|
|
48
|
+
| `command-menu` | `<CommandMenu groups={[{ label: "Aller à", items }, { label: "Créer", items }, { label: "Changer", items }]} />` (`Ctrl+K`), `<CommandMenuButton compact="mobile" …/>` |
|
|
49
|
+
| `products` | `HGDC_PRODUCTS` (mot, nom, sous-domaine, phrase, pastille `badge`, icône, état, `entryHref`), `HGDC_ACCOUNT`, `productMenuEntries({ current: "Mail" })` : chaque produit du menu pointe vers son entrée `/auth/hgdc` (ADR 0010) |
|
|
50
|
+
| `kbd` | `<KbdGroup><Kbd>Ctrl</Kbd><Kbd>K</Kbd></KbdGroup>` |
|
|
51
|
+
| `page-header` | `<PageHeader title="Domaines" breadcrumbs={[{ label: "Acme", render: <Link to="/o/acme" /> }, { label: "Domaines" }]} actions={<Button>Ajouter</Button>} />` |
|
|
52
|
+
|
|
53
|
+
Le menu « Produits HGDC » et la palette (`badge` d'une commande) montrent la pastille de chaque produit.
|
|
54
|
+
|
|
55
|
+
## Identité H family
|
|
56
|
+
|
|
57
|
+
| Import | Rôle |
|
|
58
|
+
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
59
|
+
| `product-badge` | `<ProductBadge product="host" className="size-8" />`, `<FamilyMark />` (le H tricolore), `PRODUCT_GRADIENT` |
|
|
60
|
+
| `@hgdc/ui/family/<mot>.svg` | Fichiers des pastilles (`account`, `host`, `mail`, `portal`, `status`, `analytics`, `docs`), à copier en `favicon.svg` |
|
|
61
|
+
| `@hgdc/ui/family/hfamily*.svg` | `hfamily-icon.svg` (le H seul), `hfamily.svg` et `hfamily-dark.svg` (logo sur fond clair ou sombre, jamais recoloré) |
|
|
62
|
+
| `styles.css` | `--product-<mot>-from` / `--product-<mot>-to` (dégradé de chaque pastille), `--glow-blue`, `--glow-violet`, `--glow-pink`, `--glow-orange` |
|
|
63
|
+
|
|
64
|
+
Couleurs pleines ; pour éclaircir, mélanger au blanc `color-mix(in oklab, …)`, jamais `in oklch`. Une pastille reste seule, jamais dans une tuile de couleur. Les originaux vivent dans le dépôt du site hgdc.ch : les recopier dans `packages/ui/family/`, puis `bun scripts/family.ts && bun run format` (SVG embarqués et PNG des e-mails).
|
|
52
65
|
|
|
53
66
|
La barre se réduit en rail (`Ctrl+B`, mémorisé) : poser `sidebarInitScript` dans le `<head>`. Le kit ne connaît ni routeur ni authentification : liens par `render={<Link />}`, actions par callbacks. Rôles d'organisation : `owner`, `admin`, `member` (Propriétaire, Admin, Membre).
|
|
54
67
|
|
|
@@ -142,7 +155,7 @@ const { html, text } = await renderEmail(
|
|
|
142
155
|
| `EmailDetails` | Liste clé / valeur |
|
|
143
156
|
| `renderEmail` | `{ html, text }` : HTML pour clients mail, texte tiré du même rendu |
|
|
144
157
|
|
|
145
|
-
L'accent vient du catalogue (`accent` de `@hgdc/ui/products`), les icônes de `https://hgdc.ch/email/<mot>.png` (fichiers dans `@hgdc/ui/email-icons/`,
|
|
158
|
+
L'accent vient du catalogue (`accent` de `@hgdc/ui/products`), les icônes de `https://hgdc.ch/email/<mot>.png` (fichiers dans `@hgdc/ui/email-icons/`, tirés des pastilles par `bun scripts/family.ts`). Un exemple par type : `scripts/email-showcase.tsx`.
|
|
146
159
|
|
|
147
160
|
## Règles de la DA
|
|
148
161
|
|
package/dist/account-menu.d.ts
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
import { type IconSvgElement } from "@hugeicons/react";
|
|
2
2
|
import type { ReactNode } from "react";
|
|
3
|
+
import type { FamilyProduct } from "./family-svg.ts";
|
|
3
4
|
export type HgdcProduct = {
|
|
4
5
|
/** « HGDC Host ». */
|
|
5
6
|
name: string;
|
|
6
7
|
href: string;
|
|
7
8
|
/** Le produit ouvert : coché, sans lien. */
|
|
8
9
|
current?: boolean;
|
|
9
|
-
/**
|
|
10
|
+
/** Pastille du produit (`host`, `mail`…), prioritaire sur `icon`. */
|
|
11
|
+
badge?: FamilyProduct;
|
|
12
|
+
/** Icône du produit sans pastille ; celle d'un tableau de bord par défaut. */
|
|
10
13
|
icon?: IconSvgElement;
|
|
11
14
|
/** Texte discret à droite : « Préversion ». */
|
|
12
15
|
hint?: string;
|
package/dist/account-menu.js
CHANGED
|
@@ -13,6 +13,7 @@ import { Menu as MenuPrimitive } from "@base-ui/react/menu";
|
|
|
13
13
|
import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
|
|
14
14
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./dropdown-menu.js";
|
|
15
15
|
import { MENU_LINK_ITEM } from "./org-switcher.js";
|
|
16
|
+
import { ProductBadge } from "./product-badge.js";
|
|
16
17
|
import { productMenuEntries } from "./products.js";
|
|
17
18
|
import { useTheme } from "./theme.js";
|
|
18
19
|
const THEMES = ["light", "dark", "system"];
|
|
@@ -41,5 +42,10 @@ export function AccountMenu({ user, onProfile, onSecurity, onShortcuts, onSignOu
|
|
|
41
42
|
const next = THEMES.find((t) => t === value);
|
|
42
43
|
if (next)
|
|
43
44
|
setTheme(next);
|
|
44
|
-
}, children: [_jsx(DropdownMenuRadioItem, { value: "light", children: "Clair" }), _jsx(DropdownMenuRadioItem, { value: "dark", children: "Sombre" }), _jsx(DropdownMenuRadioItem, { value: "system", children: "Syst\u00E8me" })] }) })] }), onShortcuts ? (_jsxs(DropdownMenuItem, { onClick: onShortcuts, children: [_jsx(HugeiconsIcon, { icon: KeyboardIcon, "aria-hidden": true }), "Raccourcis clavier", _jsx(DropdownMenuShortcut, { children: "?" })] })) : null, products.length ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Produits HGDC" }), products.map((product) => product.current ? (_jsxs(DropdownMenuItem, { disabled: true, className: "data-disabled:opacity-100", children: [_jsx(
|
|
45
|
+
}, children: [_jsx(DropdownMenuRadioItem, { value: "light", children: "Clair" }), _jsx(DropdownMenuRadioItem, { value: "dark", children: "Sombre" }), _jsx(DropdownMenuRadioItem, { value: "system", children: "Syst\u00E8me" })] }) })] }), onShortcuts ? (_jsxs(DropdownMenuItem, { onClick: onShortcuts, children: [_jsx(HugeiconsIcon, { icon: KeyboardIcon, "aria-hidden": true }), "Raccourcis clavier", _jsx(DropdownMenuShortcut, { children: "?" })] })) : null, products.length ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Produits HGDC" }), products.map((product) => product.current ? (_jsxs(DropdownMenuItem, { disabled: true, className: "data-disabled:opacity-100", children: [_jsx(ProductMenuIcon, { product: product }), _jsx("span", { className: "flex-1", children: product.name }), _jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Produit ouvert" })] }, product.name)) : (_jsxs(MenuPrimitive.LinkItem, { href: product.href, className: MENU_LINK_ITEM, children: [_jsx(ProductMenuIcon, { product: product }), _jsx("span", { className: "flex-1", children: product.name }), product.hint ? (_jsx("span", { className: "text-xs font-normal text-muted-foreground", children: product.hint })) : null] }, product.name)))] })] })) : null, _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: onSignOut, children: [_jsx(HugeiconsIcon, { icon: Logout01Icon, "aria-hidden": true }), "Se d\u00E9connecter"] })] })] }));
|
|
46
|
+
}
|
|
47
|
+
function ProductMenuIcon({ product }) {
|
|
48
|
+
if (product.badge)
|
|
49
|
+
return _jsx(ProductBadge, { product: product.badge });
|
|
50
|
+
return _jsx(HugeiconsIcon, { icon: product.icon ?? DashboardSquare01Icon, "aria-hidden": true });
|
|
45
51
|
}
|
package/dist/command-menu.d.ts
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { type IconSvgElement } from "@hugeicons/react";
|
|
2
|
+
import type { FamilyProduct } from "./family-svg.ts";
|
|
2
3
|
export type Command = {
|
|
3
4
|
/** Unique dans toute la palette. */
|
|
4
5
|
id: string;
|
|
5
6
|
label: string;
|
|
6
7
|
icon?: IconSvgElement;
|
|
8
|
+
/** Pastille d'un produit (« Ouvrir HGDC Mail »), à la place de `icon`. */
|
|
9
|
+
badge?: FamilyProduct;
|
|
7
10
|
/** Autres mots qui trouvent la commande : « dns » pour « Ajouter un domaine ». */
|
|
8
11
|
keywords?: Array<string>;
|
|
9
12
|
/** Texte discret à droite : l'organisation d'un projet, « Page ». */
|
package/dist/command-menu.js
CHANGED
|
@@ -5,6 +5,7 @@ import Search01Icon from "@hugeicons/core-free-icons/Search01Icon";
|
|
|
5
5
|
import { HugeiconsIcon } from "@hugeicons/react";
|
|
6
6
|
import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
|
|
7
7
|
import { FLOATING_SURFACE } from "./floating.js";
|
|
8
|
+
import { ProductBadge } from "./product-badge.js";
|
|
8
9
|
import { Kbd, KbdGroup, isApplePlatform } from "./kbd.js";
|
|
9
10
|
import { cn } from "./cn.js";
|
|
10
11
|
function normalize(text) {
|
|
@@ -63,7 +64,7 @@ export function CommandMenu({ groups, open: openProp, onOpenChange, placeholder
|
|
|
63
64
|
return (_jsx(DialogPrimitive.Root, { open: open, onOpenChange: setOpen, children: _jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Backdrop, { className: "fixed inset-0 z-50 bg-foreground/30 dark:bg-black/60" }), _jsx(DialogPrimitive.Viewport, { className: "fixed inset-0 z-50 flex items-start justify-center px-2 pt-[min(12dvh,6rem)] pb-2", children: _jsx(DialogPrimitive.Popup, { "data-slot": "command-menu", "aria-label": "Palette de commandes", className: cn(FLOATING_SURFACE, "flex max-h-[min(36rem,calc(100dvh-2rem))] w-full max-w-xl flex-col overflow-hidden rounded-3xl shadow-2xl shadow-black/10 outline-none"), children: _jsxs(Autocomplete.Root, { open: true, inline: true, items: visibleGroups, itemToStringValue: (command) => command.label, filter: (command, query) => matchCommand(command, query), autoHighlight: "always", keepHighlight: true, children: [_jsxs(Autocomplete.InputGroup, { className: "flex items-center gap-3 border-b border-foreground/5 px-4", children: [_jsx(HugeiconsIcon, { icon: Search01Icon, strokeWidth: 2, "aria-hidden": true, className: "size-4.5 shrink-0 text-muted-foreground" }), _jsx(Autocomplete.Input, { "aria-label": "Rechercher une commande", placeholder: placeholder, className: "h-14 w-full min-w-0 bg-transparent text-base outline-none placeholder:text-muted-foreground" }), _jsx(DialogPrimitive.Close, { className: "sr-only", children: "Fermer la palette" })] }), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-1.5 [scroll-padding-block:0.375rem]", children: [_jsx(Autocomplete.Empty, { className: "px-3 py-10 text-center text-sm text-muted-foreground empty:hidden", children: emptyLabel }), _jsx(Autocomplete.List, { children: (group) => (_jsxs(Autocomplete.Group, { items: group.items, className: "not-last:mb-1.5", children: [_jsx(Autocomplete.GroupLabel, { className: "px-3 pt-2 pb-1.5 text-xs font-medium text-muted-foreground", children: group.label }), _jsx(Autocomplete.Collection, { children: (command) => (_jsxs(Autocomplete.Item, { value: command, onClick: () => {
|
|
64
65
|
setOpen(false);
|
|
65
66
|
command.onSelect();
|
|
66
|
-
}, className: "flex min-h-11 cursor-default items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium outline-none select-none data-highlighted:bg-muted lg:min-h-10", children: [command.icon ? (_jsx(HugeiconsIcon, { icon: command.icon, strokeWidth: 1.8, "aria-hidden": true, className: "size-4.5 shrink-0 text-muted-foreground" })) : null, _jsx("span", { className: "min-w-0 flex-1 truncate", children: command.label }), command.hint ? (_jsx("span", { className: "shrink-0 truncate text-xs font-normal text-muted-foreground", children: command.hint })) : null, command.shortcut ? (_jsx(KbdGroup, { className: "hidden shrink-0 sm:inline-flex", children: command.shortcut.map((key) => (_jsx(Kbd, { children: key }, key))) })) : null] }, command.id)) })] }, group.label)) })] }), _jsxs("div", { className: "hidden items-center gap-4 border-t border-foreground/5 px-4 py-2.5 text-xs text-muted-foreground sm:flex", children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsxs(KbdGroup, { children: [_jsx(Kbd, { children: "\u2191" }), _jsx(Kbd, { children: "\u2193" })] }), "Choisir"] }), _jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx(Kbd, { children: "Entr\u00E9e" }), "Ouvrir"] }), _jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx(Kbd, { children: "\u00C9chap" }), "Fermer"] })] })] }) }) })] }) }));
|
|
67
|
+
}, className: "flex min-h-11 cursor-default items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium outline-none select-none data-highlighted:bg-muted lg:min-h-10", children: [command.badge ? (_jsx(ProductBadge, { product: command.badge, className: "size-4.5" })) : command.icon ? (_jsx(HugeiconsIcon, { icon: command.icon, strokeWidth: 1.8, "aria-hidden": true, className: "size-4.5 shrink-0 text-muted-foreground" })) : null, _jsx("span", { className: "min-w-0 flex-1 truncate", children: command.label }), command.hint ? (_jsx("span", { className: "shrink-0 truncate text-xs font-normal text-muted-foreground", children: command.hint })) : null, command.shortcut ? (_jsx(KbdGroup, { className: "hidden shrink-0 sm:inline-flex", children: command.shortcut.map((key) => (_jsx(Kbd, { children: key }, key))) })) : null] }, command.id)) })] }, group.label)) })] }), _jsxs("div", { className: "hidden items-center gap-4 border-t border-foreground/5 px-4 py-2.5 text-xs text-muted-foreground sm:flex", children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsxs(KbdGroup, { children: [_jsx(Kbd, { children: "\u2191" }), _jsx(Kbd, { children: "\u2193" })] }), "Choisir"] }), _jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx(Kbd, { children: "Entr\u00E9e" }), "Ouvrir"] }), _jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx(Kbd, { children: "\u00C9chap" }), "Fermer"] })] })] }) }) })] }) }));
|
|
67
68
|
}
|
|
68
69
|
function noop() { }
|
|
69
70
|
function subscribeNever() {
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/** Les produits de la H family qui ont une pastille, par leur mot en minuscules. */
|
|
2
|
+
export declare const FAMILY_PRODUCTS: readonly ["account", "host", "mail", "portal", "status", "analytics", "docs"];
|
|
3
|
+
export type FamilyProduct = (typeof FAMILY_PRODUCTS)[number];
|
|
4
|
+
/** Vrai si le mot en minuscules (« host ») désigne un produit qui a une pastille. */
|
|
5
|
+
export declare function isFamilyProduct(word: string): word is FamilyProduct;
|
|
6
|
+
/** SVG de la pastille de chaque produit (`family/<mot>.svg`). */
|
|
7
|
+
export declare const PRODUCT_BADGE_SVG: Readonly<Record<FamilyProduct, string>>;
|
|
8
|
+
/** SVG du H tricolore, l'icône de la famille (`family/hfamily-icon.svg`). */
|
|
9
|
+
export declare const FAMILY_MARK_SVG = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 256\"><defs><linearGradient id=\"l\" x1=\"0\" y1=\"24\" x2=\"0\" y2=\"232\" gradientUnits=\"userSpaceOnUse\"><stop offset=\"0\" stop-color=\"#2c78fd\"/><stop offset=\"1\" stop-color=\"#7343fe\"/></linearGradient><linearGradient id=\"r\" x1=\"0\" y1=\"24\" x2=\"0\" y2=\"232\" gradientUnits=\"userSpaceOnUse\"><stop offset=\"0\" stop-color=\"#fe5292\"/><stop offset=\"1\" stop-color=\"#ff9a46\"/></linearGradient><linearGradient id=\"b\" x1=\"64\" y1=\"0\" x2=\"192\" y2=\"0\" gradientUnits=\"userSpaceOnUse\"><stop offset=\"0\" stop-color=\"#8145ff\"/><stop offset=\"1\" stop-color=\"#fe5292\"/></linearGradient></defs><rect x=\"43\" y=\"24\" width=\"57\" height=\"208\" rx=\"18\" fill=\"url(#l)\"/><rect x=\"156\" y=\"24\" width=\"57\" height=\"208\" rx=\"18\" fill=\"url(#r)\"/><rect x=\"67\" y=\"107\" width=\"122\" height=\"43\" rx=\"14\" fill=\"url(#b)\"/></svg>";
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
// Généré par `bun scripts/family.ts` depuis `packages/ui/family/`. Ne pas modifier à la main.
|
|
2
|
+
/** Les produits de la H family qui ont une pastille, par leur mot en minuscules. */
|
|
3
|
+
export const FAMILY_PRODUCTS = ["account", "host", "mail", "portal", "status", "analytics", "docs"];
|
|
4
|
+
/** Vrai si le mot en minuscules (« host ») désigne un produit qui a une pastille. */
|
|
5
|
+
export function isFamilyProduct(word) {
|
|
6
|
+
return FAMILY_PRODUCTS.includes(word);
|
|
7
|
+
}
|
|
8
|
+
/** SVG de la pastille de chaque produit (`family/<mot>.svg`). */
|
|
9
|
+
export const PRODUCT_BADGE_SVG = {
|
|
10
|
+
account: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="66 66 380 380"><defs><linearGradient id="sky" x1="96" y1="76" x2="416" y2="436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff3b47"/><stop offset="1" stop-color="#ff6352"/></linearGradient><linearGradient id="acc" x1="150" y1="160" x2="362" y2="352" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff3b47"/><stop offset="1" stop-color="#ff6352"/></linearGradient></defs><circle cx="256" cy="256" r="190" fill="url(#sky)"/><rect x="128" y="162" width="256" height="188" rx="48" fill="#fff"/><g fill="url(#acc)"><circle cx="202" cy="232" r="30"/><path d="M154 314A48 44 0 0 1 250 314Z"/><rect x="276" y="216" width="72" height="24" rx="12"/><rect x="276" y="262" width="48" height="24" rx="12"/></g></svg>',
|
|
11
|
+
host: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="66 66 380 380"><defs><linearGradient id="sky" x1="96" y1="76" x2="416" y2="436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#194ff7"/><stop offset="1" stop-color="#02b4ff"/></linearGradient><linearGradient id="acc" x1="150" y1="160" x2="362" y2="352" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#194ff7"/><stop offset="1" stop-color="#02b4ff"/></linearGradient></defs><circle cx="256" cy="256" r="190" fill="url(#sky)"/><g transform="translate(0 6)"><g fill="#fff"><path d="M158.7 331.3A262.3 262.3 0 0 0 353.3 331.3L334 283H178Z"/><circle cx="178" cy="283" r="52"/><circle cx="334" cy="283" r="52"/><circle cx="214" cy="238" r="54"/><circle cx="288" cy="222" r="72"/><rect x="178" y="232" width="156" height="100"/></g><path fill="none" stroke="url(#acc)" stroke-width="24" stroke-linecap="round" stroke-linejoin="round" d="M256 302V234M224 266L256 234L288 266"/></g></svg>',
|
|
12
|
+
mail: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="66 66 380 380"><defs><linearGradient id="sky" x1="96" y1="76" x2="416" y2="436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f61f8e"/><stop offset="1" stop-color="#ff5cb8"/></linearGradient><linearGradient id="acc" x1="150" y1="160" x2="362" y2="352" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f61f8e"/><stop offset="1" stop-color="#ff5cb8"/></linearGradient></defs><circle cx="256" cy="256" r="190" fill="url(#sky)"/><rect x="128" y="162" width="256" height="188" rx="56" fill="#fff"/><path fill="url(#acc)" d="M182 194H330A22 22 0 0 1 341.82 234.56L271.04 279.62A28 28 0 0 1 240.96 279.62L170.18 234.56A22 22 0 0 1 182 194Z"/></svg>',
|
|
13
|
+
portal: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="66 66 380 380"><defs><linearGradient id="sky" x1="96" y1="76" x2="416" y2="436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4732ed"/><stop offset="1" stop-color="#b03cff"/></linearGradient><linearGradient id="acc" x1="150" y1="160" x2="362" y2="352" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4732ed"/><stop offset="1" stop-color="#b03cff"/></linearGradient></defs><circle cx="256" cy="256" r="190" fill="url(#sky)"/><path fill="#fff" d="M168 160H222A24 24 0 0 1 240 168L258 188H344A40 40 0 0 1 384 228V316A40 40 0 0 1 344 356H168A40 40 0 0 1 128 316V200A40 40 0 0 1 168 160Z"/><path fill="none" stroke="url(#acc)" stroke-width="30" stroke-linecap="round" stroke-linejoin="round" d="M212 272L244 302L304 240"/></svg>',
|
|
14
|
+
status: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="66 66 380 380"><defs><linearGradient id="sky" x1="96" y1="76" x2="416" y2="436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#199f62"/><stop offset="1" stop-color="#56db29"/></linearGradient><linearGradient id="acc" x1="150" y1="160" x2="362" y2="352" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#199f62"/><stop offset="1" stop-color="#56db29"/></linearGradient></defs><circle cx="256" cy="256" r="190" fill="url(#sky)"/><rect x="128" y="160" width="256" height="192" rx="48" fill="#fff"/><path fill="none" stroke="url(#acc)" stroke-width="26" stroke-linecap="round" stroke-linejoin="round" d="M164 262H206L230 214L262 304L288 248H348"/></svg>',
|
|
15
|
+
analytics: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="66 66 380 380"><defs><linearGradient id="sky" x1="96" y1="76" x2="416" y2="436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fe5623"/><stop offset="1" stop-color="#ffb003"/></linearGradient><linearGradient id="acc" x1="150" y1="160" x2="362" y2="352" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fe5623"/><stop offset="1" stop-color="#ffb003"/></linearGradient></defs><circle cx="256" cy="256" r="190" fill="url(#sky)"/><rect x="128" y="160" width="256" height="192" rx="48" fill="#fff"/><path fill="none" stroke="url(#acc)" stroke-width="30" stroke-linecap="round" d="M198 304V276M256 304V240M314 304V206"/></svg>',
|
|
16
|
+
docs: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="66 66 380 380"><defs><linearGradient id="sky" x1="96" y1="76" x2="416" y2="436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1bb9cf"/><stop offset="1" stop-color="#13e4c8"/></linearGradient><linearGradient id="acc" x1="150" y1="160" x2="362" y2="352" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1bb9cf"/><stop offset="1" stop-color="#13e4c8"/></linearGradient></defs><circle cx="256" cy="256" r="190" fill="url(#sky)"/><g fill="#fff"><path d="M248 196C222 176 184 168 146 174A14 14 0 0 0 134 188V324A12 12 0 0 0 148 336C184 332 220 338 248 356Z"/><path d="M264 196C290 176 328 168 366 174A14 14 0 0 1 378 188V324A12 12 0 0 1 364 336C328 332 292 338 264 356Z"/></g><path fill="none" stroke="url(#acc)" stroke-width="16" stroke-linecap="round" d="M166 226C188 224 208 228 224 238M166 266C188 264 208 268 224 278M288 238C304 228 324 224 346 226M288 278C304 268 324 264 346 266"/></svg>',
|
|
17
|
+
};
|
|
18
|
+
/** SVG du H tricolore, l'icône de la famille (`family/hfamily-icon.svg`). */
|
|
19
|
+
export const FAMILY_MARK_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><defs><linearGradient id="l" x1="0" y1="24" x2="0" y2="232" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2c78fd"/><stop offset="1" stop-color="#7343fe"/></linearGradient><linearGradient id="r" x1="0" y1="24" x2="0" y2="232" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fe5292"/><stop offset="1" stop-color="#ff9a46"/></linearGradient><linearGradient id="b" x1="64" y1="0" x2="192" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8145ff"/><stop offset="1" stop-color="#fe5292"/></linearGradient></defs><rect x="43" y="24" width="57" height="208" rx="18" fill="url(#l)"/><rect x="156" y="24" width="57" height="208" rx="18" fill="url(#r)"/><rect x="67" y="107" width="122" height="43" rx="14" fill="url(#b)"/></svg>';
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { type FamilyProduct } from "./family-svg.ts";
|
|
2
|
+
/**
|
|
3
|
+
* Dégradé de chaque pastille, du coin haut gauche au coin bas droit. Mêmes valeurs que les jetons
|
|
4
|
+
* `--product-<mot>-from` / `--product-<mot>-to` de `styles.css` et que les SVG de `family/`.
|
|
5
|
+
*/
|
|
6
|
+
export declare const PRODUCT_GRADIENT: Readonly<Record<FamilyProduct, {
|
|
7
|
+
from: string;
|
|
8
|
+
to: string;
|
|
9
|
+
}>>;
|
|
10
|
+
type MarkProps = {
|
|
11
|
+
className?: string;
|
|
12
|
+
/** Texte de remplacement. Absent : image décorative, le nom du produit est écrit à côté. */
|
|
13
|
+
label?: string;
|
|
14
|
+
};
|
|
15
|
+
/**
|
|
16
|
+
* Pastille d'un produit (dégradé plein, pictogramme blanc), toujours seule : jamais dans une tuile
|
|
17
|
+
* de couleur. `size-4` par défaut, à agrandir par `className`.
|
|
18
|
+
*/
|
|
19
|
+
export declare function ProductBadge({ product, className, label }: MarkProps & {
|
|
20
|
+
product: FamilyProduct;
|
|
21
|
+
}): React.JSX.Element;
|
|
22
|
+
/** Le H tricolore de la famille (« Propulsé par », hub). `size-4` par défaut. */
|
|
23
|
+
export declare function FamilyMark({ className, label }: MarkProps): React.JSX.Element;
|
|
24
|
+
export {};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "./cn.js";
|
|
3
|
+
import { FAMILY_MARK_SVG, PRODUCT_BADGE_SVG } from "./family-svg.js";
|
|
4
|
+
/**
|
|
5
|
+
* Dégradé de chaque pastille, du coin haut gauche au coin bas droit. Mêmes valeurs que les jetons
|
|
6
|
+
* `--product-<mot>-from` / `--product-<mot>-to` de `styles.css` et que les SVG de `family/`.
|
|
7
|
+
*/
|
|
8
|
+
export const PRODUCT_GRADIENT = {
|
|
9
|
+
account: { from: "#ff3b47", to: "#ff6352" },
|
|
10
|
+
host: { from: "#194ff7", to: "#02b4ff" },
|
|
11
|
+
mail: { from: "#f61f8e", to: "#ff5cb8" },
|
|
12
|
+
portal: { from: "#4732ed", to: "#b03cff" },
|
|
13
|
+
status: { from: "#199f62", to: "#56db29" },
|
|
14
|
+
analytics: { from: "#fe5623", to: "#ffb003" },
|
|
15
|
+
docs: { from: "#1bb9cf", to: "#13e4c8" },
|
|
16
|
+
};
|
|
17
|
+
// En image plutôt qu'en SVG en ligne : chaque pastille garde ses identifiants de dégradé pour elle,
|
|
18
|
+
// plusieurs pastilles dans une même page ne se marchent pas dessus.
|
|
19
|
+
function dataUri(svg) {
|
|
20
|
+
return `data:image/svg+xml,${encodeURIComponent(svg)}`;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Pastille d'un produit (dégradé plein, pictogramme blanc), toujours seule : jamais dans une tuile
|
|
24
|
+
* de couleur. `size-4` par défaut, à agrandir par `className`.
|
|
25
|
+
*/
|
|
26
|
+
export function ProductBadge({ product, className, label }) {
|
|
27
|
+
return (_jsx("img", { src: dataUri(PRODUCT_BADGE_SVG[product]), alt: label ?? "", "aria-hidden": label ? undefined : true, width: 16, height: 16, draggable: false, className: cn("size-4 shrink-0 select-none", className) }));
|
|
28
|
+
}
|
|
29
|
+
/** Le H tricolore de la famille (« Propulsé par », hub). `size-4` par défaut. */
|
|
30
|
+
export function FamilyMark({ className, label }) {
|
|
31
|
+
return (_jsx("img", { src: dataUri(FAMILY_MARK_SVG), alt: label ?? "", "aria-hidden": label ? undefined : true, width: 16, height: 16, draggable: false, className: cn("size-4 shrink-0 select-none", className) }));
|
|
32
|
+
}
|
package/dist/products.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { IconSvgElement } from "@hugeicons/react";
|
|
2
2
|
import { type EmailAccent } from "./email-palette.ts";
|
|
3
|
+
import { type FamilyProduct } from "./family-svg.ts";
|
|
3
4
|
/** Où en est un produit : seul ce qui répond s'ouvre depuis les menus. */
|
|
4
5
|
export type ProductStage = "live" | "preview" | "soon";
|
|
5
6
|
export declare const PRODUCT_STAGE_LABEL: Readonly<Record<ProductStage, string>>;
|
|
@@ -20,6 +21,9 @@ export type HgdcCatalogProduct = {
|
|
|
20
21
|
entryHref: string;
|
|
21
22
|
/** Une phrase, au tutoiement. */
|
|
22
23
|
pitch: string;
|
|
24
|
+
/** Pastille du produit (`ProductBadge` de `@hgdc/ui/product-badge`) : le mot en minuscules. */
|
|
25
|
+
badge: FamilyProduct;
|
|
26
|
+
/** Pictogramme Hugeicons, pour une liste qui en veut un (palette, navigation). Le logo est `badge`. */
|
|
23
27
|
icon: IconSvgElement;
|
|
24
28
|
stage: ProductStage;
|
|
25
29
|
/**
|
|
@@ -45,6 +49,8 @@ export type ProductMenuEntry = {
|
|
|
45
49
|
href: string;
|
|
46
50
|
/** Le produit ouvert : coché, sans lien. */
|
|
47
51
|
current?: boolean;
|
|
52
|
+
/** Pastille du produit, affichée à la place de `icon`. */
|
|
53
|
+
badge?: FamilyProduct;
|
|
48
54
|
icon?: IconSvgElement;
|
|
49
55
|
/** Texte discret à droite : « Préversion ». */
|
|
50
56
|
hint?: string;
|
package/dist/products.js
CHANGED
|
@@ -6,6 +6,7 @@ import Mail01Icon from "@hugeicons/core-free-icons/Mail01Icon";
|
|
|
6
6
|
import Rocket01Icon from "@hugeicons/core-free-icons/Rocket01Icon";
|
|
7
7
|
import UserCircleIcon from "@hugeicons/core-free-icons/UserCircleIcon";
|
|
8
8
|
import { HGDC_EMAIL_ACCENT } from "./email-palette.js";
|
|
9
|
+
import { isFamilyProduct } from "./family-svg.js";
|
|
9
10
|
export const PRODUCT_STAGE_LABEL = {
|
|
10
11
|
live: "En service",
|
|
11
12
|
preview: "Préversion",
|
|
@@ -18,7 +19,10 @@ export const PRODUCT_STAGE_LABEL = {
|
|
|
18
19
|
*/
|
|
19
20
|
export const PRODUCT_ENTRY_PATH = "/auth/hgdc";
|
|
20
21
|
function product(word, pitch, icon, stage) {
|
|
21
|
-
const
|
|
22
|
+
const badge = word.toLowerCase();
|
|
23
|
+
if (!isFamilyProduct(badge))
|
|
24
|
+
throw new Error(`@hgdc/ui/products : pas de pastille pour « ${word} »`);
|
|
25
|
+
const subdomain = `${badge}.hgdc.ch`;
|
|
22
26
|
const href = `https://${subdomain}`;
|
|
23
27
|
return {
|
|
24
28
|
word,
|
|
@@ -27,6 +31,7 @@ function product(word, pitch, icon, stage) {
|
|
|
27
31
|
href,
|
|
28
32
|
entryHref: `${href}${PRODUCT_ENTRY_PATH}`,
|
|
29
33
|
pitch,
|
|
34
|
+
badge,
|
|
30
35
|
icon,
|
|
31
36
|
stage,
|
|
32
37
|
accent: HGDC_EMAIL_ACCENT,
|
|
@@ -61,6 +66,7 @@ export function productMenuEntries(options = {}) {
|
|
|
61
66
|
return [account, ...(options.catalog ?? HGDC_PRODUCTS).filter(isProductOpen)].map((item) => ({
|
|
62
67
|
name: item.name,
|
|
63
68
|
href: item.entryHref,
|
|
69
|
+
badge: item.badge,
|
|
64
70
|
icon: item.icon,
|
|
65
71
|
...(item.word.toLowerCase() === current ? { current: true } : {}),
|
|
66
72
|
...(item.stage === "preview" ? { hint: PRODUCT_STAGE_LABEL.preview } : {}),
|
package/email-icons/account.png
CHANGED
|
Binary file
|
|
Binary file
|
package/email-icons/docs.png
CHANGED
|
Binary file
|
package/email-icons/host.png
CHANGED
|
Binary file
|
package/email-icons/mail.png
CHANGED
|
Binary file
|
package/email-icons/portal.png
CHANGED
|
Binary file
|
package/email-icons/status.png
CHANGED
|
Binary file
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="66 66 380 380"><defs><linearGradient id="sky" x1="96" y1="76" x2="416" y2="436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff3b47"/><stop offset="1" stop-color="#ff6352"/></linearGradient><linearGradient id="acc" x1="150" y1="160" x2="362" y2="352" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff3b47"/><stop offset="1" stop-color="#ff6352"/></linearGradient></defs><circle cx="256" cy="256" r="190" fill="url(#sky)"/><rect x="128" y="162" width="256" height="188" rx="48" fill="#fff"/><g fill="url(#acc)"><circle cx="202" cy="232" r="30"/><path d="M154 314A48 44 0 0 1 250 314Z"/><rect x="276" y="216" width="72" height="24" rx="12"/><rect x="276" y="262" width="48" height="24" rx="12"/></g></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="66 66 380 380"><defs><linearGradient id="sky" x1="96" y1="76" x2="416" y2="436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fe5623"/><stop offset="1" stop-color="#ffb003"/></linearGradient><linearGradient id="acc" x1="150" y1="160" x2="362" y2="352" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fe5623"/><stop offset="1" stop-color="#ffb003"/></linearGradient></defs><circle cx="256" cy="256" r="190" fill="url(#sky)"/><rect x="128" y="160" width="256" height="192" rx="48" fill="#fff"/><path fill="none" stroke="url(#acc)" stroke-width="30" stroke-linecap="round" d="M198 304V276M256 304V240M314 304V206"/></svg>
|
package/family/docs.svg
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="66 66 380 380"><defs><linearGradient id="sky" x1="96" y1="76" x2="416" y2="436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1bb9cf"/><stop offset="1" stop-color="#13e4c8"/></linearGradient><linearGradient id="acc" x1="150" y1="160" x2="362" y2="352" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1bb9cf"/><stop offset="1" stop-color="#13e4c8"/></linearGradient></defs><circle cx="256" cy="256" r="190" fill="url(#sky)"/><g fill="#fff"><path d="M248 196C222 176 184 168 146 174A14 14 0 0 0 134 188V324A12 12 0 0 0 148 336C184 332 220 338 248 356Z"/><path d="M264 196C290 176 328 168 366 174A14 14 0 0 1 378 188V324A12 12 0 0 1 364 336C328 332 292 338 264 356Z"/></g><path fill="none" stroke="url(#acc)" stroke-width="16" stroke-linecap="round" d="M166 226C188 224 208 228 224 238M166 266C188 264 208 268 224 278M288 238C304 228 324 224 346 226M288 278C304 268 324 264 346 266"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="43 24 991.1 293.5"><defs><linearGradient id="l" x1="0" y1="24" x2="0" y2="232" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2c78fd"/><stop offset="1" stop-color="#7343fe"/></linearGradient><linearGradient id="r" x1="0" y1="24" x2="0" y2="232" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fe5292"/><stop offset="1" stop-color="#ff9a46"/></linearGradient><linearGradient id="b" x1="64" y1="0" x2="192" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8145ff"/><stop offset="1" stop-color="#fe5292"/></linearGradient></defs><rect x="43" y="24" width="57" height="208" rx="18" fill="url(#l)"/><rect x="156" y="24" width="57" height="208" rx="18" fill="url(#r)"/><rect x="67" y="107" width="122" height="43" rx="14" fill="url(#b)"/><path fill="#fafafa" fill-rule="evenodd" d="M957.4 317.3C935 314.4 918.7 300.9 914.8 282C911.5 265.8 919.2 250 936.1 238.5C940.6 235.5 940.6 235.4 937.2 234.7C918.8 230.4 904.1 219.3 895.6 203.4C892.8 198.2 890 190.3 889.1 185.1C888.9 184.1 888.7 183.3 888.7 183.1C888.5 182.5 887.6 176.3 887.4 173.4C886.9 167.6 886.9 85.7 887.5 85.2C888 84.6 920.3 84.6 920.8 85.1C921 85.4 921.1 89 921.1 129C921.2 177.2 921.1 173.9 922.4 178.9C926.6 195.4 940 206.5 957.2 207.7C977.4 209.1 994.7 196.5 999.5 176.7C1000.8 171.3 1000.8 174.4 1000.8 127.5C1000.9 88.2 1000.9 85.2 1001.2 85C1001.4 84.8 1005 84.8 1017.6 84.8C1033.7 84.8 1033.7 84.8 1034 85.3C1034.5 86 1034.3 239.4 1033.8 244.1C1031.8 263.7 1027.6 275.8 1018 289.3C1004.4 308.5 979.3 320.1 957.4 317.3ZM970.7 289C979.9 287.4 988.4 281.2 993.7 272.2C996.4 267.8 998.8 260 999.7 253.2C1000.2 249.7 1000.5 220.8 1000.1 220C999.8 219.5 999.8 219.5 997.1 221.6C991.4 225.9 984 230.4 978 233.2C956.7 243.2 947.5 250.9 944 261.7C941.2 270.2 943.8 279 950.5 284.2C954 286.9 957.8 288.4 963.4 289.2C964.9 289.5 968.5 289.3 970.7 289ZM867 235.3C855.2 234.4 843.9 227.7 837.9 218.1C833 210.1 830.6 202.2 829.4 190.4C829.1 187.4 829 26.8 829.3 26C829.3 25.9 829.5 25.7 829.7 25.6C830.5 25.4 862.5 25.4 862.8 25.7C863.1 25.9 863.1 33.7 863.1 105.6C863.1 189.4 863.1 187.7 864 192.3C865.8 201.5 869.8 205.9 876.6 206.1C878.9 206.1 878.8 206 880 208.8C882.2 213.4 886.5 220.3 890.1 224.8C893.1 228.6 893.1 228.5 887.4 231.3C880.9 234.5 874 235.8 867 235.3ZM276 231.9C275.6 231.6 275.6 231.6 275.6 178.5C275.6 126.2 275.6 125.4 275.2 125.3C275 125.1 271.9 125.1 266.4 125.1C259.4 125.1 257.8 125 257.5 124.8C256.9 124.4 256.9 98.9 257.4 98.3C257.7 98 258.4 98 266.4 97.9C273.7 97.9 275 97.8 275.3 97.6C275.5 97.3 275.6 96.4 275.7 88.6C275.8 76.1 276.4 70.6 278.5 63.4C282.9 47.5 293.8 35.1 309.1 28.5C312.1 27.2 319.4 25.2 322.9 24.6C328.4 23.8 346.7 24 347.7 24.9C348.2 25.3 348.2 53.2 347.7 53.7C347.4 53.9 345.7 53.9 338.2 53.9C328.2 53.9 327.9 53.9 324 55.3C317.6 57.4 312.2 63.5 310.5 70.5C309.4 74.6 309.4 75.2 309.3 86.3C309.1 96.3 309.2 97.4 309.7 97.7C309.8 97.8 318.2 97.9 328.4 97.9C344.1 97.9 347 97.9 347.3 98.2C347.8 98.5 347.9 124.2 347.5 124.7C347.3 124.9 343.5 125 328.4 125.1C314.1 125.1 309.6 125.2 309.4 125.4C309.2 125.6 309.2 137.6 309.2 178.6C309.1 230.9 309.1 231.7 308.8 231.9C308.2 232.3 276.6 232.3 276 231.9ZM536.7 231.9C536.2 231.4 536.4 143.4 536.9 139.3C538 129.6 540 122.9 544.2 114.7C555.4 92.8 580.1 79.6 604.6 82.7C621.1 84.7 633.2 92 643.3 105.7C644.5 107.3 644.7 107.3 645.8 105.9C652.4 97.2 657.9 92.6 666.5 88.3C686.2 78.5 711.2 80.9 728.5 94.3C737.2 101 743 108.3 747.4 118C750.8 125.6 752.3 131.3 753.2 140.1C753.7 145.3 753.8 231.4 753.2 231.8C752.8 232.2 720.6 232.2 720.3 231.8C720.1 231.6 720 222.9 719.9 185.2C719.8 144.2 719.8 138.6 719.5 137.2C716.7 122.3 707.5 112.3 694.7 110.5C679.5 108.3 666 118 661.6 134C660.3 139 660.4 134.7 660.3 185.7C660.2 223 660.1 231.6 659.9 231.8C659.7 232.1 629.6 232.3 628.2 232.1C627.9 232 627.5 231.9 627.3 231.7C627.1 231.4 627 226.6 627 186.6C627 161.1 626.9 140.8 626.8 139.5C625.5 121.3 611.2 108.3 594.9 110.5C583.3 112.1 574.3 120.8 571.3 133.5C570.3 137.6 570.4 135.6 570.2 184.9C570.1 229.2 570.1 231.4 569.8 231.8C569.3 232.3 537.2 232.4 536.7 231.9ZM775.3 232C775 231.9 774.8 231.7 774.7 231.6C774.6 231.4 774.5 198.5 774.5 158.4C774.5 87.4 774.5 85.5 774.8 85.1C775.5 84.5 807.9 84.6 808.3 85.2C808.9 86 808.7 231.5 808.2 231.9C807.7 232.2 776 232.3 775.3 232ZM789.3 67.4C789 67.3 788 67.2 787.2 67C783.5 66.4 779.3 64.1 776.1 61.1C770.8 56 768.5 47.9 770.3 40.7C773.5 27.7 788.9 20.5 800.8 26.5C806.6 29.4 810.5 34 812.5 40.3C813.3 43.2 813.4 48.3 812.6 51.2C810.1 59.3 804 65.1 795.9 66.9C794.4 67.3 790.3 67.6 789.3 67.4ZM432.5 77.2A84.1 80.9 0 0 1 516.7 158.1L516.7 232L484.2 232L484.2 220.9A81.9 80.9 0 1 1 432.5 77.2ZM432.5 109.7A49.4 48.4 0 1 0 432.5 206.5A49.4 48.4 0 1 0 432.5 109.7Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><defs><linearGradient id="l" x1="0" y1="24" x2="0" y2="232" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2c78fd"/><stop offset="1" stop-color="#7343fe"/></linearGradient><linearGradient id="r" x1="0" y1="24" x2="0" y2="232" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fe5292"/><stop offset="1" stop-color="#ff9a46"/></linearGradient><linearGradient id="b" x1="64" y1="0" x2="192" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8145ff"/><stop offset="1" stop-color="#fe5292"/></linearGradient></defs><rect x="43" y="24" width="57" height="208" rx="18" fill="url(#l)"/><rect x="156" y="24" width="57" height="208" rx="18" fill="url(#r)"/><rect x="67" y="107" width="122" height="43" rx="14" fill="url(#b)"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="43 24 991.1 293.5"><defs><linearGradient id="l" x1="0" y1="24" x2="0" y2="232" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2c78fd"/><stop offset="1" stop-color="#7343fe"/></linearGradient><linearGradient id="r" x1="0" y1="24" x2="0" y2="232" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fe5292"/><stop offset="1" stop-color="#ff9a46"/></linearGradient><linearGradient id="b" x1="64" y1="0" x2="192" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8145ff"/><stop offset="1" stop-color="#fe5292"/></linearGradient></defs><rect x="43" y="24" width="57" height="208" rx="18" fill="url(#l)"/><rect x="156" y="24" width="57" height="208" rx="18" fill="url(#r)"/><rect x="67" y="107" width="122" height="43" rx="14" fill="url(#b)"/><path fill="#0a0a0a" fill-rule="evenodd" d="M957.4 317.3C935 314.4 918.7 300.9 914.8 282C911.5 265.8 919.2 250 936.1 238.5C940.6 235.5 940.6 235.4 937.2 234.7C918.8 230.4 904.1 219.3 895.6 203.4C892.8 198.2 890 190.3 889.1 185.1C888.9 184.1 888.7 183.3 888.7 183.1C888.5 182.5 887.6 176.3 887.4 173.4C886.9 167.6 886.9 85.7 887.5 85.2C888 84.6 920.3 84.6 920.8 85.1C921 85.4 921.1 89 921.1 129C921.2 177.2 921.1 173.9 922.4 178.9C926.6 195.4 940 206.5 957.2 207.7C977.4 209.1 994.7 196.5 999.5 176.7C1000.8 171.3 1000.8 174.4 1000.8 127.5C1000.9 88.2 1000.9 85.2 1001.2 85C1001.4 84.8 1005 84.8 1017.6 84.8C1033.7 84.8 1033.7 84.8 1034 85.3C1034.5 86 1034.3 239.4 1033.8 244.1C1031.8 263.7 1027.6 275.8 1018 289.3C1004.4 308.5 979.3 320.1 957.4 317.3ZM970.7 289C979.9 287.4 988.4 281.2 993.7 272.2C996.4 267.8 998.8 260 999.7 253.2C1000.2 249.7 1000.5 220.8 1000.1 220C999.8 219.5 999.8 219.5 997.1 221.6C991.4 225.9 984 230.4 978 233.2C956.7 243.2 947.5 250.9 944 261.7C941.2 270.2 943.8 279 950.5 284.2C954 286.9 957.8 288.4 963.4 289.2C964.9 289.5 968.5 289.3 970.7 289ZM867 235.3C855.2 234.4 843.9 227.7 837.9 218.1C833 210.1 830.6 202.2 829.4 190.4C829.1 187.4 829 26.8 829.3 26C829.3 25.9 829.5 25.7 829.7 25.6C830.5 25.4 862.5 25.4 862.8 25.7C863.1 25.9 863.1 33.7 863.1 105.6C863.1 189.4 863.1 187.7 864 192.3C865.8 201.5 869.8 205.9 876.6 206.1C878.9 206.1 878.8 206 880 208.8C882.2 213.4 886.5 220.3 890.1 224.8C893.1 228.6 893.1 228.5 887.4 231.3C880.9 234.5 874 235.8 867 235.3ZM276 231.9C275.6 231.6 275.6 231.6 275.6 178.5C275.6 126.2 275.6 125.4 275.2 125.3C275 125.1 271.9 125.1 266.4 125.1C259.4 125.1 257.8 125 257.5 124.8C256.9 124.4 256.9 98.9 257.4 98.3C257.7 98 258.4 98 266.4 97.9C273.7 97.9 275 97.8 275.3 97.6C275.5 97.3 275.6 96.4 275.7 88.6C275.8 76.1 276.4 70.6 278.5 63.4C282.9 47.5 293.8 35.1 309.1 28.5C312.1 27.2 319.4 25.2 322.9 24.6C328.4 23.8 346.7 24 347.7 24.9C348.2 25.3 348.2 53.2 347.7 53.7C347.4 53.9 345.7 53.9 338.2 53.9C328.2 53.9 327.9 53.9 324 55.3C317.6 57.4 312.2 63.5 310.5 70.5C309.4 74.6 309.4 75.2 309.3 86.3C309.1 96.3 309.2 97.4 309.7 97.7C309.8 97.8 318.2 97.9 328.4 97.9C344.1 97.9 347 97.9 347.3 98.2C347.8 98.5 347.9 124.2 347.5 124.7C347.3 124.9 343.5 125 328.4 125.1C314.1 125.1 309.6 125.2 309.4 125.4C309.2 125.6 309.2 137.6 309.2 178.6C309.1 230.9 309.1 231.7 308.8 231.9C308.2 232.3 276.6 232.3 276 231.9ZM536.7 231.9C536.2 231.4 536.4 143.4 536.9 139.3C538 129.6 540 122.9 544.2 114.7C555.4 92.8 580.1 79.6 604.6 82.7C621.1 84.7 633.2 92 643.3 105.7C644.5 107.3 644.7 107.3 645.8 105.9C652.4 97.2 657.9 92.6 666.5 88.3C686.2 78.5 711.2 80.9 728.5 94.3C737.2 101 743 108.3 747.4 118C750.8 125.6 752.3 131.3 753.2 140.1C753.7 145.3 753.8 231.4 753.2 231.8C752.8 232.2 720.6 232.2 720.3 231.8C720.1 231.6 720 222.9 719.9 185.2C719.8 144.2 719.8 138.6 719.5 137.2C716.7 122.3 707.5 112.3 694.7 110.5C679.5 108.3 666 118 661.6 134C660.3 139 660.4 134.7 660.3 185.7C660.2 223 660.1 231.6 659.9 231.8C659.7 232.1 629.6 232.3 628.2 232.1C627.9 232 627.5 231.9 627.3 231.7C627.1 231.4 627 226.6 627 186.6C627 161.1 626.9 140.8 626.8 139.5C625.5 121.3 611.2 108.3 594.9 110.5C583.3 112.1 574.3 120.8 571.3 133.5C570.3 137.6 570.4 135.6 570.2 184.9C570.1 229.2 570.1 231.4 569.8 231.8C569.3 232.3 537.2 232.4 536.7 231.9ZM775.3 232C775 231.9 774.8 231.7 774.7 231.6C774.6 231.4 774.5 198.5 774.5 158.4C774.5 87.4 774.5 85.5 774.8 85.1C775.5 84.5 807.9 84.6 808.3 85.2C808.9 86 808.7 231.5 808.2 231.9C807.7 232.2 776 232.3 775.3 232ZM789.3 67.4C789 67.3 788 67.2 787.2 67C783.5 66.4 779.3 64.1 776.1 61.1C770.8 56 768.5 47.9 770.3 40.7C773.5 27.7 788.9 20.5 800.8 26.5C806.6 29.4 810.5 34 812.5 40.3C813.3 43.2 813.4 48.3 812.6 51.2C810.1 59.3 804 65.1 795.9 66.9C794.4 67.3 790.3 67.6 789.3 67.4ZM432.5 77.2A84.1 80.9 0 0 1 516.7 158.1L516.7 232L484.2 232L484.2 220.9A81.9 80.9 0 1 1 432.5 77.2ZM432.5 109.7A49.4 48.4 0 1 0 432.5 206.5A49.4 48.4 0 1 0 432.5 109.7Z"/></svg>
|
package/family/host.svg
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="66 66 380 380"><defs><linearGradient id="sky" x1="96" y1="76" x2="416" y2="436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#194ff7"/><stop offset="1" stop-color="#02b4ff"/></linearGradient><linearGradient id="acc" x1="150" y1="160" x2="362" y2="352" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#194ff7"/><stop offset="1" stop-color="#02b4ff"/></linearGradient></defs><circle cx="256" cy="256" r="190" fill="url(#sky)"/><g transform="translate(0 6)"><g fill="#fff"><path d="M158.7 331.3A262.3 262.3 0 0 0 353.3 331.3L334 283H178Z"/><circle cx="178" cy="283" r="52"/><circle cx="334" cy="283" r="52"/><circle cx="214" cy="238" r="54"/><circle cx="288" cy="222" r="72"/><rect x="178" y="232" width="156" height="100"/></g><path fill="none" stroke="url(#acc)" stroke-width="24" stroke-linecap="round" stroke-linejoin="round" d="M256 302V234M224 266L256 234L288 266"/></g></svg>
|
package/family/mail.svg
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="66 66 380 380"><defs><linearGradient id="sky" x1="96" y1="76" x2="416" y2="436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f61f8e"/><stop offset="1" stop-color="#ff5cb8"/></linearGradient><linearGradient id="acc" x1="150" y1="160" x2="362" y2="352" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f61f8e"/><stop offset="1" stop-color="#ff5cb8"/></linearGradient></defs><circle cx="256" cy="256" r="190" fill="url(#sky)"/><rect x="128" y="162" width="256" height="188" rx="56" fill="#fff"/><path fill="url(#acc)" d="M182 194H330A22 22 0 0 1 341.82 234.56L271.04 279.62A28 28 0 0 1 240.96 279.62L170.18 234.56A22 22 0 0 1 182 194Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="66 66 380 380"><defs><linearGradient id="sky" x1="96" y1="76" x2="416" y2="436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4732ed"/><stop offset="1" stop-color="#b03cff"/></linearGradient><linearGradient id="acc" x1="150" y1="160" x2="362" y2="352" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4732ed"/><stop offset="1" stop-color="#b03cff"/></linearGradient></defs><circle cx="256" cy="256" r="190" fill="url(#sky)"/><path fill="#fff" d="M168 160H222A24 24 0 0 1 240 168L258 188H344A40 40 0 0 1 384 228V316A40 40 0 0 1 344 356H168A40 40 0 0 1 128 316V200A40 40 0 0 1 168 160Z"/><path fill="none" stroke="url(#acc)" stroke-width="30" stroke-linecap="round" stroke-linejoin="round" d="M212 272L244 302L304 240"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="66 66 380 380"><defs><linearGradient id="sky" x1="96" y1="76" x2="416" y2="436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#199f62"/><stop offset="1" stop-color="#56db29"/></linearGradient><linearGradient id="acc" x1="150" y1="160" x2="362" y2="352" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#199f62"/><stop offset="1" stop-color="#56db29"/></linearGradient></defs><circle cx="256" cy="256" r="190" fill="url(#sky)"/><rect x="128" y="160" width="256" height="192" rx="48" fill="#fff"/><path fill="none" stroke="url(#acc)" stroke-width="26" stroke-linecap="round" stroke-linejoin="round" d="M164 262H206L230 214L262 304L288 248H348"/></svg>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hgdc/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.0",
|
|
4
4
|
"description": "Interface de la H family : jetons de la DA, thèmes, polices et composants.",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"homepage": "https://github.com/hugogebel-boop/hgdc-kit/tree/main/packages/ui#readme",
|
|
@@ -17,7 +17,8 @@
|
|
|
17
17
|
"files": [
|
|
18
18
|
"dist",
|
|
19
19
|
"styles.css",
|
|
20
|
-
"email-icons"
|
|
20
|
+
"email-icons",
|
|
21
|
+
"family"
|
|
21
22
|
],
|
|
22
23
|
"sideEffects": [
|
|
23
24
|
"*.css"
|
|
@@ -26,6 +27,7 @@
|
|
|
26
27
|
"./styles.css": "./styles.css",
|
|
27
28
|
"./package.json": "./package.json",
|
|
28
29
|
"./email-icons/*": "./email-icons/*",
|
|
30
|
+
"./family/*": "./family/*",
|
|
29
31
|
"./*": {
|
|
30
32
|
"types": "./dist/*.d.ts",
|
|
31
33
|
"default": "./dist/*.js"
|
package/styles.css
CHANGED
|
@@ -216,6 +216,31 @@
|
|
|
216
216
|
--inverse: oklch(0.1 0 0);
|
|
217
217
|
}
|
|
218
218
|
|
|
219
|
+
/* Identité H family, la même en clair et en sombre. Dégradé de chaque pastille produit
|
|
220
|
+
(`ProductBadge`, `family/<mot>.svg`) et palette du H tricolore. Réservés aux visuels de marque
|
|
221
|
+
(pastille, carte de produit), jamais au chrome. Couleurs pleines ; pour éclaircir, mélanger au
|
|
222
|
+
blanc `in oklab`, jamais `in oklch` (la teinte du blanc s'y mêle, tout vire au rose). */
|
|
223
|
+
:root {
|
|
224
|
+
--product-account-from: #ff3b47;
|
|
225
|
+
--product-account-to: #ff6352;
|
|
226
|
+
--product-host-from: #194ff7;
|
|
227
|
+
--product-host-to: #02b4ff;
|
|
228
|
+
--product-mail-from: #f61f8e;
|
|
229
|
+
--product-mail-to: #ff5cb8;
|
|
230
|
+
--product-portal-from: #4732ed;
|
|
231
|
+
--product-portal-to: #b03cff;
|
|
232
|
+
--product-status-from: #199f62;
|
|
233
|
+
--product-status-to: #56db29;
|
|
234
|
+
--product-analytics-from: #fe5623;
|
|
235
|
+
--product-analytics-to: #ffb003;
|
|
236
|
+
--product-docs-from: #1bb9cf;
|
|
237
|
+
--product-docs-to: #13e4c8;
|
|
238
|
+
--glow-blue: #2c78fd;
|
|
239
|
+
--glow-violet: #7343fe;
|
|
240
|
+
--glow-pink: #fe5292;
|
|
241
|
+
--glow-orange: #ff9a46;
|
|
242
|
+
}
|
|
243
|
+
|
|
219
244
|
@layer base {
|
|
220
245
|
/* Une grille sans colonnes déclarées a une seule piste qui ne s'élargit jamais pour un
|
|
221
246
|
texte long : sans ça, `min-width: auto` pousse la page en défilement horizontal sur
|