@squiz/formatted-text-editor 1.21.1-alpha.3 → 1.21.1-alpha.4

package/src/ui/{Inputs/Text/TextInput.tsx → Fields/Input/Input.tsx}

@@ -1,10 +1,10 @@
 import React, { ForwardedRef, forwardRef, InputHTMLAttributes } from 'react';
 
-type TextInputProps = InputHTMLAttributes<HTMLInputElement> & {
+type InputProps = InputHTMLAttributes<HTMLInputElement> & {
   label?: string;
 };
 
-const TextInputInternal = ({ name, label, ...rest }: TextInputProps, ref: ForwardedRef<HTMLInputElement>) => {
+const InputInternal = ({ name, label, type = 'text', ...rest }: InputProps, ref: ForwardedRef<HTMLInputElement>) => {
   return (
     <>
       {label && (
@@ -12,9 +12,9 @@ const TextInputInternal = ({ name, label, ...rest }: TextInputProps, ref: Forwar
           {label}
         </label>
       )}
-      <input ref={ref} id={name} name={name} type="text" className="squiz-fte-form-control" {...rest} />
+      <input ref={ref} id={name} name={name} type={type} className="squiz-fte-form-control" {...rest} />
     </>
   );
 };
 
-export const TextInput = forwardRef(TextInputInternal);
+export const Input = forwardRef(InputInternal);

package/src/ui/_typography.scss

@@ -0,0 +1,46 @@
+a {
+  @apply text-blue-300;
+  text-decoration: underline;
+}
+
+h1 {
+  font-size: 1.625rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 2rem;
+}
+
+h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  letter-spacing: -0.5px;
+  line-height: 1.5rem;
+}
+
+h3 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 1.375rem;
+}
+
+h4 {
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: -0.2px;
+  line-height: 1.25rem;
+}
+
+h5 {
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 1.25rem;
+}
+
+h6 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 1.25rem;
+}

package/lib/ui/Inputs/Text/TextInput.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export declare const TextInput: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
-    label?: string | undefined;
-} & React.RefAttributes<HTMLInputElement>>;

package/lib/ui/ToolbarButton/ToolbarButton.d.ts

@@ -1,10 +0,0 @@
-import { ReactElement } from 'react';
-type ToolbarButtonProps = {
-    handleOnClick: () => void;
-    isDisabled?: boolean;
-    isActive: boolean;
-    icon: ReactElement;
-    label: string;
-};
-declare const ToolbarButton: ({ handleOnClick, isDisabled, isActive, icon, label }: ToolbarButtonProps) => JSX.Element;
-export default ToolbarButton;

package/lib/ui/ToolbarButton/ToolbarButton.js

@@ -1,10 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const ToolbarButton = ({ handleOnClick, isDisabled, isActive, icon, label }) => {
-    return (react_1.default.createElement("button", { "aria-label": label, title: label, type: "button", onClick: handleOnClick, disabled: isDisabled, className: `squiz-fte-btn toolbar-button ${isActive ? 'is-active' : ''}` }, icon));
-};
-exports.default = ToolbarButton;

package/src/ui/ToolbarButton/ToolbarButton.tsx

@@ -1,26 +0,0 @@
-import React, { ReactElement } from 'react';
-
-type ToolbarButtonProps = {
-  handleOnClick: () => void;
-  isDisabled?: boolean;
-  isActive: boolean;
-  icon: ReactElement;
-  label: string;
-};
-
-const ToolbarButton = ({ handleOnClick, isDisabled, isActive, icon, label }: ToolbarButtonProps) => {
-  return (
-    <button
-      aria-label={label}
-      title={label}
-      type="button"
-      onClick={handleOnClick}
-      disabled={isDisabled}
-      className={`squiz-fte-btn toolbar-button ${isActive ? 'is-active' : ''}`}
-    >
-      {icon}
-    </button>
-  );
-};
-
-export default ToolbarButton;

package/src/ui/ToolbarButton/_toolbar-button.scss

@@ -1,17 +0,0 @@
-.toolbar-button {
-  @apply bg-white text-gray-600 p-1;
-
-  ~ .toolbar-button {
-    margin-left: 2px;
-  }
-
-  &:hover,
-  &:focus {
-    background-color: rgba(black, 0.04);
-  }
-
-  &.is-active,
-  &:active {
-    @apply text-blue-300 bg-blue-100;
-  }
-}