feat(demo): use images instead of plain colors

Use images instead of plain colors in all demos
Closes #28

Author: mlopezFC

src/test/java/com/flowingcode/vaadin/addons/carousel/AutoProgressDemo.java

@@ -33,10 +33,11 @@
 public class AutoProgressDemo extends VerticalLayout {
 
   public AutoProgressDemo() {
-    Slide s1 = new Slide(createSlideContent("Slide 1", "green"));
-    Slide s2 = new Slide(createSlideContent("Slide 2", "blue"));
-    Slide s3 = new Slide(createSlideContent("Slide 3", "red"));
-    Slide s4 = new Slide(createSlideContent("Slide 4", "yellow"));
+	Slide s1 = new Slide(CarouselDemoView.createSlideContent("Slide 1", "https://www.flowingcode.com/wp-content/uploads/2018/04/birthday-3021071_640.jpg"));
+	Slide s2 = new Slide(CarouselDemoView.createSlideContent("Slide 2", "https://2.bp.blogspot.com/-nvtIfgN8duc/XKUQh9VEyFI/AAAAAAAABT8/mE7P45E2uqwWlkKimAmes7fT2rdW9UDWwCEwYBhgL/s320/anniversary_1.jpg"));
+	Slide s3 = new Slide(CarouselDemoView.createSlideContent("Slide 3", "https://www.flowingcode.com/wp-content/uploads/2020/04/photo4blog-300x300.jpg"));
+	Slide s4 = new Slide(CarouselDemoView.createSlideContent("Slide 4", "https://www.flowingcode.com/wp-content/uploads/2021/03/happy_birthday_2.jpg"));
+
 
     Carousel c =
         new Carousel(s1, s2, s3, s4)
@@ -49,14 +50,4 @@ public AutoProgressDemo() {
     add(c);
   }
 
-  private Component createSlideContent(String string, String color) {
-    H1 label = new H1(string);
-    label.getStyle().set("margin-top", "auto");
-    label.getStyle().set("margin-bottom", "auto");
-    VerticalLayout d = new VerticalLayout(label);
-    d.setAlignItems(Alignment.CENTER);
-    d.setSizeFull();
-    d.getStyle().set("background-color", color);
-    return d;
-  }
 }

src/test/java/com/flowingcode/vaadin/addons/carousel/CarouselDemoView.java

@@ -22,6 +22,8 @@
 import com.flowingcode.vaadin.addons.DemoLayout;
 import com.flowingcode.vaadin.addons.GithubLink;
 import com.flowingcode.vaadin.addons.demo.TabbedDemo;
+import com.vaadin.flow.component.Component;
+import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.router.ParentLayout;
 import com.vaadin.flow.router.Route;
 
@@ -37,4 +39,15 @@ public CarouselDemoView() {
     addDemo(SlideButtonsDemo.class);
     setSizeFull();
   }
+  
+  public static Component createSlideContent(String string, String image) {
+	Div result = new Div();
+	result.getStyle().set("width", "auto");
+	result.getStyle().set("height", "100%");
+	result.getStyle().set("background-image", "url('" + image + "')");
+	result.getStyle().set("background-size", "cover");
+	result.getStyle().set("background-repeat", "no-repeat");
+	result.getStyle().set("background-position", "50% 50%");
+    return result;
+  }
 }

src/test/java/com/flowingcode/vaadin/addons/carousel/ListenerDemo.java

@@ -21,7 +21,7 @@
 
 import com.flowingcode.vaadin.addons.demo.DemoSource;
 import com.vaadin.flow.component.Component;
-import com.vaadin.flow.component.html.H1;
+import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.notification.Notification;
 import com.vaadin.flow.component.notification.Notification.Position;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
@@ -35,10 +35,10 @@
 public class ListenerDemo extends VerticalLayout {
 
   public ListenerDemo() {
-    Slide s1 = new Slide(createSlideContent("Slide 1", "green"));
-    Slide s2 = new Slide(createSlideContent("Slide 2", "blue"));
-    Slide s3 = new Slide(createSlideContent("Slide 3", "red"));
-    Slide s4 = new Slide(createSlideContent("Slide 4", "yellow"));
+    Slide s1 = new Slide(CarouselDemoView.createSlideContent("Slide 1", "https://www.flowingcode.com/wp-content/uploads/2018/04/birthday-3021071_640.jpg"));
+    Slide s2 = new Slide(CarouselDemoView.createSlideContent("Slide 2", "https://2.bp.blogspot.com/-nvtIfgN8duc/XKUQh9VEyFI/AAAAAAAABT8/mE7P45E2uqwWlkKimAmes7fT2rdW9UDWwCEwYBhgL/s320/anniversary_1.jpg"));
+    Slide s3 = new Slide(CarouselDemoView.createSlideContent("Slide 3", "https://www.flowingcode.com/wp-content/uploads/2020/04/photo4blog-300x300.jpg"));
+    Slide s4 = new Slide(CarouselDemoView.createSlideContent("Slide 4", "https://www.flowingcode.com/wp-content/uploads/2021/03/happy_birthday_2.jpg"));
 
     Carousel c = new Carousel(s1, s2, s3, s4);
     c.setSizeFull();
@@ -47,14 +47,4 @@ public ListenerDemo() {
     add(c);
   }
 
-  private Component createSlideContent(String string, String color) {
-    H1 label = new H1(string);
-    label.getStyle().set("margin-top", "auto");
-    label.getStyle().set("margin-bottom", "auto");
-    VerticalLayout d = new VerticalLayout(label);
-    d.setAlignItems(Alignment.CENTER);
-    d.setSizeFull();
-    d.getStyle().set("background-color", color);
-    return d;
-  }
 }

src/test/java/com/flowingcode/vaadin/addons/carousel/SlideButtonsDemo.java

@@ -37,10 +37,11 @@
 public class SlideButtonsDemo extends VerticalLayout {
 
   public SlideButtonsDemo() {
-    Slide s1 = new Slide(createSlideContent("Slide 1", "green"));
-    Slide s2 = new Slide(createSlideContent("Slide 2", "blue"));
-    Slide s3 = new Slide(createSlideContent("Slide 3", "red"));
-    Slide s4 = new Slide(createSlideContent("Slide 4", "yellow"));
+    Slide s1 = new Slide(CarouselDemoView.createSlideContent("Slide 1", "https://www.flowingcode.com/wp-content/uploads/2018/04/birthday-3021071_640.jpg"));
+    Slide s2 = new Slide(CarouselDemoView.createSlideContent("Slide 2", "https://2.bp.blogspot.com/-nvtIfgN8duc/XKUQh9VEyFI/AAAAAAAABT8/mE7P45E2uqwWlkKimAmes7fT2rdW9UDWwCEwYBhgL/s320/anniversary_1.jpg"));
+    Slide s3 = new Slide(CarouselDemoView.createSlideContent("Slide 3", "https://www.flowingcode.com/wp-content/uploads/2020/04/photo4blog-300x300.jpg"));
+    Slide s4 = new Slide(CarouselDemoView.createSlideContent("Slide 4", "https://www.flowingcode.com/wp-content/uploads/2021/03/happy_birthday_2.jpg"));
+
 
     final Carousel cf = new Carousel(s1, s2, s3, s4).withoutNavigation();
     cf.setSizeFull();
@@ -61,14 +62,4 @@ public SlideButtonsDemo() {
     add(cf, btns);
   }
 
-  private Component createSlideContent(String string, String color) {
-    H1 label = new H1(string);
-    label.getStyle().set("margin-top", "auto");
-    label.getStyle().set("margin-bottom", "auto");
-    VerticalLayout d = new VerticalLayout(label);
-    d.setAlignItems(Alignment.CENTER);
-    d.setSizeFull();
-    d.getStyle().set("background-color", color);
-    return d;
-  }
 }