Commit Graph

81 Commits

Author SHA1 Message Date
Calvin
176fb3cbc7 Component Library Refactor & New Components (#3510)
* adding showcase page

* adding CardStatsList

* clean up, tighter code

* code review and code clean up

* update import, clean up env for error message

* tweak some css code

* less css, rebuilt

* re-adding bem, modifier for bds variants
2026-06-08 16:58:22 -07:00
Calvin
fe1aa0ecb1 Add CardsIconGrid and CardsTextGrid Section Patterns (#3505)
* CardsIconGrid and CardsTextGrid + showcase pages

* cleaning up code

* more code clean up

* using the spacing tokens for values
2026-06-08 16:57:29 -07:00
akcodez
8e17a5333f stashing work 2026-06-08 16:57:24 -07:00
Calvin Jhunjhuwala
0e488106ac adding TileLinks pattern, adding LinkSmallGrid 2026-06-08 16:57:16 -07:00
Calvin Jhunjhuwala
fafd859290 stylesheet clean up 2026-06-08 16:56:09 -07:00
akcodez
4a9f0d48be Add CarouselButton component and integrate into CarouselCardList and CarouselFeatured showcases
- Introduced CarouselButton component for navigation with multiple color variants (neutral, green, black).
- Enhanced CarouselCardListShowcase to include a visual showcase of CarouselButton in various states.
- Created CarouselFeatured component showcasing featured images with navigation and responsive behavior.
- Updated styles for CarouselButton and integrated it into existing patterns for improved navigation experience.
2026-06-08 16:56:03 -07:00
Calvin Jhunjhuwala
79a2a4e92b working button group, updated examples 2026-06-08 16:54:56 -07:00
akcodez
ad3941b59b Refactor TextCard component structure and styles
- Removed unnecessary wrapper elements for header and footer in TextCard, simplifying the markup.
- Updated class names in SCSS for better clarity and consistency.
- Enhanced CardsTwoColumnProps documentation to specify that description and secondaryDescription can be either string or ReactNode.
- Cleaned up CSS by removing redundant vendor prefixes for better maintainability.
2026-06-08 16:54:55 -07:00
akcodez
96341902f2 Update TextCard and CardsTwoColumn documentation to reflect new features 2026-06-08 16:54:55 -07:00
akcodez
61697b0c17 Add disabled state to TextCard component and update showcase
- Implemented a disabled state for the TextCard component, enhancing accessibility and user experience.
- Updated the CardsTwoColumnShowcase to include examples of disabled TextCards in both light and dark modes.
- Refined styles for the disabled state to ensure visual clarity and consistency across themes.
- Enhanced documentation to reflect the new disabled functionality in the TextCard component.
2026-06-08 16:54:55 -07:00
akcodez
91cdc22aad Enhance TextCard component and update CardsTwoColumn pattern
- Introduced the TextCard component with 6 color variants and interactive states, including hover and pressed effects.
- Updated CardsTwoColumn pattern to utilize the new TextCard component, showcasing all 6 color variants in a responsive layout.
- Improved documentation for both TextCard and CardsTwoColumn, detailing usage, props, and responsive behavior.
- Refactored styles to ensure consistency and maintainability across components.
2026-06-08 16:54:55 -07:00
gabriel-ortiz
deb5ad7144 Add FeaturedVideoHero pattern component with showcase and styles
- Introduced the FeaturedVideoHero component featuring a responsive layout with a headline, optional subtitle, call-to-action buttons, and a video element.
- Added associated SCSS styles for the component to ensure proper spacing and theming.
- Created a showcase page to demonstrate the usage of the FeaturedVideoHero pattern.
- Updated types to include design constraints for buttons and video elements.
- Implemented validation for required props to enhance development experience.
2026-06-08 16:54:41 -07:00
Calvin Jhunjhuwala
2a619da9df code clean up, ready for additional review 2026-06-08 16:54:36 -07:00
Calvin Jhunjhuwala
79a85ed349 cleaning up duplicate, cleaning up button group, useMemo for rectangle grid 2026-06-08 16:54:03 -07:00
gabriel-ortiz
8660860d28 Fix typo in DesignContrainedButtonProps to DesignConstrainedButtonProps across multiple components and utility files for consistency. 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
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
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
da6650231e changes with design review 2026-06-08 16:52:03 -07:00
Calvin Jhunjhuwala
3726701cd2 fixing per comments 2026-06-08 16:50:17 -07:00
akcodez
b9f5ddb180 merge main in, resolve comments 2026-06-08 16:50:17 -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
akcodez
3391f69927 Refactor CardOffgrid typography styles to utilize predefined classes
- Updated CardOffgrid component to use .subhead-lg-l and .body-l classes for title and description typography, respectively.
- Removed custom font size and line height definitions from SCSS and CSS files for improved consistency and maintainability.
- Adjusted related styles to ensure compatibility with the new typography approach.
2026-06-08 16:49:49 -07:00
akcodez
4ff7e43022 Add CardOffgrid component with showcase and documentation
- Introduced the CardOffgrid component, designed for displaying feature highlights with customizable icons, titles, and descriptions.
- Implemented two color variants: neutral and green, with interactive states and a unique hover animation.
- Created a comprehensive showcase page demonstrating all variants and states of the CardOffgrid component.
- Added detailed documentation covering usage guidelines, best practices, and API reference.
- Included SCSS styles for the CardOffgrid component, ensuring compatibility with both light and dark themes.
2026-06-08 16:49:48 -07:00
Calvin Jhunjhuwala
2836e6a3e5 minor copy change, pushiong fixed color 2026-06-08 16:49:41 -07:00
Calvin Jhunjhuwala
01b879e9f0 edits for dark mode card 2026-06-08 16:49:41 -07:00
Calvin Jhunjhuwala
9fa3c6aff4 consolidating classes, still need superscript specs 2026-06-08 16:49:41 -07:00
Calvin Jhunjhuwala
76e37d8755 working card stat, finalizing sup, cleaning up code cleanliness 2026-06-08 16:49:41 -07:00
akcodez
09626787b6 Update Divider component to replace 'black' color variant with 'base' for improved theme adaptability
- Changed all instances of 'black' to 'base' in the Divider component and its documentation to reflect the new high-contrast color that adapts to light and dark themes.
- Updated showcase page and styles to ensure consistency with the new color naming convention.
2026-06-08 16:49:41 -07:00
akcodez
53c077ec1c fix colors 2026-06-08 16:49:41 -07:00
akcodez
5e815c0541 add height 2026-06-08 16:49:41 -07:00