import React from 'react';
import { SkipNav } from '../SkipNav';
import { VerticalNav } from '../VerticalNav';
export default {
  title: 'Patterns/Documentation Page'
};
var navItems = [{
  label: 'Page title',
  url: '#',
  id: 'page-title'
}, {
  label: 'Page heading (h1)',
  selected: true,
  items: [{
    id: 'section-2',
    label: 'Section Heading (h2)',
    url: '#section-heading-h2'
  }, {
    id: 'section-3',
    label: 'Section Heading (h3)',
    url: '#section-heading-h3'
  }, {
    id: 'section-4',
    label: 'Section Heading (h4)',
    url: '#section-heading-h4'
  }]
}, {
  label: 'Page title',
  url: '#',
  id: 'page-title2'
}];
export var DocumentationPage = function DocumentationPage() {
  return /*#__PURE__*/React.createElement("main", {
    className: "ds-base ds-l-container"
  }, /*#__PURE__*/React.createElement(SkipNav, {
    href: "#content"
  }), /*#__PURE__*/React.createElement("div", {
    className: "ds-l-row"
  }, /*#__PURE__*/React.createElement("aside", {
    className: "ds-u-margin-bottom--4 ds-u-md-margin-bottom--0 ds-l-md-col--4 ds-l-lg-col--3"
  }, /*#__PURE__*/React.createElement(VerticalNav, {
    items: navItems
  })), /*#__PURE__*/React.createElement("article", {
    id: "content",
    className: "ds-l-md-col--8 ds-l-lg-col--9"
  }, /*#__PURE__*/React.createElement("h1", {
    className: "ds-h1"
  }, "Page heading (h1)"), /*#__PURE__*/React.createElement("p", {
    className: "ds-text--lead"
  }, "The page heading communicates the main focus of the page. Make your page heading descriptive and keep it succinct."), /*#__PURE__*/React.createElement("h2", {
    className: "ds-h2",
    id: "section-heading-h2"
  }, "Section heading (h2)"), /*#__PURE__*/React.createElement("p", {
    className: "ds-text"
  }, "These headings introduce, respectively, sections and subsections within your body copy. As you create these headings, follow the same guidelines that you use when writing section headings: Be succinct, descriptive, and precise."), /*#__PURE__*/React.createElement("h3", {
    className: "ds-h3",
    id: "section-heading-h3"
  }, "Subsection heading (h3)"), /*#__PURE__*/React.createElement("p", {
    className: "ds-text"
  }, "The particulars of your body copy will be determined by the topic of your page. Regardless of topic, it\u2019s a good practice to follow the inverted pyramid structure when writing copy: Begin with the information that\u2019s most important to your users and then present information of less importance."), /*#__PURE__*/React.createElement("p", {
    className: "ds-text"
  }, "Keep each section and subsection focused \u2014 a good approach is to include one theme (topic) per section."), /*#__PURE__*/React.createElement("h4", {
    className: "ds-h4",
    id: "section-heading-h4"
  }, "Subsection heading (h4)"), /*#__PURE__*/React.createElement("p", {
    className: "ds-text"
  }, "Use the vertical navigation menu to help your users quickly skip to different sections of your page. The menu is best suited to displaying a hierarchy with one to three levels and, as we mentioned, to display the sub-navigation of a given page."))));
};