<commit_before>// (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP

import React, { Component } from 'react';
import Image from 'grommet/components/Image';
import Box from 'grommet/components/Box';
import Button from 'grommet/components/Button';
import DocsArticle from '../../../components/DocsArticle';

export default class ImageDoc extends Component {

  render () {
    return (
      <DocsArticle title='Image' action={
        <Button primary={true} path={`/docs/image/examples`}
          label='Examples' />
        }>

        <section>
          <p>An image.</p>
          <Box direction='row' align='center' pad={{ between: 'medium' }}>
            <Image src='/img/carousel-1.png' size='thumb' />
            <Image src='/img/carousel-1.png' size='small' />
          </Box>
        </section>

        <section>
          <h2>Properties</h2>
          <dl>
            <dt><code>align      {'{top:, bottom:, left:, right: }'}</code></dt>
            <dd>How to align the image when full. You can specify
              one of top|bottom and/or one of left|right. If not provided,
              the image is centered.</dd>
            <dt><code>alt        {'{string}'}</code></dt>
            <dd>Alternate text for screen readers.</dd>
            <dt><code>caption    true|{'{string}'}</code></dt>
            <dd>Whether to add image caption or not. If set to true,
              caption text will be the image alt value. Also, caption can
              receive the text to be used instead of the default one.</dd>
            <dt><code>fit       cover|contain</code></dt>
            <dd>How the image should be scaled to fit in the
              container. Setting this property also
              sets <code>full='true'</code>.</dd>
            <dt><code>full       true|horizontal|vertical|false</code></dt>
            <dd>Whether the image should expand to fill the available width
              and/or height.</dd>
            <dt><code>size       small|medium|large|thumb</code></dt>
            <dd>The size of the Paragraph text.
              Defaults to <code>medium</code>.</dd><commit_msg>Fix: image component documentation paragraph reference (#234)<commit_after>// (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP

import React, { Component } from 'react';
import Image from 'grommet/components/Image';
import Box from 'grommet/components/Box';
import Button from 'grommet/components/Button';
import DocsArticle from '../../../components/DocsArticle';

export default class ImageDoc extends Component {

  render () {
    return (
      <DocsArticle title='Image' action={
        <Button primary={true} path={`/docs/image/examples`}
          label='Examples' />
        }>

        <section>
          <p>An image.</p>
          <Box direction='row' align='center' pad={{ between: 'medium' }}>
            <Image src='/img/carousel-1.png' size='thumb' />
            <Image src='/img/carousel-1.png' size='small' />
          </Box>
        </section>

        <section>
          <h2>Properties</h2>
          <dl>
            <dt><code>align      {'{top:, bottom:, left:, right: }'}</code></dt>
            <dd>How to align the image when full. You can specify
              one of top|bottom and/or one of left|right. If not provided,
              the image is centered.</dd>
            <dt><code>alt        {'{string}'}</code></dt>
            <dd>Alternate text for screen readers.</dd>
            <dt><code>caption    true|{'{string}'}</code></dt>
            <dd>Whether to add image caption or not. If set to true,
              caption text will be the image alt value. Also, caption can
              receive the text to be used instead of the default one.</dd>
            <dt><code>fit       cover|contain</code></dt>
            <dd>How the image should be scaled to fit in the
              container. Setting this property also
              sets <code>full='true'</code>.</dd>
            <dt><code>full       true|horizontal|vertical|false</code></dt>
            <dd>Whether the image should expand to fill the available width
              and/or height.</dd>
            <dt><code>size       small|medium|large|thumb</code></dt>
            <dd>The size of the Image.
              Defaults to <code>medium</code>.</dd>
{'fraction_non_alphanumeric': 0.13645857507542353, 'fraction_numerical': 0.006265954977953121, 'mean_word_length': 2.096264367816092, 'pattern_counts': {'":': 0, '<': 111, '<?xml version=': 0, '>': 111, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4108376', 'n_tokens_mistral': 1224, 'n_tokens_neox': 1177, 'n_words': 366}