@charcoal-ui/react-sandbox 3.10.1 → 3.12.0

package/src/components/Carousel/index.story.tsx

@@ -1,85 +0,0 @@
-import { boolean, number, select, withKnobs } from '@storybook/addon-knobs'
-import styled, { css } from 'styled-components'
-import Carousel from '.'
-
-const dummyText = css`
-  color: ${({ theme }) => theme.color.text4};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  font-weight: bold;
-`
-
-const Dummy = styled.div`
-  background-color: ${({ theme }) => theme.color.surface2};
-  border-radius: 8px;
-
-  ${dummyText}
-`
-export default {
-  title: 'Sandbox/Carousel',
-  decorators: [withKnobs],
-}
-
-export const _Carousel = () => {
-  const hasGradient = boolean('Gradient', false)
-  const fadeInGradient = boolean('FadeInGradient', false)
-  const buttonOffset = number('buttonOffset', 0)
-  const buttonPadding = number('buttonPadding', 16)
-  const defaultScrollAlign = select(
-    'scrollAlign',
-    {
-      Left: 'left',
-      Center: 'center',
-      Right: 'right',
-    },
-    'left'
-  )
-  const defaultScrollOffset = number('scrollOffset', 0)
-  const itemCount = number('Item count', 20)
-  const itemSize = number('Item size', 118)
-
-  const items = Array.from({ length: itemCount })
-  return (
-    <Base>
-      <Carousel
-        buttonOffset={buttonOffset}
-        buttonPadding={buttonPadding}
-        defaultScroll={{
-          align: defaultScrollAlign,
-          offset: defaultScrollOffset,
-        }}
-        hasGradient={hasGradient}
-        fadeInGradient={fadeInGradient}
-      >
-        <Container>
-          {items.map((_value, index) => (
-            <Box size={itemSize} key={index}>
-              Dummy
-            </Box>
-          ))}
-        </Container>
-      </Carousel>
-    </Base>
-  )
-}
-const Base = styled.div`
-  width: 100%;
-  padding: 0 108px;
-  box-sizing: border-box;
-`
-
-const Container = styled.div`
-  display: flex;
-  padding: 0 16px;
-
-  > * + * {
-    margin-left: 4px;
-  }
-`
-
-const Box = styled(Dummy)<{ size: number }>`
-  width: ${(props) => `${props.size}px`};
-  height: ${(props) => `${props.size}px`};
-`

package/src/components/CarouselButton/__snapshots__/index.story.storyshot

@@ -1,168 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storybook Tests Sandbox/Carousel/CarouselButton _CarouselButton 1`] = `
-.c3 {
-  stroke: none;
-  fill: currentColor;
-  width: 24px;
-  height: 24px;
-  line-height: 0;
-  font-size: 0;
-  vertical-align: middle;
-}
-
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background-color: rgba(0,0,0,0.32);
-  -webkit-transition: 0.4s visibility,0.4s opacity,0.2s background-color,0.2s color;
-  transition: 0.4s visibility,0.4s opacity,0.2s background-color,0.2s color;
-  color: #ffffff;
-}
-
-.c0 {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  padding: 0;
-  min-width: 40px;
-  border: none;
-  outline: 0;
-  background: transparent;
-  cursor: pointer;
-  -webkit-transition: 0.4s visibility,0.4s opacity;
-  transition: 0.4s visibility,0.4s opacity;
-  z-index: 1;
-}
-
-.c0:hover .c1 {
-  background-color: rgba(0,0,0,0.3472);
-  color: #f5f5f5;
-}
-
-.c0:active .c1 {
-  background-color: rgba(0,0,0,0.4288);
-  color: #d6d6d6;
-}
-
-<div
-  data-dark={false}
->
-  <button
-    className="c0"
-    onClick={[Function]}
-    style={
-      Object {
-        "left": 0,
-        "paddingBottom": 0,
-        "paddingLeft": 0,
-      }
-    }
-    type="button"
-  >
-    <div
-      className="c1 c2"
-    >
-      <svg
-        className="c3"
-        size={24}
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M8.08579 16.5858C7.30474 17.3668 7.30474 18.6332 8.08579 19.4142C8.86684 20.1953 10.1332 20.1953 10.9142 19.4142L18.3284 12L10.9142 4.58579C10.1332 3.80474 8.86684 3.80474 8.08579 4.58579C7.30474 5.36684 7.30474 6.63317 8.08579 7.41421L12.6716 12L8.08579 16.5858Z"
-          transform="rotate(180 12 12)"
-        />
-      </svg>
-    </div>
-  </button>
-</div>
-`;
-
-exports[`Storybook Tests Sandbox/Carousel/CarouselButton _ScrollHintButton 1`] = `
-.c2 {
-  stroke: none;
-  fill: currentColor;
-  width: 24px;
-  height: 24px;
-  line-height: 0;
-  font-size: 0;
-  vertical-align: middle;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background-color: rgba(0,0,0,0.32);
-  -webkit-transition: 0.4s visibility,0.4s opacity,0.2s background-color,0.2s color;
-  transition: 0.4s visibility,0.4s opacity,0.2s background-color,0.2s color;
-  color: #ffffff;
-}
-
-.c1 {
-  cursor: pointer;
-}
-
-.c1:hover {
-  background-color: rgba(0,0,0,0.3472);
-  color: #f5f5f5;
-}
-
-.c1:active {
-  background-color: rgba(0,0,0,0.4288);
-  color: #d6d6d6;
-}
-
-<div
-  data-dark={false}
->
-  <div
-    className="c0 c1"
-    onClick={[Function]}
-  >
-    <svg
-      className="c2"
-      size={24}
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M8.08579 16.5858C7.30474 17.3668 7.30474 18.6332 8.08579 19.4142C8.86684 20.1953 10.1332 20.1953 10.9142 19.4142L18.3284 12L10.9142 4.58579C10.1332 3.80474 8.86684 3.80474 8.08579 4.58579C7.30474 5.36684 7.30474 6.63317 8.08579 7.41421L12.6716 12L8.08579 16.5858Z"
-        transform="rotate(180 12 12)"
-      />
-    </svg>
-  </div>
-</div>
-`;

package/src/components/CarouselButton/index.story.tsx

@@ -1,43 +0,0 @@
-import { action } from '@storybook/addon-actions'
-import { boolean, number, select, withKnobs } from '@storybook/addon-knobs'
-import CarouselButton, { Direction, ScrollHintButton } from '.'
-
-export default {
-  title: 'Sandbox/Carousel/CarouselButton',
-  decorators: [withKnobs],
-  component: CarouselButton,
-}
-
-export const _CarouselButton = () => {
-  const direction = select(
-    'direction',
-    { left: Direction.Left, right: Direction.Right },
-    Direction.Left
-  )
-  const show = boolean('show', true)
-  const offset = number('offset', 0)
-  const padding = number('padding', 0)
-
-  return (
-    <CarouselButton
-      direction={direction}
-      show={show}
-      offset={offset}
-      padding={padding}
-      onClick={noop}
-    />
-  )
-}
-
-function noop() {
-  // empty
-}
-
-export const _ScrollHintButton = () => {
-  const direction = select(
-    'direction',
-    { left: Direction.Left, right: Direction.Right },
-    Direction.Left
-  )
-  return <ScrollHintButton direction={direction} onClick={action('click')} />
-}

package/src/components/Filter/__snapshots__/index.story.storyshot

@@ -1,239 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storybook Tests Sandbox/Filter Button 1`] = `
-.c0 {
-  display: block;
-  outline: none;
-  border: none;
-  padding: 9px 24px;
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  border-radius: 2000px;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-  color: #858585;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background-color: transparent;
-  background-color: rgba(0,0,0,0.04);
-  color: #474747;
-  cursor: default;
-}
-
-.c0:hover {
-  color: #474747;
-}
-
-@media (max-width:743px) {
-  .c0 {
-    padding: 5px 16px;
-  }
-}
-
-<div
-  data-dark={false}
->
-  <button
-    className="c0"
-  >
-    Label
-  </button>
-</div>
-`;
-
-exports[`Storybook Tests Sandbox/Filter Default 1`] = `
-.c3 {
-  display: block;
-  outline: none;
-  border: none;
-  padding: 9px 24px;
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  border-radius: 2000px;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-  color: #858585;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background-color: transparent;
-}
-
-.c3:hover {
-  color: #474747;
-}
-
-.c1 {
-  display: block;
-  outline: none;
-  border: none;
-  padding: 9px 24px;
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  border-radius: 2000px;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-  color: #858585;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background-color: transparent;
-}
-
-.c1:hover {
-  color: #474747;
-}
-
-.c2 {
-  display: block;
-  outline: none;
-  border: none;
-  padding: 9px 24px;
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  border-radius: 2000px;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-  color: #858585;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background-color: transparent;
-  background-color: rgba(0,0,0,0.04);
-  color: #474747;
-  cursor: default;
-}
-
-.c2:hover {
-  color: #474747;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-@media (max-width:743px) {
-  .c3 {
-    padding: 5px 16px;
-  }
-}
-
-@media (max-width:743px) {
-  .c1 {
-    padding: 5px 16px;
-  }
-}
-
-@media (max-width:743px) {
-  .c2 {
-    padding: 5px 16px;
-  }
-}
-
-<div
-  data-dark={false}
->
-  <div
-    className="c0"
-  >
-    <a
-      href="/0"
-      onClick={[Function]}
-    >
-      <span
-        className="c1"
-      >
-        新しい順
-      </span>
-    </a>
-    <span
-      className="c2"
-    >
-      古い順
-    </span>
-    <button
-      className="c3"
-      onClick={[Function]}
-    >
-      人気順
-    </button>
-    <a
-      href="/3"
-      onClick={[Function]}
-    >
-      <span
-        className="c1"
-      >
-        これはリンク
-      </span>
-    </a>
-    <button
-      className="c3"
-      onClick={[Function]}
-    >
-      これはボタン
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storybook Tests Sandbox/Filter Link 1`] = `
-.c0 {
-  display: block;
-  outline: none;
-  border: none;
-  padding: 9px 24px;
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  border-radius: 2000px;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-  color: #858585;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background-color: transparent;
-  background-color: rgba(0,0,0,0.04);
-  color: #474747;
-  cursor: default;
-}
-
-.c0:hover {
-  color: #474747;
-}
-
-@media (max-width:743px) {
-  .c0 {
-    padding: 5px 16px;
-  }
-}
-
-<div
-  data-dark={false}
->
-  <span
-    className="c0"
-  >
-    Label
-  </span>
-</div>
-`;

package/src/components/Filter/index.story.tsx

@@ -1,82 +0,0 @@
-import { action } from '@storybook/addon-actions'
-import { boolean } from '@storybook/addon-knobs'
-import {
-  Link as RouterLink,
-  MemoryRouter as Router,
-  Route,
-  useParams,
-  useNavigate,
-  Routes,
-} from 'react-router-dom'
-import Filter, { FilterButton, FilterLink } from '.'
-import { ComponentAbstraction } from '@charcoal-ui/react'
-
-export default {
-  title: 'Sandbox/Filter',
-  component: Filter,
-}
-
-const makeUrl = (page: number) => `/${page}`
-
-export function Default() {
-  return (
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error TODO: adapt to react-router@6  (props should be covariant not bivariant)
-    <ComponentAbstraction components={{ Link: RouterLink }}>
-      <Router
-        initialEntries={Array.from({ length: 5 }).map((_, i) => makeUrl(i + 1))}
-        initialIndex={0}
-      >
-        <Routes>
-          <Route path="/:page" element={<FilterButtons />} />
-        </Routes>
-      </Router>
-    </ComponentAbstraction>
-  )
-}
-
-function FilterButtons() {
-  const navigate = useNavigate()
-  const params = useParams()
-  const page = params.page !== undefined ? parseInt(params.page, 10) : 0
-
-  return (
-    <Filter>
-      <FilterLink to={makeUrl(0)} active={page === 0}>
-        新しい順
-      </FilterLink>
-      <FilterLink to={makeUrl(1)} active={page === 1}>
-        古い順
-      </FilterLink>
-      <FilterButton active={page === 2} onClick={() => navigate('2')}>
-        人気順
-      </FilterButton>
-      <FilterLink to={makeUrl(3)} active={page === 3}>
-        これはリンク
-      </FilterLink>
-      <FilterButton active={page === 4} onClick={() => navigate('4')}>
-        これはボタン
-      </FilterButton>
-    </Filter>
-  )
-}
-
-export function Button() {
-  const active = boolean('Active', true)
-  const reactive = boolean('Reactive', false)
-  return (
-    <FilterButton onClick={action('click')} active={active} reactive={reactive}>
-      Label
-    </FilterButton>
-  )
-}
-
-export function Link() {
-  const active = boolean('Active', true)
-  const reactive = boolean('Reactive', false)
-  return (
-    <FilterLink to="#" active={active} reactive={reactive}>
-      Label
-    </FilterLink>
-  )
-}