feat: add asterisk component (#326)

packages/core/src/components/asterisk/asterisk.scss

@@ -0,0 +1,7 @@
+@use '../../helpers';
+
+@mixin Asterisk() {
+  .ods-asterisk {
+    color: helpers.color('content-negative');
+  }
+}

packages/core/src/components/index.scss

@@ -1,5 +1,7 @@
 @use './includes';
 
+@use './asterisk/asterisk';
+@forward './asterisk/asterisk';
 @use './button/button';
 @forward './button/button';
 @use './checkbox/checkbox';
@@ -24,6 +26,7 @@
 @forward './validation/validation';
 
 @mixin components() {
+  @include asterisk.Asterisk();
   @include button.Button();
   @include checkbox.Checkbox();
   @include field.Field();

packages/react/src/components/asterisk/asterisk.tsx

@@ -0,0 +1,18 @@
+import { c, classy } from '@onfido/castor';
+import React from 'react';
+
+/**
+ * Use in `FieldLabel` to denote required fields.
+ */
+export const Asterisk = ({
+  className,
+  ...restProps
+}: AsteriskProps): JSX.Element => (
+  <abbr {...restProps} className={classy(c('asterisk'), className)}>
+    {' *'}
+  </abbr>
+);
+
+export type AsteriskProps = Omit<JSX.IntrinsicElements['abbr'], 'children'> & {
+  'aria-label': string;
+};

packages/react/src/components/field-label/field-label.stories.tsx

@@ -1,5 +1,6 @@
 import { color } from '@onfido/castor';
 import {
+  Asterisk,
   Field,
   FieldLabel,
   FieldLabelProps,
@@ -44,10 +45,8 @@ export const AsRequired: Story<FieldLabelProps> = ({
 }: FieldLabelProps) => (
   <FieldLabel {...restProps}>
     <span>
-      {children}{' '}
-      <abbr aria-label="required" style={{ color: color('content-negative') }}>
-        *
-      </abbr>
+      {children}
+      <Asterisk aria-label="required" />
     </span>
   </FieldLabel>
 );

packages/react/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './asterisk/asterisk';
 export * from './button/button';
 export * from './checkbox/checkbox';
 export * from './field-label/field-label';