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

package/__tests__/jest/AUButtonComponent.test.tsx

@@ -65,7 +65,7 @@ describe('<AUButtonComponent />', () => {
       <AUButtonComponent
         label="Min knap"
         type="text"
-        icon=""
+        icon="delphinus"
         iconPosition="right"
       />,
     );
@@ -84,7 +84,7 @@ describe('<AUButtonComponent />', () => {
     const { container } = render(
       <AUButtonComponent
         label="Min knap"
-        icon=""
+        icon="delphinus"
         hideLabel
       />,
     );
@@ -115,7 +115,7 @@ describe('<AUButtonComponent />', () => {
         label="Min knap"
         size="large"
         mode="confirmable-action"
-        icon=""
+        icon="delphinus"
         hideLabel
       />,
     );

package/__tests__/jest/AUModalComponent.test.tsx

@@ -27,14 +27,14 @@ const ModalWrapper: React.FC = () => {
         sender={btnRef.current}
         onClose={() => setShowModal(false)}
       >
-        <div className="modal-view__body">
+        <>
           <h2 className="modal-view__header theme--dark">
             Header
           </h2>
           <div className="modal-view__content">
             <p>Content</p>
           </div>
-        </div>
+        </>
       </AUModalComponent>
     </>
   );
@@ -58,14 +58,14 @@ describe('<AUModalComponent />', () => {
           show
           sender={fakeBtn}
         >
-          <div className="modal-view__body">
+          <>
             <h2 className="modal-view__header theme--dark">
               Header
             </h2>
             <div className="modal-view__content">
               <p>Content</p>
             </div>
-          </div>
+          </>
         </AUModalComponent>
       </div>,
     );
@@ -82,14 +82,14 @@ describe('<AUModalComponent />', () => {
           show={false}
           sender={fakeBtn}
         >
-          <div className="modal-view__body">
+          <>
             <h2 className="modal-view__header theme--dark">
               Header
             </h2>
             <div className="modal-view__content">
               <p>Content</p>
             </div>
-          </div>
+          </>
         </AUModalComponent>
       </div>,
     );
@@ -122,14 +122,14 @@ describe('<AUModalComponent />', () => {
           show
           sender={fakeBtn}
         >
-          <div className="modal-view__body">
+          <>
             <h2 className="modal-view__header theme--dark">
               Header
             </h2>
             <div className="modal-view__content">
               <p>Content</p>
             </div>
-          </div>
+          </>
         </AUModalComponent>
       </div>,
     );
@@ -148,14 +148,14 @@ describe('<AUModalComponent />', () => {
           show
           sender={fakeBtn}
         >
-          <div className="modal-view__body">
+          <>
             <h2 className="modal-view__header theme--dark">
               Header
             </h2>
             <div className="modal-view__content">
               <p>Content</p>
             </div>
-          </div>
+          </>
         </AUModalComponent>
       </div>,
     );

package/package.json

@@ -1,7 +1,7 @@
 {
   "sideEffects": false,
   "name": "@aarhus-university/au-lib-react-components",
-  "version": "10.22.0",
+  "version": "11.1.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.17.2",
     "@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/src/components/AUModalComponent.tsx

@@ -32,7 +32,7 @@ const AUModalComponent: FC<AUModalComponentProps> = ({
               <AUButtonComponent
                 label={lang === 'da' ? 'Luk' : 'Close'}
                 disabled={closeButtonDisabled}
-                icon=""
+                icon="close"
                 hideLabel
                 classNames={['modal-view__close']}
                 dataGtm="au-btn-modal-close"
@@ -44,7 +44,11 @@ const AUModalComponent: FC<AUModalComponentProps> = ({
               />
             )
           }
-          {children}
+          <div className="modal-view__container">
+            <div className="modal-view__body">
+              {children}
+            </div>
+          </div>
         </div>
       </div>,
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

package/src/components/AUStepComponent.tsx

@@ -0,0 +1,41 @@
+import React, { FC } from 'react';
+
+const AUStepComponent: FC<AUStepComponentProps> = ({
+  step,
+  children,
+  stepHeadlines,
+  introElement,
+  outroElement,
+}: AUStepComponentProps) => (
+  <>
+    {
+      (step > -1 && step < children.length) && (
+        <ol className="stepper" data-steps={children.length}>
+          {
+            stepHeadlines.map((headline, index) => (
+              <li key={headline} className={`stepper__item${index === step ? ' stepper__item--active' : ''}`}>
+                <span className="stepper__item__label">{headline}</span>
+              </li>
+            ))
+          }
+        </ol>
+      )
+    }
+    {
+      step < 0 && introElement
+    }
+    {(
+      children[step]) || null}
+    {
+      (step > children.length - 1) && outroElement
+    }
+  </>
+);
+
+AUStepComponent.defaultProps = {
+  introElement: undefined,
+  outroElement: undefined,
+};
+
+AUStepComponent.displayName = 'AUStepComponent';
+export default AUStepComponent;

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({});

package/stories/AUModalComponent.stories.tsx

@@ -13,7 +13,7 @@ export default {
     sender: {
       table: {
         disable: true,
-      }, 
+      },
     },
   },
   decorators: [
@@ -36,14 +36,14 @@ const Template: ComponentStory<typeof AUModalComponent> = (args) => {
         onClick={() => updateArgs({ ...args, show: true })}
       />
       <AUModalComponent {...args} onClose={() => updateArgs({ ...args, show: false })}>
-        <div className="modal-view__body">
+        <>
           <h2 className="modal-view__header">
             The quick brown fox jumps over the lazy dog
           </h2>
           <div className="modal-view__content">
             <p>"The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all of the letters of the alphabet. It is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired. Owing to its brevity and coherence, it has become widely known.</p><h3>History</h3><p>The earliest known appearance of the phrase is from The Boston Journal. In an article titled "Current Notes" in the February 10, 1885, morning edition, the phrase is mentioned as a good practice sentence for writing students: "A favorite copy set by writing teachers for their pupils is the following, because it contains every letter of the alphabet: 'A quick brown fox jumps over the lazy dog.'"[1] Dozens of other newspapers published the phrase over the next few months, all using the version of the sentence starting with "A" rather than "The".[2] The earliest known use of the phrase in its modern form (starting with "The") is from the 1888 book Illustrative Shorthand by Linda Bronson.[3] The modern form (starting with "The") became more common despite the fact that it is slightly longer than the original (starting with "A").</p>
           </div>
-        </div>
+        </>
       </AUModalComponent>
     </div>
   )

package/stories/AUStepComponent.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import AUStepComponent from '../src/components/AUStepComponent';
+import { ThemeWrapper } from './lib/helpers';
+
+export default {
+  title: 'Delphinus/Stepper',
+  component: AUStepComponent,
+  argTypes: {
+  },
+  decorators: [
+    (Story, context) => (
+      <ThemeWrapper theme={context.globals.theme}>
+        {Story()}
+      </ThemeWrapper>
+    )
+  ],
+} as ComponentMeta<typeof AUStepComponent>;
+
+const Template: ComponentStory<typeof AUStepComponent> = (args) => (
+  <>
+    <AUStepComponent {...args} />
+  </>
+);
+
+export const Five_Steps = Template.bind({});
+Five_Steps.args = {
+  step: -1,
+  children: [
+    <p>Step 1</p>,
+    <p>Step 2</p>,
+    <p>Step 3</p>,
+    <p>Step 4</p>,
+    <p>Step 5</p>,
+  ],
+  stepHeadlines: ['Introduction', 'Network connection', 'Sign out devices', 'Change password', 'Update device'],
+  introElement: <p>Her begynder vi</p>,
+  outroElement: <p>Her slutter vi</p>,
+};
+

package/stories/AUToolbarComponent.stories.tsx

@@ -44,8 +44,8 @@ Form_Field_and_Buttons_and_Link.args = {
       <label htmlFor="demo-search">Search</label>
       <input type="search" autoComplete="off" autoCorrect="off" autoCapitalize="off" id="demo-search" />
     </div>,
-    <AUButtonComponent icon="" label="Mark as read" />,
-    <AUButtonComponent icon="" hideLabel label="Delete" />,
+    <AUButtonComponent icon="confirm-circle" label="Mark as read" />,
+    <AUButtonComponent icon="delete" hideLabel label="Delete" />,
     <AUButtonComponent type="text" label="Select all" />,
     <div className="toolbar__split" />,
     <div className="toolbar__text-item">
@@ -103,6 +103,7 @@ Filter.args = {
     <AUContentToggleComponent
       toggled={false}
       beforeCallback={(content: HTMLElement) => closeAllContentTogglesInToolbar(findToolbar(content))}
+      onClick={(content: HTMLElement, button: HTMLButtonElement) => console.log(content, button)}
       afterCallback={(content: HTMLElement, button: HTMLButtonElement) => {
         const toolbar = findToolbar(content);
         const ariaExpanded = button.getAttribute('aria-expanded');
@@ -158,6 +159,7 @@ Filter.args = {
     <AUContentToggleComponent
       toggled={false}
       beforeCallback={(content: HTMLElement) => closeAllContentTogglesInToolbar(findToolbar(content))}
+      onClick={(content: HTMLElement, button: HTMLButtonElement) => console.log(content, button)}
       afterCallback={(content: HTMLElement, button: HTMLButtonElement) => {
         const toolbar = findToolbar(content);
         const ariaExpanded = button.getAttribute('aria-expanded');
@@ -208,7 +210,7 @@ Filter.args = {
               <div className="selection-list__option">
                 <input type="checkbox" id="option-9" />
                 <label htmlFor="option-9">Aarhus BSS</label>
-              </div>              
+              </div>
             </div>
           </fieldset>
         </div>