[C] styled-components props cleanup

lsst-epo · Jun 21, 2024 · b1b9ff9 · b1b9ff9
1 parent 4bd1a58
commit b1b9ff9
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/components/layout/NavButtons/index.js b/components/layout/NavButtons/index.js
@@ -32,7 +32,7 @@ const NavButtons = ({
         passHref={true}
       >
         <NavButton
-          active={
+          $active={
             hasDefault ? activeType !== linkRight : activeType === linkLeft
           }
           onClick={() => setActiveType(linkLeft)}
@@ -68,7 +68,7 @@ const Nav = styled.nav`
   > * {
     margin-left: 0.5em;
   }
-  ${respond(`    
+  ${respond(`
     float: none;
     top: 40px;
     display: grid;
@@ -88,7 +88,7 @@ const NavButton = styled.a`
   padding: 1em 2em;
   background-color: var(--neutral10);
   ${(p) =>
-    p.active
+    p.$active
       ? `background-color: var(--turquoise60); color: var(--white);`
       : `&:hover {
     background-color: var(--turquoise20);
@@ -99,7 +99,7 @@ const NavButton = styled.a`
     place-content: center;
     min-width: auto;
     padding: 0.5em;
-    font-size: 24px; 
+    font-size: 24px;
   `)}
 `;
 

diff --git a/components/layout/Tabs/index.js b/components/layout/Tabs/index.js
@@ -78,7 +78,7 @@ const Tabs = ({ children, labels, defaultTab = 0 }) => {
           </Tab>
         ))}
       </TabList>
-      <TabPanel active={active}>{childrenWithPanelProps}</TabPanel>
+      <TabPanel $active={active}>{childrenWithPanelProps}</TabPanel>
     </TabContainer>
   );
 };
@@ -150,7 +150,7 @@ const TabPanel = styled.div`
   }
   ${(p) =>
     `>*:nth-child(${
-      p.active + 1
+      p.$active + 1
     }) {z-index: 1; opacity: 1; visibility: visible;}`}
 `;
 

diff --git a/components/page/FilterBar/index.js b/components/page/FilterBar/index.js
@@ -88,7 +88,7 @@ const FilterBar = ({ filterType, setLiveRegionMessage }) => {
               <div></div>
               <span>Filter</span>
             </ToggleButton>
-            <ToggleDropdown id="filter-dropdown" opened={filterOpen}>
+            <ToggleDropdown id="filter-dropdown" $opened={filterOpen}>
               <li>
                 <MixedLink url={asPath} params={{ filter: "" }}>
                   <T i18nKey={`filters.all`} />
@@ -121,7 +121,7 @@ const FilterBar = ({ filterType, setLiveRegionMessage }) => {
             <div id="sort"></div>
             <span>{t(`filters.sort`)}</span>
           </ToggleButton>
-          <ToggleDropdown id="sort-dropdown" opened={sortOpen}>
+          <ToggleDropdown id="sort-dropdown" $opened={sortOpen}>
             {sortItems.map((item, i) => {
               const active = query?.sort?.includes(item.slug);
 
@@ -251,12 +251,12 @@ const ToggleButton = styled.button`
 const ToggleDropdown = styled.ul`
   position: absolute;
   top: 40px;
-  opacity: ${(p) => (p.opened ? 1 : 0)};
-  visibility: ${(p) => (p.opened ? "visible" : "hidden")};
+  opacity: ${(p) => (p.$opened ? 1 : 0)};
+  visibility: ${(p) => (p.$opened ? "visible" : "hidden")};
   width: 300px;
   background-color: var(--neutral20);
   transition: opacity 0.2s;
-  z-index: ${(p) => (p.opened ? 1 : -1)};
+  z-index: ${(p) => (p.$opened ? 1 : -1)};
   ${respond(`width: auto;`, "640px")}
 
   li {