Merge branch 'main' of https://github.com/ensdomains/thorin

ensdomains · Oct 10, 2022 · ea643fb · ea643fb
2 parents 728897a + 6f26d2f
commit ea643fb
Show file tree

Hide file tree

Showing 9 changed files with 328 additions and 106 deletions.
diff --git a/components/package.json b/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ensdomains/thorin",
-  "version": "0.6.17",
+  "version": "0.6.18",
   "description": "A web3 native design system",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",

diff --git a/components/src/components/atoms/Avatar/Avatar.tsx b/components/src/components/atoms/Avatar/Avatar.tsx
@@ -61,20 +61,25 @@ const Container = styled.div<Container>(
   `,
 )
 
-const Placeholder = styled.div<{ $url?: string }>(
-  ({ theme, $url }) => css`
+const Placeholder = styled.div<{ $url?: string; $disabled: boolean }>(
+  ({ theme, $url, $disabled }) => css`
     background: ${$url || theme.colors.gradients.blue};
 
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 100%;
+
+    ${$disabled &&
+    css`
+      filter: grayscale(1);
+    `}
   `,
 )
 
-const Img = styled.img<{ $shown: boolean }>(
-  ({ $shown }) => css`
+const Img = styled.img<{ $shown: boolean; $disabled: boolean }>(
+  ({ $shown, $disabled }) => css`
     height: 100%;
     width: 100%;
     object-fit: cover;
@@ -84,6 +89,11 @@ const Img = styled.img<{ $shown: boolean }>(
     css`
       display: block;
     `}
+
+    ${$disabled &&
+    css`
+      filter: grayscale(1);
+    `}
   `,
 )
 
@@ -98,6 +108,8 @@ export type Props = {
   shape?: Shape
   /** A placeholder for the image to use when not loaded, in css format (e.g. url("https://example.com")) */
   placeholder?: string
+  /** If true sets the component into disabled format. */
+  disabled?: boolean
 } & Omit<NativeImgAttributes, 'alt' | 'onError' | 'children' | 'onError'>
 
 export const Avatar = ({
@@ -107,6 +119,7 @@ export const Avatar = ({
   src,
   placeholder,
   decoding = 'async',
+  disabled = false,
   ...props
 }: Props) => {
   const ref = React.useRef<HTMLImageElement>(null)
@@ -138,9 +151,16 @@ export const Avatar = ({
 
   return (
     <Container $noBorder={!showImage || noBorder} $shape={shape}>
-      {!showImage && <Placeholder $url={placeholder} aria-label={label} />}
+      {!showImage && (
+        <Placeholder
+          $disabled={disabled}
+          $url={placeholder}
+          aria-label={label}
+        />
+      )}
       <Img
         {...props}
+        $disabled={disabled}
         $shown={showImage}
         alt={label}
         decoding={decoding}

diff --git a/components/src/components/molecules/PageButtons/PageButtons.tsx b/components/src/components/molecules/PageButtons/PageButtons.tsx
@@ -5,17 +5,25 @@ import { getTestId } from '../../../utils/utils'
 
 type NativeDivProps = React.HTMLAttributes<HTMLDivElement>
 
+type Size = 'small' | 'medium'
+
 type Props = {
   /** Total number of pages */
   total: number
   current: number
   /** Maximum number of buttons to show */
   max?: number
+  size?: Size
   alwaysShowFirst?: boolean
   alwaysShowLast?: boolean
+  showEllipsis?: boolean
   onChange: (value: number) => void
 } & Omit<NativeDivProps, 'children' | 'onChange'>
 
+enum Marker {
+  ellipsis = -1,
+}
+
 const Container = styled.div(
   ({ theme }) => css`
     display: flex;
@@ -27,8 +35,8 @@ const Container = styled.div(
   `,
 )
 
-const PageButton = styled.button<{ $selected?: boolean }>(
-  ({ theme, $selected }) => css`
+const PageButton = styled.button<{ $selected?: boolean; $size: Size }>(
+  ({ theme, $selected, $size }) => css`
     background-color: transparent;
     transition: all 0.15s ease-in-out;
     cursor: pointer;
@@ -37,21 +45,26 @@ const PageButton = styled.button<{ $selected?: boolean }>(
           background-color: ${theme.colors.background};
           cursor: default;
           pointer-events: none;
+          color: ${theme.colors.accent};
         `
       : css`
+          color: ${theme.colors.text};
           &:hover {
             background-color: ${theme.colors.foregroundSecondary};
           }
         `}
 
-    border-radius: ${theme.radii['extraLarge']};
+    border-radius: ${$size === 'small'
+      ? theme.space['2']
+      : theme.radii['extraLarge']};
     border: 1px solid ${theme.colors.borderSecondary};
-    min-width: ${theme.space['10']};
+    min-width: ${$size === 'small' ? theme.space['9'] : theme.space['10']};
     padding: ${theme.space['2']};
-    height: ${theme.space['10']};
-    font-size: ${theme.fontSizes['small']};
+    height: ${$size === 'small' ? theme.space['9'] : theme.space['10']};
+    font-size: ${$size === 'small'
+      ? theme.space['3.5']
+      : theme.fontSizes['small']};
     font-weight: ${theme.fontWeights['medium']};
-    color: ${theme.colors.text};
   `,
 )
 
@@ -67,8 +80,10 @@ export const PageButtons = ({
   total,
   current,
   max = 5,
+  size = 'medium',
   alwaysShowFirst,
   alwaysShowLast,
+  showEllipsis = true,
   onChange,
   ...props
 }: Props) => {
@@ -77,38 +92,48 @@ export const PageButtons = ({
     Math.min(Math.max(current - maxPerSide, 1), total - max + 1),
     1,
   )
-  const array = Array.from({ length: max }, (_, i) => start + i).filter(
+  const pageNumbers = Array.from({ length: max }, (_, i) => start + i).filter(
     (x) => x <= total,
   )
 
   if (total > max) {
     if (alwaysShowFirst && start > 1) {
-      array[0] = -1
-      array.unshift(1)
-    } else if (start > 1) {
-      array.unshift(-1)
+      if (showEllipsis) {
+        pageNumbers[0] = Marker.ellipsis
+        pageNumbers.unshift(1)
+      } else {
+        pageNumbers[0] = 1
+      }
+    } else if (showEllipsis && start > 1) {
+      pageNumbers.unshift(Marker.ellipsis)
     }
 
     if (alwaysShowLast && total > current + maxPerSide) {
-      array[array.length - 1] = -1 * total
-      array.push(total)
-    } else if (total > current + maxPerSide) {
-      array.push(-1 * total)
+      if (showEllipsis) {
+        pageNumbers[pageNumbers.length - 1] = Marker.ellipsis
+        pageNumbers.push(total)
+      } else {
+        pageNumbers[pageNumbers.length - 1] = total
+      }
+    } else if (showEllipsis && total > current + maxPerSide) {
+      pageNumbers.push(Marker.ellipsis)
     }
   }
 
   return (
     <Container
       {...{ ...props, 'data-testid': getTestId(props, 'pagebuttons') }}
     >
-      {array.map((value) =>
-        0 > value ? (
-          <Dots data-testid="pagebutton-dots" key={value}>
+      {pageNumbers.map((value, i) =>
+        value === Marker.ellipsis ? (
+          // eslint-disable-next-line react/no-array-index-key
+          <Dots data-testid="pagebutton-dots" key={`${value}-${i}`}>
             ...
           </Dots>
         ) : (
           <PageButton
             $selected={value === current}
+            $size={size}
             data-testid="pagebutton"
             key={value}
             type="button"

diff --git a/components/src/components/molecules/Select/Select.test.tsx b/components/src/components/molecules/Select/Select.test.tsx
@@ -41,8 +41,8 @@ describe('<Select />', () => {
       </ThemeProvider>,
     )
     userEvent.click(screen.getByTestId('select-container'))
-    userEvent.click(screen.getByText('One'))
-    expect(screen.getByTestId('selected').innerHTML).toEqual('One')
+    userEvent.click(screen.getByTestId('select-option-1'))
+    expect(screen.getByTestId('selected').innerHTML).toContain('One')
   })
 
   it('should call onChange when selection made', async () => {
@@ -64,7 +64,7 @@ describe('<Select />', () => {
       </ThemeProvider>,
     )
     userEvent.click(screen.getByTestId('select-container'))
-    userEvent.click(screen.getByText('One'))
+    userEvent.click(screen.getByTestId('select-option-1'))
     await waitFor(() => {
       expect(mockCallback).toHaveReturnedWith(['1', '1'])
     })
@@ -100,7 +100,7 @@ describe('<Select />', () => {
     )
 
     await waitFor(() => {
-      expect(screen.getByTestId('selected').innerHTML).toEqual('One')
+      expect(screen.getByTestId('selected').innerHTML).toContain('One')
     })
   })
 
@@ -214,7 +214,7 @@ describe('<Select />', () => {
     userEvent.type(input, '{arrowdown}')
     userEvent.type(input, '{arrowdown}')
     userEvent.type(input, '{enter}')
-    expect(screen.getByTestId('selected').innerHTML).toEqual('One')
+    expect(screen.getByTestId('selected').innerHTML).toContain('One')
   })
 
   /** Createable */
@@ -323,7 +323,9 @@ describe('<Select />', () => {
     userEvent.type(screen.getByTestId('select-input'), 'onsies')
     expect(screen.getByTestId('select-input')).toHaveValue('onsies')
 
-    const create = await screen.findByText('Add "onsies"')
+    const create = await screen.findByTestId(
+      'select-option-CREATE_OPTION_VALUE',
+    )
     userEvent.click(create)
 
     await waitFor(() => {