@edvisor/product-language 0.2.0 → 0.3.0

package/.eslintrc.json

@@ -33,15 +33,19 @@
             "message": "Use `import { forwardRef } from '@helpers'` instead"
           },
           {
-            "selector": "Literal[value=/#[a-zA-Z0-9]{1,6}/i]",
+            "selector": "ImportDeclaration[source.value=/testing-library/i] ImportSpecifier[imported.name=/fireEvent/]",
+            "message": "Prefer `import userEvent from '@testing-library/user-event'` wherever possible.\n@see: https://edvisorio.atlassian.net/wiki/spaces/ENG/pages/235307017/First+contact+with+Testing+Library#Handling-Events"
+          },
+          {
+            "selector": "Literal[value=/[^&]#[a-zA-Z0-9]{1,6}/i]",
             "message": "No hex literals, please import constants from @foundations"
           },
           {
             "selector": "Literal[value=/padding.*: ([0-9]|')/i]",
-            "message": "No hex literals, please import constants from @foundations"
+            "message": "No string pixel values for css padding, please import Padding from @foundations"
           },
           {
-            "selector": "TemplateElement[value.cooked=/#[a-zA-Z0-9]{1,6}/i]",
+            "selector": "TemplateElement[value.cooked=/[^&]#[a-zA-Z0-9]{1,6}/i]",
             "message": "No hex literals, please import constants from @foundations"
           },
           {
@@ -109,15 +113,19 @@
             "message": "Use `import { forwardRef } from '@helpers'` instead"
           },
           {
-            "selector": "Literal[value=/#[a-zA-Z0-9]{1,6}/i]",
+            "selector": "ImportDeclaration[source.value=/testing-library/i] ImportSpecifier[imported.name=/fireEvent/]",
+            "message": "Prefer `import userEvent from '@testing-library/user-event'` wherever possible.\n@see: https://edvisorio.atlassian.net/wiki/spaces/ENG/pages/235307017/First+contact+with+Testing+Library#Handling-Events"
+          },
+          {
+            "selector": "Literal[value=/[^&]#[a-zA-Z0-9]{1,6}/i]",
             "message": "No hex literals, please import constants from @foundations"
           },
           {
             "selector": "Literal[value=/padding.*: ([0-9]|')/i]",
-            "message": "No hex literals, please import constants from @foundations"
+            "message": "No string pixel values for css padding, please import Padding from @foundations"
           },
           {
-            "selector": "TemplateElement[value.cooked=/#[a-zA-Z0-9]{1,6}/i]",
+            "selector": "TemplateElement[value.cooked=/[^&]#[a-zA-Z0-9]{1,6}/i]",
             "message": "No hex literals, please import constants from @foundations"
           },
           {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edvisor/product-language",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "MIT",
   "description": "Edvisor.io product-language components",
   "repository": "https://github.com/edvisor-io/front-end/",
@@ -8,8 +8,7 @@
     "@types/jest-axe": "^3.5.4"
   },
   "scripts": {
-    "release": "release-it --disable-metrics",
-    "publish": "cd dist/packages/product-language & npm publish"
+    "release": "release-it --disable-metrics"
   },
   "peerDependencies": {
     "release": "*"

package/project.json

@@ -20,14 +20,25 @@
             "glob": "packages/product-language/README.md",
             "input": ".",
             "output": "."
-          },
-          {
-            "glob": "packages/product-language/release-it.json",
-            "input": ".",
-            "output": "."
-          },
+          }
+        ]
+      }
+    },
+    "dev": {
+      "executor": "@nrwl/web:rollup",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "watch": true,
+        "outputPath": "../react-web-client/product-language",
+        "tsConfig": "packages/product-language/tsconfig.lib.json",
+        "project": "packages/product-language/package.json",
+        "entryFile": "packages/product-language/src/index.ts",
+        "external": ["react/jsx-runtime"],
+        "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
+        "compiler": "babel",
+        "assets": [
           {
-            "glob": "packages/product-language/.npmrc",
+            "glob": "packages/product-language/README.md",
             "input": ".",
             "output": "."
           }

package/src/README.md

@@ -0,0 +1,61 @@
+Directory Structure
+===================
+
+Manifest Files (index.ts)
+-------------------------
+
+RWC, and now product-language, export components to be consumed by another system. Their API is a list of components that they export, and this API is declared in src/index.ts the “root manifest”.
+
+```ts
+// src/index.ts 
+export * from 'src/components'
+export * from 'src/foundations'
+```
+
+And then things get… recursive.
+
+The “components” directory is a module that exports components to be consumed by another system. It’s API is the list of components it exports, and this API is declared in src/components/index.ts
+
+```ts
+// src/components/index.ts
+export * from 'src/components/atoms'
+export * from 'src/components/molecules'
+```
+
+The “molecules” directory is a module that exports components to be consumed by another system. It’s API is the list of components it exports, and this API is declared in src/components/molecules/index.ts
+
+```ts
+// src/components/molecules/index.ts
+export * from 'src/components/molecules/button
+export * from 'src/components/molecules/card
+export * from 'src/components/molecules/input-field
+```
+
+The “button” directory is a module that exports components to be consumed by another system. It’s API is the list of components it exports, and this API is declared in src/components/molecules/button/index.ts
+
+This file, this index.ts file is the public API or public interface of the button module. A public interface should only expose public things. Private things should not be exported. So for example:
+
+```ts
+// src/components/molecules/button/index.ts
+
+export * from './stories' // NOPE! this is not public
+export * from './components' // Nope! don't expose implementation details
+
+// in most cases, this is all you need
+export * from './Button.tsx'
+```
+
+Within the Button module, we have to be careful to remember that these index files are the public api they are not to be consumed internally. So for example in a storybook file:
+
+```ts
+// src/components/molecules/button/stories/button.stories.mdx
+
+import { Button } from '../index' // Nope!
+import { Button } from '../Button' // yes!
+```
+
+Importing from the index file within the module that index file describes is a potential problem, it can cause cyclic dependencies which can be hard to debug.
+
+On a similar note: your stories and tests folders don’t need index files at all. They are just there to provide a place to put helpers specific to the stories and tests for the component. They are not modules that export components for other systems to use, so they do not need an index.ts file.
+
+On the other hand, the components folder in the Button module should have an index.ts file since it exposes a list of components that Button consumes. Doing this also makes it easier to lift a helper component from the Button module to a shared place if you discover you’ve created a helpful shared component.

package/src/helpers/index.ts

@@ -1,3 +1,4 @@
 // these are helpers used for development, they are not included in the build
 
-export * from './talesOf'
+export * from './talesOf'
+export * from './playground'

package/src/helpers/playground.ts

@@ -0,0 +1,16 @@
+import styled from 'styled-components'
+import { Playground } from 'storybook-addon-jarle-monaco'
+import { Margin, Surface, Text } from '@foundations'
+export { Playground } from 'storybook-addon-jarle-monaco'
+
+/** when using playground with a card inside we style it in night mode */
+export const CardPlayground = styled(Playground)`
+  background: ${Surface.Neutral.Default};
+
+  margin-bottom: ${Margin.xxl};
+
+  > div:nth-of-type(2) {
+    background: ${Surface.Default.Inverse};
+    color: ${Text.OnPrimary};
+  }
+`

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

@@ -2,30 +2,21 @@ 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'
+import { Label } from 'components/typography'
 
-const BadgeFrame = styled.div<{color: string}>`
+const BadgeFrame = styled(Label)<{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;
+  padding: ${Padding.xxxs} ${Padding.xs};
+  border-radius:10px;
+  height: fit-content;
 `
 
 type IBadgeProps = BadgeTypeProps & PropsWithChildren
 
-const Base: FC<IBadgeProps> = (props) => {
+export const Badge: FC<IBadgeProps> = (props) => {
   const color = getColor(props)
 
-
- return (
-    <BadgeFrame color={color}>
-      <Label2>{props.children}</Label2>
-    </BadgeFrame>
-  )
-}
-
-export const Badge = Base
+  return <BadgeFrame color={color}>{props.children}</BadgeFrame>
+}

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/src/lib/components/card/card.test.tsx

@@ -1,5 +1,6 @@
 import { Margin } from '@foundations'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import styled from 'styled-components'
 
 import { Card } from './card'
@@ -141,7 +142,7 @@ describe('Card', () => {
       expect(screen.getByRole('button')).toBeInTheDocument()
     })
 
-    it('does not stop the user from clicking the controls', () => {
+    it('does not stop the user from clicking the controls', async () => {
       const handleClick = jest.fn()
 
       render(
@@ -153,9 +154,7 @@ describe('Card', () => {
         </Card>
       )
 
-      fireEvent.click(screen.getByText('Click Me'), {
-        target: { value: 'JavaScript' },
-      })
+      await userEvent.click(screen.getByText('Click Me'))
   
       expect(handleClick).toHaveBeenCalledTimes(1)
     })

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

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { isDefined, isEmpty, getSlots, getChildren, FC, PropsWithChildren, If, getSlot, toKebabCase } from '@helpers'
+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'
@@ -43,7 +43,7 @@ export const Card: FC<ICardProps, typeof SubComponents> = (props) => {
   const controls = getSlot(CardControlsSlot, children)
   const headingAction = getSlot(CardHeadingActionSlot, children)
   const alertBanners = getSlots(CardAlertBannerSlot, children)
-  const otherChildren = getChildren(children)
+  const otherChildren = getOtherChildren(children)
 
   const headingId = isDefined(heading)
     ? toKebabCase(heading)

package/src/lib/components/card/components/card-section-slot.tsx

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react'
 import styled from 'styled-components'
-import { isDefined, Slot, getChildren, PropsWithChildren, If, getSlot, toKebabCase } from '@helpers'
+import { isDefined, Slot, getOtherChildren, PropsWithChildren, If, getSlot, toKebabCase } from '@helpers'
 import { Borders, Padding, Margin } from '@foundations'
 import { Heading4 } from 'components/typography'
 import { SpaceBetween } from 'components/layout'
@@ -28,7 +28,7 @@ const SubheadingFrame = styled(SpaceBetween)`
 export class CardSectionSlot extends Slot<ICardSectionProps> { 
   override render () {
     const headingAction = getSlot(CardHeadingActionSlot, this.props.children)
-    const children = getChildren(this.props.children)
+    const children = getOtherChildren(this.props.children)
     const headingId = isDefined(this.props.heading)
       ? toKebabCase(this.props.heading)
       : undefined

package/src/lib/components/card/storybook/card.stories.mdx

@@ -42,7 +42,7 @@ You can divide a card's body up into sections.
 Any heading in a Card can have an action
 
 <AlertBanner warning>
-HeadingAction is a slots, so its children will always render in the same place regardless of where you use it.
+HeadingAction is a slot, so its children will always render in the same place regardless of where you use it.
 </AlertBanner>
 
 <SectionsHeadingActionsExample />

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

@@ -1,43 +1,26 @@
 import styled from 'styled-components'
-import { Playground } from 'storybook-addon-jarle-monaco'
-import { Margin, Surface, Text } from '@foundations'
+
+import { Surface } from '@foundations'
+import { CardPlayground } from '@stories'
+
 import { leftRightLayoutGenerator } from 'components/layout'
 import { Body, Heading3 } from 'components/typography'
-import { Divider } from 'components/divider'
-import { Card } from '../card'
-import { LeftRightCard } from '../molecules/left-right-card'
 import { InputField } from 'components/input-field'
 
-const CardPlayground = styled(Playground)`
-  background: ${Surface.Neutral.Default};
-
-  margin-bottom: ${Margin.xxl};
-
-  > div:nth-of-type(2) {
-    background: ${Surface.Default.Inverse}; // Surface.Inverse
-    color: ${Text.OnPrimary};
-  }
-`
-
-const Bar = styled(Divider)`
-  margin-bottom: ${Margin.l};
-  margin-top: ${Margin.l};
-`
+import { Card } from '../card'
+import { LeftRightCard } from '../molecules/left-right-card'
 
 export const CardExample = () => (
   <CardPlayground
     code={`
 <Card heading='Heading'>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-<Bar />
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 </Card>
     `}
     providerProps={{
       renderAsComponent: true,
       scope: {
         Card,
-        Bar,
       },
     }}
   />

package/src/lib/components/checkbox/checkbox.tsx

@@ -1,124 +1,63 @@
-import { InputHTMLAttributes, useState } from 'react'
-import styled, { css } from 'styled-components'
-import { Surface, Borders, Margin, Padding, Interactive, Actions, Focused } from '@foundations'
-import { FC, is, isDefined } from '@helpers'
+import { InputHTMLAttributes } from 'react'
+import styled from 'styled-components'
+import { Margin, Padding, Focused } from '@foundations'
+import { FC, is } from '@helpers'
 import {
-  getHoverStyles,
   getDisabledStyles,
   getInvalidStyles,
-  getTabIndexValue,
-  getCheckedIcon,
-  HiddenCheckbox,
-  Icon,
-  Wrapper,
-} from './components/components'
+  getDefaultStyles,
+} from './helpers'
 
-const CustomizedCheckbox = styled.div<{
-  checked: boolean;
-  disabled: boolean;
-  error: boolean;
-}>`
-  display: inline-block;
+const CustomizedCheckbox = styled.input<{ error?: boolean }>`
+  appearance: none;
+  position: relative;
+  box-sizing: content-box;
   width: 18px;
   height: 18px;
   margin: ${Margin.none};
   padding: ${Padding.none};
   border-radius: 4px;
+  user-select: none;
+  vertical-align: bottom;
+  display: inline-block;
 
-  ${props => is(props.checked)
-    ? css`
-        background: ${Interactive.Default.Default};
-        border: 2px solid ${Interactive.Default.Default};
-        &:hover {
-          background: ${Actions.Primary.Pressed};
-          border: 2px solid ${Interactive.Default.Hover};
-        }
-      `
-    : css`
-        background: ${Surface.Default.Default};
-        border: 2px solid ${Interactive.Default.Disabled};
-        &:hover {
-          ${getHoverStyles}
-        }
-      `
-  }
-
-  ${props => is(props.disabled) ? getDisabledStyles() : ''}
-  ${props => is(props.error)
-    ? css`
-        ${getInvalidStyles()}
-        &:hover {
-          background: ${({ checked }) => (is(checked)
-            ? `${Actions.Critical.Pressed}`
-            : `${Surface.Default.Default}`
-          )};
-          border: 2px solid ${Borders.Critical.Default};
-        }
-        ${HiddenCheckbox}:invalid {
-          ${getInvalidStyles()}
-        }
-      `
-    : ''
-  }
+  ${({ disabled, error }) => {
+    if (is(disabled)) {
+      return getDisabledStyles()
+    } else if (is(error)) {
+      return getInvalidStyles()
+    } else {
+      return getDefaultStyles()
+    }
+  }}
 
-  ${HiddenCheckbox}:focus + &  {
+  :focus-visible {
     outline: 2px solid ${Focused.Default};
     outline-offset: 1px;
   }
-  ${Icon} {
-    visibility: ${(props) => (is(props.checked) ? 'visible' : 'hidden')};
-  }
 `
 
 export interface ICheckboxProps {
-  disabled?: boolean;
-  checked?: boolean;
-  error?: boolean;
-  className?: string;
-  onChange?: (value: boolean) => void;
+  disabled?: boolean
+  checked?: boolean
+  error?: boolean
+  className?: string
 }
 
 export type IProps = ICheckboxProps & InputHTMLAttributes<HTMLInputElement>
 
 export const Checkbox: FC<IProps> = (props: IProps) => {
   const {
-    className,
-    onChange,
-    disabled = false,
     error = false,
-    checked = false,
+    ...htmlProps
   } = props
-  const [isChecked, setIsChecked] = useState<boolean>(checked)
-  const handleOnChange = () => {
-    const newCheckedValue = !isChecked
-    setIsChecked(newCheckedValue)
-    if(isDefined(onChange)){
-      onChange(newCheckedValue)
-    }
-  }
 
   return (
-    <Wrapper
-      className={className}
-    >
-      <HiddenCheckbox
-        {...props}
-        tabIndex={getTabIndexValue(disabled)}
-        checked={isChecked}
-        disabled={disabled}
-        onChange={handleOnChange}
-        type='checkbox'
-      />
-      <CustomizedCheckbox
-        {...props}
-        data-testid='checkbox-id'
-        checked={isChecked}
-        disabled={disabled}
-        error={error}
-        onClick={handleOnChange}
-      >
-        {getCheckedIcon()}
-      </CustomizedCheckbox>
-    </Wrapper>
+    <CustomizedCheckbox
+      {...htmlProps}
+
+      type='checkbox'
+      error={error}
+    />
   )
 }