Merge pull request #43 from ccswbs/tq-iss42

Multicolumn support for long lists and phone format fix

Author: tqureshi-uog

.changeset/pre.json

@@ -0,0 +1,13 @@
+{
+  "mode": "pre",
+  "tag": "rc",
+  "initialVersions": {
+    "@uoguelph/react-components": "1.7.1",
+    "@uoguelph/storybook": "1.0.2",
+    "@uoguelph/tailwind-theme": "1.0.2",
+    "@uoguelph/web-components": "2.0.10"
+  },
+  "changesets": [
+    "two-trams-fetch"
+  ]
+}

.changeset/two-trams-fetch.md

@@ -0,0 +1,5 @@
+---
+'@uoguelph/react-components': patch
+---
+
+Add multicolumn support for long lists and phone format fix

package-lock.json

@@ -1,5 +1,11 @@
 # @uoguelph/react-components
 
+## 1.7.2-rc.0
+
+### Patch Changes
+
+- 9a29fc9: Add multicolumn support for long lists and phone format fix
+
 ## 1.7.1
 
 ### Patch Changes

packages/react-components/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@uoguelph/react-components",
-  "version": "1.7.1",
+  "version": "1.7.2-rc.0",
   "description": "University of Guelph React Components Library",
   "type": "module",
   "scripts": {

packages/react-components/package.json

@@ -23,7 +23,7 @@ export function ContactEmail({ email, className }: ContactEmailProps) {
 
   return (
     <div className={`uofg-contact-email-container ${twMerge(container(), className)}`}>
-      <FontAwesomeIcon icon={faEnvelope} className="uofg-contact-email-icon" />
+      <FontAwesomeIcon icon={faEnvelope} className="uofg-contact-email-icon me-2" />
       <a className={`uofg-contact-email ${link()}`} href={`mailto:${email}`}>
         {email}
       </a>

packages/react-components/src/components/contact/contact-email.tsx

@@ -12,6 +12,35 @@ export type ContactPhoneProps = {
   extension?: string;
 };
 
+/**
+ * Strips all non-numeric characters from a phone number
+ * @param phoneNumber - The phone number to clean
+ * @returns The phone number with only digits
+ */
+function stripPhoneNumber(phoneNumber: string): string {
+  return phoneNumber.replace(/\D/g, '');
+}
+
+/**
+ * Formats a phone number to (XXX) XXX-XXXX format
+ * @param phoneNumber - The phone number to format
+ * @returns The formatted phone number
+ */
+function formatPhoneNumber(phoneNumber: string): string {
+  const cleaned = stripPhoneNumber(phoneNumber);
+  
+  // Handle different phone number lengths
+  if (cleaned.length === 10) {
+    return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6)}`;
+  } else if (cleaned.length === 11 && cleaned.startsWith('1')) {
+    // Remove leading 1 for North American numbers
+    return `(${cleaned.slice(1, 4)}) ${cleaned.slice(4, 7)}-${cleaned.slice(7)}`;
+  }
+  
+  // Return original if it doesn't match expected format
+  return phoneNumber;
+}
+
 /** The ContactPhone component is used to display a phone number. */
 export function ContactPhone({ number, extension, className }: ContactPhoneProps) {
   const phone = tv({
@@ -23,11 +52,14 @@ export function ContactPhone({ number, extension, className }: ContactPhoneProps
 
   const { container, link } = phone();
 
+  const cleanNumber = stripPhoneNumber(number);
+  const formattedNumber = formatPhoneNumber(number);
+
   return (
     <div className={`uofg-contact-phone-container ${twMerge(container(), className)}`}>
-      <FontAwesomeIcon icon={faPhone} className="uofg-contact-phone-icon" />
-      <a className={`uofg-contact-phone ${link()}`} href={`tel:${number}${extension ? `;${extension}` : ''}`}>
-        {number}{extension && <span className="uofg-contact-phone-extension"> - Ext. {extension}</span>}
+      <FontAwesomeIcon icon={faPhone} className="uofg-contact-phone-icon me-2" />
+      <a className={`uofg-contact-phone ${link()}`} href={`tel:${cleanNumber}${extension ? `;${extension}` : ''}`}>
+        {formattedNumber}{extension && <span className="uofg-contact-phone-extension">,  Ext. {extension}</span>}
       </a>
     </div>
   );

packages/react-components/src/components/contact/contact-phone.tsx

@@ -13,7 +13,7 @@ type ListItemProps = PropsWithChildren<
 /** A list item component. */
 export function ListItem({ className, children, ...rest }: ListItemProps) {
   return (
-    <li {...rest} className={`uofg-list-item ${twMerge('relative h-fit w-full', className)}`}>
+    <li {...rest} className={`uofg-list-item ${twMerge('relative break-inside-avoid', className)}`}>
       {children}
     </li>
   );

packages/react-components/src/components/list/list-item.tsx

@@ -34,14 +34,14 @@ export function List<T extends ListElementType = typeof defaultElement>({
   const context = useContext(ListContext);
 
   const list = tv({
-    base: 'relative flex h-fit w-full list-inside flex-col gap-2',
+    base: 'relative w-full list-outside gap-x-8 pl-6 [&:has(li:nth-child(9))]:md:columns-2 [&:has(li:nth-child(9))]:xl:columns-3 [&:has(.uofg-list)]:columns-1!',
     variants: {
       as: {
         ol: 'list-decimal',
         ul: 'list-disc',
       },
       nested: {
-        true: 'ml-4',
+        true: 'ml-4 columns-1!',
       },
       level: {
         0: '',

packages/react-components/src/components/list/list.tsx

@@ -103,3 +103,52 @@ export const NestedOrderedList: Story = {
     </List>
   ),
 };
+
+export const LongList: Story = {
+  args: {
+    as: 'ul',
+  },
+  render: ({ ...args }) => (
+    <div className="w-full">
+      <List {...args}>
+        <ListItem>Introduction to responsive design and modern web development practices</ListItem>
+        <ListItem>Understanding CSS grid systems and layout fundamentals</ListItem>
+        <ListItem>Flexbox fundamentals and practical use cases in component design</ListItem>
+        <ListItem>CSS multicolumn layout properties and browser support considerations</ListItem>
+        <ListItem>Responsive typography principles for scalable interfaces</ListItem>
+        <ListItem>Mobile-first design strategies and progressive enhancement</ListItem>
+        <ListItem>Accessibility considerations and inclusive design patterns</ListItem>
+        <ListItem>Performance optimization techniques for modern web applications</ListItem>
+        <ListItem>Cross-browser compatibility testing and fallback strategies</ListItem>
+        <ListItem>Modern CSS features and graceful degradation approaches</ListItem>
+        <ListItem>Component-based architecture and design system implementation</ListItem>
+        <ListItem>User experience best practices for responsive layouts</ListItem>
+        <ListItem>Testing methodologies for responsive components</ListItem>
+        <ListItem>Documentation strategies for component libraries</ListItem>
+        <ListItem>Version control practices for design systems</ListItem>
+      </List>
+    </div>
+  ),
+};
+
+export const LongOrderedList: Story = {
+  args: {
+    as: 'ol',
+  },
+  render: ({ ...args }) => (
+    <List {...args}>
+      <ListItem>Begin by analyzing the project requirements and scope</ListItem>
+      <ListItem>Create a detailed project timeline with milestones and deliverables</ListItem>
+      <ListItem>Set up the development environment and necessary tools</ListItem>
+      <ListItem>Design the component architecture and establish coding standards</ListItem>
+      <ListItem>Implement the core functionality with proper testing coverage</ListItem>
+      <ListItem>Conduct thorough testing across different devices and browsers</ListItem>
+      <ListItem>Optimize performance and ensure accessibility compliance</ListItem>
+      <ListItem>Document the implementation and create usage examples</ListItem>
+      <ListItem>Perform code review and address any identified issues</ListItem>
+      <ListItem>Deploy to staging environment for final validation</ListItem>
+      <ListItem>Release to production with proper monitoring in place</ListItem>
+      <ListItem>Gather feedback and plan for future iterations</ListItem>
+    </List>
+  ),
+};