fix(site): use Pharos v14 properties (#703)

* fix(site): use Pharos v14 properties - Add `open` to Sidenav - Update `onBackground` to `isOnBackground` in all instances * chore: add changeset * fix(deps): add Babel plugin as dependency
ithaka · Mar 8, 2024 · 7905475 · 7905475
1 parent 6894e26
commit 7905475
Show file tree

Hide file tree

Showing 13 changed files with 59 additions and 46 deletions.
diff --git a/.changeset/beige-planes-hide.md b/.changeset/beige-planes-hide.md
@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos-site': patch
+---
+
+Fix component properties for Pharos v14
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/packages/pharos-site/babel.config.js b/packages/pharos-site/babel.config.js
@@ -5,7 +5,7 @@ module.exports = {
     '@babel/plugin-transform-block-scoping',
     ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
     ['@babel/plugin-proposal-class-properties', { loose: true }],
-    ['@babel/plugin-proposal-private-methods', { loose: true }],
+    ['@babel/plugin-transform-private-methods', { loose: true }],
     '@babel/plugin-proposal-export-default-from',
     '@babel/plugin-syntax-dynamic-import',
     ['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }],

diff --git a/packages/pharos-site/package.json b/packages/pharos-site/package.json
@@ -32,6 +32,7 @@
     "sass": "^1.63.6"
   },
   "devDependencies": {
+    "@babel/plugin-transform-private-methods": "^7.23.3",
     "@types/mdx-js__react": "^1.5.3",
     "@types/react": "^17.0.1",
     "@types/react-dom": "^17.0.0",

diff --git a/packages/pharos-site/src/components/Sidenav.tsx b/packages/pharos-site/src/components/Sidenav.tsx
@@ -55,7 +55,7 @@ const Sidenav: FC = () => {
     };
 
     const content = (
-      <PharosSidenav mainContentId="skip-link" className={sidenav}>
+      <PharosSidenav mainContentId="skip-link" open={true} className={sidenav}>
         <PharosLink href="/" slot="top" flex onClick={handleLinkClick}>
           <div>
             <div className={siteBrand__title}>{data.site.siteMetadata.title}</div>

diff --git a/packages/pharos-site/src/components/footer.tsx b/packages/pharos-site/src/components/footer.tsx
@@ -38,7 +38,7 @@ const Footer: FC = () => {
               <li>
                 <PharosLink
                   href="/components/component-status"
-                  onBackground
+                  isOnBackground
                   data-sc="link:component status footer"
                   onClick={handleLinkClick}
                 >
@@ -48,7 +48,7 @@ const Footer: FC = () => {
               <li>
                 <PharosLink
                   href="https://github.com/ithaka/pharos/blob/main/packages/pharos/CHANGELOG.md"
-                  onBackground
+                  isOnBackground
                   target="_blank"
                   data-sc="link:changelog footer"
                 >
@@ -58,7 +58,7 @@ const Footer: FC = () => {
               <li>
                 <PharosLink
                   href="https://pharos.jstor.org/storybooks/wc/"
-                  onBackground
+                  isOnBackground
                   target="_blank"
                   data-sc="link:wc storybook footer"
                 >
@@ -68,7 +68,7 @@ const Footer: FC = () => {
               <li>
                 <PharosLink
                   href="https://pharos.jstor.org/storybooks/react/"
-                  onBackground
+                  isOnBackground
                   target="_blank"
                   data-sc="link:react storybook footer"
                 >
@@ -80,12 +80,12 @@ const Footer: FC = () => {
           <div className={container__center}>
             <ul className={list}>
               <li>
-                <PharosLink href="https://about.jstor.org/" onBackground target="_blank">
+                <PharosLink href="https://about.jstor.org/" isOnBackground target="_blank">
                   About JSTOR
                 </PharosLink>
               </li>
               <li className={container__link}>
-                <PharosLink href="https://www.ithaka.org/careers/" onBackground target="_blank">
+                <PharosLink href="https://www.ithaka.org/careers/" isOnBackground target="_blank">
                   Careers
                 </PharosLink>
                 <strong className={badge}>We&apos;re hiring!</strong>
@@ -94,7 +94,7 @@ const Footer: FC = () => {
                 <PharosLink
                   href="javascript:void(0)"
                   onclick="OneTrust.ToggleInfoDisplay()"
-                  onBackground
+                  isOnBackground
                 >
                   Cookie settings
                 </PharosLink>
@@ -108,15 +108,15 @@ const Footer: FC = () => {
             <div>
               <PharosLink
                 href="mailto:opensource@ithaka.org"
-                onBackground
+                isOnBackground
                 data-sc="link:email footer"
               >
                 Email us
               </PharosLink>{' '}
               or{' '}
               <PharosLink
                 href="https://github.com/ithaka/pharos"
-                onBackground
+                isOnBackground
                 target="_blank"
                 data-sc="link:repo footer"
               >
@@ -132,7 +132,7 @@ const Footer: FC = () => {
           </div>
           <em className={`${note} ${netlifyLink}`}>
             This site is powered by{' '}
-            <PharosLink href="https://www.netlify.com" onBackground target="_blank">
+            <PharosLink href="https://www.netlify.com" isOnBackground target="_blank">
               Netlify
             </PharosLink>
           </em>

diff --git a/packages/pharos-site/src/components/layout.tsx b/packages/pharos-site/src/components/layout.tsx
@@ -42,7 +42,7 @@ const Layout: FC<LayoutProps> = ({ children, location, fill }) => {
     const body = (
       <main className={main}>
         <div className={topBar}>
-          <PharosLink id="skip-link" skip href="#sidenav-skip-link" onBackground>
+          <PharosLink id="skip-link" skip href="#sidenav-skip-link" isOnBackground>
             Skip to main navigation
           </PharosLink>
         </div>

diff --git a/packages/pharos-site/src/pages/index.tsx b/packages/pharos-site/src/pages/index.tsx
@@ -50,7 +50,7 @@ const IndexPage: FC = () => {
           <PharosLink
             className={link__status}
             href="/components/component-status"
-            onBackground
+            isOnBackground
             flex
             data-sc="link:component status hero"
             onClick={handleLinkClick}

diff --git a/packages/pharos-site/static/guidelines/checkbox.docs.mdx b/packages/pharos-site/static/guidelines/checkbox.docs.mdx
@@ -94,9 +94,9 @@ import BestPractices from '@components/statics/BestPractices.tsx';
 
 <PageSection title="Variants">
   <PageSection
-    title="onBackground"
+    title="isOnBackground"
     subSectionLevel={1}
-    description="In cases where the background containing the checkbox will be a dark color or, in cases where the theme of the page/component would be dark, use the onBackground variant checkbox."
+    description="In cases where the background containing the checkbox will be a dark color or, in cases where the theme of the page/component would be dark, use the isOnBackground variant checkbox."
   >
     <div
       style={{
@@ -105,7 +105,7 @@ import BestPractices from '@components/statics/BestPractices.tsx';
       }}
     >
       <Canvas>
-        <PharosCheckbox onBackground>
+        <PharosCheckbox isOnBackground>
           <span slot="label">Checkbox label</span>
         </PharosCheckbox>
       </Canvas>