docs(animations): add playground for preference based

docs/utilities/animations.md

@@ -702,104 +702,13 @@ In this example we are creating a track along which we can drag the `.square` el
 
 Developers can also tailor their animations to user preferences such as `prefers-reduced-motion` and `prefers-color-scheme` using CSS Variables.
 
-### Usage
-
-```css
-.square {
-  width: 100px;
-  height: 100px;
-  opacity: 0.5;
-  background: blue;
-  margin: 10px;
-
-  --background: red;
-}
-
-@media (prefers-color-scheme: dark) {
-  .square {
-    --background: green;
-  }
-}
-```
-
-````mdx-code-block
-<Tabs
-  groupId="framework"
-  defaultValue="javascript"
-  values={[
-    { value: 'javascript', label: 'JavaScript' },
-    { value: 'angular', label: 'Angular' },
-    { value: 'react', label: 'React' },
-    { value: 'vue', label: 'Vue' },
-  ]
-}>
-<TabItem value="javascript">
-
-```javascript
-createAnimation()
-   .addElement(document.querySelector('.square'))
-   .duration(1500)
-   .iterations(Infinity)
-   .direction('alternate')
-   .fromTo('background', 'blue', 'var(--background)');
-```
-</TabItem>
-<TabItem value="angular">
-
-```javascript
-this.animationCtrl.create()
-   .addElement(this.square.nativeElement)
-   .duration(1500)
-   .iterations(Infinity)
-   .direction('alternate')
-   .fromTo('background', 'blue', 'var(--background)');
-```
-</TabItem>
-<TabItem value="react">
-
-```tsx
-<CreateAnimation
-  duration={1500}
-  iterations={Infinity}
-  direction='alternate'
-  fromTo={{
-    property: 'background',
-    fromValue: 'blue',
-    toValue: 'var(--background)'
-  }}
->
-  <div className="square"></div>
-</CreateAnimation>
-```
-</TabItem>
-<TabItem value="vue">
-
-```javascript
-import { createAnimation } from '@ionic/vue';
-import { ref } from 'vue';
-
-...
-
-const squareRef = ref();
-
-...
-
-createAnimation()
-   .addElement(squareRef.value)
-   .duration(1500)
-   .iterations(Infinity)
-   .direction('alternate')
-   .fromTo('background', 'blue', 'var(--background)');
-```
-</TabItem>
-</Tabs>
-````
-
 This method works in all supported browsers when creating animations for the first time. Most browsers are also capable of dynamically updating keyframe animations as the CSS Variables change.
 
 Safari does not currently support dynamically updating keyframe animations. For developers who need this kind of support in Safari, they can use [MediaQueryList.addListener()](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener).
 
-<Codepen user="ionic" slug="JjjYVKj" />
+import PreferenceBased from '@site/static/usage/v7/animations/preference-based/index.md';
+
+<PreferenceBased />
 
 ## Overriding Ionic Component Animations
 

static/usage/v7/animations/preference-based/angular/example_component_css.md

@@ -0,0 +1,16 @@
+```css
+ion-card {
+  color: white;
+  opacity: 0.5;
+  background: blue;
+  margin: 10px;
+
+  --background: red;
+}
+
+@media (prefers-color-scheme: dark) {
+  ion-card {
+    --background: green;
+  }
+}
+```

static/usage/v7/animations/preference-based/angular/example_component_html.md

@@ -0,0 +1,9 @@
+```html
+<ion-card #card>
+  <ion-card-content>Card</ion-card-content>
+</ion-card>
+
+<ion-button id="play" (click)="play()">Play</ion-button>
+<ion-button id="pause" (click)="pause()">Pause</ion-button>
+<ion-button id="stop" (click)="stop()">Stop</ion-button>
+```

static/usage/v7/animations/preference-based/angular/example_component_ts.md

@@ -0,0 +1,41 @@
+```ts
+import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core';
+import type { QueryList } from '@angular/core';
+import type { Animation } from '@ionic/angular';
+import { AnimationController, IonCard } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['./example.component.css'],
+})
+export class ExampleComponent {
+  @ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
+
+  private animation: Animation;
+
+  constructor(private animationCtrl: AnimationController) {}
+
+  ngAfterViewInit() {
+    this.animation = this.animationCtrl
+      .create()
+      .addElement(this.card.nativeElement)
+      .duration(1500)
+      .iterations(Infinity)
+      .direction('alternate')
+      .fromTo('background', 'blue', 'var(--background)');
+  }
+
+  play() {
+    this.animation.play();
+  }
+
+  pause() {
+    this.animation.pause();
+  }
+
+  stop() {
+    this.animation.stop();
+  }
+}
+```

static/usage/v7/animations/preference-based/demo.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Animation</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <script type="module">
+      import { createAnimation } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
+      window.createAnimation = createAnimation;
+
+      const animation = createAnimation()
+        .addElement(document.querySelector('#card'))
+        .duration(1500)
+        .iterations(Infinity)
+        .direction('alternate')
+        .fromTo('background', 'blue', 'var(--background)');
+
+      document.querySelector('#play').addEventListener('click', () => {
+        animation.play();
+      });
+
+      document.querySelector('#pause').addEventListener('click', () => {
+        animation.pause();
+      });
+
+      document.querySelector('#stop').addEventListener('click', () => {
+        animation.stop();
+      });
+    </script>
+
+    <style>
+      .container {
+        flex-direction: column;
+      }
+
+      ion-card {
+        width: 70%;
+
+        color: white;
+        opacity: 0.5;
+        background: blue;
+        margin: 10px;
+
+        --background: red;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        ion-card {
+          --background: green;
+        }
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="container">
+      <ion-card id="card">
+        <ion-card-content>Card</ion-card-content>
+      </ion-card>
+
+      <div>
+        <ion-button id="play">Play</ion-button>
+        <ion-button id="pause">Pause</ion-button>
+        <ion-button id="stop">Stop</ion-button>
+      </div>
+    </div>
+  </body>
+</html>

static/usage/v7/animations/preference-based/index.md

@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/animations/preference-based/demo.html"
+  devicePreview={true}
+/>

static/usage/v7/animations/preference-based/javascript.md

@@ -0,0 +1,35 @@
+```html
+<ion-card id="card">
+  <ion-card-content>Card</ion-card-content>
+</ion-card>
+
+<ion-button id="play" onclick="animation.play()">Play</ion-button>
+<ion-button id="pause" onclick="animation.pause()">Pause</ion-button>
+<ion-button id="stop" onclick="animation.stop()">Stop</ion-button>
+
+<script>
+  var animation = createAnimation()
+    .addElement(document.querySelector('#card'))
+    .duration(1500)
+    .iterations(Infinity)
+    .direction('alternate')
+    .fromTo('background', 'blue', 'var(--background)');
+</script>
+
+<style>
+  ion-card {
+    color: white;
+    opacity: 0.5;
+    background: blue;
+    margin: 10px;
+
+    --background: red;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    ion-card {
+      --background: green;
+    }
+  }
+</style>
+```

static/usage/v7/animations/preference-based/react/main_css.md

@@ -0,0 +1,16 @@
+```css
+ion-card {
+  color: white;
+  opacity: 0.5;
+  background: blue;
+  margin: 10px;
+
+  --background: red;
+}
+
+@media (prefers-color-scheme: dark) {
+  ion-card {
+    --background: green;
+  }
+}
+```

static/usage/v7/animations/preference-based/react/main_tsx.md

@@ -0,0 +1,53 @@
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react';
+import type { Animation } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  const cardEl = useRef<HTMLIonCardElement | null>(null);
+
+  const animation = useRef<Animation | null>(null);
+
+  useEffect(() => {
+    if (animation.current === null) {
+      animation.current = createAnimation()
+        .addElement(cardEl.current!)
+        .duration(1500)
+        .iterations(Infinity)
+        .direction('alternate')
+        .fromTo('background', 'blue', 'var(--background)');
+    }
+  }, [cardEl]);
+
+  const play = () => {
+    animation.current?.play();
+  };
+  const pause = () => {
+    animation.current?.pause();
+  };
+  const stop = () => {
+    animation.current?.stop();
+  };
+
+  return (
+    <>
+      <IonCard ref={cardEl}>
+        <IonCardContent>Card</IonCardContent>
+      </IonCard>
+
+      <IonButton id="play" onClick={play}>
+        Play
+      </IonButton>
+      <IonButton id="pause" onClick={pause}>
+        Pause
+      </IonButton>
+      <IonButton id="stop" onClick={stop}>
+        Stop
+      </IonButton>
+    </>
+  );
+}
+export default Example;
+```