diff --git a/docs/src/__examples__/Badge/DEFAULT.tsx b/docs/src/__examples__/Badge/DEFAULT.tsx index ff8c33ace8..ca755f4477 100644 --- a/docs/src/__examples__/Badge/DEFAULT.tsx +++ b/docs/src/__examples__/Badge/DEFAULT.tsx @@ -23,10 +23,10 @@ export default { "success", "critical", "warning", - "infoInverted", - "criticalInverted", - "successInverted", - "warningInverted", + "infoSubtle", + "criticalSubtle", + "successSubtle", + "warningSubtle", "bundleBasic", "bundleMedium", "bundleTop", diff --git a/docs/src/__examples__/Badge/TYPES.tsx b/docs/src/__examples__/Badge/TYPES.tsx index 210c00ac19..1f8bc46be4 100644 --- a/docs/src/__examples__/Badge/TYPES.tsx +++ b/docs/src/__examples__/Badge/TYPES.tsx @@ -10,18 +10,18 @@ export default { { name: "Success", code: `() => success` }, { name: "Warning", code: `() => Warning` }, { name: "Critical", code: `() => Critical` }, - { name: "infoInverted", code: `() => InfoInverted` }, + { name: "infoSubtle", code: `() => InfoSubtle` }, { - name: "criticalInverted", - code: `() => CriticalInverted`, + name: "criticalSubtle", + code: `() => CriticalSubtle`, }, { - name: "successInverted", - code: `() => successInverted`, + name: "successSubtle", + code: `() => successSubtle`, }, { - name: "warningInverted", - code: `() => WarningInverted`, + name: "warningSubtle", + code: `() => WarningSubtle`, }, { name: "bundleBasic", diff --git a/docs/src/__examples__/NotificationBadge/DEFAULT.tsx b/docs/src/__examples__/NotificationBadge/DEFAULT.tsx index 580819adcd..d8534a3f9a 100644 --- a/docs/src/__examples__/NotificationBadge/DEFAULT.tsx +++ b/docs/src/__examples__/NotificationBadge/DEFAULT.tsx @@ -19,10 +19,10 @@ export default { "success", "critical", "warning", - "infoInverted", - "criticalInverted", - "successInverted", - "warningInverted", + "infoSubtle", + "criticalSubtle", + "successSubtle", + "warningSubtle", ], }, ], diff --git a/docs/src/__examples__/NotificationBadge/TYPES.tsx b/docs/src/__examples__/NotificationBadge/TYPES.tsx index 7d80a67544..f564da73f7 100644 --- a/docs/src/__examples__/NotificationBadge/TYPES.tsx +++ b/docs/src/__examples__/NotificationBadge/TYPES.tsx @@ -6,11 +6,11 @@ export default { 3 - 3 + 3 3 - 3 + 3 ), diff --git a/docs/src/components/Navbar/index.tsx b/docs/src/components/Navbar/index.tsx index c2ae3f5052..8b232b733b 100644 --- a/docs/src/components/Navbar/index.tsx +++ b/docs/src/components/Navbar/index.tsx @@ -245,7 +245,7 @@ const Navbar = ({ location, docNavigation }: Props) => { {activeTab === "bookmarks" && (
Your bookmarks
- + {bookmarks ? Object.keys(bookmarks).length : 0}
@@ -264,7 +264,7 @@ const Navbar = ({ location, docNavigation }: Props) => { >
Your bookmarks
- + {bookmarks ? Object.keys(bookmarks).length : 0}
@@ -301,7 +301,7 @@ const Navbar = ({ location, docNavigation }: Props) => { title={
Your bookmarks
- + {bookmarks ? Object.keys(bookmarks).length : 0}
diff --git a/packages/orbit-components/src/Badge/Badge.stories.tsx b/packages/orbit-components/src/Badge/Badge.stories.tsx index a92b3d523c..93a54a67d0 100644 --- a/packages/orbit-components/src/Badge/Badge.stories.tsx +++ b/packages/orbit-components/src/Badge/Badge.stories.tsx @@ -58,16 +58,16 @@ Info.story = { }, }; -export const InfoInverted = () => { +export const InfoSubtle = () => { const content = text("Content", "Badge"); return ( - }> + }> {content} ); }; -InfoInverted.story = { +InfoSubtle.story = { parameters: { info: "Check Orbit.Kiwi for more detailed design guidelines.", }, @@ -88,16 +88,16 @@ Success.story = { }, }; -export const SuccessInverted = () => { +export const SuccessSubtle = () => { const content = text("Content", "Badge"); return ( - }> + }> {content} ); }; -SuccessInverted.story = { +SuccessSubtle.story = { parameters: { info: "Check Orbit.Kiwi for more detailed design guidelines.", }, @@ -118,16 +118,16 @@ Warning.story = { }, }; -export const WarningInverted = () => { +export const WarningSubtle = () => { const content = text("Content", "Badge"); return ( - }> + }> {content} ); }; -WarningInverted.story = { +WarningSubtle.story = { parameters: { info: "Check Orbit.Kiwi for more detailed design guidelines.", }, @@ -148,16 +148,16 @@ Critical.story = { }, }; -export const CriticalInverted = () => { +export const CriticalSubtle = () => { const content = text("Content", "Badge"); return ( - }> + }> {content} ); }; -CriticalInverted.story = { +CriticalSubtle.story = { parameters: { info: "Check Orbit.Kiwi for more detailed design guidelines.", }, @@ -209,7 +209,7 @@ BadgeWithTranslatedNode.story = { export const Playground = () => { const content = text("Content", "Badge"); - const type = select("Type", Object.values(TYPE_OPTIONS), TYPE_OPTIONS.INFO); + const type = select("Type", Object.values(TYPE_OPTIONS), TYPE_OPTIONS.INFO_SUBTLE); const dataTest = text("dataTest", "test"); const Icon = getIcon(getIcons("Airplane")); const ariaLabel = text("ariaLabel", "test"); diff --git a/packages/orbit-components/src/Badge/README.md b/packages/orbit-components/src/Badge/README.md index 1efe3c4ffb..e9aff0ab96 100644 --- a/packages/orbit-components/src/Badge/README.md +++ b/packages/orbit-components/src/Badge/README.md @@ -39,21 +39,21 @@ Table below contains all types of the props available for object in Carrier arra ### enum -| type | -| :------------------- | -| `"neutral"` | -| `"dark"` | -| `"info"` | -| `"success"` | -| `"warning"` | -| `"critical"` | -| `"infoInverted"` | -| `"criticalInverted"` | -| `"successInverted"` | -| `"warningInverted"` | -| `"bundleBasic"` | -| `"bundleMedium"` | -| `"bundleTop"` | +| type | +| :----------------- | +| `"neutral"` | +| `"dark"` | +| `"info"` | +| `"success"` | +| `"warning"` | +| `"critical"` | +| `"infoSubtle"` | +| `"criticalSubtle"` | +| `"successSubtle"` | +| `"warningSubtle"` | +| `"bundleBasic"` | +| `"bundleMedium"` | +| `"bundleTop"` | ## Functional specs diff --git a/packages/orbit-components/src/Badge/consts.ts b/packages/orbit-components/src/Badge/consts.ts index 2760dff5ed..8f4e083e65 100644 --- a/packages/orbit-components/src/Badge/consts.ts +++ b/packages/orbit-components/src/Badge/consts.ts @@ -2,16 +2,16 @@ import type { Type } from "./types"; export const TYPE_OPTIONS: Record = { NEUTRAL: "neutral", + INFO_SUBTLE: "infoSubtle", + SUCCESS_SUBTLE: "successSubtle", + WARNING_SUBTLE: "warningSubtle", + CRITICAL_SUBTLE: "criticalSubtle", + DARK: "dark", + WHITE: "white", INFO: "info", + CRITICAL: "critical", SUCCESS: "success", WARNING: "warning", - CRITICAL: "critical", - DARK: "dark", - WHITE: "white", - INFO_INVERTED: "infoInverted", - CRITICAL_INVERTED: "criticalInverted", - SUCCESS_INVERTED: "successInverted", - WARNING_INVERTED: "warningInverted", BUNDLE_BASIC: "bundleBasic", BUNDLE_MEDIUM: "bundleMedium", BUNDLE_TOP: "bundleTop", diff --git a/packages/orbit-components/src/Badge/index.js.flow b/packages/orbit-components/src/Badge/index.js.flow index 46f7bb62bd..322d31ea17 100644 --- a/packages/orbit-components/src/Badge/index.js.flow +++ b/packages/orbit-components/src/Badge/index.js.flow @@ -15,10 +15,10 @@ export type Type = | "warning" | "critical" | "white" - | "infoInverted" - | "criticalInverted" - | "successInverted" - | "warningInverted" + | "infoSubtle" + | "criticalSubtle" + | "successSubtle" + | "warningSubtle" | "bundleBasic" | "bundleMedium" | "bundleTop"; diff --git a/packages/orbit-components/src/Badge/index.tsx b/packages/orbit-components/src/Badge/index.tsx index 55fa9a8aeb..960f2bd675 100644 --- a/packages/orbit-components/src/Badge/index.tsx +++ b/packages/orbit-components/src/Badge/index.tsx @@ -10,32 +10,32 @@ const getTypeToken = ({ name, theme, type }: { name: string; theme: Theme; type: const tokens = { [TOKENS.background]: { [TYPE_OPTIONS.NEUTRAL]: theme.orbit.paletteCloudLight, - [TYPE_OPTIONS.INFO]: theme.orbit.paletteBlueLight, - [TYPE_OPTIONS.SUCCESS]: theme.orbit.paletteGreenLight, - [TYPE_OPTIONS.WARNING]: theme.orbit.paletteOrangeLight, - [TYPE_OPTIONS.CRITICAL]: theme.orbit.paletteRedLight, + [TYPE_OPTIONS.INFO_SUBTLE]: theme.orbit.paletteBlueLight, + [TYPE_OPTIONS.SUCCESS_SUBTLE]: theme.orbit.paletteGreenLight, + [TYPE_OPTIONS.WARNING_SUBTLE]: theme.orbit.paletteOrangeLight, + [TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.paletteRedLight, [TYPE_OPTIONS.DARK]: theme.orbit.paletteInkDark, [TYPE_OPTIONS.WHITE]: theme.orbit.paletteWhite, - [TYPE_OPTIONS.INFO_INVERTED]: theme.orbit.paletteBlueNormal, - [TYPE_OPTIONS.CRITICAL_INVERTED]: theme.orbit.paletteRedNormal, - [TYPE_OPTIONS.SUCCESS_INVERTED]: theme.orbit.paletteGreenNormal, - [TYPE_OPTIONS.WARNING_INVERTED]: theme.orbit.paletteOrangeNormal, + [TYPE_OPTIONS.INFO]: theme.orbit.paletteBlueNormal, + [TYPE_OPTIONS.CRITICAL]: theme.orbit.paletteRedNormal, + [TYPE_OPTIONS.SUCCESS]: theme.orbit.paletteGreenNormal, + [TYPE_OPTIONS.WARNING]: theme.orbit.paletteOrangeNormal, [TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.backgroundBadgeBundleBasic, [TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.backgroundBadgeBundleMedium, [TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.backgroundBadgeBundleTop, }, [TOKENS.color]: { [TYPE_OPTIONS.NEUTRAL]: theme.orbit.paletteInkDark, - [TYPE_OPTIONS.INFO]: theme.orbit.paletteBlueDark, - [TYPE_OPTIONS.SUCCESS]: theme.orbit.paletteGreenDark, - [TYPE_OPTIONS.WARNING]: theme.orbit.paletteOrangeDark, - [TYPE_OPTIONS.CRITICAL]: theme.orbit.paletteRedDark, + [TYPE_OPTIONS.INFO_SUBTLE]: theme.orbit.paletteBlueDark, + [TYPE_OPTIONS.SUCCESS_SUBTLE]: theme.orbit.paletteGreenDark, + [TYPE_OPTIONS.WARNING_SUBTLE]: theme.orbit.paletteOrangeDark, + [TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.paletteRedDark, [TYPE_OPTIONS.DARK]: theme.orbit.paletteWhite, [TYPE_OPTIONS.WHITE]: theme.orbit.paletteInkDark, - [TYPE_OPTIONS.INFO_INVERTED]: theme.orbit.paletteWhite, - [TYPE_OPTIONS.CRITICAL_INVERTED]: theme.orbit.paletteWhite, - [TYPE_OPTIONS.SUCCESS_INVERTED]: theme.orbit.paletteWhite, - [TYPE_OPTIONS.WARNING_INVERTED]: theme.orbit.paletteWhite, + [TYPE_OPTIONS.INFO]: theme.orbit.paletteWhite, + [TYPE_OPTIONS.CRITICAL]: theme.orbit.paletteWhite, + [TYPE_OPTIONS.SUCCESS]: theme.orbit.paletteWhite, + [TYPE_OPTIONS.WARNING]: theme.orbit.paletteWhite, [TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.paletteWhite, [TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.paletteWhite, [TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.paletteWhite, diff --git a/packages/orbit-components/src/Badge/types.d.ts b/packages/orbit-components/src/Badge/types.d.ts index ba5f5325f5..ab52a5ecda 100644 --- a/packages/orbit-components/src/Badge/types.d.ts +++ b/packages/orbit-components/src/Badge/types.d.ts @@ -13,10 +13,10 @@ export type Type = | "warning" | "critical" | "white" - | "infoInverted" - | "criticalInverted" - | "successInverted" - | "warningInverted" + | "infoSubtle" + | "criticalSubtle" + | "successSubtle" + | "warningSubtle" | "bundleBasic" | "bundleMedium" | "bundleTop"; diff --git a/packages/orbit-components/src/Card/Card.stories.tsx b/packages/orbit-components/src/Card/Card.stories.tsx index 0bd77449d9..ecbdcb7d7b 100644 --- a/packages/orbit-components/src/Card/Card.stories.tsx +++ b/packages/orbit-components/src/Card/Card.stories.tsx @@ -199,7 +199,7 @@ export const CardWithDefaultExpanded = () => { header={ Trip length: 1h55m - } type="warning"> + } type="warningSubtle"> Unavailable @@ -221,7 +221,7 @@ export const CardWithDefaultExpanded = () => { header={ Trip length: 1h55m - } type="warning"> + } type="warningSubtle"> Unavailable diff --git a/packages/orbit-components/src/NotificationBadge/NotificationBadge.stories.tsx b/packages/orbit-components/src/NotificationBadge/NotificationBadge.stories.tsx index 1bac2a10d5..5d5f575d4c 100644 --- a/packages/orbit-components/src/NotificationBadge/NotificationBadge.stories.tsx +++ b/packages/orbit-components/src/NotificationBadge/NotificationBadge.stories.tsx @@ -50,12 +50,12 @@ Info.story = { }, }; -export const InfoInverted = () => { +export const InfoSubtle = () => { const content = text("Content", "10"); - return {content}; + return {content}; }; -InfoInverted.story = { +InfoSubtle.story = { parameters: { info: "Check Orbit.Kiwi for more detailed design guidelines.", }, @@ -94,12 +94,12 @@ Critical.story = { }, }; -export const CriticalInverted = () => { +export const CriticalSubtle = () => { const content = text("Content", "10"); - return {content}; + return {content}; }; -CriticalInverted.story = { +CriticalSubtle.story = { parameters: { info: "Check Orbit.Kiwi for more detailed design guidelines.", }, diff --git a/packages/orbit-components/src/NotificationBadge/README.md b/packages/orbit-components/src/NotificationBadge/README.md index 15b2afa2d6..1472c59ae8 100644 --- a/packages/orbit-components/src/NotificationBadge/README.md +++ b/packages/orbit-components/src/NotificationBadge/README.md @@ -27,13 +27,13 @@ Table below contains all types of the props available in NotificationBadge compo ### enum -| type | -| :------------------- | -| `"neutral"` | -| `"dark"` | -| `"info"` | -| `"success"` | -| `"warning"` | -| `"critical"` | -| `"infoInverted"` | -| `"criticalInverted"` | +| type | +| :----------------- | +| `"neutral"` | +| `"dark"` | +| `"info"` | +| `"success"` | +| `"warning"` | +| `"critical"` | +| `"infoSubtle"` | +| `"criticalSubtle"` | diff --git a/packages/orbit-components/src/NotificationBadge/__tests__/index.test.tsx b/packages/orbit-components/src/NotificationBadge/__tests__/index.test.tsx index cfef49be54..393b806aba 100644 --- a/packages/orbit-components/src/NotificationBadge/__tests__/index.test.tsx +++ b/packages/orbit-components/src/NotificationBadge/__tests__/index.test.tsx @@ -7,7 +7,7 @@ import Sightseeing from "../../icons/Sightseeing"; describe("NotificationBadge", () => { const content = "badge"; - const type = "info"; + const type = "infoSubtle"; const dataTest = "test"; const ariaLabel = content; diff --git a/packages/orbit-components/src/Tile/Tile.stories.tsx b/packages/orbit-components/src/Tile/Tile.stories.tsx index d151fc6c04..a73361fa41 100644 --- a/packages/orbit-components/src/Tile/Tile.stories.tsx +++ b/packages/orbit-components/src/Tile/Tile.stories.tsx @@ -117,7 +117,7 @@ export const ExpandableWithCustomDescription = () => { 13/37/1337 - You + You } diff --git a/packages/orbit-components/src/TileGroup/TileGroup.stories.tsx b/packages/orbit-components/src/TileGroup/TileGroup.stories.tsx index 9ab3552c34..bfdc63b825 100644 --- a/packages/orbit-components/src/TileGroup/TileGroup.stories.tsx +++ b/packages/orbit-components/src/TileGroup/TileGroup.stories.tsx @@ -109,7 +109,7 @@ export const ExpandableWithCustomDescription = () => { 13/37/1337 - You + You } @@ -132,7 +132,7 @@ export const ExpandableWithCustomDescription = () => { 13/37/1337 - You + You } @@ -155,7 +155,7 @@ export const ExpandableWithCustomDescription = () => { 13/37/1337 - You + You } @@ -178,7 +178,7 @@ export const ExpandableWithCustomDescription = () => { 13/37/1337 - You + You } diff --git a/packages/orbit-themer/src/Components/Badge/index.tsx b/packages/orbit-themer/src/Components/Badge/index.tsx index bcacde5ec1..cd679f7726 100644 --- a/packages/orbit-themer/src/Components/Badge/index.tsx +++ b/packages/orbit-themer/src/Components/Badge/index.tsx @@ -11,10 +11,10 @@ const Badges = () => { {message} {message} {message} - {message} - {message} - {message} - {message} + {message} + {message} + {message} + {message} {message} diff --git a/packages/orbit-themer/src/Tabs/ColorTab.tsx b/packages/orbit-themer/src/Tabs/ColorTab.tsx index 9865ede15c..6a2afd0fb0 100644 --- a/packages/orbit-themer/src/Tabs/ColorTab.tsx +++ b/packages/orbit-themer/src/Tabs/ColorTab.tsx @@ -84,7 +84,7 @@ const ColorTab = ({ title, children, colorPath }) => { {title} {isAdjusted && ( - }> + }> Adjusted