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/modal/storybook/modal.stories.mdx ADDED Viewed

@@ -0,0 +1,50 @@
+import { Canvas } from '@storybook/addon-docs';
+import { Modal } from '../modal'
+import { ModalExample, ModalDestructiveExample } from './components'
+<Meta title="Components/Modal" component={Modal}/>
+# Modal
+Modals are overlays that prevent users from interacting with the rest of the platform until a specific action is taken.
+It should be used thoughtfully.
+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)
+## How to use it
+```jsx
+// Import the component
+import { Modal } from '@edvisor/product-language'
+// Render the component sending the required parameters
+<Modal
+  open={isOpen}
+  closeButtonLabel="Close me"
+  onClose={() => setIsOpen(false)}
+>
+  <Body>Modal text</Body>
+</Modal>
+```
+## Example
+<ModalExample />
+## 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                              |
+| `modalSize?`            | `string`             | Size of the modal (small \| critical \| medium \| default \| large \| xLarge) |
+| `title?`                | `string`             | Heading text                                                                  |
+| `primaryButtonLabel?`   | `string`             | Primary action button label                                                   |
+| `closeButtonLabel?`     | `string`             | Close/Dismiss action button label                                             |
+| `secondaryButtonLabel?` | `string`             | Secondary action button label                                                 |
+| `onPrimaryAction?`      | `() => void`         | Primary button event handler function                                         |
+| `onSecondaryAction?`    | `() => void`         | Secondary button event handler function                                       |
+| `onClose?`              | `() => void`         | Callback function invoked to close the modal                                  |

package/src/lib/components/molecules/avatar/avatar-size-flags.tsx ADDED Viewed

@@ -0,0 +1,55 @@
+// this file was generated, but it is safe to modify
+import { bitwiseOr, MappedEnum, RequireOnlyOne, PropsWithChildren } from '@helpers'
+import { Label, Body, Display } from 'components/typography'
+const enum AvatarSize {
+  small = 1,
+  medium = 2,
+  large = 4,
+}
+type AvatarSizes<T> = MappedEnum<typeof AvatarSize, T>
+function toAvatarSize(n: number): AvatarSize {
+  switch (n) {
+    case AvatarSize.small:
+      return AvatarSize.small
+    case AvatarSize.medium:
+      return AvatarSize.medium
+    case AvatarSize.large:
+      return AvatarSize.large
+    default:
+      return AvatarSize.medium
+  }
+}
+const AvatarSizeValues = {
+  [AvatarSize.small]: '32px',
+  [AvatarSize.medium]: '40px',
+  [AvatarSize.large]: '60px',
+}
+const AvatarSizeNodes = {
+  [AvatarSize.small]: Label,
+  [AvatarSize.medium]: Body,
+  [AvatarSize.large]: Display,
+}
+export type AvatarSizeProps = Partial<RequireOnlyOne<AvatarSizes<boolean>>> &
+  PropsWithChildren
+export function getValuesBySize(props: AvatarSizeProps): string {
+  return AvatarSizeValues[
+    toAvatarSize(
+      bitwiseOr([props.small, props.medium, props.large])
+    )
+  ]
+}
+export function getNodeToRenderText(props: AvatarSizeProps): React.ElementType {
+  return AvatarSizeNodes[
+    toAvatarSize(
+      bitwiseOr([props.small, props.medium, props.large])
+    )
+  ]
+}

package/src/lib/components/molecules/avatar/avatar.test.tsx ADDED Viewed

@@ -0,0 +1,114 @@
+import {render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Avatar } from './index'
+describe('Avatar Tests', () => {
+  describe('Avatar Tests', () => {
+    it('should render the acronym name from user', async () => {
+      render(
+        <Avatar
+          name="Some Full Name"
+          small
+        />
+      )
+      expect(screen.getByText('SN')).toBeInTheDocument()
+      expect(screen.queryByRole('img')).not.toBeInTheDocument()
+      expect(screen.queryByText('Some Full Name')).not.toBeInTheDocument()
+    })
+    it('should render the acronym name with just two parts of name', async () => {
+      render(
+        <Avatar
+          name="Some Name"
+          small
+        />
+      )
+      expect(screen.getByText('SN')).toBeInTheDocument()
+    })
+    it('should render the acronym name with just one parts of name', async () => {
+      render(
+        <Avatar
+          name="Name"
+          small
+        />
+      )
+      expect(screen.getByText('N')).toBeInTheDocument()
+    })
+    it('should not render the acronym with empty name', async () => {
+      render(
+        <Avatar
+          name=""
+          small
+        />
+      )
+      expect(screen.queryByText('Name')).not.toBeInTheDocument()
+    })
+  })
+  it('should render the image from user', async () => {
+    render(
+      <Avatar
+        name="Some Full Name"
+        imageUrl='https://blog.edvisor.io/hubfs/Edvisor%20Smi.png'
+      />
+    )
+    expect(screen.queryByText('SN')).not.toBeInTheDocument()
+    expect(screen.queryByText('Some Full Name')).not.toBeInTheDocument()
+    expect(screen.getByRole('img')).toBeInTheDocument()
+  })
+  it('should not have accessibility issues', async () => {
+    const { container } = render(
+      <Avatar
+        name="Some Full Name"
+        small
+      />
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+  describe('withLabel behavior Tests', () => {
+    it('should render the full name and the acronym name from user', async () => {
+      render(
+        <Avatar
+          name="Some Full Name"
+          withLabel
+        />
+      )
+      expect(screen.queryByRole('img')).not.toBeInTheDocument()
+      expect(screen.getByText('SN')).toBeInTheDocument()
+      expect(screen.getByText('Some Full Name')).toBeInTheDocument()
+    })
+    it('should render the full name and the user image', async () => {
+      render(
+        <Avatar
+          name="Some Full Name"
+          imageUrl='https://blog.edvisor.io/hubfs/Edvisor%20Smi.png'
+          withLabel
+        />
+      )
+      expect(screen.queryByText('SN')).not.toBeInTheDocument()
+      expect(screen.getByText('Some Full Name')).toBeInTheDocument()
+      expect(screen.getByRole('img')).toBeInTheDocument()
+    })
+    it('should not have accessibility issues', async () => {
+      const { container } = render(
+        <Avatar
+          name="Some Full Name"
+          imageUrl='https://blog.edvisor.io/hubfs/Edvisor%20Smi.png'
+          withLabel
+        />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/lib/components/molecules/avatar/avatar.tsx ADDED Viewed

@@ -0,0 +1,80 @@
+import styled from 'styled-components'
+import { FC, isDefined, isNil, Nothing } from '@helpers'
+import { Margin, Surface } from '@foundations'
+import { SpaceAround } from '../../layout/'
+import { AvatarSizeProps, getValuesBySize, getNodeToRenderText } from './avatar-size-flags'
+import { Label } from 'components/typography'
+const Container = styled(SpaceAround)`
+  align-items: center;
+`
+const Circle = styled.div<{ size: string }>`
+  width: ${({ size }) => size};
+  height: ${({ size }) => size};
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  background: ${Surface.Neutral.Default};
+`
+const Image = styled.img`
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+`
+const FullName = styled(Label)`
+  margin-left: ${Margin.xs};
+`
+interface IAvatarProps {
+  name: string;
+  imageUrl?: string;
+  imageLabel?: string;
+  withLabel?: boolean;
+  className?: string
+}
+type IProps = IAvatarProps & AvatarSizeProps
+const isFirstOrLast = (el: string,
+  index: number,
+  items: Array<string>): boolean =>
+    isDefined(el) && index === 0 || index === items.length - 1
+const getInitial = (text: string): string => isNil(text)
+  ? ''
+  : text.charAt(0)
+const getInitialsFromName = (name: string): string =>  {
+  const allNames = name.trim().split(' ')
+  const initials = allNames
+    .filter(isFirstOrLast)
+    .map(getInitial)
+    .join('')
+  return initials
+}
+export const Avatar: FC<IProps> = (props) => {
+  const {name, imageUrl, withLabel, imageLabel = `${name} avatar` } = props
+  const size = getValuesBySize(props)
+  const Text = getNodeToRenderText(props)
+  if (!isDefined(name)) {
+    return <Nothing />
+  }
+  return (
+    <Container className={props.className}>
+      <Circle size={size}>
+        { isDefined(imageUrl)
+         ? <Image src={imageUrl} alt={imageLabel}/>
+         : <Text>{getInitialsFromName(name)}</Text>
+        }
+      </Circle>
+      { isDefined(withLabel) && <FullName>{name}</FullName> }
+    </Container>
+  )
+}

package/src/lib/components/molecules/avatar/index.tsx ADDED Viewed

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

package/src/lib/components/molecules/avatar/stories/avatar.stories.mdx ADDED Viewed

@@ -0,0 +1,52 @@
+import { Canvas, Meta } from '@storybook/addon-docs';
+import { Avatar } from '../index'
+import { WrapperStories, AvatarsWithText, AvatarsWithImage, WrapperStoriesWithLabel } from './components'
+<Meta
+  title="Components/Avatar"
+  component={Avatar}
+/>
+# Avatar
+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
+```javascript
+// Import the component
+import { Avatar } from './index'
+// Render the component sending the required parameters
+<Avatar name="SOME-NAME-HERE" />
+```
+## Good Practices
+- You can send the `imageLabel` propertie as and `alt` propertie in order to set and alternative text to image
+## Examples
+Default
+<Canvas>
+  <WrapperStories>
+    <AvatarsWithText>
+      <Avatar name="Yan Leite" small />
+      <Avatar name="Yan Leite" medium />
+      <Avatar name="Yan Leite" large />
+    </AvatarsWithText>
+    <AvatarsWithImage>
+      <Avatar name="Yan Leite" imageLabel="Edvisor Logo" small imageUrl='https://blog.edvisor.io/hubfs/Edvisor%20Smi.png' />
+      <Avatar name="Yan Leite" medium imageUrl='https://blog.edvisor.io/hubfs/Edvisor%20Smi.png' />
+      <Avatar name="Yan Leite" large imageUrl='https://blog.edvisor.io/hubfs/Edvisor%20Smi.png' />
+    </AvatarsWithImage>
+  </WrapperStories>
+</Canvas>
+Also, we can use that rendering the full name
+<Canvas>
+  <WrapperStoriesWithLabel>
+    <Avatar name="Yan Leite" withLabel />
+    <Avatar name="Yan Leite" withLabel imageUrl='https://blog.edvisor.io/hubfs/Edvisor%20Smi.png' />
+  </WrapperStoriesWithLabel>
+</Canvas>

package/src/lib/components/molecules/avatar/stories/components.tsx ADDED Viewed

@@ -0,0 +1,36 @@
+import styled from 'styled-components'
+import { Surface, Padding } from '@foundations'
+const WrapperStories = styled.div`
+  width: 244px;
+  height: 192px;
+  background: ${Surface.Default.Default};
+`
+const WrapperStoriesWithLabel = styled.div`
+  width: 130px;
+  background: ${Surface.Default.Default};
+  & > div  {
+    padding-bottom: ${Padding.l};
+  }
+`
+const AvatarsWithText = styled.div`
+  display: flex;
+  justify-content: space-around;
+  padding: ${Padding.l} 0 ${Padding.l} 0;
+`
+const AvatarsWithImage = styled.div`
+  display: flex;
+  justify-content: space-around;
+  padding-bottom: ${Padding.l};
+`
+export {
+  WrapperStories,
+  AvatarsWithText,
+  AvatarsWithImage,
+  WrapperStoriesWithLabel,
+}