Merge pull request #159 from gsoft-inc/feat/DS-75-hopper-integration-3

[DS-75] Added hopper components to chromatic stories
gsoft-inc · Oct 9, 2024 · 1deb6e2 · 1deb6e2
2 parents ab6f572 + 5c4a7ab
commit 1deb6e2
Show file tree

Hide file tree

Showing 39 changed files with 128 additions and 166 deletions.
diff --git a/.changeset/shaggy-pens-rescue.md b/.changeset/shaggy-pens-rescue.md
@@ -0,0 +1,5 @@
+---
+"@workleap/orbiter-ui": minor
+---
+
+Added hopper components and css. Passed props to Hopper through context for components such as Dialog.
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
@@ -21,6 +21,7 @@ function addWebpackAliases(config) {
         "./@hopper-ui/icons/index.css": path.resolve(__dirname, "../node_modules/@hopper-ui/icons/dist/index.css"),
         "./@hopper-ui/tokens/fonts.css": path.resolve(__dirname, "../node_modules/@hopper-ui/tokens/dist/fonts.css"),
         "./@hopper-ui/styled-system/index.css": path.resolve(__dirname, "../node_modules/@hopper-ui/styled-system/dist/index.css"),
+        "./@hopper-ui/components/index.css": path.resolve(__dirname, "../node_modules/@hopper-ui/components/dist/index.css"),
     };
 }
 

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -35,19 +35,21 @@
         "clean": "rimraf dist tsconfig.build.tsbuildinfo"
     },
     "peerDependencies": {
+        "@hopper-ui/components": "*",
         "@hopper-ui/styled-system": "*",
         "react": "^18.0.0",
         "react-aria-components": "*",
         "react-dom": "^18.0.0"
     },
     "dependencies": {
-        "@hopper-ui/icons": "^2.8.1",
-        "react-aria-components": "^1.2.1",
+        "@hopper-ui/icons": "^2.8.2",
         "react-is": "17.0.2"
     },
     "devDependencies": {
+        "@hopper-ui/components": "^1.3.20",
         "@hopper-ui/styled-system": "^2.4.0",
         "@popperjs/core": "2.11.2",
+        "react-aria-components": "^1.2.1",
         "text-mask-core": "5.1.2",
         "tsup": "^8.2.4",
         "use-debounce": "7.0.1"

diff --git a/packages/components/src/accordion/tests/chromatic/createAccordionTestSuite-hopper.jsx b/packages/components/src/accordion/tests/chromatic/createAccordionTestSuite-hopper.jsx
@@ -2,8 +2,9 @@ import { AccordionHeader, useAccordionContext } from "@components/accordion";
 import { Content } from "@components/placeholders";
 import { Counter } from "@components/counter";
 import { Div } from "@components/html";
-import { H1, H3, Text } from "@components/typography";
+import { H1, H3 } from "@components/typography";
 import { InfoIcon } from "@hopper-ui/icons";
+import { Text } from "@hopper-ui/components";
 import { Item } from "@components/collection";
 import { Stack } from "@components/layout";
 import { cloneElement } from "react";

diff --git a/packages/components/src/alert/tests/chromatic/Alert-hopper.chroma.jsx b/packages/components/src/alert/tests/chromatic/Alert-hopper.chroma.jsx
@@ -1,6 +1,6 @@
 import { Alert } from "@components/alert";
 import { Content } from "@components/placeholders";
-import { Heading } from "@components/typography";
+import { Heading } from "@hopper-ui/components";
 import { createTestSuite } from "./createTestSuite-hopper";
 import { storiesOfBuilder } from "@stories/utils";
 

diff --git a/packages/components/src/alert/tests/chromatic/AlertTrigger-hopper.stories.tsx b/packages/components/src/alert/tests/chromatic/AlertTrigger-hopper.stories.tsx
@@ -1,7 +1,6 @@
-import { Alert, AlertTrigger } from "@components/alert";
-import { Button } from "@components/button";
 import { Content } from "@components/placeholders";
-import { Heading } from "@components/typography";
+import { Alert, AlertTrigger } from "@components/alert";
+import { Button, Heading } from "@hopper-ui/components";
 import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
 
 export default {

diff --git a/packages/components/src/alert/tests/chromatic/createTestSuite-hopper.jsx b/packages/components/src/alert/tests/chromatic/createTestSuite-hopper.jsx
@@ -1,6 +1,6 @@
 import { Content } from "@components/placeholders";
 import { Div } from "@components/html";
-import { Heading } from "@components/typography";
+import { Heading } from "@hopper-ui/components";
 import { cloneElement } from "react";
 
 function Alert({ element, ...rest }) {

diff --git a/packages/components/src/autocomplete/tests/chromatic/Autocomplete-hopper.stories.tsx b/packages/components/src/autocomplete/tests/chromatic/Autocomplete-hopper.stories.tsx
@@ -1,7 +1,7 @@
 import { Autocomplete } from "@components/autocomplete";
 import { Div } from "@components/html";
-import { TeamIcon } from "@hopper-ui/icons";
 import { Inline, Stack } from "@components/layout";
+import { TeamIcon } from "@hopper-ui/icons";
 import { Item } from "@components/collection";
 import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
 

diff --git a/packages/components/src/button/tests/chromatic/createButtonTestSuite-hopper.jsx b/packages/components/src/button/tests/chromatic/createButtonTestSuite-hopper.jsx
@@ -1,9 +1,8 @@
 import { Counter } from "@components/counter";
 import { Div } from "@components/html";
-import { IconList } from "@components/icons";
-import { StartOverIcon } from "@hopper-ui/icons";
 import { Inline, Stack } from "@components/layout";
-import { Text } from "@components/typography";
+import { IconList, Text } from "@hopper-ui/components";
+import { StartOverIcon } from "@hopper-ui/icons";
 import { cloneElement } from "react";
 
 function Button({ element, ...rest }) {

diff --git a/packages/components/src/button/tests/chromatic/createToggleButtonTestSuite-hopper.jsx b/packages/components/src/button/tests/chromatic/createToggleButtonTestSuite-hopper.jsx
@@ -1,7 +1,7 @@
 import { Div } from "@components/html";
 import { Inline, Stack } from "@components/layout";
+import { Text } from "@hopper-ui/components";
 import { LightbulbIcon } from "@hopper-ui/icons";
-import { Text } from "@components/typography";
 import { cloneElement } from "react";
 
 function ToggleButton({ element, ...rest }) {

diff --git a/packages/components/src/card/tests/chromatic/Card-hopper.chroma.jsx b/packages/components/src/card/tests/chromatic/Card-hopper.chroma.jsx
@@ -1,10 +1,10 @@
 import { ApolloBanner, ApolloPoster } from "./assets";
 import { Box } from "@components/box";
 import { Card } from "@components/card";
-import { Content } from "@components/placeholders";
 import { Div } from "@components/html";
-import { Flex, Inline, Stack } from "@components/layout";
-import { Heading } from "@components/typography";
+import { Inline, Stack } from "@components/layout";
+import { Content } from "@components/placeholders";
+import { Flex, Heading } from "@hopper-ui/components";
 import { Image } from "@components/image";
 import { createTestSuite } from "./createTestSuite-hopper";
 import { storiesOfBuilder } from "@stories/utils";
@@ -108,7 +108,7 @@ stories()
     )
     .add("flex layout", () =>
         <Stack>
-            <Flex gap={160}>
+            <Flex gap="core_160">
                 <Card>
                     <Image src={ApolloBanner} alt="Appolo 11 Banner" />
                     <Heading>Nasa</Heading>
@@ -124,7 +124,7 @@ stories()
                     <Content>The National Aeronautics and Space Administration</Content>
                 </Card>
             </Flex>
-            <Flex gap={160}>
+            <Flex gap="core_160">
                 <Card fluid>
                     <Image src={ApolloBanner} alt="Appolo 11 Banner" />
                     <Heading>Nasa</Heading>

diff --git a/packages/components/src/card/tests/chromatic/createTestSuite-hopper.jsx b/packages/components/src/card/tests/chromatic/createTestSuite-hopper.jsx
@@ -1,15 +1,13 @@
-import { Button, ButtonGroup } from "@components/button";
 import { Content, Header } from "@components/placeholders";
 import { Div, LI, UL } from "@components/html";
-import { Heading, Paragraph } from "@components/typography";
+import { Paragraph } from "@components/typography";
 import { Illustration } from "@components/illustration";
 import { Image } from "@components/image";
 import { Inline, Stack } from "@components/layout";
+import { Heading, Button, ButtonGroup, Switch, Link } from "@hopper-ui/components";
 import { Item } from "@components/collection";
 import { Nasa } from "./assets";
-import { Switch } from "@components/switch";
 import { Tabs } from "@components/tabs";
-import { TextLink } from "@components/link";
 import { cloneElement } from "react";
 
 function Card({ element, ...rest }) {
@@ -233,21 +231,21 @@ export function createTestSuite(element, stories) {
                     <Card size="xs" element={element}>
                         <Heading>Nasa</Heading>
                         <Header>
-                            <TextLink href="https://www.nasa.gov">Website</TextLink>
+                            <Link variant="secondary" href="https://www.nasa.gov">Website</Link>
                         </Header>
                         <Content>The National Aeronautics and Space Administration</Content>
                     </Card>
                     <Card size="sm" element={element}>
                         <Heading>Nasa</Heading>
                         <Header>
-                            <TextLink href="https://www.nasa.gov">Website</TextLink>
+                            <Link variant="secondary" href="https://www.nasa.gov">Website</Link>
                         </Header>
                         <Content>The National Aeronautics and Space Administration</Content>
                     </Card>
                     <Card element={element}>
                         <Heading>Nasa</Heading>
                         <Header>
-                            <TextLink href="https://www.nasa.gov">Website</TextLink>
+                            <Link variant="secondary" href="https://www.nasa.gov">Website</Link>
                         </Header>
                         <Content>The National Aeronautics and Space Administration</Content>
                     </Card>
@@ -256,22 +254,22 @@ export function createTestSuite(element, stories) {
                     <Card size="lg" element={element}>
                         <Heading>Nasa</Heading>
                         <Header>
-                            <TextLink href="https://www.nasa.gov">Website</TextLink>
+                            <Link variant="secondary" href="https://www.nasa.gov">Website</Link>
                         </Header>
                         <Content>The National Aeronautics and Space Administration</Content>
                     </Card>
                     <Card size="xl" element={element}>
                         <Heading>Nasa</Heading>
                         <Header>
-                            <TextLink href="https://www.nasa.gov">Website</TextLink>
+                            <Link variant="secondary" href="https://www.nasa.gov">Website</Link>
                         </Header>
                         <Content>The National Aeronautics and Space Administration</Content>
                     </Card>
                 </Inline>
                 <Card fluid element={element}>
                     <Heading>Nasa</Heading>
                     <Header>
-                        <TextLink href="https://www.nasa.gov">Website</TextLink>
+                        <Link variant="secondary" href="https://www.nasa.gov">Website</Link>
                     </Header>
                     <Content>The National Aeronautics and Space Administration</Content>
                 </Card>
@@ -284,7 +282,7 @@ export function createTestSuite(element, stories) {
                         <Heading>Nasa</Heading>
                         <Content>
                             <Paragraph>
-                                <TextLink href="https://www.nasa.gov" external>The National Aeronautics and Space Administration</TextLink>
+                                <Link variant="secondary" href="https://www.nasa.gov" external>The National Aeronautics and Space Administration</Link>
                             </Paragraph>
                             <UL>
                                 <LI>Space Shuttle program</LI>
@@ -296,7 +294,7 @@ export function createTestSuite(element, stories) {
                         <Heading>Nasa</Heading>
                         <Content>
                             <Paragraph>
-                                <TextLink href="https://www.nasa.gov" external>The National Aeronautics and Space Administration</TextLink>
+                                <Link variant="secondary" href="https://www.nasa.gov" external>The National Aeronautics and Space Administration</Link>
                             </Paragraph>
                             <UL>
                                 <LI>Space Shuttle program</LI>
@@ -308,7 +306,7 @@ export function createTestSuite(element, stories) {
                         <Heading>Nasa</Heading>
                         <Content>
                             <Paragraph>
-                                <TextLink href="https://www.nasa.gov" external>The National Aeronautics and Space Administration</TextLink>
+                                <Link variant="secondary" href="https://www.nasa.gov" external>The National Aeronautics and Space Administration</Link>
                             </Paragraph>
                             <UL>
                                 <LI>Space Shuttle program</LI>
@@ -322,7 +320,7 @@ export function createTestSuite(element, stories) {
                         <Heading>Nasa</Heading>
                         <Content>
                             <Paragraph>
-                                <TextLink href="https://www.nasa.gov" external>The National Aeronautics and Space Administration</TextLink>
+                                <Link variant="secondary" href="https://www.nasa.gov" external>The National Aeronautics and Space Administration</Link>
                             </Paragraph>
                             <UL>
                                 <LI>Space Shuttle program</LI>
@@ -334,7 +332,7 @@ export function createTestSuite(element, stories) {
                         <Heading>Nasa</Heading>
                         <Content>
                             <Paragraph>
-                                <TextLink href="https://www.nasa.gov" external>The National Aeronautics and Space Administration</TextLink>
+                                <Link variant="secondary" href="https://www.nasa.gov" external>The National Aeronautics and Space Administration</Link>
                             </Paragraph>
                             <UL>
                                 <LI>Space Shuttle program</LI>
@@ -347,7 +345,7 @@ export function createTestSuite(element, stories) {
                     <Heading>Nasa</Heading>
                     <Content>
                         <Paragraph>
-                            <TextLink href="https://www.nasa.gov" external>The National Aeronautics and Space Administration</TextLink>
+                            <Link variant="secondary" href="https://www.nasa.gov" external>The National Aeronautics and Space Administration</Link>
                         </Paragraph>
                         <UL>
                             <LI>Space Shuttle program</LI>
@@ -457,7 +455,7 @@ export function createTestSuite(element, stories) {
                     <Card size="xs" element={element}>
                         <Heading>Nasa</Heading>
                         <Header>
-                            <TextLink href="https://www.nasa.gov">Website</TextLink>
+                            <Link variant="secondary" href="https://www.nasa.gov">Website</Link>
                         </Header>
                         <Content>The National Aeronautics and Space Administration</Content>
                         <ButtonGroup>
@@ -471,7 +469,7 @@ export function createTestSuite(element, stories) {
                         </Illustration>
                         <Heading>Nasa</Heading>
                         <Header>
-                            <TextLink href="https://www.nasa.gov">Website</TextLink>
+                            <Link variant="secondary" href="https://www.nasa.gov">Website</Link>
                         </Header>
                         <Content>The National Aeronautics and Space Administration</Content>
                         <ButtonGroup>
@@ -485,7 +483,7 @@ export function createTestSuite(element, stories) {
                         </Illustration>
                         <Heading>Nasa</Heading>
                         <Header>
-                            <TextLink href="https://www.nasa.gov">Website</TextLink>
+                            <Link variant="secondary" href="https://www.nasa.gov">Website</Link>
                         </Header>
                         <Content>The National Aeronautics and Space Administration</Content>
                         <ButtonGroup>
@@ -501,7 +499,7 @@ export function createTestSuite(element, stories) {
                         </Illustration>
                         <Heading>Nasa</Heading>
                         <Header>
-                            <TextLink href="https://www.nasa.gov">Website</TextLink>
+                            <Link variant="secondary" href="https://www.nasa.gov">Website</Link>
                         </Header>
                         <Content>The National Aeronautics and Space Administration</Content>
                         <ButtonGroup>
@@ -515,7 +513,7 @@ export function createTestSuite(element, stories) {
                         </Illustration>
                         <Heading>Nasa</Heading>
                         <Header>
-                            <TextLink href="https://www.nasa.gov">Website</TextLink>
+                            <Link variant="secondary" href="https://www.nasa.gov">Website</Link>
                         </Header>
                         <Content>The National Aeronautics and Space Administration</Content>
                         <ButtonGroup>
@@ -533,7 +531,7 @@ export function createTestSuite(element, stories) {
                 </Illustration>
                 <Heading>Nasa</Heading>
                 <Header>
-                    <TextLink href="https://www.nasa.gov">Website</TextLink>
+                    <Link variant="secondary" href="https://www.nasa.gov">Website</Link>
                 </Header>
                 <Content>The National Aeronautics and Space Administration</Content>
                 <ButtonGroup>

diff --git a/packages/components/src/checkbox/tests/chromatic/Checkbox-hopper.chroma.jsx b/packages/components/src/checkbox/tests/chromatic/Checkbox-hopper.chroma.jsx
@@ -1,6 +1,6 @@
 import { Checkbox } from "@components/checkbox";
 import { Inline } from "@components/layout";
-import { createCheckboxTestSuite } from "./createCheckboxTestSuite-hopper";
+import { createCheckboxTestSuite } from "./createCheckboxTestSuite";
 import { paramsBuilder, storiesOfBuilder } from "@stories/utils";
 
 function stories(segment) {

diff --git a/packages/components/src/checkbox/tests/chromatic/createCheckboxTestSuite-hopper.jsx b/packages/components/src/checkbox/tests/chromatic/createCheckboxTestSuite-hopper.jsx
@@ -1,9 +1,8 @@
 import { Counter } from "@components/counter";
 import { Div } from "@components/html";
-import { IconList } from "@components/icons";
+import { Inline, Stack } from "@components/layout";
 import { MailIcon, InfoIcon, WarningIcon } from "@hopper-ui/icons";
-import { Flex, Inline, Stack } from "@components/layout";
-import { Text } from "@components/typography";
+import { Flex, Text, IconList } from "@hopper-ui/components";
 import { cloneElement } from "react";
 
 function Checkbox({ element, ...rest }) {

diff --git a/packages/components/src/dialog/src/Dialog.tsx b/packages/components/src/dialog/src/Dialog.tsx
@@ -30,6 +30,7 @@ import { CrossButton } from "../../button";
 import { Div } from "../../html";
 import { Text } from "../../typography";
 import { useDialogTriggerContext } from "./DialogTriggerContext";
+import { ButtonGroupContext, HeadingContext } from "@hopper-ui/components";
 
 export type AbstractDialogProps<T extends ElementType> = InternalProps & InteractionProps & Omit<StyledComponentProps<T>, "role" | "zIndex"> & {
     /**
@@ -281,7 +282,9 @@ export function InnerDialog({
 
     const headerSectionMarkup = (!isNil(heading) || !isNil(headerMarkup)) && (
         <Div className="o-ui-dialog-header-section">
-            {heading}
+            <HeadingContext.Provider value={{ level: 3 }}>
+                {heading}
+            </HeadingContext.Provider>
             {headerMarkup}
         </Div>
     );
@@ -290,7 +293,9 @@ export function InnerDialog({
         <Div className="o-ui-dialog-footer-section">
             {footerMarkup}
             {button}
-            {buttonGroup}
+            <ButtonGroupContext.Provider value={{ align: "end" }}>
+                {buttonGroup}
+            </ButtonGroupContext.Provider>
         </Div>
     );