Merge pull request #88 from UX-Alkosto/develop

Actualización acordeón y k-icon

.eslintignore

@@ -1,3 +1,4 @@
 **/node_modules/**
 dist/*
-karma.config*
+karma.config*
+rollup.config*

components/acordeon/acordeon.js

@@ -1,36 +1,33 @@
-import { LitElement, html } from "lit";
-import { styles } from "./css";
+import { LitElement, html } from 'lit';
+import { styles } from './css';
 export class Acordeon extends LitElement {
     constructor(){
-        super()
-        this.open=false
-        this.title="Escriba un título"
+        super();
+        this.open=false;
+        this.title='Escriba un título';
     }
     static get properties() {
         return {
             open: {type:String,reflect:true},
             title: {type:String}
-        }
+        };
     }
     static get styles(){
-        return styles
+        return styles;
     }
     firstUpdated() {
         this.open = isTrueSet(this.getAttribute('open'));
     }
     render(){
-        return html`<details ${this.open}>
+        return html`<details ?open="${this.open}">
         <summary>
             <h3 class="tit_pregunta">${this.title}</h3>
-            <svg class="control-icon control-icon-expand" width="40" height="40" role="presentation">
-                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#expand-more" />
-            </svg>
-            <svg class="control-icon control-icon-close" width="40" height="40" role="presentation">
-                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close" />
-            </svg>
+            <k-icon class="expand" icon="alk-icon-abajo"></k-icon>
+            <k-icon class="collapse" icon="alk-icon-cerrar1"></k-icon>
         </summary>
+        <hr class="linea">
         <slot></slot>
-    </details>`
+    </details>`;
     }
 }
 function isTrueSet(value = '') {

components/acordeon/css/index.js

@@ -1,87 +1,66 @@
-import{css} from'lit'
-const styles= css`a {
-    color: var(--main-azul) !important;
-}
+import{css, unsafeCSS} from'lit';
+import { common } from '../../common';
+const styles= css`
 
 
 h3 {
+    color: var(--primary-color2, #004691) !important;
     font-size: 18px;
+    margin: 0;
 }
 
 details {
     width: 100%;
     min-height: 5px;
     padding: 25px 15px 25px 45px;
-    margin: 0 auto;
+    margin: 0 auto 20px auto;
     position: relative;
-    font-size: 22px;
+    font-size: var(--font-base, ${unsafeCSS(common.fontSize.p)});
     border: 1px solid rgba(0, 0, 0, .1);
-    border-radius: 15px;
+    border-radius: 10px;
     box-sizing: border-box;
     transition: all .3s;
 }
 
-details+details {
-    margin-top: 20px;
-}
 
-:host([open]) {
+details[open] {
     min-height: 50px;
     background-color: #ffffff;
     box-shadow: 2px 2px 10px rgba(0, 0, 0, .2);
 }
 
-details p,
-details ul {
-    color: #444444;
+::slotted(ul) {
+    color: var(--text-color1, #444444);
     font-weight: 300;
     font-size: 14px;
     line-height: 24px;
+    margin-left: 20px;
     padding: 0px;
 }
 
-details ul li:before {
+::slotted(p) {
+    color: var(--text-color1, #444444);
+    font-size: var(--font-base, ${unsafeCSS(common.fontSize.p)});
+    line-height: 1.572em;
+}
+
+::slotted(li:before) {
     content: "•";
-    color: var(--main-naranja);
+    color: var(--primary-color1, #DD171B) !important;
     margin-right: 10px;
-    font-size: 20px;
+    font-size: 60px;
 }
 
-details ul {
-    margin-left: 10px;
-    list-style: none;
+::slotted(a){
+    color: var(--link-text-color, #444444) !important;
+    text-decoration: underline;
 }
 
 summary {
-    display: flex !important;
-    justify-content: space-between;
     align-items: center;
     cursor: pointer;
-}
-
-summary .tit_pregunta {
-    color: var(--main-azul);
-    font-weight: bold !important;
-    text-align: left;
-    font-size: 18px;
-    width: 90%;
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-
-details p,
-details ul {
-    color: #444444;
-    font-weight: 300;
-    font-size: 14px;
-    line-height: 24px;
-    padding: 0px;
-}
-
-summary ul li a,
-summary details ul li a {
-    color: var(--main-azul) !important;
-    font-weight: bold;
+    display: flex !important;
+    position: relative; 
 }
 
 summary:focus {
@@ -101,25 +80,35 @@ summary::-webkit-details-marker {
     right: 10px;
 }
 
-.control-icon-close {
+.collapse {
     display: none;
 }
 
-:host([open]) .control-icon-close {
+details[open] .collapse {
     display: initial;
     transition: .3s ease;
 }
 
-:host([open]) .control-icon-expand {
+details[open] .expand {
     display: none;
 }
 
-:host([open]) summary:hover::after {
+details[open] summary:hover::after {
     animation: pulse 1s ease;
 }
 
-:host([open]) .tit_pregunta {
-    margin-bottom: 20px !important;
+k-icon {
+    font-size: 20px;
+    line-height: 20px;
+    position: absolute;
+    right:0;
+    top:0;
+}
+
+details .linea {
+    background-color: #E0E0E0;
+    border: none;
+    height: 1px;
 }
 
 @keyframes pulse {
@@ -174,8 +163,12 @@ summary::-webkit-details-marker {
 }
 
 @media only screen and (max-width: 414px) {
+    h3 {
+        font-size: 14px;
+    }
     details {
         padding: 15px 15px 15px 15px;
+        width: 90%;
     }
 
     details p,
@@ -202,5 +195,5 @@ summary::-webkit-details-marker {
     details ul {
         margin: 0px;
     }
-}` 
-export {styles}
+}`; 
+export {styles};

components/acordeon/index.js

@@ -1 +1 @@
-export {Acordeon} from'./acordeon'
+export {Acordeon} from'./acordeon';

components/card/card.js

@@ -9,7 +9,8 @@ export class Card extends LitElement {
             loaded: { type: Boolean, reflect: true },
             type: { type: String },
             target: { type: String },
-            shadow: { type: Boolean, reflect: true }
+            shadow: { type: Boolean, reflect: true },
+            variant: { type: String, reflect: true }
         };
     }
     static get styles() {
@@ -22,6 +23,7 @@ export class Card extends LitElement {
         this.target = '_self';
         this.type = 'default';
         this.shadow = true;
+        this.variant = 'outline';
         this.addEventListener('click', this._handleClick);
     }
     render() {

components/card/css/index.js

@@ -29,11 +29,28 @@ const styles = css`:host{
     text-align: center;
 }
 :host([type=icon-item]){
+    align-items: center;
+    display:flex;
+    flex-wrap: wrap;
+    justify-content: center;
     margin-top: 4rem;
 }
 
-:host([type=icon-item]) ::slotted(k-icon){
-    border: solid 1px var(--primary-color1);
+:host([type=icon-item]) ::slotted(h3){
+    margin: 10px 0;
+    text-align: center;
+    width: 100%;
+}
+
+:host([type=icon-item]) ::slotted(p) {
+    margin: 0 0 20px 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+:host([type=icon-item][variant=outline]) ::slotted(k-icon){
+    border: solid 2px var(--primary-color1);
     border-radius: 50px;
     font-size: 40px;
     height: 90px;
@@ -45,6 +62,23 @@ const styles = css`:host{
     justify-content: center;
     background-color: #ffffff;
 }
+
+:host([type=icon-item][variant=fill]) ::slotted(k-icon){
+    border: none;
+    border-radius: 50px;
+    color: var(--primary-color2, #959595);
+    font-size: 40px;
+    height: 90px;
+    margin-top: -30px;
+    width: 90px;
+    align-items: center;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    background-color: var(--card-icon-background-fill, #F5F5F5);
+}
+
+
 :host([type=product-item]) {
     margin-top: 2rem;
     text-align: center;

components/slider/slider.js

@@ -1,4 +1,5 @@
 import { LitElement, html } from 'lit';
+import { common } from '../common';
 import { styles, Core as coreStyles, Theme as themeStyles } from './css';
 
 export class Slider extends LitElement {
@@ -39,7 +40,7 @@ export class Slider extends LitElement {
         this['mobile-bullets'] = false;
         this['mobile-items'] = 2;
         this.peek = 0;
-        this.width = 1204;
+        this.width = common.defaultMaxWidth;
     }
     attributeChangedCallback(name, oldval, newval) {
         super.attributeChangedCallback(name, oldval, newval);