@progressiveui/react 1.22.0

package/src/components/Text/Text.stories.tsx

@@ -0,0 +1,390 @@
+import React from "react";
+import markdown from "./README.mdx";
+import Text from ".";
+import Link from "../Link";
+import { List, ListItem } from "../List";
+
+export default {
+  title: "Components/UI Elements/Text",
+  component: Text,
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+    mdx: markdown,
+  },
+};
+
+export const TextDefault: Story = {
+  render: (args) => <Text {...args} />,
+  args: {
+    children: "Text",
+  },
+};
+
+/*
+export const Regular = (args) => <Text {...args} />;
+
+Regular.decorators = [
+  (Story) => (
+    <div
+      style={{
+        display: 'flex',
+        borderTop: '1px solid #EFEFEF',
+        borderBottom: '2px solid #EFEFEF',
+      }}>
+      <Story />
+    </div>
+  ),
+];
+
+Regular.args = { children: 'Content', kind: 'h1' };
+*/
+
+const regularsourcecode = `
+import { Text } from "@progressiveui/react";
+
+<div>
+  <Text kind='h1'>Content</Text>
+</div>
+`;
+
+Regular.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: regularsourcecode,
+      },
+    },
+  },
+};
+
+const headingText = [
+  { kind: "h1", text: "Heading 1", styling: "29px, SemiBold" },
+  { kind: "h2", text: "Heading 2", styling: "25px, SemiBold" },
+  { kind: "h3", text: "Heading 3", styling: "22px, SemiBold" },
+  { kind: "h4", text: "Heading 4", styling: "20px, SemiBold" },
+  { kind: "h5", text: "Heading 5", styling: "18px, SemiBold" },
+  { kind: "h6", text: "Heading 6", styling: "16px, SemiBold" },
+];
+
+export const Headings = (args) => (
+  <>
+    {headingText.map((e) => (
+      <>
+        <Text kind={e.kind}>{e.text}</Text>
+        <div style={{ color: "#A9A9A9", marginBottom: "2rem" }}>
+          {e.styling}
+        </div>
+      </>
+    ))}
+  </>
+);
+
+const headingsourcecode = `
+import { Text } from "@progressiveui/react";
+
+<>
+  <Text kind='h1'>Heading 1</Text>
+  <Text kind='h2'>Heading 2</Text>
+  <Text kind='h3'>Heading 3</Text>
+  <Text kind='h4'>Heading 4</Text>
+  <Text kind='h5'>Heading 5</Text>
+  <Text kind='h6'>Heading 6</Text>
+</>
+`;
+Headings.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: headingsourcecode,
+      },
+    },
+  },
+};
+
+const Normaltext = [
+  { kind: "p", text: "Body copy, paragraph", styling: "16px, Regular" },
+  { kind: "p", text: "Label (form)", styling: "14px, SemiBold" },
+  { kind: "code", text: "Code", styling: "Monospace, 16px, Regular" },
+  { kind: "sup", text: "Sup", styling: "11px, Regular" },
+  {
+    kind: "inline-highlight",
+    text: "Inline highlight",
+    styling: "14px, SemiBold",
+  },
+];
+
+export const text = (args) => (
+  <>
+    {Normaltext.map((e) => (
+      <>
+        <Text kind={e.kind}>{e.text}</Text>
+        <div style={{ color: "#A9A9A9", marginBottom: "2rem" }}>
+          {e.styling}
+        </div>
+      </>
+    ))}
+  </>
+);
+
+const textsourcecode = `
+import { Text } from "@progressiveui/react";
+
+<>
+  <Text kind='p'>Body copy, paragraph</Text>
+  <Text kind='p'>Label (form)</Text>
+  <Text kind='code'>Code</Text>
+  <Text kind='sup'>Sup</Text>
+  <Text kind='inline-highlight'>Inline highlight</Text>
+</>
+`;
+text.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: textsourcecode,
+      },
+    },
+  },
+};
+
+export const Pagetitle = (args) => (
+  <>
+    <Text kind="title">Title</Text>
+    <div style={{ color: "#A9A9A9", marginBottom: "2rem" }}>58px, Light</div>
+    <Text kind="subtitle">Overline</Text>
+    <div style={{ color: "#A9A9A9", marginBottom: "2rem" }}>14px, SemiBold</div>
+  </>
+);
+const pagetitlesourcecode = `
+import { Text, Link  } from "@progressiveui/react";
+
+<>
+  <Text kind="title">Title</Text>
+  <Text kind="subtitle">Overline</Text>
+</>
+`;
+
+Pagetitle.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: pagetitlesourcecode,
+      },
+    },
+  },
+};
+
+export const Links = (args) => (
+  <>
+    <Text kind="a">Link</Text>
+    <div style={{ color: "#A9A9A9", marginBottom: "2rem" }}>16px, Regular</div>
+    <Link className="wfp--link--hover">Link</Link>
+    <div style={{ color: "#A9A9A9", marginBottom: "2rem" }}>16px, Regular</div>
+  </>
+);
+
+const linksourcecode = `
+import { Text, Link  } from "@progressiveui/react";
+
+<>
+  <Text kind="a">Link</Text>
+  <Link className="wfp--link--hover">Link</Link>
+</>
+`;
+
+Links.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: linksourcecode,
+      },
+    },
+  },
+};
+
+const emphasisText = [
+  { kind: "strong", text: "Bold", styling: "16px, Bold" },
+  { kind: "bold", text: "SemiBold", styling: "16px, SemiBold" },
+  { kind: "i", text: "Italic", styling: "16px, Italic" },
+];
+
+export const Emphasis = (args) => (
+  <>
+    {emphasisText.map((e) => (
+      <>
+        <Text kind={e.kind}>{e.text}</Text>
+        <div style={{ color: "#A9A9A9", marginBottom: "2rem" }}>
+          {e.styling}
+        </div>
+      </>
+    ))}
+  </>
+);
+
+const emphasissourcecode = `
+import { Text } from "@progressiveui/react";
+
+<>
+  <Text kind="strong">Bold</Text>
+  <Text kind="bold">SemiBold</Text>
+  <Text kind="i">Italic</Text>
+</>
+`;
+Emphasis.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: emphasissourcecode,
+      },
+    },
+  },
+};
+
+const list = [
+  { kind: "simple", heading: "Ordered lists" },
+  { kind: "bullets", heading: "Bullet lists" },
+  { kind: "ordered", heading: "Unordered lists" },
+];
+
+export const Lists = (args) => (
+  <>
+    {list.map((e) => (
+      <>
+        <Text kind="h4">{e.heading}</Text>
+        <List kind={e.kind}>
+          <ListItem>Numbered List 1</ListItem>
+          <ListItem>Numbered List 2</ListItem>
+          <ListItem>Numbered List 3</ListItem>
+        </List>
+        <div style={{ color: "#A9A9A9", marginBottom: "2rem" }}>
+          16px, Regular
+        </div>
+      </>
+    ))}
+  </>
+);
+
+const listsourcecode = `
+import { Text, List, ListItem  } from "@progressiveui/react";
+
+const list = [
+    { kind: 'simple', heading: 'Ordered lists' },
+    { kind: 'bullets', heading: 'Bullet lists' },
+    { kind: 'ordered', heading: 'Unordered lists' },
+  ];
+
+const Lists = () => {
+    return(
+        
+    <>
+      {list.map((e) => (
+        <>
+          <Text kind="h4">{e.heading}</Text>
+          <List kind={e.kind}>
+            <ListItem>Numbered List 1</ListItem>
+            <ListItem>Numbered List 2</ListItem>
+            <ListItem>Numbered List 3</ListItem>
+          </List>
+        </>
+      ))}
+    </>
+  );
+
+}
+
+export default Lists;
+`;
+
+Lists.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: listsourcecode,
+      },
+    },
+  },
+};
+
+const colors = [
+  { color: "#031C2D", text: "#text-01" },
+  { color: "#5A6872", text: "#text-02" },
+  { color: "#DFE6EB", text: "#text-03" },
+];
+
+export const textColors = (args) => (
+  <>
+    {colors.map((e) => (
+      <div style={{ display: "flex" }}>
+        <div>
+          <Text>{e.text}</Text>
+          <div style={{ color: "#A9A9A9", marginBottom: "3rem" }}>
+            16px, {e.color}
+          </div>
+        </div>
+        <div
+          style={{
+            backgroundColor: e.color,
+            width: "50px",
+            height: "50px",
+            borderRadius: "50%",
+            marginLeft: "1.5rem",
+          }}
+        ></div>
+      </div>
+    ))}
+  </>
+);
+
+const textcolorsourcecode = `
+import { Text } from '@progressiveui/react'
+
+<>
+  <div style={{ display: 'flex' }}>
+    <Text>#text-01</Text>
+    <div
+      style={{
+        backgroundColor: '#031C2D',
+        width: '50px',
+        height: '50px',
+        borderRadius: '50%',
+        marginLeft: '1.5rem',
+      }}>
+    </div>
+  </div>
+  <div style={{ display: 'flex' }}>
+    <Text>#text-02</Text>
+    <div
+      style={{
+        backgroundColor: '#5A6872',
+        width: '50px',
+        height: '50px',
+        borderRadius: '50%',
+        marginLeft: '1.5rem',
+      }}>
+    </div>
+  </div>
+  <div style={{ display: 'flex' }}>
+    <Text>#text-03</Text>
+    <div
+      style={{
+        backgroundColor: '#DFE6EB',
+        width: '50px',
+        height: '50px',
+        borderRadius: '50%',
+        marginLeft: '1.5rem',
+      }}>
+    </div>
+  </div>  
+</>
+`;
+
+textColors.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: textcolorsourcecode,
+      },
+    },
+  },
+};

package/src/components/Text/Text.tsx

@@ -0,0 +1,81 @@
+import * as React from "react";
+import classNames from "classnames";
+import useSettings from "../../hooks/useSettings";
+import { Spacing, TextKind } from "../../utils";
+
+interface TextProps extends React.AllHTMLAttributes<HTMLDivElement> {
+  /**
+   * Specifies the kind of text to be displayed. This could be an enumeration that defines various text styles or types.
+   */
+  kind?: TextKind;
+
+  /**
+   * The content of the Text component, typically a string or nested React elements.
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Spacing to be applied above the Text component. 'Spacing' could be a type that represents predefined spacing values.
+   */
+  spacingTop?: Spacing;
+
+  /**
+   * Spacing to be applied below the Text component. Similar to spacingTop, it uses the Spacing type for predefined values.
+   */
+  spacingBottom?: Spacing;
+
+  /**
+   * Additional custom class name(s) that can be applied to the Text component for styling purposes.
+   */
+  className?: string;
+}
+
+export const textLookup: Record<TextKind, keyof JSX.IntrinsicElements> = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  title: "h1",
+  subtitle: "h3",
+  p: "p",
+  caption: "div",
+  code: "code",
+  i: "i",
+  bold: "b",
+  strong: "strong",
+  a: "a",
+  "inline-highlight": "code",
+};
+
+/**
+ *Text is a component for displaying paragraphs. You can use Text to standardize text across your web app. For longer sections or full articles use the <Story /> component instead.
+ */
+
+const Text: React.FC<TextProps> = ({
+  children,
+  className,
+  kind,
+  spacingTop,
+  spacingBottom,
+}) => {
+  const { prefix } = useSettings();
+  const TagName: keyof JSX.IntrinsicElements =
+    kind && textLookup[kind] ? textLookup[kind] : "div";
+  const classes = classNames(
+    {
+      [`${prefix}--text`]: true,
+      // [`${prefix}--story__${kind}`]: kind,
+      [`${prefix}--text__${kind}`]: kind,
+      [`${prefix}--text__spacing-top-${spacingTop}`]: spacingTop,
+      [`${prefix}--text__spacing-bottom-${spacingBottom}`]: spacingBottom,
+    },
+    className
+  );
+  return React.createElement(TagName, { className: classes }, children);
+};
+
+Text.displayName = "Text";
+
+export default Text;

package/src/components/Text/index.ts

@@ -0,0 +1,2 @@
+//export * from './Text';
+export { default } from './Text';

package/src/components/TextArea/README.mdx

@@ -0,0 +1,3 @@
+**TextArea** represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.
+
+[Carbon Design System Usage for text inputs](https://next.carbondesignsystem.com/components/text-input)

package/src/components/TextArea/TextArea-old.js

@@ -0,0 +1,207 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import FormItem from '../FormItem';
+import useSettings from '../../hooks/useSettings'; //import useDetectPrint from '../../internal/useDetectPrint';
+
+/** A textarea is an input dedicated for a large volume of text. It may be used in a variety of components like forms, comment sections, and forums. */
+
+// TODO: Check forward ref
+const TextArea = React.forwardRef((props, ref) => {
+  const {
+    className,
+    formItemClassName,
+    id,
+    labelText,
+    hideLabel,
+    onChange,
+    onClick,
+    invalid,
+    invalidText,
+    inputRef = ref,
+    helperText,
+    fullWidth,
+    viewOnly,
+    ...other
+  } = props;
+  /* TODO: Implement print preview for inputs with automated overflow
+  const isPrinting = useDetectPrint();
+  */
+  const { prefix } = useSettings();
+
+  const textareaProps = {
+    id,
+    onChange: (evt) => {
+      if (!other.disabled) {
+        onChange(evt);
+      }
+    },
+    onClick: (evt) => {
+      if (!other.disabled) {
+        onClick(evt);
+      }
+    },
+  };
+
+  const textareaClasses = classNames(`${prefix}--text-area`, className, {
+    [`${prefix}--textarea-fullwidth`]: fullWidth,
+  });
+  const labelClasses = classNames(`${prefix}--label`, {
+    [`${prefix}--visually-hidden`]: hideLabel,
+    [`${prefix}--label--disabled`]: other.disabled,
+  });
+
+  const label = labelText ? (
+    <label htmlFor={id} className={labelClasses}>
+      {labelText}
+    </label>
+  ) : null;
+
+  const helperTextClasses = classNames(`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: other.disabled,
+  });
+
+  const error = invalid ? (
+    <div className="wfp--form-requirement">{invalidText}</div>
+  ) : null;
+
+  const input = invalid ? (
+    <textarea
+      {...other}
+      {...textareaProps}
+      ref={inputRef}
+      className={textareaClasses}
+      data-invalid
+    />
+  ) : (
+    <textarea
+      {...other}
+      ref={inputRef}
+      {...textareaProps}
+      className={textareaClasses}
+    />
+  );
+
+  const helper = helperText ? (
+    <div className={helperTextClasses}>{helperText}</div>
+  ) : null;
+
+  return (
+    <FormItem className={formItemClassName}>
+      {label}
+      {input}
+      {/*isPrinting && (
+        <div {...other} {...textareaProps} className={textareaClasses}>
+          {other.value}
+        </div>
+      )*/}
+      {helper}
+      {error}
+    </FormItem>
+  );
+});
+
+TextArea.propTypes = {
+  /**
+   * Provide a custom className that is applied directly to the underlying
+   * &lt;textarea&gt; node
+   */
+  className: PropTypes.string,
+
+  // /**
+  //  * Specify the `cols` attribute for the underlying &lt;textarea&gt; node
+  //  */
+  // cols: PropTypes.number,
+
+  /**
+   * Optionally provide the default value of the &lt;textarea&gt;
+   */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify whether the control is disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Provide a unique identifier for the control
+   */
+  id: PropTypes.string,
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText: PropTypes.node.isRequired,
+
+  /**
+   * Optionally provide an `onChange` handler that is called whenever &lt;textarea&gt;
+   * is updated
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Optionally provide an `onClick` handler that is called whenever the
+   * &lt;textarea&gt; is clicked
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Specify the placeholder attribute for the &lt;textarea&gt;
+   */
+  placeholder: PropTypes.string,
+
+  /**
+   * Specify the rows attribute for the &lt;textarea&gt;
+   */
+  rows: PropTypes.number,
+
+  /**
+   * Provide the current value of the &lt;textarea&gt;
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify whether the control is currently invalid.
+   * Either a boolean in combination with `invalidText` or an `object`( eg. { message: "Message", …otherErrorProperties }) can be passed.
+   */
+  invalid: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText: PropTypes.string,
+
+  /**
+   * Provide text that is used alongside the control label for additional help
+   */
+  helperText: PropTypes.node,
+
+  /**
+   * Specify whether you want the underlying label to be visually hidden
+   */
+  hideLabel: PropTypes.bool,
+
+  /**
+   * Specify whether you want `textarea` width to be 100%, this will overide cols set
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * Specify whether you want `textarea` is view only
+   */
+  viewOnly: PropTypes.bool,
+};
+
+TextArea.defaultProps = {
+  disabled: false,
+  onChange: () => {},
+  onClick: () => {},
+  placeholder: '',
+  rows: 4,
+  invalid: false,
+  invalidText: '',
+  helperText: '',
+  fullWidth: true,
+};
+
+export default TextArea;