vuestorefront / storefront-ui Goto Github PK

Every available component stories should be adjusted to common format. If they don't exist they should be created.

The format is described here

In short words we should have at least those stories for every component:

• one with props (as knobs)
• one or more for different usage examples
• one for slots
• one for CSS modifiers

Implement SfOptions component based on Alpaca swatch https://alpaca-storybook-ebth12xpx.now.sh/components/?path=/story/elements-swatch--default

The API can remain the same so the task involves only custom styling

Read more in Working with Alpaca

I think we should implement SfLoading component to handle loading spinners inside other components, but we may also append a spinner on body and create a v-loading directive to toggle this global loading spinner.
Not a necessity, but I believe it would be comfortable to use in this way, waiting for opinions...

Create mega menu component (desktop only)
This component is only a wrapper for other components so the task does not involve creating the components inside of it.

Proposed API:

• just a default slot

Visibility properties shouldn't be a part of the component itself so the task is to make static MegaMenu component without any content, just a slot + write basic unit tests:

• if it renders
• if the slot content is rendered.

Designs: https://www.figma.com/file/hrwE3VsMBHgdJoS86rVr4W/Desktop-%26-Mobile-Vue-Storefront?node-id=99%3A0

• split into smaller atoms if possible
• use common format
• finish styling

This component is mobile-only

Proposed API:

• Slot for floating button icon
• Slot for bottom icons

Designs: https://www.figma.com/file/hrwE3VsMBHgdJoS86rVr4W/Desktop-%26-Mobile-Vue-Storefront?node-id=291%3A1461

Desktop


Mobile
There is no strict design for mobile view so please copy font styles from Steps (can eb found on mobile checkout)

Can be found on designs on product page (desktop)

Proposed API to implement

Second one treats nav as a totally separate component

<SfTabNavigation :nav="navItems" current="currentTab" @change="newVal => currentTab = newVal">

• slot item for nav item

navItem format

{ id: string, label: string }

Figma designs on product page.

Imho it should have 2 chevrons (up and down), for best usability, even though it was otherwise suggested in Figma.
I think it's important that the native <input> have type="tel" to open the number keyboard by default on mobile (good practice) and skip design problems (varying by browser) created by type="number".

Proposed API

Props

• step - incremental step, 1 by default
• value / v-model - input value, 0 by default
• min - min value
• max - max value
• placeholder - placeholder for the native input element
• precision - decimal precision, 0 by default (for integers)
• name - native input name

When max is 0, native input should be disabled.

Slots

• default - slot with input element, should bind the value
• up - arrow (control) up
• down - arrow (control) down

Events

• change
• focus
• blur

Methods

• focus
• blur
• select

Events and methods same as in native input.

This task involves

• creating transitions file(as scss mixins) (create src/css/mixins/_transitions.scss' and 'css/mixins.scss
• creating slide transitions 150ms each and with direction and translateX/Y as args
• creating stories for it in storybook with demos

Reference https://vuejs.org/v2/guide/transitions.html

Mobile

Desktop

The task involves creating just a sidebar with an empty default slot
CSS modifiers:
--left or --right depending which one you will choose as default (i suggest right).

Can be found on designs in various boards like productFiltering (desktop) and iPhone/MoreActions (mobile)

Style missing properties that are visible only on desktop and adjust styling

Missing properites to style:

• call to action (call-to-action slot)
• description (description slot)

See designs: https://www.figma.com/file/hrwE3VsMBHgdJoS86rVr4W/Desktop-%26-Mobile-Vue-Storefront?node-id=291%3A1461

Hello,
I'm really interested on this project and also want to contribute here, but first I have to know if you are planning to release it open sourced (as Vue Storefront is), are you?
Thanks!

Desktop

Mobile

Proposed API (open for discussion)

• Simple version with props

<SfSteps :steps="steps" @change="" active=""/>

Can be found on designs on checkout boards

These are just "Prettier" errors that are being thrown,

Just adjust designs of the alpaca one leaving business logic untouched.

https://alpaca-storybook-ebth12xpx.now.sh/components/?path=/story/modules-pager--default
https://github.com/SnowdogApps/alpaca-storybook/tree/develop/components/src/03-modules/pager

Also read Working with Alpaca

Can be found on designs on category page

Create rounded button component. Please make sure you implement hover state properly too.

Proposed API

• default slot for content
• css modifiers --primary --secondary for colors

Please mind that it's just a proposal. We're open to discussion regarding component API.

Can be found in designs under "style guide" table.

Please add opened select component designs to figma.

I already did some guesses on how it should look like but would be great to have a proper mobile version of it #33

There is no reason to have them separated. By having it all in one we have all basic configuratioin options in place. The name of story should be `Props / CSS Modifiers'.

It should be applied to all current stories

Use alpaca component as a base (already included as a dependency)
https://alpaca-storybook-ebth12xpx.now.sh/components/?path=/story/elements-form-checkbox--default. (https://github.com/SnowdogApps/alpaca-storybook/tree/develop/components/src/02-elements/checkbox)

You can safely import JS part and just override HTML SCSS to match our design

Read more in Working with Alpaca

It should incude

• prop label to fill default slot with label
• default slot with content of "label" slot that can be used to add custom markup

Can be found on designs on IPhoneChackoutPersonal Details and IPhone/Checkout/Review Order (checked)

Figma designs on Mobile Guide > Urgency Elements.

Proposed API

• default slot (for content);
• CSS modifiers --info, --alert and --warning, defaults to primary color (the green);

No props, no methods, no events (pretty simple 😄 ).
Take a look on SfAlert as reference.

Please mind that it's just a proposal. We're open to discussion regarding component API.

• test rendering behavior
• test props

and selected version

Both:

Can be found on category sidebar ( designs - https://www.figma.com/file/hrwE3VsMBHgdJoS86rVr4W/Desktop-%26-Mobile-Vue-Storefront?node-id=99%3A0 ) and product card

• Image in SfHeader should be customizable via url - see #4 for reference.

• Missing props for text

• IMO content alignment (left/right/top) shouldn't be done with slots, but passed as a prop instead - what do you think?

Create desktop styling for SfCallToAction component and polish mobile styling.

Create a search bar component for desktop and mobile;

Desktop (can be found on header)

Mobile (can be found on mobile components board)

Proposed API

• icon (slot)
• placeholder (prop)

Tests

• props
• basic rendering
• slot

Designs: https://www.figma.com/file/hrwE3VsMBHgdJoS86rVr4W/Desktop-%26-Mobile-Vue-Storefront?node-id=291%3A1461

Mobile:iPhone/More actions THE ARROW SHOULD HAVE TOP/BOTTOM DIRECTION DEPENDING OIN STATE

Desktop (category page)

In both cases it's just a toggle using fade and slide down animation.
It should contain:

• Title prop
• Content slot
• Title slot
  can be found on designs

Write unit tests for SfSidebar component.

Proposed API:

• default slot for text

How to find on designs
See designs: https://www.figma.com/file/hrwE3VsMBHgdJoS86rVr4W/Desktop-%26-Mobile-Vue-Storefront?node-id=291%3A1461

Under "components" tab on bottom left corner find "mobile components -> Menu/Category"

Get rid of color/bg-image props. This should be done through css helpers. Also adjust the docs

Desktop:

Mobile:

Implement mobile and desktop gallery component.
On mobile it should support touch events and be swappable.

Proposed API:

• images - (prop )Array of objects containing main image and optionally a thumbnail
• active (prop) - id of active image

Optional (if you don't handle it we can make separate issues)

• if there is a separate image for thumbnail main image should be loaded lazily
• add autoScroll prop and functionality

Please mind that it's just a proposal. We're open to discussion regarding component API.

Can be found on designs on product pages.

Base it on alpaca ones: https://alpaca-storybook-git-develop.snowdog1.now.sh/?path=/story/elements-breadcrumbs--default and adjust only styling

Read more in Working with Alpaca

Can be found in our designs on category/product boards

Proposed API

• default slot (for content)
• CSS modifiers --info --alert --warning

Please mind that it's just a proposal. We're open to discussion regarding component API.

Can be found on designs under "Mobile guide" table https://www.figma.com/file/hrwE3VsMBHgdJoS86rVr4W/Desktop-%26-Mobile-Vue-Storefront?node-id=99%3A0

@patzick I believe you can take care of it ;)

Updated project dependencies, add prettier hook and ensure that unit tests and storybook are working.

First of all: We are currently evaluating VS for new projects and I have clicked through here a little bit. I think storefront ui is a very solid foundation, especially for theme 2.0. I would have some thoughts about that, i hope it's ok.

I've seen that currently simple img tags are used for icons and want to ask if there have ever been any thoughts about using inline SVG's. For example with the help of the vue-svg-loader

I have already used it in some projects and could also help with the implementation.

I see limitations by using img tags for icons. If you use the SVG's directly you can style them e.g. via css. There is a lot more scope for customization (Custom colors, Hover styles).

I am looking forward to feedback and your thoughts!

Make sure that all current components are meeting this criteria:
https://github.com/DivanteLtd/storefront-ui/blob/master/CONTRIBUTING.md

Proposed API

• default slot
• title slot
• count slot
• icon slot with arrow by default
• props for all of the above

We should add Vuepress instance inside /docs folder and make it build automatically after each commit to master.

All component folders and names should have Sf prefix.

• Test basic rendering functionalities
• Test props

Proposed api

• slot left
• slot right
• slot center
• default slot

How to find on designs
See designs: https://www.figma.com/file/hrwE3VsMBHgdJoS86rVr4W/Desktop-%26-Mobile-Vue-Storefront?node-id=291%3A1461

Under "components" tab on bottom left corner find "mobile components -> top bar"

This task involves

• creating transitions file(as scss mixins) (create src/css/mixins/_transitions.scss' and 'css/mixins.scss if they are not present
• creating fade in-out transition 150ms
• creating stories for it in storybook with demos

Reference https://vuejs.org/v2/guide/transitions.html

It''s pretty tricky since the component is in place. Default v-if value might be the reason.

Finish mobile view for footer component. This task involves finishing CSS styles.

Component should be based on alpaca's one (which is in our dependencys) but with applied changes to match our designs.
https://alpaca-storybook.now.sh/

Read more in Working with Alpaca

Once you adjust the design the current alpaka api should remain as simpel customization option (pass everything through :options) but it also should expose slots-based configuration

<!-- Prop-based with our html -->
<SfRadio :options="options" />
<!-- With custom template, scoped slot -->
<SfRadio :options="options">
  <template #label="option"> Option: {{ option.label }} </template>
  <template #description="option"> Option: {{ option.description }} </template>
</SfRadio>

By default we are not implementing the bold part

Here reference to docs to understand it better https://vuejs.org/v2/guide/components-slots.html#Other-Examples

Can be found on designs under IPhone/Checkout boards

Test SfRating component

Write Unit tests for SfPrice