@commercetools-uikit/accessible-hidden 0.0.0-canary-2021830134526

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 commercetools GmbH
+
+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.

package/README.md

@@ -0,0 +1,86 @@
+<!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
+<!-- This file is created by the `yarn generate-readme` script. -->
+
+# AccessibleHidden
+
+## Description
+
+This component is used to hide content offscreen, removing it from sighted users, while keeping it still accessible to screen readers and other assistive technology.
+It can also be useful for testing with tools like react-testing-library and cypress, which requires querying elements through content which might not be intended to be visible on screen, such as querying for a input by its label while the label is visually hidden.
+
+It's the logical opposite of [the `aria-hidden` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute).
+
+## Installation
+
+```
+yarn add @commercetools-uikit/accessible-hidden
+```
+
+```
+npm --save install @commercetools-uikit/accessible-hidden
+```
+
+Additionally install the peer dependencies (if not present)
+
+```
+yarn add react
+```
+
+```
+npm --save install react
+```
+
+## Usage
+
+```jsx
+import AccessibleHidden from '@commercetools-uikit/accessible-hidden';
+
+/**
+ * In this example, we're showing additional text specifically to be read only
+ * by screen readers, to make it more contextualized and easier to understand
+ * for non-sighted users (as well "translating" the numeronym which might confuse
+ * automatic screen-readers).
+ */
+const Example = () => (
+  <div>
+    <h3>An Article on A11y</h3>
+    <p>A summary of the article</p>
+    <button>
+      Read More
+      <AccessibleHidden> from An Article on Accessibility</AccessibleHidden>
+    </button>
+  </div>
+);
+
+export default Example;
+```
+
+## Properties
+
+| Props      | Type        | Required | Default | Description |
+| ---------- | ----------- | :------: | ------- | ----------- |
+| `children` | `ReactNode` |    ✅    |         |             |
+
+## Using the component for a11y testing
+
+This is an example for when you would want to render an input without visually displaying a label. You still would want a label to be present so it can be used when testing with RTL as well as supporting a11y.
+
+```js
+const rendered = render(
+  <>
+    <AccessibleHidden>
+      <label htmlFor="maiden-name-input">Enter your Maiden Name</label>
+    </AccessibleHidden>
+    <input id="maiden-name-input" type="text"></input>
+  </>
+);
+
+expect(rendered.getByLabelText('Enter your Maiden Name')).toBeInTheDocument();
+// ✓ True
+```
+
+It is a common requirement to show inputs inside tables. In such a case a sighted user should be able to understand the context of the input through the column header. A label element taking space inside the cell is undesirable.
+
+## References:
+
+- [The A11Y Project - How-to: Hide Content](https://a11yproject.com/posts/how-to-hide-content/)

package/dist/commercetools-uikit-accessible-hidden.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./declarations/src/index";
+export { default } from "./declarations/src/index";

package/dist/commercetools-uikit-accessible-hidden.cjs.dev.js

@@ -0,0 +1,63 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _pt = require('prop-types');
+require('react');
+require('@emotion/react');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var _pt__default = /*#__PURE__*/_interopDefault(_pt);
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default['default'](_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context2; _forEachInstanceProperty__default['default'](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "yeifab",
+  styles: "clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px;border:0;padding:0;overflow:hidden;position:absolute;white-space:nowrap"
+} : {
+  name: "a70vxx-AccessibleHidden",
+  styles: "clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px;border:0;padding:0;overflow:hidden;position:absolute;white-space:nowrap;label:AccessibleHidden;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFjY2Vzc2libGUtaGlkZGVuLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTWSIsImZpbGUiOiJhY2Nlc3NpYmxlLWhpZGRlbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbnR5cGUgUHJvcHMgPSB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGU7XG59O1xuXG5jb25zdCBBY2Nlc3NpYmxlSGlkZGVuID0gKHByb3BzOiBQcm9wcykgPT4gKFxuICA8ZGl2XG4gICAgY3NzPXtjc3NgXG4gICAgICBjbGlwOiByZWN0KDAgMCAwIDApO1xuICAgICAgd2lkdGg6IDFweDtcbiAgICAgIGhlaWdodDogMXB4O1xuICAgICAgbWFyZ2luOiAtMXB4O1xuICAgICAgYm9yZGVyOiAwO1xuICAgICAgcGFkZGluZzogMDtcbiAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICAgIGB9XG4gICAgey4uLnByb3BzfVxuICAvPlxuKTtcbkFjY2Vzc2libGVIaWRkZW4uZGlzcGxheU5hbWUgPSAnQWNjZXNzaWJsZUhpZGRlbic7XG5cbmV4cG9ydCBkZWZhdWx0IEFjY2Vzc2libGVIaWRkZW47XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var AccessibleHidden = function AccessibleHidden(props) {
+  return jsxRuntime.jsx("div", _objectSpread({
+    css: _ref
+  }, props));
+};
+
+AccessibleHidden.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: _pt__default['default'].node.isRequired
+} : {};
+AccessibleHidden.displayName = 'AccessibleHidden';
+var AccessibleHidden$1 = AccessibleHidden;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+exports['default'] = AccessibleHidden$1;
+exports.version = version;

package/dist/commercetools-uikit-accessible-hidden.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./commercetools-uikit-accessible-hidden.cjs.prod.js");
+} else {
+  module.exports = require("./commercetools-uikit-accessible-hidden.cjs.dev.js");
+}

package/dist/commercetools-uikit-accessible-hidden.cjs.prod.js

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+require('prop-types');
+require('react');
+require('@emotion/react');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default['default'](_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context2; _forEachInstanceProperty__default['default'](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+
+var _ref = {
+  name: "yeifab",
+  styles: "clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px;border:0;padding:0;overflow:hidden;position:absolute;white-space:nowrap"
+} ;
+
+var AccessibleHidden = function AccessibleHidden(props) {
+  return jsxRuntime.jsx("div", _objectSpread({
+    css: _ref
+  }, props));
+};
+
+AccessibleHidden.propTypes = {};
+AccessibleHidden.displayName = 'AccessibleHidden';
+var AccessibleHidden$1 = AccessibleHidden;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+exports['default'] = AccessibleHidden$1;
+exports.version = version;

package/dist/commercetools-uikit-accessible-hidden.esm.js

@@ -0,0 +1,46 @@
+import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
+import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
+import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
+import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
+import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
+import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
+import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
+import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
+import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
+import _pt from 'prop-types';
+import 'react';
+import '@emotion/react';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "yeifab",
+  styles: "clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px;border:0;padding:0;overflow:hidden;position:absolute;white-space:nowrap"
+} : {
+  name: "a70vxx-AccessibleHidden",
+  styles: "clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px;border:0;padding:0;overflow:hidden;position:absolute;white-space:nowrap;label:AccessibleHidden;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFjY2Vzc2libGUtaGlkZGVuLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTWSIsImZpbGUiOiJhY2Nlc3NpYmxlLWhpZGRlbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbnR5cGUgUHJvcHMgPSB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGU7XG59O1xuXG5jb25zdCBBY2Nlc3NpYmxlSGlkZGVuID0gKHByb3BzOiBQcm9wcykgPT4gKFxuICA8ZGl2XG4gICAgY3NzPXtjc3NgXG4gICAgICBjbGlwOiByZWN0KDAgMCAwIDApO1xuICAgICAgd2lkdGg6IDFweDtcbiAgICAgIGhlaWdodDogMXB4O1xuICAgICAgbWFyZ2luOiAtMXB4O1xuICAgICAgYm9yZGVyOiAwO1xuICAgICAgcGFkZGluZzogMDtcbiAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICAgIGB9XG4gICAgey4uLnByb3BzfVxuICAvPlxuKTtcbkFjY2Vzc2libGVIaWRkZW4uZGlzcGxheU5hbWUgPSAnQWNjZXNzaWJsZUhpZGRlbic7XG5cbmV4cG9ydCBkZWZhdWx0IEFjY2Vzc2libGVIaWRkZW47XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var AccessibleHidden = function AccessibleHidden(props) {
+  return jsx("div", _objectSpread({
+    css: _ref
+  }, props));
+};
+
+AccessibleHidden.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: _pt.node.isRequired
+} : {};
+AccessibleHidden.displayName = 'AccessibleHidden';
+var AccessibleHidden$1 = AccessibleHidden;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+export { AccessibleHidden$1 as default, version };

package/dist/declarations/src/accessible-hidden.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+declare type Props = {
+    children: ReactNode;
+};
+declare const AccessibleHidden: {
+    (props: Props): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default AccessibleHidden;

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './accessible-hidden';
+export { default as version } from './version';

package/dist/declarations/src/version.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "0.0.0-canary-2021830134526";
+export default _default;

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@commercetools-uikit/accessible-hidden",
+  "description": "Component to hide content offscreen while keeping it accessible. This is also helpful for testing purposes.",
+  "version": "0.0.0-canary-2021830134526",
+  "bugs": "https://github.com/commercetools/ui-kit/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/commercetools/ui-kit.git",
+    "directory": "packages/components/accessible-hidden"
+  },
+  "homepage": "https://uikit.commercetools.com",
+  "keywords": [
+    "javascript",
+    "design system",
+    "react",
+    "uikit"
+  ],
+  "license": "MIT",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "main": "dist/commercetools-uikit-accessible-hidden.cjs.js",
+  "module": "dist/commercetools-uikit-accessible-hidden.esm.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepare": "../../../scripts/version.js replace"
+  },
+  "dependencies": {
+    "@babel/runtime": "7.14.8",
+    "@babel/runtime-corejs3": "7.14.9",
+    "@emotion/react": "^11.4.0",
+    "prop-types": "15.7.2"
+  },
+  "devDependencies": {
+    "react": "17.0.2"
+  },
+  "peerDependencies": {
+    "react": "17.x"
+  }
+}