diff --git a/src/stories/Blocks/reservation-page/ReservationPage.stories.tsx b/src/stories/Blocks/reservation-page/ReservationPage.stories.tsx
index 3081f3326..f07152311 100644
--- a/src/stories/Blocks/reservation-page/ReservationPage.stories.tsx
+++ b/src/stories/Blocks/reservation-page/ReservationPage.stories.tsx
@@ -1,38 +1,38 @@
-import { ComponentStory } from "@storybook/react";
-import { withDesign } from "storybook-addon-designs";
+import { StoryFn } from "@storybook/react";
import ReservationPage, { ReservationPageProps } from "./ReservationPage";
export default {
title: "Blocks / Reservation / Reservation Page",
component: ReservationPage,
- decorators: [withDesign],
argTypes: {
headline: {
name: "Headline",
- defaultValue: "Your reservations",
control: { type: "text" },
},
readyForPickup: {
name: "Ready for pickup amount",
- defaultValue: 2,
control: { type: "number" },
},
physicalReservations: {
name: "Physical reservations amount",
- defaultValue: 2,
control: { type: "number" },
},
digitalReservations: {
name: "Digital reservations amount",
- defaultValue: 2,
control: { type: "number" },
},
skeletonVersion: {
name: "Is skeleton version?",
- defaultValue: false,
control: { type: "boolean" },
},
},
+ args: {
+ headline: "Your reservations",
+ readyForPickup: 2,
+ physicalReservations: 2,
+ digitalReservations: 2,
+ skeletonVersion: false,
+ },
parameters: {
design: {
type: "figma",
@@ -41,8 +41,8 @@ export default {
},
};
-const Template: ComponentStory = (
- args: ReservationPageProps
+const Template: StoryFn = (
+ args: ReservationPageProps,
) => ;
+} as Meta;
-const EmailModalTemplate: ComponentStory = (args) => {
+const EmailModalTemplate: StoryFn = (args) => {
return = (args) => {
+const SmsModalTemplate: StoryFn = (args) => {
return = (args) => {
+const ExpirationModalTemplate: StoryFn = (args) => {
return = (args) => {
+const CollectModalTemplate: StoryFn = (args) => {
return ;
+} as Meta;
-const Template: ComponentStory = (args) => (
+const Template: StoryFn = (args) => (
))}
diff --git a/src/stories/Blocks/status-userprofile/statusUserprofile.stories.tsx b/src/stories/Blocks/status-userprofile/statusUserprofile.stories.tsx
index c99b8d4b2..bda5d45b7 100644
--- a/src/stories/Blocks/status-userprofile/statusUserprofile.stories.tsx
+++ b/src/stories/Blocks/status-userprofile/statusUserprofile.stories.tsx
@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
import { StatusUserprofile as StatusUserprofileComp } from "./statusUserprofile";
export default {
@@ -13,104 +13,75 @@ export default {
allowFullscreen: true,
},
argTypes: {
- loansTitle: {
- control: { type: "object" },
- defaultValue: [
- {
- title: "Fysiske lån",
- href: "/",
- counter: "12",
- },
- ],
- },
- loans: {
- control: { type: "object" },
- defaultValue: [
- {
- label: {
- label: "overskredet",
- status: "danger",
- },
- number: {
- label: 1,
- status: "danger",
- },
- title: "Afleveret for sent",
- showDot: true,
- href: "/",
- },
- {
- label: {
- label: "Udløber snart",
- status: "warning",
- },
- number: {
- label: 3,
- status: "warning",
- },
- title: "Afleveres snart",
- showDot: true,
- href: "/",
- },
- {
- number: {
- label: 8,
- status: "neutral",
- },
- title: "Længere afleveringstid",
- showDot: false,
- href: "/",
- },
- ],
- },
- reservationsTitle: {
- control: { type: "object" },
- defaultValue: [
- {
- title: "Reserveringer",
- href: "/",
- counter: "12",
- },
- ],
- },
- reservations: {
- control: { type: "object" },
- defaultValue: [
- {
- label: {
- label: "klar til lån",
- status: "info",
- },
- number: {
- label: 2,
- status: "info",
- },
- title: "Klar til dig",
- showDot: true,
- href: "/",
- },
- {
- number: {
- label: 10,
- status: "neutral",
- },
- title: "Stadig i kø",
- showDot: false,
- href: "/",
- },
- ],
- },
+ loansTitle: { control: { type: "object" } },
+ loans: { control: { type: "object" } },
+ reservationsTitle: { control: { type: "object" } },
+ reservations: { control: { type: "object" } },
},
-} as ComponentMeta
;
+} as Meta;
-const Template: ComponentStory = (args) => (
+const Template: StoryFn = (args) => (
What is DPL Design System
DPL Design System is a library of UI components that should be used as a common base system for "Danmarks Biblioteker" / "Det Digitale Folkebibliotek".
-The design is implemented via Storybook/React and is output with HTML markup and css-classes through an addon in Storybook. What is storybook
-Storybook is an open source tool for building UI components and pages in isolation from your app's business logic, data, and context. Important to notice
-**Internal classes** = {
+export default {
title: "Library / Arrows / Arrow UI",
component: ArrowComp,
- decorators: [withDesign],
argTypes: {
direction: {
- defaultValue: "right",
+ control: { type: "select" },
},
hover: {
- defaultValue: true,
+ control: { type: "boolean" },
},
size: {
- defaultValue: "large",
+ control: { type: "select" },
},
},
+ args: {
+ direction: "right",
+ hover: true,
+ size: "large",
+ },
parameters: {
design: {
type: "figma",
@@ -25,14 +27,14 @@ const StoryBase: StoryBaseType = {
},
layout: "centered",
},
-};
+} as Meta;
-export default StoryBase;
-
-export const ArrowUI = (props: IconArrowProps) => (
+const Template: StoryFn = (props) => (
To animate the arrow on hover, we have to embed the svg inline
);
+
+export const ArrowUI = Template.bind({});
diff --git a/src/stories/Library/Buttons/button-favourite/ButtonFavourite.stories.tsx b/src/stories/Library/Buttons/button-favourite/ButtonFavourite.stories.tsx
index 9e1f9f963..b7053e43c 100644
--- a/src/stories/Library/Buttons/button-favourite/ButtonFavourite.stories.tsx
+++ b/src/stories/Library/Buttons/button-favourite/ButtonFavourite.stories.tsx
@@ -1,12 +1,10 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { withDesign } from "storybook-addon-designs";
+import { StoryFn, Meta } from "@storybook/react";
import { ButtonFavourite } from "./ButtonFavourite";
export default {
title: "Library / Buttons / Button Favourite",
component: ButtonFavourite,
- decorators: [withDesign],
parameters: {
design: {
type: "figma",
@@ -17,14 +15,15 @@ export default {
argTypes: {
fill: {
control: "boolean",
- defaultValue: true,
},
},
-} as ComponentMeta;
+ args: {
+ fill: true,
+ },
+} as Meta;
-const Template: ComponentStory = (args) => (
+const Template: StoryFn = (args) => (
;
+} as Meta;
-const Template: ComponentStory = (args) => (
+const Template: StoryFn = (args: ButtonUIProps) => (
;
+} as Meta;
-const Template: ComponentStory = (args) => = (args: ButtonProps) => (
+ = ({
getVariant(variant),
getSize(size),
"arrow__hover--right-small",
- classNames
+ classNames,
)}
disabled={disabled}
onClick={onClick}
diff --git a/src/stories/Library/Buttons/button/LinkButton.stories.tsx b/src/stories/Library/Buttons/button/LinkButton.stories.tsx
index f0b788066..b4b9a9f9a 100644
--- a/src/stories/Library/Buttons/button/LinkButton.stories.tsx
+++ b/src/stories/Library/Buttons/button/LinkButton.stories.tsx
@@ -1,11 +1,10 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { withDesign } from "storybook-addon-designs";
+import { StoryFn, Meta } from "@storybook/react";
+
import { LinkButton } from "./LinkButton";
export default {
title: "Library / Buttons / Link Button",
component: LinkButton,
- decorators: [withDesign],
argTypes: {
href: {
control: {
@@ -40,11 +39,9 @@ export default {
},
layout: "centered",
},
-} as ComponentMeta;
+} as Meta;
-const Template: ComponentStory = (args) => (
- = (args) => ;
+} as Meta;
-const Template: ComponentStory = (
- args: ButtonExpandProps
-) => = (args: ButtonExpandProps) => (
+ ;
+} as Meta;
-const Template: ComponentStory = (props) => (
+const Template: StoryFn = (props) => (
;
+} as Meta;
-const Template: ComponentStory = (args) => (
- = (args) => ;
+} as Meta;
-const Template: ComponentStory = (args) => (
- = (args) => ;
+} as Meta;
-const Template: ComponentStory = (args) => (
+const Template: StoryFn = (args) => (
;
+} as Meta;
-const Template: ComponentStory = (args) => (
- = (args) => = (args) => (
+const Several: StoryFn = (args) => (
<>
{[1, 2, 3, 4, 5].map((value) => {
const { label } = args;
@@ -104,7 +76,7 @@ Multiple.args = {
};
// The stories below mimic HTML structure from Drupal for checkbox usage.
-const DrupalCheckboxExample: ComponentStory = (args) => (
+const DrupalCheckboxExample: StoryFn = (args) => (
= ({
;
+} as Meta
;
-const Template: ComponentStory = (args) => (
- = (args) => ;
+} as Meta;
-const Template: ComponentStory = (args) => = (args) => ;
+} as Meta;
-const Template: ComponentStory = (args) => (
+const Template: StoryFn = (args) => (
;
+} as Meta;
-const Template: ComponentStory = (args) => (
+const Template: StoryFn = (args) => (
diff --git a/src/stories/Library/Forms/submit-button/SubmitButton.tsx b/src/stories/Library/Forms/submit-button/SubmitButton.tsx
index a99c58d78..828a8c0ca 100644
--- a/src/stories/Library/Forms/submit-button/SubmitButton.tsx
+++ b/src/stories/Library/Forms/submit-button/SubmitButton.tsx
@@ -15,7 +15,7 @@ const SubmitButton: FC = ({ buttonText, classNames }) => {
"arrow__hover--right-small",
"dpl-button",
],
- classNames
+ classNames,
);
return ;
+} as Meta;
-const Template: ComponentStory = (args) => (
+const Template: StoryFn = (args) => (
diff --git a/src/stories/Library/Heros/hero-link/HeroLink.stories.tsx b/src/stories/Library/Heros/hero-link/HeroLink.stories.tsx
index f66ea709f..11b3805c3 100644
--- a/src/stories/Library/Heros/hero-link/HeroLink.stories.tsx
+++ b/src/stories/Library/Heros/hero-link/HeroLink.stories.tsx
@@ -1,12 +1,11 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { withDesign } from "storybook-addon-designs";
+import { StoryFn, Meta } from "@storybook/react";
+
import HeroLink from "./HeroLink";
import ImageCredited from "../../image-credited/ImageCredited";
export default {
title: "Library / Hero with link",
component: HeroLink,
- decorators: [withDesign],
parameters: {
design: {
type: "figma",
@@ -16,48 +15,49 @@ export default {
argTypes: {
url: {
name: "Url",
- defaultValue: "#",
control: { type: "text" },
},
image: {
- defaultValue: (
- ;
+ args: {
+ url: "#",
+ image: (
+ ;
-const Template: ComponentStory = (args) => (
- = (args) => ;
+} as Meta;
-const Template: ComponentStory = (args) => = (args) => ;
+} as Meta;
-const Template: ComponentStory = (args) => (
+const Template: StoryFn = (args) => (
;
+} as Meta;
-const Template: ComponentStory = (args) => (
+const Template: StoryFn = (args) => (
diff --git a/src/stories/Library/Lists/list-description/ListDescription.stories.tsx b/src/stories/Library/Lists/list-description/ListDescription.stories.tsx
index fbb42909d..c86a1c507 100644
--- a/src/stories/Library/Lists/list-description/ListDescription.stories.tsx
+++ b/src/stories/Library/Lists/list-description/ListDescription.stories.tsx
@@ -1,12 +1,10 @@
-import { withDesign } from "storybook-addon-designs";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
import ListDescription from "./ListDescription";
import fakeData from "./ListDescriptionFakeData";
export default {
title: "Library / Lists / Description",
component: ListDescription,
- decorators: [withDesign],
parameters: {
design: {
type: "figma",
@@ -16,12 +14,14 @@ export default {
argTypes: {
data: {
control: { type: "object" },
- defaultValue: fakeData,
},
},
-} as ComponentMeta;
+ args: {
+ data: fakeData,
+ },
+} as Meta;
-const Template: ComponentStory = (args) => {
+const Template: StoryFn = (args) => {
return
{type === "standard" &&
diff --git a/src/stories/Library/Lists/list-details/ListDetails.stories.tsx b/src/stories/Library/Lists/list-details/ListDetails.stories.tsx
index 882c92c79..4b96ba5a6 100644
--- a/src/stories/Library/Lists/list-details/ListDetails.stories.tsx
+++ b/src/stories/Library/Lists/list-details/ListDetails.stories.tsx
@@ -1,12 +1,11 @@
-import { withDesign } from "storybook-addon-designs";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
import { ListDetails } from "./ListDetails";
export default {
title: "Library / Lists / Details",
component: ListDetails,
- decorators: [withDesign],
+
argTypes: {},
parameters: {
design: {
@@ -14,9 +13,9 @@ export default {
url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=1385%3A8923",
},
},
-} as ComponentMeta;
+} as Meta;
-const Template: ComponentStory = (args) => (
+const Template: StoryFn = (args) => (
;
+} as Meta;
-const Template: ComponentStory = (props) => (
- = (props) => ;
+} as Meta;
-const Template: ComponentStory = (
- args: ListFindOnShelfProps
+const Template: StoryFn = (
+ args: ListFindOnShelfProps,
) => ;
+} as Meta;
-const Template: ComponentStory = (args) => (
+const Template: StoryFn = (args) => (
diff --git a/src/stories/Library/Lists/list-reservation/ListReservationsAndLoans.stories.tsx b/src/stories/Library/Lists/list-reservation/ListReservationsAndLoans.stories.tsx
index 5fabe14aa..6d128423a 100644
--- a/src/stories/Library/Lists/list-reservation/ListReservationsAndLoans.stories.tsx
+++ b/src/stories/Library/Lists/list-reservation/ListReservationsAndLoans.stories.tsx
@@ -1,11 +1,9 @@
-import { withDesign } from "storybook-addon-designs";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
import { ListReservationsAndLoans } from "./ListReservationsAndLoans";
export default {
title: "Library / Lists / ReservationAndLoans",
component: ListReservationsAndLoans,
- decorators: [withDesign],
argTypes: {},
parameters: {
design: {
@@ -13,9 +11,9 @@ export default {
url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=1181%3A5923",
},
},
-} as ComponentMeta;
+} as Meta;
-const Template: ComponentStory = (args) => (
+const Template: StoryFn = (args) => (
;
+} as Meta;
-const Template: ComponentStory = (args) => (
- = (args) => ;
+} as Meta;
-const Template: ComponentStory = (args) => (
+const Template: StoryFn = (args) => (
;
+} as Meta;
-const Template: ComponentStory = (args) => {
+const Template: StoryFn = (args) => {
return ;
+} as Meta;
-const Template: ComponentStory = (
- args: ModalFindOnShelfProps
+const Template: StoryFn = (
+ args: ModalFindOnShelfProps,
) => ;
+} as Meta;
-const Template: ComponentStory = (args) => (
+const Template: StoryFn = (args) => (
;
+} as Meta;
-const Template: ComponentStory = (args) => (
- = (args) => ;
+} as Meta;
-const Template: ComponentStory = (args) => (
- = (args) => ;
+} as Meta;
-const Template: ComponentStory = (args) => (
- = (args) => ;
+} as Meta;
-const Template: ComponentStory = (args) => (
- = (args) => ;
+} as Meta;
-const Template: ComponentStory = (args) => (
+const Template: StoryFn = (args) => (
;
+} as Meta;
-const Template: ComponentStory = (args) => {
+const Template: StoryFn = (args) => {
return ;
+} as Meta;
-const Template: ComponentStory = (args) => (
+const Template: StoryFn = (args) => (
;
+} as Meta;
-const Template: ComponentStory = (args) => (
- = (args) => ;
+} as Meta;
-const Template: ComponentStory = (
- args: AutosuggestMaterialProps
+const Template: StoryFn = (
+ args: AutosuggestMaterialProps,
) => (
diff --git a/src/stories/Library/autosuggest-text/AutosuggestText.stories.tsx b/src/stories/Library/autosuggest-text/AutosuggestText.stories.tsx
index 2bf433926..72d977e90 100644
--- a/src/stories/Library/autosuggest-text/AutosuggestText.stories.tsx
+++ b/src/stories/Library/autosuggest-text/AutosuggestText.stories.tsx
@@ -1,34 +1,34 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import { withDesign } from "storybook-addon-designs";
+import { Meta, StoryFn } from "@storybook/react";
import { AutosuggestText, AutosuggestTextProps } from "./AutosuggestText";
export default {
title: "Library / Autosuggest - Text",
component: AutosuggestText,
- decorators: [withDesign],
argTypes: {
textSuggestions: {
name: "Text suggestions",
- defaultValue: ["Item one (author)", "Item two (work)"],
- control: { type: "array" },
+ control: { type: "object" },
},
categoryText: {
name: "Category text",
- defaultValue: undefined,
control: { type: "text" },
},
},
+ args: {
+ textSuggestions: ["Item one (author)", "Item two (work)"],
+ categoryText: undefined,
+ },
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/ETOZIfmgGS1HUfio57SOh7/S%C3%B8gning?node-id=4709%3A24976",
},
},
-} as ComponentMeta;
+} as Meta;
-const Template: ComponentStory = (
- args: AutosuggestTextProps
+const Template: StoryFn = (
+ args: AutosuggestTextProps,
) => (
diff --git a/src/stories/Library/availability-label/AvailabilityLabel.stories.tsx b/src/stories/Library/availability-label/AvailabilityLabel.stories.tsx
index c59cb0371..20c72d789 100644
--- a/src/stories/Library/availability-label/AvailabilityLabel.stories.tsx
+++ b/src/stories/Library/availability-label/AvailabilityLabel.stories.tsx
@@ -1,12 +1,10 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import { withDesign } from "storybook-addon-designs";
+import { Meta, StoryFn } from "@storybook/react";
import AvailabilityLabel from "./AvailabilityLabel";
export default {
title: "Library / Availability Label",
component: AvailabilityLabel,
- decorators: [withDesign],
argTypes: {
manifestationType: {
name: "Manifestation Type",
@@ -33,9 +31,9 @@ export default {
},
},
parameters: {},
-} as ComponentMeta;
+} as Meta;
-const Template: ComponentStory = (args) => (
+const Template: StoryFn = (args) => (
= Omit<
};
export const withAvailabilityProps = (
- Component: React.FC
+ Component: React.FC,
): React.FC> => {
const defaultClasses = ["availability-label", "text-label"];
diff --git a/src/stories/Library/avatar/Avatar.stories.tsx b/src/stories/Library/avatar/Avatar.stories.tsx
index 2f4ed9ec2..2df97ecde 100644
--- a/src/stories/Library/avatar/Avatar.stories.tsx
+++ b/src/stories/Library/avatar/Avatar.stories.tsx
@@ -1,10 +1,8 @@
-import { withDesign } from "storybook-addon-designs";
import { StoryBaseType } from "../../../types/StorybookHelpers";
import { Avatar } from "./Avatar";
const StoryBase: StoryBaseType = {
title: "Library / Avatar",
- decorators: [withDesign],
argTypes: {},
parameters: {
design: {
diff --git a/src/stories/Library/banner/Banner.stories.tsx b/src/stories/Library/banner/Banner.stories.tsx
index 4f5ac8a6b..7e527025b 100644
--- a/src/stories/Library/banner/Banner.stories.tsx
+++ b/src/stories/Library/banner/Banner.stories.tsx
@@ -1,11 +1,10 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import { withDesign } from "storybook-addon-designs";
+import { Meta, StoryFn } from "@storybook/react";
+
import Banner from "./Banner";
export default {
title: "Library / Banner",
component: Banner,
- decorators: [withDesign],
parameters: {
design: {
type: "figma",
@@ -14,29 +13,31 @@ export default {
},
argTypes: {
imageSrc: {
- defaultValue: "images/campaign_cover.jpg",
control: { type: "text" },
},
title: {
name: "Title",
- defaultValue: "Hvad skal jeg