Colorcard component

apps/design-studio/schemaTypes/documents/page.tsx

@@ -93,6 +93,7 @@ export const page = defineType({
         { type: "fileList", title: "File list" },
         { type: "linkButton", title: "Link button" },
         { type: "divider", title: "Divider" },
+        { type: "colorCard", title: "Color card" },
       ],
       group: "pageContent",
     }),

apps/design-studio/schemaTypes/objects/colorCard.ts

@@ -0,0 +1,30 @@
+import { BsCodeSquare } from "react-icons/bs";
+import { defineField, defineType } from "sanity";
+
+export const colorCard = defineType({
+  icon: BsCodeSquare,
+  name: "colorCard",
+  title: "Color Card",
+  description:
+    "Shows a preview of a color token, with poassibility to copy the color value.",
+  type: "object",
+  fields: [
+    defineField({
+      name: "variableName",
+      title: "Spor color variable",
+      type: "string",
+      validation: (rule) => rule.required(),
+    }),
+    defineField({
+      name: "valueName",
+      title: "Color value",
+      type: "string",
+    }),
+    defineField({
+      name: "hexValue",
+      title: "Hex value",
+      type: "string",
+      validation: (rule) => rule.required(),
+    }),
+  ],
+});

apps/design-studio/schemaTypes/objects/colorCards.ts

@@ -0,0 +1,24 @@
+import { GiCard2Clubs } from "react-icons/gi";
+import { defineField, defineType } from "sanity";
+
+export const colorCards = defineType({
+  name: "colorCards",
+  title: "Color Cards",
+  description: "A card block with a list of color cards",
+  type: "object",
+  icon: GiCard2Clubs,
+  fields: [
+    defineField({
+      type: "array",
+      name: "items",
+      of: [{ type: "colorCard" }],
+      validation: (Rule) => Rule.min(1).required(),
+    }),
+  ],
+  preview: {
+    select: { items: "items" },
+    prepare: ({ items }) => ({
+      title: `${items.length + " color cards"}`,
+    }),
+  },
+});

apps/design-studio/schemaTypes/objects/content.tsx

@@ -25,5 +25,6 @@ export const content = defineType({
     { type: "grid" },
     { type: "tipsPanel" },
     { type: "bestPracticePanel" },
+    { type: "colorCards" },
   ],
 });

apps/design-studio/schemaTypes/objects/index.tsx

@@ -28,3 +28,5 @@ export * from "./staticCodeBlock";
 export * from "./textBlock";
 export * from "./textBlocks";
 export * from "./tipsPanel";
+export * from "./colorCards";
+export * from "./colorCard";

apps/designmanual-frontend/app/features/portable-text/PortableText.tsx

@@ -48,6 +48,7 @@ import { LinkButtonSerializer } from "./serializers/LinkButtonSerializer";
 import { NonClickableBoxListSerializer } from "./serializers/NonClickableBoxesSerializer";
 import { TextBlockSerializer } from "./serializers/TextBlockSerializer";
 import { TextBlocksSerializer } from "./serializers/TextBlocksSerializer";
+import { ColorCardsSerializer } from "./serializers/ColorCardsSerializer";
 
 const components: Partial<PortableTextReactComponents> = {
   marks: {
@@ -171,6 +172,7 @@ const components: Partial<PortableTextReactComponents> = {
     accordion: AccordionSerializer,
     fileList: FileListSerializer,
     divider: DividerSerializer,
+    colorCards: ColorCardsSerializer,
     buttonLink: ({ value }) => {
       const isInternal = value.url.startsWith("/");
       const linkProps = isInternal

apps/designmanual-frontend/app/features/portable-text/components/ColorCardGrid.tsx

@@ -0,0 +1,111 @@
+import { CheckmarkFill18Icon } from "@vygruppen/spor-icon-react";
+import {
+  Box,
+  Button,
+  Flex,
+  Grid,
+  GridItem,
+  Stack,
+  Text,
+} from "@vygruppen/spor-react";
+import { useState } from "react";
+
+export type ColorCard = {
+  variableName: string;
+  valueName?: string;
+  hexValue: string;
+};
+
+export type ColorCards = {
+  items: ColorCard[];
+  titleOfBlock: string;
+  headingIcon: string;
+};
+
+const copyToClipboard = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch (error) {
+    console.error("Failed to copy:", error);
+  }
+};
+function cleanHex(hex: string) {
+  return hex.replaceAll(/[\u200B-\u200D\uFEFF]/g, "");
+}
+
+const ColorCard = ({ variableName, valueName, hexValue }: ColorCard) => {
+  const [hasCopied, setHasCopied] = useState(false);
+  return (
+    <Flex
+      direction="column"
+      width={["100px", "110px"]}
+      border="1px solid"
+      borderRadius={8}
+      bg="bg"
+    >
+      <Box
+        bg={cleanHex(hexValue)}
+        height="70px"
+        width="100%"
+        borderTopRadius={8}
+      />
+
+      <Flex direction="column" p={1}>
+        <Stack gap={0}>
+          <Text fontWeight="bold" fontSize="2xs">
+            {variableName}
+          </Text>
+          {valueName ? <Text fontSize="2xs">{valueName}</Text> : null}
+        </Stack>
+
+        <Button
+          variant="ghost"
+          size="xs"
+          p={0}
+          onClick={() => {
+            copyToClipboard(hexValue);
+            setHasCopied(true);
+            setTimeout(() => {
+              setHasCopied(false);
+            }, 2000);
+          }}
+          _hover={{ textDecoration: "underline", bg: "transparent" }}
+        >
+          {hexValue.toUpperCase()}
+          {hasCopied && <CheckmarkFill18Icon />}
+        </Button>
+      </Flex>
+    </Flex>
+  );
+};
+
+export const ColorCards = ({ items }: ColorCards) => {
+  const gridItems = items.map((item, index) => (
+    <ColorCard
+      key={index}
+      variableName={item.variableName}
+      valueName={item.valueName}
+      hexValue={item.hexValue}
+    />
+  ));
+
+  return (
+    <Grid
+      templateColumns={[
+        "repeat(3, 1fr)",
+        "repeat(4, 1fr)",
+        "repeat(5, 1fr)",
+        "repeat(6, 1fr)",
+      ]}
+      rowGap={2}
+      width="100%"
+      maxWidth="container.xl"
+    >
+      {gridItems.map((g) => (
+        <GridItem key={g.key} justifyContent="center" display="flex">
+          {g}
+        </GridItem>
+      ))}
+    </Grid>
+  );
+};

apps/designmanual-frontend/app/features/portable-text/serializers/ColorCardsSerializer.tsx

@@ -0,0 +1,13 @@
+import { ColorCards } from "../components/ColorCardGrid";
+
+type ColorCardsSerializerProps = {
+  value: ColorCards;
+};
+
+export const ColorCardsSerializer = ({ value }: ColorCardsSerializerProps) => (
+  <ColorCards
+    items={value.items}
+    titleOfBlock={value.titleOfBlock}
+    headingIcon={value.headingIcon}
+  />
+);