The factory-archive from funkhaus

Component Request - GridFeatured - 0.5hrs

Component Description

This component is used on homepage to display BlockFeatured in alternating layout. Please build this after you have built BlockFeatured.

Design

Please also see attached screenshots for quick reference.

Email [email protected] for the design password.

Props

props: {
    items: {
        // Mock: api.pages
        type: Array,
        default: () => []
    }
}

Developer Tips

Build BlockFeatured first. Use CSS to override alignment of blocks.

Required components

List out any components that are used by this new component. For example, if you are building a grid that is made up of block components.

BlockFeatured is used for each block in the grid

Time & Budget

Time estimate: 0.5hrs
Budget: $100

Screenshots

Component Request - GalleryText - 3hrs

Component Description

Some text with logos in it. Hover on each logo brings up a cross fading slideshow of rapid images.

Note the "EXPLORE ->" hover state too.

Each logo should be wrapped in a nuxt link, linking to:

/elastic
/rock-paper-scissors
/a52
/primary
/jax
/indestructible

Design

Please also see attached screenshots for quick reference.

Desktop: https://xd.adobe.com/view/1b5027a3-98f1-48ce-7968-22ffdcb8d2fe-6d61/screen/84141268-0730-442d-b88f-96480f3fadd2/Make-Make-Landing-4

If no mobile designs provided, please use your best judgment for responsiveness.

Email [email protected] for the design password.

Props

I'd expect the text and logos to be hardcoded into this component. By it's nature, it's hard to imagine how to place the logos and have them have the slideshow hover states.

props: {
    rpsImages: {
        // Mock: api.images. An array of images used in each slideshow.
        type: Array,
        default: () => []
    },
    // And repeated for each company logo
    elasticImages = []
    primaryImages = []
    a52Images = []
    jaxImages = []
    indestructibleImages = [] 
}

Required components

SVGs for each company.
Maybe need a component for the crossfading slideshow? I'd try without it.
Each company logo is contained in a nuxt-link

Time & Budget

Time estimate: 4hrs
Budget: $400

Component Request - footerFixed- 1hrs

Component Description

This component is used as a footer. It has a few variations. It can have different text/address and social links per company, and a different logo per company.

The "Forever Linda" link can just be a placeholder URL for now, I will update with real one when we have it.

Design

Please also see attached screenshots for quick reference.

Email [email protected] for the design password.

Sample logos here:
https://www.dropbox.com/s/2uikuggsml8x3px/logo-makemake.svg?dl=0
https://www.dropbox.com/s/q18kfz723zuodob/logo-elastic.svg?dl=0

Slots

address: This will be the address in bottom left. Could be two or more.
logo: This will be an SVG of the logo used in center.

Props

menuLocation: {
    type: String,
    default: ""
}

Developer Tips

--color-company for the font color.
min-height: 400px
Background-color of --color-black.

Required components

Menu in bottom right should be a <ul> and hardcoded to placeholder URLs for now. I will replace it with a <wp-menu> component later. It will be helpful to have the CSS in place though.

Time & Budget

Time estimate: 1hrs
Budget: $100

Screenshots

Component Request - GridNews - 1hrs

Component Description

This component is used on the News landing page to display BlockNews in an alternating layout.

Design

Please also see attached screenshots for quick reference.

Email [email protected] for the design password.

Props

props: {
    items: {
        // Mock: api.pages
        type: Array,
        default: () => []
    }
}

Developer tips

Please use CSS to override the layout of each block in the gird as they alternate down the page.

Required components

BlockNews is used for the blocks

Time & Budget

Time estimate: 1hrs
Budget: $100

Screenshots

Component Request - SectionAwards - 2hrs

Component Description

This component is used on the about page to display awards. The awards numbers should count up when they become visible.

Design

Please also see attached screenshots for quick reference.

If no mobile designs provided, please use your best judgment for responsiveness.

Email [email protected] for the design password.

Note that the component is the PINK part, you do not need to add the black that is at top of component.

Props

props: {
    items: {
        // Mock: [{count: 20, title: "Cannes Lions"}, {...}, {...}]
        type: Array,
        default: () => []
    },
    title: {
          type: String,
          default: "About"
    }
}

Developer Tips

List any developer tips here

--color-pink for the background color
I'd position: absolute the awards title out from the top of the section.
Use <section> tag for outer markup. Awards should be a h2 tag.

Required components

Use this for counter: http://components.funkhaus.us/?path=/story/count-up--count-up-default
use this to trigger the count to start: http://components.funkhaus.us/?path=/docs/intersection-observer--intersection-observer-default

Time & Budget

Time estimate: 2hrs
Budget: $200

Screenshots

Component Request - SlideshowWork - 1.5hrs

Component Description

This component is used on work detail pages to display a gallery of images.

Design

Please also see attached screenshots for quick reference.

Desktop: https://xd.adobe.com/view/c0d9243f-2f1f-4b20-614b-bef83eff7c19-b6e8/screen/a7237cd8-5c8a-4c79-8933-075f30d6ba50/

If no mobile designs provided, please use your best judgment for responsiveness.

Email [email protected] for the design password.

Note that the designs show a name above and below the slideshow, that is not part of this component.

Props

props: {
    images: {
        // Mock: api.pages
        type: Array,
        default: () => []
    }
}

Developer Tips

List any developer tips here

--unit-100vh for the height of the slideshow. Give it a min-height of 300px too.
Arrows are --color-grey and then hover state on the arrows is to go --color-orange.
Pagination dots are --color-orange

Events

Arrows and pagination dots should advance slideshow, and arrow keys on keyboard. These are built into slideshow so just mentioned to test them.

Required components

List out any components that are used by this new component. For example, if you are building a grid that is made up of block components.

For the slideshow: https://github.com/funkhaus/components/blob/master/src/components/Slideshow.vue
wp-image for the images

Time & Budget

Time estimate: 1.5hrs
Budget: $150

Screenshots

Component Request - BlockNews - 1hrs

Component Description

This component is used on the News page to display recent posts. The hover state scales up the image and moves the text over the image.

Design

Please also see attached screenshots for quick reference.

Note that the layout alternates when used in a GridNews so build it with that in mind.

If no mobile designs provided, please use your best judgment for responsiveness.

Email [email protected] for the design password.

Props

props: {
    image: {
        // Mock: api.image
        type: Object,
        default: () => {}
    },
    title: {
        type: String,
        default: ""
    },
    date: {
        type: String,
        default: ""
    },
    to: {
        type: String,
        default: ""
    },
}

Developer Tips

List any developer tips here

--color-pink for the font color
Use CSS transforms for the hover state please

Required components

List out any components that are used by this new component. For example, if you are building a grid that is made up of block components.

The entire element is a nuxt-link
wp-image for the image

Time & Budget

Time estimate: 1hrs
Budget: $100

Screenshots

Component Request - GalleryList - 2.5hrs

Component Description

This component is used to display a list of names (as links) that on hover show an image. Sometimes the names are in columns, sometimes they are in a comma separated sentence.

Min-height of 75vh
When column variant, If more than 7 names, go to 2 columns, if more than 14 names, go to 3 columns.
Other variant is comma

Design

Please also see attached screenshots for quick reference.

On mobile, no hover state (so no images loaded, just link). On mobile, go to one column of names. Comma variant just wraps (see designs).

Email [email protected] for the design password.

Props

props: {
    items: {
        // Mock: api.pages (each item contains the name, and the image)
        type: Array,
        default: () => []
    },
    title: {
        // Only used on the sentence variant 
        type: String,
        default: "" 
    },
    variant: {
        type: String,
        default: "column" // Or comma
    },
    date: {
        type: String,
        default: ""
    }
}

Dev Tips

In column mode, use --color-company for the font color, other wise in comma mode use --color-black.
Add is-variant-${this.variant} as a class, and use that to style variants differently I think.

Required components

wp-image for the background hover image
The @/utils/tools.js contains a sortColumns function that might help with the names. Or CSS flexbox?

Time & Budget

Time estimate: 2hrs
Budget: $250

Component Request - BlockFeatured - 4hrs

Component Description

This component is used on all the sub-company's homepage's.

It has several variants, sometimes it has logos, credits, an image, or a date.

Note the hover state (yellow screenshot). This hover state

Design

Please also see attached screenshots for quick reference.

Email [email protected] for the design password.

Props

props: {
    image: {
        // Mock: api.image
        type: Object,
        default: () => {}
    },
    logos: {
        // Mock: api.logos
        type: Array,
        default: () => []
    },
    date: {
        type: String,
        default: ""
    },
    title: {
        type: String,
        default: ""
    },
    to: {
        type: String,
        default: ""
    },
    credits: {
        // Will be text, each credit on new line.
        type: String,
        default: ""
    },
   creditsVisible: {
        // This is used to define how many credits lines to show in the not-hovered state
        type: Number,
        default: 1    
    },
    isPost: { // Used to set the variant that has no image
        type: Boolean,
        default: false
    }
}

Required components

Entire component should be contained in a nuxt-link.
wp-image is used for the background image
Has an SVG play icon

Time & Budget

I expect this to take 4 hours to complete, and will pay $400 for it.

Component Request - BlockWork - 1hrs

Component Description

This component is used on the Work and Directory grid pages. It has a hover state that scales up the image, and moves the text over the image.

Design

Please also see attached screenshots for quick reference.

**Note that the block will need to be alternated when used in GridWork, so best to build this with that in mind. **

Note the variant without the credit prop.

If no mobile designs provided, please use your best judgment for responsiveness.

Email [email protected] for the design password.

Props

props: {
    image: {
        // Mock: api.images[0]
        type: Object,
        default: () => {}
    },
    title: {
        type: String,
        default: "" // "HP - Meant To Move"
    },
    credit: {
        type: String,
        default: "" // Optional
    },
    to: {
        type: String,
        default: ""
    }
}

Developer Tips

List any developer tips here

--color-orange for the font color

Required components

List out any components that are used by this new component. For example, if you are building a grid that is made up of block components.

The entire component should be in a nuxt-link
<split-title> for the two lines of the title
<wp-image> for the image

Time & Budget

Time estimate: 1hrs
Budget: $100

Screenshots

Component Request - SectionReps - 2hrs

Component Description

This component is used on the Contact page to give contact information.

Design

Please also see attached screenshots for quick reference.

If no mobile designs provided, please use your best judgment for responsiveness.

Email [email protected] for the design password.

Note that the component is the RED part, you do not need to add the black that is at top of component.

Props

region = {
     title: "West",
     text: "Resource LA/nOffice – 212 343 8085",
     people: {name: "Dana Balkin", email: "[email protected]"}
}

props: {
    regions: {
        type: Array,
        default: () => [{...region}, {...region}, {...region}]
    },
    title: {
          type: String,
          default: "Representation"
    }
}

Developer Tips

List any developer tips here

--color-red for the text color
I'd position: absolute the awards title out from the top of the section.
Use <section> tag for outer markup. Awards should be a h2 tag.
Probably use flex-box for the layout of this. Illustration is probably last flex-item.
Note the Funkhaus logo at bottom. That should be <a> that links to https://funkhaus.us target _blank.

Required components

SVG for illustration can be found here: https://www.dropbox.com/sh/j5ddp8f4w8l3ii3/AAAZ1BC1JIgUBC2IKikh9xD2a?dl=0

Time & Budget

Time estimate: 2hrs
Budget: $200

Screenshots

Component Request - SectionMailingList - 1.5hrs

Component Description

This component is used on the homepage and contact page to capture users email into mailchimp.

Design

Please also see attached screenshots for quick reference.

If no mobile designs provided, please use your best judgment for responsiveness.

Email [email protected] for the design password.

Developer Tips

List any developer tips here

--color-red for the font color
--color-red for the background
I will use /deep/ CSS to override the colors for the contact page variant.
Please style the success and error states to what you think looks good.

Required components

List out any components that are used by this new component. For example, if you are building a grid that is made up of block components.

Use this for the signup form: https://components.funkhaus.us/?path=/docs/mailing-list--mailing-list-default

Time & Budget

Time estimate: 1.5hrs
Budget: $150

Screenshots

Component Request - BlockFeatured - 1hrs

Component Description

This component is used on the homepage to display featured work. Hover state moves the second image up, and the primary image slightly inwards.

Design

Please also see attached screenshots for quick reference.

Email [email protected] for the design password.

Note the way the hover state slides up. Also note that when used on a page, the alignment alternates.

Props

props: {
    imagePrimary: {
        // Mock: api.images[0]
        type: Object,
        default: () => {}
    },
    imageSecondary: {
        // Mock: api.images[1]
        type: Object,
        default: () => {}
    },
    title: {
        type: String,
        default: "" // "HP - Meant To Move"
    },
    credit: {
        type: String,
        default: "" // Yoni Lappin
    },
    to: {
        type: String,
        default: ""
    }
}

Developer Tips

List any developer tips here

--color-orange for the font color
You can append by in front of the credit in code.
Use for the title.
Please use transforms for the hover state
Build this with GridFeatured in mind for alternating layout
The entire component should be in a nuxt-link

Events

Please note the hover state animation in the XD link.

Required components

List out any components that are used by this new component.

wp-image for both images. You want to use the aspectRatio prop to 56.25 for both images.
split-text for the title. Have it be a <h2> tag please.
The entire component should be in a nuxt-link

Time & Budget

Time estimate: 1hrs
Budget: $100

Screenshots

Component Request - BlockContact - 1hrs

Component Description

This component is used on the contact page to display team contact details. It changes color and rotates the images on hover.

Design

Please also see attached screenshots for quick reference.

If no mobile designs provided, please use your best judgment for responsiveness.

Email [email protected] for the design password.

Props

props: {
    name: {
        type: String,
        default: ""
    },
    title: {
        type: String,
        default: ""
    },    
    email: {
        type: String,
        default: ""
    }
}

Developer Tips

List any developer tips here

--color-red for the font color
--color-pink for the hover state
The whole block should be an <a> tag with mailto:${this.email} as the href

Events

Should open a new email on click

Required components

The SVGs should be a kebab-case of the name prepending with animal-${_kebabCase(this.name)}.svg.

SVG's are here: https://www.dropbox.com/sh/j5ddp8f4w8l3ii3/AAAZ1BC1JIgUBC2IKikh9xD2a?dl=0

Time & Budget

Time estimate: 1hrs
Budget: $100

Screenshots

Component Request - PanelMenu - 1hrs

Component Description

This component is used as the main menu. It opens on top of the site. Hover state outlines text using text-stroke CSS.

Design

Please also see attached screenshots for quick reference.

Desktop: https://xd.adobe.com/view/c0d9243f-2f1f-4b20-614b-bef83eff7c19-b6e8 (click menu dot in top right corner)
Mobile: https://xd.adobe.com/view/dd5e5638-85b6-40a8-4caa-797e6dbe406a-ab6f/screen/359a17ae-27a3-4791-bc3b-7ebfe28664bd/specs/

It's easy to see the design in the mobile versions.

The hamburger-dot is not in this component. That would be a separate on.

Email [email protected] for the design password.

Props & Components

This will use the <wp-menu> component, which we can't easily develop in Factory because it does a Nuxt fetch. it can be feed items to mock it, which is what we should do for this.

This will use clip-path on the open animation, but that is also not something we are going to worry about in this component build. I will build that animation separately as I build the site. So simply make a fixed position, full screen container with the large text and hover state outlines of text.

Sizing the text is a tough one. Ideally it fills the screen in height, but not if it's going to cause the text to wrap or not fit in width wise. I wish there was a way to "object-fit: cover" a menu somehow. Please propose a solution to this before starting on this component. Ideally the solution doesn't involve lots of breakpoints.

Time & Budget

Time estimate: 1hrs
Budget: $100

Screenshots

Component Request - FooterSocials - 1.5hrs

Component Description

This component is a fixed footer used at the bottom of most pages. It contains a <wp-menu> that will just link to social media.

Design

Please also see attached screenshots for quick reference.

Email [email protected] for the design password.

Props

props: {
    items: {
        // Mock: api.menuItems
        type: Array,
        default: () => []
    }
}

Developer Tips

List any developer tips here

--color-footer-background and --color-footer-text for the colors
Make the element 255px tall.
It's really hard to measure these fixed elements in XD, so it's OK to eyeball the sizes for this (or ask Dave for the measurements)

Events

Note the hove state text outline effect.

Required components

List out any components that are used by this new component. For example, if you are building a grid that is made up of block components.

<wp-menu> see here is used for the menu. You can pass in the mockitems to wp-menu :items="items" for now.

Time & Budget

Time estimate: 1hrs
Budget: $100

Screenshots

Component Request - GridWork - 1hrs

Component Description

This component is used on Directors landing pages and Work category pages to display BlockWork in an alternating fashion.

Design

Please also see attached screenshots for quick reference.

Note mobile design shows first two blocks have same alignment, this is a design bug. They should alternate down the page in a single column.

If no mobile designs provided, please use your best judgment for responsiveness.

Email [email protected] for the design password.

Props

props: {
    items: {
        // Mock: api.pages
        type: Array,
        default: () => []
    }
}

Developer Tips

Use CSS to get the alternating and offset layout.

Required components

BlockWork is used for the blocks in the gird

Time & Budget

Time estimate: 1hrs
Budget: $100

Screenshots

Component Request - BlockNews - 0.5hrs

Component Description

This component is used in a alternating layout to show news posts.
It should use flex-box for layout, so containing grid can override order of text and image using flex-order.
It will be 50vh tall.

Design

Please also see attached screenshots for quick reference.

Desktop: https://xd.adobe.com/view/1b5027a3-98f1-48ce-7968-22ffdcb8d2fe-6d61/screen/84141268-0730-442d-b88f-96480f3fadd2/Make-Make-Landing-4

If no mobile designs provided, please use your best judgment for responsiveness.

Email [email protected] for the design password.

Props

props: {
    image: {
        // Mock: api.image
        type: Object,
        default: () => {}
    },
    date: {
        type: String,
        default: ""
    },
    title: {
        type: String,
        default: ""
    },
    excerpt: {
        type: String,
        default: ""
    },
    to: {
        type: String,
        default: ""
    },
    category: {
        type: String,
        default: ""
    }
}

Required components

wp-image is used for the image
The entire component should be contained in a nuxt-link.
See @/utils/tools.js for a handy date function.

Time & Budget

Time estimate: 0.5hrs
Budget: $50

Component Request - SectionPress - 2hrs

Component Description

This component is used on the About page to highlight recent press.

Design

Please also see attached screenshots for quick reference.

If no mobile designs provided, please use your best judgment for responsiveness.

Email [email protected] for the design password.

Note that the component is the BLACK part, you do not need to add the pink that is at top of component.

Props

props: {
    items: {
        // Mock: [{title: "Promo Survey - Feminism & Music Videos Part 2"}, {...}, {...}]
        type: Array,
        default: () => []
    },
    title: {
          type: String,
          default: "Recent Press"
    }
}

Developer Tips

List any developer tips here

--color-pink for the text color
I'd position: absolute the awards title out from the top of the section.
Use <section> tag for outer markup. Awards should be a h2 tag.
Illustrations should be at start of array, middle of array, and end of array (then it will work nicely on mobile). On desktop position:absolute them to move them out of the flow.
.

Required components

SVGs for illustrations can be found here: https://www.dropbox.com/sh/j5ddp8f4w8l3ii3/AAAZ1BC1JIgUBC2IKikh9xD2a?dl=0

Time & Budget

Time estimate: 2hrs
Budget: $200

Screenshots

Component Request - BannerHighlight - 0.5hrs

Component Description

A 80vh height banner with an image and a link.

The image will be uploaded with some shadow on it, so no need to worry about putting opacity or filters on the image.

Note hover state of the explore prompt (arrow moves sideways).

Design

Please also see attached screenshots for quick reference.

Desktop: https://xd.adobe.com/view/1b5027a3-98f1-48ce-7968-22ffdcb8d2fe-6d61/screen/84141268-0730-442d-b88f-96480f3fadd2/Make-Make-Landing-4

If no mobile designs provided, please use your best judgment for responsiveness.

Email [email protected] for the design password.

Props

props: {
    image: {
        // Mock: api.image
        type: Object,
        default: () => {}
    },
    text: {
        type: String,
        default: "Originals"
    },
    prompt: {
        type: String,
        default: "Explore"
    },
    to: {
        type: String,
        default: ""
    }
}

Required components

wp-image is used for the background image
You'll need to put a nuxt-link around the text and prompt. Please add 20px to this to make it easy to click.
Arrow should be an SVG

Time & Budget

Time estimate: 0.5hrs
Budget: $50

Component Request - SectionVisit - 1.5hrs

Component Description

This component is used on the contact page to display a map. Note the hover states of the icons on the map.

Design

Please also see attached screenshots for quick reference.

If no mobile designs provided, please use your best judgment for responsiveness.

Email [email protected] for the design password.

Props

props: {
    title: {
        type: String,
        default: "Visit Us"
    },
    text: {
        type: String,
        default: ""
       // Mock as <h2>DTLA HQ</h2><address>...</address><p>Main Line - 213....</p>
    },
}

Developer Tips

List any developer tips here

--color-red for the font color
The SVG hover states should just be done using CSS.
Positing everything around the map should be done using % so that is scales correctly.

Events

Not the hover states for all the SVGs

Required components

SVGs for illustrations can be found here: https://www.dropbox.com/sh/j5ddp8f4w8l3ii3/AAAZ1BC1JIgUBC2IKikh9xD2a?dl=0

Time & Budget

Time estimate: 1.5hrs
Budget: $150

funkhaus / factory-archive Goto Github PK

factory-archive's People

Contributors

Stargazers

Watchers

Forkers

factory-archive's Issues

Component Description

Design

Props

Developer Tips

Required components

Time & Budget

Screenshots

Component Description

Design

Props

Required components

Time & Budget

Component Description

Design

Slots

Props

Developer Tips

Required components

Time & Budget

Screenshots

Component Description

Design

Props

Developer tips

Required components

Time & Budget

Screenshots

Component Description

Design

Props

Developer Tips

Required components

Time & Budget

Screenshots

Component Description

Design

Props

Developer Tips

Events

Required components

Time & Budget

Screenshots

Component Description

Design

Props

Developer Tips

Required components

Time & Budget

Screenshots

Component Description

Design

Props

Dev Tips

Required components

Time & Budget

Component Description

Design

Props

Required components

Time & Budget

Component Description

Design

Props

Developer Tips

Required components

Time & Budget

Screenshots

Component Description

Design

Props

Developer Tips

Required components

Time & Budget