@volvo-cars/ced-os-react-components - npm Package Compare versions

Comparing version 0.3.0-alpha.28 to 0.3.0-alpha.29

es/render/configUtils.js

@@ -8,3 +8,3 @@ /**
     return children?.map((child) => {
-        if (child.type === 'title') {
+        if (child.type === 'title' && !child.level) {
             return { ...child, level };
@@ -11,0 +11,0 @@ }

es/render/createRenderer.js

 import React from 'react';
 import { generateKey, hasContent, isNotIgnored } from './renderUtils';
+import { filterDataAttributes } from '../utils/filterDataAttributes';
 /*
@@ -67,8 +68,3 @@ * Renders the article with an atomic approach.
         // Passes data attributes on to the component
-        const dataAttrs = Object.keys(data)
-            .filter((key) => /^data-/.test(key))
-            .reduce((acc, key) => {
-            acc[key] = data[key];
-            return acc;
-        }, {});
+        const dataAttrs = filterDataAttributes(data);
         const props = {
@@ -75,0 +71,0 @@ ...config.props,

es/support/atoms/Caption/index.d.ts

 /// <reference types="react" />
 import { PropsWithChildren } from '../../../types';
 /**
- * The element <caption> is a textual caption for a graphic.
+ * The VOICE element <caption> is a textual caption for a graphic.
  * Parent elements: <leading-image> <figure>
@@ -6,0 +6,0 @@ */

es/support/atoms/Caption/index.js

 import { Text } from 'vcc-ui';
 import React from 'react';
 /**
- * The element <caption> is a textual caption for a graphic.
+ * The VOICE element <caption> is a textual caption for a graphic.
  * Parent elements: <leading-image> <figure>
@@ -6,0 +6,0 @@ */

es/support/atoms/DisplayDbText/index.d.ts

 /// <reference types="react" />
 import { PropsWithChildren } from '../../../types';
 /**
- * The element <display-db> is used for menu entries as texts from the display-text data-base.
+ * The VOICE element <display-db> is used for menu entries as texts from the display-text data-base.
  */
 declare function DisplayDbText({ extend, ...props }: PropsWithChildren): JSX.Element;
 export { DisplayDbText };

es/support/atoms/DisplayDbText/index.js

@@ -5,3 +5,3 @@ import { useTheme } from 'vcc-ui';
 /**
- * The element <display-db> is used for menu entries as texts from the display-text data-base.
+ * The VOICE element <display-db> is used for menu entries as texts from the display-text data-base.
  */
@@ -8,0 +8,0 @@ function DisplayDbText({ extend, ...props }) {

es/support/atoms/DisplayText/index.d.ts

 /// <reference types="react" />
 import { PropsWithChildren } from '../../../types';
 /**
- * The element <display-text> is used for menu entries and other display text (without an automatic link to the display-text database).
+ * The VOICE element <display-text> is used for menu entries and other display text (without an automatic link to the display-text database).
  *
@@ -6,0 +6,0 @@ */

es/support/atoms/DisplayText/index.js

@@ -5,3 +5,3 @@ import { useTheme } from 'vcc-ui';
 /**
- * The element <display-text> is used for menu entries and other display text (without an automatic link to the display-text database).
+ * The VOICE element <display-text> is used for menu entries and other display text (without an automatic link to the display-text database).
  *
@@ -8,0 +8,0 @@ */

es/support/atoms/Figure/index.d.ts

 /// <reference types="react" />
 import { PropsWithExtendAndChildren } from '../../../types';
 /**
- * The element <figure> is used for <img> images with optional <caption>, <legend> and <imagemap>.
+ * The VOICE element <figure> is used for <img> images with optional <caption>, <legend> and <imagemap>.
  * Various attributes allows to control the position and layout of the image in the (print) layout.
@@ -6,0 +6,0 @@ */

es/support/atoms/Figure/index.js

@@ -9,3 +9,3 @@ import { View } from 'vcc-ui';
 /**
- * The element <figure> is used for <img> images with optional <caption>, <legend> and <imagemap>.
+ * The VOICE element <figure> is used for <img> images with optional <caption>, <legend> and <imagemap>.
  * Various attributes allows to control the position and layout of the image in the (print) layout.
@@ -12,0 +12,0 @@ */

es/support/atoms/Img/index.d.ts

@@ -9,3 +9,3 @@ /// <reference types="react" />
 /**
- * The element <img> is a reference element for a graphic.
+ * The VOICE element <img> is a reference element for a graphic.
  *
@@ -12,0 +12,0 @@ */

es/support/atoms/Img/index.js

 import { Block } from 'vcc-ui';
 import React from 'react';
 /**
- * The element <img> is a reference element for a graphic.
+ * The VOICE element <img> is a reference element for a graphic.
  *
@@ -6,0 +6,0 @@ */

es/support/atoms/LiteralText/index.d.ts

 /// <reference types="react" />
 import { PropsWithChildren } from '../../../types';
 /**
- * The element <literal> is used to markup literal text.
+ * The VOICE element <literal> is used to markup literal text.
  */
 declare function LiteralText(props: PropsWithChildren): JSX.Element;
 export { LiteralText };

es/support/atoms/LiteralText/index.js

 import { InlineText } from '../InlineText';
 import React from 'react';
 /**
- * The element <literal> is used to markup literal text.
+ * The VOICE element <literal> is used to markup literal text.
  */
@@ -6,0 +6,0 @@ function LiteralText(props) {

es/support/atoms/NonBreakingText/index.d.ts

 /// <reference types="react" />
 import { PropsWithExtendAndChildren } from '../../../types';
 /**
- * The element <nb.text> is used to markup non-breaking text. The line break in this ele- ment is avoided.
+ * The VOICE element <nb.text> is used to markup non-breaking text. The line break in this ele- ment is avoided.
  */
 declare function NonBreakingText({ extend, ...props }: PropsWithExtendAndChildren): JSX.Element;
 export { NonBreakingText };

es/support/atoms/NonBreakingText/index.js

 import { InlineText } from '../InlineText';
 import React from 'react';
 /**
- * The element <nb.text> is used to markup non-breaking text. The line break in this ele- ment is avoided.
+ * The VOICE element <nb.text> is used to markup non-breaking text. The line break in this ele- ment is avoided.
  */
@@ -6,0 +6,0 @@ function NonBreakingText({ extend, ...props }) {

es/support/atoms/OrderedList/index.d.ts

@@ -7,5 +7,5 @@ /// <reference types="react" />
 /**
- * The element <ol> is used for ordered lists. The list type can be addressed with different values (123 | ABC | abc) for the listtype attribute
+ * The VOICE element <ol> is used for ordered lists. The list type can be addressed with different values (123 | ABC | abc) for the listtype attribute
  */
 declare function OrderedList({ listtype, extend, ...props }: OrderedListProps): JSX.Element;
 export { OrderedList };

es/support/atoms/OrderedList/index.js

 import { ListRoot } from '../ListRoot';
 import React from 'react';
 /**
- * The element <ol> is used for ordered lists. The list type can be addressed with different values (123 | ABC | abc) for the listtype attribute
+ * The VOICE element <ol> is used for ordered lists. The list type can be addressed with different values (123 | ABC | abc) for the listtype attribute
  */
@@ -6,0 +6,0 @@ function OrderedList({ listtype, extend, ...props }) {

es/support/atoms/Paragraph/index.d.ts

 /// <reference types="react" />
 import { PropsWithExtendAndChildren } from '../../../types';
 /**
- * The element <p> is used for various paragraphs in various parent elements.
+ * The VOICE element <p> is used for various paragraphs in various parent elements.
  */
 declare function Paragraph({ extend, ...props }: PropsWithExtendAndChildren): JSX.Element;
 export { Paragraph };

es/support/atoms/Paragraph/index.js

 import { Text } from 'vcc-ui';
 import React from 'react';
 /**
- * The element <p> is used for various paragraphs in various parent elements.
+ * The VOICE element <p> is used for various paragraphs in various parent elements.
  */
@@ -6,0 +6,0 @@ function Paragraph({ extend, ...props }) {

es/support/atoms/StringsProvider/index.d.ts

 import { ProviderProps } from 'react';
+import { defaultStrings } from './defaultStrings';
 declare const StringsProvider: ({ value, ...props }: ProviderProps<any>) => JSX.Element;
@@ -7,2 +8,3 @@ declare const useStrings: () => {
 };
-export { StringsProvider, useStrings };
+declare type StringsProviderValue = typeof defaultStrings;
+export { StringsProvider, useStrings, StringsProviderValue };

es/support/atoms/Symbol/index.d.ts

@@ -8,5 +8,5 @@ /// <reference types="react" />
 /**
- * The element <symbol> is a reference element for an inline graphic in a paragraph.
+ * The VOICE element <symbol> is a reference element for an inline graphic in a paragraph.
  */
 declare function Symbol({ src, alt, extend }: SymbolProps): JSX.Element;
 export { Symbol };

es/support/atoms/Symbol/index.js

 import { Inline } from 'vcc-ui';
 import React from 'react';
 /**
- * The element <symbol> is a reference element for an inline graphic in a paragraph.
+ * The VOICE element <symbol> is a reference element for an inline graphic in a paragraph.
  */
@@ -6,0 +6,0 @@ function Symbol({ src, alt = '', extend }) {

es/support/atoms/Title/index.d.ts

@@ -7,5 +7,5 @@ /// <reference types="react" />
 /**
- * The element <title> is used for various titles.
+ * The VOICE element <title> is used for various titles.
  */
 declare function Title({ level, children, extend, ...props }: TitleProps): JSX.Element;
 export { Title };

es/support/atoms/Title/index.js

@@ -16,3 +16,3 @@ import { Text } from 'vcc-ui';
 /**
- * The element <title> is used for various titles.
+ * The VOICE element <title> is used for various titles.
  */
@@ -19,0 +19,0 @@ function Title({ level, children, extend, ...props }) {

es/support/atoms/UnorderedList/index.d.ts

 /// <reference types="react" />
 import { ViewProps } from 'vcc-ui';
 /**
- * The element <ul> is used for unordered lists.
+ * The VOICE element <ul> is used for unordered lists.
  */
 declare function UnorderedList(props: ViewProps): JSX.Element;
 export { UnorderedList };

es/support/atoms/UnorderedList/index.js

 import { ListRoot } from '../ListRoot';
 import React from 'react';
 /**
- * The element <ul> is used for unordered lists.
+ * The VOICE element <ul> is used for unordered lists.
  */
@@ -6,0 +6,0 @@ function UnorderedList(props) {

es/support/atoms/UrlText/index.js

 import React from 'react';
-import { Text } from 'vcc-ui';
+import { Click, Text } from 'vcc-ui';
 /**
@@ -7,4 +7,4 @@ * The inline element <url> is used for formatting urls.
 function UrlText({ href, ...props }) {
-    return (React.createElement(Text, { as: 'a', subStyle: 'inline-link', href: href, ...props }));
+    return React.createElement(Text, { as: Click, subStyle: 'inline-link', href: href, ...props });
 }
 export { UrlText };

es/support/molecules/Footnote/index.d.ts

 /// <reference types="react" />
 import { PropsWithChildren } from '../../../types';
 /**
- * The element <fn> is used for footnotes.
- * The element <fn.p> is used for text paragraphs in footnotes.
- * The element <fn.xref> is used for cross-references/hyperlinks for footnotes, e.g. if the same footnote text is required at multiple positions in the text (in tables)..
+ * The VOICE element <fn> is used for footnotes.
+ * The VOICE element <fn.p> is used for text paragraphs in footnotes.
+ * The VOICE element <fn.xref> is used for cross-references/hyperlinks for footnotes, e.g. if the same footnote text is required at multiple positions in the text (in tables)..
  * The link-target has to be a <fn> element. Element validities are possible for <fn.xref>.
@@ -8,0 +8,0 @@ */

es/support/molecules/Footnote/index.js

@@ -5,5 +5,5 @@ import React from 'react';
 /**
- * The element <fn> is used for footnotes.
- * The element <fn.p> is used for text paragraphs in footnotes.
- * The element <fn.xref> is used for cross-references/hyperlinks for footnotes, e.g. if the same footnote text is required at multiple positions in the text (in tables)..
+ * The VOICE element <fn> is used for footnotes.
+ * The VOICE element <fn.p> is used for text paragraphs in footnotes.
+ * The VOICE element <fn.xref> is used for cross-references/hyperlinks for footnotes, e.g. if the same footnote text is required at multiple positions in the text (in tables)..
  * The link-target has to be a <fn> element. Element validities are possible for <fn.xref>.
@@ -10,0 +10,0 @@ */

es/support/molecules/PImg/index.d.ts

 /// <reference types="react" />
 import { PropsWithChildren } from '../../../types';
 /**
- * The element <p.img> is used to group one or more <img> images with optional text in <p> elements.
+ * The VOICE element <p.img> is used to group one or more <img> images with optional text in <p> elements.
  * Child elements: <p> <img>
@@ -6,0 +6,0 @@ */

es/support/molecules/PImg/index.js

@@ -5,3 +5,3 @@ import { Block, useTheme, View } from 'vcc-ui';
 /**
- * The element <p.img> is used to group one or more <img> images with optional text in <p> elements.
+ * The VOICE element <p.img> is used to group one or more <img> images with optional text in <p> elements.
  * Child elements: <p> <img>
@@ -8,0 +8,0 @@ */

es/support/molecules/Video/index.d.ts

@@ -9,5 +9,5 @@ /// <reference types="react" />
 /**
- * The element <video> is a reference element for a video.
+ * The VOICE element <video> is a reference element for a video.
  */
 declare function Video({ poster, src, ratio }: VideoProps): JSX.Element;
 export { Video };

es/support/molecules/Video/index.js

@@ -5,3 +5,3 @@ import { Block } from 'vcc-ui';
 /**
- * The element <video> is a reference element for a video.
+ * The VOICE element <video> is a reference element for a video.
  */
@@ -8,0 +8,0 @@ function Video({ poster, src, ratio = '16:9' }) {

es/support/organisms/JSONArticle/index.d.ts

 /// <reference types="react" />
+import { StringsProviderValue } from '../../atoms/StringsProvider';
 import { JSONArticleData, JSONNode } from '../../../render/types';
@@ -6,5 +7,5 @@ interface JSONArticleProps {
     metaSlot?: JSX.Element;
-    strings?: any;
+    strings?: StringsProviderValue;
 }
-declare function JSONArticle({ data, metaSlot, strings, ...props }: JSONArticleProps): JSX.Element | null;
+declare function JSONArticle({ data, metaSlot, strings, ...dataProps }: JSONArticleProps): JSX.Element | null;
 export { JSONArticle };

es/support/organisms/JSONArticle/index.js

 /**
+ * The JSONArticle is the main entrypoint for rendering article JSON data.
+ *
  * The render function traverses the whole JSON data and maps it to a tree of React components.
- *
- * Mapping of `type` to component happens centralized in the jsonArticleRenderer
+ * Mapping of `type` to component happens centralized in the render function based on definitions in RENDER_CONFIG.
  */
 import React from 'react';
-import { StringsProvider } from '../../atoms/StringsProvider';
+import { StringsProvider, } from '../../atoms/StringsProvider';
 import { createRenderer } from '../../../render/createRenderer';
 import { RENDER_CONFIG } from '../../../render/config';
 import { injectSlotAfter } from '../../../render/slots';
+import { filterDataAttributes } from '../../../utils/filterDataAttributes';
+import { ensureJSONNodeFormat } from '../../../utils/ensureJSONNodeFormat';
 const render = createRenderer(RENDER_CONFIG);
-function JSONArticle({ data, metaSlot, strings = {}, ...props }) {
+function JSONArticle({ data, metaSlot, strings, ...dataProps }) {
     if (!data)
         return null;
     let article;
-    if (data?.type) {
-        if (metaSlot) {
-            article = render(injectSlotAfter(data, 'titleContent', metaSlot));
-        }
-        else {
-            article = render(data);
-        }
+    const jsonNode = ensureJSONNodeFormat({
+        ...data,
+        ...filterDataAttributes(dataProps),
+    });
+    if (metaSlot) {
+        article = render(injectSlotAfter(jsonNode, 'titleContent', metaSlot));
     }
     else {
-        const articleData = data;
-        article = render({
-            type: 'article',
-            ...props,
-            children: [
-                {
-                    type: 'titleContent',
-                    children: articleData.title,
-                },
-                {
-                    type: 'slot',
-                    value: metaSlot,
-                },
-                {
-                    type: 'descriptionContent',
-                    children: articleData.description,
-                },
-                ...articleData.body,
-            ],
-        });
+        article = render(jsonNode);
     }
@@ -46,0 +29,0 @@ return React.createElement(StringsProvider, { value: strings }, article);

lib/ced-os-react-components.cjs.js

@@ -851,3 +851,3 @@ var __create = Object.create;
   return /* @__PURE__ */ import_react42.default.createElement(import_vcc_ui27.Text, __spreadValues({
-    as: "a",
+    as: import_vcc_ui27.Click,
     subStyle: "inline-link",
@@ -1047,2 +1047,8 @@ href
 
+// src/utils/filterDataAttributes.ts
+var filterDataAttributes = (data) => Object.keys(data).filter((key) => /^data-/.test(key)).reduce((acc, key) => {
+  acc[key] = data[key];
+  return acc;
+}, {});
+
 // src/render/createRenderer.tsx
@@ -1091,6 +1097,3 @@ var createRenderer = (componentMappings) => {
     const type = config.type;
-    const dataAttrs = Object.keys(data).filter((key) => /^data-/.test(key)).reduce((acc, key) => {
-      acc[key] = data[key];
-      return acc;
-    }, {});
+    const dataAttrs = filterDataAttributes(data);
     const props = __spreadValues(__spreadValues({}, config.props), dataAttrs);
@@ -1117,3 +1120,3 @@ if (data.nodeId && !props.id) {
   return children == null ? void 0 : children.map((child) => {
-    if (child.type === "title") {
+    if (child.type === "title" && !child.level) {
       return __spreadProps(__spreadValues({}, child), { level });
@@ -1364,28 +1367,11 @@ } else
 
-// src/support/organisms/JSONArticle/index.tsx
-var render = createRenderer(RENDER_CONFIG);
-function JSONArticle(_a) {
-  var _b = _a, {
-    data,
-    metaSlot,
-    strings = {}
-  } = _b, props = __objRest(_b, [
-    "data",
-    "metaSlot",
-    "strings"
-  ]);
-  if (!data)
-    return null;
-  let article;
+// src/utils/ensureJSONNodeFormat.ts
+var ensureJSONNodeFormat = (data) => {
+  let jsonNode;
   if (data == null ? void 0 : data.type) {
-    if (metaSlot) {
-      article = render(injectSlotAfter(data, "titleContent", metaSlot));
-    } else {
-      article = render(data);
-    }
+    jsonNode = data;
   } else {
     const articleData = data;
-    article = render(__spreadProps(__spreadValues({
-      type: "article"
-    }, props), {
+    jsonNode = {
+      type: "article",
       children: [
@@ -1397,6 +1383,2 @@ {
         {
-          type: "slot",
-          value: metaSlot
-        },
-        {
           type: "descriptionContent",
@@ -1407,4 +1389,28 @@ children: articleData.description
       ]
-    }));
+    };
   }
+  return jsonNode;
+};
+
+// src/support/organisms/JSONArticle/index.tsx
+var render = createRenderer(RENDER_CONFIG);
+function JSONArticle(_a) {
+  var _b = _a, {
+    data,
+    metaSlot,
+    strings
+  } = _b, dataProps = __objRest(_b, [
+    "data",
+    "metaSlot",
+    "strings"
+  ]);
+  if (!data)
+    return null;
+  let article;
+  const jsonNode = ensureJSONNodeFormat(__spreadValues(__spreadValues({}, data), filterDataAttributes(dataProps)));
+  if (metaSlot) {
+    article = render(injectSlotAfter(jsonNode, "titleContent", metaSlot));
+  } else {
+    article = render(jsonNode);
+  }
   return /* @__PURE__ */ import_react56.default.createElement(StringsProvider, {
@@ -1411,0 +1417,0 @@ value: strings

lib/ced-os-react-components.esm.js

@@ -746,6 +746,6 @@ // src/support/atoms/InlineText/index.tsx
 import React42 from "react";
-import { Text as Text7 } from "vcc-ui";
+import { Click, Text as Text7 } from "vcc-ui";
 function UrlText({ href, ...props }) {
   return /* @__PURE__ */ React42.createElement(Text7, {
-    as: "a",
+    as: Click,
     subStyle: "inline-link",
@@ -804,3 +804,3 @@ href,
 // src/support/molecules/Tooltip/index.tsx
-import { Block as Block12, Card, CardContent, Click, Flex as Flex2 } from "vcc-ui";
+import { Block as Block12, Card, CardContent, Click as Click2, Flex as Flex2 } from "vcc-ui";
 import React46, { useCallback, useReducer } from "react";
@@ -821,3 +821,3 @@ function reducer(state, action) {
   const click = useCallback(() => dispatch({ type: "toggle" }), []);
-  return /* @__PURE__ */ React46.createElement(Click, {
+  return /* @__PURE__ */ React46.createElement(Click2, {
     onClick: click,
@@ -950,2 +950,8 @@ extend: { position: "relative", display: "inline" }
 
+// src/utils/filterDataAttributes.ts
+var filterDataAttributes = (data) => Object.keys(data).filter((key) => /^data-/.test(key)).reduce((acc, key) => {
+  acc[key] = data[key];
+  return acc;
+}, {});
+
 // src/render/createRenderer.tsx
@@ -995,6 +1001,3 @@ var createRenderer = (componentMappings) => {
     const type = config.type;
-    const dataAttrs = Object.keys(data).filter((key) => /^data-/.test(key)).reduce((acc, key) => {
-      acc[key] = data[key];
-      return acc;
-    }, {});
+    const dataAttrs = filterDataAttributes(data);
     const props = {
@@ -1024,3 +1027,3 @@ ...config.props,
   return children == null ? void 0 : children.map((child) => {
-    if (child.type === "title") {
+    if (child.type === "title" && !child.level) {
       return { ...child, level };
@@ -1273,24 +1276,11 @@ } else
 
-// src/support/organisms/JSONArticle/index.tsx
-var render = createRenderer(RENDER_CONFIG);
-function JSONArticle({
-  data,
-  metaSlot,
-  strings = {},
-  ...props
-}) {
-  if (!data)
-    return null;
-  let article;
+// src/utils/ensureJSONNodeFormat.ts
+var ensureJSONNodeFormat = (data) => {
+  let jsonNode;
   if (data == null ? void 0 : data.type) {
-    if (metaSlot) {
-      article = render(injectSlotAfter(data, "titleContent", metaSlot));
-    } else {
-      article = render(data);
-    }
+    jsonNode = data;
   } else {
     const articleData = data;
-    article = render({
+    jsonNode = {
       type: "article",
-      ...props,
       children: [
@@ -1302,6 +1292,2 @@ {
         {
-          type: "slot",
-          value: metaSlot
-        },
-        {
           type: "descriptionContent",
@@ -1312,4 +1298,27 @@ children: articleData.description
       ]
-    });
+    };
   }
+  return jsonNode;
+};
+
+// src/support/organisms/JSONArticle/index.tsx
+var render = createRenderer(RENDER_CONFIG);
+function JSONArticle({
+  data,
+  metaSlot,
+  strings,
+  ...dataProps
+}) {
+  if (!data)
+    return null;
+  let article;
+  const jsonNode = ensureJSONNodeFormat({
+    ...data,
+    ...filterDataAttributes(dataProps)
+  });
+  if (metaSlot) {
+    article = render(injectSlotAfter(jsonNode, "titleContent", metaSlot));
+  } else {
+    article = render(jsonNode);
+  }
   return /* @__PURE__ */ React55.createElement(StringsProvider, {
@@ -1316,0 +1325,0 @@ value: strings

package.json

 {
   "name": "@volvo-cars/ced-os-react-components",
-  "version": "0.3.0-alpha.28",
+  "version": "0.3.0-alpha.29",
   "description": "Set of components for developing UIs in the onboarding and support apps",
@@ -46,3 +46,3 @@ "keywords": [],
     "react-dom": ">=17.0.2",
-    "vcc-ui": ">=2.11.2"
+    "vcc-ui": ">=2.12.0"
   },
@@ -49,0 +49,0 @@ "devDependencies": {

README.md

@@ -1,10 +0,17 @@
-# Onboarding and Support Components
+# Support Web Components
 
-Following atomic design, this repository contains reusable react components based on VCCUI that
-are used to build onboarding, support and education web interfaces, sites and applications.
+This a component library based on [vcc-ui](https://vcc-ui.vercel.app) created to standardize the creation and 
+articulation of support article data provided via an API in JSON. Meaning when the new API provides content in JSON, 
+it will have a structure that maps to these components. That way the data from the backend will dictate the structure 
+and not the actual components. Although all components can and should be used where suitable also in other contexts.
 
 The components can be viewed in this [Storybook](https://volvo-cars.github.io/ced-onboarding-support-components)
 
+The component are organized based on the [Atomic design principles by Brad Frost](https://atomicdesign.bradfrost.com/chapter-2/).
+
+
 ## Development 
 
+
+
 ### Getting Started
@@ -60,2 +67,8 @@
 
+#### JSONArticle
+
+The main entrypoint 
+
+
+
 ```
@@ -62,0 +75,0 @@ // ...

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

184047

increased by1.53%

Number of package files

142

increased by2.9%

Lines of code

5089

increased by0.89%

Number of lines in readme file

85

increased by18.06%

Published versions last year

35

increased by6.06%

No dependency changes