import { Meta, Story } from '@storybook/addon-docs';
import * as SubHeaderStories from '../SubHeader.stories.ts';
import '@/stories/styles/shared.css';
import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
import {
	AccessibilityGuideLayout,
	CriteriaSection,
	CriteriaCard,
	DemoSection,
	BestPracticesSection,
	ResourcesSection,
} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';

<Meta of={SubHeaderStories} />
<AccessibilityGuideLayout
	componentName="SubHeader"
	iconSrc={AccessibilityIcon}
>
<div class="mt-2">
<p>Rapport d’audit manuel : <a href="/audits/SubHeader.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/942" target="_blank" style={{color:'#0C41BD'}}>issue #942</a>)</p>
	</div>
<CriteriaSection>
<CriteriaCard icon="🧩" title="Niveau de titre configurable via la prop headingLevel">
  <ul>
    <li>Le niveau du titre (h1 à h6) est défini grâce à la propriété <strong>headingLevel</strong> déclarée dans le composant. Si aucune valeur n’est fournie, le composant applique par défaut un titre de niveau h4, défini dans l’implémentation du composant.</li>
      <code>&lt;SubHeader :heading-level="4" /&gt; </code>
    
    <li><strong>Accessibilité</strong> : Permet que la hiérarchie entre les titres soit pertinente (critère 9.1.1 RGAA) </li>
  </ul>
</CriteriaCard>
</CriteriaSection>



</AccessibilityGuideLayout>