@aarhus-university/au-lib-react-components 11.6.1 → 11.7.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "sideEffects": false,
   "name": "@aarhus-university/au-lib-react-components",
-  "version": "11.6.1",
+  "version": "11.7.0",
   "description": "Library for shared React components for various applications on au.dk",
   "scripts": {
     "test": "jest",
@@ -72,9 +72,9 @@
     "webpack-cli": "^4.9.2"
   },
   "dependencies": {
-    "@aarhus-university/au-designsystem-delphinus": "0.35.2",
+    "@aarhus-university/au-designsystem-delphinus": "0.41.1",
     "@aarhus-university/au-designsystem-delphinus-dev": "0.2.0",
-    "@aarhus-university/types": "0.18.0",
+    "@aarhus-university/types": "0.21.1",
     "@reduxjs/toolkit": "^1.8.3",
     "@types/google.analytics": "^0.0.42",
     "@types/history": "^5.0.0",

package/src/components/AUAutoSuggestComponent.js

@@ -116,20 +116,20 @@ AUAutoSuggestComponent.displayName = 'AUAutoSuggestComponent';
 AUAutoSuggestComponent.defaultProps = {
   id: 'autosuggest1',
   theme: {
-    container: 'react-autosuggest__container',
-    containerOpen: 'react-autosuggest__container--open',
-    input: 'react-autosuggest__input',
-    inputOpen: 'react-autosuggest__input--open',
-    inputFocused: 'react-autosuggest__input--focused',
-    suggestionsContainer: 'react-autosuggest__suggestions-container',
-    suggestionsContainerOpen: 'react-autosuggest__suggestions-container--open',
-    suggestionsList: 'react-autosuggest__suggestions-list',
-    suggestion: 'react-autosuggest__suggestion',
-    suggestionFirst: 'react-autosuggest__suggestion--first',
-    suggestionHighlighted: 'react-autosuggest__suggestion--highlighted',
-    sectionContainer: 'react-autosuggest__section-container',
-    sectionContainerFirst: 'react-autosuggest__section-container--first',
-    sectionTitle: 'react-autosuggest__section-title',
+    container: 'autosuggest',
+    containerOpen: 'autosuggest--open',
+    input: 'autosuggest__input',
+    inputOpen: 'autosuggest__input--open',
+    inputFocused: 'autosuggest__input--focused',
+    suggestionsContainer: 'autosuggest__suggestions',
+    suggestionsContainerOpen: 'autosuggest__suggestions--open',
+    suggestionsList: 'autosuggest__suggestions__list',
+    suggestion: 'autosuggest__suggestions__list__item',
+    suggestionFirst: 'autosuggest__suggestions__list--first',
+    suggestionHighlighted: 'autosuggest__suggestions__list--highlighted',
+    sectionContainer: 'autosuggest__section',
+    sectionContainerFirst: 'autosuggest__section--first',
+    sectionTitle: 'autosuggest__section__title',
   },
   clearInput: false,
   type: 'text',

package/src/components/AUStepComponent.tsx

@@ -1,20 +1,40 @@
+/* eslint-disable max-len */
 /* eslint-disable react/no-array-index-key */
 import React, { FC } from 'react';
 
+const getStepItemClass = (current: boolean, final: boolean, finalIcon: string): string => {
+  let className = 'stepper__item';
+  if (current) {
+    className = `${className} stepper__item--active`;
+  }
+  if (final) {
+    className = `${className} stepper__item--final`;
+    if (finalIcon) {
+      className = `${className} icon-${finalIcon}`;
+    }
+  }
+
+  return className;
+};
+
 const AUStepComponent: FC<AUStepComponentProps> = ({
+  title,
   step,
   children,
   stepHeadlines,
   introElement,
   outroElement,
+  showFinal,
+  finalIcon,
 }: AUStepComponentProps) => (
-  <>
+  <div className="stepper">
+    <h1 className="stepper__step-title">{title}</h1>
     {
       (step > -1 && step < children.length) && (
-        <ol className="stepper" data-steps={children.length}>
+        <ol className="stepper__list" data-steps={children.length} aria-hidden>
           {
             stepHeadlines.map((headline, index) => (
-              <li key={headline} className={`stepper__item${index === step ? ' stepper__item--active' : ''}`}>
+              <li key={headline} className={getStepItemClass(index === step, (typeof showFinal !== 'undefined' && showFinal) && (children.length - 1 === index), finalIcon || '')}>
                 <span className="stepper__item__label">{headline}</span>
               </li>
             ))
@@ -35,12 +55,14 @@ const AUStepComponent: FC<AUStepComponentProps> = ({
     {
       (step > children.length - 1) && outroElement
     }
-  </>
+  </div>
 );
 
 AUStepComponent.defaultProps = {
   introElement: undefined,
   outroElement: undefined,
+  showFinal: false,
+  finalIcon: '',
 };
 
 AUStepComponent.displayName = 'AUStepComponent';

package/stories/AUAutoSuggestComponent.stories.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import AUAutoSuggestComponent from '../src/components/AUAutoSuggestComponent';
+import { ThemeWrapper } from './lib/helpers';
+
+export default {
+  title: 'Delphinus/AutoSuggest',
+  component: AUAutoSuggestComponent,
+  argTypes: {
+    label: {
+      table: {
+        disable: true,
+      }
+    },
+  },
+  decorators: [
+    (Story, context) => (
+      <ThemeWrapper theme={context.globals.theme}>
+        {Story()}
+      </ThemeWrapper>
+    )
+  ],
+} as ComponentMeta<typeof AUAutoSuggestComponent>;
+
+const Template: ComponentStory<typeof AUAutoSuggestComponent> = (args) => <div className="form__field"><AUAutoSuggestComponent {...args} /></div>;
+
+export const AutoComplete = Template.bind({});
+
+AutoComplete.args = {
+  collection: [],
+  getSuggestions: (value, _, callback) => {
+    const inputValue = value.trim().toLowerCase();
+    const inputLength = inputValue.length;
+
+    console.log('tis ');
+
+    const results = inputLength === 0
+      ? []
+      : [
+        { id: 1, name: 'Copenhagen' },
+        { id: 2, name: 'Aarhus' },
+        { id: 3, name: 'Odense' },
+        { id: 4, name: 'Aalborg' },
+        { id: 5, name: 'Esbjerg' },
+        { id: 6, name: 'Randers' },
+        { id: 7, name: 'Kolding' },
+        { id: 8, name: 'Horsens' },
+        { id: 9, name: 'Vejle' },
+        { id: 10, name: 'Herning' },
+        { id: 11, name: 'Frederiksberg' },
+        { id: 12, name: 'Fredericia' },
+        { id: 13, name: 'Roskilde' },
+        { id: 14, name: 'Silkeborg' },
+        { id: 15, name: 'Næstved' },
+        { id: 16, name: 'Helsingør' },
+        { id: 17, name: 'Hvidovre' },
+        { id: 18, name: 'Holstebro' },
+        { id: 19, name: 'Hjørring' },
+        { id: 20, name: 'Glostrup' },
+        { id: 21, name: 'Hillerød' },
+        { id: 22, name: 'Slagelse' },
+        { id: 23, name: 'Viborg' },
+        { id: 24, name: 'Ikast-Brande' },
+        { id: 25, name: 'Frederikshavn' },
+        { id: 26, name: 'Ringsted' },
+        { id: 27, name: 'Taastrup' },
+        { id: 28, name: 'Køge' },
+        { id: 29, name: 'Nørresundby' },
+        { id: 30, name: 'Haderslev' },
+        { id: 31, name: 'Varde' },
+        { id: 32, name: 'Hedensted' },
+        { id: 33, name: 'Sønderborg' },
+        { id: 34, name: 'Greve' },
+        { id: 35, name: 'Albertslund' },
+        { id: 36, name: 'Skive' },
+        { id: 37, name: 'Hørsholm' },
+        { id: 38, name: 'Horsens' },
+        { id: 39, name: 'Herning' },
+        { id: 40, name: 'Frederiksberg' },
+        { id: 41, name: 'Fredericia' },
+        { id: 42, name: 'Roskilde' },
+        { id: 43, name: 'Silkeborg' },
+        { id: 44, name: 'Næstved' },
+        { id: 45, name: 'Helsingør' },
+        { id: 46, name: 'Hvidovre' },
+        { id: 47, name: 'Holstebro' },
+
+      ].filter((lang) => lang.name.toLowerCase().slice(0, inputLength) === inputValue);
+
+    callback(results);
+  },
+  getSuggestionValue: (suggestion) => suggestion.name,
+  setResults: () => { },
+  setQuery: () => { },
+  renderSuggestion: (suggestion) => <span>{suggestion.name}</span>,
+  placeholder: 'Search',
+};

package/stories/AUStepComponent.stories.tsx

@@ -26,6 +26,7 @@ const Template: ComponentStory<typeof AUStepComponent> = (args) => (
 export const Five_Steps = Template.bind({});
 Five_Steps.args = {
   step: -1,
+  title: 'Dette er en overskrift af hensyn til tilgængelighed',
   children: [
     <p>Step 1</p>,
     <p>Step 2</p>,
@@ -36,5 +37,24 @@ Five_Steps.args = {
   stepHeadlines: ['Introduction', 'Network connection', 'Sign out devices', 'Change password', 'Update device'],
   introElement: <p>Her begynder vi</p>,
   outroElement: <p>Her slutter vi</p>,
+  showFinal: false,
+};
+
+export const Five_Steps_With_Icon = Template.bind({});
+Five_Steps_With_Icon.args = {
+  step: -1,
+  title: 'Dette er en overskrift af hensyn til tilgængelighed',
+  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>,
+  showFinal: true,
+  finalIcon: 'send',
 };