Skip to content

Commit

Permalink
Merge pull request #266 from 10up/fix/wrap-every-component-in-styled-…
Browse files Browse the repository at this point in the history 
…context-provider
  • Loading branch information
@fabiankaegy
fabiankaegy authored Sep 20, 2023
2 parents cabf354 + c8ea067 commit 7fcfe8b
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 76 deletions.
154 changes: 80 additions & 74 deletions components/counter/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { forwardRef } from '@wordpress/element';
import PropTypes from 'prop-types';
import cx from 'classnames';
import styled from '@emotion/styled';
import { StyledComponentContext } from '../styled-components-context';

const StyledSvg = styled('svg')`
transform: rotate(-90deg);
Expand Down Expand Up @@ -68,71 +69,73 @@ const CircularProgressBar = (props) => {
const isOverLimit = percentage >= 100;

return (
<StyledSvg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 200 200"
version="1.1"
className={cx('tenup--block-components__circular-progress', {
'is-over-limit': isOverLimit,
'is-approaching-limit': isApproachingLimit && !isOverLimit,
})}
>
<circle
cx="100"
cy="100"
r={radius}
fill="transparent"
strokeDasharray={circumference}
/>
<circle
className="bar"
cx="100"
cy="100"
r={radius}
fill="transparent"
strokeDasharray={circumference}
strokeDashoffset={strokeDashoffset}
/>
{isApproachingLimit && !isOverLimit && (
<>
<path
style={{
transform: 'rotate(90deg)',
transformOrigin: 'center',
fill: '#ffb900',
}}
d="M100,31.2c38,0,68.8,30.8,68.8,68.8S138,168.8,100,168.8S31.2,138,31.2,100S62,31.2,100,31.2z"
/>
<path
style={{
transform: 'rotate(90deg)',
transformOrigin: 'center',
fill: '#000',
}}
d="M108.9,140.8c2.1-2,3.2-4.7,3.2-8.3c0-3.6-1-6.4-3.1-8.3 c-2.1-2-5.1-3-9.1-3c-4,0-7.1,1-9.2,3c-2.1,2-3.2,4.7-3.2,8.3c0,3.5,1.1,6.3,3.3,8.3c2.2,2,5.2,2.9,9.1,2.9S106.8,142.7,108.9,140.8 z"
/>
<StyledComponentContext cacheKey="tenup-component-circular-progress-bar">
<StyledSvg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 200 200"
version="1.1"
className={cx('tenup--block-components__circular-progress', {
'is-over-limit': isOverLimit,
'is-approaching-limit': isApproachingLimit && !isOverLimit,
})}
>
<circle
cx="100"
cy="100"
r={radius}
fill="transparent"
strokeDasharray={circumference}
/>
<circle
className="bar"
cx="100"
cy="100"
r={radius}
fill="transparent"
strokeDasharray={circumference}
strokeDashoffset={strokeDashoffset}
/>
{isApproachingLimit && !isOverLimit && (
<>
<path
style={{
transform: 'rotate(90deg)',
transformOrigin: 'center',
fill: '#ffb900',
}}
d="M100,31.2c38,0,68.8,30.8,68.8,68.8S138,168.8,100,168.8S31.2,138,31.2,100S62,31.2,100,31.2z"
/>
<path
style={{
transform: 'rotate(90deg)',
transformOrigin: 'center',
fill: '#000',
}}
d="M108.9,140.8c2.1-2,3.2-4.7,3.2-8.3c0-3.6-1-6.4-3.1-8.3 c-2.1-2-5.1-3-9.1-3c-4,0-7.1,1-9.2,3c-2.1,2-3.2,4.7-3.2,8.3c0,3.5,1.1,6.3,3.3,8.3c2.2,2,5.2,2.9,9.1,2.9S106.8,142.7,108.9,140.8 z"
/>
<path
style={{
transform: 'rotate(90deg)',
transformOrigin: 'center',
fill: '#000',
}}
d="M109.7,111.9 l3-55.6H87.3l3,55.6C90.3,111.9,109.7,111.9,109.7,111.9z"
/>
</>
)}
{isOverLimit && (
<path
style={{
transform: 'rotate(90deg)',
transformOrigin: 'center',
fill: '#000',
}}
d="M109.7,111.9 l3-55.6H87.3l3,55.6C90.3,111.9,109.7,111.9,109.7,111.9z"
/>
</>
)}
{isOverLimit && (
<path
style={{ transform: 'rotate(90deg)', transformOrigin: 'center' }}
d="M100,168.8c38,0,68.8-30.8,68.8-68.8c0-38-30.8-68.8-68.8-68.8C62,31.2,31.2,62,31.2,100
style={{ transform: 'rotate(90deg)', transformOrigin: 'center' }}
d="M100,168.8c38,0,68.8-30.8,68.8-68.8c0-38-30.8-68.8-68.8-68.8C62,31.2,31.2,62,31.2,100
C31.2,138,62,168.8,100,168.8z M127,73c2.2,2.2,2.2,5.9,0,8.1L108.1,100l18.9,18.9c2.2,2.2,2.2,5.9,0,8.1c-2.2,2.2-5.9,2.2-8.1,0
L100,108.1L81.1,127c-2.2,2.2-5.9,2.2-8.1,0c-2.2-2.2-2.2-5.9,0-8.1L91.9,100L73,81.1c-2.2-2.2-2.2-5.9,0-8.1s5.9-2.2,8.1,0
L100,91.9L118.9,73C121.1,70.8,124.7,70.8,127,73z"
/>
)}
</StyledSvg>
/>
)}
</StyledSvg>
</StyledComponentContext>
);
};

Expand All @@ -147,19 +150,22 @@ const Counter = forwardRef((props, ref) => {
const { count, limit } = props;
const percentage = (count / limit) * 100;
return (
<StyledCounter
className={cx('tenup--block-components__character-count', {
'is-over-limit': count > limit,
})}
{...props}
ref={ref}
>
<div className="tenup--block-components__character-count__label">
<span className="tenup--block-components__character-count__count">{count}</span> /{' '}
<span className="tenup--block-components__character-count__limit">{limit}</span>
</div>
<CircularProgressBar percentage={percentage} />
</StyledCounter>
<StyledComponentContext cacheKey="tenup-component-counter">
<StyledCounter
className={cx('tenup--block-components__character-count', {
'is-over-limit': count > limit,
})}
{...props}
ref={ref}
>
<div className="tenup--block-components__character-count__label">
<span className="tenup--block-components__character-count__count">{count}</span>{' '}
/{' '}
<span className="tenup--block-components__character-count__limit">{limit}</span>
</div>
<CircularProgressBar percentage={percentage} />
</StyledCounter>
</StyledComponentContext>
);
});

Expand Down
5 changes: 3 additions & 2 deletions components/link/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { __experimentalLinkControl as LinkControl, RichText } from '@wordpress/b
/**
* Internal Dependencies
*/
import { StyledComponentContext } from '../styled-components-context';
import { useOnClickOutside } from '../../hooks/use-on-click-outside';

/**
Expand Down Expand Up @@ -138,7 +139,7 @@ const Link = ({
}, [url, value]);

return (
<>
<StyledComponentContext cacheKey="tenup-component-link">
<StylesRichTextLink
tagName="a"
className={classnames('tenup-block-components-link__label', className)}
Expand Down Expand Up @@ -194,7 +195,7 @@ const Link = ({
/>
</Popover>
)}
</>
</StyledComponentContext>
);
};

Expand Down

0 comments on commit 7fcfe8b

Please sign in to comment.