@edvisor/product-language 0.1.1 → 0.3.0

package/src/lib/components/alert-banner/alert-banner.tsx

@@ -0,0 +1,34 @@
+import styled from 'styled-components'
+import { FC, Hex, PropsWithChildren } from '@helpers'
+import { AlertLevelProps, getBackgroundColor, getBorderColor } from './alert-level-flags'
+import { Padding } from '@foundations'
+import { CardFrame } from 'components/card/atoms'
+
+interface IAlertBannerProps extends PropsWithChildren {
+  /** @TODO can we get some examples of alert banner in card from figma? */
+  inCard?: boolean
+  dismissible?: boolean
+  className?: string
+}
+
+export type AlertBannerProps = IAlertBannerProps & AlertLevelProps
+
+const InCardFrame = styled(CardFrame).attrs({ as: 'div' })<{ background: Hex, border: Hex }>`
+  display: inline-block;
+  padding: ${Padding.m};
+  width: fill-available;
+
+  background: ${({ background }) => background};
+  border: 1px solid ${({ border }) => border};
+`
+
+export const AlertBanner: FC<AlertBannerProps> = (props) => {
+  const background = getBackgroundColor(props)
+  const border = getBorderColor(props)
+
+  return (
+    <InCardFrame background={background} border={border} className={props.className}>
+      {props.children}
+    </InCardFrame>
+  )
+}

package/src/lib/components/alert-banner/alert-level-flags.ts

@@ -0,0 +1,77 @@
+// this file was generated, but it is safe to modify
+import { Borders, Surface } from '@foundations'
+import { bitwiseOr, Hex, MappedEnum, RequireOnlyOne, PropsWithChildren } from '@helpers'
+
+const enum AlertLevel {
+  neutral = 1,
+  info = 2,
+  success = 4,
+  warning = 8,
+  critical = 16,
+}
+
+type AlertLevels<T> = MappedEnum<typeof AlertLevel, T>
+
+function toAlertLevel(n: number): AlertLevel {
+  switch (n) {
+    case AlertLevel.neutral:
+      return AlertLevel.neutral
+    case AlertLevel.info:
+      return AlertLevel.info
+    case AlertLevel.success:
+      return AlertLevel.success
+    case AlertLevel.warning:
+      return AlertLevel.warning
+    case AlertLevel.critical:
+      return AlertLevel.critical
+    default:
+      return AlertLevel.neutral
+  }
+}
+
+export type AlertLevelProps = Partial<RequireOnlyOne<AlertLevels<boolean>>> &
+  PropsWithChildren
+
+const AlertLevelBackgroundColors = {
+  [AlertLevel.neutral]: Surface.Neutral.Subdued,
+  [AlertLevel.info]: Surface.Highlight.Subdued,
+  [AlertLevel.success]: Surface.Success.Subdued,
+  [AlertLevel.warning]: Surface.Warning.Subdued,
+  [AlertLevel.critical]: Surface.Critical.Subdued,
+}
+
+const AlertLevelBorderColors = {
+  [AlertLevel.neutral]: Borders.Default.Default,
+  [AlertLevel.info]: Borders.Highlight.Subdued,
+  [AlertLevel.success]: Borders.Success.Subdued,
+  [AlertLevel.warning]: Borders.Warning.Subdued,
+  [AlertLevel.critical]: Borders.Critical.Subdued,
+}
+
+export function getBackgroundColor(props: AlertLevelProps): Hex {
+  return AlertLevelBackgroundColors[
+    toAlertLevel(
+      bitwiseOr([
+        props.neutral,
+        props.info,
+        props.success,
+        props.warning,
+        props.critical,
+      ])
+    )
+  ]
+}
+
+export function getBorderColor(props: AlertLevelProps): Hex {
+  return AlertLevelBorderColors[
+    toAlertLevel(
+      bitwiseOr([
+        props.neutral,
+        props.info,
+        props.success,
+        props.warning,
+        props.critical,
+      ])
+    )
+  ]
+}

package/src/lib/components/alert-banner/index.ts

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

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.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,22 @@
+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

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

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

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

@@ -0,0 +1,49 @@
+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/{lib/components/card/atoms/card-frame.d.ts → src/lib/components/card/atoms/card-frame.tsx}

@@ -1,7 +1,17 @@
-/** 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 declare const CardFrame: import("styled-components").StyledComponent<"section", any, {}, never>;
+
+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,162 @@
+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

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

@@ -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>
+    )
+  }
+}