feat: migrate Tile component to Fiori3 (#990)

* initial commit for Tiles, keeping and moving the old Tile code for documentation purposes

* add numeric content, feed and launch tile

* add tests

* update visual tests

* update visual tests

* minor changes, combine tests

* add storybook for tile

* add truncation for long text and doc improvements

* add Badge Tile

* add rtl for badge

* add action mode and slide tile

* bring back badge

* IE11 fixes

* address PR review comments

* update tests

* add more info for the docs

* some a11y improvements, use fd-button for indicator and close btns

* docs improvements

config/bundlesize.json

@@ -2,7 +2,7 @@
     "files": [
         {
             "path": "./dist/fundamental-styles.css",
-            "maxSize": "72 kB"
+            "maxSize": "75 kB"
         }
     ]
 }

docs/_includes/display-component.html

@@ -1,5 +1,5 @@
-<div class="fd-tile docs-component docs-component__{{include.class}}">
-    <div class="fd-tile__content">
+<div class="docs-tile docs-component docs-component__{{include.class}}">
+    <div class="docs-tile__content">
 		{{ include.component }}
 	</div>
 </div>

docs/_includes/display-responsive-component.html

@@ -20,7 +20,7 @@
     {% endif %}
 {% endcase %}
 
-<div class="fd-tile docs-component docs-component__{{include.cssclass}}">
+<div class="docs-tile docs-component docs-component__{{include.cssclass}}">
     {% if include.controls == "true" %}
     <div class="fd-segmented-button docs-component--responsive-display__controls" role="group" aria-label="Group label" id="docs-responsive-controls">
       <button class="fd-button fd-button--compact" aria-pressed="false" data-size="mobile">

docs/_sass/_docs-display-component.scss

@@ -13,9 +13,8 @@
   background-color: #f3f4f5;
   transition: background-color 0.25s;
 
-  > .fd-tile__content {
+  > .docs-tile__content {
     padding: 60px 20px;
-    width: 100%;
     max-width: 100%;
   }
 
@@ -184,7 +183,7 @@
   }
 
   &__page {
-    .fd-tile__content {
+    .docs-tile__content {
       padding: 20px 20px;
     }
 
@@ -319,33 +318,33 @@
   }
 
   &__spacing-example {
-    .fd-tile__content [class^="fd-has"] {
+    .docs-tile__content [class^="fd-has"] {
       border: 1px solid #ccc;
       background: fd-color(background, 2);
       margin-bottom: 10px;
       text-align: center;
     }
 
-    .fd-tile__content [class^="fd-has-margin"] {
+    .docs-tile__content [class^="fd-has-margin"] {
       padding: 10px;
     }
   }
 
   &__margin-padding-helpers {
-    .fd-tile__content [class^="fd-has"] {
+    .docs-tile__content [class^="fd-has"] {
       display: block;
       background: white;
       border: 1px solid #ccc;
       padding: 10px;
     }
 
-    .fd-tile__content [class^="fd-has-padding"] {
+    .docs-tile__content [class^="fd-has-padding"] {
       margin: 10px;
     }
   }
 
   &__color-examples {
-    .fd-tile__content p {
+    .docs-tile__content p {
       padding: 10px;
       display: inline-block;
       width: calc(33%);

docs/_sass/_docs-general.scss

@@ -148,7 +148,7 @@ hr {
   margin: 0 -20px;
   grid-auto-rows: 1fr;
 
-  .fd-tile[role="button"] {
+  .docs-tile[role="button"] {
     border: 1px solid docs-color(neturals, 1);
     margin: 20px;
     padding-top: 10px;
@@ -331,3 +331,14 @@ pre {
     }
   }
 }
+
+.docs-section-container {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex-wrap: wrap;
+
+  > * {
+    margin: 0.5rem;
+  }
+}

docs/_sass/_docs-tile.scss

@@ -0,0 +1,88 @@
+@import "../../src/settings";
+@import "../../src/mixins";
+@import "../../src/functions";
+
+.docs-tile {
+  // VARS
+  color: var(--sapTile_TextColor);
+  background-color: var(--sapTile_Background);
+  $fd-tile-content-padding: fd-space(4) fd-space("reg") !default;
+  $fd-tile-content-padding-x: fd-space("small") !default;
+  $fd-tile-content-padding-y: fd-space(2) + 2px !default;
+  // anim
+  $fd-tile-transition-params: $fd-animation-speed ease-in !default;
+
+  @include fd-reset();
+
+  display: flex;
+
+  &__text {
+    @include fd-reset();
+  }
+
+  // MODIFICATIONS
+  &--button,
+  &[role="button"] {
+    @include action-cursor();
+
+    transition: box-shadow $fd-tile-transition-params;
+
+    &:hover {
+      box-shadow: 0 0 5px 0 rgba(var(--sapTile_BorderColor), 0.4);
+      position: relative;
+      z-index: map-get($fd-z-index-levels, "first");
+    }
+  }
+  // STATES
+  &.is-disabled {
+    opacity: 0.4;
+  }
+
+  // ELEMENTS
+  &__media {
+    @include fd-reset();
+
+    padding: $fd-tile-content-padding-y 0 $fd-tile-content-padding-y $fd-tile-content-padding-x;
+
+    @include fd-rtl() {
+      padding-right: $fd-tile-content-padding-x;
+      padding-left: 0;
+    }
+  }
+
+  &__content {
+    @include fd-reset();
+
+    flex: 1;
+    padding: $fd-tile-content-padding-y $fd-tile-content-padding-x $fd-tile-content-padding-y fd-space(3);
+
+    @include fd-rtl() {
+      padding-right: fd-space(3);
+      padding-left: $fd-tile-content-padding-x;
+    }
+
+    align-self: center;
+
+    &:first-child {
+      padding-left: $fd-tile-content-padding-x;
+
+      @include fd-rtl() {
+        padding-right: $fd-tile-content-padding-x;
+      }
+    }
+  }
+
+  &__title {
+    @include fd-type("0");
+
+    color: var(--sapTile_TitleTextColor);
+
+    @include fd-reset-spacing();
+  }
+
+  &__actions {
+    @include fd-reset();
+
+    padding: fd-space(3) $fd-tile-content-padding-x fd-space(3) fd-space(3);
+  }
+}