Merge pull request #160 from dnbexperience/develop

make better component export
dnbexperience · Apr 9, 2019 · c3d6303 · c3d6303
2 parents ba4dfa8 + 70f9f2f
commit c3d6303
Show file tree

Hide file tree

Showing 60 changed files with 927 additions and 125 deletions.
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage.md b/packages/dnb-design-system-portal/src/pages/uilib/usage.md
@@ -5,13 +5,23 @@ draft: false
 order: 3
 ---
 
+<!-- import ReleasesInfo from 'Pages/design-system/changelog/info-about-releases' -->
+
+import WatchingReleases from 'Pages/uilib/info/about-watching-releases.md'
+
 # Usage
 
 **Get started using the DNB user interface library**
 
-The UI Library HTML elements are isolated, ready-to-use elements. They are self-supporting, and will use the styles they need to display.
+The UI Library HTML Elements and UI Components are isolated, ready-to-use elements. They are self-supporting, and will use the styles they need to display.
+
+- **HTML Elements** are styled HTML tags
+- **UI Components** are styled and custom build HTML elements
+- **UI Patterns** are a way to demonstrate how a set of components and elements could work together
+
+You can use any of the HTML Elements and UI Components as demonstrated in the documentation with a variety of customization properties.
 
-You can use any of the HTML Elements as demonstrated in the documentation. Please refer to the demo pages to see [how they should be used](/uilib/components).
+<WatchingReleases />
 
 ## Installation
 
@@ -22,7 +32,7 @@ _NB!_ [React](https://www.npmjs.com/package/react) and [React-dom](https://www.n
 ```bash
 # at time of writing, React version 16 was used
 # so consider to run react@16 and react-dom@16
-$ yarn add dnb-ui-lib react react-dom
+$ npm i dnb-ui-lib react react-dom
 ```
 
 Read more in the [First Steps](/uilib/usage/first-steps/) section.

diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage/first-steps.md b/packages/dnb-design-system-portal/src/pages/uilib/usage/first-steps.md
@@ -4,6 +4,9 @@ draft: false
 order: 2
 ---
 
+import GithubLogo from 'Pages/uilib/development/assets/github-logo.js'
+import { Icon } from 'dnb-ui-lib/src'
+
 # First Steps
 
 ## Installation
@@ -12,7 +15,7 @@ Check out the `dnb-ui-lib` **[Installation documentation](/uilib/usage/#installa
 
 ## Working Examples
 
-You can find some more detailed and running examples under `REPOSITORY/packages/examples/...`.
+You can find some more detailed and running examples under [<Icon icon={GithubLogo} size="default" /> REPOSITORY/packages/examples/...](https://github.com/dnbexperience/eufemia/tree/develop/packages/examples)
 
 ## Be continued
 

diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage/first-steps/the-basics.md b/packages/dnb-design-system-portal/src/pages/uilib/usage/first-steps/the-basics.md
@@ -22,12 +22,32 @@ There are three things going on once an HTML element is displayed and up-and-run
 - styling by CSS
 - internal states by JavaScript
 
-From here we can redefine the properties of the HTML elements in order to customise them.
+From here we can redefine the properties of the HTML elements in order to customize them.
 We can also bind event listeners to work together with your application.
 
+### Pixel Perfect
+
+One of the most important reasons why Eufemia exists, is to make it more easy to get a pixel perfect result on developing WEB Applications.
+
+Therefore, You come a long way on using the `dnb-ui-lib` correctly:
+
+- Make You use [import the style packages correctly](/uilib/usage/customisation/styling) (with or without CSS reset depending on Your legacy code situation)
+- Always (mostly) use `rem` to the nearest "8px" value, like **1px = 0.0625rem** (1/16)
+- Always use the [HTML Elements](/uilib/elements) or [UI Components](/uilib/components)
+- There are more [useful tips on styling](/uilib/usage/best-practices/for-styling)
+
+**Make sure You test Your Layout and Styles for various conditions during and after development:**
+
+- Up two 3x times in **font-size** (change the Web Browser default font size)
+- **Zoom** the Web Browser up to 3x times
+- Make Your layout **responsive**, either with CSS Grid or Media Queries and,
+- Check the different screen sizes
+- Test Your App on different devices and operating systems
+- Pixel perfection is good for many, for the rest, make everything [accessible for everyone](/uilib/usage/accessibility)
+
 ## States
 
-All the HTML elements have individual interaction states. The look and feel is defined in the default [theming file](/uilib/usage/customisation/theming) (**theme-ui**).
+All the UI Components (and some HTML Elements) have individual interaction states. The look and feel is defined in the default [theming file](/uilib/usage/customisation/theming) (**theme-ui**).
 
 - hover
 - active (TouchStart)

diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage/layout.md b/packages/dnb-design-system-portal/src/pages/uilib/usage/layout.md
@@ -31,9 +31,9 @@ If You are working together with an DNB UX Designer, You can decide freely what
 
 ### Media Queries and Breakpoints
 
-- `small`: 40em
-- `medium`: 50em
-- `large`: 60em
-- `x-large`: 90em (is the default max-width of 1440px)
+- `40em` **small**
+- `50em` **medium**
+- `60em` **large**
+- `90em` **x-large** (is the default max-width of 1440px)
 
 Use `em` for media query sizing for best overall browser support. Read [more abouts units](/uilib/usage/best-practices/for-styling#units)
diff --git a/packages/dnb-design-system-portal/src/shared/menu/MainMenu.js b/packages/dnb-design-system-portal/src/shared/menu/MainMenu.js
@@ -19,7 +19,8 @@ import {
   DesignSystemSvg
 } from './MainMenuGraphics'
 import { Logo, Button } from 'dnb-ui-lib/src'
-import { buildVersion } from '../../../package.json'
+// import { buildVersion } from '../../../package.json'
+import { version as buildVersion } from '../../../version.json'
 import { MainMenuContext } from './MainMenuContext'
 import {
   setPageFocusElement,

diff --git a/packages/dnb-design-system-portal/src/shared/parts/Link.js b/packages/dnb-design-system-portal/src/shared/parts/Link.js
@@ -5,6 +5,7 @@
 
 import { Link as GatsbyLink } from 'gatsby'
 import React from 'react'
+import PropTypes from 'prop-types'
 import isAbsoluteUrl from 'is-absolute-url'
 
 /* eslint-disable jsx-a11y/anchor-has-content */
@@ -14,5 +15,8 @@ const Link = ({ to, ...props }) =>
   ) : (
     <GatsbyLink to={to} {...props} />
   )
+Link.propTypes = {
+  to: PropTypes.string.isRequired
+}
 
 export default Link
diff --git a/packages/dnb-design-system-portal/src/shared/tags/Anchor.js b/packages/dnb-design-system-portal/src/shared/tags/Anchor.js
@@ -21,6 +21,9 @@ const Anchor = ({ children, className, href, ...rest }) => {
       </AnchorLink>
     )
   }
+  if (/^http/.test(href)) {
+    rest.target = '_blank'
+  }
   return (
     <a
       href={href}

diff --git a/packages/dnb-ui-lib/babel.config.js b/packages/dnb-ui-lib/babel.config.js
@@ -27,7 +27,8 @@ const production = {
     ],
     '@babel/plugin-proposal-export-default-from',
     '@babel/plugin-proposal-object-rest-spread',
-    '@babel/plugin-proposal-class-properties'
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-transform-runtime'
   ]
 }
 

diff --git a/packages/dnb-ui-lib/package.json b/packages/dnb-ui-lib/package.json
@@ -93,6 +93,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-object-assign": "^7.2.0",
     "@babel/plugin-transform-react-constant-elements": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.4.3",
     "@babel/preset-env": "^7.4.3",
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.4.0",

diff --git a/packages/dnb-ui-lib/scripts/figma/version.lock b/packages/dnb-ui-lib/scripts/figma/version.lock
@@ -1 +1 @@
-{"1a3caba565dddc0a936aaddc29a82887":"120158649"}
+{"1a3caba565dddc0a936aaddc29a82887":"122017678"}
diff --git a/packages/dnb-ui-lib/scripts/prepub/dev.js b/packages/dnb-ui-lib/scripts/prepub/dev.js
@@ -15,8 +15,9 @@ import {
   // runStyleFactory,
   // convertSvgToJsx,
   // makeLibStyles
-  makeLibModules,
-  makeMainUMDBundle
+  prepareTemplates
+  // makeLibModules,
+  // makeMainUMDBundle
 } from './index'
 
 const dev = async () => {
@@ -31,8 +32,9 @@ const dev = async () => {
   // await runStyleFactory()
   // await convertSvgToJsx({ preventDelete })
   // await makeLibStyles()
-  await makeLibModules()
-  await makeMainUMDBundle()
+  await prepareTemplates()
+  // await makeLibModules()
+  // await makeMainUMDBundle()
 
   log.succeed('Nice')
   return true

diff --git a/packages/dnb-ui-lib/scripts/prepub/index.js b/packages/dnb-ui-lib/scripts/prepub/index.js
@@ -6,12 +6,17 @@
  *
  */
 
-// process.env.ROOT_DIR = `${__dirname}/../../`
 process.env.ROOT_DIR = require('packpath').self()
 
 import { ErrorHandler, log } from '../lib'
 import del from 'del'
 
+/**
+ * The Templates (prepareTemplates) generation is special in the sense
+ * That it has to be run locally to generate the files statily
+ * so we can commit them as as core part.
+ * The rest is only generated during the package build
+ */
 import { prepareTemplates } from './tasks/prepareTemplates'
 import { runStyleFactory } from './tasks/styleFactory'
 import { runThemeFactory } from './tasks/themeFactory'
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"1a3caba565dddc0a936aaddc29a82887":"120158649"}
		{"1a3caba565dddc0a936aaddc29a82887":"122017678"}