feat(react-components): 🎸 add MntVisuallyHidden component

tonyghiani · Jan 21, 2024 · 8263b4d · 8263b4d · vercel · Jan 22, 2024
1 parent 0b42e6f
commit 8263b4d
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 1 deletion.
diff --git a/packages/react-components/README.md b/packages/react-components/README.md
@@ -80,6 +80,8 @@ For detailed information about each component, refer to the sub-pages:
 - [MntText](./src/components/atoms/Typography/Text)
 - [MntParagraph](./src/components/atoms/Typography/Paragraph)
 - [MntHeading](./src/components/atoms/Typography/Heading)
+- [MntHeading](./src/components/atoms/Typography/Heading)
+- [MntVisuallyHidden](./src/components/atoms/VisuallyHidden)
 
 ### Molecules
 

diff --git a/packages/react-components/src/components/atoms/Typography/BaseTypography.tsx b/packages/react-components/src/components/atoms/Typography/BaseTypography.tsx
@@ -18,7 +18,7 @@ export interface TextGradientOptions {
   direction?: MntTextGradientDirection;
 }
 
-interface BaseTypographyProps {
+export interface BaseTypographyProps {
   /**
    * Text should be uncopyable.
    */

diff --git a/packages/react-components/src/components/atoms/VisuallyHidden/VisuallyHidden.classes.ts b/packages/react-components/src/components/atoms/VisuallyHidden/VisuallyHidden.classes.ts
@@ -0,0 +1,8 @@
+const visuallyHiddenClasses = {
+  '.mnt-visually-hidden': {
+    '@apply inline-block absolute overflow-hidden [clip-path:rect(0,0,0,0)] w-px h-px -m-px p-0 border-0':
+      {}
+  }
+};
+
+export default visuallyHiddenClasses;
diff --git a/packages/react-components/src/components/atoms/VisuallyHidden/VisuallyHidden.tsx b/packages/react-components/src/components/atoms/VisuallyHidden/VisuallyHidden.tsx
@@ -0,0 +1,8 @@
+import mnt from 'react-mnt';
+
+/**
+ * A11y utility component to render visually hidden elements on the DOM
+ */
+export const MntVisuallyHidden = mnt('span')`
+  mnt-visually-hidden
+`;
diff --git a/packages/react-components/src/components/atoms/VisuallyHidden/index.ts b/packages/react-components/src/components/atoms/VisuallyHidden/index.ts
@@ -0,0 +1 @@
+export { MntVisuallyHidden } from './VisuallyHidden';
diff --git a/packages/react-components/src/with_mnt_config.ts b/packages/react-components/src/with_mnt_config.ts
@@ -13,6 +13,7 @@ import inputClasses from './components/atoms/Input/Input.classes';
 import listClasses from './components/atoms/List/List.classes';
 import tagClasses from './components/atoms/Tag/Tag.classes';
 import typographyClasses from './components/atoms/Typography/Typography.classes';
+import visuallyHiddenClasses from './components/atoms/VisuallyHidden/VisuallyHidden.classes';
 import accordionClasses from './components/molecules/Accordion/Accordion.classes';
 import codeblockClasses from './components/molecules/CodeBlock/CodeBlock.classes';
 import rangeInputClasses from './components/molecules/RangeInput/RangeInput.classes';
@@ -40,6 +41,7 @@ const materialTailwindConfig = {
           inputClasses,
           listClasses,
           tagClasses,
+          visuallyHiddenClasses,
           typographyClasses,
           accordionClasses,
           codeblockClasses,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { MntVisuallyHidden } from './VisuallyHidden';