66583bb4fb
adds filtering by task status (completion date, incomplete, completion) adds filtering by task metadata (task name, labels, members, due date) adds sorting by task name, labels, members, and due date
44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
import React from 'react';
|
|
import BaseStyles from 'App/BaseStyles';
|
|
import NormalizeStyles from 'App/NormalizeStyles';
|
|
import theme from 'App/ThemeStyles';
|
|
import styled, { ThemeProvider } from 'styled-components';
|
|
import { User } from 'shared/icons';
|
|
|
|
import Input from '.';
|
|
|
|
export default {
|
|
component: Input,
|
|
title: 'Input',
|
|
parameters: {
|
|
backgrounds: [
|
|
{ name: 'white', value: '#ffffff', default: true },
|
|
{ name: 'gray', value: '#f8f8f8' },
|
|
],
|
|
},
|
|
};
|
|
|
|
const Wrapper = styled.div`
|
|
background: rgba(${props => props.theme.colors.bg.primary});
|
|
padding: 45px;
|
|
margin: 25px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
`;
|
|
|
|
export const Default = () => {
|
|
return (
|
|
<>
|
|
<NormalizeStyles />
|
|
<BaseStyles />
|
|
<ThemeProvider theme={theme}>
|
|
<Wrapper>
|
|
<Input label="Label placeholder" />
|
|
<Input width="100%" placeholder="Placeholder" />
|
|
<Input icon={<User width={20} height={20} />} width="100%" placeholder="Placeholder" />
|
|
</Wrapper>
|
|
</ThemeProvider>
|
|
</>
|
|
);
|
|
};
|