Loading Spinner, Sidenav, Docs: use is-on-background correctly (#657)

* fix(loading-spinner, sidenav, docs): use is-on-background correctly

* chore: add changeset

* fix: address linting issues

.changeset/eight-dots-cry.md

@@ -0,0 +1,6 @@
+---
+'@ithaka/pharos': major
+'@ithaka/pharos-site': major
+---
+
+Use is-on-background in place of on-background

packages/pharos-site/static/guidelines/button.docs.mdx

@@ -306,8 +306,8 @@ import ellipsesExample from '@images/components/button/buttons_ellipses-example.
   <PageSection title="Buttons on dark background" subSectionLevel={1}>
     <p>
       When a button is used on a darker background (e.g., black or marble-gray-20), use the
-      on-background attribute. The four variants described above can all be used on dark backgrounds
-      and follow the same guidelines.
+      is-on-background attribute. The four variants described above can all be used on dark
+      backgrounds and follow the same guidelines.
     </p>
     <div
       style={{

packages/pharos/src/components/checkbox/PharosCheckbox.react.stories.jsx

@@ -118,7 +118,7 @@ export const Validity = {
   },
 };
 
-export const isOnBackground = {
+export const IsOnBackground = {
   name: 'On background',
   render: () => (
     <div>

packages/pharos/src/components/checkbox/pharos-checkbox.wc.stories.jsx

@@ -105,7 +105,7 @@ export const Validity = {
   },
 };
 
-export const isOnBackground = {
+export const IsOnBackground = {
   name: 'On background',
   render: () =>
     html`

packages/pharos/src/components/dropdown-menu/PharosDropdownMenu.react.stories.jsx

@@ -178,7 +178,7 @@ export const FullWidth = {
   ),
 };
 
-export const isOnBackground = {
+export const IsOnBackground = {
   render: () => (
     <div
       style={{

packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu.wc.stories.jsx

@@ -178,7 +178,7 @@ export const FullWidth = {
   },
 };
 
-export const isOnBackground = {
+export const IsOnBackground = {
   render: () => {
     const effect = () => {
       useEffect(() => {

packages/pharos/src/components/loading-spinner/pharos-loading-spinner.scss

@@ -13,7 +13,7 @@
   align-items: center;
 }
 
-:host(:not([on-background])) .loading-spinner__wrapper {
+:host(:not([is-on-background])) .loading-spinner__wrapper {
   background-color: rgb(255 255 255 / 0.8);
 }
 

packages/pharos/src/components/loading-spinner/pharos-loading-spinner.ts

@@ -57,10 +57,10 @@ focusable="false"
 export class PharosLoadingSpinner extends PharosElement {
   /**
    * Indicates if the spinner is on background
-   * @attr on-background
+   * @attr is-on-background
    */
-  @property({ type: Boolean, reflect: true, attribute: 'on-background' })
-  public onBackground = false;
+  @property({ type: Boolean, reflect: true, attribute: 'is-on-background' })
+  public isOnBackground = false;
 
   /**
    * Indicates if the spinner is small
@@ -111,7 +111,7 @@ export class PharosLoadingSpinner extends PharosElement {
       { stroke: PharosLoadingSpinnerColorStrokeOnBackground, offset: 0.9 },
       { stroke: PharosLoadingSpinnerColorStrokeOnBackground, offset: 1 },
     ];
-    const colorKeys = this.onBackground ? colorKeysOnBackground : colorKeysBase;
+    const colorKeys = this.isOnBackground ? colorKeysOnBackground : colorKeysBase;
     const colorTiming: KeyframeAnimationOptions = {
       easing: 'ease-in-out',
       duration: 6000,

packages/pharos/src/components/loading-spinner/pharos-loading-spinner.wc.stories.jsx

@@ -39,7 +39,7 @@ export const OnBackground = {
   render: () =>
     html`
       <div style="height: 5rem; width: 5rem; background: black; position: relative;">
-        <storybook-pharos-loading-spinner on-background></storybook-pharos-loading-spinner>
+        <storybook-pharos-loading-spinner is-on-background></storybook-pharos-loading-spinner>
       </div>
     `,
 };
@@ -57,7 +57,7 @@ export const SmallOnBackground = {
   render: () =>
     html`
       <div style="height: 5rem; width: 5rem; background: black; position: relative;">
-        <storybook-pharos-loading-spinner small on-background></storybook-pharos-loading-spinner>
+        <storybook-pharos-loading-spinner small is-on-background></storybook-pharos-loading-spinner>
       </div>
     `,
 };

packages/pharos/src/components/sidenav/pharos-sidenav.test.ts

@@ -17,15 +17,15 @@ describe('pharos-sidenav', () => {
           name="my-input-group"
           placeholder="Search"
           hide-label
-          on-background
+          is-on-background
         >
           <span slot="label">Search</span>
           <test-pharos-button
             name="search-button"
             icon="search"
             variant="subtle"
             a11y-label="search"
-            on-background
+            is-on-background
           ></test-pharos-button>
         </test-pharos-input-group>
         <test-pharos-sidenav-section show-divider>

packages/pharos/src/components/sidenav/pharos-sidenav.wc.stories.jsx

@@ -46,7 +46,7 @@ export const Base = {
             icon="search"
             variant="subtle"
             a11y-label="search"
-            on-background
+            is-on-background
           ></storybook-pharos-button>
         </storybook-pharos-input-group>
         <storybook-pharos-sidenav-section show-divider>

packages/pharos/src/components/toast/pharos-toast.test.ts

@@ -67,9 +67,9 @@ describe('pharos-toast', () => {
   });
 
   it('fires a custom event pharos-toast-close after closing', async () => {
-    let detail = null;
+    let actualId = '';
     const handleClose = (e: Event): void => {
-      detail = (e as CustomEvent).detail;
+      actualId = (e as CustomEvent).detail.id;
     };
     component.addEventListener('pharos-toast-close', handleClose);
 
@@ -81,6 +81,6 @@ describe('pharos-toast', () => {
     await component.updateComplete;
     await aTimeout(500);
 
-    expect((detail as any).id === component.id).to.be.true;
+    expect(actualId === component.id).to.be.true;
   });
 });