Skip to content

Commit

Permalink
fix story controls, cleanup stories code after csf-2-to-3 migration
Browse files Browse the repository at this point in the history
  • Loading branch information
@wotnak
wotnak committed Feb 2, 2023
1 parent 065902f commit 9a3db11
Show file tree
Hide file tree
Showing 13 changed files with 112 additions and 665 deletions.
5 changes: 2 additions & 3 deletions packages/farm-ui/stories/FarmAutocomplete.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,6 @@ import FarmAutocomplete from '../src/components/FarmAutocomplete.vue';
export default {
title: 'Content/FarmAutocomplete',
component: FarmAutocomplete,
};

export const Basic = {
render: (args, { argTypes }) => ({
props: Object.keys(argTypes),
template: `
Expand All @@ -30,7 +27,9 @@ export const Basic = {
};
},
}),
};

export const Basic = {
args: {
list: [
{ id: 1, name: 'Apples' },
Expand Down
148 changes: 23 additions & 125 deletions packages/farm-ui/stories/FarmCard.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,48 +8,35 @@ export default {
subcomponents: { FarmStack, FarmInline },
argTypes: {
backgroundColor: {
control: {
type: 'select',
options: [
'white',
'dark',
'primary',
'secondary',
'tertiary',
'purple',
'red',
'orange',
'yellow',
'green',
'blue',
],
},
control: 'select',
options: [
'white',
'dark',
'primary',
'secondary',
'tertiary',
'purple',
'red',
'orange',
'yellow',
'green',
'blue',
],
},
boxShadow: {
control: {
type: 'select',
options: ['normal', 'strong', 'inverse', 'none'],
},
control: 'select',
options: ['normal', 'strong', 'inverse', 'none'],
},
space: {
control: {
type: 'select',
options: ['xxxs', 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'none'],
},
control: 'select',
options: ['xxxs', 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'none'],
},
width: {
control: {
type: 'select',
options: ['s', 'm', 'l', 'xl', 'full', 'content'],
},
control: 'select',
options: ['s', 'm', 'l', 'xl', 'full', 'content'],
},
},
};

export const Default = {
render: (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { FarmCard },
render: (args) => ({
template: `
<farm-card :space="space" :width="width" :boxShadow="boxShadow" :backgroundColor="backgroundColor">
<farm-stack>
Expand All @@ -61,134 +48,45 @@ export const Default = {
}),
};

export const MoreSpace = {
render: (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { FarmCard },
template: `
<farm-card :space="space" :width="width" :boxShadow="boxShadow" :backgroundColor="backgroundColor">
<farm-stack>
<farm-inline><h3>Title</h3></farm-inline>
<farm-inline><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></farm-inline>
</farm-stack>
</farm-card>
`,
}),
export const Default = {};

export const MoreSpace = {
args: {
space: 'l',
},
};

export const Small = {
render: (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { FarmCard },
template: `
<farm-card :space="space" :width="width" :boxShadow="boxShadow" :backgroundColor="backgroundColor">
<farm-stack>
<farm-inline><h3>Title</h3></farm-inline>
<farm-inline><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></farm-inline>
</farm-stack>
</farm-card>
`,
}),

args: {
width: 's',
},
};

export const Medium = {
render: (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { FarmCard },
template: `
<farm-card :space="space" :width="width" :boxShadow="boxShadow" :backgroundColor="backgroundColor">
<farm-stack>
<farm-inline><h3>Title</h3></farm-inline>
<farm-inline><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></farm-inline>
</farm-stack>
</farm-card>
`,
}),

args: {
width: 'm',
},
};

export const FitContent = {
render: (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { FarmCard },
template: `
<farm-card :space="space" :width="width" :boxShadow="boxShadow" :backgroundColor="backgroundColor">
<farm-stack>
<farm-inline><h3>Title</h3></farm-inline>
<farm-inline><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></farm-inline>
</farm-stack>
</farm-card>
`,
}),

args: {
width: 'content',
},
};

export const ResponsiveWidth = {
render: (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { FarmCard },
template: `
<farm-card :space="space" :width="width" :boxShadow="boxShadow" :backgroundColor="backgroundColor">
<farm-stack>
<farm-inline><h3>Title</h3></farm-inline>
<farm-inline><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></farm-inline>
</farm-stack>
</farm-card>
`,
}),

args: {
width: ['s', 'm', 'l'],
},
};

export const StrongShadow = {
render: (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { FarmCard },
template: `
<farm-card :space="space" :width="width" :boxShadow="boxShadow" :backgroundColor="backgroundColor">
<farm-stack>
<farm-inline><h3>Title</h3></farm-inline>
<farm-inline><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></farm-inline>
</farm-stack>
</farm-card>
`,
}),

args: {
boxShadow: 'strong',
},
};

export const BlueBackground = {
render: (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { FarmCard },
template: `
<farm-card :space="space" :width="width" :boxShadow="boxShadow" :backgroundColor="backgroundColor">
<farm-stack>
<farm-inline><h3>Title</h3></farm-inline>
<farm-inline><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></farm-inline>
</farm-stack>
</farm-card>
`,
}),

args: {
backgroundColor: 'blue',
},
Expand Down
56 changes: 7 additions & 49 deletions packages/farm-ui/stories/FarmChip.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,89 +5,47 @@ export default {
component: FarmChip,
argTypes: {
color: {
control: {
type: 'select',
options: ['purple', 'red', 'orange', 'yellow', 'green', 'blue'],
},
control: 'select',
options: ['purple', 'red', 'orange', 'yellow', 'green', 'blue'],
},
size: {
control: {
type: 'select',
options: ['s', 'm', 'l'],
},
control: 'select',
options: ['s', 'm', 'l'],
},
},
};

export const Default = {
render: (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { FarmChip },
render: (args) => ({
template:
'<farm-chip :color="color" :size="size" :disableClose="disableClose">Tomatoes</farm-chip>',
}),
};

export const Small = {
render: (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { FarmChip },
template:
'<farm-chip :color="color" :size="size" :disableClose="disableClose">Tomatoes</farm-chip>',
}),
export const Default = {};

export const Small = {
args: {
size: 's',
},
};

export const Large = {
render: (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { FarmChip },
template:
'<farm-chip :color="color" :size="size" :disableClose="disableClose">Tomatoes</farm-chip>',
}),

args: {
size: 'l',
},
};

export const Green = {
render: (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { FarmChip },
template:
'<farm-chip :color="color" :size="size" :disableClose="disableClose">Tomatoes</farm-chip>',
}),

args: {
color: 'green',
},
};

export const Orange = {
render: (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { FarmChip },
template:
'<farm-chip :color="color" :size="size" :disableClose="disableClose">Tomatoes</farm-chip>',
}),

args: {
color: 'orange',
},
};

export const DisableClose = {
render: (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { FarmChip },
template:
'<farm-chip :color="color" :size="size" :disableClose="disableClose">Tomatoes</farm-chip>',
}),

args: {
disableClose: true,
},
Expand Down
51 changes: 3 additions & 48 deletions packages/farm-ui/stories/FarmDateTimeForm.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,7 @@ import FarmDateTimeForm from '../src/components/FarmDateTimeForm.vue';
export default {
title: 'Content/FarmDateTimeForm',
component: FarmDateTimeForm,
};

export const Base = {
render: (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { FarmDateTimeForm },
render: (args) => ({
data() {
return {
ts: this.timestamp,
Expand All @@ -28,55 +23,15 @@ export const Base = {
}),
};

export const withTimestamp = {
render: (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { FarmDateTimeForm },
data() {
return {
ts: this.timestamp,
timestamps: [],
};
},
template: `
<farm-stack>
<farm-date-time-form :timestamp="ts" :dateLabel="dateLabel" :id="id" :required="required" @input="e => { ts = e; timestamps.push(e) }"/>
<farm-list>
<farm-list-item v-for="(t, i) in timestamps" :key="'timestamp-'+ i">
{{ (new Date(t)).toLocaleString() }}
</farm-list-item>
</farm-list>
</farm-stack>
`,
}),
export const Base = {};

export const withTimestamp = {
args: {
timestamp: new Date().toISOString(),
},
};

export const withDateLabel = {
render: (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { FarmDateTimeForm },
data() {
return {
ts: this.timestamp,
timestamps: [],
};
},
template: `
<farm-stack>
<farm-date-time-form :timestamp="ts" :dateLabel="dateLabel" :id="id" :required="required" @input="e => { ts = e; timestamps.push(e) }"/>
<farm-list>
<farm-list-item v-for="(t, i) in timestamps" :key="'timestamp-'+ i">
{{ (new Date(t)).toLocaleString() }}
</farm-list-item>
</farm-list>
</farm-stack>
`,
}),

args: {
dateLabel: 'Start Date',
},
Expand Down
Loading

0 comments on commit 9a3db11

Please sign in to comment.