PR-722301: Adding Library Components.

This commit is contained in:
2023-10-11 23:15:46 +00:00
parent 2410a0f8d0
commit b100dc40c3
34 changed files with 885 additions and 108 deletions

View 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) }
};

View 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} />
)
}

View 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;
}
}