@telus-uds/components-base 0.0.2-prerelease.1 → 0.0.2-prerelease.10

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/Typography/Typography.stories.jsx

@@ -1,9 +1,11 @@
+/* eslint-disable react/no-multi-comp */
 import React from 'react'
 
-import { useVariants, Container } from '../supports'
-import { Typography as TypographyComponent } from '../../lib'
+import { useVariants, Container, EachParentType, parentTypesParams } from '../supports'
+import { Typography } from '../../lib'
 
-export const Typography = TypographyComponent
+export const Default = (args) => <Typography {...args} />
+Default.storyName = 'Typography'
 
 const defaultChildren = 'The quick brown fox jumps over the lazy dog'
 
@@ -38,3 +40,10 @@ LongTextTypographyVariants.args = {
     'and what the current screen size is of the window in which this component is being shown.'
   ]
 }
+
+export const ParentTypes = (args) => (
+  <EachParentType componentThemeName="Typography" {...args}>
+    {({ label, variant }) => <Typography {...args} variant={variant}>{`${label}. `}</Typography>}
+  </EachParentType>
+)
+ParentTypes.parameters = parentTypesParams

package/stories/{platform-supports.web.jsx → platform-supports.jsx}

@@ -14,7 +14,7 @@ InlineBlockDiv.propTypes = { children: PropTypes.node }
 
 const FloatDiv = ({ children }) => (
   <div>
-    <div style={{ float: 'right' }}>{children}</div>
+    <div style={{ float: 'right', maxWidth: '85%', marginLeft: '10px' }}>{children}</div>
     <Typography block>
       Some lengthy text in a paragraph with a block above it containing the components to test,
       where the block above it has the style "float: right" applied and no other styles, giving the

package/stories/supports.jsx

@@ -1,23 +1,131 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
 import PropTypes from 'prop-types'
-import { 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 FlexRow = ({ children }) => <View style={styles.row}>{children}</View>
-FlexRow.propTypes = { children: PropTypes.node }
+const iconSets = {
+  allium: alliumIcons,
+  koodo: koodoIcons,
+  publicMobile: pmIcons
+}
+
+const RowWrap = ({ children }) => <View style={styles.rowWrap}>{children}</View>
+RowWrap.propTypes = { children: PropTypes.node }
+
+const RowStretch = ({ children }) => (
+  <ScrollView horizontal contentContainerStyle={styles.rowStretch}>
+    {children}
+  </ScrollView>
+)
+RowStretch.propTypes = { children: PropTypes.node }
+
+const ColumnWrap = ({ children }) => (
+  <ScrollView
+    horizontal
+    style={styles.columnWrapContainer}
+    contentContainerStyle={styles.columnWrap}
+  >
+    {children}
+  </ScrollView>
+)
+ColumnWrap.propTypes = { children: PropTypes.node }
+
+const ColumnStretch = ({ children }) => (
+  <View containerStyle={styles.columnStretch}>{children}</View>
+)
+ColumnStretch.propTypes = { children: PropTypes.node }
 
-const FlexColumn = ({ children }) => <View style={styles.column}>{children}</View>
-FlexColumn.propTypes = { children: PropTypes.node }
+// TODO: find a way to give Base stories a complete empty SpacingObject for easy editting
+// while giving themed stories a simpler value.
+export const spacingObjectArg = { xs: 1, lg: 3 }
 
 export const parentTypes = {
-  FlexRow,
-  FlexColumn,
+  RowWrap,
+  RowStretch,
+  ColumnWrap,
+  ColumnStretch,
   ...platformContainers
 }
 
+/**
+ * React Native (and therefore also React Native Web) components are usually at some level based on
+ * `View` and have some default layout styles that are quite different to regular web defaults:
+ *
+ *  - `display: flex` instead of `display: block`
+ *  - `flexDirection: column` instead of `flexDirection: row` when flex
+ *  - `position: relative`
+ *
+ * It's easy to fall into the trap of developing and testing something that works fine in a regular
+ * `View` but doesn't work as expected in other common layout containers. This is particularly true
+ * for UDS where internally we are devleoping entirely within React Native but many real-world use cases
+ * will mix UDS components with regular web HTML elements.
+ *
+ * The `EachParentType` support component and related `parentTypes` tooling are intended to make it easy
+ * to routinely test and demonstrate how UDS components behave in a wide range of parent types.
+ *
+ * To use it, pass as `children` a render function that takes the following and places them appropriately
+ * in a demonstration of your component (be careful to not wrap the component in a `View` or container as
+ * that will defeat the point of the exercise!):
+ *
+ * - `variant` - each theme variant will be rendered as siblings, pass this to the component's `variant` prop.
+ * - `label` - this will describe the parent type / variant combination and ideally should be somewhere easy to read
+ *   inside the component to help users understand what they are looking at.
+ * - `index` - the index of the currently rendered component variant (`0` if the component has no variants).
+ */
+export const EachParentType = ({ children, componentThemeName, ...args }) => {
+  const variants = useVariants(componentThemeName)
+  return Object.entries(parentTypes).map(([parentLabel, ParentType]) => (
+    <Container key={parentLabel} offWhite>
+      <ParentType>
+        {variants.map(([key, value, variantLabel], index) => {
+          const label = variantLabel ? `${parentLabel}: ${variantLabel}` : parentLabel
+          const variant = { ...args.variant, [key]: value }
+          return typeof children === 'function' ? children({ label, variant, index }) : children
+        })}
+      </ParentType>
+    </Container>
+  ))
+}
+
+const parentTypesList = `\`"${Object.keys(parentTypes).join('"`, `"')}"\``
+
+export const parentTypesParams = {
+  docs: {
+    storyDescription: `This tests how this component's variants render in each of the following types of container: ${parentTypesList}.`
+  }
+}
+
+/**
+ * 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} />
@@ -32,17 +140,29 @@ export const Container = ({
   padding = 8,
   dark = false,
   offWhite = false,
+  borderWidth,
+  style,
   children
 }) => (
-  <View style={[{ margin, padding }, dark && styles.dark, offWhite && styles.offWhite]}>
+  <View
+    style={[
+      { margin, padding },
+      dark && styles.dark,
+      offWhite && styles.offWhite,
+      { borderWidth },
+      style
+    ]}
+  >
     {children}
   </View>
 )
 Container.propTypes = {
   margin: PropTypes.number,
   padding: PropTypes.number,
+  borderWidth: PropTypes.number,
   dark: PropTypes.bool,
   offWhite: PropTypes.bool,
+  style: PropTypes.object,
   children: PropTypes.node
 }
 
@@ -53,6 +173,8 @@ const getVariantLabel = (key, value) => `${key}${typeof value === 'string' ? `:
  */
 export const useVariants = (componentName) => {
   const theme = useTheme()
+  if (!componentName) return [['default', {}]]
+
   const { appearances } = getComponentTheme(theme, componentName)
 
   if (!appearances) {
@@ -62,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,
@@ -72,14 +194,26 @@ export const useVariants = (componentName) => {
 }
 
 const styles = StyleSheet.create({
-  row: {
+  rowWrap: {
     flexDirection: 'row',
-    alignItems: 'center',
-    flexWrap: 'wrap'
+    alignItems: 'flex-start',
+    flexWrap: 'wrap',
+    flex: 1
+  },
+  rowStretch: {
+    flexDirection: 'row',
+    flexGrow: 1
+  },
+  columnStretch: {
+    // alignItems: 'stretch' and flexDirection: 'column' are the default
   },
-  column: {
+  columnWrap: {
     flexDirection: 'column',
-    alignItems: 'center'
+    alignItems: 'flex-start',
+    flexWrap: 'wrap',
+    // Ensure the content columns wrap
+    ...Platform.select({ web: { maxHeight: 150 }, default: { height: 125, minWidth: '200%' } }),
+    flexGrow: 1
   },
   content: {
     maxWidth: 200,

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/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.

package/docs/Icons.stories.mdx

@@ -1,144 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks'
-
-<Meta title="Guides/Icons" />
-
-# Icons
-
-Icons are available through their respective brand palettes as raw SVG resources.
-In order to use icons as React components we are using [SVGR](https://react-svgr.com/) to transform the SVG resources into components.
-In order to use UDS icons in your application you will need to apply the SVGR transform in your build pipeline (_e.g._ webpack config), instructions on how to do this are included for common use cases below.
-
-Using a build-time transform enables us to keep the rendering and theming React logic for icons in the same place as for all other components, and enable outcome teams to include only the icons which they need in their bundle.
-
-## Configuring icon transforms
-
-SVGR supports [cosmiconfig](https://github.com/davidtheclark/cosmiconfig#readme). You can use any of the cosmiconfig methods for applying the SVGR configuration exposed at `@telus-uds/components-base/config/svgr-icons`.
-For example, you can create a `svgr.config.js` file at the root of your project, and add the following line to it:
-
-```js
-module.exports = require(@telus-uds/components-base/config/svgr-icons)
-```
-
-Once you have SVGR configuration in place, you will need to add a build step. Included below are example configurations for common use cases.
-If your use case isn't covered below, or you are having problems configuring icons for your application, get in touch with the core UDS team.
-
-The SVGR configuration is configured to transform SVGs into React Native components.
-To do this it relies on `react-native-svg`. You will need to include this as a production dependency in your project.
-We also offer a config preset for web-only builds to avoid this (see Webpack for web-only below). This is recommended for web projects to avoid the need to include an alias `react-native-svg`
-
-### Standalone
-
-SVGR can be applied as a standalone transform, via its own [well-documented CLI](https://react-svgr.com/docs/cli/).
-
-### Webpack
-
-For Webpack you will need to create a new Webpack loader rule to apply the SVGR using '@svgr/webpack' which you will need to include as a dev dependency in your project.
-
-```js
-/* in your webpack.config.js */
-// create a new loader rule leveraging @svgr/webpack
-const iconLoaderRule = {
-  test: /\.icon\.svg$/,
-  exclude: /node_modules/,
-  use: [
-    {
-      loader: '@svgr/webpack'
-    }
-  ]
-}
-
-// if you already have an svg loader rule, adjust it to avoid it matching icons
-const svgLoaderRule = config.module.rules.find((rule) => rule.test.test('.svg'))
-svgLoaderRule.exclude = iconLoaderRule.test
-
-// add your new rule
-config.module.rules.unshift(iconLoaderRule)
-```
-
-**Note**: if your Webpack config is using a `oneOf` rule to apply file loaders, you may need to tweak the above to target that `oneOf`:
-
-```js
-config.module.rules[1].oneOf.unshift(iconLoaderRule)
-```
-
-With a oneOf rule, you don't need to worry about adjusting existing SVG loaders, as long as you place your icon loader rule at the head of the list (_e.g._ via `unshift`).
-
-### Storybook
-
-Storybook uses Webpack under the hood, so the instructions are very similiar. You will again need to ensure that '@svgr/webpack' is included as a dev dependency.
-
-```js
-/* in your .storybook/main.js file */
-// create a new loader rule leveraging @svgr/webpack
-const iconLoaderRule = {
-  test: /\.icon\.svg$/,
-  exclude: /node_modules/,
-  use: [
-    {
-      loader: '@svgr/webpack'
-    }
-  ]
-}
-
-module.exports = {
-  ...
-  webpackFinal: async (config) => {
-    // tweak existing rule to avoid matching *.icon.svg
-    const fileLoaderRule = config.module.rules.find((rule) => rule.test.test('.svg'))
-    fileLoaderRule.exclude = iconLoaderRule.test
-
-    // Add icon loader rule
-    config.module.rules.push(iconLoaderRule)
-    return config
-  }
-}
-```
-
-### Metro (React Native)
-
-For the Metro bundler the terminology is slightly different and we're applying a _transformer_ rather than a loader.
-The example below uses the expo default metro config, but you can switch `getDefaultConfig` out for any metro config generator.
-For Metro you will need to ensure you have `react-native-svg-transformer` installed as a dev dependency.
-
-````js
-/* in your metro.config.js file */
-const { getDefaultConfig } = require("@expo/metro-config");
-
-module.exports = (async () => {
-  const {
-    resolver: { sourceExts, assetExts }
-  } = await getDefaultConfig(__dirname);
-  return {
-    transformer: {
-      // apply the SVGR transformer
-      babelTransformerPath: require.resolve("react-native-svg-transformer")
-    },
-    resolver: {
-      // ensure SVGs are *not* treated as assets...
-      assetExts: assetExts.filter(ext => ext !== "svg"),
-      // ...but instead as source files to be transformed
-      sourceExts: [...sourceExts, "svg"]
-    }
-  };
-})();
-
-
-### Webpack for web-only
-If you are only targeting the web platform, and want to avoid the dependency on `react-native-svg`, you can follow the Webpack instructions above, but replace the contents of your `svgr.config.js` file with:
-
-```js
-module.exports = require(@telus-uds/components-base/config/svgr-icons-web)
-````
-
-## Using icons
-
-If you are using a standalone build you can use the generated files as you would any other React component.
-Assuming you are using Metro or Webpack and have applied the correct configuration as above, you can simply use your icons as components with
-
-```js
-const MyIconComponent = require('path/to/my-icon.icon.svg')
-
-...
-
-return <MyIconComponent />
-```

package/docs/Introduction.stories.mdx

@@ -1,9 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks'
-
-<Meta title="Guides/Introduction" />
-
-# Welcome to the UDS workshop
-
-This is the storybook for developing and documenting Universal Design System (UDS) components.
-
-<!-- @TODO fill out -->