From f9f9fb2eaa25d2d57ab9fd8f09118d2e37b8276c Mon Sep 17 00:00:00 2001
From: Julius Osokinas <20243687+josokinas@users.noreply.github.com>
Date: Wed, 17 Feb 2021 13:12:31 +0000
Subject: [PATCH] feat: add asterisk component (#326)

---
 .../core/src/components/asterisk/asterisk.scss |  7 +++++++
 packages/core/src/components/index.scss        |  3 +++
 .../react/src/components/asterisk/asterisk.tsx | 18 ++++++++++++++++++
 .../field-label/field-label.stories.tsx        |  7 +++----
 packages/react/src/components/index.ts         |  1 +
 5 files changed, 32 insertions(+), 4 deletions(-)
 create mode 100644 packages/core/src/components/asterisk/asterisk.scss
 create mode 100644 packages/react/src/components/asterisk/asterisk.tsx

diff --git a/packages/core/src/components/asterisk/asterisk.scss b/packages/core/src/components/asterisk/asterisk.scss
new file mode 100644
index 000000000..c87b62d1b
--- /dev/null
+++ b/packages/core/src/components/asterisk/asterisk.scss
@@ -0,0 +1,7 @@
+@use '../../helpers';
+
+@mixin Asterisk() {
+  .ods-asterisk {
+    color: helpers.color('content-negative');
+  }
+}
diff --git a/packages/core/src/components/index.scss b/packages/core/src/components/index.scss
index 14d861022..bfbac84d8 100644
--- a/packages/core/src/components/index.scss
+++ b/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();
diff --git a/packages/react/src/components/asterisk/asterisk.tsx b/packages/react/src/components/asterisk/asterisk.tsx
new file mode 100644
index 000000000..28132e2e5
--- /dev/null
+++ b/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;
+};
diff --git a/packages/react/src/components/field-label/field-label.stories.tsx b/packages/react/src/components/field-label/field-label.stories.tsx
index a41748b8c..d373b42e9 100644
--- a/packages/react/src/components/field-label/field-label.stories.tsx
+++ b/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>
 );
diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts
index 59ccdcd5b..7e973a8e3 100644
--- a/packages/react/src/components/index.ts
+++ b/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';