@charcoal-ui/react 4.0.0-beta.1 → 4.0.0-beta.12

package/src/components/LoadingSpinner/__snapshots__/LoadingSpinnerIcon.story.storyshot

@@ -1,27 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storybook Tests LoadingSpinnerIcon Icon 1`] = `
-.c0 {
-  width: 1em;
-  height: 1em;
-  border-radius: 1em;
-  background-color: currentColor;
-  -webkit-animation: cNZOgq 1s both ease-out;
-  animation: cNZOgq 1s both ease-out;
-  -webkit-animation-iteration-count: infinite;
-  animation-iteration-count: infinite;
-}
-
-.c0[data-reset-animation] {
-  -webkit-animation: none;
-  animation: none;
-}
-
 <div
   data-dark={false}
 >
   <div
-    className="c0"
+    className="charcoal-loading-spinner-icon"
+    data-once={false}
     role="presentation"
   />
 </div>

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

@@ -1,45 +1,95 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests LoadingSpinner Default 1`] = `
-.c0 {
-  box-sizing: content-box;
-  margin: auto;
-  padding: 16px;
-  border-radius: 8px;
-  font-size: 48px;
-  width: 48px;
-  height: 48px;
-  opacity: 0.84;
-  color: var(--charcoal-text4);
-  background-color: var(--charcoal-background1);
-}
+exports[`Storybook Tests > react/LoadingSpinner > Default 1`] = `
+<div
+  data-dark={false}
+>
+  <div
+    className="charcoal-loading-spinner"
+    data-transparent={false}
+    role="progressbar"
+    style={
+      Object {
+        "--charcoal-loading-spinner-padding": "16px",
+        "--charcoal-loading-spinner-size": "48px",
+      }
+    }
+  >
+    <div
+      className="charcoal-loading-spinner-icon"
+      data-once={false}
+      role="presentation"
+    />
+  </div>
+</div>
+`;
 
-.c1 {
-  width: 1em;
-  height: 1em;
-  border-radius: 1em;
-  background-color: currentColor;
-  -webkit-animation: cNZOgq 1s both ease-out;
-  animation: cNZOgq 1s both ease-out;
-  -webkit-animation-iteration-count: infinite;
-  animation-iteration-count: infinite;
-}
+exports[`Storybook Tests > react/LoadingSpinner > Padding 1`] = `
+<div
+  data-dark={false}
+>
+  <div
+    className="charcoal-loading-spinner"
+    data-transparent={false}
+    role="progressbar"
+    style={
+      Object {
+        "--charcoal-loading-spinner-padding": "24px",
+        "--charcoal-loading-spinner-size": "48px",
+      }
+    }
+  >
+    <div
+      className="charcoal-loading-spinner-icon"
+      data-once={false}
+      role="presentation"
+    />
+  </div>
+</div>
+`;
 
-.c1[data-reset-animation] {
-  -webkit-animation: none;
-  animation: none;
-}
+exports[`Storybook Tests > react/LoadingSpinner > Size 1`] = `
+<div
+  data-dark={false}
+>
+  <div
+    className="charcoal-loading-spinner"
+    data-transparent={false}
+    role="progressbar"
+    style={
+      Object {
+        "--charcoal-loading-spinner-padding": "16px",
+        "--charcoal-loading-spinner-size": "128px",
+      }
+    }
+  >
+    <div
+      className="charcoal-loading-spinner-icon"
+      data-once={false}
+      role="presentation"
+    />
+  </div>
+</div>
+`;
 
+exports[`Storybook Tests > react/LoadingSpinner > Transparent 1`] = `
 <div
   data-dark={false}
 >
   <div
-    className="c0 basic"
+    className="charcoal-loading-spinner"
+    data-transparent={true}
     role="progressbar"
-    size={48}
+    style={
+      Object {
+        "--charcoal-loading-spinner-padding": "16px",
+        "--charcoal-loading-spinner-size": "48px",
+      }
+    }
   >
     <div
-      className="c1"
+      className="charcoal-loading-spinner-icon"
+      data-once={false}
       role="presentation"
     />
   </div>

package/src/components/LoadingSpinner/index.css

@@ -0,0 +1,42 @@
+.charcoal-loading-spinner {
+  box-sizing: content-box;
+  margin: auto;
+  padding: var(--charcoal-loading-spinner-padding);
+  border-radius: 8px;
+  font-size: var(--charcoal-loading-spinner-size);
+  width: var(--charcoal-loading-spinner-size);
+  height: var(--charcoal-loading-spinner-size);
+  opacity: 0.84;
+  color: var(--charcoal-text4);
+  background-color: var(--charcoal-background1);
+}
+.charcoal-loading-spinner[data-transparent='true'] {
+  background-color: var(--charcoal-transparent);
+}
+
+@keyframes charcoal-loading-spinner-icon-scale-out {
+  from {
+    transform: scale(0);
+    opacity: 1;
+  }
+  to {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
+.charcoal-loading-spinner-icon {
+  width: 1em;
+  height: 1em;
+  border-radius: 1em;
+  background-color: currentColor;
+  animation: charcoal-loading-spinner-icon-scale-out 1s both ease-out;
+  animation-iteration-count: infinite;
+}
+
+.charcoal-loading-spinner-icon[data-reset-animation] {
+  animation: none;
+}
+.charcoal-loading-spinner-icon[data-once='true'] {
+  animation-iteration-count: 1;
+}

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

@@ -2,15 +2,26 @@ import { Meta, StoryObj } from '@storybook/react'
 import LoadingSpinner from '.'
 
 export default {
-  title: 'LoadingSpinner',
+  title: 'react/LoadingSpinner',
   component: LoadingSpinner,
-  args: {
-    size: 48,
-    padding: 16,
-    transparent: false,
-    className: 'basic',
-  },
   tags: ['skip-test'],
+  parameters: {
+    layout: 'centered',
+  },
 } as Meta<typeof LoadingSpinner>
 
-export const Default: StoryObj<typeof LoadingSpinner> = {}
+export const Default: StoryObj<typeof LoadingSpinner> = {
+  render: (props) => <LoadingSpinner {...props} />,
+}
+
+export const Transparent: StoryObj<typeof LoadingSpinner> = {
+  render: () => <LoadingSpinner transparent />,
+}
+
+export const Size: StoryObj<typeof LoadingSpinner> = {
+  render: () => <LoadingSpinner size={128} />,
+}
+
+export const Padding: StoryObj<typeof LoadingSpinner> = {
+  render: () => <LoadingSpinner padding={24} />,
+}

package/src/components/LoadingSpinner/index.tsx

@@ -1,5 +1,7 @@
 import { forwardRef, useImperativeHandle, useRef, memo } from 'react'
-import styled, { keyframes } from 'styled-components'
+import { useClassNames } from '../../_lib/useClassNames'
+
+import './index.css'
 
 export type LoadingSpinnerProps = {
   readonly size?: number
@@ -10,68 +12,33 @@ export type LoadingSpinnerProps = {
 
 const LoadingSpinner = forwardRef<HTMLDivElement, LoadingSpinnerProps>(
   function LoadingSpinnerInner(
-    { size = 48, padding = 16, transparent = false, className },
+    { size = 48, padding = 16, transparent = false, ...props },
     ref
   ) {
+    const classNames = useClassNames(
+      'charcoal-loading-spinner',
+      props.className
+    )
+
     return (
-      <LoadingSpinnerRoot
-        size={size}
-        padding={padding}
-        transparent={transparent}
-        className={className}
+      <div
+        role="progressbar"
+        style={{
+          '--charcoal-loading-spinner-size': `${size}px`,
+          '--charcoal-loading-spinner-padding': `${padding}px`,
+        }}
+        data-transparent={transparent}
+        className={classNames}
         ref={ref}
       >
         <LoadingSpinnerIcon />
-      </LoadingSpinnerRoot>
+      </div>
     )
   }
 )
 
 export default memo(LoadingSpinner)
 
-const LoadingSpinnerRoot = styled.div.attrs({ role: 'progressbar' })<{
-  size: number
-  padding: number
-  transparent: boolean
-}>`
-  box-sizing: content-box;
-  margin: auto;
-  padding: ${(props) => props.padding}px;
-  border-radius: 8px;
-  font-size: ${(props) => props.size}px;
-  width: ${(props) => props.size}px;
-  height: ${(props) => props.size}px;
-  opacity: 0.84;
-  color: var(--charcoal-text4);
-  background-color: ${({ transparent }) =>
-    `var(--charcoal-${transparent ? 'transparent' : 'background1'})`};
-`
-
-const scaleOut = keyframes`
-  from {
-    transform: scale(0);
-    opacity: 1;
-  }
-
-  to {
-    transform: scale(1);
-    opacity: 0;
-  }
-`
-
-const Icon = styled.div.attrs({ role: 'presentation' })<{ once: boolean }>`
-  width: 1em;
-  height: 1em;
-  border-radius: 1em;
-  background-color: currentColor;
-  animation: ${scaleOut} 1s both ease-out;
-  animation-iteration-count: ${(p) => (p.once ? 1 : 'infinite')};
-
-  &[data-reset-animation] {
-    animation: none;
-  }
-`
-
 type Props = {
   once?: boolean
 }
@@ -96,6 +63,13 @@ export const LoadingSpinnerIcon = forwardRef<LoadingSpinnerIconHandler, Props>(
       },
     }))
 
-    return <Icon ref={iconRef} once={once} />
+    return (
+      <div
+        role="presentation"
+        ref={iconRef}
+        data-once={once}
+        className="charcoal-loading-spinner-icon"
+      />
+    )
   }
 )

package/src/components/Modal/Dialog/index.css

@@ -0,0 +1,44 @@
+.charcoal-modal-dialog {
+  margin: auto;
+  position: relative;
+  height: fit-content;
+  width: 440px;
+
+  background-color: var(--charcoal-surface1);
+  border-radius: 24px;
+}
+
+.charcoal-modal-dialog[data-size='S'] {
+  width: 336px;
+}
+
+.charcoal-modal-dialog[data-size='M'] {
+  width: 440px;
+}
+
+.charcoal-modal-dialog[data-size='L'] {
+  width: 648px;
+}
+
+@media (max-width: 743px) {
+  .charcoal-modal-dialog {
+    max-width: 440px;
+    width: calc(100% - 48px);
+  }
+
+  .charcoal-modal-dialog[data-bottom-sheet='true'],
+  .charcoal-modal-dialog[data-bottom-sheet='full'] {
+    max-width: unset;
+    width: 100%;
+    border-radius: 0;
+    margin: auto 0 0 0;
+  }
+
+  .charcoal-modal-dialog[data-bottom-sheet='full'] {
+    min-height: 100%;
+  }
+}
+
+.charcoal-modal-dialog:focus {
+  outline: none;
+}

package/src/components/Modal/Dialog/index.tsx

@@ -1,18 +1,19 @@
 import { forwardRef } from 'react'
 import * as React from 'react'
-import styled, { css } from 'styled-components'
 import { useDialog } from '@react-aria/dialog'
-import { columnSystem, COLUMN_UNIT, GUTTER_UNIT } from '@charcoal-ui/foundation'
-import { unreachable } from '../../../_lib'
-import { maxWidth } from '@charcoal-ui/utils'
-import { animated } from 'react-spring'
 import { useForwardedRef } from '../../../_lib/useForwardedRef'
 import { Size, BottomSheet } from '..'
 
+import './index.css'
+import { useClassNames } from '../../../_lib/useClassNames'
+
 export const Dialog = forwardRef<
   HTMLDivElement,
-  React.ComponentProps<typeof AnimatedStyledDialogDiv>
->(function Dialog(props, forwardRef) {
+  React.ComponentPropsWithoutRef<'div'> & {
+    size: Size
+    bottomSheet: BottomSheet
+  }
+>(function Dialog({ size, bottomSheet, className, ...props }, forwardRef) {
   const ref = useForwardedRef(forwardRef)
   const { dialogProps } = useDialog(
     {
@@ -21,62 +22,18 @@ export const Dialog = forwardRef<
     ref
   )
 
+  const classNames = useClassNames('charcoal-modal-dialog', className)
   return (
-    <AnimatedStyledDialogDiv
-      {...props}
+    <div
+      className={classNames}
       role={dialogProps.role}
+      data-bottom-sheet={bottomSheet}
       tabIndex={dialogProps.tabIndex}
       aria-labelledby={dialogProps['aria-labelledby']}
       onBlur={dialogProps.onBlur}
+      data-size={size}
       ref={ref}
+      {...props}
     />
   )
 })
-
-const AnimatedStyledDialogDiv = animated(styled.div<{
-  size: Size
-  bottomSheet: BottomSheet
-}>`
-  margin: auto;
-  position: relative;
-  height: fit-content;
-  width: ${(p) => {
-    switch (p.size) {
-      case 'S': {
-        return columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
-      }
-      case 'M': {
-        return columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
-      }
-      case 'L': {
-        return columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
-      }
-      default: {
-        return unreachable(p.size)
-      }
-    }
-  }}px;
-
-  background-color: var(--charcoal-surface1);
-  border-radius: 24px;
-
-  @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {
-    max-width: 440px;
-    width: calc(100% - 48px);
-    ${(p) =>
-      p.bottomSheet !== false &&
-      css`
-        max-width: unset;
-        width: 100%;
-        border-radius: 0;
-        margin: auto 0 0 0;
-        ${p.bottomSheet === 'full' &&
-        css`
-          min-height: 100%;
-        `}
-      `}
-  }
-  :focus {
-    outline: none;
-  }
-`)

package/src/components/Modal/ModalPlumbing.css

@@ -0,0 +1,40 @@
+.charcoal-modal-header-root {
+  height: 64px;
+  display: grid;
+  align-content: center;
+  justify-content: center;
+}
+
+@media (max-width: 743px) {
+  .charcoal-modal-header-root[data-bottom-sheet='true'],
+  .charcoal-modal-header-root[data-bottom-sheet='full'] {
+    height: 48px;
+  }
+}
+
+.charcoal-modal-header-title {
+  color: var(--charcoal-text1);
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: bold;
+  display: flow-root;
+}
+
+.charcoal-modal-align {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.charcoal-modal-body {
+  padding-bottom: 40px;
+}
+
+.charcoal-modal-buttons {
+  display: grid;
+  grid-auto-flow: row;
+  grid-row-gap: 8px;
+
+  padding-top: 16px;
+  padding-left: 16px;
+  padding-right: 16px;
+}

package/src/components/Modal/ModalPlumbing.tsx

@@ -1,71 +1,23 @@
-import { BottomSheet, ModalContext, ModalTitle } from '.'
-import styled, { css } from 'styled-components'
+import { ModalContext } from '.'
 import { useContext } from 'react'
-import { maxWidth } from '@charcoal-ui/utils'
+
+import './ModalPlumbing.css'
+import { createDivComponent } from '../../_lib/createDivComponent'
 
 export function ModalHeader() {
   const modalCtx = useContext(ModalContext)
   return (
-    <ModalHeaderRoot $bottomSheet={modalCtx.bottomSheet}>
-      <StyledModalTitle />
-    </ModalHeaderRoot>
+    <div
+      className="charcoal-modal-header-root"
+      data-bottom-sheet={modalCtx.bottomSheet}
+    >
+      <div className="charcoal-modal-header-title">{modalCtx.title}</div>
+    </div>
   )
 }
 
-const ModalHeaderRoot = styled.div<{
-  $bottomSheet: BottomSheet
-}>`
-  height: 64px;
-  display: grid;
-  align-content: center;
-  justify-content: center;
-  @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {
-    ${(p) =>
-      p.$bottomSheet !== false &&
-      css`
-        height: 48px;
-      `}
-  }
-`
-
-const StyledModalTitle = styled(ModalTitle)`
-  color: var(--charcoal-text1);
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: bold;
-  display: flow-root;
-
-  &::before {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-top: -4px;
-  }
-  &::after {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-bottom: -4px;
-  }
-`
-
-export const ModalAlign = styled.div`
-  padding-left: 16px;
-  padding-right: 16px;
-`
-
-export const ModalBody = styled.div`
-  padding-bottom: 40px;
-`
+export const ModalAlign = createDivComponent('charcoal-modal-align')
 
-export const ModalButtons = styled.div`
-  display: grid;
-  grid-auto-flow: row;
-  grid-row-gap: 8px;
+export const ModalBody = createDivComponent('charcoal-modal-body')
 
-  padding-top: 16px;
-  padding-left: 16px;
-  padding-right: 16px;
-`
+export const ModalButtons = createDivComponent('charcoal-modal-buttons')