feat(REACH-577): Add new options for sidetab (#620)

New customization options (for sidetab only): -buttonTextColor -buttonTextSize -buttonWidth -buttonHeight -buttonAlign: align button relative to iframe (top / center / bottom) -top: position iframe from top -bottom: position iframe from bottom (when top is not provided)
Typeform · Oct 24, 2023 · c938630 · c938630
1 parent 95909f1
commit c938630
Show file tree

Hide file tree

Showing 6 changed files with 179 additions and 73 deletions.
diff --git a/packages/demo-html/public/sidetab-customized-html.html b/packages/demo-html/public/sidetab-customized-html.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Static HTML Demo</title>
+    <style>
+      #wrapper {
+        width: 400px;
+        height: 580px;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      data-tf-sidetab="HLjqXS5W"
+      data-tf-medium="demo-test"
+      data-tf-button-text="open sidetab"
+      data-tf-hidden="foo=foo value,bar=bar value"
+      data-tf-button-props="ariaLabel=Sidetab Button,dataTestid=my-form-button"
+      data-tf-button-color="black"
+      data-tf-button-text-color="lime"
+      data-tf-button-text-size="14"
+      data-tf-button-width="24"
+      data-tf-button-height="200"
+      data-tf-bottom="0"
+      data-tf-button-align="bottom"
+    ></div>
+    <script src="./lib/embed.js"></script>
+  </body>
+</html>