Feat(web-twig): Attachment image preview object fit #DS-1005

- Now accepts cover/contain value for objectFit prop to `FileUploaderAttachment` component
lmc-eu · Oct 23, 2023 · bef5068 · bef5068
1 parent b394b3d
commit bef5068
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 12 deletions.
diff --git a/packages/web-twig/src/Resources/components/FileUploader/FileUploaderAttachment.twig b/packages/web-twig/src/Resources/components/FileUploader/FileUploaderAttachment.twig
@@ -7,6 +7,7 @@
 {%- set _imagePreview = props.imagePreview | default(null) -%}
 {%- set _onEdit = props.onEdit | default(null) -%}
 {%- set _removeText = props.removeText | default('Remove') -%}
+{%- set _objectFit = props.objectFit | default('cover') -%}
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'FileUploaderAttachment' -%}
@@ -18,6 +19,7 @@
 
 {# Attributes #}
 {%- set _dataImagePreviewAttr = _generateImagePreview ? 'data-spirit-imagePreview="true"' : null -%}
+{%- set _objectFitAttr = _objectFit ? 'data-spirit-object-fit=' ~ _objectFit : null -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
@@ -32,7 +34,7 @@
     {{ _dataImagePreviewAttr | raw }}
 >
     {% if _generateImagePreview or _imagePreview %}
-        <span class="{{ _imageClassName }}">
+        <span class="{{ _imageClassName }}" {{ _objectFitAttr }}>
             <img src="{{ _imagePreview }}" width="54" height="54" alt="{{- _fileName -}}" />
         </span>
     {% endif %}

diff --git a/packages/web-twig/src/Resources/components/FileUploader/README.md b/packages/web-twig/src/Resources/components/FileUploader/README.md
@@ -6,10 +6,26 @@ FileUploader allows users to pick one or more files to upload.
 
 FileUploader is a composition of a few subcomponents:
 
-- [FileUploader](#fileuploader-1)
+- [FileUploader](#fileuploader)
+  - [JavaScript Plugin](#javascript-plugin)
+  - [FileUploader](#fileuploader-1)
+    - [Fluid Width](#fluid-width)
+    - [API](#api)
   - [FileUploaderInput](#fileuploaderinput)
+    - [Selecting Multiple Files at Once](#selecting-multiple-files-at-once)
+    - [Maximum File Size (JavaScript)](#maximum-file-size-javascript)
+    - [Maximum Number of Files in Queue (JavaScript)](#maximum-number-of-files-in-queue-javascript)
+    - [Input Behavior When the Queue is Filled (JavaScript)](#input-behavior-when-the-queue-is-filled-javascript)
+    - [Allowed File Types](#allowed-file-types)
+    - [Required Input](#required-input)
+    - [Validation States](#validation-states)
+    - [Disabled State](#disabled-state)
+    - [API](#api-1)
   - [FileUploaderList](#fileuploaderlist)
-    - [FileUploaderAttachment](#fileuploaderattachment)
+    - [API](#api-2)
+  - [FileUploaderAttachment](#fileuploaderattachment)
+    - [API](#api-3)
+  - [Composition](#composition)
 
 ## JavaScript Plugin
 
@@ -283,15 +299,16 @@ With image preview:
 
 ### API
 
-| Name                   | Type     | Default  | Required | Description                                                                                        |
-| ---------------------- | -------- | -------- | -------- | -------------------------------------------------------------------------------------------------- |
-| `editText`             | `string` | `Edit`   | ✕        | Edit button text                                                                                   |
-| `fileName`             | `string` | `null`   | ✕        | File name                                                                                          |
-| `generateImagePreview` | `bool`   | `false`  | ✕        | If true and used in the attachment template, the JS plugin will try to show a preview of the image |
-| `iconName`             | `string` | `file`   | ✕        | Icon shown along the file                                                                          |
-| `imagePreview`         | `string` | `null`   | ✕        | URL or base64 of an image                                                                          |
-| `onEdit`               | `func`   | `null`   | ✕        | Function to trigger on click on edit button                                                        |
-| `removeText`           | `string` | `Remove` | ✕        | Remove button text                                                                                 |
+| Name                   | Type                   | Default  | Required | Description                                                                                        |
+| ---------------------- | ---------------------- | -------- | -------- | -------------------------------------------------------------------------------------------------- |
+| `editText`             | `string`               | `Edit`   | ✕        | Edit button text                                                                                   |
+| `fileName`             | `string`               | `null`   | ✕        | File name                                                                                          |
+| `generateImagePreview` | `bool`                 | `false`  | ✕        | If true and used in the attachment template, the JS plugin will try to show a preview of the image |
+| `iconName`             | `string`               | `file`   | ✕        | Icon shown along the file                                                                          |
+| `imagePreview`         | `string`               | `null`   | ✕        | URL or base64 of an image                                                                          |
+| `objectFit`            | [`cover` \| `contain`] | `cover`  | ✕        | CSS value for image preview in FileUploaderAttachment                                              |
+| `onEdit`               | `func`                 | `null`   | ✕        | Function to trigger on click on edit button                                                        |
+| `removeText`           | `string`               | `Remove` | ✕        | Remove button text                                                                                 |
 
 On top of the API options, you can add `data-*` or `aria-*` attributes to
 further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available,