Tase-shared-components NPM

Sharedlibs

About

Sharedlibs is a library of web-components built with Stencil.js and Tailwind CSS

Also used:

RxJS for api requests and state manipulation
Swiper for news popup and search modal
Floating UI for menus and dropdowns

For develepment use command npm start and port http://localhost:4200/

For production use npm build and npm publish (You need npm authorization for the last one)

The version set manualy in package.json and tase-global.ts

Stencil.js use two types of components:

Web Components

@Component({
  tag: 'todo-list',
  // additional options
})
export class TodoList {
  // implementation omitted
}

those can be:

- shadow: true Preferred method. More or less predictable. Creates shadow dom for web-components. Works with Tailwind.
- shadow: false Don't work with Tailwind, only with css

Functional Components

const Hello = (props) => <h1>Hello, {props.name}!</h1>;

Don't have state, don't work well with Tailwind, are buggy. Use only for the simplest things

Contains

Header + Search button

<tase-header white-offset="100" fixed fetch-url="https://taseapi-wa-qa.azurewebsites.net/api/Cms?Route=header" transparent="true">
  <tase-search most-active-url="https://taseapi-wa-qa.azurewebsites.net/api/MarketTrends/most-active" search-url="https://taseapi-wa-qa.azurewebsites.net/api/Search"></tase-search>
</tase-header>

Footer

<tase-footer fetch-url="https://taseapi-wa-qa.azurewebsites.net/api/Cms?Route=footer"> </tase-footer>

Cookies policy

<tase-cookies-policy fetch-url="https://taseapi-wa-qa.azurewebsites.net/api/Cms?Route=%2Ffloating"> </tase-cookies-policy>

Accessibility button (For high contrast mode)
```
<tase-accessibility></tase-accessibility>
```
Scroll to Top button
```
<tase-scroll-top></tase-scroll-top>
```

Skip to main content menu

<tase-skip-to-main-content-menu element="#main1"> </tase-skip-to-main-content-menu>

Side menu for share button and customer service

<tase-share-and-customer-service fetch-url="https://taseapi-wa-qa.azurewebsites.net/api/Cms?Route=%2Ffloating"> </tase-share-and-customer-service>

Focus trap, copy of this focus-trap but with more features
- getFocus event
- loseFocus event - It is very handy to close the drop-down menus on loss of focus
- focusFirst attribute - it is very handy for modal windows to set the focus on the first element
```
<tase-focus-trap></tase-focus-trap>
```

Specs

Adboe XD

home page header
home page menu - 1 & 2
Search popup
table page menu
stock lobby
mobile view
- page header
- page side nav
- popup mobile

Figma

side menu for mobile
footer desktop and mobile UI
header UI for desktop and mobile, regular and white
header UI for tablet
header UI 4 states:
- Desktop 1920px
- Header 1200px
- Tablet 768px
- Mobile 414px

Adobe XD