feat(styles): add flex to common css (helpers) (#3816)

* feat(styles): add flex to common css

* feat(styles): add flex final code [ci visual]

* feat(styles): address PR review comments

* feat(styles): move files around in the proper folders

* fix(styles): publish common-css styles for netlify

Co-authored-by: droshev <mladen.droshev@sap.com>

.storybook/main.js

@@ -36,7 +36,7 @@ const addons = [
 ];
 
 if (isProduction) {
-    staticDirs.push('../dist/', '../dist-fn/dist/');
+    staticDirs.push('../dist/', '../dist-fn/dist/', '../dist-common-css/dist/', '../dist-fn-icons/dist/');
 }
 
 module.exports = {

src/common-css/common-css.scss

@@ -3,3 +3,4 @@
 @import "../styles/margins";
 @import "../styles/paddings";
 @import "./sap-display.scss";
+@import "./sap-flex.scss";

src/common-css/sap-flex.scss

@@ -0,0 +1,233 @@
+@import './common-settings';
+
+$block: #{$sap-namespace}-flex;
+
+$sap-flex-spacings: (
+  "tiny": 0.5rem,
+  "small": 1rem,
+  "medium": 2rem,
+  "large": 3rem
+);
+
+.#{$block} {
+  // Properties for the Parent (flex container)
+  @mixin sap-flex($direction: row) {
+    display: flex;
+    flex-direction: $direction;
+
+    @content;
+  }
+
+  @include sap-flex();
+
+  // ----------- FLEX ALIGN CONTENT -----------
+  @mixin sap-flex-align-content($type: normal) {
+    @include sap-flex() {
+      flex-wrap: wrap;
+      align-content: $type;
+    }
+
+    @content;
+  }
+
+  $optionsAlignContent: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline;
+
+  @each $type in $optionsAlignContent {
+    &--align-content-#{$type} {
+      @include sap-flex-align-content(#{$type});
+    }
+  }
+
+  // ----------- FLEX ALIGN ITEMS -----------
+  @mixin sap-flex-align-items($type: stretch) {
+    @include sap-flex() {
+      align-items: $type;
+    }
+
+    @content;
+  }
+
+  $optionsAlignItems: stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end;
+
+  @each $type in $optionsAlignItems {
+    &--align-items-#{$type} {
+      @include sap-flex-align-items(#{$type});
+    }
+  }
+
+  // ----------- FLEX DIRECTION -----------
+  $optionsDirection: row, row-reverse, column, column-reverse;
+
+  @each $type in $optionsDirection {
+    &--#{$type} {
+      @include sap-flex(#{$type});
+    }
+  }
+
+  // ----------- FLEX GAP -----------
+  @each $type, $value in $sap-flex-spacings {
+    &--gap-#{$type} {
+      @include sap-flex() {
+        gap: $value;
+      }
+    }
+  }
+
+  @each $type, $value in $sap-flex-spacings {
+    &--row-gap-#{$type} {
+      @include sap-flex() {
+        row-gap: $value;
+      }
+    }
+  }
+
+  @each $type, $value in $sap-flex-spacings {
+    &--column-gap-#{$type} {
+      @include sap-flex() {
+        column-gap: $value;
+      }
+    }
+  }
+
+  @mixin sap-flex-gap($value, $type: "") {
+    @include sap-flex();
+
+    $_value: "";
+
+    @if $value == "tiny" {
+      $_value: map_get($sap-flex-spacings, "tiny");
+    } @else if $value == "small" {
+      $_value: map_get($sap-flex-spacings, "small");
+    } @else if $value == "medium" {
+      $_value: map_get($sap-flex-spacings, "medium");
+    } @else if $value == large {
+      $_value: map_get($sap-flex-spacings, "large");
+    } @else {
+      $_value: $value;
+    }
+
+    @if $type == "" {
+      gap: $_value;
+    } @else {
+      #{$type}-gap: $_value;
+    }
+
+    @content;
+  }
+
+  // ----------- FLEX JUSTIFY CONTENT -----------
+  @mixin sap-flex-justify($type: flex-start) {
+    @include sap-flex() {
+      justify-content: $type;
+    }
+
+    @content;
+  }
+
+  $optionsJustify: flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right;
+
+  @each $type in $optionsJustify {
+    &--justify-#{$type} {
+      @include sap-flex-justify(#{$type});
+    }
+  }
+
+  // ----------- FLEX WRAP -----------
+  @mixin sap-flex-wrap($type: nowrap) {
+    @include sap-flex() {
+      flex-wrap: $type;
+    }
+
+    @content;
+  }
+
+  $optionsWrap: nowrap, wrap, wrap-reverse;
+
+  @each $type in $optionsWrap {
+    &--#{$type} {
+      @include sap-flex-wrap(#{$type});
+    }
+  }
+
+  // ----------- FLEX CENTER -----------
+  @mixin sap-flex-center($direction: row) {
+    @include sap-flex() {
+      align-items: center;
+      justify-content: center;
+      flex-direction: $direction;
+    }
+
+    @content;
+  }
+
+  &--center {
+    @include sap-flex-center();
+
+    &-column {
+      @include sap-flex-center(column);
+    }
+  }
+
+  // Properties for the Children (flex items)
+
+  // ----------- FLEX ORDER -----------
+  @mixin sap-flex-order($value: 0) {
+    order: $value;
+
+    @content;
+  }
+
+  @for $i from 0 through 20 {
+    &-order-#{$i} {
+      @include sap-flex-order(#{$i});
+    }
+  }
+
+  // ----------- FLEX GROW -----------
+  @mixin sap-flex-grow($value) {
+    flex-grow: $value;
+
+    @content;
+  }
+
+  @for $i from 1 through 20 {
+    &-grow-#{$i} {
+      @include sap-flex-grow(#{$i});
+    }
+  }
+
+  // ----------- FLEX SHRINK -----------
+  @mixin sap-flex-shrink($value) {
+    flex-shrink: $value;
+
+    @content;
+  }
+
+  @for $i from 1 through 20 {
+    &-shrink-#{$i} {
+      @include sap-flex-shrink(#{$i});
+    }
+  }
+
+  // ----------- FLEX ALIGN SELF -----------
+  @mixin sap-flex-align-self($value) {
+    align-self: $value;
+
+    @content;
+  }
+
+  $optionsAlignSelf: auto, flex-start, flex-end, center, baseline, stretch;
+
+  @each $type in $optionsAlignSelf {
+    &-align-self-#{$type} {
+      @include sap-flex-align-self(#{$type});
+    }
+  }
+
+  // ----------- FLEX CHILD -----------
+  @mixin sap-flex-child($value) {
+    flex: $value;
+
+    @content;
+  }
+}

src/styles/helpers.scss

@@ -1,2 +1 @@
-@import "./helpers/flex";
 @import "./helpers/layout";