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

@@ -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

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"

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()