import Layout from '../../components/Layout'
import { ComponentsSidebar } from '../../sidebars'
import { Playground } from '../../components/Playground';
import { Code, Heading, Paragraph } from '@knkui/typography';

export default function Divider() {
    return (
        <Layout
            title="Divider"
            showHero
            description="A Visual Divider - can be used to indicate a PageBreak in a RichText Editor"
            sidebar={ComponentsSidebar}
        >
            <Heading size={800}>Default Divider</Heading>
            <Playground
                codeText={`
                <Divider />
                `}
            />

            <Heading size={800}>Divider with Text</Heading>
            <Playground
                codeText={`
                <Divider>PageBreak</Divider>
                `}
            />

            <Heading size={800}>Vertical Divider</Heading>
            <Paragraph>Vertical dividers give you more tools for unique layouts.</Paragraph>
            <Playground
                codeText={`
                <div>
                
                Hello <Divider is="span" vertical /> World
                </div>
                `}
            />
            <Heading size={800}>Accessibility</Heading>
            <Paragraph>
                By default, <Code>Divider</Code> components are assigned the <a href="https://www.w3.org/WAI/standards-guidelines/aria/" target="_blank">WAI-ARIA</a> role
                of <a href="https://www.w3.org/TR/wai-aria/#separator" target="_blank">separator</a> which denotes that the divider “separates and distinguishes sections of content or groups of menu items.”
            </Paragraph>
            <Paragraph>
                However, sometimes a divider is just a way to make an interface look nice. In those cases, the role of presentation should be used which denotes “an element whose implicit native role semantics will not be mapped to the accessibility API.”
            </Paragraph>
            <Paragraph>
                To override the default separator role in a <Code>Divider</Code>, simply add a <Code>presentation</Code> prop to your component.
            </Paragraph>
        </Layout>
    )
}