</button>
</div>
`;
-
-exports[`should render correctly when issueType is provided 1`] = `
-.emotion-0 {
- all: unset;
- cursor: pointer;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- gap: 0.5rem;
- margin-left: 0.25rem;
- margin-right: 0.25rem;
- margin-top: 0.75rem;
- margin-bottom: 0.75rem;
- padding: 0.75rem;
- font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
- font-size: 1rem;
- line-height: 1.5rem;
- font-weight: 600;
- border-radius: 0.25rem;
- width: 100%;
- box-sizing: border-box;
- border: 1px solid rgb(253,162,155);
- color: rgb(62,67,87);
- font-weight: 600;
- word-break: break-word;
- background-color: rgb(255,255,255);
-}
-
-.emotion-0:focus-visible {
- background-color: rgb(239,242,249);
-}
-
-.emotion-0:hover {
- box-shadow: 0px 1px 3px 0px rgba(29,33,47,0.05),0px 1px 25px 0px rgba(29,33,47,0.05);
-}
-
-.emotion-2 {
- height: 1.5rem;
- width: 1.5rem;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- background: rgb(254,205,202);
- border-radius: 100%;
-}
-
-<div>
- <button
- class="emotion-0 emotion-1"
- data-issue="key"
- >
- <div
- class="sw-ml-1/2 emotion-2 emotion-3"
- >
- <svg
- aria-hidden="true"
- fill="none"
- height="16"
- role="img"
- style="clip-rule: evenodd; display: inline-block; fill-rule: evenodd; user-select: none; vertical-align: middle; stroke-linejoin: round; stroke-miterlimit: 1.414;"
- version="1.1"
- viewBox="0 0 16 16"
- width="16"
- xml:space="preserve"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- >
- <path
- d="M10.09,1.88A2.86,2.86,0,0,0,8,1a2.87,2.87,0,0,0-2.11.87A2.93,2.93,0,0,0,5,4h6A2.93,2.93,0,0,0,10.09,1.88Z"
- fill="rgb(93,29,19)"
- />
- <path
- d="M14.54,9H13V5.6L14.3,4.42a.5.5,0,0,0,0-.71.49.49,0,0,0-.7,0L12.17,5H3.82L2.34,3.66a.5.5,0,0,0-.67.74L2.94,5.55V9H1.46a.5.5,0,0,0,0,1H3a5.2,5.2,0,0,0,1.05,2.32l-2,1.81a.5.5,0,1,0,.67.74l2-1.82A4.62,4.62,0,0,0,7,14.1V8A1,1,0,0,1,8,7a.94.94,0,0,1,1,.9v6.17A4.55,4.55,0,0,0,11.18,13l2,1.83a.51.51,0,0,0,.33.13.48.48,0,0,0,.37-.17.49.49,0,0,0,0-.7l-2-1.8a5.34,5.34,0,0,0,1-2.29h1.64a.5.5,0,0,0,0-1Z"
- fill="rgb(93,29,19)"
- />
- </svg>
- </div>
- message
- </button>
-</div>
-`;
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import tw from 'twin.macro';
-import { themeColor, themeContrast } from '../../helpers/theme';
import { IssueType } from '../../types';
import { BugIcon } from './BugIcon';
import { CodeSmellIcon } from './CodeSmellIcon';
return null;
}
}
-
-export function IssueTypeCircleIcon({ className, type, ...iconProps }: Props) {
- const theme = useTheme();
- return (
- <CircleIconContainer className={className}>
- <IssueTypeIcon fill={themeContrast('issueTypeIcon')({ theme })} type={type} {...iconProps} />
- </CircleIconContainer>
- );
-}
-
-const CircleIconContainer = styled.div`
- ${tw`sw-w-6 sw-h-6`}
- ${tw`sw-inline-flex sw-items-center sw-justify-center sw-shrink-0`};
-
- background: ${themeColor('issueTypeIcon')};
- border-radius: 100%;
-`;