@oaknational/oak-components 1.3.0 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +35 -6
- package/dist/cjs/index.js +3 -3
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +2 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/types.d.ts +144 -21
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
# Oak Components
|
|
4
4
|
|
|
5
|
+
|
|
6
|
+
|
|
5
7
|
## Overview
|
|
6
8
|
|
|
7
9
|
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.
|
|
@@ -12,15 +14,17 @@ This library is suitable for use in an app using React 18 and Next.js 13.5+
|
|
|
12
14
|
|
|
13
15
|
You can install it using `npm i @oaknational/oak-components` or any other package manager that supports the NPM registry.
|
|
14
16
|
|
|
17
|
+
👉 You'll need two environment variables to enable icons `NEXT_PUBLIC_OAK_ASSETS_HOST` and `NEXT_PUBLIC_OAK_ASSETS_PATH`. Values for these can be obtained from the `.env` config from OWA or from a fellow engineer.
|
|
18
|
+
|
|
15
19
|
### Theming, global styles and fonts
|
|
16
20
|
|
|
17
21
|
For components to be styled correctly they will need access to a theme, some global styles and the Lexend font.
|
|
18
22
|
|
|
19
|
-
|
|
23
|
+
If you're using the Next.js App router your root layout should look something like:
|
|
20
24
|
|
|
21
25
|
```typescript
|
|
22
|
-
|
|
23
|
-
import
|
|
26
|
+
// layout.js
|
|
27
|
+
import { OakThemeProvider, oakDefaultTheme, OakGlobalStyle } from "@oaknational/oak-components";
|
|
24
28
|
import { Lexend } from "next/font/google";
|
|
25
29
|
|
|
26
30
|
const lexend = Lexend({ subsets: ['latin'] });
|
|
@@ -28,9 +32,7 @@ const lexend = Lexend({ subsets: ['latin'] });
|
|
|
28
32
|
export default function RootLayout({ children }) {
|
|
29
33
|
return (
|
|
30
34
|
<html lang="en">
|
|
31
|
-
<
|
|
32
|
-
<OakGlobalStyles />
|
|
33
|
-
</Head>
|
|
35
|
+
<OakGlobalStyle />
|
|
34
36
|
<body className={lexend.className}>
|
|
35
37
|
<OakThemeProvider theme={oakDefaultTheme}>{children}</OakThemeProvider>
|
|
36
38
|
</body>
|
|
@@ -39,6 +41,8 @@ export default function RootLayout({ children }) {
|
|
|
39
41
|
}
|
|
40
42
|
```
|
|
41
43
|
|
|
44
|
+
To enable SSR of styles and avoid a flicker of unstyled content you'll need to configure your Next.js app to support [styled-components](https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components)
|
|
45
|
+
|
|
42
46
|
### TypeScript
|
|
43
47
|
|
|
44
48
|
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.
|
|
@@ -110,3 +114,28 @@ Components are organised into a three tier hierarchical structure applying the f
|
|
|
110
114
|
(eg. `SchoolInputForm`)
|
|
111
115
|
|
|
112
116
|
NB. these rules are a work in progress. Modifications may be required as the library builds.
|
|
117
|
+
|
|
118
|
+
## External Contributions
|
|
119
|
+
|
|
120
|
+
### Security and Bug Bounty
|
|
121
|
+
|
|
122
|
+
Please see our [security.txt](public/.well-known/security.txt) file.
|
|
123
|
+
|
|
124
|
+
### Contributing to the Code
|
|
125
|
+
|
|
126
|
+
We don't currently accept external contributions to the code base, but this is under review and we hope to find an approach the works for us and the community.
|
|
127
|
+
|
|
128
|
+
## Open Source Acknowledgements
|
|
129
|
+
|
|
130
|
+
As with all web projects we are dependent on open source libraries maintained by others. While it is not practical to acknowledge them all, we would nevertheless like to express our gratitude for the contributions and efforts of the OSS community. Our dependency list can be found in our [package.json](package.json) file.
|
|
131
|
+
|
|
132
|
+
## License
|
|
133
|
+
|
|
134
|
+
Unless stated otherwise, the codebase is released under the [MIT License][mit]. This covers both the codebase and any sample code in the documentation. Where any Oak National Academy trademarks or logos are included, these are not released under the [MIT License][mit], and should be used in line with [Oak National Academy brand guidelines][brand].
|
|
135
|
+
|
|
136
|
+
Any documentation included is © [Oak National Academy][oak] and available under the terms of the [Open Government Licence v3.0][ogl], except where otherwise stated.
|
|
137
|
+
|
|
138
|
+
[mit]: LICENCE
|
|
139
|
+
[oak]: https://www.thenational.academy/
|
|
140
|
+
[ogl]: https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/
|
|
141
|
+
[brand]: https://support.thenational.academy/using-the-oak-brand
|