@pingux/astro 1.28.2-alpha.1 → 1.29.0-alpha.0

package/lib/recipes/LogoTabs.stories.js

@@ -82,42 +82,52 @@ var GoogleLogo = function GoogleLogo(props) {
   })));
 };
 
-var logoTabsStyling = {
-  display: 'inline-flex !important',
-  '& > div': {
-    borderStyle: 'none',
-    borderBottomWidth: '0px !important',
-    justifyContent: 'space-between'
-  }
-};
-
-var tabStyling = _objectSpread(_objectSpread({}, tab), {}, {
-  alignSelf: 'center',
-  '& > svg': {
-    borderWidth: 1,
-    borderStyle: 'dashed',
-    borderColor: 'neutral.70',
-    borderRadius: 4,
-    bg: 'white',
-    outline: '5px solid white'
+var sx = {
+  container: {
+    display: 'inline-flex !important',
+    position: 'relative',
+    width: '500px'
   },
-  '&.is-selected > svg': {
-    borderWidth: 1,
-    borderStyle: 'solid',
-    borderColor: 'active',
-    borderRadius: 4,
-    bg: 'white',
-    outline: '5px solid white'
+  separator: {
+    position: 'absolute',
+    top: '25%',
+    backgroundColor: 'accent.70'
   },
-  // we only want the change the color of icon svgs to active not company logos
-  '&.is-selected > .mdi-icon > path': {
-    fill: 'active'
+  logoTabsStyling: {
+    display: 'inline-flex !important',
+    '& > div': {
+      borderStyle: 'none',
+      borderBottomWidth: '0px !important',
+      justifyContent: 'space-between'
+    }
   },
-  '& > [role="presentation"]': {
-    height: '0px'
-  }
-});
-
+  tabStyling: _objectSpread(_objectSpread({}, tab), {}, {
+    alignSelf: 'center',
+    '& > svg': {
+      borderWidth: 1,
+      borderStyle: 'dashed',
+      borderColor: 'neutral.70',
+      borderRadius: 4,
+      bg: 'white',
+      outline: '5px solid white'
+    },
+    '&.is-selected > svg': {
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: 'active',
+      borderRadius: 4,
+      bg: 'white',
+      outline: '5px solid white'
+    },
+    // we only want the change the color of icon svgs to active not company logos
+    '&.is-selected > .mdi-icon > path': {
+      fill: 'active'
+    },
+    '& > [role="presentation"]': {
+      height: '0px'
+    }
+  })
+};
 export var LogoTabs = function LogoTabs() {
   var _useState = useState('tab1'),
       _useState2 = _slicedToArray(_useState, 2),
@@ -130,19 +140,11 @@ export var LogoTabs = function LogoTabs() {
       setShowMiddleTabs = _useState4[1];
 
   return ___EmotionJSX(Box, {
-    sx: {
-      display: 'inline-flex !important',
-      position: 'relative',
-      width: '500px'
-    }
+    sx: sx.container
   }, ___EmotionJSX(Separator, {
-    sx: {
-      position: 'absolute',
-      top: '25%'
-    },
-    bg: "accent.70"
+    sx: sx.separator
   }), ___EmotionJSX(Tabs, {
-    sx: logoTabsStyling,
+    sx: sx.logoTabsStyling,
     selectedKey: currentTab,
     onSelectionChange: setCurrentTab,
     onClick: setShowMiddleTabs
@@ -158,7 +160,7 @@ export var LogoTabs = function LogoTabs() {
       color: "#eb4c15",
       p: "sm"
     }),
-    sx: tabStyling
+    sx: sx.tabStyling
   }, ___EmotionJSX(Text, null, "This is content for the source tab")), (showMiddleTabs || currentTab !== 'tab1') && ___EmotionJSX(Tab, {
     key: "tab2",
     title: ___EmotionJSX(Text, {
@@ -171,7 +173,7 @@ export var LogoTabs = function LogoTabs() {
       color: "accent.20",
       p: "xs"
     }),
-    sx: tabStyling
+    sx: sx.tabStyling
   }, ___EmotionJSX(Text, null, "This is content for the custom filter tab")), (showMiddleTabs || currentTab !== 'tab1') && ___EmotionJSX(Tab, {
     key: "tab3",
     title: ___EmotionJSX(Text, {
@@ -184,7 +186,7 @@ export var LogoTabs = function LogoTabs() {
       color: "accent.20",
       p: "xs"
     }),
-    sx: tabStyling
+    sx: sx.tabStyling
   }, ___EmotionJSX(Text, null, "This is content for attribute mapping tab")), ___EmotionJSX(Tab, {
     key: "tab4",
     title: ___EmotionJSX(Text, {
@@ -196,6 +198,6 @@ export var LogoTabs = function LogoTabs() {
       size: 65,
       p: "sm"
     }),
-    sx: tabStyling
+    sx: sx.tabStyling
   }, ___EmotionJSX(Text, null, "This is content for the target tab"))));
 };

package/lib/recipes/RadioButtonsWithLinks.stories.js

@@ -78,7 +78,8 @@ export var Default = function Default() {
         fontWeight: 2
       }
     }, "Permissions"), ___EmotionJSX(IconButton, {
-      onPress: onPress
+      onPress: onPress,
+      "aria-label": "close icon button"
     }, ___EmotionJSX(Icon, {
       icon: CloseIcon
     }))), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {

package/lib/utils/devUtils/props/ariaAttributes.js

@@ -0,0 +1,85 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
+import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); 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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import omit from 'lodash/omit';
+import PropTypes from 'prop-types';
+var descriptions = {
+  ariaControls: 'Identifies the element (or elements) whose contents or presence are controlled by the current element.',
+  ariaDescribedby: 'Identifies the element (or elements) that describes the object.',
+  ariaDetails: 'Identifies the element (or elements) that provide a detailed, extended description for the object.',
+  ariaErrormessage: 'Identifies the element that provides an error message for the object.',
+  ariaLabel: 'Defines a string value that labels the current element.',
+  ariaLabelledby: 'Identifies the element (or elements) that labels the current element.'
+};
+export var ariaAttributeBaseDocSettings = {
+  type: {
+    summary: 'string'
+  },
+  control: {
+    type: 'text'
+  },
+  table: {
+    category: 'Aria Attributes'
+  }
+};
+export var ariaAttributeBaseArgTypes = {
+  'aria-controls': _objectSpread({
+    description: descriptions.ariaControls
+  }, ariaAttributeBaseDocSettings),
+  'aria-describedby': _objectSpread({
+    description: descriptions.ariaDescribedby
+  }, ariaAttributeBaseDocSettings),
+  'aria-details': _objectSpread({
+    description: descriptions.ariaDetails
+  }, ariaAttributeBaseDocSettings),
+  'aria-errormessage': _objectSpread({
+    description: descriptions.ariaErrormessage
+  }, ariaAttributeBaseDocSettings),
+  'aria-label': _objectSpread({
+    description: descriptions.ariaLabel
+  }, ariaAttributeBaseDocSettings),
+  'aria-labelledby': _objectSpread({
+    description: descriptions.ariaLabelledby
+  }, ariaAttributeBaseDocSettings)
+};
+export var ariaAttributesBasePropTypes = {
+  'aria-controls': PropTypes.string,
+  'aria-describedby': PropTypes.string,
+  'aria-details': PropTypes.string,
+  'aria-errormessage': PropTypes.string,
+  'aria-label': PropTypes.string,
+  'aria-labelledby': PropTypes.string
+};
+export var getAriaAttributeProps = function getAriaAttributeProps(props) {
+  var _context;
+
+  var ariaProps = _reduceInstanceProperty(_context = _Object$entries(props)).call(_context, function (acc, _ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        val = _ref2[1];
+
+    if (key.match(/^aria-.*/)) return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, val));
+    return _objectSpread({}, acc);
+  }, {});
+
+  var nonAriaProps = _objectSpread({}, omit(props, _Object$keys(ariaProps)));
+
+  return {
+    ariaProps: ariaProps,
+    nonAriaProps: nonAriaProps
+  };
+};

package/lib/utils/devUtils/props/ariaAttributes.test.js

@@ -0,0 +1,50 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import { getAriaAttributeProps } from './ariaAttributes';
+describe('getAriaAttributeProps', function () {
+  var subject = function subject(props) {
+    return getAriaAttributeProps(props);
+  };
+
+  var propsWithNoAriaAttributes = {
+    propOne: 'prop1',
+    propTwo: 'prop2'
+  };
+  describe('when there are 2 props and no aria attributes', function () {
+    it('returns an object with empty ariaProps and 2 nonAriaProps', function () {
+      var _subject = subject(propsWithNoAriaAttributes),
+          ariaProps = _subject.ariaProps,
+          nonAriaProps = _subject.nonAriaProps;
+
+      expect(_Object$keys(nonAriaProps).length).toBe(2);
+      expect(_Object$keys(ariaProps).length).toBe(0);
+    });
+  });
+  describe('when there is an aria-label and an aria-labelledby in the props', function () {
+    it('returns an object with ariaProps containing aria-label and aria-labelledby', function () {
+      var propsWithAriaAttributes = _objectSpread({
+        'aria-labelledby': 'test labelledby',
+        'aria-label': 'test label'
+      }, propsWithNoAriaAttributes);
+
+      var _subject2 = subject(propsWithAriaAttributes),
+          ariaProps = _subject2.ariaProps,
+          nonAriaProps = _subject2.nonAriaProps;
+
+      expect(_Object$keys(nonAriaProps).length).toBe(2);
+      expect(_Object$keys(ariaProps).length).toBe(2);
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.28.2-alpha.1",
+  "version": "1.29.0-alpha.0",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",