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

@edvisor/product-language 0.9.0 → 0.10.2

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 (407) hide show

package/src/lib/components/link/link.tsx ADDED Viewed

@@ -0,0 +1,56 @@
+import styled from 'styled-components'
+import { AnchorHTMLAttributes } from 'react'
+import { FC, is } from '@helpers'
+import { Interactive } from '@foundations'
+export const HTMLAnchor = styled.a<{disabled: boolean, initialColor: string, interactionColor: string}>`
+  color: ${({ initialColor }) => initialColor};
+  pointer-events: ${({ disabled }) => disabled ? 'none' : 'auto' };
+  &:hover{
+    text-decoration: none;
+    color: ${({ interactionColor }) => interactionColor};
+  }
+  &:active{
+    text-decoration: underline;
+  }
+`
+interface ILinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  label: string;
+  subtle?: boolean
+  disabled?: boolean
+}
+export const Link: FC<ILinkProps> = (props) => {
+  const { label, disabled = false, subtle, ...rest } = props
+  const initialColor = getInitialColor(props)
+  const interactionColor = getInteractionColor(props)
+  return (
+    <HTMLAnchor
+      {...rest}
+      disabled={disabled}
+      initialColor={initialColor}
+      interactionColor={interactionColor}
+    >
+      {label}
+    </HTMLAnchor>
+  )
+}
+function getInitialColor ({ subtle, disabled }: ILinkProps) {
+  if (is(disabled)) {
+    return Interactive.Default.Disabled
+  }
+  return is(subtle)
+    ? Interactive.Subtle.Default
+    : Interactive.Default.Default
+}
+function getInteractionColor ({ subtle }: ILinkProps) {
+  return is(subtle)
+    ? Interactive.Subtle.Hover
+    : Interactive.Default.Hover
+}

package/src/lib/components/link/storybook/link.stories.mdx ADDED Viewed

@@ -0,0 +1,52 @@
+import { Canvas, Meta } from '@storybook/addon-docs';
+import { Link } from '../link'
+import { Button } from '../../molecules/button'
+import { Body } from '../../typography'
+<Meta title="Components/Link" />
+# Link
+Links are navigational actions that take users to another place. They can appear within or directly following a sentence. Links should not to be mistaken with a Plain Button which are used for actions that aren’t related to navigation.
+## How to use it
+The Link component is an extension of HTML <b><a\></b> tag, but its use is limited to textual anchors.
+## Default
+The Link component with default behavior and styles
+<Canvas>
+<Body>
+  <Link href="https://app.edvisor.io/" target="_blank" label="Edvisor" /> is the number 1 student recruitment software
+</Body>
+</Canvas>
+## Subtle
+The Link component with subtle behavior and styles
+<Canvas>
+<Body>
+  Streamline the way you sell education with <Link subtle href="https://app.edvisor.io/" target="_blank" label="Edvisor" />, the best student recruitment software.
+</Body>
+</Canvas>
+## Disabled
+A disabled Link prevents user interaction.
+<Canvas>
+<Body>
+  Education with <Link subtle disabled href="https://app.edvisor.io/" target="_blank" label="Edvisor" /> is the best.
+</Body>
+</Canvas>
+## API
+Extends `HTMLAttributes<HTMLAnchorElement>`. Check the documentation <Link href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement" target="_blank" label="here"/>.
+| Prop        | Type      | Description               |
+| ----------- | --------- | --------------------------|
+| `label`     | `string`  | the text used as anchor   |
+| `default?`  | `boolean` | default styling           |
+| `subtle?`   | `boolean` | subtle styling            |
+| `disabled?` | `boolean` | prevents user interaciton |

package/src/lib/components/modal/index.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export * from './modal-base'
+export * from './modal'
+export * from './modal-destructive'

package/src/lib/components/modal/modal-base.tsx ADDED Viewed

@@ -0,0 +1,129 @@
+import { InputHTMLAttributes, useRef, MouseEvent } from 'react'
+import { Background, shadowXl, Surface } from '@foundations'
+import { FC, is, isNil, Nothing, safeCallback } from '@helpers'
+import styled, { keyframes } from 'styled-components'
+import { Flex } from 'components/layout'
+import { useKeyDown } from 'helpers/useKeyDown'
+const fadeIn = keyframes`
+  from { opacity: .4; }
+  to { opacity: 1; }
+`
+const grow = keyframes`
+  from { transform: scale(.8) }
+  to { transform: scale(1) }
+`
+const OverlayFrame = styled(Flex)`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 20000;
+  background-color: ${Background.Overlay};
+  justify-content: center;
+  animation: ${fadeIn} .2s ease-out;
+`
+const ModalFrame = styled(Flex)<{widthValue: string}>`
+  background-color: ${Surface.Default.Default};
+  z-index: 20010;
+  width: ${({widthValue}) => widthValue};
+  ${shadowXl};
+  border-radius: 8px;
+  animation: ${grow} .1s ease-in;
+`
+interface Sizes {
+  small: string,
+  critical: string,
+  default: string,
+  large: string,
+  xLarge: string,
+}
+export const MODAL_SIZE: Sizes = {
+  small: '456px',
+  critical: '518px',
+  default: '616px',
+  large: '776px',
+  xLarge: '936px',
+}
+export const MODAL_SIZE_TEXT = {
+  SMALL: 'small',
+  CRITICAL: 'critical',
+  DEFAULT: 'default',
+  LARGE: 'large',
+  XLARGE: 'xLarge'
+}
+export interface IModalBaseProps {
+  open: boolean
+  children: React.ReactElement
+  closeOnEsc?: boolean
+  modalSize?: keyof typeof MODAL_SIZE
+  onOverlayClick?: () => void
+  onClose: () => void
+}
+function getModalSize(size: string): string {
+  const isValidKey = Object.keys(MODAL_SIZE).includes(size)
+  const validSize = isValidKey ? size : MODAL_SIZE_TEXT.DEFAULT
+  return MODAL_SIZE[validSize as keyof Sizes]
+}
+export type IModalBase = InputHTMLAttributes<HTMLInputElement> & IModalBaseProps
+export const ModalBase: FC<IModalBase> = (props: IModalBase) => {
+  const {
+    open,
+    children,
+    closeOnEsc = true,
+    modalSize = MODAL_SIZE_TEXT.DEFAULT,
+    onOverlayClick,
+    onClose,
+  } = props
+  // eslint-disable-next-line no-null/no-null
+  const modalRef = useRef<HTMLDivElement>(null)
+  const handleEscPress = () => {
+    if(is(closeOnEsc)) {
+      onClose()
+    }
+  }
+  useKeyDown('Escape', handleEscPress)
+  if(!is(open)) {
+    document.body.style.overflow = 'unset'
+    return <Nothing />
+  } else {
+    document.body.style.overflow = 'hidden'
+  }
+  const handleOverlayClick = (event: MouseEvent) => {
+    if (isNil(modalRef.current) || modalRef.current.contains(event.target as HTMLElement)) {
+      return
+    }
+    safeCallback(onOverlayClick)
+  }
+  return (
+    <OverlayFrame center onClick={handleOverlayClick} data-testid="modal-overlay">
+      <div ref={modalRef}>
+        <ModalFrame
+          column
+          role="dialog"
+          widthValue={getModalSize(modalSize)}
+          aria-modal="true"
+        >
+          {children}
+        </ModalFrame>
+      </div>
+    </OverlayFrame>
+  )
+}

package/src/lib/components/modal/modal-destructive.tsx ADDED Viewed

@@ -0,0 +1,70 @@
+import { HTMLAttributes } from 'react'
+import { Gap, Padding } from '@foundations'
+import { FC, isDefined, Nothing } from '@helpers'
+import styled from 'styled-components'
+import { Button } from 'components/molecules/button'
+import { ModalBase, IModalBaseProps, MODAL_SIZE_TEXT, MODAL_SIZE } from './modal-base'
+const ModalContent = styled.div`
+  padding: ${Padding.xl} ${Padding.xl} ${Padding.none};
+`
+const ModalFooter = styled.footer`
+  width: 100%;
+  padding: ${Padding.m} ${Padding.xl} ${Padding.xl};
+  bottom: 0;
+  box-sizing: border-box;
+  display: flex;
+  gap: ${Gap.xs};
+  justify-content: flex-end;
+`
+const CustomButton = styled(Button)`
+  width: calc(50% - 4px);
+`
+export interface IModalDestructiveProps extends IModalBaseProps {
+  primaryButtonLabel?: string
+  closeButtonLabel: string
+  onPrimaryAction: () => void
+}
+type IModalDestructive = IModalDestructiveProps & HTMLAttributes<HTMLDivElement>
+export const ModalDestructive: FC<IModalDestructive> = (props: IModalDestructive) => {
+  const {
+    open,
+    closeOnEsc,
+    children,
+    primaryButtonLabel,
+    closeButtonLabel,
+    onPrimaryAction,
+    onClose,
+    onOverlayClick,
+  } = props
+  return (
+    <ModalBase
+      open={open}
+      onOverlayClick={onOverlayClick}
+      closeOnEsc={closeOnEsc}
+      modalSize={MODAL_SIZE_TEXT.CRITICAL as keyof typeof MODAL_SIZE}
+      onClose={onClose}
+    >
+      <>
+        <ModalContent>
+          {children}
+        </ModalContent>
+        <ModalFooter>
+          <CustomButton onClick={onClose}>{closeButtonLabel}</CustomButton>
+          { isDefined(primaryButtonLabel)
+            ? <CustomButton primary destructive onClick={onPrimaryAction}>{primaryButtonLabel}</CustomButton>
+            : <Nothing />
+          }
+          <Nothing />
+        </ModalFooter>
+      </>
+    </ModalBase>
+  )
+}

package/src/lib/components/modal/modal.test.tsx ADDED Viewed

@@ -0,0 +1,138 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Modal, ModalDestructive } from './index'
+describe('Modal tests', () => {
+  it('should render the modal when attribute open is true', async () => {
+    render (
+      <Modal
+        open={true}
+        onClose={() => { return }}
+      >
+        <p>modal</p>
+      </Modal>
+    )
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+  })
+  it('should render the close button and handle the close function', async () => {
+    const handleClose = jest.fn()
+    render (
+      <Modal
+        open={true}
+        onClose={handleClose}
+        closeButtonLabel="Close me"
+      >
+        <p>modal</p>
+      </Modal>
+    )
+    expect(handleClose).not.toHaveBeenCalled()
+    const closeButton = screen.getByText('Close me')
+    expect(closeButton).toBeInTheDocument()
+    await userEvent.click(closeButton)
+    expect(handleClose).toHaveBeenCalled()
+  })
+  it('should render the primary action button and handle event after click', async () => {
+    const handlePrimaryButtonClick = jest.fn()
+    render (
+      <Modal
+        open={true}
+        onClose={() => { return }}
+        primaryButtonLabel="Go!"
+        onPrimaryAction={handlePrimaryButtonClick}
+      >
+        <p>modal</p>
+      </Modal>
+    )
+    expect(handlePrimaryButtonClick).not.toHaveBeenCalled()
+    const primaryButton = screen.getByText('Go!')
+    expect(primaryButton).toBeInTheDocument()
+    await userEvent.click(primaryButton)
+    expect(handlePrimaryButtonClick).toHaveBeenCalled()
+  })
+  it('should render the secondary action button and handle event after click', async () => {
+    const handleSecondaryButtonClick = jest.fn()
+    render (
+      <Modal
+        open={true}
+        onClose={() => { return }}
+        secondaryButtonLabel="Open docs"
+        onSecondaryAction={handleSecondaryButtonClick}
+      >
+        <p>modal</p>
+      </Modal>
+    )
+    expect(handleSecondaryButtonClick).not.toHaveBeenCalled()
+    const secondaryButton = screen.getByText('Open docs')
+    expect(secondaryButton).toBeInTheDocument()
+    await userEvent.click(secondaryButton)
+    expect(handleSecondaryButtonClick).toHaveBeenCalled()
+  })
+  it('should call the close function on press "Esc" key', async () => {
+    const handleClose = jest.fn()
+    render (
+      <Modal
+      open={true}
+      onClose={handleClose}
+      >
+        <p>modal</p>
+      </Modal>
+    )
+    expect(handleClose).not.toHaveBeenCalled()
+    await userEvent.keyboard('{Escape}')
+    expect(handleClose).toHaveBeenCalled()
+  })
+  it('should not call the close function on press "Esc" key if the closeOnEsc is false', async () => {
+    const handleClose = jest.fn()
+    render (
+      <Modal
+        open={true}
+        onClose={handleClose}
+        closeOnEsc={false}
+      >
+        <p>modal</p>
+      </Modal>
+    )
+    expect(handleClose).not.toHaveBeenCalled()
+    await userEvent.keyboard('{Escape}')
+    expect(handleClose).not.toHaveBeenCalled()
+  })
+  it('should call a function we pass on onOverlayClick when click on the overlay section', async () => {
+    const handleClose = jest.fn()
+    render (
+      <Modal
+        open={true}
+        onClose={handleClose}
+        onOverlayClick={handleClose}
+      >
+        <p>modal</p>
+      </Modal>
+    )
+    expect(handleClose).not.toHaveBeenCalled()
+    const outside = screen.getByTestId('modal-overlay')
+    await userEvent.click(outside)
+    expect(handleClose).toHaveBeenCalled()
+  })
+})

package/src/lib/components/modal/modal.tsx ADDED Viewed

@@ -0,0 +1,114 @@
+import { InputHTMLAttributes } from 'react'
+import { Surface, Borders, Padding, Focused, Gap } from '@foundations'
+import { FC, isDefined, Nothing } from '@helpers'
+import styled from 'styled-components'
+import { Heading2 } from 'components/typography'
+import { Button } from 'components/molecules/button'
+import { IconMinor } from 'components/icon'
+import { ModalBase, IModalBaseProps } from './modal-base'
+const ModalHeader = styled.header`
+  height: 28px;
+  display: flex;
+  justify-content: space-between;
+  padding: ${Padding.m};
+  border-bottom: 1px solid ${Borders.Default.Subdued};
+  box-sizing: content-box;
+`
+const CloseButton = styled(IconMinor.Xmark)`
+  cursor: pointer;
+  align-self: center;
+  border-radius: 3px;
+  &:hover {
+    background-color: ${Surface.Default.Hover};
+  }
+  &:active {
+    background-color: ${Surface.Default.Pressed};
+  }
+  &:focus {
+    outline: 2px solid ${Focused.Default};
+  }
+`
+const ModalContent = styled.div`
+  max-height: 70vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: ${Padding.m};
+`
+const ModalFooter = styled.footer`
+  height: 68px;
+  width: 100%;
+  padding: ${Padding.m};
+  border-top: 1px solid ${Borders.Default.Subdued};
+  bottom: 0;
+  box-sizing: border-box;
+  display: flex;
+  gap: ${Gap.xs};
+  justify-content: flex-end;
+`
+export interface IModalProps extends IModalBaseProps {
+  title?: string
+  primaryButtonLabel?: string
+  closeButtonLabel?: string
+  secondaryButtonLabel?: string
+  onPrimaryAction?: () => void
+  onSecondaryAction?: () => void
+}
+export type IModal = IModalProps & InputHTMLAttributes<HTMLInputElement>
+export const Modal: FC<IModal> = (props: IModal) => {
+  const {
+    open,
+    closeOnEsc,
+    title,
+    children,
+    primaryButtonLabel,
+    closeButtonLabel,
+    secondaryButtonLabel,
+    modalSize,
+    onOverlayClick,
+    onPrimaryAction,
+    onSecondaryAction,
+    onClose,
+  } = props
+  return (
+    <ModalBase
+      open={open}
+      onOverlayClick={onOverlayClick}
+      closeOnEsc={closeOnEsc}
+      modalSize={modalSize}
+      onClose={onClose}
+    >
+      <>
+        <ModalHeader>
+          <Heading2 default>{title}</Heading2>
+          <CloseButton role="button" onClick={onClose}/>
+        </ModalHeader>
+        <ModalContent>
+          {children}
+        </ModalContent>
+        <ModalFooter>
+          { isDefined(secondaryButtonLabel)
+            ? <Button plain subtle onClick={onSecondaryAction} name="modal-secondary-button">{secondaryButtonLabel}</Button>
+            : <Nothing />
+          }
+          { isDefined(closeButtonLabel)
+            ? <Button onClick={onClose} name="modal-close-button">{closeButtonLabel}</Button>
+            : <Nothing />
+          }
+          { isDefined(primaryButtonLabel)
+            ? <Button primary onClick={onPrimaryAction} name="modal-primary-button">{primaryButtonLabel}</Button>
+            : <Nothing />
+          }
+        </ModalFooter>
+      </>
+    </ModalBase>
+  )
+}

package/src/lib/components/modal/storybook/components.tsx ADDED Viewed

@@ -0,0 +1,105 @@
+import { Playground } from 'storybook-addon-jarle-monaco'
+import { Modal } from '../modal'
+import { ModalDestructive } from '../modal-destructive'
+import { Button, Body, BodyLarge, Flex, Icon } from '@components'
+import { Surface, Text, Margin } from '@foundations'
+import styled from 'styled-components'
+const IconFrame = styled(Flex)`
+  background-color: ${Surface.Critical.Pressed};
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  justify-content: center;
+  margin-bottom: ${Margin.m};
+`
+const ExclamationIcon = styled(Icon.TriangleExclamation)`
+  path {
+    fill: ${Text.Critical};
+  }
+`
+const MainText = styled(Body)`
+  margin: ${Margin.m} ${Margin.none} ${Margin.xs};
+  text-align: center;
+`
+export const ModalExample = () => (
+  <Playground
+    code={`
+const [isOpen, setIsOpen] = useState(false);
+<>
+  <Button onClick={() => setIsOpen(true)}>Open the modal!</Button>
+  <Modal
+    open={isOpen}
+    modalSize="large"
+    title="Modal Heading"
+    closeButtonLabel="Close me"
+    primaryButtonLabel="Do Stuff!"
+    onPrimaryAction={() => alert("Stuff done", setIsOpen(false))}
+    secondaryButtonLabel="Could you click here?"
+    onSecondaryAction={() => alert("Nice", setIsOpen(false))}
+    onClose={() => setIsOpen(false)}
+    onOverlayClick={() => setIsOpen(false)}
+  >
+    <Body>Modal with incredible content</Body>
+  </Modal>
+</>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Button,
+        Modal,
+        Body,
+      },
+    }}
+  />
+)
+export const ModalDestructiveExample = () => (
+  <Playground
+    code={`
+const [isOpen, setIsOpen] = useState(false);
+<>
+  <Button onClick={() => setIsOpen(true)}>Open the modal!</Button>
+  <ModalDestructive
+    open={isOpen}
+    closeButtonLabel="Get me outta here"
+    primaryButtonLabel="Delete it!"
+    onPrimaryAction={() => alert("Deleted :(", setIsOpen(false))}
+    onClose={() => setIsOpen(false)}
+    onOverlayClick={() => setIsOpen(false)}
+  >
+    <Flex center column>
+      <IconFrame center>
+        <ExclamationIcon />
+      </IconFrame>
+      <BodyLarge strong>Delete Account</BodyLarge>
+      <MainText subdued>
+        Are you sure you want to delete your account? All of your data will be permanently removed.
+        This action cannot be undone.
+      </MainText>
+    </Flex>
+  </ModalDestructive>
+</>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Button,
+        ModalDestructive,
+        BodyLarge,
+        Body,
+        IconFrame,
+        ExclamationIcon,
+        Flex,
+        MainText,
+      },
+    }}
+  />
+)

package/src/lib/components/modal/storybook/modal-destructive.stories.mdx ADDED Viewed

@@ -0,0 +1,31 @@
+import { Canvas } from '@storybook/addon-docs';
+import { ModalDestructive } from '../modal-destructive'
+import { ModalExample, ModalDestructiveExample } from './components'
+<Meta title="Components/ModalDestructive" component={ModalDestructive}/>
+## Modal
+This special type of modal is used to confirm destructive actions that cannot be undone.
+For more details, check out the component page on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=734%3A7372&t=pb7J9FXC7G2B8T7p-0)
+```tsx
+import { ModalDestructive } from './index'
+<ModalDestructive />
+```
+<ModalDestructiveExample />
+## API
+| Prop                    | Type                 | Description                                               |
+| ----------------------- | -------------------- | --------------------------------------------------------- |
+| `open`                  | `boolean`            | if true, the modal will be open                           |
+| `children?`             | `ReactElement`       | the elements to be displayed on main section of the modal |
+| `closeOnBackdropClick`  | `boolean`            | if true, the modal will close when click on overlay area  |
+| `closeOnEsc`            | `boolean`            | if true, the modal will close when press esc key          |
+| `primaryButtonLabel?`   | `string`             | Primary action button label                               |
+| `closeButtonLabel?`     | `string`             | Close/Dismiss action button label                         |
+| `onPrimaryAction?`      | `() => void`         | Primary button event handler function                     |
+| `onClose?`              | `() => void`         | Callback function invoked to close the modal              |