wix-style-react/dist/stories/Box/propExplanations.js

wix-style-react

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = {
  children: {
    description: "\n### \uD83D\uDC68\u200D\uD83D\uDC66\u200D\uD83D\uDC66 Children\n\nThe component is basically a **wrapper** for other components, native HTML elements or just plain text - thus it must receive at least one child.\nNote that it could wrap multiple children as well.\n    ",
    example: "\n<Box>\n  <Button\n    as=\"button\"\n    onClick={() => \"Clicked!\"}\n    priority=\"primary\"\n    size=\"medium\"\n    skin=\"standard\"\n    upgrade\n  >\n    Button\n  </Button>\n</Box>\n    "
  },
  alignment: {
    description: "\n### \uD83D\uDCCF Alignment\n\nThe component is a container which implements the one-dimensional layout model -\nthat means, enables to insert children in a particular **direction**, and align them horizontally and vertically.\n  ",
    example: "\n<Box \n  align=\"center\" \n  verticalAlign=\"middle\"\n>\n  <Button\n    as=\"button\"\n    onClick={() => \"Clicked!\"}\n    priority=\"primary\"\n    size=\"medium\"\n    skin=\"standard\"\n    upgrade\n  >\n    Button\n  </Button>\n</Box>\n      "
  },
  spacing: {
    description: "\n### \uD83D\uDC4C Spacing\n\nThe component extends the values for `padding` and `margin`, by accepting the following:\n\n1. A numeric value - multiplied by the defined spacing unit according to the design system, which is `6px`.\n2. A predefined spacing value with a semantic name (tiny, small, medium and large).\n3. Space-separated values that are represented by a string (for example: \"3px 3px\").\n\nNote that the `padding` and `margin` area properties (`paddingLeft`, `marginTop`, etc.) support the values specified above.  \n    ",
    example: "\n<Box \n  align=\"center\" \n  verticalAlign=\"middle\"\n  padding=\"medium\"\n  margin={2}\n>\n  <Button\n    as=\"button\"\n    onClick={() => \"Clicked!\"}\n    priority=\"primary\"\n    size=\"medium\"\n    skin=\"standard\"\n    upgrade\n  >\n    Button\n  </Button>\n</Box>\n      "
  },
  sizing: {
    description: "\n### \u2702\uFE0F Sizing\n\nThe component supports numeric (or string) values for `width` and `height`, including minimum and maximum for both.\nA numeric value is measured in pixels by default.\n    ",
    example: "\n<Box \n  align=\"center\" \n  verticalAlign=\"middle\"\n  padding=\"medium\"\n  margin={2}\n  minHeight={100}\n>\n  <Button\n    as=\"button\"\n    onClick={() => \"Clicked!\"}\n    priority=\"primary\"\n    size=\"medium\"\n    skin=\"standard\"\n    upgrade\n  >\n    Button\n  </Button>\n</Box>\n      "
  },
  styling: {
    description: "\n### \uD83C\uDFA8 Styling\n\nThe component extends the values for `color`, `backgroundColor` and `borderColor` (including border colors from the sides), \nby accepting the color palette keys - which are defined in the design system (beside the natively supported color values: Hex, RGB, etc.).\n\nMoreover, any **valid** CSS property is exposed as `prop` (excepts `flexDirection`, `justifyContent` and `alignItems` which are wrapped specifically with appropriate `props`).  \n    ",
    example: "\n<Box \n  align=\"center\" \n  verticalAlign=\"middle\"\n  padding=\"medium\"\n  margin={2}\n  minHeight={100}\n  backgroundColor=\"D70\"\n  border=\"1px solid\"\n  borderColor=\"D50\"\n  borderRadius={5}\n>\n  <Button\n    as=\"button\"\n    onClick={() => \"Clicked!\"}\n    priority=\"primary\"\n    size=\"medium\"\n    skin=\"standard\"\n    upgrade\n  >\n    Button\n  </Button>\n</Box>\n      "
  }
};