uikit-react-public 0.14.21 → 0.21.8

package/lib/components/MenuNew/trigger/IconMenuTrigger.tsx

@@ -0,0 +1,40 @@
+import { memo } from 'react';
+import { cx } from '@emotion/css';
+import IconButton, { IconButtonProps } from '../../IconButton';
+import { useAppMenu } from '../Menu.context';
+import { Icon } from '../..';
+
+export const NAME = 'ucl-uikit-menu__trigger--icon';
+export const DEFAULT_ARIA_LABEL = 'Menu button';
+
+export interface IconMenuTriggerProps extends IconButtonProps {
+  ariaLabel?: string;
+}
+
+const IconMenuTrigger = ({
+  id = 'menu-trigger',
+  ariaLabel = DEFAULT_ARIA_LABEL,
+  className,
+  ...props
+}: IconMenuTriggerProps) => {
+  const { toggleMenu, isOpen, triggerRef } = useAppMenu();
+
+  const style = cx(NAME, className);
+
+  return (
+    <IconButton
+      id={id}
+      ref={triggerRef}
+      className={style}
+      onClick={toggleMenu}
+      aria-label={ariaLabel}
+      aria-haspopup='true'
+      aria-expanded={isOpen ? 'true' : 'false'}
+      {...props}
+    >
+      <Icon.Menu/>
+    </IconButton>
+  );
+};
+
+export default memo(IconMenuTrigger);

package/lib/components/NativeDatepicker/NativeDatepicker.stories.tsx

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useArgs } from '@storybook/preview-api';
+import NativeDatepicker from './NativeDatepicker';
+
+const meta = {
+  title: 'Components/NativeDatepicker',
+  component: NativeDatepicker,
+  parameters: { layout: 'padded' },
+  argTypes: {
+    value: { control: { type: 'date' } },
+    minDate: { control: { type: 'date' } },
+    maxDate: { control: { type: 'date' } },
+    disabled: { control: { type: 'boolean' } },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof NativeDatepicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [args, updateArgs] = useArgs();
+
+    // Storybook controls provide UNIX timestamps for dates, need to convert
+    // https://storybook.js.org/docs/essentials/controls#annotation
+    args.value = args.value ? new Date(args.value) : null;
+    args.minDate = args.minDate
+      ? new Date(args.minDate).toLocaleDateString('sv-SE')
+      : null;
+    args.maxDate = args.maxDate
+      ? new Date(args.maxDate).toLocaleDateString('sv-SE')
+      : null;
+
+    const onValueChange = (value: Date | null) => updateArgs({ value: value });
+    return (
+      <NativeDatepicker
+        {...args}
+        onValueChange={onValueChange}
+      />
+    );
+  },
+};
+
+export const Disabled: Story = {
+  name: 'Disabled',
+  args: {
+    disabled: true,
+    value: new Date(2025, 2, 10),
+  },
+  render: (args) => <NativeDatepicker {...args} />,
+};
+
+export const WithMinMaxDates: Story = {
+  name: 'With min and max dates',
+  args: {
+    // Initialise min date as 5 days into the current month
+    minDate: (() => {
+      const now = new Date();
+      return new Date(now.getFullYear(), now.getMonth(), 5).toLocaleDateString(
+        'sv-SE'
+      );
+    })(),
+    // Initialise max date as 5 days before the last day of the current month
+    maxDate: (() => {
+      const now = new Date();
+      const lastDay = new Date(
+        now.getFullYear(),
+        now.getMonth() + 1,
+        0
+      ).getDate();
+      return new Date(
+        now.getFullYear(),
+        now.getMonth(),
+        lastDay - 5
+      ).toLocaleDateString('sv-SE');
+    })(),
+  },
+  render: () => {
+    const [args, updateArgs] = useArgs();
+
+    // Storybook controls provide UNIX timestamps for dates, need to convert
+    // https://storybook.js.org/docs/essentials/controls#annotation
+    args.value = args.value ? new Date(args.value) : null;
+    args.minDate = args.minDate
+      ? new Date(args.minDate).toLocaleDateString('sv-SE')
+      : null;
+    args.maxDate = args.maxDate
+      ? new Date(args.maxDate).toLocaleDateString('sv-SE')
+      : null;
+
+    const onValueChange = (value: Date | null) => updateArgs({ value: value });
+    return (
+      <NativeDatepicker
+        {...args}
+        onValueChange={onValueChange}
+      />
+    );
+  },
+};

package/lib/components/{Datepicker/subcomponents → NativeDatepicker}/NativeDatepicker.tsx

@@ -1,19 +1,15 @@
 import { css, cx } from '@emotion/css';
-import { theme } from '../../../theme';
+import { theme } from '../../theme';
+import { dateToLocaleISOString } from './utils';
+import type { NativeDatepickerProps } from './NativeDatepicker.types';
 
-interface NativeDatepickerProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
-  testId?: string;
-  ref?: React.RefObject<HTMLInputElement>;
-}
-
-const NAME = 'ucl-uikit-datepicker--native';
+const NAME = 'ucl-uikit-native-datepicker';
 
 const NativeDatepicker = ({
   value,
-  onChange,
-  min,
-  max,
+  onValueChange,
+  minDate,
+  maxDate,
   className,
   disabled,
   testId = NAME,
@@ -54,10 +50,13 @@ const NativeDatepicker = ({
   return (
     <input
       type='date'
-      value={value}
-      onChange={onChange}
-      min={min}
-      max={max}
+      value={dateToLocaleISOString(value) ?? ''}
+      onChange={(event) => {
+        const dateString = event.target.value;
+        onValueChange?.(dateString ? new Date(dateString) : null, event);
+      }}
+      min={minDate || undefined}
+      max={maxDate || undefined}
       disabled={disabled}
       className={style}
       data-testid={testId}

package/lib/components/NativeDatepicker/NativeDatepicker.types.ts

@@ -0,0 +1,19 @@
+import type { InputHTMLAttributes, RefObject } from 'react';
+
+export type DatepickerValue = Date | null;
+
+export interface NativeDatepickerProps
+  extends Omit<
+    InputHTMLAttributes<HTMLInputElement>,
+    'value' | 'onChange' | 'min' | 'max'
+  > {
+  value?: DatepickerValue;
+  onValueChange?: (
+    value: DatepickerValue,
+    event?: React.SyntheticEvent
+  ) => void;
+  minDate?: string | null;
+  maxDate?: string | null;
+  testId?: string;
+  ref?: RefObject<HTMLInputElement>;
+}

package/lib/components/NativeDatepicker/index.ts

@@ -0,0 +1,2 @@
+export { default } from './NativeDatepicker';
+export type { NativeDatepickerProps } from './NativeDatepicker.types';

package/lib/components/{Datepicker → NativeDatepicker}/utils/dateToLocaleISOString/dateToLocaleISOString.ts

@@ -1,7 +1,7 @@
 /**
  * Converts a Date object to a `YYYY-MM-DD` string based on the user's local timezone.
  *
- * Used for passing dates to <NativeDatepicker> in `Datepicker.tsx`
+ * Used for passing dates to <NativeDatepicker>
  *
  * This function uses the Swedish (`sv-SE`) locale with `toLocaleDateString`
  * as it conveniently defaults to the ISO 8601 `YYYY-MM-DD` format, while respecting

package/lib/components/NativeDatepicker/utils/index.ts

@@ -0,0 +1 @@
+export { default as dateToLocaleISOString } from './dateToLocaleISOString/dateToLocaleISOString';

package/lib/components/Pagination/Pagination.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Pagination from './Pagination';
 
 const meta = {
-  title: 'Components/Work in progress/Pagination',
+  title: 'Components/Pagination',
   component: Pagination,
   parameters: {
     docs: {

package/lib/components/Pagination/PaginationControls.tsx

@@ -4,12 +4,12 @@ import useTheme from '../../theme/useTheme';
 import { PaginationContext } from './Pagination';
 import Button from '../Button';
 import getPaginationButtons from './getPaginationButtons';
+import { useMediaQuery } from '../../hooks';
 
 export const NAME = 'ucl-ukit-pagination__controls';
 export const DEFAULT_MAX_BUTTONS = 9;
 
-export interface PaginationControlsProps
-  extends HTMLAttributes<HTMLDivElement> {
+export interface PaginationControlsProps extends HTMLAttributes<HTMLDivElement> {
   maxNumberButtons?: number;
   testId?: string;
 }
@@ -21,6 +21,10 @@ const PaginationControls = ({
 }: PaginationControlsProps) => {
   const [theme] = useTheme();
 
+  const isTabletPlus = useMediaQuery(
+    `(min-width: ${theme.breakpoints.tablet}px)`
+  );
+
   const contextValue = useContext(PaginationContext);
 
   const handlePageChange = useCallback(
@@ -48,7 +52,7 @@ const PaginationControls = ({
   const paginationButtons = getPaginationButtons(
     currentPage,
     totalPages,
-    maxNumberButtons
+    isTabletPlus ? maxNumberButtons : 5
   );
 
   const baseStyle = css``;
@@ -61,37 +65,72 @@ const PaginationControls = ({
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: ${theme.margin.m8};
     list-style: none;
-  `;
+    gap: ${theme.margin.m4};
+    flex-wrap: nowrap;
 
-  const previousButtonStyle = css`
-    margin-right: ${theme.margin.m16};
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      gap: ${theme.margin.m8};
+    }
   `;
 
-  const nextButtonStyle = css`
-    margin-left: ${theme.margin.m16};
+  const buttonBaseStyle = css`
+    @media (max-width: ${theme.breakpoints.tablet}px) {
+      gap: ${theme.margin.m4};
+    }
   `;
 
-  const pageNumberButtonBaseStyle = css`
-    height: 48px;
-    min-width: 48px;
-    padding: 0;
-  `;
+  const previousButtonStyle = cx(
+    buttonBaseStyle,
+    css`
+      margin-right: ${theme.margin.m16};
+      display: none;
+
+      @media (min-width: ${theme.breakpoints.tablet}px) {
+        display: inline-block;
+      }
+    `
+  );
+
+  const nextButtonStyle = cx(
+    buttonBaseStyle,
+    css`
+      margin-left: ${theme.margin.m16};
+      display: none;
+
+      @media (min-width: ${theme.breakpoints.tablet}px) {
+        display: inline-block;
+      }
+    `
+  );
+
+  const pageNumberButtonBaseStyle = cx(
+    buttonBaseStyle,
+    css`
+      height: 40px;
+      min-width: 40px;
+      padding: 0;
+
+      @media (min-width: ${theme.breakpoints.tablet}px) {
+        height: 48px;
+        min-width: 48px;
+      }
+    `
+  );
 
   const pageNumberButtonStyle = cx(
     pageNumberButtonBaseStyle,
     css`
       border: none;
-      color: ${theme.color.text.secondary};
+      color: ${theme.colour.text.secondary};
     `
   );
 
   const currentPageNumberButtonStyle = cx(
     pageNumberButtonBaseStyle,
     css`
-      color: ${theme.color.interaction.blue70};
-      border-color: ${theme.color.interaction.blue70};
+      color: ${theme.colour.text.brand};
+      border-color: ${theme.colour.border.brand};
     `
   );
 
@@ -110,6 +149,7 @@ const PaginationControls = ({
           <Button
             className={previousButtonStyle}
             variant='tertiary'
+            size={isTabletPlus ? 'default' : 'small'}
             aria-label='Go to previous page'
             onClick={() => handlePageChange(currentPage - 1)}
             disabled={currentPage === 1}
@@ -128,6 +168,7 @@ const PaginationControls = ({
                   <Button
                     className={pageNumberButtonStyle}
                     variant='secondary'
+                    size={isTabletPlus ? 'default' : 'small'}
                     aria-label={`Page ${page}`}
                     onClick={() => handlePageChange(page)}
                   >
@@ -138,6 +179,7 @@ const PaginationControls = ({
                   <Button
                     className={currentPageNumberButtonStyle}
                     variant='secondary'
+                    size={isTabletPlus ? 'default' : 'small'}
                     aria-label={`Page ${page}, current page`}
                     aria-current='page'
                     disabled

package/lib/components/Pagination/PaginationInfo.tsx

@@ -5,8 +5,7 @@ import { PaginationContext } from './Pagination';
 
 export const NAME = 'ucl-uikit-pagination__info';
 
-export interface PaginationInfoProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface PaginationInfoProps extends React.HTMLAttributes<HTMLDivElement> {
   format?: 'pages' | 'items';
   itemsPluralName?: string;
   testId?: string;
@@ -40,11 +39,15 @@ const PaginationInfo = ({
   }[format];
 
   const baseStyle = css`
-    margin: ${theme.margin.m24} 0;
+    margin: ${theme.margin.m16} 0;
     text-align: center;
-    color: ${theme.color.text.secondary};
+    color: ${theme.colour.text.secondary};
     font-family: ${theme.font.family.primary};
     font-size: ${theme.font.size.f16};
+
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      margin: ${theme.margin.m24} 0;
+    }
   `;
 
   const style = cx(NAME, baseStyle, className);

package/lib/components/Paragraph/Paragraph.stories.tsx

@@ -3,7 +3,7 @@ import Paragraph from './Paragraph';
 import { Link } from '../';
 
 const meta = {
-  title: 'Components/Ready to use/Paragraph',
+  title: 'Components/Paragraph',
   component: Paragraph,
   args: {
     children: 'Default paragraph text',

package/lib/components/ParagraphNew/Paragraph.tsx

@@ -0,0 +1,200 @@
+import { memo, HTMLAttributes, JSX } from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+import marginsStyle, { MarginProps } from '../common/marginsStyle';
+
+export const NAME = 'ucl-uikit-paragrah';
+
+export type ParagraphLevel =
+  | 'lg'
+  | 'lg-medium'
+  | 'lg-semibold'
+  | 'lg-bold'
+  | 'md'
+  | 'md-medium'
+  | 'md-semibold'
+  | 'md-semibold'
+  | 'md-medium-numeric'
+  | 'sm'
+  | 'sm-medium'
+  | 'sm-semibold'
+  | 'xs'
+  | 'xs-medium';
+
+export interface ParagraphBaseProps extends HTMLAttributes<HTMLParagraphElement> {
+  level?: ParagraphLevel;
+  as?: 'p' | 'div' | 'span';
+  testId?: string;
+  ref?: React.Ref<HTMLParagraphElement>;
+}
+
+export type ParagraphProps = ParagraphBaseProps & MarginProps;
+
+const Paragraph = ({
+  level = 'md',
+  as = 'p',
+  testId = NAME,
+  className,
+  ref,
+  ...props
+}: ParagraphProps) => {
+  const [theme] = useTheme();
+
+  const {
+    typography: {
+      body: {
+        lg,
+        lgMedium,
+        lgSemibold,
+        lgBold,
+        md,
+        mdMedium,
+        mdSemibold,
+        mdMediumNumeric,
+        sm,
+        smMedium,
+        smSemibold,
+        xs,
+        xsMedium,
+      },
+    },
+  } = theme;
+
+  const baseStyle = css`
+    font-family: ${md.fontFamily};
+    font-feature-settings: ${md.fontSettings};
+    color: ${theme.colour.text.default};
+    margin: 0;
+  `;
+
+  const lgStyle = css`
+    font-size: ${lg.fontSize}px;
+    font-weight: ${lg.fontWeight};
+    line-height: ${lg.lineHeight}%;
+  `;
+
+  const lgMediumStyle = css`
+    font-size: ${lgMedium.fontSize}px;
+    font-weight: ${lgMedium.fontWeight};
+    line-height: ${lgMedium.lineHeight}%;
+  `;
+
+  const lgSemiboldStyle = css`
+    font-size: ${lgSemibold.fontSize}px;
+    font-weight: ${lgSemibold.fontWeight};
+    line-height: ${lgSemibold.lineHeight}%;
+  `;
+
+  const lgBoldStyle = css`
+    font-size: ${lgBold.fontSize}px;
+    font-weight: ${lgBold.fontWeight};
+    line-height: ${lgBold.lineHeight}%;
+  `;
+
+  const mdStyle = css`
+    font-size: ${md.fontSize}px;
+    font-weight: ${md.fontWeight};
+    line-height: ${md.lineHeight}%;
+  `;
+
+  const mdMediumStyle = css`
+    font-size: ${mdMedium.fontSize}px;
+    font-weight: ${mdMedium.fontWeight};
+    line-height: ${mdMedium.lineHeight}%;
+  `;
+
+  const mdSemiboldStyle = css`
+    font-size: ${mdSemibold.fontSize}px;
+    font-weight: ${mdSemibold.fontWeight};
+    line-height: ${mdSemibold.lineHeight}%;
+  `;
+
+  const mdMediumNumericStyle = css`
+    font-size: ${mdMediumNumeric.fontSize}px;
+    font-weight: ${mdMediumNumeric.fontWeight};
+    line-height: ${mdMediumNumeric.lineHeight}%;
+  `;
+
+  const smStyle = css`
+    font-size: ${sm.fontSize}px;
+    font-weight: ${sm.fontWeight};
+    line-height: ${sm.lineHeight}%;
+  `;
+
+  const smMediumStyle = css`
+    font-size: ${smMedium.fontSize}px;
+    font-weight: ${smMedium.fontWeight};
+    line-height: ${smMedium.lineHeight}%;
+  `;
+
+  const smSemiboldStyle = css`
+    font-size: ${smSemibold.fontSize}px;
+    font-weight: ${smSemibold.fontWeight};
+    line-height: ${smSemibold.lineHeight}%;
+  `;
+
+  const xsStyle = css`
+    font-size: ${xs.fontSize}px;
+    font-weight: ${xs.fontWeight};
+    line-height: ${xs.lineHeight}%;
+  `;
+
+  const xsMediumStyle = css`
+    font-size: ${xsMedium.fontSize}px;
+    font-weight: ${xsMedium.fontWeight};
+    line-height: ${xsMedium.lineHeight}%;
+  `;
+
+  const style = cx(
+    NAME,
+    baseStyle,
+    level === 'lg' && lgStyle,
+    level === 'lg-medium' && lgMediumStyle,
+    level === 'lg-semibold' && lgSemiboldStyle,
+    level === 'lg-bold' && lgBoldStyle,
+    level === 'md' && mdStyle,
+    level === 'md-medium' && mdMediumStyle,
+    level === 'md-semibold' && mdSemiboldStyle,
+    level === 'md-medium-numeric' && mdMediumNumericStyle,
+    level === 'sm' && smStyle,
+    level === 'sm-medium' && smMediumStyle,
+    level === 'sm-semibold' && smSemiboldStyle,
+    level === 'xs' && xsStyle,
+    level === 'xs-medium' && xsMediumStyle,
+    marginsStyle(props, theme),
+    className
+  );
+
+  const paragraphTag = as as keyof JSX.IntrinsicElements;
+
+  return (
+    <>
+      {paragraphTag === 'p' && (
+        <p
+          ref={ref}
+          className={style}
+          data-testid={testId}
+          {...props}
+        />
+      )}
+      {paragraphTag === 'div' && (
+        <div
+          ref={ref as React.Ref<HTMLDivElement>}
+          className={style}
+          data-testid={testId}
+          {...props}
+        />
+      )}
+      {paragraphTag === 'span' && (
+        <span
+          ref={ref as React.Ref<HTMLSpanElement>}
+          className={style}
+          data-testid={testId}
+          {...props}
+        />
+      )}
+    </>
+  );
+};
+
+export default memo(Paragraph);

package/lib/components/ParagraphNew/index.ts

@@ -0,0 +1,6 @@
+export { default } from './Paragraph';
+export type { ParagraphProps } from './Paragraph';
+// TODO: Remove aliased export in future breaking release
+// <Paragraph> will be used in place of <Text> in the future
+export { default as Text } from './Paragraph';
+export type { ParagraphProps as TextProps } from './Paragraph';

package/lib/components/Radio/Radio.stories.tsx

@@ -4,7 +4,7 @@ import { useArgs } from '@storybook/preview-api';
 import Radio from './Radio';
 
 const meta = {
-  title: 'Components/Work in progress/Radio',
+  title: 'Components/Radio',
   component: Radio,
   argTypes: {
     checked: { control: { type: 'boolean' } },

package/lib/components/Radio/Radio.tsx

@@ -64,19 +64,19 @@ const Radio = forwardRef<Ref, RadioProps>(
     `;
 
     const checkedStyle = css`
-      background-color: ${theme.color.interaction.blue70};
-      border-color: ${theme.color.interaction.blue70};
-      color: ${theme.color.neutral.white};
+      background-color: ${theme.colour.icon.brand};
+      border-color: ${theme.colour.icon.brand};
+      color: ${theme.colour.icon.inverse};
     `;
 
     const uncheckedStyle = css`
-      background-color: ${theme.color.neutral.white};
-      border-color: ${theme.color.neutral.grey60};
+      background-color: ${theme.colour.icon.inverse};
+      border-color: ${theme.colour.speciality.inputDefault};
     `;
 
     const disabledStyle = css`
-      background-color: ${theme.color.neutral.grey20};
-      border-color: ${theme.color.neutral.grey20};
+      background-color: ${theme.colour.icon.disabled};
+      border-color: ${theme.colour.icon.disabled};
       cursor: not-allowed;
     `;
 
@@ -112,7 +112,7 @@ const Radio = forwardRef<Ref, RadioProps>(
       width: 12px;
       height: 12px;
       border-radius: 50%;
-      background-color: ${theme.color.neutral.white};
+      background-color: ${theme.colour.icon.inverse};
       user-select: none;
       pointer-events: none;
     `;