@ndla/ui 56.0.121-alpha.0 → 56.0.122-alpha.0

package/es/AudioPlayer/Controls.js

@@ -1,332 +0,0 @@
-/**
- * Copyright (c) 2021-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { createListCollection } from "@ark-ui/react";
-import { Replay15Line, Forward15Line, PlayFill, PauseLine, VolumeUpFill, CheckLine } from "@ndla/icons";
-import { Button, FieldRoot, IconButton, PopoverContent, PopoverRoot, PopoverTrigger, SelectContent, SelectControl, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectRoot, SelectTrigger, SliderControl, SliderHiddenInput, SliderLabel, SliderRange, SliderRoot, SliderThumb, SliderTrack, Text } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ControlsWrapper = styled("div", {
-  base: {
-    borderBlockStart: "1px solid",
-    borderColor: "stroke.default",
-    borderBottomRadius: "xsmall",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    background: "background.default",
-    gap: "xsmall",
-    paddingBlock: "xsmall",
-    paddingInline: "medium",
-    tabletWideDown: {
-      display: "grid",
-      paddingBlock: "xsmall",
-      paddingInline: "xsmall",
-      gridTemplateColumns: "1fr repeat(5, auto) 1fr",
-      gridTemplateAreas: `
-  "track  track track     track track     track   track"
-  ".      speed backwards play  forwards  volume  ."
-`
-    },
-    mobileWideDown: {
-      columnGap: "3xsmall"
-    }
-  }
-});
-const PlayButton = styled(IconButton, {
-  base: {
-    gridArea: "play"
-  }
-});
-const Forward15SecButton = styled(IconButton, {
-  base: {
-    gridArea: "forwards"
-  }
-});
-const Back15SecButton = styled(IconButton, {
-  base: {
-    gridArea: "backwards"
-  }
-});
-const ProgressWrapper = styled("div", {
-  base: {
-    flex: "1",
-    display: "flex",
-    alignItems: "center",
-    gap: "xxsmall",
-    gridArea: "track",
-    paddingBlock: "xsmall",
-    mobileDown: {
-      paddingInline: "xsmall"
-    }
-  }
-});
-const StyledText = styled(Text, {
-  base: {
-    minWidth: "xxlarge",
-    flexShrink: "0",
-    textAlign: "center"
-  }
-});
-const VolumeButton = styled(IconButton, {
-  base: {
-    gridArea: "volume"
-  }
-});
-const SpeedButton = styled(Button, {
-  base: {
-    paddingBlock: "auto",
-    paddingInline: "auto",
-    maxWidth: "xxlarge",
-    maxHeight: "xxlarge",
-    minWidth: "xxlarge",
-    minHeight: "xxlarge",
-    "& span": {
-      flex: "1"
-    }
-  }
-});
-const StyledSelectRoot = styled(SelectRoot, {
-  base: {
-    gridArea: "speed"
-  }
-});
-const StyledSliderControl = styled(SliderControl, {
-  base: {
-    height: "surface.3xsmall",
-    minWidth: "small"
-  }
-});
-const StyledPopoverContent = styled(PopoverContent, {
-  base: {
-    paddingInline: "small"
-  }
-});
-const formatTime = seconds => {
-  const minutes = Math.floor(seconds / 60);
-  const currentSeconds = seconds % 60;
-  const formattedSeconds = currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds;
-  return `${minutes}:${formattedSeconds}`;
-};
-const speedValues = createListCollection({
-  items: ["0.5", "0.75", "1", "1.25", "1.5", "1.75", "2"]
-});
-const Controls = _ref => {
-  let {
-    src,
-    title
-  } = _ref;
-  const {
-    t
-  } = useTranslation();
-  const [speedValue, setSpeedValue] = useState(1);
-  const [volumeValue, setVolumeValue] = useState(100);
-  const [currentTime, setCurrentTime] = useState(0);
-  const [remainingTime, setRemainingTime] = useState(0);
-  const [playing, setPlaying] = useState(false);
-  const audioRef = useRef(null);
-  useEffect(() => {
-    if (audioRef.current) {
-      audioRef.current.playbackRate = speedValue;
-    }
-  }, [speedValue]);
-  useEffect(() => {
-    if (audioRef.current) {
-      const audioElement = audioRef.current;
-      const handleTimeUpdate = () => {
-        const {
-          currentTime,
-          duration
-        } = audioElement;
-        setCurrentTime(Math.round(currentTime));
-        setRemainingTime(Math.round(duration - currentTime));
-      };
-      const handleLoadedMetaData = () => {
-        const {
-          currentTime,
-          duration
-        } = audioElement;
-        setCurrentTime(Math.round(currentTime));
-        setRemainingTime(Math.round(duration - currentTime));
-      };
-      const handleTimeEnded = () => {
-        setPlaying(false);
-      };
-      audioElement.addEventListener("timeupdate", handleTimeUpdate);
-      audioElement.addEventListener("loadedmetadata", handleLoadedMetaData);
-      audioElement.addEventListener("ended", handleTimeEnded);
-      return () => {
-        audioElement.removeEventListener("timeupdate", handleTimeUpdate);
-        audioElement.removeEventListener("loadedmetadata", handleLoadedMetaData);
-        audioElement.removeEventListener("ended", handleTimeEnded);
-      };
-    }
-  }, []);
-  const togglePlay = () => {
-    if (audioRef.current) {
-      const audioElement = audioRef.current;
-      if (!playing) {
-        audioElement.play();
-      } else {
-        audioElement.pause();
-      }
-      setPlaying(!playing);
-    }
-  };
-  const onSeekSeconds = seconds => {
-    if (audioRef.current) {
-      audioRef.current.currentTime += seconds;
-    }
-  };
-  const handleSliderChange = details => {
-    const newValue = details.value[0];
-    if (audioRef.current && newValue != null && !isNaN(newValue)) {
-      audioRef.current.currentTime = details.value[0];
-    }
-  };
-  const handleVolumeSliderChange = details => {
-    if (audioRef.current) {
-      audioRef.current.volume = details.value[0] / 100;
-      setVolumeValue(details.value[0]);
-    }
-  };
-  return /*#__PURE__*/_jsxs("div", {
-    children: [/*#__PURE__*/_jsx("audio", {
-      ref: audioRef,
-      src: src,
-      title: title,
-      preload: "metadata"
-    }), /*#__PURE__*/_jsxs(ControlsWrapper, {
-      children: [/*#__PURE__*/_jsx(Back15SecButton, {
-        variant: "tertiary",
-        title: t("audio.controls.rewind15sec"),
-        "aria-label": t("audio.controls.rewind15sec"),
-        onClick: () => onSeekSeconds(-15),
-        children: /*#__PURE__*/_jsx(Replay15Line, {})
-      }), /*#__PURE__*/_jsx(PlayButton, {
-        "aria-label": t(playing ? t("audio.pause") : t("audio.play")),
-        variant: "primary",
-        onClick: togglePlay,
-        children: playing ? /*#__PURE__*/_jsx(PauseLine, {}) : /*#__PURE__*/_jsx(PlayFill, {})
-      }), /*#__PURE__*/_jsx(Forward15SecButton, {
-        variant: "tertiary",
-        title: t("audio.controls.forward15sec"),
-        "aria-label": t("audio.controls.forward15sec"),
-        onClick: () => onSeekSeconds(15),
-        children: /*#__PURE__*/_jsx(Forward15Line, {})
-      }), /*#__PURE__*/_jsxs(ProgressWrapper, {
-        children: [/*#__PURE__*/_jsx(StyledText, {
-          textStyle: "label.medium",
-          asChild: true,
-          consumeCss: true,
-          children: /*#__PURE__*/_jsx("div", {
-            children: formatTime(currentTime)
-          })
-        }), /*#__PURE__*/_jsxs(SliderRoot, {
-          value: [audioRef.current?.currentTime ?? 0],
-          defaultValue: [0],
-          step: 1,
-          max: Math.round(audioRef.current?.duration ?? 0),
-          onValueChange: handleSliderChange,
-          getAriaValueText: value => t("audio.valueText", {
-            start: formatTime(Math.round(value.value)),
-            end: formatTime(Math.round(audioRef.current?.duration ?? 0))
-          }),
-          children: [/*#__PURE__*/_jsx(SliderLabel, {
-            srOnly: true,
-            children: t("audio.progressBar")
-          }), /*#__PURE__*/_jsxs(SliderControl, {
-            children: [/*#__PURE__*/_jsx(SliderTrack, {
-              children: /*#__PURE__*/_jsx(SliderRange, {})
-            }), /*#__PURE__*/_jsx(SliderThumb, {
-              index: 0,
-              children: /*#__PURE__*/_jsx(SliderHiddenInput, {})
-            })]
-          })]
-        }), /*#__PURE__*/_jsx(StyledText, {
-          textStyle: "label.medium",
-          asChild: true,
-          consumeCss: true,
-          children: /*#__PURE__*/_jsxs("div", {
-            children: ["-", formatTime(remainingTime)]
-          })
-        })]
-      }), /*#__PURE__*/_jsx(FieldRoot, {
-        children: /*#__PURE__*/_jsxs(StyledSelectRoot, {
-          collection: speedValues,
-          value: [speedValue.toString()],
-          onValueChange: details => setSpeedValue(parseFloat(details.value[0])),
-          positioning: {
-            placement: "top"
-          },
-          children: [/*#__PURE__*/_jsx(SelectLabel, {
-            srOnly: true,
-            children: t("audio.controls.selectSpeed")
-          }), /*#__PURE__*/_jsx(SelectControl, {
-            children: /*#__PURE__*/_jsx(SelectTrigger, {
-              asChild: true,
-              children: /*#__PURE__*/_jsx(SpeedButton, {
-                variant: "tertiary",
-                title: t("audio.controls.selectSpeed"),
-                "aria-label": t("audio.controls.selectSpeed"),
-                children: /*#__PURE__*/_jsx("span", {
-                  children: `${speedValue}x`
-                })
-              })
-            })
-          }), /*#__PURE__*/_jsx(SelectContent, {
-            children: speedValues.items.map(speed => /*#__PURE__*/_jsxs(SelectItem, {
-              item: speed,
-              children: [/*#__PURE__*/_jsxs(SelectItemText, {
-                children: [speed, "x"]
-              }), /*#__PURE__*/_jsx(SelectItemIndicator, {
-                children: /*#__PURE__*/_jsx(CheckLine, {})
-              })]
-            }, speed))
-          })]
-        })
-      }), /*#__PURE__*/_jsxs(PopoverRoot, {
-        positioning: {
-          placement: "top"
-        },
-        children: [/*#__PURE__*/_jsx(PopoverTrigger, {
-          asChild: true,
-          children: /*#__PURE__*/_jsx(VolumeButton, {
-            variant: "tertiary",
-            "aria-label": t("audio.controls.adjustVolume"),
-            children: /*#__PURE__*/_jsx(VolumeUpFill, {})
-          })
-        }), /*#__PURE__*/_jsx(StyledPopoverContent, {
-          children: /*#__PURE__*/_jsxs(SliderRoot, {
-            orientation: "vertical",
-            value: [volumeValue],
-            min: 0,
-            max: 100,
-            defaultValue: [100],
-            step: 1,
-            onValueChange: handleVolumeSliderChange,
-            children: [/*#__PURE__*/_jsx(SliderLabel, {
-              srOnly: true,
-              children: t("audio.controls.adjustVolume")
-            }), /*#__PURE__*/_jsxs(StyledSliderControl, {
-              children: [/*#__PURE__*/_jsx(SliderTrack, {
-                children: /*#__PURE__*/_jsx(SliderRange, {})
-              }), /*#__PURE__*/_jsx(SliderThumb, {
-                index: 0,
-                children: /*#__PURE__*/_jsx(SliderHiddenInput, {})
-              })]
-            })]
-          })
-        })]
-      })]
-    })]
-  });
-};
-export default Controls;

package/es/AudioPlayer/SpeechControl.js

@@ -1,56 +0,0 @@
-/**
- * Copyright (c) 2021-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { useRef } from "react";
-import { useTranslation } from "react-i18next";
-import { VolumeUpFill } from "@ndla/icons";
-import { TooltipRoot, TooltipTrigger, TooltipContent, IconButton } from "@ndla/primitives";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SpeechControl = _ref => {
-  let {
-    src,
-    title,
-    type = "audio"
-  } = _ref;
-  const {
-    t
-  } = useTranslation();
-  const audioRef = useRef(null);
-  const togglePlay = () => {
-    if (audioRef.current) {
-      const audioElement = audioRef.current;
-      if (audioElement.paused) {
-        audioElement.play();
-      } else {
-        audioElement.pause();
-      }
-    }
-  };
-  return /*#__PURE__*/_jsxs("div", {
-    "data-embed-type": "speech",
-    children: [/*#__PURE__*/_jsx("audio", {
-      ref: audioRef,
-      src: src,
-      title: title,
-      preload: "metadata"
-    }), /*#__PURE__*/_jsxs(TooltipRoot, {
-      children: [/*#__PURE__*/_jsx(TooltipTrigger, {
-        asChild: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          variant: "tertiary",
-          "aria-label": t(`${type}.play`),
-          onClick: togglePlay,
-          children: /*#__PURE__*/_jsx(VolumeUpFill, {})
-        })
-      }), /*#__PURE__*/_jsx(TooltipContent, {
-        children: t(`${type}.play`)
-      })]
-    })]
-  });
-};
-export default SpeechControl;

package/es/AudioPlayer/index.js

@@ -1,10 +0,0 @@
-/**
- * Copyright (c) 2021-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import AudioPlayer from "./AudioPlayer";
-export default AudioPlayer;

package/es/Breadcrumb/Breadcrumb.js

@@ -1,60 +0,0 @@
-/**
- * Copyright (c) 2016-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { useTranslation } from "react-i18next";
-import { styled } from "@ndla/styled-system/jsx";
-import BreadcrumbItem from "./BreadcrumbItem";
-import { jsx as _jsx } from "react/jsx-runtime";
-const StyledList = styled("ol", {
-  base: {
-    display: "flex",
-    flexWrap: "wrap",
-    alignItems: "center",
-    listStyle: "none",
-    gap: "xxsmall",
-    mobileDown: {
-      alignItems: "flex-start",
-      justifyContent: "center",
-      flexDirection: "column"
-    }
-  }
-});
-const Breadcrumb = _ref => {
-  let {
-    items,
-    renderItem,
-    renderSeparator,
-    collapseFirst,
-    collapseLast = true
-  } = _ref;
-  const {
-    t
-  } = useTranslation();
-  return /*#__PURE__*/_jsx("nav", {
-    "aria-label": t("breadcrumb.breadcrumb"),
-    children: /*#__PURE__*/_jsx(StyledList, {
-      children: items.map((item, index) => /*#__PURE__*/_jsx(BreadcrumbItem, {
-        renderItem: renderItem,
-        renderSeparator: renderSeparator,
-        ref: element => {
-          if (element === null || !collapseFirst && index === 0 || !collapseLast && index === items.length - 1) {
-            if (element) {
-              element.setMaxWidth("none");
-            }
-          }
-        },
-        totalCount: items.length,
-        item: {
-          ...item,
-          index
-        }
-      }, typeof item.to === "string" ? item.to : item.to.pathname))
-    })
-  });
-};
-export default Breadcrumb;

package/es/Breadcrumb/BreadcrumbItem.js

@@ -1,62 +0,0 @@
-/**
- * Copyright (c) 2016-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { useRef, useImperativeHandle, forwardRef } from "react";
-import { ArrowRightShortLine } from "@ndla/icons";
-import { SafeLink } from "@ndla/safelink";
-import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledListItem = styled("li", {
-  base: {
-    display: "flex",
-    color: "inherit",
-    gap: "3xsmall",
-    alignItems: "flex-end",
-    tabletDown: {
-      display: "block"
-    },
-    "& a": {
-      _visited: {
-        color: "inherit"
-      }
-    }
-  }
-});
-const BreadcrumbItem = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    renderItem,
-    renderSeparator,
-    item,
-    totalCount
-  } = _ref;
-  const liRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    setMaxWidth: maxWidth => {
-      liRef.current.children[0].style.maxWidth = maxWidth;
-    }
-  }));
-  const {
-    to,
-    name,
-    index
-  } = item;
-  const isLast = index === totalCount - 1;
-  return /*#__PURE__*/_jsxs(StyledListItem, {
-    ref: liRef,
-    "aria-current": isLast ? "page" : undefined,
-    children: [renderItem ? renderItem(item, totalCount) : isLast ? /*#__PURE__*/_jsx("span", {
-      children: name
-    }) : /*#__PURE__*/_jsx(SafeLink, {
-      to: to,
-      children: /*#__PURE__*/_jsx("span", {
-        children: name
-      })
-    }), renderSeparator ? renderSeparator(item, totalCount) : !isLast && /*#__PURE__*/_jsx(ArrowRightShortLine, {})]
-  });
-});
-export default BreadcrumbItem;

package/es/Breadcrumb/HomeBreadcrumb.js

@@ -1,77 +0,0 @@
-/**
- * Copyright (c) 2022-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { ArrowRightShortLine, HomeLine } from "@ndla/icons";
-import { SafeLink } from "@ndla/safelink";
-import { styled } from "@ndla/styled-system/jsx";
-import Breadcrumb from "./Breadcrumb";
-import { jsx as _jsx } from "react/jsx-runtime";
-const StyledSafeLink = styled(SafeLink, {
-  base: {
-    color: "inherit",
-    textDecoration: "underline",
-    _hover: {
-      textDecoration: "none"
-    },
-    _focusVisible: {
-      textDecoration: "none"
-    }
-  }
-});
-const StyledArrowRight = styled(ArrowRightShortLine, {
-  base: {
-    tabletDown: {
-      display: "none"
-    }
-  }
-});
-const IconSafeLink = styled(SafeLink, {
-  base: {
-    color: "inherit"
-  }
-});
-const HomeBreadcrumb = _ref => {
-  let {
-    items
-  } = _ref;
-  const renderItem = (item, totalCount) => {
-    if (item.index === totalCount - 1) {
-      return /*#__PURE__*/_jsx("span", {
-        children: item.name
-      });
-    }
-    if (item.index === 0 && typeof item.name === "string") {
-      return /*#__PURE__*/_jsx(IconSafeLink, {
-        "aria-label": item.name,
-        to: item.to,
-        children: /*#__PURE__*/_jsx(HomeLine, {
-          title: item.name
-        })
-      });
-    }
-    return /*#__PURE__*/_jsx(StyledSafeLink, {
-      to: item.to,
-      children: item.name
-    });
-  };
-  const renderSeparator = (item, totalCount) => {
-    if (item.index === totalCount - 1) {
-      return null;
-    }
-    if (item.index === 0) {
-      return /*#__PURE__*/_jsx(StyledArrowRight, {});
-    }
-    return /*#__PURE__*/_jsx(ArrowRightShortLine, {});
-  };
-  return /*#__PURE__*/_jsx(Breadcrumb, {
-    items: items,
-    renderItem: renderItem,
-    renderSeparator: renderSeparator
-  });
-};
-export default HomeBreadcrumb;

package/es/Breadcrumb/index.js

@@ -1,11 +0,0 @@
-/**
- * Copyright (c) 2016-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import Breadcrumb from "./Breadcrumb";
-export { default as HomeBreadcrumb } from "./HomeBreadcrumb";
-export default Breadcrumb;