@telus-uds/components-community.sticky 1.1.19 → 1.1.20

package/__fixtures__/testTheme.js

@@ -1,335 +0,0 @@
-import { appearances } from '@telus-uds/system-theme-tokens'
-import systemThemeTokensPackage from '@telus-uds/system-theme-tokens/package.json'
-
-// This is a dev-only file so we don't need to make @telus-uds/palette-allium a dependency.
-
-export default {
-  metadata: {
-    name: 'test',
-    themeTokensVersion: systemThemeTokensPackage.version
-  },
-  components: {
-    spacingScale: {
-      tokens: {
-        size: 36
-      },
-      rules: [
-        { if: { space: 5 }, tokens: { size: 32 } },
-        { if: { space: 4 }, tokens: { size: 24 } },
-        { if: { space: 3 }, tokens: { size: 16 } },
-        { if: { space: 2 }, tokens: { size: 8 } },
-        { if: { space: 1 }, tokens: { size: 4 } },
-
-        { if: { compact: true }, tokens: { size: 12 } },
-        { if: { compact: true, space: 5 }, tokens: { size: 10 } },
-        { if: { compact: true, space: 4 }, tokens: { size: 8 } },
-        { if: { compact: true, space: 3 }, tokens: { size: 6 } },
-        { if: { compact: true, space: 2 }, tokens: { size: 4 } },
-        { if: { compact: true, space: 1 }, tokens: { size: 2 } },
-
-        { if: { responsive: true }, tokens: { size: 6 } },
-        { if: { responsive: true, space: 5 }, tokens: { size: 5 } },
-        { if: { responsive: true, space: 4 }, tokens: { size: 4 } },
-        { if: { responsive: true, space: 3 }, tokens: { size: 3 } },
-        { if: { responsive: true, space: 2 }, tokens: { size: 2 } },
-        { if: { responsive: true, space: 1 }, tokens: { size: 1 } },
-        { if: { responsive: true, viewport: ['sm', 'md'] }, tokens: { size: 8 } },
-        { if: { responsive: true, viewport: ['sm', 'md'], space: 5 }, tokens: { size: 7 } },
-        { if: { responsive: true, viewport: ['sm', 'md'], space: 4 }, tokens: { size: 6 } },
-        { if: { responsive: true, viewport: ['sm', 'md'], space: 3 }, tokens: { size: 5 } },
-        { if: { responsive: true, viewport: ['sm', 'md'], space: 2 }, tokens: { size: 4 } },
-        { if: { responsive: true, viewport: ['sm', 'md'], space: 1 }, tokens: { size: 3 } },
-        { if: { responsive: true, viewport: ['lg', 'xl'] }, tokens: { size: 12 } },
-        { if: { responsive: true, viewport: ['lg', 'xl'], space: 5 }, tokens: { size: 11 } },
-        { if: { responsive: true, viewport: ['lg', 'xl'], space: 4 }, tokens: { size: 10 } },
-        { if: { responsive: true, viewport: ['lg', 'xl'], space: 3 }, tokens: { size: 9 } },
-        { if: { responsive: true, viewport: ['lg', 'xl'], space: 2 }, tokens: { size: 8 } },
-        { if: { responsive: true, viewport: ['lg', 'xl'], space: 1 }, tokens: { size: 7 } },
-
-        { if: { space: 0 }, tokens: { size: 0 } }
-      ]
-    },
-    Box: {
-      tokens: {},
-      variants: {
-        lightest: {
-          backgroundColor: '#ffffff'
-        },
-        light: {
-          backgroundColor: '#f4f4f7'
-        },
-        dark: {
-          backgroundColor: '#414547'
-        },
-        darkest: {
-          backgroundColor: '#2c2e30'
-        },
-        critical: {
-          backgroundColor: '#c12335'
-        },
-        danger: {
-          backgroundColor: '#fff6f8'
-        },
-        warning: {
-          backgroundColor: '#000000'
-        },
-        positive: {
-          backgroundColor: '#f4f9f2'
-        },
-        brand: {
-          backgroundColor: '#4d80de'
-        }
-      },
-      defaultVariant: ['lightest']
-    },
-    Typography: {
-      appearances: {
-        weight: {
-          values: ['light', 'medium', 'bold'],
-          type: 'variant'
-        },
-        size: {
-          values: [
-            'micro',
-            'small',
-            'large',
-            'h1',
-            'h2',
-            'h3',
-            'h4',
-            'h5',
-            'h6',
-            'display1',
-            'display2'
-          ],
-          type: 'variant'
-        },
-        colour: {
-          values: ['secondary', 'tertiary'],
-          type: 'variant'
-        },
-        inverse: {
-          description: 'Styles the link white for use on dark backgrounds.',
-          values: [true],
-          type: 'variant'
-        },
-        viewport: appearances.system.viewport
-      },
-      tokens: {
-        fontWeight: '400',
-        fontSize: 16,
-        color: '#2c2e30',
-        lineHeight: 1.5,
-        fontScaleCap: 64
-      },
-      rules: [
-        {
-          if: { inverse: true },
-          tokens: {
-            color: '#ffffff'
-          }
-        },
-        {
-          if: { colour: 'primary' },
-          tokens: {
-            color: '#2c2e30'
-          }
-        },
-        {
-          if: { colour: 'secondary' },
-          tokens: {
-            color: '#414547'
-          }
-        },
-        {
-          if: { weight: 'light' },
-          tokens: {
-            fontWeight: '300'
-          }
-        },
-        {
-          if: { weight: 'medium' },
-          tokens: {
-            fontWeight: '500'
-          }
-        },
-        {
-          if: { weight: 'bold' },
-          tokens: {
-            fontWeight: '700'
-          }
-        },
-        {
-          if: { size: 'large' },
-          tokens: {
-            fontSize: 20,
-            lineHeight: 1.6
-          }
-        },
-        {
-          if: { size: 'small' },
-          tokens: {
-            fontSize: 14,
-            lineHeight: 1.4
-          }
-        },
-        {
-          if: { size: 'micro' },
-          tokens: {
-            fontSize: 12,
-            fontWeight: '500',
-            lineHeight: 1.3
-          }
-        },
-        {
-          if: { size: 'display1' },
-          tokens: {
-            fontSize: 40,
-            fontWeight: '300',
-            lineHeight: 1.2
-          }
-        },
-        {
-          if: { size: 'display1', colour: 'primary' },
-          tokens: {
-            color: '#4d80de'
-          }
-        },
-        {
-          if: { size: 'display1', colour: 'secondary' },
-          tokens: {
-            color: '#2c2e30'
-          }
-        },
-        {
-          if: { size: 'display1', viewport: ['lg', 'xl'] },
-          tokens: {
-            fontSize: 64,
-            lineHeight: 1.1
-          }
-        },
-        {
-          if: { size: 'display2' },
-          tokens: {
-            fontSize: 40,
-            fontWeight: '300',
-            color: '#4d80de',
-            lineHeight: 1.2
-          }
-        },
-        {
-          if: { size: 'display2', colour: 'secondary' },
-          tokens: {
-            color: '#2c2e30'
-          }
-        },
-        {
-          if: { size: 'display2', viewport: ['lg', 'xl'] },
-          tokens: {
-            fontSize: 56,
-            lineHeight: 1.1
-          }
-        },
-        {
-          if: { size: 'h1' },
-          tokens: {
-            fontSize: 28,
-            lineHeight: 1.2,
-            color: '#4d80de'
-          }
-        },
-        {
-          if: { size: 'h1', colour: 'secondary' },
-          tokens: {
-            color: '#2c2e30'
-          }
-        },
-        {
-          if: { size: 'h1', viewport: ['lg', 'xl'] },
-          tokens: {
-            fontSize: 40,
-            lineHeight: 1.1
-          }
-        },
-        {
-          if: { size: 'h2' },
-          tokens: {
-            fontSize: 24,
-            color: '#4d80de',
-            fontWeight: '500',
-            lineHeight: 1.3
-          }
-        },
-        {
-          if: { size: 'h2', colour: 'secondary' },
-          tokens: {
-            color: '#2c2e30'
-          }
-        },
-        {
-          if: { size: 'h2', viewport: ['lg', 'xl'] },
-          tokens: {
-            fontSize: 28
-          }
-        },
-        {
-          if: { size: 'h3' },
-          tokens: {
-            fontSize: 20,
-            fontWeight: '500',
-            lineHeight: 1.4,
-            color: '#4d80de'
-          }
-        },
-        {
-          if: { size: 'h3', colour: 'secondary' },
-          tokens: {
-            color: '#2c2e30'
-          }
-        },
-        {
-          if: { size: 'h3', viewport: ['lg', 'xl'] },
-          tokens: {
-            fontSize: 24,
-            lineHeight: 1.3
-          }
-        },
-        {
-          if: { size: 'h4' },
-          tokens: {
-            fontSize: 16,
-            weight: '500',
-            lineHeight: 1.5
-          }
-        },
-        {
-          if: { size: 'h5' },
-          tokens: {
-            fontSize: 14,
-            fontWeight: '500',
-            lineHeight: 1.3
-          }
-        },
-        {
-          if: { size: 'h6' },
-          tokens: {
-            fontSize: 12,
-            fontWeight: '700',
-            lineHeight: 1.3
-          }
-        },
-        {
-          if: { size: 'h6', colour: 'tertiary' },
-          tokens: {
-            color: '#000000'
-          }
-        }
-      ]
-    },
-    Sticky: {
-      appearances: {},
-      rules: [],
-      tokens: {}
-    }
-  }
-}

package/__tests__/Sticky.test.jsx

@@ -1,84 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import { Typography } from '@telus-uds/components-web'
-import Theme from '../__fixtures__/Theme'
-import { Sticky } from '../src'
-
-describe('Sticky', () => {
-  beforeEach(() => {
-    const mockIntersectionObserver = jest.fn()
-    mockIntersectionObserver.mockReturnValue({
-      observe: jest.fn(),
-      unobserve: jest.fn(),
-      disconnect: jest.fn()
-    })
-    window.IntersectionObserver = mockIntersectionObserver
-  })
-
-  it('is rendered with children', () => {
-    const { getByText, container } = render(
-      <Theme>
-        <Sticky>
-          <Typography>Sticky Content</Typography>
-        </Sticky>
-      </Theme>
-    )
-    const sentinelTop = container.querySelector('.sentinelTop')
-    const sentinelBottom = container.querySelector('.sentinelBottom')
-    const stickyElement = container.querySelector('.sticky-element')
-    const titleElement = getByText(/Sticky Content/i)
-    expect(sentinelTop).toBeInTheDocument()
-    expect(sentinelBottom).toBeInTheDocument()
-    expect(stickyElement).toBeInTheDocument()
-    expect(titleElement).toBeInTheDocument()
-  })
-
-  it("is rendered without checking for container's y position", () => {
-    const { getByText, container } = render(
-      <Theme>
-        <Sticky workWithViewport={false}>
-          <Typography>Sticky Content</Typography>
-        </Sticky>
-      </Theme>
-    )
-    const sentinelTop = container.querySelector('.sentinelTop')
-    const sentinelBottom = container.querySelector('.sentinelBottom')
-    const stickyElement = container.querySelector('.sticky-element')
-    const titleElement = getByText(/Sticky Content/i)
-    expect(sentinelTop).toBeInTheDocument()
-    expect(sentinelBottom).toBeInTheDocument()
-    expect(stickyElement).toBeInTheDocument()
-    expect(titleElement).toBeInTheDocument()
-  })
-
-  it('is rendered with children using alternate variant', () => {
-    const { getByText, container } = render(
-      <Theme>
-        <Sticky variant="alternate">
-          <Typography>Sticky Content</Typography>
-        </Sticky>
-      </Theme>
-    )
-    const titleElement = getByText(/Sticky Content/i)
-    const alternateSticky = container.querySelector('.alternate')
-    const stickyElement = container.querySelector('.sticky-element')
-    expect(titleElement).toBeInTheDocument()
-    expect(alternateSticky).toBeInTheDocument()
-    expect(stickyElement).toBeInTheDocument()
-  })
-
-  it('is rendered with children using hidden variant', () => {
-    const { getByText, container } = render(
-      <Theme>
-        <Sticky variant="hidden">
-          <Typography>Sticky Content</Typography>
-        </Sticky>
-      </Theme>
-    )
-    const titleElement = getByText(/Sticky Content/i)
-    const stickyElement = container.querySelector('.sticky-element')
-    expect(stickyElement).toBeInTheDocument()
-    expect(titleElement).toBeInTheDocument()
-    expect(stickyElement.parentNode).toHaveStyle('height: 0px')
-  })
-})

package/babel.config.js

@@ -1,4 +0,0 @@
-const baseConfig = require('../../../../babel.config.base')
-const name = require('./package.json').name.split('@telus-uds/').pop()
-
-module.exports = baseConfig({ name })

package/jest.config.js

@@ -1,20 +0,0 @@
-module.exports = () => ({
-  displayName: {
-    name: require('./package.json').name.split('@telus-uds/').pop(),
-    color: 'magenta'
-  },
-  testEnvironment: 'jsdom',
-  // __dirname here tells babel to look in ds-allium/ for babel root when running from monorepo root
-  transform: { '\\.(js|jsx)$': ['babel-jest', { cwd: __dirname }] },
-  moduleNameMapper: {
-    '.+\\.(otf|png|jpg)$': 'identity-obj-proxy',
-    // mock icon imports as in https://jestjs.io/docs/webpack#mocking-css-modules
-    '\\.icon.svg': '<rootDir>/__mocks__/iconMock.jsx',
-    '\\.css': '<rootDir>/__mocks__/styleMock.js',
-    '^styled-components':
-      '<rootDir>/../../node_modules/styled-components/dist/styled-components.browser.cjs.js'
-  },
-  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
-  // Count everything in src when calculating coverage
-  collectCoverageFrom: ['src/*.{js,jsx}']
-})

package/jest.setup.js

@@ -1,5 +0,0 @@
-import '@testing-library/jest-dom'
-import 'jest-styled-components'
-import { toHaveNoViolations } from 'jest-axe'
-
-expect.extend(toHaveNoViolations)

package/stories/Sticky.stories.jsx

@@ -1,222 +0,0 @@
-import React from 'react'
-import { Typography, FlexGrid, Box, StoryCard, Spacer, Card } from '@telus-uds/components-web'
-import { Sticky } from '../..'
-import pigPhoto from '../__fixtures__/images/pigs-allium-lo.png'
-import mountainPhoto from '../__fixtures__/images/mountains_desktop.jpg'
-
-export default {
-  title: 'Community/Sticky',
-  component: Sticky
-}
-
-export const Default = (args) => (
-  <FlexGrid gutter={false}>
-    <FlexGrid.Row horizontalAlign="center">
-      <FlexGrid.Col xs={12}>
-        <Box variant={{ background: 'light' }} space={4}>
-          <Typography variant={{ size: 'h3' }}>Lorem Ipsum</Typography>
-          <Spacer space={4} />
-          <Typography>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum dolor
-            ligula, ac placerat tortor ornare a. Praesent pellentesque accumsan nibh eu volutpat.
-          </Typography>
-          <Spacer space={2} />
-          <Typography>
-            Vestibulum blandit dui leo, non placerat nisi efficitur eget. Pellentesque habitant
-            morbi tristique senectus et netus et malesuada fames ac turpis egestas.
-          </Typography>
-        </Box>
-      </FlexGrid.Col>
-    </FlexGrid.Row>
-    <FlexGrid.Row horizontalAlign="center">
-      <FlexGrid.Col md={4}>
-        <StoryCard
-          href="https://telus.com"
-          tag="Lorem Ipsum"
-          date="Oct 28, 2023"
-          title="Lorem Ipsum"
-          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-          fullBleedContent={{
-            alt: 'Pig photo',
-            src: pigPhoto
-          }}
-        />
-      </FlexGrid.Col>
-      <FlexGrid.Col md={4}>
-        <StoryCard
-          href="https://telus.com"
-          tag="Lorem Ipsum"
-          date="Oct 28, 2023"
-          title="Lorem Ipsum"
-          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-          fullBleedContent={{
-            alt: 'Pig photo',
-            src: pigPhoto
-          }}
-        />
-      </FlexGrid.Col>
-      <FlexGrid.Col md={4}>
-        <StoryCard
-          href="https://telus.com"
-          tag="Lorem Ipsum"
-          date="Oct 28, 2023"
-          title="Lorem Ipsum"
-          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-          fullBleedContent={{
-            alt: 'Pig photo',
-            src: pigPhoto
-          }}
-        />
-      </FlexGrid.Col>
-    </FlexGrid.Row>
-    <Sticky {...args}>
-      <FlexGrid gutter={false}>
-        <FlexGrid.Row horizontalAlign="center">
-          <FlexGrid.Col>
-            <Box variant={{ background: 'featurePrimary' }} space={2}>
-              <Typography block variant={{ size: 'h1', inverse: true }}>
-                Sticky Content
-              </Typography>
-              <Spacer space={4} />
-              <Typography align="center" variant={{ inverse: true }}>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, diam quis
-                aliquam Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-              </Typography>
-            </Box>
-          </FlexGrid.Col>
-        </FlexGrid.Row>
-      </FlexGrid>
-    </Sticky>
-    <FlexGrid.Row horizontalAlign="center">
-      <FlexGrid.Col md={12}>
-        <Card
-          footer={
-            <Typography>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum dolor
-              ligula, ac placerat tortor ornare a. Praesent pellentesque accumsan nibh eu volutpat.
-            </Typography>
-          }
-        >
-          <Typography block variant={{ size: 'h2' }}>
-            Lorem Ipsum
-          </Typography>
-          <Box top={4}>
-            <Typography>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Typography>
-          </Box>
-        </Card>
-      </FlexGrid.Col>
-    </FlexGrid.Row>
-    <FlexGrid.Row horizontalAlign="center">
-      <FlexGrid.Col xs={12}>
-        <Box variant={{ background: 'light' }} space={4}>
-          <Typography variant={{ size: 'h3' }}>Lorem Ipsum</Typography>
-          <Spacer space={4} />
-          <Typography>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum dolor
-            ligula, ac placerat tortor ornare a. Praesent pellentesque accumsan nibh eu volutpat.
-          </Typography>
-          <Spacer space={2} />
-          <Typography>
-            Vestibulum blandit dui leo, non placerat nisi efficitur eget. Pellentesque habitant
-            morbi tristique senectus et netus et malesuada fames ac turpis egestas.
-          </Typography>
-        </Box>
-      </FlexGrid.Col>
-    </FlexGrid.Row>
-    <FlexGrid.Row horizontalAlign="center">
-      <FlexGrid.Col md={4}>
-        <StoryCard
-          href="https://telus.com"
-          tag="Lorem Ipsum"
-          date="Oct 28, 2023"
-          title="Lorem Ipsum"
-          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-          fullBleedContent={{
-            alt: 'Mountain photo',
-            src: mountainPhoto
-          }}
-        />
-      </FlexGrid.Col>
-      <FlexGrid.Col md={4}>
-        <StoryCard
-          href="https://telus.com"
-          tag="Lorem Ipsum"
-          date="Oct 28, 2023"
-          title="Lorem Ipsum"
-          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-          fullBleedContent={{
-            alt: 'Mountain photo',
-            src: mountainPhoto
-          }}
-        />
-      </FlexGrid.Col>
-      <FlexGrid.Col md={4}>
-        <StoryCard
-          href="https://telus.com"
-          tag="Lorem Ipsum"
-          date="Oct 28, 2023"
-          title="Lorem Ipsum"
-          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-          fullBleedContent={{
-            alt: 'Mountain photo',
-            src: mountainPhoto
-          }}
-        />
-      </FlexGrid.Col>
-    </FlexGrid.Row>
-    <FlexGrid.Row horizontalAlign="center">
-      <FlexGrid.Col xs={12}>
-        <Box variant={{ background: 'light' }} space={4}>
-          <Typography variant={{ size: 'h3' }}>Lorem Ipsum</Typography>
-          <Spacer space={4} />
-          <Typography>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum dolor
-            ligula, ac placerat tortor ornare a. Praesent pellentesque accumsan nibh eu volutpat.
-          </Typography>
-          <Spacer space={2} />
-          <Typography>
-            Vestibulum blandit dui leo, non placerat nisi efficitur eget. Pellentesque habitant
-            morbi tristique senectus et netus et malesuada fames ac turpis egestas.
-          </Typography>
-        </Box>
-      </FlexGrid.Col>
-    </FlexGrid.Row>
-    <FlexGrid.Row horizontalAlign="center">
-      <FlexGrid.Col xs={12}>
-        <Box variant={{ background: 'light' }} space={4}>
-          <Typography variant={{ size: 'h3' }}>Lorem Ipsum</Typography>
-          <Spacer space={4} />
-          <Typography>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum dolor
-            ligula, ac placerat tortor ornare a. Praesent pellentesque accumsan nibh eu volutpat.
-          </Typography>
-          <Spacer space={2} />
-          <Typography>
-            Vestibulum blandit dui leo, non placerat nisi efficitur eget. Pellentesque habitant
-            morbi tristique senectus et netus et malesuada fames ac turpis egestas.
-          </Typography>
-        </Box>
-      </FlexGrid.Col>
-    </FlexGrid.Row>
-    <FlexGrid.Row horizontalAlign="center">
-      <FlexGrid.Col xs={12}>
-        <Box variant={{ background: 'light' }} space={4}>
-          <Typography variant={{ size: 'h3' }}>Lorem Ipsum</Typography>
-          <Spacer space={4} />
-          <Typography>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum dolor
-            ligula, ac placerat tortor ornare a. Praesent pellentesque accumsan nibh eu volutpat.
-          </Typography>
-          <Spacer space={2} />
-          <Typography>
-            Vestibulum blandit dui leo, non placerat nisi efficitur eget. Pellentesque habitant
-            morbi tristique senectus et netus et malesuada fames ac turpis egestas.
-          </Typography>
-        </Box>
-      </FlexGrid.Col>
-    </FlexGrid.Row>
-  </FlexGrid>
-)
-
-Default.storyName = 'Sticky'
-Default.args = { variant: 'default', checkYPostion: true }