Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@mozilla/factor-ui

Package Overview
Dependencies
Maintainers
8
Versions
12
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@mozilla/factor-ui

Templates and components to guide internal applications designs to Mozilla

  • 1.1.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
0
decreased by-100%
Maintainers
8
Weekly downloads
 
Created
Source

Factor UI

Build Status

Project description

This will be a central repository for internally shared templates and components within Mozilla. This README will be the central location for all documentation relating to our internal components.

This project is intended to be a helpful "bootstrapped" kickstarter for all internal applications, providing out of the box internal themes and styles while allowing for flexibility to each individual application.

Travis CI

Adding a Secret

travis encrypt --add --com KEY=VALUE

Installation

Run the following command in your terminal

npm install --save @mozilla/factor-ui

Templates

Include

Include this in whichever VueJS component you wish to use the template.

In component import

<template>
  <FactorBlockTemplate>
    <div slot="nav" >
      <!-- Nav content -->
    </div>
    <div slot="profile">
      <!-- Profile content -->
    </div>
    <div slot="main">
      <!-- Main content -->
    </div>
    <div slot="footer-links">
      <!-- Links in footer content -->
    </div>
  </FactorBlockTemplate>
</template>

<script>
import { FactorBlockTemplate } from '@mozilla/factor-ui';
import '@mozilla/factor-ui/dist/lib/factor.css';

export default {
  components: {
    FactorBlockTemplate
  },
}
</script>

This works the same with each of the different templates: FactorBlockTemplate, FactorFlowTemplate, FactorNavTemplate

Api
PropertyTypeDescription
searchBarConfigObjectObject of configurations for the search bar

searchBarConfig

{
  handler: [Function] // Function for handling input submit
  onKeyUp: [Function] // Function for handling input "keyup" event
  onDropdownClicked: [Function(item)] // Function for handling when dropdown event item clicked
  onClearQuery: [Function] // Function for handling what happens when 'x' is clicked in search box
  label: [String] // String that acts like a placeholder when text is not entered in box
  value: [String] // Value that input starts out with
  suggestions: [Array({label: 'text', ...})] // List of items that would go in the suggestions list.
                                                Label is necessary for this list as it is the display text for the item.
}
Slots
NameTypeArea
logoHTML ElementUpper left logo
navHTML ElementUpper right nav area next to the profile area
profileHTML ElementUpper right profile area
mainHTML ElementAll content between header and footer
footer-linksHTML ElementList of footer links

Block template

Block Template

Flow template

Flow Template

Nav Template

Nav Template

Components

Include

Include this in whichever VueJS component you wish to use the template.

In component import

<template>
  <FactorComponent />
</template>

<script>
import { FactorComponent } from '@mozilla/factor-ui';
import '@mozilla/factor-ui/dist/lib/factor.css';

export default {
  components: {
    FactorComponent
  },
}
</script>

Components

NameDescription
FactorFooterFooter component for layout
FactorHeaderHeader component for layout
FactorIconComponent to serve up all icons in templates
FactorPanelComponent to contain any block contents in templates
FactorSearchBarComponent for search bar in header and anywhere else

Properties/Slots

FactorFooter

Slots:

  • Links:
<FactorFooter>
  <ul class="footerlinks" slot="links">
    <!-- Insert links -->
  </ul>
</FactorFooter>
FactorHeader

Properties:

NameType/DefaultDescription
hideSearchBarBoolean/falsedetermine whether to show the search bar
searchBarConfigObject/nullConfig object for FactorSearchBar
noLogoBoolean/falseDetermine whether to hide logo

Slots:

  • Logo:
<FactorHeader>
  <img class="header" slot="logo" />
</FactorHeader>
  • Nav:
<FactorHeader>
  <ul class="nav" slot="nav">
    <!-- Insert nav items -->
  </ul>
</FactorHeader>
  • Profile:
<FactorHeader>
  <div class="profile" slot="profile">
    <!-- Insert profile content -->
  </div>
</FactorHeader>
FactorIcon

Properties:

NameType/DefaultDescription
idStringName of icon to use
widthNumberThe size in width of the icon
heightNumberThe size in height of the icon
FactorPanel

Properties:

NameType/DefaultDescription
fullContentBoolean/falseDetermine whether should have inner padding
fullOnMobileBoolean/falseDetermine whether panel should be full width on mobile
titleString/''Title of panel
hideContentBoolean/falseDetermine whether to hide content inside panel

Slots:

  • Header:
<FactorPanel>
  <div class="header" slot="header">
    <!-- Insert header content -->
  </div>
</FactorPanel>
  • Content:
<FactorPanel>
  <div class="content" slot="content">
    <!-- Insert 'content' content -->
  </div>
</FactorPanel>
FactorSearchBar

Properties:

NameType/DefaultDescription
searchBarHandlerFunctionHandler for when input is submitted
searchBarLabelString/''Placeholder text for input
searchBarValueString/''Initial value for input
searchBarDropdownArray/[]]Array of drop down list items

Events:

NameDescription
keyupHandler for every "keyup" on input
clearQueryPlaceholder text for input
closeSearchBarevent on submit wihout value
search-bar-dropdown-clickedEvent when item is clicked or 'enter'ed on

Styles

Standards

This project is built in scss inside single file Vue components. The scss portions of the component import styles from /src/shard/styles. We implement the CSS naming structure: BEM (Block Element Modifier) http://getbem.com/introduction/

The way to think about how naming should be considered with BEM is consider the component block that this class is in, say nav. Then consider which specific element is being addressed, say list item. Then consider if there is some small style modification say horizontal.

In this case, we might build a css name: nav__list-item--horizontal. This is a loose structure. {block}__{element}--{modifier} are all suggested pieces.

  • {block}--{modifier}
  • {block}__{element}
  • {element}--{modifier}

These are all available methods of using the standard.

Colors

Namecode
--gray-10#f9f9fa
--gray-20#ededf0
--gray-30#d7d7db
--gray-40#b1b1b3
--gray-50#737373
--gray-60#4a4a4f
--blue-60#4a4a4f
--green-80#006504
--white#fff
--black#000
--light-red#f5d8e1
--neon-red#ff0039
--duck-egg-blue#f2fcfd
--charcoal-gray#38383d
--true-green#12bc00

Icons

Icon page: icons/README.md

Keywords

FAQs

Package last updated on 30 Jul 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc