diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index b95ab4a76..9925c6216 100644 --- a/.github/workflows/chromatic.yml +++ b/.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 diff --git a/base.scss b/base.scss index 5e584d9d1..966550281 100644 --- a/base.scss +++ b/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"; diff --git a/package.json b/package.json index 08f47309a..6d1ad5918 100644 --- a/package.json +++ b/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", diff --git a/src/stories/Blocks/content-list-page/content-list-page.scss b/src/stories/Blocks/content-list-page/content-list-page.scss index 83f3abe16..1c5f2a70f 100644 --- a/src/stories/Blocks/content-list-page/content-list-page.scss +++ b/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); diff --git a/src/stories/Library/material-header/material-periodical-select.scss b/src/stories/Library/material-header/material-periodical-select.scss index 0fa7e677b..1c0dd8ae1 100644 --- a/src/stories/Library/material-header/material-periodical-select.scss +++ b/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, '); + 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; } diff --git a/src/stories/Library/paragraphs/paragraphs.scss b/src/stories/Library/paragraphs/paragraphs.scss index 53950851d..5b8e99dff 100644 --- a/src/stories/Library/paragraphs/paragraphs.scss +++ b/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"); } } diff --git a/src/stories/Library/simple-link/SimpleLink.stories.tsx b/src/stories/Library/simple-link/SimpleLink.stories.tsx new file mode 100644 index 000000000..df3bcac85 --- /dev/null +++ b/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; + +const Template: ComponentStory = (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", +}; diff --git a/src/stories/Library/simple-link/SimpleLink.tsx b/src/stories/Library/simple-link/SimpleLink.tsx new file mode 100644 index 000000000..cbcb17fce --- /dev/null +++ b/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 ( + + {linkText} + + + ); +}; +export default SimpleLink; diff --git a/src/stories/Library/simple-link/simple-link.scss b/src/stories/Library/simple-link/simple-link.scss new file mode 100644 index 000000000..e1847a3a9 --- /dev/null +++ b/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; + } +} diff --git a/src/stories/Library/slider/Slider.stories.tsx b/src/stories/Library/slider/Slider.stories.tsx index bedd4b10d..cc880dab2 100644 --- a/src/stories/Library/slider/Slider.stories.tsx +++ b/src/stories/Library/slider/Slider.stories.tsx @@ -17,7 +17,7 @@ export default { }, argTypes: { title: { - defaultValue: "Inspiration", + defaultValue: "Get new Inspiration", type: "string", }, items: { diff --git a/src/stories/Library/slider/Slider.tsx b/src/stories/Library/slider/Slider.tsx index 2049b48a5..b70bfad10 100644 --- a/src/stories/Library/slider/Slider.tsx +++ b/src/stories/Library/slider/Slider.tsx @@ -24,7 +24,14 @@ const Slider: FC = ({ title, items }) => {
- {title ?

{title}

: ""} + {title && ( +

) words. + // eslint-disable-next-line react/no-danger + dangerouslySetInnerHTML={{ __html: title }} + /> + )}