Merge branch 'develop' into feature/menu-update

Author: Sine Jespersen

src/stories/Blocks/footer/Footer.tsx

@@ -1,4 +1,4 @@
-import { Pagefold } from "../../Library/pagefold/Pagefold";
+import Pagefold from "../../Library/pagefold/Pagefold";
 import { Accordion } from "../../Library/accordion/Accordion";
 import { Dropdown } from "../../Library/dropdown/Dropdown";
 import { Logo } from "../../Library/logo/Logo";

src/stories/Blocks/header/Header.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from "react";
-
 import { Logo } from "../../Library/logo/Logo";
-import { Pagefold } from "../../Library/pagefold/Pagefold";
+import Pagefold from "../../Library/pagefold/Pagefold";
 
 export type HeaderProps = {
   signedIn: boolean;

src/stories/Library/Buttons/button/Button.tsx

@@ -1,12 +1,7 @@
 import clsx from "clsx";
 import { ButtonIcon } from "./ButtonIcon";
-import {
-  ButtonSize,
-  ButtonType,
-  ButtonVariant,
-  getSize,
-  getVariant,
-} from "./helper";
+import { getSize, getVariant } from "./helper";
+import { ButtonSize, ButtonType, ButtonVariant } from "./types";
 
 export type ButtonProps = {
   label: string;

src/stories/Library/Buttons/button/ButtonIcon.tsx

@@ -1,6 +1,6 @@
 import { ReactComponent as ArrowSmallRight } from "../../Arrows/icon-arrow-ui/icon-arrow-ui-small-right.svg";
 import { IconExternalLink } from "../../Icons/icon-external-link/IconExternalLink";
-import { ButtonType } from "./helper";
+import { ButtonType } from "./types";
 
 export interface ButtonIconProps {
   buttonType?: ButtonType;

src/stories/Library/Buttons/button/LinkButton.tsx

@@ -1,12 +1,7 @@
 import clsx from "clsx";
 import { ButtonIcon } from "./ButtonIcon";
-import {
-  ButtonSize,
-  ButtonType,
-  ButtonVariant,
-  getSize,
-  getVariant,
-} from "./helper";
+import { getSize, getVariant } from "./helper";
+import { ButtonSize, ButtonType, ButtonVariant } from "./types";
 
 export type LinkButtonProps = {
   href: string;

src/stories/Library/Buttons/button/helper.ts

@@ -1,8 +1,8 @@
-export type ButtonType = "none" | "default" | "external-link" | "search";
-export type ButtonVariant = "outline" | "filled";
-export type ButtonSize = "xsmall" | "small" | "medium" | "large" | "xlarge";
+import clsx from "clsx";
+import { PageFoldType } from "../../pagefold/types";
+import { ButtonSize, ButtonVariant } from "./types";
 
-export const getSize = (size: ButtonSize) => {
+export const getSize = (size: ButtonSize): string => {
   if (size === "xlarge") return "btn-xlarge";
   if (size === "large") return "btn-large";
   if (size === "medium") return "btn-medium";
@@ -11,8 +11,29 @@ export const getSize = (size: ButtonSize) => {
   return "";
 };
 
-export const getVariant = (variant: ButtonVariant) => {
+export const getVariant = (variant: ButtonVariant): string => {
   if (variant === "filled") return "btn-filled";
   if (variant === "outline") return "btn-outline";
   return "";
 };
+
+export const getPagefoldClasses = ({
+  isInheriting,
+  isAContainer,
+  size,
+  type,
+  className,
+}: PageFoldType): { wrapper: string; triangle: string } => {
+  return {
+    wrapper: clsx(
+      `pagefold-parent--${size}`,
+      { "internal-pagefold-parent": isAContainer },
+      className
+    ),
+    triangle: clsx(
+      `pagefold-triangle--${size}`,
+      { [`pagefold-triangle--${type}`]: type },
+      { "pagefold-inherit-parent": isInheriting }
+    ),
+  };
+};

src/stories/Library/Buttons/button/types.ts

@@ -0,0 +1,9 @@
+export type ButtonType = "none" | "default" | "external-link" | "search";
+export type ButtonVariant = "outline" | "filled";
+export type ButtonSize =
+  | "none"
+  | "xsmall"
+  | "small"
+  | "medium"
+  | "large"
+  | "xlarge";

src/stories/Library/Buttons/page-fold-button/PageFoldButton.tsx

@@ -0,0 +1,37 @@
+import { PageFoldType } from "../../pagefold/types";
+import { getPagefoldClasses } from "../button/helper";
+
+type PageFoldButtonProps = PageFoldType & {
+  children?: React.ReactNode;
+};
+
+const PageFoldButton = ({
+  isInheriting,
+  isAContainer,
+  size,
+  type,
+  children,
+  className,
+  status,
+}: PageFoldButtonProps) => {
+  const classes = getPagefoldClasses({
+    isInheriting,
+    isAContainer,
+    size,
+    type,
+    className,
+  });
+
+  return (
+    <button
+      type="button"
+      aria-pressed={status === "selected"}
+      className={classes.wrapper}
+    >
+      <div className={classes.triangle} />
+      {children}
+    </button>
+  );
+};
+
+export default PageFoldButton;

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: false,
 };
 
 export const Selected = Template.bind({});
 Selected.args = {
   manifestationType: "Ebog",
   availability: "Online",
   status: "selected",
+  button: false,
 };
 
 export const Unavailable = Template.bind({});
 Unavailable.args = {
   manifestationType: "Lydbog (cd-mp3)",
   availability: "Udlånt",
   status: "unavailable",
+  button: false,
 };
 
 export const WithoutManifestationType = Template.bind({});
@@ -58,4 +69,13 @@ WithoutManifestationType.args = {
   manifestationType: undefined,
   availability: "Udlånt",
   status: "unavailable",
+  button: false,
+};
+
+export const PageFoldButton = Template.bind({});
+PageFoldButton.args = {
+  manifestationType: "Bog",
+  availability: "Hjemme",
+  status: "available",
+  button: true,
 };

src/stories/Library/availability-label/AvailabilityLabel.tsx

@@ -1,21 +1,21 @@
 import { AvailabilityLabelPropsType } from "../../availability-label/types";
-import { Pagefold } from "../pagefold/Pagefold";
+import PageFoldButton from "../Buttons/page-fold-button/PageFoldButton";
+import Pagefold from "../pagefold/Pagefold";
 import { withAvailabilityProps } from "./abilityLabel.hoc";
 
 const AvailabilityLabel: React.FC<AvailabilityLabelPropsType> = ({
   manifestationType,
   availability,
   status,
   quantity,
+  button,
 }) => {
-  const AvailabilityPagefold = withAvailabilityProps(Pagefold);
-
-  return (
-    <AvailabilityPagefold status={status}>
+  const content = (
+    <>
       <img
         className={`availability-label__check ${status}`}
         src="icons/collection/Check.svg"
-        alt="check-icon"
+        alt=""
       />
       {manifestationType && (
         <>
@@ -39,8 +39,21 @@ const AvailabilityLabel: React.FC<AvailabilityLabelPropsType> = ({
           </p>
         </>
       )}
-    </AvailabilityPagefold>
+    </>
   );
+
+  const AvailabilityPagefold = withAvailabilityProps(Pagefold);
+  const AvailabilityPagefoldButton = withAvailabilityProps(PageFoldButton);
+
+  if (button) {
+    return (
+      <AvailabilityPagefoldButton status={status}>
+        {content}
+      </AvailabilityPagefoldButton>
+    );
+  }
+
+  return <AvailabilityPagefold status={status}>{content}</AvailabilityPagefold>;
 };
 
 export default AvailabilityLabel;