diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx index 83cd4ed682..e65b595ca0 100644 --- a/apps/website/pages/_app.tsx +++ b/apps/website/pages/_app.tsx @@ -2,11 +2,11 @@ import { ReactElement, ReactNode, useMemo, useState } from "react"; import type { NextPage } from "next"; import type { AppProps } from "next/app"; import Head from "next/head"; -import { DxcApplicationLayout, DxcTextInput, DxcToastsQueue, HalstackProvider } from "@dxc-technology/halstack-react"; +import { DxcApplicationLayout, DxcTextInput, DxcToastsQueue } from "@dxc-technology/halstack-react"; import SidenavLogo from "@/common/sidenav/SidenavLogo"; import MainContent from "@/common/MainContent"; import { useRouter } from "next/router"; -import { LinksSectionDetails, LinksSections, themeGeneratorLinks } from "@/common/pagesList"; +import { LinksSectionDetails, LinksSections } from "@/common/pagesList"; import Link from "next/link"; import StatusBadge from "@/common/StatusBadge"; import "../global-styles.css"; @@ -17,17 +17,8 @@ type NextPageWithLayout = NextPage & { type AppPropsWithLayout = AppProps & { Component: NextPageWithLayout; }; -type ApplicationLayoutWrapperProps = { - condition: boolean; - wrapper: (_children: ReactNode) => JSX.Element; - children: ReactNode; -}; - -const ApplicationLayoutWrapper = ({ condition, wrapper, children }: ApplicationLayoutWrapperProps): JSX.Element => ( - <>{condition ? wrapper(children) : children} -); -const App = ({ Component, pageProps }: AppPropsWithLayout) => { +export default function App({ Component, pageProps }: AppPropsWithLayout) { const getLayout = Component.getLayout || ((page) => page); const componentWithLayout = getLayout(); const [filter, setFilter] = useState(""); @@ -56,69 +47,55 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => { - - ( - }> - - { - setFilter(value); - }} - size="fillParent" - clearable - margin={{ - top: "large", - bottom: "large", - right: "medium", - left: "medium", - }} - /> - - {filteredLinks?.map(({ label, links }) => ( - - - {links.map(({ label, path, status }) => ( - - - {label} - {status && status !== "stable" && } - - - ))} - - + }> + + { + setFilter(value); + }} + size="fillParent" + clearable + margin={{ + top: "large", + bottom: "large", + right: "medium", + left: "medium", + }} + /> + + {filteredLinks?.map(({ label, links }) => ( + + + {links.map(({ label, path, status }) => ( + + + {label} + {status && status !== "stable" && } + + ))} - - - GitHub - - - - } - > - - - {children} - - - - )} - > - {componentWithLayout} - - + + + ))} + + + GitHub + + + + } + > + + + {componentWithLayout} + + + ); -}; - -export default App; +} diff --git a/apps/website/pages/components/alert/code.tsx b/apps/website/pages/components/alert/code.tsx index d0f75530b5..fb0caef976 100644 --- a/apps/website/pages/components/alert/code.tsx +++ b/apps/website/pages/components/alert/code.tsx @@ -3,16 +3,14 @@ import type { ReactElement } from "react"; import AlertPageLayout from "screens/components/alert/AlertPageLayout"; import AlertCodePage from "screens/components/alert/code/AlertCodePage"; -const Code = () => { - return ( - <> - - Alert Code — Halstack Design System - - - - ); -}; +const Code = () => ( + <> + + Alert code — Halstack Design System + + + +); Code.getLayout = (page: ReactElement) => {page}; diff --git a/apps/website/pages/components/alert/index.tsx b/apps/website/pages/components/alert/index.tsx index a4781141d7..d7234a040c 100644 --- a/apps/website/pages/components/alert/index.tsx +++ b/apps/website/pages/components/alert/index.tsx @@ -3,16 +3,14 @@ import type { ReactElement } from "react"; import AlertPageLayout from "screens/components/alert/AlertPageLayout"; import AlertOverviewPage from "screens/components/alert/overview/AlertOverviewPage"; -const Index = () => { - return ( - <> - - Alert — Halstack Design System - - - - ); -}; +const Index = () => ( + <> + + Alert — Halstack Design System + + + +); Index.getLayout = (page: ReactElement) => {page}; diff --git a/apps/website/pages/components/button/code.tsx b/apps/website/pages/components/button/code.tsx index dd7055f5a4..ce0e647440 100644 --- a/apps/website/pages/components/button/code.tsx +++ b/apps/website/pages/components/button/code.tsx @@ -6,7 +6,7 @@ import ButtonCodePage from "screens/components/button/code/ButtonCodePage"; const Code = () => ( <> - Button Code — Halstack Design System + Button code — Halstack Design System diff --git a/apps/website/pages/components/contextual-menu/code.tsx b/apps/website/pages/components/contextual-menu/code.tsx index 265615d2ad..717b3688c1 100644 --- a/apps/website/pages/components/contextual-menu/code.tsx +++ b/apps/website/pages/components/contextual-menu/code.tsx @@ -6,7 +6,7 @@ import ContextualMenuCodePage from "screens/components/contextual-menu/code/Cont const Code = () => ( <> - Contextual Menu Code — Halstack Design System + Contextual menu code — Halstack Design System diff --git a/apps/website/pages/components/contextual-menu/index.tsx b/apps/website/pages/components/contextual-menu/index.tsx index 9cfdf09f6a..c948ce1a04 100644 --- a/apps/website/pages/components/contextual-menu/index.tsx +++ b/apps/website/pages/components/contextual-menu/index.tsx @@ -3,15 +3,15 @@ import type { ReactElement } from "react"; import ContextualMenuOverviewPage from "screens/components/contextual-menu/overview/ContextualMenuOverviewPage"; import ContextualMenuPageLayout from "screens/components/contextual-menu/ContextualMenuPageLayout"; -const Usage = () => ( +const Index = () => ( <> - Contextual Menu — Halstack Design System + Contextual menu — Halstack Design System ); -Usage.getLayout = (page: ReactElement) => {page}; +Index.getLayout = (page: ReactElement) => {page}; -export default Usage; +export default Index; diff --git a/apps/website/pages/components/divider/code.tsx b/apps/website/pages/components/divider/code.tsx index f0352fdc7d..3c086e9dfc 100644 --- a/apps/website/pages/components/divider/code.tsx +++ b/apps/website/pages/components/divider/code.tsx @@ -3,16 +3,14 @@ import type { ReactElement } from "react"; import DividerPageLayout from "screens/components/divider/DividerPageLayout"; import DividerCodePage from "screens/components/divider/code/DividerCodePage"; -const Code = () => { - return ( - <> - - Divider Code — Halstack Design System - - - - ); -}; +const Code = () => ( + <> + + Divider code — Halstack Design System + + + +); Code.getLayout = (page: ReactElement) => {page}; diff --git a/apps/website/pages/components/divider/index.tsx b/apps/website/pages/components/divider/index.tsx index b0aa521886..645395c147 100644 --- a/apps/website/pages/components/divider/index.tsx +++ b/apps/website/pages/components/divider/index.tsx @@ -3,16 +3,14 @@ import type { ReactElement } from "react"; import DividerOverviewPage from "screens/components/divider/overview/DividerOverviewPage"; import DividerPageLayout from "screens/components/divider/DividerPageLayout"; -const Index = () => { - return ( - <> - - Divider — Halstack Design System - - - - ); -}; +const Index = () => ( + <> + + Divider — Halstack Design System + + + +); Index.getLayout = (page: ReactElement) => {page}; diff --git a/apps/website/pages/overview/component-lifecycle.tsx b/apps/website/pages/overview/component-lifecycle.tsx index bf22dd182c..44ae3019ca 100644 --- a/apps/website/pages/overview/component-lifecycle.tsx +++ b/apps/website/pages/overview/component-lifecycle.tsx @@ -1,15 +1,13 @@ import Head from "next/head"; import ComponentLifecyclePage from "screens/overview/component-lifecycle/ComponentLifecyclePage"; -const ComponentLifecycle = () => { - return ( - <> - - Component lifecycle — Halstack Design System - - - - ); -}; +const ComponentLifecycle = () => ( + <> + + Component lifecycle — Halstack Design System + + + +); export default ComponentLifecycle; diff --git a/apps/website/pages/overview/installation.tsx b/apps/website/pages/overview/installation.tsx index 3c7a91063d..a1a34d8866 100644 --- a/apps/website/pages/overview/installation.tsx +++ b/apps/website/pages/overview/installation.tsx @@ -1,15 +1,13 @@ import Head from "next/head"; import InstallationPage from "screens/overview/installation/InstallationPage"; -const Installation = () => { - return ( - <> - - Installation — Halstack Design System - - - - ); -}; +const Installation = () => ( + <> + + Installation — Halstack Design System + + + +); export default Installation; diff --git a/apps/website/pages/overview/introduction.tsx b/apps/website/pages/overview/introduction.tsx index 69c9e0bc73..18847c353d 100644 --- a/apps/website/pages/overview/introduction.tsx +++ b/apps/website/pages/overview/introduction.tsx @@ -1,15 +1,13 @@ import Head from "next/head"; import IntroductionPage from "screens/overview/introduction/IntroductionPage"; -const Introduction = () => { - return ( - <> - - Introduction — Halstack Design System - - - - ); -}; +const Introduction = () => ( + <> + + Introduction — Halstack Design System + + + +); export default Introduction; diff --git a/apps/website/pages/overview/releases.tsx b/apps/website/pages/overview/releases.tsx index e5ee241e14..4652b1ee68 100644 --- a/apps/website/pages/overview/releases.tsx +++ b/apps/website/pages/overview/releases.tsx @@ -3,8 +3,8 @@ import Head from "next/head"; import ReleasesPage from "screens/overview/releases/ReleasesPage"; type Release = { - name: string; body: string; + name: string; published_at: string; }; @@ -16,15 +16,13 @@ export const getStaticProps: GetStaticProps<{ return { props: { releases } }; }; -const Releases = ({ releases }: InferGetStaticPropsType) => { - return ( - <> - - Releases — Halstack Design System - - - - ); -}; +const Releases = ({ releases }: InferGetStaticPropsType) => ( + <> + + Releases — Halstack Design System + + + +); export default Releases; diff --git a/apps/website/pages/principles/color.tsx b/apps/website/pages/principles/color.tsx index bb4d468b39..b228b907ce 100644 --- a/apps/website/pages/principles/color.tsx +++ b/apps/website/pages/principles/color.tsx @@ -1,15 +1,13 @@ import Head from "next/head"; import ColorPage from "screens/principles/color/ColorPage"; -const Color = () => { - return ( - <> - - Color — Halstack Design System - - - - ); -}; +const Color = () => ( + <> + + Color — Halstack Design System + + + +); export default Color; diff --git a/apps/website/pages/principles/data-visualization.tsx b/apps/website/pages/principles/data-visualization.tsx index 14b8d5f605..8958669537 100644 --- a/apps/website/pages/principles/data-visualization.tsx +++ b/apps/website/pages/principles/data-visualization.tsx @@ -1,15 +1,13 @@ import Head from "next/head"; import DataVisualizationPage from "screens/principles/data-visualization/DataVisualizationPage"; -const DataVisualization = () => { - return ( - <> - - Data visualization — Halstack Design System - - - - ); -}; +const DataVisualization = () => ( + <> + + Data visualization — Halstack Design System + + + +); export default DataVisualization; diff --git a/apps/website/pages/principles/iconography.tsx b/apps/website/pages/principles/iconography.tsx index c98989a0c7..288ceefbad 100644 --- a/apps/website/pages/principles/iconography.tsx +++ b/apps/website/pages/principles/iconography.tsx @@ -1,15 +1,13 @@ import Head from "next/head"; import IconographyPage from "screens/principles/iconography/IconographyPage"; -const Iconography = () => { - return ( - <> - - Iconography — Halstack Design System - - - - ); -}; +const Iconography = () => ( + <> + + Iconography — Halstack Design System + + + +); export default Iconography; diff --git a/apps/website/pages/principles/layout.tsx b/apps/website/pages/principles/layout.tsx index fde9d90088..887be217a9 100644 --- a/apps/website/pages/principles/layout.tsx +++ b/apps/website/pages/principles/layout.tsx @@ -1,15 +1,13 @@ import Head from "next/head"; import LayoutPage from "screens/principles/layout/LayoutPage"; -const Layout = () => { - return ( - <> - - Layout — Halstack Design System - - - - ); -}; +const Layout = () => ( + <> + + Layout — Halstack Design System + + + +); export default Layout; diff --git a/apps/website/pages/principles/localization.tsx b/apps/website/pages/principles/localization.tsx index 6cb8915c03..70bba38057 100644 --- a/apps/website/pages/principles/localization.tsx +++ b/apps/website/pages/principles/localization.tsx @@ -1,15 +1,13 @@ import Head from "next/head"; import LocalizationPage from "screens/principles/localization/LocalizationPage"; -const Localization = () => { - return ( - <> - - Localization — Halstack Design System - - - - ); -}; +const Localization = () => ( + <> + + Localization — Halstack Design System + + + +); export default Localization; diff --git a/apps/website/pages/principles/spacing.tsx b/apps/website/pages/principles/spacing.tsx index 8a92cb67a7..b541a112ed 100644 --- a/apps/website/pages/principles/spacing.tsx +++ b/apps/website/pages/principles/spacing.tsx @@ -1,15 +1,13 @@ import Head from "next/head"; import SpacingPage from "screens/principles/spacing/SpacingPage"; -const Spacing = () => { - return ( - <> - - Spacing — Halstack Design System - - - - ); -}; +const Spacing = () => ( + <> + + Spacing — Halstack Design System + + + +); export default Spacing; diff --git a/apps/website/pages/principles/themes.tsx b/apps/website/pages/principles/themes.tsx deleted file mode 100644 index 6a728a3475..0000000000 --- a/apps/website/pages/principles/themes.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import Head from "next/head"; -import ThemesPage from "screens/principles/themes/ThemesPage"; - -const Themes = () => { - return ( - <> - - Themes — Halstack Design System - - - - ); -}; - -export default Themes; diff --git a/apps/website/pages/principles/typography/index.tsx b/apps/website/pages/principles/typography/index.tsx index 89fd30df87..385844ea5d 100644 --- a/apps/website/pages/principles/typography/index.tsx +++ b/apps/website/pages/principles/typography/index.tsx @@ -3,19 +3,15 @@ import type { ReactElement } from "react"; import TypographyCodePage from "screens/principles/typography/code/TypographyCodePage"; import TypographyPageLayout from "screens/principles/typography/TypographyPageLayout"; -const Index = () => { - return ( - <> - - Typography — Halstack Design System - - - - ); -}; +const Index = () => ( + <> + + Typography — Halstack Design System + + + +); -Index.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; +Index.getLayout = (page: ReactElement) => {page}; export default Index; diff --git a/apps/website/pages/principles/typography/usage.tsx b/apps/website/pages/principles/typography/usage.tsx index 478a4547f5..f78f797bd6 100644 --- a/apps/website/pages/principles/typography/usage.tsx +++ b/apps/website/pages/principles/typography/usage.tsx @@ -3,19 +3,15 @@ import { ReactElement } from "react"; import TypographyUsagePage from "screens/principles/typography/usage/TypographyUsagePage"; import TypographyPageLayout from "screens/principles/typography/TypographyPageLayout"; -const Usage = () => { - return ( - <> - - Typography Usage — Halstack Design System - - - - ); -}; +const Usage = () => ( + <> + + Typography usage — Halstack Design System + + + +); -Usage.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; +Usage.getLayout = (page: ReactElement) => {page}; export default Usage; diff --git a/apps/website/pages/theme-generator/advanced-theme.tsx b/apps/website/pages/theme-generator/advanced-theme.tsx deleted file mode 100644 index 7faa403c4e..0000000000 --- a/apps/website/pages/theme-generator/advanced-theme.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import Head from "next/head"; -import ThemeGeneratorPage from "screens/theme-generator/ThemeGenerator"; - -const ThemeGenerator = () => { - return ( - <> - - Advanced theme generator — Halstack Design System - - - - ); -}; - -export default ThemeGenerator; diff --git a/apps/website/pages/theme-generator/opinionated-theme.tsx b/apps/website/pages/theme-generator/opinionated-theme.tsx deleted file mode 100644 index 1586501eec..0000000000 --- a/apps/website/pages/theme-generator/opinionated-theme.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import Head from "next/head"; -import ThemeGeneratorPage from "screens/theme-generator/ThemeGenerator"; - -const ThemeGenerator = () => { - return ( - <> - - Opinionated theme generator — Halstack Design System - - - - ); -}; - -export default ThemeGenerator; diff --git a/apps/website/pages/utilities/halstack-provider.tsx b/apps/website/pages/utilities/halstack-provider.tsx index 181bf10b04..932812e0cb 100644 --- a/apps/website/pages/utilities/halstack-provider.tsx +++ b/apps/website/pages/utilities/halstack-provider.tsx @@ -1,15 +1,13 @@ import Head from "next/head"; import HalstackProviderPage from "screens/utilities/halstack-provider/HalstackProviderPage"; -const Index = () => { - return ( - <> - - Halstack Provider — Halstack Design System - - - - ); -}; +const Index = () => ( + <> + + Halstack provider — Halstack Design System + + + +); export default Index; diff --git a/apps/website/public/favicon.ico b/apps/website/public/favicon.ico deleted file mode 100644 index 718d6fea48..0000000000 Binary files a/apps/website/public/favicon.ico and /dev/null differ diff --git a/apps/website/public/vercel.svg b/apps/website/public/vercel.svg deleted file mode 100644 index fbf0e25a65..0000000000 --- a/apps/website/public/vercel.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - \ No newline at end of file diff --git a/apps/website/screens/common/Code.tsx b/apps/website/screens/common/Code.tsx index 4ab5a5722c..c3f91fb001 100644 --- a/apps/website/screens/common/Code.tsx +++ b/apps/website/screens/common/Code.tsx @@ -1,11 +1,33 @@ -import styled from "styled-components"; +import { ReactNode } from "react"; +import styled, { css } from "styled-components"; -const StyledCode = styled.code` - background-color: #f2eafa; - color: #5f249f; +const codeStyles = css` + background-color: var(--color-bg-primary-lighter); + border-radius: var(--border-radius-s); + color: var(--color-fg-primary-stronger); + padding: var(--spacing-padding-xxxs) var(--spacing-padding-xxs); +`; + +const Code = styled.code` + ${codeStyles} font-size: inherit; - padding: 2px 4px; - border-radius: 0.25rem; `; -export default StyledCode; +export default Code; + +export const TableCode = styled.code` + ${codeStyles} + font-size: var(--typography-label-s); +`; + +const ExtendedCodeContainer = styled.div` + ${codeStyles} + white-space: pre; + font-size: var(--typography-label-s); +`; + +export const ExtendedTableCode = ({ children }: { children: ReactNode }) => ( + + {children} + +); diff --git a/apps/website/screens/common/CodeBlock.tsx b/apps/website/screens/common/CodeBlock.tsx index cf5e886598..2bd66538f3 100644 --- a/apps/website/screens/common/CodeBlock.tsx +++ b/apps/website/screens/common/CodeBlock.tsx @@ -1,42 +1,37 @@ import { ReactNode, useState } from "react"; -import { DxcButton, DxcContainer, DxcFlex, HalstackProvider } from "@dxc-technology/halstack-react"; +import { DxcButton, DxcContainer, DxcFlex } from "@dxc-technology/halstack-react"; import styled from "styled-components"; const PreformattedText = styled.pre` - position: relative; + background-color: var(--color-bg-neutral-lighter); + border: var(--border-width-s) var(--border-style-default) var(--border-color-neutral-light); + border-radius: var(--border-radius-s); box-sizing: border-box; margin: 0; - border-radius: 0.25rem; - padding: 1rem 1rem 1rem 1.5rem; - background-color: #333; + padding: var(--spacing-padding-m) var(--spacing-padding-m) var(--spacing-padding-m) var(--spacing-padding-l); + position: relative; `; const Code = styled.code` - font-size: 0.875rem; + color: var(--color-fg-neutral-dark); + font-size: var(--typography-body-s); white-space: pre-wrap; word-wrap: break-word; - color: #fff; `; -const buttonTokens = { - button: { - tertiaryDefaultFontColor: "#fff", - tertiaryHoverDefaultBackgroundColor: "#4d4d4d", - tertiaryActiveDefaultBackgroundColor: "#666666", - }, -}; - -export default function CodeBlock({ children }: { children: ReactNode; language?: string }) { +export default function CodeBlock({ children }: { children: ReactNode }) { const [copyActionIsVisible, setCopyActionIsVisible] = useState(false); const [copied, setCopied] = useState(false); - const onMouseEnter = () => { + const handleOnMouseEnter = () => { setCopyActionIsVisible(true); }; - const onMouseLeave = () => { + + const handleOnMouseLeave = () => { setCopyActionIsVisible(false); setCopied(false); }; + const copyCode = () => { navigator.clipboard.writeText(children as string).then(() => { setCopied(true); @@ -48,19 +43,17 @@ export default function CodeBlock({ children }: { children: ReactNode; language? return ( - + {children} {copyActionIsVisible && ( - - - - + + )} diff --git a/apps/website/screens/common/ComponentHeading.tsx b/apps/website/screens/common/ComponentHeading.tsx index 66587f04d9..e0b5a6d65a 100644 --- a/apps/website/screens/common/ComponentHeading.tsx +++ b/apps/website/screens/common/ComponentHeading.tsx @@ -1,9 +1,5 @@ import { DxcHeading } from "@dxc-technology/halstack-react"; -type ComponentHeadingProps = { - name: string; -}; - -const ComponentHeading = ({ name }: ComponentHeadingProps) => ; - -export default ComponentHeading; +export default function ComponentHeading({ name }: { name: string }) { + return ; +} diff --git a/apps/website/screens/common/DocFooter.tsx b/apps/website/screens/common/DocFooter.tsx index 94f5b76df0..365f63d7e3 100644 --- a/apps/website/screens/common/DocFooter.tsx +++ b/apps/website/screens/common/DocFooter.tsx @@ -1,82 +1,41 @@ import { useRouter } from "next/router"; -import { DxcTypography, DxcLink, DxcFlex } from "@dxc-technology/halstack-react"; +import { DxcTypography, DxcLink, DxcFlex, DxcDivider } from "@dxc-technology/halstack-react"; import Link from "next/link"; import { getNavigationLinks } from "./pagesList"; -import styled from "styled-components"; -const arrowForward = ( - - - - -); - -const arrowBack = ( - - - - - - -); - -const reportIssueIcon = ( - - - -); - -const editIcon = ( - - - -); - -const DocFooter = ({ githubLink }: { githubLink: string }) => { +export default function DocFooter({ githubLink }: { githubLink: string }) { const { pathname } = useRouter(); - const { previousLink, nextLink } = getNavigationLinks(pathname); + const { nextLink, previousLink } = getNavigationLinks(pathname); return ( - - - - +
+ + + Edit this page on GitHub - + Report an issue on GitHub - + - + {previousLink && ( <> Previous - {previousLink.label} + {previousLink.label} )} - + {nextLink && ( <> Next - + {nextLink.label} @@ -85,17 +44,6 @@ const DocFooter = ({ githubLink }: { githubLink: string }) => { - +
); -}; - -const DocFooterContainer = styled.div` - max-width: 800px; -`; - -const Separator = styled.div` - height: 1px; - background-color: #999999; -`; - -export default DocFooter; +} diff --git a/apps/website/screens/common/Figure.tsx b/apps/website/screens/common/Figure.tsx index f81e71878c..5ec752334d 100644 --- a/apps/website/screens/common/Figure.tsx +++ b/apps/website/screens/common/Figure.tsx @@ -2,28 +2,23 @@ import styled from "styled-components"; import { DxcFlex } from "@dxc-technology/halstack-react"; import { ReactNode } from "react"; -type DocImageProps = { - children: ReactNode; - caption: string | ReactNode; -}; -const Figure = ({ caption, children }: DocImageProps) => { - return ( - - - {children} - {caption} - - - ); -}; - const StyledFigure = styled.figure` margin: 0; - padding: 0; + padding: var(--spacing-padding-none); `; const StyledFigcaption = styled.figcaption` - font-size: 0.875rem; + font-size: var(--typography-label-m); + color: var(--color-fg-neutral-dark); `; +const Figure = ({ caption, children }: { caption: string | ReactNode; children: ReactNode }) => ( + + + {children} + {caption} + + +); + export default Figure; diff --git a/apps/website/screens/common/HeadingLink.tsx b/apps/website/screens/common/HeadingLink.tsx index a44d4491ef..93a4389979 100644 --- a/apps/website/screens/common/HeadingLink.tsx +++ b/apps/website/screens/common/HeadingLink.tsx @@ -1,6 +1,6 @@ import styled from "styled-components"; import slugify from "slugify"; -import { DxcBleed, DxcHeading } from "@dxc-technology/halstack-react"; +import { DxcBleed, DxcHeading, DxcTooltip } from "@dxc-technology/halstack-react"; import { responsiveSizes } from "../common/variables"; const linkIcon = ( @@ -12,40 +12,11 @@ const linkIcon = ( ); -type HeadingLinkProps = { - children: string; - level?: 1 | 2 | 3 | 4 | 5 | 6; - as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; - navSubtitle?: string; -}; - -const HeadingLink = ({ children, level, as, navSubtitle }: HeadingLinkProps) => { - const elementId = slugify(navSubtitle ?? children, { lower: true }); - return ( - - - - {linkIcon} - - - - - ); -}; - const HeadingLinkContainer = styled.div` display: flex; align-items: center; scroll-margin-top: 64px; - &:hover svg { - opacity: 0.5; - } - @media (max-width: ${responsiveSizes.tablet}px) { word-break: break-word; } @@ -55,23 +26,47 @@ const HeadingLinkContainer = styled.div` `; const HeadingAnchor = styled.a` - color: inherit; - text-decoration: none; display: inline-flex; align-items: center; - padding: 8px; + border-radius: var(--border-radius-s); + color: var(--color-fg-neutral-strong); + opacity: 0; + padding: var(--spacing-gap-s); + text-decoration: none; svg { + height: var(--height-xxs); width: 16px; - height: 16px; - opacity: 0; } &:focus { - outline-color: #0095ff; - outline-offset: -0.25rem; - svg { - opacity: 0.5; - } + opacity: 1; + outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline-offset: -4px; + } + &:hover { + opacity: 1; } `; -export default HeadingLink; + +type HeadingLinkProps = { + children: string; + level?: 1 | 2 | 3 | 4 | 5 | 6; + as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; + navSubtitle?: string; +}; + +export default function HeadingLink({ children, level, as, navSubtitle }: HeadingLinkProps) { + const elementId = slugify(navSubtitle ?? children, { lower: true }); + return ( + + + + + {linkIcon} + + + + + + ); +} diff --git a/apps/website/screens/common/Image.tsx b/apps/website/screens/common/Image.tsx index 35df5c099f..b450a25d33 100644 --- a/apps/website/screens/common/Image.tsx +++ b/apps/website/screens/common/Image.tsx @@ -1,8 +1,7 @@ import NextImage from "next/image"; -const customLoader = ({ src }: { src: string }) => { - return process.env.NODE_ENV === "production" ? src.replace("//", "/") : src; -}; +const customLoader = ({ src }: { src: string }) => + process.env.NODE_ENV === "production" ? src.replace("//", "/") : src; type ImageProps = { src: any; @@ -10,6 +9,7 @@ type ImageProps = { width?: number; height?: number; }; + export default function Image(props: ImageProps) { return ( div { - min-width: min-content; - } -`; - -export default StyledPreview; diff --git a/apps/website/screens/common/MainContent.tsx b/apps/website/screens/common/MainContent.tsx index 28d4203dca..2a0981169b 100644 --- a/apps/website/screens/common/MainContent.tsx +++ b/apps/website/screens/common/MainContent.tsx @@ -20,7 +20,7 @@ const pathVersion = ? 0 : parseInt(process.env.NEXT_PUBLIC_SITE_VERSION.split(".")[0]!, 10); -const MainContent = ({ children }: { children: ReactNode }) => { +export default function MainContent({ children }: { children: ReactNode }) { const toast = useToast(); const [latestRelease, setLatestRelease] = useState(null); @@ -56,6 +56,4 @@ const MainContent = ({ children }: { children: ReactNode }) => { }, [latestRelease, toast]); return {children}; -}; - -export default MainContent; +} diff --git a/apps/website/screens/common/PageHeading.tsx b/apps/website/screens/common/PageHeading.tsx index 5303b64e6e..b601637a33 100644 --- a/apps/website/screens/common/PageHeading.tsx +++ b/apps/website/screens/common/PageHeading.tsx @@ -1,12 +1,5 @@ import { ReactNode } from "react"; -import styled from "styled-components"; -const PageHeading = ({ children }: { children: ReactNode }) => { - return {children}; -}; - -const PageHeadingContainer = styled.div` - max-width: 800px; -`; +const PageHeading = ({ children }: { children: ReactNode }) =>
{children}
; export default PageHeading; diff --git a/apps/website/screens/common/Placeholder.tsx b/apps/website/screens/common/Placeholder.tsx index aabcc8b6db..baa70aacd3 100644 --- a/apps/website/screens/common/Placeholder.tsx +++ b/apps/website/screens/common/Placeholder.tsx @@ -5,20 +5,18 @@ import styled from "styled-components"; * Bleed, Flex, Grid and Inset */ const Placeholder = styled.div<{ color?: string; width?: string; height?: string }>` + background-color: ${({ color }) => color ?? "var(--color-bg-primary-light)"}; + border: var(--border-width-s) var(--border-style-default) var(--border-color-primary-light); + border-radius: var(--border-radius-m); box-sizing: border-box; + color: var(--color-fg-primary-strong); + font-family: var(--typography-font-family); + font-size: var(--typography-label-xl); + font-weight: var(--typography-label-semibold); + ${({ height }) => height && `height: ${height}`}; + padding: var(--spacing-padding-m); text-align: center; ${({ width }) => width && `width: ${width}`}; - ${({ height }) => height && `height: ${height}`}; - padding: 1rem; - border: 1px solid #a46ede; - border-radius: 0.5rem; - background-color: ${({ color }) => color ?? "#e5d5f6"}; - font-family: - Open Sans, - sans-serif; - font-size: 1.125rem; - font-weight: bold; - color: #7d2fd0; `; export default Placeholder; diff --git a/apps/website/screens/common/QuickNavContainer.tsx b/apps/website/screens/common/QuickNavContainer.tsx index ad5c0b440f..a84937a36b 100644 --- a/apps/website/screens/common/QuickNavContainer.tsx +++ b/apps/website/screens/common/QuickNavContainer.tsx @@ -4,9 +4,9 @@ import Section, { SectionType } from "./Section"; import { responsiveSizes } from "../common/variables"; type QuickNavContainerTypes = { - title?: string; sections: SectionType[]; startHeadingLevel?: 1 | 2 | 3 | 4 | 5; + title?: string; }; type LinkType = { @@ -29,25 +29,6 @@ const getSubSectionsLinks = (sections: SectionType[]) => { return linksList; }; -const DxcQuickNavContainer = ({ title = "On this page", sections, startHeadingLevel = 1 }: QuickNavContainerTypes): JSX.Element => ( - - - {sections.map((section) => ( -
- ))} - - - - - -); - const MainContainer = styled.div` display: grid; grid-template-columns: 800px 1fr; @@ -76,4 +57,27 @@ const QuickNavContainer = styled.div` } `; -export default DxcQuickNavContainer; +export default function DxcQuickNavContainer({ + sections, + startHeadingLevel = 1, + title = "On this page", +}: QuickNavContainerTypes) { + return ( + + + {sections.map((section) => ( +
+ ))} + + + + + + ); +} diff --git a/apps/website/screens/common/QuickNavContainerLayout.tsx b/apps/website/screens/common/QuickNavContainerLayout.tsx index c07dd5626a..4fd251bc38 100644 --- a/apps/website/screens/common/QuickNavContainerLayout.tsx +++ b/apps/website/screens/common/QuickNavContainerLayout.tsx @@ -1,9 +1,5 @@ import { ReactNode } from "react"; -type QuickNavContainerLayoutProps = { - children: ReactNode; -}; - -const QuickNavContainerLayout = ({ children }: QuickNavContainerLayoutProps) => <>{children}; +const QuickNavContainerLayout = ({ children }: { children: ReactNode }) => <>{children}; export default QuickNavContainerLayout; diff --git a/apps/website/screens/common/Section.tsx b/apps/website/screens/common/Section.tsx index 8d7a033233..f33eded047 100644 --- a/apps/website/screens/common/Section.tsx +++ b/apps/website/screens/common/Section.tsx @@ -12,8 +12,11 @@ export type SectionType = { navSubtitle?: string; }; -const Section = ({ title, level = 1, subSections, content, navSubtitle }: SectionType): JSX.Element => ( - +const Section = ({ content, level = 1, navSubtitle, subSections, title }: SectionType) => ( + {title} @@ -21,12 +24,12 @@ const Section = ({ title, level = 1, subSections, content, navSubtitle }: Sectio {subSections?.map((subSection) => (
))} diff --git a/apps/website/screens/common/TableCode.tsx b/apps/website/screens/common/TableCode.tsx deleted file mode 100644 index 95783c2439..0000000000 --- a/apps/website/screens/common/TableCode.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { ReactNode } from "react"; -import styled from "styled-components"; - -const TableCode = styled.code` - background-color: #f2eafa; - color: #5f249f; - font-size: 0.75rem; - padding: 2px 4px; - border-radius: 0.25rem; -`; - -export const ExtendedTableCode = ({ children }: { children: ReactNode }) => ( - - {children} - -); - -const ExtendedCodeContainer = styled.div` - width: 100%; - white-space: pre; - padding: 2px 4px; - background-color: #f2eafa; - border-radius: 0.25rem; - margin: 0; -`; - -const StyledExtendedCode = styled.code` - color: #5f249f; - font-size: 0.75rem; -`; - -export default TableCode; diff --git a/apps/website/screens/common/TabsPageLayout.tsx b/apps/website/screens/common/TabsPageLayout.tsx index bf8c9ce3f6..5fa48e9092 100644 --- a/apps/website/screens/common/TabsPageLayout.tsx +++ b/apps/website/screens/common/TabsPageLayout.tsx @@ -2,13 +2,8 @@ import { useRouter } from "next/router"; import { DxcNavTabs } from "@dxc-technology/halstack-react"; import Link from "next/link"; -type TabsPageLayoutProps = { - tabs: { label: string; path: string }[]; -}; - -const TabsPageLayout = ({ tabs }: TabsPageLayoutProps) => { +export default function TabsPageLayout({ tabs }: { tabs: { label: string; path: string }[] }) { const router = useRouter(); - return ( {tabs.map((tab, index) => ( @@ -18,6 +13,4 @@ const TabsPageLayout = ({ tabs }: TabsPageLayoutProps) => { ))} ); -}; - -export default TabsPageLayout; +} diff --git a/apps/website/screens/common/componentsList.json b/apps/website/screens/common/componentsList.json index a1cd04831b..4d2b36ab4f 100644 --- a/apps/website/screens/common/componentsList.json +++ b/apps/website/screens/common/componentsList.json @@ -1,6 +1,6 @@ [ { "label": "Accordion", "path": "/components/accordion", "status": "stable" }, - { "label": "Alert", "path": "/components/alert", "status": "new" }, + { "label": "Alert", "path": "/components/alert", "status": "stable" }, { "label": "Application layout", "path": "/components/application-layout", @@ -114,7 +114,7 @@ "status": "stable" }, { "label": "Textarea", "path": "/components/textarea", "status": "stable" }, - { "label": "Toast", "path": "/components/toast", "status": "new" }, + { "label": "Toast", "path": "/components/toast", "status": "stable" }, { "label": "Toggle group", "path": "/components/toggle-group", diff --git a/apps/website/screens/common/example/Example.tsx b/apps/website/screens/common/example/Example.tsx index 9f679ba82b..1feb71138a 100644 --- a/apps/website/screens/common/example/Example.tsx +++ b/apps/website/screens/common/example/Example.tsx @@ -5,18 +5,20 @@ import theme from "./liveEditorTheme"; import { DxcButton, DxcFlex, useToast } from "@dxc-technology/halstack-react"; const StyledPreview = styled.div` - background-color: #ffffff; - background-image: linear-gradient(45deg, #f2f2f2 25%, transparent 25%), - linear-gradient(135deg, #f2f2f2 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f2f2f2 75%), - linear-gradient(135deg, transparent 75%, #f2f2f2 75%); + background-color: var(--color-bg-neutral-lightest); + background-image: + linear-gradient(45deg, var(--color-bg-neutral-light) 25%, transparent 25%), + linear-gradient(135deg, var(--color-bg-neutral-light) 25%, transparent 25%), + linear-gradient(45deg, transparent 75%, var(--color-bg-neutral-light) 75%), + linear-gradient(135deg, transparent 75%, var(--color-bg-neutral-light) 75%); background-size: 20px 20px; background-position: 0px 0px, 10px 0px, 10px -10px, 0px 10px; - border: 1px solid #bfbfbf; - border-radius: 0.25rem; + border: var(--border-width-s) var(--border-style-default) var(--border-color-neutral-light); + border-radius: var(--border-radius-s); overflow: auto; > div { @@ -25,15 +27,15 @@ const StyledPreview = styled.div` `; const StyledError = styled.div` - padding: 0px 1rem; + background-color: var(--color-bg-error-lighter); + color: var(--color-fg-error-strong); display: flex; - background: #ffe6e9; - color: #d0011b; + padding: var(--spacing-padding-none) var(--spacing-padding-m); `; const StyledEditor = styled.div` pre { - padding: 1rem !important; + padding: var(--spacing-padding-m) !important; } `; @@ -46,7 +48,7 @@ type ExamplePropTypes = { }; }; -const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: ExamplePropTypes) => { +export default function Example({ actionsVisible = true, defaultIsVisible = false, example }: ExamplePropTypes) { const toast = useToast(); const [isCodeVisible, changeIsCodeVisible] = useState(defaultIsVisible); const [liveCode, setLiveCode] = useState(example.code); @@ -67,7 +69,7 @@ const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: E }; return ( - + @@ -76,11 +78,11 @@ const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: E {actionsVisible && ( - - {isCodeVisible && } + + {isCodeVisible && } @@ -94,6 +96,4 @@ const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: E ); -}; - -export default Example; +} diff --git a/apps/website/screens/common/pagesList.ts b/apps/website/screens/common/pagesList.ts index dbb8e5a0b1..5256c6349a 100644 --- a/apps/website/screens/common/pagesList.ts +++ b/apps/website/screens/common/pagesList.ts @@ -18,14 +18,13 @@ type NavigationLinks = { nextLink?: LinkDetails; }; -export const themeGeneratorLinks = ["/theme-generator/opinionated-theme/", "/theme-generator/advanced-theme/"]; - const overviewLinks: LinkDetails[] = [ { label: "Introduction", path: "/overview/introduction" }, { label: "Installation", path: "/overview/installation" }, { label: "Component lifecycle", path: "/overview/component-lifecycle" }, { label: "Releases", path: "/overview/releases" }, ]; + const utilitiesLinks: LinkDetails[] = [ { label: "Halstack provider", @@ -40,7 +39,6 @@ const principlesLinks: LinkDetails[] = [ { label: "Layout", path: "/principles/layout" }, { label: "Localization", path: "/principles/localization" }, { label: "Spacing", path: "/principles/spacing" }, - { label: "Themes", path: "/principles/themes" }, { label: "Typography", path: "/principles/typography" }, ]; @@ -68,9 +66,8 @@ const getCurrentLinkIndex = (links: LinkDetails[], currentPath: string) => { export const getNavigationLinks = (currentPath: string): NavigationLinks => { const links = LinksSections.flatMap((section) => section.links); const currentLinkIndex = getCurrentLinkIndex(links, currentPath); - if (currentLinkIndex === -1) return {}; - return { - previousLink: currentLinkIndex + 1 < links.length ? links[currentLinkIndex + 1] : undefined, - nextLink: currentLinkIndex - 1 >= 0 ? links[currentLinkIndex - 1] : undefined, + return currentLinkIndex === -1 ? {} : { + nextLink: currentLinkIndex + 1 < links.length ? links[currentLinkIndex + 1] : undefined, + previousLink: currentLinkIndex - 1 >= 0 ? links[currentLinkIndex - 1] : undefined, }; }; diff --git a/apps/website/screens/common/sidenav/SidenavLogo.tsx b/apps/website/screens/common/sidenav/SidenavLogo.tsx index c41a6197ed..1727c46887 100644 --- a/apps/website/screens/common/sidenav/SidenavLogo.tsx +++ b/apps/website/screens/common/sidenav/SidenavLogo.tsx @@ -3,45 +3,41 @@ import Image from "@/common/Image"; import halstackLogo from "@/common/images/halstack_logo.svg"; import { DxcBadge, DxcFlex } from "@dxc-technology/halstack-react"; -type SidenavLogoProps = { subtitle?: string }; +const LogoContainer = styled.div` + display: flex; + flex-direction: column; + margin: var(--spacing-padding-none) var(--spacing-padding-l); +`; + +const Title = styled.div` + color: var(--color-fg-primary-strong); + font-size: var(--typography-title-l); +`; + +const Subtitle = styled.div` + color: var(--color-fg-neutral-strongest); + font-size: var(--typography-title-m); + margin-left: var(--spacing-padding-s); +`; -const SidenavLogo = ({ subtitle = "Design System" }: SidenavLogoProps): JSX.Element => { +export default function SidenavLogo({ subtitle = "Design System" }: { subtitle?: string }) { const pathVersion = process.env.NEXT_PUBLIC_SITE_VERSION; const isDev = process.env.NODE_ENV === "development"; return ( - - Halstack logo + + Halstack logo Halstack {subtitle} ); -}; - -const LogoContainer = styled.div` - margin: 0 24px; - display: flex; - flex-direction: column; -`; - -const Title = styled.div` - font-size: 1.3rem; - color: #5f249f; -`; - -const Subtitle = styled.div` - font-size: 1rem; - color: #4d4d4d; - margin-left: 0.8rem; -`; - -export default SidenavLogo; +} diff --git a/apps/website/screens/common/themes/advanced-theme.json b/apps/website/screens/common/themes/advanced-theme.json deleted file mode 100644 index e489c9afaf..0000000000 --- a/apps/website/screens/common/themes/advanced-theme.json +++ /dev/null @@ -1,1293 +0,0 @@ -{ - "accordion": { - "backgroundColor": "#ffffff", - "hoverBackgroundColor": "#f2eafa", - "focusBackgroundColor": "transparent", - "activeBackgroundColor": "#f2eafa", - "arrowColor": "#5f249f", - "disabledArrowColor": "#999999", - "subLabelFontFamily": "Open Sans, sans-serif", - "subLabelFontSize": "0.75rem", - "subLabelFontWeight": "400", - "subLabelFontStyle": "normal", - "subLabelFontColor": "#666666", - "disabledSubLabelFontColor": "#999999", - "assistiveTextFontFamily": "Open Sans, sans-serif", - "assistiveTextFontSize": "0.75rem", - "assistiveTextFontWeight": "400", - "assistiveTextFontStyle": "normal", - "assistiveTextFontColor": "#666666", - "disabledAssistiveTextFontColor": "#999999", - "titleLabelFontFamily": "Open Sans, sans-serif", - "titleLabelFontSize": "1rem", - "titleLabelFontWeight": "400", - "titleLabelFontStyle": "normal", - "titleLabelFontColor": "#333333", - "disabledTitleLabelFontColor": "#999999", - "focusBorderColor": "#0095ff", - "focusBorderStyle": "solid", - "focusBorderThickness": "2px", - "borderRadius": "4px", - "boxShadowOffsetX": "0px", - "boxShadowOffsetY": "12px", - "boxShadowBlur": "12px", - "boxShadowSpread": "0px", - "boxShadowColor": "#0000001a", - "iconColor": "#5f249f", - "disabledIconColor": "#999999", - "iconSize": "24px", - "accordionSeparatorBorderColor": "#e6e6e6", - "accordionSeparatorBorderThickness": "1px", - "accordionSeparatorBorderStyle": "solid" - }, - "alert": { - "overlayColor": "#000000b3", - "modalPaddingTop": "1.5rem", - "modalPaddingRight": "1.5rem", - "modalPaddingBottom": "1.5rem", - "modalPaddingLeft": "1.5rem", - "paddingTop": "0.5rem", - "paddingRight": "0.75rem", - "paddingBottom": "0.5rem", - "paddingLeft": "0.75rem", - "borderRadius": "0.25rem", - "boxShadowOffsetX": "1px", - "boxShadowOffsetY": "4px", - "boxShadowBlur": "6px", - "boxShadowSpreadRadius": "0px", - "boxShadowColor": "", - "modalBackgroundColor": "#ffffff", - "infoBackgroundColor": "#e6f4ff", - "successBackgroundColor": "#eafaef", - "warningBackgroundColor": "#fef9e6", - "errorBackgroundColor": "#ffe6e9", - "iconPaddingRight": "0.5rem", - "infoIconColor": "#0086e6", - "successIconColor": "#24a148", - "warningIconColor": "#c59f07", - "errorIconColor": "#d0011b", - "iconSize": "24px", - "titleFontFamily": "Open Sans, sans-serif", - "titleFontColor": "#333333", - "titleFontSize": "0.875rem", - "modalTitleFontSize": "1.5rem", - "titleFontStyle": "normal", - "titleFontWeight": "bold", - "titlePaddingRight": "0.25rem", - "messageFontFamily": "Open Sans, sans-serif", - "messageFontColor": "#333333", - "messageFontSize": "0.875rem", - "messageFontStyle": "normal", - "messageFontWeight": "400", - "messagePaddingLeft": "0.25rem", - "messagePaddingRight": "0.75rem", - "navigationTextFontFamily": "Open Sans, sans-serif", - "navigationTextFontSize": "0.75rem", - "navigationTextFontStyle": "normal", - "navigationTextFontWeight": "400", - "navigationTextFontColor": "#000000" - }, - "bulletedList": { - "fontColor": "#000000", - "bulletIconHeight": "1.5rem", - "bulletIconWidth": "1.5rem", - "bulletHeight": "5px", - "bulletWidth": "5px", - "bulletMarginRight": "0.5rem" - }, - "button": { - "labelFontLineHeight": "1.5em", - "labelLetterSpacing": "0.025em", - "paddingSmallTop": "0rem", - "paddingSmallLeft": "0.5rem", - "paddingSmallBottom": "0rem", - "paddingSmallRight": "0.5rem", - "paddingSmallOnlyIconTop": "0rem", - "paddingSmallOnlyIconLeft": "0.25rem", - "paddingSmallOnlyIconBottom": "0rem", - "paddingSmallOnlyIconRight": "0.25rem", - "paddingMediumTop": "0rem", - "paddingMediumLeft": "0.5rem", - "paddingMediumBottom": "0rem", - "paddingMediumRight": "0.5rem", - "paddingMediumOnlyIconTop": "0rem", - "paddingMediumOnlyIconLeft": "0.5rem", - "paddingMediumOnlyIconBottom": "0rem", - "paddingMediumOnlyIconRight": "0.5rem", - "paddingLargeTop": "0rem", - "paddingLargeLeft": "1rem", - "paddingLargeBottom": "0rem", - "paddingLargeRight": "1rem", - "paddingLargeOnlyIconTop": "0rem", - "paddingLargeOnlyIconLeft": "0.5rem", - "paddingLargeOnlyIconBottom": "0rem", - "paddingLargeOnlyIconRight": "0.5rem", - "focusBorderColor": "#33aaff", - "primaryDefaultBackgroundColor": "#5f249f", - "primaryErrorBackgroundColor": "#d0011b", - "primaryWarningBackgroundColor": "#c26c0a", - "primarySuccessBackgroundColor": "#24a148", - "primaryInfoBackgroundColor": "#0086e6", - "primaryDefaultFontColor": "#ffffff", - "primaryErrorFontColor": "#ffffff", - "primaryWarningFontColor": "#ffffff", - "primarySuccessFontColor": "#ffffff", - "primaryInfoFontColor": "#ffffff", - "primaryHoverDefaultBackgroundColor": "#4b1c7d", - "primaryHoverErrorBackgroundColor": "#980115", - "primaryHoverWarningBackgroundColor": "#915108", - "primaryHoverSuccessBackgroundColor": "#1c7d38", - "primaryHoverInfoBackgroundColor": "#0067b3", - "primaryActiveDefaultBackgroundColor": "#321353", - "primaryActiveErrorBackgroundColor": "#65010e", - "primaryActiveWarningBackgroundColor": "#613605", - "primaryActiveSuccessBackgroundColor": "#135325", - "primaryActiveInfoBackgroundColor": "#003c66", - "primaryDisabledDefaultBackgroundColor": "#f2eafa", - "primaryDisabledErrorBackgroundColor": "#ffe6e9", - "primaryDisabledWarningBackgroundColor": "#fef3e7", - "primaryDisabledSuccessBackgroundColor": "#eafaef", - "primaryDisabledInfoBackgroundColor": "#e6f4ff", - "primaryDisabledDefaultFontColor": "#cbacec", - "primaryDisabledErrorFontColor": "#fe9aa7", - "primaryDisabledWarningFontColor": "#facf9e", - "primaryDisabledSuccessFontColor": "#acecbe", - "primaryDisabledInfoFontColor": "#99d5ff", - "primaryBorderThickness": "0px", - "primaryBorderStyle": "none", - "primaryBorderRadius": "0.25rem", - "primaryFontFamily": "Open Sans, sans-serif", - "primarySmallFontSize": "0.875rem", - "primaryMediumFontSize": "0.875rem", - "primaryLargeFontSize": "1rem", - "primaryFontWeight": "600", - "secondaryDefaultBackgroundColor": "transparent", - "secondaryErrorBackgroundColor": "transparent", - "secondaryWarningBackgroundColor": "transparent", - "secondarySuccessBackgroundColor": "transparent", - "secondaryInfoBackgroundColor": "transparent", - "secondaryDefaultFontColor": "#5f249f", - "secondaryErrorFontColor": "#d0011b", - "secondaryWarningFontColor": "#c26c0a", - "secondarySuccessFontColor": "#24a148", - "secondaryInfoFontColor": "#0086e6", - "secondaryDefaultBorderColor": "#5f249f", - "secondaryErrorBorderColor": "#d0011b", - "secondaryWarningBorderColor": "#c26c0a", - "secondarySuccessBorderColor": "#24a148", - "secondaryInfoBorderColor": "#0086e6", - "secondaryHoverDefaultBackgroundColor": "#5f249f", - "secondaryHoverErrorBackgroundColor": "#d0011b", - "secondaryHoverWarningBackgroundColor": "#c26c0a", - "secondaryHoverSuccessBackgroundColor": "#24a148", - "secondaryHoverInfoBackgroundColor": "#0086e6", - "secondaryHoverDefaultFontColor": "#ffffff", - "secondaryHoverErrorFontColor": "#ffffff", - "secondaryHoverWarningFontColor": "#ffffff", - "secondaryHoverSuccessFontColor": "#ffffff", - "secondaryHoverInfoFontColor": "#ffffff", - "secondaryActiveDefaultBackgroundColor": "#4b1c7d", - "secondaryActiveErrorBackgroundColor": "#980115", - "secondaryActiveWarningBackgroundColor": "#915108", - "secondaryActiveSuccessBackgroundColor": "#1c7d38", - "secondaryActiveInfoBackgroundColor": "#0067b3", - "secondaryDisabledDefaultBackgroundColor": "transparent", - "secondaryDisabledErrorBackgroundColor": "transparent", - "secondaryDisabledWarningBackgroundColor": "transparent", - "secondaryDisabledSuccessBackgroundColor": "transparent", - "secondaryDisabledInfoBackgroundColor": "transparent", - "secondaryDisabledDefaultFontColor": "#cbacec", - "secondaryDisabledErrorFontColor": "#fe9aa7", - "secondaryDisabledWarningFontColor": "#facf9e", - "secondaryDisabledSuccessFontColor": "#acecbe", - "secondaryDisabledInfoFontColor": "#99d5ff", - "secondaryDisabledDefaultBorderColor": "#cbacec", - "secondaryDisabledErrorBorderColor": "#fe9aa7", - "secondaryDisabledWarningBorderColor": "#facf9e", - "secondaryDisabledSuccessBorderColor": "#acecbe", - "secondaryDisabledInfoBorderColor": "#99d5ff", - "secondaryBorderThickness": "1px", - "secondaryBorderStyle": "solid", - "secondaryBorderRadius": "0.25rem", - "secondaryFontFamily": "Open Sans, sans-serif", - "secondarySmallFontSize": "0.875rem", - "secondaryMediumFontSize": "0.875rem", - "secondaryLargeFontSize": "1rem", - "secondaryFontWeight": "600", - "tertiaryDefaultBackgroundColor": "transparent", - "tertiaryErrorBackgroundColor": "transparent", - "tertiaryWarningBackgroundColor": "transparent", - "tertiarySuccessBackgroundColor": "transparent", - "tertiaryInfoBackgroundColor": "transparent", - "tertiaryDefaultFontColor": "#5f249f", - "tertiaryErrorFontColor": "#d0011b", - "tertiaryWarningFontColor": "#c26c0a", - "tertiarySuccessFontColor": "#24a148", - "tertiaryInfoFontColor": "#0086e6", - "tertiaryHoverDefaultBackgroundColor": "#f2eafa", - "tertiaryHoverErrorBackgroundColor": "#ffe6e9", - "tertiaryHoverWarningBackgroundColor": "#fef3e7", - "tertiaryHoverSuccessBackgroundColor": "#eafaef", - "tertiaryHoverInfoBackgroundColor": "#e6f4ff", - "tertiaryActiveDefaultBackgroundColor": "#e5d5f6", - "tertiaryActiveErrorBackgroundColor": "#ffccd3", - "tertiaryActiveWarningBackgroundColor": "#fce7cf", - "tertiaryActiveSuccessBackgroundColor": "#d5f6df", - "tertiaryActiveInfoBackgroundColor": "#cceaff", - "tertiaryDisabledDefaultBackgroundColor": "transparent", - "tertiaryDisabledErrorBackgroundColor": "transparent", - "tertiaryDisabledWarningBackgroundColor": "transparent", - "tertiaryDisabledSuccessBackgroundColor": "transparent", - "tertiaryDisabledInfoBackgroundColor": "transparent", - "tertiaryDisabledDefaultFontColor": "#cbacec", - "tertiaryDisabledErrorFontColor": "#fe9aa7", - "tertiaryDisabledWarningFontColor": "#facf9e", - "tertiaryDisabledSuccessFontColor": "#acecbe", - "tertiaryDisabledInfoFontColor": "#99d5ff", - "tertiaryBorderThickness": "0px", - "tertiaryBorderStyle": "none", - "tertiaryBorderRadius": "0.25rem", - "tertiaryFontFamily": "Open Sans, sans-serif", - "tertiarySmallFontSize": "0.875rem", - "tertiaryMediumFontSize": "0.875rem", - "tertiaryLargeFontSize": "1rem", - "tertiaryFontWeight": "600" - }, - "card": { - "height": "220px", - "width": "400px" - }, - "checkbox": { - "backgroundColorChecked": "#0067b3", - "hoverBackgroundColorChecked": "#003c66", - "disabledBackgroundColorChecked": "#999999", - "readOnlyBackgroundColorChecked": "#999999", - "hoverReadOnlyBackgroundColorChecked": "#808080", - "borderColor": "#0067b3", - "hoverBorderColor": "#003c66", - "disabledBorderColor": "#999999", - "readOnlyBorderColor": "#999999", - "hoverReadOnlyBorderColor": "#808080", - "checkColor": "#ffffff", - "disabledCheckColor": "#ffffff", - "readOnlyCheckColor": "#ffffff", - "fontFamily": "Open Sans, sans-serif", - "fontSize": "0.875rem", - "fontWeight": "400", - "fontColor": "#000000", - "disabledFontColor": "#999999", - "focusColor": "#0095ff", - "checkLabelSpacing": "0.5rem" - }, - "chip": { - "backgroundColor": "#e6e6e6", - "disabledBackgroundColor": "#f2f2f2", - "fontFamily": "Open Sans, sans-serif", - "fontSize": "1rem", - "fontStyle": "normal", - "fontWeight": "400", - "fontColor": "#000000", - "disabledFontColor": "#999999", - "borderColor": "transparent", - "borderRadius": "80px", - "borderThickness": "0px", - "borderStyle": "solid", - "contentPaddingLeft": "1rem", - "contentPaddingRight": "1rem", - "contentPaddingTop": "0rem", - "contentPaddingBottom": "0rem", - "iconSize": "24px", - "iconSpacing": "0.5rem", - "iconColor": "#4d4d4d", - "hoverIconColor": "#333333", - "activeIconColor": "#000000", - "disabledIconColor": "#999999", - "focusColor": "#0095ff", - "focusBorderStyle": "solid", - "focusBorderThickness": "2px", - "focusBorderRadius": "0.25rem" - }, - "contextualMenu": { - "fontFamily": "Open Sans, sans-serif", - "backgroundColor": "#ffffff", - "borderColor": "#e6e6e6", - "menuItemFontColor": "#333333", - "menuItemFontSize": "0.875rem", - "menuItemFontStyle": "normal", - "menuItemFontWeight": "400", - "menuItemLineHeight": "24px", - "hoverMenuItemBackgroundColor": "#f2f2f2", - "activeMenuItemBackgroundColor": "#f2f2f2", - "selectedMenuItemBackgroundColor": "#f2eafa", - "hoverSelectedMenuItemBackgroundColor": "#e5d5f6", - "activeSelectedMenuItemBackgroundColor": "#e5d5f6", - "selectedMenuItemFontWeight": "600", - "sectionTitleFontColor": "#333333", - "sectionTitleFontSize": "1rem", - "sectionTitleFontStyle": "normal", - "sectionTitleFontWeight": "600", - "sectionTitleLineHeight": "24px", - "iconColor": "#333333", - "iconSize": "16px" - }, - "dataGrid": { - "rowSeparatorThickness": "1px", - "rowSeparatorStyle": "solid", - "rowSeparatorColor": "#cccccc", - "dataBackgroundColor": "#ffffff", - "dataFontFamily": "Open Sans, sans-serif", - "dataFontSize": "0.875rem", - "dataFontStyle": "normal", - "dataFontWeight": "400", - "dataFontColor": "#000000", - "dataFontTextTransform": "none", - "dataPaddingRight": "0.5rem", - "dataPaddingLeft": "0.5rem", - "dataRowHeight": "36", - "dataTextLineHeight": "normal", - "headerBackgroundColor": "#5f249f", - "headerBorderRadius": "4px", - "headerFontFamily": "Open Sans, sans-serif", - "headerFontSize": "0.875rem", - "headerFontStyle": "normal", - "headerFontWeight": "bold", - "headerFontColor": "#ffffff", - "headerFontTextTransform": "none", - "headerPaddingRight": "0.5rem", - "headerPaddingLeft": "0.5rem", - "headerRowHeight": "36", - "headerTextLineHeight": "normal", - "headerCheckboxBackgroundColorChecked": "#ffffff", - "headerCheckboxHoverBackgroundColorChecked": "#e6e6e6", - "headerCheckboxBorderColor": "#ffffff", - "headerCheckboxHoverBorderColor": "#ffffff", - "headerCheckboxCheckColor": "#5f249f", - "summaryRowHeight": "36", - "focusColor": "#0095ff", - "scrollBarThumbColor": "#666666", - "scrollBarTrackColor": "#cccccc" - }, - "dateInput": { - "pickerBackgroundColor": "#ffffff", - "pickerFontColor": "#000000", - "pickerBorderColor": "#bfbfbf", - "pickerSelectedBackgroundColor": "#5f249f", - "pickerSelectedFontColor": "#ffffff", - "pickerHoverBackgroundColor": "#e5d5f6", - "pickerHoverFontColor": "#000000", - "pickerActiveBackgroundColor": "#4b1c7d", - "pickerActiveFontColor": "#ffffff", - "pickerNonCurrentMonthFontColor": "#999999", - "pickerCurrentDateBorderColor": "#cbacec", - "pickerCurrentDateFontColor": "#000000", - "pickerCurrentYearFontColor": "#5f249f", - "pickerHeaderBackgroundColor": "transparent", - "pickerHeaderFontColor": "#000000", - "pickerHeaderHoverBackgroundColor": "#e5d5f6", - "pickerHeaderHoverFontColor": "#000000", - "pickerHeaderActiveBackgroundColor": "#4b1c7d", - "pickerHeaderActiveFontColor": "#ffffff", - "pickerFocusColor": "#0095ff", - "pickerBorderWidth": "1px", - "pickerBorderStyle": "solid", - "pickerFocusWidth": "2px", - "pickerCurrentDateBorderWidth": "1px", - "pickerFontFamily": "Open Sans, sans-serif", - "pickerFontSize": "0.875rem", - "pickerFontWeight": "400", - "pickerInteractedYearFontSize": "1.5rem", - "pickerHeaderFontSize": "0.875rem" - }, - "dialog": { - "overlayColor": "#000000b3", - "backgroundColor": "#ffffff", - "closeIconBackgroundColor": "transparent", - "closeIconColor": "#000000", - "boxShadowOffsetX": "0px", - "boxShadowOffsetY": "1px", - "boxShadowBlur": "3px", - "boxShadowColor": "#00000033" - }, - "dropdown": { - "buttonBackgroundColor": "#ffffff", - "hoverButtonBackgroundColor": "#f2f2f2", - "activeButtonBackgroundColor": "#cccccc", - "buttonFontFamily": "Open Sans, sans-serif", - "buttonFontSize": "1rem", - "buttonFontStyle": "normal", - "buttonFontWeight": "400", - "buttonFontColor": "#000000", - "buttonIconSize": "20px", - "buttonIconSpacing": "10px", - "buttonIconColor": "#000000", - "buttonPaddingTop": "0rem", - "buttonPaddingBottom": "0rem", - "buttonPaddingLeft": "1rem", - "buttonPaddingRight": "1rem", - "buttonHeight": "40px", - "buttonBorderRadius": "4px", - "buttonBorderStyle": "none", - "buttonBorderThickness": "0px", - "buttonBorderColor": "transparent", - "disabledColor": "#999999", - "disabledButtonBackgroundColor": "transparent", - "disabledButtonBorderColor": "transparent", - "optionBackgroundColor": "#ffffff", - "hoverOptionBackgroundColor": "#f2f2f2", - "activeOptionBackgroundColor": "#cccccc", - "optionFontFamily": "Open Sans, sans-serif", - "optionFontSize": "1rem", - "optionFontStyle": "normal", - "optionFontWeight": "400", - "optionFontColor": "#000000", - "optionIconSize": "20px", - "optionIconSpacing": "10px", - "optionIconColor": "#000000", - "optionPaddingTop": "6px", - "optionPaddingBottom": "6px", - "optionPaddingLeft": "1rem", - "optionPaddingRight": "1rem", - "caretIconSize": "24px", - "caretIconColor": "#000000", - "caretIconSpacing": "0.75rem", - "borderRadius": "4px", - "borderStyle": "none", - "borderThickness": "0px", - "borderColor": "transparent", - "scrollBarThumbColor": "#666666", - "scrollBarTrackColor": "#cccccc", - "focusColor": "#0095ff" - }, - "fileInput": { - "dropBorderColor": "#000000", - "fileItemBorderColor": "#cccccc", - "fileNameFontColor": "#000000", - "labelFontColor": "#000000", - "helperTextFontColor": "#000000", - "dropLabelFontColor": "#000000", - "disabledLabelFontColor": "#999999", - "disabledHelperTextFontColor": "#999999", - "disabledDropLabelFontColor": "#999999", - "focusDropBorderColor": "#0095ff", - "disabledDropBorderColor": "#999999", - "dragoverDropBackgroundColor": "#f5fbff", - "errorFileItemBorderColor": "#d0011b", - "errorFileItemBackgroundColor": "#fff5f6", - "errorFilePreviewBackgroundColor": "#ffccd3", - "errorFileItemIconColor": "#d0011b", - "fileItemIconBackgroundColor": "#f2f2f2", - "deleteFileItemColor": "#000000", - "errorMessageFontColor": "#d0011b", - "labelFontFamily": "Open Sans, sans-serif", - "labelFontSize": "0.875rem", - "labelFontWeight": "600", - "labelLineHeight": "1.715em", - "fileItemFontFamily": "Open Sans, sans-serif", - "fileItemFontSize": "0.875rem", - "fileItemFontWeight": "400", - "fileItemLineHeight": "1.5em", - "helperTextFontFamily": "Open Sans, sans-serif", - "helperTextFontSize": "0.75rem", - "helperTextFontWeight": "400", - "helperTextLineHeight": "1.5em", - "dropLabelFontFamily": "Open Sans, sans-serif", - "dropLabelFontSize": "1rem", - "dropLabelFontWeight": "400", - "errorMessageFontFamily": "Open Sans, sans-serif", - "errorMessageFontSize": "0.75rem", - "errorMessageFontWeight": "400", - "errorMessageLineHeight": "1.5em", - "dropBorderThickness": "1px", - "dropBorderStyle": "dashed", - "dropBorderRadius": "0.375rem", - "fileItemBorderThickness": "1px", - "fileItemBorderStyle": "solid", - "fileItemBorderRadius": "0.25rem", - "hoverDeleteFileItemBackgroundColor": "#0000000d", - "activeDeleteFileItemBackgroundColor": "#00000033", - "focusDeleteFileItemBorderColor": "#0095ff", - "filePreviewBackgroundColor": "#f2f2f2", - "filePreviewIconColor": "#808080", - "errorFilePreviewIconColor": "#d0011b" - }, - "footer": { - "height": "124px", - "backgroundColor": "#000000", - "bottomLinksDividerColor": "#0095ff", - "bottomLinksDividerThickness": "1px", - "bottomLinksDividerStyle": "solid", - "bottomLinksDividerSpacing": "0.5rem", - "bottomLinksFontFamily": "Open Sans, sans-serif", - "bottomLinksFontSize": "0.75rem", - "bottomLinksFontStyle": "normal", - "bottomLinksFontWeight": "400", - "bottomLinksFontColor": "#ffffff", - "bottomLinksTextDecoration": "none", - "copyrightFontFamily": "Open Sans, sans-serif", - "copyrightFontSize": "0.75rem", - "copyrightFontStyle": "normal", - "copyrightFontWeight": "400", - "copyrightFontColor": "#ffffff", - "logo": "", - "logoHeight": "32px", - "logoWidth": "auto", - "socialLinksSize": "24px", - "socialLinksGutter": "1rem", - "socialLinksColor": "#ffffff" - }, - "header": { - "backgroundColor": "#ffffff", - "hamburgerFocusColor": "#0095ff", - "hamburgerFontFamily": "Open Sans, sans-serif", - "hamburgerFontStyle": "normal", - "hamburgerFontColor": "#000000", - "hamburgerFontSize": "10px", - "hamburgerFontWeight": "600", - "hamburgerTextTransform": "uppercase", - "hamburgerIconColor": "#000000", - "hamburgerHoverColor": "#e6e6e6", - "logo": "", - "logoResponsive": "", - "logoHeight": "40px", - "logoWidth": "auto", - "menuBackgroundColor": "#ffffff", - "menuZindex": "2000", - "menuTabletWidth": "60vw", - "menuMobileWidth": "100vw", - "minHeight": "64px", - "overlayColor": "#000000b3", - "overlayOpacity": "0.7", - "overlayZindex": "1600", - "paddingTop": "0rem", - "paddingBottom": "0rem", - "paddingRight": "1.5rem", - "paddingLeft": "1.5rem", - "underlinedColor": "#000000", - "underlinedThickness": "2px", - "underlinedStyle": "solid", - "contentColor": "#000000" - }, - "heading": { - "level1FontColor": "inherit", - "level1FontFamily": "Open Sans, sans-serif", - "level1FontSize": "2.5rem", - "level1FontStyle": "normal", - "level1FontWeight": "600", - "level1LineHeight": "1.365em", - "level1LetterSpacing": "-0.025em", - "level2FontColor": "inherit", - "level2FontFamily": "Open Sans, sans-serif", - "level2FontSize": "1.5rem", - "level2FontStyle": "normal", - "level2FontWeight": "600", - "level2LineHeight": "1.5em", - "level2LetterSpacing": "0em", - "level3FontColor": "inherit", - "level3FontFamily": "Open Sans, sans-serif", - "level3FontSize": "1.25rem", - "level3FontStyle": "normal", - "level3FontWeight": "600", - "level3LineHeight": "1.365em", - "level3LetterSpacing": "0.025em", - "level4FontColor": "inherit", - "level4FontFamily": "Open Sans, sans-serif", - "level4FontSize": "1rem", - "level4FontStyle": "normal", - "level4FontWeight": "600", - "level4LineHeight": "1.5em", - "level4LetterSpacing": "0em", - "level5FontColor": "inherit", - "level5FontFamily": "Open Sans, sans-serif", - "level5FontSize": "0.875rem", - "level5FontStyle": "normal", - "level5FontWeight": "600", - "level5LineHeight": "1.5em", - "level5LetterSpacing": "0.025em" - }, - "image": { - "captionFontColor": "#333333", - "captionFontFamily": "Open Sans, sans-serif", - "captionFontSize": "0.875rem", - "captionFontStyle": "normal", - "captionFontWeight": "400", - "captionLineHeight": "1.5em" - }, - "link": { - "fontColor": "#0067b3", - "fontFamily": "inherit", - "fontSize": "inherit", - "fontStyle": "normal", - "fontWeight": "400", - "iconSize": "16px", - "iconSpacing": "0.25rem", - "underlineSpacing": "0rem", - "underlineStyle": "solid", - "underlineThickness": "1px", - "disabledFontColor": "#999999", - "hoverFontColor": "#0067b3", - "hoverUnderlineColor": "#0067b3", - "visitedFontColor": "#5f249f", - "visitedUnderlineColor": "#5f249f", - "activeFontColor": "#000000", - "activeUnderlineColor": "#000000", - "focusColor": "#0095ff" - }, - "navTabs": { - "selectedBackgroundColor": "#ffffff", - "unselectedBackgroundColor": "#ffffff", - "hoverBackgroundColor": "#f2f2f2", - "pressedBackgroundColor": "#e6e6e6", - "selectedFontColor": "#666666", - "unselectedFontColor": "#666666", - "disabledFontColor": "#999999", - "focusOutline": "#0095ff", - "selectedUnderlineColor": "#5f249f", - "dividerColor": "#bfbfbf", - "fontFamily": "Open Sans, sans-serif", - "fontSize": "1rem", - "fontStyle": "normal", - "fontWeight": "400", - "selectedIconColor": "#666666", - "unselectedIconColor": "#666666", - "disabledIconColor": "#999999" - }, - "paginator": { - "backgroundColor": "#f2f2f2", - "fontColor": "#000000", - "fontFamily": "Open Sans, sans-serif", - "fontSize": "0.875rem", - "fontStyle": "normal", - "fontWeight": "400", - "fontTextTransform": "none", - "verticalPadding": "0.75rem", - "horizontalPadding": "2rem", - "marginRight": "2.5rem", - "marginLeft": "20px", - "itemsPerPageSelectorMarginLeft": "0rem", - "itemsPerPageSelectorMarginRight": "0.5rem", - "pageSelectorMarginRight": "30px", - "pageSelectorMarginLeft": "0rem", - "totalItemsContainerMarginRight": "2.5rem", - "totalItemsContainerMarginLeft": "0rem" - }, - "paragraph": { - "display": "block", - "fontColor": "#000000", - "fontSize": "1rem", - "fontWeight": "400" - }, - "progressBar": { - "trackLineColor": "#5f249f", - "totalLineColor": "#e6e6e6", - "labelFontFamily": "Open Sans, sans-serif", - "labelFontSize": "0.75rem", - "labelFontStyle": "normal", - "labelFontWeight": "400", - "labelFontColor": "#000000", - "labelFontTextTransform": "uppercase", - "valueFontFamily": "Open Sans, sans-serif", - "valueFontSize": "0.75rem", - "valueFontStyle": "normal", - "valueFontWeight": "400", - "valueFontColor": "#000000", - "valueFontTextTransform": "uppercase", - "helperTextFontColor": "#000000", - "helperTextFontSize": "0.75rem", - "helperTextFontStyle": "normal", - "helperTextFontWeight": "400", - "helperTextFontFamily": "Open Sans, sans-serif", - "thickness": "9px", - "borderRadius": "5px", - "overlayColor": "#000000b3", - "overlayFontColor": "#ffffff" - }, - "quickNav": { - "fontColor": "#666666", - "hoverFontColor": "#7d2fd0", - "dividerBorderColor": "#bfbfbf", - "focusBorderColor": "#0095ff", - "focusBorderStyle": "solid", - "focusBorderThickness": "2px", - "focusBorderRadius": "2px", - "paddingTop": "0.5rem", - "paddingBottom": "0.5rem", - "paddingLeft": "1rem", - "paddingRight": "1rem", - "fontFamily": "Open Sans, sans-serif", - "fontSize": "0.875rem", - "fontStyle": "normal", - "fontWeight": "400" - }, - "radioGroup": { - "fontFamily": "Open Sans, sans-serif", - "radioInputColor": "#0086e6", - "hoverRadioInputColor": "#0067b3", - "focusBorderColor": "#0095ff", - "activeRadioInputColor": "#003c66", - "errorRadioInputColor": "#d0011b", - "hoverErrorRadioInputColor": "#980115", - "activeErrorRadioInputColor": "#65010e", - "readOnlyRadioInputColor": "#999999", - "hoverReadOnlyRadioInputColor": "#808080", - "activeReadOnlyRadioInputColor": "#666666", - "disabledRadioInputColor": "#999999", - "disabledLabelFontColor": "#999999", - "disabledHelperTextFontColor": "#999999", - "disabledRadioInputLabelFontColor": "#999999", - "errorMessageColor": "#d0011b", - "labelFontColor": "#000000", - "labelFontSize": "0.875rem", - "labelFontStyle": "normal", - "labelFontWeight": "600", - "labelLineHeight": "1.715em", - "optionalLabelFontWeight": "400", - "helperTextFontColor": "#000000", - "helperTextFontSize": "0.75rem", - "helperTextFontStyle": "normal", - "helperTextFontWeight": "400", - "helperTextLineHeight": "1.5em", - "radioInputLabelFontColor": "#000000", - "radioInputLabelFontSize": "0.875rem", - "radioInputLabelFontStyle": "normal", - "radioInputLabelFontWeight": "400", - "radioInputLabelLineHeight": "1.715em", - "groupLabelMargin": "0.5rem", - "radioInputLabelMargin": "0.5rem", - "groupVerticalGutter": "0.25rem", - "groupHorizontalGutter": "2rem" - }, - "select": { - "fontFamily": "Open Sans, sans-serif", - "disabledColor": "#999999", - "enabledInputBorderColor": "#000000", - "hoverInputBorderColor": "#a46ede", - "focusInputBorderColor": "#0095ff", - "errorInputBorderColor": "#d0011b", - "hoverInputErrorBorderColor": "#fe0123", - "disabledInputBorderColor": "#999999", - "disabledInputBackgroundColor": "#f2f2f2", - "inputMarginTop": "0.25rem", - "inputMarginBottom": "0.25rem", - "errorMessageColor": "#d0011b", - "errorIconColor": "#d0011b", - "labelFontColor": "#000000", - "labelFontSize": "0.875rem", - "labelFontStyle": "normal", - "labelFontWeight": "600", - "labelLineHeight": "1.715em", - "optionalLabelFontWeight": "400", - "helperTextFontColor": "#000000", - "helperTextFontSize": "0.75rem", - "helperTextFontStyle": "normal", - "helperTextFontWeight": "400", - "helperTextLineHeight": "1.5em", - "placeholderFontColor": "#000000b3", - "valueFontColor": "#000000", - "valueFontSize": "1rem", - "valueFontStyle": "normal", - "valueFontWeight": "400", - "actionIconColor": "#000000", - "hoverActionIconColor": "#000000", - "activeActionIconColor": "#000000", - "actionBackgroundColor": "transparent", - "hoverActionBackgroundColor": "#f2f2f2", - "activeActionBackgroundColor": "#cccccc", - "listOptionFontColor": "#000000", - "listOptionFontSize": "0.875rem", - "listOptionFontStyle": "normal", - "listOptionFontWeight": "400", - "listOptionIconColor": "#000000", - "listOptionDividerColor": "#e6e6e6", - "listGroupLabelFontWeight": "600", - "focusListOptionBorderColor": "#0095ff", - "systemMessageFontColor": "#666666", - "collapseIndicatorColor": "#000000", - "listDialogBackgroundColor": "#ffffff", - "listDialogBorderColor": "#bfbfbf", - "selectedListOptionBackgroundColor": "#e6f4ff", - "selectedHoverListOptionBackgroundColor": "#cceaff", - "selectedActiveListOptionBackgroundColor": "#99d5ff", - "selectedListOptionIconColor": "#003c66", - "unselectedHoverListOptionBackgroundColor": "#f2f2f2", - "unselectedActiveListOptionBackgroundColor": "#e6e6e6", - "selectionIndicatorFontColor": "#000000", - "selectionIndicatorFontSize": "0.75rem", - "selectionIndicatorFontStyle": "400", - "selectionIndicatorFontWeight": "normal", - "selectionIndicatorBorderColor": "#bfbfbf", - "selectionIndicatorBackgroundColor": "#fafafa", - "enabledSelectionIndicatorActionBackgroundColor": "transparent", - "enabledSelectionIndicatorActionIconColor": "#000000", - "hoverSelectionIndicatorActionBackgroundColor": "#f2f2f2", - "hoverSelectionIndicatorActionIconColor": "#000000", - "activeSelectionIndicatorActionBackgroundColor": "#cccccc", - "activeSelectionIndicatorActionIconColor": "#000000" - }, - "sidenav": { - "backgroundColor": "#f2f2f2", - "titleFontFamily": "Open Sans, sans-serif", - "titleFontSize": "1.25rem", - "titleFontStyle": "normal", - "titleFontWeight": "600", - "titleFontColor": "#4d4d4d", - "titleFontTextTransform": "none", - "titleFontLetterSpacing": "0em", - "groupTitleFontFamily": "Open Sans, sans-serif", - "groupTitleFontSize": "0.875rem", - "groupTitleFontStyle": "normal", - "groupTitleFontWeight": "600", - "groupTitleFontColor": "#000000", - "groupTitleHoverBackgroundColor": "#e6e6e6", - "groupTitleActiveBackgroundColor": "#4d4d4d", - "groupTitleSelectedFontColor": "#ffffff", - "groupTitleSelectedBackgroundColor": "#4d4d4d", - "groupTitleSelectedHoverFontColor": "#ffffff", - "groupTitleSelectedHoverBackgroundColor": "#333333", - "groupTitleFontTextTransform": "uppercase", - "groupTitleFontLetterSpacing": "0.05em", - "linkFontFamily": "Open Sans, sans-serif", - "linkFontSize": "0.875rem", - "linkFontStyle": "normal", - "linkFontWeight": "400", - "linkFontColor": "#4d4d4d", - "linkHoverBackgroundColor": "#e6e6e6", - "linkSelectedFontColor": "#ffffff", - "linkSelectedBackgroundColor": "#4d4d4d", - "linkSelectedHoverFontColor": "#ffffff", - "linkSelectedHoverBackgroundColor": "#333333", - "linkFontTextTransform": "none", - "linkFontLetterSpacing": "0.025em", - "linkTextDecoration": "none", - "linkMarginTop": "0.25rem", - "linkMarginBottom": "0.25rem", - "linkMarginRight": "1rem", - "linkMarginLeft": "1rem", - "linkFocusColor": "#0095ff", - "scrollBarThumbColor": "#0000001a", - "scrollBarTrackColor": "transparent" - }, - "slider": { - "fontFamily": "Open Sans, sans-serif", - "limitValuesFontColor": "#000000", - "limitValuesFontSize": "1rem", - "limitValuesFontStyle": "normal", - "limitValuesFontWeight": "400", - "limitValuesFontLetterSpacing": "0em", - "disabledLimitValuesFontColor": "#999999", - "labelFontFamily": "Open Sans, sans-serif", - "labelFontSize": "0.875rem", - "labelFontStyle": "normal", - "labelFontWeight": "600", - "labelLineHeight": "1.715em", - "helperTextFontFamily": "Open Sans, sans-serif", - "helperTextFontSize": "0.75rem", - "helperTextFontStyle": "normal", - "helperTextFontWeight": "400", - "helperTextLineHeight": "1.5em", - "fontColor": "#000000", - "labelFontColor": "#000000", - "helperTextFontColor": "#000000", - "disabledLabelFontColor": "#999999", - "disabledHelperTextFontColor": "#999999", - "thumbHeight": "12px", - "thumbWidth": "12px", - "hoverThumbHeight": "14px", - "hoverThumbWidth": "14px", - "thumbVerticalPosition": "12px", - "hoverThumbVerticalPosition": "11px", - "thumbBackgroundColor": "#0067b3", - "hoverThumbScale": "1.166666", - "hoverThumbBackgroundColor": "#003c66", - "activeThumbScale": "1.166666", - "activeThumbBackgroundColor": "#003c66", - "focusThumbBackgroundColor": "#0067b3", - "tickHeight": "4px", - "tickWidth": "4px", - "tickVerticalPosition": "11px", - "tickBackgroundColor": "#0067b3", - "trackLineThickness": "2px", - "trackLineVerticalPosition": "50%", - "trackLineColor": "#0067b3", - "totalLineThickness": "2px", - "totalLineVerticalPosition": "50%", - "totalLineColor": "#0000001a", - "disabledThumbVerticalPosition": "10px", - "disabledThumbBackgroundColor": "#999999", - "disabledTickVerticalPosition": "11px", - "disabledTickBackgroundColor": "#999999", - "disabledTrackLineColor": "#999999", - "disabledTotalLineColor": "#f2f2f2", - "focusColor": "#0095ff", - "floorLabelMarginRight": "1rem", - "ceilLabelMarginLeft": "1rem", - "inputMarginLeft": "2rem" - }, - "spinner": { - "trackCircleColor": "#5f249f", - "trackCircleColorOverlay": "#a46ede", - "totalCircleColor": "#ffffff", - "labelFontFamily": "Open Sans, sans-serif", - "labelFontSize": "0.875rem", - "labelFontStyle": "normal", - "labelFontWeight": "400", - "labelFontColor": "#000000", - "labelTextAlign": "center", - "progressValueFontFamily": "Open Sans, sans-serif", - "progressValueFontSize": "0.875rem", - "progressValueFontStyle": "normal", - "progressValueFontWeight": "bold", - "progressValueFontColor": "inherit", - "progressValueTextAlign": "center", - "overlayBackgroundColor": "#000000", - "overlayOpacity": "0.8", - "overlayLabelFontFamily": "Open Sans, sans-serif", - "overlayLabelFontSize": "0.875rem", - "overlayLabelFontStyle": "normal", - "overlayLabelFontWeight": "400", - "overlayLabelFontColor": "#ffffff", - "overlayLabelTextAlign": "center", - "overlayProgressValueFontFamily": "Open Sans, sans-serif", - "overlayProgressValueFontSize": "0.875rem", - "overlayProgressValueFontStyle": "normal", - "overlayProgressValueFontWeight": "bold", - "overlayProgressValueFontColor": "#ffffff", - "overlayProgressValueTextAlign": "center" - }, - "switch": { - "checkedTrackBackgroundColor": "#5f249f", - "checkedThumbBackgroundColor": "#ffffff", - "uncheckedTrackBackgroundColor": "#bfbfbf", - "uncheckedThumbBackgroundColor": "#ffffff", - "disabledCheckedTrackBackgroundColor": "#f2eafa", - "disabledCheckedThumbBackgroundColor": "#ffffff", - "disabledUncheckedTrackBackgroundColor": "#f2f2f2", - "disabledUncheckedThumbBackgroundColor": "#ffffff", - "disabledLabelFontColor": "#999999", - "disabledLabelFontStyle": "normal", - "labelFontFamily": "Open Sans, sans-serif", - "labelFontSize": "1rem", - "labelFontStyle": "normal", - "labelFontWeight": "400", - "labelFontColor": "#000000", - "thumbFocusColor": "#0095ff", - "thumbHeight": "24px", - "thumbWidth": "24px", - "thumbShift": "1.25rem", - "trackHeight": "12px", - "trackWidth": "36px", - "spaceBetweenLabelSwitch": "0.5rem" - }, - "table": { - "rowSeparatorThickness": "1px", - "rowSeparatorStyle": "solid", - "rowSeparatorColor": "#cccccc", - "dataBackgroundColor": "#ffffff", - "dataFontFamily": "Open Sans, sans-serif", - "dataFontSize": "0.875rem", - "dataFontStyle": "normal", - "dataFontWeight": "400", - "dataFontColor": "#000000", - "dataFontTextTransform": "none", - "dataPaddingTop": "1rem", - "dataPaddingBottom": "1rem", - "dataPaddingRight": "20px", - "dataPaddingLeft": "20px", - "dataPaddingTopReduced": "0.5rem", - "dataPaddingBottomReduced": "0.5rem", - "dataPaddingRightReduced": "1rem", - "dataPaddingLeftReduced": "1rem", - "dataTextAlign": "left", - "dataTextLineHeight": "normal", - "firstChildPaddingLeft": "1.5rem", - "lastChildPaddingRight": "1.5rem", - "firstChildPaddingLeftReduced": "20px", - "lastChildPaddingRightReduced": "20px", - "headerBackgroundColor": "#5f249f", - "headerBorderRadius": "4px", - "headerFontFamily": "Open Sans, sans-serif", - "headerFontSize": "0.875rem", - "headerFontStyle": "normal", - "headerFontWeight": "400", - "headerFontColor": "#ffffff", - "headerFontTextTransform": "none", - "headerPaddingTop": "1rem", - "headerPaddingBottom": "1rem", - "headerPaddingRight": "20px", - "headerPaddingLeft": "20px", - "headerPaddingTopReduced": "0.5rem", - "headerPaddingBottomReduced": "0.5rem", - "headerPaddingRightReduced": "1rem", - "headerPaddingLeftReduced": "1rem", - "headerTextAlign": "left", - "headerTextLineHeight": "normal", - "scrollBarThumbColor": "#666666", - "scrollBarTrackColor": "#cccccc", - "sortIconColor": "#ffffff", - "actionIconColor": "#5f249f", - "disabledActionIconColor": "#999999", - "hoverActionIconColor": "#5f249f", - "focusActionIconColor": "#5f249f", - "activeActionIconColor": "#5f249f", - "actionBackgroundColor": "transparent", - "disabledActionBackgroundColor": "transparent", - "hoverActionBackgroundColor": "#f2f2f2", - "focusActionBorderColor": "#0095ff", - "activeActionBackgroundColor": "#cccccc" - }, - "tabs": { - "fontFamily": "Open Sans, sans-serif", - "fontSize": "1rem", - "fontStyle": "normal", - "fontWeight": "600", - "fontTextTransform": "none", - "selectedBackgroundColor": "#ffffff", - "selectedFontColor": "#5f249f", - "selectedIconColor": "#5f249f", - "selectedUnderlineColor": "#5f249f", - "selectedUnderlineThickness": "2px", - "unselectedBackgroundColor": "#ffffff", - "unselectedFontColor": "#666666", - "unselectedIconColor": "#666666", - "disabledFontColor": "#999999", - "disabledIconColor": "#999999", - "disabledFontStyle": "normal", - "hoverBackgroundColor": "#f2eafa", - "pressedBackgroundColor": "#e5d5f6", - "pressedFontWeight": "600", - "dividerColor": "#bfbfbf", - "dividerThickness": "1px", - "focusOutline": "#5f249f", - "scrollButtonsWidth": "48px" - }, - "tag": { - "fontFamily": "Open Sans, sans-serif", - "fontColor": "#000000", - "fontSize": "0.875rem", - "fontStyle": "normal", - "fontWeight": "400", - "labelPaddingTop": "0rem", - "labelPaddingBottom": "0rem", - "labelPaddingLeft": "1rem", - "labelPaddingRight": "1rem", - "height": "40px", - "iconColor": "#ffffff", - "iconSectionWidth": "40px", - "iconHeight": "24px", - "iconWidth": "auto", - "focusColor": "#0095ff" - }, - "textarea": { - "fontFamily": "Open Sans, sans-serif", - "enabledBorderColor": "#000000", - "hoverBorderColor": "#a46ede", - "focusBorderColor": "#0095ff", - "disabledBorderColor": "#999999", - "disabledContainerFillColor": "#f2f2f2", - "readOnlyBorderColor": "#999999", - "hoverReadOnlyBorderColor": "#808080", - "errorBorderColor": "#d0011b", - "hoverErrorBorderColor": "#fe0123", - "inputMarginTop": "0.25rem", - "inputMarginBottom": "0.25rem", - "errorMessageColor": "#d0011b", - "labelFontColor": "#000000", - "labelFontSize": "0.875rem", - "labelFontStyle": "normal", - "labelFontWeight": "600", - "labelLineHeight": "1.715em", - "disabledLabelFontColor": "#999999", - "optionalLabelFontWeight": "400", - "helperTextFontColor": "#000000", - "helperTextFontSize": "0.75rem", - "helperTextFontStyle": "normal", - "helperTextFontWeight": "400", - "helperTextLineHeight": "1.5em", - "disabledHelperTextFontColor": "#999999", - "placeholderFontColor": "#000000b3", - "disabledPlaceholderFontColor": "#999999", - "valueFontColor": "#000000", - "valueFontSize": "1rem", - "valueFontStyle": "normal", - "valueFontWeight": "400", - "disabledValueFontColor": "#999999" - }, - "textInput": { - "fontFamily": "Open Sans, sans-serif", - "enabledBorderColor": "#000000", - "hoverBorderColor": "#a46ede", - "focusBorderColor": "#0095ff", - "disabledBorderColor": "#999999", - "disabledContainerFillColor": "#f2f2f2", - "readOnlyBorderColor": "#999999", - "hoverReadOnlyBorderColor": "#808080", - "errorBorderColor": "#d0011b", - "hoverErrorBorderColor": "#fe0123", - "inputMarginTop": "0.25rem", - "inputMarginBottom": "0.25rem", - "errorMessageColor": "#d0011b", - "errorIconColor": "#d0011b", - "labelFontColor": "#000000", - "labelFontSize": "0.875rem", - "labelFontStyle": "normal", - "labelFontWeight": "600", - "labelLineHeight": "1.715em", - "disabledLabelFontColor": "#999999", - "optionalLabelFontWeight": "400", - "helperTextFontColor": "#000000", - "helperTextFontSize": "0.75rem", - "helperTextFontStyle": "normal", - "helperTextFontWeight": "400", - "helperTextLineHeight": "1.5em", - "disabledHelperTextFontColor": "#999999", - "prefixColor": "#666666", - "prefixDividerBorderWidth": "1px", - "prefixDividerBorderStyle": "solid", - "prefixDividerPaddingRight": "0.5rem", - "suffixColor": "#666666", - "suffixDividerBorderStyle": "solid", - "suffixDividerBorderWidth": "1px", - "suffixDividerPaddingLeft": "0.5rem", - "disabledPrefixColor": "#bfbfbf", - "disabledSuffixColor": "#bfbfbf", - "placeholderFontColor": "#000000b3", - "disabledPlaceholderFontColor": "#999999", - "valueFontColor": "#000000", - "valueFontSize": "1rem", - "valueFontStyle": "normal", - "valueFontWeight": "400", - "disabledValueFontColor": "#999999", - "actionIconColor": "#000000", - "disabledActionIconColor": "#999999", - "hoverActionIconColor": "#000000", - "focusActionIconColor": "#000000", - "activeActionIconColor": "#000000", - "actionBackgroundColor": "transparent", - "disabledActionBackgroundColor": "transparent", - "hoverActionBackgroundColor": "#f2f2f2", - "focusActionBorderColor": "#0095ff", - "activeActionBackgroundColor": "#cccccc", - "listDialogBackgroundColor": "#ffffff", - "listDialogBorderColor": "#bfbfbf", - "listOptionDividerColor": "#e6e6e6", - "listOptionFontColor": "#000000", - "listOptionFontSize": "0.875rem", - "listOptionFontStyle": "normal", - "listOptionFontWeight": "400", - "systemMessageFontColor": "#666666", - "errorListDialogFontColor": "#000000", - "errorListDialogBackgroundColor": "#fff5f6", - "errorListDialogBorderColor": "#d0011b", - "hoverListOptionBackgroundColor": "#f2f2f2", - "activeListOptionBackgroundColor": "#e6e6e6", - "focusListOptionBorderColor": "#0095ff" - }, - "toggleGroup": { - "containerBackgroundColor": "#fafafa", - "containerBorderColor": "#999999", - "labelFontColor": "#000000", - "disabledLabelFontColor": "#999999", - "helperTextFontColor": "#000000", - "disabledHelperTextFontColor": "#999999", - "unselectedBackgroundColor": "#e6e6e6", - "unselectedHoverBackgroundColor": "#cccccc", - "unselectedActiveBackgroundColor": "#5f249f", - "unselectedDisabledBackgroundColor": "#f2f2f2", - "unselectedFontColor": "#000000", - "unselectedDisabledFontColor": "#999999", - "selectedBackgroundColor": "#5f249f", - "selectedHoverBackgroundColor": "#4b1c7d", - "selectedActiveBackgroundColor": "#321353", - "selectedDisabledBackgroundColor": "#f2eafa", - "selectedFontColor": "#ffffff", - "selectedDisabledFontColor": "#cbacec", - "focusColor": "#0095ff", - "labelFontFamily": "Open Sans, sans-serif", - "labelFontSize": "0.875rem", - "labelFontStyle": "normal", - "labelFontWeight": "600", - "labelLineHeight": "1.715em", - "helperTextFontFamily": "Open Sans, sans-serif", - "helperTextFontSize": "0.75rem", - "helperTextFontStyle": "normal", - "helperTextFontWeight": "400", - "helperTextLineHeight": "1.5em", - "optionLabelFontFamily": "Open Sans, sans-serif", - "optionLabelFontSize": "1rem", - "optionLabelFontStyle": "normal", - "optionLabelFontWeight": "400", - "iconPaddingRight": "0.5rem", - "iconPaddingLeft": "0.5rem", - "labelPaddingLeft": "1.5rem", - "labelPaddingRight": "1.5rem", - "iconMarginRight": "0.5rem", - "containerMarginTop": "0.25rem", - "optionBorderThickness": "0px", - "optionBorderStyle": "none", - "optionBorderRadius": "0.25rem", - "containerBorderThickness": "1px", - "containerBorderStyle": "solid", - "containerBorderRadius": "0.375rem", - "optionFocusBorderThickness": "2px" - }, - "wizard": { - "visitedStepFontColor": "#000000", - "visitedStepBackgroundColor": "#ffffff", - "visitedStepBorderColor": "#000000", - "unvisitedStepFontColor": "#666666", - "unvisitedLabelFontColor": "#666666", - "unvisitedHelperTextFontColor": "#666666", - "unvisitedStepBackgroundColor": "transparent", - "unvisitedStepBorderColor": "#666666", - "selectedStepFontColor": "#ffffff", - "selectedStepBackgroundColor": "#5f249f", - "selectedStepBorderColor": "#5f249f", - "selectedLabelFontColor": "#000000", - "selectedHelperTextFontColor": "#000000", - "selectedStepWidth": "32px", - "selectedStepHeight": "32px", - "selectedStepBorderThickness": "2px", - "selectedStepBorderStyle": "solid", - "selectedStepBorderRadius": "45px", - "stepFontSize": "1rem", - "stepFontFamily": "Open Sans, sans-serif", - "stepFontStyle": "normal", - "stepFontWeight": "400", - "stepFontTracking": "0.05em", - "stepIconSize": "20px", - "stepWidth": "32px", - "stepHeight": "32px", - "stepBorderThickness": "2px", - "stepBorderStyle": "solid", - "stepBorderRadius": "45px", - "visitedLabelFontColor": "#000000", - "labelFontSize": "1rem", - "labelFontFamily": "Open Sans, sans-serif", - "labelFontStyle": "normal", - "labelFontWeight": "400", - "labelFontTracking": "0em", - "labelFontTextTransform": "none", - "labelTextAlign": "left", - "helperTextFontSize": "0.875rem", - "helperTextFontFamily": "Open Sans, sans-serif", - "helperTextFontStyle": "normal", - "helperTextFontWeight": "400", - "helperTextFontTracking": "0em", - "helperTextFontTextTransform": "none", - "visitedHelperTextFontColor": "#000000", - "helperTextTextAlign": "left", - "disabledStepBackgroundColor": "#f2f2f2", - "disabledStepFontColor": "#999999", - "disabledLabelFontColor": "#999999", - "disabledHelperTextFontColor": "#999999", - "disabledStepBorderColor": "#f2f2f2", - "disabledStepWidth": "32px", - "disabledStepHeight": "32px", - "disabledStepBorderThickness": "2px", - "disabledStepBorderStyle": "solid", - "disabledStepBorderRadius": "45px", - "separatorBorderThickness": "1px", - "separatorBorderStyle": "solid", - "separatorColor": "#666666", - "focusColor": "#0095ff" - } -} diff --git a/apps/website/screens/common/themes/opinionated-theme.json b/apps/website/screens/common/themes/opinionated-theme.json deleted file mode 100644 index 70f544101f..0000000000 --- a/apps/website/screens/common/themes/opinionated-theme.json +++ /dev/null @@ -1,150 +0,0 @@ -{ - "accordion": { - "accentColor": "#5f249f", - "titleFontColor": "#333333", - "subLabelFontColor": "#666666", - "assistiveTextFontColor": "#666666" - }, - "button": { - "baseColor": "#5f249f", - "primaryFontColor": "#ffffff", - "secondaryHoverFontColor": "#ffffff" - }, - "checkbox": { - "baseColor": "#0067b3", - "checkColor": "#ffffff", - "fontColor": "#000000" - }, - "chip": { - "baseColor": "#e6e6e6", - "fontColor": "#000000", - "iconColor": "#4d4d4d" - }, - "contextualMenu": { - "accentColor": "#f2eafa", - "baseColor": "#ffffff", - "fontColor": "#333333", - "iconColor": "#333333" - }, - "dataGrid": { - "baseColor": "#5f249f", - "headerFontColor": "#ffffff", - "cellFontColor": "#000000" - }, - "dateInput": { - "baseColor": "#5f249f", - "selectedFontColor": "#ffffff" - }, - "dialog": { - "baseColor": "#ffffff", - "closeIconColor": "#000000", - "overlayColor": "#000000b3" - }, - "dropdown": { - "baseColor": "#ffffff", - "fontColor": "#000000", - "optionFontColor": "#000000" - }, - "fileInput": { - "fontColor": "#000000" - }, - "footer": { - "baseColor": "#000000", - "fontColor": "#ffffff", - "accentColor": "#0095ff", - "logo": "/dxc_footer_logo.svg" - }, - "header": { - "baseColor": "#ffffff", - "accentColor": "#000000", - "fontColor": "#000000", - "menuBaseColor": "#ffffff", - "hamburgerColor": "#000000", - "logo": "/dxc_header_logo.svg", - "logoResponsive": "/dxc_header_logo.svg", - "contentColor": "#000000", - "overlayColor": "#000000b3" - }, - "link": { - "baseColor": "#5f249f" - }, - "navTabs": { - "baseColor": "#666666", - "accentColor": "#5f249f" - }, - "paginator": { - "baseColor": "#f2f2f2", - "fontColor": "#000000" - }, - "progressBar": { - "accentColor": "#5f249f", - "baseColor": "#e6e6e6", - "fontColor": "#000000", - "overlayColor": "#000000b3", - "overlayFontColor": "#ffffff" - }, - "quickNav": { - "fontColor": "#666666", - "accentColor": "#9a6bb2" - }, - "radioGroup": { - "baseColor": "#0086e6", - "fontColor": "#000000" - }, - "select": { - "selectedOptionBackgroundColor": "#e6f4ff", - "fontColor": "#000000", - "optionFontColor": "#000000", - "hoverBorderColor": "#a46ede" - }, - "sidenav": { - "baseColor": "#f2f2f2" - }, - "slider": { - "baseColor": "#0067b3", - "fontColor": "#000000", - "totalLineColor": "#e6e6e6" - }, - "spinner": { - "accentColor": "#5f249f", - "baseColor": "#ffffff", - "fontColor": "#000000", - "overlayColor": "#a46ede", - "overlayFontColor": "#ffffff" - }, - "switch": { - "checkedBaseColor": "#5f249f", - "fontColor": "#000000" - }, - "table": { - "baseColor": "#5f249f", - "headerFontColor": "#ffffff", - "cellFontColor": "#000000" - }, - "tabs": { - "baseColor": "#5f249f" - }, - "tag": { - "fontColor": "#000000", - "iconColor": "#ffffff" - }, - "textarea": { - "fontColor": "#000000", - "hoverBorderColor": "#a46ede" - }, - "textInput": { - "fontColor": "#000000", - "hoverBorderColor": "#a46ede" - }, - "toggleGroup": { - "selectedBaseColor": "#5f249f", - "selectedFontColor": "#ffffff", - "unselectedBaseColor": "#e6e6e6", - "unselectedFontColor": "#000000" - }, - "wizard": { - "baseColor": "#5f249f", - "fontColor": "#000000", - "selectedStepFontColor": "#ffffff" - } -} diff --git a/apps/website/screens/components/accordion/AccordionPageLayout.tsx b/apps/website/screens/components/accordion/AccordionPageLayout.tsx index 9cb36985ef..3b9605328e 100644 --- a/apps/website/screens/components/accordion/AccordionPageLayout.tsx +++ b/apps/website/screens/components/accordion/AccordionPageLayout.tsx @@ -11,9 +11,9 @@ const AccordionPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + The accordion component is a vertical stack of interactive headers used to group related content into diff --git a/apps/website/screens/components/accordion/code/AccordionCodePage.tsx b/apps/website/screens/components/accordion/code/AccordionCodePage.tsx index 1e775ee1bc..55fff1bfb9 100644 --- a/apps/website/screens/components/accordion/code/AccordionCodePage.tsx +++ b/apps/website/screens/components/accordion/code/AccordionCodePage.tsx @@ -9,9 +9,8 @@ import controlled from "./examples/controlled"; import uncontrolled from "./examples/uncontrolled"; import icons from "./examples/icons"; import accordions from "./examples/accordions"; -import TableCode from "@/common/TableCode"; +import Code, { TableCode } from "@/common/Code"; import StatusBadge from "@/common/StatusBadge"; -import Code from "@/common/Code"; const sections = [ { @@ -29,7 +28,7 @@ const sections = [ - + children @@ -129,7 +128,7 @@ const sections = [ - + badge @@ -142,7 +141,7 @@ const sections = [ - + children @@ -180,7 +179,7 @@ const sections = [ - + label @@ -193,7 +192,7 @@ const sections = [ - + statusLight @@ -206,7 +205,7 @@ const sections = [ - + subLabel @@ -266,15 +265,13 @@ const sections = [ }, ]; -const AccordionUsagePage = () => { - return ( - - - - - - - ); -}; +const AccordionCodePage = () => ( + + + + + + +); -export default AccordionUsagePage; +export default AccordionCodePage; diff --git a/apps/website/screens/components/accordion/code/examples/accordions.ts b/apps/website/screens/components/accordion/code/examples/accordions.ts index 1e63a60206..23daf828e1 100644 --- a/apps/website/screens/components/accordion/code/examples/accordions.ts +++ b/apps/website/screens/components/accordion/code/examples/accordions.ts @@ -3,14 +3,14 @@ import { useState } from "react"; const code = `() => { return ( - + }} statusLight={} > - + Person information @@ -20,7 +20,7 @@ const code = `() => { badge={{ position: "before", element: }} defaultIsExpanded > - + Person creation information @@ -30,7 +30,7 @@ const code = `() => { statusLight={} defaultIsExpanded > - + Interactions information @@ -40,7 +40,7 @@ const code = `() => { icon="delete" badge={{ position: "before", element: }} > - + Deletion information diff --git a/apps/website/screens/components/accordion/code/examples/badgeStatusLight.ts b/apps/website/screens/components/accordion/code/examples/badgeStatusLight.ts index 7e0668bd36..0c6f5923e0 100644 --- a/apps/website/screens/components/accordion/code/examples/badgeStatusLight.ts +++ b/apps/website/screens/components/accordion/code/examples/badgeStatusLight.ts @@ -2,7 +2,7 @@ import { DxcInset, DxcAccordion, DxcBadge, DxcStatusLight } from "@dxc-technolog const code = `() => { return ( - + { badge={{ position: "before", element: }} statusLight={} > - + To edit your profile you need to go to Settings and click on Profile. diff --git a/apps/website/screens/components/accordion/code/examples/basicUsage.ts b/apps/website/screens/components/accordion/code/examples/basicUsage.ts index d0d34468aa..c072d2e9c3 100644 --- a/apps/website/screens/components/accordion/code/examples/basicUsage.ts +++ b/apps/website/screens/components/accordion/code/examples/basicUsage.ts @@ -2,11 +2,11 @@ import { DxcAccordion, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - + - + To edit your profile you need to go to Settings and click on Profile. diff --git a/apps/website/screens/components/accordion/code/examples/controlled.ts b/apps/website/screens/components/accordion/code/examples/controlled.ts index 67fffb686b..9880eb78ff 100644 --- a/apps/website/screens/components/accordion/code/examples/controlled.ts +++ b/apps/website/screens/components/accordion/code/examples/controlled.ts @@ -8,13 +8,13 @@ const code = `() => { }; return ( - + - + To edit your profile you need to go to Settings and click on Profile. diff --git a/apps/website/screens/components/accordion/code/examples/icons.ts b/apps/website/screens/components/accordion/code/examples/icons.ts index 75a85109df..5eb9e1e5f2 100644 --- a/apps/website/screens/components/accordion/code/examples/icons.ts +++ b/apps/website/screens/components/accordion/code/examples/icons.ts @@ -3,11 +3,11 @@ import { useState } from "react"; const code = `() => { return ( - + - + To edit your profile you need to go to Settings and click on Profile. diff --git a/apps/website/screens/components/accordion/code/examples/uncontrolled.ts b/apps/website/screens/components/accordion/code/examples/uncontrolled.ts index c9b9fc4928..1ca164b57d 100644 --- a/apps/website/screens/components/accordion/code/examples/uncontrolled.ts +++ b/apps/website/screens/components/accordion/code/examples/uncontrolled.ts @@ -3,10 +3,10 @@ import { useState } from "react"; const code = `() => { return ( - + - + To edit your profile you need to go to Settings and click on Profile. diff --git a/apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx b/apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx index 6a7f8ea18a..12b7e2bed1 100644 --- a/apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx +++ b/apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx @@ -38,8 +38,8 @@ const sections = [ section. It helps users understand what type of information they can expect to find inside. - Chevron icon (Expand/collapse): A visual indicator of the accordion's current state - (expanded or collapsed). It provides an affordance for interaction and ensures users can toggle the + Chevron icon (Expand/collapse): A visual indicator of the accordion's current + state (expanded or collapsed). It provides an affordance for interaction and ensures users can toggle the accordion intuitively. @@ -305,15 +305,13 @@ const sections = [ }, ]; -const AccordionOverviewPage = () => { - return ( - - - - - - - ); -}; +const AccordionOverviewPage = () => ( + + + + + + +); export default AccordionOverviewPage; diff --git a/apps/website/screens/components/accordion/overview/examples/basicExample.ts b/apps/website/screens/components/accordion/overview/examples/basicExample.ts index 0d726ff8d8..b1c45937bd 100644 --- a/apps/website/screens/components/accordion/overview/examples/basicExample.ts +++ b/apps/website/screens/components/accordion/overview/examples/basicExample.ts @@ -3,12 +3,12 @@ import { useState } from "react"; const code = `() => { return ( - - + + - + Details @@ -19,7 +19,7 @@ const code = `() => { icon="filled_mail" subLabel="Jan, 09 2025" > - + Details @@ -30,7 +30,7 @@ const code = `() => { statusLight={} subLabel="Jan, 09 2025" > - + Details @@ -41,7 +41,7 @@ const code = `() => { label="Assure Claims" statusLight={} > - + Details @@ -52,7 +52,7 @@ const code = `() => { label="Life Policy" subLabel="Ref - 1236554546" > - + Details @@ -64,7 +64,7 @@ const code = `() => { statusLight={} subLabel="Ref - 1236554546" > - + Details diff --git a/apps/website/screens/components/accordion/overview/examples/nestedExample.ts b/apps/website/screens/components/accordion/overview/examples/nestedExample.ts index 17ab246ea1..32651a4795 100644 --- a/apps/website/screens/components/accordion/overview/examples/nestedExample.ts +++ b/apps/website/screens/components/accordion/overview/examples/nestedExample.ts @@ -3,17 +3,17 @@ import { useState } from "react"; const code = `() => { return ( - + - + - + Details diff --git a/apps/website/screens/components/alert/AlertPageLayout.tsx b/apps/website/screens/components/alert/AlertPageLayout.tsx index 12bfe4ac93..73a8b97208 100644 --- a/apps/website/screens/components/alert/AlertPageLayout.tsx +++ b/apps/website/screens/components/alert/AlertPageLayout.tsx @@ -11,9 +11,9 @@ const AlertPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + Alert messages are meant to provide contextual feedback about important changes in the interface. diff --git a/apps/website/screens/components/alert/code/AlertCodePage.tsx b/apps/website/screens/components/alert/code/AlertCodePage.tsx index 0ecb57222c..b7714593e3 100644 --- a/apps/website/screens/components/alert/code/AlertCodePage.tsx +++ b/apps/website/screens/components/alert/code/AlertCodePage.tsx @@ -6,8 +6,7 @@ import basicUsage from "./examples/basicUsage"; import semantic from "./examples/semantic"; import severalMessages from "./examples/severalMessages"; import Example from "@/common/example/Example"; -import TableCode, { ExtendedTableCode } from "@/common/TableCode"; -import Code from "@/common/Code"; +import Code, { TableCode, ExtendedTableCode } from "@/common/Code"; import StatusBadge from "@/common/StatusBadge"; const actionTypeString = `{ @@ -126,7 +125,7 @@ const sections = [ - + title @@ -163,7 +162,7 @@ const sections = [ const AlertCodePage = () => ( - + diff --git a/apps/website/screens/components/alert/code/examples/basicUsage.ts b/apps/website/screens/components/alert/code/examples/basicUsage.ts index 6ed0e6778f..45039646b0 100644 --- a/apps/website/screens/components/alert/code/examples/basicUsage.ts +++ b/apps/website/screens/components/alert/code/examples/basicUsage.ts @@ -2,7 +2,7 @@ import { DxcAlert, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - + { return ( - - + + diff --git a/apps/website/screens/components/alert/code/examples/severalMessages.ts b/apps/website/screens/components/alert/code/examples/severalMessages.ts index aae1e57a60..550ef7f1ae 100644 --- a/apps/website/screens/components/alert/code/examples/severalMessages.ts +++ b/apps/website/screens/components/alert/code/examples/severalMessages.ts @@ -8,8 +8,8 @@ const code = `() => { ]; return ( - - + + { return ( - + diff --git a/apps/website/screens/components/alert/overview/examples/banner.ts b/apps/website/screens/components/alert/overview/examples/banner.ts index 0ef1699d30..c326eb50ea 100644 --- a/apps/website/screens/components/alert/overview/examples/banner.ts +++ b/apps/website/screens/components/alert/overview/examples/banner.ts @@ -19,8 +19,8 @@ const code = `() => { ]; return ( - - + + { ]; return ( - - + + setLoadDialog(1)} /> setLoadDialog(2)} /> setLoadDialog(3)} /> setLoadDialog(4)} /> {loadDialog !== 0 && ( - + {loadDialog === 1 && ( { ]; return ( - - + + {} }} diff --git a/apps/website/screens/components/application-layout/ApplicationLayoutPageLayout.tsx b/apps/website/screens/components/application-layout/ApplicationLayoutPageLayout.tsx index c420de33c3..89489b2fc5 100644 --- a/apps/website/screens/components/application-layout/ApplicationLayoutPageLayout.tsx +++ b/apps/website/screens/components/application-layout/ApplicationLayoutPageLayout.tsx @@ -15,9 +15,9 @@ const ApplicationLayoutPageHeading = ({ children }: { children: ReactNode }) => ]; return ( - + - + The application layout provides a base UI wrapper for any application built with Halstack. diff --git a/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx b/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx index 53aa472e2d..861b29f77b 100644 --- a/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx +++ b/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx @@ -3,9 +3,8 @@ import DocFooter from "@/common/DocFooter"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import Link from "next/link"; -import TableCode from "@/common/TableCode"; +import Code, { TableCode } from "@/common/Code"; import StatusBadge from "@/common/StatusBadge"; -import Code from "@/common/Code"; const ApplicationLayoutPropsTable = () => ( @@ -72,7 +71,7 @@ const ApplicationLayoutPropsTable = () => ( - + children diff --git a/apps/website/screens/components/badge/BadgePageLayout.tsx b/apps/website/screens/components/badge/BadgePageLayout.tsx index 37f2ab7aeb..bf5f505a2a 100644 --- a/apps/website/screens/components/badge/BadgePageLayout.tsx +++ b/apps/website/screens/components/badge/BadgePageLayout.tsx @@ -11,9 +11,9 @@ const BadgePageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + The badge component enables users to categorize content effectively and uniformly across their interfaces. diff --git a/apps/website/screens/components/badge/code/BadgeCodePage.tsx b/apps/website/screens/components/badge/code/BadgeCodePage.tsx index 104d612920..2e51e7ad2c 100644 --- a/apps/website/screens/components/badge/code/BadgeCodePage.tsx +++ b/apps/website/screens/components/badge/code/BadgeCodePage.tsx @@ -1,7 +1,7 @@ import { DxcFlex, DxcTable, DxcLink } from "@dxc-technology/halstack-react"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import QuickNavContainer from "@/common/QuickNavContainer"; -import TableCode from "@/common/TableCode"; +import { TableCode } from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; import contextual from "./examples/contextual"; diff --git a/apps/website/screens/components/badge/code/examples/contextual.ts b/apps/website/screens/components/badge/code/examples/contextual.ts index 59334d60cd..058353dc0a 100644 --- a/apps/website/screens/components/badge/code/examples/contextual.ts +++ b/apps/website/screens/components/badge/code/examples/contextual.ts @@ -3,8 +3,8 @@ import Placeholder from "@/common/Placeholder"; const code = `() => { return ( - - + + diff --git a/apps/website/screens/components/badge/code/examples/icons.ts b/apps/website/screens/components/badge/code/examples/icons.ts index 1fa89d811f..389e2f973c 100644 --- a/apps/website/screens/components/badge/code/examples/icons.ts +++ b/apps/website/screens/components/badge/code/examples/icons.ts @@ -17,8 +17,8 @@ const code = `() => { ); return ( - - + + diff --git a/apps/website/screens/components/badge/code/examples/notification.ts b/apps/website/screens/components/badge/code/examples/notification.ts index e596d0ebab..eb32a12e82 100644 --- a/apps/website/screens/components/badge/code/examples/notification.ts +++ b/apps/website/screens/components/badge/code/examples/notification.ts @@ -3,8 +3,8 @@ import Placeholder from "@/common/Placeholder"; const code = `() => { return ( - - + + diff --git a/apps/website/screens/components/badge/overview/examples/contextual.ts b/apps/website/screens/components/badge/overview/examples/contextual.ts index 089399ece7..c1c978f4dd 100644 --- a/apps/website/screens/components/badge/overview/examples/contextual.ts +++ b/apps/website/screens/components/badge/overview/examples/contextual.ts @@ -3,9 +3,9 @@ import Placeholder from "@/common/Placeholder"; const code = `() => { return ( - - - + + + @@ -14,7 +14,7 @@ const code = `() => { - + diff --git a/apps/website/screens/components/badge/overview/examples/notification.ts b/apps/website/screens/components/badge/overview/examples/notification.ts index 3eaa689708..0af45c57b2 100644 --- a/apps/website/screens/components/badge/overview/examples/notification.ts +++ b/apps/website/screens/components/badge/overview/examples/notification.ts @@ -3,8 +3,8 @@ import Placeholder from "@/common/Placeholder"; const code = `() => { return ( - - + + diff --git a/apps/website/screens/components/bleed/BleedPageLayout.tsx b/apps/website/screens/components/bleed/BleedPageLayout.tsx index 9df070342c..3f859f66eb 100644 --- a/apps/website/screens/components/bleed/BleedPageLayout.tsx +++ b/apps/website/screens/components/bleed/BleedPageLayout.tsx @@ -11,9 +11,9 @@ const BleedPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + Bleed layout applies negative spacing scale to its child nodes. diff --git a/apps/website/screens/components/bleed/code/BleedCodePage.tsx b/apps/website/screens/components/bleed/code/BleedCodePage.tsx index 44243a7f6d..83143ed97b 100644 --- a/apps/website/screens/components/bleed/code/BleedCodePage.tsx +++ b/apps/website/screens/components/bleed/code/BleedCodePage.tsx @@ -1,7 +1,7 @@ import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import QuickNavContainer from "@/common/QuickNavContainer"; -import TableCode from "@/common/TableCode"; +import { TableCode } from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; import basicUsage from "./examples/basicUsage"; @@ -29,7 +29,7 @@ const sections = [ - + children diff --git a/apps/website/screens/components/bleed/code/examples/customSides.ts b/apps/website/screens/components/bleed/code/examples/customSides.ts index 2f79aeba95..8d51480313 100644 --- a/apps/website/screens/components/bleed/code/examples/customSides.ts +++ b/apps/website/screens/components/bleed/code/examples/customSides.ts @@ -6,7 +6,12 @@ const code = `() => { - + diff --git a/apps/website/screens/components/breadcrumbs/BreadcrumbsPageLayout.tsx b/apps/website/screens/components/breadcrumbs/BreadcrumbsPageLayout.tsx index 16a8142011..dbd4383ba8 100644 --- a/apps/website/screens/components/breadcrumbs/BreadcrumbsPageLayout.tsx +++ b/apps/website/screens/components/breadcrumbs/BreadcrumbsPageLayout.tsx @@ -11,9 +11,9 @@ const BreadcrumbsPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + A breadcrumbs trail is a secondary form of navigation that allows users to keep track and maintain awareness diff --git a/apps/website/screens/components/breadcrumbs/code/BreadcrumbsCodePage.tsx b/apps/website/screens/components/breadcrumbs/code/BreadcrumbsCodePage.tsx index 5753b01673..b48c078312 100644 --- a/apps/website/screens/components/breadcrumbs/code/BreadcrumbsCodePage.tsx +++ b/apps/website/screens/components/breadcrumbs/code/BreadcrumbsCodePage.tsx @@ -1,10 +1,9 @@ -import Code from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import { DxcFlex, DxcParagraph, DxcTable } from "@dxc-technology/halstack-react"; -import TableCode, { ExtendedTableCode } from "@/common/TableCode"; +import Code, { TableCode, ExtendedTableCode } from "@/common/Code"; import basicUsage from "./examples/basicUsage"; import nextJS from "./examples/nextJS"; import StatusBadge from "@/common/StatusBadge"; @@ -40,7 +39,7 @@ const sections = [ - + items diff --git a/apps/website/screens/components/breadcrumbs/code/examples/basicUsage.ts b/apps/website/screens/components/breadcrumbs/code/examples/basicUsage.ts index 4c1e3c5882..4e47662893 100644 --- a/apps/website/screens/components/breadcrumbs/code/examples/basicUsage.ts +++ b/apps/website/screens/components/breadcrumbs/code/examples/basicUsage.ts @@ -20,7 +20,7 @@ const code = `() => { ]; return ( - + ); diff --git a/apps/website/screens/components/breadcrumbs/code/examples/nextJS.ts b/apps/website/screens/components/breadcrumbs/code/examples/nextJS.ts index 3786cc7efa..5ee7143801 100644 --- a/apps/website/screens/components/breadcrumbs/code/examples/nextJS.ts +++ b/apps/website/screens/components/breadcrumbs/code/examples/nextJS.ts @@ -26,7 +26,7 @@ const code = `() => { ]; return ( - + ); diff --git a/apps/website/screens/components/breadcrumbs/overview/examples/collapsed.tsx b/apps/website/screens/components/breadcrumbs/overview/examples/collapsed.tsx index 66581471ec..8b9b23c9ca 100644 --- a/apps/website/screens/components/breadcrumbs/overview/examples/collapsed.tsx +++ b/apps/website/screens/components/breadcrumbs/overview/examples/collapsed.tsx @@ -10,7 +10,7 @@ const code = `() => { ]; return ( - + ); diff --git a/apps/website/screens/components/breadcrumbs/overview/examples/noRoot.tsx b/apps/website/screens/components/breadcrumbs/overview/examples/noRoot.tsx index 5822267662..69e62b606c 100644 --- a/apps/website/screens/components/breadcrumbs/overview/examples/noRoot.tsx +++ b/apps/website/screens/components/breadcrumbs/overview/examples/noRoot.tsx @@ -10,7 +10,7 @@ const code = `() => { ]; return ( - + ); diff --git a/apps/website/screens/components/bulleted-list/BulletedListPageLayout.tsx b/apps/website/screens/components/bulleted-list/BulletedListPageLayout.tsx index bf5a3a8704..f0f797d634 100644 --- a/apps/website/screens/components/bulleted-list/BulletedListPageLayout.tsx +++ b/apps/website/screens/components/bulleted-list/BulletedListPageLayout.tsx @@ -14,9 +14,9 @@ const BulletedListPageHeading = ({ children }: { children: ReactNode }) => { }, ]; return ( - + - + Bulleted list are used to display text items in a bulleted format. diff --git a/apps/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx b/apps/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx index cfbdf1bf5c..ee4c304689 100644 --- a/apps/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx +++ b/apps/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx @@ -1,4 +1,3 @@ -import Code from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; import QuickNavContainer from "@/common/QuickNavContainer"; @@ -6,7 +5,7 @@ import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import { DxcParagraph, DxcFlex, DxcTable, DxcLink } from "@dxc-technology/halstack-react"; import basicUsage from "./examples/basicUsage"; import nestedList from "./examples/nestedList"; -import TableCode from "@/common/TableCode"; +import Code, { TableCode } from "@/common/Code"; import StatusBadge from "@/common/StatusBadge"; const sections = [ @@ -50,7 +49,7 @@ const sections = [ - + children @@ -86,7 +85,7 @@ const sections = [ - + children diff --git a/apps/website/screens/components/bulleted-list/code/examples/basicUsage.ts b/apps/website/screens/components/bulleted-list/code/examples/basicUsage.ts index 502a54fd02..eb4b6c1b97 100644 --- a/apps/website/screens/components/bulleted-list/code/examples/basicUsage.ts +++ b/apps/website/screens/components/bulleted-list/code/examples/basicUsage.ts @@ -1,7 +1,7 @@ import { DxcBulletedList, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - + Code Usage diff --git a/apps/website/screens/components/bulleted-list/code/examples/nestedList.ts b/apps/website/screens/components/bulleted-list/code/examples/nestedList.ts index 7707738a26..af6301653f 100644 --- a/apps/website/screens/components/bulleted-list/code/examples/nestedList.ts +++ b/apps/website/screens/components/bulleted-list/code/examples/nestedList.ts @@ -1,7 +1,7 @@ import { DxcBulletedList, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - + Code diff --git a/apps/website/screens/components/button/ButtonPageLayout.tsx b/apps/website/screens/components/button/ButtonPageLayout.tsx index 2f3b8b0c50..4095354678 100644 --- a/apps/website/screens/components/button/ButtonPageLayout.tsx +++ b/apps/website/screens/components/button/ButtonPageLayout.tsx @@ -11,9 +11,9 @@ const ButtonPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + Buttons are basic interface elements that initialize an action or function when the user interacts with diff --git a/apps/website/screens/components/button/code/ButtonCodePage.tsx b/apps/website/screens/components/button/code/ButtonCodePage.tsx index 55b13598f7..5f0b52716e 100644 --- a/apps/website/screens/components/button/code/ButtonCodePage.tsx +++ b/apps/website/screens/components/button/code/ButtonCodePage.tsx @@ -1,5 +1,4 @@ import { DxcFlex, DxcLink, DxcTable } from "@dxc-technology/halstack-react"; -import Code from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; @@ -8,7 +7,7 @@ import basicUsage from "./examples/basicUsage"; import semantic from "./examples/semantic"; import icons from "./examples/icons"; import sizes from "./examples/sizes"; -import TableCode from "@/common/TableCode"; +import Code, { TableCode } from "@/common/Code"; const sections = [ { diff --git a/apps/website/screens/components/button/code/examples/basicUsage.ts b/apps/website/screens/components/button/code/examples/basicUsage.ts index ca89f4dcb2..a997c854ab 100644 --- a/apps/website/screens/components/button/code/examples/basicUsage.ts +++ b/apps/website/screens/components/button/code/examples/basicUsage.ts @@ -2,7 +2,7 @@ import { DxcButton, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - + ); diff --git a/apps/website/screens/components/button/code/examples/icons.ts b/apps/website/screens/components/button/code/examples/icons.ts index a96738a2fd..716ad2ef66 100644 --- a/apps/website/screens/components/button/code/examples/icons.ts +++ b/apps/website/screens/components/button/code/examples/icons.ts @@ -2,8 +2,8 @@ import { DxcButton, DxcFlex, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - - + + diff --git a/apps/website/screens/components/button/code/examples/semantic.ts b/apps/website/screens/components/button/code/examples/semantic.ts index 16ab6332e7..d6a0f121f4 100644 --- a/apps/website/screens/components/button/code/examples/semantic.ts +++ b/apps/website/screens/components/button/code/examples/semantic.ts @@ -2,8 +2,8 @@ import { DxcButton, DxcFlex, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - - + + diff --git a/apps/website/screens/components/button/code/examples/sizes.ts b/apps/website/screens/components/button/code/examples/sizes.ts index 889e21ee7c..edbde9d595 100644 --- a/apps/website/screens/components/button/code/examples/sizes.ts +++ b/apps/website/screens/components/button/code/examples/sizes.ts @@ -2,23 +2,23 @@ import { DxcButton, DxcInset, DxcFlex } from "@dxc-technology/halstack-react"; const code = `() => { return ( - - - + + + - + - + diff --git a/apps/website/screens/components/button/overview/examples/iconUsage.ts b/apps/website/screens/components/button/overview/examples/iconUsage.ts index 3a486b6ed5..fde79505ce 100644 --- a/apps/website/screens/components/button/overview/examples/iconUsage.ts +++ b/apps/website/screens/components/button/overview/examples/iconUsage.ts @@ -2,8 +2,8 @@ import { DxcButton, DxcFlex, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - - + + diff --git a/apps/website/screens/components/button/overview/examples/semantics.ts b/apps/website/screens/components/button/overview/examples/semantics.ts index d2a4c0b758..40d74e89a3 100644 --- a/apps/website/screens/components/button/overview/examples/semantics.ts +++ b/apps/website/screens/components/button/overview/examples/semantics.ts @@ -2,8 +2,8 @@ import { DxcButton, DxcInset, DxcFlex } from "@dxc-technology/halstack-react"; const code = `() => { return ( - - + + diff --git a/apps/website/screens/components/button/overview/examples/variants.ts b/apps/website/screens/components/button/overview/examples/variants.ts index 979a376fba..34d84f5d0f 100644 --- a/apps/website/screens/components/button/overview/examples/variants.ts +++ b/apps/website/screens/components/button/overview/examples/variants.ts @@ -2,8 +2,8 @@ import { DxcButton, DxcInset, DxcFlex } from "@dxc-technology/halstack-react"; const code = `() => { return ( - - + + diff --git a/apps/website/screens/components/card/CardPageLayout.tsx b/apps/website/screens/components/card/CardPageLayout.tsx index 944de91fb7..03dae604e9 100644 --- a/apps/website/screens/components/card/CardPageLayout.tsx +++ b/apps/website/screens/components/card/CardPageLayout.tsx @@ -11,9 +11,9 @@ const CardPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + A card is a flexible, modular UI components used to group related information and actions within a diff --git a/apps/website/screens/components/card/code/CardCodePage.tsx b/apps/website/screens/components/card/code/CardCodePage.tsx index a988464222..3571035f7f 100644 --- a/apps/website/screens/components/card/code/CardCodePage.tsx +++ b/apps/website/screens/components/card/code/CardCodePage.tsx @@ -3,9 +3,8 @@ import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; -import Code from "@/common/Code"; import basicUsage from "./examples/basicUsage"; -import TableCode from "@/common/TableCode"; +import Code, { TableCode } from "@/common/Code"; const sections = [ { diff --git a/apps/website/screens/components/card/code/examples/basicUsage.ts b/apps/website/screens/components/card/code/examples/basicUsage.ts index a4d10a367c..ecc5e22188 100644 --- a/apps/website/screens/components/card/code/examples/basicUsage.ts +++ b/apps/website/screens/components/card/code/examples/basicUsage.ts @@ -2,9 +2,11 @@ import { DxcInset, DxcCard } from "@dxc-technology/halstack-react"; const code = `() => { return ( - + - Personal information + + Personal information + ); diff --git a/apps/website/screens/components/checkbox/CheckboxPageLayout.tsx b/apps/website/screens/components/checkbox/CheckboxPageLayout.tsx index af9d9ad8c5..660ad83aa0 100644 --- a/apps/website/screens/components/checkbox/CheckboxPageLayout.tsx +++ b/apps/website/screens/components/checkbox/CheckboxPageLayout.tsx @@ -11,9 +11,9 @@ const CheckboxPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + Checkboxes are inputs that allow the user to select one or more options from a range of attributes. diff --git a/apps/website/screens/components/checkbox/code/CheckboxCodePage.tsx b/apps/website/screens/components/checkbox/code/CheckboxCodePage.tsx index ce33c37237..a643de068e 100644 --- a/apps/website/screens/components/checkbox/code/CheckboxCodePage.tsx +++ b/apps/website/screens/components/checkbox/code/CheckboxCodePage.tsx @@ -5,8 +5,7 @@ import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; import controlled from "./examples/controlled"; import uncontrolled from "./examples/uncontrolled"; -import TableCode from "@/common/TableCode"; -import Code from "@/common/Code"; +import Code, { TableCode } from "@/common/Code"; const sections = [ { diff --git a/apps/website/screens/components/checkbox/code/examples/controlled.ts b/apps/website/screens/components/checkbox/code/examples/controlled.ts index 6196c6cc0d..7c428ba6ec 100644 --- a/apps/website/screens/components/checkbox/code/examples/controlled.ts +++ b/apps/website/screens/components/checkbox/code/examples/controlled.ts @@ -8,7 +8,7 @@ const code = `() => { }; return ( - + ); diff --git a/apps/website/screens/components/checkbox/code/examples/uncontrolled.ts b/apps/website/screens/components/checkbox/code/examples/uncontrolled.ts index 626fc7eaf9..940102161a 100644 --- a/apps/website/screens/components/checkbox/code/examples/uncontrolled.ts +++ b/apps/website/screens/components/checkbox/code/examples/uncontrolled.ts @@ -10,8 +10,8 @@ const code = `() => { }; return ( - - + + { return ( - + diff --git a/apps/website/screens/components/checkbox/overview/examples/stacking.ts b/apps/website/screens/components/checkbox/overview/examples/stacking.ts index 7b4de3b288..0a345453f5 100644 --- a/apps/website/screens/components/checkbox/overview/examples/stacking.ts +++ b/apps/website/screens/components/checkbox/overview/examples/stacking.ts @@ -2,7 +2,7 @@ import { DxcCheckbox, DxcInset, DxcFlex, DxcTypography } from "@dxc-technology/h const code = `() => { return ( - + { ]; return ( - + - + A chip is a compact, interactive UI element used to represent small pieces of information, actions, or diff --git a/apps/website/screens/components/chip/code/ChipCodePage.tsx b/apps/website/screens/components/chip/code/ChipCodePage.tsx index 1810934198..f6ec18b081 100644 --- a/apps/website/screens/components/chip/code/ChipCodePage.tsx +++ b/apps/website/screens/components/chip/code/ChipCodePage.tsx @@ -3,10 +3,9 @@ import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; -import Code from "@/common/Code"; import basicUsage from "./examples/basicUsage"; import icons from "./examples/icons"; -import TableCode from "@/common/TableCode"; +import Code, { TableCode } from "@/common/Code"; const sections = [ { diff --git a/apps/website/screens/components/chip/code/examples/basicUsage.ts b/apps/website/screens/components/chip/code/examples/basicUsage.ts index 201ca9d85d..49227dccd3 100644 --- a/apps/website/screens/components/chip/code/examples/basicUsage.ts +++ b/apps/website/screens/components/chip/code/examples/basicUsage.ts @@ -2,7 +2,7 @@ import { DxcChip, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - + ); diff --git a/apps/website/screens/components/chip/code/examples/icons.ts b/apps/website/screens/components/chip/code/examples/icons.ts index 6085ec42f5..c49a98a497 100644 --- a/apps/website/screens/components/chip/code/examples/icons.ts +++ b/apps/website/screens/components/chip/code/examples/icons.ts @@ -19,8 +19,8 @@ const code = `() => { console.log("Favorite."); }; return ( - - + + diff --git a/apps/website/screens/components/chip/overview/examples/categorization.ts b/apps/website/screens/components/chip/overview/examples/categorization.ts index d2dd832054..d63816d13d 100644 --- a/apps/website/screens/components/chip/overview/examples/categorization.ts +++ b/apps/website/screens/components/chip/overview/examples/categorization.ts @@ -2,8 +2,8 @@ import { DxcChip, DxcInset, DxcFlex } from "@dxc-technology/halstack-react"; const code = `() => { return ( - - + + {}} /> {}} /> {}} /> diff --git a/apps/website/screens/components/chip/overview/examples/filter.ts b/apps/website/screens/components/chip/overview/examples/filter.ts index 39fd2e7951..8f080fc665 100644 --- a/apps/website/screens/components/chip/overview/examples/filter.ts +++ b/apps/website/screens/components/chip/overview/examples/filter.ts @@ -13,8 +13,8 @@ const roles = ["Admin", "Security Analyst", "Auditor", "Read-Only User"]; }; return ( - - + > + - + - + {selectedRoles.map((role) => ( { ]; return ( - + - + The container component represents the box model inside the Halstack Design System. diff --git a/apps/website/screens/components/container/code/ContainerCodePage.tsx b/apps/website/screens/components/container/code/ContainerCodePage.tsx index 075aac09d5..dcd71aa41c 100644 --- a/apps/website/screens/components/container/code/ContainerCodePage.tsx +++ b/apps/website/screens/components/container/code/ContainerCodePage.tsx @@ -1,10 +1,9 @@ import { DxcFlex, DxcTable, DxcLink, DxcParagraph } from "@dxc-technology/halstack-react"; -import Code from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import StatusBadge from "@/common/StatusBadge"; -import TableCode, { ExtendedTableCode } from "@/common/TableCode"; +import Code, { TableCode, ExtendedTableCode } from "@/common/Code"; import Example from "@/common/example/Example"; import basicUsage from "./examples/basicUsage"; import listbox from "./examples/listbox"; @@ -92,7 +91,7 @@ const sections = [ border - + {borderTypeString}

being BorderProperties an object with the following properties: diff --git a/apps/website/screens/components/container/code/examples/basicUsage.ts b/apps/website/screens/components/container/code/examples/basicUsage.ts index a5163e14c3..b4b6ab9dad 100644 --- a/apps/website/screens/components/container/code/examples/basicUsage.ts +++ b/apps/website/screens/components/container/code/examples/basicUsage.ts @@ -2,7 +2,7 @@ import { DxcContainer, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - + { const suggestions = ["Option 1", "Option 2", "Option 3", "Option 4"]; return ( - + MDN web docs: CSS box model - + { ]; return ( - + - - + + - The Contextual menu provides quick access to navigation or actions related to the current context, enhancing + The contextual menu provides quick access to navigation or actions related to the current context, enhancing usability and content organization. diff --git a/apps/website/screens/components/contextual-menu/code/ContextualMenuCodePage.tsx b/apps/website/screens/components/contextual-menu/code/ContextualMenuCodePage.tsx index c7e80cc18e..cc3477cab7 100644 --- a/apps/website/screens/components/contextual-menu/code/ContextualMenuCodePage.tsx +++ b/apps/website/screens/components/contextual-menu/code/ContextualMenuCodePage.tsx @@ -1,8 +1,7 @@ -import Code from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import TableCode, { ExtendedTableCode } from "@/common/TableCode"; +import Code, { TableCode, ExtendedTableCode } from "@/common/Code"; import Example from "@/common/example/Example"; import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react"; import actionMenu from "./examples/actionMenu"; @@ -42,13 +41,13 @@ const sections = [ - + items - (Item | GroupItem)[] | Section[] + (Item | GroupItem)[] | Section[]

being an Item an object with the following properties:

diff --git a/apps/website/screens/components/contextual-menu/code/examples/actionMenu.ts b/apps/website/screens/components/contextual-menu/code/examples/actionMenu.ts index 70869c16a9..47c43d0564 100644 --- a/apps/website/screens/components/contextual-menu/code/examples/actionMenu.ts +++ b/apps/website/screens/components/contextual-menu/code/examples/actionMenu.ts @@ -39,7 +39,7 @@ const code = `() => { ]; return ( - + diff --git a/apps/website/screens/components/contextual-menu/code/examples/navigationMenu.ts b/apps/website/screens/components/contextual-menu/code/examples/navigationMenu.ts index 0bfe993198..ad5b27aad0 100644 --- a/apps/website/screens/components/contextual-menu/code/examples/navigationMenu.ts +++ b/apps/website/screens/components/contextual-menu/code/examples/navigationMenu.ts @@ -47,7 +47,7 @@ const code = `() => { ]; return ( - + diff --git a/apps/website/screens/components/contextual-menu/overview/ContextualMenuOverviewPage.tsx b/apps/website/screens/components/contextual-menu/overview/ContextualMenuOverviewPage.tsx index dafe0021a7..66c528fd2e 100644 --- a/apps/website/screens/components/contextual-menu/overview/ContextualMenuOverviewPage.tsx +++ b/apps/website/screens/components/contextual-menu/overview/ContextualMenuOverviewPage.tsx @@ -72,8 +72,8 @@ const sections = [ content: ( <> - Although visually similar, the Sidenav component and the contextual menu differ significantly in - functionality. Our Sidenav is designed to provide a consistent and persistent navigation structure throughout + Although visually similar, the sidenav component and the contextual menu differ significantly in + functionality. Our sidenav is designed to provide a consistent and persistent navigation structure throughout the application, allowing users to easily switch between different sections or pages within the app. diff --git a/apps/website/screens/components/data-grid/DataGridPageLayout.tsx b/apps/website/screens/components/data-grid/DataGridPageLayout.tsx index 119c920258..bccc55afd0 100644 --- a/apps/website/screens/components/data-grid/DataGridPageLayout.tsx +++ b/apps/website/screens/components/data-grid/DataGridPageLayout.tsx @@ -12,9 +12,9 @@ const DataGridPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + - + actions diff --git a/apps/website/screens/components/data-grid/code/examples/actionsCell.ts b/apps/website/screens/components/data-grid/code/examples/actionsCell.ts index 69c52a51a8..71fbd63831 100644 --- a/apps/website/screens/components/data-grid/code/examples/actionsCell.ts +++ b/apps/website/screens/components/data-grid/code/examples/actionsCell.ts @@ -67,7 +67,7 @@ const actions = [ ]; return ( - + ); diff --git a/apps/website/screens/components/data-grid/code/examples/basicUsage.ts b/apps/website/screens/components/data-grid/code/examples/basicUsage.ts index 4cd9274304..9fafedbe72 100644 --- a/apps/website/screens/components/data-grid/code/examples/basicUsage.ts +++ b/apps/website/screens/components/data-grid/code/examples/basicUsage.ts @@ -37,7 +37,7 @@ const code = `() => { ]; return ( - + ); diff --git a/apps/website/screens/components/data-grid/code/examples/customSort.ts b/apps/website/screens/components/data-grid/code/examples/customSort.ts index 8115e22efb..ca964447a5 100644 --- a/apps/website/screens/components/data-grid/code/examples/customSort.ts +++ b/apps/website/screens/components/data-grid/code/examples/customSort.ts @@ -45,7 +45,7 @@ const code = `() => { const [page, setPage] = useState(0); return ( - + { ]; return ( - + ); diff --git a/apps/website/screens/components/data-grid/code/examples/hierarchical.ts b/apps/website/screens/components/data-grid/code/examples/hierarchical.ts index 1c23d38422..a15c7f3078 100644 --- a/apps/website/screens/components/data-grid/code/examples/hierarchical.ts +++ b/apps/website/screens/components/data-grid/code/examples/hierarchical.ts @@ -79,7 +79,7 @@ const code = `() => { const summaryRow = { label: "Total", total: 100, id: "summary" } return ( - + ); diff --git a/apps/website/screens/components/data-grid/code/examples/hierarchicalSelectable.ts b/apps/website/screens/components/data-grid/code/examples/hierarchicalSelectable.ts index 230fd49314..47de08593d 100644 --- a/apps/website/screens/components/data-grid/code/examples/hierarchicalSelectable.ts +++ b/apps/website/screens/components/data-grid/code/examples/hierarchicalSelectable.ts @@ -79,7 +79,7 @@ const code = `() => { const [selectedRows, setSelectedRows] = useState(new Set()); return ( - + { ]; return ( - + ); diff --git a/apps/website/screens/components/data-grid/code/examples/selectable.ts b/apps/website/screens/components/data-grid/code/examples/selectable.ts index 17493981bc..560511e26f 100644 --- a/apps/website/screens/components/data-grid/code/examples/selectable.ts +++ b/apps/website/screens/components/data-grid/code/examples/selectable.ts @@ -39,7 +39,7 @@ const code = `() => { const [selectedRows, setSelectedRows] = useState(new Set()); return ( - + { ]; return ( - + ); diff --git a/apps/website/screens/components/data-grid/usage/examples/expandedContent.ts b/apps/website/screens/components/data-grid/usage/examples/expandedContent.ts index cd3b7b9d0c..f2ee25ce30 100644 --- a/apps/website/screens/components/data-grid/usage/examples/expandedContent.ts +++ b/apps/website/screens/components/data-grid/usage/examples/expandedContent.ts @@ -60,7 +60,7 @@ const code = `() => { ]; return ( - + ); diff --git a/apps/website/screens/components/data-grid/usage/examples/filterable.ts b/apps/website/screens/components/data-grid/usage/examples/filterable.ts index c9c1f1c19a..849105e963 100644 --- a/apps/website/screens/components/data-grid/usage/examples/filterable.ts +++ b/apps/website/screens/components/data-grid/usage/examples/filterable.ts @@ -63,8 +63,8 @@ const code = `() => { }; return ( - - + + { const [selectedRows, setSelectedRows] = useState(new Set([1, 2])); return ( - + { ]; return ( - + - + Date inputs enable users to type or select a date in a predefined format. diff --git a/apps/website/screens/components/date-input/code/DateInputCodePage.tsx b/apps/website/screens/components/date-input/code/DateInputCodePage.tsx index 08f18dda49..213485845f 100644 --- a/apps/website/screens/components/date-input/code/DateInputCodePage.tsx +++ b/apps/website/screens/components/date-input/code/DateInputCodePage.tsx @@ -2,13 +2,12 @@ import { DxcFlex, DxcTable, DxcParagraph, DxcLink } from "@dxc-technology/halsta import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import DocFooter from "@/common/DocFooter"; -import Code from "@/common/Code"; import Example from "@/common/example/Example"; import basicUsage from "./examples/basicUsage"; import errorHandling from "./examples/errorHandling"; import controlled from "./examples/controlled"; import uncontrolled from "./examples/uncontrolled"; -import TableCode from "@/common/TableCode"; +import Code, { TableCode } from "@/common/Code"; const sections = [ { diff --git a/apps/website/screens/components/date-input/code/examples/basicUsage.ts b/apps/website/screens/components/date-input/code/examples/basicUsage.ts index 6cf60d99eb..4c8b15fc41 100644 --- a/apps/website/screens/components/date-input/code/examples/basicUsage.ts +++ b/apps/website/screens/components/date-input/code/examples/basicUsage.ts @@ -2,7 +2,7 @@ import { DxcDateInput, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - + ); diff --git a/apps/website/screens/components/date-input/code/examples/controlled.ts b/apps/website/screens/components/date-input/code/examples/controlled.ts index dec302019f..a99c6cfd07 100644 --- a/apps/website/screens/components/date-input/code/examples/controlled.ts +++ b/apps/website/screens/components/date-input/code/examples/controlled.ts @@ -11,7 +11,7 @@ const code = `() => { }; return ( - + { }; return ( - + { }; return ( - - + + { ]; return ( - + - + A modal dialog is a message box or child window that requires user interaction before returning to the diff --git a/apps/website/screens/components/dialog/code/DialogCodePage.tsx b/apps/website/screens/components/dialog/code/DialogCodePage.tsx index 4d60d479d9..18a501dd27 100644 --- a/apps/website/screens/components/dialog/code/DialogCodePage.tsx +++ b/apps/website/screens/components/dialog/code/DialogCodePage.tsx @@ -1,5 +1,4 @@ import { DxcParagraph, DxcFlex, DxcTable } from "@dxc-technology/halstack-react"; -import Code from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; @@ -7,7 +6,7 @@ import Example from "@/common/example/Example"; import basicUsage from "./examples/basicUsage"; import withContent from "./examples/withContent"; import backgroundClick from "./examples/backgroundClick"; -import TableCode from "@/common/TableCode"; +import Code, { TableCode } from "@/common/Code"; import StatusBadge from "@/common/StatusBadge"; const sections = [ @@ -26,7 +25,7 @@ const sections = [ - + children diff --git a/apps/website/screens/components/dialog/code/examples/backgroundClick.ts b/apps/website/screens/components/dialog/code/examples/backgroundClick.ts index c3cc1e3e18..0004ef5865 100644 --- a/apps/website/screens/components/dialog/code/examples/backgroundClick.ts +++ b/apps/website/screens/components/dialog/code/examples/backgroundClick.ts @@ -8,11 +8,11 @@ const code = `() => { }; return ( - + {isDialogVisible && ( - + Please enter your personal information. diff --git a/apps/website/screens/components/dialog/code/examples/basicUsage.ts b/apps/website/screens/components/dialog/code/examples/basicUsage.ts index 60ea21c3bc..b1a4056c9a 100644 --- a/apps/website/screens/components/dialog/code/examples/basicUsage.ts +++ b/apps/website/screens/components/dialog/code/examples/basicUsage.ts @@ -8,11 +8,11 @@ const code = `() => { }; return ( - + {isDialogVisible && ( - + Please enter your personal information. diff --git a/apps/website/screens/components/dialog/code/examples/withContent.ts b/apps/website/screens/components/dialog/code/examples/withContent.ts index 912ee676fa..b4e34f37b5 100644 --- a/apps/website/screens/components/dialog/code/examples/withContent.ts +++ b/apps/website/screens/components/dialog/code/examples/withContent.ts @@ -15,12 +15,12 @@ const code = `() => { setDialogVisible(!isDialogVisible); }; return ( - + {isDialogVisible && ( - - + + @@ -29,7 +29,7 @@ const code = `() => { - + diff --git a/apps/website/screens/components/divider/DividerPageLayout.tsx b/apps/website/screens/components/divider/DividerPageLayout.tsx index e1138eee11..1554a94f24 100644 --- a/apps/website/screens/components/divider/DividerPageLayout.tsx +++ b/apps/website/screens/components/divider/DividerPageLayout.tsx @@ -11,9 +11,9 @@ const DividerPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + A divider is a thin line that visually separates groups of content within a specific area of an application. diff --git a/apps/website/screens/components/divider/code/DividerCodePage.tsx b/apps/website/screens/components/divider/code/DividerCodePage.tsx index 389f4860d9..ccd817c51c 100644 --- a/apps/website/screens/components/divider/code/DividerCodePage.tsx +++ b/apps/website/screens/components/divider/code/DividerCodePage.tsx @@ -2,7 +2,7 @@ import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import DocFooter from "@/common/DocFooter"; -import TableCode from "@/common/TableCode"; +import { TableCode } from "@/common/Code"; import Example from "@/common/example/Example"; import basicUsage from "./examples/basicUsage"; import vertical from "./examples/vertical"; @@ -83,15 +83,13 @@ const sections = [ }, ]; -const DividerCodePage = () => { - return ( - - - - - - - ); -}; +const DividerCodePage = () => ( + + + + + + +); export default DividerCodePage; diff --git a/apps/website/screens/components/divider/code/examples/basicUsage.ts b/apps/website/screens/components/divider/code/examples/basicUsage.ts index f7a84e0c61..637158188a 100644 --- a/apps/website/screens/components/divider/code/examples/basicUsage.ts +++ b/apps/website/screens/components/divider/code/examples/basicUsage.ts @@ -1,8 +1,8 @@ import { DxcDivider, DxcFlex, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react"; const code = `() => { return ( - - + + Lorem i psum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. diff --git a/apps/website/screens/components/divider/code/examples/vertical.ts b/apps/website/screens/components/divider/code/examples/vertical.ts index 01b9b806c2..db1272bbd1 100644 --- a/apps/website/screens/components/divider/code/examples/vertical.ts +++ b/apps/website/screens/components/divider/code/examples/vertical.ts @@ -1,8 +1,8 @@ import { DxcDivider, DxcFlex, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react"; const code = `() => { return ( - - + + Lorem i psum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. diff --git a/apps/website/screens/components/divider/overview/DividerOverviewPage.tsx b/apps/website/screens/components/divider/overview/DividerOverviewPage.tsx index ca79e3f921..69e07c69be 100644 --- a/apps/website/screens/components/divider/overview/DividerOverviewPage.tsx +++ b/apps/website/screens/components/divider/overview/DividerOverviewPage.tsx @@ -108,15 +108,13 @@ const sections = [ }, ]; -const DividerOverviewPage = () => { - return ( - - - - - - - ); -}; +const DividerOverviewPage = () => ( + + + + + + +); export default DividerOverviewPage; diff --git a/apps/website/screens/components/dropdown/DropdownPageLayout.tsx b/apps/website/screens/components/dropdown/DropdownPageLayout.tsx index 1fb0d5236c..c0e7b326b2 100644 --- a/apps/website/screens/components/dropdown/DropdownPageLayout.tsx +++ b/apps/website/screens/components/dropdown/DropdownPageLayout.tsx @@ -11,9 +11,9 @@ const DropdownPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + The dropdown component is a compact, interactive element that allows users to select from a list of options, diff --git a/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx b/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx index 2ce387ea7e..0908499f75 100644 --- a/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx +++ b/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx @@ -2,11 +2,10 @@ import { DxcFlex, DxcLink, DxcTable } from "@dxc-technology/halstack-react"; import DocFooter from "@/common/DocFooter"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import Code from "@/common/Code"; import Example from "@/common/example/Example"; import basicUsage from "./examples/basicUsage"; import icons from "./examples/icons"; -import TableCode from "@/common/TableCode"; +import Code, { TableCode } from "@/common/Code"; import StatusBadge from "@/common/StatusBadge"; const sections = [ @@ -102,7 +101,7 @@ const sections = [ - + onSelectOption @@ -118,7 +117,7 @@ const sections = [ - + options diff --git a/apps/website/screens/components/dropdown/code/examples/basicUsage.ts b/apps/website/screens/components/dropdown/code/examples/basicUsage.ts index dea47116e4..f774cda510 100644 --- a/apps/website/screens/components/dropdown/code/examples/basicUsage.ts +++ b/apps/website/screens/components/dropdown/code/examples/basicUsage.ts @@ -20,7 +20,7 @@ const code = `() => { ]; return ( - + { ]; return ( - + { ]; return ( - + { ]; return ( - + - + File inputs are used to allow users to upload one or more files from their local device to an application in diff --git a/apps/website/screens/components/file-input/code/FileInputCodePage.tsx b/apps/website/screens/components/file-input/code/FileInputCodePage.tsx index 17791fb21f..0be192ba0d 100644 --- a/apps/website/screens/components/file-input/code/FileInputCodePage.tsx +++ b/apps/website/screens/components/file-input/code/FileInputCodePage.tsx @@ -1,14 +1,13 @@ import { DxcFlex, DxcTable, DxcLink } from "@dxc-technology/halstack-react"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import QuickNavContainer from "@/common/QuickNavContainer"; -import Code from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; import basicUsage from "./examples/basicUsage"; import errorHandling from "./examples/errorHandling"; import formFileInput from "./examples/formFileInput"; import StatusBadge from "@/common/StatusBadge"; -import TableCode from "@/common/TableCode"; +import Code, { TableCode } from "@/common/Code"; const sections = [ { @@ -102,7 +101,7 @@ const sections = [ - + value @@ -166,7 +165,7 @@ const sections = [ - + callbackFile diff --git a/apps/website/screens/components/file-input/code/examples/basicUsage.ts b/apps/website/screens/components/file-input/code/examples/basicUsage.ts index 10aa249a4b..ed70433e29 100644 --- a/apps/website/screens/components/file-input/code/examples/basicUsage.ts +++ b/apps/website/screens/components/file-input/code/examples/basicUsage.ts @@ -13,8 +13,8 @@ const code = `() => { }; return ( - - + + { }; return ( - + { return (
- - + + { return ( - - + + diff --git a/apps/website/screens/components/flex/FlexPageLayout.tsx b/apps/website/screens/components/flex/FlexPageLayout.tsx index 115d1feb3b..2244251774 100644 --- a/apps/website/screens/components/flex/FlexPageLayout.tsx +++ b/apps/website/screens/components/flex/FlexPageLayout.tsx @@ -11,9 +11,9 @@ const FlexPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + The flex component allows building flexible box module based layouts. It serves as a technical component diff --git a/apps/website/screens/components/flex/code/FlexCodePage.tsx b/apps/website/screens/components/flex/code/FlexCodePage.tsx index 88bf1a8e9b..268bd22ed5 100644 --- a/apps/website/screens/components/flex/code/FlexCodePage.tsx +++ b/apps/website/screens/components/flex/code/FlexCodePage.tsx @@ -1,12 +1,11 @@ import { DxcFlex, DxcTable, DxcLink } from "@dxc-technology/halstack-react"; -import Code from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import Example from "@/common/example/Example"; import directionAlignment from "./examples/directionAlignment"; import gapOrderGrow from "./examples/gapOrderGrow"; -import TableCode, { ExtendedTableCode } from "@/common/TableCode"; +import Code, { ExtendedTableCode, TableCode } from "@/common/Code"; import StatusBadge from "@/common/StatusBadge"; const gapTypeString = `{ @@ -110,7 +109,7 @@ const sections = [ - + children diff --git a/apps/website/screens/components/flex/code/examples/directionAlignment.ts b/apps/website/screens/components/flex/code/examples/directionAlignment.ts index c81fef8f0c..901886d25e 100644 --- a/apps/website/screens/components/flex/code/examples/directionAlignment.ts +++ b/apps/website/screens/components/flex/code/examples/directionAlignment.ts @@ -3,8 +3,8 @@ import Placeholder from "@/common/Placeholder"; const code = `() => { return ( - - + + diff --git a/apps/website/screens/components/flex/code/examples/gapOrderGrow.ts b/apps/website/screens/components/flex/code/examples/gapOrderGrow.ts index 9ff679dcca..7e696291f7 100644 --- a/apps/website/screens/components/flex/code/examples/gapOrderGrow.ts +++ b/apps/website/screens/components/flex/code/examples/gapOrderGrow.ts @@ -3,8 +3,8 @@ import Placeholder from "@/common/Placeholder"; const code = `() => { return ( - - + + 3 diff --git a/apps/website/screens/components/footer/FooterPageLayout.tsx b/apps/website/screens/components/footer/FooterPageLayout.tsx index dc32eaa4ad..679752bca5 100644 --- a/apps/website/screens/components/footer/FooterPageLayout.tsx +++ b/apps/website/screens/components/footer/FooterPageLayout.tsx @@ -13,9 +13,9 @@ const FooterPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + Footers are a secondary element in a web page because they usually appear at the bottom and it is the last diff --git a/apps/website/screens/components/footer/code/FooterCodePage.tsx b/apps/website/screens/components/footer/code/FooterCodePage.tsx index f7b8f23aaf..155e0b8937 100644 --- a/apps/website/screens/components/footer/code/FooterCodePage.tsx +++ b/apps/website/screens/components/footer/code/FooterCodePage.tsx @@ -2,9 +2,8 @@ import { DxcFlex, DxcTable, DxcLink } from "@dxc-technology/halstack-react"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import DocFooter from "@/common/DocFooter"; -import Code from "@/common/Code"; import StatusBadge from "@/common/StatusBadge"; -import TableCode from "@/common/TableCode"; +import Code, { TableCode } from "@/common/Code"; const sections = [ { @@ -22,7 +21,7 @@ const sections = [ - + mode diff --git a/apps/website/screens/components/footer/usage/FooterUsagePage.tsx b/apps/website/screens/components/footer/usage/FooterUsagePage.tsx index 74682d2d96..7489d0b0aa 100644 --- a/apps/website/screens/components/footer/usage/FooterUsagePage.tsx +++ b/apps/website/screens/components/footer/usage/FooterUsagePage.tsx @@ -37,13 +37,13 @@ const sections = [ contemplated in the following list: - + Plain text or content Informational purpose text - + Menu links Global navigation @@ -51,7 +51,7 @@ const sections = [ Useful links or resources - + Forms Select language @@ -59,7 +59,7 @@ const sections = [ Provide email adress / Subscribe - + Actions Ask for help / Support diff --git a/apps/website/screens/components/grid/GridPageLayout.tsx b/apps/website/screens/components/grid/GridPageLayout.tsx index 3733d96a3c..eeed779433 100644 --- a/apps/website/screens/components/grid/GridPageLayout.tsx +++ b/apps/website/screens/components/grid/GridPageLayout.tsx @@ -11,9 +11,9 @@ const GridPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + The grid component allows building applications based on the CSS grid layout module. It is a technical diff --git a/apps/website/screens/components/grid/code/GridCodePage.tsx b/apps/website/screens/components/grid/code/GridCodePage.tsx index 6a013cbd07..c7d10e242e 100644 --- a/apps/website/screens/components/grid/code/GridCodePage.tsx +++ b/apps/website/screens/components/grid/code/GridCodePage.tsx @@ -1,12 +1,11 @@ import { DxcFlex, DxcLink, DxcParagraph, DxcTable } from "@dxc-technology/halstack-react"; -import Code from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import Example from "@/common/example/Example"; import basic from "./examples/basic"; import layout from "./examples/layout"; -import TableCode, { ExtendedTableCode } from "@/common/TableCode"; +import Code, { ExtendedTableCode, TableCode } from "@/common/Code"; import StatusBadge from "@/common/StatusBadge"; const gapTypeString = `{ @@ -88,7 +87,7 @@ const sections = [ - + children @@ -280,7 +279,7 @@ const sections = [ - + children diff --git a/apps/website/screens/components/grid/code/examples/basic.tsx b/apps/website/screens/components/grid/code/examples/basic.tsx index e7acc87938..78ff3e0bd5 100644 --- a/apps/website/screens/components/grid/code/examples/basic.tsx +++ b/apps/website/screens/components/grid/code/examples/basic.tsx @@ -3,7 +3,7 @@ import Placeholder from "@/common/Placeholder"; const code = `() => { return ( - + diff --git a/apps/website/screens/components/grid/code/examples/layout.tsx b/apps/website/screens/components/grid/code/examples/layout.tsx index aaa2961e6a..3c1db3ed8e 100644 --- a/apps/website/screens/components/grid/code/examples/layout.tsx +++ b/apps/website/screens/components/grid/code/examples/layout.tsx @@ -3,7 +3,7 @@ import Placeholder from "@/common/Placeholder"; const code = `() => { return ( - + { ]; return ( - + - + The header is an important component in the interface, it is the area dedicated for the navigation across diff --git a/apps/website/screens/components/header/code/HeaderCodePage.tsx b/apps/website/screens/components/header/code/HeaderCodePage.tsx index 246e592048..71042044b7 100644 --- a/apps/website/screens/components/header/code/HeaderCodePage.tsx +++ b/apps/website/screens/components/header/code/HeaderCodePage.tsx @@ -3,8 +3,7 @@ import DocFooter from "@/common/DocFooter"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import Link from "next/link"; -import TableCode from "@/common/TableCode"; -import Code from "@/common/Code"; +import Code, { TableCode } from "@/common/Code"; const sections = [ { diff --git a/apps/website/screens/components/heading/HeadingPageLayout.tsx b/apps/website/screens/components/heading/HeadingPageLayout.tsx index 494aa0085c..6a637f61b1 100644 --- a/apps/website/screens/components/heading/HeadingPageLayout.tsx +++ b/apps/website/screens/components/heading/HeadingPageLayout.tsx @@ -11,9 +11,9 @@ const HeadingPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + A component used to establish clear content hierarchy and structure, ensuring both visual and semantic diff --git a/apps/website/screens/components/heading/code/HeadingCodePage.tsx b/apps/website/screens/components/heading/code/HeadingCodePage.tsx index c11f8e06e1..1b4072c622 100644 --- a/apps/website/screens/components/heading/code/HeadingCodePage.tsx +++ b/apps/website/screens/components/heading/code/HeadingCodePage.tsx @@ -4,9 +4,8 @@ import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; import basicUsage from "./examples/basicUsage"; -import TableCode from "@/common/TableCode"; +import Code, { TableCode } from "@/common/Code"; import StatusBadge from "@/common/StatusBadge"; -import Code from "@/common/Code"; const sections = [ { @@ -61,7 +60,7 @@ const sections = [ - + text diff --git a/apps/website/screens/components/heading/code/examples/basicUsage.ts b/apps/website/screens/components/heading/code/examples/basicUsage.ts index 00560d848c..fa3b8be97e 100644 --- a/apps/website/screens/components/heading/code/examples/basicUsage.ts +++ b/apps/website/screens/components/heading/code/examples/basicUsage.ts @@ -2,7 +2,7 @@ import { DxcHeading, DxcFlex, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - + diff --git a/apps/website/screens/components/image/ImagePageLayout.tsx b/apps/website/screens/components/image/ImagePageLayout.tsx index 3de90020ef..22f8aeb690 100644 --- a/apps/website/screens/components/image/ImagePageLayout.tsx +++ b/apps/website/screens/components/image/ImagePageLayout.tsx @@ -11,9 +11,9 @@ const ImagePageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + The image component is used to embed images in Halstack-based user interfaces. diff --git a/apps/website/screens/components/image/code/ImageCodePage.tsx b/apps/website/screens/components/image/code/ImageCodePage.tsx index 1b00474b3e..8586b4be3d 100644 --- a/apps/website/screens/components/image/code/ImageCodePage.tsx +++ b/apps/website/screens/components/image/code/ImageCodePage.tsx @@ -1,12 +1,11 @@ import { DxcFlex, DxcTable, DxcLink } from "@dxc-technology/halstack-react"; -import Code from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import Example from "@/common/example/Example"; import basic from "./examples/basicUsage"; import StatusBadge from "@/common/StatusBadge"; -import TableCode from "@/common/TableCode"; +import Code, { TableCode } from "@/common/Code"; const sections = [ { @@ -21,7 +20,7 @@ const sections = [ - + alt @@ -139,7 +138,7 @@ const sections = [ - + src diff --git a/apps/website/screens/components/image/code/examples/basicUsage.ts b/apps/website/screens/components/image/code/examples/basicUsage.ts index 7b31f43eb0..b4b7a2fe69 100644 --- a/apps/website/screens/components/image/code/examples/basicUsage.ts +++ b/apps/website/screens/components/image/code/examples/basicUsage.ts @@ -2,7 +2,7 @@ import { DxcImage, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - + { ]; return ( - + - + Inset layout applies positive spacing scale to its child nodes. diff --git a/apps/website/screens/components/inset/code/InsetCodePage.tsx b/apps/website/screens/components/inset/code/InsetCodePage.tsx index c9ec682699..8be6b613ce 100644 --- a/apps/website/screens/components/inset/code/InsetCodePage.tsx +++ b/apps/website/screens/components/inset/code/InsetCodePage.tsx @@ -5,7 +5,7 @@ import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import Example from "@/common/example/Example"; import basicUsage from "./examples/basicUsage"; import customSides from "./examples/customSides"; -import TableCode from "@/common/TableCode"; +import { TableCode } from "@/common/Code"; import StatusBadge from "@/common/StatusBadge"; const sections = [ @@ -32,7 +32,7 @@ const sections = [ - + children diff --git a/apps/website/screens/components/link/LinkPageLayout.tsx b/apps/website/screens/components/link/LinkPageLayout.tsx index d2d2573222..d3177300ee 100644 --- a/apps/website/screens/components/link/LinkPageLayout.tsx +++ b/apps/website/screens/components/link/LinkPageLayout.tsx @@ -11,9 +11,9 @@ const LinkPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + Links serve as navigational elements, allowing users to move between pages or access related content. They diff --git a/apps/website/screens/components/link/code/LinkCodePage.tsx b/apps/website/screens/components/link/code/LinkCodePage.tsx index 5d4de67884..526270d6e3 100644 --- a/apps/website/screens/components/link/code/LinkCodePage.tsx +++ b/apps/website/screens/components/link/code/LinkCodePage.tsx @@ -2,14 +2,13 @@ import { DxcTable, DxcParagraph, DxcFlex, DxcLink } from "@dxc-technology/halsta import DocFooter from "@/common/DocFooter"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import Code from "@/common/Code"; import Example from "@/common/example/Example"; import nextLink from "./examples/nextLink"; import basicUsage from "./examples/basicUsage"; import routerLink from "./examples/routerLink"; import routerLink6 from "./examples/routerLink6"; import icons from "./examples/icons"; -import TableCode from "@/common/TableCode"; +import Code, { TableCode } from "@/common/Code"; import StatusBadge from "@/common/StatusBadge"; const sections = [ @@ -28,7 +27,7 @@ const sections = [ - + children diff --git a/apps/website/screens/components/link/code/examples/basicUsage.ts b/apps/website/screens/components/link/code/examples/basicUsage.ts index c2af158ea6..459c87c30e 100644 --- a/apps/website/screens/components/link/code/examples/basicUsage.ts +++ b/apps/website/screens/components/link/code/examples/basicUsage.ts @@ -2,7 +2,7 @@ import { DxcLink, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - + This is a text with a Link to another page. ); diff --git a/apps/website/screens/components/link/code/examples/icons.ts b/apps/website/screens/components/link/code/examples/icons.ts index db9540937c..de2b256842 100644 --- a/apps/website/screens/components/link/code/examples/icons.ts +++ b/apps/website/screens/components/link/code/examples/icons.ts @@ -15,8 +15,8 @@ const code = `() => { ); return ( - - + + This is a text with a Link with icon. diff --git a/apps/website/screens/components/link/code/examples/nextLink.ts b/apps/website/screens/components/link/code/examples/nextLink.ts index 24bf29fc86..24c0a2c56b 100644 --- a/apps/website/screens/components/link/code/examples/nextLink.ts +++ b/apps/website/screens/components/link/code/examples/nextLink.ts @@ -13,7 +13,7 @@ const code = `() => { } ); return ( - + This is a text with a next diff --git a/apps/website/screens/components/link/code/examples/routerLink.tsx b/apps/website/screens/components/link/code/examples/routerLink.tsx index d10c01b037..c44b97bd5e 100644 --- a/apps/website/screens/components/link/code/examples/routerLink.tsx +++ b/apps/website/screens/components/link/code/examples/routerLink.tsx @@ -13,7 +13,7 @@ const RouterLink = ({ to, component, children }: routerProps) => { const code = `() => { return ( - + This is a text with a React Router v5 {" "}link. diff --git a/apps/website/screens/components/link/code/examples/routerLink6.tsx b/apps/website/screens/components/link/code/examples/routerLink6.tsx index e0949ff9bc..e2f7cbd2bb 100644 --- a/apps/website/screens/components/link/code/examples/routerLink6.tsx +++ b/apps/website/screens/components/link/code/examples/routerLink6.tsx @@ -38,7 +38,7 @@ const code = `() => { } ); return ( - + This is a text with a React Router v6 diff --git a/apps/website/screens/components/nav-tabs/NavTabsPageLayout.tsx b/apps/website/screens/components/nav-tabs/NavTabsPageLayout.tsx index 6cd8ccf9e3..109610603b 100644 --- a/apps/website/screens/components/nav-tabs/NavTabsPageLayout.tsx +++ b/apps/website/screens/components/nav-tabs/NavTabsPageLayout.tsx @@ -11,9 +11,9 @@ const NumberInputPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + Nav tabs lets users switch between different views or sections within the same page, organizing related diff --git a/apps/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx b/apps/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx index f91c870af7..ad74af0174 100644 --- a/apps/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx +++ b/apps/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx @@ -1,5 +1,4 @@ import { DxcParagraph, DxcFlex, DxcTable, DxcLink } from "@dxc-technology/halstack-react"; -import Code from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; @@ -9,7 +8,7 @@ import routerLink from "./examples/routerLink"; import routerLinkV6 from "./examples/routerLinkV6"; import nextLink from "./examples/nextLink"; import icons from "./examples/icons"; -import TableCode from "@/common/TableCode"; +import Code, { TableCode } from "@/common/Code"; import StatusBadge from "@/common/StatusBadge"; const sections = [ @@ -28,7 +27,7 @@ const sections = [ - + children @@ -96,7 +95,7 @@ const sections = [ - + children diff --git a/apps/website/screens/components/nav-tabs/code/examples/basicUsage.ts b/apps/website/screens/components/nav-tabs/code/examples/basicUsage.ts index 6c4559597b..1ec569efa3 100644 --- a/apps/website/screens/components/nav-tabs/code/examples/basicUsage.ts +++ b/apps/website/screens/components/nav-tabs/code/examples/basicUsage.ts @@ -2,7 +2,7 @@ import { DxcNavTabs, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - + Tab 1 diff --git a/apps/website/screens/components/nav-tabs/code/examples/icons.ts b/apps/website/screens/components/nav-tabs/code/examples/icons.ts index fc27fa8e89..f93e593807 100644 --- a/apps/website/screens/components/nav-tabs/code/examples/icons.ts +++ b/apps/website/screens/components/nav-tabs/code/examples/icons.ts @@ -2,7 +2,7 @@ import { DxcNavTabs, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - + Tab 1 diff --git a/apps/website/screens/components/nav-tabs/code/examples/nextLink.ts b/apps/website/screens/components/nav-tabs/code/examples/nextLink.ts index c14749fc86..f5cde075f1 100644 --- a/apps/website/screens/components/nav-tabs/code/examples/nextLink.ts +++ b/apps/website/screens/components/nav-tabs/code/examples/nextLink.ts @@ -12,7 +12,7 @@ const code = `() => { }); return ( - + Tab 1 diff --git a/apps/website/screens/components/nav-tabs/code/examples/routerLink.tsx b/apps/website/screens/components/nav-tabs/code/examples/routerLink.tsx index b175c14d8a..f3ab85fae2 100644 --- a/apps/website/screens/components/nav-tabs/code/examples/routerLink.tsx +++ b/apps/website/screens/components/nav-tabs/code/examples/routerLink.tsx @@ -16,7 +16,7 @@ const RouterLink = ({ to, component, children, ...other }: routerProps) => { const code = `() => { return ( - + { ); return ( - + Tab 1 diff --git a/apps/website/screens/components/number-input/NumberInputPageLayout.tsx b/apps/website/screens/components/number-input/NumberInputPageLayout.tsx index 4fcf8bc14a..d5de277fbd 100644 --- a/apps/website/screens/components/number-input/NumberInputPageLayout.tsx +++ b/apps/website/screens/components/number-input/NumberInputPageLayout.tsx @@ -11,9 +11,9 @@ const NumberInputPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + Number inputs are fields specifically used to capture numeric user input in a structured and accessible diff --git a/apps/website/screens/components/number-input/code/NumberInputCodePage.tsx b/apps/website/screens/components/number-input/code/NumberInputCodePage.tsx index e70c4a4331..61f36909a0 100644 --- a/apps/website/screens/components/number-input/code/NumberInputCodePage.tsx +++ b/apps/website/screens/components/number-input/code/NumberInputCodePage.tsx @@ -1,13 +1,12 @@ import { DxcFlex, DxcLink, DxcTable } from "@dxc-technology/halstack-react"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import QuickNavContainer from "@/common/QuickNavContainer"; -import Code from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; import controlled from "./examples/controlled"; import uncontrolled from "./examples/uncontrolled"; import errorUsage from "./examples/errorHandling"; -import TableCode from "@/common/TableCode"; +import Code, { TableCode } from "@/common/Code"; import StatusBadge from "@/common/StatusBadge"; const sections = [ @@ -222,7 +221,7 @@ const sections = [ - + showControls diff --git a/apps/website/screens/components/number-input/code/examples/controlled.ts b/apps/website/screens/components/number-input/code/examples/controlled.ts index 25af369279..4be172c271 100644 --- a/apps/website/screens/components/number-input/code/examples/controlled.ts +++ b/apps/website/screens/components/number-input/code/examples/controlled.ts @@ -11,7 +11,7 @@ const code = `() => { }; return ( - + { }; return ( - + { }; return ( - - + + { ]; return ( - + - + The paginator component allows dividing large amounts of content into multiple pages. diff --git a/apps/website/screens/components/paginator/code/PaginatorCodePage.tsx b/apps/website/screens/components/paginator/code/PaginatorCodePage.tsx index 3f538f9ba8..5c7917e53d 100644 --- a/apps/website/screens/components/paginator/code/PaginatorCodePage.tsx +++ b/apps/website/screens/components/paginator/code/PaginatorCodePage.tsx @@ -1,11 +1,10 @@ -import Code from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import { DxcFlex, DxcTable, DxcParagraph } from "@dxc-technology/halstack-react"; import itemsPerPage from "./examples/itemsPerPage"; -import TableCode from "@/common/TableCode"; +import Code, { TableCode } from "@/common/Code"; const sections = [ { diff --git a/apps/website/screens/components/paginator/code/examples/itemsPerPage.ts b/apps/website/screens/components/paginator/code/examples/itemsPerPage.ts index ce221d98e3..835a46cd02 100644 --- a/apps/website/screens/components/paginator/code/examples/itemsPerPage.ts +++ b/apps/website/screens/components/paginator/code/examples/itemsPerPage.ts @@ -9,7 +9,7 @@ const code = `() => { }; return ( - + { return ( - - + > + diff --git a/apps/website/screens/components/paginator/overview/examples/scrollable.ts b/apps/website/screens/components/paginator/overview/examples/scrollable.ts index c0246246b7..08adb37bfc 100644 --- a/apps/website/screens/components/paginator/overview/examples/scrollable.ts +++ b/apps/website/screens/components/paginator/overview/examples/scrollable.ts @@ -116,7 +116,7 @@ const code = `() => { ]; return ( - + > diff --git a/apps/website/screens/components/paragraph/ParagraphPageLayout.tsx b/apps/website/screens/components/paragraph/ParagraphPageLayout.tsx index 65063328ca..f5bd835266 100644 --- a/apps/website/screens/components/paragraph/ParagraphPageLayout.tsx +++ b/apps/website/screens/components/paragraph/ParagraphPageLayout.tsx @@ -12,9 +12,9 @@ const ParagraphPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + Paragraph is a block of text. diff --git a/apps/website/screens/components/paragraph/code/ParagraphCodePage.tsx b/apps/website/screens/components/paragraph/code/ParagraphCodePage.tsx index 248687be1a..c1b78bbaf7 100644 --- a/apps/website/screens/components/paragraph/code/ParagraphCodePage.tsx +++ b/apps/website/screens/components/paragraph/code/ParagraphCodePage.tsx @@ -5,7 +5,7 @@ import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react"; import basicUsage from "./examples/basicUsage"; import multipleParagraphs from "./examples/multipleParagraphs"; -import TableCode from "@/common/TableCode"; +import { TableCode } from "@/common/Code"; import StatusBadge from "@/common/StatusBadge"; const sections = [ @@ -21,7 +21,7 @@ const sections = [ - + children diff --git a/apps/website/screens/components/paragraph/code/examples/basicUsage.tsx b/apps/website/screens/components/paragraph/code/examples/basicUsage.tsx index 44980720af..ec6e74920d 100644 --- a/apps/website/screens/components/paragraph/code/examples/basicUsage.tsx +++ b/apps/website/screens/components/paragraph/code/examples/basicUsage.tsx @@ -2,7 +2,7 @@ import { DxcParagraph, DxcInset, DxcTypography } from "@dxc-technology/halstack- const code = `() => { return ( - + Lorem ipsum dolor sit amet,{" "} diff --git a/apps/website/screens/components/paragraph/code/examples/multipleParagraphs.tsx b/apps/website/screens/components/paragraph/code/examples/multipleParagraphs.tsx index 897ee7b293..084d759856 100644 --- a/apps/website/screens/components/paragraph/code/examples/multipleParagraphs.tsx +++ b/apps/website/screens/components/paragraph/code/examples/multipleParagraphs.tsx @@ -2,8 +2,8 @@ import { DxcParagraph, DxcInset, DxcTypography, DxcFlex } from "@dxc-technology/ const code = `() => { return ( - - + + Lorem ipsum dolor sit amet,{" "} diff --git a/apps/website/screens/components/password-input/PasswordInputPageLayout.tsx b/apps/website/screens/components/password-input/PasswordInputPageLayout.tsx index 6a8771e165..881267ceb2 100644 --- a/apps/website/screens/components/password-input/PasswordInputPageLayout.tsx +++ b/apps/website/screens/components/password-input/PasswordInputPageLayout.tsx @@ -11,9 +11,9 @@ const PasswordInputPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + Password inputs provide a way for users to securely enter a password. Its value is obscured by default by diff --git a/apps/website/screens/components/password-input/code/PasswordInputCodePage.tsx b/apps/website/screens/components/password-input/code/PasswordInputCodePage.tsx index cc0087fe4e..facbea2442 100644 --- a/apps/website/screens/components/password-input/code/PasswordInputCodePage.tsx +++ b/apps/website/screens/components/password-input/code/PasswordInputCodePage.tsx @@ -1,4 +1,3 @@ -import Code from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; import QuickNavContainer from "@/common/QuickNavContainer"; @@ -7,7 +6,7 @@ import { DxcFlex, DxcLink, DxcTable } from "@dxc-technology/halstack-react"; import controlled from "./examples/controlled"; import errorHandling from "./examples/errorHandling"; import uncontrolled from "./examples/uncontrolled"; -import TableCode from "@/common/TableCode"; +import Code, { TableCode } from "@/common/Code"; const sections = [ { diff --git a/apps/website/screens/components/password-input/code/examples/controlled.ts b/apps/website/screens/components/password-input/code/examples/controlled.ts index 8d96da4cc6..879d4c70f8 100644 --- a/apps/website/screens/components/password-input/code/examples/controlled.ts +++ b/apps/website/screens/components/password-input/code/examples/controlled.ts @@ -12,7 +12,7 @@ const code = `() => { }; return ( - + { }; return ( - + { }; return ( - + - + diff --git a/apps/website/screens/components/progress-bar/ProgressBarPageLayout.tsx b/apps/website/screens/components/progress-bar/ProgressBarPageLayout.tsx index 82aacea0db..b1f4285a2e 100644 --- a/apps/website/screens/components/progress-bar/ProgressBarPageLayout.tsx +++ b/apps/website/screens/components/progress-bar/ProgressBarPageLayout.tsx @@ -11,9 +11,9 @@ const ProgressBarPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + A progress bar visually indicates the completion status of a task or process. diff --git a/apps/website/screens/components/progress-bar/code/ProgressBarCodePage.tsx b/apps/website/screens/components/progress-bar/code/ProgressBarCodePage.tsx index a674f70551..ee9b8201b2 100644 --- a/apps/website/screens/components/progress-bar/code/ProgressBarCodePage.tsx +++ b/apps/website/screens/components/progress-bar/code/ProgressBarCodePage.tsx @@ -1,12 +1,11 @@ import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react"; -import Code from "@/common/Code"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import QuickNavContainer from "@/common/QuickNavContainer"; import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; import basic from "./examples/basicUsage"; import overlay from "./examples/overlay"; -import TableCode from "@/common/TableCode"; +import Code, { TableCode } from "@/common/Code"; const sections = [ { diff --git a/apps/website/screens/components/progress-bar/code/examples/basicUsage.ts b/apps/website/screens/components/progress-bar/code/examples/basicUsage.ts index 42284bf65b..78fe32e7a2 100644 --- a/apps/website/screens/components/progress-bar/code/examples/basicUsage.ts +++ b/apps/website/screens/components/progress-bar/code/examples/basicUsage.ts @@ -1,7 +1,7 @@ import { DxcProgressBar, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => ( - + );`; diff --git a/apps/website/screens/components/progress-bar/code/examples/overlay.ts b/apps/website/screens/components/progress-bar/code/examples/overlay.ts index 0cdd0be6f2..cc7d8dced3 100644 --- a/apps/website/screens/components/progress-bar/code/examples/overlay.ts +++ b/apps/website/screens/components/progress-bar/code/examples/overlay.ts @@ -19,8 +19,8 @@ const code = `() => { }; return ( - - + + { return ( - - + + { ]; return ( - + - + The quick nav component allows navigation inside a page. It renders links according to the headings of the diff --git a/apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx b/apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx index ad2098f245..17cecec7a4 100644 --- a/apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx +++ b/apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx @@ -5,7 +5,7 @@ import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; import quickNav from "./examples/quickNav"; import withContent from "./examples/withContent"; -import TableCode from "@/common/TableCode"; +import { TableCode } from "@/common/Code"; import StatusBadge from "@/common/StatusBadge"; const sections = [ @@ -24,7 +24,7 @@ const sections = [ - + links diff --git a/apps/website/screens/components/quick-nav/code/examples/quickNav.ts b/apps/website/screens/components/quick-nav/code/examples/quickNav.ts index 253ab99295..648a8dabcb 100644 --- a/apps/website/screens/components/quick-nav/code/examples/quickNav.ts +++ b/apps/website/screens/components/quick-nav/code/examples/quickNav.ts @@ -21,7 +21,7 @@ const code = `() => { ]; return ( - + ); diff --git a/apps/website/screens/components/quick-nav/code/examples/withContent.ts b/apps/website/screens/components/quick-nav/code/examples/withContent.ts index 5ab83c25a0..0756edbaf3 100644 --- a/apps/website/screens/components/quick-nav/code/examples/withContent.ts +++ b/apps/website/screens/components/quick-nav/code/examples/withContent.ts @@ -13,14 +13,14 @@ const code = `() => { ]; return ( - + - +
- +
- + Accordions are used to group similar content and hide or @@ -31,7 +31,7 @@ const code = `() => {
- + The accordion component delivers large amounts of content in @@ -42,10 +42,10 @@ const code = `() => {
- +
- + Alert messages are meant to provide contextual feedback @@ -56,7 +56,7 @@ const code = `() => {
- + diff --git a/apps/website/screens/components/radio-group/RadioGroupPageLayout.tsx b/apps/website/screens/components/radio-group/RadioGroupPageLayout.tsx index 046ef4d367..a6f974d9d6 100644 --- a/apps/website/screens/components/radio-group/RadioGroupPageLayout.tsx +++ b/apps/website/screens/components/radio-group/RadioGroupPageLayout.tsx @@ -11,9 +11,9 @@ const RadioGroupPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + A radio group allows users to select one option from a set of related, mutually exclusive choices. diff --git a/apps/website/screens/components/radio-group/code/RadioGroupCodePage.tsx b/apps/website/screens/components/radio-group/code/RadioGroupCodePage.tsx index b16048b3c0..4df1a52f71 100644 --- a/apps/website/screens/components/radio-group/code/RadioGroupCodePage.tsx +++ b/apps/website/screens/components/radio-group/code/RadioGroupCodePage.tsx @@ -1,13 +1,12 @@ import { DxcFlex, DxcTable, DxcParagraph } from "@dxc-technology/halstack-react"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import QuickNavContainer from "@/common/QuickNavContainer"; -import Code from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; import controlled from "./examples/controlled"; import uncontrolled from "./examples/uncontrolled"; import errorHandling from "./examples/errorHandling"; -import TableCode from "@/common/TableCode"; +import Code, { TableCode } from "@/common/Code"; import StatusBadge from "@/common/StatusBadge"; const sections = [ @@ -140,7 +139,7 @@ const sections = [ - + options diff --git a/apps/website/screens/components/radio-group/code/examples/controlled.ts b/apps/website/screens/components/radio-group/code/examples/controlled.ts index 8bf2bc9059..98456ee3ca 100644 --- a/apps/website/screens/components/radio-group/code/examples/controlled.ts +++ b/apps/website/screens/components/radio-group/code/examples/controlled.ts @@ -18,7 +18,7 @@ const code = `() => { ]; return ( - + { ]; return ( - + { ]; return ( - - + + { ]; return ( - + { ]; return ( - + - + Data table is a component with a high rate of usage within the applications. It allows to show the user a diff --git a/apps/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx b/apps/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx index 842b4a1c08..0930fbc09e 100644 --- a/apps/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx +++ b/apps/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx @@ -1,12 +1,11 @@ import { DxcFlex, DxcLink, DxcParagraph, DxcTable } from "@dxc-technology/halstack-react"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import QuickNavContainer from "@/common/QuickNavContainer"; -import Code from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; import basicUsage from "./examples/basicUsage"; import sortable from "./examples/sortable"; -import TableCode, { ExtendedTableCode } from "@/common/TableCode"; +import Code, { TableCode, ExtendedTableCode } from "@/common/Code"; import StatusBadge from "@/common/StatusBadge"; import reduced from "./examples/reduced"; import Link from "next/link"; @@ -51,7 +50,7 @@ const sections = [ - + columns @@ -78,7 +77,7 @@ const sections = [ - + rows @@ -108,7 +107,7 @@ const sections = [ - + mode @@ -133,7 +132,7 @@ const sections = [ - + hidePaginator @@ -235,7 +234,7 @@ const sections = [ - + actions diff --git a/apps/website/screens/components/resultset-table/code/examples/basicUsage.ts b/apps/website/screens/components/resultset-table/code/examples/basicUsage.ts index 6595122755..02a8ef649b 100644 --- a/apps/website/screens/components/resultset-table/code/examples/basicUsage.ts +++ b/apps/website/screens/components/resultset-table/code/examples/basicUsage.ts @@ -48,7 +48,7 @@ const code = `() => { ]; return ( - + { ]; return ( - + { ]; return ( - + { ]; return ( - + ); diff --git a/apps/website/screens/components/select/SelectPageLayout.tsx b/apps/website/screens/components/select/SelectPageLayout.tsx index c0fa6e7e24..6589cc8016 100644 --- a/apps/website/screens/components/select/SelectPageLayout.tsx +++ b/apps/website/screens/components/select/SelectPageLayout.tsx @@ -11,9 +11,9 @@ const SelectPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + The select component allows users to make single or multiple selections from a pre-defined list of options. diff --git a/apps/website/screens/components/select/code/SelectCodePage.tsx b/apps/website/screens/components/select/code/SelectCodePage.tsx index d714c257f4..f7eb17c85c 100644 --- a/apps/website/screens/components/select/code/SelectCodePage.tsx +++ b/apps/website/screens/components/select/code/SelectCodePage.tsx @@ -2,14 +2,13 @@ import { DxcFlex, DxcLink, DxcTable } from "@dxc-technology/halstack-react"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import QuickNavContainer from "@/common/QuickNavContainer"; import DocFooter from "@/common/DocFooter"; -import Code from "@/common/Code"; import Example from "@/common/example/Example"; import controlled from "./examples/controlled"; import uncontrolled from "./examples/uncontrolled"; import errorHandling from "./examples/errorHandling"; import groups from "./examples/groupedOptions"; import icons from "./examples/icons"; -import TableCode, { ExtendedTableCode } from "@/common/TableCode"; +import Code, { TableCode, ExtendedTableCode } from "@/common/Code"; import StatusBadge from "@/common/StatusBadge"; const optionsType = `{ @@ -169,7 +168,7 @@ const sections = [ - + options diff --git a/apps/website/screens/components/select/code/examples/controlled.ts b/apps/website/screens/components/select/code/examples/controlled.ts index 24be862ba0..53665961fd 100644 --- a/apps/website/screens/components/select/code/examples/controlled.ts +++ b/apps/website/screens/components/select/code/examples/controlled.ts @@ -18,7 +18,7 @@ const code = `() => { ]; return ( - + { ]; return ( - + { ]; return ( - + { return ( - + { ]; return ( - - + + { ]; return ( - - + + { ]; return ( - - + + { ]; return ( - - + + { ]; return ( - - + + { ]; return ( - + - + The sidenav component is part of the layout of the application and it makes easier to divide the main screen diff --git a/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx b/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx index 3974bad91a..566514582b 100644 --- a/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx +++ b/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx @@ -1,9 +1,8 @@ -import Code from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import StatusBadge from "@/common/StatusBadge"; -import TableCode from "@/common/TableCode"; +import Code, { TableCode } from "@/common/Code"; import { DxcLink, DxcFlex, DxcTable, DxcParagraph } from "@dxc-technology/halstack-react"; import Link from "next/link"; @@ -28,7 +27,7 @@ const sections = [ - + children @@ -63,7 +62,7 @@ const sections = [ {" "} - + children @@ -102,7 +101,7 @@ const sections = [ {" "} - + children @@ -175,7 +174,7 @@ const sections = [ - + children @@ -273,7 +272,7 @@ const sections = [ - + children diff --git a/apps/website/screens/components/slider/SliderPageLayout.tsx b/apps/website/screens/components/slider/SliderPageLayout.tsx index 98d94da228..5663bfd6e3 100644 --- a/apps/website/screens/components/slider/SliderPageLayout.tsx +++ b/apps/website/screens/components/slider/SliderPageLayout.tsx @@ -11,9 +11,9 @@ const SliderPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + Slider control enables users to select a specific value from a predefined set by dragging a thumb along a diff --git a/apps/website/screens/components/slider/code/SliderCodePage.tsx b/apps/website/screens/components/slider/code/SliderCodePage.tsx index 38eb04fbe3..018565ac5a 100644 --- a/apps/website/screens/components/slider/code/SliderCodePage.tsx +++ b/apps/website/screens/components/slider/code/SliderCodePage.tsx @@ -3,12 +3,11 @@ import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; -import Code from "@/common/Code"; +import complex from "./examples/complex"; import controlled from "./examples/controlled"; -import uncontrolled from "./examples/uncontrolled"; import formatLabel from "./examples/formatLabel"; -import TableCode from "@/common/TableCode"; -import complex from "./examples/complex"; +import uncontrolled from "./examples/uncontrolled"; +import Code, { TableCode } from "@/common/Code"; const sections = [ { diff --git a/apps/website/screens/components/slider/code/examples/complex.ts b/apps/website/screens/components/slider/code/examples/complex.ts index 6a69e40d00..23e1e68879 100644 --- a/apps/website/screens/components/slider/code/examples/complex.ts +++ b/apps/website/screens/components/slider/code/examples/complex.ts @@ -8,7 +8,7 @@ const code = `() => { }; return ( - + { }; return ( - + { }; return ( - + { }; return ( - - + + Dragging the thumb - + Users can click and drag the thumb along the track to adjust the value. @@ -86,7 +86,7 @@ const sections = [ Clicking the track - + Users can click anywhere on the track to move the thumb directly to that position. @@ -100,11 +100,11 @@ const sections = [ Keyboard support - + Users can adjust the slider using the arrow keys for precise control: - + Left / Down arrow: decrease value. diff --git a/apps/website/screens/components/slider/overview/examples/continuous.ts b/apps/website/screens/components/slider/overview/examples/continuous.ts index e60f8f6baf..63c3fcf7f2 100644 --- a/apps/website/screens/components/slider/overview/examples/continuous.ts +++ b/apps/website/screens/components/slider/overview/examples/continuous.ts @@ -8,8 +8,8 @@ const code = `() => { }; return ( - - + + { }; return ( - + { }; return ( - + { ]; return ( - + - + Loading spinner is a waiting indicator in the user interface to communicate users an ongoing process. diff --git a/apps/website/screens/components/spinner/code/SpinnerCodePage.tsx b/apps/website/screens/components/spinner/code/SpinnerCodePage.tsx index 01a5bdc2d7..aed142d58a 100644 --- a/apps/website/screens/components/spinner/code/SpinnerCodePage.tsx +++ b/apps/website/screens/components/spinner/code/SpinnerCodePage.tsx @@ -5,7 +5,7 @@ import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; import basicUsage from "./examples/basicUsage"; import overlay from "./examples/overlay"; -import TableCode from "@/common/TableCode"; +import { TableCode } from "@/common/Code"; import Code from "@/common/Code"; const sections = [ diff --git a/apps/website/screens/components/spinner/code/examples/basicUsage.ts b/apps/website/screens/components/spinner/code/examples/basicUsage.ts index 857f2f7655..3da314f56c 100644 --- a/apps/website/screens/components/spinner/code/examples/basicUsage.ts +++ b/apps/website/screens/components/spinner/code/examples/basicUsage.ts @@ -2,7 +2,7 @@ import { DxcSpinner, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - + ); diff --git a/apps/website/screens/components/spinner/code/examples/overlay.ts b/apps/website/screens/components/spinner/code/examples/overlay.ts index bdd0375ce4..ca4cc3d1fe 100644 --- a/apps/website/screens/components/spinner/code/examples/overlay.ts +++ b/apps/website/screens/components/spinner/code/examples/overlay.ts @@ -18,7 +18,7 @@ const code = `() => { }; return ( - + {isVisible && } diff --git a/apps/website/screens/components/spinner/overview/SpinnerOverviewPage.tsx b/apps/website/screens/components/spinner/overview/SpinnerOverviewPage.tsx index 28eb4a29d3..9d748fc18c 100644 --- a/apps/website/screens/components/spinner/overview/SpinnerOverviewPage.tsx +++ b/apps/website/screens/components/spinner/overview/SpinnerOverviewPage.tsx @@ -179,7 +179,7 @@ const sections = [ Choose the right variant: - + The default (large) spinner is ideal for full-page or major loading states that diff --git a/apps/website/screens/components/spinner/overview/examples/determinateIndeterminate.ts b/apps/website/screens/components/spinner/overview/examples/determinateIndeterminate.ts index 0e0dac75e2..1383d07712 100644 --- a/apps/website/screens/components/spinner/overview/examples/determinateIndeterminate.ts +++ b/apps/website/screens/components/spinner/overview/examples/determinateIndeterminate.ts @@ -2,8 +2,8 @@ import { DxcSpinner, DxcInset, DxcFlex } from "@dxc-technology/halstack-react"; const code = `() => { return ( - - + + diff --git a/apps/website/screens/components/spinner/overview/examples/small.ts b/apps/website/screens/components/spinner/overview/examples/small.ts index f4b38a83c6..45c2ba1245 100644 --- a/apps/website/screens/components/spinner/overview/examples/small.ts +++ b/apps/website/screens/components/spinner/overview/examples/small.ts @@ -2,8 +2,8 @@ import { DxcSpinner, DxcInset, DxcFlex } from "@dxc-technology/halstack-react"; const code = `() => { return ( - - + + diff --git a/apps/website/screens/components/status-light/StatusLightPageLayout.tsx b/apps/website/screens/components/status-light/StatusLightPageLayout.tsx index cf437cd1de..d6db28efe2 100644 --- a/apps/website/screens/components/status-light/StatusLightPageLayout.tsx +++ b/apps/website/screens/components/status-light/StatusLightPageLayout.tsx @@ -11,9 +11,9 @@ const StatusLightPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + Status light is a small, color-coded visual indicator used to represent the state or condition of a system, diff --git a/apps/website/screens/components/status-light/code/StatusLightCodePage.tsx b/apps/website/screens/components/status-light/code/StatusLightCodePage.tsx index e763d2ed75..abfa142e9c 100644 --- a/apps/website/screens/components/status-light/code/StatusLightCodePage.tsx +++ b/apps/website/screens/components/status-light/code/StatusLightCodePage.tsx @@ -2,7 +2,7 @@ import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import DocFooter from "@/common/DocFooter"; -import TableCode from "@/common/TableCode"; +import { TableCode } from "@/common/Code"; import Example from "@/common/example/Example"; import basicUsage from "./examples/basicUsage"; import StatusBadge from "@/common/StatusBadge"; @@ -23,7 +23,7 @@ const sections = [ - + label diff --git a/apps/website/screens/components/status-light/code/examples/basicUsage.ts b/apps/website/screens/components/status-light/code/examples/basicUsage.ts index 86bd084dc4..ff9dc10755 100644 --- a/apps/website/screens/components/status-light/code/examples/basicUsage.ts +++ b/apps/website/screens/components/status-light/code/examples/basicUsage.ts @@ -2,7 +2,7 @@ import { DxcStatusLight, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - + ); diff --git a/apps/website/screens/components/status-light/overview/examples/variants.ts b/apps/website/screens/components/status-light/overview/examples/variants.ts index 28682fdbd0..e377ffae13 100644 --- a/apps/website/screens/components/status-light/overview/examples/variants.ts +++ b/apps/website/screens/components/status-light/overview/examples/variants.ts @@ -2,29 +2,29 @@ import { DxcStatusLight, DxcInset, DxcFlex } from "@dxc-technology/halstack-reac const code = `() => { return ( - - - + + + - + - + - + - + diff --git a/apps/website/screens/components/switch/SwitchPageLayout.tsx b/apps/website/screens/components/switch/SwitchPageLayout.tsx index b12acec0cd..119e0577b3 100644 --- a/apps/website/screens/components/switch/SwitchPageLayout.tsx +++ b/apps/website/screens/components/switch/SwitchPageLayout.tsx @@ -11,9 +11,9 @@ const SwitchPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + A switch allows users to toggle a single setting between two opposing states, such as on/off or diff --git a/apps/website/screens/components/switch/code/SwitchCodePage.tsx b/apps/website/screens/components/switch/code/SwitchCodePage.tsx index a4fdf930be..281a822bd3 100644 --- a/apps/website/screens/components/switch/code/SwitchCodePage.tsx +++ b/apps/website/screens/components/switch/code/SwitchCodePage.tsx @@ -1,12 +1,11 @@ import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import QuickNavContainer from "@/common/QuickNavContainer"; -import Code from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; import controlled from "./examples/controlled"; import uncontrolled from "./examples/uncontrolled"; -import TableCode from "@/common/TableCode"; +import Code, { TableCode } from "@/common/Code"; const sections = [ { diff --git a/apps/website/screens/components/switch/code/examples/controlled.ts b/apps/website/screens/components/switch/code/examples/controlled.ts index ebd453d930..8a4694b34c 100644 --- a/apps/website/screens/components/switch/code/examples/controlled.ts +++ b/apps/website/screens/components/switch/code/examples/controlled.ts @@ -8,7 +8,7 @@ const code = `() => { }; return ( - + { }; return ( - - + + { return ( - + diff --git a/apps/website/screens/components/switch/overview/examples/stacking.ts b/apps/website/screens/components/switch/overview/examples/stacking.ts index 2810a28ab8..9d479f7630 100644 --- a/apps/website/screens/components/switch/overview/examples/stacking.ts +++ b/apps/website/screens/components/switch/overview/examples/stacking.ts @@ -2,7 +2,7 @@ import { DxcSwitch, DxcInset, DxcFlex, DxcTypography } from "@dxc-technology/hal const code = `() => { return ( - + { ]; return ( - + - + Data table is a component with a high rate of usage within the applications. It allows to show the user a diff --git a/apps/website/screens/components/table/code/TableCodePage.tsx b/apps/website/screens/components/table/code/TableCodePage.tsx index 014ea29a03..f71d4da936 100644 --- a/apps/website/screens/components/table/code/TableCodePage.tsx +++ b/apps/website/screens/components/table/code/TableCodePage.tsx @@ -3,7 +3,7 @@ import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import QuickNavContainer from "@/common/QuickNavContainer"; import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; -import TableCode, { ExtendedTableCode } from "@/common/TableCode"; +import { TableCode, ExtendedTableCode } from "@/common/Code"; import StatusBadge from "@/common/StatusBadge"; import basic from "./examples/basicUsage"; import reduced from "./examples/reduced"; @@ -40,7 +40,7 @@ const sections = [ - + children @@ -53,7 +53,7 @@ const sections = [ - + mode @@ -114,7 +114,7 @@ const sections = [ - + actions diff --git a/apps/website/screens/components/table/code/examples/actions.ts b/apps/website/screens/components/table/code/examples/actions.ts index 10ad0dd76e..b81034a86d 100644 --- a/apps/website/screens/components/table/code/examples/actions.ts +++ b/apps/website/screens/components/table/code/examples/actions.ts @@ -23,7 +23,7 @@ const code = `() => { }, ]; return ( - + diff --git a/apps/website/screens/components/table/code/examples/basicUsage.ts b/apps/website/screens/components/table/code/examples/basicUsage.ts index 839cb8de52..279f61cc2c 100644 --- a/apps/website/screens/components/table/code/examples/basicUsage.ts +++ b/apps/website/screens/components/table/code/examples/basicUsage.ts @@ -2,7 +2,7 @@ import { DxcTable, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - + diff --git a/apps/website/screens/components/table/code/examples/reduced.ts b/apps/website/screens/components/table/code/examples/reduced.ts index 3d0e384ac9..b8d0afef1d 100644 --- a/apps/website/screens/components/table/code/examples/reduced.ts +++ b/apps/website/screens/components/table/code/examples/reduced.ts @@ -2,7 +2,7 @@ import { DxcTable, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - + diff --git a/apps/website/screens/components/tabs/TabsPageLayout.tsx b/apps/website/screens/components/tabs/TabsPageLayout.tsx index b579a2fc2e..7abf8e1307 100644 --- a/apps/website/screens/components/tabs/TabsPageLayout.tsx +++ b/apps/website/screens/components/tabs/TabsPageLayout.tsx @@ -11,9 +11,9 @@ const TabsPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + A tab is a UI component that allows users to switch between different sections of content without leaving diff --git a/apps/website/screens/components/tabs/code/TabsCodePage.tsx b/apps/website/screens/components/tabs/code/TabsCodePage.tsx index 3a4ac1b9b9..1ad41c7292 100644 --- a/apps/website/screens/components/tabs/code/TabsCodePage.tsx +++ b/apps/website/screens/components/tabs/code/TabsCodePage.tsx @@ -2,12 +2,11 @@ import { DxcFlex, DxcLink, DxcParagraph, DxcTable } from "@dxc-technology/halsta import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import DocFooter from "@/common/DocFooter"; -import Code from "@/common/Code"; import Example from "@/common/example/Example"; import controlledDeprecated from "./examples-old/controlled"; import uncontrolledDeprecated from "./examples-old/uncontrolled"; import iconsDeprecated from "./examples-old/icons"; -import TableCode from "@/common/TableCode"; +import Code, { TableCode } from "@/common/Code"; import StatusBadge from "@/common/StatusBadge"; import controlled from "./examples-new/controlled"; import uncontrolled from "./examples-new/uncontrolled"; @@ -29,7 +28,7 @@ const sections = [ - + activeTabIndex @@ -45,7 +44,7 @@ const sections = [ - + {/* TODO: Swap experimental for required once old logic is removed */} children @@ -61,7 +60,7 @@ const sections = [ - + defaultActiveTabIndex @@ -95,7 +94,7 @@ const sections = [ - + onTabClick @@ -111,7 +110,7 @@ const sections = [ - + onTabHover @@ -139,7 +138,7 @@ const sections = [ - + tabs @@ -213,7 +212,7 @@ const sections = [ - + children @@ -261,7 +260,7 @@ const sections = [ - + label @@ -304,7 +303,7 @@ const sections = [ - + title diff --git a/apps/website/screens/components/tabs/code/examples-new/controlled.ts b/apps/website/screens/components/tabs/code/examples-new/controlled.ts index 2e68fc8f0d..a90e3173db 100644 --- a/apps/website/screens/components/tabs/code/examples-new/controlled.ts +++ b/apps/website/screens/components/tabs/code/examples-new/controlled.ts @@ -5,7 +5,7 @@ const code = `() => { const [selectedTab, setSelectedTab] = useState("Mail"); return ( - + setSelectedTab("Mail")}> <> diff --git a/apps/website/screens/components/tabs/code/examples-new/icons.ts b/apps/website/screens/components/tabs/code/examples-new/icons.ts index 54a71c2294..fb6d885da3 100644 --- a/apps/website/screens/components/tabs/code/examples-new/icons.ts +++ b/apps/website/screens/components/tabs/code/examples-new/icons.ts @@ -21,7 +21,7 @@ const code = `() => { ); return ( - + <> diff --git a/apps/website/screens/components/tabs/code/examples-new/uncontrolled.ts b/apps/website/screens/components/tabs/code/examples-new/uncontrolled.ts index 4f28d55e50..308383f318 100644 --- a/apps/website/screens/components/tabs/code/examples-new/uncontrolled.ts +++ b/apps/website/screens/components/tabs/code/examples-new/uncontrolled.ts @@ -2,7 +2,7 @@ import { DxcTabs, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - + <> diff --git a/apps/website/screens/components/tabs/code/examples-old/controlled.ts b/apps/website/screens/components/tabs/code/examples-old/controlled.ts index 41b02cd862..5fe3b2e23c 100644 --- a/apps/website/screens/components/tabs/code/examples-old/controlled.ts +++ b/apps/website/screens/components/tabs/code/examples-old/controlled.ts @@ -8,7 +8,7 @@ const code = `() => { }; return ( - + { ); return ( - + { return ( - + Default tabs: used for main navigation, placed above the header, spanning 100% of the screen width. - + Container tabs: Used for panel navigation, placed at the top of the panel, using the full available width. Scrollable tabs are allowed when space is limited. - + diff --git a/apps/website/screens/components/tabs/overview/examples/default.ts b/apps/website/screens/components/tabs/overview/examples/default.ts index ed680e1772..2e0aa3c5cb 100644 --- a/apps/website/screens/components/tabs/overview/examples/default.ts +++ b/apps/website/screens/components/tabs/overview/examples/default.ts @@ -2,7 +2,7 @@ import { DxcTabs, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - + <> diff --git a/apps/website/screens/components/tabs/overview/examples/scrollable.ts b/apps/website/screens/components/tabs/overview/examples/scrollable.ts index 64e898439f..d28b93bc91 100644 --- a/apps/website/screens/components/tabs/overview/examples/scrollable.ts +++ b/apps/website/screens/components/tabs/overview/examples/scrollable.ts @@ -2,7 +2,7 @@ import { DxcContainer, DxcTabs, DxcInset, DxcFlex } from "@dxc-technology/halsta const code = `() => { return ( - + diff --git a/apps/website/screens/components/tag/TagPageLayout.tsx b/apps/website/screens/components/tag/TagPageLayout.tsx index 5149f68540..18f3039761 100644 --- a/apps/website/screens/components/tag/TagPageLayout.tsx +++ b/apps/website/screens/components/tag/TagPageLayout.tsx @@ -13,9 +13,9 @@ const TagPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + The Tag represents resources and global terms to identify and linked with a text section to provide to the diff --git a/apps/website/screens/components/tag/code/TagCodePage.tsx b/apps/website/screens/components/tag/code/TagCodePage.tsx index b1b73790f2..1ec8a4a4c0 100644 --- a/apps/website/screens/components/tag/code/TagCodePage.tsx +++ b/apps/website/screens/components/tag/code/TagCodePage.tsx @@ -1,12 +1,11 @@ import { DxcFlex, DxcLink, DxcTable } from "@dxc-technology/halstack-react"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import QuickNavContainer from "@/common/QuickNavContainer"; -import Code from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; import basicUsage from "./examples/basicUsage"; import icons from "./examples/icons"; -import TableCode from "@/common/TableCode"; +import Code, { TableCode } from "@/common/Code"; const sections = [ { diff --git a/apps/website/screens/components/tag/code/examples/basicUsage.ts b/apps/website/screens/components/tag/code/examples/basicUsage.ts index 42883cebac..cb6a259c42 100644 --- a/apps/website/screens/components/tag/code/examples/basicUsage.ts +++ b/apps/website/screens/components/tag/code/examples/basicUsage.ts @@ -2,7 +2,7 @@ import { DxcTag, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - + ); diff --git a/apps/website/screens/components/tag/code/examples/icons.ts b/apps/website/screens/components/tag/code/examples/icons.ts index ed7ee83632..5ac733c063 100644 --- a/apps/website/screens/components/tag/code/examples/icons.ts +++ b/apps/website/screens/components/tag/code/examples/icons.ts @@ -9,8 +9,8 @@ const code = `() => { ); return ( - - + + diff --git a/apps/website/screens/components/tag/usage/examples/iconUsage.ts b/apps/website/screens/components/tag/usage/examples/iconUsage.ts index d123fb3b3a..c934dc62dd 100644 --- a/apps/website/screens/components/tag/usage/examples/iconUsage.ts +++ b/apps/website/screens/components/tag/usage/examples/iconUsage.ts @@ -9,17 +9,17 @@ const code = `() => { ); return ( - + - + - + - + diff --git a/apps/website/screens/components/text-input/TextInputPageLayout.tsx b/apps/website/screens/components/text-input/TextInputPageLayout.tsx index f3c164f366..b32b628281 100644 --- a/apps/website/screens/components/text-input/TextInputPageLayout.tsx +++ b/apps/website/screens/components/text-input/TextInputPageLayout.tsx @@ -11,9 +11,9 @@ const TextInputPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + Text inputs are fields commonly used in forms to capture user-entered text in a structured and accessible diff --git a/apps/website/screens/components/text-input/code/TextInputCodePage.tsx b/apps/website/screens/components/text-input/code/TextInputCodePage.tsx index 5a0bde0068..cf95811962 100644 --- a/apps/website/screens/components/text-input/code/TextInputCodePage.tsx +++ b/apps/website/screens/components/text-input/code/TextInputCodePage.tsx @@ -1,7 +1,6 @@ import { DxcLink, DxcFlex, DxcTable } from "@dxc-technology/halstack-react"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import QuickNavContainer from "@/common/QuickNavContainer"; -import Code from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; import controlled from "./examples/controlled"; @@ -9,7 +8,7 @@ import uncontrolled from "./examples/uncontrolled"; import action from "./examples/action"; import functionSuggestions from "./examples/functionSuggestions"; import errorHandling from "./examples/errorHandling"; -import TableCode, { ExtendedTableCode } from "@/common/TableCode"; +import Code, { TableCode, ExtendedTableCode } from "@/common/Code"; const actionTypeString = `{ icon?: string | (React.ReactNode diff --git a/apps/website/screens/components/text-input/code/examples/action.ts b/apps/website/screens/components/text-input/code/examples/action.ts index 4f5fc374b4..b58ef48fa3 100644 --- a/apps/website/screens/components/text-input/code/examples/action.ts +++ b/apps/website/screens/components/text-input/code/examples/action.ts @@ -22,7 +22,7 @@ const code = `() => { }; return ( - + { }; return ( - + { ); return ( - + { return result; }; return ( - + { }; return ( - - + + { }; return ( - + { return ( - - + + diff --git a/apps/website/screens/components/textarea/TextareaPageLayout.tsx b/apps/website/screens/components/textarea/TextareaPageLayout.tsx index fab3c09a40..e70e89a5a5 100644 --- a/apps/website/screens/components/textarea/TextareaPageLayout.tsx +++ b/apps/website/screens/components/textarea/TextareaPageLayout.tsx @@ -11,9 +11,9 @@ const TextareaPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + A textarea allows the users enter a multi-line, free-form text. diff --git a/apps/website/screens/components/textarea/code/TextareaCodePage.tsx b/apps/website/screens/components/textarea/code/TextareaCodePage.tsx index cc55aad6f8..469bb41aab 100644 --- a/apps/website/screens/components/textarea/code/TextareaCodePage.tsx +++ b/apps/website/screens/components/textarea/code/TextareaCodePage.tsx @@ -1,13 +1,12 @@ import { DxcFlex, DxcLink, DxcTable } from "@dxc-technology/halstack-react"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import QuickNavContainer from "@/common/QuickNavContainer"; -import Code from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; import controlled from "./examples/controlled"; import uncontrolled from "./examples/uncontrolled"; import errorHandling from "./examples/errorHandling"; -import TableCode from "@/common/TableCode"; +import Code, { TableCode } from "@/common/Code"; const sections = [ { diff --git a/apps/website/screens/components/textarea/code/examples/controlled.ts b/apps/website/screens/components/textarea/code/examples/controlled.ts index f4a11bc67b..eb09d0122d 100644 --- a/apps/website/screens/components/textarea/code/examples/controlled.ts +++ b/apps/website/screens/components/textarea/code/examples/controlled.ts @@ -11,7 +11,7 @@ const code = `() => { }; return ( - + { }; return ( - + { }; return ( - - + + { ]; return ( - + - + The toast component is a lightweight notification element that appears temporarily to provide feedback or diff --git a/apps/website/screens/components/toast/code/ToastCodePage.tsx b/apps/website/screens/components/toast/code/ToastCodePage.tsx index b6333cd129..43c9f23460 100644 --- a/apps/website/screens/components/toast/code/ToastCodePage.tsx +++ b/apps/website/screens/components/toast/code/ToastCodePage.tsx @@ -2,13 +2,12 @@ import { DxcFlex, DxcLink, DxcParagraph, DxcTable } from "@dxc-technology/halsta import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import QuickNavContainer from "@/common/QuickNavContainer"; import DocFooter from "@/common/DocFooter"; -import TableCode, { ExtendedTableCode } from "@/common/TableCode"; +import Code, { TableCode, ExtendedTableCode } from "@/common/Code"; import StatusBadge from "@/common/StatusBadge"; import Example from "@/common/example/Example"; import basic from "./examples/basicUsage"; import semantic from "./examples/semantic"; import loading from "./examples/loading"; -import Code from "@/common/Code"; const actionTypeString = `{ icon: string | @@ -38,7 +37,7 @@ const sections = [ - + children @@ -172,7 +171,7 @@ const sections = [ - + message @@ -210,7 +209,7 @@ const sections = [ - + message @@ -258,7 +257,7 @@ const sections = [ - + message diff --git a/apps/website/screens/components/toast/code/examples/basicUsage.ts b/apps/website/screens/components/toast/code/examples/basicUsage.ts index 24249ddc03..0c173ba565 100644 --- a/apps/website/screens/components/toast/code/examples/basicUsage.ts +++ b/apps/website/screens/components/toast/code/examples/basicUsage.ts @@ -4,7 +4,7 @@ const code = `() => { const toast = useToast(); return ( - + { diff --git a/apps/website/screens/components/toast/code/examples/loading.ts b/apps/website/screens/components/toast/code/examples/loading.ts index 09cf668688..b030ea60ff 100644 --- a/apps/website/screens/components/toast/code/examples/loading.ts +++ b/apps/website/screens/components/toast/code/examples/loading.ts @@ -13,7 +13,7 @@ const code = `() => { }; return ( - + { const action = { label: "Action", onClick: () => {} }; return ( - - + + { ]; return ( - + - + The toggle group component is a set of toggle buttons that function as a unified control, allowing users to diff --git a/apps/website/screens/components/toggle-group/code/ToggleGroupCodePage.tsx b/apps/website/screens/components/toggle-group/code/ToggleGroupCodePage.tsx index b9ea54743a..0a2921e655 100644 --- a/apps/website/screens/components/toggle-group/code/ToggleGroupCodePage.tsx +++ b/apps/website/screens/components/toggle-group/code/ToggleGroupCodePage.tsx @@ -1,13 +1,12 @@ import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import QuickNavContainer from "@/common/QuickNavContainer"; -import Code from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; import controlled from "./examples/controlled"; import uncontrolled from "./examples/uncontrolled"; import StatusBadge from "@/common/StatusBadge"; -import TableCode, { ExtendedTableCode } from "@/common/TableCode"; +import Code, { ExtendedTableCode, TableCode } from "@/common/Code"; const optionTypeString = `{ disabled?: boolean; @@ -78,7 +77,7 @@ const sections = [ - + options diff --git a/apps/website/screens/components/toggle-group/code/examples/controlled.ts b/apps/website/screens/components/toggle-group/code/examples/controlled.ts index eff86e6d85..b8ebf914d6 100644 --- a/apps/website/screens/components/toggle-group/code/examples/controlled.ts +++ b/apps/website/screens/components/toggle-group/code/examples/controlled.ts @@ -22,7 +22,7 @@ const code = `() => { ]; return ( - + { ]; return ( - + { ]; return ( - + { ]; return ( - + { ]; return ( - + { ]; return ( - + - + A tooltip is a descriptive or supplementary element that is displayed when an object is focused or hovered diff --git a/apps/website/screens/components/tooltip/code/TooltipCodePage.tsx b/apps/website/screens/components/tooltip/code/TooltipCodePage.tsx index 15f6175607..34e77ef8b7 100644 --- a/apps/website/screens/components/tooltip/code/TooltipCodePage.tsx +++ b/apps/website/screens/components/tooltip/code/TooltipCodePage.tsx @@ -2,7 +2,7 @@ import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import QuickNavContainer from "@/common/QuickNavContainer"; import DocFooter from "@/common/DocFooter"; -import TableCode from "@/common/TableCode"; +import { TableCode } from "@/common/Code"; import basicUsage from "./examples/basicUsage"; import Example from "@/common/example/Example"; import StatusBadge from "@/common/StatusBadge"; @@ -23,7 +23,7 @@ const sections = [ - + children diff --git a/apps/website/screens/components/tooltip/code/examples/basicUsage.ts b/apps/website/screens/components/tooltip/code/examples/basicUsage.ts index bfa50a6fe0..0d6d46d7d7 100644 --- a/apps/website/screens/components/tooltip/code/examples/basicUsage.ts +++ b/apps/website/screens/components/tooltip/code/examples/basicUsage.ts @@ -2,7 +2,7 @@ import { DxcTooltip, DxcButton, DxcInset } from "@dxc-technology/halstack-react" const code = `() => { return ( - + diff --git a/apps/website/screens/components/typography/TypographyPageLayout.tsx b/apps/website/screens/components/typography/TypographyPageLayout.tsx index 7354fe382e..4f0059a074 100644 --- a/apps/website/screens/components/typography/TypographyPageLayout.tsx +++ b/apps/website/screens/components/typography/TypographyPageLayout.tsx @@ -12,9 +12,9 @@ const TypographyPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + - + children diff --git a/apps/website/screens/components/typography/code/examples/basicUsage.ts b/apps/website/screens/components/typography/code/examples/basicUsage.ts index bc886389e2..08e2379150 100644 --- a/apps/website/screens/components/typography/code/examples/basicUsage.ts +++ b/apps/website/screens/components/typography/code/examples/basicUsage.ts @@ -2,7 +2,7 @@ import { DxcInset, DxcTypography } from "@dxc-technology/halstack-react"; const code = `() => { return ( - + This is a very basic example of the use of the DxcTypography component. diff --git a/apps/website/screens/components/typography/code/examples/nestedTexts.ts b/apps/website/screens/components/typography/code/examples/nestedTexts.ts index 5dcbf239d7..d75cc336db 100644 --- a/apps/website/screens/components/typography/code/examples/nestedTexts.ts +++ b/apps/website/screens/components/typography/code/examples/nestedTexts.ts @@ -2,7 +2,7 @@ import { DxcTypography, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - + This DxcTypography component has some children with different styles; parent has a fontFamily 'Open Sans, sans-serif' and{" "} diff --git a/apps/website/screens/components/wizard/WizardPageLayout.tsx b/apps/website/screens/components/wizard/WizardPageLayout.tsx index b296958789..2732334f04 100644 --- a/apps/website/screens/components/wizard/WizardPageLayout.tsx +++ b/apps/website/screens/components/wizard/WizardPageLayout.tsx @@ -11,9 +11,9 @@ const WizardPageHeading = ({ children }: { children: ReactNode }) => { ]; return ( - + - + Wizard represents a stepped workflow as a form of linear and mandatory progression through a defined process diff --git a/apps/website/screens/components/wizard/code/WizardCodePage.tsx b/apps/website/screens/components/wizard/code/WizardCodePage.tsx index e06612bbba..1c1f229046 100644 --- a/apps/website/screens/components/wizard/code/WizardCodePage.tsx +++ b/apps/website/screens/components/wizard/code/WizardCodePage.tsx @@ -2,12 +2,11 @@ import { DxcFlex, DxcLink, DxcTable } from "@dxc-technology/halstack-react"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import DocFooter from "@/common/DocFooter"; -import Code from "@/common/Code"; import Example from "@/common/example/Example"; import controlled from "./examples/controlled"; import uncontrolled from "./examples/uncontrolled"; import icons from "./examples/icons"; -import TableCode, { ExtendedTableCode } from "@/common/TableCode"; +import Code, { ExtendedTableCode, TableCode } from "@/common/Code"; import StatusBadge from "@/common/StatusBadge"; const stepsType = `{ @@ -88,7 +87,7 @@ const sections = [ - + steps diff --git a/apps/website/screens/components/wizard/code/examples/controlled.ts b/apps/website/screens/components/wizard/code/examples/controlled.ts index 8a129f92f3..4d1955e4f9 100644 --- a/apps/website/screens/components/wizard/code/examples/controlled.ts +++ b/apps/website/screens/components/wizard/code/examples/controlled.ts @@ -8,7 +8,7 @@ const code = `() => { }; return ( - + { ); return ( - + { }; return ( - + { return ( - + { return ( - + { return ( - + { return ( - + { return ( - + { return ( - + { +export default function ComponentLifecyclePage() { return ( - - + + - + ); -}; - -export default ComponentLifecyclePage; +} diff --git a/apps/website/screens/overview/installation/InstallationPage.tsx b/apps/website/screens/overview/installation/InstallationPage.tsx index 24b2708af1..9b47bbfe58 100644 --- a/apps/website/screens/overview/installation/InstallationPage.tsx +++ b/apps/website/screens/overview/installation/InstallationPage.tsx @@ -96,12 +96,12 @@ const sections = [ }, ]; -export default function Installation() { +export default function InstallationPage() { return ( - - + + diff --git a/apps/website/screens/overview/installation/examples/building.ts b/apps/website/screens/overview/installation/examples/building.ts index c0f76630a4..7b3325a2e5 100644 --- a/apps/website/screens/overview/installation/examples/building.ts +++ b/apps/website/screens/overview/installation/examples/building.ts @@ -1,8 +1,8 @@ import { DxcButton, DxcFlex, DxcHeading, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react"; const code = `() => ( - - + + Halstack is an Open Source Design System built and maintained by DXC Technology diff --git a/apps/website/screens/overview/introduction/IntroductionPage.tsx b/apps/website/screens/overview/introduction/IntroductionPage.tsx index 0413911965..5fe07b5842 100644 --- a/apps/website/screens/overview/introduction/IntroductionPage.tsx +++ b/apps/website/screens/overview/introduction/IntroductionPage.tsx @@ -9,8 +9,8 @@ const sections = [ title: "What Halstack is", content: ( - Halstack is an Open Source Design System built and maintained by DXC Technology with the purpose of providing - all the necessary tools for designing and implementing accessible, intuitive and consistent User Experiences + Halstack is an open source Design System built and maintained by DXC Technology with the purpose of providing + all the necessary tools for designing and implementing accessible, intuitive and consistent user experiences with Figma, UXPin and React. ), @@ -19,7 +19,7 @@ const sections = [ title: "A tool for designers", content: ( - Halstack's first goal is to provide Product Designers with pre-created designs for the most common use-cases + Halstack's first goal is to provide product designers with pre-created designs for the most common use-cases they will face during the product design stage. Using Halstack, they don't need to reinvent the wheel looking for a solution to these mundane problems, and can focus on adding business value. Also, by centralizing these efforts in a Design System team, we can pay the right amount of attention to aspects as @@ -66,7 +66,7 @@ const sections = [ <> All the opinions provided by Halstack Design System always remain within the boundaries of the generalist - UI/UX Design domain. Halstack will not get into business-specific elements even if they are reusable. For + UI/UX design domain. Halstack will not get into business-specific elements even if they are reusable. For example, Halstack might provide guidelines on using forms within the context of digital applications. Still, it doesn't get into the specifics of designing a form for an insurance quote application. @@ -87,7 +87,7 @@ const sections = [ title: "A replacement for the Product Design stage", content: ( - Halstack should always be considered as assistance to the Product Design process, but never as a + Halstack should always be considered as assistance to the product design process, but never as a replacement. Product Designers are still a fundamental piece of this process since they will need to add the business context, validate the patterns contemplated by the Design System, and contribute back to the design system when necessary. @@ -207,12 +207,12 @@ const sections = [ }, ]; -const Introduction = () => { +export default function IntroductionPage() { return ( - - + + @@ -221,6 +221,4 @@ const Introduction = () => { ); -}; - -export default Introduction; +} diff --git a/apps/website/screens/overview/releases/ReleasesPage.tsx b/apps/website/screens/overview/releases/ReleasesPage.tsx index 20e38005b3..6dee83d69b 100644 --- a/apps/website/screens/overview/releases/ReleasesPage.tsx +++ b/apps/website/screens/overview/releases/ReleasesPage.tsx @@ -28,6 +28,9 @@ const sections = [ <> Every major release of Halstack is collected below: + + Halstack 15 + Halstack 14 @@ -110,21 +113,22 @@ const getReleasesPageSections = (releases: Release[]) => { return [...sections, section]; }; -const Releases = ({ releases }: { releases: Release[] }) => ( - - - - - - Access all the major releases of the Halstack React library and see the changelog of every version available. - - - - - - - - -); - -export default Releases; +export default function ReleasesPage({ releases }: { releases: Release[] }) { + return ( + + + + + + Access all the major releases of the Halstack React library and see the changelog of every version + available. + + + + + + + + + ); +} \ No newline at end of file diff --git a/apps/website/screens/principles/color/ColorPage.tsx b/apps/website/screens/principles/color/ColorPage.tsx index e7913fa769..0677565d38 100644 --- a/apps/website/screens/principles/color/ColorPage.tsx +++ b/apps/website/screens/principles/color/ColorPage.tsx @@ -807,20 +807,18 @@ const sections = [ }, ]; -const ColorPage = () => { +export default function ColorPage() { return ( - - + + - + ); -}; - -export default ColorPage; +} diff --git a/apps/website/screens/principles/data-visualization/DataVisualizationPage.tsx b/apps/website/screens/principles/data-visualization/DataVisualizationPage.tsx index 630ee3fb95..36c174cbf9 100644 --- a/apps/website/screens/principles/data-visualization/DataVisualizationPage.tsx +++ b/apps/website/screens/principles/data-visualization/DataVisualizationPage.tsx @@ -4,7 +4,6 @@ import DocFooter from "@/common/DocFooter"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import PageHeading from "@/common/PageHeading"; import Code from "@/common/Code"; -import Figure from "@/common/Figure"; import Image from "@/common/Image"; import Link from "next/link"; import colorPalette from "./images/bar_chart_color_palette.png"; @@ -326,20 +325,18 @@ const sections = [ }, ]; -const DataVisualizationPage = () => { +export default function DataVisualizationPage() { return ( - - + + - + ); -}; - -export default DataVisualizationPage; +} diff --git a/apps/website/screens/principles/data-visualization/examples/barChart.ts b/apps/website/screens/principles/data-visualization/examples/barChart.ts index 70cc217f98..129292d859 100644 --- a/apps/website/screens/principles/data-visualization/examples/barChart.ts +++ b/apps/website/screens/principles/data-visualization/examples/barChart.ts @@ -53,7 +53,7 @@ const code = `() => { applyTheme({ theme }); return ( - + { +export default function IconographyPage() { return ( - + - + - + ); -}; - -export default IconographyPage; +} diff --git a/apps/website/screens/principles/iconography/examples/buttonsWithIcon.ts b/apps/website/screens/principles/iconography/examples/buttonsWithIcon.ts index 5cbb2c8ca9..1e671d3665 100644 --- a/apps/website/screens/principles/iconography/examples/buttonsWithIcon.ts +++ b/apps/website/screens/principles/iconography/examples/buttonsWithIcon.ts @@ -2,8 +2,8 @@ import { DxcButton, DxcFlex, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - - + + { +export default function LayoutPage() { return ( - - + + - + ); -}; - -export default Layout; +} diff --git a/apps/website/screens/principles/localization/LocalizationPage.tsx b/apps/website/screens/principles/localization/LocalizationPage.tsx index b1203a8bf9..c206fe1310 100644 --- a/apps/website/screens/principles/localization/LocalizationPage.tsx +++ b/apps/website/screens/principles/localization/LocalizationPage.tsx @@ -625,20 +625,18 @@ const sections = [ }, ]; -const Localization = () => { +export default function LocalizationPage() { return ( - - + + - + ); -}; - -export default Localization; +} diff --git a/apps/website/screens/principles/localization/examples/translations.ts b/apps/website/screens/principles/localization/examples/translations.ts index 2b43c05efa..cd126693b3 100644 --- a/apps/website/screens/principles/localization/examples/translations.ts +++ b/apps/website/screens/principles/localization/examples/translations.ts @@ -25,7 +25,7 @@ const code = `() => { return ( - + { optional /> - + { optional /> - + { +export default function SpacingPage() { return ( - - + + - + ); -}; - -export default Spacing; +} diff --git a/apps/website/screens/principles/themes/ThemesPage.tsx b/apps/website/screens/principles/themes/ThemesPage.tsx deleted file mode 100644 index 1358b352d3..0000000000 --- a/apps/website/screens/principles/themes/ThemesPage.tsx +++ /dev/null @@ -1,1553 +0,0 @@ -import { - DxcTable, - DxcFlex, - DxcLink, - DxcHeading, - DxcParagraph, - DxcBulletedList, - DxcAlert, -} from "@dxc-technology/halstack-react"; -import Link from "next/link"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import PageHeading from "@/common/PageHeading"; -import DocFooter from "@/common/DocFooter"; -import Code from "@/common/Code"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import JsonContainer from "@/common/JsonContainer"; -import bloomTheme from "./examples/bloomTheme"; -import defaultAdvancedTheme from "@/common/themes/advanced-theme.json"; - -const sections = [ - { - title: "What is a theme?", - content: ( - <> - - In order to understand what a theme is, we need to understand first that the definition of colors, sizes, - shapes... is an intrinsic part of a design system. Since these parameters are essential for guaranteeing - accessibility and a good user experience, having the ability of changing them, might go frontally against the - intentions of the design system. - - - This is precisely what themes are, just custom defined objects that allow users to{" "} - override fundamental decisions of Halstack Design System. They are a way of escaping the - restrictions imposed by the Design System, and using themes could result in applications not being compliant - with the Halstack guidelines, or even introducing many different types of accessibility issues if not used - carefully. - - - Typically, you would create a Halstack Design System application, and after that,{" "} - only if there is a white-labeling requirement, we would apply a theme on top of the base - application. This, and only this, is the whole purpose of using themes. - - - ), - }, - { - title: "Different theming strategies", - content: ( - <> - - As explained in the previous section, themes are basically a list of properties that allow you to override - fundamental decisions of the design system. Based on the amount of decisions that can be overridden, Halstack - Design System has two different theming strategies which will be explained below: - - - Opinionated theme. - Advanced theme. - - - ), - subSections: [ - { - title: "Opinionated theme", - content: ( - <> - - This theming strategy lets you change some decisions of the design system, but is still opinionated about - the ones we consider fundamental. The list of configurable properties is small, but it applies at the - component level. - - - We strongly recommend using the{" "} - - opinionated theme generator - {" "} - to create the theme, but you can also create it yourself from scratch.{" "} - - ), - }} - closable={false} - /> - - Either through the theme-generator or by creating it from scratch, you will have to build a theme - containing as many objects as components you want to customize. The props of each component are a - key-value pair where: - - - - key: Corresponds to the 'Theme input' column of the tables that you can see in the - Opinionated theme input list section. - - - value: The color, must be hexadecimal without alpha channel. - - - - In the opinionated theme we must take into account that some of the colours that affect the component will - be calculated based on the theme inputs of the component. As you can see as follows: - - - ), - subSections: [ - { - title: "Opinionated theme inputs list", - content: ( - <> - - Tokens in the second column, which names are in bold, will have the value that results from applying - the transformation indicated in brackets to the 'Theme input'. (If nothing, they will have the - same value as the 'Theme input'). - - Theme inputs value must be hexadecimal without alpha channel. - - ), - subSections: [ - { - title: "Accordion", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Accent color - - arrowColor -
-
- iconColor -
-
- hoverBackgroundColor (+57% of lightness) - - - - Title font color - -
- titleLabelFontColor - - - - Sublabel font color - -
- subLabelFontColor - - - - Assistive text font color - - assistiveTextFontColor - - - - - ), - }, - { - title: "Alert", - content: ( - - The Alert component does not include theme inputs. The colors used in this component are universal - semantic colors, which we believe should remain unchanged to prevent confusion and ensure - consistency. - - ), - }, - { - title: "Button", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Base color - - primaryDefaultFontColor -
-
- primaryDefaultBackgroundColor -
-
- secondaryDefaultFontColor -
-
- secondaryDefaultBorderColor -
-
- secondaryHoverDefaultBackgroundColor -
-
- tertiaryDefaultFontColor -
-
- primaryHoverDefaultBackgroundColor (-8% of lightness) -
-
- primaryActiveDefaultBackgroundColor (-18% of lightness) -
-
- secondaryActiveDefaultBackgroundColor (-18% of lightness) -
-
- tertiaryHoverDefaultBackgroundColor (+57% of lightness) -
-
- tertiaryActiveDefaultBackgroundColor (+52% of lightness) -
-
- primaryDisabledDefaultBackgroundColor (+42% of lightness) -
-
- primaryDisabledDefaultFontColor (+42% of lightness) -
-
- secondaryDisabledDefaultBorderColor (+42% of lightness) -
-
- secondaryDisabledDefaultFontColor (+42% of lightness) -
-
- tertiaryDisabledDefaultFontColor (+42% of lightness) - - - - Primary font color - - primaryDefaultFontColor -
-
- primaryDisabledDefaultFontColor (+42% of lightness) - - - - Secondary hover font color - - secondaryHoverDefaultFontColor - - - - - ), - }, - { - title: "Checkbox", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Base color - - backgroundColorChecked -
-
- borderColor -
-
- hoverBackgroundColorChecked (-15% of lightness) -
-
- hoverBorderColor (-15% of lightness) - - - - Check color - - checkColor - - - - Font color - - fontColor - - - - - ), - }, - { - title: "Chip", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Base color - - backgroundColor - - - - Font color - - fontColor - - - - Icon color - - iconColor -
-
- hoverIconColor (-10% lightness) -
-
- activeIconColor (-30% lightness) - - - - - ), - }, - { - title: "Contextual Menu", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Accent color - - selectedMenuItemBackgroundColor -
-
- hoverSelectedMenuItemBackgroundColor (-5% of lightness) -
-
- activeSelectedMenuItemBackgroundColor (-5% of lightness) - - - - Base color - - backgroundColor -
-
- hoverMenuItemBackgroundColor (-5% of lightness) -
-
- activeMenuItemBackgroundColor (-5% of lightness) - - - - Font color - - menuItemFontColor -
-
- sectionFontColor - - - - Icon color - - iconColor - - - - - ), - }, - { - title: "Data Grid", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Base color - - headerBackgroundColor -
-
- headerCheckboxCheckColor -
-
- actionIconColor -
-
- hoverActionIconColor -
-
- focusActionIconColor -
-
- activeActionIconColor - - - - Header font color - - headerFontColor - - - - Cell font color - - dataFontColor - - - - - ), - }, - { - title: "Date Input", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Base color - - pickerSelectedBackgroundColor -
-
- pickerCurrentYearFontColor -
-
- pickerActiveBackgroundColor (-8% of lightness) -
-
- pickerHeaderActiveBackgroundColor (-8% of lightness) -
-
- pickerHoverBackgroundColor (+52% lightness) -
-
- pickerCurrentDateBorderColor (+42% lightness) -
-
- pickerHeaderHoverBackgroundColor (+52% lightness) - - - - Selected font color - - pickerSelectedFontColor -
-
- pickerActiveFontColor -
-
- pickerHeaderActiveFontColor - - - - - ), - }, - { - title: "Dialog", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Base color - - backgroundColor - - - - Close icon color - - closeIconColor - - - - Overlay color - - overlayColor - - - - - ), - }, - { - title: "Dropdown", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Base color - - buttonBackgroundColor -
-
- hoverButtonBackgroundColor (-5% of lightness) -
-
- activeButtonBackgroundColor (-12% of lightness) -
-
- hoverOptionBackgroundColor (-5% of lightness) -
-
- activeOptionBackgroundColor (-20% of lightness) - - - - Font color - - buttonFontColor -
-
- buttonIconColor -
-
- caretIconColor - - - - Option font color - - optionFontColor -
-
- optionIconColor - - - - - ), - }, - { - title: "File input", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Font color - - labelFontColor -
-
- helperTextFontColor -
-
- dropLabelFontColor -
-
- fileNameFontColor - - - - - ), - }, - { - title: "Footer", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Base color - - backgroundColor - - - - Font color - - bottomLinksFontColor -
-
- copyrightFontColor -
-
- socialLinksColor - - - - Accent color - - bottomLinksDividerColor - - - - Logo - - logo - - - - - ), - }, - { - title: "Header", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Base color - - backgroundColor - - - - Accent color - - underlinedColor - - - - Font color - - hamburgerFontColor - - - - Menu base color - - menuBackgroundColor - - - - Hamburger color - - hamburgerIconColor -
-
- hamburgerHoverColor (+90% of lightness) - - - - Logo - - logo - - - - Logo responsive - - logoResponsive - - - - Content color - - contentColor - - - - Overlay color - - overlayColor - - - - - ), - }, - { - title: "Link", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Base color - - visitedFontColor -
-
- visitedUnderlineColor - - - - - ), - }, - { - title: "Nav tabs", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Base color - - selectedFontColor -
-
- unselectedFontColor -
-
- selectedIconColor -
-
- unselectedIconColor -
-
- hoverBackgroundColor (+55% of lightness) -
-
- pressedBackgroundColor (+50% of lightness) - - - - Accent color - - selectedUnderlineColor - - - - - ), - }, - { - title: "Paginator", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Base color - - backgroundColor - - - - Font color - - fontColor - - - - - ), - }, - { - title: "Progress bar", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Base color - - totalLineColor - - - - Accent color - - trackLineColor - - - - Font color - - labelFontColor -
-
- valueFontColor -
-
- helperTextFontColor - - - - Overlay color - - overlayColor - - - - Overlay font color - - overlayFontColor - - - - - ), - }, - { - title: "Quick Nav", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Accent color - - hoverFontColor - - - - Font color - - fontColor - - - - - ), - }, - { - title: "Radio Group", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Base color - - radioInputColor -
-
- hoverRadioInputColor (-10% lightness) -
-
- activeRadioInputColor (-25% lightness) - - - - Font color - - labelFontColor -
-
- helperTextFontColor -
-
- radioInputLabelFontColor - - - - - ), - }, - { - title: "Select", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Selected option background color - - selectedListOptionBackgroundColor -
-
- selectedHoverListOptionBackgroundColor (-5% of lightness) -
-
- selectedActiveListOptionBackgroundColor (-15% of lightness) - - - - Font color - - valueFontColor -
-
- labelFontColor -
-
- helperTextFontColor -
-
- placeholderFontColor (+30% of lightness) -
-
- collapseIndicatorColor - - - - Option font color - - listOptionFontColor -
-
- listOptionIconColor - - - - Hover border color - - hoverInputBorderColor - - - - - ), - }, - { - title: "Sidenav", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Base color - - backgroundColor - - - - - ), - }, - { - title: "Slider", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Base color - - thumbBackgroundColor -
-
- focusThumbBackgroundColor -
-
- tickBackgroundColor -
-
- trackLineColor -
-
- hoverThumbBackgroundColor (-15% of lightness) -
-
- activeThumbBackgroundColor (-15% of lightness) - - - - Total line color - - totalLineColor - - - - Font color - - labelFontColor -
-
- helperTextFontColor -
-
- limitValuesFontColor - - - - - ), - }, - { - title: "Spinner", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Base color - - totalCircleColor - - - - Accent color - - trackCircleColor - - - - Font color - - labelFontColor -
-
- progressValueFontColor - - - - Overlay color - - trackCircleColorOverlay - - - - Overlay font color - - overlayLabelFontColor -
-
- overlayProgressValueFontColor - - - - - ), - }, - { - title: "Switch", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Checked base color - - checkedTrackBackgroundColor -
-
- disabledCheckedTrackBackgroundColor (+57% of lightness) - - - - Font color - - labelFontColor - - - - - ), - }, - { - title: "Table", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Base color - - headerBackgroundColor -
-
- actionIconColor -
-
- hoverActionIconColor -
-
- focusActionIconColor -
-
- activeActionIconColor - - - - Header font color - - headerFontColor -
-
- sortIconColor - - - - Cell font color - - dataFontColor - - - - - ), - }, - { - title: "Tabs", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Base color - - selectedFontColor -
-
- selectedIconColor -
-
- selectedUnderlineColor -
-
- focusOutline -
-
- hoverBackgroundColor (+57% of lightness) -
-
- pressedBackgroundColor (+52% of lightness) - - - - - ), - }, - { - title: "Tag", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Font color - - fontColor - - - - Icon color - - iconColor - - - - - ), - }, - { - title: "Text input", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Font color - - labelFontColor -
-
- helperTextFontColor -
-
- valueFontColor -
-
- actionIconColor -
-
- hoverActionIconColor -
-
- focusActionIconColor -
-
- activeActionIconColor -
-
- suffixColor (+40% of lightness) -
-
- prefixColor (+40% of lightness) -
-
- placeholderFontColor (+30% of lightness) - - - - Hover border color - - hoverBorderColor - - - - - ), - }, - { - title: "Textarea", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Font color - - labelFontColor -
-
- helperTextFontColor -
-
- valueFontColor -
-
- placeholderFontColor (+30% of lightness) - - - - Hover border color - - hoverBorderColor - - - - - ), - }, - { - title: "Toggle group", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Selected base color - - selectedBackgroundColor -
-
- unselectedActiveBackgroundColor -
-
- selectedHoverBackgroundColor (-8% of lightness) -
-
- selectedActiveBackgroundColor (-18% of lightness) -
-
- selectedDisabledBackgroundColor (+57% of lightness) -
-
- selectedDisabledFontColor (+42% of lightness) - - - - Selected font color - - selectedFontColor - - - - Unselected base color - - unselectedBackgroundColor -
-
- unselectedHoverBackgroundColor (-10% of lightness) - - - - Unselected font color - - unselectedFontColor - - - - - ), - }, - { - title: "Wizard", - content: ( - - - - Theme Input - Tokens (calculation) - - - - - Base color - - selectedStepBackgroundColor -
-
- selectedStepBorderColor - - - - Selected step font color - - selectedStepFontColor - - - - Font color - - visitedLabelFontColor -
-
- selectedLabelFontColor -
-
- visitedHelperTextFontColor -
-
- selectedHelperTextFontColor -
-
- unvisitedStepBorderColor (+40% of lightness) -
-
- unvisitedStepFontColor (+40% of lightness) -
-
- unvisitedLabelFontColor (+40% of lightness) -
-
- unvisitedHelperTextFontColor (+40% of lightness) - - - - - ), - }, - { - title: "Example", - content: ( - <> - Finally, here you can see an example of an opinionated theme object: - - 
{JSON.stringify(bloomTheme, null, " ")}
- - - More examples can be found in the{" "} - - Halstack Provider section - - . - - - ), - }, - ], - }, - ], - }, - { - title: "Advanced theme", - content: ( - <> - - This theming strategy lets you change most of the design decisions of the design system (all the design - tokens), trying to be as little opinionated as possible. Have in mind that it is impossible to make the - components 100% configurable without writing actual code, since some design decisions are structural to - the component. The list of configurable properties is large, and it applies at the component level. - - - We strongly recommend using the{" "} - - advanced theme generator - {" "} - to create the theme, but you can also create it yourself from scratch. - - ), - }} - closable={false} - /> - - Below is an example of a default advanced theme. The number of configurable properties is significantly - higher than in the previous strategy. - - - 
{JSON.stringify(defaultAdvancedTheme, null, " ")}
- - - More examples can be found in the{" "} - - Halstack Provider section - - . - - - ), - }, - ], - }, -]; - -const Themes = () => { - return ( - - - - - - - - - - - - ); -}; - -export default Themes; diff --git a/apps/website/screens/principles/themes/examples/bloomTheme.ts b/apps/website/screens/principles/themes/examples/bloomTheme.ts deleted file mode 100644 index 461419993b..0000000000 --- a/apps/website/screens/principles/themes/examples/bloomTheme.ts +++ /dev/null @@ -1,108 +0,0 @@ -export default { - accordion: { - accentColor: "#1b75bb", - fontColor: "#666666", - }, - button: { - baseColor: "#1b75bb", - primaryFontColor: "#ffffff", - secondaryHoverFontColor: "#ffffff", - }, - checkbox: { - baseColor: "#1b75bb", - checkColor: "#000000", - fontColor: "#000000", - }, - chip: { - baseColor: "#e6e6e6", - fontColor: "#000000", - }, - dateInput: { - selectedDateBackgroundColor: "#1b75bb", - selectedDateFontColor: "#ffffff", - }, - dropdown: { - baseColor: "#ffffff", - fontColor: "#000000", - optionFontColor: "#000000", - }, - fileInput: { - fontColor: "#000000", - }, - footer: { - baseColor: "#1b75bb", - fontColor: "#ffffff", - accentColor: "#0095ff", - logo: "https://assure.proxy.lambda/image/image_1674206626901.jpg", - }, - header: { - baseColor: "#ffffff", - accentColor: "#000000", - fontColor: "#000000", - menuBaseColor: "#ffffff", - hamburgerColor: "#000000", - logo: "https://assure.proxy.lambda/image/image_1674206652560.jpg", - logoResponsive: "https://assure.proxy.lambda/image/image_1674206660896.jpg", - contentColor: "#000000", - }, - paginator: { - baseColor: "#eeeeee", - fontColor: "#000000", - }, - progressBar: { - accentColor: "#8bc53f", - baseColor: "#cecece", - fontColor: "#000000", - }, - quickNav: { - fontColor: "#666666", - accentColor: "#1b75bb", - }, - radioGroup: { - baseColor: "#000000", - fontColor: "#000000", - }, - select: { - selectedOptionBackgroundColor: "#d9d9d9", - fontColor: "#000000", - optionFontColor: "#000000", - }, - sidenav: { - baseColor: "#F2F2F2", - }, - slider: { - baseColor: "#0067b3", - fontColor: "#000000", - }, - spinner: { - accentColor: "#8bc53f", - baseColor: "#ffffff", - fontColor: "#000000", - }, - switch: { - checkedBaseColor: "#1b75bb", - fontColor: "#000000", - }, - table: { - baseColor: "#f2f7f6", - headerFontColor: "#000000", - cellFontColor: "#000000", - }, - tabs: { - baseColor: "#1b75bb", - }, - textInput: { - fontColor: "#000000", - }, - toggleGroup: { - selectedBaseColor: "#8bc53f", - selectedFontColor: "#ffffff", - unselectedBaseColor: "#e6e6e6", - unselectedFontColor: "#808285", - }, - wizard: { - baseColor: "#1b75bb", - fontColor: "#000000", - selectedFontColor: "#ffffff", - }, -}; diff --git a/apps/website/screens/principles/themes/examples/opinionatedTheme.ts b/apps/website/screens/principles/themes/examples/opinionatedTheme.ts deleted file mode 100644 index 42b0147307..0000000000 --- a/apps/website/screens/principles/themes/examples/opinionatedTheme.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { HalstackProvider, DxcTextInput, DxcInset, DxcAccordion } from "@dxc-technology/halstack-react"; - -const code = `() => { - const customTheme = { - "accordion": { - "accentColor": "#fabada", - "titleFontColor": "#333333", - "subLabelFontColor": "#666666", - "assistiveTextFontColor": "#999999" - }, - textInput: { - fontColor: "#f80808", - }, - }; - - return ( - - - - - - - - - - - - ); -}`; - -const scope = { - HalstackProvider, - DxcTextInput, - DxcInset, - DxcAccordion, -}; - -export default { code, scope }; diff --git a/apps/website/screens/principles/typography/TypographyPageLayout.tsx b/apps/website/screens/principles/typography/TypographyPageLayout.tsx index 5d3871838a..fa694f5f1c 100644 --- a/apps/website/screens/principles/typography/TypographyPageLayout.tsx +++ b/apps/website/screens/principles/typography/TypographyPageLayout.tsx @@ -8,16 +8,17 @@ const TypographyPageHeading = ({ children }: { children: ReactNode }) => { { label: "Code", path: "/principles/typography" }, { label: "Usage", path: "/principles/typography/usage" }, ]; + return ( - + - - + + This section explains and shows examples of all the typographic variables included in Halstack Design System. - + {children} diff --git a/apps/website/screens/principles/typography/code/TypographyCodePage.tsx b/apps/website/screens/principles/typography/code/TypographyCodePage.tsx index 7b88314245..d3cfbe357d 100644 --- a/apps/website/screens/principles/typography/code/TypographyCodePage.tsx +++ b/apps/website/screens/principles/typography/code/TypographyCodePage.tsx @@ -1,4 +1,3 @@ -import Code from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; import QuickNavContainer from "@/common/QuickNavContainer"; @@ -33,15 +32,13 @@ const sections = [ }, ]; -const TypographyCodePage = () => { - return ( - - - - - - - ); -}; +const TypographyCodePage = () => ( + + + + + + +); export default TypographyCodePage; diff --git a/apps/website/screens/principles/typography/code/examples/bulletedListBasicUsage.js b/apps/website/screens/principles/typography/code/examples/bulletedListBasicUsage.js index db69d7ddf9..c94c686152 100644 --- a/apps/website/screens/principles/typography/code/examples/bulletedListBasicUsage.js +++ b/apps/website/screens/principles/typography/code/examples/bulletedListBasicUsage.js @@ -6,7 +6,7 @@ import { const code = `() => { return ( - + Code Usage diff --git a/apps/website/screens/principles/typography/code/examples/headingBasicUsage.js b/apps/website/screens/principles/typography/code/examples/headingBasicUsage.js index 322d244c3c..af3fab67d4 100644 --- a/apps/website/screens/principles/typography/code/examples/headingBasicUsage.js +++ b/apps/website/screens/principles/typography/code/examples/headingBasicUsage.js @@ -2,7 +2,7 @@ import { DxcHeading, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - + ); diff --git a/apps/website/screens/principles/typography/code/examples/paragraphBasicUsage.js b/apps/website/screens/principles/typography/code/examples/paragraphBasicUsage.js index 5f8a98065f..1dc8b9014a 100644 --- a/apps/website/screens/principles/typography/code/examples/paragraphBasicUsage.js +++ b/apps/website/screens/principles/typography/code/examples/paragraphBasicUsage.js @@ -2,7 +2,7 @@ import { DxcParagraph, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id tortor sit amet velit auctor cursus id eget nisl. Vivamus luctus egestas eros, diff --git a/apps/website/screens/principles/typography/code/examples/typographyBasicUsage.js b/apps/website/screens/principles/typography/code/examples/typographyBasicUsage.js index bc886389e2..08e2379150 100644 --- a/apps/website/screens/principles/typography/code/examples/typographyBasicUsage.js +++ b/apps/website/screens/principles/typography/code/examples/typographyBasicUsage.js @@ -2,7 +2,7 @@ import { DxcInset, DxcTypography } from "@dxc-technology/halstack-react"; const code = `() => { return ( - + This is a very basic example of the use of the DxcTypography component. diff --git a/apps/website/screens/principles/typography/usage/TypographyUsagePage.tsx b/apps/website/screens/principles/typography/usage/TypographyUsagePage.tsx index 8b0034a9ea..365a951909 100644 --- a/apps/website/screens/principles/typography/usage/TypographyUsagePage.tsx +++ b/apps/website/screens/principles/typography/usage/TypographyUsagePage.tsx @@ -55,15 +55,13 @@ const sections = [ ), }, ]; -const TypographyUsagePage = () => { - return ( - - - - - - - ); -}; +const TypographyUsagePage = () => ( + + + + + + +); export default TypographyUsagePage; diff --git a/apps/website/screens/theme-generator/ImportDialog.tsx b/apps/website/screens/theme-generator/ImportDialog.tsx deleted file mode 100644 index 8d457733dd..0000000000 --- a/apps/website/screens/theme-generator/ImportDialog.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import { useState } from "react"; -import { DxcButton, DxcDialog, DxcTextarea, DxcHeading, DxcFlex } from "@dxc-technology/halstack-react"; -import { deepMerge } from "./utils"; -import ImportDialogProps, { IndexedThemeInput, IndexedTheme } from "./types"; -import styled from "styled-components"; - -const isArrayIncluded = (object1: {}, object2: {}) => - Object.keys(object1).every((element) => Object.keys(object2).includes(element)); - -const validateInputTheme = (json: string, customThemeSchema: IndexedTheme) => { - let inputTheme: IndexedThemeInput = {}; - let errMessage = ""; - - try { - inputTheme = JSON.parse(json); - const inputComponentNames = Object.keys(inputTheme); - const schemaComponentNames = Object.keys(customThemeSchema); - - inputComponentNames.forEach((componentName) => { - const errorMessage = - (!schemaComponentNames.includes(componentName) && "Invalid component name.") || - (!isArrayIncluded(inputTheme[componentName]!, customThemeSchema[componentName] ?? {}) && - `Invalid theme input name in the ${componentName} component.`); - - if (errorMessage) throw new Error(errorMessage); - }); - } catch (e: any) { - errMessage = e.name === "SyntaxError" ? "Invalid JSON input." : e.message; - } - return { inputTheme, errMessage }; -}; - -const ImportDialog = ({ customThemeSchema, setCustomTheme, setDialogVisible }: ImportDialogProps): JSX.Element => { - const [value, setValue] = useState(""); - const [validationErrorMessage, setValidationErrorMessage] = useState(""); - - const onChange = ({ value }: { value: string }) => { - setValue(value); - if (validationErrorMessage !== "") setValidationErrorMessage(""); - }; - const closeDialog = () => { - setDialogVisible(false); - setValue(""); - setValidationErrorMessage(""); - }; - const validate = () => { - const { inputTheme, errMessage } = validateInputTheme(value, customThemeSchema); - - if (errMessage === "") { - setCustomTheme((prevTheme: IndexedTheme) => deepMerge({}, prevTheme, inputTheme)); - closeDialog(); - } else setValidationErrorMessage(errMessage); - }; - - return ( - - - - - - - - - - - ); -}; - -const ImportDialogContainer = styled.div` - display: flex; - flex-direction: column; - gap: 1.5rem; - padding: 2rem; - height: 80vh; - - div:nth-child(2) { - height: 100%; - } - > div > textarea { - flex-grow: 1; - } -`; - -export default ImportDialog; diff --git a/apps/website/screens/theme-generator/ThemeGenerator.tsx b/apps/website/screens/theme-generator/ThemeGenerator.tsx deleted file mode 100644 index e182c1eaa5..0000000000 --- a/apps/website/screens/theme-generator/ThemeGenerator.tsx +++ /dev/null @@ -1,157 +0,0 @@ -import { useState, useCallback } from "react"; -import { - DxcApplicationLayout, - DxcButton, - DxcInset, - DxcFlex, - DxcHeading, - DxcBreadcrumbs, -} from "@dxc-technology/halstack-react"; -import { useRouter } from "next/router"; -import opinionatedTheme from "@/common/themes/opinionated-theme.json"; -import advancedTheme from "@/common/themes/advanced-theme.json"; -import ComponentPreview from "./components/ComponentPreview"; -import { downloadFile, makeReadableSidenav } from "./utils"; -import ThemeInputsConfig from "./components/ThemeInputsConfig"; -import ImportDialog from "./ImportDialog"; -import defaultSchema from "./themes/schemas/opinionated.schema.json"; -import advancedSchema from "./themes/schemas/advanced.schema.json"; -import icons from "./images/GlobalActionsIcons"; -import SidenavLogo from "@/common/sidenav/SidenavLogo"; -import styled from "styled-components"; -import { IndexedTheme } from "./types"; - -const ThemeGenerator = () => { - const router = useRouter(); - const pages = router.asPath.split("/"); - const type = pages[pages.length - 2]; - - const [customTheme, setCustomTheme] = useState( - type === "advanced-theme" ? advancedTheme : opinionatedTheme - ); - const customThemeSchema: IndexedTheme = type === "advanced-theme" ? advancedSchema : defaultSchema; - - const [currentComponent, setCurrentComponent] = useState("accordion"); - const [isDialogVisible, setDialogVisible] = useState(false); - - const setComponentProperty = useCallback( - (propertyName: string, propertyValue: string) => { - setCustomTheme((prevTheme) => ({ - ...prevTheme, - [currentComponent]: { - ...prevTheme[currentComponent], - [propertyName]: propertyValue, - }, - })); - }, - [currentComponent] - ); - - return ( - - { - router.push(href); - }} - /> - - - } - > - - - - - - { - setCustomTheme(type === "advanced-theme" ? advancedTheme : opinionatedTheme); - }} - icon={icons.reset} - size={{ width: "fillParent" }} - /> - { - setDialogVisible(true); - }} - icon={icons.import} - size={{ width: "fillParent" }} - /> - { - downloadFile(customTheme); - }} - icon={icons.export} - size={{ width: "fillParent" }} - /> - - - - - - - {Object.keys(type === "advanced-theme" ? advancedTheme : opinionatedTheme).map((component, index) => ( - { - setCurrentComponent(component); - }} - > - {makeReadableSidenav(component)} - - ))} - - - - } - > - - - - - - {isDialogVisible && ( - - )} - - - ); -}; - -const Breadcrumbs = styled.ol` - display: flex; - list-style-type: none; - padding-left: 0; - margin: 0; - - > li:not(:first-child):before { - content: ">"; - padding: 0 0.5rem; - } -`; - -export default ThemeGenerator; diff --git a/apps/website/screens/theme-generator/components/ComponentPreview.tsx b/apps/website/screens/theme-generator/components/ComponentPreview.tsx deleted file mode 100644 index b693475134..0000000000 --- a/apps/website/screens/theme-generator/components/ComponentPreview.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import styled from "styled-components"; -import componentsPreview from "./ComponentsPreviewMap"; -import { makeReadableSidenav } from "../utils"; -import { ErrorBoundary } from "react-error-boundary"; -import { useRouter } from "next/router"; -import { DxcHeading, DxcFlex, DxcAlert, HalstackProvider } from "@dxc-technology/halstack-react"; - -type ComponentPreviewProps = { - customTheme: object; - componentId: string; -}; - -const ComponentPreview = ({ customTheme, componentId }: ComponentPreviewProps) => { - const { asPath } = useRouter(); - const pages = asPath.split("/"); - const type = pages[pages.length - 2]; - - const preview = componentsPreview.find((component) => component.name === componentId); - - return ( - - - ( - - - - )} - resetKeys={[customTheme]} - > - - {preview != null && } - - - - ); -}; - -const ComponentPreviewContainer = styled.div` - display: flex; - flex-direction: column; - flex-grow: 1; - gap: 2.25rem; - padding: 3.5rem 8% 8% 8%; - overflow-x: auto; - - /* width */ - ::-webkit-scrollbar { - width: 8px; - height: 8px; - } - - /* Track */ - ::-webkit-scrollbar-track { - background: #d9d9d9; - border-radius: 26px; - } - - /* Handle */ - ::-webkit-scrollbar-thumb { - background: #666666; - border-radius: 26px; - } - - /* Handle on hover */ - ::-webkit-scrollbar-thumb:hover { - background: #555; - } -`; - -export default ComponentPreview; diff --git a/apps/website/screens/theme-generator/components/ComponentsPreviewMap.ts b/apps/website/screens/theme-generator/components/ComponentsPreviewMap.ts deleted file mode 100644 index 5d52f5452e..0000000000 --- a/apps/website/screens/theme-generator/components/ComponentsPreviewMap.ts +++ /dev/null @@ -1,180 +0,0 @@ -import ButtonPreview from "./previews/Button"; -import CheckboxPreview from "./previews/Checkbox"; -import ChipPreview from "./previews/Chip"; -import TablePreview from "./previews/Table"; -import SwitchPreview from "./previews/Switch"; -import SliderPreview from "./previews/Slider"; -import PaginatorPreview from "./previews/Paginator"; -import DropdownPreview from "./previews/Dropdown"; -import AccordionPreview from "./previews/Accordion"; -import ProgressBarPreview from "./previews/ProgressBar"; -import WizardPreview from "./previews/Wizard"; -import SpinnerPreview from "./previews/Spinner"; -import TabsPreview from "./previews/Tabs"; -import ToggleGroupPreview from "./previews/ToggleGroup"; -import AlertPreview from "./previews/Alert"; -import LinkPreview from "./previews/Link"; -import HeadingPreview from "./previews/Heading"; -import DialogPreview from "./previews/Dialog"; -import TagPreview from "./previews/Tag"; -import CardPreview from "./previews/Card"; -import DateInputPreview from "./previews/DateInput"; -import TextInputPreview from "./previews/TextInput"; -import FileInputPreview from "./previews/FileInput"; -import TextareaPreview from "./previews/Textarea"; -import SelectPreview from "./previews/Select"; -import RadioGroupPreview from "./previews/RadioGroup"; -import QuickNavPreview from "./previews/QuickNav"; -import SidenavPreview from "./previews/Sidenav"; -import FooterPreview from "./previews/Footer"; -import HeaderPreview from "./previews/Header"; -import BulletedListPreview from "./previews/BulletedList"; -import ParagraphPreview from "./previews/Paragraph"; -import NavTabsPreview from "./previews/NavTabs"; -import ContextualMenu from "./previews/ContextualMenu"; -import DataGridPreview from "./previews/DataGrid"; - -const SampleComponents = [ - { - name: "accordion", - preview: AccordionPreview, - }, - { - name: "alert", - preview: AlertPreview, - }, - { - name: "bulletedList", - preview: BulletedListPreview, - }, - { - name: "button", - preview: ButtonPreview, - }, - { - name: "card", - preview: CardPreview, - }, - { - name: "checkbox", - preview: CheckboxPreview, - }, - { - name: "chip", - preview: ChipPreview, - }, - { - name: "contextualMenu", - preview: ContextualMenu, - }, - { - name: "dataGrid", - preview: DataGridPreview, - }, - { - name: "dateInput", - preview: DateInputPreview, - }, - { - name: "dialog", - preview: DialogPreview, - }, - { - name: "dropdown", - preview: DropdownPreview, - }, - { - name: "header", - preview: HeaderPreview, - }, - { - name: "fileInput", - preview: FileInputPreview, - }, - { - name: "footer", - preview: FooterPreview, - }, - { - name: "heading", - preview: HeadingPreview, - }, - { - name: "link", - preview: LinkPreview, - }, - { - name: "navTabs", - preview: NavTabsPreview, - }, - { - name: "textarea", - preview: TextareaPreview, - }, - { - name: "paginator", - preview: PaginatorPreview, - }, - { - name: "paragraph", - preview: ParagraphPreview, - }, - { - name: "progressBar", - preview: ProgressBarPreview, - }, - { - name: "quickNav", - preview: QuickNavPreview, - }, - { - name: "radioGroup", - preview: RadioGroupPreview, - }, - { - name: "select", - preview: SelectPreview, - }, - { - name: "sidenav", - preview: SidenavPreview, - }, - { - name: "slider", - preview: SliderPreview, - }, - { - name: "spinner", - preview: SpinnerPreview, - }, - { - name: "switch", - preview: SwitchPreview, - }, - { - name: "tabs", - preview: TabsPreview, - }, - { - name: "table", - preview: TablePreview, - }, - { - name: "tag", - preview: TagPreview, - }, - { - name: "textInput", - preview: TextInputPreview, - }, - { - name: "toggleGroup", - preview: ToggleGroupPreview, - }, - { - name: "wizard", - preview: WizardPreview, - }, -]; - -export default SampleComponents; diff --git a/apps/website/screens/theme-generator/components/Mode.tsx b/apps/website/screens/theme-generator/components/Mode.tsx deleted file mode 100644 index b883eeced3..0000000000 --- a/apps/website/screens/theme-generator/components/Mode.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { ReactNode } from "react"; -import styled from "styled-components"; - -type ModeProps = { - text: string; - mode?: "light" | "dark"; - children: ReactNode; -}; -const Mode = ({ text, mode = "light", children }: ModeProps): JSX.Element => ( - - {text} - {children} - -); - -const ModeContainer = styled.div<{ mode: string }>` - display: flex; - flex-direction: column; - gap: 2rem; - background-color: ${(props) => (props.mode === "dark" ? "#000000" : "transparent")}; -`; - -const Title = styled.span<{ mode: string }>` - font: Bold 12px/17px Open Sans; - line-height: 18px; - letter-spacing: 1.88px; - color: ${(props) => (props.mode === "dark" ? "#FFFFFF" : "#000000")}; - text-transform: uppercase; -`; - -const PreviewContainer = styled.div` - display: flex; - gap: 5rem; - padding-left: 1rem; -`; - -export default Mode; diff --git a/apps/website/screens/theme-generator/components/ThemeInput.tsx b/apps/website/screens/theme-generator/components/ThemeInput.tsx deleted file mode 100644 index e1efdc1746..0000000000 --- a/apps/website/screens/theme-generator/components/ThemeInput.tsx +++ /dev/null @@ -1,152 +0,0 @@ -import styled from "styled-components"; -import ImageConfig from "./widgets/ImageConfig"; -import ColorPicker from "./widgets/ColorPicker"; -import DefaultInput from "./widgets/DefaultInput"; -import LengthInput from "./widgets/LengthInput"; -import FontWeightInput from "./widgets/FontWeightInput"; -import FontStyleInput from "./widgets/FontStyleInput"; -import TextTransformInput from "./widgets/TextTransformInput"; -import BorderStyleInput from "./widgets/BorderStyleInput"; -import FontFamily from "./widgets/FontFamily"; -import BorderWidthInput from "./widgets/BorderWidthInput"; -import AlphaValueInput from "./widgets/AlphaValueInput"; -import IntegerInput from "./widgets/IntegerInput"; -import TextAlignInput from "./widgets/TextAlignInput"; -import { makeReadable } from "../utils"; -import { memo } from "react"; - -type ThemeInputProps = { - propertyName: string; - propertyValue: string; - onChangeCustomTheme: (propertyName: string, propertyValue: string) => void; - tokenType: string; -}; - -const ThemeInput = ({ propertyName, propertyValue, onChangeCustomTheme, tokenType }: ThemeInputProps): JSX.Element => ( - - {makeReadable(propertyName)} - {(() => { - switch (tokenType) { - case "color": - return ( - - ); - case "image": - return ( - - ); - case "length": - return ( - - ); - case "fFamily": - return ( - - ); - case "fWeight": - return ( - - ); - case "fStyle": - return ( - - ); - case "fTextTransform": - return ( - - ); - case "bStyle": - return ( - - ); - case "bWidth": - return ( - - ); - case "alphaValue": - return ( - - ); - case "integer": - return ( - - ); - case "textAlign": - return ( - - ); - default: - return ( - - ); - } - })()} - -); - -const ThemeInputContainer = styled.div` - display: grid; - column-gap: 0.375rem; - grid-template: 1fr / 1fr 1fr; -`; - -const PropertyName = styled.span` - align-self: center; - font: normal 13px Open Sans; - color: #000000; - line-height: 14px; -`; - -export default memo(ThemeInput); diff --git a/apps/website/screens/theme-generator/components/ThemeInputsConfig.tsx b/apps/website/screens/theme-generator/components/ThemeInputsConfig.tsx deleted file mode 100644 index 6d22aa91c5..0000000000 --- a/apps/website/screens/theme-generator/components/ThemeInputsConfig.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { DxcInset } from "@dxc-technology/halstack-react"; -import styled from "styled-components"; -import { IndexedThemeInput } from "../types"; -import ThemeInput from "./ThemeInput"; - -type ThemeInputsConfigProps = { - componentInputs: IndexedThemeInput; - componentInputsTypes: IndexedThemeInput; - onChangeCustomTheme: (_propertyName: string, _propertyValue: string) => void; -}; - -const ThemeInputsConfig = ({ - componentInputs, - componentInputsTypes, - onChangeCustomTheme, -}: ThemeInputsConfigProps): JSX.Element => ( - - - Theme Inputs - - {Object.keys(componentInputs).map((propertyName, index) => ( - - ))} - - - -); - -const ThemeInputsConfigContainer = styled.div` - position: sticky; - top: calc(64px + 24px); // header height + padding - - @media only screen and (max-width: 45rem) { - top: calc(116px + 24px); // (header height + visibility toggle) + padding - } - - display: flex; - flex-direction: column; - width: 400px; - height: calc(100vh - 112px); - background-color: white; - box-shadow: rgb(0 0 0 / 16%) 0px 3px 6px; -`; - -const Title = styled.h3` - font-size: 16px; - font-weight: 600; - color: #5f249f; - margin: 0px; - padding: 12px 24px; - border-bottom: 1px solid rgb(191, 191, 191); -`; - -const ThemeInputsList = styled.div` - display: flex; - flex-direction: column; - gap: 8px; - padding: 25px; - overflow: hidden auto; - - ::-webkit-scrollbar { - width: 3px; - height: 3px; - } - ::-webkit-scrollbar-track { - background-color: rgb(214, 214, 214); - border-radius: 26px; - } - ::-webkit-scrollbar-thumb { - background-color: rgb(102, 102, 102); - border-radius: 26px; - } - ::-webkit-scrollbar-thumb:hover { - background: #555; - } -`; - -export default ThemeInputsConfig; diff --git a/apps/website/screens/theme-generator/components/previews/Accordion.tsx b/apps/website/screens/theme-generator/components/previews/Accordion.tsx deleted file mode 100644 index 77d1dc2665..0000000000 --- a/apps/website/screens/theme-generator/components/previews/Accordion.tsx +++ /dev/null @@ -1,125 +0,0 @@ -import { useState } from "react"; -import { DxcAccordion, DxcBadge, DxcInset, DxcStatusLight } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const Accordion = () => { - const [indexAccordion, setIndexAccordion] = useState(0); - - const onActiveChange = (index: number) => { - setIndexAccordion((currentIndex) => (currentIndex === index ? -1 : index)); - }; - - return ( - - - - - To edit your profile you need to go to Settings and click on Profile. - - - - - - - To edit your profile you need to go to Settings and click on Profile. - - - - - - }} - statusLight={} - > - To edit your profile you need to go to Settings and click on Profile. - - - - - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet - blandit leo lobortis eget. - - - - }} - statusLight={} - > - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit - leo lobortis eget. - - - - - - - }} - statusLight={} - > - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit - leo lobortis eget. - - - }} - > - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit - leo lobortis eget. - - - }} - statusLight={} - > - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit - leo lobortis eget. - - - }} - > - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit - leo lobortis eget. - - - - - - ); -}; - -export default Accordion; diff --git a/apps/website/screens/theme-generator/components/previews/Alert.tsx b/apps/website/screens/theme-generator/components/previews/Alert.tsx deleted file mode 100644 index 35d3292b6d..0000000000 --- a/apps/website/screens/theme-generator/components/previews/Alert.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { useState } from "react"; -import { DxcAlert, DxcButton } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const messages = [ - { text: "Please read the documents carefully before the submission of the data.", onClose: () => {} }, - { text: "Your document has been saved successfuly.", onClose: () => {} }, - { text: "Your document as been auto-saved.", onClose: () => {} }, - { text: "You have unsaved changes in your document.", onClose: () => {} }, -]; - -const Alert = () => { - const [isVisible, changeIsVisible] = useState(false); - const handleVisibility = () => { - changeIsVisible(!isVisible); - }; - - return ( - - - {} }} - secondaryAction={{ label: "Secondary action", onClick: () => {} }} - /> - - - {} }} - secondaryAction={{ label: "Secondary action", onClick: () => {} }} - /> - - - {} }} - secondaryAction={{ label: "Secondary action", onClick: () => {} }} - /> - - - {} }} - secondaryAction={{ label: "Secondary action", onClick: () => {} }} - /> - - - - {isVisible && ( - {} }} - secondaryAction={{ label: "Secondary action", onClick: () => {} }} - /> - )} - - - ); -}; - -export default Alert; diff --git a/apps/website/screens/theme-generator/components/previews/BulletedList.tsx b/apps/website/screens/theme-generator/components/previews/BulletedList.tsx deleted file mode 100644 index 6f688c3d56..0000000000 --- a/apps/website/screens/theme-generator/components/previews/BulletedList.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { DxcBulletedList } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const checkIcon = ( - - - -); - -const doubleCheckIcon = ( - - - -); - -const BulletedList = () => ( - - - - Code - - Usage - - Usage for admins. - Usage for non-admins. - - - Specifications - - - - - Code - - Usage - - Usage for admins. - Usage for non-admins. - - - Specifications - - - -); - -export default BulletedList; diff --git a/apps/website/screens/theme-generator/components/previews/Button.tsx b/apps/website/screens/theme-generator/components/previews/Button.tsx deleted file mode 100644 index 8d4a6329ce..0000000000 --- a/apps/website/screens/theme-generator/components/previews/Button.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import { DxcButton, DxcFlex } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const Button = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default Button; diff --git a/apps/website/screens/theme-generator/components/previews/Card.tsx b/apps/website/screens/theme-generator/components/previews/Card.tsx deleted file mode 100644 index d805cf25a2..0000000000 --- a/apps/website/screens/theme-generator/components/previews/Card.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { DxcCard, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const Card = () => ( - - - - - Lorem Ipsum - - - - -); - -export default Card; diff --git a/apps/website/screens/theme-generator/components/previews/Checkbox.tsx b/apps/website/screens/theme-generator/components/previews/Checkbox.tsx deleted file mode 100644 index 8b82a5f802..0000000000 --- a/apps/website/screens/theme-generator/components/previews/Checkbox.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { useState } from "react"; -import { DxcCheckbox } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const Checkbox = () => { - const [checked, changeChecked] = useState(false); - const onChange = (newValue: boolean) => { - changeChecked(newValue); - }; - - return ( - - - - - - - - - - - - - - - - - - ); -}; - -export default Checkbox; diff --git a/apps/website/screens/theme-generator/components/previews/Chip.tsx b/apps/website/screens/theme-generator/components/previews/Chip.tsx deleted file mode 100644 index 1b805e4dda..0000000000 --- a/apps/website/screens/theme-generator/components/previews/Chip.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { DxcChip } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const deleteIcon = ( - - - - -); - -const Chip = () => { - const onClick = () => { - console.log("click"); - }; - - return ( - - - - - - - - - - - - - - - - - - ); -}; - -export default Chip; diff --git a/apps/website/screens/theme-generator/components/previews/ContextualMenu.tsx b/apps/website/screens/theme-generator/components/previews/ContextualMenu.tsx deleted file mode 100644 index 77157c4e7d..0000000000 --- a/apps/website/screens/theme-generator/components/previews/ContextualMenu.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { DxcBadge, DxcContextualMenu } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const items = [ - { - title: "Section 1", - items: [ - { - label: "Grouped Item 1", - icon: "favorite", - items: [ - { label: "Item 1" }, - { - label: "Grouped Item 2", - items: [ - { - label: "Item 2", - icon: "bookmark", - badge: , - }, - { label: "Selected Item 3", selectedByDefault: true }, - ], - }, - ], - badge: , - }, - { label: "Item 4", icon: "key" }, - ], - }, - { - title: "Section 2", - items: [ - { label: "Item 5" }, - { - label: "Grouped Item 6", - items: [{ label: "Item 7" }, { label: "Item 8" }], - }, - { label: "Item 9" }, - ], - }, -]; - -const ContextualMenu = () => ( - - - - - -); - -export default ContextualMenu; diff --git a/apps/website/screens/theme-generator/components/previews/DataGrid.tsx b/apps/website/screens/theme-generator/components/previews/DataGrid.tsx deleted file mode 100644 index 07da45522f..0000000000 --- a/apps/website/screens/theme-generator/components/previews/DataGrid.tsx +++ /dev/null @@ -1,267 +0,0 @@ -import { ComponentProps, useState } from "react"; -import { DxcContainer, DxcDataGrid } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -type DataGridPropsType = ComponentProps; -type DataGridColumnsPropsType = DataGridPropsType["columns"]; -type DataGridRowsPropsType = DataGridPropsType["rows"]; -type DataGridActionsPropType = ComponentProps["actions"]; - -const actions: DataGridActionsPropType = [ - { - icon: "filled_edit", - title: "icon", - onClick: () => {}, - }, - { - icon: "filled_delete", - title: "icon", - onClick: () => {}, - disabled: true, - }, -]; - -const columns: DataGridColumnsPropsType = [ - { - key: "id", - label: "ID", - resizable: true, - sortable: true, - draggable: false, - alignment: "left", - }, - { - key: "task", - label: "Title", - resizable: true, - sortable: true, - draggable: true, - textEditable: true, - alignment: "left", - }, - { - key: "complete", - label: " % Complete", - resizable: true, - sortable: true, - draggable: true, - alignment: "right", - summaryKey: "label", - }, - { - key: "priority", - label: "Priority", - resizable: true, - draggable: true, - alignment: "center", - summaryKey: "total", - }, - { - key: "actions", - label: "Actions", - alignment: "center", - }, -]; - -const expandableRows = [ - { - id: 1, - task: "Task 1", - complete: 46, - priority: "High", - issueType: "Bug", - expandedContent: Custom content 1, - actions: , - }, - { - id: 2, - task: "Task 2", - complete: 51, - priority: "High", - issueType: "Epic", - expandedContent: Custom content 2, - actions: , - }, - { - id: 3, - task: "Task 3", - complete: 40, - priority: "High", - issueType: "Improvement", - expandedContent: Custom content 3, - actions: , - }, - { - id: 4, - task: "Task 4", - complete: 10, - priority: "High", - issueType: "Improvement", - expandedContent: Custom content 4, - actions: , - }, - { - id: 5, - task: "Task 5", - complete: 68, - priority: "High", - issueType: "Improvement", - expandedContent: Custom content 5, - actions: , - }, - { - id: 6, - task: "Task 6", - complete: 37, - priority: "High", - issueType: "Improvement", - expandedContent: Custom content 6, - actions: , - }, - { - id: 7, - task: "Task 7", - complete: 73, - priority: "Medium", - issueType: "Story", - expandedContent: Custom content 7, - actions: , - }, - { - id: 8, - task: "Task 8", - complete: 27, - priority: "Medium", - issueType: "Story", - expandedContent: Custom content 8, - actions: , - }, - { - id: 9, - task: "Task 9", - complete: 36, - priority: "Critical", - issueType: "Epic", - expandedContent: Custom content 9, - actions: , - }, -]; - -const childColumns: DataGridColumnsPropsType = [ - { - key: "name", - label: "Name", - resizable: true, - sortable: true, - alignment: "center", - }, - { - key: "value", - label: "Value", - resizable: true, - sortable: true, - draggable: true, - textEditable: true, - alignment: "right", - }, -]; - -const childRows: DataGridRowsPropsType = [ - { - name: "Root Node 1", - value: "1", - id: "a", - childRows: [ - { - name: "Child Node 1.1", - value: "1.1", - id: "aa", - childRows: [ - { - name: "Grandchild Node 1.1.1", - value: "1.1.1", - id: "aaa", - }, - { - name: "Grandchild Node 1.1.2", - value: "1.1.2", - id: "aab", - }, - ], - }, - { - name: "Child Node 1.2", - value: "1.2", - id: "ab", - }, - ], - }, - { - name: "Root Node 2", - value: "2", - id: "b", - childRows: [ - { - name: "Child Node 2.1", - value: "2.1", - id: "ba", - childRows: [ - { - name: "Grandchild Node 2.1.1", - value: "2.1.1", - id: "baa", - }, - ], - }, - { - name: "Child Node 2.2", - value: "2.2", - id: "bb", - }, - { - name: "Child Node 2.3", - value: "2.3", - id: "bc", - }, - ], - }, -] as DataGridRowsPropsType; - -const DataGridPreview = () => { - const [selectedRows, setSelectedRows] = useState((): Set => new Set()); - - return ( - - - - - - - - - - - - - - - - - - ); -}; - -export default DataGridPreview; diff --git a/apps/website/screens/theme-generator/components/previews/DateInput.tsx b/apps/website/screens/theme-generator/components/previews/DateInput.tsx deleted file mode 100644 index 687c766dc4..0000000000 --- a/apps/website/screens/theme-generator/components/previews/DateInput.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { DxcDateInput } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const DateInput = () => ( - - - - - -); - -export default DateInput; diff --git a/apps/website/screens/theme-generator/components/previews/Dialog.tsx b/apps/website/screens/theme-generator/components/previews/Dialog.tsx deleted file mode 100644 index ff3bf5929e..0000000000 --- a/apps/website/screens/theme-generator/components/previews/Dialog.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import { useState } from "react"; -import { - DxcDialog, - DxcButton, - DxcHeading, - DxcTextInput, - DxcFlex, - DxcParagraph, - DxcInset, -} from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const errorIcon = ( - - - -); - -const Dialog = () => { - const [isDefaultDialogVisible, setDefaultDialogVisible] = useState(false); - const [isModalDialogVisible, setModalDialogVisible] = useState(false); - const [isNoOverlayDialogVisible, setNoOverlayDialogVisible] = useState(false); - - const handleClickDefaultDialog = () => { - setDefaultDialogVisible(!isDefaultDialogVisible); - }; - const handleClickBackground = () => { - setModalDialogVisible(!isModalDialogVisible); - }; - const handleClickNoOverlay = () => { - setNoOverlayDialogVisible(!isNoOverlayDialogVisible); - }; - - return ( - - - - {isDefaultDialogVisible && ( - - - - - - - {errorIcon} - - - - Are you sure you want to delete the 3 selected documents? - - - - - - - - - )} - - - - {isModalDialogVisible && ( - - - - - - - - - - - - - - - - - )} - - - - {isNoOverlayDialogVisible && ( - - - An example of Dialog without overlay (darker background). - - - )} - - - ); -}; - -export default Dialog; diff --git a/apps/website/screens/theme-generator/components/previews/Dropdown.tsx b/apps/website/screens/theme-generator/components/previews/Dropdown.tsx deleted file mode 100644 index 936fccb94a..0000000000 --- a/apps/website/screens/theme-generator/components/previews/Dropdown.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import { DxcDropdown } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import facebookIcon from "../../images/FacebookIcon"; -import linkedinIcon from "../../images/LinkedinIcon"; -import xIcon from "../../images/XIcon"; -import PreviewContainer from "./PreviewContainer"; - -const options = [ - { - value: "1", - label: "Amazon", - }, - { - value: "2", - label: "Ebay", - }, - { - value: "3", - label: "Apple", - }, -]; - -const iconOptions = [ - { - value: "1", - label: "Facebook", - icon: facebookIcon, - }, - { - value: "2", - label: "X", - icon: xIcon, - }, - { - value: "3", - label: "Linkedin", - icon: linkedinIcon, - }, -]; - -const largeOptionsList = [ - { - value: "1", - label: "Example 1", - }, - { - value: "2", - label: "Example 2", - }, - { - value: "3", - label: "Example 3", - }, - { - value: "4", - label: "Example 4", - }, - { - value: "5", - label: "Example 5", - }, - { - value: "6", - label: "Example 6", - }, - { - value: "7", - label: "Example 7", - }, - { - value: "8", - label: "Example 8", - }, - { - value: "9", - label: "Example 9", - }, - { - value: "10", - label: "Example 10", - }, - { - value: "11", - label: "Example 11", - }, - { - value: "12", - label: "Example 12", - }, - { - value: "13", - label: "Example 13", - }, - { - value: "14", - label: "Example 14", - }, - { - value: "15", - label: "Example 15", - }, -]; - -const Dropdown = () => { - const selectOption = (value: string) => { - console.log(value); - }; - - return ( - - - - - - - - - - - - - ); -}; - -export default Dropdown; diff --git a/apps/website/screens/theme-generator/components/previews/FileInput.tsx b/apps/website/screens/theme-generator/components/previews/FileInput.tsx deleted file mode 100644 index 0520480f42..0000000000 --- a/apps/website/screens/theme-generator/components/previews/FileInput.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import { useState } from "react"; -import { DxcFileInput } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -type FileData = { - file: File; - error?: string; - preview?: string; -}; - -const FileInput = () => { - const [files, setFiles] = useState([]); - - const callbackFile = (files: FileData[]) => { - const updatedFiles = files.map((file: FileData, index: number) => - index === 1 ? { ...file, error: "Error message" } : { ...file } - ); - setFiles(updatedFiles); - }; - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default FileInput; diff --git a/apps/website/screens/theme-generator/components/previews/Footer.tsx b/apps/website/screens/theme-generator/components/previews/Footer.tsx deleted file mode 100644 index c4f158769c..0000000000 --- a/apps/website/screens/theme-generator/components/previews/Footer.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import { DxcApplicationLayout, DxcFlex, DxcInset, DxcLink } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const social = [ - { - href: "https://www.linkedin.com/company/dxctechnology", - logo: ( - - - - - - ), - title: "Linkedin", - }, - { - href: "https://x.com/dxctechnology", - logo: ( - - - - - ), - title: "X", - }, - { - href: "https://www.facebook.com/DXCTechnology/", - logo: ( - - - - - - ), - title: "Facebook", - }, -]; - -const bottom = [ - { - href: "https://www.linkedin.com/company/dxctechnology", - text: "Linkedin", - }, - { - href: "https://x.com/dxctechnology", - text: "X", - }, - { - href: "https://www.facebook.com/DXCTechnology/", - text: "Facebook", - }, -]; - -const Footer = () => ( - - - - - - Linkedin - - - - - -); - -export default Footer; diff --git a/apps/website/screens/theme-generator/components/previews/Header.tsx b/apps/website/screens/theme-generator/components/previews/Header.tsx deleted file mode 100644 index dbfe603ae9..0000000000 --- a/apps/website/screens/theme-generator/components/previews/Header.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { DxcApplicationLayout, DxcDropdown, DxcFlex, DxcLink, DxcParagraph } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; -import { ComponentProps } from "react"; - -type DropdownTypes = ComponentProps; - -const options: DropdownTypes["options"] = [ - { - value: "1", - label: "Home", - }, - { - value: "2", - label: "Settings", - }, - { - value: "3", - label: "Log out", - }, -]; - -const Header = () => ( - - - The responsive elements of the Header component (both the hamburger trigger and the responsive menu) will only - appear when the window is resized to a smaller size. Keep this in mind when testing your theme's input values. - - -
- - Link 1 - Link 2 - Link 3 - {}} - /> - - } - responsiveContent={() => ( -

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae eos saepe provident nihil exercitationem - laborum unde officiis. Eum unde cum quis soluta dolorum ratione, cumque harum amet quaerat vitae - consectetur. -

- )} - underlined - /> -
- - -); - -export default Header; diff --git a/apps/website/screens/theme-generator/components/previews/Heading.tsx b/apps/website/screens/theme-generator/components/previews/Heading.tsx deleted file mode 100644 index f31eb1ed5d..0000000000 --- a/apps/website/screens/theme-generator/components/previews/Heading.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { DxcHeading } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const Heading = () => ( - - - - - - - - - - - - - - - - - -); - -export default Heading; diff --git a/apps/website/screens/theme-generator/components/previews/Link.tsx b/apps/website/screens/theme-generator/components/previews/Link.tsx deleted file mode 100644 index c6a2c56337..0000000000 --- a/apps/website/screens/theme-generator/components/previews/Link.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { DxcLink, DxcParagraph } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const icon = ( - - - - - - - - -); - -const Link = () => ( - - - - This is a text with a{" "} - - Link - {" "} - to another page. - - - - - This is a text with a{" "} - - Link - {" "} - to another page. - - - - - This is a text with a{" "} - - disabled Link - - . - - - - - This is a{" "} - { - console.log("click"); - }} - > - link with action - - . - - - - - This is a text with an{" "} - - Icon after - {" "} - the link. - - - -); - -export default Link; diff --git a/apps/website/screens/theme-generator/components/previews/NavTabs.tsx b/apps/website/screens/theme-generator/components/previews/NavTabs.tsx deleted file mode 100644 index 1371291844..0000000000 --- a/apps/website/screens/theme-generator/components/previews/NavTabs.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { DxcNavTabs } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const iconSVG = ( - - - - -); - -const NavTabs = () => ( - - - - - Tab 1 - - - Tab 2 - - Tab 3 - Tab 4 - - - - - - Tab 1 - - - Tab 2 - - - Tab 3 - - - Tab 4 - - - - -); - -export default NavTabs; diff --git a/apps/website/screens/theme-generator/components/previews/Paginator.tsx b/apps/website/screens/theme-generator/components/previews/Paginator.tsx deleted file mode 100644 index 3548cb10db..0000000000 --- a/apps/website/screens/theme-generator/components/previews/Paginator.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { useState } from "react"; -import { DxcPaginator } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const Paginator = () => { - const [page, changePage] = useState(1); - const [items, changeItems] = useState(10); - - const itemsPerPageClick = (value: number) => { - changeItems(value); - }; - const goToPageFunc = (value: number) => { - changePage(value); - }; - - return ( - - - - - - ); -}; - -export default Paginator; diff --git a/apps/website/screens/theme-generator/components/previews/Paragraph.tsx b/apps/website/screens/theme-generator/components/previews/Paragraph.tsx deleted file mode 100644 index be465b17ff..0000000000 --- a/apps/website/screens/theme-generator/components/previews/Paragraph.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { DxcParagraph, DxcTypography } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const Paragraph = () => ( - - - - Lorem ipsum dolor sit amet,{" "} - - consectetur adipiscing elit. - {" "} - Nulla id tortor sit amet velit auctor cursus id eget nisl. Vivamus luctus egestas eros, at mattis libero - eleifend ac. Integer vel urna rutrum, pretium arcu dignissim, fringilla turpis. Nullam luctus odio quis magna - finibus, a pharetra magna euismod. Nullam efficitur semper pellentesque. Nulla eget arcu ac diam fringilla - vehicula. In imperdiet nisl hendrerit, elementum metus eu, ornare risus. Aenean neque nibh, vestibulum vitae - elit vel, imperdiet suscipit leo. Curabitur blandit iaculis pretium. Fusce id imperdiet dui, ut laoreet justo. - Sed maximus sollicitudin ipsum, et varius massa condimentum eget. Vivamus id mauris et nisl mattis consequat et - id lectus. Quisque mollis lacinia nisl. Suspendisse sed quam tincidunt, commodo dolor vel, tincidunt nisl. - - - -); - -export default Paragraph; diff --git a/apps/website/screens/theme-generator/components/previews/PreviewContainer.tsx b/apps/website/screens/theme-generator/components/previews/PreviewContainer.tsx deleted file mode 100644 index 3af49aaeb7..0000000000 --- a/apps/website/screens/theme-generator/components/previews/PreviewContainer.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { DxcFlex } from "@dxc-technology/halstack-react"; -import { ReactNode } from "react"; - -type PreviewContainerProps = { - children: ReactNode; -}; - -const PreviewContainer = ({ children }: PreviewContainerProps) => ( - - {children} - -); - -export default PreviewContainer; diff --git a/apps/website/screens/theme-generator/components/previews/ProgressBar.tsx b/apps/website/screens/theme-generator/components/previews/ProgressBar.tsx deleted file mode 100644 index e3a842f41d..0000000000 --- a/apps/website/screens/theme-generator/components/previews/ProgressBar.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { useState } from "react"; -import styled from "styled-components"; -import { DxcButton, DxcProgressBar } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const ProgressBar = () => { - const [isVisible, changeIsVisible] = useState(false); - const showModal = () => { - changeIsVisible(true); - fetchData().then(() => { - changeIsVisible(false); - }); - }; - const fetchData = () => { - return new Promise((resolve) => { - setTimeout(() => { - resolve(); - }, 3000); - }); - }; - - return ( - - - - - - - - - - - - - - {isVisible && } - - - ); -}; - -const Container = styled.div` - width: 100%; -`; - -export default ProgressBar; diff --git a/apps/website/screens/theme-generator/components/previews/QuickNav.tsx b/apps/website/screens/theme-generator/components/previews/QuickNav.tsx deleted file mode 100644 index aee80ade5a..0000000000 --- a/apps/website/screens/theme-generator/components/previews/QuickNav.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { DxcQuickNav } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; - -const links = [ - { - label: "Overview", - }, - { - label: "Principles", - links: [ - { label: "Color" }, - { label: "Spacing" }, - { label: "Typography" }, - { label: "Layout" }, - { - label: "Themes", - links: [{ label: "Light" }, { label: "Dark" }], - }, - ], - }, -]; - -const QuickNav = () => ( - - - -); - -export default QuickNav; diff --git a/apps/website/screens/theme-generator/components/previews/RadioGroup.tsx b/apps/website/screens/theme-generator/components/previews/RadioGroup.tsx deleted file mode 100644 index c266eea7e3..0000000000 --- a/apps/website/screens/theme-generator/components/previews/RadioGroup.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { DxcRadioGroup } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const options = [ - { label: "Option A", value: "A" }, - { label: "Option B", value: "B" }, - { label: "Option C", value: "C" }, -]; -const single_disabled_options = [ - { label: "Option A", value: "A" }, - { label: "Option B", value: "B", disabled: true }, - { label: "Option C", value: "C" }, -]; - -const RadioGroup = () => ( - - - - - - - - - - - - - - - - - - -); - -export default RadioGroup; diff --git a/apps/website/screens/theme-generator/components/previews/Select.tsx b/apps/website/screens/theme-generator/components/previews/Select.tsx deleted file mode 100644 index 1c9c1e8eb9..0000000000 --- a/apps/website/screens/theme-generator/components/previews/Select.tsx +++ /dev/null @@ -1,197 +0,0 @@ -import { DxcSelect } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const single_options = [ - { label: "Option 01", value: "1" }, - { label: "Option 02", value: "2" }, - { label: "Option 03", value: "3" }, - { label: "Option 04", value: "4" }, -]; -const single_options_long = [ - { label: "Option 01", value: "1" }, - { label: "Option 02", value: "2" }, - { label: "Option 03", value: "3" }, - { label: "Option 04", value: "4" }, - { label: "Option 05", value: "5" }, - { label: "Option 06", value: "6" }, - { label: "Option 07", value: "7" }, - { label: "Option 08", value: "8" }, - { label: "Option 09", value: "9" }, - { label: "Option 10", value: "10" }, - { label: "Option 11", value: "11" }, - { label: "Option 12", value: "12" }, - { label: "Option 13", value: "13" }, - { label: "Option 14", value: "14" }, - { label: "Option 15", value: "15" }, - { label: "Option 16", value: "16" }, - { label: "Option 17", value: "17" }, - { label: "Option 18", value: "18" }, - { label: "Option 19", value: "19" }, - { label: "Option 20", value: "20" }, -]; -const svg_options = [ - { - label: "Utils", - options: [ - { - label: "3G Mobile", - value: "3g", - icon: ( - - - - - - - - - - - ), - }, - { - label: "Ethernet", - value: "ethernet", - icon: ( - - - - - ), - }, - { - label: "Wi-fi", - value: "wifi", - icon: ( - - - - - ), - }, - { - label: "Settings backup restore (just for previous configuration)", - value: "restore", - icon: ( - - - - - ), - }, - ], - }, - { - label: "Operations", - options: [ - { - label: "Log out", - value: "logout", - icon: ( - - - - - - - - - ), - }, - { - label: "Log in", - value: "login", - icon: ( - - - - - - - - - ), - }, - { - label: "Filter", - value: "filter", - icon: ( - - - - - - - - ), - }, - ], - }, -]; - -const Select = () => ( - - - - - - - - - - - - - -); - -export default Select; diff --git a/apps/website/screens/theme-generator/components/previews/Sidenav.tsx b/apps/website/screens/theme-generator/components/previews/Sidenav.tsx deleted file mode 100644 index f97a922d6e..0000000000 --- a/apps/website/screens/theme-generator/components/previews/Sidenav.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { DxcApplicationLayout } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const icon = ( - - - -); - -const Sidenav = () => ( - - - Sidenav Title} - > - - - Lorem ipsum - Lorem ipsum - - - Lorem ipsum - Lorem ipsum - - - - Lorem ipsum - Lorem ipsum - - Lorem ipsum - - - Lorem ipsum - - - - - -); - -export default Sidenav; diff --git a/apps/website/screens/theme-generator/components/previews/Slider.tsx b/apps/website/screens/theme-generator/components/previews/Slider.tsx deleted file mode 100644 index 3865e31045..0000000000 --- a/apps/website/screens/theme-generator/components/previews/Slider.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { useState } from "react"; -import { DxcSlider } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const Slider = () => { - const [value, changeValue] = useState(0); - const onChange = (newValue: number) => { - changeValue(newValue); - }; - - return ( - - - - - - - - - - - - - - - ); -}; - -export default Slider; diff --git a/apps/website/screens/theme-generator/components/previews/Spinner.tsx b/apps/website/screens/theme-generator/components/previews/Spinner.tsx deleted file mode 100644 index b012139e13..0000000000 --- a/apps/website/screens/theme-generator/components/previews/Spinner.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { useState } from "react"; -import { DxcSpinner, DxcButton } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const Spinner = () => { - const [isVisible, changeIsVisible] = useState(false); - const showModal = () => { - changeIsVisible(true); - fetchData().then(() => { - changeIsVisible(false); - }); - }; - const fetchData = () => { - return new Promise((resolve) => { - setTimeout(() => { - resolve(); - }, 3000); - }); - }; - - return ( - - - - - - - - - - - - - {isVisible && } - - - ); -}; - -export default Spinner; diff --git a/apps/website/screens/theme-generator/components/previews/Switch.tsx b/apps/website/screens/theme-generator/components/previews/Switch.tsx deleted file mode 100644 index 38912747b8..0000000000 --- a/apps/website/screens/theme-generator/components/previews/Switch.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { useState } from "react"; -import { DxcSwitch } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const Switch = () => { - const [checked, changeChecked] = useState(false); - const onChange = (newValue: boolean) => { - changeChecked(newValue); - }; - - return ( - - - - - - - - - - ); -}; - -export default Switch; diff --git a/apps/website/screens/theme-generator/components/previews/Table.tsx b/apps/website/screens/theme-generator/components/previews/Table.tsx deleted file mode 100644 index b38e5d491d..0000000000 --- a/apps/website/screens/theme-generator/components/previews/Table.tsx +++ /dev/null @@ -1,177 +0,0 @@ -import { useState } from "react"; -import styled from "styled-components"; -import { DxcTable, DxcResultsetTable } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const actions = [ - { - icon: "delete", - title: "icon", - onClick: () => {}, - }, -]; - -const columns = [ - { displayValue: "Id", isSortable: false }, - { displayValue: "Name", isSortable: true }, - { displayValue: "City", isSortable: false }, - { displayValue: "Actions", isSortable: true }, -]; -const rows = [ - [ - { displayValue: "001", sortValue: "001" }, - { displayValue: "Peter", sortValue: "Peter" }, - { displayValue: "Miami", sortValue: "Miami" }, - { displayValue: }, - ], - [ - { displayValue: "002", sortValue: "002" }, - { displayValue: "Louis", sortValue: "Louis" }, - { displayValue: "London", sortValue: "London" }, - { displayValue: "" }, - ], - [ - { displayValue: "003", sortValue: "003" }, - { displayValue: "Lana", sortValue: "Lana" }, - { displayValue: "Amsterdam", sortValue: "Amsterdam" }, - { displayValue: }, - ], - [ - { displayValue: "004", sortValue: "004" }, - { displayValue: "Rick", sortValue: "Rick" }, - { displayValue: "London", sortValue: "London" }, - { displayValue: }, - ], - [ - { displayValue: "005", sortValue: "005" }, - { displayValue: "Mark", sortValue: "Mark" }, - { displayValue: "Miami", sortValue: "Miami" }, - { displayValue: }, - ], - [ - { displayValue: "006", sortValue: "006" }, - { displayValue: "Cris", sortValue: "Cris" }, - { displayValue: "Paris", sortValue: "Paris" }, - { displayValue: "" }, - ], -]; - -const Table = () => { - const [myItemsPerPage, setMyItemsPerPage] = useState(2); - const itemsPerPageFunction = (value: number) => { - setMyItemsPerPage(value); - }; - - return ( - - - - - header 1 - header 2 - header 3 - - - cell 1 - cell 2 - cell 3 - - - cell 4 - cell 5 - cell 6 - - - - - - - - - - - - header

subheader - - - header

subheader - - - header

subheader - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. - - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. - - - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - - - - cell data - cell data - cell data - - - cell data - cell data - cell data - - - cell data - cell data - cell data - - - cell data - cell data - cell data - - - cell data - cell data - cell data - - - cell data - cell data - cell data - - - cell data - cell data - cell data - - - cell data - cell data - cell data - - - - - - ); -}; - -const Container = styled.div` - display: flex; - flex-direction: row; - height: 400px; - width: 100%; -`; - -export default Table; diff --git a/apps/website/screens/theme-generator/components/previews/Tabs.tsx b/apps/website/screens/theme-generator/components/previews/Tabs.tsx deleted file mode 100644 index bad1db1ca2..0000000000 --- a/apps/website/screens/theme-generator/components/previews/Tabs.tsx +++ /dev/null @@ -1,138 +0,0 @@ -import { useState } from "react"; -import styled from "styled-components"; -import { DxcFlex, DxcTabs } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import xIcon from "../../images/XIcon"; -import PreviewContainer from "./PreviewContainer"; - -const Tabs = () => { - const [activeTab, setActiveTab] = useState(0); - const onTabClick = (i: number) => { - setActiveTab(i); - }; - const [disabledActiveTab, setDisabledActiveTab] = useState(0); - const onDisabledTabClick = (i: number) => { - setDisabledActiveTab(i); - }; - const [notificationActiveTab, setNotificationActiveTab] = useState(0); - const onNotificationActiveTab = (i: number) => { - setNotificationActiveTab(i); - }; - const [largeActiveTab, setLargeActiveTab] = useState(0); - const onLargeActiveTab = (i: number) => { - setLargeActiveTab(i); - }; - - return ( - - - - - {activeTab === 0 && Content 1} - {activeTab === 1 && Content 2} - {activeTab === 2 && Content 3} - - - - - - - - - - - - - - - ); -}; - -const LargeTabsContainer = styled.div` - width: 900px; -`; - -const TabContentContainer = styled.div<{ backgroundColor: string }>` - height: 150px; - background: ${(props) => props.backgroundColor}; - margin: 15px; - padding: 10px; -`; - -export default Tabs; diff --git a/apps/website/screens/theme-generator/components/previews/Tag.tsx b/apps/website/screens/theme-generator/components/previews/Tag.tsx deleted file mode 100644 index ba6aec95de..0000000000 --- a/apps/website/screens/theme-generator/components/previews/Tag.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { DxcTag } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const iconSVG = ( - - - - -); - -const Tag = () => ( - - - - - - -); - -export default Tag; diff --git a/apps/website/screens/theme-generator/components/previews/TextInput.tsx b/apps/website/screens/theme-generator/components/previews/TextInput.tsx deleted file mode 100644 index d362c3c8e0..0000000000 --- a/apps/website/screens/theme-generator/components/previews/TextInput.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import { DxcTextInput } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const countries = [ - "Afghanistan", - "Albania", - "Algeria", - "Andorra", - "Angola", - "Antigua and Barbuda", - "Bahamas", - "Bahrain", - "Bangladesh", - "Barbados", - "Cabo Verde", - "Cambodia", - "Cameroon", - "Canada", - "Cayman Islands, The", - "Central African Republic", - "Chad", - "Democratic Republic of the Congo", - "Dominican Republic", - "Dominica", - "Denmark", - "Djibouti", -]; - -const action = { - onClick: () => { - console.log("Copy that!"); - }, - icon: ( - - - - - ), -}; - -const errorCallbackFunc: (value: string) => Promise = (): Promise => { - const result = new Promise((resolve, reject) => - setTimeout(() => { - reject("err"); - }, 3000) - ); - return result; -}; - -const TextInput = () => ( - - - - - - - - - - - - - - - - - - - - - -); - -export default TextInput; diff --git a/apps/website/screens/theme-generator/components/previews/Textarea.tsx b/apps/website/screens/theme-generator/components/previews/Textarea.tsx deleted file mode 100644 index ec86352f60..0000000000 --- a/apps/website/screens/theme-generator/components/previews/Textarea.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { DxcTextarea } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const Textarea = () => ( - - - - - - - - - - - - - - -); - -export default Textarea; diff --git a/apps/website/screens/theme-generator/components/previews/ToggleGroup.tsx b/apps/website/screens/theme-generator/components/previews/ToggleGroup.tsx deleted file mode 100644 index f2a20aa047..0000000000 --- a/apps/website/screens/theme-generator/components/previews/ToggleGroup.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { DxcToggleGroup } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const options = [ - { - value: 1, - label: "Facebook", - }, - { - value: 2, - label: "X", - }, - { - value: 3, - label: "Linkedin", - }, -]; - -const disabledOptions = [ - { - value: 1, - label: "Wi-fi", - }, - { - value: 2, - label: "Ethernet", - disabled: true, - }, - { - value: 3, - label: "5G", - }, -]; - -const optionsWithIcons = [ - { - value: 1, - icon: "format_bold", - title: "Bold", - }, - { - value: 2, - icon: "format_italic", - title: "Italic", - }, - { - value: 3, - icon: "format_underlined", - title: "Underlined", - }, -]; - -const ToggleGroup = () => ( - - - - - - - - - - - -); - -export default ToggleGroup; diff --git a/apps/website/screens/theme-generator/components/previews/Wizard.tsx b/apps/website/screens/theme-generator/components/previews/Wizard.tsx deleted file mode 100644 index 77deebf7ad..0000000000 --- a/apps/website/screens/theme-generator/components/previews/Wizard.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import { DxcWizard } from "@dxc-technology/halstack-react"; -import Mode from "../Mode"; -import PreviewContainer from "./PreviewContainer"; - -const userIcon = ( - - - - -); - -const homeIcon = ( - - - - - - - - -); - -const billingIcon = ( - - - -); - -const shoppingCartIcon = ( - - - -); - -const steps = [ - { - label: "First step", - description: "Not validated step", - valid: false, - }, - { - label: "Second step", - description: "Validated step", - valid: true, - }, - { - label: "Third step", - description: "Another step description", - }, - { - label: "Forth step", - description: "Disable step", - disabled: true, - }, -]; - -const iconSteps = [ - { - label: "Personal info", - valid: true, - icon: userIcon, - }, - { - label: "Address", - valid: true, - icon: homeIcon, - }, - { - label: "Payment", - icon: billingIcon, - }, - { - label: "Confirm details", - icon: shoppingCartIcon, - }, -]; - -const Wizard = () => ( - - - - - - - - -); - -export default Wizard; diff --git a/apps/website/screens/theme-generator/components/widgets/AlphaValueInput.tsx b/apps/website/screens/theme-generator/components/widgets/AlphaValueInput.tsx deleted file mode 100644 index 16fdeb4b86..0000000000 --- a/apps/website/screens/theme-generator/components/widgets/AlphaValueInput.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { useState, useEffect } from "react"; -import StyledInput from "./common/StyledInput"; -import ThemeInputWidgetProps from "./common/types"; - -const AlphaValueInput = ({ propertyName, propertyValue, onChangeCustomTheme }: ThemeInputWidgetProps): JSX.Element => { - const [value, changeValue] = useState(propertyValue.match(/-?[0-9]+(.[0-9]+)?/g)?.join("")); - - useEffect(() => { - changeValue(propertyValue.match(/-?[0-9]+(.[0-9]+)?/g)?.join("")); - }, [propertyValue]); - - return ( - { - const val = event.target.value; - changeValue(val); - onChangeCustomTheme(propertyName, val); - }} - /> - ); -}; - -export default AlphaValueInput; diff --git a/apps/website/screens/theme-generator/components/widgets/BorderStyleInput.tsx b/apps/website/screens/theme-generator/components/widgets/BorderStyleInput.tsx deleted file mode 100644 index 82ff698c14..0000000000 --- a/apps/website/screens/theme-generator/components/widgets/BorderStyleInput.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import StyledSelect from "./common/StyledSelect"; -import ThemeInputWidgetProps from "./common/types"; - -const styleOptions = ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"]; - -const BorderStyleInput = ({ propertyName, propertyValue, onChangeCustomTheme }: ThemeInputWidgetProps): JSX.Element => ( - { - onChangeCustomTheme(propertyName, event.target.value); - }} - > - {styleOptions.map((styleOption, index) => ( - - ))} - -); - -export default BorderStyleInput; diff --git a/apps/website/screens/theme-generator/components/widgets/BorderWidthInput.tsx b/apps/website/screens/theme-generator/components/widgets/BorderWidthInput.tsx deleted file mode 100644 index 8f985ff207..0000000000 --- a/apps/website/screens/theme-generator/components/widgets/BorderWidthInput.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { useState, useEffect } from "react"; -import styled from "styled-components"; -import StyledInput from "./common/StyledInput"; -import ThemeInputWidgetProps from "./common/types"; -import WidgetContainer from "./common/WidgetContainer"; - -const BorderWidthInput = ({ propertyName, propertyValue, onChangeCustomTheme }: ThemeInputWidgetProps) => { - const [value, changeValue] = useState(propertyValue.match(/-?[0-9]+(.[0-9]+)?/g)?.join("")); - const [unitValue] = useState(propertyValue.match(/[a-zA-Z]+|%/g)?.[0]); - - useEffect(() => { - changeValue(propertyValue.match(/-?[0-9]+(.[0-9]+)?/g)?.join("")); - }, [propertyValue]); - - return ( - - { - const val = event.target.value; - changeValue(val); - onChangeCustomTheme(propertyName, val + unitValue); - }} - /> - {unitValue} - - ); -}; - -const StyledLabel = styled.span` - align-self: center; - font: normal 12px/17px Open Sans; -`; - -export default BorderWidthInput; diff --git a/apps/website/screens/theme-generator/components/widgets/ColorPicker.tsx b/apps/website/screens/theme-generator/components/widgets/ColorPicker.tsx deleted file mode 100644 index 03e30e8a6d..0000000000 --- a/apps/website/screens/theme-generator/components/widgets/ColorPicker.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import { useEffect, useState } from "react"; -import styled from "styled-components"; -import { SketchPicker } from "react-color"; -import ThemeInputWidgetProps from "./common/types"; -import * as Popover from "@radix-ui/react-popover"; - -const colorRange = [ - "#D0021B", - "#F5A623", - "#F8E71C", - "#8B572A", - "#7ED321", - "#417505", - "#BD10E0", - "#9013FE", - "#4A90E2", - "#50E3C2", - "#B8E986", - "#000000", - "#4A4A4A", - "#9B9B9B", - "#FFFFFF", -]; - -const ColorPicker = ({ propertyName, propertyValue, onChangeCustomTheme }: ThemeInputWidgetProps): JSX.Element => { - const [currentColor, setCurrentColor] = useState(""); - const [isPickerVisible, setIsPickerVisible] = useState(false); - const [presetColors, setPresetColors] = useState(colorRange); - - useEffect(() => { - setCurrentColor(propertyValue); - }, [propertyValue]); - - const showColorPicker = () => { - setIsPickerVisible((isPickerVisible) => !isPickerVisible); - }; - - const closeColorPicker = () => { - setIsPickerVisible(false); - if (!presetColors.includes(currentColor.toUpperCase())) { - const newPresetColors = presetColors; - newPresetColors.pop(); - newPresetColors.unshift(currentColor.toUpperCase()); - setPresetColors(newPresetColors); - } - }; - - return ( - - - - - - - { - setCurrentColor(color.hex); - }} - onChangeComplete={(color) => { - onChangeCustomTheme(propertyName, color.hex); - }} - disableAlpha={true} - presetColors={presetColors} - /> - - - - ); -}; - -const ColorSample = styled.button<{ $color: string }>` - width: 34px; - height: 16px; - background: ${(props) => props.$color}; - border: 1px solid #707070; - border-radius: 4px; - cursor: pointer; - - &:focus { - border-color: transparent; - outline: 2px solid #0095ff; - } -`; - -export default ColorPicker; diff --git a/apps/website/screens/theme-generator/components/widgets/DefaultInput.tsx b/apps/website/screens/theme-generator/components/widgets/DefaultInput.tsx deleted file mode 100644 index 0fd6dadf51..0000000000 --- a/apps/website/screens/theme-generator/components/widgets/DefaultInput.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import StyledInput from "./common/StyledInput"; -import ThemeInputWidgetProps from "./common/types"; - -const DefaultInput = ({ propertyName, propertyValue, onChangeCustomTheme }: ThemeInputWidgetProps): JSX.Element => ( - { - const val = event.target.value; - onChangeCustomTheme(propertyName, val); - }} - /> -); - -export default DefaultInput; diff --git a/apps/website/screens/theme-generator/components/widgets/FontFamily.tsx b/apps/website/screens/theme-generator/components/widgets/FontFamily.tsx deleted file mode 100644 index bfe81d91dd..0000000000 --- a/apps/website/screens/theme-generator/components/widgets/FontFamily.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { useState, useEffect } from "react"; -import StyledInput from "./common/StyledInput"; -import StyledSelect from "./common/StyledSelect"; -import ThemeInputWidgetProps from "./common/types"; -import WidgetContainer from "./common/WidgetContainer"; - -const fontFamilyOptions = ["serif", "sans-serif", "monospace", "cursive", "fantasy"]; - -const FontFamilyInput = ({ propertyName, propertyValue, onChangeCustomTheme }: ThemeInputWidgetProps): JSX.Element => { - const [value, changeValue] = useState(propertyValue.split(", ")[0]); - const [unitValue, changeUnitValue] = useState(propertyValue.split(", ")[1]); - - useEffect(() => { - changeValue(propertyValue.split(", ")[0]); - changeUnitValue(propertyValue.split(", ")[1]); - }, [propertyValue]); - - return ( - - { - const val = event.target.value; - changeValue(event.target.value); - onChangeCustomTheme(propertyName, `${val}, ${unitValue}`); - }} - /> - { - const val = event.target.value; - changeUnitValue(val); - onChangeCustomTheme(propertyName, `${propertyValue.split(",")[0]}, ${val}`); - }} - > - {fontFamilyOptions.map((familyOption, index) => ( - - ))} - - - ); -}; - -export default FontFamilyInput; diff --git a/apps/website/screens/theme-generator/components/widgets/FontStyleInput.tsx b/apps/website/screens/theme-generator/components/widgets/FontStyleInput.tsx deleted file mode 100644 index 84631ad0e7..0000000000 --- a/apps/website/screens/theme-generator/components/widgets/FontStyleInput.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import StyledSelect from "./common/StyledSelect"; -import ThemeInputWidgetProps from "./common/types"; - -const styleOptions = ["normal", "italic", "oblique"]; - -const FontStyleInput = ({ propertyName, propertyValue, onChangeCustomTheme }: ThemeInputWidgetProps): JSX.Element => ( - { - onChangeCustomTheme(propertyName, event.target.value); - }} - > - {styleOptions.map((styleOption, index) => ( - - ))} - -); - -export default FontStyleInput; diff --git a/apps/website/screens/theme-generator/components/widgets/FontWeightInput.tsx b/apps/website/screens/theme-generator/components/widgets/FontWeightInput.tsx deleted file mode 100644 index 2f93fb3a45..0000000000 --- a/apps/website/screens/theme-generator/components/widgets/FontWeightInput.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import StyledSelect from "./common/StyledSelect"; -import ThemeInputWidgetProps from "./common/types"; - -const weightOptions = [ - "normal", - "bold", - "lighter", - "bolder", - "100", - "200", - "300", - "400", - "500", - "600", - "700", - "800", - "900", -]; - -const FontWeightInput = ({ propertyName, propertyValue, onChangeCustomTheme }: ThemeInputWidgetProps): JSX.Element => ( - { - onChangeCustomTheme(propertyName, event.target.value); - }} - > - {weightOptions.map((weightOption, index) => ( - - ))} - -); - -export default FontWeightInput; diff --git a/apps/website/screens/theme-generator/components/widgets/ImageConfig.tsx b/apps/website/screens/theme-generator/components/widgets/ImageConfig.tsx deleted file mode 100644 index a78ebef6f0..0000000000 --- a/apps/website/screens/theme-generator/components/widgets/ImageConfig.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { DxcFlex } from "@dxc-technology/halstack-react"; -import { useState, useEffect, MouseEvent, ChangeEvent } from "react"; -import styled from "styled-components"; -import ThemeInputWidgetProps from "./common/types"; - -const ImageConfig = ({ propertyName, propertyValue, onChangeCustomTheme }: ThemeInputWidgetProps): JSX.Element => { - const [logoImage, setLogoImage] = useState(propertyValue); - - const clickToUpload = (event: MouseEvent) => { - const input = event.currentTarget.previousSibling as HTMLInputElement; - input.click(); - }; - const upload = (event: ChangeEvent) => { - const files = event.target.files; - if (files && files[0]) { - const url = URL.createObjectURL(files[0]); - onChangeCustomTheme(propertyName, url); - setLogoImage(url); - return () => URL.revokeObjectURL(url); - } - }; - - useEffect(() => { - setLogoImage(propertyValue); - }, [propertyValue]); - - return ( - - - - Select a file - - ); -}; - -const LogoImage = styled.img` - width: 23px; - height: 23px; - object-fit: contain; - background-color: #d9d9d9; -`; - -const HiddenInputFile = styled.input` - display: none; -`; - -const UploadButton = styled.button` - flex-grow: 1; - font: normal 12px/17px Open Sans; - height: 23px; - - &:focus { - border-color: transparent; - border-radius: 2px; - outline: 2px solid #0095ff; - } -`; - -export default ImageConfig; diff --git a/apps/website/screens/theme-generator/components/widgets/IntegerInput.tsx b/apps/website/screens/theme-generator/components/widgets/IntegerInput.tsx deleted file mode 100644 index 8076a03237..0000000000 --- a/apps/website/screens/theme-generator/components/widgets/IntegerInput.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { useState, useEffect } from "react"; -import StyledInput from "./common/StyledInput"; -import ThemeInputWidgetProps from "./common/types"; - -const IntegerInput = ({ propertyName, propertyValue, onChangeCustomTheme }: ThemeInputWidgetProps): JSX.Element => { - const [value, changeValue] = useState(propertyValue.match(/-?[0-9]+/g)?.join("")); - - useEffect(() => { - changeValue(propertyValue.match(/-?[0-9]+/g)?.join("")); - }, [propertyValue]); - - return ( - { - const val = event.target.value; - changeValue(val); - onChangeCustomTheme(propertyName, val); - }} - /> - ); -}; - -export default IntegerInput; diff --git a/apps/website/screens/theme-generator/components/widgets/LengthInput.tsx b/apps/website/screens/theme-generator/components/widgets/LengthInput.tsx deleted file mode 100644 index 87c8d368d5..0000000000 --- a/apps/website/screens/theme-generator/components/widgets/LengthInput.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { useState, useEffect } from "react"; -import StyledInput from "./common/StyledInput"; -import StyledSelect from "./common/StyledSelect"; -import ThemeInputWidgetProps from "./common/types"; -import WidgetContainer from "./common/WidgetContainer"; - -const unitOptions = ["cm", "mm", "in", "px", "pt", "pc", "em", "ex", "ch", "rem", "vw", "vh", "vmin", "vmax", "%"]; - -const LengthInput = ({ propertyName, propertyValue, onChangeCustomTheme }: ThemeInputWidgetProps): JSX.Element => { - const [value, changeValue] = useState(propertyValue.match(/-?[0-9]+(.[0-9]+)?/g)?.join("")); - const [unitValue, changeUnitValue] = useState(propertyValue.match(/[a-zA-Z]+|%/g)?.[0]); - - useEffect(() => { - changeValue(propertyValue.match(/-?[0-9]+(.[0-9]+)?/g)?.join("")); - changeUnitValue(propertyValue.match(/[a-zA-Z]+|%/g)?.[0]); - }, [propertyValue]); - - return ( - - { - const val = event.target.value; - changeValue(val); - onChangeCustomTheme(propertyName, val + unitValue); - }} - /> - { - const val = event.target.value; - changeUnitValue(val); - onChangeCustomTheme(propertyName, value + val); - }} - > - {unitOptions.map((unitOption, index) => ( - - ))} - - - ); -}; - -export default LengthInput; diff --git a/apps/website/screens/theme-generator/components/widgets/TextAlignInput.tsx b/apps/website/screens/theme-generator/components/widgets/TextAlignInput.tsx deleted file mode 100644 index 0936fff6c1..0000000000 --- a/apps/website/screens/theme-generator/components/widgets/TextAlignInput.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import StyledSelect from "./common/StyledSelect"; -import ThemeInputWidgetProps from "./common/types"; - -const textAlignOptions = ["left", "right", "center", "justify", "justify-all", "start", "end", "match-parent"]; - -const TextAlignInput = ({ propertyName, propertyValue, onChangeCustomTheme }: ThemeInputWidgetProps): JSX.Element => ( - { - onChangeCustomTheme(propertyName, event.target.value); - }} - > - {textAlignOptions.map((transformOption) => ( - - ))} - -); - -export default TextAlignInput; diff --git a/apps/website/screens/theme-generator/components/widgets/TextTransformInput.tsx b/apps/website/screens/theme-generator/components/widgets/TextTransformInput.tsx deleted file mode 100644 index 84f65435ad..0000000000 --- a/apps/website/screens/theme-generator/components/widgets/TextTransformInput.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import StyledSelect from "./common/StyledSelect"; -import ThemeInputWidgetProps from "./common/types"; - -const transformOptions = ["none", "uppercase", "lowercase", "capitalize"]; - -const TextTransformInput = ({ - propertyName, - propertyValue, - onChangeCustomTheme, -}: ThemeInputWidgetProps): JSX.Element => ( - { - onChangeCustomTheme(propertyName, event.target.value); - }} - > - {transformOptions.map((transformOption) => ( - - ))} - -); - -export default TextTransformInput; diff --git a/apps/website/screens/theme-generator/components/widgets/common/StyledInput.tsx b/apps/website/screens/theme-generator/components/widgets/common/StyledInput.tsx deleted file mode 100644 index 25072225ba..0000000000 --- a/apps/website/screens/theme-generator/components/widgets/common/StyledInput.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import styled from "styled-components"; - -const StyledInput = styled.input` - box-sizing: border-box; - font: normal 12px/17px Open Sans; - height: 23px; - - &:focus { - border-color: transparent; - border-radius: 2px; - outline: 2px solid #0095ff; - } -`; - -export default StyledInput; diff --git a/apps/website/screens/theme-generator/components/widgets/common/StyledSelect.tsx b/apps/website/screens/theme-generator/components/widgets/common/StyledSelect.tsx deleted file mode 100644 index d0c404ff6e..0000000000 --- a/apps/website/screens/theme-generator/components/widgets/common/StyledSelect.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import styled from "styled-components"; - -const StyledSelect = styled.select` - font: normal 12px/17px Open Sans; - height: 23px; - - &:focus { - border-color: transparent; - border-radius: 2px; - outline: 2px solid #0095ff; - } -`; - -export default StyledSelect; diff --git a/apps/website/screens/theme-generator/components/widgets/common/WidgetContainer.tsx b/apps/website/screens/theme-generator/components/widgets/common/WidgetContainer.tsx deleted file mode 100644 index 1130abe47e..0000000000 --- a/apps/website/screens/theme-generator/components/widgets/common/WidgetContainer.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import styled from "styled-components"; - -const WidgetContainer = styled.span` - display: grid; - grid-template: 1fr / minmax(0, 50%) minmax(0, 50%); - column-gap: 0.25rem; -`; - -export default WidgetContainer; diff --git a/apps/website/screens/theme-generator/components/widgets/common/types.ts b/apps/website/screens/theme-generator/components/widgets/common/types.ts deleted file mode 100644 index ac533bc8ae..0000000000 --- a/apps/website/screens/theme-generator/components/widgets/common/types.ts +++ /dev/null @@ -1,7 +0,0 @@ -type ThemeInputWidgetProps = { - propertyName: string; - propertyValue: string; - onChangeCustomTheme: (propertyName: string, propertyValue: string) => void; -}; - -export default ThemeInputWidgetProps; diff --git a/apps/website/screens/theme-generator/images/FacebookIcon.tsx b/apps/website/screens/theme-generator/images/FacebookIcon.tsx deleted file mode 100644 index 8cd6e86474..0000000000 --- a/apps/website/screens/theme-generator/images/FacebookIcon.tsx +++ /dev/null @@ -1,24 +0,0 @@ -const facebookIcon = ( - - - - - -); - -export default facebookIcon; diff --git a/apps/website/screens/theme-generator/images/GlobalActionsIcons.tsx b/apps/website/screens/theme-generator/images/GlobalActionsIcons.tsx deleted file mode 100644 index 717fe2b058..0000000000 --- a/apps/website/screens/theme-generator/images/GlobalActionsIcons.tsx +++ /dev/null @@ -1,57 +0,0 @@ -const icons = { - reset: ( - - - - - - - - - - - ), - export: ( - - - - - - - - - ), - import: ( - - - - - - - - - ), -}; - -export default icons; diff --git a/apps/website/screens/theme-generator/images/LinkedinIcon.tsx b/apps/website/screens/theme-generator/images/LinkedinIcon.tsx deleted file mode 100644 index 8de5c7fd97..0000000000 --- a/apps/website/screens/theme-generator/images/LinkedinIcon.tsx +++ /dev/null @@ -1,29 +0,0 @@ -const linkedinIcon = ( - - - - - -); - -export default linkedinIcon; diff --git a/apps/website/screens/theme-generator/images/XIcon.tsx b/apps/website/screens/theme-generator/images/XIcon.tsx deleted file mode 100644 index 9840ff6817..0000000000 --- a/apps/website/screens/theme-generator/images/XIcon.tsx +++ /dev/null @@ -1,11 +0,0 @@ -const xIcon = ( - - - - -); - -export default xIcon; diff --git a/apps/website/screens/theme-generator/themes/schemas/advanced.schema.json b/apps/website/screens/theme-generator/themes/schemas/advanced.schema.json deleted file mode 100644 index 41ea7ffcae..0000000000 --- a/apps/website/screens/theme-generator/themes/schemas/advanced.schema.json +++ /dev/null @@ -1,1293 +0,0 @@ -{ - "accordion": { - "backgroundColor": "color", - "hoverBackgroundColor": "color", - "focusBackgroundColor": "color", - "activeBackgroundColor": "color", - "arrowColor": "color", - "disabledArrowColor": "color", - "subLabelFontFamily": "fFamily", - "subLabelFontSize": "length", - "subLabelFontWeight": "fWeight", - "subLabelFontStyle": "fStyle", - "subLabelFontColor": "color", - "disabledSubLabelFontColor": "color", - "assistiveTextFontFamily": "fFamily", - "assistiveTextFontSize": "length", - "assistiveTextFontWeight": "fWeight", - "assistiveTextFontStyle": "fStyle", - "assistiveTextFontColor": "color", - "disabledAssistiveTextFontColor": "color", - "titleLabelFontFamily": "fFamily", - "titleLabelFontSize": "length", - "titleLabelFontWeight": "fWeight", - "titleLabelFontStyle": "fStyle", - "titleLabelFontColor": "color", - "disabledTitleLabelFontColor": "color", - "focusBorderColor": "color", - "focusBorderStyle": "bStyle", - "focusBorderThickness": "bWidth", - "borderRadius": "length", - "boxShadowOffsetX": "length", - "boxShadowOffsetY": "length", - "boxShadowBlur": "length", - "boxShadowSpread": "length", - "boxShadowColor": "color", - "iconColor": "color", - "disabledIconColor": "color", - "iconSize": "length", - "accordionSeparatorBorderColor": "color", - "accordionSeparatorBorderThickness": "bWidth", - "accordionSeparatorBorderStyle": "bStyle" - }, - "alert": { - "overlayColor": "color", - "modalPaddingTop": "length", - "modalPaddingRight": "length", - "modalPaddingBottom": "length", - "modalPaddingLeft": "length", - "paddingTop": "length", - "paddingRight": "length", - "paddingBottom": "length", - "paddingLeft": "length", - "borderRadius": "length", - "boxShadowOffsetX": "length", - "boxShadowOffsetY": "length", - "boxShadowBlur": "length", - "boxShadowSpreadRadius": "length", - "boxShadowColor": "color", - "modalBackgroundColor": "color", - "infoBackgroundColor": "color", - "successBackgroundColor": "color", - "warningBackgroundColor": "color", - "errorBackgroundColor": "color", - "iconPaddingRight": "length", - "infoIconColor": "color", - "successIconColor": "color", - "warningIconColor": "color", - "errorIconColor": "color", - "iconSize": "length", - "titleFontFamily": "fFamily", - "titleFontColor": "color", - "titleFontSize": "length", - "modalTitleFontSize": "length", - "titleFontStyle": "fStyle", - "titleFontWeight": "fWeight", - "titlePaddingRight": "length", - "messageFontFamily": "fFamily", - "messageFontColor": "color", - "messageFontSize": "length", - "messageFontStyle": "fStyle", - "messageFontWeight": "fWeight", - "messagePaddingLeft": "length", - "messagePaddingRight": "length", - "navigationTextFontFamily": "fFamily", - "navigationTextFontSize": "length", - "navigationTextFontStyle": "fStyle", - "navigationTextFontWeight": "fWeight", - "navigationTextFontColor": "color" - }, - "bulletedList": { - "fontColor": "color", - "bulletIconHeight": "length", - "bulletIconWidth": "length", - "bulletHeight": "length", - "bulletWidth": "length", - "bulletMarginRight": "length" - }, - "button": { - "labelFontLineHeight": "length", - "labelLetterSpacing": "length", - "paddingSmallTop": "length", - "paddingSmallLeft": "length", - "paddingSmallBottom": "length", - "paddingSmallRight": "length", - "paddingSmallOnlyIconTop": "length", - "paddingSmallOnlyIconLeft": "length", - "paddingSmallOnlyIconBottom": "length", - "paddingSmallOnlyIconRight": "length", - "paddingMediumTop": "length", - "paddingMediumLeft": "length", - "paddingMediumBottom": "length", - "paddingMediumRight": "length", - "paddingMediumOnlyIconTop": "length", - "paddingMediumOnlyIconLeft": "length", - "paddingMediumOnlyIconBottom": "length", - "paddingMediumOnlyIconRight": "length", - "paddingLargeTop": "length", - "paddingLargeLeft": "length", - "paddingLargeBottom": "length", - "paddingLargeRight": "length", - "paddingLargeOnlyIconTop": "length", - "paddingLargeOnlyIconLeft": "length", - "paddingLargeOnlyIconBottom": "length", - "paddingLargeOnlyIconRight": "length", - "focusBorderColor": "color", - "primaryDefaultBackgroundColor": "color", - "primaryErrorBackgroundColor": "color", - "primaryWarningBackgroundColor": "color", - "primarySuccessBackgroundColor": "color", - "primaryInfoBackgroundColor": "color", - "primaryDefaultFontColor": "color", - "primaryErrorFontColor": "color", - "primaryWarningFontColor": "color", - "primarySuccessFontColor": "color", - "primaryInfoFontColor": "color", - "primaryHoverDefaultBackgroundColor": "color", - "primaryHoverErrorBackgroundColor": "color", - "primaryHoverWarningBackgroundColor": "color", - "primaryHoverSuccessBackgroundColor": "color", - "primaryHoverInfoBackgroundColor": "color", - "primaryActiveDefaultBackgroundColor": "color", - "primaryActiveErrorBackgroundColor": "color", - "primaryActiveWarningBackgroundColor": "color", - "primaryActiveSuccessBackgroundColor": "color", - "primaryActiveInfoBackgroundColor": "color", - "primaryDisabledDefaultBackgroundColor": "color", - "primaryDisabledErrorBackgroundColor": "color", - "primaryDisabledWarningBackgroundColor": "color", - "primaryDisabledSuccessBackgroundColor": "color", - "primaryDisabledInfoBackgroundColor": "color", - "primaryDisabledDefaultFontColor": "color", - "primaryDisabledErrorFontColor": "color", - "primaryDisabledWarningFontColor": "color", - "primaryDisabledSuccessFontColor": "color", - "primaryDisabledInfoFontColor": "color", - "primaryBorderThickness": "bWidth", - "primaryBorderStyle": "bStyle", - "primaryBorderRadius": "length", - "primaryFontFamily": "fFamily", - "primarySmallFontSize": "length", - "primaryMediumFontSize": "length", - "primaryLargeFontSize": "length", - "primaryFontWeight": "fWeight", - "secondaryDefaultBackgroundColor": "color", - "secondaryErrorBackgroundColor": "color", - "secondaryWarningBackgroundColor": "color", - "secondarySuccessBackgroundColor": "color", - "secondaryInfoBackgroundColor": "color", - "secondaryDefaultFontColor": "color", - "secondaryErrorFontColor": "color", - "secondaryWarningFontColor": "color", - "secondarySuccessFontColor": "color", - "secondaryInfoFontColor": "color", - "secondaryDefaultBorderColor": "color", - "secondaryErrorBorderColor": "color", - "secondaryWarningBorderColor": "color", - "secondarySuccessBorderColor": "color", - "secondaryInfoBorderColor": "color", - "secondaryHoverDefaultBackgroundColor": "color", - "secondaryHoverErrorBackgroundColor": "color", - "secondaryHoverWarningBackgroundColor": "color", - "secondaryHoverSuccessBackgroundColor": "color", - "secondaryHoverInfoBackgroundColor": "color", - "secondaryHoverDefaultFontColor": "color", - "secondaryHoverErrorFontColor": "color", - "secondaryHoverWarningFontColor": "color", - "secondaryHoverSuccessFontColor": "color", - "secondaryHoverInfoFontColor": "color", - "secondaryActiveDefaultBackgroundColor": "color", - "secondaryActiveErrorBackgroundColor": "color", - "secondaryActiveWarningBackgroundColor": "color", - "secondaryActiveSuccessBackgroundColor": "color", - "secondaryActiveInfoBackgroundColor": "color", - "secondaryDisabledDefaultBackgroundColor": "color", - "secondaryDisabledErrorBackgroundColor": "color", - "secondaryDisabledWarningBackgroundColor": "color", - "secondaryDisabledSuccessBackgroundColor": "color", - "secondaryDisabledInfoBackgroundColor": "color", - "secondaryDisabledDefaultFontColor": "color", - "secondaryDisabledErrorFontColor": "color", - "secondaryDisabledWarningFontColor": "color", - "secondaryDisabledSuccessFontColor": "color", - "secondaryDisabledInfoFontColor": "color", - "secondaryDisabledDefaultBorderColor": "color", - "secondaryDisabledErrorBorderColor": "color", - "secondaryDisabledWarningBorderColor": "color", - "secondaryDisabledSuccessBorderColor": "color", - "secondaryDisabledInfoBorderColor": "color", - "secondaryBorderThickness": "bWidth", - "secondaryBorderStyle": "bStyle", - "secondaryBorderRadius": "length", - "secondaryFontFamily": "fFamily", - "secondarySmallFontSize": "length", - "secondaryMediumFontSize": "length", - "secondaryLargeFontSize": "length", - "secondaryFontWeight": "fWeight", - "tertiaryDefaultBackgroundColor": "color", - "tertiaryErrorBackgroundColor": "color", - "tertiaryWarningBackgroundColor": "color", - "tertiarySuccessBackgroundColor": "color", - "tertiaryInfoBackgroundColor": "color", - "tertiaryDefaultFontColor": "color", - "tertiaryErrorFontColor": "color", - "tertiaryWarningFontColor": "color", - "tertiarySuccessFontColor": "color", - "tertiaryInfoFontColor": "color", - "tertiaryHoverDefaultBackgroundColor": "color", - "tertiaryHoverErrorBackgroundColor": "color", - "tertiaryHoverWarningBackgroundColor": "color", - "tertiaryHoverSuccessBackgroundColor": "color", - "tertiaryHoverInfoBackgroundColor": "color", - "tertiaryActiveDefaultBackgroundColor": "color", - "tertiaryActiveErrorBackgroundColor": "color", - "tertiaryActiveWarningBackgroundColor": "color", - "tertiaryActiveSuccessBackgroundColor": "color", - "tertiaryActiveInfoBackgroundColor": "color", - "tertiaryDisabledDefaultBackgroundColor": "color", - "tertiaryDisabledErrorBackgroundColor": "color", - "tertiaryDisabledWarningBackgroundColor": "color", - "tertiaryDisabledSuccessBackgroundColor": "color", - "tertiaryDisabledInfoBackgroundColor": "color", - "tertiaryDisabledDefaultFontColor": "color", - "tertiaryDisabledErrorFontColor": "color", - "tertiaryDisabledWarningFontColor": "color", - "tertiaryDisabledSuccessFontColor": "color", - "tertiaryDisabledInfoFontColor": "color", - "tertiaryBorderThickness": "bWidth", - "tertiaryBorderStyle": "bStyle", - "tertiaryBorderRadius": "length", - "tertiaryFontFamily": "fFamily", - "tertiarySmallFontSize": "length", - "tertiaryMediumFontSize": "length", - "tertiaryLargeFontSize": "length", - "tertiaryFontWeight": "fWeight" - }, - "card": { - "height": "length", - "width": "length" - }, - "checkbox": { - "backgroundColorChecked": "color", - "hoverBackgroundColorChecked": "color", - "disabledBackgroundColorChecked": "color", - "readOnlyBackgroundColorChecked": "color", - "hoverReadOnlyBackgroundColorChecked": "color", - "borderColor": "color", - "hoverBorderColor": "color", - "disabledBorderColor": "color", - "readOnlyBorderColor": "color", - "hoverReadOnlyBorderColor": "color", - "checkColor": "color", - "disabledCheckColor": "color", - "readOnlyCheckColor": "color", - "fontFamily": "fFamily", - "fontSize": "length", - "fontWeight": "fWeight", - "fontColor": "color", - "disabledFontColor": "color", - "focusColor": "color", - "checkLabelSpacing": "length" - }, - "chip": { - "backgroundColor": "color", - "disabledBackgroundColor": "color", - "disabledFontColor": "color", - "fontColor": "color", - "fontFamily": "fFamily", - "fontSize": "length", - "fontStyle": "fStyle", - "fontWeight": "fWeight", - "borderColor": "color", - "borderRadius": "length", - "borderThickness": "bWidth", - "borderStyle": "bStyle", - "contentPaddingLeft": "length", - "contentPaddingRight": "length", - "contentPaddingTop": "length", - "contentPaddingBottom": "length", - "iconSize": "length", - "iconSpacing": "length", - "iconColor": "color", - "hoverIconColor": "color", - "activeIconColor": "color", - "disabledIconColor": "color", - "focusColor": "color", - "focusBorderStyle": "bStyle", - "focusBorderThickness": "bWidth", - "focusBorderRadius": "length" - }, - "contextualMenu": { - "fontFamily": "fFamily", - "backgroundColor": "color", - "borderColor": "color", - "menuItemFontColor": "color", - "menuItemFontSize": "length", - "menuItemFontStyle": "fStyle", - "menuItemFontWeight": "fWeight", - "menuItemLineHeight": "length", - "hoverMenuItemBackgroundColor": "color", - "activeMenuItemBackgroundColor": "color", - "selectedMenuItemBackgroundColor": "color", - "hoverSelectedMenuItemBackgroundColor": "color", - "activeSelectedMenuItemBackgroundColor": "color", - "selectedMenuItemFontWeight": "fWeight", - "sectionTitleFontColor": "color", - "sectionTitleFontSize": "length", - "sectionTitleFontStyle": "fStyle", - "sectionTitleFontWeight": "fWeight", - "sectionTitleLineHeight": "length", - "iconColor": "color", - "iconSize": "length" - }, - "dataGrid": { - "rowSeparatorThickness": "length", - "rowSeparatorStyle": "bStyle", - "rowSeparatorColor": "color", - "dataBackgroundColor": "color", - "dataFontFamily": "fFamily", - "dataFontSize": "length", - "dataFontStyle": "fStyle", - "dataFontWeight": "fWeight", - "dataFontColor": "color", - "dataFontTextTransform": "fTextTransform", - "dataPaddingRight": "length", - "dataPaddingLeft": "length", - "dataRowHeight": "length", - "dataTextLineHeight": "length", - "headerBackgroundColor": "color", - "headerBorderRadius": "length", - "headerFontFamily": "fFamily", - "headerFontSize": "length", - "headerFontStyle": "fStyle", - "headerFontWeight": "fWeight", - "headerFontColor": "color", - "headerFontTextTransform": "fTextTransform", - "headerPaddingRight": "length", - "headerPaddingLeft": "length", - "headerRowHeight": "length", - "headerTextLineHeight": "length", - "headerCheckboxBackgroundColorChecked": "color", - "headerCheckboxHoverBackgroundColorChecked": "color", - "headerCheckboxBorderColor": "color", - "headerCheckboxHoverBorderColor": "color", - "headerCheckboxCheckColor": "color", - "summaryRowHeight": "length", - "focusColor": "color", - "scrollBarThumbColor": "color", - "scrollBarTrackColor": "color" - }, - "dateInput": { - "pickerBackgroundColor": "color", - "pickerFontColor": "color", - "pickerBorderColor": "color", - "pickerSelectedBackgroundColor": "color", - "pickerSelectedFontColor": "color", - "pickerHoverBackgroundColor": "color", - "pickerHoverFontColor": "color", - "pickerActiveBackgroundColor": "color", - "pickerActiveFontColor": "color", - "pickerNonCurrentMonthFontColor": "color", - "pickerCurrentDateBorderColor": "color", - "pickerCurrentDateFontColor": "color", - "pickerCurrentYearFontColor": "color", - "pickerHeaderBackgroundColor": "color", - "pickerHeaderFontColor": "color", - "pickerHeaderHoverBackgroundColor": "color", - "pickerHeaderHoverFontColor": "color", - "pickerHeaderActiveBackgroundColor": "color", - "pickerHeaderActiveFontColor": "color", - "pickerFocusColor": "color", - "pickerBorderWidth": "bWidth", - "pickerBorderStyle": "bStyle", - "pickerFocusWidth": "bWidth", - "pickerCurrentDateBorderWidth": "bWidth", - "pickerFontFamily": "fFamily", - "pickerFontSize": "length", - "pickerFontWeight": "fWeight", - "pickerInteractedYearFontSize": "length", - "pickerHeaderFontSize": "length" - }, - "dialog": { - "overlayColor": "color", - "backgroundColor": "color", - "closeIconBackgroundColor": "color", - "closeIconColor": "color", - "boxShadowOffsetX": "length", - "boxShadowOffsetY": "length", - "boxShadowBlur": "length", - "boxShadowColor": "color" - }, - "dropdown": { - "buttonBackgroundColor": "color", - "hoverButtonBackgroundColor": "color", - "activeButtonBackgroundColor": "color", - "buttonFontFamily": "fFamily", - "buttonFontSize": "length", - "buttonFontStyle": "fStyle", - "buttonFontWeight": "fWeight", - "buttonFontColor": "color", - "buttonIconSize": "length", - "buttonIconSpacing": "length", - "buttonIconColor": "color", - "buttonPaddingTop": "length", - "buttonPaddingBottom": "length", - "buttonPaddingLeft": "length", - "buttonPaddingRight": "length", - "buttonHeight": "length", - "buttonBorderRadius": "length", - "buttonBorderStyle": "bStyle", - "buttonBorderThickness": "bWidth", - "buttonBorderColor": "color", - "disabledColor": "color", - "disabledButtonBackgroundColor": "color", - "disabledButtonBorderColor": "color", - "optionBackgroundColor": "color", - "hoverOptionBackgroundColor": "color", - "activeOptionBackgroundColor": "color", - "optionFontFamily": "fFamily", - "optionFontSize": "length", - "optionFontStyle": "fStyle", - "optionFontWeight": "fWeight", - "optionFontColor": "color", - "optionIconSize": "length", - "optionIconSpacing": "length", - "optionIconColor": "color", - "optionPaddingTop": "length", - "optionPaddingBottom": "length", - "optionPaddingLeft": "length", - "optionPaddingRight": "length", - "caretIconSize": "length", - "caretIconColor": "color", - "caretIconSpacing": "length", - "borderRadius": "length", - "borderStyle": "bStyle", - "borderThickness": "bWidth", - "borderColor": "color", - "scrollBarThumbColor": "color", - "scrollBarTrackColor": "color", - "focusColor": "color" - }, - "fileInput": { - "dropBorderColor": "color", - "fileItemBorderColor": "color", - "fileNameFontColor": "color", - "labelFontColor": "color", - "helperTextFontColor": "color", - "dropLabelFontColor": "color", - "disabledLabelFontColor": "color", - "disabledHelperTextFontColor": "color", - "disabledDropLabelFontColor": "color", - "focusDropBorderColor": "color", - "disabledDropBorderColor": "color", - "dragoverDropBackgroundColor": "color", - "errorFileItemBorderColor": "color", - "errorFileItemBackgroundColor": "color", - "errorFilePreviewBackgroundColor": "color", - "errorFileItemIconColor": "color", - "fileItemIconBackgroundColor": "color", - "deleteFileItemColor": "color", - "focusDeleteFileItemBorderColor": "color", - "errorMessageFontColor": "color", - "hoverDeleteFileItemBackgroundColor": "color", - "activeDeleteFileItemBackgroundColor": "color", - "labelFontFamily": "fFamily", - "labelFontSize": "length", - "labelFontWeight": "fWeight", - "labelLineHeight": "length", - "fileItemFontFamily": "fFamily", - "fileItemFontSize": "length", - "fileItemFontWeight": "fWeight", - "fileItemLineHeight": "length", - "helperTextFontFamily": "fFamily", - "helperTextFontSize": "length", - "helperTextFontWeight": "fWeight", - "helperTextLineHeight": "length", - "dropLabelFontFamily": "fFamily", - "dropLabelFontSize": "length", - "dropLabelFontWeight": "fWeight", - "errorMessageFontFamily": "fFamily", - "errorMessageFontSize": "length", - "errorMessageFontWeight": "fWeight", - "errorMessageLineHeight": "length", - "dropBorderThickness": "bWidth", - "dropBorderStyle": "bStyle", - "dropBorderRadius": "length", - "fileItemBorderThickness": "bWidth", - "fileItemBorderStyle": "bStyle", - "fileItemBorderRadius": "length", - "filePreviewBackgroundColor": "color", - "filePreviewIconColor": "color", - "errorFilePreviewIconColor": "color" - }, - "footer": { - "height": "length", - "backgroundColor": "color", - "bottomLinksDividerColor": "color", - "bottomLinksDividerThickness": "bWidth", - "bottomLinksDividerStyle": "bStyle", - "bottomLinksDividerSpacing": "length", - "bottomLinksFontFamily": "fFamily", - "bottomLinksFontSize": "length", - "bottomLinksFontStyle": "fStyle", - "bottomLinksFontWeight": "fWeight", - "bottomLinksFontColor": "color", - "bottomLinksTextDecoration": "text", - "copyrightFontFamily": "fFamily", - "copyrightFontSize": "length", - "copyrightFontStyle": "fStyle", - "copyrightFontWeight": "fWeight", - "copyrightFontColor": "color", - "logo": "image", - "logoHeight": "length", - "logoWidth": "length", - "socialLinksSize": "length", - "socialLinksGutter": "length", - "socialLinksColor": "color" - }, - "header": { - "backgroundColor": "color", - "underlinedColor": "color", - "menuBackgroundColor": "color", - "hamburgerIconColor": "color", - "hamburgerHoverColor": "color", - "overlayColor": "color", - "hamburgerFocusColor": "color", - "logo": "image", - "logoResponsive": "image", - "hamburgerTextTransform": "fTextTransform", - "underlinedThickness": "bWidth", - "underlinedStyle": "bStyle", - "minHeight": "length", - "logoHeight": "length", - "logoWidth": "length", - "paddingTop": "length", - "paddingBottom": "length", - "paddingRight": "length", - "paddingLeft": "length", - "menuZindex": "integer", - "menuTabletWidth": "length", - "menuMobileWidth": "length", - "overlayOpacity": "alphaValue", - "overlayZindex": "integer", - "hamburgerFontFamily": "fFamily", - "hamburgerFontStyle": "fStyle", - "hamburgerFontColor": "color", - "hamburgerFontSize": "length", - "hamburgerFontWeight": "fWeight", - "contentColor": "color" - }, - "heading": { - "level5FontSize": "length", - "level4FontSize": "length", - "level3FontSize": "length", - "level2FontSize": "length", - "level1FontSize": "length", - "level1FontFamily": "fFamily", - "level1FontStyle": "fStyle", - "level1FontColor": "color", - "level1FontWeight": "fWeight", - "level1LineHeight": "length", - "level1LetterSpacing": "length", - "level2FontFamily": "fFamily", - "level2FontStyle": "fStyle", - "level2FontColor": "color", - "level2FontWeight": "fWeight", - "level2LineHeight": "length", - "level2LetterSpacing": "length", - "level3FontFamily": "fFamily", - "level3FontStyle": "fStyle", - "level3FontColor": "color", - "level3FontWeight": "fWeight", - "level3LineHeight": "length", - "level3LetterSpacing": "length", - "level4FontFamily": "fFamily", - "level4FontStyle": "fStyle", - "level4FontColor": "color", - "level4FontWeight": "fWeight", - "level4LineHeight": "length", - "level4LetterSpacing": "length", - "level5FontFamily": "fFamily", - "level5FontStyle": "fStyle", - "level5FontColor": "color", - "level5FontWeight": "fWeight", - "level5LineHeight": "length", - "level5LetterSpacing": "length" - }, - "image": { - "captionFontColor": "color", - "captionFontFamily": "fFamily", - "captionFontSize": "length", - "captionFontStyle": "fStyle", - "captionFontWeight": "fWeight", - "captionLineHeight": "length" - }, - "link": { - "fontColor": "color", - "visitedFontColor": "color", - "visitedUnderlineColor": "color", - "disabledFontColor": "color", - "hoverFontColor": "color", - "hoverUnderlineColor": "color", - "activeFontColor": "color", - "activeUnderlineColor": "color", - "fontSize": "length", - "fontWeight": "fWeight", - "fontStyle": "fStyle", - "fontFamily": "fFamily", - "underlineSpacing": "length", - "underlineStyle": "bStyle", - "underlineThickness": "bWidth", - "iconSize": "length", - "iconSpacing": "length", - "focusColor": "color" - }, - "navTabs": { - "selectedBackgroundColor": "color", - "unselectedBackgroundColor": "color", - "hoverBackgroundColor": "color", - "pressedBackgroundColor": "color", - "selectedFontColor": "color", - "unselectedFontColor": "color", - "disabledFontColor": "color", - "focusOutline": "color", - "selectedUnderlineColor": "color", - "dividerColor": "color", - "fontFamily": "fFamily", - "fontSize": "length", - "fontStyle": "fStyle", - "fontWeight": "fWeight", - "selectedIconColor": "color", - "unselectedIconColor": "color", - "disabledIconColor": "color" - }, - "paginator": { - "backgroundColor": "color", - "fontColor": "color", - "fontFamily": "fFamily", - "fontSize": "length", - "fontWeight": "fWeight", - "fontStyle": "fStyle", - "fontTextTransform": "fTextTransform", - "verticalPadding": "length", - "horizontalPadding": "length", - "itemsPerPageSelectorMarginLeft": "length", - "itemsPerPageSelectorMarginRight": "length", - "totalItemsContainerMarginRight": "length", - "totalItemsContainerMarginLeft": "length", - "marginRight": "length", - "marginLeft": "length", - "pageSelectorMarginRight": "length", - "pageSelectorMarginLeft": "length" - }, - "paragraph": { - "fontColor": "color", - "display": "display", - "fontSize": "length", - "fontWeight": "fWeight" - }, - "progressBar": { - "trackLineColor": "color", - "totalLineColor": "color", - "labelFontFamily": "fFamily", - "labelFontSize": "length", - "labelFontStyle": "fStyle", - "labelFontWeight": "fWeight", - "labelFontColor": "color", - "labelFontTextTransform": "fTextTransform", - "valueFontFamily": "fFamily", - "valueFontSize": "length", - "valueFontStyle": "fStyle", - "valueFontWeight": "fWeight", - "valueFontColor": "color", - "valueFontTextTransform": "fTextTransform", - "helperTextFontColor": "color", - "helperTextFontSize": "length", - "helperTextFontStyle": "fStyle", - "helperTextFontWeight": "fWeight", - "helperTextFontFamily": "fFamily", - "thickness": "length", - "borderRadius": "length", - "overlayColor": "color", - "overlayFontColor": "color" - }, - "quickNav": { - "fontColor": "color", - "hoverFontColor": "color", - "dividerBorderColor": "color", - "focusBorderColor": "color", - "focusBorderStyle": "bStyle", - "focusBorderThickness": "bWidth", - "focusBorderRadius": "length", - "paddingTop": "length", - "paddingBottom": "length", - "paddingLeft": "length", - "paddingRight": "length", - "fontFamily": "fFamily", - "fontSize": "length", - "fontStyle": "fStyle", - "fontWeight": "fWeight" - }, - "radioGroup": { - "fontFamily": "fFamily", - "radioInputColor": "color", - "hoverRadioInputColor": "color", - "focusBorderColor": "color", - "activeRadioInputColor": "color", - "errorRadioInputColor": "color", - "hoverErrorRadioInputColor": "color", - "activeErrorRadioInputColor": "color", - "readOnlyRadioInputColor": "color", - "hoverReadOnlyRadioInputColor": "color", - "activeReadOnlyRadioInputColor": "color", - "disabledRadioInputColor": "color", - "disabledLabelFontColor": "color", - "disabledHelperTextFontColor": "color", - "disabledRadioInputLabelFontColor": "color", - "errorMessageColor": "color", - "labelFontColor": "color", - "labelFontSize": "length", - "labelFontStyle": "fStyle", - "labelFontWeight": "fWeight", - "labelLineHeight": "length", - "optionalLabelFontWeight": "fWeight", - "helperTextFontColor": "color", - "helperTextFontSize": "length", - "helperTextFontStyle": "fStyle", - "helperTextFontWeight": "fWeight", - "helperTextLineHeight": "length", - "radioInputLabelFontColor": "color", - "radioInputLabelFontSize": "length", - "radioInputLabelFontStyle": "fStyle", - "radioInputLabelFontWeight": "fWeight", - "radioInputLabelLineHeight": "length", - "groupLabelMargin": "length", - "radioInputLabelMargin": "length", - "groupVerticalGutter": "length", - "groupHorizontalGutter": "length" - }, - "select": { - "fontFamily": "fFamily", - "disabledColor": "color", - "enabledInputBorderColor": "color", - "hoverInputBorderColor": "color", - "focusInputBorderColor": "color", - "errorInputBorderColor": "color", - "hoverInputErrorBorderColor": "color", - "disabledInputBorderColor": "color", - "disabledInputBackgroundColor": "color", - "inputMarginTop": "length", - "inputMarginBottom": "length", - "errorMessageColor": "color", - "errorIconColor": "color", - "labelFontColor": "color", - "labelFontSize": "length", - "labelFontStyle": "fStyle", - "labelFontWeight": "fWeight", - "labelLineHeight": "length", - "optionalLabelFontWeight": "fWeight", - "helperTextFontColor": "color", - "helperTextFontSize": "length", - "helperTextFontStyle": "fStyle", - "helperTextFontWeight": "fWeight", - "helperTextLineHeight": "length", - "placeholderFontColor": "color", - "valueFontColor": "color", - "valueFontSize": "length", - "valueFontStyle": "fStyle", - "valueFontWeight": "fWeight", - "actionIconColor": "color", - "hoverActionIconColor": "color", - "activeActionIconColor": "color", - "actionBackgroundColor": "color", - "hoverActionBackgroundColor": "color", - "activeActionBackgroundColor": "color", - "listOptionFontColor": "color", - "listOptionFontSize": "length", - "listOptionFontStyle": "fStyle", - "listOptionFontWeight": "fWeight", - "listOptionIconColor": "color", - "listOptionDividerColor": "color", - "listGroupLabelFontWeight": "fWeight", - "focusListOptionBorderColor": "color", - "systemMessageFontColor": "color", - "collapseIndicatorColor": "color", - "listDialogBackgroundColor": "color", - "listDialogBorderColor": "color", - "selectedListOptionBackgroundColor": "color", - "selectedHoverListOptionBackgroundColor": "color", - "selectedActiveListOptionBackgroundColor": "color", - "selectedListOptionIconColor": "color", - "unselectedHoverListOptionBackgroundColor": "color", - "unselectedActiveListOptionBackgroundColor": "color", - "selectionIndicatorFontColor": "color", - "selectionIndicatorFontSize": "length", - "selectionIndicatorFontStyle": "fStyle", - "selectionIndicatorFontWeight": "fWeight", - "selectionIndicatorBorderColor": "color", - "selectionIndicatorBackgroundColor": "color", - "enabledSelectionIndicatorActionBackgroundColor": "color", - "enabledSelectionIndicatorActionIconColor": "color", - "hoverSelectionIndicatorActionBackgroundColor": "color", - "hoverSelectionIndicatorActionIconColor": "color", - "activeSelectionIndicatorActionBackgroundColor": "color", - "activeSelectionIndicatorActionIconColor": "color" - }, - "sidenav": { - "backgroundColor": "color", - "titleFontFamily": "fFamily", - "titleFontSize": "length", - "titleFontStyle": "fStyle", - "titleFontWeight": "fWeight", - "titleFontColor": "color", - "titleFontTextTransform": "fTextTransform", - "titleFontLetterSpacing": "length", - "groupTitleFontFamily": "fFamily", - "groupTitleFontSize": "length", - "groupTitleFontStyle": "fStyle", - "groupTitleFontWeight": "fWeight", - "groupTitleFontColor": "color", - "groupTitleHoverBackgroundColor": "color", - "groupTitleActiveBackgroundColor": "color", - "groupTitleSelectedFontColor": "color", - "groupTitleSelectedBackgroundColor": "color", - "groupTitleSelectedHoverFontColor": "color", - "groupTitleSelectedHoverBackgroundColor": "color", - "groupTitleFontTextTransform": "fTextTransform", - "groupTitleFontLetterSpacing": "length", - "linkFontFamily": "fFamily", - "linkFontSize": "length", - "linkFontStyle": "fStyle", - "linkFontWeight": "fWeight", - "linkFontColor": "color", - "linkHoverBackgroundColor": "color", - "linkSelectedFontColor": "color", - "linkSelectedBackgroundColor": "color", - "linkSelectedHoverFontColor": "color", - "linkSelectedHoverBackgroundColor": "color", - "linkFontTextTransform": "fTextTransform", - "linkFontLetterSpacing": "length", - "linkTextDecoration": "text", - "linkMarginTop": "length", - "linkMarginRight": "length", - "linkMarginBottom": "length", - "linkMarginLeft": "length", - "linkFocusColor": "color", - "scrollBarThumbColor": "color", - "scrollBarTrackColor": "color" - }, - "slider": { - "fontFamily": "fFamily", - "limitValuesFontColor": "color", - "limitValuesFontSize": "length", - "limitValuesFontStyle": "fStyle", - "limitValuesFontWeight": "fWeight", - "limitValuesFontLetterSpacing": "length", - "disabledLimitValuesFontColor": "color", - "labelFontFamily": "fFamily", - "labelFontSize": "length", - "labelFontStyle": "fStyle", - "labelFontWeight": "fWeight", - "labelLineHeight": "length", - "helperTextFontFamily": "fFamily", - "helperTextFontSize": "length", - "helperTextFontStyle": "fStyle", - "helperTextFontWeight": "fWeight", - "helperTextLineHeight": "length", - "fontColor": "color", - "labelFontColor": "color", - "helperTextFontColor": "color", - "disabledLabelFontColor": "color", - "disabledHelperTextFontColor": "color", - "thumbHeight": "length", - "thumbWidth": "length", - "hoverThumbHeight": "length", - "hoverThumbWidth": "length", - "thumbVerticalPosition": "length", - "hoverThumbVerticalPosition": "length", - "thumbBackgroundColor": "color", - "hoverThumbScale": "scale", - "hoverThumbBackgroundColor": "color", - "activeThumbScale": "scale", - "activeThumbBackgroundColor": "color", - "focusThumbBackgroundColor": "color", - "tickHeight": "length", - "tickWidth": "length", - "tickVerticalPosition": "length", - "tickBackgroundColor": "color", - "trackLineThickness": "length", - "trackLineVerticalPosition": "length", - "trackLineColor": "color", - "totalLineThickness": "length", - "totalLineVerticalPosition": "length", - "totalLineColor": "color", - "disabledThumbVerticalPosition": "length", - "disabledThumbBackgroundColor": "color", - "disabledTickVerticalPosition": "length", - "disabledTickBackgroundColor": "color", - "disabledTrackLineColor": "color", - "disabledTotalLineColor": "color", - "focusColor": "color", - "floorLabelMarginRight": "length", - "ceilLabelMarginLeft": "length", - "inputMarginLeft": "length" - }, - "spinner": { - "trackCircleColor": "color", - "trackCircleColorOverlay": "color", - "totalCircleColor": "color", - "labelFontFamily": "fFamily", - "labelFontSize": "length", - "labelFontStyle": "fStyle", - "labelFontWeight": "fWeight", - "labelFontColor": "color", - "labelTextAlign": "textAlign", - "progressValueFontFamily": "fFamily", - "progressValueFontSize": "length", - "progressValueFontStyle": "fStyle", - "progressValueFontWeight": "fWeight", - "progressValueFontColor": "color", - "progressValueTextAlign": "textAlign", - "overlayBackgroundColor": "color", - "overlayOpacity": "alphaValue", - "overlayLabelFontFamily": "fFamily", - "overlayLabelFontSize": "length", - "overlayLabelFontStyle": "fStyle", - "overlayLabelFontWeight": "fWeight", - "overlayLabelFontColor": "color", - "overlayLabelTextAlign": "textAlign", - "overlayProgressValueFontFamily": "fFamily", - "overlayProgressValueFontSize": "length", - "overlayProgressValueFontStyle": "fStyle", - "overlayProgressValueFontWeight": "fWeight", - "overlayProgressValueFontColor": "color", - "overlayProgressValueTextAlign": "textAlign" - }, - "switch": { - "checkedTrackBackgroundColor": "color", - "checkedThumbBackgroundColor": "color", - "uncheckedTrackBackgroundColor": "color", - "uncheckedThumbBackgroundColor": "color", - "disabledCheckedTrackBackgroundColor": "color", - "disabledCheckedThumbBackgroundColor": "color", - "disabledUncheckedTrackBackgroundColor": "color", - "disabledUncheckedThumbBackgroundColor": "color", - "disabledLabelFontColor": "color", - "disabledLabelFontStyle": "fStyle", - "labelFontFamily": "fFamily", - "labelFontSize": "length", - "labelFontStyle": "fStyle", - "labelFontWeight": "fWeight", - "labelFontColor": "color", - "thumbFocusColor": "color", - "thumbHeight": "length", - "thumbWidth": "length", - "thumbShift": "length", - "trackHeight": "length", - "trackWidth": "length", - "spaceBetweenLabelSwitch": "length" - }, - "table": { - "rowSeparatorThickness": "length", - "rowSeparatorStyle": "fStyle", - "rowSeparatorColor": "color", - "dataBackgroundColor": "color", - "dataFontFamily": "fFamily", - "dataFontSize": "length", - "dataFontStyle": "fStyle", - "dataFontWeight": "fWeight", - "dataFontColor": "color", - "dataFontTextTransform": "fTextTransform", - "dataPaddingTop": "length", - "dataPaddingBottom": "length", - "dataPaddingRight": "length", - "dataPaddingLeft": "length", - "dataPaddingTopReduced": "length", - "dataPaddingBottomReduced": "length", - "dataPaddingRightReduced": "length", - "dataPaddingLeftReduced": "length", - "dataTextAlign": "textAlign", - "dataTextLineHeight": "length", - "firstChildPaddingLeft": "length", - "lastChildPaddingRight": "length", - "firstChildPaddingLeftReduced": "length", - "lastChildPaddingRightReduced": "length", - "headerBackgroundColor": "color", - "headerBorderRadius": "length", - "headerFontFamily": "fFamily", - "headerFontSize": "length", - "headerFontStyle": "fStyle", - "headerFontWeight": "fWeight", - "headerFontColor": "color", - "headerFontTextTransform": "fTextTransform", - "headerPaddingTop": "length", - "headerPaddingBottom": "length", - "headerPaddingRight": "length", - "headerPaddingLeft": "length", - "headerPaddingTopReduced": "length", - "headerPaddingBottomReduced": "length", - "headerPaddingRightReduced": "length", - "headerPaddingLeftReduced": "length", - "headerTextAlign": "textAlign", - "headerTextLineHeight": "length", - "scrollBarThumbColor": "color", - "scrollBarTrackColor": "color", - "sortIconColor": "color", - "actionIconColor": "color", - "disabledActionIconColor": "color", - "hoverActionIconColor": "color", - "focusActionIconColor": "color", - "activeActionIconColor": "color", - "actionBackgroundColor": "color", - "disabledActionBackgroundColor": "color", - "hoverActionBackgroundColor": "color", - "focusActionBorderColor": "color", - "activeActionBackgroundColor": "color" - }, - "tabs": { - "fontFamily": "fFamily", - "fontSize": "length", - "fontStyle": "fStyle", - "fontWeight": "fWeight", - "fontTextTransform": "fTextTransform", - "selectedBackgroundColor": "color", - "selectedFontColor": "color", - "selectedIconColor": "color", - "selectedUnderlineColor": "color", - "selectedUnderlineThickness": "bWidth", - "unselectedBackgroundColor": "color", - "unselectedFontColor": "color", - "unselectedIconColor": "color", - "disabledFontColor": "color", - "disabledIconColor": "color", - "disabledFontStyle": "fStyle", - "hoverBackgroundColor": "color", - "pressedBackgroundColor": "color", - "pressedFontWeight": "fWeight", - "dividerColor": "color", - "dividerThickness": "length", - "focusOutline": "color", - "scrollButtonsWidth": "length" - }, - "tag": { - "fontFamily": "fFamily", - "fontColor": "color", - "fontSize": "length", - "fontStyle": "fStyle", - "fontWeight": "fWeight", - "labelPaddingTop": "length", - "labelPaddingBottom": "length", - "labelPaddingLeft": "length", - "labelPaddingRight": "length", - "height": "length", - "iconColor": "color", - "iconSectionWidth": "length", - "iconHeight": "length", - "iconWidth": "length", - "focusColor": "color" - }, - "textarea": { - "fontFamily": "fFamily", - "enabledBorderColor": "color", - "hoverBorderColor": "color", - "focusBorderColor": "color", - "disabledBorderColor": "color", - "disabledContainerFillColor": "color", - "readOnlyBorderColor": "color", - "hoverReadOnlyBorderColor": "color", - "errorBorderColor": "color", - "hoverErrorBorderColor": "color", - "inputMarginTop": "length", - "inputMarginBottom": "length", - "errorMessageColor": "color", - "labelFontColor": "color", - "labelFontSize": "length", - "labelFontStyle": "fStyle", - "labelFontWeight": "fWeight", - "labelLineHeight": "height", - "disabledLabelFontColor": "color", - "optionalLabelFontWeight": "fWeight", - "helperTextFontColor": "color", - "helperTextFontSize": "length", - "helperTextFontStyle": "fStyle", - "helperTextFontWeight": "fWeight", - "helperTextLineHeight": "length", - "disabledHelperTextFontColor": "color", - "placeholderFontColor": "color", - "disabledPlaceholderFontColor": "color", - "valueFontColor": "color", - "valueFontSize": "length", - "valueFontStyle": "fStyle", - "valueFontWeight": "fWeight", - "disabledValueFontColor": "color" - }, - "textInput": { - "fontFamily": "fFamily", - "enabledBorderColor": "color", - "hoverBorderColor": "color", - "focusBorderColor": "color", - "disabledBorderColor": "color", - "disabledContainerFillColor": "color", - "readOnlyBorderColor": "color", - "hoverReadOnlyBorderColor": "color", - "errorBorderColor": "color", - "hoverErrorBorderColor": "color", - "inputMarginTop": "length", - "inputMarginBottom": "length", - "errorMessageColor": "color", - "errorIconColor": "color", - "labelFontColor": "color", - "labelFontSize": "length", - "labelFontStyle": "fStyle", - "labelFontWeight": "fWeight", - "labelLineHeight": "length", - "disabledLabelFontColor": "color", - "optionalLabelFontWeight": "fWeight", - "helperTextFontColor": "color", - "helperTextFontSize": "length", - "helperTextFontStyle": "fStyle", - "helperTextFontWeight": "fWeight", - "helperTextLineHeight": "length", - "disabledHelperTextFontColor": "color", - "prefixColor": "color", - "prefixDividerBorderWidth": "length", - "prefixDividerBorderStyle": "bStyle", - "prefixDividerPaddingRight": "length", - "suffixColor": "color", - "suffixDividerBorderWidth": "length", - "suffixDividerBorderStyle": "bStyle", - "suffixDividerPaddingLeft": "length", - "disabledPrefixColor": "color", - "disabledSuffixColor": "color", - "placeholderFontColor": "color", - "disabledPlaceholderFontColor": "color", - "valueFontColor": "color", - "valueFontSize": "length", - "valueFontStyle": "fStyle", - "valueFontWeight": "fWeight", - "disabledValueFontColor": "color", - "actionIconColor": "color", - "disabledActionIconColor": "color", - "hoverActionIconColor": "color", - "focusActionIconColor": "color", - "activeActionIconColor": "color", - "actionBackgroundColor": "color", - "disabledActionBackgroundColor": "color", - "hoverActionBackgroundColor": "color", - "focusActionBorderColor": "color", - "activeActionBackgroundColor": "color", - "listDialogBackgroundColor": "color", - "listDialogBorderColor": "color", - "listOptionDividerColor": "color", - "listOptionFontColor": "color", - "listOptionFontSize": "length", - "listOptionFontStyle": "fStyle", - "listOptionFontWeight": "fWeight", - "systemMessageFontColor": "color", - "errorListDialogFontColor": "color", - "errorListDialogBackgroundColor": "color", - "errorListDialogBorderColor": "color", - "hoverListOptionBackgroundColor": "color", - "activeListOptionBackgroundColor": "color", - "focusListOptionBorderColor": "color" - }, - "toggleGroup": { - "containerBackgroundColor": "color", - "containerBorderColor": "color", - "labelFontColor": "color", - "disabledLabelFontColor": "color", - "helperTextFontColor": "color", - "disabledHelperTextFontColor": "color", - "unselectedBackgroundColor": "color", - "unselectedHoverBackgroundColor": "color", - "unselectedActiveBackgroundColor": "color", - "unselectedDisabledBackgroundColor": "color", - "unselectedFontColor": "color", - "unselectedDisabledFontColor": "color", - "selectedBackgroundColor": "color", - "selectedHoverBackgroundColor": "color", - "selectedActiveBackgroundColor": "color", - "selectedDisabledBackgroundColor": "color", - "selectedFontColor": "color", - "selectedDisabledFontColor": "color", - "focusColor": "color", - "labelFontFamily": "fFamily", - "labelFontSize": "length", - "labelFontStyle": "fStyle", - "labelFontWeight": "fWeight", - "labelLineHeight": "length", - "helperTextFontFamily": "fFamily", - "helperTextFontSize": "length", - "helperTextFontStyle": "fStyle", - "helperTextFontWeight": "fWeight", - "helperTextLineHeight": "length", - "optionLabelFontFamily": "fFamily", - "optionLabelFontSize": "length", - "optionLabelFontStyle": "fStyle", - "optionLabelFontWeight": "fWeight", - "iconPaddingRight": "length", - "iconPaddingLeft": "length", - "labelPaddingLeft": "length", - "labelPaddingRight": "length", - "iconMarginRight": "length", - "containerMarginTop": "length", - "optionBorderThickness": "bWidth", - "optionBorderStyle": "bStyle", - "optionBorderRadius": "length", - "containerBorderThickness": "bWidth", - "containerBorderStyle": "bStyle", - "containerBorderRadius": "length", - "optionFocusBorderThickness": "bWidth" - }, - "wizard": { - "visitedStepFontColor": "color", - "visitedStepBackgroundColor": "color", - "visitedStepBorderColor": "color", - "unvisitedStepFontColor": "color", - "unvisitedLabelFontColor": "color", - "unvisitedHelperTextFontColor": "color", - "unvisitedStepBackgroundColor": "color", - "unvisitedStepBorderColor": "color", - "selectedStepFontColor": "color", - "selectedStepBackgroundColor": "color", - "selectedStepBorderColor": "color", - "selectedLabelFontColor": "color", - "selectedHelperTextFontColor": "color", - "selectedStepWidth": "length", - "selectedStepHeight": "length", - "selectedStepBorderThickness": "bWidth", - "selectedStepBorderStyle": "bStyle", - "selectedStepBorderRadius": "length", - "stepFontSize": "length", - "stepFontFamily": "fFamily", - "stepFontStyle": "fStyle", - "stepFontWeight": "fWeight", - "stepFontTracking": "length", - "stepIconSize": "length", - "stepWidth": "length", - "stepHeight": "length", - "stepBorderThickness": "bWidth", - "stepBorderStyle": "bStyle", - "stepBorderRadius": "length", - "visitedLabelFontColor": "color", - "labelFontSize": "length", - "labelFontFamily": "fFamily", - "labelFontStyle": "fStyle", - "labelFontWeight": "fWeight", - "labelFontTracking": "length", - "labelFontTextTransform": "fTextTransform", - "labelTextAlign": "textAlign", - "helperTextFontSize": "length", - "helperTextFontFamily": "fFamily", - "helperTextFontStyle": "fStyle", - "helperTextFontWeight": "fWeight", - "helperTextFontTracking": "length", - "helperTextFontTextTransform": "fTextTransform", - "visitedHelperTextFontColor": "color", - "helperTextTextAlign": "textAlign", - "disabledStepBackgroundColor": "color", - "disabledStepFontColor": "color", - "disabledLabelFontColor": "color", - "disabledHelperTextFontColor": "color", - "disabledStepBorderColor": "color", - "disabledStepWidth": "length", - "disabledStepHeight": "length", - "disabledStepBorderThickness": "bWidth", - "disabledStepBorderStyle": "bStyle", - "disabledStepBorderRadius": "length", - "separatorBorderThickness": "bWidth", - "separatorBorderStyle": "bStyle", - "separatorColor": "color", - "focusColor": "color" - } -} diff --git a/apps/website/screens/theme-generator/themes/schemas/opinionated.schema.json b/apps/website/screens/theme-generator/themes/schemas/opinionated.schema.json deleted file mode 100644 index cb7bcd9f89..0000000000 --- a/apps/website/screens/theme-generator/themes/schemas/opinionated.schema.json +++ /dev/null @@ -1,150 +0,0 @@ -{ - "accordion": { - "accentColor": "color", - "titleFontColor": "color", - "subLabelFontColor": "color", - "assistiveTextFontColor": "color" - }, - "button": { - "baseColor": "color", - "primaryFontColor": "color", - "secondaryHoverFontColor": "color" - }, - "checkbox": { - "baseColor": "color", - "checkColor": "color", - "fontColor": "color" - }, - "chip": { - "baseColor": "color", - "fontColor": "color", - "iconColor": "color" - }, - "contextualMenu": { - "accentColor": "color", - "baseColor": "color", - "fontColor": "color", - "iconColor": "color" - }, - "dataGrid": { - "baseColor": "color", - "headerFontColor": "color", - "cellFontColor": "color" - }, - "dateInput": { - "baseColor": "color", - "selectedFontColor": "color" - }, - "dialog": { - "baseColor": "color", - "closeIconColor": "color", - "overlayColor": "color" - }, - "dropdown": { - "baseColor": "color", - "fontColor": "color", - "optionFontColor": "color" - }, - "fileInput": { - "fontColor": "color" - }, - "footer": { - "baseColor": "color", - "fontColor": "color", - "accentColor": "color", - "logo": "image" - }, - "header": { - "baseColor": "color", - "accentColor": "color", - "fontColor": "color", - "menuBaseColor": "color", - "hamburgerColor": "color", - "logo": "image", - "logoResponsive": "image", - "contentColor": "color", - "overlayColor": "color" - }, - "link": { - "baseColor": "color" - }, - "navTabs": { - "baseColor": "color", - "accentColor": "color" - }, - "paginator": { - "baseColor": "color", - "fontColor": "color" - }, - "progressBar": { - "accentColor": "color", - "baseColor": "color", - "fontColor": "color", - "overlayColor": "color", - "overlayFontColor": "color" - }, - "quickNav": { - "fontColor": "color", - "accentColor": "color" - }, - "radioGroup": { - "baseColor": "color", - "fontColor": "color" - }, - "select": { - "selectedOptionBackgroundColor": "color", - "fontColor": "color", - "optionFontColor": "color", - "hoverBorderColor": "color" - }, - "sidenav": { - "baseColor": "color" - }, - "slider": { - "baseColor": "color", - "fontColor": "color", - "totalLineColor": "color" - }, - "spinner": { - "accentColor": "color", - "baseColor": "color", - "fontColor": "color", - "overlayColor": "color", - "overlayFontColor": "color" - }, - "switch": { - "checkedBaseColor": "color", - "fontColor": "color" - }, - "table": { - "baseColor": "color", - "headerFontColor": "color", - "cellFontColor": "color" - }, - "tabs": { - "baseColor": "color" - }, - "tag": { - "fontColor": "color", - "iconColor": "color" - }, - "textarea": { - "fontColor": "color", - "hoverBorderColor": "color" - }, - "textInput": { - "fontColor": "color", - "hoverBorderColor": "color" - }, - "toggleGroup": { - "selectedBaseColor": "color", - "selectedFontColor": "color", - "unselectedBaseColor": "color", - "unselectedFontColor": "color" - }, - "wizard": { - "baseColor": "color", - "fontColor": "color", - "selectedStepFontColor": "color" - } -} diff --git a/apps/website/screens/theme-generator/types.ts b/apps/website/screens/theme-generator/types.ts deleted file mode 100644 index 236fcec92c..0000000000 --- a/apps/website/screens/theme-generator/types.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Dispatch, SetStateAction } from "react"; - -export type IndexedThemeInput = { - [key: string]: string; -}; -export type IndexedTheme = { - [key: string]: IndexedThemeInput; -}; - -type ImportDialogProps = { - customThemeSchema: IndexedTheme; - setCustomTheme: Dispatch>; - setDialogVisible: (isVisible: boolean) => void; -}; - -export default ImportDialogProps; diff --git a/apps/website/screens/theme-generator/utils.ts b/apps/website/screens/theme-generator/utils.ts deleted file mode 100644 index 4c648ee555..0000000000 --- a/apps/website/screens/theme-generator/utils.ts +++ /dev/null @@ -1,44 +0,0 @@ -import type { IndexedTheme } from "./types"; - -export const makeReadable = (token: string) => - token.replace(/^[a-z]|[A-Z]/g, function (v, i) { - return i === 0 ? v.toUpperCase() : " " + v.toLowerCase(); - }); - -export const makeReadableSidenav = (token: string) => - token.replace(/^[a-z]|[A-Z]/g, function (v, i) { - return i === 0 ? v.toUpperCase() : " " + v; - }); - -const isObject = (item: unknown) => item != null && typeof item === "object" && !Array.isArray(item); - -export const deepMerge = (target: T, ...sources: Partial[]): T => { - if (!sources.length) return target; - const source = sources.shift(); - - if (isObject(target) && isObject(source)) { - for (const key in source) { - if (isObject(source[key])) { - if (!target[key]) Object.assign(target, { [key]: {} }); - deepMerge(target[key] as object, source[key] as object); - } else { - Object.assign(target, { [key]: source[key] }); - } - } - } - - return deepMerge(target, ...sources); -}; - -export const downloadFile = (content: IndexedTheme) => { - const data = new Blob([JSON.stringify(content, null, "\t")], { - type: "application/json", - }); - - const element = document.createElement("a"); - element.href = URL.createObjectURL(data); - element.download = "theme.json"; - document.body.appendChild(element); - element.click(); - return () => URL.revokeObjectURL(element.href); -}; diff --git a/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx b/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx index e30948be11..6faa85cd20 100644 --- a/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx +++ b/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx @@ -1,10 +1,7 @@ -import Code from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import opinionatedTheme from "./examples/opinionatedTheme"; -import advancedTheme from "./examples/advancedTheme"; import customTranslations from "./examples/customTranslations"; import { DxcFlex, @@ -18,7 +15,7 @@ import { } from "@dxc-technology/halstack-react"; import Link from "next/link"; import PageHeading from "@/common/PageHeading"; -import TableCode from "@/common/TableCode"; +import Code, { TableCode } from "@/common/Code"; const sections = [ { @@ -31,22 +28,6 @@ const sections = [ Description Default - - theme - - OpinionatedTheme - - Object with a given structure, specified below, for defining the opinionated theme. - - - - - advancedTheme - - AdvancedTheme - - Object with a given structure, specified below, for defining the advanced theme. - - - labels @@ -58,83 +39,6 @@ const sections = [ ), }, - { - title: "Opinionated theme", - content: ( - <> - - As explained on the{" "} - - Themes - {" "} - page, you can apply the opinionated theming strategy to customize the components. - - - Remember that you can use the{" "} - - opinionated theme generator - {" "} - to help you create themes. - - ), - }} - closable={false} - /> - - Below is an example of customizing the colours of a DxcAccordion and a DxcTextInput: - - - - We create a customTheme object with as many components as we want and their respective values. - Then we pass this object to the Halstack Provider, which wraps our components, through its theme{" "} - property. - - - ), - }, - { - title: "Advanced theme", - content: ( - <> - - Advanced theming is the option to choose when further customization is required. To find out which use cases - are valid for this strategy, you can refer to the{" "} - - Themes - {" "} - page. - - - Remember that you can use the{" "} - - advanced theme generator - {" "} - to help you create themes. - - ), - }} - closable={false} - /> - - - - In the example above we have customized some of the DxcAccordion tokens. As you can see, it is - not necessary to pass all the tokens of the component, only those that you want to change their value with - respect to the default theme. - - - ), - }, { title: "Localization", content: ( @@ -165,7 +69,7 @@ const sections = [ respective translation for their labels. - + *(to see the translated error message you should try to add any file on the DxcFileInput). @@ -175,12 +79,12 @@ const sections = [ }, ]; -const HalstackProvider = () => { +export default function HalstackProviderPage() { return ( - - + + Halstack Provider is the context provider used for a whole application or an isolated group of components, which defines the custom theme and/or translation labels. @@ -188,11 +92,9 @@ const HalstackProvider = () => { - + ); -}; - -export default HalstackProvider; +} diff --git a/apps/website/screens/utilities/halstack-provider/examples/advancedTheme.ts b/apps/website/screens/utilities/halstack-provider/examples/advancedTheme.ts deleted file mode 100644 index 49a7702ba3..0000000000 --- a/apps/website/screens/utilities/halstack-provider/examples/advancedTheme.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { HalstackProvider, DxcTextInput, DxcInset, DxcAccordion } from "@dxc-technology/halstack-react"; - -const code = `() => { - const advancedTheme = { - accordion: { - backgroundColor: "#e8dee3", - hoverBackgroundColor: "#e4c7d6", - arrowColor: "#ffffff", - disabledArrowColor: "#999999", - assistiveTextFontSize: "1rem", - assistiveTextFontColor: "#40182d", - }, - }; - - return ( - - - - - - - - - - - - ); -}`; - -const scope = { - HalstackProvider, - DxcTextInput, - DxcInset, - DxcAccordion, -}; - -export default { code, scope }; diff --git a/apps/website/screens/utilities/halstack-provider/examples/customTranslations.ts b/apps/website/screens/utilities/halstack-provider/examples/customTranslations.ts index 81f490b7b6..6829639103 100644 --- a/apps/website/screens/utilities/halstack-provider/examples/customTranslations.ts +++ b/apps/website/screens/utilities/halstack-provider/examples/customTranslations.ts @@ -27,8 +27,8 @@ const code = `() => { return ( - - + + { - const customTheme = { - "accordion": { - "accentColor": "#8e1e1e", - "titleFontColor": "#8e1e1e", - "subLabelFontColor": "#cd848d", - "assistiveTextFontColor": "#cd848d" - }, - textInput: { - fontColor: "#8e1e1e", - }, - }; - - return ( - - - - - - - - - - - - ); -}`; - -const scope = { - HalstackProvider, - DxcTextInput, - DxcInset, - DxcAccordion, -}; - -export default { code, scope }; diff --git a/packages/lib/src/alert/Actions.tsx b/packages/lib/src/alert/Actions.tsx index 49dd3ef74c..ab2bf621b3 100644 --- a/packages/lib/src/alert/Actions.tsx +++ b/packages/lib/src/alert/Actions.tsx @@ -11,7 +11,7 @@ const Actions = memo( semantic, }: Pick) => (primaryAction != null || secondaryAction != null) && ( - + {secondaryAction?.onClick && ( - + {getIcon(semantic)} {mode === "banner" ? ( @@ -152,7 +152,7 @@ export default function DxcAlert({ )} {messages.length > 1 && ( - + )} {closable && ( - + {mode !== "modal" && } ( <ExampleContainer> <Title title="Small" theme="light" level={4} /> - <DxcFlex gap="3rem" alignItems="center"> + <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> <DxcBadge mode="notification" size="small" /> <DxcBadge mode="notification" label={1} size="small" /> <DxcBadge mode="notification" label={10} size="small" /> @@ -35,7 +35,7 @@ const Badge = () => ( </ExampleContainer> <ExampleContainer> <Title title="Medium" theme="light" level={4} /> - <DxcFlex gap="3rem" alignContent="center" alignItems="center"> + <DxcFlex gap="var(--spacing-gap-xl)" alignContent="center" alignItems="center"> <DxcBadge mode="notification" size="medium" /> <DxcBadge mode="notification" label={1} size="medium" /> <DxcBadge mode="notification" label={10} size="medium" /> @@ -45,7 +45,7 @@ const Badge = () => ( </ExampleContainer> <ExampleContainer> <Title title="Large" theme="light" level={4} /> - <DxcFlex gap="3rem" alignItems="center"> + <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> <DxcBadge mode="notification" size="large" /> <DxcBadge mode="notification" label={1} size="large" /> <DxcBadge mode="notification" label={10} size="large" /> @@ -57,21 +57,21 @@ const Badge = () => ( <Title title="Grey" theme="light" level={3} /> <ExampleContainer> <Title title="Small" theme="light" level={4} /> - <DxcFlex gap="3rem" alignItems="center"> + <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> <DxcBadge label="Label" size="small" /> <DxcBadge label="Label" size="small" icon={icon} /> </DxcFlex> </ExampleContainer> <ExampleContainer> <Title title="Medium" theme="light" level={4} /> - <DxcFlex gap="3rem" alignItems="center"> + <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> <DxcBadge label="Label" /> <DxcBadge label="Label" icon="done" /> </DxcFlex> </ExampleContainer> <ExampleContainer> <Title title="Large" theme="light" level={4} /> - <DxcFlex gap="3rem" alignItems="center"> + <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> <DxcBadge label="Label" size="large" /> <DxcBadge label="Label" size="large" icon="done" /> </DxcFlex> @@ -79,21 +79,21 @@ const Badge = () => ( <Title title="Blue" theme="light" level={3} /> <ExampleContainer> <Title title="Small" theme="light" level={4} /> - <DxcFlex gap="3rem" alignItems="center"> + <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> <DxcBadge color="blue" label="Label" size="small" /> <DxcBadge color="blue" label="Label" size="small" icon="done" /> </DxcFlex> </ExampleContainer> <ExampleContainer> <Title title="Medium" theme="light" level={4} /> - <DxcFlex gap="3rem" alignItems="center"> + <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> <DxcBadge color="blue" label="Label" /> <DxcBadge color="blue" label="Label" icon={icon} /> </DxcFlex> </ExampleContainer> <ExampleContainer> <Title title="Large" theme="light" level={4} /> - <DxcFlex gap="3rem" alignItems="center"> + <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> <DxcBadge color="blue" label="Label" size="large" /> <DxcBadge color="blue" label="Label" size="large" icon={icon} /> </DxcFlex> @@ -101,21 +101,21 @@ const Badge = () => ( <Title title="Green" theme="light" level={3} /> <ExampleContainer> <Title title="Small" theme="light" level={4} /> - <DxcFlex gap="3rem" alignItems="center"> + <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> <DxcBadge color="green" label="Label" size="small" /> <DxcBadge color="green" label="Label" size="small" icon="done" /> </DxcFlex> </ExampleContainer> <ExampleContainer> <Title title="Medium" theme="light" level={4} /> - <DxcFlex gap="3rem" alignItems="center"> + <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> <DxcBadge color="green" label="Label" /> <DxcBadge color="green" label="Label" icon="done" /> </DxcFlex> </ExampleContainer> <ExampleContainer> <Title title="Large" theme="light" level={4} /> - <DxcFlex gap="3rem" alignItems="center"> + <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> <DxcBadge color="green" label="Label" size="large" /> <DxcBadge color="green" label="Label" size="large" icon={icon} /> </DxcFlex> @@ -124,21 +124,21 @@ const Badge = () => ( <Title title="Orange" theme="light" level={3} /> <ExampleContainer> <Title title="Small" theme="light" level={4} /> - <DxcFlex gap="3rem" alignItems="center"> + <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> <DxcBadge color="orange" label="Label" size="small" /> <DxcBadge color="orange" label="Label" size="small" icon="done" /> </DxcFlex> </ExampleContainer> <ExampleContainer> <Title title="Medium" theme="light" level={4} /> - <DxcFlex gap="3rem" alignItems="center"> + <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> <DxcBadge color="orange" label="Label" /> <DxcBadge color="orange" label="Label" icon={icon} /> </DxcFlex> </ExampleContainer> <ExampleContainer> <Title title="Large" theme="light" level={4} /> - <DxcFlex gap="3rem" alignItems="center"> + <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> <DxcBadge color="orange" label="Label" size="large" /> <DxcBadge color="orange" label="Label" size="large" icon={icon} /> </DxcFlex> @@ -146,21 +146,21 @@ const Badge = () => ( <Title title="Red" theme="light" level={3} /> <ExampleContainer> <Title title="Small" theme="light" level={4} /> - <DxcFlex gap="3rem" alignItems="center"> + <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> <DxcBadge color="red" label="Label" size="small" /> <DxcBadge color="red" label="Label" size="small" icon="done" /> </DxcFlex> </ExampleContainer> <ExampleContainer> <Title title="Medium" theme="light" level={4} /> - <DxcFlex gap="3rem" alignItems="center"> + <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> <DxcBadge color="red" label="Label" /> <DxcBadge color="red" label="Label" icon="done" /> </DxcFlex> </ExampleContainer> <ExampleContainer> <Title title="Large" theme="light" level={4} /> - <DxcFlex gap="3rem" alignItems="center"> + <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> <DxcBadge color="red" label="Label" size="large" /> <DxcBadge color="red" label="Label" size="large" icon={icon} /> </DxcFlex> @@ -168,21 +168,21 @@ const Badge = () => ( <Title title="Yellow" theme="light" level={3} /> <ExampleContainer> <Title title="Small" theme="light" level={4} /> - <DxcFlex gap="3rem" alignItems="center"> + <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> <DxcBadge color="yellow" label="Label" size="small" /> <DxcBadge color="yellow" label="Label" size="small" icon="done" /> </DxcFlex> </ExampleContainer> <ExampleContainer> <Title title="Medium" theme="light" level={4} /> - <DxcFlex gap="3rem" alignItems="center"> + <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> <DxcBadge color="yellow" label="Label" /> <DxcBadge color="yellow" label="Label" icon={icon} /> </DxcFlex> </ExampleContainer> <ExampleContainer> <Title title="Large" theme="light" level={4} /> - <DxcFlex gap="3rem" alignItems="center"> + <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> <DxcBadge color="yellow" label="Label" size="large" /> <DxcBadge color="yellow" label="Label" size="large" icon="done" /> </DxcFlex> @@ -190,21 +190,21 @@ const Badge = () => ( <Title title="Purple" theme="light" level={3} /> <ExampleContainer> <Title title="Small" theme="light" level={4} /> - <DxcFlex gap="3rem" alignItems="center"> + <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> <DxcBadge color="purple" label="Label" size="small" /> <DxcBadge color="purple" label="Label" size="small" icon="done" /> </DxcFlex> </ExampleContainer> <ExampleContainer> <Title title="Medium" theme="light" level={4} /> - <DxcFlex gap="3rem" alignItems="center"> + <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> <DxcBadge color="purple" label="Label" /> <DxcBadge color="purple" label="Label" icon={icon} /> </DxcFlex> </ExampleContainer> <ExampleContainer> <Title title="Large" theme="light" level={4} /> - <DxcFlex gap="3rem" alignItems="center"> + <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> <DxcBadge color="purple" label="Label" size="large" /> <DxcBadge color="purple" label="Label" size="large" icon={icon} /> </DxcFlex> diff --git a/packages/lib/src/bleed/Bleed.stories.tsx b/packages/lib/src/bleed/Bleed.stories.tsx index eecacff8f1..e9cfa60ab8 100644 --- a/packages/lib/src/bleed/Bleed.stories.tsx +++ b/packages/lib/src/bleed/Bleed.stories.tsx @@ -69,7 +69,7 @@ const Bleed = () => ( </Container> <Title title="Inside a flex column" level={4} /> <Container> - <DxcFlex direction="column" gap="1rem"> + <DxcFlex direction="column" gap="var(--spacing-gap-ml)"> <Placeholder /> <DxcBleed top="var(--spacing-padding-xxs)" diff --git a/packages/lib/src/checkbox/CheckboxContext.tsx b/packages/lib/src/checkbox/CheckboxContext.tsx new file mode 100644 index 0000000000..2351349a57 --- /dev/null +++ b/packages/lib/src/checkbox/CheckboxContext.tsx @@ -0,0 +1,4 @@ +import { createContext } from "react"; +import type { CheckboxContextProps } from "./types"; + +export default createContext<CheckboxContextProps | null>(null); diff --git a/packages/lib/src/container/Container.stories.tsx b/packages/lib/src/container/Container.stories.tsx index f732722a45..7e4ade1875 100644 --- a/packages/lib/src/container/Container.stories.tsx +++ b/packages/lib/src/container/Container.stories.tsx @@ -144,7 +144,7 @@ const Container = () => ( width: "var(--border-width-m)", style: "var(--border-style-dashed)", }} - borderRadius="0.25rem" + borderRadius="var(--border-radius-s)" > <DxcContainer background={{ color: "var(--color-bg-primary-medium)" }} diff --git a/packages/lib/src/divider/Divider.stories.tsx b/packages/lib/src/divider/Divider.stories.tsx index 05bd94a93a..7b20e41ee0 100644 --- a/packages/lib/src/divider/Divider.stories.tsx +++ b/packages/lib/src/divider/Divider.stories.tsx @@ -14,7 +14,7 @@ const Divider = () => ( <> <Title title="Default" level={4} /> <ExampleContainer> - <DxcFlex gap="1rem" direction="column"> + <DxcFlex gap="var(--spacing-gap-ml)" direction="column"> <DxcParagraph> Lorem ipsum dolor sit amet consectetur. Tincidunt sed pharetra mollis duis volutpat urna. Hendrerit aliquet et arcu purus. Sodales elementum sollicitudin consequat elementum tortor. Lectus eget cursus ut ac pharetra @@ -40,7 +40,7 @@ const Divider = () => ( </ExampleContainer> <Title title="Default strong" level={4} /> <ExampleContainer> - <DxcFlex gap="1rem" direction="column"> + <DxcFlex gap="var(--spacing-gap-ml)" direction="column"> <DxcParagraph> Lorem ipsum dolor sit amet consectetur. Tincidunt sed pharetra mollis duis volutpat urna. Hendrerit aliquet et arcu purus. Sodales elementum sollicitudin consequat elementum tortor. Lectus eget cursus ut ac pharetra @@ -66,7 +66,7 @@ const Divider = () => ( </ExampleContainer> <Title title="Default light grey" level={4} /> <ExampleContainer> - <DxcFlex gap="1rem" direction="column"> + <DxcFlex gap="var(--spacing-gap-ml)" direction="column"> <DxcParagraph> Lorem ipsum dolor sit amet consectetur. Tincidunt sed pharetra mollis duis volutpat urna. Hendrerit aliquet et arcu purus. Sodales elementum sollicitudin consequat elementum tortor. Lectus eget cursus ut ac pharetra @@ -92,7 +92,7 @@ const Divider = () => ( </ExampleContainer> <Title title="Default dark grey" level={4} /> <ExampleContainer> - <DxcFlex gap="1rem" direction="column"> + <DxcFlex gap="var(--spacing-gap-ml)" direction="column"> <DxcParagraph> Lorem ipsum dolor sit amet consectetur. Tincidunt sed pharetra mollis duis volutpat urna. Hendrerit aliquet et arcu purus. Sodales elementum sollicitudin consequat elementum tortor. Lectus eget cursus ut ac pharetra @@ -118,7 +118,7 @@ const Divider = () => ( </ExampleContainer> <Title title="Vertical" level={4} /> <ExampleContainer> - <DxcFlex gap="1rem" direction="row"> + <DxcFlex gap="var(--spacing-gap-ml)" direction="row"> <DxcParagraph> Lorem ipsum dolor sit amet consectetur. Tincidunt sed pharetra mollis duis volutpat urna. Hendrerit aliquet et arcu purus. Sodales elementum sollicitudin consequat elementum tortor. Lectus eget cursus ut ac pharetra @@ -144,7 +144,7 @@ const Divider = () => ( </ExampleContainer> <Title title="Vertical strong" level={4} /> <ExampleContainer> - <DxcFlex gap="1rem" direction="row"> + <DxcFlex gap="var(--spacing-gap-ml)" direction="row"> <DxcParagraph> Lorem ipsum dolor sit amet consectetur. Tincidunt sed pharetra mollis duis volutpat urna. Hendrerit aliquet et arcu purus. Sodales elementum sollicitudin consequat elementum tortor. Lectus eget cursus ut ac pharetra @@ -170,7 +170,7 @@ const Divider = () => ( </ExampleContainer> <Title title="Vertical light grey" level={4} /> <ExampleContainer> - <DxcFlex gap="1rem" direction="row"> + <DxcFlex gap="var(--spacing-gap-ml)" direction="row"> <DxcParagraph> Lorem ipsum dolor sit amet consectetur. Tincidunt sed pharetra mollis duis volutpat urna. Hendrerit aliquet et arcu purus. Sodales elementum sollicitudin consequat elementum tortor. Lectus eget cursus ut ac pharetra @@ -196,7 +196,7 @@ const Divider = () => ( </ExampleContainer> <Title title="Vertical dark grey" level={4} /> <ExampleContainer> - <DxcFlex gap="1rem" direction="row"> + <DxcFlex gap="var(--spacing-gap-ml)" direction="row"> <DxcParagraph> Lorem ipsum dolor sit amet consectetur. Tincidunt sed pharetra mollis duis volutpat urna. Hendrerit aliquet et arcu purus. Sodales elementum sollicitudin consequat elementum tortor. Lectus eget cursus ut ac pharetra diff --git a/packages/lib/src/flex/Flex.stories.tsx b/packages/lib/src/flex/Flex.stories.tsx index 99b1a9e265..b871fb6663 100644 --- a/packages/lib/src/flex/Flex.stories.tsx +++ b/packages/lib/src/flex/Flex.stories.tsx @@ -38,7 +38,7 @@ const Flex = () => ( </Container> <Title title="Direction column, wrap, justify content end, align items center and gap" level={4} /> <Container> - <DxcFlex direction="column" wrap="wrap" justifyContent="end" alignItems="center" gap="1.5rem"> + <DxcFlex direction="column" wrap="wrap" justifyContent="end" alignItems="center" gap="var(--spacing-gap-l)"> <Placeholder /> <Placeholder minWidth="100px" /> <Placeholder /> @@ -48,7 +48,12 @@ const Flex = () => ( </Container> <Title title="Wrap with align content space between, row and column gaps, and as a span" level={4} /> <Container height="250px"> - <DxcFlex wrap="wrap" alignContent="space-between" as="span" gap={{ rowGap: "0.5rem", columnGap: "1.5rem" }}> + <DxcFlex + wrap="wrap" + alignContent="space-between" + as="span" + gap={{ rowGap: "var(--spacing-gap-s)", columnGap: "var(--spacing-gap-l)" }} + > <Placeholder /> <Placeholder /> <Placeholder /> diff --git a/packages/lib/src/footer/Footer.tsx b/packages/lib/src/footer/Footer.tsx index 0c4262114c..4c0a920ec7 100644 --- a/packages/lib/src/footer/Footer.tsx +++ b/packages/lib/src/footer/Footer.tsx @@ -40,7 +40,7 @@ const DxcFooter = ({ return ( <ThemeProvider theme={colorsTheme.footer}> <FooterContainer margin={margin} mode={mode}> - <DxcFlex justifyContent="space-between" alignItems="center" wrap="wrap" gap="1.5rem"> + <DxcFlex justifyContent="space-between" alignItems="center" wrap="wrap" gap="var(--spacing-gap-l)"> <LogoContainer mode={mode}>{footerLogo}</LogoContainer> {mode === "default" && ( <DxcFlex gap={colorsTheme.footer.socialLinksGutter as CoreSpacingTokensType}> diff --git a/packages/lib/src/image/Image.stories.tsx b/packages/lib/src/image/Image.stories.tsx index 407bb2b710..b2e17d8a26 100644 --- a/packages/lib/src/image/Image.stories.tsx +++ b/packages/lib/src/image/Image.stories.tsx @@ -54,7 +54,7 @@ const Image = () => ( </ExampleContainer> <ExampleContainer> <Title title="Example image" theme="light" level={4} /> - <DxcFlex gap="1rem"> + <DxcFlex gap="var(--spacing-gap-ml)"> <DxcImage alt="Camera pic" caption="Picture of a camera and the sunset." @@ -93,7 +93,14 @@ const Image = () => ( </ExampleContainer> <ExampleContainer> <Title title="Object fit: contain" theme="light" level={4} /> - <div style={{ display: "flex", width: "fit-content", border: "1px solid #000", padding: "0.5rem" }}> + <div + style={{ + display: "flex", + width: "fit-content", + border: "var(--border-width-s) var(--border-style-default) var(--border-color-neutral-dark)", + padding: "var(--spacing-padding-xs)", + }} + > <DxcImage alt="Dog pic" src="https://cc-prod.scene7.com/is/image/CCProdAuthor/What-is-Stock-Photography_P1_mobile?$pjpeg$&jpegSize=200&wid=720" diff --git a/packages/lib/src/image/Image.tsx b/packages/lib/src/image/Image.tsx index 05e8e92ec9..558cf12e16 100644 --- a/packages/lib/src/image/Image.tsx +++ b/packages/lib/src/image/Image.tsx @@ -8,7 +8,7 @@ const Figure = styled.figure` gap: var(--spacing-gap-s); width: fit-content; margin: 0; - padding: 0; + padding: var(--spacing-padding-none); `; const CaptionContainer = styled.figcaption` @@ -47,11 +47,11 @@ export default function DxcImage({ <img alt={alt} loading={lazyLoading ? "lazy" : undefined} - onLoad={onLoad} onError={onError} + onLoad={onLoad} + sizes={sizes} src={src} srcSet={srcSet} - sizes={sizes} style={{ objectFit, objectPosition, diff --git a/packages/lib/src/inset/Inset.stories.tsx b/packages/lib/src/inset/Inset.stories.tsx index 6fbb0e6ab3..435975e35d 100644 --- a/packages/lib/src/inset/Inset.stories.tsx +++ b/packages/lib/src/inset/Inset.stories.tsx @@ -69,7 +69,7 @@ const Inset = () => ( </Container> <Title title="Inside a flex column" level={4} /> <Container> - <DxcFlex direction="column" gap="1rem"> + <DxcFlex direction="column" gap="var(--spacing-gap-ml)"> <Placeholder /> <DxcInset top="var(--spacing-padding-xxs)" diff --git a/packages/lib/src/inset/Inset.tsx b/packages/lib/src/inset/Inset.tsx index d354442734..9eb421db01 100644 --- a/packages/lib/src/inset/Inset.tsx +++ b/packages/lib/src/inset/Inset.tsx @@ -5,10 +5,10 @@ export default function DxcInset({ bottom, children, horizontal, left, right, sp return ( <DxcContainer padding={{ - bottom: bottom ?? vertical ?? space ?? "0rem", - left: left ?? horizontal ?? space ?? "0rem", - right: right ?? horizontal ?? space ?? "0rem", - top: top ?? vertical ?? space ?? "0rem", + bottom: bottom ?? vertical ?? space ?? "var(--spacing-padding-none)", + left: left ?? horizontal ?? space ?? "var(--spacing-padding-none)", + right: right ?? horizontal ?? space ?? "var(--spacing-padding-none)", + top: top ?? vertical ?? space ?? "var(--spacing-padding-none)", }} > {children} diff --git a/packages/lib/src/link/Link.tsx b/packages/lib/src/link/Link.tsx index 9c56afa8b3..211826044a 100644 --- a/packages/lib/src/link/Link.tsx +++ b/packages/lib/src/link/Link.tsx @@ -4,10 +4,10 @@ import { spaces } from "../common/variables"; import DxcIcon from "../icon/Icon"; import { LinkProps } from "./types"; -const StyledLink = styled.a<{ - margin: LinkProps["margin"]; +const Link = styled.a<{ disabled: LinkProps["disabled"]; inheritColor: LinkProps["inheritColor"]; + margin: LinkProps["margin"]; }>` all: unset; display: inline-flex; @@ -26,35 +26,29 @@ const StyledLink = styled.a<{ border-radius: var(--spacing-gap-xs); width: fit-content; font-family: var(--typography-font-family); - font-size: var(--typography-link-m); + font-size: inherit; font-weight: var(--typography-link-regular); text-decoration: none; - color: ${(props) => - props.inheritColor - ? "inherit" - : !props.disabled - ? "var(--color-fg-secondary-strong)" - : "var(--color-fg-neutral-medium)"}; - ${(props) => (props.disabled ? "cursor: default;" : "cursor: pointer;")} - ${(props) => (props.disabled ? "pointer-events: none;" : "")} - - &:visited { - color: ${(props) => (!props.inheritColor && !props.disabled ? "var(--color-fg-primary-strong)" : "")}; - } + color: ${({ disabled, inheritColor }) => + inheritColor ? "inherit" : !disabled ? "var(--color-fg-secondary-strong)" : "var(--color-fg-neutral-medium)"}; + ${({ disabled }) => (disabled ? "cursor: default;" : "cursor: pointer;")} + ${({ disabled }) => (disabled ? "pointer-events: none;" : "")} + ${({ disabled, inheritColor }) => + !inheritColor && !disabled && "&:visited { color: var(--color-fg-primary-strong); }"}; &:focus { outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); outline-offset: var(--border-width-m); - ${(props) => props.disabled && "outline: none"} + ${({ disabled }) => disabled && "outline: none"} } `; -const LinkContainer = styled.span<{ +const LinkContent = styled.span<{ iconPosition: LinkProps["iconPosition"]; inheritColor: LinkProps["inheritColor"]; }>` display: inline-flex; align-items: center; - ${(props) => (props.iconPosition === "before" ? "flex-direction: row-reverse;" : "")} + ${({ iconPosition }) => iconPosition === "before" && "flex-direction: row-reverse;"} gap: var(--spacing-gap-xs); &:hover { @@ -66,7 +60,7 @@ const LinkContainer = styled.span<{ } `; -const LinkIconContainer = styled.div` +const IconContainer = styled.div` display: flex; font-size: var(--height-xxs); svg { @@ -78,40 +72,38 @@ const LinkIconContainer = styled.div` const DxcLink = forwardRef( ( { - inheritColor = false, - disabled = false, + children, + disabled, + href, icon, iconPosition = "before", - href = "", - newWindow = false, - onClick, + inheritColor, margin, + newWindow, + onClick, tabIndex = 0, - children, ...otherProps }: LinkProps, ref: Ref<HTMLAnchorElement> - ): JSX.Element => { - return ( - <StyledLink - as={onClick && !href ? "button" : "a"} - tabIndex={tabIndex} - onClick={!disabled ? onClick : undefined} - href={!disabled && href ? href : undefined} - target={href ? (newWindow ? "_blank" : "_self") : undefined} - disabled={disabled} - inheritColor={inheritColor} - margin={margin} - ref={ref} - {...otherProps} - > - <LinkContainer iconPosition={iconPosition} inheritColor={inheritColor}> - {children} - {icon && <LinkIconContainer>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</LinkIconContainer>} - </LinkContainer> - </StyledLink> - ); - } + ) => ( + <Link + as={onClick && !href ? "button" : "a"} + tabIndex={tabIndex} + onClick={!disabled ? onClick : undefined} + href={!disabled && href ? href : undefined} + target={href ? (newWindow ? "_blank" : "_self") : undefined} + disabled={disabled} + inheritColor={inheritColor} + margin={margin} + ref={ref} + {...otherProps} + > + <LinkContent iconPosition={iconPosition} inheritColor={inheritColor}> + {children} + {icon && <IconContainer>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</IconContainer>} + </LinkContent> + </Link> + ) ); export default DxcLink; diff --git a/packages/lib/src/number-input/NumberInput.stories.tsx b/packages/lib/src/number-input/NumberInput.stories.tsx index f8039f6138..5a2024dae5 100644 --- a/packages/lib/src/number-input/NumberInput.stories.tsx +++ b/packages/lib/src/number-input/NumberInput.stories.tsx @@ -120,7 +120,7 @@ const NumberInput = () => ( </ExampleContainer> <ExampleContainer> <Title title="Different sizes inside a flex" theme="light" level={4} /> - <DxcFlex justifyContent="space-between" gap="1rem"> + <DxcFlex justifyContent="space-between" gap="var(--spacing-gap-ml)"> <DxcNumberInput label="fillParent" size="fillParent" /> <DxcNumberInput label="medium" size="medium" /> <DxcNumberInput label="large" size="large" /> diff --git a/packages/lib/src/password-input/PasswordInput.stories.tsx b/packages/lib/src/password-input/PasswordInput.stories.tsx index 085c2569b9..eebf6602ce 100644 --- a/packages/lib/src/password-input/PasswordInput.stories.tsx +++ b/packages/lib/src/password-input/PasswordInput.stories.tsx @@ -84,7 +84,7 @@ const PasswordInput = () => ( </ExampleContainer> <ExampleContainer> <Title title="Without label" theme="light" level={4} /> - <DxcFlex justifyContent="space-between" gap="1rem"> + <DxcFlex justifyContent="space-between" gap="var(--spacing-gap-ml)"> <DxcPasswordInput label="fillParent" size="fillParent" /> <DxcPasswordInput label="medium" size="medium" /> <DxcPasswordInput label="large" size="large" /> diff --git a/packages/lib/src/select/Select.stories.tsx b/packages/lib/src/select/Select.stories.tsx index b41bd121d6..857c953253 100644 --- a/packages/lib/src/select/Select.stories.tsx +++ b/packages/lib/src/select/Select.stories.tsx @@ -307,7 +307,7 @@ const Select = () => ( </ExampleContainer> <ExampleContainer> <Title title="Different sizes inside a flex" theme="light" level={4} /> - <DxcFlex justifyContent="space-between" gap="1rem"> + <DxcFlex justifyContent="space-between" gap="var(--spacing-gap-ml)"> <DxcSelect label="fillParent" size="fillParent" options={single_options} /> <DxcSelect label="medium" size="medium" options={single_options} /> <DxcSelect label="large" size="large" options={single_options} /> diff --git a/packages/lib/src/table/Table.tsx b/packages/lib/src/table/Table.tsx index eaceae931d..ab6cce0f02 100644 --- a/packages/lib/src/table/Table.tsx +++ b/packages/lib/src/table/Table.tsx @@ -27,7 +27,7 @@ export const DxcActionsCell = ({ actions }: ActionCellsPropsType): JSX.Element = const colorsTheme = useContext(HalstackContext); return ( - <DxcFlex gap="0.5rem" alignItems="center"> + <DxcFlex gap="var(--spacing-gap-s)" alignItems="center"> {actionIcons.map( (action, index) => index < maxNumberOfActions && ( diff --git a/packages/lib/src/text-input/TextInput.stories.tsx b/packages/lib/src/text-input/TextInput.stories.tsx index 6e4b9ec975..1beeb2d3e5 100644 --- a/packages/lib/src/text-input/TextInput.stories.tsx +++ b/packages/lib/src/text-input/TextInput.stories.tsx @@ -214,7 +214,7 @@ const TextInput = () => ( </ExampleContainer> <ExampleContainer> <Title title="Different sizes inside a flex" theme="light" level={4} /> - <DxcFlex justifyContent="space-between" gap="1.5rem"> + <DxcFlex justifyContent="space-between" gap="var(--spacing-gap-l)"> <DxcTextInput label="Text input" size="fillParent" /> <DxcTextInput label="Text input" size="medium" /> <DxcTextInput label="Text input" size="large" /> diff --git a/packages/lib/src/toast/Toast.stories.tsx b/packages/lib/src/toast/Toast.stories.tsx index 6a854b9d85..ed43840b21 100644 --- a/packages/lib/src/toast/Toast.stories.tsx +++ b/packages/lib/src/toast/Toast.stories.tsx @@ -219,7 +219,7 @@ const Screens = () => { return ( <ExampleContainer> <Title title="Screen placement" /> - <DxcFlex gap="1rem" direction="column"> + <DxcFlex gap="var(--spacing-gap-ml)" direction="column"> <DxcButton label="Show default toast" onClick={() => {