Commit aeb31ea5 authored by Dominique Feyer's avatar Dominique Feyer
Browse files

TASK: Add support for squared icons

parent d21fc07c

src/components.d.ts

+2 −0
Original line number Diff line number Diff line
@@ -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;

    }

  }

src/components/icon/icon.tsx

+10 −1
Original line number Diff line number Diff line
@@ -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();

  }

}

src/components/icon/styles/icon.dark.scss

+1 −0
Original line number Diff line number Diff line
@@ -3,4 +3,5 @@ 


:host {

  color: $text-dark-color-value;

  font-size: $font-size-dark-base;

}

src/components/icon/styles/icon.scss

+8 −0
Original line number Diff line number Diff line
@@ -5,4 +5,12 @@ 
  @include font-smoothing();



  display: inline-block;



  .l-squared {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 40px;

    width: 40px;

  }

}

src/index.html

+29 −1
Original line number Diff line number Diff line
@@ -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,11 +110,25 @@ 
  <header>

    <h1>neos-icon</h1>

  </header>

  <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>

</html>