Sonarsource Component Library & Design System

These components are meant to be shared between the various sonarsource websites.

Getting started

• Install nodejs
• Install yarn

Version

don't forget to change it manualy

Requirements

yarn installs dependencies

Run the styleguide (for development)

yarn start

Build

yarn build

This builds both the component library and the styleguide

yarn build:lib
yarn build:styleguide

Link for local development

yarn link in this folder yarn link marketing-design-system in client project

Package & Deploy

/!\ You need to be logged in change the version in package.json yarn pack yarn publish marketing-design-system-x.y.z.tgz

marketing-design-system

General

We use an augmented GitHub markdown syntax:

• general: https://guides.github.com/features/mastering-markdown/
• general: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
• linebreaks: https://gist.github.com/shaunlebron/746476e6e7a4d698b373

The first time

• Install nodejs, v8.11.3 not 10, which is the latest.
• Install https://yarnpkg.com/en
• Run the following command from the project root folder to set up the dev server:

yarn

To start the Static dev server on port 8000:

yarn develop

Writing pages

URLs

All urls must end with a trailing slash (/).

Includes

Basic syntax: @include guidelines/components/buttons-primary/buttons-primary.html

Include markdown files :

• path omits trailing '.md'
• path starts from 'src', regardless of where the including page is.

Include html files :

• path must start with 'guidelines/'
• content will be included as html content and will render in the page as is, not as a text format

Formatting

Links

• External page (automatically open in a new tab): [Link text](https://www.sonarsource.com/)
• Another documentation page: [Link text](/personality/)
  • path omits trailing '.md'
  • links inside tooltips always open in a new tab

Linebreaks

By default, single linebreaks are removed in rendering. I.e.

foo
bar
baz

Will render as

foo bar baz

To get a <br/> effect, add 2 spaces at the end of the line

foo  //<- 2 spaces
bar  //<- 2 spaces
baz

Yields

foo
bar
baz

Collapsible block

Basic syntax:

[[collapse]]
| ## Block title
| Block content

The first line of the block must be a title. You can have as many lines as you want after that.

Syntax to collapse embed code blocks :

<div class="collapse"><a href="#">html</a>

`embed:components/buttons-primary/buttons-primary.html`

</div>

Code with syntax highlighting

Basic syntax:

```html
<div/>
```

Inline syntax (with special character '›') :

`css›transition: all .2s ease;`

Columns

You need to use html syntax to introduce multiple columns in a page :

<div class="columns">
  <div class="column">

  **Column 1**
  </div>
  <div class="column">

  ## Column2
  </div>
</div>

Images

Basic syntax: ![alt text.](/images/short-lived-branch-concept.png)

• images are auto-sized to 100% if they're larger than 100%
• paths start from 'src', regardless of where the calling page is

Icons

• :warning: ![](/images/exclamation.svg)
• :information_source: ![](/images/info.svg)
• :heavy_check_mark: ![](/images/check.svg)
• :x: ![](/images/cross.svg)