@unlk/keymaster 1.0.2 → 1.0.4

package/CHANGELOG.md

@@ -0,0 +1,48 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [1.0.4] - 2025-04-25
+
+### Updated
+Readme Logo
+Changelog function for github build
+
+## [1.0.3] - 2025-04-25
+
+### Updated
+Bootstrap 5.3.5
+
+### Added
+- Spinners
+- Tooltips
+- Popovers
+- Modals
+
+## [1.0.2] - 2025-04-21
+
+### Added
+
+- Shadows
+
+## [1.0.1] - 2025-04-21
+
+### Added
+
+- Typography
+- Accordion
+- Alert
+- Badge
+- Button Group
+- Button
+- Carousel
+
+## [1.0.0] - 2025-02-05
+
+_This is the first stable release of the design system._
+
+### Added
+
+- Font Awesome 6
+- Color utility classes for brand colors
+- Theme colors matching the brand colors

package/README.md

@@ -0,0 +1,157 @@
+<a name="readme-top"></a>
+
+<!-- PROJECT LOGO -->
+
+<br />
+<div align="center">
+  <a href="https://www.unlock.com/">
+    <svg width="54" height="88" viewBox="0 0 54 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M42.5456 70.7213H53.182L31.9092 42.5022H21.2728L42.5456 70.7213Z" fill="#CBEBF8"/>
+<path d="M42.5456 70.7213H31.9092V88H42.5456V70.7213Z" fill="#CBEBF8"/>
+<path d="M31.9092 70.7213H42.5456L21.2728 42.5022H10.6364L31.9092 70.7213Z" fill="#66CDF3"/>
+<path d="M31.9092 70.7213V88H21.2728V70.7213H31.9092Z" fill="#66CDF3"/>
+<path d="M21.2728 70.7213H31.9092L10.6364 42.5022V21.2728C10.6364 15.4119 15.4119 10.6364 21.2728 10.6364C27.1337 10.6364 31.9092 15.4119 31.9092 21.2728V25.701H42.5456V21.2728C42.5456 9.50765 33.038 0 21.2728 0C9.50765 0 0.0434132 9.50765 0.0434132 21.2294V42.4588L21.2728 70.7213Z" fill="#3A7BBE"/>
+<path d="M21.2728 70.7213V88H16.2802C14.2832 88 12.4164 87.6527 10.6364 87.0015V70.7213H21.2728Z" fill="#3A7BBE"/>
+<path d="M0.0434139 42.5022L21.2728 70.7647H10.6364V87.0449C4.42822 84.744 0 78.7962 0 71.8066V42.4154V42.5022H0.0434139Z" fill="#3E51A2"/>
+</svg>
+
+  </a>
+
+<h3 align="center">Keymaster</h3>
+
+  <p align="center">
+    The base styles for all Unlock Projects based off Bootstrap 5
+    <br />
+    <a href="https://unlock-com.github.io/keymaster"><strong>Live Demo and Docs »</strong></a>
+  </p>
+</div>
+
+<!-- TABLE OF CONTENTS -->
+<details>
+  <summary>Table of Contents</summary>
+  <ol>
+    <li>
+      <a href="#about-the-project">About The Project</a>
+      <ul>
+        <li><a href="#built-with">Built With</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#getting-started">Getting Started</a>
+      <ul>
+        <li><a href="#prerequisites">Prerequisites</a></li>
+        <li><a href="#installation">Installation</a></li>
+      </ul>
+    </li>
+    <li><a href="#usage">Usage</a></li>
+  </ol>
+</details>
+
+<!-- ABOUT THE PROJECT -->
+
+## About The Project
+
+Keymaster is the shared visual and interactive language that guides how we build high-quality customer experience. It’s
+intended for use both internally at Unlock and externally by third-party developers and designers.
+
+More specifically, we aim to:
+
+* Make it easier for our customers and partners to do business with us by obscuring organizational boundaries, channels
+  and technology stacks.
+* Save time and money during the design and delivery phase.
+* Ease collaboration and align teams.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+### Built With
+
+[![Bootstrap][Bootstrap.com]][Bootstrap-url]
+[![Storybook][Storybook.js.org]][Storybook-url]
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+
+<!-- GETTING STARTED -->
+
+## Getting Started
+
+### Prerequisites
+
+The design system has a few dependencies that you will need to install before you can use it.
+
+* [Bootstrap 5](https://getbootstrap.com/docs/)
+* [Sass](https://sass-lang.com/) (Optional: If you want to compile the Sass files yourself.)
+
+Symphony also requires you to have [Bootstrap 5](https://getbootstrap.com/docs/) installed in your project as a
+peer-dependency.
+If you do not have Bootstrap 5 installed, you can install it with the following command:
+
+```sh
+npm install bootstrap@5
+```
+
+Optional:
+This project utilizes sass and requires you to have [sass](https://npmjs.com/package/sass) to compile our sources.
+Alternatively, you can use the compiled CSS files in the `dist` folder.
+If you do not have sass installed, you can install it with the following command:
+
+```sh
+// locally
+npm install --save-dev sass
+
+
+// or globally
+npm install -g sass
+```
+
+### Installation
+
+To install `@unlk/keymaster` in your project with [npm](https://www.npmjs.com/), run the following command:
+
+```sh
+npm install @unlk/keymaster
+```
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+
+<!-- USAGE EXAMPLES -->
+
+## Usage
+
+To use the keymaster design system, you will need to import the scss file into your project.
+This will import all of keymaster's styles and variables into your project.
+
+```scss
+@import '@unlk/keymaster/scss/keymaster.scss';
+```
+
+Alternatively, if you want to use the precompiled css, you can import the compiled css file into your project.
+
+```scss
+@import '@unlk/keymaster/dist/css/keymaster.css';
+```
+
+You will also need to import the keymaster's javascript dependencies into your project.
+
+```js
+import '@unlk/keymaster/js/bootstrap.js';
+```
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- MARKDOWN LINKS & IMAGES -->
+<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
+
+[product-screenshot]: images/screenshot.png
+
+[Bootstrap.com]: https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white
+
+[Bootstrap-url]: https://getbootstrap.com
+
+[Storybook.js.org]: https://img.shields.io/badge/Storybook-ff4785?style=for-the-badge&logo=storybook&logoColor=white
+
+[Storybook-url]: https://storybook.js.org/
+