feat(showcase): implementation of reference-block component

[Mallikki]

ISSUES CLOSED: #622

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/NationalBankBelgium/stark/blob/master/CONTRIBUTING.md#-commit-message-guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

All components lacked links to their documentation

Issue Number: #622

What is the new behavior?

Stark-ui components now have a link to their documentation in the showcase

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

[coveralls]

Coverage decreased (-0.6%) to 91.815% when pulling 17e250f on Mallikki:feature/reference-code-component into c6e131c on NationalBankBelgium:master.

[christophercr]

I think you put these imports at the bottom of this file in another PR, so maybe you need to put them also at the bottom in this PR too ;)

[christophercr]

Now we don't need to add the component class directly in the HTML. You can set it via Angular by using the HostBinding decorator. Basically like this:

export class ReferenceBlockComponent implements OnInit {
	@HostBinding("class")
	public class: string = componentName;
        ...

As we discussed, because of this change, the styles should change since the class is set now in the <stark-reference-block> element See the CSS I propose in my other remark

[christophercr]

I suggest using the 300 shadow instead of 200 so that the reference block stands out of the rest

[christophercr]

As we discussed, I've re-worked these styles to try to keep the same CSS as before, so this is what I got:

.stark-reference-block div {
  background-color: #fff;
  border: solid 1px color(mat-color($grey-palette, 400));
  padding: 10px 10px 10px 50px;
  border-radius: 5px;
  box-shadow: color(mat-color($grey-palette, 300));
  position: relative;

  & mat-icon {
    position: absolute;
    left: 15px;
    top: 14px;
    color: color(mat-color($grey-palette, 700));
  }
  & ul {
    padding: 0;
  }

  & a {
    text-decoration: none;
  }
  & a:hover {
    background-color: $offwhite;
    color: $md-primary;
  }
}

[christophercr]

This can be simplified like this: <h2>Reference</h2>

[christophercr]

This "inline-block" is not needed anymore