import {Meta} from '@storybook/addon-docs';
import {Source} from '@storybook/components';
import {version} from '../../../package.json';
import Breadcrumb from 'breadcrumb/Breadcrumb';
import Link from 'text/Link';
import TextBit from 'text/TextBit';
import Label from 'labels/Label';
import Logo from 'logo/Logo';
import Flex from 'flex/Flex';
import Headline from 'text/Headline';
import Subheadline from 'text/Subheadline';
import OverlayedBox from 'overlayed-box/OverlayedBox';
import DocsHeadline from 'blocks/Headline';
import Text from 'blocks/Text';
import revManifest from 'RevManifest';

<Meta title="Introduction ✏️/Getting Started" />

<Flex justifyContent="center" fullWidth>
  <div className="intro-page-header">
    <Logo className="intro-page-header__logo" />
    <Flex marginTop={['s', , 'm']}>
      <TextBit
        className="intro-page-header__text"
        as="h1"
        size={['small', 'medium', 'large']}
        color="text-black"
        align="center"
      >
        Brainly
        <br /> Style Guide
      </TextBit>
    </Flex>
    <Flex marginTop={['xs', , 's']}>
      <Subheadline
        align="to-center"
        className="intro-page-header__text"
        size={['xsmall', 'small', 'medium']}
      >
        Welcome to the official Brainly style guide! <br />
        This style guide is a part of the <Link
          href="https://design.brainly.com/"
          inherited
          color="text-blue-60"
        >
          Pencil Design System
        </Link> and is used across all language versions of the Brainly website and
        some smaller sites.
      </Subheadline>
    </Flex>
  </div>
</Flex>

<Flex direction="column" alignItems="center" marginTop="xs">
  <Flex direction="column" alignItems="flex-end" style={{position: 'relative'}}>
    <Text size="medium" weight="bold" color="text-gray-40">
      v{version}
    </Text>
  </Flex>
</Flex>

<Flex justifyContent="center" marginTop="s">
  <Breadcrumb
    elements={[
      <Link href="https://brainly.com">brainly.com</Link>,
      <Link href="https://znanija.com">znanija.com</Link>,
      <Link href="https://nosdevoirs.fr">nosdevoirs.fr</Link>,
    ]}
  />
</Flex>

<br />

## How to use it?

React components are stored in `npm` package. To make it work you need to
install package and import styles. You can use CSS from our <Link href="#external-css">cdn</Link> or import `scss` from package itself.

## Installation

```bash
# npm
npm install -S brainly-style-guide

# yarn
yarn add brainly-style-guide
```

## Usage

```jsx
// Following line is required if you don't use css from public cdn
import 'brainly-style-guide/src/sass/main.scss';
import {Button} from 'brainly-style-guide';

const App = () => {
  return (
    <body>
      <Button>I like it!</Button>
    </body>
  );
};
```

## External CSS

In order to use style guide components, you have to include CSS file in the `<head>` of your website:

<Source
  type="html"
  code={`<link href='https://styleguide.brainly.com/${version}/style-guide.css' rel='stylesheet'/>`}
/>

## Icons (SVG sprites)

For our icons include this scripts before the closing `</body>` tag:

<Text transform="uppercase" weight="bold">
  Basic Icons
</Text>

<Source
  type="html"
  code={`<script src='https://styleguide.brainly.com/${revManifest['images/icons.js']}'></script>`}
/>

<Text transform="uppercase" weight="bold">
  Subject Icons
</Text>

<Source
  type="html"
  code={`<script src='https://styleguide.brainly.com/${revManifest['images/subjects-icons.js']}'></script>`}
/>

<Text transform="uppercase" weight="bold">
  Subject Mono Icons
</Text>

<Source
  type="html"
  code={`<script src='https://styleguide.brainly.com/${revManifest['images/subjects-mono-icons.js']}'></script>`}
/>

<Text transform="uppercase" weight="bold">
  Math Symbols
</Text>

<Source
  type="html"
  code={`<script src='https://styleguide.brainly.com/${revManifest['images/math-symbols-icons.js']}'></script>`}
/>

<Text transform="uppercase" weight="bold">
  Mobile Icons
</Text>

<Source
  type="html"
  code={`<script src='https://styleguide.brainly.com/${revManifest['images/mobile-icons.js']}'></script>`}
/>

<DocsHeadline>More</DocsHeadline>

<Text>
  If you'd like to learn more about this project, report a bug or contribute
  check it out on{' '}
  <Link size="small" href="https://github.com/brainly/style-guide">
    github
  </Link>
  .
</Text>
