uikit-react-public 0.45.0 → 0.45.2

package/lib/components/Button/Button.tsx

@@ -102,7 +102,7 @@ const normalizeVariantProp = (
 
 const Button = <C extends ElementType = 'button'>({
   as,
-  variant = 'primary',
+  variant = 'accent',
   destructive = false,
   size = 'medium',
   selected = false,

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

@@ -3,7 +3,7 @@
 exports[`Button > maps legacy destructive prop to destructive variants 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-thupyi"
+  class="ucl-uikit-button css-ijdex1"
   data-testid="ucl-uikit-button"
 >
   Delete
@@ -13,7 +13,7 @@ exports[`Button > maps legacy destructive prop to destructive variants 1`] = `
 exports[`Button > maps legacy size default to medium 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-5txlzw"
+  class="ucl-uikit-button css-ijdex1"
   data-testid="ucl-uikit-button"
 >
   Legacy default size
@@ -23,7 +23,7 @@ exports[`Button > maps legacy size default to medium 1`] = `
 exports[`Button > snapshot: 'as' prop with 'a' 1`] = `
 <a
   aria-disabled="false"
-  class="ucl-uikit-button css-5txlzw"
+  class="ucl-uikit-button css-ijdex1"
   data-testid="ucl-uikit-button"
   href="https://ucl.ac.uk"
 >
@@ -34,7 +34,7 @@ exports[`Button > snapshot: 'as' prop with 'a' 1`] = `
 exports[`Button > snapshot: loading 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-736ss2"
+  class="ucl-uikit-button css-1ram5ew"
   data-testid="ucl-uikit-button"
   disabled=""
 >
@@ -67,7 +67,7 @@ exports[`Button > snapshot: loading 1`] = `
 exports[`Button > snapshot: no props 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-5vh71f"
+  class="ucl-uikit-button css-1v2bqw7"
   data-testid="ucl-uikit-button"
 />
 `;
@@ -75,7 +75,7 @@ exports[`Button > snapshot: no props 1`] = `
 exports[`Button > snapshot: testId prop 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-5vh71f"
+  class="ucl-uikit-button css-1v2bqw7"
   data-testid="test123"
 />
 `;
@@ -91,7 +91,7 @@ exports[`Button > snapshot: variant prop 1`] = `
 exports[`Button > snapshot: with icon 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-5txlzw"
+  class="ucl-uikit-button css-ijdex1"
   data-testid="ucl-uikit-button"
 >
   <svg
@@ -119,7 +119,7 @@ exports[`Button > snapshot: with icon 1`] = `
 exports[`Button > snapshot: with icon and iconPosition right 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-5txlzw"
+  class="ucl-uikit-button css-ijdex1"
   data-testid="ucl-uikit-button"
 >
   Download

package/lib/components/FeedbackDialog/FeedbackDialog.tsx

@@ -28,6 +28,8 @@ const FeedbackDialog = ({
   children,
   ...props
 }: FeedbackDialogProps) => {
+  const isText = typeof children === 'string';
+
   const [theme] = useTheme();
 
   const {
@@ -112,7 +114,11 @@ const FeedbackDialog = ({
       >
         {heading}
       </Dialog.Header>
-      <Paragraph className={textStyle}>{children}</Paragraph>
+      {isText ? (
+        <Paragraph className={textStyle}>{children}</Paragraph>
+      ) : (
+        <div className={textStyle}>{children}</div>
+      )}
       <Dialog.Footer
         className={footerStyle}
         primaryButton={buttonLabel}

package/lib/components/Input/Input.tsx

@@ -60,6 +60,7 @@ const Input = forwardRef<Ref, InputProps>(
       color: ${theme.colour.text.default};
       background-color: ${theme.colour.fill.inverse};
       border: ${theme.border.b1} solid ${theme.colour.speciality.inputDefault};
+      border-radius: ${theme.radius.r4};
       outline: none;
 
       &::placeholder {

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

@@ -5,7 +5,7 @@ exports[`Input > snapshot: no props 1`] = `
   class="ucl-uikit-input css-1bpb1dw"
 >
   <input
-    class="ucl-uikit-input__input css-kvsjyn"
+    class="ucl-uikit-input__input css-i99dnf"
     data-testid="ucl-uikit-input"
     id=""
   />
@@ -17,7 +17,7 @@ exports[`Input > snapshot: placeholder prop 1`] = `
   class="ucl-uikit-input css-1bpb1dw"
 >
   <input
-    class="ucl-uikit-input__input css-kvsjyn"
+    class="ucl-uikit-input__input css-i99dnf"
     data-testid="ucl-uikit-input"
     id=""
     placeholder="Type your value..."
@@ -30,7 +30,7 @@ exports[`Input > snapshot: testId prop 1`] = `
   class="ucl-uikit-input css-1bpb1dw"
 >
   <input
-    class="ucl-uikit-input__input css-kvsjyn"
+    class="ucl-uikit-input__input css-i99dnf"
     data-testid="test123"
     id=""
   />
@@ -42,7 +42,7 @@ exports[`Input > snapshot: value prop 1`] = `
   class="ucl-uikit-input css-1bpb1dw"
 >
   <input
-    class="ucl-uikit-input__input css-kvsjyn"
+    class="ucl-uikit-input__input css-i99dnf"
     data-testid="ucl-uikit-input"
     id=""
     value="abc"

package/lib/components/Paragraph/Paragraph.tsx

@@ -13,7 +13,7 @@ export type ParagraphLevel =
   | 'md'
   | 'md-medium'
   | 'md-semibold'
-  | 'md-semibold'
+  | 'md-numeric'
   | 'md-medium-numeric'
   | 'sm'
   | 'sm-medium'
@@ -57,6 +57,7 @@ const Paragraph = ({
         md,
         mdMedium,
         mdSemibold,
+        mdNumeric,
         mdMediumNumeric,
         sm,
         smMedium,
@@ -134,7 +135,17 @@ const Paragraph = ({
     line-height: ${mdSemibold.lineHeight}%;
   `;
 
+  const mdNumericStyle = css`
+    font-family: ${mdNumeric.fontFamily};
+    font-feature-settings: ${mdNumeric.fontSettings};
+    font-size: ${mdNumeric.fontSize}px;
+    font-weight: ${mdNumeric.fontWeight};
+    line-height: ${mdNumeric.lineHeight}%;
+  `;
+
   const mdMediumNumericStyle = css`
+    font-family: ${mdMediumNumeric.fontFamily};
+    font-feature-settings: ${mdMediumNumeric.fontSettings};
     font-size: ${mdMediumNumeric.fontSize}px;
     font-weight: ${mdMediumNumeric.fontWeight};
     line-height: ${mdMediumNumeric.lineHeight}%;
@@ -180,6 +191,7 @@ const Paragraph = ({
     mappedLevel === 'md' && mdStyle,
     mappedLevel === 'md-medium' && mdMediumStyle,
     mappedLevel === 'md-semibold' && mdSemiboldStyle,
+    mappedLevel === 'md-numeric' && mdNumericStyle,
     mappedLevel === 'md-medium-numeric' && mdMediumNumericStyle,
     mappedLevel === 'sm' && smStyle,
     mappedLevel === 'sm-medium' && smMediumStyle,

package/lib/components/Paragraph/__tests__/Paragraph.test.tsx

@@ -73,4 +73,28 @@ describe('Paragraph', () => {
     const paragraph = screen.getByTestId('custom-test-id');
     expect(paragraph).toBeDefined();
   });
+
+  test('md-numeric uses mono font family', () => {
+    render(
+      <ThemeContextProvider>
+        <Paragraph level='md-numeric'>0123456789</Paragraph>
+      </ThemeContextProvider>
+    );
+
+    expect(document.head.textContent).toContain(
+      'font-family:DM Mono;font-size:16px;font-weight:400;line-height:150%;'
+    );
+  });
+
+  test('md-medium-numeric uses mono font family', () => {
+    render(
+      <ThemeContextProvider>
+        <Paragraph level='md-medium-numeric'>0123456789</Paragraph>
+      </ThemeContextProvider>
+    );
+
+    expect(document.head.textContent).toContain(
+      'font-family:DM Mono;font-size:16px;font-weight:450;line-height:150%;'
+    );
+  });
 });

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

@@ -8,7 +8,7 @@ exports[`Search > snapshot: no props 1`] = `
     class="ucl-uikit-input css-1bpb1dw"
   >
     <input
-      class="ucl-uikit-input__input css-r12x3w"
+      class="ucl-uikit-input__input css-q3oxlx"
       data-testid="ucl-uikit-search"
       id=""
       placeholder=""
@@ -87,7 +87,7 @@ exports[`Search > snapshot: testId prop 1`] = `
     class="ucl-uikit-input css-1bpb1dw"
   >
     <input
-      class="ucl-uikit-input__input css-r12x3w"
+      class="ucl-uikit-input__input css-q3oxlx"
       data-testid="test123"
       id=""
       placeholder=""

package/lib/components/Text/Text.tsx

@@ -12,6 +12,7 @@ export type TextLevel =
   | 'md'
   | 'md-medium'
   | 'md-semibold'
+  | 'md-numeric'
   | 'md-medium-numeric'
   | 'sm'
   | 'sm-medium'
@@ -44,6 +45,7 @@ const Text = ({
         md,
         mdMedium,
         mdSemibold,
+        mdNumeric,
         mdMediumNumeric,
         sm,
         smMedium,
@@ -103,7 +105,17 @@ const Text = ({
     line-height: ${mdSemibold.lineHeight}%;
   `;
 
+  const mdNumericStyle = css`
+    font-family: ${mdNumeric.fontFamily};
+    font-feature-settings: ${mdNumeric.fontSettings};
+    font-size: ${mdNumeric.fontSize}px;
+    font-weight: ${mdNumeric.fontWeight};
+    line-height: ${mdNumeric.lineHeight}%;
+  `;
+
   const mdMediumNumericStyle = css`
+    font-family: ${mdMediumNumeric.fontFamily};
+    font-feature-settings: ${mdMediumNumeric.fontSettings};
     font-size: ${mdMediumNumeric.fontSize}px;
     font-weight: ${mdMediumNumeric.fontWeight};
     line-height: ${mdMediumNumeric.lineHeight}%;
@@ -149,6 +161,7 @@ const Text = ({
     level === 'md' && mdStyle,
     level === 'md-medium' && mdMediumStyle,
     level === 'md-semibold' && mdSemiboldStyle,
+    level === 'md-numeric' && mdNumericStyle,
     level === 'md-medium-numeric' && mdMediumNumericStyle,
     level === 'sm' && smStyle,
     level === 'sm-medium' && smMediumStyle,

package/lib/components/Text/__tests__/Text.test.tsx

@@ -0,0 +1,41 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Text from '../Text';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+
+describe('Text', () => {
+  test('Test ID: Default', () => {
+    render(
+      <ThemeContextProvider>
+        <Text>This is a test</Text>
+      </ThemeContextProvider>
+    );
+
+    const text = screen.getByTestId('ucl-uikit-text');
+    expect(text).toBeDefined();
+  });
+
+  test('md-numeric uses mono font family', () => {
+    render(
+      <ThemeContextProvider>
+        <Text level='md-numeric'>0123456789</Text>
+      </ThemeContextProvider>
+    );
+
+    expect(document.head.textContent).toContain(
+      'font-family:DM Mono;font-size:16px;font-weight:400;line-height:150%;'
+    );
+  });
+
+  test('md-medium-numeric uses mono font family', () => {
+    render(
+      <ThemeContextProvider>
+        <Text level='md-medium-numeric'>0123456789</Text>
+      </ThemeContextProvider>
+    );
+
+    expect(document.head.textContent).toContain(
+      'font-family:DM Mono;font-size:16px;font-weight:450;line-height:150%;'
+    );
+  });
+});

package/lib/components/Textarea/Textarea.tsx

@@ -41,21 +41,20 @@ const Textarea = forwardRef<Ref, TextareaProps>(
     }, [value, setCharCount]);
 
     const baseStyle = css`
-      line-height: 150%;
       box-sizing: border-box;
       padding: ${theme.padding.p16};
       font-family: ${md.fontFamily};
       font-feature-settings: ${md.fontSettings};
       font-size: ${md.fontSize}px;
       font-weight: ${md.fontWeight};
+      line-height: ${md.lineHeight}%;
       color: ${theme.colour.text.default};
       background-color: ${theme.colour.fill.inverse};
       border: ${theme.border.b1} solid ${theme.colour.speciality.inputDefault};
+      border-radius: ${theme.radius.r4};
       outline: none;
       box-sizing: border-box;
       width: 100%;
-      min-width: 50px;
-      max-width: 660px;
       height: 106px;
       min-height: 64px;
 

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

@@ -2,7 +2,7 @@
 
 exports[`Textarea > snapshot: Disabled 1`] = `
 <textarea
-  class="ucl-uikit-textarea css-yfw4f5"
+  class="ucl-uikit-textarea css-dbajsl"
   data-testid="ucl-uikit-textarea"
   disabled=""
   id=""
@@ -11,7 +11,7 @@ exports[`Textarea > snapshot: Disabled 1`] = `
 
 exports[`Textarea > snapshot: Placeholder 1`] = `
 <textarea
-  class="ucl-uikit-textarea css-1eai1zv"
+  class="ucl-uikit-textarea css-elmoey"
   data-testid="ucl-uikit-textarea"
   id=""
   placeholder="test"
@@ -20,7 +20,7 @@ exports[`Textarea > snapshot: Placeholder 1`] = `
 
 exports[`Textarea > snapshot: custom test id 1`] = `
 <textarea
-  class="ucl-uikit-textarea css-1eai1zv"
+  class="ucl-uikit-textarea css-elmoey"
   data-testid="custom-test-id"
   id=""
 />
@@ -28,7 +28,7 @@ exports[`Textarea > snapshot: custom test id 1`] = `
 
 exports[`Textarea > snapshot: minimal props 1`] = `
 <textarea
-  class="ucl-uikit-textarea css-1eai1zv"
+  class="ucl-uikit-textarea css-elmoey"
   data-testid="ucl-uikit-textarea"
   id=""
 />