@wordpress/components/build/ui/__storybook-utils/example-grid.js

UI components for WordPress.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ExampleMetaContent = exports.ExampleGridItem = exports.ExampleGrid = void 0;

var _element = require("@wordpress/element");

var _grid = require("../grid");

var _surface = require("../surface");

var _text = require("../../text");

var _view = require("../view");

var _vStack = require("../v-stack");

/**
 * Internal dependencies
 */
const Container = ({
  children
}) => (0, _element.createElement)("div", {
  style: {
    maxWidth: 1280,
    width: '100%',
    marginLeft: 'auto',
    marginRight: 'auto'
  }
}, children);

const ExampleGrid = ({
  children
}) => (0, _element.createElement)(Container, null, (0, _element.createElement)(_grid.Grid, {
  columns: [2, 2, 4],
  gap: "1px"
}, children));

exports.ExampleGrid = ExampleGrid;

const ExampleGridItem = ({
  children
}) => (0, _element.createElement)(_surface.Surface, {
  variant: "secondary",
  style: {
    padding: 20
  }
}, (0, _element.createElement)(_vStack.VStack, {
  alignment: "center"
}, children));

exports.ExampleGridItem = ExampleGridItem;

const ExampleMetaContent = ({
  title,
  items = []
}) => {
  return (0, _element.createElement)(_grid.Grid, {
    templateColumns: "60px 1fr"
  }, (0, _element.createElement)(_view.View, null, (0, _element.createElement)(_text.Text, {
    size: "caption",
    weight: "bold",
    align: "right",
    isBlock: true
  }, title)), (0, _element.createElement)(_vStack.VStack, {
    spacing: 1
  }, items.map((item, index) => (0, _element.createElement)(_view.View, {
    key: index
  }, (0, _element.createElement)(_text.Text, {
    size: "caption",
    isBlock: true
  }, item)))));
};

exports.ExampleMetaContent = ExampleMetaContent;
//# sourceMappingURL=example-grid.js.map