import {
  Meta,
  Preview,
  Props,
  Story,
  SourceState,
} from "@storybook/addon-docs/blocks";
import { ComponentHeading } from "../../storybook-components";
import { Markdown } from "./Markdown";

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

<ComponentHeading
  componentName="Markdown"
  description="Renders markdown as html"
  sourcePath="src/components/Markdown/Markdown.tsx"
/>

```jsx
import { Markdown } from "@aptible/arrow-ds";
```

<Preview>
  <Story name="Markdown">
    {() => {
      const content = `
[Control: Third Party Access Review Control](/)
## Third Party Access Reviews Procedure
### Review Access Controls
**To be performed at the following times:**
* Whenever an ISMS Role Membership is added, updated, or deleted
* Whenever an Access Control Review is due (Every 7 months)
**In accordance with the following requirements:**
**1. Review Access Grants to Information Systems**
The Security Team shall ensure that a review of access grants to
information systems is completed.
`;
      return <Markdown>{content}</Markdown>;
    }}
  </Story>
</Preview>

## Props

<Props of={Markdown} />

## Demos

### Plain text

Using the `renderPlainText` prop, you can strip out most typographic styles (links are left intact).

<Preview withSource={SourceState.OPEN}>
  <Story name="Markdown plain">
    {() => {
      const content = `
[Control: Third Party Access Review Control](/)
## Third Party Access Reviews Procedure
### Review Access Controls
**To be performed at the following times:**
* Whenever an ISMS Role Membership is added, updated, or deleted
* Whenever an Access Control Review is due (Every 7 months)
**In accordance with the following requirements:**
**1. Review Access Grants to Information Systems**
The Security Team shall ensure that a review of access grants to
information systems is completed.
`;
      return <Markdown renderPlainText>{content}</Markdown>;
    }}
  </Story>
</Preview>