@digigov/react-core 0.21.1 → 0.22.1

package/src/AccessibilityIcon/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
+import clsx from 'clsx';
+export interface AccessibilityIconProps extends SvgIconProps {
+  /**
+   * ref is optional.
+   * ref prop declares the reference of the svg icon component.
+   * It can be used to to access the DOM element and the React element.
+   */
+  ref?: React.Ref<SVGSVGElement>;
+}
+/**
+ * Use AccessibilityIcon component when you need to show web accessibility options.
+ */
+export const AccessibilityIcon: React.FC<AccessibilityIconProps> = React.forwardRef<
+  SVGSVGElement,
+  AccessibilityIconProps
+>(function AccessibilityIcon({ size, variant, className, ...props }, ref) {
+  return (
+    <SvgIcon
+      size={size}
+      variant={variant}
+      className={clsx(className, {
+        'govgr-svg-icon--accessibility': true,
+      })}
+      ref={ref}
+      {...props}
+    >
+      <title>Μενού Προσβασιμότητας</title>
+      <circle cx="12" cy="3" r="3"/>
+      <path
+        d="M19.76,6.13c-4.94,2.01-10.57,2.01-15.51,0c-0.71-0.3-1.55-0.04-1.98,0.66c-1.41,2.6,3.27,3.76,4.94,4.37
+	c0.4,0.11,0.81,0.2,1.22,0.28c0.56,0.11,0.92,0.67,0.79,1.25c-0.79,3.66-1.96,9.1-1.96,9.1c-0.46,2.27,2.72,3.15,3.39,0.92L12,17.93
+	l1.36,4.78c0.67,2.22,3.85,1.36,3.39-0.92c0,0-1.16-5.4-1.95-9.06c-0.12-0.57,0.22-1.16,0.77-1.27c2.01-0.41,3.94-1.17,5.68-2.31
+	C22.89,8.04,21.58,5.38,19.76,6.13z"
+      />{' '}
+    </SvgIcon>
+  );
+});
+
+export default AccessibilityIcon;

package/src/AccessibilityTextIcon/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,511 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the AccessibilityTextIcon with no props 1`] = `
+<ForwardRef(AccessibilityTextIcon)>
+  <ForwardRef(SvgIcon)>
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <g>
+          <path
+            d="M19.79,16.09h-6.2l-1.3,3.73H9.41l6.04-16h2.49l6.05,16h-2.9L19.79,16.09z M14.37,13.85h4.64l-2.32-6.64L14.37,13.85z"
+          />
+          <path
+            d="M6.09,17.63H2.45l-0.76,2.18H0l3.54-9.38H5l3.55,9.38h-1.7L6.09,17.63z M2.91,16.32h2.72l-1.36-3.89L2.91,16.32z"
+          />
+        </g>
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(AccessibilityTextIcon)>
+`;
+
+exports[`renders the AccessibilityTextIcon with prop size=l 1`] = `
+<ForwardRef(AccessibilityTextIcon)
+  size="l"
+>
+  <ForwardRef(SvgIcon)
+    size="l"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--l govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--l govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <g>
+          <path
+            d="M19.79,16.09h-6.2l-1.3,3.73H9.41l6.04-16h2.49l6.05,16h-2.9L19.79,16.09z M14.37,13.85h4.64l-2.32-6.64L14.37,13.85z"
+          />
+          <path
+            d="M6.09,17.63H2.45l-0.76,2.18H0l3.54-9.38H5l3.55,9.38h-1.7L6.09,17.63z M2.91,16.32h2.72l-1.36-3.89L2.91,16.32z"
+          />
+        </g>
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(AccessibilityTextIcon)>
+`;
+
+exports[`renders the AccessibilityTextIcon with prop size=m 1`] = `
+<ForwardRef(AccessibilityTextIcon)
+  size="m"
+>
+  <ForwardRef(SvgIcon)
+    size="m"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--m govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--m govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <g>
+          <path
+            d="M19.79,16.09h-6.2l-1.3,3.73H9.41l6.04-16h2.49l6.05,16h-2.9L19.79,16.09z M14.37,13.85h4.64l-2.32-6.64L14.37,13.85z"
+          />
+          <path
+            d="M6.09,17.63H2.45l-0.76,2.18H0l3.54-9.38H5l3.55,9.38h-1.7L6.09,17.63z M2.91,16.32h2.72l-1.36-3.89L2.91,16.32z"
+          />
+        </g>
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(AccessibilityTextIcon)>
+`;
+
+exports[`renders the AccessibilityTextIcon with prop size=s 1`] = `
+<ForwardRef(AccessibilityTextIcon)
+  size="s"
+>
+  <ForwardRef(SvgIcon)
+    size="s"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--s govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--s govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <g>
+          <path
+            d="M19.79,16.09h-6.2l-1.3,3.73H9.41l6.04-16h2.49l6.05,16h-2.9L19.79,16.09z M14.37,13.85h4.64l-2.32-6.64L14.37,13.85z"
+          />
+          <path
+            d="M6.09,17.63H2.45l-0.76,2.18H0l3.54-9.38H5l3.55,9.38h-1.7L6.09,17.63z M2.91,16.32h2.72l-1.36-3.89L2.91,16.32z"
+          />
+        </g>
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(AccessibilityTextIcon)>
+`;
+
+exports[`renders the AccessibilityTextIcon with prop size=xl 1`] = `
+<ForwardRef(AccessibilityTextIcon)
+  size="xl"
+>
+  <ForwardRef(SvgIcon)
+    size="xl"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--xl govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--xl govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <g>
+          <path
+            d="M19.79,16.09h-6.2l-1.3,3.73H9.41l6.04-16h2.49l6.05,16h-2.9L19.79,16.09z M14.37,13.85h4.64l-2.32-6.64L14.37,13.85z"
+          />
+          <path
+            d="M6.09,17.63H2.45l-0.76,2.18H0l3.54-9.38H5l3.55,9.38h-1.7L6.09,17.63z M2.91,16.32h2.72l-1.36-3.89L2.91,16.32z"
+          />
+        </g>
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(AccessibilityTextIcon)>
+`;
+
+exports[`renders the AccessibilityTextIcon with prop variant=dark 1`] = `
+<ForwardRef(AccessibilityTextIcon)
+  variant="dark"
+>
+  <ForwardRef(SvgIcon)
+    variant="dark"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--dark govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--dark govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <g>
+          <path
+            d="M19.79,16.09h-6.2l-1.3,3.73H9.41l6.04-16h2.49l6.05,16h-2.9L19.79,16.09z M14.37,13.85h4.64l-2.32-6.64L14.37,13.85z"
+          />
+          <path
+            d="M6.09,17.63H2.45l-0.76,2.18H0l3.54-9.38H5l3.55,9.38h-1.7L6.09,17.63z M2.91,16.32h2.72l-1.36-3.89L2.91,16.32z"
+          />
+        </g>
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(AccessibilityTextIcon)>
+`;
+
+exports[`renders the AccessibilityTextIcon with prop variant=error 1`] = `
+<ForwardRef(AccessibilityTextIcon)
+  variant="error"
+>
+  <ForwardRef(SvgIcon)
+    variant="error"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--error govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--error govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <g>
+          <path
+            d="M19.79,16.09h-6.2l-1.3,3.73H9.41l6.04-16h2.49l6.05,16h-2.9L19.79,16.09z M14.37,13.85h4.64l-2.32-6.64L14.37,13.85z"
+          />
+          <path
+            d="M6.09,17.63H2.45l-0.76,2.18H0l3.54-9.38H5l3.55,9.38h-1.7L6.09,17.63z M2.91,16.32h2.72l-1.36-3.89L2.91,16.32z"
+          />
+        </g>
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(AccessibilityTextIcon)>
+`;
+
+exports[`renders the AccessibilityTextIcon with prop variant=error and size= xl 1`] = `
+<ForwardRef(AccessibilityTextIcon)
+  size="xl"
+  variant="warning"
+>
+  <ForwardRef(SvgIcon)
+    size="xl"
+    variant="warning"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--warning govgr-svg-icon--xl govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--warning govgr-svg-icon--xl govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <g>
+          <path
+            d="M19.79,16.09h-6.2l-1.3,3.73H9.41l6.04-16h2.49l6.05,16h-2.9L19.79,16.09z M14.37,13.85h4.64l-2.32-6.64L14.37,13.85z"
+          />
+          <path
+            d="M6.09,17.63H2.45l-0.76,2.18H0l3.54-9.38H5l3.55,9.38h-1.7L6.09,17.63z M2.91,16.32h2.72l-1.36-3.89L2.91,16.32z"
+          />
+        </g>
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(AccessibilityTextIcon)>
+`;
+
+exports[`renders the AccessibilityTextIcon with prop variant=focus 1`] = `
+<ForwardRef(AccessibilityTextIcon)
+  variant="focus"
+>
+  <ForwardRef(SvgIcon)
+    variant="focus"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--focus govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--focus govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <g>
+          <path
+            d="M19.79,16.09h-6.2l-1.3,3.73H9.41l6.04-16h2.49l6.05,16h-2.9L19.79,16.09z M14.37,13.85h4.64l-2.32-6.64L14.37,13.85z"
+          />
+          <path
+            d="M6.09,17.63H2.45l-0.76,2.18H0l3.54-9.38H5l3.55,9.38h-1.7L6.09,17.63z M2.91,16.32h2.72l-1.36-3.89L2.91,16.32z"
+          />
+        </g>
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(AccessibilityTextIcon)>
+`;
+
+exports[`renders the AccessibilityTextIcon with prop variant=gray 1`] = `
+<ForwardRef(AccessibilityTextIcon)
+  variant="gray"
+>
+  <ForwardRef(SvgIcon)
+    variant="gray"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--gray govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--gray govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <g>
+          <path
+            d="M19.79,16.09h-6.2l-1.3,3.73H9.41l6.04-16h2.49l6.05,16h-2.9L19.79,16.09z M14.37,13.85h4.64l-2.32-6.64L14.37,13.85z"
+          />
+          <path
+            d="M6.09,17.63H2.45l-0.76,2.18H0l3.54-9.38H5l3.55,9.38h-1.7L6.09,17.63z M2.91,16.32h2.72l-1.36-3.89L2.91,16.32z"
+          />
+        </g>
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(AccessibilityTextIcon)>
+`;
+
+exports[`renders the AccessibilityTextIcon with prop variant=light 1`] = `
+<ForwardRef(AccessibilityTextIcon)
+  variant="light"
+>
+  <ForwardRef(SvgIcon)
+    variant="light"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--light govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--light govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <g>
+          <path
+            d="M19.79,16.09h-6.2l-1.3,3.73H9.41l6.04-16h2.49l6.05,16h-2.9L19.79,16.09z M14.37,13.85h4.64l-2.32-6.64L14.37,13.85z"
+          />
+          <path
+            d="M6.09,17.63H2.45l-0.76,2.18H0l3.54-9.38H5l3.55,9.38h-1.7L6.09,17.63z M2.91,16.32h2.72l-1.36-3.89L2.91,16.32z"
+          />
+        </g>
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(AccessibilityTextIcon)>
+`;
+
+exports[`renders the AccessibilityTextIcon with prop variant=primary 1`] = `
+<ForwardRef(AccessibilityTextIcon)
+  variant="primary"
+>
+  <ForwardRef(SvgIcon)
+    variant="primary"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--primary govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--primary govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <g>
+          <path
+            d="M19.79,16.09h-6.2l-1.3,3.73H9.41l6.04-16h2.49l6.05,16h-2.9L19.79,16.09z M14.37,13.85h4.64l-2.32-6.64L14.37,13.85z"
+          />
+          <path
+            d="M6.09,17.63H2.45l-0.76,2.18H0l3.54-9.38H5l3.55,9.38h-1.7L6.09,17.63z M2.91,16.32h2.72l-1.36-3.89L2.91,16.32z"
+          />
+        </g>
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(AccessibilityTextIcon)>
+`;
+
+exports[`renders the AccessibilityTextIcon with prop variant=success 1`] = `
+<ForwardRef(AccessibilityTextIcon)
+  variant="success"
+>
+  <ForwardRef(SvgIcon)
+    variant="success"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--success govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--success govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <g>
+          <path
+            d="M19.79,16.09h-6.2l-1.3,3.73H9.41l6.04-16h2.49l6.05,16h-2.9L19.79,16.09z M14.37,13.85h4.64l-2.32-6.64L14.37,13.85z"
+          />
+          <path
+            d="M6.09,17.63H2.45l-0.76,2.18H0l3.54-9.38H5l3.55,9.38h-1.7L6.09,17.63z M2.91,16.32h2.72l-1.36-3.89L2.91,16.32z"
+          />
+        </g>
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(AccessibilityTextIcon)>
+`;
+
+exports[`renders the AccessibilityTextIcon with prop variant=warning 1`] = `
+<ForwardRef(AccessibilityTextIcon)
+  variant="warning"
+>
+  <ForwardRef(SvgIcon)
+    variant="warning"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--warning govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--warning govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <g>
+          <path
+            d="M19.79,16.09h-6.2l-1.3,3.73H9.41l6.04-16h2.49l6.05,16h-2.9L19.79,16.09z M14.37,13.85h4.64l-2.32-6.64L14.37,13.85z"
+          />
+          <path
+            d="M6.09,17.63H2.45l-0.76,2.18H0l3.54-9.38H5l3.55,9.38h-1.7L6.09,17.63z M2.91,16.32h2.72l-1.36-3.89L2.91,16.32z"
+          />
+        </g>
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(AccessibilityTextIcon)>
+`;
+
+exports[`renders the AccessibilityTextIcon with prop variant=warning and size=s 1`] = `
+<ForwardRef(AccessibilityTextIcon)
+  size="s"
+  variant="warning"
+>
+  <ForwardRef(SvgIcon)
+    size="s"
+    variant="warning"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--warning govgr-svg-icon--s govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--warning govgr-svg-icon--s govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <g>
+          <path
+            d="M19.79,16.09h-6.2l-1.3,3.73H9.41l6.04-16h2.49l6.05,16h-2.9L19.79,16.09z M14.37,13.85h4.64l-2.32-6.64L14.37,13.85z"
+          />
+          <path
+            d="M6.09,17.63H2.45l-0.76,2.18H0l3.54-9.38H5l3.55,9.38h-1.7L6.09,17.63z M2.91,16.32h2.72l-1.36-3.89L2.91,16.32z"
+          />
+        </g>
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(AccessibilityTextIcon)>
+`;

package/src/AccessibilityTextIcon/index.test.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import AccessibilityTextIcon from '@digigov/react-core/AccessibilityTextIcon';
+
+it('renders the AccessibilityTextIcon with no props', () => {
+  expect(mount(<AccessibilityTextIcon />)).toMatchSnapshot();
+});
+it('renders the AccessibilityTextIcon with prop size=s', () => {
+  expect(mount(<AccessibilityTextIcon size="s" />)).toMatchSnapshot();
+});
+it('renders the AccessibilityTextIcon with prop size=m', () => {
+  expect(mount(<AccessibilityTextIcon size="m" />)).toMatchSnapshot();
+});
+it('renders the AccessibilityTextIcon with prop size=l', () => {
+  expect(mount(<AccessibilityTextIcon size="l" />)).toMatchSnapshot();
+});
+it('renders the AccessibilityTextIcon with prop size=xl', () => {
+  expect(mount(<AccessibilityTextIcon size="xl" />)).toMatchSnapshot();
+});
+it('renders the AccessibilityTextIcon with prop variant=dark', () => {
+  expect(mount(<AccessibilityTextIcon variant="dark" />)).toMatchSnapshot();
+});
+it('renders the AccessibilityTextIcon with prop variant=light', () => {
+  expect(mount(<AccessibilityTextIcon variant="light" />)).toMatchSnapshot();
+});
+it('renders the AccessibilityTextIcon with prop variant=gray', () => {
+  expect(mount(<AccessibilityTextIcon variant="gray" />)).toMatchSnapshot();
+});
+it('renders the AccessibilityTextIcon with prop variant=primary', () => {
+  expect(mount(<AccessibilityTextIcon variant="primary" />)).toMatchSnapshot();
+});
+it('renders the AccessibilityTextIcon with prop variant=success', () => {
+  expect(mount(<AccessibilityTextIcon variant="success" />)).toMatchSnapshot();
+});
+it('renders the AccessibilityTextIcon with prop variant=warning', () => {
+  expect(mount(<AccessibilityTextIcon variant="warning" />)).toMatchSnapshot();
+});
+it('renders the AccessibilityTextIcon with prop variant=error', () => {
+  expect(mount(<AccessibilityTextIcon variant="error" />)).toMatchSnapshot();
+});
+it('renders the AccessibilityTextIcon with prop variant=focus', () => {
+  expect(mount(<AccessibilityTextIcon variant="focus" />)).toMatchSnapshot();
+});
+it('renders the AccessibilityTextIcon with prop variant=warning and size=s', () => {
+  expect(mount(<AccessibilityTextIcon variant="warning" size="s" />)).toMatchSnapshot();
+});
+it('renders the AccessibilityTextIcon with prop variant=error and size= xl', () => {
+  expect(mount(<AccessibilityTextIcon variant="warning" size="xl" />)).toMatchSnapshot();
+});

package/src/AccessibilityTextIcon/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
+export interface AccessibilityTextIconProps extends SvgIconProps {
+  /**
+   * ref is optional.
+   * ref prop declares the reference of the svg icon component.
+   * It can be used to to access the DOM element and the React element.
+   */
+  ref?: React.Ref<SVGSVGElement>;
+}
+/**
+ * Use AccessibilityTextIcon component when you need to show web accessibility options about text.
+ */
+export const AccessibilityTextIcon: React.FC<AccessibilityTextIconProps> = React.forwardRef<
+  SVGSVGElement,
+  AccessibilityTextIconProps
+>(function AccessibilityTextIcon({ ...props }, ref) {
+  return (
+    <SvgIcon ref={ref} {...props}>
+      <g>
+        <path d="M19.79,16.09h-6.2l-1.3,3.73H9.41l6.04-16h2.49l6.05,16h-2.9L19.79,16.09z M14.37,13.85h4.64l-2.32-6.64L14.37,13.85z" />
+        <path d="M6.09,17.63H2.45l-0.76,2.18H0l3.54-9.38H5l3.55,9.38h-1.7L6.09,17.63z M2.91,16.32h2.72l-1.36-3.89L2.91,16.32z" />
+      </g>
+    </SvgIcon>
+  );
+});
+
+export default AccessibilityTextIcon;

package/src/DetailsSummary/index.tsx

@@ -2,20 +2,26 @@ import React from 'react';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
 
-export interface DetailsSummaryProps extends BaseProps<'summary'> {}
+export interface DetailsSummaryProps extends BaseProps<'summary'> {
+  /*
+  ** size is optional. Default value is 'm'. 
+  */
+  size?: 'm' | 'l';
+}
 /**
  * Use this inside Details.DetailsSummary will be the text to click on.
  */
 export const DetailsSummary = React.forwardRef<
   HTMLElement,
   DetailsSummaryProps
->(function DetailsSummary({ className, children, ...props }, ref) {
+>(function DetailsSummary({size, className, children, ...props }, ref) {
   return (
     <Base
       as="summary"
       ref={ref}
       className={clsx(className, {
         'govgr-details__summary': true,
+        'govgr-details__summary--l': size==='l',
       })}
       {...props}
     >

package/src/FieldContainer/index.tsx

@@ -15,7 +15,7 @@ export const FieldContainer = React.forwardRef<
   HTMLDivElement,
   FieldContainerProps
 >(function FieldContainer(
-  { error, className, children, xs = 12, md = 12, lg = 12, xl = 12 },
+  { error, className, children, xs = 12, md = 12, lg = 12, xl = 12, ...props },
   ref
 ) {
   return (
@@ -30,6 +30,7 @@ export const FieldContainer = React.forwardRef<
       md={md}
       lg={lg}
       xl={xl}
+      {...props}
     >
       {children}
     </Grid>