Global Status Bar not rendering appname or version

[JamesTann]

I am using Vue3 in Google Chrome. This is what I see:

Nested components still render fine (in this case I am rendering a clock) but the app name I passed and the version number are not visible.

Component code:

<template>
    <div>
        <rux-global-status-bar appname="Test App Name" version="0.1">
            <rux-clock timezone="America/New_York"></rux-clock>
        </rux-global-status-bar>
    </div>
</template>

<script>

export default {
    name: "App",
};
</script>

Relevant main.js code:

import "@astrouxds/astro-web-components/dist/astro-web-components/astro-web-components.css";
import {
    applyPolyfills,
    defineCustomElements,
} from "@astrouxds/astro-web-components/loader";

// Bind the custom elements to the window object
applyPolyfills().then(() => {
    defineCustomElements();
});

[markacianfrani]

looks like you're using our new components over at https://github.com/RocketCommunicationsInc/astro-components-stencil the docs for those are at https://astro-stencil.netlify.app/

the appname attribute changed to app-name so

    <rux-global-status-bar app-name="Test App Name" version="0.1">
            <rux-clock timezone="America/New_York"></rux-clock>
        </rux-global-status-bar

should be all you need.

sorry for the confusion. just for context, we're aiming to phase out this repo in favor of https://github.com/RocketCommunicationsInc/astro-components-stencil by the end of September. I realize now that https://astro-stencil.netlify.app/ isn't linked to from anywhere there so we'll fix that asap.