@loadsmart/loadsmart-ui 7.6.0 → 7.7.0-beta.1

package/src/components/Link/Link.test.tsx

@@ -1,79 +0,0 @@
-import React from 'react'
-import { screen } from '@testing-library/react'
-import renderer from '../../tests/renderer'
-import Link from './Link'
-import generator from '../../tests/generator'
-
-describe('<Link />', () => {
-  describe('default', () => {
-    const setup = ({ ...overrides }) => renderer(<Link {...overrides} />).render()
-
-    const props = {
-      href: generator.url(),
-      title: generator.sentence(),
-      children: generator.word(),
-      target: generator.pick(['_self', '_blank', '_parent', '_top']) as string,
-    }
-
-    setup(props)
-
-    const component = screen.getByTestId('link')
-
-    it('renders correctly', () => {
-      expect(component).toBeTruthy()
-      expect(component).toHaveAttribute('href', props.href)
-      expect(component).toHaveAttribute('title', props.title)
-      expect(component).toHaveAttribute('target', props.target)
-      // eslint-disable-next-line testing-library/no-node-access
-      expect(component).toHaveTextContent(props.children)
-    })
-
-    it('renders "/" as href if none is provided', () => {
-      const props = {
-        title: generator.sentence(),
-      }
-
-      setup(props)
-
-      const component = screen.getByTitle(props.title)
-      expect(component).toBeInTheDocument()
-      expect(component).toHaveAttribute('href', '/')
-    })
-
-    it(`renders "_self" as target if none is provided`, () => {
-      const props = {
-        title: generator.sentence(),
-      }
-
-      setup(props)
-
-      const component = screen.getByTitle(props.title)
-
-      expect(component).toBeInTheDocument()
-      expect(component).toHaveAttribute('target', '_self')
-    })
-  })
-
-  describe('with sanitized props', () => {
-    const setup = ({ ...overrides }) => renderer(<Link {...overrides} />).render()
-
-    const props = {
-      // eslint-disable-next-line no-script-url
-      href: 'javascript:copySecureData()',
-      title: generator.sentence(),
-      children: generator.word(),
-      target: '_blank',
-    }
-
-    setup(props)
-    const component = screen.getByTitle(props.title)
-
-    it('removes the insecure href prop, replacing with /', () => {
-      expect(component).toHaveAttribute('href', '/')
-    })
-
-    it('adds "noopener" to anchor element rel attribute, due to the target "_blank"', () => {
-      expect((component.getAttribute('rel') || '').includes('noopener')).toBe(true)
-    })
-  })
-})

package/src/components/Link/Link.tsx

@@ -1,114 +0,0 @@
-import React, { forwardRef } from 'react'
-import type { AnchorHTMLAttributes, ForwardedRef } from 'react'
-import clsx from 'clsx'
-import styled, { css } from 'styled-components'
-
-import useSafeLink from './useSafeLink'
-import font from 'styles/font'
-import transition from 'styles/transition'
-import ellipsizable from 'styles/ellipsizable'
-import hoverable from 'styles/hoverable'
-import focusable from 'styles/focusable'
-import disableable from 'styles/disableable'
-import { getToken as token } from 'theming'
-
-export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  className?: string
-  disabled?: boolean
-}
-
-const StyledBaseAnchor = styled.a`
-  ${font({
-    height: 'link-font-height',
-    weight: 'link-font-weight',
-  })}
-  ${transition()}
-
-  ${ellipsizable()}
-
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  text-align: center;
-  font-size: ${token('link-font-size')};
-  color: ${token('color-neutral-darker')};
-  text-decoration: none;
-
-  min-height: 24px;
-
-  border-radius: ${token('border-radius-s')};
-
-  ${hoverable`
-    text-decoration: underline;
-    font-weight: ${token('link-font-weight--hover')};
-  `}
-
-  ${focusable`
-    box-shadow: ${token('link-box-shadow')};
-    outline: ${token('link-outline')};
-    outline-offset: ${token('link-outline-offset')};
-  `}
-
-  ${disableable``}
-
-  ${({ children }) =>
-    'string' == typeof children &&
-    // to prevent layout shift on hover, https://css-tricks.com/bold-on-hover-without-the-layout-shift/
-    css`
-      &::after {
-        height: 0;
-        overflow: hidden;
-
-        font-weight: ${token('link-font-weight--hover')};
-
-        visibility: hidden;
-
-        content: attr(data-text);
-        content: attr(data-text) / '';
-        user-select: none;
-        pointer-events: none;
-
-        @media speech {
-          display: none;
-        }
-      }
-    `}
-`
-
-export const BaseLink = forwardRef(function BaseLink(
-  { disabled = false, ...props }: LinkProps,
-  forwardedRef: ForwardedRef<HTMLAnchorElement>
-): JSX.Element {
-  const { href = '/', children, className, target = '_self', ...others } = useSafeLink(props)
-
-  return (
-    <StyledBaseAnchor
-      className={clsx(
-        {
-          'is-disabled': disabled,
-        },
-        className
-      )}
-      href={href}
-      target={target}
-      {...others}
-      ref={forwardedRef}
-      data-text={'string' == typeof children ? children : ''}
-      data-testid="link"
-    >
-      {children}
-    </StyledBaseAnchor>
-  )
-})
-
-const StyledAnchor = styled(BaseLink)<LinkProps>`
-  color: ${token('link-color')};
-`
-
-function Link(props: LinkProps): JSX.Element {
-  return <StyledAnchor {...props} />
-}
-
-export default Link

package/src/components/Link/index.ts

@@ -1,3 +0,0 @@
-export { default as Link, BaseLink } from './Link'
-export { default as useSafeLink } from './useSafeLink'
-export type { LinkProps } from './Link'

package/src/components/Link/useSafeLink.ts

@@ -1,49 +0,0 @@
-import type { AnchorHTMLAttributes } from 'react'
-import { isBlank } from '@loadsmart/utils-string'
-
-const INSECURE_HREF = /^javascript:/i
-
-function checkHref(props: AnchorHTMLAttributes<HTMLAnchorElement>) {
-  const { href, ...others } = props
-
-  if (isBlank(href || '')) {
-    return props
-  }
-
-  if (INSECURE_HREF.test(`${href || ''}`)) {
-    // security risk, thus, removing it
-    return others
-  }
-
-  return props
-}
-
-function checkTarget({ target, rel }: AnchorHTMLAttributes<HTMLAnchorElement>) {
-  if (isBlank(target || '')) {
-    return { target, rel }
-  }
-
-  const sanitizedRel = new Set((rel || '').split(/\s+/).filter(Boolean))
-
-  if (target === '_blank') {
-    sanitizedRel.add('noopener')
-  }
-
-  /**
-   * To avoid exploitation of the window.opener API, Adding noreferrer,
-   * as recommended in https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
-   */
-  sanitizedRel.add('noreferrer')
-
-  return { rel: Array.from(sanitizedRel).join(' '), target }
-}
-
-function useSafeLink(
-  props: AnchorHTMLAttributes<HTMLAnchorElement>
-): AnchorHTMLAttributes<HTMLAnchorElement> {
-  const { rel, target } = checkTarget(props) || {}
-
-  return { ...checkHref(props), rel, target }
-}
-
-export default useSafeLink

package/src/components/Loaders/LoadingBar.stories.tsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import type { Story, Meta } from '@storybook/react'
-import { Text } from 'components/Text'
-
-import type { LoadingBarProps } from './LoadingBar'
-
-import LoadingBar from './LoadingBar'
-
-export default {
-  title: 'Components/Loaders/LoadingBar',
-  component: LoadingBar,
-  argTypes: {},
-} as Meta
-
-export const Playground: Story<LoadingBarProps> = (args) => {
-  return (
-    <div className="flex flex-col space-y-2">
-      <div className="flex items-center">
-        <LoadingBar {...args} />
-      </div>
-    </div>
-  )
-}
-
-Playground.args = {
-  title: (
-    <Text variant="heading-md-bold" color="color-neutral-dark">
-      Loading
-    </Text>
-  ),
-  secondaryTitle: (
-    <Text variant="body" color="color-neutral-dark">
-      Message here if necessary, othewise hide it
-    </Text>
-  ),
-}

package/src/components/Loaders/LoadingBar.test.tsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import { composeStories } from '@storybook/react'
-
-import * as stories from './LoadingBar.stories'
-import renderer, { screen } from '../../tests/renderer'
-
-import type { LoadingBarProps } from './LoadingBar'
-
-const { Playground } = composeStories(stories)
-
-const setup = (overrides: Partial<LoadingBarProps>) =>
-  renderer(<Playground {...overrides} />).render()
-
-describe('LoadingBar', () => {
-  it('renders correctly', () => {
-    const props = {}
-
-    setup(props)
-
-    screen.getByText('Loading')
-  })
-
-  it('renders customized title and subtitle correctly', () => {
-    const props = {
-      title: 'Loading',
-      subTitle: 'Message here if necessary, othewise hide it',
-      width: 400,
-    }
-
-    setup(props)
-
-    screen.getByText(props.title)
-    screen.getByText(props.subTitle)
-  })
-})

package/src/components/Loaders/LoadingBar.tsx

@@ -1,65 +0,0 @@
-import { Layout } from 'components/Layout'
-import React from 'react'
-import styled, { keyframes } from 'styled-components'
-import { getToken as token } from 'theming'
-
-const loading = keyframes`  
-    from {
-        width: 0
-    }
-    to {
-        width: 100%
-    } 
-`
-
-export const Bar = styled.div<{ width?: number; velocity?: number }>`
-  position: relative;
-
-  width: ${({ width }) => (width ? `${width}px` : '100%')};
-  height: ${token('space-s')};
-  overflow: hidden;
-
-  background-color: ${token('color-neutral-light')};
-  border-radius: ${token('border-radius-m')};
-
-  &:before {
-    position: absolute;
-
-    display: block;
-    width: 100%;
-    height: ${token('space-s')};
-
-    background-color: ${token('color-primary')};
-
-    animation: ${loading} ${({ velocity }) => (velocity && velocity > 0 ? velocity : 2.5)}s linear
-      infinite;
-
-    content: '';
-  }
-`
-
-export interface LoadingBarProps {
-  alignment?: 'left' | 'center' | 'right'
-  title?: React.ReactNode
-  secondaryTitle?: React.ReactNode
-  width?: number | undefined
-  velocity?: number | undefined
-}
-
-export default function LoadingBar({
-  alignment,
-  title,
-  secondaryTitle,
-  width = undefined,
-  velocity = 2.5,
-}: LoadingBarProps): JSX.Element {
-  return (
-    <Layout.Box textAlign={alignment}>
-      <Layout.Stack space="s">
-        {title}
-        <Bar width={width} velocity={velocity} />
-        {secondaryTitle}
-      </Layout.Stack>
-    </Layout.Box>
-  )
-}

package/src/components/Loaders/LoadingDots.stories.tsx

@@ -1,69 +0,0 @@
-import React from 'react'
-import type { Story, Meta } from '@storybook/react'
-import { Button } from 'components/Button'
-
-import LoadingDots, { LoadingDotsProps } from './LoadingDots'
-
-export default {
-  title: 'Components/Loaders/LoadingDots',
-  component: LoadingDots,
-  argTypes: {
-    size: {
-      control: {
-        type: 'number',
-      },
-    },
-    variant: {
-      control: {
-        type: 'select',
-        options: ['dark', 'light'],
-      },
-    },
-  },
-} as Meta
-
-export const Playground: Story<LoadingDotsProps> = (args: LoadingDotsProps) => {
-  return (
-    <div className="flex flex-col space-y-2">
-      <div className="flex items-center">
-        <LoadingDots {...args} />
-      </div>
-    </div>
-  )
-}
-
-Playground.args = {
-  size: 10,
-  variant: 'dark',
-}
-
-export const InsideButton: Story<LoadingDotsProps> = () => {
-  return (
-    <div className="flex flex-col space-y-2">
-      <div className="flex items-center">
-        <Button variant="primary">
-          <LoadingDots variant="light" />
-        </Button>
-      </div>
-      <div className="flex items-center">
-        <Button>
-          <LoadingDots />
-        </Button>
-      </div>
-    </div>
-  )
-}
-
-InsideButton.parameters = {
-  docs: {
-    description: {
-      story: `
-Follow these guidelines to ensure you have enough contrast with your background:
-
-- Dark background should use variant \`light\`;
-- Light background should use variant \`dark\`;
-- Green background should use variant \`dark\`.
-      `,
-    },
-  },
-}

package/src/components/Loaders/LoadingDots.test.tsx

@@ -1,22 +0,0 @@
-import React from 'react'
-import { composeStories } from '@storybook/react'
-
-import * as stories from './LoadingDots.stories'
-import renderer, { screen } from '../../tests/renderer'
-
-import type { LoadingDotsProps } from './LoadingDots'
-
-const { Playground } = composeStories(stories)
-
-const setup = (overrides: Partial<LoadingDotsProps>) =>
-  renderer(<Playground {...overrides} />).render()
-
-describe('LoadingDots', () => {
-  it('renders correctly', () => {
-    const props = {}
-
-    setup(props)
-
-    expect(screen.getByRole('progressbar', { name: 'Loading' })).toBeInTheDocument()
-  })
-})

package/src/components/Loaders/LoadingDots.tsx

@@ -1,68 +0,0 @@
-import React from 'react'
-import styled, { keyframes } from 'styled-components'
-import conditional, { whenProps } from 'tools/conditional'
-import prop from 'tools/prop'
-import { getToken as token } from 'theming'
-
-const pulse = keyframes`
-  50% {
-    opacity: 0.2;
-  }
-
-  100% {
-    opacity: 1;
-  }
-`
-
-const Wrapper = styled.div`
-  text-align: center;
-
-  div:nth-child(1) {
-    animation: ${pulse} 1s infinite ease-in-out -0.2s;
-  }
-
-  div:nth-child(2) {
-    animation: ${pulse} 1s infinite ease-in-out -0.1s;
-  }
-
-  div:nth-child(3) {
-    animation: ${pulse} 1s infinite ease-in-out 0s;
-  }
-`
-
-interface DotProps {
-  size?: number
-  variant?: 'light' | 'dark'
-}
-
-const Dot = styled.div<DotProps>`
-  display: inline-block;
-  width: ${prop('size')}px;
-  height: ${prop('size')}px;
-  margin: ${token('space-2xs')};
-
-  background-color: ${conditional({
-    'color-neutral-white': whenProps({ variant: 'light' }),
-    'color-neutral-dark': whenProps({ variant: 'dark' }),
-  })};
-  border-radius: ${token('border-radius-circle')};
-`
-
-export interface LoadingDotsProps {
-  size?: number
-  variant?: 'dark' | 'light'
-}
-
-export default function LoadingDots({
-  size = 10,
-  variant = 'dark',
-  ...props
-}: LoadingDotsProps): JSX.Element {
-  return (
-    <Wrapper role="progressbar" aria-label="Loading" {...props}>
-      <Dot size={size} variant={variant} />
-      <Dot size={size} variant={variant} />
-      <Dot size={size} variant={variant} />
-    </Wrapper>
-  )
-}

package/src/components/Loaders/Spinner.stories.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import type { Story, Meta } from '@storybook/react'
-
-import Spinner, { SpinnerProps } from './Spinner'
-
-export default {
-  title: 'Components/Loaders/Spinner',
-  component: Spinner,
-  argTypes: {},
-} as Meta
-
-export const Playground: Story<SpinnerProps> = (args: SpinnerProps) => {
-  return (
-    <div className="flex flex-col space-y-2">
-      <div className="flex items-center">
-        <Spinner {...args} />
-      </div>
-    </div>
-  )
-}
-
-Playground.args = {
-  size: 48,
-}

package/src/components/Loaders/Spinner.test.tsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import { composeStories } from '@storybook/react'
-
-import * as stories from './Spinner.stories'
-import generator from '../../tests/generator'
-import renderer, { screen } from '../../tests/renderer'
-
-import type { SpinnerProps } from './Spinner'
-
-const { Playground } = composeStories(stories)
-
-const setup = (overrides: Partial<SpinnerProps>) => renderer(<Playground {...overrides} />).render()
-
-describe('Spinner', () => {
-  it('renders correctly', () => {
-    const props = {
-      size: 48,
-    }
-
-    setup(props)
-
-    screen.getByText('Loading')
-  })
-
-  it('renders a custom title correctly', () => {
-    const props = {
-      size: 48,
-      title: generator.word(),
-    }
-
-    setup(props)
-
-    screen.getByText(props.title)
-  })
-})

package/src/components/Loaders/Spinner.tsx

@@ -1,68 +0,0 @@
-import React from 'react'
-import styled, { keyframes } from 'styled-components'
-
-const ANIMATION_DURATION = 0.8
-
-const animation = keyframes`
-  0% { opacity: 0 }
-  25% { opacity: 1 }
-  50% { opacity: 0.66 }
-  75% { opacity: 0.33; }
-  100% { opacity: 0 }
-`
-
-interface LayerProps {
-  index: number
-}
-
-const Layer = styled.path<LayerProps>`
-  animation-name: ${animation};
-  animation-duration: ${ANIMATION_DURATION}s;
-  animation-delay: -${(props) => props.index * (ANIMATION_DURATION / 4)}s;
-  animation-iteration-count: infinite;
-`
-
-export interface SpinnerProps {
-  title?: string
-  size: number
-}
-
-export default function Spinner({ title, size, ...props }: SpinnerProps): JSX.Element {
-  return (
-    <svg
-      {...props}
-      viewBox="0 0 48 48"
-      fillRule="evenodd"
-      strokeLinejoin="round"
-      strokeMiterlimit="2"
-      clipRule="evenodd"
-      width={size}
-      height={size}
-    >
-      <title>{title || 'Loading'}</title>
-      <g
-        id="surface1"
-        transform="matrix(0.0806777,0,0,0.0806777,0,-9.96047)"
-        fill="#33CC60"
-        fillRule="nonzero"
-      >
-        <Layer
-          index={0}
-          d="M362.176,638.695C366.445,638.695 370.535,637 373.527,633.996L505.332,502.211L224.305,502.211C222.074,502.211 220.066,501.316 218.617,499.855L84.488,633.996C87.395,636.902 91.406,638.695 95.82,638.695L362.176,638.695Z"
-        />
-        <Layer
-          index={1}
-          d="M376.164,482.289L512.648,482.289L512.648,217.34C512.648,212.906 510.855,208.898 507.945,205.988L373.809,340.121C375.266,341.578 376.164,343.59 376.164,345.805L376.164,482.289Z"
-        />
-        <Layer
-          index={2}
-          d="M500.48,201.746L235.535,201.746L235.535,338.23L372.02,338.23C374.234,338.23 376.246,339.129 377.703,340.586L511.832,206.445C508.926,203.539 504.918,201.746 500.48,201.746Z"
-        />
-        <Layer
-          index={3}
-          d="M215.449,495.488L215.449,214.461L83.668,346.262C80.66,349.289 78.965,353.359 78.965,357.625L78.965,623.973C78.965,628.398 80.758,632.406 83.668,635.313L217.805,501.176C216.348,499.715 215.449,497.707 215.449,495.488Z"
-        />
-      </g>
-    </svg>
-  )
-}

package/src/components/Loaders/index.tsx

@@ -1,3 +0,0 @@
-export { default as Spinner, SpinnerProps } from './Spinner'
-export { default as LoadingBar, LoadingBarProps } from './LoadingBar'
-export { default as LoadingDots, LoadingDotsProps } from './LoadingDots'