auto collapse ClockInControls component using css (#1059)

factorialco · Jan 16, 2025 · 96de558 · 96de558
1 parent 25b5853
commit 96de558
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 87 deletions.
diff --git a/lib/experimental/Widgets/Content/ClockIn/ClockInControls/index.stories.tsx b/lib/experimental/Widgets/Content/ClockIn/ClockInControls/index.stories.tsx
@@ -21,7 +21,7 @@ const meta: Meta<typeof ClockInControls> = {
     labels: defaultLabels,
   },
   render: (args) => (
-    <div className="w-[350px]">
+    <div className="max-w-[350px]">
       <ClockInControls {...args} />
     </div>
   ),
@@ -92,7 +92,9 @@ export const WithOvertime: Story = {
 }
 
 export const Collapsed: Story = {
-  args: {
-    collapsed: true,
-  },
+  render: (args) => (
+    <div className="max-w-[250px]">
+      <ClockInControls {...args} />
+    </div>
+  ),
 }
diff --git a/lib/experimental/Widgets/Content/ClockIn/ClockInControls/index.tsx b/lib/experimental/Widgets/Content/ClockIn/ClockInControls/index.tsx
@@ -1,6 +1,5 @@
 import { Button } from "@/components/Actions/Button"
 import { SolidPause, SolidPlay, SolidStop } from "@/icons/app"
-import { cn } from "@/lib/utils"
 import { motion } from "framer-motion"
 import { ClockInGraph, ClockInGraphProps } from "../ClockInGraph"
 import { getInfo } from "./helpers"
@@ -28,7 +27,6 @@ export interface ClockInControlsProps {
   onClockOut?: () => void
   /** Callback when Break button is clicked */
   onBreak?: () => void
-  collapsed?: boolean
 }
 
 export function ClockInControls({
@@ -38,7 +36,6 @@ export function ClockInControls({
   onClockIn,
   onClockOut,
   onBreak,
-  collapsed = false,
 }: ClockInControlsProps) {
   const { status, statusText, subtitle, statusColor } = getInfo({
     data,
@@ -47,92 +44,91 @@ export function ClockInControls({
   })
 
   return (
-    <div
-      className={cn("flex items-center gap-10", collapsed && "flex-col gap-2")}
-    >
-      <div className={cn("flex-1 space-y-4", collapsed && "order-2")}>
-        <div
-          className={cn(
-            "space-y-0.5",
-            collapsed && "flex flex-col items-center"
-          )}
-        >
-          <div className="flex items-center gap-2">
-            <span className="text-xl font-semibold">{statusText}</span>
-            <div className="relative aspect-square h-4">
-              <motion.div
-                className="absolute inset-0 rounded-full opacity-20"
-                style={{
-                  backgroundColor: statusColor,
-                }}
-                initial={{ scale: 0.5, opacity: 0.6 }}
-                animate={{ scale: 1.6, opacity: 0 }}
-                transition={{
-                  duration: 1.5,
-                  repeat: Infinity,
-                  repeatDelay: 1,
-                }}
-              />
-              <div
-                className="absolute inset-[3px] rounded-full"
-                style={{
-                  backgroundColor: statusColor,
-                }}
-              />
+    <div className="@container">
+      <div className="flex flex-col-reverse items-center gap-2 @xs:flex-row">
+        <div className="flex-1 space-y-4">
+          <div className="flex flex-col items-center space-y-0.5 @xs:items-start">
+            <div className="flex items-center gap-2">
+              <span className="line-clamp-1 text-xl font-semibold">
+                {statusText}
+              </span>
+              <div className="relative aspect-square h-4">
+                <motion.div
+                  className="absolute inset-0 rounded-full opacity-20"
+                  style={{
+                    backgroundColor: statusColor,
+                  }}
+                  initial={{ scale: 0.5, opacity: 0.6 }}
+                  animate={{ scale: 1.6, opacity: 0 }}
+                  transition={{
+                    duration: 1.5,
+                    repeat: Infinity,
+                    repeatDelay: 1,
+                  }}
+                />
+                <div
+                  className="absolute inset-[3px] rounded-full"
+                  style={{
+                    backgroundColor: statusColor,
+                  }}
+                />
+              </div>
             </div>
+            {subtitle && (
+              <p className="line-clamp-1 text-f1-foreground-secondary">
+                {subtitle}
+              </p>
+            )}
           </div>
-          {subtitle && (
-            <p className="text-f1-foreground-secondary">{subtitle}</p>
-          )}
-        </div>
 
-        <div className={cn("flex gap-2", collapsed && "justify-center")}>
-          {status === "clocked-out" && (
-            <div className={cn(collapsed && "mr-3")}>
-              <Button
-                onClick={onClockIn}
-                label={labels.clockIn}
-                icon={SolidPlay}
-              />
-            </div>
-          )}
+          <div className="flex justify-center gap-2 @xs:justify-start">
+            {status === "clocked-out" && (
+              <div className="mr-3 @xs:mr-0">
+                <Button
+                  onClick={onClockIn}
+                  label={labels.clockIn}
+                  icon={SolidPlay}
+                />
+              </div>
+            )}
 
-          {status === "clocked-in" && (
-            <>
-              <Button
-                onClick={onBreak}
-                label={labels.break}
-                variant="neutral"
-                icon={SolidPause}
-                hideLabel
-              />
-              <Button
-                onClick={onClockOut}
-                label={labels.clockOut}
-                variant="neutral"
-                icon={SolidStop}
-              />
-            </>
-          )}
-          {status === "break" && (
-            <>
-              <Button
-                onClick={onClockOut}
-                label={labels.clockOut}
-                variant="neutral"
-                icon={SolidStop}
-                hideLabel
-              />
-              <Button
-                onClick={onClockIn}
-                label={labels.resume}
-                icon={SolidPlay}
-              />
-            </>
-          )}
+            {status === "clocked-in" && (
+              <>
+                <Button
+                  onClick={onBreak}
+                  label={labels.break}
+                  variant="neutral"
+                  icon={SolidPause}
+                  hideLabel
+                />
+                <Button
+                  onClick={onClockOut}
+                  label={labels.clockOut}
+                  variant="neutral"
+                  icon={SolidStop}
+                />
+              </>
+            )}
+            {status === "break" && (
+              <>
+                <Button
+                  onClick={onClockOut}
+                  label={labels.clockOut}
+                  variant="neutral"
+                  icon={SolidStop}
+                  hideLabel
+                />
+                <Button
+                  onClick={onClockIn}
+                  label={labels.resume}
+                  icon={SolidPlay}
+                />
+              </>
+            )}
+          </div>
         </div>
+        <ClockInGraph data={data} remainingMinutes={remainingMinutes} />
       </div>
-      <ClockInGraph data={data} remainingMinutes={remainingMinutes} />
     </div>
   )
 }