💄 Accordion colors #2008

equinor · Dec 20, 2023 · ae43024 · ae43024
1 parent c1c5cc5
commit ae43024
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 57 deletions.
diff --git a/web/components/src/Accordion/Header.tsx b/web/components/src/Accordion/Header.tsx
@@ -37,7 +37,7 @@ const StyledIcon = styled.span`
   flex: 0 0 var(--space-xLarge);
   line-height: 16px;
   & ${FilledIcon}, & ${OutlineIcon} {
-    fill: var(--energy-red-100);
+    fill: var(--accordion-icon-color);
   }
 `
 const StyledHeader = styled(Typography)`

diff --git a/web/components/src/Accordion/Panel.tsx b/web/components/src/Accordion/Panel.tsx
@@ -13,7 +13,7 @@ const StyledPanel = styled.div`
   }
 `
 const ContentWithBorder = styled.div`
-  border-left: 1px dashed var(--energy-red-100);
+  border-left: 1px dashed var(--accordion-icon-color);
   padding-left: calc(var(--space-xLarge) / 2);
 `
 

diff --git a/web/components/src/Backgrounds/BackgroundContainer.tsx b/web/components/src/Backgrounds/BackgroundContainer.tsx
@@ -6,27 +6,20 @@ import { normalStyle, invertedStyle } from '../../../styles/backgroundThemes'
 
 export type BackgroundContainerProps = {
   background?: BackgroundColours
-  disableContainerWrapper?: boolean
 } & HTMLAttributes<HTMLDivElement>
 
 type ColourContainerProps = {
   isInverted: boolean
-  colourWrapper: string
-}
+} & HTMLAttributes<HTMLDivElement>
 
-const ColourContainer = styled.div.attrs<ColourContainerProps>(
-  ({ colourWrapper }) =>
-    colourWrapper && {
-      className: colourWrapper,
-    },
-)<ColourContainerProps>`
+const ColourContainer = styled.div<ColourContainerProps>`
   background-color: var(--background-color);
   color: var(--color-on-background) !important;
   ${({ isInverted }) => (isInverted ? invertedStyle : normalStyle)}
 `
 
 export const BackgroundContainer = forwardRef<HTMLDivElement, BackgroundContainerProps>(function BackgroundContainer(
-  { background = 'White', disableContainerWrapper = false, style, children, ...rest },
+  { background = 'White', style, children, className, ...rest },
   ref,
 ) {
   // @TODO: Find a better way with task #334
@@ -36,9 +29,8 @@ export const BackgroundContainer = forwardRef<HTMLDivElement, BackgroundContaine
 
   return (
     <ColourContainer
-      className={`background${styleVariant}`}
+      className={className + ` background${styleVariant}`}
       isInverted={isInverted}
-      colourWrapper={disableContainerWrapper ? '' : `background${styleVariant}`}
       style={
         {
           ...style,

diff --git a/web/pageComponents/topicPages/PromoTileArray.tsx b/web/pageComponents/topicPages/PromoTileArray.tsx
@@ -88,48 +88,45 @@ const PromoTileArray = ({ data, anchor }: { data: PromoTileArrayData; anchor?: s
     : Container
 
   return (
-    <div className="background-none" id={anchor}>
-      <Wrapper>
-        {data.group.map((tile: PromoTileData) => {
-          const { id, designOptions, image, title, action, linkLabelAsTitle } = tile
-          const { background } = designOptions
-          const hasImage = !!image?.asset
-
-          const Content = () =>
-            linkLabelAsTitle ? (
-              <PromoTileButton action={action} template="icon" hasImage={hasImage} />
-            ) : (
-              <>
-                {<>{richTitle(title, hasImage)}</>}
-                {action.label && (
-                  <StyledAction>
-                    <PromoTileButton action={action} hasImage={hasImage} />
-                  </StyledAction>
-                )}
-              </>
-            )
-
-          return (
-            /* Sneaky little hack to make it work with the bg colour See #667 */
-            <StyledBackgroundContainer disableContainerWrapper={true} background={background} key={id}>
-              <StyledCard type="promo" textOnly={!image} style={{ '--card-height': '100%' } as CSSProperties}>
-                {image && (
-                  <Media>
-                    <ImageWithRoundedUpperCorners
-                      image={image}
-                      alt={image.alt}
-                      maxWidth={400}
-                      aspectRatio={Ratios.FOUR_TO_FIVE}
-                    />
-                  </Media>
-                )}
-                <Content />
-              </StyledCard>
-            </StyledBackgroundContainer>
+    <Wrapper id={anchor}>
+      {data.group.map((tile: PromoTileData) => {
+        const { id, designOptions, image, title, action, linkLabelAsTitle } = tile
+        const { background } = designOptions
+        const hasImage = !!image?.asset
+
+        const Content = () =>
+          linkLabelAsTitle ? (
+            <PromoTileButton action={action} template="icon" hasImage={hasImage} />
+          ) : (
+            <>
+              {<>{richTitle(title, hasImage)}</>}
+              {action.label && (
+                <StyledAction>
+                  <PromoTileButton action={action} hasImage={hasImage} />
+                </StyledAction>
+              )}
+            </>
           )
-        })}
-      </Wrapper>
-    </div>
+
+        return (
+          <StyledBackgroundContainer background={background} key={id}>
+            <StyledCard type="promo" textOnly={!image} style={{ '--card-height': '100%' } as CSSProperties}>
+              {image && (
+                <Media>
+                  <ImageWithRoundedUpperCorners
+                    image={image}
+                    alt={image.alt}
+                    maxWidth={400}
+                    aspectRatio={Ratios.FOUR_TO_FIVE}
+                  />
+                </Media>
+              )}
+              <Content />
+            </StyledCard>
+          </StyledBackgroundContainer>
+        )
+      })}
+    </Wrapper>
   )
 }
 

diff --git a/web/styles/backgroundThemes.ts b/web/styles/backgroundThemes.ts
@@ -17,6 +17,7 @@ export const normalStyle = css`
   --pagination-btn-background-active: var(--moss-green-80);
   --pagination-btn-text-color-active: var(--black-100);
   --pagination-btn-disabled: var(--grey-30);
+  --accordion-icon-color: var(--energy-red-100);
 `
 export const invertedStyle = css`
   --button-border-color: var(--white-100);
@@ -35,4 +36,5 @@ export const invertedStyle = css`
   --pagination-btn-background-active: var(--moss-green-70);
   --pagination-btn-text-color-active: var(--default-text);
   --pagination-btn-disabled: var(--slate-blue-90);
+  --accordion-icon-color: var(--white-100);
 `
diff --git a/web/styles/settings.ts b/web/styles/settings.ts
@@ -87,11 +87,11 @@ export const colors = css`
 
     /* new colors */
     --bg-default: var(--white-100);
-    --bg-moss-green: var(--moss-green-70); // retaining old color for backward compatability
+    --bg-moss-green: var(--mid-green); // replace old color
     --bg-moss-green-light: var(--moss-green-50);
     --bg-spruce-wood: var(--spruce-wood-90);
     --bg-mist-blue: var(--mist-blue-100);
-    --bg-slate-blue: var(--slate-blue-100); // retaining old color for backward compatability
+    --bg-slate-blue: var(--slate-blue-100); // replace old color
     --bg-mid-yellow: var(--mid-yellow);
     --bg-mid-orange: var(--mid-orange);
     --bg-mid-green: var(--mid-green);