npm - @edvisor/product-language - Versions diffs - 0.10.2 → 0.10.4 - Mend

@edvisor/product-language 0.10.2 → 0.10.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (411) hide show

package/src/lib/components/alert-banner/storybook/components.tsx DELETED Viewed

@@ -1,124 +0,0 @@
-import { AlertBanner } from '../alert-banner'
-import { Button, Body, Heading3 } from '@components'
-import { Margin } from '@foundations'
-import styled from 'styled-components'
-import { CardPlayground } from '@stories'
-const ToggleButton = styled(Button)`
-  margin-bottom: ${Margin.s};
-`
-const AlertBannerHeading = styled(Heading3)`
-  margin-bottom: ${Margin.xs};
-`
-export const SimpleAlertBanner = () => (
-  <CardPlayground
-    code={`
-const [isOpen, setIsOpen] = useState(true);
-<>
-  <AlertBanner>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  </AlertBanner>
-</>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        AlertBanner,
-      },
-    }}
-  />
-)
-export const TypeVariantAlertBanner = () => (
-  <CardPlayground
-    code={`
-const [isOpen, setIsOpen] = useState(true);
-<>
-  <AlertBanner warning>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  </AlertBanner>
-</>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        AlertBanner,
-      },
-    }}
-  />
-)
-export const DismissibleAlertBanner = () => (
-  <CardPlayground
-    code={`
-const [isOpen, setIsOpen] = useState(true);
-<>
-  <ToggleButton onClick={() => setIsOpen(!isOpen)}>{isOpen ? 'Close' : 'Open'}  the alert banner!</ToggleButton>
-  <AlertBanner
-    info
-    dismissible={true}
-    open={isOpen}
-    onClose={() => setIsOpen(false)}
-  >
-    <AlertBannerHeading>Info</AlertBannerHeading>
-    <Body>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-      Arcu mollis viverra duis in scelerisque condimentum aenean sit
-      turpis. Donec dictum bibendum non tristique placerat aliquet massa, odi.
-    </Body>
-  </AlertBanner>
-</>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        AlertBannerHeading,
-        AlertBanner,
-        Body,
-        ToggleButton
-      },
-    }}
-  />
-)
-export const ActionsAlertBanner = () => (
-  <CardPlayground
-    code={`
-const [isOpen, setIsOpen] = useState(true);
-<>
-  <AlertBanner
-    success
-    primaryButtonLabel="Take the blue pill"
-    secondaryButtonLabel="Take the red pill"
-    onPrimaryAction={() => alert("Nice choice")}
-    onSecondaryAction={() => alert("Wrong choice")}
-  >
-    <AlertBannerHeading>Success</AlertBannerHeading>
-    <Body>
-    Bacon ipsum dolor amet tongue turducken frankfurter biltong meatloaf
-    andouille bresaola jowl. Ham pastrami tongue capicola kielbasa prosciutto short ribs flank beef.
-    Pastrami shank venison tri-tip, bresaola landjaeger chicken capicola swine kielbasa.
-    </Body>
-  </AlertBanner>
-</>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        AlertBannerHeading,
-        AlertBanner,
-        Body,
-        ToggleButton
-      },
-    }}
-  />
-)

package/src/lib/components/badge/badge-type-flags.ts DELETED Viewed

@@ -1,72 +0,0 @@
-// this file was generated, but it is safe to modify
-import { Hex, PropsWithChildren } from '@helpers'
-import { Surface } from '@foundations'
-const enum BadgeType {
-  neutral = 1,
-  info = 2,
-  success = 4,
-  warning = 8,
-  critical = 16,
-}
-export type RequireOnlyOne<T, Keys extends keyof T = keyof T> = Pick<
-T,
-Exclude<keyof T, Keys>
-> &
-{
-  [K in Keys]-?: Required<Pick<T, K>> &
-    Partial<Record<Exclude<Keys, K>, undefined>>;
-}[Keys];
-export type MappedEnum<E, T> = {
-  [key in keyof E]: T;
-}
-type BadgeTypes<T> = MappedEnum<typeof BadgeType, T>
-function toBadgeType(n: number): BadgeType {
-  switch (n) {
-    case BadgeType.neutral:
-      return BadgeType.neutral
-    case BadgeType.info:
-      return BadgeType.info
-    case BadgeType.success:
-      return BadgeType.success
-    case BadgeType.warning:
-      return BadgeType.warning
-    case BadgeType.critical:
-      return BadgeType.critical
-    default:
-      return BadgeType.neutral
-  }
-}
-const BadgeTypeColors = {
-  [BadgeType.neutral]: Surface.Neutral.Default,
-  [BadgeType.info]: Surface.Highlight.Default,
-  [BadgeType.success]: Surface.Success.Default,
-  [BadgeType.warning]: Surface.Warning.Default,
-  [BadgeType.critical]: Surface.Critical.Default,
-}
-export type BadgeTypeProps = Partial<RequireOnlyOne<BadgeTypes<boolean>>> &
-  PropsWithChildren
-function bitwiseOr(flags: unknown[]): number {
-  return flags.reduce((mask: number, flag, i) => mask | (Number(flag) << i), 0)
-}
-export function getColor(props: BadgeTypeProps): Hex {
-  return BadgeTypeColors[
-    toBadgeType(
-      bitwiseOr([
-        props.neutral,
-        props.info,
-        props.success,
-        props.warning,
-        props.critical,
-      ])
-    )
-  ]
-}

package/src/lib/components/badge/badge.test.tsx DELETED Viewed

@@ -1,29 +0,0 @@
-import { render } from '@testing-library/react'
-import { Badge } from './badge'
-describe('Badge', () => {
-  it('should render Neutral Badge successfully', () => {
-    const { baseElement } = render(<Badge neutral>Neutral</Badge>)
-    expect(baseElement).toBeTruthy()
-  })
-  it('should render Informational Badge successfully', () => {
-    const { baseElement } = render(<Badge info>Informational</Badge>)
-    expect(baseElement).toBeTruthy()
-  })
-  it('should render Warning Badge successfully', () => {
-    const { baseElement } = render(<Badge warning>Warning</Badge>)
-    expect(baseElement).toBeTruthy()
-  })
-  it('should render Success Badge successfully', () => {
-    const { baseElement } = render(<Badge success>Success</Badge>)
-    expect(baseElement).toBeTruthy()
-  })
-  it('should render Critical Badge successfully', () => {
-    const { baseElement } = render(<Badge critical>Critical</Badge>)
-    expect(baseElement).toBeTruthy()
-  })
-})

package/src/lib/components/badge/badge.tsx DELETED Viewed

@@ -1,22 +0,0 @@
-import styled from 'styled-components'
-import { Padding } from '@foundations'
-import { BadgeTypeProps, getColor } from './badge-type-flags'
-import { FC, PropsWithChildren } from '@helpers'
-import { Label } from 'components/typography'
-const BadgeFrame = styled(Label)<{color: string}>`
-  background: ${props => props.color};
-  display: flex;
-  align-items:center;
-  padding: ${Padding.xxxs} ${Padding.xs};
-  border-radius:10px;
-  height: fit-content;
-`
-type IBadgeProps = BadgeTypeProps & PropsWithChildren
-export const Badge: FC<IBadgeProps> = (props) => {
-  const color = getColor(props)
-  return <BadgeFrame color={color}>{props.children}</BadgeFrame>
-}

package/src/lib/components/badge/index.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export * from './badge'

package/src/lib/components/badge/stories/badge.stories.mdx DELETED Viewed

@@ -1,44 +0,0 @@
-import { Badge } from '../badge'
-import { Meta } from '@storybook/addon-docs'
-import { BadgeExample } from './components'
-<Meta
-  title="Components/Badge"
-  component={Badge}
-/>
-# Badge
-This is an atom.
-For more details, check out the component page on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=1008%3A1257)
-## How to use
-```tsx
-import { Badge } from '@edvisor/product-language'
-<Badge>Contents</Badge>
-```
-### Attitudes
-The badge can be rendered with various attitudes.
-<BadgeExample />
-## API
-| Name        | Type      | Description               |
-| ----------- | --------- | ------------------------- |
-| `neutral?`  | `boolean` | renders the neutral badge |
-| `info?`     | `boolean` | renders the info badge    |
-| `warning?`  | `boolean` | renders the info warning  |
-| `success?`  | `boolean` | renders the info success  |
-| `critical?` | `boolean` | renders the info critical |
-## Changelog
-### [0.0.0]
- - adopt the preferred storybook style
- - removed a containing div, adjusted styles to match figma

package/src/lib/components/badge/stories/components.tsx DELETED Viewed

@@ -1,49 +0,0 @@
-import { Margin } from '@foundations'
-import { Flex } from 'components/layout'
-import { Heading1 } from 'components/typography'
-import { Playground } from 'storybook-addon-jarle-monaco'
-import styled from 'styled-components'
-import { Badge } from '../badge'
-const Heading = styled(Heading1)`
-  margin-bottom: ${Margin.none};
-  margin-right: ${Margin.s};
-`
-const Header = styled(Flex)`
-  margin-bottom: ${Margin.l};
-  align-items: center;
-`
-export const BadgeExample = () => (
-  <Playground
-    code={`
-<>
-  <Header>
-    <Heading>Booking &#x23;1123</Heading>
-    <Badge warning>Pending</Badge>
-  </Header>
-  <Header>
-    <Heading>Booking &#x23;1124</Heading>
-    <Badge success>Accepted</Badge>
-  </Header>
-  <Header>
-    <Heading>Booking &#x23;1125</Heading>
-    <Badge info>Processing</Badge>
-  </Header>
-  <Header>
-    <Heading>Booking &#x23;1126</Heading>
-    <Badge critical>Declined</Badge>
-  </Header>
-</>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Badge,
-        Heading,
-        Header,
-      },
-    }}
-  />
-)

package/src/lib/components/card/atoms/index.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export * from './card-frame'

package/src/lib/components/card/card.test.tsx DELETED Viewed

@@ -1,162 +0,0 @@
-import { Margin } from '@foundations'
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import styled from 'styled-components'
-import { Card } from './card'
-describe('Card', () => {
-  it('renders with the heading', () => {
-    render(
-      <Card heading='Heading'>Contents</Card>
-    )
-    expect(screen.getByRole('heading')).toBeInTheDocument()
-    expect(screen.getByText('Heading')).toBeInTheDocument()
-    expect(screen.getByText('Contents')).toBeInTheDocument()
-  })
-  it('renders without the heading', () => {
-    render(
-      <Card>Contents</Card>
-    )
-    expect(screen.queryByRole('heading')).not.toBeInTheDocument()
-    expect(screen.getByText('Contents')).toBeInTheDocument()
-  })
-  /**
-   * this test just ensures that the programmer did not
-   * forget to add className? to the props and then pass
-   * it to the wrapping element so that users downstream
-   * can style the component
-   */
-  it('accepts styles', () => {
-    const NiceCard = styled(Card)`
-      margin-bottom: ${Margin.l};
-    `
-    const { container } = render(<NiceCard>Contents</NiceCard>)
-    expect(container.firstChild).toHaveStyle(`margin-bottom: ${Margin.l}`)
-    expect(screen.getByText('Contents')).toBeInTheDocument()
-  })
-  describe('slots', () => {
-    it('renders no regions if it has no headings', () => {
-      render(
-        <Card>Contents</Card>
-      )
-      expect(screen.queryByRole('region')).not.toBeInTheDocument()
-      expect(screen.getByText('Contents')).toBeInTheDocument()
-    })
-    it('renders one region if the card has a heading', () => {
-      render(
-        <Card heading='Heading'>Contents</Card>
-      )
-      expect(screen.getByRole('region')).toBeInTheDocument()
-      expect(screen.getAllByRole('region').length).toBe(1)
-      expect(screen.getByText('Contents')).toBeInTheDocument()
-    })
-    it('renders one region per heading', () => {
-      render(
-        <Card heading='Heading'>
-          <Card.Section heading='Subheading 1'>Section 1</Card.Section>
-          <Card.Section heading='Subheading 2'>Section 2</Card.Section>
-          <Card.Section>Section 3</Card.Section>
-          <Card.Section>Section 4</Card.Section>
-        </Card>
-      )
-      expect(screen.getAllByRole('region').length).toBe(3)
-    })
-    it('renders all the given sections', () => {
-      render(
-        <Card heading='Heading'>
-          <Card.Section heading='Subheading 1'>Section 1</Card.Section>
-          <Card.Section heading='Subheading 2'>Section 2</Card.Section>
-          <Card.Section>Section 3</Card.Section>
-          <Card.Section>Section 4</Card.Section>
-        </Card>
-      )
-      expect(screen.getByText('Section 1')).toBeInTheDocument()
-      expect(screen.getByText('Section 2')).toBeInTheDocument()
-      expect(screen.getByText('Section 3')).toBeInTheDocument()
-      expect(screen.getByText('Section 4')).toBeInTheDocument()
-    })
-    it('does not render plain children if you give it sections', () => {
-      render(
-        <Card>
-          <Card.Section>Section 1</Card.Section>
-          <div data-testid='plain-children'>PLAIN CHILDREN</div>
-        </Card>
-      )
-      expect(screen.getByText('Section 1')).toBeInTheDocument()
-      expect(screen.queryByTestId('plain-children')).not.toBeInTheDocument()
-    })
-    it('renders the heading actions if there is a heading', () => {
-      render(
-        <Card heading='Heading'>
-          <Card.Section>Section 1</Card.Section>
-          <Card.HeadingAction>
-            <button>Click Me</button>
-          </Card.HeadingAction>
-        </Card>
-      )
-      expect(screen.getByRole('button')).toBeInTheDocument()
-    })
-    it('does not render heading actions if there is no heading', () => {
-      render(
-        <Card>
-          <Card.Section>Section 1</Card.Section>
-          <Card.HeadingAction>
-            <button>Click Me</button>
-          </Card.HeadingAction>
-        </Card>
-      )
-      expect(screen.queryByRole('button')).not.toBeInTheDocument()
-    })
-    it('renders the controls when they are provided', () => {
-      render(
-        <Card heading='Heading'>
-          <Card.Section>Section 1</Card.Section>
-          <Card.Controls>
-            <button>Click Me</button>
-          </Card.Controls>
-        </Card>
-      )
-      expect(screen.getByRole('button')).toBeInTheDocument()
-    })
-    it('does not stop the user from clicking the controls', async () => {
-      const handleClick = jest.fn()
-      render(
-        <Card heading='Heading'>
-          <Card.Section>Section 1</Card.Section>
-          <Card.Controls>
-            <button onClick={handleClick}>Click Me</button>
-          </Card.Controls>
-        </Card>
-      )
-      await userEvent.click(screen.getByText('Click Me'))
-      expect(handleClick).toHaveBeenCalledTimes(1)
-    })
-  })
-})

package/src/lib/components/card/card.tsx DELETED Viewed

@@ -1,78 +0,0 @@
-import styled from 'styled-components'
-import { isDefined, isEmpty, getSlots, getOtherChildren, FC, PropsWithChildren, If, getSlot, toKebabCase } from '@helpers'
-import { Padding, Margin, shadow } from '@foundations'
-import { CardFrame as CardFrameBase } from './atoms'
-import { Heading3 } from 'components/typography'
-import { SpaceBetween } from 'components/layout'
-import { CardAlertBannerSlot, CardControlsSlot, CardHeadingActionSlot, CardSectionSlot } from './components'
-import { HTMLAttributes } from 'react'
-const CardHeading = styled(SpaceBetween)`
-  margin: ${Margin.none} ${Margin.l} ${Margin.none} ${Margin.l};
-  padding-top: ${Padding.l};
-`
-/** remove the margin bottom here since the frame handles it */
-const CardHeadingText = styled(Heading3)`
-  margin-bottom: ${Margin.none};
-`
-const CardFrame = styled(CardFrameBase)`
-  ${shadow};
-  > section:nth-of-type(1) {
-    border: none;
-  }
-`
-export interface ICardProps extends HTMLAttributes<HTMLDivElement>, PropsWithChildren {
-  heading?: string
-}
-const SubComponents = {
-  Section: CardSectionSlot,
-  Controls: CardControlsSlot,
-  HeadingAction: CardHeadingActionSlot,
-  AlertBanner: CardAlertBannerSlot,
-}
-export const Card: FC<ICardProps, typeof SubComponents> = (props) => {
-  const { children, heading, ...htmlProps } = props
-  const sections = getSlots(CardSectionSlot, children)
-  const controls = getSlot(CardControlsSlot, children)
-  const headingAction = getSlot(CardHeadingActionSlot, children)
-  const alertBanners = getSlots(CardAlertBannerSlot, children)
-  const otherChildren = getOtherChildren(children)
-  const headingId = isDefined(heading)
-    ? toKebabCase(heading)
-    : undefined
-  return (
-    <CardFrame
-      aria-labelledby={headingId}
-      {...htmlProps}
-    >
-      <If is={alertBanners}>{alertBanners}</If>
-      <If is={heading}>
-        <CardHeading>
-          <CardHeadingText id={headingId}>{heading}</CardHeadingText>
-          <If is={headingAction}>{headingAction}</If>
-        </CardHeading>
-      </If>
-      {isEmpty(sections) ? (
-        <CardSectionSlot>{otherChildren}</CardSectionSlot>
-      ) : (
-        sections
-      )}
-      <If is={controls}>{controls}</If>
-    </CardFrame>
-  )
-}
-/** export the slots and some sub-components */
-Card.Section = CardSectionSlot
-Card.Controls = CardControlsSlot
-Card.HeadingAction = CardHeadingActionSlot
-Card.AlertBanner = CardAlertBannerSlot

package/src/lib/components/card/components/card-alert-banner-slot.tsx DELETED Viewed

@@ -1,16 +0,0 @@
-import styled from 'styled-components'
-import { Slot } from '@helpers'
-import { Margin } from '@foundations'
-import { AlertBanner, AlertBannerProps } from 'components/alert-banner'
-const CardAlertBanner = styled(AlertBanner)`
-  margin: ${Margin.l} ${Margin.l} ${Margin.none} ${Margin.l};
-`
-export class CardAlertBannerSlot extends Slot<AlertBannerProps> {
-  override render () {
-    return (
-      <CardAlertBanner {...this.props}>{this.props.children}</CardAlertBanner>
-    )
-  }
-}

package/src/lib/components/card/components/card-controls-slot.tsx DELETED Viewed

@@ -1,19 +0,0 @@
-import styled from 'styled-components'
-import { Slot, PropsWithChildren } from '@helpers'
-import { Padding } from '@foundations'
-import { Flex } from 'components/layout'
-const ControlsFrame = styled(Flex)`
-  justify-content: end;
-  padding: ${Padding.none} ${Padding.l} ${Padding.l} ${Padding.l};
-`
-export class CardControlsSlot extends Slot<PropsWithChildren> {
-  override render () {
-    return (
-      <ControlsFrame>
-        {this.props.children}
-      </ControlsFrame>
-    )
-  }
-}

package/src/lib/components/card/components/card-section-slot.tsx DELETED Viewed

@@ -1,51 +0,0 @@
-import { HTMLAttributes } from 'react'
-import styled from 'styled-components'
-import { isDefined, Slot, getOtherChildren, PropsWithChildren, If, getSlot, toKebabCase } from '@helpers'
-import { Borders, Padding, Margin } from '@foundations'
-import { Heading4 } from 'components/typography'
-import { SpaceBetween } from 'components/layout'
-export class CardHeadingActionSlot extends Slot {}
-interface ICardSectionProps extends HTMLAttributes<HTMLDivElement>, PropsWithChildren {
-  heading?: string
-}
-const Subheading = styled(Heading4)`
-  margin: ${Margin.none};
-`
-const SectionFrame = styled.section`
-  border-top: 1px solid ${Borders.Default.Subdued};
-  padding: ${Padding.l};
-`
-const SubheadingFrame = styled(SpaceBetween)`
-  margin: ${Margin.none} ${Margin.none} ${Margin.m} ${Margin.none};
-`
-export class CardSectionSlot extends Slot<ICardSectionProps> {
-  override render () {
-    const headingAction = getSlot(CardHeadingActionSlot, this.props.children)
-    const children = getOtherChildren(this.props.children)
-    const headingId = isDefined(this.props.heading)
-      ? toKebabCase(this.props.heading)
-      : undefined
-    return (
-      <SectionFrame
-        aria-labelledby={headingId}
-        {...this.props}
-      >
-        <If is={this.props.heading}>
-          <SubheadingFrame>
-            <Subheading id={headingId}>{this.props.heading}</Subheading>
-            <If is={headingAction}>{headingAction}</If>
-          </SubheadingFrame>
-        </If>
-        {children}
-      </SectionFrame>
-    )
-  }
-}

package/src/lib/components/card/components/index.ts DELETED Viewed

@@ -1,3 +0,0 @@
-export * from './card-alert-banner-slot'
-export * from './card-controls-slot'
-export * from './card-section-slot'

package/src/lib/components/card/index.ts DELETED Viewed

@@ -1,3 +0,0 @@
-export * from './card'
-export * from './molecules/left-right-card'
-export * from './atoms'

package/src/lib/components/card/molecules/index.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export * from './left-right-card'