Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add link with icon #243

Merged
merged 8 commits into from
Oct 12, 2023
Merged

Add link with icon #243

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
81c3fdb
feat(ui): create `AdvancedLink` component
AliKdhim87 Oct 12, 2023
894fc2a
feat(pdc-frontend): replace `AdvancedLink` with `ReactionLink`
AliKdhim87 Oct 12, 2023
5e78a2f
fix(pdc-frontend): fix `ButtonLink` icon issue
AliKdhim87 Oct 12, 2023
b9e7d4f
feat(pdc-dashboard): improve link data model & add it to the sections
AliKdhim87 Oct 12, 2023
75d995e
feat(pdc-frontend): integrate link data model into frontend
AliKdhim87 Oct 12, 2023
4fa89b9
feat(pdc-dashboard): convert the button-link icon property to enumera…
AliKdhim87 Oct 12, 2023
dbf4aa1
feat(pdc-frontend): use the new icon property approach
AliKdhim87 Oct 12, 2023
547794b
chore(pdc-dashboard): improve the sections field description
AliKdhim87 Oct 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ...core-store.plugin_content_manager_configuration_components##components.block-content.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
},
"content": {
"edit": {
"label": "Page inhoud",
"label": "Inhoud",
"description": "",
"placeholder": "",
"visible": true,
Expand Down
36 changes: 18 additions & 18 deletions ...c/core-store.plugin_content_manager_configuration_components##components.button-link.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
"href": {
"edit": {
"label": "Href",
"description": "Geeft de koppelingbestemming aan wanneer er op de knop wordt geklikt",
"description": "De website-adres waarnaar je wilt linken.",
"placeholder": "",
"visible": true,
"editable": true
Expand All @@ -48,51 +48,51 @@
"sortable": true
}
},
"icon": {
"label": {
"edit": {
"label": "Icon",
"description": "Hiermee kunt u een pijl icoon naast de knop opnemen.",
"label": "Label",
"description": "Voegt een titel of beschrijving boven de knop toe.",
"placeholder": "",
"visible": true,
"editable": true
},
"list": {
"label": "icon",
"label": "label",
"searchable": true,
"sortable": true
}
},
"label": {
"button_link_appearance": {
"edit": {
"label": "Label",
"description": "Voegt een titel of beschrijving boven de knop toe.",
"label": "Appearance",
"description": "Beheert de visuele stijl",
"placeholder": "",
"visible": true,
"editable": true
},
"list": {
"label": "label",
"label": "button_link_appearance",
"searchable": true,
"sortable": true
}
},
"button_link_appearance": {
"icon": {
"edit": {
"label": "Appearance",
"description": "Beheert de visuele stijl",
"label": "Icon",
"description": "Kies een icoon om na de tekst weer te geven.",
"placeholder": "",
"visible": true,
"editable": true
},
"list": {
"label": "button_link_appearance",
"label": "icon",
"searchable": true,
"sortable": true
}
}
},
"layouts": {
"list": ["id", "text", "href", "icon"],
"list": ["id", "text", "href"],
"edit": [
[
{
Expand All @@ -106,17 +106,17 @@
],
[
{
"name": "icon",
"size": 4
"name": "label",
"size": 6
},
{
"name": "label",
"name": "button_link_appearance",
"size": 6
}
],
[
{
"name": "button_link_appearance",
"name": "icon",
"size": 6
}
]
Expand Down
34 changes: 17 additions & 17 deletions ...fig/sync/core-store.plugin_content_manager_configuration_components##components.link.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
"filterable": true,
"searchable": true,
"pageSize": 10,
"mainField": "label",
"defaultSortBy": "label",
"mainField": "text",
"defaultSortBy": "text",
"defaultSortOrder": "ASC"
},
"metadatas": {
Expand All @@ -20,24 +20,24 @@
"sortable": false
}
},
"label": {
"text": {
"edit": {
"label": "label",
"description": "",
"label": "Text",
"description": "Specificeert de weergegeven tekst",
"placeholder": "",
"visible": true,
"editable": true
},
"list": {
"label": "label",
"label": "text",
"searchable": true,
"sortable": true
}
},
"href": {
"edit": {
"label": "href",
"description": "",
"label": "Href",
"description": "De website-adres waarnaar je wilt linken.",
"placeholder": "",
"visible": true,
"editable": true
Expand All @@ -48,38 +48,38 @@
"sortable": true
}
},
"external": {
"icon": {
"edit": {
"label": "external",
"description": "",
"label": "Icon",
"description": "Kies een icoon om vóór de tekst weer te geven.",
"placeholder": "",
"visible": true,
"editable": true
},
"list": {
"label": "external",
"label": "icon",
"searchable": true,
"sortable": true
}
}
},
"layouts": {
"list": ["id", "label", "href", "external"],
"list": ["id", "href", "text", "icon"],
"edit": [
[
{
"name": "label",
"name": "href",
"size": 6
},
{
"name": "href",
"name": "text",
"size": 6
}
],
[
{
"name": "external",
"size": 4
"name": "icon",
"size": 6
}
]
]
Expand Down
2 changes: 1 addition & 1 deletion ...c/core-store.plugin_content_manager_configuration_components##components.logo-button.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
"href": {
"edit": {
"label": "Href",
"description": "Geeft de koppelingbestemming aan wanneer er op de knop wordt geklikt",
"description": "De website-adres waarnaar je wilt linken.",
"placeholder": "",
"visible": true,
"editable": true
Expand Down
3 changes: 2 additions & 1 deletion apps/pdc-dashboard/src/api/product/content-types/product/schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,8 @@
"components.multi-columns-button",
"components.button-link",
"components.accordion-section",
"components.image"
"components.image",
"components.link"
],
"required": true,
"min": 1
Expand Down
7 changes: 4 additions & 3 deletions apps/pdc-dashboard/src/components/components/button-link.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,16 @@
"type": "string",
"required": true
},
"icon": {
"type": "boolean"
},
"label": {
"type": "string"
},
"button_link_appearance": {
"type": "enumeration",
"enum": ["primary", "secondary"]
},
"icon": {
"type": "enumeration",
"enum": ["arrow"]
}
}
}
16 changes: 10 additions & 6 deletions apps/pdc-dashboard/src/components/components/link.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,22 @@
"collectionName": "components_components_links",
"info": {
"displayName": "Link",
"icon": "link"
"icon": "link",
"description": ""
},
"options": {},
"attributes": {
"label": {
"type": "string"
"text": {
"type": "string",
"required": true
},
"href": {
"type": "string"
"type": "string",
"required": true
},
"external": {
"type": "boolean"
"icon": {
"type": "enumeration",
"enum": ["arrow"]
}
}
}
13 changes: 9 additions & 4 deletions apps/pdc-frontend/src/app/[locale]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import { Metadata } from 'next';
import { Heading2, PageTitle } from '@/components';
import { AdvancedLink, Heading2, PageTitle } from '@/components';
import { BottomBar, BottomBarItem } from '@/components/BottomBar';
import { Breadcrumbs } from '@/components/Breadcrumb';
import { ProductNavigation } from '@/components/ProductNavigation';
import { alphabet } from '@/components/ProductNavigation/alphabet';
import { ReactionLink } from '@/components/ReactionLink';
import { ScrollToTopButton } from '@/components/ScrollToTopButton';
import { TopTask, TopTaskIconsTypes } from '@/components/Toptask';
import { CHECK_ALPHABETICALLY_PRODUCTS_AVAILABILITY } from '@/query';
Expand Down Expand Up @@ -116,9 +115,15 @@ const Home = async ({ params: { locale } }: { params: any }) => {
</div>
<BottomBar>
<BottomBarItem>
<ReactionLink href="https://www.kcmsurvey.com/qSwudd733b9c27c2e91ba8c7b598MaSd?webpagina=Alle%20producten">
<AdvancedLink
rel="noopener noreferrer"
external
icon="arrow"
hint="danger"
href="https://www.kcmsurvey.com/qSwudd733b9c27c2e91ba8c7b598MaSd?webpagina=Alle%20producten"
>
{t('actions.reaction-link')}
</ReactionLink>
</AdvancedLink>
</BottomBarItem>
<BottomBarItem>
<ScrollToTopButton>{t('actions.scroll-to-top')}</ScrollToTopButton>
Expand Down
33 changes: 26 additions & 7 deletions apps/pdc-frontend/src/app/[locale]/products/[slug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import isAbsoluteUrl from 'is-absolute-url';
import { Metadata } from 'next';
import { cookies, draftMode } from 'next/headers';
import Image from 'next/image';
Expand All @@ -7,21 +8,22 @@ import { useTranslation } from '@/app/i18n';
import { fallbackLng } from '@/app/i18n/settings';
import {
AccordionProvider,
AdvancedLink,
Article,
ButtonLink,
Heading3,
Img,
LogoButton,
Markdown,
MultiColumnsButton,
PageTitle,
Paragraph,
SpotlightSection,
UtrechtIconArrow,
} from '@/components';
import { BottomBar, BottomBarItem } from '@/components/BottomBar';
import { Breadcrumbs } from '@/components/Breadcrumb';
import { FAQSection } from '@/components/FAQSection';
import { PreviewAlert } from '@/components/PreviewAlert';
import { ReactionLink } from '@/components/ReactionLink';
import { ScrollToTopButton } from '@/components/ScrollToTopButton';
import { GET_PRODUCT_BY_SLUG_FETCH } from '@/query';
import { getImageBaseUrl } from '@/util';
Expand Down Expand Up @@ -158,14 +160,25 @@ const Product = async ({ params: { locale, slug }, searchParams }: ProductProps)
case 'ComponentComponentsButtonLink':
return component.text && component.href ? (
<div>
<Paragraph>{component?.label}</Paragraph>
<ButtonLink appearance={`${component?.button_link_appearance}-action-button`} href={component.href}>
{component.text}
{component?.label && <Heading3>{component?.label}</Heading3>}
<ButtonLink
appearance={`${component?.button_link_appearance}-action-button`}
href={component.href}
external={isAbsoluteUrl(component.href)}
rel={isAbsoluteUrl(component.href) ? 'noopener noreferrer' : undefined}
>
{component.text} {component?.icon === 'arrow' && <UtrechtIconArrow />}
</ButtonLink>
</div>
) : null;
case 'ComponentComponentsMultiColumnsButton':
return <MultiColumnsButton columns={component.column} />;
case 'ComponentComponentsLink':
return component?.href && component?.text ? (
<AdvancedLink href={component.href} external={isAbsoluteUrl(component.href)} icon={component.iconList}>
{component.text}
</AdvancedLink>
) : null;
default:
return <></>;
}
Expand Down Expand Up @@ -207,9 +220,15 @@ const Product = async ({ params: { locale, slug }, searchParams }: ProductProps)
</Article>
<BottomBar>
<BottomBarItem>
<ReactionLink href="https://www.kcmsurvey.com/qSwudd733b9c27c2e91ba8c7b598MaSd?webpagina=Alle%20producten">
<AdvancedLink
rel="noopener noreferrer"
external
icon="arrow"
hint="danger"
href="https://www.kcmsurvey.com/qSwudd733b9c27c2e91ba8c7b598MaSd?webpagina=Alle%20producten"
>
{t('actions.reaction-link')}
</ReactionLink>
</AdvancedLink>
</BottomBarItem>
<BottomBarItem>
<ScrollToTopButton>{t('actions.scroll-to-top')}</ScrollToTopButton>
Expand Down
Loading