@dotconnor/grommet/es6/components/Box/stories/MinMax.js

focus on the essential experience

import React from 'react';
import { Grommet, Box, Text } from 'grommet';
import { grommet } from '../../../themes';
export var MinMaxSizesBox = function MinMaxSizesBox() {
  return /*#__PURE__*/React.createElement(Grommet, {
    theme: grommet
  }, /*#__PURE__*/React.createElement(Box, {
    pad: "small",
    gap: "small"
  }, /*#__PURE__*/React.createElement(Box, {
    pad: "small",
    gap: "small",
    direction: "row",
    align: "start"
  }, /*#__PURE__*/React.createElement(Box, {
    width: "small",
    height: {
      max: 'small'
    },
    round: "small",
    align: "center",
    justify: "center",
    background: "brand",
    overflow: "auto"
  }, /*#__PURE__*/React.createElement(Text, null, "max-height=small")), /*#__PURE__*/React.createElement(Box, {
    width: "small",
    height: {
      max: 'small'
    },
    round: "small",
    align: "center",
    justify: "center",
    background: "brand",
    overflow: "auto"
  }, /*#__PURE__*/React.createElement(Text, null, "max-height=small"), /*#__PURE__*/React.createElement(Text, null, "max-height=small"), /*#__PURE__*/React.createElement(Text, null, "max-height=small")), /*#__PURE__*/React.createElement(Box, {
    width: "small",
    height: {
      max: 'small'
    },
    round: "small",
    align: "center",
    justify: "center",
    background: "brand",
    overflow: "auto"
  }, Array(20).fill().map(function (_, i) {
    return (
      /*#__PURE__*/
      // eslint-disable-next-line react/no-array-index-key
      React.createElement(Text, {
        key: i
      }, "Small (" + i + ")")
    );
  })), /*#__PURE__*/React.createElement(Box, {
    width: "small",
    height: {
      max: '100px'
    },
    round: "small",
    align: "center",
    justify: "center",
    background: "brand",
    overflow: "auto"
  }, Array(20).fill().map(function (_, i) {
    return (
      /*#__PURE__*/
      // eslint-disable-next-line react/no-array-index-key
      React.createElement(Text, {
        key: i
      }, "Small (" + i + ")")
    );
  }))), /*#__PURE__*/React.createElement(Box, {
    pad: "small",
    gap: "small",
    direction: "row",
    align: "start"
  }, /*#__PURE__*/React.createElement(Box, {
    width: "small",
    height: {
      min: '100px'
    },
    round: "small",
    align: "center",
    justify: "center",
    background: "brand",
    overflow: "auto"
  }, /*#__PURE__*/React.createElement(Text, null, "min-height=100px")), /*#__PURE__*/React.createElement(Box, {
    width: "small",
    height: {
      min: 'small'
    },
    round: "small",
    align: "center",
    justify: "center",
    background: "brand",
    overflow: "auto"
  }, /*#__PURE__*/React.createElement(Text, null, "min-height=small")), /*#__PURE__*/React.createElement(Box, {
    width: "small",
    height: {
      min: 'small'
    },
    round: "small",
    align: "center",
    justify: "center",
    background: "brand",
    overflow: "auto"
  }, /*#__PURE__*/React.createElement(Text, null, "min-height=small"), /*#__PURE__*/React.createElement(Text, null, "min-height=small"), /*#__PURE__*/React.createElement(Text, null, "min-height=small")), /*#__PURE__*/React.createElement(Box, {
    width: "small",
    height: {
      min: 'small'
    },
    round: "small",
    align: "center",
    justify: "center",
    background: "brand",
    overflow: "auto"
  }, Array(20).fill().map(function (_, i) {
    return (
      /*#__PURE__*/
      // eslint-disable-next-line react/no-array-index-key
      React.createElement(Text, {
        key: i
      }, "Small (" + i + ")")
    );
  }))), /*#__PURE__*/React.createElement(Box, {
    pad: "small",
    gap: "small",
    direction: "row",
    align: "start"
  }, /*#__PURE__*/React.createElement(Box, {
    width: {
      max: 'small'
    },
    round: "small",
    align: "center",
    justify: "center",
    background: "brand",
    overflow: "auto"
  }, /*#__PURE__*/React.createElement(Text, null, "max")), /*#__PURE__*/React.createElement(Box, {
    width: {
      max: 'small'
    },
    round: "small",
    align: "center",
    justify: "center",
    background: "brand",
    overflow: "auto"
  }, /*#__PURE__*/React.createElement(Text, null, "max-width=small")), /*#__PURE__*/React.createElement(Box, {
    width: {
      max: 'small'
    },
    round: "small",
    align: "center",
    justify: "center",
    background: "brand",
    overflow: "auto"
  }, /*#__PURE__*/React.createElement(Text, null, "max-width=small, max-width=small")), /*#__PURE__*/React.createElement(Box, {
    width: {
      max: '100px'
    },
    round: "small",
    align: "center",
    justify: "center",
    background: "brand",
    overflow: "auto"
  }, /*#__PURE__*/React.createElement(Text, null, "max-width=100px, max-width=100px"))), /*#__PURE__*/React.createElement(Box, {
    pad: "small",
    gap: "small",
    direction: "row",
    align: "start"
  }, /*#__PURE__*/React.createElement(Box, {
    width: {
      min: '100px'
    },
    round: "small",
    align: "center",
    justify: "center",
    background: "brand",
    overflow: "auto"
  }, /*#__PURE__*/React.createElement(Text, null, "100px")), /*#__PURE__*/React.createElement(Box, {
    width: {
      min: 'small'
    },
    round: "small",
    align: "center",
    justify: "center",
    background: "brand",
    overflow: "auto"
  }, /*#__PURE__*/React.createElement(Text, null, "small")), /*#__PURE__*/React.createElement(Box, {
    width: {
      min: 'small'
    },
    round: "small",
    align: "center",
    justify: "center",
    background: "brand",
    overflow: "auto"
  }, /*#__PURE__*/React.createElement(Text, null, "min-width=small")), /*#__PURE__*/React.createElement(Box, {
    width: {
      min: 'small'
    },
    round: "small",
    align: "center",
    justify: "center",
    background: "brand",
    overflow: "auto"
  }, /*#__PURE__*/React.createElement(Text, null, "min-width=small, min-width=small")))));
};
MinMaxSizesBox.story = {
  name: 'Min/max sizes'
};