chore: add a AckeeSelect component

4 files changed, 155 insertions, 0 deletions

diff --git a/src/components/molecules/forms/ackee-select.module.scss b/src/components/molecules/forms/ackee-select.module.scss
new file mode 100644
index 0000000..87cd9ee
--- /dev/null
+++ b/src/components/molecules/forms/ackee-select.module.scss
@@ -0,0 +1,11 @@
+.wrapper {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  position: relative;
+}
+
+.tooltip {
+  position: absolute;
+  bottom: -100%;
+}
diff --git a/src/components/molecules/forms/ackee-select.stories.tsx b/src/components/molecules/forms/ackee-select.stories.tsx
new file mode 100644
index 0000000..a59bfa9
--- /dev/null
+++ b/src/components/molecules/forms/ackee-select.stories.tsx
@@ -0,0 +1,32 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { IntlProvider } from 'react-intl';
+import AckeeSelectComponent from './ackee-select';
+
+export default {
+  title: 'Molecules/Forms',
+  component: AckeeSelectComponent,
+  argTypes: {
+    initialValue: {
+      control: {
+        type: 'select',
+      },
+      description: 'Initial selected option.',
+      options: ['full', 'partial'],
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof AckeeSelectComponent>;
+
+const Template: ComponentStory<typeof AckeeSelectComponent> = (args) => (
+  <IntlProvider locale="en">
+    <AckeeSelectComponent {...args} />
+  </IntlProvider>
+);
+
+export const AckeeSelect = Template.bind({});
+AckeeSelect.args = {
+  initialValue: 'full',
+};
diff --git a/src/components/molecules/forms/ackee-select.test.tsx b/src/components/molecules/forms/ackee-select.test.tsx
new file mode 100644
index 0000000..e1e6b2d
--- /dev/null
+++ b/src/components/molecules/forms/ackee-select.test.tsx
@@ -0,0 +1,23 @@
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@test-utils';
+import AckeeSelect from './ackee-select';
+
+describe('Select', () => {
+  it('should correctly set default option', () => {
+    render(<AckeeSelect initialValue="full" />);
+    expect(screen.getByRole('combobox')).toHaveValue('full');
+    expect(screen.queryByRole('combobox')).not.toHaveValue('partial');
+  });
+
+  it('should correctly change value when user choose another option', () => {
+    render(<AckeeSelect initialValue="full" />);
+
+    userEvent.selectOptions(
+      screen.getByRole('combobox'),
+      screen.getByRole('option', { name: 'Partial' })
+    );
+
+    expect(screen.getByRole('combobox')).toHaveValue('partial');
+    expect(screen.queryByRole('combobox')).not.toHaveValue('full');
+  });
+});
diff --git a/src/components/molecules/forms/ackee-select.tsx b/src/components/molecules/forms/ackee-select.tsx
new file mode 100644
index 0000000..4a8410c
--- /dev/null
+++ b/src/components/molecules/forms/ackee-select.tsx
@@ -0,0 +1,89 @@
+import { SelectOptions } from '@components/atoms/forms/select';
+import { Dispatch, SetStateAction, useState, VFC } from 'react';
+import { useIntl } from 'react-intl';
+import SelectWithTooltip, {
+  SelectWithTooltipProps,
+} from './select-with-tooltip';
+
+export type AckeeOptions = 'full' | 'partial';
+
+export type AckeeSelectProps = Pick<
+  SelectWithTooltipProps,
+  'labelClassName' | 'tooltipClassName'
+> & {
+  /**
+   * A default value for Ackee settings.
+   */
+  initialValue: AckeeOptions;
+};
+
+/**
+ * AckeeSelect component
+ *
+ * Render a select to set Ackee settings.
+ */
+const AckeeSelect: VFC<AckeeSelectProps> = ({ initialValue, ...props }) => {
+  const intl = useIntl();
+  const [value, setValue] = useState<AckeeOptions>(initialValue);
+
+  const ackeeLabel = intl.formatMessage({
+    defaultMessage: 'Tracking:',
+    description: 'AckeeSelect: select label',
+    id: '2pmylc',
+  });
+  const tooltipTitle = intl.formatMessage({
+    defaultMessage: 'Ackee tracking (analytics)',
+    description: 'AckeeSelect: tooltip title',
+    id: 'F1EQX3',
+  });
+  const tooltipContent = [
+    intl.formatMessage({
+      defaultMessage: 'Partial includes only page url, views and duration.',
+      description: 'AckeeSelect: tooltip message',
+      id: 'skb4W5',
+    }),
+    intl.formatMessage({
+      defaultMessage:
+        'Full includes all information from partial as well as information about referrer, operating system, device, browser, screen size and language.',
+      description: 'AckeeSelect: tooltip message',
+      id: 'Ogccx6',
+    }),
+  ];
+  const options: SelectOptions[] = [
+    {
+      id: 'partial',
+      name: intl.formatMessage({
+        defaultMessage: 'Partial',
+        description: 'AckeeSelect: partial option name',
+        id: 'e/8Kyj',
+      }),
+      value: 'partial',
+    },
+    {
+      id: 'full',
+      name: intl.formatMessage({
+        defaultMessage: 'Full',
+        description: 'AckeeSelect: full option name',
+        id: 'PzRpPw',
+      }),
+      value: 'full',
+    },
+  ];
+
+  return (
+    <SelectWithTooltip
+      id="ackee-settings"
+      name="ackee-settings"
+      label={ackeeLabel}
+      labelSize="medium"
+      options={options}
+      title={tooltipTitle}
+      content={tooltipContent}
+      value={value}
+      setValue={setValue as Dispatch<SetStateAction<string>>}
+      {...props}
+    />
+  );
+};
+
+export default AckeeSelect;