feat(uploader): add component

CHANGELOG.react.md

@@ -14,11 +14,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 -   Multiple Autocomplete component [#209](https://github.com/lumapps/design-system/pull/209)
 -   `isHighlighted` prop for `Chip` component [#209](https://github.com/lumapps/design-system/pull/209)
 -   Added `isClearable` and `chips` props for Autocomplete [#209](https://github.com/lumapps/design-system/pull/209)
+-   Uploader component [#208](https://github.com/lumapps/design-system/pull/208)
 
 ### Changed
 
 -   `Popover` bug that made the content be displayed on the top left corner.
 -   Make autocomplete multiple demo remove a value upon clicking on the entire chip.
+-   Deprecated `ThumbnailAspectRatio` (use `AspectRatio` instead) [#208](https://github.com/lumapps/design-system/pull/208)
 
 ### Removed
 

demo/angularjs/app.js

@@ -346,6 +346,16 @@ function AppDefaultConfig($locationProvider, $stateProvider, markedProvider) {
                 },
             },
         })
+        .state('app.product.components.uploader', {
+            url: 'uploader',
+            views: {
+                'main@': {
+                    controller: 'DemoUploaderController',
+                    controllerAs: 'vm',
+                    template: require('./components/uploader/demo.html'),
+                },
+            },
+        })
         .state('app.product.components.user-block', {
             url: 'user-block',
             views: {
@@ -438,5 +448,6 @@ require('./components/table/controller.js');
 require('./components/tabs/controller.js');
 require('./components/text-field/controller.js');
 require('./components/toolbar/controller.js');
+require('./components/uploader/controller.js');
 require('./components/user-block/controller.js');
 /* eslint-enable import/no-unassigned-import */

demo/angularjs/components/uploader/controller.js

@@ -0,0 +1,34 @@
+import { mdiImagePlus } from 'LumX/icons';
+
+/////////////////////////////
+
+function DemoUploaderController() {
+    'ngInject';
+
+    const vm = this;
+
+    /////////////////////////////
+    //                         //
+    //    Public attributes    //
+    //                         //
+    /////////////////////////////
+
+    /**
+     * The icons to use in the template.
+     *
+     * @type {Object}
+     * @constant
+     * @readonly
+     */
+    vm.icons = {
+        mdiImagePlus,
+    };
+}
+
+/////////////////////////////
+
+angular.module('design-system').controller('DemoUploaderController', DemoUploaderController);
+
+/////////////////////////////
+
+export { DemoUploaderController };

demo/angularjs/components/uploader/demo.html

@@ -0,0 +1,2 @@
+<main-header category="Components"></main-header>
+<main-content component="uploader"></main-content>

demo/angularjs/components/uploader/doc.md

@@ -0,0 +1,9 @@
+# Uploader
+
+## Default
+
+<demo-block component="uploader" partial="default"></demo-block>
+
+## Circle
+
+<demo-block component="uploader" partial="circle"></demo-block>

demo/angularjs/components/uploader/partials/circle.html

@@ -0,0 +1,8 @@
+<lumx-uploader
+    lumx-aspect-ratio="square"
+    lumx-icon="{{ vm.icons.mdiImagePlus }}"
+    lumx-label="Add profile picture"
+    lumx-size="xl"
+    lumx-theme="{{ demoBlock.theme }}"
+    lumx-variant="circle"
+></lumx-uploader>

demo/angularjs/components/uploader/partials/default.html

@@ -0,0 +1,5 @@
+<lumx-uploader
+    lumx-icon="{{ vm.icons.mdiImagePlus }}"
+    lumx-label="Add profile picture"
+    lumx-theme="{{ demoBlock.theme }}"
+></lumx-uploader>

demo/angularjs/layout/main-nav/main-nav_controller.js

@@ -157,6 +157,10 @@ function MainNavController($state) {
                             label: 'Tooltip',
                             state: 'app.product.components.tooltip',
                         },
+                        {
+                            label: 'Uploader',
+                            state: 'app.product.components.uploader',
+                        },
                         {
                             label: 'User block',
                             state: 'app.product.components.user-block',

demo/react/components/slideshow/default.tsx

@@ -1,13 +1,13 @@
 import React, { CSSProperties, ReactElement } from 'react';
 
 import {
+    AspectRatio,
     ImageBlock,
     ImageBlockCaptionPosition,
     ImageBlockProps,
     Slideshow,
     SlideshowItem,
     Theme,
-    ThumbnailAspectRatio,
 } from 'LumX';
 
 /////////////////////////////
@@ -49,14 +49,14 @@ const DemoComponent: React.FC<IProps> = ({ theme }: IProps): ReactElement => (
             </SlideshowItem>
             <SlideshowItem>
                 <ImageBlock
-                    aspectRatio={ThumbnailAspectRatio.vertical}
+                    aspectRatio={AspectRatio.vertical}
                     theme={theme}
                     image="https://picsum.photos/640/480/?image=24"
                 />
             </SlideshowItem>
             <SlideshowItem>
                 <ImageBlock
-                    aspectRatio={ThumbnailAspectRatio.horizontal}
+                    aspectRatio={AspectRatio.horizontal}
                     theme={theme}
                     image="https://picsum.photos/640/480/?image=25"
                 />
@@ -66,15 +66,15 @@ const DemoComponent: React.FC<IProps> = ({ theme }: IProps): ReactElement => (
             </SlideshowItem>
             <SlideshowItem>
                 <ImageBlock
-                    aspectRatio={ThumbnailAspectRatio.vertical}
+                    aspectRatio={AspectRatio.vertical}
                     theme={theme}
                     image="https://picsum.photos/640/480/?image=27"
                     {...imageBlockDemoProps}
                 />
             </SlideshowItem>
             <SlideshowItem>
                 <ImageBlock
-                    aspectRatio={ThumbnailAspectRatio.horizontal}
+                    aspectRatio={AspectRatio.horizontal}
                     theme={theme}
                     image="https://picsum.photos/640/480/?image=28"
                     {...imageBlockDemoProps}
@@ -90,7 +90,7 @@ const DemoComponent: React.FC<IProps> = ({ theme }: IProps): ReactElement => (
             </SlideshowItem>
             <SlideshowItem>
                 <ImageBlock
-                    aspectRatio={ThumbnailAspectRatio.vertical}
+                    aspectRatio={AspectRatio.vertical}
                     captionPosition={ImageBlockCaptionPosition.over}
                     image="https://picsum.photos/640/480/?image=30"
                     theme={theme}
@@ -99,7 +99,7 @@ const DemoComponent: React.FC<IProps> = ({ theme }: IProps): ReactElement => (
             </SlideshowItem>
             <SlideshowItem>
                 <ImageBlock
-                    aspectRatio={ThumbnailAspectRatio.horizontal}
+                    aspectRatio={AspectRatio.horizontal}
                     captionPosition={ImageBlockCaptionPosition.over}
                     image="https://picsum.photos/640/480/?image=31"
                     theme={theme}

demo/react/doc/product/components/image-block.mdx

@@ -12,7 +12,7 @@ import {
     ImageBlockProps,
     Size,
     Theme,
-    ThumbnailAspectRatio
+    AspectRatio
 } from '@lumx/react';
 import { mdiPencil, mdiEye, mdiDelete } from '@lumx/icons';
 
@@ -59,7 +59,7 @@ Image blocks support thumbnail's different formats (see [thumbnail](/thumbnail))
                 </div>
             </Grid>
         }
-        aspectRatio={ThumbnailAspectRatio.horizontal}
+        aspectRatio={AspectRatio.horizontal}
         description="Lorem ipsum dolor sit amet, consectur adipiscing "
         tags={
             <Grid>
@@ -89,7 +89,7 @@ A custom padding can be added.
 ```javascript jsx withThemeSwitcher disableGrid
 (theme) => (
     <ImageBlock
-        aspectRatio={ThumbnailAspectRatio.horizontal}
+        aspectRatio={AspectRatio.horizontal}
         captionStyle={{ padding: 32 }}
         description="Lorem ipsum dolor sit amet, consectur adipiscing "
         tags={
@@ -120,7 +120,7 @@ Info can be placed over the image.
 ```javascript jsx withThemeSwitcher disableGrid
 (theme) => (
     <ImageBlock
-        aspectRatio={ThumbnailAspectRatio.horizontal}
+        aspectRatio={AspectRatio.horizontal}
         captionPosition={ImageBlockCaptionPosition.over}
         description="Lorem ipsum dolor sit amet, consectur adipiscing "
         tags={
@@ -152,7 +152,7 @@ There are three alignments: _left_, _center_ and, _right_.
 (theme) => (
     <ImageBlock
         align={Alignment.center}
-        aspectRatio={ThumbnailAspectRatio.original}
+        aspectRatio={AspectRatio.original}
         description="Lorem ipsum dolor sit amet, consectur adipiscing "
         tags={
             <Grid>

demo/react/doc/product/components/thumbnail.mdx

@@ -1,5 +1,5 @@
 ```javascript import
-import { Size, Theme, Thumbnail, ThumbnailAspectRatio, ThumbnailVariant } from '@lumx/react';
+import { Size, Theme, Thumbnail, AspectRatio, ThumbnailVariant } from '@lumx/react';
 ```
 
 # Thumbnail
@@ -33,10 +33,10 @@ Thumbnails come in 4 ratios: _square_, _original_, _vertical_, and _horizontal_.
 ```javascript jsx
 (theme) => (
     <>
-        <Thumbnail aspectRatio={ThumbnailAspectRatio.square} image="https://picsum.photos/150" theme={theme} />
-        <Thumbnail aspectRatio={ThumbnailAspectRatio.original} image="https://picsum.photos/150/80/" theme={theme} />
-        <Thumbnail aspectRatio={ThumbnailAspectRatio.vertical} image="https://picsum.photos/150/150" theme={theme} />
-        <Thumbnail aspectRatio={ThumbnailAspectRatio.horizontal} image="https://picsum.photos/150/150" theme={theme} />
+        <Thumbnail aspectRatio={AspectRatio.square} image="https://picsum.photos/150" theme={theme} />
+        <Thumbnail aspectRatio={AspectRatio.original} image="https://picsum.photos/150/80/" theme={theme} />
+        <Thumbnail aspectRatio={AspectRatio.vertical} image="https://picsum.photos/150/150" theme={theme} />
+        <Thumbnail aspectRatio={AspectRatio.horizontal} image="https://picsum.photos/150/150" theme={theme} />
     </>
 );
 ```
@@ -60,21 +60,21 @@ Thumbnails come in two variants: _squared_ and _rounded_
 (theme) => (
     <>
         <Thumbnail
-            aspectRatio={ThumbnailAspectRatio.original}
+            aspectRatio={AspectRatio.original}
             image="https://picsum.photos/320/240"
             size={Size.l}
             theme={theme}
             variant={ThumbnailVariant.rounded}
         />
         <Thumbnail
-            aspectRatio={ThumbnailAspectRatio.vertical}
+            aspectRatio={AspectRatio.vertical}
             image="https://picsum.photos/240/320"
             size={Size.m}
             theme={theme}
             variant={ThumbnailVariant.rounded}
         />
         <Thumbnail
-            aspectRatio={ThumbnailAspectRatio.square}
+            aspectRatio={AspectRatio.square}
             image="https://picsum.photos/128"
             size={Size.xl}
             theme={theme}

demo/react/doc/product/components/uploader.mdx

@@ -0,0 +1,48 @@
+```javascript import
+import { Uploader, UploaderVariant } from '@lumx/react';
+import { mdiImagePlus } from '@lumx/icons';
+```
+
+# Uploader
+
+## Default
+
+```javascript jsx withThemeSwitcher
+(theme) => (
+    <Uploader
+        icon={mdiImagePlus}
+        label="Add profile picture"
+        theme={theme}
+    />
+);
+```
+
+## Rounded
+
+```javascript jsx withThemeSwitcher
+(theme) => (
+    <Uploader
+        icon={mdiImagePlus}
+        label="Add profile picture"
+        theme={theme}
+        variant={UploaderVariant.rounded}
+    />
+);
+```
+
+## Circle
+
+```javascript jsx withThemeSwitcher
+(theme) => (
+    <Uploader
+        icon={mdiImagePlus}
+        label="Add profile picture"
+        theme={theme}
+        variant={UploaderVariant.circle}
+    />
+);
+```
+
+### Properties
+
+<PropTable component="Uploader" />

demo/react/layout/MainNav.tsx

@@ -76,6 +76,7 @@ const ITEMS: Item[] = [
                     'Thumbnail',
                     'Toolbar',
                     'Tooltip',
+                    'Uploader',
                     'User block',
                 ],
             },

src/angularjs.index.js

@@ -59,4 +59,5 @@ import './components/text-field/angularjs/text-field_directive';
 import './components/thumbnail/angularjs/thumbnail_directive';
 import './components/toolbar/angularjs/toolbar_directive';
 import './components/tooltip/angularjs/tooltip_directive';
+import './components/uploader/angularjs/uploader_directive';
 import './components/user-block/angularjs/user-block_directive';

src/components/editable-media/react/EditableMedia.tsx

@@ -9,7 +9,7 @@ import { Callback, IGenericProps, getRootClassName } from 'LumX/core/react/utils
 import { Size, Theme } from 'LumX/components/index';
 import { handleBasicClasses, onEnterPressed } from 'LumX/core/utils';
 
-import { Avatar, Icon, Thumbnail, ThumbnailAspectRatio, ThumbnailVariant } from 'LumX';
+import { AspectRatio, Avatar, Icon, Thumbnail, ThumbnailVariant } from 'LumX';
 import { mdiImagePlus } from 'LumX/icons';
 
 import noop from 'lodash/noop';
@@ -147,7 +147,7 @@ const EditableMedia: React.FC<EditableMediaProps> = ({
             {image && variant === 'thumbnail' && (
                 <div className="lumx-editable-media__thumbnail">
                     <Thumbnail
-                        aspectRatio={ThumbnailAspectRatio.horizontal}
+                        aspectRatio={AspectRatio.horizontal}
                         image={image}
                         size={size}
                         theme={theme}

src/components/image-block/react/ImageBlock.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import isObject from 'lodash/isObject';
 
-import { Alignment, Theme, Thumbnail, ThumbnailAspectRatio } from 'LumX';
+import { AspectRatio, Alignment, Theme, Thumbnail } from 'LumX';
 
 import { COMPONENT_PREFIX } from 'LumX/core/react/constants';
 import { IGenericProps, getRootClassName } from 'LumX/core/react/utils';
@@ -27,7 +27,7 @@ interface IImageBlockProps extends IGenericProps {
     /** The caption wrapper alignment. */
     align?: Alignment;
     /** The aspect ratio the image will get. */
-    aspectRatio?: ThumbnailAspectRatio;
+    aspectRatio?: AspectRatio;
     /** Caption position. */
     captionPosition?: ImageBlockCaptionPosition;
     /** The style to apply to the caption section. */
@@ -80,7 +80,7 @@ const CLASSNAME: string = getRootClassName(COMPONENT_NAME);
 const DEFAULT_PROPS: IDefaultPropsType = {
     actions: undefined,
     align: Alignment.left,
-    aspectRatio: ThumbnailAspectRatio.original,
+    aspectRatio: AspectRatio.original,
     captionPosition: ImageBlockCaptionPosition.below,
     captionStyle: {},
     description: undefined,
@@ -127,8 +127,8 @@ const ImageBlock: React.FC<ImageBlockProps> = ({
                 }),
                 {
                     [`${CLASSNAME}--fill-height`]: fillHeight,
-                    [`${CLASSNAME}--format-crop`]: aspectRatio && aspectRatio !== ThumbnailAspectRatio.original,
-                    [`${CLASSNAME}--format-original`]: !aspectRatio || aspectRatio === ThumbnailAspectRatio.original,
+                    [`${CLASSNAME}--format-crop`]: aspectRatio && aspectRatio !== AspectRatio.original,
+                    [`${CLASSNAME}--format-original`]: !aspectRatio || aspectRatio === AspectRatio.original,
                 },
             )}
             {...restProps}