Skip to content
This repository has been archived by the owner on Mar 4, 2024. It is now read-only.

Commit

Permalink
Merge pull request #3 from ecmwf-projects/COPDS-1447-accessibility
Browse files Browse the repository at this point in the history
Copds 1447 accessibility
  • Loading branch information
pelusanchez authored Dec 26, 2023
2 parents 6f9811f + 9002dee commit d3a8947
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 9 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "@ecmwf-projects/cads-blocks-library",
"description": "CADS Blocks library for webportal",
"private": false,
"version": "5.0.5",
"version": "5.0.6",
"repository": {
"type": "git",
"url": "[email protected]:ecmwf-projects/cads-blocks-library.git"
Expand Down
27 changes: 22 additions & 5 deletions src/components/blocks/CheckItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,18 +30,23 @@ export const CheckItem = ({
<LinkBlock
block={block}
/>
<LinkStatus status={block.status}></LinkStatus>
<LinkStatus status={block.status}/>
</LinkTextWrapper>
<div
<LinkButton
aria-label={
isExpanded ? 'Collapse' : 'Expand'
}
onClick={() => setIsExpanded(!isExpanded)}>{
isExpandable ? <ExpandIcon state={isExpanded} /> : null}</div>
isExpandable ? <ExpandIcon state={isExpanded} /> : null}</LinkButton>
</LinkWrapper>
{isExpandable && (
<Content data-stylizable="block checkitem-content"
className={
isExpanded ? 'expanded' : ''
}>
<GenerateBlocks blocks={supportedBlocks} />
{isExpanded && (
<GenerateBlocks blocks={supportedBlocks} />
)}
</Content>
)}
</Wrapper>
Expand All @@ -58,7 +63,11 @@ const ExpandIcon = ({
transform: state ? 'rotate(180deg)' : 'rotate(0deg)',
}}
>
<DownIcon />
<DownIcon
title={
state ? 'Collapse' : 'Expand'
}
/>
</ExpandIconWrapper>
)
}
Expand Down Expand Up @@ -98,6 +107,14 @@ const ExpandIconWrapper = styled.div`
cursor: pointer;
`

const LinkButton = styled.button`
background: none;
border: none;
cursor: pointer;
padding: 0;
margin: 0;
`

const Wrapper = styled.section`
margin-top: 0;
width: 100%;
Expand Down
15 changes: 12 additions & 3 deletions src/components/icons/EQCIcons.tsx
Original file line number Diff line number Diff line change
@@ -1,32 +1,41 @@
import React from 'react';

export const CheckIcon = ({
color = '#4CAF50'
color = '#4CAF50',
title = 'QA Passed'
}: {
color?: string
title?: string
}) =>
(<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>{title}</title>
<path d="M5 12L10 17L20 7" stroke={color} />
</svg>
);

export const WarningIcon = ({
color = '#FF9800'
color = '#FF9800',
title = 'QA Not Passed'
}: {
color?: string
title?: string
}) => (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>{title}</title>
<path d="M12 8V14 m0 2v1" stroke={color} />
<path d="M5 19H19C19.3263 18.9977 19.6471 18.9156 19.9344 18.7609C20.2217 18.6061 20.4667 18.3834 20.6482 18.1122C20.8297 17.841 20.942 17.5295 20.9754 17.2049C21.0089 16.8803 20.9624 16.5525 20.84 16.25L13.74 3.99999C13.567 3.68738 13.3135 3.42682 13.0058 3.24537C12.698 3.06393 12.3473 2.96823 11.99 2.96823C11.6327 2.96823 11.282 3.06393 10.9742 3.24537C10.6665 3.42682 10.413 3.68738 10.24 3.99999L3.14 16.25C3.01994 16.5456 2.97233 16.8656 3.00115 17.1833C3.02997 17.501 3.13437 17.8072 3.30565 18.0764C3.47693 18.3455 3.71011 18.5698 3.98573 18.7305C4.26134 18.8912 4.57139 18.9836 4.89 19" stroke={color} />
</svg>
)

export const DownIcon = ({
color = '#25408F'
color = '#25408F',
title = 'Open icon'
}: {
color?: string
title?: string
}) => (
<svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>{title}</title>
<path d="M1 1L6 6L11.5 1" stroke={color} />
</svg>
)

0 comments on commit d3a8947

Please sign in to comment.