sc-react-ions/docs/src/app/pages/components/FileUpload/Page.js

An open source set of React components that implement Ambassador's Design and UX patterns.

import React from 'react'
import PropsList from 'private/modules/PropsList'
import docs from '!!docgen!react-ions/lib/components/FileUpload/FileUpload'
import CodeExample from 'private/modules/CodeExample'
import styles from 'private/css/content'
import ExampleFileUploadDefault from './ExampleFileUploadDefault'
import exampleFileUploadDefault from '!raw!./ExampleFileUploadDefault'
import ExampleFileUploadPreview from './ExampleFileUploadPreview'
import exampleFileUploadPreview from '!raw!./ExampleFileUploadPreview'
import ExampleFileUploadCustomPreview from './ExampleFileUploadCustomPreview'
import exampleFileUploadCustomPreview from '!raw!./ExampleFileUploadCustomPreview'
import ExampleFileUploadDisabled from './ExampleFileUploadDisabled'
import exampleFileUploadDisabled from '!raw!./ExampleFileUploadDisabled'
import ExampleFileUploadCallback from './ExampleFileUploadCallback'
import exampleFileUploadCallback from '!raw!./ExampleFileUploadCallback'
import ExampleFileUploadValue from './ExampleFileUploadValue'
import exampleFileUploadValue from '!raw!./ExampleFileUploadValue'

const description = {
  fileUploadDefault: 'This is the `file upload component` as it appears by default.',
  fileUploadPreview: 'This is the `file upload component` with preview.',
  fileUploadCustomPreview: 'This is the `file upload component` with custom preview size.',
  fileUploadDisabled: 'This is the disabled `file upload component`.',
  fileUploadCallback: 'This is the `file upload component` with a callback.',
  fileUploadValue: 'This is the `file upload component` with a populated value property.'
}

const FileUploadPage = () => (
  <div>
    <div className={styles.content}>
      <div className={styles.block}>
        <CodeExample
          title='Default File Upload'
          description={description.fileUploadDefault}
          markup={exampleFileUploadDefault}>
          <ExampleFileUploadDefault />
        </CodeExample>
        <CodeExample
          title='File Upload with Preview'
          description={description.fileUploadPreview}
          markup={exampleFileUploadPreview}>
          <ExampleFileUploadPreview />
        </CodeExample>
        <CodeExample
          title='File Upload with Custom Preview Size'
          description={description.fileUploadCustomPreview}
          markup={exampleFileUploadCustomPreview}>
          <ExampleFileUploadCustomPreview />
        </CodeExample>
        <CodeExample
          title='Disabled File Upload'
          description={description.fileUploadDisabled}
          markup={exampleFileUploadDisabled}>
          <ExampleFileUploadDisabled />
        </CodeExample>
        <CodeExample
          title='File Upload with Callback'
          description={description.fileUploadCallback}
          markup={exampleFileUploadCallback}>
          <ExampleFileUploadCallback />
        </CodeExample>
        <CodeExample
          title='File Upload with Value'
          description={description.fileUploadValue}
          markup={exampleFileUploadValue}>
          <ExampleFileUploadValue />
        </CodeExample>
        <div className={styles.block}>
          <h3>Props</h3>
          <PropsList list={docs[0].props} />
        </div>
      </div>
    </div>
  </div>
)

export default FileUploadPage