Fixed styles of the animatable-cube component by adding missing css variables as props.

Author: jdnichollsc

CHANGELOG.md

@@ -6,6 +6,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.1.5] - 2020-04-23
+### Fixed
+- Fixed styles of the `animatable-cube` component by adding missing css variables as props.
+- Adding [Credits](https://github.com/proyecto26/animatable-component#credits-) and [Enterprise](https://github.com/proyecto26/animatable-component#enterprise-) sections from **README**.
+- Improved demo by waiting `animatable-component` to be loaded as a custom element.
+
 ## [1.1.4] - 2020-04-22
 ### Fixed
 - Cancel current animation before to play another one, it's required to avoid issues when `iterations` was equal to `Infinity`.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@proyecto26/animatable-component",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "private": false,
   "description": "Animate once, use Everywhere! 💫",
   "author": "Proyecto 26",

package.json

@@ -99,7 +99,7 @@ const easingOutCubic = EASING_FUNCTIONS[EASING.EASE_OUT_CUBIC];
 
 ### Script tag
 
-- Put a script tag similar to this `<script src='https://unpkg.com/[email protected].4/dist/animatable-component.js'></script>` in the head of your index.html
+- Put a script tag similar to this `<script src='https://unpkg.com/[email protected].5/dist/animatable-component.js'></script>` in the head of your index.html
 - Then you can use the element anywhere in your template, JSX, html etc
 
 ### Node Modules

readme.md

@@ -4,6 +4,8 @@
 :host {
   /**
    * @prop --animatable-cube-size: Size of the cube
+   * @prop --animatable-cube-width: Width of the cube
+   * @prop --animatable-cube-height: Height of the cube
    * @prop --animatable-cube-perspective: Perspective of the cube
    * @prop --animatable-cube-perspective-origin: Indicates the position of the abscissa and the ordinate of the vanishing point.
    * @prop --animatable-cube-display: Display of the cube
@@ -15,6 +17,9 @@
    * @prop --animatable-cube-justify-content: Justify content of the cube
    * @prop --animatable-cube-margin: Margin of the cube
    * @prop --animatable-cube-padding: Padding of the cube
+   * @prop --animatable-cube-transform: Transform of the cube
+   * @prop --animatable-cube-transform-origin: Transform origin of the cube
+   * @prop --animatable-cube-animation: Animation of the cube
    *
    * @prop --animatable-cube-face-border: Cube faces border
    * @prop --animatable-cube-face-background: Cube faces background
@@ -25,6 +30,7 @@
    * @prop --animatable-cube-face-animation-delay: Defines when the background animation will start
    * @prop --animatable-cube-face-animation-iteration-count: Defines the number of times the background animation cycle is played
    * @prop --animatable-cube-face-animation-direction: Defines the direction of the background animation
+   * @prop --animatable-cube-face-transform-origin: Establishes the origin of transformation for the cube faces
    *
    * @prop --animatable-cube-front-face-background: Background of the front face
    * @prop --animatable-cube-front-face-animation: Animation of the front face
@@ -40,7 +46,7 @@
    * @prop --animatable-cube-bottom-face-animation: Animation of the bottom face
    */
 
-  --size: var(--animatable-cube-size, 100px);
+  --size: var(--animatable-cube-size, var(--animatable-cube-width, var(--animatable-cube-height, 100px)));
   --perspective: var(--animatable-cube-perspective, 1000px);
   --perspective-origin: var(--animatable-cube-perspective-origin, 50% 50%);
 
@@ -54,10 +60,10 @@
   --margin: var(--animatable-cube-margin, 0);
   --padding: var(--animatable-cube-padding, 0);
 
-  --border: var(--animatable-cube-face-border, none);
-  --background: var(--animatable-cube-face-background, white);
-  --background-size: var(--animatable-cube-face-background-size, 100% 100%);
-  --animation: var(
+  --face-border: var(--animatable-cube-face-border, none);
+  --face-background: var(--animatable-cube-face-background, white);
+  --face-background-size: var(--animatable-cube-face-background-size, 100% 100%);
+  --face-animation: var(
     --animatable-cube-face-animation,
     backgroundAnimation
     var(--animatable-cube-face-animation-duration, 0s)
@@ -67,6 +73,9 @@
     var(--animatable-cube-face-animation-direction, alternate)
   );
 
+  --face-size: calc(var(--size)/2);
+  --face-transform-origin: var(--animatable-cube-face-transform-origin, center center);
+
   perspective: var(--perspective);
   perspective-origin: var(--perspective-origin);
   padding: var(--padding);
@@ -90,70 +99,72 @@
   position: relative;
   background: transparent;
   transform-style: preserve-3d;
-  transform: translateZ(-calc(var(--size)/2));
+  transform: var(--animatable-cube-transform, translateZ(-var(--face-size)));
+  transform-origin: var(--animatable-cube-transform-origin, initial);
   transition: transform var(--transition-duration);
 }
 .face {
-  background: var(--animatable-cube-face-background, transparent);
+  background: var(--animatable-cube-face-background, var(--face-background));
   position: absolute;
   height: 100%;
   width: 100%;
-  border: var(--border);
+  border: var(--face-border);
   transition: transform var(--transition-duration);
+  transform-origin: var(--face-transform-origin);
 }
 .front {
   transform:
     rotateY(0deg)
-    translateZ(calc(var(--size)/2));
+    translateZ(var(--face-size));
   will-change: transform;
-  background: var(--animatable-cube-front-face-background, var(--background));
-  background-size: var(--animatable-cube-front-face-background-size, var(--background-size));
-  animation: var(--animatable-cube-front-face-animation, var(--animation));
+  background: var(--animatable-cube-front-face-background, var(--face-background));
+  background-size: var(--animatable-cube-front-face-background-size, var(--face-background-size));
+  animation: var(--animatable-cube-front-face-animation, var(--face-animation));
 }
 .back {
   transform:
     rotateY(180deg)
-    translateZ(calc(var(--size)/2));
+    translateZ(var(--face-size));
   will-change: transform;
-  background: var(--animatable-cube-back-face-background, var(--background));
-  background-size: var(--animatable-cube-back-face-background-size, var(--background-size));
-  animation: var(--animatable-cube-back-face-animation, var(--animation));
+  background: var(--animatable-cube-back-face-background, var(--face-background));
+  background-size: var(--animatable-cube-back-face-background-size, var(--face-background-size));
+  animation: var(--animatable-cube-back-face-animation, var(--face-animation));
 }
 .right {
   transform:
     rotateY(90deg)
-    translateZ(calc(var(--size)/2));
+    translateZ(var(--face-size));
   will-change: transform;
-  background: var(--animatable-cube-right-face-background, var(--background));
-  background-size: var(--animatable-cube-right-face-background-size, var(--background-size));
-  animation: var(--animatable-cube-right-face-animation, var(--animation));
+  background: var(--animatable-cube-right-face-background, var(--face-background));
+  background-size: var(--animatable-cube-right-face-background-size, var(--face-background-size));
+  animation: var(--animatable-cube-right-face-animation, var(--face-animation));
 }
 .left {
   transform:
     rotateY(-90deg)
-    translateZ(calc(var(--size)/2));
+    translateZ(var(--face-size));
   will-change: transform;
-  background: var(--animatable-cube-left-face-background, var(--background));
-  background-size: var(--animatable-cube-left-face-background-size, var(--background-size));
-  animation: var(--animatable-cube-left-face-animation, var(--animation));
+  background: var(--animatable-cube-left-face-background, var(--face-background));
+  background-size: var(--animatable-cube-left-face-background-size, var(--face-background-size));
+  animation: var(--animatable-cube-left-face-animation, var(--face-animation));
 }
 .top {
   transform:
     rotateX(90deg)
-    translateZ(calc(var(--size)/2));
+    translateZ(var(--face-size));
   will-change: transform;
-  background: var(--animatable-cube-top-face-background, var(--background));
-  background-size: var(--animatable-cube-top-face-background-size, var(--background-size));
-  animation: var(--animatable-cube-top-face-animation, var(--animation));
+  background: var(--animatable-cube-top-face-background, var(--face-background));
+  background-size: var(--animatable-cube-top-face-background-size, var(--face-background-size));
+  animation: var(--animatable-cube-top-face-animation, var(--face-animation));
 }
 .bottom {
   transform:
     rotateX(-90deg)
-    translateZ(calc(var(--size)/2));
+    translateZ(var(--face-size));
   will-change: transform;
-  background: var(--animatable-cube-bottom-face-background, var(--background));
-  background-size: var(--animatable-cube-bottom-face-background-size, var(--background-size));
-  animation: var(--animatable-cube-bottom-face-animation, var(--animation));
+  background: var(--animatable-cube-bottom-face-background, var(--face-background));
+  background-size: var(--animatable-cube-bottom-face-background-size, var(--face-background-size));
+  animation: var(--animatable-cube-bottom-face-animation, var(--face-animation));
 }
 
 /* Animation Keyframes */

src/components/animatable-cube/animatable-cube.css

@@ -186,6 +186,7 @@ Type: `Promise<void>`
 | Name                                               | Description                                                                                     |
 | -------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
 | `--animatable-cube-align-items`                    | Align items of the cube                                                                         |
+| `--animatable-cube-animation`                      | Animation of the cube                                                                           |
 | `--animatable-cube-back-face-animation`            | Animation of the back face                                                                      |
 | `--animatable-cube-back-face-background`           | Background of the back face                                                                     |
 | `--animatable-cube-bottom-face-animation`          | Animation of the bottom face                                                                    |
@@ -200,8 +201,10 @@ Type: `Promise<void>`
 | `--animatable-cube-face-background`                | Cube faces background                                                                           |
 | `--animatable-cube-face-background-size`           | Cube faces background size                                                                      |
 | `--animatable-cube-face-border`                    | Cube faces border                                                                               |
+| `--animatable-cube-face-transform-origin`          | Establishes the origin of transformation for the cube faces                                     |
 | `--animatable-cube-front-face-animation`           | Animation of the front face                                                                     |
 | `--animatable-cube-front-face-background`          | Background of the front face                                                                    |
+| `--animatable-cube-height`                         | Height of the cube                                                                              |
 | `--animatable-cube-justify-content`                | Justify content of the cube                                                                     |
 | `--animatable-cube-left-face-animation`            | Animation of the left face                                                                      |
 | `--animatable-cube-left-face-background`           | Background of the left face                                                                     |
@@ -214,10 +217,13 @@ Type: `Promise<void>`
 | `--animatable-cube-size`                           | Size of the cube                                                                                |
 | `--animatable-cube-top-face-animation`             | Animation of the top face                                                                       |
 | `--animatable-cube-top-face-background`            | Background of the top face                                                                      |
+| `--animatable-cube-transform`                      | Transform of the cube                                                                           |
+| `--animatable-cube-transform-origin`               | Transform origin of the cube                                                                    |
 | `--animatable-cube-transition-delay`               | Defines when the transition of the cube will start                                              |
 | `--animatable-cube-transition-duration`            | Specifies the duration of the transition to resize the cube                                     |
 | `--animatable-cube-transition-property`            | Specifies the name of the CSS property the cube's transition effect is for                      |
 | `--animatable-cube-transition-timing-function`     | Describes how the intermediate values used during the transition of the cube will be calculated |
+| `--animatable-cube-width`                          | Width of the cube                                                                               |
 
 
 ----------------------------------------------