feat(components/primitive/visuallyHidden): add new component

components/primitive/visuallyHidden/.gitignore

@@ -0,0 +1,2 @@
+lib
+node_modules

components/primitive/visuallyHidden/.npmignore

@@ -0,0 +1,6 @@
+assets
+demo
+src
+test
+node_modules
+CHANGELOG.md

components/primitive/visuallyHidden/CHANGELOG.md

@@ -0,0 +1,4 @@
+# CHANGELOG
+
+
+

components/primitive/visuallyHidden/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 SUI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

components/primitive/visuallyHidden/README.md

@@ -0,0 +1,28 @@
+# PrimitiveVisuallyHidden
+
+> Visually hides content while preserving it for assistive technology.
+
+[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/primitive/visuallyHidden/)
+[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,primitive,visuallyHidden)
+[![npm](https://img.shields.io/npm/dt/%40s-ui/react-primitive-visually-hidden?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-primitive-visually-hidden)
+
+[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3Akbd&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3AvisuallyHidden)
+[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-primitive-visually-hidden)](https://github.com/SUI-Components/sui-components/blob/main/components/primitive/visuallyHidden/LICENSE.md)
+
+## Installation
+
+```sh
+$ npm install @s-ui/react-primitive-visually-hidden --save
+```
+
+## Usage
+
+### Basic usage
+
+```js
+import VisuallyHidden from '@s-ui/react-primitive-visually-hidden'
+
+return <VisuallyHidden>A</VisuallyHidden>
+```
+
+> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/primitive/visuallyHidden/demo).**

components/primitive/visuallyHidden/demo/articles/ArticleA11y.js

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types'
+
+import {Article, Box, H2, Paragraph, Code, Strong} from '@s-ui/documentation-library'
+
+const ArticleA11y = ({className}) => {
+  return (
+    <Article className={className}>
+      <H2>Accessibility</H2>
+      <Box style={{backgroundColor: 'color-mix(in srgb, #00FF00 10%, transparent)'}}>
+        <Paragraph>
+          ✅ This component has been successfully tested for{' '}
+          <Strong>WCAG 2.0 levels A and AA, WCAG 2.1 levels A and AA</Strong> and for common accessibility best
+          practices.
+        </Paragraph>
+      </Box>
+      <Paragraph>
+        This is useful in certain scenarios as an alternative to traditional labelling with <Code>aria-label</Code> or{' '}
+        <Code>aria-labelledby</Code>.
+      </Paragraph>
+    </Article>
+  )
+}
+
+ArticleA11y.propTypes = {
+  className: PropTypes.string
+}
+
+export default ArticleA11y

components/primitive/visuallyHidden/demo/articles/ArticleVisuallyHidden.js

@@ -0,0 +1,31 @@
+import AtomIcon from '@s-ui/react-atom-icon'
+import PropTypes from 'prop-types'
+
+import {Article, H2, Paragraph, Button, AntDesignIcon} from '@s-ui/documentation-library'
+
+import PrimitiveVisuallyHidden from '../../src/index.js'
+
+const ArticleVisuallyHidden = ({className}) => {
+  return (
+    <Article className={className}>
+      <H2>Default</H2>
+      <Paragraph>
+        A button without text can be absolutely mysterious for someone using screen reader. They might be announced
+        simply as "button". We can solve this problem without compromising on our design. A VisuallyHidden component
+        will allow us to place text inside this button that will only be made available to people using screen readers.
+      </Paragraph>
+      <Button>
+        <AtomIcon>
+          <AntDesignIcon icon="AiOutlineCheck" style={{color: 'currentColor'}} />
+        </AtomIcon>
+        <PrimitiveVisuallyHidden>Checkmark</PrimitiveVisuallyHidden>
+      </Button>
+    </Article>
+  )
+}
+
+ArticleVisuallyHidden.propTypes = {
+  className: PropTypes.string
+}
+
+export default ArticleVisuallyHidden

components/primitive/visuallyHidden/demo/index.js

@@ -0,0 +1,31 @@
+/* eslint-disable no-console */
+
+import {H1, Paragraph} from '@s-ui/documentation-library'
+
+import ArticleVisuallyHidden from './articles/ArticleVisuallyHidden.js'
+import ArticleA11y from './articles/ArticleA11y.js'
+import {CLASS_SECTION} from './settings.js'
+
+import './index.scss'
+
+const Demo = () => {
+  return (
+    <div className="sui-StudioPreview">
+      <H1>Visually Hidden</H1>
+      <Paragraph>Hides content from the screen in an accessible way.</Paragraph>
+      <Paragraph>
+        Anything you put inside this component will be hidden from the screen but will be announced by screen readers.
+      </Paragraph>
+      <Paragraph>
+        It is useful in certain scenarios as an alternative to traditional labelling with aria-label or aria-labelledby
+        and it is the logical opposite of the aria-hidden attribute.
+      </Paragraph>
+      <br />
+      <ArticleVisuallyHidden className={CLASS_SECTION} />
+      <br />
+      <ArticleA11y className={CLASS_SECTION} />
+    </div>
+  )
+}
+
+export default Demo

components/primitive/visuallyHidden/demo/index.scss

@@ -0,0 +1,3 @@
+@import '~@s-ui/react-atom-icon/lib/index.scss';
+
+@import '../src/index';

components/primitive/visuallyHidden/demo/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@s-ui/react-primitive-visually-hidden-demo",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "private": true,
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@s-ui/react-atom-icon": "1"
+  }
+}

components/primitive/visuallyHidden/demo/settings.js

@@ -0,0 +1,2 @@
+export const BASE_CLASS_DEMO = `DemoVisuallyHidden`
+export const CLASS_SECTION = `${BASE_CLASS_DEMO}-section`

components/primitive/visuallyHidden/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@s-ui/react-primitive-visually-hidden",
+  "version": "1.0.0",
+  "description": "",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "@s-ui",
+    "react",
+    "component",
+    "primitive",
+    "visually-hidden"
+  ],
+  "main": "lib/index.js",
+  "scripts": {
+    "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles",
+    "build:js": "babel --presets sui ./src --out-dir ./lib",
+    "build:styles": "cpx './src/**/*.scss' ./lib"
+  },
+  "dependencies": {
+    "@s-ui/component-dependencies": "1",
+    "@s-ui/react-primitive-injector": "1",
+    "classnames": "2.5.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SUI-Components/sui-components",
+    "directory": "components/primitive/visually-hidden"
+  },
+  "config": {
+    "title": "visually hidden",
+    "category": "primitive",
+    "type": "components"
+  },
+  "bugs": {
+    "url": "https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3A%22Component%3A+visually-hidden%22"
+  },
+  "homepage": "https://sui-components.vercel.app/",
+  "license": "MIT"
+}

components/primitive/visuallyHidden/src/index.js

@@ -0,0 +1,33 @@
+import {forwardRef} from 'react'
+import cx from 'classnames'
+
+import PropTypes from 'prop-types'
+
+import {BASE_CLASS} from './settings.js'
+
+const PrimitiveVisuallyHidden = forwardRef(({children, as: Element = 'span', className, ...props}, forwardedRef) => {
+  return (
+    <Element className={cx(BASE_CLASS, className)} {...props} ref={forwardedRef}>
+      {children}
+    </Element>
+  )
+})
+
+PrimitiveVisuallyHidden.displayName = 'AtomKbd'
+
+PrimitiveVisuallyHidden.propTypes = {
+  /**
+   * Content to be non-visible but read by screen readers
+   */
+  children: PropTypes.node,
+  /**
+   * The elementType of the wrapper
+   * **/
+  as: PropTypes.elementType,
+  /**
+   * Classes to add to button (DEPRECATED)
+   */
+  className: PropTypes.string
+}
+
+export default PrimitiveVisuallyHidden

components/primitive/visuallyHidden/src/index.scss

@@ -0,0 +1,4 @@
+@import '~@s-ui/theme/lib/index';
+
+@import './styles/settings.scss';
+@import './styles/index.scss';

components/primitive/visuallyHidden/src/settings.js

@@ -0,0 +1 @@
+export const BASE_CLASS = 'sui-PrimitiveVisuallyHidden'

components/primitive/visuallyHidden/src/styles/index.scss

@@ -0,0 +1,14 @@
+$base-class: '.sui-PrimitiveVisuallyHidden';
+
+#{$base-class} {
+  position: absolute;
+  border: 0;
+  width: 0;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  word-wrap: normal;
+}

components/primitive/visuallyHidden/src/styles/settings.scss

@@ -0,0 +1 @@
+// add here the style tokens