Remove S2 prefix from docs storybook (adobe#7089)

* disable snapshot for regular stories, remove s2 from title * add chromatic stories from missing components * fix lint * add more chromatic stories for missing components and remove s2 prefix * remove disable snapshot, update chromatic-fc * Some docs improvements --------- Co-authored-by: Devon Govett <[email protected]>
p1pah · Sep 26, 2024 · c353e15 · c353e15
1 parent 8ee13f3
commit c353e15
Show file tree

Hide file tree

Showing 98 changed files with 2,993 additions and 134 deletions.
diff --git 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
@@ -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
@@ -27,7 +27,7 @@ const preview = {
           channel.on(DARK_MODE_EVENT_NAME, setDark);
           return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark);
         }, []);
-        return <DocsContainer {...props} theme={dark ? themes.dark : themes.light} />;
+        return <DocsContainer {...props} theme={{...(dark ? themes.dark : themes.light), appContentBg: 'var(--s2-container-bg)'}} />;
       },
       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
@@ -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<typeof Accordion> = {
+  component: Accordion,
+  parameters: {
+    chromaticProvider: {disableAnimations: true}
+  },
+  title: 'S2 Chromatic/Accordion'
+};
+
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+export const Example: Story = {
+  render: (args) => {
+    return (
+      <div className={style({minHeight: 240})}>
+        <Accordion {...args}>
+          <Disclosure id="files">
+            <DisclosureHeader>
+              Files
+            </DisclosureHeader>
+            <DisclosurePanel>
+              Files content
+            </DisclosurePanel>
+          </Disclosure>
+          <Disclosure id="people">
+            <DisclosureHeader>
+              People
+            </DisclosureHeader>
+            <DisclosurePanel>
+              <TextField label="Name" styles={style({maxWidth: 176})} />
+            </DisclosurePanel>
+          </Disclosure>
+        </Accordion>
+      </div>
+    );
+  }
+};
+
+export const WithLongTitle: Story = {
+  render: (args) => {
+    return (
+      <div className={style({minHeight: 224})}>
+        <Accordion styles={style({maxWidth: 224})} {...args}>
+          <Disclosure>
+            <DisclosureHeader>
+              Files
+            </DisclosureHeader>
+            <DisclosurePanel>
+              Files content
+            </DisclosurePanel>
+          </Disclosure>
+          <Disclosure>
+            <DisclosureHeader>
+              People
+            </DisclosureHeader>
+            <DisclosurePanel>
+              People content
+            </DisclosurePanel>
+          </Disclosure>
+          <Disclosure>
+            <DisclosureHeader>
+              Very very very very very long title that wraps
+            </DisclosureHeader>
+            <DisclosurePanel>
+              Accordion content
+            </DisclosurePanel>
+          </Disclosure>
+        </Accordion>
+      </div>
+    );
+  }
+};
+
+export const WithDisabledDisclosure: Story = {
+  render: (args) => {
+    return (
+      <div className={style({minHeight: 240})}>
+        <Accordion {...args}>
+          <Disclosure>
+            <DisclosureHeader>
+              Files
+            </DisclosureHeader>
+            <DisclosurePanel>
+              Files content
+            </DisclosurePanel>
+          </Disclosure>
+          <Disclosure isDisabled>
+            <DisclosureHeader>
+              People
+            </DisclosureHeader>
+            <DisclosurePanel>
+              <TextField label="Name" />
+            </DisclosurePanel>
+          </Disclosure>
+        </Accordion>
+      </div>
+    );
+  }
+};
+
+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
@@ -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<typeof AvatarGroup> = {
+  component: AvatarGroup,
+  parameters: {
+    chromaticProvider: {backgrounds: ['base', 'layer-1', 'layer-2'], disableAnimations: true}
+  },
+  title: 'S2 Chromatic/AvatarGroup'
+};
+
+export default meta;
+
+export {Example, WithLabel, WithProviderBackground};