Merge pull request #698 from danskernesdigitalebibliotek/develop

Release 2024.32.1

.github/workflows/chromatic.yml

@@ -34,7 +34,7 @@ jobs:
       - run: yarn css:build
 
       - name: Publish to Chromatic
-        uses: chromaui/action@v11.5.4
+        uses: chromaui/action@v11.5.5
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: c6b96f9648b6

base.scss

@@ -145,6 +145,7 @@
 @import "./src/stories/Library/event-list-stacked/event-list-stacked";
 @import "./src/stories/Library/material-search/material-search";
 @import "./src/stories/Library/banner/banner";
+@import "./src/stories/Library/simple-link/simple-link";
 
 // Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest
 @import "./src/stories/Blocks/autosuggest/autosuggest";

package.json

@@ -70,7 +70,7 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react": "^7.34.4",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-webpack-plugin": "^4.2.0",
     "flatpickr": "^4.6.13",
@@ -83,7 +83,7 @@
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "react-scripts": "^4.0.3",
-    "sass": "^1.77.6",
+    "sass": "^1.77.8",
     "skeleton-screen-css": "^1.1.0",
     "storybook-addon-designs": "^6.2.1",
     "stylelint": "^14.16.1",

src/stories/Blocks/content-list-page/content-list-page.scss

@@ -8,6 +8,14 @@
   @include typography($typo__h2);
 }
 
+.content-list-page__subheading {
+  @extend %rich-text;
+
+  @include layout-container($block-max-width__large);
+  @include typography($typo__body-small);
+  margin-top: $s-lg;
+}
+
 .content-list-page__filters {
   @include layout-container($block-max-width__large);
 

src/stories/Library/material-header/material-periodical-select.scss

@@ -20,7 +20,7 @@ $icon-position: 10px;
       background-repeat: no-repeat;
       background-size: 6px;
       // This is a copy from  icons/basic/icon-select-arrow
-      background-image: url('data:image/svg+xml;utf8,<svg width="6" height="5" viewBox="0 0 6 5" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4.75821 0.708313L3 3.95101L1.24179 0.708313L4.75821 0.708313Z" fill="black" stroke="black"/> </svg>');
+      background-image: url("data:image/svg+xml;utf8,%3Csvg width='6' height='5' viewBox='0 0 6 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.75821 0.708313L3 3.95101L1.24179 0.708313L4.75821 0.708313Z' fill='black' stroke='black'/%3E%3C/svg%3E");
       background-position: 100%;
       padding-right: $icon-position;
     }

src/stories/Library/paragraphs/paragraphs.scss

@@ -8,13 +8,15 @@
 
 // Some paragraphs should go flush against each-other.
 .paragraphs__item--links,
+.paragraphs__item--simple_links,
 .paragraphs__item--files,
 .paragraphs__item--accordion {
   @include layout-container($block-max-width__medium);
 
   + .paragraphs__item--accordion,
   + .paragraphs__item--files,
-  + .paragraphs__item--links {
+  + .paragraphs__item--links,
+  + .paragraphs__item--simple_links {
     @include block-spacing("sibling");
   }
 }

src/stories/Library/simple-link/SimpleLink.stories.tsx

@@ -0,0 +1,67 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import SimpleLink from "./SimpleLink";
+
+export default {
+  title: "Library / Simple Link",
+  component: SimpleLink,
+  decorators: [withDesign],
+  argTypes: {
+    linkText: {
+      control: {
+        type: "text",
+        defaultValue: "Link text",
+      },
+    },
+    href: {
+      control: {
+        type: "text",
+        defaultValue: "https://www.google.com",
+      },
+    },
+    target: {
+      control: {
+        type: "select",
+        defaultValue: "_self",
+        options: ["_blank", "_self"],
+      },
+    },
+    args: {
+      linkText: "Link text",
+      href: "https://www.google.com",
+      target: "_self",
+    },
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=7741-58648&t=Facl3aeVt0fs5t5v-0",
+    },
+  },
+} as ComponentMeta<typeof SimpleLink>;
+
+const Template: ComponentStory<typeof SimpleLink> = (args) => (
+  <SimpleLink {...args} />
+);
+
+export const OpensInSameWindow = Template.bind({});
+OpensInSameWindow.args = {
+  linkText: "Link that opens in same window",
+  href: "https://www.google.com",
+  target: "_self",
+};
+
+export const ExternalLink = Template.bind({});
+ExternalLink.args = {
+  linkText: "Link that opens in new window",
+  href: "https://www.google.com",
+  target: "_blank",
+};
+
+export const WithLongText = Template.bind({});
+WithLongText.args = {
+  linkText:
+    "This is a very long link text that should wrap to the next line, demonstrating how lengthy text can be displayed within a link element to ensure proper wrapping and readability across different screen sizes and resolutions.",
+  href: "https://www.google.com",
+  target: "_self",
+};

src/stories/Library/simple-link/SimpleLink.tsx

@@ -0,0 +1,21 @@
+import { ReactComponent as ArrowSmallRight } from "../Arrows/icon-arrow-ui/icon-arrow-ui-small-right.svg";
+
+export type SimpleLinkProps = {
+  linkText: string;
+  href: string;
+  target: "_blank" | "_self";
+};
+
+const SimpleLink = ({ linkText, href, target = "_self" }: SimpleLinkProps) => {
+  return (
+    <a
+      href={href}
+      target={target}
+      className="simple-link arrow__hover--right-small"
+    >
+      {linkText}
+      <ArrowSmallRight />
+    </a>
+  );
+};
+export default SimpleLink;

src/stories/Library/simple-link/simple-link.scss

@@ -0,0 +1,17 @@
+$_simple_link_min_height: 80px;
+.simple-link {
+  display: grid;
+  align-items: center;
+  grid-template-columns: 1fr min-content;
+  gap: $s-xl;
+  min-height: $_simple_link_min_height;
+  border: 1px solid $color__global-tertiary-1;
+  padding: $s-lg $s-xl;
+  text-decoration: none;
+  @include typography($typo__body-large);
+  color: $color__global-grey;
+
+  > svg {
+    margin-right: 40px;
+  }
+}

src/stories/Library/slider/Slider.stories.tsx

@@ -17,7 +17,7 @@ export default {
   },
   argTypes: {
     title: {
-      defaultValue: "Inspiration",
+      defaultValue: "Get <u>new</u> Inspiration",
       type: "string",
     },
     items: {

src/stories/Library/slider/Slider.tsx

@@ -24,7 +24,14 @@ const Slider: FC<SliderProps> = ({ title, items }) => {
 
       <div className="slider swiper">
         <div className="slider__header">
-          {title ? <h2 className="slider__title">{title}</h2> : ""}
+          {title && (
+            <h2
+              className="slider__title"
+              // We need to be able to replicate our WYSIWYG field in Drupal that makes it possible to underline (<u>) words.
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{ __html: title }}
+            />
+          )}
 
           <div className="slider__controls" data-glide-el="controls">
             <button

src/stories/Library/slider/slider.scss

@@ -6,10 +6,8 @@
 }
 
 .slider__title {
-  @extend %title-underline;
   @include typography($typo__h2);
-
-  display: flex;
+  @include u-extending-underline-style;
 }
 
 .slider__controls {

src/styles/scss/tools/placeholder.scss

@@ -16,6 +16,7 @@
   }
 }
 
+// Todo: Should be removed. Use @mixin u-extending-underline-style instead.
 %title-underline {
   position: relative;
   &::before {
@@ -28,21 +29,18 @@
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
-    // stylelint-disable -- Stylelint really does not enjoy embedded IMGs.
-    background-image: url('data:image/svg+xml,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 852.2 17" style="enable-background:new 0 0 852.2 17;" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}</style><path class="st0" d="M7.9,8.7c52-1.3,131.1-3,227.7-4.3c83.7-1.1,243.5,1.2,325.2,4.3c43.3,1.6,166.2-4.9,284.4-2.7"/></svg>');
-    // stylelint-enable
+    background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 852.2 17' style='enable-background:new 0 0 852.2 17;' xml:space='preserve'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M7.9,8.7c52-1.3,131.1-3,227.7-4.3c83.7-1.1,243.5,1.2,325.2,4.3c43.3,1.6,166.2-4.9,284.4-2.7'/%3E%3C/svg%3E");
   }
 }
 
+// Todo: Should be removed. Use @mixin u-extending-underline-style instead.
 %title-underline--narrow {
   @extend %title-underline;
 
   &::before {
     width: 80px;
     right: auto;
-    // stylelint-disable -- Stylelint really does not enjoy embedded IMGs.
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="81" height="16" viewBox="0 0 81 16" fill="none"><path d="M3 10C29.8561 3.71312 50.1886 4.9889 78 5.35819" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
-    // stylelint-enable
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='81' height='16' viewBox='0 0 81 16' fill='none'%3E%3Cpath d='M3 10C29.8561 3.71312 50.1886 4.9889 78 5.35819' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   }
 }