mirror of
https://github.com/aleleba/react-list-ui-library.git
synced 2025-07-04 23:58:10 -06:00
PR-722301: Adding Library Components.
This commit is contained in:
19
src/components/Input/Input.stories.tsx
Normal file
19
src/components/Input/Input.stories.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import { Input } from '@components';
|
||||
|
||||
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
|
||||
export default {
|
||||
title: 'List Design System/Input',
|
||||
component: Input,
|
||||
} as Meta<typeof Input>;
|
||||
|
||||
// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
|
||||
const Template: StoryFn<typeof Input> = (args) => <Input {...args} />;
|
||||
|
||||
export const Basic = Template.bind({});
|
||||
// More on args: https://storybook.js.org/docs/react/writing-stories/args
|
||||
Basic.args = {
|
||||
placeholder: 'Basic Input',
|
||||
onChange: (e) => { console.log(e.target.value) }
|
||||
};
|
22
src/components/Input/index.tsx
Normal file
22
src/components/Input/index.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import React, { FC, ChangeEventHandler } from 'react';
|
||||
import './style.scss';
|
||||
|
||||
export type TInputProps = {
|
||||
/**
|
||||
* Is this the text you want to add to the input placeholder
|
||||
*/
|
||||
placeholder?: string
|
||||
/**
|
||||
* Is this the onChange event of the input
|
||||
*/
|
||||
onChange?: ChangeEventHandler<HTMLInputElement>
|
||||
};
|
||||
|
||||
export const Input:FC<TInputProps> = ({
|
||||
placeholder = '',
|
||||
onChange = (e) => {}
|
||||
}) => {
|
||||
return(
|
||||
<input className='input' placeholder={placeholder} type='text' onChange={onChange} />
|
||||
)
|
||||
}
|
11
src/components/Input/style.scss
Normal file
11
src/components/Input/style.scss
Normal file
@ -0,0 +1,11 @@
|
||||
.input{
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 50px;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
&:focus{
|
||||
border: 1px solid #000;
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user