fix(label): update label tests

packages/paste-core/components/label/__tests__/__snapshots__/label.test.tsx.snap

@@ -0,0 +1,188 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Label render it should render 1`] = `
+<DocumentFragment>
+  .emotion-3 {
+  color: rgb(40,42,43);
+  font-size: 0.875rem;
+  font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
+  line-height: 1.25rem;
+  font-weight: 400;
+}
+
+.emotion-2 {
+  box-sizing: border-box;
+  border-bottom-width: 0;
+  display: block;
+  margin-bottom: 0.25rem;
+  padding-left: 0;
+  padding-right: 0;
+  text-transform: none;
+}
+
+.emotion-1 {
+  box-sizing: border-box;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  min-width: 0;
+}
+
+.emotion-0 {
+  margin: 0;
+  padding: 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: rgb(40,42,43);
+  cursor: pointer;
+}
+
+<div
+    class="emotion-3"
+  >
+    <label
+      class="emotion-2"
+      display="block"
+      for="input"
+    >
+      <span
+        class="emotion-1"
+        display="flex"
+      >
+        <span
+          class="emotion-0"
+          color="colorText"
+          cursor="pointer"
+          font-size="fontSize30"
+          font-weight="fontWeightSemibold"
+        >
+          child
+        </span>
+      </span>
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Label render it should render with required 1`] = `
+<DocumentFragment>
+  .emotion-5 {
+  color: rgb(40,42,43);
+  font-size: 0.875rem;
+  font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
+  line-height: 1.25rem;
+  font-weight: 400;
+}
+
+.emotion-4 {
+  box-sizing: border-box;
+  border-bottom-width: 0;
+  display: block;
+  margin-bottom: 0.25rem;
+  padding-left: 0;
+  padding-right: 0;
+  text-transform: none;
+}
+
+.emotion-3 {
+  box-sizing: border-box;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  min-width: 0;
+}
+
+.emotion-2 {
+  margin: 0;
+  padding: 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: rgb(40,42,43);
+  cursor: pointer;
+}
+
+.emotion-1 {
+  box-sizing: border-box;
+  background-color: rgb(222,88,88);
+  border-radius: 50%;
+  cursor: pointer;
+  display: block;
+  height: 4px;
+  line-height: 1.25rem;
+  margin-right: 0.25rem;
+  width: 4px;
+}
+
+.emotion-0 {
+  position: absolute;
+  margin: -1px;
+  border: 0;
+  padding: 0;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  text-transform: none;
+  white-space: nowrap;
+}
+
+<div
+    class="emotion-5"
+  >
+    <label
+      class="emotion-4"
+      display="block"
+      for="input"
+    >
+      <span
+        class="emotion-3"
+        display="flex"
+      >
+        <span
+          class="emotion-1"
+          cursor="pointer"
+          display="block"
+          height="4px"
+          width="4px"
+        >
+          <span
+            class="emotion-0"
+          >
+            Required: 
+          </span>
+        </span>
+        <span
+          class="emotion-2"
+          color="colorText"
+          cursor="pointer"
+          font-size="fontSize30"
+          font-weight="fontWeightSemibold"
+        >
+          child
+        </span>
+      </span>
+    </label>
+  </div>
+</DocumentFragment>
+`;

packages/paste-core/components/label/__tests__/label.test.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import {render, screen} from '@testing-library/react';
+import {Theme} from '@twilio-paste/theme';
+import {Label} from '../src';
+
+describe('Label render', () => {
+  it('it should render', (): void => {
+    const {asFragment} = render(
+      <Theme.Provider theme="console">
+        <Label htmlFor="input">child</Label>
+      </Theme.Provider>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('it should render with required', (): void => {
+    const {asFragment} = render(
+      <Theme.Provider theme="console">
+        <Label htmlFor="input" required>
+          child
+        </Label>
+      </Theme.Provider>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
+
+describe('Label for prop', () => {
+  const initialProps = {
+    htmlFor: 'input',
+  };
+
+  it('should have a for prop on label', () => {
+    render(
+      <Label data-testid="test-label" {...initialProps}>
+        Label
+      </Label>
+    );
+    expect(screen.getByTestId('test-label').getAttribute('for')).toEqual('input');
+  });
+});
+
+describe('Label required prop', () => {
+  const initialProps = {
+    htmlFor: 'input',
+    required: true,
+  };
+
+  it('should have a required indicator', () => {
+    render(<Label {...initialProps}>label</Label>);
+    expect(screen.getByText('Required:')).not.toBeNull();
+  });
+});

packages/paste-core/components/label/package.json

@@ -2,7 +2,7 @@
   "name": "@twilio-paste/label",
   "version": "1.0.0",
   "category": "user input",
-  "status": "beta",
+  "status": "production",
   "description": "Label used to name Paste form fields",
   "author": "Twilio Inc.",
   "license": "MIT",

packages/paste-core/components/label/src/Label.tsx

@@ -1,34 +1,40 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import {styled, css} from '@twilio-paste/styling-library';
 import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
 import {Flex} from '@twilio-paste/flex';
 import {Text} from '@twilio-paste/text';
 import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only';
 import {TextColor} from '@twilio-paste/style-props';
 
+export type LabelVariants = 'default' | 'inverse';
 export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
   as?: 'label' | 'legend';
   children: NonNullable<React.ReactNode>;
   disabled?: boolean;
   htmlFor: string | undefined;
   marginBottom?: 'space0';
   required?: boolean;
-  variant?: 'default' | 'inverse';
+  variant?: LabelVariants;
 }
 
-// eslint-disable-next-line emotion/syntax-preference
-const StyledRequiredDot = styled(Text)(
-  css({
-    backgroundColor: 'colorBackgroundRequired',
-    borderRadius: '50%',
-    cursor: 'pointer',
-    display: 'block',
-    height: '4px',
-    marginRight: 'space20',
-    width: '4px',
-  })
-);
+export const RequiredDot: React.FC = props => {
+  return (
+    <Box
+      {...props}
+      as="span"
+      backgroundColor="colorBackgroundRequired"
+      borderRadius="borderRadiusCircle"
+      cursor="pointer"
+      display="block"
+      height="4px"
+      lineHeight="lineHeight30"
+      marginRight="space20"
+      width="4px"
+    >
+      <ScreenReaderOnly>Required: </ScreenReaderOnly>
+    </Box>
+  );
+};
 
 const Label: React.FC<LabelProps> = ({as, marginBottom, required, disabled, children, variant, ...props}) => {
   let textColor = 'colorText' as TextColor;
@@ -53,11 +59,7 @@ const Label: React.FC<LabelProps> = ({as, marginBottom, required, disabled, chil
       textTransform="none"
     >
       <Flex as="span" vAlignContent="center">
-        {required ? (
-          <StyledRequiredDot as="span" lineHeight="lineHeight30">
-            <ScreenReaderOnly>Required: </ScreenReaderOnly>
-          </StyledRequiredDot>
-        ) : null}
+        {required ? <RequiredDot /> : null}
         <Text
           as="span"
           fontSize="fontSize30"

packages/paste-core/components/label/tsconfig.build.json

@@ -17,9 +17,6 @@
     {
       "path": "../../layout/flex"
     },
-    {
-      "path": "../../../paste-icons"
-    },
     {
       "path": "../screen-reader-only"
     },