@aarhus-university/au-lib-react-components 12.0.2 → 12.1.0

package/stories/AUButtonComponent.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 import AUButtonComponent from '../src/components/AUButtonComponent';
 import { ThemeWrapper } from './lib/helpers';
 
@@ -52,12 +52,12 @@ export default {
       if: {
         arg: 'icon',
       },
-    },        
+    },
     mode: {
       table: {
         disable: true,
       }
-    },    
+    },
   },
   decorators: [
     (Story, context) => (
@@ -66,63 +66,74 @@ export default {
       </ThemeWrapper>
     )
   ],
-} as ComponentMeta<typeof AUButtonComponent>;
+} as Meta<typeof AUButtonComponent>;
 
-const Template: ComponentStory<typeof AUButtonComponent> = (args) => <AUButtonComponent {...args} />;
+type Story = StoryObj<typeof AUButtonComponent>;
 
-export const Default = Template.bind({});
-Default.args = {
-  label: 'Button',
-  type: 'default',
-  size: 'default',
-  mode: 'none',
+export const Default: Story = {
+  args: {
+    label: 'Button',
+    type: 'default',
+    size: 'default',
+    mode: 'none',
+  },
+  render: (args) => <AUButtonComponent {...args} />,
 };
 
-export const With_Icon = Template.bind({});
-With_Icon.args = {
-  label: 'Button',
-  type: 'default',
-  size: 'default',
-  mode: 'none',
-  icon: 'delphinus',
-  iconPosition: 'left',
-  hideLabel: false,
+export const With_Icon = {
+  args: {
+    label: 'Button',
+    type: 'default',
+    size: 'default',
+    mode: 'none',
+    icon: 'delphinus',
+    iconPosition: 'left',
+    hideLabel: false,
+  },
+  render: (args) => <AUButtonComponent {...args} />,
 };
 
-export const Icon_Only = Template.bind({});
-Icon_Only.args = {
-  label: 'Button',
-  type: 'default',
-  size: 'default',
-  mode: 'none',
-  icon: 'delphinus',
-  iconPosition: 'left',
-  hideLabel: true,
+export const Icon_Only = {
+  args: {
+    label: 'Button',
+    type: 'default',
+    size: 'default',
+    mode: 'none',
+    icon: 'delphinus',
+    iconPosition: 'left',
+    hideLabel: true,
+  },
+  render: (args) => <AUButtonComponent {...args} />,
 };
 
-export const Irreversible_Action = Template.bind({});
-Irreversible_Action.args = {
-  label: 'Button',
-  type: 'default',
-  size: 'default',
-  mode: 'ireversable-action',
-  icon: 'delphinus',
+export const Irreversible_Action = {
+  args: {
+    label: 'Button',
+    type: 'default',
+    size: 'default',
+    mode: 'irreversible-action',
+    icon: 'delphinus',
+  },
+  render: (args) => <AUButtonComponent {...args} />,
 };
 
-export const Confirmable_Action = Template.bind({});
-Confirmable_Action.args = {
-  label: 'Button',
-  type: 'default',
-  size: 'default',
-  mode: 'confirmable-action',
-  icon: 'delphinus',
+export const Confirmable_Action = {
+  args: {
+    label: 'Button',
+    type: 'default',
+    size: 'default',
+    mode: 'confirmable-action',
+    icon: 'delphinus',
+  },
+  render: (args) => <AUButtonComponent {...args} />,
 };
 
-export const Processing = Template.bind({});
-Processing.args = {
-  label: 'Button',
-  type: 'default',
-  size: 'default',
-  mode: 'processing',
-  disabled: true,
-};
+export const Processing = {
+  args: {
+    label: 'Button',
+    type: 'default',
+    size: 'default',
+    mode: 'processing',
+  },
+  render: (args) => <AUButtonComponent {...args} />,
+};

package/stories/AUCharacterCountComponent.stories.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import { StoryObj, Meta } from '@storybook/react';
+import AUCharacterCountComponent from '../src/components/AUCharacterCountComponent';
+import { ThemeWrapper } from './lib/helpers';
+
+export const translations = {
+  character_count: {
+    overflow: {
+      message: {
+        recommended: 'Vi anbefaler, at du maksimalt skriver {{maxchars}} tegn.',
+        allowed: 'Du må maks. skrive {{maxchars}} tegn.'
+      },
+      count: {
+        recommended: {
+          one: 'Du har skrevet 1 tegn mere end anbefalet.',
+          other: 'Du har skrevet {{overflow}} tegn mere end anbefalet.'
+        },
+        allowed: {
+          one: 'Du har skrevet 1 tegn for meget.',
+          other: 'Du har skrevet {{overflow}} tegn for meget.'
+        }
+      }
+    },
+    count_down: {
+      one: 'Du har 1 tegn tilbage',
+      other: 'Du har {{remaining}} tegn tilbage'
+    }
+  },
+};
+
+export default {
+  title: 'Delphinus/Character Count',
+  component: AUCharacterCountComponent,
+  argTypes: {
+  },
+  decorators: [
+    (Story, context) => (
+      <ThemeWrapper theme={context.globals.theme}>
+        <div className="form">
+          <div className="form__field">
+            {Story()}
+          </div>
+        </div>
+      </ThemeWrapper>
+    )
+  ],
+} as Meta<typeof AUCharacterCountComponent>;
+
+type Story = StoryObj<typeof AUCharacterCountComponent>;
+
+export const Recommended_empty: Story = {
+  args: {
+    type: 'recommended',
+    initialChars: 0,
+    maxChars: 100,
+    translations,
+    children: (
+      <input type='text' />
+    ),
+  },
+  render: (args) => {
+    return (
+      <AUCharacterCountComponent {...args}>
+        {args.children}
+      </AUCharacterCountComponent>
+    );
+  },
+};
+
+export const Recommended_initial: Story = {
+  args: {
+    type: 'recommended',
+    initialChars: 19,
+    maxChars: 15,
+    translations,
+    children: (
+      <input type='text' defaultValue="Her står noget tekst" />
+    ),
+  },
+  render: (args) => {
+    return (
+      <AUCharacterCountComponent {...args}>
+        {args.children}
+      </AUCharacterCountComponent>
+    );
+  },
+};
+
+export const Allowed_empty: Story = {
+  args: {
+    type: 'allowed',
+    initialChars: 0,
+    maxChars: 30,
+    translations,
+    children: (
+      <input type='text' />
+    ),
+  },
+  render: (args) => {
+    return (
+      <AUCharacterCountComponent {...args}>
+        {args.children}
+      </AUCharacterCountComponent>
+    );
+  },
+};
+
+export const Allowed_initial: Story = {
+  args: {
+    type: 'allowed',
+    initialChars: 19,
+    maxChars: 15,
+    translations,
+    children: (
+      <input type='text' defaultValue="Her står noget tekst" />
+    ),
+  },
+  render: (args) => {
+    return (
+      <AUCharacterCountComponent {...args}>
+        {args.children}
+      </AUCharacterCountComponent>
+    );
+  },
+};
+
+export const Allowed_initial_with_textarea: Story = {
+  args: {
+    type: 'allowed',
+    initialChars: 664,
+    maxChars: 500,
+    translations,
+    children: (
+      <textarea defaultValue="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil totam hic, eligendi illo perspiciatis temporibus quas magnam illum, amet debitis voluptatibus libero similique assumenda harum consequatur dolore veniam tenetur voluptatum.
+      Dolorem aliquam qui pariatur sapiente commodi! Odit dicta aspernatur officia quod saepe molestias tempore similique iste quasi possimus voluptas deleniti, consequatur ut facere vitae. Accusamus atque illo omnis eum unde.
+      Error necessitatibus repellat qui! Iusto, neque officia quae facilis debitis corrupti error. Quaerat nobis nesciunt, earum ea quo id unde iure quas soluta, nemo tempora natus, nisi beatae aspernatur fugiat." />
+    ),
+  },
+  render: (args) => {
+    return (
+      <AUCharacterCountComponent {...args}>
+        {args.children}
+      </AUCharacterCountComponent>
+    );
+  },
+};

package/stories/AUComboBoxComponent.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 import AUComboBoxComponent from '../src/components/AUComboBoxComponent';
 import { ThemeWrapper } from './lib/helpers';
 
@@ -66,7 +66,7 @@ export default {
   title: 'Delphinus/ComboBox',
   component: AUComboBoxComponent,
   argTypes: {
-    label: {
+    onItemSelect: {
       table: {
         disable: true,
       }
@@ -79,16 +79,17 @@ export default {
       </ThemeWrapper>
     )
   ],
-} as ComponentMeta<typeof AUComboBoxComponent>;
+} as Meta<typeof AUComboBoxComponent>;
 
-const Template: ComponentStory<typeof AUComboBoxComponent> = (args) => <AUComboBoxComponent {...args} />;
+type Story = StoryObj<typeof AUComboBoxComponent>;
 
-export const ComboBox = Template.bind({});
-
-ComboBox.args = {
-  data: countries,
-  label: 'Country',
-  resultsText: 'There are {{dataLength}} countries available.',
-  noResultsText: 'No countries found.',
-  noResultsTextSecondary: 'Try searching for something else.',
+export const ComboBox: Story = {
+  args: {
+    data: countries,
+    label: 'Country',
+    resultsText: 'There are {{dataLength}} countries available.',
+    noResultsText: 'No countries found.',
+    noResultsTextSecondary: 'Try searching for something else.',
+  },
+  render: (args) => <AUComboBoxComponent {...args} />,
 };

package/stories/AUContentToggleComponent.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 import AUContentToggleComponent from '../src/components/AUContentToggleComponent';
 import { ThemeWrapper } from './lib/helpers';
 
@@ -16,7 +16,27 @@ export default {
       table: {
         disable: true,
       }
-    },     
+    }, 
+    classNames: {
+      table: {
+        disable: true,
+      }
+    },
+    onClick: {
+      table: {
+        disable: true,
+      }
+    },
+    beforeCallback: {
+      table: {
+        disable: true,
+      }
+    },
+    afterCallback: {
+      table: {
+        disable: true,
+      }
+    },    
   },
   decorators: [
     (Story, context) => (
@@ -25,39 +45,43 @@ export default {
       </ThemeWrapper>
     )
   ],
-} as ComponentMeta<typeof AUContentToggleComponent>;
+} as Meta<typeof AUContentToggleComponent>;
 
-const Template: ComponentStory<typeof AUContentToggleComponent> = (args) => <AUContentToggleComponent {...args} />;
+type Story = StoryObj<typeof AUContentToggleComponent>;
 
-export const Hidden_when_loaded = Template.bind({});
-Hidden_when_loaded.args = {
-  toggled: false,
-  children: (
-    <div className="box theme--background-secondary box--constrain-width">
-      <button className="content-toggle__toggle button button--small" aria-expanded="false">
-        Very interesting content is hidden
-      </button>
-      <div className="content-toggle__content vertical-spacing-top" hidden>
-        <h4 className="text--label-header text--pull">The content that is toggled</h4>
-        <p>Collapsible sections are perhaps the most rudimentary of interactive design patterns on the web. All they do is let you toggle the visibility of content by clicking that content's label. Big whoop.</p>
+export const Hidden_when_loaded: Story = {
+  args: {
+    toggled: false,
+    children: (
+      <div className="box theme--background-secondary box--constrain-width">
+        <button className="content-toggle__toggle button button--small" aria-expanded="false">
+          Very interesting content is hidden
+        </button>
+        <div className="content-toggle__content vertical-spacing-top" hidden>
+          <h4 className="text--label-header text--pull">The content that is toggled</h4>
+          <p>Collapsible sections are perhaps the most rudimentary of interactive design patterns on the web. All they do is let you toggle the visibility of content by clicking that content's label. Big whoop.</p>
+        </div>
       </div>
-    </div>
-  ),
+    ),
+  },
+  render: (args) => <AUContentToggleComponent {...args} />,
 };
 
-export const Shown_when_loaded = Template.bind({});
-Shown_when_loaded.args = {
-  toggled: true,
-  children: (
-    <div className="box theme--background-secondary box--constrain-width">
-      <button className="content-toggle__toggle button button--small" aria-expanded="true">
-        Very interesting content is hidden
-      </button>
-      <div className="content-toggle__content vertical-spacing-top">
-        <h4 className="text--label-header text--pull">The content that is toggled</h4>
-        <p>Collapsible sections are perhaps the most rudimentary of interactive design patterns on the web. All they do is let you toggle the visibility of content by clicking that content's label. Big whoop.</p>
+export const Shown_when_loaded: Story = {
+  args: {
+    toggled: true,
+    children: (
+      <div className="box theme--background-secondary box--constrain-width">
+        <button className="content-toggle__toggle button button--small" aria-expanded="true">
+          Very interesting content is hidden
+        </button>
+        <div className="content-toggle__content vertical-spacing-top">
+          <h4 className="text--label-header text--pull">The content that is toggled</h4>
+          <p>Collapsible sections are perhaps the most rudimentary of interactive design patterns on the web. All they do is let you toggle the visibility of content by clicking that content's label. Big whoop.</p>
+        </div>
       </div>
-    </div>
-  ),
+    ),
+  },
+  render: (args) => <AUContentToggleComponent {...args} />,
 };
 

package/stories/AUEditorComponent.stories.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { StoryObj, Meta } from '@storybook/react';
+import AUEditorComponent from '../src/components/AUEditorComponent';
+import { ThemeWrapper } from './lib/helpers';
+import { translations } from './AUCharacterCountComponent.stories';
+
+export default {
+  title: 'Delphinus/Editor',
+  component: AUEditorComponent,
+  argTypes: {
+    title: {
+      table: {
+        disable: true,
+      }
+    },
+  },
+  decorators: [
+    (Story, context) => (
+      <ThemeWrapper theme={context.globals.theme}>
+        {Story()}
+      </ThemeWrapper>
+    )
+  ],
+} as Meta<typeof AUEditorComponent>;
+
+type Story = StoryObj<typeof AUEditorComponent>;
+
+export const Without_Character_Count: Story = {
+  args: {
+    lang: 'en',
+    id: 'editor',
+    textareaName: 'editor',
+    initialValue: '<h3>Overskrift</h3><p>Indhold</p>',
+    translations,
+    onEditorChange: (value: string) => console.log(value),
+  },
+  render: (args) => <AUEditorComponent {...args} />,
+};
+
+export const With_Recommended_Character_Count: Story = {
+  args: {
+    lang: 'da',
+    id: 'editor',
+    textareaName: 'editor',
+    initialValue: '',
+    showCounter: true,
+    counterType: 'recommended',
+    maxChars: 100,
+    translations,
+    onEditorChange: (value: string) => console.log(value),    
+  },
+  render: (args) => <AUEditorComponent {...args} />,
+};
+
+export const With_Allowed_Character_Count: Story = {
+  args: {
+    lang: 'da',
+    id: 'editor',
+    textareaName: 'editor',
+    initialValue: '',
+    showCounter: true,
+    counterType: 'allowed',
+    maxChars: 100,
+    translations,
+    onEditorChange: (value: string) => console.log(value),
+  },
+  render: (args) => <AUEditorComponent {...args} />,
+};