diff options
Diffstat (limited to 'packages/components/src/components/FormInput')
4 files changed, 118 insertions, 0 deletions
diff --git a/packages/components/src/components/FormInput/FormInput.scss b/packages/components/src/components/FormInput/FormInput.scss new file mode 100644 index 000000000..2554cbd01 --- /dev/null +++ b/packages/components/src/components/FormInput/FormInput.scss @@ -0,0 +1,69 @@ +@use '../../global/globalCssVariables.scss' as global; + +.formInput-container { + display: flex; + flex-direction: column; + width: 100%; + height: fit-content; + position: relative; + margin-top: 20px; + + .formInput { + font-family: inherit; + width: 100%; + border: 0; + border-bottom: 2px solid black; + outline: 0; + font-size: 1rem; + color: black; + padding: 7px 0; + background: transparent; + transition: border-color 0.2s; + + &::placeholder { + color: transparent; + } + + &:focus { + ~ .formInput-label { + position: absolute; + transform: translate(0px, -13px); + display: block; + transition: 0.2s; + font-size: 1rem; + font-weight: 700; + } + padding-bottom: 6px; + font-weight: 700; + border-width: 3px; + border-image: linear-gradient(to right, black, white); + border-image-slice: 1; + } + + &:valid { + ~ .formInput-label { + position: absolute; + transform: translate(0px, -13px); + display: block; + transition: 0.2s; + font-size: 1rem; + } + } + + &:required, + &:invalid { + box-shadow: none; + } + } + + .formInput-label { + position: absolute; + top: 0; + transform: translate(0px, 8px); + display: block; + transition: 0.2s; + font-size: 1rem; + color: gray; + pointer-events: none; + } +} diff --git a/packages/components/src/components/FormInput/FormInput.stories.tsx b/packages/components/src/components/FormInput/FormInput.stories.tsx new file mode 100644 index 000000000..482a4f9b1 --- /dev/null +++ b/packages/components/src/components/FormInput/FormInput.stories.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { Story, Meta } from '@storybook/react'; +import { Colors, Size } from '../../global/globalEnums'; +import * as fa from 'react-icons/fa' +import { IListBoxItemProps } from '../ListItem'; +import { FormInput, IFormInputProps } from './FormInput'; +import { IconButton } from '../IconButton'; + +export default { + title: 'Dash/Form Input', + component: FormInput, + argTypes: {}, +} as Meta<typeof FormInput>; + +const Template: Story<IFormInputProps> = (args) => <FormInput {...args}/>; + +// export const Primary = Template.bind({}); +// Primary.args = { +// title: 'Hello World!', +// initialIsOpen: true, +// };
\ No newline at end of file diff --git a/packages/components/src/components/FormInput/FormInput.tsx b/packages/components/src/components/FormInput/FormInput.tsx new file mode 100644 index 000000000..48fac3489 --- /dev/null +++ b/packages/components/src/components/FormInput/FormInput.tsx @@ -0,0 +1,27 @@ +import React from 'react' +import './FormInput.scss' + +export interface IFormInputProps { + placeholder?: string + value?: string + title?: string + type?: string + onChange: (event: React.ChangeEvent<HTMLInputElement>) => void +} + +export const FormInput = (props: IFormInputProps) => { + const { placeholder, type, value, title, onChange } = props + return ( + <div className="formInput-container"> + <input + className={'formInput'} + type={type ? type : 'text'} + value={value} + onChange={onChange} + placeholder={title} + required={true} + /> + <label className={'formInput-label'}>{title}</label> + </div> + ) +} diff --git a/packages/components/src/components/FormInput/index.ts b/packages/components/src/components/FormInput/index.ts new file mode 100644 index 000000000..1d23aa44c --- /dev/null +++ b/packages/components/src/components/FormInput/index.ts @@ -0,0 +1 @@ +export * from './FormInput' |