Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

release doc updates #92

Merged
merged 43 commits into from
Feb 15, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
43 commits
Select commit Hold shift + click to select a range
0a7a38f
fix code preview issue
tujoworker Feb 13, 2019
abc6cbc
Portal: use more safe "first-of-type" on toggle grid
tujoworker Feb 13, 2019
67ce50d
feat: make tables styles ux design compliant + add screenshot test
tujoworker Feb 13, 2019
2b03ec7
extend page width of screenshot tests to make it v2 of puppeteer comp…
tujoworker Feb 13, 2019
9a659f5
some files where updated/added | version.lock [CI SKIP]
tujoworker Feb 13, 2019
60b2f71
feat: update anchor hover state regarding to ux team decisions
tujoworker Feb 13, 2019
5b9af24
make screenshots more precise
tujoworker Feb 13, 2019
a6a2019
avoid flickering on hover due to the recently changes of anchor hover…
tujoworker Feb 13, 2019
4bb98b8
some reports where updated/added | jest-screenshot-report.tgz [CI SKIP]
tujoworker Feb 13, 2019
aa9d77d
try to get a more similar look for linux/mac/win by using Arial
tujoworker Feb 13, 2019
25cad9c
lower the fail ratio on ci to 5%
tujoworker Feb 13, 2019
695c2f5
lower the rate to 3%
tujoworker Feb 13, 2019
0edbb6a
and try 1%
tujoworker Feb 13, 2019
e2e037b
ci screenshot testing: block fonts from the very start
tujoworker Feb 14, 2019
dc46387
optimize ci config
tujoworker Feb 14, 2019
d6dd447
some reports where updated/added | jest-screenshot-report.tgz [CI SKIP]
tujoworker Feb 14, 2019
400d411
run ci on every pull request
tujoworker Feb 14, 2019
d57847a
always run build
tujoworker Feb 14, 2019
a2462ba
Merge pull request #90 from dnbexperience/rc/dev
tujoworker Feb 14, 2019
5ed4543
improvements on docs for styling and layout
tujoworker Feb 14, 2019
c40509f
docs update due to HTML Elements
tujoworker Feb 14, 2019
8f3ce5c
feat: add also new class for anchor styling `.dnb-anchor`
tujoworker Feb 14, 2019
b12b9d6
some files where updated/added | version.lock [CI SKIP]
tujoworker Feb 14, 2019
58f4cdd
Hide Portal Grid Toggle button on fullscreen
tujoworker Feb 14, 2019
cc72c49
fix: make icon auto sizing work properly
tujoworker Feb 14, 2019
9a1c80e
add more docs regarding icon/svg usage
tujoworker Feb 14, 2019
fa82756
set width and height on svg
tujoworker Feb 14, 2019
015093c
some files where updated/added | version.lock [CI SKIP]
tujoworker Feb 14, 2019
6b46fba
some reports where updated/added | jest-screenshot-report.tgz [CI SKIP]
tujoworker Feb 14, 2019
8b291c4
some reports where updated/added | jest-screenshot-report.tgz [CI SKIP]
tujoworker Feb 14, 2019
0928759
try ci image without yarn
tujoworker Feb 14, 2019
62e3629
fix failing snapshots
tujoworker Feb 14, 2019
09c214e
add yarn install back again on CI
tujoworker Feb 14, 2019
1579c14
some reports where updated/added | jest-screenshot-report.tgz [CI SKIP]
tujoworker Feb 14, 2019
c6ab474
update dependencies and reconfig babel
tujoworker Feb 15, 2019
e662c9b
small styling cleanup on "code" html element
tujoworker Feb 15, 2019
e72e847
feat: make #icon sizing more robust
tujoworker Feb 15, 2019
7b73a35
make ci reports unique
tujoworker Feb 15, 2019
6a9e22b
remove report
tujoworker Feb 15, 2019
bcfbc28
fix cjs issue
tujoworker Feb 15, 2019
184954d
Merge pull request #91 from dnbexperience/rc/explicit-size
tujoworker Feb 15, 2019
457ab6c
feat: some files where updated/added | bell.svg, check_alt_01.svg, ex…
tujoworker Feb 15, 2019
ad0ca4e
update snapshot for #form-status regarding icon changes
tujoworker Feb 15, 2019
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions .drone.yml
Original file line number Diff line number Diff line change
Expand Up @@ -82,9 +82,6 @@ steps:
when:
event:
- pull-request
branch:
exclude:
- wip/*

- name: deploy-release
image: tujoworker/docker-node-puppeteer
Expand Down
9 changes: 9 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
**February, 14. 2019**

## Changes to the default styles

- Anchor (Text Link): Removed underline on hover and active states
- Tables (the default once) has now always a border line on the bottom

---

**January 2019**

## Changes to the default styles
Expand Down
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1 +1 @@
Read more on [how to contribute](https://eufemia.dnb.no/uilib/development).
Read more on [how to contribute](https://eufemia.dnb.no/uilib/development)
2 changes: 1 addition & 1 deletion packages/dnb-design-system-portal/gatsby-node.js
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
node,
value:
node.frontmatter.title ||
parent.name.replace(/^[a-z]/, parent.name[0].toUpperCase()) ||
// parent.name.replace(/^[a-z]/, parent.name[0].toUpperCase()) ||
null
})

Expand Down
16 changes: 8 additions & 8 deletions packages/dnb-design-system-portal/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"make-ui-lib-pages": "babel-node ./scripts/uilib/makeDemosFactory.js && yarn prettier:components",
"make-ui-lib-pages:dev": "nodemon --exec 'yarn make-ui-lib-pages' --ext js --watch '../dnb-ui-lib/src/**/*' --watch '**/makeDemosFactory.js' --watch '**/tasks/*' --watch '**/Template.js' --watch '**/template.md'",
"reset": "cd ../../ && yarn reset && cd - && yarn build",
"serve": "live-server public --watch --no-browser --port=8001",
"serve": "live-server public --watch --no-browser --port=8000",
"start": "rm -rf .cache; rm -rf ./public/**; cross-env DEBUG=gatsby:query-watcher gatsby develop",
"test": "jest --watch",
"test-ci": "jest --ci",
Expand All @@ -45,9 +45,9 @@
},
"dependencies": {
"dnb-ui-lib": "*",
"prop-types": "^15.7.1",
"react": "^16.8.1",
"react-dom": "^16.8.1"
"prop-types": "^15.7.2",
"react": "^16.8.2",
"react-dom": "^16.8.2"
},
"devDependencies": {
"@babel/core": "^7.2.2",
Expand All @@ -58,7 +58,7 @@
"@babel/plugin-syntax-jsx": "^7.2.0",
"@babel/preset-env": "^7.3.1",
"@babel/preset-react": "^7.0.0",
"@mdx-js/mdx": "0.17.0",
"@mdx-js/mdx": "0.17.3",
"@mdx-js/tag": "0.17.0",
"babel-plugin-emotion": "^10.0.7",
"camelcase": "^5.0.0",
Expand All @@ -78,7 +78,7 @@
"eslint-plugin-react": "^7.12.4",
"front-matter": "^3.0.1",
"fs-extra": "^7.0.1",
"gatsby": "^2.0.119",
"gatsby": "^2.1.2",
"gatsby-link": "^2.0.10",
"gatsby-mdx": "^0.3.6",
"gatsby-plugin-catch-links": "^2.0.11",
Expand All @@ -98,7 +98,7 @@
"jest-emotion": "^10.0.7",
"jest-raw-loader": "^1.0.1",
"keycode": "^2.2.0",
"lint-staged": "^8.1.3",
"lint-staged": "^8.1.4",
"live-server": "^1.2.1",
"mdx-component-autolink-header": "^0.0.1",
"mime": "^2.4.0",
Expand All @@ -114,7 +114,7 @@
"react-fake-props": "^0.3.1",
"react-helmet": "^5.2.0",
"react-live": "^1.12.0",
"react-live-replacement": "https://github.com/tujoworker/react-live/tarball/d9a44a8b8093a3cb57734d901200f7b66cd30515",
"react-live-replacement": "https://github.com/tujoworker/react-live/tarball/fcf128dd05719fcad5e99e9c2ab462ee01c91520",
"stylelint": "^9.10.1",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-processor-styled-components": "^1.5.2"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,30 @@ order: 2

## Slack Channel on [DNB IT](https://dnb-it.slack.com)

- `# eufemia-design-system`
- `eufemia-design-system`

### Related channels

- `# figma`
- `# frontend`
- `# ux-design`
- `# experience-design`

## Designers
---

## People

### Administrators

- **Jens Thuland** ([email protected]_)

### Designers

- **Jens Thuland** (Figma, Lead DNB Digital Design)
- **Jens Thuland** (Figma, Web Design, )
- **Sindre Marken** (Figma, Typography)
- **Casper Brekke** (Figma, iOS Design)
- **Kevin Murphy** (Design System)

## Developers
### Developers

- **Tobias Høegh** (GitHub)
- **Tobias Høegh** (GitHub, dnb-ui-lib)
20 changes: 8 additions & 12 deletions packages/dnb-design-system-portal/src/pages/icons.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,17 @@ import IconNearestNeighbour from 'Pages/quickguide-designer/assets/icon-nearest-

At DNB we are currently using Streamline icons as our source for off-the-shelf vector icons.

Link: https://www.streamlineicons.com/
[Link to streamlineicons.com](https://www.streamlineicons.com/)

#### Using Icons
## Using Icons

The icons are in SVG format and are optimized for performance and to have the smallest footprint possible in the package build process.

The sources are located in the [assets folder](https://unpkg.com/dnb-ui-lib@latest/assets/icons/).

They also exists as [React Components](/uilib/components/icon) to be easily integrated, without need of an additional SVG file loader.

#### Color
## Color

The icons SVG format have to satisfy the requirement to colorize the CSS fill- and stoke colors by simply using the inherited color.

Expand All @@ -37,7 +37,7 @@ svg {
}
```

#### Sizing
## Sizing

Eufemia icons come in **two** sizes:

Expand All @@ -46,7 +46,7 @@ Eufemia icons come in **two** sizes:

The reason why there are two sizes, is mainly do to the SVG artifact, that the Icons, alongside with the strokes, will scale up, once we use them with a larger width and height.

##### Scalability in web
### Scalability in web

To ensure that the relative size of the SVG icons are scalable by the inherited CSS font size, do not explicitly specify the SVG, unless for older browsers like Internet Explorer.

Expand All @@ -60,7 +60,7 @@ svg {
}
```

#### Spacing
## Spacing

Icons should have a minimum area of 8px between them and their nearest neighbor.

Expand All @@ -73,10 +73,6 @@ Icons should have a minimum area of 8px between them and their nearest neighbor.
/>
</div>

#### Custom Icons
## Custom Icons

Streamline caters for pretty much all of Eufemia's icon needs. However, sometimes there is a need for a custom icon. In these cases please contact one of Eufemia's design leads.

```

```
[Streamline](https://www.streamlineicons.com/) caters for pretty much all of Eufemia's icon needs. However, sometimes there is a need for a custom icon. In these cases please contact one of Eufemia's [design leads](/design-system/contact).
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ The Primary Icons are included in the [UI Library](/uilib) and also shipped bund

Primary Icons can easily be included, for instance, in [Buttons](/uilib/components/button). They are integrated by using the `<IconPrimary />` [Icon Component](/uilib/components/icon-primary).

#### A list of all Primary Icons
## A list of all Primary Icons

Title in parentheses are the icon's variable name used in coding.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ The Secondary Icons can be extended infinitely.

**Technically:** The consequence is that they have to be [imported](/uilib/components/icon) where ever they have to be used.

#### A list of all Secondary Icons
## A list of all Secondary Icons

---

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ Simply to unify and to maintain consistency of the most commonly used HTML Eleme

This part of the Design System is dedicated to **application development**.

## License

The `dnb-ui-lib` is for internal DNB development only. Also, make sure You act within the [license](/license).

---

<WatchingReleases />
Expand Down

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import React from 'react'

export default props => (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
import React from 'react'

export default props => (
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
</svg>
)
14 changes: 10 additions & 4 deletions packages/dnb-design-system-portal/src/pages/uilib/elements.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ draft: false
order: 6
---

import OtherElements from 'Pages/uilib/elements/other'
import Anchor from 'Pages/uilib/elements/anchor'
import Blockquote from 'Pages/uilib/elements/blockquote'
import Textarea from 'Pages/uilib/elements/textarea'
Expand All @@ -15,20 +16,25 @@ import Lists from 'Pages/uilib/elements/lists'

## Description

The `dnb-ui-lib` contains a DNB styling for the most common used [HTML Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element), defined by the UX Team at DNB.
The `dnb-ui-lib` contains a DNB styling for the most common used [HTML Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element), defined by the UX Team at DNB. You may also have a look at [Typography](/uilib/typography)

## Overview

- [Anchor (Link)](#anchor)
- [Anchor (Text Link)](#anchor)
- [Blockquote](#blockquote)
- [Lists](#lists)
- [Tables](#tables)
- [Textarea](#textarea)

---
- [Select](#missing-html-elements)
- [Radio](#missing-html-elements)
- [Checkbox](#missing-html-elements)

<Anchor />
<Blockquote />
<Lists />
<Tables />
<Textarea />

---

<OtherElements />
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,18 @@ import CodeBlock from 'Tags/CodeBlock'

<CodeBlock reactLive hideCode>
{`
<ul data-dnb-test="anchor" className="dnb-unstyled-list">
<ul className="dnb-unstyled-list">
<li>
<a href="/" >Default Style</a>
<a data-dnb-test="anchor-default" href="/" >Default Style</a>
</li>
<li>
<a href="/" className="dnb-hover-style">Hover Style</a>
<a data-dnb-test="anchor-hover" href="/" className="dnb-anchor--hover">Hover Style</a>
</li>
<li>
<a href="/" className="dnb-active-style">Active Style</a>
<a data-dnb-test="anchor-active" href="/" className="dnb-anchor--active">Active Style</a>
</li>
<li>
<a href="/" className="dnb-focus-style">Focus Style</a>
<a data-dnb-test="anchor-focus" href="/" className="dnb-anchor--focus">Focus Style</a>
</li>
</ul>
`}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import CodeBlock from 'Tags/CodeBlock'
<CodeBlock reactLive hideCode caption="Blockquote with graphics on top">
{`
<blockquote data-dnb-test="blockquote-top" className="dnb-blockquote--top">
Dis leo aliquam neque aptent nascetur metus ad ut eu Choro vivendum tractatos ei quo.
Dis leo aliquam neque aptent nascetur metus ad ut eu Choro <a href="/uilib/elements#blockquote">vivendum tractatos</a> ei quo.
</blockquote>
`}
</CodeBlock>
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---
draft: true
---

import CodeBlock from 'Tags/CodeBlock'

## Missing HTML Elements

Several commonly used HTML Elements are not included in the `dnb-ui-lib`. This decision is made by the DNB UX Team and relies on a principle to make UX design as good as possible, consistent and more thoughtful towards a broader customer target.

- For the `select` element, use e.g. [**Dropdown**](/uilib/components/dropdown) or [**Accordion**](/uilib/components/accordion) component.

- For `checkbox` or `radio` inputs, use e.g. [**Toggle Button**](/uilib/components/button) or [**Switch**](/uilib/components/switch) component.
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,17 @@ import { IconPrimary } from 'dnb-ui-lib/src'

## Tables

<table>
<CodeBlock scope={{IconPrimary}} reactLive hideCode>
{`
<table data-dnb-test="table">
<thead>
<tr>
<th colSpan="2">Column 1 + 2</th>
<th>
<a href="#sort">Column 3</a>
</th>
<th class="dnb-no-wrap">
<a href="#sort" className="dnb-no-anchor-underline">
<th className="dnb-no-wrap">
<a href="#sort" className="dnb-anchor-no-underline">
Column 4 <IconPrimary icon="chevron-down" />
</a>
</th>
Expand Down Expand Up @@ -50,3 +52,5 @@ import { IconPrimary } from 'dnb-ui-lib/src'
</tr>
</tbody>
</table>
`}
</CodeBlock>
Loading