diff --git a/.gitignore b/.gitignore
index 55e535bad..2563cd9cb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -42,6 +42,7 @@ next-env.d.ts
# storybook
build-storybook.log
+storybook-static
# storybook generated doc
/packages/tokens/docs/
diff --git a/apps/docs/.eslintrc.json b/apps/docs/.eslintrc.json
index cf34e94bc..ca1d22508 100644
--- a/apps/docs/.eslintrc.json
+++ b/apps/docs/.eslintrc.json
@@ -11,13 +11,18 @@
"globals": {
"BreakpointTable": true,
"Card": true,
+ "CardLink": true,
+ "CardLinkList": true,
"Callout": true,
"Collapsible": true,
+ "Expand": true,
"TokenTable": true,
"MotionPreview": true,
+ "Figure": true,
"Footnote": true,
"TypographyTable": true,
"TypographyVariantTable": true,
+ "Tag": true,
"Tabs": true,
"TableSection": true,
"SimpleTable": true,
diff --git a/apps/docs/app/404.css b/apps/docs/app/404.css
new file mode 100644
index 000000000..052998ca4
--- /dev/null
+++ b/apps/docs/app/404.css
@@ -0,0 +1,38 @@
+.hd-layout_404 {
+ text-align: center;
+}
+
+.hd-404__title {
+ font-weight: 400;
+ font-size: clamp(2rem, 5vw, 4rem);
+ margin-top: 1rem;
+ margin-bottom: 2rem
+}
+
+.hd-404__subtitle {
+ font-weight: 400;
+ font-size: clamp(1rem, 4vw, 1.825rem);
+ margin-bottom: 2rem;
+}
+
+.hd-404__button {
+ border: none;
+ border-radius: var(--hd-border-radius-md);
+ height: 3rem;
+ padding: 0 1rem;
+ font-size: 1.25rem;
+ text-align: center;
+ background-color: var(--hd-accent-700);
+ display: inline-flex;
+ align-items: center;
+ color: var(--hd-white);
+ margin-top: 2rem;
+}
+
+.hd-404__button:hover {
+ background-color: var(--hd-accent-900);
+}
+
+.hd-404__button:active {
+ background-color: var(--hd-accent-400);
+}
diff --git a/apps/docs/app/getting-started/[...slug]/page.tsx b/apps/docs/app/getting-started/[...slug]/page.tsx
index 0eb8b3695..25d4d9e42 100644
--- a/apps/docs/app/getting-started/[...slug]/page.tsx
+++ b/apps/docs/app/getting-started/[...slug]/page.tsx
@@ -1,9 +1,9 @@
-import { notFound } from "next/navigation";
import { allGettingStarteds } from "contentlayer/generated";
+import { notFound } from "next/navigation";
+import getSectionLinks from "@/app/lib/getSectionLinks.ts";
import Aside from "@/app/ui/layout/aside/Aside.tsx";
import Mdx from "@/components/mdx/Mdx.tsx";
-import getSectionLinks from "@/app/lib/getSectionLinks.ts";
import Title from "@/components/title/Title";
interface PageProps {
@@ -19,9 +19,8 @@ export async function generateStaticParams() {
}
export default function IconPage({ params }: PageProps) {
- const [slug] = params.slug;
-
- const pages = allGettingStarteds.find(page => page.slug === slug);
+ const [section, type] = params.slug;
+ const pages = allGettingStarteds.find(page => page.slug === type && page.section === section);
if (!pages) {
notFound();
diff --git a/apps/docs/app/getting-started/layout.tsx b/apps/docs/app/getting-started/layout.tsx
index d4a164e66..376079204 100644
--- a/apps/docs/app/getting-started/layout.tsx
+++ b/apps/docs/app/getting-started/layout.tsx
@@ -1,35 +1,36 @@
"use client";
-import type { ReactNode } from "react";
-import { allGettingStarteds } from "contentlayer/generated";
-import { useSelectedLayoutSegment } from "next/navigation";
+import getPageLinks from "@/app/lib/getPageLinks";
+import getSectionLinks from "@/app/lib/getSectionLinks";
import Sidebar from "@/app/ui/layout/sidebar/Sidebar";
import SubHeader from "@/app/ui/layout/subHeader/SubHeader";
import Wrapper from "@/app/ui/layout/wrapper/Wrapper";
-import getSectionLinks from "@/app/lib/getSectionLinks";
import { SidebarProvider } from "@/context/sidebar/SidebarProvider";
-import getPageLinks from "@/app/lib/getPageLinks";
+import { allGettingStarteds } from "contentlayer/generated";
+import { notFound, useSelectedLayoutSegment } from "next/navigation";
+import type { ReactNode } from "react";
-export default function TokenLayout({ children }: { children: ReactNode }) {
- const slug = useSelectedLayoutSegment();
- const pageContent = allGettingStarteds.find(page => page.slug === slug);
- const allGettingStartedsLinks = getPageLinks(allGettingStarteds);
+export default function GettingStartedLayout({ children }: { children: ReactNode }) {
+ const selectedLayoutSegment = useSelectedLayoutSegment();
+ const [section, type] = selectedLayoutSegment?.split("/") ?? ["", ""];
+ const pageContent = allGettingStarteds.find(page => page.slug === type && page.section === section);
if (!pageContent) {
- return null;
+ return notFound();
}
const sectionLinks = getSectionLinks(pageContent);
+ const allGettingStartedsLinks = getPageLinks(allGettingStarteds, {
+ order: ["overview", "installation-path", "advanced-options", "guides"]
+ });
return (
- <>
-
The documentation is currently in beta.
- > - ); - - const newLandingPage = ( - <> -Explore our Design System, where icons, tokens, and components are
+ return (
+ Explore our Design System, where icons, tokens, and components are
handpicked for ultimate simplicity and accessibility.
- Built with accessibility in mind Hopper is based on React Aria Components
-
- Experience is pushed further with internationalization.
-
+
+ Built with accessibility in mind Hopper is based on React Aria Components
+
+ Experience is pushed further with internationalization.
+
Typescript based for reduced learning curve and error detection.
-
+
Switching from light to dark mode couldn't be easier.
- A set of commonly used interface icons. A set of commonly used interface icons. An accessible suite of components powered by
+
+ An accessible suite of components powered by
react-aria. Preview Only: These components are for reference only. Continue using Orbiter in production until further notice. {description}Leap into creativity
+
-
-
-
+
+
+
- Colors
- Sizes
- Text Styles
- Colors
+ Sizes
+ Icons
- Components
+ Icons
+ Components Preview
+ {title}
+
+
+
+
+
+
+## Customization Methods Overview
+
+Here's an overview of the different customization methods:
+
+- 🥇 [Direct styling adjustments](#customization-methods-details--direct-styling-adjustments): You can use CSS Classes or the styling props on existing Design System Components to alter the style as needed.
+
+- 🥇 [Behavior modifications](#customization-methods-details--behavior-modifications): You can use ref, callbacks and controlled properties to modify its behavior.
+
+- 🥈 [Copying component](#customization-methods-details--copying-component): Copy the component code inside your codebase and modify it.
+
+- 🥈 [Custom components using base components](#customization-methods-details--custom-components-using-base-components): Create a new component on top of Design System base components or React Aria Components.
+
+- 🥉 [Custom components using hooks](#customization-methods-details--custom-components-using-hooks): Create a new component on top of Design System hooks or React Aria hooks.
+
+- 🛠️ [Building components from scratch](#customization-methods-details--building-components-from-scratch): Create a component from scratch and leverage Design Tokens if possible
+
+## Customization Method Details
+
+These customization options provide product teams with the flexibility to adapt Hopper components to specific requirements, without sacrificing consistency. By using this range of customization methods, teams can meet product goals efficiently while maintaining the benefits of a unified design system. These customization methods are presented in the order you should consider when evaluating your options, with details provided in the sections below.
+
+### 🥇 Direct Styling Adjustments
+
+For straightforward customization needs, you can make adjustments directly by passing style-related props, adding CSS classes, or setting up refs for access to component elements. This approach allows you to override specific styles while keeping the component's behavior and overall styling intact.
+
+
+
+
+
+ Customization Tier
+ Description
+
+
+ 🥇**Gold Tier**
+ Maximize reuse of the Design System, applying only minimal overwrites to fit your needs.
+
+
+ 🥈**Silver Tier**
+ Reuse most of the component’s behaviors, but make some modifications to fit your needs.
+
+
+ 🥉**Bronze Tier**
+ Reassemble the component’s behavior using smaller utility methods.
+
+
+
+🛠️**Do it yourself**
+ Build the behavior from scratch and use low-level styling tools as needed.
+
+
+### 🥇 Behavior Modifications
+
+To customize a component's behavior, use refs, callbacks and controlled properties. This approach is useful for interactive features and for modifying default component behavior. This approach is ideal when you need to adjust how a component responds to user interactions without altering its visual style or structure. Read more about _Controlled vs Uncontrolled components_ [here](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
+
+
+
+### 🥈 Copying Component
+
+When you need extensive customizations that go beyond simple styling or behavior adjustments, copying the component code can be an effective solution. This allows you to make specific changes while retaining the existing structure, making the customized component reusable across similar use cases.
+
+Take a look to [Hopper's components source code](https://github.com/gsoft-inc/wl-hopper/tree/main/packages/components)
+
+
If you need to copy a component due to a design system constraints, let us know! Frequent requests may lead to updates, allowing you to replace your custom component with an official version in the future.
+
Share your needs in **#ds-hopper!**
+
+
+### 🥈 Custom Components Using Base Components
+
+If the existing Design System component feels too complex for your needs, take a closer look at its underlying structure in the code. In Hopper, it's likely built on a [React Aria](https://react-spectrum.adobe.com/react-aria/hooks.html) component, which you can directly leverage to create a more tailored solution. React Aria offers a robust library of foundational components, making it a versatile starting point. [The Technology team recommends using React Aria](https://workleap.atlassian.net/wiki/spaces/TL/pages/3469508719) as the preferred foundation for building components.
+
+💡[Need Help Getting Started?](#need-help-getting-started)
+
+
+
+### 🥉 Custom Components Using Hooks
+
+If there is no base components to use, or if the base component is again too strict for you needs, you can use underlying hooks for more granular control. [React Aria](https://react-spectrum.adobe.com/react-aria/hooks.html) also offer hooks that you can tailor components more precisely to your needs. [The Technology team recommends using React Aria](https://workleap.atlassian.net/wiki/spaces/TL/pages/3469508719) as the preferred foundation for building components.
+
+💡[Need Help Getting Started?](#need-help-getting-started)
+
+
+
+### 🛠️ Building Components From Scratch
+
+For unique needs that go beyond the capabilities of design system components, building a component from scratch may be necessary. At this point, the only recommendation we can give is to refer to the [WAI Aria Patterns](https://www.w3.org/WAI/ARIA/apg/patterns/) or [Spec](https://www.w3.org/WAI/ARIA/apg/) to determine the expected behavior of controls. Using this approach you will have to style the entire component, which is fine. Just be sure to use [Hopper tokens](../../tokens/overview/introduction) to ensure that any future branding updates are automatically applied to your component without needing manual adjustments. If you want to allow customization on your component, you can also use the `useStyledSystem` hook to expose style props!
+
+💡[Need Help Getting Started?](#need-help-getting-started)
+
+## Need Help Getting Started?
+
+Even if you're not using Design System components, we're here to help! The Design System team has deep expertise in React Aria and is eager to collaborate with you.
+
+💡Let's brainstorm together! Reach out to us in **#ds-hopper** for guidance, ideas, or support in finding the perfect starting point for your project.
diff --git a/apps/docs/content/guides/css/text-crop.mdx b/apps/docs/content/getting-started/guides/text-crop.mdx
similarity index 97%
rename from apps/docs/content/guides/css/text-crop.mdx
rename to apps/docs/content/getting-started/guides/text-crop.mdx
index 54ade9b0c..0f6542b43 100644
--- a/apps/docs/content/guides/css/text-crop.mdx
+++ b/apps/docs/content/getting-started/guides/text-crop.mdx
@@ -1,7 +1,7 @@
---
title: Text Crop
description: A technique to crop the whitespace above and below text to make it appear more centered.
-order: 1
+order: 2
---
Every web font includes whitespace above and below the text, while useful in some instances, it can be a problem when vertically centering text or aligning text with other elements. This problem arises when a font has uneven whitespace. This is especially true when using a typeface with a large x-height, like *ABC Favorit*.
@@ -32,7 +32,7 @@ If you need to implement this technique, you can use the following CSS. Keep in
```css title="component.css"
.off-centered-text {
- font-family: 'ABC Favorit Mono', sans-serif;
+ font-family: 'ABC Favorit Mono', sans-serif;
}
.off-centenred-text::before,
diff --git a/apps/docs/content/getting-started/individual-packages.mdx b/apps/docs/content/getting-started/individual-packages.mdx
deleted file mode 100644
index e6bbf608b..000000000
--- a/apps/docs/content/getting-started/individual-packages.mdx
+++ /dev/null
@@ -1,148 +0,0 @@
----
-title: Individual Packages
-description: An how to guide to install Hopper UI packages individually.
-order: 3
-status: ready
----
-
-If you require a specific installation, you can install Hopper UI packages separately.
-
-