@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1 → 2.1.0

package/src/components/common/desk/ActionReader.tsx

@@ -1,270 +1,270 @@
-import type { ReactNode } from 'react'
-import { styled } from 'styled-components'
-import { Button } from '../buttons/Button.js'
-
-export interface ActionReaderAction {
-  label: string
-  onClick: () => void
-  variant?: 'primary' | 'subtle' | 'ghost'
-  disabled?: boolean
-}
-
-export interface ActionReaderProps {
-  kicker?: ReactNode
-  title: ReactNode
-  subtitle?: ReactNode
-  mainTitle?: ReactNode
-  main?: ReactNode
-  rationale?: ReactNode
-  original?: ReactNode
-  actions?: readonly ActionReaderAction[]
-  secondaryActions?: readonly ActionReaderAction[]
-  onClose?: () => void
-}
-
-const ReaderRoot = styled.div`
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  padding: clamp(34px, 5vw, 72px) clamp(34px, 7vw, 128px) 56px;
-`
-
-const ReaderPage = styled.article`
-  display: grid;
-  grid-template-columns: minmax(0, 760px) minmax(220px, 280px);
-  gap: clamp(34px, 5vw, 72px);
-  align-items: start;
-  width: min(1180px, 100%);
-  margin: 0;
-
-  @media (max-width: 860px) {
-    grid-template-columns: minmax(0, 1fr);
-  }
-`
-
-const MainColumn = styled.div`
-  display: grid;
-  gap: 30px;
-  min-width: 0;
-`
-
-const Header = styled.header`
-  display: block;
-`
-
-const HeaderCopy = styled.div`
-  display: grid;
-  gap: 10px;
-  min-width: 0;
-`
-
-const Kicker = styled.div`
-  color: var(--action-reader-faint, var(--platform-colors-text-tertiary));
-  font-size: 10px;
-  font-weight: 800;
-  letter-spacing: 0.07em;
-  text-transform: uppercase;
-`
-
-const Title = styled.h1`
-  margin: 0;
-  color: var(--action-reader-ink, var(--platform-colors-text));
-  font-size: clamp(34px, 4vw, 52px);
-  line-height: 1.12;
-  letter-spacing: 0;
-`
-
-const Subtitle = styled.p`
-  max-width: 70ch;
-  margin: 0;
-  color: var(--action-reader-muted, var(--platform-colors-text-secondary));
-  font-size: 16px;
-  line-height: 1.55;
-`
-
-const CloseButton = styled.button`
-  justify-self: end;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: var(--action-reader-faint, var(--platform-colors-text-tertiary));
-  font: inherit;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  cursor: pointer;
-
-  &:hover {
-    color: var(--action-reader-ink, var(--platform-colors-text));
-  }
-`
-
-const MainPanel = styled.section`
-  display: grid;
-  gap: 16px;
-  max-width: 76ch;
-  padding: 0 0 0 22px;
-  border-left: 2px solid rgb(46 51 56 / 18%);
-`
-
-const PanelTitle = styled.h2`
-  margin: 0;
-  color: var(--action-reader-ink, var(--platform-colors-text));
-  font-size: 18px;
-  line-height: 1.3;
-`
-
-const MainBody = styled.div`
-  color: var(--action-reader-ink, var(--platform-colors-text));
-  font-size: 18px;
-  line-height: 1.7;
-  white-space: pre-wrap;
-`
-
-const Rationale = styled.aside`
-  padding: 14px 0 0;
-  border-top: 1px solid
-    var(--action-reader-border, var(--platform-colors-border));
-  color: var(--action-reader-muted, var(--platform-colors-text-secondary));
-  font-size: 13px;
-  line-height: 1.65;
-`
-
-const ButtonRow = styled.div`
-  display: flex;
-  align-items: stretch;
-  flex-direction: column;
-  gap: 9px;
-`
-
-const ActionStack = styled.div`
-  display: grid;
-  gap: 9px;
-`
-
-const DecisionRail = styled.aside`
-  position: sticky;
-  top: 28px;
-  display: grid;
-  gap: 22px;
-  min-width: 0;
-  padding-left: 24px;
-  border-left: 1px solid
-    var(--action-reader-border, var(--platform-colors-border));
-
-  @media (max-width: 860px) {
-    position: static;
-    padding: 22px 0 0;
-    border-top: 1px solid
-      var(--action-reader-border, var(--platform-colors-border));
-    border-left: 0;
-  }
-`
-
-const Original = styled.details`
-  max-width: 76ch;
-  color: var(--action-reader-muted, var(--platform-colors-text-secondary));
-  font-size: 13px;
-  line-height: 1.6;
-
-  summary {
-    color: var(--action-reader-faint, var(--platform-colors-text-tertiary));
-    cursor: pointer;
-    font-weight: 700;
-  }
-`
-
-const RailSection = styled.div`
-  display: grid;
-  gap: 10px;
-`
-
-const RailLabel = styled.div`
-  color: var(--action-reader-faint, var(--platform-colors-text-tertiary));
-  font-size: 10px;
-  font-weight: 800;
-  letter-spacing: 0.07em;
-  text-transform: uppercase;
-`
-
-function renderActions(actions: readonly ActionReaderAction[] | undefined) {
-  if (!actions?.length) return null
-  return (
-    <ButtonRow>
-      {actions.map(action => (
-        <Button
-          key={action.label}
-          type="button"
-          size="sm"
-          variant={action.variant ?? 'subtle'}
-          disabled={action.disabled}
-          onClick={action.onClick}
-        >
-          {action.label}
-        </Button>
-      ))}
-    </ButtonRow>
-  )
-}
-
-export function ActionReader({
-  kicker,
-  title,
-  subtitle,
-  mainTitle,
-  main,
-  rationale,
-  original,
-  actions,
-  secondaryActions,
-  onClose,
-}: ActionReaderProps): React.ReactElement {
-  return (
-    <ReaderRoot>
-      <ReaderPage>
-        <MainColumn>
-          <Header>
-            <HeaderCopy>
-              {kicker ? <Kicker>{kicker}</Kicker> : null}
-              <Title>{title}</Title>
-              {subtitle ? <Subtitle>{subtitle}</Subtitle> : null}
-            </HeaderCopy>
-          </Header>
-          {main || mainTitle ? (
-            <MainPanel>
-              {mainTitle ? <PanelTitle>{mainTitle}</PanelTitle> : null}
-              {main ? <MainBody>{main}</MainBody> : null}
-            </MainPanel>
-          ) : null}
-          {original ? (
-            <Original>
-              <summary>show original mail</summary>
-              {original}
-            </Original>
-          ) : null}
-        </MainColumn>
-        <DecisionRail>
-          {onClose ? (
-            <CloseButton type="button" onClick={onClose}>
-              esc
-            </CloseButton>
-          ) : null}
-          {rationale ? (
-            <RailSection>
-              <RailLabel>Why</RailLabel>
-              <Rationale>{rationale}</Rationale>
-            </RailSection>
-          ) : null}
-          <RailSection>
-            <RailLabel>Decision</RailLabel>
-            <ActionStack>
-              {renderActions(actions)}
-              {renderActions(secondaryActions)}
-            </ActionStack>
-          </RailSection>
-        </DecisionRail>
-      </ReaderPage>
-    </ReaderRoot>
-  )
-}
+import type { ReactNode } from 'react'
+import { styled } from 'styled-components'
+import { Button } from '../buttons/Button.js'
+
+export interface ActionReaderAction {
+  label: string
+  onClick: () => void
+  variant?: 'primary' | 'subtle' | 'ghost'
+  disabled?: boolean
+}
+
+export interface ActionReaderProps {
+  kicker?: ReactNode
+  title: ReactNode
+  subtitle?: ReactNode
+  mainTitle?: ReactNode
+  main?: ReactNode
+  rationale?: ReactNode
+  original?: ReactNode
+  actions?: readonly ActionReaderAction[]
+  secondaryActions?: readonly ActionReaderAction[]
+  onClose?: () => void
+}
+
+const ReaderRoot = styled.div`
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: clamp(34px, 5vw, 72px) clamp(34px, 7vw, 128px) 56px;
+`
+
+const ReaderPage = styled.article`
+  display: grid;
+  grid-template-columns: minmax(0, 760px) minmax(220px, 280px);
+  gap: clamp(34px, 5vw, 72px);
+  align-items: start;
+  width: min(1180px, 100%);
+  margin: 0;
+
+  @media (max-width: 860px) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+`
+
+const MainColumn = styled.div`
+  display: grid;
+  gap: 30px;
+  min-width: 0;
+`
+
+const Header = styled.header`
+  display: block;
+`
+
+const HeaderCopy = styled.div`
+  display: grid;
+  gap: 10px;
+  min-width: 0;
+`
+
+const Kicker = styled.div`
+  color: var(--action-reader-faint, var(--platform-colors-text-tertiary));
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+`
+
+const Title = styled.h1`
+  margin: 0;
+  color: var(--action-reader-ink, var(--platform-colors-text));
+  font-size: clamp(34px, 4vw, 52px);
+  line-height: 1.12;
+  letter-spacing: 0;
+`
+
+const Subtitle = styled.p`
+  max-width: 70ch;
+  margin: 0;
+  color: var(--action-reader-muted, var(--platform-colors-text-secondary));
+  font-size: 16px;
+  line-height: 1.55;
+`
+
+const CloseButton = styled.button`
+  justify-self: end;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--action-reader-faint, var(--platform-colors-text-tertiary));
+  font: inherit;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--action-reader-ink, var(--platform-colors-text));
+  }
+`
+
+const MainPanel = styled.section`
+  display: grid;
+  gap: 16px;
+  max-width: 76ch;
+  padding: 0 0 0 22px;
+  border-left: 2px solid rgb(46 51 56 / 18%);
+`
+
+const PanelTitle = styled.h2`
+  margin: 0;
+  color: var(--action-reader-ink, var(--platform-colors-text));
+  font-size: 18px;
+  line-height: 1.3;
+`
+
+const MainBody = styled.div`
+  color: var(--action-reader-ink, var(--platform-colors-text));
+  font-size: 18px;
+  line-height: 1.7;
+  white-space: pre-wrap;
+`
+
+const Rationale = styled.aside`
+  padding: 14px 0 0;
+  border-top: 1px solid
+    var(--action-reader-border, var(--platform-colors-border));
+  color: var(--action-reader-muted, var(--platform-colors-text-secondary));
+  font-size: 13px;
+  line-height: 1.65;
+`
+
+const ButtonRow = styled.div`
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+  gap: 9px;
+`
+
+const ActionStack = styled.div`
+  display: grid;
+  gap: 9px;
+`
+
+const DecisionRail = styled.aside`
+  position: sticky;
+  top: 28px;
+  display: grid;
+  gap: 22px;
+  min-width: 0;
+  padding-left: 24px;
+  border-left: 1px solid
+    var(--action-reader-border, var(--platform-colors-border));
+
+  @media (max-width: 860px) {
+    position: static;
+    padding: 22px 0 0;
+    border-top: 1px solid
+      var(--action-reader-border, var(--platform-colors-border));
+    border-left: 0;
+  }
+`
+
+const Original = styled.details`
+  max-width: 76ch;
+  color: var(--action-reader-muted, var(--platform-colors-text-secondary));
+  font-size: 13px;
+  line-height: 1.6;
+
+  summary {
+    color: var(--action-reader-faint, var(--platform-colors-text-tertiary));
+    cursor: pointer;
+    font-weight: 700;
+  }
+`
+
+const RailSection = styled.div`
+  display: grid;
+  gap: 10px;
+`
+
+const RailLabel = styled.div`
+  color: var(--action-reader-faint, var(--platform-colors-text-tertiary));
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+`
+
+function renderActions(actions: readonly ActionReaderAction[] | undefined) {
+  if (!actions?.length) return null
+  return (
+    <ButtonRow>
+      {actions.map(action => (
+        <Button
+          key={action.label}
+          type="button"
+          size="sm"
+          variant={action.variant ?? 'subtle'}
+          disabled={action.disabled}
+          onClick={action.onClick}
+        >
+          {action.label}
+        </Button>
+      ))}
+    </ButtonRow>
+  )
+}
+
+export function ActionReader({
+  kicker,
+  title,
+  subtitle,
+  mainTitle,
+  main,
+  rationale,
+  original,
+  actions,
+  secondaryActions,
+  onClose,
+}: ActionReaderProps): React.ReactElement {
+  return (
+    <ReaderRoot>
+      <ReaderPage>
+        <MainColumn>
+          <Header>
+            <HeaderCopy>
+              {kicker ? <Kicker>{kicker}</Kicker> : null}
+              <Title>{title}</Title>
+              {subtitle ? <Subtitle>{subtitle}</Subtitle> : null}
+            </HeaderCopy>
+          </Header>
+          {main || mainTitle ? (
+            <MainPanel>
+              {mainTitle ? <PanelTitle>{mainTitle}</PanelTitle> : null}
+              {main ? <MainBody>{main}</MainBody> : null}
+            </MainPanel>
+          ) : null}
+          {original ? (
+            <Original>
+              <summary>show original mail</summary>
+              {original}
+            </Original>
+          ) : null}
+        </MainColumn>
+        <DecisionRail>
+          {onClose ? (
+            <CloseButton type="button" onClick={onClose}>
+              esc
+            </CloseButton>
+          ) : null}
+          {rationale ? (
+            <RailSection>
+              <RailLabel>Why</RailLabel>
+              <Rationale>{rationale}</Rationale>
+            </RailSection>
+          ) : null}
+          <RailSection>
+            <RailLabel>Decision</RailLabel>
+            <ActionStack>
+              {renderActions(actions)}
+              {renderActions(secondaryActions)}
+            </ActionStack>
+          </RailSection>
+        </DecisionRail>
+      </ReaderPage>
+    </ReaderRoot>
+  )
+}