diff --git a/README.md b/README.md
index f379248c..f6b75792 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
## Overview
-This is a React Typescript components library which supports React and Next applications produced by [Oak National Academy](https://www.thenational.academy/). A Storybook for the components can be found [here](https://lively-meringue-8ebd43.netlify.app/) please consult 1Password for access.
+This is a React Typescript components library which supports React and Next applications produced by [Oak National Academy](https://www.thenational.academy/). A Storybook for the components can be found [here](https://components.thenational.academy/) please consult 1Password for access.
## Installation
@@ -12,6 +12,37 @@ This library is suitable for use in an app using React 18 and Next.js 13+
You can install it using `npm i @oaknational/oak-components` or any other package manager that supports the NPM registry.
+### Theming, global styles and fonts
+
+For components to be styled correctly they will need access to a theme, some global styles and the Lexend font.
+
+You can add those to your app using something like:
+
+```typescript
+import { OakThemeProvider, oakDefaultTheme } from "@oaknational/oak-components";
+import Head from "next/head";
+import { Lexend } from "next/font/google";
+
+const lexend = Lexend({ subsets: ['latin'] });
+
+export default function RootLayout({ children }) {
+ return (
+
+
+
+
+
+ {children}
+
+
+ );
+}
+```
+
+### TypeScript
+
+If you're using TypeScript you might want to add `@types/styled-components` to your development dependencies (`npm i -D @types/styled-components`). This will ensure that all components are properly type hinted in your IDE.
+
## Development
1. Copy the example env config `cp .env.example .env`
@@ -20,6 +51,12 @@ You can install it using `npm i @oaknational/oak-components` or any other packag
4. run `npm install`
5. To view the storybook run `npm run storybook`
+## Making changes
+
+We use [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) and [semantic versioning](https://semver.org/). Releases are managed by [Semantic Release](https://github.com/semantic-release/semantic-release) and are automatically published to [NPM](https://www.npmjs.com/package/@oaknational/oak-components) on every merge to `main`
+
+Changes should go through a pull-request to `main` and require approval by at least 1 reviewer. You should seek reviews from a QA/designer/PM when necessary.
+
## Testing components inside a host app like OWA
Sometimes it isn't enough to develop entirely inside Storybook and it might be necessary to try local changes inside a target app. You can do this with [yalc](https://github.com/wclr/yalc)
@@ -32,7 +69,7 @@ Sometimes it isn't enough to develop entirely inside Storybook and it might be n
4. Now when you start your target app you should have access to the locally packaged version of the library
5. To uninstall the local package you can run `yalc remove @oaknational/oak-components` inside the target app
- 🚨 if you're an Oak engineer developing in OWA there is a convenience script and you should use `npm run remove-local-components` instead
- as it will automaticallyt re-install the library from NPM.
+ as it will automatically re-install the library from NPM.
## Structure
diff --git a/package-lock.json b/package-lock.json
index f0889b2d..22c12125 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@oaknational/oak-components",
- "version": "0.0.37",
+ "version": "0.2.1",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@oaknational/oak-components",
- "version": "0.0.37",
+ "version": "0.2.1",
"devDependencies": {
"@commitlint/cli": "^18.4.4",
"@commitlint/config-conventional": "^18.4.4",
diff --git a/package.json b/package.json
index c7dbd1f6..70124eea 100644
--- a/package.json
+++ b/package.json
@@ -113,7 +113,8 @@
"@semantic-release/git",
{
"assets": [
- "package.json"
+ "package.json",
+ "package-lock.json"
],
"message": "build(release): ${nextRelease.version} [skip ci]"
}
diff --git a/pull_request_template.md b/pull_request_template.md
index 308f759b..06230346 100644
--- a/pull_request_template.md
+++ b/pull_request_template.md
@@ -1,10 +1,10 @@
# How to review this PR
-*Leave this text block for the reviewer*
+_Leave this text block for the reviewer_
- Check [component hierarchy](https://miro.com/app/board/uXjVNnKBgyk=/?share_link_id=59445593794) is followed correctly
-- Check the design [Heuristics](https://lively-meringue-8ebd43.netlify.app/?path=/docs/docs-howtodesigncomponents--docs#heuristics-for-component-design) have been followed
-- Check [naming conventions](https://lively-meringue-8ebd43.netlify.app/?path=/docs/docs-namingconventions--docs) have been applied
+- Check the design [Heuristics](https://components.thenational.academy/?path=/docs/docs-howtodesigncomponents--docs#heuristics-for-component-design) have been followed
+- Check [naming conventions](https://components.thenational.academy/?path=/docs/docs-namingconventions--docs) have been applied
- Check for these gotchyas:
- Missing exports for Oak components
- Accidental export of Internal components
diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts
index c1b4f1aa..c836e6de 100644
--- a/src/components/atoms/index.ts
+++ b/src/components/atoms/index.ts
@@ -17,3 +17,4 @@ export * from "./OakThemeProvider";
export * from "./OakMaxWidth";
export * from "./OakCloudinaryImage";
export * from "./OakKbd";
+export * from "./OakGlobalStyle";