Alpaca components for Magento 2

Table 

<div class="dashboard-table ">
    <div class="dashboard-table__header">
        <h2 class="dashboard-table__title">
            Recent Orders
        </h2>

        <a class="link dashblink dashboard-table__link" href="" title="View All">
            View All
        </a>

    </div>
    <div class="dashboard-table__content">
        <table class="table margin-0" tabindex="0" role="table">
            <caption class="table__caption">
                This is a table. Binded text in caption should explain what kind of data this table presents. Can be also a longer text with inline HTML elements inside
            </caption>
            <thead>
                <tr role="row">
                    <th class="" scope="col" role="columnheader">
                        Order #
                    </th>
                    <th class="" scope="col" role="columnheader">
                        Date
                    </th>
                    <th class="" scope="col" role="columnheader">
                        Ship To
                    </th>
                    <th class="" scope="col" role="columnheader">
                        Order
                    </th>
                    <th class="" scope="col" role="columnheader">
                        Total
                    </th>
                    <th class="" scope="col" role="columnheader">
                        Status
                    </th>
                    <th class="" scope="col" role="columnheader">
                        <span class="table__visually-hidden">
                            Action
                        </span>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr role="row">
                    <td class="" data-th="Order #:" role="gridcell">
                        000000000123
                    </td>
                    <td class="" data-th="Date:" role="gridcell">
                        6/23/12
                    </td>
                    <td class="" data-th="Ship To:" role="gridcell">
                        Store Alpaca
                    </td>
                    <td class="" data-th="Order:" role="gridcell">
                        Production Facility
                    </td>
                    <td class="" data-th="Total:" role="gridcell">
                        $ 123,12
                    </td>
                    <td class="" data-th="Status:" role="gridcell">
                        Pending
                    </td>
                    <td class="" data-th="Action:" role="gridcell">
                        <a class="link dashboard-table__link" href="#">View Order</a>
                    </td>
                </tr>
                <tr role="row">
                    <td class="" data-th="Order #:" role="gridcell">
                        000000000124
                    </td>
                    <td class="" data-th="Date:" role="gridcell">
                        8/23/12
                    </td>
                    <td class="" data-th="Ship To:" role="gridcell">
                        Store Alpaca2
                    </td>
                    <td class="" data-th="Order:" role="gridcell">
                        Production Facility
                    </td>
                    <td class="" data-th="Total:" role="gridcell">
                        $ 1232,12
                    </td>
                    <td class="" data-th="Status:" role="gridcell">
                        Pending
                    </td>
                    <td class="" data-th="Action:" role="gridcell">
                        <a class="link dashboard-table__link" href="#">View Order</a>
                    </td>
                </tr>
                <tr role="row">
                    <td class="" data-th="Order #:" role="gridcell">
                        000000000125
                    </td>
                    <td class="" data-th="Date:" role="gridcell">
                        2/23/12
                    </td>
                    <td class="" data-th="Ship To:" role="gridcell">
                        Store Alpaca3
                    </td>
                    <td class="" data-th="Order:" role="gridcell">
                        Production Facility
                    </td>
                    <td class="" data-th="Total:" role="gridcell">
                        $ 1123,12
                    </td>
                    <td class="" data-th="Status:" role="gridcell">
                        Done
                    </td>
                    <td class="" data-th="Action:" role="gridcell">
                        <a class="link dashboard-table__link" href="#">View Order</a>
                    </td>
                </tr>
            </tbody>
        </table>

    </div>
</div>
 
<div class="dashboard-table {{ class }}">
    {{#if title }}
        <div class="dashboard-table__header">
            {{ render '@heading' title }}
            {{#if link}}
                {{ render '@link' link }}
            {{/if}}
        </div>
    {{/if }}
    <div class="dashboard-table__content">
        {{ render '@table' table }}
    </div>
</div>
 
{
  "title": {
    "tag": "h2",
    "class": "dashboard-table__title",
    "text": "Recent Orders"
  },
  "link": {
    "text": "View All",
    "class": "dashblink dashboard-table__link"
  },
  "table": {
    "captionText": "This is a table. Binded text in caption should explain what kind of data this table presents. Can be also a longer text with inline HTML elements inside",
    "class": "margin-0",
    "mainTags": [
      {
        "mainTag": "thead",
        "rowTags": [
          {
            "rowTag": "tr",
            "rowTagAttributes": "role=\"row\"",
            "childTags": [
              {
                "childTag": "th",
                "childTagAttributes": "scope=\"col\" role=\"columnheader\"",
                "content": "Order #"
              },
              {
                "childTag": "th",
                "childTagAttributes": "scope=\"col\" role=\"columnheader\"",
                "content": "Date"
              },
              {
                "childTag": "th",
                "childTagAttributes": "scope=\"col\" role=\"columnheader\"",
                "content": "Ship To"
              },
              {
                "childTag": "th",
                "childTagAttributes": "scope=\"col\" role=\"columnheader\"",
                "content": "Order"
              },
              {
                "childTag": "th",
                "childTagAttributes": "scope=\"col\" role=\"columnheader\"",
                "content": "Total"
              },
              {
                "childTag": "th",
                "childTagAttributes": "scope=\"col\" role=\"columnheader\"",
                "content": "Status"
              },
              {
                "childTag": "th",
                "childTagAttributes": "scope=\"col\" role=\"columnheader\"",
                "content": "Action",
                "contentVisuallyHidden": true
              }
            ]
          }
        ]
      },
      {
        "mainTag": "tbody",
        "rowTags": [
          {
            "rowTag": "tr",
            "rowTagAttributes": "role=\"row\"",
            "childTags": [
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Order #:\" role=\"gridcell\"",
                "content": "000000000123"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Date:\" role=\"gridcell\"",
                "content": "6/23/12"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Ship To:\" role=\"gridcell\"",
                "content": "Store Alpaca"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Order:\" role=\"gridcell\"",
                "content": "Production Facility"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Total:\" role=\"gridcell\"",
                "content": "$ 123,12"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Status:\" role=\"gridcell\"",
                "content": "Pending"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Action:\" role=\"gridcell\"",
                "content": "<a class=\"link dashboard-table__link\" href=\"#\">View Order</a>"
              }
            ]
          },
          {
            "rowTag": "tr",
            "rowTagAttributes": "role=\"row\"",
            "childTags": [
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Order #:\" role=\"gridcell\"",
                "content": "000000000124"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Date:\" role=\"gridcell\"",
                "content": "8/23/12"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Ship To:\" role=\"gridcell\"",
                "content": "Store Alpaca2"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Order:\" role=\"gridcell\"",
                "content": "Production Facility"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Total:\" role=\"gridcell\"",
                "content": "$ 1232,12"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Status:\" role=\"gridcell\"",
                "content": "Pending"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Action:\" role=\"gridcell\"",
                "content": "<a class=\"link dashboard-table__link\" href=\"#\">View Order</a>"
              }
            ]
          },
          {
            "rowTag": "tr",
            "rowTagAttributes": "role=\"row\"",
            "childTags": [
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Order #:\" role=\"gridcell\"",
                "content": "000000000125"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Date:\" role=\"gridcell\"",
                "content": "2/23/12"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Ship To:\" role=\"gridcell\"",
                "content": "Store Alpaca3"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Order:\" role=\"gridcell\"",
                "content": "Production Facility"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Total:\" role=\"gridcell\"",
                "content": "$ 1123,12"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Status:\" role=\"gridcell\"",
                "content": "Done"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Action:\" role=\"gridcell\"",
                "content": "<a class=\"link dashboard-table__link\" href=\"#\">View Order</a>"
              }
            ]
          }
        ]
      }
    ]
  }
}
  • Content: 
    $dashboard-table__header-margin         : 0 0 $spacer--semi-medium !default;
$dashboard-table__header-padding        : $spacer--medium !default;
$dashboard-table__header-background     : $bg-color-secondary !default;
$dashboard-table__header-border         : $border-secondary !default;
$dashboard-table__header-border-width   : 0 0 $border-width-secondary !default;

$dashboard-table__content-margin        : 0 0 $spacer--semi-medium !default;

$dashboard-table__title-margin          : 0 $spacer--medium 0 0 !default;
$dashboard-table__title-font-family     : $font-family-base !default;
$dashboard-table__title-font-size       : $font-size-large !default;
$dashboard-table__title-font-weight     : $font-weight-bold !default;
$dashboard-table__title-text-transform  : uppercase !default;

$dashboard-table__link-font-size        : $font-size-base !default;
$dashboard-table__link-font-size\@medium: $font-size-medium !default;
$dashboard-table__link-font-weight      : $font-weight-medium !default;
$dashboard-table__text-decoration       : underline !default;

$dashboard-table__divider               : 0 $spacer;
  • URL: /components/raw/dashboard-table/_table-variables.scss
  • Filesystem Path: build/components/Organisms/dashboard/table/_table-variables.scss
  • Size: 1.1 KB
  • Content: 
    @import 'table-variables';

.dashboard-table {
    overflow: hidden;

    &__header {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: space-between;
        margin: $dashboard-table__header-margin;
        padding: $dashboard-table__header-padding;
        background: $dashboard-table__header-background;
        border: $dashboard-table__header-border;
        border-width: $dashboard-table__header-border-width;

        @include mq($screen-m) {
            flex-direction: row;
            align-items: center;
        }
    }

    &__content {
        margin: $dashboard-table__content-margin;
        overflow-x: auto;
    }

    &__title {
        margin: $dashboard-table__title-margin;
        font-family: $dashboard-table__title-font-family;
        font-size: $dashboard-table__title-font-size;
        font-weight: $dashboard-table__title-font-weight;
        text-transform: $dashboard-table__title-text-transform;
    }

    &__link {
        display: inline-flex;
        font-size: $dashboard-table__link-font-size;
        font-weight: $dashboard-table__link-font-weight;
        text-decoration: $dashboard-table__text-decoration;

        @include mq($screen-m) {
            font-size: $dashboard-table__link-font-size\@medium;
        }
    }

    &__divider {
        padding: $dashboard-table__divider;

        @include mq($screen-m) {
            padding: 0;
        }
    }
}
  • URL: /components/raw/dashboard-table/_table.scss
  • Filesystem Path: build/components/Organisms/dashboard/table/_table.scss
  • Size: 1.5 KB

No notes defined.