docs: add layout template

apps/docs/content/2-foundations/1-guidelines/2-layout.mdx

@@ -0,0 +1,108 @@
+---
+title: Layout
+description: Layout information
+draft: true
+status: in-development
+---
+
+# Layout
+
+## Screen size
+
+Design for small screens first, starting with a single-column layout.
+
+For most types of page, we recommend using either a ‘two-thirds’ or a ‘two-thirds and one-third’ layout. That stops lines of text getting so long that the page becomes difficult to read on desktop devices. This would usually mean no more than 75 characters per line.
+
+Never make assumptions about what devices people are using. Design for different screen sizes rather than specific devices.
+
+## Common layouts
+
+### Two-thirds
+
+<TwoThirds>This is a test content</TwoThirds>
+
+```html
+<div className="gi-layout-column-container">
+    <div className="gi-layout-column-2-3">left content</div>
+</div>
+```
+
+### Two-thirds and one-third
+
+<TwoThirdsOneThird 
+    left={
+        <>This is a test content</>
+    }
+    right={
+        <>This is a side content</>
+    } />
+
+```html
+<div className="gi-layout-column-container">
+    <div className="gi-layout-column-2-3">left content</div>
+    <div className="gi-layout-column-1-3">right content</div>
+</div>
+```
+
+## Setting up page wrappers
+
+If you want to build your layout from scratch, or understand what each of the parts are responsible for, here’s an explanation of how the page wrappers work.
+
+### Limiting width of content
+
+To set up your layout you will need to create 2 wrappers. The first should have the class `gi-layout-container`, which sets the maximum width of the content but does not add any vertical margin or padding.
+
+If your design requires them, you should place components such as breadcrumbs, back link and phase banner inside this wrapper so that they sit directly underneath the header.
+
+## Using the grid system
+
+Use the grid system to lay out the content on your service’s pages.
+
+Most GOV.IE pages follow a ‘two-thirds and one-third’ layout, but the grid system allows for a number of additional combinations when necessary.
+
+Your main content should always be in a two-thirds column even if you’re not using a corresponding one-third column for secondary content.
+
+## Understanding the grid system
+
+GOV.ID Design System provides a powerful and flexible grid system based on CSS Grid. 
+
+### Basic Grid Structure
+To create a grid, you use the `gi-grid` class on a container element. Then, you can specify the number of columns using `gi-grid-cols-{n}` classes, where `{n}` is the number of columns.
+For example:
+
+```html
+<div class="grid grid-cols-3">
+  <div>Column 1</div>
+  <div>Column 2</div>
+  <div>Column 3</div>
+</div>
+```
+This creates a 3-column grid layout.
+
+### Responsive Grids
+It is easy to create responsive grids using breakpoint prefixes. You can specify different column counts for different screen sizes:
+
+```html
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
+  <!-- Grid items -->
+</div>
+```
+This creates a grid that has 1 column on small screens, 2 columns on medium screens, and 4 columns on large screens.
+
+### Grid Gaps
+You can add gaps between grid items using the `gi-gap-{size}` classes:
+
+```html
+<div class="grid grid-cols-3 gap-4">
+  <!-- Grid items -->
+</div>
+```
+
+### Spanning Columns and Rows
+You are allowed to control how items span across columns and rows using classes like `gi-col-span-{n}` and `gi-row-span-{n}`:
+```html
+<div class="grid grid-cols-3">
+  <div class="col-span-2">Spans 2 columns</div>
+  <div>Normal column</div>
+</div>
+```

apps/docs/dictionary.txt

@@ -73,4 +73,6 @@ discoverable
 preflight
 Fontsource
 Roadmap
-caseworking
+caseworking
+breakpoint
+TwoThirdsOneThird

apps/docs/src/app/[...slug]/page.tsx

@@ -18,7 +18,7 @@ export default function DocumentPage({ params }: DocumentPageProps) {
   }
 
   return (
-    <section className="flex flex-col grow overflow-x-auto">
+    <section className="flex flex-col grow">
       <div className="flex justify-between items-center">
         {document.status === 'stable' ? null : (
           <div>

apps/docs/src/components/document/common/mdx.tsx

@@ -44,6 +44,7 @@ import { DesignSystemBenefits } from './design-system-benefits';
 import { DocumentImage } from './document-image';
 import { wrapComponents } from './wrap-components';
 import { ColorPrimitives } from '@/components/document/color/color-primitives';
+import { TwoThirds, TwoThirdsOneThird } from '@/components/layouts/two-thirds';
 import { Highlight } from '@/components/typography/highlight';
 import { Link } from '@/components/typography/link';
 import { cn } from '@/lib/cn';
@@ -65,11 +66,12 @@ const standardComponents: MDXComponents = {
     href ? <Link href={href}>{children}</Link> : null,
   ul: ({ children }) => <ul className="list-disc ml-xl">{children}</ul>,
   li: ({ children }) => <li className="text-md mb-sm">{children}</li>,
-  code: ({ children }) => (
+  code: ({ children, className }) => (
     <code
       className={cn(
-        'rounded-sm bg-gray-50 border-gray-100 border-xs p-xs',
-        'text-gray-600 text-center text-2xs',
+        className
+          ? 'rounded-xs bg-gray-50 border-gray-100 border-xs p-3 text-gray-600 text-xs block'
+          : 'rounded-sm bg-gray-50 border-gray-100 border-xs p-xs text-gray-600 text-center text-2xs',
       )}
     >
       {children}
@@ -115,6 +117,8 @@ const documentComponents: MDXComponents = {
   ServiceUnavailable: (props) => <ServiceUnavailable {...props} />,
   ContactDeptOrService: (props) => <ContactDeptOrService {...props} />,
   DeveloperRecommendation: (props) => <DeveloperRecommendation {...props} />,
+  TwoThirds: (props) => <TwoThirds {...props} />,
+  TwoThirdsOneThird: (props) => <TwoThirdsOneThird {...props} />,
 };
 
 export function Mdx({ code }: MdxProps) {

apps/docs/src/components/layouts/two-thirds.tsx

@@ -0,0 +1,26 @@
+export function TwoThirds({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="border-gray-400 border-solid border-xs p-4">
+      <div className="gi-layout-column-container">
+        <div className="gi-layout-column-2-3">{children}</div>
+      </div>
+    </div>
+  );
+}
+
+export function TwoThirdsOneThird({
+  left,
+  right,
+}: {
+  left: React.ReactNode;
+  right: React.ReactNode;
+}) {
+  return (
+    <div className="border-gray-400 border-solid border-xs p-4">
+      <div className="gi-layout-column-container">
+        <div className="gi-layout-column-2-3">{left}</div>
+        <div className="gi-layout-column-1-3">{right}</div>
+      </div>
+    </div>
+  );
+}

packages/html/ds/tailwind.config.ts

@@ -6,6 +6,11 @@ const config: Config = {
   content: ['./src/**/*.html', './src/**/*.ts'],
   theme: createTheme(),
   plugins: [],
+  safelist: [
+    // { pattern: /text-./ },
+    // { pattern: /border-./ },
+    // { pattern: /./ },
+  ],
 };
 
 export default config;

packages/react/ds/src/container/container.tsx

@@ -1,3 +1,3 @@
 export function Container({ children }: { children: React.ReactNode }) {
-  return <div className={`gi-mx-auto gi-container`}>{children}</div>;
+  return <div className="gi-layout-container">{children}</div>;
 }

packages/react/ds/styles.css

@@ -24,6 +24,30 @@
 
 @layer components {
 
+  /* Typography */
+
+  /* End Typography */
+
+  /* Layout */
+
+  .gi-layout-container {
+    @apply gi-container gi-mx-auto
+  }
+
+  .gi-layout-column-container {
+    @apply gi-flex gi-flex-col md:gi-flex-row
+  }
+
+  .gi-layout-column-2-3 {
+    @apply gi-w-full md:gi-w-2/3
+  }
+
+  .gi-layout-column-1-3 {
+    @apply gi-w-full md:gi-w-1/3
+  }
+
+  /* End Layout */
+
   /* Header Styles */
 
   #GovieHeader {
@@ -76,7 +100,6 @@
     div.gi-tabs:has([role="tablist"] [name="tabs"]:nth-of-type(11):checked) [role="tabpanel"]:nth-of-type(12),
     div.gi-tabs:has([role="tablist"] [name="tabs"]:nth-of-type(12):checked) [role="tabpanel"]:nth-of-type(13) {
       display: block;
-    }
-
+    }  
     /* End Tabs */
 }

packages/react/ds/tailwind.config.ts

@@ -6,6 +6,13 @@ const config: Config = {
   content: ['./src/**/*.ts', './src/**/*.tsx'],
   theme: createTheme(),
   plugins: [],
+  safelist: [
+    { pattern: /layout-./ },
+    { pattern: /grid-./ },
+    { pattern: /col-./ },
+    { pattern: /row-./ },
+    { pattern: /gap-./ },
+  ],
 };
 
 export default config;