@toptal/picasso-form 6.1.9-alpha-bill-optimize-select-performance-381ce8200.1 → 6.2.0

package/src/FormLabel/__snapshots__/test.tsx.snap

@@ -1,146 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FormLabel disabled 1`] = `
-<div>
-  <div
-    class="Picasso-root"
-  >
-    <form
-      class=""
-    >
-      <div
-        class="text-[1rem] [&+&]:mt-4"
-        data-field-has-error="false"
-      >
-        <label
-          class="block leading-[1em] mb-[0.5em] text-graphite"
-        >
-          <span
-            class="text-[0.875rem]"
-          >
-            Label
-          </span>
-        </label>
-      </div>
-    </form>
-  </div>
-</div>
-`;
-
-exports[`FormLabel renders 1`] = `
-<div>
-  <div
-    class="Picasso-root"
-  >
-    <form
-      class=""
-    >
-      <div
-        class="text-[1rem] [&+&]:mt-4"
-        data-field-has-error="false"
-      >
-        <label
-          class="block leading-[1em] mb-[0.5em] text-graphite"
-        >
-          <span
-            class="text-[0.875rem]"
-          >
-            Label
-          </span>
-        </label>
-      </div>
-    </form>
-  </div>
-</div>
-`;
-
-exports[`FormLabel required with (optional) 1`] = `
-<div>
-  <div
-    class="Picasso-root"
-  >
-    <form
-      class=""
-    >
-      <div
-        class="text-[1rem] [&+&]:mt-4"
-        data-field-has-error="false"
-      >
-        <label
-          class="block leading-[1em] mb-[0.5em] text-graphite"
-        >
-          <span
-            class="text-[0.875rem]"
-          >
-            Label
-             (optional)
-          </span>
-        </label>
-      </div>
-    </form>
-  </div>
-</div>
-`;
-
-exports[`FormLabel required with (optional) and with \`labelEndAdornment\` 1`] = `
-<div>
-  <div
-    class="Picasso-root"
-  >
-    <form
-      class=""
-    >
-      <div
-        class="text-[1rem] [&+&]:mt-4"
-        data-field-has-error="false"
-      >
-        <label
-          class="block leading-[1em] mb-[0.5em] text-graphite"
-        >
-          <span
-            class="text-[0.875rem]"
-          >
-            Label
-             (optional)
-            <span>
-              label end adornment
-            </span>
-          </span>
-        </label>
-      </div>
-    </form>
-  </div>
-</div>
-`;
-
-exports[`FormLabel required with asterisk 1`] = `
-<div>
-  <div
-    class="Picasso-root"
-  >
-    <form
-      class=""
-    >
-      <div
-        class="text-[1rem] [&+&]:mt-4"
-        data-field-has-error="false"
-      >
-        <label
-          class="block leading-[1em] mb-[0.5em] text-graphite"
-        >
-          <span
-            class="text-[0.875rem]"
-          >
-            <span
-              class="align-top text-red mr-[0.3125em]"
-            >
-              *
-            </span>
-            Label
-          </span>
-        </label>
-      </div>
-    </form>
-  </div>
-</div>
-`;

package/src/FormLabel/index.ts

@@ -1,7 +0,0 @@
-import type { OmitInternalProps } from '@toptal/picasso-shared'
-
-import type { Props } from './FormLabel'
-
-export { default as FormLabel } from './FormLabel'
-export type { RequiredDecoration } from './FormLabel'
-export type FormLabelProps = OmitInternalProps<Props>

package/src/FormLabel/story/index.jsx

@@ -1,6 +0,0 @@
-import { FormLabel } from '../FormLabel'
-import PicassoBook from '~/.storybook/components/PicassoBook'
-
-const componentDocs = PicassoBook.createComponentDocs(FormLabel, 'Form.Label')
-
-export default { componentDocs }

package/src/FormLabel/styles.ts

@@ -1,66 +0,0 @@
-import { twJoin } from '@toptal/picasso-tailwind-merge'
-
-import type { FieldLayout } from '../FieldsLayout/FieldsLayoutContext'
-import type { Alignment, Size } from './FormLabel'
-
-export const classesBySize: Record<Size, string> = {
-  medium: 'text-[0.875rem]',
-  large: 'text-[1rem]',
-}
-
-type GetRootClassesOptions = {
-  disabled?: boolean
-  isInline: boolean
-  layout: FieldLayout
-  alignment: Alignment
-}
-
-const getDisplayClasses = ({
-  isInline,
-  layout,
-  alignment,
-}: Partial<GetRootClassesOptions>) => {
-  if (layout === 'horizontal' && alignment === 'top') {
-    return 'flex items-start'
-  }
-
-  if (layout === 'horizontal') {
-    return 'flex items-center'
-  }
-
-  if (isInline) {
-    return 'inline-block'
-  }
-
-  return 'block'
-}
-
-const getMarginClasses = ({
-  layout,
-  isInline,
-}: Partial<GetRootClassesOptions>) =>
-  layout === 'horizontal' || isInline ? 'mb-0' : 'mb-[0.5em]'
-
-const getPaddingsClasses = ({
-  layout,
-  alignment,
-}: Partial<GetRootClassesOptions>) =>
-  layout === 'horizontal' && alignment === 'top' ? 'pt-2' : ''
-
-const getColorClasses = ({ disabled }: Partial<GetRootClassesOptions>) =>
-  disabled ? 'text-graphite-700/[0.48]' : 'text-graphite-700'
-
-export const getRootClasses = ({
-  disabled,
-  isInline,
-  layout,
-  alignment,
-}: GetRootClassesOptions) => {
-  return twJoin(
-    getDisplayClasses({ isInline, layout, alignment }),
-    'leading-[1em]',
-    getMarginClasses({ layout, isInline }),
-    getColorClasses({ disabled }),
-    getPaddingsClasses({ layout, alignment })
-  )
-}

package/src/FormLabel/test.tsx

@@ -1,111 +0,0 @@
-import React from 'react'
-import { render } from '@toptal/picasso-test-utils'
-import type { OmitInternalProps } from '@toptal/picasso-shared'
-import * as titleCaseModule from 'ap-style-title-case'
-
-import type { Props } from './FormLabel'
-import { FormLabel } from './FormLabel'
-import { FormCompound as Form } from '../FormCompound'
-
-jest.mock('ap-style-title-case')
-
-const TestFormLabel = ({
-  children,
-  requiredDecoration,
-  disabled,
-  titleCase,
-  htmlFor,
-  inline,
-  labelEndAdornment,
-}: OmitInternalProps<Props>) => {
-  return (
-    <Form>
-      <Form.Field>
-        <FormLabel
-          requiredDecoration={requiredDecoration}
-          disabled={disabled}
-          titleCase={titleCase}
-          htmlFor={htmlFor}
-          inline={inline}
-          labelEndAdornment={labelEndAdornment}
-        >
-          {children}
-        </FormLabel>
-      </Form.Field>
-    </Form>
-  )
-}
-
-let spiedOnTitleCase: jest.SpyInstance
-
-describe('FormLabel', () => {
-  beforeEach(() => {
-    spiedOnTitleCase = jest.spyOn(titleCaseModule, 'default')
-  })
-  afterEach(() => {
-    spiedOnTitleCase.mockReset()
-  })
-
-  it('renders', () => {
-    const { container } = render(<TestFormLabel>Label</TestFormLabel>)
-
-    expect(container).toMatchSnapshot()
-  })
-
-  it('disabled', () => {
-    const { container } = render(<TestFormLabel disabled>Label</TestFormLabel>)
-
-    expect(container).toMatchSnapshot()
-  })
-
-  it('required with (optional)', () => {
-    const { container } = render(
-      <TestFormLabel requiredDecoration='optional'>Label</TestFormLabel>
-    )
-
-    expect(container).toMatchSnapshot()
-  })
-
-  it('required with (optional) and with `labelEndAdornment`', () => {
-    const { container } = render(
-      <TestFormLabel
-        labelEndAdornment={<span>label end adornment</span>}
-        requiredDecoration='optional'
-      >
-        Label
-      </TestFormLabel>
-    )
-
-    expect(container).toMatchSnapshot()
-  })
-
-  it('required with asterisk', () => {
-    const { container } = render(
-      <TestFormLabel requiredDecoration='asterisk'>Label</TestFormLabel>
-    )
-
-    expect(container).toMatchSnapshot()
-  })
-
-  it('should transform text to title case when Picasso titleCase property is true', () => {
-    const TEXT_CONTENT = 'Test kb8'
-
-    render(<TestFormLabel>{TEXT_CONTENT}</TestFormLabel>, undefined, {
-      titleCase: true,
-    })
-
-    expect(spiedOnTitleCase).toHaveBeenCalledWith(TEXT_CONTENT)
-  })
-
-  it('should not transform text to title case when Picasso titleCase property is true but the component property overrides it', () => {
-    render(
-      <TestFormLabel titleCase={false}>
-        some text with-the-edge case for TEST
-      </TestFormLabel>,
-      undefined,
-      { titleCase: true }
-    )
-
-    expect(spiedOnTitleCase).toHaveBeenCalledTimes(0)
-  })
-})