uikit-react-public 0.14.21 → 0.21.8

package/lib/components/Button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -1,107 +1,55 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Button > Snapshot: 'as' prop with 'a' 1`] = `
-<a
+exports[`Button > maps legacy destructive prop to destructive variants 1`] = `
+<button
   aria-disabled="false"
-  class="ucl-uikit-button css-127zvhv"
+  class="ucl-uikit-button css-yunmm0"
   data-testid="ucl-uikit-button"
-  href="https://ucl.ac.uk"
 >
-  UCL's website
-</a>
+  Delete
+</button>
 `;
 
-exports[`Button > Snapshot: with icon & iconPosition right 1`] = `
+exports[`Button > maps legacy size default to medium 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-127zvhv"
+  class="ucl-uikit-button css-oqr4zz"
   data-testid="ucl-uikit-button"
 >
-  Download
-  <svg
-    class="ucl-uikit-icon css-148hpxb"
-    data-testid="ucl-uikit-icon"
-    fill="none"
-    height="24"
-    stroke="currentColor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    stroke-width="2"
-    viewBox="0 0 24 24"
-    width="24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <polyline
-      points="8 17 12 21 16 17"
-    />
-    <line
-      x1="12"
-      x2="12"
-      y1="12"
-      y2="21"
-    />
-    <path
-      d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"
-    />
-  </svg>
+  Legacy default size
 </button>
 `;
 
-exports[`Button > Snapshot: with icon 1`] = `
-<button
+exports[`Button > snapshot: 'as' prop with 'a' 1`] = `
+<a
   aria-disabled="false"
-  class="ucl-uikit-button css-127zvhv"
+  class="ucl-uikit-button css-oqr4zz"
   data-testid="ucl-uikit-button"
+  href="https://ucl.ac.uk"
 >
-  <svg
-    class="ucl-uikit-icon css-148hpxb"
-    data-testid="ucl-uikit-icon"
-    fill="none"
-    height="24"
-    stroke="currentColor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    stroke-width="2"
-    viewBox="0 0 24 24"
-    width="24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
-    />
-    <polyline
-      points="17 8 12 3 7 8"
-    />
-    <line
-      x1="12"
-      x2="12"
-      y1="3"
-      y2="15"
-    />
-  </svg>
-  Upload
-</button>
+  UCL's website
+</a>
 `;
 
 exports[`Button > snapshot: loading 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-vud9v8"
+  class="ucl-uikit-button css-1sgvpd0"
   data-testid="ucl-uikit-button"
   disabled=""
 >
   <svg
-    class="ucl-uikit-spinner"
+    class="ucl-uikit-spinner css-1izyex6"
     data-testid="ucl-uikit-spinner"
     height="24"
     viewBox="0 0 50 50"
     width="24"
   >
     <g
-      class="css-1tl81jg"
+      class="css-ypv7tf"
     >
       <circle
-        class="css-lyzf49"
+        class="css-1w5ipzg"
         cx="25"
         cy="25"
         fill="none"
@@ -117,7 +65,7 @@ exports[`Button > snapshot: loading 1`] = `
 exports[`Button > snapshot: no props 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-s2ft6g"
+  class="ucl-uikit-button css-12at99t"
   data-testid="ucl-uikit-button"
 />
 `;
@@ -125,7 +73,7 @@ exports[`Button > snapshot: no props 1`] = `
 exports[`Button > snapshot: testId prop 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-s2ft6g"
+  class="ucl-uikit-button css-12at99t"
   data-testid="test123"
 />
 `;
@@ -133,7 +81,66 @@ exports[`Button > snapshot: testId prop 1`] = `
 exports[`Button > snapshot: variant prop 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-19e75j0"
+  class="ucl-uikit-button css-9dplwk"
   data-testid="ucl-uikit-button"
 />
 `;
+
+exports[`Button > snapshot: with icon 1`] = `
+<button
+  aria-disabled="false"
+  class="ucl-uikit-button css-oqr4zz"
+  data-testid="ucl-uikit-button"
+>
+  <svg
+    class="ucl-uikit-icon css-148hpxb"
+    data-testid="ucl-uikit-icon"
+    fill="none"
+    focusable="false"
+    height="24"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4m14-7-5-5-5 5m5-5v12"
+    />
+  </svg>
+  Upload
+</button>
+`;
+
+exports[`Button > snapshot: with icon and iconPosition right 1`] = `
+<button
+  aria-disabled="false"
+  class="ucl-uikit-button css-oqr4zz"
+  data-testid="ucl-uikit-button"
+>
+  Download
+  <svg
+    class="ucl-uikit-icon css-148hpxb"
+    data-testid="ucl-uikit-icon"
+    fill="none"
+    focusable="false"
+    height="24"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="m8 17 4 4 4-4m-4-5v9"
+    />
+    <path
+      d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"
+    />
+  </svg>
+</button>
+`;

package/lib/components/Button/style/buttonAccentStyle.ts

@@ -0,0 +1,53 @@
+import { css, cx } from '@emotion/css';
+import { ThemeType } from '../../../theme';
+import { ButtonBaseProps } from '../Button';
+
+const buttonAccentStyle = (
+  theme: ThemeType,
+  selected: ButtonBaseProps['selected'],
+  disabled: ButtonBaseProps['disabled'],
+  loading: ButtonBaseProps['loading']
+) => {
+  const {
+    colour: { fill },
+  } = theme;
+
+  const bgColour = fill.brand;
+  const bgHoverColour = fill.brandHover;
+  const bgActiveColour = fill.brandPressed;
+
+  const baseStyle = css`
+    background-color: ${bgColour};
+    color: ${theme.colour.text.brandInverse};
+  `;
+
+  const selectedStyle = css`
+    background-color: ${bgHoverColour};
+  `;
+
+  const interactiveStyle = css`
+    cursor: pointer;
+
+    &:hover {
+      background-color: ${bgHoverColour};
+    }
+
+    &:active {
+      background-color: ${bgActiveColour};
+    }
+  `;
+
+  const disabledStyle = css`
+    background-color: ${theme.colour.fill.disabled};
+    color: ${theme.colour.text.onBgFillDisabled};
+  `;
+
+  return cx(
+    baseStyle,
+    selected && selectedStyle,
+    !disabled && !loading && interactiveStyle,
+    disabled && disabledStyle
+  );
+};
+
+export default buttonAccentStyle;

package/lib/components/Button/style/buttonPrimaryDestructiveStyle.ts

@@ -0,0 +1,55 @@
+import { css, cx } from '@emotion/css';
+import { ThemeType } from '../../../theme';
+import { ButtonBaseProps } from '../Button';
+
+const buttonPrimaryDestructiveStyle = (
+  theme: ThemeType,
+  selected: ButtonBaseProps['selected'],
+  disabled: ButtonBaseProps['disabled'],
+  loading: ButtonBaseProps['loading']
+) => {
+  const {
+    colour: { fill },
+  } = theme;
+
+  const bgColour = fill.critical;
+  const bgHoverColour = fill.criticalHover;
+  const bgActiveColour = fill.criticalPressed;
+  const bgSelectedColour = fill.criticalHover;
+
+  const baseStyle = css`
+    background-color: ${bgColour};
+    color: ${theme.colour.text.brandInverse};
+  `;
+
+  const selectedStyle = css`
+    background-color: ${bgSelectedColour};
+  `;
+
+  const interactiveStyle = css`
+    cursor: pointer;
+
+    &:hover {
+      background-color: ${bgHoverColour};
+    }
+
+    &:active {
+      background-color: ${bgActiveColour};
+    }
+  `;
+
+  const disabledStyle = css`
+    border-color: ${theme.colour.fill.disabled};
+    background-color: ${theme.colour.fill.disabled};
+    color: ${theme.colour.text.onBgFillDisabled};
+  `;
+
+  return cx(
+    baseStyle,
+    selected && selectedStyle,
+    !disabled && !loading && interactiveStyle,
+    disabled && disabledStyle
+  );
+};
+
+export default buttonPrimaryDestructiveStyle;

package/lib/components/Button/style/buttonPrimaryStyle.ts

@@ -0,0 +1,53 @@
+import { css, cx } from '@emotion/css';
+import { ThemeType } from '../../../theme';
+import { ButtonBaseProps } from '../Button';
+
+const buttonPrimaryStyle = (
+  theme: ThemeType,
+  selected: ButtonBaseProps['selected'],
+  disabled: ButtonBaseProps['disabled'],
+  loading: ButtonBaseProps['loading']
+) => {
+  const {
+    colour: { fill },
+  } = theme;
+
+  const bgColour = fill.brandPrimary;
+  const bgHoverColour = fill.brandHover;
+  const bgActiveColour = fill.brandPressed;
+
+  const baseStyle = css`
+    background-color: ${bgColour};
+    color: ${theme.colour.text.brandInverse};
+  `;
+
+  const selectedStyle = css`
+    background-color: ${bgHoverColour};
+  `;
+
+  const interactiveStyle = css`
+    cursor: pointer;
+
+    &:hover {
+      background-color: ${bgHoverColour};
+    }
+
+    &:active {
+      background-color: ${bgActiveColour};
+    }
+  `;
+
+  const disabledStyle = css`
+    background-color: ${theme.colour.fill.disabled};
+    color: ${theme.colour.text.onBgFillDisabled};
+  `;
+
+  return cx(
+    baseStyle,
+    selected && selectedStyle,
+    !disabled && !loading && interactiveStyle,
+    disabled && disabledStyle
+  );
+};
+
+export default buttonPrimaryStyle;

package/lib/components/Button/style/buttonPrimarySubtleStyle.ts

@@ -0,0 +1,64 @@
+import { css, cx } from '@emotion/css';
+import { ThemeType } from '../../../theme';
+import { ButtonBaseProps } from '../Button';
+
+const buttonPrimarySubtleStyle = (
+  theme: ThemeType,
+  selected: ButtonBaseProps['selected'],
+  disabled: ButtonBaseProps['disabled'],
+  loading: ButtonBaseProps['loading'],
+  paddingPx: number
+) => {
+  const {
+    colour: { border, fill, text },
+  } = theme;
+
+  const bgColour = fill.inverse;
+  const borderColour = border.subtle;
+  const bgHoverColour = fill.hover;
+  const bgActiveColour = fill.hover;
+  const selectedFillColour = fill.brandSubtleHover;
+  const selectedBorderColour = border.brand;
+  const selectedTextColour = text.brandHover;
+
+  const adjustedPaddingPx = paddingPx + 1;
+
+  const baseStyle = css`
+    background-color: ${bgColour};
+    border: 1px solid ${borderColour};
+    color: ${theme.colour.text.default};
+    padding: 0 ${adjustedPaddingPx}px;
+  `;
+
+  const selectedStyle = css`
+    background-color: ${selectedFillColour};
+    border-color: ${selectedBorderColour};
+    color: ${selectedTextColour};
+  `;
+
+  const interactiveStyle = css`
+    cursor: pointer;
+
+    &:hover {
+      background-color: ${bgHoverColour};
+    }
+
+    &:active {
+      background-color: ${bgActiveColour};
+    }
+  `;
+
+  const disabledStyle = css`
+    border-color: ${border.disabled};
+    color: ${text.disabled};
+  `;
+
+  return cx(
+    baseStyle,
+    selected && selectedStyle,
+    !selected && !disabled && !loading && interactiveStyle,
+    disabled && disabledStyle
+  );
+};
+
+export default buttonPrimarySubtleStyle;

package/lib/components/Button/style/buttonPrimaryWarningStyle.ts

@@ -0,0 +1,56 @@
+import { css, cx } from '@emotion/css';
+import { ThemeType } from '../../../theme';
+import { ButtonBaseProps } from '../Button';
+
+const buttonPrimaryWarningStyle = (
+  theme: ThemeType,
+  selected: ButtonBaseProps['selected'],
+  disabled: ButtonBaseProps['disabled'],
+  loading: ButtonBaseProps['loading']
+) => {
+  const {
+    colour: { fill, text },
+  } = theme;
+
+  const textColour = text.default;
+  const bgColour = fill.warning;
+  const bgHoverColour = fill.warningHover;
+  const bgActiveColour = fill.warningPressed;
+  const selectedBgColour = fill.warningSelected;
+
+  const baseStyle = css`
+    background-color: ${bgColour};
+    color: ${textColour};
+  `;
+
+  const selectedStyle = css`
+    background-color: ${selectedBgColour};
+  `;
+
+  const interactiveStyle = css`
+    cursor: pointer;
+
+    &:hover {
+      background-color: ${bgHoverColour};
+    }
+
+    &:active {
+      background-color: ${bgActiveColour};
+    }
+  `;
+
+  const disabledStyle = css`
+    border-color: ${theme.colour.fill.disabled};
+    background-color: ${theme.colour.fill.disabled};
+    color: ${theme.colour.text.onBgFillDisabled};
+  `;
+
+  return cx(
+    baseStyle,
+    selected && selectedStyle,
+    !disabled && !loading && interactiveStyle,
+    disabled && disabledStyle
+  );
+};
+
+export default buttonPrimaryWarningStyle;

package/lib/components/Button/style/buttonSecondaryDestructiveStyle.ts

@@ -0,0 +1,63 @@
+import { css, cx } from '@emotion/css';
+import { ThemeType } from '../../../theme';
+import { ButtonBaseProps } from '../Button';
+
+const buttonSecondaryDestructiveStyle = (
+  theme: ThemeType,
+  selected: ButtonBaseProps['selected'],
+  disabled: ButtonBaseProps['disabled'],
+  loading: ButtonBaseProps['loading']
+) => {
+  const {
+    colour: { border, fill, text },
+  } = theme;
+
+  const textColour = text.critical;
+  const borderColour = border.critical;
+  const hoverTextColour = text.inverse;
+  const hoverFillColour = fill.criticalHover;
+  const activeTextColour = text.inverse;
+  const activeFillColour = fill.criticalPressed;
+
+  const baseStyle = css`
+    background-color: ${theme.colour.fill.inverse};
+    color: ${textColour};
+    border-color: ${borderColour};
+  `;
+
+  const selectedStyle = css`
+    background-color: ${fill.criticalSelected};
+    color: ${text.inverse};
+    border-color: transparent;
+  `;
+
+  const interactiveStyle = css`
+    cursor: pointer;
+
+    &:hover {
+      background-color: ${hoverFillColour};
+      border-color: ${hoverFillColour};
+      color: ${hoverTextColour};
+    }
+
+    &:active {
+      background-color: ${activeFillColour};
+      color: ${activeTextColour};
+      border-color: ${activeFillColour};
+    }
+  `;
+
+  const disabledStyle = css`
+    border-color: ${theme.colour.border.disabled};
+    color: ${theme.colour.text.disabled};
+  `;
+
+  return cx(
+    baseStyle,
+    selected && selectedStyle,
+    !disabled && !loading && interactiveStyle,
+    disabled && disabledStyle
+  );
+};
+
+export default buttonSecondaryDestructiveStyle;

package/lib/components/Button/style/buttonSecondaryStyle.ts

@@ -0,0 +1,62 @@
+import { css, cx } from '@emotion/css';
+import { ThemeType } from '../../../theme';
+import { ButtonBaseProps } from '../Button';
+
+const buttonSecondaryStyle = (
+  theme: ThemeType,
+  selected: ButtonBaseProps['selected'],
+  disabled: ButtonBaseProps['disabled'],
+  loading: ButtonBaseProps['loading']
+) => {
+  const {
+    colour: { border, fill, text },
+  } = theme;
+
+  const textColour = text.brand;
+  const borderColour = border.brand;
+  const hoverTextColour = text.inverse;
+  const hoverFillColour = fill.brandHover;
+  const activeTextColour = text.inverse;
+  const activeFillColour = fill.brandPressed;
+
+  const baseStyle = css`
+    background-color: ${theme.colour.fill.inverse};
+    color: ${textColour};
+    border-color: ${borderColour};
+  `;
+
+  const selectedStyle = css`
+    background-color: ${theme.colour.fill.brandSubtleSelected};
+    border-color: ${borderColour};
+  `;
+
+  const interactiveStyle = css`
+    cursor: pointer;
+
+    &:hover {
+      background-color: ${hoverFillColour};
+      border-color: ${hoverFillColour};
+      color: ${hoverTextColour};
+    }
+
+    &:active {
+      background-color: ${activeFillColour};
+      color: ${activeTextColour};
+      border-color: ${activeFillColour};
+    }
+  `;
+
+  const disabledStyle = css`
+    border-color: ${theme.colour.border.disabled};
+    color: ${theme.colour.text.disabled};
+  `;
+
+  return cx(
+    baseStyle,
+    selected && selectedStyle,
+    !disabled && !loading && interactiveStyle,
+    disabled && disabledStyle
+  );
+};
+
+export default buttonSecondaryStyle;

package/lib/components/Button/style/buttonSecondarySubtleStyle.ts

@@ -0,0 +1,72 @@
+import { css, cx } from '@emotion/css';
+import { ThemeType } from '../../../theme';
+import { ButtonBaseProps } from '../Button';
+
+const buttonSecondarySubtleStyle = (
+  theme: ThemeType,
+  selected: ButtonBaseProps['selected'],
+  disabled: ButtonBaseProps['disabled'],
+  loading: ButtonBaseProps['loading'],
+  paddingPx: number
+) => {
+  const {
+    colour: { border, fill, text },
+  } = theme;
+
+  const textColour = text.brand;
+  const borderColour = border.subtle;
+  const hoverTextColour = text.brandHover;
+  const hoverFillColour = fill.brandSubtleHover;
+  const hoverBorderColour = border.brandSubtle;
+  const activeTextColour = text.brandHover;
+  const activeFillColour = fill.brandSubtleHover;
+  const activeBorderColour = border.brandSubtle;
+  const selectedFillColour = fill.brandSubtleHover;
+  const selectedBorderColour = border.brand;
+  const selectedTextColour = text.brandHover;
+
+  const adjustedPaddingPx = paddingPx + 1;
+
+  const baseStyle = css`
+    background-color: ${theme.color.neutral.white};
+    color: ${textColour};
+    border: ${theme.border.b1} solid ${borderColour};
+    padding: 0 ${adjustedPaddingPx}px;
+  `;
+
+  const selectedStyle = css`
+    background-color: ${selectedFillColour};
+    border-color: ${selectedBorderColour};
+    color: ${selectedTextColour};
+  `;
+
+  const interactiveStyle = css`
+    cursor: pointer;
+
+    &:hover {
+      background-color: ${hoverFillColour};
+      border-color: ${hoverBorderColour};
+      color: ${hoverTextColour};
+    }
+
+    &:active {
+      background-color: ${activeFillColour};
+      color: ${activeTextColour};
+      border-color: ${activeBorderColour};
+    }
+  `;
+
+  const disabledStyle = css`
+    border-color: ${border.disabled};
+    color: ${text.disabled};
+  `;
+
+  return cx(
+    baseStyle,
+    selected && selectedStyle,
+    !selected && !disabled && !loading && interactiveStyle,
+    disabled && disabledStyle
+  );
+};
+
+export default buttonSecondarySubtleStyle;