Neat! Pickled Muskrat!

    @myuw-web-components/myuw-profile

    1.6.7 • Public • Published

    myuw-profile

    Getting Started

    Import and include the component as follows, but note that it will not display by default, until initialized through its event API!

    <!-- import the module -->
    <script type="module" src="https://unpkg.com/@myuw-web-components/myuw-profile@latest?module"></script>
    
    <!-- fallback for browsers without ES2015 module support -->
    <script nomodule src="https://unpkg.com/@myuw-web-components/myuw-profile@latest"></script>
    
    <!-- initialize -->
    <script>
      customElements
        .whenDefined('myuw-profile')
        .then(() => document.dispatchEvent(new CustomEvent('myuw-login', { detail: {} })))
      ;
    </script
    
    <myuw-profile
      login-url=""
      logout-url=""
      background-color=""
    ></myuw-profile>

    Note: The evergreen "latest" version can be used for convenience, but in production settings it is recommended to use the latest release version specifically, and upgrade only after testing!

    Displaying the component

    Because it has multiple states depending on whether there is an active session, all elements of the profile component are hidden by default. The component listens for a CustomEvent called "myuw-login" and its state is dependent on the data you pass when you dispatch that event:

    /*
        Notes about configuring the event:
        - The event MUST contain a "detail" object. The contents of the detail object determine what the component will display:
            - An empty "detail" object ( detail: {} ) will result in the login button being displayed
            - An empty "person" object ( person: {} ) will result in a generic session being displayed (using the person icon). This should only be used when the session doesn't provide a user's name, username, email, etc.
            - A person object containing a "firstName" ( person: {firstName: "Name"} ) will result in the full session display
        - The "bubbles" property is optional unless you're dispatching the event from an element/scope other than "document"
    */
    var customEvent = new CustomEvent('myuw-login', {
      bubbles: true, // optional
      detail: { // required always
        person: { // required for generic session display
          "firstName": "User" // required for full session display
        }
      }
    });
    // Dispatch the event
    document.dispatchEvent(customEvent);

    Initial page load

    If you want the component to show something on the initial page load (and not be hidden), make sure to dispatch the "myuw-login" event after all web components are loaded and upgraded (i.e. ready to be interacted with). The webcomponentsjs polyfill provides and event you can hook into:

    document.addEventListener('WebComponentsReady', function() {
        var customEvent = new CustomEvent('myuw-login', {
            // Configure the event data to display what you want
        });
        // Dispatch the event
        document.dispatchEvent(customEvent);
    });

    Configurable properties

    • Login URL (login-url): The URL to redirect users to on login
    • Logout URL (logout-url): The Logout URL to redirect users to on logout
    • Background color (background-color): Use this to dynamically set the background color of the profile menu button

    Slots

    • Profile Navigation Item (nav-item): Add a custom item to the profile button's navigation menu, this slot expects an <a> tag

    CSS Variables

    • --myuw-profile-font: Set the font stack for this component
    • --myuw-profile-login-color: Set the font color of the "Login" button
    • --myuw-profile-background-color: Set the background color of the circular menu button
    • --myuw-menu-color: The text color of links/buttons in the profile menu

    For more information about CSS variables and how they work with MyUW Web Components, reference the styles component

    Cross-browser testing provided by:
    BrowserStack

    Releasing

    Update version using npm version with appropriate selection: patch, minor, or major. Deploy npm package to the world using npm publish (if you don't have publish rights contact authors). Push git changes to the github via git push origin master.

    Keywords

    none

    Install

    npm i @myuw-web-components/myuw-profile

    DownloadsWeekly Downloads

    899

    Version

    1.6.7

    License

    Apache-2.0

    Unpacked Size

    77 kB

    Total Files

    7

    Last publish

    Collaborators

    • zeke.witter
    • apetro
    • scott.berg
    • jordanalanjones
    • myuw-web-components-jenkins
    • nogalpaulina
    • lstels
    • benjaminsousa