feat: move dnb-ui-tags to themes (#2140)

dnbexperience · May 31, 2023 · d2bc632 · d2bc632
1 parent e400869
commit d2bc632
Show file tree

Hide file tree

Showing 13 changed files with 112 additions and 60 deletions.
diff --git a/...design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.mdx b/...design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.mdx
@@ -85,7 +85,7 @@ Packages such as:
 - `dnb-ui-core`
 - `dnb-ui-elements`
 - `dnb-ui-tags`
-- `dnb-ui-fonts` (moved to theme as well)
+- `dnb-ui-fonts`
 
 do not contain the properties anymore. Properties are only a part of a theme file, such as: `/style/themes/theme-ui/dnb-theme-ui.*`.
 
@@ -211,6 +211,10 @@ Stopped supporting Internet Explorer (IE), as Microsoft formally ended support f
 Find the SCSS @mixin `fakeFocus` and replace it with `focusRing`.
 Find the SCSS @mixin `removeFakeFocus` and replace it with `removeFocusRing`.
 
+## CSS Packages
+
+- `dnb-ui-tags` was moved form `/style` to `/style/themes/theme-ui`.
+
 ### Deprecations
 
 - Helper class `.dnb-sr-only--inline` and SCSS mixin `srOnlyInline` was removed.

diff --git a/packages/dnb-eufemia/scripts/prebuild/dev.js b/packages/dnb-eufemia/scripts/prebuild/dev.js
@@ -15,8 +15,8 @@ import {
   // runStyleFactory,
   // convertSvgToJsx,
   // makeLibStyles
-  // makeMainStyle
-  generateTypes,
+  makeMainStyle,
+  // generateTypes,
   // makePropertiesFile
   // prepareTemplates
   // makeLibModules
@@ -35,8 +35,8 @@ const dev = async () => {
   // await runStyleFactory()
   // await convertSvgToJsx({ preventDelete })
   // await makeLibStyles()
-  // await makeMainStyle()
-  await generateTypes()
+  await makeMainStyle()
+  // await generateTypes()
   // await makePropertiesFile()
   // await prepareTemplates()
   // await makeLibModules()

diff --git a/packages/dnb-eufemia/src/style/dnb-ui-tags.scss b/packages/dnb-eufemia/src/style/dnb-ui-tags.scss
diff --git a/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap b/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap
@@ -309,6 +309,11 @@ sub {
   margin-bottom: 1.5rem;
 }
 
+/*
+ * Core Styles
+ * Mainly only the margins are defined in here
+ *
+ */
 /*
  * Blockquote
  *
@@ -436,10 +441,18 @@ html[data-whatinput=keyboard] .dnb-blockquote:not(.dnb-blockquote--no-background
   margin-bottom: 0;
 }
 
+/*
+ * Core Styles
+ * Mainly only the margins are defined in here
+ *
+ */
 /*
  * Lists
  *
  */
+/*
+ * Utilities
+ */
 .dnb-ul {
   padding: 0;
   font-size: var(--font-size-basis);
@@ -704,10 +717,18 @@ html[data-whatinput=keyboard] .dnb-blockquote:not(.dnb-blockquote--no-background
   line-height: var(--line-height-basis);
 }
 
+/*
+ * Core Styles
+ * Mainly only the margins are defined in here
+ *
+ */
 /*
  * Code / Pre
  *
  */
+/*
+ * Utilities
+ */
 .dnb-code {
   display: inline-block;
   padding: 0.25em; /* 2px 4px */
@@ -824,6 +845,11 @@ del .dnb-code {
   background-color: var(--color-black-8);
 }
 
+/*
+ * Core Styles
+ * Mainly only the margins are defined in here
+ *
+ */
 /*
  * Hr tag / line
  *

diff --git a/packages/dnb-eufemia/src/style/elements/blockquote.scss b/packages/dnb-eufemia/src/style/elements/blockquote.scss
@@ -3,6 +3,7 @@
  *
  */
 
+@use './ui-spacing.scss';
 @import '../../elements/anchor/style/anchor-mixins.scss';
 
 @mixin blockquoteStyle() {
@@ -117,7 +118,7 @@
     @include blockquoteStyle();
   }
   .dnb-spacing blockquote {
-    @include defaultSpacing();
+    @include ui-spacing.defaultSpacing();
     p:last-child {
       margin-bottom: 0;
     }
@@ -128,7 +129,7 @@
   @include blockquoteStyle();
 }
 .dnb-spacing .dnb-blockquote {
-  @include defaultSpacing();
+  @include ui-spacing.defaultSpacing();
   p:last-child {
     margin-bottom: 0;
   }

diff --git a/packages/dnb-eufemia/src/style/elements/code.scss b/packages/dnb-eufemia/src/style/elements/code.scss
@@ -3,6 +3,9 @@
  *
  */
 
+@use './ui-spacing.scss';
+@import '../core/utilities.scss';
+
 @mixin codeStyle() {
   display: inline-block;
 
@@ -59,7 +62,7 @@
   }
 
   .dnb-spacing pre {
-    @include defaultSpacing();
+    @include ui-spacing.defaultSpacing();
   }
 
   &.dnb-pre--focus {
@@ -88,7 +91,7 @@
 }
 
 .dnb-spacing .dnb-pre {
-  @include defaultSpacing();
+  @include ui-spacing.defaultSpacing();
 }
 
 .dnb-skeleton {

diff --git a/packages/dnb-eufemia/src/style/elements/hr.scss b/packages/dnb-eufemia/src/style/elements/hr.scss
@@ -3,6 +3,8 @@
  *
  */
 
+@use './ui-spacing.scss';
+
 @mixin hrStyle() {
   position: relative;
   padding: 0;
@@ -40,7 +42,7 @@
   }
 
   .dnb-spacing hr {
-    @include defaultSpacing();
+    @include ui-spacing.defaultSpacing();
   }
 }
 
@@ -84,5 +86,5 @@
 }
 
 .dnb-spacing .dnb-hr {
-  @include defaultSpacing();
+  @include ui-spacing.defaultSpacing();
 }
diff --git a/packages/dnb-eufemia/src/style/elements/lists.scss b/packages/dnb-eufemia/src/style/elements/lists.scss
@@ -3,6 +3,9 @@
  *
  */
 
+@use './ui-spacing.scss';
+@import '../core/utilities.scss';
+
 @mixin listDefaults() {
   & ul,
   & ol {
@@ -174,7 +177,7 @@
   }
 }
 @mixin listSpacing() {
-  @include defaultSpacing();
+  @include ui-spacing.defaultSpacing();
   & > li {
     margin-top: 1rem;
     margin-bottom: 1rem;
@@ -192,7 +195,7 @@
   }
 }
 @mixin dlSpacing() {
-  @include defaultSpacing();
+  @include ui-spacing.defaultSpacing();
 }
 @mixin ulTag() {
   ul {

diff --git a/packages/dnb-eufemia/src/style/elements/typography.scss b/packages/dnb-eufemia/src/style/elements/typography.scss
@@ -3,6 +3,8 @@
  *
  */
 
+@use './ui-spacing.scss';
+
 @mixin headingDefaults() {
   padding: 0;
 
@@ -317,7 +319,7 @@
 
     p,
     .dnb-core-style & p {
-      @include defaultSpacing();
+      @include ui-spacing.defaultSpacing();
     }
   }
 }
@@ -437,6 +439,6 @@ sub {
 
   .dnb-p,
   .dnb-core-style & .dnb-p {
-    @include defaultSpacing();
+    @include ui-spacing.defaultSpacing();
   }
 }
diff --git a/packages/dnb-eufemia/src/style/elements/ui-elements.scss b/packages/dnb-eufemia/src/style/elements/ui-elements.scss
@@ -4,7 +4,6 @@
  */
 
 // include spacings here, cause they are used in elements
-@import './ui-spacing.scss';
 @import './typography.scss';
 @import './blockquote.scss';
 @import './lists.scss';

diff --git a/packages/dnb-eufemia/src/style/elements/ui-tags.scss b/packages/dnb-eufemia/src/style/elements/ui-tags.scss
diff --git a/packages/dnb-eufemia/src/style/themes/theme-ui/__tests__/dnb-ui-tags.test.ts b/packages/dnb-eufemia/src/style/themes/theme-ui/__tests__/dnb-ui-tags.test.ts
@@ -0,0 +1,18 @@
+/**
+ * CSS Package Test
+ *
+ */
+
+import { loadScss } from '../../../../core/jest/jestSetup'
+
+describe('dnb-ui-tags.css', () => {
+  const scss = loadScss(require.resolve('../dnb-ui-tags.scss'))
+
+  it('should contain ".dnb-core-style blockquote"', () => {
+    expect(scss).toContain('.dnb-core-style blockquote')
+  })
+
+  it('should contain ".dnb-core-style ul"', () => {
+    expect(scss).toContain('.dnb-core-style ul')
+  })
+})
diff --git a/packages/dnb-eufemia/src/style/themes/theme-ui/dnb-ui-tags.scss b/packages/dnb-eufemia/src/style/themes/theme-ui/dnb-ui-tags.scss
@@ -0,0 +1,38 @@
+/**
+ * HTML Element Tags
+ *
+ */
+
+@use '../../../elements/anchor/style/anchor-mixins.scss';
+@use '../../elements/blockquote.scss';
+@use '../../elements/typography.scss';
+@use '../../elements/lists.scss';
+@use '../../elements/label.scss';
+@use '../../elements/form.scss';
+@use '../../elements/code.scss';
+@use '../../elements/image.scss';
+@use '../../elements/hr.scss';
+
+.dnb-core-style {
+  // div
+  @include anchor-mixins.anchorTag();
+  @include image.imageTag();
+  @include blockquote.blockquoteTag();
+  @include hr.hrTag();
+
+  // typography
+  @include typography.typographyTags();
+
+  // lists
+  @include lists.ulTag();
+  @include lists.olTag();
+  @include lists.dlTag();
+
+  // form
+  @include form.formTag();
+  @include label.labelTag();
+
+  // additional
+  @include code.codeTag();
+  @include code.preTag();
+}