Modify AvailabilityLabel to support rendering as either a link or a…

… button. The `Pagefold` component now accepts 'status' and 'button' props. When 'button' is true, the component is rendered as a button with the 'status' prop indicating whether the button is selected or not. When 'compProps' is provided, it is applied to the wrapper div. This is only used in the `Header` If neither "button" nor "compProps" are provided, the component is rendered as an anchor element.
reload · Mar 22, 2023 · b20835c · b20835c
1 parent e20d16b
commit b20835c
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 18 deletions.
diff --git a/src/stories/Library/availability-label/AvailabilityLabel.stories.tsx b/src/stories/Library/availability-label/AvailabilityLabel.stories.tsx
@@ -11,17 +11,25 @@ export default {
     manifestationType: {
       name: "Manifestation Type",
       options: ["Bog", "Ebog", "Lydbog (net)", "Lydbog (cd-mp3)", undefined],
-      control: { disable: true },
+      control: "radio",
     },
     availability: {
       name: "Availability",
       options: ["Hjemme", "Online", "Udlånt"],
-      control: { disable: true },
+      control: "radio",
     },
     status: {
       name: "Status",
       options: ["available", "unavailable", "selected"],
-      control: { disable: true },
+      control: "radio",
+    },
+    quantity: {
+      name: "Quantity",
+      control: "number",
+    },
+    button: {
+      name: "Button",
+      control: "boolean",
     },
   },
   parameters: {},
@@ -36,20 +44,23 @@ Available.args = {
   manifestationType: "Bog",
   availability: "Hjemme",
   status: "available",
+  button: true,
 };
 
 export const Selected = Template.bind({});
 Selected.args = {
   manifestationType: "Ebog",
   availability: "Online",
   status: "selected",
+  button: true,
 };
 
 export const Unavailable = Template.bind({});
 Unavailable.args = {
   manifestationType: "Lydbog (cd-mp3)",
   availability: "Udlånt",
   status: "unavailable",
+  button: true,
 };
 
 export const WithoutManifestationType = Template.bind({});
@@ -58,4 +69,5 @@ WithoutManifestationType.args = {
   manifestationType: undefined,
   availability: "Udlånt",
   status: "unavailable",
+  button: true,
 };
diff --git a/src/stories/Library/availability-label/AvailabilityLabel.tsx b/src/stories/Library/availability-label/AvailabilityLabel.tsx
@@ -7,15 +7,16 @@ const AvailabilityLabel: React.FC<AvailabilityLabelPropsType> = ({
   availability,
   status,
   quantity,
+  button,
 }) => {
   const AvailabilityPagefold = withAvailabilityProps(Pagefold);
 
   return (
-    <AvailabilityPagefold status={status}>
+    <AvailabilityPagefold status={status} button={button}>
       <img
         className={`availability-label__check ${status}`}
         src="icons/collection/Check.svg"
-        alt="check-icon"
+        alt=""
       />
       {manifestationType && (
         <>

diff --git a/src/stories/Library/material-header/MaterialHeader.tsx b/src/stories/Library/material-header/MaterialHeader.tsx
@@ -11,26 +11,31 @@ const listOfAvailabilityLabels = [
     manifestationType: "Bog",
     availability: "Hjemme",
     status: "selected",
+    button: true,
   } as const,
   {
     manifestationType: "Bog",
     availability: "Hjemme",
     status: "available",
+    button: true,
   } as const,
   {
     manifestationType: "Bog",
     availability: "Hjemme",
     status: "available",
+    button: true,
   } as const,
   {
     manifestationType: "Bog",
     availability: "Hjemme",
     status: "available",
+    button: true,
   } as const,
   {
     manifestationType: "Bog",
     availability: "Hjemme",
     status: "available",
+    button: true,
   } as const,
 ].map((item, index) => <AvailabilityLabel {...item} key={generateId(index)} />);
 

diff --git a/src/stories/Library/pagefold/Pagefold.tsx b/src/stories/Library/pagefold/Pagefold.tsx
@@ -8,19 +8,21 @@ export type PagefoldProps = {
   children?: React.ReactNode;
   className?: string;
   compProps?: React.ComponentPropsWithoutRef<"div">;
+  status?: "selected" | "available" | "unavailable";
+  button?: boolean;
 };
 
-export const Pagefold: React.FC<PagefoldProps> = (props) => {
-  const {
-    isInheriting,
-    isAContainer,
-    size,
-    type,
-    children,
-    className,
-    compProps,
-  } = props;
-
+export const Pagefold: React.FC<PagefoldProps> = ({
+  isInheriting,
+  isAContainer,
+  size,
+  type,
+  children,
+  className,
+  compProps,
+  status,
+  button,
+}) => {
   const baseClass = `pagefold-triangle--${size}`;
 
   const classes = {
@@ -36,10 +38,30 @@ export const Pagefold: React.FC<PagefoldProps> = (props) => {
     ),
   };
 
-  return (
+  if (button) {
+    return (
+      <button
+        type="button"
+        aria-pressed={status === "selected"}
+        className={classes.wrapper}
+      >
+        <div className={classes.triangle} />
+        {children}
+      </button>
+    );
+  }
+
+  if (compProps) {
     <div className={classes.wrapper} {...compProps}>
       <div className={classes.triangle} />
       {children}
-    </div>
+    </div>;
+  }
+
+  return (
+    <a className={classes.wrapper}>
+      <div className={classes.triangle} />
+      {children}
+    </a>
   );
 };
diff --git a/src/stories/availability-label/types.tsx b/src/stories/availability-label/types.tsx
@@ -3,4 +3,5 @@ export type AvailabilityLabelPropsType = {
   availability: "Hjemme" | "Online" | "Udlånt";
   status: "available" | "unavailable" | "selected";
   quantity?: number;
+  button?: boolean;
 };