Skip to content

Latest commit

 

History

History
211 lines (176 loc) · 4.87 KB

README.md

File metadata and controls

211 lines (176 loc) · 4.87 KB
Raw

ASU Footer

ASU Web Standards-based implementation of global footer.

CLI Commands

# add component-footer
yarn add @asu/component-footer

# run storybook
yarn storybook

# build for production with minification
yarn build

# run tests
yarn test

How to install

  1. Either make sure you are part of the ASU github organization and follow the instructions here,or, if you already are, you can clone this repo and run yarn install and yarn build to build the package locally.

  2. yarn add @asu/component-footer

Use as a JS module in React app

Default import

    import { ASUFooter } from '@asu/component-footer@dev'

Aliased import

  import { ASUFooter as Footer } from '@asu/component-footer'

Import for use in HTML page

<html>
  <head>
    <!-- Add scripts to include react -->
    <script
      src="https://unpkg.com/react@17/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
      crossorigin
    ></script>
  </head>
  <body>
    <h1>Test</h1>
    <!-- Create target container -->
    <div id="asuFooter"></div>

    <script src="./vendor.umd.js"></script>
    <script src="./asuFooter.umd.js"></script>
    <script>
      // Setup props for footer
      var props = {
        social: {
          unitLogo: 'path/to/your/unit/logo.png',
          mediaLinks: {
            facebook: 'https://facebook.com', // link to your facebook page
            twitter: 'https://twitter.com', // link to your twitter page
            instagram: 'https://instagrampage.com', // link to your instagram page
            linkedIn: 'https://linkedin.com', // link to your linked in page
            youtube: 'https://youtube.com' // link to your youtube page
          }
        },
        contact: {
          title:
            'Complete Name of College, School or Unit Title Should Go Here',
          contactLink: '#',
          contributionLink: '#',
          columns: [
            {
              title: 'Column Two',
              links: [
                {
                  url: '#',
                  title: 'link',
                  text: 'Biological and Health Systems Computing'
                }
                // Additional links go here
              ]
            }
            // Additional columns go here
          ]
        }
      };

      AsuFooter.initASUFooter({
        targetSelector: '#asuFooter',
        props: props
      });
    </script>
  </body>
</html>

Define your footer sections. Defaults to basic footer with no arguments. Optional sections include the social and content sections.

  • Social section displays approved custom unit logo and links to social media pages. Each social media link is optional and may be ommitted. Template to build social object is as follows:
  const social = {
    unitLogo: "path/to/your/unit/logo.png",
    mediaLinks: {
      facebook: "https://facebook.com", // link to your facebook page
      twitter: "https://twitter.com", // link to your twitter page
      instagram: "https://instagrampage.com", // link to your instagram page
      linkedIn: "https://linkedin.com", // link to your linked in page
      youtube: "https://youtube.com" // link to your youtube page
    }
  }
  • Contact section displays link to your unit page and button to link to yoru unit contribution page. Contact section also allows optionally including one or multiple titled columns of links. Template to build contact object is as follows:
  const contact = {
    title: "Complete Name of College, School or Unit Title Should Go Here",
    contactLink: "#",
    contributionLink: "#",
    columns: [
    {
      title: "Column Two",
      links: [
        {
          url: "#",
          title: "link",
          text: "Biological and Health Systems Computing"
        },
        // Additional links go here
      ]
    },
    // Additional columns go here
  ]
}

Build out the component, optionally providing your sections props.

  const App = (props) => {
    return (
      <div>
        <ASUFooter social={social} contact={contact} />
      </div>
    )
  };

  export default App;

Footer properties

/**
* @param({
*   social?: Social,
*   contact: Contact
* }) props
*/

/**
* @typedef({
*   unitLogo?: string,
*   mediaLinks?: {
*     facebook?: string,
*     twitter?: string,
*     linkedIn?: string,
*     instagram?: string,
*     youtube?: string,
*   }
* }) Social;
*/

/**
* @typedef({
*   title: string,
*   contactLink: string,
*   contributionLink?: string,
*   columns?: Column[]
* }) Contact;
*/

/**
* @typedef({
*   title: string,
*   links: Link[]
* }) Column;
*/

/**
* @typedef({
*   url: string,
*   title: string,
*   text: string,
* }) Link
*/
```;