2491: Make paddings and icons in poi details consistent and refactor …

…Collapsible
digitalfabrik · Oct 2, 2023 · 44068c9 · 44068c9
1 parent 8cdeaa3
commit 44068c9
Show file tree

Hide file tree

Showing 12 changed files with 98 additions and 189 deletions.
diff --git a/release-notes/2023.10.0/2491-consistent-poi-paddings.yml b/release-notes/2023.10.0/2491-consistent-poi-paddings.yml
@@ -0,0 +1,5 @@
+issue_key: 2491
+show_in_stores: false
+platforms:
+  - web
+en: Make paddings and icons in poi details consistent.
diff --git a/web/src/components/CleanLink.tsx b/web/src/components/CleanLink.tsx
@@ -18,13 +18,7 @@ type CleanLinkProps = {
   newTab?: boolean
 }
 
-const CleanLink: React.FC<CleanLinkProps> = ({
-  to,
-  children,
-  ariaLabel,
-  className,
-  newTab,
-}: CleanLinkProps): ReactElement => {
+const CleanLink = ({ to, children, ariaLabel, className, newTab }: CleanLinkProps): ReactElement => {
   const newTabProps = newTab && { target: '_blank', rel: 'noopener noreferrer' }
   if (isExternalUrl(to)) {
     return (

diff --git a/web/src/components/Collapsible.tsx b/web/src/components/Collapsible.tsx
@@ -1,71 +1,54 @@
-import React, { ReactElement, useEffect, useState } from 'react'
+import React, { ReactElement, useState } from 'react'
 import styled from 'styled-components'
 
-import { UiDirectionType } from 'translations'
-
 import { ArrowBackIcon } from '../assets'
+import { helpers } from '../constants/theme'
 import Icon from './base/Icon'
 
-type CollapsibleProps = {
-  children: ReactElement | string | number
-  title: string | ReactElement
-  initialCollapsed?: boolean
-  direction: UiDirectionType
-}
-
-const ContentWrapper = styled.div<{ direction: string }>`
-  padding: 8px 0;
-  ${props => (props.direction === 'rtl' ? `padding-left: 26px;` : `padding-right: 26px;`)}
-  display: block;
-`
 const CollapsibleHeader = styled.div`
   display: flex;
   justify-content: space-between;
   cursor: pointer;
 `
+
 const Title = styled.div`
   display: flex;
   flex: 1;
   font-weight: 700;
-  font-size: clamp(
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.min},
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.value},
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.max}
-  );
   justify-content: space-between;
+  padding-bottom: 8px;
+  ${helpers.adaptiveFontSize}
 `
+
 const CollapseIcon = styled(Icon)<{ collapsed: boolean }>`
-  font-size: ${props => props.theme.fonts.subTitleFontSize};
-  transform: rotate(-90deg) ${props => (props.collapsed ? 'scale(-1)' : '')};
+  transform: rotate(-90deg) ${props => (!props.collapsed ? 'scale(-1)' : '')};
   width: 16px;
   height: 16px;
 `
 
-const Collapsible: React.FC<CollapsibleProps> = ({
-  children,
-  title,
-  initialCollapsed = true,
-  direction,
-}: CollapsibleProps): ReactElement => {
-  const [collapsed, setCollapsed] = useState<boolean>(initialCollapsed)
+type CollapsibleProps = {
+  children: ReactElement | string | number
+  title: string | ReactElement
+  Description?: ReactElement
+  initialCollapsed?: boolean
+}
 
-  // By changing title reset to initalCollapsed state
-  useEffect(() => {
-    setCollapsed(initialCollapsed)
-  }, [initialCollapsed, title])
+const Collapsible = ({ children, title, Description, initialCollapsed = false }: CollapsibleProps): ReactElement => {
+  const [collapsed, setCollapsed] = useState<boolean>(initialCollapsed)
 
   return (
-    <>
+    <div>
       <CollapsibleHeader
         role='button'
         onClick={() => setCollapsed(!collapsed)}
         tabIndex={0}
-        onKeyPress={() => setCollapsed(!collapsed)}>
-        <Title>{title}</Title>
+        onKeyUp={() => setCollapsed(!collapsed)}>
+        {typeof title === 'string' ? <Title>{title}</Title> : title}
         <CollapseIcon src={ArrowBackIcon} collapsed={collapsed} directionDependent />
       </CollapsibleHeader>
-      {collapsed && <ContentWrapper direction={direction}>{children}</ContentWrapper>}
-    </>
+      {Description}
+      {!collapsed && children}
+    </div>
   )
 }
 

diff --git a/web/src/components/ContactItem.tsx b/web/src/components/ContactItem.tsx
@@ -1,32 +1,21 @@
 import React, { ReactElement } from 'react'
 import styled from 'styled-components'
 
-import dimensions from '../constants/dimensions'
+import { helpers } from '../constants/theme'
 import CleanLink from './CleanLink'
 
 const Marker = styled.img`
   width: 20px;
   height: 20px;
   flex-shrink: 0;
-
-  @media ${dimensions.mediumLargeViewport} {
-    padding: 0 8px;
-  }
   object-fit: contain;
 `
 
 const Link = styled(CleanLink)`
   align-items: center;
   padding-top: 4px;
-  font-size: clamp(
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.min},
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.value},
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.max}
-  );
-
-  @media ${dimensions.smallViewport} {
-    gap: 8px;
-  }
+  gap: 8px;
+  ${helpers.adaptiveFontSize};
 `
 
 type ContactItemProps = {
@@ -36,12 +25,7 @@ type ContactItemProps = {
   content: string
 }
 
-const ContactItem: React.FC<ContactItemProps> = ({
-  iconSrc,
-  iconAlt,
-  link,
-  content,
-}: ContactItemProps): ReactElement => (
+const ContactItem = ({ iconSrc, iconAlt, link, content }: ContactItemProps): ReactElement => (
   <Link to={link}>
     <Marker src={iconSrc} alt={iconAlt} />
     {content}

diff --git a/web/src/components/GoBack.tsx b/web/src/components/GoBack.tsx
@@ -2,6 +2,7 @@ import React, { memo, ReactElement } from 'react'
 import styled, { css, useTheme } from 'styled-components'
 
 import { ArrowBackspaceIcon } from '../assets'
+import { helpers } from '../constants/theme'
 import Spacer from './Spacer'
 import Icon from './base/Icon'
 
@@ -29,11 +30,7 @@ const DetailsHeaderTitle = styled.span`
   align-self: center;
   white-space: pre;
   padding-left: 8px;
-  font-size: clamp(
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.min},
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.value},
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.max}
-  );
+  ${helpers.adaptiveFontSize};
   font-family: ${props => props.theme.fonts.web.contentFont};
 `
 

diff --git a/web/src/components/OpeningHours.tsx b/web/src/components/OpeningHours.tsx
@@ -6,6 +6,7 @@ import styled from 'styled-components'
 import { OpeningHoursModel, weekdays } from 'api-client'
 import { UiDirectionType } from 'translations/src'
 
+import { helpers } from '../constants/theme'
 import Collapsible from './Collapsible'
 import OpeningEntry from './OpeningEntry'
 
@@ -16,24 +17,18 @@ const OpeningLabel = styled.span<{ isOpened: boolean; direction: string }>`
   ${props => (props.direction === 'rtl' ? `padding-left: 12px;` : `padding-right: 12px;`)}
 `
 
-const Content = styled.div`
-  font-size: clamp(
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.min},
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.value},
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.max}
-  );
+const Content = styled.div<{ direction: UiDirectionType }>`
+  ${props => (props.direction === 'rtl' ? `padding-left: 26px;` : `padding-right: 26px;`)}
+  ${helpers.adaptiveFontSize};
 `
 
 const TitleContainer = styled.div`
   display: flex;
   flex: 1;
   font-weight: 700;
-  font-size: clamp(
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.min},
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.value},
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.max}
-  );
+  ${helpers.adaptiveFontSize};
   justify-content: space-between;
+  padding-bottom: 8px;
 `
 
 type OpeningHoursProps = {
@@ -59,12 +54,12 @@ const OpeningHours = ({
   const { t } = useTranslation('pois')
 
   const openingHoursTitle = (
-    <>
+    <TitleContainer>
       <span>{t('openingHours')}</span>
       <OpeningLabel isOpened={isCurrentlyOpen} direction={direction}>
         {t(getOpeningLabel(isTemporarilyClosed, isCurrentlyOpen))}
       </OpeningLabel>
-    </>
+    </TitleContainer>
   )
   if (isTemporarilyClosed) {
     return <TitleContainer>{openingHoursTitle}</TitleContainer>
@@ -75,8 +70,8 @@ const OpeningHours = ({
   }
 
   return (
-    <Collapsible title={openingHoursTitle} direction={direction}>
-      <Content>
+    <Collapsible title={openingHoursTitle}>
+      <Content direction={direction}>
         {openingHours.map((entry, index) => (
           <OpeningEntry
             key={`${weekdays[index]}-OpeningEntry`}

diff --git a/web/src/components/PoiDetails.tsx b/web/src/components/PoiDetails.tsx
@@ -15,6 +15,7 @@ import {
   WebsiteIcon,
 } from '../assets'
 import dimensions from '../constants/dimensions'
+import { helpers } from '../constants/theme'
 import useWindowDimensions from '../hooks/useWindowDimensions'
 import CleanLink from './CleanLink'
 import Collapsible from './Collapsible'
@@ -29,14 +30,16 @@ const DetailsContainer = styled.div`
 `
 
 const StyledIcon = styled(Icon)`
-  width: 20px;
-  height: 20px;
   flex-shrink: 0;
-  padding: 0 8px;
   object-fit: contain;
   align-self: center;
 `
 
+const StyledExternalLinkIcon = styled(StyledIcon)`
+  width: 16px;
+  height: 16px;
+`
+
 const Thumbnail = styled.img`
   height: clamp(120px, 14vh, 160px);
   width: 100%;
@@ -52,40 +55,25 @@ const Thumbnail = styled.img`
 `
 
 const Distance = styled.div`
-  font-size: clamp(
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.min},
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.value},
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.max}
-  );
+  ${helpers.adaptiveFontSize};
 `
 
 const Category = styled.div`
-  font-size: clamp(
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.min},
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.value},
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.max}
-  );
+  ${helpers.adaptiveFontSize};
   color: ${props => props.theme.colors.textSecondaryColor};
   margin-top: 8px;
 `
 
 const AddressContentWrapper = styled.div`
   display: flex;
-  font-size: clamp(
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.min},
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.value},
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.max}
-  );
+  ${helpers.adaptiveFontSize};
+  gap: 8px;
 `
 
 const AddressContent = styled.div`
   display: flex;
   flex-direction: column;
-  font-size: clamp(
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.min},
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.value},
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.max}
-  );
+  ${helpers.adaptiveFontSize};
 
   @media ${dimensions.smallViewport} {
     align-self: center;
@@ -100,26 +88,18 @@ const Heading = styled.div`
 const Subheading = styled.div`
   margin: 12px 0;
   font-weight: 700;
-  font-size: clamp(
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.min},
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.value},
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.max}
-  );
+  ${helpers.adaptiveFontSize};
 `
 
-const LinkContainer = styled.div`
+const Link = styled(CleanLink)`
   display: flex;
-  margin: 16px 0;
+  margin-top: 16px;
+  gap: 8px;
 `
 
 const LinkLabel = styled.span`
   color: #0b57d0;
-  padding-right: 8px;
-  font-size: clamp(
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.min},
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.value},
-    ${props => props.theme.fonts.adaptiveFontSizeSmall.max}
-  );
+  ${helpers.adaptiveFontSize};
   align-self: flex-end;
 `
 
@@ -182,17 +162,15 @@ const PoiDetails = ({ feature, poi, direction, toolbar }: PoiDetailsProps): Reac
             </span>
           </AddressContent>
         </AddressContentWrapper>
-        <LinkContainer>
-          <CleanLink to={externalMapsLink} newTab>
-            {!viewportSmall && <LinkLabel>{t('detailsMapLink')}</LinkLabel>}
-            <StyledIcon src={ExternalLinkIcon} directionDependent />
-          </CleanLink>
-        </LinkContainer>
+        <Link to={externalMapsLink} newTab>
+          {!viewportSmall && <LinkLabel>{t('detailsMapLink')}</LinkLabel>}
+          <StyledExternalLinkIcon src={ExternalLinkIcon} directionDependent />
+        </Link>
       </DetailSection>
       {(!!website || !!phoneNumber || !!email) && (
         <>
           <Spacer borderColor={theme.colors.borderColor} />
-          <Collapsible title={t('contactInformation')} direction={direction}>
+          <Collapsible title={t('contactInformation')}>
             <>
               {!!website && (
                 <ContactItem iconSrc={WebsiteIcon} iconAlt={t('website')} link={website} content={website} />
@@ -226,7 +204,7 @@ const PoiDetails = ({ feature, poi, direction, toolbar }: PoiDetailsProps): Reac
       {content.length > 0 && (
         <>
           <Spacer borderColor={theme.colors.borderColor} />
-          <Collapsible title={t('detailsInformation')} direction={direction}>
+          <Collapsible title={t('detailsInformation')}>
             <RemoteContent html={content} onInternalLinkClick={navigate} smallText />
           </Collapsible>
         </>