let componentsData;
try {
    componentsData = require('../../../../dist/components_json.json');
}
catch (error) {
    console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');
    componentsData = {};
}
import { withComponentControls, toKebabCase } from "../../../utils/utils";
const elementTag = 'spw-box';
const argTypes = withComponentControls(componentsData, { tag: elementTag });
const meta = {
    title: 'Composants/Box',
    component: elementTag,
    argTypes,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: `

La Box est un conteneur générique servant de structure d'accueil pour différents types de contenus. Elle permet de cadrer visuellement une information, de la détacher du reste de la page et de faciliter la lecture, sans imposer de contenu ou de hiérarchie prédéfinie.

## Styles

- **Avec fond** : fond blanc, coins arrondis et ombre légère (has-radius + has-shadow + padding). Détache clairement le contenu du reste de la page et crée un point de focalisation visuel.
- **Sans fond** : sans fond, sans ombre, sans bord arrondi, sans padding. S'intègre directement dans le flux de la page. À utiliser quand le cadre visuel n'est pas nécessaire mais qu'une structuration logique reste utile.

## Fonctionnalités

- Padding configurable (none, small, medium, large)
- Ombre portée et border-radius optionnels
- Position sticky à partir du breakpoint lg (1024px)
- Mode collapsible avec animation et breakpoint configurable (sm, md, lg, xl, xxl, always)
- Slot header pour le titre, toujours visible même en mode collapsible
- Icône chevron animée au collapse/expand

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/225c31-box)
        `,
            },
        },
    },
};
export default meta;
const Template = args => {
    const element = document.createElement(elementTag);
    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
    const masterProps = controls.__realProps || Object.keys(controls);
    Object.entries(args).forEach(([key, val]) => {
        if (masterProps.includes(key)) {
            element.setAttribute(toKebabCase(key), val);
        }
        else if (key.startsWith('on')) {
            element.addEventListener(key.substring(2).toLowerCase(), val);
        }
    });
    element.innerHTML = /* HTML */ `
    <div slot="header">
      <h2 class="spw-ds-typography-heading-03 mb-0">Titre de la box</h2>
    </div>
    <div class="spw-ds-typography-body-01 mt-3">
      <p class="mb-3">Contenu de la box. Ce composant est un conteneur polyvalent qui peut accueillir n'importe quel type de contenu : texte, listes, composants, etc.</p>
      <spw-group orientation="vertical">
        <spw-link variant="primary" icon="fa-arrow-right" icon-position="right" href="#">Lien d'action</spw-link>
        <spw-link variant="primary" icon="fa-arrow-right" icon-position="right" href="#">Lien d'action</spw-link>
      </spw-group>
    </div>
  `;
    return element;
};
export const Default = Template.bind({});
Default.args = {
    padding: 'medium',
    hasRadius: true,
    hasShadow: true,
};
Default.parameters = {
    docs: {
        description: {
            story: `Box de base avec padding medium, border-radius et ombre portée. Cas d'usage type : widget de sidebar, encart de contenu secondaire.`,
        },
    },
};
export const Styles = () => {
    const container = document.createElement('div');
    container.style.cssText = 'display: flex; flex-direction: column; gap: 24px;';
    container.innerHTML = /* HTML */ `
    <spw-box padding="medium" has-radius="true" has-shadow="true">
      <div slot="header">
        <h3 class="spw-ds-typography-heading-04 mb-0">Style avec fond</h3>
      </div>
      <div class="mt-3">
        <p class="spw-ds-typography-body-01 mb-3">
          Fond blanc, coins arrondis et ombre légère. Détache clairement le contenu du reste de la page et crée un point de focalisation visuel.
        </p>
        <spw-group orientation="vertical">
          <spw-link variant="primary" icon="fa-arrow-right" icon-position="right" href="#">Lien d'action</spw-link>
          <spw-link variant="primary" icon="fa-arrow-right" icon-position="right" href="#">Lien d'action</spw-link>
        </spw-group>
      </div>
    </spw-box>
    <spw-box>
      <div slot="header">
        <h3 class="spw-ds-typography-heading-04 mb-0">Style sans fond</h3>
      </div>
      <div class="mt-3">
        <p class="spw-ds-typography-body-01 mb-3">
          Sans fond, sans ombre, sans border-radius, sans padding. S'intègre directement dans le flux de la page. À utiliser quand le cadre visuel n'est pas nécessaire mais qu'une
          structuration logique reste utile.
        </p>
        <spw-group orientation="vertical">
          <spw-link variant="primary" icon="fa-arrow-right" icon-position="right" href="#">Lien d'action</spw-link>
          <spw-link variant="primary" icon="fa-arrow-right" icon-position="right" href="#">Lien d'action</spw-link>
        </spw-group>
      </div>
    </spw-box>
  `;
    return container;
};
Styles.parameters = {
    docs: {
        description: {
            story: `Les deux styles principaux de la box. Style avec fond (has-radius + has-shadow + padding) : crée un point de focalisation visuel fort. Style sans fond (aucune prop de décoration) : structuration logique discrète, intégrée dans le flux de la page.`,
        },
    },
};
export const PaddingVariants = () => {
    const container = document.createElement('div');
    container.style.cssText = 'display: flex; flex-direction: column; gap: 16px;';
    container.innerHTML = /* HTML */ `
    <spw-box has-radius="true" has-shadow="false" padding="none">
      <div slot="header"><h3 class="spw-ds-typography-heading-04 mb-0">Padding none (défaut)</h3></div>
      <p class="spw-ds-typography-body-01">Aucun padding interne. Utile quand le contenu gère lui-même son espacement.</p>
    </spw-box>
    <spw-box has-radius="true" has-shadow="true" padding="small">
      <div slot="header"><h3 class="spw-ds-typography-heading-04 mb-0">Padding small — 16px</h3></div>
      <p class="spw-ds-typography-body-01">Padding compact pour les widgets ou encarts de taille réduite.</p>
    </spw-box>
    <spw-box has-radius="true" has-shadow="true" padding="medium">
      <div slot="header"><h3 class="spw-ds-typography-heading-04 mb-0">Padding medium — 24px</h3></div>
      <p class="spw-ds-typography-body-01">Padding standard, recommandé pour la majorité des cas d'usage.</p>
    </spw-box>
    <spw-box has-radius="true" has-shadow="true" padding="large">
      <div slot="header"><h3 class="spw-ds-typography-heading-04 mb-0">Padding large — 48px</h3></div>
      <p class="spw-ds-typography-body-01">Padding généreux pour des sections mises en avant ou des contenus éditoriaux.</p>
    </spw-box>
  `;
    return container;
};
PaddingVariants.parameters = {
    docs: {
        description: {
            story: `Les quatre valeurs de padding disponibles : none, small (16px), medium (24px), large (48px).`,
        },
    },
};
export const WithShadowAndRadius = () => {
    const container = document.createElement('div');
    container.style.cssText = 'display: grid; grid-template-columns: 1fr 1fr; gap: 16px;';
    container.innerHTML = /* HTML */ `
    <spw-box padding="medium">
      <div slot="header"><h3 class="spw-ds-typography-heading-04 mb-0">Sans shadow ni radius</h3></div>
      <p class="spw-ds-typography-body-01">Box sans décoration visuelle. Le contenu définit ses propres bordures.</p>
    </spw-box>
    <spw-box padding="medium" has-shadow="true">
      <div slot="header"><h3 class="spw-ds-typography-heading-04 mb-0">Shadow seul</h3></div>
      <p class="spw-ds-typography-body-01">Ombre portée sans border-radius.</p>
    </spw-box>
    <spw-box padding="medium" has-radius="true" has-shadow="true">
      <div slot="header"><h3 class="spw-ds-typography-heading-04 mb-0">Shadow + Radius</h3></div>
      <p class="spw-ds-typography-body-01">Combinaison recommandée pour les widgets de sidebar et encarts.</p>
    </spw-box>
  `;
    return container;
};
WithShadowAndRadius.parameters = {
    docs: {
        description: {
            story: `Combinaisons de has-shadow et has-radius. La combinaison shadow + radius est recommandée pour les widgets de sidebar.`,
        },
    },
};
export const Collapsible = () => {
    const container = document.createElement('div');
    container.style.cssText = 'display: flex; flex-direction: column; gap: 16px; max-width: 400px;';
    container.innerHTML = /* HTML */ `
    <spw-box padding="medium" has-radius="true" has-shadow="true" is-collapsible="true" collapsible-breakpoint="always">
      <div slot="header">
        <h3 class="spw-ds-typography-heading-04 mb-0">Toujours collapsible</h3>
      </div>
      <div class="mt-3">
        <p class="spw-ds-typography-body-01 mb-3">Ce contenu est collapsible quelle que soit la largeur du viewport.</p>
        <spw-group orientation="vertical">
          <spw-link variant="primary" icon="fa-arrow-right" icon-position="right" href="#">Lien d'action</spw-link>
          <spw-link variant="primary" icon="fa-arrow-right" icon-position="right" href="#">Lien d'action</spw-link>
        </spw-group>
      </div>
    </spw-box>
    <spw-box padding="medium" has-radius="true" has-shadow="true" is-collapsible="true" collapsible-breakpoint="md">
      <div slot="header">
        <h3 class="spw-ds-typography-heading-04 mb-0">Collapsible sur mobile</h3>
      </div>
      <div class="mt-3">
        <p class="spw-ds-typography-body-01 mb-3">Ce contenu est collapsible uniquement en dessous de 768px. Au-dessus, il est toujours visible.</p>
        <spw-group orientation="vertical">
          <spw-link variant="primary" icon="fa-arrow-right" icon-position="right" href="#">Lien d'action</spw-link>
          <spw-link variant="primary" icon="fa-arrow-right" icon-position="right" href="#">Lien d'action</spw-link>
        </spw-group>
      </div>
    </spw-box>
  `;
    return container;
};
Collapsible.parameters = {
    docs: {
        description: {
            story: `Mode collapsible avec animation chevron. always : collapsible quelle que soit la résolution. md (768px) : collapsible uniquement sur mobile, contenu toujours visible au-dessus.`,
        },
    },
};
export const StickyWithContent = () => {
    const container = document.createElement('div');
    container.innerHTML = /* HTML */ `
    <div style="display: flex; gap: 24px; align-items: flex-start;">
      <div style="flex: 1; min-width: 0;">
        <p class="spw-ds-typography-body-01 mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut diam. Ut
          malesuada ante et scelerisque eleifend.
        </p>
        <p class="spw-ds-typography-body-01 mb-4">
          Curabitur luctus faucibus pretium. Praesent lacinia laoreet ipsum, at mattis magna cursus non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet
          diam.
        </p>
        <p class="spw-ds-typography-body-01 mb-4">
          Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut diam. Ut malesuada ante et scelerisque eleifend. Curabitur luctus faucibus pretium.
        </p>
        <p class="spw-ds-typography-body-01 mb-4">Praesent lacinia laoreet ipsum, at mattis magna cursus non. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p class="spw-ds-typography-body-01 mb-4">
          Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut diam. Ut malesuada ante et scelerisque eleifend. Curabitur luctus
          faucibus pretium.
        </p>
      </div>
      <div style="width: 280px; flex-shrink: 0;">
        <spw-box padding="medium" has-radius="true" has-shadow="true" is-sticky="true" sticky-top="24px">
          <div slot="header">
            <h3 class="spw-ds-typography-heading-04 mb-0">Box sticky</h3>
          </div>
          <div class="mt-3">
            <p class="spw-ds-typography-body-01 mb-3">Cette box reste visible lors du scroll à partir du breakpoint lg.</p>
            <spw-group orientation="vertical">
              <spw-link variant="primary" icon="fa-phone" icon-position="left" href="tel:081654449">081 / 65 44 49</spw-link>
              <spw-link variant="primary" icon="fa-envelope" icon-position="left" href="mailto:mail@mail.be">mail@mail.be</spw-link>
            </spw-group>
            <spw-button is-full-width="true" class="mt-4" variant="primary">Formulaire en ligne</spw-button>
          </div>
        </spw-box>
      </div>
    </div>
  `;
    return container;
};
StickyWithContent.parameters = {
    docs: {
        description: {
            story: `Box sticky dans un layout deux colonnes. La box reste ancrée lors du scroll à partir du breakpoint lg (1024px). Cas d'usage : sidebar de contact, sommaire, actions rapides. Utiliser sticky-top pour ajuster la position selon la hauteur du header fixe de la page.`,
        },
    },
};
export const SidebarPattern = () => {
    const container = document.createElement('div');
    container.innerHTML = /* HTML */ `
    <div style="display: flex; flex-direction: column; gap: 16px; max-width: 320px;">
      <spw-box padding="medium" has-radius="true" has-shadow="true">
        <div slot="header">
          <h3 class="spw-ds-typography-heading-04 mb-0">Sommaire</h3>
        </div>
        <div class="mt-3">
          <spw-group orientation="vertical">
            <spw-link variant="primary" href="#">Introduction</spw-link>
            <spw-link variant="primary" href="#">Premiers pas</spw-link>
            <spw-link variant="primary" href="#">Fonctionnalités avancées</spw-link>
            <spw-link variant="primary" href="#">FAQ</spw-link>
          </spw-group>
        </div>
      </spw-box>
      <spw-box padding="medium" has-radius="true" has-shadow="true" is-collapsible="true" collapsible-breakpoint="always">
        <div slot="header">
          <h3 class="spw-ds-typography-heading-04 mb-0">Besoin d'aide ?</h3>
        </div>
        <div class="mt-3">
          <p class="spw-ds-typography-body-01 mb-3">Contactez-nous si vous ne trouvez pas la réponse à votre question.</p>
          <spw-separator class="my-3"></spw-separator>
          <spw-group orientation="vertical">
            <spw-link variant="primary" icon="fa-phone" icon-position="left" href="tel:081654449">081 / 65 44 49</spw-link>
            <spw-link variant="primary" icon="fa-envelope" icon-position="left" href="mailto:mail@mail.be">mail@mail.be</spw-link>
            <spw-link variant="primary" icon="fa-globe" icon-position="left" href="#">www.wallonie.be</spw-link>
          </spw-group>
          <spw-button is-full-width="true" class="mt-4" variant="primary">Formulaire en ligne</spw-button>
        </div>
      </spw-box>
    </div>
  `;
    return container;
};
SidebarPattern.parameters = {
    docs: {
        description: {
            story: `Pattern sidebar avec deux box : une pour la navigation (sommaire) et une pour les informations de contact collapsible.`,
        },
    },
};
