fix: set default text color in Section component

dnbexperience · Nov 15, 2021 · 0a10427 · 0a10427
1 parent 6d46b81
commit 0a10427
Show file tree

Hide file tree

Showing 20 changed files with 223 additions and 101 deletions.
diff --git a/.github/workflows/icons-lib.yml b/.github/workflows/icons-lib.yml
@@ -35,17 +35,13 @@ jobs:
         with:
           node-version: 14.17.0
 
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
-
-      - name: Use yarn cache
+      - name: Use node_modules cache
         uses: actions/cache@v2
-        id: yarn-cache
+        id: modules-cache
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: ${{ runner.os }}-yarn-
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: ${{ runner.os }}-modules-
 
       - name: Install dependencies
         if: steps.modules-cache.outputs.cache-hit != 'true'
@@ -68,8 +64,8 @@ jobs:
           path: |
             ./packages/dnb-design-system-portal/.cache
             ./packages/dnb-design-system-portal/public
-          key: ${{ runner.os }}-gatsby-${{ steps.date.outputs.timestamp }}
-          restore-keys: ${{ runner.os }}-gatsby-
+          key: ${{ runner.os }}-gatsby-dev-${{ steps.date.outputs.timestamp }}
+          restore-keys: ${{ runner.os }}-gatsby-dev-
 
       - name: Build portal
         run: yarn workspace dnb-design-system-portal build

diff --git a/.github/workflows/visual-test.yml b/.github/workflows/visual-test.yml
@@ -16,7 +16,9 @@ on:
       - '!alpha'
     paths:
       - './packages/dnb-eufemia/src/**/*'
-      - '.github/workflows/**/*'
+      - './packages/dnb-eufemia/src/**/*screenshot*'
+      - './packages/dnb-design-system-portal/src/**/{Examples,demos}*'
+      - '.github/workflows/**/visual-test.yml'
 
 jobs:
   action:
@@ -48,17 +50,13 @@ jobs:
         with:
           node-version: 14.17.0
 
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
-
-      - name: Use yarn cache
+      - name: Use node_modules cache
         uses: actions/cache@v2
-        id: yarn-cache
+        id: modules-cache
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: ${{ runner.os }}-yarn-
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: ${{ runner.os }}-modules-
 
       - name: Install dependencies
         if: steps.modules-cache.outputs.cache-hit != 'true'
@@ -75,11 +73,11 @@ jobs:
           path: |
             ./packages/dnb-design-system-portal/.cache
             ./packages/dnb-design-system-portal/public
-          key: ${{ runner.os }}-gatsby-${{ steps.date.outputs.timestamp }}
-          restore-keys: ${{ runner.os }}-gatsby-
+          key: ${{ runner.os }}-gatsby-dev-${{ steps.date.outputs.timestamp }}
+          restore-keys: ${{ runner.os }}-gatsby-dev-
 
       - name: Build portal
-        run: yarn workspace dnb-design-system-portal build-ci
+        run: yarn workspace dnb-design-system-portal build
 
       - name: Run visual tests
         run: yarn workspace @dnb/eufemia test:screenshots:ci

diff --git a/packages/dnb-design-system-portal/.eslintrc b/packages/dnb-design-system-portal/.eslintrc
@@ -17,6 +17,9 @@
     },
     "sourceType": "module"
   },
+  "globals": {
+    "globalThis": true
+  },
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",

diff --git a/packages/dnb-design-system-portal/README.md b/packages/dnb-design-system-portal/README.md
@@ -13,8 +13,5 @@ The DNB Eufemia Portal is built with the [Gatsby](https://www.gatsbyjs.com/).
 ## Create local build
 
 1. Run `yarn workspace dnb-design-system-portal build`
-   - and if you need to create a IE11 (legacy browser build), use `yarn workspace dnb-design-system-portal build:legacy`.
-1. This will generate a new folder called: `public`. You will find it in the root in this package.
-   1. `public` contain all the generated static files inside
-1. You may run `yarn serve` to view the site at `http://localhost:8000/`
-1. You may delete all Browser Caches afterwards to remove the Service Worker
+1. This will generate a new folder called: `public`. You will find it in here: `./packages/dnb-design-system-portal/public`
+1. You may run `yarn workspace dnb-design-system-portal serve` to view the site at `http://localhost:8000/`
diff --git a/packages/dnb-design-system-portal/package.json b/packages/dnb-design-system-portal/package.json
@@ -7,8 +7,7 @@
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {
-    "build": "NODE_NO_WARNINGS=1 gatsby build",
-    "build:legacy": "cross-env BUILD_LEGACY_BROWSERS=1 gatsby build",
+    "build": "NODE_NO_WARNINGS=1 gatsby build --no-uglify",
     "build:version": "node ./scripts/version.js --new-version",
     "build-ci": "yarn build:version && yarn build --prefix-paths && yarn commit-new-pages",
     "clean": "NODE_NO_WARNINGS=1 gatsby clean",

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/section/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/section/Examples.js
@@ -135,3 +135,57 @@ export const SectionDemoFireRed8 = () => (
 `}
   </ComponentBox>
 )
+
+export const SectionZIndex = () =>
+  !globalThis.IS_TEST ? null : (
+    <ComponentBox data-visual-test="section-z-index">
+      {() => /* jsx */ `
+<Section spacing style_type="mint-green-12">
+    mint-green-12
+    <div>
+      <Section spacing style_type="mint-green">
+        mint-green
+        <div>
+          <Section spacing style_type="sea-green">
+            sea-green
+            <div>
+              <Section spacing style_type="emerald-green">
+                emerald-green
+                <div>
+                  <Section spacing style_type="fire-red">
+                    fire-red
+                    <div>
+                      <Section spacing style_type="sand-yellow">
+                        sand-yellow
+                        <div>
+                          <Section spacing style_type="pistachio">
+                            pistachio
+                            <div>
+                              <Section spacing style_type="lavender">
+                                lavender
+                                <div>
+                                  <Section
+                                    spacing
+                                    style_type="divider"
+                                  >
+                                    divider
+                                  </Section>
+                                </div>
+                              </Section>
+                            </div>
+                          </Section>
+                        </div>
+                      </Section>
+                    </div>
+                  </Section>
+                </div>
+              </Section>
+            </div>
+          </Section>
+        </div>
+      </Section>
+    </div>
+  </Section>
+`}
+    </ComponentBox>
+  )
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/section/demos.md b/packages/dnb-design-system-portal/src/docs/uilib/components/section/demos.md
@@ -18,6 +18,7 @@ SectionDemoSandYellow,
 SectionDemoPistachio,
 SectionDemoFireRed,
 SectionDemoFireRed8,
+SectionZIndex,
 } from 'Docs/uilib/components/section/Examples'
 
 ## Demos
@@ -73,3 +74,5 @@ SectionDemoFireRed8,
 ### Fire-Red-8 Section
 
 <SectionDemoFireRed8 />
+
+<SectionZIndex />
diff --git a/packages/dnb-design-system-portal/src/shared/parts/Layout.js b/packages/dnb-design-system-portal/src/shared/parts/Layout.js
@@ -12,7 +12,7 @@ import { Global } from '@emotion/react'
 import MainMenu from '../menu/MainMenu'
 import Sidebar from '../menu/SidebarMenu'
 import StickyMenuBar from '../menu/StickyMenuBar'
-import { markdownStyle } from './Markdown'
+import portalStyle from './PortalStyle'
 import packageJson from '../../../package.json'
 import { MainMenuProvider } from '../menu/MainMenuContext'
 import { SidebarMenuProvider } from '../menu/SidebarMenuContext'
@@ -158,8 +158,8 @@ const Content = ({ className, fullscreen, children }) => (
       className
     )}
   >
-    <Global styles={markdownStyle} />
     {children}
+    <Global styles={portalStyle} />
   </ContentWrapper>
 )
 Content.propTypes = {

diff --git a/packages/dnb-design-system-portal/src/shared/parts/Markdown.js b/packages/dnb-design-system-portal/src/shared/parts/Markdown.js
@@ -7,7 +7,6 @@ import React from 'react'
 
 import PropTypes from 'prop-types'
 import { enableWebComponents } from '@dnb/eufemia/src/lib'
-import portalStyle from './PortalStyle'
 
 export class Html extends React.PureComponent {
   static propTypes = {
@@ -44,5 +43,3 @@ export class Html extends React.PureComponent {
     )
   }
 }
-
-export const markdownStyle = portalStyle
diff --git a/packages/dnb-eufemia/.eslintrc b/packages/dnb-eufemia/.eslintrc
@@ -48,13 +48,6 @@
       }
     ],
     "no-console": "off",
-    "react/self-closing-comp": [
-      "warn",
-      {
-        "component": true,
-        "html": true
-      }
-    ],
     "import/export": "off",
     "import/no-anonymous-default-export": [
       "error",
@@ -69,6 +62,13 @@
       }
     ],
     "import/no-unresolved": "off",
+    "react/self-closing-comp": [
+      "warn",
+      {
+        "component": true,
+        "html": true
+      }
+    ],
     "react/prop-types": "warn",
     "react/require-default-props": "warn",
     "react/no-unused-prop-types": "warn",

diff --git a/packages/dnb-eufemia/scripts/prepub/commitToBranch.js b/packages/dnb-eufemia/scripts/prepub/commitToBranch.js
@@ -81,6 +81,7 @@ const commitToBranch = async ({
   filePathsIncludelist = [],
   skipCI = false,
   isFeature = false,
+  force = false,
 } = {}) => {
   try {
     const repo = await getRepo()
@@ -154,7 +155,7 @@ const commitToBranch = async ({
       await repo.commit(commitMessage, null, {
         '--no-verify': null,
       })
-      await repo.push('origin', branchName, ['--force-with-lease'])
+      await repo.push('origin', branchName, force ? ['--force'] : null)
 
       log.succeed(
         `Commit: These ${what} were successfully updated/added: ${files}`

diff --git a/...nb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap b/...nb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap
@@ -587,6 +587,12 @@ button.dnb-button::-moz-focus-inner {
     z-index: -11; }
   .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
     z-index: -10; }
+  .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
+    z-index: -9; }
+  .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
+    z-index: -8; }
+  .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
+    z-index: -7; }
   .dnb-section--spacing-small {
     padding-top: var(--spacing-small);
     padding-bottom: var(--spacing-small); }

diff --git a/packages/dnb-eufemia/src/components/section/__tests__/Section.screenshot.test.js b/packages/dnb-eufemia/src/components/section/__tests__/Section.screenshot.test.js
@@ -10,7 +10,6 @@ import {
 
 describe('Section screenshot', () => {
   setupPageScreenshot({ url: '/uilib/components/section/demos' })
-  // const style = { width: '8rem' }
 
   it('have to match default section', async () => {
     const screenshot = await testPageScreenshot({
@@ -88,4 +87,11 @@ describe('Section screenshot', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match z-index test', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-visual-test="section-z-index"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })
diff --git a/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/Section.test.js.snap b/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/Section.test.js.snap
@@ -30,33 +30,49 @@ exports[`Section scss have to match default theme snapshot 1`] = `
 /*
  * Utilities
  */
-.dnb-section--divider::after {
-  color: var(--color-white);
-  box-shadow: 99vw 0 0 0 currentColor, 198vw 0 0 0 currentColor, 297vw 0 0 0 currentColor, 396vw 0 0 0 currentColor, 0 0.0625rem 0 0 var(--color-mint-green-50), 99vw 0.0625rem 0 0 var(--color-mint-green-50), 0 -0.0625rem 0 0 var(--color-mint-green-50), 99vw -0.0625rem 0 0 var(--color-mint-green-50), 198vw 0.0625rem 0 0 var(--color-mint-green-50), 198vw -0.0625rem 0 0 var(--color-mint-green-50); }
-
-.dnb-section--mint-green-12::after {
-  color: var(--color-mint-green-12); }
+.dnb-section--divider {
+  color: var(--color-black-80); }
+  .dnb-section--divider::after {
+    color: var(--color-white);
+    box-shadow: 99vw 0 0 0 currentColor, 198vw 0 0 0 currentColor, 297vw 0 0 0 currentColor, 396vw 0 0 0 currentColor, 0 0.0625rem 0 0 var(--color-mint-green-50), 99vw 0.0625rem 0 0 var(--color-mint-green-50), 0 -0.0625rem 0 0 var(--color-mint-green-50), 99vw -0.0625rem 0 0 var(--color-mint-green-50), 198vw 0.0625rem 0 0 var(--color-mint-green-50), 198vw -0.0625rem 0 0 var(--color-mint-green-50); }
 
 .dnb-section--transparent::after {
   color: transparent; }
 
-.dnb-section--white::after {
-  color: var(--color-white); }
-
-.dnb-section--mint-green::after {
-  color: var(--color-mint-green); }
-
-.dnb-section--lavender::after {
-  color: var(--color-lavender); }
-
-.dnb-section--sand-yellow::after {
-  color: var(--color-sand-yellow); }
-
-.dnb-section--pistachio::after {
-  color: var(--color-pistachio); }
-
-.dnb-section--black-3::after {
-  color: var(--color-black-3); }
+.dnb-section--mint-green-12 {
+  color: var(--color-black-80); }
+  .dnb-section--mint-green-12::after {
+    color: var(--color-mint-green-12); }
+
+.dnb-section--white {
+  color: var(--color-black-80); }
+  .dnb-section--white::after {
+    color: var(--color-white); }
+
+.dnb-section--mint-green {
+  color: var(--color-black-80); }
+  .dnb-section--mint-green::after {
+    color: var(--color-mint-green); }
+
+.dnb-section--lavender {
+  color: var(--color-black-80); }
+  .dnb-section--lavender::after {
+    color: var(--color-lavender); }
+
+.dnb-section--sand-yellow {
+  color: var(--color-black-80); }
+  .dnb-section--sand-yellow::after {
+    color: var(--color-sand-yellow); }
+
+.dnb-section--pistachio {
+  color: var(--color-black-80); }
+  .dnb-section--pistachio::after {
+    color: var(--color-pistachio); }
+
+.dnb-section--black-3 {
+  color: var(--color-black-80); }
+  .dnb-section--black-3::after {
+    color: var(--color-black-3); }
 
 .dnb-section--emerald-green {
   color: var(--color-mint-green); }
@@ -73,8 +89,10 @@ exports[`Section scss have to match default theme snapshot 1`] = `
   .dnb-section--fire-red::after {
     color: var(--color-fire-red); }
 
-.dnb-section--fire-red-8::after {
-  color: var(--color-fire-red-8); }
+.dnb-section--fire-red-8 {
+  color: var(--color-white); }
+  .dnb-section--fire-red-8::after {
+    color: var(--color-fire-red-8); }
 
 .dnb-section--fire-red .dnb-anchor,
 .dnb-section--emerald-green .dnb-anchor,
@@ -203,6 +221,12 @@ exports[`Section scss have to match snapshot 1`] = `
     z-index: -11; }
   .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
     z-index: -10; }
+  .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
+    z-index: -9; }
+  .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
+    z-index: -8; }
+  .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
+    z-index: -7; }
   .dnb-section--spacing-small {
     padding-top: var(--spacing-small);
     padding-bottom: var(--spacing-small); }

diff --git a/...reenshot-test-js-section-screenshot-have-to-match-z-index-test-1-6e39e.snap.png b/...reenshot-test-js-section-screenshot-have-to-match-z-index-test-1-6e39e.snap.png