@seamapi/react 1.6.0 → 1.8.0

package/README.md

@@ -74,6 +74,17 @@ or place the following in the `<head>` tag:
 <link rel="stylesheet" href="https://react.seam.co/v/1.0.0/index.min.css" />
 ```
 
+#### Customizing Styles
+
+> The `seam-` prefixed CSS class names are not part of the stable API and may change unexpectedly.
+
+Each component accepts a `className` prop.
+The class name will be set on the top level container, or if a sub-component is rendered, passed though.
+This makes them compatible with native CSS and most CSS-in-JS systems, e.g., [Emotion] and [styled-components].
+
+[Emotion]: https://emotion.sh/
+[styled-components]: https://styled-components.com/
+
 ### Fonts
 
 > Fonts are automatically included unless using `<SeamProvider disableFontInjection />`.
@@ -101,7 +112,7 @@ Then, load it from Google Fonts by placing the following in the `<head>` tag:
 When using the default provider settings, the components are compatible with this CSP:
 
 ```
-default-src 'self'; connect-src 'self' https://connect.getseam.com https://devicedb.seam.co; img-src 'self' https://connect.getseam.com https://seam.co https://www.seam.co https://devicedb.seam.co; font-src 'self' https://fonts.gstatic.com; style-src 'self' https://fonts.googleapis.com
+default-src 'self'; connect-src 'self' https://connect.getseam.com; img-src 'self' https://connect.getseam.com https://seam.co https://www.seam.co; font-src 'self' https://fonts.gstatic.com; style-src 'self' https://fonts.googleapis.com
 ```
 
 #### Granular CSP
@@ -112,16 +123,15 @@ By self hosting the styles and recommended fonts (or choosing not to use them),
 and proxying the Seam API endpoint, the components are compatible with this strict CSP:
 
 ```
-default-src 'self'; connect-src 'self' https://connect.getseam.com; img-src 'self' https://connect.getseam.com https://seam.co https://www.seam.co https://devicedb.seam.co
+default-src 'self'; img-src 'self' https://connect.getseam.com https://seam.co https://www.seam.co
 ```
 
-The `img-src` is required as some components display device images from the Seam API,
-and `connect-src` is required to use components that query the Seam Device Database.
+The `img-src` is required as some components display device images from the Seam API.
 
 When using the default endpoint, extend `connect-src` with
 
 ```
-connect-src 'self' https://connect.getseam.com https://devicedb.seam.co
+connect-src 'self' https://connect.getseam.com
 ```
 
 When serving the fonts from Google Fonts, include `font-src` and `style-src` with
@@ -227,6 +237,9 @@ Edit the seed data for the fake or find relevant ids for testing components here
 - [Storybook fake seed](./.storybook/seed-fake.js).
 - [Jest test fake seed](./test/jest/global-setup.cjs).
 
+> Note that the Chromatic tests use the fake seed data on the main branch, not the Vercel Preview Deployment.
+> To review UI changes with new seed data, update the seed data on the main branch first.
+
 ### Previews
 
 Every pull request deploys the Storybook with the examples