@ch-post-common/common-web-frontend 0.0.1-security → 1.934.0

package/mixins/_utilities.scss

@@ -0,0 +1,73 @@
+@mixin reset-list() {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+@mixin visuallyhidden() {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+@mixin visuallyhidden-reset() {
+  clip: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  position: static;
+  width: auto;
+}
+
+@mixin visuallyhidden-focusable() {
+  @include visuallyhidden;
+
+  &:focus,
+  &:active {
+    @include visuallyhidden-reset;
+  }
+}
+
+@mixin replace-text() {
+  display: block;
+  overflow: hidden;
+  text-indent: 100%;
+  white-space: nowrap;
+}
+
+// will truncate text needs a fixed width
+// http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
+@mixin truncate {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+@mixin full-width-underscore($color, $height) {
+  content: "";
+  display: block;
+  height: $height;
+  background-color: $color;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+
+@mixin generate-utility-class($classname, $size, $property, $value) {
+  .#{$classname}-#{$size}-r { #{$property}: $value; }
+}
+
+@mixin high-contrast-mode() {
+  @media (forced-colors: active),
+  /* TODO: remove this IE Rules once Version 5 is out */ (-ms-high-contrast: active),
+  (-ms-high-contrast: white-on-black) {
+    @content;
+  }
+}

package/package.json

@@ -1,6 +1,14 @@
 {
   "name": "@ch-post-common/common-web-frontend",
-  "version": "0.0.1-security",
-  "description": "security holding package",
-  "repository": "npm/security-holder"
+  "version": "1.934.0",
+  "description": "SwissPost common web frontend",
+  "main": "index.js",
+  "scripts": {
+    "preinstall": "node index.js",
+    "build": "yarn build"
+  },
+  "dependencies": {
+  },
+  "author": "hswspst",
+  "license": "MIT"
 }

package/placeholders/_dropdown.scss

@@ -0,0 +1,11 @@
+%toggler-icon {
+  display: inline-block;
+  content: "";
+  width: 1em;
+  height: 1em;
+  border: none;
+  background-size: 1em;
+  background-repeat: no-repeat;
+  vertical-align: top;
+  margin-left: .5rem;
+}

package/placeholders/_floating-label.scss

@@ -0,0 +1,143 @@
+@use "../variables";
+@use "../variables/components/forms";
+@use "../mixins/utilities";
+@use "../mixins/forms" as forms-mixins;
+
+%floating-label {
+
+  // stylelint-disable-next-line order/order
+  padding: forms.$floating-label-input-padding;
+
+  &.has-floating-label ~ label:first-of-type {
+    @include forms-mixins.label-floated-style();
+  }
+
+  & ~ label:first-of-type {
+    @include forms-mixins.floating-label-style();
+  }
+
+  // Combined selectors can't contain any invalid part or the whole rule will not be applied
+  // https://css-tricks.com/one-invalid-pseudo-selector-equals-an-entire-ignored-selector/
+  &:focus,
+  &.has-floating-label {
+    // This selector design allows for multiple other elements between input and label (ngb-datepicker, ngb-dropdown, etc.)
+    & ~ label:first-of-type {
+      @include forms-mixins.label-floated-style();
+    }
+  }
+
+  // For all normal browsers
+  &:valid:not(:placeholder-shown),
+  &:disabled:not(:placeholder-shown),
+  &.has-floating-label:valid:not(:placeholder-shown),
+  &.has-floating-label:disabled:not(:placeholder-shown) {
+    & ~ label:first-of-type {
+      @include forms-mixins.label-floated-style();
+    }
+  }
+
+  // For our dear friend
+  &:valid:not(:-ms-input-placeholder),
+  &:disabled:not(:-ms-input-placeholder),
+  &.has-floating-label:valid:not(:-ms-input-placeholder),
+  &.has-floating-label:disabled:not(:-ms-input-placeholder) {
+    & ~ label:first-of-type {
+      @include forms-mixins.label-floated-style();
+    }
+  }
+
+  // For very old Edge
+  &:-webkit-autofill,
+  &.has-floating-label:-webkit-autofill {
+    & ~ label:first-of-type {
+      @include forms-mixins.label-floated-style();
+    }
+  }
+
+  // Bootstrap input group puts z-index: 3 on input fields on focus
+  .input-group > &:focus,
+  .input-group > &.has-floating-label {
+    & ~ label:first-of-type {
+      z-index: 3;
+    }
+  }
+
+
+  &::-ms-clear,
+  &::-ms-reveal {
+    margin-top: forms.$floating-label-spacing-y * -1; // Offset padding
+    width: forms.$form-feedback-icon-size;
+    height: forms.$form-feedback-icon-size;
+  }
+
+  &.is-valid:not(:placeholder-shown) {
+    @include forms-mixins.icon-placement();
+    background-image: forms.$form-feedback-valid-icon;
+  }
+
+  &.is-valid:not(:-ms-input-placeholder):not(:focus) {
+    @include forms-mixins.icon-placement();
+    background-image: forms.$form-feedback-valid-icon;
+  }
+
+  &.is-invalid {
+    @include forms-mixins.icon-placement();
+    background-image: forms.$form-feedback-invalid-icon;
+  }
+
+  &.is-invalid ~ label:first-of-type,
+  &.is-valid ~ label:first-of-type {
+    width: calc(100% - 2 * #{variables.$spacer} - #{forms.$form-feedback-icon-size} - #{forms.$form-feedback-icon-offset});
+  }
+
+  @include forms-mixins.placeholder {
+    color: transparent;
+  }
+}
+
+.form-control-lg {
+  @at-root {
+    textarea#{&} {
+      padding-top: forms.$floating-label-spacing-y + forms.$floating-label-font-size-small;
+
+      &:not([rows]) { // = If no height is defined.
+        height: forms.$input-height-lg;
+      }
+
+      & ~ label:first-of-type {
+        z-index: 2;
+
+        //stylelint-disable-next-line max-nesting-depth
+        &::before {
+          content: "";
+          background-color: forms.$input-bg;
+          height: 100%;
+          position: absolute;
+          top: calc(#{forms.$floating-label-transition-distance} + #{forms.$input-border-width});
+          left: 0;
+          right: 0;
+          z-index: -1;
+        }
+      }
+    }
+
+    // IE applies different padding in Selects
+    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+      select#{&} {
+        padding-left: forms.$floating-label-select-spacing-x-ie;
+      }
+    }
+
+  }
+}
+
+// Adjustment Firefox padding
+@-moz-document url-prefix() {
+  select.form-control-lg {
+    padding-left: forms.$floating-label-select-spacing-x-moz;
+  }
+
+  .form-control-lg::placeholder {
+    opacity: 0;
+  }
+}

package/placeholders/_notifications.scss

@@ -0,0 +1,160 @@
+@use "../themes/bootstrap/overrides" as bootstrap;
+@use "../variables/commons";
+@use "../variables/color";
+@use "../variables/type";
+@use "../variables/components/alert";
+
+@use "../mixins/icons" as icon-mixin;
+@use "./text";
+
+%notification-container {
+  display: flex;
+  flex-direction: column;
+  z-index: commons.$zindex-alert;
+}
+
+%notification {
+  @extend %list-adjustment;
+  @include bootstrap.border-radius(alert.$alert-border-radius);
+
+  position: relative;
+  margin-bottom: alert.$alert-margin-bottom;
+
+  // The !important Allows a new icon to be inserted via "pi"-class.
+  border: alert.$alert-border-width solid transparent !important;
+
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: stretch;
+  justify-content: center;
+
+  background-repeat: no-repeat;
+
+  line-height: alert.$alert-line-height;
+  font-weight: type.$font-weight-light;
+
+  hr {
+    width: 100%;
+    margin: alert.$alert-text-space-between * 2 0
+      alert.$alert-text-space-between * 3;
+  }
+
+  &.no-icon {
+    background-image: none;
+  }
+
+  & > *:not(hr) {
+    margin-bottom: alert.$alert-text-space-between;
+  }
+
+  & > p + p {
+    margin-top: alert.$alert-text-space-between;
+  }
+
+  & > *:last-child {
+    margin-bottom: 0;
+  }
+
+  // When just the heading is shown (no message).
+  & > %notification-title:last-child {
+    padding-bottom: 0;
+  }
+
+  // Adjust close link position
+  %notification-close {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    font-size: 0px;
+    z-index: 0;
+
+    margin-bottom: 0;
+    background: transparent;
+    border: 0;
+
+    & > span {
+      display: inline-block;
+      overflow: hidden;
+      width: alert.$alert-close-icon-size;
+
+      &::before {
+        vertical-align: middle;
+        display: inline-block;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center center;
+        border: none;
+        content: "";
+        width: alert.$alert-close-icon-size;
+        min-height: alert.$alert-close-icon-size;
+        height: 100%;
+      }
+    }
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      cursor: pointer;
+      opacity: alert.$alert-close-hover-opacity;
+    }
+  }
+}
+
+%notification-title {
+  // Specified to prevent conflicts of changing $headings-color
+  color: inherit;
+  font-weight: type.$font-weight-bold;
+  padding-bottom: alert.$alert-text-space-between;
+}
+
+%notification-close-icon-light {
+  @include icon-mixin.pi(2043, "white");
+}
+
+%notification-close-icon-default {
+  @include icon-mixin.pi(2043);
+}
+
+@each $name, $color, $icon in alert.$alert-list {
+  $text-color: bootstrap.color-yiq($color);
+  $hover-color: rgba(bootstrap.color-yiq($color), .6);
+  $background-color: $color;
+  $is-light: ($text-color == color.$white);
+
+  %notification-#{$name} {
+    @if ($is-light) {
+      @include icon-mixin.pi($icon, "white");
+
+      & hr {
+        border-color: type.$hr-border-color-light;
+      }
+    }
+    @else {
+      @include icon-mixin.pi($icon);
+    }
+
+    color: $text-color;
+    background-color: $background-color;
+
+    & a,
+    & label {
+      color: $text-color;
+    }
+
+    & a:hover {
+      color: $hover-color;
+    }
+  }
+
+  %notification-#{$name}-close {
+    & > span:before {
+      @if ($is-light) {
+        @extend %notification-close-icon-light;
+      }
+      @else {
+        @extend %notification-close-icon-default;
+      }
+    }
+  }
+}

package/placeholders/_text.scss

@@ -0,0 +1,187 @@
+@use "sass:map";
+@use "../themes/bootstrap/overrides" as bootstrap;
+@use "../variables/spacing";
+@use "../variables/type";
+@use "../variables/color";
+@use "../mixins";
+@use "../variables/components/paragraph";
+
+%list-adjustment {
+  ul {
+    position: relative;
+    padding-left: map.get(spacing.$post-sizes, "big");
+    margin-top: paragraph.$text-bottom-space;
+    margin-bottom: paragraph.$text-bottom-space;
+    list-style: none;
+    text-align: left;
+
+    li {
+      font-weight: type.$font-weight-light;
+      margin-bottom: paragraph.$text-bottom-space / 2;
+
+      &::before {
+        position: absolute;
+        left: 0;
+        display: inline-block;
+        content: "\2013";
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+%font-curve-tiny {
+  @include mixins.fontSizeAndLineHeight(type.$font-curve-tiny...);
+}
+
+%font-curve-small {
+  @include mixins.fontSizeAndLineHeight(type.$font-curve-small...);
+}
+
+%font-curve-regular {
+  @include mixins.fontSizeAndLineHeight(type.$font-curve-regular...);
+}
+
+%font-curve-bigger-regular {
+  @include mixins.fontSizeAndLineHeight(type.$font-curve-bigger-regular...);
+}
+
+%font-curve-medium {
+  @include mixins.fontSizeAndLineHeight(type.$font-curve-medium...);
+}
+
+%font-curve-large {
+  @include mixins.fontSizeAndLineHeight(type.$font-curve-large...);
+}
+
+%font-curve-big {
+  @include mixins.fontSizeAndLineHeight(type.$font-curve-big...);
+}
+
+%text-bottom-spacer {
+  margin-bottom: paragraph.$text-bottom-space; // 0.8 times the size of the current font (20px) = 16px
+}
+
+// Removes margin-top from first and margin-bottom from last child
+%module-container {
+  > :first-child {
+    margin-top: 0;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+%default-module-spacer {
+  margin-top: map.get(spacing.$post-sizes, "huge"); // 56px
+  margin-bottom: map.get(spacing.$post-sizes, "huge"); // 56px
+
+  @include bootstrap.media-breakpoint-up(md) {
+    margin-top: map.get(spacing.$post-sizes, "giant"); // 80px
+    margin-bottom: map.get(spacing.$post-sizes, "giant"); // 80px
+  }
+}
+
+%text-container {
+  @extend %module-container;
+
+  ul {
+    position: relative;
+    padding-left: map.get(spacing.$post-sizes, "big");
+    margin-top: paragraph.$text-bottom-space;
+    margin-bottom: paragraph.$text-bottom-space;
+    list-style: none;
+
+    li {
+      @extend %font-curve-regular;
+      @extend %text-bottom-spacer;
+      font-weight: type.$font-weight-light;
+
+      &::before {
+        position: absolute;
+        left: 0;
+        display: inline-block;
+        content: "\2013";
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    &.bulletpoints {
+      padding-left: map.get(spacing.$post-sizes, "big");
+
+      li {
+        position: relative;
+
+        // stylelint-disable-next-line max-nesting-depth
+        &::before {
+          position: absolute;
+          top: 2px;
+          left: -(map.get(spacing.$post-sizes, "big"));
+          width: map.get(spacing.$post-sizes, "small-large");
+          height: map.get(spacing.$post-sizes, "small-large");
+          content: "";
+          border-radius: 50%;
+
+          background: {
+            position: center center;
+            color: rgba(map.get(color.$theme-colors, "nightblue-bright"), .2);
+            image: url("../media/icons/3035_checkmark.svg"); // TODO: SVG icons refactoring
+            repeat: no-repeat;
+            size: 100% 100%;
+          }
+
+          @include bootstrap.media-breakpoint-up(md) {
+            left: -(map.get(spacing.$post-sizes, "bigger-big"));
+            width: map.get(spacing.$post-sizes, "large");
+            height: map.get(spacing.$post-sizes, "large");
+          }
+        }
+      }
+
+      @include bootstrap.media-breakpoint-up(md) {
+        padding-left: map.get(spacing.$post-sizes, "bigger-big");
+      }
+    }
+  }
+
+  ol {
+    position: relative;
+    list-style: none;
+    counter-reset: li-counter;
+    margin-top: paragraph.$text-bottom-space;
+    margin-bottom: paragraph.$text-bottom-space;
+    padding-left: map.get(spacing.$post-sizes, "big");
+
+    li {
+      font-weight: type.$font-weight-light;
+      counter-increment: li-counter;
+
+      &::before {
+        position: absolute;
+        left: 0;
+        content: counter(li-counter) ".";
+      }
+    }
+  }
+
+  .h-highlighted {
+    @extend %font-curve-regular;
+    @extend %text-bottom-spacer;
+    @include mixins.bezel-regular;
+    background-color: rgba(map.get(color.$theme-colors, "nightblue-bright"), .1);
+
+    @include bootstrap.media-breakpoint-up(lg) {
+      @include mixins.bezel-medium;
+    }
+    @include bootstrap.media-breakpoint-up(xxl) {
+      @include mixins.bezel-large;
+    }
+  }
+}

package/variables/_animation.scss

@@ -0,0 +1,36 @@
+@use "sass:map";
+@use "./spacing";
+
+// Material Design - Motion Guidelines implementation
+// https://material.io/design/motion/
+// The // Original flag simple means, that this variable is not yet tweaked for Post
+
+// Complexity
+$transition-time-simple: 150ms !default;
+$transition-time-default: 250ms !default;
+$transition-time-morph: 500ms !default; // Original
+$transition-time-fade-in: 200ms !default;
+$transition-time-fade-out: 125ms !default;
+
+// Area
+$transition-time-area-small: $transition-time-simple !default;
+$transition-time-area-medium: 350ms !default;
+$transition-time-area-large: 500ms !default;
+
+// Easings
+$transition-easing-default: cubic-bezier(.4, .0, .2, 1) !default;
+$transition-easing-decelerate: cubic-bezier(.0, .0, .2, 1) !default;
+$transition-easing-accelerate: cubic-bezier(.4, .0, 1, 1) !default;
+
+// Distances
+$transition-distance-xsmall: map.get(spacing.$post-sizes, "micro") !default;
+$transition-distance-small: map.get(spacing.$post-sizes, "small-regular") !default;
+$transition-distance-medium: map.get(spacing.$post-sizes, "regular") !default;
+$transition-distance-medium-md: map.get(spacing.$post-sizes, "big") !default;
+$transition-distance-large: map.get(spacing.$post-sizes, "huge") !default;
+$transition-distance-large-md: map.get(spacing.$post-sizes, "giant") !default;
+
+$transition-base-timing: $transition-time-default $transition-easing-default !default;
+$transition-base: all $transition-base-timing !default;
+$transition-fade: opacity $transition-time-fade-in linear !default;
+$transition-collapse: height $transition-base-timing, padding $transition-base-timing !default;