feat(storybook/component-library-css): storybook fixes and publish individual component css

.changeset/fifty-fans-act.md

@@ -0,0 +1,7 @@
+---
+"@nl-rvo/css-form-radio-button": patch
+"@nl-rvo/component-library-css": patch
+"@nl-rvo/component-library-react": patch
+---
+
+Removed focus outline when selecting a Radio button

.changeset/rich-llamas-collect.md

@@ -0,0 +1,5 @@
+---
+"@nl-rvo/design-tokens": patch
+---
+
+Made Hero subtitle normal instead of italic

.changeset/silver-tomatoes-sell.md

@@ -0,0 +1,7 @@
+---
+"@nl-rvo/component-library-css": patch
+"@nl-rvo/css-form-fileinput": patch
+"@nl-rvo/component-library-react": patch
+---
+
+Removed fixed height and added font size to FileInput component

.changeset/smart-chairs-care.md

@@ -0,0 +1,5 @@
+---
+"@nl-rvo/component-library-css": minor
+---
+
+Added individual component CSS files to enable loading of individual components and reduce bundle size

.changeset/stale-bears-relax.md

@@ -0,0 +1,7 @@
+---
+"@nl-rvo/css-grid": minor
+"@nl-rvo/component-library-css": minor
+"@nl-rvo/component-library-react": minor
+---
+
+Added option for 7-12 columns in Grid component

.changeset/twenty-tools-drop.md

@@ -0,0 +1,7 @@
+---
+"@nl-rvo/css-grid": major
+"@nl-rvo/component-library-css": major
+"@nl-rvo/component-library-react": major
+---
+
+Added division property and --division variable to use instead of the layout prop

components/form-fileinput/src/index.scss

@@ -8,6 +8,7 @@
   border: none;
   color: var(--rvo-file-input-color, var(--utrecht-form-control-color));
   font-family: var(--utrecht-form-control-font-family, var(--utrecht-document-font-family));
+  font-size: var(--utrecht-form-control-font-size, var(--utrecht-document-font-size));
   font-weight: var(--rvo-file-input-font-weight);
 }
 
@@ -18,7 +19,6 @@
   border-style: solid;
   border-width: var(--rvo-file-input-border-width, var(--utrecht-form-control-border-width));
   font-family: var(--utrecht-form-control-font-family, var(--utrecht-document-font-family));
-  height: 45px;
   padding-block-end: var(--rvo-file-input-padding-block-end, var(--utrecht-form-control-padding-block-end));
   padding-block-start: var(--rvo-file-input-padding-block-start, var(--utrecht-form-control-padding-block-start));
   padding-inline-end: var(--rvo-file-input-padding-inline-end, var(--utrecht-form-control-padding-inline-end));

components/form-radio-button/src/index.scss

@@ -52,7 +52,6 @@
   }
 
   // Focus state
-  &:focus,
   &:focus-visible,
   &.utrecht-radio-button--focus-visible {
     outline-color: var(--utrecht-focus-outline-color);

components/grid/README.md

@@ -3,3 +3,16 @@
 Een grid wordt gebruikt om elementen naast elkaar te zetten in evenredige vlakken.
 
 De grid begint in één kolom en schakelt naar de gekozen meerdere kolommen opties wanneer daar binnen de container genoeg ruimte voor is. Een kolom heeft altijd een minimale waarde van 276 pixels.
+
+## Gebruik van kolom divisions anders dan '1fr' op alle kolommen
+
+Standaard is de grid opgebouwd met kolommen van 1fr. Je kunt de kolommen in een grid echter zelf op verschillende manieren verdelen.
+
+Bij gebruik als React component:
+
+- De division prop is een string die de kolommen definieert. Deze string is een lijst van kolommen met een breedte in pixels of een percentage. Bijvoorbeeld: `2fr 1fr 2fr` of `200px 1fr 200px`.
+
+Bij gebruik als CSS class:
+
+- Gebruik de class 'rvo-layout-grid--division' en een style attribuut om de variabele '--grid-division' te zetten naar de gewenste string.
+  Bijvoorbeeld: `<div class="rvo-layout-grid rvo-layout-grid--division" style="--grid-division: 2fr 1fr 2fr;">...</div>`

components/grid/grid.divisions.stories.tsx

@@ -0,0 +1,39 @@
+import { defaultArgs } from './src/defaultArgs';
+import { argTypes, Grid } from './src/template';
+
+export default {
+  title: 'Layout/Grid/Using divisions',
+  component: Grid,
+  argTypes: argTypes,
+
+  parameters: {
+    status: {
+      type: 'PRODUCTION',
+    },
+
+    docusaurus: {
+      link: 'grid',
+    },
+  },
+};
+
+export const TwoColumns = {
+  render: Grid.bind({}),
+  name: '2fr 1fr',
+
+  args: {
+    ...defaultArgs,
+    division: '2fr 1fr',
+  },
+};
+
+export const ThreeColumns = {
+  render: Grid.bind({}),
+  name: '2fr 1fr 2fr',
+
+  args: {
+    ...defaultArgs,
+    columns: 'three',
+    division: '2fr 1fr 2fr',
+  },
+};

components/grid/src/defaultArgs.ts

@@ -3,5 +3,4 @@ import { IGridProps } from './template';
 export const defaultArgs: IGridProps = {
   columns: 'one',
   gap: 'md',
-  layout: '1fr',
 };

components/grid/src/index.scss

@@ -1,3 +1,9 @@
+/**
+ * @license CC0-1.0
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+/* stylelint-disable custom-property-pattern */
 .rvo-layout-grid {
   display: grid;
 }
@@ -11,25 +17,30 @@
   .rvo-layout-grid-columns--three,
   .rvo-layout-grid-columns--four,
   .rvo-layout-grid-columns--five,
-  .rvo-layout-grid-columns--six {
+  .rvo-layout-grid-columns--six,
+  .rvo-layout-grid-columns--seven,
+  .rvo-layout-grid-columns--eight,
+  .rvo-layout-grid-columns--nine,
+  .rvo-layout-grid-columns--ten,
+  .rvo-layout-grid-columns--eleven,
+  .rvo-layout-grid-columns--twelve {
     grid-template-columns: repeat(2, 1fr);
   }
 }
 
 @media (min-width: 828px) {
   .rvo-layout-grid-columns--three,
+  .rvo-layout-grid-columns--four,
+  .rvo-layout-grid-columns--five,
   .rvo-layout-grid-columns--six,
-  .rvo-layout-grid-columns--five {
+  .rvo-layout-grid-columns--seven,
+  .rvo-layout-grid-columns--eight,
+  .rvo-layout-grid-columns--nine,
+  .rvo-layout-grid-columns--ten,
+  .rvo-layout-grid-columns--eleven,
+  .rvo-layout-grid-columns--twelve {
     grid-template-columns: repeat(3, 1fr);
   }
-
-  .rvo-layout-grid-columns--two.rvo-layout-grid-layout--2fr1fr {
-    grid-template-columns: 2fr 1fr;
-  }
-
-  .rvo-layout-grid-columns--two.rvo-layout-grid-layout--1fr2fr {
-    grid-template-columns: 1fr 2fr;
-  }
 }
 
 @media (min-width: 1104px) {
@@ -48,23 +59,53 @@
   .rvo-layout-grid-columns--six {
     grid-template-columns: repeat(6, 1fr);
   }
+
+  .rvo-layout-grid-columns--seven {
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  .rvo-layout-grid-columns--eight {
+    grid-template-columns: repeat(8, 1fr);
+  }
+
+  .rvo-layout-grid-columns--nine {
+    grid-template-columns: repeat(9, 1fr);
+  }
+
+  .rvo-layout-grid-columns--ten {
+    grid-template-columns: repeat(10, 1fr);
+  }
+
+  .rvo-layout-grid-columns--eleven {
+    grid-template-columns: repeat(11, 1fr);
+  }
+
+  .rvo-layout-grid-columns--twelve {
+    grid-template-columns: repeat(12, 1fr);
+  }
 }
 
-// Container queries not break build because of outdated Docusaurus (2 has to be 3)
 @container (min-width: 552px) {
   .rvo-layout-grid-columns--two,
   .rvo-layout-grid-columns--three,
   .rvo-layout-grid-columns--four,
   .rvo-layout-grid-columns--five,
-  .rvo-layout-grid-columns--six {
+  .rvo-layout-grid-columns--six,
+  .rvo-layout-grid-columns--seven,
+  .rvo-layout-grid-columns--eight,
+  .rvo-layout-grid-columns--nine,
+  .rvo-layout-grid-columns--ten,
+  .rvo-layout-grid-columns--eleven,
+  .rvo-layout-grid-columns--twelve {
     grid-template-columns: repeat(2, 1fr);
   }
 }
 
 @container (min-width: 828px) {
   .rvo-layout-grid-columns--three,
-  .rvo-layout-grid-columns--six,
-  .rvo-layout-grid-columns--five {
+  .rvo-layout-grid-columns--four,
+  .rvo-layout-grid-columns--five,
+  .rvo-layout-grid-columns--six {
     grid-template-columns: repeat(3, 1fr);
   }
 }
@@ -85,4 +126,32 @@
   .rvo-layout-grid-columns--six {
     grid-template-columns: repeat(6, 1fr);
   }
+
+  .rvo-layout-grid-columns--seven {
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  .rvo-layout-grid-columns--eight {
+    grid-template-columns: repeat(8, 1fr);
+  }
+
+  .rvo-layout-grid-columns--nine {
+    grid-template-columns: repeat(9, 1fr);
+  }
+
+  .rvo-layout-grid-columns--ten {
+    grid-template-columns: repeat(10, 1fr);
+  }
+
+  .rvo-layout-grid-columns--eleven {
+    grid-template-columns: repeat(11, 1fr);
+  }
+
+  .rvo-layout-grid-columns--twelve {
+    grid-template-columns: repeat(12, 1fr);
+  }
+}
+
+.rvo-layout-grid--division {
+  grid-template-columns: var(--division);
 }

components/grid/src/template.tsx

@@ -9,8 +9,20 @@ import './index.scss';
 
 export interface IGridProps {
   gap?: '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
-  columns?: 'one' | 'two' | 'three' | 'four' | 'five' | 'six';
-  layout?: '1fr' | '2fr1fr' | '1fr2fr';
+  columns?:
+    | 'one'
+    | 'two'
+    | 'three'
+    | 'four'
+    | 'five'
+    | 'six'
+    | 'seven'
+    | 'eight'
+    | 'nine'
+    | 'ten'
+    | 'eleven'
+    | 'twelve';
+  division?: string;
   /** @uxpinpropname Content */
   children?: ReactNode | undefined;
 }
@@ -21,12 +33,12 @@ export const argTypes = {
     control: { type: 'radio' },
   },
   columns: {
-    options: ['one', 'two', 'three', 'four', 'five', 'six'],
+    options: ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve'],
     control: { type: 'radio' },
   },
-  layout: {
-    options: ['1fr', '2fr1fr', '1fr2fr'],
-    control: { type: 'radio' },
+  division: {
+    control: 'text',
+    placeholder: '2fr 1fr',
   },
   children: {
     table: {
@@ -38,29 +50,51 @@ export const argTypes = {
 export const Grid: React.FC<IGridProps> = ({
   gap = defaultArgs.gap,
   columns = defaultArgs.columns,
-  layout = defaultArgs.layout,
+  division,
   children,
 }: IGridProps) => {
+  const getColumnCount = (columnName: string | undefined): number => {
+    if (!columnName) {
+      return 1;
+    }
+    const columnMap: { [key: string]: number } = {
+      one: 1,
+      two: 2,
+      three: 3,
+      four: 4,
+      five: 5,
+      six: 6,
+      seven: 7,
+      eight: 8,
+      nine: 9,
+      ten: 10,
+      eleven: 11,
+      twelve: 12,
+    };
+    return columnMap[columnName];
+  };
+
   return (
     <div className="rvo-layout-grid-container">
       <div
         className={clsx(
           'rvo-layout-grid',
           `rvo-layout-gap--${gap}`,
           `rvo-layout-grid-columns--${columns}`,
-          `rvo-layout-grid-layout--${layout}`,
+          division && 'rvo-layout-grid--division',
         )}
+        style={
+          division
+            ? ({
+                '--division': division,
+              } as React.CSSProperties)
+            : undefined
+        }
       >
-        {children || (
-          <>
-            <div>Element A</div>
-            <div>Element B</div>
-            <div>Element C</div>
-            <div>Element D</div>
-            <div>Element E</div>
-            <div>Element F</div>
-          </>
-        )}
+        {children ||
+          Array.from({ length: getColumnCount(columns) }, (_, index) => (
+            <div key={index}>Element {String.fromCharCode(65 + index)}</div>
+          ))}
       </div>
     </div>
   );