From 46ce9a6652643ae1ea2982c17e45dba89b547fe3 Mon Sep 17 00:00:00 2001
From: Alek Petuskey <alek@pynecone.io>
Date: Mon, 5 Dec 2022 14:22:58 -0800
Subject: [PATCH] Added Visually Hidden + Box Video/Iframe (#30)

* Added Visually Hidden + Box Video/frame

Co-authored-by: Alek Petuskey <alekpetuskey@Aleks-MacBook-Pro.local>
---
 pynecone/components/disclosure/__init__.py       | 1 +
 pynecone/components/disclosure/visuallyhidden.py | 9 +++++++++
 pynecone/components/layout/box.py                | 9 ++++++++-
 3 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 pynecone/components/disclosure/visuallyhidden.py

diff --git a/pynecone/components/disclosure/__init__.py b/pynecone/components/disclosure/__init__.py
index 87e1e1c41..9c3c48f29 100644
--- a/pynecone/components/disclosure/__init__.py
+++ b/pynecone/components/disclosure/__init__.py
@@ -8,5 +8,6 @@ from .accordion import (
     AccordionPanel,
 )
 from .tabs import Tab, TabList, TabPanel, TabPanels, Tabs
+from .visuallyhidden import VisuallyHidden
 
 __all__ = [f for f in dir() if f[0].isupper()]  # type: ignore
diff --git a/pynecone/components/disclosure/visuallyhidden.py b/pynecone/components/disclosure/visuallyhidden.py
new file mode 100644
index 000000000..6bb271e7f
--- /dev/null
+++ b/pynecone/components/disclosure/visuallyhidden.py
@@ -0,0 +1,9 @@
+"""A component to display visually hidden text."""
+
+from pynecone.components.libs.chakra import ChakraComponent
+
+
+class VisuallyHidden(ChakraComponent):
+    """A component that visually hides content while still allowing it to be read by screen readers."""
+
+    tag = "VisuallyHidden"
diff --git a/pynecone/components/layout/box.py b/pynecone/components/layout/box.py
index cf67b99b9..13c809257 100644
--- a/pynecone/components/layout/box.py
+++ b/pynecone/components/layout/box.py
@@ -3,6 +3,7 @@
 from pynecone.components.libs.chakra import ChakraComponent
 from pynecone.components.tags import Tag
 from pynecone.var import Var
+from typing import Optional
 
 
 class Box(ChakraComponent):
@@ -10,9 +11,15 @@ class Box(ChakraComponent):
 
     tag = "Box"
 
-    # The element to render.
+    # The type element to render. You can specify as an image, video, or any other HTML element such as iframe.
     element: Var[str]
 
+    # The source of the content.
+    src: Optional[str] = None
+
+    # The alt text of the content.
+    alt: Optional[str] = None
+
     def _render(self) -> Tag:
         return (
             super()