diff --git a/docs/api-pages.md b/docs/api-pages.md index 760954c63a3f..46cdbaec0c96 100644 --- a/docs/api-pages.md +++ b/docs/api-pages.md @@ -38,16 +38,19 @@ const MarkdownBlock = CompLibrary.MarkdownBlock; A React container component using Docusaurus styles. Has optional padding and background color props that you can configure. -Padding choices: `'all'`, `'bottom'`, `'left'`, `'right'`, `'top'`. -Background choices: `'dark'`, `'highlight'`, `'light'`. +**Props** -The `className` prop is an optional prop that allows you to your own class names to the `Container` instance. It works like the `className` attribute in JSX. You can use this class name to customize the styling of contents within this `Container`. +| Prop | Type | Default | Description | +| --- | --- | --- | --- | +| padding | Array of `'all'`, `'bottom'`, `'left'`, `'right'`, `'top'` | `[]` | Positions of the padding. | +| background | One of `'dark'`, `'highlight'`, `'light'` | `null` | Background styling of the element. | +| className | String | - | Custom class to add to the element. | -Example: +**Example** ```jsx ... @@ -58,22 +61,27 @@ Example: A React component to organize text and images. -The `align` prop determines text alignment. Text alignment defaults to `'left'` and can be set to `'center'` or `'right'`. - -The `layout` prop determines number of column sections per GridBlock. `layout` defaults to `'twoColumn'` and can be set to `'threeColumn'` or `'fourColumn'` as well. +**Props** -The `className` prop is an optional prop that allows you to your own class names to the `GridBlock` instance. It works like the `className` attribute in JSX. You can use this class name to customize the styling of contents within this `GridBlock`. +| Prop | Type | Default | Description | +| --- | --- | --- | --- | +| align | One of `'left'`, `'center'`, `'right'` | `'left'` | Text alignment of content. | +| layout | One of `'twoColumn'`, `'threeColumn'`, `'fourColumn'` | `'twoColumn'` | Number of column sections in the `GridBlock`. | +| className | String | - | Custom class to add to the element. | +| contents | Array of content objects | `[]` | Contents of each section of the GridBlock. Refer to the next table for the fields available on a content object. | -The `contents` prop is an array containing the contents of each section of the GridBlock. Each content object can have the following fields: +**Content Object** -- `content` for the text of this section, which is parsed from markdown -- `image` for the path to an image to display -- `imageAlign` field for image alignment relative to the text, which defaults to `'top'` and can be set to `'bottom'`, `'left'`, or `'right'` -- `title` for the title to display for this section, which is parsed from markdown -- `imageLink` for a link destination from clicking the image -- `imageAlt` for the description of what text will be shown in case the image is not available +| Key | Type | Default | Description | +| --- | --- | --- | --- | +| title | String | - | The display title of this section, which is parsed using Markdown | +| content | String | - | The text of this section, which is parsed using Markdown | +| image | String | - | The path of the display image | +| imageAlt | String | - | The text that will be shown in case the image is not available | +| imageAlign | One of `'top'`, `'left'`, `'bottom'`, `'right'` | `'left'` | Image alignment relative to the text | +| imageLink | String | - | Link destination from clicking the image | -Example: +**Example** ``` ``` diff --git a/lib/core/Container.js b/lib/core/Container.js index 253b0e3b5a19..d9ef209dd8a3 100644 --- a/lib/core/Container.js +++ b/lib/core/Container.js @@ -36,7 +36,7 @@ class Container extends React.Component { } Container.defaultProps = { - background: 'transparent', + background: null, padding: [], wrapper: true, }; diff --git a/lib/core/GridBlock.js b/lib/core/GridBlock.js index a6c19b66fc7e..8d728dd9c302 100755 --- a/lib/core/GridBlock.js +++ b/lib/core/GridBlock.js @@ -93,7 +93,6 @@ class GridBlock extends React.Component { GridBlock.defaultProps = { align: 'left', contents: [], - imagealign: 'top', layout: 'twoColumn', };