fyndiq-component-article

fyndiq-component-article

Preview

An Article component for Fyndiq

Installation

The component can be installed through NPM:

npm i -S fyndiq-component-article

Components

The package fyndiq-component-article exposes several components:

• Layouts
  • LayoutDetails
• Description
• Images
• Price
• Tags

Layout components are high-level components that are responsible for arranging the details in a certain way.

LayoutDetails

This layout component arranges the article in a details view, which is mobile and tablet friendly. Best used for a customer-facing interface.

Usage

import React from 'react'
import {
  Description,
  Images,
  Price,
  Tags,
  LayoutDetails,
} from 'fyndiq-component-article'

// Normal usage
<LayoutDetails
  title="My article title"
  description="My article description"
  images={[
    'http://image-url-1',
    'http://image-url-1',
  ]}
  price="$150"
  tags={['Awesomeness', 'Pretty good article']}
/>

// Advanced usage
<LayoutDetails
  images={
    <Images
      images={['src1', 'src2']}
    />
  }
  title="Article Title"
  description={<span dangerouslySetInnerHtml={{ __html: '<strong>hello</strong>' }} />}
  price={
    <Price oldPrice="$250" noEmphasize>$124</Price>
  }
  tags={<Tags tags={['Awesomeness', 'Pretty good article']} />}
/>

API

Name	Type	Description	Default value
className	String	Additionnal class for the root element	``
title	String	Title of the article	``
description	String or Description element	Description of the article	null
images	Array of string or Images element	Images of the article	null
tags	Array of string or Tags element	Tags of the article	null
price	String or Price element	Price of the article	null

Description

Description of the Article

Usage

import React from 'react'
import { Description } from 'fyndiq-component-article'

// Normal usage
<Description>My Article Description</Description>

// Pass raw HTML (useful when working with Markdown)
<Description>
  <span
    dangerouslySetInnerHtml={
      { __html: '<strong>hello</strong>' }
    }
  />
</Description>

API

Name	Type	Description	Default value
children	Node	Content of the description	``

Images

Images of the Article. Includes a carrousel-like interaction

Usage

import React from 'react'
import { Images } from 'fyndiq-component-article'

// Normal usage
<Images
  images={[
    'http://image-url-1',
    'http://image-url-2',
  ]}
  alt="alt text for images"
/>

API

Name	Type	Description	Default value
images	Array of strings	URL of the images	[]
alt	String	Alt text for the <img> tags	''

Price

Price of the Article.

Usage

import React from 'react'
import { Price } from 'fyndiq-component-article'

// Normal usage
<Price>$100</Price>

// With old price
<Price oldPrice="$150">$100</Price>

API

Name	Type	Description	Default value
children	String	Price of the article	null
oldPrice	String	Old price of the article	''
emphasize	Boolean	Show a difference in font-sizes for oldPrice and price	true

Tags

Tags of the Article.

Usage

import React from 'react'
import { Tags } from 'fyndiq-component-article'

// Normal usage
<Tags tags={['tag1', 'tag2']} />

API

Name	Type	Description	Default value
tags	Array of strings	Tags of the article	[]