docs(react-swatch-picker): Added stories for Size, Shape and Spacing (m…

…icrosoft#30781)
micahgodbolt · Mar 18, 2024 · fd89630 · fd89630
1 parent cbd6654
commit fd89630
Show file tree

Hide file tree

Showing 6 changed files with 236 additions and 1 deletion.
diff --git a/...components/react-swatch-picker-preview/stories/ColorSwatch/ColorSwatchDefault.stories.tsx b/...components/react-swatch-picker-preview/stories/ColorSwatch/ColorSwatchDefault.stories.tsx
@@ -1,4 +1,10 @@
 import * as React from 'react';
 import { ColorSwatch } from '@fluentui/react-swatch-picker-preview';
 
-export const Default = () => <ColorSwatch color="red" value="red-color" aria-label="Red" />;
+export const Default = () => (
+  <>
+    <ColorSwatch color="purple" value="purple-color" aria-label="Purple" />
+    <ColorSwatch color="#E3008C" value="hot-pink-color" aria-label="Hot pink" />
+    <ColorSwatch color="linear-gradient(0deg, #E3008C, #fff232)" value="gradient" aria-label="Gradient yellow pink" />
+  </>
+);
diff --git a/...components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerPopup.stories.tsx b/...components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerPopup.stories.tsx
@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { makeStyles, shorthands, Button, Popover, PopoverSurface, PopoverTrigger } from '@fluentui/react-components';
+import { SwatchPicker, SwatchPickerOnSelectEventHandler, ColorSwatch } from '@fluentui/react-swatch-picker-preview';
+
+const useStyles = makeStyles({
+  example: {
+    width: '100px',
+    height: '100px',
+    ...shorthands.border('1px', 'solid', '#ccc'),
+    ...shorthands.margin('20px', '0'),
+  },
+});
+
+const colors = [
+  { color: '#FF1921', value: 'FF1921', 'aria-label': 'red' },
+  { color: '#FFC12E', value: 'FFC12E', 'aria-label': 'orange' },
+  { color: '#FEFF37', value: 'FEFF37', 'aria-label': 'yellow' },
+  { color: '#90D057', value: '90D057', 'aria-label': 'light green' },
+  { color: '#00B053', value: '00B053', 'aria-label': 'green' },
+  { color: '#00AFED', value: '00AFED', 'aria-label': 'light blue' },
+  { color: '#006EBD', value: '006EBD', 'aria-label': 'blue' },
+  { color: '#712F9E', value: '712F9E', 'aria-label': 'purple' },
+];
+
+const gradientColors = [
+  { color: 'linear-gradient(0deg, #FF1921, #FFB92E)', value: 'orange-red', 'aria-label': 'gradient orange-red' },
+  { color: 'linear-gradient(0deg, #FFC12E, #FEFF37)', value: 'yellow-orange', 'aria-label': 'gradient yellow-orange' },
+  { color: 'linear-gradient(0deg, #90D057, #FEFF37)', value: 'yellow-green', 'aria-label': 'gradient yellow-green' },
+  {
+    color: 'linear-gradient(0deg, #00B053, #90D057)',
+    value: 'light-green-gradient',
+    'aria-label': 'gradient light green',
+  },
+  { color: 'linear-gradient(0deg, #00B053, #00AFED)', value: 'green-blue', 'aria-label': 'gradient green-blue' },
+  { color: 'linear-gradient(0deg, #006EBD, #00AFED)', value: 'blue gradient', 'aria-label': 'gradient blue' },
+  { color: 'linear-gradient(0deg, #712F9E, #00AFED)', value: 'blue-purple', 'aria-label': 'gradient blue-purple' },
+  {
+    color:
+      'linear-gradient(0deg, #FF1921 0%, #FFC12E 10%, #FEFF37 20%, #90D057 30%, #00B053 40%, #00AFED 50%, #006EBD 60%, #011F5E 70%, #712F9E 80%)',
+    value: 'gradient',
+    'aria-label': 'gradient',
+  },
+];
+
+export const SwatchPickerPopup = () => {
+  const [selectedValue, setSelectedValue] = React.useState('00B053');
+  const [selectedColor, setSelectedColor] = React.useState('#00B053');
+
+  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {
+    setSelectedValue(data.selectedValue);
+    setSelectedColor(data.selectedColor);
+  };
+
+  const styles = useStyles();
+
+  return (
+    <>
+      <Popover trapFocus>
+        <PopoverTrigger disableButtonEnhancement>
+          <Button>Choose color</Button>
+        </PopoverTrigger>
+
+        <PopoverSurface>
+          <h3>Color set 1</h3>
+          <SwatchPicker aria-label="SwatchPicker set 1" selectedValue={selectedValue} onSelectionChange={handleSelect}>
+            {colors.map((color, index) => {
+              return <ColorSwatch key={`${color.value}-${index}`} {...color} />;
+            })}
+          </SwatchPicker>
+          <h3>Color set 2</h3>
+          <SwatchPicker aria-label="SwatchPicker set 2" selectedValue={selectedValue} onSelectionChange={handleSelect}>
+            {gradientColors.map((color, index) => {
+              return <ColorSwatch key={`${color.value}-${index}`} {...color} />;
+            })}
+          </SwatchPicker>
+        </PopoverSurface>
+      </Popover>
+      <div
+        className={styles.example}
+        style={{
+          background: selectedColor,
+        }}
+      />
+    </>
+  );
+};
diff --git a/...components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerShape.stories.tsx b/...components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerShape.stories.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { makeStyles, shorthands } from '@fluentui/react-components';
+import { SwatchPicker, ColorSwatch } from '@fluentui/react-swatch-picker-preview';
+
+const useStyles = makeStyles({
+  example: {
+    display: 'flex',
+    flexDirection: 'column',
+    ...shorthands.gap('10px'),
+  },
+});
+
+const colors = [
+  { color: '#FF1921', value: 'FF1921', 'aria-label': 'red' },
+  { color: '#FFC12E', value: 'FFC12E', 'aria-label': 'orange' },
+  { color: '#FEFF37', value: 'FEFF37', 'aria-label': 'yellow' },
+  { color: '#90D057', value: '90D057', 'aria-label': 'light green' },
+  { color: '#00B053', value: '00B053', 'aria-label': 'green' },
+  { color: '#00AFED', value: '00AFED', 'aria-label': 'light blue' },
+  { color: '#006EBD', value: '006EBD', 'aria-label': 'blue' },
+  { color: '#011F5E', value: '011F5E', 'aria-label': 'dark blue' },
+  { color: '#712F9E', value: '712F9E', 'aria-label': 'purple' },
+];
+
+export const SwatchPickerShape = () => {
+  const styles = useStyles();
+  return (
+    <div className={styles.example}>
+      <SwatchPicker aria-label="SwatchPicker square shape">
+        {colors.map((color, index) => {
+          return <ColorSwatch key={`${color.value}-${index}`} {...color} />;
+        })}
+      </SwatchPicker>
+      <SwatchPicker aria-label="SwatchPicker circular shape" shape="circular">
+        {colors.map((color, index) => {
+          return <ColorSwatch key={`${color.value}-${index}`} {...color} />;
+        })}
+      </SwatchPicker>
+      <SwatchPicker aria-label="SwatchPicker rounded shape" shape="rounded">
+        {colors.map((color, index) => {
+          return <ColorSwatch key={`${color.value}-${index}`} {...color} />;
+        })}
+      </SwatchPicker>
+    </div>
+  );
+};
diff --git a/...-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerSize.stories.tsx b/...-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerSize.stories.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { makeStyles, shorthands } from '@fluentui/react-components';
+import { SwatchPicker, ColorSwatch } from '@fluentui/react-swatch-picker-preview';
+
+const useStyles = makeStyles({
+  example: {
+    display: 'flex',
+    flexDirection: 'column',
+    ...shorthands.gap('10px'),
+  },
+});
+
+const colors = [
+  { color: '#FF1921', value: 'FF1921', 'aria-label': 'red' },
+  { color: '#FFC12E', value: 'FFC12E', 'aria-label': 'orange' },
+  { color: '#FEFF37', value: 'FEFF37', 'aria-label': 'yellow' },
+  { color: '#90D057', value: '90D057', 'aria-label': 'light green' },
+  { color: '#00B053', value: '00B053', 'aria-label': 'green' },
+  { color: '#00AFED', value: '00AFED', 'aria-label': 'light blue' },
+  { color: '#006EBD', value: '006EBD', 'aria-label': 'blue' },
+  { color: '#011F5E', value: '011F5E', 'aria-label': 'dark blue' },
+  { color: '#712F9E', value: '712F9E', 'aria-label': 'purple' },
+];
+
+export const SwatchPickerSize = () => {
+  const styles = useStyles();
+  return (
+    <div className={styles.example}>
+      <SwatchPicker aria-label="SwatchPicker large size" size="large">
+        {colors.map((color, index) => {
+          return <ColorSwatch key={`${color.value}-${index}`} {...color} />;
+        })}
+      </SwatchPicker>
+      <SwatchPicker aria-label="SwatchPicker medium size">
+        {colors.map((color, index) => {
+          return <ColorSwatch key={`${color.value}-${index}`} {...color} />;
+        })}
+      </SwatchPicker>
+      <SwatchPicker aria-label="SwatchPicker small size" size="small">
+        {colors.map((color, index) => {
+          return <ColorSwatch key={`${color.value}-${index}`} {...color} />;
+        })}
+      </SwatchPicker>
+      <SwatchPicker aria-label="SwatchPicker extra small size" size="extraSmall">
+        {colors.map((color, index) => {
+          return <ColorSwatch key={`${color.value}-${index}`} {...color} />;
+        })}
+      </SwatchPicker>
+    </div>
+  );
+};
diff --git a/...mponents/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerSpacing.stories.tsx b/...mponents/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerSpacing.stories.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { makeStyles, shorthands } from '@fluentui/react-components';
+import { SwatchPicker, ColorSwatch } from '@fluentui/react-swatch-picker-preview';
+
+const useStyles = makeStyles({
+  example: {
+    display: 'flex',
+    flexDirection: 'column',
+    ...shorthands.gap('10px'),
+  },
+});
+
+const colors = [
+  { color: '#FF1921', value: 'FF1921', 'aria-label': 'red' },
+  { color: '#FFC12E', value: 'FFC12E', 'aria-label': 'orange' },
+  { color: '#FEFF37', value: 'FEFF37', 'aria-label': 'yellow' },
+  { color: '#90D057', value: '90D057', 'aria-label': 'light green' },
+  { color: '#00B053', value: '00B053', 'aria-label': 'green' },
+  { color: '#00AFED', value: '00AFED', 'aria-label': 'light blue' },
+  { color: '#006EBD', value: '006EBD', 'aria-label': 'blue' },
+  { color: '#011F5E', value: '011F5E', 'aria-label': 'dark blue' },
+  { color: '#712F9E', value: '712F9E', 'aria-label': 'purple' },
+];
+
+export const SwatchPickerSpacing = () => {
+  const styles = useStyles();
+
+  return (
+    <div className={styles.example}>
+      <SwatchPicker aria-label="SwatchPicker medium spacing">
+        {colors.map((color, index) => {
+          return <ColorSwatch key={`${color.value}-${index}`} {...color} />;
+        })}
+      </SwatchPicker>
+      <SwatchPicker aria-label="SwatchPicker small spacing" spacing="small">
+        {colors.map((color, index) => {
+          return <ColorSwatch key={`${color.value}-${index}`} {...color} />;
+        })}
+      </SwatchPicker>
+    </div>
+  );
+};
diff --git a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/index.stories.tsx b/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/index.stories.tsx
@@ -4,6 +4,10 @@ import descriptionMd from './SwatchPickerDescription.md';
 import bestPracticesMd from './SwatchPickerBestPractices.md';
 
 export { Default } from './SwatchPickerDefault.stories';
+export { SwatchPickerSize } from './SwatchPickerSize.stories';
+export { SwatchPickerSpacing } from './SwatchPickerSpacing.stories';
+export { SwatchPickerShape } from './SwatchPickerShape.stories';
+export { SwatchPickerPopup } from './SwatchPickerPopup.stories';
 
 export default {
   title: 'Preview Components/SwatchPicker',