Merge pull request #394 from danskernesdigitalebibliotek/release/2023…

…-51-0

Release/2023-51-0

.github/workflows/lint.yml

@@ -7,7 +7,8 @@ on:
       - main
 
 jobs:
-  css_stylelint:
+  css-lint:
+    name: CSS Linter
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -16,10 +17,11 @@ jobs:
           node-version-file: '.nvmrc'
       - run: yarn install --frozen-lockfile
 
-      - name: Run Stylelint
-        run: yarn css:stylelint -- -f github
+      - name: Run css:lint
+        run: yarn css:lint
 
-  js_eslint:
+  js-lint:
+    name: JS Linter
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -28,49 +30,19 @@ jobs:
           node-version-file: '.nvmrc'
       - run: yarn install --frozen-lockfile
 
-      - name: Run eslint
-        run: yarn js:eslint
+      - name: Run js:lint
+        run: yarn js:lint
 
-  css_prettier:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version-file: '.nvmrc'
-
-      - run: yarn install --frozen-lockfile
-
-      - name: Run Prettier
-        run: yarn css:prettier -- --check
-
-  js_prettier:
+  markdown-linkt:
+    name: Markdown Linter
+    if: '!github.event.deleted'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
-
       - run: yarn install --frozen-lockfile
 
-      - name: Run Prettier
-        run: yarn js:prettier -- --check
-
-  markdownlint:
-    name: Lint markdown
-    if: '!github.event.deleted'
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: '.nvmrc'
-          cache: 'yarn'
-      - name: Install Dependencies
-        run: yarn install
-      - name: Install problem matcher
-        uses: xt0rted/markdownlint-problem-matcher@v2
-      - name: Lint markdown
-        run: yarn lint:markdown
+      - name: Run markdown:lint
+        run: yarn markdown:lint

.gitignore

@@ -31,3 +31,6 @@ storybook-static
 # Dev Tools
 .vscode
 .history
+
+#zipped files generated when using dapple. 
+dist.zip

Taskfile.yml

@@ -64,13 +64,15 @@ tasks:
     cmds:
       - task dev:cli -- yarn chromatic
 
+  dev:format:
+    summary: Auto-fix linting errors
+    cmds:
+      - task dev:cli -- yarn format
+
   dev:lint:
     summary: Run linters
     cmds:
-      - task dev:cli -- yarn js:eslint
-      - task dev:cli -- yarn js:lint
-      - task dev:cli -- yarn css:stylelint
-      - task dev:cli -- yarn lint:markdown
+      - task dev:cli -- yarn lint
 
   dev:chromatic:
     summary:  Run Chromatic for visual test

base.scss

@@ -1,23 +1,18 @@
 @import "./src/styles/scss/reset";
-@import "./src/stories/Library/colors/color-variables";
 @import "./src/styles/scss/skeleton";
+@import "./src/styles/scss/tools";
 
-// The imports below are not advised to be moved around, because
-// they cross-reference various defined variables between each other.
+// Legacy - utility classes and other stuff that needs to be cleaned later.
+@import "./src/styles/scss/legacy";
 
 // Library
-@import "./src/stories/Library/breakpoints/breakpoints";
-@import "./src/stories/Library/typography/typography";
 @import "./src/stories/Library/links/links";
 @import "./src/stories/Library/link-filters/link-filters";
 @import "./src/stories/Library/Arrows/arrows";
 @import "./src/stories/Library/Buttons/button/buttons";
 @import "./src/stories/Library/Buttons/button-ui/buttons-ui";
-@import "./src/stories/Library/layout/spacing";
-@import "./src/stories/Library/layout/z-index";
 @import "./src/stories/Library/tag/tag";
 @import "./src/stories/Library/logo/logo";
-@import "./src/stories/Library/pagefold/pagefold";
 @import "./src/stories/Library/dropdown/dropdown";
 @import "./src/stories/Library/breadcrumb/breadcrumb";
 @import "./src/stories/Library/status-label/status-label";
@@ -100,6 +95,12 @@
 @import "./src/stories/Library/Buttons/row-button/row-button";
 @import "./src/stories/Library/Buttons/row-button/row-buttons";
 @import "./src/stories/Library/article-header/article-header";
+@import "./src/stories/Library/event-header/event-header";
+@import "./src/stories/Library/image-credited/image-credited";
+@import "./src/stories/Library/event-description/event-description";
+@import "./src/stories/Library/link-with-icon/link-with-icon";
+@import "./src/stories/Library/rich-text/rich-text";
+@import "./src/stories/Library/medias/medias";
 
 // Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest
 @import "./src/stories/Blocks/autosuggest/autosuggest";
@@ -115,8 +116,7 @@
 @import "./src/stories/Blocks/material-manifestation-item/material-manifestation-item";
 @import "./src/stories/Blocks/advanced-search/advanced-search";
 @import "./src/stories/Blocks/article/article";
+@import "./src/stories/Blocks/event-page/event-page";
 
 @import "./src/styles/scss/shared";
 @import "./src/styles/scss/internal";
-// Should be last to make it easier to overwrite.
-@import "./src/stories/Library/colors/color-classes";

docs/Icon-guidelines.md

@@ -0,0 +1,16 @@
+# Icon Usage Guidelines
+
+This folder contains SVG icons that are used in the design system. When using
+icons from this folder, please follow the guidelines below:
+
+- Icons located in public/ folder is the current source of truth. All icons
+will be placed in this folder. Ensure that icons placed gere are using the
+`class` attribute, and not `className` for SVG element.
+
+- For icons used in React components that require class modifications or
+similar, first create the icon in public/icons, and then manually copy the SVG
+from the `public/icons` folder and make any necessary changes, i.e replacing
+the `class` with `className` or other modifications.
+
+Currently, there is no automated solution for this process that ensures
+consistency for this. This may be changed in the future.

docs/scss.md

@@ -0,0 +1,48 @@
+# SCSS strategy
+
+In December 2023, we have aimed to streamline the way we write SCSS.
+Some of these rules have not been applied on previous code, but moving forward,
+this is what we aim to do.
+
+## BEM naming convention
+
+### Examples of do's and dont's
+
+Assuming we have a Counter block:
+
+- Styling must be placed in a correspondingly named file `counter.scss`
+- `.counter__title` ✅
+- `&__title` ❌ (`&__` should be avoided, to avoid massive indention.)
+- `.counter-title` ❌ (Must start with `.FILE-NAME__`)
+- `.counter__title__text` ❌ (Only one level)
+
+#### Variants and modifiers
+
+Sometimes you'll want to add variants to CSS-only classes. This can be done
+using **modifier classes** - e.g. `.counter--large`, `.counter__title--large`.
+**These classes must not be set alone.** E.g. `.counter__title--large` must not
+exist on an element without also having `.counter__title`.
+
+## Mixins, placeholder and variables
+
+Shared tooling is saved in [src/styles/scss/tools](../src/styles/scss/tools),
+NOT in individual stories.
+
+### Typography
+
+Typography is defined in
+[src/styles/scss/tools/variables.typography.scss](../src/styles/scss/tools/variables.typography.scss).
+These variables, all starting with `$typo__`, can be used, using a mixin,
+`@include typography($typo__h2);` in stories.
+Generally speaking, font styling should be avoided directly in stories, rather
+adding new variants in the `variables.typography.scss` file.
+This way, we can better keep track of what is available, and avoid duplicate
+styling in the future.
+
+## Legacy classes
+
+In the future, we want to apply these rules to old code too. Until then,
+the old classes are supported using the files
+in [src/styles/scss/legacy](../src/styles/scss/legacy).
+
+These classes should **not be used in new components**

package.json

@@ -16,14 +16,16 @@
     "css:lint": "concurrently 'yarn:css:stylelint' 'yarn:css:prettier -- --check' --raw",
     "css:lint:watch": "chokidar 'src/**/*.scss' -c 'yarn css:lint'",
     "css:format": "concurrently 'yarn:css:stylelint -- --fix' 'yarn:css:prettier -- --write' --max-processes 1 --raw",
-    "css:build": "sass base.scss:src/styles/css/base.css",
+    "css:build": "sass base.scss:src/styles/css/base.css --style compressed",
     "css:watch": "yarn css:build -- --watch",
+    "markdown:lint": "markdownlint-cli2",
+    "markdown:format": "markdownlint-cli2-fix",
     "watch": "concurrently 'yarn:js:lint:watch' 'yarn:css:lint:watch'",
-    "dev": "concurrently --raw \"yarn storybook\" \"yarn css:watch\" \"yarn watch\"",
+    "dev": "concurrently --raw 'yarn storybook' 'yarn css:watch' 'yarn watch'",
     "chromatic": "npx chromatic --exit-zero-on-changes",
-    "lint": "concurrently 'yarn:js:lint' 'yarn:css:lint'",
-    "lint:markdown": "markdownlint-cli2",
-    "lint:markdown:fix": "markdownlint-cli2-fix"
+    "lint": "concurrently 'yarn:js:lint' 'yarn:css:lint' 'yarn:markdown:lint'",
+    "format": "concurrently 'yarn:js:format' 'yarn:css:format' 'yarn:markdown:format'"
+
   },
   "browserslist": {
     "production": [

public/icons/README.md

@@ -0,0 +1,3 @@
+# Icon Usage Guidelines
+
+For information on how to use icons for this project, see [icon-guidelines.md](../../docs/Icon-guidelines.md).