feat: rename icon with all the primary icons to "IconPrimary" resp. "…

…icon-primary"
dnbexperience · Dec 4, 2018 · 8deda76 · 8deda76
1 parent 46bbb0d
commit 8deda76
Show file tree

Hide file tree

Showing 32 changed files with 46 additions and 55 deletions.
diff --git a/packages/dnb-design-system-portal/src/pages/icons/primary.md b/packages/dnb-design-system-portal/src/pages/icons/primary.md
@@ -11,7 +11,7 @@ import Icons from "Parts/icons/ListAllIcons";
 
 The Primary Icons are included in the [UI Library](/uilib) and also shipped bundled as an [UMD Package](https://unpkg.com/dnb-ui-lib@latest/umd/dnb-ui-lib-icons.min.js).
 
-Primary Icons an easily be included, for instance, in [Buttons](/uilib/components/button). They are integrated by using the `<IconWithAllIcons />` Component.
+Primary Icons an easily be included, for instance, in [Buttons](/uilib/components/button). They are integrated by using the `<IconPrimary />` Component.
 
 #### A list of all Primary Icons
 

diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage/first-steps/react.md b/packages/dnb-design-system-portal/src/pages/uilib/usage/first-steps/react.md
@@ -5,7 +5,7 @@ draft: false
 order: 5
 ---
 
-import { Button, IconWithAllIcons } from 'dnb-ui-lib/src'
+import { Button, IconPrimary } from 'dnb-ui-lib/src'
 import { ButtonEventExample } from 'Pages/uilib/usage/first-steps/examples/react-examples'
 
 # React JS for the web
@@ -27,15 +27,15 @@ The most basic way to use the `dnb-ui-lib` is like this:
 ```jsx
 <Button variant="secondary" text="Secondary Button" size="large" icon="chevron-right_medium" />
 <Button variant="secondary" size="large">
-  <IconWithAllIcons icon="chevron-right_medium" size="large" />
+  <IconPrimary icon="chevron-right_medium" size="large" />
 </Button>
 <Button icon="chevron-right_medium" icon_size="large" size="large" />
 ```
 
 <div className="demo-box">
   <Button variant="secondary" text="Secondary Button" size="large" icon="chevron-right_medium" />
   <Button variant="secondary" size="large">
-    <IconWithAllIcons icon="chevron-right_medium" size="large" />
+    <IconPrimary icon="chevron-right_medium" size="large" />
   </Button>
   <Button icon="chevron-right_medium" icon_size="large" size="large" />
 </div>

diff --git a/packages/dnb-design-system-portal/src/uilib/components/examples/Icon.txt b/packages/dnb-design-system-portal/src/uilib/components/examples/Icon.txt
@@ -1,3 +1,3 @@
-<IconWithAllIcons icon="question" />
-<IconWithAllIcons icon="chevron_right_medium" />
+<IconPrimary icon="question" />
+<IconPrimary icon="chevron_right_medium" />
 <Icon icon={Bell} size="32" />
diff --git a/packages/dnb-design-system-portal/src/uilib/performance-test/PerformanceTest.js b/packages/dnb-design-system-portal/src/uilib/performance-test/PerformanceTest.js
@@ -15,7 +15,7 @@ import 'dnb-ui-lib/src/style' // import both all components and the default them
 import dnb, {
   Button,
   Input,
-  IconWithAllIcons as Icon,
+  IconPrimary as Icon,
   Switch,
   FormLabel
 } from 'dnb-ui-lib/src'
@@ -338,7 +338,7 @@ class InputTest extends Component {
 
 const IconWrap = ({ webComponentsEnabled, ...props }) =>
   webComponentsEnabled ? (
-    <dnb-icon-with-all-icons {...props} />
+    <dnb-icon-primary {...props} />
   ) : (
     <Icon {...props} />
   )

diff --git a/packages/dnb-design-system-portal/src/uilib/scripts/makeDemosFactory.js b/packages/dnb-design-system-portal/src/uilib/scripts/makeDemosFactory.js
@@ -10,11 +10,7 @@ import runFactory from './tasks/makerFactory'
 import processAllPartsFile from './tasks/processAllPartsFile'
 
 if (require.main === module && process.env.NODE_ENV !== 'test') {
-  const ignoreUiLibList = [
-    'web-components',
-    'style',
-    'icon-with-all-icons'
-  ]
+  const ignoreUiLibList = ['web-components', 'style', 'icon-primary']
   const keepFiles = [] //'!**/footer/*'
   const autoAdvice = `
   ATTENTION: This file is auto generated by using "makeDemosFactory".

diff --git a/packages/dnb-ui-lib/src/components/button/Button.js b/packages/dnb-ui-lib/src/components/button/Button.js
@@ -6,7 +6,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import Icon from '../icon/IconWithAllIcons'
+import Icon from '../icon/IconPrimary'
 import {
   registerElement,
   validateDOMAttributes,

diff --git a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
@@ -57,7 +57,7 @@ exports[`Button component have to match default button snapshot 1`] = `
       >
         text
       </span>
-      <IconWithAllIcons
+      <IconPrimary
         alt="This is a button title"
         area_hidden={true}
         attributes={null}
@@ -89,7 +89,7 @@ exports[`Button component have to match default button snapshot 1`] = `
             </svg>
           </question>
         </span>
-      </IconWithAllIcons>
+      </IconPrimary>
     </Content>
   </button>
 </Button>
@@ -153,7 +153,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
       >
         text
       </span>
-      <IconWithAllIcons
+      <IconPrimary
         alt="This is a button title"
         area_hidden={true}
         attributes={null}
@@ -185,7 +185,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
             </svg>
           </question>
         </span>
-      </IconWithAllIcons>
+      </IconPrimary>
     </Content>
   </a>
 </Button>

diff --git a/packages/dnb-ui-lib/src/components/dropdown/Dropdown.js b/packages/dnb-ui-lib/src/components/dropdown/Dropdown.js
@@ -14,7 +14,7 @@ import {
   dispatchCustomElementEvent
 } from '../../shared/component-helper'
 // import './style/dnb-dropdown.scss' // no good solution to import the style here
-import Icon from '../icon/IconWithAllIcons'
+import Icon from '../icon/IconPrimary'
 
 const renderProps = {
   on_show: null,

diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
@@ -35,7 +35,7 @@ exports[`Dropdown component have to match snapshot 1`] = `
     <span
       className="dnb-dropdown__icon icon-icon"
     >
-      <IconWithAllIcons
+      <IconPrimary
         alt={null}
         area_hidden={false}
         attributes={null}

diff --git a/...s/icon-with-all-icons/IconWithAllIcons.js → ...rc/components/icon-primary/IconPrimary.js b/...s/icon-with-all-icons/IconWithAllIcons.js → ...rc/components/icon-primary/IconPrimary.js
@@ -3,7 +3,7 @@
  *
  */
 
-import web from '../icon/IconWithAllIcons'
+import web from '../icon/IconPrimary'
 
 export { web }
 export default web
diff --git a/packages/dnb-ui-lib/src/components/icon-primary/description.md b/packages/dnb-ui-lib/src/components/icon-primary/description.md
@@ -0,0 +1 @@
+TODO: Write a description for "icon-primary"
diff --git a/...components/icon-with-all-icons/details.md → ...ib/src/components/icon-primary/details.md b/...components/icon-with-all-icons/details.md → ...ib/src/components/icon-primary/details.md
diff --git a/packages/dnb-ui-lib/src/components/icon-primary/index.js b/packages/dnb-ui-lib/src/components/icon-primary/index.js
@@ -0,0 +1,6 @@
+/**
+ * Button Component
+ *
+ */
+
+export * from './IconPrimary'
diff --git a/...c/components/icon-with-all-icons/style.js → ...-lib/src/components/icon-primary/style.js b/...c/components/icon-with-all-icons/style.js → ...-lib/src/components/icon-primary/style.js
diff --git a/...ents/icon-with-all-icons/web-component.js → .../components/icon-primary/web-component.js b/...ents/icon-with-all-icons/web-component.js → .../components/icon-primary/web-component.js
diff --git a/packages/dnb-ui-lib/src/components/icon-with-all-icons/description.md b/packages/dnb-ui-lib/src/components/icon-with-all-icons/description.md
diff --git a/packages/dnb-ui-lib/src/components/icon-with-all-icons/index.js b/packages/dnb-ui-lib/src/components/icon-with-all-icons/index.js
diff --git a/packages/dnb-ui-lib/src/components/icon-with-all-icons/style/_icon-with-all-icons.scss b/packages/dnb-ui-lib/src/components/icon-with-all-icons/style/_icon-with-all-icons.scss
diff --git a/packages/dnb-ui-lib/src/components/icon/Example.js b/packages/dnb-ui-lib/src/components/icon/Example.js
@@ -5,7 +5,7 @@
 
 import React, { PureComponent, Fragment } from 'react'
 import Icon from './Icon'
-import IconWithAllIcons from './IconWithAllIcons'
+import IconPrimary from './IconPrimary'
 import { bell_medium as Bell } from './lib'
 
 class Example extends PureComponent {
@@ -26,8 +26,8 @@ import bell from './icons/bell'
   render() {
     return (
       <Fragment>
-        <IconWithAllIcons icon="question" />
-        <IconWithAllIcons icon="chevron_right_medium" />
+        <IconPrimary icon="question" />
+        <IconPrimary icon="chevron_right_medium" />
         <Icon icon={Bell} size="32" />
       </Fragment>
     )

diff --git a/...b/src/components/icon/IconWithAllIcons.js → ...ui-lib/src/components/icon/IconPrimary.js b/...b/src/components/icon/IconWithAllIcons.js → ...ui-lib/src/components/icon/IconPrimary.js
@@ -25,16 +25,13 @@ export const propTypes = {
 
 export const defaultProps = { ...DefaultIcon.defaultProps }
 
-export default class IconWithAllIcons extends PureComponent {
-  static tagName = 'dnb-icon-with-all-icons'
+export default class IconPrimary extends PureComponent {
+  static tagName = 'dnb-icon-primary'
   static propTypes = propTypes
   static defaultProps = defaultProps
 
   static enableWebComponent() {
-    DefaultIcon.enableWebComponent(
-      IconWithAllIcons.tagName,
-      IconWithAllIcons
-    )
+    DefaultIcon.enableWebComponent(IconPrimary.tagName, IconPrimary)
   }
 
   static getIcon(props) {

diff --git a/packages/dnb-ui-lib/src/components/icon/description.md b/packages/dnb-ui-lib/src/components/icon/description.md
@@ -2,4 +2,4 @@ The main Icon component is basically only a wrapper for what ever Icon You send
 
 #### More details
 
-To make it clear that all the "often used" icons are loaded at once, we have an additional Icon component, named `IconWithAllIcons` or `dnb-icon-with-all-icons`.
+To make it clear that all the "often used" icons are loaded at once, we have an additional Icon component, named `IconPrimary` or `dnb-icon-primary`.
diff --git a/packages/dnb-ui-lib/src/components/icon/details.md b/packages/dnb-ui-lib/src/components/icon/details.md
@@ -1,6 +1,6 @@
 | Properties   | Description                                                                                                                                                      |
 | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `icon`       | _(mandatory)_ a React SVG Component or the icon name (in case we use `IconWithAllIcons` or `dnb-icon-with-all-icons`).                                           |
+| `icon`       | _(mandatory)_ a React SVG Component or the icon name (in case we use `IconPrimary` or `dnb-icon-primary`).                                                       |
 | `alt`        | _(mandatory)_ the alternative label (text version) of the icon.                                                                                                  |
 | `size`       | _(optional)_ the dimension of the icon. This will be the `viewBox` and represent `width` and `height`. Defaults to `16`. You can use `small`,`medium` or `large` |
 | `color`      | _(optional)_ sets a color property to the `svg` markup. Default is no color, witch means _black_                                                                 |

diff --git a/packages/dnb-ui-lib/src/components/index.js b/packages/dnb-ui-lib/src/components/index.js
@@ -16,7 +16,7 @@ import Button from './button/Button'
 import Dropdown from './dropdown/Dropdown'
 import FormLabel from './form-label/FormLabel'
 import Icon from './icon/Icon'
-import IconWithAllIcons from './icon-with-all-icons/IconWithAllIcons'
+import IconPrimary from './icon-primary/IconPrimary'
 import Input from './input/Input'
 import InputMasked from './input-masked/InputMasked'
 import LineTitle from './line-title/LineTitle'
@@ -33,7 +33,7 @@ export {
   Dropdown,
   FormLabel,
   Icon,
-  IconWithAllIcons,
+  IconPrimary,
   Input,
   InputMasked,
   LineTitle,
@@ -51,7 +51,7 @@ export const getComponents = () => {
     Dropdown,
     FormLabel,
     Icon,
-    IconWithAllIcons,
+    IconPrimary,
     Input,
     InputMasked,
     LineTitle,

diff --git a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap b/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
@@ -77,7 +77,7 @@ exports[`Modal component have to match snapshot 1`] = `
             >
               modal_trigger_text
             </span>
-            <IconWithAllIcons
+            <IconPrimary
               alt="modal_trigger_title"
               area_hidden={true}
               attributes={null}
@@ -198,7 +198,7 @@ exports[`Modal component have to match snapshot 1`] = `
                     type="button"
                     variant="secondary"
                   >
-                    <IconWithAllIcons
+                    <IconPrimary
                       alt="close_title"
                       area_hidden={true}
                       attributes={null}
@@ -230,7 +230,7 @@ exports[`Modal component have to match snapshot 1`] = `
                           </svg>
                         </close>
                       </span>
-                    </IconWithAllIcons>
+                    </IconPrimary>
                   </Content>
                 </button>
               </Button>

diff --git a/packages/dnb-ui-lib/src/components/notification/Notification.js b/packages/dnb-ui-lib/src/components/notification/Notification.js
@@ -12,7 +12,7 @@ import {
   // processChildren
 } from '../../shared/component-helper'
 // import './style/dnb-notification.scss' // no good solution to import the style here
-import Icon from '../../components/icon/IconWithAllIcons'
+import Icon from '../../components/icon/IconPrimary'
 
 const renderProps = {
   // render_content: null

diff --git a/packages/dnb-ui-lib/src/index.js b/packages/dnb-ui-lib/src/index.js
@@ -18,7 +18,7 @@ import Button from './components/button/Button'
 import Dropdown from './components/dropdown/Dropdown'
 import FormLabel from './components/form-label/FormLabel'
 import Icon from './components/icon/Icon'
-import IconWithAllIcons from './components/icon-with-all-icons/IconWithAllIcons'
+import IconPrimary from './components/icon-primary/IconPrimary'
 import Input from './components/input/Input'
 import InputMasked from './components/input-masked/InputMasked'
 import LineTitle from './components/line-title/LineTitle'
@@ -50,7 +50,7 @@ export {
   Dropdown,
   FormLabel,
   Icon,
-  IconWithAllIcons,
+  IconPrimary,
   Input,
   InputMasked,
   LineTitle,

diff --git a/packages/dnb-ui-lib/src/patterns/main-nav/MainNav.js b/packages/dnb-ui-lib/src/patterns/main-nav/MainNav.js
@@ -13,7 +13,7 @@ import {
 } from '../../shared/component-helper'
 // import './style/dnb-main-nav.scss' // no good solution to import the style here
 import Input from '../../components/input/Input'
-import Icon from '../../components/icon/IconWithAllIcons'
+import Icon from '../../components/icon/IconPrimary'
 import Button from '../../components/button/Button'
 import Logo from '../../components/logo/Logo'
 import Notification from '../../components/notification/Notification'

diff --git a/packages/dnb-ui-lib/src/style/dnb-ui-components.scss b/packages/dnb-ui-lib/src/style/dnb-ui-components.scss
@@ -9,7 +9,6 @@
 @import '../components/dropdown/style/_dropdown.scss';
 @import '../components/form-label/style/_form-label.scss';
 @import '../components/icon/style/_icon.scss';
-@import '../components/icon-with-all-icons/style/_icon-with-all-icons.scss';
 @import '../components/input/style/_input.scss';
 @import '../components/input-masked/style/_input-masked.scss';
 @import '../components/line-title/style/_line-title.scss';

diff --git a/packages/dnb-ui-lib/stories/components.js b/packages/dnb-ui-lib/stories/components.js
@@ -10,7 +10,7 @@ import styled from 'react-emotion'
 import '../src/style'
 
 // UI Components
-import { Button, IconWithAllIcons as Icon } from '../src/components'
+import { Button, IconPrimary as Icon } from '../src/components'
 
 // import Body from '../src/components/body/Body'
 // import ActionNavExample from '../src/patterns/action-nav/Example'

diff --git a/packages/examples/example-html/static/index.html b/packages/examples/example-html/static/index.html
@@ -13,7 +13,7 @@ <h1>Web Component in HTML</h1>
   <dnb-button text="Declarative" icon="chevron-right" on_click="myClass.on_click"></dnb-button>
   <dnb-button text="Imperative" icon="chevron-right" class="button"></dnb-button>
 
-  <dnb-icon-with-all-icons icon="bell_medium" size="medium"></dnb-icon-with-all-icons>
+  <dnb-icon-primary icon="bell_medium" size="medium"></dnb-icon-primary>
 
   <dnb-form-label for_id="switch-1">Switch</dnb-form-label>
   <dnb-switch id="switch-1" title="Switch title"></dnb-switch>

diff --git a/packages/examples/example-html/static/umd/index.html b/packages/examples/example-html/static/umd/index.html
@@ -13,7 +13,7 @@ <h1>Web Component in HTML</h1>
   <dnb-button text="Declarative" icon="chevron-right" on_click="myClass.on_click"></dnb-button>
   <dnb-button text="Imperative" icon="chevron-right" class="button"></dnb-button>
 
-  <dnb-icon-with-all-icons icon="bell" size="80"></dnb-icon-with-all-icons>
+  <dnb-icon-primary icon="bell" size="80"></dnb-icon-primary>
 
   <dnb-form-label for_id="switch-1">Switch</dnb-form-label>
   <dnb-switch id="switch-1" title="Switch title"></dnb-switch>

diff --git a/packages/examples/example-react/src/App.jsx b/packages/examples/example-react/src/App.jsx
@@ -85,7 +85,7 @@ export default class App extends PureComponent {
               icon="chevron-right"
               on_click={this.handleClick}
             />
-            <dnb-icon-with-all-icons icon="bell" size="80" />
+            <dnb-icon-primary icon="bell" size="80" />
           </Fragment>
         )}
       </div>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,4 +2,4 @@ The main Icon component is basically only a wrapper for what ever Icon You send

		#### More details

		To make it clear that all the "often used" icons are loaded at once, we have an additional Icon component, named `IconWithAllIcons` or `dnb-icon-with-all-icons`.
		To make it clear that all the "often used" icons are loaded at once, we have an additional Icon component, named `IconPrimary` or `dnb-icon-primary`.