201 lines
10 KiB
JavaScript
201 lines
10 KiB
JavaScript
"use strict";
|
|
(self["webpackChunk_woocommerce_storybook"] = self["webpackChunk_woocommerce_storybook"] || []).push([[7714],{
|
|
|
|
/***/ "../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js":
|
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
|
|
|
|
// EXPORTS
|
|
__webpack_require__.d(__webpack_exports__, {
|
|
A: () => (/* binding */ _objectWithoutProperties)
|
|
});
|
|
|
|
;// CONCATENATED MODULE: ../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
|
|
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
if (source == null) return {};
|
|
var target = {};
|
|
var sourceKeys = Object.keys(source);
|
|
var key, i;
|
|
for (i = 0; i < sourceKeys.length; i++) {
|
|
key = sourceKeys[i];
|
|
if (excluded.indexOf(key) >= 0) continue;
|
|
target[key] = source[key];
|
|
}
|
|
return target;
|
|
}
|
|
;// CONCATENATED MODULE: ../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js
|
|
|
|
function _objectWithoutProperties(source, excluded) {
|
|
if (source == null) return {};
|
|
var target = _objectWithoutPropertiesLoose(source, excluded);
|
|
var key, i;
|
|
if (Object.getOwnPropertySymbols) {
|
|
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
for (i = 0; i < sourceSymbolKeys.length; i++) {
|
|
key = sourceSymbolKeys[i];
|
|
if (excluded.indexOf(key) >= 0) continue;
|
|
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
target[key] = source[key];
|
|
}
|
|
}
|
|
return target;
|
|
}
|
|
|
|
/***/ }),
|
|
|
|
/***/ "../../packages/js/components/src/section/context.tsx":
|
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
/* harmony export */ $: () => (/* binding */ Level)
|
|
/* harmony export */ });
|
|
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../../node_modules/.pnpm/react@18.3.1/node_modules/react/index.js");
|
|
/**
|
|
* External dependencies
|
|
*/
|
|
|
|
|
|
/**
|
|
* Context container for heading level. We start at 2 because the `h1` is defined in <Header />
|
|
*
|
|
* See https://medium.com/@Heydon/managing-heading-levels-in-design-systems-18be9a746fa3
|
|
*/
|
|
var Level = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createContext)(2);
|
|
|
|
|
|
/***/ }),
|
|
|
|
/***/ "../../packages/js/components/src/section/header.tsx":
|
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
/* harmony export */ H: () => (/* binding */ H)
|
|
/* harmony export */ });
|
|
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../../node_modules/.pnpm/react@18.3.1/node_modules/react/index.js");
|
|
/* harmony import */ var _context__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("../../packages/js/components/src/section/context.tsx");
|
|
|
|
/**
|
|
* External dependencies
|
|
*/
|
|
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
|
|
|
|
/**
|
|
* These components are used to frame out the page content for accessible heading hierarchy. Instead of defining fixed heading levels
|
|
* (`h2`, `h3`, …) you can use `<H />` to create "section headings", which look to the parent `<Section />`s for the appropriate
|
|
* heading level.
|
|
*
|
|
* @type {HTMLElement}
|
|
*/
|
|
function H(props) {
|
|
var level = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useContext)(_context__WEBPACK_IMPORTED_MODULE_1__/* .Level */ .$);
|
|
var Heading = 'h' + Math.min(level, 6);
|
|
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(Heading, props);
|
|
}
|
|
try {
|
|
// @ts-ignore
|
|
H.displayName = "H";
|
|
// @ts-ignore
|
|
H.__docgenInfo = { "description": "These components are used to frame out the page content for accessible heading hierarchy. Instead of defining fixed heading levels\n(`h2`, `h3`, \u2026) you can use `<H />` to create \"section headings\", which look to the parent `<Section />`s for the appropriate\nheading level.", "displayName": "H", "props": {} };
|
|
// @ts-ignore
|
|
if (typeof STORYBOOK_REACT_CLASSES !== "undefined")
|
|
// @ts-ignore
|
|
STORYBOOK_REACT_CLASSES["../../packages/js/components/src/section/header.tsx#H"] = { docgenInfo: H.__docgenInfo, name: "H", path: "../../packages/js/components/src/section/header.tsx#H" };
|
|
}
|
|
catch (__react_docgen_typescript_loader_error) { }
|
|
|
|
/***/ }),
|
|
|
|
/***/ "../../packages/js/components/src/section/section.tsx":
|
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
/* harmony export */ w: () => (/* binding */ Section)
|
|
/* harmony export */ });
|
|
/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js");
|
|
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("../../node_modules/.pnpm/react@18.3.1/node_modules/react/index.js");
|
|
/* harmony import */ var _context__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("../../packages/js/components/src/section/context.tsx");
|
|
|
|
var _excluded = ["component", "children"];
|
|
|
|
/**
|
|
* External dependencies
|
|
*/
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
|
|
/**
|
|
* The section wrapper, used to indicate a sub-section (and change the header level context).
|
|
*/
|
|
var Section = function Section(_ref) {
|
|
var component = _ref.component,
|
|
children = _ref.children,
|
|
props = (0,_babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .A)(_ref, _excluded);
|
|
var Component = component || 'div';
|
|
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_1__.createElement)(_context__WEBPACK_IMPORTED_MODULE_2__/* .Level */ .$.Consumer, null, function (level) {
|
|
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_1__.createElement)(_context__WEBPACK_IMPORTED_MODULE_2__/* .Level */ .$.Provider, {
|
|
value: level + 1
|
|
}, component === false ? children : (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_1__.createElement)(Component, props, children));
|
|
});
|
|
};
|
|
try {
|
|
// @ts-ignore
|
|
Section.displayName = "Section";
|
|
// @ts-ignore
|
|
Section.__docgenInfo = { "description": "The section wrapper, used to indicate a sub-section (and change the header level context).", "displayName": "Section", "props": { "component": { "defaultValue": null, "description": "The wrapper component for this section. Optional, defaults to `div`. If passed false, no wrapper is used. Additional props passed to Section are passed on to the component.", "name": "component", "required": false, "type": { "name": "string | false | ComponentType<{}>" } }, "className": { "defaultValue": null, "description": "Optional classname", "name": "className", "required": false, "type": { "name": "string" } }, "children": { "defaultValue": null, "description": "The children inside this section, rendered in the `component`. This increases the context level for the next heading used.", "name": "children", "required": true, "type": { "name": "ReactNode" } } } };
|
|
// @ts-ignore
|
|
if (typeof STORYBOOK_REACT_CLASSES !== "undefined")
|
|
// @ts-ignore
|
|
STORYBOOK_REACT_CLASSES["../../packages/js/components/src/section/section.tsx#Section"] = { docgenInfo: Section.__docgenInfo, name: "Section", path: "../../packages/js/components/src/section/section.tsx#Section" };
|
|
}
|
|
catch (__react_docgen_typescript_loader_error) { }
|
|
|
|
/***/ }),
|
|
|
|
/***/ "../../packages/js/components/src/section/stories/section.story.tsx":
|
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
|
|
__webpack_require__.r(__webpack_exports__);
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
/* harmony export */ Basic: () => (/* binding */ Basic),
|
|
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
|
|
/* harmony export */ });
|
|
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../../node_modules/.pnpm/react@18.3.1/node_modules/react/index.js");
|
|
/* harmony import */ var _woocommerce_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("../../packages/js/components/src/section/header.tsx");
|
|
/* harmony import */ var _woocommerce_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("../../packages/js/components/src/section/section.tsx");
|
|
|
|
/**
|
|
* External dependencies
|
|
*/
|
|
|
|
var Basic = function Basic() {
|
|
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_woocommerce_components__WEBPACK_IMPORTED_MODULE_1__.H, null, "Header using a contextual level (h3)"), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_woocommerce_components__WEBPACK_IMPORTED_MODULE_2__/* .Section */ .w, {
|
|
component: "article"
|
|
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, "This is an article component wrapper."), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_woocommerce_components__WEBPACK_IMPORTED_MODULE_1__.H, null, "Another header with contextual level (h4)"), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_woocommerce_components__WEBPACK_IMPORTED_MODULE_2__/* .Section */ .w, {
|
|
component: false
|
|
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, "There is no wrapper component here."), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_woocommerce_components__WEBPACK_IMPORTED_MODULE_1__.H, null, "This is an h5"))));
|
|
};
|
|
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
|
|
title: 'WooCommerce Admin/components/Section',
|
|
component: _woocommerce_components__WEBPACK_IMPORTED_MODULE_2__/* .Section */ .w
|
|
});
|
|
Basic.parameters = {
|
|
...Basic.parameters,
|
|
docs: {
|
|
...Basic.parameters?.docs,
|
|
source: {
|
|
originalSource: "() => <div>\n <H>Header using a contextual level (h3)</H>\n <Section component=\"article\">\n <p>This is an article component wrapper.</p>\n <H>Another header with contextual level (h4)</H>\n <Section component={false}>\n <p>There is no wrapper component here.</p>\n <H>This is an h5</H>\n </Section>\n </Section>\n </div>",
|
|
...Basic.parameters?.docs?.source
|
|
}
|
|
}
|
|
};
|
|
|
|
/***/ })
|
|
|
|
}]); |