Feature / CLOUD-24320 / add body text typography

testing/package.json

@@ -26,8 +26,9 @@
     "@chakra-ui/theme-tools": "^2.1.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
-    "@fontsource/raleway": "^5.0.17",
-    "@fontsource/roboto": "^5.0.12",
+    "@fontsource/raleway": "^5.0.19",
+    "@fontsource/roboto": "^5.0.14",
+    "@fontsource/roboto-mono": "^5.0.18",
     "@hivemq/ui-theme": "workspace:^",
     "framer-motion": "^11.0.8",
     "react": "^18.2.0",

testing/src/App.tsx

@@ -1,4 +1,4 @@
-import { Box, ChakraBaseProvider, Heading } from '@chakra-ui/react'
+import { Box, ChakraBaseProvider, Heading, Text } from '@chakra-ui/react'
 import { theme } from '../../theme/src/main'
 
 import { Alerts } from '@/views/Alerts.tsx'
@@ -7,50 +7,50 @@ import { Colors } from '@/views/Colors'
 import { Headings } from '@/views/Headings'
 import { Links } from '@/views/Links.tsx'
 import { SemanticColors } from '@/views/SemanticColors'
+import { Texts } from '@/views/Texts'
 
 function App() {
+  const style = {
+    padding: '2rem',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '2rem',
+  }
   return (
     <ChakraBaseProvider theme={theme}>
-      <Box pl={6} pt={6}>
+      <Box style={style}>
         <Heading variant="h1">Colors</Heading>
-        <Box p={8}>
-          <Colors withText />
-        </Box>
+        <Colors withText />
+
         <hr />
-        <Heading variant="h1" pt={4}>
-          Semantic Colors
-        </Heading>
-        <Box p={8}>
-          <SemanticColors withText />
-        </Box>
+
+        <Heading variant="h1">Semantic Colors</Heading>
+        <SemanticColors withText />
+
         <hr />
-        <Heading variant="h1" pt={4}>
-          Headings
-        </Heading>
-        <Box p={8}>
-          <Headings />
-        </Box>
+
+        <Heading variant="h1">Headings</Heading>
+        <Headings />
+
         <hr />
-        <Heading variant="h1" pt={4}>
-          Buttons
-        </Heading>
-        <Box p={8}>
-          <Buttons />
-        </Box>
+
+        <Heading variant="h1">Texts</Heading>
+        <Texts />
+
         <hr />
-        <Heading variant="h1" pt={4}>
-          Links
-        </Heading>
-        <Box p={8}>
-          <Links />
-        </Box>
+
+        <Heading variant="h1">Buttons</Heading>
+        <Buttons />
+
+        <hr />
+
+        <Heading variant="h1"> Links</Heading>
+        <Links />
+
         <hr />
-        <Heading variant="h1" pt={4}>
-          Alerts
-        </Heading>
-        <Box p={8}>
-          <Alerts />
-        </Box>
+
+        <Heading variant="h1"> Links</Heading>
+        <Alerts />
       </Box>
     </ChakraBaseProvider>
   )

testing/src/views/Alerts.safetest.tsx

@@ -0,0 +1,19 @@
+import { ChakraBaseProvider } from '@chakra-ui/react'
+import { theme } from '@hivemq/ui-theme'
+import { render } from 'safetest/react'
+import { describe, expect, it } from 'safetest/vitest'
+
+import { Alerts } from '@/views/Alerts'
+
+// Whole App testing
+describe('Alerts', () => {
+  it('Visual test all alert variants', async () => {
+    const { page } = await render(() => (
+      <ChakraBaseProvider theme={theme}>
+        <Alerts />
+      </ChakraBaseProvider>
+    ))
+
+    expect(await page.screenshot()).toMatchImageSnapshot()
+  })
+})

testing/src/views/Links.safetest.tsx

@@ -0,0 +1,19 @@
+import { ChakraBaseProvider } from '@chakra-ui/react'
+import { theme } from '@hivemq/ui-theme'
+import { render } from 'safetest/react'
+import { describe, expect, it } from 'safetest/vitest'
+
+import { Links } from '@/views/Links'
+
+// Whole App testing
+describe('Links', () => {
+  it('Visual test all link variants', async () => {
+    const { page } = await render(() => (
+      <ChakraBaseProvider theme={theme}>
+        <Links />
+      </ChakraBaseProvider>
+    ))
+
+    expect(await page.screenshot()).toMatchImageSnapshot()
+  })
+})

testing/src/views/Links.tsx

@@ -3,7 +3,7 @@ import { Link } from '@chakra-ui/react'
 export function Links() {
   return (
     <>
-      <Link> DEFAULT </Link>
+      <Link> This is a link </Link>
     </>
   )
 }

testing/src/views/SemanticColors.safetest.tsx

@@ -0,0 +1,19 @@
+import { ChakraBaseProvider } from '@chakra-ui/react'
+import { theme } from '@hivemq/ui-theme'
+import { render } from 'safetest/react'
+import { describe, expect, it } from 'safetest/vitest'
+
+import { SemanticColors } from '@/views/SemanticColors'
+
+// Whole App testing
+describe('SemanticColors', () => {
+  it('Visual test all semantic color variants', async () => {
+    const { page } = await render(() => (
+      <ChakraBaseProvider theme={theme}>
+        <SemanticColors />
+      </ChakraBaseProvider>
+    ))
+
+    expect(await page.screenshot()).toMatchImageSnapshot()
+  })
+})

testing/src/views/Texts.safetest.tsx

@@ -0,0 +1,19 @@
+import { ChakraBaseProvider } from '@chakra-ui/react'
+import { theme } from '@hivemq/ui-theme'
+import { render } from 'safetest/react'
+import { describe, expect, it } from 'safetest/vitest'
+
+import { Texts } from '@/views/Texts'
+
+// Whole App testing
+describe('Texts', () => {
+  it('Visual test all text variants', async () => {
+    const { page } = await render(() => (
+      <ChakraBaseProvider theme={theme}>
+        <Texts />
+      </ChakraBaseProvider>
+    ))
+
+    expect(await page.screenshot()).toMatchImageSnapshot()
+  })
+})

testing/src/views/Texts.tsx

@@ -0,0 +1,101 @@
+import { neutrals } from '@/../../theme/src/foundations/colors'
+import { Box, Flex, HStack, Heading, Text, VStack } from '@chakra-ui/react'
+
+const sampleText = 'The Force will be with you, always.'
+
+const columnStyle = {
+  border: `1px solid ${neutrals['300']}`,
+  borderRadius: 12,
+  padding: 20,
+}
+
+type DisplayTextOptions = {
+  fontSize?: boolean
+  variant?: boolean
+}
+
+function displayText(
+  title: string,
+  sizes: readonly string[],
+  options: DisplayTextOptions = { fontSize: false, variant: true },
+) {
+  return (
+    <>
+      <VStack alignItems="start" style={columnStyle}>
+        <Heading as="h2">
+          {title}
+          {options.fontSize && (
+            <Text as="span" color="red">
+              {' '}
+              (Don't)
+            </Text>
+          )}
+          {options.variant && (
+            <Text as="span" color="green">
+              {' '}
+              (Do)
+            </Text>
+          )}
+        </Heading>
+        {sizes.map((size) => (
+          <Box key={`box-${size}`}>
+            <Heading as="h3">{size}</Heading>
+            {options.fontSize && (
+              <Box>
+                <Heading as="h4">{`<Text fontSize='${size}'>`}</Heading>
+                <Text fontSize={size} key={`text_${size}`} marginBottom="4" color="red">
+                  {sampleText}
+                </Text>
+              </Box>
+            )}
+            {options.variant && (
+              <Box>
+                <Heading as="h4">{`<Text variant='${size}'>`}</Heading>
+                <Text variant={size} key={`text3_${size}`} mt="1" mb="4" color="green">
+                  {sampleText}
+                </Text>
+              </Box>
+            )}
+          </Box>
+        ))}
+      </VStack>
+    </>
+  )
+}
+
+export function Texts() {
+  const chakraSizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const
+  const paragraphs = ['P1', 'P2', 'P3', 'P4', 'P5'] as const
+  const labels = ['L1', 'L2'] as const
+  const buttons = ['B1', 'B2'] as const
+  const metrics = ['M1', 'M2'] as const
+
+  return (
+    <>
+      <HStack alignItems="start" gap={8}>
+        {displayText('Chakra Sizes', chakraSizes, { fontSize: true })}
+        {displayText('Paragraphs', paragraphs)}
+        {displayText('Labels', labels)}
+        {displayText('Buttons', buttons)}
+        {displayText('Metrics', metrics)}
+      </HStack>
+
+      <Heading as="h2">Examples</Heading>
+
+      <Flex flexDirection="column" gap={1}>
+        <Heading as="h3">This is an H3 heading</Heading>
+        <Text variant="P1">This P1 paragraph goes well with an H3 heading.</Text>
+      </Flex>
+
+      <Flex flexDirection="column" gap={1}>
+        <Heading as="h4">This is an H4 heading</Heading>
+        <Text variant="P2">This P2 paragraph goes well with an H4 heading.</Text>
+      </Flex>
+
+      <Flex flexDirection="column" gap={1}>
+        <Heading as="h5">This is an H5 heading</Heading>
+        <Text variant="P3">This P3 paragraph goes well with an H5 heading.</Text>
+      </Flex>
+    </>
+  )
+}

testing/styles/fonts.css

@@ -6,6 +6,9 @@
 @import '../node_modules/@fontsource/roboto/700.css';
 @import '../node_modules/@fontsource/roboto/900.css';
 
+/* Install Roboto Mono for metrics text */
+@import '../node_modules/@fontsource/roboto-mono/400.css';
+
 /* Install Raleway for heading text */
 @import '../node_modules/@fontsource/raleway/100.css';
 @import '../node_modules/@fontsource/raleway/200.css';

theme/package.json

@@ -10,9 +10,7 @@
     "module": "./dist/index.es.js",
     "types": "./dist/index.es.d.ts"
   },
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "build": "pnpm build:types && pnpm build:lib",
     "build:lib": "vite build",

theme/src/components/button.ts

@@ -111,6 +111,7 @@ const md = defineStyle({
 
 const lg = defineStyle({
   height: '2rem',
+  paddingBottom: '.375rem',
 })
 
 const sizes = {