.storybook/config.js

 import React from 'react'
 import { configure, addDecorator } from '@storybook/react'
-import { Center, GlobalFonts, BodyStyles, LingualaTheme } from '../src/lib'
+import { withInfo } from '@storybook/addon-info'
+import centered from '@storybook/addon-centered/react'
+
+import { GlobalFonts, BodyStyles, LingualaTheme } from '../src/lib'
 import { ThemeProvider } from 'styled-components'
 import pkg from '../package.json'
 import stories from '../src/stories/index.js'
 
-const CenterDecorator = storyFn => <Center full>{storyFn()}</Center>
-
-addDecorator(CenterDecorator)
+addDecorator(centered)
 
 const GlobalStyleDecorator = storyFn => (
   <div>
@@ -26,6 +27,8 @@ const ThemeDecorator = storyFn => (
 
 addDecorator(ThemeDecorator)
 
+addDecorator(withInfo)
+
 console.info(`based on ${pkg.name}: ${pkg.version}`)
 
 configure(() => {

CHANGELOG.md

@@ -7,11 +7,65 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
-- ui-atoms@0.21.0
-- ui-molecules@0.1.1
+## [1.3.1 - 2020-01-08]
 
-## [1.0.0] - 2019-10-23
+### Changed
+
+- [theming] set font size on root(html) element
+- [node] fix circular imports in ProfileBubble
+
+## [1.3.0 - 2019-12-19]
+
+### Added
+
+- [npm] add @storybook/addon-info
+- [npm] add @storybook/addon-centered
+
+### Changed
+
+- [npm] update @linguala/common-dev-dependencies
+- [jest] ignore css files
+- [storybook] replace custom centerDecorator with @storybook/addon-centered
+- [theming]
+  Added default font color defaultText to theme
+  add fontSizes and spacings to theme
+  refactor components to use theme vlues for font-size, padding and margin
+  corrected bodystyles
+
+## [1.2.1] - 2019-12-03
+
+### Changed
+
+- [Form]: allow passing of props
+- [rollup]: fix minified bundle
+
+## [1.2.0] - 2019-11-21
+
+### Added
+
+- Added LICENSE file
+- [Organism] ProfileBubble
+
+### Changed
+
+- [Atom] Bubble: stretch aligned items
+- [Atom] Shapes: allow style override on Lens & PinShape
+- [Molecule] FiveStarRating: add size parameter, initialize with 1
+
+## [1.1.0] - 2019-11-19
+
+### Added
+
+- [Molecule] FiveStar
+
+### Changed
+
+- Moved Components into atoms/, molecules/ & organisms/
+- fixed naming of stories to reflect categories
+
+## [1.0.0] - 2019-11-19
 
 ### Added
 
-TBD
+- Migrated Components from ui-atoms@0.21.0
+- Migrated Components from ui-molecules@0.1.1

CONTRIBUTING.md

@@ -8,10 +8,12 @@ In order to let others know who changed what, set up git properly.
 
 ### set user email & your name
 
-> note: don't use `<` or `>` in your email..
-> `git config user.email "<your.name>@linguala.com"`
-> note: don't use `<` or `>` for your Name
-> `git config user.name "<your full name>"`
+> note: `<` or `>` are placeholders, so insert your email and name instead
+
+
+`git config user.email "<your.name>@linguala.com"`
+
+`git config user.name "<your full name>"`
 
 ### changes in source code
 

LICENSE

+ISC License
+
+Copyright (c) 2019 linguala
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

README.md

@@ -2,6 +2,10 @@
 
 All public linguala components that can be published on npm
 
+## playground
+
+[![Edit angry-hofstadter-1iojy](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/angry-hofstadter-1iojy?fontsize=14)
+
 ## develop
 
 ### requirements

config/rollup.config.js

@@ -74,7 +74,7 @@ export default [
     }),
     globals(),
     replace({ 'process.env.NODE_ENV': JSON.stringify('development') }),
-    process.env.NODE_ENV === 'production' && _uglify(output.format),
+    process.env.NODE_ENV === 'production' && _uglify(output.format)(),
     process.env.NODE_ENV === 'ci' && analyze(),
   ],
 }))

package.json

 {
   "name": "@linguala/ui-components",
-  "version": "1.0.0-alpha.0",
+  "version": "1.3.1",
   "main": "dist/ui-components.cjs.js",
   "module": "dist/ui-components.esm.js",
   "type": "module",
@@ -59,8 +59,10 @@
     "@babel/core": "^7.6.0",
     "@babel/preset-env": "^7.6.0",
     "@dump247/storybook-state": "=1.5.2",
-    "@linguala/common-dev-dependencies": "^1.4.0",
+    "@linguala/common-dev-dependencies": "^1.5.4",
     "@storybook/addon-a11y": "^5.2.3",
+    "@storybook/addon-centered": "^5.2.8",
+    "@storybook/addon-info": "^5.2.8",
     "@storybook/addon-storyshots": "^5.2.0",
     "@styled-system/theme-get": "^5.1.2",
     "@svgr/cli": "^4.3.2",
@@ -80,20 +82,20 @@
     "react-dom": "^16.9.0",
     "react-scripts": "^3.1.1",
     "react-test-renderer": "^16.9.0",
-    "rollup": "^1.21.4",
-    "rollup-plugin-analyzer": "^3.2.1",
+    "rollup": "^1.27.8",
+    "rollup-plugin-analyzer": "^3.2.2",
     "rollup-plugin-buble": "^0.19.8",
     "rollup-plugin-commonjs": "^9.3.4",
     "rollup-plugin-img": "^1.1.0",
     "rollup-plugin-node-globals": "^1.4.0",
-    "rollup-plugin-node-resolve": "^4.2.3",
+    "rollup-plugin-node-resolve": "^4.2.4",
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-terser": "^5.1.2",
     "rollup-plugin-uglify": "^6.0.3",
-    "rollup-plugin-url": "^2.2.2",
+    "rollup-plugin-url": "^2.2.4",
     "styled-components": "^4.3.2"
   },
-  "description": "Component library for linguala atoms",
+  "description": "Component library for linguala",
   "directories": {
     "test": "tests"
   },
@@ -102,7 +104,7 @@
   ],
   "jest": {
     "moduleNameMapper": {
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css)$": "<rootDir>/__mocks__/fileMock.js"
     },
     "testEnvironment": "jsdom",
     "transform": {
@@ -121,13 +123,15 @@
   },
   "repository": {
     "type": "git",
-    "url": "ssh://git@gitlab.linguala.com:1022/linguala/ui-atoms.git"
+    "url": "https://gitlab.linguala.com/linguala/ui-components.git"
   },
   "keywords": [
     "linguala",
     "react",
     "components",
-    "molecules"
+    "organisms",
+    "molecules",
+    "atoms"
   ],
   "author": "Linguala <support@linguala.com>",
   "license": "ISC"

src/lib/assets/colors/index.js

@@ -4,14 +4,16 @@ const grey = '#9B9B9B'
 const red = '#BB2D00'
 const green10 = '#e8f7f0'
 const blue10 = '#ecf3fc'
+const darkgrey = '#5A719A'
 
-export { green, blue, grey, red, blue10, green10 }
+export { blue, blue10, green, green10, grey, red, darkgrey }
 
 export default {
-  green,
   blue,
+  blue10,
+  green,
   grey,
   red,
-  blue10,
   green10,
+  darkgrey,
 }

src/lib/components/Button.js → src/lib/components/atoms/Button.js

@@ -3,8 +3,8 @@ import styled, { css } from 'styled-components'
 import themeGet from '@styled-system/theme-get'
 import PropTypes from 'prop-types'
 
-import buttonShape from '../styles/buttonShape'
-import { unit, unitLength } from '../utils/unit'
+import buttonShape from '../../styles/buttonShape'
+import { unit } from '../../utils/unit'
 
 import Colorable from './Colorable'
 
@@ -18,15 +18,15 @@ const onActiveScale = css`
   }
 `
 
-const fontSize = unitLength(0.5, 'rem')
-
 const StyledColorableShape = styled(Colorable)`
-  font-size: ${({ size }) => (size ? fontSize((size + 1) / 2) : '1em')};
-  padding: 0.5em;
+  font-size: ${themeGet('fontSizes.p')};
+  padding: ${themeGet('spacing.small')};
+  margin: ${themeGet('spacing.small')};
   line-height: 1.5em;
   box-shadow: none;
   user-select: none;
-  min-height: ${unit(2)};
+  // BUG-TODO: Make sure text cannot be cropped
+  min-height: 2.5em;
   height: ${({ size, height }) => (!height ? unit(size || 1) : height)};
   transition: transform 0.2s ${themeGet('transitions.main')};
   text-transform: lowercase;

src/lib/components/Form.js → src/lib/components/atoms/Form.js

 import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
+import styled from 'styled-components'
 
 import FormContext from './FormContext.js'
 
-function Form(props) {
+const StyledForm = styled.form`
+  width: 100%;
+`
+
+const Form = props => {
   const [state, setState] = useState(props.initFormState)
 
   useEffect(() => {
     if (props.handleFormChange) {
       props.handleFormChange(state)
     }
-    // console.info('STATE', JSON.stringify(state))
   })
   const setFormState = newState => {
     setState(prevState => {
@@ -26,13 +30,11 @@ function Form(props) {
   }
 
   return (
-    <React.Fragment>
-      <form onSubmit={handleFormSubmit}>
-        <FormContext.Provider value={[state, setFormState]}>
-          {props.children}
-        </FormContext.Provider>
-      </form>
-    </React.Fragment>
+    <StyledForm onSubmit={handleFormSubmit} {...props}>
+      <FormContext.Provider value={[state, setFormState]}>
+        {props.children}
+      </FormContext.Provider>
+    </StyledForm>
   )
 }
 

src/lib/components/FormWrapper.js → src/lib/components/atoms/FormWrapper.js

 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
 
-import FormContext from '../components/FormContext'
+import FormContext from './FormContext'
 
 function FormWrapper(props) {
   const [getFormState, setFormState] = useContext(FormContext)

src/lib/components/Icon.js → src/lib/components/atoms/Icon.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import themeGet from '@styled-system/theme-get'
 
-import { unit } from '../utils'
+import { unit } from '../../utils'
 
 const StyledIcon = styled.div`
 ${props => (props.rotate ? `transform: rotate(${props.rotate}deg);` : null)}