Commit aeb31ea5 authored by Dominique Feyer's avatar Dominique Feyer

TASK: Add support for squared icons

parent d21fc07c
......@@ -144,6 +144,7 @@ declare global {
namespace StencilComponents {
interface NeosIcon {
'name': string;
'squared': boolean;
'type': string;
}
}
......@@ -168,6 +169,7 @@ declare global {
namespace JSXElements {
export interface NeosIconAttributes extends HTMLAttributes {
'name'?: string;
'squared'?: boolean;
'type'?: string;
}
}
......
......@@ -9,12 +9,21 @@ export class Icon {
@Prop() name: string;
@Prop() type: string = 'regular';
@Prop() squared: boolean = false;
className() {
return 'fa' + this.type.charAt(0) + ' ' + 'fa-' + this.name;
}
render() {
icon() {
return <i class={this.className()}></i>;
}
squaredIcon() {
return <div class="l-squared">{this.icon()}</div>
}
render() {
return this.squared ? this.squaredIcon() : this.icon();
}
}
......@@ -3,4 +3,5 @@
:host {
color: $text-dark-color-value;
font-size: $font-size-dark-base;
}
......@@ -5,4 +5,12 @@
@include font-smoothing();
display: inline-block;
.l-squared {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width: 40px;
}
}
......@@ -9,12 +9,17 @@
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="/build/neos.js"></script>
<style>
h1 {
h1, h2 {
color: white;
font-family: "Roboto", "Helvetica Neue", sans-serif;
font-weight: 600;
font-size: 24px;
text-transform: uppercase;
}
h2 {
font-size: 18px;
text-transform: lowercase;
}
section {
border-top: 4px solid white;
margin-bottom: 40px;
......@@ -50,6 +55,9 @@
<h1>neos-button</h1>
</header>
<section>
<header>
<h2>default</h2>
</header>
<neos-button>Confirm</neos-button>
<neos-button theme="clean">Publish</neos-button>
<neos-button theme="brand">Did you love Neos?</neos-button>
......@@ -57,6 +65,9 @@
<neos-button theme="warn" disabled>Delete</neos-button>
</section>
<section>
<header>
<h2>with icon</h2>
</header>
<neos-button>
<neos-icon name="folder"></neos-icon> Confirm
</neos-button>
......@@ -74,6 +85,9 @@
</neos-button>
</section>
<section>
<header>
<h2>squared</h2>
</header>
<neos-button squared>
<neos-icon name="folder"></neos-icon>
</neos-button>
......@@ -96,10 +110,24 @@
<header>
<h1>neos-icon</h1>
</header>
<neos-icon name="folder"></neos-icon>
<neos-icon name="folder" type="solid"></neos-icon>
<neos-icon name="edit"></neos-icon>
<neos-icon name="edit" type="solid"></neos-icon>
<section>
<header>
<h2>default</h2>
</header>
<neos-icon name="folder"></neos-icon>
<neos-icon name="folder" type="solid"></neos-icon>
<neos-icon name="edit"></neos-icon>
<neos-icon name="edit" type="solid"></neos-icon>
</section>
<section>
<header>
<h2>squared</h2>
</header>
<neos-icon squared name="folder"></neos-icon>
<neos-icon squared name="folder" type="solid"></neos-icon>
<neos-icon squared name="edit"></neos-icon>
<neos-icon squared name="edit" type="solid"></neos-icon>
</section>
</section>
</body>
......
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