-
Notifications
You must be signed in to change notification settings - Fork 3.9k
/
Basic.amp.js
95 lines (93 loc) · 3.76 KB
/
Basic.amp.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
/**
* Copyright 2020 The AMP HTML Authors. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS-IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import * as Preact from '../../../../src/preact';
import {select, text, withKnobs} from '@storybook/addon-knobs';
import {storiesOf} from '@storybook/preact';
import {withA11y} from '@storybook/addon-a11y';
import {withAmp} from '@ampproject/storybook-addon';
// eslint-disable-next-line
storiesOf('amp-social-share-0_1', module)
.addDecorator(withKnobs)
.addDecorator(withA11y)
.addDecorator(withAmp)
.addParameters({extensions: [{name: 'amp-social-share', version: 0.1}]})
.add('default', () => {
/*
* Knob and Component Details -
* amp-social-share allows the user to set various parameters to configure
* its behavior. These parameters are controlled by storybook knobs and
* are summarized below:
*
* Key Configuration Parameters -
* type - This is a required attribute. It configures a pre-configured set
* of parameters needed to share with a particular social-media. Most
* notably, the share-endpoint is set by the type. Configuration details
* can be found in amp-social-share-config.js. The user may also select
* 'custom' with this knob to manually specify the required parameters.
* Setting any of the other attributes below overwrites the
* pre-configured parameters defined by the type.
* data-share-endpoint - This is the api endpoint of the social-media with
* which to share content.
* data-param-url - This is the url to be shared via social-media. It
* is defaulted to the canonical url of the current amp page in most
* cases where it is used in the pre-configured types.
*
* Other Configuration Parameters -
* data-param-text - This is a text value included in the shared media.
* data-param-attribution - This allows the user to specify where the
* share is attributed to.
* data-param-media - This is used to specify a path to media (image) to
* be shared when sharing via Pinterest.
* data-param-app_id - This is used when sharing with Facebook and is
* defaulted to an amp test app.
*/
const typeConfigurations = [
'email',
'facebook',
'linkedin',
'pinterest',
'tumblr',
'twitter',
'whatsapp',
'line',
'sms',
'system',
'custom',
undefined,
];
const type = select('type', typeConfigurations, typeConfigurations[0]);
const customEndpoint = text('data-share-endpoint', null);
const paramUrl = text('data-param-url', null);
const paramText = text('data-param-text', null);
const paramAttribution = text('data-param-attribution', null);
const paramMedia = text('data-param-media', null);
const appId = text('data-param-app_id', '254325784911610');
const width = text('width', null);
const height = text('height', null);
return (
<amp-social-share
type={type}
data-share-endpoint={customEndpoint}
data-param-text={paramText}
data-param-url={paramUrl}
data-param-attribution={paramAttribution}
data-param-media={paramMedia}
data-param-app_id={appId}
width={width}
height={height}
></amp-social-share>
);
});