@aarhus-university/au-lib-react-components 10.5.0 → 10.8.0

package/stories/AUSpinnerComponent.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import AUSpinnerComponent from '../src/components/AUSpinnerComponent';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Delphinus/Spinner',
+  component: AUSpinnerComponent,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  decorators: [
+    (Story) => {
+      // , context) => {
+      /*
+      const { args: { themeColor, themeMode } } = context;
+      const themeColorClass = themeColor === 'none' ? '' : `theme--${themeColor}`;
+      const themeModeClass = themeMode === 'light' ? '' : `theme--${themeMode}`;
+      */
+      return (
+        <div>
+          {Story()}
+        </div>
+      );
+    },
+  ],
+} as ComponentMeta<typeof AUSpinnerComponent>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof AUSpinnerComponent> = (args) => (
+  <AUSpinnerComponent {...args}>
+    <p>Child content</p>
+  </AUSpinnerComponent>
+);
+
+export const Spinner = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Spinner.args = {
+  loaded: false,
+  height: '20rem',
+  init: 'box',
+};

package/stories/AUToolbarComponent.stories.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import AUToolbarComponent from '../src/components/AUToolbarComponent';
+import AUButtonComponent from '../src/components/AUButtonComponent';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Delphinus/Toolbar',
+  component: AUToolbarComponent,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  decorators: [
+    (Story) => {
+      // , context) => {
+      /*
+      const { args: { themeColor, themeMode } } = context;
+      const themeColorClass = themeColor === 'none' ? '' : `theme--${themeColor}`;
+      const themeModeClass = themeMode === 'light' ? '' : `theme--${themeMode}`;
+      */
+      return (
+        <div>
+          {Story()}
+          <div className="box theme--background-secondary"><p>Content goes here...</p></div>
+        </div>
+      );
+    },
+  ],
+} as ComponentMeta<typeof AUToolbarComponent>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof AUToolbarComponent> = (args) => (
+  <AUToolbarComponent {...args} />
+);
+
+export const Form_Field_and_Buttons_and_Link = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Form_Field_and_Buttons_and_Link.args = {
+  lang: 'da',
+  elements: [
+    <div className="form__field">
+      <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 type="text" label="Select all" />,
+    <div className="toolbar__split" />,
+    <div className="toolbar__text-item">
+      <a className="a--text-link" href="#">Open in new tab</a>
+    </div>,
+  ]
+};
+
+export const Many_Actions = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Many_Actions.args = {
+  lang: 'da',
+  elements: Array(25).fill(null).map((_, i) => <AUButtonComponent label={`Action ${i + 1}`} />),
+};
+
+export const Groupings = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Groupings.args = {
+  lang: 'da',
+  elements: [
+    <div className="toolbar__group">
+      <div className="form__field form__field--horizontal">
+        <label htmlFor="demo-all">All issues</label>
+        <input type="radio" name="demo" value="all" id="demo-all" defaultChecked />
+      </div>
+      <div className="form__field form__field--horizontal">
+        <label htmlFor="demo-open">Open</label>
+        <input type="radio" name="demo" value="all" id="demo-open" />
+      </div>
+      <div className="form__field form__field--horizontal">
+        <label htmlFor="demo-resolved">Resolved</label>
+        <input type="radio" name="demo" value="all" id="demo-resolved" />
+      </div>
+    </div>,
+    <div className="toolbar__split" />,
+    <div className="toolbar__group">
+      <div className="form__field form__field--horizontal">
+        <label htmlFor="demo-epics">Epics</label>
+        <input type="checkbox" id="demo-epics" defaultChecked />
+      </div>
+      <div className="form__field form__field--horizontal">
+        <label htmlFor="demo-stories">Stories</label>
+        <input type="checkbox" id="demo-stories" defaultChecked />
+      </div>
+      <div className="form__field form__field--horizontal">
+        <label htmlFor="demo-tasks">Tasks</label>
+        <input type="checkbox" id="demo-tasks" defaultChecked />
+      </div>
+    </div>,
+  ],
+};