tv-shopping-lib-npm

Adding icons

In order to include a new icon we have a script to process the icons that removes unnecesary attrs and creates a React Component from svgs.

The steps to add a new icons are: 0- Name your iconName.svg with a short and descriptive file name and remember to prefix it with icon. The file name is used to create the icons as React Components. So, later will be use to invoque the icon: <IconName /> or <Icon name="name"> 1- Add the new iconName.svg into /iconsRaw 2- Execute the script yarn icons 3- Now you are able to use the icon as:

import { Icon } from 'tv-shopping-lib-npm'
import { IconCart } from 'tv-shopping-lib-npm'

const Example = () => {
  return <>
    <Icon name="cart" />
    <IconCart />
  </>
}

Components creation tips

• Naming interfaces convention: I(interface) + name(component, function, ...) + Props(optional in case of input function parameters). For instance:

interface IButtonProps {
  focused: boolean
  variant: keyof IVariants
  ...
}

• Naming Types convention: T(type) + name(component, function, prop name, ...). For example:

  type TSize = number | 'auto'

• To style a focused component, use in styles ':focus' selector like this:

const componentExample = styled.div`
  ...
  &:focus {
    background-color: red;
  }
`

or the class name '.la-focused' like this:

const componentExample = styled.div`
  ...
  &.la-focused {
    background-color: red;
  }
`

• Typescript + styled-components:

  interface TitleProps {
    readonly isActive: boolean;
  }

  const Title = styled.h1<TitleProps>`
    color: red;
  `;