Skip to content

Commit

Permalink
♻️Migrate Stories 50..53 to args (#37685)
Browse files Browse the repository at this point in the history 
Partial for #35923
  • Loading branch information
@alanorozco
alanorozco committed Feb 15, 2022
1 parent a5e7c85 commit 6e7cb14
Show file tree
Hide file tree
Showing 6 changed files with 201 additions and 146 deletions.
4 changes: 4 additions & 0 deletions build-system/test-configs/OWNERS
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,9 @@
pattern: 'dep-check-config.js',
owners: [{name: '*'}],
},
{
pattern: 'forbidden-terms.js',
owners: [{name: 'wg-components'}],
},
],
}
4 changes: 0 additions & 4 deletions build-system/test-configs/forbidden-terms.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -746,15 +746,11 @@ const forbiddenTermsGlobal = {
'extensions/amp-stream-gallery/1.0/storybook/Basic.amp.js',
'extensions/amp-stream-gallery/1.0/storybook/Basic.js',
'extensions/amp-timeago/1.0/storybook/Basic.js',
'extensions/amp-twitter/0.1/storybook/Basic.amp.js',
'extensions/amp-twitter/1.0/storybook/Basic.amp.js',
'extensions/amp-twitter/1.0/storybook/Basic.js',
'extensions/amp-video/1.0/storybook/Basic.amp.js',
'extensions/amp-video/1.0/storybook/Basic.js',
'extensions/amp-video-iframe/1.0/storybook/Basic.amp.js',
'extensions/amp-vimeo/1.0/storybook/Basic.amp.js',
'extensions/amp-vimeo/1.0/storybook/Basic.js',
'extensions/amp-wordpress-embed/1.0/storybook/Basic.amp.js',
'extensions/amp-youtube/0.1/storybook/Basic.amp.js',
'extensions/amp-youtube/1.0/storybook/Basic.amp.js',
'extensions/amp-youtube/1.0/storybook/Basic.js',
Expand Down
100 changes: 64 additions & 36 deletions extensions/amp-twitter/0.1/storybook/Basic.amp.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import {withAmp} from '@ampproject/storybook-addon';
import {boolean, number, select, withKnobs} from '@storybook/addon-knobs';

import * as Preact from '#preact';

export default {
title: 'amp-twitter-0_1',
decorators: [withKnobs, withAmp],

decorators: [withAmp],
parameters: {
extensions: [
{
Expand All @@ -21,60 +19,86 @@ export default {
},
};

export const Default = () => {
const tweetId = select(
'tweet id',
['1356304203044499462', '495719809695621121', '463440424141459456'],
'1356304203044499462'
);
const cards = boolean('show cards', true) ? undefined : 'hidden';
const conversation = boolean('show conversation', false) ? undefined : 'none';
export const Default = ({showCards, showConversation, ...args}) => {
const cards = showCards ? undefined : 'hidden';
const conversation = showConversation ? undefined : 'none';
return (
<amp-twitter
width="300"
height="200"
data-tweetid={tweetId}
{...args}
data-cards={cards}
data-conversation={conversation}
/>
);
};

export const Moments = () => {
const limit = number('limit to', 2);
Default.argTypes = {
'data-tweetid': {
name: 'tweetId',
defaultValue: '1356304203044499462',
options: [
'1356304203044499462',
'495719809695621121',
'463440424141459456',
],
control: {type: 'select'},
},
showCards: {
name: 'show cards?',
defaultValue: true,
control: {type: 'boolean'},
},
showConversation: {
name: 'show conversation?',
defaultValue: false,
control: {type: 'boolean'},
},
};

export const Moments = (args) => {
return (
<amp-twitter
data-limit={limit}
{...args}
data-momentid="1009149991452135424"
width="300"
height="200"
/>
);
};

export const Timelines = () => {
const tweetLimit = number('limit to', 5);
const timelineSourceType = select(
'source type',
['profile', 'likes', 'list', 'source', 'collection', 'url', 'widget'],
'profile'
);
const timelineScreenName = 'amphtml';
const timelineUserId = '3450662892';
return (
<amp-twitter
data-tweet-limit={tweetLimit}
data-timeline-source-type={timelineSourceType}
data-timeline-scree-name={timelineScreenName}
data-timeline-user-id={timelineUserId}
width="300"
height="200"
/>
);
Moments.args = {
'data-limit': 2,
};

export const Timelines = (args) => {
return <amp-twitter {...args} width="300" height="200" />;
};

Timelines.args = {
'data-tweet-limit': 5,
'data-timeline-screen-name': 'amphtml',
'data-timeline-user-id': '3450662892',
};

export const DeletedTweet = () => {
const withFallback = boolean('include fallback?', true);
Timelines.argTypes = {
'data-timeline-source-type': {
name: 'data-timeline-source-type',
defaultValue: 'profile',
options: [
'profile',
'likes',
'list',
'source',
'collection',
'url',
'widget',
],
control: {type: 'select'},
},
};

export const DeletedTweet = ({withFallback}) => {
return (
<amp-twitter
width="390"
Expand Down Expand Up @@ -104,6 +128,10 @@ export const DeletedTweet = () => {
);
};

DeletedTweet.args = {
withFallback: true,
};

export const InvalidTweet = () => {
return (
<amp-twitter
Expand Down
100 changes: 64 additions & 36 deletions extensions/amp-twitter/1.0/storybook/Basic.amp.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import {withAmp} from '@ampproject/storybook-addon';
import {boolean, number, select, withKnobs} from '@storybook/addon-knobs';

import * as Preact from '#preact';

export default {
title: 'amp-twitter-1_0',
decorators: [withKnobs, withAmp],

decorators: [withAmp],
parameters: {
extensions: [
{
Expand All @@ -22,60 +20,86 @@ export default {
},
};

export const Default = () => {
const tweetId = select(
'tweet id',
['1356304203044499462', '495719809695621121', '463440424141459456'],
'1356304203044499462'
);
const cards = boolean('show cards', true) ? undefined : 'hidden';
const conversation = boolean('show conversation', false) ? undefined : 'none';
export const Default = ({showCards, showConverstion, ...args}) => {
const cards = showCards ? undefined : 'hidden';
const conversation = showConverstion ? undefined : 'none';
return (
<amp-twitter
width="300"
height="200"
data-tweetid={tweetId}
data-cards={cards}
data-conversation={conversation}
{...args}
/>
);
};

export const Moments = () => {
const limit = number('limit to', 2);
Default.argTypes = {
'data-tweetid': {
name: 'tweetId',
defaultValue: '1356304203044499462',
options: [
'1356304203044499462',
'495719809695621121',
'463440424141459456',
],
control: {type: 'select'},
},
showCards: {
name: 'show cards?',
defaultValue: true,
control: {type: 'boolean'},
},
showConversation: {
name: 'show conversation?',
defaultValue: false,
control: {type: 'boolean'},
},
};

export const Moments = (args) => {
return (
<amp-twitter
data-limit={limit}
{...args}
data-momentid="1009149991452135424"
width="300"
height="200"
/>
);
};

export const Timelines = () => {
const tweetLimit = number('limit to', 5);
const timelineSourceType = select(
'source type',
['profile', 'likes', 'list', 'source', 'collection', 'url', 'widget'],
'profile'
);
const timelineScreenName = 'amphtml';
const timelineUserId = '3450662892';
return (
<amp-twitter
data-tweet-limit={tweetLimit}
data-timeline-source-type={timelineSourceType}
data-timeline-scree-name={timelineScreenName}
data-timeline-user-id={timelineUserId}
width="300"
height="200"
/>
);
Moments.args = {
'data-limit': 2,
};

export const Timelines = (args) => {
return <amp-twitter {...args} width="300" height="200" />;
};

Timelines.args = {
'data-tweet-limit': 5,
'data-timeline-screen-name': 'amphtml',
'data-timeline-user-id': '3450662892',
};

export const DeletedTweet = () => {
const withFallback = boolean('include fallback?', true);
Timelines.argTypes = {
'data-timeline-source-type': {
name: 'data-timeline-source-type',
defaultValue: 'profile',
options: [
'profile',
'likes',
'list',
'source',
'collection',
'url',
'widget',
],
control: {type: 'select'},
},
};

export const DeletedTweet = ({withFallback}) => {
return (
<amp-twitter
width="390"
Expand Down Expand Up @@ -105,6 +129,10 @@ export const DeletedTweet = () => {
);
};

DeletedTweet.args = {
withFallback: true,
};

export const InvalidTweet = () => {
return (
<amp-twitter
Expand Down
Loading

0 comments on commit 6e7cb14

Please sign in to comment.