Design system/layouts/question (#66)

apps/design-system/stories/question.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Question } from "@repo/design-system/ui";
+
+const meta: Meta<typeof Question> = {
+  title: "Layouts/Question",
+  component: Question,
+};
+
+type QuestionStory = StoryObj<typeof meta>;
+
+export const Default: QuestionStory = {
+  //   args: {
+  //     children: "Volební kalkulačka",
+  //   },
+};
+
+export default meta;

apps/web/app/[lang]/testpage/page.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { Question } from "@repo/design-system/ui";
+import { ArrowIconLeft, ArrowIconRight } from "@repo/design-system/demo";
+import { Button } from "@repo/design-system/ui";
+
+export default function Page() {
+  return (
+    <>
+      {/* content */}
+      {/* mobile arrow bar */}
+      <div className="flex justify-between sm:hidden">
+        <Button
+          hasIcon
+          icon={ArrowIconLeft}
+          iconPosition="left"
+          kind="link"
+          fitContent
+        >
+          Předchozí
+        </Button>
+        <Button
+          hasIcon
+          icon={ArrowIconRight}
+          iconPosition="right"
+          kind="link"
+          fitContent
+        >
+          Přeskočit
+        </Button>
+      </div>
+      <div className="min-[701px]:grid sm:grid xs:flex xs:flex-col xs:gap-2 min-[701px]:grid-cols-[1fr_clamp(32rem,_50vw,_48rem)_1fr] sm:grid-cols-[1fr_clamp(32rem,_50vw,_48rem)_1fr] sm:gap-8">
+        {/* desktop grid content */}
+        {/* Place button end with flex ok? */}
+        <div className="min-[701px]:flex justify-end items-center xs:hidden">
+          {/* button wrapper */}
+          <div className="hidden min-[701px]:hidden sm:block">
+            <Button
+              hasIcon
+              fitContent
+              icon={ArrowIconLeft}
+              kind="link"
+              // fix k1 prefix issue!!!
+            >
+              <span className="hidden md:block">
+                Předchozí <span className="hidden lg:inline">otázka</span>
+              </span>
+            </Button>
+          </div>
+        </div>
+        <div>
+          <Question />
+        </div>
+        <div className="content-center hidden xs:block">
+          {/* button wrapper */}
+          <div className="hidden min-[701px]:hidden sm:block">
+            <Button
+              hasIcon
+              fitContent
+              icon={ArrowIconRight}
+              iconPosition="right"
+              kind="link"
+            >
+              <span className="hidden md:block">
+                Přeskočit <span className="hidden lg:inline">otázku</span>
+              </span>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

packages/design-system/config/padding.ts

@@ -0,0 +1,11 @@
+import { ThemeConfig } from "tailwindcss/types/config";
+
+const padding: Pick<Partial<ThemeConfig>, "padding"> = {
+  // We're adding these as a default padding scale, but feel free to use any multiplies of 0.25rem as part of default Tailwind CSS padding scale e.g. h-10 p-2
+  padding: {
+    customDesktop: "calc(calc(1rem * 2) - calc(1rem / 16))",
+    customMobile: "calc(1rem / 2 - 1rem / 16)",
+  },
+};
+
+export default padding;

packages/design-system/config/screens.ts

@@ -0,0 +1,14 @@
+import { ThemeConfig } from "tailwindcss/types/config";
+
+const screens: Pick<Partial<ThemeConfig>, "screens"> = {
+  // !!! We replace the default Tailwind CSS breakpoints scale with our own
+  screens: {
+    xs: "576px",
+    sm: "768px",
+    md: "992px",
+    lg: "1200px",
+    xl: "1400px",
+  },
+};
+
+export default screens;

packages/design-system/package.json

@@ -21,7 +21,8 @@
     "./button": "./src/button.tsx",
     "./buttonInFavour": "./src/buttonInFavour.tsx",
     "./buttonAgainst": "./src/buttonAgainst.tsx",
-    "./buttonNeutral": "./src/buttonNeutral.tsx"
+    "./buttonNeutral": "./src/buttonNeutral.tsx",
+    "./badge": "./src/badge.tsx"
   },
   "scripts": {
     "build": "npm run fonts && npm run tailwind",

packages/design-system/src/ui/button/button.tsx

@@ -136,7 +136,15 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(
 
     return (
       <HeadlessUIButton
-        className={`${buttonVariants({ kind, size, wider, fitContent, hasIcon, iconPosition, color })}`}
+        className={buttonVariants({
+          kind,
+          size,
+          wider,
+          fitContent,
+          hasIcon,
+          iconPosition,
+          color,
+        })}
         ref={ref}
         aria-pressed={pressed ? true : false}
         data-pressed={pressed ? true : null}

packages/design-system/src/ui/index.ts

@@ -2,3 +2,4 @@ export * from "./input/index";
 export * from "./button/index";
 export * from "./card/index";
 export * from "./progress/index";
+export * from "./question/index";

packages/design-system/src/ui/question/index.ts

@@ -0,0 +1 @@
+export * from "./question";

packages/design-system/src/ui/question/question.tsx

@@ -0,0 +1,34 @@
+import { Card } from "@repo/design-system/ui";
+import { Badge } from "@repo/design-system/badge";
+
+const Question = () => {
+  return (
+    <Card
+      corner="topLeft"
+      className="k1-flex k1-flex-col k1-w-auto k1-p-customMobile md:k1-p-customDesktop k1-gap-4"
+    >
+      <div className="k1-flex k1-gap-4 k1-flex-wrap k1-items-center">
+        <span className="k1-text-sm k1-font-normal">2/25</span>
+        <span className="k1-text-sm k1-font-normal">
+          Hromadná doprava vs. automobilová
+        </span>
+        <Badge>Veřejná doprava</Badge>
+      </div>
+      <div>
+        {/* TODO: line height fix value */}
+        <span className="k1-font-bold k1-text-2xl md:k1-text-4xl k1-leading-6 k1-tracking-tighter">
+          Investice do hromadné dopravy by měly mít přednost před rozvojem
+          infrastruktury pro osobní automobilovou dopravu.
+        </span>
+      </div>
+      <div>
+        <p className="k1-font-normal k1-text-base k1-text-neutral">
+          Investice do veřejné dopravy jsou klíčové pro všechny kraje, zejména
+          pro venkovské a méně rozvinuté oblasti.
+        </p>
+      </div>
+    </Card>
+  );
+};
+
+export { Question };

packages/design-system/tailwind.config.ts

@@ -4,17 +4,21 @@ import typography from "./config/typography";
 import spacing from "./config/spacing";
 import borderRadius from "./config/borderRadius";
 import boxShadow from "./config/boxShadow";
+import screens from "./config/screens";
+import padding from "./config/padding";
 
 // Each package is responsible for its own content
 const config: Config = {
   content: ["./src/**/*.tsx"],
   prefix: "k1-",
   theme: {
+    ...screens,
     extend: {
       ...colors,
       ...typography,
       ...spacing,
       ...boxShadow,
+      ...padding,
     },
     // Replace the default Tailwind CSS with our own
     ...borderRadius,