@ndla/ui 56.0.164-alpha.0 → 56.0.166-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/Embed/ImageEmbed.mjs +1 -0
- package/es/Embed/ImageEmbed.mjs.map +1 -1
- package/es/Grid/Grid.mjs +1 -1
- package/es/Grid/Grid.mjs.map +1 -1
- package/lib/Embed/ImageEmbed.js +1 -0
- package/lib/Embed/ImageEmbed.js.map +1 -1
- package/lib/Grid/Grid.js +1 -1
- package/lib/Grid/Grid.js.map +1 -1
- package/package.json +4 -4
- package/src/Embed/ImageEmbed.tsx +1 -0
- package/src/Grid/Grid.tsx +1 -1
package/es/Embed/ImageEmbed.mjs
CHANGED
|
@@ -158,6 +158,7 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
|
|
|
158
158
|
sizes: expanded ? expandedSizes : sizes,
|
|
159
159
|
alt: altText,
|
|
160
160
|
src: data.image.imageUrl,
|
|
161
|
+
variants: data.image.variants,
|
|
161
162
|
lang,
|
|
162
163
|
onClick: figureProps?.float ? toggleImageSize : void 0,
|
|
163
164
|
variant: "rounded",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageEmbed.mjs","names":["actualSize: FigureSize"],"sources":["../../src/Embed/ImageEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { type ReactNode, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { AddLine } from \"@ndla/icons\";\nimport { Figure, type FigureSize, type FigureVariantProps, Image } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageEmbedData, ImageMetaData } from \"@ndla/types-embed\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport type { RenderContext } from \"./types\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\n\ninterface Props {\n embed: ImageMetaData;\n previewAlt?: boolean;\n lang?: string;\n renderContext?: RenderContext;\n children?: ReactNode;\n}\n\nexport interface Author {\n name: string;\n type: string;\n}\n\nconst getFigureProps = (size?: string, float?: string): FigureVariantProps => {\n const actualFloat = float === \"left\" ? \"left\" : float === \"right\" ? \"right\" : undefined;\n const replacedSize = size?.replace(\"-hide-byline\", \"\") ?? \"full\";\n const actualSize: FigureSize = (replacedSize === \"fullwidth\" ? \"full\" : replacedSize) as FigureSize;\n return {\n float: actualFloat,\n // Figure expects you to set a size when floating. If you don't, the figure will simply take up the available width. Fallback to medium in those cases.\n size: actualSize === \"full\" && float ? \"medium\" : actualSize,\n };\n};\n\nconst getSizes = (size?: string, align?: string) => {\n if (align && size === \"full\") {\n return \"(min-width: 1024px) 512px, (min-width: 768px) 350px, 100vw\";\n }\n if (align && size === \"small\") {\n return \"(min-width: 1024px) 350px, (min-width: 768px) 180px, 100vw\";\n }\n if (align && size === \"xsmall\") {\n return \"(min-width: 1024px) 180px, (min-width: 768px) 180px, 100vw\";\n }\n return \"(min-width: 1024px) 1024px, 100vw\";\n};\n\nexport const getFocalPoint = (data: ImageEmbedData) => {\n const focalX = Number.parseFloat(data.focalX ?? \"\");\n const focalY = Number.parseFloat(data.focalY ?? \"\");\n if (!Number.isNaN(focalX) && !Number.isNaN(focalY)) {\n return { x: focalX, y: focalY };\n }\n return undefined;\n};\n\nexport const getCrop = (data: ImageEmbedData) => {\n const lowerRightX = Number.parseFloat(data.lowerRightX ?? \"\");\n const lowerRightY = Number.parseFloat(data.lowerRightY ?? \"\");\n const upperLeftX = Number.parseFloat(data.upperLeftX ?? \"\");\n const upperLeftY = Number.parseFloat(data.upperLeftY ?? \"\");\n if (\n !Number.isNaN(lowerRightX) &&\n !Number.isNaN(lowerRightY) &&\n !Number.isNaN(upperLeftX) &&\n !Number.isNaN(upperLeftY)\n ) {\n return {\n startX: lowerRightX,\n startY: lowerRightY,\n endX: upperLeftX,\n endY: upperLeftY,\n };\n }\n return undefined;\n};\n\nconst expandedSizes = \"(min-width: 1024px) 1024px, 100vw\";\n\nconst ImageWrapper = styled(\"div\", {\n base: {\n overflow: \"hidden\",\n position: \"relative\",\n width: \"100%\",\n \"& img\": {\n width: \"100%\",\n },\n },\n variants: {\n svg: {\n true: {\n display: \"flex\",\n justifyContent: \"center\",\n },\n false: {},\n },\n border: {\n true: {\n border: \"1px solid\",\n borderColor: \"stroke.subtle\",\n borderRadius: \"xsmall\",\n \"& img\": {\n borderRadius: \"0\",\n },\n },\n false: {},\n },\n expandable: {\n true: {\n cursor: \"pointer\",\n },\n false: {},\n },\n },\n});\n\nconst StyledFigure = styled(Figure, {\n base: {\n zIndex: \"docked\",\n _hover: {\n \"& [data-byline-button]\": {\n background: \"background.default\",\n },\n \"& button[data-expanded]\": {\n transform: \"scale(1.2)\",\n },\n },\n \"& button[data-expanded='true']\": {\n \"& svg\": {\n transform: \"rotate(-45deg)\",\n },\n },\n },\n});\n\nconst ExpandButton = styled(\n \"button\",\n {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n position: \"absolute\",\n padding: \"0\",\n top: \"xsmall\",\n right: \"xsmall\",\n width: \"medium\",\n height: \"medium\",\n border: \"2px solid\",\n borderColor: \"background.default\",\n transitionProperty: \"transform, background-color, color\",\n transitionDuration: \"normal\",\n transitionTimingFunction: \"ease-out\",\n color: \"background.default\",\n backgroundColor: \"surface.action\",\n borderRadius: \"large\",\n \"& svg\": {\n transitionProperty: \"transform\",\n transitionDuration: \"normal\",\n transitionTimingFunction: \"ease-out\",\n },\n tabletDown: {\n display: \"none\",\n },\n _print: {\n display: \"none\",\n },\n },\n },\n { defaultProps: { type: \"button\" } },\n);\n\nexport const ImageEmbed = ({ embed, previewAlt, lang, renderContext = \"article\", children }: Props) => {\n const [expanded, setExpanded] = useState(false);\n const figureProps = getFigureProps(embed.embedData.size, embed.embedData.align);\n const { t } = useTranslation();\n\n const parsedDescription = useMemo(() => {\n if (embed.embedData.caption || renderContext === \"article\") {\n return embed.embedData.caption ? parse(embed.embedData.caption) : undefined;\n }\n if (embed.status === \"success\" && embed.data.caption.caption) {\n return parse(embed.data.caption.caption);\n }\n }, [embed, renderContext]);\n\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type={\"image\"} figureType={figureProps?.size} float={figureProps?.float} />;\n }\n\n const { data, embedData } = embed;\n\n const altText = embedData.alt || \"\";\n\n const sizes = getSizes(embedData.size, embedData.align);\n\n const focalPoint = getFocalPoint(embedData);\n const crop = getCrop(embedData);\n\n const toggleImageSize = () => {\n setExpanded((prev) => !prev);\n };\n\n const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);\n\n const figureSize = figureProps?.float ? (figureProps?.size ?? \"medium\") : \"full\";\n\n return (\n <StyledFigure\n float={figureProps?.float}\n size={expanded ? \"full\" : figureSize}\n data-embed-type=\"image\"\n {...licenseProps}\n >\n {children}\n <ImageWrapper border={embedData.border === \"true\"} expandable={!!figureProps?.float}>\n <Image\n focalPoint={focalPoint}\n contentType={data.image.contentType}\n crop={crop}\n sizes={expanded ? expandedSizes : sizes}\n alt={altText}\n src={data.image.imageUrl}\n lang={lang}\n onClick={figureProps?.float ? toggleImageSize : undefined}\n variant=\"rounded\"\n {...data.image.dimensions}\n />\n {(embedData.align === \"right\" || embedData.align === \"left\") && (\n <ExpandButton\n aria-label={t(`license.images.itemImage.zoom${expanded ? \"Out\" : \"\"}ImageButtonLabel`)}\n onClick={toggleImageSize}\n data-expanded={expanded}\n >\n <AddLine />\n </ExpandButton>\n )}\n </ImageWrapper>\n <EmbedByline\n type=\"image\"\n copyright={data.copyright}\n description={parsedDescription}\n hideDescription={embedData.hideCaption === \"true\"}\n hideCopyright={embedData.hideByline === \"true\"}\n visibleAlt={previewAlt ? embed.embedData.alt : \"\"}\n />\n </StyledFigure>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ImageEmbed.mjs","names":["actualSize: FigureSize"],"sources":["../../src/Embed/ImageEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { type ReactNode, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { AddLine } from \"@ndla/icons\";\nimport { Figure, type FigureSize, type FigureVariantProps, Image } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageEmbedData, ImageMetaData } from \"@ndla/types-embed\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport type { RenderContext } from \"./types\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\n\ninterface Props {\n embed: ImageMetaData;\n previewAlt?: boolean;\n lang?: string;\n renderContext?: RenderContext;\n children?: ReactNode;\n}\n\nexport interface Author {\n name: string;\n type: string;\n}\n\nconst getFigureProps = (size?: string, float?: string): FigureVariantProps => {\n const actualFloat = float === \"left\" ? \"left\" : float === \"right\" ? \"right\" : undefined;\n const replacedSize = size?.replace(\"-hide-byline\", \"\") ?? \"full\";\n const actualSize: FigureSize = (replacedSize === \"fullwidth\" ? \"full\" : replacedSize) as FigureSize;\n return {\n float: actualFloat,\n // Figure expects you to set a size when floating. If you don't, the figure will simply take up the available width. Fallback to medium in those cases.\n size: actualSize === \"full\" && float ? \"medium\" : actualSize,\n };\n};\n\nconst getSizes = (size?: string, align?: string) => {\n if (align && size === \"full\") {\n return \"(min-width: 1024px) 512px, (min-width: 768px) 350px, 100vw\";\n }\n if (align && size === \"small\") {\n return \"(min-width: 1024px) 350px, (min-width: 768px) 180px, 100vw\";\n }\n if (align && size === \"xsmall\") {\n return \"(min-width: 1024px) 180px, (min-width: 768px) 180px, 100vw\";\n }\n return \"(min-width: 1024px) 1024px, 100vw\";\n};\n\nexport const getFocalPoint = (data: ImageEmbedData) => {\n const focalX = Number.parseFloat(data.focalX ?? \"\");\n const focalY = Number.parseFloat(data.focalY ?? \"\");\n if (!Number.isNaN(focalX) && !Number.isNaN(focalY)) {\n return { x: focalX, y: focalY };\n }\n return undefined;\n};\n\nexport const getCrop = (data: ImageEmbedData) => {\n const lowerRightX = Number.parseFloat(data.lowerRightX ?? \"\");\n const lowerRightY = Number.parseFloat(data.lowerRightY ?? \"\");\n const upperLeftX = Number.parseFloat(data.upperLeftX ?? \"\");\n const upperLeftY = Number.parseFloat(data.upperLeftY ?? \"\");\n if (\n !Number.isNaN(lowerRightX) &&\n !Number.isNaN(lowerRightY) &&\n !Number.isNaN(upperLeftX) &&\n !Number.isNaN(upperLeftY)\n ) {\n return {\n startX: lowerRightX,\n startY: lowerRightY,\n endX: upperLeftX,\n endY: upperLeftY,\n };\n }\n return undefined;\n};\n\nconst expandedSizes = \"(min-width: 1024px) 1024px, 100vw\";\n\nconst ImageWrapper = styled(\"div\", {\n base: {\n overflow: \"hidden\",\n position: \"relative\",\n width: \"100%\",\n \"& img\": {\n width: \"100%\",\n },\n },\n variants: {\n svg: {\n true: {\n display: \"flex\",\n justifyContent: \"center\",\n },\n false: {},\n },\n border: {\n true: {\n border: \"1px solid\",\n borderColor: \"stroke.subtle\",\n borderRadius: \"xsmall\",\n \"& img\": {\n borderRadius: \"0\",\n },\n },\n false: {},\n },\n expandable: {\n true: {\n cursor: \"pointer\",\n },\n false: {},\n },\n },\n});\n\nconst StyledFigure = styled(Figure, {\n base: {\n zIndex: \"docked\",\n _hover: {\n \"& [data-byline-button]\": {\n background: \"background.default\",\n },\n \"& button[data-expanded]\": {\n transform: \"scale(1.2)\",\n },\n },\n \"& button[data-expanded='true']\": {\n \"& svg\": {\n transform: \"rotate(-45deg)\",\n },\n },\n },\n});\n\nconst ExpandButton = styled(\n \"button\",\n {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n position: \"absolute\",\n padding: \"0\",\n top: \"xsmall\",\n right: \"xsmall\",\n width: \"medium\",\n height: \"medium\",\n border: \"2px solid\",\n borderColor: \"background.default\",\n transitionProperty: \"transform, background-color, color\",\n transitionDuration: \"normal\",\n transitionTimingFunction: \"ease-out\",\n color: \"background.default\",\n backgroundColor: \"surface.action\",\n borderRadius: \"large\",\n \"& svg\": {\n transitionProperty: \"transform\",\n transitionDuration: \"normal\",\n transitionTimingFunction: \"ease-out\",\n },\n tabletDown: {\n display: \"none\",\n },\n _print: {\n display: \"none\",\n },\n },\n },\n { defaultProps: { type: \"button\" } },\n);\n\nexport const ImageEmbed = ({ embed, previewAlt, lang, renderContext = \"article\", children }: Props) => {\n const [expanded, setExpanded] = useState(false);\n const figureProps = getFigureProps(embed.embedData.size, embed.embedData.align);\n const { t } = useTranslation();\n\n const parsedDescription = useMemo(() => {\n if (embed.embedData.caption || renderContext === \"article\") {\n return embed.embedData.caption ? parse(embed.embedData.caption) : undefined;\n }\n if (embed.status === \"success\" && embed.data.caption.caption) {\n return parse(embed.data.caption.caption);\n }\n }, [embed, renderContext]);\n\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type={\"image\"} figureType={figureProps?.size} float={figureProps?.float} />;\n }\n\n const { data, embedData } = embed;\n\n const altText = embedData.alt || \"\";\n\n const sizes = getSizes(embedData.size, embedData.align);\n\n const focalPoint = getFocalPoint(embedData);\n const crop = getCrop(embedData);\n\n const toggleImageSize = () => {\n setExpanded((prev) => !prev);\n };\n\n const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);\n\n const figureSize = figureProps?.float ? (figureProps?.size ?? \"medium\") : \"full\";\n\n return (\n <StyledFigure\n float={figureProps?.float}\n size={expanded ? \"full\" : figureSize}\n data-embed-type=\"image\"\n {...licenseProps}\n >\n {children}\n <ImageWrapper border={embedData.border === \"true\"} expandable={!!figureProps?.float}>\n <Image\n focalPoint={focalPoint}\n contentType={data.image.contentType}\n crop={crop}\n sizes={expanded ? expandedSizes : sizes}\n alt={altText}\n src={data.image.imageUrl}\n variants={data.image.variants}\n lang={lang}\n onClick={figureProps?.float ? toggleImageSize : undefined}\n variant=\"rounded\"\n {...data.image.dimensions}\n />\n {(embedData.align === \"right\" || embedData.align === \"left\") && (\n <ExpandButton\n aria-label={t(`license.images.itemImage.zoom${expanded ? \"Out\" : \"\"}ImageButtonLabel`)}\n onClick={toggleImageSize}\n data-expanded={expanded}\n >\n <AddLine />\n </ExpandButton>\n )}\n </ImageWrapper>\n <EmbedByline\n type=\"image\"\n copyright={data.copyright}\n description={parsedDescription}\n hideDescription={embedData.hideCaption === \"true\"}\n hideCopyright={embedData.hideByline === \"true\"}\n visibleAlt={previewAlt ? embed.embedData.alt : \"\"}\n />\n </StyledFigure>\n );\n};\n"],"mappings":"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"}
|
package/es/Grid/Grid.mjs
CHANGED
|
@@ -62,7 +62,7 @@ const Grid = ({ columns, border, children, ...rest }) => {
|
|
|
62
62
|
};
|
|
63
63
|
const GridItem = ({ border, children, ...rest }) => {
|
|
64
64
|
return /* @__PURE__ */ jsx(StyledGridItem, {
|
|
65
|
-
"data-embed-type": "grid-
|
|
65
|
+
"data-embed-type": "grid-cell",
|
|
66
66
|
border,
|
|
67
67
|
...rest,
|
|
68
68
|
children
|
package/es/Grid/Grid.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.mjs","names":[],"sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ComponentProps, type ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledVariantProps } from \"@ndla/styled-system/types\";\n\nconst GridContainer = styled(\"div\", {\n base: {\n display: \"grid\",\n justifyContent: \"center\",\n borderRadius: \"xsmall\",\n gridRowGap: \"large\",\n gridColumnGap: \"medium\",\n width: \"100%\",\n minWidth: \"surface.xxsmall\",\n gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n\n \"& div[data-embed-type='pitch']\": {\n height: \"100%\",\n \"& > :last-child\": {\n marginTop: \"auto\",\n },\n },\n tabletDown: {\n gridTemplateColumns: \"repeat(1, minmax(0, 1fr))\",\n },\n tabletToDesktop: {\n gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n \"& > div:nth-child(3):last-child\": {\n display: \"flex\",\n flexFlow: \"column\",\n justifyContent: \"center\",\n alignItems: \"center\",\n gridColumn: \"span 2\",\n },\n },\n },\n variants: {\n columns: {\n \"2\": {},\n \"2x2\": {},\n \"3\": { desktop: { gridTemplateColumns: \"repeat(3, minmax(0, 1fr))\" } },\n \"4\": { desktop: { gridTemplateColumns: \"repeat(4, minmax(0, 1fr))\" } },\n },\n border: {\n lightBlue: {\n padding: \"xsmall\",\n border: \"1px solid\",\n borderColor: \"surface.brand.2\",\n },\n },\n },\n});\n\nconst StyledGridItem = styled(\"div\", {\n base: {},\n variants: {\n border: {\n true: {\n outline: \"1px solid\",\n borderColor: \"stroke.default\",\n },\n },\n },\n});\n\ntype GridVariantProps = NonNullable<StyledVariantProps<typeof GridContainer>>;\n\nexport interface GridProps extends ComponentProps<\"div\">, GridVariantProps {\n children?: ReactNode[];\n columns: NonNullable<GridVariantProps[\"columns\"]>;\n}\n\ntype GridItemVariantProps = NonNullable<StyledVariantProps<typeof StyledGridItem>>;\n\nexport interface GridItemProps extends ComponentProps<\"div\">, GridItemVariantProps {}\n\nexport const Grid = ({ columns, border, children, ...rest }: GridProps) => {\n const amountOfColumns = children?.length === 3 ? \"3\" : columns;\n\n return (\n <GridContainer data-embed-type=\"grid\" border={border} columns={amountOfColumns} {...rest}>\n {children}\n </GridContainer>\n );\n};\n\nexport const GridItem = ({ border, children, ...rest }: GridItemProps) => {\n return (\n <StyledGridItem data-embed-type=\"grid-
|
|
1
|
+
{"version":3,"file":"Grid.mjs","names":[],"sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ComponentProps, type ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledVariantProps } from \"@ndla/styled-system/types\";\n\nconst GridContainer = styled(\"div\", {\n base: {\n display: \"grid\",\n justifyContent: \"center\",\n borderRadius: \"xsmall\",\n gridRowGap: \"large\",\n gridColumnGap: \"medium\",\n width: \"100%\",\n minWidth: \"surface.xxsmall\",\n gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n\n \"& div[data-embed-type='pitch']\": {\n height: \"100%\",\n \"& > :last-child\": {\n marginTop: \"auto\",\n },\n },\n tabletDown: {\n gridTemplateColumns: \"repeat(1, minmax(0, 1fr))\",\n },\n tabletToDesktop: {\n gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n \"& > div:nth-child(3):last-child\": {\n display: \"flex\",\n flexFlow: \"column\",\n justifyContent: \"center\",\n alignItems: \"center\",\n gridColumn: \"span 2\",\n },\n },\n },\n variants: {\n columns: {\n \"2\": {},\n \"2x2\": {},\n \"3\": { desktop: { gridTemplateColumns: \"repeat(3, minmax(0, 1fr))\" } },\n \"4\": { desktop: { gridTemplateColumns: \"repeat(4, minmax(0, 1fr))\" } },\n },\n border: {\n lightBlue: {\n padding: \"xsmall\",\n border: \"1px solid\",\n borderColor: \"surface.brand.2\",\n },\n },\n },\n});\n\nconst StyledGridItem = styled(\"div\", {\n base: {},\n variants: {\n border: {\n true: {\n outline: \"1px solid\",\n borderColor: \"stroke.default\",\n },\n },\n },\n});\n\ntype GridVariantProps = NonNullable<StyledVariantProps<typeof GridContainer>>;\n\nexport interface GridProps extends ComponentProps<\"div\">, GridVariantProps {\n children?: ReactNode[];\n columns: NonNullable<GridVariantProps[\"columns\"]>;\n}\n\ntype GridItemVariantProps = NonNullable<StyledVariantProps<typeof StyledGridItem>>;\n\nexport interface GridItemProps extends ComponentProps<\"div\">, GridItemVariantProps {}\n\nexport const Grid = ({ columns, border, children, ...rest }: GridProps) => {\n const amountOfColumns = children?.length === 3 ? \"3\" : columns;\n\n return (\n <GridContainer data-embed-type=\"grid\" border={border} columns={amountOfColumns} {...rest}>\n {children}\n </GridContainer>\n );\n};\n\nexport const GridItem = ({ border, children, ...rest }: GridItemProps) => {\n return (\n <StyledGridItem data-embed-type=\"grid-cell\" border={border} {...rest}>\n {children}\n </StyledGridItem>\n );\n};\n"],"mappings":";;;;;AAYA,MAAM,gBAAgB,OAAO,OAAO;CAClC,MAAM;EACJ,SAAS;EACT,gBAAgB;EAChB,cAAc;EACd,YAAY;EACZ,eAAe;EACf,OAAO;EACP,UAAU;EACV,qBAAqB;EAErB,kCAAkC;GAChC,QAAQ;GACR,mBAAmB,EACjB,WAAW,QACZ;GACF;EACD,YAAY,EACV,qBAAqB,6BACtB;EACD,iBAAiB;GACf,qBAAqB;GACrB,mCAAmC;IACjC,SAAS;IACT,UAAU;IACV,gBAAgB;IAChB,YAAY;IACZ,YAAY;IACb;GACF;EACF;CACD,UAAU;EACR,SAAS;GACP,KAAK,EAAE;GACP,OAAO,EAAE;GACT,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACtE,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACvE;EACD,QAAQ,EACN,WAAW;GACT,SAAS;GACT,QAAQ;GACR,aAAa;GACd,EACF;EACF;CACF,CAAC;AAEF,MAAM,iBAAiB,OAAO,OAAO;CACnC,MAAM,EAAE;CACR,UAAU,EACR,QAAQ,EACN,MAAM;EACJ,SAAS;EACT,aAAa;EACd,EACF,EACF;CACF,CAAC;AAaF,MAAa,QAAQ,EAAE,SAAS,QAAQ,UAAU,GAAG,WAAsB;CACzE,MAAM,kBAAkB,UAAU,WAAW,IAAI,MAAM;AAEvD,QACE,oBAAC;EAAc,mBAAgB;EAAe;EAAQ,SAAS;EAAiB,GAAI;EACjF;GACa;;AAIpB,MAAa,YAAY,EAAE,QAAQ,UAAU,GAAG,WAA0B;AACxE,QACE,oBAAC;EAAe,mBAAgB;EAAoB;EAAQ,GAAI;EAC7D;GACc"}
|
package/lib/Embed/ImageEmbed.js
CHANGED
|
@@ -160,6 +160,7 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
|
|
|
160
160
|
sizes: expanded ? expandedSizes : sizes,
|
|
161
161
|
alt: altText,
|
|
162
162
|
src: data.image.imageUrl,
|
|
163
|
+
variants: data.image.variants,
|
|
163
164
|
lang,
|
|
164
165
|
onClick: figureProps?.float ? toggleImageSize : void 0,
|
|
165
166
|
variant: "rounded",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageEmbed.js","names":["actualSize: FigureSize","Figure","EmbedErrorPlaceholder","licenseAttributes","Image","AddLine","EmbedByline"],"sources":["../../src/Embed/ImageEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { type ReactNode, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { AddLine } from \"@ndla/icons\";\nimport { Figure, type FigureSize, type FigureVariantProps, Image } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageEmbedData, ImageMetaData } from \"@ndla/types-embed\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport type { RenderContext } from \"./types\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\n\ninterface Props {\n embed: ImageMetaData;\n previewAlt?: boolean;\n lang?: string;\n renderContext?: RenderContext;\n children?: ReactNode;\n}\n\nexport interface Author {\n name: string;\n type: string;\n}\n\nconst getFigureProps = (size?: string, float?: string): FigureVariantProps => {\n const actualFloat = float === \"left\" ? \"left\" : float === \"right\" ? \"right\" : undefined;\n const replacedSize = size?.replace(\"-hide-byline\", \"\") ?? \"full\";\n const actualSize: FigureSize = (replacedSize === \"fullwidth\" ? \"full\" : replacedSize) as FigureSize;\n return {\n float: actualFloat,\n // Figure expects you to set a size when floating. If you don't, the figure will simply take up the available width. Fallback to medium in those cases.\n size: actualSize === \"full\" && float ? \"medium\" : actualSize,\n };\n};\n\nconst getSizes = (size?: string, align?: string) => {\n if (align && size === \"full\") {\n return \"(min-width: 1024px) 512px, (min-width: 768px) 350px, 100vw\";\n }\n if (align && size === \"small\") {\n return \"(min-width: 1024px) 350px, (min-width: 768px) 180px, 100vw\";\n }\n if (align && size === \"xsmall\") {\n return \"(min-width: 1024px) 180px, (min-width: 768px) 180px, 100vw\";\n }\n return \"(min-width: 1024px) 1024px, 100vw\";\n};\n\nexport const getFocalPoint = (data: ImageEmbedData) => {\n const focalX = Number.parseFloat(data.focalX ?? \"\");\n const focalY = Number.parseFloat(data.focalY ?? \"\");\n if (!Number.isNaN(focalX) && !Number.isNaN(focalY)) {\n return { x: focalX, y: focalY };\n }\n return undefined;\n};\n\nexport const getCrop = (data: ImageEmbedData) => {\n const lowerRightX = Number.parseFloat(data.lowerRightX ?? \"\");\n const lowerRightY = Number.parseFloat(data.lowerRightY ?? \"\");\n const upperLeftX = Number.parseFloat(data.upperLeftX ?? \"\");\n const upperLeftY = Number.parseFloat(data.upperLeftY ?? \"\");\n if (\n !Number.isNaN(lowerRightX) &&\n !Number.isNaN(lowerRightY) &&\n !Number.isNaN(upperLeftX) &&\n !Number.isNaN(upperLeftY)\n ) {\n return {\n startX: lowerRightX,\n startY: lowerRightY,\n endX: upperLeftX,\n endY: upperLeftY,\n };\n }\n return undefined;\n};\n\nconst expandedSizes = \"(min-width: 1024px) 1024px, 100vw\";\n\nconst ImageWrapper = styled(\"div\", {\n base: {\n overflow: \"hidden\",\n position: \"relative\",\n width: \"100%\",\n \"& img\": {\n width: \"100%\",\n },\n },\n variants: {\n svg: {\n true: {\n display: \"flex\",\n justifyContent: \"center\",\n },\n false: {},\n },\n border: {\n true: {\n border: \"1px solid\",\n borderColor: \"stroke.subtle\",\n borderRadius: \"xsmall\",\n \"& img\": {\n borderRadius: \"0\",\n },\n },\n false: {},\n },\n expandable: {\n true: {\n cursor: \"pointer\",\n },\n false: {},\n },\n },\n});\n\nconst StyledFigure = styled(Figure, {\n base: {\n zIndex: \"docked\",\n _hover: {\n \"& [data-byline-button]\": {\n background: \"background.default\",\n },\n \"& button[data-expanded]\": {\n transform: \"scale(1.2)\",\n },\n },\n \"& button[data-expanded='true']\": {\n \"& svg\": {\n transform: \"rotate(-45deg)\",\n },\n },\n },\n});\n\nconst ExpandButton = styled(\n \"button\",\n {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n position: \"absolute\",\n padding: \"0\",\n top: \"xsmall\",\n right: \"xsmall\",\n width: \"medium\",\n height: \"medium\",\n border: \"2px solid\",\n borderColor: \"background.default\",\n transitionProperty: \"transform, background-color, color\",\n transitionDuration: \"normal\",\n transitionTimingFunction: \"ease-out\",\n color: \"background.default\",\n backgroundColor: \"surface.action\",\n borderRadius: \"large\",\n \"& svg\": {\n transitionProperty: \"transform\",\n transitionDuration: \"normal\",\n transitionTimingFunction: \"ease-out\",\n },\n tabletDown: {\n display: \"none\",\n },\n _print: {\n display: \"none\",\n },\n },\n },\n { defaultProps: { type: \"button\" } },\n);\n\nexport const ImageEmbed = ({ embed, previewAlt, lang, renderContext = \"article\", children }: Props) => {\n const [expanded, setExpanded] = useState(false);\n const figureProps = getFigureProps(embed.embedData.size, embed.embedData.align);\n const { t } = useTranslation();\n\n const parsedDescription = useMemo(() => {\n if (embed.embedData.caption || renderContext === \"article\") {\n return embed.embedData.caption ? parse(embed.embedData.caption) : undefined;\n }\n if (embed.status === \"success\" && embed.data.caption.caption) {\n return parse(embed.data.caption.caption);\n }\n }, [embed, renderContext]);\n\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type={\"image\"} figureType={figureProps?.size} float={figureProps?.float} />;\n }\n\n const { data, embedData } = embed;\n\n const altText = embedData.alt || \"\";\n\n const sizes = getSizes(embedData.size, embedData.align);\n\n const focalPoint = getFocalPoint(embedData);\n const crop = getCrop(embedData);\n\n const toggleImageSize = () => {\n setExpanded((prev) => !prev);\n };\n\n const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);\n\n const figureSize = figureProps?.float ? (figureProps?.size ?? \"medium\") : \"full\";\n\n return (\n <StyledFigure\n float={figureProps?.float}\n size={expanded ? \"full\" : figureSize}\n data-embed-type=\"image\"\n {...licenseProps}\n >\n {children}\n <ImageWrapper border={embedData.border === \"true\"} expandable={!!figureProps?.float}>\n <Image\n focalPoint={focalPoint}\n contentType={data.image.contentType}\n crop={crop}\n sizes={expanded ? expandedSizes : sizes}\n alt={altText}\n src={data.image.imageUrl}\n lang={lang}\n onClick={figureProps?.float ? toggleImageSize : undefined}\n variant=\"rounded\"\n {...data.image.dimensions}\n />\n {(embedData.align === \"right\" || embedData.align === \"left\") && (\n <ExpandButton\n aria-label={t(`license.images.itemImage.zoom${expanded ? \"Out\" : \"\"}ImageButtonLabel`)}\n onClick={toggleImageSize}\n data-expanded={expanded}\n >\n <AddLine />\n </ExpandButton>\n )}\n </ImageWrapper>\n <EmbedByline\n type=\"image\"\n copyright={data.copyright}\n description={parsedDescription}\n hideDescription={embedData.hideCaption === \"true\"}\n hideCopyright={embedData.hideByline === \"true\"}\n visibleAlt={previewAlt ? embed.embedData.alt : \"\"}\n />\n </StyledFigure>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ImageEmbed.js","names":["actualSize: FigureSize","Figure","EmbedErrorPlaceholder","licenseAttributes","Image","AddLine","EmbedByline"],"sources":["../../src/Embed/ImageEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { type ReactNode, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { AddLine } from \"@ndla/icons\";\nimport { Figure, type FigureSize, type FigureVariantProps, Image } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageEmbedData, ImageMetaData } from \"@ndla/types-embed\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport type { RenderContext } from \"./types\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\n\ninterface Props {\n embed: ImageMetaData;\n previewAlt?: boolean;\n lang?: string;\n renderContext?: RenderContext;\n children?: ReactNode;\n}\n\nexport interface Author {\n name: string;\n type: string;\n}\n\nconst getFigureProps = (size?: string, float?: string): FigureVariantProps => {\n const actualFloat = float === \"left\" ? \"left\" : float === \"right\" ? \"right\" : undefined;\n const replacedSize = size?.replace(\"-hide-byline\", \"\") ?? \"full\";\n const actualSize: FigureSize = (replacedSize === \"fullwidth\" ? \"full\" : replacedSize) as FigureSize;\n return {\n float: actualFloat,\n // Figure expects you to set a size when floating. If you don't, the figure will simply take up the available width. Fallback to medium in those cases.\n size: actualSize === \"full\" && float ? \"medium\" : actualSize,\n };\n};\n\nconst getSizes = (size?: string, align?: string) => {\n if (align && size === \"full\") {\n return \"(min-width: 1024px) 512px, (min-width: 768px) 350px, 100vw\";\n }\n if (align && size === \"small\") {\n return \"(min-width: 1024px) 350px, (min-width: 768px) 180px, 100vw\";\n }\n if (align && size === \"xsmall\") {\n return \"(min-width: 1024px) 180px, (min-width: 768px) 180px, 100vw\";\n }\n return \"(min-width: 1024px) 1024px, 100vw\";\n};\n\nexport const getFocalPoint = (data: ImageEmbedData) => {\n const focalX = Number.parseFloat(data.focalX ?? \"\");\n const focalY = Number.parseFloat(data.focalY ?? \"\");\n if (!Number.isNaN(focalX) && !Number.isNaN(focalY)) {\n return { x: focalX, y: focalY };\n }\n return undefined;\n};\n\nexport const getCrop = (data: ImageEmbedData) => {\n const lowerRightX = Number.parseFloat(data.lowerRightX ?? \"\");\n const lowerRightY = Number.parseFloat(data.lowerRightY ?? \"\");\n const upperLeftX = Number.parseFloat(data.upperLeftX ?? \"\");\n const upperLeftY = Number.parseFloat(data.upperLeftY ?? \"\");\n if (\n !Number.isNaN(lowerRightX) &&\n !Number.isNaN(lowerRightY) &&\n !Number.isNaN(upperLeftX) &&\n !Number.isNaN(upperLeftY)\n ) {\n return {\n startX: lowerRightX,\n startY: lowerRightY,\n endX: upperLeftX,\n endY: upperLeftY,\n };\n }\n return undefined;\n};\n\nconst expandedSizes = \"(min-width: 1024px) 1024px, 100vw\";\n\nconst ImageWrapper = styled(\"div\", {\n base: {\n overflow: \"hidden\",\n position: \"relative\",\n width: \"100%\",\n \"& img\": {\n width: \"100%\",\n },\n },\n variants: {\n svg: {\n true: {\n display: \"flex\",\n justifyContent: \"center\",\n },\n false: {},\n },\n border: {\n true: {\n border: \"1px solid\",\n borderColor: \"stroke.subtle\",\n borderRadius: \"xsmall\",\n \"& img\": {\n borderRadius: \"0\",\n },\n },\n false: {},\n },\n expandable: {\n true: {\n cursor: \"pointer\",\n },\n false: {},\n },\n },\n});\n\nconst StyledFigure = styled(Figure, {\n base: {\n zIndex: \"docked\",\n _hover: {\n \"& [data-byline-button]\": {\n background: \"background.default\",\n },\n \"& button[data-expanded]\": {\n transform: \"scale(1.2)\",\n },\n },\n \"& button[data-expanded='true']\": {\n \"& svg\": {\n transform: \"rotate(-45deg)\",\n },\n },\n },\n});\n\nconst ExpandButton = styled(\n \"button\",\n {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n position: \"absolute\",\n padding: \"0\",\n top: \"xsmall\",\n right: \"xsmall\",\n width: \"medium\",\n height: \"medium\",\n border: \"2px solid\",\n borderColor: \"background.default\",\n transitionProperty: \"transform, background-color, color\",\n transitionDuration: \"normal\",\n transitionTimingFunction: \"ease-out\",\n color: \"background.default\",\n backgroundColor: \"surface.action\",\n borderRadius: \"large\",\n \"& svg\": {\n transitionProperty: \"transform\",\n transitionDuration: \"normal\",\n transitionTimingFunction: \"ease-out\",\n },\n tabletDown: {\n display: \"none\",\n },\n _print: {\n display: \"none\",\n },\n },\n },\n { defaultProps: { type: \"button\" } },\n);\n\nexport const ImageEmbed = ({ embed, previewAlt, lang, renderContext = \"article\", children }: Props) => {\n const [expanded, setExpanded] = useState(false);\n const figureProps = getFigureProps(embed.embedData.size, embed.embedData.align);\n const { t } = useTranslation();\n\n const parsedDescription = useMemo(() => {\n if (embed.embedData.caption || renderContext === \"article\") {\n return embed.embedData.caption ? parse(embed.embedData.caption) : undefined;\n }\n if (embed.status === \"success\" && embed.data.caption.caption) {\n return parse(embed.data.caption.caption);\n }\n }, [embed, renderContext]);\n\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type={\"image\"} figureType={figureProps?.size} float={figureProps?.float} />;\n }\n\n const { data, embedData } = embed;\n\n const altText = embedData.alt || \"\";\n\n const sizes = getSizes(embedData.size, embedData.align);\n\n const focalPoint = getFocalPoint(embedData);\n const crop = getCrop(embedData);\n\n const toggleImageSize = () => {\n setExpanded((prev) => !prev);\n };\n\n const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);\n\n const figureSize = figureProps?.float ? (figureProps?.size ?? \"medium\") : \"full\";\n\n return (\n <StyledFigure\n float={figureProps?.float}\n size={expanded ? \"full\" : figureSize}\n data-embed-type=\"image\"\n {...licenseProps}\n >\n {children}\n <ImageWrapper border={embedData.border === \"true\"} expandable={!!figureProps?.float}>\n <Image\n focalPoint={focalPoint}\n contentType={data.image.contentType}\n crop={crop}\n sizes={expanded ? expandedSizes : sizes}\n alt={altText}\n src={data.image.imageUrl}\n variants={data.image.variants}\n lang={lang}\n onClick={figureProps?.float ? toggleImageSize : undefined}\n variant=\"rounded\"\n {...data.image.dimensions}\n />\n {(embedData.align === \"right\" || embedData.align === \"left\") && (\n <ExpandButton\n aria-label={t(`license.images.itemImage.zoom${expanded ? \"Out\" : \"\"}ImageButtonLabel`)}\n onClick={toggleImageSize}\n data-expanded={expanded}\n >\n <AddLine />\n </ExpandButton>\n )}\n </ImageWrapper>\n <EmbedByline\n type=\"image\"\n copyright={data.copyright}\n description={parsedDescription}\n hideDescription={embedData.hideCaption === \"true\"}\n hideCopyright={embedData.hideByline === \"true\"}\n visibleAlt={previewAlt ? embed.embedData.alt : \"\"}\n />\n </StyledFigure>\n );\n};\n"],"mappings":"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"}
|
package/lib/Grid/Grid.js
CHANGED
|
@@ -70,7 +70,7 @@ const Grid = ({ columns, border, children, ...rest }) => {
|
|
|
70
70
|
};
|
|
71
71
|
const GridItem = ({ border, children, ...rest }) => {
|
|
72
72
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledGridItem, {
|
|
73
|
-
"data-embed-type": "grid-
|
|
73
|
+
"data-embed-type": "grid-cell",
|
|
74
74
|
border,
|
|
75
75
|
...rest,
|
|
76
76
|
children
|
package/lib/Grid/Grid.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.js","names":[],"sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ComponentProps, type ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledVariantProps } from \"@ndla/styled-system/types\";\n\nconst GridContainer = styled(\"div\", {\n base: {\n display: \"grid\",\n justifyContent: \"center\",\n borderRadius: \"xsmall\",\n gridRowGap: \"large\",\n gridColumnGap: \"medium\",\n width: \"100%\",\n minWidth: \"surface.xxsmall\",\n gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n\n \"& div[data-embed-type='pitch']\": {\n height: \"100%\",\n \"& > :last-child\": {\n marginTop: \"auto\",\n },\n },\n tabletDown: {\n gridTemplateColumns: \"repeat(1, minmax(0, 1fr))\",\n },\n tabletToDesktop: {\n gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n \"& > div:nth-child(3):last-child\": {\n display: \"flex\",\n flexFlow: \"column\",\n justifyContent: \"center\",\n alignItems: \"center\",\n gridColumn: \"span 2\",\n },\n },\n },\n variants: {\n columns: {\n \"2\": {},\n \"2x2\": {},\n \"3\": { desktop: { gridTemplateColumns: \"repeat(3, minmax(0, 1fr))\" } },\n \"4\": { desktop: { gridTemplateColumns: \"repeat(4, minmax(0, 1fr))\" } },\n },\n border: {\n lightBlue: {\n padding: \"xsmall\",\n border: \"1px solid\",\n borderColor: \"surface.brand.2\",\n },\n },\n },\n});\n\nconst StyledGridItem = styled(\"div\", {\n base: {},\n variants: {\n border: {\n true: {\n outline: \"1px solid\",\n borderColor: \"stroke.default\",\n },\n },\n },\n});\n\ntype GridVariantProps = NonNullable<StyledVariantProps<typeof GridContainer>>;\n\nexport interface GridProps extends ComponentProps<\"div\">, GridVariantProps {\n children?: ReactNode[];\n columns: NonNullable<GridVariantProps[\"columns\"]>;\n}\n\ntype GridItemVariantProps = NonNullable<StyledVariantProps<typeof StyledGridItem>>;\n\nexport interface GridItemProps extends ComponentProps<\"div\">, GridItemVariantProps {}\n\nexport const Grid = ({ columns, border, children, ...rest }: GridProps) => {\n const amountOfColumns = children?.length === 3 ? \"3\" : columns;\n\n return (\n <GridContainer data-embed-type=\"grid\" border={border} columns={amountOfColumns} {...rest}>\n {children}\n </GridContainer>\n );\n};\n\nexport const GridItem = ({ border, children, ...rest }: GridItemProps) => {\n return (\n <StyledGridItem data-embed-type=\"grid-
|
|
1
|
+
{"version":3,"file":"Grid.js","names":[],"sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ComponentProps, type ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledVariantProps } from \"@ndla/styled-system/types\";\n\nconst GridContainer = styled(\"div\", {\n base: {\n display: \"grid\",\n justifyContent: \"center\",\n borderRadius: \"xsmall\",\n gridRowGap: \"large\",\n gridColumnGap: \"medium\",\n width: \"100%\",\n minWidth: \"surface.xxsmall\",\n gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n\n \"& div[data-embed-type='pitch']\": {\n height: \"100%\",\n \"& > :last-child\": {\n marginTop: \"auto\",\n },\n },\n tabletDown: {\n gridTemplateColumns: \"repeat(1, minmax(0, 1fr))\",\n },\n tabletToDesktop: {\n gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n \"& > div:nth-child(3):last-child\": {\n display: \"flex\",\n flexFlow: \"column\",\n justifyContent: \"center\",\n alignItems: \"center\",\n gridColumn: \"span 2\",\n },\n },\n },\n variants: {\n columns: {\n \"2\": {},\n \"2x2\": {},\n \"3\": { desktop: { gridTemplateColumns: \"repeat(3, minmax(0, 1fr))\" } },\n \"4\": { desktop: { gridTemplateColumns: \"repeat(4, minmax(0, 1fr))\" } },\n },\n border: {\n lightBlue: {\n padding: \"xsmall\",\n border: \"1px solid\",\n borderColor: \"surface.brand.2\",\n },\n },\n },\n});\n\nconst StyledGridItem = styled(\"div\", {\n base: {},\n variants: {\n border: {\n true: {\n outline: \"1px solid\",\n borderColor: \"stroke.default\",\n },\n },\n },\n});\n\ntype GridVariantProps = NonNullable<StyledVariantProps<typeof GridContainer>>;\n\nexport interface GridProps extends ComponentProps<\"div\">, GridVariantProps {\n children?: ReactNode[];\n columns: NonNullable<GridVariantProps[\"columns\"]>;\n}\n\ntype GridItemVariantProps = NonNullable<StyledVariantProps<typeof StyledGridItem>>;\n\nexport interface GridItemProps extends ComponentProps<\"div\">, GridItemVariantProps {}\n\nexport const Grid = ({ columns, border, children, ...rest }: GridProps) => {\n const amountOfColumns = children?.length === 3 ? \"3\" : columns;\n\n return (\n <GridContainer data-embed-type=\"grid\" border={border} columns={amountOfColumns} {...rest}>\n {children}\n </GridContainer>\n );\n};\n\nexport const GridItem = ({ border, children, ...rest }: GridItemProps) => {\n return (\n <StyledGridItem data-embed-type=\"grid-cell\" border={border} {...rest}>\n {children}\n </StyledGridItem>\n );\n};\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,qDAAuB,OAAO;CAClC,MAAM;EACJ,SAAS;EACT,gBAAgB;EAChB,cAAc;EACd,YAAY;EACZ,eAAe;EACf,OAAO;EACP,UAAU;EACV,qBAAqB;EAErB,kCAAkC;GAChC,QAAQ;GACR,mBAAmB,EACjB,WAAW,QACZ;GACF;EACD,YAAY,EACV,qBAAqB,6BACtB;EACD,iBAAiB;GACf,qBAAqB;GACrB,mCAAmC;IACjC,SAAS;IACT,UAAU;IACV,gBAAgB;IAChB,YAAY;IACZ,YAAY;IACb;GACF;EACF;CACD,UAAU;EACR,SAAS;GACP,KAAK,EAAE;GACP,OAAO,EAAE;GACT,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACtE,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACvE;EACD,QAAQ,EACN,WAAW;GACT,SAAS;GACT,QAAQ;GACR,aAAa;GACd,EACF;EACF;CACF,CAAC;AAEF,MAAM,sDAAwB,OAAO;CACnC,MAAM,EAAE;CACR,UAAU,EACR,QAAQ,EACN,MAAM;EACJ,SAAS;EACT,aAAa;EACd,EACF,EACF;CACF,CAAC;AAaF,MAAa,QAAQ,EAAE,SAAS,QAAQ,UAAU,GAAG,WAAsB;CACzE,MAAM,kBAAkB,UAAU,WAAW,IAAI,MAAM;AAEvD,QACE,2CAAC;EAAc,mBAAgB;EAAe;EAAQ,SAAS;EAAiB,GAAI;EACjF;GACa;;AAIpB,MAAa,YAAY,EAAE,QAAQ,UAAU,GAAG,WAA0B;AACxE,QACE,2CAAC;EAAe,mBAAgB;EAAoB;EAAQ,GAAI;EAC7D;GACc"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ndla/ui",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "56.0.
|
|
4
|
+
"version": "56.0.166-alpha.0",
|
|
5
5
|
"description": "UI component library for NDLA",
|
|
6
6
|
"license": "GPL-3.0",
|
|
7
7
|
"exports": {
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
"@ndla/core": "^6.0.6-alpha.0",
|
|
41
41
|
"@ndla/icons": "^8.0.75-alpha.0",
|
|
42
42
|
"@ndla/licenses": "^10.0.8-alpha.0",
|
|
43
|
-
"@ndla/primitives": "^1.0.
|
|
44
|
-
"@ndla/safelink": "^7.0.
|
|
43
|
+
"@ndla/primitives": "^1.0.115-alpha.0",
|
|
44
|
+
"@ndla/safelink": "^7.0.118-alpha.0",
|
|
45
45
|
"@ndla/styled-system": "^0.0.46",
|
|
46
46
|
"@ndla/util": "^5.0.17-alpha.0",
|
|
47
47
|
"html-react-parser": "^5.2.8"
|
|
@@ -62,5 +62,5 @@
|
|
|
62
62
|
"publishConfig": {
|
|
63
63
|
"access": "public"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "9ed9437ecea8f7f194485c631650de20b50cb23b"
|
|
66
66
|
}
|
package/src/Embed/ImageEmbed.tsx
CHANGED
|
@@ -232,6 +232,7 @@ export const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article",
|
|
|
232
232
|
sizes={expanded ? expandedSizes : sizes}
|
|
233
233
|
alt={altText}
|
|
234
234
|
src={data.image.imageUrl}
|
|
235
|
+
variants={data.image.variants}
|
|
235
236
|
lang={lang}
|
|
236
237
|
onClick={figureProps?.float ? toggleImageSize : undefined}
|
|
237
238
|
variant="rounded"
|
package/src/Grid/Grid.tsx
CHANGED
|
@@ -93,7 +93,7 @@ export const Grid = ({ columns, border, children, ...rest }: GridProps) => {
|
|
|
93
93
|
|
|
94
94
|
export const GridItem = ({ border, children, ...rest }: GridItemProps) => {
|
|
95
95
|
return (
|
|
96
|
-
<StyledGridItem data-embed-type="grid-
|
|
96
|
+
<StyledGridItem data-embed-type="grid-cell" border={border} {...rest}>
|
|
97
97
|
{children}
|
|
98
98
|
</StyledGridItem>
|
|
99
99
|
);
|