@yourdash/uikit 1.0.3 → 1.0.5

package/components/buttonCombo/buttonCombo.module.scss

@@ -0,0 +1,23 @@
+/*!
+ * Copyright ©2024 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+
+.component {
+  display: flex;
+  flex-direction: row;
+
+  > *:not(:first-child):not(:last-child) {
+    border-radius: 0 !important;
+  }
+
+  > *:first-child {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  > *:last-child {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+  }
+}

package/components/buttonCombo/buttonCombo.tsx

@@ -0,0 +1,14 @@
+/*
+ * Copyright ©2024 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+import React from "react";
+import styles from "./buttonCombo.module.scss";
+
+const ButtonCombo: React.FC<{ children: React.ReactNode[] }> = ({ children }) => {
+  return <div className={clippy(styles.component)}>{children}</div>;
+};
+
+export default ButtonCombo;

package/components/buttonLink/buttonLink.module.scss

@@ -8,7 +8,6 @@
 .component {
   font-family: var(#{$theme}#{$font}#{$family});
   text-align: center;
-  min-width: 6rem;
   padding: 0 var(#{$theme}#{$button}#{$padding}#{$horizontal});
   color: var(#{$theme}#{$button}#{$color});
   border: var(#{$theme}#{$button}#{$border});

package/components/buttonWithIcon/buttonWithIcon.module.scss

@@ -11,7 +11,6 @@
   justify-content: center;
   font-family: var(#{$theme}#{$font}#{$family});
   text-align: center;
-  min-width: 6rem;
   padding: 0 var(#{$theme}#{$button}#{$padding}#{$horizontal}) 0 0;
   color: var(#{$theme}#{$button}#{$color});
   border: var(#{$theme}#{$button}#{$border});
@@ -20,7 +19,6 @@
   transition: var(#{$theme}#{$button}#{$transition});
   height: var(#{$theme+$input+$height});
   width: max-content;
-  gap: var(#{$theme+$input+$padding+$horizontal});
   cursor: pointer;
 
   &:hover {

package/components/card/card.module.scss

@@ -66,6 +66,7 @@
 }
 
 .content {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: var(#{$theme+$gap});
@@ -74,5 +75,4 @@
   //padding-top: var(#{$theme+$gap});
   //padding-bottom: var(#{$theme+$gap});
   height: 100%;
-  width: 100%;
 }

package/components/image/image.tsx

@@ -1,83 +1,83 @@
-/*
- * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
- * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
- */
-
-import Icon from "../icon/icon.tsx";
-import { UKIcon } from "../icon/iconDictionary.ts";
-import styles from "./image.module.scss";
-import { FC, useEffect, useRef, useState } from "react";
-import clippy from "@yourdash/shared/web/helpers/clippy.ts";
-
-const Image: FC<{
-  src: string;
-  accessibleLabel: string;
-  containerClassName?: string;
-  className?: string;
-  disableLazyLoading?: boolean;
-  noRounding?: boolean;
-  width?: number;
-  height?: number;
-}> = (props) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const [src, setSrc] = useState<string>(props.src);
-  const [loaded, setLoaded] = useState<boolean>(false);
-  const [hasFailed, setHasFailed] = useState<boolean>(false);
-  const [backgroundSize, setBackgroundSize] = useState<number>(0);
-
-  useEffect(() => {
-    const rc = ref.current;
-
-    if (!rc) {
-      return;
-    }
-
-    setTimeout(() => {
-      const bounds = rc.getBoundingClientRect();
-
-      setBackgroundSize(bounds.height > bounds.width ? bounds.height : bounds.width);
-    }, 0);
-  }, [src]);
-
-  useEffect(() => {
-    setHasFailed(false);
-    setLoaded(false);
-  }, [src]);
-
-  useEffect(() => {
-    if (props.src !== src) {
-      setSrc(props.src);
-    }
-  }, [props.src]);
-
-  return (
-    <div
-      ref={ref}
-      className={clippy(styles.componentContainer, props.containerClassName, !loaded && styles.loading, hasFailed && styles.serverError)}
-      style={{
-        // @ts-ignore
-        "--background-size": backgroundSize + "px",
-      }}
-    >
-      {!hasFailed ? (
-        <img
-          className={clippy(styles.component, props.className, loaded && styles.loaded, props.noRounding && styles.noRounding)}
-          draggable={false}
-          width={props.width}
-          height={props.height}
-          onError={() => setHasFailed(true)}
-          loading={props.disableLazyLoading ? "eager" : "lazy"}
-          alt={props.accessibleLabel}
-          onLoad={(e) => {
-            setLoaded(e.currentTarget.complete);
-          }}
-          src={src}
-        />
-      ) : (
-        <Icon icon={UKIcon.ServerError} />
-      )}
-    </div>
-  );
-};
-
-export default Image;
+/*
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import Icon from "../icon/icon.tsx";
+import { UKIcon } from "../icon/iconDictionary.ts";
+import styles from "./image.module.scss";
+import { FC, useEffect, useRef, useState } from "react";
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+
+const Image: FC<{
+  src: string;
+  accessibleLabel: string;
+  containerClassName?: string;
+  className?: string;
+  disableLazyLoading?: boolean;
+  noRounding?: boolean;
+  width?: number;
+  height?: number;
+}> = (props) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [src, setSrc] = useState<string>(props.src);
+  const [loaded, setLoaded] = useState<boolean>(false);
+  const [hasFailed, setHasFailed] = useState<boolean>(false);
+  const [backgroundSize, setBackgroundSize] = useState<number>(0);
+
+  useEffect(() => {
+    const rc = ref.current;
+
+    if (!rc) {
+      return;
+    }
+
+    setTimeout(() => {
+      const bounds = rc.getBoundingClientRect();
+
+      setBackgroundSize(bounds.height > bounds.width ? bounds.height : bounds.width);
+    }, 0);
+  }, [src]);
+
+  useEffect(() => {
+    setHasFailed(false);
+    setLoaded(false);
+  }, [src]);
+
+  useEffect(() => {
+    if (props.src !== src) {
+      setSrc(props.src);
+    }
+  }, [props.src]);
+
+  return (
+    <div
+      ref={ref}
+      className={clippy(styles.componentContainer, props.containerClassName, !loaded && styles.loading, hasFailed && styles.serverError)}
+      style={{
+        // @ts-ignore
+        "--background-size": backgroundSize + "px",
+      }}
+    >
+      {!hasFailed ? (
+        <img
+          className={clippy(styles.component, props.className, loaded && styles.loaded, props.noRounding && styles.noRounding)}
+          draggable={false}
+          width={props.width}
+          height={props.height}
+          onError={() => setHasFailed(true)}
+          loading={props.disableLazyLoading ? "eager" : "lazy"}
+          alt={props.accessibleLabel}
+          onLoad={(e) => {
+            setLoaded(e.currentTarget.complete);
+          }}
+          src={src}
+        />
+      ) : (
+        <Icon icon={UKIcon.ServerError} />
+      )}
+    </div>
+  );
+};
+
+export default Image;

package/components/link/link.module.scss

@@ -30,3 +30,7 @@
     transition: var(#{$theme+$button+$active+$transition});
   }
 }
+
+.icon {
+
+}

package/components/link/link.tsx

@@ -1,21 +1,29 @@
-/*
- * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
- * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
- */
-
-import clippy from "@yourdash/shared/web/helpers/clippy.ts";
-import styles from "./link.module.scss";
-import { FC } from "react";
-
-const Link: FC<{ text: string; to: string; className?: string }> = (props) => {
-  return (
-    <a
-      href={props.to}
-      className={clippy(styles.component, props.className)}
-    >
-      {props.text}
-    </a>
-  );
-};
-
-export default Link;
+/*
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+import Icon from "../icon/icon.tsx";
+import { UKIcon } from "../icon/iconDictionary.ts";
+import styles from "./link.module.scss";
+import { FC } from "react";
+
+const Link: FC<{ text: string; to: string; className?: string; hideLinkIcon?: boolean }> = (props) => {
+  return (
+    <a
+      href={props.to}
+      className={clippy(styles.component, props.className)}
+    >
+      {props.text}
+      {!props.hideLinkIcon && (
+        <Icon
+          icon={UKIcon.Link}
+          className={styles.icon}
+        />
+      )}
+    </a>
+  );
+};
+
+export default Link;

package/components/progressBar/progressBar.tsx

@@ -1,21 +1,29 @@
-/*
- * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
- * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
- */
-
-import clippy from "@yourdash/shared/web/helpers/clippy.ts";
-import styles from "./progressBar.module.scss";
-import { FC } from "react";
-
-// TODO: rewrite this component to use the HTML progress bar
-const ProgressBar: FC<{ maxValue?: number; value: number; className?: string }> = ({ maxValue, value, className }) => {
-  return (
-    <progress
-      max={maxValue}
-      value={value}
-      className={className}
-    />
-  );
-};
-
-export default ProgressBar;
+/*
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+import styles from "./progressBar.module.scss";
+import { FC } from "react";
+
+// TODO: rewrite this component to use the HTML progress bar
+const ProgressBar: FC<{ maxValue?: number; value: number; className?: string; indeterminate?: boolean }> = ({
+  maxValue,
+  value,
+  className,
+  indeterminate,
+}) => {
+  return (
+    <>
+      <progress
+        max={maxValue}
+        value={value}
+        className={className}
+      />
+      {indeterminate && "This should be indeterminate"}
+    </>
+  );
+};
+
+export default ProgressBar;

package/components/redirect/redirect.tsx

@@ -1,17 +1,23 @@
-/*
- * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
- * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
- */
-
-import { FC } from "react";
-import { useNavigate } from "react-router";
-
-const Redirect: FC<{ to: string | null }> = (props) => {
-  const navigate = useNavigate();
-
-  if (props.to !== null) navigate(props.to);
-
-  return <>Redirecting to {props.to}</>;
-};
-
-export default Redirect;
+/*
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import { FC } from "react";
+import { useNavigate } from "react-router";
+import Card from "../card/card.tsx";
+import Text from "../text/text.tsx";
+
+const Redirect: FC<{ to: string | null }> = (props) => {
+  const navigate = useNavigate();
+
+  if (props.to !== null) navigate(props.to);
+
+  return (
+    <Card>
+      <Text text={`Redirecting to ${props.to}`} />
+    </Card>
+  );
+};
+
+export default Redirect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yourdash/uikit",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "license": "MIT",
   "type": "module",
   "engines": {