Lint stuff

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-Authored-By: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Author: 3 people

.stylelintrc

@@ -34,7 +34,7 @@
     } ],
     "font-family-no-duplicate-names": true,
     "font-family-no-missing-generic-family-keyword": true,
-    "function-comma-space-after": [ "always", {
+    "function-comma-space-after": [ "always-single-line", {
       "severity": "warning"
     } ],
     "function-max-empty-lines": 0,

src/app/components/Footer/Footer.css

@@ -31,11 +31,7 @@
  */
 @media (min-width: 60.1em) and (max-width: 90em) {
   .footer-wrapper--vertical-nav-toolbar {
-    padding-left: clamp(
-      0rem,
-      calc(8rem - (100vw - 128rem) / 2),
-      8rem
-    );
+    padding-left: clamp(0rem, calc(8rem - (100vw - 128rem) / 2), 8rem);
   }
 }
 

src/app/components/Footer/index.tsx

@@ -203,7 +203,7 @@ const SocialIconMessage: React.FunctionComponent<{
       aria-label={`OpenStax on ${useIntl().formatMessage({ id })}`}
       href={href}
       target='_blank'
-      rel='noopener'
+      rel="noopener noreferrer"
     >
       <Icon />
     </a>
@@ -333,7 +333,7 @@ const SocialDirectory = () => (
       Icon={IGIcon}
     />
     <li>
-      <a className="footer-bottom-link" href={riceUrl} target='_blank' rel='noopener'>
+      <a className="footer-bottom-link" href={riceUrl} target='_blank' rel="noopener noreferrer">
         <img
           className="footer-logo"
           src={RiceWhiteLogo}

src/app/components/Footer/styled.tsx

@@ -31,118 +31,6 @@ export const iconStyles = css`
   height: 1em;
 `;
 
-interface IconProps extends React.SVGAttributes<SVGSVGElement> {
-  className?: string;
-}
-
-/**
- * Facebook icon for social media links.
- * SVG path from Font Awesome Free (https://fontawesome.com - MIT License)
- *
- * Note: Wrapped with styled() to enable styled-components styling
- */
-function FacebookIconBase({ className, ...props }: IconProps) {
-  return (
-    <svg
-      className={className}
-      viewBox="0 0 320 512"
-      aria-hidden="true"
-      {...props}
-    >
-      <path
-        fill="currentColor"
-        d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"
-      />
-    </svg>
-  );
-}
-
-export const FBIcon = styled(FacebookIconBase)`
-  ${iconStyles}
-`;
-
-/**
- * X (Twitter) icon for social media links.
- * SVG path from Font Awesome Free (https://fontawesome.com - MIT License)
- */
-function XTwitter() {
-  return (
-    <svg
-      aria-hidden='true'
-      focusable='false'
-      data-prefix='fab'
-      data-icon='x-twitter'
-      role='img'
-      xmlns='http://www.w3.org/2000/svg'
-      viewBox='0 0 512 512'
-      className='svg-inline--fa fa-x-twitter'
-      height='1em'
-    >
-      <path
-        fill='currentColor'
-        d={
-          'M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5' +
-          ' 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'
-        }
-      ></path>
-    </svg>
-  );
-}
-
-export const TwitterIcon = XTwitter;
-
-/**
- * Instagram icon for social media links.
- * SVG path from Font Awesome Free (https://fontawesome.com - MIT License)
- *
- * Note: Wrapped with styled() to enable styled-components styling
- */
-function InstagramIconBase({ className, ...props }: IconProps) {
-  return (
-    <svg
-      className={className}
-      viewBox="0 0 448 512"
-      aria-hidden="true"
-      {...props}
-    >
-      <path
-        fill="currentColor"
-        d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
-      />
-    </svg>
-  );
-}
-
-export const IGIcon = styled(InstagramIconBase)`
-  ${iconStyles}
-`;
-
-/**
- * LinkedIn icon for social media links.
- * SVG path from Font Awesome Free (https://fontawesome.com - MIT License)
- *
- * Note: Wrapped with styled() to enable styled-components styling
- */
-function LinkedInIconBase({ className, ...props }: IconProps) {
-  return (
-    <svg
-      className={className}
-      viewBox="0 0 448 512"
-      aria-hidden="true"
-      {...props}
-    >
-      <path
-        fill="currentColor"
-        d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"
-      />
-    </svg>
-  );
-}
-
-export const LinkedInIcon = styled(LinkedInIconBase)`
-  ${iconStyles}
-`;
-
 const boxedMargin = 1.5;
 export const boxed = css`
   max-width: ${contentWrapperMaxWidth + boxedMargin * 2}rem;

src/app/components/NavBar/index.tsx

@@ -3,7 +3,6 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
 import { Dialog, ModalOverlay, Modal } from 'react-aria-components';
 import { ProfileMenu, ProfileMenuButton, ProfileMenuItem, UserIcon } from '@openstax/ui-components';
-import classNames from 'classnames';
 import Color from 'color';
 import openstaxLogo from '../../../assets/logo.svg';
 import * as authSelect from '../../auth/selectors';
@@ -295,7 +294,6 @@ const NavigationBar = ({user, loggedOut, currentPath, hasUnsavedHighlight, param
           onClick={(e) => unsavedHighlightsHandler(e, logoUrl)}
         >
           <img
-            role='img'
             src={openstaxLogo}
             alt={intl.formatMessage({id: 'i18n:nav:logo:alt'})}
             className="navbar-header-image"

src/app/components/NavBar/styled.tsx

@@ -1,11 +1,9 @@
-import React from 'react';
 import styled, { css, keyframes } from 'styled-components/macro';
 import { ModalOverlay, Modal } from 'react-aria-components';
 import Color from 'color';
 import { contentWrapperMaxWidth } from '../../content/components/constants';
 import { disablePrint } from '../../content/components/utils/disablePrint';
 import theme from '../../theme';
-import Times from '../Times';
 import { h4DesktopStyle, linkHover, textRegularStyle } from '../Typography';
 import { defaultFocusOutline } from '../../theme';
 
@@ -186,23 +184,6 @@ export const DropdownOverlay = styled.div`
   }
 `;
 
-export const TimesIcon = styled((
-  { theme: _theme, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & { theme?: unknown }
-) =>
-  <button type="button" aria-label='close menu' {...props}><Times /></button>
-)`
-  cursor: pointer;
-  border: none;
-  padding: 0;
-  background: none;
-  position: absolute;
-  height: ${navMobileHeight}rem;
-  width: ${navMobileHeight}rem;
-  top: 0;
-  right: 0;
-  color: ${theme.color.primary.gray.base};
-`;
-
 export const BarWrapper = styled.div`
   overflow: visible;
   z-index: ${theme.zIndex.navbar}; /* above book nav */