Commit Graph

91 Commits

Author SHA1 Message Date
gabriel-ortiz
ce77be21a4 Update error handling and clean up imports in StandardCardGroupSection and helpers
- Changed console warning to error for better visibility when no cards are provided in StandardCardGroupSection.
- Simplified imports in helpers by removing unused React types to enhance code clarity.
2026-06-08 16:53:22 -07:00
gabriel-ortiz
f1d5c05c78 Refactor StandardCard component and utility functions
- Replaced the hasChildren utility function with isEmpty for better clarity in child element checks.
- Updated SCSS styles for the StandardCard buttons to maintain consistent alignment and spacing across breakpoints.
- Removed the deprecated hasChildren function from the helpers module to streamline utility functions.
2026-06-08 16:53:22 -07:00
gabriel-ortiz
6a5f9e0db3 Add StandardCardGroupSection pattern component and related styles
- Introduced the StandardCardGroupSection component, which displays a headline, description, and a responsive grid of StandardCard components.
- Implemented SCSS styles for the StandardCardGroupSection, ensuring consistent spacing and dark mode support.
- Added utility functions for key generation and environment checks to enhance component functionality.
- Created a README file detailing usage, props, and best practices for the StandardCardGroupSection.
- Included new StandardCard component with customizable variants and button handling.
2026-06-08 16:53:22 -07:00
gabriel-ortiz
7704ef466d Refactor HeaderHeroPrimaryMedia styles and component structure
- Updated SCSS styles for improved layout and responsiveness, including adjustments to padding and margin for various breakpoints.
- Enhanced the HeaderHeroPrimaryMedia component by refining the media rendering logic and updating prop types for better type safety.
- Changed subtitle class from 'label-l' to 'body-l' for consistent styling.
- Ensured proper handling of empty values in the isEmpty utility function.
2026-06-08 16:53:09 -07:00
gabriel-ortiz
6fd5bd9b30 Add HeaderHeroPrimaryMedia component and styles
- Introduced HeaderHeroPrimaryMedia component for a responsive hero section featuring a headline, subtitle, call-to-action buttons, and media elements (images, videos, or custom React components).
- Implemented associated SCSS styles to ensure proper layout and design constraints, including aspect ratios and object-fit properties.
- Added README documentation detailing usage, props, and best practices for the component.
- Included validation for required props with console warnings for missing fields.
2026-06-08 16:53:09 -07:00
Calvin Jhunjhuwala
f5ded8eb20 fixing size on tablet for text 2026-06-08 16:52:45 -07:00
Calvin Jhunjhuwala
9f5ad3abe6 logo square grid ready for review 2026-06-08 16:52:45 -07:00
akcodez
16f606a34c Add CarouselCardList pattern component and showcase
- Introduced the CarouselCardList component for a horizontal scrolling card carousel with navigation buttons.
- Implemented responsive design for mobile, tablet, and desktop views.
- Added SCSS styles for light and dark mode support.
- Created a dedicated showcase page demonstrating the CarouselCardList features and usage examples.
- Included comprehensive documentation for props and variants.
2026-06-08 16:52:32 -07:00
Calvin Jhunjhuwala
e37dd720cd cleaning up code, consolidating and attaching the CardStat to the grid, less css 2026-06-08 16:52:19 -07:00
akcodez
86b354a77e update 2026-06-08 16:52:14 -07:00
akcodez
a985622ccb Refactor FeatureTwoColumn styles and improve button key handling
- Centralized background color variants for light and dark modes using a map structure in SCSS.
- Updated the button rendering logic to use a unique key based on link properties, enhancing performance and preventing potential key collisions.
- Improved code readability and maintainability by reducing redundancy in background color definitions.
2026-06-08 16:52:14 -07:00
akcodez
233b90979a design QA and changes with Design team 2026-06-08 16:52:14 -07:00
akcodez
cd346330a4 fix tablet 2026-06-08 16:52:14 -07:00
akcodez
f57c981ea6 Add FeatureTwoColumn pattern and button enhancements
- Introduced the FeatureTwoColumn pattern for showcasing features in a two-column layout, supporting multiple color themes and responsive design.
- Implemented button behavior based on the number of links, with configurations for 1 to 5 links.
- Added `forceColor` prop to Button component to maintain button color across light and dark themes, particularly useful for colored backgrounds.
- Updated styles and documentation for both the FeatureTwoColumn pattern and Button component to reflect new features and usage guidelines.
2026-06-08 16:52:14 -07:00
akcodez
86ba492151 design changes 2026-06-08 16:52:03 -07:00
akcodez
0896845fff Refactor CardStat component buttons and add CardStats styles
- Simplified button rendering in CardStat component by consolidating href and onClick handling.
- Introduced new styles for CardStats, including responsive design for various screen sizes and dark mode support.
- Updated SCSS imports to include CardStats styles.
2026-06-08 16:52:03 -07:00
akcodez
71910a0eac add markdoc 2026-06-08 16:52:03 -07:00
akcodez
3b982073f7 53 ---> 52 2026-06-08 16:52:03 -07:00
akcodez
da6650231e changes with design review 2026-06-08 16:52:03 -07:00
akcodez
fd6ce77da8 Add CardsFeatured pattern component and styles
- Introduced the CardsFeatured component to showcase a grid of card images with headings and descriptions.
- Implemented responsive design for mobile, tablet, and desktop views.
- Added SCSS styles for light and dark mode support.
- Created a dedicated page for the CardsFeatured pattern showcase, including design specifications and examples.
2026-06-08 16:52:03 -07:00
Calvin Jhunjhuwala
d08db388cc css clean up 2026-06-08 16:50:17 -07:00
Calvin Jhunjhuwala
3726701cd2 fixing per comments 2026-06-08 16:50:17 -07:00
Calvin Jhunjhuwala
1eb23fe2f3 fixing button spacing + image background 2026-06-08 16:50:17 -07:00
Calvin Jhunjhuwala
025b2b44bc cleaning up css 2026-06-08 16:50:17 -07:00
Calvin Jhunjhuwala
dd8e2e53fd fixing errors 2026-06-08 16:50:17 -07:00
Calvin Jhunjhuwala
46f98c8e2b updated and working showcase for call out media 2026-06-08 16:50:17 -07:00
Calvin Jhunjhuwala
c77ceaad62 adding a README 2026-06-08 16:50:17 -07:00
akcodez
b9f5ddb180 merge main in, resolve comments 2026-06-08 16:50:17 -07:00
akcodez
ef7032611b Update HeaderHeroSplitMedia styles for aspect ratio and title alignment
- Changed tablet aspect ratio from 2:1 to 16:9 for better compatibility with an 8-column grid.
- Adjusted title alignment in the title-only layout from center to top for improved visual hierarchy.
2026-06-08 16:50:16 -07:00
akcodez
b96e415b76 minor qa changes 2026-06-08 16:50:16 -07:00
akcodez
80f3b1d670 Refactor HeaderHeroSplitMedia styles for tablet and accent surfaces
- Updated spacing variables for tablet view to enhance layout consistency.
- Introduced accent-specific spacing for title and description groups on tablet and desktop.
- Adjusted margin and gap values for improved responsiveness and visual hierarchy.
2026-06-08 16:50:16 -07:00
akcodez
c69abdd963 Update HeaderHeroSplitMedia styles for improved color consistency and dark mode support
- Refactored color variables to use design tokens for better maintainability.
- Ensured consistent text colors for titles and descriptions in both light and dark modes.
- Adjusted color values for better contrast and readability across themes.
2026-06-08 16:50:16 -07:00
akcodez
8eb0b15982 Add HeaderHeroSplitMedia styles and adjust typography margins
- Introduced new styles for the HeaderHeroSplitMedia component, including layout, typography, and responsive design adjustments.
- Updated margin-bottom for paragraph and label-r elements to enhance spacing consistency.
2026-06-08 16:50:16 -07:00
gabriel-ortiz
0651e4e27e Add theme mode mixin and update CardIcon focus styles
- Introduced a new SCSS mixin for theme mode that applies styles based on light or dark themes, with validation for mode parameters.
- Updated CardIcon styles to maintain background color on focus for both light and green themes, enhancing accessibility and user experience.
- Removed unnecessary import from SmallTilesSection styles to streamline the codebase.
2026-06-08 16:49:58 -07:00
gabriel-ortiz
f0d0fee879 Add warning for empty cards in SmallTilesSection
- Implemented a console warning in the SmallTilesSection component to notify when no cards are provided, improving debugging and user feedback.
2026-06-08 16:49:58 -07:00
gabriel-ortiz
9f95c7c551 Add SmallTilesSection component and styles
- Introduced the SmallTilesSection component for displaying multiple CardIcon components in a responsive grid layout.
- Implemented SCSS styles for the SmallTilesSection, including responsive grid behavior and spacing adjustments.
- Added documentation for the SmallTilesSection component, detailing usage, props, and examples.
- Updated main stylesheet to include SmallTilesSection styles.
2026-06-08 16:49:58 -07:00
akcodez
ad01b3b689 Focus should not activate button hover - cardimage 2026-06-08 16:49:58 -07:00
akcodez
a2be74ed52 Card - image : hovering card should not activate button hover state 2026-06-08 16:49:57 -07:00
akcodez
c775e7507b fix disasbled dark mode link color 2026-06-08 16:49:57 -07:00
akcodez
efeecdcb3a Refactor button typography for responsiveness and consistency
- Updated Button component styles to use responsive typography mixins for better adaptability across devices.
- Removed redundant media queries and adjusted font sizes and line heights for both button types.
- Ensured margin resets to maintain consistent spacing in various contexts.
- Enhanced CSS for improved readability and maintainability.
2026-06-08 16:49:57 -07:00
akcodez
4b8286e510 Update CardImage and TileLogo components for improved responsiveness and layout
- Adjusted column spans in CardImage showcase to support a 4-column layout on larger screens.
- Updated TileLogo showcase to reflect changes in aspect ratios and responsive behavior, ensuring proper display across different screen sizes.
- Enhanced SCSS styles for both components to maintain consistency in appearance and functionality in light and dark themes.
- Refined documentation to clarify usage and responsive design principles for both CardImage and TileLogo components.
2026-06-08 16:49:57 -07:00
Calvin Jhunjhuwala
a659fd5fc0 working font styles and updated card grid 2026-06-08 16:49:55 -07:00
akcodez
a86ebe23d8 rename link 2026-06-08 16:49:49 -07:00
akcodez
6b8d8df946 Add link button functionality and styles
- Introduced link button support in the Button component, allowing buttons to render as anchor elements when an `href` prop is provided.
- Updated Button showcase to demonstrate link buttons for internal and external navigation.
- Enhanced Button SCSS styles to ensure proper appearance and behavior for link buttons in both light and dark themes.
- Added documentation for link button usage in the Button showcase.
2026-06-08 16:49:49 -07:00
akcodez
a869688db4 add bottom padding 2026-06-08 16:49:49 -07:00
akcodez
a512824c7d Enhance CardImage showcase with image scaling demo and responsive layout adjustments
- Added a new image scaling demonstration to the CardImage showcase, illustrating a zoom effect on hover.
- Updated layout of CardImage components to improve responsiveness, adjusting column spans for various screen sizes.
- Introduced a new image from Figma for the scaling demo and included detailed descriptions of the scaling behavior.
- Refined SCSS styles to support the new layout and ensure consistent spacing across different screen sizes.
2026-06-08 16:49:49 -07:00
akcodez
1d888dc574 Add CardImage component with showcase and documentation
- Introduced the CardImage component, a responsive card designed to display an image, title, subtitle, and call-to-action button.
- Implemented three responsive size variants (LG, MD, SM) that adapt to viewport width.
- Added interactive states including default, hover, focus, pressed, and disabled.
- Created a comprehensive showcase page demonstrating all variants and states of the CardImage component.
- Included detailed documentation covering usage examples, props API, design tokens, and accessibility features.
- Added SCSS styles for the CardImage component, ensuring compatibility with both light and dark themes.
2026-06-08 16:49:49 -07:00
akcodez
10fad3a313 Add CardIcon component with showcase and documentation
- Introduced the CardIcon component, a clickable card featuring an icon and label text, supporting two color variants (Neutral and Green) and five interaction states (Default, Hover, Focused, Pressed, Disabled).
- Implemented responsive sizing that adapts at breakpoints (SM, MD, LG).
- Created a comprehensive showcase page demonstrating all variants, states, and usage examples.
- Added detailed documentation covering usage guidelines, best practices, and API reference.
- Included SCSS styles for the CardIcon component, ensuring compatibility with both light and dark themes.
2026-06-08 16:49:49 -07:00
akcodez
aafc8a23c4 Refactor TileLogo component styles and class naming to align with BDS conventions
- Updated SCSS styles to replace 'tile-logo' namespace with 'bds-tile-logo' for consistency with the Brand Design System.
- Adjusted class names in the TileLogo component to reflect the new naming convention.
- Ensured all styles and variants (square, rectangle, neutral, green) are updated accordingly for both light and dark themes.
2026-06-08 16:49:49 -07:00
akcodez
354d0c797b Add TileLogo component with showcase and documentation
- Introduced the TileLogo component, designed for displaying brand logos with interactive states.
- Implemented two shape variants (Square and Rectangle) and two color variants (Neutral and Green), with responsive sizing.
- Created a comprehensive showcase page demonstrating all variants, states, and usage examples.
- Added detailed documentation covering usage guidelines, best practices, and API reference.
- Included SCSS styles for the TileLogo component, ensuring compatibility with both light and dark themes.
2026-06-08 16:49:49 -07:00