feat(api): complete rebuild of component

[jason-capsule42]

Alaska Airlines Pull Request

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

Resolves: #7, #10

Summary:

Complete rewrite of the original auro-labs component for official release.

Type of change:

Please delete options that are not relevant.

• New capability
• Revision of an existing capability
• Infrastructure change (automation, etc.)
• Other (please elaborate)

Checklist:

• My update follows the CONTRIBUTING guidelines of this project
• I have performed a self-review of my own update

By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

Pull Requests will be evaluated by their quality of update and whether it is consistent with the goals and values of this project. Any submission is to be considered a conversation between the submitter and the maintainers of this project and may require changes to your submission.

Thank you for your submission!

-- Auro Design System Team

[github-actions]

Surge demo deployment succeeded! 🚀🚀🚀

Auro Web Component Generator

[leeejune]

@jason-capsule42 Everything looks great! Here are my comments:

1. Are we able to add animation on the page when it scrolls up? (slow scroll instead of jumping straight to the top)
2. It'd be great to add the other style (blue outlined style like our secondary button) under the "Example(s)" section.

[jason-capsule42]

Per team decision, this PR will be released without resolving this ticket first: #9

[jason-capsule42]

@jason-capsule42 Everything looks great! Here are my comments:

1. Are we able to add animation on the page when it scrolls up? (slow scroll instead of jumping straight to the top)

Technically possibly. There are two ways to do it. You can adjust the scroll behavior of the entire site to have a "smooth" affect but this impacts a heck of a lot more than just the backtotop component. You can also do it with keyframe animation but this adds a bunch of heavy javascript into the component. (https://stackoverflow.com/questions/46068631/animate-scrollleft-of-a-container-from-point-a-to-b/46072227#46072227).

I don't think the first solution is something appropriate for us to do and I think the second solution is a lot heavier than the value the animation contributes to the experience.

2. It'd be great to add the other style (blue outlined style like our secondary button) under the "Example(s)" section.

The secondary style is displayed on the api demo page. Just add /api.html to the surge demo url

[leeejune]

Out of curiosity, what are the drawbacks/impact of having heavier javascript in the component?

This heavy JS based animation may be non-performant on slower machines or machines that are running under heavy load. In those cases the animation could look choppy.

Also, the JS required to animate this particular affect is not trivial and adds some complexity to sustaining support of the component. That's not necessary a reason in itself to not write the code, but it's worth calling it out as part of a conversation as to if the value outweighs the cost of doing it.

Given the risk of poor performance in certain scenarios combined with the code complexity, I'd argue that this small animation may not be worth it.

The secondary style is displayed on the api demo page. Just add /api.html to the surge demo url

For some reason it won't show up for me.

Looks like there is a problem with the tool that builds the surge demo when it comes to the API page. Seems to only be doign the main page correctly. You will have to pull the repo and run it locally until we fix that script in the mean time.

[jordanjones243]

There are still a number of dependencies that need to be updated.

[braven112]

We should be able to handle the scrolling animation on the page layouts that will use this component so its not necessary to add it to the component at this time.

[leeejune]

@jason-capsule42 Are we able to add a white background under the hover state color?

The hover color would ideally be layered over a white solid color.

[jason-capsule42]

@jason-capsule42 Are we able to add a white background under the hover state color?

The hover color would ideally be layered over a white solid color.

@leeejune these styles are pulled from the secondary style of auro-button. We would need to make this change there. Do you want to open a ticket for that change?

[leeejune]

These styles are pulled from the secondary style of auro-button. We would need to make this change there. Do you want to open a ticket for that change?

@jason-capsule42 I opened a ticket here: AlaskaAirlines/auro-button#227

This change will be done prior to other work remaining in back-to-top.

[blackfalcon]

The tokens for this repo have been updated. This repo is still set to PRIVATE and needs to be made public prior to release.

Also, there are no references to BREAKING CHANGES in the commits, this release WILL NOT create the MAJOR release that is required for this work.

[blackfalcon]

This repo is set to PIVATE. Needs to be changed to PUBLIC prior to release.

Also, please update the commit message to meet the team's agreed specifications using an imperative mood. E.g. ... [commit message header]

Please take a look at this article that outlines the team's expectations.

[jordanjones243]

A few updates needed to packages

[Patrick-Daly-AA]

We addressed issue #10 in retrospective today. The plan is that June will pull down and assess the impact of this behavior, and if it is judged acceptable for the time being, we will merge this to main, but keep it off of the DocSite, and address the issue in a quick follow up

[blackfalcon]

🎉 This PR is included in version 2.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀