+ );
+};
+
+export default Callout;
diff --git a/apps/docs/components/callout/callout.css b/apps/docs/components/callout/callout.css
new file mode 100644
index 000000000..b0fb23109
--- /dev/null
+++ b/apps/docs/components/callout/callout.css
@@ -0,0 +1,6 @@
+.hd-callout {
+ background-color: var(--hd-color-accent-surface);
+ border-radius: 0.25rem;
+ border-left: 0.25rem solid var(--hd-color-accent-border);
+ padding: 1rem;
+}
diff --git a/apps/docs/components/mdx/components.tsx b/apps/docs/components/mdx/components.tsx
index a3c0695c7..cb49cdfa0 100644
--- a/apps/docs/components/mdx/components.tsx
+++ b/apps/docs/components/mdx/components.tsx
@@ -2,6 +2,7 @@ import type { HTMLAttributes } from "react";
import dynamic from "next/dynamic";
import Card from "@/components/card/Card.tsx";
+import Callout from "@/components/callout/Callout.tsx";
import NextImage from "@/components/image/Image.tsx";
import Pre from "@/components/pre/Pre.tsx";
import InlineCode from "@/components/code/InlineCode.tsx";
@@ -32,6 +33,7 @@ const PropTable = dynamic(() => import("@/app/ui/components/propTable/PropTable.
export const components = {
Card,
code: InlineCode,
+ Callout: Callout,
Image: NextImage,
pre: Pre,
MotionPreview: MotionPreview,
diff --git a/apps/docs/components/title/title.css b/apps/docs/components/title/title.css
index a5c2861ff..be4c924ae 100644
--- a/apps/docs/components/title/title.css
+++ b/apps/docs/components/title/title.css
@@ -22,12 +22,12 @@
}
.hd-title--level4 {
- font-size: 1em;
+ font-size: 1.125em;
margin-block: 1.5rem 0.75rem;
}
.hd-title--level5 {
- font-size: 0.825em;
+ font-size: 1rem;
margin-block: 1rem 0.625rem;
}
diff --git a/apps/docs/content/getting-started/individual-packages.mdx b/apps/docs/content/getting-started/individual-packages.mdx
new file mode 100644
index 000000000..2627a31e6
--- /dev/null
+++ b/apps/docs/content/getting-started/individual-packages.mdx
@@ -0,0 +1,98 @@
+---
+title: Individual Packages
+description: An how to guide to install Hopper UI packages individually.
+order: 3
+---
+
+If you need a particluar installation, you can install Hopper UI packages individually.
+
+## Components
+
+Hopper Components are React Components, if you are using another framework, or React Native, you should use [components tokens](/tokens/getting-started/introduction) directly when developing your own components.
+
+### Installation
+
+Run one of the following commands in your terminal to install the Hopper Components package.
+
+
+
+### Usage
+
+A Provider is required to use Hopper Components. Wrap your application with the HopperProvider component to use our components.
+
+```jsx
+import { Button } from "@hopper-ui/components";
+
+
+
+
+```
+
+## Icons
+
+### Installation
+
+
+
+### Usage
+
+You can now use [icons](/icons/react-icons/icon-library) and [rich icons](/icons/react-icons/rich-icon-library) in your project by using the following syntax:
+
+```tsx
+import { AddIcon, ConversationRichIcon } from "@hopper-ui/icons";
+
+
+
+```
+
+#### Standalone Installation
+
+It is recommended to use `@hopper-ui/icons` with `@hopper-ui/components`. The standalone installation procedure is detailed in case you only need the icons, and not the components. This is also the installation process until the components are released.
+
+
+
+Import the styles in your project:
+
+```css
+@import "@hopper-ui/icons/index.css";
+@import "@hopper-ui/styled-system/index.css";
+```
+
+Configuring your application is a little different:
+
+```tsx
+import { StyledSystemProvider } from "@hopper-ui/styled-system";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const root = createRoot(document.getElementById("root")!);
+
+root.render(
+
+
+
+);
+```
+
+Using the icon is the exact same way as with the default package.
+
+```tsx
+import { AddIcon } from "@hopper-ui/icons";
+
+
+```
+
+#### React 16 Installation
+
+If you're still using React 16, you need to use the `@hopper-ui/icons-react16` package.
+
+
+
+The usage is the same as the default package, you only need to import the icons from a different package.
+
+```tsx
+import { AddIcon, ConversationRichIcon } from "@hopper-ui/icons-react16";
+
+
+
+```
diff --git a/apps/docs/content/getting-started/javascript.mdx b/apps/docs/content/getting-started/javascript.mdx
new file mode 100644
index 000000000..633af16b3
--- /dev/null
+++ b/apps/docs/content/getting-started/javascript.mdx
@@ -0,0 +1,69 @@
+---
+title: Javascript
+description: An installation guide for Hopper UI for non-React users.
+order: 2
+---
+
+If you are a non-React user, you can still benefit from Hopper UI. This guide will help you get started with Hopper UI.
+
+## Tokens
+
+Hopper Tokens are a collection of design tokens that should be used to style your application. [Semantic tokens](/tokens/semantic/color) are available for everyone, where component tokens are designed with non React users in mind.
+
+### Installation
+
+
+
+### Usage
+
+#### CSS
+
+Import the tokens in your project by doing the following:
+
+```css
+@import "@hopper-ui/tokens/tokens.css";
+```
+
+If your application supports a dark mode, import dark mode tokens as well:
+
+```css
+@import "@hopper-ui/tokens/dark/tokens.css";
+```
+
+You can now use Hopper tokens in your project by using the following syntax:
+
+```css
+.my-class {
+ background-color: var(--hop-primary-surface-weak);
+}
+```
+
+#### Fonts
+
+In order to use Hopper fonts in your project, import the following:
+
+```css
+@import "@hopper-ui/tokens/fonts.css";
+```
+
+All the necessary font-face declarations are now imported into your project.
+
+## SVG Icons
+
+If your project is not using the React framework, you can use the [SVG icons](/icons/svg/icon-library) directly. You can find the SVG icons in the `@hopper-ui/svg-icons` package.
+
+
+
+You can import the SVG directly into your JavaScript file. Keep in mind that if you plan to use SVG icons as components, you'll need to ensure that your bundler is configured to handle SVG parsing appropriately.
+
+```tsx
+import alertIcon from "@hopper-ui/svg-icons/alert-24.svg";
+```
+
+Alternatively, you can utilize SVG icons within your CSS in the following manner:
+
+```css
+.myComponent {
+ background-image: url("@hopper-ui/svg-icons/alert-24.svg");
+}
+```
diff --git a/apps/docs/content/getting-started/react.mdx b/apps/docs/content/getting-started/react.mdx
new file mode 100644
index 000000000..a727d027b
--- /dev/null
+++ b/apps/docs/content/getting-started/react.mdx
@@ -0,0 +1,51 @@
+---
+title: React
+description: Getting started with Hopper UI.
+order: 1
+---
+
+This guide will help you get started with Hopper UI. Hopper UI is a Design System that provides a collection of components, [tokens](/tokens/getting-started/introduction), and [icons](/icons/getting-started/introduction) to help you build applications.
+
+Below is the typical installation path, assuming you are using React. If you have particluar needs you can have a look at these pages:
+
+- [Javascript installation](/getting-started/javascript)
+- [Individual package installation](/getting-started/individual-packages)
+
+## Installation
+
+### Install packages
+
+Run the following command in your terminal to install the Hopper packages.
+
+
+
+### Configure your application
+
+After installing Hopper UI packages, you must setup a Provider at the root of your application. This is typically in your _index.tsx_ or _app.tsx_, but can vary based on your specific setup.
+
+```jsx
+import { HopperProvider } from "@hopper-ui/components";
+import { createRoot } from 'react-dom/client';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+
+
+
+);
+```
+
+### Import styles
+
+You will also need to import the Hopper styles in your project. You can do this by importing the following CSS files:
+
+```css
+@import "@hopper-ui/components/index.css";
+@import "@hopper-ui/icons/index.css";
+```
+
+You are now ready to use Hopper UI in your project! Need more details? Have a look at the [Individual package installation](/getting-started/individual-packages) page.
+
+## Contribute
+
+Pull requests are welcome. For major changes, please open a [discussion](https://github.com/gsoft-inc/wl-hopper/discussions/new/choose) first to discuss what you would like to change. If you're interested in contributing, check out our [Contributing Guide](https://github.com/gsoft-inc/wl-hopper/blob/main/CONTRIBUTING.md).
diff --git a/apps/docs/contentlayer.config.js b/apps/docs/contentlayer.config.js
index b7365955f..0497c82be 100644
--- a/apps/docs/contentlayer.config.js
+++ b/apps/docs/contentlayer.config.js
@@ -122,6 +122,39 @@ export const Icons = defineDocumentType(() => ({
}
}));
+export const GettingStarted = defineDocumentType(() => ({
+ name: "GettingStarted",
+ filePathPattern: "getting-started/**/*.mdx",
+ contentType: "mdx",
+ fields: {
+ title: {
+ type: "string",
+ required: true
+ },
+ description: {
+ type: "string"
+ },
+ section: {
+ type: "string"
+ },
+ order: {
+ type: "number"
+ }
+ },
+ computedFields: {
+ slug: {
+ type: "string",
+ resolve: post => post._raw.sourceFileName.replace(/\.mdx$/, "")
+ },
+ section: {
+ type: "string",
+ resolve: post => {
+ return post._raw.sourceFileDir.replace("getting-started/", "");
+ }
+ }
+ }
+}));
+
export const Components = defineDocumentType(() => ({
name: "Components",
filePathPattern: "components/**/*.mdx",
@@ -151,7 +184,7 @@ export const Components = defineDocumentType(() => ({
export default makeSource({
contentDirPath: "./content",
- documentTypes: [Page, Tokens, Components, Icons, Guides],
+ documentTypes: [Page, Tokens, Components, Icons, Guides, GettingStarted],
mdx: {
remarkPlugins: [],
rehypePlugins: rehypePluginOptions