Skip to content

Commit 8eff576

Browse files
ciampociampo
authored
BigSky logo: adhere to the common logo specs (#103612)
* BigSky logo: remove normalized, fix title, mask if monochrome, expose Mark component * Remove unnecessary Storybook stories * CHANGELOG * Do not `trim()` the title * Add more explicit docs around using `aria-hidden` to remove from assistive tech
1 parent 9eca4fc commit 8eff576

File tree

4 files changed

+91
-65
lines changed

4 files changed

+91
-65
lines changed

‎packages/components/CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
### Enhancements
2+
3+
- Add `BigSkyLogo.Mark` component ([#103612](https://github.com/Automattic/wp-calypso/pull/103612)).
4+
15
## 2.3.0
26

37
### Breaking changes

‎packages/components/src/logos/big-sky-logo/index.tsx

Lines changed: 57 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,70 @@
1-
interface BigSkyLogoProps extends Omit< React.SVGProps< SVGSVGElement >, 'height' | 'width' > {
2-
height?: number;
3-
monochrome?: boolean;
4-
title?: string;
5-
normalized?: boolean;
6-
}
1+
import { forwardRef, useId } from 'react';
2+
import { CommonLogoProps } from '../types';
73

8-
const Mark = ( {
9-
height = 24,
10-
monochrome = false,
11-
title = 'Big Sky logo',
12-
normalized = false,
13-
...props
14-
}: BigSkyLogoProps ) => {
15-
const scale = normalized ? 0.8 : 1;
16-
const width = height;
17-
const color = monochrome ? 'currentColor' : '#030FB0';
4+
type BigSkyLogoProps = CommonLogoProps & Omit< React.SVGProps< SVGSVGElement >, 'width' >;
5+
6+
const CentralLogo = ( { fill }: Pick< BigSkyLogoProps, 'fill' > ) => {
7+
return (
8+
<>
9+
<path
10+
fill={ fill }
11+
d="m19.223 11.55-3.095-1.068a4.21 4.21 0 0 1-2.61-2.61L12.45 4.777c-.145-.426-.755-.426-.9 0l-1.068 3.095a4.21 4.21 0 0 1-2.61 2.61L4.777 11.55c-.426.145-.426.755 0 .9l3.095 1.068a4.21 4.21 0 0 1 2.61 2.61l1.068 3.095c.145.426.755.426.9 0l1.068-3.095a4.21 4.21 0 0 1 2.61-2.61l3.095-1.068c.426-.145.426-.755 0-.9Zm-3.613.68-1.547.533a2.105 2.105 0 0 0-1.306 1.305l-.533 1.548a.24.24 0 0 1-.453 0l-.534-1.548a2.105 2.105 0 0 0-1.305-1.305l-1.548-.534a.24.24 0 0 1 0-.453l1.548-.534a2.105 2.105 0 0 0 1.305-1.305l.534-1.547a.24.24 0 0 1 .453 0l.534 1.547c.21.615.695 1.095 1.305 1.305l1.547.534a.24.24 0 0 1 0 .453Z"
12+
/>
13+
<path
14+
fill={ fill }
15+
d="m13.247 12.079-.535.182a.734.734 0 0 0-.45.45l-.184.536c-.026.072-.13.072-.156 0l-.183-.535a.734.734 0 0 0-.45-.45l-.535-.184c-.072-.026-.072-.13 0-.156l.535-.183a.734.734 0 0 0 .45-.45l.183-.535c.026-.072.13-.072.156 0l.183.535a.734.734 0 0 0 .45.45l.536.183c.072.026.072.13 0 .156Z"
16+
/>
17+
</>
18+
);
19+
};
20+
21+
export const Mark = forwardRef< SVGSVGElement, BigSkyLogoProps >( function Mark(
22+
{ height = 24, monochrome = false, title = 'Big Sky', ...props },
23+
ref
24+
) {
25+
const titleId = useId();
26+
const maskId = useId();
27+
28+
const brandFill = monochrome ? 'currentColor' : '#030FB0';
29+
const isMasked = monochrome;
1830

1931
return (
2032
<svg
33+
ref={ ref }
2134
xmlns="http://www.w3.org/2000/svg"
22-
width={ width }
2335
height={ height }
2436
viewBox="0 0 24 24"
2537
fill="none"
38+
aria-labelledby={ title ? titleId : undefined }
2639
{ ...props }
2740
>
28-
{ title && <title>{ title }</title> }
29-
<g
30-
transform={ `scale(${ scale }) translate(${ ( 1 - scale ) * 12 }, ${
31-
( 1 - scale ) * 12
32-
})` }
33-
>
34-
<circle cx="12" cy="12" r="12" fill={ color } />
35-
<path
36-
d="M19.2232 11.5496L16.1279 10.4819C14.9038 10.0613 13.9385 9.09599 13.5179 7.87188L12.4502 4.77654C12.3046 4.35053 11.6952 4.35053 11.5496 4.77654L10.4819 7.87188C10.0613 9.09599 9.09599 10.0613 7.87188 10.4819L4.77654 11.5496C4.35053 11.6952 4.35053 12.3046 4.77654 12.4502L7.87188 13.5179C9.09599 13.9385 10.0613 14.9038 10.4819 16.1279L11.5496 19.2232C11.6952 19.6493 12.3046 19.6493 12.4502 19.2232L13.5179 16.1279C13.9385 14.9038 14.9038 13.9385 16.1279 13.5179L19.2232 12.4502C19.6492 12.3046 19.6492 11.6952 19.2232 11.5496ZM15.6102 12.2291L14.0625 12.7629C13.4478 12.9732 12.9679 13.4586 12.7575 14.0679L12.2237 15.6156C12.1482 15.8313 11.8462 15.8313 11.7707 15.6156L11.2368 14.0679C11.0265 13.4532 10.5412 12.9732 9.93184 12.7629L8.38417 12.2291C8.16847 12.1536 8.16847 11.8516 8.38417 11.7761L9.93184 11.2422C10.5466 11.0319 11.0265 10.5466 11.2368 9.93723L11.7707 8.38956C11.8462 8.17386 12.1482 8.17386 12.2237 8.38956L12.7575 9.93723C12.9679 10.552 13.4532 11.0319 14.0625 11.2422L15.6102 11.7761C15.8259 11.8516 15.8259 12.1536 15.6102 12.2291Z"
37-
fill="white"
38-
/>
39-
<path
40-
d="M13.2468 12.0785L12.7116 12.2613C12.5028 12.3331 12.3331 12.5028 12.2613 12.7116L12.0785 13.2468C12.0524 13.3186 11.948 13.3186 11.9219 13.2468L11.7391 12.7116C11.6673 12.5028 11.4976 12.3331 11.2888 12.2613L10.7536 12.0785C10.6818 12.0524 10.6818 11.948 10.7536 11.9219L11.2888 11.7391C11.4976 11.6673 11.6673 11.4976 11.7391 11.2888L11.9219 10.7536C11.948 10.6818 12.0524 10.6818 12.0785 10.7536L12.2613 11.2888C12.3331 11.4976 12.5028 11.6673 12.7116 11.7391L13.2468 11.9219C13.3186 11.948 13.3186 12.0524 13.2468 12.0785Z"
41-
fill="white"
42-
/>
43-
</g>
41+
{ title && <title id={ titleId }>{ title }</title> }
42+
43+
<circle
44+
cx="12"
45+
cy="12"
46+
r="12"
47+
fill={ brandFill }
48+
mask={ isMasked ? `url(#${ maskId })` : undefined }
49+
/>
50+
{ isMasked ? (
51+
<defs>
52+
<mask id={ maskId }>
53+
{ /* Full white rectangle to start with full visibility */ }
54+
<rect width="24" height="24" fill="#fff" />
55+
{ /* The shape we want to "cut out" is black in the mask */ }
56+
<CentralLogo fill="#000" />
57+
</mask>
58+
</defs>
59+
) : (
60+
<CentralLogo fill="#fff" />
61+
) }
4462
</svg>
4563
);
46-
};
64+
} );
4765

48-
// For now, we only have the Mark version. Full version can be added later if needed.
49-
export const BigSkyLogo = { Mark };
66+
export const BigSkyLogo = {
67+
Mark: Object.assign( Mark, {
68+
displayName: 'BigSkyLogo.Mark',
69+
} ),
70+
};

‎packages/components/src/logos/big-sky-logo/stories/index.stories.tsx

Lines changed: 5 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,12 @@
1-
import { BigSkyLogo } from '..';
1+
import { Mark } from '..';
22
import type { Meta, StoryObj } from '@storybook/react';
33

4-
const meta: Meta< typeof BigSkyLogo.Mark > = {
5-
title: 'Unaudited/Logos/BigSkyLogo',
6-
component: BigSkyLogo.Mark,
4+
const meta: Meta< typeof Mark > = {
5+
title: 'Unaudited/Logos/BigSkyLogo.Mark',
6+
component: Mark,
77
};
88
export default meta;
99

10-
type Story = StoryObj< typeof BigSkyLogo.Mark >;
10+
type Story = StoryObj< typeof Mark >;
1111

1212
export const Default: Story = {};
13-
14-
export const Monochrome: Story = {
15-
args: {
16-
monochrome: true,
17-
},
18-
};
19-
20-
export const LargeSize: Story = {
21-
args: {
22-
height: 48,
23-
},
24-
};
25-
26-
export const Normalized: Story = {
27-
args: {
28-
normalized: true,
29-
},
30-
};
31-
32-
export const CustomTitle: Story = {
33-
args: {
34-
title: 'Custom Big Sky Logo Title',
35-
},
36-
};

‎packages/components/src/logos/types.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
export interface CommonLogoProps {
2+
/**
3+
* Height of the logo in pixels.
4+
* Note: setting the height without setting the width will cause the width
5+
* to automatically scale to maintain the logo's aspect ratio.
6+
* @default 24
7+
*/
8+
height?: number;
9+
/**
10+
* Whether to render the logo in monochrome.
11+
* @default false
12+
*/
13+
monochrome?: boolean;
14+
/**
15+
* The accessible name of the logo.
16+
* To hide the logo from assistive technologies, use the `aria-hidden`
17+
* attribute.
18+
*/
19+
title?: string;
20+
/**
21+
* Indicates whether the element is exposed to an accessibility API.
22+
* Use `aria-hidden="true"` to hide the logo from assistive technologies.
23+
*/
24+
'aria-hidden'?: React.SVGAttributes< SVGSVGElement >[ 'aria-hidden' ];
25+
}

0 commit comments

Comments
 (0)