From 18b8297ee374e793e7661e6582d982067974048d Mon Sep 17 00:00:00 2001 From: mishevong <79538210+mishevong@users.noreply.github.com> Date: Fri, 9 Jul 2021 15:12:45 -0700 Subject: [PATCH] feat #369 - Export scrollOnClick and update stories (#370) * feat #369 - move scrollOnClick to utils and update stories --- package.json | 2 +- src/__snapshots__/storybook.test.ts.snap | 410 ++++++++++++++---- .../ScrollableSection.stories.tsx | 138 +++++- src/components/ScrollableSection/index.tsx | 23 +- src/components/ScrollableSection/utils.ts | 23 + 5 files changed, 482 insertions(+), 114 deletions(-) diff --git a/package.json b/package.json index edc3a3d1..9aae1c0a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@dassana-io/web-components", - "version": "0.11.9", + "version": "0.11.10", "publishConfig": { "registry": "https://npm.pkg.github.com/dassana-io" }, diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap index 9f836d5c..abe958e1 100644 --- a/src/__snapshots__/storybook.test.ts.snap +++ b/src/__snapshots__/storybook.test.ts.snap @@ -4783,6 +4783,244 @@ exports[`Storyshots SVGImage Default 1`] = ` `; +exports[`Storyshots ScrollableSection Multiple 1`] = ` +
+
+
+
+
+ apple +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ pineapple +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ mango +
+
+
+
+
+`; + +exports[`Storyshots ScrollableSection Scroll Without Arrow 1`] = ` +
+
+
+
+
+ +
+
+
+
+
+ + + +
+
+
+
+ pineapple +
+
+
+
+
+
+`; + exports[`Storyshots ScrollableSection Single 1`] = `
Lorem @@ -5074,7 +5312,7 @@ exports[`Storyshots Select Icon 1`] = ` className="decorator-0-2-3" >
AWS @@ -5195,7 +5433,7 @@ exports[`Storyshots Select Search 1`] = ` className="decorator-0-2-3" >
press enter ↵ @@ -5423,19 +5661,19 @@ exports[`Storyshots ShortcutMicrocopy Icon Only 1`] = ` className="light storyWrapper-0-2-2" >
press ⌘ @@ -5449,24 +5687,24 @@ exports[`Storyshots ShortcutMicrocopy Mixed 1`] = ` className="light storyWrapper-0-2-2" >
press cmd ⌘ @@ -5474,12 +5712,12 @@ exports[`Storyshots ShortcutMicrocopy Mixed 1`] = ` + Enter
press cmd ⌘ @@ -5536,12 +5774,12 @@ exports[`Storyshots ShortcutMicrocopy Predefined Keys 1`] = ` + enter ↵ @@ -5555,7 +5793,7 @@ exports[`Storyshots Skeleton Circle 1`] = ` className="light storyWrapper-0-2-2" >   @@ -5567,27 +5805,27 @@ exports[`Storyshots Skeleton Count 1`] = ` className="light storyWrapper-0-2-2" >           @@ -5599,7 +5837,7 @@ exports[`Storyshots Skeleton Default 1`] = ` className="light storyWrapper-0-2-2" >   @@ -5611,21 +5849,21 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` className="light storyWrapper-0-2-2" >
vpc-flow-logs-are-disabled @@ -5971,10 +6209,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
FlowLog @@ -5988,10 +6226,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
visibility @@ -6000,7 +6238,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
instance-is-exposed-to-internet @@ -6043,10 +6281,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
instance @@ -6060,10 +6298,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
network @@ -6072,7 +6310,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
default-security-group-should-not-allow-traffic @@ -6115,10 +6353,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
security-group @@ -6132,10 +6370,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
networking @@ -6144,7 +6382,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
ssh-from-internet @@ -6187,10 +6425,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
security-group @@ -6204,10 +6442,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
network @@ -6216,7 +6454,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
ebs-volume-is-not-encrypted @@ -6259,10 +6497,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
volume @@ -6276,10 +6514,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
cryptography @@ -6542,7 +6780,7 @@ exports[`Storyshots TimeInput Error 1`] = ` className="light storyWrapper-0-2-2" >
Foo
hello
- -) +const DecoratedSingleTemplate = (args: ScrollableSectionProps) => { + const decoratedClasses = useStyles() -export const Single = SingleTemplate.bind({}) + return ( + +
+
pine
+
apple
+
+ + ) +} + +export const Single: Story = + DecoratedSingleTemplate.bind({}) Single.args = { name: 'apple' } + +const multiConfig = [ + { + arrowDown: true, + arrowUp: false, + name: 'apple', + sections: sectionsMockData + }, + { + arrowDown: true, + arrowUp: true, + name: 'pineapple', + sections: sectionsMockData + }, + { + arrowDown: false, + arrowUp: true, + name: 'mango', + sections: sectionsMockData + } +] + +const DecoratedMultipleTemplate = () => { + const decoratedClasses = useStyles() + + return ( +
+ {multiConfig.map((section, i) => ( + +
+ {section.name} +
+ + ))} +
+ ) +} + +export const Multiple = DecoratedMultipleTemplate.bind({}) + +const DecoratedScrollTemplate = () => { + const decoratedClasses = useStyles() + + const scrollConfig = [ + { + arrowDown: false, + arrowUp: false, + name: 'apple', + render: () => ( +
+ +
+ ), + sections: sectionsMockData + }, + { + arrowDown: false, + arrowUp: true, + name: 'pineapple', + render: () => ( +
+
pineapple
+
+ ), + sections: sectionsMockData + } + ] + + return ( +
+ {scrollConfig.map((args, i) => ( + + {args.render()} + + ))} +
+ ) +} + +export const ScrollWithoutArrow = DecoratedScrollTemplate.bind({}) diff --git a/src/components/ScrollableSection/index.tsx b/src/components/ScrollableSection/index.tsx index 8432f708..d20a7382 100644 --- a/src/components/ScrollableSection/index.tsx +++ b/src/components/ScrollableSection/index.tsx @@ -2,14 +2,13 @@ import { Bounce } from './Bounce' import { Breakpoints } from '@dassana-io/web-utils' import cn from 'classnames' import { createUseStyles } from 'react-jss' +import { Element } from 'react-scroll' import { IconButton } from 'components/IconButton' -import indexOf from 'lodash/indexOf' import { mediaSelectorsWithBreakpoints } from '../Pages/utils' -import { ScrollDirections } from './utils' import { styleguide } from 'components/assets/styles' -import { Element, scroller } from 'react-scroll' import { faArrowDown, faArrowUp } from '@fortawesome/free-solid-svg-icons' import React, { FC, ReactNode } from 'react' +import { ScrollDirections, scrollOnClick } from './utils' const { tablet } = Breakpoints const { min } = mediaSelectorsWithBreakpoints @@ -78,24 +77,6 @@ export const ScrollableSection: FC = ({ }: ScrollableSectionProps) => { const componentClasses = useStyles() - const scrollOnClick = ( - sections: string[], - dir: ScrollDirections, - currentSection: string - ) => { - let idx = indexOf(sections, currentSection) - - if (dir === up && idx !== 0) { - idx -= 1 - } else if (dir === down && idx < sections.length) { - idx += 1 - } - - scroller.scrollTo(sections[idx], { - smooth: true - }) - } - return ( { + let idx = indexOf(sections, currentSection) + + if (dir === up && idx !== 0) { + idx -= 1 + } else if (dir === down && idx < sections.length) { + idx += 1 + } + + scroller.scrollTo(sections[idx], { + smooth: true + }) +}