feat: initial implementation

Author: paodb

README.md

@@ -1,22 +1,36 @@
-[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/template-addon)
-[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/app-layout-addon.svg)](https://vaadin.com/directory/component/template-addon)
-[![Build Status](https://jenkins.flowingcode.com/job/template-addon/badge/icon)](https://jenkins.flowingcode.com/job/template-addon)
+[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/flip-card-addon)
+[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/flip-card--addon.svg)](https://vaadin.com/directory/component/flip-card-addon)
+[![Build Status](https://jenkins.flowingcode.com/job/FlipCard-addon/badge/icon)](https://jenkins.flowingcode.com/job/FlipCard-addon)
 
-# Template Add-on
+# Flip Card Add-on
 
-This is a template project for building new Vaadin 24 add-ons
+Wrapper component for [Flip Card Web Component](https://www.npmjs.com/package/flip-card-wc).
 
 ## Features
 
-* List the features of your add-on in here
+* Card component can flip on hover or on click
+* Styling can be overriden through CSS variables
+
+### Styling
+
+The Flip Card Web Component includes CSS variables that help style the component. Below are the `default` values:
+```css
+--flip-card-height: 100px;
+--flip-card-transition-duration: 800ms;
+--flip-card-border-radius: 4px;
+--flip-card-box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
+--flip-card-background-color-front: white;
+--flip-card-background-color-back: white;
+--flip-card-transition-timing-function: ease;
+```
 
 ## Online demo
 
-[Online demo here](http://addonsv24.flowingcode.com/template)
+[Online demo here](http://addonsv24.flowingcode.com/flipcard)
 
 ## Download release
 
-[Available in Vaadin Directory](https://vaadin.com/directory/component/template-addon)
+[Available in Vaadin Directory](https://vaadin.com/directory/component/flip-card-addon)
 
 ### Maven install
 
@@ -25,7 +39,7 @@ Add the following dependencies in your pom.xml file:
 ```xml
 <dependency>
    <groupId>org.vaadin.addons.flowingcode</groupId>
-   <artifactId>template-addon</artifactId>
+   <artifactId>flip-card-addon</artifactId>
    <version>X.Y.Z</version>
 </dependency>
 ```
@@ -49,7 +63,7 @@ To see the demo, navigate to http://localhost:8080/
 
 ## Release notes
 
-See [here](https://github.com/FlowingCode/TemplateAddon/releases)
+See [here](https://github.com/FlowingCode/FlipCard/releases)
 
 ## Issue tracking
 
@@ -74,7 +88,7 @@ Then, follow these steps for creating a contibution:
 
 This add-on is distributed under Apache License 2.0. For license terms, see LICENSE.txt.
 
-TEMPLATE_ADDON is written by Flowing Code S.A.
+Flip Card Add-on is written by Flowing Code S.A.
 
 # Developer Guide
 

pom.xml

@@ -5,21 +5,21 @@
 	<modelVersion>4.0.0</modelVersion>
 
 	<groupId>org.vaadin.addons.flowingcode</groupId>
-	<artifactId>template-addon</artifactId>
+	<artifactId>flip-card-addon</artifactId>
 	<version>1.0.0-SNAPSHOT</version>
-	<name>Template Add-on</name>
-	<description>Template Add-on for Vaadin Flow</description>
+	<name>Flip Card Add-on</name>
+	<description>Flip Card Add-on for Vaadin Flow</description>
 
 	<properties>
-        <vaadin.version>24.1.2</vaadin.version>
+        <vaadin.version>24.1.4</vaadin.version>
         <selenium.version>4.10.0</selenium.version>
 		<maven.compiler.source>17</maven.compiler.source>
 		<maven.compiler.target>17</maven.compiler.target>
 		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
 		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
 		<drivers.dir>${project.basedir}/drivers</drivers.dir>
 		<jetty.version>11.0.12</jetty.version>
-		<flowingcode.commons.demo.version>3.6.0</flowingcode.commons.demo.version>
+		<flowingcode.commons.demo.version>3.7.1</flowingcode.commons.demo.version>
 		<frontend.hotdeploy>true</frontend.hotdeploy>
 	</properties>
 
@@ -38,9 +38,9 @@
 	</licenses>
 
 	<scm>
-		<url>https://github.com/FlowingCode/AddonStarter24</url>
-		<connection>scm:git:git://github.com/FlowingCode/AddonStarter24.git</connection>
-		<developerConnection>scm:git:ssh://[email protected]:/FlowingCode/AddonStarter24.git</developerConnection>
+		<url>https://github.com/FlowingCode/FlipCard</url>
+		<connection>scm:git:git://github.com/FlowingCode/FlipCard.git</connection>
+		<developerConnection>scm:git:ssh://[email protected]:/FlowingCode/FlipCard.git</developerConnection>
 		<tag>master</tag>
 	</scm>
 

src/main/java/com/flowingcode/vaadin/addons/flipcard/FlipCard.java

@@ -0,0 +1,99 @@
+/*-
+ * #%L
+ * Flip Card Add-on
+ * %%
+ * Copyright (C) 2023 Flowing Code
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * #L%
+ */
+package com.flowingcode.vaadin.addons.flipcard;
+
+import com.vaadin.flow.component.Component;
+import com.vaadin.flow.component.Tag;
+import com.vaadin.flow.component.dependency.JsModule;
+import com.vaadin.flow.component.dependency.NpmPackage;
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.dom.Element;
+
+/**
+ * Representation of a Flip Card component.
+ * 
+ * This component is a wrapper for Flip Card Web Component
+ * (https://www.npmjs.com/package/flip-card-wc)
+ * 
+ * @author Paola De Bartolo / Flowing Code
+ * 
+ */
+@SuppressWarnings("serial")
+@NpmPackage(value = "flip-card-wc", version = "1.3.0")
+@JsModule("flip-card-wc/dist/flip-card-wc.js")
+@Tag("flip-card")
+public class FlipCard extends Div {
+
+  public enum FlipCardVariant {
+    HOVER, CLICK;
+  }
+
+  public FlipCard(Component frontComponent, Component backComponent) {
+    this.setFrontComponent(frontComponent);
+    this.setBackComponent(backComponent);
+  }
+
+  public FlipCard(Component frontComponent, Component backComponent, FlipCardVariant variant) {
+    this(frontComponent, backComponent);
+    this.setVariant(variant);
+  }
+
+  /**
+   * Sets the mechanism of how the card flips.
+   * 
+   * @param variant the variant type that specifies the flip behavior of the card
+   */
+  public void setVariant(FlipCardVariant variant) {
+    this.getElement().setProperty("variant", variant.name().toLowerCase());
+  }
+
+  /**
+   * Returns the variant value that represents the current flip behavior of the card.
+   * 
+   * @return the current variant value
+   */
+  public FlipCardVariant getVariant() {
+    return FlipCardVariant.valueOf(
+        this.getElement().getProperty("variant", FlipCardVariant.HOVER.name()).toUpperCase());
+  }
+
+  /**
+   * Sets the component that will be display on the front side of the card.
+   * 
+   * @param component the front side component
+   */
+  public void setFrontComponent(Component component) {
+    Element frontElement = component.getElement();
+    frontElement.setAttribute("slot", "front");
+    this.getElement().appendChild(frontElement);
+  }
+
+  /**
+   * Sets the component that will be display on the back side of the card.
+   * 
+   * @param component the back side component
+   */
+  public void setBackComponent(Component component) {
+    Element backElement = component.getElement();
+    backElement.setAttribute("slot", "back");
+    this.getElement().appendChild(backElement);
+  }
+
+}

src/main/java/com/flowingcode/vaadin/addons/template/TemplateAddon.java

@@ -1,6 +1,6 @@
 /*-
  * #%L
- * Template Add-on
+ * Flip Card Add-on
  * %%
  * Copyright (C) 2023 Flowing Code
  * %%

src/main/resources/META-INF/frontend/styles/static_addon_styles

@@ -1,6 +1,6 @@
 /*-
  * #%L
- * Template Add-on
+ * Flip Card Add-on
  * %%
  * Copyright (C) 2023 Flowing Code
  * %%
@@ -17,8 +17,7 @@
  * limitations under the License.
  * #L%
  */
-
-package com.flowingcode.vaadin.addons.template;
+package com.flowingcode.vaadin.addons.flipcard;
 
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.router.BeforeEnterEvent;
@@ -31,6 +30,6 @@ public class DemoView extends VerticalLayout implements BeforeEnterObserver {
 
   @Override
   public void beforeEnter(BeforeEnterEvent event) {
-    event.forwardTo(TemplateDemoView.class);
+    event.forwardTo(FlipCardDemoView.class);
   }
 }

src/main/resources/META-INF/resources/static_addon_resources

@@ -0,0 +1,100 @@
+/*-
+ * #%L
+ * Flip Card Add-on
+ * %%
+ * Copyright (C) 2023 Flowing Code
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * #L%
+ */
+package com.flowingcode.vaadin.addons.flipcard;
+
+import java.time.LocalDateTime;
+import com.flowingcode.vaadin.addons.demo.DemoSource;
+import com.flowingcode.vaadin.addons.flipcard.FlipCard.FlipCardVariant;
+import com.vaadin.flow.component.datetimepicker.DateTimePicker;
+import com.vaadin.flow.component.formlayout.FormLayout;
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.html.H4;
+import com.vaadin.flow.component.html.Image;
+import com.vaadin.flow.component.html.Paragraph;
+import com.vaadin.flow.component.icon.Icon;
+import com.vaadin.flow.component.icon.VaadinIcon;
+import com.vaadin.flow.component.textfield.TextArea;
+import com.vaadin.flow.component.textfield.TextField;
+import com.vaadin.flow.router.PageTitle;
+import com.vaadin.flow.router.Route;
+
+@SuppressWarnings("serial")
+@DemoSource
+@PageTitle("Flip Card as Info Card Demo")
+@Route(value = "flip-card/info-card", layout = FlipCardDemoView.class)
+public class FlipCardAsInfoCardDemo extends Div {
+
+  public FlipCardAsInfoCardDemo() {
+    Div onHoverFront = new Div();
+    onHoverFront.setClassName("front-card");
+    onHoverFront.add(new Image("images/helsinki.jpg", ""));
+
+    Div onHoverBack = new Div();
+    onHoverBack.setClassName("back-card");
+    onHoverBack.add(new H4("Picture Information"), createDetailsForm());
+
+    FlipCard onHoverFlipCard = new FlipCard(onHoverFront, onHoverBack);
+    onHoverFlipCard.setClassName("flip-card-info-card");
+    add(onHoverFlipCard);
+
+    Div onClickFront = new Div();
+    onClickFront.setClassName("front-card");
+    onClickFront.add(new Image("images/helsinki.jpg", ""));
+
+    Div onClickBack = new Div();
+    onClickBack.setClassName("back-card");
+    onClickBack.add(new H4("Picture Information"), createDetailsForm());
+
+    FlipCard onClickFlipCard = new FlipCard(onClickFront, onClickBack, FlipCardVariant.CLICK);
+    onClickFlipCard.setClassName("flip-card-info-card");
+    add(onClickFlipCard);
+  }
+
+  private FormLayout createDetailsForm() {
+    FormLayout formLayout = new FormLayout();
+    formLayout.getStyle().set("--vaadin-form-item-label-width", "2em");
+
+    TextField name = new TextField();
+    name.setValue("helsinki.jpg");
+    name.setReadOnly(true);
+    name.setWidthFull();
+    formLayout.addFormItem(name, new Icon("lumo", "photo"));
+
+    DateTimePicker date = new DateTimePicker();
+    date.setValue(LocalDateTime.of(2018, 6, 4, 9, 14));
+    date.setReadOnly(true);
+    date.setWidthFull();
+    formLayout.addFormItem(date, new Icon("lumo", "calendar"));
+
+    TextArea description = new TextArea();
+    description.setValue("Harbour of Katajanokka, Helsinki, Finland");
+    description.setReadOnly(true);
+    description.setWidthFull();
+    formLayout.addFormItem(description, new Icon("lumo", "menu"));
+
+    Paragraph deviceInfo = new Paragraph();
+    deviceInfo.setText(
+        "Device information \n NIKON CORPORATION NIKON D3400 \n ƒ/9 | 1/320s | 24mm | ISO100 | EXP 0 | No flash");
+    deviceInfo.getStyle().set("white-space", "pre-line");
+    formLayout.addFormItem(deviceInfo, new Icon(VaadinIcon.CAMERA));
+
+    return formLayout;
+  }
+}