From d2fe7b7910d1c6e3298c245ddf327d636e19e39f Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Mon, 25 Mar 2024 11:11:39 -0400 Subject: [PATCH 01/19] modified the header to fit the new design --- apps/docs/app/page.tsx | 3 +-- apps/docs/components/themeSwitch/themeSwitch.css | 2 +- apps/docs/components/ui/header/header.css | 9 +++++++++ apps/docs/components/ui/nav/nav.css | 2 +- 4 files changed, 12 insertions(+), 4 deletions(-) diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx index c646dec99..6528239d2 100644 --- a/apps/docs/app/page.tsx +++ b/apps/docs/app/page.tsx @@ -2,8 +2,7 @@ export default function Home() { return (
-

Welcome to Workleap's Hopper Design System.

-

The documentation is currently in beta.

+ Home Alone
); diff --git a/apps/docs/components/themeSwitch/themeSwitch.css b/apps/docs/components/themeSwitch/themeSwitch.css index 82e247791..60b3b9abf 100644 --- a/apps/docs/components/themeSwitch/themeSwitch.css +++ b/apps/docs/components/themeSwitch/themeSwitch.css @@ -10,7 +10,7 @@ font-size: 1rem; } -@media screen and (width >= 48rem) { +@media screen and (width >= 37.5rem) { .hd-theme-switch__button { width: var(--hd-space-4); aspect-ratio: 1/1; diff --git a/apps/docs/components/ui/header/header.css b/apps/docs/components/ui/header/header.css index 62826ced6..d84ffdc50 100644 --- a/apps/docs/components/ui/header/header.css +++ b/apps/docs/components/ui/header/header.css @@ -17,9 +17,18 @@ background-color: var(--hd-header-background-color); backdrop-filter: blur(1rem); border-block-end: var(--hd-border-size) solid var(--hd-header-border-color); + border-radius: 0 0 0.5rem 0.5rem; z-index: 1; } +@media screen and (width >= 37.5rem) { + .hd-header { + border-radius: 0.5rem; + margin: 1.5rem auto 0; + width: min(100% - 3rem, 75rem); + } +} + @media screen and (width >= 48rem) { .hd-header { position: sticky; diff --git a/apps/docs/components/ui/nav/nav.css b/apps/docs/components/ui/nav/nav.css index eb26c3e25..f93652df7 100644 --- a/apps/docs/components/ui/nav/nav.css +++ b/apps/docs/components/ui/nav/nav.css @@ -6,9 +6,9 @@ } .hd-nav { + display: none; font-size: var(--hd-nav-font-size); line-height: var(--hd-nav-line-height); - display: none; } @media screen and (width >= 37.5rem) { From e4ba17118d8e3e0859f74bfb9408769a1f5cfdcb Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Tue, 26 Mar 2024 09:05:38 -0400 Subject: [PATCH 02/19] wip --- apps/docs/app/globals.css | 8 ---- apps/docs/app/page.tsx | 84 ++++++++++++++++++++++++++++++++++++++- 2 files changed, 82 insertions(+), 10 deletions(-) diff --git a/apps/docs/app/globals.css b/apps/docs/app/globals.css index 7e750a639..47c2c4f54 100644 --- a/apps/docs/app/globals.css +++ b/apps/docs/app/globals.css @@ -58,14 +58,6 @@ a { display: flex; } -.hd-home { - display: flex; - flex-direction: column; - gap: 3rem; - min-height: 40vh; - justify-content: center; -} - .hd-display { font-size: var(--hd-step-5); font-weight: 500; diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx index 6528239d2..b28782354 100644 --- a/apps/docs/app/page.tsx +++ b/apps/docs/app/page.tsx @@ -1,8 +1,88 @@ +import "./home/home.css"; +import AccessibleIcon from "./home/assets/accessible.svg"; +import InternationalIcon from "./home/assets/international.svg"; +import TypescriptIcon from "./home/assets/typescript.svg"; +import DarkModeIcon from "./home/assets/dark-mode.svg"; + export default function Home() { return ( -
+
- Home Alone +
+

Fusce semper facilisis finibus.

+

Sed condimentum, arcu sit amet tempus posuere, sapien ex vulputate risus, placerat convallis lectus ex.

+
+
+ + +
+
+
+

Accessible

+

+ Built with accessibility in mind Hopper is based on React Aria Components +

+
+
+

International

+

+ Experience is pushed further with internationalization. +

+
+
+

Typescript

+

+ Typescript based for reduced learning curve and error detection. +

+
+
+

Dark mode

+

+ Switching from light to dark mode couldn't be easier. +

+
+
+
+
+
+
+
+

Colors

+
+
+ + + + +
+
+ + + + +
+
+
+
+

Sizes

+
+
+
+
+

Text Styles

+
+
+
+
+

Icons

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit

+
+
+
+

Components

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit

+
+
); From 16e4528318ee0021427664e0209937e453e8790d Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Thu, 28 Mar 2024 14:46:29 -0400 Subject: [PATCH 03/19] added components on the homepage --- apps/docs/app/page.tsx | 116 ++++++++++++++++++++++++++++++++++++----- 1 file changed, 104 insertions(+), 12 deletions(-) diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx index b28782354..a159f3cba 100644 --- a/apps/docs/app/page.tsx +++ b/apps/docs/app/page.tsx @@ -1,8 +1,19 @@ -import "./home/home.css"; +"use client"; + +import { HopperProvider } from "@hopper-ui/components"; import AccessibleIcon from "./home/assets/accessible.svg"; import InternationalIcon from "./home/assets/international.svg"; import TypescriptIcon from "./home/assets/typescript.svg"; import DarkModeIcon from "./home/assets/dark-mode.svg"; +import FontSizeIcon from "./home/assets/font-size.svg"; +import LineHeightIcon from "./home/assets/line-height.svg"; +import MarginIcon from "./home/assets/margin.svg"; +import SelectArrowIcon from "./home/assets/select-arrow.svg"; + +import { CalendarIcon, ChartBarIcon, CheckmarkIcon, DeleteIcon, EyeVisibleIcon, FilterIcon, ItalicIcon, LightbulbIcon, LockIcon, MailIcon, ProfileIcon, SearchIcon, ShareIcon, StarIcon, StickyIcon, ThumbsUpIcon, WarningIcon } from "@hopper-ui/icons"; + +import "./home/home.css"; +import "@hopper-ui/tokens/fonts.css"; export default function Home() { return ( @@ -51,36 +62,117 @@ export default function Home() {
- - - + + +
- - - - + + + +
-
+

Sizes

+
+
+ 16 +
+
+
+ 24 +
+
+
+ 32 +
+
+
+ 40 +
+
+
-
+

Text Styles

+
+
+ Aa +
+
+
+ Regular + +
+
+ + 84 +
+
+ + 96 +
+
+ + 0 +
+
+
-
+

Icons

Lorem ipsum dolor sit amet, consectetur adipiscing elit

+ +
+
+ + + + + + + + + +
+
+ + + + + + + + + +
+
+
-
+

Components

Lorem ipsum dolor sit amet, consectetur adipiscing elit

+
+
+
+
+
+
+
+
+
+
+
+
+
+
From 11a3c982505adefc859b9e58bfc66a6572d7e644 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Thu, 28 Mar 2024 14:47:55 -0400 Subject: [PATCH 04/19] svg files for home and CSS --- apps/docs/app/home/assets/accessible.svg | 4 + apps/docs/app/home/assets/dark-mode.svg | 1 + apps/docs/app/home/assets/external-link.svg | 1 + apps/docs/app/home/assets/font-size.svg | 1 + apps/docs/app/home/assets/international.svg | 1 + apps/docs/app/home/assets/line-height.svg | 1 + apps/docs/app/home/assets/margin.svg | 1 + apps/docs/app/home/assets/select-arrow.svg | 1 + apps/docs/app/home/assets/typescript.svg | 1 + apps/docs/app/home/home.css | 372 ++++++++++++++++++++ 10 files changed, 384 insertions(+) create mode 100644 apps/docs/app/home/assets/accessible.svg create mode 100644 apps/docs/app/home/assets/dark-mode.svg create mode 100644 apps/docs/app/home/assets/external-link.svg create mode 100644 apps/docs/app/home/assets/font-size.svg create mode 100644 apps/docs/app/home/assets/international.svg create mode 100644 apps/docs/app/home/assets/line-height.svg create mode 100644 apps/docs/app/home/assets/margin.svg create mode 100644 apps/docs/app/home/assets/select-arrow.svg create mode 100644 apps/docs/app/home/assets/typescript.svg create mode 100644 apps/docs/app/home/home.css diff --git a/apps/docs/app/home/assets/accessible.svg b/apps/docs/app/home/assets/accessible.svg new file mode 100644 index 000000000..dfeef8cf4 --- /dev/null +++ b/apps/docs/app/home/assets/accessible.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/docs/app/home/assets/dark-mode.svg b/apps/docs/app/home/assets/dark-mode.svg new file mode 100644 index 000000000..2eca64c38 --- /dev/null +++ b/apps/docs/app/home/assets/dark-mode.svg @@ -0,0 +1 @@ + diff --git a/apps/docs/app/home/assets/external-link.svg b/apps/docs/app/home/assets/external-link.svg new file mode 100644 index 000000000..a5de228d9 --- /dev/null +++ b/apps/docs/app/home/assets/external-link.svg @@ -0,0 +1 @@ + diff --git a/apps/docs/app/home/assets/font-size.svg b/apps/docs/app/home/assets/font-size.svg new file mode 100644 index 000000000..c90ece4a9 --- /dev/null +++ b/apps/docs/app/home/assets/font-size.svg @@ -0,0 +1 @@ + diff --git a/apps/docs/app/home/assets/international.svg b/apps/docs/app/home/assets/international.svg new file mode 100644 index 000000000..364959b75 --- /dev/null +++ b/apps/docs/app/home/assets/international.svg @@ -0,0 +1 @@ + diff --git a/apps/docs/app/home/assets/line-height.svg b/apps/docs/app/home/assets/line-height.svg new file mode 100644 index 000000000..76ce86cd7 --- /dev/null +++ b/apps/docs/app/home/assets/line-height.svg @@ -0,0 +1 @@ + diff --git a/apps/docs/app/home/assets/margin.svg b/apps/docs/app/home/assets/margin.svg new file mode 100644 index 000000000..1a9f98949 --- /dev/null +++ b/apps/docs/app/home/assets/margin.svg @@ -0,0 +1 @@ + diff --git a/apps/docs/app/home/assets/select-arrow.svg b/apps/docs/app/home/assets/select-arrow.svg new file mode 100644 index 000000000..736cf9ead --- /dev/null +++ b/apps/docs/app/home/assets/select-arrow.svg @@ -0,0 +1 @@ + diff --git a/apps/docs/app/home/assets/typescript.svg b/apps/docs/app/home/assets/typescript.svg new file mode 100644 index 000000000..a1c9844d7 --- /dev/null +++ b/apps/docs/app/home/assets/typescript.svg @@ -0,0 +1 @@ + diff --git a/apps/docs/app/home/home.css b/apps/docs/app/home/home.css new file mode 100644 index 000000000..57da13bc6 --- /dev/null +++ b/apps/docs/app/home/home.css @@ -0,0 +1,372 @@ +.hd-home__heading { + text-align: center; + margin: 0 auto; + max-width: 43rem; +} + +.hd-home__header { + font-size: 2.25rem; + line-height: 1.3333; +} + +.hd-home__copy { + color: var(--hd-color-neutral-text-weak); + font-size: 1rem; + line-height: 1.5; + margin-top: var(--hd-space-1); +} + +.hd-home__ctas { + display: flex; + gap: var(--hd-space-2); + justify-content: center; + margin-top: var(--hd-space-4); +} + +.hd-home__features { + display: flex; + flex-wrap: wrap; + gap: var(--hd-space-4); + margin-top: var(--hd-space-10); +} + +.hd-home__feature-item { + flex: 1; +} + +.hd-home__feature-title { + align-items: center; + display: flex; + font-size: 1.125rem; + gap: var(--hd-space-1); + line-height: 1.3333; +} + +.hd-home-feature-title__icon path { + height: var(--hd-space-3); + aspect-ratio: 1/1; + stroke: var(--hd-color-neutral-icon); +} + +.hd-icon-fill { + fill: var(--hd-color-neutral-icon); + stroke: transparent; +} + +.hd-icon-fill path { + stroke: transparent; +} + +.hd-home__feature-copy { + color: var(--neutral-text-weak); + font-size: 0.875rem; + line-height: 1.4285; + margin-top: var(--hd-space-1); +} + +/* Samples Section */ +.hd-home-samples { + display: grid; + gap: var(--hd-space-3); + grid-template-columns: 1fr 1fr; + margin-top: var(--hd-space-10); +} + +.hd-home-sample__item { + border: var(--hd-border-size) solid var(--hd-color-neutral-border); + border-radius: var(--hd-space-2); + padding: var(--hd-space-3); +} + +.hd-home-sample__title { + color: var(--hd-neutral-text); + font-size: 1.25rem; + line-height: 1.2; +} + +.hd-home-sample__copy { + color: var(--hd-color-neutral-text-weak); + font-size: 1rem; + line-height: 1.5; + margin-top: var(--hd-space-05); +} + +.hd-home-samples__row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1.5rem; +} + +.hd-home-samples__col { + display: grid; + gap: 1.5rem; +} + +/* colors sample */ +.hd-home-sample__colors { + display: flex; + gap: var(--hd-space-1); + flex-wrap: wrap; +} + +.hd-home-sample__colors-row { + display: flex; + gap: var(--hd-space-1); +} + +.hd-home-sample__color { + border-radius: var(--hd-space-1); + display: flex; + height: 1.875rem; + width: 1.875rem; +} + +.hd-home-sample__item-colors { + display: flex; + gap: var(--hd-space-4); +} + +/* Rock Color */ +.hd-home-sample__color-rock-200 { + background-color: #B3B3B1; +} + +.hd-home-sample__color-rock-300 { + background-color: #959593; +} + +.hd-home-sample__color-rock-400 { + background-color: #777775; +} + +.hd-home-sample__color-rock-500 { + background-color: #6C6C6B; +} + +/* Sapphire Color */ +.hd-home-sample__color-sapphire-200 { + background-color: #95B1FF; +} + +.hd-home-sample__color-sapphire-300 { + background-color: #6C8FFD; +} + +.hd-home-sample__color-sapphire-400 { + background-color: #4767FE; +} + +.hd-home-sample__color-sapphire-500 { + background-color: #3B57FF; +} + +/* Sizes */ +.hd-home-sample__item-sizes { + display: flex; + gap: var(--hd-space-1); + flex-wrap: wrap; +} + +.hd-home-sample__sizes { + display: flex; + gap: var(--hd-space-1); + margin-left: auto; +} + +.hd-home-sample__size { + display: flex; + flex-direction: column; + gap: var(--hd-space-05); +} + +.hd-home-sample__size-text { + color: var(--hd-color-accent-text); + font-size: 0.625rem; + text-align: right; +} + +.hd-home-sample__size-bar { + background-color: var(--hd-color-accent-surface); + height: 3.5rem; +} + +.hd-home-sample__size-16 .hd-home-sample__size-bar { + width: 1rem; +} + +.hd-home-sample__size-24 .hd-home-sample__size-bar { + width: 1.5rem; +} + +.hd-home-sample__size-32 .hd-home-sample__size-bar { + width: 2rem; +} + +.hd-home-sample__size-40 .hd-home-sample__size-bar { + width: 2.5rem; +} + +/* Icons */ +.hd-home-sample__icons { + display: flex; + gap: var(--hd-space-2); + flex-direction: column; +} + +.hd-home-sample__icons-row { + display: flex; + justify-content: space-between; +} + +.hd-home-samples .hd-home-sample__icons-icon { + color: #959593; +} + +.hd-home-samples .hd-home-sample__icons-icon--active { + color: #155AF9; +} + +.hd-home-samples .hd-home-sample__icons-icon--strong { + color: #3C3C3C; +} + +/* Text Styles */ +.hd-home-sample__item-text-styles { + display: flex; + flex-direction: column; +} + +.hd-home-sample__text-styles { + border-bottom: 0; + border-image: linear-gradient(90deg,rgba(0 0 0 / 0%),rgb(186 188 192)) 1; + border-top: 0; + border-style: solid; + border-right: 0; + border-top-width: var(--hd-border-size); + display: flex; + flex-grow: 1; + gap: var(--hd-space-3); + margin-top: var(--hd-space-3); +} + +.hd-home-sample__text { + font-family: Inter, sans-serif; + font-size: 5.25rem; + font-weight: 700; +} + +.hd-home-sample__text-lowercase { + color: transparent; + -webkit-text-stroke: 0.125rem var(--hd-color-neutral-text); +} + +.hd-home-sample__text-styles-col { + display: flex; + align-items: center; +} + +.hd-home-sample__text-styles-controls { + align-items: start; + background-image: linear-gradient(180deg, rgba(255 255 255 / 100%) 0%, rgba(255 255 255 / 100%) 75%, rgba(0 212 255 / 0%) 100%); + border-bottom: 0; + border-image: linear-gradient(0deg,rgba(0 0 0 / 0%),rgb(186 188 192)) 1; + border-style: solid; + border-right: 0; + border-top: 0; + border-left-width: var(--hd-border-size); + flex-direction: column; + flex-grow: 1; + gap: 0.75rem; + padding: var(--hd-space-2); +} + +.hd-home-sample__control-knob { + align-items: center; + display: flex; + gap: 0.75rem; +} + +.hd-home-sample__control-knob-title { + align-items: center; + display: flex; + gap: 0.25rem; +} + +.hd-home-sample__control-knob-value { + color: var(--hd-color-neutral-text); + font-family: Arial, Helvetica, sans-serif; + font-size: 0.75rem; + line-height: 1; +} + +/* Text Styles - Control Text */ +.hd-home-sample__control-title { + font-family: Inter, sans-serif; + font-size: 0.75rem; + font-weight: 500; + line-height: 1.3333; +} + +/* Components */ +.hd-home-sample__item-components { + display: grid; + grid-template-rows: min-content min-content 1fr; +} + +.hd-home-sample-components { + display: grid; + grid-template-columns: 1fr 1fr; +} + +.hd-home-sample-components__item:nth-child(odd) { + background: linear-gradient(-90deg, rgba(255 255 255 / 100%) 0%, rgba(255 255 255 / 100%) 60%, rgba(0 212 255 / 0%) 100%); + border-bottom: 0; + border-image: linear-gradient(90deg,rgba(0 0 0 / 0%),rgb(186 188 192)) 1; + border-style: solid; + border-right: 0; + border-left: 0; + border-top-width: var(--hd-border-size); +} + +.hd-home-sample-components__item:nth-child(even) { + background: linear-gradient(90deg, rgba(255 255 255 / 100%) 0%, rgba(255 255 255 / 100%) 60%, rgba(0 212 255 / 0%) 100%); + border-bottom: 0; + border-image: linear-gradient(-90deg,rgba(0 0 0 / 0%),rgb(186 188 192)) 1; + border-style: solid; + border-right: 0; + border-left: 0; + border-top-width: var(--hd-border-size); +} + +.hd-home-sample-components__item { + align-items: center; + background-color: #FFFFFF; + display: flex;; + justify-content: center; + padding: 1rem; +} + +/* Components - Fake */ +.hd-home-sample-components__fake-avatar { + background-color: olive; + width: 137px; + height: 32px; +} + +.hd-home-sample-components__fake-select { + border: 1px solid olive; + width: 100%; + height: 40px; +} + +.hd-home-sample-components__fake-buttons { + background-color: #155AF9; + width: 225px; + height: 40px; +} + +.hd-home-sample-components__fake-radios { + border: 1px solid olive; + height: 48px; + width: 99px; +} From df005e9feaf045cb29928f8f39964917eb6e5685 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Tue, 2 Apr 2024 11:29:35 -0400 Subject: [PATCH 05/19] usage of official doc buttons --- apps/docs/app/home/home.css | 53 ++++++++++++++++++++++++++----------- apps/docs/app/page.tsx | 22 +++++++++++---- apps/docs/app/tokens.css | 2 +- 3 files changed, 55 insertions(+), 22 deletions(-) diff --git a/apps/docs/app/home/home.css b/apps/docs/app/home/home.css index 57da13bc6..5b2d993ec 100644 --- a/apps/docs/app/home/home.css +++ b/apps/docs/app/home/home.css @@ -18,7 +18,7 @@ .hd-home__ctas { display: flex; - gap: var(--hd-space-2); + gap: var(--hd-space-3); justify-content: center; margin-top: var(--hd-space-4); } @@ -73,9 +73,19 @@ } .hd-home-sample__item { + --background: var(--hd-white); + --color: var(--hd-neutral-50); + border: var(--hd-border-size) solid var(--hd-color-neutral-border); border-radius: var(--hd-space-2); padding: var(--hd-space-3); + background: linear-gradient(90deg, var(--background) 0.625rem, transparent 1%) 50%, linear-gradient(var(--background) 0.625rem, transparent 1%) 50%, var(--color); + background-size: 0.75rem 0.75rem; +} + +[data-theme="dark"] .hd-home-sample__item { + --background: var(--hd-neutral-900); + --color: var(--hd-neutral-800); } .hd-home-sample__title { @@ -89,6 +99,7 @@ font-size: 1rem; line-height: 1.5; margin-top: var(--hd-space-05); + margin-bottom: var(--hd-space-3); } .hd-home-samples__row { @@ -266,10 +277,12 @@ } .hd-home-sample__text-styles-controls { + --background: var(--hd-white); + align-items: start; - background-image: linear-gradient(180deg, rgba(255 255 255 / 100%) 0%, rgba(255 255 255 / 100%) 75%, rgba(0 212 255 / 0%) 100%); + background-image: linear-gradient(180deg, var(--background) 0%, var(--background) 75%, rgba(255 255 255 / 0%) 100%); border-bottom: 0; - border-image: linear-gradient(0deg,rgba(0 0 0 / 0%),rgb(186 188 192)) 1; + border-image: linear-gradient(0deg, rgba(0 0 0 / 0%), rgb(186 188 192)) 1; border-style: solid; border-right: 0; border-top: 0; @@ -280,6 +293,10 @@ padding: var(--hd-space-2); } +[data-theme="dark"] .hd-home-sample__text-styles-controls { + --background: var(--hd-neutral-900); +} + .hd-home-sample__control-knob { align-items: center; display: flex; @@ -318,8 +335,17 @@ grid-template-columns: 1fr 1fr; } +.hd-home-sample-components__item { + --background: rgba(255 255 255 / 70%); + + align-items: center; + display: flex;; + justify-content: center; + padding: 1rem; +} + .hd-home-sample-components__item:nth-child(odd) { - background: linear-gradient(-90deg, rgba(255 255 255 / 100%) 0%, rgba(255 255 255 / 100%) 60%, rgba(0 212 255 / 0%) 100%); + background: linear-gradient(-90deg, var(--background) 0%, var(--background) 85%, rgba(0 212 255 / 0%) 100%); border-bottom: 0; border-image: linear-gradient(90deg,rgba(0 0 0 / 0%),rgb(186 188 192)) 1; border-style: solid; @@ -329,21 +355,17 @@ } .hd-home-sample-components__item:nth-child(even) { - background: linear-gradient(90deg, rgba(255 255 255 / 100%) 0%, rgba(255 255 255 / 100%) 60%, rgba(0 212 255 / 0%) 100%); + background: linear-gradient(90deg, var(--background) 0%, var(--background) 85%, rgba(255 255 255 / 0%) 100%); border-bottom: 0; - border-image: linear-gradient(-90deg,rgba(0 0 0 / 0%),rgb(186 188 192)) 1; + border-image: linear-gradient(-90deg,rgba(0 0 0 / 0%), rgb(186 188 192)) 1; border-style: solid; border-right: 0; border-left: 0; border-top-width: var(--hd-border-size); } -.hd-home-sample-components__item { - align-items: center; - background-color: #FFFFFF; - display: flex;; - justify-content: center; - padding: 1rem; +[data-theme="dark"] .hd-home-sample-components__item { + --background: rgba(41 41 41 / 70%); } /* Components - Fake */ @@ -359,10 +381,9 @@ height: 40px; } -.hd-home-sample-components__fake-buttons { - background-color: #155AF9; - width: 225px; - height: 40px; +.hd-home-sample-components__buttons { + display: flex; + gap: var(--hd-space-2); } .hd-home-sample-components__fake-radios { diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx index a159f3cba..e08ebdc55 100644 --- a/apps/docs/app/page.tsx +++ b/apps/docs/app/page.tsx @@ -1,6 +1,6 @@ "use client"; -import { HopperProvider } from "@hopper-ui/components"; +import { Button as HopperButton, HopperProvider } from "@hopper-ui/components"; import AccessibleIcon from "./home/assets/accessible.svg"; import InternationalIcon from "./home/assets/international.svg"; import TypescriptIcon from "./home/assets/typescript.svg"; @@ -9,13 +9,20 @@ import FontSizeIcon from "./home/assets/font-size.svg"; import LineHeightIcon from "./home/assets/line-height.svg"; import MarginIcon from "./home/assets/margin.svg"; import SelectArrowIcon from "./home/assets/select-arrow.svg"; +import { ThemeContext } from "@/context/theme/ThemeProvider.tsx"; +import { useContext } from "react"; +import Button from "../components/button/Button"; import { CalendarIcon, ChartBarIcon, CheckmarkIcon, DeleteIcon, EyeVisibleIcon, FilterIcon, ItalicIcon, LightbulbIcon, LockIcon, MailIcon, ProfileIcon, SearchIcon, ShareIcon, StarIcon, StickyIcon, ThumbsUpIcon, WarningIcon } from "@hopper-ui/icons"; -import "./home/home.css"; import "@hopper-ui/tokens/fonts.css"; +import "./home/home.css"; export default function Home() { + const { colorMode } = useContext(ThemeContext); + + const theme = colorMode; + return (
@@ -24,8 +31,8 @@ export default function Home() {

Sed condimentum, arcu sit amet tempus posuere, sapien ex vulputate risus, placerat convallis lectus ex.

- - + + Github
@@ -167,7 +174,12 @@ export default function Home() {
-
+ +
+ Confirm + I need help +
+
diff --git a/apps/docs/app/tokens.css b/apps/docs/app/tokens.css index 6b7d4f2e3..415ae193a 100644 --- a/apps/docs/app/tokens.css +++ b/apps/docs/app/tokens.css @@ -89,7 +89,7 @@ [data-theme="dark"] { --hd-color-white-surface: var(--hd-neutral-800); --hd-color-neutral-surface: var(--hd-neutral-900); - --hd-color-neutral-surface-weak: var(--hd-neutral-800); + --hd-color-neutral-surface-weak: var(--hd-neutral-900); --hd-color-surface-neutral-selection: var(--hd-neutral-300); --hd-color-neutral-text: var(--hd-neutral-0); --hd-color-neutral-text-strong: var(--hd-neutral-900); From dc4c00f0dbd95a82470aad46611021fc7e075018 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Wed, 3 Apr 2024 10:23:36 -0400 Subject: [PATCH 06/19] added components section --- apps/docs/app/home/assets/arrow.svg | 1 + apps/docs/app/home/home.css | 86 ++++++++++++++++++++++++++--- apps/docs/app/page.tsx | 40 ++++++++------ 3 files changed, 101 insertions(+), 26 deletions(-) create mode 100644 apps/docs/app/home/assets/arrow.svg diff --git a/apps/docs/app/home/assets/arrow.svg b/apps/docs/app/home/assets/arrow.svg new file mode 100644 index 000000000..c3824b609 --- /dev/null +++ b/apps/docs/app/home/assets/arrow.svg @@ -0,0 +1 @@ + diff --git a/apps/docs/app/home/home.css b/apps/docs/app/home/home.css index 5b2d993ec..7d7145a79 100644 --- a/apps/docs/app/home/home.css +++ b/apps/docs/app/home/home.css @@ -76,11 +76,12 @@ --background: var(--hd-white); --color: var(--hd-neutral-50); + background: linear-gradient(90deg, var(--background) 0.625rem, transparent 1%) 50%, linear-gradient(var(--background) 0.625rem, transparent 1%) 50%, var(--color); + background-size: 0.75rem 0.75rem; border: var(--hd-border-size) solid var(--hd-color-neutral-border); border-radius: var(--hd-space-2); padding: var(--hd-space-3); - background: linear-gradient(90deg, var(--background) 0.625rem, transparent 1%) 50%, linear-gradient(var(--background) 0.625rem, transparent 1%) 50%, var(--color); - background-size: 0.75rem 0.75rem; + position: relative; } [data-theme="dark"] .hd-home-sample__item { @@ -88,12 +89,49 @@ --color: var(--hd-neutral-800); } +a.hd-home-sample__item:hover { + box-shadow: 0 0.625rem 0.625rem calc(-1 * 0.0313rem) rgba(0 0 0 / 6%), 0 0.1875rem 0.1875rem calc(-1 * 0.0938rem) rgba(0 0 0 / 6%), 0 0.375rem 0.375rem calc(-1 * 0.0938rem) rgba(0 0 0 / 6%), 0 0.75rem 0.75rem calc(-1 * 0.375rem) rgba(0 0 0 / 6%), 0 1.5rem 1.5rem calc(-1 * 0.75rem) rgba(0 0 0 / 6%); + transform: translate(-0.125rem, -0.125rem); + transition: box-shadow 0.3s ease, transform 0.2s ease-in; +} + +a.hd-home-sample__item:hover .hd-home-sample__title-icon { + opacity: 1; + transform: translateX(0); +} + +a.hd-home-sample__item:hover::after { + bottom: -0.25rem; + content: ""; + display: block; + height: 0.25rem; + left: 0; + position: absolute; + width: 100%; +} + .hd-home-sample__title { - color: var(--hd-neutral-text); + align-items: center; + align-self: flex-start; + color: var(--hd-color-neutral-text); + display: flex; font-size: 1.25rem; + gap: 0.25rem; line-height: 1.2; } +.hd-home-sample__title-wrap { + align-items: center; + display: flex; + gap: 0.5rem; +} + +.hd-home-sample__title-icon { + opacity: 0; + transform: translateX(-1rem); + transition: opacity 0.2s ease, transform 0.1s ease-in; +} + .hd-home-sample__copy { color: var(--hd-color-neutral-text-weak); font-size: 1rem; @@ -116,8 +154,10 @@ /* colors sample */ .hd-home-sample__colors { display: flex; - gap: var(--hd-space-1); + justify-content: flex-end; flex-wrap: wrap; + gap: var(--hd-space-1); + margin-block: calc(-1 * var(--hd-space-1)); } .hd-home-sample__colors-row { @@ -134,7 +174,7 @@ .hd-home-sample__item-colors { display: flex; - gap: var(--hd-space-4); + justify-content: space-between; } /* Rock Color */ @@ -172,16 +212,18 @@ } /* Sizes */ -.hd-home-sample__item-sizes { +.hd-home-sample__sizes { display: flex; gap: var(--hd-space-1); - flex-wrap: wrap; + margin-block: calc(-1 * var(--hd-space-1)); } -.hd-home-sample__sizes { +.hd-home-sample__item-sizes { display: flex; + justify-content: space-between; gap: var(--hd-space-1); - margin-left: auto; + flex-wrap: wrap; + margin-block: var(--hd-space-1); } .hd-home-sample__size { @@ -391,3 +433,29 @@ height: 48px; width: 99px; } + +/* Upcoming */ +.hd-home-sample__item-upcoming { + background-image: linear-gradient(1deg, rgba(60 60 60 / 20%) 0.94%, rgba(60 60 60 / 50%) 75.3%); + border-radius: inherit; + display: flex; + inset: 0; + opacity: 0.1; + position: absolute; + z-index: 10; +} + +[data-theme="dark"] .hd-home-sample__item-upcoming { + background: linear-gradient(1deg, rgba(80 80 80 / 20%) 0.94%, rgba(80 80 80 / 60%) 75.3%); + opacity: 0.6; +} + +/* Tag */ +.hd-tag-accent { + background-color: var(--hd-color-accent-surface); + border-radius: 0.5rem; + color: var(--hd-color-accent-text); + font-size: 0.875rem; + line-height: 1.4285; + padding-inline: var(--hd-space-05); +} diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx index e08ebdc55..8a0725046 100644 --- a/apps/docs/app/page.tsx +++ b/apps/docs/app/page.tsx @@ -8,10 +8,12 @@ import DarkModeIcon from "./home/assets/dark-mode.svg"; import FontSizeIcon from "./home/assets/font-size.svg"; import LineHeightIcon from "./home/assets/line-height.svg"; import MarginIcon from "./home/assets/margin.svg"; +import ArrowIcon from "./home/assets/arrow.svg"; import SelectArrowIcon from "./home/assets/select-arrow.svg"; -import { ThemeContext } from "@/context/theme/ThemeProvider.tsx"; +import { type ColorScheme, ThemeContext } from "@/context/theme/ThemeProvider.tsx"; import { useContext } from "react"; import Button from "../components/button/Button"; +import { ExternalLinkIcon, Icon } from "@/components/icon"; import { CalendarIcon, ChartBarIcon, CheckmarkIcon, DeleteIcon, EyeVisibleIcon, FilterIcon, ItalicIcon, LightbulbIcon, LockIcon, MailIcon, ProfileIcon, SearchIcon, ShareIcon, StarIcon, StickyIcon, ThumbsUpIcon, WarningIcon } from "@hopper-ui/icons"; @@ -21,7 +23,7 @@ import "./home/home.css"; export default function Home() { const { colorMode } = useContext(ThemeContext); - const theme = colorMode; + const theme = colorMode as ColorScheme; return (
@@ -31,8 +33,8 @@ export default function Home() {

Sed condimentum, arcu sit amet tempus posuere, sapien ex vulputate risus, placerat convallis lectus ex.

- - Github + +
-

Components

+
+
+

Components

+ upcoming +

Lorem ipsum dolor sit amet, consectetur adipiscing elit

From b69a0f725571fbf9995571035620c014a5a1a534 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Wed, 3 Apr 2024 13:30:08 -0400 Subject: [PATCH 07/19] component in homepage image --- apps/docs/app/home/home.css | 18 ------------------ apps/docs/app/page.tsx | 7 ++++--- 2 files changed, 4 insertions(+), 21 deletions(-) diff --git a/apps/docs/app/home/home.css b/apps/docs/app/home/home.css index 7d7145a79..b5a7b2d52 100644 --- a/apps/docs/app/home/home.css +++ b/apps/docs/app/home/home.css @@ -411,29 +411,11 @@ a.hd-home-sample__item:hover::after { } /* Components - Fake */ -.hd-home-sample-components__fake-avatar { - background-color: olive; - width: 137px; - height: 32px; -} - -.hd-home-sample-components__fake-select { - border: 1px solid olive; - width: 100%; - height: 40px; -} - .hd-home-sample-components__buttons { display: flex; gap: var(--hd-space-2); } -.hd-home-sample-components__fake-radios { - border: 1px solid olive; - height: 48px; - width: 99px; -} - /* Upcoming */ .hd-home-sample__item-upcoming { background-image: linear-gradient(1deg, rgba(60 60 60 / 20%) 0.94%, rgba(60 60 60 / 50%) 75.3%); diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx index 8a0725046..71f87a9a0 100644 --- a/apps/docs/app/page.tsx +++ b/apps/docs/app/page.tsx @@ -1,6 +1,7 @@ "use client"; import { Button as HopperButton, HopperProvider } from "@hopper-ui/components"; +import Image from "next/image"; import AccessibleIcon from "./home/assets/accessible.svg"; import InternationalIcon from "./home/assets/international.svg"; import TypescriptIcon from "./home/assets/typescript.svg"; @@ -174,10 +175,10 @@ export default function Home() {

Lorem ipsum dolor sit amet, consectetur adipiscing elit

-
+ Avatar Group component preview
-
+ Select Fielg component preview
@@ -188,7 +189,7 @@ export default function Home() {
-
+ Radio Group Component preview
From b6e752c58329f40e80438a5e97ba2cfb4b9c24eb Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Wed, 10 Apr 2024 21:31:06 -0400 Subject: [PATCH 08/19] renamed files - added rich icon mdx --- apps/docs/app/layout.css | 4 ++++ .../{library.mdx => icons-library.mdx} | 4 ++-- .../icons/react-icons/rich-icons-library.mdx | 20 +++++++++++++++++++ .../svg/{library.mdx => icons-library.mdx} | 4 ++-- .../content/icons/svg/rich-icons-library.mdx | 19 ++++++++++++++++++ 5 files changed, 47 insertions(+), 4 deletions(-) rename apps/docs/content/icons/react-icons/{library.mdx => icons-library.mdx} (91%) create mode 100644 apps/docs/content/icons/react-icons/rich-icons-library.mdx rename apps/docs/content/icons/svg/{library.mdx => icons-library.mdx} (91%) create mode 100644 apps/docs/content/icons/svg/rich-icons-library.mdx diff --git a/apps/docs/app/layout.css b/apps/docs/app/layout.css index a06c6ad9f..fdf270501 100644 --- a/apps/docs/app/layout.css +++ b/apps/docs/app/layout.css @@ -51,6 +51,10 @@ p { line-height: 1.5; } +.hd-content ul { + list-style-position: inside; +} + .hd-content p:not(:last-child) { margin-block-end: 1.25rem; } diff --git a/apps/docs/content/icons/react-icons/library.mdx b/apps/docs/content/icons/react-icons/icons-library.mdx similarity index 91% rename from apps/docs/content/icons/react-icons/library.mdx rename to apps/docs/content/icons/react-icons/icons-library.mdx index 5b6360801..76bafb1b9 100644 --- a/apps/docs/content/icons/react-icons/library.mdx +++ b/apps/docs/content/icons/react-icons/icons-library.mdx @@ -1,5 +1,5 @@ --- -title: Library +title: Icons Library description: Getting started with Workleap Design Icons order: 3 --- @@ -9,7 +9,7 @@ export const usageMethods = [ { title: "SVG" } ]; -# Library +# Icons Library All available icons in the icon library are shown below. diff --git a/apps/docs/content/icons/react-icons/rich-icons-library.mdx b/apps/docs/content/icons/react-icons/rich-icons-library.mdx new file mode 100644 index 000000000..3b424193b --- /dev/null +++ b/apps/docs/content/icons/react-icons/rich-icons-library.mdx @@ -0,0 +1,20 @@ +--- +title: Rich Icons Library +description: Getting started with Workleap Design Icons +order: 3 +--- + +export const usageMethods = [ + { title: "React" }, + { title: "SVG" } +]; + +# Rich Icons Library + +All available icons in the icon library are shown below. + +Use the correct size for each icon. Icons should be used at their original size according to the design. + +Click or tap on any icon to copy its name. + + diff --git a/apps/docs/content/icons/svg/library.mdx b/apps/docs/content/icons/svg/icons-library.mdx similarity index 91% rename from apps/docs/content/icons/svg/library.mdx rename to apps/docs/content/icons/svg/icons-library.mdx index 673862505..23de9b845 100644 --- a/apps/docs/content/icons/svg/library.mdx +++ b/apps/docs/content/icons/svg/icons-library.mdx @@ -1,5 +1,5 @@ --- -title: Library +title: Icons Library description: Getting started with Workleap Design Icons --- @@ -8,7 +8,7 @@ export const usageMethods = [ { title: "SVG" } ]; -# Library +# Icons Library All available icons in the icon library are shown below. diff --git a/apps/docs/content/icons/svg/rich-icons-library.mdx b/apps/docs/content/icons/svg/rich-icons-library.mdx new file mode 100644 index 000000000..ff46d7d6a --- /dev/null +++ b/apps/docs/content/icons/svg/rich-icons-library.mdx @@ -0,0 +1,19 @@ +--- +title: Rich Icons Library +description: Getting started with Workleap Design Icons +--- + +export const usageMethods = [ + { title: "React" }, + { title: "SVG" } +]; + +# Rich Icons Library + +All available icons in the icon library are shown below. + +Use the correct size for each icon. Icons should be used at their original size according to the design. + +Click or tap on any icon to copy its filename. + + From f31c33b66618aee4690fd0b87530bfb707f197ef Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Thu, 11 Apr 2024 09:19:13 -0400 Subject: [PATCH 09/19] added back library files for icons --- .../{icons-library.mdx => library.mdx} | 4 ++-- .../icons/react-icons/rich-icons-library.mdx | 20 ------------------- .../svg/{icons-library.mdx => library.mdx} | 4 ++-- .../content/icons/svg/rich-icons-library.mdx | 19 ------------------ 4 files changed, 4 insertions(+), 43 deletions(-) rename apps/docs/content/icons/react-icons/{icons-library.mdx => library.mdx} (91%) delete mode 100644 apps/docs/content/icons/react-icons/rich-icons-library.mdx rename apps/docs/content/icons/svg/{icons-library.mdx => library.mdx} (91%) delete mode 100644 apps/docs/content/icons/svg/rich-icons-library.mdx diff --git a/apps/docs/content/icons/react-icons/icons-library.mdx b/apps/docs/content/icons/react-icons/library.mdx similarity index 91% rename from apps/docs/content/icons/react-icons/icons-library.mdx rename to apps/docs/content/icons/react-icons/library.mdx index 76bafb1b9..6bf765cd0 100644 --- a/apps/docs/content/icons/react-icons/icons-library.mdx +++ b/apps/docs/content/icons/react-icons/library.mdx @@ -1,5 +1,5 @@ --- -title: Icons Library +title: Icons description: Getting started with Workleap Design Icons order: 3 --- @@ -9,7 +9,7 @@ export const usageMethods = [ { title: "SVG" } ]; -# Icons Library +# Icons All available icons in the icon library are shown below. diff --git a/apps/docs/content/icons/react-icons/rich-icons-library.mdx b/apps/docs/content/icons/react-icons/rich-icons-library.mdx deleted file mode 100644 index 3b424193b..000000000 --- a/apps/docs/content/icons/react-icons/rich-icons-library.mdx +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Rich Icons Library -description: Getting started with Workleap Design Icons -order: 3 ---- - -export const usageMethods = [ - { title: "React" }, - { title: "SVG" } -]; - -# Rich Icons Library - -All available icons in the icon library are shown below. - -Use the correct size for each icon. Icons should be used at their original size according to the design. - -Click or tap on any icon to copy its name. - - diff --git a/apps/docs/content/icons/svg/icons-library.mdx b/apps/docs/content/icons/svg/library.mdx similarity index 91% rename from apps/docs/content/icons/svg/icons-library.mdx rename to apps/docs/content/icons/svg/library.mdx index 23de9b845..673862505 100644 --- a/apps/docs/content/icons/svg/icons-library.mdx +++ b/apps/docs/content/icons/svg/library.mdx @@ -1,5 +1,5 @@ --- -title: Icons Library +title: Library description: Getting started with Workleap Design Icons --- @@ -8,7 +8,7 @@ export const usageMethods = [ { title: "SVG" } ]; -# Icons Library +# Library All available icons in the icon library are shown below. diff --git a/apps/docs/content/icons/svg/rich-icons-library.mdx b/apps/docs/content/icons/svg/rich-icons-library.mdx deleted file mode 100644 index ff46d7d6a..000000000 --- a/apps/docs/content/icons/svg/rich-icons-library.mdx +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Rich Icons Library -description: Getting started with Workleap Design Icons ---- - -export const usageMethods = [ - { title: "React" }, - { title: "SVG" } -]; - -# Rich Icons Library - -All available icons in the icon library are shown below. - -Use the correct size for each icon. Icons should be used at their original size according to the design. - -Click or tap on any icon to copy its filename. - - From 5b08fcc9c092902f787a4dc1cba4a19f22a1f24a Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Fri, 12 Apr 2024 13:22:36 -0400 Subject: [PATCH 10/19] updated hopper doc buttons and homepage --- apps/docs/app/home/home.css | 203 +++++++++++++++--- apps/docs/app/page.tsx | 68 +++--- .../docs/components/button/Button.stories.tsx | 1 - apps/docs/components/button/button.css | 3 +- apps/docs/package.json | 1 + pnpm-lock.yaml | 3 + 6 files changed, 213 insertions(+), 66 deletions(-) diff --git a/apps/docs/app/home/home.css b/apps/docs/app/home/home.css index b5a7b2d52..a7df9fa7b 100644 --- a/apps/docs/app/home/home.css +++ b/apps/docs/app/home/home.css @@ -24,18 +24,21 @@ } .hd-home__features { - display: flex; - flex-wrap: wrap; + display: grid; gap: var(--hd-space-4); + grid-template-columns: repeat(1, 1fr); margin-top: var(--hd-space-10); + text-align: center; } .hd-home__feature-item { - flex: 1; + display: flex; + flex-direction: column; + align-items: center; } .hd-home__feature-title { - align-items: center; + justify-content: center; display: flex; font-size: 1.125rem; gap: var(--hd-space-1); @@ -48,6 +51,23 @@ stroke: var(--hd-color-neutral-icon); } +@media screen and (width >= 37.5rem) { + .hd-home__features { + grid-template-columns: repeat(2, 1fr); + text-align: left; + } + + .hd-home__feature-item { + align-items: start; + } +} + +@media screen and (width >= 48rem) { + .hd-home__features { + grid-template-columns: repeat(4, 1fr); + } +} + .hd-icon-fill { fill: var(--hd-color-neutral-icon); stroke: transparent; @@ -58,20 +78,27 @@ } .hd-home__feature-copy { - color: var(--neutral-text-weak); + color: var(--hd-color-neutral-text-weak); font-size: 0.875rem; line-height: 1.4285; margin-top: var(--hd-space-1); + max-width: 50ch; } /* Samples Section */ .hd-home-samples { display: grid; gap: var(--hd-space-3); - grid-template-columns: 1fr 1fr; + grid-template-columns: 1fr; margin-top: var(--hd-space-10); } +@media screen and (width >= 78.75rem) { + .hd-home-samples { + grid-template-columns: repeat(2, 1fr); + } +} + .hd-home-sample__item { --background: var(--hd-white); --color: var(--hd-neutral-50); @@ -142,20 +169,42 @@ a.hd-home-sample__item:hover::after { .hd-home-samples__row { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: 1fr; gap: 1.5rem; } +@media screen and (width >= 37.5rem) { + .hd-home-samples__row { + grid-template-columns: repeat(2, 1fr); + } +} + .hd-home-samples__col { display: grid; gap: 1.5rem; } +.hd-home-samples__main-wrapper { + grid-template-columns: 1fr; +} + +@media screen and (width >= 62rem) { + .hd-home-samples__main-wrapper { + grid-template-columns: repeat(2, 1fr); + } +} + +@media screen and (width >= 78.75rem) { + .hd-home-samples__main-wrapper { + grid-template-columns: 1fr; + } +} + /* colors sample */ .hd-home-sample__colors { - display: flex; + align-self: start; + display: grid; justify-content: flex-end; - flex-wrap: wrap; gap: var(--hd-space-1); margin-block: calc(-1 * var(--hd-space-1)); } @@ -174,6 +223,7 @@ a.hd-home-sample__item:hover::after { .hd-home-sample__item-colors { display: flex; + gap: var(--hd-space-1); justify-content: space-between; } @@ -223,7 +273,6 @@ a.hd-home-sample__item:hover::after { justify-content: space-between; gap: var(--hd-space-1); flex-wrap: wrap; - margin-block: var(--hd-space-1); } .hd-home-sample__size { @@ -240,7 +289,8 @@ a.hd-home-sample__item:hover::after { .hd-home-sample__size-bar { background-color: var(--hd-color-accent-surface); - height: 3.5rem; + min-height: 3.5rem; + height: 100%; } .hd-home-sample__size-16 .hd-home-sample__size-bar { @@ -264,6 +314,37 @@ a.hd-home-sample__item:hover::after { display: flex; gap: var(--hd-space-2); flex-direction: column; + flex-grow: 1; + justify-content: space-between +} + +.hd-home-sample__item-icons { + display: flex; + flex-direction: column; +} + +.hd-home-sample__icons-row.hd-home-sample__icons-extra-row { + display: none; +} + +@media screen and (width >= 62rem) { + .hd-home-sample__icons { + gap: var(--hd-space-3); + } + + .hd-home-sample__icons-row.hd-home-sample__icons-extra-row { + display: flex; + } +} + +@media screen and (width >= 78.75rem) { + .hd-home-sample__icons { + gap: var(--hd-space-2); + } + + .hd-home-sample__icons-row.hd-home-sample__icons-extra-row { + display: none; + } } .hd-home-sample__icons-row { @@ -272,15 +353,15 @@ a.hd-home-sample__item:hover::after { } .hd-home-samples .hd-home-sample__icons-icon { - color: #959593; + color: var(--hop-neutral-icon-weak); } .hd-home-samples .hd-home-sample__icons-icon--active { - color: #155AF9; + color: var(--hop-primary-icon); } .hd-home-samples .hd-home-sample__icons-icon--strong { - color: #3C3C3C; + color: var(--hop-neutral-icon); } /* Text Styles */ @@ -296,12 +377,26 @@ a.hd-home-sample__item:hover::after { border-style: solid; border-right: 0; border-top-width: var(--hd-border-size); - display: flex; - flex-grow: 1; + display: grid; + grid-template-columns: repeat(2, 1fr); gap: var(--hd-space-3); margin-top: var(--hd-space-3); } +@media screen and (width >= 37.5rem) { + .hd-home-sample__text-styles { + grid-template-columns: 1fr; + gap: var(--hd-space-1); + } +} + +@media screen and (width >= 44rem) { + .hd-home-sample__text-styles { + grid-template-columns: repeat(2, 1fr); + gap: var(--hd-space-3); + } +} + .hd-home-sample__text { font-family: Inter, sans-serif; font-size: 5.25rem; @@ -329,12 +424,30 @@ a.hd-home-sample__item:hover::after { border-right: 0; border-top: 0; border-left-width: var(--hd-border-size); + display: grid; flex-direction: column; flex-grow: 1; gap: 0.75rem; padding: var(--hd-space-2); } +@media screen and (width >= 37.5rem) { + .hd-home-sample__text-styles-controls { + grid-template-columns: repeat(2, 1fr); + border-image: linear-gradient(90deg, rgba(0 0 0 / 0%), rgb(186 188 192)) 1; + border-style: solid; + border-top-width: var(--hd-border-size); + } +} + +@media screen and (width >= 44rem) { + .hd-home-sample__text-styles-controls { + grid-template-columns: 1fr; + border-image: linear-gradient(0deg, rgba(0 0 0 / 0%), rgb(186 188 192)) 1; + border-top: 0; + } +} + [data-theme="dark"] .hd-home-sample__text-styles-controls { --background: var(--hd-neutral-900); } @@ -374,7 +487,25 @@ a.hd-home-sample__item:hover::after { .hd-home-sample-components { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: 1fr; +} + +@media screen and (width >= 37.5rem) { + .hd-home-sample-components { + grid-template-columns: repeat(2, 1fr); + } +} + +@media screen and (width >= 62rem) { + .hd-home-sample-components { + grid-template-columns: repeat(4, 1fr); + } +} + +@media screen and (width >= 78.75rem) { + .hd-home-sample-components { + grid-template-columns: repeat(2, 1fr); + } } .hd-home-sample-components__item { @@ -386,24 +517,26 @@ a.hd-home-sample__item:hover::after { padding: 1rem; } -.hd-home-sample-components__item:nth-child(odd) { - background: linear-gradient(-90deg, var(--background) 0%, var(--background) 85%, rgba(0 212 255 / 0%) 100%); - border-bottom: 0; - border-image: linear-gradient(90deg,rgba(0 0 0 / 0%),rgb(186 188 192)) 1; - border-style: solid; - border-right: 0; - border-left: 0; - border-top-width: var(--hd-border-size); -} - -.hd-home-sample-components__item:nth-child(even) { - background: linear-gradient(90deg, var(--background) 0%, var(--background) 85%, rgba(255 255 255 / 0%) 100%); - border-bottom: 0; - border-image: linear-gradient(-90deg,rgba(0 0 0 / 0%), rgb(186 188 192)) 1; - border-style: solid; - border-right: 0; - border-left: 0; - border-top-width: var(--hd-border-size); +@media screen and (width >= 78.75rem) { + .hd-home-sample-components__item:nth-child(odd) { + background: linear-gradient(-90deg, var(--background) 0%, var(--background) 85%, rgba(0 212 255 / 0%) 100%); + border-bottom: 0; + border-image: linear-gradient(90deg,rgba(0 0 0 / 0%),rgb(186 188 192)) 1; + border-style: solid; + border-right: 0; + border-left: 0; + border-top-width: var(--hd-border-size); + } + + .hd-home-sample-components__item:nth-child(even) { + background: linear-gradient(90deg, var(--background) 0%, var(--background) 85%, rgba(255 255 255 / 0%) 100%); + border-bottom: 0; + border-image: linear-gradient(-90deg,rgba(0 0 0 / 0%), rgb(186 188 192)) 1; + border-style: solid; + border-right: 0; + border-left: 0; + border-top-width: var(--hd-border-size); + } } [data-theme="dark"] .hd-home-sample-components__item { diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx index 71f87a9a0..ba39e3bf9 100644 --- a/apps/docs/app/page.tsx +++ b/apps/docs/app/page.tsx @@ -16,7 +16,8 @@ import { useContext } from "react"; import Button from "../components/button/Button"; import { ExternalLinkIcon, Icon } from "@/components/icon"; -import { CalendarIcon, ChartBarIcon, CheckmarkIcon, DeleteIcon, EyeVisibleIcon, FilterIcon, ItalicIcon, LightbulbIcon, LockIcon, MailIcon, ProfileIcon, SearchIcon, ShareIcon, StarIcon, StickyIcon, ThumbsUpIcon, WarningIcon } from "@hopper-ui/icons"; +// eslint-disable-next-line max-len +import { CalendarIcon, ChartBarIcon, CheckmarkIcon, DeleteIcon, EyeVisibleIcon, FilterIcon, FocusIcon, ItalicIcon, LightbulbIcon, LockIcon, MailIcon, NotebookIcon, PinIcon, ProfileIcon, ReactionIcon, RecurringIcon, RewindIcon, SearchIcon, ShareIcon, StarIcon, StickyIcon, SyncIcon, TeamIcon, ThumbsUpIcon, UnarchiveIcon, WarningIcon } from "@hopper-ui/icons"; import "@hopper-ui/tokens/fonts.css"; import "./home/home.css"; @@ -64,7 +65,7 @@ export default function Home() {
-
+

Icons

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit

- -
-
- - - - - - - - - -
-
- - - - - - - - - -
+

A set of commonly used interface icons.

+ +
+ + + + + + + + + +
+
+ + + + + + + + + +
+
+ + + + + + + + +
@@ -183,8 +193,8 @@ export default function Home() {
- Confirm - I need help + Confirm + I need help
diff --git a/apps/docs/components/button/Button.stories.tsx b/apps/docs/components/button/Button.stories.tsx index 6dafae8ea..229c921dd 100644 --- a/apps/docs/components/button/Button.stories.tsx +++ b/apps/docs/components/button/Button.stories.tsx @@ -49,7 +49,6 @@ export const AsLink: Story = { as: "a", href: "https://www.npmjs.com/package/@hopper-ui/components", target: "_blank" - }, render: args => (
diff --git a/apps/docs/components/button/button.css b/apps/docs/components/button/button.css index 7a06b9555..9ad25469a 100644 --- a/apps/docs/components/button/button.css +++ b/apps/docs/components/button/button.css @@ -32,7 +32,8 @@ flex-direction: row-reverse; } -.hd-btn[data-focus-visible="true"] { +.hd-btn[data-focus-visible="true"], +a.hd-btn:focus-visible { box-shadow: var(--hd-focus-ring); } diff --git a/apps/docs/package.json b/apps/docs/package.json index 7c0437b15..dfcfd22d3 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -33,6 +33,7 @@ "@codesandbox/sandpack-react": "^2.13.5", "@hopper-ui/components": "workspace:*", "@hopper-ui/tokens": "workspace:*", + "@hopper-ui/icons": "workspace:*", "@storybook/addon-essentials": "8.0.2", "@storybook/addon-interactions": "8.0.2", "@storybook/addon-links": "8.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3795dd864..a8bae55f4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -183,6 +183,9 @@ importers: '@hopper-ui/components': specifier: workspace:* version: link:../../packages/components + '@hopper-ui/icons': + specifier: workspace:* + version: link:../../packages/icons '@hopper-ui/tokens': specifier: workspace:* version: link:../../packages/tokens From 08cb364487db2a829a9d7da921522fad901f7a2f Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Fri, 12 Apr 2024 16:57:29 -0400 Subject: [PATCH 11/19] mobile view --- apps/docs/app/home/home.css | 31 +++++++++++++++++++++++---- apps/docs/app/page.tsx | 42 ++++++++++++++++++++++--------------- 2 files changed, 52 insertions(+), 21 deletions(-) diff --git a/apps/docs/app/home/home.css b/apps/docs/app/home/home.css index a7df9fa7b..9a416c671 100644 --- a/apps/docs/app/home/home.css +++ b/apps/docs/app/home/home.css @@ -508,17 +508,22 @@ a.hd-home-sample__item:hover::after { } } +.hd-home-sample-components__item-wrapper { + display: flex; +} + .hd-home-sample-components__item { --background: rgba(255 255 255 / 70%); align-items: center; display: flex;; + flex-grow: 1; justify-content: center; padding: 1rem; } @media screen and (width >= 78.75rem) { - .hd-home-sample-components__item:nth-child(odd) { + .hd-home-sample-components__item-wrapper:nth-child(odd) { background: linear-gradient(-90deg, var(--background) 0%, var(--background) 85%, rgba(0 212 255 / 0%) 100%); border-bottom: 0; border-image: linear-gradient(90deg,rgba(0 0 0 / 0%),rgb(186 188 192)) 1; @@ -528,7 +533,7 @@ a.hd-home-sample__item:hover::after { border-top-width: var(--hd-border-size); } - .hd-home-sample-components__item:nth-child(even) { + .hd-home-sample-components__item-wrapper:nth-child(even) { background: linear-gradient(90deg, var(--background) 0%, var(--background) 85%, rgba(255 255 255 / 0%) 100%); border-bottom: 0; border-image: linear-gradient(-90deg,rgba(0 0 0 / 0%), rgb(186 188 192)) 1; @@ -537,6 +542,24 @@ a.hd-home-sample__item:hover::after { border-left: 0; border-top-width: var(--hd-border-size); } + + .hd-home-sample-components__item-wrapper:nth-child(2) .hd-home-sample-components__item { + border-bottom: 0; + border-image: linear-gradient(-90deg,rgba(0 0 0 / 0%), rgb(186 188 192)) 1; + border-style: solid; + border-right: 0; + border-left-width: var(--hd-border-size); + border-top: 0; + } + + .hd-home-sample-components__item-wrapper:nth-child(4) .hd-home-sample-components__item { + border-bottom: 0; + border-image: linear-gradient(0deg,rgba(0 0 0 / 0%) 0%, rgba(0 0 0 / 0%) 45%, rgb(186 188 192)) 1; + border-style: solid; + border-right: 0; + border-left-width: var(--hd-border-size); + border-top: 0; + } } [data-theme="dark"] .hd-home-sample-components__item { @@ -551,7 +574,7 @@ a.hd-home-sample__item:hover::after { /* Upcoming */ .hd-home-sample__item-upcoming { - background-image: linear-gradient(1deg, rgba(60 60 60 / 20%) 0.94%, rgba(60 60 60 / 50%) 75.3%); + background-image: linear-gradient(0deg, rgba(202 79 79 / 20%) 0%, rgba(60 60 60 / 50%) 75%); border-radius: inherit; display: flex; inset: 0; @@ -561,7 +584,7 @@ a.hd-home-sample__item:hover::after { } [data-theme="dark"] .hd-home-sample__item-upcoming { - background: linear-gradient(1deg, rgba(80 80 80 / 20%) 0.94%, rgba(80 80 80 / 60%) 75.3%); + background: linear-gradient(0deg, rgba(80 80 80 / 20%) 0%, rgba(80 80 80 / 60%) 75%); opacity: 0.6; } diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx index ba39e3bf9..0637a41bf 100644 --- a/apps/docs/app/page.tsx +++ b/apps/docs/app/page.tsx @@ -69,7 +69,7 @@ export default function Home() {
-

Colors

+

Colors

@@ -86,7 +86,7 @@ export default function Home() {
-

Sizes

+

Sizes

16 @@ -109,7 +109,7 @@ export default function Home() {
-

Text Styles

+

Text Styles

Aa @@ -137,7 +137,7 @@ export default function Home() {
-

Icons

+

Icons

A set of commonly used interface icons.

@@ -184,22 +184,30 @@ export default function Home() {

Lorem ipsum dolor sit amet, consectetur adipiscing elit

-
- Avatar Group component preview +
+
+ Avatar Group component preview +
-
- Select Fielg component preview +
+
+ Select Fielg component preview +
-
- -
- Confirm - I need help -
- +
+
+ +
+ Confirm + I need help +
+ +
-
- Radio Group Component preview +
+
+ Radio Group Component preview +
From 01c94546ad0f9587c05cf08773b20c41bfc1f468 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Mon, 15 Apr 2024 10:27:29 -0400 Subject: [PATCH 12/19] added copy --- apps/docs/app/page.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx index 0637a41bf..31e7b4bb4 100644 --- a/apps/docs/app/page.tsx +++ b/apps/docs/app/page.tsx @@ -31,8 +31,8 @@ export default function Home() {
-

Fusce semper facilisis finibus.

-

Sed condimentum, arcu sit amet tempus posuere, sapien ex vulputate risus, placerat convallis lectus ex.

+

Leap into creativity

+

Explore our Design System, where icons, tokens, and components are handpicked for ultimate simplicity and accessibility.

@@ -182,7 +182,7 @@ export default function Home() {

Components

upcoming
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit

+

An accessible suite of components powered by react-aria.

From 66c87a125b1fb46d53fd11e2b1efe426bfedcccc Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Mon, 15 Apr 2024 14:14:55 -0400 Subject: [PATCH 13/19] header color adjustments per theme --- apps/docs/app/home/assets/arrow.svg | 2 +- apps/docs/app/home/home.css | 5 +++++ apps/docs/app/ui/layout/header/header.css | 24 +++++++++++++++++------ 3 files changed, 24 insertions(+), 7 deletions(-) diff --git a/apps/docs/app/home/assets/arrow.svg b/apps/docs/app/home/assets/arrow.svg index c3824b609..88f4a7332 100644 --- a/apps/docs/app/home/assets/arrow.svg +++ b/apps/docs/app/home/assets/arrow.svg @@ -1 +1 @@ - + diff --git a/apps/docs/app/home/home.css b/apps/docs/app/home/home.css index 9a416c671..47fad6685 100644 --- a/apps/docs/app/home/home.css +++ b/apps/docs/app/home/home.css @@ -1,4 +1,7 @@ .hd-home__heading { + align-items: center; + display: flex; + flex-direction: column; text-align: center; margin: 0 auto; max-width: 43rem; @@ -14,6 +17,7 @@ font-size: 1rem; line-height: 1.5; margin-top: var(--hd-space-1); + max-width: 60ch; } .hd-home__ctas { @@ -154,6 +158,7 @@ a.hd-home-sample__item:hover::after { } .hd-home-sample__title-icon { + fill: var(--hd-color-neutral-icon); opacity: 0; transform: translateX(-1rem); transition: opacity 0.2s ease, transform 0.1s ease-in; diff --git a/apps/docs/app/ui/layout/header/header.css b/apps/docs/app/ui/layout/header/header.css index 3a8e37f2f..3ebfe5f22 100644 --- a/apps/docs/app/ui/layout/header/header.css +++ b/apps/docs/app/ui/layout/header/header.css @@ -3,10 +3,22 @@ --hd-header-background-color: rgb(252 251 251 / 50%); --hd-header-border-color: var(--hd-color-neutral-border-weak); --hd-header-height: var(--hd-space-8); + --hd-header-shadow-1-block-color: rgba(175 182 225 / 80%); + --hd-header-shadow-2-block-color: #FECD94; + --hd-header-shadow-3-block-color: #A9F1D6; + --hd-header-shadow-1-top-position: -2.75rem; + --hd-header-shadow-2-top-position: -21.25rem; + --hd-header-shadow-3-top-position: -10.5rem; } [data-theme="dark"] { --hd-header-background-color: rgb(41 40 41 / 80%); + --hd-header-shadow-1-block-color: rgba(175 182 225 / 70%); + --hd-header-shadow-2-block-color: #FECD94; + --hd-header-shadow-3-block-color: #A9F1D6; + --hd-header-shadow-1-top-position: -18.75rem; + --hd-header-shadow-2-top-position: -31.25rem; + --hd-header-shadow-3-top-position: -19.5rem; } .hd-header { @@ -94,25 +106,25 @@ } .hd-header-shadow-block-1 { - background-color: #AFB6E1; + background-color: var(--hd-header-shadow-1-block-color); width: 32rem; height: 32rem; - top: -18.75rem; + top: var(--hd-header-shadow-1-top-position); right: 6rem; } .hd-header-shadow-block-2 { width: 40rem; height: 40rem; - background-color: #FECD94; + background-color: var(--hd-header-shadow-2-block-color); filter: blur(12.5rem); - top: -31.25rem; + top: var(--hd-header-shadow-2-top-position); } .hd-header-shadow-block-3 { - background-color: #A9F1D6; + background-color: var(--hd-header-shadow-3-block-color); width: 32rem; height: 32rem; - top: -24rem; + top: var(--hd-header-shadow-3-top-position); left: -10.5rem; } From edd645930b3871ec8d69d936dce1496427e0ef11 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Mon, 15 Apr 2024 14:32:37 -0400 Subject: [PATCH 14/19] fixed heading spacing issue when no aside present --- apps/docs/app/layout.css | 7 ------- apps/docs/app/ui/layout/aside/aside.css | 8 ++++++++ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/apps/docs/app/layout.css b/apps/docs/app/layout.css index fdf270501..b5d9703bd 100644 --- a/apps/docs/app/layout.css +++ b/apps/docs/app/layout.css @@ -29,12 +29,6 @@ main { order: 1; } -@media screen and (width >= 48rem) { - main { - padding-block-start: 0; - } -} - @media screen and (width >= 62rem) { .hd-container { flex-direction: row; @@ -42,7 +36,6 @@ main { main { order: 1; - padding-block-start: var(--hd-space-8); } } diff --git a/apps/docs/app/ui/layout/aside/aside.css b/apps/docs/app/ui/layout/aside/aside.css index 53d5f6607..837601c06 100644 --- a/apps/docs/app/ui/layout/aside/aside.css +++ b/apps/docs/app/ui/layout/aside/aside.css @@ -11,6 +11,10 @@ display: flex; padding-block-start: var(--hd-space-8); } + + .hd-aside + main { + padding-block-start: 0; + } } @media screen and (width >= 62rem) { @@ -23,6 +27,10 @@ top: var(--hd-space-8); height: calc(100vh - var(--hd-space-8)); } + + .hd-aside + main { + padding-block-start: var(--hd-space-8); + } } .hd-aside__list { From 581840f08d02730d56dfe5076272199dd74a8e07 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Mon, 15 Apr 2024 15:50:00 -0400 Subject: [PATCH 15/19] lint error in package json --- apps/docs/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/package.json b/apps/docs/package.json index dfcfd22d3..b7872d30a 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -32,8 +32,8 @@ "devDependencies": { "@codesandbox/sandpack-react": "^2.13.5", "@hopper-ui/components": "workspace:*", - "@hopper-ui/tokens": "workspace:*", "@hopper-ui/icons": "workspace:*", + "@hopper-ui/tokens": "workspace:*", "@storybook/addon-essentials": "8.0.2", "@storybook/addon-interactions": "8.0.2", "@storybook/addon-links": "8.0.2", From c721328ad7a7300e950db57155594993fe1e2f32 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Mon, 15 Apr 2024 15:58:32 -0400 Subject: [PATCH 16/19] adjusted component gradient length --- apps/docs/app/home/home.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/app/home/home.css b/apps/docs/app/home/home.css index 47fad6685..fab872858 100644 --- a/apps/docs/app/home/home.css +++ b/apps/docs/app/home/home.css @@ -559,7 +559,7 @@ a.hd-home-sample__item:hover::after { .hd-home-sample-components__item-wrapper:nth-child(4) .hd-home-sample-components__item { border-bottom: 0; - border-image: linear-gradient(0deg,rgba(0 0 0 / 0%) 0%, rgba(0 0 0 / 0%) 45%, rgb(186 188 192)) 1; + border-image: linear-gradient(0deg,rgba(0 0 0 / 0%) 0%, rgba(0 0 0 / 0%) 25%, rgb(186 188 192)) 1; border-style: solid; border-right: 0; border-left-width: var(--hd-border-size); From aabfa7ff2c01888e7b12a02aeef4e2f28c25f62c Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Wed, 17 Apr 2024 12:12:05 -0400 Subject: [PATCH 17/19] PR fixes --- apps/docs/app/home/home.css | 14 ++------------ apps/docs/app/page.tsx | 11 ++++++----- 2 files changed, 8 insertions(+), 17 deletions(-) diff --git a/apps/docs/app/home/home.css b/apps/docs/app/home/home.css index fab872858..ceca49135 100644 --- a/apps/docs/app/home/home.css +++ b/apps/docs/app/home/home.css @@ -12,7 +12,7 @@ line-height: 1.3333; } -.hd-home__copy { +.hd-home__tagline { color: var(--hd-color-neutral-text-weak); font-size: 1rem; line-height: 1.5; @@ -164,7 +164,7 @@ a.hd-home-sample__item:hover::after { transition: opacity 0.2s ease, transform 0.1s ease-in; } -.hd-home-sample__copy { +.hd-home-sample__tagline { color: var(--hd-color-neutral-text-weak); font-size: 1rem; line-height: 1.5; @@ -592,13 +592,3 @@ a.hd-home-sample__item:hover::after { background: linear-gradient(0deg, rgba(80 80 80 / 20%) 0%, rgba(80 80 80 / 60%) 75%); opacity: 0.6; } - -/* Tag */ -.hd-tag-accent { - background-color: var(--hd-color-accent-surface); - border-radius: 0.5rem; - color: var(--hd-color-accent-text); - font-size: 0.875rem; - line-height: 1.4285; - padding-inline: var(--hd-space-05); -} diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx index 31e7b4bb4..4232ba15f 100644 --- a/apps/docs/app/page.tsx +++ b/apps/docs/app/page.tsx @@ -13,7 +13,8 @@ import ArrowIcon from "./home/assets/arrow.svg"; import SelectArrowIcon from "./home/assets/select-arrow.svg"; import { type ColorScheme, ThemeContext } from "@/context/theme/ThemeProvider.tsx"; import { useContext } from "react"; -import Button from "../components/button/Button"; +import Button from "@/components/button/Button"; +import Tag from "@/components/tag/Tag"; import { ExternalLinkIcon, Icon } from "@/components/icon"; // eslint-disable-next-line max-len @@ -32,7 +33,7 @@ export default function Home() {

Leap into creativity

-

Explore our Design System, where icons, tokens, and components are handpicked for ultimate simplicity and accessibility.

+

Explore our Design System, where icons, tokens, and components are handpicked for ultimate simplicity and accessibility.

@@ -138,7 +139,7 @@ export default function Home() {

Icons

-

A set of commonly used interface icons.

+

A set of commonly used interface icons.

@@ -180,9 +181,9 @@ export default function Home() {

Components

- upcoming + upcoming
-

An accessible suite of components powered by react-aria.

+

An accessible suite of components powered by react-aria.

From a072c1270c75cc8f01added7eb98afde5fd7e6ca Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Wed, 17 Apr 2024 14:43:23 -0400 Subject: [PATCH 18/19] moved home and home icon assets --- apps/docs/app/{home => }/home.css | 0 apps/docs/app/home/assets/external-link.svg | 1 - apps/docs/app/page.tsx | 12 ++----- .../icon}/assets/accessible.svg | 0 .../home => components/icon}/assets/arrow.svg | 0 .../icon}/assets/dark-mode.svg | 0 .../icon}/assets/font-size.svg | 0 .../icon}/assets/international.svg | 0 .../icon}/assets/line-height.svg | 0 .../icon}/assets/margin.svg | 0 .../icon}/assets/select-arrow.svg | 0 .../icon}/assets/typescript.svg | 0 apps/docs/components/icon/index.tsx | 33 +++++++++++++++---- 13 files changed, 28 insertions(+), 18 deletions(-) rename apps/docs/app/{home => }/home.css (100%) delete mode 100644 apps/docs/app/home/assets/external-link.svg rename apps/docs/{app/home => components/icon}/assets/accessible.svg (100%) rename apps/docs/{app/home => components/icon}/assets/arrow.svg (100%) rename apps/docs/{app/home => components/icon}/assets/dark-mode.svg (100%) rename apps/docs/{app/home => components/icon}/assets/font-size.svg (100%) rename apps/docs/{app/home => components/icon}/assets/international.svg (100%) rename apps/docs/{app/home => components/icon}/assets/line-height.svg (100%) rename apps/docs/{app/home => components/icon}/assets/margin.svg (100%) rename apps/docs/{app/home => components/icon}/assets/select-arrow.svg (100%) rename apps/docs/{app/home => components/icon}/assets/typescript.svg (100%) diff --git a/apps/docs/app/home/home.css b/apps/docs/app/home.css similarity index 100% rename from apps/docs/app/home/home.css rename to apps/docs/app/home.css diff --git a/apps/docs/app/home/assets/external-link.svg b/apps/docs/app/home/assets/external-link.svg deleted file mode 100644 index a5de228d9..000000000 --- a/apps/docs/app/home/assets/external-link.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx index 4232ba15f..80884aca7 100644 --- a/apps/docs/app/page.tsx +++ b/apps/docs/app/page.tsx @@ -2,15 +2,7 @@ import { Button as HopperButton, HopperProvider } from "@hopper-ui/components"; import Image from "next/image"; -import AccessibleIcon from "./home/assets/accessible.svg"; -import InternationalIcon from "./home/assets/international.svg"; -import TypescriptIcon from "./home/assets/typescript.svg"; -import DarkModeIcon from "./home/assets/dark-mode.svg"; -import FontSizeIcon from "./home/assets/font-size.svg"; -import LineHeightIcon from "./home/assets/line-height.svg"; -import MarginIcon from "./home/assets/margin.svg"; -import ArrowIcon from "./home/assets/arrow.svg"; -import SelectArrowIcon from "./home/assets/select-arrow.svg"; +import { AccessibleIcon, ArrowIcon, DarkModeIcon, FontSizeIcon, InternationalIcon, LineHeightIcon, MarginIcon, SelectArrowIcon, TypescriptIcon } from "../components/icon/index"; import { type ColorScheme, ThemeContext } from "@/context/theme/ThemeProvider.tsx"; import { useContext } from "react"; import Button from "@/components/button/Button"; @@ -21,7 +13,7 @@ import { ExternalLinkIcon, Icon } from "@/components/icon"; import { CalendarIcon, ChartBarIcon, CheckmarkIcon, DeleteIcon, EyeVisibleIcon, FilterIcon, FocusIcon, ItalicIcon, LightbulbIcon, LockIcon, MailIcon, NotebookIcon, PinIcon, ProfileIcon, ReactionIcon, RecurringIcon, RewindIcon, SearchIcon, ShareIcon, StarIcon, StickyIcon, SyncIcon, TeamIcon, ThumbsUpIcon, UnarchiveIcon, WarningIcon } from "@hopper-ui/icons"; import "@hopper-ui/tokens/fonts.css"; -import "./home/home.css"; +import "./home.css"; export default function Home() { const { colorMode } = useContext(ThemeContext); diff --git a/apps/docs/app/home/assets/accessible.svg b/apps/docs/components/icon/assets/accessible.svg similarity index 100% rename from apps/docs/app/home/assets/accessible.svg rename to apps/docs/components/icon/assets/accessible.svg diff --git a/apps/docs/app/home/assets/arrow.svg b/apps/docs/components/icon/assets/arrow.svg similarity index 100% rename from apps/docs/app/home/assets/arrow.svg rename to apps/docs/components/icon/assets/arrow.svg diff --git a/apps/docs/app/home/assets/dark-mode.svg b/apps/docs/components/icon/assets/dark-mode.svg similarity index 100% rename from apps/docs/app/home/assets/dark-mode.svg rename to apps/docs/components/icon/assets/dark-mode.svg diff --git a/apps/docs/app/home/assets/font-size.svg b/apps/docs/components/icon/assets/font-size.svg similarity index 100% rename from apps/docs/app/home/assets/font-size.svg rename to apps/docs/components/icon/assets/font-size.svg diff --git a/apps/docs/app/home/assets/international.svg b/apps/docs/components/icon/assets/international.svg similarity index 100% rename from apps/docs/app/home/assets/international.svg rename to apps/docs/components/icon/assets/international.svg diff --git a/apps/docs/app/home/assets/line-height.svg b/apps/docs/components/icon/assets/line-height.svg similarity index 100% rename from apps/docs/app/home/assets/line-height.svg rename to apps/docs/components/icon/assets/line-height.svg diff --git a/apps/docs/app/home/assets/margin.svg b/apps/docs/components/icon/assets/margin.svg similarity index 100% rename from apps/docs/app/home/assets/margin.svg rename to apps/docs/components/icon/assets/margin.svg diff --git a/apps/docs/app/home/assets/select-arrow.svg b/apps/docs/components/icon/assets/select-arrow.svg similarity index 100% rename from apps/docs/app/home/assets/select-arrow.svg rename to apps/docs/components/icon/assets/select-arrow.svg diff --git a/apps/docs/app/home/assets/typescript.svg b/apps/docs/components/icon/assets/typescript.svg similarity index 100% rename from apps/docs/app/home/assets/typescript.svg rename to apps/docs/components/icon/assets/typescript.svg diff --git a/apps/docs/components/icon/index.tsx b/apps/docs/components/icon/index.tsx index adfbb8eeb..713ca09db 100644 --- a/apps/docs/components/icon/index.tsx +++ b/apps/docs/components/icon/index.tsx @@ -1,16 +1,35 @@ -import NpmIcon from "./assets/npm.svg"; -import GithubIcon from "./assets/github.svg"; -import ExternalLinkIcon from "./assets/external-link.svg"; +import AccessibleIcon from "./assets/accessible.svg"; +import ArrowIcon from "./assets/arrow.svg"; import ComponentIcon from "./assets/component.svg"; +import DarkModeIcon from "./assets/dark-mode.svg"; +import ExternalLinkIcon from "./assets/external-link.svg"; +import FontSizeIcon from "./assets/font-size.svg"; +import GithubIcon from "./assets/github.svg"; +import InternationalIcon from "./assets/international.svg"; +import LineHeightIcon from "./assets/line-height.svg"; +import MarginIcon from "./assets/margin.svg"; +import NpmIcon from "./assets/npm.svg"; +import SelectArrowIcon from "./assets/select-arrow.svg"; import TokenIcon from "./assets/tokens.svg"; +import TypescriptIcon from "./assets/typescript.svg"; + import Icon, { type IconProps } from "./Icon.tsx"; export { - Icon, - NpmIcon, - GithubIcon, - ExternalLinkIcon, + AccessibleIcon, + ArrowIcon, ComponentIcon, + DarkModeIcon, + ExternalLinkIcon, + FontSizeIcon, + GithubIcon, + InternationalIcon, + LineHeightIcon, + MarginIcon, + NpmIcon, + SelectArrowIcon, TokenIcon, + TypescriptIcon, + Icon, IconProps }; From ea8d178b482aeb5d746a0e582d87284cc19cc8e5 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Mon, 22 Apr 2024 17:15:40 -0400 Subject: [PATCH 19/19] moved the homepage to a temporary location until we release components pages --- apps/docs/app/page.tsx | 207 +------------------------- apps/docs/app/pages/landing/page.tsx | 211 +++++++++++++++++++++++++++ 2 files changed, 214 insertions(+), 204 deletions(-) create mode 100644 apps/docs/app/pages/landing/page.tsx diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx index 80884aca7..c646dec99 100644 --- a/apps/docs/app/page.tsx +++ b/apps/docs/app/page.tsx @@ -1,210 +1,9 @@ -"use client"; - -import { Button as HopperButton, HopperProvider } from "@hopper-ui/components"; -import Image from "next/image"; -import { AccessibleIcon, ArrowIcon, DarkModeIcon, FontSizeIcon, InternationalIcon, LineHeightIcon, MarginIcon, SelectArrowIcon, TypescriptIcon } from "../components/icon/index"; -import { type ColorScheme, ThemeContext } from "@/context/theme/ThemeProvider.tsx"; -import { useContext } from "react"; -import Button from "@/components/button/Button"; -import Tag from "@/components/tag/Tag"; -import { ExternalLinkIcon, Icon } from "@/components/icon"; - -// eslint-disable-next-line max-len -import { CalendarIcon, ChartBarIcon, CheckmarkIcon, DeleteIcon, EyeVisibleIcon, FilterIcon, FocusIcon, ItalicIcon, LightbulbIcon, LockIcon, MailIcon, NotebookIcon, PinIcon, ProfileIcon, ReactionIcon, RecurringIcon, RewindIcon, SearchIcon, ShareIcon, StarIcon, StickyIcon, SyncIcon, TeamIcon, ThumbsUpIcon, UnarchiveIcon, WarningIcon } from "@hopper-ui/icons"; - -import "@hopper-ui/tokens/fonts.css"; -import "./home.css"; - export default function Home() { - const { colorMode } = useContext(ThemeContext); - - const theme = colorMode as ColorScheme; - return ( -
+
-
-

Leap into creativity

-

Explore our Design System, where icons, tokens, and components are handpicked for ultimate simplicity and accessibility.

-
-
- - -
-
-
-

Accessible

-

- Built with accessibility in mind Hopper is based on React Aria Components -

-
-
-

International

-

- Experience is pushed further with internationalization. -

-
-
-

Typescript

-

- Typescript based for reduced learning curve and error detection. -

-
-
-

Dark mode

-

- Switching from light to dark mode couldn't be easier. -

-
-
- +

Welcome to Workleap's Hopper Design System.

+

The documentation is currently in beta.

); diff --git a/apps/docs/app/pages/landing/page.tsx b/apps/docs/app/pages/landing/page.tsx new file mode 100644 index 000000000..bb0db0314 --- /dev/null +++ b/apps/docs/app/pages/landing/page.tsx @@ -0,0 +1,211 @@ +"use client"; + +import { Button as HopperButton, HopperProvider } from "@hopper-ui/components"; +import Image from "next/image"; +import { AccessibleIcon, ArrowIcon, DarkModeIcon, FontSizeIcon, InternationalIcon, LineHeightIcon, MarginIcon, SelectArrowIcon, TypescriptIcon } from "../../../components/icon/index"; +import { type ColorScheme, ThemeContext } from "@/context/theme/ThemeProvider.tsx"; +import { useContext } from "react"; +import Button from "@/components/button/Button"; +import Tag from "@/components/tag/Tag"; +import { ExternalLinkIcon, Icon } from "@/components/icon"; + +// eslint-disable-next-line max-len +import { CalendarIcon, ChartBarIcon, CheckmarkIcon, DeleteIcon, EyeVisibleIcon, FilterIcon, FocusIcon, ItalicIcon, LightbulbIcon, LockIcon, MailIcon, NotebookIcon, PinIcon, ProfileIcon, ReactionIcon, RecurringIcon, RewindIcon, SearchIcon, ShareIcon, StarIcon, StickyIcon, SyncIcon, TeamIcon, ThumbsUpIcon, UnarchiveIcon, WarningIcon } from "@hopper-ui/icons"; + +import "@hopper-ui/tokens/fonts.css"; +import "../../home.css"; + +export default function Home() { + const { colorMode } = useContext(ThemeContext); + + const theme = colorMode as ColorScheme; + + return ( +
+
+
+

Leap into creativity

+

Explore our Design System, where icons, tokens, and components are handpicked for ultimate simplicity and accessibility.

+
+
+ + +
+
+
+

Accessible

+

+ Built with accessibility in mind Hopper is based on React Aria Components +

+
+
+

International

+

+ Experience is pushed further with internationalization. +

+
+
+

Typescript

+

+ Typescript based for reduced learning curve and error detection. +

+
+
+

Dark mode

+

+ Switching from light to dark mode couldn't be easier. +

+
+
+ +
+
+ ); +}