Merge pull request #544 from opengovsg/release-v1.9.0

build: release v1.9.0

react/.storybook/introduction/Principles/Principles.tsx

@@ -24,7 +24,7 @@ export const Principles = (): JSX.Element => {
         </Text>
       </Box>
       <Box mb="1rem">
-        <Text textStyle="h4">User centred</Text>
+        <Text textStyle="h4">User-Centred</Text>
         <Text textStyle="body-1">
           Our design decisions should be driven by the needs of real users and
           backed up by research and/or data. All components and design patterns
@@ -50,25 +50,25 @@ export const Principles = (): JSX.Element => {
         </Text>
       </Box>
       <Box mb="1rem">
-        <Text textStyle="h4">Meaningful</Text>
+        <Text textStyle="h4">Meaningful Aesthetics</Text>
         <Text textStyle="body-1">
-          aesthetics The appearance of Form should be pleasing, but it must also
-          complement or enhance our purpose. Thoughtful aesthetics can help
-          guide, nudge, or prompt a user, and it supports and enhances the
-          product’s functionality. Aesthetics is not a common principle in
-          government where tangible concerns such as functionality, price,
-          speed, and efficiency are highly valued. But putting thought and craft
-          into our design and integrating it well with functionality shows our
-          users we value them and their time spent on our product. While the
-          benefits of good aesthetics might not sound so tangible, the
-          consequences of poor aesthetics and attention to detail are very
-          tangible - distraction from work objectives, decreased confidence in
-          product (increased anxiety) and poorer motivation to digitalise
-          current and future workflows. This creates friction for every workflow
-          launched and barriers to digitalisation (adoption of more efficient
-          practices). Additionally, [thoughtful aesthetics] helps raise the bar
-          for government products and show by example that government design can
-          be functional, usable, and be delightful at the same time.
+          The appearance of Form should be pleasing, but it must also complement
+          or enhance our purpose. Thoughtful aesthetics can help guide, nudge,
+          or prompt a user, and it supports and enhances the product’s
+          functionality. Aesthetics is not a common principle in government
+          where tangible concerns such as functionality, price, speed, and
+          efficiency are highly valued. But putting thought and craft into our
+          design and integrating it well with functionality shows our users we
+          value them and their time spent on our product. While the benefits of
+          good aesthetics might not sound so tangible, the consequences of poor
+          aesthetics and attention to detail are very tangible - distraction
+          from work objectives, decreased confidence in product (increased
+          anxiety) and poorer motivation to digitalise current and future
+          workflows. This creates friction for every workflow launched and
+          barriers to digitalisation (adoption of more efficient practices).
+          Additionally, [thoughtful aesthetics] helps raise the bar for
+          government products and show by example that government design can be
+          functional, usable, and be delightful at the same time.
         </Text>
       </Box>
     </Box>

react/.storybook/introduction/Welcome/Welcome.tsx

@@ -28,12 +28,12 @@ export const Welcome = (): JSX.Element => {
         </Box>
         <Box maxW="43.75rem">
           <Text textStyle="body-1" color="white" mb="1rem">
-            Camp is the design system for FormSG. It helps us create consistent,
-            accessible, highly usable, and delightful experiences for our public
-            users. It is a living library and guide, and will evolve according
-            to our product and user needs. Browse the stories in the sidebar to
-            play with different React components, and see usage examples for
-            every component.
+            Camp is the design system for Open Government Products. It helps us
+            create consistent, accessible, highly usable, and delightful
+            experiences for our public users. It is a living library and guide,
+            and will evolve according to our product and user needs. Browse the
+            stories in the sidebar to play with different React components, and
+            see usage examples for every component.
           </Text>
           <Flex align="center" color="white">
             <Icon as={BxBulb} aria-hidden mr="0.5rem" fontSize="1.5rem" />

react/.storybook/main.ts

@@ -15,7 +15,7 @@ export default {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-a11y',
-    '@storybook/addon-styling',
+    '@storybook/addon-themes',
     '@storybook/addon-mdx-gfm',
     '@storybook/addon-interactions',
   ],

react/.storybook/preview.tsx

@@ -4,7 +4,7 @@ import 'inter-ui/inter.css'
 import { Decorator } from '@storybook/react'
 
 import { ThemeProvider } from '../src/theme'
-import { withThemeFromJSXProvider } from '@storybook/addon-styling'
+import { withThemeFromJSXProvider } from '@storybook/addon-themes'
 
 import { StorybookTheme } from './themes'
 import { THEME_MAP } from './colorThemes'

react/CHANGELOG.md

@@ -4,13 +4,67 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v1.9.0](https://github.com/opengovsg/design-system/compare/v1.8.0...v1.9.0)
+
+- fix: remove `pattern` prop on datepickers, add `experimental_forceIosNumberKeyboard` prop to trigger it instead [`#543`](https://github.com/opengovsg/design-system/pull/543)
+- fix: type button and refactor SectionWrapper [`#518`](https://github.com/opengovsg/design-system/pull/518)
+- chore(react-readme): point to updated Storybook URL [`#542`](https://github.com/opengovsg/design-system/pull/542)
+- fix(principles): correct wording, punc [`#540`](https://github.com/opengovsg/design-system/pull/540)
+- fix(welcome): FormSG -> OGP, rearrange text [`#541`](https://github.com/opengovsg/design-system/pull/541)
+- docs: correct path to theme.js [`#529`](https://github.com/opengovsg/design-system/pull/529)
+- chore(deps-dev): bump eslint-plugin-import in /react [`#538`](https://github.com/opengovsg/design-system/pull/538)
+- chore(deps-dev): bump @typescript-eslint/parser in /react [`#539`](https://github.com/opengovsg/design-system/pull/539)
+- chore(deps-dev): bump eslint-plugin-storybook in /react [`#537`](https://github.com/opengovsg/design-system/pull/537)
+- chore(deps-dev): bump eslint from 8.50.0 to 8.53.0 in /react [`#535`](https://github.com/opengovsg/design-system/pull/535)
+- chore(deps-dev): bump esbuild from 0.19.2 to 0.19.5 in /react [`#536`](https://github.com/opengovsg/design-system/pull/536)
+- fix(deps): bump react-virtuoso from 4.6.1 to 4.6.2 in /react [`#534`](https://github.com/opengovsg/design-system/pull/534)
+- fix(deps): bump @swc/core-linux-x64-gnu from 1.3.91 to 1.3.95 in /react [`#533`](https://github.com/opengovsg/design-system/pull/533)
+- chore(deps-dev): bump @typescript-eslint/parser in /react [`#532`](https://github.com/opengovsg/design-system/pull/532)
+- fix(deps): bump @floating-ui/react from 0.25.4 to 0.26.1 in /react [`#531`](https://github.com/opengovsg/design-system/pull/531)
+- chore(deps-dev): bump @types/country-flag-icons in /react [`#530`](https://github.com/opengovsg/design-system/pull/530)
+- chore(deps-dev): bump @types/react-input-mask in /react [`#528`](https://github.com/opengovsg/design-system/pull/528)
+- chore(deps-dev): bump vite-plugin-turbosnap in /react [`#527`](https://github.com/opengovsg/design-system/pull/527)
+- chore(deps-dev): bump @typescript-eslint/parser in /react [`#526`](https://github.com/opengovsg/design-system/pull/526)
+- chore(deps-dev): bump vite from 4.4.11 to 4.5.0 in /react [`#524`](https://github.com/opengovsg/design-system/pull/524)
+- fix(deps): bump libphonenumber-js from 1.10.47 to 1.10.48 in /react [`#525`](https://github.com/opengovsg/design-system/pull/525)
+- fix(deps): bump @babel/traverse from 7.23.0 to 7.23.2 in /react [`#523`](https://github.com/opengovsg/design-system/pull/523)
+- fix(deps): bump nanoid from 3.3.6 to 5.0.2 in /react [`#522`](https://github.com/opengovsg/design-system/pull/522)
+- fix(deps): bump react-virtuoso from 4.5.1 to 4.6.1 in /react [`#521`](https://github.com/opengovsg/design-system/pull/521)
+- chore(deps-dev): bump tsc-alias from 1.8.7 to 1.8.8 in /react [`#520`](https://github.com/opengovsg/design-system/pull/520)
+- chore(deps-dev): bump eslint-plugin-prettier in /react [`#519`](https://github.com/opengovsg/design-system/pull/519)
+- chore(deps-dev): bump @vitejs/plugin-react from 4.0.2 to 4.1.0 in /react [`#516`](https://github.com/opengovsg/design-system/pull/516)
+- chore(deps-dev): bump @typescript-eslint/eslint-plugin in /react [`#515`](https://github.com/opengovsg/design-system/pull/515)
+- chore(deps-dev): bump @types/react-dom from 18.2.8 to 18.2.11 in /react [`#514`](https://github.com/opengovsg/design-system/pull/514)
+- fix(deps): bump libphonenumber-js from 1.10.44 to 1.10.47 in /react [`#513`](https://github.com/opengovsg/design-system/pull/513)
+- chore(deps-dev): bump vite from 4.4.8 to 4.4.11 in /react [`#512`](https://github.com/opengovsg/design-system/pull/512)
+- chore(deps-dev): bump postcss from 8.4.27 to 8.4.31 in /react [`#511`](https://github.com/opengovsg/design-system/pull/511)
+- fix(deps): bump @swc/core-linux-x64-gnu from 1.3.83 to 1.3.91 in /react [`#510`](https://github.com/opengovsg/design-system/pull/510)
+- chore(deps-dev): bump rimraf from 5.0.1 to 5.0.5 in /react [`#509`](https://github.com/opengovsg/design-system/pull/509)
+- fix(deps): bump react-textarea-autosize from 8.5.2 to 8.5.3 in /react [`#507`](https://github.com/opengovsg/design-system/pull/507)
+- chore(deps-dev): bump @types/react-dom from 18.2.7 to 18.2.8 in /react [`#506`](https://github.com/opengovsg/design-system/pull/506)
+- fix(deps): bump @fontsource/ibm-plex-mono from 5.0.5 to 5.0.8 in /react [`#505`](https://github.com/opengovsg/design-system/pull/505)
+- chore(deps-dev): bump eslint from 8.49.0 to 8.50.0 in /react [`#504`](https://github.com/opengovsg/design-system/pull/504)
+- chore(deps-dev): bump @typescript-eslint/eslint-plugin in /react [`#503`](https://github.com/opengovsg/design-system/pull/503)
+- chore(deps-dev): bump prettier from 3.0.2 to 3.0.3 in /react [`#502`](https://github.com/opengovsg/design-system/pull/502)
+- feat: update and freeze storybook packages [`#499`](https://github.com/opengovsg/design-system/pull/499)
+- feat(tile): allow style overrides [`#494`](https://github.com/opengovsg/design-system/pull/494)
+- chore: merge v1.8.0 back to main [`#489`](https://github.com/opengovsg/design-system/pull/489)
+- chore(deps-dev): bump @types/react-dom from 18.2.4 to 18.2.7 in /react [`#493`](https://github.com/opengovsg/design-system/pull/493)
+- chore(deps-dev): bump typescript from 5.1.6 to 5.2.2 in /react [`#491`](https://github.com/opengovsg/design-system/pull/491)
+- fix(deps): bump @floating-ui/react from 0.25.2 to 0.25.4 in /react [`#490`](https://github.com/opengovsg/design-system/pull/490)
+- chore(deps-dev): bump eslint from 8.48.0 to 8.49.0 in /react [`#492`](https://github.com/opengovsg/design-system/pull/492)
+- build: release v1.8.0 [`#488`](https://github.com/opengovsg/design-system/pull/488)
+
 #### [v1.8.0](https://github.com/opengovsg/design-system/compare/v1.7.0...v1.8.0)
 
+> 19 September 2023
+
 - feat(attachment): correctly set default args in story [`#487`](https://github.com/opengovsg/design-system/pull/487)
 - feat(theme): use `utility.ui` token instead of hardcoding "white" [`#485`](https://github.com/opengovsg/design-system/pull/485)
 - fix(deps)!: bump react-dropzone from 11.7.1 to 14.2.3 in /react [`#314`](https://github.com/opengovsg/design-system/pull/314)
 - chore: merge v1.7.0 back to main [`#484`](https://github.com/opengovsg/design-system/pull/484)
 - build: release v1.7.0 [`#483`](https://github.com/opengovsg/design-system/pull/483)
+- build: release v1.8.0 [`5873ee6`](https://github.com/opengovsg/design-system/commit/5873ee696a820c99b4dba4d9a2a336ba160c8542)
 
 #### [v1.7.0](https://github.com/opengovsg/design-system/compare/v1.6.0...v1.7.0)
 

react/README.md

@@ -2,7 +2,7 @@
 
 This design system extends from the wonderful [Chakra UI library](https://github.com/chakra-ui/chakra-ui).
 
-The available components can be viewed at our [Storybook](https://design.hack.gov.sg)
+The available components can be viewed at our [Storybook](https://design.open.gov.sg)
 
 ## Installing the design system
 
@@ -80,7 +80,7 @@ npx @chakra-ui/cli tokens <path/to/your/theme.(js|ts)>
 If generating for the base design system:
 
 ```bash
-npx chakra-cli tokens node_modules/@opengovsg/design-system-react/build/theme/theme.js
+npx chakra-cli tokens node_modules/@opengovsg/design-system-react/build/main/theme/theme.js
 ```
 
 > Note 🚨: If you delete the node_modules directory, you'll need to re-run the command to get proper typings again.
@@ -89,7 +89,7 @@ For convenience, you can add a postinstall script to your package.json, so you d
 
 ```json
 "scripts": {
-  "gen:theme-typings": "chakra-cli tokens node_modules/@opengovsg/design-system-react/build/theme/theme.js",
+  "gen:theme-typings": "chakra-cli tokens node_modules/@opengovsg/design-system-react/build/main/theme/theme.js",
   "postinstall": "npm run gen:theme-typings"
 }
 ```