diff --git a/.gitignore b/.gitignore index e973d293e..41a42b06b 100644 --- a/.gitignore +++ b/.gitignore @@ -12,3 +12,4 @@ storybook-static .eslintcache .stylelintcache build-storybook.log +.idea diff --git a/docs/features/tokens/Tokens.stories.mdx b/docs/features/tokens/Tokens.stories.mdx index 7279d5f5a..285500b9f 100644 --- a/docs/features/tokens/Tokens.stories.mdx +++ b/docs/features/tokens/Tokens.stories.mdx @@ -1,9 +1,4 @@ -import { TokenTable, textRenderer, fontSizeRenderer, backgroundRenderer, borderRenderer, durationRenderer, easingRenderer, iconRenderer, lineHeightRenderer, boxShadowRenderer, radiiRenderer, sizingRenderer, spacingRenderer, fontWeightRenderer } from "./TokenTable"; import { Meta } from "@storybook/addon-docs"; -import { Div } from "@components/html"; -import { ThemeProvider } from "@components/styling" -import { ColorPaletteTable } from "./ColorPaletteTable"; -import { Table } from "@stories/components"; If you are looking for a list of available tokens, please refer to the [Hopper tokens page](https://hopper.workleap.design/tokens/getting-started/introduction). + + ## Usage Tokens can be used as [style props](/docs/style-props--page) values: @@ -26,232 +25,6 @@ Or `CSS` variables: ```css .item { - background-color: var(--o-ui-bg-alias-accent-faint); + background-color: var(--hop-primary-surface); } ``` - -## Aliased tokens - -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. - -## Values - -### Background Colors - - - -### Border Colors - - - -### Box Shadows - - - -### Durations - - - -### Easings - -Only usable as `CSS` variables - - - -### Icon Colors - - - -### Font Sizes - - - -### Font Weights - - - -### Line Heights - - - -### Radii - - - -### Sizings - - - -### Spacings - - - -### Text Colors - - diff --git a/docs/materials/motion/Motion.stories.mdx b/docs/materials/motion/Motion.stories.mdx deleted file mode 100644 index 0be3cb42c..000000000 --- a/docs/materials/motion/Motion.stories.mdx +++ /dev/null @@ -1,87 +0,0 @@ -import { Meta } from "@storybook/addon-docs"; -import { MotionPreview } from "./MotionPreview" -import { Table, Tagline } from "@stories/components"; - - - -# Motion - -Our motion utilities consists of two set of values, *durations* and *easings*. - -## Usage - -Both variables can be combined in [transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) as well in CSS [animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) to set the tone of an animation/transition (animation is used interchangeably with transition from now on). - -In transition declaration : - -```css -.tease { - transition: color var(--o-ui-easing-duration-1) var(--o-ui-easing-focus); -} -``` - -In animation declaration : - -```css -@keyframes tease-animation { - 0% { - opacity: 0; - transform: scale(1.2); - } - 100% { - opacity: 1; - transform: scale(1); - } -} - -.tease { - animation: tease-animation var(--o-ui-easing-duration-2) var(--o-ui-easing-productive); -} -``` - -## Duration - -Orbiter exposes 5 [durations](?path=/docs/tokens--page#durations), they help convey a message and makes animations smooth and responsive. - - - -## Easings - -[Easings](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function) denotes a mathematical function that describes the rate at which a numerical value changes. They adds life to motion, providing natural rests, they set the mood of an animation. Orbiter provides [3 pre-defined easings](/docs/tokens--page#easings), each having their use. - -### Productive - -Used in animations that are not in the way, they quickly change from one state to another. - -cubic-bezier(0.22, 0.61, 0.36, 1) - -### Focus - -Used in animations that are designed to draw the user’s attention on what changed, in order to let them move on with their next task. - -cubic-bezier(0.46, 0.03, 0.52, 0.96) - -### Expressive - -Used in animations that are meant to give a sense of completeness or resolution to the user. Use them wisely. - -cubic-bezier(0.72, -0.66, 0.15, 1.5) - -## Playground - - diff --git a/docs/materials/motion/MotionPreview.css b/docs/materials/motion/MotionPreview.css deleted file mode 100644 index f754284af..000000000 --- a/docs/materials/motion/MotionPreview.css +++ /dev/null @@ -1,17 +0,0 @@ -.o-ui-sb-motion-preview { - padding: 1rem 0; - margin-top: 2rem; -} - -.o-ui-sb-object { - --o-ui-sb-duration: var(--o-ui-easing-duration-2); - --o-ui-sb-easing: var(--o-ui-easing-focus); - background-color: #6B5B7B; - width: 10rem; - height: 10rem; - transition: transform var(--o-ui-sb-duration) var(--o-ui-sb-easing); -} - -.o-ui-sb-object-animated { - transform: translateX(100px); -} diff --git a/docs/materials/motion/MotionPreview.tsx b/docs/materials/motion/MotionPreview.tsx deleted file mode 100644 index 8b937a818..000000000 --- a/docs/materials/motion/MotionPreview.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import "./MotionPreview.css"; - -import { Field, Label } from "@components/field"; - -import { Button } from "@components/button"; -import { Div } from "@components/html"; -import { Inline } from "@components/layout"; -import { Item } from "@components/collection"; -import { Select } from "@components/select"; -import { SyntheticEvent, useState } from "react"; - -export function MotionPreview() { - const [isAnimated, setAnimated] = useState(false); - const [duration, setDuration] = useState("duration-1"); - const [easing, setEasing] = useState("expressive"); - - const handleClick = () => { - setAnimated(!isAnimated); - }; - - const handleSelectDuration = (_: SyntheticEvent, selectedKey: string) => { - setDuration(selectedKey); - }; - - const handleSelectEasing = (_: SyntheticEvent, selectedKey: string) => { - setEasing(selectedKey); - }; - - return ( - <> - - - - - - - - - - - -
- - ); -} diff --git a/packages/icons/docs/icons.stories.mdx b/packages/icons/docs/icons.stories.mdx deleted file mode 100644 index 6804b8253..000000000 --- a/packages/icons/docs/icons.stories.mdx +++ /dev/null @@ -1,244 +0,0 @@ -import { - AddMajorIcon, - AlertMajorIcon, - ArrowMajorIcon, - ArrowMinorIcon, - ArrowsUpDownMajorIcon, - ArrowsUpDownMinorIcon, - BurgerMajorIcon, - CalendarMajorIcon, - CheckMajorIcon, - ChevronMajorIcon, - ChevronMinorIcon, - ChevronUpDownMajorIcon, - ChevronUpDownMinorIcon, - CrossMajorIcon, - CrossMinorIcon, - DownloadMajorIcon, - DuplicateMajorIcon, - EmailMajorIcon, - ExternalLinkMajorIcon, - ExternalLinkMinorIcon, - EyeMajorIcon, - EyeSlashMajorIcon, - FileMajorIcon, - FileCsvMajorIcon, - FileMusicMajorIcon, - FilePdfMajorIcon, - FileVideoMajorIcon, - FileZipMajorIcon, - FilterMajorIcon, - FolderMajorIcon, - FolderCrossMajorIcon, - GearMajorIcon, - GrabMajorIcon, - GroupMajorIcon, - HelpMajorIcon, - HelpCircleMajorIcon, - HomeMajorIcon, - HorizontalDotsMajorIcon, - ImageMajorIcon, - InfoCircleMajorIcon, - InfoCircleMinorIcon, - LightbulbMajorIcon, - LinkMajorIcon, - LinkRemoveMajorIcon, - MagnifierMajorIcon, - NotificationMajorIcon, - NotificationOffMajorIcon, - NotificationRingingMajorIcon, - PadlockLockedMajorIcon, - PadlockUnlockedMajorIcon, - PencilMajorIcon, - PlaceholderMajorIcon, - PlaceholderMinorIcon, - RevertMajorIcon, - SigninMajorIcon, - SignoutMajorIcon, - StarFillMajorIcon, - StarFillMinorIcon, - StarOutlineMajorIcon, - StarOutlineMinorIcon, - TrashMajorIcon, - TrashMinorIcon, - UserMajorIcon, - UserMinorIcon, - UserAddMajorIcon, - UserAddMinorIcon, - VerticalDotsMajorIcon, - WarningMajorIcon, - WarningMinorIcon -} from "@components/icons"; -import { CheckeredBackground, Preview } from "@stories/components"; -import { IconGallery, renderItem } from "./icon-gallery"; -import { Inline } from "@components/layout"; -import { Meta } from "@storybook/addon-docs"; - - - -# Icons - -Official collection of icons to promote a consistent experience across the ShareGate ecosystem. All icons are available in two ways, [React components](#react-components) and [static files](#static-files). - -> If you are looking for documentation about integrating a *custom icons* (ex: Azure specific icons) in your application, please refer to the [icon component](?path=/docs/icon--default-story) documentation. - -## Orbiter - -### Major icons - -Major icons are `16x16` in a `20x20` bounding box. Use them to draw attention to an area. - - - {renderItem("Add", )} - {renderItem("Alert", )} - {renderItem("Arrow", )} - {renderItem("ArrowsUpDown", )} - {renderItem("Burger", )} - {renderItem("Calendar", )} - {renderItem("Check", )} - {renderItem("Chevron", )} - {renderItem("ChevronUpDown", )} - {renderItem("Cross", )} - {renderItem("Duplicate", )} - {renderItem("Download", )} - {renderItem("Email", )} - {renderItem("ExternalLink", )} - {renderItem("Eye", )} - {renderItem("EyeSlash", )} - {renderItem("File", )} - {renderItem("FileCsv", )} - {renderItem("FileMusic", )} - {renderItem("FilePdf", )} - {renderItem("FileVideo", )} - {renderItem("FileZip", )} - {renderItem("Filter", )} - {renderItem("Folder", )} - {renderItem("FolderCross", )} - {renderItem("Gear", )} - {renderItem("Grab", )} - {renderItem("Group", )} - {renderItem("Help", )} - {renderItem("HelpCircle", )} - {renderItem("Home", )} - {renderItem("HorizontalDots", )} - {renderItem("Image", )} - {renderItem("InfoCircle", )} - {renderItem("Lightbulb", )} - {renderItem("Link", )} - {renderItem("LinkRemove", )} - {renderItem("Magnifier", )} - {renderItem("Notification", )} - {renderItem("NotificationOff", )} - {renderItem("NotificationRinging", )} - {renderItem("PadlockLocked", )} - {renderItem("PadlockUnlocked", )} - {renderItem("Pencil", )} - {renderItem("Placeholder", )} - {renderItem("Revert", )} - {renderItem("Signin", )} - {renderItem("Signout", )} - {renderItem("StarFill", )} - {renderItem("StarOutline", )} - {renderItem("Trash", )} - {renderItem("User", )} - {renderItem("UserAdd", )} - {renderItem("VerticalDots", )} - {renderItem("Warning", )} - - -### Minor icons - -Minor icons are 12x12 in a 20x20 bounding box. Use them to prevent an icon from taking too much the center stage in a component. - - - {renderItem("Arrow", )} - {renderItem("ArrowsUpDown", )} - {renderItem("Chevron", )} - {renderItem("ChevronUpDown", )} - {renderItem("Cross", )} - {renderItem("ExternalLink", )} - {renderItem("InfoCircle", )} - {renderItem("StarFill", )} - {renderItem("StarOutline", )} - {renderItem("Placeholder", )} - {renderItem("Trash", )} - {renderItem("User", )} - {renderItem("UserAdd", )} - - -## Design specifications - -All official SVG icons are available as major icons. Some icons have a minor version to avoid overpowering more important elements in a component. - -## Icon dimensions - -All icons are available as 20x20 SVGs. They should not be resized as they have been crafted to look their best in this particular size. - -#### Major - -All icons are provided as Major icons, which serve as the primary variation of the icon and are suitable for the majority of usage scenarios. - -#### Minor - -To keep your icon from taking up too much space compared to text or other elements surrounding it, use a smaller version of the icon. The overall icon size remains the same 20x20, but the icon within the component is reduced in size. If a minor version of an icon is not available in Orbiter and you need one, please request it by submitting an issue on [Github](https://github.com/gsoft-inc/wl-orbiter/issues). - -#### Usage - -```jsx -import { CalendarMajorIcon } from "@workleap/orbiter-ui"; - -function render() { - return ; -} -``` - -### Static files - -Icons SVG files are available from the root of `@orbit-ui/transition-icons` package. These files are useful for non React apps or any use cases which cannot be done using a component. Whenever you can, you should prefer React components to static files. - -Orbiter Design provide icons with default dimensions, e.g. a `20px` variant will have a default viewport of 20x20 and a viewbox of `0 0 20 20`. - -Although frowned upon, you can customize an icon dimensions with the `width` and `height` props of Orbiter [styled-system](?path=/docs/style-props--page). - -#### Image source - -```jsx -import CalendarMajorIcon from "@orbit-ui/transition-icons/icon-calendar-major.svg"; - -function render() { - return Calendar; -} -``` - -## Color - -An SVG object get it's color from the [fill attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes). When an SVG object doesn't define a `fill` attribute on his elements, CSS can be use to style the internal color of the elements of the objects with the `fill` property. - -This means you can alter the color of an icon by specifying a new `fill` value. If the SVG already contains a `fill` attribute, please [fill an issue](https://github.com/gsoft-inc/wl-orbiter/issues). - -### React components - -To set the color of an icon component, you can set the `fill` prop of Orbiter [styled-system](?path=/docs/style-props--page). - -```jsx -import { CalendarMajorIcon } from "@workleap/orbiter-ui"; - -function render() { - return -} -``` - -### Image source - -To set the color of an image, you can set the `fill` prop of Orbiter [styled-system](?path=/docs/style-props--page). - -```jsx -import CalendarMajorIcon from "@orbit-ui/transition-icons/icon-calendar-major.svg"; - -function render() { - return calendar; -} -```