FTSE Russell Styleguide

Index Finder 

<section>
    <form class="index-finder text--center">
        <div class="form__item__wrapper form__item--inline">
            <div class="input-field">
                <input id="myInput" onkeyup="myFunction()" type="text" placeholder="Index name">
            </div>
        </div>
        <div class="form__item__wrapper form__item--inline">
            <div class="input-field">
                <input type="text" placeholder="Group">
            </div>
        </div>
        <div class="form__item__wrapper form__item--inline">
            <div class="input-field">
                <input type="text" placeholder="Region">
            </div>
        </div>
        <div class="form__item__wrapper form__item--inline">
            <div class="input-field">
                <input type="text" placeholder="Family">
            </div>
        </div>
        <div class="form__item__wrapper form__item--inline">
            <div class="input-field">
                <input type="text" placeholder="Order Number">
            </div>
        </div>
        <div class="form__item__wrapper form__item--inline">
            <div class="input-field">
                <input type="text" placeholder="L2IF">
            </div>
        </div>
    </form>
</section>

<script>
    function myFunction() {
        // Declare variables
        var input, filter, table, tr, td, i;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("myTable");
        tr = table.getElementsByTagName("tr");
        // Loop through all table rows, and hide those who don't match the search query
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[0];
            if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }
</script>

<div class="table__wrapper">
    <div class="table__title">
        <h3><span class="table__description"></span></h3>
    </div>
    <table class="table" id="myTable">
        <thead>
            <tr>
                <th class="table__cell table__header" scope="col">
                    <a href="#">
                    <span class="table__sort">
                        <svg class="icon icon-chevron-up"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-up"></use></svg>
                        <svg class="icon icon-chevron-down"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg>
                    </span>
                    <span>Name</span>
                </a>
                </th>
                <th class="table__cell table__header" scope="col">
                    <a href="#">
                    <span class="table__sort">
                        <svg class="icon icon-chevron-up"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-up"></use></svg>
                        <svg class="icon icon-chevron-down"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg>
                    </span>
                    <span>Group</span>
                </a>
                </th>
                <th class="table__cell table__header align-center" scope="col">
                    <a href="#">
                    <span class="table__sort">
                        <svg class="icon icon-chevron-up"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-up"></use></svg>
                        <svg class="icon icon-chevron-down"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg>
                    </span>
                    <span>Region</span>
                </a>
                </th>
                <th class="table__cell table__header" scope="col">
                    <a href="#">
                    <span class="table__sort">
                        <svg class="icon icon-chevron-up"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-up"></use></svg>
                        <svg class="icon icon-chevron-down"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg>
                    </span>
                    <span>Family</span>
                </a>
                </th>
                <th class="table__cell table__header align-center" scope="col">
                    <a href="#">
                    <span class="table__sort">
                        <svg class="icon icon-chevron-up"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-up"></use></svg>
                        <svg class="icon icon-chevron-down"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg>
                    </span>
                    <span>OrderNumber</span>
                </a>
                </th>
                <th class="table__cell table__header" scope="col">
                    <a href="#">
                    <span class="table__sort">
                        <svg class="icon icon-chevron-up"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-up"></use></svg>
                        <svg class="icon icon-chevron-down"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg>
                    </span>
                    <span>L2IF</span>
                </a>
                </th>
                <th class="table__cell table__header" scope="col">
                    <a href="#">
                    <span>Action</span>
                </a>
                </th>
            </tr>
        </thead>
        <tbody>

            <tr class="table__row">
                <td class="table__cell">Global Bonds</td>
                <td class="table__cell">Fixed Income</td>
                <td class="table__cell align-center">Global</td>
                <td class="table__cell">Global Bonds</td>
                <td class="table__cell align-center">400</td>
                <td class="table__cell"></td>
                <td class="table__cell"><a href="http://www.ftse.com/products/indices/Global-Bonds">Visit Index</a></td>
            </tr>

            <tr class="table__row">
                <td class="table__cell">Actuaries UK Gilts</td>
                <td class="table__cell">Fixed Income</td>
                <td class="table__cell align-center">EMEA</td>
                <td class="table__cell">Actuaries UK Gilts</td>
                <td class="table__cell align-center">300</td>
                <td class="table__cell"></td>
                <td class="table__cell"><a href="http://www.ftse.com/products/indices/Gilts">Visit Index</a></td>
            </tr>

            <tr class="table__row">
                <td class="table__cell">ORB</td>
                <td class="table__cell">Fixed Income</td>
                <td class="table__cell align-center">EMEA</td>
                <td class="table__cell">ORB</td>
                <td class="table__cell align-center">200</td>
                <td class="table__cell"></td>
                <td class="table__cell"><a href="http://www.ftse.com/products/indices/ORB">Visit Index</a></td>
            </tr>

            <tr class="table__row">
                <td class="table__cell">FTSE MTS</td>
                <td class="table__cell">Fixed Income</td>
                <td class="table__cell align-center">EMEA</td>
                <td class="table__cell">FTSE MTS</td>
                <td class="table__cell align-center"></td>
                <td class="table__cell"></td>
                <td class="table__cell"><a href="http://www.ftse.com/products/indices/ftsemts">Visit Index</a></td>
            </tr>

            <tr class="table__row">
                <td class="table__cell">NSE KES Government Bond</td>
                <td class="table__cell">Fixed Income</td>
                <td class="table__cell align-center">EMEA</td>
                <td class="table__cell">NSE KES Government Bond</td>
                <td class="table__cell align-center"></td>
                <td class="table__cell"></td>
                <td class="table__cell"><a href="http://www.ftse.com/products/indices/NSE-KES-Bond">Visit Index</a></td>
            </tr>

            <tr class="table__row">
                <td class="table__cell">FTSE TMX</td>
                <td class="table__cell">Fixed Income</td>
                <td class="table__cell align-center">Americas</td>
                <td class="table__cell">FTSE TMX</td>
                <td class="table__cell align-center"></td>
                <td class="table__cell">Standard</td>
                <td class="table__cell"><a href="http://www.ftse.com/Products/FTSETMX">Visit Index</a></td>
            </tr>

            <tr class="table__row">
                <td class="table__cell">BOCHK Offshore RMB Bond</td>
                <td class="table__cell">Fixed Income</td>
                <td class="table__cell align-center">Asia Pacific</td>
                <td class="table__cell">BOCHK Offshore RMB Bond</td>
                <td class="table__cell align-center">100</td>
                <td class="table__cell"></td>
                <td class="table__cell"><a href="http://www.ftse.com/products/indices/BOCHKRMB">Visit Index</a></td>
            </tr>

            <tr class="table__row">
                <td class="table__cell">ASFA Australia Bond</td>
                <td class="table__cell">Fixed Income</td>
                <td class="table__cell align-center">Asia Pacific</td>
                <td class="table__cell">ASFA Australia Bond</td>
                <td class="table__cell align-center"></td>
                <td class="table__cell"></td>
                <td class="table__cell"><a href="http://www.ftse.com/products/indices/asfa-bond">Visit Index</a></td>
            </tr>

            <tr class="table__row">
                <td class="table__cell">China Onshore Bond</td>
                <td class="table__cell">Fixed Income</td>
                <td class="table__cell align-center">Asia Pacific</td>
                <td class="table__cell">China Onshore Bond</td>
                <td class="table__cell align-center"></td>
                <td class="table__cell"></td>
                <td class="table__cell"><a href="http://www.ftse.com/products/indices/China-RMB-Onshore">Visit Index</a></td>
            </tr>

            <tr class="table__row">
                <td class="table__cell">SBI Bond Index Series</td>
                <td class="table__cell">Fixed Income</td>
                <td class="table__cell align-center">Asia Pacific</td>
                <td class="table__cell">SBI Bond Index Series</td>
                <td class="table__cell align-center"></td>
                <td class="table__cell"></td>
                <td class="table__cell"><a href="http://www.ftse.com/products/indices/SBI-Bond">Visit Index</a></td>
            </tr>

        </tbody>
    </table>
</div>
 
<section>
    <form class="index-finder text--center">
        <div class="form__item__wrapper form__item--inline">
            <div class="input-field">
                <input id="myInput" onkeyup="myFunction()" type="text" placeholder="Index name">
            </div>
        </div>
        <div class="form__item__wrapper form__item--inline">
            <div class="input-field">
                <input type="text" placeholder="Group">
            </div>
        </div>
        <div class="form__item__wrapper form__item--inline">
            <div class="input-field">
                <input type="text" placeholder="Region">
            </div>
        </div>
        <div class="form__item__wrapper form__item--inline">
            <div class="input-field">
                <input type="text" placeholder="Family">
            </div>
        </div>
        <div class="form__item__wrapper form__item--inline">
            <div class="input-field">
                <input type="text" placeholder="Order Number">
            </div>
        </div>
        <div class="form__item__wrapper form__item--inline">
            <div class="input-field">
                <input type="text" placeholder="L2IF">
            </div>
        </div>
    </form>
</section>

<script>
    function myFunction() {
        // Declare variables
        var input, filter, table, tr, td, i;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("myTable");
        tr = table.getElementsByTagName("tr");

        // Loop through all table rows, and hide those who don't match the search query
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[0];
            if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }
</script>

<div class="table__wrapper">
    <div class="table__title"><h3><span class="table__description"></span></h3></div>
    <table class="table" id="myTable">
        <thead>
        <tr>
            <th class="table__cell table__header" scope="col">
                <a href="#">
                    <span class="table__sort">
                        <svg class="icon icon-chevron-up"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-up"></use></svg>
                        <svg class="icon icon-chevron-down{% if header.active %} active{% endif %}"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg>
                    </span>
                    <span>Name</span>
                </a>
            </th>
            <th class="table__cell table__header" scope="col">
                <a href="#">
                    <span class="table__sort">
                        <svg class="icon icon-chevron-up"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-up"></use></svg>
                        <svg class="icon icon-chevron-down{% if header.active %} active{% endif %}"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg>
                    </span>
                    <span>Group</span>
                </a>
            </th>
            <th class="table__cell table__header align-center" scope="col">
                <a href="#">
                    <span class="table__sort">
                        <svg class="icon icon-chevron-up"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-up"></use></svg>
                        <svg class="icon icon-chevron-down{% if header.active %} active{% endif %}"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg>
                    </span>
                    <span>Region</span>
                </a>
            </th>
            <th class="table__cell table__header" scope="col">
                <a href="#">
                    <span class="table__sort">
                        <svg class="icon icon-chevron-up"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-up"></use></svg>
                        <svg class="icon icon-chevron-down{% if header.active %} active{% endif %}"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg>
                    </span>
                    <span>Family</span>
                </a>
            </th>
            <th class="table__cell table__header align-center" scope="col">
                <a href="#">
                    <span class="table__sort">
                        <svg class="icon icon-chevron-up"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-up"></use></svg>
                        <svg class="icon icon-chevron-down{% if header.active %} active{% endif %}"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg>
                    </span>
                    <span>OrderNumber</span>
                </a>
            </th>
            <th class="table__cell table__header" scope="col">
                <a href="#">
                    <span class="table__sort">
                        <svg class="icon icon-chevron-up"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-up"></use></svg>
                        <svg class="icon icon-chevron-down{% if header.active %} active{% endif %}"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg>
                    </span>
                    <span>L2IF</span>
                </a>
            </th>
            <th class="table__cell table__header" scope="col">
                <a href="#">
                    <span>Action</span>
                </a>
            </th>
        </tr>
        </thead>
        <tbody>
        {% for fmly_group in fmly_Groups %}
            {% for fmly_region in fmly_group.fmly_Regions %}
                {% for index in fmly_region.fmly_Currency %}
                    <tr class="table__row">
                        <td class="table__cell">{{ index.DisplayName }}</td>
                        <td class="table__cell">{{ index.MainGroup }}</td>
                        <td class="table__cell align-center">{{ index.Region }}</td>
                        <td class="table__cell">{{ index.FamilyName }}</td>
                        <td class="table__cell align-center">{{ index.OrderNumber }}</td>
                        <td class="table__cell">{{ index.Level2IndexFlavour }}</td>
                        <td class="table__cell"><a href="{{index.FamilyURL}}">Visit Index</a></td>
                    </tr>
                {% endfor %}
            {% endfor %}
        {% endfor %}
        </tbody>
    </table>
</div>
 
{
  "fmly_Groups": [
    {
      "fmly_Regions": [
        {
          "fmly_Currency": [
            {
              "OrderNumber": 400,
              "FamilyName": "Global Bonds",
              "FamilyURL": "http://www.ftse.com/products/indices/Global-Bonds",
              "Region": "Global",
              "MainGroup": "Fixed Income",
              "Country": null,
              "Level2IndexFlavour": null,
              "DisplayName": "Global Bonds"
            }
          ],
          "Region": "Global"
        },
        {
          "fmly_Currency": [
            {
              "OrderNumber": 300,
              "FamilyName": "Actuaries UK Gilts",
              "FamilyURL": "http://www.ftse.com/products/indices/Gilts",
              "Region": "EMEA",
              "MainGroup": "Fixed Income",
              "Country": null,
              "Level2IndexFlavour": null,
              "DisplayName": "Actuaries UK Gilts"
            },
            {
              "OrderNumber": 200,
              "FamilyName": "ORB",
              "FamilyURL": "http://www.ftse.com/products/indices/ORB",
              "Region": "EMEA",
              "MainGroup": "Fixed Income",
              "Country": null,
              "Level2IndexFlavour": null,
              "DisplayName": "ORB"
            },
            {
              "OrderNumber": null,
              "FamilyName": "FTSE MTS",
              "FamilyURL": "http://www.ftse.com/products/indices/ftsemts",
              "Region": "EMEA",
              "MainGroup": "Fixed Income",
              "Country": null,
              "Level2IndexFlavour": null,
              "DisplayName": "FTSE MTS"
            },
            {
              "OrderNumber": null,
              "FamilyName": "NSE KES Government Bond",
              "FamilyURL": "http://www.ftse.com/products/indices/NSE-KES-Bond",
              "Region": "EMEA",
              "MainGroup": "Fixed Income",
              "Country": null,
              "Level2IndexFlavour": null,
              "DisplayName": "NSE KES Government Bond"
            }
          ],
          "Region": "EMEA"
        },
        {
          "fmly_Currency": [
            {
              "OrderNumber": null,
              "FamilyName": "FTSE TMX",
              "FamilyURL": "http://www.ftse.com/Products/FTSETMX",
              "Region": "Americas",
              "MainGroup": "Fixed Income",
              "Country": null,
              "Level2IndexFlavour": "Standard",
              "DisplayName": "FTSE TMX"
            }
          ],
          "Region": "Americas"
        },
        {
          "fmly_Currency": [
            {
              "OrderNumber": 100,
              "FamilyName": "BOCHK Offshore RMB Bond",
              "FamilyURL": "http://www.ftse.com/products/indices/BOCHKRMB",
              "Region": "Asia Pacific",
              "MainGroup": "Fixed Income",
              "Country": null,
              "Level2IndexFlavour": null,
              "DisplayName": "BOCHK Offshore RMB Bond"
            },
            {
              "OrderNumber": null,
              "FamilyName": "ASFA Australia Bond",
              "FamilyURL": "http://www.ftse.com/products/indices/asfa-bond",
              "Region": "Asia Pacific",
              "MainGroup": "Fixed Income",
              "Country": null,
              "Level2IndexFlavour": null,
              "DisplayName": "ASFA Australia Bond"
            },
            {
              "OrderNumber": null,
              "FamilyName": "China Onshore Bond",
              "FamilyURL": "http://www.ftse.com/products/indices/China-RMB-Onshore",
              "Region": "Asia Pacific",
              "MainGroup": "Fixed Income",
              "Country": null,
              "Level2IndexFlavour": null,
              "DisplayName": "China Onshore Bond"
            },
            {
              "OrderNumber": null,
              "FamilyName": "SBI Bond Index Series",
              "FamilyURL": "http://www.ftse.com/products/indices/SBI-Bond",
              "Region": "Asia Pacific",
              "MainGroup": "Fixed Income",
              "Country": null,
              "Level2IndexFlavour": null,
              "DisplayName": "SBI Bond Index Series"
            }
          ],
          "Region": "Asia Pacific"
        }
      ],
      "MainGroup": "Fixed Income",
      "MainGroupID": "Fixed_Income",
      "OrderPriority": 600
    }
  ]
}
  • Content: 
    .index-finder {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;

  & > div {
    flex-basis: 50%;

    @include mq($breakpoint-lg) {
      flex-basis: auto;

      input {
        min-width: 167px;
      }
    }
  }

  &.one-col {
    & > div {
      @include mq-only($breakpoint-mob) {
        flex-basis: 100%;
      }

      .input-field > span {
        @include mq($breakpoint-lg) {
          line-height: 49px;
        }
      }
    }
  }

  .select-wrapper .caret {
    display: block;
  }

  .select-wrapper input.select-dropdown {
    @include mq-only($breakpoint-mob) {
      width: 100% !important;
    }
  }

  mz-select-container .input-field {
    margin: 0;
  }

  .select-wrapper .caret {
    display: none;
  }

  .select-wrapper::after {
    border: 5px solid transparent;
    border-top: 5px solid #696d6f;
    border-bottom: 0;
    content: '';
    display: inline-flex;
    height: 0;
    margin-left: 0.5rem;
    position: absolute;
    right: 0;
    top: calc(50% - 3px);
    width: 0;
  }

  .dropdown-content {
    min-width: 220px;
  }
}
  • URL: /components/raw/index_finder/index_finder.scss
  • Filesystem Path: src/components/organisms/indexes/index_finder/index_finder.scss
  • Size: 1.1 KB

There are no notes for this item.