Merge pull request #478 from vrk-kpa/fix/visuallyhidden-props

[Fix] VisuallyHidden to export props + move it to core

src/components/index.ts

@@ -13,4 +13,3 @@ export {
 } from './LanguageMenu/LanguageMenu';
 export { Paragraph, ParagraphProps } from './Paragraph/Paragraph';
 export { Text, TextProps } from './Text/Text';
-export { VisuallyHidden } from './Visually-hidden/Visually-hidden';

src/core/Chip/Chip/Chip.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import { default as styled } from 'styled-components';
 import { logger } from '../../../utils/logger';
 import { HtmlButton, HtmlButtonProps, HtmlSpan } from '../../../reset';
-import { VisuallyHidden } from '../../../components/Visually-hidden/Visually-hidden';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';
 import { Icon } from '../../Icon/Icon';
 import {
   BaseChipProps,

src/core/Expander/ExpanderGroup/ExpanderGroup.tsx

@@ -2,7 +2,7 @@ import React, { Component, ReactNode } from 'react';
 import { default as styled } from 'styled-components';
 import classnames from 'classnames';
 import { HtmlDiv, HtmlButton, HtmlButtonProps, HtmlSpan } from '../../../reset';
-import { VisuallyHidden } from '../../../components';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';
 import { baseStyles } from './ExpanderGroup.baseStyles';
 
 const baseClassName = 'fi-expander-group';

src/core/Expander/ExpanderTitle/ExpanderTitle.tsx

@@ -9,7 +9,7 @@ import {
   HtmlSpan,
 } from '../../../reset';
 import { Icon } from '../../Icon/Icon';
-import { VisuallyHidden } from '../../../components';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';
 import { ExpanderConsumer, ExpanderTitleBaseProps } from '../Expander/Expander';
 import { expanderTitleBaseStyles } from './ExpanderTitle.baseStyles';
 

src/core/Form/LabelText/LabelText.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import { default as styled } from 'styled-components';
 import { baseStyles } from './LabelText.baseStyles';
 import { asPropType } from '../../../utils/typescript';
-import { VisuallyHidden } from '../../../components/Visually-hidden/Visually-hidden';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';
 import { HtmlSpan, HtmlSpanProps, HtmlDiv, HtmlDivProps } from '../../../reset';
 
 export type LabelMode = 'hidden' | 'visible';

src/core/Form/RadioButton/RadioButtonGroup.tsx

@@ -1,7 +1,7 @@
 import React, { Component, ReactNode } from 'react';
 import { default as styled } from 'styled-components';
 import { HtmlDiv, HtmlSpan, HtmlFieldSet, HtmlLegend } from '../../../reset';
-import { VisuallyHidden } from '../../../components/Visually-hidden/Visually-hidden';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';
 import { RadioButtonProps } from './RadioButton';
 import { baseStyles } from './RadioButtonGroup.baseStyles';
 import { AutoId } from '../../../utils/AutoId';

src/core/Form/SearchInput/SearchInput.tsx

@@ -13,7 +13,7 @@ import {
   HtmlButton,
   HtmlButtonProps,
 } from '../../../reset';
-import { VisuallyHidden } from '../../../components/Visually-hidden/Visually-hidden';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';
 import { StatusText } from '../StatusText/StatusText';
 import { LabelText, LabelMode } from '../LabelText/LabelText';
 import { Icon } from '../../Icon/Icon';

src/core/Link/LinkExternal.tsx

@@ -7,7 +7,7 @@ import {
 } from '../../components/Link/LinkExternal';
 import { Icon } from '../Icon/Icon';
 import { Link, LinkProps } from './Link';
-import { VisuallyHidden } from '../../components';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import { externalStyles } from './Link.baseStyles';
 
 const iconClassName = 'fi-link_icon';

src/core/VisuallyHidden/VisuallyHidden.tsx

@@ -1 +1,35 @@
-export { VisuallyHidden } from '../../components/Visually-hidden/Visually-hidden';
+import React, { Component } from 'react';
+import { default as styled } from 'styled-components';
+import classnames from 'classnames';
+import { HtmlSpan, HtmlSpanProps } from '../../reset/HtmlSpan/HtmlSpan';
+
+export interface VisuallyHiddenProps extends HtmlSpanProps {
+  className?: string;
+}
+
+const baseClassName = 'fi-visually-hidden';
+
+const StyledVisuallyHidden = styled((props: VisuallyHiddenProps) => (
+  <HtmlSpan {...props} />
+))`
+  position: absolute;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+`;
+
+export class VisuallyHidden extends Component<VisuallyHiddenProps> {
+  render() {
+    const { className, ...passProps } = this.props;
+    return (
+      <StyledVisuallyHidden
+        {...passProps}
+        className={classnames(baseClassName, className)}
+      />
+    );
+  }
+}

src/index.tsx

@@ -76,5 +76,8 @@ export {
 export { Paragraph, ParagraphProps } from './core/Paragraph/Paragraph';
 export { Text, TextProps } from './core/Text/Text';
 export { Textarea, TextareaProps } from './core/Form/Textarea/Textarea';
-export { VisuallyHidden } from './core/VisuallyHidden/VisuallyHidden';
+export {
+  VisuallyHidden,
+  VisuallyHiddenProps,
+} from './core/VisuallyHidden/VisuallyHidden';
 export { suomifiDesignTokens, DesignTokens } from 'suomifi-design-tokens';