diff --git a/.chromatic-fc/main.js b/.chromatic-fc/main.js index 2dad2dbbb83..568b23b40da 100644 --- a/.chromatic-fc/main.js +++ b/.chromatic-fc/main.js @@ -6,7 +6,7 @@ module.exports = { }, stories: [ '../packages/**/chromatic-fc/**/*.stories.{js,jsx,ts,tsx}', - '../packages/@react-spectrum/s2/stories/*.stories.@(js|jsx|mjs|ts|tsx)' + '../packages/@react-spectrum/s2/chromatic/*.stories.@(js|jsx|mjs|ts|tsx)' ], addons: process.env.NODE_ENV === 'production' ? [] : [ '@storybook/addon-actions', diff --git a/.chromatic/main.js b/.chromatic/main.js index 6f6e862382a..32b3b56e029 100644 --- a/.chromatic/main.js +++ b/.chromatic/main.js @@ -6,7 +6,6 @@ module.exports = { }, stories: [ '../packages/**/chromatic/**/*.stories.@(js|jsx|ts|tsx)', - '../packages/@react-spectrum/s2/stories/*.stories.@(js|jsx|mjs|ts|tsx)', '../packages/@react-spectrum/s2/chromatic/*.stories.@(js|jsx|mjs|ts|tsx)' ], addons: process.env.NODE_ENV === 'production' ? [] : [ diff --git a/.storybook-s2/preview.tsx b/.storybook-s2/preview.tsx index b9074b785f3..220b3bd5444 100644 --- a/.storybook-s2/preview.tsx +++ b/.storybook-s2/preview.tsx @@ -27,7 +27,7 @@ const preview = { channel.on(DARK_MODE_EVENT_NAME, setDark); return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark); }, []); - return ; + return ; }, source: { // code: null, // Will disable code button, and show "No code available" diff --git a/packages/@react-spectrum/s2/chromatic/Accordion.stories.tsx b/packages/@react-spectrum/s2/chromatic/Accordion.stories.tsx new file mode 100644 index 00000000000..35fcf2d5889 --- /dev/null +++ b/packages/@react-spectrum/s2/chromatic/Accordion.stories.tsx @@ -0,0 +1,129 @@ +/* + * Copyright 2020 Adobe. All rights reserved. + * This file is licensed to you 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 REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +import {Accordion, Disclosure, DisclosureHeader, DisclosurePanel, TextField} from '../src'; +import type {Meta, StoryObj} from '@storybook/react'; +import React from 'react'; +import {style} from '../style/spectrum-theme' with { type: 'macro' }; + +const meta: Meta = { + component: Accordion, + parameters: { + chromaticProvider: {disableAnimations: true} + }, + title: 'S2 Chromatic/Accordion' +}; + +export default meta; +type Story = StoryObj; + +export const Example: Story = { + render: (args) => { + return ( +
+ + + + Files + + + Files content + + + + + People + + + + + + +
+ ); + } +}; + +export const WithLongTitle: Story = { + render: (args) => { + return ( +
+ + + + Files + + + Files content + + + + + People + + + People content + + + + + Very very very very very long title that wraps + + + Accordion content + + + +
+ ); + } +}; + +export const WithDisabledDisclosure: Story = { + render: (args) => { + return ( +
+ + + + Files + + + Files content + + + + + People + + + + + + +
+ ); + } +}; + +WithLongTitle.parameters = { + docs: { + disable: true + } +}; + +WithDisabledDisclosure.parameters = { + docs: { + disable: true + } +}; + diff --git a/packages/@react-spectrum/s2/chromatic/AvatarGroup.stories.tsx b/packages/@react-spectrum/s2/chromatic/AvatarGroup.stories.tsx new file mode 100644 index 00000000000..2753eb5bdf2 --- /dev/null +++ b/packages/@react-spectrum/s2/chromatic/AvatarGroup.stories.tsx @@ -0,0 +1,27 @@ +/* + * Copyright 2024 Adobe. All rights reserved. + * This file is licensed to you 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 REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +import {AvatarGroup} from '../src'; +import {Example, WithLabel, WithProviderBackground} from '../stories/AvatarGroup.stories'; +import type {Meta} from '@storybook/react'; + +const meta: Meta = { + component: AvatarGroup, + parameters: { + chromaticProvider: {backgrounds: ['base', 'layer-1', 'layer-2'], disableAnimations: true} + }, + title: 'S2 Chromatic/AvatarGroup' +}; + +export default meta; + +export {Example, WithLabel, WithProviderBackground}; diff --git a/packages/@react-spectrum/s2/chromatic/Card.stories.tsx b/packages/@react-spectrum/s2/chromatic/Card.stories.tsx new file mode 100644 index 00000000000..a8a42c1db38 --- /dev/null +++ b/packages/@react-spectrum/s2/chromatic/Card.stories.tsx @@ -0,0 +1,309 @@ +/* + * Copyright 2024 Adobe. All rights reserved. + * This file is licensed to you 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 REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +import {ActionMenu, AssetCard, Avatar, Badge, Button, Card, CardPreview, CardProps, CollectionCardPreview, Content, Divider, Footer, Image, MenuItem, Meter, ProductCard, Skeleton, StatusLight, Text, UserCard} from '../src'; +import Folder from '../s2wf-icons/S2_Icon_Folder_20_N.svg'; +import FolderGradient from 'illustration:../spectrum-illustrations/gradient/S2_fill_folderClose_generic2_160.svg'; +import type {Meta} from '@storybook/react'; +import Project from '../s2wf-icons/S2_Icon_Project_20_N.svg'; +import Select from '../s2wf-icons/S2_Icon_Select_20_N.svg'; +import {style} from '../style/spectrum-theme' with {type: 'macro'}; + +const meta: Meta = { + component: Card, + parameters: { + layout: 'centered' + }, + args: { + isLoading: false + }, + argTypes: { + href: {table: {disable: true}}, + download: {table: {disable: true}}, + hrefLang: {table: {disable: true}}, + referrerPolicy: {table: {disable: true}}, + rel: {table: {disable: true}}, + routerOptions: {table: {disable: true}}, + ping: {table: {disable: true}}, + target: {table: {disable: true}}, + value: {table: {disable: true}}, + textValue: {table: {disable: true}}, + onAction: {table: {disable: true}}, + isDisabled: {table: {disable: true}} + }, + decorators: (children, {args}) => ( + + {children(args)} + + ), + title: 'S2 Chromatic/Card' +}; + +export default meta; + +export const Example = (args: any) => ( +
+ + + + + + Card title + + Test + + Card description. Give a concise overview of the context or functionality that's mentioned in the card title. + + {args.size !== 'XS' && <> + +
+ Published +
+ } + + + + Card title + Card description. Give a concise overview of the context or functionality that's mentioned in the card title. + + {args.size !== 'XS' && <> + +
+ Published +
+ } + +
+); + +const specificArgTypes = { + density: { + table: { + disable: true + } + } +}; + +export const Asset = (args: any) => ( +
+ + + + + + Desert Sunset + PNG • 2/3/2024 + + + + + + + + Projects + 10 items • 6/14/2024 + + +
+); + +Asset.argTypes = specificArgTypes; + +export const User = (args: any) => ( +
+ + + + + + + Card title + Card description. Give a concise overview of the context or functionality that's mentioned in the card title. + +
+ Available +
+ + + + + Card title + Card description. Give a concise overview of the context or functionality that's mentioned in the card title. + +
+ Available +
+ +
+); + +User.argTypes = { + ...specificArgTypes, + variant: { + control: 'radio', + options: ['primary', 'secondary', 'tertiary'] + } +}; + +export const Product = (args: any) => ( +
+ + + + + + + Card title + Card description. Give a concise overview of the context or functionality that's mentioned in the card title. + +
+ +
+ + + + + Card title + Card description. Give a concise overview of the context or functionality that's mentioned in the card title. + +
+ +
+ +
+); + +Product.argTypes = { + ...specificArgTypes, + variant: { + control: 'radio', + options: ['primary', 'secondary', 'tertiary'] + } +}; + +export const Collection = (args: any) => ( +
+ + + + + + + + + Travel +
+ + 20 photos +
+ + + + + + + + + + Architecture +
+ + 15 photos +
+ + +
+); + +export const PreviewOverlay = (args: any) => ( + + + + + Free + + + + +); + +export const Custom = (args: any) => ( +
+ + + + + +
+
+