frst-components 0.20.0

package/src/icons.stories.tsx

@@ -0,0 +1,321 @@
+import React from 'react'
+
+import * as Icons from './shared/icons'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Icons',
+  component: IconsStories
+}
+
+function IconsStories(props: any) {
+  return <div>{props.children}</div>
+}
+
+const Template = (args) => <IconsStories>{args} </IconsStories>
+
+export const BackArrow = Template.bind({})
+BackArrow.args = Icons.BackArrow({})
+
+export const Trash = Template.bind({})
+Trash.args = Icons.Trash({})
+
+export const ChangeAccount = Template.bind({})
+ChangeAccount.args = Icons.ChangeAccount({})
+
+export const CheckboxChecked = Template.bind({})
+CheckboxChecked.args = Icons.CheckboxChecked({})
+
+export const CheckboxEmpty = Template.bind({})
+CheckboxEmpty.args = Icons.CheckboxEmpty({})
+
+export const DownloadIcon = Template.bind({})
+DownloadIcon.args = Icons.DownloadIcon({})
+
+export const DropdownIconWhite = Template.bind({})
+DropdownIconWhite.args = Icons.DropdownIconWhite({})
+
+export const DropdownSideIconWhite = Template.bind({})
+DropdownSideIconWhite.args = Icons.DropdownSideIconWhite({})
+
+export const EditIcon = Template.bind({})
+EditIcon.args = Icons.EditIcon({})
+
+export const ExitArrow = Template.bind({})
+ExitArrow.args = Icons.ExitArrow({})
+
+export const FRSTLogo = Template.bind({})
+FRSTLogo.args = Icons.FRSTLogo({})
+
+export const FRSTLogoBig = Template.bind({})
+FRSTLogoBig.args = Icons.FRSTLogoBig({})
+
+export const WarningIcon = Template.bind({})
+WarningIcon.args = Icons.WarningIcon({})
+
+export const WhiteFilter = Template.bind({})
+WhiteFilter.args = Icons.WhiteFilter({})
+
+export const AlertCicle = Template.bind({})
+AlertCicle.args = Icons.AlertCicle({})
+
+export const WithoutTrail = Template.bind({})
+WithoutTrail.args = Icons.WithoutTrail({})
+
+export const Mail = Template.bind({})
+Mail.args = Icons.Mail({})
+
+export const Brain = Template.bind({})
+Brain.args = Icons.Brain({})
+
+export const WithTrail = Template.bind({})
+WithTrail.args = Icons.WithTrail({})
+
+export const RocketIcon = Template.bind({})
+RocketIcon.args = Icons.RocketIcon({})
+
+export const SmileOutlined = Template.bind({})
+SmileOutlined.args = Icons.SmileOutlined({})
+
+export const CheckInCicle = Template.bind({})
+CheckInCicle.args = Icons.CheckInCicle({})
+
+export const ArrowScrollLeft = Template.bind({})
+ArrowScrollLeft.args = Icons.ArrowScrollLeft({})
+
+export const ArrowScrollRight = Template.bind({})
+ArrowScrollRight.args = Icons.ArrowScrollRight({})
+
+export const CloseIcon = Template.bind({})
+CloseIcon.args = Icons.CloseIcon({})
+
+export const SaveIcon = Template.bind({})
+SaveIcon.args = Icons.SaveIcon({})
+
+export const CopyPaste = Template.bind({})
+CopyPaste.args = Icons.CopyPaste({})
+
+export const Channel = Template.bind({})
+Channel.args = Icons.Channel({})
+
+export const Share = Template.bind({})
+Share.args = Icons.Share({})
+
+export const Cam = Template.bind({})
+Cam.args = Icons.Cam({})
+
+export const Content = Template.bind({})
+Content.args = Icons.Content({})
+
+export const Certificate = Template.bind({})
+Certificate.args = Icons.Certificate({})
+
+export const Quiz = Template.bind({})
+Quiz.args = Icons.Quiz({})
+
+export const File = Template.bind({})
+File.args = Icons.File({})
+
+export const Link = Template.bind({})
+Link.args = Icons.Link({})
+
+export const Dollar = Template.bind({})
+Dollar.args = Icons.Dollar({})
+
+export const PodCast = Template.bind({})
+PodCast.args = Icons.PodCast({})
+
+export const WhitePaper = Template.bind({})
+WhitePaper.args = Icons.WhitePaper({})
+
+export const QuizSucessError = Template.bind({})
+QuizSucessError.args = Icons.QuizSucessError({})
+
+export const Code = Template.bind({})
+Code.args = Icons.Code({})
+
+export const BarChart = Template.bind({})
+BarChart.args = Icons.BarChart({})
+
+export const Course = Template.bind({})
+Course.args = Icons.Course({})
+
+export const Palette = Template.bind({})
+Palette.args = Icons.Palette({})
+
+export const MoreVertical = Template.bind({})
+MoreVertical.args = Icons.MoreVertical({})
+
+export const MoreHorizontal = Template.bind({})
+MoreHorizontal.args = Icons.MoreHorizontal({})
+
+export const UploadIcon = Template.bind({})
+UploadIcon.args = Icons.UploadIcon({})
+
+export const Video = Template.bind({})
+Video.args = Icons.Video({})
+
+export const Noun = Template.bind({})
+Noun.args = Icons.Noun({})
+
+export const EyeOff = Template.bind({})
+EyeOff.args = Icons.EyeOff({})
+
+export const AddIcon = Template.bind({})
+AddIcon.args = Icons.AddIcon({})
+
+export const Handshake = Template.bind({})
+Handshake.args = Icons.Handshake({})
+
+export const Mission = Template.bind({})
+Mission.args = Icons.Mission({})
+
+export const Lamp = Template.bind({})
+Lamp.args = Icons.Lamp({})
+
+export const IconNotification = Template.bind({})
+IconNotification.args = Icons.IconNotification({})
+
+export const SiteIcon = Template.bind({})
+SiteIcon.args = Icons.SiteIcon({})
+
+export const LinkedinIcon = Template.bind({})
+LinkedinIcon.args = Icons.LinkedinIcon({})
+
+export const InstagramIcon = Template.bind({})
+InstagramIcon.args = Icons.InstagramIcon({})
+
+export const YoutubeIcon = Template.bind({})
+YoutubeIcon.args = Icons.YoutubeIcon({})
+
+export const SpotifyIcon = Template.bind({})
+SpotifyIcon.args = Icons.SpotifyIcon({})
+
+export const PodCastIcon = Template.bind({})
+PodCastIcon.args = Icons.PodCastIcon({})
+
+export const CalendarIcon = Template.bind({})
+CalendarIcon.args = Icons.CalendarIcon({})
+
+export const WriteIcon = Template.bind({})
+WriteIcon.args = Icons.WriteIcon({})
+
+export const HomeIcon = Template.bind({})
+HomeIcon.args = Icons.HomeIcon({})
+
+export const PlayFilledIcon = Template.bind({})
+PlayFilledIcon.args = Icons.PlayFilledIcon({})
+
+export const PlayLineIcon = Template.bind({})
+PlayLineIcon.args = Icons.PlayLineIcon({})
+
+export const MedalFilledIcon = Template.bind({})
+MedalFilledIcon.args = Icons.MedalFilledIcon({})
+
+export const MedalLineIcon = Template.bind({})
+MedalLineIcon.args = Icons.MedalLineIcon({})
+
+export const LampFilledIcon = Template.bind({})
+LampFilledIcon.args = Icons.LampFilledIcon({})
+
+export const LampLineIcon = Template.bind({})
+LampLineIcon.args = Icons.LampLineIcon({})
+
+export const PencilFilledIcon = Template.bind({})
+PencilFilledIcon.args = Icons.PencilFilledIcon({})
+
+export const PencilLineIcon = Template.bind({})
+PencilLineIcon.args = Icons.PencilLineIcon({})
+
+export const CalendarFilledIcon = Template.bind({})
+CalendarFilledIcon.args = Icons.CalendarFilledIcon({})
+
+export const CalendarLineIcon = Template.bind({})
+CalendarLineIcon.args = Icons.CalendarLineIcon({})
+
+export const HomeFilledIcon = Template.bind({})
+HomeFilledIcon.args = Icons.HomeFilledIcon({})
+
+export const HomeLineIcon = Template.bind({})
+HomeLineIcon.args = Icons.HomeLineIcon({})
+
+export const RocketButton = Template.bind({})
+RocketButton.args = Icons.RocketButton({})
+
+export const StarRating = Template.bind({})
+StarRating.args = Icons.StarRating({})
+
+export const StarOutlined = Template.bind({})
+StarOutlined.args = Icons.StarOutlined({})
+
+export const TalkIcon = Template.bind({})
+TalkIcon.args = Icons.TalkIcon({})
+
+export const ThumbsUpIcon = Template.bind({})
+ThumbsUpIcon.args = Icons.ThumbsUpIcon({})
+
+export const ThumbsUpCovered = Template.bind({})
+ThumbsUpCovered.args = Icons.ThumbsUpCovered({})
+
+export const StepCicleOne = Template.bind({})
+StepCicleOne.args = Icons.StepCicleOne({})
+
+export const StepCheckInCicle = Template.bind({})
+StepCheckInCicle.args = Icons.StepCheckInCicle({})
+
+export const StepCicleTwo = Template.bind({})
+StepCicleTwo.args = Icons.StepCicleTwo({})
+
+export const StepCicleThree = Template.bind({})
+StepCicleThree.args = Icons.StepCicleThree({})
+
+export const StepCicleFour = Template.bind({})
+StepCicleFour.args = Icons.StepCicleFour({})
+
+export const FowardArrow = Template.bind({})
+FowardArrow.args = Icons.FowardArrow({})
+
+export const AddPeople = Template.bind({})
+AddPeople.args = Icons.AddPeople({})
+
+export const Books = Template.bind({})
+Books.args = Icons.AddPeople({})
+
+export const Clock = Template.bind({})
+Clock.args = Icons.Clock({})
+
+export const Load = Template.bind({})
+Load.args = Icons.Load({})
+
+export const Diamond = Template.bind({})
+Diamond.args = Icons.Diamond({})
+
+export const Challenge = Template.bind({})
+Challenge.args = Icons.Challenge({})
+
+export const PlayIcon = Template.bind({})
+PlayIcon.args = Icons.PlayIcon({})
+
+export const PauseIcon = Template.bind({})
+PauseIcon.args = Icons.PauseIcon({})
+
+export const Back15 = Template.bind({})
+Back15.args = Icons.Back15({})
+
+export const Foward15 = Template.bind({})
+Foward15.args = Icons.Foward15({})
+
+export const VolumeIcon = Template.bind({})
+VolumeIcon.args = Icons.VolumeIcon({})
+
+export const MuteIcon = Template.bind({})
+MuteIcon.args = Icons.MuteIcon({})
+
+export const StarFavorite = Template.bind({})
+StarFavorite.args = Icons.MuteIcon({})
+
+export const CheckIconSimple = Template.bind({})
+CheckIconSimple.args = Icons.CheckIconSimple({})
+
+export const ArrowDown = Template.bind({})
+ArrowDown.args = Icons.ArrowDown({})

package/src/shared/global.css

@@ -0,0 +1,146 @@
+/* DEFAULTS */
+@import url('https://fonts.googleapis.com/css?family=Work+Sans:regular,bold,italic&subset=latin,latin-ext');
+@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400&family=Work+Sans:wght@700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=VT323&display=swap');
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: Work Sans !important;
+  font-weight: 500 !important;
+}
+
+p {
+  margin: 0px;
+}
+
+br {
+  display: block;
+  margin: 8px 0;
+}
+
+* {
+  box-sizing: border-box;
+  outline: none;
+}
+
+.avatar {
+  vertical-align: middle;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+}
+
+.ellipsis {
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  text-overflow: ellipsis !important;
+  display: inline-block !important;
+}
+
+.tag {
+  border-radius: 13px;
+  min-height: 24px;
+  text-align: center;
+  font-size: 14px;
+  line-height: 16px;
+  display: inline-block;
+}
+
+.content {
+  padding: 24px !important;
+  border-radius: inherit;
+}
+
+.fixedBottom {
+  position: absolute !important;
+  bottom: 0px !important;
+  right: 0px !important;
+}
+
+.innerContent {
+  padding: 0px 24px 0px 24px !important;
+  border-radius: inherit;
+}
+
+.centeredVertically {
+  display: inline-flex;
+  align-items: center;
+}
+
+.cardContent {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  box-shadow: none !important;
+  border: 1px solid #c4c4c4;
+  background-color: #fff;
+  box-sizing: border-box !important;
+  border-radius: 8px !important;
+  padding: 24px !important;
+}
+
+.cardContentNoMargin {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  box-shadow: none !important;
+  border: 1px solid #c4c4c4;
+  background-color: #fff;
+  box-sizing: border-box !important;
+  border-radius: 8px !important;
+}
+
+.cardTopRightConner {
+  float: right;
+  border-radius: 0px 8px;
+}
+
+.frstButton {
+  color: #fff;
+  font-weight: bold !important;
+  background-color: #ff4d0d;
+  border-color: #ff4d0d;
+  height: 48px !important;
+  font-size: 16px !important;
+  padding-left: 16px !important;
+  padding-right: 16px !important;
+  padding-top: 18px !important;
+  padding-bottom: 18px !important;
+  text-transform: none !important;
+  border-radius: 5px 5px 5px 5px !important;
+  box-shadow: 0 2px 0 rgb(0 0 0 / 2%) !important;
+}
+
+.blue {
+  border: 1px solid #e8e8e8 !important;
+  background-color: #fff !important;
+  color: #0645ad !important;
+}
+
+.shimmer {
+  background: #f6f7f8;
+  background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #c4c4c4 40%, #c4c4c4 100%);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  color: transparent;
+
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-name: placeholderShimmer;
+  -webkit-animation-timing-function: linear;
+}
+
+@keyframes placeholderShimmer {
+  0% {
+    background-position: -468px 0;
+  }
+
+  100% {
+    background-position: 468px 0;
+  }
+}

package/src/shared/globalComponentsStyle.ts

@@ -0,0 +1,88 @@
+import styled from 'styled-components'
+import Button from '@mui/material/Button'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+
+export const SpanLink = styled.span`
+  color: #0645AD !important;
+  font-size: 16px !important;
+  font-weight: bolder !important;
+  cursor: pointer !important;
+  &:disabled {
+    color: #7C7C7C !important;
+  }
+`
+
+export const ContentTabs = styled.div`
+  .Mui-selected {
+    color: #FF4D0D !important; 
+  }
+  .MuiTab-root {
+    font-family: Work Sans !important;
+    text-transform: none !important;
+    font-weight: bolder !important;
+  }
+  .MuiTabs-indicator {
+    background-color: #FF4D0D !important;
+  }
+`
+
+export const OrangeLabel = styled.label`
+  font-size: 20px;
+  color: #ff4d0d;
+  font-weight: bolder;
+`
+
+export const OrangeLabelSlim = styled.label`
+  font-size: 20px;
+  color: #ff4d0d;
+`
+
+export const OrangeLabelSmall = styled.label`
+  font-size: 16px;
+  color: #ff4d0d;
+`
+
+export const FRSTButton = styled(Button)`
+  color: #fff !important;
+  font-weight: bold !important;
+  background-color: #FF4D0D !important;
+  border-color: #FF4D0D !important;
+  height: 48px !important;
+  font-size: 16px !important;
+  padding-left: 16px !important;
+  padding-right: 16px !important;
+  padding-top: 18px !important;
+  padding-bottom: 18px !important;
+  text-transform: none !important;
+  border-radius: 5px 5px 5px 5px !important;
+  box-shadow: 0 2px 0 rgb(0 0 0 / 2%) !important;
+  &:focus,
+  &:hover {
+    color: #fff !important;
+    background-color: #E94E1B !important;
+    border-color: #fff !important;
+  };
+  &:disabled {
+    background-color: #7C7C7C !important;
+  }
+`
+
+export const OrangeDropdown = styled(Menu)`
+  & .MuiPaper-root{
+    border-radius: 0px;
+    box-shadow: none !important;
+  }
+  ul {
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+`
+
+export const OrangeDropdownItem = styled(MenuItem)`
+  color: white !important;
+  background-color: #FF4D0D !important;
+  &:hover {
+    background-color: #F5792A !important;
+  }
+`