fix docs lint errors

ensdomains · Oct 12, 2023 · 7bc0210 · 7bc0210
1 parent da7b6c1
commit 7bc0210
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 67 deletions.
diff --git a/components/src/components/atoms/Typography/Typography.tsx b/components/src/components/atoms/Typography/Typography.tsx
@@ -67,7 +67,7 @@ type Props = {
   weight?: FontWeight
 
   fontVariant?: FontVariant
-} & Omit<NativeDivProps, 'color' | 'as'> &
+} & Omit<NativeDivProps, 'color' | 'as' | 'translate'> &
   WithColor &
   Omit<BoxProps, 'color'> & { fontVariant?: FontVariant }
 

diff --git a/components/src/css/rainbow-spinkles.css.ts b/components/src/css/rainbow-spinkles.css.ts
@@ -35,12 +35,15 @@ const responsiveProperties = defineProperties({
     borderRightColor: modeVars.color,
     borderTopColor: modeVars.color,
     borderStyle: true,
+    borderTopLeftRadius: commonVars.radii,
+    borderTopRightRadius: commonVars.radii,
     borderBottomLeftRadius: commonVars.radii,
     borderBottomRightRadius: commonVars.radii,
     flexBasis: commonVars.space,
     fontFamily: commonVars.fonts,
     fontSize: commonVars.fontSizes,
     fontStyle: true,
+    fontFeatureSettings: true,
     fontWeight: commonVars.fontWeights,
     lineHeight: commonVars.lineHeights,
     textAlign: true,

diff --git a/docs/src/components/CodePreview/CodePreview.tsx b/docs/src/components/CodePreview/CodePreview.tsx
@@ -41,47 +41,29 @@ const Container = (props: BoxProps) => (
     backgroundColor="$background"
     borderColor="$greySurface"
     borderRadius="$2xLarge"
-    borderWidth="$0.5"
+    borderWidth="$2x"
     overflow="hidden"
-    font="$mono"
+    fontFamily="$mono"
   />
 )
-const Container2 = styled.div(
-  ({ theme }) => css`
-    background-color: ${theme.colors.background};
-    border-color: ${theme.colors.greySurface};
-    border-radius: ${theme.radii['2xLarge']};
-    border-width: ${theme.space['0.5']};
-    overflow: hidden;
-    font-family: ${theme.fonts.mono};
-  `,
-)
 
-const ContainerInner = ({
-  $expand,
-  ...props
-}: BoxProps & { $expand: boolean }) => (
+const ContainerInner = React.forwardRef<
+  HTMLElement,
+  BoxProps & { $expand: boolean }
+>(({ $expand, ...props }, ref) => (
   <Box
     {...props}
+    ref={ref}
     backgroundColor="$background"
     borderTopLeftRadius="$2xLarge"
-    borderTopRightRadius="2xLarge"
-    borderBottomRadius={$expand ? '2xLarge' : 'unset'}
+    borderTopRightRadius="$2xLarge"
+    borderBottomLeftRadius={$expand ? '2xLarge' : 'unset'}
+    borderBottomRightRadius={$expand ? '2xLarge' : 'unset'}
     overflow="auto"
     padding="$6"
   />
-)
-
-const ContainerInner2 = styled.div<{ $expand?: boolean; ref: any }>(
-  ({ theme, $expand }) => css`
-    background-color: ${theme.colors.background};
-    ${$expand && `border-bottom-radius: ${theme.radii['2xLarge']}`};
-    border-top-left-radius: ${theme.radii['2xLarge']};
-    border-top-right-radius: ${theme.radii['2xLarge']};
-    overflow: scroll;
-    padding: ${theme.space['6']};
-  `,
-)
+))
+ContainerInner.displayName = 'ComponentInner'
 
 const LiveEditorContainer = (props: BoxProps) => (
   <Box
@@ -92,20 +74,20 @@ const LiveEditorContainer = (props: BoxProps) => (
     padding="0.875rem 2.75rem 0.875rem 0.875rem"
   />
 )
-const LiveEditorContainer2 = styled.div(
-  ({ theme }) => css`
-    background-color: ${theme.colors.backgroundSecondary};
-    position: relative;
-    padding: 0.875rem 2.75rem 0.875rem 0.875rem;
-
-    .token {
-      font-family: 'iAWriter Mono', Menlo, Monaco, Consolas, 'Liberation Mono',
-        'Courier New', monospace, sans-serif !important;
-      font-size: 1.0625rem;
-      font-feature-settings: 'ss01', 'ss03';
-    }
-  `,
-)
+// const LiveEditorContainer2 = styled.div(
+//   ({ theme }) => css`
+//     background-color: ${theme.colors.backgroundSecondary};
+//     position: relative;
+//     padding: 0.875rem 2.75rem 0.875rem 0.875rem;
+
+//     .token {
+//       font-family: 'iAWriter Mono', Menlo, Monaco, Consolas, 'Liberation Mono',
+//         'Courier New', monospace, sans-serif !important;
+//       font-size: 1.0625rem;
+//       font-feature-settings: 'ss01', 'ss03';
+//     }
+//   `,
+// )
 
 const ButtonContainer = styled.div(
   ({ theme }) => css`

diff --git a/docs/src/layouts/docs.tsx b/docs/src/layouts/docs.tsx
@@ -3,7 +3,7 @@ import { GetLayout, NextLayout } from 'next'
 import Head from 'next/head'
 import styled, { css } from 'styled-components'
 
-import { mq, Box } from '@ensdomains/thorin'
+import { mq } from '@ensdomains/thorin'
 
 import {
   Header,
@@ -14,10 +14,9 @@ import {
 } from '~/components'
 
 import { getLayout as getBaseLayout } from './site'
-import { BoxProps } from '@ensdomains/thorin/dist/types/components/atoms/Box'
 import { Typography } from '@ensdomains/thorin'
 
-const Container = (props: BoxProps) => (
+const Container = (props: React.ComponentProps<typeof Typography>) => (
   <Typography
     {...props}
     display={{ base: 'block', lg: 'flex' }}
@@ -30,24 +29,24 @@ const Container = (props: BoxProps) => (
   />
 )
 
-const Container2 = styled.div(
-  ({ theme }) => css`
-    display: block;
-    justify-content: center;
-    margin: 0 auto;
-    max-width: ${theme.space['320']};
-    min-height: ${theme.space['viewHeight']};
-    padding: 0 ${theme.space['6']};
-    ${mq.lg.min(css`
-      display: flex;
-      justify-content: flex-end;
-    `)}
-    ${mq.xl.min(css`
-      display: flex;
-      justify-content: center;
-    `)};
-  `,
-)
+// const Container2 = styled.div(
+//   ({ theme }) => css`
+//     display: block;
+//     justify-content: center;
+//     margin: 0 auto;
+//     max-width: ${theme.space['320']};
+//     min-height: ${theme.space['viewHeight']};
+//     padding: 0 ${theme.space['6']};
+//     ${mq.lg.min(css`
+//       display: flex;
+//       justify-content: flex-end;
+//     `)}
+//     ${mq.xl.min(css`
+//       display: flex;
+//       justify-content: center;
+//     `)};
+//   `,
+// )
 
 const Aside = styled.aside(
   ({ theme }) => css`

diff --git a/docs/src/pages/components/[...slug].tsx b/docs/src/pages/components/[...slug].tsx
@@ -109,7 +109,7 @@ const Page: NextPageWithLayout<Props> = ({
       {!docsLink.includes('generated') && (
         <div style={{ marginTop: tokens.space['20'] }}>
           <Link href={docsLink}>
-            <Typography color="$text" fontVariant="bodyBold">
+            <Typography color="text" fontVariant="bodyBold">
               Edit on GitHub
             </Typography>
           </Link>