Skip to content

Commit

Permalink
Feat: Add secondaryButtonMode to choose secondary button behavior #CC…
Browse files Browse the repository at this point in the history 
…M-64
  • Loading branch information
@OndraM
OndraM committed Apr 28, 2022
1 parent e616579 commit e480b2d
Show file tree
Hide file tree
Showing 18 changed files with 1,040 additions and 213 deletions.
21 changes: 11 additions & 10 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,16 +255,17 @@ initLmcCookieConsentManager( // when loaded as a module, these options are passe
## Configuration options
| Option | Type | Default value | Description |
|--------------------------|-------------------------------------|-------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `autodetectLang` | boolean | `true` | Autodetect language based on the value of `<html lang="...">`. If autodetect fails or if unsupported language is detected, fallback to `defaultLang`.<br>When disabled, force language to `defaultLang`. |
| `defaultLang` | string | `'cs'` | Default language. One of `cs`, `de`, `en`, `hu`, `pl`, `ru`, `sk`, `uk`. This language will be used when autodetect is disabled or when it fails. |
| `companyNames` | array | `['LMC']` | Array of strings with company names. Adjust only when the consent needs to be given to multiple companies. [See example][examples-configuration]. |
| `consentCollectorApiUrl` | ?string | `'https://ccm.lmc.cz/(...)'` | URL of the API where user consent information is sent. Null to disable sending data to the API. |
| `config` | Object | `{}` | Override default config of the underlying library. For all parameters see [original library][cookie consent options]. |
| `displayMode` | DisplayMode (string) | `DisplayMode.FORCE` (`force`) | `force` (default) to show consent in a centered modal box and to block page until user action. `soft` to show consent banner on the bottom of the page and do not block the page before user action. |
| `on*` callbacks | function | `(cookieConsent) => {}` | See below for configurable callbacks. |
| `translationOverrides` | Record<string, TranslationOverride> | `{}` | Override default translation for specified languages. `consentTitle` and/or `descriptionIntro` could be overridden.<br>[See example][examples-configuration] |
| Option | Type | Default value | Description |
|--------------------------|-------------------------------------|------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `autodetectLang` | boolean | `true` | Autodetect language based on the value of `<html lang="...">`. If autodetect fails or if unsupported language is detected, fallback to `defaultLang`.<br>When disabled, force language to `defaultLang`. |
| `defaultLang` | string | `'cs'` | Default language. One of `cs`, `de`, `en`, `hu`, `pl`, `ru`, `sk`, `uk`. This language will be used when autodetect is disabled or when it fails. |
| `companyNames` | array | `['LMC']` | Array of strings with company names. Adjust only when the consent needs to be given to multiple companies. [See example][examples-configuration]. |
| `consentCollectorApiUrl` | ?string | `'https://ccm.lmc.cz/(...)'` | URL of the API where user consent information is sent. Null to disable sending data to the API. |
| `config` | Object | `{}` | Override default config of the underlying library. For all parameters see [original library][cookie consent options]. |
| `displayMode` | DisplayMode (string) | `DisplayMode.FORCE` (`force`) | `force` (default) to show consent in a centered modal box and to block page until user action. `soft` to show consent banner on the bottom of the page and do not block the page before user action. |
| `secondaryButtonMode` | SecondaryButtonMode (string) | `SecondaryButtonMode.ACCEPT_NECESSARY` (`acceptNecessary`) | Which button should be shown next to "Accept all". `acceptNecessary` (default) or `showSettings` (this option also hides link to show settings in consent text). |
| `on*` callbacks | function | `(cookieConsent) => {}` | See below for configurable callbacks. |
| `translationOverrides` | Record<string, TranslationOverride> | `{}` | Override default translation for specified languages. `consentTitle` and/or `descriptionIntro` could be overridden.<br>[See example][examples-configuration] |
### Supported languages
Expand Down
2 changes: 2 additions & 0 deletions examples/configuration.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ <h2 class="mt-md-3 mb-3">What is shown here</h2>
<li>Forcing specific language – Slovak (using <code>defaultLang</code>), ie. disabling auto-detection (<code>autodetectLang</code>)</li>
<li>Setting multiple company names in the consent text (<code>companyNames</code>)</li>
<li>Using <code>force</code> as a <code>displayMode</code> instead of <code>soft</code> (which is used in other examples)</li>
<li>Using <code>showSettings</code> as a <code>secondaryButtonMode</code> instead of default <code>acceptNecessary</code></li>
<li>
Overwriting raw configuration of the underlying cookie-consent component (via <code>config</code> option),
to modify some advanced features.
Expand Down Expand Up @@ -137,6 +138,7 @@ <h2 class="mt-md-3 mb-3">Use cookieConsent instance</h2>
autodetectLang: false, // do not detect language from the `<html lang="...">` value
defaultLang: 'sk', // force use of 'sk' language instead
displayMode: 'force', // show consent in a blocking modal window (this is also default)
secondaryButtonMode: 'showSettings', // use "Show settings" as the secondary button instead of default "Accept only necessary"
companyNames: ['LMC', 'Some Other Company', 'ACME'], // define custom company names to be shown in the consent text
consentCollectorApiUrl: 'https://ccm.lmc.cz/local-data-acceptation-data-entries?Spot=(public,demo)', // override default URL for demo purposes; do not set custom consentCollectorApiUrl unless you have been explicitly guided to do so!
config: { // override default config of the underlying library, see https://github.com/orestbida/cookieconsent#all-available-options
Expand Down
25 changes: 15 additions & 10 deletions src/LmcCookieConsentManager.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
} from './types';
import { CookieConsentCategory, DisplayMode } from './constants';
import { VanillaCookieConsent } from './types/vanilla-cookieconsent';
import { SecondaryButtonMode } from './constants/SecondaryButtonMode';

/* eslint-disable-next-line no-unused-vars */
const noopAcceptCallback: OnAcceptCallback = (cookieConsent) => {};
Expand All @@ -33,6 +34,7 @@ const defaultOptions: CookieConsentManagerOptions = {
onChange: noopChangeCallback,
companyNames: ['LMC'],
displayMode: DisplayMode.FORCE,
secondaryButtonMode: SecondaryButtonMode.ACCEPT_NECESSARY,
translationOverrides: {},
config: {},
};
Expand All @@ -50,8 +52,10 @@ const defaultOptions: CookieConsentManagerOptions = {
* @param {OnChangeCallback} [args.onChange] - Callback to be executed right after user change his/her preferences
* @param {Array} [args.companyNames] - Array of strings with company names. Adjust only when the consent needs
* to be given to multiple companies.
* @param {DisplayMode} [args.displayMode] - `force` to show consent in a centered modal box and to block page until
* user action. `soft` to show consent in a banner on the bottom of the page.
* @param {DisplayMode} [args.displayMode] - Which button should be displayed next to "Accept all" button. Either
* `acceptNecessary` (default) or `showSettings`.
* @param {SecondaryButtonMode} [args.secondaryButtonMode] - `force` (default) to show consent in a centered modal box
* and to block page until user action. `soft` to show consent in a banner on the bottom of the page.
* @param {Record<string, TranslationOverride>} [args.translationOverrides] - Translation overrides for specified languages
* @param {VanillaCookieConsent.Options} [args.config] - Override default config.
* See https://github.com/orestbida/cookieconsent/blob/master/Readme.md#all-available-options
Expand All @@ -73,21 +77,22 @@ const LmcCookieConsentManager: CookieConsentManager = (serviceName, args) => {
onChange,
companyNames,
displayMode,
secondaryButtonMode,
translationOverrides,
config,
} = options;
const cookieName = 'lmc_ccm';
const cookieConsent = window.initCookieConsent();

const languages = {
cs: configCs({ companyNames, ...translationOverrides.cs }),
de: configDe({ companyNames, ...translationOverrides.de }),
en: configEn({ companyNames, ...translationOverrides.en }),
hu: configHu({ companyNames, ...translationOverrides.hu }),
pl: configPl({ companyNames, ...translationOverrides.pl }),
ru: configRu({ companyNames, ...translationOverrides.ru }),
sk: configSk({ companyNames, ...translationOverrides.sk }),
uk: configUk({ companyNames, ...translationOverrides.uk }),
cs: configCs({ companyNames, ...translationOverrides.cs }, secondaryButtonMode),
de: configDe({ companyNames, ...translationOverrides.de }, secondaryButtonMode),
en: configEn({ companyNames, ...translationOverrides.en }, secondaryButtonMode),
hu: configHu({ companyNames, ...translationOverrides.hu }, secondaryButtonMode),
pl: configPl({ companyNames, ...translationOverrides.pl }, secondaryButtonMode),
ru: configRu({ companyNames, ...translationOverrides.ru }, secondaryButtonMode),
sk: configSk({ companyNames, ...translationOverrides.sk }, secondaryButtonMode),
uk: configUk({ companyNames, ...translationOverrides.uk }, secondaryButtonMode),
};

const onFirstAcceptHandler = (
Expand Down
37 changes: 36 additions & 1 deletion src/__tests__/utils.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
import { addSeparators, assembleDescriptionIntro, pluralize } from '../utils';
import {
addSeparators,
assembleDescriptionIntro,
assembleSecondaryButton,
isSettingsButtonNotShown,
pluralize,
} from '../utils';
import { SecondaryButtonMode } from '../constants/SecondaryButtonMode';

describe('utils', () => {
describe('addSeparators', () => {
Expand Down Expand Up @@ -44,4 +51,32 @@ describe('utils', () => {
expect(assembleDescriptionIntro('Default value', '')).toBe('');
});
});

describe('assembleSecondaryButton', () => {
it('should assemble button values for acceptNecessary mode', () => {
expect(
assembleSecondaryButton(SecondaryButtonMode.ACCEPT_NECESSARY, 'accept necessary', 'show settings'),
).toEqual({
role: 'accept_necessary',
text: 'accept necessary',
});
});

it('should assemble button values for showSettings mode', () => {
expect(assembleSecondaryButton(SecondaryButtonMode.SHOW_SETTINGS, 'accept necessary', 'show settings')).toEqual({
role: 'settings',
text: 'show settings',
});
});
});

describe('isSettingsButtonNotShown', () => {
it('should be true for ACCEPT_NECESSARY mode', () => {
expect(isSettingsButtonNotShown(SecondaryButtonMode.ACCEPT_NECESSARY)).toBe(true);
});

it('should be false for SHOW_SETTINGS mode', () => {
expect(isSettingsButtonNotShown(SecondaryButtonMode.SHOW_SETTINGS)).toBe(false);
});
});
});
4 changes: 4 additions & 0 deletions src/constants/SecondaryButtonMode.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export const SecondaryButtonMode = {
ACCEPT_NECESSARY: 'acceptNecessary',
SHOW_SETTINGS: 'showSettings',
};
Loading

0 comments on commit e480b2d

Please sign in to comment.