InsertTextComponent

example/src/components/InsertTextDemo.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { InsertText } from '@capgeminiuk/dcx-react-library';
+
+export const InsertTextDemo = () => {
+  return (
+    <>
+      <div className="govuk-input">
+        <h1>Demo of ComponentName</h1>
+        <InsertText value="insert text" />
+      </div>
+    </>
+  );
+};

example/src/index.tsx

@@ -28,6 +28,8 @@ import './global-styles.scss';
 import { Login } from './pages/Login';
 import { Home } from './pages/HomePage';
 import { Register } from './pages/Register';
+import { InsertTextDemo } from './components/InsertTextDemo';
+
 import { LabelDemo } from './components/LabelDemo';
 const App = () => (
   <div>
@@ -55,6 +57,7 @@ const App = () => (
         <Route path="/tooltipDemo" element={<TooltipDemo />} />
         <Route path="/details" element={<DetailsDemo />} />
         <Route path="/characterCount" element={<CharacterCountDemo />} />
+        <Route path="/insertText" element={<InsertTextDemo />} />
         <Route path="/link" element={<LinkDemo />} />
         <Route path="/label" element={<LabelDemo />} />
       </Routes>

src/index.ts

@@ -20,4 +20,5 @@ export * from './details';
 export * from './common/utils/classNames';
 export * from './label';
 export * from './characterCount';
+export * from './insertText';
 export * from './link';

src/insertText/InsertText.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { classNames } from '../common';
+
+export type InsertTextProps = {
+  /**
+   * specify a custom class name to be applied to the Insert-text
+   */
+  className?: string;
+
+  /**
+   *value specified by user
+   */
+  value: 'insert text';
+
+  /**
+   * It will pass an id to the InsertText element
+   */
+  id?: string;
+
+  /**
+   * Additional props/attributes
+   */
+  props?: React.HTMLAttributes<HTMLDivElement>;
+};
+
+export const InsertText = ({
+  value,
+  className,
+  id,
+  props,
+}: InsertTextProps) => {
+  const classes = classNames(['dcx-insert-text', className]);
+
+  return (
+    <div className={classes} id={id} {...props}>
+      {value}
+    </div>
+  );
+};

src/insertText/__test__/InsertText.test.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { InsertText } from '../InsertText';
+
+describe('InsertText', () => {
+  it('should render', () => {
+    render(<InsertText value="insert text" id="user-defined-id" />);
+
+    expect(screen.getByText('insert text')).toBeInTheDocument();
+  });
+
+  it('should have the class dcx-insert-text if the user does not specify any additional class', () => {
+    render(<InsertText value="insert text" id="user-defined-id" />);
+    expect(screen.getByText('insert text')).toHaveClass('dcx-insert-text');
+  });
+
+  it('should have the class dcx-insert-text and the user based class if the user specifies any additional class', () => {
+    render(
+      <InsertText
+        value="insert text"
+        id="user-defined-id"
+        className="my-custom-class"
+      />
+    );
+    expect(screen.getByText('insert text')).toHaveClass('dcx-insert-text');
+    expect(screen.getByText('insert text')).toHaveClass('my-custom-class');
+  });
+
+  it('should be able to pass some extra properties', () => {
+    const { container } = render(
+      <InsertText
+        value="insert text"
+        id="user-defined-id"
+        props={{ style: { color: 'red' } }}
+      />
+    );
+    const inserttextElement =
+      container.getElementsByClassName('dcx-insert-text');
+    const style = window.getComputedStyle(inserttextElement[0]);
+    expect(style.color).toBe('red');
+  });
+
+  it('should be able to pass an id', () => {
+    const { container } = render(
+      <InsertText value="insert text" id="user_defined_id" />
+    );
+    expect(container.firstChild).toHaveAttribute('id', 'user_defined_id');
+  });
+});

src/insertText/index.tsx

@@ -0,0 +1 @@
+export { InsertText } from './InsertText';

stories/InsertText/ClassBased.stories.js

@@ -0,0 +1,20 @@
+import { InsertText } from '../../src/insertText/InsertText';
+
+export default {
+  title: 'DCXLibrary/Typography/InsertText/Class based',
+  component: InsertText,
+  parameters: {
+    options: {
+      showPanel: true,
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export const Basic = {
+  name: 'Basic',
+  args: {
+    value: 'It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.',
+    className: 'govuk-inset-text',
+  },
+};

stories/InsertText/Documentation.mdx

@@ -0,0 +1,34 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  Props,
+  ArgTypes,
+} from '@storybook/addon-docs/blocks';
+
+import * as InsertTextStories from './UnStyled.stories';
+
+<Meta title="DCXLibrary/Typography/InsertText/Documentation" />
+
+# InsertText
+
+An InsertText component ready to use in your application.  
+InsertText is UI/UX agnostic so you need to provide your style to have the look and feel you prefer.  
+When you import the InsertText component without providing any className or associated style it will looks as following:
+
+<Canvas of={InsertTextStories.Unstyled} />
+
+A more complex example with all the possible properties is:
+
+```js
+<InsertText
+  value="insert text"
+  id="user-defined-id"
+  className="my-class"
+  props={{ style: { color: red } }}
+/>
+```
+
+Below a list of all the available properties:
+
+<ArgTypes of={InsertTextStories} />

stories/InsertText/Live.stories.js

@@ -0,0 +1,21 @@
+import { InsertText } from '../../src/insertText/InsertText';
+import InsertTextLive from '../liveEdit/InsertTextLive';
+
+export default {
+  title: 'DCXLibrary/Typography/InsertText/live',
+  component: InsertText,
+
+  parameters: {
+    options: {
+      showPanel: false,
+    },
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: { hidden: true },
+    },
+  },
+};
+
+export const Live = {
+  render: () => <InsertTextLive />,
+};

stories/InsertText/UnStyled.stories.js

@@ -0,0 +1,17 @@
+import { InsertText } from '../../src/insertText/InsertText';
+
+export default {
+  title: 'DCXLibrary/Typography/InsertText/Without style',
+  component: InsertText,
+  parameters: {
+    options: {
+      showPanel: true,
+    },
+  },
+};
+
+export const Unstyled = {
+  args: {
+    value: 'insert text',
+  },
+};

stories/govUkStyle.css

@@ -58,6 +58,62 @@
   }
 }
 
+.govuk-inset-text {
+  font-family: 'GDS Transport', arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 400;
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 1.25;
+  color: #0b0c0c;
+  padding: 15px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  clear: both;
+  border-left: 10px solid #b1b4b6;
+}
+@media print {
+  .govuk-inset-text {
+    font-family: sans-serif;
+  }
+}
+@media (min-width: 40.0625em) {
+  .govuk-inset-text {
+    font-size: 19px;
+    font-size: 1.1875rem;
+    line-height: 1.3157894737;
+  }
+}
+@media print {
+  .govuk-inset-text {
+    font-size: 14pt;
+    line-height: 1.15;
+  }
+}
+@media print {
+  .govuk-inset-text {
+    color: #000;
+  }
+}
+@media (min-width: 40.0625em) {
+  .govuk-inset-text {
+    margin-top: 30px;
+  }
+}
+@media (min-width: 40.0625em) {
+  .govuk-inset-text {
+    margin-bottom: 30px;
+  }
+}
+.govuk-inset-text > :first-child {
+  margin-top: 0;
+}
+.govuk-inset-text > :only-child,
+.govuk-inset-text > :last-child {
+  margin-bottom: 0;
+}
+
 .govuk-textarea {
   font-family: 'GDS Transport', arial, sans-serif;
   -webkit-font-smoothing: antialiased;

stories/liveEdit/InsertTextLive.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
+import { InsertText } from '../../src/insertText/InsertText';
+
+const InsertTextDemo = `
+function InsertTextDemo() {
+
+  return (
+    <InsertText value="insert text" id="user-defined-id" props={{}} className="" />
+  )
+}
+`.trim();
+
+const InsertTextLive = () => {
+  const scope = { InsertText };
+  return (
+    <LiveProvider code={InsertTextDemo} scope={scope}>
+      <div className="container">
+        <LiveEditor className="liveEditor" aria-label="editor" />
+        <LivePreview className="livePreview" aria-label="preview" />
+      </div>
+      <LiveError className="liveError" aria-label="error" />
+    </LiveProvider>
+  );
+};
+
+export default InsertTextLive;