joe-moran / album-site Goto Github PK

Description

Just a nice lil' button, styled custom to use across the site where any button should be needed.

Art

https://xd.adobe.com/view/0e787db3-6af5-470d-8e4a-934b20734087-5b2b/screen/f811dc77-afe1-4d1b-8ff0-5bb46035f0a1/

Props

• fill: flags whether to style as an outline button or a full button

Slots

• default: for label

Events

• click: duh

Testing

Unit

• Rendering of slots
• Rendering of props

Integration

None

Description

A custom <li></li>, essentially.

Art

[LINK TO COMPONENT OR VIEW](xd link)

Requirements

• Spacing between main content and description
• Custom bullet

Setup

Generate component, story, and unit test files using:

npm run gen -- --path components/ui/list --name ListItem

Props

None

Slots

• default: The main content for the list item
• description: The extra description to display below the main content

Events

None

Dependencies

None

Testing

Unit

• Rendering of slot content

Integration

None

Description

A link that KINDA looks like a button but is a link

Art

[LINK TO COMPONENT OR VIEW](xd link)

Requirements

target="_blank"

Setup

Generate component, story, and unit test files using:

npm run gen -- --path component/ui/link--name CallToActionLink

Props

• href

Slots

• default: The link label

Events

None

Dependencies

None

Testing

Unit

• rendering of slot and href

Integration

Document components and publish documentation

Description

Button to download an asset. Should allow linking to asset.

Can use something like this:

function downloadUrl(url){
    window.open(url, '_self');
}

Art

Requirements

• Pass slot value for label to tracker

Props

• assetPath

Slots

• default (label)

Dependencies

• #19

Testing

Unit

None

Integration

Test it opens the file for download when passed as prop

Description

As a user, I can , so that

Acceptance Criteria

As a user, when I , I can :
1.
2.
3.

Tasks

• #25

Description

A custom <ul></ul>, essentially.

Art

[LINK TO COMPONENT OR VIEW](xd link)

Requirements

• Just some specific spacing for the ListItems

Setup

Generate component, story, and unit test files using:

npm run gen -- --path components/ui/list --name List.vue

Props

None

Slots

• list-items: Duh

Events

None

Dependencies

• #24

Testing

Unit

• Rendering of slot content

Integration

None

Description

A lil' note (like a blog post) for long-form text.

Art Direction

[LINK TO COMPONENT OR VIEW](xd link)

Props

None

Slots

• heading
• body

Dependencies

None

Testing

• rendering of slot content

Create respective factories for the following data structure:

const soundpacks = [
  {
    title: 'Refraction Soundpack',
    demoEmbeddedPlayer: link to soundcloud, // TODO
    devices: [
        {
            title: 'Ableton',
            ....
        }
    ],
  // TODO: finish the rest
  }
]

Components

• Button
• AnimatedAlbum
• RefractionStylized
• SocialLinks

Desktop

Mobile

Description

As a user looking for soundpacks, I can search "Prophet REV2", "Omnisphere", "xRGB", "Refraction", "soundpack" and find results for the Refraction Soundpack page,.

Acceptance Criteria

As a user, when I search "Prophet REV2", "Omnisphere", "xRGB", "Refraction", "soundpack" , I can :

1. See results

Tasks

• #34

Description

View for displaying and allowing download of soundpack.

Requirements

• Add to vue router
• aria-labelled-by nav item
• import data from soundpacks

Props

None

Slots

None

Dependencies

• #12
• #13
• #27

Testing

Unit

None

Integration

Description

As a user, I can click a link to donate money, so that I can support xRGB in exchange for the free soundpack provided.

Acceptance Criteria

As a user, I can see a "donate" link near the "download" button, which upon click I will see:

1. A paypal donation page pop up in new window

Tasks

• #23
• Link to paypal page using above component

Description

As a user, I can click the "soundpacks" link in the main nav header, so that I can learn more about the soundpacks offered by xRGB

Acceptance Criteria

As a user, when I click the "soundpacks" link in the main nav head, I can see:

1. An indication I navigated to the correct page via the nav header
2. Information regarding soundpacks on the page

Tasks

• #20
• #22

Description

The site's header

Art Direction

[LINK TO COMPONENT OR VIEW](xd link)

Props

None

Slots

None

Dependencies

• #13
• Icon.vue

Testing

Description

Container for structured content such as an album release, soundpack, etc.
Essentially a container for uniform styling

Art

Desktop
Mobile

Requirements

Uniform padding and spacing
h2 heading

Props

None

Slots

• default: use for individual content sections, which can be made manually for reach section or be section components
• title: the title for the content

Dependencies

None

Testing

Unit

• rendering of props
• rendering of slot

Integration

None

Description

As a user, I can , so that

Acceptance Criteria

As a user, when I , I can :
1.
2.
3.

Tasks

• https://github.com/Joe-Moran/album-site/issues/new?template=vue-component.md&labels=Vue+Component,Task

Description

Reusable content layout for soundpacks.

Art

Mobile
Desktop

Requirements

• h2 for title of soundpack
• sections with h3:
  • Demos
  • Details
  • A Note From the Author

Props

• title
• demosPath: link to embed soundcloud player; might need to be a slot?
• soundpackContents: for the "details" section
• artworkPath

Slots

• description: intro paragraph
• note: for contents of "note from author"

Dependencies

None; handled in other tasks

Testing

Unit

• Rendering of slot content

Integration

• Rendering of props/slots in child components

Description

As a user, I can , so that

Acceptance Criteria

As a user, when I , I can :
1.
2.
3.

Tasks

• #11

Description

The main nav for the site.

Art Direction

Desktop
Mobile

Props

• navItems

Slots

None

Dependencies

Vue-router

Testing

• Rendering of props

Description

As a site admin user (me), I can view site analytics on Mautic , so that I can track page hits and certain UI events historically

Acceptance Criteria

As a user, when I view the analytics, I can see:

1. Individual page hit counts
2. Which users, if any, have been tracked before
3. The number of downloads per soundpack offering
4. The number of clicks on "donate" buttons
5. The number of redirects from site to a streaming service for a posted audio link

Tasks

• #37
• #38
• #39
• #40
• #41

Description

As a user, I can download the Refraction Sound Pack, so that I can utilize the many synthesizer patches and effect racks with my copy of Omnisphere, Prophet REV2, or Ableton Live.

Acceptance Criteria

As a user, when I visit the "Soundpacks" page, I can:

1. Click a download button for the sound pack, serving me a zip file to download to my computer in the directory of my choosing

Tasks

• #18
• Load soundpack zip file into public assets folder
• Implement DownloadButton pointing to the soundpack file location