diff --git a/.changeset/config.json b/.changeset/config.json index 4e32fa64c..3d12c5312 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -3,7 +3,7 @@ "changelog": "@changesets/cli/changelog", "commit": false, "fixed": [], - "linked": [["@sharegate/orbit-ui", "@orbit-ui/components"]], + "linked": [["@workleap/orbiter-ui", "@orbit-ui/transition-components"]], "access": "public", "baseBranch": "master", "updateInternalDependencies": "patch", diff --git a/.changeset/quick-bottles-chew.md b/.changeset/quick-bottles-chew.md deleted file mode 100644 index 9200ab8f6..000000000 --- a/.changeset/quick-bottles-chew.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@orbit-ui/eslint-plugin": major ---- - -Initial release of the orbit-ui eslint plugin diff --git a/.eslintrc.js b/.eslintrc.js index 29db7ca1f..400bf4db2 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -47,7 +47,7 @@ module.exports = { files: ["*.ts", "*.tsx"], rules: { "react/no-unused-prop-types": "off", // Issue with typescript - "@typescript-eslint/no-explicit-any": "off", // we use any a lot in orbit + "@typescript-eslint/no-explicit-any": "off", // we use any a lot in orbiter "@typescript-eslint/ban-ts-comment": "off" } }, diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 206220a7d..2b076cdbc 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -4,13 +4,13 @@ We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. Before submitting your pull request, please: - - 1. Read our contributing documentation: https://github.com/gsoft-inc/sg-orbit/blob/master/CONTRIBUTING.md + + 1. Read our contributing documentation: https://github.com/gsoft-inc/wl-orbiter/blob/master/CONTRIBUTING.md 2. Ensure there are no linting or TypeScript errors: `yarn lint` 3. Verify that tests pass: `yarn jest` --> -Issue: +Issue: ## Summary diff --git a/.storybook/components/github-link/getGithubUrl.ts b/.storybook/components/github-link/getGithubUrl.ts index d7a794cdf..d6dbe1db2 100644 --- a/.storybook/components/github-link/getGithubUrl.ts +++ b/.storybook/components/github-link/getGithubUrl.ts @@ -1,4 +1,4 @@ -const GITHUB_REPOSITORY_URL = "https://github.com/gsoft-inc/sg-orbit/tree/master"; +const GITHUB_REPOSITORY_URL = "https://github.com/gsoft-inc/wl-orbiter/tree/master"; export function getGithubUrl(relativePath: string) { return `${GITHUB_REPOSITORY_URL}${relativePath.startsWith("/") ? relativePath : `/${relativePath}`}`; diff --git a/.storybook/components/preview/scopes.ts b/.storybook/components/preview/scopes.ts index d0d6e7bbb..6e4d17eb6 100644 --- a/.storybook/components/preview/scopes.ts +++ b/.storybook/components/preview/scopes.ts @@ -1,5 +1,4 @@ -import * as OrbitComponents from "@components"; -import * as ExperimentalOrbitComponents from "@experimental"; +import * as OrbiterComponents from "@components"; import { CheckeredBackground } from "@stories/components"; import { forwardRef, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react"; import { useFormik } from "formik"; @@ -29,9 +28,8 @@ const ThirdParties = { }; export const KnownScope = { - ...OrbitComponents, + ...OrbiterComponents, ...React, ...DocsComponents, - ...ThirdParties, - ...ExperimentalOrbitComponents + ...ThirdParties }; diff --git a/.storybook/main.js b/.storybook/main.js index c6417c7c4..f7c98a9c6 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -10,8 +10,7 @@ if (includeDocs) { // TODO simplify imports for any pkgs /docs/**/*.stories.mdx "../docs/**/*.stories.mdx", "../packages/icons/docs/**/*.stories.mdx", - "../packages/components/src/**/docs/**/*.stories.mdx", - "../packages/experimental/src/**/docs/**/*.stories.mdx" + "../packages/components/src/**/docs/**/*.stories.mdx" ]; } @@ -20,9 +19,7 @@ if (includeChromatic) { ...stories, // TODO remove chroma and simplify imports "../packages/components/**/tests/chromatic/**/*.chroma.jsx", - "../packages/components/**/tests/chromatic/**/*.stories.tsx", - "../packages/experimental/**/tests/chromatic/**/*.chroma.tsx", - "../packages/experimental/**/tests/chromatic/**/*.stories.tsx" + "../packages/components/**/tests/chromatic/**/*.stories.tsx" ]; } diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html index 7750ac62c..01c029333 100644 --- a/.storybook/manager-head.html +++ b/.storybook/manager-head.html @@ -1,2 +1,2 @@ - - + + diff --git a/.storybook/preview.js b/.storybook/preview.js index 2793015cc..afd75fa29 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,6 +1,5 @@ import "@css/normalize.css"; import "@components/index.css"; -import "@experimental/index.css"; import "./styles"; import { ShareGateTheme, createThemeVars } from "@components/styling"; @@ -38,7 +37,6 @@ export const parameters = { ], "Layout", "Components", - "Experimental", "Content", "Placeholders", "Html elements", diff --git a/.storybook/styles/docs.css b/.storybook/styles/docs.css index e49a67e6f..b55aafa2b 100644 --- a/.storybook/styles/docs.css +++ b/.storybook/styles/docs.css @@ -1,6 +1,6 @@ :root { /* Use this var only when the element is not affected by the font-family specified in Storybook docs theme */ - --orbit-font-family: "TT Interphases Variable", Arial, Helvetica, sans-serif; + --orbiter-font-family: "TT Interphases Variable", Arial, Helvetica, sans-serif; } /* LAYOUT */ @@ -96,7 +96,7 @@ .docblock-argstable-body button { color: var(--o-ui-accent-6) !important; - font-family: var(--orbit-font-family) !important; + font-family: var(--orbiter-font-family) !important; font-size: var(--o-ui-fs-2) !important; padding-left: 2px !important; } diff --git a/.storybook/styles/themes.js b/.storybook/styles/themes.js index 736cbefd9..1aa7e9d82 100644 --- a/.storybook/styles/themes.js +++ b/.storybook/styles/themes.js @@ -3,9 +3,9 @@ import { create } from "@storybook/theming"; export const Themes = { manager: create({ base: "light", - brandTitle: "ShareGate Orbit", + brandTitle: "ShareGate Orbiter", brandUrl: "https://sharegate.com", - brandImage: "https://raw.githubusercontent.com/gsoft-inc/sg-orbit/master/assets/orbit-full.svg?sanitize=true" + brandImage: "https://raw.githubusercontent.com/gsoft-inc/wl-orbiter/master/assets/orbiter-full.svg?sanitize=true" }), docs: create({ base: "light", diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 1f1119f7d..71e4f8fab 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -10,9 +10,8 @@ function addWebpackAliases(config) { "@root": path.resolve(__dirname, ".."), "@css": path.resolve(__dirname, "../packages/css/src"), "@components": path.resolve(__dirname, "../packages/components/src"), - "@orbit-ui/components": path.resolve(__dirname, "../packages/components/src"), - "@sharegate/orbit-ui": path.resolve(__dirname, "../packages/bundle/src"), - "@experimental": path.resolve(__dirname, "../packages/experimental/src"), + "@orbit-ui/transition-components": path.resolve(__dirname, "../packages/components/src"), + "@workleap/orbiter-ui": path.resolve(__dirname, "../packages/bundle/src"), "@stories/components": path.resolve(__dirname, "./components"), "@stories/mdx": path.resolve(__dirname, "./mdx"), "@stories/utils": path.resolve(__dirname, "./utils") diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 9a77bb5cd..78b368424 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -17,7 +17,7 @@ The following documentation is only for the maintainers of this repository. ## Monorepo setup -This repository is managed as a monorepo that is composed of many npm packages. +This repository is managed as a monorepo that is composed of many npm packages. For more information on monorepo: @@ -27,7 +27,7 @@ For more information on monorepo: ### Lerna -[Lerna](https://github.com/lerna/lerna) is used to manage this monorepo. The packages of the monorepo can be found in the [packages](/packages) directory. +[Lerna](https://github.com/lerna/lerna) is used to manage this monorepo. The packages of the monorepo can be found in the [packages](/packages) directory. Since Yarn workspace feature offer native mono-repo capabilities and a seemless integration with Lerna this is our goto package manager for this project. @@ -35,7 +35,7 @@ When Lerna is configured to use Yarn, the installation of the npm dependencies a So why do we use Lerna if Yarn workspace take care of everything? -Lerna workflow greatly facilitate the release of the packages of a monorepo. +Lerna workflow greatly facilitate the release of the packages of a monorepo. For more information, read the following Lerna commands documentation: @@ -58,7 +58,7 @@ This project use Yarn workspace. Therefore, you must install Yarn: ``` choco install yarn -``` +``` For more options to install Yarn, view https://yarnpkg.com/lang/en/docs/install/#windows-stable. @@ -78,7 +78,7 @@ The following documentation is a brief overview of the tools and processes invol ### Adding or modifying an icon -When adding a new icon in @orbit-ui/icons, you want to make sure that the @orbit-ui/components package is updated accordingly. You will need to generate +When adding a new icon in @orbit-ui/transition-icons, you want to make sure that the @orbit-ui/transition-components package is updated accordingly. You will need to generate a new react component for that icon using the `yarn generate-icons-components` command. ### Storybook @@ -117,10 +117,10 @@ Any updates to the packages or Storybook's stories will automatically re-compile When you are ready to release the packages, you must follow the following steps: 1. Run `yarn new-version` to bump the version of the packages that have been updated since the previous release. You will be prompted to select the type of release (major, minor or patch) for each package and to enter release notes. If you prefer writing the release notes in a text editor, enter a placeholder line in the command line, and the you can modify the file generated before committing it. -2. Commit the newly generated file in your branch and submit a new Pull Request(PR). Changesets will automatically detect the changes and post a message in your pull request telling you that once the PR closes, the versions will be released. +2. Commit the newly generated file in your branch and submit a new Pull Request(PR). Changesets will automatically detect the changes and post a message in your pull request telling you that once the PR closes, the versions will be released. 3. Merge the Pull request into master. A Github action will automatically trigger and update the version of the packages and publish them to npm. 4. Create a new Github release associated to the tag created previously -5. Optionally deploy Storybook and the document Website +5. Optionally deploy Storybook and the document Website ### Alpha release @@ -162,9 +162,9 @@ By default, packages compilation output will be in their respective *dist* direc ## Release docs -Orbit documentation is host on Netlify. 2 sites are available, a currated site for the official documentation (https://orbit.sharegate.design) and a raw site containing every Storybook stories (https://sg-storybook.netlify.com). +Orbiter documentation is host on Netlify. 2 sites are available, a currated site for the official documentation (https://wl-orbiter-website.netlify.app/) and a raw site containing every Storybook stories (https://sg-storybook.netlify.com). -Login to [Netlify](https://app.netlify.com) and make sure you have access to the **sg-orbit** and **sg-storybook** sites of the GSoft team. +Login to [Netlify](https://app.netlify.com) and make sure you have access to the **sg-orbiter** and **sg-storybook** sites of the GSoft team. Netlify is configured to automatically deploy (unpublished) both sites everytime **a new commit is done in an opened PR** or **a PR is merged back into master**. @@ -238,11 +238,11 @@ yarn reset If you encounter the following error: ```bash -C:\Dev\20_gsoft\sg-orbit\node_modules\rimraf\bin.js:47 +C:\Dev\20_gsoft\sg-orbiter\node_modules\rimraf\bin.js:47 throw er ^ -[Error: EPERM: operation not permitted, unlink 'XXX\sg-orbit\node_modules\@types'] { +[Error: EPERM: operation not permitted, unlink 'XXX\sg-orbiter\node_modules\@types'] { ``` Close & re-open VSCode and delete manually the *node_modules* folder at the root of the workspace. @@ -297,11 +297,11 @@ Visual testing assert on what visually appears on the screen instead of assertin This is a more *black box* and *robust* testing approach since it shouldn't requires to modify the tests if the code refactor haven't change anything visually. -This approach is usually strictly use to assert that the visual of a component do not regress. Since it's easy and very efficient to write a robust test with this approach, we also use it to test the specifications of a component that are related to the behaviors and states. +This approach is usually strictly use to assert that the visual of a component do not regress. Since it's easy and very efficient to write a robust test with this approach, we also use it to test the specifications of a component that are related to the behaviors and states. Therefore, prefer this approach to [interactions](#interaction-testing) and [api testing](#api-testing) when possible. -Setting all the tools to perform automated visual tests involve a lot of time and knowledge. Therefore, we bought a license of [Chromatic QA](https://www.chromaticqa.com). This is the perfect tool for us since it perfectly integrate with Storybook. +Setting all the tools to perform automated visual tests involve a lot of time and knowledge. Therefore, we bought a license of [Chromatic QA](https://www.chromaticqa.com). This is the perfect tool for us since it perfectly integrate with Storybook. For access to our Chromatic QA environment, ask to join the [gsoft-inc](https://github.com/gsoft-inc) organization on Github. @@ -532,7 +532,7 @@ For more information on the topic view the issue [https://github.com/testing-lib ### Netlify CI setup -To enable deploy previews on PR, Netlify sg-orbit and sg-storybook sites have been linked to the sg-orbit Github repository. Netlify will deploy a preview on every commits for any branches, even for master (which is Netlify production). This beging said, since the sites have been configured with "Auto Publish" disabled, even if a deploy is compiled for production IT IS NOT DEPLOY, it's only available for preview and must be deployed manually. +To enable deploy previews on PR, Netlify sg-orbiter and sg-storybook sites have been linked to the sg-orbiter Github repository. Netlify will deploy a preview on every commits for any branches, even for master (which is Netlify production). This beging said, since the sites have been configured with "Auto Publish" disabled, even if a deploy is compiled for production IT IS NOT DEPLOY, it's only available for preview and must be deployed manually. Having disabled "Auto Publish" is also the reason why our script that publish our sites to production "doesn't work anymore". It still works, the reason why the site doesn't update is because the script will create a new production build but WILL NOT PUBLISH IT, since it's auto publishing is disabled. It must be published manually throught Netlify web interface. @@ -542,15 +542,15 @@ The Storybook props tables somewhow doesn't play well if our types comes from an ### Updating Jest Snapshots -It's straightforward to spot when a snapshot test fails after a bug has been introduced. When that happens, go ahead and fix the issue and make sure your snapshot tests are passing again. +It's straightforward to spot when a snapshot test fails after a bug has been introduced. When that happens, go ahead and fix the issue and make sure your snapshot tests are passing again. -You can run the command +You can run the command ```bash yarn jest --updateSnapshot -u FILENAME ``` -So if you want to update the useStyledSystem.test.tsx file +So if you want to update the useStyledSystem.test.tsx file ```bash yarn jest --updateSnapshot -u useStyledSystem.test.tsx diff --git a/PACKAGES_UPDATE.md b/PACKAGES_UPDATE.md index d7acb916b..64a673e19 100644 --- a/PACKAGES_UPDATE.md +++ b/PACKAGES_UPDATE.md @@ -15,7 +15,7 @@ In a terminal, use the followings commands Cannot update `eslint` to version 8. We get the following error when opening an MDX file. -[Error - 4:06:53 PM] Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/rules/no-unused-expressions' is not defined by "exports" in C:\Dev\gsoft\sg-orbit\node_modules\eslint\package.json +[Error - 4:06:53 PM] Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/rules/no-unused-expressions' is not defined by "exports" in C:\Dev\gsoft\sg-orbiter\node_modules\eslint\package.json at throwExportsNotFound (internal/modules/esm/resolve.js:290:9) at packageExportsResolve (internal/modules/esm/resolve.js:513:3) at resolveExports (internal/modules/cjs/loader.js:439:36) @@ -25,7 +25,7 @@ Cannot update `eslint` to version 8. We get the following error when opening an at Function.f._load (electron/js2c/asar_bundle.js:5:12913) at Module.require (internal/modules/cjs/loader.js:1006:19) at require (internal/modules/cjs/helpers.js:88:18) - at Object. (C:\Dev\gsoft\sg-orbit\node_modules\eslint-plugin-mdx\lib\rules\no-unused-expressions.js:7:57) + at Object. (C:\Dev\gsoft\sg-orbiter\node_modules\eslint-plugin-mdx\lib\rules\no-unused-expressions.js:7:57) ## Meow & Chalk @@ -34,7 +34,7 @@ Cannot update `charlk` to version 5. FYI: I think this problem is solvable on our side and should be investigated. -Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Dev\gsoft\sg-orbit\node_modules\meow\index.js +Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Dev\gsoft\sg-orbiter\node_modules\meow\index.js require() of ES modules is not supported. -require() of C:\Dev\gsoft\sg-orbit\node_modules\meow\index.js from C:\Dev\gsoft\sg-orbit\scripts\copy-root-license.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. -Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Dev\gsoft\sg-orbit\node_modules\meow\package.json. +require() of C:\Dev\gsoft\sg-orbiter\node_modules\meow\index.js from C:\Dev\gsoft\sg-orbiter\scripts\copy-root-license.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. +Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Dev\gsoft\sg-orbiter\node_modules\meow\package.json. diff --git a/README.md b/README.md index 6ab5d1e26..12cfcc1a1 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,36 @@

- ShareGate Orbit + ShareGate Orbiter

- Orbit, the design system for ShareGate. + Orbiter, the design system for ShareGate.

- build + build

lerna yarn - +

-Orbit is a design system developed by ShareGate to help create the best experience for our customers and drive consistency between all our web apps. +Orbiter is a design system developed by ShareGate to help create the best experience for our customers and drive consistency between all our web apps. ## Documentation website -[![Netlify Status](https://api.netlify.com/api/v1/badges/65b52a34-8224-4783-bed2-64ffd05d36af/deploy-status)](https://app.netlify.com/sites/sg-orbit/deploys) +[![Netlify Status](https://api.netlify.com/api/v1/badges/65b52a34-8224-4783-bed2-64ffd05d36af/deploy-status)](https://app.netlify.com/sites/sg-orbiter/deploys) -The documentation website contains information about installation, the Orbit foundation and Orbit components. +The documentation website contains information about installation, the Orbiter foundation and Orbiter components. -https://orbit.sharegate.design +https://wl-orbiter-website.netlify.app/ ## Storybook website [![Netlify Status](https://api.netlify.com/api/v1/badges/4b420380-aed1-4dc6-b002-6efe7b413025/deploy-status)](https://app.netlify.com/sites/sg-storybook/deploys) -The storybook website contains stories for Orbit custom components. +The storybook website contains stories for Orbiter custom components. https://sg-storybook.netlify.com diff --git a/assets/orbit-full.svg b/assets/orbit-full.svg deleted file mode 100644 index 5cbb3aa4e..000000000 --- a/assets/orbit-full.svg +++ /dev/null @@ -1,40 +0,0 @@ - - - - - - - - - - - - - diff --git a/assets/orbiter-full.svg b/assets/orbiter-full.svg new file mode 100644 index 000000000..4fce30b3f --- /dev/null +++ b/assets/orbiter-full.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/orbit-square.svg b/assets/orbiter-square.svg similarity index 100% rename from assets/orbit-square.svg rename to assets/orbiter-square.svg diff --git a/docs/features/As.stories.mdx b/docs/features/As.stories.mdx index f8a7c805d..41997c5c8 100644 --- a/docs/features/As.stories.mdx +++ b/docs/features/As.stories.mdx @@ -7,14 +7,14 @@ import { Meta } from "@storybook/addon-docs"; # As function -This function allow you to change the *underlying element type* of a component or integrate Orbit with an external library like [React router](https://reactrouter.com/). +This function allow you to change the *underlying element type* of a component or integrate Orbiter with an external library like [React router](https://reactrouter.com/). ## Usage To specify a new underlying type: ```jsx -import { as, TextLink } from "@sharegate/orbit-ui"; +import { as, TextLink } from "@workleap/orbiter-ui"; const TextLinkAsButton = as(TextLink, "button"); @@ -24,7 +24,7 @@ const TextLinkAsButton = as(TextLink, "button"); To integrate with a third party: ```jsx -import { as, TextLink } from "@sharegate/orbit-ui"; +import { as, TextLink } from "@workleap/orbiter-ui"; import { Link as ReactRouterLink } from "react-router-dom"; const RouterTextLink = as(TextLink, ReactRouterLink, { normalizeStyles: true }); @@ -34,7 +34,7 @@ const RouterTextLink = as(TextLink, ReactRouterLink, { normalizeStyles: true }); ## How it works -Previously, all Orbit components were accepting an as prop. Since we introduced TypeScript, the `as` prop has proven to be difficult. Dynamic typings based on a prop value is not Typescript forte. +Previously, all Orbiter components were accepting an as prop. Since we introduced TypeScript, the `as` prop has proven to be difficult. Dynamic typings based on a prop value is not Typescript forte. To mitigate the problem, we choose to deprecate the `as` prop in favor of an `as(baseComponent, asComponent)` function. The `as()` function return a new component which render the provided `baseComponent` with `asComponent` as the underlying type and merge the typings of both components. diff --git a/docs/features/ResponsiveStyles.stories.mdx b/docs/features/ResponsiveStyles.stories.mdx index 2dcc02547..28a14d89e 100644 --- a/docs/features/ResponsiveStyles.stories.mdx +++ b/docs/features/ResponsiveStyles.stories.mdx @@ -9,7 +9,7 @@ import { Preview } from "@stories/components"; # Responsive styles -Orbit [style props](?path=/docs/style-props--page) accepts a specialized syntax to support responsive breakpoints. +Orbiter [style props](?path=/docs/style-props--page) accepts a specialized syntax to support responsive breakpoints. ## Usage @@ -33,17 +33,17 @@ Not all breakpoints must be explicitly defined. In the following example, `base` ## useResponsiveValue -To resolve a responsive value within a React component, Orbit provides the `useResponsiveValue` hook. +To resolve a responsive value within a React component, Orbiter provides the `useResponsiveValue` hook. ```jsx -import { useResponsiveValue } from "@sharegate/orbit-ui"; +import { useResponsiveValue } from "@workleap/orbiter-ui"; const fluidValue = useResponsiveValue({ base: true, lg: false }); ``` ## Breakpoints -The following responsive breakpoints are supported by Orbit [style props](?path=/docs/style-props--page) and acts as their [CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) counterparts: +The following responsive breakpoints are supported by Orbiter [style props](?path=/docs/style-props--page) and acts as their [CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) counterparts: ` component *implicitly* fulfill the `text` slot of the button and the `` component *explicitly* fulfill the `end-icon` slot of the button. @@ -26,7 +26,7 @@ To identify which slots placeholders are available for a component, refer to the ### Implicit slots -Some of Orbit components which are considered *slotables* are defined to automatically fullfill a specific placeholder of a component when available. If a match happens, we say the fullfillment is *implicit*. +Some of Orbiter components which are considered *slotables* are defined to automatically fullfill a specific placeholder of a component when available. If a match happens, we say the fullfillment is *implicit*. For example, an `` component will implicitly fulfill the `icon` slot of a ` ``` -For native HTML elements, instead of specifying an explicit slot directly on the native element, we recommend using [Orbit HTML elements](?path=/docs/html-anchor--example). +For native HTML elements, instead of specifying an explicit slot directly on the native element, we recommend using [Orbiter HTML elements](?path=/docs/html-anchor--example). ```jsx diff --git a/docs/features/color-schemes/ColorSchemes.stories.mdx b/docs/features/color-schemes/ColorSchemes.stories.mdx index 9c78185db..68de01c39 100644 --- a/docs/features/color-schemes/ColorSchemes.stories.mdx +++ b/docs/features/color-schemes/ColorSchemes.stories.mdx @@ -8,7 +8,7 @@ import { Preview } from "@stories/components"; # Color schemes -Orbit supports by default a *light* and a *dark* color scheme for all components and [tokens](?path=/story/tokens--page) where applicable. +Orbiter supports by default a *light* and a *dark* color scheme for all components and [tokens](?path=/story/tokens--page) where applicable. ## Apply a color scheme @@ -32,7 +32,7 @@ or be selected according to the [user's operating system setting](https://develo ## Changing the color scheme -To manage the color scheme in your application, Orbit exposes a `ColorSchemeContext` and a `useColorSchemeValue` hook. +To manage the color scheme in your application, Orbiter exposes a `ColorSchemeContext` and a `useColorSchemeValue` hook. ### Context @@ -42,12 +42,12 @@ The `ColorSchemeContext` of the closest [theme provider](?path=/story/theme-prov ## useColorSchemeValue -Some features requires the usage of custom colors. Those colors aren't like Orbit [tokens](?path=/story/tokens--page) and will not support color schemes out of the box. +Some features requires the usage of custom colors. Those colors aren't like Orbiter [tokens](?path=/story/tokens--page) and will not support color schemes out of the box. -To help with that, Orbit offer the `useColorSchemeValue` hook which will return the value matching the current color scheme of the closest [theme provider](?path=/story/theme-provider--default-story). +To help with that, Orbiter offer the `useColorSchemeValue` hook which will return the value matching the current color scheme of the closest [theme provider](?path=/story/theme-provider--default-story). ```jsx -import { useColorSchemeValue } from "@sharegate/orbit-ui"; +import { useColorSchemeValue } from "@workleap/orbiter-ui"; const color = useColorSchemeValue("#fff", "#000"); const backgroundColor = useColorSchemeValue("#ff9048", "#fee2bb"); diff --git a/docs/features/style-props/StyleProps.stories.mdx b/docs/features/style-props/StyleProps.stories.mdx index 7d434ed2c..a32545e32 100644 --- a/docs/features/style-props/StyleProps.stories.mdx +++ b/docs/features/style-props/StyleProps.stories.mdx @@ -12,11 +12,11 @@ import { PropsReferenceTable } from "./PropsReferenceTable"; # Style props -An Orbit style property is a mapping of a [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference) to a component property. With style props, Orbit styled system let you easily set style values for a [curated set of CSS properties](#properties) like [font-size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size), [margin](https://developer.mozilla.org/en-US/docs/Web/CSS/margin), [padding](https://developer.mozilla.org/en-US/docs/Web/CSS/padding), [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width) and many more. +An Orbiter style property is a mapping of a [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference) to a component property. With style props, Orbiter styled system let you easily set style values for a [curated set of CSS properties](#properties) like [font-size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size), [margin](https://developer.mozilla.org/en-US/docs/Web/CSS/margin), [padding](https://developer.mozilla.org/en-US/docs/Web/CSS/padding), [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width) and many more. ## Usage -To apply a style value, set a value to any [style property](#properties) of an Orbit component. +To apply a style value, set a value to any [style property](#properties) of an Orbiter component. ```jsx
@@ -62,7 +62,7 @@ To help achieve a consistent user interface, Orbit style props are based on scal Style props doesn't support every CSS pseudo-classes. [Location pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#location_pseudo-classes), [input pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#the_input_pseudo-classes), [tree-structural pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#tree-structural_pseudo-classes), `::before` and `::after` are not supported and will most likely never be. -When a CSS pseudo-class is not supported by Orbit style props, we recommend using a CSS class. +When a CSS pseudo-class is not supported by Orbiter style props, we recommend using a CSS class. Since the following user action pseudo-classes are often used, some style props supports them. These behaves like their pseudo CSS counterparts. @@ -91,9 +91,9 @@ Since the following user action pseudo-classes are often used, some style props ## HTML elements -You might wonder how will you use Orbit style props on your HTML elements? +You might wonder how will you use Orbiter style props on your HTML elements? -Orbit provides a set of HTML elements components already configured with Orbit styled system. You should chose these components over native HTML elements. +Orbiter provides a set of HTML elements components already configured with Orbiter styled system. You should chose these components over native HTML elements. [``](?path=/docs/html-anchor--example), [`
`](?path=/docs/html-address--example), [`
`](?path=/docs/html-article--page), [`
`](?path=/docs/html-table--example) @@ -101,7 +101,7 @@ For text elements, prefer a [``](?path=/docs/text--size) or [`` ## Layout containers -To facilitate layouts, Orbit provides specialized components for [grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids) and [flex](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container) layout containers. +To facilitate layouts, Orbiter provides specialized components for [grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids) and [flex](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container) layout containers. When applicable, always prefer using a [``](?path=/docs/grid--areas) or [``](?path=/docs/flex--horizontal) component instead of a [`
`](?path=/docs/html-div--example) component. @@ -116,12 +116,12 @@ When applicable, always prefer using a [``](?path=/docs/grid--areas) or [` ## Custom components -Any component can accept style properties. To accept style properties, the component interface must extends the `StyledComponentProps` interface and either forward all the style props to an Orbit components or call the `useStyledSystem` hook. +Any component can accept style properties. To accept style properties, the component interface must extends the `StyledComponentProps` interface and either forward all the style props to an Orbiter components or call the `useStyledSystem` hook. -Passing the style props to an Orbit component: +Passing the style props to an Orbiter component: ```jsx -import { HtmlButton, StyledComponentProps } from "@sharegate/orbit-ui"; +import { HtmlButton, StyledComponentProps } from "@workleap/orbiter-ui"; interface CustomButtonProps extends StyledComponentProps { onClick: () => void; @@ -137,7 +137,7 @@ function CustomButton(props: CustomButtonProps) { Using the `useStyledSystem` hook: ```jsx -import { StyledComponentProps, useStyledSystem } from "@sharegate/orbit-ui"; +import { StyledComponentProps, useStyledSystem } from "@workleap/orbiter-ui"; interface CustomButtonProps extends StyledComponentProps { onClick: () => void; diff --git a/docs/features/theming/Theming.stories.mdx b/docs/features/theming/Theming.stories.mdx index 59e91d30d..d7f6f9a94 100644 --- a/docs/features/theming/Theming.stories.mdx +++ b/docs/features/theming/Theming.stories.mdx @@ -10,15 +10,15 @@ import { GithubLink } from "@stories/components"; # Theming -Orbit styled system is powered by the values of a *theme object* provided by the application. The Orbit theme object specification have been inspired by the [Styled System Theme Specification](https://styled-system.com/theme-specification). +Orbiter styled system is powered by the values of a *theme object* provided by the application. The Orbiter theme object specification have been inspired by the [Styled System Theme Specification](https://styled-system.com/theme-specification). ## Theme object A theme object is a combination of *design values* and *design scales* ([spacing](?path=/story/tokens--page#spacings), [sizing](?path=/story/tokens--page#sizings), [colors](?path=/story/tokens--page#text-colors), etc..). -Some scales are defined in Orbit as arrays for ordinal values like `space` or as plain objects for named values like `colors`. Some are even a mix of both, such as `fontSizes`. +Some scales are defined in Orbiter as arrays for ordinal values like `space` or as plain objects for named values like `colors`. Some are even a mix of both, such as `fontSizes`. -An Orbit theme object is composed of the following *8 keys*: +An Orbiter theme object is composed of the following *8 keys*: ` component with the theme object](?path=/docs/theme-provider--page) ```jsx -import { createThemeVars, ThemeProvider } from "@sharegate/orbit-ui"; +import { createThemeVars, ThemeProvider } from "@workleap/orbiter-ui"; createThemeVars([theme]); @@ -84,16 +84,16 @@ createThemeVars([theme]); ### Select a theme object -Any object can be used as an Orbit theme object as long as it extends the `OrbitTheme` TypeScript type. A few options are available. +Any object can be used as an Orbiter theme object as long as it extends the `OrbiterTheme` TypeScript type. A few options are available. #### Option 1: Define your own theme from scratch -Make sure you provide the right definition by extending the `OrbitTheme` type. +Make sure you provide the right definition by extending the `OrbiterTheme` type. ```jsx -import { OrbitTheme, createThemeVars, ThemeProvider } from "@sharegate/orbit-ui"; +import { OrbiterTheme, createThemeVars, ThemeProvider } from "@workleap/orbiter-ui"; -const SpaceTheme: OrbitTheme = { +const SpaceTheme: OrbiterTheme = { name: "space-theme", space: [], sizing: [], @@ -108,12 +108,12 @@ createThemeVars([theme]); ``` -#### Option 2: Create a new theme from Orbit defaults +#### Option 2: Create a new theme from Orbiter defaults -With `createTheme`, you only have to provide a subset of `OrbitTheme` values. The remaining values will fallback to Orbit defaults. +With `createTheme`, you only have to provide a subset of `OrbiterTheme` values. The remaining values will fallback to Orbiter defaults. ```jsx -import { createTheme, createThemeVars, ThemeProvider } from "@sharegate/orbit-ui"; +import { createTheme, createThemeVars, ThemeProvider } from "@workleap/orbiter-ui"; const SpaceTheme = createTheme({ name: "space-theme", @@ -144,12 +144,12 @@ createThemeVars([theme]); ``` -#### Option 3: Retrieve a pre-constructed theme from Orbit +#### Option 3: Retrieve a pre-constructed theme from Orbiter The only theme available at the moment is `ShareGateTheme`. ```jsx -import { ShareGateTheme, createThemeVars, ThemeProvider } from "@sharegate/orbit-ui"; +import { ShareGateTheme, createThemeVars, ThemeProvider } from "@workleap/orbiter-ui"; createThemeVars([ShareGateTheme]); @@ -160,7 +160,7 @@ createThemeVars([ShareGateTheme]); ## Use a theme object in code -Theme objects are primarily used to boostrap Orbit styled system but they can also be used directly in JavaScript code when you need to fetch a value. +Theme objects are primarily used to boostrap Orbiter styled system but they can also be used directly in JavaScript code when you need to fetch a value. If you have access to the theme object, use the object directly. @@ -173,7 +173,7 @@ If you have access to the theme object, use the object directly. If you don't have access to the theme object, retrieve a `ThemeAccessor` instance from the `ThemeContext` by using the `useThemeContext` hook and access the theme values from the instance. ```jsx -import { useThemeContext } from "sharegate/orbit-ui"; +import { useThemeContext } from "sharegate/orbiter-ui"; const { themeAccessor } = useThemeContext(); diff --git a/docs/features/tokens/Tokens.stories.mdx b/docs/features/tokens/Tokens.stories.mdx index 2907c8290..ec9780c42 100644 --- a/docs/features/tokens/Tokens.stories.mdx +++ b/docs/features/tokens/Tokens.stories.mdx @@ -12,7 +12,7 @@ import { Table } from "@stories/components"; # Tokens -Tokens are Orbit's reusable values to provide a common language between developers and designers. +Tokens are Orbiter's reusable values to provide a common language between developers and designers. ## Usage @@ -34,7 +34,7 @@ Or `CSS` variables: Those tokens are named for their use case, rather than their value. For example `alias-alert` is named to indicate the appropriate background color for an error message background, as opposed to `red-5` which is less specific and could be used in a number of ways depending on the context. -This makes their intended use clear and intentional, and allows us to develop a scalable and consistent visual language while also being the building block of Orbit's [theming](/docs/theming--page). +This makes their intended use clear and intentional, and allows us to develop a scalable and consistent visual language while also being the building block of Orbiter's [theming](/docs/theming--page). ## Values diff --git a/docs/getting-started/Installation.stories.mdx b/docs/getting-started/Installation.stories.mdx index 76b3ec154..ed9f521e5 100644 --- a/docs/getting-started/Installation.stories.mdx +++ b/docs/getting-started/Installation.stories.mdx @@ -9,49 +9,39 @@ import { Message } from "@components/message"; # Installation -Multiple [NPM packages](https://www.npmjs.com/settings/orbit-ui/packages) compose Orbit. By creating a bundle package named [@sharegate/orbit-ui](https://www.npmjs.com/package/@sharegate/orbit-ui), we simplify the installation process and allow you to install Orbit with just a single package. +Multiple [NPM packages](https://www.npmjs.com/settings/orbiter-ui/packages) compose Orbiter. By creating a bundle package named [@workleap/orbiter-ui](https://www.npmjs.com/package/@workleap/orbiter-ui), we simplify the installation process and allow you to install Orbiter with just a single package. > We assume you've already set up [react](https://www.npmjs.com/package/react) and [react-dom](https://www.npmjs.com/package/react-dom). Otherwise, you'll get a warning at installation. ## Install packages -To install Orbit, open a terminal at the root of your project workspace and run the following command: +To install Orbiter, open a terminal at the root of your project workspace and run the following command: -To install Orbit's experimental components, open a terminal at the root of your project workspace and run the following command: - - - ## Import styles -Orbit styles include the ShareGate font, a [CSS bootstrap](https://github.com/gsoft-inc/sg-orbit/tree/master/packages/css/src) and of course the component's styles. - -To import Orbit styles, add the following import declaration to your root stylesheet: - -```css -/* index.css */ - -@import "@sharegate/orbit-ui/index.css"; -``` +Orbiter styles include the ShareGate font, a [CSS bootstrap](https://github.com/gsoft-inc/wl-orbiter/tree/master/packages/css/src) and of course the component's styles. -To import Orbit experimental components styles, also add the following import declaration to your root stylesheet: +To import Orbiter styles, add the following import declaration to your root stylesheet: ```css /* index.css */ -@import "@orbit-ui/experimental/index.css"; +@import "@workleap/orbiter-ui/index.css"; ``` ## Set up your tooling environment -Orbit offer an ESLint plugin to see in-context help in your IDE. This includes accessibility pointers, deprecation notices, and other helpful tips. +Orbiter offer an ESLint plugin to see in-context help in your IDE. This includes accessibility pointers, deprecation notices, and other helpful tips. > This config is designed to complement the [suggested Workleap ESLint Configuration](https://github.com/gsoft-inc/wl-web-configs). First, add the ESlint plugin to your dependencies: - +``` +npm install @orbit-ui/eslint-plugin eslint +``` Then, add the plugin to your ESlint config. For example, your `.eslintrc.json` file may look like this: @@ -69,12 +59,12 @@ More about [ESlint configuration](https://eslint.org/docs/latest/use/configure/c ## Configure your application -Below is an example of how to configure an application with a [pre-constructed](?path=/story/theming--page#option-3-retrieve-a-pre-constructed-theme-from-orbit) ShareGate theme object: +Below is an example of how to configure an application with a [pre-constructed](?path=/story/theming--page#option-3-retrieve-a-pre-constructed-theme-from-orbiter) ShareGate theme object: ```tsx // index.ts -import { createThemeVars, ShareGateTheme, ThemeProvider } from "@sharegate/orbit-ui"; +import { createThemeVars, ShareGateTheme, ThemeProvider } from "@workleap/orbiter-ui"; import { createRoot } from "react-dom/client"; import App from "./App"; @@ -88,16 +78,16 @@ root.render( ); ``` -Instead of harcoding the foundation values in Orbit, we choose to implement a [theming system](?path=/docs/theming--page) allowing applications to supply their core values to Orbit. +Instead of harcoding the foundation values in Orbiter, we choose to implement a [theming system](?path=/docs/theming--page) allowing applications to supply their core values to Orbiter. -The theming system introduced a concept of theme object. To configure Orbit, you'll need to build your own theme object or import a [pre-constructed](?path=/story/theming--page#option-3-retrieve-a-pre-constructed-theme-from-orbit) one from Orbit. The theme object will be used to render the foundation variables with the `createThemeVars` function and define a [theme provider](?path=/docs/theme-provider--default-story) at the root of your application. +The theming system introduced a concept of theme object. To configure Orbiter, you'll need to build your own theme object or import a [pre-constructed](?path=/story/theming--page#option-3-retrieve-a-pre-constructed-theme-from-orbiter) one from Orbiter. The theme object will be used to render the foundation variables with the `createThemeVars` function and define a [theme provider](?path=/docs/theme-provider--default-story) at the root of your application. ### Start creating components -You're all set! You can start creating your application with Orbit: +You're all set! You can start creating your application with Orbiter: ```jsx -import { Div, Text } from "@sharegate/orbit-ui"; +import { Div, Text } from "@workleap/orbiter-ui"; export const App = () => (
diff --git a/docs/getting-started/Platforms.stories.mdx b/docs/getting-started/Platforms.stories.mdx index 31f7549ab..ddbc0bbcc 100644 --- a/docs/getting-started/Platforms.stories.mdx +++ b/docs/getting-started/Platforms.stories.mdx @@ -7,7 +7,7 @@ import { Meta } from "@storybook/addon-docs"; # Platforms -Orbit support the following platforms: +Orbiter support the following platforms: | Edge | Chrome | Firefox | Safari | IE | |------|--------|---------|--------|----| diff --git a/docs/materials/motion/Motion.stories.mdx b/docs/materials/motion/Motion.stories.mdx index 3bccacf5c..0be3cb42c 100644 --- a/docs/materials/motion/Motion.stories.mdx +++ b/docs/materials/motion/Motion.stories.mdx @@ -44,7 +44,7 @@ In animation declaration : ## Duration -Orbit exposes 5 [durations](?path=/docs/tokens--page#durations), they help convey a message and makes animations smooth and responsive. +Orbiter exposes 5 [durations](?path=/docs/tokens--page#durations), they help convey a message and makes animations smooth and responsive.
"], testMatch: [ - "**/tests/jest/*.test.ts?(x)", - "**/tooling/eslint-plugin/tests/*.test.ts?(x)" + "**/tests/jest/*.test.ts?(x)" ], transform: { "^.+\\.(js|jsx|ts|tsx)$": "ts-jest" diff --git a/package.json b/package.json index 3431b1f21..b0c704277 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { - "name": "sg-orbit", + "name": "sg-orbiter", "version": "0.0.0", "private": true, - "repository": "https://github.com/gsoft-inc/sg-orbit.git", + "repository": "https://github.com/gsoft-inc/wl-orbiter.git", "license": "Apache-2.0", "workspaces": { "packages": [ diff --git a/packages/bundle/CHANGELOG.md b/packages/bundle/CHANGELOG.md deleted file mode 100644 index 4e4be37a1..000000000 --- a/packages/bundle/CHANGELOG.md +++ /dev/null @@ -1,99 +0,0 @@ -# @sharegate/orbit-ui - -## 35.0.3 - -### Patch Changes - -- Updated dependencies [04c5dc562] - - @orbit-ui/components@35.0.3 - -## 35.0.2 - -### Patch Changes - -- Updated dependencies [1fddfa29b] - - @orbit-ui/icons@12.2.1 - - @orbit-ui/components@35.0.2 - -## 35.0.1 - -### Patch Changes - -- Updated dependencies [cbe03ecf7] - - @orbit-ui/components@35.0.1 - -## 35.0.0 - -### Patch Changes - -- Updated dependencies [5974212e2] - - @orbit-ui/components@35.0.0 - -## 34.3.4 - -### Patch Changes - -- Updated dependencies [803079228] - - @orbit-ui/components@34.3.4 - -## 34.3.3 - -### Patch Changes - -- Updated dependencies [8fccf96aa] - - @orbit-ui/components@34.3.3 - -## 34.3.2 - -### Patch Changes - -- Updated dependencies [c290582df] - - @orbit-ui/components@34.3.2 - -## 34.3.1 - -### Patch Changes - -- Updated dependencies [55f97fea4] - - @orbit-ui/components@34.3.1 - -## 34.3.0 - -### Patch Changes - -- Updated dependencies [88b295212] - - @orbit-ui/components@34.3.0 - -## 34.2.0 - -### Patch Changes - -- Updated dependencies [2b0f7ec46] - - @orbit-ui/components@34.2.0 - -## 34.1.2 - -### Patch Changes - -- Updated dependencies [b1d6039e9] - - @orbit-ui/components@14.3.0 - - @orbit-ui/icons@12.2.0 - -## 34.1.1 - -### Patch Changes - -- Updated dependencies [6be00c049] - - @orbit-ui/components@14.2.0 - -## 34.1.0 - -### Minor Changes - -- 0871c2544: fix for Tilde "~" imports in CSS not valid in all CSS pre-processors - -### Patch Changes - -- Updated dependencies [0871c2544] - - @orbit-ui/components@14.1.0 - - @orbit-ui/icons@12.1.1 diff --git a/packages/bundle/README.md b/packages/bundle/README.md index c2fac1701..015ebcbda 100644 --- a/packages/bundle/README.md +++ b/packages/bundle/README.md @@ -1,6 +1,6 @@ -# @sharegate/orbit-ui +# @workleap/orbiter-ui -Full documentation available at: https://orbit.sharegate.design +Full documentation available at: https://wl-orbiter-website.netlify.app/ ## License diff --git a/packages/bundle/package.json b/packages/bundle/package.json index 6cf47d6ea..2c6bc2570 100644 --- a/packages/bundle/package.json +++ b/packages/bundle/package.json @@ -1,8 +1,8 @@ { - "name": "@sharegate/orbit-ui", - "version": "35.0.3", - "description": "Orbit design system", - "repository": "https://github.com/gsoft-inc/sg-orbit.git", + "name": "@workleap/orbiter-ui", + "version": "1.0.0", + "description": "Orbiter design system", + "repository": "https://github.com/gsoft-inc/wl-orbiter.git", "author": "Groupe ShareGate inc.", "license": "Apache-2.0", "main": "dist/index.js", @@ -29,8 +29,8 @@ "react-dom": "*" }, "dependencies": { - "@orbit-ui/components": "35.0.3", - "@orbit-ui/css": "2.1.2", - "@orbit-ui/icons": "12.2.1" + "@orbit-ui/transition-components": "1.0.0", + "@orbit-ui/transition-css": "1.0.0", + "@orbit-ui/transition-icons": "1.0.0" } } diff --git a/packages/bundle/src/index.css b/packages/bundle/src/index.css index ba5dfdd02..ac43cc482 100644 --- a/packages/bundle/src/index.css +++ b/packages/bundle/src/index.css @@ -1,2 +1,2 @@ -@import "@orbit-ui/css"; -@import "@orbit-ui/components/index.css"; +@import "@orbit-ui/transition-css"; +@import "@orbit-ui/transition-components/index.css"; diff --git a/packages/bundle/src/index.ts b/packages/bundle/src/index.ts index 9a355afe8..6ddc5aad7 100644 --- a/packages/bundle/src/index.ts +++ b/packages/bundle/src/index.ts @@ -1 +1 @@ -export * from "@orbit-ui/components"; +export * from "@orbit-ui/transition-components"; diff --git a/packages/bundle/tsconfig.build.json b/packages/bundle/tsconfig.build.json index e4eb94ec4..dcfc2f346 100644 --- a/packages/bundle/tsconfig.build.json +++ b/packages/bundle/tsconfig.build.json @@ -3,7 +3,11 @@ "compilerOptions": { "composite": true, "rootDir": "./src", - "outDir": "./dist" + "outDir": "./dist", + "baseUrl": ".", + "paths": { + "@orbit-ui/transition-components": ["../components/src"], + } }, "include": [ "src/**/*", @@ -13,5 +17,5 @@ { "path": "../components/tsconfig.build.json" } - ] + ], } diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md deleted file mode 100644 index da3f08ba6..000000000 --- a/packages/components/CHANGELOG.md +++ /dev/null @@ -1,90 +0,0 @@ -# @orbit-ui/components - -## 35.0.3 - -### Patch Changes - -- 04c5dc562: Fix misaligned checkmark background when a tile has an illustration. - -## 35.0.2 - -### Patch Changes - -- Updated dependencies [1fddfa29b] - - @orbit-ui/icons@12.2.1 - -## 35.0.1 - -### Patch Changes - -- cbe03ecf7: Fix for hover/focus opacity StyledSystem utilites - -## 35.0.0 - -### Major Changes - -- 5974212e2: Modified the XL responsive viewport value - -## 34.3.4 - -### Patch Changes - -- 803079228: fix: Illustrations in a TileLink now have proper border radius - -## 34.3.3 - -### Patch Changes - -- 8fccf96aa: Fix tooltip staying open when moving the mouse quickly - -## 34.3.2 - -### Patch Changes - -- c290582df: Fix missing aria-label on IconButton's Spinner when loading is true - -## 34.3.1 - -### Patch Changes - -- 55f97fea4: fixed an issue where tabs triggers would not inherit the body font family - -## 34.3.0 - -### Minor Changes - -- 88b295212: Added Spinner and Loader components - -## 34.2.0 - -### Minor Changes - -- 2b0f7ec46: added jsdoc documentation of components - -## 14.3.0 - -### Minor Changes - -- b1d6039e9: added a new icon - -### Patch Changes - -- Updated dependencies [b1d6039e9] - - @orbit-ui/icons@12.2.0 - -## 14.2.0 - -### Minor Changes - -- 6be00c049: text inputs and textarea inherits the app font-family and font-size - -## 14.1.0 - -### Minor Changes - -- 0871c2544: fix for Tilde "~" imports in CSS not valid in all CSS pre-processors - -### Patch Changes - -- Updated dependencies [0871c2544] - - @orbit-ui/icons@12.1.1 diff --git a/packages/components/README.md b/packages/components/README.md index a5e445293..bea128e66 100644 --- a/packages/components/README.md +++ b/packages/components/README.md @@ -1,6 +1,6 @@ -# @orbit-ui/components +# @orbit-ui/transition-components -Full documentation available at: https://orbit.sharegate.design +Full documentation available at: https://wl-orbiter-website.netlify.app/ ## Add a new component @@ -61,7 +61,7 @@ The stories must be located in a `docs` folder next to the `src` folder of your #### Tests -Before reading the following sections, please read [our introduction to Orbit testing practices](../../CONTRIBUTING.md#testing). +Before reading the following sections, please read [our introduction to Orbiter testing practices](../../CONTRIBUTING.md#testing). ##### Visual testing @@ -151,15 +151,15 @@ Usually, interaction tests are split into 4 distinct regions: *Behaviors*, *Aria ## Component guidelines -Every Orbit custom components must share a consistent API and a similar design. Please read carefully the following guidelines before you develop a new component or update an existing one. +Every Orbiter custom components must share a consistent API and a similar design. Please read carefully the following guidelines before you develop a new component or update an existing one. ### Common functionnalities All components should: -- Use Orbit's [tokens](https://orbit.sharegate.design/?path=/docs/tokens--page) -- Support Orbit's [color schemes](https://orbit.sharegate.design/?path=/docs/color-schemes--page) and [theming](https://orbit.sharegate.design/?path=/docs/theming--page) -- Implement Orbit's [style props](https://orbit.sharegate.design/?path=/docs/style-props--page) -- Support Orbit's [responsive styles](https://orbit.sharegate.design/?path=/docs/responsive-styles--page) +- Use Orbiter's [tokens](https://wl-orbiter-website.netlify.app//?path=/docs/tokens--page) +- Support Orbiter's [color schemes](https://wl-orbiter-website.netlify.app//?path=/docs/color-schemes--page) and [theming](https://wl-orbiter-website.netlify.app//?path=/docs/theming--page) +- Implement Orbiter's [style props](https://wl-orbiter-website.netlify.app//?path=/docs/style-props--page) +- Support Orbiter's [responsive styles](https://wl-orbiter-website.netlify.app//?path=/docs/responsive-styles--page) ### Design @@ -173,13 +173,13 @@ All components should leverage React hooks. #### Styling -An Orbit component shouldn't use any CSS in JS properties. +An Orbiter component shouldn't use any CSS in JS properties. All styling should be done with native CSS and use our foundation CSS variables when possible #### Controlled & Auto-controlled -A component should always be develop to offer a [controlled](https://reactjs.org/docs/forms.html) and [auto-controlled](https://reactjs.org/docs/uncontrolled-components.html) usage. +A component should always be develop to offer a [controlled](https://reactjs.org/docs/forms.html) and [auto-controlled](https://reactjs.org/docs/uncontrolled-components.html) usage. A *controlled* component gives a lot of flexibility to the consumer and is well fit for a lot of use cases but also involve additional code. We believe a component should be flexible but also painless to use. That's why a component should also offer an *auto-controlled* mode for basic use cases who don't requires controlling the props. diff --git a/packages/components/package.json b/packages/components/package.json index 737276d6a..8933443bd 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,8 +1,8 @@ { - "name": "@orbit-ui/components", - "version": "35.0.3", - "description": "Orbit components", - "repository": "https://github.com/gsoft-inc/sg-orbit.git", + "name": "@orbit-ui/transition-components", + "version": "1.0.0", + "description": "Orbiter components", + "repository": "https://github.com/gsoft-inc/wl-orbiter.git", "author": "Groupe Sharegate inc.", "license": "Apache-2.0", "main": "dist/index.js", @@ -30,7 +30,7 @@ "react-dom": "^18.0.0" }, "dependencies": { - "@orbit-ui/icons": "12.2.1", + "@orbit-ui/transition-icons": "1.0.0", "@popperjs/core": "2.11.2", "react-is": "17.0.2", "text-mask-core": "5.1.2", diff --git a/packages/components/src/accordion/docs/Accordion.stories.mdx b/packages/components/src/accordion/docs/Accordion.stories.mdx index b1a898ec6..cbc213775 100644 --- a/packages/components/src/accordion/docs/Accordion.stories.mdx +++ b/packages/components/src/accordion/docs/Accordion.stories.mdx @@ -16,7 +16,7 @@ import { InnerItem, Item } from "@components/collection"; Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page. @@ -26,7 +26,7 @@ import { InnerItem, Item } from "@components/collection"; ### Accessibility - The accordion header that shows and hides the content must be an [heading element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements). -- The heading element should have a level that is appropriate for the information architecture of the page. You can choose the appropriate level by selecting one of Orbit [heading](?path=/docs/heading--default-story) accordingly. +- The heading element should have a level that is appropriate for the information architecture of the page. You can choose the appropriate level by selecting one of Orbiter [heading](?path=/docs/heading--default-story) accordingly. ## Usage @@ -195,7 +195,7 @@ The `expandedKeys` state can be handled in controlled mode. ### Accordion @@ -205,7 +205,7 @@ The `expandedKeys` state can be handled in controlled mode. ### Item @@ -214,7 +214,7 @@ The `expandedKeys` state can be handled in controlled mode. ### Content @@ -224,7 +224,7 @@ The `expandedKeys` state can be handled in controlled mode. ### AccordionHeader diff --git a/packages/components/src/accordion/src/Accordion.tsx b/packages/components/src/accordion/src/Accordion.tsx index 5fba0c6e3..16f46140f 100644 --- a/packages/components/src/accordion/src/Accordion.tsx +++ b/packages/components/src/accordion/src/Accordion.tsx @@ -163,7 +163,7 @@ InnerAccordion.defaultElement = DefaultElement; /** * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page. * - * [Documentation](https://orbit.sharegate.design/?path=/docs/accordion--default-story) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/accordion--default-story) */ export const Accordion = forwardRef>((props, ref) => ( diff --git a/packages/components/src/accordion/src/AccordionHeader.tsx b/packages/components/src/accordion/src/AccordionHeader.tsx index 8cadab710..31737b1ee 100644 --- a/packages/components/src/accordion/src/AccordionHeader.tsx +++ b/packages/components/src/accordion/src/AccordionHeader.tsx @@ -104,7 +104,7 @@ export function InnerAccordionHeader(props: InnerAccordionHeaderProps) { InnerAccordionHeader.defaultElement = DefaultElement; /** - * [Documentation](https://orbit.sharegate.design/?path=/docs/accordion--default-story) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/accordion--default-story) */ export const AccordionHeader = forwardRef>((props, ref) => ( diff --git a/packages/components/src/accordion/src/AccordionItem.tsx b/packages/components/src/accordion/src/AccordionItem.tsx index e4f89933b..598bf6b93 100644 --- a/packages/components/src/accordion/src/AccordionItem.tsx +++ b/packages/components/src/accordion/src/AccordionItem.tsx @@ -88,7 +88,7 @@ export function InnerAccordionItem({ InnerAccordionItem.defaultElement = DefaultElement; /** - * [Documentation](https://orbit.sharegate.design/?path=/docs/accordion--default-story) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/accordion--default-story) */ export const AccordionItem = forwardRef>((props, ref) => ( diff --git a/packages/components/src/accordion/src/AccordionPanel.tsx b/packages/components/src/accordion/src/AccordionPanel.tsx index 1fd8a3113..3ef54dbb3 100644 --- a/packages/components/src/accordion/src/AccordionPanel.tsx +++ b/packages/components/src/accordion/src/AccordionPanel.tsx @@ -44,7 +44,7 @@ export function InnerAccordionPanel(props: InnerAccordionPanelProps) { InnerAccordionPanel.defaultElement = DefaultElement; /** - * [Documentation](https://orbit.sharegate.design/?path=/docs/accordion--default-story) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/accordion--default-story) */ export const AccordionPanel = forwardRef>((props, ref) => ( diff --git a/packages/components/src/alert/docs/Alert.stories.mdx b/packages/components/src/alert/docs/Alert.stories.mdx index 98171059d..3d47996d3 100644 --- a/packages/components/src/alert/docs/Alert.stories.mdx +++ b/packages/components/src/alert/docs/Alert.stories.mdx @@ -15,7 +15,7 @@ import { Heading, InnerHeading } from "@components/typography"; An alert is a modal dialog that interrupts the user's workflow to communicate an important message and acquire a response. @@ -206,7 +206,7 @@ The `open` state can be handled in controlled mode. ### Alert @@ -227,7 +227,7 @@ The `open` state can be handled in controlled mode. ### Content diff --git a/packages/components/src/alert/src/Alert.tsx b/packages/components/src/alert/src/Alert.tsx index 133a4e1db..45222a6ba 100644 --- a/packages/components/src/alert/src/Alert.tsx +++ b/packages/components/src/alert/src/Alert.tsx @@ -184,7 +184,7 @@ InnerAlert.defaultElement = DefaultElement; /** * An alert is a modal dialog that interrupts the user's workflow to communicate an important message and acquire a response. * - * [Documentation](https://orbit.sharegate.design/?path=/docs/alert--default-story) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/alert--default-story) */ export const Alert = forwardRef>((props, ref) => ( diff --git a/packages/components/src/alert/src/AlertTrigger.tsx b/packages/components/src/alert/src/AlertTrigger.tsx index d7b88602b..df9d084af 100644 --- a/packages/components/src/alert/src/AlertTrigger.tsx +++ b/packages/components/src/alert/src/AlertTrigger.tsx @@ -20,7 +20,7 @@ export function InnerAlertTrigger({ InnerAlertTrigger.defaultElement = InnerDialogTrigger.defaultElement; /** - * [Documentation](https://orbit.sharegate.design/?path=/docs/alert--default-story) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/alert--default-story) */ export const AlertTrigger = forwardRef>((props, ref) => ( diff --git a/packages/components/src/autocomplete/docs/Autocomplete.stories.mdx b/packages/components/src/autocomplete/docs/Autocomplete.stories.mdx index ddadd4bec..e760913a6 100644 --- a/packages/components/src/autocomplete/docs/Autocomplete.stories.mdx +++ b/packages/components/src/autocomplete/docs/Autocomplete.stories.mdx @@ -16,7 +16,7 @@ import { Text } from "@components/typography"; An autocomplete is a normal text input enhanced by a panel of suggested options. @@ -325,7 +325,7 @@ The `selectedKey` and `open` state can be handled in controlled mode. ### Autocomplete @@ -335,7 +335,7 @@ The `selectedKey` and `open` state can be handled in controlled mode. ### Item @@ -345,7 +345,7 @@ The `selectedKey` and `open` state can be handled in controlled mode. ### Section diff --git a/packages/components/src/autocomplete/src/Autocomplete.tsx b/packages/components/src/autocomplete/src/Autocomplete.tsx index 3b0a3fb75..8e514f484 100644 --- a/packages/components/src/autocomplete/src/Autocomplete.tsx +++ b/packages/components/src/autocomplete/src/Autocomplete.tsx @@ -455,7 +455,7 @@ InnerAutocomplete.defaultElement = DefaultElement; /** * An autocomplete is a normal text input enhanced by a panel of suggested options. * - * [Documentation](https://orbit.sharegate.design/?path=/docs/autocomplete--default-story) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/autocomplete--default-story) */ export const Autocomplete = forwardRef>((props, ref) => ( diff --git a/packages/components/src/avatar/docs/Avatar.stories.mdx b/packages/components/src/avatar/docs/Avatar.stories.mdx index b20937d91..66a03a267 100644 --- a/packages/components/src/avatar/docs/Avatar.stories.mdx +++ b/packages/components/src/avatar/docs/Avatar.stories.mdx @@ -23,7 +23,7 @@ import { Inline } from "@components/layout"; An avatar is a graphical representation of a user and typically appears in list and card views, along side a user's information and/or content that they have created @@ -57,7 +57,7 @@ An avatar can accept a remote image url. If the remote image loading is *delayed - + @@ -114,7 +114,7 @@ An avatar group have a maximum of 4 slots. Once this threshold is exceeded, the ### Avatar @@ -124,7 +124,7 @@ An avatar group have a maximum of 4 slots. Once this threshold is exceeded, the ### AvatarGroup diff --git a/packages/components/src/avatar/src/Avatar.tsx b/packages/components/src/avatar/src/Avatar.tsx index e8f22d71b..f3a222257 100644 --- a/packages/components/src/avatar/src/Avatar.tsx +++ b/packages/components/src/avatar/src/Avatar.tsx @@ -212,7 +212,7 @@ InnerAvatar.defaultElement = DefaultElement; /** * An avatar is a graphical representation of a user and typically appears in list and card views, along side a user's information and/or content that they have created * - * [Documentation](https://orbit.sharegate.design/?path=/docs/avatar--default-story) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/avatar--default-story) */ export const Avatar = slot("avatar", forwardRef>((props, ref) => ( diff --git a/packages/components/src/avatar/src/AvatarGroup.tsx b/packages/components/src/avatar/src/AvatarGroup.tsx index 237aaa155..57f7a628c 100644 --- a/packages/components/src/avatar/src/AvatarGroup.tsx +++ b/packages/components/src/avatar/src/AvatarGroup.tsx @@ -125,7 +125,7 @@ export function InnerAvatarGroup({ InnerAvatarGroup.defaultElement = DefaultElement; /** - * [Documentation](https://orbit.sharegate.design/?path=/docs/avatar--default-story) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/avatar--default-story) */ export const AvatarGroup = forwardRef>((props, ref) => ( diff --git a/packages/components/src/badge/docs/Badge.stories.mdx b/packages/components/src/badge/docs/Badge.stories.mdx index 96018b998..67d6fb963 100644 --- a/packages/components/src/badge/docs/Badge.stories.mdx +++ b/packages/components/src/badge/docs/Badge.stories.mdx @@ -17,7 +17,7 @@ import { Text } from "@components/typography"; A badge is a floating component displaying a notification such as a count. @@ -130,7 +130,7 @@ A badge can overlap over elements with different shape. ### Badge diff --git a/packages/components/src/badge/src/Badge.tsx b/packages/components/src/badge/src/Badge.tsx index 2a322c28e..e77f7b308 100644 --- a/packages/components/src/badge/src/Badge.tsx +++ b/packages/components/src/badge/src/Badge.tsx @@ -86,7 +86,7 @@ InnerBadge.defaultElement = DefaultElement; /** * A badge is a floating component displaying a notification such as a count. * - * [Documentation](https://orbit.sharegate.design/?path=/docs/badge--default-story) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/badge--default-story) */ export const Badge = forwardRef>((props, ref) => ( diff --git a/packages/components/src/box/docs/Box.stories.mdx b/packages/components/src/box/docs/Box.stories.mdx index 00cd6df94..ad930b355 100644 --- a/packages/components/src/box/docs/Box.stories.mdx +++ b/packages/components/src/box/docs/Box.stories.mdx @@ -12,13 +12,13 @@ import { InnerBox } from "@components/box"; A box is a general purpose component that can be used to compose new components, use the slot system or render style props. ## Usage -> The box component is a base components extended by Orbit HTML element components. It's made available as a foundation component but shouldn't be used in mose cases. Instead, use one of Orbit HTML element components like a [div](?path=/docs/html-div--example) component. +> The box component is a base components extended by Orbiter HTML element components. It's made available as a foundation component but shouldn't be used in mose cases. Instead, use one of Orbiter HTML element components like a [div](?path=/docs/html-div--example) component. ### Default @@ -29,7 +29,7 @@ A default box. ## API diff --git a/packages/components/src/box/src/Box.tsx b/packages/components/src/box/src/Box.tsx index 5e79153a8..ec90d9e79 100644 --- a/packages/components/src/box/src/Box.tsx +++ b/packages/components/src/box/src/Box.tsx @@ -37,7 +37,7 @@ InnerBox.defaultElement = DefaultElement; /** * A box is a general purpose component that can be used to compose new components, use the slot system or render style props. * - * [Documentation](https://orbit.sharegate.design/?path=/docs/box--page) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/box--page) */ export const Box = forwardRef>((props, ref) => ( diff --git a/packages/components/src/button/docs/Button.stories.mdx b/packages/components/src/button/docs/Button.stories.mdx index f025f5bb9..29c77d5ef 100644 --- a/packages/components/src/button/docs/Button.stories.mdx +++ b/packages/components/src/button/docs/Button.stories.mdx @@ -30,7 +30,7 @@ import { Text } from "@components/typography"; A button indicates a possible user action. @@ -338,7 +338,7 @@ A toggle button can handle `checked` state in controlled mode. ### Button @@ -359,7 +359,7 @@ A toggle button can handle `checked` state in controlled mode. ### ToggleButton @@ -380,7 +380,7 @@ A toggle button can handle `checked` state in controlled mode. ### ButtonGroup @@ -390,7 +390,7 @@ A toggle button can handle `checked` state in controlled mode. ### ButtonAsLink @@ -400,7 +400,7 @@ A toggle button can handle `checked` state in controlled mode. ### IconButtonAsLink diff --git a/packages/components/src/button/docs/CrossButton.stories.mdx b/packages/components/src/button/docs/CrossButton.stories.mdx index 003518c88..a5cd2be54 100644 --- a/packages/components/src/button/docs/CrossButton.stories.mdx +++ b/packages/components/src/button/docs/CrossButton.stories.mdx @@ -13,7 +13,7 @@ import { Inline } from "@components/layout"; A button with a cross icon to handle use cases like clearing a value or closing overlay components. @@ -55,7 +55,7 @@ A cross button can vary in size. ### CrossButton diff --git a/packages/components/src/button/src/Button.tsx b/packages/components/src/button/src/Button.tsx index 724ffad8e..2370276a1 100644 --- a/packages/components/src/button/src/Button.tsx +++ b/packages/components/src/button/src/Button.tsx @@ -191,7 +191,7 @@ InnerButton.defaultElement = DefaultElement; /** * A button indicates a possible user action. * - * [Documentation](https://orbit.sharegate.design/?path=/docs/button--default-story) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/button--default-story) */ export const Button = slot("button", forwardRef>((props, ref) => ( @@ -202,7 +202,7 @@ export type ButtonProps = ComponentProps; /////////// /** - * [Documentation](https://orbit.sharegate.design/?path=/docs/button--default-story) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/button--default-story) */ export const ButtonAsLink = slot("button", as(Button, "a")); export type ButtonAsLinkProps = ComponentProps; diff --git a/packages/components/src/button/src/ButtonGroup.tsx b/packages/components/src/button/src/ButtonGroup.tsx index 7cfca8df7..5931be81c 100644 --- a/packages/components/src/button/src/ButtonGroup.tsx +++ b/packages/components/src/button/src/ButtonGroup.tsx @@ -86,7 +86,7 @@ export function InnerButtonGroup(props: InnerButtonGroupProps) { InnerButtonGroup.defaultElement = DefaultElement; /** - * [Documentation](https://orbit.sharegate.design/?path=/docs/button--default-story) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/button--default-story) */ export const ButtonGroup = slot("button-group", forwardRef>((props, ref) => ( diff --git a/packages/components/src/button/src/CrossButton.tsx b/packages/components/src/button/src/CrossButton.tsx index 4eea96902..bc3876113 100644 --- a/packages/components/src/button/src/CrossButton.tsx +++ b/packages/components/src/button/src/CrossButton.tsx @@ -23,7 +23,7 @@ InnerCrossButton.defaultElement = InnerIconButton.defaultElement; /** * A button with a cross icon to handle use cases like clearing a value or closing overlay components. * - * [Documentation](https://orbit.sharegate.design/?path=/docs/cross-button--default-story) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/cross-button--default-story) */ export const CrossButton = slot("button", forwardRef>((props, ref) => ( diff --git a/packages/components/src/button/src/IconButton.tsx b/packages/components/src/button/src/IconButton.tsx index 9994b8197..33d408d45 100644 --- a/packages/components/src/button/src/IconButton.tsx +++ b/packages/components/src/button/src/IconButton.tsx @@ -156,7 +156,7 @@ export function InnerIconButton(props: InnerIconButtonProps) { InnerIconButton.defaultElement = DefaultElement; /** - * [Documentation](https://orbit.sharegate.design/?path=/docs/button--default-story) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/button--default-story) */ export const IconButton = slot("button", forwardRef>((props, ref) => ( @@ -174,7 +174,7 @@ export const embedIconButton = createEmbeddableAdapter({ /////////// /** - * [Documentation](https://orbit.sharegate.design/?path=/docs/button--default-story) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/button--default-story) */ export const IconButtonAsLink = slot("button", as(IconButton, "a")); export type IconButtonAsLinkProps = ComponentProps; diff --git a/packages/components/src/button/src/ToggleButton.tsx b/packages/components/src/button/src/ToggleButton.tsx index b22baf004..5bdabafa1 100644 --- a/packages/components/src/button/src/ToggleButton.tsx +++ b/packages/components/src/button/src/ToggleButton.tsx @@ -83,7 +83,7 @@ export function InnerToggleButton(props: InnerToggleButtonProps) { InnerToggleButton.defaultElement = DefaultElement; /** - * [Documentation](https://orbit.sharegate.design/?path=/docs/button--default-story) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/button--default-story) */ export const ToggleButton = forwardRef>((props, ref) => ( diff --git a/packages/components/src/button/src/ToggleIconButton.tsx b/packages/components/src/button/src/ToggleIconButton.tsx index fc178c938..5643ce35e 100644 --- a/packages/components/src/button/src/ToggleIconButton.tsx +++ b/packages/components/src/button/src/ToggleIconButton.tsx @@ -85,7 +85,7 @@ export function InnerToggleIconButton(props: InnerToggleIconButtonProps) { InnerToggleIconButton.defaultElement = DefaultElement; /** - * [Documentation](https://orbit.sharegate.design/?path=/docs/button--default-story) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/button--default-story) */ export const ToggleIconButton = forwardRef>((props, ref) => ( diff --git a/packages/components/src/card/docs/Card.stories.mdx b/packages/components/src/card/docs/Card.stories.mdx index 2ca72ad42..228195737 100644 --- a/packages/components/src/card/docs/Card.stories.mdx +++ b/packages/components/src/card/docs/Card.stories.mdx @@ -21,7 +21,7 @@ import { Tabs } from "@components/tabs"; A card group information into a container to let users browse a group of related items and actions. @@ -299,7 +299,7 @@ A card can render any components like [tabs](?path=/story/tabs--default-story). ### Card @@ -320,7 +320,7 @@ A card can render any components like [tabs](?path=/story/tabs--default-story). ### Header @@ -330,7 +330,7 @@ A card can render any components like [tabs](?path=/story/tabs--default-story). ### Content diff --git a/packages/components/src/card/src/Card.tsx b/packages/components/src/card/src/Card.tsx index 5e23496cd..6c8fecf32 100644 --- a/packages/components/src/card/src/Card.tsx +++ b/packages/components/src/card/src/Card.tsx @@ -129,7 +129,7 @@ InnerCard.defaultElement = DefaultElement; /** * A card group information into a container to let users browse a group of related items and actions. * - * [Documentation](https://orbit.sharegate.design/?path=/docs/card--default-story) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/card--default-story) */ export const Card = slot("card", forwardRef>((props, ref) => ( diff --git a/packages/components/src/checkbox/docs/Checkbox.stories.mdx b/packages/components/src/checkbox/docs/Checkbox.stories.mdx index e0375df67..351246687 100644 --- a/packages/components/src/checkbox/docs/Checkbox.stories.mdx +++ b/packages/components/src/checkbox/docs/Checkbox.stories.mdx @@ -16,7 +16,7 @@ import { Text } from "@components/typography"; A checkbox allows the user to toggle between 2 or 3 (indeterminate) choices. @@ -211,7 +211,7 @@ A checkbox group can handle `value` state in controlled mode. ### Checkbox diff --git a/packages/components/src/checkbox/src/Checkbox.tsx b/packages/components/src/checkbox/src/Checkbox.tsx index 9b14451f7..8cb3615d9 100644 --- a/packages/components/src/checkbox/src/Checkbox.tsx +++ b/packages/components/src/checkbox/src/Checkbox.tsx @@ -196,7 +196,7 @@ InnerCheckbox.defaultElement = DefaultElement; /** * A checkbox allows the user to toggle between 2 or 3 (indeterminate) choices. * - * [Documentation](https://orbit.sharegate.design/?path=/docs/checkbox--default-story) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/checkbox--default-story) */ export const Checkbox = forwardRef>((props, ref) => ( diff --git a/packages/components/src/checkbox/src/CheckboxGroup.tsx b/packages/components/src/checkbox/src/CheckboxGroup.tsx index 182723421..171ced2f5 100644 --- a/packages/components/src/checkbox/src/CheckboxGroup.tsx +++ b/packages/components/src/checkbox/src/CheckboxGroup.tsx @@ -151,7 +151,7 @@ export function InnerCheckboxGroup(props: InnerCheckboxGroupProps) { InnerCheckboxGroup.defaultElement = DefaultElement; /** - * [Documentation](https://orbit.sharegate.design/?path=/docs/checkbox--default-story) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/checkbox--default-story) */ export const CheckboxGroup = forwardRef>((props, ref) => ( diff --git a/packages/components/src/counter/docs/Counter.stories.mdx b/packages/components/src/counter/docs/Counter.stories.mdx index 893bf1f53..8eaa0a2c0 100644 --- a/packages/components/src/counter/docs/Counter.stories.mdx +++ b/packages/components/src/counter/docs/Counter.stories.mdx @@ -15,7 +15,7 @@ import { Text } from "@components/typography"; A counter indicate a running tally. @@ -89,7 +89,7 @@ A counter can pushed itself away from content. ### Counter diff --git a/packages/components/src/counter/src/Counter.tsx b/packages/components/src/counter/src/Counter.tsx index ebd29dd4a..e5c8747dc 100644 --- a/packages/components/src/counter/src/Counter.tsx +++ b/packages/components/src/counter/src/Counter.tsx @@ -83,7 +83,7 @@ InnerCounter.defaultElement = DefaultElement; /** * A counter indicate a running tally. * - * [Documentation](https://orbit.sharegate.design/?path=/docs/counter--default-story) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/counter--default-story) */ export const Counter = slot("counter", forwardRef>((props, ref) => ( diff --git a/packages/components/src/date-input/docs/DateInput.stories.mdx b/packages/components/src/date-input/docs/DateInput.stories.mdx index d3397013d..340583674 100644 --- a/packages/components/src/date-input/docs/DateInput.stories.mdx +++ b/packages/components/src/date-input/docs/DateInput.stories.mdx @@ -13,7 +13,7 @@ import { subMonths, subWeeks } from "date-fns"; An input to enter a single date value. @@ -123,7 +123,7 @@ A date input `value` can be handled in controlled mode. ### DateInput diff --git a/packages/components/src/date-input/docs/DateRangeInput.stories.mdx b/packages/components/src/date-input/docs/DateRangeInput.stories.mdx index 698ca82dc..28abdb221 100644 --- a/packages/components/src/date-input/docs/DateRangeInput.stories.mdx +++ b/packages/components/src/date-input/docs/DateRangeInput.stories.mdx @@ -13,7 +13,7 @@ import { subMonths, subWeeks } from "date-fns"; An specialized input to enter a range of dates. @@ -135,7 +135,7 @@ A date range input `startDate` and `endDate` can be handled in controlled mode. ### DateRangeInput diff --git a/packages/components/src/date-input/src/DateInput.tsx b/packages/components/src/date-input/src/DateInput.tsx index 7d1288567..6c47dbdf4 100644 --- a/packages/components/src/date-input/src/DateInput.tsx +++ b/packages/components/src/date-input/src/DateInput.tsx @@ -265,7 +265,7 @@ InnerDateInput.defaultElement = DefaultElement; /** * An input to enter a single date value. * - * [Documentation](https://orbit.sharegate.design/?path=/docs/date-input--default-story) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/date-input--default-story) */ export const DateInput = forwardRef>((props, ref) => ( diff --git a/packages/components/src/date-input/src/DateRangeInput.tsx b/packages/components/src/date-input/src/DateRangeInput.tsx index 55d2f72cb..59aa84d28 100644 --- a/packages/components/src/date-input/src/DateRangeInput.tsx +++ b/packages/components/src/date-input/src/DateRangeInput.tsx @@ -557,7 +557,7 @@ InnerDateRangeInput.defaultElement = "input"; /** * An specialized input to enter a range of dates. * - * [Documentation](https://orbit.sharegate.design/?path=/docs/date-range-input--default-story) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/date-range-input--default-story) */ export const DateRangeInput = forwardRef>((props, ref) => ( diff --git a/packages/components/src/dialog/src/Dialog.tsx b/packages/components/src/dialog/src/Dialog.tsx index c93a7ae02..abaadfeec 100644 --- a/packages/components/src/dialog/src/Dialog.tsx +++ b/packages/components/src/dialog/src/Dialog.tsx @@ -197,8 +197,8 @@ export function InnerDialog({ const focusRingProps = useOverlayFocusRing({ focus }); // For convenience (well and because a popup light dismiss need a trigger ref), the other overlay components are calling their light dismiss hook in the trigger. - // A dialog is different because it could be used without Orbit trigger. For example, an app could show a dialog trigger by a Redux event. - // In this use case, we still want the app to benefit from Orbit light dismiss features, therefore we moved the light dismiss in the dialog component. + // A dialog is different because it could be used without Orbiter trigger. For example, an app could show a dialog trigger by a Redux event. + // In this use case, we still want the app to benefit from Orbiter light dismiss features, therefore we moved the light dismiss in the dialog component. const overlayDismissProps = useOverlayLightDismiss(focusScope, { hideOnEscape: dismissable, hideOnLeave: false, diff --git a/packages/components/src/disclosure/docs/Disclosure.stories.mdx b/packages/components/src/disclosure/docs/Disclosure.stories.mdx index 89e51ff64..8b0d415d9 100644 --- a/packages/components/src/disclosure/docs/Disclosure.stories.mdx +++ b/packages/components/src/disclosure/docs/Disclosure.stories.mdx @@ -16,7 +16,7 @@ import { Text } from "@components/typography"; The disclosure component is used to create regions of content that can expand/collapse with a simple animation. @@ -75,7 +75,7 @@ A disclosure component can handle `open` state in controlled mode. ### Disclosure @@ -85,7 +85,7 @@ A disclosure component can handle `open` state in controlled mode. ### Content diff --git a/packages/components/src/disclosure/docs/DisclosureArrow.stories.mdx b/packages/components/src/disclosure/docs/DisclosureArrow.stories.mdx index 117a1c779..a9c1ef835 100644 --- a/packages/components/src/disclosure/docs/DisclosureArrow.stories.mdx +++ b/packages/components/src/disclosure/docs/DisclosureArrow.stories.mdx @@ -15,7 +15,7 @@ import { Text } from "@components/typography"; A top / bottom pointing arrow to hint that activating the trigger will display additional content. @@ -48,7 +48,7 @@ A disclosure arrow can handle `open` state in controlled mode. ### DisclosureArrow diff --git a/packages/components/src/disclosure/src/Disclosure.tsx b/packages/components/src/disclosure/src/Disclosure.tsx index 2c5951fa5..aeb74ff7b 100644 --- a/packages/components/src/disclosure/src/Disclosure.tsx +++ b/packages/components/src/disclosure/src/Disclosure.tsx @@ -150,7 +150,7 @@ InnerDisclosure.defaultElement = DefaultElement; /** * The disclosure component is used to create regions of content that can expand/collapse with a simple animation. * - * [Documentation](https://orbit.sharegate.design/?path=/docs/disclosure--default-story) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/disclosure--default-story) */ export const Disclosure = forwardRef>((props, ref) => ( diff --git a/packages/components/src/disclosure/src/DisclosureArrow.tsx b/packages/components/src/disclosure/src/DisclosureArrow.tsx index 0f6603aa3..d87767cad 100644 --- a/packages/components/src/disclosure/src/DisclosureArrow.tsx +++ b/packages/components/src/disclosure/src/DisclosureArrow.tsx @@ -46,7 +46,7 @@ InnerDisclosureArrow.defaultElement = DefaultElement; /** * A top / bottom pointing arrow to hint that activating the trigger will display additional content. * - * [Documentation](https://orbit.sharegate.design/?path=/docs/disclosure-arrow--context) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/disclosure-arrow--context) */ export const DisclosureArrow = slot("icon", forwardRef>((props, ref) => ( diff --git a/packages/components/src/divider/docs/Divider.stories.mdx b/packages/components/src/divider/docs/Divider.stories.mdx index 165287f07..d686830b0 100644 --- a/packages/components/src/divider/docs/Divider.stories.mdx +++ b/packages/components/src/divider/docs/Divider.stories.mdx @@ -16,7 +16,7 @@ import { TextLink } from "@components/link"; A divider to separates and distinguishes sections of content or groups of menu items. @@ -73,7 +73,7 @@ Or vertically: ### Divider diff --git a/packages/components/src/divider/src/Divider.tsx b/packages/components/src/divider/src/Divider.tsx index 69ccda614..49f5ff126 100644 --- a/packages/components/src/divider/src/Divider.tsx +++ b/packages/components/src/divider/src/Divider.tsx @@ -58,7 +58,7 @@ InnerDivider.defaultElement = DefaultElement; /** * A divider to separates and distinguishes sections of content or groups of menu items. * - * [Documentation](https://orbit.sharegate.design/?path=/docs/divider--horizontal) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/divider--horizontal) */ export const Divider = forwardRef>((props, ref) => ( diff --git a/packages/components/src/dot/docs/Dot.stories.mdx b/packages/components/src/dot/docs/Dot.stories.mdx index 5ec334ccd..aace64a06 100644 --- a/packages/components/src/dot/docs/Dot.stories.mdx +++ b/packages/components/src/dot/docs/Dot.stories.mdx @@ -11,7 +11,7 @@ import { Inline } from "@components/layout"; # Dot @@ -41,7 +41,7 @@ A dot can have a label. A dot color can vary. -You can use a color name from our Orbit design system (e.g. `alias-2`, `--o-ui-accent-6`), an hexadecimal color code (e.g. `#c5cac8`), an `hsl`, an `hsla`, a `rgb` or a `rgba` color code. +You can use a color name from our Orbiter design system (e.g. `alias-2`, `--o-ui-accent-6`), an hexadecimal color code (e.g. `#c5cac8`), an `hsl`, an `hsla`, a `rgb` or a `rgba` color code. @@ -58,7 +58,7 @@ You can use a color name from our Orbit design system (e.g. `alias-2`, `--o-ui-a ### Dot diff --git a/packages/components/src/dot/src/Dot.tsx b/packages/components/src/dot/src/Dot.tsx index 32e1c5fa4..df483949a 100644 --- a/packages/components/src/dot/src/Dot.tsx +++ b/packages/components/src/dot/src/Dot.tsx @@ -71,7 +71,7 @@ export function InnerDot(props: InnerDotProps) { InnerDot.defaultElement = DefaultElement; /** - * [Documentation](https://orbit.sharegate.design/?path=/docs/dot--default-story) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/dot--default-story) */ export const Dot = slot("dot", forwardRef>((props, ref) => ( diff --git a/packages/components/src/field/docs/Field.stories.mdx b/packages/components/src/field/docs/Field.stories.mdx index ddda945da..184d8195f 100644 --- a/packages/components/src/field/docs/Field.stories.mdx +++ b/packages/components/src/field/docs/Field.stories.mdx @@ -15,7 +15,7 @@ import { TextInput } from "@components/text-input"; A field add a label and a message to an input. They are typically used in forms and dialogs. @@ -27,7 +27,7 @@ import { TextInput } from "@components/text-input"; ## Usage -A field can be composed of Orbit input components or integrate with custom inputs from your app. +A field can be composed of Orbiter input components or integrate with custom inputs from your app. ### Input @@ -135,7 +135,7 @@ Any input implementing the `FieldContext` can integrate with a field component. ### Field @@ -145,7 +145,7 @@ Any input implementing the `FieldContext` can integrate with a field component. ### GroupField @@ -155,7 +155,7 @@ Any input implementing the `FieldContext` can integrate with a field component. ### Label @@ -165,7 +165,7 @@ Any input implementing the `FieldContext` can integrate with a field component. ### HelpMessage @@ -175,7 +175,7 @@ Any input implementing the `FieldContext` can integrate with a field component. ### ErrorMessage @@ -185,7 +185,7 @@ Any input implementing the `FieldContext` can integrate with a field component. ### ValidMessage diff --git a/packages/components/src/field/src/ErrorMessage.tsx b/packages/components/src/field/src/ErrorMessage.tsx index 03f7bef5c..c324586ea 100644 --- a/packages/components/src/field/src/ErrorMessage.tsx +++ b/packages/components/src/field/src/ErrorMessage.tsx @@ -32,7 +32,7 @@ export function InnerErrorMessage(props: SharedFieldMessageProps) { InnerErrorMessage.defaultElement = FieldMessageDefaultElement; /** - * [Documentation](https://orbit.sharegate.design/?path=/docs/field--input) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/field--input) */ export const ErrorMessage = forwardRef>((props, ref) => ( diff --git a/packages/components/src/field/src/Field.tsx b/packages/components/src/field/src/Field.tsx index d01f1ab58..89ad3386d 100644 --- a/packages/components/src/field/src/Field.tsx +++ b/packages/components/src/field/src/Field.tsx @@ -86,7 +86,7 @@ InnerField.defaultElement = DefaultElement; /** * A field add a label and a message to an input. They are typically used in forms and dialogs. * - * [Documentation](https://orbit.sharegate.design/?path=/docs/field--input) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/field--input) */ export const Field = forwardRef>((props, ref) => ( diff --git a/packages/components/src/field/src/FieldMessage.tsx b/packages/components/src/field/src/FieldMessage.tsx index 11de4bfbf..f92a110ce 100644 --- a/packages/components/src/field/src/FieldMessage.tsx +++ b/packages/components/src/field/src/FieldMessage.tsx @@ -35,7 +35,7 @@ export function getValidationProps(validationState: string) { } /** - * [Documentation](https://orbit.sharegate.design/?path=/docs/field--input) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/field--input) */ export const FieldMessage = forwardRef(({ as = FieldMessageDefaultElement, diff --git a/packages/components/src/field/src/GroupField.tsx b/packages/components/src/field/src/GroupField.tsx index cc6269c31..514291045 100644 --- a/packages/components/src/field/src/GroupField.tsx +++ b/packages/components/src/field/src/GroupField.tsx @@ -89,7 +89,7 @@ export function InnerGroupField(props: InnerGroupFieldProps) { InnerGroupField.defaultElement = DefaultElement; /** - * [Documentation](https://orbit.sharegate.design/?path=/docs/field--input) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/field--input) */ export const GroupField = forwardRef>((props, ref) => ( diff --git a/packages/components/src/field/src/HelpMessage.tsx b/packages/components/src/field/src/HelpMessage.tsx index e8bbd7129..0889cc952 100644 --- a/packages/components/src/field/src/HelpMessage.tsx +++ b/packages/components/src/field/src/HelpMessage.tsx @@ -32,7 +32,7 @@ export function InnerHelpMessage(props: SharedFieldMessageProps) { InnerHelpMessage.defaultElement = FieldMessageDefaultElement; /** - * [Documentation](https://orbit.sharegate.design/?path=/docs/field--input) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/field--input) */ export const HelpMessage = forwardRef>((props, ref) => ( diff --git a/packages/components/src/field/src/Label.tsx b/packages/components/src/field/src/Label.tsx index 93a685190..2b5084920 100644 --- a/packages/components/src/field/src/Label.tsx +++ b/packages/components/src/field/src/Label.tsx @@ -57,7 +57,7 @@ export function InnerLabel(props: InnerLabelProps) { InnerLabel.defaultElement = DefaultElement; /** - * [Documentation](https://orbit.sharegate.design/?path=/docs/field--input) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/field--input) */ export const Label = forwardRef>((props, ref) => ( diff --git a/packages/components/src/field/src/ValidMessage.tsx b/packages/components/src/field/src/ValidMessage.tsx index b6dc4ac62..6d435ee52 100644 --- a/packages/components/src/field/src/ValidMessage.tsx +++ b/packages/components/src/field/src/ValidMessage.tsx @@ -32,7 +32,7 @@ export function InnerValidMessage(props: SharedFieldMessageProps) { InnerValidMessage.defaultElement = FieldMessageDefaultElement; /** - * [Documentation](https://orbit.sharegate.design/?path=/docs/field--input) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/field--input) */ export const ValidMessage = forwardRef>((props, ref) => ( diff --git a/packages/components/src/form/docs/Form.stories.mdx b/packages/components/src/form/docs/Form.stories.mdx index 206b60f20..9946483df 100644 --- a/packages/components/src/form/docs/Form.stories.mdx +++ b/packages/components/src/form/docs/Form.stories.mdx @@ -17,7 +17,7 @@ import { PasswordInput, TextInput } from "@components/text-input"; Forms are commonly used to provide user interaction in web applications. @@ -298,7 +298,7 @@ The form state and validation could be managed by an external library like [Form ### Form @@ -308,7 +308,7 @@ The form state and validation could be managed by an external library like [Form ### Fieldset diff --git a/packages/components/src/form/src/Fieldset.tsx b/packages/components/src/form/src/Fieldset.tsx index 466d2105f..6e750116b 100644 --- a/packages/components/src/form/src/Fieldset.tsx +++ b/packages/components/src/form/src/Fieldset.tsx @@ -54,7 +54,7 @@ export function InnerFieldset({ InnerFieldset.defaultElement = DefaultElement; /** - * [Documentation](https://orbit.sharegate.design/?path=/docs/form--vertical-layout) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/form--vertical-layout) */ export const Fieldset = forwardRef>((props, ref) => ( diff --git a/packages/components/src/form/src/Form.tsx b/packages/components/src/form/src/Form.tsx index 1bb8458ba..5b225cc23 100644 --- a/packages/components/src/form/src/Form.tsx +++ b/packages/components/src/form/src/Form.tsx @@ -64,7 +64,7 @@ InnerForm.defaultElement = DefaultElement; /** * Forms are commonly used to provide user interaction in web applications. * - * [Documentation](https://orbit.sharegate.design/?path=/docs/form--vertical-layout) + * [Documentation](https://wl-orbiter-website.netlify.app//?path=/docs/form--vertical-layout) */ export const Form = forwardRef>((props, ref) => ( diff --git a/packages/components/src/html/docs/address.stories.mdx b/packages/components/src/html/docs/address.stories.mdx index d93fc89ad..ddda27191 100644 --- a/packages/components/src/html/docs/address.stories.mdx +++ b/packages/components/src/html/docs/address.stories.mdx @@ -13,13 +13,13 @@ import { TextLink } from "@components/link"; A specialized box component for HTML address element. ## Usage -An address component accepts all the [address HTML element attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address) and [Orbit styled component props](?path=/docs/styling--page). +An address component accepts all the [address HTML element attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address) and [Orbiter styled component props](?path=/docs/styling--page). diff --git a/packages/components/src/html/docs/anchor.stories.mdx b/packages/components/src/html/docs/anchor.stories.mdx index 938ed6069..f07b85951 100644 --- a/packages/components/src/html/docs/anchor.stories.mdx +++ b/packages/components/src/html/docs/anchor.stories.mdx @@ -12,13 +12,13 @@ import { Meta, Story } from "@storybook/addon-docs"; A specialized box component for HTML anchor element. ## Usage -An anchor component accepts all the [anchor HTML element attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) and [Orbit styled component props](?path=/docs/styling--page). +An anchor component accepts all the [anchor HTML element attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) and [Orbiter styled component props](?path=/docs/styling--page). diff --git a/packages/components/src/html/docs/article.stories.mdx b/packages/components/src/html/docs/article.stories.mdx index 1b4a5e266..dc4b6cc87 100644 --- a/packages/components/src/html/docs/article.stories.mdx +++ b/packages/components/src/html/docs/article.stories.mdx @@ -11,13 +11,13 @@ import { Meta } from "@storybook/addon-docs"; A specialized box component for HTML article element. ## Usage -An article component accepts all the [article HTML element attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) and [Orbit styled component props](?path=/docs/styling--page). +An article component accepts all the [article HTML element attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) and [Orbiter styled component props](?path=/docs/styling--page). ```jsx
diff --git a/packages/components/src/html/docs/aside.stories.mdx b/packages/components/src/html/docs/aside.stories.mdx index a74324b4c..ae9493606 100644 --- a/packages/components/src/html/docs/aside.stories.mdx +++ b/packages/components/src/html/docs/aside.stories.mdx @@ -11,13 +11,13 @@ import { Meta } from "@storybook/addon-docs"; A specialized box component for HTML aside element. ## Usage -An aside component accepts all the [aside HTML element attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside) and [Orbit styled component props](?path=/docs/styling--page). +An aside component accepts all the [aside HTML element attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside) and [Orbiter styled component props](?path=/docs/styling--page). ```jsx