Added class generating tag to first demo page

Author: Mark Gibbs

demo/demo/templates/demo_one.html

@@ -10,16 +10,25 @@ <h1>Simple App Embedding</h1>
   the plotly_app template tag with the name of a dash application represents the simplest use of
   the django_plotly_dash framework.
 </p>
+<p>
+  The plotly_class tag is also used to wrap the application in css class names based on the
+  application (django-plotly-dash), the
+  type of the embedding (iframe), and the slugified version of the app name (simpleexample).
+</p>
 <div class="card bg-light border-dark">
   <div class="card-body">
     <p><span>{</span>% load plotly_dash %}</p>
-    <p><span>{</span>% plotly_app name="SimpleExample" %}</p>
+    <p>&lt;div class="<span>{</span>% plotly_class name="SimpleExample"%}">
+    <p class="ml-3"><span>{</span>% plotly_app name="SimpleExample" %}</p>
+    <p>&lt;\div>
   </div>
 </div>
 <p></p>
 <div class="card border-dark">
   <div class="card-body">
-    {%plotly_app name="SimpleExample"%}
+    <div class="{%plotly_class name="SimpleExample"%}">
+      {%plotly_app name="SimpleExample"%}
+    </div>
   </div>
 </div>
 {%endblock%}

django_plotly_dash/dash_wrapper.py

@@ -419,7 +419,7 @@ def slugified_id(self):
         pre_slugified_id = self._uid
         return slugify(pre_slugified_id)
 
-    def extra_html_properties(self, prefix=None, posfix=None, template_type=None):
+    def extra_html_properties(self, prefix=None, postfix=None, template_type=None):
         '''
         Return extra html properties to allow individual apps to be styled separately.
 
@@ -428,7 +428,7 @@ def extra_html_properties(self, prefix=None, posfix=None, template_type=None):
 
         prefix = prefix if prefix else "django-plotly-dash"
 
-        post_part = "-%s" % posfix if posfix else ""
+        post_part = "-%s" % postfix if postfix else ""
         template_type = template_type if template_type else "iframe"
 
         slugified_id = self.slugified_id()