feat: enter component

components/composition/Enter/Enter.css

@@ -0,0 +1,55 @@
+@keyframes fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translate(0, 1rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+
+@keyframes boing {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+diamond-enter {
+  animation-duration: var(--diamond-transition-enter-duration);
+  animation-fill-mode: forwards;
+  animation-iteration-count: 1;
+  animation-name: var(--diamond-transition-enter-animation);
+  animation-timing-function: var(--diamond-transition-enter-timing);
+  display: block;
+  opacity: 0;
+
+  &[delay] {
+    animation-delay: var(--diamond-transition-enter-delay);
+  }
+
+  &[type='boing'] {
+    animation-timing-function: var(--diamond-transition-enter-timing-boing);
+  }
+
+  &[fill] {
+    display: grid;
+  }
+}

components/composition/Enter/Enter.stories.ts

@@ -0,0 +1,53 @@
+import { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import './Enter';
+
+export default {
+  component: 'diamond-enter',
+  argTypes: {
+    type: {
+      control: {
+        type: 'radio',
+      },
+      options: ['fade', 'fade-in-up', 'boing'],
+    },
+  },
+};
+
+export const Enter: StoryObj = {
+  render: (args) => html`
+    <diamond-enter
+      type="${args.type}"
+      ?enter-on-scroll="${args.enterOnScroll}"
+      delay="${args.delay}"
+    >
+      <div style="background-color: #eee; height: 400px;"></div>
+    </diamond-enter>
+  `,
+};
+
+Enter.args = {
+  type: 'fade',
+  enterOnScroll: false,
+  delay: '0.5s',
+};
+
+export const OnScroll: StoryObj = {
+  render: (args) => html`
+    <div style="height: 120vh;">Scroll down</div>
+    <diamond-enter
+      type="${args.type}"
+      ?enter-on-scroll="${args.enterOnScroll}"
+      delay="${args.delay}"
+    >
+      <div style="background-color: #eee; height: 400px;"></div>
+    </diamond-enter>
+  `,
+};
+
+OnScroll.args = {
+  type: 'boing',
+  enterOnScroll: true,
+  delay: '0s',
+};

components/composition/Enter/Enter.ts

@@ -0,0 +1,76 @@
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+import { JSXCustomElement } from '../../../types/jsx-custom-element';
+
+export interface EnterAttributes {
+  type?: 'fade' | 'fade-in-up' | 'boing';
+  enterOnScroll?: boolean;
+  delay?: string;
+  /**
+   * Applies display grid so that children fill the height and width of the component
+   */
+  fill?: boolean;
+}
+
+@customElement('diamond-enter')
+export class Enter extends LitElement {
+  observer?: IntersectionObserver;
+  @state() inView: boolean = false;
+  @property({ reflect: true }) type?: 'fade' | 'fade-in-up' | 'boing' = 'fade';
+  @property({ reflect: true, type: Boolean, attribute: 'enter-on-scroll' })
+  enterOnScroll?: boolean = false;
+  @property({ reflect: true }) delay?: string = '0s';
+  @property({ reflect: true, type: Boolean }) fill: boolean = false;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    if (this.enterOnScroll) {
+      this.observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              this.inView = true;
+              this.observer?.unobserve(this);
+            }
+          });
+        },
+        { threshold: 0 },
+      );
+      this.observer.observe(this);
+    }
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.observer?.disconnect();
+  }
+
+  render() {
+    const type = this.inView || !this.enterOnScroll ? this.type : '';
+
+    return html`
+      <style>
+        :host {
+          --diamond-transition-enter-delay: ${this.delay};
+          --diamond-transition-enter-animation: ${type};
+        }
+      </style>
+      <slot></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'diamond-enter': EnterAttributes;
+  }
+}
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'diamond-enter': EnterAttributes & JSXCustomElement;
+    }
+  }
+}

styles/tokens/transition.css

@@ -12,6 +12,26 @@
 
   --diamond-transition-enter-duration: 0.5s;
   --diamond-transition-enter-timing: ease-in-out;
+  --diamond-transition-enter-timing-boing: linear(
+    0,
+    0.06,
+    0.25 18%,
+    1 36%,
+    0.81,
+    0.75,
+    0.81,
+    1,
+    0.94,
+    1,
+    1
+  );
   --diamond-transition-enter: var(--diamond-transition-enter-duration)
     var(--diamond-transition-enter-timing);
 }
+
+@media (prefers-reduced-motion) {
+  :root {
+    --diamond-transition-duration: 0s;
+    --diamond-transition-enter-duration: 0s;
+  }
+}