docs(Button): Reimposta e semplifica la struttura della documentazion…

…e del bottone ref #44
italia · Jul 30, 2018 · 819eb45 · 819eb45
1 parent f70109f
commit 819eb45
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 51 deletions.
diff --git a/src/app/button/button-example-color/button-example-color.component.html b/src/app/button/button-example-color/button-example-color.component.html
@@ -4,28 +4,28 @@
     <h4 class="card-title">Varianti di colore con sfondo chiaro</h4>
     <div class="py-1">
       <p class="card-text" class="example-section">
-        <it-button [color]="primaryColor">Primary</it-button>
-        <it-button [color]="primaryColor" [outline]="isOutlined">Primary outline</it-button>
-        <it-button [color]="primaryColor" [disabled]="isDisabled">Primary disabled</it-button>
+        <it-button color="primary">Primary</it-button>
+        <it-button color="primary" outline>Primary outline</it-button>
+        <it-button color="primary" disabled>Primary disabled</it-button>
       </p>
       <p class="card-text" class="example-section">
-        <it-button [color]="secondaryColor">Secondary</it-button>
-        <it-button [color]="secondaryColor" [outline]="isOutlined">Secondary outline</it-button>
-        <it-button [color]="secondaryColor" [disabled]="isDisabled">Secondary disabled</it-button>
+        <it-button color="secondary">Secondary</it-button>
+        <it-button color="secondary" outline>Secondary outline</it-button>
+        <it-button color="secondary" disabled>Secondary disabled</it-button>
       </p>
     </div>
 
     <h4 class="card-title">Varianti di colore con sfondo scuro</h4>
     <div class="bg-dark py-1">
       <p class="card-text" class="example-section">
-        <it-button [color]="primaryColor">Primary</it-button>
-        <it-button [color]="primaryColor" [outline]="isOutlined">Primary outline</it-button>
-        <it-button [color]="primaryColor" [disabled]="isDisabled">Primary disabled</it-button>
+        <it-button color="primary">Primary</it-button>
+        <it-button color="primary" outline>Primary outline</it-button>
+        <it-button color="primary" disabled>Primary disabled</it-button>
       </p>
       <p class="card-text" class="example-section">
-        <it-button [color]="secondaryColor">Secondary</it-button>
-        <it-button [color]="secondaryColor" [outline]="isOutlined">Secondary outline</it-button>
-        <it-button [color]="secondaryColor" [disabled]="isDisabled">Secondary disabled</it-button>
+        <it-button color="secondary">Secondary</it-button>
+        <it-button color="secondary" outline>Secondary outline</it-button>
+        <it-button color="secondary" disabled>Secondary disabled</it-button>
       </p>
     </div>
 

diff --git a/src/app/button/button-example-color/button-example-color.component.ts b/src/app/button/button-example-color/button-example-color.component.ts
@@ -7,11 +7,6 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ButtonExampleColorComponent implements OnInit {
 
-  primaryColor = 'primary';
-  secondaryColor = 'secondary';
-  isDisabled = true;
-  isOutlined = true;
-
   constructor() { }
 
   ngOnInit() {

diff --git a/src/app/button/button-example-interactive/button-example-interactive.component.html b/src/app/button/button-example-interactive/button-example-interactive.component.html
@@ -15,26 +15,30 @@ <h5>Opzioni</h5>
           <it-checkbox [(ngModel)]="block" label="Block" id="block-checkbox"></it-checkbox>
           <it-checkbox [(ngModel)]="outline" label="Outline" id="outline-checkbox"></it-checkbox>
         </div>
-        <div class="form-check col-3">
+        <div class="form-check col-2">
           <h5>Dimensione</h5>
           <it-radio-group [(ngModel)]="selectedSize">
+            <it-radio-button id="radio-standard" name="standard" value="" label="None"></it-radio-button>
             <it-radio-button id="radio-lg" name="lg" value="lg" label="lg"></it-radio-button>
             <it-radio-button id="radio-sm" name="sm" value="sm" label="sm"></it-radio-button>
             <it-radio-button id="radio-xs" name="xs" value="xs" label="xs"></it-radio-button>
           </it-radio-group>
         </div>
-        <div class="form-check col-6">
+        <div class="form-check col-7">
           <h5>Colorazione</h5>
           <it-radio-group [(ngModel)]="selectedColor">
             <div class="row">
-              <div class="form-check col-6">
+              <div class="form-check col-5">
+                <it-radio-button id="radio-none" name="none" value="" label="None"></it-radio-button>
                 <it-radio-button id="radio-primary" name="primary" value="primary" label="Primary"></it-radio-button>
                 <it-radio-button id="radio-secondary" name="secondary" value="secondary" label="Secondary"></it-radio-button>
+              </div>
+              <div class="form-check col-4">
                 <it-radio-button id="radio-success" name="success" value="success" label="Success"></it-radio-button>
                 <it-radio-button id="radio-warning" name="warning" value="warning" label="Warning"></it-radio-button>
-              </div>
-              <div class="form-check col-6">
                 <it-radio-button id="radio-danger" name="danger" value="danger" label="Danger"></it-radio-button>
+              </div>
+              <div class="form-check col-3">
                 <it-radio-button id="radio-info" name="info" value="info" label="Info"></it-radio-button>
                 <it-radio-button id="radio-light" name="light" value="light" label="Light"></it-radio-button>
                 <it-radio-button id="radio-dark" name="dark" value="dark" label="Dark"></it-radio-button>

diff --git a/src/app/button/button-example-size/button-example-size.component.html b/src/app/button/button-example-size/button-example-size.component.html
@@ -3,31 +3,31 @@
     <h4 class="card-title">Varianti di dimensione</h4>
 
     <p class="card-text" class="example-section">
-      <it-button [size]="xsSize" [color]="primaryColor">
+      <it-button size="xs" color="primary">
         Button XS
       </it-button>
 
-      <it-button [size]="xsSize" [color]="secondaryColor">
+      <it-button size="xs" color="secondary">
         Button XS
       </it-button>
     </p>
 
     <p class="card-text" class="example-section">
-      <it-button [size]="smSize" [color]="primaryColor">
+      <it-button size="sm" color="primary">
         Button SM
       </it-button>
 
-      <it-button [size]="smSize" [color]="secondaryColor">
+      <it-button size="sm" color="secondary">
         Button SM
       </it-button>
     </p>
 
     <p class="card-text" class="example-section">
-      <it-button [size]="lgSize" [color]="primaryColor">
+      <it-button size="lg" color="primary">
         Button LG
       </it-button>
 
-      <it-button [size]="lgSize" [color]="secondaryColor">
+      <it-button size="lg" color="secondary">
         Button LG
       </it-button>
     </p>

diff --git a/src/app/button/button-example-size/button-example-size.component.ts b/src/app/button/button-example-size/button-example-size.component.ts
@@ -7,13 +7,6 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ButtonExampleSizeComponent implements OnInit {
 
-  primaryColor = 'primary';
-  secondaryColor = 'secondary';
-
-  lgSize = 'lg';
-  smSize = 'sm';
-  xsSize = 'xs';
-
   constructor() { }
 
   ngOnInit() {

diff --git a/src/app/button/button-examples/button-examples.component.tpl b/src/app/button/button-examples/button-examples.component.tpl
@@ -1,3 +1,17 @@
+{% set interactiveHtml %}
+  {% include "../button-example-interactive/button-example-interactive.component.html" %}
+{% endset %}
+
+{% set interactiveTs %}
+  {% include "../button-example-interactive/button-example-interactive.component.ts" %}
+{% endset %}
+
+<it-button-example-interactive></it-button-example-interactive>
+
+<it-source-display html="{$ interactiveHtml | replace("\{\{", "/\{/\{") | replace("\}\}", "/\}/\}") $}" 
+  typescript="{$ interactiveTs | replace("\{\{", "/\{/\{") | replace("\}\}", "/\}/\}") $}" >
+</it-source-display>
+
 {% set html %}
   {% include "../button-example/button-example.component.html" %}
 {% endset %}
@@ -8,7 +22,7 @@
 
 <it-button-example></it-button-example>
 
-<it-source-display html="{$ html | escape $}" typescript="{$ typescript | escape $}" >
+<it-source-display html="{$ html | replace("\{\{", "/\{/\{") | replace("\}\}", "/\}/\}") $}" typescript="{$ typescript | replace("\{\{", "/\{/\{") | replace("\}\}", "/\}/\}") $}" >
 </it-source-display>
 
 {% set colorHtml %}
@@ -21,7 +35,7 @@
 
 <it-button-example-color></it-button-example-color>
 
-<it-source-display html="{$ colorHtml | escape $}" typescript="{$ colorTs | escape $}" >
+<it-source-display html="{$ colorHtml | replace("\{\{", "/\{/\{") | replace("\}\}", "/\}/\}") $}" typescript="{$ colorTs | replace("\{\{", "/\{/\{") | replace("\}\}", "/\}/\}") $}" >
 </it-source-display>
 
 {% set sizeHtml %}
@@ -34,18 +48,5 @@
 
 <it-button-example-size></it-button-example-size>
 
-<it-source-display html="{$ sizeHtml | escape $}" typescript="{$ sizeTs | escape $}" >
+<it-source-display html="{$ sizeHtml | replace("\{\{", "/\{/\{") | replace("\}\}", "/\}/\}") $}" typescript="{$ sizeTs | replace("\{\{", "/\{/\{") | replace("\}\}", "/\}/\}") $}" >
 </it-source-display>
-
-{% set interactiveHtml %}
-  {% include "../button-example-interactive/button-example-interactive.component.html" %}
-{% endset %}
-
-{% set interactiveTs %}
-  {% include "../button-example-interactive/button-example-interactive.component.ts" %}
-{% endset %}
-
-<it-button-example-interactive></it-button-example-interactive>
-
-<it-source-display html="{$ interactiveHtml | escape $}" typescript="{$ interactiveTs | escape $}" >
-</it-source-display>