Add Text and Heading components (#400)

.changeset/blue-lemons-jump.md

@@ -0,0 +1,5 @@
+---
+'@utilitywarehouse/native-ui': minor
+---
+
+Add `Text` and `Heading` components

.changeset/brown-rules-wash.md

@@ -2,5 +2,5 @@
 '@utilitywarehouse/native-ui': minor
 ---
 
-feat: add `Button` component
-feat: add `IconButton` component
+Adds `Button` component
+Adds `IconButton` component

.changeset/long-mugs-beg.md

@@ -0,0 +1,5 @@
+---
+'@utilitywarehouse/native-ui': patch
+---
+
+Update `Badge` font size

apps/native-ui-storybook/.storybook/preview.tsx

@@ -147,13 +147,16 @@ const preview: Preview = {
               'Button',
               'Center',
               'Checkbox',
+              'Heading',
               'HStack',
               'Icons',
               'IconButton',
               'Pressable',
               'Radio',
               'Spinner',
+              'Text',
               'VStack',
+              'Lab',
               'unstyled',
             ],
           ],

apps/native-ui-storybook/components/Heading/Heading.docs.mdx

@@ -0,0 +1,48 @@
+import { Meta, Canvas, Story, Controls, Primary } from '@storybook/blocks';
+import * as Stories from './Heading.stories';
+import { Center, Pressable, Text, Heading, NativeUIProvider } from '@utilitywarehouse/native-ui';
+
+<Meta of={Stories} />
+
+# Heading
+
+The `Heading` component gives you the ability to create headings for your screen with different sizes and semantics from h1 to h6.
+
+## Playground
+
+<Primary />
+
+<Controls />
+
+## Usage
+
+> This component should be wrapped in a `NativeUIProvider` component to ensure that the correct theme is applied.
+
+<Canvas>
+  <NativeUIProvider>
+    <Center>
+      <Heading size="h4">Welcome to Utility Warehouse</Heading>
+    </Center>
+  </NativeUIProvider>
+</Canvas>
+
+```jsx
+import { Heading } from '@utilitywarehouse/native-ui';
+
+const MyComponent = () => <Heading size="h4">Welcome to Utility Warehouse</Heading>;
+```
+
+## Props
+
+| Property        | Type                                           | Description                         | Default |
+| --------------- | ---------------------------------------------- | ----------------------------------- | ------- |
+| `size`          | `'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'` | The size of the heading.            | 'h4'    |
+| `truncated`     | `boolean`                                      | Truncate the text with an ellipsis. | `false` |
+| `underline`     | `boolean`                                      | Underline the text.                 | `false` |
+| `strikeThrough` | `boolean`                                      | Strike through the text.            | `false` |
+
+## Variants
+
+The `Heading` component has different variants to style the text.
+
+<Canvas of={Stories.Variants} />

apps/native-ui-storybook/components/Heading/Heading.stories.tsx

@@ -0,0 +1,14 @@
+import Heading from './Heading';
+import Variants from './Variants';
+import type { Meta } from '@storybook/react';
+
+const HeadingMeta: Meta<typeof Heading> = {
+  title: 'Native UI / Components / Heading',
+  component: Heading,
+  argTypes: {},
+  args: {},
+};
+
+export default HeadingMeta;
+
+export { Heading as Playground, Variants };

apps/native-ui-storybook/components/Heading/Heading.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Center, Heading } from '@utilitywarehouse/native-ui';
+import { Meta } from '@storybook/react';
+
+const HeadingBasic = ({ ...props }: any) => {
+  return (
+    <Heading {...props}>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua.
+    </Heading>
+  );
+};
+
+HeadingBasic.argTypes = {
+  size: {
+    options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+    control: 'select',
+    description: 'The size of the heading.',
+  },
+  truncated: {
+    type: 'boolean',
+    control: 'boolean',
+    description: 'Truncate the heading.',
+  },
+  underline: {
+    type: 'boolean',
+    control: 'boolean',
+    description: 'Underline the heading.',
+  },
+  strikeThrough: {
+    type: 'boolean',
+    control: 'boolean',
+    description: 'Strike through the heading.',
+  },
+} as Meta<typeof Heading>['argTypes'];
+
+HeadingBasic.args = {
+  size: 'h4',
+  truncated: false,
+  underline: false,
+  strikeThrough: false,
+} as Meta<typeof Heading>['args'];
+
+export default HeadingBasic;
+
+export { Heading, Center };

apps/native-ui-storybook/components/Heading/Variants.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Center, Heading, VStack } from '@utilitywarehouse/native-ui';
+import { VariantTitle } from '../../docs/components';
+
+const HeadingBasic = () => {
+  return (
+    <VStack gap="$6">
+      <VariantTitle title="Heading 1">
+        <Heading size="h1">Aeonik - Bold (700), 32px Size / 40px Line height / 0px Letter</Heading>
+      </VariantTitle>
+      <VariantTitle title="Heading 2">
+        <Heading size="h2">Aeonik - Bold (700), 28px Size / 32px Line height / 0px Letter</Heading>
+      </VariantTitle>
+      <VariantTitle title="Heading 3">
+        <Heading size="h3">Aeonik - Bold (700), 24px Size / 32px Line height / 0px Letter</Heading>
+      </VariantTitle>
+      <VariantTitle title="Heading 4">
+        <Heading size="h4">Aeonik - Bold (700), 18px Size / 24px Line height / 0px Letter</Heading>
+      </VariantTitle>
+      <VariantTitle title="Heading 5">
+        <Heading size="h5">Aeonik - Bold (700), 16px Size / 20px Line height / 0px Letter</Heading>
+      </VariantTitle>
+      <VariantTitle title="Heading 6">
+        <Heading size="h6">
+          Work Sans - Regular (400), 16px Size / 24px Line height / 0px Letter
+        </Heading>
+      </VariantTitle>
+    </VStack>
+  );
+};
+
+export default HeadingBasic;
+
+export { Heading, Center };

apps/native-ui-storybook/components/Text/Text.docs.mdx

@@ -0,0 +1,61 @@
+import { Meta, Canvas, Story, Controls, Primary } from '@storybook/blocks';
+import * as Stories from './Text.stories';
+import { Center, Pressable, Text, NativeUIProvider } from '@utilitywarehouse/native-ui';
+
+<Meta of={Stories} />
+
+# Text
+
+The `Text` component gives you the ability to create text for your screen. It can be used to display text in different sizes and styles.
+
+## Playground
+
+<Primary />
+
+<Controls />
+
+## Usage
+
+> This component should be wrapped in a `NativeUIProvider` component to ensure that the correct theme is applied.
+
+<Canvas>
+  <NativeUIProvider>
+    <Center>
+      <Text>
+        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.
+      </Text>
+    </Center>
+  </NativeUIProvider>
+</Canvas>
+
+```jsx
+import { Heading } from '@utilitywarehouse/native-ui';
+
+const MyComponent = () => (
+  <Text>
+    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.
+  </Text>
+);
+```
+
+## Props
+
+| Property        | Type                   | Description                         | Default |
+| --------------- | ---------------------- | ----------------------------------- | ------- |
+| `size`          | `'xs' \| 'sm' \| 'md'` | The size of the text.               | 'md'    |
+| `highlight`     | `boolean`              | Highlight the text.                 | `false` |
+| `strikeThrough` | `boolean`              | Strike through the text.            | `false` |
+| `truncated`     | `boolean`              | Truncate the text with an ellipsis. | `false` |
+| `underline`     | `boolean`              | Underline the text.                 | `false` |
+| `bold`          | `boolean`              | Bold the text.                      | `false` |
+| `italic`        | `boolean`              | Italicise the text.                 | `false` |
+
+## Variants
+
+The `Text` component has different variants to style the text.
+
+<Canvas of={Stories.Variants} />

apps/native-ui-storybook/components/Text/Text.stories.tsx

@@ -0,0 +1,14 @@
+import Text from './Text';
+import Variants from './Variants';
+import type { Meta } from '@storybook/react';
+
+const TextMeta: Meta<typeof Text> = {
+  title: 'Native UI / Components / Text',
+  component: Text,
+  argTypes: {},
+  args: {},
+};
+
+export default TextMeta;
+
+export { Text as Playground, Variants };

apps/native-ui-storybook/components/Text/Text.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Center, Text } from '@utilitywarehouse/native-ui';
+import { Meta } from '@storybook/react';
+
+const TextBasic = ({ ...props }: any) => {
+  return (
+    <Text {...props}>
+      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. Excepteur sint occaecat cupidatat
+      non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </Text>
+  );
+};
+
+TextBasic.argTypes = {
+  size: {
+    options: ['xs', 'sm', 'md'],
+    control: 'select',
+    description: 'The size of the text.',
+  },
+  highlight: {
+    type: 'boolean',
+    control: 'boolean',
+    description: 'Highlight the text.',
+  },
+  truncated: {
+    type: 'boolean',
+    control: 'boolean',
+    description: 'Truncate the text.',
+  },
+  bold: {
+    type: 'boolean',
+    control: 'boolean',
+    description: 'Bold the text.',
+  },
+  italic: {
+    type: 'boolean',
+    control: 'boolean',
+    description: 'Italicize the text.',
+  },
+  underline: {
+    type: 'boolean',
+    control: 'boolean',
+    description: 'Underline the text.',
+  },
+  strikeThrough: {
+    type: 'boolean',
+    control: 'boolean',
+    description: 'Strike through the text.',
+  },
+} as Meta<typeof Text>['argTypes'];
+
+TextBasic.args = {
+  size: 'md',
+  highlight: false,
+  truncated: false,
+  bold: false,
+  italic: false,
+  underline: false,
+  strikeThrough: false,
+} as Meta<typeof Text>['args'];
+
+export default TextBasic;
+
+export { Text, Center };

apps/native-ui-storybook/components/Text/Variants.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Center, Text, VStack } from '@utilitywarehouse/native-ui';
+import { VariantTitle } from '../../docs/components';
+
+const TextBasic = () => {
+  return (
+    <VStack gap="$6">
+      <VariantTitle title="Default - Body / Medium">
+        <Text>Work Sans - Regular (400), 16px Size / 24px Line height / 0px Letter</Text>
+      </VariantTitle>
+      <VariantTitle title="Default - Body / Medium - Strikethrough">
+        <Text strikeThrough>
+          Work Sans - Regular (400), 16px Size / 24px Line height / 0px Letter
+        </Text>
+      </VariantTitle>
+      <VariantTitle title="Default - Body / Medium - Highlight">
+        <Text highlight>
+          Work Sans - Semi Bold (600), 16px Size / 24px Line height / 0px Letter
+        </Text>
+      </VariantTitle>
+      <VariantTitle title="Body Small">
+        <Text size="sm">Work Sans - Regular (400), 14px Size / 16px Line height / 0px Letter</Text>
+      </VariantTitle>
+      <VariantTitle title="Body Small - Highlighted">
+        <Text size="sm" highlight>
+          Work Sans - Semi Bold (600), 14px Size / 16px Line height / 0px Letter
+        </Text>
+      </VariantTitle>
+      <VariantTitle title="Body X-Small">
+        <Text size="xs">Work Sans - Regular (400), 12px Size / 16px Line height / 0px Letter</Text>
+      </VariantTitle>
+    </VStack>
+  );
+};
+
+export default TextBasic;
+
+export { Text, Center };

apps/native-ui-storybook/docs/components/VariantTitle.tsx

@@ -0,0 +1,12 @@
+import { Box, Text } from '@utilitywarehouse/native-ui';
+
+const VariantTitle = ({ title, children }: any) => (
+  <Box gap="$2">
+    <Text textTransform="uppercase" size="xs" highlight color="$grey600">
+      {title}
+    </Text>
+    {children}
+  </Box>
+);
+
+export default VariantTitle;

apps/native-ui-storybook/docs/components/index.ts

@@ -1,3 +1,4 @@
 export { default as BackToTopButton } from './BackToTopButton';
 export { default as ViewFigmaButton } from './ViewFigmaButton';
 export { default as ScrollWrap } from './ScrollWrap';
+export { default as VariantTitle } from './VariantTitle';

apps/native-ui-storybook/docs/native-ui/guides/tokens.mdx

@@ -27,7 +27,7 @@ import BackToTopButton from '../../components/BackToTopButton';
 
 `native-ui` uses a design token system to provide a consistent and scalable way to manage design properties.
 
-`native-ui` ships with default tokens that provide access to theme values and lets you build and customize your own themed components.
+`native-ui` ships with default tokens that provide access to theme values and lets you build and customise your own themed components.
 It has colors, typography, size, opacity, shadows, breakpoints and more.
 
 ## Colours