Merge branch 'main' into uc/update-phosphor-library

treely · Nov 20, 2023 · b230f07 · b230f07
2 parents 92bee69 + e2c4da2
commit b230f07
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 19 deletions.
diff --git a/src/components/BoemlyModal/BoemlyModal.stories.tsx b/src/components/BoemlyModal/BoemlyModal.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 
 import { BoemlyModal } from './BoemlyModal';
-import { useDisclosure } from '@chakra-ui/react';
+import { Flex, Heading, Text, useDisclosure } from '@chakra-ui/react';
 
 export default {
   title: 'components/BoemlyModal',
@@ -51,3 +51,18 @@ Size.args = {
   footer: <button>Button</button>,
   size: '3xl',
 };
+
+export const WithCustomTitle = Template.bind({});
+WithCustomTitle.args = {
+  title: (
+    <Flex flexDir="row">
+      <Heading color="red">Custom title</Heading>
+      <Text color="grey" size="1px">
+        -with custom subtitle
+      </Text>
+    </Flex>
+  ),
+  content: <div>Content</div>,
+  footer: <button>Button</button>,
+  size: '3xl',
+};
diff --git a/src/components/BoemlyModal/BoemlyModal.test.tsx b/src/components/BoemlyModal/BoemlyModal.test.tsx
@@ -22,7 +22,7 @@ describe('The BoemlyModal component', () => {
   it('displays the title', () => {
     setup();
 
-    expect(screen.getByText(defaultProps.title)).toBeInTheDocument();
+    expect(screen.getByText('Title')).toBeInTheDocument();
   });
 
   it('displays the content', () => {
@@ -46,6 +46,6 @@ describe('The BoemlyModal component', () => {
   it('renders without error in specific size', () => {
     setup({ size: '2xl' });
 
-    expect(screen.getByText(defaultProps.title)).toBeInTheDocument();
+    expect(screen.getByText('Title')).toBeInTheDocument();
   });
 });
diff --git a/src/components/BoemlyModal/BoemlyModal.tsx b/src/components/BoemlyModal/BoemlyModal.tsx
@@ -10,13 +10,13 @@ import {
 import React, { ReactNode } from 'react';
 
 export interface BoemlyModalProps {
-  title: string;
+  title: string | ReactNode;
   content: ReactNode;
   onClose: () => void;
   isOpen: boolean;
   trigger: ReactNode;
   footer?: ReactNode;
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | 'full';
 }
 
 export const BoemlyModal: React.FC<BoemlyModalProps> = ({

diff --git a/src/components/BoemlySteps/BoemlySteps.stories.tsx b/src/components/BoemlySteps/BoemlySteps.stories.tsx
@@ -39,3 +39,9 @@ Horizontal.args = {
   orientation: 'horizontal',
   currentStep: 2,
 };
+
+export const NotClickable = Template.bind({});
+NotClickable.args = {
+  steps: [{ text: 'Step 1' }, { text: 'Step 2' }, { text: 'Step 3' }, { text: 'Step 4' }],
+  currentStep: 2,
+};
diff --git a/src/components/BoemlySteps/BoemlySteps.tsx b/src/components/BoemlySteps/BoemlySteps.tsx
@@ -7,7 +7,7 @@ import StepDivider from './StepDivider';
 export interface BoemlyStepsProps {
   steps: {
     text: string;
-    onClick: () => void;
+    onClick?: () => void;
   }[];
   currentStep: number;
   orientation?: 'vertical' | 'horizontal';
@@ -89,7 +89,13 @@ export const BoemlySteps: React.FC<BoemlyStepsProps> = ({
         }
 
         return (
-          <Flex key={stepNum} flexDir="row" alignItems="center" cursor="pointer" onClick={onClick}>
+          <Flex
+            key={stepNum}
+            flexDir="row"
+            alignItems="center"
+            cursor={onClick ? 'pointer' : undefined}
+            onClick={onClick}
+          >
             {point}
             <Text size="smLowNormal" color="black" ml="3">
               {text}

diff --git a/src/constants/componentCustomizations.tsx b/src/constants/componentCustomizations.tsx
@@ -371,25 +371,25 @@ const inputSizes = {
   xl: {
     ...CustomizedText.sizes.mdLowNormal,
     px: '4',
-    h: '16',
+    height: '16',
     borderRadius: 'xl',
   },
   lg: {
     ...CustomizedText.sizes.smLowNormal,
     px: '4',
-    h: '12',
+    height: '12',
     borderRadius: 'lg',
   },
   md: {
     ...CustomizedText.sizes.smLowNormal,
     px: '4',
-    h: '10',
+    height: '10',
     borderRadius: 'lg',
   },
   sm: {
     ...CustomizedText.sizes.smLowNormal,
     px: '3',
-    h: '8',
+    height: '8',
     borderRadius: 'md',
   },
 };
@@ -431,26 +431,26 @@ export const CustomizedPinInput = {
   sizes: {
     xl: {
       fontSize: inputSizes.xl.fontSize,
-      w: inputSizes.xl.h,
-      h: inputSizes.xl.h,
+      w: inputSizes.xl.height,
+      h: inputSizes.xl.height,
       borderRadius: inputSizes.xl.borderRadius,
     },
     lg: {
       fontSize: inputSizes.lg.fontSize,
-      w: inputSizes.lg.h,
-      h: inputSizes.lg.h,
+      w: inputSizes.lg.height,
+      h: inputSizes.lg.height,
       borderRadius: inputSizes.lg.borderRadius,
     },
     md: {
       fontSize: inputSizes.md.fontSize,
-      w: inputSizes.md.h,
-      h: inputSizes.md.h,
+      w: inputSizes.md.height,
+      h: inputSizes.md.height,
       borderRadius: inputSizes.md.borderRadius,
     },
     sm: {
       fontSize: inputSizes.sm.fontSize,
-      w: inputSizes.sm.h,
-      h: inputSizes.sm.h,
+      w: inputSizes.sm.height,
+      h: inputSizes.sm.height,
       borderRadius: inputSizes.sm.borderRadius,
     },
   },

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,6 +1,7 @@
 {
   // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
   "include": ["src", "types"],
+  "exclude": ["**/*.stories.tsx"],
   "compilerOptions": {
     "module": "esnext",
     "lib": ["dom", "esnext"],