adobeGH-24 [flex] get the colors working

this component will not be done in one PR :-) got fore & back ground colors working ( no dialog yet) on docs by:
- making responsive configuration more complex (with an instanciation of it for docs in content,
- added a FlexModel.getId, even if we might want to move this to some abstract model later,
- fixed a few bad resource types here & there

apps/docs/app/jcr_root/apps/dx-docs/configs/config.author/com.adobe.dx.domtagging.internal.IDTaggerImpl.config

@@ -0,0 +1,5 @@
+acceptedTypes=["dx/structure/.*","dx-docs/components/.*"]
+tagOnPublication=B"true"
+tagOnModification=B"true"
+referenceTypes=["cq/experience-fragments/editor/components/experiencefragment"]
+shouldRewriteComponentHash=B"true"

apps/docs/app/jcr_root/apps/dx-docs/configs/config/com.adobe.dx.domtagging.internal.IDTaggerImpl.config

@@ -0,0 +1 @@
+acceptedTypes=["dx/structure/.*","dx-docs/components/.*"]

apps/docs/app/pom.xml

@@ -140,7 +140,7 @@
         <dependency>
             <groupId>com.adobe.dx</groupId>
             <artifactId>structure</artifactId>
-            <version>0.0.6</version>
+            <version>0.0.7-SNAPSHOT</version>
             <type>zip</type>
         </dependency>
         <dependency>
@@ -152,7 +152,7 @@
         <dependency>
             <groupId>com.adobe.dx</groupId>
             <artifactId>core</artifactId>
-            <version>0.0.12</version>
+            <version>0.0.13-SNAPSHOT</version>
         </dependency>
         <dependency>
             <groupId>com.adobe.dx</groupId>

apps/docs/content/jcr_root/conf/dx-docs/_sling_configs/.content.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:rep="internal"
+    jcr:mixinTypes="[rep:AccessControllable]"
+    jcr:primaryType="sling:Folder"/>

apps/docs/content/jcr_root/conf/dx-docs/_sling_configs/com.adobe.dx.admin.rendercondition.RenderConditionConfiguration/.content.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+    jcr:primaryType="nt:unstructured"
+    passthroughGroups="[test,administrators]"/>

apps/docs/content/jcr_root/conf/dx-docs/_sling_configs/com.adobe.dx.responsive.ResponsiveConfiguration/.content.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+    jcr:primaryType="nt:unstructured">
+    <breakpoints/>
+</jcr:root>

apps/docs/content/jcr_root/conf/dx-docs/_sling_configs/com.adobe.dx.responsive.ResponsiveConfiguration/breakpoints/.content.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:primaryType="sling:OrderedFolder">
+    <_x0031_/>
+    <_x0032_/>
+    <_x0033_/>
+</jcr:root>

apps/docs/content/jcr_root/conf/dx-docs/_sling_configs/com.adobe.dx.responsive.ResponsiveConfiguration/breakpoints/1/.content.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+    jcr:primaryType="nt:unstructured"
+    end="{Long}599"
+    key="mobile"
+    label="Mobile / Default"
+    propertySuffix="Mobile"
+    start="{Long}0"/>

apps/docs/content/jcr_root/conf/dx-docs/_sling_configs/com.adobe.dx.responsive.ResponsiveConfiguration/breakpoints/2/.content.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+    jcr:primaryType="nt:unstructured"
+    end="{Long}1199"
+    key="tablet"
+    label="Tablet"
+    mediaQuery="@media only screen and (min-width: 600px)"
+    propertySuffix="Tablet"
+    start="{Long}600"/>

apps/docs/content/jcr_root/conf/dx-docs/_sling_configs/com.adobe.dx.responsive.ResponsiveConfiguration/breakpoints/3/.content.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+    jcr:primaryType="nt:unstructured"
+    key="desktop"
+    label="Desktop"
+    mediaQuery="@media only screen and (min-width: 1200px)"
+    propertySuffix="Desktop"
+    start="{Long}1200"/>

apps/docs/content/jcr_root/conf/dx-docs/settings/wcm/template-types/base-page/policies/.content.xml

@@ -2,7 +2,7 @@
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
     jcr:primaryType="cq:Page">
     <jcr:content
-        cq:policy="dx/components/structure/page/dx-design"
+        cq:policy="dx/structure/components/page/dx-design"
         jcr:primaryType="nt:unstructured"
         sling:resourceType="wcm/core/components/policies/mappings">
         <root

apps/docs/content/jcr_root/conf/dx-docs/settings/wcm/templates/content-page-template/policies/.content.xml

@@ -2,7 +2,7 @@
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
     jcr:primaryType="cq:Page">
     <jcr:content
-        cq:policy="dx/components/structure/page/dx-design"
+        cq:policy="dx/structure/components/page/dx-design"
         jcr:primaryType="nt:unstructured"
         sling:resourceType="wcm/core/components/policies/mappings">
         <root

apps/docs/content/jcr_root/content/dx-docs/us/.content.xml

@@ -16,7 +16,7 @@
                     jcr:primaryType="nt:unstructured"
                     dx_id="c3fa17f4"
                     dx_pageId="5aff75cf"
-                    sling:resourceType="dx/components/structure/flex"/>
+                    sling:resourceType="dx/structure/components/flex"/>
             </content>
         </root>
     </jcr:content>

apps/structure/app/jcr_root/apps/dx/structure/components/flex/color.html

@@ -0,0 +1,46 @@
+<!--/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  ~ Copyright 2020 Adobe
+  ~
+  ~ 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.
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
+<template data-sly-template.background="${ @ id}">
+    <sly data-sly-repeat.bp="${breakpoints}">
+
+        <sly data-sly-test="${resprops.backgroundColor[bp.key] || resprops.gradient[bp.key]}">
+            <sly data-sly-test="${bp.mediaQuery}">
+                ${bp.mediaQuery}{
+            </sly>
+            ${'#{0}' @ format=id, context='styleString'} {
+            <sly data-sly-test="${resprops.backgroundColor[bp.key]}">
+                ${'background-color: {0}; ' @ format=resprops.backgroundColor[bp.key], context='styleString'}
+            </sly>
+            <sly data-sly-test="${resprops.gradient[bp.key]}">
+                ${'background-image: {0};' @ format=[resprops.gradient[bp.key]], context='styleString'}
+            </sly>
+            }
+            <sly data-sly-test="${bp.mediaQuery}">}</sly>
+        </sly>
+    </sly>
+</template>
+<template data-sly-template.foreground="${ @ id}">
+    <sly data-sly-repeat.bp="${breakpoints}"
+         data-sly-test="${resprops.foregroundColor[bp.key]}">
+        <sly data-sly-test.mediaQuery="${bp.mediaQuery}">
+            ${bp.mediaQuery}{
+        </sly>
+        ${'#{0}' @ format=id, context='styleString'} {
+        ${'color: {0}; ' @ format=resprops.foregroundColor[bp.key], context='styleString'}
+        }
+        <sly data-sly-test="${bp.mediaQuery}">}</sly>
+    </sly>
+</template>

apps/structure/app/jcr_root/apps/dx/structure/components/flex/flex.html

@@ -13,6 +13,10 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
-<div data-sly-use.model="com.adobe.dx.structure.flex.FlexModel">${model.hello}</div>
-
-Sup
+<sly data-sly-use.model="com.adobe.dx.structure.flex.FlexModel"></sly>
+<style data-sly-test="${model.styleNeeded}">
+    <sly data-sly-use.colorTpl="color.html" data-sly-call="${colorTpl.background @ id = model.id}"></sly>
+</style>
+<div id="${model.id}" class="dx-flex">
+    <div class="dx-flex-items" data-sly-resource="${'./items' @ resourceType='dx/structure/components/parlite'}"></div>
+</div>

apps/structure/app/jcr_root/apps/dx/structure/components/parlite/parlite.html

@@ -1,4 +1,4 @@
-<<!--/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!--/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   ~ Copyright 2020 Adobe
   ~
   ~ Licensed under the Apache License, Version 2.0 (the "License");
@@ -13,7 +13,6 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
-
 <sly data-sly-test.isEdit="${wcmmode.edit}" data-sly-use.allowed="com.day.cq.wcm.foundation.AllowedComponentList"></sly>
 <div data-sly-test.isAllowedApplicable="${allowed.isApplicable}"
      class="${allowed.cssClass}"

apps/structure/core/pom.xml

@@ -118,5 +118,10 @@ Bundle-DocURL:
             <artifactId>testing</artifactId>
             <version>0.0.10</version>
         </dependency>
+        <dependency>
+            <groupId>com.adobe.dx</groupId>
+            <artifactId>core</artifactId>
+            <version>0.0.13-SNAPSHOT</version>
+        </dependency>
     </dependencies>
 </project>

apps/structure/core/src/main/java/com/adobe/dx/structure/flex/FlexModel.java

@@ -16,21 +16,38 @@
 
 package com.adobe.dx.structure.flex;
 
+import com.adobe.dx.domtagging.IDTagger;
+
+import org.apache.commons.lang3.StringUtils;
 import org.apache.sling.api.SlingHttpServletRequest;
-import org.apache.sling.api.resource.Resource;
 import org.apache.sling.models.annotations.Model;
+import org.apache.sling.models.annotations.injectorspecific.OSGiService;
 import org.apache.sling.models.annotations.injectorspecific.SlingObject;
 import org.apache.sling.models.annotations.DefaultInjectionStrategy;
 
-@Model(adaptables = { SlingHttpServletRequest.class,
-        Resource.class }, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
+@Model(adaptables = SlingHttpServletRequest.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
 public class FlexModel {
 
     @SlingObject
-    protected Resource resource;
+    protected SlingHttpServletRequest request;
+
+    @OSGiService
+    protected IDTagger idTagger;
+
+    String id;
 
     public String getHello() {
         return "Hello";
     }
 
+    public boolean isStyleNeeded() {
+        return true;
+    }
+
+    public String getId() {
+        if (StringUtils.isBlank(id) && idTagger != null) {
+            id = idTagger.computeComponentId(request, null);
+        }
+        return id;
+    }
 }

bundles/core/pom.xml

@@ -116,6 +116,12 @@ Bundle-DocURL:
             <groupId>org.jetbrains</groupId>
             <artifactId>annotations</artifactId>
         </dependency>
+        <dependency>
+            <groupId>org.apache.sling</groupId>
+            <artifactId>org.apache.sling.api</artifactId>
+            <version>2.18.4</version>
+            <scope>test</scope>
+        </dependency>
         <dependency>
             <groupId>com.adobe.dx</groupId>
             <artifactId>testing</artifactId>

bundles/core/src/main/java/com/adobe/dx/bindings/internal/DxBindingsValueProvider.java

@@ -50,7 +50,9 @@ public class DxBindingsValueProvider implements BindingsValuesProvider {
 
     private static final String POLICY_KEY = "dxPolicy";
 
-    private static final String RESP_PROPS_KEY = "respProperties";
+    private static final String RESP_PROPS_KEY = "resprops";
+
+    private static final String BP_KEY = "breakpoints";
 
     @Override
     public void addBindings(@NotNull Bindings bindings) {
@@ -66,6 +68,7 @@ public void addBindings(@NotNull Bindings bindings) {
                 ResponsiveConfiguration configuration = resource
                     .adaptTo(ConfigurationBuilder.class)
                     .as(ResponsiveConfiguration.class);
+                bindings.put(BP_KEY, configuration.breakpoints());
                 bindings.put(RESP_PROPS_KEY, new ResponsiveProperties(configuration, dxPolicy));
             }
         }

bundles/core/src/main/java/com/adobe/dx/domtagging/internal/IDTaggerImpl.java

@@ -426,7 +426,7 @@ public Resource next() {
                 + "for resource types that should be tagged with an id"
         )
         @SuppressWarnings("squid:S00100")
-        String[] acceptedTypes() default { "dx/components/structure/.*" };
+        String[] acceptedTypes() default { "dx/structure/components/.*" };
 
         @AttributeDefinition(
             name = "Reference type",

bundles/core/src/main/java/com/adobe/dx/responsive/Breakpoint.java

@@ -0,0 +1,40 @@
+/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ ~ Copyright 2020 Adobe
+ ~
+ ~ 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.
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+package com.adobe.dx.responsive;
+
+import org.apache.sling.caconfig.annotation.Configuration;
+import org.apache.sling.caconfig.annotation.Property;
+
+@Configuration(collection = true)
+public @interface Breakpoint {
+    @Property(label = "name")
+    String getLabel();
+
+    @Property(label = "property suffix", description = "suffix to append to a property to get the responsive version of it")
+    String propertySuffix();
+
+    @Property(label = "map key", description = "key from where a value will be available")
+    String key();
+
+    @Property(label = "media Query", description = "media query that defines this breakpoint")
+    String mediaQuery();
+
+    @Property(label = "start", description = "screen width from which this breakpoint is set")
+    int start();
+
+    @Property(label = "end", description = "screen width to which this breakpoint is set")
+    int end();
+}

bundles/core/src/main/java/com/adobe/dx/responsive/ResponsiveConfiguration.java

@@ -1,9 +1,23 @@
+/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ ~ Copyright 2020 Adobe
+ ~
+ ~ 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.
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
 package com.adobe.dx.responsive;
 
 import org.apache.sling.caconfig.annotation.Configuration;
 
 @Configuration(label="Responsive Configuration", description = "sets the responsive behaviour")
 public @interface ResponsiveConfiguration {
-
-    String[] breakpoints() default {"Mobile", "Tablet", "Desktop"};
+    Breakpoint[] breakpoints();
 }

bundles/core/src/main/java/com/adobe/dx/responsive/internal/ResponsiveProperties.java

@@ -16,6 +16,7 @@
 
 package com.adobe.dx.responsive.internal;
 
+import com.adobe.dx.responsive.Breakpoint;
 import com.adobe.dx.responsive.ResponsiveConfiguration;
 
 import java.util.Collection;
@@ -34,11 +35,11 @@
  */
 public class ResponsiveProperties implements Map<String, Object> {
 
-    private final String[] breakpoints;
+    private final Breakpoint[] breakpoints;
     private ValueMap properties;
 
     public ResponsiveProperties(final ResponsiveConfiguration configuration, ValueMap properties) {
-        this.breakpoints = configuration.breakpoints();
+        breakpoints = configuration.breakpoints();
         this.properties = properties;
     }
 
@@ -47,11 +48,11 @@ public Object get(Object key) {
         if (key != null) {
             boolean empty = true;
             LinkedHashMap<String,String> breakpointValues = new LinkedHashMap<>();
-            for (String breakpoint : breakpoints) {
-                String respKey = key + breakpoint;
+            for (Breakpoint breakpoint : breakpoints) {
+                String respKey = key + breakpoint.propertySuffix();
                 String value = properties.get(respKey, String.class);
                 empty &= StringUtils.isBlank(value);
-                breakpointValues.put(breakpoint.toLowerCase(), value);
+                breakpointValues.put(breakpoint.key(), value);
             }
             if (!empty) {
                 return breakpointValues;

bundles/core/src/main/java/com/adobe/dx/responsive/package-info.java

@@ -13,7 +13,7 @@
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
- @Version("0.1.0")
+ @Version("0.2.0")
  package com.adobe.dx.responsive;
 
  import org.osgi.annotation.versioning.Version;