Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@volvo-cars/ced-os-react-components

Package Overview
Dependencies
Maintainers
9
Versions
199
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 1.0.0-alpha.12 to 1.0.0-alpha.13

lib/theme-base.css

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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc