uikit-react-public 0.17.4 → 0.21.8

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

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

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

@@ -0,0 +1,52 @@
+import { css, cx } from '@emotion/css';
+import { ThemeType } from '../../../theme';
+import { ButtonBaseProps } from '../Button';
+
+const buttonTertiaryNoPaddingStyle = (
+  theme: ThemeType,
+  disabled: ButtonBaseProps['disabled'],
+  loading: ButtonBaseProps['loading'],
+  paddingPx: number
+) => {
+  const {
+    colour: { text },
+  } = theme;
+
+  const textColour = text.brand;
+  const hoverTextColour = text.brandHover;
+  const activeTextColour = text.brandHover;
+
+  const adjustedPaddingPx = paddingPx + 2;
+
+  const tertiaryBaseStyle = css`
+    border: none;
+    background-color: transparent;
+    color: ${textColour};
+    height: fit-content;
+    padding: 0 ${adjustedPaddingPx}px;
+  `;
+
+  const interactiveStyle = css`
+    cursor: pointer;
+
+    &:hover {
+      color: ${hoverTextColour};
+    }
+
+    &:active {
+      color: ${activeTextColour};
+    }
+  `;
+
+  const disabledStyle = css`
+    color: ${theme.colour.text.disabled};
+  `;
+
+  return cx(
+    tertiaryBaseStyle,
+    !disabled && !loading && interactiveStyle,
+    disabled && disabledStyle
+  );
+};
+
+export default buttonTertiaryNoPaddingStyle;

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

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

package/lib/components/Calendar/Calendar.stories.tsx

@@ -4,7 +4,7 @@ import { useArgs } from '@storybook/preview-api';
 import type { AcademicWeek } from './Calendar.types';
 
 const meta = {
-  title: 'Components/Work in progress/Calendar',
+  title: 'Components/Calendar',
   component: Calendar,
   parameters: { layout: 'padded' },
   argTypes: {
@@ -34,12 +34,17 @@ const dateToISOString = (date: Date) => {
 export const Default: Story = {
   render: () => {
     const [args, updateArgs] = useArgs();
-    args.pickedDate = args.pickedDate ? parseDateFromUNIXTimestamp(args.pickedDate) : null;
+    args.pickedDate = args.pickedDate
+      ? parseDateFromUNIXTimestamp(args.pickedDate)
+      : null;
     const onDatePick = (date: Date | null) => updateArgs({ pickedDate: date });
     return (
-      <Calendar {...args} onDatePick={onDatePick} />
+      <Calendar
+        {...args}
+        onDatePick={onDatePick}
+      />
     );
-  }
+  },
 };
 
 // Story repeated in Datepicker.stories.tsx
@@ -71,12 +76,17 @@ export const WithEvents: Story = {
   },
   render: () => {
     const [args, updateArgs] = useArgs();
-    args.pickedDate = args.pickedDate ? parseDateFromUNIXTimestamp(args.pickedDate) : null;
+    args.pickedDate = args.pickedDate
+      ? parseDateFromUNIXTimestamp(args.pickedDate)
+      : null;
     const onDatePick = (date: Date | null) => updateArgs({ pickedDate: date });
     return (
-      <Calendar {...args} onDatePick={onDatePick} />
+      <Calendar
+        {...args}
+        onDatePick={onDatePick}
+      />
     );
-  }
+  },
 };
 
 const academicWeeks: AcademicWeek[] = [
@@ -145,12 +155,17 @@ export const WithAcademicWeeks: Story = {
   },
   render: () => {
     const [args, updateArgs] = useArgs();
-    args.pickedDate = args.pickedDate ? parseDateFromUNIXTimestamp(args.pickedDate) : null;
+    args.pickedDate = args.pickedDate
+      ? parseDateFromUNIXTimestamp(args.pickedDate)
+      : null;
     const onDatePick = (date: Date | null) => updateArgs({ pickedDate: date });
     return (
-      <Calendar {...args} onDatePick={onDatePick} />
+      <Calendar
+        {...args}
+        onDatePick={onDatePick}
+      />
     );
-  }
+  },
 };
 
 // Story repeated in Datepicker.stories.tsx
@@ -180,10 +195,15 @@ export const MinMaxDates: Story = {
   },
   render: () => {
     const [args, updateArgs] = useArgs();
-    args.pickedDate = args.pickedDate ? parseDateFromUNIXTimestamp(args.pickedDate) : null;
+    args.pickedDate = args.pickedDate
+      ? parseDateFromUNIXTimestamp(args.pickedDate)
+      : null;
     const onDatePick = (date: Date | null) => updateArgs({ pickedDate: date });
     return (
-      <Calendar {...args} onDatePick={onDatePick} />
+      <Calendar
+        {...args}
+        onDatePick={onDatePick}
+      />
     );
-  }
+  },
 };

package/lib/components/Calendar/Calendar.tsx

@@ -75,9 +75,9 @@ const Calendar = ({
     gap: 16px;
     width: ${width}px;
     box-sizing: border-box;
-    border: 1px solid ${theme.color.neutral.grey20};
+    border: 1px solid ${theme.colour.border.subtle}; // todo: incorrect border colour / need a new border colour defined
     padding: 16px;
-    background-color: ${theme.color.neutral.white};
+    background-color: ${theme.colour.fill.inverse};
   `;
 
   const innerContainerStyle = css`