Extend input with file type & update icons

awell-health · Nov 5, 2024 · e654c31 · e654c31
1 parent fb3e878
commit e654c31
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@awell-health/design-system",
-  "version": "0.11.5",
+  "version": "0.11.6",
   "type": "module",
   "files": [
     "dist"

diff --git a/src/components/ui/icon/types.ts b/src/components/ui/icon/types.ts
@@ -95,6 +95,10 @@ import {
   RiSparklingLine,
   RiGlobeLine,
   RiGlobalLine,
+  RiUploadLine,
+  RiDownloadLine,
+  RiToolsLine,
+  RiFileLine
 } from '@remixicon/react';
 
 export const ICONS = {
@@ -194,6 +198,10 @@ export const ICONS = {
   RiSparklingLine,
   RiGlobeLine,
   RiGlobalLine,
+  RiUploadLine,
+  RiDownloadLine,
+  RiToolsLine,
+  RiFileLine
 };
 
 export enum IconSize {

diff --git a/src/components/ui/input/input.tsx b/src/components/ui/input/input.tsx
@@ -12,7 +12,21 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, label, helpText, suffixIcon, prefixIcon, hasError, onChange, ...props }, ref) => {
+  // eslint-disable-next-line react/prop-types
+  (
+    {
+      className,
+      label,
+      helpText,
+      suffixIcon,
+      prefixIcon,
+      hasError,
+      onChange,
+      type = 'text',
+      ...props
+    },
+    ref
+  ) => {
     const renderIcon = (icon: JSX.Element, position: 'left' | 'right') => {
       return (
         <span
@@ -40,16 +54,18 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         <label className='form-control w-full flex relative'>
           {prefixIcon && renderIcon(prefixIcon, 'left')}
           <input
-            type='text'
+            type={type}
             className={cn(
-              'px-3.5 py-2.5 h-[38px] min-h-[38px] rounded-lg gap-2 w-full border-box',
+              type !== 'file' && 'px-3.5 py-2.5',
+              'h-[38px] min-h-[38px] rounded-lg gap-2 w-full border-box',
               'text-sm font-normal',
               'shadow border border-slate-300 text-black placeholder:text-slate-400',
               'focus:outline-0 focus:border focus:border-blue-500',
               'disabled:bg-slate-50 disabled:text-slate-300',
               prefixIcon && 'pl-8',
               suffixIcon && 'pr-8',
               hasError && 'border-red-500 focus:border-red-500',
+              type === 'file' && 'file-input file-input-bordered file-input-primary',
               className
             )}
             onChange={onChange}

diff --git a/style.css b/style.css
@@ -1191,6 +1191,60 @@ html {
   display: none;
 }
 
+.file-input {
+  height: 3rem;
+  flex-shrink: 1;
+  padding-inline-end: 1rem;
+  font-size: 1rem;
+  line-height: 2;
+  line-height: 1.5rem;
+  overflow: hidden;
+  border-radius: var(--rounded-btn, 0.5rem);
+  border-width: 1px;
+  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
+  --tw-border-opacity: 0;
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
+}
+
+.file-input::file-selector-button {
+  margin-inline-end: 1rem;
+  display: inline-flex;
+  height: 100%;
+  flex-shrink: 0;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  text-align: center;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  line-height: 1em;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  transition-duration: 200ms;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-n,oklch(var(--n)/var(--tw-border-opacity)));
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
+  font-weight: 600;
+  text-transform: uppercase;
+  --tw-text-opacity: 1;
+  color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
+  text-decoration-line: none;
+  border-width: var(--border-btn, 1px);
+  animation: button-pop var(--animation-btn, 0.25s) ease-out;
+}
+
 .form-control {
   display: flex;
   flex-direction: column;
@@ -2032,6 +2086,64 @@ input.tab:checked + .tab-content,
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.file-input-bordered {
+  --tw-border-opacity: 0.2;
+}
+
+.file-input:focus {
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 2px;
+  outline-color: var(--fallback-bc,oklch(var(--bc)/0.2));
+}
+
+.file-input-primary {
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
+}
+
+.file-input-primary:focus {
+  outline-color: var(--fallback-p,oklch(var(--p)/1));
+}
+
+.file-input-primary::file-selector-button {
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
+}
+
+.file-input-disabled,
+  .file-input[disabled] {
+  cursor: not-allowed;
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 0.2;
+}
+
+.file-input-disabled::-moz-placeholder, .file-input[disabled]::-moz-placeholder {
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
+  --tw-placeholder-opacity: 0.2;
+}
+
+.file-input-disabled::placeholder,
+  .file-input[disabled]::placeholder {
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
+  --tw-placeholder-opacity: 0.2;
+}
+
+.file-input-disabled::file-selector-button, .file-input[disabled]::file-selector-button {
+  --tw-border-opacity: 0;
+  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
+  --tw-bg-opacity: 0.2;
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
+  --tw-text-opacity: 0.2;
+}
+
 .label-text {
   font-size: 0.875rem;
   line-height: 1.25rem;