GroupCollect 1.3.142

Document Preview

Renders a document_preview component

With jpg Open in playground

sample.jpg

May 13, 2024 • 0.13MB

Download
Download
Preview of sample.jpg 
<div data-test-id="document-preview-variation-container">
  <.button
    id={"button-document-preview-single-with-jpg"}
    phx-click={DesignSystem.show_document_preview("document-preview-single-with-jpg")}
  >
    Open document preview
  </.button>

  <.document_preview id="document-preview-single-with-jpg">
    <:document
      id="sample_jpg"
      name="sample.jpg"
      generate_preview_url={&Storybook.DocumentPreview.jpg_url/0}
      generate_download_url={&Storybook.DocumentPreview.jpg_url/0}
      external_link={nil}
      uploaded_date="May 13, 2024"
      id_for_url="3"
    />
  </.document_preview>
</div>
With doc Open in playground

sample.doc

May 13, 2024 • 0.98MB

Download
Download

Unfortunately, we’re not able to preview this file for you.

Download 
<div data-test-id="document-preview-variation-container">
  <.button
    id={"button-document-preview-single-with-doc"}
    phx-click={DesignSystem.show_document_preview("document-preview-single-with-doc")}
  >
    Open document preview
  </.button>

  <.document_preview id="document-preview-single-with-doc">
    <:document
      id="sample_doc"
      name="sample.doc"
      generate_preview_url={&Storybook.DocumentPreview.doc_url/0}
      generate_download_url={&Storybook.DocumentPreview.doc_url/0}
      external_link={nil}
      uploaded_date="May 13, 2024"
      id_for_url="2"
    />
  </.document_preview>
</div>
With pdf Open in playground

sample.pdf

May 13, 2023 • 0.08MB

Download
Download 
<div data-test-id="document-preview-variation-container">
  <.button
    id={"button-document-preview-single-with-pdf"}
    phx-click={DesignSystem.show_document_preview("document-preview-single-with-pdf")}
  >
    Open document preview
  </.button>

  <.document_preview id="document-preview-single-with-pdf">
    <:document
      id="sample_pdf"
      name="sample.pdf"
      generate_preview_url={&Storybook.DocumentPreview.pdf_url/0}
      generate_download_url={&Storybook.DocumentPreview.pdf_url/0}
      external_link={nil}
      uploaded_date="May 13, 2023"
      id_for_url="1"
    />
  </.document_preview>
</div>
With multiple documents Open in playground

sample.pdf

May 13, 2023 • 0.08MB

Download
Download 
<div data-test-id="document-preview-variation-container">
  <.button
    id={"button-document-preview-single-with-multiple-documents"}
    phx-click={DesignSystem.show_document_preview("document-preview-single-with-multiple-documents")}
  >
    Open document preview
  </.button>

  <.document_preview id="document-preview-single-with-multiple-documents">
    <:document
      id="sample_pdf"
      name="sample.pdf"
      generate_preview_url={&Storybook.DocumentPreview.pdf_url/0}
      generate_download_url={&Storybook.DocumentPreview.pdf_url/0}
      external_link={nil}
      uploaded_date="May 13, 2023"
      id_for_url="1"
    />
    <:document
      id="sample_doc"
      name="sample.doc"
      generate_preview_url={&Storybook.DocumentPreview.doc_url/0}
      generate_download_url={&Storybook.DocumentPreview.doc_url/0}
      external_link={nil}
      uploaded_date="May 13, 2024"
      id_for_url="2"
    />
    <:document
      id="sample_jpg"
      name="sample.jpg"
      generate_preview_url={&Storybook.DocumentPreview.jpg_url/0}
      generate_download_url={&Storybook.DocumentPreview.jpg_url/0}
      external_link={nil}
      uploaded_date="May 13, 2024"
      id_for_url="3"
    />
  </.document_preview>
</div>
With custom labels Open in playground

sample.pdf

Sent on May 13, 2023 • 0.08MB

Download
Download 
<div data-test-id="document-preview-variation-container">
  <.button
    id={"button-document-preview-single-with-custom-labels"}
    phx-click={DesignSystem.show_document_preview("document-preview-single-with-custom-labels")}
  >
    Open document preview
  </.button>

  <.document_preview
    id="document-preview-single-with-custom-labels"
    file_info_prefix="Sent on"
    previous_navigation_text="Previous file"
    next_navigation_text="Next file"
  >
    <:document
      id="sample_pdf"
      name="sample.pdf"
      generate_preview_url={&Storybook.DocumentPreview.pdf_url/0}
      generate_download_url={&Storybook.DocumentPreview.pdf_url/0}
      external_link={nil}
      uploaded_date="May 13, 2023"
      id_for_url="1"
    />
    <:document
      id="sample_doc"
      name="sample.doc"
      generate_preview_url={&Storybook.DocumentPreview.doc_url/0}
      generate_download_url={&Storybook.DocumentPreview.doc_url/0}
      external_link={nil}
      uploaded_date="May 13, 2024"
      id_for_url="2"
    />
    <:document
      id="sample_jpg"
      name="sample.jpg"
      generate_preview_url={&Storybook.DocumentPreview.jpg_url/0}
      generate_download_url={&Storybook.DocumentPreview.jpg_url/0}
      external_link={nil}
      uploaded_date="May 13, 2024"
      id_for_url="3"
    />
  </.document_preview>
</div>
With document specific file info prefixes Open in playground

sample.pdf

Sent on May 13, 2023 • 0.08MB

Download
Download 
<div data-test-id="document-preview-variation-container">
  <.button
    id={"button-document-preview-single-with-document-specific-file-info-prefixes"}
    phx-click={DesignSystem.show_document_preview("document-preview-single-with-document-specific-file-info-prefixes")}
  >
    Open document preview
  </.button>

  <.document_preview id="document-preview-single-with-document-specific-file-info-prefixes">
    <:document
      id="sample_pdf"
      name="sample.pdf"
      generate_preview_url={&Storybook.DocumentPreview.pdf_url/0}
      generate_download_url={&Storybook.DocumentPreview.pdf_url/0}
      external_link={nil}
      uploaded_date="May 13, 2023"
      file_info_prefix="Sent on"
      id_for_url="1"
    />
    <:document
      id="sample_doc"
      name="sample.doc"
      generate_preview_url={&Storybook.DocumentPreview.doc_url/0}
      generate_download_url={&Storybook.DocumentPreview.doc_url/0}
      external_link={nil}
      uploaded_date="May 13, 2024"
      file_info_prefix="Received on"
      id_for_url="2"
    />
    <:document
      id="sample_jpg"
      name="sample.jpg"
      generate_preview_url={&Storybook.DocumentPreview.jpg_url/0}
      generate_download_url={&Storybook.DocumentPreview.jpg_url/0}
      external_link={nil}
      uploaded_date="May 13, 2024"
      file_info_prefix="Uploaded on"
      id_for_url="3"
    />
  </.document_preview>
</div>
Hides previous/next navigation and disables cycling between documents. Open in playground

sample.pdf

May 13, 2023 • 0.08MB

Download
Download 
<div data-test-id="document-preview-variation-container">
  <.button
    id={"button-document-preview-single-without-document-cycling"}
    phx-click={DesignSystem.show_document_preview("document-preview-single-without-document-cycling")}
  >
    Open document preview
  </.button>

  <.document_preview id="document-preview-single-without-document-cycling">
    <:document
      id="sample_pdf"
      name="sample.pdf"
      generate_preview_url={&Storybook.DocumentPreview.pdf_url/0}
      generate_download_url={&Storybook.DocumentPreview.pdf_url/0}
      external_link={nil}
      uploaded_date="May 13, 2023"
      id_for_url="1"
    />
    <:document
      id="sample_doc"
      name="sample.doc"
      generate_preview_url={&Storybook.DocumentPreview.doc_url/0}
      generate_download_url={&Storybook.DocumentPreview.doc_url/0}
      external_link={nil}
      uploaded_date="May 13, 2024"
      id_for_url="2"
    />
    <:document
      id="sample_jpg"
      name="sample.jpg"
      generate_preview_url={&Storybook.DocumentPreview.jpg_url/0}
      generate_download_url={&Storybook.DocumentPreview.jpg_url/0}
      external_link={nil}
      uploaded_date="May 13, 2024"
      id_for_url="3"
    />
  </.document_preview>
</div>
With action info Open in playground

sample.pdf

May 13, 2023 • 0.08MB

Shared with customer

Download

Shared with customer

Download 
<div data-test-id="document-preview-variation-container">
  <.button
    id={"button-document-preview-single-with-action-info"}
    phx-click={DesignSystem.show_document_preview("document-preview-single-with-action-info")}
  >
    Open document preview
  </.button>

  <.document_preview id="document-preview-single-with-action-info">
    <:document
      id="sample_pdf"
      name="sample.pdf"
      generate_preview_url={&Storybook.DocumentPreview.pdf_url/0}
      generate_download_url={&Storybook.DocumentPreview.pdf_url/0}
      external_link={nil}
      uploaded_date="May 13, 2023"
      action_info_icon="info"
      action_info_text="Shared with customer"
      id_for_url="1"
    />
    <:document
      id="sample_doc"
      name="sample.doc"
      generate_preview_url={&Storybook.DocumentPreview.doc_url/0}
      generate_download_url={&Storybook.DocumentPreview.doc_url/0}
      external_link={nil}
      uploaded_date="May 13, 2024"
      action_info_icon="warning"
      action_info_text="Requires download"
      id_for_url="2"
    />
    <:document
      id="sample_jpg"
      name="sample.jpg"
      generate_preview_url={&Storybook.DocumentPreview.jpg_url/0}
      generate_download_url={&Storybook.DocumentPreview.jpg_url/0}
      external_link={nil}
      uploaded_date="May 13, 2024"
      action_info_icon="link-simple"
      action_info_text="External asset"
      id_for_url="3"
    />
  </.document_preview>
</div>
With custom action Open in playground

sample.pdf

May 13, 2023 • 0.08MB

Download
Download 
<div data-test-id="document-preview-variation-container">
  <.button
    id={"button-document-preview-single-with-custom-action"}
    phx-click={DesignSystem.show_document_preview("document-preview-single-with-custom-action")}
  >
    Open document preview
  </.button>

  <.document_preview id="document-preview-single-with-custom-action">
    <:document
      id="sample_pdf"
      name="sample.pdf"
      generate_preview_url={&Storybook.DocumentPreview.pdf_url/0}
      generate_download_url={&Storybook.DocumentPreview.pdf_url/0}
      custom_action_on_click={Phoenix.LiveView.JS.push("preview_pdf_elsewhere")}
      external_link={nil}
      uploaded_date="May 13, 2023"
      custom_action_icon="eye"
      custom_action_label="Preview PDF elsewhere"
      id_for_url="1"
    />
    <:document
      id="sample_doc"
      name="sample.doc"
      generate_preview_url={&Storybook.DocumentPreview.doc_url/0}
      generate_download_url={&Storybook.DocumentPreview.doc_url/0}
      custom_action_on_click={Phoenix.LiveView.JS.push("send_doc_for_review")}
      external_link={nil}
      uploaded_date="May 13, 2024"
      custom_action_icon="paper-plane-tilt"
      custom_action_label="Send DOC for review"
      id_for_url="2"
    />
    <:document
      id="sample_jpg"
      name="sample.jpg"
      generate_preview_url={&Storybook.DocumentPreview.jpg_url/0}
      generate_download_url={&Storybook.DocumentPreview.jpg_url/0}
      custom_action_on_click={Phoenix.LiveView.JS.push("copy_image_link")}
      external_link={nil}
      uploaded_date="May 13, 2024"
      custom_action_icon="link-simple"
      custom_action_label="Copy image link"
      id_for_url="3"
    />
  </.document_preview>
</div>
When param_name_to_add_in_url is provided, adds the id_for_url of the active document to the URL when open. Open in playground

sample.pdf

May 13, 2023 • 0.08MB

Download
Download 
<div data-test-id="document-preview-variation-container">
  <.button
    id={"button-document-preview-single-with-params-name"}
    phx-click={DesignSystem.show_document_preview("document-preview-single-with-params-name")}
  >
    Open document preview
  </.button>

  <.document_preview
    id="document-preview-single-with-params-name"
    param_name_to_add_in_url="document_id"
  >
    <:document
      id="sample_pdf"
      name="sample.pdf"
      generate_preview_url={&Storybook.DocumentPreview.pdf_url/0}
      generate_download_url={&Storybook.DocumentPreview.pdf_url/0}
      external_link={nil}
      uploaded_date="May 13, 2023"
      id_for_url="1"
    />
    <:document
      id="sample_doc"
      name="sample.doc"
      generate_preview_url={&Storybook.DocumentPreview.doc_url/0}
      generate_download_url={&Storybook.DocumentPreview.doc_url/0}
      external_link={nil}
      uploaded_date="May 13, 2024"
      id_for_url="2"
    />
    <:document
      id="sample_jpg"
      name="sample.jpg"
      generate_preview_url={&Storybook.DocumentPreview.jpg_url/0}
      generate_download_url={&Storybook.DocumentPreview.jpg_url/0}
      external_link={nil}
      uploaded_date="May 13, 2024"
      id_for_url="3"
    />
  </.document_preview>
</div>
Files with uppercase extensions (e.g. .JPG, .PDF) are still rendered as image or PDF previews thanks to case-insensitive extension matching. Open in playground

DSC_0001.JPG

May 13, 2024 • 0.13MB

Download
Download
Preview of DSC_0001.JPG 
<div data-test-id="document-preview-variation-container">
  <.button
    id={"button-document-preview-single-with-uppercase-file-extensions"}
    phx-click={DesignSystem.show_document_preview("document-preview-single-with-uppercase-file-extensions")}
  >
    Open document preview
  </.button>

  <.document_preview id="document-preview-single-with-uppercase-file-extensions">
    <:document
      id="sample_jpg_uppercase"
      name="DSC_0001.JPG"
      generate_preview_url={&Storybook.DocumentPreview.jpg_url/0}
      generate_download_url={&Storybook.DocumentPreview.jpg_url/0}
      external_link={nil}
      uploaded_date="May 13, 2024"
      id_for_url="4"
    />
    <:document
      id="sample_pdf_uppercase"
      name="Report.PDF"
      generate_preview_url={&Storybook.DocumentPreview.pdf_url/0}
      generate_download_url={&Storybook.DocumentPreview.pdf_url/0}
      external_link={nil}
      uploaded_date="May 13, 2023"
      id_for_url="5"
    />
  </.document_preview>
</div>
When no documents are provided, doesn't open any document preview dialog Open in playground
No documents to preview 
<div data-test-id="document-preview-variation-container">
  <.button
    id={"button-document-preview-single-with-no-documents"}
    phx-click={DesignSystem.show_document_preview("document-preview-single-with-no-documents")}
  >
    Open document preview
  </.button>

  <.document_preview id="document-preview-single-with-no-documents"/>
</div>