Implemented new animate web component and removed redundant packages

WillYallop · Apr 5, 2023 · 8b7aa14 · 8b7aa14
1 parent fe1b978
commit 8b7aa14
Show file tree

Hide file tree

Showing 60 changed files with 517 additions and 1,290 deletions.
diff --git a/README.md b/README.md
@@ -6,12 +6,15 @@ Functionalities is a collection packages for the backend and frontend that aims
 
 - [@functionalities/mediakit](/packages/mediakit/README.md)
 
-## Frontend Packages
+## Frontend Packages:
 
-A core principle for these packages is that they should be easy to use, accessibility first, and if suitable: configured primarily in HTML markup to reduce the weight of your JS bundle. 
+A core principle for these packages is that they should be easy to use, accessibility first, and if suitable: configured primarily in HTML markup to reduce the weight of your JS bundle.
 
 - [@functionalities/webcomponents](/packages/webcomponents/README.md)
-- [@functionalities/toggler](/packages/toggler/README.md) 
-- [@functionalities/animations](/packages/animations/README.md)
-- ~~[@functionalities/disclosure](/packages/disclosure/README.md)~~ (Moved to [webcomponents](/packages/webcomponents/README.md))
-- ~~[@functionalities/stickyheader](/packages/stickyheader/README.md)~~ (Moved to [webcomponents](/packages/webcomponents/README.md))
+  - [Carousel](/packages/webcomponents/src/components/carousel)
+  - [Enhanced Details](/packages/webcomponents/src/components/enhanced-details)
+  - [Details Disclosure](/packages/webcomponents/src/components/detail-disclosure)
+  - [Checkbox Toggler](/packages/webcomponents/src/components/checkbox-toggler)
+  - [Sticky Header](/packages/webcomponents/src/components/sticky-header)
+  - [Animate](/packages/webcomponents/src/components/animate)
+- [@functionalities/toggler](/packages/toggler/README.md)
diff --git a/apps/playground-fr/dist/assets/index.064323ab.css b/apps/playground-fr/dist/assets/index.064323ab.css
diff --git a/apps/playground-fr/dist/assets/index.2f9c0d66.css b/apps/playground-fr/dist/assets/index.2f9c0d66.css
diff --git a/apps/playground-fr/dist/assets/index.72a2b5bb.js b/apps/playground-fr/dist/assets/index.72a2b5bb.js
diff --git a/apps/playground-fr/dist/assets/index.e4d7772a.js b/apps/playground-fr/dist/assets/index.e4d7772a.js
diff --git a/apps/playground-fr/dist/index.html b/apps/playground-fr/dist/index.html
@@ -10,8 +10,8 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
     />
 
-    <script type="module" crossorigin src="/assets/index.72a2b5bb.js"></script>
-    <link rel="stylesheet" href="/assets/index.2f9c0d66.css">
+    <script type="module" crossorigin src="/assets/index.e4d7772a.js"></script>
+    <link rel="stylesheet" href="/assets/index.064323ab.css">
   </head>
   <body>
     <sticky-header
@@ -74,9 +74,7 @@ <h2>Web Components Example - Checkbox Toggler</h2>
           >
             <label
               tabindex="0"
-              role="button"
               for="checkbox-input"
-              aria-expanded="false"
               aria-controls="checkbox-dropdown"
               >Toggle</label
             >
@@ -194,6 +192,35 @@ <h2>Web Components Example - Disclosure</h2>
         </div>
       </div>
 
+      <!-- Web Components row -->
+      <div class="playground-row">
+        <h2>Web Components Example - Animate</h2>
+        <animate-container on="visible" type="fade-in" animate="true">
+          Elit laboris amet deserunt ad non quis anim elit ex Lorem culpa. Id
+          labore id nostrud deserunt elit id labore sint do. Incididunt labore
+          fugiat excepteur culpa fugiat qui ipsum voluptate proident proident
+          ullamco do.
+        </animate-container>
+        <animate-container
+          on="visible"
+          reset="true"
+          delay="200"
+          type="fade-in"
+          animate="true"
+        >
+          Elit laboris amet deserunt ad non quis anim elit ex Lorem culpa. Id
+          labore id nostrud deserunt elit id labore sint do. Incididunt labore
+          fugiat excepteur culpa fugiat qui ipsum voluptate proident proident
+          ullamco do.
+        </animate-container>
+        <animate-container on="load" type="fade-in" animate="true">
+          Elit laboris amet deserunt ad non quis anim elit ex Lorem culpa. Id
+          labore id nostrud deserunt elit id labore sint do. Incididunt labore
+          fugiat excepteur culpa fugiat qui ipsum voluptate proident proident
+          ullamco do.
+        </animate-container>
+      </div>
+
       <!-- Toggler row -->
       <div class="playground-row">
         <h2>Toggler Example</h2>

diff --git a/apps/playground-fr/index.html b/apps/playground-fr/index.html
@@ -190,6 +190,35 @@ <h2>Web Components Example - Disclosure</h2>
         </div>
       </div>
 
+      <!-- Web Components row -->
+      <div class="playground-row">
+        <h2>Web Components Example - Animate</h2>
+        <animate-container on="visible" type="fade-in" animate="true">
+          Elit laboris amet deserunt ad non quis anim elit ex Lorem culpa. Id
+          labore id nostrud deserunt elit id labore sint do. Incididunt labore
+          fugiat excepteur culpa fugiat qui ipsum voluptate proident proident
+          ullamco do.
+        </animate-container>
+        <animate-container
+          on="visible"
+          reset="true"
+          delay="200"
+          type="fade-in"
+          animate="true"
+        >
+          Elit laboris amet deserunt ad non quis anim elit ex Lorem culpa. Id
+          labore id nostrud deserunt elit id labore sint do. Incididunt labore
+          fugiat excepteur culpa fugiat qui ipsum voluptate proident proident
+          ullamco do.
+        </animate-container>
+        <animate-container on="load" type="fade-in" animate="true">
+          Elit laboris amet deserunt ad non quis anim elit ex Lorem culpa. Id
+          labore id nostrud deserunt elit id labore sint do. Incididunt labore
+          fugiat excepteur culpa fugiat qui ipsum voluptate proident proident
+          ullamco do.
+        </animate-container>
+      </div>
+
       <!-- Toggler row -->
       <div class="playground-row">
         <h2>Toggler Example</h2>

diff --git a/apps/playground-fr/src/scss/main.scss b/apps/playground-fr/src/scss/main.scss
@@ -336,3 +336,61 @@ carousel-progress {
     transition: 0;
   }
 }
+
+// --------------------------------
+// Animation styles
+animate-container {
+  animation-delay: 0s;
+  animation-duration: 0.3s;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: both;
+  backface-visibility: hidden;
+  // Default DIV styles
+  display: block;
+  position: relative;
+
+  // Animate
+  &[animate="true"] {
+    // fade-in
+    &[type="fade-in"] {
+      animation-name: fade-in;
+      @media (prefers-reduced-motion: reduce) {
+        animation-name: fade-in-reduced;
+      }
+    }
+    // ADD MORE ANIMATIONS HERE
+  }
+
+  // Default
+  &[animate="false"] {
+    // fade-in
+    &[type="fade-in"] {
+      opacity: 0;
+      transform: translate3d(0, 10px, 0);
+      @media (prefers-reduced-motion: reduce) {
+        transform: translate3d(0, 0, 0);
+      }
+    }
+  }
+}
+
+// --------------------------------
+// Keyframes
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, 10px, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes fade-in-reduced {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/apps/playground-fr/src/ts/main.ts b/apps/playground-fr/src/ts/main.ts
@@ -1,17 +1,18 @@
 import Toggler from "@functionalities/toggler";
-import Animations from "@functionalities/animations";
 import {
   EnhancedDetails,
   DetailDisclosure,
   StickyHeader,
   CheckboxToggler,
   Carousel,
+  Animation,
 } from "@functionalities/webcomponents";
 
 customElements.define("enhanced-details", EnhancedDetails);
 customElements.define("detail-disclosure", DetailDisclosure);
 customElements.define("sticky-header", StickyHeader);
 customElements.define("checkbox-toggler", CheckboxToggler);
+customElements.define("animate-container", Animation);
 
 customElements.define("carousel-container", Carousel.Container);
 customElements.define("carousel-track", Carousel.Track);
@@ -38,10 +39,3 @@ new Toggler({
     },
   },
 });
-
-// Animations
-new Animations({
-  activeClass: "animate",
-  reset: true,
-  threshold: 1,
-});
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "functionalities",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "private": true,
   "workspaces": [
     "apps/*",

diff --git a/packages/animations/.eslintrc.js b/packages/animations/.eslintrc.js
diff --git a/packages/animations/README.md b/packages/animations/README.md
diff --git a/packages/animations/dist/index.d.ts b/packages/animations/dist/index.d.ts