From 14f28a82e7e5fb8e5017780d28b119e20172732e Mon Sep 17 00:00:00 2001 From: menosprezzi Date: Wed, 29 Jan 2020 13:37:14 -0300 Subject: [PATCH 1/3] chore: enabling lint --- core/.stylelintrc.yml | 299 +++--------------------------------------- core/package.json | 2 + package.json | 3 +- 3 files changed, 23 insertions(+), 281 deletions(-) diff --git a/core/.stylelintrc.yml b/core/.stylelintrc.yml index b8fd865b..1a95487e 100644 --- a/core/.stylelintrc.yml +++ b/core/.stylelintrc.yml @@ -1,13 +1,23 @@ -# Default stylelint configuration. - # See documentation at https://stylelint.io/ +extends: + - stylelint-config-rational-order + indentation: 2 -plugins: - - stylelint-order +ignoreFiles: + - src/global/css/layout/**/*.scss rules: - max-line-length: 120 + declaration-no-important: null + block-closing-brace-newline-before: always + block-opening-brace-newline-after: always + custom-property-empty-line-before: + - always + - except: + - after-comment + - after-custom-property + - first-nested + rule-empty-line-before: null at-rule-empty-line-before: - always - except: @@ -16,285 +26,14 @@ rules: ignore: - after-comment - block-closing-brace-newline-before: - - always - - block-no-empty: - - true - - block-opening-brace-newline-after: - - always - - custom-property-empty-line-before: - - always - - except: - - after-comment - - after-custom-property - - first-nested - - - + max-empty-lines: 2 + max-line-length: 120 + block-no-empty: true order/order: - dollar-variables - custom-properties - declarations - rules - - # https://github.com/sasstools/sass-lint/blob/develop/lib/config/property-sort-orders/smacss.yml - order/properties-order: - # Heading - - - 'content' - - 'quotes' - - # Box - - - 'display' - - 'visibility' - - - 'position' - - 'z-index' - - 'top' - - 'right' - - 'bottom' - - 'left' - - - 'box-sizing' - - - 'grid' - - 'grid-after' - - 'grid-area' - - 'grid-auto-columns' - - 'grid-auto-flow' - - 'grid-auto-rows' - - 'grid-before' - - 'grid-column' - - 'grid-column-end' - - 'grid-column-gap' - - 'grid-column-start' - - 'grid-columns' - - 'grid-end' - - 'grid-gap' - - 'grid-row' - - 'grid-row-end' - - 'grid-row-gap' - - 'grid-row-start' - - 'grid-rows' - - 'grid-start' - - 'grid-template' - - 'grid-template-areas' - - 'grid-template-columns' - - 'grid-template-rows' - - - 'flex' - - 'flex-basis' - - 'flex-direction' - - 'flex-flow' - - 'flex-grow' - - 'flex-shrink' - - 'flex-wrap' - - 'align-content' - - 'align-items' - - 'align-self' - - 'justify-content' - - 'order' - - - 'width' - - 'min-width' - - 'max-width' - - 'height' - - 'min-height' - - 'max-height' - - - 'margin' - - 'margin-top' - - 'margin-right' - - 'margin-bottom' - - 'margin-left' - - - 'padding' - - 'padding-top' - - 'padding-right' - - 'padding-bottom' - - 'padding-left' - - - 'float' - - 'clear' - - - 'overflow' - - 'overflow-x' - - 'overflow-y' - - - 'clip' - - 'zoom' - - - 'columns' - - 'column-gap' - - 'column-fill' - - 'column-rule' - - 'column-span' - - 'column-count' - - 'column-width' - - - 'table-layout' - - 'empty-cells' - - 'caption-side' - - 'border-spacing' - - 'border-collapse' - - 'list-style' - - 'list-style-position' - - 'list-style-type' - - 'list-style-image' - - # Animation - - - 'transform' - - 'transform-origin' - - 'transform-style' - - 'backface-visibility' - - 'perspective' - - 'perspective-origin' - - - 'transition' - - 'transition-property' - - 'transition-duration' - - 'transition-timing-function' - - 'transition-delay' - - - 'animation' - - 'animation-name' - - 'animation-duration' - - 'animation-play-state' - - 'animation-timing-function' - - 'animation-delay' - - 'animation-iteration-count' - - 'animation-direction' - - # Border - - - 'border' - - 'border-top' - - 'border-right' - - 'border-bottom' - - 'border-left' - - 'border-width' - - 'border-top-width' - - 'border-right-width' - - 'border-bottom-width' - - 'border-left-width' - - - 'border-style' - - 'border-top-style' - - 'border-right-style' - - 'border-bottom-style' - - 'border-left-style' - - - 'border-radius' - - 'border-top-left-radius' - - 'border-top-right-radius' - - 'border-bottom-left-radius' - - 'border-bottom-right-radius' - - - 'border-color' - - 'border-top-color' - - 'border-right-color' - - 'border-bottom-color' - - 'border-left-color' - - - 'outline' - - 'outline-color' - - 'outline-offset' - - 'outline-style' - - 'outline-width' - - - 'stroke-width' - - 'stroke-linecap' - - 'stroke-dasharray' - - 'stroke-dashoffset' - - 'stroke' - - # Background - - - 'opacity' - - - 'background' - - 'background-color' - - 'background-image' - - 'background-repeat' - - 'background-position' - - 'background-size' - - 'box-shadow' - - 'fill' - - # Text - - - 'color' - - - 'font' - - 'font-family' - - 'font-size' - - 'font-size-adjust' - - 'font-stretch' - - 'font-effect' - - 'font-style' - - 'font-variant' - - 'font-weight' - - - 'font-emphasize' - - 'font-emphasize-position' - - 'font-emphasize-style' - - - 'letter-spacing' - - 'line-height' - - 'list-style' - - 'word-spacing' - - - 'text-align' - - 'text-align-last' - - 'text-decoration' - - 'text-indent' - - 'text-justify' - - 'text-overflow' - - 'text-overflow-ellipsis' - - 'text-overflow-mode' - - 'text-rendering' - - 'text-outline' - - 'text-shadow' - - 'text-transform' - - 'text-wrap' - - 'word-wrap' - - 'word-break' - - - 'text-emphasis' - - 'text-emphasis-color' - - 'text-emphasis-style' - - 'text-emphasis-position' - - - 'vertical-align' - - 'white-space' - - 'word-spacing' - - 'hyphens' - - - 'src' - - # Other - - - 'tab-size' - - 'counter-reset' - - 'counter-increment' - - 'resize' - - 'cursor' - - 'pointer-events' - - 'speak' - - 'user-select' - - 'nav-index' - - 'nav-up' - - 'nav-right' - - 'nav-down' - - 'nav-left' - property-blacklist: - float - - string-quotes: - - double + string-quotes: double diff --git a/core/package.json b/core/package.json index 829c7997..0163e692 100644 --- a/core/package.json +++ b/core/package.json @@ -38,6 +38,8 @@ "babel-loader": "^8.0.6", "jest": "^24.7.1", "stylelint": "^10.0.1", + "stylelint-config-rational-order": "^0.1.2", + "stylelint-config-recommended": "^3.0.0", "stylelint-order": "^3.0.0", "tslint": "^5.16.0", "tslint-ionic-rules": "0.0.21", diff --git a/package.json b/package.json index bcfdf47d..c81c167f 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,8 @@ "publish-latest": "lerna publish -y --force-publish=* --conventional-commits --create-release github", "publish-alpha": "lerna publish -y --force-publish=* --canary", "postinstall": "lerna bootstrap", - "start": "npm start --prefix core" + "start": "npm start --prefix core", + "pre-commit": "npm run lint.fix --prefix core && npm run lint --prefix core" }, "devDependencies": { "@commitlint/cli": "^8.3.5", From ef4e4146119b3609d068274c2f79532638488640 Mon Sep 17 00:00:00 2001 From: menosprezzi Date: Wed, 29 Jan 2020 13:38:43 -0300 Subject: [PATCH 2/3] style: applying code style --- .../delegates/native-delegate.ts | 1 + .../components/atoms/ac-avatar/ac-avatar.scss | 4 +- .../components/atoms/ac-badge/ac-badge.scss | 8 +- .../components/atoms/ac-button/ac-button.scss | 41 +-- .../components/atoms/ac-button/ac-button.tsx | 2 +- .../atoms/ac-button/ac-button.vars.scss | 4 +- .../src/components/atoms/ac-card/ac-card.scss | 2 +- .../atoms/ac-card/ac-card.vars.scss | 4 +- .../components/atoms/ac-check/ac-check.scss | 26 +- .../components/atoms/ac-check/ac-check.tsx | 2 +- .../atoms/ac-date-picker/ac-date-picker.scss | 231 +++++++-------- .../atoms/ac-date-picker/ac-date-picker.tsx | 2 +- .../assets/lazy-air-date-picker.tsx | 18 +- .../components/atoms/ac-gauge/ac-gauge.scss | 4 +- .../atoms/ac-gauge/ac-gauge.skeleton.scss | 2 +- .../atoms/ac-gauge/ac-gauge.vars.scss | 2 +- .../components/atoms/ac-header/ac-header.scss | 4 +- .../atoms/ac-header/ac-header.vars.scss | 2 +- .../atoms/ac-input-base/ac-input-base.scss | 14 +- .../ac-navdrawer-controller.tsx | 3 +- .../atoms/ac-navdrawer/ac-navdrawer.scss | 24 +- .../atoms/ac-navdrawer/ac-navdrawer.tsx | 99 +++---- .../atoms/ac-navdrawer/ac-navdrawer.vars.scss | 2 +- .../atoms/ac-progress/ac-progress.scss | 6 +- .../atoms/ac-stepper/ac-stepper.scss | 14 +- .../components/atoms/ac-table/ac-table.scss | 8 +- .../components/atoms/ac-table/ac-table.tsx | 2 +- .../components/atoms/ac-toast/ac-toast.scss | 6 +- .../components/atoms/ac-toggle/ac-toggle.scss | 16 +- .../ac-autocomplete/ac-autocomplete.tsx | 266 +++++++++--------- .../molecules/ac-collapse/ac-collapse.tsx | 0 .../ac-menu/ac-menu-item/ac-menu-item.scss | 27 +- .../components/molecules/ac-menu/ac-menu.scss | 6 +- .../ac-order-list/ac-order-list.scss | 12 +- .../molecules/ac-order-list/ac-order-list.tsx | 43 +-- .../molecules/ac-select/ac-select.scss | 2 +- .../molecules/ac-select/ac-select.tsx | 6 +- .../molecules/ac-tabs/ac-tab/ac-tab.scss | 5 +- .../components/molecules/ac-tabs/ac-tabs.scss | 10 +- .../components/molecules/ac-tabs/ac-tabs.tsx | 2 +- .../organisms/ac-modal/ac-modal.scss | 12 +- .../organisms/ac-panel/ac-panel.scss | 9 +- .../organisms/ac-pick-list/ac-pick-list.scss | 4 +- .../organisms/ac-pick-list/ac-pick-list.tsx | 178 ++++++------ .../organisms/ac-upload/ac-upload.scss | 14 +- .../portals/ac-overlay/ac-overlay.scss | 8 +- .../templates/ac-layout/ac-layout.scss | 2 +- .../templates/ac-login/ac-login.scss | 4 +- .../templates/ac-login/ac-login.tsx | 3 +- .../templates/ac-shape/ac-shape.scss | 4 +- .../templates/ac-shape/ac-shape.tsx | 1 + core/src/global/css/_layout.scss | 20 +- core/src/global/css/_skeletons.scss | 4 +- core/src/global/css/_tooltip.scss | 18 +- core/src/global/css/_typography.scss | 2 +- .../breakpoints/mixins/_breakpoints.scss | 2 +- core/src/theme/_colors.scss | 36 +-- core/src/theme/_default.theme.scss | 108 ++++--- core/src/theme/_effects.scss | 6 +- core/src/theme/_metrics.scss | 10 +- core/src/theme/utils/_color.utils.scss | 6 +- core/src/theme/utils/_skeleton.utils.scss | 14 +- core/src/utils/lang/types.ts | 4 + core/src/utils/serialize-form.ts | 7 +- core/src/utils/stencil/create-portal.tsx | 2 +- core/src/utils/stencil/ensure-controller.ts | 4 +- core/src/utils/types/ac-option.ts | 2 +- core/src/utils/validations/validations.d.ts | 3 +- 68 files changed, 714 insertions(+), 705 deletions(-) create mode 100644 core/src/components/molecules/ac-collapse/ac-collapse.tsx diff --git a/core/src/behaviors/controller-behavior/delegates/native-delegate.ts b/core/src/behaviors/controller-behavior/delegates/native-delegate.ts index dd0d6569..ad3a123a 100644 --- a/core/src/behaviors/controller-behavior/delegates/native-delegate.ts +++ b/core/src/behaviors/controller-behavior/delegates/native-delegate.ts @@ -1,4 +1,5 @@ import { HTMLStencilElement } from '@stencil/core/internal'; + import { FrameworkDelegate } from './framework-delegate'; /** diff --git a/core/src/components/atoms/ac-avatar/ac-avatar.scss b/core/src/components/atoms/ac-avatar/ac-avatar.scss index 4a0fc032..ddf241ad 100644 --- a/core/src/components/atoms/ac-avatar/ac-avatar.scss +++ b/core/src/components/atoms/ac-avatar/ac-avatar.scss @@ -16,8 +16,8 @@ ac-avatar { // @TODO: Use global vars. min-width: 36px; min-height: 36px; - border-radius: 100%; background-size: contain; + border-radius: 100%; box-shadow: $z1-shadow; } @@ -29,8 +29,8 @@ ac-avatar { .ac-avatar__title { color: current-color("contrast") !important; - font-size: $font-small; font-weight: bold; + font-size: $font-small; text-transform: capitalize; } diff --git a/core/src/components/atoms/ac-badge/ac-badge.scss b/core/src/components/atoms/ac-badge/ac-badge.scss index 71af6aa4..94943bb4 100644 --- a/core/src/components/atoms/ac-badge/ac-badge.scss +++ b/core/src/components/atoms/ac-badge/ac-badge.scss @@ -11,9 +11,9 @@ ac-badge { justify-content: center; min-width: $spacer-small; height: $spacer-small; - border-radius: 100px; - font-size: $font-xtiny; font-weight: bold; + font-size: $font-xtiny; + border-radius: 100px; } // --------------------------------------------------------------------------------------------------------------------- @@ -22,9 +22,9 @@ ac-badge { ac-badge.ac-badge--floating { position: absolute; - z-index: $z-fab; right: 0; bottom: 0; + z-index: $z-fab; } // --------------------------------------------------------------------------------------------------------------------- @@ -35,5 +35,3 @@ ac-badge.ac-badge--floating { @include badge-variations(".ac-badge--warning", "warning"); @include badge-variations(".ac-badge--alert", "alert"); @include badge-variations(".ac-badge--info", "info"); - - diff --git a/core/src/components/atoms/ac-button/ac-button.scss b/core/src/components/atoms/ac-button/ac-button.scss index 05409c8f..68ff6437 100644 --- a/core/src/components/atoms/ac-button/ac-button.scss +++ b/core/src/components/atoms/ac-button/ac-button.scss @@ -11,26 +11,26 @@ ac-button { .ac-button__native { display: inline-flex; - box-sizing: border-box; align-items: center; + box-sizing: border-box; min-width: 100px; height: $ac-button__height; padding: $spacer-tiny $spacer-tiny; - transition: box-shadow $slow-transition, - outline $slow-transition, - background-color $slow-transition, - color $slow-transition; - border-radius: $border-radius-default; - outline: none; - font-family: inherit; - font-size: $font-small; font-weight: bold; + font-size: $font-small; + font-family: inherit; line-height: 1; text-align: center; text-decoration: none; + border-radius: $border-radius-default; + outline: none; cursor: pointer; - user-select: none; + transition: box-shadow $slow-transition, + outline $slow-transition, + background-color $slow-transition, + color $slow-transition; -webkit-appearance: none; + user-select: none; & > [slot="icon-start"] { margin-left: 8px; @@ -40,9 +40,9 @@ ac-button { } .ac-button__text { + margin: auto; padding: 0 $spacer-tiny; white-space: nowrap; - margin: auto; } } } @@ -88,15 +88,15 @@ ac-button.ac-button--large { ac-button.ac-button--solid { .ac-button__native { - border: 1px solid rgba(0,0,0,.12); + color: var-color("primary", "normal"); background: current-color("normal"); + border: 1px solid rgba(0,0,0,.12); box-shadow: $z1-shadow, inset 0 -2px 0 rgba(0,0,0,.12); fill: current-color("contrast"); - color: var-color("primary", "normal"); &:hover { - border: 1px solid var-color("primary", "normal", .12); background: var-color("primary", "normal", 0.2); + border: 1px solid var-color("primary", "normal", .12); box-shadow: 0 0 0 transparent, inset 0 -2px 0 rgba(0,0,0,.12); } @@ -105,9 +105,10 @@ ac-button.ac-button--solid { inset 0 -2px 0 rgba(0,0,0, .12); } &:active { - transition: box-shadow $fast-transition; box-shadow: 0 0 0 8px var-color("primary", "normal", .08), - inset 0 0 0 rgba(0,0,0, .12); + inset 0 0 0 rgba(0,0,0, .12); + transition: box-shadow $fast-transition; + } } } @@ -118,11 +119,11 @@ ac-button.ac-button--solid { ac-button.ac-button--clear { .ac-button__native { - border: 0; + color: current-color("contrast"); background: transparent; + border: 0; box-shadow: none !important; fill: current-color("contrast"); - color: current-color("contrast"); } } @@ -193,11 +194,11 @@ ac-button.ac-button--icon-only { ac-button.ac-button--disabled { pointer-events: none; .ac-button__native { - background: var-color("neutral", "light") !important; - fill: var-color("neutral", "normal") !important; color: var-color("neutral", "normal") !important; + background: var-color("neutral", "light") !important; cursor: not-allowed; pointer-events: all; + fill: var-color("neutral", "normal") !important; & > * { pointer-events: none; } diff --git a/core/src/components/atoms/ac-button/ac-button.tsx b/core/src/components/atoms/ac-button/ac-button.tsx index b0a24ef2..a37c07e9 100644 --- a/core/src/components/atoms/ac-button/ac-button.tsx +++ b/core/src/components/atoms/ac-button/ac-button.tsx @@ -98,7 +98,7 @@ export class AcButton implements ComponentInterface { disabled={this.disabled} class="ac-button__native" > - {this.loading && } + {this.loading && } diff --git a/core/src/components/atoms/ac-button/ac-button.vars.scss b/core/src/components/atoms/ac-button/ac-button.vars.scss index 5a2dab9f..d8b3f394 100644 --- a/core/src/components/atoms/ac-button/ac-button.vars.scss +++ b/core/src/components/atoms/ac-button/ac-button.vars.scss @@ -20,9 +20,9 @@ $ac-button--small__height: 36px; ac-button.ac-button--#{$color-name} { .ac-button__native { + color: var-color($color-name, "contrast"); background-color: var-color($color-name, "normal"); fill: var-color($color-name, "contrast"); - color: var-color($color-name, "contrast"); &:hover { background-color: var-color($color-name, "dark"); } @@ -43,9 +43,9 @@ $ac-button--small__height: 36px; ac-button.ac-button--#{$color-name}.ac-button--clear { .ac-button__native { + color: var-color($color-name, "normal"); background: transparent; fill: var-color($color-name, "normal"); - color: var-color($color-name, "normal"); &:hover, &:focus { background-color: var-color($color-name, "normal", 0.2); } diff --git a/core/src/components/atoms/ac-card/ac-card.scss b/core/src/components/atoms/ac-card/ac-card.scss index b6f880f4..255a29f6 100644 --- a/core/src/components/atoms/ac-card/ac-card.scss +++ b/core/src/components/atoms/ac-card/ac-card.scss @@ -7,9 +7,9 @@ ac-card { display: flex; + background: var-color("neutral", "contrast"); border: 1px solid var-color("neutral", "light"); border-radius: $border-radius-default; - background: var-color("neutral", "contrast"); box-shadow: $z2-shadow; & > [slot=icon-start] { diff --git a/core/src/components/atoms/ac-card/ac-card.vars.scss b/core/src/components/atoms/ac-card/ac-card.vars.scss index 490e7c8f..58e15216 100644 --- a/core/src/components/atoms/ac-card/ac-card.vars.scss +++ b/core/src/components/atoms/ac-card/ac-card.vars.scss @@ -10,8 +10,8 @@ ac-card.ac-card--#{$color-name} { @include define-theme-color("contrast", $color-name, "darker"); - border: 1px solid var-color($color-name, "light"); - background: var-color($color-name, "lighter"); color: var-color($color-name, "darker"); + background: var-color($color-name, "lighter"); + border: 1px solid var-color($color-name, "light"); } } diff --git a/core/src/components/atoms/ac-check/ac-check.scss b/core/src/components/atoms/ac-check/ac-check.scss index 29e4da15..98a16056 100644 --- a/core/src/components/atoms/ac-check/ac-check.scss +++ b/core/src/components/atoms/ac-check/ac-check.scss @@ -34,9 +34,9 @@ ac-check { height: $ac-check__height; margin: 0; padding: 0; + background: var-color("neutral", "contrast"); border: 2px solid var-color("neutral", "light"); outline: none; - background: var-color("neutral", "contrast"); cursor: pointer; } @@ -62,17 +62,17 @@ ac-check.ac-check--checkbox { .ac-check__custom { border-radius: $border-radius-default; &:before { - content: ""; position: absolute; - z-index: 1; top: 3px; left: 3px; + z-index: 1; box-sizing: initial; width: 8px; - transition: all $default-transition; border: 2px solid transparent; border-top-style: none; border-right-style: none; + transition: all $default-transition; + content: ""; } } } @@ -86,17 +86,17 @@ ac-check.ac-check--radio { border-radius: 100%; &:before { - content: ""; position: absolute; top: 4px; left: 4px; box-sizing: initial; width: 8px; height: 8px; + background-color: transparent; + border-radius: 100%; transform: scale(2); transition: transform $default-transition; - border-radius: 100%; - background-color: transparent; + content: ""; } } } @@ -112,8 +112,8 @@ ac-check.ac-check--radio { ac-check { .ac-check__native:checked { + .ac-check__custom { - border-color: var-color("primary", "normal"); background: var-color("primary", "normal"); + border-color: var-color("primary", "normal"); + .ac-check__label { color: var-color("primary", "normal"); @@ -130,8 +130,8 @@ ac-check.ac-check--checkbox { .ac-check__native:checked + .ac-check__custom { &:before { height: 5px; - transform: rotate(-45deg); border-color: var-color("neutral", "contrast"); + transform: rotate(-45deg); } } } @@ -143,8 +143,8 @@ ac-check.ac-check--checkbox { ac-check.ac-check--radio { .ac-check__native:checked + .ac-check__custom { &:before { - transform: scale(1); background-color: var-color("neutral", "contrast"); + transform: scale(1); } } } @@ -163,14 +163,14 @@ ac-check.ac-check--disabled { color: var-color("neutral", "normal"); } .ac-check__custom { - border-color: var-color("neutral", "light"); background: var-color("neutral", "lighter"); + border-color: var-color("neutral", "light"); } .ac-check__native:checked { + .ac-check__custom { - border-color: var-color("neutral", "normal"); background: var-color("neutral", "normal"); + border-color: var-color("neutral", "normal"); + .ac-check__label { color: var-color("neutral", "dark"); @@ -198,8 +198,8 @@ ac-check.ac-check--error { .ac-check__native:checked { + .ac-check__custom { - border-color: var-color("alert", "normal"); background: var-color("alert", "normal"); + border-color: var-color("alert", "normal"); + .ac-check__label { color: var-color("alert", "normal"); diff --git a/core/src/components/atoms/ac-check/ac-check.tsx b/core/src/components/atoms/ac-check/ac-check.tsx index c15ae3ce..98b8b3be 100644 --- a/core/src/components/atoms/ac-check/ac-check.tsx +++ b/core/src/components/atoms/ac-check/ac-check.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Host, Method, Prop, h, Watch } from '@stencil/core'; +import { Component, Element, Host, Method, Prop, Watch, h } from '@stencil/core'; import { FormFieldBehavior, FormFieldComponent } from '../../../behaviors/form-behavior'; import { Bind } from '../../../utils/lang/bind'; diff --git a/core/src/components/atoms/ac-date-picker/ac-date-picker.scss b/core/src/components/atoms/ac-date-picker/ac-date-picker.scss index 20971407..0ffe619e 100644 --- a/core/src/components/atoms/ac-date-picker/ac-date-picker.scss +++ b/core/src/components/atoms/ac-date-picker/ac-date-picker.scss @@ -11,8 +11,8 @@ } &:empty { - border: none; background: none; + border: none; } } } @@ -29,8 +29,8 @@ } &:empty { - border: none; background: none; + border: none; } } } @@ -51,8 +51,8 @@ } &.datepicker--cell-year.-other-decade- { - background: #a2ddf6; color: #fff; + background: #a2ddf6; } } @@ -72,8 +72,8 @@ } &.datepicker--cell-year.-other-decade- { - background-color: rgba(92, 196, 239, 0.1); color: #cccccc; + background-color: rgba(92, 196, 239, 0.1); } } @@ -83,25 +83,25 @@ } .datepicker--cell { - display: flex; position: relative; z-index: 1; - box-sizing: border-box; + display: flex; align-items: center; justify-content: center; + box-sizing: border-box; height: 34px; margin: 2px 0; border-radius: 50%; cursor: pointer; &.-focus- { - background: var-color("primary", "normal", 0.2); color: var-color("primary", "dark", 0.2); + background: var-color("primary", "normal", 0.2); } &.-current- { - background-color: var-color("neutral", "light"); color: var-color("neutral", "inverted"); + background-color: var-color("neutral", "light"); &.-in-range- { color: var-color("secondary", "dark", 0.2); @@ -109,9 +109,9 @@ } &.-in-range- { - border-radius: 0; - background: var-color("secondary", "normal", 20%); color: var-color("secondary", "normal", 0.2); + background: var-color("secondary", "normal", 20%); + border-radius: 0; &.-focus- { background-color: var-color("secondary", "normal" 0.12); @@ -123,8 +123,8 @@ cursor: default; &.-focus- { - background-color: var-color("neutral", "normal"); color: var-color("neutral", "light"); + background-color: var-color("neutral", "normal"); } &.-in-range- { @@ -137,9 +137,9 @@ } &.-range-from- { + background-color: var-color("secondary", "normal", 0.12); border: 1px solid var-color("secondary", "normal", 0.2); border-radius: 4px 0 0 4px; - background-color: var-color("secondary", "normal", 0.12); &.-range-to- { border-radius: 4px; @@ -147,16 +147,16 @@ } &.-range-to- { + background-color: var-color("secondary", "normal", 0.12); border: 1px solid var-color("secondary", "normal", 0.2); border-radius: 0 4px 4px 0; - background-color: var-color("secondary", "normal", 0.12); } &.-selected- { - border: none; - background: var-color("secondary", "normal"); color: #fff; font-weight: bold; + background: var-color("secondary", "normal"); + border: none; } &:empty { @@ -176,8 +176,8 @@ align-items: center; justify-content: center; color: var-color("neutral", "normal"); - font-size: 12px; font-weight: bold; + font-size: 12px; text-align: center; } @@ -212,18 +212,18 @@ .datepicker { position: absolute; - z-index: 100; left: -100000px; + z-index: 100; box-sizing: content-box; width: 260px; margin-top: -8px; - transition: opacity .2s ease, transform .2s ease, left 0s .2s; + font-size: 14px; + background: #fff; border: 1px solid rgba(0, 0, 0, .08); border-radius: 4px; - opacity: 0; - background: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, .04); - font-size: 14px; + opacity: 0; + transition: opacity .2s ease, transform .2s ease, left 0s .2s; &.-from-top- { transform: translateY(-8px); @@ -243,8 +243,8 @@ &.active { transform: translate(0); - transition: opacity .2s ease, transform .2s ease, left 0s 0s; opacity: 1; + transition: opacity .2s ease, transform .2s ease, left 0s 0s; } } @@ -253,10 +253,10 @@ position: static; right: auto; left: auto; - transform: none; border-color: #d7d7d7; - opacity: 1; box-shadow: none; + transform: none; + opacity: 1; } .datepicker--pointer { @@ -285,13 +285,13 @@ .datepicker--pointer { position: absolute; + z-index: -1; + display: none; + width: 10px; + height: 10px; background: #fff; border-top: 1px solid #dbdbdb; border-right: 1px solid #dbdbdb; - width: 10px; - height: 10px; - z-index: -1; - display: none; } .datepicker--body { @@ -305,45 +305,45 @@ .datepicker--nav { display: flex; justify-content: space-between; - border-bottom: 1px solid var-color("neutral", "lighter"); min-height: 32px; padding: 4px; + border-bottom: 1px solid var-color("neutral", "lighter"); } .datepicker--nav-title { display: flex; - cursor: pointer; align-items: center; justify-content: center; - border-radius: 4px; - font-weight: bold; - color: var-color("primary", "normal"); padding: 4px 12px; + color: var-color("primary", "normal"); + font-weight: bold; + border-radius: 4px; + cursor: pointer; i { - font-style: normal; - font-weight: normal; margin-left: 4px; + font-weight: normal; + font-style: normal; } &:hover { - background: var-color("primary", "normal", 0.2); color: var-color("primary", "dark", 0.2); + background: var-color("primary", "normal", 0.2); } &.-disabled- { - cursor: default; background: none; + cursor: default; } } .datepicker--nav-action { display: flex; - cursor: pointer; align-items: center; justify-content: center; width: 32px; border-radius: 4px; + cursor: pointer; user-select: none; &:hover { @@ -361,8 +361,8 @@ path { fill: none; - stroke: var-color("primary", "normal"); stroke-width: 2px; + stroke: var-color("primary", "normal"); } } @@ -373,14 +373,14 @@ } .datepicker--button { - color: #4eb5e6; - cursor: pointer; - border-radius: 4px; - flex: 1; display: inline-flex; - justify-content: center; + flex: 1; align-items: center; + justify-content: center; height: 32px; + color: #4eb5e6; + border-radius: 4px; + cursor: pointer; &:hover { color: #4a4a4a; @@ -389,8 +389,8 @@ } .datepicker--time { - display: flex; position: relative; + display: flex; align-items: center; padding: 4px; border-top: 1px solid #efefef; @@ -426,45 +426,23 @@ line-height: 1; } -.datepicker--time-current-hours { +.datepicker--time-current-hours, +.datepicker--time-current-minutes { position: relative; z-index: 1; padding: 4px; &:after { position: absolute; - content: ''; - background: #f0f0f0; - border-radius: 4px; - left: 0; top: 0; right: 0; bottom: 0; + left: 0; z-index: -1; - opacity: 0; - } - - &.-focus-:after { - opacity: 1; - } -} - -.datepicker--time-current-minutes { - position: relative; - z-index: 1; - padding: 4px; - - &:after { - content: ''; background: #f0f0f0; border-radius: 4px; - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; - z-index: -1; opacity: 0; + content: ""; } &.-focus-:after { @@ -473,32 +451,32 @@ } .datepicker--time-current-ampm { - text-transform: uppercase; align-self: flex-end; - color: #9c9c9c; + margin-bottom: 1px; margin-left: 6px; + color: #9c9c9c; font-size: 11px; - margin-bottom: 1px; + text-transform: uppercase; } .datepicker--time-row { display: flex; align-items: center; - font-size: 11px; height: 17px; + font-size: 11px; background: linear-gradient(to right, #dedede, #dedede) left 50%/100% 1px no-repeat; &:first-child { margin-bottom: 4px; } - input[type='range'] { - background: none; - cursor: pointer; + input[type=range] { flex: 1; height: 100%; - padding: 0; margin: 0; + padding: 0; + background: none; + cursor: pointer; &:hover::-webkit-slider-thumb { border-color: #b8b8b8; @@ -532,73 +510,73 @@ } } - input[type='range']::-webkit-slider-thumb { + input[type=range]::-webkit-slider-thumb { box-sizing: border-box; - height: 12px; width: 12px; - border-radius: 3px; - border: 1px solid #dedede; + height: 12px; + margin-top: -6px; background: #fff; + border: 1px solid #dedede; + border-radius: 3px; cursor: pointer; transition: background .2s; - margin-top: -6px; } - input[type='range']::-ms-tooltip { + input[type=range]::-ms-tooltip { display: none; } - input[type='range']::-moz-range-thumb { + input[type=range]::-moz-range-thumb { box-sizing: border-box; - height: 12px; width: 12px; - border-radius: 3px; - border: 1px solid #dedede; + height: 12px; background: #fff; + border: 1px solid #dedede; + border-radius: 3px; cursor: pointer; transition: background .2s; } - input[type='range']::-ms-thumb { + input[type=range]::-ms-thumb { box-sizing: border-box; - height: 12px; width: 12px; - border-radius: 3px; - border: 1px solid #dedede; + height: 12px; background: #fff; + border: 1px solid #dedede; + border-radius: 3px; cursor: pointer; transition: background .2s; } - input[type='range']::-webkit-slider-runnable-track { - border: none; + input[type=range]::-webkit-slider-runnable-track { height: 1px; - cursor: pointer; color: transparent; background: transparent; + border: none; + cursor: pointer; } - input[type='range']::-moz-range-track { - border: none; + input[type=range]::-moz-range-track { height: 1px; - cursor: pointer; color: transparent; background: transparent; + border: none; + cursor: pointer; } - input[type='range']::-ms-track { - border: none; + input[type=range]::-ms-track { height: 1px; - cursor: pointer; color: transparent; background: transparent; + border: none; + cursor: pointer; } - input[type='range']::-ms-fill-lower { + input[type=range]::-ms-fill-lower { background: transparent; } - input[type='range']::-ms-fill-upper { + input[type=range]::-ms-fill-upper { background: transparent; } @@ -608,35 +586,34 @@ } .datepicker--time-icon { - color: #9c9c9c; - border: 1px solid; - border-radius: 50%; - font-size: 16px; position: relative; - margin: 0 5px -1px 0; width: 1em; height: 1em; + margin: 0 5px -1px 0; + color: #9c9c9c; + font-size: 16px; + border: 1px solid; + border-radius: 50%; &:after { - content: ''; - background: currentColor; position: absolute; - height: .4em; - width: 1px; - left: calc(50% - 1px); top: calc(50% + 1px); + left: calc(50% - 1px); + width: 1px; + height: .4em; + background: currentColor; transform: translateY(-100%); + content: ""; } &:before { - width: .4em; - top: calc(50% + 1px); - content: ''; position: absolute; - background: currentColor; - - height: 1px; + top: calc(50% + 1px); left: calc(50% - 1px); + width: .4em; + height: 1px; + background: currentColor; + content: ""; } } @@ -681,8 +658,8 @@ } .-right-bottom- .datepicker--pointer { - bottom: 10px; right: calc(100% - 4px); + bottom: 10px; transform: rotate(225deg); } @@ -717,8 +694,8 @@ } .-left-bottom- .datepicker--pointer { - left: calc(100% - 4px); bottom: 10px; + left: calc(100% - 4px); transform: rotate(45deg); } @@ -730,20 +707,20 @@ right: 6px; width: 44px; height: 44px; - transition: all .2s ease-in-out; - border-radius: 2px; - background-color: var-color("neutral", "normal"); color: var-color("neutral", "dark"); font-size: 12px; + background-color: var-color("neutral", "normal"); + border-radius: 2px; + transition: all .2s ease-in-out; pointer-events: none; &:before { - content: "\f073"; position: absolute; top: 50%; left: 50%; - transform: translate(-50%, -50%); font-family: FontAwesome; + transform: translate(-50%, -50%); + content: "\f073"; } } diff --git a/core/src/components/atoms/ac-date-picker/ac-date-picker.tsx b/core/src/components/atoms/ac-date-picker/ac-date-picker.tsx index 47e6b2f3..54d6fe06 100644 --- a/core/src/components/atoms/ac-date-picker/ac-date-picker.tsx +++ b/core/src/components/atoms/ac-date-picker/ac-date-picker.tsx @@ -5,8 +5,8 @@ import { FormFieldBehavior, FormFieldComponent } from '../../../behaviors/form-b import { Bind } from '../../../utils/lang/bind'; import { CustomValidityState, ValidatorFn } from '../../../utils/validations/validations'; import { AcFaIcon } from '../../utils/ac-fa-icon'; -import { LazyAirDatePicker } from './assets/lazy-air-date-picker'; +import { LazyAirDatePicker } from './assets/lazy-air-date-picker'; @Component({ tag: 'ac-date-picker', diff --git a/core/src/components/atoms/ac-date-picker/assets/lazy-air-date-picker.tsx b/core/src/components/atoms/ac-date-picker/assets/lazy-air-date-picker.tsx index 3b2e539b..d1fe1774 100644 --- a/core/src/components/atoms/ac-date-picker/assets/lazy-air-date-picker.tsx +++ b/core/src/components/atoms/ac-date-picker/assets/lazy-air-date-picker.tsx @@ -1,9 +1,9 @@ import DatePicker from './air-datepicker.js'; export class LazyAirDatePicker { - private statusPicker: 'pendinng' | 'ready'; + private statusPicker: 'pendinng' | 'ready'; private commands: any[] = []; private _picker: any; - + constructor(baseInput: HTMLAcInputBaseElement, config: any) { this.selectDate = this.wrapperCommand(this.selectDate); this.show = this.wrapperCommand(this.show); @@ -24,9 +24,9 @@ export class LazyAirDatePicker { this._picker = $(await baseInput.getNativeInput()) .datepicker(config) .data('datepicker'); - this.commands + this.commands .forEach(command => command()); - this.commands.length = 0; + this.commands.length = 0; }); } @@ -53,7 +53,7 @@ export class LazyAirDatePicker { prev() { this._picker.prev(); } - + removeDate(date: Date) { this._picker.removeDate(date); } @@ -69,7 +69,7 @@ export class LazyAirDatePicker { setView(view: string) { this._picker.view = view; } - + setDate(date: Date) { this._picker.date = date; } @@ -131,7 +131,7 @@ export class LazyAirDatePicker { firstDay: 0 }; } - + /** * I dynamically load jQuery into application if it's not yet defined inside global * scope. This eliminates an extra step if you don't have jQuery already and if you @@ -140,10 +140,10 @@ export class LazyAirDatePicker { private loadjQuery(callback: () => void) { const jQuery = (window as any).jQuery; const wrapperCallback = () => { - this.statusPicker = "ready"; + this.statusPicker = 'ready'; callback(); }; - this.statusPicker = "pendinng"; + this.statusPicker = 'pendinng'; if (!jQuery) { const link = 'https://code.jquery.com/jquery-3.3.1.min.js'; diff --git a/core/src/components/atoms/ac-gauge/ac-gauge.scss b/core/src/components/atoms/ac-gauge/ac-gauge.scss index 735ccf47..7115204a 100644 --- a/core/src/components/atoms/ac-gauge/ac-gauge.scss +++ b/core/src/components/atoms/ac-gauge/ac-gauge.scss @@ -6,8 +6,8 @@ // --------------------------------------------------------------------------------------------------------------------- ac-gauge { - display: inline-flex; position: relative; + display: inline-flex; align-items: center; justify-content: center; @@ -73,8 +73,8 @@ ac-gauge.ac-gauge--void { .ac-gauge__bg { path { - stroke: var-color("neutral", "light") !important; fill: var-color("neutral", "lighter") !important; + stroke: var-color("neutral", "light") !important; } } diff --git a/core/src/components/atoms/ac-gauge/ac-gauge.skeleton.scss b/core/src/components/atoms/ac-gauge/ac-gauge.skeleton.scss index d0b148a8..aad74b64 100644 --- a/core/src/components/atoms/ac-gauge/ac-gauge.skeleton.scss +++ b/core/src/components/atoms/ac-gauge/ac-gauge.skeleton.scss @@ -8,8 +8,8 @@ .ac-gauge__bg { path { - stroke: none; fill: #ededed; + stroke: none; } } .ac-gauge__inner { diff --git a/core/src/components/atoms/ac-gauge/ac-gauge.vars.scss b/core/src/components/atoms/ac-gauge/ac-gauge.vars.scss index d82ce735..fd80256b 100644 --- a/core/src/components/atoms/ac-gauge/ac-gauge.vars.scss +++ b/core/src/components/atoms/ac-gauge/ac-gauge.vars.scss @@ -14,8 +14,8 @@ .ac-gauge__bg { path { - stroke: var-color($color-name, "light"); fill: var-color($color-name, "lighter"); + stroke: var-color($color-name, "light"); } } diff --git a/core/src/components/atoms/ac-header/ac-header.scss b/core/src/components/atoms/ac-header/ac-header.scss index ec77d482..946857b0 100644 --- a/core/src/components/atoms/ac-header/ac-header.scss +++ b/core/src/components/atoms/ac-header/ac-header.scss @@ -6,11 +6,11 @@ // --------------------------------------------------------------------------------------------------------------------- ac-header { - display: block; position: relative; z-index: $z-header; - box-sizing: border-box; + display: block; align-items: center; + box-sizing: border-box; width: $ac-header__width; transition: background $slow-transition, box-shadow $slow-transition; diff --git a/core/src/components/atoms/ac-header/ac-header.vars.scss b/core/src/components/atoms/ac-header/ac-header.vars.scss index 66d84279..438b91f2 100644 --- a/core/src/components/atoms/ac-header/ac-header.vars.scss +++ b/core/src/components/atoms/ac-header/ac-header.vars.scss @@ -17,8 +17,8 @@ $ac-header__width: 100%; ac-header.ac-header--#{$color-name}{ @include down-md { @include define-theme-colors("primary"); - background: var-color($color-name, "normal"); color: var-color($color-name, "contrast"); + background: var-color($color-name, "normal"); } } } diff --git a/core/src/components/atoms/ac-input-base/ac-input-base.scss b/core/src/components/atoms/ac-input-base/ac-input-base.scss index 75e2a933..5103bbf1 100644 --- a/core/src/components/atoms/ac-input-base/ac-input-base.scss +++ b/core/src/components/atoms/ac-input-base/ac-input-base.scss @@ -10,37 +10,37 @@ ac-input-base { min-height: $ac-input-base__min-height; max-height: $ac-input-base__min-height; overflow: hidden; + background-color: var-color("neutral", "contrast"); border: 2px solid var-color("neutral", "light"); border-radius: $border-radius-default; - background-color: var-color("neutral", "contrast"); .ac-input__input-container { - display: flex; position: relative; + display: flex; width: 100%; .ac-input__label { position: absolute; top: 12px; left: $spacer-small; - transition: font-size $default-transition, top $default-transition; color: var-color("neutral", "darker"); font-size: $font-small; line-height: 1; white-space: nowrap; - pointer-events: none; + transition: font-size $default-transition, top $default-transition; user-select: none; + pointer-events: none; } input.ac-input__native { box-sizing: border-box; width: 100%; padding: 20px $spacer-small $spacer-tiny; - border: none; - background-color: transparent; color: var-color("neutral", "inverted"); font-size: $font-small; line-height: 1; + background-color: transparent; + border: none; &::placeholder { color: current-color("contrast", 0.6); } @@ -122,8 +122,8 @@ ac-input-base.ac-input-base--small { // --------------------------------------------------------- ac-input-base.ac-input-base--error { - border-color: var-color("alert", "normal"); background-color: white; + border-color: var-color("alert", "normal"); .ac-input__label { color: var-color("alert", "normal"); diff --git a/core/src/components/atoms/ac-navdrawer/ac-navdrawer-controller/ac-navdrawer-controller.tsx b/core/src/components/atoms/ac-navdrawer/ac-navdrawer-controller/ac-navdrawer-controller.tsx index 1ef4f1b8..30bddd5c 100644 --- a/core/src/components/atoms/ac-navdrawer/ac-navdrawer-controller/ac-navdrawer-controller.tsx +++ b/core/src/components/atoms/ac-navdrawer/ac-navdrawer-controller/ac-navdrawer-controller.tsx @@ -27,7 +27,6 @@ export class AcModalController implements ControllerComponent { navDrawer.remove(); diff --git a/core/src/components/atoms/ac-navdrawer/ac-navdrawer.scss b/core/src/components/atoms/ac-navdrawer/ac-navdrawer.scss index 20c26433..be6d39b4 100644 --- a/core/src/components/atoms/ac-navdrawer/ac-navdrawer.scss +++ b/core/src/components/atoms/ac-navdrawer/ac-navdrawer.scss @@ -6,22 +6,22 @@ // --------------------------------------------------------------------------------------------------------------------- ac-navdrawer { - display: flex; position: relative; + display: flex; flex-direction: column; - height: 100%; width: 260px; - transition: width $default-transition; + height: 100%; + color: var-color("neutral", "inverted"); background: var-color("neutral", "contrast"); box-shadow: $z2-shadow--center; - color: var-color("neutral", "inverted"); + transition: width $default-transition; .ac-navdrawer__header { display: flex; - box-sizing: border-box; align-items: center; justify-content: space-between; + box-sizing: border-box; width: 100%; min-height: 64px; padding: 0; @@ -31,8 +31,8 @@ ac-navdrawer { .ac-navdrawer__title { display: flex; flex-direction: row; - justify-content: space-between; align-items: center; + justify-content: space-between; width: 100%; margin: $spacer-small $spacer-medium 0; .ac-navdrawer__title-content { @@ -43,10 +43,10 @@ ac-navdrawer { width: 32px; height: 32px; .ac-button__native { - min-height: 100%; + width: 100%; min-width: 100%; height: 100%; - width: 100%; + min-height: 100%; } } } @@ -54,8 +54,8 @@ ac-navdrawer { .ac-navdrawer__content { display: flex; - box-sizing: border-box; justify-content: center; + box-sizing: border-box; height: 100%; max-height: 100%; overflow-x: hidden; @@ -64,11 +64,11 @@ ac-navdrawer { // Brand Button .ac-navdrawer__toggle-button { - display: flex; position: absolute; - z-index: $z-fab; top: 28px; left: calc(100% + 2px); + z-index: $z-fab; + display: flex; align-items: center; justify-content: center; cursor: pointer; @@ -116,7 +116,7 @@ ac-navdrawer { } } - + &.transition--before-enter, &.transition--before-leave { transform: translate(300px); diff --git a/core/src/components/atoms/ac-navdrawer/ac-navdrawer.tsx b/core/src/components/atoms/ac-navdrawer/ac-navdrawer.tsx index d11b938f..33e6b235 100644 --- a/core/src/components/atoms/ac-navdrawer/ac-navdrawer.tsx +++ b/core/src/components/atoms/ac-navdrawer/ac-navdrawer.tsx @@ -1,10 +1,10 @@ import { faChevronLeft, faChevronRight, faTimes } from '@fortawesome/free-solid-svg-icons'; -import { Component, Element, Host, Prop, Watch, h, Event, EventEmitter } from '@stencil/core'; +import { Component, Element, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core'; +import { TransitionBehavior, TransitionComponent } from '../../../behaviors/transition-behavior'; import { Bind } from '../../../utils/lang/bind'; import { AcFaIcon } from '../../utils/ac-fa-icon'; import { AcNeogridShape } from '../../utils/ac-neogrid-shape'; -import { TransitionComponent, TransitionBehavior } from '../../../behaviors/transition-behavior'; /** * Accera's Sidebar webcomponent. @@ -14,31 +14,6 @@ import { TransitionComponent, TransitionBehavior } from '../../../behaviors/tran styleUrl: 'ac-navdrawer.scss', }) export class AcNavdrawer implements TransitionComponent { - childMenus: HTMLAcMenuElement[]; - /** - * The instance of the transition behavior used to animate this component. - */ - transitionBehavior = new TransitionBehavior(this); - @Element() host: HTMLAcNavdrawerElement; - - /** - * Show or hide toggle button - */ - @Prop() showToggle: boolean = true; - - /** - * Show title in the navdrawer and toggle header - */ - @Prop() title: string; - /** - * The color theme. - */ - @Prop() theme: string; - - /** - * Compact mode. - */ - @Prop({ mutable: true }) compact: boolean; @Watch('compact') compactDidUpdate() { @@ -51,29 +26,11 @@ export class AcNavdrawer implements TransitionComponent { this.loadItemsFromHTML(); } - componentWillLoad() {} componentDidUnload() { this.closeEv.emit(); } - private loadItemsFromHTML() { - this.childMenus = Array.from(this.host.querySelectorAll('ac-menu')); - } - - @Bind - private toggleMode() { - this.compact = !this.compact; - } - - @Bind - private close() { - this.host.remove(); - } - - @Event({ eventName: 'close' }) closeEv: EventEmitter; - - render() { return ( {this.title} - - + + : } @@ -107,4 +71,45 @@ export class AcNavdrawer implements TransitionComponent { ); } + childMenus: HTMLAcMenuElement[]; + /** + * The instance of the transition behavior used to animate this component. + */ + transitionBehavior = new TransitionBehavior(this); + @Element() host: HTMLAcNavdrawerElement; + + /** + * Show or hide toggle button + */ + @Prop() showToggle = true; + + /** + * Show title in the navdrawer and toggle header + */ + @Prop() title: string; + /** + * The color theme. + */ + @Prop() theme: string; + + /** + * Compact mode. + */ + @Prop({ mutable: true }) compact: boolean; + + @Event({ eventName: 'close' }) closeEv: EventEmitter; + + private loadItemsFromHTML() { + this.childMenus = Array.from(this.host.querySelectorAll('ac-menu')); + } + + @Bind + private toggleMode() { + this.compact = !this.compact; + } + + @Bind + private close() { + this.host.remove(); + } } diff --git a/core/src/components/atoms/ac-navdrawer/ac-navdrawer.vars.scss b/core/src/components/atoms/ac-navdrawer/ac-navdrawer.vars.scss index eba00d95..80abf984 100644 --- a/core/src/components/atoms/ac-navdrawer/ac-navdrawer.vars.scss +++ b/core/src/components/atoms/ac-navdrawer/ac-navdrawer.vars.scss @@ -7,8 +7,8 @@ @mixin navdrawer-variations($color-name) { ac-navdrawer.ac-navdrawer--#{$color-name} { @include define-theme-colors($color-name); - background: var-color($color-name, "dark"); color: var-color($color-name, "contrast"); + background: var-color($color-name, "dark"); .ac-navdrawer__toggle-button { .ac-navdrawer__toggle-button-bg { fill: var-color($color-name, "dark"); diff --git a/core/src/components/atoms/ac-progress/ac-progress.scss b/core/src/components/atoms/ac-progress/ac-progress.scss index ddce4e42..17a1ac78 100644 --- a/core/src/components/atoms/ac-progress/ac-progress.scss +++ b/core/src/components/atoms/ac-progress/ac-progress.scss @@ -6,17 +6,17 @@ // --------------------------------------------------------------------------------------------------------------------- ac-progress { - display: block; position: relative; + display: block; width: 100%; height: 8px; border-radius: 8px; .ac-progress__meter { - display: block; position: absolute; + display: block; height: 100%; - transition: width $slow-transition; border-radius: inherit; + transition: width $slow-transition; } } diff --git a/core/src/components/atoms/ac-stepper/ac-stepper.scss b/core/src/components/atoms/ac-stepper/ac-stepper.scss index 3bd26641..f21d71e6 100644 --- a/core/src/components/atoms/ac-stepper/ac-stepper.scss +++ b/core/src/components/atoms/ac-stepper/ac-stepper.scss @@ -9,33 +9,33 @@ ac-stepper { .ac-stepper__step { display: flex; - box-sizing: border-box; align-items: center; justify-content: center; + box-sizing: border-box; width: 44px; height: 44px; margin-left: 44px; - border: 2px solid var-color("secondary", "normal"); - border-radius: 100%; - fill: var-color("secondary", "normal"); color: var-color("secondary", "normal"); font-weight: bold; + border: 2px solid var-color("secondary", "normal"); + border-radius: 100%; user-select: none; + fill: var-color("secondary", "normal"); &:after { - content: ""; position: absolute; width: 44px; height: 1px; margin-left: -44px; background: var-color("secondary", "normal"); + content: ""; } &.ac-stepper__step--active { - border-color: var-color("primary", "normal"); + color: var-color("neutral", "contrast"); background-color: var-color("primary", "normal"); + border-color: var-color("primary", "normal"); fill: var-color("neutral", "contrast"); - color: var-color("neutral", "contrast"); &:after { height: 2px; background: var-color("primary", "normal"); diff --git a/core/src/components/atoms/ac-table/ac-table.scss b/core/src/components/atoms/ac-table/ac-table.scss index f4089585..7a5ebfd9 100644 --- a/core/src/components/atoms/ac-table/ac-table.scss +++ b/core/src/components/atoms/ac-table/ac-table.scss @@ -14,9 +14,9 @@ ac-table { thead { th { padding-bottom: 11px; - border-bottom: 2px solid var-color("neutral", "lighter"); - text-align: start; white-space: nowrap; + text-align: start; + border-bottom: 2px solid var-color("neutral", "lighter"); strong { padding-right: $spacer-tiny; @@ -39,8 +39,8 @@ ac-table { } .order { - display: inline-flex; position: relative; + display: inline-flex; align-items: flex-start; justify-content: flex-start; pointer-events: none; @@ -81,8 +81,8 @@ ac-table { } tbody { .table--loading { - display: flex; position: absolute; + display: flex; align-items: center; justify-content: center; width: 100%; diff --git a/core/src/components/atoms/ac-table/ac-table.tsx b/core/src/components/atoms/ac-table/ac-table.tsx index b433d836..5b3503b7 100644 --- a/core/src/components/atoms/ac-table/ac-table.tsx +++ b/core/src/components/atoms/ac-table/ac-table.tsx @@ -1,4 +1,4 @@ -import { Component, Event, EventEmitter, Prop, Watch, h, Method } from '@stencil/core'; +import { Component, Event, EventEmitter, Method, Prop, Watch, h } from '@stencil/core'; import { sortArray } from '../../../utils/collections/sort-array'; import { Bind } from '../../../utils/lang/bind'; diff --git a/core/src/components/atoms/ac-toast/ac-toast.scss b/core/src/components/atoms/ac-toast/ac-toast.scss index af13b98d..64836ae4 100644 --- a/core/src/components/atoms/ac-toast/ac-toast.scss +++ b/core/src/components/atoms/ac-toast/ac-toast.scss @@ -11,10 +11,10 @@ ac-toast { max-width: 392px; max-height: 88px; margin: 20px; - transition: transform $default-transition; + color: white; border-radius: $border-radius-default; box-shadow: $z3-shadow; - color: white; + transition: transform $default-transition; &.transition--before-enter { transform: scale(0.7); @@ -29,8 +29,8 @@ ac-toast { } .ac-toast__header { - display: flex; position: relative; + display: flex; align-items: center; justify-content: space-between; height: 28px; diff --git a/core/src/components/atoms/ac-toggle/ac-toggle.scss b/core/src/components/atoms/ac-toggle/ac-toggle.scss index e30f82b6..30752481 100644 --- a/core/src/components/atoms/ac-toggle/ac-toggle.scss +++ b/core/src/components/atoms/ac-toggle/ac-toggle.scss @@ -27,26 +27,26 @@ ac-toggle { } .ac-toggle__custom { - display: flex; position: relative; + display: flex; align-items: center; min-width: 40px; max-width: 40px; height: 20px; - transition: $fast-transition; - border-radius: 10px; background-color: var-color("neutral", "light"); + border-radius: 10px; cursor: pointer; + transition: $fast-transition; &:before { - content: ""; position: absolute; width: 12px; height: 12px; margin: 0 $spacer-tiny / 2; - transition: $fast-transition; - border-radius: 100%; background-color: var-color("neutral", "contrast"); + border-radius: 100%; + transition: $fast-transition; + content: ""; } } } @@ -92,14 +92,14 @@ ac-toggle.ac-toggle--disabled { } .ac-toggle__custom { - border-color: var-color("neutral", "light"); background: var-color("neutral", "lighter"); + border-color: var-color("neutral", "light"); } .ac-toggle__native:checked { + .ac-toggle__custom { - border-color: var-color("neutral", "normal"); background: var-color("neutral", "normal"); + border-color: var-color("neutral", "normal"); + .ac-toggle__label { color: var-color("neutral", "dark"); diff --git a/core/src/components/molecules/ac-autocomplete/ac-autocomplete.tsx b/core/src/components/molecules/ac-autocomplete/ac-autocomplete.tsx index 46d63c70..c886a0d4 100644 --- a/core/src/components/molecules/ac-autocomplete/ac-autocomplete.tsx +++ b/core/src/components/molecules/ac-autocomplete/ac-autocomplete.tsx @@ -1,18 +1,18 @@ -import { Component, Prop, h, Host, Element, State, Watch, Method, EventEmitter, Event } from '@stencil/core'; +import { faSpinner } from '@fortawesome/free-solid-svg-icons'; +import { Component, Element, Event, EventEmitter, Host, Method, Prop, State, Watch, h } from '@stencil/core'; import { AsyncDataBehavior, AsyncDataComponent, AsyncMetadata } from '../../../behaviors/async-data-behavior'; -import { AcOption } from '../../../utils/types/ac-option'; import { createControllerPortal } from '../../../behaviors/controller-behavior/create-controller-portal'; -import { AcPanel } from '../../organisms/ac-panel/ac-panel'; -import { AcPopper } from '../../portals/ac-popper/ac-popper'; -import { ensureController } from '../../../utils/stencil/ensure-controller'; +import { FocusBehavior } from '../../../behaviors/focus-behavior'; +import { FormFieldBehavior, FormFieldComponent } from '../../../behaviors/form-behavior'; import { Bind } from '../../../utils/lang/bind'; import { Debounced } from '../../../utils/lang/reactivity'; -import { FocusBehavior } from '../../../behaviors/focus-behavior'; -import { FormFieldComponent, FormFieldBehavior } from '../../../behaviors/form-behavior'; -import { ValidatorFn, CustomValidityState } from '../../../utils/validations/validations'; +import { ensureController } from '../../../utils/stencil/ensure-controller'; +import { AcOption } from '../../../utils/types/ac-option'; +import { CustomValidityState, ValidatorFn } from '../../../utils/validations/validations'; +import { AcPanel } from '../../organisms/ac-panel/ac-panel'; +import { AcPopper } from '../../portals/ac-popper/ac-popper'; import { AcFaIcon } from '../../utils/ac-fa-icon'; -import { faSpinner } from '@fortawesome/free-solid-svg-icons'; @Component({ tag: 'ac-autocomplete', @@ -20,14 +20,137 @@ import { faSpinner } from '@fortawesome/free-solid-svg-icons'; }) export class AcAutocomplete implements AsyncDataComponent, FormFieldComponent { + @Watch('error') + errorDidUpdate(error) { + if (error) { + this.acInputBase.error = true; + this.formFieldBehavior.setInvalid(); + } else { + this.acInputBase.error = false; + this.formFieldBehavior.setValid(); + } + } + + @Method() + async getFormFieldBehavior() { + return this.formFieldBehavior; + } + + @Bind + handleSelected(option: AcOption) { + this.selectedText = option.title; + this.value = option.value; + this.requestCheckValidity = true; + this.formFieldBehavior.setDirty(); + this.filter = null; + this.isPanelOpen = false; + } + + getFetchParams() { + return { filter: this.filter }; + } + + @Watch('isPanelOpen') + isShowingPanelDidUpdate() { + this.hasFocus = this.isPanelOpen; + } + + whenReceiveData(metaData: AsyncMetadata) { + this.options = metaData.data; + this.isPanelOpen = true; + } + + componentDidUpdate() { + if (this.requestCheckValidity) { + this.formFieldBehavior.checkValidity(this.value); + this.requestCheckValidity = false; + this.selectChange.emit(this.value); + } + } + /** + * Toggle the panel view. + */ + whenBlur(element) { + // If the target element is'nt a child of the panel. + if (!this.selectPanel.contains(element)) { + if (this.isPanelOpen) { + this.isPanelOpen = !this.isPanelOpen; + } + if (this.requestCheckValidity === false && this.isPanelOpen === false) { + if (!this.options.some(x => x.title.toString().toUpperCase().includes(this.acInputBase.value.toUpperCase()))) { + this.acInputBase.value = ''; + } + } + this.formFieldBehavior.setTouched(); + } + } + componentDidUnload() { + this.isPanelOpen = false; + } + + render() { + const SelectPanel = this.SelectPanel; + return + this.acInputBase = acInputBase} + class="ac-autocomplete__input" + name={this.name} + disabled={this.disabled} + type="text" + label={this.label} + value={this.selectedText} + onKeyUp={this.handleDebouncedKeyUp} + size={this.size} + > + {this.loading && + + } + + this.selectPanel = selectPanel} + class="ac-autocomplete__panel" + popperPivot={this.host} + reset={!this.isPanelOpen} + > +
    + {this.options.length === 0 + ?
  • + {this.noResultsLabel} {this.filter} +
    • + : this.options.map((option, index) => ( +
  • this.handleSelected(option)} + > + {option.title} +
    • + ))} +
+ + ; + } + + private SelectPanel = + createControllerPortal(ensureController('ac-panel-controller')); + + /** + * A reference to the ac-panel. + */ + private selectPanel: HTMLAcPanelElement; + /** * A reference to the component element. */ @Element() host: HTMLElement; + /** * A reference to the ac-input-base component. */ acInputBase: HTMLAcInputBaseElement; + /** * The name of the internal input. */ @@ -56,7 +179,7 @@ export class AcAutocomplete implements AsyncDataComponent = new AsyncDataBehavior(this); + asyncDataBehavior = new AsyncDataBehavior(this); /** * The instance of the FormFieldBehavior. */ @@ -103,54 +226,21 @@ export class AcAutocomplete implements AsyncDataComponent; - private SelectPanel = createControllerPortal(ensureController('ac-panel-controller')); - /** - * A reference to the ac-panel. - */ - private selectPanel: HTMLAcPanelElement; - /** * The instance of the FocusBehavior used to close the panel when the user clicks outside. */ focusBehavior = new FocusBehavior(this); - @Watch('error') - errorDidUpdate(error) { - if (error) { - this.acInputBase.error = true; - this.formFieldBehavior.setInvalid(); - } else { - this.acInputBase.error = false; - this.formFieldBehavior.setValid(); - } - } - - @Method() - async getFormFieldBehavior() { - return this.formFieldBehavior; - } - - @Bind - handleSelected(option: AcOption) { - this.selectedText = option.title; - this.value = option.value; - this.requestCheckValidity = true; - this.formFieldBehavior.setDirty(); - this.filter = null; - this.isPanelOpen = false; - } - - @Bind @Debounced(200) private async handleDebouncedKeyUp(event) { @@ -158,90 +248,6 @@ export class AcAutocomplete implements AsyncDataComponent) { - this.options = metaData.data; - this.isPanelOpen = true; - } - - componentDidUpdate() { - if (this.requestCheckValidity) { - this.formFieldBehavior.checkValidity(this.value); - this.requestCheckValidity = false; - this.selectChange.emit(this.value); - } - } - /** - * Toggle the panel view. - */ - whenBlur(element) { - // If the target element is'nt a child of the panel. - if (!this.selectPanel.contains(element)) { - if (this.isPanelOpen) { - this.isPanelOpen = !this.isPanelOpen; - } - if (this.requestCheckValidity === false && this.isPanelOpen === false) { - if (!this.options.some(x => x.title.toString().toUpperCase().includes(this.acInputBase.value.toUpperCase()))) { - this.acInputBase.value = ''; - } - } - this.formFieldBehavior.setTouched(); - } - } - componentDidUnload() { - this.isPanelOpen = false; - } - - render() { - const SelectPanel = this.SelectPanel; - return - this.acInputBase = acInputBase} - class="ac-autocomplete__input" - name={this.name} - disabled={this.disabled} - type="text" - label={this.label} - value={this.selectedText} - onKeyUp={this.handleDebouncedKeyUp} - size={this.size} - > - {this.loading && } - - this.selectPanel = selectPanel} - class="ac-autocomplete__panel" - popperPivot={this.host} - reset={!this.isPanelOpen}> -
    - {this.options.length === 0 - ?
  • - {this.noResultsLabel} {this.filter} -
    • - : this.options.map((option, index) => ( -
  • this.handleSelected(option)}> - {option.title} -
    • - ))} -
- - ; - } } interface AutocompleteFetchParams { diff --git a/core/src/components/molecules/ac-collapse/ac-collapse.tsx b/core/src/components/molecules/ac-collapse/ac-collapse.tsx new file mode 100644 index 00000000..e69de29b diff --git a/core/src/components/molecules/ac-menu/ac-menu-item/ac-menu-item.scss b/core/src/components/molecules/ac-menu/ac-menu-item/ac-menu-item.scss index 8fe808e4..d22ccbf7 100644 --- a/core/src/components/molecules/ac-menu/ac-menu-item/ac-menu-item.scss +++ b/core/src/components/molecules/ac-menu/ac-menu-item/ac-menu-item.scss @@ -9,26 +9,27 @@ ac-menu-item { display: block; .ac-menu-item__native { - display: flex; position: relative; + display: flex; align-items: center; justify-content: space-between; height: $ac-button--small__height; padding: 0 $spacer-small; + color: current-color("contrast", 0.8); + text-decoration: none; + background: transparent; + border-radius: $border-radius-default; + cursor: pointer; transition: background-color $slow-transition, color $slow-transition, fill $slow-transition; - border-radius: $border-radius-default; - background: transparent; fill: current-color("contrast", 0.8); - color: current-color("contrast", 0.8); - text-decoration: none; - cursor: pointer; + &:hover, &:focus { - background-color: current-color("contrast", 0.04); color: current-color("contrast"); + background-color: current-color("contrast", 0.04); } &:active { background-color: current-color("contrast", 0.08); @@ -45,20 +46,20 @@ ac-menu-item { } &:before { - content: ""; position: absolute; top: 50%; left: -8px; width: 4px; height: 0; + background-color: var-color("primary", "normal"); + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; transition: top .4s ease-in-out, width .4s ease-in-out, height .4s ease-in-out, border-radius .4s ease-in-out; - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - background-color: var-color("primary", "normal"); + content: ""; } } @@ -66,8 +67,8 @@ ac-menu-item { height: auto; max-height: 0; overflow: hidden; - transition: max-height $slow-transition, opacity $slow-transition; opacity: 0; + transition: max-height $slow-transition, opacity $slow-transition; ac-menu-item { .ac-menu-item__text { @@ -145,9 +146,9 @@ ac-menu-item.ac-menu-item--collapsed.ac-menu-item--icon-only { ac-menu-item.ac-menu-item--active { & > .ac-menu-item__native { - fill: var-color("primary", "normal"); color: var-color("primary", "normal"); font-weight: bold; + fill: var-color("primary", "normal"); &:before { top: calc(50% - 12px); height: 24px; diff --git a/core/src/components/molecules/ac-menu/ac-menu.scss b/core/src/components/molecules/ac-menu/ac-menu.scss index 82aa3e4f..05c97c35 100644 --- a/core/src/components/molecules/ac-menu/ac-menu.scss +++ b/core/src/components/molecules/ac-menu/ac-menu.scss @@ -18,8 +18,8 @@ ac-menu { padding-bottom: $spacer-small; .ac-menu__group-title { color: current-color("contrast", 0.32); - font-size: $font-xtiny; font-weight: bold; + font-size: $font-xtiny; text-transform: uppercase; } } @@ -27,11 +27,11 @@ ac-menu { // @TODO: Change the way that we customize compound components .ac-menu__search-bar { margin-bottom: $spacer-medium; + background: current-color("contrast", 0.08); + border: 0; transition: opacity $default-transition, background $default-transition; - border: 0px; - background: current-color("contrast", 0.08); fill: current-color("contrast") !important; &:hover, &.ac-input--focus { background: current-color("contrast", 0.16); diff --git a/core/src/components/molecules/ac-order-list/ac-order-list.scss b/core/src/components/molecules/ac-order-list/ac-order-list.scss index 312e866f..b44b1704 100644 --- a/core/src/components/molecules/ac-order-list/ac-order-list.scss +++ b/core/src/components/molecules/ac-order-list/ac-order-list.scss @@ -4,15 +4,15 @@ ac-order-list { display: flex; - align-items: flex-start; flex-direction: column; - height: 100%; + align-items: flex-start; width: 100%; + height: 100%; .ac-order-list__header-title { + display: flex; height: 24px; margin: 0 0 8px 0; - display: flex; color: var-color("neutral", "darker"); } @@ -28,11 +28,11 @@ ac-order-list { .ac-order-list__search-bar { width: 100%; + margin-bottom: $spacer-small; border-top: none; - border-left: none; border-right: none; border-bottom-width: 1px; - margin-bottom: $spacer-small; + border-left: none; .ac-input__native { padding-left: 0 !important; @@ -56,4 +56,4 @@ ac-order-list { } } -} \ No newline at end of file +} diff --git a/core/src/components/molecules/ac-order-list/ac-order-list.tsx b/core/src/components/molecules/ac-order-list/ac-order-list.tsx index 5450e2cf..2f709d40 100644 --- a/core/src/components/molecules/ac-order-list/ac-order-list.tsx +++ b/core/src/components/molecules/ac-order-list/ac-order-list.tsx @@ -1,8 +1,9 @@ -import { Component, Prop, Method, Element, h, EventEmitter, Event, Watch } from '@stencil/core'; -import { AcFaIcon } from '../../utils/ac-fa-icon'; import { faSearch } from '@fortawesome/free-solid-svg-icons'; +import { Component, Element, Event, EventEmitter, Method, Prop, Watch, h } from '@stencil/core'; import { isEmpty } from 'ramda'; + import { AcOption } from '../../../utils/types/ac-option'; +import { AcFaIcon } from '../../utils/ac-fa-icon'; @Component({ tag: 'ac-order-list', @@ -34,15 +35,13 @@ export class AcOrderList { /** * If true, the component will handle multiple selected items. */ - @Prop({ reflectToAttr: true }) multiple: boolean = false; + @Prop({ reflectToAttr: true }) multiple = false; /** * Event trigger on state change - * @param {AcList} acList - Component. */ @Event() listChange: EventEmitter; - @Watch('options') handleOptionsChange() { this.options @@ -129,13 +128,14 @@ export class AcOrderList { fill="clear" icon-only > - +
    {listItems.length > 0 ? listItems - : !isEmpty(this.filterText) &&
  1. {this.noResultsLabel}
    2. + : !isEmpty(this.filterText) && +
  2. {this.noResultsLabel}
    3. }
@@ -156,7 +156,7 @@ export class AcOrderList { state.set(option.group, [(
  • {option.group} - +
    • )]); } @@ -164,15 +164,22 @@ export class AcOrderList { ? state.get(option.group) : []; elements.push(( -
  • this.handleSelect(e, option)}> - {this.multiple && this.handleChecked(e, option)}>} +
  • this.handleSelect(e, option)} + > + {this.multiple && + this.handleChecked(e, option)} + /> + } {option.title}
    • )); @@ -190,4 +197,4 @@ export class AcOrderList { } private setFilterText = (text: string) => this.filterText = text; -} \ No newline at end of file +} diff --git a/core/src/components/molecules/ac-select/ac-select.scss b/core/src/components/molecules/ac-select/ac-select.scss index 34845841..e610581f 100644 --- a/core/src/components/molecules/ac-select/ac-select.scss +++ b/core/src/components/molecules/ac-select/ac-select.scss @@ -5,8 +5,8 @@ // --------------------------------------------------------------------------------------------------------------------- ac-select { - display: flex; position: relative; + display: flex; flex-direction: column; & > [slot="item-top"], & > [slot="item-bottom"] { diff --git a/core/src/components/molecules/ac-select/ac-select.tsx b/core/src/components/molecules/ac-select/ac-select.tsx index d2f908a9..8c259a9d 100644 --- a/core/src/components/molecules/ac-select/ac-select.tsx +++ b/core/src/components/molecules/ac-select/ac-select.tsx @@ -573,8 +573,10 @@ export class AcSelect implements reset={!this.isShowingPanel} > -
      +
        {this.renderOptions(optionsToRender)}
      diff --git a/core/src/components/molecules/ac-tabs/ac-tab/ac-tab.scss b/core/src/components/molecules/ac-tabs/ac-tab/ac-tab.scss index 1d8dd458..6e92b345 100644 --- a/core/src/components/molecules/ac-tabs/ac-tab/ac-tab.scss +++ b/core/src/components/molecules/ac-tabs/ac-tab/ac-tab.scss @@ -8,12 +8,11 @@ ac-tab { padding: $ac-tab__padding; color: var-color("primary", "normal"); - font-size: $ac-tab__font-size; font-weight: 700; + font-size: $ac-tab__font-size; line-height: 1; - text-align: center; white-space: nowrap; - + text-align: center; cursor: pointer; user-select: none; diff --git a/core/src/components/molecules/ac-tabs/ac-tabs.scss b/core/src/components/molecules/ac-tabs/ac-tabs.scss index 277e01f9..b6480724 100644 --- a/core/src/components/molecules/ac-tabs/ac-tabs.scss +++ b/core/src/components/molecules/ac-tabs/ac-tabs.scss @@ -6,27 +6,27 @@ // --------------------------------------------------------------------------------------------------------------------- ac-tabs { - display: $ac-tabs__display; position: relative; + display: $ac-tabs__display; box-sizing: border-box; width: $ac-tabs__width; border-bottom: 1px solid rgba(0,0,0,.08); .ac-tabs__bullet { position: absolute; - bottom: 0px; + bottom: 0; width: 24px; height: 4px; margin-left: -11px; + background-color: var-color("secondary", "normal"); + border-top-left-radius: 4px; + border-top-right-radius: 4px; transition: left .4s ease-in-out, height .4s ease-in-out, width .4s ease-in-out, border-radius .4s ease-in-out, margin-bottom .4s ease-in-out; - border-top-left-radius: 4px; - border-top-right-radius: 4px; - background-color: var-color("secondary", "normal"); &.ac-tabs__bullet--moving { width: 72px; diff --git a/core/src/components/molecules/ac-tabs/ac-tabs.tsx b/core/src/components/molecules/ac-tabs/ac-tabs.tsx index 16ed790a..a9411b70 100644 --- a/core/src/components/molecules/ac-tabs/ac-tabs.tsx +++ b/core/src/components/molecules/ac-tabs/ac-tabs.tsx @@ -32,7 +32,7 @@ export class AcTabs { @Watch('selected') onDidSelectedUpdate() { // tslint:disable-next-line:triple-equals - const tab = this.childTabs.find(tab => tab.id == this.selected); + const tab = this.childTabs.find(childTab => childTab.id == this.selected); this.select(tab); } diff --git a/core/src/components/organisms/ac-modal/ac-modal.scss b/core/src/components/organisms/ac-modal/ac-modal.scss index 6c677352..480e7f24 100644 --- a/core/src/components/organisms/ac-modal/ac-modal.scss +++ b/core/src/components/organisms/ac-modal/ac-modal.scss @@ -5,30 +5,30 @@ // --------------------------------------------------------------------------------------------------------------------- ac-modal { - display: flex; position: relative; + display: flex; flex-direction: column; justify-content: space-between; width: 50%; min-width: 240px; min-height: 240px; - transition: transform $default-transition, - opacity $default-transition; - border-radius: 4px; background-color: var-color("neutral", "contrast"); + border-radius: 4px; box-shadow: $z3-shadow; + transition: transform $default-transition, + opacity $default-transition; .ac-modal__header { display: flex; align-items: center; justify-content: space-between; padding: $spacer-small 20px; - border-bottom: 1px solid var-color("neutral", "light"); color: var-color("neutral", "inverted"); + border-bottom: 1px solid var-color("neutral", "light"); .ac-modal__title { - font-size: 20px; font-weight: bold; + font-size: 20px; } } diff --git a/core/src/components/organisms/ac-panel/ac-panel.scss b/core/src/components/organisms/ac-panel/ac-panel.scss index bc9d23f4..8028f712 100644 --- a/core/src/components/organisms/ac-panel/ac-panel.scss +++ b/core/src/components/organisms/ac-panel/ac-panel.scss @@ -6,16 +6,15 @@ ac-panel { display: block; - box-sizing: border-box; flex-direction: column; + box-sizing: border-box; width: 100%; - - transform-origin: 0 0; - transition: opacity $default-transition, transform $default-transition; + background: var-color("neutral", "contrast"); border: 1px solid var-color("neutral", "light"); border-radius: $border-radius-default; - background: var-color("neutral", "contrast"); box-shadow: $z3-shadow; + transform-origin: 0 0; + transition: opacity $default-transition, transform $default-transition; &.transition--before-enter { transform: translateY(-10px) scaleY(0.5); diff --git a/core/src/components/organisms/ac-pick-list/ac-pick-list.scss b/core/src/components/organisms/ac-pick-list/ac-pick-list.scss index fb3083b6..c5a7a338 100644 --- a/core/src/components/organisms/ac-pick-list/ac-pick-list.scss +++ b/core/src/components/organisms/ac-pick-list/ac-pick-list.scss @@ -1,5 +1,5 @@ @import "../../../theme/variables"; -@import 'node_modules/dragula/dist/dragula'; +@import "node_modules/dragula/dist/dragula"; ac-pick-list { display: flex; @@ -9,8 +9,8 @@ ac-pick-list { .ac-pick-list__column { display: flex; - height: 100%; min-width: 232px; + height: 100%; } .ac-pick-list__action-panel { diff --git a/core/src/components/organisms/ac-pick-list/ac-pick-list.tsx b/core/src/components/organisms/ac-pick-list/ac-pick-list.tsx index 3b3b0190..54a6e9e4 100644 --- a/core/src/components/organisms/ac-pick-list/ac-pick-list.tsx +++ b/core/src/components/organisms/ac-pick-list/ac-pick-list.tsx @@ -1,11 +1,11 @@ -import { Component, Prop, Host, h, State, Method, Element } from '@stencil/core'; -import { AcOrderList } from '../../molecules/ac-order-list/ac-order-list'; -import { Bind } from '../../../utils/lang/bind'; +import { faAngleDoubleLeft, faAngleDoubleRight } from '@fortawesome/free-solid-svg-icons'; +import { Component, Element, Host, Method, Prop, State, h } from '@stencil/core'; import dragula from 'dragula'; -import { AcFaIcon } from '../../utils/ac-fa-icon'; -import { faAngleDoubleRight, faAngleDoubleLeft } from '@fortawesome/free-solid-svg-icons'; -import { AcOption } from '../../../utils/types/ac-option'; +import { Bind } from '../../../utils/lang/bind'; +import { AcOption } from '../../../utils/types/ac-option'; +import { AcOrderList } from '../../molecules/ac-order-list/ac-order-list'; +import { AcFaIcon } from '../../utils/ac-fa-icon'; @Component({ tag: 'ac-pick-list', @@ -35,7 +35,7 @@ export class AcPickList { /** * Text to be search. */ - @Prop() searchLabel: string = 'Search'; + @Prop() searchLabel = 'Search'; /** * Label to be show when no results is fouond. */ @@ -51,19 +51,19 @@ export class AcPickList { /** * Label of the button that add options on the selected ac-list. */ - @Prop() addLabel: string = 'Add'; + @Prop() addLabel = 'Add'; /** * Label of the button that add all options on the selected ac-list. */ - @Prop() addAllLabel: string = 'Add all'; + @Prop() addAllLabel = 'Add all'; /** * Label of the button that remove options on the on selected ac-list. */ - @Prop() removeLabel: string = 'Remove'; + @Prop() removeLabel = 'Remove'; /** * Label of the button that remove all options on the selected ac-list. */ - @Prop() removeAllLabel: string = 'Remove All'; + @Prop() removeAllLabel = 'Remove All'; /** * Return the selected items. @@ -125,6 +125,7 @@ export class AcPickList { */ @Bind removeOptions() { + // @TODO: Duplicated code fragment: lines 95-107 & 129-141 this.acListAvalibles.options = this.acListSelectedOptions.options .reduce((newList, option) => { if (option.selected) { @@ -144,10 +145,10 @@ export class AcPickList { * Method that handle selected options. */ @Bind - handleChangeAclistSelectedOptions(event: CustomEvent) { - if(event.detail) { + handleChangeAcListSelectedOptions(event: CustomEvent) { + if (event.detail) { event.detail.getSelectedOptions() - .then(({length}) => this.numberOfSelectedOptions = length); + .then(({ length }) => this.numberOfSelectedOptions = length); } else { this.numberOfSelectedOptions = 0; } @@ -157,9 +158,9 @@ export class AcPickList { */ @Bind handleChangeAclistAvailableOptionsSelected(event: CustomEvent) { - if(event.detail) { + if (event.detail) { event.detail.getSelectedOptions() - .then(({length}) => this.numberAvailableOptionsSelected = length); + .then(({ length }) => this.numberAvailableOptionsSelected = length); } else { this.numberAvailableOptionsSelected = 0; } @@ -202,73 +203,84 @@ export class AcPickList { const disabledRemoveAll = this.acListSelectedOptions ? this.acListSelectedOptions.options.length === 0 : true; return ( - this.acListAvalibles = acList} - searchLabel={this.searchLabel} - label={this.availableLabel} - options={this.options} - no-results-label={this.noResultsLabel} - multiple={true}> - - -
      -
      - - {this.addLabel} - - - - {this.addAllLabel} - -
      -
      - - {this.removeLabel} - - - - {this.removeAllLabel} - -
      -
      - this.acListSelectedOptions = acList} - onListChange={this.handleChangeAclistSelectedOptions} - label={this.selectedLabel} - multiple={true} - searchLabel={this.searchLabel}> - + this.acListAvalibles = acList} + searchLabel={this.searchLabel} + label={this.availableLabel} + options={this.options} + no-results-label={this.noResultsLabel} + multiple + > + + +
      +
      + + {this.addLabel} + + + + {this.addAllLabel} + +
      +
      + + {this.removeLabel} + + + + {this.removeAllLabel} + +
      +
      + this.acListSelectedOptions = acList} + onListChange={this.handleChangeAcListSelectedOptions} + label={this.selectedLabel} + searchLabel={this.searchLabel} + multiple + />       ); } } diff --git a/core/src/components/organisms/ac-upload/ac-upload.scss b/core/src/components/organisms/ac-upload/ac-upload.scss index 5fa84453..1b001451 100644 --- a/core/src/components/organisms/ac-upload/ac-upload.scss +++ b/core/src/components/organisms/ac-upload/ac-upload.scss @@ -7,9 +7,9 @@ ac-upload { .ac-upload--drop-area { display: block; height: 100%; + background: #F5F5F5; border: 2px dashed #E6E6E6; border-radius: 4px; - background: #F5F5F5; .ac-upload--wrapper { display: flex; @@ -19,12 +19,12 @@ ac-upload { height: 100%; .ac-upload--button { - padding: 16px 0px 16px; + padding: 16px 0 16px; } .ac-upload--content { width: 100%; - padding: 0px 16px 0px; + padding: 0 16px 0; text-align: center; } } @@ -39,10 +39,10 @@ ac-upload { ac-upload.ac-upload--focus { .ac-upload--drop-area { - transition: border-color ease-in-out .2s, - background ease-in-out .2s; - border-color: var-color("primary", "normal"); background: var-color("primary", "normal", 0.1); + border-color: var-color("primary", "normal"); + transition: border-color ease-in-out .2s, + background ease-in-out .2s; } } @@ -60,5 +60,3 @@ ac-upload.ac-upload--disabled { pointer-events: none; } } - - diff --git a/core/src/components/portals/ac-overlay/ac-overlay.scss b/core/src/components/portals/ac-overlay/ac-overlay.scss index 92f6add8..06cb4ad8 100644 --- a/core/src/components/portals/ac-overlay/ac-overlay.scss +++ b/core/src/components/portals/ac-overlay/ac-overlay.scss @@ -5,11 +5,11 @@ // --------------------------------------------------------------------------------------------------------------------- ac-overlay { - display: flex; position: fixed; - z-index: $z-overlay; top: 0; left: 0; + z-index: $z-overlay; + display: flex; width: 100%; height: 100%; @@ -24,8 +24,8 @@ ac-overlay { ac-overlay.ac-overlay--backdrop-dark { .ac-overlay--layer { - transition: opacity $default-transition; background-color: rgba(0, 0, 0, 0.5); + transition: opacity $default-transition; } &.transition--before-enter { @@ -55,5 +55,3 @@ ac-overlay.ac-overlay--no-layer { pointer-events: auto; } } - - diff --git a/core/src/components/templates/ac-layout/ac-layout.scss b/core/src/components/templates/ac-layout/ac-layout.scss index 84c37247..00e388f7 100644 --- a/core/src/components/templates/ac-layout/ac-layout.scss +++ b/core/src/components/templates/ac-layout/ac-layout.scss @@ -23,8 +23,8 @@ ac-layout { width: 100%; height: 100vh; overflow: auto; - transition: filter $default-transition; background: var-color("neutral", "lighter"); + transition: filter $default-transition; } .ac-layout__content-scroll { diff --git a/core/src/components/templates/ac-login/ac-login.scss b/core/src/components/templates/ac-login/ac-login.scss index 0ba88d60..bbb41450 100644 --- a/core/src/components/templates/ac-login/ac-login.scss +++ b/core/src/components/templates/ac-login/ac-login.scss @@ -5,8 +5,8 @@ // --------------------------------------------------------------------------------------------------------------------- ac-login { - display: block; position: relative; + display: block; min-width: 100%; min-height: 100vh; overflow: hidden; @@ -22,9 +22,9 @@ ac-login { .ac-login__background { position: absolute; - z-index: -1; top: -275px; left: -175px; + z-index: -1; width: 1050px; fill: $neutral__white; } diff --git a/core/src/components/templates/ac-login/ac-login.tsx b/core/src/components/templates/ac-login/ac-login.tsx index d7dcfe6e..ad55482e 100644 --- a/core/src/components/templates/ac-login/ac-login.tsx +++ b/core/src/components/templates/ac-login/ac-login.tsx @@ -1,5 +1,6 @@ import { Component, Element, Prop, h } from '@stencil/core'; -import {AcNeogridShape} from "../../utils/ac-neogrid-shape"; + +import { AcNeogridShape } from '../../utils/ac-neogrid-shape'; /** * Accera's Login Page webcomponent. diff --git a/core/src/components/templates/ac-shape/ac-shape.scss b/core/src/components/templates/ac-shape/ac-shape.scss index ab43fcf4..1f13c17a 100644 --- a/core/src/components/templates/ac-shape/ac-shape.scss +++ b/core/src/components/templates/ac-shape/ac-shape.scss @@ -5,8 +5,8 @@ // --------------------------------------------------------------------------------------------------------------------- ac-shape { - display: block; position: relative; + display: block; min-width: 100%; min-height: 100vh; overflow: hidden; @@ -21,9 +21,9 @@ ac-shape { .ac-shape__background { position: absolute; - z-index: -1; top: -275px; left: -175px; + z-index: -1; width: 1050px; height: 1050px; fill: $neutral__white; diff --git a/core/src/components/templates/ac-shape/ac-shape.tsx b/core/src/components/templates/ac-shape/ac-shape.tsx index 91b3a1a3..406c657d 100644 --- a/core/src/components/templates/ac-shape/ac-shape.tsx +++ b/core/src/components/templates/ac-shape/ac-shape.tsx @@ -1,4 +1,5 @@ import { Component, Element, h } from '@stencil/core'; + import { AcNeogridShape } from '../../utils/ac-neogrid-shape'; /** diff --git a/core/src/global/css/_layout.scss b/core/src/global/css/_layout.scss index 8a76fca8..108e9178 100644 --- a/core/src/global/css/_layout.scss +++ b/core/src/global/css/_layout.scss @@ -9,9 +9,9 @@ .ac-list { display: flex; + flex: 1; flex-direction: column; width: 100%; - flex: 1; margin: 0; padding: $spacer-tiny 0; overflow-x: hidden; @@ -25,35 +25,35 @@ .ac-list__item { display: flex; - align-items: center; flex: 0 0 27px; + align-items: center; min-height: 27px; padding: $spacer-tiny/2 $spacer-small; color: var-color("neutral", "darker"); font-size: $font-small; + white-space: nowrap; cursor: pointer; user-select: none; - white-space: nowrap; &.ac-list__item--selected { - background-color: var-color("primary", "normal", 0.08); color: var-color("primary", "normal"); + background-color: var-color("primary", "normal", 0.08); } &:hover { - background-color: var-color("primary", "normal", 0.04); color: var-color("primary", "normal"); + background-color: var-color("primary", "normal", 0.04); } } .ac-list__separator { display: flex; - align-items: center; flex: 0 0 27px; + align-items: center; overflow: hidden; - text-overflow: ellipsis; white-space: nowrap; + text-overflow: ellipsis; cursor: default; user-select: none; @@ -61,17 +61,17 @@ display: flex; flex: 1; height: .4px; - background-color: var-color("neutral", "normal"); margin: 0 $spacer-small 0; + background-color: var-color("neutral", "normal"); } .ac-list__separator-title { display: inline-block; padding: 0 $spacer-tiny 0 $spacer-small; - background-color: var-color("neutral", "contrast"); color: var-color("neutral", "normal"); font-size: $font-xtiny; text-transform: uppercase; + background-color: var-color("neutral", "contrast"); } } -} \ No newline at end of file +} diff --git a/core/src/global/css/_skeletons.scss b/core/src/global/css/_skeletons.scss index 50599f01..566c748f 100644 --- a/core/src/global/css/_skeletons.scss +++ b/core/src/global/css/_skeletons.scss @@ -43,8 +43,8 @@ .ac-skeleton .ac-skeleton--text--inline { @include cover-text-with-pseudo-skeleton(); - display: inline-flex; position: relative; + display: inline-flex; width: calc(1em * 10); } @@ -54,8 +54,8 @@ .ac-skeleton .ac-skeleton--circle { @include skeleton-background(skeleton-background); - border-radius: 100%; color: transparent; + border-radius: 100%; * { display: none; diff --git a/core/src/global/css/_tooltip.scss b/core/src/global/css/_tooltip.scss index 3ff139a0..08908c9a 100644 --- a/core/src/global/css/_tooltip.scss +++ b/core/src/global/css/_tooltip.scss @@ -10,31 +10,31 @@ &:before, &:after { - display: block; - visibility: hidden; position: absolute; left: 50%; z-index: 1; + display: block; transform: translateX(-50%); - transition: $default-transition; + visibility: hidden; opacity: 0; + transition: $default-transition; } &:before { max-width: 300px; padding: $spacer-tiny; - border-radius: $border-radius-default; - background-color: var-color("neutral", "inverted"); color: var-color("neutral", "contrast"); white-space: nowrap; + background-color: var-color("neutral", "inverted"); + border-radius: $border-radius-default; } &:after { - content: ""; width: $spacer-tiny; height: $spacer-tiny; - border-radius: 50%; background-color: var-color("neutral", "inverted"); + border-radius: 50%; + content: ""; } &:hover { @@ -48,8 +48,8 @@ [tooltip] { &:before { - content: attr(tooltip); bottom: 120%; + content: attr(tooltip); } &:after { top: -14px; @@ -58,8 +58,8 @@ [tooltip-bottom] { &:before { - content: attr(tooltip-bottom); bottom: -100%; + content: attr(tooltip-bottom); } &:after { bottom: -14px; diff --git a/core/src/global/css/_typography.scss b/core/src/global/css/_typography.scss index c8508735..182c3089 100644 --- a/core/src/global/css/_typography.scss +++ b/core/src/global/css/_typography.scss @@ -17,8 +17,8 @@ h1, h2, h3, h4, h5, h6 { } h1 { - font-size: $font-huge; font-weight: bold; + font-size: $font-huge; } h2 { diff --git a/core/src/global/css/layout/breakpoints/mixins/_breakpoints.scss b/core/src/global/css/layout/breakpoints/mixins/_breakpoints.scss index e1caf61b..8026c9d2 100644 --- a/core/src/global/css/layout/breakpoints/mixins/_breakpoints.scss +++ b/core/src/global/css/layout/breakpoints/mixins/_breakpoints.scss @@ -40,7 +40,7 @@ } } - @else { + @else { @content; } } diff --git a/core/src/theme/_colors.scss b/core/src/theme/_colors.scss index 5e26fb3d..f51440ce 100644 --- a/core/src/theme/_colors.scss +++ b/core/src/theme/_colors.scss @@ -5,39 +5,39 @@ // Branding // -------------------------------------------------- -$brand__dark-blue: #00466F; -$brand__red: #F0000A; -$brand__orange: #EF773F; -$brand__lemon: #C9D759; -$brand__lazuli: #2C65AF; -$brand__lilac: #A064FF; -$brand__purple: #6A2568; -$brand__desire: #E64451; +$brand__dark-blue: #00466f; +$brand__red: #f0000a; +$brand__orange: #ef773f; +$brand__lemon: #c9d759; +$brand__lazuli: #2c65af; +$brand__lilac: #a064ff; +$brand__purple: #6a2568; +$brand__desire: #e64451; // Functional // -------------------------------------------------- -$functional__info: #00B4F0; -$functional__success: #14C86E; +$functional__info: #00b4f0; +$functional__success: #14c86e; $functional__warning: #f9c05d; -$functional__alert: #F0000A; +$functional__alert: #f0000a; // Neutral // -------------------------------------------------- -$neutral__gray: #C8C8C8; -$neutral__white: #FFFFFF; -$neutral__black: #111111; +$neutral__gray: #c8c8c8; +$neutral__white: #fff; +$neutral__black: #111; // Shadows // -------------------------------------------------- -$z1-shadow: 0 4px 8px rgba(0,0,0, 0.08); +$z1-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); $z2-shadow: 0 8px 16px rgba(0, 0, 0, 0.08); $z2-shadow--center: 0 0 16px rgba(0, 0, 0, 0.08); -$z3-shadow: 0 16px 32px rgba(0,0,0, 0.08); -$z3-shadow--left: 16px 0px 32px rgba(0,0,0, 0.08); -$z3-shadow--right: -16px 0px 32px rgba(0,0,0, 0.08); +$z3-shadow: 0 16px 32px rgba(0, 0, 0, 0.08); +$z3-shadow--left: 16px 0 32px rgba(0, 0, 0, 0.08); +$z3-shadow--right: -16px 0 32px rgba(0, 0, 0, 0.08); diff --git a/core/src/theme/_default.theme.scss b/core/src/theme/_default.theme.scss index 5e3c1ddf..df0f742f 100644 --- a/core/src/theme/_default.theme.scss +++ b/core/src/theme/_default.theme.scss @@ -1,74 +1,70 @@ @import "./colors"; - // CSS Variables: +// CSS Variables: $theme: ( primary: ( - normal: $brand__dark-blue, // --color-primary-normal - contrast: $neutral__white, // --color-primary-contrast - dark: darken($brand__dark-blue, 10%), // --color-primary-dark - darker: darken($brand__dark-blue, 20%), // --color-primary-darker - light: lighten($brand__dark-blue, 10%), // --color-primary-light - lighter: lighten($brand__dark-blue, 20%) // --color-primary-lighter + normal: $brand__dark-blue, + contrast: $neutral__white, + dark: darken($brand__dark-blue, 10%), + darker: darken($brand__dark-blue, 20%), + light: lighten($brand__dark-blue, 10%), + lighter: lighten($brand__dark-blue, 20%) ), secondary: ( - normal: $brand__red, // --color-secondary-normal - contrast: $neutral__white, // --color-secondary-contrast - dark: darken($brand__red, 10%), // --color-secondary-dark - darker: darken($brand__red, 20%), // --color-secondary-darker - light: lighten($brand__red, 10%), // --color-secondary-light - lighter: lighten($brand__red, 20%) // --color-secondary-lighter + normal: $brand__red, + contrast: $neutral__white, + dark: darken($brand__red, 10%), + darker: darken($brand__red, 20%), + light: lighten($brand__red, 10%), + lighter: lighten($brand__red, 20%) ), info: ( - normal: $functional__info, // --color-info-normal - contrast: $neutral__white, // --color-info-contrast - dark: darken($functional__info, 10%), // --color-info-dark - darker: darken($functional__info, 20%), // --color-info-darker - light: lighten($functional__info, 10%), // --color-info-light - lighter: lighten($functional__info, 20%), // --color-info-lighter + normal: $functional__info, + contrast: $neutral__white, + dark: darken($functional__info, 10%), + darker: darken($functional__info, 20%), + light: lighten($functional__info, 10%), + lighter: lighten($functional__info, 20%), ), success: ( - normal: $functional__success, // --color-success-normal - contrast: $neutral__white, // --color-success-contrast - dark: darken($functional__success, 10%), // --color-success-dark - darker: darken($functional__success, 20%), // --color-success-darker - light: lighten($functional__success, 10%), // --color-success-light - lighter: lighten($functional__success, 20%) // --color-success-lighter + normal: $functional__success, + contrast: $neutral__white, + dark: darken($functional__success, 10%), + darker: darken($functional__success, 20%), + light: lighten($functional__success, 10%), + lighter: lighten($functional__success, 20%) ), warning: ( - normal: $functional__warning, // --color-warning-normal - contrast: $neutral__white, // --color-warning-contrast - dark: darken($functional__warning, 10%), // --color-warning-dark - darker: darken($functional__warning, 20%), // --color-warning-darker - light: lighten($functional__warning, 10%), // --color-warning-light - lighter: lighten($functional__warning, 20%) // --color-warning-lighter + normal: $functional__warning, + contrast: $neutral__white, + dark: darken($functional__warning, 10%), + darker: darken($functional__warning, 20%), + light: lighten($functional__warning, 10%), + lighter: lighten($functional__warning, 20%) ), alert: ( - normal: $functional__alert, // --color-alert-normal - contrast: $neutral__white, // --color-alert-contrast - dark: darken($functional__alert, 10%), // --color-alert-dark - darker: darken($functional__alert, 20%), // --color-alert-darker - light: lighten($functional__alert, 10%), // --color-alert-light - lighter: lighten($functional__alert, 20%) // --color-alert-lighter + normal: $functional__alert, + contrast: $neutral__white, + dark: darken($functional__alert, 10%), + darker: darken($functional__alert, 20%), + light: lighten($functional__alert, 10%), + lighter: lighten($functional__alert, 20%) ), - - // Used to toggle between the dark and the light mode neutral: ( - normal: $neutral__gray, // --color-neutral-normal - contrast: $neutral__white, // --color-neutral-contrast - inverted: $neutral__black, // --color-neutral-inverted - dark: #A0A0A0, // --color-neutral-dark - darker: #646464, // --color-neutral-darker - light: #E6E6E6, // --color-neutral-light - lighter: #F5F5F5 // --color-neutral-lighter + normal: $neutral__gray, + contrast: $neutral__white, + inverted: $neutral__black, + dark: #a0a0a0, + darker: #646464, + light: #e6e6e6, + lighter: #f5f5f5 ), - - // Root component current-color. theme: ( - normal: $neutral__white, // --color-theme-normal - contrast: $neutral__black, // --color-theme-contrast - inverted: $neutral__white, // --color-theme-inverted - dark: #A0A0A0, // --color-theme-dark - darker: #646464, // --color-theme-darker - light: #E6E6E6, // --color-theme-light - lighter: #F5F5F5 // --color-theme-lighter + normal: $neutral__white, + contrast: $neutral__black, + inverted: $neutral__white, + dark: #a0a0a0, + darker: #646464, + light: #e6e6e6, + lighter: #f5f5f5 ) -); +) #f5f5f5#e6e6e6#a0a0a0#f5f5f5#e6e6e6#a0a0a0; diff --git a/core/src/theme/_effects.scss b/core/src/theme/_effects.scss index a1e7418f..12b963b4 100644 --- a/core/src/theme/_effects.scss +++ b/core/src/theme/_effects.scss @@ -3,6 +3,6 @@ // Effects. Transitions and Transforms // --------------------------------------------------------------------------------------------------------------------- -$fast-transition: ease-in-out .05s; -$default-transition: ease-in-out .1s; -$slow-transition: ease-in-out .25s; +$fast-transition: ease-in-out 0.05s; +$default-transition: ease-in-out 0.1s; +$slow-transition: ease-in-out 0.25s; diff --git a/core/src/theme/_metrics.scss b/core/src/theme/_metrics.scss index 2b70abfc..aa51080d 100644 --- a/core/src/theme/_metrics.scss +++ b/core/src/theme/_metrics.scss @@ -29,11 +29,11 @@ $container-max-widths: ( // This variable affects the `.h-*` and `.w-*` classes. $sizes: ( - 25: 25%, - 50: 50%, - 75: 75%, - 100: 100%, - auto: auto + 25: 25%, + 50: 50%, + 75: 75%, + 100: 100%, + auto: auto ); // Default Metrics diff --git a/core/src/theme/utils/_color.utils.scss b/core/src/theme/utils/_color.utils.scss index 1a65d0f6..8072f1e1 100644 --- a/core/src/theme/utils/_color.utils.scss +++ b/core/src/theme/utils/_color.utils.scss @@ -51,8 +51,10 @@ --color-theme-#{$target-name}: #{var-color($palette-name, $palette-variation)}; --color-theme-#{$target-name}-rgb: - var(--color-#{$palette-name}-#{$palette-variation}-rgb, - #{color-to-rgb-list($value)}); + var( + --color-#{$palette-name}-#{$palette-variation}-rgb, + #{color-to-rgb-list($value)} + ); } // Get a color defined by the context theme. If it isn't defined, use the black color. diff --git a/core/src/theme/utils/_skeleton.utils.scss b/core/src/theme/utils/_skeleton.utils.scss index d5639203..1e958f28 100644 --- a/core/src/theme/utils/_skeleton.utils.scss +++ b/core/src/theme/utils/_skeleton.utils.scss @@ -34,12 +34,12 @@ } @mixin skeleton-background($animation-name) { - visibility: visible !important; - animation: $animation-name 3s linear 0s infinite normal none running; - border-radius: $border-radius-default; background: rgba(0,0,0, .08) linear-gradient(90deg, rgba(255, 255, 255, .2) 8%, - rgba(0, 0, 0, .04) 38%, rgba(255, 255, 255, .2) 60%) 0% 0% / 1000px; + rgba(0, 0, 0, .04) 38%, rgba(255, 255, 255, .2) 60%) 0 0% / 1000px; + border-radius: $border-radius-default; + visibility: visible !important; + animation: $animation-name 3s linear 0s infinite normal none running; @include hide-content(); } @@ -47,18 +47,18 @@ @mixin cover-text-with-pseudo-skeleton() { @include hide-content(); - display: flex; position: relative; + display: flex; align-items: center; color: transparent !important; user-select: none; &:before { @include skeleton-background(skeleton-background); - content: ""; - display: block; position: absolute; + display: block; width: 100%; height: 1em; + content: ""; } } diff --git a/core/src/utils/lang/types.ts b/core/src/utils/lang/types.ts index 3f646ad2..41ff4018 100644 --- a/core/src/utils/lang/types.ts +++ b/core/src/utils/lang/types.ts @@ -1,3 +1,7 @@ export type FieldsOf = { [key in keyof C]?: C[key]; } + +export type Writeable = { + [P in K]: T[P]; +} diff --git a/core/src/utils/serialize-form.ts b/core/src/utils/serialize-form.ts index ea46906f..64a11109 100644 --- a/core/src/utils/serialize-form.ts +++ b/core/src/utils/serialize-form.ts @@ -23,15 +23,16 @@ export function serializeForm(form: HTMLFormElement, options: SerializeFormOptio if (field.name && ['file', 'reset', 'button'].indexOf(field.type) === -1 && field.tagName.indexOf('-') === -1) { switch (field.type) { case 'select-multiple': - const options = []; + const selectedOptions = []; Array.prototype.slice.call(field.options).forEach(option => { - if (option.selected) { options.push(option.value); } + if (option.selected) { selectedOptions.push(option.value); } }); - assignByFormDataPath(obj, field.name, options); + assignByFormDataPath(obj, field.name, selectedOptions); break; case 'checkbox': if (field.checked) { assignByFormDataPath(obj, field.name, true); } + break; case 'radio': if (field.checked) { assignByFormDataPath(obj, field.name, field.value); } break; diff --git a/core/src/utils/stencil/create-portal.tsx b/core/src/utils/stencil/create-portal.tsx index d57d538a..7ed0a685 100644 --- a/core/src/utils/stencil/create-portal.tsx +++ b/core/src/utils/stencil/create-portal.tsx @@ -1,6 +1,6 @@ +import { h } from '@stencil/core'; import { FunctionalComponent } from '@stencil/core/dist/client/declarations/stencil.core'; import { VNode } from '@stencil/core/dist/declarations'; -import { h } from '@stencil/core'; /** * Used to render hyperscript in a domPortal component. diff --git a/core/src/utils/stencil/ensure-controller.ts b/core/src/utils/stencil/ensure-controller.ts index e46d1698..44557dac 100644 --- a/core/src/utils/stencil/ensure-controller.ts +++ b/core/src/utils/stencil/ensure-controller.ts @@ -1,10 +1,10 @@ import { isNil } from 'ramda'; -export const ensureController = controllerName => { +export const ensureController = controllerName => { let controller: HTMLElement = document.querySelector(controllerName); if (isNil(controller)) { controller = document.createElement(controllerName); document.body.appendChild(controller); } return controller; -} \ No newline at end of file +}; diff --git a/core/src/utils/types/ac-option.ts b/core/src/utils/types/ac-option.ts index 84ff3b4f..f24ffb81 100644 --- a/core/src/utils/types/ac-option.ts +++ b/core/src/utils/types/ac-option.ts @@ -32,4 +32,4 @@ export interface AcOption { * Represents order of the element. */ order: number; -} \ No newline at end of file +} diff --git a/core/src/utils/validations/validations.d.ts b/core/src/utils/validations/validations.d.ts index 6604933e..b25022d7 100644 --- a/core/src/utils/validations/validations.d.ts +++ b/core/src/utils/validations/validations.d.ts @@ -2,6 +2,7 @@ * Represents a validator function that will be consumed by the `formFieldBehavior.validate` method. */ import { FormBehavior, FormFieldBehavior } from '../../behaviors/form-behavior'; +import { Writeable } from '../lang/types'; export type ValidatorFn = (value, field: FormFieldBehavior, form: FormBehavior) => CustomValidityState | Promise | null; @@ -10,7 +11,7 @@ export type ValidatorFn = (value, field: FormFieldBehavior, form: FormBehavior) * Represents a validation error returned by a validation check. */ export type CustomValidityState = { - [key in keyof ValidityState | string]: { message?: string } | boolean; + [key in keyof Writeable | string]: { message?: string } | boolean; } export interface ValidationMessagesConfig { From 46dcde1d3729e525370ecee327f82bd1aaf76c9b Mon Sep 17 00:00:00 2001 From: menosprezzi Date: Wed, 29 Jan 2020 14:50:04 -0300 Subject: [PATCH 3/3] chore: moving hook to husky.config.js --- core/package.json | 6 +++--- .../molecules/ac-order-list/ac-order-list.tsx | 2 +- core/tslint.json | 16 ++++++++++++++-- husky.config.js | 1 + package.json | 3 +-- 5 files changed, 20 insertions(+), 8 deletions(-) diff --git a/core/package.json b/core/package.json index 0163e692..25e050b8 100644 --- a/core/package.json +++ b/core/package.json @@ -41,9 +41,9 @@ "stylelint-config-rational-order": "^0.1.2", "stylelint-config-recommended": "^3.0.0", "stylelint-order": "^3.0.0", - "tslint": "^5.16.0", - "tslint-ionic-rules": "0.0.21", - "tslint-react": "^4.0.0" + "tslint": "^6.0.0", + "tslint-ionic-rules": "^0.0.21", + "tslint-react": "^4.2.0" }, "repository": { "type": "git", diff --git a/core/src/components/molecules/ac-order-list/ac-order-list.tsx b/core/src/components/molecules/ac-order-list/ac-order-list.tsx index 2f709d40..9cf8becf 100644 --- a/core/src/components/molecules/ac-order-list/ac-order-list.tsx +++ b/core/src/components/molecules/ac-order-list/ac-order-list.tsx @@ -149,7 +149,7 @@ export class AcOrderList { : this.options; let hasGroup = false; const a = options - .sort((a, b) => a.order > b.order ? 1 : -1) + .sort((b, c) => b.order > c.order ? 1 : -1) .reduce((state, option) => { if (!(state.has(option.group))) { hasGroup = hasGroup === false && !isEmpty(option.group) ? true : hasGroup; diff --git a/core/tslint.json b/core/tslint.json index f8f77df6..da0f1c1b 100644 --- a/core/tslint.json +++ b/core/tslint.json @@ -20,7 +20,6 @@ "trailing-comma": false, "no-null-keyword": false, "no-console": false, - "no-unbound-method": true, "no-floating-promises": false, "no-invalid-template-strings": true, "ban-export-const-enum": true, @@ -53,6 +52,19 @@ "private-instance-method", "protected-instance-method" ] - }] + }], + + "no-unbound-method": { + "severity": "warning" + }, + "strict-boolean-expressions": { + "severity": "warning" + }, + "strict-boolean-conditions": { + "severity": "warning" + }, + "await-promise": { + "severity": "warning" + } } } diff --git a/husky.config.js b/husky.config.js index 4901c7c1..c541ffe6 100644 --- a/husky.config.js +++ b/husky.config.js @@ -1,5 +1,6 @@ module.exports = { hooks: { + 'pre-commit': 'npm run lint.fix --prefix core && npm run lint --prefix core', 'commit-msg': 'commitlint -E HUSKY_GIT_PARAMS', }, }; diff --git a/package.json b/package.json index c81c167f..bcfdf47d 100644 --- a/package.json +++ b/package.json @@ -5,8 +5,7 @@ "publish-latest": "lerna publish -y --force-publish=* --conventional-commits --create-release github", "publish-alpha": "lerna publish -y --force-publish=* --canary", "postinstall": "lerna bootstrap", - "start": "npm start --prefix core", - "pre-commit": "npm run lint.fix --prefix core && npm run lint --prefix core" + "start": "npm start --prefix core" }, "devDependencies": { "@commitlint/cli": "^8.3.5",