diff --git a/examples/mobile/android/app/src/main/assets/fonts/poppins-bold.ttf b/examples/mobile/android/app/src/main/assets/fonts/poppins-bold.ttf index e69de29b..00559eeb 100644 Binary files a/examples/mobile/android/app/src/main/assets/fonts/poppins-bold.ttf and b/examples/mobile/android/app/src/main/assets/fonts/poppins-bold.ttf differ diff --git a/examples/mobile/android/app/src/main/assets/fonts/poppins-medium.ttf b/examples/mobile/android/app/src/main/assets/fonts/poppins-medium.ttf index e69de29b..6bcdcc27 100644 Binary files a/examples/mobile/android/app/src/main/assets/fonts/poppins-medium.ttf and b/examples/mobile/android/app/src/main/assets/fonts/poppins-medium.ttf differ diff --git a/examples/mobile/android/app/src/main/assets/fonts/poppins-regular.ttf b/examples/mobile/android/app/src/main/assets/fonts/poppins-regular.ttf index e69de29b..9f0c71b7 100644 Binary files a/examples/mobile/android/app/src/main/assets/fonts/poppins-regular.ttf and b/examples/mobile/android/app/src/main/assets/fonts/poppins-regular.ttf differ diff --git a/examples/mobile/android/app/src/main/assets/fonts/poppins-semibold.ttf b/examples/mobile/android/app/src/main/assets/fonts/poppins-semibold.ttf index e69de29b..74c726e3 100644 Binary files a/examples/mobile/android/app/src/main/assets/fonts/poppins-semibold.ttf and b/examples/mobile/android/app/src/main/assets/fonts/poppins-semibold.ttf differ diff --git a/examples/mobile/android/link-assets-manifest.json b/examples/mobile/android/link-assets-manifest.json index 9f089bc9..1f7bb4bf 100644 --- a/examples/mobile/android/link-assets-manifest.json +++ b/examples/mobile/android/link-assets-manifest.json @@ -3,19 +3,19 @@ "data": [ { "path": "../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-bold.ttf", - "sha1": "da39a3ee5e6b4b0d3255bfef95601890afd80709" + "sha1": "875cf0cecd647bcf22e79d633d868c1b1ec98dfa" }, { "path": "../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-medium.ttf", - "sha1": "da39a3ee5e6b4b0d3255bfef95601890afd80709" + "sha1": "283f21b44efbdbf276ba802be2d949a36bbc4233" }, { "path": "../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-regular.ttf", - "sha1": "da39a3ee5e6b4b0d3255bfef95601890afd80709" + "sha1": "fdd3002e7d814ee47c1c1b8487c72c6bbb3a2d00" }, { "path": "../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-semibold.ttf", - "sha1": "da39a3ee5e6b4b0d3255bfef95601890afd80709" + "sha1": "8a4ace9392d06bcb7f8ea2f5169b07e4c383a90d" } ] } diff --git a/examples/mobile/ios/link-assets-manifest.json b/examples/mobile/ios/link-assets-manifest.json index 9f089bc9..1f7bb4bf 100644 --- a/examples/mobile/ios/link-assets-manifest.json +++ b/examples/mobile/ios/link-assets-manifest.json @@ -3,19 +3,19 @@ "data": [ { "path": "../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-bold.ttf", - "sha1": "da39a3ee5e6b4b0d3255bfef95601890afd80709" + "sha1": "875cf0cecd647bcf22e79d633d868c1b1ec98dfa" }, { "path": "../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-medium.ttf", - "sha1": "da39a3ee5e6b4b0d3255bfef95601890afd80709" + "sha1": "283f21b44efbdbf276ba802be2d949a36bbc4233" }, { "path": "../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-regular.ttf", - "sha1": "da39a3ee5e6b4b0d3255bfef95601890afd80709" + "sha1": "fdd3002e7d814ee47c1c1b8487c72c6bbb3a2d00" }, { "path": "../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-semibold.ttf", - "sha1": "da39a3ee5e6b4b0d3255bfef95601890afd80709" + "sha1": "8a4ace9392d06bcb7f8ea2f5169b07e4c383a90d" } ] } diff --git a/examples/mobile/ios/mobile.xcodeproj/project.pbxproj b/examples/mobile/ios/mobile.xcodeproj/project.pbxproj index 6878b8a5..4536a407 100644 --- a/examples/mobile/ios/mobile.xcodeproj/project.pbxproj +++ b/examples/mobile/ios/mobile.xcodeproj/project.pbxproj @@ -8,16 +8,16 @@ /* Begin PBXBuildFile section */ 00E356F31AD99517003FC87E /* mobileTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* mobileTests.m */; }; - 1042F44948434C5BBBBBA927 /* poppins-semibold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = E82D29C4001E4B98A04752C8 /* poppins-semibold.ttf */; }; 13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; }; 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; }; 13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; }; 3371BE20F7DD0B74E30764D1 /* libPods-mobile-mobileTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 2DF92BD080ABE1C428CC6C27 /* libPods-mobile-mobileTests.a */; }; - 51711AA02FDC4A3EAC72F2E8 /* poppins-regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 39412D012C7B42729E7025B4 /* poppins-regular.ttf */; }; - 577149A71B0C41A8822613D2 /* poppins-medium.ttf in Resources */ = {isa = PBXBuildFile; fileRef = C2D59AFCCD8348ADB003F0F4 /* poppins-medium.ttf */; }; 80C4062C8BC347587BEB983C /* libPods-mobile.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 482FF49AB0073B44D856E475 /* libPods-mobile.a */; }; 81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; }; - 99DA179A6F8E47A3B2958B07 /* poppins-bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 64A035288FD84C999C9653A9 /* poppins-bold.ttf */; }; + 38CC72CCB89541D9BB981D47 /* poppins-bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 3F0B14C312F049EC96BE998E /* poppins-bold.ttf */; }; + 86C9997DE0514596B2DF011F /* poppins-medium.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 5A52BB194E1C46D990E75A5E /* poppins-medium.ttf */; }; + 21CB18AB12064015ACCED963 /* poppins-regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 12742FEDB2044517AA235D2F /* poppins-regular.ttf */; }; + 800F25BB93064DF9B6A345F1 /* poppins-semibold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = FC45F2891F654F61B834167D /* poppins-semibold.ttf */; }; /* End PBXBuildFile section */ /* Begin PBXContainerItemProxy section */ @@ -42,16 +42,16 @@ 13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = mobile/main.m; sourceTree = ""; }; 13F3ECF40D54B87EA2D14D2D /* Pods-mobile.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-mobile.debug.xcconfig"; path = "Target Support Files/Pods-mobile/Pods-mobile.debug.xcconfig"; sourceTree = ""; }; 2DF92BD080ABE1C428CC6C27 /* libPods-mobile-mobileTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-mobile-mobileTests.a"; sourceTree = BUILT_PRODUCTS_DIR; }; - 39412D012C7B42729E7025B4 /* poppins-regular.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "poppins-regular.ttf"; path = "../../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-regular.ttf"; sourceTree = ""; }; 482FF49AB0073B44D856E475 /* libPods-mobile.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-mobile.a"; sourceTree = BUILT_PRODUCTS_DIR; }; - 64A035288FD84C999C9653A9 /* poppins-bold.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "poppins-bold.ttf"; path = "../../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-bold.ttf"; sourceTree = ""; }; 74F5C4D2108852BC1E7491EC /* Pods-mobile-mobileTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-mobile-mobileTests.debug.xcconfig"; path = "Target Support Files/Pods-mobile-mobileTests/Pods-mobile-mobileTests.debug.xcconfig"; sourceTree = ""; }; 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = mobile/LaunchScreen.storyboard; sourceTree = ""; }; 84EFA559DA33BE4E7F84E533 /* Pods-mobile-mobileTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-mobile-mobileTests.release.xcconfig"; path = "Target Support Files/Pods-mobile-mobileTests/Pods-mobile-mobileTests.release.xcconfig"; sourceTree = ""; }; C136A1CF80277E7F9C861A8C /* Pods-mobile.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-mobile.release.xcconfig"; path = "Target Support Files/Pods-mobile/Pods-mobile.release.xcconfig"; sourceTree = ""; }; - C2D59AFCCD8348ADB003F0F4 /* poppins-medium.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "poppins-medium.ttf"; path = "../../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-medium.ttf"; sourceTree = ""; }; - E82D29C4001E4B98A04752C8 /* poppins-semibold.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "poppins-semibold.ttf"; path = "../../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-semibold.ttf"; sourceTree = ""; }; ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; }; + 3F0B14C312F049EC96BE998E /* poppins-bold.ttf */ = {isa = PBXFileReference; name = "poppins-bold.ttf"; path = "../../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-bold.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + 5A52BB194E1C46D990E75A5E /* poppins-medium.ttf */ = {isa = PBXFileReference; name = "poppins-medium.ttf"; path = "../../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-medium.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + 12742FEDB2044517AA235D2F /* poppins-regular.ttf */ = {isa = PBXFileReference; name = "poppins-regular.ttf"; path = "../../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-regular.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + FC45F2891F654F61B834167D /* poppins-semibold.ttf */ = {isa = PBXFileReference; name = "poppins-semibold.ttf"; path = "../../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-semibold.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; /* End PBXFileReference section */ /* Begin PBXFrameworksBuildPhase section */ @@ -149,10 +149,10 @@ 9453D6895A8A4C60A85663D3 /* Resources */ = { isa = PBXGroup; children = ( - 64A035288FD84C999C9653A9 /* poppins-bold.ttf */, - C2D59AFCCD8348ADB003F0F4 /* poppins-medium.ttf */, - 39412D012C7B42729E7025B4 /* poppins-regular.ttf */, - E82D29C4001E4B98A04752C8 /* poppins-semibold.ttf */, + 3F0B14C312F049EC96BE998E /* poppins-bold.ttf */, + 5A52BB194E1C46D990E75A5E /* poppins-medium.ttf */, + 12742FEDB2044517AA235D2F /* poppins-regular.ttf */, + FC45F2891F654F61B834167D /* poppins-semibold.ttf */, ); name = Resources; sourceTree = ""; @@ -263,10 +263,10 @@ files = ( 81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */, 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */, - 99DA179A6F8E47A3B2958B07 /* poppins-bold.ttf in Resources */, - 577149A71B0C41A8822613D2 /* poppins-medium.ttf in Resources */, - 51711AA02FDC4A3EAC72F2E8 /* poppins-regular.ttf in Resources */, - 1042F44948434C5BBBBBA927 /* poppins-semibold.ttf in Resources */, + 38CC72CCB89541D9BB981D47 /* poppins-bold.ttf in Resources */, + 86C9997DE0514596B2DF011F /* poppins-medium.ttf in Resources */, + 21CB18AB12064015ACCED963 /* poppins-regular.ttf in Resources */, + 800F25BB93064DF9B6A345F1 /* poppins-semibold.ttf in Resources */, ); runOnlyForDeploymentPostprocessing = 0; }; diff --git a/examples/react-template/screens/Card.tsx b/examples/react-template/screens/Card.tsx index e96cd57a..4ca8a7d2 100644 --- a/examples/react-template/screens/Card.tsx +++ b/examples/react-template/screens/Card.tsx @@ -41,7 +41,7 @@ export const CardScreen = (): JSX.Element => {
CardImage & markup - + Desktop Card Vertical Markup A @@ -61,7 +61,7 @@ export const CardScreen = (): JSX.Element => { CardImage & markup - + Desktop Card Vertical Markup A @@ -136,7 +136,7 @@ export const CardScreen = (): JSX.Element => { size={"3"} src="https://i.etsystatic.com/10951167/r/il/df66c4/1860902191/il_570xN.1860902191_kuoj.jpg" /> - + Desktop Card Horizontal Card Title diff --git a/examples/react-template/screens/Divider.tsx b/examples/react-template/screens/Divider.tsx index 8461989f..a30c4260 100644 --- a/examples/react-template/screens/Divider.tsx +++ b/examples/react-template/screens/Divider.tsx @@ -19,7 +19,7 @@ export const DividerScreen = (): JSX.Element => { Lorem ipsum dolor sit amet @@ -30,7 +30,7 @@ export const DividerScreen = (): JSX.Element => { Lorem ipsum dolor sit amet diff --git a/examples/react-template/screens/Input.tsx b/examples/react-template/screens/Input.tsx index 43cc0de1..d69c3f73 100644 --- a/examples/react-template/screens/Input.tsx +++ b/examples/react-template/screens/Input.tsx @@ -33,7 +33,7 @@ export const InputScreen = (): JSX.Element => { } return ( -
+
{ return ( -
+
alert("Appels")}> Item 1 diff --git a/examples/react-template/vite.config.js b/examples/react-template/vite.config.js index e21131c5..5995f9f5 100644 --- a/examples/react-template/vite.config.js +++ b/examples/react-template/vite.config.js @@ -33,6 +33,6 @@ export default defineConfig({ modules: false, }, build: { - commonjsOptions: { transformMixedEsModules: true } // Change + commonjsOptions: { transformMixedEsModules: true } } }) diff --git a/packages/react/components/box/Box.native.tsx b/packages/react/components/box/Box.native.tsx index 3c3a5a92..070ed114 100644 --- a/packages/react/components/box/Box.native.tsx +++ b/packages/react/components/box/Box.native.tsx @@ -1,7 +1,7 @@ import React, { useState } from "react" import { ImageBackground, Platform, StyleSheet, TouchableOpacity, View, } from "react-native" import { BoxProps } from "./BoxProps" -import { getColorStyle, TrilogyColor, TrilogyColorValues, } from "../../objects/facets/Color" +import { getColorStyle, TrilogyColor, TrilogyColorValues } from "../../objects/facets/Color" import ContentLoader, { Rect } from "react-content-loader/native" import { getBackgroundStyle } from "../../objects/atoms/Background" import { ComponentName } from "../enumsComponentsName" @@ -54,7 +54,7 @@ const Box = ({ borderStyle: flat ? "solid" : undefined, borderWidth: (flat && 1) || (active && 2) || 0, borderColor: active - ? getColorStyle(TrilogyColor.MAIN) + ? getColorStyle(TrilogyColor.MAIN, 0) : getColorStyle(TrilogyColor.FONT, 1), marginTop: hat ? 35 : 0, flex: fullheight ? 1 : 0, @@ -74,7 +74,7 @@ const Box = ({ skeleton: { width: "100%", minHeight: 50, - backgroundColor: getColorStyle(TrilogyColor.NEUTRAL_LIGHT), + backgroundColor: getColorStyle(TrilogyColor.NEUTRAL_LIGHT, 0), overflow: "hidden", borderRadius: boxRadius, }, diff --git a/packages/react/components/button/Button.native.tsx b/packages/react/components/button/Button.native.tsx index 0ba7af65..0a79593f 100644 --- a/packages/react/components/button/Button.native.tsx +++ b/packages/react/components/button/Button.native.tsx @@ -7,11 +7,10 @@ import { } from "react-native" import { View } from "../view" import { - getButtonColorStyle, getLoadingClassName, getVariantClassName, } from "../../objects" -import { getColorStyle, TrilogyColor } from "../../objects/facets/Color" +import { getColorStyle, TrilogyColor, getButtonColorStyle } from "../../objects/facets/Color" import { ButtonProps } from "./ButtonProps" import { Icon, IconSize } from "../icon" import { ButtonVariant } from "./ButtonEnum" @@ -74,15 +73,15 @@ const findBorderColor = ({ return ( (disabled && variant === ButtonVariant.PRIMARY && - getColorStyle(TrilogyColor.DISABLED)) || + getColorStyle(TrilogyColor.DISABLED, 0)) || (!disabled && !!loading && variant === ButtonVariant.PRIMARY && - getColorStyle(TrilogyColor.DISABLED)) || + getColorStyle(TrilogyColor.DISABLED, 0)) || (!disabled && variant === ButtonVariant.PRIMARY && getColorStyle(TrilogyColor.INFO, 1)) || - getColorStyle(TrilogyColor.WHITE) + getColorStyle(TrilogyColor.WHITE, 0) ) } diff --git a/packages/react/components/card/Card.native.tsx b/packages/react/components/card/Card.native.tsx index 8cf1ab8d..281ef64c 100644 --- a/packages/react/components/card/Card.native.tsx +++ b/packages/react/components/card/Card.native.tsx @@ -34,7 +34,7 @@ const Card = ({ floating, onClick, skeleton, - backgroundColor = TrilogyColor.WHITE, + backgroundColor = TrilogyColor.BACKGROUND, reversed, fullheight, active, diff --git a/packages/react/components/card/CardProps.ts b/packages/react/components/card/CardProps.ts index 40b8d405..6dba31c5 100644 --- a/packages/react/components/card/CardProps.ts +++ b/packages/react/components/card/CardProps.ts @@ -8,22 +8,28 @@ import { JustifiableProps } from '../../objects/facets/Justifiable' */ export enum CardMarkup { - DIV = 'div', - A = 'a', + DIV = "div", + A = "a", } -export type CardMarkupValues = keyof typeof CardMarkup -export interface CardProps extends AlignableProps, Fullheight, JustifiableProps, Clickable, Accessibility { - children?: React.ReactNode - flat?: boolean - horizontal?: boolean - floating?: boolean - skeleton?: boolean - className?: string - onClick?: ClickEvent - markup?: CardMarkup | CardMarkupValues - backgroundColor?: TrilogyColor.WHITE | 'transparent' - reversed?: boolean - to?: string - active?: boolean +export type CardMarkupValues = keyof typeof CardMarkup; + +export interface CardProps + extends AlignableProps, + Fullheight, + JustifiableProps, + Clickable, + Accessibility { + children?: React.ReactNode; + flat?: boolean; + horizontal?: boolean; + floating?: boolean; + skeleton?: boolean; + className?: string; + onClick?: ClickEvent; + markup?: CardMarkup | CardMarkupValues; + backgroundColor?: TrilogyColor.BACKGROUND | "transparent"; + reversed?: boolean; + to?: string; + active?: boolean; } diff --git a/packages/react/components/card/content/CardContentProps.ts b/packages/react/components/card/content/CardContentProps.ts index 5d11d322..d6c4dc94 100644 --- a/packages/react/components/card/content/CardContentProps.ts +++ b/packages/react/components/card/content/CardContentProps.ts @@ -1,27 +1,27 @@ -import { ButtonMarkup, ButtonMarkupValues, ButtonVariant, ButtonVariantValues } from '../../button/ButtonEnum' -import { TitleLevels, TitleLevelValues } from '../../title/TitleEnum' -import { TextLevelValues } from '../../text/TextEnum' -import { ClickEvent } from '../../../events/OnClickEvent' -import { Accessibility, Clickable, TrilogyColor } from '../../../objects' +import { ButtonMarkup, ButtonMarkupValues, ButtonVariant, ButtonVariantValues, } from "../../button/ButtonEnum" +import { TitleLevels, TitleLevelValues } from "../../title/TitleEnum" +import { TextLevelValues } from "../../text/TextEnum" +import { ClickEvent } from "../../../events/OnClickEvent" +import { Accessibility, Clickable, TrilogyColor } from "../../../objects" /** * Card Content Interface */ export interface CardContentProps extends Clickable, Accessibility { - children?: React.ReactNode - titleSup?: string - titleSupLevel?: TextLevelValues - title?: string - titleLevel?: TitleLevels | TitleLevelValues - buttonText?: string - text?: string - textLevel?: TextLevelValues - buttonVariant?: ButtonVariant | ButtonVariantValues - buttonClick?: ClickEvent - className?: string - buttonMarkup?: ButtonMarkup | ButtonMarkupValues - onClick?: ClickEvent + children?: React.ReactNode; + titleSup?: string; + titleSupLevel?: TextLevelValues; + title?: string; + titleLevel?: TitleLevels | TitleLevelValues; + buttonText?: string; + text?: string; + textLevel?: TextLevelValues; + buttonVariant?: ButtonVariant | ButtonVariantValues; + buttonClick?: ClickEvent; + className?: string; + buttonMarkup?: ButtonMarkup | ButtonMarkupValues; + onClick?: ClickEvent; - floating?: boolean - backgroundColor?: TrilogyColor.WHITE | 'transparent' + floating?: boolean; + backgroundColor?: TrilogyColor.BACKGROUND | "transparent"; } diff --git a/packages/react/components/title/Title.native.tsx b/packages/react/components/title/Title.native.tsx index 31b0f1d5..d01dc7af 100644 --- a/packages/react/components/title/Title.native.tsx +++ b/packages/react/components/title/Title.native.tsx @@ -76,7 +76,7 @@ const Title = ({ color: ((overline || subtitle) && !level && - getColorStyle(TrilogyColor.MAIN)) || + getColorStyle(TrilogyColor.MAIN, 0)) || (!skeleton && setTypographyColor(typo, inverted)) || "transparent", textAlign: setTypographyAlign(typo), @@ -88,7 +88,7 @@ const Title = ({ alignSelf: getAlignSelf(), borderRadius: 5, borderWidth: 0.1, - borderColor: getColorStyle(TrilogyColor.NEUTRAL_LIGHT), + borderColor: getColorStyle(TrilogyColor.NEUTRAL_LIGHT, 0), overflow: "hidden", height: titlesLevels(), }, diff --git a/packages/react/context/providerTheme.native.tsx b/packages/react/context/providerTheme.native.tsx index ee3cf3bf..f7832cd1 100644 --- a/packages/react/context/providerTheme.native.tsx +++ b/packages/react/context/providerTheme.native.tsx @@ -1,6 +1,6 @@ -import React, { Dispatch, ReactNode, SetStateAction } from "react" -import { ITrilogyTheme } from "./interfaces" -import { nativeColors } from "../objects/facets/Color.native" +import React, {Dispatch, ReactNode, SetStateAction} from "react" +import {ITrilogyTheme} from "./interfaces" +import { colors } from "../objects/facets/Color" export interface ITrilogyThemeProvider { children?: ReactNode; @@ -14,11 +14,9 @@ export interface ITrilogyThemeContext { export const defaultIcons = {} -export const defaultColors = nativeColors - export const defaultTheme: ITrilogyTheme = { icons: defaultIcons, - colors: defaultColors, + colors: colors, } export const defaultContextValue = { diff --git a/packages/react/context/providerTheme.tsx b/packages/react/context/providerTheme.tsx index bffefdfb..fd4ce6ea 100644 --- a/packages/react/context/providerTheme.tsx +++ b/packages/react/context/providerTheme.tsx @@ -1,4 +1,4 @@ -import React from "react" +import React, {Dispatch, SetStateAction} from "react" import { ITrilogyTheme } from "./interfaces" export const defaultTheme: ITrilogyTheme = { @@ -6,6 +6,18 @@ export const defaultTheme: ITrilogyTheme = { colors: {}, } +interface ITrilogyThemeContext { + theme: ITrilogyTheme; + setTheme: Dispatch>; +} + +const defaultContextValue = { + theme: defaultTheme, + setTheme: () => undefined, +} + +export const TrilogyThemeContext = React.createContext(defaultContextValue) + export const TrilogyThemeProvider = () => { // eslint-disable-next-line react/jsx-no-useless-fragment return <> diff --git a/packages/react/objects/Typography/TypographyColor.ts b/packages/react/objects/Typography/TypographyColor.ts index 3732a340..4f970897 100644 --- a/packages/react/objects/Typography/TypographyColor.ts +++ b/packages/react/objects/Typography/TypographyColor.ts @@ -31,42 +31,42 @@ export const setTypographyColor = ( ): string => { return ( (Array.isArray(typo) && typo.includes(TypographyColor.TEXT_ACCENT) - ? getColorStyle(TrilogyColor.ACCENT) + ? getColorStyle(TrilogyColor.ACCENT, 0) : typo === TypographyColor.TEXT_ACCENT && - getColorStyle(TrilogyColor.ACCENT)) || + getColorStyle(TrilogyColor.ACCENT, 0)) || (Array.isArray(typo) && typo.includes(TypographyColor.TEXT_MAIN) - ? getColorStyle(TrilogyColor.MAIN) + ? getColorStyle(TrilogyColor.MAIN, 0) : typo === TypographyColor.TEXT_MAIN && - getColorStyle(TrilogyColor.MAIN)) || + getColorStyle(TrilogyColor.MAIN, 0)) || (Array.isArray(typo) && typo.includes(TypographyColor.TEXT_INFO) - ? getColorStyle(TrilogyColor.INFO) + ? getColorStyle(TrilogyColor.INFO, 0) : typo === TypographyColor.TEXT_INFO && - getColorStyle(TrilogyColor.INFO)) || + getColorStyle(TrilogyColor.INFO, 0)) || (Array.isArray(typo) && typo.includes(TypographyColor.TEXT_SUCCESS) - ? getColorStyle(TrilogyColor.SUCCESS) + ? getColorStyle(TrilogyColor.SUCCESS, 0) : typo === TypographyColor.TEXT_SUCCESS && - getColorStyle(TrilogyColor.SUCCESS)) || + getColorStyle(TrilogyColor.SUCCESS, 0)) || (Array.isArray(typo) && typo.includes(TypographyColor.TEXT_WARNING) - ? getColorStyle(TrilogyColor.WARNING) + ? getColorStyle(TrilogyColor.WARNING, 0) : typo === TypographyColor.TEXT_WARNING && - getColorStyle(TrilogyColor.WARNING)) || + getColorStyle(TrilogyColor.WARNING, 0)) || (Array.isArray(typo) && typo.includes(TypographyColor.TEXT_ERROR) - ? getColorStyle(TrilogyColor.ERROR) + ? getColorStyle(TrilogyColor.ERROR, 0) : typo === TypographyColor.TEXT_ERROR && - getColorStyle(TrilogyColor.ERROR)) || + getColorStyle(TrilogyColor.ERROR, 0)) || (Array.isArray(typo) && typo.includes(TypographyColor.TEXT_NEUTRAL_DARK) - ? getColorStyle(TrilogyColor.NEUTRAL_DARK) + ? getColorStyle(TrilogyColor.NEUTRAL_DARK, 0) : typo === TypographyColor.TEXT_NEUTRAL_DARK && - getColorStyle(TrilogyColor.NEUTRAL_DARK)) || + getColorStyle(TrilogyColor.NEUTRAL_DARK, 0)) || (Array.isArray(typo) && typo.includes(TypographyColor.TEXT_NEUTRAL) - ? getColorStyle(TrilogyColor.NEUTRAL) + ? getColorStyle(TrilogyColor.NEUTRAL, 0) : typo === TypographyColor.TEXT_NEUTRAL && - getColorStyle(TrilogyColor.NEUTRAL)) || + getColorStyle(TrilogyColor.NEUTRAL, 0)) || (Array.isArray(typo) && typo.includes(TypographyColor.TEXT_WHITE) - ? getColorStyle(TrilogyColor.WHITE) + ? getColorStyle(TrilogyColor.WHITE, 0) : typo === TypographyColor.TEXT_WHITE && - getColorStyle(TrilogyColor.WHITE)) || - (inverted && !typo && getColorStyle(TrilogyColor.WHITE)) || - getColorStyle(TrilogyColor.MAIN) + getColorStyle(TrilogyColor.WHITE, 0)) || + (inverted && !typo && getColorStyle(TrilogyColor.WHITE, 0)) || + getColorStyle(TrilogyColor.MAIN, 0) ) } diff --git a/packages/react/objects/facets/Color.native.tsx b/packages/react/objects/facets/Color.native.tsx deleted file mode 100644 index ad0689b5..00000000 --- a/packages/react/objects/facets/Color.native.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import { TrilogyThemeContext } from "../../context/providerTheme.native" -import { useContext } from "react" - -/** - * Trilogy color - */ -export enum TrilogyColor { - BACKGROUND = "BACKGROUND", - MAIN = "MAIN", - ACCENT = "ACCENT", - FONT = "FONT", - SUCCESS = "SUCCESS", - INFO = "INFO", - WARNING = "WARNING", - ERROR = "ERROR", - DISABLED = "DISABLED", - HOVERED = "HOVERED", - NEUTRAL = "NEUTRAL", - NEUTRAL_DARK = "NEUTRAL_DARK", - NEUTRAL_LIGHT = "NEUTRAL_LIGHT", - WHITE = "WHITE", -} - -export const nativeColors: Record = { - [TrilogyColor.BACKGROUND]: ["#fff", "#E9E9E9"], - [TrilogyColor.MAIN]: ["#3d5d7e", "#eff2f8"], - [TrilogyColor.ACCENT]: ["#da641b", "#bb5118"], - [TrilogyColor.FONT]: ["#3d5d7e", "#BBC6CD"], - [TrilogyColor.SUCCESS]: ["#007B52", "#cae8ca"], - [TrilogyColor.INFO]: ["#1A688A", "#c8dbec"], - [TrilogyColor.WARNING]: ["#FFBB33", "#ecdbc6"], - [TrilogyColor.ERROR]: ["#D42D02", "#eecccc"], - [TrilogyColor.DISABLED]: ["#646464", "#D1D1D1"], - [TrilogyColor.HOVERED]: ["#F4F4F4", "#F4F4F4"], - [TrilogyColor.NEUTRAL]: ["#707070", "#F4F4F4"], - [TrilogyColor.NEUTRAL_DARK]: ["#646464", "#E9E9E9"], - [TrilogyColor.NEUTRAL_LIGHT]: ["#E9E9E9", "#E9E9E9"], - [TrilogyColor.WHITE]: ["#fff", "#E9E9E9"], -} - -export type TrilogyColorValues = `${TrilogyColor}`; - -/** - * Returns color's style depending on Trilogy Color - * @param trilogyColor {string} - Trilogy Color - * @param index {number} - Index of color ( 1 for BG ) - * @returns {string} - Color style value - */ - -export const getColorStyle = ( - trilogyColor: TrilogyColor | TrilogyColorValues, - index?: number -): string => { - const { theme } = useContext(TrilogyThemeContext) - const colors = theme?.colors || nativeColors - - const colorArray = - colors[trilogyColor] || nativeColors[trilogyColor] || colors.default - const colorIndex = - index !== undefined && index >= 0 && index < colorArray.length ? index : 0 - - if (!trilogyColor || !colors[trilogyColor]) { - return colors.default - } - return colorArray[colorIndex] -} - -export const getButtonColorStyle = (buttonVariant?: string): string => { - const { - theme: { colors }, - // eslint-disable-next-line react-hooks/rules-of-hooks - } = useContext(TrilogyThemeContext) - - switch (buttonVariant) { - case "ACCENT": - return TrilogyColor.ACCENT - case "PRIMARY": - return TrilogyColor.MAIN - case "SECONDARY": - return TrilogyColor.HOVERED - case "GHOST": - return TrilogyColor.WHITE - default: - return TrilogyColor.MAIN - } -} diff --git a/packages/react/objects/facets/Color.tsx b/packages/react/objects/facets/Color.tsx index 1a65233c..206601b0 100644 --- a/packages/react/objects/facets/Color.tsx +++ b/packages/react/objects/facets/Color.tsx @@ -1,3 +1,6 @@ +import {useContext} from "react"; +import {TrilogyThemeContext} from "../../context/providerTheme"; + /** * Trilogy color */ @@ -23,23 +26,22 @@ export type TrilogyColorValues = `${TrilogyColor}`; /** * Trilogy color values */ - export const colors: Record = { - [TrilogyColor.BACKGROUND]: ["white", "#fff", "main", "#E9E9E9"], - [TrilogyColor.WHITE]: ["white", "#fff", "main", "#E9E9E9"], - [TrilogyColor.MAIN]: ["main", "#3d5d7e", "white", "#eff2f8"], - [TrilogyColor.ACCENT]: ["accent", "#da641b", "white", "#bb5118"], - [TrilogyColor.FONT]: ["main", "#3d5d7e", "white", "#BBC6CD"], - [TrilogyColor.SUCCESS]: ["success", "#007B52", "white", "#cae8ca"], - [TrilogyColor.INFO]: ["info", "#1A688A", "white", "#c8dbec"], - [TrilogyColor.WARNING]: ["warning", "#FFBB33", "white", "#ecdbc6"], - [TrilogyColor.ERROR]: ["error", "#D42D02", "white", "#eecccc"], - [TrilogyColor.DISABLED]: ["disabled", "#646464", "white", "#D1D1D1"], - [TrilogyColor.NEUTRAL]: ["grey", "#707070", "white", "#F4F4F4"], - [TrilogyColor.NEUTRAL_DARK]: ["grey-dark", "#646464", "white", "#E9E9E9"], - [TrilogyColor.NEUTRAL_LIGHT]: ["#E9E9E9", "#E9E9E9"], - [TrilogyColor.HOVERED]: ["hovered", "#F4F4F4", "white", "#F4F4F4"], -} + [TrilogyColor.BACKGROUND]: navigator.userAgent !== undefined ? ["white", "#fff", "main", "#E9E9E9"] : ["#fff", "#E9E9E9"], + [TrilogyColor.MAIN]: navigator.userAgent !== undefined ? ["main", "#3d5d7e", "white", "#eff2f8"] : ["#3d5d7e", "#eff2f8"], + [TrilogyColor.WHITE]: navigator.userAgent !== undefined ? ["white", "#fff", "main", "#E9E9E9"] : ["#fff", "#E9E9E9"], + [TrilogyColor.ACCENT]: navigator.userAgent !== undefined ? ["accent", "#da641b", "white", "#bb5118"] : ["#da641b", "#bb5118"], + [TrilogyColor.FONT]: navigator.userAgent !== undefined ? ["main", "#3d5d7e", "white", "#BBC6CD"] : ["#3d5d7e", "#BBC6CD"], + [TrilogyColor.SUCCESS]: navigator.userAgent !== undefined ? ["success", "#007B52", "white", "#cae8ca"] : ["#007B52", "#cae8ca"], + [TrilogyColor.INFO]: navigator.userAgent !== undefined ? ["info", "#1A688A", "white", "#c8dbec"] : ["#1A688A", "#c8dbec"], + [TrilogyColor.WARNING]: navigator.userAgent !== undefined ? ["warning", "#FFBB33", "white", "#ecdbc6"] : ["#FFBB33", "#ecdbc6"], + [TrilogyColor.ERROR]: navigator.userAgent !== undefined ? ["error", "#D42D02", "white", "#eecccc"] : ["#D42D02", "#eecccc"], + [TrilogyColor.DISABLED]: navigator.userAgent !== undefined ? ["disabled", "#646464", "white", "#D1D1D1"] : ["#646464", "#D1D1D1"], + [TrilogyColor.NEUTRAL]: navigator.userAgent !== undefined ? ["grey", "#707070", "white", "#F4F4F4"] : ["#707070", "#F4F4F4"], + [TrilogyColor.NEUTRAL_DARK]: navigator.userAgent !== undefined ? ["grey-dark", "#646464", "white", "#E9E9E9"] : ["#646464", "#E9E9E9"], + [TrilogyColor.NEUTRAL_LIGHT]: ["grey-light", "#E9E9E9", "white", "#E9E9E9"], + [TrilogyColor.HOVERED]: navigator.userAgent !== undefined ? ["hovered", "#F4F4F4", "white", "#F4F4F4"] : ["#F4F4F4", "#F4F4F4"] +}; /** * Returns color's className depending on Trilogy Color @@ -104,16 +106,27 @@ export const getButtonColorStyle = (buttonVariant?: string): string => { * @param index {number} - Index of color ( 1 for BG ) * @returns {string} - Color style value */ - export const getColorStyle = ( trilogyColor: TrilogyColor | TrilogyColorValues, index?: number ): string => { - const color = colors[trilogyColor] + if (navigator.userAgent === undefined) { + const { theme } = useContext(TrilogyThemeContext) + const colorsStyle = theme?.colors || colors + + const colorArray = colorsStyle[trilogyColor] || colorsStyle.default + const colorIndex = + index !== undefined && index >= 0 && index < colorArray.length ? index : 0 - const colorArray = colors[trilogyColor] - const colorIndex = - index !== undefined && index >= 0 && index < colorArray.length ? index : 0 + if (!trilogyColor || !colors[trilogyColor]) { + return colorsStyle.default + } + return colorArray[colorIndex] + } else { + const colorArray = colors[trilogyColor] + const colorIndex = + index !== undefined && index >= 0 && index < colorArray.length ? index : 0 - return colorArray[colorIndex] + return colorArray[colorIndex] + } } diff --git a/packages/styles/vite.config.js b/packages/styles/vite.config.js index 8a928630..24d45e5b 100644 --- a/packages/styles/vite.config.js +++ b/packages/styles/vite.config.js @@ -3,7 +3,7 @@ import path from "path"; import glob from "glob"; import {generateIconsScss} from "./config/plugins/vite-plugin-generate-icons-scss"; import {cssPlugin} from "./config/plugins/vite-plugin-mangler"; -import copy from "rollup-plugin-copy"; + export default defineConfig({ plugins: [ generateIconsScss({