import { Meta, Preview, Props, Story } from "@storybook/addon-docs/blocks";
import { Paper } from "./Paper";
import { Box } from "../Box";
import { Button, BUTTON_VARIANT } from "../Button";
import { Checkbox } from "../Checkbox";
import { ICON_TYPE } from "../Icon";
import { Markdown } from "../Markdown";

<Meta title="Components/Data/Paper" component={Paper} />

# Paper

export const markdownContent = `
# A.9.1.1 Access control policy
An access control policy shall be established, documented and reviewed based on business and information security requirements.
## [Access Control Review Policy](#)
The Security Officer shall assess and prioritize the risks posed by business processes requiring third-party access to Teapots's
information and information systems, consistent with the Risk Management Framework, to minimize, monitor, and measure the
likelihood and impact of unauthorized or inappropriate access. If the current risk analysis does not sufficiently reflect the
appropriate risks, the Security Officer shall update it. Compensating controls derived from the risk analysis must be implemented
prior to provisioning access.
`;

<Preview>
  <Story name="Paper">
    <Paper>
      <Paper.Toolbar>
        <Box>
          <Checkbox className="inline-block mr-6" label="Hide mappings" />
          <Checkbox
            className="inline-block mr-6"
            label="Hide implementation"
            checked
          />
          <Checkbox className="inline-block mr-6" label="Hide empty domains" />
        </Box>
        <Button
          variant={BUTTON_VARIANT.SECONDARY}
          icon={ICON_TYPE.FILE_PDF}
          className="ml-auto"
        >
          Print to PDF
        </Button>
      </Paper.Toolbar>
      <Paper.Content>
        <Markdown>{markdownContent}</Markdown>
      </Paper.Content>
    </Paper>
  </Story>
</Preview>

## Custom Props

This component uses `React.HTMLProps<HTMLDivElement>` and does not have any custom props. Full list of props <a href="#all-props">below</a>.

## Demos

### Without Toolbar

<Preview>
  <Story name="Paper without toolbar">
    <Paper>
      <Paper.Content>
        This is the Paper component without a toolbar.
      </Paper.Content>
    </Paper>
  </Story>
</Preview>

## All Props

<Props of={Paper} />