@edvisor/product-language 0.2.0 → 0.3.0

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

@@ -0,0 +1,100 @@
+import { css } from 'styled-components'
+import { Surface, Borders, Actions, Interactive, Icons } from '@foundations'
+import { Hex, isNil } from '@helpers'
+
+interface ICheckedProps {
+  checked?: boolean;
+}
+
+const WIDTH = 12
+const HEIGHT = 10
+
+/** no magic here, just copy/pasted the svg from the mockup 
+ * I had to tweak the width and height though
+*/
+const svg = `
+<svg xmlns='http://www.w3.org/2000/svg' width='${WIDTH}' height='${HEIGHT}' viewBox='0 0 10 8'>
+  <path d='M4.50846 7.37941C4.0689 7.81898 3.35108 7.81898 2.91151 7.37941L0.330581 4.79848C-0.110194 4.35892 -0.110194 3.64109 0.330581 3.20153C0.770146 2.76196 1.48797 2.76196 1.92753 3.20153L3.70999 4.98399L8.07338 0.620598C8.51294 0.181033 9.23076 0.181033 9.67033 0.620598C10.1099 1.06016 10.1099 1.77798 9.67033 2.21755L4.50846 7.37941Z' fill='white'/>
+</svg>
+`
+
+function getCheckMark () {
+  return css`
+    ::before {
+      position: absolute;
+      content: url("data:image/svg+xml,${svg}");
+      top: 3px;
+      left: 3px;
+    }
+  `
+}
+
+/** the reason I have this isNil to test
+ * whether `checked` was passes is this:
+ * 
+ * if the user passed "checked" then
+ * they expect the checked styles to be
+ * seen if and only if checked is true.
+ * In that case I don't add the :checked
+ * selector because the user doesn't want
+ * the styles to depend on the browser's
+ * idea of the state of the button.
+  */
+function getCheckedStyles (color: Hex) {
+  return css<{ checked?: boolean }>`
+    ${({ checked }) => isNil(checked) 
+      ? css`
+          :checked {
+            background: ${color};
+            border: 2px solid ${color};
+            ${getCheckMark()}
+          }
+        `
+      : checked
+      ? css`
+          background: ${color};
+          border: 2px solid ${color};
+          ${getCheckMark()}
+        `
+    : ''
+    }
+  `
+}
+
+export const getHoverStyles = () => css`
+  background: ${Surface.Default.Hover};
+
+  ${getCheckedStyles(Interactive.Default.Hover)}
+`
+
+export const getDisabledStyles = () => css`
+  pointer-events: none;
+  background: ${(props: ICheckedProps) =>
+    props.checked === true
+      ? `${Borders.Default.Default}`
+      : `${Surface.Default.Subdued}`};
+  border: 2px solid ${Borders.Default.Default};
+
+  ${getCheckedStyles(Icons.Disabled)}
+`
+
+export const getDefaultStyles = () => css`
+  background: ${Surface.Default.Default};
+  border: 2px solid ${Interactive.Default.Disabled};
+
+  ${getCheckedStyles(Interactive.Default.Default)}
+
+  :hover {
+    ${getHoverStyles}
+  }
+`
+
+export const getInvalidStyles = () => css`
+  background: ${(props: ICheckedProps) =>
+    props.checked === true
+      ? `${Actions.Critical.Default}`
+      : `${Surface.Critical.Subdued}`};
+  border: 2px solid ${Borders.Critical.Default};
+
+  ${getCheckedStyles(Icons.Critical)}
+`

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

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Checkbox } from '../index'
-import { PlainHTMLFormExample } from './index'
+import { Checkbox } from '../checkbox'
+import { IntegratedExample, CheckboxExample, LimitationsExample } from './components'
 
 <Meta
   title="Components/Checkbox"
@@ -9,46 +9,49 @@ import { PlainHTMLFormExample } from './index'
 
 # Checkbox
 
-This is an atom.
+Checkboxes are most commonly used to give users a way to make a range of selections (zero, one, or multiple). They may also be used as a way to have users indicate they agree to specific terms and services.
 
 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
+```tsx
 import { Checkbox } from './index'
 
-
-// Render the component sending the required parameters
 <Checkbox />
 ```
 
-## Examples
+### Typical Usage
 
-<Canvas>
-  <Checkbox onChange={(e) => console.log('at stories', e)} />
-  <Checkbox disabled />
-  <Checkbox error />
-  <Checkbox checked />
-  <Checkbox error checked />
-</Canvas>
+Checkbox is "drop-in" compatible with an html input checkbox.
 
+<IntegratedExample />
 
-## API
+### Modifiers
 
-| Name | Type | Description | Required (Y/N)|
-| ---- | ----- | ------ | ------- |
-| `checked` | `boolean` | `Set checkbox as filled` | `N` |
-| `disabled` | `boolean` | `Set checkbox as a disabled way (can't click or interact with that)` | `N` |
-| `error` | `boolean` | `Useful to work inside a form or show some feedback from user action` | `N` |
-| `onChange` | `event` | `You can listen the changes from the component` | `N` |
+Control the appearance of the checkbox with its modifiers.
 
+<CheckboxExample />
+
+## API
 
-## Playground
+Extends `HTMLAttributes<HTMLInputElement>`
 
-<PlainHTMLFormExample />
+| Name        | Type      | Description                                                         |
+| ----------- | --------- | ------------------------------------------------------------------- |
+| `checked?`  | `boolean` | Set checkbox as filled                                              |
+| `disabled?` | `boolean` | Set checkbox as a disabled way (can't click or interact with that)  |
+| `error?`    | `boolean` | Useful to work inside a form or show some feedback from user action |
+| `onChange?` | `event`   | You can listen the changes from the component                       |
 
 ## Changelog
+
+### [0.1.0]
+ - replace the checkbox implementation with an input type=checkbox styled to look like what we need
+
+### [0.0.1]
+ - update checkbox to behave more like html input with type='checkbox'
+
+### [0.0.0]
  - Offer the "indeterminate" style
  - Get feedback from the component usage (we can migrate to just rendering with css pseudo elements if necessary)

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

@@ -1,35 +1,83 @@
+import { Margin, } from '@foundations'
+import { If } from '@helpers'
+import { Button } from 'components/molecules/button'
+import { Caption, Label } from 'components/typography'
 import { Playground } from 'storybook-addon-jarle-monaco'
-import { Checkbox } from '../checkbox'
+import styled from 'styled-components'
+import { Checkbox as Base } from '../checkbox'
 
-export const PlainHTMLFormExample = () => (
+const Checkbox = styled(Base)`
+  display: inline-block;
+`
+
+export const CheckboxExample = () => (
+  <Playground
+    code={`
+<>
+  <Checkbox />
+  <Checkbox checked readOnly />
+  <Checkbox disabled />
+  <Checkbox checked disabled readOnly />
+  <Checkbox error />
+  <Checkbox checked error readOnly />
+</>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Checkbox,
+      },
+    }}
+  />
+)
+
+const Fields = styled.div`
+  margin-bottom: ${Margin.s};
+`
+
+export const IntegratedExample = () => (
   <Playground
     code={`
 /* Edit this code sample! */
 const [withError, setWithError] = useState(false);
+const [accepted, setAccepted] = useState(false);
 
 <form onSubmit={(e) => {
     e.preventDefault()
-    console.log('form submitted')
   }}
 >
-  <label htmlFor="accept_terms">Accept the terms:</label>
-  <Checkbox
-    onInvalid={(e) => {
-      setWithError(true)
-    }}
-    error={withError}
-    onChange={(e) => {
-      console.log('at stories', e)
-      setWithError(false)
-    }}
-    required />
-  <input type="submit"/>
+  <Fields>
+    {/* try replacing Checkbox with input */}
+    <Checkbox
+      id="accept_terms"
+      type="checkbox"
+      checked={accepted}
+      onInvalid={(e) => {
+        setWithError(true)
+      }}
+      error={withError}
+      onChange={(e) => {
+        setAccepted(!accepted)
+        setWithError(false)
+      }}
+      required 
+    />
+    <label htmlFor="accept_terms"><Label as='span'>I accept these terms.</Label></label>
+    <If is={accepted}><Caption subdued>You have accepted the terms.</Caption></If>
+  </Fields>
+  <Button type='button' onClick={() => setAccepted(false)}>Clear</Button>
+  <Button primary type="submit">Submit</Button>
 </form>
     `}
     providerProps={{
       renderAsComponent: true,
       scope: {
         Checkbox,
+        Caption,
+        Button,
+        If,
+        Label,
+        Fields,
       },
     }}
   />

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

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Meta } from '@storybook/addon-docs';
 import { Divider } from '../index'
 import { WrapperStories, AvatarsWithText, AvatarsWithImage, WrapperStoriesWithLabel } from './components'
 
@@ -29,22 +29,16 @@ import { Divider } from './index'
 ## Examples
 
 Default Divider
-
 <Canvas>
-  <Story name="default">
-    <WrapperStories>
-      <Divider default/>
-    </WrapperStories>
-  </Story>
+  <WrapperStories>
+    <Divider default/>
+  </WrapperStories>
 </Canvas>
 
 Subdued Divider
-
 <Canvas>
-  <Story name="subdued">
-    <WrapperStories>
-      <Divider subdued/>
-    </WrapperStories>
-  </Story>
+  <WrapperStories>
+    <Divider subdued/>
+  </WrapperStories>
 </Canvas>
 

package/src/lib/components/flag/flag-size-flags.tsx

@@ -0,0 +1,55 @@
+import { bitwiseOr, MappedEnum, RequireOnlyOne, PropsWithChildren } from '@helpers'
+
+export const enum FlagSize {
+  small = 1,
+  medium = 2,
+  large = 4,
+}
+
+type FlagSizes<T> = MappedEnum<typeof FlagSize, T>
+
+function toFlag(n: number): FlagSize {
+  switch (n) {
+    case FlagSize.small:
+      return FlagSize.small
+    case FlagSize.medium:
+      return FlagSize.medium
+    case FlagSize.large:
+      return FlagSize.large
+    default:
+      return FlagSize.medium
+  }
+}
+
+const FlagWidthValues = {
+  [FlagSize.small]: '20',
+  [FlagSize.medium]: '20',
+  [FlagSize.large]: '32',
+}
+
+const FlagHeightValues = {
+  [FlagSize.small]: '20',
+  [FlagSize.medium]: '20',
+  [FlagSize.large]: '24',
+}
+
+export type FlagProps = Partial<RequireOnlyOne<FlagSizes<boolean>>> &
+  PropsWithChildren
+
+export function getHeigthBySize(props: FlagProps): string {
+  return FlagHeightValues[
+    getFlagSize(props)
+  ]
+}
+
+export function getWidthBySize(props: FlagProps): string {
+  return FlagWidthValues[
+    getFlagSize(props)
+  ]
+}
+
+export function getFlagSize(props: FlagProps) {
+  return toFlag(
+    bitwiseOr([props.small, props.medium, props.large])
+  )
+}