Merge pull request #1356 from db-ui/chore-update-angular-db-components

chore: update complete repo

angular17-example/README.md

@@ -14,10 +14,6 @@
 ```scss
 // Combined dependencies like variables, colors and tonality and all components
 @forward "@db-ui/components/build/styles/db-ui-42-rollup";
-// We use $db-spacing-fixed-md variable so we need to import the file where the variable is defined
-@use "@db-ui/foundations/build/scss/variables";
-// Color-classes are optional, we use them in the example to have easy access to colors
-@forward "@db-ui/foundations/build/css/colors/classes/all";
 ```
 
 7. Goto `src/app/app.component.html` and replace content with:
@@ -47,9 +43,9 @@
 13. `expressive`
 14. Goto browser; All texts should have different sizes
 15. Goto `src/app/app.component.html` and add `class` with those classes for each `<div>`:
-    1. `db-informational-bg`
-    2. `db-successful-bg-lvl-1`
-    3. `db-successful-bg-lvl-2`
+    1. `db-informational-bg-basic-level-1`
+    2. `db-successful-bg-basic-level-1`
+    3. `db-successful-bg-basic-level-2`
 19. Goto browser; All containers should have different background and foreground colors
 20. Goto `src/styles.scss` and append a new class:
 

angular17-example/package.json

@@ -19,7 +19,7 @@
     "@angular/platform-browser": "^17.3.0",
     "@angular/platform-browser-dynamic": "^17.3.0",
     "@angular/router": "^17.3.0",
-    "@db-ui/ngx-components": "^0.2.1",
+    "@db-ui/ngx-components": "^0.3.3",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

angular17-example/src/app/app.component.html

@@ -1,23 +1,23 @@
 <main>
   <div
     data-density="functional"
-    class="db-informational-bg container-with-padding"
+    class="db-informational-bg-basic-level-1 container-with-padding"
   >
     <h1>db-ui-functional</h1>
     <p>Use this as default for enterprise apps</p>
     <db-button icon="user">Test</db-button>
   </div>
   <div
     data-density="regular"
-    class="db-successful-bg-lvl-1 container-with-padding"
+    class="db-successful-bg-basic-level-1 container-with-padding"
   >
     <h1>db-ui-regular</h1>
     <p>Use this as default for consumer apps</p>
     <db-button icon="user">Test</db-button>
   </div>
   <div
     data-density="expressive"
-    class="db-successful-bg-lvl-2 container-with-padding"
+    class="db-successful-bg-basic-level-2 container-with-padding"
   >
     <h1>db-ui-expressive</h1>
     <p>Use this as default for marketing apps</p>

react-example/README.md

@@ -13,10 +13,6 @@
 ```scss
 // Combined dependencies like variables, colors and tonality and all components
 @forward "@db-ui/components/build/styles/db-ui-42-rollup";
-// We use $db-spacing-fixed-md variable so we need to import the file where the variable is defined
-@use "@db-ui/foundations/build/scss/variables";
-// Color-classes are optional, we use them in the example to have easy access to colors
-@forward "@db-ui/foundations/build/css/colors/classes/all";
 ```
 
 7. Goto `src/main.tsx` and rename `import './index.css'` to `import './index.scss'`
@@ -53,9 +49,9 @@ export default App;
     3. `expressive`
 12. Goto browser; All texts should have different sizes
 13. Goto `src/App.tsx` and add `className` with those classes for each `<div>`:
-    1. `db-informational-bg`
-    2. `db-successful-bg-lvl-1`
-    3. `db-successful-bg-lvl-2`
+    1. `db-informational-bg-basic-level-1`
+    2. `db-successful-bg-basic-level-1`
+    3. `db-successful-bg-basic-level-2`
 14. Goto browser; All containers should have different background and foreground colors
 15. Goto `src/index.scss` and append a new class:
 

react-example/src/App.tsx

@@ -5,23 +5,23 @@ const App = () => {
     <main>
       <div
         data-density="functional"
-        className="db-informational-bg container-with-padding"
+        className="db-informational-bg-basic-level-1 container-with-padding"
       >
         <h1>db-ui-functional</h1>
         <p>Use this as default for enterprise apps</p>
         <DBButton icon="user">Test</DBButton>
       </div>
       <div
         data-density="regular"
-        className="db-successful-bg-lvl-1 container-with-padding"
+        className="db-successful-bg-basic-level-1 container-with-padding"
       >
         <h1>db-ui-regular</h1>
         <p>Use this as default for consumer apps</p>
         <DBButton icon="user">Test</DBButton>
       </div>
       <div
         data-density="expressive"
-        className="db-successful-bg-lvl-2 container-with-padding"
+        className="db-successful-bg-basic-level-2 container-with-padding"
       >
         <h1>db-ui-expressive</h1>
         <p>Use this as default for marketing apps</p>