DOCSEARCHbyAlgolia
Submit Docs

Recipe Design System

website·Indexed 30 days ago

https://ezcater.github.io/recipe/

A component library and design system by ezCater's DevEx team. Includes documentation for UI components such as ez-field, ez-header, and ez-carousel, along with a cookbook for common patterns like order details and lead forms. Provides guides on theming, versioning, and migration paths for versions 10 through 17.

Tokens
38.5K
Snippets
105
Records
388
Agent score
75%

What's inside Recipe

  1. Overview of EzProgress component

    The EzProgress component is used to visualize circular progress towards a percentage goal ranging from 0 to 100. It requires a value and an accessible label. If no value is provided, the component defaults to displaying --%.

  2. Overview of EzPopover

    EzPopover is a low-level building block used to create non-modal dialogs that float relative to a reference element. It is designed for building complex interactions such as context menus, custom dialogs, and information overlays. Because it is a low-level component, developers must manually ensure accessibility by handling user events, key presses, and focus management.

  4. Overview of Recipe supported themes

    As of Recipe v14, emotion themes are supported. Recipe themes extend the MUI default theme. While themes can be further extended for specific use cases, doing so is discouraged as it may complicate future upgrade paths. The following supported themes are available:

    • ezTheme: The base theme.
    • ezMarketplaceTheme: Extends ezTheme.
    • ezFulfillmentTheme: Extends ezTheme.

  5. Overview of Recipe Design System Components

    The Recipe design system provides a collection of reusable interface elements designed to ensure consistent user experiences across applications. Each component includes implementation guidance, intended usage explanations, live examples, and best practices.

  6. Overview of ezOrdering for catering sales

    ezOrdering is a specialized online ordering solution built specifically to handle the complexities of catering orders. It allows businesses to integrate a professional catering ordering experience directly onto their own websites to attract and retain catering customers.

  7. Implement the Banner component

    A Banner is used to display a prominent, succinct message with a related link or action. It is designed to be persistent and non-modal, typically placed at the top of the screen below the top navigation bar and page header. Banners should contain a single message and require a user action to be dismissed.

  8. Use EzChip for inputs, attributes, or actions

    EzChip is a compact component used to represent discrete information, such as inputs, attributes, or actions. They are typically used as a dynamic group of interactive elements to help users enter information, make selections, filter content, or trigger actions.

  9. Implement the Navigation Menu component

    The Navigation component is the primary tool for moving between application sections. It is responsive: it renders as a top-bar on small screens and a left side-bar on larger screens. For optimal structure, it should be used as a sibling to the Page and Page header components.

  10. Implement the EzCarousel component

    The EzCarousel component allows users to browse through a set of items.

    Browser Support Note: For applications requiring IE11 support, a polyfill for Element.prototype.scrollTo() is required.

  11. Use the ez-card component for content grouping

    The ez-card component is used to visually group related content on a page. A card can consist of a cover photo/preview image, a body (or multiple sections), and an optional footer.

    Best Practices:

    • Group only related content; use separate cards for unrelated items.
    • Limit to one primary call-to-action (CTA) per card.
    • Place primary CTAs at the bottom and optional actions in the top right.
    • Use Card Sections to break up complex concepts.
    • Avoid nesting cards inside other cards.
    • Use accented cards sparingly.

  12. Use the Footer component in Recipe containers

    The Footer component is used to create a footer section within a parent Recipe container component, such as a Dialog or Card. It is typically used to display related metadata (e.g., totals, contact information), links to related documents, or calls to action.

    The Footer component does not provide its own specific styling; instead, it inherits styling and positioning from its parent container according to that container's layout guidelines. Internally, it utilizes the semantic HTML <footer> element.