Update accordion vf-transition syntax

[petermakowski]

Done

• Update accordion to use the new vf-transition syntax
• Make vf-transition require a string
• Automatically escape the property string

QA

• Open demo
• [Add QA steps]
• Review updated documentation:
  • [List any updated documentation for review]

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.
• Documentation side navigation should be updated with the relevant labels.

Screenshots

[if relevant, include a screenshot or screen capture]

[webteam-app]

Demo starting at https://vanilla-framework-4548.demos.haus

[petermakowski]

If you pass quoted strings or list to vf-transition as $property it'll result in an invalid CSS (and scss does not complain).

As an example, passing either $property: ('width', 'box-shadow') or 'width, box-shadow' will have a result similar to the following:

@bartaz In cases such as this, would you prefer if we formatted the string (e.g. by using unquote) or simply threw an error and disallow passing incorrectly formatted strings in the first place?

[bartaz]

Formatting the string seems better.
I guess in most cases anyone trying to use it would search for examples of use and copy those. But I agree it is a little bit unclear how to pass multiple prop to animate at once.

[bartaz]

LGTM