Docs: Add example and how to use Noto Sans font

packages/neos-ui/package.json

@@ -21,6 +21,10 @@
   },
   "dependencies": {
     "@ckeditor/ckeditor5-highlight": "16.0.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-brands-svg-icons": "^5.15.3",
+    "@fortawesome/free-regular-svg-icons": "^5.15.3",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@friendsofreactjs/react-css-themr": "^4.1.0",
     "@neos-project/neos-ts-interfaces": "workspace:*",
     "@neos-project/neos-ui-backend-connector": "workspace:*",

packages/react-ui-components/README.md

@@ -23,10 +23,15 @@ import { Button } from '@neos-project/react-ui-components';
 Since version 8.3 you dont even need to have a css modules plugin for bundling installed.
 The lib is already compiled for you to bare ES2020 Javascript and CSS. So just roll with any simple $bundler ;)
 
-## Usage of `<Icon/>`
+### Font specialties
+
+You should also install `notosans-fontface` from our peerDependencies and import the `Noto Sans` Font as the components rely on it. See [example](example).
+
+
+### `<Icon/>` specialties
 
 Icons require you to import and configure Font Awesome properly.
-And example config could look like this: 
+An example config could look like this: (See [example](example))
 
 ```js
 import { Icon } from '@neos-project/react-ui-components';
@@ -49,6 +54,15 @@ export const Component = () => (
 )
 ```
 
+### Example
+
+See the [example](example) folder for a minimal setup.
+You can build it with a super simple esbuild command or use the alias:
+
+```sh
+yarn workspace @neos-project/react-ui-components example --minify
+```
+
 ## Usage within in a Neos.Ui plugin?
 
 You dont actually need to require this plugin when building a pure Neos.Ui Plugin like you dont need `react` installed as well. Your plugin will import `@neos-project/react-ui-components` from the "`window` export" of the Neos.Ui Host.

packages/react-ui-components/example/font.css

@@ -0,0 +1,14 @@
+
+@font-face {
+    font-family: 'Noto Sans';
+    src: local('Noto Sans Regular'), local('NotoSans-Regular'), url('notosans-fontface/fonts/NotoSans-Regular.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Noto Sans';
+    src: local('Noto Sans Bold'), local('NotoSans-Bold'), url('notosans-fontface/fonts/NotoSans-Bold.woff2') format('woff2');
+    font-weight: 700;
+    font-style: normal;
+}

packages/react-ui-components/example/test.jsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { render } from "react-dom";
-import { IconButton, Icon, Button } from "../dist/index"
+import { IconButton, Icon, Button, Headline, Label, ToggablePanel } from "../dist/index"
+
+import './font.css'; // The components 
 
 import {config, library} from '@fortawesome/fontawesome-svg-core';
 import {fas} from '@fortawesome/free-solid-svg-icons';
@@ -20,6 +22,16 @@ const App = () => (
         gap: "2rem",
         width: "100px"
     }}>
+        <Headline type="h1">Hello</Headline>
+        <Label>Hi</Label>
+        <ToggablePanel isOpen={true}>
+            <ToggablePanel.Header>
+                Header
+            </ToggablePanel.Header>
+            <ToggablePanel.Contents>
+                Contents
+            </ToggablePanel.Contents>
+        </ToggablePanel>
         <IconButton icon="neos" />
         <Icon icon="swimming-pool" />
         <Button>Hello Welt</Button>

packages/react-ui-components/package.json

@@ -38,13 +38,20 @@
     "jest": "NODE_ENV=test jest",
     "jest:updateSnapshots": "NODE_ENV=test jest -u",
     "start": "cross-env STORY=true start-storybook -p 9001",
-    "example": "cd example && yarn esbuild test.jsx --outdir=dist --bundle --sourcemap=linked"
+    "example": "cd example && yarn esbuild test.jsx --outdir=dist --bundle --sourcemap=linked --loader:.woff2=file"
   },
-  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+  "peerDependencies": {
     "@fortawesome/free-brands-svg-icons": "^5.15.3",
     "@fortawesome/free-regular-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@friendsofreactjs/react-css-themr": "^4.1.0",
+    "notosans-fontface": "^1.3.0",
+    "prop-types": "^15.5.10",
+    "react": "^16.12.0",
+    "react-dom": "^16.0.0"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/react-fontawesome": "^0.1.14",
     "classnames": "^2.2.3",
     "hoist-non-react-statics": "^3.3.1",
@@ -106,12 +113,6 @@
     "tslint": "^5.20.1",
     "typescript": "^4.6.0"
   },
-  "peerDependencies": {
-    "@friendsofreactjs/react-css-themr": "^4.1.0",
-    "prop-types": "^15.5.10",
-    "react": "^16.12.0",
-    "react-dom": "^16.0.0"
-  },
   "license": "GNU GPLv3",
   "jest": {
     "preset": "@neos-project/jest-preset-neos-ui"

yarn.lock

@@ -4134,6 +4134,10 @@ __metadata:
   resolution: "@neos-project/neos-ui@workspace:packages/neos-ui"
   dependencies:
     "@ckeditor/ckeditor5-highlight": 16.0.0
+    "@fortawesome/fontawesome-svg-core": ^1.2.35
+    "@fortawesome/free-brands-svg-icons": ^5.15.3
+    "@fortawesome/free-regular-svg-icons": ^5.15.3
+    "@fortawesome/free-solid-svg-icons": ^5.15.3
     "@friendsofreactjs/react-css-themr": ^4.1.0
     "@neos-project/babel-preset-neos-ui": "workspace:*"
     "@neos-project/build-essentials": "workspace:*"
@@ -4222,9 +4226,6 @@ __metadata:
   dependencies:
     "@babel/eslint-parser": ^7.19.1
     "@fortawesome/fontawesome-svg-core": ^1.2.35
-    "@fortawesome/free-brands-svg-icons": ^5.15.3
-    "@fortawesome/free-regular-svg-icons": ^5.15.3
-    "@fortawesome/free-solid-svg-icons": ^5.15.3
     "@fortawesome/react-fontawesome": ^0.1.14
     "@neos-project/babel-preset-neos-ui": "workspace:*"
     "@neos-project/debug-reason-for-rendering": "workspace:*"
@@ -4283,7 +4284,11 @@ __metadata:
     tslint: ^5.20.1
     typescript: ^4.6.0
   peerDependencies:
+    "@fortawesome/free-brands-svg-icons": ^5.15.3
+    "@fortawesome/free-regular-svg-icons": ^5.15.3
+    "@fortawesome/free-solid-svg-icons": ^5.15.3
     "@friendsofreactjs/react-css-themr": ^4.1.0
+    notosans-fontface: ^1.3.0
     prop-types: ^15.5.10
     react: ^16.12.0
     react-dom: ^16.0.0