@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
85 lines • 5.61 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GuidePanel = void 0;
const react_1 = __importStar(require("react"));
const Theme_1 = require("../theme/Theme");
const Illustration_1 = require("./Illustration");
const Illustration_darkside_1 = require("./Illustration.darkside");
/**
* A component for guiding users on the website
*
* @see [📝 Documentation](https://aksel.nav.no/komponenter/core/guidepanel)
* @see 🏷️ {@link GuidePanelProps}
*
* @example
* ```jsx
* <GuidePanel>
* Saksbehandlingstiden varierer fra kommune til kommune. Hvis det går mer
* enn X måneder siden du søkte, skal du få brev om at saksbehandlingstiden
* er forlenget.
* </GuidePanel>
* ```
*/
exports.GuidePanel = (0, react_1.forwardRef)((_a, ref) => {
var { children, className, illustration, poster, "data-color": color = "info" } = _a, rest = __rest(_a, ["children", "className", "illustration", "poster", "data-color"]);
const { cn } = (0, Theme_1.useRenameCSS)();
const themeContext = (0, Theme_1.useThemeInternal)(false);
return (react_1.default.createElement("div", Object.assign({ "data-color": color }, rest, { ref: ref, className: cn("navds-guide-panel", className, {
"navds-guide-panel--poster": poster === true,
"navds-guide-panel--not-poster": poster === false,
"navds-guide-panel--responsive-poster": poster === undefined,
}), "data-responsive": poster === undefined, "data-poster": poster }),
react_1.default.createElement("div", { className: cn("navds-guide") }, illustration !== null && illustration !== void 0 ? illustration : ((themeContext === null || themeContext === void 0 ? void 0 : themeContext.isDarkside) ? (react_1.default.createElement(Illustration_darkside_1.DarksideGudiepanelIllustration, null)) : (react_1.default.createElement(Illustration_1.DefaultIllustration, null)))),
react_1.default.createElement("div", { className: cn("navds-guide-panel__content") },
(themeContext === null || themeContext === void 0 ? void 0 : themeContext.isDarkside) && (react_1.default.createElement("svg", { viewBox: "0 0 33 22", width: "33", height: "22", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: cn("navds-guide-panel__tail") },
react_1.default.createElement("path", { d: "M8.74229e-08 22L0 20L33 20V22L8.74229e-08 22Z", fill: "var(--ax-bg-raised)" }),
react_1.default.createElement("path", { d: "M31 20.0001L2 20.0001C2.09817 10.0296 3 7.00011 6 2.00011C8 12.5001 20 20.0001 31 20.0001Z", fill: "var(--ax-bg-raised)" }),
react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 20C-2.87106e-10 19.9934 3.21047e-05 19.987 9.68646e-05 19.9804C0.0494722 14.9659 0.299239 11.5341 0.964025 8.68212C1.64231 5.77217 2.72947 3.56367 4.28501 0.971094C4.71185 0.259692 5.53358 -0.114327 6.35038 0.0310157C7.16718 0.176359 7.80944 0.810884 7.96467 1.62586C8.84145 6.22896 11.9453 10.3172 16.2599 13.2908C20.5715 16.2623 25.9294 18.0001 31 18.0001C32.1046 18.0001 33 18.8954 33 20L0 20ZM6.755 4.70521C8.97688 10.7068 14.4934 15.469 20.8803 18.0001C24.1345 19.2897 27.6146 20.0001 31 20.0001L2 20.0001C2.00689 19.3003 2.01774 18.6346 2.033 18.0001C2.19625 11.2107 2.86405 7.98363 4.58479 4.54371C4.9944 3.72487 5.46367 2.89399 6 2.00011C6.17639 2.92619 6.43058 3.82889 6.755 4.70521Z", fill: "var(--ax-border-default)" }))),
(themeContext === null || themeContext === void 0 ? void 0 : themeContext.isDarkside) ? (react_1.default.createElement("div", { className: cn("navds-guide-panel__content-inner") }, children)) : (children))));
});
exports.default = exports.GuidePanel;
//# sourceMappingURL=GuidePanel.js.map