Dinawo
133feff75d
6 chantiers v1 sur 7 livrés (DataTable refonte reportée car nécessite 2-3j en propre — TanStack Table + virtualisation + filter builder). v1-A — Tests (4 → 22 fichiers) : - Avatar, AvatarGroup, UserCard, MetricCard, ProfileHeader, Tooltip, Sheet, Drawer, Slider, ToggleGroup, Tabs, Pagination, Accordion, Switch, Badge, ConfirmDialog, Popover, Menu, Text, PricingCard, FeatureCard, Toast — chacun avec render + clavier + axe-core. v1-B — Storybook (7 → 23 fichiers) : - Avatar, UserCard, ProfileHeader, MetricCard, PricingCard, FeatureCard, Sheet (4 sides), HoverCard, Slider, ToggleGroup, Menu+ContextMenu, Toast (avec démo "Empiler 5"), Tabs, Pagination, Accordion, Badge. v1-D — Visual regression Playwright : - playwright.config.ts (light + dark, threshold strict 0.2) - e2e/visual.spec.ts (20 stories critiques) - Step CI + upload report en cas de fail v1-E — Site doc Starlight rempli : - 11 pages composants détaillées (Button, Input, Tooltip, Dialog, Toast, Avatar, ThemePicker, MetricCard, PricingCard, ToggleGroup, Slider) avec API, anatomie, do/don't, A11y. v1-F — Publishing Verdaccio : - verdaccio/config.yaml, docker-compose.verdaccio.yml, .npmrc - README setup local + déploiement prod + backups + sécurité v1-G — Gouvernance : - LICENSE, CONTRIBUTING.md, CODE_OF_CONDUCT.md, SECURITY.md - CODEOWNERS, PR template, 3 issue templates (bug/feature/rfc) Bug fix bonus : tooltip dark mode (text-primary comme bg + text-inverse comme texte → blanc-sur-blanc invisible). Remplacé par neutral-900/0 en light + bg-raised/text-primary en dark. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react";
|
|
import { PricingCard, Button } from "@managemate/react";
|
|
|
|
const meta = {
|
|
title: "Marketing/PricingCard",
|
|
component: PricingCard,
|
|
tags: ["autodocs"],
|
|
} satisfies Meta<typeof PricingCard>;
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
const features = [
|
|
{ label: "Jusqu'à 10 collaborateurs" },
|
|
{ label: "Gestion congés" },
|
|
{ label: "Bulletins simplifiés" },
|
|
{ label: "Support email" },
|
|
{ label: "API & webhooks", included: false },
|
|
{ label: "SSO", included: false },
|
|
];
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
name: "Starter",
|
|
description: "Pour les TPE qui démarrent.",
|
|
price: "9 €",
|
|
pricePeriod: "/utilisateur/mois",
|
|
features,
|
|
cta: <Button variant="tertiary" block>Démarrer l'essai</Button>,
|
|
},
|
|
};
|
|
|
|
export const Highlighted: Story = {
|
|
args: {
|
|
name: "Pro",
|
|
description: "Pour les PME en croissance.",
|
|
price: "19 €",
|
|
pricePeriod: "/utilisateur/mois",
|
|
highlighted: true,
|
|
badge: "Populaire",
|
|
features: features.map((f) => ({ ...f, included: true })),
|
|
cta: <Button variant="primary" block icon="arrow-right-line" iconPosition="right">Choisir Pro</Button>,
|
|
},
|
|
};
|
|
|
|
export const Trio: Story = {
|
|
render: () => (
|
|
<div className="mmg-grid mmg-grid--gap-md">
|
|
<div className="mmg-col-4"><PricingCard {...Default.args!} /></div>
|
|
<div className="mmg-col-4"><PricingCard {...Highlighted.args!} /></div>
|
|
<div className="mmg-col-4">
|
|
<PricingCard
|
|
name="Enterprise"
|
|
description="Pour les organisations matures."
|
|
price="Sur devis"
|
|
features={[
|
|
{ label: "Tout Pro inclus" },
|
|
{ label: "SLA 99.95%" },
|
|
{ label: "SSO / SAML / SCIM" },
|
|
{ label: "Audit logs" },
|
|
{ label: "TAM dédié" },
|
|
]}
|
|
cta={<Button variant="tertiary" block>Contacter sales</Button>}
|
|
/>
|
|
</div>
|
|
</div>
|
|
),
|
|
};
|