UI Component

The ui components made with styled-components.

tech

• swiper - using swiper in slider component

Installation

You can install all ui components with...

$ npm install --save @telewebion/ui-component

or

$ yarn add @telewebion/ui-component

Usage

Style

To import icons font :

import "@telewebion/ui-component/tw-ui-style.css";

Component

To see which components are available take a look at the components section.

// whatever components you need
import { Button } from "@telewebion/ui-component";

export const myComponent = (props) => <Button>Hello, World!</Button>;

• Button Component
• Card Component
• Divider Component
• Grid Component
• Icon Component
• Ratio Component
• Skeleton Component
• Slider Component
• Typography Component

Icon

Usage

You can import the Icon component and use it as follows:

import { Icon } from "@telewebion/ui-component";

function App() {
  return (
    <div>
      <Icon icon="home" size={24} spin />
      <Icon icon="user" solid size={30} />
    </div>
  );
}

export default App;

Props

The Icon component accepts the following props:

| Prop Name | Type | Default | Description | | --------- | -------- | :-----: | ------------------------------------------------------------------------------------------------------ | | icon* | string | - | Required. Specifies the name of the icon to display (e.g., home). Icons list are here. | | solid | bool | false | If true, the icon will use the solid variant. | | size | number | - | Specifies the size of the icon (in pixels). | | spin | bool | false | If true, the icon will spin continuously. | | reverse | bool | false | If true and spin is enabled, spins the icon in the reverse direction. |

Icons

| Name | Icon | Name | Icon | Name | Icon | | ------------------- | --------------------------------------------------- | ------------------ | ---------------------------------------------------------- | ------------- | -------------------------------------------- | | alert-circle | | IMDB | | home | | | archive-solid | | archive | | instagram | | | bookmark-solid | | arrow-up-left | | linkedin | | | dots-grid-solid | | bale | | location | | | download-solid | | bookmark | | menu | | | home-solid | | chevron-down | | play | | | live-solid | | chevron-left | | plus | | | play-solid | | chevron-right | | search | | | search-solid | | chevron-selector | | share | | | thumbs-down-solid | | chevron-up | | telephone | | | thumbs-up-solid | | download | | thumbs-down | | | x-close-solid | | email | | thumbs-up | | | filter-lines | | upload-cloud | | user | | | x-close | | | | | |

Tool

Tools for style-components are in tools section.

import { prop } from "@telewebion/ui-component/tool";

• It's part of styled-tool project

• media
• prop
• ifProp
• ifNotProp
• switchProp
• them
• withProp

Conventions

Updating Icons

We use the IcoMoon website to create and manage our font icons. To add more icons to the project, please follow these steps:

1. Access IcoMoon: Go to the IcoMoon and import the selection.json file located in src/assets/selection.json. You can do this by using the Import Icons button in IcoMoon to load the current state of our icons.

2. Select Icon Sets: There are two sets of icons available one for line icons and another for solid icons. Depending on your needs, add your desired icons to the appropriate set. After adding the icons, sort them within each set using the Rearrange Icons option in the sets configuration menu (This helps maintain consistency across updates).

3. Generate and Update: Once you have arranged your icons, navigate to the Generate tab and increase the version of tw-icon, and download the font pack. At this point, replace the following files:

   • Update selection.json located in src/assets/selection.json with the new version.
   • Replace the font files (tw-icon.[eot, svg, ttf, woff]) in the public/fonts/* directory.
   • Modify font-icon.css in src/assets/font-icon.css to reflect the changes.

Following these steps will ensure that our icon set is up to date.