Merge branch 'main' of https://github.com/bootwindui/bootwind-react

bootwindui · Nov 15, 2023 · 00489a5 · 00489a5
2 parents b84c99f + be3a97d
commit 00489a5
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 4 deletions.
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx
@@ -55,13 +55,29 @@ const Input: React.FC<InputProps> = ({
                         disabled:bg-neutral-100
                         disabled:cursor-not-allowed
                         ${classes.input}
+                        ${leftSection ? 'pl-14' : ''}
+                        ${rightSection ? 'pr-14' : ''}
                         `
   return (
     <div className="input-group mb-3">
-      <div className='bootwind-label mb-2'>
-        <label className='text-neutral-600 leading-tight font-medium' htmlFor={id}>{label}</label>
+      { label && (
+        <div className='bootwind-label mb-2'>
+          <label className='text-neutral-600 leading-tight font-medium' htmlFor={id}>{label}</label>
+        </div>
+      )}
+      <div className={`input-area relative inline-block ${leftSection ? 'has-left-section' : ''} ${rightSection  ? 'has-right-section' : ''}`}>
+        {leftSection && (
+          <label htmlFor={id} className="input-left-section absolute items-center left-0 top-0 flex justify-center h-full w-14">
+            { leftSection }
+          </label>
+        )}
+        <input type={type} placeholder={placeholder} id={id} name={name} className={inputClasses} disabled={disabled}/>
+        {rightSection && (
+          <label htmlFor={id} className="input-right-section absolute items-center right-0 top-0 flex justify-center h-full w-14">
+            { rightSection }
+          </label>
+        )}
       </div>
-      <input type={type} placeholder={placeholder} name={name} className={inputClasses} disabled={disabled}/>
       <span className={`${classes.description} flex gap-2 items-center text-sm mt-2`}>{description}</span>
     </div>
   );

diff --git a/packages/forms/stories/Input.stories.tsx b/packages/forms/stories/Input.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Meta } from '@storybook/react';
 import Toggle, { ToggleProps } from '../src/toggle';
 
-import { HiOutlineQuestionMarkCircle } from 'react-icons/hi2';
+import { HiOutlineQuestionMarkCircle, HiOutlineCreditCard } from 'react-icons/hi2';
 import Text from '../../typography/src/text';
 import Input from '../src/input';
 
@@ -38,6 +38,34 @@ export const LabelAndHelperText = (args: ToggleProps) => (
     </div>
     </>
 )
+const masterCardImage = (
+  <div className="p-1 border rounded-md">
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12" fill="none">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M9.65265 10.0245C8.64273 10.8562 7.33269 11.3583 5.90117 11.3583C2.70702 11.3583 0.117645 8.85857 0.117645 5.77498C0.117645 2.69139 2.70702 0.19165 5.90117 0.19165C7.33269 0.19165 8.64273 0.693732 9.65265 1.52544C10.6626 0.693732 11.9726 0.19165 13.4041 0.19165C16.5983 0.19165 19.1877 2.69139 19.1877 5.77498C19.1877 8.85857 16.5983 11.3583 13.4041 11.3583C11.9726 11.3583 10.6626 10.8562 9.65265 10.0245Z" fill="#ED0006"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M9.65265 10.0245C10.8962 9.00045 11.6847 7.47661 11.6847 5.77498C11.6847 4.07335 10.8962 2.54952 9.65265 1.52543C10.6626 0.693731 11.9726 0.19165 13.4041 0.19165C16.5983 0.19165 19.1877 2.69139 19.1877 5.77498C19.1877 8.85857 16.5983 11.3583 13.4041 11.3583C11.9726 11.3583 10.6626 10.8562 9.65265 10.0245Z" fill="#F9A000"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M9.65266 10.0245C10.8962 9.00043 11.6847 7.4766 11.6847 5.77498C11.6847 4.07336 10.8962 2.54954 9.65266 1.52545C8.40914 2.54954 7.62064 4.07336 7.62064 5.77498C7.62064 7.4766 8.40914 9.00043 9.65266 10.0245Z" fill="#FF5E00"/>
+    </svg>
+  </div>
+)
+export const LeftRightSections = (args: ToggleProps) => (
+    <>
+    <div className="mb-10">
+        <Input placeholder='1234 1234 1234 1234' 
+          label='Card Number'
+          leftSection={masterCardImage}
+        />
+    </div>
+    <div className="mb-10">
+        <Input placeholder='1234 1234 1234 1234' 
+          label='Card Number'
+          leftSection={masterCardImage}
+          rightSection={<>
+            <HiOutlineCreditCard></HiOutlineCreditCard>
+          </>}
+        />
+    </div>
+    </>
+)
 export const Variants = (args: ToggleProps) => (
     <>
     <div className="mb-10">