Merge main to a11y-fixes

angad-sethi · May 20, 2023 · af8a7a8 · af8a7a8
2 parents 80583bc + fd41802
commit af8a7a8
Show file tree

Hide file tree

Showing 11 changed files with 188 additions and 463 deletions.
diff --git a/README.md b/README.md
@@ -51,7 +51,3 @@ styled-components-website
 ├── utils/       # Various utilities use across the site
 └── vendor/      # Cached dependencies
 ```
-
-### Got stuck?
-
-Feel free to ping us on [Spectrum](https://spectrum.chat/styled-components/website) if you get stuck somewhere while trying to make this website better, let's resolve it together!
diff --git a/components/Layout.js → components/Layout.ts b/components/Layout.js → components/Layout.ts
@@ -13,7 +13,7 @@ export const Container = styled.div`
   `)};
 `;
 
-export const Content = styled.div`
+export const Content = styled.div<{ $hero: boolean; $moveRight: boolean }>`
   max-width: 100%;
   margin: 0;
   padding: ${rem(90)} ${rem(60)} 0 ${rem(60)};
@@ -26,10 +26,11 @@ export const Content = styled.div`
     max-width: 80ch;
   }
 
-  ${mobile(css`
-    padding: ${rem(100)} ${rem(20)} ${rem(30)} ${rem(20)};
-    transform: translateX(${p => (p.$moveRight ? rem(sidebarWidth) : 0)});
-  `)};
+  ${p =>
+    mobile(css`
+      padding: ${rem(100)} ${rem(20)} ${rem(30)} ${rem(20)};
+      transform: translateX(${p.$moveRight ? rem(sidebarWidth) : 0});
+    `)};
 
   ${p =>
     p.$hero &&

diff --git a/components/Nav/Social.js b/components/Nav/Social.js
@@ -41,11 +41,6 @@ const SocialLink = styled(Link).attrs((/* props */) => ({
   }
 `;
 
-const Svg = styled.svg`
-  width: ${p => rem(Number(p.width))};
-  height: ${p => rem(Number(p.height))};
-`;
-
 const StyledIcon = styled.div`
   && {
     width: ${p => rem(Number(p.width))};
@@ -63,21 +58,8 @@ const StyledIcon = styled.div`
 //   </Svg>
 // )
 
-const Spectrum = () => (
-  <Svg width="14" height="14" viewBox="0 0 15 15">
-    <title>spectrum</title>
-    <path
-      fill="#FFF"
-      d="M0 6.5V1c0-.6.4-1 1-1 9 .3 13.7 5 14 14 0 .6-.4 1-1 1H8.5c-.6 0-1-.4-1-1-.3-4.4-2-6.2-6.5-6.5-.6 0-1-.4-1-1z"
-    />
-  </Svg>
-);
-
 const Social = props => (
   <Wrapper {...props}>
-    <SocialLink href="https://spectrum.chat/styled-components/" aria-label="Spectrum chat">
-      <Spectrum />
-    </SocialLink>
     {/* <SocialLink href="https://twitter.com/someone">
       <Twitter />
     </SocialLink> */}

diff --git a/sections/tooling/stylelint.md b/sections/tooling/stylelint.md
@@ -173,7 +173,7 @@ The full list of supported tags:
 - `sc-property`
 - `sc-value`
 
-> If you are in doubt of the vocabulary you can refer to [this CSS vocabulary list](http://apps.workflower.fi/vocabs/css/en) with examples.
+> If you are in doubt of the vocabulary you can refer to [this CSS vocabulary list](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) with examples.
 
 For example, when you interpolate another styled component, what you really interpolate is its unique selector. Since the processor doesn't know that, you can tell it to replace it with a selector when linting:
 

diff --git a/test/components/NavBar/__snapshots__/MobileNavbar.spec.js.snap b/test/components/NavBar/__snapshots__/MobileNavbar.spec.js.snap
@@ -78,12 +78,7 @@ exports[`MobileNavbar renders correctly 1`] = `
   fill: currentColor;
 }
 
-.c17 {
-  width: 0.7777777777777778rem;
-  height: 0.7777777777777778rem;
-}
-
-.c18.c18 {
+.c17.c17 {
   width: NaNrem;
   height: 1rem;
 }
@@ -297,33 +292,13 @@ exports[`MobileNavbar renders correctly 1`] = `
       <nav
         className="c15"
       >
-        <a
-          aria-label="Spectrum chat"
-          className="c16"
-          href="https://spectrum.chat/styled-components/"
-        >
-          <svg
-            className="c17"
-            height="14"
-            viewBox="0 0 15 15"
-            width="14"
-          >
-            <title>
-              spectrum
-            </title>
-            <path
-              d="M0 6.5V1c0-.6.4-1 1-1 9 .3 13.7 5 14 14 0 .6-.4 1-1 1H8.5c-.6 0-1-.4-1-1-.3-4.4-2-6.2-6.5-6.5-.6 0-1-.4-1-1z"
-              fill="#FFF"
-            />
-          </svg>
-        </a>
         <a
           aria-label="Github"
           className="c16"
           href="https://github.com/styled-components"
         >
           <svg
-            className="c18"
+            className="c17"
             height="18"
           />
         </a>
@@ -333,7 +308,7 @@ exports[`MobileNavbar renders correctly 1`] = `
           href="https://medium.com/styled-components"
         >
           <svg
-            className="c18"
+            className="c17"
             height="18"
           />
         </a>