@pingux/astro 1.29.0 → 1.30.0-alpha.0

package/lib/components/IconBadge/IconBadge.stories.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import ArrowIcon from 'mdi-react/ArrowTopRightThickIcon';
+import GroupIcon from 'mdi-react/AccountGroupIcon';
+import IconBadge from '.';
+import { Icon, Box } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'IconBadge',
+  component: IconBadge,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  }
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(Box, null, ___EmotionJSX(IconBadge, _extends({}, args, {
+    baseSize: 25,
+    circleSize: 15
+  }), ___EmotionJSX(Icon, {
+    icon: GroupIcon,
+    size: "25px",
+    color: "accent.40"
+  }), ___EmotionJSX(Icon, {
+    icon: ArrowIcon,
+    size: "13px",
+    color: "accent.40"
+  })));
+};

package/lib/components/IconBadge/IconBadge.test.js

@@ -0,0 +1,53 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { IconBadge, Icon } from '../../index';
+import axeTest from '../../utils/testUtils/testAxe';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-icon';
+var defaultProps = {
+  'data-testid': testId
+};
+
+var ThisIcon = function ThisIcon(args) {
+  return ___EmotionJSX("svg", _extends({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, args), ___EmotionJSX("path", {
+    d: "M12.5 7.28125C14.1979 7.28125 15.6979 7.6875 16.9167 8.21875C18.0417 8.71875 18.75 9.84375 18.75 11.0625V12.75H6.25V11.0729C6.25 9.84375 6.95833 8.71875 8.08333 8.22917C9.30208 7.6875 10.8021 7.28125 12.5 7.28125ZM4.16667 7.54167C5.3125 7.54167 6.25 6.60417 6.25 5.45833C6.25 4.3125 5.3125 3.375 4.16667 3.375C3.02083 3.375 2.08333 4.3125 2.08333 5.45833C2.08333 6.60417 3.02083 7.54167 4.16667 7.54167ZM5.34375 8.6875C4.95833 8.625 4.57292 8.58333 4.16667 8.58333C3.13542 8.58333 2.15625 8.80208 1.27083 9.1875C0.5 9.52083 0 10.2708 0 11.1146V12.75H4.6875V11.0729C4.6875 10.2083 4.92708 9.39583 5.34375 8.6875ZM20.8333 7.54167C21.9792 7.54167 22.9167 6.60417 22.9167 5.45833C22.9167 4.3125 21.9792 3.375 20.8333 3.375C19.6875 3.375 18.75 4.3125 18.75 5.45833C18.75 6.60417 19.6875 7.54167 20.8333 7.54167ZM25 11.1146C25 10.2708 24.5 9.52083 23.7292 9.1875C22.8437 8.80208 21.8646 8.58333 20.8333 8.58333C20.4271 8.58333 20.0417 8.625 19.6563 8.6875C20.0729 9.39583 20.3125 10.2083 20.3125 11.0729V12.75H25V11.1146ZM12.5 0.25C14.2292 0.25 15.625 1.64583 15.625 3.375C15.625 5.10417 14.2292 6.5 12.5 6.5C10.7708 6.5 9.375 5.10417 9.375 3.375C9.375 1.64583 10.7708 0.25 12.5 0.25Z",
+    fill: "currentColor"
+  }));
+};
+
+var ThisSecondIcon = function ThisSecondIcon(args) {
+  return ___EmotionJSX("svg", _extends({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, args), ___EmotionJSX("path", {
+    d: "M1.71875 0.624999L7.96875 0.625L7.96875 6.875L6.09375 6.875L6.09375 3.89375L1.73125 8.125L0.46875 6.85625L4.75 2.5L1.71875 2.5L1.71875 0.624999Z",
+    fill: "currentColor"
+  }));
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(IconBadge, _extends({}, props, {
+    backgroundColor: "white"
+  }, defaultProps), ___EmotionJSX(Icon, {
+    icon: ThisIcon,
+    size: "25px",
+    color: "accent.40"
+  }), ___EmotionJSX(Icon, {
+    icon: ThisSecondIcon,
+    size: "9px",
+    color: "accent.40"
+  })));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('default iconbadge render', function () {
+  getComponent();
+  var iconButton = screen.getByTestId(testId);
+  expect(iconButton).toBeInTheDocument();
+});

package/lib/components/IconBadge/index.js

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

package/lib/index.js

@@ -43,6 +43,8 @@ export { default as HelpHint } from './components/HelpHint';
 export * from './components/HelpHint';
 export { default as Icon } from './components/Icon';
 export * from './components/Icon';
+export { default as IconBadge } from './components/IconBadge';
+export * from './components/IconBadge';
 export { default as IconButton } from './components/IconButton';
 export * from './components/IconButton';
 export { default as IconButtonToggle } from './components/IconButtonToggle';

package/lib/recipes/PanelHeader.stories.js

@@ -12,16 +12,28 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Panel Header'
 };
+var sx = {
+  wrapper: {
+    width: 'fit-content',
+    alignItems: 'center',
+    bg: 'accent.99',
+    py: 'sm',
+    pl: 'md'
+  },
+  title: {
+    fontSize: 'md',
+    lineHeight: '18px'
+  },
+  subtitle: {
+    fontSize: 'sm',
+    my: '1px',
+    lineHeight: '16px'
+  }
+};
 export var Default = function Default() {
   return ___EmotionJSX(Box, {
-    bg: "accent.99",
-    py: "sm",
-    pl: "md",
     isRow: true,
-    alignItems: "center",
-    sx: {
-      width: 'fit-content'
-    }
+    sx: sx.wrapper
   }, ___EmotionJSX(Icon, {
     icon: AccountIcon,
     size: 25,
@@ -30,17 +42,10 @@ export var Default = function Default() {
     ml: "sm",
     mr: "xx"
   }, ___EmotionJSX(Text, {
-    sx: {
-      fontSize: 'md',
-      lineHeight: '18px'
-    },
+    sx: sx.title,
     variant: "bodyStrong"
   }, "Fons Vernall"), ___EmotionJSX(Text, {
-    sx: {
-      fontSize: 'sm',
-      my: '1px',
-      lineHeight: '16px'
-    },
+    sx: sx.subtitle,
     variant: "subtitle"
   }, "fvernall0@google.it")), ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(IconButton, {
     "aria-label": "Menu Button"

package/package.json

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