feat: add public font package with Fira Sans

apps/rhc-templates/src/app/layout.tsx

@@ -4,6 +4,7 @@ import { PropsWithChildren } from 'react';
 import '@nl-rvo/assets/fonts/index.css';
 import '@rijkshuisstijl-community/design-tokens/dist/index.css';
 import '@rijkshuisstijl-community/components-css/index.scss';
+import '@rijkshuisstijl-community/font/src/index.mjs';
 import './globals.css';
 import './page/page.scss';
 import Link from 'next/link';

packages/font/README.md

@@ -0,0 +1,44 @@
+<!-- @license CC0-1.0 -->
+
+<!-- markdownlint-disable MD033 -->
+
+# Rijkshuisstijl Community font
+
+> <span lang="en">This is not the Rijkshuisstijl font, this is just a tribute.</span>
+>
+> — Tenacious B
+
+Dit npm pakketje met fonts kun je gebruiken als alternatief op de officiële Rijkshuisstijl fonts, voor situaties waar je geen toestemming hebt om de officiële fonts te gebruiken.
+
+- Alternatief voor **Rijkshuisstijl Web Sans**: wij gebruiken Fira Sans als een alternatief voor Rijkshuisstijl Web Sans.
+- Alternatief voor **Rijkshuisstijl Web Serif**: er is nog geen goed alternatief gevonden voor Rijkshuisstijl Web Serif, daarom gebruiken we het sans-serif font Fira Sans ook als alternatief voor het serif font.
+
+## Downloaden
+
+Designers kunnen de font [Fira Sans downloaden via Fontsource](https://fontsource.org/fonts/fira-sans).
+
+## Installatie
+
+Installeer de font in Node.js projecten door het volgende commando in de terminal uit te voeren:
+
+```shell
+npm install -D @rijkshuisstijl-community/font
+```
+
+Gebruik in JavaScript frameworks zoals React en Angular de volgende code:
+
+```mjs
+import '@rijkshuisstijl-community/font/src/index.mjs';
+```
+
+## Op zoek naar de officiële lettertypes?
+
+De officiële lettertypes kun je downloaden via [rijkshuisstijl.nl](https://www.rijkshuisstijl.nl/publiek/modules/product/DigitalStyleGuide/default/index.aspx?ItemId=6745), als je voldoende rechten hebt. Bijvoorbeeld als je bij de Rijksoverheid werkt en je ingelogd bent via Citrix.
+
+### Fonts downloaden via de network tab van developer tools
+
+Dat is niet de bedoeling. De officiële manier is om aan de font files te komen is via rijkshuisstijl.nl, via de eerdergenoemde link.
+
+### Fonts opslaan GitHub
+
+Dat is niet de bedoeling. Als je de officiële fonts opslaat in een publieke GitHub repository, dan kun je e-mails verwachten met een vriendelijk doch dwingend verzoek om ze er weer te verwijderen.

proprietary/font/package.json → packages/font/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0-alpha.23",
   "author": "Community for NL Design System",
   "description": "Font assets",
-  "license": "SEE LICENSE IN LICENSE.md",
+  "license": "EUPL-1.2",
   "main": "dist/index.css",
   "keywords": [
     "nl-design-system"
@@ -20,5 +20,8 @@
     "type": "git+ssh",
     "url": "git@github.com:nl-design-system/rijkshuisstijl-community.git",
     "directory": "proprietary/font"
+  },
+  "devDependencies": {
+    "@fontsource/fira-sans": "5.0.21"
   }
 }

packages/font/src/index.mjs

@@ -0,0 +1,4 @@
+import '@fontsource/fira-sans/400.css';
+import '@fontsource/fira-sans/400-italic.css';
+import '@fontsource/fira-sans/700.css';
+import '@fontsource/fira-sans/700-italic.css';

packages/font/src/index.scss

@@ -0,0 +1,4 @@
+@import "~@fontsource/fira-sans/400.css";
+@import "~@fontsource/fira-sans/400-italic.css";
+@import "~@fontsource/fira-sans/700.css";
+@import "~@fontsource/fira-sans/700-italic.css";

packages/storybook/config/preview.tsx

@@ -2,14 +2,10 @@ import { withThemeByClassName } from '@storybook/addon-themes';
 import { Preview } from '@storybook/react';
 import { UtrechtDocument } from '@utrecht/web-component-library-react';
 
-import '@fontsource/fira-sans/400.css';
-import '@fontsource/fira-sans/400-italic.css';
-import '@fontsource/fira-sans/700.css';
-import '@fontsource/fira-sans/700-italic.css';
 import '@nl-rvo/assets/fonts/index.css';
 import '@rijkshuisstijl-community/design-tokens/dist/index.css';
 import '@rijkshuisstijl-community/digid-design-tokens/dist/theme.css';
-import '@rijkshuisstijl-community/font/src/index.scss';
+import '@rijkshuisstijl-community/font/src/index.mjs';
 import '@rijkshuisstijl-community/logius-design-tokens/dist/theme.css';
 import '@rijkshuisstijl-community/mijnoverheid-design-tokens/dist/theme.css';
 import '@rijkshuisstijl-community/rivm-design-tokens/dist/theme.css';
@@ -37,7 +33,12 @@ const preview: Preview = {
       canvas: { title: 'Design Tokens' },
     },
     controls: { expanded: false },
-    options: { panelPosition: 'right' },
+    options: {
+      panelPosition: 'right',
+      storySort: {
+        order: ['Rijkshuisstijl Community', ['README'], 'Componenten'],
+      },
+    },
     status: {
       statuses: {
         PRODUCTION: {

packages/storybook/package.json

@@ -27,7 +27,6 @@
   "devDependencies": {
     "@chromatic-com/storybook": "1.6.1",
     "@etchteam/storybook-addon-status": "5.0.0",
-    "@fontsource/fira-sans": "5.0.21",
     "@nl-rvo/assets": "1.0.0-alpha.360",
     "@rijkshuisstijl-community/assets": "workspace:*",
     "@rijkshuisstijl-community/components-css": "workspace:*",

packages/storybook/src/documentation/font.mdx

@@ -0,0 +1,6 @@
+import markdown from '@rijkshuisstijl-community/font/README.md?raw';
+import { Markdown, Meta } from '@storybook/addon-docs';
+
+<Meta title="Rijkshuisstijl Community/Font" />
+
+<Markdown>{markdown}</Markdown>