@charcoal-ui/react-sandbox 4.0.0-beta.2 → 4.0.0-beta.4

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>
-  )
-}

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

@@ -1,119 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storybook Tests Sandbox/HintText Default 1`] = `
-.c2 {
-  stroke: none;
-  fill: currentColor;
-  width: 16px;
-  height: 16px;
-  line-height: 0;
-  font-size: 0;
-  vertical-align: middle;
-}
-
-.c3 {
-  fill: #ffffff;
-  fill-rule: evenodd;
-}
-
-.c0 {
-  background-color: var(--charcoal-surface3);
-  border-radius: 8px;
-  padding-top: 16px;
-  padding-bottom: 16px;
-  padding-right: 16px;
-  padding-left: 16px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-}
-
-.c1 {
-  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;
-  color: #adadad;
-  height: 22px;
-  margin: -4px 4px -4px 0;
-}
-
-.c4 {
-  color: var(--charcoal-text2);
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  margin: 0;
-}
-
-.c4::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c4::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-@media (max-width:743px) {
-  .c0 {
-    padding-top: 16px;
-    padding-bottom: 16px;
-    padding-right: 16px;
-    padding-left: 16px;
-  }
-}
-
-<div
-  data-dark={false}
->
-  <div
-    className="c0"
-    default={
-      Object {
-        "horizontal": 16,
-        "vertical": 16,
-      }
-    }
-  >
-    <div
-      className="c1"
-    >
-      <svg
-        className="c2"
-        size={16}
-        viewBox="0 0 16 16"
-      >
-        <path
-          d="M8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16Z"
-        />
-        <path
-          className="c3"
-          d="M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8ZM8 6.25C8.69036 6.25 9.25 5.69036 9.25 5C9.25 4.30964 8.69036 3.75 8 3.75C7.30964 3.75 6.75 4.30964 6.75 5C6.75 5.69036 7.30964 6.25 8 6.25ZM7 7.75V11.25C7 11.8023 7.44772 12.25 8 12.25C8.55228 12.25 9 11.8023 9 11.25V7.75C9 7.19772 8.55228 6.75 8 6.75C7.44772 6.75 7 7.19772 7 7.75Z"
-        />
-      </svg>
-    </div>
-    <p
-      className="c4"
-    >
-      ヒントテキストだよおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお
-    </p>
-  </div>
-</div>
-`;

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

@@ -1,18 +0,0 @@
-import { Story } from '../../_lib/compat'
-import HintText from '.'
-
-export default {
-  title: 'Sandbox/HintText',
-  component: HintText,
-}
-
-const Template: Story<{ hintText: string; context: 'page' | 'section' }> = (
-  args
-) => <HintText context={args.context}>{args.hintText}</HintText>
-
-export const Default = Template.bind({})
-Default.args = {
-  hintText:
-    'ヒントテキストだよおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお',
-  context: 'section',
-}