diff --git a/apps/website/pages/foundations/typography.tsx b/apps/website/pages/foundations/typography.tsx new file mode 100644 index 0000000000..f47c816fa3 --- /dev/null +++ b/apps/website/pages/foundations/typography.tsx @@ -0,0 +1,13 @@ +import Head from "next/head"; +import TypographyPage from "screens/foundations/typography/TypographyPage"; + +const Typography = () => ( + <> + + Typography — Halstack Design System + + + +); + +export default Typography; diff --git a/apps/website/pages/principles/iconography.tsx b/apps/website/pages/principles/iconography.tsx deleted file mode 100644 index 288ceefbad..0000000000 --- a/apps/website/pages/principles/iconography.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import Head from "next/head"; -import IconographyPage from "screens/principles/iconography/IconographyPage"; - -const Iconography = () => ( - <> - - Iconography — Halstack Design System - - - -); - -export default Iconography; diff --git a/apps/website/pages/principles/typography/index.tsx b/apps/website/pages/principles/typography/index.tsx deleted file mode 100644 index 385844ea5d..0000000000 --- a/apps/website/pages/principles/typography/index.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import TypographyCodePage from "screens/principles/typography/code/TypographyCodePage"; -import TypographyPageLayout from "screens/principles/typography/TypographyPageLayout"; - -const Index = () => ( - <> - - Typography — Halstack Design System - - - -); - -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 deleted file mode 100644 index f78f797bd6..0000000000 --- a/apps/website/pages/principles/typography/usage.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import Head from "next/head"; -import { ReactElement } from "react"; -import TypographyUsagePage from "screens/principles/typography/usage/TypographyUsagePage"; -import TypographyPageLayout from "screens/principles/typography/TypographyPageLayout"; - -const Usage = () => ( - <> - - Typography usage — Halstack Design System - - - -); - -Usage.getLayout = (page: ReactElement) => {page}; - -export default Usage; diff --git a/apps/website/screens/common/pagesList.ts b/apps/website/screens/common/pagesList.ts index 8a57371acf..4417ce2378 100644 --- a/apps/website/screens/common/pagesList.ts +++ b/apps/website/screens/common/pagesList.ts @@ -34,10 +34,8 @@ const utilitiesLinks: LinkDetails[] = [ const principlesLinks: LinkDetails[] = [ { label: "Data visualization", path: "/principles/data-visualization" }, - { label: "Iconography", path: "/principles/iconography" }, { label: "Layout", path: "/principles/layout" }, { label: "Localization", path: "/principles/localization" }, - { label: "Typography", path: "/principles/typography" }, ]; const foundationsLinks: LinkDetails[] = [ @@ -45,6 +43,7 @@ const foundationsLinks: LinkDetails[] = [ { label: "Height", path: "/foundations/height" }, { label: "Iconography", path: "/foundations/iconography" }, { label: "Spacing", path: "/foundations/spacing" }, + { label: "Typography", path: "/foundations/typography" }, ]; const componentsLinks = componentsList as LinkDetails[]; diff --git a/apps/website/screens/foundations/color/ColorPage.tsx b/apps/website/screens/foundations/color/ColorPage.tsx index e64b178c9e..46bfe7b382 100644 --- a/apps/website/screens/foundations/color/ColorPage.tsx +++ b/apps/website/screens/foundations/color/ColorPage.tsx @@ -11,6 +11,7 @@ import secondaryColor from "./images/secondary_color.png"; import tertiaryColor from "./images/tertiary_color.png"; import semanticColors from "./images/semantic_colors.png"; import PageHeading from "@/common/PageHeading"; +import Link from "next/link"; const sections = [ { @@ -31,9 +32,9 @@ const sections = [ The color system ensures optimal contrast ratios for readability and accessibility, aligning with{" "} - - WCAG 2.1 - + + WCAG 2.1 + standards. Token naming follows a semantic structure to promote clarity in implementation and usage. diff --git a/apps/website/screens/foundations/height/HeightPage.tsx b/apps/website/screens/foundations/height/HeightPage.tsx index 8de3684ee0..484d86a3b4 100644 --- a/apps/website/screens/foundations/height/HeightPage.tsx +++ b/apps/website/screens/foundations/height/HeightPage.tsx @@ -164,7 +164,7 @@ export default function HeightPage() { - + diff --git a/apps/website/screens/foundations/typography/TypographyPage.tsx b/apps/website/screens/foundations/typography/TypographyPage.tsx new file mode 100644 index 0000000000..5a7143ff06 --- /dev/null +++ b/apps/website/screens/foundations/typography/TypographyPage.tsx @@ -0,0 +1,646 @@ +import { DxcHeading, DxcParagraph, DxcFlex, DxcBulletedList, DxcLink, DxcTable } from "@dxc-technology/halstack-react"; +import PageHeading from "@/common/PageHeading"; +import DocFooter from "@/common/DocFooter"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; +import Image from "@/common/Image"; +import fontFamily from "./images/font_family.png"; +import heading from "./images/heading.png"; +import body from "./images/body.png"; +import helperText from "./images/helper_text.png"; +import label from "./images/label.png"; +import title from "./images/title.png"; +import link from "./images/link.png"; +import Link from "next/link"; +import Code from "@/common/Code"; + +const sections = [ + { + title: "Introduction", + content: ( + <> + + Typography plays a critical role in structuring the user’s experience through the visual impact it has on the + interface content. + + + It defines what is the first noticeable piece of information or data based on the font’s + shape, size, color, or type, and it highlights some pieces of text over others. + + + Our selected typography helps organize and prioritize content in a way that is clear, + accessible, and visually appealing. + + + ), + }, + { + title: "Text styles and tokens", + content: ( + <> + + Text styles and typography tokens consist of certain font properties, such as font family, size or weight. In + design tools like Figma, text styles are applied visually, while in code, typography tokens serve this + purpose. + + + Some typographic elements used in the Halstack Design System include{" "} + headers, body, helper texts, titles, and labels. In your designs, make use of those elements. + These typographic choices are already embedded within the typography tokens and will make it possible to + enable typography theming in the future. + + + These are the core definitions and tokens that form the base of the typographic system. They should be used + consistently across all typographic styles. + + + ), + subSections: [ + { + title: "Font family", + content: ( + <> + + For our sans-serif font-family we use Open Sans; a modern, humanist + sans-serif typeface designed by Steve Matteson. It is known for its{" "} + clarity, neutrality, and readability across a wide range of digital and print + applications. + + + With its{" "} + open forms, neutral yet friendly appearance, and optimized legibility at small sizes, + Open Sans is optimized for both web and mobile interfaces, balancing aesthetic appeal + with functional clarity. The typeface includes a wide character set that supports{" "} + Latin, Greek, and Cyrillic scripts, making it suitable for internationalization. + + + Open Sans can be accessed via{" "} + + Google Fonts + {" "} + and is released under the{" "} + + SIL Open Font License Version 1.1 + + . + + Font family + + ), + }, + { + title: "Font weights", + content: ( + <> + Different weights define hierarchy and emphasis in various elements. + + + + Weight + Token + Value + + + + + Light + + font/weight/light + + 300 + + + Regular + + font/weight/regular + + 400 + + + Semibold + + font/weight/semibold + + 600 + + + Bold + + font/weight/bold + + 700 + + + + + ), + }, + { + title: "Font styles", + content: ( + <> + + Font styles provide additional ways to convey meaning and emphasis in text elements. While different + styles such as italic can be used to highlight certain content, the default style applied is{" "} + normal. This ensures consistency and readability across most text, reserving other styles + for special cases.{" "} + + + + + Token + Style + Usage + + + + + + font/style/normal + + normal + Default + + + + font/style/lightitalic + + italic + Applied selectively for helper text where subtle emphasis is needed. + + + + + ), + }, + { + title: "Font sizes", + content: ( + <> + + Font sizes are assigned based on visual hierarchy needs. Not all sizes apply to every text element. + + + + + Token + Value (px) + + + + + + font/size/12 + + 12 + + + + font/size/14 + + 14 + + + + font/size/16 + + 16 + + + + font/size/18 + + 18 + + + + font/size/20 + + 20 + + + + font/size/24 + + 24 + + + + font/size/32 + + 32 + + + + font/size/40 + + 40 + + + + font/size/48 + + 48 + + + + font/size/60 + + 60 + + + + + ), + }, + ], + }, + { + title: "Usage", + content: ( + + Typography usage is categorized by purpose. Each category has predefined size and weight combinations to ensure + consistency and scalability across interfaces. + + ), + subSections: [ + { + title: "Heading", + content: ( + <> + + Use headings for page titles and section introductions. Headings are designed to stand out from regular + text, creating clear visual hierarchy and making it easier for readers to follow the organization of the + content. + + + Headings mark the start of new sections. Always use designated heading styles, rather than just bolding + text or changing the font size, since proper headings are important for accessibility. + + + Appropriate heading levels guide users through the page, especially those using screen readers or other + assistive devices. Correct use of heading levels also helps organize information, making content easier to + scan. + + + Heading tags (<h1> through <h6>) should be applied in order, without + skipping levels. Each page should have a single h1, typically reserved for the main title, and subsequent + headings should follow in sequence (for example, use h2 after h1, not h4). + + Heading + + + + Token + Font size + Font weight + Usage + + + + + + typography/heading/xs + + + font/size/12 + + Light / Regular / Semibold + H6 + + + + typography/heading/s + + + font/size/16 + + Light / Regular / Semibold + H5 + + + + typography/heading/m + + + font/size/20 + + Light / Regular / Semibold + H4 + + + + typography/heading/l + + + font/size/24 + + Light / Regular / Semibold + H3 + + + + typography/heading/xl + + + font/size/32 + + Light / Regular / Semibold + H2 + + + + typography/heading/xxl + + + font/size/40 + + Light / Regular / Semibold + H1 + + + + + ), + }, + { + title: "Body", + content: ( + <> + + Used for paragraphs, long-form content, and general UI copy. It usually follows headings or subheadings, + providing detailed information or messages. Body text should prioritize readability. Use sizes according + to density and layout needs. + + Body + + + + Token + Font size + Font weight + + + + + + typography/body/xs + + + font/size/12 + + Regular + + + + typography/body/s + + + font/size/14 + + Regular + + + + typography/body/m + + + font/size/16 + + Regular + + + + typography/body/l + + + font/size/18 + + Regular + + + + typography/body/xl + + + font/size/20 + + Regular + + + + typography/body/xxl + + + font/size/24 + + Regular + + + + + ), + }, + { + title: "Helper text", + content: ( + <> + + Used for inline guidance, validation messages, or tooltips. Helper text is typically small and subtle but + must remain legible. + + Helper text + + + + Size + Font size + Font weight + Font style + + + + + + typography/helper-text/s + + + font/size/12 + + Regular + - + + + + typography/helper-text/m + + + font/size/14 + + Regular / Semibold + - + + + + typography/helper-text/l + + + font/size/16 + + Light + Italic + + + + + ), + }, + { + title: "Title", + content: ( + <> + + Used for prominent titles in components such as cards or modals. Use sparingly for component-level titles + where a strong label is needed. + + Title + + + + Size + Font size + Font weight + + + + + S + + font/size/14 + + Bold + + + M + + font/size/16 + + Bold + + + L + + font/size/20 + + Bold + + + XL + + font/size/24 + + Bold + + + + + ), + }, + { + title: "Label", + content: ( + <> + + Used to describe UI elements such as form fields, checkboxes, or sections. Labels should be clear, + concise, and consistent in weight and size throughout the product. + + Label + + + + Size + Font size + Font weight + + + + + S + + font/size/12 + + Regular / Semibold + + + M + + font/size/14 + + Regular / Semibold + + + L + + font/size/16 + + Regular / Semibold + + + XL + + font/size/20 + + Regular / Semibold + + + + + ), + }, + { + title: "Link", + content: ( + <> + + Used for navigational or interactive text elements. Links use clear, recognizable styling and must be + distinguishable from body text. + + Link + + ), + }, + ], + }, + { + title: "Best practices", + content: ( + + + Use the defined font family (font/family/sans) consistently. + + Apply only the specified weight and size combinations per use case. + Avoid using font sizes smaller than 12px for accessibility reasons. + Maintain a minimum 4.5:1 contrast ratio for standard text. + + Do not apply custom typography outside of the predefined system to ensure consistency and scalability. + + + ), + }, +]; + +export default function TypographyPage() { + return ( + + + + + + + + + + + + ); +} diff --git a/apps/website/screens/foundations/typography/images/body.png b/apps/website/screens/foundations/typography/images/body.png new file mode 100644 index 0000000000..de1bf7762d Binary files /dev/null and b/apps/website/screens/foundations/typography/images/body.png differ diff --git a/apps/website/screens/foundations/typography/images/font_family.png b/apps/website/screens/foundations/typography/images/font_family.png new file mode 100644 index 0000000000..6d095f2bcd Binary files /dev/null and b/apps/website/screens/foundations/typography/images/font_family.png differ diff --git a/apps/website/screens/foundations/typography/images/heading.png b/apps/website/screens/foundations/typography/images/heading.png new file mode 100644 index 0000000000..974d92a535 Binary files /dev/null and b/apps/website/screens/foundations/typography/images/heading.png differ diff --git a/apps/website/screens/foundations/typography/images/helper_text.png b/apps/website/screens/foundations/typography/images/helper_text.png new file mode 100644 index 0000000000..582a9057c8 Binary files /dev/null and b/apps/website/screens/foundations/typography/images/helper_text.png differ diff --git a/apps/website/screens/foundations/typography/images/label.png b/apps/website/screens/foundations/typography/images/label.png new file mode 100644 index 0000000000..db60a39e04 Binary files /dev/null and b/apps/website/screens/foundations/typography/images/label.png differ diff --git a/apps/website/screens/foundations/typography/images/link.png b/apps/website/screens/foundations/typography/images/link.png new file mode 100644 index 0000000000..342ed4fbb1 Binary files /dev/null and b/apps/website/screens/foundations/typography/images/link.png differ diff --git a/apps/website/screens/foundations/typography/images/title.png b/apps/website/screens/foundations/typography/images/title.png new file mode 100644 index 0000000000..43a7bfa9bc Binary files /dev/null and b/apps/website/screens/foundations/typography/images/title.png differ diff --git a/apps/website/screens/principles/iconography/IconographyPage.tsx b/apps/website/screens/principles/iconography/IconographyPage.tsx deleted file mode 100644 index 76cd960eff..0000000000 --- a/apps/website/screens/principles/iconography/IconographyPage.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import { DxcHeading, DxcParagraph, DxcFlex, DxcLink, DxcBulletedList } from "@dxc-technology/halstack-react"; -import PageHeading from "@/common/PageHeading"; -import Link from "next/link"; -import DocFooter from "@/common/DocFooter"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import Image from "@/common/Image"; -import iconographyExamples from "./images/iconography_examples.png"; -import buttonsWithIcon from "./examples/buttonsWithIcon"; -import Example from "@/common/example/Example"; -import Code from "@/common/Code"; - -const sections = [ - { - title: "Introduction", - content: ( - <> - - Icons are used to visually represent commands, common actions, and locations. To facilitate providing users - with a standardized and more widely adopted icon library, the Halstack Design System leverages the{" "} - - Material Symbols - {" "} - library. This library contains over three thousand open source symbols implemented as an icon font that is - maintained by Google as part of the{" "} - - Material Design System - - . - - - ), - }, - { - title: "Usage", - content: ( - <> - Halstack Icons - - Icon sizes may vary depending on the specific use case and the context of the application. Within Halstack - components, most icons adhere to a 24x24px size, inclusive of any surrounding background or space. However, - there are instances where 20x20 or 16x16 icon sizes are employed to better align with the visual context of - the element. - - - At present, the default color of icons is consistently inherited from the parent during implementation. In - cases where no color is specified, icons default to black, though there are exceptions where the default color - is purple. - - - Icons are available in both outlined and filled variants, with the current implementation utilizing base - colors of black or white to maintain visual coherence. - - - While an extensive library of over three thousand icons is available, there may arise situations necessitating - custom icons—particularly those representing brands, companies, or organizations. In such cases, an SVG - implementation option is provided. However, it's recommended to limit the use of custom icons to these - specific scenarios, as adherence to the existing icon set is strongly encouraged for design consistency. - - - ), - }, - { - title: "Best practices", - content: ( - <> - - - Use icons within the context of commonly used components such as buttons, links, navigation items or status - indicators. - - - Do not use icons that fill the entire space allotted for the icon. All icons currently implemented maintain - a minimum of 1px of space each side (the largest solid icon occupies a maximum of 22px width or height). - - - Make sure to maintain scaling proportions and aspect ratios when resizing icons. - - - When using colors, make sure to consider the context of the icon being used as well as the consistency of - visual information being presented. - - - Limit the usage of colors green, red, and blue to common notifications such as success, error, or - information. - - - Halstack Users are encouraged to share their own variations of icon usage with the Halstack team so that - these can be added as references. - - - - ), - }, - { - title: "A code example", - content: ( - <> - - Icons are present in most of the Halstack components through the prop icon. Below are some - examples, using the DxcButton, representing the possibilities offered by our Design System: - - - Regular icon - Filled icon - Custom icon - - - - ), - }, -]; - -export default function IconographyPage() { - return ( - - - - - - - - - - - - ); -} diff --git a/apps/website/screens/principles/iconography/examples/buttonsWithIcon.tsx b/apps/website/screens/principles/iconography/examples/buttonsWithIcon.tsx deleted file mode 100644 index 1e671d3665..0000000000 --- a/apps/website/screens/principles/iconography/examples/buttonsWithIcon.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { DxcButton, DxcFlex, DxcInset } from "@dxc-technology/halstack-react"; - -const code = `() => { - return ( - - - - - - - - - - } - mode="secondary" - title="Assure answers" - /> - - - ); -}`; - -const scope = { - DxcButton, - DxcFlex, - DxcInset, -}; - -export default { code, scope }; diff --git a/apps/website/screens/principles/iconography/images/iconography_examples.png b/apps/website/screens/principles/iconography/images/iconography_examples.png deleted file mode 100644 index e2c02ff2b7..0000000000 Binary files a/apps/website/screens/principles/iconography/images/iconography_examples.png and /dev/null differ diff --git a/apps/website/screens/principles/typography/TypographyPageLayout.tsx b/apps/website/screens/principles/typography/TypographyPageLayout.tsx deleted file mode 100644 index 8cfe1e7c33..0000000000 --- a/apps/website/screens/principles/typography/TypographyPageLayout.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { DxcHeading, DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react"; -import PageHeading from "@/common/PageHeading"; -import TabsPageHeading from "@/common/TabsPageLayout"; -import { ReactNode } from "react"; - -const TypographyPageHeading = ({ children }: { children: ReactNode }) => { - const tabs = [ - { 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} - - ); -}; - -export default TypographyPageHeading; diff --git a/apps/website/screens/principles/typography/code/TypographyCodePage.tsx b/apps/website/screens/principles/typography/code/TypographyCodePage.tsx deleted file mode 100644 index d3cfbe357d..0000000000 --- a/apps/website/screens/principles/typography/code/TypographyCodePage.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import DocFooter from "@/common/DocFooter"; -import Example from "@/common/example/Example"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import { DxcFlex } from "@dxc-technology/halstack-react"; -import typographyBasicUsage from "./examples/typographyBasicUsage"; -import paragraphBasicUsage from "./examples/paragraphBasicUsage"; -import bulletedListBasicUsage from "./examples/bulletedListBasicUsage"; -import headingBasicUsage from "./examples/headingBasicUsage"; - -const sections = [ - { - title: "Examples", - subSections: [ - { - title: "Heading basic usage", - content: , - }, - { - title: "Paragraph basic usage", - content: , - }, - { - title: "Bulleted list basic usage", - content: , - }, - { - title: "Typography basic usage", - content: , - }, - ], - }, -]; - -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 deleted file mode 100644 index c94c686152..0000000000 --- a/apps/website/screens/principles/typography/code/examples/bulletedListBasicUsage.js +++ /dev/null @@ -1,24 +0,0 @@ -import { - DxcBulletedList, - DxcInset, - DxcHeading, -} from "@dxc-technology/halstack-react"; - -const code = `() => { - return ( - - - Code - Usage - Specifications - - - ); -}`; - -const scope = { - DxcBulletedList, - DxcInset, - DxcHeading, -}; -export default { code, scope }; diff --git a/apps/website/screens/principles/typography/code/examples/headingBasicUsage.js b/apps/website/screens/principles/typography/code/examples/headingBasicUsage.js deleted file mode 100644 index af3fab67d4..0000000000 --- a/apps/website/screens/principles/typography/code/examples/headingBasicUsage.js +++ /dev/null @@ -1,16 +0,0 @@ -import { DxcHeading, DxcInset } from "@dxc-technology/halstack-react"; - -const code = `() => { - return ( - - - - ); -}`; - -const scope = { - DxcHeading, - DxcInset, -}; - -export default { code, scope }; diff --git a/apps/website/screens/principles/typography/code/examples/paragraphBasicUsage.js b/apps/website/screens/principles/typography/code/examples/paragraphBasicUsage.js deleted file mode 100644 index 1dc8b9014a..0000000000 --- a/apps/website/screens/principles/typography/code/examples/paragraphBasicUsage.js +++ /dev/null @@ -1,21 +0,0 @@ -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, - 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. - - - ); -}`; - -const scope = { DxcParagraph, DxcInset }; - -export default { code, scope }; diff --git a/apps/website/screens/principles/typography/code/examples/typographyBasicUsage.js b/apps/website/screens/principles/typography/code/examples/typographyBasicUsage.js deleted file mode 100644 index 08e2379150..0000000000 --- a/apps/website/screens/principles/typography/code/examples/typographyBasicUsage.js +++ /dev/null @@ -1,18 +0,0 @@ -import { DxcInset, DxcTypography } from "@dxc-technology/halstack-react"; - -const code = `() => { - return ( - - - This is a very basic example of the use of the DxcTypography component. - - - ); -}`; - -const scope = { - DxcInset, - DxcTypography, -}; - -export default { code, scope }; diff --git a/apps/website/screens/principles/typography/usage/TypographyUsagePage.tsx b/apps/website/screens/principles/typography/usage/TypographyUsagePage.tsx deleted file mode 100644 index 365a951909..0000000000 --- a/apps/website/screens/principles/typography/usage/TypographyUsagePage.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import DocFooter from "@/common/DocFooter"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react"; -import Image from "@/common/Image"; -import Code from "@/common/Code"; -import typesOpenSans from "./images/type_open_sans.png"; - -const sections = [ - { - title: "Usage", - content: ( - <> - Typography overview - - Our selected typography helps in structuring our user's experience based on the visual impact that it has - on the user interface content. It defines what is the first noticeable piece of information or data based on - the font shape, size, color, or type and it highlights some pieces of text over the rest. Some typographic - elements used in Halstack Design System include headers, body, taglines, captions, and labels. - - - Make sure you include all the different typographic variants in order to enhance the application's content - structure, including the Heading component which defines different levels of page and section titles. - - - When defining the different typographic variants included in the Halstack Design System, we use a system of - layers: - - - A first, lower level layer in which we have the DxcTypography component, with which any - typographic combination contemplated within the values defined in the tables shown in the 'Code' tab can be - created. It is important to note that this lowest level component should only be considered as an option once - the rest of the components, with more specific context for certain use cases, have been discarded. - - - Above this first layer we have a second layer that provides a more specific context in which we have three - components: DxcParagraph, DxcBulletedList and DxcHeading; these - components, that are more focused on covering a specific use case in turn, use the first level component - DxcTypography. - - - - DxcParagraph component is intended to display text in paragraph format, separating it from the - other components by a line break. - - - DxcBulletedList component is intended to display an enumeration of certain elements. It is not - a substitute for native HTML tags <ul> and <ol>. - - - DxcHeading component is intended to define the hierarchy of content within the application. - - - - ), - }, -]; -const TypographyUsagePage = () => ( - - - - - - -); - -export default TypographyUsagePage; diff --git a/apps/website/screens/principles/typography/usage/images/type_open_sans.png b/apps/website/screens/principles/typography/usage/images/type_open_sans.png deleted file mode 100644 index 591cb2033f..0000000000 Binary files a/apps/website/screens/principles/typography/usage/images/type_open_sans.png and /dev/null differ