[Primitives] HGrid

.changeset/slow-frogs-eat.md

@@ -0,0 +1,6 @@
+---
+"@navikt/ds-css": minor
+"@navikt/ds-react": minor
+---
+
+[Layout] Columns komponent :tada:

@navikt/aksel-icons/figma-plugin/src/ui/utils.ts

@@ -1,9 +1,9 @@
 import meta from "@navikt/aksel-icons/metadata";
 
 const subCategorizeIcons = (
-  icons: typeof meta[1][]
-): { sub_category: string; icons: typeof meta[1][] }[] => {
-  const categories: { sub_category: string; icons: typeof meta[1][] }[] = [];
+  icons: (typeof meta)[1][]
+): { sub_category: string; icons: (typeof meta)[1][] }[] => {
+  const categories: { sub_category: string; icons: (typeof meta)[1][] }[] = [];
 
   for (const icon of icons) {
     const i = categories.findIndex(
@@ -19,14 +19,14 @@ const subCategorizeIcons = (
 };
 
 export const categorizeIcons = (
-  icons: typeof meta[1][]
+  icons: (typeof meta)[1][]
 ): {
   category: string;
-  sub_categories: { sub_category: string; icons: typeof meta[1][] }[];
+  sub_categories: { sub_category: string; icons: (typeof meta)[1][] }[];
 }[] => {
   const categories: {
     category: string;
-    icons: typeof meta[1][];
+    icons: (typeof meta)[1][];
   }[] = [];
 
   for (const icon of icons) {
@@ -42,14 +42,14 @@ export const categorizeIcons = (
     .map((x) => ({ ...x, sub_categories: subCategorizeIcons(x.icons) }));
 };
 
-const noFill = (icon: typeof meta[1], icons: typeof meta[1][]) => {
+const noFill = (icon: (typeof meta)[1], icons: (typeof meta)[1][]) => {
   const foundFill = icons.find(
     (x) => x.name.endsWith("Fill") && x.name.replace("Fill", "") === icon.name
   );
   return !foundFill;
 };
 
-export const getFillIcon = (icons: typeof meta[1][]) => {
+export const getFillIcon = (icons: (typeof meta)[1][]) => {
   return icons.filter(
     (x, _, z) => x.variant.toLowerCase() === "fill" || noFill(x, z)
   );

@navikt/core/css/hgrid.css

@@ -0,0 +1,59 @@
+/* stylelint-disable aksel/design-token-exists */
+.navds-hgrid {
+  --ac-hgrid-grid-columns-xs: initial;
+  --ac-hgrid-grid-columns-sm: initial;
+  --ac-hgrid-grid-columns-md: initial;
+  --ac-hgrid-grid-columns-lg: initial;
+  --ac-hgrid-grid-columns-xl: initial;
+  --__ac-hgrid-grid-columns: var(--ac-hgrid-grid-columns-xs);
+  --ac-hgrid-gap-xs: initial;
+  --ac-hgrid-gap-sm: initial;
+  --ac-hgrid-gap-md: initial;
+  --ac-hgrid-gap-lg: initial;
+  --ac-hgrid-gap-xl: initial;
+  --__ac-hgrid-gap: var(--ac-hgrid-gap-xs);
+
+  display: grid;
+  grid-template-columns: var(--__ac-hgrid-grid-columns);
+  gap: var(--__ac-hgrid-gap);
+}
+
+@media (min-width: 480px) {
+  .navds-hgrid {
+    --__ac-hgrid-grid-columns: var(--ac-hgrid-grid-columns-sm, var(--ac-hgrid-grid-columns-xs));
+    --__ac-hgrid-gap: var(--ac-hgrid-gap-sm, var(--ac-hgrid-gap-xs));
+  }
+}
+
+@media (min-width: 768px) {
+  .navds-hgrid {
+    --__ac-hgrid-grid-columns: var(--ac-hgrid-grid-columns-md, var(--ac-hgrid-grid-columns-sm, var(--ac-hgrid-grid-columns-xs)));
+    --__ac-hgrid-gap: var(--ac-hgrid-gap-md, var(--ac-hgrid-gap-sm, var(--ac-hgrid-gap-xs)));
+  }
+}
+
+@media (min-width: 1024px) {
+  .navds-hgrid {
+    --__ac-hgrid-grid-columns: var(
+      --ac-hgrid-grid-columns-lg,
+      var(--ac-hgrid-grid-columns-md, var(--ac-hgrid-grid-columns-sm, var(--ac-hgrid-grid-columns-xs)))
+    );
+    --__ac-hgrid-gap: var(--ac-hgrid-gap-lg, var(--ac-hgrid-gap-md, var(--ac-hgrid-gap-sm, var(--ac-hgrid-gap-xs))));
+  }
+}
+
+@media (min-width: 1280px) {
+  .navds-hgrid {
+    --__ac-hgrid-grid-columns: var(
+      --ac-hgrid-grid-columns-xl,
+      var(
+        --ac-hgrid-grid-columns-lg,
+        var(--ac-hgrid-grid-columns-md, var(--ac-hgrid-grid-columns-sm, var(--ac-hgrid-grid-columns-xs)))
+      )
+    );
+    --__ac-hgrid-gap: var(
+      --ac-hgrid-gap-xl,
+      var(--ac-hgrid-gap-lg, var(--ac-hgrid-gap-md, var(--ac-hgrid-gap-sm, var(--ac-hgrid-gap-xs))))
+    );
+  }
+}

@navikt/core/css/index.css

@@ -14,6 +14,7 @@
 @import "guide-panel.css";
 @import "form/index.css";
 @import "help-text.css";
+@import "hgrid.css";
 @import "internalheader.css";
 @import "link.css";
 @import "loader.css";

@navikt/core/react/src/index.ts

@@ -33,3 +33,4 @@ export * from "./tooltip";
 export * from "./typography";
 export * from "./util";
 export * from "./layout/stack";
+export * from "./layout/grid";

@navikt/core/react/src/layout/grid/HGrid.tsx

@@ -0,0 +1,76 @@
+import React, { forwardRef, HTMLAttributes } from "react";
+import cl from "clsx";
+import {
+  getResponsiveProps,
+  getResponsiveValue,
+  ResponsiveProp,
+  SpacingScale,
+} from "../utilities/css";
+
+export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * Number of columns to display. Can be a number, a string with a unit or tokens for spesific breakpoints.
+   * Sets `grid-template-columns, so 'fr, minmax' etc works`.
+   * @example
+   * columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}
+   * @example
+   * columns={3}
+   * @example
+   * columns="repeat(3, minmax(0, 1fr))"
+   */
+  columns?: ResponsiveProp<number | string>;
+  /** Spacing between columns. Can be a number, a string with a unit or tokens for spesific breakpoints.
+   * @example
+   * gap="6"
+   * gap={{ sm: "2", md: "2", lg: "6", xl: "6"}}
+   */
+  gap?: ResponsiveProp<SpacingScale>;
+}
+
+export const HGrid = forwardRef<HTMLDivElement, HGridProps>(
+  ({ className, columns, gap, ...rest }, ref) => {
+    const styles = {
+      ...getResponsiveProps(`hgrid`, "gap", "spacing", gap),
+      ...getResponsiveValue(`hgrid`, "grid-columns", formatGrid(columns)),
+    } as React.CSSProperties;
+
+    return (
+      <div
+        {...rest}
+        ref={ref}
+        className={cl("navds-hgrid", className)}
+        style={styles}
+      />
+    );
+  }
+);
+
+function formatGrid(
+  props?: ResponsiveProp<number | string>
+): ResponsiveProp<number | string> {
+  if (!props) {
+    return {};
+  }
+
+  if (typeof props === "string" || typeof props === "number") {
+    return getColumnValue(props);
+  }
+
+  return Object.fromEntries(
+    Object.entries(props).map(([alias, breakPoint]) => [
+      alias,
+      getColumnValue(breakPoint),
+    ])
+  );
+}
+
+const getColumnValue = (prop: number | string) => {
+  if (typeof prop === "number") {
+    return `repeat(${prop}, minmax(0, 1fr))`;
+  }
+
+  return prop;
+};
+
+export default HGrid;

@navikt/core/react/src/layout/grid/h-grid.stories.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { HGrid } from ".";
+
+export default {
+  title: "ds-react/HGrid",
+  component: HGrid,
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const Default = {
+  render: (props) => (
+    <HGrid {...props}>
+      <Placeholder text="1" />
+      <Placeholder text="2" />
+      <Placeholder text="3" />
+      <Placeholder text="4" />
+    </HGrid>
+  ),
+  columns: 0,
+  gap: "0",
+};
+
+export const Gap = {
+  render: () => (
+    <HGrid gap="6">
+      <Placeholder text="1" />
+      <Placeholder text="2" />
+      <Placeholder text="3" />
+      <Placeholder text="4" />
+    </HGrid>
+  ),
+};
+
+export const DynamicGap = {
+  render: () => (
+    <HGrid gap={{ xs: "2", md: "8" }}>
+      <Placeholder text="1" />
+      <Placeholder text="2" />
+      <Placeholder text="3" />
+      <Placeholder text="4" />
+    </HGrid>
+  ),
+};
+
+export const Columns = {
+  render: () => (
+    <HGrid gap="4" columns={2}>
+      <Placeholder text="1" />
+      <Placeholder text="2" />
+      <Placeholder text="3" />
+      <Placeholder text="4" />
+    </HGrid>
+  ),
+};
+
+export const DynamicColumns = {
+  render: () => (
+    <HGrid gap="4" columns={{ sm: "1fr 5fr", md: "2fr 2fr" }}>
+      <Placeholder text="1" />
+      <Placeholder text="2" />
+    </HGrid>
+  ),
+};
+
+function Placeholder({ text }) {
+  return (
+    <div
+      style={{
+        background: "var(--a-deepblue-900)",
+        height: "5rem",
+        width: "auto",
+        color: "white",
+      }}
+    >
+      {text}
+    </div>
+  );
+}

@navikt/core/react/src/layout/grid/index.ts

@@ -0,0 +1 @@
+export { default as HGrid, type HGridProps } from "./HGrid";

@navikt/core/react/src/layout/utilities/css.ts

@@ -21,23 +21,20 @@ export type SpacingScale =
   | "24"
   | "32";
 
-export type ResponsiveProp<T> =
-  | T
-  | {
-      // eslint-disable-next-line no-unused-vars
-      [Breakpoint in BreakpointsAlias]?: T;
-    };
+type ResponsivePropConfig<T = string> = {
+  // eslint-disable-next-line no-unused-vars
+  [Breakpoint in BreakpointsAlias]?: T;
+};
+
+export type ResponsiveProp<T> = T | ResponsivePropConfig<T>;
+
+export type ResponsiveValue<T = string> = undefined | ResponsiveProp<T>;
 
-export function getResponsiveProps(
+export function getResponsiveProps<T = string>(
   componentName: string,
   componentProp: string,
   tokenSubgroup: string,
-  responsiveProp?:
-    | string
-    | {
-        // eslint-disable-next-line no-unused-vars
-        [Breakpoint in BreakpointsAlias]?: string;
-      }
+  responsiveProp?: ResponsiveProp<T>
 ) {
   if (!responsiveProp) return {};
 
@@ -54,3 +51,24 @@ export function getResponsiveProps(
     ])
   );
 }
+
+export function getResponsiveValue<T = string>(
+  componentName: string,
+  componentProp: string,
+  responsiveProp?: ResponsiveValue<T>
+) {
+  if (!responsiveProp) return {};
+
+  if (typeof responsiveProp === "string") {
+    return {
+      [`--ac-${componentName}-${componentProp}-xs`]: responsiveProp,
+    };
+  }
+
+  return Object.fromEntries(
+    Object.entries(responsiveProp).map(([breakpointAlias, responsiveValue]) => [
+      `--ac-${componentName}-${componentProp}-${breakpointAlias}`,
+      responsiveValue,
+    ])
+  );
+}

aksel.nav.no/website/components/website-modules/TOC.tsx

@@ -137,7 +137,7 @@ export function TableOfContents({
           hidden: !renderToc,
           "col-start-3 max-w-prose md:sticky md:top-20 lg:flex":
             aksel && renderToc,
-          "mt-12 mr-auto h-full xl:flex": !aksel && renderToc,
+          "mr-auto mt-12 h-full xl:flex": !aksel && renderToc,
         }
       )}
     >