develop #1
develop #1
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| } | ||
|
|
||
| // https://itnext.io/react-polymorphic-components-with-typescript-f7ce72ea7af2 | ||
| const VisuallyHidden = <T extends React.ElementType = 'div'>({ as, ...props }: VisuallyHiddenProps<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof VisuallyHiddenProps<T>>) => { |
There was a problem hiding this comment.
Accessibility component for visually hiding elements and ensuring they're still available within the accessibility tree.
Polymorphic component to allow for consumers of the component to specify the HTML Element to render whilst retaining TS support for that element's props/attributes.
Example usage:
<VisuallyHidden as="label" htmlFor="some-id">Example</VisuallyHidden>This allows us to visually hide elements where a div is not permitted, for example a child element of a Paragraph element, whilst also helping to keep the DOM tree minimal.
| @@ -0,0 +1,36 @@ | |||
| import { useState } from 'react'; | |||
|
|
|||
| const useLocalStorage = <T>(key: string, initialValue: T) => { | |||
There was a problem hiding this comment.
Designed to be used in the same was as React.useState.
| const defaultState: GlobalState = { | ||
| columns: [ | ||
| { | ||
| id: 'todo', | ||
| title: 'To Do', | ||
| }, | ||
| { | ||
| id: 'in-progress', | ||
| title: 'In Progress', | ||
| }, | ||
| { | ||
| id: 'done', | ||
| title: 'Done', | ||
| }, | ||
| ], | ||
| cards: [ | ||
| { | ||
| id: 'card-0', | ||
| columnId: 'done', | ||
| title: 'Make breakfast', | ||
| description: `In order to make breakfast you'll need the following ingredients:\n\n* Eggs\n* Sausages\n* Beans\n* Hash browns\n* Toast`, | ||
| }, | ||
| { | ||
| id: 'card-1', | ||
| columnId: 'todo', | ||
| title: 'Check mail', | ||
| }, | ||
| { | ||
| id: 'card-2', | ||
| columnId: 'todo', | ||
| title: 'Get to work', | ||
| }, | ||
| ], | ||
| }; |
There was a problem hiding this comment.
Given that it's easy to clear the board, I figured it was nice to show the user a default example usage.
| let column; | ||
|
|
||
| column = await screen.findByText('To Do'); | ||
| expect(column).toBeInTheDocument(); | ||
|
|
||
| column = await screen.findByText('In Progress'); | ||
| expect(column).toBeInTheDocument(); | ||
|
|
||
| column = await screen.findByText('Done'); | ||
| expect(column).toBeInTheDocument(); |
There was a problem hiding this comment.
Initially I wrote this as:
const headers = ['To Do', 'In Progress', 'Done'];
await Promise.all(headers.map(async (text) => {
const column = await screen.findByText(text);
expect(column).toBeInTheDocument();
}));however, apart from being more difficult to read, a test failure would only report that the const column = await screen.findByText(text); line failed, and not which of the scenarios was to blame.
| <Column {...column}> | ||
| {cards.map(card => ( | ||
| <Card | ||
| key={card.id} | ||
| {...card} | ||
| /> | ||
| ))} | ||
| </Column> |
There was a problem hiding this comment.
Component composition better than passing cards to Column
No description provided.