@gyldendal/kobber-components - npm Package Compare versions

Comparing version 0.3.69 to 0.3.70

dist/react-ssr-safe/index.d.ts

 import { L as LinkProps, a as ListProps, b as ListItemProps } from '../Link.core-Cx2A5ben.js';
 import { A as AccordionProps } from '../Accordion.core-BALR9YOm.js';
-import { T as TextHighlightProps, H as HeadingProps, B as ButtonProps } from '../index.vanilla-js-HEMEpeDH.js';
+import { T as TextHighlightProps, H as HeadingProps, B as ButtonProps } from '../index.vanilla-js-C36Vp0Os.js';
 import * as React from 'react';
@@ -5,0 +5,0 @@ import '@gyldendal/kobber-base/themes/default/tokens.js';

dist/react-ssr-safe/index.js

@@ -11,5 +11,5 @@ import {
   TextWrapper
-} from "../chunks/chunk-DZQJTRUA.js";
-import "../chunks/chunk-3TEXWWJV.js";
-import "../chunks/chunk-M533GH2S.js";
+} from "../chunks/chunk-IXZQ7PKC.js";
+import "../chunks/chunk-QDR6LVVW.js";
+import "../chunks/chunk-HPRJCVIL.js";
 
@@ -16,0 +16,0 @@ // src/index.react-ssr-safe.tsx

dist/react/index.d.ts

 import * as _lit_react from '@lit/react';
 import { L as LinkProps, a as ListProps, b as ListItemProps } from '../Link.core-Cx2A5ben.js';
 import { A as AccordionProps } from '../Accordion.core-BALR9YOm.js';
-import { T as TextHighlightProps, H as HeadingProps, B as ButtonProps } from '../index.vanilla-js-HEMEpeDH.js';
+import { T as TextHighlightProps, H as HeadingProps, B as ButtonProps } from '../index.vanilla-js-C36Vp0Os.js';
 import * as React from 'react';
@@ -6,0 +6,0 @@ import { T as Theme, K as KobberElement, G as Grid, a as GridColumn, b as GridColumnAspectRatio, C as Checkbox, P as ProgressBar, c as ProgressBarItem, d as CardLayout, e as CardLayoutColumnAspectRatio, B as BoxLayout, f as Carousel, H as HorizontalLayout, g as HorizontalLayoutColumn } from '../HorizontalLayoutColumn-BIq5U4K0.js';

dist/react/index.js

@@ -11,3 +11,3 @@ import {
   TextWrapper
-} from "../chunks/chunk-DZQJTRUA.js";
+} from "../chunks/chunk-IXZQ7PKC.js";
 import {
@@ -31,7 +31,7 @@ BoxLayout,
   stringifyStyleObject
-} from "../chunks/chunk-RZCOMHSR.js";
-import "../chunks/chunk-3TEXWWJV.js";
+} from "../chunks/chunk-3LD46YTF.js";
+import "../chunks/chunk-QDR6LVVW.js";
 import {
   __decorateClass
-} from "../chunks/chunk-M533GH2S.js";
+} from "../chunks/chunk-HPRJCVIL.js";
 
@@ -38,0 +38,0 @@ // src/index.react.tsx

dist/vanilla/index.d.ts

@@ -1,2 +0,2 @@
-export { g as button, f as heading, e as textHighlight } from '../index.vanilla-js-HEMEpeDH.js';
+export { g as button, f as heading, e as textHighlight } from '../index.vanilla-js-C36Vp0Os.js';
 import '@gyldendal/kobber-base/themes/default/tokens.js';

dist/vanilla/index.js

@@ -5,3 +5,3 @@ import {
   TextHighlight_core_exports
-} from "../chunks/chunk-M533GH2S.js";
+} from "../chunks/chunk-HPRJCVIL.js";
 export {
@@ -8,0 +8,0 @@ Button_core_exports as button,

dist/web-components/index.d.ts

@@ -6,3 +6,3 @@ import * as lit from 'lit';
 export { B as BoxLayout, d as CardLayout, e as CardLayoutColumnAspectRatio, f as Carousel, C as Checkbox, G as Grid, a as GridColumn, H as HorizontalLayout, g as HorizontalLayoutColumn, P as ProgressBar, c as ProgressBarItem } from '../HorizontalLayoutColumn-BIq5U4K0.js';
-import { B as ButtonProps, a as ButtonColor, b as ButtonVariant, c as ButtonLevel, T as TextHighlightProps, d as TextHighlightColor, H as HeadingProps } from '../index.vanilla-js-HEMEpeDH.js';
+import { B as ButtonProps, a as ButtonColor, b as ButtonVariant, c as ButtonLevel, T as TextHighlightProps, d as TextHighlightColor, H as HeadingProps } from '../index.vanilla-js-C36Vp0Os.js';
 import '@lit/context';
@@ -9,0 +9,0 @@ import '@gyldendal/kobber-base/themes/dark/tokens';

dist/web-components/index.js

@@ -16,3 +16,3 @@ import {
   component_styles_default
-} from "../chunks/chunk-RZCOMHSR.js";
+} from "../chunks/chunk-3LD46YTF.js";
 import {
@@ -32,3 +32,3 @@ accordionClassNames,
   textWrapperStyles
-} from "../chunks/chunk-3TEXWWJV.js";
+} from "../chunks/chunk-QDR6LVVW.js";
 import {
@@ -41,3 +41,3 @@ __decorateClass,
   textHighlightName
-} from "../chunks/chunk-M533GH2S.js";
+} from "../chunks/chunk-HPRJCVIL.js";
 
@@ -44,0 +44,0 @@ // src/accordion/Accordion.ts

package.json

 {
   "name": "@gyldendal/kobber-components",
-  "version": "0.3.69",
+  "version": "0.3.70",
   "license": "MIT",
@@ -5,0 +5,0 @@ "type": "module",

README.md

@@ -73,6 +73,43 @@ # Component library
 
-After making a new component, do the following steps to expose it to the world:
+### Create components
 
+For maintainability, components should be created to consume data as children rather than props. By using props for all data, the amount of component props over time will grow unmaintanable. Most likely, you will end up with a component that needs to accept children components as props (while having to maintain possibly deprecated data props).
+
+Example of component consuming data as children:
+
+```
+<RadioGroup
+  label="Format"
+  onChange={(value) => setValue(value)}
+  currentValue={value}
+  direction="horizontal" // eller vertical
+>
+  <RadioInput group="format" label="Innbundet" {...}/>
+</RadioGroup>
+```
+
+Example of component consuming data as props:
+
+```
+<RadioGroup
+  label="Format"
+  group="format"
+  onChange={(value) => setValue(value)}
+  currentValue={value}
+  direction="horizontal" // eller vertical
+  options={[
+    { label: "Innbundet", value: "hardcover" },
+    { label: "Pocket", value: "pocket" },
+    { label: "Ebok", value: "ebook" },
+    { label: "Lydbok", value: "audiobook" }
+  ]}
+/>
+```
+
+### Publish components
+
+After creating a new component, do the following steps to expose it to the world:
+
 1. Export it from src/index.react.tsx and src/index.web-components.ts.
 2. Run `yarn build`.
 3. Commit changes, and publish according to [changeset](../../.changeset/README.md).

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

301781

increased by0.31%

Number of lines in readme file

115

increased by47.44%

Worsened metrics

Lines of code

7461

decreased by-0.05%

No dependency changes