import { Meta, Preview, Story } from '@storybook/addon-docs/blocks';
import hbs from 'htmlbars-inline-precompile';

<Meta title="Components/Organisms/Footer" />


# Footers

Footers live at the bottom of every webpage and contain the global navigation, brand and legal information, secondary links, CTAs, and smaller molecules. These page components are important for navigation, giving users a clear list of options when they reach the bottom of the page.

  

## What’s Inside
Radial’s default footer includes placeholders for branding, a brief description, primary/secondary navigation, and social links. It also contains two areas for additional components to be dropped in as needed. 

At a minimum, a footer should contain top-level navigational links in parity with the Site Header. A footer should also always include branding of the respective brand in the "Brand Placeholder" area.
&nbsp;

 <img alt="footer anatomy" src="./images/Organisms-Footer-Anatomy.png" width="800" />


1- **Brand Placeholder** - Placeholder for logo of respective brand. This is required.

2- **Property Description** - Short description of the site and/or brand/organization. This is required.

3- **Primary Navigation** - Top-level links to inner site pages or important areas of the site. Also called "Global Navigation." Use this area for required site links such as About or Sponsorship before using the Secondary Navigation. This is required. 

4- **Vertical Component Area** - Flexible area for interactive components, such as buttons or form fields, can be optionally included in the footer depending on site goals. This is optional.

5- **Copyright Text, Attribution, and Legal Links** - Placeholder area for copyright and legal links (ex: © 2020 New York Public Radio). This is required and will flex to include links to required broadcast policies when applicable.

6- **NYPR Brand Roll** - Standardized copy and list with links to all NYPR properties; a requirement for Comscore audience counting. This is required.

7- **Horizontal Component Area** - Another flexible area for custom components to be dropped in as needed. (ex: Sign Up Form, Search, Donate Button, etc). This is optional.

8- **Social Links** - Link off to a brand's social media accounts. This is required.

9- **Secondary Navigation** - Additional links to inner site pages or lower-level areas of the site as needed, includes optional subheaders. This area can be used as a traditional sitemap, or to expose underlying topics or offerings which are not obvious at the global-navigation level. This is optional.



  ## Legal Requirements
  
As well as holding links and information, footers are a designated area for legal information such as  copyright, attribution, and terms of use links. The items below are **REQUIRED** to be in a footer, with some items specific to broadcasting.

### Copyright text 
Copyright for the current year; used to notify and deter infringements of NYPR’s content and brand copyrights.
    
Must include:

-   Copyright symbol ©, or the words "Copyright" or "Copr."
    
-   Year of publication of the site
    
-   Name of the copyright owner
    

-   E.g., “© 2020 New York Public Radio. All Rights Reserved.”
    

### Terms of Use link 
    
Link to NYPR’s terms of use: one of the two following links, which are maintained and updated by legal.
    
-   E.g., [https://www.wqxr.org/terms/](https://www.wqxr.org/terms/) or [https://www.wnyc.org/terms/](https://www.wnyc.org/terms/)
    

### Privacy link 
    
Link to NYPR’s privacy policy: one of the two following links, which are maintained and updated by legal.
    
-   E.g., [https://www.wnyc.org/privacy/](https://www.wnyc.org/privacy/) or [https://www.wqxr.org/privacy/](https://www.wqxr.org/privacy/)
   
### Underwriter Attribution text and link(s) 
    
Must be linked to for sites that are underwritten or sponsored by a third party, per terms of underwriting agreements
    
-   E.g., “WQXR is supported by JLGreene”, with JLGreene logo linking to their website

### EEO Report link 
    
Sites that include broadcast content from the following stations must link to the NYPR’s EEO public file report. The inclusion of the link should be based on the ratio of broadcast content to other content, and made on a case-by-case basis with guidance from legal. **This requirement is specific to our broadcast-based sites and apps.**
    
-   WNYC Radio (WNYC-AM, WNYC-FM)
    
-   WQXR Radio (WQXR-FM, WQXW-FM)
    
-   New Jersey Public Radio (WNJP-FM, WNJY-FM, WNJT-FM, WNJO-FM)
    
-   E.g., [https://media.wnyc.org/media/resources/2020/Jan/30/fcc_eeo_public_file_report.pdf](https://media.wnyc.org/media/resources/2020/Jan/30/fcc_eeo_public_file_report.pdf)
    

### FCC Public File link 
    
Sites that include broadcast content from the following stations must link to the relevant FCC public file. The inclusion of the link should be based on the ratio of broadcast content to other content, and made on a case-by-case basis with guidance from legal. **This requirement is specific to our broadcast-based sites and apps.**
    
-   WNYC Radio (WNYC-AM, WNYC-FM)
    

-   WQXR Radio (WQXR-FM, WQXW-FM)
    
-   New Jersey Public Radio (WNJP-FM, WNJY-FM, WNJT-FM, WNJO-FM)
    

E.g., [https://publicfiles.fcc.gov/fm-profile/wqxr-fm](https://publicfiles.fcc.gov/fm-profile/wqxr-fm)

  ## Suggested Primary and Secondary Navigation Links
  
While footers can serve up an entire site map of links for navigation, secondary content might be of interest to the user as well. Below are some requirements and suggestions for primary and secondary navigational content.

### About Us link(s)

Link to information about the site and brand/organization. This is required for SEO and Google Ad Words campaigns.
    
-   E.g., [https://www.wqxr.org/about/](https://www.wqxr.org/about/)
    
### Support Us link(s)
    
Link to information about ways to support the brand/organization, such as legacy giving programs, patron programs, etc. This is required.
    
-   E.g., [https://www.wqxr.org/support/](https://www.wqxr.org/support/), [https://nypublicradio.zendesk.com/hc/en-us](https://nypublicradio.zendesk.com/hc/en-us)
    

### Sponsorship link(s)
    
Link to information about how sponsors can advertise on the site, including offerings and how to get in touch. This is required.
    
-   E.g., [https://sponsorship.wnyc.org/](https://sponsorship.wnyc.org/)


### Contact Us link(s)
Link to information about how to get in contact and submit feedback to the brand/organization. Can link to standalone page with this information or brand’s Zendesk page. This is required.
-   E.g., https://gothamist.com/contact, https://wqxr.zendesk.com/hc/en-us
    

### FAQs link (Opt.)
    
Link to Frequently Asked Questions about the site/brand/organization, which helps to reduce inbound requests to support and increases trust in the site. This is optional.
        

### Career Page links (Opt.)
   
Link to information about working for the brand/organization or a list of open positions. This is optional.
    
- E.g., [https://www.wnyc.org/careers](https://www.wnyc.org/careers), [http://jobs.jobvite.com/newyork-public-radio](http://jobs.jobvite.com/newyork-public-radio)



 ## Configurations

Much like our other larger organisms, sections of the footer component can be turned on and off to suit the needs of a brand. Two areas for additional components provide further flexibility. Below are some examples of footer configurations done by toggling molecules off and on.

<Preview withToolbar={true}>
  <Story name="Footer Config 1" height="850px">{{
    template: hbs`
          <Footer @site="wnyc" as |footer|>
            <footer.logo>
              <Icon @icon='wnyc/logo' @title='logo' />
            </footer.logo>
          
            <footer.slogan>
              <p>
                Listener-supported WNYC is the home for independent journalism and courageous conversation on air and online. Broadcasting live from New York City on 93.9 FM and AM 820 and available online and on the go.
              </p>
            </footer.slogan>
          
            <footer.social>
              <NyprMShareTools @label='Social text here!' as |share|>
                <share.link @service='facebook' @username='WNYC'/>
                <share.link @service='twitter' @username='WNYC' />
                <share.link @service='instagram' @username='WNYC' />
              </NyprMShareTools>
            </footer.social>
            
            <footer.leftComponent>
              <p class="u-space--double--top"><em>slot for component</em></p>
            </footer.leftComponent>
            
            <footer.rightComponent>
              <p class="u-space--double--bottom"><em>slot for component</em></p>
            </footer.rightComponent>
          
            <footer.primaryNav @navItems={{primaryNav}}/>
            <footer.secondaryNav @subheader="Subheader 1" @navItems={{secondaryNav}}/>
            <footer.tertiaryNav @subheader="Subheader 2" @navItems={{tertiaryNav}}/>
          
          </Footer>`,
    context: { 
      primaryNav: [
        {
          route: ['index'],
          text: 'Primary Link 1',
        },
        {
          route: ['index'],
          text: 'Primary Link 2',
        },
        {
          route: ['index'],
          text: 'Primary Link 3',
        }
      ],
      secondaryNav: [
        {
         route: ['index'],
         text: 'Secondary Link 1',
        },
        {
         route: ['index'],
         text: 'Secondary Link 2',
        },
        {
         route: ['index'],
         text: 'Secondary Link 3',
        }
      ],
      tertiaryNav: [
        {
         route: ['index'],
         text: 'Tertiary Link 1',
        },
        {
         route: ['index'],
         text: 'Tertiary Link 2',
        },
        {
         route: ['index'],
         text: 'Tertiary Link 3',
        }
      ]
    }
  }}</Story>
</Preview>

<Preview withToolbar={true}>
  <Story name="Footer Config 2" height="800px">{{
    template: hbs`
          <Footer @site="wnyc" as |footer|>
            <footer.logo>
              <Icon @icon='wnyc/logo' @title='logo' />
            </footer.logo>
          
            <footer.slogan>
              <p>
                Listener-supported WNYC is the home for independent journalism and courageous conversation on air and online. Broadcasting live from New York City on 93.9 FM and AM 820 and available online and on the go.
              </p>
            </footer.slogan>
          
            <footer.secondaryNav @subheader="Subheader 1" @navItems={{secondaryNav}}/>
          
          </Footer>`,
    context: { 
      primaryNav: [
        {
          route: ['index'],
          text: 'Primary Link 1',
        },
        {
          route: ['index'],
          text: 'Primary Link 2',
        },
        {
          route: ['index'],
          text: 'Primary Link 3',
        }
      ],
      secondaryNav: [
        {
         route: ['index'],
         text: 'Secondary Link 1',
        },
        {
         route: ['index'],
         text: 'Secondary Link 2',
        },
        {
         route: ['index'],
         text: 'Secondary Link 3',
        }
      ],
      tertiaryNav: [
        {
         route: ['index'],
         text: 'Tertiary Link 1',
        },
        {
         route: ['index'],
         text: 'Tertiary Link 2',
        },
        {
         route: ['index'],
         text: 'Tertiary Link 3',
        }
      ]
    }
  }}</Story>
</Preview>

<Preview withToolbar={true}>  
  <Story name="Footer Config 3" height="800px">{{
    template: hbs`
          <Footer @site="wnyc" as |footer|>
            <footer.logo>
              <Icon @icon='wnyc/logo' @title='logo' />
            </footer.logo>
          
            <footer.slogan>
              <p>
                Listener-supported WNYC is the home for independent journalism and courageous conversation on air and online. Broadcasting live from New York City on 93.9 FM and AM 820 and available online and on the go.
              </p>
            </footer.slogan>
            
            <footer.primaryNav @navItems={{primaryNav}}/>
            
            <footer.rightComponent>
              <p><em>slot for component</em></p>
            </footer.rightComponent>
          
          </Footer>`,
    context: { 
      primaryNav: [
        {
          route: ['index'],
          text: 'Primary Link 1',
        },
        {
          route: ['index'],
          text: 'Primary Link 2',
        },
        {
          route: ['index'],
          text: 'Primary Link 3',
        }
      ],
      secondaryNav: [
        {
         route: ['index'],
         text: 'Secondary Link 1',
        },
        {
         route: ['index'],
         text: 'Secondary Link 2',
        },
        {
         route: ['index'],
         text: 'Secondary Link 3',
        }
      ],
      tertiaryNav: [
        {
         route: ['index'],
         text: 'Tertiary Link 1',
        },
        {
         route: ['index'],
         text: 'Tertiary Link 2',
        },
        {
         route: ['index'],
         text: 'Tertiary Link 3',
        }
      ]
    }
  }}</Story>
</Preview>

  ## Responsive Sizing

While the footer is always full-width, sections can condense and stack as the screen size gets narrower. Smaller breakpoints like tablet (1) and mobile (2) are separate components in our Figma library. Note that in mobile, our legal text bumps past other molecules to remain at the bottom of the footer.

 <img alt="footer sizes" src="./images/Organisms-Footer-Sizes.png" width="500" />