@telus-uds/theme-koodo 0.0.2-prerelease.0 → 0.1.0-prerelease.0

package/src/components/PaginationPageButton.js

@@ -1,81 +0,0 @@
-import palette from '@telus-uds/palette-koodo'
-import {
-  buttonAppearances,
-  getPaginationPageButtonSchema,
-  lineOptions,
-  validateComponentTheme
-} from '@telus-uds/tools-theme'
-
-const { focus, hover, pressed } = buttonAppearances
-
-const PaginationPageButton = {
-  appearances: {
-    focus,
-    hover,
-    pressed
-  },
-  tokens: {
-    borderColor: palette.color.transparent,
-    borderWidth: palette.border.border1,
-    borderRadius: palette.radius.pill32,
-    backgroundColor: palette.color.transparent,
-    paddingLeft: palette.size.size8,
-    paddingRight: palette.size.size8,
-    paddingTop: palette.size.size4,
-    paddingBottom: palette.size.size4,
-    width: palette.size.size32,
-
-    // never visible - used only to increase the click area size
-    outerBorderColor: palette.color.transparent,
-    outerBorderWidth: palette.border.border4,
-    outerBorderGap: palette.border.border4,
-
-    color: palette.color.dove,
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '400',
-    fontSize: palette.fontSize.size16,
-    lineHeight: palette.lineHeight.multiply150,
-    textLine: lineOptions.underline
-  },
-  rules: [
-    {
-      if: { hover: true },
-      tokens: {
-        borderColor: palette.color.dove,
-        textLine: lineOptions.none
-      }
-    },
-    {
-      if: { focus: true },
-      tokens: {
-        borderColor: palette.color.dove,
-        borderWidth: palette.border.border2
-      }
-    },
-    {
-      if: { selected: true },
-      tokens: {
-        backgroundColor: palette.color.dove,
-        color: palette.color.white,
-        textLine: lineOptions.none
-      }
-    },
-    {
-      if: { pressed: true },
-      tokens: {
-        backgroundColor: palette.color.dove,
-        color: palette.color.white
-      }
-    }
-  ]
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(
-  PaginationPageButton,
-  getPaginationPageButtonSchema(palette),
-  'pagination-page-button'
-)
-
-export default PaginationPageButton

package/src/components/PaginationSideButton.js

@@ -1,119 +0,0 @@
-import palette from '@telus-uds/palette-koodo'
-import {
-  buttonAppearances,
-  getPaginationSideButtonSchema,
-  lineOptions,
-  paginationSideButtonAppearances,
-  validateComponentTheme
-} from '@telus-uds/tools-theme'
-
-import leftArrowIcon from '@telus-uds/palette-koodo/build/rn/icons/chevron-left.icon.svg'
-import rightArrowIcon from '@telus-uds/palette-koodo/build/rn/icons/chevron-right.icon.svg'
-import { appearances } from '@telus-uds/system-constants'
-
-const { focus, hover, pressed } = buttonAppearances
-
-const PaginationSideButton = {
-  appearances: {
-    viewport: appearances.viewport,
-    focus,
-    hover,
-    pressed,
-    ...paginationSideButtonAppearances
-  },
-  tokens: {
-    borderColor: palette.color.transparent,
-    borderWidth: palette.border.border1,
-    borderRadius: palette.radius.radius4,
-    backgroundColor: palette.color.transparent,
-    paddingLeft: palette.size.size8,
-    paddingRight: palette.size.size8,
-    paddingTop: palette.size.size10,
-    paddingBottom: palette.size.size10,
-
-    color: palette.color.dove,
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '400',
-    fontSize: palette.fontSize.size16,
-    lineHeight: palette.lineHeight.multiply150,
-    textLine: lineOptions.underline,
-
-    icon: null,
-    iconSize: palette.fontSize.size14,
-    iconTranslateX: 0
-  },
-  rules: [
-    {
-      if: { viewport: ['xs', 'sm'] },
-      tokens: {
-        borderRadius: palette.radius.pill32,
-        paddingTop: palette.size.size4,
-        paddingBottom: palette.size.size4,
-        width: 32
-      }
-    },
-    {
-      if: { hover: true },
-      tokens: {
-        borderColor: palette.color.dove,
-        textLine: lineOptions.none
-      }
-    },
-    {
-      if: { focus: true },
-      tokens: {
-        borderColor: palette.color.dove,
-        borderWidth: palette.border.border3
-      }
-    },
-    {
-      if: { selected: true },
-      tokens: {
-        backgroundColor: palette.color.dove,
-        color: palette.color.white,
-        textLine: lineOptions.none
-      }
-    },
-    {
-      if: { pressed: true },
-      tokens: {
-        backgroundColor: palette.color.dove,
-        color: palette.color.white
-      }
-    },
-    {
-      if: { direction: 'previous' },
-      tokens: {
-        icon: leftArrowIcon
-      }
-    },
-    {
-      if: { direction: 'next' },
-      tokens: {
-        icon: rightArrowIcon
-      }
-    },
-    {
-      if: { direction: 'previous', hover: true },
-      tokens: {
-        iconTranslateX: -1 * palette.size.size4
-      }
-    },
-    {
-      if: { direction: 'next', hover: true },
-      tokens: {
-        iconTranslateX: palette.size.size4
-      }
-    }
-  ]
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(
-  PaginationSideButton,
-  getPaginationSideButtonSchema(palette),
-  'pagination-side-button'
-)
-
-export default PaginationSideButton

package/src/components/SideNav.js

@@ -1,18 +0,0 @@
-import palette from '@telus-uds/palette-koodo'
-import { getSideNavSchema, validateComponentTheme } from '@telus-uds/tools-theme'
-
-const SideNav = {
-  appearances: {},
-  tokens: {
-    borderColor: palette.color.silver,
-    borderWidth: palette.border.border1,
-    borderStyle: 'solid'
-  },
-  rules: []
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(SideNav, getSideNavSchema(palette), 'side-nav')
-
-export default SideNav

package/src/components/SideNavItem.js

@@ -1,115 +0,0 @@
-import palette from '@telus-uds/palette-koodo'
-import {
-  getSideNavItemSchema,
-  sideNavItemAppearances,
-  linkAppearances,
-  validateComponentTheme
-} from '@telus-uds/tools-theme'
-
-const SideNavItem = {
-  appearances: {
-    ...sideNavItemAppearances,
-    hover: linkAppearances.hover
-  },
-  tokens: {
-    borderColor: palette.color.silver,
-    borderWidth: palette.border.border1,
-    borderStyle: 'solid',
-    paddingLeft: palette.size.size16,
-    paddingRight: palette.size.size16,
-    paddingTop: palette.size.size16,
-    paddingBottom: palette.size.size16,
-    justifyContent: 'space-between',
-    color: palette.color.dove,
-    accentOffset: 0,
-    accentPadding: 0,
-    accentWidth: palette.size.size4,
-    accentBackgroundColor: palette.color.transparent
-  },
-  rules: [
-    {
-      if: {
-        active: true
-      },
-      tokens: {
-        paddingLeft: palette.size.size10,
-        backgroundColor: palette.color.mintTulip,
-        accentBackgroundColor: palette.color.mosque,
-        color: palette.color.mosque
-      }
-    },
-    {
-      if: {
-        type: 'child'
-      },
-      tokens: {
-        paddingLeft: palette.size.size36,
-        borderWidth: 0,
-        accentBackgroundColor: palette.color.mintTulip,
-        accentOffset: palette.size.size16
-      }
-    },
-    {
-      if: {
-        type: 'parent',
-        active: true
-      },
-      tokens: {
-        paddingLeft: palette.size.size10
-      }
-    },
-    {
-      if: {
-        type: 'parent',
-        active: true,
-        expanded: true
-      },
-      tokens: {
-        paddingLeft: palette.size.size16,
-        backgroundColor: palette.color.transparent,
-        accentBackgroundColor: palette.color.transparent,
-        color: palette.color.dove
-      }
-    },
-    {
-      if: {
-        hover: true
-      },
-      tokens: {
-        backgroundColor: palette.color.mintTulip,
-        color: palette.color.mosque
-      }
-    },
-    {
-      if: {
-        type: 'child',
-        active: true
-      },
-      tokens: {
-        backgroundColor: palette.color.mintTulip,
-        color: palette.color.mosque,
-        accentPadding: palette.size.size16,
-        accentBackgroundColor: palette.color.mosque
-      }
-    },
-    {
-      if: {
-        type: 'child',
-        active: false,
-        hover: true
-      },
-      tokens: {
-        accentBackgroundColor: palette.color.white,
-        color: palette.color.dove,
-        accentOffset: 0,
-        accentWidth: palette.size.size16
-      }
-    }
-  ]
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(SideNavItem, getSideNavItemSchema(palette), 'side-nav-item')
-
-export default SideNavItem

package/src/components/SideNavItemsGroup.js

@@ -1,31 +0,0 @@
-import palette from '@telus-uds/palette-koodo'
-import { getSideNavItemsGroupSchema, validateComponentTheme } from '@telus-uds/tools-theme'
-
-const SideNavItemsGroup = {
-  appearances: {},
-  tokens: {
-    // animate slightly faster when closing
-    expandDuration: 300,
-    collapseDuration: 250,
-    iconGap: palette.size.size8,
-    iconSize: palette.size.size10,
-    contentPaddingLeft: palette.size.size0,
-    contentPaddingRight: palette.size.size0,
-    contentPaddingTop: palette.size.size0,
-    contentPaddingBottom: palette.size.size0,
-    iconPosition: 'right',
-    verticalAlign: 'middle',
-    justifyContent: 'space-between'
-  },
-  rules: []
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(
-  SideNavItemsGroup,
-  getSideNavItemsGroupSchema(palette),
-  'side-nav-items-group'
-)
-
-export default SideNavItemsGroup

package/src/components/TextInput.js

@@ -1,85 +0,0 @@
-import palette from '@telus-uds/palette-koodo'
-import {
-  getTextInputSchema,
-  textInputAppearances,
-  validateComponentTheme
-} from '@telus-uds/tools-theme'
-import errorIcon from '@telus-uds/palette-koodo/build/rn/icons/times.icon.svg'
-import successIcon from '@telus-uds/palette-koodo/build/rn/icons/check-circled-filled.icon.svg'
-
-const TextInput = {
-  appearances: {
-    ...textInputAppearances
-  },
-  tokens: {
-    backgroundColor: palette.color.white,
-    color: palette.color.dove,
-    borderWidth: palette.border.border1,
-    borderColor: palette.color.silver,
-    borderRadius: palette.radius.radius4,
-    paddingTop: palette.size.size10,
-    paddingBottom: palette.size.size10,
-    paddingLeft: palette.size.size16,
-    paddingRight: palette.size.size16,
-
-    outerBackgroundColor: palette.color.transparent,
-    outerBorderWidth: palette.border.border2,
-    outerBorderColor: palette.color.transparent,
-    outerBorderRadius: palette.radius.radius4,
-
-    fontName: Object.keys(palette.font)[0],
-    fontSize: palette.fontSize.size16,
-    fontWeight: '400',
-    lineHeight: palette.lineHeight.ratio3to2,
-
-    icon: null,
-    iconSize: palette.fontSize.size24,
-    iconColor: palette.color.transparent
-  },
-  rules: [
-    {
-      if: { hover: true, inactive: null },
-      tokens: {
-        outerBorderColor: palette.color.gallery,
-        outerBackgroundColor: palette.color.gallery
-      }
-    },
-    {
-      if: { validation: 'success' },
-      tokens: {
-        borderColor: palette.color.bilbao,
-        icon: successIcon,
-        iconColor: palette.color.bilbao
-      }
-    },
-    {
-      if: { validation: 'error' },
-      tokens: {
-        borderColor: palette.color.trinidad,
-        icon: errorIcon,
-        iconColor: palette.color.trinidad
-      }
-    },
-    {
-      if: { focus: true, inactive: null },
-      tokens: {
-        borderColor: palette.color.mosque,
-        borderWidth: palette.border.border2,
-        icon: null
-      }
-    },
-    {
-      if: { inactive: true },
-      tokens: {
-        backgroundColor: palette.color.gallery,
-        borderColor: palette.color.gallery
-      }
-    }
-  ]
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(TextInput, getTextInputSchema(palette), 'text-input')
-
-export default TextInput

package/src/components/ToggleSwitch.js

@@ -1,111 +0,0 @@
-import palette from '@telus-uds/palette-koodo'
-import {
-  toggleSwitchAppearances,
-  getToggleSwitchSchema,
-  validateComponentTheme
-} from '@telus-uds/tools-theme'
-
-// There are no designs for this AFAIK, these are just some Koodo-ish placeholder styles
-
-const ToggleSwitch = {
-  appearances: {
-    focus: toggleSwitchAppearances.focus,
-    hover: toggleSwitchAppearances.hover,
-    pressed: toggleSwitchAppearances.pressed,
-    inactive: toggleSwitchAppearances.inactive,
-    selected: toggleSwitchAppearances.selected
-  },
-  tokens: {
-    borderColor: palette.color.transparent,
-    borderWidth: palette.border.none,
-    borderRadius: palette.radius.radius4,
-    outerBorderColor: palette.color.transparent,
-    outerBorderWidth: palette.border.none,
-    outerBorderGap: palette.size.size0,
-    outerBorderRadius: palette.radius.pill32,
-    outerBackgroundColor: palette.color.transparent,
-    backgroundColor: palette.color.mosque,
-    opacity: 1,
-    paddingLeft: palette.size.size8,
-    paddingRight: palette.size.size8,
-    paddingTop: palette.size.size4,
-    paddingBottom: palette.size.size4,
-    shadow: null,
-
-    icon: null,
-    width: palette.size.size64,
-    trackBorderWidth: palette.border.none,
-    trackBorderColor: palette.color.transparent,
-    trackBorderRadius: palette.radius.none,
-    iconSize: palette.size.size16,
-    iconColor: palette.color.transparent,
-    switchSize: palette.size.size24,
-    switchColor: palette.color.white,
-    switchBorderColor: palette.color.transparent,
-    switchBorderWidth: palette.border.none,
-    switchBorderRadius: palette.radius.pill32,
-    switchShadow: null
-  },
-  rules: [
-    {
-      if: { hover: true },
-      tokens: {
-        backgroundColor: palette.color.darkMosque
-      }
-    },
-    {
-      if: { pressed: true },
-      tokens: {
-        backgroundColor: palette.color.onahau
-      }
-    },
-    {
-      if: { focus: true },
-      tokens: {
-        outerBorderColor: palette.color.mosque
-      }
-    },
-    {
-      if: { selected: true },
-      tokens: {
-        backgroundColor: palette.color.blue
-      }
-    },
-    {
-      if: { selected: true, hover: true },
-      tokens: {
-        backgroundColor: palette.color.darkBlue
-      }
-    },
-    {
-      if: { selected: true, pressed: true },
-      tokens: {
-        backgroundColor: palette.color.onahau
-      }
-    },
-    {
-      if: { selected: true, focus: true },
-      tokens: {
-        outerBorderColor: palette.color.blue
-      }
-    },
-    {
-      if: { selected: true, focus: true, pressed: true },
-      tokens: {
-        outerBorderColor: palette.color.onahau
-      }
-    },
-    {
-      if: { inactive: true },
-      tokens: {
-        opacity: 0.5
-      }
-    }
-  ]
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(ToggleSwitch, getToggleSwitchSchema(palette), 'ToggleSwitch')
-
-export default ToggleSwitch