npm - @edvisor/product-language - Versions diffs - 0.1.1 → 0.2.0 - Mend

@edvisor/product-language 0.1.1 → 0.2.0

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

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

@@ -0,0 +1,51 @@
+import { Canvas, Meta } from '@storybook/addon-docs';
+import { Link } from '../link'
+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/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 { Label1, BodyLarge, 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]: Label1,
+  [AvatarSize.medium]: BodyLarge,
+  [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 { Label1 } 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(Label1)`
+  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,55 @@
+import { Canvas, Meta, Story, ArgsTable } 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
+<Canvas>
+  <Story name="default">
+    <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>
+  </Story>
+</Canvas>
+Also, we can use that rendering the full name
+<Canvas>
+  <Story name="with-label">
+    <WrapperStoriesWithLabel>
+      <Avatar name="Yan Leite" withLabel />
+      <Avatar name="Yan Leite" withLabel imageUrl='https://blog.edvisor.io/hubfs/Edvisor%20Smi.png' />
+    </WrapperStoriesWithLabel>
+  </Story>
+</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,
+}

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

@@ -0,0 +1,235 @@
+// this file was generated, but it is safe to modify
+import {
+  bitwiseOr,
+  MappedEnum,
+  RequireOnlyOne,
+  PropsWithChildren,
+} from '@helpers'
+import { Actions, Padding, Interactive, Text, Borders } from '@foundations'
+export const enum ButtonType {
+  basic = 1,
+  primary = 2,
+  primaryDestructive = 4,
+  destructive = 8,
+  outline = 16,
+  plain = 32,
+  plainSubtle = 64,
+}
+const enum ButtonSize {
+  default = 1,
+  small = 2,
+  large = 4,
+}
+const enum ButtonDisabledType {
+  enabled = 1,
+  disabled = 2,
+}
+type ButtonTypes<T> = MappedEnum<typeof ButtonType, T>
+type ButtonSizes<T> = MappedEnum<typeof ButtonSize, T>
+type ButtonDisabledTypes<T> = MappedEnum<typeof ButtonDisabledType, T>
+function toButtonSize(n: number): ButtonSize {
+  switch (n) {
+    case ButtonSize.default:
+      return ButtonSize.default
+    case ButtonSize.small:
+      return ButtonSize.small
+    case ButtonSize.large:
+      return ButtonSize.large
+    default:
+      return ButtonSize.default
+  }
+}
+function toButtonDisabledType(n: number): ButtonDisabledType {
+  switch (n) {
+    case ButtonDisabledType.enabled:
+      return ButtonDisabledType.enabled
+    case ButtonDisabledType.disabled:
+      return ButtonDisabledType.disabled
+    default:
+      return ButtonDisabledType.enabled
+  }
+}
+const ButtonBackgroundColorValues = {
+  [ButtonType.basic]: Actions.Secondary.Default,
+  [ButtonType.primary]: Actions.Primary.Default,
+  [ButtonType.primaryDestructive]: Actions.Critical.Default,
+  [ButtonType.destructive]: 'none',
+  [ButtonType.outline]: 'none',
+  [ButtonType.plain]: 'none',
+  [ButtonType.plainSubtle]: 'none',
+}
+const ButtonBackgroundColorDisabledValues = {
+  [ButtonType.basic]: Actions.Secondary.Disabled,
+  [ButtonType.primary]: Actions.Primary.Disabled,
+  [ButtonType.primaryDestructive]: Actions.Critical.Disabled,
+  [ButtonType.destructive]: Actions.Secondary.Disabled,
+  [ButtonType.outline]: 'none',
+  [ButtonType.plain]: 'none',
+  [ButtonType.plainSubtle]: 'none',
+}
+const ButtonBackgroundColorHoverValues = {
+  [ButtonType.basic]: Actions.Secondary.Hover,
+  [ButtonType.primary]: Actions.Primary.Hover,
+  [ButtonType.primaryDestructive]: Actions.Critical.Hover,
+  [ButtonType.destructive]: Actions.Critical.Hover,
+  [ButtonType.outline]: Actions.Secondary.Hover,
+  [ButtonType.plain]: '',
+  [ButtonType.plainSubtle]: '',
+}
+const ButtonBackgroundColorPressedValues = {
+  [ButtonType.basic]: Actions.Secondary.Pressed,
+  [ButtonType.primary]: Actions.Primary.Pressed,
+  [ButtonType.primaryDestructive]: Actions.Critical.Pressed,
+  [ButtonType.destructive]: Actions.Critical.Pressed,
+  [ButtonType.outline]: Actions.Secondary.Pressed,
+  [ButtonType.plain]: Actions.Secondary.Hover,
+  [ButtonType.plainSubtle]: Actions.Secondary.Hover,
+}
+const ButtonTextColorValues = {
+  [ButtonType.basic]: Text.Default,
+  [ButtonType.primary]: Text.OnPrimary,
+  [ButtonType.primaryDestructive]: Text.OnCritical,
+  [ButtonType.destructive]: Text.Default,
+  [ButtonType.outline]: Text.Default,
+  [ButtonType.plain]: Interactive.Default.Default,
+  [ButtonType.plainSubtle]: Interactive.Subtle.Default,
+}
+const ButtonTextColorHoverValues = {
+  [ButtonType.basic]: Text.Default,
+  [ButtonType.primary]: Text.OnPrimary,
+  [ButtonType.primaryDestructive]: Text.OnCritical,
+  [ButtonType.destructive]: Text.OnCritical,
+  [ButtonType.outline]: Text.Default,
+  [ButtonType.plain]: Interactive.Default.Hover,
+  [ButtonType.plainSubtle]: Interactive.Subtle.Hover,
+}
+const ButtonBorderValues = {
+  [ButtonType.basic]: `1px solid ${Borders.Default.Default}`,
+  [ButtonType.primary]: 'none',
+  [ButtonType.primaryDestructive]: 'none',
+  [ButtonType.destructive]: `1px solid ${Borders.Default.Default}`,
+  [ButtonType.outline]: `1px solid ${Borders.Default.Default}`,
+  [ButtonType.plain]: 'none',
+  [ButtonType.plainSubtle]: 'none',
+}
+const ButtonBorderDisabledValues = {
+  [ButtonType.basic]: `1px solid ${Borders.Default.Subdued}`,
+  [ButtonType.primary]: 'none',
+  [ButtonType.primaryDestructive]: 'none',
+  [ButtonType.destructive]: `1px solid ${Borders.Default.Subdued}`,
+  [ButtonType.outline]: `1px solid ${Borders.Default.Default}`,
+  [ButtonType.plain]: 'none',
+  [ButtonType.plainSubtle]: 'none',
+}
+const ButtonTextColorDisabled = {
+  [ButtonDisabledType.enabled]: '',
+  [ButtonDisabledType.disabled]: Text.Light,
+}
+const ButtonCursor = {
+  [ButtonDisabledType.enabled]: 'pointer',
+  [ButtonDisabledType.disabled]: 'not-allowed',
+}
+const ButtonSizeValues = {
+  [ButtonSize.small]: `${Padding.xxs} ${Padding.s}`,
+  [ButtonSize.default]: `${Padding.xs} ${Padding.m}`,
+  [ButtonSize.large]: `${Padding.s} ${Padding.l}`,
+}
+const ButtonSizeValuesByType = {
+  [ButtonType.basic]: '',
+  [ButtonType.primary]: '',
+  [ButtonType.primaryDestructive]: '',
+  [ButtonType.destructive]: '',
+  [ButtonType.outline]: '',
+  [ButtonType.plain]: `${Padding.xxxs} ${Padding.xxs}`,
+  [ButtonType.plainSubtle]: `${Padding.xxxs} ${Padding.xxs}`,
+}
+export type ButtonTypeProps = Partial<RequireOnlyOne<ButtonTypes<boolean>>> &
+  PropsWithChildren
+export type ButtonSizeProps = Partial<RequireOnlyOne<ButtonSizes<boolean>>> &
+  PropsWithChildren
+export type ButtonDisabledTypeProps = Partial<
+  RequireOnlyOne<ButtonDisabledTypes<boolean>>
+> &
+  PropsWithChildren
+export function getBackgroundColorByType(type: ButtonType): string {
+  return ButtonBackgroundColorValues[type]
+}
+export function getBackgroundColorHoverByType(type: ButtonType): string {
+  return ButtonBackgroundColorHoverValues[type]
+}
+export function getBackgroundColorDisabledByType(type: ButtonType): string {
+  return ButtonBackgroundColorDisabledValues[type]
+}
+export function getBackgroundColorPressedByType(type: ButtonType): string {
+  return ButtonBackgroundColorPressedValues[type]
+}
+export function getTextColorByType(type: ButtonType): string {
+  return ButtonTextColorValues[type]
+}
+export function getTextColorOnHoverByType(type: ButtonType): string {
+  return ButtonTextColorHoverValues[type]
+}
+export function getBorderByType(type: ButtonType): string {
+  return ButtonBorderValues[type]
+}
+export function getBorderDisabledByType(type: ButtonType): string {
+  return ButtonBorderDisabledValues[type]
+}
+export function getPaddingBySize(props: ButtonSizeProps): string {
+  return ButtonSizeValues[
+    toButtonSize(bitwiseOr([props.default, props.small, props.large]))
+  ]
+}
+export function getPaddingByType(type: ButtonType): string {
+  return ButtonSizeValuesByType[type]
+}
+export function getTextColorIfDisabled(props: ButtonDisabledTypeProps): string {
+  return ButtonTextColorDisabled[
+    toButtonDisabledType(bitwiseOr([props.enabled, props.disabled]))
+  ]
+}
+export function getCursor(props: ButtonDisabledTypeProps): string {
+  return ButtonCursor[
+    toButtonDisabledType(bitwiseOr([props.enabled, props.disabled]))
+  ]
+}
+export function getIsDisabled(props: ButtonDisabledTypeProps): boolean {
+  return (
+    toButtonDisabledType(bitwiseOr([props.enabled, props.disabled])) ===
+    ButtonDisabledType.disabled
+  )
+}