@volvo-cars/ced-os-react-components
Advanced tools
Comparing version 1.0.0-alpha.12 to 1.0.0-alpha.13
555
lib/index.js
@@ -1,45 +0,54 @@ | ||
// src/utils/classNames.ts | ||
var classNames = (...args) => Array.from(new Set(args)).filter((value) => typeof value === "string").join(" "); | ||
// src/themes/ThemeProvider.tsx | ||
import { | ||
createContext, | ||
useContext | ||
} from "react"; | ||
// src/support/atoms/base/Block.css.ts | ||
var root = "Block_root__lyy09n0"; | ||
// src/themes/dcs-base-theme.css.ts | ||
var className = "dcs-base-theme"; | ||
// src/support/atoms/base/Block.tsx | ||
import { jsx } from "react/jsx-runtime"; | ||
var Block = ({ | ||
as: Element = "div", | ||
children, | ||
className: className2, | ||
...props | ||
}) => { | ||
return /* @__PURE__ */ jsx(Element, { | ||
className: classNames(root, className2), | ||
...props, | ||
// src/themes/ThemeProvider.tsx | ||
import { Fragment, jsx } from "react/jsx-runtime"; | ||
var themeClassNames = { | ||
volvo: "dcs-volvo-theme", | ||
polestar: "dcs-polestar-theme" | ||
}; | ||
var ThemeContext = createContext({}); | ||
var ThemeProvider = function({ | ||
theme, | ||
children | ||
}) { | ||
let className2 = className; | ||
if (theme) { | ||
className2 += ` ${themeClassNames[theme]}`; | ||
} | ||
return /* @__PURE__ */ jsx(ThemeContext.Provider, { | ||
value: { theme, className: className2 }, | ||
children | ||
}); | ||
}; | ||
var ThemeConsumer = ThemeContext.Consumer; | ||
var withOptionalThemeProvider = (component, theme) => theme ? /* @__PURE__ */ jsx(ThemeProvider, { | ||
theme, | ||
children: component | ||
}) : /* @__PURE__ */ jsx(Fragment, { | ||
children: component | ||
}); | ||
function useTheme() { | ||
return useContext(ThemeContext); | ||
} | ||
// src/support/atoms/Caption/Caption.css.ts | ||
var root2 = "Caption_root__wy97ze0"; | ||
// src/utils/classNames.ts | ||
var classNames = (...args) => Array.from(new Set(args)).filter((value) => typeof value === "string").join(" "); | ||
// src/support/atoms/Caption/index.tsx | ||
import { jsx as jsx2 } from "react/jsx-runtime"; | ||
function Caption({ className: className2, ...props }) { | ||
return /* @__PURE__ */ jsx2(Block, { | ||
as: "figcaption", | ||
className: classNames(root2, className2), | ||
...props | ||
}); | ||
} | ||
// src/support/ConfigProvider.tsx | ||
import { | ||
createContext, | ||
useContext | ||
createContext as createContext2, | ||
useContext as useContext2 | ||
} from "react"; | ||
import { Fragment, jsx as jsx3 } from "react/jsx-runtime"; | ||
var ConfigContext = createContext({}); | ||
import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime"; | ||
var ConfigContext = createContext2({}); | ||
var ConfigProvider = ({ config, ...props }) => { | ||
const direction = (config == null ? void 0 : config.direction) || (isRtlLocale(config == null ? void 0 : config.locale) ? "rtl" : "ltr"); | ||
return /* @__PURE__ */ jsx3(ConfigContext.Provider, { | ||
return /* @__PURE__ */ jsx2(ConfigContext.Provider, { | ||
value: { ...config, direction }, | ||
@@ -50,6 +59,6 @@ ...props | ||
var ConfigConsumer = ConfigContext.Consumer; | ||
var withOptionalConfigProvider = (component, config) => config ? /* @__PURE__ */ jsx3(ConfigProvider, { | ||
var withOptionalConfigProvider = (component, config) => config ? /* @__PURE__ */ jsx2(ConfigProvider, { | ||
config, | ||
children: component | ||
}) : /* @__PURE__ */ jsx3(Fragment, { | ||
}) : /* @__PURE__ */ jsx2(Fragment2, { | ||
children: component | ||
@@ -60,9 +69,41 @@ }); | ||
} | ||
var useConfig = () => useContext(ConfigContext); | ||
var useConfig = () => useContext2(ConfigContext); | ||
// src/support/atoms/ArticleWrapper/index.tsx | ||
import { jsx as jsx3 } from "react/jsx-runtime"; | ||
var ArticleWrapper = ({ | ||
className: className2, | ||
children, | ||
...props | ||
}) => { | ||
return /* @__PURE__ */ jsx3(ConfigConsumer, { | ||
children: ({ locale, direction }) => /* @__PURE__ */ jsx3(ThemeConsumer, { | ||
children: ({ className: themeClassName }) => /* @__PURE__ */ jsx3("div", { | ||
lang: locale, | ||
className: classNames(className2, themeClassName), | ||
dir: direction, | ||
...props, | ||
children | ||
}) | ||
}) | ||
}); | ||
}; | ||
// src/support/atoms/Caption/Caption.css.ts | ||
var root = "wy97ze0"; | ||
// src/support/atoms/Caption/index.tsx | ||
import { jsx as jsx4 } from "react/jsx-runtime"; | ||
function Caption({ className: className2, ...props }) { | ||
return /* @__PURE__ */ jsx4("figcaption", { | ||
className: classNames(root, className2), | ||
...props | ||
}); | ||
} | ||
// src/support/atoms/UrlText/UrlText.css.ts | ||
var root3 = "UrlText_root__1sdx5gw0"; | ||
var root2 = "_1sdx5gw0"; | ||
// src/support/atoms/UrlText/index.tsx | ||
import { jsx as jsx4 } from "react/jsx-runtime"; | ||
import { jsx as jsx5 } from "react/jsx-runtime"; | ||
function UrlText({ | ||
@@ -76,5 +117,5 @@ href, | ||
const Element = linkComponent || "a"; | ||
return /* @__PURE__ */ jsx4(Element, { | ||
return /* @__PURE__ */ jsx5(Element, { | ||
href, | ||
className: classNames(root3, className2), | ||
className: classNames(root2, className2), | ||
...props, | ||
@@ -86,5 +127,5 @@ children | ||
// src/support/atoms/EmailText/index.tsx | ||
import { jsx as jsx5 } from "react/jsx-runtime"; | ||
import { jsx as jsx6 } from "react/jsx-runtime"; | ||
function EmailText({ address, children, ...props }) { | ||
return /* @__PURE__ */ jsx5(UrlText, { | ||
return /* @__PURE__ */ jsx6(UrlText, { | ||
href: `mailto:${address}`, | ||
@@ -116,6 +157,6 @@ ...props, | ||
// src/support/atoms/Img/Img.css.ts | ||
var root4 = "Img_root__1p32gxp0"; | ||
var root3 = "_1p32gxp0"; | ||
// src/support/atoms/Img/index.tsx | ||
import { jsx as jsx6 } from "react/jsx-runtime"; | ||
import { jsx as jsx7 } from "react/jsx-runtime"; | ||
function Img({ src, alt, imageClass, ...props }) { | ||
@@ -136,3 +177,3 @@ let maxWidth; | ||
} | ||
return /* @__PURE__ */ jsx6("img", { | ||
return /* @__PURE__ */ jsx7("img", { | ||
src, | ||
@@ -142,3 +183,3 @@ alt, | ||
style: { maxWidth }, | ||
className: `${root4} ${imageClass}` | ||
className: `${root3} ${imageClass}` | ||
}); | ||
@@ -154,6 +195,6 @@ } | ||
// src/support/atoms/LegendDescription/LegendDescription.css.ts | ||
var root5 = "LegendDescription_root__xlqm2j0"; | ||
var root4 = "xlqm2j0"; | ||
// src/support/atoms/LegendDescription/index.tsx | ||
import { jsx as jsx7 } from "react/jsx-runtime"; | ||
import { jsx as jsx8 } from "react/jsx-runtime"; | ||
function LegendDescription({ | ||
@@ -164,4 +205,4 @@ children, | ||
}) { | ||
return /* @__PURE__ */ jsx7("span", { | ||
className: classNames(root5, className2), | ||
return /* @__PURE__ */ jsx8("span", { | ||
className: classNames(root4, className2), | ||
...props, | ||
@@ -173,11 +214,11 @@ children | ||
// src/support/atoms/Symbol/Symbol.css.ts | ||
var root6 = "Symbol_root__1fv8aqj0"; | ||
var root5 = "_1fv8aqj0"; | ||
// src/support/atoms/Symbol/index.tsx | ||
import { jsx as jsx8 } from "react/jsx-runtime"; | ||
import { jsx as jsx9 } from "react/jsx-runtime"; | ||
function Symbol({ src, alt = "", className: className2, ...props }) { | ||
return /* @__PURE__ */ jsx8("img", { | ||
return /* @__PURE__ */ jsx9("img", { | ||
src, | ||
alt, | ||
className: classNames(root6, className2), | ||
className: classNames(root5, className2), | ||
...props | ||
@@ -188,6 +229,6 @@ }); | ||
// src/support/atoms/LegendEntry/LegendEntry.css.ts | ||
var root7 = "LegendEntry_root__1zhmqk0"; | ||
var root6 = "_1zhmqk0"; | ||
// src/support/atoms/LegendEntry/index.tsx | ||
import { jsx as jsx9 } from "react/jsx-runtime"; | ||
import { jsx as jsx10 } from "react/jsx-runtime"; | ||
function LegendEntry({ | ||
@@ -204,4 +245,4 @@ children, | ||
); | ||
return /* @__PURE__ */ jsx9("li", { | ||
className: classNames(root7, className2), | ||
return /* @__PURE__ */ jsx10("li", { | ||
className: classNames(root6, className2), | ||
...props, | ||
@@ -214,6 +255,6 @@ children: validChildren | ||
// src/support/atoms/LegendRoot/LegendRoot.css.ts | ||
var root8 = "LegendRoot_root__16r5a2y0"; | ||
var root7 = "_16r5a2y0"; | ||
// src/support/atoms/LegendRoot/index.tsx | ||
import { jsx as jsx10 } from "react/jsx-runtime"; | ||
import { jsx as jsx11 } from "react/jsx-runtime"; | ||
function LegendRoot({ | ||
@@ -230,4 +271,4 @@ children, | ||
); | ||
return /* @__PURE__ */ jsx10("ol", { | ||
className: classNames(root8, className2), | ||
return /* @__PURE__ */ jsx11("ol", { | ||
className: classNames(root7, className2), | ||
...props, | ||
@@ -240,9 +281,9 @@ children: validChildren | ||
// src/support/atoms/Paragraph/Paragraph.css.ts | ||
var root9 = "Paragraph_root__filnus0"; | ||
var root8 = "filnus0"; | ||
// src/support/atoms/Paragraph/index.tsx | ||
import { jsx as jsx11 } from "react/jsx-runtime"; | ||
import { jsx as jsx12 } from "react/jsx-runtime"; | ||
function Paragraph({ className: className2, ...props }) { | ||
return /* @__PURE__ */ jsx11("p", { | ||
className: classNames(root9, className2), | ||
return /* @__PURE__ */ jsx12("p", { | ||
className: classNames(root8, className2), | ||
...props | ||
@@ -253,6 +294,6 @@ }); | ||
// src/support/atoms/Media/Media.css.ts | ||
var root10 = "Media_root__vplvhm0"; | ||
var root9 = "vplvhm0"; | ||
// src/support/atoms/Media/index.tsx | ||
import { jsx as jsx12 } from "react/jsx-runtime"; | ||
import { jsx as jsx13 } from "react/jsx-runtime"; | ||
function Media({ children, className: className2, ...props }) { | ||
@@ -265,8 +306,8 @@ const childrenArr = Children4.toArray(children); | ||
); | ||
return /* @__PURE__ */ jsx12("figure", { | ||
className: classNames(root10, className2), | ||
return /* @__PURE__ */ jsx13("figure", { | ||
className: classNames(root9, className2), | ||
...props, | ||
children: validChildren.map((child, index) => { | ||
if ((child == null ? void 0 : child.type) === Paragraph) { | ||
return /* @__PURE__ */ jsx12(Caption, { | ||
return /* @__PURE__ */ jsx13(Caption, { | ||
children: child | ||
@@ -283,3 +324,3 @@ }, "caption-" + index); | ||
// src/support/atoms/InfoBox/index.tsx | ||
import React5, { Children as Children6 } from "react"; | ||
import React6, { Children as Children6 } from "react"; | ||
@@ -290,7 +331,7 @@ // src/utils/separateFirstTitleFromChildren.ts | ||
// src/support/atoms/Title/Title.css.ts | ||
var root11 = "Title_root__l3audk0"; | ||
var variant = { "1": "Title_variant_1__l3audk1", "2": "Title_variant_2__l3audk2", "3": "Title_variant_3__l3audk3", "4": "Title_variant_4__l3audk4" }; | ||
var root10 = "l3audk0"; | ||
var variant = { "1": "l3audk1", "2": "l3audk2", "3": "l3audk3", "4": "l3audk4" }; | ||
// src/support/atoms/Title/index.tsx | ||
import { jsx as jsx13 } from "react/jsx-runtime"; | ||
import { jsx as jsx14 } from "react/jsx-runtime"; | ||
var element = { | ||
@@ -305,4 +346,4 @@ 1: "h1", | ||
const levelStyles = variant[level]; | ||
return /* @__PURE__ */ jsx13(Element, { | ||
className: classNames(root11, levelStyles, className2), | ||
return /* @__PURE__ */ jsx14(Element, { | ||
className: classNames(root10, levelStyles, className2), | ||
...props, | ||
@@ -326,9 +367,9 @@ children | ||
// src/support/atoms/base/Icon.css.ts | ||
var color = { note: "Icon_color_note__2rehue1", important: "Icon_color_important__2rehue2", warning: "Icon_color_warning__2rehue3" }; | ||
var root12 = "Icon_root__2rehue0"; | ||
var size = { "16": "Icon_size_16__2rehue4", "24": "Icon_size_24__2rehue5", "32": "Icon_size_32__2rehue6", "40": "Icon_size_40__2rehue7" }; | ||
// src/support/atoms/Icon/Icon.css.ts | ||
var color = { note: "_1wjkqxo1", important: "_1wjkqxo2", warning: "_1wjkqxo3" }; | ||
var root11 = "_1wjkqxo0"; | ||
var size = { "16": "_1wjkqxo4", "24": "_1wjkqxo5", "32": "_1wjkqxo6", "40": "_1wjkqxo7" }; | ||
// src/support/atoms/base/Icon.tsx | ||
import { jsx as jsx14 } from "react/jsx-runtime"; | ||
// src/support/atoms/Icon/index.tsx | ||
import { jsx as jsx15 } from "react/jsx-runtime"; | ||
var defaultIcons = { | ||
@@ -344,3 +385,3 @@ note: "https://www.volvocars.com/static/shared/icons/v2/info-32.svg#light-secondary", | ||
const iconSizeClassName = size2 ? size[size2] : ""; | ||
return /* @__PURE__ */ jsx14("img", { | ||
return /* @__PURE__ */ jsx15("img", { | ||
width: size2 || 16, | ||
@@ -353,3 +394,3 @@ height: size2 || 16, | ||
className: classNames( | ||
root12, | ||
root11, | ||
iconColorClassName, | ||
@@ -363,8 +404,8 @@ iconSizeClassName, | ||
// src/support/atoms/InfoBox/InfoBox.css.ts | ||
var root13 = "InfoBox_root__f8x7w30"; | ||
var title = "InfoBox_title__f8x7w31"; | ||
var variant2 = { note: "InfoBox_variant_note__f8x7w32", important: "InfoBox_variant_important__f8x7w33", warning: "InfoBox_variant_warning__f8x7w34" }; | ||
var root12 = "f8x7w30"; | ||
var title = "f8x7w31"; | ||
var variant2 = { note: "f8x7w32", important: "f8x7w33", warning: "f8x7w34" }; | ||
// src/support/atoms/InfoBox/index.tsx | ||
import { jsx as jsx15, jsxs } from "react/jsx-runtime"; | ||
import { jsx as jsx16, jsxs } from "react/jsx-runtime"; | ||
function InfoBox({ | ||
@@ -379,3 +420,3 @@ children: originalChildren, | ||
return /* @__PURE__ */ jsxs("div", { | ||
className: classNames(root13, className2, variantClassName), | ||
className: classNames(root12, className2, variantClassName), | ||
children: [ | ||
@@ -387,4 +428,4 @@ /* @__PURE__ */ jsxs(Title, { | ||
children: [ | ||
/* @__PURE__ */ jsx15("span", { | ||
children: /* @__PURE__ */ jsx15(Icon, { | ||
/* @__PURE__ */ jsx16("span", { | ||
children: /* @__PURE__ */ jsx16(Icon, { | ||
color: variant4, | ||
@@ -396,3 +437,3 @@ size: 32, | ||
"\xA0", | ||
/* @__PURE__ */ jsx15("span", { | ||
/* @__PURE__ */ jsx16("span", { | ||
children: ((_b = (_a = titleComponent == null ? void 0 : titleComponent.props) == null ? void 0 : _a.children) == null ? void 0 : _b.length) > 0 ? (_c = titleComponent == null ? void 0 : titleComponent.props) == null ? void 0 : _c.children : variant4 | ||
@@ -403,4 +444,4 @@ }) | ||
(_d = Children6.toArray(children)) == null ? void 0 : _d.map((child) => { | ||
if (child.type === React5.Fragment) { | ||
return /* @__PURE__ */ jsx15(Paragraph, { | ||
if (child.type === React6.Fragment) { | ||
return /* @__PURE__ */ jsx16(Paragraph, { | ||
children: child | ||
@@ -417,7 +458,7 @@ }, child.key); | ||
// src/support/atoms/InlineText/index.tsx | ||
import { jsx as jsx16 } from "react/jsx-runtime"; | ||
import { jsx as jsx17 } from "react/jsx-runtime"; | ||
function InlineText({ | ||
...props | ||
}) { | ||
return /* @__PURE__ */ jsx16("span", { | ||
return /* @__PURE__ */ jsx17("span", { | ||
...props | ||
@@ -428,3 +469,3 @@ }); | ||
// src/support/atoms/Lead/index.tsx | ||
import React6, { | ||
import React7, { | ||
Children as Children7 | ||
@@ -434,21 +475,21 @@ } from "react"; | ||
// src/support/atoms/Lead/Lead.css.ts | ||
var root14 = "Lead_root__123v5ew0"; | ||
var root13 = "_123v5ew0"; | ||
// src/support/atoms/Lead/index.tsx | ||
import { jsx as jsx17 } from "react/jsx-runtime"; | ||
import { jsx as jsx18 } from "react/jsx-runtime"; | ||
function Lead({ children, className: className2, ...props }) { | ||
return /* @__PURE__ */ jsx17("div", { | ||
className: classNames(root14, className2), | ||
return /* @__PURE__ */ jsx18("div", { | ||
className: classNames(root13, className2), | ||
...props, | ||
children: !Children7.toArray(children).find( | ||
(child) => (child == null ? void 0 : child.type) === Paragraph | ||
) ? /* @__PURE__ */ jsx17(Paragraph, { | ||
) ? /* @__PURE__ */ jsx18(Paragraph, { | ||
children | ||
}) : Children7.toArray(children).map((child, index) => { | ||
if ((child == null ? void 0 : child.type) !== Paragraph) { | ||
return /* @__PURE__ */ jsx17(Paragraph, { | ||
return /* @__PURE__ */ jsx18(Paragraph, { | ||
children: child | ||
}, "paragraph-" + index); | ||
} else { | ||
return React6.cloneElement(child); | ||
return React7.cloneElement(child); | ||
} | ||
@@ -460,6 +501,6 @@ }) | ||
// src/support/atoms/ListItem/ListItem.css.ts | ||
var root15 = "ListItem_root__cd3i650"; | ||
var root14 = "cd3i650"; | ||
// src/support/atoms/ListItem/index.tsx | ||
import { jsx as jsx18 } from "react/jsx-runtime"; | ||
import { jsx as jsx19 } from "react/jsx-runtime"; | ||
function ListItem({ | ||
@@ -470,4 +511,4 @@ children, | ||
}) { | ||
return /* @__PURE__ */ jsx18("li", { | ||
className: classNames(root15, className2), | ||
return /* @__PURE__ */ jsx19("li", { | ||
className: classNames(root14, className2), | ||
...props, | ||
@@ -484,13 +525,13 @@ children | ||
// src/support/atoms/ListIntro/ListIntro.css.ts | ||
var root16 = "ListIntro_root__x744710"; | ||
var root15 = "x744710"; | ||
// src/support/atoms/ListIntro/index.tsx | ||
import { jsx as jsx19 } from "react/jsx-runtime"; | ||
import { jsx as jsx20 } from "react/jsx-runtime"; | ||
function ListIntro({ children, ...props }) { | ||
return /* @__PURE__ */ jsx19("div", { | ||
className: root16, | ||
return /* @__PURE__ */ jsx20("div", { | ||
className: root15, | ||
...props, | ||
children: !Children8.toArray(children).find( | ||
(child) => (child == null ? void 0 : child.type) === Paragraph | ||
) ? /* @__PURE__ */ jsx19(Paragraph, { | ||
) ? /* @__PURE__ */ jsx20(Paragraph, { | ||
children | ||
@@ -505,7 +546,7 @@ }) : children | ||
// src/support/atoms/ListRoot/ListRoot.css.ts | ||
var listElement = "ListRoot_listElement__1qw46t11"; | ||
var root17 = "ListRoot_root__1qw46t10"; | ||
var listElement = "_1qw46t11"; | ||
var root16 = "_1qw46t10"; | ||
// src/support/atoms/ListRoot/index.tsx | ||
import { jsx as jsx20, jsxs as jsxs2 } from "react/jsx-runtime"; | ||
import { jsx as jsx21, jsxs as jsxs2 } from "react/jsx-runtime"; | ||
function ListRoot({ | ||
@@ -521,7 +562,7 @@ as = "ul", | ||
return /* @__PURE__ */ jsxs2("div", { | ||
className: classNames(root17, className2), | ||
className: classNames(root16, className2), | ||
...props, | ||
children: [ | ||
hasIntro ? arr[0] : null, | ||
/* @__PURE__ */ jsx20(ListElement, { | ||
/* @__PURE__ */ jsx21(ListElement, { | ||
className: listElement, | ||
@@ -535,11 +576,11 @@ children: hasIntro ? arr.slice(1) : arr | ||
// src/support/atoms/MediaBlock/MediaBlock.css.ts | ||
var root18 = "MediaBlock_root__1m1285x0"; | ||
var root17 = "_1m1285x0"; | ||
// src/support/atoms/MediaBlock/index.tsx | ||
import { jsx as jsx21 } from "react/jsx-runtime"; | ||
import { jsx as jsx22 } from "react/jsx-runtime"; | ||
function MediaBlock({ ratio = "16:9", className: className2, ...props }) { | ||
const [w, h] = parseRatio(ratio); | ||
const paddingPercent = h / w * 100; | ||
return /* @__PURE__ */ jsx21("div", { | ||
className: classNames(root18, className2), | ||
return /* @__PURE__ */ jsx22("div", { | ||
className: classNames(root17, className2), | ||
style: { paddingBottom: `${paddingPercent}%` }, | ||
@@ -555,3 +596,3 @@ ...props | ||
// src/support/atoms/MenuPathText/index.tsx | ||
import React9, { Children as Children10 } from "react"; | ||
import React10, { Children as Children10 } from "react"; | ||
@@ -563,6 +604,6 @@ // src/utils/collectionUtils.ts | ||
// src/support/atoms/MenuPathText/MenuPathText.css.ts | ||
var root19 = "MenuPathText_root__1qhkgd70"; | ||
var root18 = "_1qhkgd70"; | ||
// src/support/atoms/MenuPathText/index.tsx | ||
import { jsx as jsx22 } from "react/jsx-runtime"; | ||
import { jsx as jsx23 } from "react/jsx-runtime"; | ||
function MenuPathText({ | ||
@@ -573,9 +614,9 @@ children, | ||
}) { | ||
return /* @__PURE__ */ jsx22("span", { | ||
className: classNames(root19, className2), | ||
return /* @__PURE__ */ jsx23("span", { | ||
className: classNames(root18, className2), | ||
...props, | ||
children: insertBetween(Children10.toArray(children), /* @__PURE__ */ jsx22("span", { | ||
children: insertBetween(Children10.toArray(children), /* @__PURE__ */ jsx23("span", { | ||
children: " \u2192 " | ||
})).map( | ||
(el, i) => React9.cloneElement(el, { key: i }) | ||
(el, i) => React10.cloneElement(el, { key: i }) | ||
) | ||
@@ -586,8 +627,8 @@ }); | ||
// src/support/atoms/OrderedList/OrderedList.css.ts | ||
var decimal = "OrderedList_decimal__dindy00"; | ||
var lowerLatin = "OrderedList_lowerLatin__dindy01"; | ||
var upperLatin = "OrderedList_upperLatin__dindy02"; | ||
var decimal = "dindy00"; | ||
var lowerLatin = "dindy01"; | ||
var upperLatin = "dindy02"; | ||
// src/support/atoms/OrderedList/index.tsx | ||
import { jsx as jsx23 } from "react/jsx-runtime"; | ||
import { jsx as jsx24 } from "react/jsx-runtime"; | ||
function OrderedList({ listType, className: className2, ...props }) { | ||
@@ -607,3 +648,3 @@ let listStyleType; | ||
} | ||
return /* @__PURE__ */ jsx23(ListRoot, { | ||
return /* @__PURE__ */ jsx24(ListRoot, { | ||
as: "ol", | ||
@@ -616,5 +657,5 @@ className: classNames(className2, listStyleType), | ||
// src/support/atoms/ProcedureAction/index.tsx | ||
import { jsx as jsx24 } from "react/jsx-runtime"; | ||
import { jsx as jsx25 } from "react/jsx-runtime"; | ||
function ProcedureAction({ children, ...props }) { | ||
return /* @__PURE__ */ jsx24("span", { | ||
return /* @__PURE__ */ jsx25("span", { | ||
...props, | ||
@@ -626,6 +667,6 @@ children | ||
// src/support/atoms/ProcedureResult/ProcedureResult.css.ts | ||
var root20 = "ProcedureResult_root__1d52zyk0"; | ||
var root19 = "_1d52zyk0"; | ||
// src/support/atoms/ProcedureResult/index.tsx | ||
import { jsx as jsx25 } from "react/jsx-runtime"; | ||
import { jsx as jsx26 } from "react/jsx-runtime"; | ||
function ProcedureResult({ | ||
@@ -635,4 +676,4 @@ children, | ||
}) { | ||
return /* @__PURE__ */ jsx25("div", { | ||
className: classNames(root20, className2), | ||
return /* @__PURE__ */ jsx26("div", { | ||
className: classNames(root19, className2), | ||
children | ||
@@ -649,6 +690,6 @@ }); | ||
// src/support/atoms/ProcedureStep/ProcedureStep.css.ts | ||
var root21 = "ProcedureStep_root__smst5u0"; | ||
var root20 = "smst5u0"; | ||
// src/support/atoms/ProcedureStep/index.tsx | ||
import { jsx as jsx26 } from "react/jsx-runtime"; | ||
import { jsx as jsx27 } from "react/jsx-runtime"; | ||
function ProcedureStep({ | ||
@@ -665,4 +706,4 @@ children, | ||
); | ||
return /* @__PURE__ */ jsx26(ListItem, { | ||
className: classNames(root21, className2), | ||
return /* @__PURE__ */ jsx27(ListItem, { | ||
className: classNames(root20, className2), | ||
...props, | ||
@@ -675,6 +716,6 @@ children: validChildren | ||
// src/support/atoms/ProcedureRoot/ProcedureRoot.css.ts | ||
var root22 = "ProcedureRoot_root__ibsijn0"; | ||
var root21 = "ibsijn0"; | ||
// src/support/atoms/ProcedureRoot/index.tsx | ||
import { jsx as jsx27 } from "react/jsx-runtime"; | ||
import { jsx as jsx28 } from "react/jsx-runtime"; | ||
function ProcedureRoot({ | ||
@@ -691,4 +732,4 @@ children, | ||
); | ||
return /* @__PURE__ */ jsx27(OrderedList, { | ||
className: classNames(root22, className2), | ||
return /* @__PURE__ */ jsx28(OrderedList, { | ||
className: classNames(root21, className2), | ||
...props, | ||
@@ -707,7 +748,7 @@ children: validChildren | ||
// src/support/atoms/TableEntry/index.tsx | ||
import { useContext as useContext2 } from "react"; | ||
import { useContext as useContext3 } from "react"; | ||
// src/support/atoms/TableRoot/tableContext.tsx | ||
import { createContext as createContext2 } from "react"; | ||
var TableContext = createContext2({ | ||
import { createContext as createContext3 } from "react"; | ||
var TableContext = createContext3({ | ||
isHead: false | ||
@@ -717,7 +758,7 @@ }); | ||
// src/support/atoms/TableEntry/TableEntry.css.ts | ||
var head = "TableEntry_head__1yw9tnu8"; | ||
var root23 = "TableEntry_root__1yw9tnu0"; | ||
var head = "_1yw9tnu8"; | ||
var root22 = "_1yw9tnu0"; | ||
// src/support/atoms/TableEntry/index.tsx | ||
import { jsx as jsx28 } from "react/jsx-runtime"; | ||
import { jsx as jsx29 } from "react/jsx-runtime"; | ||
function TableEntry({ | ||
@@ -733,8 +774,8 @@ children, | ||
}) { | ||
const { isHead } = useContext2(TableContext); | ||
const { isHead } = useContext3(TableContext); | ||
const Element = isHead ? "th" : "td"; | ||
const moreRowsInteger = !isNaN(morerows) ? parseInt(morerows, 10) : 0; | ||
return /* @__PURE__ */ jsx28(Element, { | ||
return /* @__PURE__ */ jsx29(Element, { | ||
style: { verticalAlign: valign }, | ||
className: classNames(root23, isHead ? head : void 0, className2), | ||
className: classNames(root22, isHead ? head : void 0, className2), | ||
rowSpan: rowSpan || moreRowsInteger + 1, | ||
@@ -748,6 +789,6 @@ colSpan, | ||
// src/support/atoms/TableRoot/TableRoot.css.ts | ||
var root24 = "TableRoot_root__18g6ufv0"; | ||
var root23 = "_18g6ufv0"; | ||
// src/support/atoms/TableRow/index.tsx | ||
import { jsx as jsx29 } from "react/jsx-runtime"; | ||
import { jsx as jsx30 } from "react/jsx-runtime"; | ||
function TableRow({ | ||
@@ -764,4 +805,4 @@ children, | ||
); | ||
return /* @__PURE__ */ jsx29("tr", { | ||
className: classNames(root24, className2), | ||
return /* @__PURE__ */ jsx30("tr", { | ||
className: classNames(root23, className2), | ||
...props, | ||
@@ -774,6 +815,6 @@ children: validChildren | ||
// src/support/atoms/TableBody/TableBody.css.ts | ||
var root25 = "TableBody_root__1seqmn90"; | ||
var root24 = "_1seqmn90"; | ||
// src/support/atoms/TableBody/index.tsx | ||
import { jsx as jsx30 } from "react/jsx-runtime"; | ||
import { jsx as jsx31 } from "react/jsx-runtime"; | ||
function TableBody({ | ||
@@ -790,4 +831,4 @@ children, | ||
); | ||
return /* @__PURE__ */ jsx30("tbody", { | ||
className: classNames(root25, className2), | ||
return /* @__PURE__ */ jsx31("tbody", { | ||
className: classNames(root24, className2), | ||
...props, | ||
@@ -800,10 +841,10 @@ children: validChildren | ||
// src/support/atoms/TableColSpec/TableColSpec.css.ts | ||
var root26 = "TableColSpec_root__1ypdrqw0"; | ||
var root25 = "_1ypdrqw0"; | ||
// src/support/atoms/TableColSpec/index.tsx | ||
import { jsx as jsx31 } from "react/jsx-runtime"; | ||
import { jsx as jsx32 } from "react/jsx-runtime"; | ||
function TableColSpec({ align, className: className2, ...props }) { | ||
return /* @__PURE__ */ jsx31("col", { | ||
return /* @__PURE__ */ jsx32("col", { | ||
align, | ||
className: classNames(root26, className2), | ||
className: classNames(root25, className2), | ||
...props | ||
@@ -817,9 +858,9 @@ }); | ||
// src/support/atoms/TableCaption/TableCaption.css.ts | ||
var root27 = "TableCaption_root__ez4vts0"; | ||
var root26 = "ez4vts0"; | ||
// src/support/atoms/TableCaption/index.tsx | ||
import { jsx as jsx32 } from "react/jsx-runtime"; | ||
import { jsx as jsx33 } from "react/jsx-runtime"; | ||
function TableCaption({ className: className2, ...props }) { | ||
return /* @__PURE__ */ jsx32("caption", { | ||
className: classNames(root27, className2), | ||
return /* @__PURE__ */ jsx33("caption", { | ||
className: classNames(root26, className2), | ||
...props | ||
@@ -833,6 +874,6 @@ }); | ||
// src/support/atoms/TableFoot/TableFoot.css.ts | ||
var root28 = "TableFoot_root__ao0w6p0"; | ||
var root27 = "ao0w6p0"; | ||
// src/support/atoms/TableFoot/index.tsx | ||
import { jsx as jsx33 } from "react/jsx-runtime"; | ||
import { jsx as jsx34 } from "react/jsx-runtime"; | ||
function TableFoot({ | ||
@@ -849,4 +890,4 @@ children, | ||
); | ||
return /* @__PURE__ */ jsx33("tfoot", { | ||
className: classNames(root28, className2), | ||
return /* @__PURE__ */ jsx34("tfoot", { | ||
className: classNames(root27, className2), | ||
...props, | ||
@@ -862,6 +903,6 @@ children: validChildren | ||
// src/support/atoms/TableHead/TableHead.css.ts | ||
var root29 = "TableHead_root__lx766q0"; | ||
var root28 = "lx766q0"; | ||
// src/support/atoms/TableHead/index.tsx | ||
import { jsx as jsx34 } from "react/jsx-runtime"; | ||
import { jsx as jsx35 } from "react/jsx-runtime"; | ||
function TableHead({ | ||
@@ -878,6 +919,6 @@ children, | ||
); | ||
return /* @__PURE__ */ jsx34(TableContext.Provider, { | ||
return /* @__PURE__ */ jsx35(TableContext.Provider, { | ||
value: { isHead: true }, | ||
children: /* @__PURE__ */ jsx34("thead", { | ||
className: classNames(root29, className2), | ||
children: /* @__PURE__ */ jsx35("thead", { | ||
className: classNames(root28, className2), | ||
...props, | ||
@@ -891,6 +932,6 @@ children: validChildren | ||
// src/support/atoms/TableGroup/TableGroup.css.ts | ||
var root30 = "TableGroup_root__1t1ohyr0"; | ||
var root29 = "_1t1ohyr0"; | ||
// src/support/atoms/TableGroup/index.tsx | ||
import { jsx as jsx35, jsxs as jsxs3 } from "react/jsx-runtime"; | ||
import { jsx as jsx36, jsxs as jsxs3 } from "react/jsx-runtime"; | ||
function TableGroup({ title: title2, children, className: className2, ...props }) { | ||
@@ -910,9 +951,9 @@ const childrenArr = Children17.toArray(children); | ||
return /* @__PURE__ */ jsxs3("table", { | ||
className: classNames(root30, className2), | ||
className: classNames(root29, className2), | ||
...props, | ||
children: [ | ||
title2 ? /* @__PURE__ */ jsx35(TableCaption, { | ||
title2 ? /* @__PURE__ */ jsx36(TableCaption, { | ||
children: title2.valueOf() | ||
}) : null, | ||
colspecs && colspecs.length ? /* @__PURE__ */ jsx35("colgroup", { | ||
colspecs && colspecs.length ? /* @__PURE__ */ jsx36("colgroup", { | ||
children: colspecs | ||
@@ -927,4 +968,4 @@ }) : null, | ||
// src/support/atoms/TableRoot/index.tsx | ||
import React18 from "react"; | ||
import { jsx as jsx36 } from "react/jsx-runtime"; | ||
import React19 from "react"; | ||
import { jsx as jsx37 } from "react/jsx-runtime"; | ||
function TableRoot({ className: className2, ...props }) { | ||
@@ -940,12 +981,12 @@ const { titleComponent, children } = separateFirstTitleFromChildren( | ||
const hasGroup = !!validChildren.find(isGroup); | ||
return /* @__PURE__ */ jsx36(TableContext.Provider, { | ||
return /* @__PURE__ */ jsx37(TableContext.Provider, { | ||
value: { isHead: false }, | ||
children: /* @__PURE__ */ jsx36("div", { | ||
className: classNames(root24, className2), | ||
children: /* @__PURE__ */ jsx37("div", { | ||
className: classNames(root23, className2), | ||
...props, | ||
children: hasGroup ? validChildren.map( | ||
(child) => isGroup(child) && titleComponent ? React18.cloneElement(child, { | ||
(child) => isGroup(child) && titleComponent ? React19.cloneElement(child, { | ||
title: titleComponent | ||
}) : child | ||
) : /* @__PURE__ */ jsx36(TableGroup, { | ||
) : /* @__PURE__ */ jsx37(TableGroup, { | ||
title: titleComponent, | ||
@@ -961,5 +1002,5 @@ children: validChildren | ||
// src/support/atoms/UnorderedList/index.tsx | ||
import { jsx as jsx37 } from "react/jsx-runtime"; | ||
import { jsx as jsx38 } from "react/jsx-runtime"; | ||
function UnorderedList(props) { | ||
return /* @__PURE__ */ jsx37(ListRoot, { | ||
return /* @__PURE__ */ jsx38(ListRoot, { | ||
as: "ul", | ||
@@ -973,42 +1014,2 @@ ...props | ||
// src/themes/ThemeProvider.tsx | ||
import { | ||
createContext as createContext3, | ||
useContext as useContext3 | ||
} from "react"; | ||
// src/themes/dcs-base-theme.css.ts | ||
var className = "dcs-base-theme"; | ||
// src/themes/ThemeProvider.tsx | ||
import { Fragment as Fragment2, jsx as jsx38 } from "react/jsx-runtime"; | ||
var themeClassNames = { | ||
volvo: "dcs-volvo-theme", | ||
polestar: "dcs-polestar-theme" | ||
}; | ||
var ThemeContext = createContext3({}); | ||
var ThemeProvider = function({ | ||
theme, | ||
children | ||
}) { | ||
let className2 = className; | ||
if (theme) { | ||
className2 += ` ${themeClassNames[theme]}`; | ||
} | ||
return /* @__PURE__ */ jsx38(ThemeContext.Provider, { | ||
value: { theme, className: className2 }, | ||
children | ||
}); | ||
}; | ||
var ThemeConsumer = ThemeContext.Consumer; | ||
var withOptionalThemeProvider = (component, theme) => theme ? /* @__PURE__ */ jsx38(ThemeProvider, { | ||
theme, | ||
children: component | ||
}) : /* @__PURE__ */ jsx38(Fragment2, { | ||
children: component | ||
}); | ||
function useTheme() { | ||
return useContext3(ThemeContext); | ||
} | ||
// src/support/molecules/LegalDate/index.tsx | ||
@@ -1027,3 +1028,3 @@ import { jsx as jsx39 } from "react/jsx-runtime"; | ||
// src/support/molecules/Segment/Segment.css.ts | ||
var root31 = "Segment_root__1fjny0c0"; | ||
var root30 = "_1fjny0c0"; | ||
@@ -1037,3 +1038,3 @@ // src/support/molecules/Segment/index.tsx | ||
return /* @__PURE__ */ jsxs4("section", { | ||
className: classNames(root31, className2), | ||
className: classNames(root30, className2), | ||
...props, | ||
@@ -1054,11 +1055,11 @@ children: [ | ||
// src/support/molecules/Article/Article.css.ts | ||
var root32 = "Article_root__e7ngmu0"; | ||
var root31 = "e7ngmu0"; | ||
// src/support/molecules/Article/index.tsx | ||
import { jsx as jsx40, jsxs as jsxs5 } from "react/jsx-runtime"; | ||
function Article({ | ||
var Article = ({ | ||
className: className2, | ||
children: originalChildren, | ||
...props | ||
}) { | ||
}) => { | ||
const { titleComponent, children } = separateFirstTitleFromChildren(originalChildren); | ||
@@ -1071,8 +1072,5 @@ const childrenArr = Children19.toArray(children); | ||
); | ||
const { direction, locale } = useConfig(); | ||
return /* @__PURE__ */ jsx40(ThemeConsumer, { | ||
children: ({ className: themeClassName }) => /* @__PURE__ */ jsxs5("article", { | ||
lang: locale, | ||
className: classNames(root32, className2, themeClassName), | ||
dir: direction, | ||
return /* @__PURE__ */ jsx40(ArticleWrapper, { | ||
children: /* @__PURE__ */ jsxs5("article", { | ||
className: classNames(root31, className2), | ||
...props, | ||
@@ -1085,8 +1083,8 @@ children: [ | ||
}); | ||
} | ||
}; | ||
var allowedChildren12 = [Segment, Lead, Slot, LegalDate]; | ||
// src/support/atoms/TextNode/TextNode.css.ts | ||
var root33 = "TextNode_root__1tzi2ff0"; | ||
var variant3 = { bold: "TextNode_variant_bold__1tzi2ff1", display: "TextNode_variant_display__1tzi2ff2", interior: "TextNode_variant_interior__1tzi2ff3", nonBreaking: "TextNode_variant_nonBreaking__1tzi2ff4", sub: "TextNode_variant_sub__1tzi2ff5", sup: "TextNode_variant_sup__1tzi2ff6", large: "TextNode_variant_large__1tzi2ff7" }; | ||
var root32 = "_1tzi2ff0"; | ||
var variant3 = { bold: "_1tzi2ff1", display: "_1tzi2ff2", interior: "_1tzi2ff3", nonBreaking: "_1tzi2ff4", sub: "_1tzi2ff5", sup: "_1tzi2ff6", large: "_1tzi2ff7" }; | ||
@@ -1099,3 +1097,3 @@ // src/support/atoms/TextNode/index.tsx | ||
return /* @__PURE__ */ jsx41("span", { | ||
className: classNames(root33, variant4, className2, ...optionsArr), | ||
className: classNames(root32, variant4, className2, ...optionsArr), | ||
children | ||
@@ -1109,3 +1107,3 @@ }); | ||
// src/support/molecules/Tooltip/Tooltip.css.ts | ||
var root34 = "Tooltip_root__k036290"; | ||
var root33 = "k036290"; | ||
@@ -1129,3 +1127,3 @@ // src/support/molecules/Tooltip/index.tsx | ||
return /* @__PURE__ */ jsxs6("button", { | ||
className: root34, | ||
className: root33, | ||
onClick: click, | ||
@@ -1149,3 +1147,3 @@ ...props, | ||
// src/support/molecules/Disclaimer/Disclaimer.css.ts | ||
var root35 = "Disclaimer_root__1w4hmt10"; | ||
var root34 = "_1w4hmt10"; | ||
@@ -1157,3 +1155,3 @@ // src/support/molecules/Disclaimer/index.tsx | ||
content: /* @__PURE__ */ jsxs7("div", { | ||
className: root35, | ||
className: root34, | ||
children: [ | ||
@@ -1211,4 +1209,4 @@ /* @__PURE__ */ jsx43("div", { | ||
// src/support/molecules/ImageParagraph/ImageParagraph.css.ts | ||
var imageWrapper = "ImageParagraph_imageWrapper__1rimm3g1"; | ||
var root36 = "ImageParagraph_root__1rimm3g0"; | ||
var imageWrapper = "_1rimm3g1"; | ||
var root35 = "_1rimm3g0"; | ||
@@ -1227,3 +1225,3 @@ // src/support/molecules/ImageParagraph/index.tsx | ||
return /* @__PURE__ */ jsxs9("div", { | ||
className: classNames(root36, className2), | ||
className: classNames(root35, className2), | ||
...props, | ||
@@ -1248,3 +1246,3 @@ children: [ | ||
// src/support/molecules/SubSegment/SubSegment.css.ts | ||
var root37 = "SubSegment_root__1jl54nf0"; | ||
var root36 = "_1jl54nf0"; | ||
@@ -1258,3 +1256,3 @@ // src/support/molecules/SubSegment/index.tsx | ||
return /* @__PURE__ */ jsxs10("section", { | ||
className: classNames(root37, className2), | ||
className: classNames(root36, className2), | ||
...props, | ||
@@ -1272,3 +1270,3 @@ children: [ | ||
// src/support/molecules/Video/Video.css.ts | ||
var root38 = "Video_root__ixzdwg0"; | ||
var root37 = "ixzdwg0"; | ||
@@ -1286,3 +1284,3 @@ // src/support/molecules/Video/index.tsx | ||
return /* @__PURE__ */ jsxs11("div", { | ||
className: classNames(root38, className2), | ||
className: classNames(root37, className2), | ||
children: [ | ||
@@ -1308,3 +1306,3 @@ titleComponent ? React25.cloneElement(titleComponent, { level: 4 }) : null, | ||
// src/support/atoms/DefinitionDescription/DefinitionDescription.css.ts | ||
var root39 = "DefinitionDescription_root__2wqm700"; | ||
var root38 = "_2wqm700"; | ||
@@ -1317,3 +1315,3 @@ // src/support/atoms/DefinitionDescription/index.tsx | ||
return /* @__PURE__ */ jsx47("dd", { | ||
className: root39, | ||
className: root38, | ||
children | ||
@@ -1324,3 +1322,3 @@ }); | ||
// src/support/atoms/DefinitionList/DefinitionList.css.ts | ||
var root40 = "DefinitionList_root__2et1dy0"; | ||
var root39 = "_2et1dy0"; | ||
@@ -1331,3 +1329,3 @@ // src/support/atoms/DefinitionList/index.tsx | ||
return /* @__PURE__ */ jsx48("dl", { | ||
className: root40, | ||
className: root39, | ||
children | ||
@@ -1347,3 +1345,3 @@ }); | ||
// src/support/atoms/DefinitionTerm/DefinitionTerm.css.ts | ||
var root41 = "DefinitionTerm_root__1g7ihac0"; | ||
var root40 = "_1g7ihac0"; | ||
@@ -1354,3 +1352,3 @@ // src/support/atoms/DefinitionTerm/index.tsx | ||
return /* @__PURE__ */ jsx50("dt", { | ||
className: root41, | ||
className: root40, | ||
children | ||
@@ -1369,3 +1367,3 @@ }); | ||
// src/support/atoms/MenuEntry/MenuEntry.css.ts | ||
var root42 = "MenuEntry_root__j74jeg0"; | ||
var root41 = "j74jeg0"; | ||
@@ -1379,3 +1377,3 @@ // src/support/atoms/MenuEntry/index.tsx | ||
return /* @__PURE__ */ jsx52("div", { | ||
className: classNames(root42, className2), | ||
className: classNames(root41, className2), | ||
children | ||
@@ -1386,3 +1384,3 @@ }); | ||
// src/support/atoms/MenuRoot/MenuRoot.css.ts | ||
var root43 = "MenuRoot_root__5yvwu90"; | ||
var root42 = "_5yvwu90"; | ||
@@ -1393,3 +1391,3 @@ // src/support/atoms/MenuRoot/index.tsx | ||
return /* @__PURE__ */ jsx53("div", { | ||
className: classNames(className2, root43), | ||
className: classNames(className2, root42), | ||
...props | ||
@@ -1400,3 +1398,3 @@ }); | ||
// src/support/atoms/Time/Time.css.ts | ||
var root44 = "Time_root__nmxlc30"; | ||
var root43 = "nmxlc30"; | ||
@@ -1408,3 +1406,3 @@ // src/support/atoms/Time/index.tsx | ||
dateTime: datetime, | ||
className: classNames(root44, className2), | ||
className: classNames(root43, className2), | ||
...props, | ||
@@ -1723,2 +1721,3 @@ children: value | ||
// src/support/organisms/JSONArticle/index.tsx | ||
import { jsx as jsx55 } from "react/jsx-runtime"; | ||
var render = createRenderer(RENDER_CONFIG); | ||
@@ -1745,3 +1744,8 @@ function JSONArticle({ | ||
return withOptionalThemeProvider( | ||
withOptionalConfigProvider(article, config), | ||
withOptionalConfigProvider( | ||
/* @__PURE__ */ jsx55(ArticleWrapper, { | ||
children: article | ||
}), | ||
config | ||
), | ||
theme | ||
@@ -1752,2 +1756,3 @@ ); | ||
Article, | ||
ArticleWrapper, | ||
Caption, | ||
@@ -1754,0 +1759,0 @@ ConfigConsumer, |
@@ -0,1 +1,2 @@ | ||
export { ArticleWrapper } from './support/atoms/ArticleWrapper'; | ||
export { Caption } from './support/atoms/Caption'; | ||
@@ -2,0 +3,0 @@ export { EmailText } from './support/atoms/EmailText'; |
@@ -41,3 +41,2 @@ /// <reference types="react" /> | ||
import { UrlText } from '../support/atoms/UrlText'; | ||
import { Article } from '../support/molecules/Article'; | ||
import { Disclaimer } from '../support/molecules/Disclaimer'; | ||
@@ -97,3 +96,3 @@ import { Footnote } from '../support/molecules/Footnote'; | ||
article: { | ||
type: typeof Article; | ||
type: ({ className, children, ...props }: import("../types").PropsWithChildrenAndClassName) => JSX.Element; | ||
}; | ||
@@ -100,0 +99,0 @@ slot: { |
/// <reference types="react" /> | ||
import { PropsWithChildrenAndClassName } from '../../../types'; | ||
declare function Article({ className, children: originalChildren, ...props }: PropsWithChildrenAndClassName): JSX.Element; | ||
export { Article }; | ||
export declare const Article: ({ className, children, ...props }: PropsWithChildrenAndClassName) => JSX.Element; |
{ | ||
"name": "@volvo-cars/ced-os-react-components", | ||
"version": "1.0.0-alpha.12", | ||
"version": "1.0.0-alpha.13", | ||
"description": "Set of components for developing UIs in the onboarding and support apps", | ||
@@ -5,0 +5,0 @@ "keywords": [], |
@@ -65,2 +65,14 @@ # Support Web Components | ||
#### Themes and styles | ||
- Make sure the fonts needed are loaded for the respective theme, e. "Polestar Unica" for "polestar" and "Volvo Novum" for "volvo" (font is loading not handled by this library) | ||
- Load the styles of the components and base theme `@volvo-cars/ced-os-react-components/lib/index.css` | ||
- Load the styles of the theme(s) to be used. | ||
- `@volvo-cars/ced-os-react-components/lib/theme-polestar.css` | ||
- `@volvo-cars/ced-os-react-components/lib/theme-volvo.css`, and add the class | ||
- Alternatively override custom properties (variables) on `.dcs-base-theme` in your own styles to create a custom theme (See all variables in [lib/theme-base.css](lib/theme-base.css)). | ||
- The theme `classNames` are applied automatically - `.dcs-base-theme` for base styles and if either "volvo" or "polestar" | ||
is passed to the `theme` prop the respective theme className of `dcs-volvo-theme` or `dcs-polestar-theme` is set. | ||
#### JSONArticle | ||
@@ -70,2 +82,4 @@ | ||
Pass JSON article content to the data prop. Set a theme name, and pass an optional config | ||
``` | ||
@@ -78,3 +92,12 @@ // ... | ||
<View paddingTop={[3, 6]} paddingBottom={[3, 6]}> | ||
<JSONArticle data-article-id={articleId} data={content} /> | ||
<JSONArticle data-article-id={articleId} data={content} theme="volvo" config={{ | ||
locale: 'en-GB', // optional - will set correct direction based on locale | ||
linkComponent: (props)=> {/* optional custom link component eg. next/link */} | ||
icons: { | ||
// Supply URL:s to icons here if needed | ||
note: 'some/path/note.svg'; | ||
warning: 'some/path/warning.svg'; | ||
important: 'some/path/important.svg'; | ||
} | ||
}} /> | ||
</View> | ||
@@ -81,0 +104,0 @@ ); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
128
31112
111
1327575