jepser

# Library repository
WP_SHARED_MODULES=Typeform/wp-shared-modules

# List of repositories in which you want to create a PR
REPOSITORIES=(public-website a-little-more-human helpcenter)

# Returns the name of the last tag of the repo that is being updated
get_latest_release() {
  curl --silent -u ${GH_USER}:${GH_TOKEN} "https://api.github.com/repos/$1/releases/latest" | # Get latest release from GitHub api
    grep '"tag_name":' |                                            # Get tag line

jepser

Project Title

One Paragraph of project description goes here

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Requirements

jepser

// helpers.js
/**
 * Generate a valid structure for responsive configuration for a component
 * @param {object} props props received from the component
 * @param {array} baseProps list of props to be validated
 *
 * @returns a structured object with the props for each media query
 */
export const generateResponsiveProps = (props, baseProps) => {
  // from the breakpoints registered check which props exists

jepser

import { Col } from 'super-library'
// either like this
<Col md={5} offsetMd={1} />
// or this
<Col md={{ size: 5, offset: 1 }} />

jepser

const Spacer = ({
   top, left, bottom, right, children,
}) => {
  return (
    <Root
      top={ top }
      left={ left }
      bottom={ bottom }
      right={ right }
    >

jepser

<MatchMedia query={BREAKPOINTS.md}>
 { matches => matches ? <UseThis /> : <UseOther /> }
</MatchMedia>

jepser

// for base usage
<Spacer bottom={2} left={2}>cool component here</Spacer>

// for responsive usage
<Spacer md={{ bottom: 2, left: 2 }} left={1}>cool component here</Spacer>

jepser

const Spacer = ({
  top, left, bottom, right, children, sm, md, lg, xl,
}) => {
  return (
  <Root
    top={ top }
    left={ left }
    bottom={ bottom }
    right={ right }
    sm={sm}

jepser

const Root = styled.div`
  //…
  ${mediaqueries.md`
    //specific rules for this break point
  `
`

jepser

/**
 * Generate a valid structure for responsive configuration for a component
 * @param {object} props props received from the component
 * @param {array} baseProps list of props to be validated
 *
 * @returns a structured object with the props for each media query
 */
export const generateResponsiveProps = (props, baseProps) => {
  // from the breakpoints registered check which props exists
  const shapedPropsWithMq = Object.keys(BREAKPOINTS).reduce(