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

@@ -74,4 +74,6 @@ preflight
 Fontsource
 Roadmap
 caseworking
-dropdowns
+dropdowns
+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,13 @@ const config: Config = {
   content: ['./src/**/*.html', './src/**/*.ts'],
   theme: createTheme(),
   plugins: [],
+  safelist: [
+    { pattern: /layout-./ },
+    { pattern: /grid-./ },
+    { pattern: /col-./ },
+    { pattern: /row-./ },
+    { pattern: /gap-./ },
+  ],
 };
 
 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

@@ -23,7 +23,31 @@
 }
 
 @layer components {
-  /* Header Styles */
+  /* 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 */
 
   #GovieHeader {
     #MenuContainer:has(#SearchTrigger:checked) ~ #SearchContainer {
@@ -46,53 +70,44 @@
       position: fixed;
     }
   }
+
+  /* End Header */
 
   /* Tabs */
 
-  [name='tabs']:checked + label {
-    @apply gi-border-solid gi-border-gray-200 gi-border-x-xs gi-border-t-xs gi-border-b-0 gi-bg-white gi-px-5 gi-py-3 gi--mt-2 gi-no-underline;
+  [name="tabs"]:checked+label {
+    @apply gi-border-solid gi-border-gray-200 gi-border-x-xs gi-border-t-xs gi-border-b-0 gi-bg-white gi-px-5 gi-py-3 gi--mt-2 gi-no-underline
   }
 
-  [name='tabs']:hover + label > * {
-    @apply gi-decoration-lg;
+  [name="tabs"]:hover+label>* {
+    @apply gi-decoration-lg
   }
 
-  [name='tabs']:focus + label > * {
-    @apply gi-outline gi-outline-transparent gi-bg-yellow-400 gi-outline-2 gi-shadow gi-shadow-yellow-400;
+  [name="tabs"]:focus+label>* {
+    @apply gi-outline gi-outline-transparent gi-bg-yellow-400 gi-outline-2 gi-shadow gi-shadow-yellow-400
   }
 
-  div.gi-tabs:has([role='tablist'] [name='tabs']:nth-of-type(1):checked)
-    [role='tabpanel']:nth-of-type(2),
-  div.gi-tabs:has([role='tablist'] [name='tabs']:nth-of-type(2):checked)
-    [role='tabpanel']:nth-of-type(3),
-  div.gi-tabs:has([role='tablist'] [name='tabs']:nth-of-type(3):checked)
-    [role='tabpanel']:nth-of-type(4),
-  div.gi-tabs:has([role='tablist'] [name='tabs']:nth-of-type(4):checked)
-    [role='tabpanel']:nth-of-type(5),
-  div.gi-tabs:has([role='tablist'] [name='tabs']:nth-of-type(5):checked)
-    [role='tabpanel']:nth-of-type(6),
-  div.gi-tabs:has([role='tablist'] [name='tabs']:nth-of-type(6):checked)
-    [role='tabpanel']:nth-of-type(7),
-  div.gi-tabs:has([role='tablist'] [name='tabs']:nth-of-type(7):checked)
-    [role='tabpanel']:nth-of-type(8),
-  div.gi-tabs:has([role='tablist'] [name='tabs']:nth-of-type(8):checked)
-    [role='tabpanel']:nth-of-type(9),
-  div.gi-tabs:has([role='tablist'] [name='tabs']:nth-of-type(9):checked)
-    [role='tabpanel']:nth-of-type(10),
-  div.gi-tabs:has([role='tablist'] [name='tabs']:nth-of-type(10):checked)
-    [role='tabpanel']:nth-of-type(11),
-  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) {
+  div.gi-tabs:has([role="tablist"] [name="tabs"]:nth-of-type(1):checked) [role="tabpanel"]:nth-of-type(2),
+  div.gi-tabs:has([role="tablist"] [name="tabs"]:nth-of-type(2):checked) [role="tabpanel"]:nth-of-type(3),
+  div.gi-tabs:has([role="tablist"] [name="tabs"]:nth-of-type(3):checked) [role="tabpanel"]:nth-of-type(4),
+  div.gi-tabs:has([role="tablist"] [name="tabs"]:nth-of-type(4):checked) [role="tabpanel"]:nth-of-type(5),
+  div.gi-tabs:has([role="tablist"] [name="tabs"]:nth-of-type(5):checked) [role="tabpanel"]:nth-of-type(6),
+  div.gi-tabs:has([role="tablist"] [name="tabs"]:nth-of-type(6):checked) [role="tabpanel"]:nth-of-type(7),
+  div.gi-tabs:has([role="tablist"] [name="tabs"]:nth-of-type(7):checked) [role="tabpanel"]:nth-of-type(8),
+  div.gi-tabs:has([role="tablist"] [name="tabs"]:nth-of-type(8):checked) [role="tabpanel"]:nth-of-type(9),
+  div.gi-tabs:has([role="tablist"] [name="tabs"]:nth-of-type(9):checked) [role="tabpanel"]:nth-of-type(10),
+  div.gi-tabs:has([role="tablist"] [name="tabs"]:nth-of-type(10):checked) [role="tabpanel"]:nth-of-type(11),
+  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 */
-}
+
+  /* Input File */
 
-/* Input File */
-
-input[type='file' i] {
-  @apply gi-appearance-none gi-bg-[initial] gi-cursor-default gi-items-baseline gi-text-ellipsis gi-text-start gi-whitespace-pre;
+  input[type='file' i] {
+    @apply gi-appearance-none gi-bg-[initial] gi-cursor-default gi-items-baseline gi-text-ellipsis gi-text-start gi-whitespace-pre;
+  }
+
+  /* End Input File */
 }

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;