diff --git a/changelog.md b/changelog.md index 01c73ecb..5ac676f2 100644 --- a/changelog.md +++ b/changelog.md @@ -1,6 +1,6 @@ # SciReactUI Changelog -## [v0.6.3] - 2026-09-01 +## [v0.7.0] - 2026-09-02 ### Added diff --git a/package.json b/package.json index 9b56594f..08ef0288 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@diamondlightsource/sci-react-ui", - "version": "0.6.2", + "version": "0.7.0", "publishConfig": { "access": "public" }, diff --git a/readme.md b/readme.md index dc49411c..475a7d56 100644 --- a/readme.md +++ b/readme.md @@ -22,20 +22,18 @@ Install as usual. ### Usage -First use the ThemeProvider and supply a theme. +First use the ThemeProvider and wrap your App. ```js -import { ThemeProvider, DiamondTheme } from "@diamondlightsource/sci-react-ui"; +import { ThemeProvider } from "@diamondlightsource/sci-react-ui"; root.render( - + , ); ``` -There are currently two themes, `GenericTheme` or `DiamondTheme`, but you can also create/adapt your own. - Navigation components support either static links (with href) or the use of a routing library (with linkComponent and to). For NavLink and FooterLink, if both linkComponent and to are provided, it will use linkComponent. If not, it falls back to using href. @@ -49,7 +47,7 @@ An example with static links ``` -An example using react-router: +and an example using react-router: ```js import { NavLink } from "react-router-dom"; @@ -84,13 +82,10 @@ Next, use the BrowserRouter which can be used at the top level: ```js import { BrowserRouter } from "react-router-dom"; -import { - ThemeProvider, - DiamondTheme -} from "@diamondlightsource/sci-react-ui"; +import { ThemeProvider } from "@diamondlightsource/sci-react-ui"; root.render( - + diff --git a/src/storybook/Installation.mdx b/src/storybook/Installation.mdx index 3b7ffa42..b60e4758 100644 --- a/src/storybook/Installation.mdx +++ b/src/storybook/Installation.mdx @@ -46,19 +46,16 @@ Use this page to install SciReactUI, configure the Diamond Design System theme, Use the provided `DiamondDSTheme` with the ThemeProvider or create your own (see below). The theme controls colour via semantic surface tokens. ```tsx filename="main.tsx" - import { - ThemeProvider, - DiamondDSTheme - } from "@diamondlightsource/sci-react-ui"; + import { ThemeProvider } from "@diamondlightsource/sci-react-ui"; root.render( - + ) ``` - The design sytem theme consists of two parts: + The design system theme consists of two parts: - Theme configuration (DiamondDSTheme.ts) - Semantic role tokens (diamond-ds-roles.css)