[ScrollAnimationParent] Add support for nested ScrollAnimationParent components

[titouanmathis]

Issue

As of right now, nested ScrollAnimationParent and their ScrollAnimationChild components are not scoped correctly, as the root parent always controls all the children.

<div data-component="ScrollAnimationParent"> <─────────┐<──┐
  <div data-component="ScrollAnimationChild"></div> ───┘   │
  <div data-component="ScrollAnimationParent">             │
    <div data-component="ScrollAnimationChild"></div> ─────┘
  </div>
</div>

We should be able to have the following child-parent relation:

<div data-component="ScrollAnimationParent"> <─────────┐
  <div data-component="ScrollAnimationChild"></div> ───┘
  <div data-component="ScrollAnimationParent"> <───────────┐
    <div data-component="ScrollAnimationChild"></div> ─────┘
  </div>
</div>

Current workaround

This can be done now by extending the ScrollAnimationParent in order for it to have a different name, but this is not ideal.

import { ScrollAnimationParent, ScrollAnimationChild } from '@studiometa/ui';

export default class CustomScrollAnimationParent extends ScrollAnimationParent {
  static config = {
    name: 'CustomScrollAnimationParent',
    components: {
      CustomScrollAnimationChild: ScrollAnimationChild
    },
  };

  scrolledInView(props) {
    this.$children.CustomScrollAnimationChild.forEach((child) => {
      child.scrolledInView(props);
    });
  }
}

Suggested fix

We could use the same logic as in the Menu component in order to separate the nested parents' scopes, but that would mean that scopes would always be separated. A better fix would be to add a name option to the components, so the parent could filter its children before triggering their scrolledInView method.

import { 
  ScrollAnimationParent as ScrollAnimationParentCore, 
  ScrollAnimationChild as ScrollAnimationChildCore 
} from '@studiometa/ui';

class ScrollAnimationChild extends ScrollAnimationChildCore {
  static config = {
    options: {
      group: String,
    },
  };
}

export default class ScrollAnimationParent extends ScrollAnimationParent {
  static config = {
    options: {
      group: String,
    },
    components: {
      ScrollAnimationChild,
    },
  };

  scrolledInView(props) {
    const { group } = this.$options;

    this.$children.ScrollAnimationChild
      .filter((child) => child.$options.group === group)
      .forEach((child) => child.scrolledInView(props));
  }
}