Neatly Packaged Modules

    @b2bfinance/tablo

    6.0.1 • Public • Published

    Tablo

    Storybook npm package

    Display a list of products.

    Installation

    // with npm
    npm install @b2bfinance/tablo
    
    // with yarn
    yarn add @b2bfinance/tablo

    Usage

    import React from "react";
    import ReactDOM from "react-dom";
    import { ThemeProvider } from "@material-ui/styles";
    import { EmbedWrapper, theme } from "@b2bfinance/tablo";
    
    function Tablo() {
      const noOp = () => {};
    
      return (
        <ThemeProvider theme={theme}>
          <EmbedWrapper
            products={[]}
            productsLimit={10}
            filters={[]}
            cta={"Get Deal"}
            ribbonText={"Hot"}
            onMoreDetails={noOp}
            onApply={noOp}
            onFilter={noOp}
          />
        </ThemeProvider>
      );
    }
    
    ReactDOM.render(
      <Tablo />,
      document.querySelector("#element-to-render-products-into")
    );

    Products

    Products must be an array of objects matching the Product type below.

    type Product = {
      id: String;
      issuer: String;
      title: String;
      brand: String;
      description: String;
      highlighted: Boolean;
      labels: String[];
      columns: [
        {
          label: String;
          value: String;
        }
      ];
      detailed: [
        {
          title: String;
          rows: [
            {
              label: String;
              value: String;
            }
          ];
        }
      ];
      feature_point: String;
      links: {
        apply: String;
        logo: String;
      };
      meta: {
        faded: Boolean;
        confirm: {
          description: String;
          heading: String;
        };
      };
    };

    Filters

    Filters must be an array of objects matching the Filter type below.

    type Filter = {
      title: String;
      key: String;
      multiChoice: Boolean;
      selected: String[];
      choices: [
        {
          label: String;
          value: String;
        }
      ];
    };

    Theme Options

    You can use a custom theme by creating your own MuiTheme and using that in your ThemeProvider instead of the one exported from Tablo.

    When creating your own theme there are a few Tablo specific options which must be supplied. You can see the defaults below.

    {
      "productHeadingRow": {
        "logoBorder": "#eeeeee",
        "background": "transparent",
        "backgroundMobile": "white",
        "logoBackground": "white",
        "highlightedIcon": "#ffb74d"
        "ribbonBackground": "#ffb74d",
      },
      "productWrapper": {
        "bodyBackground": "white",
        "bodyBorder": "#eeeeee",
        "moreInfoColor": "#1565c0",
        "descriptionBorder": "#eeeeee"
      },
      "productColumns": {
        "border": "#eeeeee"
      },
      "productFeaturePoint": {
        "background": "#eeeeee",
        "icon": "#f06292",
        "text": null // uses the default material text color.
      },
      "productMoreInfoHeader": {
        "headerBorder": "#eeeeee"
      },
      "productMoreInfoBody": {
        "disclaimerBackground": "#eeeeee"
      },
      "productMoreInfoFooter": {
        "border": "#eeeeee"
      }
    }
    

    Install

    npm i @b2bfinance/tablo

    DownloadsWeekly Downloads

    17

    Version

    6.0.1

    License

    MIT

    Unpacked Size

    2.27 MB

    Total Files

    53

    Last publish

    Collaborators

    • kyle_needham
    • bweston
    • legalweb-aaron