@bonniernews/dn-design-system-web - npm Package Compare versions

Comparing version 30.0.0 to 30.1.0

components/modal/README.md

@@ -1,48 +0,35 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/modal](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/modal)
-- Storybook: [Modal](https://designsystem.dn.se/?path=/docs/basic-modal--docs)
-- Storybook (Latest): [Modal](https://designsystem-latest.dn.se/?path=/docs/basic-modal--docs)
+Modal
+=====
 
-----
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/Modal](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/modal)
+*   Storybook: [Modal](https://designsystem.dn.se/?path=/docs/basic-modal--docs)
 
-# Modal
+The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/modal/modal.scss'`
 
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| title | Title in modal<br />string | \- |
+| modalType | Appearance of the modal<br />"standard", "sheet" | "standard" |
+| primaryButton | Object with text, href (optional), classNames (optional) and attributes (optional)<br />ButtonStandardProps | \- |
+| secondaryButton | Object with text, href (optional), classNames (optional) and attributes (optional). Set isCloseButton to true if you wanna close modal with this button<br />ButtonStandardProps & { isCloseButton?: boolean; } | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { data-prop: value }<br />object | \- |
+| forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | \- |
+| children | Content to show in the modal as preact components<br />ComponentChildren | \- |
 
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-| title | String | no | | | Title in modal |
-| primaryButton | Object | no | text | | Object with text, href (optional), classNames (optional) and attributes (optional) |
-| secondaryButton | Object | no | text | | Object with text, href (optional), classNames (optional) and attributes (optional). Set isCloseButton to true if you wanna close modal with this button |
-| classNames | String | no | | | Ex. "my-special-class" |
-| attributes | Object | no | | | Ex. { data-prop: value } |
-| forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
-
-## Minimum requirement example
-
-These are copy paste friendly examples to quickliy get started using a component.
-
-### Nunjucks
-
-```javascript
-{% from '@bonniernews/dn-design-system-web/components/modal/modal.njk' import Modal %}
-
-{% call Modal({title: "Rubrik", primaryButton: { text: "Text i knapp", href: "ww.url.se" }, secondaryButton: { text: "Text i knapp", isCloseButton: true } }) %}
-  <p>Text i modalen</p>
-{% endcall %}
-```
-
-### Scss
-
-```scss
-@use "@bonniernews/dn-design-system-web/components/modal/modal";
-```
-
-### Javascript
-
-```javascript
-import { initModal, openModal } from '@bonniernews/dn-design-system-web/components/modal/modal.js'
-const modalEl = document.querySelector(".ds-modal");
-initModal(modalEl);
-openModal(modalEl);
-```
+```jsx
+<Modal
+  primaryButton={{
+    href: 'www.dn.se',
+    text: 'Ja, logga ut'
+  }}
+  secondaryButton={{
+    isCloseButton: true,
+    text: 'Avbryt'
+  }}
+  title="Är du säker på att du vill logga ut?"
+>
+  <p>
+    DN är bäst i inloggat läge - som inloggad prenumerant har du obegränsad läsning på dn.se och tillgång till flera smarta funktioner.  </p>
+</Modal>
+```

package.json

 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "30.0.0",
+  "version": "30.1.0",
   "description": "DN design system for web.",
@@ -5,0 +5,0 @@ "type": "module",

No alert changes

Improved metrics

Total package byte prevSize

2262489

increased by4.18%

Number of package files

523

increased by0.77%

Lines of code

5099

increased by5.85%

No dependency changes