Address color theming issues and tech debt

[jordanjones243]

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: #57

Summary:

Please summarize the scope of the changes you have submitted, what the intent of the work is and anything that describes the before/after state of the project.

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

Summary by Sourcery

Address color theming issues by updating CSS variables to align with design system tokens. Introduce dynamic header tag generation and refactor component registration using RuntimeUtils for better version management. Update documentation and tests to reflect these changes, and remove deprecated Husky script.

New Features:

• Introduce dynamic header tag generation using AuroDependencyVersioning to support versioning in AuroBanner.

Bug Fixes:

• Fix color theming issues by updating CSS variables to use design system tokens for consistency.

Enhancements:

• Refactor component registration to use RuntimeUtils for better version conflict management.
• Improve component tag handling by adding runtime utilities for component tag renaming.

Build:

• Add a new ESLint configuration file to standardize code quality checks.

Documentation:

• Update documentation to reflect changes in component registration and color theming.

Tests:

• Update tests to accommodate changes in header tag selection within the AuroBanner component.

Chores:

• Remove deprecated Husky script to prevent future failures in version 10.0.0.

[sourcery-ai]

Reviewer's Guide by Sourcery

This pull request addresses color theming issues and technical debt in the auro-banner component. The changes include updating color variables, improving component versioning, refactoring the component registration process, and enhancing the banner's functionality with dynamic header tags.

File-Level Changes

Change	Details	Files
Refactored component registration process	Removed custom registerComponent function Implemented RuntimeUtils for component registration Updated import statements and registration calls in demo and documentation files	index.js demo/index.html demo/index.md docs/partials/index.md
Updated color theming and variables	Replaced hardcoded color values with design system variables Updated CSS custom properties for better theming support Modified color-related classes and styles	src/color.scss src/tokens.scss demo/api.md apiExamples/iconic.html
Improved component versioning and compatibility	Added AuroDependencyVersioning for header tag generation Implemented dynamic header tag creation based on versioning Updated tests to accommodate dynamic header tags	src/auro-banner.js test/auro-banner.test.js src/headerVersion.js
Enhanced banner functionality and structure	Added support for component tag renaming Refactored firstUpdated method for better slot handling Updated template literals to use dynamic header tags	src/auro-banner.js
Updated build and development tools	Added ESLint configuration file Updated Husky hook with deprecation notice Removed generateDocs.mjs and staticStyles-template.js scripts	.husky/_/husky.sh eslint.config.mjs

---

Tips

• Trigger a new Sourcery review by commenting @sourcery-ai review on the pull request.
• Continue your discussion with Sourcery by replying directly to review comments.
• You can change your review settings at any time by accessing your dashboard:
  • Enable or disable the Sourcery-generated pull request summary or reviewer's guide;
  • Change the review language;
• You can always contact us if you have any questions or feedback.

[sourcery-ai]

Hey @jordanjones243 - I've reviewed your changes - here's some feedback:

Overall Comments:

• The color theming improvements and use of CSS custom properties are good changes. However, the new component registration process using RuntimeUtils seems to add unnecessary complexity. Could you explain the benefits of this change or consider reverting to the simpler registerComponent approach?
• The addition of headerVersion.js file for versioning is concerning. This approach might lead to version mismatches if not updated properly. Consider alternative ways to handle versioning that are less prone to errors.

Here's what I looked at during the review

• 🟢 General issues: all looks good
• 🟢 Security: all looks good
• 🟡 Testing: 2 issues found
• 🟡 Complexity: 1 issue found
• 🟡 Documentation: 1 issue found

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment to tell me if it was helpful.}

[sourcery-ai]

suggestion (testing): Update test selector to match new dynamic header tag implementation

The test has been updated to use an attribute selector instead of a tag name selector. This change aligns with the new dynamic header tag implementation in the component. However, we should consider adding more specific tests to ensure the correct header tag is being used based on the version.

const header = el.shadowRoot.querySelector('[slot="header"]');
const headerTag = header.tagName.toLowerCase();
expect(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']).to.include(headerTag);

[sourcery-ai]

suggestion (testing): Add tests for new functionality

The PR introduces new functionality such as version-based header tag generation and runtime utilities. Consider adding tests to cover these new features, ensuring they work as expected across different scenarios.

  });

  it('should generate correct header tag based on version', async () => {
    const el = await fixture(html`<auro-banner></auro-banner>`);
    const header = el.shadowRoot.querySelector('[auro-header]');
    expect(header.tagName.toLowerCase()).to.equal('h2');

    el.setAttribute('version', '2');
    await el.updateComplete;
    expect(header.tagName.toLowerCase()).to.equal('h3');
  });

[sourcery-ai]

question (documentation): Update documentation for new import and registration pattern

The import and registration method for the component has changed significantly. Is there updated documentation available that explains this new pattern and its benefits?

[sourcery-ai]

issue (complexity): Consider moving versioning logic and runtime utilities out of the banner component.

The changes introduce unnecessary complexity by adding versioning and runtime utilities directly into the banner component. To simplify:

1. Move versioning logic to a higher-level wrapper or build step:

   // In a separate utility file or build process
   const headerTag = generateVersionedTag('auro-header', headerVersion, AuroHeader);
   
   // In AuroBanner
   import { headerTag } from './versionedComponents';
   
   // Use headerTag directly in render method
   render() {
     return html`
       <${headerTag} level="2" display="600" margin="both" size="none" class="title">
         <slot name="title"></slot>
       </${headerTag}>
     `;
   }

2. Remove runtime utilities from the component:

   // Remove these lines
   import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
   this.runtimeUtils = new AuroLibraryRuntimeUtils();
   
   // Handle renaming at a higher level if necessary

3. Simplify the constructor:

   constructor() {
     super();
     this.hero = false;
     this.iconic = false;
     this.marquee = false;
     this.roundedBorder = false;
   }

These changes will maintain functionality while reducing complexity, improving readability, and keeping the banner component focused on its primary purpose.

[blackfalcon]

🎉 This PR is included in version 2.1.0-beta.2 🎉

The release is available on:

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

Your semantic-release bot 📦🚀