@amsterdam/design-system-react 0.1.5 → 0.1.7

package/README.md

@@ -4,7 +4,7 @@
 
 The `@amsterdam/design-system-react` package contains React implementations of various components. You can use this package in React apps.
 
-The design tokens used in these components are published in a separate npm package, so don't forget to install and include `@amsterdam/design-system-tokens` too.
+The design tokens and css used in these components are published in separate npm packages, so don't forget to install and include `@amsterdam/design-system-tokens` and `@amsterdam/design-system-css` too.
 
 <!-- TODO: make this easier? -->
 
@@ -20,7 +20,7 @@ Make sure you specify the exact version as dependency, so you can schedule to up
 
 Install the packages you need, for instance:
 
-`npm install @amsterdam/design-system-react @amsterdam/design-system-tokens @amsterdam/design-system-assets`
+`npm install @amsterdam/design-system-react @amsterdam/design-system-tokens @amsterdam/design-system-assets @amsterdam/design-system-css`
 
 Import the packages you need.
 
@@ -29,6 +29,7 @@ import { Paragraph } from "@amsterdam/design-system-react";
 
 import "@amsterdam/design-system-tokens/dist/root.css";
 import "@amsterdam/design-system-assets/font/index.css";
+import "@amsterdam/design-system-css/dist/index.css";
 
 function App() {
   return <Paragraph>Hello world</Paragraph>;
@@ -36,19 +37,3 @@ function App() {
 
 export default App;
 ```
-
-## Unstyled components
-
-If you need unstyled React components (if you completely want to restyle them yourself, or you can't use style injection in your project because of a strict CSP for example), you can import these as well.
-
-For example, to import an unstyled Paragraph component:
-
-```javascript
-import { Paragraph } from "@amsterdam/design-system-react/unstyled";
-```
-
-If you do want to style unstyled React components using our css, you can add the component css from our `@amsterdam/design-system-css` package, like so:
-
-```javascript
-import "@amsterdam/design-system-css/dist/paragraph/paragraph.css";
-```

package/dist/Alert/Alert.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+export interface AlertProps extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
+    title?: string;
+    severity?: undefined | 'error' | 'success';
+    closeable?: boolean;
+    icon?: boolean;
+    onClose?: () => void;
+}
+export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;

package/dist/Alert/index.d.ts

@@ -0,0 +1,2 @@
+export { Alert } from './Alert';
+export type { AlertProps } from './Alert';

package/dist/AspectRatio/AspectRatio.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export type Ratio = 'extra-tall' | 'tall' | 'square' | 'wide' | 'extra-wide';
+export interface AspectRatioProps extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
+    ratio?: Ratio;
+}
+export declare const AspectRatio: import("react").ForwardRefExoticComponent<AspectRatioProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/AspectRatio/AspectRatio.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/AspectRatio/index.d.ts

@@ -0,0 +1,2 @@
+export { AspectRatio } from './AspectRatio';
+export type { AspectRatioProps, Ratio } from './AspectRatio';