@biggive/components 202509250906.0.0 → 202510071230.0.0

package/dist/cjs/philco-footer.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"philco-footer.entry.cjs.js","mappings":"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","names":["h","getAssetPath","makeURL"],"sources":["src/components/philco-footer/philco-footer.scss?tag=philco-footer&encapsulation=shadow","src/components/philco-footer/philco-footer.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.footer {\n  @include philco-body-font();\n  line-height: $philco-standard-body-line-height;\n  color: $colour-philco-gray-90;\n}\n\nnav {\n  width: calc(33.3% - 20px);\n  margin: 0;\n  padding: 0;\n  .heading {\n    @include philco-heading-font();\n    @include font-size-large();\n    text-transform: uppercase;\n    border-bottom: 1px solid $colour-philco-gray-90;\n    padding-bottom: $spacer-2;\n    margin-bottom: $spacer-2;\n  }\n  ul {\n    margin: 0;\n    padding: 0;\n    li {\n      margin: 0;\n      padding: 0;\n      list-style-type: none;\n      margin-top: 15px;\n    }\n  }\n}\n\nnav ul li a {\n  color: $colour-philco-gray-90;\n  text-decoration: none;\n}\n\n.row-logo {\n  background-color: $colour-philco-white;\n  padding: 100px $spacer-6 0 $spacer-6;\n  img {\n    height: 34px;\n  }\n}\n\n.row-top {\n  background-color: $colour-philco-white;\n  // $icon-size-large happens to be approx. the UA-default top heading margin that we relied upon last.\n  padding: $icon-size-large $spacer-6 $spacer-6 $spacer-6;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n}\n\n.footer .row-bottom {\n  background-color: $colour-black;\n  color: $colour-philco-white;\n  padding: $spacer-6 $spacer-6 $spacer-3 $spacer-6;\n  border-top: 1px solid $colour-white;\n\n  .postscript-wrap {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n\n    @media screen and (max-width: $screen-tablet-max) {\n      flex-direction: column;\n    }\n  }\n\n  .nav.nav-postscript {\n    text-align: right;\n    flex-grow: 1;\n    color: $colour-philco-white;\n\n    @media screen and (max-width: $screen-tablet-max) {\n      text-align: center;\n    }\n  }\n\n  .nav-postscript li {\n    display: inline-block;\n    margin-left: 1rem;\n\n    &:first-child {\n      margin-left: 0;\n    }\n\n    @media screen and (max-width: $screen-tablet-max) {\n      display: block;\n      width: 100%;\n      margin-left: 0;\n    }\n\n    a {\n      color: $colour-philco-white;\n    }\n  }\n\n  .social-icon-wrap {\n    border-top: 1px solid $colour-white;\n    padding-top: $spacer-4;\n    margin-top: $spacer-4;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: $spacer-4;\n\n    .social-icon-item {\n      margin: 0 $spacer-3;\n    }\n  }\n\n  p {\n    text-align: center;\n  }\n}\n\n@media screen and (max-width: $screen-tablet-max) {\n  .row-logo {\n    padding: $spacer-5 $spacer-3 $spacer-3 $spacer-3;\n  }\n\n  .row-top {\n    padding: $spacer-4 $spacer-3 $spacer-3 $spacer-3;\n  }\n\n  nav {\n    width: 100%;\n    margin-right: 0;\n    margin-bottom: $spacer-4;\n  }\n}\n","import { Component, Element, getAssetPath, h, Prop } from '@stencil/core';\nimport { makeURL } from '../../util/helper-methods';\n\n/**\n * Should be contained in a `<footer/>` or similar so that the page has appropriate\n * landmarks.\n */\n@Component({\n  tag: 'philco-footer',\n  styleUrl: 'philco-footer.scss',\n  shadow: true,\n})\nexport class PhilcoFooter {\n  @Element() host: HTMLPhilcoFooterElement;\n\n  @Prop() headingLevel: 1 | 2 | 3 | 4 | 5 | 6 = 5;\n\n  @Prop() philcoUrlPrefix: string = 'https://philco.org.uk/';\n\n  private year: string = new Date().getFullYear().toString();\n\n  render() {\n    const HeadingTag = `h${this.headingLevel}`;\n\n    return (\n      <div class=\"footer\">\n        <div class=\"row row-logo\">\n          <div class=\"logo\">\n            <img src={getAssetPath('/assets/images/philco/Philcologo-black.png')} alt=\"PhilCo\" />\n          </div>\n        </div>\n\n        <div class=\"row row-top\">\n          <nav class=\"nav nav-primary\" aria-labelledby=\"footer-primary-heading\">\n            <HeadingTag class=\"heading\" id=\"footer-primary-heading\">\n              <div slot=\"nav-primary-title\">Contact</div>\n            </HeadingTag>\n            <ul slot=\"nav-primary\">\n              <li>PhilCo@biggive.org</li>\n            </ul>\n          </nav>\n\n          <nav class=\"nav nav-secondary\" aria-labelledby=\"footer-secondary-heading\">\n            <HeadingTag class=\"heading\" id=\"footer-secondary-heading\">\n              <div slot=\"nav-secondary-title\">Philco Site</div>\n            </HeadingTag>\n            <ul slot=\"nav-secondary\">\n              <li>\n                <a href={makeURL('Philco', this.philcoUrlPrefix, '/')}>Home</a>\n              </li>\n              <li>\n                <a href={makeURL('Philco', this.philcoUrlPrefix, 'why-become-a-philco')}>Why become a Philco</a>\n              </li>\n              <li>\n                <a href={makeURL('Philco', this.philcoUrlPrefix, 'sign-up')}>Sign Up</a>\n              </li>\n            </ul>\n          </nav>\n\n          <nav class=\"nav nav-tertiary\" aria-labelledby=\"footer-tertiary-heading\">\n            <HeadingTag class=\"heading\" id=\"footer-tertiary-heading\">\n              <div slot=\"nav-tertiary-title\">Guide</div>\n            </HeadingTag>\n            <ul slot=\"nav-tertiary\">\n              <li>\n                <a href=\"https://drive.google.com/file/d/1D1GnstpMKnnES1aYj05EVE9_lQtLZLwj/view\" target=\"_blank\">\n                  Download the guide\n                </a>\n              </li>\n            </ul>\n          </nav>\n        </div>\n\n        <div class=\"row row-bottom\">\n          <div class=\"postscript-wrap\">\n            <nav class=\"nav nav-postscript\" aria-label=\"Legal\">\n              <ul slot=\"nav-postscript\">\n                <li>\n                  <a href={makeURL('Philco', this.philcoUrlPrefix, 'terms-and-conditions')}>Terms and Conditions</a>\n                </li>\n                <li>\n                  <a href={makeURL('Philco', this.philcoUrlPrefix, 'privacy')}>Privacy Statement</a>\n                </li>\n                <li>\n                  <a href={makeURL('Philco', this.philcoUrlPrefix, 'privacy#cookies')}>Cookies Statement</a>\n                </li>\n              </ul>\n            </nav>\n          </div>\n          <p>&copy; 2007 – {this.year} The Big Give Trust (1136547) | Company number 07273065 | Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom</p>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/philco-main-menu.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"philco-main-menu.entry.cjs.js","mappings":"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","names":["h","Host","getAssetPath","makeURL"],"sources":["src/components/philco-main-menu/philco-main-menu.scss?tag=philco-main-menu&encapsulation=shadow","src/components/philco-main-menu/philco-main-menu.tsx"],"sourcesContent":[":host {\n  display: block !important;\n}\n\n:host(.fixed) {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 10;\n}\n\n* {\n  @include philco-body-font();\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\n\n.mobile-only {\n  display: none !important;\n}\n\n.row-top {\n  padding: $spacer-2 $spacer-4;\n  background-color: $colour-primary-blue;\n  display: flex;\n  max-height: $icon-size-large + 2 * $spacer-2;\n}\n\nnav {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: $nav-height-desktop;\n  background: $colour-philco-gray-90;\n  z-index: 99;\n  box-shadow: 0 1px 2px rgb(0 0 0 / 20%);\n\n  .navbar {\n    height: 100%;\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin: auto;\n    padding: 0 50px;\n    background-color: $colour-philco-gray-90;\n    color: $colour-philco-white;\n\n    .nav-links {\n      line-height: $nav-height-desktop;\n      height: 100%;\n\n      .sidebar-logo {\n        display: none;\n      }\n\n      .links {\n        display: flex;\n\n        li {\n          position: relative;\n          display: flex;\n          align-items: center;\n          justify-content: space-between;\n          list-style: none;\n          padding: 0 30px;\n\n          a {\n            height: 100%;\n            text-decoration: none;\n            white-space: nowrap;\n            color: $colour-philco-white;\n            font-size: 17px;\n            font-weight: 500;\n          }\n        }\n      }\n    }\n\n    .logo {\n      min-width: 10px;\n      width: 100px;\n\n      img {\n      height: 100%;\n        width: 100%;\n        object-fit: contain;\n      }\n\n      a {\n        font-size: 30px;\n        color: $colour-philco-white;\n        text-decoration: none;\n        font-weight: 600;\n        display: grid;\n\n        img {\n          height: 100%;\n          width: 100%;\n          object-fit: contain;\n        }\n      }\n    }\n\n    .bx-menu {\n      display: none;\n    }\n  }\n}\n\n@media (max-width: $screen-large) {\n  .mobile-only {\n    display: block !important;\n  }\n\n  .row-top {\n    display: none;\n  }\n\n  nav {\n    height: 60px;\n    .navbar {\n      padding: 0 25px;\n\n      .logo {\n        min-width: 100px;\n        width: 100px;\n        img {\n          height: 100%;\n          width: 100%;\n          object-fit: contain;\n        }\n      }\n\n      .bx-menu {\n        display: block;\n        font-size: 25px;\n        color: black;\n      }\n\n      .nav-links {\n        position: fixed;\n        top: 0;\n        left: -100%;\n        display: block;\n        max-width: 450px;\n        width: 100%;\n        background: $colour-philco-gray-90;\n        line-height: 40px;\n        padding: 20px;\n        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n        transition: all 0.5s ease;\n        z-index: 1000;\n        overflow-y: scroll;\n\n        .sidebar-logo {\n          display: flex;\n          align-items: center;\n          justify-content: space-between;\n\n          a {\n            display: contents;\n          }\n\n          #x {\n            margin-right: 15px;\n          }\n\n          i {\n            font-size: 25px;\n            color: black;\n          }\n        }\n\n        .links {\n          display: block;\n          margin-top: 20px;\n\n          li {\n            display: block;\n            border-bottom: 1px solid #e6e6e6;\n            padding: 0 7px 0 17px;\n\n            &.signup {\n              // 10px less on the left so that the big button's text doesn't look so misaligned from the standalone\n              // links. Extra vertical so the surrounding lines look more balanced.\n              padding: 15px 7px 12px 0;\n            }\n\n            a {\n              width: 100%;\n              display: block;\n              font-size: 15px;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  @media (max-width: 370px) {\n    nav .navbar .nav-links {\n      max-width: 100%;\n    }\n  }\n}\n\n.arrow {\n  margin-left: 5px;\n  text-align: center;\n  display: inline-block;\n  color: black;\n  transition: all 0.3s ease;\n\n  &.transform-90 {\n    transform: rotate(90deg);\n  }\n}\n","import { Component, Element, Event, EventEmitter, getAssetPath, h, Host, Method, Prop } from '@stencil/core';\nimport { makeURL } from '../../util/helper-methods';\n\n@Component({\n  tag: 'philco-main-menu',\n  styleUrl: 'philco-main-menu.scss',\n  shadow: true,\n})\nexport class PhilcoMainMenu {\n  @Element() host: HTMLPhilcoMainMenuElement;\n\n  // URL prefixes vary by environment, and components library is not best placed to know what they are, so we\n  // take them as props. But somehow on first render the prop passed in doesn't seem to be used, so the defaults\n  // below are the values currently used in our prod site. They should be replaced by other values in other\n  // environments.\n  @Prop() philcoUrlPrefix: string;\n\n  @Event({\n    eventName: 'logoutClicked',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  logoutClicked: EventEmitter<void>;\n\n  @Method()\n  async closeMobileMenuFromOutside() {\n    const mobileMenu = this.host.shadowRoot!.querySelector<HTMLElement>('.nav-links');\n    mobileMenu!.style.left = '-100%';\n  }\n\n  private openMobileMenu = () => {\n    const mobileMenu = this.host.shadowRoot!.querySelector<HTMLElement>('.nav-links');\n    mobileMenu!.style.left = '0';\n  };\n\n  private closeMobileMenu = () => {\n    const mobileMenu = this.host.shadowRoot!.querySelector<HTMLElement>('.nav-links');\n    mobileMenu!.style.left = '-100%';\n  };\n\n  componentDidLoad() {\n    this.host.classList.add('fixed');\n  }\n\n  render() {\n    const homePageLink = '/';\n\n    return (\n      <Host>\n        <nav role=\"navigation\" aria-label=\"Main Menu\">\n          <div class=\"navbar\">\n            <div class=\"logo\">\n              <a href={this.philcoUrlPrefix + homePageLink} aria-label=\"Home\">\n                <img src={getAssetPath('/assets/images/philco/Philcologo-white.png')} alt=\"PhilCo\" />\n              </a>\n            </div>\n            <biggive-misc-icon class=\"bx bx-menu\" background-colour=\"transparent\" icon-colour=\"white\" icon=\"MenuOpen\" onClick={this.openMobileMenu}></biggive-misc-icon>\n            <div class=\"nav-links\">\n              <div class=\"sidebar-logo\">\n                <a href={this.philcoUrlPrefix + homePageLink} aria-label=\"Home\"></a>\n                <biggive-misc-icon class=\"bx bx-x\" background-colour=\"transparent\" icon-colour=\"white\" icon=\"MenuClose\" onClick={this.closeMobileMenu}></biggive-misc-icon>\n              </div>\n              <div id=\"nav-primary\">\n                <ul class=\"links\" slot=\"nav-primary\">\n                  <li>\n                    <a href={makeURL('Philco', this.philcoUrlPrefix, 'why-become-a-philco')}>Why become a Philco</a>\n                  </li>\n                  <li>\n                    <a href={makeURL('Philco', this.philcoUrlPrefix, 'news')}>News</a>\n                  </li>\n                  <li class=\"signup\">\n                    <biggive-button\n                      label=\"Sign up\"\n                      site-design=\"philco\"\n                      colour-scheme=\"philco-white\"\n                      rounded={true}\n                      url={makeURL('Philco', this.philcoUrlPrefix, 'sign-up')}\n                    ></biggive-button>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}