@charcoal-ui/react-sandbox 1.0.0-alpha.1

package/src/components/Filter/index.tsx

@@ -0,0 +1,182 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+import { useComponentAbstraction, LinkProps } from '@charcoal-ui/react'
+import { maxWidth } from '@charcoal-ui/utils'
+
+interface Props<T extends HTMLElement> {
+  active?: boolean
+  hover?: boolean
+  reactive?: boolean
+  children: React.ReactNode
+  onClick?: React.MouseEventHandler<T>
+}
+
+interface FilterIconButtonProps extends Props<HTMLButtonElement> {
+  width?: number
+  height?: number
+}
+
+export const FilterButton = React.forwardRef(function FilterButton(
+  {
+    onClick,
+    children,
+    active = false,
+    hover,
+    reactive = false,
+  }: Props<HTMLButtonElement>,
+  ref: React.Ref<HTMLButtonElement>
+) {
+  return (
+    <ButtonLike
+      active={active}
+      reactive={reactive}
+      hover={hover}
+      onClick={active && !reactive ? undefined : onClick}
+      ref={ref}
+    >
+      {children}
+    </ButtonLike>
+  )
+})
+
+export const FilterIconButton = React.forwardRef(function FilterIconButton(
+  {
+    onClick,
+    children,
+    active = false,
+    hover,
+    reactive = false,
+    width,
+    height,
+  }: FilterIconButtonProps,
+  ref: React.Ref<HTMLButtonElement>
+) {
+  return (
+    <StyledButtonLike
+      active={active}
+      reactive={reactive}
+      hover={hover}
+      onClick={active && !reactive ? undefined : onClick}
+      ref={ref}
+      buttonWidth={width}
+      buttonHeight={height}
+    >
+      {children}
+    </StyledButtonLike>
+  )
+})
+
+export const FilterLink = React.forwardRef(function FilterLink(
+  {
+    onClick,
+    children,
+    active = false,
+    hover,
+    reactive = false,
+    ...props
+  }: Props<HTMLAnchorElement> & LinkProps,
+  ref: React.Ref<HTMLAnchorElement>
+) {
+  const { Link } = useComponentAbstraction()
+  if (active && !reactive) {
+    return (
+      <PlainElement active hover={hover} ref={ref}>
+        {children}
+      </PlainElement>
+    )
+  } else {
+    return (
+      <Link {...props} onClick={onClick}>
+        <PlainElement
+          active={active}
+          reactive={reactive}
+          hover={hover}
+          ref={ref}
+        >
+          {children}
+        </PlainElement>
+      </Link>
+    )
+  }
+})
+
+interface ButtonCssProps {
+  active?: boolean
+  hover?: boolean
+  reactive?: boolean
+}
+
+const buttonCss = css`
+  display: block;
+  outline: none;
+  border: none;
+  padding: 9px 24px;
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: bold;
+  border-radius: /* absurd radius, but ensures rounded corners */ 2000px;
+  transition: color 0.2s;
+  color: ${({ theme }) => theme.color.text3};
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+
+  &:hover {
+    color: ${({ theme }) => theme.color.text2};
+  }
+
+  ${({ hover = false }: ButtonCssProps) =>
+    hover &&
+    css`
+      color: ${({ theme }) => theme.color.text2};
+    `}
+
+  ${({ active = false }: ButtonCssProps) =>
+    active &&
+    css`
+      background-color: ${({ theme }) => theme.color.surface3};
+      color: ${({ theme }) => theme.color.text2};
+    `}
+
+  ${({ active = false, reactive = false }) =>
+    active &&
+    !reactive &&
+    css`
+      cursor: default;
+    `}
+
+  @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {
+    padding: 5px 16px;
+  }
+`
+
+const padding0Css = css`
+  padding: 0;
+
+  @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {
+    padding: 0;
+  }
+`
+
+const ButtonLike = styled.button`
+  ${buttonCss}
+`
+
+const PlainElement = styled.span`
+  ${buttonCss}
+`
+
+const StyledButtonLike = styled(ButtonLike)<{
+  buttonWidth: number | undefined
+  buttonHeight: number | undefined
+}>`
+  ${padding0Css};
+  ${(p) => p.buttonWidth !== undefined && `width: ${p.buttonWidth}px;`}
+  ${(p) => p.buttonHeight !== undefined && `height: ${p.buttonHeight}px;`}
+`
+
+const Filter = styled.div`
+  display: flex;
+`
+
+export default Filter

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

@@ -0,0 +1,19 @@
+import React from 'react'
+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',
+}

package/src/components/HintText/index.tsx

@@ -0,0 +1,95 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+import { theme } from '../../styled'
+import InfoIcon from '../icons/InfoIcon'
+import { maxWidth } from '@charcoal-ui/utils'
+
+type Context = 'page' | 'section'
+interface Props {
+  children: React.ReactNode
+  context: Context
+  className?: string
+}
+
+export default function HintText({ children, context, className }: Props) {
+  return (
+    <Container className={className} context={context}>
+      <IconWrap>
+        <InfoIcon />
+      </IconWrap>
+      <Text>{children}</Text>
+    </Container>
+  )
+}
+
+const Container = styled.div.attrs<Props, ReturnType<typeof styledProps>>(
+  styledProps
+)`
+  ${(p) =>
+    theme((o) => [
+      o.bg.surface3,
+      o.borderRadius(8),
+      o.padding.vertical(p.default.vertical),
+      o.padding.horizontal(p.default.horizontal),
+    ])}
+
+  @media ${({ theme: t }) => maxWidth(t.breakpoint.screen1)} {
+    ${(p) =>
+      theme((o) => [
+        o.padding.vertical(p.screen1.vertical),
+        o.padding.horizontal(p.screen1.horizontal),
+      ])}
+  }
+
+  display: flex;
+  align-items: flex-start;
+  ${(p) =>
+    p.context === 'page' &&
+    css`
+      justify-content: center;
+    `}
+`
+
+const IconWrap = styled.div`
+  display: flex;
+  align-items: center;
+  color: ${(p) => p.theme.color.text4};
+  height: 22px;
+  margin: -4px 4px -4px 0;
+`
+
+const Text = styled.p`
+  ${theme((o) => [o.font.text2, o.typography(14)])}
+  margin: 0;
+`
+
+function styledProps(props: Props) {
+  return { ...props, ...contextToProps(props.context) }
+}
+
+function contextToProps(context: Context) {
+  switch (context) {
+    case 'page':
+      return {
+        default: {
+          horizontal: 40,
+          vertical: 24,
+        },
+        screen1: {
+          horizontal: 16,
+          vertical: 16,
+        },
+      } as const
+    case 'section':
+      return {
+        default: {
+          horizontal: 16,
+          vertical: 16,
+        },
+        screen1: {
+          horizontal: 16,
+          vertical: 16,
+        },
+      } as const
+  }
+}

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

@@ -0,0 +1,121 @@
+import React from 'react'
+import styled from 'styled-components'
+import { dummyText } from '../../misc/storybook-helper'
+import { theme } from '../../styled'
+import LeftMenu from '../LeftMenu'
+import Layout, { LayoutItem, LayoutItemBody, LayoutItemHeader } from '.'
+
+export default {
+  title: 'Sandbox/Layout',
+  component: Layout,
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+
+export function Basic() {
+  const menu = <DummyMenu />
+  const header = <>Header</>
+  return (
+    <Layout menu={menu} header={header}>
+      <DummyCard span={3}>Span 3</DummyCard>
+      <DummyCard span={2}>Span 2</DummyCard>
+      <DummyCard span={1}>Span 1</DummyCard>
+      <DummyCard span={1}>Span 1</DummyCard>
+      <DummyCard span={1}>Span 1</DummyCard>
+      <DummyCard span={1}>Span 1</DummyCard>
+    </Layout>
+  )
+}
+
+export function NoMenu() {
+  const header = <>Header</>
+  return (
+    <Layout header={header}>
+      <DummyCard span={3}>Span 3</DummyCard>
+      <DummyCard span={2}>Span 2</DummyCard>
+      <DummyCard span={1}>Span 1</DummyCard>
+      <DummyCard span={1}>Span 1</DummyCard>
+      <DummyCard span={1}>Span 1</DummyCard>
+      <DummyCard span={1}>Span 1</DummyCard>
+    </Layout>
+  )
+}
+
+export function Wide() {
+  const menu = <DummyMenu />
+  const header = <>Header</>
+  return (
+    <Layout menu={menu} header={header} wide>
+      <LayoutItem span={3}>
+        <LayoutItemHeader>Wide</LayoutItemHeader>
+        <LayoutItemBody>
+          <Dummy>Hello, Flexible Grid Layout!</Dummy>
+        </LayoutItemBody>
+      </LayoutItem>
+    </Layout>
+  )
+}
+
+export function Center() {
+  const header = <>Header</>
+  return (
+    <Layout header={header} wide center>
+      <LayoutItem span={3}>
+        <LayoutItemHeader>Center</LayoutItemHeader>
+        <LayoutItemBody>
+          <Dummy>Hello, Flexible Grid Layout!</Dummy>
+        </LayoutItemBody>
+      </LayoutItem>
+    </Layout>
+  )
+}
+
+function DummyCard({
+  span,
+  children,
+}: {
+  span: number
+  children: React.ReactNode
+}) {
+  return (
+    <LayoutItem span={span}>
+      <LayoutItemHeader>Dummy</LayoutItemHeader>
+      <LayoutItemBody>
+        <Dummy>{children}</Dummy>
+      </LayoutItemBody>
+    </LayoutItem>
+  )
+}
+
+const Dummy = styled.div`
+  ${theme((o) => o.height.column(2))}
+
+  ${dummyText}
+`
+
+function DummyMenu() {
+  const links = [
+    {
+      id: 'hello',
+      text: 'Hello',
+      to: '#hello',
+    },
+    {
+      id: 'world',
+      text: 'World',
+      to: '#world',
+    },
+    {
+      id: 'dummy',
+      text: 'Dummy',
+      to: '#dummy',
+    },
+    {
+      id: 'menu',
+      text: 'Menu',
+      to: '#menu',
+    },
+  ] as const
+  return <LeftMenu links={links} active="hello" />
+}