From 4db95009f866743ac8264317df9caa132ab3393e Mon Sep 17 00:00:00 2001 From: Borghild Date: Fri, 18 Oct 2024 20:13:55 +0200 Subject: [PATCH 1/3] :art: initial --- sanityv3/schemas/objects/textWithIconArray.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/sanityv3/schemas/objects/textWithIconArray.tsx b/sanityv3/schemas/objects/textWithIconArray.tsx index 855992956..13e615a3b 100644 --- a/sanityv3/schemas/objects/textWithIconArray.tsx +++ b/sanityv3/schemas/objects/textWithIconArray.tsx @@ -1,7 +1,11 @@ import { view_module } from '@equinor/eds-icons' import blocksToText from '../../helpers/blocksToText' import { EdsIcon } from '../../icons' +import CompactBlockEditor from '../components/CompactBlockEditor' import { SchemaType } from '../../types' +import { configureTitleBlockContent } from '../editors' + +const titleContentType = configureTitleBlockContent() export default { type: 'object', @@ -14,6 +18,20 @@ export default { }, ], fields: [ + { + name: 'title', + type: 'array', + inputComponent: CompactBlockEditor, + of: [titleContentType], + title: 'Title', + description: 'The list of icon/text should have a heading, can be hidden below', + }, + { + name: 'hideTitle', + type: 'boolean', + title: 'Hide title', + description: 'Hides title, but is available for screen readers and gives an meaningful heading for the list', + }, { type: 'array', name: 'group', From 6537b4d44d621d63de716846bf8194adca37f512 Mon Sep 17 00:00:00 2001 From: Borghild Date: Mon, 21 Oct 2024 19:17:28 +0200 Subject: [PATCH 2/3] :art: upgrade textwithicon and its array to tw and with title --- web/components/src/TextWithIcon/Media.tsx | 14 ---- web/components/src/TextWithIcon/Text.tsx | 14 ---- .../src/TextWithIcon/TextWithIcon.tsx | 12 --- web/components/src/TextWithIcon/Title.tsx | 18 ----- web/components/src/TextWithIcon/index.ts | 17 ---- web/components/src/index.ts | 1 - web/core/TextWithIcon/TextWithIcon.tsx | 50 ++++++++++++ web/lib/queries/common/pageContentFields.ts | 5 ++ .../shared/SharedPageContent.tsx | 2 +- .../topicPages/TextWithIconArray.tsx | 79 ------------------- .../TextWithIconArray/TextWithIconArray.tsx | 54 +++++++++++++ web/types/types.ts | 2 + 12 files changed, 112 insertions(+), 156 deletions(-) delete mode 100644 web/components/src/TextWithIcon/Media.tsx delete mode 100644 web/components/src/TextWithIcon/Text.tsx delete mode 100644 web/components/src/TextWithIcon/TextWithIcon.tsx delete mode 100644 web/components/src/TextWithIcon/Title.tsx delete mode 100644 web/components/src/TextWithIcon/index.ts create mode 100644 web/core/TextWithIcon/TextWithIcon.tsx delete mode 100644 web/pageComponents/topicPages/TextWithIconArray.tsx create mode 100644 web/sections/TextWithIconArray/TextWithIconArray.tsx diff --git a/web/components/src/TextWithIcon/Media.tsx b/web/components/src/TextWithIcon/Media.tsx deleted file mode 100644 index 21842bea8..000000000 --- a/web/components/src/TextWithIcon/Media.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { HTMLAttributes } from 'react' -import styled from 'styled-components' - -type MediaProps = HTMLAttributes - -const Img = styled.div` - align-self: center; - grid-area: media; - margin-bottom: var(--space-medium); -` - -export const Media = ({ children, ...rest }: MediaProps) => { - return {children} -} diff --git a/web/components/src/TextWithIcon/Text.tsx b/web/components/src/TextWithIcon/Text.tsx deleted file mode 100644 index 2cab9f54b..000000000 --- a/web/components/src/TextWithIcon/Text.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { HTMLAttributes } from 'react' -import styled from 'styled-components' - -type TextProps = HTMLAttributes - -const StyledText = styled.div` - p { - margin-bottom: 0; - } -` - -export const Text = ({ children, ...rest }: TextProps) => { - return {children} -} diff --git a/web/components/src/TextWithIcon/TextWithIcon.tsx b/web/components/src/TextWithIcon/TextWithIcon.tsx deleted file mode 100644 index 2c8c722e7..000000000 --- a/web/components/src/TextWithIcon/TextWithIcon.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { HTMLAttributes } from 'react' -import styled from 'styled-components' - -type TextWithIconProps = HTMLAttributes - -const Container = styled.div` - text-align: center; -` - -export const TextWithIcon = ({ children, ...rest }: TextWithIconProps) => { - return {children} -} diff --git a/web/components/src/TextWithIcon/Title.tsx b/web/components/src/TextWithIcon/Title.tsx deleted file mode 100644 index f61827243..000000000 --- a/web/components/src/TextWithIcon/Title.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { HTMLAttributes } from 'react' -import { Heading } from '../Heading' -import styled from 'styled-components' - -type TitleProps = HTMLAttributes - -const StyledTitle = styled(Heading)` - margin: 0; - text-align: center; -` - -export const Title = ({ children, ...rest }: TitleProps) => { - return ( - - {children} - - ) -} diff --git a/web/components/src/TextWithIcon/index.ts b/web/components/src/TextWithIcon/index.ts deleted file mode 100644 index 6a256b8c2..000000000 --- a/web/components/src/TextWithIcon/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { TextWithIcon as TextWithIconWrapper } from './TextWithIcon' -import { Media } from './Media' -import { Title } from './Title' -import { Text } from './Text' - -type TextWithIconProps = typeof TextWithIconWrapper & { - Media: typeof Media - Title: typeof Title - Text: typeof Text -} - -const TextWithIcon = TextWithIconWrapper as TextWithIconProps -TextWithIcon.Media = Media -TextWithIcon.Title = Title -TextWithIcon.Text = Text - -export { TextWithIcon } diff --git a/web/components/src/index.ts b/web/components/src/index.ts index 63a786766..26e7c653f 100644 --- a/web/components/src/index.ts +++ b/web/components/src/index.ts @@ -10,7 +10,6 @@ export * from './Teaser' export * from './Eyebrow' export * from './Backgrounds' export * from './FigureCaption' -export * from './TextWithIcon' export * from './Accordion' export * from './Menu' export * from './Heading' diff --git a/web/core/TextWithIcon/TextWithIcon.tsx b/web/core/TextWithIcon/TextWithIcon.tsx new file mode 100644 index 000000000..f5a7e100b --- /dev/null +++ b/web/core/TextWithIcon/TextWithIcon.tsx @@ -0,0 +1,50 @@ +import { HTMLAttributes, forwardRef } from 'react' +import envisTwMerge from '../../twMerge' +import { IconData } from '@equinor/eds-icons' +import { TransformableIcon } from '../../icons/TransformableIcon' +import { ImageWithAlt } from '../../types' +import Img from 'next/image' +import { urlFor } from '../../common/helpers' +import { PortableTextBlock } from '@portabletext/types' +import { Typography } from '@core/Typography' +import Blocks from '../../pageComponents/shared/portableText/Blocks' + +export type TextWithIconProps = { + title?: string + content?: PortableTextBlock[] + iconData?: IconData + image?: ImageWithAlt + /** Icondata or imageUrl styling */ + iconClassName?: string +} & HTMLAttributes + +export const TextWithIcon = forwardRef( + ({ title, content, iconData, className = '', image, iconClassName = '', ...rest }, ref) => { + return ( +
+ {iconData && } + {image && image?.asset && ( + {image?.isDecorative + )} + {title && ( + + {title} + + )} + {content && } +
+ ) + }, +) diff --git a/web/lib/queries/common/pageContentFields.ts b/web/lib/queries/common/pageContentFields.ts index ed64e5d22..aaf0203f5 100644 --- a/web/lib/queries/common/pageContentFields.ts +++ b/web/lib/queries/common/pageContentFields.ts @@ -119,6 +119,11 @@ _type == "keyNumbers" =>{ _type == "textWithIconArray"=>{ "type": _type, "id": _key, + title[]{ + ..., + ${markDefs}, + }, + hideTitle, "group": group[]{ "id": _key, title, diff --git a/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx b/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx index 52d37f901..0f6be4e05 100644 --- a/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx +++ b/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx @@ -3,7 +3,6 @@ import TextBlock from '../../topicPages/TextBlock' import FullWidthImage from '../../topicPages/FullWidthImage' import FullWidthVideo from '../../topicPages/FullWidthVideo' import Figure from '../../topicPages/Figure' -import TextWithIconArray from '../../topicPages/TextWithIconArray' import PageQuote from '../../topicPages/PageQuote' import AccordionBlock from '../../topicPages/Accordion/AccordionBlock' import PromoTileArray from '../../../sections/PromoTiles/PromoTileArray' @@ -61,6 +60,7 @@ import { BackgroundContainerProps } from '@components/Backgrounds' import VideoPlayerCarousel from '@sections/VideoPlayerCarousel/VideoPlayerCarousel' import ImageCarousel from '@sections/ImageCarousel/ImageCarousel' import { AnchorLinkList } from '@sections/AnchorLinkList' +import TextWithIconArray from '@sections/TextWithIconArray/TextWithIconArray' type DefaultComponent = { id?: string diff --git a/web/pageComponents/topicPages/TextWithIconArray.tsx b/web/pageComponents/topicPages/TextWithIconArray.tsx deleted file mode 100644 index 2198469bb..000000000 --- a/web/pageComponents/topicPages/TextWithIconArray.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import { TextWithIcon, BackgroundContainer } from '@components' -import { urlFor } from '../../common/helpers' -import styled from 'styled-components' -import Img from 'next/image' - -import IngressText from '../shared/portableText/IngressText' -import type { TextWithIconArrayData, TextWithIconItem, ImageWithAlt } from '../../types/index' -import { twMerge } from 'tailwind-merge' - -const Container = styled.div<{ items: number }>` - --max-content-width: 1440px; - display: grid; - justify-content: center; - grid-template-columns: repeat(auto-fit, minmax(calc(13 * var(--space-medium)), calc(18 * var(--space-medium)))); - grid-gap: var(--space-xxLarge); - max-width: var(--max-content-width); - - @media (min-width: 750px) { - grid-template-columns: ${({ items }) => (items === 2 || items === 4 ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)')}; - } - - @media (min-width: 1300px) { - ${({ items }) => - items === 4 && { - gridTemplateColumns: 'repeat(4, 1fr)', - }} - } -` - -const { Title, Media, Text } = TextWithIcon - -type TextWithIconArrayProps = { - data: TextWithIconArrayData - anchor?: string - className?: string -} - -const getImgSrc = (img: ImageWithAlt): string => urlFor(img).size(150, 150).auto('format').toString() || '' - -const TextWithIconArray = ({ data, anchor, className }: TextWithIconArrayProps) => { - const { designOptions, group } = data - - if (!group) return null - - return ( - - - {group.map((item: TextWithIconItem) => { - const { icon, title, text, id } = item - const altTag = icon?.isDecorative ? '' : icon?.alt || '' - return ( - - {icon && icon.asset && ( - - {altTag} - - )} - {title && {title}} - {text && ( - - - - )} - - ) - })} - - - ) -} - -export default TextWithIconArray diff --git a/web/sections/TextWithIconArray/TextWithIconArray.tsx b/web/sections/TextWithIconArray/TextWithIconArray.tsx new file mode 100644 index 000000000..9d0c433b5 --- /dev/null +++ b/web/sections/TextWithIconArray/TextWithIconArray.tsx @@ -0,0 +1,54 @@ +import { BackgroundContainer } from '@components' +import type { TextWithIconArrayData, TextWithIconItem } from '../../types/index' +import { twMerge } from 'tailwind-merge' +import { TextWithIcon } from '@core/TextWithIcon/TextWithIcon' +import { Heading } from '@core/Typography' + +type TextWithIconArrayProps = { + data: TextWithIconArrayData + anchor?: string + className?: string + listClassName?: string +} + +const TextWithIconArray = ({ data, anchor, className = '', listClassName = '' }: TextWithIconArrayProps) => { + const { designOptions, group, title, hideTitle } = data + + if (!group) return null + + return ( + + {title && } +
    + {group.map((item: TextWithIconItem) => { + const { icon, title, text, id } = item + return ( +
  • + +
    • + ) + })} +
+ + ) +} + +export default TextWithIconArray diff --git a/web/types/types.ts b/web/types/types.ts index 913195af2..6713355e8 100644 --- a/web/types/types.ts +++ b/web/types/types.ts @@ -186,6 +186,8 @@ export type TextWithIconItem = { export type TextWithIconArrayData = { type: string id: string + title?: PortableTextBlock[] + hideTitle?: boolean group: TextWithIconItem[] designOptions: DesignOptions } From e801a842c4cd1f24d7d60cb601cb0482555b13dd Mon Sep 17 00:00:00 2001 From: Borghild Date: Mon, 21 Oct 2024 19:21:30 +0200 Subject: [PATCH 3/3] :art: remove inline styles --- web/core/TextWithIcon/TextWithIcon.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/web/core/TextWithIcon/TextWithIcon.tsx b/web/core/TextWithIcon/TextWithIcon.tsx index f5a7e100b..11a718083 100644 --- a/web/core/TextWithIcon/TextWithIcon.tsx +++ b/web/core/TextWithIcon/TextWithIcon.tsx @@ -30,9 +30,10 @@ export const TextWithIcon = forwardRef( height="150" alt={image?.isDecorative ? '' : image?.alt || ''} role={image?.isDecorative ? 'presentation' : undefined} - style={{ width: '150px', height: '150px', margin: 'auto' }} className={envisTwMerge( - `self-center + `size-[150px] + m-auto + self-center `, iconClassName, )}