33 lines
1017 B
TypeScript
33 lines
1017 B
TypeScript
|
import "./ArrowIcon.css";
|
||
|
|
|
||
|
|
export type ArrowIconDirection = "forward" | "backward";
|
||
|
|
|
||
|
|
export type ArrowIconProps = {
|
||
|
|
/**
|
||
|
|
* `forward` follows reading order - it points right in LTR and left in RTL,
|
||
|
|
* which is what the Arabic home hero does. `backward` is the opposite, for
|
||
|
|
* "previous" affordances such as pagination.
|
||
|
|
*/
|
||
|
|
direction?: ArrowIconDirection;
|
||
|
|
className?: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* The arrow that rides along with the CTA label ("Discover SHARP-ER ->").
|
||
|
|
*
|
||
|
|
* Purely decorative: the label next to it carries the meaning, so the element
|
||
|
|
* is hidden from assistive technology. It paints in `currentColor`, so it takes
|
||
|
|
* the colour of whatever button or link it sits in with no props.
|
||
|
|
*/
|
||
|
|
export function ArrowIcon({ direction = "forward", className }: ArrowIconProps) {
|
||
|
|
return (
|
||
|
|
<span
|
||
|
|
aria-hidden="true"
|
||
|
|
data-direction={direction}
|
||
|
|
className={className ? `sh-arrow-icon ${className}` : "sh-arrow-icon"}
|
||
|
|
>
|
||
|
|
<span className="sh-arrow-icon__glyph" />
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
}
|