├── .editorconfig ├── .github └── workflows │ └── gh-pages-deploy.yml ├── .gitignore ├── .husky └── pre-commit ├── .prettierrc.json ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── package-lock.json ├── package.json ├── readme.md ├── src ├── assets │ └── img │ │ ├── facebook_cover_photo_1.png │ │ ├── facebook_cover_photo_2.png │ │ ├── facebook_profile_image.png │ │ ├── favicon.png │ │ ├── instagram_profile_image.png │ │ ├── linkedin_banner_image_1.png │ │ ├── linkedin_banner_image_2.png │ │ ├── linkedin_profile_image.png │ │ ├── logo.png │ │ ├── logo_transparent.png │ │ ├── pinterest_board_photo.png │ │ ├── pinterest_profile_image.png │ │ ├── twitter_header_photo_1.png │ │ ├── twitter_header_photo_2.png │ │ ├── twitter_profile_image.png │ │ ├── user_fallback_img.svg │ │ └── youtube_profile_image.png ├── components.d.ts ├── components │ ├── alert-component │ │ ├── alert-component.scss │ │ ├── alert-component.tsx │ │ ├── close.svg │ │ ├── error.svg │ │ ├── readme.md │ │ ├── success.svg │ │ └── warning.svg │ ├── animated-line-beneath-link │ │ ├── animated-line-beneath-link.css │ │ ├── animated-line-beneath-link.tsx │ │ └── readme.md │ ├── avatar-component │ │ ├── avatar-component.css │ │ ├── avatar-component.e2e.ts │ │ ├── avatar-component.spec.tsx │ │ ├── avatar-component.tsx │ │ └── readme.md │ ├── break-component │ │ ├── break-component.css │ │ ├── break-component.tsx │ │ ├── readme.md │ │ └── test │ │ │ ├── break-component.e2e.ts │ │ │ └── break-component.spec.tsx │ ├── data-fetcher │ │ ├── README.md │ │ ├── data-fetcher.css │ │ ├── data-fetcher.tsx │ │ └── test │ │ │ ├── data-fetcher.e2e.ts │ │ │ └── data-fetcher.spec.tsx │ ├── emoji-checkbox-component │ │ ├── checkmark-component │ │ │ ├── checkmark-component.css │ │ │ ├── checkmark-component.tsx │ │ │ ├── readme.md │ │ │ └── test │ │ │ │ └── checkmark-component.spec.tsx │ │ ├── emoji-checkbox-component.css │ │ ├── emoji-checkbox-component.tsx │ │ ├── label-component │ │ │ ├── label-component.css │ │ │ ├── label-component.tsx │ │ │ ├── readme.md │ │ │ └── test │ │ │ │ └── label-component.spec.tsx │ │ ├── readme.md │ │ └── test │ │ │ ├── emoji-checkbox-component.e2e.ts │ │ │ └── emoji-checkbox-component.spec.tsx │ ├── flowing-colored-border-button │ │ ├── flowing-colored-border-button.css │ │ ├── flowing-colored-border-button.tsx │ │ └── readme.md │ ├── google-tag-manager │ │ ├── google-tag-manager.tsx │ │ └── readme.md │ ├── hamburger-menu │ │ ├── hamburger-menu.css │ │ ├── hamburger-menu.tsx │ │ ├── readme.md │ │ └── test │ │ │ ├── hamburger-menu.e2e.ts │ │ │ └── hamburger-menu.spec.tsx │ ├── hero-component │ │ ├── hero-component.css │ │ ├── hero-component.tsx │ │ ├── readme.md │ │ └── test │ │ │ ├── hero-component.e2e.ts │ │ │ └── hero-component.spec.tsx │ ├── icon-component │ │ ├── icon-component.css │ │ ├── icon-component.tsx │ │ ├── icons-list.ts │ │ └── readme.md │ ├── image-component │ │ ├── image-component.css │ │ ├── image-component.tsx │ │ └── readme.md │ ├── modal-window │ │ ├── modal-window.css │ │ ├── modal-window.tsx │ │ ├── readme.md │ │ └── test │ │ │ ├── modal-window.e2e.ts │ │ │ └── modal-window.spec.tsx │ ├── my-button │ │ ├── my-button.css │ │ ├── my-button.tsx │ │ ├── readme.md │ │ └── test │ │ │ ├── my-button.e2e.ts │ │ │ └── my-button.spec.tsx │ ├── my-component │ │ ├── my-component.css │ │ ├── my-component.e2e.ts │ │ ├── my-component.spec.ts │ │ ├── my-component.tsx │ │ └── readme.md │ ├── my-input │ │ ├── my-input.tsx │ │ ├── readme.md │ │ └── test │ │ │ ├── my-input.e2e.ts │ │ │ └── my-input.spec.tsx │ ├── notification-badge │ │ ├── notification-badge.css │ │ ├── notification-badge.tsx │ │ ├── readme.md │ │ └── test │ │ │ ├── notification-badge.e2e.ts │ │ │ └── notification-badge.spec.tsx │ ├── sign-in-form │ │ ├── readme.md │ │ ├── sign-in-form.css │ │ ├── sign-in-form.tsx │ │ └── test │ │ │ ├── sign-in-form.e2e.ts │ │ │ └── sign-in-form.spec.tsx │ ├── toast-notify │ │ ├── Readme.md │ │ ├── test │ │ │ ├── toast-notify.e2e.ts │ │ │ └── toast-notify.spec.tsx │ │ ├── toast-notify.css │ │ ├── toast-notify.tsx │ │ └── toast-svg.tsx │ ├── tooltip-component │ │ ├── readme.md │ │ ├── tooltip-component.css │ │ └── tooltip-component.tsx │ └── typewriter-component │ │ ├── TypewriterComponent.jsx │ │ ├── readme.md │ │ └── typewriter-component.css ├── global │ ├── base.scss │ ├── global.scss │ ├── resets │ │ └── normalize.scss │ └── variables.scss ├── index.html ├── index.ts ├── pages │ └── test.html └── utils │ ├── utils.spec.ts │ └── utils.ts ├── stencil.config.ts └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | insert_final_newline = false 15 | trim_trailing_whitespace = false 16 | -------------------------------------------------------------------------------- /.github/workflows/gh-pages-deploy.yml: -------------------------------------------------------------------------------- 1 | name: Build and Deploy 2 | on: 3 | push: 4 | branches: 5 | - main 6 | jobs: 7 | build-and-deploy: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - name: Checkout 🛎️ 11 | uses: actions/checkout@v2.3.1 12 | 13 | - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built. 14 | run: | 15 | npm install 16 | npm run build 17 | 18 | - name: Deploy 🚀 19 | uses: JamesIves/github-pages-deploy-action@4.1.5 20 | with: 21 | branch: gh-pages # The branch the action should deploy to. 22 | folder: www # The folder the action should deploy. 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | www/ 3 | loader/ 4 | 5 | *~ 6 | *.sw[mnpcod] 7 | *.log 8 | *.lock 9 | *.tmp 10 | *.tmp.* 11 | log.txt 12 | *.sublime-project 13 | *.sublime-workspace 14 | 15 | .stencil/ 16 | .idea/ 17 | .vscode/ 18 | .sass-cache/ 19 | .versions/ 20 | node_modules/ 21 | $RECYCLE.BIN/ 22 | 23 | .DS_Store 24 | Thumbs.db 25 | UserInterfaceState.xcuserstate 26 | .env 27 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx pretty-quick --staged 5 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "bracketSpacing": true, 4 | "jsxBracketSameLine": false, 5 | "jsxSingleQuote": false, 6 | "quoteProps": "consistent", 7 | "printWidth": 180, 8 | "semi": true, 9 | "singleQuote": true, 10 | "tabWidth": 2, 11 | "trailingComma": "all", 12 | "useTabs": false 13 | } 14 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | ![](https://media.discordapp.net/attachments/635782799017771008/708029710814412871/ZTMCC.png) 2 | 3 | ## Introduction 4 | The Zero To Mastery Community is dedicated to providing a safe, inclusive, welcoming, and harassment-free space and experience for all community participants, regardless of gender identity and expression, sexual orientation, disability, physical appearance, socioeconomic status, body size, ethnicity, nationality, level of experience, age, religion (or lack thereof), or other identity markers. Our Code of Conduct exists because of that dedication, and we do not tolerate harassment in any form. 5 | 6 | If you cannot be bothered to read this whole thing, here is a nice and short summary: **Be a good human, be nice, and help those that need help. This group is about learning and for improving our skills as a community in order to better ourselves. If that does not fit into what you want to talk about, there are better places on the internet for you to have those discussions.** 7 | 8 | This Code of Conduct applies to __**EVERYONE**__ in **ALL** ZTM Community spaces, including: 9 | - ZTM Discord Server 10 | - ZTM open source repositories 11 | - ZTM Community events and meetups, online and offline 12 | - one-on-one communications pertaining to ZTM Community business. 13 | 14 | Participants violating our Code of Conduct may be penalized or expelled at the discretion of community management. 15 | 16 | Some ZTM Community spaces may have additional rules in place, which are posted publicly for participants. Participants are responsible for knowing and abiding by these rules. We invite all those who participate in the ZTM Community to help us create safe and positive community experiences. 17 | 18 | Consequences for noncompliance with the Code of Conduct may include a discussion with moderators, mediation with the participant you may have harassed, or as an absolute last resort, a ban from the community. 19 | 20 | ## Behaviour 21 | #### Appropriate behavior contributes to the health, safety, and longevity of the ZTM Community and includes: 22 | - Participating in an authentic and empathetic way. 23 | - Representing the ZTM Community in a positive, professional way. 24 | - Using welcoming and inclusive language. 25 | - Exercising consideration and respect in your speech and actions. 26 | - Refraining from demeaning, discriminatory, or harassing behavior and speech. 27 | - Being mindful of your surroundings and of your fellow participants. 28 | - Considering what is best for the community. 29 | - Alerting community moderators if you notice a dangerous situation, someone in distress, or unresolved violations of this Code of Conduct. 30 | - Refraining from doing something you wouldn’t do in another professional situation. 31 | - Remembering that community event venues may be shared with members of the public; being respectful to all patrons of these locations. 32 | - Keeping an open and curious mind without making assumptions about others. 33 | - Attempting collaboration before conflict. 34 | - Gracefully accepting well-communicated constructive criticism. 35 | 36 | #### Harassment or inappropriate behaviour includes: 37 | - Spamming similar content in multiple channels and/or the posting of affiliate links. 38 | - Community/Product/Affiliate advertising and promotion is prohibited unless approved by a member of the Management Team. 39 | - Discriminatory language and actions that reinforce social structures of domination related to gender, gender identity and expression, sexual orientation, disability, mental illness, neuro(a)typicality, physical appearance, body size, age, race, religion (or lack thereof), or other identity markers. 40 | - Excessive trolling or sustained, uninvited disruption. 41 | - Insults or personal attacks. 42 | - Violent or personally objectifying material. 43 | - Gratuitous or off-topic sexual images or behavior in spaces where they’re not appropriate. 44 | - Unwelcome sexual attention. 45 | - Violent language or threats of violence. 46 | - Incitement of violence towards any individual, including encouraging a person to commit suicide or to engage in self-harm. 47 | - Unwelcome comments regarding a person’s lifestyle choices and practices, including those related to food, health, parenting, drugs, and employment. 48 | - Deliberate misgendering or use of “dead” or rejected names. 49 | - Pattern of inappropriate social contact, such as requesting/assuming unprofessional levels of intimacy with others. 50 | - Continued one-on-one communication after requests to cease. 51 | - Deliberate “outing” of any aspect of a person’s identity without their consent. 52 | - Threatening to post or posting other people’s personally identifiable information without consent. 53 | - Publication of non-harassing private communication without consent. 54 | - Blogging, tweeting, or otherwise communicating with intent to harm someone’s reputation, i.e., “making an example” of a community participant. 55 | - Intimidation, stalking, or following. 56 | - Harassing or unwanted photography or recording, including logging online activity for harassment purposes. 57 | - Other conduct which could reasonably be considered inappropriate in a professional setting. 58 | - Advocating for, or encouraging, any of the above behavior. 59 | 60 | ## Reporting Procedure 61 | If you experience or witness (or have experienced or have witnessed) violations of the Code of Conduct or have any other concerns, please notify a member of the `Management Team` or `Star Mentors` on Discord, Reports of Code of Conduct violations should include as many details as possible, for example: 62 | - Discord handles of people involved 63 | - When and which channel(s) it happened 64 | - Detailed summary of what happened 65 | - Additional context / screenshots 66 | 67 | ## Enforcement 68 | - Participants will be asked to stop any harassing behavior are expected to comply immediately, even if participants do not agree with or fully acknowledge the behavior being reported. 69 | 70 | - If a participant violates the Code of Conduct, community moderators may take any action they deem appropriate to maintaining a welcoming environment for all participants, up to and including removing the participants messages, permissions or membership from the community. 71 | 72 | ## Moderators 73 | Code of Conduct moderators will: 74 | - Behind the scenes there will always be at least two people working together to resolve violations. 75 | - Respond as promptly as possible to reports of violations. 76 | - Make an effort to understand both sides of the situation. 77 | - Keep each other accountable. 78 | - Recuse themselves or be excused from handling an incident if they are listed as a possible Code of Conduct violator. 79 | 80 | 81 | 82 | ## Sources 83 | This code of conduct was adapted from [here](https://github.com/keen/community-code-of-conduct/blob/master/long-form-code-of-conduct.md) 84 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to WebBlocks 2 | 3 | We love your input! We want to make contributing to this project as easy and transparent as possible, whether it's: 4 | 5 | - Reporting a bug 6 | - Discussing the current state of the code 7 | - Submitting a fix 8 | - Proposing new features 9 | 10 | ## Before you contribute 11 | 12 | Our aim is to **keep it simple** for the developers to contribute to this project. See the folder structure (with concise description) 13 | 14 | ## How to contribute? 15 | 16 | Contribution can happen in more possible ways: 17 | 18 | 1. Work on the `index.html` and/or the styles which are located in `src/global` for making the Website beautiful to look and work at 19 | 2. Create new web components 20 | 3. Add existing web components to the `index.html` file to show how they work (with code samples and by embedding them) 21 | 4. Invent new subpages for better structuring of web component usage under `src/pages` (don't forget to link the subpages in the index.html file) 22 | 5. Document your component: 23 | - Write doc comments for the component props (writing doc comments for other parts of your code is great, but won't be written to your `readme.md`). 24 | - Run `npm run build` to generate the readme file. 25 | - Add a usage example to your `readme.md` (above the `` comment) and any other information you may find useful. 26 | 27 | ## Request new Web Components using Github's [issues](../../issues) 28 | 29 | In order to keep track of what components should get added or what new fancy component you want to add to our project, you have to start with an issue first. 30 | It makes it easier for us to keep track of what's currently under development and we can assign commits and assign issues to specific github users. 31 | 32 | This is the starting point. We can only accept PRs which contain new components if we can find a related issue for it. 33 | 34 | ## How to create a new web component the right way with StencilJs? 35 | 36 | Fortunately, Stencil ships with a pre-configured command for that. 37 | Just run 38 | 39 | ``` 40 | npm run generate 41 | ``` 42 | 43 | This will start a wizard where you can step-by-step configure your component (like the name, etc). 44 | 45 | Finally, your new directory structure gets created under `src/components/component-name` where `component-name` is the name which you have choosen in the component creation wizard. 46 | 47 | ## I don't know typescript, do I have to use typescript in order to create new components? 48 | 49 | Although it totally is recommended to use typescript for various reasons, it is not a must have to contribute. 50 | If you are not familiar with typescript at all, just rename your files from 51 | 52 | ``` 53 | *.ts and *.tsx 54 | 55 | to 56 | 57 | *.js and *.jsx 58 | ``` 59 | 60 | This project makes use of `"checkJs": false` in the tsconig.json file which makes sure that nasty typescript errors do not fire up with common js and jsx files. 61 | 62 | ## Work on the project locally 63 | 64 | In order to work and run the project locally you need NodeJs and npm installed on your system. 65 | Perform the following steps: 66 | 67 | ``` 68 | # HTTPS WAY 69 | git clone https://github.com/zero-to-mastery/WebBlocks.git 70 | 71 | # SSH WAY 72 | git clone git@github.com:zero-to-mastery/WebBlocks.git 73 | 74 | cd WebBlocks 75 | 76 | npm install 77 | npm start 78 | ``` 79 | 80 | # Git Workflow 81 | 82 | ## Fork first 🍴 83 | 84 | We use the fork approach for collaboration. Fork the repository first and sync it with the original repository. 85 | 86 | ### Steps to keep the local version up-to-date 🔄 87 | 88 | #### Inital setup 🛫 89 | 90 | - Clone your forked version 91 | `git clone ` 92 | 93 | - Update the remote Url in order to sync your fork with the original repo 94 | 95 | `git remote add upstream https://github.com/zero-to-mastery/WebBlocks.git` 96 | 97 | or by using ssh 98 | 99 | `git remote add upstream git@github.com:zero-to-mastery/WebBlocks.git` 100 | 101 | - Verify that all urls are in place 102 | `git remote -v` 103 | this should give you a output like this 104 | ``` 105 | origin https://github.com/username/WebBlocks.git (fetch) 106 | origin https://github.com/username/WebBlocks.git (push) 107 | upstream https://github.com/zero-to-mastery/WebBlocks.git (fetch) 108 | upstream https://github.com/zero-to-mastery/WebBlocks.git (push) 109 | ``` 110 | 111 | #### Keep the local repository up-to-date & change into dev branch 🔄 112 | 113 | Before starting to work on the files 114 | 115 | - Get the latest version of the main branch 116 | `git pull upstream main` 117 | - Make sure that you make your changes always in the dev branch. 118 | - Check in which branch you currently are 119 | `git branch` 120 | Then you will see something like this: 121 | ``` 122 | * dev 123 | main 124 | ``` 125 | - If you are not in the dev branch switch to the dev branch 126 | `git checkout --track origin/dev` 127 | _\* Next times you run this you can use `git checkout dev`. 128 | The `--track` flag and the remote name are only needed for the first checkout._ 129 | - Get the latest version of the dev branch 130 | `git pull upstream dev` 131 | - Start hacking 💻 132 | 133 | #### Keep the remote repository (forked version) up-to-date 🔄 134 | 135 | - Get the latest version of the dev branch (confirm that you're on the `dev` branch first) 136 | `git pull upstream dev` 137 | - Get the latest version of the main branch 138 | `git pull upstream main` 139 | - Push the new files to your forked version 140 | `git push origin dev` 141 | 142 | ## Creating PRs 🆕 143 | 144 | In order to tell us which changes you want to make or what awesome new component you want to share with the world in our project, push your changes to your fork to the **dev branch** and create a pull request to the original repository. 145 | 146 | This makes sure that we always have a working and stable main branch after we tested your changes. 147 | If we made our tests and the **dev branch** is stable, we will merge the **dev branch** into the main branch without closing the **dev branch**. 148 | 149 | In order to make a PR on Github, follow this steps: 150 | 151 | - Add your files for staging with 152 | `git add .` for adding all files or 153 | `git add ` for adding specific files 154 | - Commit your changes 155 | `git commit -m "commit message"` 156 | - Push your changes to the forked version 157 | `git push origin dev` 158 | - Move over to your github page and click on "Make pull request" 159 | - Let the world know that you made a awesome PR to a great open source project by sharing it on [Twitter](https://ctt.ac/foi8n) 160 | 161 | ## This project uses the MIT License 162 | 163 | When you submit code changes, your submissions are understood to be under the same MIT License that covers the project. Feel free to contact the maintainers if that's a concern. 164 | 165 | ## Report bugs using Github's [issues](../../issues) 166 | 167 | We use GitHub issues to track public bugs. Report a bug by [opening a new issue](../../issues); it's that easy! 168 | 169 | ## Write bug reports with detail, background, and sample code 170 | 171 | **Great Bug Reports** tend to have: 172 | 173 | - A quick summary and/or background 174 | - Steps to reproduce 175 | - Be specific! 176 | - Give sample code if you can. 177 | - What you expected would happen 178 | - What actually happens 179 | - Notes (possibly including why you think this might be happening, or stuff you tried that didn't work) 180 | 181 | People _love_ thorough bug reports. I'm not even kidding. 182 | 183 | ## Use a Consistent Coding Style 184 | 185 | Observe the coding style of the project and add your code also in the same style. 186 | **Don't make major changes** (Like changing the complete folder structure) 187 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webblocks", 3 | "homepage": "https://zero-to-mastery.github.io/WebBlocks/", 4 | "version": "0.0.1", 5 | "description": "Hacktoberfest 2021 - ZTM Community Project", 6 | "main": "dist/index.cjs.js", 7 | "module": "dist/custom-elements/index.js", 8 | "es2015": "dist/esm/index.mjs", 9 | "es2017": "dist/esm/index.mjs", 10 | "types": "dist/custom-elements/index.d.ts", 11 | "collection": "dist/collection/collection-manifest.json", 12 | "collection:main": "dist/collection/index.js", 13 | "unpkg": "dist/webblocks/webblocks.esm.js", 14 | "files": [ 15 | "dist/", 16 | "loader/" 17 | ], 18 | "scripts": { 19 | "build": "stencil build --docs", 20 | "start": "stencil build --dev --watch --serve", 21 | "test": "stencil test --spec --e2e", 22 | "test.watch": "stencil test --spec --e2e --watchAll", 23 | "generate": "stencil generate", 24 | "prepare": "husky install" 25 | }, 26 | "dependencies": { 27 | "@stencil/core": "^2.7.0", 28 | "typewriter-effect": "^2.18.2" 29 | }, 30 | "devDependencies": { 31 | "@stencil/helmet": "^0.3.2", 32 | "@stencil/sass": "^1.4.1", 33 | "@types/jest": "^26.0.24", 34 | "husky": "^7.0.0", 35 | "jest": "^27.2.5", 36 | "jest-cli": "^27.2.5", 37 | "prettier": "^2.4.1", 38 | "pretty-quick": "^3.1.1", 39 | "puppeteer": "^10.0.0" 40 | }, 41 | "license": "MIT" 42 | } 43 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # WebBlocks 2 | 3 | ![WebBlocks](https://github.com/zero-to-mastery/WebBlocks/blob/main/src/assets/img/facebook_cover_photo_2.png) 4 | 5 | #### ![](https://img.shields.io/badge/Html%20%26%20Javascript%20%26%20CSS%20PROJECT%20Powered%20by%20StencilJS-WebBlocks-00adb5?style=for-the-badge&logo=JavaScript) 6 | 7 | --- 8 | 9 | ## TL;DR 10 | 11 | > There is a big hype about front-end frameworks all over the place. But what if we could build components without the need to reach out for big players like React,Vue and Angular? 12 | > 13 | > Turns out, this is a totally possible thing to do and it is quite easy using [StencilJs](https://stenciljs.com/docs/getting-started) 14 | > 15 | > Not only that we can build components which we can use in vanilla HTML, JS and CSS projects, but also creating components 16 | > which we can also reuse with frameworks like React, Vue and Angular. 17 | > 18 | > So the goal of this project is to exactly showcase that 19 | 20 | --- 21 | 22 | ## Contributing 23 | 24 | Have a look at our [CONTRIBUTING.md](https://github.com/zero-to-mastery/WebBlocks/blob/main/CONTRIBUTING.md) file where we explain 25 | 26 | - How to contribute? 27 | - Request new Web Components using Github's issues 28 | - How to create a new web component the right way with StencilJs? 29 | - Typescript vs. Javascript 30 | - Git Workflow 31 | - Local project setup 32 | - Creating Prs 33 | 34 | ## Where can I find the deployed version? 🤔 35 | 36 | This project hosts a deployed version right here on Github. 37 | 38 | On each merge into the main branch, the awesome Github Action [github-pages-deploy-action](https://github.com/JamesIves/github-pages-deploy-action) takes care of deploying the static files to the gh-pages branch. 39 | 40 | ## Goal 🏁 41 | 42 | The goal of this project is to showcase what we can do with web components and eventually to create a component library that we can host on npm. 43 | 44 | ## Who we are? 45 | 46 | Our project team contains members from the [zero-to-mastery](https://zerotomastery.io) community. 47 | 48 | #### Project Lead/Maintainer 49 | 50 | > [![r4pt0s](https://avatars2.githubusercontent.com/u/29685827?s=100&v=4)](https://github.com/r4pt0s) [![tristian](https://avatars.githubusercontent.com/u/59102133?s=100&v=4)](https://github.com/IM-Deane/IM-Deane) 51 | 52 | This project was bootstrapped with [StencilJs](https://stenciljs.com/docs/getting-started). 53 | -------------------------------------------------------------------------------- /src/assets/img/facebook_cover_photo_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/WebBlocks/1c9c0626b005aa012b5f32748d715da7ec9986d8/src/assets/img/facebook_cover_photo_1.png -------------------------------------------------------------------------------- /src/assets/img/facebook_cover_photo_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/WebBlocks/1c9c0626b005aa012b5f32748d715da7ec9986d8/src/assets/img/facebook_cover_photo_2.png -------------------------------------------------------------------------------- /src/assets/img/facebook_profile_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/WebBlocks/1c9c0626b005aa012b5f32748d715da7ec9986d8/src/assets/img/facebook_profile_image.png -------------------------------------------------------------------------------- /src/assets/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/WebBlocks/1c9c0626b005aa012b5f32748d715da7ec9986d8/src/assets/img/favicon.png -------------------------------------------------------------------------------- /src/assets/img/instagram_profile_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/WebBlocks/1c9c0626b005aa012b5f32748d715da7ec9986d8/src/assets/img/instagram_profile_image.png -------------------------------------------------------------------------------- /src/assets/img/linkedin_banner_image_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/WebBlocks/1c9c0626b005aa012b5f32748d715da7ec9986d8/src/assets/img/linkedin_banner_image_1.png -------------------------------------------------------------------------------- /src/assets/img/linkedin_banner_image_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/WebBlocks/1c9c0626b005aa012b5f32748d715da7ec9986d8/src/assets/img/linkedin_banner_image_2.png -------------------------------------------------------------------------------- /src/assets/img/linkedin_profile_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/WebBlocks/1c9c0626b005aa012b5f32748d715da7ec9986d8/src/assets/img/linkedin_profile_image.png -------------------------------------------------------------------------------- /src/assets/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/WebBlocks/1c9c0626b005aa012b5f32748d715da7ec9986d8/src/assets/img/logo.png -------------------------------------------------------------------------------- /src/assets/img/logo_transparent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/WebBlocks/1c9c0626b005aa012b5f32748d715da7ec9986d8/src/assets/img/logo_transparent.png -------------------------------------------------------------------------------- /src/assets/img/pinterest_board_photo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/WebBlocks/1c9c0626b005aa012b5f32748d715da7ec9986d8/src/assets/img/pinterest_board_photo.png -------------------------------------------------------------------------------- /src/assets/img/pinterest_profile_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/WebBlocks/1c9c0626b005aa012b5f32748d715da7ec9986d8/src/assets/img/pinterest_profile_image.png -------------------------------------------------------------------------------- /src/assets/img/twitter_header_photo_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/WebBlocks/1c9c0626b005aa012b5f32748d715da7ec9986d8/src/assets/img/twitter_header_photo_1.png -------------------------------------------------------------------------------- /src/assets/img/twitter_header_photo_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/WebBlocks/1c9c0626b005aa012b5f32748d715da7ec9986d8/src/assets/img/twitter_header_photo_2.png -------------------------------------------------------------------------------- /src/assets/img/twitter_profile_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/WebBlocks/1c9c0626b005aa012b5f32748d715da7ec9986d8/src/assets/img/twitter_profile_image.png -------------------------------------------------------------------------------- /src/assets/img/user_fallback_img.svg: -------------------------------------------------------------------------------- 1 | 2 | 9 | 10 | Abstract user icon 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/assets/img/youtube_profile_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/WebBlocks/1c9c0626b005aa012b5f32748d715da7ec9986d8/src/assets/img/youtube_profile_image.png -------------------------------------------------------------------------------- /src/components.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | /* tslint:disable */ 3 | /** 4 | * This is an autogenerated file created by the Stencil compiler. 5 | * It contains typing information for all components that exist in this project. 6 | */ 7 | import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; 8 | export namespace Components { 9 | interface AlertComponent { 10 | "action": string; 11 | "icon": string; 12 | "text": string; 13 | "variant": string; 14 | "width": string; 15 | } 16 | interface AnimatedLineBeneathLink { 17 | "text": string; 18 | } 19 | interface AvatarComponent { 20 | /** 21 | * Alternate text when src image breaks 22 | * @type {string} 23 | * @memberof AvatarComponent 24 | */ 25 | "alt": string; 26 | /** 27 | * Custom class for the image 28 | * @type {string} 29 | * @memberof AvatarComponent 30 | */ 31 | "customClass": string; 32 | /** 33 | * Avatar image size 34 | * @type {('small' | 'medium' | 'large')} 35 | * @memberof AvatarComponent 36 | */ 37 | "size": 'small' | 'medium' | 'large'; 38 | /** 39 | * Image source url 40 | * @type {string} 41 | * @memberof AvatarComponent 42 | */ 43 | "src": string; 44 | /** 45 | * Show title of the image on hover 46 | * @type {string} 47 | * @memberof AvatarComponent 48 | */ 49 | "tooltipTxt": string; 50 | /** 51 | * Avatar image shape variants 52 | * @type {('circular' | 'rounded' | 'square')} 53 | * @memberof AvatarComponent 54 | */ 55 | "variant": 'circular' | 'rounded' | 'square'; 56 | } 57 | interface BreakComponent { 58 | "horizontalDistance": string; 59 | "type": string; 60 | "verticalDistance": string; 61 | } 62 | interface CheckmarkComponent { 63 | /** 64 | * Un-checked state emoji HEX code 65 | */ 66 | "checkFalse": string; 67 | /** 68 | * Checked state emoji HEX code 69 | */ 70 | "checkTrue": string; 71 | /** 72 | * Checkbox state 73 | */ 74 | "checked": boolean; 75 | } 76 | interface DataFetcher { 77 | } 78 | interface EmojiCheckboxComponent { 79 | /** 80 | * The initial state of checkbox 81 | */ 82 | "checked": boolean; 83 | /** 84 | * Checkbox name 85 | */ 86 | "name": string; 87 | } 88 | interface FlowingColoredBorderButton { 89 | } 90 | interface GoogleTagManager { 91 | /** 92 | * The google tag manage container ID 93 | */ 94 | "containerId": string; 95 | } 96 | interface HamburgerMenu { 97 | } 98 | interface HeroComponent { 99 | "background": string; 100 | "heading": string; 101 | "height": string; 102 | "imgurl": string; 103 | "width": string; 104 | } 105 | interface IconComponent { 106 | "background": string; 107 | "bordercolor": string; 108 | "bordersize": string; 109 | "bordertype": string; 110 | "hovercolorbg": string; 111 | "hovercolorprimary": string; 112 | "label": string; 113 | "name": string; 114 | "primarycolor": string; 115 | "size": string; 116 | "tooltip": string; 117 | "tooltippos": string; 118 | } 119 | interface ImageComponent { 120 | "srcImg": string; 121 | "srcImgName": string; 122 | "srcNextGen": string; 123 | } 124 | interface LabelComponent { 125 | /** 126 | * Checkbox state 127 | */ 128 | "checked": boolean; 129 | } 130 | interface ModalWindow { 131 | "cancelText": string; 132 | "confirmText": string; 133 | "handleCancel": Function; 134 | "handleConfirm": Function; 135 | "heading": string; 136 | "pointerEvents": boolean; 137 | } 138 | interface MyButton { 139 | "color": string; 140 | "icon": string; 141 | "name": string; 142 | "type": string; 143 | "typeButton": string; 144 | "width": string; 145 | } 146 | interface MyComponent { 147 | /** 148 | * The text color 149 | */ 150 | "color": string; 151 | /** 152 | * The first name 153 | */ 154 | "first": string; 155 | /** 156 | * The last name 157 | */ 158 | "last": string; 159 | /** 160 | * The middle name 161 | */ 162 | "middle": string; 163 | } 164 | interface MyInput { 165 | "bordered": boolean; 166 | "defaultValue": string; 167 | "disabled": boolean; 168 | "pattern": string; 169 | "placeholder": string; 170 | "size": string; 171 | } 172 | interface NotificationBadge { 173 | "totalNotifications": string; 174 | } 175 | interface SignInForm { 176 | "className": string; 177 | "maxLengthEmail": string; 178 | "maxLengthPassword": string; 179 | "minLengthEmail": string; 180 | "minLengthPassword": string; 181 | } 182 | interface ToastNotify { 183 | "Heading": string; 184 | "indicationIcon": string; 185 | } 186 | interface TooltipComponent { 187 | /** 188 | * Background color 189 | */ 190 | "backgroundColor": string; 191 | /** 192 | * Text color 193 | */ 194 | "color": string; 195 | /** 196 | * Font size 197 | */ 198 | "fontSize": string; 199 | /** 200 | * Position of tooltip. left, right, top, bottom 201 | */ 202 | "position": string; 203 | /** 204 | * Text to be displayed in the tooltip 205 | */ 206 | "text": string; 207 | } 208 | } 209 | declare global { 210 | interface HTMLAlertComponentElement extends Components.AlertComponent, HTMLStencilElement { 211 | } 212 | var HTMLAlertComponentElement: { 213 | prototype: HTMLAlertComponentElement; 214 | new (): HTMLAlertComponentElement; 215 | }; 216 | interface HTMLAnimatedLineBeneathLinkElement extends Components.AnimatedLineBeneathLink, HTMLStencilElement { 217 | } 218 | var HTMLAnimatedLineBeneathLinkElement: { 219 | prototype: HTMLAnimatedLineBeneathLinkElement; 220 | new (): HTMLAnimatedLineBeneathLinkElement; 221 | }; 222 | interface HTMLAvatarComponentElement extends Components.AvatarComponent, HTMLStencilElement { 223 | } 224 | var HTMLAvatarComponentElement: { 225 | prototype: HTMLAvatarComponentElement; 226 | new (): HTMLAvatarComponentElement; 227 | }; 228 | interface HTMLBreakComponentElement extends Components.BreakComponent, HTMLStencilElement { 229 | } 230 | var HTMLBreakComponentElement: { 231 | prototype: HTMLBreakComponentElement; 232 | new (): HTMLBreakComponentElement; 233 | }; 234 | interface HTMLCheckmarkComponentElement extends Components.CheckmarkComponent, HTMLStencilElement { 235 | } 236 | var HTMLCheckmarkComponentElement: { 237 | prototype: HTMLCheckmarkComponentElement; 238 | new (): HTMLCheckmarkComponentElement; 239 | }; 240 | interface HTMLDataFetcherElement extends Components.DataFetcher, HTMLStencilElement { 241 | } 242 | var HTMLDataFetcherElement: { 243 | prototype: HTMLDataFetcherElement; 244 | new (): HTMLDataFetcherElement; 245 | }; 246 | interface HTMLEmojiCheckboxComponentElement extends Components.EmojiCheckboxComponent, HTMLStencilElement { 247 | } 248 | var HTMLEmojiCheckboxComponentElement: { 249 | prototype: HTMLEmojiCheckboxComponentElement; 250 | new (): HTMLEmojiCheckboxComponentElement; 251 | }; 252 | interface HTMLFlowingColoredBorderButtonElement extends Components.FlowingColoredBorderButton, HTMLStencilElement { 253 | } 254 | var HTMLFlowingColoredBorderButtonElement: { 255 | prototype: HTMLFlowingColoredBorderButtonElement; 256 | new (): HTMLFlowingColoredBorderButtonElement; 257 | }; 258 | interface HTMLGoogleTagManagerElement extends Components.GoogleTagManager, HTMLStencilElement { 259 | } 260 | var HTMLGoogleTagManagerElement: { 261 | prototype: HTMLGoogleTagManagerElement; 262 | new (): HTMLGoogleTagManagerElement; 263 | }; 264 | interface HTMLHamburgerMenuElement extends Components.HamburgerMenu, HTMLStencilElement { 265 | } 266 | var HTMLHamburgerMenuElement: { 267 | prototype: HTMLHamburgerMenuElement; 268 | new (): HTMLHamburgerMenuElement; 269 | }; 270 | interface HTMLHeroComponentElement extends Components.HeroComponent, HTMLStencilElement { 271 | } 272 | var HTMLHeroComponentElement: { 273 | prototype: HTMLHeroComponentElement; 274 | new (): HTMLHeroComponentElement; 275 | }; 276 | interface HTMLIconComponentElement extends Components.IconComponent, HTMLStencilElement { 277 | } 278 | var HTMLIconComponentElement: { 279 | prototype: HTMLIconComponentElement; 280 | new (): HTMLIconComponentElement; 281 | }; 282 | interface HTMLImageComponentElement extends Components.ImageComponent, HTMLStencilElement { 283 | } 284 | var HTMLImageComponentElement: { 285 | prototype: HTMLImageComponentElement; 286 | new (): HTMLImageComponentElement; 287 | }; 288 | interface HTMLLabelComponentElement extends Components.LabelComponent, HTMLStencilElement { 289 | } 290 | var HTMLLabelComponentElement: { 291 | prototype: HTMLLabelComponentElement; 292 | new (): HTMLLabelComponentElement; 293 | }; 294 | interface HTMLModalWindowElement extends Components.ModalWindow, HTMLStencilElement { 295 | } 296 | var HTMLModalWindowElement: { 297 | prototype: HTMLModalWindowElement; 298 | new (): HTMLModalWindowElement; 299 | }; 300 | interface HTMLMyButtonElement extends Components.MyButton, HTMLStencilElement { 301 | } 302 | var HTMLMyButtonElement: { 303 | prototype: HTMLMyButtonElement; 304 | new (): HTMLMyButtonElement; 305 | }; 306 | interface HTMLMyComponentElement extends Components.MyComponent, HTMLStencilElement { 307 | } 308 | var HTMLMyComponentElement: { 309 | prototype: HTMLMyComponentElement; 310 | new (): HTMLMyComponentElement; 311 | }; 312 | interface HTMLMyInputElement extends Components.MyInput, HTMLStencilElement { 313 | } 314 | var HTMLMyInputElement: { 315 | prototype: HTMLMyInputElement; 316 | new (): HTMLMyInputElement; 317 | }; 318 | interface HTMLNotificationBadgeElement extends Components.NotificationBadge, HTMLStencilElement { 319 | } 320 | var HTMLNotificationBadgeElement: { 321 | prototype: HTMLNotificationBadgeElement; 322 | new (): HTMLNotificationBadgeElement; 323 | }; 324 | interface HTMLSignInFormElement extends Components.SignInForm, HTMLStencilElement { 325 | } 326 | var HTMLSignInFormElement: { 327 | prototype: HTMLSignInFormElement; 328 | new (): HTMLSignInFormElement; 329 | }; 330 | interface HTMLToastNotifyElement extends Components.ToastNotify, HTMLStencilElement { 331 | } 332 | var HTMLToastNotifyElement: { 333 | prototype: HTMLToastNotifyElement; 334 | new (): HTMLToastNotifyElement; 335 | }; 336 | interface HTMLTooltipComponentElement extends Components.TooltipComponent, HTMLStencilElement { 337 | } 338 | var HTMLTooltipComponentElement: { 339 | prototype: HTMLTooltipComponentElement; 340 | new (): HTMLTooltipComponentElement; 341 | }; 342 | interface HTMLElementTagNameMap { 343 | "alert-component": HTMLAlertComponentElement; 344 | "animated-line-beneath-link": HTMLAnimatedLineBeneathLinkElement; 345 | "avatar-component": HTMLAvatarComponentElement; 346 | "break-component": HTMLBreakComponentElement; 347 | "checkmark-component": HTMLCheckmarkComponentElement; 348 | "data-fetcher": HTMLDataFetcherElement; 349 | "emoji-checkbox-component": HTMLEmojiCheckboxComponentElement; 350 | "flowing-colored-border-button": HTMLFlowingColoredBorderButtonElement; 351 | "google-tag-manager": HTMLGoogleTagManagerElement; 352 | "hamburger-menu": HTMLHamburgerMenuElement; 353 | "hero-component": HTMLHeroComponentElement; 354 | "icon-component": HTMLIconComponentElement; 355 | "image-component": HTMLImageComponentElement; 356 | "label-component": HTMLLabelComponentElement; 357 | "modal-window": HTMLModalWindowElement; 358 | "my-button": HTMLMyButtonElement; 359 | "my-component": HTMLMyComponentElement; 360 | "my-input": HTMLMyInputElement; 361 | "notification-badge": HTMLNotificationBadgeElement; 362 | "sign-in-form": HTMLSignInFormElement; 363 | "toast-notify": HTMLToastNotifyElement; 364 | "tooltip-component": HTMLTooltipComponentElement; 365 | } 366 | } 367 | declare namespace LocalJSX { 368 | interface AlertComponent { 369 | "action"?: string; 370 | "icon"?: string; 371 | "text"?: string; 372 | "variant"?: string; 373 | "width"?: string; 374 | } 375 | interface AnimatedLineBeneathLink { 376 | "text"?: string; 377 | } 378 | interface AvatarComponent { 379 | /** 380 | * Alternate text when src image breaks 381 | * @type {string} 382 | * @memberof AvatarComponent 383 | */ 384 | "alt"?: string; 385 | /** 386 | * Custom class for the image 387 | * @type {string} 388 | * @memberof AvatarComponent 389 | */ 390 | "customClass"?: string; 391 | /** 392 | * Avatar image size 393 | * @type {('small' | 'medium' | 'large')} 394 | * @memberof AvatarComponent 395 | */ 396 | "size"?: 'small' | 'medium' | 'large'; 397 | /** 398 | * Image source url 399 | * @type {string} 400 | * @memberof AvatarComponent 401 | */ 402 | "src"?: string; 403 | /** 404 | * Show title of the image on hover 405 | * @type {string} 406 | * @memberof AvatarComponent 407 | */ 408 | "tooltipTxt"?: string; 409 | /** 410 | * Avatar image shape variants 411 | * @type {('circular' | 'rounded' | 'square')} 412 | * @memberof AvatarComponent 413 | */ 414 | "variant"?: 'circular' | 'rounded' | 'square'; 415 | } 416 | interface BreakComponent { 417 | "horizontalDistance"?: string; 418 | "type"?: string; 419 | "verticalDistance"?: string; 420 | } 421 | interface CheckmarkComponent { 422 | /** 423 | * Un-checked state emoji HEX code 424 | */ 425 | "checkFalse"?: string; 426 | /** 427 | * Checked state emoji HEX code 428 | */ 429 | "checkTrue"?: string; 430 | /** 431 | * Checkbox state 432 | */ 433 | "checked"?: boolean; 434 | } 435 | interface DataFetcher { 436 | } 437 | interface EmojiCheckboxComponent { 438 | /** 439 | * The initial state of checkbox 440 | */ 441 | "checked"?: boolean; 442 | /** 443 | * Checkbox name 444 | */ 445 | "name"?: string; 446 | } 447 | interface FlowingColoredBorderButton { 448 | } 449 | interface GoogleTagManager { 450 | /** 451 | * The google tag manage container ID 452 | */ 453 | "containerId"?: string; 454 | } 455 | interface HamburgerMenu { 456 | } 457 | interface HeroComponent { 458 | "background"?: string; 459 | "heading"?: string; 460 | "height"?: string; 461 | "imgurl"?: string; 462 | "width"?: string; 463 | } 464 | interface IconComponent { 465 | "background"?: string; 466 | "bordercolor"?: string; 467 | "bordersize"?: string; 468 | "bordertype"?: string; 469 | "hovercolorbg"?: string; 470 | "hovercolorprimary"?: string; 471 | "label"?: string; 472 | "name"?: string; 473 | "primarycolor"?: string; 474 | "size"?: string; 475 | "tooltip"?: string; 476 | "tooltippos"?: string; 477 | } 478 | interface ImageComponent { 479 | "srcImg"?: string; 480 | "srcImgName"?: string; 481 | "srcNextGen"?: string; 482 | } 483 | interface LabelComponent { 484 | /** 485 | * Checkbox state 486 | */ 487 | "checked"?: boolean; 488 | } 489 | interface ModalWindow { 490 | "cancelText"?: string; 491 | "confirmText"?: string; 492 | "handleCancel"?: Function; 493 | "handleConfirm"?: Function; 494 | "heading"?: string; 495 | "pointerEvents"?: boolean; 496 | } 497 | interface MyButton { 498 | "color"?: string; 499 | "icon"?: string; 500 | "name"?: string; 501 | "type"?: string; 502 | "typeButton"?: string; 503 | "width"?: string; 504 | } 505 | interface MyComponent { 506 | /** 507 | * The text color 508 | */ 509 | "color"?: string; 510 | /** 511 | * The first name 512 | */ 513 | "first"?: string; 514 | /** 515 | * The last name 516 | */ 517 | "last"?: string; 518 | /** 519 | * The middle name 520 | */ 521 | "middle"?: string; 522 | } 523 | interface MyInput { 524 | "bordered"?: boolean; 525 | "defaultValue"?: string; 526 | "disabled"?: boolean; 527 | "pattern"?: string; 528 | "placeholder"?: string; 529 | "size"?: string; 530 | } 531 | interface NotificationBadge { 532 | "totalNotifications"?: string; 533 | } 534 | interface SignInForm { 535 | "className"?: string; 536 | "maxLengthEmail"?: string; 537 | "maxLengthPassword"?: string; 538 | "minLengthEmail"?: string; 539 | "minLengthPassword"?: string; 540 | } 541 | interface ToastNotify { 542 | "Heading"?: string; 543 | "indicationIcon"?: string; 544 | } 545 | interface TooltipComponent { 546 | /** 547 | * Background color 548 | */ 549 | "backgroundColor"?: string; 550 | /** 551 | * Text color 552 | */ 553 | "color"?: string; 554 | /** 555 | * Font size 556 | */ 557 | "fontSize"?: string; 558 | /** 559 | * Position of tooltip. left, right, top, bottom 560 | */ 561 | "position"?: string; 562 | /** 563 | * Text to be displayed in the tooltip 564 | */ 565 | "text"?: string; 566 | } 567 | interface IntrinsicElements { 568 | "alert-component": AlertComponent; 569 | "animated-line-beneath-link": AnimatedLineBeneathLink; 570 | "avatar-component": AvatarComponent; 571 | "break-component": BreakComponent; 572 | "checkmark-component": CheckmarkComponent; 573 | "data-fetcher": DataFetcher; 574 | "emoji-checkbox-component": EmojiCheckboxComponent; 575 | "flowing-colored-border-button": FlowingColoredBorderButton; 576 | "google-tag-manager": GoogleTagManager; 577 | "hamburger-menu": HamburgerMenu; 578 | "hero-component": HeroComponent; 579 | "icon-component": IconComponent; 580 | "image-component": ImageComponent; 581 | "label-component": LabelComponent; 582 | "modal-window": ModalWindow; 583 | "my-button": MyButton; 584 | "my-component": MyComponent; 585 | "my-input": MyInput; 586 | "notification-badge": NotificationBadge; 587 | "sign-in-form": SignInForm; 588 | "toast-notify": ToastNotify; 589 | "tooltip-component": TooltipComponent; 590 | } 591 | } 592 | export { LocalJSX as JSX }; 593 | declare module "@stencil/core" { 594 | export namespace JSX { 595 | interface IntrinsicElements { 596 | "alert-component": LocalJSX.AlertComponent & JSXBase.HTMLAttributes; 597 | "animated-line-beneath-link": LocalJSX.AnimatedLineBeneathLink & JSXBase.HTMLAttributes; 598 | "avatar-component": LocalJSX.AvatarComponent & JSXBase.HTMLAttributes; 599 | "break-component": LocalJSX.BreakComponent & JSXBase.HTMLAttributes; 600 | "checkmark-component": LocalJSX.CheckmarkComponent & JSXBase.HTMLAttributes; 601 | "data-fetcher": LocalJSX.DataFetcher & JSXBase.HTMLAttributes; 602 | "emoji-checkbox-component": LocalJSX.EmojiCheckboxComponent & JSXBase.HTMLAttributes; 603 | "flowing-colored-border-button": LocalJSX.FlowingColoredBorderButton & JSXBase.HTMLAttributes; 604 | "google-tag-manager": LocalJSX.GoogleTagManager & JSXBase.HTMLAttributes; 605 | "hamburger-menu": LocalJSX.HamburgerMenu & JSXBase.HTMLAttributes; 606 | "hero-component": LocalJSX.HeroComponent & JSXBase.HTMLAttributes; 607 | "icon-component": LocalJSX.IconComponent & JSXBase.HTMLAttributes; 608 | "image-component": LocalJSX.ImageComponent & JSXBase.HTMLAttributes; 609 | "label-component": LocalJSX.LabelComponent & JSXBase.HTMLAttributes; 610 | "modal-window": LocalJSX.ModalWindow & JSXBase.HTMLAttributes; 611 | "my-button": LocalJSX.MyButton & JSXBase.HTMLAttributes; 612 | "my-component": LocalJSX.MyComponent & JSXBase.HTMLAttributes; 613 | "my-input": LocalJSX.MyInput & JSXBase.HTMLAttributes; 614 | "notification-badge": LocalJSX.NotificationBadge & JSXBase.HTMLAttributes; 615 | "sign-in-form": LocalJSX.SignInForm & JSXBase.HTMLAttributes; 616 | "toast-notify": LocalJSX.ToastNotify & JSXBase.HTMLAttributes; 617 | "tooltip-component": LocalJSX.TooltipComponent & JSXBase.HTMLAttributes; 618 | } 619 | } 620 | } 621 | -------------------------------------------------------------------------------- /src/components/alert-component/alert-component.scss: -------------------------------------------------------------------------------- 1 | $errorTextColor: #936463; 2 | $errorIconColor: #f0625f; 3 | $errorColorBg: #fdeded; 4 | 5 | $warningTextColor: #947f63; 6 | $warningIconColor: #ffa117; 7 | $warningColorBg: #fff4e5; 8 | 9 | $successTextColor: #2a502c; 10 | $successIconColor: #45c549; 11 | $successColorBg: #edf7ed; 12 | 13 | $infoTextColor: #4f8096; 14 | $infoIconColor: #4f8096; 15 | $infoColorBg: #e5f6fd; 16 | 17 | @mixin svgBg($color) { 18 | polygon, 19 | line, 20 | circle, 21 | path { 22 | stroke: $color; 23 | } 24 | } 25 | 26 | * { 27 | box-sizing: border-box; 28 | } 29 | 30 | .alert { 31 | display: flex; 32 | justify-content: space-between; 33 | align-items: center; 34 | padding: 1rem; 35 | border-radius: 0.5rem; 36 | width: 100%; 37 | max-width: 300px; 38 | 39 | > div { 40 | display: flex; 41 | align-items: center; 42 | } 43 | 44 | svg, 45 | img { 46 | width: 20px; 47 | margin-right: 0.6rem; 48 | } 49 | } 50 | 51 | .error { 52 | background-color: $errorColorBg; 53 | color: $errorTextColor; 54 | @include svgBg($errorIconColor); 55 | } 56 | 57 | .warning { 58 | background-color: $warningColorBg; 59 | color: $warningTextColor; 60 | @include svgBg($warningIconColor); 61 | } 62 | 63 | .success { 64 | background-color: $successColorBg; 65 | color: $successTextColor; 66 | @include svgBg($successIconColor); 67 | } 68 | 69 | .info { 70 | background-color: $infoColorBg; 71 | color: $infoTextColor; 72 | @include svgBg($infoIconColor); 73 | } 74 | 75 | .error-outline { 76 | border: 3px solid darken($errorColorBg, 10%); 77 | color: $errorTextColor; 78 | @include svgBg($errorIconColor); 79 | } 80 | 81 | .success-outline { 82 | border: 3px solid darken($successColorBg, 10%); 83 | color: $successTextColor; 84 | @include svgBg($successIconColor); 85 | } 86 | .warning-outline { 87 | border: 3px solid darken($warningColorBg, 10%); 88 | color: $warningTextColor; 89 | @include svgBg($warningIconColor); 90 | } 91 | .info-outline { 92 | border: 3px solid darken($infoColorBg, 10%); 93 | color: $infoTextColor; 94 | @include svgBg($infoIconColor); 95 | } 96 | 97 | .closeBtn { 98 | width: 30px; 99 | height: 30px; 100 | display: flex; 101 | justify-content: center; 102 | align-items: center; 103 | background: transparent; 104 | border: none; 105 | border-radius: 50%; 106 | cursor: pointer; 107 | 108 | svg { 109 | margin-right: 0; 110 | width: 20px; 111 | height: 20px; 112 | pointer-events: none; 113 | } 114 | 115 | &:hover { 116 | background: rgba(0, 0, 0, 0.055); 117 | } 118 | } 119 | 120 | .closeAlert { 121 | display: none; 122 | } 123 | -------------------------------------------------------------------------------- /src/components/alert-component/alert-component.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Prop, h, Host } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'alert-component', 5 | styleUrl: 'alert-component.scss', 6 | }) 7 | export class Alert { 8 | @Prop() text: string; 9 | @Prop() icon: string; 10 | @Prop() variant: string; 11 | @Prop() width: string; 12 | @Prop() action: string; 13 | 14 | checkVariant(variant) { 15 | switch (variant) { 16 | case 'error': 17 | return variant; 18 | case 'success': 19 | return variant; 20 | case 'warning': 21 | return variant; 22 | case 'info': 23 | return variant; 24 | case 'error-outline': 25 | return variant; 26 | case 'success-outline': 27 | return variant; 28 | case 'warning-outline': 29 | return variant; 30 | case 'info-outline': 31 | return variant; 32 | default: 33 | return 'success'; 34 | } 35 | } 36 | 37 | render() { 38 | const errorIcon = ( 39 | 40 | 41 | 42 | 43 | 44 | ); 45 | 46 | const infoIcon = ( 47 | 48 | 49 | 50 | 51 | 52 | ); 53 | 54 | const warningIcon = ( 55 | 56 | 57 | 58 | 59 | 60 | ); 61 | 62 | const successIcon = ( 63 | 64 | 70 | 71 | ); 72 | 73 | function checkIcon(icon) { 74 | switch (icon) { 75 | case 'error': 76 | return errorIcon; 77 | case 'success': 78 | return successIcon; 79 | case 'warning': 80 | return warningIcon; 81 | case 'info': 82 | return infoIcon; 83 | case 'error-outline': 84 | return errorIcon; 85 | case 'success-outline': 86 | return successIcon; 87 | case 'warning-outline': 88 | return warningIcon; 89 | case 'info-outline': 90 | return infoIcon; 91 | default: 92 | return successIcon; 93 | } 94 | } 95 | 96 | const width = this.width ? this.width : '300px'; 97 | 98 | const alert = ( 99 | 100 |
101 |
102 | {this.icon ? : checkIcon(this.variant)} 103 | {this.text} 104 |
105 |
106 | 107 | ); 108 | 109 | return alert; 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /src/components/alert-component/close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/alert-component/error.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/WebBlocks/1c9c0626b005aa012b5f32748d715da7ec9986d8/src/components/alert-component/error.svg -------------------------------------------------------------------------------- /src/components/alert-component/readme.md: -------------------------------------------------------------------------------- 1 | # alert-component 2 | 3 | 4 | 5 | 6 | ## Properties 7 | 8 | | Property | Attribute | Description | Type | Default | 9 | | --------- | --------- | ----------- | -------- | ----------- | 10 | | `action` | `action` | | `string` | `undefined` | 11 | | `icon` | `icon` | | `string` | `undefined` | 12 | | `text` | `text` | | `string` | `undefined` | 13 | | `variant` | `variant` | | `string` | `undefined` | 14 | | `width` | `width` | | `string` | `undefined` | 15 | 16 | 17 | ---------------------------------------------- 18 | 19 | *Built with [StencilJS](https://stenciljs.com/) by the [ZTM](https://zerotomastery.io/) community* 20 | -------------------------------------------------------------------------------- /src/components/alert-component/success.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/alert-component/warning.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/animated-line-beneath-link/animated-line-beneath-link.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | 5 | .container { 6 | position: relative; 7 | display: block; 8 | overflow: visible; 9 | cursor: pointer; 10 | pointer-events: auto; 11 | --underline-color: rgb(0, 204, 255); 12 | } 13 | 14 | .text { 15 | pointer-events: auto; 16 | cursor: pointer !important; 17 | } 18 | 19 | .container::after { 20 | content: ''; 21 | display: block; 22 | position: absolute; 23 | bottom: -0.7vh; 24 | width: 100%; 25 | height: 0.35vh; 26 | border-radius: 10px; 27 | background-color: var(--underline-color); 28 | transform: scaleX(0); 29 | transform-origin: left; 30 | transition: transform 0.5s ease-in-out; 31 | pointer-events: none; 32 | } 33 | 34 | .container:hover::after { 35 | transform: scaleX(1); 36 | } 37 | -------------------------------------------------------------------------------- /src/components/animated-line-beneath-link/animated-line-beneath-link.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Host, h, Prop } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'animated-line-beneath-link', 5 | styleUrl: 'animated-line-beneath-link.css', 6 | scoped: true, 7 | }) 8 | export class AnimatedLineBeneathLink { 9 | @Prop() text: string; 10 | 11 | render() { 12 | const html = ( 13 | 14 |
15 | {this.text} 16 |
17 | 18 | ); 19 | return html; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/components/animated-line-beneath-link/readme.md: -------------------------------------------------------------------------------- 1 | # animated-line-beneath-link 2 | 3 | 4 | 5 | 6 | ## Properties 7 | 8 | | Property | Attribute | Description | Type | Default | 9 | | -------- | --------- | ----------- | -------- | ----------- | 10 | | `text` | `text` | | `string` | `undefined` | 11 | 12 | 13 | ## Dependencies 14 | 15 | ### Used by 16 | 17 | - [hamburger-menu](../hamburger-menu) 18 | 19 | ### Graph 20 | ```mermaid 21 | graph TD; 22 | hamburger-menu --> animated-line-beneath-link 23 | style animated-line-beneath-link fill:#f9f,stroke:#333,stroke-width:4px 24 | ``` 25 | 26 | ---------------------------------------------- 27 | 28 | *Built with [StencilJS](https://stenciljs.com/) by the [ZTM](https://zerotomastery.io/) community* 29 | -------------------------------------------------------------------------------- /src/components/avatar-component/avatar-component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | 5 | .avatar { 6 | display: flex; 7 | color: #fff; 8 | justify-content: center; 9 | } 10 | 11 | .avatar.initials-text { 12 | font-size: 18px; 13 | font-weight: bold; 14 | align-items: center; 15 | } 16 | 17 | .avatar.default-color { 18 | background-color: #bdbdbd; 19 | } 20 | 21 | .small { 22 | width: 24px; 23 | height: 24px; 24 | } 25 | 26 | .medium { 27 | width: 40px; 28 | height: 40px; 29 | } 30 | 31 | .large { 32 | width: 56px; 33 | height: 56px; 34 | } 35 | 36 | .circular { 37 | border-radius: 50%; 38 | } 39 | 40 | .rounded { 41 | border-radius: 4px; 42 | } 43 | 44 | .square { 45 | border-radius: 0; 46 | } 47 | -------------------------------------------------------------------------------- /src/components/avatar-component/avatar-component.e2e.ts: -------------------------------------------------------------------------------- 1 | import { newE2EPage } from '@stencil/core/testing'; 2 | 3 | describe('avatar-component', () => { 4 | it('renders', async () => { 5 | const page = await newE2EPage(); 6 | await page.setContent(''); 7 | 8 | const element = await page.find('avatar-component'); 9 | expect(element).toHaveClass('hydrated'); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /src/components/avatar-component/avatar-component.spec.tsx: -------------------------------------------------------------------------------- 1 | import { newSpecPage } from '@stencil/core/testing'; 2 | import { AvatarComponent } from './avatar-component'; 3 | 4 | describe('avatar-component', () => { 5 | it('renders', async () => { 6 | const page = await newSpecPage({ 7 | components: [AvatarComponent], 8 | html: ``, 9 | }); 10 | expect(page.root).toEqualHtml(` 11 | 12 | 13 | 14 | 15 | 16 | `); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /src/components/avatar-component/avatar-component.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Host, h, Prop } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'avatar-component', 5 | styleUrl: 'avatar-component.css', 6 | shadow: true, 7 | assetsDirs: ['assets'], 8 | }) 9 | export class AvatarComponent { 10 | /** 11 | * Alternate text when src image breaks 12 | * @type {string} 13 | * @memberof AvatarComponent 14 | */ 15 | @Prop() alt: string; 16 | 17 | /** 18 | * Image source url 19 | * @type {string} 20 | * @memberof AvatarComponent 21 | */ 22 | @Prop() src: string; 23 | 24 | /** 25 | * Custom class for the image 26 | * @type {string} 27 | * @memberof AvatarComponent 28 | */ 29 | @Prop() customClass: string; 30 | 31 | /** 32 | * Show title of the image on hover 33 | * @type {string} 34 | * @memberof AvatarComponent 35 | */ 36 | @Prop() tooltipTxt: string; 37 | 38 | /** 39 | * Avatar image size 40 | * @type {('small' | 'medium' | 'large')} 41 | * @memberof AvatarComponent 42 | */ 43 | @Prop() size: 'small' | 'medium' | 'large' = 'medium'; 44 | 45 | /** 46 | * Avatar image shape variants 47 | * 48 | * @type {('circular' | 'rounded' | 'square')} 49 | * @memberof AvatarComponent 50 | */ 51 | @Prop() variant: 'circular' | 'rounded' | 'square' = 'rounded'; 52 | 53 | render() { 54 | const customClass = `avatar${this.customClass ? ' ' + this.customClass : ''} ${this.size} ${this.variant}`; 55 | const avatar = 56 | this.src || (!this.src && !this.alt) ? ( 57 | {this.alt} 58 | ) : ( 59 |
60 | {this.alt[0].toUpperCase()} 61 |
62 | ); 63 | return {avatar}; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/components/avatar-component/readme.md: -------------------------------------------------------------------------------- 1 | # avatar-component 2 | 3 | 4 | 5 | 6 | ## Properties 7 | 8 | | Property | Attribute | Description | Type | Default | 9 | | ------------- | -------------- | ------------------------------------ | ------------------------------------- | ----------- | 10 | | `alt` | `alt` | Alternate text when src image breaks | `string` | `undefined` | 11 | | `customClass` | `custom-class` | Custom class for the image | `string` | `undefined` | 12 | | `size` | `size` | Avatar image size | `"large" \| "medium" \| "small"` | `'medium'` | 13 | | `src` | `src` | Image source url | `string` | `undefined` | 14 | | `tooltipTxt` | `tooltip-txt` | Show title of the image on hover | `string` | `undefined` | 15 | | `variant` | `variant` | Avatar image shape variants | `"circular" \| "rounded" \| "square"` | `'rounded'` | 16 | 17 | 18 | ---------------------------------------------- 19 | 20 | *Built with [StencilJS](https://stenciljs.com/) by the [ZTM](https://zerotomastery.io/) community* 21 | -------------------------------------------------------------------------------- /src/components/break-component/break-component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/break-component/break-component.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Host, h, Prop } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'break-component', 5 | styleUrl: 'break-component.css', 6 | shadow: true, 7 | }) 8 | export class BreakComponent { 9 | @Prop() type: string; 10 | @Prop() horizontalDistance: string; 11 | @Prop() verticalDistance: string; 12 | render() { 13 | if (this.type === 'br' || this.type === 'break') { 14 | return ( 15 | 16 |
17 | 18 | ); 19 | } else if (this.type === 'hr' || this.type === 'horizontal') { 20 | return ( 21 | 22 |
23 | 24 | ); 25 | } else if (this.type === 'custom') { 26 | 27 |
28 | ; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/components/break-component/readme.md: -------------------------------------------------------------------------------- 1 | # break-component 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | -------------------- | --------------------- | ----------- | -------- | ----------- | 12 | | `horizontalDistance` | `horizontal-distance` | | `string` | `undefined` | 13 | | `type` | `type` | | `string` | `undefined` | 14 | | `verticalDistance` | `vertical-distance` | | `string` | `undefined` | 15 | 16 | 17 | ---------------------------------------------- 18 | 19 | *Built with [StencilJS](https://stenciljs.com/) by the [ZTM](https://zerotomastery.io/) community* 20 | -------------------------------------------------------------------------------- /src/components/break-component/test/break-component.e2e.ts: -------------------------------------------------------------------------------- 1 | import { newE2EPage } from '@stencil/core/testing'; 2 | 3 | describe('break-component', () => { 4 | it('renders', async () => { 5 | const page = await newE2EPage(); 6 | await page.setContent(''); 7 | 8 | const element = await page.find('break-component'); 9 | expect(element).toHaveClass('hydrated'); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /src/components/break-component/test/break-component.spec.tsx: -------------------------------------------------------------------------------- 1 | import { newSpecPage } from '@stencil/core/testing'; 2 | import { BreakComponent } from '../break-component'; 3 | 4 | describe('break-component', () => { 5 | it('renders', async () => { 6 | const page = await newSpecPage({ 7 | components: [BreakComponent], 8 | html: ``, 9 | }); 10 | expect(page.root).toEqualHtml(` 11 | 12 | 13 | 14 | 15 | 16 | `); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /src/components/data-fetcher/README.md: -------------------------------------------------------------------------------- 1 | # Data-fetcher - V.1.0 2 | 3 | 4 | 5 | 6 | ---------------------------------------------- 7 | 8 | *Built with [StencilJS](https://stenciljs.com/) by the [ZTM](https://zerotomastery.io/) community* 9 | -------------------------------------------------------------------------------- /src/components/data-fetcher/data-fetcher.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Play&family=Roboto+Mono:wght@500&family=Roboto:wght@500&display=swap'); 2 | :host { 3 | display: block; 4 | } 5 | /* Normalizing the css of data-fetcher component */ 6 | .data-fetcher-main * { 7 | box-sizing: border-box; 8 | padding: 0; 9 | margin: 0; 10 | } 11 | 12 | /* for main back of data-fetcher */ 13 | 14 | .data-fetcher-main { 15 | display: flex; 16 | flex-direction: column; 17 | padding: 0.4rem 20px; 18 | width: 35vw; 19 | background-color: #1f2833; 20 | box-shadow: 0px 0px 9px 0px rgb(107 96 96); 21 | max-height: 215px; 22 | border-radius: 2px; 23 | } 24 | 25 | .data-fetcher-info { 26 | font-family: Verdana, Geneva, Tahoma, sans-serif; 27 | color: white; 28 | font-size: 0.8rem; 29 | letter-spacing: 1px; 30 | font-weight: 100; 31 | } 32 | /* below are the styles for childs of data fetcher */ 33 | .data-fetcher-child { 34 | margin: 10px 0; 35 | } 36 | 37 | .data-fetcher-input-url { 38 | padding: 5px 15px; 39 | border-radius: 3px; 40 | font-size: 1.2rem; 41 | outline: none; 42 | border: 2px solid #05445e; 43 | caret-color: #66fcf1; 44 | color: #66fcf1; 45 | background-color: #1f2833; 46 | font-family: 'Roboto Mono', monospace; 47 | } 48 | 49 | .data-fetcher-submit { 50 | padding: 0.5rem 2rem; 51 | align-self: center; 52 | color: #66fcf1; 53 | background-color: #26282f98; 54 | outline: none; 55 | border: none; 56 | border: 2px solid #45a29e; 57 | border-radius: 4px; 58 | } 59 | 60 | .data-fetcher-submit:hover { 61 | background-color: #74767c2f; 62 | border-width: 3px; 63 | transition: all 50ms 0.1s ease-in-out; 64 | } 65 | .data-fetcher-input-url:hover { 66 | background-color: #2a2e35; 67 | } 68 | 69 | /* For request parameters */ 70 | .request-params { 71 | display: flex; 72 | flex-direction: column; 73 | } 74 | 75 | .labels { 76 | color: rgb(77, 207, 200); 77 | margin-right: 2px; 78 | } 79 | .request-options { 80 | width: 5rem; 81 | } 82 | -------------------------------------------------------------------------------- /src/components/data-fetcher/data-fetcher.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h, State } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'data-fetcher', 5 | styleUrl: 'data-fetcher.css', 6 | shadow : false 7 | }) 8 | 9 | export class DataFetcher { 10 | 11 | @State() receivedData : JSON; //This state handles the response and can be passed for child 12 | 13 | //bellow method creates and return requestInit object for fetch API using user inputs 14 | createRequestParams = () =>{ 15 | const params:NodeListOf = (document.querySelectorAll('.request-options') as NodeListOf); 16 | let request = {} 17 | //Note : url is not considered as request param or to be passed as requestInit object 18 | params.forEach((param )=> { 19 | request[param.getAttribute('name')] = (param as HTMLFormElement).value //new properties are added according to given name attribute to element and inserted into request object which will be returned 20 | }) 21 | return request 22 | } 23 | 24 | //this handler handles the click event of submit button 25 | onButtonClick = () => { 26 | //fetching url given by user 27 | const url : string = (document.querySelector('.data-fetcher-input-url') as HTMLInputElement).value 28 | let requestInit = this.createRequestParams() || {} 29 | 30 | 31 | //making call to an api through url provided by user 32 | fetch(url,requestInit) 33 | .then(response => { 34 | console.log('Status : ' + response.status) 35 | return response.json() 36 | }) 37 | .catch(err => console.log(`Something went wrong. ERROR : ${err}`)) 38 | .then( response => this.receivedData = response) 39 | .then(() => console.log(this.receivedData)) 40 | } 41 | 42 | /*Note : For further development 43 | /for creating requestInit object for fetch : 44 | - elements must HTMLFormElements 45 | - elements must have name attribute corresponding to the 'property name' used while making 'requestInit' object in 'fetch' 46 | - elements must have class set to 'request-options' 47 | - values of elements must be set to corresponding 'values' passed during making of 'requestInit' Object in 'fetch'. 48 | - Follow these steps mention above to create requestInit object 49 | - This must be followed because 'createRequestParam' method only create the same object requestInit object passed to fetch by user inputs in UI. 50 | */ 51 | render() { 52 | return ( 53 | 54 |
55 | 56 |

Enter a valid url for an API and get response

57 | 58 | 59 |
60 | 61 | 62 | 66 | 67 | 68 | 73 | 74 |
75 | 76 | 79 | 80 |
81 | ); 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /src/components/data-fetcher/test/data-fetcher.e2e.ts: -------------------------------------------------------------------------------- 1 | import { newE2EPage } from '@stencil/core/testing'; 2 | 3 | describe('data-fetcher', () => { 4 | it('renders', async () => { 5 | const page = await newE2EPage(); 6 | await page.setContent(''); 7 | 8 | const element = await page.find('data-fetcher'); 9 | expect(element).toHaveClass('hydrated'); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /src/components/data-fetcher/test/data-fetcher.spec.tsx: -------------------------------------------------------------------------------- 1 | import { newSpecPage } from '@stencil/core/testing'; 2 | import { DataFetcher } from '../data-fetcher'; 3 | 4 | describe('data-fetcher', () => { 5 | it('renders', async () => { 6 | const page = await newSpecPage({ 7 | components: [DataFetcher], 8 | html: ``, 9 | }); 10 | expect(page.root).toEqualHtml(` 11 | 12 | 13 | 14 | 15 | 16 | `); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /src/components/emoji-checkbox-component/checkmark-component/checkmark-component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | /** 3 | * @prop --checkFalse: the un-checked emoji 4 | */ 5 | --checkFalse: ''; 6 | /** 7 | * @prop --checkTrue: the checked emoji 8 | */ 9 | --checkTrue: ''; 10 | display: inline-block; 11 | } 12 | 13 | span.check-true::after { 14 | content: var(--checkTrue); 15 | } 16 | 17 | span.check-false::after { 18 | content: var(--checkFalse); 19 | } 20 | -------------------------------------------------------------------------------- /src/components/emoji-checkbox-component/checkmark-component/checkmark-component.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Host, h, Prop, Element } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'checkmark-component', 5 | styleUrl: 'checkmark-component.css', 6 | shadow: true, 7 | }) 8 | export class CheckmarkComponent { 9 | /** 10 | * Checked state emoji HEX code 11 | */ 12 | @Prop() checkTrue: string; 13 | /** 14 | * Un-checked state emoji HEX code 15 | */ 16 | @Prop() checkFalse: string; 17 | /** 18 | * Checkbox state 19 | */ 20 | @Prop() checked: boolean = false; 21 | /** 22 | * Root element 23 | */ 24 | @Element() el: HTMLElement; 25 | 26 | componentDidLoad() { 27 | // set emoji codes as css custom properties 28 | this.el.style.setProperty('--checkTrue', `"\\${this.checkTrue}"`); 29 | this.el.style.setProperty('--checkFalse', `"\\${this.checkFalse}"`); 30 | } 31 | 32 | render() { 33 | return ( 34 | 35 | 36 | 37 | ); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/components/emoji-checkbox-component/checkmark-component/readme.md: -------------------------------------------------------------------------------- 1 | # checkmark-component 2 | 3 | See this [link](https://unicode.org/emoji/charts/full-emoji-list.html#1f600) for a full list emojis and their codes. 4 | _\* Note that the code should be used **without** the `U+` prefix._ 5 | 6 | 7 | 8 | 9 | ## Properties 10 | 11 | | Property | Attribute | Description | Type | Default | 12 | | ------------ | ------------- | ------------------------------- | --------- | ----------- | 13 | | `checkFalse` | `check-false` | Un-checked state emoji HEX code | `string` | `undefined` | 14 | | `checkTrue` | `check-true` | Checked state emoji HEX code | `string` | `undefined` | 15 | | `checked` | `checked` | Checkbox state | `boolean` | `false` | 16 | 17 | 18 | ## CSS Custom Properties 19 | 20 | | Name | Description | 21 | | -------------- | -------------------- | 22 | | `--checkFalse` | the un-checked emoji | 23 | | `--checkTrue` | the checked emoji | 24 | 25 | 26 | ---------------------------------------------- 27 | 28 | *Built with [StencilJS](https://stenciljs.com/) by the [ZTM](https://zerotomastery.io/) community* 29 | -------------------------------------------------------------------------------- /src/components/emoji-checkbox-component/checkmark-component/test/checkmark-component.spec.tsx: -------------------------------------------------------------------------------- 1 | import { newSpecPage, SpecPage } from '@stencil/core/testing'; 2 | import { CheckmarkComponent } from '../checkmark-component'; 3 | 4 | describe('checkmark-component', () => { 5 | let page: SpecPage; 6 | beforeEach(async () => { 7 | page = await newSpecPage({ 8 | components: [CheckmarkComponent], 9 | html: ` 10 | 11 | `, 12 | }); 13 | }); 14 | it('renders', async () => { 15 | expect(page.root).toEqualHtml(` 16 | 17 | 18 | 19 | 20 | 21 | 22 | `); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /src/components/emoji-checkbox-component/emoji-checkbox-component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | position: relative; 4 | } 5 | -------------------------------------------------------------------------------- /src/components/emoji-checkbox-component/emoji-checkbox-component.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Host, h, Prop, Element } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'emoji-checkbox-component', 5 | styleUrl: 'emoji-checkbox-component.css', 6 | shadow: true, 7 | }) 8 | export class EmojiCheckboxComponent { 9 | /** 10 | * The initial state of checkbox 11 | */ 12 | @Prop({ mutable: true }) checked: boolean = false; 13 | /** 14 | * Checkbox name 15 | */ 16 | @Prop() name: string; 17 | /** 18 | * Root element 19 | */ 20 | @Element() el: HTMLElement; 21 | 22 | /** 23 | * Pass state to child components 24 | */ 25 | passStateToChildren() { 26 | this.el.childNodes.forEach(element => { 27 | element['checked'] = this.checked; 28 | }); 29 | } 30 | 31 | /** 32 | * Toggle the checkbox, 33 | * and pass the new state to child components 34 | */ 35 | handleClick = () => { 36 | this.checked = !this.checked; 37 | this.passStateToChildren(); 38 | }; 39 | 40 | componentWillLoad() { 41 | // pass state to children on mount 42 | this.passStateToChildren(); 43 | } 44 | 45 | render() { 46 | return ( 47 | 48 | 49 | 50 | ); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/components/emoji-checkbox-component/label-component/label-component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: inline-block; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/emoji-checkbox-component/label-component/label-component.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Host, h, Prop } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'label-component', 5 | styleUrl: 'label-component.css', 6 | shadow: true, 7 | }) 8 | export class LabelComponent { 9 | /** 10 | * Checkbox state 11 | */ 12 | @Prop() checked: boolean = false; 13 | 14 | render() { 15 | return ( 16 | 17 | 20 | 21 | ); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/components/emoji-checkbox-component/label-component/readme.md: -------------------------------------------------------------------------------- 1 | # label-component 2 | 3 | 4 | 5 | 6 | ## Properties 7 | 8 | | Property | Attribute | Description | Type | Default | 9 | | --------- | --------- | -------------- | --------- | ------- | 10 | | `checked` | `checked` | Checkbox state | `boolean` | `false` | 11 | 12 | 13 | ---------------------------------------------- 14 | 15 | *Built with [StencilJS](https://stenciljs.com/) by the [ZTM](https://zerotomastery.io/) community* 16 | -------------------------------------------------------------------------------- /src/components/emoji-checkbox-component/label-component/test/label-component.spec.tsx: -------------------------------------------------------------------------------- 1 | import { newSpecPage } from '@stencil/core/testing'; 2 | import { LabelComponent } from '../label-component'; 3 | 4 | describe('label-component', () => { 5 | it('renders', async () => { 6 | const page = await newSpecPage({ 7 | components: [LabelComponent], 8 | html: `Hello World!`, 9 | }); 10 | expect(page.root).toEqualHtml(` 11 | 12 | 13 | 16 | 17 | Hello World! 18 | 19 | `); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /src/components/emoji-checkbox-component/readme.md: -------------------------------------------------------------------------------- 1 | # emoji-checkbox-component 2 | 3 | ## Usage 4 | 5 | ```html 6 | 7 | 8 | Some Label 9 | 10 | ``` 11 | 12 | 13 | 14 | 15 | ## Properties 16 | 17 | | Property | Attribute | Description | Type | Default | 18 | | --------- | --------- | ----------------------------- | --------- | ----------- | 19 | | `checked` | `checked` | The initial state of checkbox | `boolean` | `false` | 20 | | `name` | `name` | Checkbox name | `string` | `undefined` | 21 | 22 | 23 | ---------------------------------------------- 24 | 25 | *Built with [StencilJS](https://stenciljs.com/) by the [ZTM](https://zerotomastery.io/) community* 26 | -------------------------------------------------------------------------------- /src/components/emoji-checkbox-component/test/emoji-checkbox-component.e2e.ts: -------------------------------------------------------------------------------- 1 | import { newE2EPage } from '@stencil/core/testing'; 2 | 3 | describe('emoji-checkbox-component', () => { 4 | it('renders', async () => { 5 | const page = await newE2EPage(); 6 | await page.setContent(''); 7 | 8 | const element = await page.find('emoji-checkbox-component'); 9 | expect(element).toHaveClass('hydrated'); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /src/components/emoji-checkbox-component/test/emoji-checkbox-component.spec.tsx: -------------------------------------------------------------------------------- 1 | import { EmojiCheckboxComponent } from '../emoji-checkbox-component'; 2 | 3 | describe('emoji-checkbox-component', () => { 4 | it('should toggle the checked property', () => { 5 | const toggle = new EmojiCheckboxComponent(); 6 | 7 | expect(toggle.checked).toBe(false); 8 | 9 | toggle.handleClick(); 10 | 11 | expect(toggle.checked).toBe(true); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /src/components/flowing-colored-border-button/flowing-colored-border-button.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | 5 | :host { 6 | --bg: #111; 7 | --gradient: linear-gradient(90deg, #ffd600 1.54%, #fc005b 14.67%, #f926f0 30.46%, #5446f6 43.79%, #13c8ef 57.11%, #12d531 68.96%, #eac400 96.3%); 8 | } 9 | 10 | .outer-container { 11 | border-radius: 15px; 12 | background: var(--gradient); 13 | padding: 0.3rem; 14 | animation: animateBg 2s linear; 15 | animation-iteration-count: infinite; 16 | } 17 | 18 | .inner-container { 19 | border-radius: 10px; 20 | padding: 0.8rem 2rem; 21 | background: var(--bg); 22 | color: white; 23 | font-family: sans-serif; 24 | font-size: 1em; 25 | } 26 | 27 | @keyframes animateBg { 28 | from { 29 | background-position: 0; 30 | } 31 | to { 32 | background-position: 10rem; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/components/flowing-colored-border-button/flowing-colored-border-button.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Host, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'flowing-colored-border-button', 5 | styleUrl: 'flowing-colored-border-button.css', 6 | shadow: true, 7 | }) 8 | export class FlowingColoredBorderButton { 9 | render() { 10 | return ( 11 | 12 |
13 |
14 | 15 |
16 |
17 | 18 | ); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/components/flowing-colored-border-button/readme.md: -------------------------------------------------------------------------------- 1 | # flowing-colored-border-button 2 | 3 | 4 | 5 | 6 | ---------------------------------------------- 7 | 8 | *Built with [StencilJS](https://stenciljs.com/) by the [ZTM](https://zerotomastery.io/) community* 9 | -------------------------------------------------------------------------------- /src/components/google-tag-manager/google-tag-manager.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Prop, h } from '@stencil/core'; 2 | import Helmet from '@stencil/helmet'; 3 | @Component({ 4 | tag: 'google-tag-manager', 5 | shadow: false, 6 | }) 7 | export class GoogleTagManager { 8 | /** 9 | * The google tag manage container ID 10 | */ 11 | @Prop() containerId: string; 12 | 13 | render() { 14 | return ( 15 | 16 | 28 | 29 | ); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/components/google-tag-manager/readme.md: -------------------------------------------------------------------------------- 1 | # google-tag-manager 2 | 3 | 4 | 5 | 6 | ## Properties 7 | 8 | | Property | Attribute | Description | Type | Default | 9 | | ------------- | -------------- | ---------------------------------- | -------- | ----------- | 10 | | `containerId` | `container-id` | The google tag manage container ID | `string` | `undefined` | 11 | 12 | 13 | ---------------------------------------------- 14 | 15 | *Built with [StencilJS](https://stenciljs.com/) by the [ZTM](https://zerotomastery.io/) community* 16 | -------------------------------------------------------------------------------- /src/components/hamburger-menu/hamburger-menu.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Noto+Sans+Mono&family=Roboto:wght@300&display=swap'); 2 | 3 | #nav-main * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | #nav-main { 10 | height: 80px; 11 | background-color: #3a4454; 12 | width: 100vw; 13 | } 14 | 15 | #nav-main img { 16 | display: block; 17 | width: 125px; 18 | object-fit: cover; 19 | position: absolute; 20 | margin-left: 20px; 21 | margin-top: -10px; 22 | } 23 | 24 | #nav-main ul { 25 | float: right; 26 | margin-right: 25px; 27 | } 28 | 29 | #nav-main ul li { 30 | display: inline-block; 31 | margin-right: 20px; 32 | line-height: 80px; 33 | list-style: none; 34 | } 35 | #nav-main ul li div { 36 | display: inline; 37 | } 38 | 39 | #nav-main ul li a { 40 | text-decoration: none; 41 | color: white; 42 | letter-spacing: 2px; 43 | font-size: 20px; 44 | font-family: 'Montserrat', sans-serif; 45 | } 46 | 47 | /* hamburger design below */ 48 | 49 | #btns div { 50 | display: flex; 51 | align-items: center; 52 | justify-content: center; 53 | position: absolute; 54 | right: 0; 55 | width: 100px; 56 | height: 17%; 57 | } 58 | 59 | #bars, 60 | #cancel { 61 | color: white; 62 | font-size: 30px; 63 | float: right; 64 | margin-right: 20px; 65 | cursor: pointer; 66 | display: none; 67 | } 68 | 69 | #check { 70 | display: none; 71 | } 72 | 73 | @media (max-width: 1118px) { 74 | #nav-main img { 75 | left: 8%; 76 | } 77 | } 78 | 79 | @media (max-width: 944px) { 80 | #nav-main img { 81 | left: 6%; 82 | width: 110px; 83 | margin-bottom: 10px; 84 | } 85 | #nav-main ul li a { 86 | font-size: 1rem; 87 | } 88 | } 89 | 90 | @media (max-width: 860px) { 91 | #nav-main img { 92 | left: 6%; 93 | width: 150px; 94 | } 95 | 96 | #bars { 97 | display: block; 98 | margin-right: 20px; 99 | font-size: 3rem; 100 | } 101 | 102 | #nav-main { 103 | display: flex; 104 | flex-direction: column; 105 | height: 100vh; 106 | transition: all 0.5s; 107 | padding: 10px 0; 108 | } 109 | 110 | #nav-main ul { 111 | position: relative; 112 | top: 120px; 113 | display: flex; 114 | flex-direction: column; 115 | align-self: center; 116 | width: 100%; 117 | transition: all 0.5s; 118 | } 119 | 120 | #nav-main ul li a { 121 | width: 100%; 122 | display: block; 123 | font-size: 1.4rem; 124 | text-align: center; 125 | } 126 | 127 | #nav-main ul li :hover { 128 | background-color: #54577c; 129 | opacity: 0.9; 130 | } 131 | 132 | #check:checked ~ #nav-main #btns div #bars { 133 | display: none; 134 | } 135 | 136 | #check:checked ~ #nav-main #btns div #cancel { 137 | display: block; 138 | } 139 | 140 | #check:checked ~ #nav-main { 141 | height: 15vh; 142 | } 143 | } 144 | -------------------------------------------------------------------------------- /src/components/hamburger-menu/hamburger-menu.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'hamburger-menu', 5 | styleUrl: 'hamburger-menu.css', 6 | shadow: true, 7 | }) 8 | export class HamburgerMenu { 9 | render() { 10 | return ( 11 |
12 | 13 | 44 |
45 | ); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/components/hamburger-menu/readme.md: -------------------------------------------------------------------------------- 1 | # hamburger-menu 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Dependencies 9 | 10 | ### Depends on 11 | 12 | - [animated-line-beneath-link](../animated-line-beneath-link) 13 | 14 | ### Graph 15 | ```mermaid 16 | graph TD; 17 | hamburger-menu --> animated-line-beneath-link 18 | style hamburger-menu fill:#f9f,stroke:#333,stroke-width:4px 19 | ``` 20 | 21 | ---------------------------------------------- 22 | 23 | *Built with [StencilJS](https://stenciljs.com/) by the [ZTM](https://zerotomastery.io/) community* 24 | -------------------------------------------------------------------------------- /src/components/hamburger-menu/test/hamburger-menu.e2e.ts: -------------------------------------------------------------------------------- 1 | import { newE2EPage } from '@stencil/core/testing'; 2 | 3 | describe('hamburger-menu', () => { 4 | it('renders', async () => { 5 | const page = await newE2EPage(); 6 | await page.setContent(''); 7 | 8 | const element = await page.find('hamburger-menu'); 9 | expect(element).toHaveClass('hydrated'); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /src/components/hamburger-menu/test/hamburger-menu.spec.tsx: -------------------------------------------------------------------------------- 1 | import { newSpecPage } from '@stencil/core/testing'; 2 | import { HamburgerMenu } from '../hamburger-menu'; 3 | 4 | describe('hamburger-menu', () => { 5 | it('renders', async () => { 6 | const page = await newSpecPage({ 7 | components: [HamburgerMenu], 8 | html: ``, 9 | }); 10 | expect(page.root).toEqualHtml(` 11 | 12 | 13 | 14 | 15 | 16 | `); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /src/components/hero-component/hero-component.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@700&family=Quicksand:wght@700&display=swap'); 2 | 3 | :host { 4 | --hero-width: 100%; 5 | --hero-height: 80vh; 6 | display: block; 7 | } 8 | .hero { 9 | position: relative; 10 | display: flex; 11 | justify-content: center; 12 | } 13 | .hero-overlay { 14 | text-align: center; 15 | position: absolute; 16 | justify-content: center; 17 | align-items: center; 18 | } 19 | .hero-overlay h1 { 20 | font-size: 6vw; 21 | font-family: 'Oxygen', sans-serif; 22 | font-weight: bold; 23 | transform: translateY(5vw); 24 | color: #ffffff; 25 | z-index: 1; 26 | margin: auto; 27 | position: relative; 28 | letter-spacing: 0.45rem; 29 | font-weight: 700; 30 | } 31 | .hero-overlay p { 32 | font-size: 2vw; 33 | transform: translateY(5vw); 34 | color: #ffffff; 35 | padding: 0 50px; 36 | margin: auto; 37 | font-weight: 700; 38 | z-index: 1; 39 | position: relative; 40 | } 41 | #hero-image { 42 | display: block; 43 | z-index: 0; 44 | background-position: center; 45 | background-repeat: no-repeat; 46 | object-fit: cover; 47 | position: relative; 48 | width: var(--hero-width); 49 | max-height: var(--hero-height); 50 | } 51 | 52 | @media only screen and (min-width: 400px) { 53 | #hero-image { 54 | width: var(--hero-width-mobile, var(--hero-width)); 55 | height: var(--hero-height-mobile, var(--hero-height)); 56 | } 57 | } 58 | @media only screen and (min-width: 800px) { 59 | #hero-image { 60 | width: var(--hero-width-tablet, var(--hero-width)); 61 | height: var(--hero-height-tablet, var(--hero-height)); 62 | } 63 | } 64 | @media only screen and (min-width: 1000px) { 65 | #hero-image { 66 | width: var(--hero-width-desktop, var(--hero-width)); 67 | height: var(--hero-height-desktop, var(--hero-height)); 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /src/components/hero-component/hero-component.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Host, h, Prop, Element } from '@stencil/core'; 2 | 3 | //add more breakpoints here 4 | const breakpoints = ['mobile', 'tablet', 'desktop']; 5 | 6 | @Component({ 7 | tag: 'hero-component', 8 | styleUrl: 'hero-component.css', 9 | shadow: true, 10 | }) 11 | export class HeroComponent { 12 | @Element() el: HTMLElement; 13 | 14 | //props 15 | @Prop() width: string; 16 | @Prop() height: string; 17 | @Prop() imgurl: string; 18 | @Prop() heading: string; 19 | @Prop() background: string; 20 | 21 | render() { 22 | var widthValue = this.width.split(' '); 23 | var heightValue = this.height.split(' '); 24 | console.log(heightValue); 25 | console.log(widthValue); 26 | 27 | breakpoints.forEach((value, ind) => { 28 | if (widthValue[ind] !== undefined) { 29 | this.el.style.setProperty(`--hero-width-${value}`, widthValue[ind]); 30 | } 31 | if (heightValue[ind] !== undefined) { 32 | this.el.style.setProperty(`--hero-height-${value}`, heightValue[ind]); 33 | } 34 | }); 35 | this.el.style.setProperty('background', this.background); 36 | 37 | return ( 38 | 39 |
40 |
41 |

{this.heading}

42 |

43 | 44 |

45 |
46 | hero-image 47 |
48 | 49 | ); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/components/hero-component/readme.md: -------------------------------------------------------------------------------- 1 | # hero-component 2 | 3 | 4 | 5 | 6 | ## Properties 7 | 8 | | Property | Attribute | Description | Type | Default | 9 | | ------------ | ------------ | ----------- | -------- | ----------- | 10 | | `background` | `background` | | `string` | `undefined` | 11 | | `heading` | `heading` | | `string` | `undefined` | 12 | | `height` | `height` | | `string` | `undefined` | 13 | | `imgurl` | `imgurl` | | `string` | `undefined` | 14 | | `width` | `width` | | `string` | `undefined` | 15 | 16 | 17 | ---------------------------------------------- 18 | 19 | *Built with [StencilJS](https://stenciljs.com/) by the [ZTM](https://zerotomastery.io/) community* 20 | -------------------------------------------------------------------------------- /src/components/hero-component/test/hero-component.e2e.ts: -------------------------------------------------------------------------------- 1 | import { newE2EPage } from '@stencil/core/testing'; 2 | 3 | describe('hero-component', () => { 4 | it('renders', async () => { 5 | const page = await newE2EPage(); 6 | await page.setContent(''); 7 | 8 | const element = await page.find('hero-component'); 9 | expect(element).toHaveClass('hydrated'); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /src/components/hero-component/test/hero-component.spec.tsx: -------------------------------------------------------------------------------- 1 | import { newSpecPage } from '@stencil/core/testing'; 2 | import { HeroComponent } from '../hero-component'; 3 | 4 | describe('hero-component', () => { 5 | it('renders', async () => { 6 | const page = await newSpecPage({ 7 | components: [HeroComponent], 8 | html: ``, 9 | }); 10 | expect(page.root).toEqualHtml(` 11 | 12 | 13 | 14 | 15 | 16 | `); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /src/components/icon-component/icon-component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | 5 | .icon { 6 | background: none; 7 | border: none; 8 | padding: 0.5rem; 9 | display: inline-flex; 10 | justify-content: center; 11 | align-items: center; 12 | transition: background-color 0.1s, color 0.1s; 13 | } 14 | 15 | .icon:hover { 16 | background-color: var(--hovercolorbg) !important; 17 | color: var(--hovercolorprimary) !important; 18 | } 19 | 20 | .tooltip { 21 | font-family: sans-serif; 22 | font-weight: 500; 23 | position: relative; 24 | } 25 | 26 | .tooltip p { 27 | font-size: 0.75rem; 28 | text-align: center; 29 | text-transform: capitalize; 30 | letter-spacing: 1px; 31 | color: #fff; 32 | background: #000; 33 | margin: 0; 34 | padding: 0.5rem 0.75rem; 35 | border-radius: 0.35rem; 36 | position: absolute; 37 | top: 0; 38 | z-index: -1; 39 | transition: transform 0.1s, opacity 0.1s; 40 | opacity: 0; 41 | } 42 | 43 | .tooltip p::before { 44 | content: ''; 45 | position: absolute; 46 | left: 0; 47 | z-index: -2; 48 | border: 15px solid transparent; 49 | border-bottom: 0; 50 | border-top: 20px solid #000; 51 | } 52 | 53 | .tooltip.top p { 54 | transform: translate(0, 1rem) scale(0); 55 | } 56 | 57 | .tooltip.bottom p { 58 | transform: translate(0, 1rem) scale(0); 59 | } 60 | 61 | .tooltip.bottom p::before { 62 | top: -0.5rem; 63 | transform: rotate(180deg); 64 | } 65 | 66 | .tooltip.top p::before { 67 | bottom: -0.35rem; 68 | } 69 | 70 | .icon:hover + p.top { 71 | transform: translate(0, -2.5rem) scale(1); 72 | opacity: 1; 73 | } 74 | 75 | .icon:hover + p.bottom { 76 | transform: translate(0, 3.5rem) scale(1); 77 | opacity: 1; 78 | } 79 | 80 | .icon-btn { 81 | cursor: pointer; 82 | } 83 | 84 | .icon.s svg { 85 | width: 1.25rem; 86 | height: 1.25rem; 87 | } 88 | 89 | .icon.md svg { 90 | width: 1.5rem; 91 | height: 1.5rem; 92 | } 93 | 94 | .icon.l svg { 95 | width: 2rem; 96 | height: 2rem; 97 | } 98 | 99 | .icon.xl svg { 100 | width: 2.25rem; 101 | height: 2.25rem; 102 | } 103 | 104 | .icon.square { 105 | border-radius: 0.25rem; 106 | } 107 | 108 | .icon.circle { 109 | border-radius: 50%; 110 | } 111 | -------------------------------------------------------------------------------- /src/components/icon-component/icon-component.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h, Prop, Element, State } from '@stencil/core'; 2 | import { iconsList } from './icons-list'; 3 | 4 | @Component({ 5 | tag: 'icon-component', 6 | styleUrl: 'icon-component.css', 7 | shadow: true, 8 | }) 9 | export class IconComponent { 10 | @Element() el: HTMLElement; 11 | // State variable for indicating if svg for component is loaded 12 | @State() isLoaded: boolean = false; 13 | // Properties 14 | @Prop() label: string = ''; 15 | @Prop() name: string = ''; 16 | @Prop() size: string = 's'; 17 | @Prop() background: string = 'none'; 18 | @Prop() bordercolor: string = ''; 19 | @Prop() bordersize: string = ''; 20 | @Prop() bordertype: string = 'none'; 21 | @Prop() primarycolor: string = '#000'; 22 | @Prop() hovercolorbg: string = ''; 23 | @Prop() hovercolorprimary: string = ''; 24 | @Prop() tooltip: string = 'no'; 25 | @Prop() tooltippos: string = 'top'; 26 | 27 | // To load the svg after initial render 28 | componentDidLoad() { 29 | // Condition to avoid rerender the component 30 | if (!this.isLoaded) { 31 | const icon = this.el.shadowRoot.querySelector('.icon'); 32 | const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 33 | const path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); 34 | const iconDetails = iconsList[this.name]; 35 | for (let values of Object.entries(iconDetails.svg)) { 36 | svg.setAttribute(values[0], String(values[1])); 37 | } 38 | for (let values of Object.entries(iconDetails.path)) { 39 | path.setAttribute(values[0], String(values[1])); 40 | } 41 | svg.appendChild(path); 42 | icon.appendChild(svg); 43 | this.isLoaded = true; 44 | } 45 | } 46 | 47 | render() { 48 | // Object with necessary stylings 49 | const buttonStyle = { 50 | 'backgroundColor': `${this.background}`, 51 | 'color': `${this.primarycolor}`, 52 | 'border': this.bordersize && this.bordercolor ? `${this.bordersize} solid ${this.bordercolor}` : `none`, 53 | '--hovercolorbg': `${this.hovercolorbg}`, 54 | '--hovercolorprimary': `${this.hovercolorprimary}`, 55 | }; 56 | /* If there is no label we display it as a general icon with no cursor. Else it is displayed 57 | as a button with a cursor 58 | */ 59 | if (this.label === '') { 60 | if (this.tooltip === 'no' || this.tooltip === '') { 61 | return ; 62 | } else { 63 | return ( 64 |
65 | 66 |

{this.name}

67 |
68 | ); 69 | } 70 | } else { 71 | if (this.tooltip === 'no' || this.tooltip === '') { 72 | return ; 73 | } else { 74 | return ( 75 |
76 | 77 |

{this.name}

78 |
79 | ); 80 | } 81 | } 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /src/components/icon-component/icons-list.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Icons properties are used to develop the component. Using svg as an image removes the flexibility of customization 3 | With the required properties we can construct a SVG and insert it into the shadow dom component. 4 | We can add hover effects and necessary customizations 5 | */ 6 | 7 | export const iconsList = { 8 | 'apple': { 9 | svg: { 10 | 'aria-hidden': 'true', 11 | 'focusable': 'false', 12 | 'data-prefix': 'fab', 13 | 'data-icon': 'apple', 14 | 'role': 'img', 15 | 'xmlns': 'http://www.w3.org/2000/svg', 16 | 'viewBox': '0 0 384 512', 17 | }, 18 | path: { 19 | fill: 'currentColor', 20 | d: 'M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z', 21 | }, 22 | }, 23 | 'amazon': { 24 | svg: { 25 | 'aria-hidden': 'true', 26 | 'focusable': 'false', 27 | 'data-prefix': 'fab', 28 | 'data-icon': 'amazon', 29 | 'role': 'img', 30 | 'xmlns': 'http://www.w3.org/2000/svg', 31 | 'viewBox': '0 0 448 512', 32 | }, 33 | path: { 34 | fill: 'currentColor', 35 | d: 'M257.2 162.7c-48.7 1.8-169.5 15.5-169.5 117.5 0 109.5 138.3 114 183.5 43.2 6.5 10.2 35.4 37.5 45.3 46.8l56.8-56S341 288.9 341 261.4V114.3C341 89 316.5 32 228.7 32 140.7 32 94 87 94 136.3l73.5 6.8c16.3-49.5 54.2-49.5 54.2-49.5 40.7-.1 35.5 29.8 35.5 69.1zm0 86.8c0 80-84.2 68-84.2 17.2 0-47.2 50.5-56.7 84.2-57.8v40.6zm136 163.5c-7.7 10-70 67-174.5 67S34.2 408.5 9.7 379c-6.8-7.7 1-11.3 5.5-8.3C88.5 415.2 203 488.5 387.7 401c7.5-3.7 13.3 2 5.5 12zm39.8 2.2c-6.5 15.8-16 26.8-21.2 31-5.5 4.5-9.5 2.7-6.5-3.8s19.3-46.5 12.7-55c-6.5-8.3-37-4.3-48-3.2-10.8 1-13 2-14-.3-2.3-5.7 21.7-15.5 37.5-17.5 15.7-1.8 41-.8 46 5.7 3.7 5.1 0 27.1-6.5 43.1z', 36 | }, 37 | }, 38 | 'facebook': { 39 | svg: { 40 | 'aria-hidden': 'true', 41 | 'focusable': 'false', 42 | 'data-prefix': 'fab', 43 | 'data-icon': 'facebook', 44 | 'role': 'img', 45 | 'xmlns': 'http://www.w3.org/2000/svg', 46 | 'viewBox': '0 0 512 512', 47 | }, 48 | path: { 49 | fill: 'currentColor', 50 | d: 'M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z', 51 | }, 52 | }, 53 | 'github': { 54 | svg: { 55 | 'aria-hidden': 'true', 56 | 'focusable': 'false', 57 | 'data-prefix': 'fab', 58 | 'data-icon': 'github', 59 | 'role': 'img', 60 | 'xmlns': 'http://www.w3.org/2000/svg', 61 | 'viewBox': '0 0 496 512', 62 | }, 63 | path: { 64 | fill: 'currentColor', 65 | d: 'M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z', 66 | }, 67 | }, 68 | 'google': { 69 | svg: { 70 | 'aria-hidden': 'true', 71 | 'focusable': 'false', 72 | 'data-prefix': 'fab', 73 | 'data-icon': 'google', 74 | 'role': 'img', 75 | 'xmlns': 'http://www.w3.org/2000/svg', 76 | 'viewBox': '0 0 488 512', 77 | }, 78 | path: { 79 | fill: 'currentColor', 80 | d: 'M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z', 81 | }, 82 | }, 83 | 'google-play': { 84 | svg: { 85 | 'aria-hidden': 'true', 86 | 'focusable': 'false', 87 | 'data-prefix': 'fab', 88 | 'data-icon': 'google-play', 89 | 'role': 'img', 90 | 'xmlns': 'http://www.w3.org/2000/svg', 91 | 'viewBox': '0 0 512 512', 92 | }, 93 | path: { 94 | fill: 'currentColor', 95 | d: 'M325.3 234.3L104.6 13l280.8 161.2-60.1 60.1zM47 0C34 6.8 25.3 19.2 25.3 35.3v441.3c0 16.1 8.7 28.5 21.7 35.3l256.6-256L47 0zm425.2 225.6l-58.9-34.1-65.7 64.5 65.7 64.5 60.1-34.1c18-14.3 18-46.5-1.2-60.8zM104.6 499l280.8-161.2-60.1-60.1L104.6 499z', 96 | }, 97 | }, 98 | 'instagram': { 99 | svg: { 100 | 'aria-hidden': 'true', 101 | 'focusable': 'false', 102 | 'data-prefix': 'fab', 103 | 'data-icon': 'instagram', 104 | 'role': 'img', 105 | 'xmlns': 'http://www.w3.org/2000/svg', 106 | 'viewBox': '0 0 448 512', 107 | }, 108 | path: { 109 | fill: 'currentColor', 110 | d: 'M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z', 111 | }, 112 | }, 113 | 'linkedin': { 114 | svg: { 115 | 'aria-hidden': 'true', 116 | 'focusable': 'false', 117 | 'data-prefix': 'fab', 118 | 'data-icon': 'linkedin', 119 | 'role': 'img', 120 | 'xmlns': 'http://www.w3.org/2000/svg', 121 | 'viewBox': '0 0 448 512', 122 | }, 123 | path: { 124 | fill: 'currentColor', 125 | d: 'M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z', 126 | }, 127 | }, 128 | 'microsoft': { 129 | svg: { 130 | 'aria-hidden': 'true', 131 | 'focusable': 'false', 132 | 'data-prefix': 'fab', 133 | 'data-icon': 'microsoft', 134 | 'role': 'img', 135 | 'xmlns': 'http://www.w3.org/2000/svg', 136 | 'viewBox': '0 0 448 512', 137 | }, 138 | path: { 139 | fill: 'currentColor', 140 | d: 'M0 32h214.6v214.6H0V32zm233.4 0H448v214.6H233.4V32zM0 265.4h214.6V480H0V265.4zm233.4 0H448V480H233.4V265.4z', 141 | }, 142 | }, 143 | 'twitch': { 144 | svg: { 145 | 'aria-hidden': 'true', 146 | 'focusable': 'false', 147 | 'data-prefix': 'fab', 148 | 'data-icon': 'twitch', 149 | 'role': 'img', 150 | 'xmlns': 'http://www.w3.org/2000/svg', 151 | 'viewBox': '0 0 512 512', 152 | }, 153 | path: { 154 | fill: 'currentColor', 155 | d: 'M391.17,103.47H352.54v109.7h38.63ZM285,103H246.37V212.75H285ZM120.83,0,24.31,91.42V420.58H140.14V512l96.53-91.42h77.25L487.69,256V0ZM449.07,237.75l-77.22,73.12H294.61l-67.6,64v-64H140.14V36.58H449.07Z', 156 | }, 157 | }, 158 | 'twitter': { 159 | svg: { 160 | 'aria-hidden': 'true', 161 | 'focusable': 'false', 162 | 'data-prefix': 'fab', 163 | 'data-icon': 'twitter', 164 | 'role': 'img', 165 | 'xmlns': 'http://www.w3.org/2000/svg', 166 | 'viewBox': '0 0 512 512', 167 | }, 168 | path: { 169 | fill: 'currentColor', 170 | d: 'M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z', 171 | }, 172 | }, 173 | 'whatsapp': { 174 | svg: { 175 | 'aria-hidden': 'true', 176 | 'focusable': 'false', 177 | 'data-prefix': 'fab', 178 | 'data-icon': 'whatsapp', 179 | 'role': 'img', 180 | 'xmlns': 'http://www.w3.org/2000/svg', 181 | 'viewBox': '0 0 448 512', 182 | }, 183 | path: { 184 | fill: 'currentColor', 185 | d: 'M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z', 186 | }, 187 | }, 188 | 'angle-down': { 189 | svg: { 190 | 'aria-hidden': 'true', 191 | 'focusable': 'false', 192 | 'data-prefix': 'fas', 193 | 'data-icon': 'angle-down', 194 | 'role': 'img', 195 | 'xmlns': 'http://www.w3.org/2000/svg', 196 | 'viewBox': '0 0 320 512', 197 | }, 198 | path: { 199 | fill: 'currentColor', 200 | d: 'M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z', 201 | }, 202 | }, 203 | 'angle-left': { 204 | svg: { 205 | 'aria-hidden': 'true', 206 | 'focusable': 'false', 207 | 'data-prefix': 'fas', 208 | 'data-icon': 'angle-left', 209 | 'role': 'img', 210 | 'xmlns': 'http://www.w3.org/2000/svg', 211 | 'viewBox': '0 0 256 512', 212 | }, 213 | path: { 214 | fill: 'currentColor', 215 | d: 'M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z', 216 | }, 217 | }, 218 | 'angle-right': { 219 | svg: { 220 | 'aria-hidden': 'true', 221 | 'focusable': 'false', 222 | 'data-prefix': 'fas', 223 | 'data-icon': 'angle-right', 224 | 'role': 'img', 225 | 'xmlns': 'http://www.w3.org/2000/svg', 226 | 'viewBox': '0 0 256 512', 227 | }, 228 | path: { 229 | fill: 'currentColor', 230 | d: 'M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z', 231 | }, 232 | }, 233 | 'angle-up': { 234 | svg: { 235 | 'aria-hidden': 'true', 236 | 'focusable': 'false', 237 | 'data-prefix': 'fas', 238 | 'data-icon': 'angle-up', 239 | 'role': 'img', 240 | 'xmlns': 'http://www.w3.org/2000/svg', 241 | 'viewBox': '0 0 320 512', 242 | }, 243 | path: { 244 | fill: 'currentColor', 245 | d: 'M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z', 246 | }, 247 | }, 248 | 'arrow-down': { 249 | svg: { 250 | 'aria-hidden': 'true', 251 | 'focusable': 'false', 252 | 'data-prefix': 'fas', 253 | 'data-icon': 'arrow-down', 254 | 'role': 'img', 255 | 'xmlns': 'http://www.w3.org/2000/svg', 256 | 'viewBox': '0 0 448 512', 257 | }, 258 | path: { 259 | fill: 'currentColor', 260 | d: 'M413.1 222.5l22.2 22.2c9.4 9.4 9.4 24.6 0 33.9L241 473c-9.4 9.4-24.6 9.4-33.9 0L12.7 278.6c-9.4-9.4-9.4-24.6 0-33.9l22.2-22.2c9.5-9.5 25-9.3 34.3.4L184 343.4V56c0-13.3 10.7-24 24-24h32c13.3 0 24 10.7 24 24v287.4l114.8-120.5c9.3-9.8 24.8-10 34.3-.4z', 261 | }, 262 | }, 263 | 'arrow-left': { 264 | svg: { 265 | 'aria-hidden': 'true', 266 | 'focusable': 'false', 267 | 'data-prefix': 'fas', 268 | 'data-icon': 'arrow-left', 269 | 'role': 'img', 270 | 'xmlns': 'http://www.w3.org/2000/svg', 271 | 'viewBox': '0 0 448 512', 272 | }, 273 | path: { 274 | fill: 'currentColor', 275 | d: 'M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z', 276 | }, 277 | }, 278 | 'arrow-right': { 279 | svg: { 280 | 'aria-hidden': 'true', 281 | 'focusable': 'false', 282 | 'data-prefix': 'fas', 283 | 'data-icon': 'arrow-right', 284 | 'role': 'img', 285 | 'xmlns': 'http://www.w3.org/2000/svg', 286 | 'viewBox': '0 0 448 512', 287 | }, 288 | path: { 289 | fill: 'currentColor', 290 | d: 'M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z', 291 | }, 292 | }, 293 | 'arrow-up': { 294 | svg: { 295 | 'aria-hidden': 'true', 296 | 'focusable': 'false', 297 | 'data-prefix': 'fas', 298 | 'data-icon': 'arrow-up', 299 | 'role': 'img', 300 | 'xmlns': 'http://www.w3.org/2000/svg', 301 | 'viewBox': '0 0 448 512', 302 | }, 303 | path: { 304 | fill: 'currentColor', 305 | d: 'M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z', 306 | }, 307 | }, 308 | 'bars': { 309 | svg: { 310 | 'aria-hidden': 'true', 311 | 'focusable': 'false', 312 | 'data-prefix': 'fas', 313 | 'data-icon': 'bars', 314 | 'role': 'img', 315 | 'xmlns': 'http://www.w3.org/2000/svg', 316 | 'viewBox': '0 0 448 512', 317 | }, 318 | path: { 319 | fill: 'currentColor', 320 | d: 'M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z', 321 | }, 322 | }, 323 | 'bell-ring': { 324 | svg: { 325 | 'aria-hidden': 'true', 326 | 'focusable': 'false', 327 | 'data-prefix': 'fas', 328 | 'data-icon': 'bell-ring', 329 | 'role': 'img', 330 | 'xmlns': 'http://www.w3.org/2000/svg', 331 | 'viewBox': '0 0 448 512', 332 | }, 333 | path: { 334 | fill: 'currentColor', 335 | d: 'M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z', 336 | }, 337 | }, 338 | 'bell-vibrate': { 339 | svg: { 340 | 'aria-hidden': 'true', 341 | 'focusable': 'false', 342 | 'data-prefix': 'fas', 343 | 'data-icon': 'bell-vibrate', 344 | 'role': 'img', 345 | 'xmlns': 'http://www.w3.org/2000/svg', 346 | 'viewBox': '0 0 640 512', 347 | }, 348 | path: { 349 | fill: 'currentColor', 350 | d: 'M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z', 351 | }, 352 | }, 353 | 'contacts': { 354 | svg: { 355 | 'aria-hidden': 'true', 356 | 'focusable': 'false', 357 | 'data-prefix': 'fas', 358 | 'data-icon': 'contacts', 359 | 'role': 'img', 360 | 'xmlns': 'http://www.w3.org/2000/svg', 361 | 'viewBox': '0 0 448 512', 362 | }, 363 | path: { 364 | fill: 'currentColor', 365 | d: 'M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z', 366 | }, 367 | }, 368 | 'bookmarks': { 369 | svg: { 370 | 'aria-hidden': 'true', 371 | 'focusable': 'false', 372 | 'data-prefix': 'fas', 373 | 'data-icon': 'bookmarks', 374 | 'role': 'img', 375 | 'xmlns': 'http://www.w3.org/2000/svg', 376 | 'viewBox': '0 0 384 512', 377 | }, 378 | path: { 379 | fill: 'currentColor', 380 | d: 'M0 512V48C0 21.49 21.49 0 48 0h288c26.51 0 48 21.49 48 48v464L192 400 0 512z', 381 | }, 382 | }, 383 | 'calender': { 384 | svg: { 385 | 'aria-hidden': 'true', 386 | 'focusable': 'false', 387 | 'data-prefix': 'fas', 388 | 'data-icon': 'calender', 389 | 'role': 'img', 390 | 'xmlns': 'http://www.w3.org/2000/svg', 391 | 'viewBox': '0 0 448 512', 392 | }, 393 | path: { 394 | fill: 'currentColor', 395 | d: 'M400 64h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V160h352v298c0 3.3-2.7 6-6 6z', 396 | }, 397 | }, 398 | 'charts': { 399 | svg: { 400 | 'aria-hidden': 'true', 401 | 'focusable': 'false', 402 | 'data-prefix': 'fas', 403 | 'data-icon': 'charts', 404 | 'role': 'img', 405 | 'xmlns': 'http://www.w3.org/2000/svg', 406 | 'viewBox': '0 0 512 512', 407 | }, 408 | path: { 409 | fill: 'currentColor', 410 | d: 'M496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM464 96H345.94c-21.38 0-32.09 25.85-16.97 40.97l32.4 32.4L288 242.75l-73.37-73.37c-12.5-12.5-32.76-12.5-45.25 0l-68.69 68.69c-6.25 6.25-6.25 16.38 0 22.63l22.62 22.62c6.25 6.25 16.38 6.25 22.63 0L192 237.25l73.37 73.37c12.5 12.5 32.76 12.5 45.25 0l96-96 32.4 32.4c15.12 15.12 40.97 4.41 40.97-16.97V112c.01-8.84-7.15-16-15.99-16z', 411 | }, 412 | }, 413 | 'checked': { 414 | svg: { 415 | 'aria-hidden': 'true', 416 | 'focusable': 'false', 417 | 'data-prefix': 'fas', 418 | 'data-icon': 'checked', 419 | 'role': 'img', 420 | 'xmlns': 'http://www.w3.org/2000/svg', 421 | 'viewBox': '0 0 512 512', 422 | }, 423 | path: { 424 | fill: 'currentColor', 425 | d: 'M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z', 426 | }, 427 | }, 428 | 'codeblock': { 429 | svg: { 430 | 'aria-hidden': 'true', 431 | 'focusable': 'false', 432 | 'data-prefix': 'fas', 433 | 'data-icon': 'codeblock', 434 | 'role': 'img', 435 | 'xmlns': 'http://www.w3.org/2000/svg', 436 | 'viewBox': '0 0 640 512', 437 | }, 438 | path: { 439 | fill: 'currentColor', 440 | d: 'M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z', 441 | }, 442 | }, 443 | 'download': { 444 | svg: { 445 | 'aria-hidden': 'true', 446 | 'focusable': 'false', 447 | 'data-prefix': 'fas', 448 | 'data-icon': 'download', 449 | 'role': 'img', 450 | 'xmlns': 'http://www.w3.org/2000/svg', 451 | 'viewBox': '0 0 512 512', 452 | }, 453 | path: { 454 | fill: 'currentColor', 455 | d: 'M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z', 456 | }, 457 | }, 458 | 'edit': { 459 | svg: { 460 | 'aria-hidden': 'true', 461 | 'focusable': 'false', 462 | 'data-prefix': 'fas', 463 | 'data-icon': 'edit', 464 | 'role': 'img', 465 | 'xmlns': 'http://www.w3.org/2000/svg', 466 | 'viewBox': '0 0 576 512', 467 | }, 468 | path: { 469 | fill: 'currentColor', 470 | d: 'M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z', 471 | }, 472 | }, 473 | 'mail': { 474 | svg: { 475 | 'aria-hidden': 'true', 476 | 'focusable': 'false', 477 | 'data-prefix': 'fas', 478 | 'data-icon': 'mail', 479 | 'role': 'img', 480 | 'xmlns': 'http://www.w3.org/2000/svg', 481 | 'viewBox': '0 0 512 512', 482 | }, 483 | path: { 484 | fill: 'currentColor', 485 | d: 'M176 216h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16H176c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16zm-16 80c0 8.84 7.16 16 16 16h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16H176c-8.84 0-16 7.16-16 16v16zm96 121.13c-16.42 0-32.84-5.06-46.86-15.19L0 250.86V464c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V250.86L302.86 401.94c-14.02 10.12-30.44 15.19-46.86 15.19zm237.61-254.18c-8.85-6.94-17.24-13.47-29.61-22.81V96c0-26.51-21.49-48-48-48h-77.55c-3.04-2.2-5.87-4.26-9.04-6.56C312.6 29.17 279.2-.35 256 0c-23.2-.35-56.59 29.17-73.41 41.44-3.17 2.3-6 4.36-9.04 6.56H96c-26.51 0-48 21.49-48 48v44.14c-12.37 9.33-20.76 15.87-29.61 22.81A47.995 47.995 0 0 0 0 200.72v10.65l96 69.35V96h320v184.72l96-69.35v-10.65c0-14.74-6.78-28.67-18.39-37.77z', 486 | }, 487 | }, 488 | 'warning': { 489 | svg: { 490 | 'aria-hidden': 'true', 491 | 'focusable': 'false', 492 | 'data-prefix': 'fas', 493 | 'data-icon': 'warning', 494 | 'role': 'img', 495 | 'xmlns': 'http://www.w3.org/2000/svg', 496 | 'viewBox': '0 0 576 512', 497 | }, 498 | path: { 499 | fill: 'currentColor', 500 | d: 'M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z', 501 | }, 502 | }, 503 | 'folder': { 504 | svg: { 505 | 'aria-hidden': 'true', 506 | 'focusable': 'false', 507 | 'data-prefix': 'fas', 508 | 'data-icon': 'folder', 509 | 'role': 'img', 510 | 'xmlns': 'http://www.w3.org/2000/svg', 511 | 'viewBox': '0 0 512 512', 512 | }, 513 | path: { 514 | fill: 'currentColor', 515 | d: 'M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z', 516 | }, 517 | }, 518 | 'file': { 519 | svg: { 520 | 'aria-hidden': 'true', 521 | 'focusable': 'false', 522 | 'data-prefix': 'fas', 523 | 'data-icon': 'file', 524 | 'role': 'img', 525 | 'xmlns': 'http://www.w3.org/2000/svg', 526 | 'viewBox': '0 0 384 512', 527 | }, 528 | path: { 529 | fill: 'currentColor', 530 | d: 'M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm64 236c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8zm0-64c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8zm0-72v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm96-114.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z', 531 | }, 532 | }, 533 | 'filter': { 534 | svg: { 535 | 'aria-hidden': 'true', 536 | 'focusable': 'false', 537 | 'data-prefix': 'fas', 538 | 'data-icon': 'filter', 539 | 'role': 'img', 540 | 'xmlns': 'http://www.w3.org/2000/svg', 541 | 'viewBox': '0 0 512 512', 542 | }, 543 | path: { 544 | fill: 'currentColor', 545 | d: 'M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z', 546 | }, 547 | }, 548 | 'globe': { 549 | svg: { 550 | 'aria-hidden': 'true', 551 | 'focusable': 'false', 552 | 'data-prefix': 'fas', 553 | 'data-icon': 'globe', 554 | 'role': 'img', 555 | 'xmlns': 'http://www.w3.org/2000/svg', 556 | 'viewBox': '0 0 496 512', 557 | }, 558 | path: { 559 | fill: 'currentColor', 560 | d: 'M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z', 561 | }, 562 | }, 563 | 'hashtag': { 564 | svg: { 565 | 'aria-hidden': 'true', 566 | 'focusable': 'false', 567 | 'data-prefix': 'fas', 568 | 'data-icon': 'hashtag', 569 | 'role': 'img', 570 | 'xmlns': 'http://www.w3.org/2000/svg', 571 | 'viewBox': '0 0 448 512', 572 | }, 573 | path: { 574 | fill: 'currentColor', 575 | d: 'M440.667 182.109l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l14.623-81.891C377.123 38.754 371.468 32 363.997 32h-40.632a12 12 0 0 0-11.813 9.891L296.175 128H197.54l14.623-81.891C213.477 38.754 207.822 32 200.35 32h-40.632a12 12 0 0 0-11.813 9.891L132.528 128H53.432a12 12 0 0 0-11.813 9.891l-7.143 40C33.163 185.246 38.818 192 46.289 192h74.81L98.242 320H19.146a12 12 0 0 0-11.813 9.891l-7.143 40C-1.123 377.246 4.532 384 12.003 384h74.81L72.19 465.891C70.877 473.246 76.532 480 84.003 480h40.632a12 12 0 0 0 11.813-9.891L151.826 384h98.634l-14.623 81.891C234.523 473.246 240.178 480 247.65 480h40.632a12 12 0 0 0 11.813-9.891L315.472 384h79.096a12 12 0 0 0 11.813-9.891l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l22.857-128h79.096a12 12 0 0 0 11.813-9.891zM261.889 320h-98.634l22.857-128h98.634l-22.857 128z', 576 | }, 577 | }, 578 | 'home': { 579 | svg: { 580 | 'aria-hidden': 'true', 581 | 'focusable': 'false', 582 | 'data-prefix': 'fas', 583 | 'data-icon': 'home', 584 | 'role': 'img', 585 | 'xmlns': 'http://www.w3.org/2000/svg', 586 | 'viewBox': '0 0 576 512', 587 | }, 588 | path: { 589 | fill: 'currentColor', 590 | d: 'M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z', 591 | }, 592 | }, 593 | 'images': { 594 | svg: { 595 | 'aria-hidden': 'true', 596 | 'focusable': 'false', 597 | 'data-prefix': 'fas', 598 | 'data-icon': 'images', 599 | 'role': 'img', 600 | 'xmlns': 'http://www.w3.org/2000/svg', 601 | 'viewBox': '0 0 576 512', 602 | }, 603 | path: { 604 | fill: 'currentColor', 605 | d: 'M480 416v16c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V176c0-26.51 21.49-48 48-48h16v208c0 44.112 35.888 80 80 80h336zm96-80V80c0-26.51-21.49-48-48-48H144c-26.51 0-48 21.49-48 48v256c0 26.51 21.49 48 48 48h384c26.51 0 48-21.49 48-48zM256 128c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-96 144l55.515-55.515c4.686-4.686 12.284-4.686 16.971 0L272 256l135.515-135.515c4.686-4.686 12.284-4.686 16.971 0L512 208v112H160v-48z', 606 | }, 607 | }, 608 | 'list': { 609 | svg: { 610 | 'aria-hidden': 'true', 611 | 'focusable': 'false', 612 | 'data-prefix': 'fas', 613 | 'data-icon': 'list', 614 | 'role': 'img', 615 | 'xmlns': 'http://www.w3.org/2000/svg', 616 | 'viewBox': '0 0 512 512', 617 | }, 618 | path: { 619 | fill: 'currentColor', 620 | d: 'M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z', 621 | }, 622 | }, 623 | 'lock-open': { 624 | svg: { 625 | 'aria-hidden': 'true', 626 | 'focusable': 'false', 627 | 'data-prefix': 'fas', 628 | 'data-icon': 'lock-open', 629 | 'role': 'img', 630 | 'xmlns': 'http://www.w3.org/2000/svg', 631 | 'viewBox': '0 0 576 512', 632 | }, 633 | path: { 634 | fill: 'currentColor', 635 | d: 'M423.5 0C339.5.3 272 69.5 272 153.5V224H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48h-48v-71.1c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v80c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-80C576 68 507.5-.3 423.5 0z', 636 | }, 637 | }, 638 | 'lock-closed': { 639 | svg: { 640 | 'aria-hidden': 'true', 641 | 'focusable': 'false', 642 | 'data-prefix': 'fas', 643 | 'data-icon': 'lock-closed', 644 | 'role': 'img', 645 | 'xmlns': 'http://www.w3.org/2000/svg', 646 | 'viewBox': '0 0 448 512', 647 | }, 648 | path: { 649 | fill: 'currentColor', 650 | d: 'M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z', 651 | }, 652 | }, 653 | 'map-marker': { 654 | svg: { 655 | 'aria-hidden': 'true', 656 | 'focusable': 'false', 657 | 'data-prefix': 'fas', 658 | 'data-icon': 'map-marker', 659 | 'role': 'img', 660 | 'xmlns': 'http://www.w3.org/2000/svg', 661 | 'viewBox': '0 0 384 512', 662 | }, 663 | path: { 664 | fill: 'currentColor', 665 | d: 'M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z', 666 | }, 667 | }, 668 | 'microphone-on': { 669 | svg: { 670 | 'aria-hidden': 'true', 671 | 'focusable': 'false', 672 | 'data-prefix': 'fas', 673 | 'data-icon': 'microphone-on', 674 | 'role': 'img', 675 | 'xmlns': 'http://www.w3.org/2000/svg', 676 | 'viewBox': '0 0 352 512', 677 | }, 678 | path: { 679 | fill: 'currentColor', 680 | d: 'M176 352c53.02 0 96-42.98 96-96V96c0-53.02-42.98-96-96-96S80 42.98 80 96v160c0 53.02 42.98 96 96 96zm160-160h-16c-8.84 0-16 7.16-16 16v48c0 74.8-64.49 134.82-140.79 127.38C96.71 376.89 48 317.11 48 250.3V208c0-8.84-7.16-16-16-16H16c-8.84 0-16 7.16-16 16v40.16c0 89.64 63.97 169.55 152 181.69V464H96c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-56v-33.77C285.71 418.47 352 344.9 352 256v-48c0-8.84-7.16-16-16-16z', 681 | }, 682 | }, 683 | 'microphone-off': { 684 | svg: { 685 | 'aria-hidden': 'true', 686 | 'focusable': 'false', 687 | 'data-prefix': 'fas', 688 | 'data-icon': 'microphone-off', 689 | 'role': 'img', 690 | 'xmlns': 'http://www.w3.org/2000/svg', 691 | 'viewBox': '0 0 640 512', 692 | }, 693 | path: { 694 | fill: 'currentColor', 695 | d: 'M633.82 458.1l-157.8-121.96C488.61 312.13 496 285.01 496 256v-48c0-8.84-7.16-16-16-16h-16c-8.84 0-16 7.16-16 16v48c0 17.92-3.96 34.8-10.72 50.2l-26.55-20.52c3.1-9.4 5.28-19.22 5.28-29.67V96c0-53.02-42.98-96-96-96s-96 42.98-96 96v45.36L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.36 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.41-6.97 4.16-17.02-2.82-22.45zM400 464h-56v-33.77c11.66-1.6 22.85-4.54 33.67-8.31l-50.11-38.73c-6.71.4-13.41.87-20.35.2-55.85-5.45-98.74-48.63-111.18-101.85L144 241.31v6.85c0 89.64 63.97 169.55 152 181.69V464h-56c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16z', 696 | }, 697 | }, 698 | 'mobile': { 699 | svg: { 700 | 'aria-hidden': 'true', 701 | 'focusable': 'false', 702 | 'data-prefix': 'fas', 703 | 'data-icon': 'mobile', 704 | 'role': 'img', 705 | 'xmlns': 'http://www.w3.org/2000/svg', 706 | 'viewBox': '0 0 320 512', 707 | }, 708 | path: { 709 | fill: 'currentColor', 710 | d: 'M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm112-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h200c6.6 0 12 5.4 12 12v312z', 711 | }, 712 | }, 713 | 'money': { 714 | svg: { 715 | 'aria-hidden': 'true', 716 | 'focusable': 'false', 717 | 'data-prefix': 'fas', 718 | 'data-icon': 'money', 719 | 'role': 'img', 720 | 'xmlns': 'http://www.w3.org/2000/svg', 721 | 'viewBox': '0 0 640 512', 722 | }, 723 | path: { 724 | fill: 'currentColor', 725 | d: 'M621.16 54.46C582.37 38.19 543.55 32 504.75 32c-123.17-.01-246.33 62.34-369.5 62.34-30.89 0-61.76-3.92-92.65-13.72-3.47-1.1-6.95-1.62-10.35-1.62C15.04 79 0 92.32 0 110.81v317.26c0 12.63 7.23 24.6 18.84 29.46C57.63 473.81 96.45 480 135.25 480c123.17 0 246.34-62.35 369.51-62.35 30.89 0 61.76 3.92 92.65 13.72 3.47 1.1 6.95 1.62 10.35 1.62 17.21 0 32.25-13.32 32.25-31.81V83.93c-.01-12.64-7.24-24.6-18.85-29.47zM320 352c-44.19 0-80-42.99-80-96 0-53.02 35.82-96 80-96s80 42.98 80 96c0 53.03-35.83 96-80 96z', 726 | }, 727 | }, 728 | 'question': { 729 | svg: { 730 | 'aria-hidden': 'true', 731 | 'focusable': 'false', 732 | 'data-prefix': 'fas', 733 | 'data-icon': 'question', 734 | 'role': 'img', 735 | 'xmlns': 'http://www.w3.org/2000/svg', 736 | 'viewBox': '0 0 512 512', 737 | }, 738 | path: { 739 | fill: 'currentColor', 740 | d: 'M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z', 741 | }, 742 | }, 743 | 'share': { 744 | svg: { 745 | 'aria-hidden': 'true', 746 | 'focusable': 'false', 747 | 'data-prefix': 'fas', 748 | 'data-icon': 'share', 749 | 'role': 'img', 750 | 'xmlns': 'http://www.w3.org/2000/svg', 751 | 'viewBox': '0 0 448 512', 752 | }, 753 | path: { 754 | fill: 'currentColor', 755 | d: 'M352 320c-22.608 0-43.387 7.819-59.79 20.895l-102.486-64.054a96.551 96.551 0 0 0 0-41.683l102.486-64.054C308.613 184.181 329.392 192 352 192c53.019 0 96-42.981 96-96S405.019 0 352 0s-96 42.981-96 96c0 7.158.79 14.13 2.276 20.841L155.79 180.895C139.387 167.819 118.608 160 96 160c-53.019 0-96 42.981-96 96s42.981 96 96 96c22.608 0 43.387-7.819 59.79-20.895l102.486 64.054A96.301 96.301 0 0 0 256 416c0 53.019 42.981 96 96 96s96-42.981 96-96-42.981-96-96-96z', 756 | }, 757 | }, 758 | 'sort-by-alphabet': { 759 | svg: { 760 | 'aria-hidden': 'true', 761 | 'focusable': 'false', 762 | 'data-prefix': 'fas', 763 | 'data-icon': 'sort-by-alphabet', 764 | 'role': 'img', 765 | 'xmlns': 'http://www.w3.org/2000/svg', 766 | 'viewBox': '0 0 448 512', 767 | }, 768 | path: { 769 | fill: 'currentColor', 770 | d: 'M16 160h48v304a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V160h48c14.21 0 21.38-17.24 11.31-27.31l-80-96a16 16 0 0 0-22.62 0l-80 96C-5.35 142.74 1.78 160 16 160zm400 128H288a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h56l-61.26 70.45A32 32 0 0 0 272 446.37V464a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-56l61.26-70.45A32 32 0 0 0 432 321.63V304a16 16 0 0 0-16-16zm31.06-85.38l-59.27-160A16 16 0 0 0 372.72 32h-41.44a16 16 0 0 0-15.07 10.62l-59.27 160A16 16 0 0 0 272 224h24.83a16 16 0 0 0 15.23-11.08l4.42-12.92h71l4.41 12.92A16 16 0 0 0 407.16 224H432a16 16 0 0 0 15.06-21.38zM335.61 144L352 96l16.39 48z', 771 | }, 772 | }, 773 | 'tag': { 774 | svg: { 775 | 'aria-hidden': 'true', 776 | 'focusable': 'false', 777 | 'data-prefix': 'fas', 778 | 'data-icon': 'tag', 779 | 'role': 'img', 780 | 'xmlns': 'http://www.w3.org/2000/svg', 781 | 'viewBox': '0 0 512 512', 782 | }, 783 | path: { 784 | fill: 'currentColor', 785 | d: 'M0 252.118V48C0 21.49 21.49 0 48 0h204.118a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.745 18.745-49.137 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118zM112 64c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z', 786 | }, 787 | }, 788 | 'thumbs-down': { 789 | svg: { 790 | 'aria-hidden': 'true', 791 | 'focusable': 'false', 792 | 'data-prefix': 'fas', 793 | 'data-icon': 'thumbs-down', 794 | 'role': 'img', 795 | 'xmlns': 'http://www.w3.org/2000/svg', 796 | 'viewBox': '0 0 512 512', 797 | }, 798 | path: { 799 | fill: 'currentColor', 800 | d: 'M0 56v240c0 13.255 10.745 24 24 24h80c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H24C10.745 32 0 42.745 0 56zm40 200c0-13.255 10.745-24 24-24s24 10.745 24 24-10.745 24-24 24-24-10.745-24-24zm272 256c-20.183 0-29.485-39.293-33.931-57.795-5.206-21.666-10.589-44.07-25.393-58.902-32.469-32.524-49.503-73.967-89.117-113.111a11.98 11.98 0 0 1-3.558-8.521V59.901c0-6.541 5.243-11.878 11.783-11.998 15.831-.29 36.694-9.079 52.651-16.178C256.189 17.598 295.709.017 343.995 0h2.844c42.777 0 93.363.413 113.774 29.737 8.392 12.057 10.446 27.034 6.148 44.632 16.312 17.053 25.063 48.863 16.382 74.757 17.544 23.432 19.143 56.132 9.308 79.469l.11.11c11.893 11.949 19.523 31.259 19.439 49.197-.156 30.352-26.157 58.098-59.553 58.098H350.723C358.03 364.34 384 388.132 384 430.548 384 504 336 512 312 512z', 801 | }, 802 | }, 803 | 'thumbs-up': { 804 | svg: { 805 | 'aria-hidden': 'true', 806 | 'focusable': 'false', 807 | 'data-prefix': 'fas', 808 | 'data-icon': 'thumbs-up', 809 | 'role': 'img', 810 | 'xmlns': 'http://www.w3.org/2000/svg', 811 | 'viewBox': '0 0 512 512', 812 | }, 813 | path: { 814 | fill: 'currentColor', 815 | d: 'M104 224H24c-13.255 0-24 10.745-24 24v240c0 13.255 10.745 24 24 24h80c13.255 0 24-10.745 24-24V248c0-13.255-10.745-24-24-24zM64 472c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24zM384 81.452c0 42.416-25.97 66.208-33.277 94.548h101.723c33.397 0 59.397 27.746 59.553 58.098.084 17.938-7.546 37.249-19.439 49.197l-.11.11c9.836 23.337 8.237 56.037-9.308 79.469 8.681 25.895-.069 57.704-16.382 74.757 4.298 17.598 2.244 32.575-6.148 44.632C440.202 511.587 389.616 512 346.839 512l-2.845-.001c-48.287-.017-87.806-17.598-119.56-31.725-15.957-7.099-36.821-15.887-52.651-16.178-6.54-.12-11.783-5.457-11.783-11.998v-213.77c0-3.2 1.282-6.271 3.558-8.521 39.614-39.144 56.648-80.587 89.117-113.111 14.804-14.832 20.188-37.236 25.393-58.902C282.515 39.293 291.817 0 312 0c24 0 72 8 72 81.452z', 816 | }, 817 | }, 818 | 'close': { 819 | svg: { 820 | 'aria-hidden': 'true', 821 | 'focusable': 'false', 822 | 'data-prefix': 'fas', 823 | 'data-icon': 'close', 824 | 'role': 'img', 825 | 'xmlns': 'http://www.w3.org/2000/svg', 826 | 'viewBox': '0 0 352 512', 827 | }, 828 | path: { 829 | fill: 'currentColor', 830 | d: 'M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z', 831 | }, 832 | }, 833 | 'settings': { 834 | svg: { 835 | 'aria-hidden': 'true', 836 | 'focusable': 'false', 837 | 'data-prefix': 'fas', 838 | 'data-icon': 'settings', 839 | 'role': 'img', 840 | 'xmlns': 'http://www.w3.org/2000/svg', 841 | 'viewBox': '0 0 512 512', 842 | }, 843 | path: { 844 | fill: 'currentColor', 845 | d: 'M501.1 395.7L384 278.6c-23.1-23.1-57.6-27.6-85.4-13.9L192 158.1V96L64 0 0 64l96 128h62.1l106.6 106.6c-13.6 27.8-9.2 62.3 13.9 85.4l117.1 117.1c14.6 14.6 38.2 14.6 52.7 0l52.7-52.7c14.5-14.6 14.5-38.2 0-52.7zM331.7 225c28.3 0 54.9 11 74.9 31l19.4 19.4c15.8-6.9 30.8-16.5 43.8-29.5 37.1-37.1 49.7-89.3 37.9-136.7-2.2-9-13.5-12.1-20.1-5.5l-74.4 74.4-67.9-11.3L334 98.9l74.4-74.4c6.6-6.6 3.4-17.9-5.7-20.2-47.4-11.7-99.6.9-136.6 37.9-28.5 28.5-41.9 66.1-41.2 103.6l82.1 82.1c8.1-1.9 16.5-2.9 24.7-2.9zm-103.9 82l-56.7-56.7L18.7 402.8c-25 25-25 65.5 0 90.5s65.5 25 90.5 0l123.6-123.6c-7.6-19.9-9.9-41.6-5-62.7zM64 472c-13.2 0-24-10.8-24-24 0-13.3 10.7-24 24-24s24 10.7 24 24c0 13.2-10.7 24-24 24z', 846 | }, 847 | }, 848 | 'users': { 849 | svg: { 850 | 'aria-hidden': 'true', 851 | 'focusable': 'false', 852 | 'data-prefix': 'fas', 853 | 'data-icon': 'users', 854 | 'role': 'img', 855 | 'xmlns': 'http://www.w3.org/2000/svg', 856 | 'viewBox': '0 0 640 512', 857 | }, 858 | path: { 859 | fill: 'currentColor', 860 | d: 'M192 256c61.9 0 112-50.1 112-112S253.9 32 192 32 80 82.1 80 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C51.6 288 0 339.6 0 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zM480 256c53 0 96-43 96-96s-43-96-96-96-96 43-96 96 43 96 96 96zm48 32h-3.8c-13.9 4.8-28.6 8-44.2 8s-30.3-3.2-44.2-8H432c-20.4 0-39.2 5.9-55.7 15.4 24.4 26.3 39.7 61.2 39.7 99.8v38.4c0 2.2-.5 4.3-.6 6.4H592c26.5 0 48-21.5 48-48 0-61.9-50.1-112-112-112z', 861 | }, 862 | }, 863 | }; 864 | -------------------------------------------------------------------------------- /src/components/icon-component/readme.md: -------------------------------------------------------------------------------- 1 | # Icon-component 2 | 3 | ## Overview 4 | 5 | Developing an icon component with necessary styles using StencilJS. Here instead of icons used as images, their properties are captured for constructing `''` and `''` tags which are inserted into the shadow dom of the component. This provide us with a flexibility to customise the icon (like color, hovercolor etc). 6 | 7 | ### Icons that can be currently used 8 | 9 | - amazon 10 | - apple 11 | - facebook 12 | - twitter 13 | - whatsapp 14 | - twitch 15 | - instagram 16 | - microsoft 17 | - google 18 | - google-play 19 | - github 20 | - linkedin 21 | - angle down/left/right/up 22 | - arrow down/left/right/up 23 | - close 24 | - settings 25 | - warning 26 | - download 27 | - home 28 | 29 | and much more (Do refer to the icons-list file for more icons) 30 | 31 | ### Properties required for using the component 32 | 33 | #### Required 34 | 35 | - name : name of the icon to be used (Eg: if name is entered as amazon, the icon for it is displayed) 36 | - label : defaults to `''` which generates a decorative icon. When value is provided, a button with the icon is generated 37 | 38 | #### Optional 39 | 40 | - size : defaults to 's'. Other values that can be used are `'md'`,`'l'`,`'xl'` 41 | - background : background color for the icon. Defaults to `'none'` 42 | - primarycolor : color for the icon. Defaults to `'#000'` 43 | - bordersize : thickness of the border. Defaults to `''` 44 | - bordercolor : color for the border. Default is `''` 45 | - bordertype : type of the border required. Values that can be passed are `'square'` and `'circle'`. Default value is `'none'` 46 | - hovercolorbg : background color for the icon during the hover state. Default is `'none'` 47 | - hovercolorprimary : foreground color for the icon during the hover state. Default is `'none'` 48 | - tooltip : Values that can be passed are `'yes'` and `'no'`. If the value is `'yes'`, a tooltip is generated with the context being the name of the icon. Default value is `'no'` 49 | - tooltippos : `'top'` and `'bottom'` are 2 positions for the tooltip. Default is `'top'`. 50 | 51 | ### Example 52 | 53 | Following is an example to use all the properties and constructing an icon component 54 | 55 | ```html 56 | 68 | ``` 69 | 70 | 71 | 72 | ## Properties 73 | 74 | | Property | Attribute | Description | Type | Default | 75 | | ------------------- | ------------------- | ----------- | -------- | -------- | 76 | | `background` | `background` | | `string` | `'none'` | 77 | | `bordercolor` | `bordercolor` | | `string` | `''` | 78 | | `bordersize` | `bordersize` | | `string` | `''` | 79 | | `bordertype` | `bordertype` | | `string` | `'none'` | 80 | | `hovercolorbg` | `hovercolorbg` | | `string` | `''` | 81 | | `hovercolorprimary` | `hovercolorprimary` | | `string` | `''` | 82 | | `label` | `label` | | `string` | `''` | 83 | | `name` | `name` | | `string` | `''` | 84 | | `primarycolor` | `primarycolor` | | `string` | `'#000'` | 85 | | `size` | `size` | | `string` | `'s'` | 86 | | `tooltip` | `tooltip` | | `string` | `'no'` | 87 | | `tooltippos` | `tooltippos` | | `string` | `'top'` | 88 | 89 | --- 90 | 91 | _Built with [StencilJS](https://stenciljs.com/) by the [ZTM](https://zerotomastery.io/) community_ 92 | -------------------------------------------------------------------------------- /src/components/image-component/image-component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | margin: 0 auto; 4 | } 5 | -------------------------------------------------------------------------------- /src/components/image-component/image-component.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Host, h, Prop } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'image-component', 5 | styleUrl: 'image-component.css', 6 | shadow: true, 7 | }) 8 | export class ImageComponent { 9 | @Prop() srcImg: string; 10 | @Prop() srcNextGen: string; 11 | @Prop() srcImgName: string; 12 | 13 | render() { 14 | return ( 15 | 16 | 17 | 18 | 19 | {this.srcImgName} 20 | 21 | 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/components/image-component/readme.md: -------------------------------------------------------------------------------- 1 | # image-component 2 | 3 | 4 | 5 | 6 | ## Properties 7 | 8 | | Property | Attribute | Description | Type | Default | 9 | | ------------ | -------------- | ----------- | -------- | ----------- | 10 | | `srcImg` | `src-img` | | `string` | `undefined` | 11 | | `srcImgName` | `src-img-name` | | `string` | `undefined` | 12 | | `srcNextGen` | `src-next-gen` | | `string` | `undefined` | 13 | 14 | 15 | ---------------------------------------------- 16 | 17 | *Built with [StencilJS](https://stenciljs.com/) by the [ZTM](https://zerotomastery.io/) community* 18 | -------------------------------------------------------------------------------- /src/components/modal-window/modal-window.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap'); 2 | @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@600&display=swap'); 3 | 4 | :host { 5 | display: block; 6 | } 7 | 8 | * { 9 | box-sizing: border-box; 10 | } 11 | 12 | /* main modal styles */ 13 | .modal-window { 14 | z-index: 1; 15 | padding: 20px 0.8rem; 16 | border: none; 17 | position: fixed; 18 | top: 50%; 19 | left: 50%; 20 | transform: translate(-50%, -50%); 21 | width: 36em; 22 | max-width: 80rem; 23 | display: flex; 24 | flex-direction: column; 25 | justify-content: space-between; 26 | background-color: #fffbfb; 27 | border-radius: 1px; 28 | box-shadow: 1px 0px 8px 1.5px rgb(199, 198, 198); 29 | height: 15rem; 30 | } 31 | 32 | /* modal title styles */ 33 | .modal-title { 34 | padding: 0.4rem 12px; 35 | border-bottom: 2px solid #0074d9; 36 | font-family: 'Rubik', sans-serif; 37 | font-size: 2rem; 38 | font-weight: 600; 39 | letter-spacing: 1px; 40 | color: #001f3f; 41 | cursor: pointer; 42 | } 43 | 44 | /* styles for modal-buttons */ 45 | .modal-btns { 46 | display: flex; 47 | justify-content: flex-end; 48 | padding-top: 0.3rem; 49 | } 50 | 51 | .modal-btn { 52 | margin-right: 1rem; 53 | font-family: 'Roboto', sans-serif; 54 | font-size: 1.2rem; 55 | letter-spacing: 1.5px; 56 | outline: none; 57 | border: none; 58 | padding: 10px; 59 | border-radius: 5px; 60 | cursor: pointer; 61 | } 62 | 63 | .modal-cancel-btn { 64 | background-color: #dddddd; 65 | } 66 | 67 | .modal-confirm-btn { 68 | background-color: #fb7200; 69 | color: white; 70 | } 71 | 72 | .modal-btn:hover { 73 | opacity: 0.7; 74 | } 75 | 76 | /* for slotted elements */ 77 | ::slotted(p) { 78 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 79 | font-size: 1.3rem; 80 | padding: 0 1rem; 81 | word-wrap: break-word; 82 | } 83 | 84 | /* making overlay */ 85 | #overlay { 86 | position: fixed; 87 | left: 0; 88 | right: 0; 89 | top: 0; 90 | bottom: 0; 91 | background-color: rgba(0, 0, 0, 0.3); 92 | } 93 | 94 | /* media querries for small mobile phones */ 95 | @media screen and (max-width: 576px) { 96 | .modal-window { 97 | width: 18rem; 98 | } 99 | .modal-title { 100 | padding: 0 0.2rem; 101 | font-size: 1.8rem; 102 | } 103 | .modal-btns { 104 | padding-top: 1rem; 105 | margin-top: 20px; 106 | } 107 | .modal-btn { 108 | font-size: 1rem; 109 | padding: 8px; 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /src/components/modal-window/modal-window.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Host, h, Prop, State, Listen } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'modal-window', 5 | styleUrl: 'modal-window.css', 6 | shadow: true, 7 | }) 8 | export class ModalWindow { 9 | @Prop() heading: string; 10 | @Prop() confirmText: string; 11 | @Prop() cancelText: string; 12 | @Prop() pointerEvents: boolean; 13 | @Prop() handleConfirm: Function; 14 | @Prop() handleCancel: Function; 15 | @State() isOpen: boolean = true; 16 | @Listen('click', { capture: true }) 17 | onCancel() { 18 | if (this.handleCancel) this.handleCancel(); 19 | this.isOpen = false; 20 | } 21 | 22 | onConfirm() { 23 | if (this.handleConfirm) this.handleConfirm(); 24 | this.isOpen = false; 25 | } 26 | 27 | render() { 28 | if (this.isOpen) 29 | return ( 30 | 31 |
32 |
{this.heading}
33 | 34 |
35 | 38 | 41 |
42 |
43 |
44 | 45 | ); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/components/modal-window/readme.md: -------------------------------------------------------------------------------- 1 | # modal-window 2 | 3 | 4 | 5 | 6 | ## Properties 7 | 8 | | Property | Attribute | Description | Type | Default | 9 | | --------------- | ---------------- | ----------- | ---------- | ----------- | 10 | | `cancelText` | `cancel-text` | | `string` | `undefined` | 11 | | `confirmText` | `confirm-text` | | `string` | `undefined` | 12 | | `handleCancel` | -- | | `Function` | `undefined` | 13 | | `handleConfirm` | -- | | `Function` | `undefined` | 14 | | `heading` | `heading` | | `string` | `undefined` | 15 | | `pointerEvents` | `pointer-events` | | `boolean` | `undefined` | 16 | 17 | 18 | ---------------------------------------------- 19 | 20 | *Built with [StencilJS](https://stenciljs.com/) by the [ZTM](https://zerotomastery.io/) community* 21 | -------------------------------------------------------------------------------- /src/components/modal-window/test/modal-window.e2e.ts: -------------------------------------------------------------------------------- 1 | import { newE2EPage } from '@stencil/core/testing'; 2 | 3 | describe('modal-window', () => { 4 | it('renders', async () => { 5 | const page = await newE2EPage(); 6 | await page.setContent(''); 7 | 8 | const element = await page.find('modal-window'); 9 | expect(element).toHaveClass('hydrated'); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /src/components/modal-window/test/modal-window.spec.tsx: -------------------------------------------------------------------------------- 1 | import { newSpecPage } from '@stencil/core/testing'; 2 | import { ModalWindow } from '../modal-window'; 3 | 4 | describe('modal-window', () => { 5 | it('renders', async () => { 6 | const page = await newSpecPage({ 7 | components: [ModalWindow], 8 | html: ``, 9 | }); 10 | expect(page.root).toEqualHtml(` 11 | 12 | 13 | 14 | 15 | 16 | `); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /src/components/my-button/my-button.css: -------------------------------------------------------------------------------- 1 | @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'); 2 | 3 | :host { 4 | display: block; 5 | } 6 | 7 | .btn { 8 | font: 600; 9 | border: 1px solid black; 10 | color: white; 11 | } 12 | 13 | .btn-primary { 14 | background-color: blue; 15 | } 16 | .btn-black { 17 | background-color: black; 18 | } 19 | 20 | .btn-warning { 21 | background-color: orange; 22 | } 23 | 24 | .btn-default { 25 | background-color: lightblue; 26 | } 27 | -------------------------------------------------------------------------------- /src/components/my-button/my-button.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Host, h, Prop } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'my-button', 5 | styleUrl: 'my-button.css', 6 | shadow: true, 7 | }) 8 | export class MyButton { 9 | @Prop() name: string; 10 | @Prop() type: string; 11 | @Prop() width: string; 12 | @Prop() typeButton: string; 13 | @Prop() color: string; 14 | @Prop() icon: string; 15 | // Render stuff 16 | render() { 17 | switch (this.typeButton) { 18 | case 'primary': 19 | return ( 20 | 21 | 24 | 25 | ); 26 | case 'warning': 27 | return ( 28 | 29 | 32 | 33 | ); 34 | case 'black': 35 | return ( 36 | 37 | 40 | 41 | ); 42 | default: 43 | return ( 44 | 45 | 48 | 49 | ); 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/components/my-button/readme.md: -------------------------------------------------------------------------------- 1 | # my-button 2 | 3 | 4 | 5 | 6 | ## Properties 7 | 8 | | Property | Attribute | Description | Type | Default | 9 | | ------------ | ------------- | ----------- | -------- | ----------- | 10 | | `color` | `color` | | `string` | `undefined` | 11 | | `icon` | `icon` | | `string` | `undefined` | 12 | | `name` | `name` | | `string` | `undefined` | 13 | | `type` | `type` | | `string` | `undefined` | 14 | | `typeButton` | `type-button` | | `string` | `undefined` | 15 | | `width` | `width` | | `string` | `undefined` | 16 | 17 | 18 | ---------------------------------------------- 19 | 20 | *Built with [StencilJS](https://stenciljs.com/) by the [ZTM](https://zerotomastery.io/) community* 21 | -------------------------------------------------------------------------------- /src/components/my-button/test/my-button.e2e.ts: -------------------------------------------------------------------------------- 1 | import { newE2EPage } from '@stencil/core/testing'; 2 | 3 | describe('my-button', () => { 4 | it('renders', async () => { 5 | const page = await newE2EPage(); 6 | await page.setContent(''); 7 | 8 | const element = await page.find('my-button'); 9 | expect(element).toHaveClass('hydrated'); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /src/components/my-button/test/my-button.spec.tsx: -------------------------------------------------------------------------------- 1 | import { newSpecPage } from '@stencil/core/testing'; 2 | import { MyButton } from '../my-button'; 3 | 4 | describe('my-button', () => { 5 | it('renders', async () => { 6 | const page = await newSpecPage({ 7 | components: [MyButton], 8 | html: ``, 9 | }); 10 | expect(page.root).toEqualHtml(` 11 | 12 | 13 | 14 | 15 | 16 | `); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /src/components/my-component/my-component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | font-size: x-large; 4 | text-align: center; 5 | --text-color: #1e1e1e; 6 | } 7 | 8 | h1 { 9 | color: var(--text-color); 10 | } 11 | -------------------------------------------------------------------------------- /src/components/my-component/my-component.e2e.ts: -------------------------------------------------------------------------------- 1 | import { newE2EPage } from '@stencil/core/testing'; 2 | 3 | describe('my-component', () => { 4 | it('renders', async () => { 5 | const page = await newE2EPage(); 6 | 7 | await page.setContent(''); 8 | const element = await page.find('my-component'); 9 | expect(element).toHaveClass('hydrated'); 10 | }); 11 | 12 | it('renders changes to the name data', async () => { 13 | const page = await newE2EPage(); 14 | 15 | await page.setContent(''); 16 | const component = await page.find('my-component'); 17 | const element = await page.find('my-component >>> h1'); 18 | expect(element.textContent).toEqual(`Hello, World! I'm `); 19 | 20 | component.setProperty('first', 'James'); 21 | await page.waitForChanges(); 22 | expect(element.textContent).toEqual(`Hello, World! I'm James`); 23 | 24 | component.setProperty('last', 'Quincy'); 25 | await page.waitForChanges(); 26 | expect(element.textContent).toEqual(`Hello, World! I'm James Quincy`); 27 | 28 | component.setProperty('middle', 'Earl'); 29 | await page.waitForChanges(); 30 | expect(element.textContent).toEqual(`Hello, World! I'm James Earl Quincy`); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /src/components/my-component/my-component.spec.ts: -------------------------------------------------------------------------------- 1 | import { newSpecPage } from '@stencil/core/testing'; 2 | import { MyComponent } from './my-component'; 3 | 4 | describe('my-component', () => { 5 | it('renders', async () => { 6 | const { root } = await newSpecPage({ 7 | components: [MyComponent], 8 | html: '', 9 | }); 10 | expect(root).toEqualHtml(` 11 | 12 | 13 |

14 | Hello, World! I'm 15 |

16 | 17 | 18 | `); 19 | }); 20 | 21 | it('renders with values', async () => { 22 | const { root } = await newSpecPage({ 23 | components: [MyComponent], 24 | html: ``, 25 | }); 26 | expect(root).toEqualHtml(` 27 | 28 | 29 |

30 | Hello, World! I'm Stencil 'Don't call me a framework' JS 31 |

32 | 33 | 34 | `); 35 | }); 36 | }); 37 | -------------------------------------------------------------------------------- /src/components/my-component/my-component.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Prop, h } from '@stencil/core'; 2 | import { format } from '../../utils/utils'; 3 | 4 | @Component({ 5 | tag: 'my-component', 6 | styleUrl: 'my-component.css', 7 | shadow: true, 8 | }) 9 | export class MyComponent { 10 | /** 11 | * The first name 12 | */ 13 | @Prop() first: string; 14 | 15 | /** 16 | * The middle name 17 | */ 18 | @Prop() middle: string; 19 | 20 | /** 21 | * The last name 22 | */ 23 | @Prop() last: string; 24 | 25 | /** 26 | * The text color 27 | */ 28 | @Prop() color: string; 29 | 30 | private getText(): string { 31 | return format(this.first, this.middle, this.last); 32 | } 33 | 34 | private returnJsx() { 35 | const shouldChangeColor = this.color !== undefined; 36 | 37 | return shouldChangeColor ?

Hello, World! I'm {this.getText()}

:

Hello, World! I'm {this.getText()}

; 38 | } 39 | 40 | render() { 41 | return this.returnJsx(); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/components/my-component/readme.md: -------------------------------------------------------------------------------- 1 | # my-component 2 | 3 | 4 | 5 | 6 | ## Properties 7 | 8 | | Property | Attribute | Description | Type | Default | 9 | | -------- | --------- | --------------- | -------- | ----------- | 10 | | `color` | `color` | The text color | `string` | `undefined` | 11 | | `first` | `first` | The first name | `string` | `undefined` | 12 | | `last` | `last` | The last name | `string` | `undefined` | 13 | | `middle` | `middle` | The middle name | `string` | `undefined` | 14 | 15 | 16 | ---------------------------------------------- 17 | 18 | *Built with [StencilJS](https://stenciljs.com/) by the [ZTM](https://zerotomastery.io/) community* 19 | -------------------------------------------------------------------------------- /src/components/my-input/my-input.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Host, h, Prop } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'my-input', 5 | shadow: true, 6 | }) 7 | export class MyInput { 8 | @Prop() size: string; 9 | @Prop() placeholder: string; 10 | @Prop() defaultValue: string; 11 | @Prop() bordered: boolean; 12 | @Prop() disabled: boolean; 13 | @Prop() pattern: string; 14 | 15 | onInputChange(target) { 16 | const regex = new RegExp(this.pattern, 'i'); 17 | const inputValue = target.value; 18 | 19 | if (regex.test(inputValue)) { 20 | alert('Input match!'); 21 | } else { 22 | alert('Input not match!'); 23 | } 24 | } 25 | 26 | render() { 27 | const height = this.size ? (this.size === 'small' ? '20px' : '40px') : '30px'; 28 | 29 | return ( 30 | 31 | this.onInputChange(e.target)} 39 | /> 40 | 41 | ); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/components/my-input/readme.md: -------------------------------------------------------------------------------- 1 | # my-input 2 | 3 | 4 | 5 | 6 | ## Properties 7 | 8 | | Property | Attribute | Description | Type | Default | 9 | | -------------- | --------------- | ----------- | --------- | ----------- | 10 | | `bordered` | `bordered` | | `boolean` | `undefined` | 11 | | `defaultValue` | `default-value` | | `string` | `undefined` | 12 | | `disabled` | `disabled` | | `boolean` | `undefined` | 13 | | `pattern` | `pattern` | | `string` | `undefined` | 14 | | `placeholder` | `placeholder` | | `string` | `undefined` | 15 | | `size` | `size` | | `string` | `undefined` | 16 | 17 | 18 | ---------------------------------------------- 19 | 20 | *Built with [StencilJS](https://stenciljs.com/) by the [ZTM](https://zerotomastery.io/) community* 21 | -------------------------------------------------------------------------------- /src/components/my-input/test/my-input.e2e.ts: -------------------------------------------------------------------------------- 1 | import { newE2EPage } from '@stencil/core/testing'; 2 | 3 | describe('my-input', () => { 4 | it('renders', async () => { 5 | const page = await newE2EPage(); 6 | await page.setContent(''); 7 | 8 | const element = await page.find('my-input'); 9 | expect(element).toHaveClass('hydrated'); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /src/components/my-input/test/my-input.spec.tsx: -------------------------------------------------------------------------------- 1 | import { newSpecPage } from '@stencil/core/testing'; 2 | import { MyInput } from '../my-input'; 3 | 4 | describe('my-input', () => { 5 | it('renders', async () => { 6 | const page = await newSpecPage({ 7 | components: [MyInput], 8 | html: ``, 9 | }); 10 | expect(page.root).toEqualHtml(` 11 | 12 | 13 | 14 | 15 | 16 | `); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /src/components/notification-badge/notification-badge.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | 5 | #badge * { 6 | padding: 0; 7 | margin: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | #badge { 12 | background-color: #e9ecef; 13 | border: none; 14 | border-radius: 100px; 15 | outline: none; 16 | width: 50px; 17 | height: 50px; 18 | margin-top: 10px; 19 | } 20 | 21 | #badge span { 22 | background-color: #f51720; 23 | width: 25px; 24 | height: 25px; 25 | color: #fff; 26 | display: flex; 27 | align-items: center; 28 | justify-content: center; 29 | padding: 0 0.2rem; 30 | border-radius: 100%; 31 | margin-left: 28px; 32 | margin-top: -17px; 33 | font-family: Verdana, Geneva, Tahoma, sans-serif; 34 | position: absolute; 35 | } 36 | 37 | #badge :hover { 38 | cursor: pointer; 39 | } 40 | 41 | #badge:active { 42 | background-color: #cccccc; 43 | } 44 | .fa-bell::before { 45 | font-size: 2rem; 46 | margin-bottom: -100%; 47 | color: #495057; 48 | } 49 | -------------------------------------------------------------------------------- /src/components/notification-badge/notification-badge.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h, Prop } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'notification-badge', 5 | styleUrl: 'notification-badge.css', 6 | }) 7 | export class NotificationBadge { 8 | @Prop() totalNotifications: string; 9 | 10 | render() { 11 | return ( 12 | 16 | ); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/components/notification-badge/readme.md: -------------------------------------------------------------------------------- 1 | # notification-badge 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | -------------------- | --------------------- | ----------- | -------- | ----------- | 12 | | `totalNotifications` | `total-notifications` | | `string` | `undefined` | 13 | 14 | 15 | ---------------------------------------------- 16 | 17 | *Built with [StencilJS](https://stenciljs.com/) by the [ZTM](https://zerotomastery.io/) community* 18 | -------------------------------------------------------------------------------- /src/components/notification-badge/test/notification-badge.e2e.ts: -------------------------------------------------------------------------------- 1 | import { newE2EPage } from '@stencil/core/testing'; 2 | 3 | describe('notification-badge', () => { 4 | it('renders', async () => { 5 | const page = await newE2EPage(); 6 | await page.setContent(''); 7 | 8 | const element = await page.find('notification-badge'); 9 | expect(element).toHaveClass('hydrated'); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /src/components/notification-badge/test/notification-badge.spec.tsx: -------------------------------------------------------------------------------- 1 | import { newSpecPage } from '@stencil/core/testing'; 2 | import { NotificationBadge } from '../notification-badge'; 3 | 4 | describe('notification-badge', () => { 5 | it('renders', async () => { 6 | const page = await newSpecPage({ 7 | components: [NotificationBadge], 8 | html: ``, 9 | }); 10 | expect(page.root).toEqualHtml(` 11 | 12 | 13 | 14 | 15 | 16 | `); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /src/components/sign-in-form/readme.md: -------------------------------------------------------------------------------- 1 | # sign-in-form 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | ------------------- | --------------------- | ----------- | -------- | ----------- | 12 | | `className` | `class-name` | | `string` | `undefined` | 13 | | `maxLengthEmail` | `max-length-email` | | `string` | `undefined` | 14 | | `maxLengthPassword` | `max-length-password` | | `string` | `undefined` | 15 | | `minLengthEmail` | `min-length-email` | | `string` | `undefined` | 16 | | `minLengthPassword` | `min-length-password` | | `string` | `undefined` | 17 | 18 | 19 | ---------------------------------------------- 20 | 21 | *Built with [StencilJS](https://stenciljs.com/) by the [ZTM](https://zerotomastery.io/) community* 22 | -------------------------------------------------------------------------------- /src/components/sign-in-form/sign-in-form.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | 5 | .main { 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | width: fit-content; 10 | background-color: white; 11 | border: 3px solid black; 12 | padding: 5px; 13 | } 14 | 15 | .main input { 16 | padding: 10px; 17 | border-radius: 3px; 18 | } 19 | .main input:hover { 20 | background-color: yellow; 21 | } 22 | 23 | .btn { 24 | padding: 10px; 25 | background-color: orange; 26 | } 27 | 28 | .btn:hover { 29 | background-color: blue; 30 | } 31 | -------------------------------------------------------------------------------- /src/components/sign-in-form/sign-in-form.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Host, h, Prop } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'sign-in-form', 5 | styleUrl: 'sign-in-form.css', 6 | shadow: true, 7 | }) 8 | export class SignInForm { 9 | @Prop() className: string; 10 | @Prop() maxLengthEmail: string; 11 | @Prop() maxLengthPassword: string; 12 | @Prop() minLengthEmail: string; 13 | @Prop() minLengthPassword: string; 14 | render() { 15 | return ( 16 | 17 |
18 |
19 | 20 | 21 | 22 |
23 |
24 | 25 | ); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/components/sign-in-form/test/sign-in-form.e2e.ts: -------------------------------------------------------------------------------- 1 | import { newE2EPage } from '@stencil/core/testing'; 2 | 3 | describe('sign-in-form', () => { 4 | it('renders', async () => { 5 | const page = await newE2EPage(); 6 | await page.setContent(''); 7 | 8 | const element = await page.find('sign-in-form'); 9 | expect(element).toHaveClass('hydrated'); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /src/components/sign-in-form/test/sign-in-form.spec.tsx: -------------------------------------------------------------------------------- 1 | import { newSpecPage } from '@stencil/core/testing'; 2 | import { SignInForm } from '../sign-in-form'; 3 | 4 | describe('sign-in-form', () => { 5 | it('renders', async () => { 6 | const page = await newSpecPage({ 7 | components: [SignInForm], 8 | html: ``, 9 | }); 10 | expect(page.root).toEqualHtml(` 11 | 12 | 13 | 14 | 15 | 16 | `); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /src/components/toast-notify/Readme.md: -------------------------------------------------------------------------------- 1 | # Toast notification component 2 | 3 | 4 | 5 | 6 | ## Properties 7 | 8 | | Property | Attribute | Description | Type | Default | 9 | | ---------------- | ----------------- | ----------- | -------- | ----------- | 10 | | `Heading` | `heading` | | `string` | `undefined` | 11 | | `indicationIcon` | `indication-icon` | | `string` | `undefined` | 12 | 13 | 14 | ---------------------------------------------- 15 | 16 | *Built with [StencilJS](https://stenciljs.com/) by the [ZTM](https://zerotomastery.io/) community* 17 | -------------------------------------------------------------------------------- /src/components/toast-notify/test/toast-notify.e2e.ts: -------------------------------------------------------------------------------- 1 | import { newE2EPage } from '@stencil/core/testing'; 2 | 3 | describe('toast-notify', () => { 4 | it('renders', async () => { 5 | const page = await newE2EPage(); 6 | await page.setContent(''); 7 | 8 | const element = await page.find('toast-notify'); 9 | expect(element).toHaveClass('hydrated'); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /src/components/toast-notify/test/toast-notify.spec.tsx: -------------------------------------------------------------------------------- 1 | import { newSpecPage } from '@stencil/core/testing'; 2 | import { ToastNotify } from '../toast-notify'; 3 | 4 | describe('toast-notify', () => { 5 | it('renders', async () => { 6 | const page = await newSpecPage({ 7 | components: [ToastNotify], 8 | html: ``, 9 | }); 10 | expect(page.root).toEqualHtml(` 11 | 12 | 13 | 14 | 15 | 16 | `); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /src/components/toast-notify/toast-notify.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&family=Roboto&display=swap'); 2 | 3 | :host { 4 | display: block; 5 | } 6 | 7 | .toast * { 8 | padding: 0; 9 | margin: 0; 10 | box-sizing: border-box; 11 | } 12 | 13 | .toast { 14 | display: flex; 15 | padding: 0.8rem 5rem; 16 | flex-direction: row; 17 | margin-bottom: 50px; 18 | justify-content: center; 19 | align-items: center; 20 | border: none; 21 | border-radius: 8px; 22 | box-shadow: 0px 5px 16px 2px #858080; 23 | } 24 | 25 | .end--div { 26 | width: 0.5rem; 27 | border-radius: 15px; 28 | height: 60px; 29 | border: none; 30 | position: absolute; 31 | left: 13px; 32 | } 33 | 34 | .icon { 35 | display: flex; 36 | justify-content: center; 37 | align-items: center; 38 | position: absolute; 39 | left: 33px; 40 | width: 40px; 41 | height: 40px; 42 | } 43 | 44 | .icon svg { 45 | color: #44cc00; 46 | } 47 | 48 | .toast--main { 49 | display: flex; 50 | flex-direction: column; 51 | flex-wrap: wrap; 52 | } 53 | 54 | .toast--heading { 55 | font-size: 1.5rem; 56 | font-family: 'Montserrat', sans-serif; 57 | font-weight: 600; 58 | margin-bottom: 10px; 59 | letter-spacing: 1px; 60 | } 61 | 62 | .toast--message { 63 | font-size: 0.8rem; 64 | font-family: 'Montserrat', sans-serif; 65 | letter-spacing: 1px; 66 | } 67 | 68 | .toast--close { 69 | width: 40px; 70 | height: 40px; 71 | border-radius: 100%; 72 | border: none; 73 | outline: none; 74 | position: absolute; 75 | right: 12px; 76 | display: flex; 77 | align-items: center; 78 | justify-content: center; 79 | } 80 | 81 | .toast--close svg { 82 | height: 25px; 83 | width: 25px; 84 | color: rgb(75, 71, 71); 85 | } 86 | 87 | .toast--close:hover { 88 | opacity: 0.8; 89 | } 90 | 91 | .toast--close:active { 92 | background-color: #cccccc; 93 | } 94 | 95 | .toast--close i { 96 | color: rgb(71, 70, 70); 97 | } 98 | 99 | /* background colors end--div */ 100 | 101 | .success { 102 | background-color: #44cc00; 103 | } 104 | 105 | .failure { 106 | background-color: #ff0000; 107 | } 108 | .warning { 109 | background-color: rgb(243, 240, 50); 110 | } 111 | -------------------------------------------------------------------------------- /src/components/toast-notify/toast-notify.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h, Prop, State } from '@stencil/core'; 2 | import toastSvg from './toast-svg'; 3 | 4 | @Component({ 5 | tag: 'toast-notify', 6 | styleUrl: 'toast-notify.css', 7 | shadow: false, 8 | }) 9 | export class ToastNotify { 10 | @State() isToastOpen: boolean = true; 11 | @Prop() Heading: string; 12 | @Prop() indicationIcon: string; 13 | 14 | handleClose = () => { 15 | this.isToastOpen = false; 16 | }; 17 | 18 | render() { 19 | const icons = toastSvg(); 20 | 21 | const defaultIcon = 'success'; 22 | 23 | if (this.isToastOpen) { 24 | return ( 25 |
26 |
27 |
{icons[this.indicationIcon ? this.indicationIcon : defaultIcon]}
28 | 29 |
30 |

{this.Heading}

31 | 32 |
33 | 34 | 37 |
38 | ); 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/components/toast-notify/toast-svg.tsx: -------------------------------------------------------------------------------- 1 | import { h } from '@stencil/core'; 2 | 3 | const toastSvg = () => { 4 | return { 5 | success: ( 6 | 22 | ), 23 | 24 | warning: ( 25 | 41 | ), 42 | 43 | failure: ( 44 | 60 | ), 61 | close: ( 62 | 77 | ), 78 | }; 79 | }; 80 | 81 | export default toastSvg; 82 | -------------------------------------------------------------------------------- /src/components/tooltip-component/readme.md: -------------------------------------------------------------------------------- 1 | # tooltip-component 2 | 3 | 4 | 5 | 6 | ## Properties 7 | 8 | | Property | Attribute | Description | Type | Default | 9 | | ----------------- | ------------------ | --------------------------------------------- | -------- | ----------- | 10 | | `backgroundColor` | `background-color` | Background color | `string` | `'black'` | 11 | | `color` | `color` | Text color | `string` | `'white'` | 12 | | `fontSize` | `font-size` | Font size | `string` | `'inherit'` | 13 | | `position` | `position` | Position of tooltip. left, right, top, bottom | `string` | `'top'` | 14 | | `text` | `text` | Text to be displayed in the tooltip | `string` | `undefined` | 15 | 16 | 17 | ---------------------------------------------- 18 | 19 | *Built with [StencilJS](https://stenciljs.com/) by the [ZTM](https://zerotomastery.io/) community* 20 | -------------------------------------------------------------------------------- /src/components/tooltip-component/tooltip-component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | position: relative; 3 | display: inline-block; 4 | --tooltip-background-color: #000; 5 | } 6 | 7 | :host(:hover) .tooltiptext { 8 | visibility: visible; 9 | } 10 | 11 | .tooltiptext { 12 | visibility: hidden; 13 | min-width: 80px; 14 | background-color: var(--tooltip-background-color); 15 | color: #fff; 16 | text-align: center; 17 | border-radius: 4px; 18 | padding: 5px; 19 | position: absolute; 20 | z-index: 1; 21 | } 22 | 23 | /* Positions */ 24 | .top { 25 | bottom: 105%; 26 | left: 50%; 27 | transform: translateX(-50%); 28 | } 29 | 30 | .bottom { 31 | top: 102%; 32 | left: 50%; 33 | transform: translateX(-50%); 34 | } 35 | .right { 36 | top: -5px; 37 | left: 105%; 38 | } 39 | 40 | .left { 41 | top: -5px; 42 | right: 105%; 43 | } 44 | 45 | /* Arrow style */ 46 | .tooltiptext::after { 47 | content: ''; 48 | position: absolute; 49 | border-width: 5px; 50 | border-style: solid; 51 | } 52 | 53 | /* Arrows Positions */ 54 | .top::after { 55 | top: 100%; 56 | left: 50%; 57 | margin-left: -5px; 58 | border-color: var(--tooltip-background-color) transparent transparent transparent; 59 | } 60 | 61 | .bottom::after { 62 | bottom: 100%; 63 | left: 50%; 64 | margin-left: -5px; 65 | border-color: transparent transparent var(--tooltip-background-color) transparent; 66 | } 67 | 68 | .right::after { 69 | top: 50%; 70 | right: 100%; 71 | margin-top: -5px; 72 | border-color: transparent var(--tooltip-background-color) transparent transparent; 73 | } 74 | 75 | .left::after { 76 | top: 50%; 77 | left: 100%; 78 | margin-top: -5px; 79 | border-color: transparent transparent transparent var(--tooltip-background-color); 80 | } 81 | -------------------------------------------------------------------------------- /src/components/tooltip-component/tooltip-component.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Host, h, Prop, Element } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'tooltip-component', 5 | styleUrl: 'tooltip-component.css', 6 | shadow: true, 7 | }) 8 | export class TooltipComponent { 9 | /** 10 | * Text to be displayed in the tooltip 11 | */ 12 | @Prop() text: string; 13 | /** 14 | * Position of tooltip. left, right, top, bottom 15 | */ 16 | @Prop() position: string = 'top'; 17 | /** 18 | * Font size 19 | */ 20 | @Prop() fontSize: string = 'inherit'; 21 | /** 22 | * Background color 23 | */ 24 | @Prop() backgroundColor: string = 'black'; 25 | /** 26 | * Text color 27 | */ 28 | @Prop() color: string = 'white'; 29 | 30 | private styleUse = { 'color': this.color, 'font-size': this.fontSize }; 31 | @Element() private element: HTMLElement; 32 | 33 | componentDidLoad() { 34 | this.element.style.setProperty('--tooltip-background-color', this.backgroundColor); 35 | } 36 | 37 | render() { 38 | return ( 39 | 40 | 41 | 42 | {this.text} 43 | 44 | 45 | ); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/components/typewriter-component/TypewriterComponent.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Typewriter from 'typewriter-effect'; 3 | import './Typer.css'; 4 | 5 | function TypewriterComponent(props) { 6 | const Tstyle = { 7 | fontSize: props.size, 8 | textAlign: props.position, 9 | background: props.background, 10 | color: props.color, 11 | }; 12 | return ( 13 |
14 | { 16 | typewriter.typeString(props.text).start(); 17 | }} 18 | /> 19 |
20 | ); 21 | } 22 | 23 | export default TypewriterComponent; 24 | -------------------------------------------------------------------------------- /src/components/typewriter-component/readme.md: -------------------------------------------------------------------------------- 1 | # typerwriter-component 2 | 3 | 4 | 5 | ## Properties 6 | 7 | | Property | Attribute | Description | Type | Default | 8 | | ------------ | ------------------ | --------------------------------------------- | -------- | ----------- | 9 | | `background` | `background-color` | Background color | `string` | `'black'` | 10 | | `color` | `color` | Text color | `string` | `'white'` | 11 | | `size` | `font-size` | Font size | `string` | `'inherit'` | 12 | | `position` | `position` | Position of tooltip. left, right, top, bottom | `string` | `'top'` | 13 | | `text` | `text` | Text to be displayed in the tooltip | `string` | `undefined` | 14 | -------------------------------------------------------------------------------- /src/components/typewriter-component/typewriter-component.css: -------------------------------------------------------------------------------- 1 | .Typer { 2 | font-family: sans-serif; 3 | font-weight: 800; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | min-height: 100vh; 8 | } 9 | -------------------------------------------------------------------------------- /src/global/base.scss: -------------------------------------------------------------------------------- 1 | @import './resets/normalize.scss'; 2 | @import './global.scss'; 3 | @import './variables.scss'; 4 | -------------------------------------------------------------------------------- /src/global/global.scss: -------------------------------------------------------------------------------- 1 | body { 2 | width: 100vw; 3 | overflow-x: hidden; 4 | } 5 | 6 | header { 7 | background-color: var(--bg-primary); 8 | width: 100vw; 9 | 10 | img { 11 | display: block; 12 | margin: 0 auto; 13 | } 14 | } 15 | 16 | .navbar { 17 | background-color: var(--bg-primary); 18 | width: 100%; 19 | height: 70px; 20 | display: flex; 21 | justify-content: space-around; 22 | align-items: center; 23 | padding: 0 2rem; 24 | position: fixed; 25 | top: 0; 26 | left: 0; 27 | z-index: 10; 28 | position: fixed; 29 | color: #fff; 30 | border-bottom: 2px solid var(--white); 31 | 32 | .nav-logo-div { 33 | width: 30%; 34 | } 35 | 36 | .nav-logo { 37 | height: 120px; 38 | object-fit: contain; 39 | } 40 | } 41 | 42 | main { 43 | display: flex; 44 | flex-direction: column; 45 | justify-content: center; 46 | align-items: center; 47 | } 48 | 49 | section { 50 | position: relative; 51 | margin: 3rem 0; 52 | } 53 | -------------------------------------------------------------------------------- /src/global/resets/normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | font-family: Arial, Helvetica, sans-serif; 15 | } 16 | 17 | /* Sections 18 | ========================================================================== */ 19 | 20 | /** 21 | * Remove the margin in all browsers. 22 | */ 23 | 24 | body { 25 | margin: 0; 26 | } 27 | 28 | /** 29 | * Render the `main` element consistently in IE. 30 | */ 31 | 32 | main { 33 | display: block; 34 | } 35 | 36 | /** 37 | * Correct the font size and margin on `h1` elements within `section` and 38 | * `article` contexts in Chrome, Firefox, and Safari. 39 | */ 40 | 41 | h1 { 42 | font-size: 2em; 43 | margin: 0.67em 0; 44 | } 45 | 46 | /* Grouping content 47 | ========================================================================== */ 48 | 49 | /** 50 | * 1. Add the correct box sizing in Firefox. 51 | * 2. Show the overflow in Edge and IE. 52 | */ 53 | 54 | hr { 55 | box-sizing: content-box; /* 1 */ 56 | height: 0; /* 1 */ 57 | overflow: visible; /* 2 */ 58 | } 59 | 60 | /** 61 | * 1. Correct the inheritance and scaling of font size in all browsers. 62 | * 2. Correct the odd `em` font sizing in all browsers. 63 | */ 64 | 65 | pre { 66 | font-family: monospace, monospace; /* 1 */ 67 | font-size: 1em; /* 2 */ 68 | } 69 | 70 | /* Text-level semantics 71 | ========================================================================== */ 72 | 73 | /** 74 | * Remove the gray background on active links in IE 10. 75 | */ 76 | 77 | a { 78 | background-color: transparent; 79 | } 80 | 81 | /** 82 | * 1. Remove the bottom border in Chrome 57- 83 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 84 | */ 85 | 86 | abbr[title] { 87 | border-bottom: none; /* 1 */ 88 | text-decoration: underline; /* 2 */ 89 | text-decoration: underline dotted; /* 2 */ 90 | } 91 | 92 | /** 93 | * Add the correct font weight in Chrome, Edge, and Safari. 94 | */ 95 | 96 | b, 97 | strong { 98 | font-weight: bolder; 99 | } 100 | 101 | /** 102 | * 1. Correct the inheritance and scaling of font size in all browsers. 103 | * 2. Correct the odd `em` font sizing in all browsers. 104 | */ 105 | 106 | code, 107 | kbd, 108 | samp { 109 | font-family: monospace, monospace; /* 1 */ 110 | font-size: 1em; /* 2 */ 111 | } 112 | 113 | /** 114 | * Add the correct font size in all browsers. 115 | */ 116 | 117 | small { 118 | font-size: 80%; 119 | } 120 | 121 | /** 122 | * Prevent `sub` and `sup` elements from affecting the line height in 123 | * all browsers. 124 | */ 125 | 126 | sub, 127 | sup { 128 | font-size: 75%; 129 | line-height: 0; 130 | position: relative; 131 | vertical-align: baseline; 132 | } 133 | 134 | sub { 135 | bottom: -0.25em; 136 | } 137 | 138 | sup { 139 | top: -0.5em; 140 | } 141 | 142 | /* Embedded content 143 | ========================================================================== */ 144 | 145 | /** 146 | * Remove the border on images inside links in IE 10. 147 | */ 148 | 149 | img { 150 | border-style: none; 151 | } 152 | 153 | /* Forms 154 | ========================================================================== */ 155 | 156 | /** 157 | * 1. Change the font styles in all browsers. 158 | * 2. Remove the margin in Firefox and Safari. 159 | */ 160 | 161 | button, 162 | input, 163 | optgroup, 164 | select, 165 | textarea { 166 | font-family: inherit; /* 1 */ 167 | font-size: 100%; /* 1 */ 168 | line-height: 1.15; /* 1 */ 169 | margin: 0; /* 2 */ 170 | } 171 | 172 | /** 173 | * Show the overflow in IE. 174 | * 1. Show the overflow in Edge. 175 | */ 176 | 177 | button, 178 | input { 179 | /* 1 */ 180 | overflow: visible; 181 | } 182 | 183 | /** 184 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 185 | * 1. Remove the inheritance of text transform in Firefox. 186 | */ 187 | 188 | button, 189 | select { 190 | /* 1 */ 191 | text-transform: none; 192 | } 193 | 194 | /** 195 | * Correct the inability to style clickable types in iOS and Safari. 196 | */ 197 | 198 | button, 199 | [type='button'], 200 | [type='reset'], 201 | [type='submit'] { 202 | -webkit-appearance: button; 203 | } 204 | 205 | /** 206 | * Remove the inner border and padding in Firefox. 207 | */ 208 | 209 | button::-moz-focus-inner, 210 | [type='button']::-moz-focus-inner, 211 | [type='reset']::-moz-focus-inner, 212 | [type='submit']::-moz-focus-inner { 213 | border-style: none; 214 | padding: 0; 215 | } 216 | 217 | /** 218 | * Restore the focus styles unset by the previous rule. 219 | */ 220 | 221 | button:-moz-focusring, 222 | [type='button']:-moz-focusring, 223 | [type='reset']:-moz-focusring, 224 | [type='submit']:-moz-focusring { 225 | outline: 1px dotted ButtonText; 226 | } 227 | 228 | /** 229 | * Correct the padding in Firefox. 230 | */ 231 | 232 | fieldset { 233 | padding: 0.35em 0.75em 0.625em; 234 | } 235 | 236 | /** 237 | * 1. Correct the text wrapping in Edge and IE. 238 | * 2. Correct the color inheritance from `fieldset` elements in IE. 239 | * 3. Remove the padding so developers are not caught out when they zero out 240 | * `fieldset` elements in all browsers. 241 | */ 242 | 243 | legend { 244 | box-sizing: border-box; /* 1 */ 245 | color: inherit; /* 2 */ 246 | display: table; /* 1 */ 247 | max-width: 100%; /* 1 */ 248 | padding: 0; /* 3 */ 249 | white-space: normal; /* 1 */ 250 | } 251 | 252 | /** 253 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 254 | */ 255 | 256 | progress { 257 | vertical-align: baseline; 258 | } 259 | 260 | /** 261 | * Remove the default vertical scrollbar in IE 10+. 262 | */ 263 | 264 | textarea { 265 | overflow: auto; 266 | } 267 | 268 | /** 269 | * 1. Add the correct box sizing in IE 10. 270 | * 2. Remove the padding in IE 10. 271 | */ 272 | 273 | [type='checkbox'], 274 | [type='radio'] { 275 | box-sizing: border-box; /* 1 */ 276 | padding: 0; /* 2 */ 277 | } 278 | 279 | /** 280 | * Correct the cursor style of increment and decrement buttons in Chrome. 281 | */ 282 | 283 | [type='number']::-webkit-inner-spin-button, 284 | [type='number']::-webkit-outer-spin-button { 285 | height: auto; 286 | } 287 | 288 | /** 289 | * 1. Correct the odd appearance in Chrome and Safari. 290 | * 2. Correct the outline style in Safari. 291 | */ 292 | 293 | [type='search'] { 294 | -webkit-appearance: textfield; /* 1 */ 295 | outline-offset: -2px; /* 2 */ 296 | } 297 | 298 | /** 299 | * Remove the inner padding in Chrome and Safari on macOS. 300 | */ 301 | 302 | [type='search']::-webkit-search-decoration { 303 | -webkit-appearance: none; 304 | } 305 | 306 | /** 307 | * 1. Correct the inability to style clickable types in iOS and Safari. 308 | * 2. Change font properties to `inherit` in Safari. 309 | */ 310 | 311 | ::-webkit-file-upload-button { 312 | -webkit-appearance: button; /* 1 */ 313 | font: inherit; /* 2 */ 314 | } 315 | 316 | /* Interactive 317 | ========================================================================== */ 318 | 319 | /* 320 | * Add the correct display in Edge, IE 10+, and Firefox. 321 | */ 322 | 323 | details { 324 | display: block; 325 | } 326 | 327 | /* 328 | * Add the correct display in all browsers. 329 | */ 330 | 331 | summary { 332 | display: list-item; 333 | } 334 | 335 | /* Misc 336 | ========================================================================== */ 337 | 338 | /** 339 | * Add the correct display in IE 10+. 340 | */ 341 | 342 | template { 343 | display: none; 344 | } 345 | 346 | /** 347 | * Add the correct display in IE 10. 348 | */ 349 | 350 | [hidden] { 351 | display: none; 352 | } 353 | -------------------------------------------------------------------------------- /src/global/variables.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg-primary: #393e46; 3 | --primary: #00adb5; 4 | --white: #fff; 5 | --black: #1e1e1e; 6 | } 7 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | WebBlocks 9 | 10 | 11 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 35 |
36 |
37 | 38 |
39 |
40 |
41 | 42 | 43 | 44 | 45 |
46 | 47 |

Congrats on the internet loading request.

48 | 49 | 50 | 51 |

Make request according to standard protocol

52 | 53 | 54 | 55 |

Sorry!There was a problem with your request

56 | 57 |
58 | 59 |
60 | 61 | My Button 62 |
63 | 64 |
65 | 66 |

Feel free to look around. Detailed documentation will follow soon

67 | 68 |
69 | 70 |
71 | 72 |
73 | 74 |
75 | 76 | 77 | 78 | 79 | 80 |
81 | 82 | 83 | 84 |
85 | 86 | 87 | 88 | 89 | 90 | 91 |
92 | 93 | 94 |
95 | 96 |
97 | 98 |
99 |
100 | 101 | 102 |
103 |
104 | 105 | 106 | Hello World! 107 | 108 |
109 | 110 |
111 | 112 |
113 | 114 |
115 |

Hello

116 | 117 |

World

118 |
119 | 120 | 132 |
133 | 134 | 135 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export { Components, JSX } from './components'; 2 | -------------------------------------------------------------------------------- /src/pages/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | WebBlocks 9 | 10 | 11 | 12 | 13 | 14 | 15 |

test

16 | 17 | 18 | -------------------------------------------------------------------------------- /src/utils/utils.spec.ts: -------------------------------------------------------------------------------- 1 | import { format } from './utils'; 2 | 3 | describe('format', () => { 4 | it('returns empty string for no names defined', () => { 5 | expect(format(undefined, undefined, undefined)).toEqual(''); 6 | }); 7 | 8 | it('formats just first names', () => { 9 | expect(format('Joseph', undefined, undefined)).toEqual('Joseph'); 10 | }); 11 | 12 | it('formats first and last names', () => { 13 | expect(format('Joseph', undefined, 'Publique')).toEqual('Joseph Publique'); 14 | }); 15 | 16 | it('formats first, middle and last names', () => { 17 | expect(format('Joseph', 'Quincy', 'Publique')).toEqual('Joseph Quincy Publique'); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /src/utils/utils.ts: -------------------------------------------------------------------------------- 1 | export function format(first: string, middle: string, last: string): string { 2 | return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''); 3 | } 4 | -------------------------------------------------------------------------------- /stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { Config } from '@stencil/core'; 2 | import { sass } from '@stencil/sass'; 3 | 4 | const dev: boolean = process.argv && process.argv.indexOf('--dev') > -1; 5 | const apiEnv: string = dev ? 'dev' : 'prod'; 6 | const copyObj = { 7 | copy: [{ src: process.env.PWD + '/src/pages', dest: process.env.PWD + '/www/pages' }], 8 | }; 9 | 10 | const shouldCopy = 11 | apiEnv === 'prod' 12 | ? { ...copyObj } 13 | : { copy: [{ ...copyObj.copy[0] }, { src: process.env.PWD + '/dist/webblocks/webblocks.css', dest: process.env.PWD + '/www/build/webblocks.css' }] }; 14 | 15 | export const config: Config = { 16 | namespace: 'webblocks', 17 | plugins: [sass()], 18 | globalStyle: 'src/global/base.scss', 19 | outputTargets: [ 20 | { 21 | type: 'dist', 22 | esmLoaderPath: '../loader', 23 | }, 24 | { 25 | type: 'dist-custom-elements-bundle', 26 | }, 27 | { 28 | type: 'docs-readme', 29 | footer: '*Built with [StencilJS](https://stenciljs.com/) by the [ZTM](https://zerotomastery.io/) community*', 30 | }, 31 | { 32 | type: 'www', 33 | /* 34 | This line is important in order to see changes in the index.html file immediately via hot reloading if changes happen in stylesheets 35 | without the need to re-build the entire thing 36 | */ 37 | // ...shouldCopy, 38 | serviceWorker: null, // disable service workers 39 | }, 40 | ], 41 | }; 42 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "checkJs": false, 4 | "allowSyntheticDefaultImports": true, 5 | "allowUnreachableCode": false, 6 | "declaration": false, 7 | "experimentalDecorators": true, 8 | "lib": ["dom", "es2017"], 9 | "moduleResolution": "node", 10 | "module": "esnext", 11 | "target": "es2017", 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true, 14 | "jsx": "react", 15 | "jsxFactory": "h" 16 | }, 17 | "include": ["src"], 18 | "exclude": ["node_modules"] 19 | } 20 | --------------------------------------------------------------------------------