tase-shared-components

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

• Header UI
  • menu, popup animtaions and open state
• Search open state
• Side menu UI
• Search modal UI, desktop and mobile
• Footer UI, desktop and mobile

Figma

• Icons
• header UI desktop and mobile
• sticky header (white one)
• footer desktop, tablet and mobile
• Side menu
• Menu Popups
• A lot of random elements

Adobe XD

• Icons

Adobe XD

• Search menu
• "Install our app" header

Adobe XD

• News Popup

Adobe XD

• News Popup Mobile

Adobe XD

• cookies policy