uikit-react-public 0.17.4 → 0.21.9

package/lib/components/Tabs/Tab.tsx

@@ -31,7 +31,7 @@ const Tab = ({
     border: none;
     cursor: pointer;
     font-family: ${theme.font.family.primary};
-    color: ${theme.color.text.secondary};
+    color: ${theme.colour.text.secondary};
     border-bottom: 4px solid transparent;
     text-align: center;
     font-style: normal;
@@ -53,8 +53,8 @@ const Tab = ({
   `;
 
   const activeStyle = css`
-    border-bottom: 4px solid ${color || theme.color.interaction.blue70};
-    color: ${theme.color.text.primary};
+    border-bottom: 4px solid ${color || theme.colour.border.brand};
+    color: ${theme.colour.text.default};
     margin-bottom: -1px;
     font-weight: 700;
 

package/lib/components/Tabs/Tabs.stories.tsx

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

package/lib/components/Tabs/Tabs.tsx

@@ -7,8 +7,10 @@ import marginsStyle, { MarginProps } from '../common/marginsStyle';
 
 export const NAME = 'ucl-uikit-tabs';
 
-export interface TabsBaseProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+export interface TabsBaseProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'onChange'
+> {
   activeTab: string;
   onChange?: (value: string) => void;
   fullWidth?: boolean;
@@ -42,7 +44,7 @@ const TabsBase = ({
 
   const baseStyle = css`
     display: flex;
-    border-bottom: 1px solid ${theme.color.neutral.grey20};
+    border-bottom: 1px solid ${theme.colour.border.subtle};
   `;
 
   const style = cx(NAME, baseStyle, marginsStyle(props, theme), className);

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

@@ -2,7 +2,7 @@
 
 exports[`Tabs > snapshot: Auto width 1`] = `
 <div
-  class="ucl-uikit-tabs css-kfvqex"
+  class="ucl-uikit-tabs css-1hchved"
   data-testid="ucl-uikit-tabs"
   role="tablist"
 >
@@ -47,7 +47,7 @@ exports[`Tabs > snapshot: Auto width 1`] = `
 
 exports[`Tabs > snapshot: Counter 1`] = `
 <div
-  class="ucl-uikit-tabs css-kfvqex"
+  class="ucl-uikit-tabs css-1hchved"
   data-testid="ucl-uikit-tabs"
   role="tablist"
 >
@@ -96,7 +96,7 @@ exports[`Tabs > snapshot: Counter 1`] = `
 
 exports[`Tabs > snapshot: Custom test id 1`] = `
 <div
-  class="ucl-uikit-tabs css-kfvqex"
+  class="ucl-uikit-tabs css-1hchved"
   data-testid="custom-test-id"
   role="tablist"
 >
@@ -141,7 +141,7 @@ exports[`Tabs > snapshot: Custom test id 1`] = `
 
 exports[`Tabs > snapshot: Minimal props 1`] = `
 <div
-  class="ucl-uikit-tabs css-kfvqex"
+  class="ucl-uikit-tabs css-1hchved"
   data-testid="ucl-uikit-tabs"
   role="tablist"
 >

package/lib/components/Timepicker/Timepicker.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import Timepicker from './Timepicker';
 
 const meta: Meta<typeof Timepicker> = {
-  title: 'Components/Work in progress/TimePicker',
+  title: 'Components/TimePicker',
   component: Timepicker,
   decorators: [(Story) => <Story />],
 };

package/lib/components/Toggle/Toggle.tsx

@@ -33,7 +33,7 @@ const Toggle = forwardRef<Ref, ToggleProps>(
       width: 48px;
       height: 24px;
       border-radius: 12px;
-      background-color: ${theme.color.neutral.grey40};
+      background-color: ${theme.colour.icon.tertiary};
       cursor: pointer;
       transition: background-color 0.2s ease-in-out;
       &:focus-visible {
@@ -43,11 +43,11 @@ const Toggle = forwardRef<Ref, ToggleProps>(
     `;
 
     const checkedStyle = css`
-      background-color: ${theme.color.interaction.blue70};
+      background-color: ${theme.colour.fill.brand};
     `;
 
     const disabledStyle = css`
-      background-color: ${theme.color.neutral.grey20};
+      background-color: ${theme.colour.surface.disabled};
       cursor: not-allowed;
     `;
 
@@ -56,8 +56,8 @@ const Toggle = forwardRef<Ref, ToggleProps>(
       css`
         &:hover {
           background-color: ${checked
-            ? theme.color.interaction.blue80
-            : theme.color.neutral.grey60};
+            ? theme.colour.fill.brandHover
+            : theme.colour.icon.secondary};
         }
       `;
 

package/lib/components/Toggle/ToggleHandle.tsx

@@ -4,8 +4,7 @@ import { useTheme } from '../../theme';
 
 export const NAME = 'ucl-uikit-toggle__handle';
 
-export interface ToggleHandleProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface ToggleHandleProps extends React.HTMLAttributes<HTMLDivElement> {
   checked: boolean;
   disabled: boolean;
 }
@@ -18,7 +17,7 @@ const ToggleHandle = ({ checked, className }: ToggleHandleProps) => {
     width: 20px;
     height: 20px;
     border-radius: 50%;
-    background-color: ${theme.color.neutral.white};
+    background-color: ${theme.colour.fill.inverse};
     position: absolute;
     top: 2px;
     left: 2px;

package/lib/components/Tooltip/Tooltip.tsx

@@ -15,8 +15,8 @@ const Tooltip = forwardRef<Ref, TooltipProps>(
     const [theme] = useTheme();
 
     const baseStyle = css`
-      background-color: ${theme.color.neutral.grey90};
-      color: ${theme.color.text.inverted};
+      background-color: ${theme.colour.surface.inverseBrandPrimary};
+      color: ${theme.colour.text.inverse};
       font-family: ${theme.font.family.primary};
       height: 32px;
       padding: 4px 8px 4px 8px;

package/lib/components/Tooltip/__tests__/__snapshots__/tooltip.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Tooltip > snapshot: no props 1`] = `
 <span
-  class="ucl-uikit-tooltip css-h4sax9"
+  class="ucl-uikit-tooltip css-x1asgy"
   data-testid="ucl-uikit-tooltip"
 >
   test
@@ -11,7 +11,7 @@ exports[`Tooltip > snapshot: no props 1`] = `
 
 exports[`Tooltip > snapshot: testId prop 1`] = `
 <span
-  class="ucl-uikit-tooltip css-h4sax9"
+  class="ucl-uikit-tooltip css-x1asgy"
   data-testid="test123"
 >
    Info Tooltip 

package/lib/components/UclLogoNew/UclLogo.tsx

@@ -0,0 +1,42 @@
+import { SVGAttributes, memo } from 'react';
+import { ts } from 'design-system-foundations-public';
+
+const {
+  logos: {
+    ucl: { Primary: PrimaryUclLogoSvg },
+    ucl: { Secondary: SecondaryUclLogoSvg },
+    ucl: { PrimaryInverse: PrimaryInverseyUclLogoSvg },
+    ucl: { SecondaryInverse: SecondaryInverseyUclLogoSvg },
+  },
+} = ts;
+
+export const NAME = 'ucl-uikit-logo';
+
+export interface UclLogoProps extends SVGAttributes<SVGElement> {
+  variant?: 'primary' | 'secondary' | 'primary-inverse' | 'secondary-inverse';
+  testId?: string;
+}
+
+const UclLogo = ({
+  variant = 'primary',
+  testId,
+  ...props
+}: UclLogoProps) => {
+  
+  const LogoSvg = {
+    primary: PrimaryUclLogoSvg,
+    secondary: SecondaryUclLogoSvg,
+    'primary-inverse': PrimaryInverseyUclLogoSvg,
+    'secondary-inverse': SecondaryInverseyUclLogoSvg,
+  }[variant];
+
+  return (
+    <LogoSvg
+      data-testid={testId}
+      {...props}
+    />
+  );
+
+};
+
+export default memo(UclLogo);

package/lib/components/UclLogoNew/index.ts

@@ -0,0 +1,2 @@
+export { default as UclLogoNew } from './UclLogo';
+export type { UclLogoProps } from './UclLogo';

package/lib/components/WeekPicker/WeekPicker.stories.tsx

@@ -3,7 +3,7 @@ import { useArgs } from '@storybook/preview-api';
 import WeekPicker from './WeekPicker';
 
 const meta = {
-  title: 'Components/Work in progress/WeekPicker',
+  title: 'Components/WeekPicker',
   component: WeekPicker,
   parameters: { layout: 'padded' },
   argTypes: {
@@ -33,8 +33,7 @@ export const Default: Story = {
       ? new Date(args.maxDate).toLocaleDateString('sv-SE')
       : null;
 
-    const onValueChange = (value: Date | null) =>
-      updateArgs({ value: value });
+    const onValueChange = (value: Date | null) => updateArgs({ value: value });
     return (
       <WeekPicker
         {...args}
@@ -120,8 +119,7 @@ export const WithAcademicWeeks: Story = {
       ? new Date(args.maxDate).toLocaleDateString('sv-SE')
       : null;
 
-    const onValueChange = (value: Date | null) =>
-      updateArgs({ value: value });
+    const onValueChange = (value: Date | null) => updateArgs({ value: value });
     return (
       <WeekPicker
         {...args}

package/lib/components/common/Common.mdx

@@ -79,4 +79,3 @@ The available margin props are:
 [A live example of common margin props can be found in this `<Button>` story.](?path=/story/components-button--common-margins)
 
 Implementation details can be found in <a href='https://github.com/ucl-isd/uikit-react/blob/main/lib/components/common/marginsStyle.ts' target='_blank'>uikit-react/components/common/MarginsStyle.tsx</a>
-

package/lib/components/index.ts

@@ -40,8 +40,15 @@ export type { TextareaProps } from './Textarea';
 export { default as Heading } from './Heading';
 export type { HeadingProps } from './Heading';
 
+export { default as HeadingNew } from './Heading';
+export type { HeadingProps as HeadingNewProps } from './Heading';
+
 export { default as Paragraph } from './Paragraph';
 export type { ParagraphProps } from './Paragraph';
+
+export { default as ParagraphNew } from './Paragraph';
+export type { ParagraphProps as ParagraphNewProps } 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';
@@ -53,6 +60,9 @@ export type { ModalProps } from './Modal';
 export { UclLogo } from './UclLogo';
 export type { UclLogoProps } from './UclLogo';
 
+export { UclLogoNew } from './UclLogoNew';
+export type { UclLogoProps as UclLogoNewProps } from './UclLogoNew';
+
 export { UclLogoNegativeSpace } from './UclLogo';
 export type { UclLogoNegativeSpaceProps } from './UclLogo';
 
@@ -77,18 +87,27 @@ export type { AppMenuProps } from './AppMenu';
 export { default as Menu } from './Menu';
 export type { MenuProps } from './Menu';
 
+export { default as MenuNew } from './MenuNew';
+export type { MenuProps as MenuNewProps } from './MenuNew';
+
 export { default as Select } from './Select';
 export type { SelectProps } from './Select';
 
 export { default as Footer } from './Footer';
 export type { FooterProps } from './Footer';
 
+export { default as FooterNew } from './FooterNew';
+export type { FooterProps as FooterNewProps } from './FooterNew';
+
 export { default as Divider } from './Divider';
 export type { DividerProps } from './Divider';
 
 export { default as Header } from './Header';
 export type { HeaderProps } from './Header';
 
+export { default as HeaderNew } from './HeaderNew';
+export type { HeaderProps as HeaderNewProps } from './HeaderNew';
+
 export { default as HeaderDraft } from './HeaderDraft';
 export type { HeaderDraftProps } from './HeaderDraft';
 
@@ -102,7 +121,6 @@ export { default as Tabs } from './Tabs';
 export type { TabsProps } from './Tabs';
 export type { TabProps } from './Tabs/Tab';
 
-// todo:
 export { default as Accordion } from './Accordion';
 export type { AccordionProps } from './Accordion';
 

package/lib/theme/Colours.mdx

@@ -1,5 +1,5 @@
 import { Meta, Title, Subtitle, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';
-import theme from './defaultTheme';
+import theme from './original/defaultTheme';
 
 <Meta title="Theme/Colours" />
 <Title>Colours explorer</Title>

package/lib/theme/Theme.mdx

@@ -1,5 +1,5 @@
 import { Meta, Title, Subtitle, Source } from '@storybook/addon-docs/blocks';
-import theme from './defaultTheme';
+import theme from './original/defaultTheme';
 
 { console.log('theme:', theme) }
 

package/lib/theme/Typography.mdx

@@ -1,5 +1,5 @@
 import { Meta, Title, Subtitle, Typeset } from '@storybook/blocks';
-import theme from './defaultTheme';
+import theme from './original/defaultTheme';
 
 { console.log(theme.font) } 
 

package/lib/theme/__tests__/fonts.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, test } from 'vitest';
+import { uikitFontUrls, uikitFonts } from '../fonts';
+
+describe('theme/fonts exports', () => {
+  test('exports font URL map with expected keys', () => {
+    expect(uikitFontUrls).toMatchObject({
+      dmSansNormal: expect.any(String),
+      dmSansItalic: expect.any(String),
+      dmMonoItalic: expect.any(String),
+      dmMonoLight: expect.any(String),
+      dmMonoLightItalic: expect.any(String),
+      dmMonoMedium: expect.any(String),
+      dmMonoMediumItalic: expect.any(String),
+      dmMonoRegular: expect.any(String),
+    });
+  });
+
+  test('exports font source map with required shape', () => {
+    expect(uikitFonts['DM Sans']).toBeDefined();
+    expect(uikitFonts['DM Mono']).toBeDefined();
+
+    Object.values(uikitFonts).forEach((fontSources) => {
+      expect(Array.isArray(fontSources)).toBe(true);
+      expect(fontSources.length).toBeGreaterThan(0);
+
+      fontSources.forEach((source) => {
+        expect(typeof source.src).toBe('string');
+        expect(source.src.length).toBeGreaterThan(0);
+        expect(
+          source.fontStyle === 'normal' || source.fontStyle === 'italic'
+        ).toBe(true);
+        expect(typeof source.fontWeight).toBe('number');
+        expect(typeof source.fontFeatureSettings).toBe('string');
+      });
+    });
+  });
+});