Merge pull request #14 from hashicorp/ICU-62-add-radiobuttons

Add radio field rose component
This commit is contained in:
Randall Morey authored and GitHub committed 2020-05-11 10:22:56 -04:00
commit c15eeb6cdf
15 files changed
+561 -3

No files matched your search

@@ -0,0 +1,31 @@
import Component from '@ember/component';
import layout from '../../../../templates/components/rose/form/radio/group';
/**
* A `<input type="radio" name="radio-group">` element.
*
* @example
* <Rose::Form::Radio::Group @name="color" @selectedValue="green" as |radioGroup|>
* <radioGroup.radio
* @id="red-radio"
* @label="Red"
* @value="red"
* />
* <radioGroup.radio
* @id="green-radio"
* @label="Green"
* @value="green"
* />
* <radioGroup.radio
* @id="blue-radio"
* @label="Blue"
* @value="blue"
* />
* </Rose::Form::Radio::Group>
*/
export default Component.extend({
layout,
tagName: '',
});
@@ -0,0 +1,22 @@
import Component from '@ember/component';
import layout from '../../../../templates/components/rose/form/radio/radio';
/**
* A `<input type="radio">` element.
* `value` and `selectedValue` must be equal to select
* radiofield.
*
* @example
* <Rose::Form::Radio::Radio
* @id="fieldId"
* @label="label"
* @error={{true}}
* @value="fieldValue"
* @selectedValue="fieldValue"
* @disabled={{true}}
* />
*/
export default Component.extend({
layout,
tagName: '',
});
@@ -1,3 +1,4 @@
@import 'input';
@import 'checkbox';
@import 'select';
@import 'radio';
@@ -0,0 +1,154 @@
@use '../../variables/sizing';
@use '../../utilities/type';
$radio-svg: (
'default':
"<svg viewBox='0 0 24 24' fill='%23aaaaaa' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
'hover':
"<svg viewBox='0 0 24 24' fill='%236f7682' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
'focus':
"<svg viewBox='0 0 24 24' fill='%231563ff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
'checked':
"<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%231563ff'/></svg>",
'disabled':
"<svg viewBox='0 0 24 24' fill='%23bac1cc' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
'disabled-checked':
"<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%23bac1cc'/></svg>",
'error':
"<svg viewBox='0 0 24 24' fill='%23c73445' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
'error-checked':
"<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%23c73445'/></svg>",
);
$data-svg-prefix: 'data:image/svg+xml;utf-8,';
.rose-form-radio {
position: relative;
margin-bottom: sizing.rems(xs);
color: var(--ui-gray);
.rose-form-radio-label {
@include type.type(s, semibold);
color: currentColor;
padding-left: sizing.rems(l);
&::before {
position: absolute;
top: sizing.rems(xs);
left: 0;
display: block;
width: sizing.rems(m);
height: sizing.rems(m);
pointer-events: none;
content: ' ';
}
&::after {
position: absolute;
top: -#{sizing.rems(xxs)};
left: -#{sizing.rems(xxxs) + sizing.rems(xxxxs)};
display: block;
width: sizing.rems(l);
height: sizing.rems(l);
transform: scale(2);
pointer-events: none;
content: ' ';
background: no-repeat 50%/50% 50%;
background-image: url($data-svg-prefix + map-get($radio-svg, 'default'));
}
}
.rose-form-radio-field {
position: absolute;
left: 0;
z-index: -1;
width: sizing.rems(m);
height: sizing.rems(m);
opacity: 0;
&:not(:disabled) {
&:hover {
~ .rose-form-radio-label {
&::after {
background-image: url($data-svg-prefix + map-get(
$radio-svg,
'hover'
));
}
}
}
&:focus {
~ .rose-form-radio-label {
&::after {
background-image: url($data-svg-prefix + map-get(
$radio-svg,
'focus'
));
}
}
}
&:checked {
~ .rose-form-radio-label {
&::after {
background-image: url($data-svg-prefix + map-get(
$radio-svg,
'checked'
));
}
}
}
}
&:disabled {
~ .rose-form-radio-label {
&::after {
background-image: url($data-svg-prefix + map-get(
$radio-svg,
'disabled'
));
}
}
&:checked {
~ .rose-form-radio-label {
&::after {
background-image: url($data-svg-prefix + map-get(
$radio-svg,
'disabled-checked'
));
}
}
}
}
}
&.error {
color: var(--failure);
.rose-form-radio-field {
&:not(:disabled):not(:focus) {
~ .rose-form-radio-label {
&::after {
background-image: url($data-svg-prefix + map-get(
$radio-svg,
'error'
));
}
}
&:checked {
~ .rose-form-radio-label {
&::after {
background-image: url($data-svg-prefix + map-get(
$radio-svg,
'error-checked'
));
}
}
}
}
}
}
}
@@ -0,0 +1,3 @@
{{yield (hash
radio=(component 'rose/form/radio/radio' name=@name selectedValue=@selectedValue)
)}}
@@ -0,0 +1,19 @@
<div class="rose-form-radio{{if @error " error"}}">
<RadioButton
...attributes
@radioClass="rose-form-radio-field"
@radioId={{@id}}
type="radio"
@name={{@name}}
@value={{@value}}
@groupValue={{@selectedValue}}
@disabled={{@disabled}}/>
<label class="rose-form-radio-label" for={{@id}}>
{{@label}}
</label>
{{yield}}
</div>
@@ -0,0 +1 @@
export { default } from 'rose/components/rose/form/radio/group';
@@ -0,0 +1 @@
export { default } from 'rose/components/rose/form/radio/radio';
+50
View File
@@ -118,3 +118,53 @@ Dummy app index template
@label="Disabled + Checked"
disabled={{true}}
/>
<h2>Radio field</h2>
<Rose::Form::Radio::Radio
@id="radio-1"
@label="Label"
@value="radio-1"
/>
<Rose::Form::Radio::Radio
@id="radio-2"
@error={{true}}
@label="Error"
@value="radio-2"
/>
<Rose::Form::Radio::Radio
@id="radio-3"
@label="Checked"
/>
<Rose::Form::Radio::Radio
@id="radio-4"
@label="Disabled"
@disabled={{true}}
@value="radio-4"
/>
<Rose::Form::Radio::Radio
@id="radio-5"
@label="Disabled + Checked"
@value="radio-5"
@variable="radio-5"
@disabled={{true}}
/>
<h2>Radio field group</h2>
<Rose::Form::Radio::Group @name="color" @variable="green" as |radioGroup|>
<radioGroup.radio
@id="red-radio"
@label="Red"
@value="red"
/>
<radioGroup.radio
@id="green-radio"
@label="Green"
@value="green"
/>
<radioGroup.radio
@id="blue-radio"
@label="Blue"
@value="blue"
/>
</Rose::Form::Radio::Group>
+1
View File
@@ -58,6 +58,7 @@
"ember-load-initializers": "^2.1.1",
"ember-maybe-import-regenerator": "^0.1.6",
"ember-qunit": "^4.6.0",
"ember-radio-button": "^2.0.1",
"ember-resolver": "^7.0.0",
"ember-source": "~3.12.0",
"ember-source-channel-url": "^2.0.1",
@@ -0,0 +1,41 @@
import { hbs } from 'ember-cli-htmlbars';
import { text } from '@storybook/addon-knobs';
export default {
title: 'Rose::Form::Radio::Group',
};
export const Normal = () => ({
template: hbs`
<Rose::Form::Radio::Group @name={{name}} @selectedValue={{selectedValue}} as |radioGroup|>
<radioGroup.radio
@id="firstField"
@label={{firstFieldLabel}}
@value={{firstFieldValue}}
/>
<radioGroup.radio
@id="secondField"
@label={{secondFieldLabel}}
@value={{secondFieldValue}}
/>
<radioGroup.radio
@id="thirdField"
@label={{thirdFieldLabel}}
@value={{thirdFieldValue}}
/>
</Rose::Form::Radio::Group>
`,
context: {
name: text('name', 'Groupname'),
selectedValue: text('selectedValue', 'disagree'),
firstFieldLabel: text('first radiofield label', 'Agree'),
firstFieldValue: text('first radiofield value', 'agree'),
secondFieldLabel: text('second radiofield label', 'Maybe'),
secondFieldValue: text('second radiofield value', 'maybe'),
thirdFieldLabel: text('third radiofield label', 'Disagree'),
thirdFieldValue: text('third radiofield value', 'disagree'),
},
});
@@ -0,0 +1,30 @@
import { hbs } from 'ember-cli-htmlbars';
import { text, boolean } from '@storybook/addon-knobs';
export default {
title: 'Rose::Form::Radio::Radio',
};
export const Normal = () => ({
template: hbs`
<Rose::Form::Radio::Radio
@id={{id}}
@label={{label}}
@error={{error}}
@value={{value}}
@selectedValue={{selectedValue}}
@disabled={{disabled}}
/>
`,
context: {
id: text('id', 'radio-1'),
label: text('text', 'Radiofield'),
error: boolean('error', false),
value: text('value', 'value and selectedValue must match to select radiofield'),
selectedValue: text(
'selectedValue',
'value and selectedValue must match to select radiofield'
),
disabled: boolean('disabled', false),
},
});
@@ -0,0 +1,112 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, click, find, findAll } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
module('Integration | Component | rose/form/radio/group', function (hooks) {
setupRenderingTest(hooks);
test('it renders', async function (assert) {
await render(hbs`
<Rose::Form::Radio::Group @name="bird" as |radioGroup|>
<radioGroup.radio
@id="bird-1"
@label="Pegion"
@value="pegion"
/>
<radioGroup.radio
@id="bird-2"
@label="flamingo"
@value="flamingo"
/>
</Rose::Form::Radio::Group>
`);
assert.equal(findAll('input').length, 2);
assert.equal(findAll('input')[0].name, 'bird');
assert.equal(findAll('input')[1].name, 'bird');
});
test('it renders with @selectedValue value selected', async function (assert) {
await render(hbs`
<Rose::Form::Radio::Group @name="bird" @selectedValue="flamingo" as |radioGroup|>
<radioGroup.radio
@id="bird-1"
@label="Pegion"
@value="pegion"
/>
<radioGroup.radio
@id="bird-2"
@label="flamingo"
@value="flamingo"
/>
</Rose::Form::Radio::Group>
`);
assert.equal(find('#bird-1').checked, false);
assert.equal(find('#bird-2').checked, true);
await click(find('#bird-1'));
assert.equal(find('#bird-1').checked, true);
assert.equal(find('#bird-2').checked, false);
});
test('it reflects active radiofield value in @selectedValue', async function (assert) {
await render(hbs`
<Rose::Form::Radio::Group @name="bird" @selectedValue={{this.selectedValue}} as |radioGroup|>
<radioGroup.radio
@id="bird-1"
@label="Pegion"
@value="pegion"
/>
<radioGroup.radio
@id="bird-2"
@label="flamingo"
@value="flamingo"
/>
</Rose::Form::Radio::Group>
`);
assert.notOk(this.selectedValue);
await click(find('#bird-1'));
assert.equal(this.selectedValue, 'pegion');
await click(find('#bird-2'));
assert.equal(this.selectedValue, 'flamingo');
});
test('it uses @selectedValue value to set active radiofield', async function (assert) {
this.set('selectedValue', 'cat');
await render(hbs`
<Rose::Form::Radio::Group @name="bird" @selectedValue={{this.selectedValue}} as |radioGroup|>
<radioGroup.radio
@id="bird-1"
@label="Pegion"
@value="pegion"
/>
<radioGroup.radio
@id="bird-2"
@label="flamingo"
@value="flamingo"
/>
</Rose::Form::Radio::Group>
`);
assert.equal(find('#bird-1').checked, false);
assert.equal(find('#bird-2').checked, false);
this.set('selectedValue', 'flamingo');
assert.equal(find('#bird-1').checked, false);
assert.equal(find('#bird-2').checked, true);
this.set('selectedValue', 'pegion');
assert.equal(find('#bird-1').checked, true);
assert.equal(find('#bird-2').checked, false);
this.set('selectedValue', 'dog');
assert.equal(find('#bird-1').checked, false);
assert.equal(find('#bird-2').checked, false);
});
});
@@ -0,0 +1,59 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, find } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
module('Integration | Component | rose/form/radio/radio', function (hooks) {
setupRenderingTest(hooks);
test('it renders', async function (assert) {
await render(hbs`<Rose::Form::Radio::Radio />`);
assert.ok(await find('input'));
assert.equal(await find('input').type, 'radio');
});
test('it renders with label', async function (assert) {
await render(hbs`<Rose::Form::Radio::Radio @label="Label"/>`);
assert.equal(await find('label').textContent.trim(), 'Label');
});
test('it is checked when @value and @selectedValue values match', async function (assert) {
await render(
hbs`<Rose::Form::Radio::Radio @value="tree" @selectedValue="tree"/>`
);
assert.equal(await find('input').checked, true);
});
test('it is not checked when @value and @selectedValue values are different', async function (assert) {
await render(hbs`<Rose::Form::Radio::Radio @value="tree"/>`);
assert.equal(await find('input').checked, false);
await render(hbs`<Rose::Form::Radio::Radio @selectedValue="tree"/>`);
assert.equal(await find('input').checked, false);
await render(
hbs`<Rose::Form::Radio::Radio @value="root" @selectedValue="tree"/>`
);
assert.equal(await find('input').checked, false);
});
test('it is not disabled by default', async function (assert) {
await render(hbs`<Rose::Form::Radio::Radio />`);
assert.equal(await find('input').disabled, false);
});
test('it is not in error state by default', async function (assert) {
await render(hbs`<Rose::Form::Radio::Radio />`);
assert.notOk(await find('.error'));
});
test('it is disabled when @disabled={{true}}', async function (assert) {
await render(hbs`<Rose::Form::Radio::Radio @disabled={{true}}/>`);
assert.equal(await find('input').disabled, true);
});
test('it is in error state when @error={{true}}', async function (assert) {
await render(hbs`<Rose::Form::Radio::Radio @error={{true}} />`);
assert.ok(await find('.error'));
});
});
+36 -3
View File
@@ -4732,7 +4732,7 @@ broccoli-output-wrapper@^3.2.1:
heimdalljs-logger "^0.1.10"
symlink-or-copy "^1.2.0"
broccoli-persistent-filter@^1.1.6, broccoli-persistent-filter@^1.4.3:
broccoli-persistent-filter@^1.0.3, broccoli-persistent-filter@^1.1.6, broccoli-persistent-filter@^1.4.3:
version "1.4.6"
resolved "https://registry.yarnpkg.com/broccoli-persistent-filter/-/broccoli-persistent-filter-1.4.6.tgz#80762d19000880a77da33c34373299c0f6a3e615"
integrity sha512-0RejLwoC95kv4kta8KAa+FmECJCK78Qgm8SRDEK7YyU0N9Cx6KpY3UCDy9WELl3mCXLN8TokNxc7/hp3lL4lfw==
@@ -6825,7 +6825,7 @@ ember-cli-babel-plugin-helpers@^1.0.0, ember-cli-babel-plugin-helpers@^1.1.0:
resolved "https://registry.yarnpkg.com/ember-cli-babel-plugin-helpers/-/ember-cli-babel-plugin-helpers-1.1.0.tgz#de3baedd093163b6c2461f95964888c1676325ac"
integrity sha512-Zr4my8Xn+CzO0gIuFNXji0eTRml5AxZUTDQz/wsNJ5AJAtyFWCY4QtKdoELNNbiCVGt1lq5yLiwTm4scGKu6xA==
ember-cli-babel@^6.0.0-beta.4, ember-cli-babel@^6.16.0, ember-cli-babel@^6.6.0, ember-cli-babel@^6.8.1:
ember-cli-babel@^6.0.0-beta.4, ember-cli-babel@^6.16.0, ember-cli-babel@^6.6.0, ember-cli-babel@^6.8.1, ember-cli-babel@^6.9.2:
version "6.18.0"
resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-6.18.0.tgz#3f6435fd275172edeff2b634ee7b29ce74318957"
integrity sha512-7ceC8joNYxY2wES16iIBlbPSxwKDBhYwC8drU3ZEvuPDMwVv1KzxCNu1fvxyFEBWhwaRNTUxSCsEVoTd9nosGA==
@@ -6913,6 +6913,17 @@ ember-cli-htmlbars-inline-precompile@^2.1.0:
heimdalljs-logger "^0.1.9"
silent-error "^1.1.0"
ember-cli-htmlbars@^1.1.1:
version "1.3.5"
resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-1.3.5.tgz#65be9678b274b5e7861d7f75c188780af7ef9d13"
integrity sha512-Qur/anb0Vk57qmIhGLkSzl8X1QIMoae6pLa14MRQ8+YD2N5fNs3qdhEFf0SDBquPOH1QxQtraiNQvji47QBJyg==
dependencies:
broccoli-persistent-filter "^1.0.3"
ember-cli-version-checker "^1.0.2"
hash-for-dep "^1.0.2"
json-stable-stringify "^1.0.0"
strip-bom "^2.0.0"
ember-cli-htmlbars@^3.0.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-3.1.0.tgz#87806c2a0bca2ab52d4fb8af8e2215c1ca718a99"
@@ -7072,6 +7083,13 @@ ember-cli-uglify@^3.0.0:
broccoli-uglify-sourcemap "^3.1.0"
lodash.defaultsdeep "^4.6.0"
ember-cli-version-checker@^1.0.2:
version "1.3.1"
resolved "https://registry.yarnpkg.com/ember-cli-version-checker/-/ember-cli-version-checker-1.3.1.tgz#0bc2d134c830142da64bf9627a0eded10b61ae72"
integrity sha1-C8LRNMgwFC2mS/lieg7e0QthrnI=
dependencies:
semver "^5.3.0"
ember-cli-version-checker@^2.0.0, ember-cli-version-checker@^2.1.0, ember-cli-version-checker@^2.1.1, ember-cli-version-checker@^2.1.2:
version "2.2.0"
resolved "https://registry.yarnpkg.com/ember-cli-version-checker/-/ember-cli-version-checker-2.2.0.tgz#47771b731fe0962705e27c8199a9e3825709f3b3"
@@ -7261,6 +7279,14 @@ ember-qunit@^4.6.0:
ember-cli-test-loader "^2.2.0"
qunit "^2.9.3"
ember-radio-button@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/ember-radio-button/-/ember-radio-button-2.0.1.tgz#f081a44d581a4b1db88fef79ec5c47da712ab963"
integrity sha512-cAAyFgNIM3PquowkWfa0lOSlq4PPst9vpkNiLi5yhd1LJ4lVtwgn6s+OpPXWKJLZdig2m31PWU8jxobcubge5w==
dependencies:
ember-cli-babel "^6.9.2"
ember-cli-htmlbars "^1.1.1"
ember-resolver@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/ember-resolver/-/ember-resolver-7.0.0.tgz#07ca86b3bae373395b44bba784b8c133f75d61c2"
@@ -10257,7 +10283,7 @@ is-typedarray@^1.0.0, is-typedarray@~1.0.0:
resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
is-utf8@^0.2.1:
is-utf8@^0.2.0, is-utf8@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
@@ -15167,6 +15193,13 @@ strip-bom@4.0.0, strip-bom@^4.0.0:
resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-4.0.0.tgz#9c3505c1db45bcedca3d9cf7a16f5c5aa3901878"
integrity sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==
strip-bom@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
integrity sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=
dependencies:
is-utf8 "^0.2.0"
strip-bom@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"