From 4d4095d4b901fac78d2760533e7d022a0afb2129 Mon Sep 17 00:00:00 2001 From: Alexandra Goff Date: Wed, 20 Nov 2024 16:41:33 -0700 Subject: [PATCH] fix: caption in Figure supports React node --- packages/epo-react-lib/package.json | 2 +- .../src/atomic/Figure/Figure.stories.tsx | 11 +++- .../src/atomic/Figure/Figure.tsx | 50 ---------------- .../epo-react-lib/src/atomic/Figure/index.ts | 1 - .../epo-react-lib/src/atomic/Figure/index.tsx | 58 +++++++++++++++++++ .../epo-react-lib/src/atomic/Figure/styles.ts | 5 +- packages/epo-react-lib/src/index.ts | 2 +- .../src/styles/css/global/variables.css | 8 +++ packages/epo-react-lib/vite.config.mts | 1 - .../dist/web/legacy/palette/index.cjs | 2 +- .../dist/web/legacy/palette/index.css | 2 +- .../dist/web/legacy/palette/index.d.ts | 2 +- .../dist/web/legacy/palette/index.js | 2 +- .../dist/web/legacy/tokens/index.cjs | 2 +- .../dist/web/legacy/tokens/index.css | 2 +- .../dist/web/legacy/tokens/index.d.ts | 2 +- .../dist/web/legacy/tokens/index.js | 2 +- .../dist/web/rubin/index.cjs | 3 +- .../dist/web/rubin/index.css | 3 +- .../dist/web/rubin/index.d.ts | 3 +- .../dist/web/rubin/index.js | 3 +- packages/epo-style-dictionary/package.json | 2 +- .../src/brand/rubin/page.json | 5 ++ 23 files changed, 100 insertions(+), 73 deletions(-) delete mode 100644 packages/epo-react-lib/src/atomic/Figure/Figure.tsx delete mode 100644 packages/epo-react-lib/src/atomic/Figure/index.ts create mode 100644 packages/epo-react-lib/src/atomic/Figure/index.tsx diff --git a/packages/epo-react-lib/package.json b/packages/epo-react-lib/package.json index 873fbfdd..c1fda619 100644 --- a/packages/epo-react-lib/package.json +++ b/packages/epo-react-lib/package.json @@ -75,7 +75,7 @@ "@babel/preset-env": "^7.19.1", "@babel/preset-react": "^7.22.5", "@babel/preset-typescript": "^7.18.6", - "@rubin-epo/epo-style-dictionary": "0.2.0", + "@rubin-epo/epo-style-dictionary": "0.2.1", "@rubin-epo/eslint-config-react": "^1.0.0-beta", "@semantic-release/github": "^10.1.7", "@semantic-release/npm": "^12.0.1", diff --git a/packages/epo-react-lib/src/atomic/Figure/Figure.stories.tsx b/packages/epo-react-lib/src/atomic/Figure/Figure.stories.tsx index cf9cce66..0e9bf738 100644 --- a/packages/epo-react-lib/src/atomic/Figure/Figure.stories.tsx +++ b/packages/epo-react-lib/src/atomic/Figure/Figure.stories.tsx @@ -3,6 +3,7 @@ import { children } from "@/storybook/utilities/argTypes"; import Figure from "."; import Image from "../Image"; +import { generateCantoSrcSet } from "@/storybook/utilities/helpers"; const meta: Meta = { component: Figure, @@ -32,11 +33,15 @@ export const VerticalLayout: StoryObj = { children: ( ), diff --git a/packages/epo-react-lib/src/atomic/Figure/Figure.tsx b/packages/epo-react-lib/src/atomic/Figure/Figure.tsx deleted file mode 100644 index 1e5da095..00000000 --- a/packages/epo-react-lib/src/atomic/Figure/Figure.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { FunctionComponent, PropsWithChildren } from "react"; -import * as Styled from "./styles"; -import ConditionalWrapper from "@/utils/ConditionalWrapper"; - -export interface FigureProps { - layout?: "horizontal" | "vertical"; - caption?: string; - withBackground?: boolean; - className?: string; -} - -const Figure: FunctionComponent> = ({ - children, - caption, - layout = "vertical", - withBackground, - className, -}) => ( - - ( - {children} - )} - > - {children} - - {caption && ( - - )} - -); - -Figure.displayName = "Atomic.Figure"; - -export default Figure; diff --git a/packages/epo-react-lib/src/atomic/Figure/index.ts b/packages/epo-react-lib/src/atomic/Figure/index.ts deleted file mode 100644 index 5c2c6218..00000000 --- a/packages/epo-react-lib/src/atomic/Figure/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./Figure"; diff --git a/packages/epo-react-lib/src/atomic/Figure/index.tsx b/packages/epo-react-lib/src/atomic/Figure/index.tsx new file mode 100644 index 00000000..7554dda3 --- /dev/null +++ b/packages/epo-react-lib/src/atomic/Figure/index.tsx @@ -0,0 +1,58 @@ +import { FunctionComponent, PropsWithChildren, ReactNode } from "react"; +import ConditionalWrapper from "@/utils/ConditionalWrapper"; +import * as Styled from "./styles"; + +export interface FigureProps { + layout?: "horizontal" | "vertical"; + caption?: ReactNode; + withBackground?: boolean; + className?: string; +} + +const Figure: FunctionComponent> = ({ + children, + caption, + layout = "vertical", + withBackground, + className, +}) => { + const isTextCaption = typeof caption === "string"; + const hasCaption = !!caption; + return ( + + ( + {children} + )} + > + {children} + + {isTextCaption && ( + + )} + {hasCaption && !isTextCaption && ( + {caption} + )} + + ); +}; + +Figure.displayName = "Atomic.Figure"; + +export default Figure; diff --git a/packages/epo-react-lib/src/atomic/Figure/styles.ts b/packages/epo-react-lib/src/atomic/Figure/styles.ts index 3c4a6e41..757de1be 100644 --- a/packages/epo-react-lib/src/atomic/Figure/styles.ts +++ b/packages/epo-react-lib/src/atomic/Figure/styles.ts @@ -1,9 +1,8 @@ import styled from "styled-components"; -import { ptToEm } from "@/styles/utils"; import { BREAK_PHABLET } from "@/styles/abstracts"; export const Figure = styled.figure` - --figcaption-gap: calc(var(--figure-padding, 20px) * 0.75); + --figcaption-gap: var(--figure-padding, var(--size-spacing-s, 1rem)); background-color: var(--figure-background-color); padding: var(--figure-padding); @@ -20,7 +19,7 @@ export const Figure = styled.figure` `; export const FigCaption = styled.figcaption` - font-size: ${ptToEm("14pt")}; + font-size: var(--size-font-14-14, 0.875rem); line-height: 1.428; &[data-layout="vertical"] { diff --git a/packages/epo-react-lib/src/index.ts b/packages/epo-react-lib/src/index.ts index 9eb4badb..c0f5d7b2 100644 --- a/packages/epo-react-lib/src/index.ts +++ b/packages/epo-react-lib/src/index.ts @@ -10,7 +10,7 @@ export { default as CircularLoader } from "@/atomic/CircularLoader"; export { default as ColorSwatch } from "@/atomic/ColorSwatch"; export { default as ExpandToggle } from "@/atomic/ExpandToggle"; export { default as ExternalLink } from "@/atomic/ExternalLink"; -export { default as Figure } from "@/atomic/Figure"; +export { default as Figure, type FigureProps } from "@/atomic/Figure"; export { type ImageProps, type ImageShape, diff --git a/packages/epo-react-lib/src/styles/css/global/variables.css b/packages/epo-react-lib/src/styles/css/global/variables.css index aa525822..13bcdb30 100644 --- a/packages/epo-react-lib/src/styles/css/global/variables.css +++ b/packages/epo-react-lib/src/styles/css/global/variables.css @@ -3,6 +3,14 @@ @import "@rubin-epo/epo-style-dictionary/rubin.css"; :root { + @utopia clamps({ + pairs: [ + [14, 14] + ], + prefix: "size-font", + relativeTo: "viewport-width", + }); + @utopia clamps({ pairs: [ [16, 20] diff --git a/packages/epo-react-lib/vite.config.mts b/packages/epo-react-lib/vite.config.mts index 756b8c6f..09f884ac 100644 --- a/packages/epo-react-lib/vite.config.mts +++ b/packages/epo-react-lib/vite.config.mts @@ -31,7 +31,6 @@ const entry = { ColorSwatch: resolve(__dirname, "src/atomic/ColorSwatch/ColorSwatch.tsx"), ExpandToggle: resolve(__dirname, "src/atomic/ExpandToggle/ExpandToggle.tsx"), ExternalLink: resolve(__dirname, "src/atomic/ExternalLink/ExternalLink.tsx"), - Figure: resolve(__dirname, "src/atomic/Figure/Figure.tsx"), Link: resolve(__dirname, "src/atomic/Link/Link.tsx"), MixedLink: resolve(__dirname, "src/atomic/MixedLink/MixedLink.tsx"), ProgressBar: resolve(__dirname, "src/atomic/Progress/Bar/ProgressBar.tsx"), diff --git a/packages/epo-style-dictionary/dist/web/legacy/palette/index.cjs b/packages/epo-style-dictionary/dist/web/legacy/palette/index.cjs index ce021973..0c2a0cbf 100644 --- a/packages/epo-style-dictionary/dist/web/legacy/palette/index.cjs +++ b/packages/epo-style-dictionary/dist/web/legacy/palette/index.cjs @@ -3,7 +3,7 @@ * Avoid using these * * Do not edit directly - * Generated on Wed, 04 Sep 2024 18:37:30 GMT + * Generated on Wed, 20 Nov 2024 23:25:53 GMT */ module.exports = { diff --git a/packages/epo-style-dictionary/dist/web/legacy/palette/index.css b/packages/epo-style-dictionary/dist/web/legacy/palette/index.css index c930ec70..0e83e2e6 100644 --- a/packages/epo-style-dictionary/dist/web/legacy/palette/index.css +++ b/packages/epo-style-dictionary/dist/web/legacy/palette/index.css @@ -3,7 +3,7 @@ * Avoid using these * * Do not edit directly - * Generated on Wed, 04 Sep 2024 18:37:30 GMT + * Generated on Wed, 20 Nov 2024 23:25:53 GMT */ :root { diff --git a/packages/epo-style-dictionary/dist/web/legacy/palette/index.d.ts b/packages/epo-style-dictionary/dist/web/legacy/palette/index.d.ts index d2b32c80..7eab5fd2 100644 --- a/packages/epo-style-dictionary/dist/web/legacy/palette/index.d.ts +++ b/packages/epo-style-dictionary/dist/web/legacy/palette/index.d.ts @@ -3,7 +3,7 @@ * Avoid using these * * Do not edit directly - * Generated on Wed, 04 Sep 2024 18:37:30 GMT + * Generated on Wed, 20 Nov 2024 23:25:53 GMT */ export const white : string; diff --git a/packages/epo-style-dictionary/dist/web/legacy/palette/index.js b/packages/epo-style-dictionary/dist/web/legacy/palette/index.js index c418ead5..8ff51895 100644 --- a/packages/epo-style-dictionary/dist/web/legacy/palette/index.js +++ b/packages/epo-style-dictionary/dist/web/legacy/palette/index.js @@ -3,7 +3,7 @@ * Avoid using these * * Do not edit directly - * Generated on Wed, 04 Sep 2024 18:37:30 GMT + * Generated on Wed, 20 Nov 2024 23:25:53 GMT */ export const white = "#ffffff"; diff --git a/packages/epo-style-dictionary/dist/web/legacy/tokens/index.cjs b/packages/epo-style-dictionary/dist/web/legacy/tokens/index.cjs index 91dfbacc..8be6cf56 100644 --- a/packages/epo-style-dictionary/dist/web/legacy/tokens/index.cjs +++ b/packages/epo-style-dictionary/dist/web/legacy/tokens/index.cjs @@ -3,7 +3,7 @@ * Avoid using these * * Do not edit directly - * Generated on Wed, 04 Sep 2024 18:37:30 GMT + * Generated on Wed, 20 Nov 2024 23:25:53 GMT */ module.exports = { diff --git a/packages/epo-style-dictionary/dist/web/legacy/tokens/index.css b/packages/epo-style-dictionary/dist/web/legacy/tokens/index.css index 7c6713be..610d0f7e 100644 --- a/packages/epo-style-dictionary/dist/web/legacy/tokens/index.css +++ b/packages/epo-style-dictionary/dist/web/legacy/tokens/index.css @@ -3,7 +3,7 @@ * Avoid using these * * Do not edit directly - * Generated on Wed, 04 Sep 2024 18:37:30 GMT + * Generated on Wed, 20 Nov 2024 23:25:53 GMT */ :root { diff --git a/packages/epo-style-dictionary/dist/web/legacy/tokens/index.d.ts b/packages/epo-style-dictionary/dist/web/legacy/tokens/index.d.ts index 56686768..1b04b83f 100644 --- a/packages/epo-style-dictionary/dist/web/legacy/tokens/index.d.ts +++ b/packages/epo-style-dictionary/dist/web/legacy/tokens/index.d.ts @@ -3,7 +3,7 @@ * Avoid using these * * Do not edit directly - * Generated on Wed, 04 Sep 2024 18:37:30 GMT + * Generated on Wed, 20 Nov 2024 23:25:53 GMT */ export const FONT_STACK_BASE : string; diff --git a/packages/epo-style-dictionary/dist/web/legacy/tokens/index.js b/packages/epo-style-dictionary/dist/web/legacy/tokens/index.js index 8335693f..03535232 100644 --- a/packages/epo-style-dictionary/dist/web/legacy/tokens/index.js +++ b/packages/epo-style-dictionary/dist/web/legacy/tokens/index.js @@ -3,7 +3,7 @@ * Avoid using these * * Do not edit directly - * Generated on Wed, 04 Sep 2024 18:37:30 GMT + * Generated on Wed, 20 Nov 2024 23:25:53 GMT */ export const FONT_STACK_BASE = "'Source Sans Pro', 'Helvetica Neue', Helvetica, 'Arial Black', Arial, sans-serif, system-ui"; diff --git a/packages/epo-style-dictionary/dist/web/rubin/index.cjs b/packages/epo-style-dictionary/dist/web/rubin/index.cjs index 7eab92d1..259f52a2 100644 --- a/packages/epo-style-dictionary/dist/web/rubin/index.cjs +++ b/packages/epo-style-dictionary/dist/web/rubin/index.cjs @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Wed, 04 Sep 2024 18:37:30 GMT + * Generated on Wed, 20 Nov 2024 23:25:53 GMT */ module.exports = { @@ -24,6 +24,7 @@ module.exports = { "COLOR_BACKGROUND_BUTTON_LINK_INACTIVE": "rgba(0, 0, 0, 0)", "COLOR_BACKGROUND_PAGE_PRIMARY": "#ffffff", "COLOR_BACKGROUND_PAGE_INVERT": "#000000", + "COLOR_BACKGROUND_TILE_LIGHT": "#f5f5f5", "COLOR_BORDER_BUTTON_PRIMARY": "rgba(0, 0, 0, 0)", "COLOR_BORDER_BUTTON_SECONDARY": "rgba(0, 0, 0, 0)", "COLOR_BORDER_BUTTON_TERTIARY": "#000000", diff --git a/packages/epo-style-dictionary/dist/web/rubin/index.css b/packages/epo-style-dictionary/dist/web/rubin/index.css index 710eea6a..e584a9d8 100644 --- a/packages/epo-style-dictionary/dist/web/rubin/index.css +++ b/packages/epo-style-dictionary/dist/web/rubin/index.css @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Wed, 04 Sep 2024 18:37:30 GMT + * Generated on Wed, 20 Nov 2024 23:25:53 GMT */ :root { @@ -24,6 +24,7 @@ --color-background-button-link-inactive: rgba(0, 0, 0, 0); --color-background-page-primary: #ffffff; --color-background-page-invert: #000000; + --color-background-tile-light: #f5f5f5; --color-border-button-primary: rgba(0, 0, 0, 0); --color-border-button-secondary: rgba(0, 0, 0, 0); --color-border-button-tertiary: #000000; diff --git a/packages/epo-style-dictionary/dist/web/rubin/index.d.ts b/packages/epo-style-dictionary/dist/web/rubin/index.d.ts index e100aace..759e9bb2 100644 --- a/packages/epo-style-dictionary/dist/web/rubin/index.d.ts +++ b/packages/epo-style-dictionary/dist/web/rubin/index.d.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Wed, 04 Sep 2024 18:37:30 GMT + * Generated on Wed, 20 Nov 2024 23:25:53 GMT */ export const COLOR_BACKGROUND_BUTTON_PRIMARY_DEFAULT : string; @@ -23,6 +23,7 @@ export const COLOR_BACKGROUND_BUTTON_LINK_HOVER : string; export const COLOR_BACKGROUND_BUTTON_LINK_INACTIVE : string; export const COLOR_BACKGROUND_PAGE_PRIMARY : string; export const COLOR_BACKGROUND_PAGE_INVERT : string; +export const COLOR_BACKGROUND_TILE_LIGHT : string; export const COLOR_BORDER_BUTTON_PRIMARY : string; export const COLOR_BORDER_BUTTON_SECONDARY : string; export const COLOR_BORDER_BUTTON_TERTIARY : string; diff --git a/packages/epo-style-dictionary/dist/web/rubin/index.js b/packages/epo-style-dictionary/dist/web/rubin/index.js index 08d4f066..d244ca63 100644 --- a/packages/epo-style-dictionary/dist/web/rubin/index.js +++ b/packages/epo-style-dictionary/dist/web/rubin/index.js @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Wed, 04 Sep 2024 18:37:30 GMT + * Generated on Wed, 20 Nov 2024 23:25:53 GMT */ export const COLOR_BACKGROUND_BUTTON_PRIMARY_DEFAULT = "#12726d"; @@ -23,6 +23,7 @@ export const COLOR_BACKGROUND_BUTTON_LINK_HOVER = "rgba(0, 0, 0, 0)"; export const COLOR_BACKGROUND_BUTTON_LINK_INACTIVE = "rgba(0, 0, 0, 0)"; export const COLOR_BACKGROUND_PAGE_PRIMARY = "#ffffff"; export const COLOR_BACKGROUND_PAGE_INVERT = "#000000"; +export const COLOR_BACKGROUND_TILE_LIGHT = "#f5f5f5"; export const COLOR_BORDER_BUTTON_PRIMARY = "rgba(0, 0, 0, 0)"; export const COLOR_BORDER_BUTTON_SECONDARY = "rgba(0, 0, 0, 0)"; export const COLOR_BORDER_BUTTON_TERTIARY = "#000000"; diff --git a/packages/epo-style-dictionary/package.json b/packages/epo-style-dictionary/package.json index 8a3d7058..74e01aff 100644 --- a/packages/epo-style-dictionary/package.json +++ b/packages/epo-style-dictionary/package.json @@ -2,7 +2,7 @@ "name": "@rubin-epo/epo-style-dictionary", "private": true, "description": "Rubin Observatory Education & Public Outreach team style tokens.", - "version": "0.2.0", + "version": "0.2.1", "author": "Rubin EPO", "license": "MIT", "homepage": "https://lsst-epo.github.io/epo-react-lib", diff --git a/packages/epo-style-dictionary/src/brand/rubin/page.json b/packages/epo-style-dictionary/src/brand/rubin/page.json index a44f2f8d..e63420e1 100644 --- a/packages/epo-style-dictionary/src/brand/rubin/page.json +++ b/packages/epo-style-dictionary/src/brand/rubin/page.json @@ -8,6 +8,11 @@ "invert": { "value": "{color.neutral.100}" } + }, + "tile": { + "light": { + "value": "{color.neutral.04}" + } } } }