@pingux/astro 1.33.1-alpha.2 → 1.34.0-alpha.0

package/lib/cjs/hooks/useTShirtSize/useTShirtSize.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _react = require("react");
+
+var _tShirtSizes = require("../../utils/devUtils/constants/tShirtSizes");
+
+/**
+ * A custom hook which returns the pixel value of a tShirtSize.
+ * @param {Object} [props] The props object
+ * @param {String} [props.size] The size of the svg container
+ * @returns {Object} `{ sizeProps: Object }`
+ */
+var useTShirtSize = function useTShirtSize(_ref) {
+  var size = _ref.size;
+  var value = (0, _react.useMemo)(function () {
+    if (size === undefined) {
+      // eslint-disable-next-line no-console
+      console.warn('useTShirtSize hook requires a size prop.');
+      return undefined;
+    }
+
+    return _tShirtSizes.tShirtSizes === null || _tShirtSizes.tShirtSizes === void 0 ? void 0 : _tShirtSizes.tShirtSizes[size];
+  }, [size]);
+  var sizeProps = {
+    size: value ? "".concat(value, "px") : size
+  };
+  return {
+    sizeProps: sizeProps
+  };
+};
+
+var _default = useTShirtSize;
+exports["default"] = _default;

package/lib/cjs/hooks/useTShirtSize/useTShirtSize.test.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _reactHooks = require("@testing-library/react-hooks");
+
+var _useTShirtSize = _interopRequireDefault(require("./useTShirtSize"));
+
+describe('useTShirtSize', function () {
+  beforeEach(function () {
+    process.env.NODE_ENV = 'development';
+
+    global.console.warn = function () {
+      return jest.mock();
+    }; // eslint-disable-line no-console
+
+  });
+  afterEach(function () {
+    process.env.NODE_ENV = 'test';
+    jest.clearAllMocks();
+  });
+  test('default', function () {
+    var props = {};
+    var spy = jest.spyOn(console, 'warn');
+    expect(spy).toHaveBeenCalledTimes(0);
+    (0, _reactHooks.renderHook)(function () {
+      return (0, _useTShirtSize["default"])(props);
+    });
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+});
+test('does not warn if size prop does exist', function () {
+  var props = {
+    size: 15
+  };
+  var spy = jest.spyOn(console, 'warn');
+  expect(spy).not.toHaveBeenCalled();
+  (0, _reactHooks.renderHook)(function () {
+    return (0, _useTShirtSize["default"])(props);
+  });
+  expect(spy).not.toHaveBeenCalled();
+});
+test('returns size value if size is a tshirt value', function () {
+  var props = {
+    size: 'xs'
+  };
+
+  var _renderHook = (0, _reactHooks.renderHook)(function () {
+    return (0, _useTShirtSize["default"])(props);
+  }),
+      result = _renderHook.result;
+
+  var obj = {
+    sizeProps: {
+      size: '15px'
+    }
+  };
+  expect(result.current).toEqual(obj);
+});
+test('returns size value if size is a string value', function () {
+  var props = {
+    size: '20px'
+  };
+
+  var _renderHook2 = (0, _reactHooks.renderHook)(function () {
+    return (0, _useTShirtSize["default"])(props);
+  }),
+      result = _renderHook2.result;
+
+  var obj = {
+    sizeProps: {
+      size: '20px'
+    }
+  };
+  expect(result.current).toEqual(obj);
+});
+test('returns size value if size is a number value', function () {
+  var props = {
+    size: 20
+  };
+
+  var _renderHook3 = (0, _reactHooks.renderHook)(function () {
+    return (0, _useTShirtSize["default"])(props);
+  }),
+      result = _renderHook3.result;
+
+  var obj = {
+    sizeProps: {
+      size: 20
+    }
+  };
+  expect(result.current).toEqual(obj);
+});

package/lib/cjs/utils/devUtils/constants/tShirtSizes.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.tShirtSizes = void 0;
+var tShirtSizes = {
+  xs: 15,
+  sm: 20,
+  md: 25
+};
+exports.tShirtSizes = tShirtSizes;

package/lib/components/Icon/Icon.js

@@ -16,6 +16,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import Box from '../Box';
+import { useTShirtSize } from '../../hooks';
 /**
  * Basic icon component.
  * Icons will fill the given container, which is '1em' x '1em' by default, and will maintain their
@@ -33,16 +34,19 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var Icon = /*#__PURE__*/forwardRef(function (props, ref) {
   var color = props.color,
       IconComponent = props.icon,
-      size = props.size,
       sx = props.sx;
+
+  var _useTShirtSize = useTShirtSize(props),
+      sizeProps = _useTShirtSize.sizeProps;
+
   return ___EmotionJSX(Box, _extends({
     as: IconComponent,
     ref: ref
   }, props, {
+    size: sizeProps.size,
     sx: _objectSpread({
       fill: color,
-      size: "".concat(size, "px"),
-      minWidth: size
+      minWidth: sizeProps.size
     }, sx)
   }));
 });
@@ -52,9 +56,9 @@ Icon.propTypes = {
 
   /**
    * The size of the icon container. If given a number value, it will be converted to pixels.
-   * Standard icon sizes are 15, 22, and 40.
-  */
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+   * Tshirt sizing is recommended and can be passed to the size prop as 'xs', 'sm' , 'md'
+   * rendering 15, 20, and 25 pixel svg containers.  */
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
   /** A theme-aware prop to set the icon's color. */
   color: PropTypes.string

package/lib/components/Icon/Icon.stories.js

@@ -1,11 +1,17 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import React from 'react';
+import AccountIcon from 'mdi-react/AccountIcon';
+import AccountGroupIcon from 'mdi-react/AccountGroupIcon';
+import LockIcon from 'mdi-react/LockIcon';
 import SearchIcon from 'mdi-react/SearchIcon';
+import TagIcon from 'mdi-react/TagIcon';
 import { v4 as uuid } from 'uuid';
-import Icon from '.';
+import { Box, Icon, Table, TableBody, TableCell, TableHead, TableRow, Text } from '../../index';
 import { flatColorList } from '../../styles/colors';
+import { tShirtSizes } from '../../utils/devUtils/constants/tShirtSizes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Icon',
@@ -27,9 +33,10 @@ export default {
     },
     size: {
       control: {
-        type: 'text'
+        type: 'select',
+        options: _Object$keys(tShirtSizes)
       },
-      description: 'The size of the icon container. If given a number value, it will be converted to pixels. ' + 'Standard icon sizes are 15, 22, and 40. ' + 'Numeric value and/or paired with a unit. https://www.w3schools.com/cssref/css_units.asp'
+      description: 'The size of the icon container. If given a number value, it will be converted to pixels. ' + 'Tshirt sizing is recommended and can be passed to the size prop as "xs", "sm" , "md" ' + 'rendering 15, 20, and 25 pixel svg containers.'
     },
     color: {
       control: {
@@ -71,4 +78,96 @@ export var SVGIcons = function SVGIcons() {
     color: "active",
     size: 40
   });
+};
+var rowHeadings = ['SVG Size', 'Code Example', 'Icon Example'];
+export var Sizes = function Sizes() {
+  return ___EmotionJSX(Table, null, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
+    key: "head"
+  }, _mapInstanceProperty(rowHeadings).call(rowHeadings, function (head) {
+    return ___EmotionJSX(TableCell, {
+      isHeading: true,
+      key: head
+    }, head);
+  }))), ___EmotionJSX(TableBody, {
+    sx: {
+      borderBottom: 'unset'
+    }
+  }, ___EmotionJSX(TableRow, {
+    height: "45px",
+    bg: "transparent !important"
+  }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "XS | 15px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, '<Icon icon={SearchIcon}/> size="xs"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
+    icon: SearchIcon,
+    size: "xs"
+  }))), ___EmotionJSX(TableRow, {
+    height: "45px",
+    bg: "transparent !important"
+  }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "SM | 20px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, '<Icon icon={SearchIcon}/> size="sm"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
+    icon: SearchIcon,
+    size: "sm"
+  }))), ___EmotionJSX(TableRow, {
+    height: "45px",
+    bg: "transparent !important"
+  }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "MD | 25px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, '<Icon icon={SearchIcon}/> size="md"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
+    icon: SearchIcon,
+    size: "md"
+  })))));
+};
+export var CommonlyUsed = function CommonlyUsed() {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md",
+    mb: "xs"
+  }, ___EmotionJSX(Icon, {
+    icon: AccountIcon,
+    color: "accent.40",
+    size: "sm"
+  }), ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, "import AccountIcon from 'mdi-react/AccountIcon'; ")), ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md",
+    mb: "xs"
+  }, ___EmotionJSX(Icon, {
+    icon: AccountGroupIcon,
+    color: "accent.40",
+    size: "sm"
+  }), ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, "import AccountGroupIcon from 'mdi-react/AccountGroupIcon'; ")), ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md",
+    mb: "xs"
+  }, ___EmotionJSX(Icon, {
+    icon: LockIcon,
+    color: "accent.40",
+    size: "sm"
+  }), ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, "import LockIcon from 'mdi-react/LockIcon'; ")), ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md",
+    mb: "xs"
+  }, ___EmotionJSX(Icon, {
+    icon: SearchIcon,
+    color: "accent.40",
+    size: "sm"
+  }), ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, "import SearchIcon from 'mdi-react/SearchIcon'; ")), ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md",
+    mb: "xs"
+  }, ___EmotionJSX(Icon, {
+    icon: TagIcon,
+    color: "accent.40",
+    size: "sm"
+  }), ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, "import TagIcon from 'mdi-react/TagIcon'; ")));
 };

package/lib/components/Icon/Icon.test.js

@@ -23,4 +23,25 @@ test('default icon', function () {
   var icon = screen.getByTestId(testId);
   expect(icon).toBeInstanceOf(SVGSVGElement);
   expect(icon).toBeInTheDocument();
+});
+test('icon renders correct xsmall tshirt size', function () {
+  getComponent({
+    size: 'xs'
+  });
+  var xsIcon = screen.getByTestId(testId);
+  expect(xsIcon).toHaveStyleRule('width', '15px');
+});
+test('icon renders correct small tshirt size', function () {
+  getComponent({
+    size: 'sm'
+  });
+  var smIcon = screen.getByTestId(testId);
+  expect(smIcon).toHaveStyleRule('width', '20px');
+});
+test('icon renders correct medium tshirt size', function () {
+  getComponent({
+    size: 'md'
+  });
+  var mdIcon = screen.getByTestId(testId);
+  expect(mdIcon).toHaveStyleRule('width', '25px');
 });

package/lib/components/IconButton/IconButton.stories.js

@@ -1,8 +1,11 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import CreateIcon from 'mdi-react/CreateIcon';
-import IconButton from '.';
-import Icon from '../Icon';
+import DotsVerticalIcon from 'mdi-react/DotsVerticalIcon';
+import DeleteIcon from 'mdi-react/DeleteIcon';
+import PlusIcon from 'mdi-react/PlusIcon';
+import PencilIcon from 'mdi-react/PencilIcon';
+import { Box, Icon, IconButton, Table, TableHead, TableRow, TableCell, TableBody, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'IconButton',
@@ -64,4 +67,258 @@ export var Disabled = function Disabled() {
   }, ___EmotionJSX(Icon, {
     icon: CreateIcon
   }));
+};
+export var Sizes = function Sizes() {
+  return ___EmotionJSX(Table, null, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
+    key: "head"
+  }, ___EmotionJSX(TableCell, {
+    isHeading: true,
+    width: "40%"
+  }, "Icon & Button Size"), ___EmotionJSX(TableCell, {
+    isHeading: true
+  }, "Code Example"), ___EmotionJSX(TableCell, {
+    isHeading: true
+  }, "Icon Example"))), ___EmotionJSX(TableBody, {
+    sx: {
+      borderBottom: 'unset'
+    }
+  }, ___EmotionJSX(TableRow, {
+    bg: "transparent !important"
+  }, ___EmotionJSX(TableCell, {
+    width: "40%"
+  }, ___EmotionJSX(Text, null, "XS | 21px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, " ", "<IconButton aria-label='create buton' variant='inverted'/>"), ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, "<Icon icon={CreateIcon} size='xs'/>"), ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, '</IconButton>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(IconButton, {
+    "aria-label": "create buton",
+    variant: "inverted",
+    sx: {
+      width: 'unset'
+    }
+  }, ___EmotionJSX(Icon, {
+    icon: CreateIcon,
+    size: "xs"
+  })))), ___EmotionJSX(TableRow, {
+    bg: "transparent !important"
+  }, ___EmotionJSX(TableCell, {
+    width: "40%"
+  }, ___EmotionJSX(Text, null, "SM | 26px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, " ", "<IconButton aria-label='create buton' variant='inverted'/>"), ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, "<Icon icon={CreateIcon} size='sm'/>"), ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, '</IconButton>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(IconButton, {
+    "aria-label": "create buton",
+    variant: "inverted",
+    sx: {
+      width: 'unset'
+    }
+  }, ___EmotionJSX(Icon, {
+    icon: CreateIcon,
+    size: "sm"
+  })))), ___EmotionJSX(TableRow, {
+    bg: "transparent !important"
+  }, ___EmotionJSX(TableCell, {
+    width: "40%"
+  }, ___EmotionJSX(Text, null, "MD | 31px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, " ", "<IconButton aria-label='create buton' variant='inverted'/>"), ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, "<Icon icon={CreateIcon} size='md'/>"), ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, '</IconButton>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(IconButton, {
+    "aria-label": "create buton",
+    variant: "inverted",
+    sx: {
+      width: 'unset'
+    }
+  }, ___EmotionJSX(Icon, {
+    icon: CreateIcon,
+    size: "md"
+  }))))));
+};
+export var CommonlyUsed = function CommonlyUsed() {
+  return (// please note these are intentionally not mapped for story transparency
+    ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
+      fontFamily: "monospace",
+      mb: "md"
+    }, "import DeleteIcon from 'mdi-react/DeleteIcon'; "), ___EmotionJSX(Box, {
+      isRow: true,
+      gap: "md",
+      mb: "md"
+    }, ___EmotionJSX(IconButton, {
+      "aria-label": "delete"
+    }, ___EmotionJSX(Icon, {
+      icon: DeleteIcon,
+      size: "xs"
+    })), ___EmotionJSX(IconButton, {
+      "aria-label": "delete"
+    }, ___EmotionJSX(Icon, {
+      icon: DeleteIcon,
+      size: "sm"
+    })), ___EmotionJSX(IconButton, {
+      "aria-label": "delete"
+    }, ___EmotionJSX(Icon, {
+      icon: DeleteIcon,
+      size: "md"
+    }))), ___EmotionJSX(Box, {
+      isRow: true,
+      gap: "md",
+      mb: "xl"
+    }, ___EmotionJSX(IconButton, {
+      "aria-label": "delete",
+      variant: "inverted"
+    }, ___EmotionJSX(Icon, {
+      icon: DeleteIcon,
+      size: "xs"
+    })), ___EmotionJSX(IconButton, {
+      "aria-label": "delete",
+      variant: "inverted"
+    }, ___EmotionJSX(Icon, {
+      icon: DeleteIcon,
+      size: "sm"
+    })), ___EmotionJSX(IconButton, {
+      "aria-label": "delete",
+      variant: "inverted"
+    }, ___EmotionJSX(Icon, {
+      icon: DeleteIcon,
+      size: "md"
+    }))), ___EmotionJSX(Text, {
+      fontFamily: "monospace",
+      mb: "md"
+    }, "import DotsVerticalIcon from 'mdi-react/DotsVerticalIcon'; "), ___EmotionJSX(Box, {
+      isRow: true,
+      gap: "md",
+      mb: "md"
+    }, ___EmotionJSX(IconButton, {
+      "aria-label": "more options"
+    }, ___EmotionJSX(Icon, {
+      icon: DotsVerticalIcon,
+      size: "xs"
+    })), ___EmotionJSX(IconButton, {
+      "aria-label": "more options"
+    }, ___EmotionJSX(Icon, {
+      icon: DotsVerticalIcon,
+      size: "sm"
+    })), ___EmotionJSX(IconButton, {
+      "aria-label": "more options"
+    }, ___EmotionJSX(Icon, {
+      icon: DotsVerticalIcon,
+      size: "md"
+    }))), ___EmotionJSX(Box, {
+      isRow: true,
+      gap: "md",
+      mb: "xl"
+    }, ___EmotionJSX(IconButton, {
+      "aria-label": "more options",
+      variant: "inverted"
+    }, ___EmotionJSX(Icon, {
+      icon: DotsVerticalIcon,
+      size: "xs"
+    })), ___EmotionJSX(IconButton, {
+      "aria-label": "more options",
+      variant: "inverted"
+    }, ___EmotionJSX(Icon, {
+      icon: DotsVerticalIcon,
+      size: "sm"
+    })), ___EmotionJSX(IconButton, {
+      "aria-label": "more options",
+      variant: "inverted"
+    }, ___EmotionJSX(Icon, {
+      icon: DotsVerticalIcon,
+      size: "md"
+    }))), ___EmotionJSX(Text, {
+      fontFamily: "monospace",
+      mb: "md"
+    }, "import PlusIcon from 'mdi-react/PlusIcon'; "), ___EmotionJSX(Box, {
+      isRow: true,
+      gap: "md",
+      mb: "md"
+    }, ___EmotionJSX(IconButton, {
+      "aria-label": "add"
+    }, ___EmotionJSX(Icon, {
+      icon: PlusIcon,
+      size: "xs"
+    })), ___EmotionJSX(IconButton, {
+      "aria-label": "add"
+    }, ___EmotionJSX(Icon, {
+      icon: PlusIcon,
+      size: "sm"
+    })), ___EmotionJSX(IconButton, {
+      "aria-label": "add"
+    }, ___EmotionJSX(Icon, {
+      icon: PlusIcon,
+      size: "md"
+    }))), ___EmotionJSX(Box, {
+      isRow: true,
+      gap: "md",
+      mb: "xl"
+    }, ___EmotionJSX(IconButton, {
+      "aria-label": "add",
+      variant: "inverted"
+    }, ___EmotionJSX(Icon, {
+      icon: PlusIcon,
+      size: "xs"
+    })), ___EmotionJSX(IconButton, {
+      "aria-label": "add",
+      variant: "inverted"
+    }, ___EmotionJSX(Icon, {
+      icon: PlusIcon,
+      size: "sm"
+    })), ___EmotionJSX(IconButton, {
+      "aria-label": "add",
+      variant: "inverted"
+    }, ___EmotionJSX(Icon, {
+      icon: PlusIcon,
+      size: "md"
+    }))), ___EmotionJSX(Text, {
+      fontFamily: "monospace",
+      mb: "md"
+    }, "import PencilIcon from 'mdi-react/PencilIcon'; "), ___EmotionJSX(Box, {
+      isRow: true,
+      gap: "md",
+      mb: "md"
+    }, ___EmotionJSX(IconButton, {
+      "aria-label": "create"
+    }, ___EmotionJSX(Icon, {
+      icon: PencilIcon,
+      size: "xs"
+    })), ___EmotionJSX(IconButton, {
+      "aria-label": "create"
+    }, ___EmotionJSX(Icon, {
+      icon: PencilIcon,
+      size: "sm"
+    })), ___EmotionJSX(IconButton, {
+      "aria-label": "create"
+    }, ___EmotionJSX(Icon, {
+      icon: PencilIcon,
+      size: "md"
+    }))), ___EmotionJSX(Box, {
+      isRow: true,
+      gap: "md",
+      mb: "xl"
+    }, ___EmotionJSX(IconButton, {
+      "aria-label": "create",
+      variant: "inverted"
+    }, ___EmotionJSX(Icon, {
+      icon: PencilIcon,
+      size: "xs"
+    })), ___EmotionJSX(IconButton, {
+      "aria-label": "create",
+      variant: "inverted"
+    }, ___EmotionJSX(Icon, {
+      icon: PencilIcon,
+      size: "sm"
+    })), ___EmotionJSX(IconButton, {
+      "aria-label": "create",
+      variant: "inverted"
+    }, ___EmotionJSX(Icon, {
+      icon: PencilIcon,
+      size: "md"
+    }))))
+  );
 };

package/lib/hooks/index.js

@@ -1,16 +1,17 @@
 export { default as useAriaLabelWarning } from './useAriaLabelWarning';
 export { default as useColumnStyles } from './useColumnStyles';
+export { default as useComponentToggle } from './useComponentToggle';
+export { default as useDebounce } from './useDebounce';
 export { default as useDeprecationWarning } from './useDeprecationWarning';
+export { default as useFallbackImage } from './useFallbackImage';
 export { default as useField } from './useField';
 export { default as useLabelHeight } from './useLabelHeight';
 export { default as useModalState } from './useModalState';
+export { default as useNavBarPress } from './useNavBarPress';
 export { default as useOverlayPanelState } from './useOverlayPanelState';
 export { default as usePropWarning } from './usePropWarning';
 export { default as useProgressiveState } from './useProgressiveState';
-export { default as useComponentToggle } from './useComponentToggle';
-export { default as useNavBarPress } from './useNavBarPress';
 export { default as useRockerButton } from './useRockerButton';
 export { default as useSelectField } from './useSelectField';
 export { default as useStatusClasses } from './useStatusClasses';
-export { default as useDebounce } from './useDebounce';
-export { default as useFallbackImage } from './useFallbackImage';
+export { default as useTShirtSize } from './useTShirtSize';

package/lib/hooks/useTShirtSize/index.js

@@ -0,0 +1 @@
+export { default } from './useTShirtSize';

package/lib/hooks/useTShirtSize/useTShirtSize.js

@@ -0,0 +1,29 @@
+import { useMemo } from 'react';
+import { tShirtSizes } from '../../utils/devUtils/constants/tShirtSizes';
+/**
+ * A custom hook which returns the pixel value of a tShirtSize.
+ * @param {Object} [props] The props object
+ * @param {String} [props.size] The size of the svg container
+ * @returns {Object} `{ sizeProps: Object }`
+ */
+
+var useTShirtSize = function useTShirtSize(_ref) {
+  var size = _ref.size;
+  var value = useMemo(function () {
+    if (size === undefined) {
+      // eslint-disable-next-line no-console
+      console.warn('useTShirtSize hook requires a size prop.');
+      return undefined;
+    }
+
+    return tShirtSizes === null || tShirtSizes === void 0 ? void 0 : tShirtSizes[size];
+  }, [size]);
+  var sizeProps = {
+    size: value ? "".concat(value, "px") : size
+  };
+  return {
+    sizeProps: sizeProps
+  };
+};
+
+export default useTShirtSize;