@unlk/keymaster 1.0.1 → 1.0.3

package/CHANGELOG.md

@@ -0,0 +1,42 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [1.0.3] - 2025-04-25
+
+### Updated
+Bootsrap 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,136 @@
+<a name="readme-top"></a>
+
+<!-- PROJECT LOGO -->
+
+<br />
+<div align="center">
+  <a href="https://www.unlock.com/">
+    <img src="images/unlock.svg" alt="Unlock Logo">
+  </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/
+