@edvisor/product-language 0.1.0

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

@@ -0,0 +1,72 @@
+// 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.stories.tsx

@@ -0,0 +1,16 @@
+import { StoryComponent, talesOf } from '@stories'
+import { Badge } from './badge'
+
+const Story: StoryComponent = () => {
+  return (
+    <>
+      <Badge neutral>Neutral</Badge>
+      <Badge info>Informational</Badge>
+      <Badge warning>Warning</Badge>
+      <Badge success>Success</Badge>
+      <Badge critical>Critical</Badge>
+    </>
+  )
+}
+
+talesOf(__filename, module, Story)

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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,31 @@
+import styled from 'styled-components'
+import { Padding } from '@foundations'
+import { BadgeTypeProps, getColor } from './badge-type-flags'
+import { FC, PropsWithChildren } from '@helpers'
+import { Label2 } from 'components/typography'
+
+const BadgeFrame = styled.div<{color: string}>`
+  background: ${props => props.color};
+  display: flex;
+  flex-direction: row;
+  align-items:center;
+  gap: 8px;
+  padding: ${Padding.xxxs} ${Padding.s};
+  border-radius:100px;
+  width: fit-content;
+`
+
+type IBadgeProps = BadgeTypeProps & PropsWithChildren
+
+const Base: FC<IBadgeProps> = (props) => {
+  const color = getColor(props)
+
+
+ return (
+    <BadgeFrame color={color}>
+      <Label2>{props.children}</Label2>
+    </BadgeFrame>
+  )
+}
+
+export const Badge = Base

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

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

package/src/lib/components/card/atoms/card-frame.tsx

@@ -0,0 +1,17 @@
+
+import styled from 'styled-components'
+import { Surface, Margin } from '@foundations'
+
+/** this is the frame that is used to implement the Card component 
+ * importantly it does not have any padding, which means it can be
+ * used to implement a broader range of components than just the card.
+ * 
+ * We might use it to implement the AlertBanner, or put a table in it.
+*/
+export const CardFrame = styled.section`
+  background: ${Surface.Default.Default};
+  max-width: 1024px;
+
+  border-radius: 6px;
+  margin-bottom: ${Margin.m};
+`

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

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

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

@@ -0,0 +1,163 @@
+import { Margin } from '@foundations'
+import { fireEvent, render, screen } from '@testing-library/react'
+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', () => {
+      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>
+      )
+
+      fireEvent.click(screen.getByText('Click Me'), {
+        target: { value: 'JavaScript' },
+      })
+  
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+  })
+})

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

@@ -0,0 +1,78 @@
+import styled from 'styled-components'
+import { isDefined, isEmpty, getSlots, getChildren, 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 = getChildren(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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,51 @@
+import { HTMLAttributes } from 'react'
+import styled from 'styled-components'
+import { isDefined, Slot, getChildren, 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 = getChildren(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

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

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

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

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

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

package/src/lib/components/card/molecules/left-right-card.test.tsx

@@ -0,0 +1,89 @@
+import { Margin } from '@foundations'
+import { render, screen } from '@testing-library/react'
+import styled from 'styled-components'
+import { LeftRightCard } from './left-right-card'
+
+describe('LeftRightCard', () => {
+  it('renders the content in the Right slot', () => {
+    render(
+      <LeftRightCard>
+        <LeftRightCard.Right>Content</LeftRightCard.Right>
+      </LeftRightCard>
+    )
+
+    expect(screen.getByText('Content')).toBeInTheDocument()
+  })
+
+  it('does not render other children', () => {
+    render(
+      <LeftRightCard>
+        <div>Other Children</div>
+        <LeftRightCard.Right>Content</LeftRightCard.Right>
+      </LeftRightCard>
+    )
+
+    expect(screen.queryByText('Other Children')).not.toBeInTheDocument()
+  })
+
+  it('renders a region labelled by the given heading', () => {
+    render(
+      <LeftRightCard heading='Heading'>
+        <LeftRightCard.Right>Content</LeftRightCard.Right>
+      </LeftRightCard>
+    )
+
+    expect(screen.getByRole('region')).toBeInTheDocument()
+    expect(screen.getByLabelText('Heading')).toBeInTheDocument()
+    expect(screen.getByLabelText('Heading')).toHaveTextContent('Content')
+  })
+
+  it('renders no region without a heading', () => {
+    render(
+      <LeftRightCard>
+        <LeftRightCard.Right>Content</LeftRightCard.Right>
+      </LeftRightCard>
+    )
+
+    expect(screen.queryByRole('region')).not.toBeInTheDocument()
+    expect(screen.queryByLabelText('Heading')).not.toBeInTheDocument()
+    expect(screen.getByText('Content')).toBeInTheDocument()
+  })
+
+  it('describes the children by the given help text', () => {
+    render(
+      <LeftRightCard helpText='Helpful Text'>
+        <LeftRightCard.Right>Content</LeftRightCard.Right>
+      </LeftRightCard>
+    )
+
+    expect(screen.getByText('Helpful Text')).toBeInTheDocument()
+    expect(screen.getByText('Content')).toHaveAccessibleDescription('Helpful Text')
+  })
+
+  it('still renders without the helpful text, but it is not as helpful', () => {
+    render(
+      <LeftRightCard>
+        <LeftRightCard.Right>Content</LeftRightCard.Right>
+      </LeftRightCard>
+    )
+
+    expect(screen.queryByText('Helpful Text')).not.toBeInTheDocument()
+    expect(screen.getByText('Content')).not.toHaveAccessibleDescription('Helpful Text')
+  })
+
+  /** 
+   * 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 Component = styled(LeftRightCard)`
+      margin-bottom: ${Margin.l};
+    `
+
+    const { container } = render(<Component>Contents</Component>)
+
+    expect(container.firstChild).toHaveStyle(`margin-bottom: ${Margin.l}`)
+  })
+})

package/src/lib/components/card/molecules/left-right-card.tsx

@@ -0,0 +1,63 @@
+import { FC, getSlot, If, isDefined, Slot, toKebabCase } from '@helpers'
+import { leftRightLayoutGenerator } from 'components/layout'
+import { Card, ICardProps } from '../card'
+
+const { Layout } = leftRightLayoutGenerator()
+
+class Right extends Slot {}
+class Controls extends Slot {}
+
+type SubComponents = {
+  Right: typeof Right
+  Controls: typeof Controls
+}
+
+interface ILeftRightCardProps extends ICardProps {
+  helpText?: string
+  className?: string
+}
+
+export const LeftRightCard: FC<ILeftRightCardProps, SubComponents> = (
+  props
+) => {
+  const right = getSlot(Right, props.children)
+  const controls = getSlot(Controls, props.children)
+
+  const headingId = isDefined(props.heading)
+    ? toKebabCase(props.heading)
+    : undefined
+
+  const helpTextId = isDefined(props.helpText)
+    ? toKebabCase(props.helpText)
+    : undefined
+
+  return (
+    <Card className={props.className}>
+      <Card.Section aria-labelledby={headingId}>
+        <Layout>
+          <Layout.Left>
+            <If is={props.heading}>
+              <Layout.HeadingText id={headingId}>
+                {props.heading}
+              </Layout.HeadingText>
+            </If>
+            <If is={props.helpText}>
+              <Layout.HelpText id={helpTextId}>
+                {props.helpText}
+              </Layout.HelpText>
+            </If>
+          </Layout.Left>
+          <Layout.Right>
+            <div aria-describedby={helpTextId}>{right}</div>
+          </Layout.Right>
+        </Layout>
+      </Card.Section>
+      <Card.Controls>
+        {controls}
+      </Card.Controls>
+    </Card>
+  )
+}
+
+LeftRightCard.Right = Right
+LeftRightCard.Controls = Controls