Commit 2db8dc50 authored by Dominique Feyer's avatar Dominique Feyer

TASK: Badge must be consistent with button

parent aeb31ea5
......@@ -28,7 +28,7 @@ declare global {
namespace StencilComponents {
interface NeosBadge {
'label': string;
}
}
......@@ -51,7 +51,7 @@ declare global {
}
namespace JSXElements {
export interface NeosBadgeAttributes extends HTMLAttributes {
'label'?: string;
}
}
}
......
import {Component, Prop} from '@stencil/core';
import {Component} from '@stencil/core';
@Component({
tag: 'neos-badge',
......@@ -6,10 +6,7 @@ import {Component, Prop} from '@stencil/core';
shadow: true
})
export class Badge {
@Prop() label: string;
render() {
return this.label;
return <div><slot /></div>;
}
}
......@@ -10,7 +10,7 @@
line-height: inherit;
margin-right: $content-margin-small;
outline: 1px $background-dark-color solid;
padding: $content-padding-smaller;
padding: $content-padding-small;
cursor: default;
&:last-child {
......
......@@ -45,9 +45,21 @@
<header>
<h1>neos-badge</h1>
</header>
<neos-badge label="Switzerland"></neos-badge>
<neos-badge label="France"></neos-badge>
<neos-badge label="Germany"></neos-badge>
<section>
<header>
<h2>default</h2>
</header>
<neos-badge>Switzerland</neos-badge>
<neos-badge>France</neos-badge>
<neos-badge>Germany</neos-badge>
</section>
<header>
<h2>with icons</h2>
</header>
<neos-badge><neos-icon name="frown"></neos-icon> Switzerland</neos-badge>
<neos-badge><neos-icon name="frown"></neos-icon> France</neos-badge>
<neos-badge><neos-icon name="frown"></neos-icon> Germany</neos-badge>
</section>
</section>
<section>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment