Insert designing

package.json

@@ -112,7 +112,7 @@
     "react-is": "18.2.0",
     "react-live": "3.1.2",
     "resolve-url-loader": "5.0.0",
-    "rollup": "^3.19.1",
+    "rollup": "^3.26.1",
     "rollup-plugin-postcss": "^4.0.2",
     "sass": "^1.59.3",
     "storybook": "^7.0.18",

src/design-system/index.css

@@ -2,3 +2,4 @@
 @import './formselect.css';
 @import './label.css';
 @import './paragraph.css';
+@import './insert-text.css';

src/design-system/insert-text.css

@@ -0,0 +1,9 @@
+.dcx-insert-text {
+  font-family: token('font-family-body');
+  font-size: token('font-size-body');
+  font-size: token('font-size-body');
+  font-weight: token('font-weight-body');
+  color: token('color-text-body');
+  padding: 1em;
+  border-left: 0.6em solid #b1b4b6;
+}

stories/FormSelect/design-system/DarkTheme.stories.js

@@ -3,24 +3,24 @@ import style from '!raw-loader!../../themes/dark.theme.css';
 import { LiveProvider, LiveEditor } from 'react-live';
 
 /**
-* This a theme showcases how to customize the component so it can be used on dark backgrounds.
-*/
+ * This a theme showcases how to customize the component so it can be used on dark backgrounds.
+ */
 export default {
-  title: "DCXLibrary/Form/Select/Design system/Dark",
+  title: 'DCXLibrary/Form/Select/Design system/Dark',
   component: FormSelect,
   decorators: [
     (getStory) => {
       require('../../../dist/design-system/index.css');
       require('../../themes/dark.theme.css');
       return getStory();
-    }
+    },
   ],
   parameters: {
     options: { showPanel: true },
     actions: { disable: true },
   },
-  tags: ['autodocs']
-}
+  tags: ['autodocs'],
+};
 
 export const ShowCase = {
   parameters: {
@@ -33,12 +33,15 @@ export const ShowCase = {
     },
   },
   render: () => (
-    <LiveProvider code={style.replace('.dcx-formselect', ':root')} disabled={true} language="css">
+    <LiveProvider
+      code={style.replace('.dcx-formselect', ':root')}
+      disabled={true}
+      language="css"
+    >
       <LiveEditor className="liveEditor" aria-label="editor" />
     </LiveProvider>
-  )
-}
-
+  ),
+};
 
 export const Default = {
   name: 'Default',
@@ -52,10 +55,10 @@ export const Default = {
     },
   },
   args: {
-    label: "My label",
+    label: 'My label',
     options: ['Option 1', 'Option 2'],
-    nullOption: "Select an option...",
-  }
+    nullOption: 'Select an option...',
+  },
 };
 
 export const Hint = {
@@ -70,13 +73,13 @@ export const Hint = {
     },
   },
   args: {
-    label: "My label",
+    label: 'My label',
     options: ['Option 1', 'Option 2'],
-    nullOption: "Select an option...",
+    nullOption: 'Select an option...',
     hint: {
       text: 'This is and example of hintText/description of what we need from you',
     },
-  }
+  },
 };
 
 export const Error = {
@@ -91,11 +94,11 @@ export const Error = {
     },
   },
   args: {
-    label: "My label",
+    label: 'My label',
     options: ['Option 1', 'Option 2'],
-    nullOption: "Select an option...",
-    errorMessage: "Some error",
-  }
+    nullOption: 'Select an option...',
+    errorMessage: 'Some error',
+  },
 };
 
 export const HintAndError = {
@@ -110,15 +113,14 @@ export const HintAndError = {
     },
   },
   args: {
-    label: "My label",
+    label: 'My label',
     options: ['Option 1', 'Option 2'],
-    nullOption: "Select an option...",
+    nullOption: 'Select an option...',
     hint: {
       text: 'This is and example of hintText/description of what we need from you',
     },
-    errorMessage: "Some error",
-
-  }
+    errorMessage: 'Some error',
+  },
 };
 
 export const Value = {
@@ -133,10 +135,9 @@ export const Value = {
     },
   },
   args: {
-    label: "My label",
+    label: 'My label',
     options: ['Option 1', 'Option 2'],
-    nullOption: "Select an option...",
-    value: "Option 1",
-  }
+    nullOption: 'Select an option...',
+    value: 'Option 1',
+  },
 };
-

stories/InsertText/design-system/AccessibleTheme.stories.js

@@ -0,0 +1,55 @@
+/* eslint-disable import/no-webpack-loader-syntax */
+/* eslint-disable import/no-anonymous-default-export */
+import { InsertText } from '../../../src/insertText/InsertText';
+import style from '!raw-loader!../../themes/accessible.theme.css';
+import { LiveProvider, LiveEditor } from 'react-live';
+import { StorybookUtils } from '../../../core/storybook/StorybookUtils';
+
+/**
+ * This a theme aimed at easing the vizualization of the different elements of the component in order to improve the experience for people that have visual impairments.
+ */
+export default {
+  title: 'DCXLibrary/Typography/InsertText/Design system/Accessible',
+  component: InsertText,
+  decorators: [
+    (getStory) => {
+      require('../../../dist/design-system/index.css');
+      require('../../themes/accessible.theme.css');
+      return getStory();
+    },
+  ],
+  parameters: {
+    options: { showPanel: true },
+    actions: { disable: true },
+  },
+  tags: ['autodocs'],
+};
+export const ShowCase = {
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#282c34' },
+        { name: 'light', value: '#fff' },
+      ],
+    },
+  },
+  render: () => (
+    <LiveProvider
+      code={StorybookUtils.getThemeCode('dcx-insert-text', style)}
+      disabled={true}
+      language="css"
+    >
+      <LiveEditor className="liveEditor" aria-label="editor" />
+    </LiveProvider>
+  ),
+};
+
+export const Default = {
+  name: 'Default',
+  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: 'dcx-insert-text',
+  },
+};

stories/InsertText/design-system/DarkTheme.stories.js

@@ -0,0 +1,64 @@
+/* eslint-disable import/no-webpack-loader-syntax */
+/* eslint-disable import/no-anonymous-default-export */
+import { InsertText } from '../../../src/insertText/InsertText';
+import style from '!raw-loader!../../themes/dark.theme.css';
+import { LiveProvider, LiveEditor } from 'react-live';
+import { StorybookUtils } from '../../../core/storybook/StorybookUtils';
+
+/**
+ * This a theme showcases how to customize the component so it can be used on dark backgrounds.
+ */
+export default {
+  title: 'DCXLibrary/Typography/InsertText/Design system/Dark',
+  component: InsertText,
+  decorators: [
+    (getStory) => {
+      require('../../../dist/design-system/index.css');
+      require('../../themes/dark.theme.css');
+      return getStory();
+    },
+  ],
+  parameters: {
+    options: { showPanel: true },
+    actions: { disable: true },
+  },
+  tags: ['autodocs'],
+};
+export const ShowCase = {
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#282c34' },
+        { name: 'light', value: '#fff' },
+      ],
+    },
+  },
+  render: () => (
+    <LiveProvider
+      code={StorybookUtils.getThemeCode('dcx-insert-text', style)}
+      disabled={true}
+      language="css"
+    >
+      <LiveEditor className="liveEditor" aria-label="editor" />
+    </LiveProvider>
+  ),
+};
+
+export const Default = {
+  name: 'Default',
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#333131' },
+        { name: 'light', value: '#fff' },
+      ],
+    },
+  },
+  args: {
+    className: 'dcx-insert-text-dark',
+    value:
+      'It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.',
+  },
+};

stories/InsertText/design-system/Default.stories.js

@@ -0,0 +1,29 @@
+import { InsertText } from '../../../src/insertText/InsertText';
+
+/**
+ * Here we display the component in its natural form, importing only the base Design System styles.
+ */
+export default {
+  title: 'DCXLibrary/Typography/InsertText/Design system/Default',
+  component: InsertText,
+  decorators: [
+    (getStory) => {
+      require('../../../dist/design-system/index.css');
+      return getStory();
+    },
+  ],
+  parameters: {
+    options: { showPanel: true },
+    actions: { disable: true },
+  },
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  name: 'Default',
+  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: 'dcx-insert-text',
+  },
+};

stories/InsertText/design-system/MaterialTheme.stories.js

@@ -0,0 +1,56 @@
+/* eslint-disable import/no-webpack-loader-syntax */
+/* eslint-disable import/no-anonymous-default-export */
+import { InsertText } from '../../../src/insertText/InsertText';
+import style from '!raw-loader!../../themes/material.theme.css';
+import { LiveProvider, LiveEditor } from 'react-live';
+import { StorybookUtils } from '../../../core/storybook/StorybookUtils';
+
+/**
+ * This a theme showcases an appearance similar to Material UI can be achieved.
+ * If you copy paste this snippet inside your css file you'll get a material design style
+ */
+export default {
+  title: 'DCXLibrary/Typography/InsertText/Design system/Material',
+  component: InsertText,
+  decorators: [
+    (getStory) => {
+      require('../../../dist/design-system/index.css');
+      require('../../themes/material.theme.css');
+      return getStory();
+    },
+  ],
+  parameters: {
+    options: { showPanel: true },
+    actions: { disable: true },
+  },
+  tags: ['autodocs'],
+};
+export const ShowCase = {
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#282c34' },
+        { name: 'light', value: '#fff' },
+      ],
+    },
+  },
+  render: () => (
+    <LiveProvider
+      code={StorybookUtils.getThemeCode('dcx-insert-text', style)}
+      disabled={true}
+      language="css"
+    >
+      <LiveEditor className="liveEditor" aria-label="editor" />
+    </LiveProvider>
+  ),
+};
+
+export const Default = {
+  name: 'Default',
+  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: 'dcx-insert-text',
+  },
+};

stories/InsertText/design-system/Playground.stories.js

@@ -0,0 +1,24 @@
+import { InsertText } from '../../../src/insertText/InsertText';
+
+export default {
+  title: 'DCXLibrary/Typography/InsertText/Design system',
+  component: InsertText,
+  decorators: [
+    (getStory) => {
+      require('../../../dist/design-system/index.css');
+      return getStory();
+    },
+  ],
+  parameters: {
+    options: { showPanel: true },
+    actions: { disable: true },
+  },
+};
+
+export const Playground = {
+  name: 'Playground',
+  args: {
+    value:
+      'It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.',
+  },
+};

stories/themes/dark.theme.css

@@ -14,3 +14,7 @@
 .dcx-paragraph {
   --dcx-color-text-body: white;
 }
+
+.dcx-insert-text {
+  --dcx-color-text-body: white;
+}