Summary of recent component updates, release of 2.4.1 CSS, JS rollup

This releases 2.4.1 to the CDN

https://assets.emblstatic.net/vf/v2.4.1/css/styles.css
https://assets.emblstatic.net/vf/v2.4.1/scripts/scripts.js

As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, you can find a guide here.

Initial React support

While full React and Angular support remain goals with an unspecified date on the VF roadmap, we're trialing an initial approach to support React by wrapping the precompiled Angular templates.

You can see it in use in the example vf-react project.

We've added support for vf-button and vf-card for testing and feedback.

vf-extensions-react 0.0.1 npm git diff

• Initial release

vf-button 1.3.0 npm git diff

• adds react support
  • https://github.com/visual-framework/vf-core/pull/1278

vf-card 2.3.2 npm git diff

• adds prototype react template
  • https://github.com/visual-framework/vf-core/pull/1278

vf-component-generator 1.1.0 npm git diff

• adds _component.react.js template
  • https://github.com/visual-framework/vf-core/pull/1278
• updates _component.js to prepoulate vfComponentName() camel case syntax

Minor refinements and enhancements

vf-search 1.2.0 npm git diff

• don't allow inline search box to get too large
• add field for search description

vf-banner 1.7.0 npm git diff

• Banner dismiss button now defaults to vf-button--primary (if a specific button variant has been requested by vfJsBannerButtonTheme, it will still be used)

vf-hero fixes and tweaks

Following the 2.0.0 release of vf-hero, we have made several follow on fixes and refinements.

vf-hero 2.0.5 npm git diff

• adds a flex property to the SVG so that it's always visible and doesn't get cut off.

vf-hero 2.0.4 npm git diff

• fixes missing context rule for hero__text and hero__heading--additional.

vf-hero 2.0.3 npm git diff

• adds the context options so the component can be used in 11ty with content separation.
• changes max-content to fit-content so the __content element adapts to smaller viewports.
• removes left padding from --block variant as it 'looked weird'.