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

🧹 Rewrite to tailwind and cleanup #2786 #2787

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+29 −68
Open

🧹 Rewrite to tailwind and cleanup #2786 #2787

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
10 changes: 6 additions & 4 deletions sanityv3/schemas/objects/stockValuesApi.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,12 @@ const ApiDescription = () => {
return (
<Box>
<Heading size={2}>How to use</Heading>
<Text style={{ margin: '4px 0' }}>
This component will automatically display up to date Equinor stock values from the OSE and NYSE. No
configuration is required.
</Text>
<span style={{ display: 'block', marginTop: '25px' }}>
<Text>
This component will automatically display up to date Equinor stock values from the OSE and NYSE. No
configuration is required.
</Text>
</span>
</Box>
)
}
Expand Down
69 changes: 16 additions & 53 deletions web/pageComponents/topicPages/StockValues.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import useSWR from 'swr'
import * as xml2js from 'xml2js'
import styled from 'styled-components'
import { BackgroundContainer, FormattedDate } from '@components'
import { FormattedMessage } from 'react-intl'
import type { StockValuesData } from '../../types/index'
Expand Down Expand Up @@ -39,42 +38,6 @@ const fetchData = async (url: string) => {
}
}

const Container = styled.div`
display: grid;
grid-template-columns: 1fr;
grid-gap: var(--space-large);

@media (min-width: 750px) {
grid-template-columns: 1fr 1fr;
}
`

const Item = styled.div`
text-align: center;
`

const Price = styled.span`
font-size: var(--typeScale-4);
font-weight: var(--fontWeight-medium);
color: var(--moss-green-100);
margin: 0 var(--space-xSmall);
`

const Subtitle = styled.p`
font-weight: var(--fontWeight-bolder);
margin: 0 0 var(--space-xSmall);
padding: 0;
`

const MarketTitle = styled(Subtitle)`
text-transform: uppercase;
`

const TimeDelay = styled.span`
font-style: italic;
font-weight: var(--fontWeight-medium);
`

const ENDPOINT = `https://tools.eurolandir.com/tools/pricefeed/xmlirmultiiso5.aspx?companyid=9053`

// @TODO: use correct datetime & formatting
Expand All @@ -101,33 +64,33 @@ const StockValues = ({

return (
<BackgroundContainer background={background} {...rest} id={anchor}>
<Container className={twMerge(`pb-page-content px-layout-lg max-w-viewport mx-auto`, className)}>
<Item>
<div className={twMerge(`pb-page-content px-layout-lg max-w-viewport mx-auto grid grid-cols-[1fr] gap-8 sm:grid-cols-[1fr,1fr]`, className)}>
<div className="text-center">
<p>
EQNR
<Price>{data.OSE?.Quote}</Price>
<span className="text-xl my-0 mx-1 text-moss-green-100 font-medium">{data.OSE?.Quote}</span>
{data.OSE?.currency}
</p>
<MarketTitle>{data.OSE?.title}</MarketTitle>
<Subtitle>
<p className="font-semibold uppercase mb-1 mx-0 mt-0 p-0">{data.OSE?.title}</p>
<p className="font-semibold mb-1 mx-0 mt-0 p-0">
<FormattedDate datetime={data.OSE?.Date} /> CET
</Subtitle>
</Item>
<Item>
</p>
</div>
<div className="text-center">
<p>
EQNR
<Price>{data.NYSE?.Quote}</Price>
<span className="text-xl my-0 mx-1 text-moss-green-100 font-medium">{data.NYSE?.Quote}</span>
{data.NYSE?.currency}
</p>
<MarketTitle>{data.NYSE?.title}</MarketTitle>
<Subtitle>
<p className="font-semibold uppercase mb-1 mx-0 mt-0 p-0">{data.NYSE?.title}</p>
<p className="font-semibold mb-1 mx-0 mt-0 p-0">
<FormattedDate datetime={data.NYSE?.Date} /> CET{' '}
<TimeDelay>
<span className="font-medium italic">
<FormattedMessage id="stock_nyse_time_delay_message" defaultMessage="at least 20 minutes delayed" />
</TimeDelay>
</Subtitle>
</Item>
</Container>
</span>
</p>
</div>
</div>
</BackgroundContainer>
)
}
Expand Down
18 changes: 7 additions & 11 deletions web/pageComponents/topicPages/TwitterEmbed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { TwitterEmbedData } from '../../types/index'
import RequestConsentContainer from '../../pageComponents/shared/iframe/RequestConsentContainer'
import { TwitterTimelineEmbed, TwitterTweetEmbed } from 'react-twitter-embed'
import { BackgroundContainer } from '@components'
import styled from 'styled-components'
import IngressText from '../../pageComponents/shared/portableText/IngressText'
import TitleText from '../../pageComponents/shared/portableText/TitleText'
import { twMerge } from 'tailwind-merge'
Expand All @@ -13,13 +12,6 @@ type TwitterEmbedProps = {
className?: string
}

const StyledIngress = styled.div`
padding: 0 0 var(--space-medium);
`
const StyledTitle = styled(TitleText)`
margin-bottom: var(--space-xLarge);
`

const TwitterEmbed = ({ data, anchor, className }: TwitterEmbedProps) => {
const { embedType, embedValue, designOptions, title, ingress } = data

Expand All @@ -46,11 +38,15 @@ const TwitterEmbed = ({ data, anchor, className }: TwitterEmbedProps) => {
<>
<BackgroundContainer {...designOptions} id={anchor} renderFragmentWhenPossible>
<div className={twMerge(`pb-page-content px-layout-lg max-w-viewport mx-auto`, className)}>
{title && <StyledTitle value={title} />}
{title && (
<div className="mb-11">
<TitleText value={title} />
</div>
)}
{ingress && (
<StyledIngress>
<div className="pt-0 px-0 pb-4">
<IngressText value={ingress} />
</StyledIngress>
</div>
)}

<div className="cookieconsent-optin-marketing">
Expand Down
Loading