@aarhus-university/au-lib-react-components 10.22.0 → 11.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "sideEffects": false,
   "name": "@aarhus-university/au-lib-react-components",
-  "version": "10.22.0",
+  "version": "11.0.0",
   "description": "Library for shared React components for various applications on au.dk",
   "scripts": {
     "test": "jest",
@@ -74,7 +74,7 @@
   "dependencies": {
     "@aarhus-university/au-designsystem-delphinus": "0.34.2",
     "@aarhus-university/au-designsystem-delphinus-dev": "0.2.0",
-    "@aarhus-university/types": "^0.15.0",
+    "@aarhus-university/types": "^0.16.1",
     "@reduxjs/toolkit": "^1.8.3",
     "@types/google.analytics": "^0.0.42",
     "@types/history": "^5.0.0",

package/src/components/AUButtonComponent.tsx

@@ -21,7 +21,7 @@ const AUButtonComponent: FC<AUButtonComponentProps> = ({
   const typeClass = type === 'default' ? '' : `button--${type}`;
   let iconClass = '';
   if (icon) {
-    iconClass = 'button--icon';
+    iconClass = `button--icon icon-${icon}`;
     if (iconPosition) {
       iconClass = `${iconClass} button--icon--${iconPosition}`;
     }
@@ -48,7 +48,6 @@ const AUButtonComponent: FC<AUButtonComponentProps> = ({
         modeClass,
         disabled && mode !== 'processing' ? 'visually-disabled' : '',
       ].concat(classNames || []).join(' ').replace(/\s+/g, ' ').trim()}
-      data-icon={icon === '' ? null : icon}
       title={icon && hideLabel ? label : undefined}
       aria-expanded={ariaExpanded}
       onClick={(event: MouseEvent<HTMLButtonElement>) => {

package/stories/AUButtonComponent.stories.tsx

@@ -27,6 +27,12 @@ export default {
         'large',
       ]
     },
+    icon: {
+      control: {
+        type: 'select',
+      },
+      options: ['add', 'attachment', 'award', 'bike', 'bookmark', 'brand-linkedin', 'brand-mendeley', 'brand-orcid', 'brand-researchgate', 'brand-twitter', 'calendar', 'camera', 'car', 'class', 'close', 'collapse', 'confirm', 'confirm-circle', 'context-menu', 'copy', 'current-semester', 'dark-mode', 'delphinus', 'delete', 'design', 'download', 'edit', 'email', 'exam', 'expand', 'failed', 'failed-circle', 'file', 'filter', 'finish', 'heart', 'hide', 'infinity', 'info', 'info-circle', 'instructor', 'instructor-with-class', 'language', 'location', 'link-chain', 'link-internal', 'link-external', 'link-external-square', 'lms-course-common', 'lms-course-sections', 'lms-course-additional', 'lms-course-merge-with', 'lms-course-merged', 'mailbox', 'menu', 'news', 'next', 'note', 'notifications', 'passed-exemption', 'phone', 'phone-landline', 'previous', 'print', 'public-transport', 'receipt', 'refresh', 'reorder', 'replay', 'route', 'search', 'season-autumn', 'season-christmas', 'season-easter', 'season-halloween', 'season-spring', 'season-summer', 'season-winter', 'send', 'settings', 'source-system', 'student-place-accepted', 'student-place-not-offered', 'student-place-offered', 'student-place-rejected', 'student-place-standby', 'sign-in', 'sign-out', 'spock', 'sync', 'theme-chooser', 'tip', 'tools', 'tooltip', 'upload', 'user-profile', 'user-impersonation', 'view', 'viewport-default', 'viewport-medium', 'viewport-wide', 'walking', 'warning', 'warning-triangle'],
+    },
     iconPosition: {
       control: {
         type: 'select',
@@ -78,7 +84,7 @@ With_Icon.args = {
   type: 'default',
   size: 'default',
   mode: 'none',
-  icon: '',
+  icon: 'delphinus',
   iconPosition: 'left',
   hideLabel: false,
 };
@@ -89,7 +95,7 @@ Icon_Only.args = {
   type: 'default',
   size: 'default',
   mode: 'none',
-  icon: '',
+  icon: 'delphinus',
   iconPosition: 'left',
   hideLabel: true,
 };
@@ -100,7 +106,7 @@ Irreversible_Action.args = {
   type: 'default',
   size: 'default',
   mode: 'ireversable-action',
-  icon: '',
+  icon: 'delphinus',
 };
 
 export const Confirmable_Action = Template.bind({});
@@ -109,7 +115,7 @@ Confirmable_Action.args = {
   type: 'default',
   size: 'default',
   mode: 'confirmable-action',
-  icon: '',
+  icon: 'delphinus',
 };
 
 export const Processing = Template.bind({});