@telus-uds/components-base 0.0.2-prerelease.5 → 0.0.2-prerelease.9

package/stories/Tabs/Tabs.stories.jsx

@@ -0,0 +1,97 @@
+/* eslint-disable react/no-multi-comp */
+import React, { useState } from 'react'
+import { Platform } from 'react-native'
+
+import { Link, StackView, Tabs, Typography } from '../../lib'
+
+export default {
+  title: 'Base/Tabs',
+  component: Tabs
+}
+
+export const Default = (args) => <Tabs {...args} />
+Default.storyName = 'Tabs'
+Default.args = {
+  items: [
+    { label: 'First item' },
+    { label: 'Second item' },
+    { label: 'Much longer third item' },
+    { label: 'Fourth item' },
+    { label: 'Fifth item' },
+    { label: 'Sixth item' },
+    { label: 'Seventh item' },
+    { label: 'Eighth item' },
+    { label: 'Ninth item' }
+  ]
+}
+
+export const TabsWithHref = (args) => <Tabs {...args} />
+TabsWithHref.args = {
+  items: [
+    { href: 'https://telus.com', label: 'First item' },
+    { href: 'https://telus.com', label: 'Second item' },
+    { href: 'https://telus.com', label: 'Much longer third item' },
+    { href: 'https://telus.com', label: 'Fourth item' },
+    { href: 'https://telus.com', label: 'Fifth item' },
+    { href: 'https://telus.com', label: 'Sixth item' },
+    { href: 'https://telus.com', label: 'Seventh item' },
+    { href: 'https://telus.com', label: 'Eighth item' },
+    { href: 'https://telus.com', label: 'Ninth item' }
+  ]
+}
+
+const loremIpsumArray = '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. '
+  .repeat(5)
+  .split('. ')
+
+export const TabsControlled = (args) => {
+  const [page, setPage] = useState('1')
+
+  return (
+    <StackView space={4}>
+      <Tabs {...args} value={page} onChange={setPage} />
+      <Typography>This is some sample content for page {page}.</Typography>
+      <Typography>
+        {`${loremIpsumArray.slice(Number(page) - 1, Number(page) + 3).join('. ')}...`}
+      </Typography>
+    </StackView>
+  )
+}
+TabsControlled.args = {
+  items: [
+    { id: '1', label: 'First item' },
+    { id: '2', label: 'Second item' },
+    { id: '3', label: 'Much longer third item' },
+    { id: '4', label: 'Fourth item' },
+    { id: '5', label: 'Fifth item' },
+    { id: '6', label: 'Sixth item' },
+    { id: '7', label: 'Seventh item' },
+    { id: '8', label: 'Eighth item' },
+    { id: '9', label: 'Ninth item' }
+  ]
+}
+
+export const TabsControlledHashes = ({ items, ...args }) => {
+  const [page, setPage] = useState('1')
+  if (Platform.OS !== 'web') return <Typography>Hashes are only supported on Web.</Typography>
+  const linkTarget = Number(page) >= items.length ? '#item1' : `#item${Number(page) + 1}`
+  return (
+    <StackView space={4}>
+      <Tabs {...args} items={items} value={page} onChange={setPage} />
+      <Typography>
+        This is some sample content for page {page}. Try this ordinary hash link to{' '}
+        <Link href={linkTarget}>{linkTarget}</Link>.
+      </Typography>
+      <Typography>
+        {`${loremIpsumArray.slice(Number(page) - 1, Number(page) + 3).join('. ')}...`}
+      </Typography>
+    </StackView>
+  )
+}
+TabsControlledHashes.propTypes = Tabs.propTypes
+TabsControlledHashes.args = {
+  items: TabsControlled.args.items.map((item) => ({
+    ...item,
+    href: `#item${item.id}`
+  }))
+}

package/stories/Tags/Tags.stories.jsx

@@ -0,0 +1,69 @@
+/* eslint-disable react/no-multi-comp */
+import React, { useState } from 'react'
+import { View } from 'react-native'
+import { Tags, Typography } from '../../lib'
+import { Container } from '../supports'
+
+const defaultArgs = {
+  items: [
+    { label: 'First item', id: 'first' },
+    { label: 'Second item', id: 'second' },
+    { label: 'Third item', id: 'third' },
+    { label: 'Fourth item', id: 'fourth' },
+    { label: 'Fifth item', id: 'fifth' },
+    { label: 'Sixth item', id: 'sixth' }
+  ],
+  initialValues: ['second', 'fourth']
+}
+const defaultControlledArgs = {
+  ...defaultArgs,
+  values: defaultArgs.initialValues,
+  initialValues: undefined
+}
+
+export default {
+  title: 'Base/Tags',
+  component: Tags,
+  args: {
+    ...defaultArgs
+  }
+}
+
+const UncontrolledTemplate = (args) => <Tags {...args} />
+UncontrolledTemplate.propTypes = Tags.propTypes
+
+const ControlledTemplate = ({ values, ...args }) => {
+  // Simulate saving and retrieving data from a server
+  const [isSaving, setIsSaving] = useState(false)
+  const [currentValues, setValues] = useState(values)
+  const handleChange = (newValue) => {
+    setIsSaving(true)
+    setTimeout(() => {
+      setValues(newValue)
+      setIsSaving(false)
+    }, 400)
+  }
+
+  const text = isSaving ? 'Saving...' : `Saved selected tags: "${currentValues.join('", "')}".`
+  return (
+    <View>
+      <Container padding={4} margin={0}>
+        <Typography variant={{ size: 'small', colour: 'secondary' }}>{text}</Typography>
+      </Container>
+      <Container padding={4} margin={0}>
+        <Tags {...args} values={currentValues} onChange={handleChange} />
+      </Container>
+    </View>
+  )
+}
+
+ControlledTemplate.propTypes = Tags.propTypes
+
+export const Default = UncontrolledTemplate.bind({})
+Default.storyName = 'Tags'
+
+export const TagsControlled = ControlledTemplate.bind({})
+TagsControlled.args = { ...defaultControlledArgs }
+
+export const TagsInactive = UncontrolledTemplate.bind({})
+TagsInactive.args = { inactive: true }

package/stories/TextInput/TextArea.stories.jsx

@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from 'react'
+
+import { TextArea } from '../../lib'
+import { Container } from '../supports'
+
+export default {
+  title: 'Base/TextArea',
+  component: TextArea
+}
+
+const Template = (args) => <TextArea {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  label: 'Label',
+  hint: 'This is a hint',
+  tooltip: 'This is a tooltip',
+  feedback: 'This is the feedback'
+}
+
+export const WithHint = () => {
+  return (
+    <>
+      <Container>
+        <TextArea label="Label" hint="An inline hint" tooltip="Tooltip content" />
+      </Container>
+      <Container>
+        <TextArea
+          label="Label"
+          hint="A usually much longer hint below"
+          hintPosition="below"
+          tooltip="Tooltip content"
+        />
+      </Container>
+    </>
+  )
+}
+
+export const WithFeedback = () => {
+  return (
+    <>
+      <Container>
+        <TextArea label="Instructional" feedback="An instructional feedback" />
+      </Container>
+      <Container>
+        <TextArea label="Success" validation="success" feedback="A detailed success message" />
+      </Container>
+      <Container>
+        <TextArea label="Error" validation="error" feedback="A detailed error message" />
+      </Container>
+    </>
+  )
+}
+
+export const InactiveAndReadOnly = () => {
+  return (
+    <>
+      <Container>
+        <TextArea label="Inactive" inactive initialValue="can't touch this" />
+      </Container>
+      <Container>
+        <TextArea label="Read only" readOnly value="won't change" />
+      </Container>
+    </>
+  )
+}
+
+export const Controlled = () => {
+  const [value, setValue] = useState('')
+  const [validation, setValidation] = useState()
+
+  useEffect(() => {
+    if (value !== undefined && value.length > 0)
+      setValidation(value.length < 6 ? 'success' : 'error')
+  }, [value])
+
+  const defaultFeedbackContent =
+    'Will show an error if longer than 6 characters and success otherwise'
+
+  const feedbackContent = {
+    error: 'The value must be shorter than 6 characters',
+    success: 'Yay! The value has less than 6 characters'
+  }
+
+  const feedback = validation === undefined ? defaultFeedbackContent : feedbackContent[validation]
+
+  return (
+    <>
+      <Container>
+        <TextArea
+          label="Controlled"
+          validation={validation}
+          feedback={feedback}
+          value={value}
+          onChange={setValue}
+        />
+      </Container>
+    </>
+  )
+}

package/stories/Tooltip/Tooltip.stories.jsx

@@ -0,0 +1,81 @@
+/* eslint-disable react-native/no-inline-styles */
+/* eslint-disable react/no-multi-comp */
+import React from 'react'
+import { View, Text } from 'react-native'
+
+import { Tooltip, Typography } from '../../lib'
+import { Container } from '../supports'
+
+export default {
+  title: 'Base/Tooltip',
+  component: Tooltip
+}
+
+const Template = (args) => <Tooltip {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  content: 'This is a tooltip'
+}
+
+export const Positioning = () => (
+  <>
+    <Typography>Here to preload the fonts</Typography>
+    <Container>
+      <Tooltip content="position is forced to left" position="left" />
+    </Container>
+    <Container>
+      <Tooltip content="automatically positioned" />
+    </Container>
+    <Container>
+      <View style={{ alignSelf: 'center', marginRight: 140 }}>
+        <Tooltip content="position is forced to below" position="below" />
+      </View>
+    </Container>
+    <Container>
+      <View style={{ alignSelf: 'center' }}>
+        <Tooltip
+          content="(automatically positioned) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
+          luctus sapien in felis auctor commodo. Mauris sagittis, lorem eu rhoncus mattis, mi erat
+          mollis lectus, in ornare"
+        />
+      </View>
+    </Container>
+    <Container>
+      <View style={{ alignSelf: 'center', marginLeft: 140 }}>
+        <Tooltip content="automatically positioned" />
+      </View>
+    </Container>
+    <Container>
+      <View style={{ alignSelf: 'flex-end' }}>
+        <Tooltip content="automatically positioned automatically positioned" />
+      </View>
+    </Container>
+    <Container>
+      <View style={{ alignSelf: 'flex-end', marginTop: 500 }}>
+        <Tooltip position="right" content="position is forced to right" />
+      </View>
+    </Container>
+  </>
+)
+
+export const CustomControl = () => (
+  <Tooltip content="Amazing 😍">
+    <Text>Tooltip is applied to this text</Text>
+  </Tooltip>
+)
+
+export const CustomControlFunction = () => (
+  <Tooltip content="Tooltip content">
+    {(pressableState, variant) => (
+      <Text>
+        Tooltip is applied to this text (state: {pressableState.hover ? 'hover' : 'default'},
+        variant: {variant?.inverse ? 'inverse' : 'none'})
+      </Text>
+    )}
+  </Tooltip>
+)
+
+export const ComponentsInContent = () => (
+  <Tooltip content={<Typography tokens={{ color: 'white' }}>Typography in content</Typography>} />
+)

package/stories/TooltipButton/TooltipButton.stories.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import { TooltipButton } from '../../lib'
+
+export default {
+  title: 'Base/TooltipButton',
+  component: TooltipButton
+}
+
+export const Default = () => <TooltipButton onPress={() => {}} />
+Default.storyName = 'TooltipButton'

package/stories/supports.jsx

@@ -1,11 +1,25 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Platform, ScrollView, View, StyleSheet } from 'react-native'
+import { Platform, ScrollView, Text, View, StyleSheet } from 'react-native'
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import * as alliumIcons from '@telus-uds/palette-allium/build/rn/icons'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import * as koodoIcons from '@telus-uds/palette-koodo/build/rn/icons'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import * as pmIcons from '@telus-uds/palette-public-mobile/build/rn/icons'
+
 import { useTheme, getComponentTheme } from '../lib/ThemeProvider'
 import { Typography } from '../lib'
 import { containers as platformContainers } from './platform-supports'
 
+const iconSets = {
+  allium: alliumIcons,
+  koodo: koodoIcons,
+  publicMobile: pmIcons
+}
+
 const RowWrap = ({ children }) => <View style={styles.rowWrap}>{children}</View>
 RowWrap.propTypes = { children: PropTypes.node }
 
@@ -92,6 +106,26 @@ export const parentTypesParams = {
   }
 }
 
+/**
+ * Utility component that takes a render function as its child and runs it for each
+ * icon entry in the RN build of the palette of the currently selected theme.
+ *
+ * If the theme isn't supported or named, it returns a message saying no icons found.
+ */
+export const EachIcon = ({ children }) => {
+  const theme = useTheme()
+  const themeName = theme?.metadata?.name
+  const iconSet = iconSets[themeName]
+  return iconSet ? (
+    Object.entries(iconSet).map((iconEntry) => children(iconEntry))
+  ) : (
+    <Text>{`No icons found for theme "${themeName}"`}</Text>
+  )
+}
+EachIcon.propTypes = {
+  children: PropTypes.func
+}
+
 export const Placeholder = ({ margin = false, ...props }) => (
   <View style={[styles.placeholder, margin && styles.margin]}>
     <Typography {...props} />
@@ -150,7 +184,7 @@ export const useVariants = (componentName) => {
   }
 
   const variants = Object.entries(appearances).reduce(
-    (pairs, [key, { values, type }]) =>
+    (pairs, [key, { values, type } = {}]) =>
       type === 'variant'
         ? [...pairs, ...values.map((value) => [key, value, getVariantLabel(key, value)])]
         : pairs,

package/__fixtures__/accessible.icon.svg

@@ -1,6 +0,0 @@
-<svg viewBox="0 0 24 24">
-  <path
-    d="M4.2311 12.2566L4.8931 12.9186C4.2651 13.8746 3.9111 14.9836 3.9111 16.1536C3.9111 17.7386 4.5291 19.2316 5.6511 20.3536C6.7731 21.4746 8.2641 22.0926 9.8501 22.0926C10.9235 22.0926 11.9432 21.7951 12.842 21.2619L13.0841 21.1106L13.7311 21.7556C12.5641 22.5666 11.2141 22.9996 9.8501 22.9996C8.0961 22.9996 6.3411 22.3316 5.0061 20.9966C3.7121 19.7026 2.9991 17.9826 2.9991 16.1536C2.9991 14.8388 3.37676 13.586 4.06644 12.5034L4.2311 12.2566ZM10.0407 2.26661C10.2191 2.26661 10.3994 2.30373 10.5683 2.37899L10.743 2.4718C11.3183 2.80605 16.6402 5.89799 16.6497 5.90461C16.9567 6.09661 17.1567 6.39661 17.2287 6.72661C17.3529 7.16041 17.2827 7.64038 17.0086 8.02655L16.9097 8.15161L14.2287 10.8896C14.3347 10.9776 14.4398 11.0683 14.5423 11.1634L14.7084 11.3251L14.7217 11.3406L19.8577 10.7376L19.9287 10.7356C20.2777 10.7356 20.6147 10.8766 20.8597 11.1286C21.0898 11.364 21.2204 11.6759 21.228 12.0008L21.2237 12.1406L20.8337 18.8506C20.7837 19.6246 20.1427 20.2196 19.3787 20.2196L19.2847 20.2166C18.5271 20.1677 17.9457 19.55 17.9233 18.8064L17.9257 18.6656L18.2627 14.2006C18.2707 14.1446 18.2257 14.0976 18.1737 14.0976L16.4637 14.3986C16.9377 16.196 16.6627 18.145 15.6541 19.7655L15.4887 20.0186L14.8287 19.3596C15.4437 18.4086 15.7897 17.3106 15.7897 16.1526C15.7897 14.5676 15.1717 13.0746 14.0507 11.9536C12.9277 10.8316 11.4367 10.2136 9.8497 10.2136C8.78912 10.2136 7.77727 10.5043 6.88425 11.0257L6.6437 11.1736L5.9957 10.5256C6.89297 9.90834 7.89686 9.51172 8.93523 9.36958L9.2477 9.33461L11.7547 6.55661L10.2547 5.68061L8.3307 7.30961C8.0417 7.59861 7.6647 7.74361 7.2887 7.74361C6.9127 7.74361 6.5377 7.59961 6.2497 7.31161C5.70782 6.76973 5.69593 5.8886 6.17199 5.30432L6.2737 5.19161L9.1757 2.59561C9.4197 2.37861 9.7277 2.26661 10.0407 2.26661ZM20.2817 12.6526C20.3768 11.8055 19.8748 11.6893 19.5319 11.6977L19.4697 11.7006L15.4947 12.1676C15.7179 12.506 15.9053 12.8694 16.0711 13.2408L16.1917 13.5206L17.9407 13.2126L18.0177 13.1906L18.1737 13.1866C18.4617 13.1866 18.7357 13.3116 18.9277 13.5276C19.0777 13.7009 19.1638 13.9187 19.1739 14.1445L19.1707 14.2806L18.8337 18.7346C18.8247 18.8706 18.8727 19.0136 18.9697 19.1236C19.0457 19.2108 19.1454 19.2698 19.257 19.2951L19.3427 19.3076C19.6316 19.3076 19.8517 19.1283 19.9104 18.8861L19.9247 18.7926L20.2817 12.6526ZM10.0407 3.17761C9.9687 3.17761 9.89895 3.1973 9.83862 3.23414L9.7817 3.27661L6.9047 5.84961C6.6897 6.07961 6.6827 6.45661 6.8927 6.66661C7.0007 6.77361 7.1397 6.83261 7.2887 6.83261C7.4071 6.83261 7.52166 6.79485 7.61753 6.72445L7.6857 6.66561L7.7127 6.63861L10.1567 4.56861L13.1807 6.33461L10.5177 9.28661C11.4555 9.38172 12.3648 9.67199 13.2008 10.1371L13.5107 10.3196L16.2377 7.53561C16.3452 7.40644 16.393 7.24116 16.3729 7.07565L16.3527 6.97661L16.3397 6.92261C16.3267 6.86361 16.2887 6.75661 16.1747 6.68161L10.2347 3.23061C10.1757 3.19561 10.1087 3.17761 10.0407 3.17761ZM17.7427 0.999908C18.9037 0.999908 19.8487 1.94491 19.8487 3.10591C19.8487 4.26691 18.9037 5.21291 17.7427 5.21291C16.5817 5.21291 15.6367 4.26691 15.6367 3.10591C15.6367 1.94491 16.5817 0.999908 17.7427 0.999908ZM17.7427 1.91091C17.0837 1.91091 16.5477 2.44691 16.5477 3.10591C16.5477 3.76491 17.0837 4.30191 17.7427 4.30191C18.4017 4.30191 18.9377 3.76491 18.9377 3.10591C18.9377 2.44691 18.4017 1.91091 17.7427 1.91091Z"
-    fillRule="evenodd"
-  />
-</svg>

package/babel.config.json

@@ -1,8 +0,0 @@
-{
-  "presets": [["@babel/preset-react", { "useBuiltIns": true }]],
-  "env": {
-    "test": {
-      "presets": ["module:metro-react-native-babel-preset"]
-    }
-  }
-}

package/docs/Contributing.stories.mdx

@@ -1,9 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks'
-
-<Meta title="Guides/Contributing" />
-
-# Contributing to UDS
-
-Contributions are welcome, we have a code of conduct, etc etc...
-
-<!-- @TODO fill out -->

package/docs/Fonts.stories.mdx

@@ -1,104 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks'
-
-<Meta title="Guides/Fonts" />
-
-# Fonts
-
-## Understanding the font model and React Native limitations
-
-React Native broadly adheres to the CSS model for fonts, and so we use this as the basis of our font modelling for UDS.
-Font properties are named to correspond to CSS properties (_e.g._ `fontWeight` is equivalent to `font-weight`).
-In general you can specify design tokens corresponding to all CSS font properties.
-
-However, React Native does not handle font families in the same way as CSS does for web.
-On the web it is normal to specify a font via a `font-family`, and then apply a `font-weight` and `font-style` from within that family.
-You could then create equivalent `font-face` declarations which "group" all of the font weights and styles of that font face into a font family.
-Unfortunately, React Native does not have particularly good support for [font weights within a font family](https://reactnative.dev/docs/text-style-props#fontweight).
-In order to support font weights effectively on React Native we need to define a new font family for every font face/font weight/font style combination.
-So whereas in CSS you might write:
-
-```CSS
-  .my-font-class {
-    font-family: "MyFont";
-    font-weight: 400;
-    font-style: normal;
-  }
-  .my-font-class.bold {
-    font-weight: 700;
-  }
-  .my-font-class.italic {
-    font-style: italic;
-  }
-```
-
-The equivalent in a React Native stylesheet would be:
-
-```js
-const styles = StyleSheet.create({
-  myFont: {
-    fontFamily: 'MyFont400normal'
-  },
-  bold: {
-    fontFamily: 'MyFont700normal'
-  },
-  italic: {
-    fontFamily: 'MyFont400italic'
-  }
-})
-```
-
-In UDS Base components this mapping is handled for you, but if you are building your own React Native components you need to be aware of how fonts are defined in your application.
-The below section documents how to load fonts into your application depending on your target platforms and tooling.
-
-Using system fonts in React Native (for ios and android) is possible, but requires non-trivial consideration of font faces and weights.
-As such **system fonts are currently not supported in UDS**.
-
-## Font loading options
-
-Broadly speaking there are 3 variables to consider:
-
-1. **Defining fonts in CSS or JS** - If you are building cross-platform, you will need to import your fonts into your javascript code rather than define them with CSS.
-2. **Included in bundle or served from CDN** - Again if you are targeting cross-platform, you will need to bundle your font assets. If you are targeting web-only then you can choose to either include fonts in your bundle, or reference resources on a CDN.
-3. **Split or whole families** - For the reasons above, UDS Base components expect font faces to be defined split into individual declarations, _e.g._ `MyFont700normal`. If you're using UDS Base components in your application, or a library which depends on UDS Base, you'll need to make sure these font faces are defined. You can also define fonts as families, where you have a single font name (_e.g._ MyFont) for multiple weights and styles. This is a more typical approach for web projects.
-
-Note that in each case you will be using either a web build or a React Native build of the brand palette. Each build offers several options for importing fonts.
-
-### React Native Build
-
-#### With Expo
-
-In expo applications you can use `expo-fonts`:
-
-```js
-/* in app.js */
-import { useFonts } from 'expo-font'
-import AppLoading from 'expo-app-loading' // recommended to handle loading state
-import * as fonts from '@telus-uds/<my-palette-name>/build/rn/fonts'
-
-export default () => {
-  ...
-  const [fontsLoaded, fontsError] = useFonts(fonts)
-  return fontsLoaded ? <App /> : <AppLoading />
-}
-```
-
-#### In a web application (e.g. storybook)
-
-```js
-import '@telus-uds/<my-palette-name>/build/rn/fonts/fonts.css'
-```
-
-**Note:** this assumes you have an appropriate loader set up to handle css imports (this is true for create-react-app by default).
-
-With either of these setups, fonts are only available in the React Native format for font families (_e.g._ `MyFont700normal`)
-
-### Web build
-
-The web build of the brand palette offers 4 different built css files for defining fonts. Include the appropriate file(s) into your build tooling the same way you would any other third party css file.
-
-1. `@telus-uds/<my-palette-name>/build/web/fonts/fonts-local.css` - defines split font faces with local font file imports. Great for use with UDS Base if you want to bundle your fonts into your app.
-2. `@telus-uds/<my-palette-name>/build/web/fonts/fonts-cdn.css` - Exactly the same definitions as fonts-local, but references resources on a CDN.
-3. `@telus-uds/<my-palette-name>/build/web/fonts/fonts-local-family.css` - Includes the same fonts as above, but defined in web-friendly font families, also uses local font file imports.
-4. `@telus-uds/<my-palette-name>/build/web/fonts/fonts-cdn-family.css` - The font family declarations as above, but referencing CDN resources.
-
-**Note** you may well wish to include both the split and the family declarations in your app (for example you're using UDS Base components and you have some of your own web components which use the font weights within a font family model). This is fine and won't increase your bundle size or the number of network requests (for local or CDN respectively) because both sets of declarations point at exactly the same resources. However you **should not mix CDN and local CSS**. If you do you'll end up with the fonts in your bundle, and being requested from the CDN.