Merge pull request #32 from plezanje-net/fix-button

Fix button
plezanje-net · Feb 11, 2024 · e05a749 · e05a749
2 parents 22e7f04 + ce7018f
commit e05a749
Show file tree

Hide file tree

Showing 21 changed files with 442 additions and 394 deletions.
diff --git a/src/app/[lang]/crag/[cragSlug]/comments/components/add-comment-form.tsx b/src/app/[lang]/crag/[cragSlug]/comments/components/add-comment-form.tsx
@@ -74,10 +74,11 @@ function AddCommentForm({ cragId, currentUser }: Props) {
               <Radio value={CommentType.WARNING}>opozorilo</Radio>
             </RadioGroup>
           </div>
-          <Button
-            className="ml-auto mt-4"
-            isDisabled={!commentContent}
-          >{`Objavi ${buttonLabel[commentType]}`}</Button>
+          <div className="ml-auto mt-4 w-fit">
+            <Button
+              disabled={!commentContent}
+            >{`Objavi ${buttonLabel[commentType]}`}</Button>
+          </div>
         </div>
       </form>
     </div>

diff --git a/src/app/[lang]/crag/[cragSlug]/components/crag-routes.tsx b/src/app/[lang]/crag/[cragSlug]/components/crag-routes.tsx
@@ -53,7 +53,7 @@ interface CragRoutesState {
   noSectors: boolean;
   search?: SearchOptions;
   filter?: FilterOptions;
-  sort?: SortOptions;
+  sort: SortOptions;
 }
 
 interface CragRouteListColumn {
@@ -79,6 +79,7 @@ const CragRoutesContext = createContext<CragRoutesContextType>({
     combine: false,
     selectedColumns: [],
     noSectors: false,
+    sort: { column: "select", direction: "asc" },
   },
   setCragRoutesState: () => {},
 });
@@ -201,6 +202,7 @@ function CragRoutes({ crag, mySummary }: Props) {
     selectedColumns: cragRouteListColumns
       .filter(({ isDefault }) => isDefault)
       .map(({ name }) => name),
+    sort: { column: "select", direction: "asc" },
 
     noSectors: crag.sectors.length === 1,
     // TODO: above condition should be adjusted, because we have 2 different use cases:

diff --git a/.../[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/route-grade.tsx b/.../[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/route-grade.tsx
@@ -32,7 +32,7 @@ function RouteGrade({ route, crag }: RouteGradeProps) {
   ) : (
     <Dialog
       openTrigger={
-        <Button renderStyle="icon" ref={ref}>
+        <Button variant="quaternary" ref={ref}>
           <>{route.difficulty && <Grade difficulty={route.difficulty} />}</>
         </Button>
       }

diff --git a/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-routes-actions.tsx b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-routes-actions.tsx
@@ -17,34 +17,35 @@ function CragRoutesActions() {
           : "flex justify-center"
       }`}
     >
-      <div className="flex justify-center py-6">
+      <div className="flex items-center justify-center py-5">
         <div>
           <Filter />
         </div>
-
-        <div className="ml-4 border-l border-neutral-300 pl-4">
-          <Columns />
-        </div>
-
+        <div className="ml-3 h-6 border-l border-neutral-300 pr-3"></div>
+        <Columns />
         {!cragRoutesState.noSectors && (
-          <div className="ml-4 border-l border-neutral-300 pl-4">
+          <>
+            <div className="ml-3 h-6 border-l border-neutral-300 pr-3"></div>
             <CombineSectors />
-          </div>
+          </>
         )}
-
-        <div className="ml-4 border-l border-neutral-300 pl-4">
-          <Sort />
-        </div>
+        <div className="ml-3 h-6 border-l border-neutral-300 pr-3"></div>
+        <Sort />
       </div>
 
       <div
-        className={`min-w-0 xs:ml-8 xs:w-80 xs:border-none ${
+        className={`flex min-w-0 items-center xs:ml-8 xs:w-80 ${
           !cragRoutesState.search?.focus && !cragRoutesState.search?.query
-            ? "ml-4 border-l border-neutral-300 pl-4"
+            ? ""
             : "mb-6 xs:mb-0"
         }`}
       >
-        <Search />
+        {!cragRoutesState.search?.focus && !cragRoutesState.search?.query && (
+          <div className="ml-3 h-6 border-l border-neutral-300 pr-3 xs:hidden"></div>
+        )}
+        <div className="flex-1">
+          <Search />
+        </div>
       </div>
     </div>
   );

diff --git a/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-routes-actions/columns.tsx b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-routes-actions/columns.tsx
@@ -14,10 +14,10 @@ function Columns() {
   return (
     <Select
       multi
-      defaultValue={cragRoutesState.selectedColumns}
+      value={cragRoutesState.selectedColumns}
       onChange={handleSelectedColumnsChange}
       customTrigger={
-        <Button renderStyle="icon">
+        <Button variant="quaternary">
           <span className="flex">
             <IconColumns />
             <span className="ml-2 max-lg:hidden">Izberi stolpce</span>
@@ -28,7 +28,7 @@ function Columns() {
       {cragRouteListColumns
         .filter(({ isOptional }) => isOptional)
         .map((column) => (
-          <Option key={column.name} id={column.name} value={column.name}>
+          <Option key={column.name} value={column.name}>
             {column.label}
           </Option>
         ))}

diff --git a/...app/[lang]/crag/[cragSlug]/components/crag-routes/crag-routes-actions/combine-sectors.tsx b/...app/[lang]/crag/[cragSlug]/components/crag-routes/crag-routes-actions/combine-sectors.tsx
@@ -19,9 +19,9 @@ function CombineSectors() {
 
   return (
     <Button
-      renderStyle="icon"
+      variant="quaternary"
       onClick={disabled ? () => {} : handleToggleCombine}
-      isDisabled={disabled}
+      disabled={disabled}
     >
       <span className="flex">
         {cragRoutesState.combine || cragRoutesState.search?.query ? (

diff --git a/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-routes-actions/filter.tsx b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-routes-actions/filter.tsx
@@ -114,7 +114,7 @@ function Filter() {
   return (
     <Dialog
       openTrigger={
-        <Button renderStyle="icon">
+        <Button variant="quaternary">
           <span className="flex">
             <IconFilter />
             <span>

diff --git a/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-routes-actions/search.tsx b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-routes-actions/search.tsx
@@ -59,23 +59,24 @@ function Search() {
 
   return (
     <>
-      <Button
-        className={`${
+      <div
+        className={
           cragRoutesState.search?.focus || cragRoutesState.search?.query
             ? "hidden"
             : "xs:hidden"
-        }`}
-        renderStyle="icon"
-        onClick={handleSearchIconClick}
+        }
       >
-        <IconSearch />
-      </Button>
+        <Button variant="quaternary" onClick={handleSearchIconClick}>
+          <IconSearch />
+        </Button>
+      </div>
+
       <div
-        className={`${
+        className={
           cragRoutesState.search?.focus || cragRoutesState.search?.query
             ? "block"
             : "hidden xs:block"
-        }`}
+        }
       >
         <TextField
           ref={searchFieldRef}
@@ -86,11 +87,9 @@ function Search() {
           value={cragRoutesState.search?.query || ""}
           suffix={
             cragRoutesState.search?.query && (
-              <span className="flex">
-                <Button renderStyle="icon" onClick={handleClearIconClick}>
-                  <IconClose />
-                </Button>
-              </span>
+              <Button variant="quaternary" onClick={handleClearIconClick}>
+                <IconClose />
+              </Button>
             )
           }
           onBlur={handleSearchFieldBlur}

diff --git a/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-routes-actions/sort.tsx b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-routes-actions/sort.tsx
@@ -20,9 +20,10 @@ function Sort() {
 
   return (
     <Select
+      value={`${cragRoutesState.sort.column},${cragRoutesState.sort.direction}`}
       onChange={handleSortChange}
       customTrigger={
-        <Button renderStyle="icon">
+        <Button variant="quaternary">
           <span className="flex">
             <IconSort />
             <span className="ml-2 max-lg:hidden">Uredi</span>
@@ -37,20 +38,12 @@ function Sort() {
             !column.excludeFromSort
         )
         .flatMap((column) => [
-          <Option
-            key={`${column.name},asc`}
-            id={`${column.name},asc`}
-            value={`${column.name},asc`}
-          >
+          <Option key={`${column.name},asc`} value={`${column.name},asc`}>
             {`${column.sortLabel}${column.sortLabel ? ", " : ""}${
               column.sortAscLabel
             }`}
           </Option>,
-          <Option
-            key={`${column.name},desc`}
-            id={`${column.name},desc`}
-            value={`${column.name},desc`}
-          >
+          <Option key={`${column.name},desc`} value={`${column.name},desc`}>
             {`${column.sortLabel}${column.sortLabel ? ", " : ""}${
               column.sortDescLabel
             }`}

diff --git a/src/app/sandbox/auth/_components/login-form.tsx b/src/app/sandbox/auth/_components/login-form.tsx
@@ -58,7 +58,7 @@ function LoginForm() {
         />
       </div>
       <div className="pt-2">
-        <Button isDisabled={loggingIn}>Login</Button>
+        <Button disabled={loggingIn}>Login</Button>
       </div>
       {error && <div className="pt-2 text-red-500">{error}</div>}
     </form>

diff --git a/src/app/sandbox/button/page.tsx b/src/app/sandbox/button/page.tsx
@@ -1,18 +1,28 @@
 "use client";
+import IconColumns from "@/components/ui/icons/columns";
 import Button from "../../../components/ui/button";
 
 function ButtonPage() {
   return (
     <div className="m-8">
-      <h3>Button good demo</h3>
+      <h3>Button demo</h3>
 
       <div className="mt-14 w-80">
-        <h5>Default (primary) button</h5>
+        <h5>Primary button</h5>
         <div className="mt-4">
           <Button variant="primary">Button</Button>
         </div>
       </div>
 
+      <div className="mt-14 w-80">
+        <h5>Primary button disabled</h5>
+        <div className="mt-4">
+          <Button variant="primary" disabled>
+            Button
+          </Button>
+        </div>
+      </div>
+
       <div className="mt-14 w-80">
         <h5>Secondary button</h5>
         <div className="mt-4">
@@ -21,30 +31,99 @@ function ButtonPage() {
       </div>
 
       <div className="mt-14 w-80">
-        <h5>A disabled primary button</h5>
+        <h5>Secondary button disabled</h5>
         <div className="mt-4">
-          <Button variant="primary" isDisabled>
+          <Button variant="secondary" disabled>
             Button
           </Button>
         </div>
       </div>
 
       <div className="mt-14 w-80">
-        <h5>A disabled secondary button</h5>
+        <h5>Tertiary button (text only)</h5>
         <div className="mt-4">
-          <Button variant="secondary" isDisabled>
-            Button
+          <Button variant="tertiary">Button</Button>
+        </div>
+      </div>
+
+      <div className="mt-14 w-80">
+        <h5>Tertiary button (icon only)</h5>
+        <div className="mt-4">
+          <Button variant="tertiary">
+            <IconColumns />
           </Button>
         </div>
       </div>
 
-      <div className="mt-16">
-        <h3 className="text-lg">Notes</h3>
-        <div className="pl-4">
-          <ul className="mt-2 list-outside list-disc">
-            <li>A button with icon should be implemented.</li>
-            <li>A loading state should be designed and implemented.</li>
-          </ul>
+      <div className="mt-14 w-80">
+        <h5>Tertiary button (icon and text)</h5>
+        <div className="mt-4">
+          <Button variant="tertiary">
+            <span className="flex">
+              <IconColumns />
+              <span>
+                <span className="ml-2">Button</span>
+              </span>
+            </span>
+          </Button>
+        </div>
+      </div>
+
+      <div className="mt-14 w-80">
+        <h5>Tertiary button disabled</h5>
+        <div className="mt-4">
+          <Button variant="tertiary" disabled>
+            <span className="flex">
+              <IconColumns />
+              <span>
+                <span className="ml-2">Button</span>
+              </span>
+            </span>
+          </Button>
+        </div>
+      </div>
+
+      <div className="mt-14 w-80">
+        <h5>Quaternary button (text only)</h5>
+        <div className="mt-4">
+          <Button variant="quaternary">Button</Button>
+        </div>
+      </div>
+
+      <div className="mt-14 w-80">
+        <h5>Quaternary button (icon only)</h5>
+        <div className="mt-4">
+          <Button variant="quaternary">
+            <IconColumns />
+          </Button>
+        </div>
+      </div>
+
+      <div className="mt-14 w-80">
+        <h5>Quaternary button (icon and text)</h5>
+        <div className="mt-4">
+          <Button variant="quaternary">
+            <span className="flex">
+              <IconColumns />
+              <span>
+                <span className="ml-2">Button</span>
+              </span>
+            </span>
+          </Button>
+        </div>
+      </div>
+
+      <div className="mt-14 w-80">
+        <h5>Quaternary button disabled</h5>
+        <div className="mt-4">
+          <Button variant="quaternary" disabled>
+            <span className="flex">
+              <IconColumns />
+              <span>
+                <span className="ml-2">Button</span>
+              </span>
+            </span>
+          </Button>
         </div>
       </div>
     </div>

diff --git a/src/app/sandbox/dialog/page.tsx b/src/app/sandbox/dialog/page.tsx
@@ -51,7 +51,7 @@ function DialogPage() {
           <Dialog
             title="Test Dialog"
             openTrigger={
-              <Button renderStyle="icon">
+              <Button variant="quaternary">
                 <IconFilter />
               </Button>
             }