@festo-ui/web-essentials 4.0.3-pre-20221213.1 → 5.0.0-dev.19

package/package.json

@@ -1,10 +1,7 @@
 {
   "name": "@festo-ui/web-essentials",
-  "version": "4.0.3-pre-20221213.1",
+  "version": "5.0.0-dev.19",
   "description": "CSS framework and utils to build FESTO web applications",
-  "main": "jest.config.js",
-  "style": "dist/css/festo-web-essentials.css",
-  "sass": "scss/festo-web-essentials.scss",
   "keywords": [
     "css",
     "scss",
@@ -15,13 +12,95 @@
     "frontend",
     "FESTO"
   ],
-  "author": "Festo UI (styleguide@festo.com)",
   "license": "apache-2.0",
-  "engines": {
-    "node": ">=14"
-  },
+  "author": "Festo UI (styleguide@festo.com)",
+  "main": "jest.config.js",
+  "style": "dist/css/festo-web-essentials.css",
   "files": [
     "dist/{scss,fonts,css,js}/**/*.{scss,css,js,map,eot,svg,ttf,woff,woff2,otf}",
     "scss"
-  ]
+  ],
+  "scripts": {
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "fwe:build": "npm-run-all fwe:css fwe:copy",
+    "fwe:css:version": "node build/change-version.js",
+    "fwe:css": "npm-run-all fwe:css:lint fwe:css:build fwe:css:minify fwe:css:minify:flatpickr fwe:css:minify:organisms",
+    "fwe:css:lint": "stylelint \"scss/**/*.{css,scss}\"",
+    "fwe:css:build": "npm-run-all fwe:css:compile fwe:css:prefix",
+    "fwe:css:compile": "sass scss:dist/css",
+    "fwe:css:prefix": "postcss --config build/postcss.config.js --replace \"dist/css/**/*.css\" \"!dist/css/**/*.min.css\"",
+    "fwe:css:minify": "cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/festo-web-essentials.min.css dist/css/festo-web-essentials.css",
+    "fwe:css:minify:flatpickr": "cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/themes/flatpickr/festo.min.css dist/css/themes/flatpickr/festo.css",
+    "fwe:css:minify:organisms": "cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/organisms/festo-web-essentials-organisms.min.css dist/css/organisms/festo-web-essentials-organisms.css",
+    "fwe:copy": "npm-run-all fwe:copy:scss fwe:copy:fonts fwe:copy:fonts:css fwe:copy:fonts:scss",
+    "fwe:copy:scss": "copyfiles -V \"scss/**/*\" dist/",
+    "fwe:copy:fonts": "copyfiles -V \"fonts/*\" dist/",
+    "fwe:copy:fonts:css": "copyfiles -V \"fonts/*\" dist/css/",
+    "fwe:copy:fonts:scss": "copyfiles -V \"fonts/*\" dist/scss/",
+    "fwe:build-storybook": "node node_modules/@storybook/html/bin/build.js -c .storybook -o storybook-static",
+    "fwe:version": "npm version"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@storybook/addon-actions": "^6.5.15",
+    "@storybook/addon-docs": "6.5.12",
+    "@storybook/addon-essentials": "^6.5.15",
+    "@storybook/addon-interactions": "^6.5.15",
+    "@storybook/addon-links": "^6.5.15",
+    "@storybook/addons": "6.5.12",
+    "@storybook/builder-webpack4": "^6.5.15",
+    "@storybook/builder-webpack5": "6.5.12",
+    "@storybook/cli": "^6.5.15",
+    "@storybook/core-server": "6.5.12",
+    "@storybook/html": "^6.5.15",
+    "@storybook/manager-webpack4": "^6.5.15",
+    "@storybook/manager-webpack5": "6.5.12",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "6.5.12",
+    "@storybook/testing-library": "^0.0.13",
+    "@storybook/theming": "6.5.12",
+    "autoprefixer": "10.4.8",
+    "babel-jest": "27.5.1",
+    "babel-loader": "^8.3.0",
+    "clean-css-cli": "^5.6.2",
+    "copyfiles": "^2.4.1",
+    "cors": "^2.8.5",
+    "css-loader": "^5.0.1",
+    "eslint": "^7.6.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "16.1.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-cypress": "^2.10.3",
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-jsdoc": "^30.7.8",
+    "eslint-plugin-jsx-a11y": "6.6.1",
+    "eslint-plugin-prefer-arrow": "^1.2.2",
+    "eslint-plugin-react": "7.30.1",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-storybook": "^0.6.4",
+    "globby": "^13.1.3",
+    "html-webpack-plugin": "^5.3.2",
+    "ng-packagr": "14.1.0",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.21",
+    "postcss-cli": "^10.1.0",
+    "postcss-import": "14.1.0",
+    "postcss-preset-env": "7.5.0",
+    "postcss-url": "10.1.3",
+    "prettier": "2.6.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^1.32.1",
+    "sass": "^1.57.1",
+    "sass-loader": "12.6.0",
+    "sort-package-json": "^2.1.0",
+    "style-loader": "^3.2.1",
+    "stylelint": "^14.16.1",
+    "stylelint-config-prettier": "^9.0.4",
+    "stylelint-config-standard-scss": "^6.1.0",
+    "stylelint-prettier": "^2.0.0",
+    "url-loader": "^4.1.1",
+    "webpack-cli": "^4.9.2"
+  }
 }

package/scss/_breadcrumb.scss

@@ -1,37 +1,37 @@
-.fwe-breadcrumb {
-  white-space: nowrap;
-  display: flex;
-  justify-items: center;
-  align-items: center;
-  color: $text-light;
-
-  .fwe-icon-arrows-right-2 {
-    margin-left: 4px;
-    margin-right: 4px;
-  }
-
-  a {
-    color: $text-light;
-    text-decoration: none;
-    user-select: none;
-    font-size: $font-size-md;
-    line-height: calc(#{$font-size-md} + 2px);
-    &:focus {
-      outline: none;
-    }
-    &:not(:last-child) {
-      &:hover {
-        color: $hero;
-      }
-      &:active {
-        color: $hero-darker;
-      }
-      cursor: pointer;
-    }
-    &:last-child {
-      color: $text;
-      cursor: default;
-      pointer-events: none;
-    }
-  }
-}
+.fwe-breadcrumb {
+  white-space: nowrap;
+  display: flex;
+  justify-items: center;
+  align-items: center;
+  color: $text-light;
+
+  .fwe-icon-arrows-right-2 {
+    margin-left: 4px;
+    margin-right: 4px;
+  }
+
+  a {
+    color: $text-light;
+    text-decoration: none;
+    user-select: none;
+    font-size: $font-size-md;
+    line-height: calc(#{$font-size-md} + 2px);
+    &:focus {
+      outline: none;
+    }
+    &:not(:last-child) {
+      &:hover {
+        color: $hero;
+      }
+      &:active {
+        color: $hero-darker;
+      }
+      cursor: pointer;
+    }
+    &:last-child {
+      color: $text;
+      cursor: default;
+      pointer-events: none;
+    }
+  }
+}

package/scss/_button.scss

@@ -1,128 +1,128 @@
-a.fwe-btn,
-button.fwe-btn {
-  line-height: normal;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  text-align: center;
-  justify-content: center;
-  font-family: $font-family-base;
-  font-size: $font-size-base;
-  padding: 4px 16px;
-  min-height: 32px;
-  color: $btn-text;
-  background: $btn;
-  border-radius: $control-border-radius;
-  cursor: pointer;
-  border: none;
-
-  i[class^="fwe-icon-"],
-  i[class*=" fwe-icon-"] {
-    padding-right: 8px;
-  }
-
-  &:hover {
-    color: $btn-text-hover;
-    background: $btn-hover;
-  }
-
-  &:active {
-    background: $btn-active;
-  }
-
-  &:focus {
-    outline: 0;
-  }
-
-  &:disabled,
-  &.fwe-disabled {
-    cursor: default;
-    background: $btn-disabled;
-    color: $btn-text-disabled;
-  }
-
-  &.fwe-btn-hero {
-    color: $btn-hero-text;
-    background: $btn-hero;
-
-    &:hover {
-      color: $btn-hero-text-hover;
-      background: $btn-hero-hover;
-    }
-
-    &:active {
-      background: $btn-hero-active;
-    }
-
-    &:disabled,
-    &.fwe-disabled {
-      background: $btn-hero-disabled;
-      color: $btn-hero-text-disabled;
-    }
-  }
-
-  &.fwe-btn-block {
-    width: 100%;
-  }
-
-  &.fwe-btn-link {
-    background: none;
-    color: $hero;
-    padding: 0;
-
-    i[class^="fwe-icon-"],
-    i[class*=" fwe-icon-"] {
-      padding-right: 4px;
-    }
-
-    &.fwe-dark {
-      color: $text;
-    }
-
-    &:hover {
-      background: none;
-      color: $hero-dark;
-    }
-
-    &:active {
-      background: none;
-      color: $hero-dark;
-    }
-
-    &:disabled,
-    &.fwe-disabled {
-      color: $btn-text-disabled;
-    }
-  }
-
-  &.fwe-btn-lg {
-    padding: 4px 24px;
-    min-height: 48px;
-    i[class^="fwe-icon-"],
-    i[class*=" fwe-icon-"] {
-      @extend .fwe-icon-lg;
-    }
-  }
-
-  &.fwe-btn-icon {
-    border-radius: 50%;
-    padding: 0px;
-    height: 32px;
-    width: 32px;
-    justify-content: center;
-
-    &.fwe-btn-lg {
-      height: 48px;
-      width: 48px;
-    }
-
-    i[class^="fwe-icon-"],
-    i[class*=" fwe-icon-"] {
-      padding-right: 0px;
-    }
-  }
-}
-
-a.fwe-btn.fwe-disabled {
-  pointer-events: none;
-}
+a.fwe-btn,
+button.fwe-btn {
+  line-height: normal;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  text-align: center;
+  justify-content: center;
+  font-family: $font-family-base;
+  font-size: $font-size-base;
+  padding: 4px 16px;
+  min-height: 32px;
+  color: $btn-text;
+  background: $btn;
+  border-radius: $control-border-radius;
+  cursor: pointer;
+  border: none;
+
+  i[class^="fwe-icon-"],
+  i[class*=" fwe-icon-"] {
+    padding-right: 8px;
+  }
+
+  &:hover {
+    color: $btn-text-hover;
+    background: $btn-hover;
+  }
+
+  &:active {
+    background: $btn-active;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  &:disabled,
+  &.fwe-disabled {
+    cursor: default;
+    background: $btn-disabled;
+    color: $btn-text-disabled;
+  }
+
+  &.fwe-btn-hero {
+    color: $btn-hero-text;
+    background: $btn-hero;
+
+    &:hover {
+      color: $btn-hero-text-hover;
+      background: $btn-hero-hover;
+    }
+
+    &:active {
+      background: $btn-hero-active;
+    }
+
+    &:disabled,
+    &.fwe-disabled {
+      background: $btn-hero-disabled;
+      color: $btn-hero-text-disabled;
+    }
+  }
+
+  &.fwe-btn-block {
+    width: 100%;
+  }
+
+  &.fwe-btn-link {
+    background: none;
+    color: $hero;
+    padding: 0;
+
+    i[class^="fwe-icon-"],
+    i[class*=" fwe-icon-"] {
+      padding-right: 4px;
+    }
+
+    &.fwe-dark {
+      color: $text;
+    }
+
+    &:hover {
+      background: none;
+      color: $hero-dark;
+    }
+
+    &:active {
+      background: none;
+      color: $hero-dark;
+    }
+
+    &:disabled,
+    &.fwe-disabled {
+      color: $btn-text-disabled;
+    }
+  }
+
+  &.fwe-btn-lg {
+    padding: 4px 24px;
+    min-height: 48px;
+    i[class^="fwe-icon-"],
+    i[class*=" fwe-icon-"] {
+      @extend .fwe-icon-lg;
+    }
+  }
+
+  &.fwe-btn-icon {
+    border-radius: 50%;
+    padding: 0px;
+    height: 32px;
+    width: 32px;
+    justify-content: center;
+
+    &.fwe-btn-lg {
+      height: 48px;
+      width: 48px;
+    }
+
+    i[class^="fwe-icon-"],
+    i[class*=" fwe-icon-"] {
+      padding-right: 0px;
+    }
+  }
+}
+
+a.fwe-btn.fwe-disabled {
+  pointer-events: none;
+}

package/scss/_cards.scss

@@ -1,98 +1,98 @@
-.fwe-card {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid $border;
-  background-color: $white;
-  border-radius: $border-radius-m;
-
-  .fwe-card-img {
-    width: 100%;
-    border-top-left-radius: 6px;
-    border-top-right-radius: 6px;
-  }
-
-  .fwe-card-img-169 {
-    @extend .fwe-card-img;
-    height: 188px;
-    max-height: 188px;
-    object-fit: cover;
-    object-position: center center;
-  }
-
-  .fwe-card-img-32 {
-    @extend .fwe-card-img;
-    height: 284px;
-    max-height: 284px;
-    object-fit: cover;
-    object-position: center center;
-  }
-
-  .fwe-card-header {
-    padding: 24px;
-    padding-bottom: 0;
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-
-    .fwe-card-title {
-      h5 {
-        line-height: $font-size-xl;
-        font-size: $font-size-xl;
-        margin: 0;
-        padding: 0;
-      }
-
-      p {
-        padding: 0;
-        margin: 0;
-        color: $text-light;
-        font-size: $font-size-md;
-      }
-    }
-  }
-
-  .fwe-card-body {
-    flex-grow: 1;
-    padding: 24px;
-    padding-bottom: 48px;
-
-    .fwe-card-text {
-      margin: 0;
-      padding: 0;
-    }
-
-    > *:not(:last-child) {
-      margin-bottom: 24px;
-    }
-  }
-
-  .fwe-card-notification {
-    height: 64px;
-    min-height: 64px;
-    border-bottom-left-radius: 8px;
-    border-bottom-right-radius: 8px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding-left: 24px;
-    padding-right: 24px;
-
-    .fwe-card-title {
-      padding-left: 16px;
-
-      h6 {
-        line-height: $font-size-base;
-        font-size: $font-size-base;
-        font-weight: $font-weight-bold;
-        margin: 0;
-        padding: 0;
-      }
-
-      p {
-        padding: 0;
-        margin: 0;
-        color: $text;
-      }
-    }
-  }
-}
+.fwe-card {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid $border;
+  background-color: $white;
+  border-radius: $border-radius-m;
+
+  .fwe-card-img {
+    width: 100%;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+
+  .fwe-card-img-169 {
+    @extend .fwe-card-img;
+    height: 188px;
+    max-height: 188px;
+    object-fit: cover;
+    object-position: center center;
+  }
+
+  .fwe-card-img-32 {
+    @extend .fwe-card-img;
+    height: 284px;
+    max-height: 284px;
+    object-fit: cover;
+    object-position: center center;
+  }
+
+  .fwe-card-header {
+    padding: 24px;
+    padding-bottom: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+
+    .fwe-card-title {
+      h5 {
+        line-height: $font-size-xl;
+        font-size: $font-size-xl;
+        margin: 0;
+        padding: 0;
+      }
+
+      p {
+        padding: 0;
+        margin: 0;
+        color: $text-light;
+        font-size: $font-size-md;
+      }
+    }
+  }
+
+  .fwe-card-body {
+    flex-grow: 1;
+    padding: 24px;
+    padding-bottom: 48px;
+
+    .fwe-card-text {
+      margin: 0;
+      padding: 0;
+    }
+
+    > *:not(:last-child) {
+      margin-bottom: 24px;
+    }
+  }
+
+  .fwe-card-notification {
+    height: 64px;
+    min-height: 64px;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-left: 24px;
+    padding-right: 24px;
+
+    .fwe-card-title {
+      padding-left: 16px;
+
+      h6 {
+        line-height: $font-size-base;
+        font-size: $font-size-base;
+        font-weight: $font-weight-bold;
+        margin: 0;
+        padding: 0;
+      }
+
+      p {
+        padding: 0;
+        margin: 0;
+        color: $text;
+      }
+    }
+  }
+}