From b6e637e8f6721baa22c959febb52b72e200e741a Mon Sep 17 00:00:00 2001 From: Dale Sande Date: Tue, 31 Dec 2024 14:56:46 -0800 Subject: [PATCH] feat: remove deprecated code issues #133 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit BREAKING CHANGE: This code update resolves issues with deprecated features and cleans up the implementation of the `auro-header` component. The `fixed` attribute and legacy size options (`xxxs` to `xxxl`) have been eliminated, along with related utility classes and documentation references, simplifying margin handling to specified numeric values (`none`, `25`, `50`, etc.). Legacy styles and examples supporting pixel-based rendering are removed, aligning the component with modern practices. Additionally, two lines in `.husky/pre-commit` that would fail in version `v10.0.0`—`#!/usr/bin/env sh` and `. "$(dirname -- "$0")/_/husky.sh"`—were removed to ensure compatibility. Updates include revisions to documentation files, API examples, and the `auro-header.js` source code, while dependencies in the `package.json` file are updated, reflecting the latest version of `@aurodesignsystem/auro-library`. These changes streamline the codebase, remove outdated functionality, and improve maintainability for future development. On branch dsande/deprecatedFeats/#133 Changes to be committed: modified: .husky/pre-commit deleted: apiExamples/fixed.html modified: apiExamples/margins.html modified: apiExamples/margins2.html modified: demo/api.md modified: demo/index.min.js modified: docs/api.md modified: docs/partials/api.md modified: package-lock.json modified: package.json modified: src/auro-header.js modified: src/style.scss modified: test/auro-header.test.js --- .husky/pre-commit | 3 - apiExamples/fixed.html | 3 - apiExamples/margins.html | 2 +- apiExamples/margins2.html | 2 +- demo/api.md | 46 ++------------ demo/index.min.js | 28 ++------- docs/api.md | 9 +-- docs/partials/api.md | 20 +------ package-lock.json | 36 +++++++++-- package.json | 5 +- src/auro-header.js | 26 +------- src/style.scss | 122 ++------------------------------------ test/auro-header.test.js | 36 ----------- 13 files changed, 56 insertions(+), 282 deletions(-) delete mode 100644 apiExamples/fixed.html diff --git a/.husky/pre-commit b/.husky/pre-commit index e5f8dd5..07ace63 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1 @@ -#!/usr/bin/env sh -. "$(dirname -- "$0")/_/husky.sh" - ./node_modules/.bin/npm-run-all linters test diff --git a/apiExamples/fixed.html b/apiExamples/fixed.html deleted file mode 100644 index 8c1bcb2..0000000 --- a/apiExamples/fixed.html +++ /dev/null @@ -1,3 +0,0 @@ - - On the journey together - diff --git a/apiExamples/margins.html b/apiExamples/margins.html index 9710a6f..0ab6f6d 100644 --- a/apiExamples/margins.html +++ b/apiExamples/margins.html @@ -1,5 +1,5 @@ Hello World! -
    +
    1. ... thing
    2. thing ...
    diff --git a/apiExamples/margins2.html b/apiExamples/margins2.html index 7489c30..ec7336a 100644 --- a/apiExamples/margins2.html +++ b/apiExamples/margins2.html @@ -1,5 +1,5 @@ Hello World! -
      +
      1. ... thing
      2. thing ...
      diff --git a/demo/api.md b/demo/api.md index 64807d9..5b9d824 100644 --- a/demo/api.md +++ b/demo/api.md @@ -5,13 +5,6 @@ The auro-header component is a custom element to make using headers with the Auro Design System seamless and easy. -## Attributes - -| Attribute | Type | Description | -|-----------|-----------|--------------------------------------------------| -| [fixed](#fixed) | `Boolean` | Uses px values instead of rem | -| [type](#type) | `String` | **DEPRECATED** Option, `px`. Legacy option for converting REMs to PX. Use `fixed` feature. | - ## Properties | Property | Attribute | Type | Default | Description | @@ -20,7 +13,7 @@ The auro-header component is a custom element to make using headers with the Aur | [display](#display) | `display` | `String` | "display" | Determines presentation of header. Options are `display`, `800`, `700`, `600`, `500`, `400`, `300`. | | [level](#level) | `level` | `String` | | Determines heading level for HTML element. Options are `1` - `6` | | [margin](#margin) | `margin` | `String` | | Specify the margin(s) to be altered. Options are `top`, `bottom`, or `both`. | -| [size](#size) | `size` | `String` | | Specify size of margin adjustment, either `none`, `25`, `50`, `100`, `150`, `200`, `300`, `400`, `600` or `800`. **DEPRECATED** the `xxxs` - `xxxl` options. | +| [size](#size) | `size` | `String` | | Specify size of margin adjustment, either `none`, `25`, `50`, `100`, `150`, `200`, `300`, `400`, `600` or `800`. | ## API Examples @@ -50,7 +43,7 @@ The auro-header will default to the h1 element with the `header--display` style. #### Changing Header Size -Use the `level` attribute to change the size of the `auro-header`. +Use the `level` attribute to change the size of the `auro-header`. **Note**: Changing the header level does not change the header style. This example will output an h3 header element with the default header--display style. @@ -133,7 +126,7 @@ Also note the use of the util_stackMarginNone--top utility selector on the ol Hello World! -
        +
        1. ... thing
        2. thing ...
        @@ -146,7 +139,7 @@ Also note the use of the util_stackMarginNone--top utility selector on the ol ```html Hello World! -
          +
          1. ... thing
          2. thing ...
          @@ -159,7 +152,7 @@ The following example shows how you can update both margins to use the 400 size Hello World! -
            +
            1. ... thing
            2. thing ...
            @@ -172,7 +165,7 @@ The following example shows how you can update both margins to use the 400 size ```html Hello World! -
              +
              1. ... thing
              2. thing ...
              @@ -228,31 +221,4 @@ If it's preferred not to wrap the header component in another element, use the ` ``` - - -### Classic Environment Support - -One of the challenges of using a design system is coping with legacy CSS that surrounds the new component. While web components are encapsulated, things like `font-size` will pierce the shadow DOM. To help combat this, the `auro-header` component supports a fixed attribute. Setting `fixed` will over-ride the component's dependency on REM values and use pixel values instead. - -This feature should only to be used within environments where the REM values cannot be used. - -
              - - - - On the journey together - - -
              - - See code - - - -```html - - On the journey together - -``` - diff --git a/demo/index.min.js b/demo/index.min.js index bfe9abf..8ccc7c1 100644 --- a/demo/index.min.js +++ b/demo/index.min.js @@ -100,7 +100,7 @@ class AuroLibraryRuntimeUtils { } } -var styleCss = i$1`.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}:host([type=px]) .heading--display{font-size:var(--ds-text-heading-display-px-breakpoint-sm, 44px);line-height:var(--ds-text-heading-display-height-breakpoint-px-sm, 54px)}@media screen and (min-width: 768px){:host([type=px]) .heading--display{font-size:var(--ds-text-heading-display-px-breakpoint-md, 48px);line-height:var(--ds-text-heading-display-height-breakpoint-px-sm, 54px)}}@media screen and (min-width: 1024px){:host([type=px]) .heading--display{font-size:var(--ds-text-heading-display-px-breakpoint-lg, 56px);line-height:var(--ds-text-heading-display-height-breakpoint-px-lg, 68px)}}:host([type=px]) .heading--800{font-size:var(--ds-text-heading-800-px-breakpoint-sm, 32px);line-height:var(--ds-text-heading-800-height-breakpoint-px-sm, 38px)}@media screen and (min-width: 768px){:host([type=px]) .heading--800{font-size:var(--ds-text-heading-800-px-breakpoint-md, 36px);line-height:var(--ds-text-heading-800-height-breakpoint-px-md, 42px)}}@media screen and (min-width: 1024px){:host([type=px]) .heading--800{font-size:var(--ds-text-heading-800-px-breakpoint-lg, 40px);line-height:var(--ds-text-heading-800-height-breakpoint-px-lg, 48px)}}:host([type=px]) .heading--700{font-size:var(--ds-text-heading-700-px-breakpoint-sm, 28px);line-height:var(--ds-text-heading-700-height-breakpoint-px-sm, 34px)}@media screen and (min-width: 768px){:host([type=px]) .heading--700{font-size:var(--ds-text-heading-700-px-breakpoint-md, 32px);line-height:var(--ds-text-heading-700-height-breakpoint-px-md, 38px)}}@media screen and (min-width: 1024px){:host([type=px]) .heading--700{font-size:var(--ds-text-heading-700-px-breakpoint-lg, 36px);line-height:var(--ds-text-heading-700-height-breakpoint-px-lg, 44px)}}:host([type=px]) .heading--600{font-size:var(--ds-text-heading-600-px-breakpoint-sm, 26px);line-height:var(--ds-text-heading-600-height-breakpoint-px-sm, 30px);margin:var(--ds-size-200) 0}@media screen and (min-width: 768px){:host([type=px]) .heading--600{font-size:var(--ds-text-heading-600-px-breakpoint-md, 28px);line-height:var(--ds-text-heading-600-height-breakpoint-px-md, 34px)}}@media screen and (min-width: 1024px){:host([type=px]) .heading--600{line-height:var(--ds-text-heading-600-height-breakpoint-px-lg, 36px)}}:host([type=px]) .heading--500{font-size:var(--ds-text-heading-500-px-breakpoint-sm, 22px);line-height:var(--ds-text-heading-500-height-breakpoint-px-sm, 26px);margin:16px 0}@media screen and (min-width: 768px){:host([type=px]) .heading--500{font-size:var(--ds-text-heading-500-px-breakpoint-md, 24px);line-height:var(--ds-text-heading-500-height-breakpoint-px-md, 30px)}}@media screen and (min-width: 1024px){:host([type=px]) .heading--500{line-height:var(--ds-text-heading-500-height-breakpoint-px-lg, 32px)}}:host([type=px]) .heading--400{font-size:var(--ds-text-heading-400-px, 20px);line-height:var(--ds-text-heading-400-height-px, 26px);margin:var(--ds-size-150) 0}:host([type=px]) .heading--300{font-size:var(--ds-text-heading-300-px, 18px);line-height:var(--ds-text-heading-300-height-px, 26px);margin:var(--ds-size-150) 0}:host([type=px]) .util_stackMarginnone--bottom{margin-bottom:0}:host([type=px]) .util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, 0.125rem)}:host([type=px]) .util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, 0.25rem)}:host([type=px]) .util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, 0.5rem)}:host([type=px]) .util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, 0.75rem)}:host([type=px]) .util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}:host([type=px]) .util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}:host([type=px]) .util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}:host([type=px]) .util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}:host([type=px]) .util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}:host([type=px]) .util_stackMarginXxxs--bottom{margin-bottom:var(--ds-size-25, 0.125rem)}:host([type=px]) .util_stackMarginXxs--bottom{margin-bottom:var(--ds-size-50, 0.25rem)}:host([type=px]) .util_stackMarginXs--bottom{margin-bottom:var(--ds-size-100, 0.5rem)}:host([type=px]) .util_stackMarginSm--bottom{margin-bottom:var(--ds-size-150, 0.75rem)}:host([type=px]) .util_stackMarginMd--bottom{margin-bottom:var(--ds-size-200, 1rem)}:host([type=px]) .util_stackMarginLg--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}:host([type=px]) .util_stackMarginXl--bottom{margin-bottom:var(--ds-size-400, 2rem)}:host([type=px]) .util_stackMarginXxl--bottom{margin-bottom:var(--ds-size-600, 3rem)}:host([type=px]) .util_stackMarginXxxl--bottom{margin-bottom:var(--ds-size-800, 4rem)}:host([type=px]) .util_stackMarginnone--top{margin-bottom:0}:host([type=px]) .util_stackMargin25--top{margin-bottom:var(--ds-size-25, 0.125rem)}:host([type=px]) .util_stackMargin50--top{margin-bottom:var(--ds-size-50, 0.25rem)}:host([type=px]) .util_stackMargin100--top{margin-bottom:var(--ds-size-100, 0.5rem)}:host([type=px]) .util_stackMargin150--top{margin-bottom:var(--ds-size-150, 0.75rem)}:host([type=px]) .util_stackMargin200--top{margin-bottom:var(--ds-size-200, 1rem)}:host([type=px]) .util_stackMargin300--top{margin-bottom:var(--ds-size-300, 1.5rem)}:host([type=px]) .util_stackMargin400--top{margin-bottom:var(--ds-size-400, 2rem)}:host([type=px]) .util_stackMargin600--top{margin-bottom:var(--ds-size-600, 3rem)}:host([type=px]) .util_stackMargin800--top{margin-bottom:var(--ds-size-800, 4rem)}:host([type=px]) .util_stackMarginXxxs--top{margin-bottom:var(--ds-size-25, 0.125rem)}:host([type=px]) .util_stackMarginXxs--top{margin-bottom:var(--ds-size-50, 0.25rem)}:host([type=px]) .util_stackMarginXs--top{margin-bottom:var(--ds-size-100, 0.5rem)}:host([type=px]) .util_stackMarginSm--top{margin-bottom:var(--ds-size-150, 0.75rem)}:host([type=px]) .util_stackMarginMd--top{margin-bottom:var(--ds-size-200, 1rem)}:host([type=px]) .util_stackMarginLg--top{margin-bottom:var(--ds-size-300, 1.5rem)}:host([type=px]) .util_stackMarginXl--top{margin-bottom:var(--ds-size-400, 2rem)}:host([type=px]) .util_stackMarginXxl--top{margin-bottom:var(--ds-size-600, 3rem)}:host([type=px]) .util_stackMarginXxxl--top{margin-bottom:var(--ds-size-800, 4rem)}`; +var styleCss = i$1`.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, 0.125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, 0.25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, 0.5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, 0.75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, 0.125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, 0.25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, 0.5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, 0.75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}`; // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. @@ -113,9 +113,7 @@ var styleCss = i$1`.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-headin * @attr {String} display - Determines presentation of header. Options are `display`, `800`, `700`, `600`, `500`, `400`, `300`. * @attr {String} color - Allows user to pass in CSS custom property or direct hex value to change the color of the header * @attr {String} margin - Specify the margin(s) to be altered. Options are `top`, `bottom`, or `both`. - * @attr {String} size - Specify size of margin adjustment, either `none`, `25`, `50`, `100`, `150`, `200`, `300`, `400`, `600` or `800`. **DEPRECATED** the `xxxs` - `xxxl` options. - * @attr {String} type - **DEPRECATED** Option, `px`. Legacy option for converting REMs to PX. Use `fixed` feature. - * @attr {Boolean} fixed - Uses px values instead of rem + * @attr {String} size - Specify size of margin adjustment, either `none`, `25`, `50`, `100`, `150`, `200`, `300`, `400`, `600` or `800`. */ /* eslint complexity: ["error", 21] */ @@ -177,16 +175,7 @@ class AuroHeader extends h { spacingDecision(size) { if (this.margin === 'both') { switch (size) { - case 'none': return `util_stackMarginNone--top util_stackMarginNone--bottom`; - case 'xxxs': return `util_stackMarginXxxs--top util_stackMarginXxxs--bottom`; - case 'xxs': return `util_stackMarginXxs--top util_stackMarginXxs--bottom`; - case 'xs': return `util_stackMarginXs--top util_stackMarginXs--bottom`; - case 'sm': return `util_stackMarginSm--top util_stackMarginSm--bottom`; - case 'md': return `util_stackMarginMd--top util_stackMarginMd--bottom`; - case 'lg': return `util_stackMarginLg--top util_stackMarginLg--bottom`; - case 'xl': return `util_stackMarginXl--top util_stackMarginXl--bottom`; - case 'xxl': return `util_stackMarginXxl--top util_stackMarginXxl--bottom`; - case 'xxxl': return `util_stackMarginXxl--top util_stackMarginXxl--bottom`; + case 'none': return `util_stackMarginnone--top util_stackMarginnone--bottom`; case '25': return `util_stackMargin25--top util_stackMargin25--bottom`; case '50': return `util_stackMargin50--top util_stackMargin50--bottom`; case '100': return `util_stackMargin100--top util_stackMargin100--bottom`; @@ -211,7 +200,7 @@ class AuroHeader extends h { */ spacingApplied(size) { switch (size) { - case 'none': return `util_stackMarginNone--${this.margin}`; + case 'none': return `util_stackMarginnone--${this.margin}`; case '25': return `util_stackMargin25--${this.margin}`; case '50': return `util_stackMargin50--${this.margin}`; case '100': return `util_stackMargin100--${this.margin}`; @@ -221,15 +210,6 @@ class AuroHeader extends h { case '400': return `util_stackMargin400--${this.margin}`; case '600': return `util_stackMarginX600--${this.margin}`; case '800': return `util_stackMargin800--${this.margin}`; - case 'xxxs': return `util_stackMarginXxxs--${this.margin}`; - case 'xxs': return `util_stackMarginXxs--${this.margin}`; - case 'xs': return `util_stackMarginXs--${this.margin}`; - case 'sm': return `util_stackMarginSm--${this.margin}`; - case 'md': return `util_stackMarginMd--${this.margin}`; - case 'lg': return `util_stackMarginLg--${this.margin}`; - case 'xl': return `util_stackMarginXl--${this.margin}`; - case 'xxl': return `util_stackMarginXxl--${this.margin}`; - case 'xxxl': return `util_stackMarginXxl--${this.margin}`; default: return ''; } } diff --git a/docs/api.md b/docs/api.md index f3d84ae..4382641 100644 --- a/docs/api.md +++ b/docs/api.md @@ -2,13 +2,6 @@ The auro-header component is a custom element to make using headers with the Auro Design System seamless and easy. -## Attributes - -| Attribute | Type | Description | -|-----------|-----------|--------------------------------------------------| -| `fixed` | `Boolean` | Uses px values instead of rem | -| `type` | `String` | **DEPRECATED** Option, `px`. Legacy option for converting REMs to PX. Use `fixed` feature. | - ## Properties | Property | Attribute | Type | Default | Description | @@ -17,4 +10,4 @@ The auro-header component is a custom element to make using headers with the Aur | `display` | `display` | `String` | "display" | Determines presentation of header. Options are `display`, `800`, `700`, `600`, `500`, `400`, `300`. | | `level` | `level` | `String` | | Determines heading level for HTML element. Options are `1` - `6` | | `margin` | `margin` | `String` | | Specify the margin(s) to be altered. Options are `top`, `bottom`, or `both`. | -| `size` | `size` | `String` | | Specify size of margin adjustment, either `none`, `25`, `50`, `100`, `150`, `200`, `300`, `400`, `600` or `800`. **DEPRECATED** the `xxxs` - `xxxl` options. | +| `size` | `size` | `String` | | Specify size of margin adjustment, either `none`, `25`, `50`, `100`, `150`, `200`, `300`, `400`, `600` or `800`. | diff --git a/docs/partials/api.md b/docs/partials/api.md index 371a10e..5a97590 100644 --- a/docs/partials/api.md +++ b/docs/partials/api.md @@ -23,7 +23,7 @@ The auro-header will default to the h1 element with the `header--display` style. #### Changing Header Size -Use the `level` attribute to change the size of the `auro-header`. +Use the `level` attribute to change the size of the `auro-header`. **Note**: Changing the header level does not change the header style. This example will output an h3 header element with the default header--display style. @@ -138,21 +138,3 @@ If it's preferred not to wrap the header component in another element, use the ` - -### Classic Environment Support - -One of the challenges of using a design system is coping with legacy CSS that surrounds the new component. While web components are encapsulated, things like `font-size` will pierce the shadow DOM. To help combat this, the `auro-header` component supports a fixed attribute. Setting `fixed` will over-ride the component's dependency on REM values and use pixel values instead. - -This feature should only to be used within environments where the REM values cannot be used. - -
              - - -
              - - See code - - - - - diff --git a/package-lock.json b/package-lock.json index c6c073a..f55840d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { - "@aurodesignsystem/auro-library": "^3.0.1", + "@aurodesignsystem/auro-library": "^3.0.5", "chalk": "^5.3.0", "lit": "^3.2.0" }, @@ -90,11 +90,12 @@ } }, "node_modules/@aurodesignsystem/auro-library": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-library/-/auro-library-3.0.1.tgz", - "integrity": "sha512-09K0bOK5qgLQIu/IHb8ytRjOT8dQ73V1lzjAfnkZ00/fV/HoJa7pscJ+dHF4C54wJTCO236eiJF8AM/SVArwTQ==", + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-library/-/auro-library-3.0.5.tgz", + "integrity": "sha512-dGSsdTbGwQ9/YYVN0vVBCtOiSGYT1RBODyEsc0wpSPGLhqwdKeVRWDB8k5ltjMFx5LIz0XEej4EtTBGiRUvhTA==", "license": "Apache-2.0", "dependencies": { + "@floating-ui/dom": "^1.6.11", "handlebars": "^4.7.8", "markdown-magic": "^2.6.1", "npm-run-all": "^4.1.5" @@ -103,7 +104,7 @@ "generateDocs": "bin/generateDocs.mjs" }, "engines": { - "node": "^18 || ^20" + "node": "^20.x || ^22.x" } }, "node_modules/@aurodesignsystem/design-tokens": { @@ -986,6 +987,31 @@ "@types/chai": "^4.2.12" } }, + "node_modules/@floating-ui/core": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz", + "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==", + "license": "MIT", + "dependencies": { + "@floating-ui/utils": "^0.2.8" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.12", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz", + "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==", + "license": "MIT", + "dependencies": { + "@floating-ui/core": "^1.6.0", + "@floating-ui/utils": "^0.2.8" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.8", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz", + "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==", + "license": "MIT" + }, "node_modules/@humanwhocodes/module-importer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz", diff --git a/package.json b/package.json index 778f2fa..336c9b8 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "node": "^20.x || ^22.x " }, "dependencies": { - "@aurodesignsystem/auro-library": "^3.0.1", + "@aurodesignsystem/auro-library": "^3.0.5", "chalk": "^5.3.0", "lit": "^3.2.0" }, @@ -121,7 +121,8 @@ "./README.md", "./docs/api.md", "./demo/index.md", - "./demo/api.md" + "./demo/api.md", + "./demo/index.min.js" ] } ], diff --git a/src/auro-header.js b/src/auro-header.js index 14e1092..327b91f 100644 --- a/src/auro-header.js +++ b/src/auro-header.js @@ -18,9 +18,7 @@ import styleCss from "./style-css.js"; * @attr {String} display - Determines presentation of header. Options are `display`, `800`, `700`, `600`, `500`, `400`, `300`. * @attr {String} color - Allows user to pass in CSS custom property or direct hex value to change the color of the header * @attr {String} margin - Specify the margin(s) to be altered. Options are `top`, `bottom`, or `both`. - * @attr {String} size - Specify size of margin adjustment, either `none`, `25`, `50`, `100`, `150`, `200`, `300`, `400`, `600` or `800`. **DEPRECATED** the `xxxs` - `xxxl` options. - * @attr {String} type - **DEPRECATED** Option, `px`. Legacy option for converting REMs to PX. Use `fixed` feature. - * @attr {Boolean} fixed - Uses px values instead of rem + * @attr {String} size - Specify size of margin adjustment, either `none`, `25`, `50`, `100`, `150`, `200`, `300`, `400`, `600` or `800`. */ /* eslint complexity: ["error", 21] */ @@ -82,16 +80,7 @@ export class AuroHeader extends LitElement { spacingDecision(size) { if (this.margin === 'both') { switch (size) { - case 'none': return `util_stackMarginNone--top util_stackMarginNone--bottom`; - case 'xxxs': return `util_stackMarginXxxs--top util_stackMarginXxxs--bottom`; - case 'xxs': return `util_stackMarginXxs--top util_stackMarginXxs--bottom`; - case 'xs': return `util_stackMarginXs--top util_stackMarginXs--bottom`; - case 'sm': return `util_stackMarginSm--top util_stackMarginSm--bottom`; - case 'md': return `util_stackMarginMd--top util_stackMarginMd--bottom`; - case 'lg': return `util_stackMarginLg--top util_stackMarginLg--bottom`; - case 'xl': return `util_stackMarginXl--top util_stackMarginXl--bottom`; - case 'xxl': return `util_stackMarginXxl--top util_stackMarginXxl--bottom`; - case 'xxxl': return `util_stackMarginXxl--top util_stackMarginXxl--bottom`; + case 'none': return `util_stackMarginnone--top util_stackMarginnone--bottom`; case '25': return `util_stackMargin25--top util_stackMargin25--bottom`; case '50': return `util_stackMargin50--top util_stackMargin50--bottom`; case '100': return `util_stackMargin100--top util_stackMargin100--bottom`; @@ -116,7 +105,7 @@ export class AuroHeader extends LitElement { */ spacingApplied(size) { switch (size) { - case 'none': return `util_stackMarginNone--${this.margin}`; + case 'none': return `util_stackMarginnone--${this.margin}`; case '25': return `util_stackMargin25--${this.margin}`; case '50': return `util_stackMargin50--${this.margin}`; case '100': return `util_stackMargin100--${this.margin}`; @@ -126,15 +115,6 @@ export class AuroHeader extends LitElement { case '400': return `util_stackMargin400--${this.margin}`; case '600': return `util_stackMarginX600--${this.margin}`; case '800': return `util_stackMargin800--${this.margin}`; - case 'xxxs': return `util_stackMarginXxxs--${this.margin}`; - case 'xxs': return `util_stackMarginXxs--${this.margin}`; - case 'xs': return `util_stackMarginXs--${this.margin}`; - case 'sm': return `util_stackMarginSm--${this.margin}`; - case 'md': return `util_stackMarginMd--${this.margin}`; - case 'lg': return `util_stackMarginLg--${this.margin}`; - case 'xl': return `util_stackMarginXl--${this.margin}`; - case 'xxl': return `util_stackMarginXxl--${this.margin}`; - case 'xxxl': return `util_stackMarginXxl--${this.margin}`; default: return ''; } } diff --git a/src/style.scss b/src/style.scss index dcf9ba9..7b25595 100644 --- a/src/style.scss +++ b/src/style.scss @@ -13,105 +13,6 @@ @import "./../node_modules/@aurodesignsystem/webcorestylesheets/src/headings"; $auro-spacing-types: stack; - -// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- // - -// All the following code is DEPRECATED! -// With the update for the FIXED feature, this is no longer needed. -// REMOVE all support for this feature with the next MAJOR release. - -// the following styles are only to support use of auro-header -// in legacy UIs where hard-px values are needed. -:host([type=px]) { - .heading--display { - font-size: var(--ds-text-heading-display-px-breakpoint-sm, $ds-text-heading-display-px-breakpoint-sm); - line-height: var(--ds-text-heading-display-height-breakpoint-px-sm, $ds-text-heading-display-height-breakpoint-px-sm); - - @include auro_breakpoint--md { - font-size: var(--ds-text-heading-display-px-breakpoint-md, $ds-text-heading-display-px-breakpoint-md); - line-height: var(--ds-text-heading-display-height-breakpoint-px-sm, $ds-text-heading-display-height-breakpoint-px-sm); - } - - @include auro_breakpoint--lg { - font-size: var(--ds-text-heading-display-px-breakpoint-lg, $ds-text-heading-display-px-breakpoint-lg); - line-height: var(--ds-text-heading-display-height-breakpoint-px-lg, $ds-text-heading-display-height-breakpoint-px-lg); - } - } - - .heading--800 { - font-size: var(--ds-text-heading-800-px-breakpoint-sm, $ds-text-heading-800-px-breakpoint-sm); - line-height: var(--ds-text-heading-800-height-breakpoint-px-sm, $ds-text-heading-800-height-breakpoint-px-sm); - - @include auro_breakpoint--md { - font-size: var(--ds-text-heading-800-px-breakpoint-md, $ds-text-heading-800-px-breakpoint-md); - line-height: var(--ds-text-heading-800-height-breakpoint-px-md, $ds-text-heading-800-height-breakpoint-px-md); - } - - @include auro_breakpoint--lg { - font-size: var(--ds-text-heading-800-px-breakpoint-lg, $ds-text-heading-800-px-breakpoint-lg); - line-height: var(--ds-text-heading-800-height-breakpoint-px-lg, $ds-text-heading-800-height-breakpoint-px-lg); - } - } - - .heading--700 { - font-size: var(--ds-text-heading-700-px-breakpoint-sm, $ds-text-heading-700-px-breakpoint-sm); - line-height: var(--ds-text-heading-700-height-breakpoint-px-sm, $ds-text-heading-700-height-breakpoint-px-sm); - - @include auro_breakpoint--md { - font-size: var(--ds-text-heading-700-px-breakpoint-md, $ds-text-heading-700-px-breakpoint-md); - line-height: var(--ds-text-heading-700-height-breakpoint-px-md, $ds-text-heading-700-height-breakpoint-px-md); - } - - @include auro_breakpoint--lg { - font-size: var(--ds-text-heading-700-px-breakpoint-lg, $ds-text-heading-700-px-breakpoint-lg); - line-height: var(--ds-text-heading-700-height-breakpoint-px-lg, $ds-text-heading-700-height-breakpoint-px-lg); - } - } - - .heading--600 { - font-size: var(--ds-text-heading-600-px-breakpoint-sm, $ds-text-heading-600-px-breakpoint-sm); - line-height: var(--ds-text-heading-600-height-breakpoint-px-sm, $ds-text-heading-600-height-breakpoint-px-sm); - margin: var(--ds-size-200) 0; - - @include auro_breakpoint--md { - font-size: var(--ds-text-heading-600-px-breakpoint-md, $ds-text-heading-600-px-breakpoint-md); - line-height: var(--ds-text-heading-600-height-breakpoint-px-md, $ds-text-heading-600-height-breakpoint-px-md); - } - - @include auro_breakpoint--lg { - line-height: var(--ds-text-heading-600-height-breakpoint-px-lg, $ds-text-heading-600-height-breakpoint-px-lg); - } - } - - .heading--500 { - font-size: var(--ds-text-heading-500-px-breakpoint-sm, $ds-text-heading-500-px-breakpoint-sm); - line-height: var(--ds-text-heading-500-height-breakpoint-px-sm, $ds-text-heading-500-height-breakpoint-px-sm); - margin: 16px 0; - - @include auro_breakpoint--md { - font-size: var(--ds-text-heading-500-px-breakpoint-md, $ds-text-heading-500-px-breakpoint-md); - line-height: var(--ds-text-heading-500-height-breakpoint-px-md, $ds-text-heading-500-height-breakpoint-px-md); - } - - @include auro_breakpoint--lg { - line-height: var(--ds-text-heading-500-height-breakpoint-px-lg, $ds-text-heading-500-height-breakpoint-px-lg); - } - } - - .heading--400 { - font-size: var(--ds-text-heading-400-px, $ds-text-heading-400-px); - line-height: var(--ds-text-heading-400-height-px, $ds-text-heading-400-height-px); - margin: var(--ds-size-150) 0; - } - - .heading--300 { - font-size: var(--ds-text-heading-300-px, $ds-text-heading-300-px); - line-height: var(--ds-text-heading-300-height-px, $ds-text-heading-300-height-px); - margin: var(--ds-size-150) 0; - } -} - -// Legacy mappings were kept for backwards compatibility $size-map: ( "none": 0, "25": var(--ds-size-25, $ds-size-25), @@ -122,30 +23,17 @@ $size-map: ( "300": var(--ds-size-300, $ds-size-300), "400": var(--ds-size-400, $ds-size-400), "600": var(--ds-size-600, $ds-size-600), - "800": var(--ds-size-800, $ds-size-800), - "Xxxs": var(--ds-size-25, $ds-size-25), - "Xxs": var(--ds-size-50, $ds-size-50), - "Xs": var(--ds-size-100, $ds-size-100), - "Sm": var(--ds-size-150, $ds-size-150), - "Md": var(--ds-size-200, $ds-size-200), - "Lg": var(--ds-size-300, $ds-size-300), - "Xl": var(--ds-size-400, $ds-size-400), - "Xxl": var(--ds-size-600, $ds-size-600), - "Xxxl": var(--ds-size-800, $ds-size-800) + "800": var(--ds-size-800, $ds-size-800) ); @each $name, $size in $size-map { - :host([type=px]) { - .util_stackMargin#{$name}--bottom { - margin-bottom: $size; - } + .util_stackMargin#{$name}--bottom { + margin-bottom: $size; } } @each $name, $size in $size-map { - :host([type=px]) { - .util_stackMargin#{$name}--top { - margin-bottom: $size; - } + .util_stackMargin#{$name}--top { + margin-top: $size; } } diff --git a/test/auro-header.test.js b/test/auro-header.test.js index 8440e41..c8e9564 100644 --- a/test/auro-header.test.js +++ b/test/auro-header.test.js @@ -61,24 +61,6 @@ describe('auro-header', () => { expect(heading.className).to.equal('heading heading--display util_stackMargin50--bottom'); }); - it('sets bottom margin LEGACY', async () => { - const el = await fixture(html` - Hello World! - Hello World! - Hello World! - Hello World! - Hello World! - Hello World! - Hello World! - Hello World! - Hello World! - Hello World! - `); - - const heading = el.shadowRoot.querySelector('h2'); - expect(heading.className).to.equal('heading heading--display util_stackMarginXxxs--bottom'); - }); - it('sets top and bottom margin CURRENT', async () => { const el = await fixture(html` Hello World! @@ -97,24 +79,6 @@ describe('auro-header', () => { expect(heading.className).to.equal('heading heading--display util_stackMargin50--top util_stackMargin50--bottom'); }); - it('sets top and bottom margin LEGACY', async () => { - const el = await fixture(html` - Hello World! - Hello World! - Hello World! - Hello World! - Hello World! - Hello World! - Hello World! - Hello World! - Hello World! - Hello World! - `); - - const heading = el.shadowRoot.querySelector('h2'); - expect(heading.className).to.equal('heading heading--display util_stackMarginXxxs--top util_stackMarginXxxs--bottom'); - }); - it('sets color no color', async () => { const el = await fixture(html` Hello World!